:root {
  --sky: #91d5e7;
  --sky-pale: #dff4f7;
  --navy: #164879;
  --ink: #172839;
  --green: #10a957;
  --leaf: #b7d63f;
  --lime: #d8e33b;
  --coral: #f15a2b;
  --pink: #ef5f77;
  --sun: #ffdf36;
  --sand: #f3d291;
  --cream: #fffaf0;
  --white: #fff;
  --radius-lg: 2rem;
  --radius-md: 1.25rem;
  --shadow: 0 1.5rem 4rem rgba(22, 72, 121, .16);
  --display: "Arial Rounded MT Bold", "Trebuchet MS", ui-rounded, sans-serif;
  --body: "Trebuchet MS", ui-rounded, system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--cream);
  font-family: var(--body);
  line-height: 1.6;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 {
  font-family: var(--display);
  line-height: .98;
  letter-spacing: -.04em;
}
h1 { font-size: clamp(3.4rem, 7vw, 7rem); margin-bottom: 1.75rem; }
h2 { font-size: clamp(2.8rem, 5.4vw, 5.5rem); margin-bottom: 1.5rem; }
h3 { font-size: clamp(2.2rem, 4vw, 3.5rem); margin-bottom: .9rem; }
p { font-size: clamp(1rem, 1.3vw, 1.2rem); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: fixed;
  z-index: 1000;
  top: .75rem;
  left: .75rem;
  padding: .8rem 1rem;
  background: var(--white);
  border-radius: .75rem;
  transform: translateY(-150%);
}
.skip-link:focus { transform: none; }
.page-width { width: min(1180px, calc(100% - 3rem)); margin-inline: auto; }
.section-pad { padding: clamp(5rem, 10vw, 9rem) 0; }
.eyebrow {
  margin-bottom: .8rem;
  color: var(--coral);
  font-family: var(--display);
  font-size: .88rem;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  min-height: 3.5rem;
  padding: .8rem 1.4rem;
  border: 0;
  border-radius: 999px;
  font-family: var(--display);
  font-weight: 900;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.button:hover { transform: translateY(-3px) rotate(-1deg); }
.button:focus-visible, .animal-stop:focus-visible, .sound-toggle:focus-visible, .menu-toggle:focus-visible, a:focus-visible {
  outline: 4px solid var(--sun);
  outline-offset: 4px;
}
.button-primary { color: var(--white); background: var(--navy); box-shadow: 0 .7rem 0 #0d355a; }
.button-primary:hover { box-shadow: 0 .9rem 0 #0d355a; }
.button-sun { color: var(--ink); background: var(--sun); box-shadow: 0 .5rem 0 #e4a819; }
.button-small { min-height: 2.85rem; padding: .6rem 1.1rem; font-size: .92rem; }
.text-link { font-family: var(--display); font-weight: 900; text-decoration-thickness: 2px; text-underline-offset: .3rem; }

.site-header {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem max(1.5rem, calc((100vw - 1180px) / 2));
  transition: background .25s ease, box-shadow .25s ease, padding .25s ease;
}
.site-header.scrolled { padding-block: .65rem; background: rgba(255, 250, 240, .94); box-shadow: 0 .4rem 2rem rgba(22, 72, 121, .12); backdrop-filter: blur(14px); }
.brand img { width: clamp(150px, 15vw, 225px); height: auto; }
.site-nav { display: flex; align-items: center; gap: clamp(.9rem, 2vw, 1.8rem); }
.site-nav > a:not(.button) { font-family: var(--display); font-size: .94rem; font-weight: 800; text-decoration: none; }
.site-nav > a:not(.button):hover { color: var(--coral); }
.menu-toggle { display: none; width: 3rem; height: 3rem; border: 0; border-radius: 50%; background: var(--white); }
.menu-toggle span:not(.sr-only) { display: block; width: 1.25rem; height: 2px; margin: 4px auto; background: var(--navy); }

.hero { position: relative; min-height: 780px; padding: 10rem 0 6rem; background: var(--sky); overflow: hidden; }
.hero-inner { position: relative; z-index: 3; display: grid; grid-template-columns: 1.1fr .62fr; align-items: center; gap: clamp(3rem, 7vw, 6rem); }
.hero-copy { max-width: 690px; }
.hero h1 { color: var(--navy); }
.hero h1 em { color: var(--coral); font-style: normal; }
.hero-lede { max-width: 610px; margin-bottom: 2.25rem; font-size: clamp(1.15rem, 1.8vw, 1.4rem); }
.hero-actions { display: flex; align-items: center; gap: 1.75rem; flex-wrap: wrap; }
.hero-book { position: relative; justify-self: center; width: min(290px, 28vw); aspect-ratio: 1268 / 1600; perspective: 1200px; }
.hero-book > img { position: relative; z-index: 2; width: 100%; height: auto; max-height: 520px; object-fit: contain; border-radius: .7rem 1.2rem 1.2rem .7rem; box-shadow: -1rem 1.6rem 0 #fff, -1.4rem 2.2rem 3.5rem rgba(20, 59, 78, .25); transform: rotate(3deg); transition: transform .3s ease; }
.hero-book:hover > img { transform: rotate(1deg) translateY(-6px); }
.hero-sticker { position: absolute; z-index: 4; right: -2.5rem; top: 12%; display: grid; place-items: center; width: 7.2rem; height: 7.2rem; padding: .9rem; color: var(--navy); background: var(--sun); border: 4px solid var(--white); border-radius: 44% 56% 48% 52%; font-family: var(--display); font-size: .88rem; line-height: 1.15; text-align: center; transform: rotate(9deg); box-shadow: var(--shadow); }
.hero-sticker { animation: stickerFloat 3.5s ease-in-out infinite; }
.hero-book:hover .hero-sticker { animation: stickerWiggle .55s ease both; }
.cloud { position: absolute; z-index: 1; width: 11rem; height: 4rem; background: rgba(255,255,255,.88); border-radius: 999px; }
.cloud::before, .cloud::after { content: ""; position: absolute; bottom: 0; background: inherit; border-radius: 50%; }
.cloud::before { left: 1.8rem; width: 5rem; height: 5rem; }
.cloud::after { right: 1.3rem; width: 6.2rem; height: 6.2rem; }
.cloud-one { left: -3rem; top: 24%; animation: drift 12s ease-in-out infinite alternate; }
.cloud-two { right: -2rem; top: 13%; transform: scale(.7); animation: drift 15s ease-in-out infinite alternate-reverse; }
.sun { position: absolute; z-index: 0; top: 8rem; right: 31%; width: 12rem; height: 12rem; border: 2.2rem solid rgba(255,255,255,.12); background: rgba(255, 223, 54, .75); border-radius: 50%; }
.hero-hills { position: absolute; z-index: 1; left: -5%; bottom: -2rem; width: 110%; height: 31%; background: var(--navy); clip-path: polygon(0 43%, 12% 10%, 24% 58%, 39% 22%, 53% 66%, 68% 9%, 81% 51%, 93% 20%, 100% 43%, 100% 100%, 0 100%); opacity: .95; }
.leaf-line { position: absolute; z-index: 2; bottom: -1px; left: 0; width: 100%; height: 7rem; background: var(--green); clip-path: polygon(0 65%, 4% 40%, 9% 64%, 14% 31%, 20% 67%, 26% 42%, 33% 63%, 40% 25%, 48% 65%, 55% 37%, 62% 66%, 69% 29%, 75% 64%, 82% 34%, 89% 62%, 95% 36%, 100% 55%, 100% 100%, 0 100%); }
@keyframes drift { to { transform: translateX(2rem) translateY(.8rem); } }
@keyframes stickerFloat { 0%, 100% { transform: rotate(9deg) translateY(0); } 50% { transform: rotate(6deg) translateY(-7px); } }
@keyframes stickerWiggle { 0%, 100% { transform: rotate(9deg); } 35% { transform: rotate(-3deg) scale(1.08); } 70% { transform: rotate(14deg) scale(1.03); } }
@keyframes playfulPop { 0%, 100% { scale: 1; } 45% { scale: .96; } 72% { scale: 1.035; } }

.sisters-section { position: relative; background: var(--cream); }
.section-heading { max-width: 770px; margin: 0 auto clamp(3rem, 6vw, 5rem); text-align: center; }
.section-heading > p:last-child { max-width: 650px; margin-inline: auto; }
.sister-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.sister-card { display: grid; grid-template-columns: 1.1fr .9fr; min-height: 510px; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); }
.sister-card.is-visible { transition: opacity .7s ease, transform .35s ease, box-shadow .35s ease; }
.sister-card.is-visible:hover { transform: translateY(-9px) rotate(-.5deg); box-shadow: 0 2rem 4.5rem rgba(22, 72, 121, .22); }
.sister-card:nth-child(2).is-visible:hover { transform: translateY(-9px) rotate(.5deg); }
.sister-aana { background: #ffe3b3; }
.sister-yana { background: #d7ecf6; }
.sister-art { position: relative; display: flex; align-items: flex-end; justify-content: center; min-height: 390px; overflow: hidden; }
.sister-art::after { content: ""; position: absolute; right: -8%; bottom: -18%; width: 90%; height: 46%; border-radius: 50%; background: rgba(255,255,255,.45); }
.sister-art img { position: relative; z-index: 2; width: 100%; height: 100%; object-fit: cover; }
.sister-art img { transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.sister-card:hover .sister-art img { transform: scale(1.045) translateY(-4px); }
.trait-bubble { position: absolute; z-index: 3; padding: .45rem .8rem; color: var(--white); background: var(--coral); border: 3px solid var(--white); border-radius: 999px; font-family: var(--display); font-size: .78rem; font-weight: 900; box-shadow: 0 .4rem 1rem rgba(22,72,121,.15); }
.sister-yana .trait-bubble { background: var(--navy); }
.trait-one { top: 9%; left: 7%; transform: rotate(-6deg); }
.trait-two { right: 4%; bottom: 13%; transform: rotate(5deg); }
.sister-card:hover .trait-one { transform: rotate(-10deg) translateY(-6px); }
.sister-card:hover .trait-two { transform: rotate(9deg) translateY(-6px); }
.trait-bubble { transition: transform .3s ease; }
.sister-copy { align-self: center; padding: 2.2rem 2rem 2.2rem .5rem; }
.card-number { color: var(--coral); font-family: var(--display); font-weight: 900; }
.sister-yana .card-number { color: var(--navy); }
.sister-copy h3 { color: var(--navy); }
.together-note { margin: 3rem auto 0; color: var(--navy); font-family: var(--display); font-weight: 900; text-align: center; }
.together-note span { color: var(--coral); margin-inline: .6rem; }

.quiz-section { position: relative; background: #ffd99b; overflow: hidden; }
.quiz-section::before, .quiz-section::after { content: ""; position: absolute; width: 20rem; height: 20rem; border: 3rem solid rgba(255,255,255,.25); border-radius: 50%; }
.quiz-section::before { left: -11rem; top: -10rem; }
.quiz-section::after { right: -12rem; bottom: -12rem; }
.quiz-layout { position: relative; z-index: 2; display: grid; grid-template-columns: .85fr 1fr; align-items: center; gap: clamp(3rem, 8vw, 7rem); }
.quiz-intro h2 { color: var(--navy); }
.quiz-intro > p:not(.eyebrow) { max-width: 560px; }
.quiz-sisters { display: flex; align-items: flex-start; gap: .8rem; height: 215px; margin-top: 2rem; overflow: visible; }
.quiz-sisters img { width: 145px; height: 191px; object-fit: cover; object-position: center; border: 5px solid var(--white); border-radius: 1.2rem; box-shadow: 0 .8rem 1.5rem rgba(22,72,121,.15); transform: rotate(-3deg); }
.quiz-sisters img:last-child { margin-top: .65rem; transform: rotate(3deg); }
.quiz-card { min-height: 480px; display: grid; place-items: center; padding: clamp(2rem, 5vw, 4rem); background: var(--white); border: .55rem solid var(--navy); border-radius: 2.2rem; box-shadow: 1rem 1rem 0 rgba(241,90,43,.85); }
.quiz-start, .quiz-result { max-width: 590px; text-align: center; }
.quiz-compass { display: grid; place-items: center; width: 4.5rem; height: 4.5rem; margin: 0 auto 1.3rem; color: var(--navy); background: var(--sun); border-radius: 50%; font-size: 2rem; animation: compassTurn 5s ease-in-out infinite; }
@keyframes compassTurn { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(18deg); } }
.quiz-kicker, .quiz-count { color: var(--coral); font-family: var(--display); font-size: .82rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.quiz-card h3 { color: var(--navy); font-size: clamp(2rem, 4vw, 3.2rem); }
.quiz-game { width: 100%; }
.quiz-progress { width: 100%; height: .7rem; margin-bottom: 1rem; overflow: hidden; background: var(--sky-pale); border-radius: 999px; }
.quiz-progress span { display: block; width: 25%; height: 100%; background: var(--coral); border-radius: inherit; transition: width .35s ease; }
.quiz-options { display: grid; gap: .85rem; margin-top: 2rem; }
.quiz-option { width: 100%; padding: 1rem 1.2rem; color: var(--ink); background: var(--sky-pale); border: 3px solid transparent; border-radius: 1rem; font-family: var(--body); font-size: 1rem; font-weight: 800; text-align: left; cursor: pointer; transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.quiz-option:hover { transform: translateX(.45rem); border-color: var(--navy); background: var(--white); }
.quiz-option:focus-visible, .text-button:focus-visible { outline: 4px solid var(--sun); outline-offset: 3px; }
.result-portraits { display: flex; justify-content: center; margin-bottom: 1rem; }
.result-portraits img { width: 105px; height: 105px; object-fit: cover; object-position: center 24%; border: 5px solid var(--sun); border-radius: 50%; box-shadow: 0 .6rem 1.3rem rgba(22,72,121,.16); }
.result-portraits img + img { margin-left: -1rem; }
.text-button { padding: .5rem; color: var(--navy); background: none; border: 0; font-family: var(--display); font-weight: 900; text-decoration: underline; text-underline-offset: .3rem; cursor: pointer; }
.quiz-answer-out { animation: answerOut .24s ease both; }
.quiz-answer-in { animation: answerIn .3s ease both; }
@keyframes answerOut { to { opacity: 0; transform: translateX(-18px); } }
@keyframes answerIn { from { opacity: 0; transform: translateX(18px); } }

.book-section { position: relative; background: var(--leaf); overflow: hidden; }
.book-layout { position: relative; z-index: 2; display: grid; grid-template-columns: .82fr 1fr; align-items: center; gap: clamp(4rem, 9vw, 8rem); }
.book-showcase { position: relative; justify-self: center; width: min(330px, 72vw); }
.book-frame { padding: .7rem; background: var(--white); border-radius: 1rem; box-shadow: 1rem 1.2rem 0 rgba(17, 89, 51, .24), var(--shadow); transform: rotate(-3deg); }
.book-frame { transition: transform .18s ease-out, box-shadow .3s ease; will-change: transform; }
.book-frame:hover { box-shadow: 1.2rem 1.45rem 0 rgba(17, 89, 51, .24), 0 2rem 4rem rgba(22,72,121,.22); }
.book-frame img { width: 100%; height: auto; max-height: 520px; object-fit: contain; border-radius: .45rem; }
.book-copy { max-width: 610px; }
.book-copy h2 { color: var(--navy); }
.book-intro { font-size: clamp(1.1rem, 1.6vw, 1.3rem); }
blockquote { margin: 2rem 0; padding: 1.3rem 1.5rem; background: rgba(255,255,255,.58); border-left: .5rem solid var(--coral); border-radius: 0 var(--radius-md) var(--radius-md) 0; }
blockquote p { margin: 0; font-family: var(--display); font-size: clamp(1.05rem, 1.8vw, 1.35rem); font-weight: 900; }
.book-features { display: grid; gap: .7rem; margin: 0 0 2.3rem; padding: 0; list-style: none; }
.book-features li { display: flex; align-items: center; gap: .75rem; font-weight: 700; }
.book-features li { transition: transform .2s ease; }
.book-features li:hover { transform: translateX(.5rem); }
.book-features span { display: grid; place-items: center; width: 2rem; height: 2rem; color: var(--white); background: var(--navy); border-radius: 50%; }
.sound-word { position: absolute; z-index: 5; color: var(--navy); font-family: var(--display); font-size: clamp(1.4rem, 3vw, 2.4rem); font-weight: 900; }
.sound-brum { left: -2.5rem; top: -3.25rem; transform: rotate(-9deg); }
.sound-roar { right: -4rem; bottom: 7%; transform: rotate(10deg); }
.book-landscape { position: absolute; inset: auto 0 0; height: 20%; background: var(--green); clip-path: polygon(0 70%, 12% 40%, 29% 68%, 43% 27%, 58% 65%, 74% 35%, 89% 60%, 100% 42%, 100% 100%, 0 100%); opacity: .55; }

.sounds-section { background: var(--sky-pale); }
.sounds-heading { display: flex; align-items: end; justify-content: space-between; gap: 3rem; margin-bottom: 4rem; }
.sounds-heading > div { max-width: 700px; }
.sounds-heading > div > p:last-child { margin-bottom: 0; }
.sound-toggle { display: inline-flex; align-items: center; gap: .7rem; min-width: 145px; padding: .7rem 1rem; color: var(--navy); background: var(--white); border: 2px solid var(--navy); border-radius: 999px; font-weight: 800; cursor: pointer; }
.sound-toggle-icon { display: grid; place-items: center; width: 2rem; height: 2rem; color: var(--white); background: var(--navy); border-radius: 50%; }
.sound-toggle[aria-pressed="true"] { color: var(--white); background: var(--navy); }
.sound-toggle[aria-pressed="true"] .sound-toggle-icon { color: var(--navy); background: var(--sun); }
.animal-trail { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; min-height: 330px; gap: 1rem; }
.trail-line { position: absolute; left: 4%; right: 4%; top: 53%; height: 5rem; border-top: .8rem dashed #e4ba6c; border-radius: 50%; transform: rotate(-3deg); }
.animal-stop { position: relative; display: grid; justify-items: center; gap: .35rem; padding: 0; background: transparent; border: 0; cursor: pointer; }
.animal-stop:nth-of-type(even) { transform: translateY(-2rem); }
.animal-stop:nth-of-type(odd) { transform: translateY(2rem); }
.animal-emoji { position: relative; z-index: 2; display: grid; place-items: center; width: clamp(7rem, 14vw, 10rem); height: clamp(7rem, 14vw, 10rem); background: var(--white); border: .45rem solid var(--sun); border-radius: 50%; font-size: clamp(3.7rem, 7vw, 5.5rem); filter: drop-shadow(0 .8rem .8rem rgba(22,72,121,.14)); transition: transform .2s ease; }
.animal-emoji { overflow: hidden; }
.animal-emoji img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; transition: transform .35s ease, filter .35s ease; }
.animal-stop:hover .animal-emoji { transform: translateY(-8px) rotate(4deg); }
.animal-stop:hover .animal-emoji img { transform: scale(1.08); filter: saturate(1.1); }
.animal-stop.is-heard .animal-emoji { animation: animalPop .55s ease; border-color: var(--coral); }
@keyframes animalPop { 40% { transform: scale(1.16) rotate(-6deg); } }
.animal-name { font-family: var(--display); font-weight: 900; }
.animal-word { position: absolute; z-index: 4; top: -2rem; right: -1rem; padding: .25rem .6rem; color: var(--white); background: var(--coral); border-radius: .7rem; font-family: var(--display); font-weight: 900; opacity: 0; transform: rotate(7deg) scale(.7); transition: opacity .2s ease, transform .2s ease; }
.animal-stop.is-heard .animal-word { opacity: 1; transform: rotate(7deg) scale(1); }
.map-pin { position: absolute; z-index: 4; left: 8%; top: 2%; display: grid; place-items: center; width: 2rem; height: 2rem; color: var(--white); background: var(--coral); border: 3px solid var(--white); border-radius: 50% 50% 50% 0; font-family: var(--display); font-size: .75rem; font-weight: 900; transform: rotate(-45deg); }
.map-pin::first-letter { transform: rotate(45deg); }
.chorus-message { margin: 3.5rem 0 0; color: var(--navy); font-family: var(--display); font-weight: 900; text-align: center; }

.rhyme-section { position: relative; color: var(--ink); background: #ffd99b; overflow: hidden; }
.rhyme-section::before { content: ""; position: absolute; width: 25rem; height: 25rem; right: -11rem; top: -12rem; border: 4rem solid rgba(255,255,255,.24); border-radius: 50%; }
.rhyme-heading { max-width: 760px; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.rhyme-heading h2 { color: var(--navy); }
.rhyme-heading > p:last-child { max-width: 650px; }
.rhyme-maker { position: relative; display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(2rem, 5vw, 4rem); align-items: stretch; }
.rhyme-builder { display: grid; gap: 1.4rem; }
.rhyme-step { min-width: 0; margin: 0; padding: 1.2rem; background: rgba(255,255,255,.72); border: 0; border-radius: 1.25rem; }
.rhyme-step legend { padding: 0 .45rem; color: var(--navy); font-family: var(--display); font-size: 1.05rem; font-weight: 900; }
.rhyme-step legend span { display: inline-grid; place-items: center; width: 1.8rem; height: 1.8rem; margin-right: .4rem; color: var(--white); background: var(--coral); border-radius: 50%; font-size: .78rem; }
.rhyme-animal-options { display: grid; grid-template-columns: repeat(5, 1fr); gap: .65rem; }
.rhyme-animal-choice { display: grid; justify-items: center; gap: .25rem; min-width: 0; padding: .45rem .25rem .55rem; color: var(--navy); background: transparent; border: 3px solid transparent; border-radius: 1rem; font-family: var(--display); font-size: .78rem; font-weight: 900; cursor: pointer; transition: transform .2s ease, background .2s ease, border-color .2s ease; }
.rhyme-animal-choice img { width: 4.25rem; height: 4.25rem; object-fit: cover; background: var(--white); border-radius: 50%; }
.rhyme-animal-choice:hover { transform: translateY(-4px) rotate(-2deg); background: var(--white); }
.rhyme-animal-choice[aria-pressed="true"] { background: var(--sun); border-color: var(--navy); transform: translateY(-3px); }
.rhyme-chip-options { display: flex; flex-wrap: wrap; gap: .65rem; }
.rhyme-chip { padding: .65rem .9rem; color: var(--ink); background: var(--white); border: 2px solid transparent; border-radius: 999px; font-weight: 800; cursor: pointer; transition: transform .2s ease, background .2s ease, border-color .2s ease; }
.rhyme-chip:hover { transform: translateY(-2px); border-color: var(--navy); }
.rhyme-chip[aria-pressed="true"] { color: var(--white); background: var(--navy); border-color: var(--navy); }
.rhyme-animal-choice:focus-visible, .rhyme-chip:focus-visible, .rhyme-shuffle:focus-visible { outline: 4px solid var(--coral); outline-offset: 3px; }
.rhyme-stage { position: relative; min-height: 520px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 2.5rem; color: var(--navy); background: var(--white); border: .55rem solid var(--navy); border-radius: 2rem; box-shadow: 1rem 1rem 0 var(--coral); text-align: center; overflow: hidden; }
.rhyme-stage::before { content: ""; position: absolute; inset: auto -10% -6rem; height: 15rem; background: var(--sky-pale); border-radius: 50% 50% 0 0; }
.rhyme-character { position: relative; z-index: 1; flex: 1; width: min(230px, 70%); min-height: 205px; background-repeat: no-repeat; background-position: center; background-size: contain; filter: drop-shadow(0 .8rem .7rem rgba(22,72,121,.16)); transition: background-image .2s ease; }
.rhyme-character.is-changing { animation: rhymeCharacterPop .45s ease; }
.rhyme-character.is-speaking { animation: rhymeCharacterBounce .75s ease-in-out infinite; }
.rhyme-label, .rhyme-line, .rhyme-controls { position: relative; z-index: 2; }
.rhyme-label { margin: .7rem 0 .35rem; color: var(--coral); font-family: var(--display); font-size: .78rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.rhyme-line { min-height: 4.4rem; margin-bottom: 1.4rem; font-family: var(--display); font-size: clamp(1.45rem, 2.5vw, 2rem); font-weight: 900; line-height: 1.25; }
.rhyme-word { display: inline; padding: .05em .04em; border-radius: .25em; transition: color .15s ease, background .15s ease; }
.rhyme-word.is-spoken { color: var(--white); background: var(--coral); }
.rhyme-controls { display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; }
.rhyme-read { cursor: pointer; }
.rhyme-shuffle { padding: .7rem .4rem; color: var(--navy); background: transparent; border: 0; font-family: var(--display); font-weight: 900; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .3rem; cursor: pointer; }
.rhyme-sparkle { position: absolute; z-index: 2; color: var(--sun); font-size: 2rem; animation: sparkleFloat 2.4s ease-in-out infinite; }
.sparkle-one { top: 8%; left: 10%; }
.sparkle-two { top: 18%; right: 10%; animation-delay: -.8s; }
@keyframes rhymeCharacterPop { 45% { transform: scale(1.12) rotate(-5deg); } }
@keyframes rhymeCharacterBounce { 50% { transform: translateY(-10px) rotate(2deg); } }
@keyframes sparkleFloat { 50% { transform: translateY(-8px) rotate(25deg) scale(1.15); } }

.peek-section { background: var(--navy); color: var(--white); overflow: hidden; }
.peek-section .eyebrow { color: var(--sun); }
.section-heading-left { margin-left: 0; text-align: left; }
.scene-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; align-items: start; }
.scene-card { margin: 0; overflow: hidden; background: var(--white); border: .7rem solid var(--white); border-radius: 1.2rem; box-shadow: 0 1rem 2rem rgba(0,0,0,.18); transform: rotate(-2deg); }
.scene-card { transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease; }
.scene-card:nth-child(even) { margin-top: 3rem; transform: rotate(2deg); }
.scene-card img { width: 100%; height: 360px; object-fit: cover; object-position: center 58%; }
.scene-card img { transition: transform .55s cubic-bezier(.2,.8,.2,1), filter .35s ease; }
.scene-card.is-visible:hover { transform: translateY(-12px) rotate(-.5deg); box-shadow: 0 2rem 3rem rgba(0,0,0,.28); }
.scene-card:nth-child(even).is-visible:hover { transform: translateY(-12px) rotate(.5deg); }
.scene-card:hover img { transform: scale(1.055); filter: saturate(1.08); }
.scene-card figcaption { display: flex; align-items: center; gap: .6rem; padding: .8rem .4rem .25rem; color: var(--navy); font-family: var(--display); font-size: .92rem; font-weight: 900; }
.scene-card figcaption span { color: var(--coral); }

.together-section { background: var(--cream); }
.together-layout { display: grid; grid-template-columns: 1fr .72fr; align-items: center; gap: clamp(4rem, 9vw, 8rem); }
.together-copy h2 { color: var(--navy); }
.together-copy > p:not(.eyebrow) { max-width: 630px; }
.value-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 2.5rem; }
.value-grid div { padding: 1.25rem; background: var(--sky-pale); border-radius: 1rem; }
.value-grid div { transition: transform .25s ease, background .25s ease, box-shadow .25s ease; }
.value-grid div:hover { transform: translateY(-7px) rotate(-1deg); background: var(--white); box-shadow: 0 .8rem 1.5rem rgba(22,72,121,.12); }
.value-grid div:nth-child(even):hover { transform: translateY(-7px) rotate(1deg); }
.value-grid strong, .value-grid span { display: block; }
.value-grid strong { color: var(--coral); font-family: var(--display); font-size: 1.25rem; }
.value-grid span { font-size: .92rem; }
.map-card { position: relative; justify-self: center; width: min(360px, 100%); padding: .75rem; background: var(--white); border-radius: 1.5rem; box-shadow: var(--shadow); transform: rotate(3deg); }
.map-card { overflow: visible; transition: transform .18s ease-out, box-shadow .3s ease; will-change: transform; }
.map-card img { width: 100%; height: min(500px, 65vh); object-fit: cover; border-radius: .9rem; }
.map-card img { transition: transform .5s cubic-bezier(.2,.8,.2,1), filter .3s ease; }
.map-card:hover img { transform: scale(1.025); filter: saturate(1.08); }
.map-label { position: absolute; left: -2.2rem; bottom: 10%; padding: .7rem 1.1rem; color: var(--white); background: var(--coral); border: 4px solid var(--white); border-radius: 999px; font-family: var(--display); font-weight: 900; transform: rotate(-8deg); }

.next-section { position: relative; min-height: 610px; display: grid; place-items: center; color: var(--white); background: #505b98; overflow: hidden; text-align: center; }
.next-section::after { content: ""; position: absolute; inset: auto -5% -8rem; height: 18rem; background: var(--leaf); border-radius: 50% 50% 0 0; transform: rotate(-2deg); }
.stars { position: absolute; inset: 0; opacity: .75; background-image: radial-gradient(circle, #fff 1.5px, transparent 2px), radial-gradient(circle, #fff 1px, transparent 1.5px); background-position: 0 0, 35px 45px; background-size: 90px 90px, 120px 120px; }
.next-inner { position: relative; z-index: 2; max-width: 850px; }
.next-inner .eyebrow { color: var(--sun); }
.next-inner > p:not(.eyebrow) { max-width: 650px; margin: 0 auto 2.5rem; }
.road-signs { display: flex; justify-content: center; align-items: center; gap: 1rem; flex-wrap: wrap; }
.road-signs span { padding: .8rem 1.2rem; color: var(--ink); background: var(--sand); border: 4px solid #9d592d; border-radius: .6rem; font-family: var(--display); font-weight: 900; transform: rotate(-3deg); }
.road-signs span:last-child { color: var(--white); background: var(--coral); transform: rotate(3deg); }

.creators-section { background: var(--sky-pale); }
.creators-layout { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(3rem, 8vw, 8rem); }
.creator-heading h2 { color: var(--navy); }
.creator-lede { font-size: clamp(1.2rem, 2vw, 1.6rem); }
.creator-names { display: grid; gap: 1.1rem; margin-top: 2.5rem; }
.creator-names div { padding-top: 1rem; border-top: 2px solid rgba(22,72,121,.18); }
.creator-names div { transition: transform .22s ease, border-color .22s ease; }
.creator-names div:hover { transform: translateX(.5rem); border-color: var(--coral); }
.creator-names span, .creator-names strong { display: block; }
.creator-names span { color: var(--coral); font-size: .82rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.creator-names strong { color: var(--navy); font-family: var(--display); font-size: 1.5rem; }

.buy-section { padding: clamp(5rem, 10vw, 8rem) 0; color: var(--white); background: var(--navy); overflow: hidden; }
.buy-inner { display: grid; grid-template-columns: .72fr 1fr; align-items: center; gap: clamp(4rem, 9vw, 8rem); }
.buy-art { justify-self: center; width: min(275px, 55vw); }
.buy-art { transition: transform .18s ease-out; will-change: transform; }
.buy-art img { width: 100%; height: auto; max-height: 460px; object-fit: contain; border: .65rem solid var(--white); border-radius: 1rem; box-shadow: 1rem 1rem 0 var(--coral); transform: rotate(-4deg); }
.buy-copy { max-width: 650px; }
.buy-copy .eyebrow { color: var(--sun); }
.buy-copy > p:not(.eyebrow) { max-width: 570px; margin-bottom: 2rem; font-size: 1.2rem; }

.site-footer { padding: 4rem 0 1.2rem; color: var(--navy); background: var(--sand); }
.footer-main { display: grid; grid-template-columns: 1.1fr .7fr 1fr; gap: 3rem; }
.footer-main img { width: 180px; height: auto; margin-bottom: 1rem; }
.footer-main nav { display: grid; gap: .45rem; align-content: start; }
.footer-main a { font-family: var(--display); font-weight: 800; }
.footer-main nav a { text-decoration: none; }
.footer-main nav a:hover { color: var(--coral); }
.footer-buy p { margin-bottom: .5rem; }
.footer-legal { display: flex; justify-content: space-between; gap: 2rem; margin-top: 3rem; padding-top: 1.2rem; border-top: 1px solid rgba(22,72,121,.22); }
.footer-legal p, .footer-legal a { margin: 0; font-size: .8rem; }
.footer-legal-links { display: flex; gap: 1.25rem; }

.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.reveal.is-visible { opacity: 1; transform: none; }
.playful-pop { animation: playfulPop .38s ease; }

@media (max-width: 1000px) {
  .site-nav { position: fixed; inset: 0 0 auto auto; width: min(360px, 88vw); display: grid; align-content: start; gap: 0; padding: 6rem 1.5rem 2rem; background: var(--cream); box-shadow: -1rem 0 3rem rgba(22,72,121,.2); transform: translateX(110%); transition: transform .25s ease; }
  .site-nav.is-open { transform: none; }
  .site-nav > a:not(.button) { padding: 1rem 0; border-bottom: 1px solid rgba(22,72,121,.15); font-size: 1.15rem; }
  .site-nav .button { margin-top: 1.3rem; }
  .menu-toggle { position: relative; z-index: 2; display: block; }
  .hero { min-height: auto; padding-top: 9rem; }
  .hero-inner { grid-template-columns: 1fr .55fr; gap: 2.5rem; }
  .hero-sticker { right: -1.5rem; width: 6.8rem; height: 6.8rem; font-size: .82rem; }
  .sister-card { grid-template-columns: 1fr; }
  .quiz-layout { grid-template-columns: .75fr 1fr; gap: 2.5rem; }
  .rhyme-maker { grid-template-columns: 1fr; }
  .sister-copy { padding: 2rem; }
  .scene-strip { grid-template-columns: 1fr 1fr; }
  .animal-trail { grid-template-columns: repeat(3, 1fr); row-gap: 4rem; }
  .trail-line { display: none; }
  .animal-stop:nth-of-type(n) { transform: none; }
}

@media (max-width: 720px) {
  .page-width { width: min(100% - 2rem, 560px); }
  .section-pad { padding: 5rem 0; }
  .site-header { padding: .8rem 1rem; }
  .hero { padding: 8rem 0 6rem; }
  .hero-inner { grid-template-columns: 1fr; text-align: center; }
  .hero-copy { order: 1; }
  .hero-book { order: 0; width: min(250px, 62vw); margin-bottom: 1.5rem; }
  .hero-lede { margin-inline: auto; }
  .hero-actions { justify-content: center; }
  .hero-hills { height: 17%; }
  .leaf-line { height: 4rem; }
  .sun { top: 7rem; right: -2rem; width: 9rem; height: 9rem; }
  .cloud-one { top: 30%; transform: scale(.65); }
  .sister-grid, .quiz-layout, .book-layout, .together-layout, .creators-layout, .buy-inner, .footer-main { grid-template-columns: 1fr; }
  .sister-card { min-height: 0; }
  .sister-art { height: min(430px, 56vh); min-height: 330px; }
  .sister-art img { height: 100%; object-fit: cover; object-position: center 38%; }
  .sister-copy { padding: 1.6rem 1.5rem 1.8rem; }
  .trait-one { top: 6%; left: 6%; }
  .trait-two { right: 4%; bottom: 7%; }
  .quiz-sisters { display: none; }
  .quiz-card { min-height: 440px; padding: 1.5rem; border-width: .4rem; box-shadow: .65rem .65rem 0 rgba(241,90,43,.85); }
  .book-layout { gap: 4rem; }
  .book-showcase { width: min(270px, 68vw); }
  .sound-brum { left: -.5rem; top: -2.5rem; }
  .sound-roar { right: -1rem; }
  .sounds-heading { display: grid; gap: 1.5rem; margin-bottom: 3rem; }
  .animal-trail { grid-template-columns: 1fr 1fr; }
  .animal-stop:last-child { grid-column: 1 / -1; }
  .rhyme-animal-options { grid-template-columns: repeat(3, 1fr); }
  .rhyme-stage { min-height: 480px; padding: 1.5rem; border-width: .4rem; box-shadow: .65rem .65rem 0 var(--coral); }
  .rhyme-character { width: min(210px, 68%); min-height: 190px; }
  .scene-strip { display: flex; gap: 1rem; margin-right: -1rem; padding-right: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; }
  .scene-card { flex: 0 0 72vw; max-width: 290px; margin-top: 0 !important; scroll-snap-align: center; }
  .scene-card img { height: 340px; }
  .value-grid { grid-template-columns: 1fr; }
  .map-card { width: min(320px, 82vw); margin-inline: auto; }
  .map-card img { height: 410px; }
  .map-label { left: -1rem; }
  .next-section { min-height: 650px; }
  .buy-inner { text-align: center; }
  .buy-copy > p:not(.eyebrow) { margin-inline: auto; }
  .footer-main { gap: 2rem; }
  .footer-legal { align-items: flex-start; flex-direction: column; gap: .5rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}