/* SPLUGGAGE Read-Alongs — bookshelf of covers */
.splra-shelf { max-width: 1000px; margin: 34px auto 0; padding: 0 16px; font-family: 'Fredoka', system-ui, sans-serif; scroll-margin-top: 110px; }
.splra-shelf__head { text-align: center; margin-bottom: 18px; }
.splra-shelf__kicker { display: inline-block; font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #0C5E63; background: #DDF6F5; padding: 5px 12px; border-radius: 999px; }
.splra-shelf__head h3 { margin: 10px 0 4px; font-size: clamp(24px, 3vw, 32px); font-weight: 700; color: #001D83; }
.splra-shelf__head p { margin: 0 auto; max-width: 560px; font-family: 'Patrick Hand', 'Fredoka', sans-serif; font-size: 19px; color: #3D4862; }
.splra-shelf__row {
	list-style: none; margin: 0; padding: 18px 8px 30px;
	display: flex; flex-wrap: wrap; justify-content: center; gap: 28px;
}
.splra-book { --w: 200px; width: var(--w); position: relative; }
.splra-book::before { /* the shelf the book stands on */
	content: ""; position: absolute; z-index: 0; left: -22px; right: -22px; top: calc(var(--w) * 1.5 - 6px); height: 18px;
	border-radius: 4px; background: linear-gradient(180deg, #C38A52 0%, #8B5A2B 70%, #6E451F 100%); box-shadow: 0 8px 14px rgba(92,58,24,.25);
}
.splra-book__link { position: relative; z-index: 1; }
.splra-book__link { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.splra-book__cover {
	position: relative; display: block; aspect-ratio: 2 / 3; border-radius: 6px 14px 14px 6px; overflow: hidden;
	background: #102a6b;
	box-shadow: inset 6px 0 10px -4px rgba(0,0,0,.45), 0 14px 26px rgba(0,18,51,.28), 0 2px 0 rgba(0,0,0,.2);
	transform-origin: left center; transition: transform .25s ease, box-shadow .25s ease;
}
.splra-book__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.splra-book__cover::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 10px; background: linear-gradient(90deg, rgba(255,255,255,.25), rgba(0,0,0,.15)); }
.splra-book__link:hover .splra-book__cover, .splra-book__link:focus-visible .splra-book__cover { transform: perspective(900px) rotateY(-14deg) translateY(-4px); box-shadow: inset 6px 0 10px -4px rgba(0,0,0,.45), 0 22px 34px rgba(0,18,51,.32); }
.splra-book__link:focus-visible { outline: 3px solid #2970E6; outline-offset: 6px; border-radius: 12px; }
.splra-book__draft { position: absolute; left: 8px; right: 8px; bottom: 8px; padding: 4px 8px; border-radius: 8px; background: rgba(255,243,205,.95); color: #7A5300; font-size: 12px; font-weight: 600; text-align: center; }
.splra-book__title { margin-top: 22px; font-weight: 700; font-size: 17px; line-height: 1.25; color: #001D83; }
.splra-book__meta { margin-top: 3px; font-size: 13px; color: #6B7596; }
.splra-book__open { margin-top: 8px; font-weight: 700; font-size: 14px; color: #0C5E63; }
@media (max-width: 480px) { .splra-book { --w: 160px; } .splra-shelf__row { gap: 30px; } }

/* "Read-Along Story" card on the Story Bench when books exist */
.cc-story-card--readalong .cc-readalong-open { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 9px 16px; border-radius: 999px; background: #F4B53F; color: #001D83; font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 14px; text-decoration: none; box-shadow: 0 3px 0 #C58A1A; }
.cc-story-card--readalong .cc-readalong-open:hover { background: #F7C25E; }