/* ==========================================================================
   Adventure with Makeda — storybook design system
   Art direction: Book 2 "The Forest of Belonging" illustration, framed in
   dimensional gold, royal plum, emerald and parchment.
   ========================================================================== */

:root {
  --plum-950: #12051d;
  --plum-900: #1d0930;
  --plum-800: #2d0f47;
  --plum-700: #45166a;
  --magenta: #b3136f;
  --magenta-hi: #e2439f;
  --emerald-950: #041f18;
  --emerald-900: #07352a;
  --emerald-700: #0e5c43;
  --leaf: #3f9a52;
  --gold: #f3c14f;
  --gold-hi: #ffe7a0;
  --gold-deep: #a9670f;
  --gold-shadow: #5c3204;
  --parchment: #f8e8c3;
  --parchment-deep: #ecd198;
  --ink: #2b1530;
  --ink-soft: #5a3b52;
  --cream: #fff5dc;

  --gold-metal: linear-gradient(135deg, #fff0b0 0%, #e8ac35 22%, #8a4f0c 48%, #f7cf62 70%, #b0701a 100%);
  --gold-text: linear-gradient(180deg, #fff3bf 0%, #f6c95a 48%, #c9831c 100%);

  --display: 'Cinzel', 'Trajan Pro', Georgia, serif;
  --story: 'Cormorant Garamond', Georgia, serif;
  --body: 'DM Sans', system-ui, sans-serif;

  --wrap: 1240px;
  --gutter: clamp(1rem, 4vw, 3rem);
  --header-h: 84px;
  --radius: 22px;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 400 1.0625rem/1.65 var(--body);
  color: var(--ink);
  background: var(--plum-950);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.1; margin: 0; letter-spacing: .01em; }
p { margin: 0 0 1em; }
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

:focus-visible { outline: 3px solid var(--gold-hi); outline-offset: 3px; border-radius: 6px; }
.skip { position: fixed; left: 1rem; top: -4rem; z-index: 200; padding: .75rem 1.1rem; border-radius: 999px; background: var(--gold-hi); color: var(--plum-900); font: 700 .85rem var(--body); text-decoration: none; transition: top .2s; }
.skip:focus { top: 1rem; }

/* ---------- shared type ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  margin: 0 0 .9rem;
  font: 700 .78rem/1 var(--display); letter-spacing: .16em; text-transform: uppercase;
  color: var(--magenta);
}
.eyebrow::before, .eyebrow::after { content: ""; width: 7px; height: 7px; background: currentColor; transform: rotate(45deg); opacity: .8; }
.on-dark .eyebrow { color: var(--gold); }
.display-xl { font-size: clamp(2.3rem, 5.2vw, 4.4rem); }
.display-l { font-size: clamp(2rem, 4vw, 3.4rem); }
.display-m { font-size: clamp(1.5rem, 2.6vw, 2.15rem); }
.gold-type {
  color: var(--gold);
  background: var(--gold-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 0 rgba(60, 20, 0, .55));
}
.lede { font-size: clamp(1.08rem, 1.4vw, 1.22rem); max-width: 38em; }
.story-quote { font: italic 600 clamp(1.5rem, 3vw, 2.4rem)/1.3 var(--story); margin: 0; }
.on-dark { color: #f6ead0; }
.center { text-align: center; }
.center .lede { margin-inline: auto; }

/* ornament divider (diamond + rules) */
.flourish { display: flex; align-items: center; justify-content: center; gap: .8rem; margin: 1.1rem auto 1.6rem; color: var(--gold-deep); }
.flourish::before, .flourish::after { content: ""; height: 2px; width: min(120px, 22vw); background: linear-gradient(90deg, transparent, currentColor); }
.flourish::after { transform: scaleX(-1); }
.flourish span { width: 12px; height: 12px; transform: rotate(45deg); background: var(--gold-metal); box-shadow: 0 0 0 3px rgba(243, 193, 79, .25); }
.on-dark .flourish { color: var(--gold); }

/* ---------- buttons ---------- */
.btn {
  --lift: 0px;
  display: inline-flex; align-items: center; justify-content: center; gap: .65rem;
  min-height: 52px; padding: .85rem 1.6rem;
  border: 0; border-radius: 999px; cursor: pointer;
  font: 700 .82rem/1 var(--display); letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  position: relative; isolation: isolate;
  transform: translateY(var(--lift));
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), filter .25s;
}
.btn::before { /* gold bezel */
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -2;
  background: var(--gold-metal);
  box-shadow: 0 5px 0 var(--gold-shadow), 0 12px 24px rgba(10, 0, 20, .35);
}
.btn::after { /* jewel face */
  content: ""; position: absolute; inset: 3px; border-radius: inherit; z-index: -1;
}
.btn-jewel { color: #fff; text-shadow: 0 1px 2px rgba(60, 0, 30, .6); }
.btn-jewel::after { background: radial-gradient(120% 140% at 50% 0%, #f25fb1 0%, #c2187a 45%, #7c0b4b 100%); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35); }
.btn-parchment { color: var(--plum-800); }
.btn-parchment::after { background: linear-gradient(180deg, #fff8e2, #f1d9a2); box-shadow: inset 0 2px 0 #fff; }
.btn-emerald { color: #fff7da; text-shadow: 0 1px 2px rgba(0, 30, 10, .6); }
.btn-emerald::after { background: radial-gradient(120% 140% at 50% 0%, #4fc27a 0%, #117048 50%, #06402b 100%); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .3); }
.btn .arrow { transition: transform .25s var(--ease); }
@media (hover: hover) {
  .btn:hover { --lift: -3px; filter: brightness(1.07); }
  .btn:hover .arrow { transform: translateX(4px); }
}
.btn:active { --lift: 2px; }
.btn:active::before { box-shadow: 0 2px 0 var(--gold-shadow), 0 6px 12px rgba(10, 0, 20, .3); }
.actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.9rem; }
.center .actions { justify-content: center; }

.text-link {
  display: inline-flex; align-items: center; gap: .5rem;
  font: 700 .82rem/1 var(--display); letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
  color: var(--magenta); padding: .5rem 0; border-bottom: 2px solid currentColor;
}
.on-dark .text-link { color: var(--gold); }
.text-link .arrow { transition: transform .25s var(--ease); }
.text-link:hover .arrow { transform: translateX(4px); }

/* ---------- gilded frames ---------- */
.frame {
  position: relative; margin: 0;
  padding: clamp(6px, .8vw, 10px);
  border-radius: var(--radius);
  background: var(--gold-metal);
  box-shadow: 0 2px 0 rgba(255, 240, 180, .6) inset, 0 24px 50px -14px rgba(8, 0, 20, .65), 0 0 0 1px rgba(80, 40, 0, .5);
}
.frame img { width: 100%; border-radius: calc(var(--radius) - 8px); box-shadow: 0 0 0 2px rgba(70, 30, 0, .55); }
.frame::after { /* inner jewel corners */
  content: ""; position: absolute; inset: -7px; pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%, #ff7ac2 0 3px, #9d0f5c 4px 6px, transparent 7px) 0 0 / 14px 14px no-repeat,
    radial-gradient(circle at 50% 50%, #ff7ac2 0 3px, #9d0f5c 4px 6px, transparent 7px) 100% 0 / 14px 14px no-repeat,
    radial-gradient(circle at 50% 50%, #ff7ac2 0 3px, #9d0f5c 4px 6px, transparent 7px) 0 100% / 14px 14px no-repeat,
    radial-gradient(circle at 50% 50%, #ff7ac2 0 3px, #9d0f5c 4px 6px, transparent 7px) 100% 100% / 14px 14px no-repeat;
}
.frame figcaption {
  position: absolute; left: 50%; bottom: -1.1rem; transform: translateX(-50%);
  white-space: nowrap; padding: .55rem 1.2rem; border-radius: 999px;
  font: 700 .72rem/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--plum-800);
  background: linear-gradient(180deg, #fff8e2, #efd49a); box-shadow: 0 0 0 2px var(--gold-deep), 0 8px 16px rgba(10, 0, 20, .35);
}
.frame-arch::after { display: none; }
.frame-arch, .frame-arch img { border-radius: 999px 999px var(--radius) var(--radius); }
.frame-arch img { border-radius: 999px 999px calc(var(--radius) - 8px) calc(var(--radius) - 8px); }

/* ==========================================================================
   Header
   ========================================================================== */
.site-head {
  position: sticky; top: 0; z-index: 50;
  height: var(--header-h);
  background: linear-gradient(90deg, rgba(24, 7, 40, .97), rgba(58, 16, 82, .97) 50%, rgba(24, 7, 40, .97));
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(90deg, #7a4410, #ffe29a 30%, #c98a22 60%, #7a4410) 1;
  box-shadow: 0 6px 24px rgba(8, 0, 18, .45);
  backdrop-filter: saturate(1.2) blur(8px);
}
.site-head .wrap { height: 100%; display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2.5rem); width: min(100% - 2 * var(--gutter), 1400px); }
.brand { flex: none; display: block; line-height: 0; border-radius: 12px; transition: transform .3s var(--ease), filter .3s; }
.brand img { width: auto; height: 66px; aspect-ratio: 1708 / 886; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .45)); }
.brand:hover { transform: rotate(-1.5deg) scale(1.03); filter: brightness(1.06); }
.primary-nav { flex: 1; display: flex; justify-content: center; }
.primary-nav > ul:not(.social) { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(1.1rem, 2.6vw, 2.6rem); }
.primary-nav a {
  position: relative; display: block; padding: .7rem 0;
  font: 700 .86rem/1 var(--display); letter-spacing: .08em; color: #fff3d6; text-decoration: none; white-space: nowrap;
  transition: color .2s;
}
.primary-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px;
  background: var(--gold-metal); transform: scaleX(0); transition: transform .3s var(--ease);
}
.primary-nav a:hover, .primary-nav a[aria-current="page"] { color: var(--gold); }
.primary-nav a:hover::after, .primary-nav a[aria-current="page"]::after { transform: scaleX(1); }

.social { display: flex; gap: .55rem; list-style: none; margin: 0; padding: 0; }
.primary-nav .social { display: none; }
.social a {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  color: var(--gold-hi); background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, .08), transparent 70%);
  box-shadow: inset 0 0 0 1.5px rgba(243, 193, 79, .8);
  transition: transform .25s var(--ease), background .25s, color .25s, box-shadow .25s;
}
.social svg { width: 18px; height: 18px; fill: currentColor; }
.social a:hover, .social a:focus-visible { color: #fff; background: radial-gradient(circle at 50% 30%, #f25fb1, #a3105f); box-shadow: inset 0 0 0 1.5px var(--gold-hi), 0 0 16px rgba(226, 67, 159, .55); transform: translateY(-2px); }

.menu-toggle {
  display: none; margin-left: auto;
  align-items: center; gap: .6rem; min-height: 44px; padding: .5rem .9rem .5rem .8rem;
  border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1.5px var(--gold);
  color: var(--gold-hi); font: 700 .74rem/1 var(--display); letter-spacing: .14em; text-transform: uppercase;
}
.menu-toggle .bars { position: relative; width: 20px; height: 14px; }
.menu-toggle .bars i { position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor; transition: transform .3s var(--ease), opacity .2s; }
.menu-toggle .bars i:nth-child(1) { top: 0; }
.menu-toggle .bars i:nth-child(2) { top: 6px; }
.menu-toggle .bars i:nth-child(3) { top: 12px; }
.menu-toggle[aria-expanded="true"] .bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .bars i:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .bars i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ==========================================================================
   Hero (home)
   ========================================================================== */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: min(calc(100svh - var(--header-h)), 900px);
  display: grid; align-items: center;
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(5rem, 8vw, 7rem);
}
.hero-bg, .page-hero-bg { position: absolute; inset: 0; z-index: -2; }
.hero-bg img, .page-hero-bg img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); filter: saturate(1.15) blur(5px); }
.hero::before, .page-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60% 70% at 72% 45%, rgba(255, 214, 120, .18), transparent 70%),
    linear-gradient(90deg, rgba(18, 5, 29, .94) 0%, rgba(29, 9, 48, .82) 38%, rgba(29, 9, 48, .35) 70%, rgba(18, 5, 29, .55) 100%),
    linear-gradient(0deg, rgba(18, 5, 29, .9) 0%, transparent 30%);
}
.sparkles { /* static glints, one gentle twinkle on load */
  position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .75;
  background-image:
    radial-gradient(2px 2px at 12% 22%, #fff4c2, transparent 60%),
    radial-gradient(1.5px 1.5px at 28% 68%, #ffe39a, transparent 60%),
    radial-gradient(2.5px 2.5px at 56% 18%, #fff, transparent 60%),
    radial-gradient(1.5px 1.5px at 64% 78%, #ffd36b, transparent 60%),
    radial-gradient(2px 2px at 82% 30%, #fff4c2, transparent 60%),
    radial-gradient(1.5px 1.5px at 90% 62%, #ffe39a, transparent 60%),
    radial-gradient(2px 2px at 44% 44%, #ffd36b, transparent 60%),
    radial-gradient(1.5px 1.5px at 6% 84%, #fff, transparent 60%);
  animation: twinkle 3.2s ease-out 1 both;
}
@keyframes twinkle { 0% { opacity: 0; } 45% { opacity: 1; } 100% { opacity: .75; } }
.hero .hero-bg img { filter: saturate(1.25) blur(28px); transform: scale(1.25); }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: clamp(2rem, 5vw, 5rem); }
.hero-logo { width: min(100%, 560px); margin: 0 0 1.1rem -1.5%; }
.hero-logo img { width: 100%; filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .55)); }
.hero-tagline { font: 700 clamp(1.05rem, 1.7vw, 1.35rem)/1.35 var(--display); letter-spacing: .04em; margin: 0 0 1rem; }
.hero-copy .lede { color: #f1e1c4; max-width: 33em; }

/* 3D storybook */
.book-stage { display: grid; place-items: center; perspective: 1600px; }
.book {
  --ry: -20deg; --rx: 4deg;
  position: relative; width: min(100%, 470px); aspect-ratio: 1; margin: 0;
  transform-style: preserve-3d; transform: rotateY(var(--ry)) rotateX(var(--rx));
  transition: transform .8s var(--ease);
}
.book img, .book .cover { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 4px 14px 14px 4px; }
.book .cover { overflow: hidden; box-shadow: inset 6px 0 10px -4px rgba(0, 0, 0, .55), inset -1px 0 0 rgba(255, 255, 255, .25); }
.book .cover::after { /* glossy light pass */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .22) 48%, transparent 60%);
  transform: translateX(-120%); transition: transform 1.1s var(--ease);
}
.book::before { /* page block */
  content: ""; position: absolute; top: 2%; bottom: 2%; right: -3.5%; width: 7%;
  transform: rotateY(90deg) translateZ(0); transform-origin: left center;
  background: repeating-linear-gradient(90deg, #fff7e3 0 2px, #e6d3a8 2px 3px);
  border-radius: 0 3px 3px 0;
}
.book::after { /* floor shadow */
  content: ""; position: absolute; left: 6%; right: -4%; bottom: -9%; height: 12%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, .55), transparent 70%);
  transform: translateZ(-40px); filter: blur(6px);
}
.book-caption { margin-top: 2.2rem; text-align: center; }
.book-caption strong { display: block; font: 700 .8rem/1.3 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.book-caption span { font: italic 600 1.15rem var(--story); color: #f1e1c4; }
@media (hover: hover) {
  .book-stage:hover .book { --ry: -8deg; --rx: 2deg; }
  .book-stage:hover .book .cover::after { transform: translateX(120%); }
}

/* scalloped gold trim at section joins */
.trim { position: relative; }
.trim::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 18px; z-index: 2;
  background:
    radial-gradient(circle at 50% 0, transparent 9px, var(--gold-deep) 10px, var(--gold) 11px, #ffe7a0 12px, var(--trim-next, var(--parchment)) 13px) 0 0 / 26px 18px repeat-x;
}

/* ==========================================================================
   Sections
   ========================================================================== */
.section { position: relative; padding: clamp(4.5rem, 9vw, 7.5rem) 0; }
.section-head { max-width: 760px; margin: 0 auto clamp(2.5rem, 5vw, 3.8rem); text-align: center; }
.section-head h2 { color: var(--plum-800); }
.section-head .lede { margin-inline: auto; color: var(--ink-soft); }
.on-dark .section-head h2 { color: var(--gold-hi); }
.on-dark .section-head .lede { color: #e5d3b5; }

.parchment {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255, 255, 255, .55), transparent 60%),
    radial-gradient(90% 60% at 0% 100%, rgba(196, 136, 52, .22), transparent 70%),
    radial-gradient(90% 60% at 100% 100%, rgba(196, 136, 52, .22), transparent 70%),
    linear-gradient(180deg, #fbefd0, #f1dba8);
  color: var(--ink);
}
.plum { background: radial-gradient(90% 70% at 50% 0%, #4a1870 0%, var(--plum-900) 60%, var(--plum-950) 100%); }
.emerald { background: radial-gradient(90% 80% at 20% 0%, #135f45 0%, var(--emerald-900) 55%, var(--emerald-950) 100%); }
.starfield::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    radial-gradient(1.5px 1.5px at 8% 14%, #ffe7a0, transparent 60%),
    radial-gradient(1px 1px at 22% 80%, #fff, transparent 60%),
    radial-gradient(1.5px 1.5px at 38% 32%, #ffd36b, transparent 60%),
    radial-gradient(1px 1px at 61% 12%, #fff, transparent 60%),
    radial-gradient(1.5px 1.5px at 74% 58%, #ffe7a0, transparent 60%),
    radial-gradient(1px 1px at 88% 24%, #fff, transparent 60%),
    radial-gradient(1.5px 1.5px at 94% 86%, #ffd36b, transparent 60%);
}

/* ---------- values ---------- */
.values-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 3vw, 2.5rem); text-align: center; }
.value { position: relative; padding: 0 .5rem; }
.value .medal { position: relative; width: clamp(118px, 12vw, 160px); margin: 0 auto 1.1rem; transition: transform .4s var(--ease), filter .4s; }
.value .medal::before { /* halo */
  content: ""; position: absolute; inset: -12%; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, rgba(255, 214, 110, .55), transparent 65%); opacity: 0; transition: opacity .4s;
}
.value .medal img { width: 100%; filter: drop-shadow(0 10px 12px rgba(70, 30, 0, .35)); }
.value h3 { font-size: clamp(1.1rem, 1.6vw, 1.4rem); letter-spacing: .1em; text-transform: uppercase; margin-bottom: .35rem; }
.value.learn h3 { color: #1b5fae; }
.value.faith h3 { color: #0e6b45; }
.value.love h3 { color: #b8134f; }
.value.happiness h3 { color: #b56b00; }
.value p { margin: 0; color: var(--ink-soft); }
@media (hover: hover) {
  .value:hover .medal { transform: translateY(-8px) scale(1.04); filter: brightness(1.06); }
  .value:hover .medal::before { opacity: 1; }
}

/* ---------- split feature ---------- */
.feature { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: clamp(2.5rem, 7vw, 6.5rem); }
.feature.flip { grid-template-columns: 1.1fr .9fr; }
.feature.flip > :first-child { order: 2; }
.feature h2 { margin-bottom: .6em; }
.feature .story-quote { color: var(--gold); margin: 1.6rem 0 .4rem; }
.traits { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin: 1.2rem 0 0; padding: 0; list-style: none; font: 700 .8rem/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-hi); }
.traits li { display: flex; align-items: center; gap: 1rem; }
.traits li + li::before { content: ""; width: 6px; height: 6px; transform: rotate(45deg); background: var(--magenta-hi); }
.portrait-wrap { max-width: 380px; justify-self: center; width: 100%; }

/* ---------- chapter grid / carousel ---------- */
.chapters { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.4rem, 3vw, 2.4rem); }
.chapter { position: relative; }
.chapter .frame { transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.chapter .frame img { aspect-ratio: 896 / 540; object-fit: cover; }
.chapter .meta { padding: 1.2rem .3rem 0; }
.chapter .num { font: 700 .72rem/1 var(--display); letter-spacing: .18em; text-transform: uppercase; color: var(--magenta-hi); }
.chapter h3 { font-size: clamp(1.1rem, 1.5vw, 1.3rem); color: var(--gold-hi); margin: .45rem 0 .5rem; }
.chapter p { margin: 0; font-size: .98rem; color: #e1cfae; }
@media (hover: hover) { .chapter:hover .frame { transform: translateY(-6px) rotate(-.4deg); } }

.book-intro { display: grid; grid-template-columns: auto 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; margin-bottom: clamp(3rem, 6vw, 4.5rem); }
.book-intro .book { width: clamp(220px, 24vw, 300px); --ry: -16deg; }
.book-intro h2 { color: var(--gold-hi); margin-bottom: .35em; }
.byline { font: italic 600 1.25rem var(--story); color: var(--gold); margin: 0 0 1rem; }

/* ---------- author quote band ---------- */
.quote-band { position: relative; isolation: isolate; overflow: hidden; padding: clamp(5rem, 11vw, 9rem) 0; text-align: center; color: #fff4d8; }
.quote-band .bg { position: absolute; inset: 0; z-index: -2; }
.quote-band .bg img { width: 100%; height: 100%; object-fit: cover; filter: blur(1px) saturate(1.1); transform: scale(1.04); }
.quote-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 90% at 50% 50%, rgba(29, 9, 48, .6), rgba(18, 5, 29, .92)); }
.quote-band blockquote { margin: 0 auto; max-width: 900px; }
.quote-band .story-quote { font-size: clamp(1.8rem, 4.2vw, 3.3rem); text-shadow: 0 3px 18px rgba(0, 0, 0, .6); }
.quote-band cite { display: block; margin-top: 1.6rem; font: 700 .82rem/1 var(--display); font-style: normal; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }

/* ---------- storybook table of contents (formats / horizon) ---------- */
.toc { max-width: 900px; margin: 0 auto; padding: clamp(1.8rem, 4vw, 3rem) clamp(1.4rem, 4vw, 3.5rem); border-radius: 10px; position: relative;
  background: linear-gradient(180deg, #fff8e3, #f4e0b1);
  box-shadow: 0 0 0 2px var(--gold-deep), 0 0 0 8px #f6d98d, 0 0 0 10px var(--gold-deep), 0 30px 60px -20px rgba(60, 20, 0, .45);
}
.toc h3 { text-align: center; color: var(--plum-800); font-size: clamp(1.2rem, 2vw, 1.5rem); letter-spacing: .12em; text-transform: uppercase; }
.toc ol { list-style: none; margin: 1.4rem 0 0; padding: 0; counter-reset: toc; }
.toc li { counter-increment: toc; display: grid; grid-template-columns: auto auto 1fr auto; align-items: baseline; gap: .9rem; padding: 1rem 0; border-bottom: 1px dashed rgba(130, 80, 20, .35); }
.toc li:last-child { border-bottom: 0; }
.toc li::before { content: counter(toc, upper-roman) "."; font: 700 .95rem var(--display); color: var(--gold-deep); min-width: 2.2em; }
.toc .t { font: 700 clamp(1.05rem, 1.6vw, 1.25rem) var(--display); color: var(--plum-800); }
.toc .leader { border-bottom: 2px dotted rgba(130, 80, 20, .45); transform: translateY(-.3em); }
.toc .d { grid-column: 2 / 4; grid-row: 2; margin: .1rem 0 0; font-size: .98rem; color: var(--ink-soft); }
.status { font: 700 .66rem/1 var(--display); letter-spacing: .14em; text-transform: uppercase; padding: .45rem .7rem; border-radius: 999px; white-space: nowrap; color: var(--ink-soft); box-shadow: inset 0 0 0 1.5px rgba(130, 80, 20, .45); }
.status.now { color: #fff; background: linear-gradient(180deg, #1f8a58, #0b5a39); box-shadow: inset 0 0 0 1.5px var(--gold); }

/* ---------- two doors (families / partners) ---------- */
.doors { display: grid; grid-template-columns: 1fr 1fr; }
.door { position: relative; padding: clamp(4rem, 8vw, 6.5rem) clamp(1.5rem, 6vw, 5.5rem); }
.door h2 { margin-bottom: .6em; }
.door.family { color: var(--ink); }
.door.family h2 { color: var(--plum-800); }
.door.partners h2 { color: var(--gold-hi); }
.door ul { list-style: none; margin: 1.4rem 0 0; padding: 0; }
.door li { position: relative; padding: .7rem 0 .7rem 1.9rem; border-bottom: 1px solid rgba(160, 110, 30, .28); }
.door li::before { content: ""; position: absolute; left: .2rem; top: 1.2rem; width: 9px; height: 9px; transform: rotate(45deg); background: var(--gold-metal); box-shadow: 0 0 0 2px rgba(243, 193, 79, .25); }
.door li strong { font-family: var(--display); letter-spacing: .04em; }
.door.partners li { border-color: rgba(243, 193, 79, .22); }
.door.partners li span { display: block; color: #cfe3d4; font-size: .96rem; }

/* ==========================================================================
   Interior page hero (open storybook spread)
   ========================================================================== */
.page-hero { position: relative; isolation: isolate; overflow: hidden; padding: clamp(3rem, 6vw, 5rem) 0 clamp(4.5rem, 8vw, 6.5rem); }
.page-hero::before { background: linear-gradient(180deg, rgba(18, 5, 29, .82), rgba(29, 9, 48, .9) 60%, rgba(18, 5, 29, .98)); }
.page-hero-bg img { filter: blur(10px) saturate(1.2); transform: scale(1.15); }
.spread {
  display: grid; grid-template-columns: 1fr 1.15fr; position: relative;
  border-radius: 18px; padding: 12px;
  background: linear-gradient(180deg, #6a2a12, #3d1608);
  box-shadow: 0 0 0 2px var(--gold-deep), 0 40px 80px -20px rgba(0, 0, 0, .75);
}
.spread::after { /* gutter shadow */
  content: ""; position: absolute; top: 12px; bottom: 12px; left: calc(12px + (100% - 24px) * (1 / 2.15)); width: 40px; transform: translateX(-50%); pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(60, 25, 0, .35) 45%, rgba(0, 0, 0, .45) 50%, rgba(60, 25, 0, .25) 55%, transparent);
}
.spread-page {
  padding: clamp(2rem, 4.5vw, 4rem);
  background: linear-gradient(90deg, #f6e3b8, #fcf0d2 60%, #efd8a5);
  border-radius: 10px 0 0 10px; display: flex; flex-direction: column; justify-content: center;
}
.spread-page h1 { color: var(--plum-800); margin-bottom: .45em; font-size: clamp(2rem, 3.4vw, 3.2rem); }
.spread-page .lede { color: var(--ink-soft); }
.spread-art { margin: 0; border-radius: 0 10px 10px 0; overflow: hidden; background: #2a1a10; }
.spread-art img { width: 100%; height: 100%; object-fit: cover; min-height: 100%; }

/* ---------- friends ---------- */
.friends { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); text-align: center; }
.friend .ring {
  width: clamp(150px, 15vw, 200px); aspect-ratio: 1; margin: 0 auto 1.2rem; border-radius: 50%; padding: 7px;
  background: var(--gold-metal); box-shadow: 0 0 0 4px rgba(255, 231, 160, .25), 0 18px 34px -12px rgba(0, 0, 0, .6);
  transition: transform .4s var(--ease), box-shadow .4s;
}
.friend .ring img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; box-shadow: 0 0 0 2px rgba(70, 30, 0, .6); }
.friend h3 { font-size: 1.2rem; color: var(--gold-hi); margin-bottom: .1rem; }
.friend .role { font: italic 600 1.08rem var(--story); color: var(--magenta-hi); margin: 0 0 .5rem; }
.friend p:last-child { margin: 0; color: #e1cfae; font-size: .98rem; }
@media (hover: hover) { .friend:hover .ring { transform: translateY(-6px) rotate(-2deg); box-shadow: 0 0 0 6px rgba(255, 231, 160, .35), 0 0 30px rgba(243, 193, 79, .35), 0 18px 34px -12px rgba(0, 0, 0, .6); } }

/* ---------- journey (world page) ---------- */
.journey { list-style: none; margin: 0 auto; padding: 0; max-width: 1080px; position: relative; }
.journey::before { /* golden path */
  content: ""; position: absolute; top: 3rem; bottom: 3rem; left: 50%; width: 4px; transform: translateX(-50%);
  background: repeating-linear-gradient(180deg, var(--gold) 0 10px, transparent 10px 20px); opacity: .75;
}
.stop { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; position: relative; }
.stop + .stop { margin-top: clamp(3rem, 7vw, 5rem); }
.stop::before { /* waypoint gem */
  content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; transform: translate(-50%, -50%) rotate(45deg);
  background: radial-gradient(circle at 35% 35%, #ff9ccf, #c2187a 60%, #6d0a43); box-shadow: 0 0 0 4px var(--gold), 0 0 18px rgba(226, 67, 159, .7);
}
.stop:nth-child(even) .frame { order: 2; }
.stop .frame img { aspect-ratio: 896 / 540; object-fit: cover; }
.stop .num { font: 700 .75rem/1 var(--display); letter-spacing: .18em; text-transform: uppercase; color: var(--magenta-hi); }
.stop h3 { font-size: clamp(1.35rem, 2.4vw, 1.9rem); color: var(--gold-hi); margin: .5rem 0 .7rem; }
.stop p { color: #e8d7b8; margin: 0; }

/* ---------- letter (author's note) ---------- */
.letter {
  max-width: 820px; margin: 0 auto; position: relative;
  padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 6vw, 4.5rem);
  background:
    radial-gradient(100% 60% at 50% 0%, rgba(255, 255, 255, .6), transparent 60%),
    linear-gradient(180deg, #fff6dc, #f3dca8);
  border-radius: 6px;
  box-shadow: 0 0 0 2px var(--gold-deep), 0 0 0 9px #f6d98d, 0 0 0 11px var(--gold-deep), 0 40px 70px -25px rgba(0, 0, 0, .6);
}
.letter::before, .letter::after { /* scroll rolls */
  content: ""; position: absolute; left: -22px; right: -22px; height: 26px; border-radius: 13px;
  background: linear-gradient(180deg, #f7df9e, #c98a2c 50%, #7a4410); box-shadow: 0 6px 12px rgba(0, 0, 0, .35);
}
.letter::before { top: -18px; }
.letter::after { bottom: -18px; }
.letter .eyebrow { color: var(--magenta); }
.letter h2 { text-align: center; color: var(--plum-800); }
.letter p { font: 500 clamp(1.15rem, 1.8vw, 1.32rem)/1.6 var(--story); color: #3a2432; }
.letter .closing { font: italic 700 clamp(1.3rem, 2.4vw, 1.7rem)/1.35 var(--story); color: #8d1450; text-align: center; margin: 1.8rem 0 1rem; }
.letter .sig { text-align: center; font: 700 .85rem/1 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-deep); }

/* ---------- prompts (parents) ---------- */
.prompts { list-style: none; counter-reset: p; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.4rem, 3vw, 2.4rem); }
.prompts li { counter-increment: p; position: relative; padding-top: 3.2rem; }
.prompts li::before {
  content: counter(p); position: absolute; top: 0; left: 0; width: 2.4rem; height: 2.4rem; display: grid; place-items: center; border-radius: 50%;
  font: 700 1rem var(--display); color: var(--plum-900); background: var(--gold-metal); box-shadow: 0 0 0 3px rgba(243, 193, 79, .25);
}
.prompts p { font: 600 clamp(1.2rem, 1.8vw, 1.4rem)/1.4 var(--story); color: var(--ink); margin: 0 0 .6rem; }
.prompts small { color: var(--ink-soft); font-size: .92rem; }

/* ---------- closing call ---------- */
.cta-band { text-align: center; }
.cta-band h2 { color: var(--gold-hi); margin-bottom: .5em; }

/* ==========================================================================
   Reader dialog
   ========================================================================== */
.reader { width: min(96vw, 1180px); max-height: 94vh; padding: 0; border: 0; border-radius: 20px; background: transparent; color: #fff; overflow: visible; }
.reader::backdrop { background: rgba(10, 2, 18, .86); backdrop-filter: blur(6px); }
.reader[open] { animation: reader-in .45s var(--ease); }
@keyframes reader-in { from { opacity: 0; transform: translateY(18px) scale(.98); } }
.reader-pages { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 10px; border-radius: 20px; background: linear-gradient(180deg, #6a2a12, #3d1608); box-shadow: 0 0 0 2px var(--gold-deep), 0 40px 80px rgba(0, 0, 0, .7); }
.reader-pages img { width: 100%; height: auto; max-height: calc(94vh - 90px); object-fit: contain; background: #f4e3bd; }
.reader-pages img:first-child { border-radius: 10px 0 0 10px; }
.reader-pages img:last-child { border-radius: 0 10px 10px 0; }
.reader-bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0 .3rem .8rem; }
.reader-bar p { margin: 0; font: italic 600 1.15rem var(--story); color: var(--gold-hi); }
.reader-close { min-height: 44px; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-foot { position: relative; padding: clamp(4rem, 7vw, 5.5rem) 0 2rem; text-align: center; color: #eadbbd; background: radial-gradient(80% 90% at 50% 0%, #3a1158, var(--plum-950) 70%); border-top: 2px solid transparent; border-image: linear-gradient(90deg, #7a4410, #ffe29a 50%, #7a4410) 1; }
.foot-logo { display: inline-block; width: min(330px, 76vw); line-height: 0; }
.foot-logo img { width: 100%; aspect-ratio: 1708 / 886; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .5)); }
.foot-tag { font: italic 600 1.3rem var(--story); color: var(--gold-hi); margin: 1.4rem 0 1.8rem; }
.foot-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 2rem; }
.foot-nav a { font: 700 .8rem/1 var(--display); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; display: inline-block; padding: .7rem 0; }
.foot-nav a:hover { color: var(--gold); }
.site-foot .social { justify-content: center; margin: 1.6rem 0 2.2rem; }
.site-foot small { display: block; color: #a8927e; font-size: .85rem; }

/* ==========================================================================
   Reveal on scroll (only when JS is available)
   ========================================================================== */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--d, 0s); }
.js .reveal.in { opacity: 1; transform: none; }

/* ==========================================================================
   Responsive — tablet
   ========================================================================== */
@media (max-width: 1080px) {
  .primary-nav > ul:not(.social) { gap: 1.2rem; }
  .primary-nav a { font-size: .76rem; }
  .social a { width: 36px; height: 36px; }
  .chapters { grid-template-columns: repeat(2, 1fr); }
  .friends { grid-template-columns: repeat(2, 1fr); row-gap: 3rem; }
}

/* ==========================================================================
   Mobile — its own storybook composition
   ========================================================================== */
@media (max-width: 860px) {
  :root { --header-h: 70px; }
  .brand img { height: 54px; }
  .menu-toggle { display: inline-flex; }
  .site-head .social { display: none; }
  .primary-nav {
    position: fixed; inset: var(--header-h) 0 auto 0; z-index: 49;
    display: block; padding: 1.6rem var(--gutter) 2rem;
    background: radial-gradient(120% 80% at 50% 0%, #4a1870, var(--plum-950));
    border-bottom: 2px solid var(--gold-deep);
    box-shadow: 0 30px 60px rgba(0, 0, 0, .6);
    transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s .3s;
  }
  .primary-nav.open { transform: none; opacity: 1; visibility: visible; transition: opacity .3s var(--ease), transform .3s var(--ease); }
  .primary-nav > ul:not(.social) { flex-direction: column; gap: 0; }
  .primary-nav > ul:not(.social) > li + li { border-top: 1px solid rgba(243, 193, 79, .2); }
  .primary-nav a { font-size: 1.05rem; padding: 1.15rem .2rem; }
  .primary-nav a::after { display: none; }
  .primary-nav .social { display: flex; justify-content: center; margin-top: 1.6rem; }
  .primary-nav .social a { width: 46px; height: 46px; }

  /* hero: logo → book → words → actions, centered */
  .hero { min-height: 0; padding: 2rem 0 5rem; text-align: center; }
  .hero::before { background: linear-gradient(180deg, rgba(18, 5, 29, .55) 0%, rgba(29, 9, 48, .78) 45%, rgba(18, 5, 29, .96) 100%); }
  .hero-grid { grid-template-columns: 1fr; gap: 1.6rem; }
  .hero-logo { margin: 0 auto .4rem; width: min(88vw, 420px); }
  .hero-copy { display: contents; }
  .hero-copy > * { order: 1; }
  .hero-logo { order: 0; }
  .book-stage { order: 0; }
  .hero-copy .lede { margin-inline: auto; font-size: 1.05rem; }
  .hero .actions { flex-direction: column; align-items: stretch; margin-top: 1.2rem; }
  .book { width: min(74vw, 330px); --ry: -12deg; }
  .book-caption { margin-top: 1.6rem; }

  .values-list { grid-template-columns: repeat(2, 1fr); row-gap: 2.6rem; }
  .feature, .feature.flip { grid-template-columns: 1fr; gap: 2.8rem; }
  .feature.flip > :first-child { order: 0; }
  .portrait-wrap { max-width: 320px; }

  /* chapters become a swipeable storybook strip */
  .chapters {
    display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin: 0 calc(-1 * var(--gutter)); padding: .5rem var(--gutter) 1.5rem; scrollbar-width: none;
  }
  .chapters::-webkit-scrollbar { display: none; }
  .chapter { flex: 0 0 82%; scroll-snap-align: center; }
  .swipe-hint { display: block !important; }

  .book-intro { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .book-intro .actions { justify-content: center; }
  .doors { grid-template-columns: 1fr; }
  .spread { grid-template-columns: 1fr; padding: 8px; }
  .spread::after { display: none; }
  .spread-art { order: -1; border-radius: 10px 10px 0 0; aspect-ratio: 896 / 540; }
  .spread-page { border-radius: 0 0 10px 10px; padding: 2rem 1.4rem 2.2rem; background: linear-gradient(180deg, #fcf0d2, #efd8a5); }
  .journey::before { left: 14px; }
  .stop { grid-template-columns: 1fr; gap: 1.2rem; padding-left: 40px; }
  .stop::before { left: 14px; top: 1.4rem; }
  .stop:nth-child(even) .frame { order: 0; }
  .prompts { grid-template-columns: 1fr; }
  .toc li { grid-template-columns: auto 1fr auto; }
  .toc .leader { display: none; }
  .toc .d { grid-column: 2 / 4; }
  .reader-pages { grid-template-columns: 1fr; max-height: calc(94vh - 70px); overflow-y: auto; }
  .reader-pages img:first-child { border-radius: 10px 10px 0 0; }
  .reader-pages img:last-child { border-radius: 0 0 10px 10px; }
}
@media (max-width: 480px) {
  .values-list { gap: 2rem .6rem; }
  .value .medal { width: 112px; }
  .friends { grid-template-columns: 1fr 1fr; gap: 2.2rem .8rem; }
  .friend .ring { width: 132px; }
  .letter::before, .letter::after { left: -10px; right: -10px; }
}
.swipe-hint { display: none; text-align: center; font: 700 .7rem/1 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); opacity: .8; margin-top: .4rem; }

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .js .reveal { opacity: 1; transform: none; }
  .book, .book-stage:hover .book { --ry: -14deg; }
}

/* ==========================================================================
   V1 — Makeda Multiverse candy layer
   Glossy, bouncy, bright. Every motion is short, springy, and disabled for
   reduced-motion visitors.
   ========================================================================== */
:root {
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --sky-top: #2a0d63;
  --sky-mid: #6a35d0;
  --sky-glow: #d273dc;
  --sky-horizon: #ffc6e3;
  --candy-pink: #ff4fa8;
  --candy-blue: #3aa8ff;
  --candy-green: #2fd07c;
  --candy-orange: #ffae2b;
  --candy-purple: #a66bff;
  --candy-red: #ff4d5e;
}

/* candy gloss on every jewel button */
.btn { transition: transform .35s var(--spring), filter .25s; }
.btn > span:not(.arrow), .btn { position: relative; }
.btn-jewel::after, .btn-parchment::after, .btn-emerald::after, .btn-sky::after {
  background-clip: padding-box;
}
.btn .gloss { position: absolute; left: 12%; right: 12%; top: 5px; height: 42%; border-radius: 999px; background: linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,0)); pointer-events: none; }
.btn-sky { color: #fff; text-shadow: 0 1px 2px rgba(0, 30, 80, .6); }
.btn-sky::after { background: radial-gradient(120% 140% at 50% 0%, #8fd4ff 0%, #2f8cff 50%, #1646b8 100%); box-shadow: inset 0 2px 0 rgba(255,255,255,.4); }
@media (hover: hover) { .btn:hover { --lift: -4px; transform: translateY(var(--lift)) scale(1.04); } }
.btn:active { transform: translateY(2px) scale(.96); transition-duration: .08s; }
.btn-lg { min-height: 60px; padding: 1rem 2rem; font-size: .9rem; }

/* ---------- sky hero ---------- */
.sky {
  position: relative; isolation: isolate; overflow: hidden; color: #fff;
  background:
    radial-gradient(40% 35% at 78% 38%, rgba(255, 226, 150, .45), transparent 70%),
    radial-gradient(60% 50% at 20% 10%, rgba(130, 90, 255, .5), transparent 70%),
    linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 42%, var(--sky-glow) 74%, var(--sky-horizon) 100%);
}
.sky .stars-layer { position: absolute; inset: 0 0 40% 0; z-index: -1; pointer-events: none; opacity: .9;
  background-image:
    radial-gradient(2px 2px at 10% 20%, #fff, transparent 60%), radial-gradient(1.5px 1.5px at 25% 8%, #ffe9a8, transparent 60%),
    radial-gradient(2px 2px at 40% 30%, #fff, transparent 60%), radial-gradient(1.5px 1.5px at 58% 12%, #fff, transparent 60%),
    radial-gradient(2.5px 2.5px at 72% 22%, #ffe9a8, transparent 60%), radial-gradient(1.5px 1.5px at 88% 10%, #fff, transparent 60%),
    radial-gradient(2px 2px at 94% 34%, #fff, transparent 60%), radial-gradient(1.5px 1.5px at 5% 45%, #ffe9a8, transparent 60%); }
.clouds { position: absolute; left: -5%; right: -5%; bottom: -2px; height: 140px; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60px 50px at 5% 80%, #fff 98%, transparent), radial-gradient(90px 70px at 15% 90%, #fff 98%, transparent),
    radial-gradient(70px 60px at 27% 85%, #fff 98%, transparent), radial-gradient(110px 80px at 40% 100%, #fff 98%, transparent),
    radial-gradient(80px 60px at 53% 88%, #fff 98%, transparent), radial-gradient(100px 75px at 66% 98%, #fff 98%, transparent),
    radial-gradient(70px 55px at 78% 86%, #fff 98%, transparent), radial-gradient(95px 70px at 90% 96%, #fff 98%, transparent),
    radial-gradient(60px 50px at 100% 84%, #fff 98%, transparent),
    linear-gradient(0deg, #fff 22%, transparent 23%);
  filter: drop-shadow(0 -6px 14px rgba(255, 255, 255, .5));
}
.clouds.to-lavender { --c: #f3ecff; background:
    radial-gradient(60px 50px at 5% 80%, var(--c) 98%, transparent), radial-gradient(90px 70px at 15% 90%, var(--c) 98%, transparent),
    radial-gradient(70px 60px at 27% 85%, var(--c) 98%, transparent), radial-gradient(110px 80px at 40% 100%, var(--c) 98%, transparent),
    radial-gradient(80px 60px at 53% 88%, var(--c) 98%, transparent), radial-gradient(100px 75px at 66% 98%, var(--c) 98%, transparent),
    radial-gradient(70px 55px at 78% 86%, var(--c) 98%, transparent), radial-gradient(95px 70px at 90% 96%, var(--c) 98%, transparent),
    radial-gradient(60px 50px at 100% 84%, var(--c) 98%, transparent),
    linear-gradient(0deg, var(--c) 22%, transparent 23%); }
.sky-hero { padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(8rem, 12vw, 10rem); }
.sky-hero .hero-grid { position: relative; z-index: 1; }
.welcome { display: inline-flex; align-items: center; gap: .6rem; padding: .55rem 1.1rem; border-radius: 999px; margin-bottom: 1.2rem;
  font: 700 .74rem/1 var(--display); letter-spacing: .16em; text-transform: uppercase; color: #fff;
  background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1.5px rgba(255, 231, 160, .7), 0 6px 20px rgba(40, 0, 80, .3); backdrop-filter: blur(6px); }
.welcome img { width: 18px; height: auto; }
.sky .lede { color: #fff4fb; text-shadow: 0 1px 10px rgba(40, 0, 80, .45); }
.sky .hero-tagline { filter: drop-shadow(0 2px 0 rgba(60, 10, 60, .6)); }

/* floating candy decor */
.floaty { position: absolute; z-index: 0; pointer-events: none; width: var(--s, 56px); height: auto; filter: drop-shadow(0 10px 14px rgba(50, 0, 80, .35));
  animation: bob var(--t, 6s) ease-in-out var(--dl, 0s) infinite alternate; }
@keyframes bob { from { transform: translateY(0) rotate(var(--r0, -6deg)); } to { transform: translateY(-16px) rotate(var(--r1, 6deg)); } }

/* two-book shelf */
.shelf { position: relative; display: grid; place-items: center; min-height: clamp(360px, 38vw, 520px); perspective: 1800px; }
.shelf .book { position: absolute; transition: transform .7s var(--spring); }
.shelf .book.b4 { width: clamp(220px, 23vw, 330px); aspect-ratio: 2 / 3; --ry: -14deg; transform: translate(22%, 0) rotateY(var(--ry)) rotate(3deg); z-index: 2; }
.shelf .book.b2 { width: clamp(220px, 23vw, 320px); aspect-ratio: 1; --ry: -24deg; transform: translate(-42%, 10%) rotateY(var(--ry)) rotate(-6deg); z-index: 1; }
@media (hover: hover) {
  .shelf:hover .book.b4 { transform: translate(30%, -3%) rotateY(-6deg) rotate(4deg) scale(1.03); }
  .shelf:hover .book.b2 { transform: translate(-54%, 8%) rotateY(-14deg) rotate(-8deg) scale(1.03); }
  .shelf:hover .book .cover::after { transform: translateX(120%); }
}
.shelf-glow { position: absolute; width: 80%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255, 236, 170, .7), rgba(255, 180, 230, .25) 45%, transparent 70%); z-index: 0; }

/* ---------- world map ---------- */
.map-section { position: relative; color: var(--ink); overflow: hidden;
  background: radial-gradient(70% 50% at 50% 0%, #fff, transparent 70%), linear-gradient(180deg, #f3ecff 0%, #e2d8ff 40%, #cfe8ff 100%); }
.map-section .section-head h2 { color: var(--plum-800); }
.map { position: relative; height: var(--map-h, 560px); max-width: 1180px; margin: 0 auto; }
.map svg.trail { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.map svg.trail path.base { fill: none; stroke: #fff; stroke-width: 22; stroke-linecap: round; opacity: .9; filter: drop-shadow(0 6px 10px rgba(90, 50, 160, .25)); }
.map svg.trail path.dots { fill: none; stroke: #f5b83d; stroke-width: 7; stroke-linecap: round; stroke-dasharray: 0 22; }
.map svg.trail path.dots.soon { stroke: #c7b8ef; }
.node { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); z-index: 1; display: grid; justify-items: center; gap: .7rem; text-align: center; width: 220px; }
.portal {
  --size: clamp(128px, 13vw, 168px);
  position: relative; width: var(--size); aspect-ratio: 1; border-radius: 50%; padding: 8px; border: 0; cursor: pointer;
  background: var(--gold-metal);
  box-shadow: 0 10px 0 #9c5c10, 0 22px 30px rgba(70, 20, 120, .35), 0 0 0 6px rgba(255, 255, 255, .6);
  transition: transform .45s var(--spring), box-shadow .3s;
  animation: bob 4.5s ease-in-out var(--dl, 0s) infinite alternate; --r0: 0deg; --r1: 0deg;
}
.portal img { width: 100%; height: 100%; object-fit: cover; object-position: var(--op, 50% 30%); border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(80, 30, 0, .5); }
.portal::before { content: ""; position: absolute; left: 20%; right: 20%; top: 12%; height: 30%; border-radius: 50%; background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,0)); z-index: 1; pointer-events: none; }
.portal::after { content: ""; position: absolute; inset: -14px; border-radius: 50%; z-index: -1; background: radial-gradient(circle, rgba(255, 230, 140, .8), transparent 65%); opacity: .7; }
@media (hover: hover) { .portal:hover { transform: scale(1.1) rotate(-3deg); animation-play-state: paused; } }
.portal:active { transform: scale(.94); }
.portal.soon { background: linear-gradient(145deg, #fff, #e3d9ff); box-shadow: 0 10px 0 #a996d8, 0 22px 30px rgba(70, 20, 120, .25), 0 0 0 6px rgba(255, 255, 255, .6); }
.portal.soon::after { background: radial-gradient(circle, rgba(200, 180, 255, .7), transparent 65%); }
.orb { width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 28%, #fff 0 8%, var(--c1) 30%, var(--c2) 75%); box-shadow: inset 0 -10px 24px rgba(0, 0, 0, .25), inset 0 0 0 2px rgba(255,255,255,.4); }
.orb img { width: 46%; height: auto; border-radius: 0; box-shadow: none; filter: drop-shadow(0 4px 6px rgba(0,0,0,.3)); object-fit: contain; }
.badge-num { position: absolute; top: -6px; right: -6px; z-index: 2; min-width: 40px; height: 40px; padding: 0 .5rem; border-radius: 999px; display: grid; place-items: center;
  font: 800 .78rem/1 var(--display); letter-spacing: .06em; color: #fff; background: radial-gradient(circle at 40% 30%, #ff8fc8, #d3137a 65%); box-shadow: 0 0 0 3px #fff, 0 4px 0 #8a0c50; }
.portal.soon .badge-num { background: radial-gradient(circle at 40% 30%, #c9b6ff, #7a55d6 65%); box-shadow: 0 0 0 3px #fff, 0 4px 0 #4d3399; }
.node-title { font: 700 1.02rem/1.2 var(--display); color: var(--plum-800); }
.node-tag { font: 700 .66rem/1 var(--display); letter-spacing: .14em; text-transform: uppercase; padding: .45rem .75rem; border-radius: 999px; color: #fff; background: linear-gradient(180deg, #2fd07c, #0f8a4e); box-shadow: 0 3px 0 #0a5c34; }
.node-tag.soon { color: #5b42a8; background: #fff; box-shadow: 0 3px 0 #c9b9f2, inset 0 0 0 1.5px #c9b9f2; }

/* world card dialog */
.world-card { width: min(94vw, 900px); padding: 0; border: 0; border-radius: 28px; overflow: visible; background: transparent; }
.world-card::backdrop { background: rgba(28, 6, 60, .72); backdrop-filter: blur(6px); }
.world-card[open] { animation: pop .55s var(--spring); }
@keyframes pop { from { opacity: 0; transform: scale(.85) translateY(20px); } }
.world-inner { display: grid; grid-template-columns: auto 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; padding: clamp(1.6rem, 4vw, 3rem);
  border-radius: 28px; color: var(--ink);
  background: radial-gradient(80% 60% at 50% 0%, #fff, transparent 70%), linear-gradient(180deg, #fff8ea, #f7e2ff);
  box-shadow: 0 0 0 3px #fff, 0 0 0 9px #f5c451, 0 0 0 11px #a9670f, 0 40px 80px rgba(20, 0, 50, .6); }
.world-inner .book { width: clamp(180px, 26vw, 280px); }
.world-inner h2 { color: var(--plum-800); font-size: clamp(1.6rem, 3.4vw, 2.5rem); margin: .2rem 0 .6rem; }
.world-inner .tagline { font: italic 700 clamp(1.15rem, 2vw, 1.4rem)/1.35 var(--story); color: var(--magenta); margin: 0 0 1rem; }
.world-close { position: absolute; top: -16px; right: -16px; z-index: 3; width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer;
  font: 700 1.4rem/1 var(--body); color: #fff; background: radial-gradient(circle at 40% 30%, #ff8fc8, #d3137a 65%); box-shadow: 0 0 0 4px #fff, 0 5px 0 #8a0c50, 0 12px 20px rgba(0,0,0,.3); transition: transform .3s var(--spring); }
.world-close:hover { transform: rotate(90deg) scale(1.08); }
.soon-orb { width: clamp(160px, 22vw, 220px); }

/* ---------- family cameos ---------- */
.family-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 4vw, 3rem); text-align: center; }
.cameo { display: grid; justify-items: center; }
.cameo .ring { width: clamp(150px, 16vw, 210px); aspect-ratio: 1; border-radius: 50%; padding: 8px; margin-bottom: 1.2rem; position: relative;
  background: var(--gold-metal); box-shadow: 0 10px 0 #7a440c, 0 24px 36px rgba(0,0,0,.45), 0 0 0 6px rgba(255, 231, 160, .25); transition: transform .45s var(--spring); }
.cameo .ring::before { content: ""; position: absolute; left: 22%; right: 22%; top: 10%; height: 26%; border-radius: 50%; background: linear-gradient(180deg, rgba(255,255,255,.55), transparent); z-index: 1; }
.cameo .ring img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.cameo h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); color: var(--gold-hi); }
.cameo .role { font: italic 700 1.12rem var(--story); color: #ff9fd0; margin: .2rem 0 .5rem; }
.cameo p:last-child { margin: 0; color: #eadcc4; max-width: 22em; }
@media (hover: hover) { .cameo:hover .ring { transform: translateY(-8px) rotate(-3deg) scale(1.04); } }

/* jelly medallions */
@keyframes jelly { 0% { transform: scale(1, 1); } 30% { transform: scale(1.14, .88); } 45% { transform: scale(.92, 1.1); } 60% { transform: scale(1.05, .96); } 75% { transform: scale(.98, 1.02); } 100% { transform: scale(1, 1); } }
.value .medal.jelly { animation: jelly .7s ease; }
.value { cursor: pointer; }

/* sparkle burst particles */
.spark { position: fixed; z-index: 300; pointer-events: none; width: 12px; height: 12px; margin: -6px 0 0 -6px;
  background: radial-gradient(circle, #fff 0 25%, var(--sc, #ffd24a) 30% 60%, transparent 62%);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }

/* interior sky hero */
.sky-page { padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(8rem, 12vw, 10rem); text-align: center; }
.sky-page h1 { color: #fff; text-shadow: 0 4px 0 rgba(80, 20, 120, .45), 0 10px 30px rgba(40, 0, 80, .4); max-width: 16em; margin: 0 auto .5em; }
.sky-page .lede { margin: 0 auto; }
.sky-page .cameo-strip { display: flex; justify-content: center; margin-top: 2.2rem; }
.sky-page .cameo-strip img { width: clamp(84px, 10vw, 120px); aspect-ratio: 1; border-radius: 50%; object-fit: cover; margin: 0 -10px; box-shadow: 0 0 0 5px #fff, 0 0 0 9px #f5c451, 0 14px 24px rgba(40,0,80,.4); }
.sky-page .cameo-strip img:nth-child(2) { transform: translateY(-14px) scale(1.12); z-index: 1; position: relative; }

@media (max-width: 860px) {
  .sky-hero { padding: 1.6rem 0 8rem; text-align: center; }
  .shelf { min-height: 330px; order: 0; }
  .shelf .book.b4 { width: 190px; transform: translate(26%, 0) rotateY(-10deg) rotate(3deg); }
  .shelf .book.b2 { width: 180px; transform: translate(-46%, 12%) rotateY(-16deg) rotate(-6deg); }
  .welcome { font-size: .64rem; }
  .map { height: var(--map-h-m, 1100px); }
  .node { left: var(--mx); top: var(--my); width: 180px; }
  .node-title { font-size: .95rem; }
  .world-inner { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .world-inner .actions { justify-content: center; }
  .world-close { top: -12px; right: -6px; }
  .family-row { grid-template-columns: 1fr; gap: 3rem; }
  .floaty.hide-m { display: none; }
  .clouds { height: 100px; }
}
@media (prefers-reduced-motion: reduce) {
  .floaty, .portal { animation: none !important; }
}
.book.tall { aspect-ratio: 2 / 3; }
.world-inner .book.tall { width: clamp(170px, 22vw, 240px); }
@media (max-width: 860px) {
  .sky-hero .welcome { order: -1; justify-self: center; }
  .sky-hero .hero-copy .lede { margin-inline: auto; }
  .sky-hero .actions { flex-direction: column; align-items: stretch; margin-top: 1.2rem; }
}

/* ---------- three-book fan (Books 1, 3, 4) ---------- */
.shelf.shelf3 .book { --ry: 0deg; width: var(--bw); transform: var(--pose); }
.shelf.shelf3 .book.s-left  { --bw: clamp(190px, 18vw, 260px); --pose: translate(-62%, 8%) rotateY(18deg) rotate(-8deg); z-index: 1; }
.shelf.shelf3 .book.s-right { --bw: clamp(180px, 17vw, 250px); --pose: translate(62%, 10%) rotateY(-18deg) rotate(8deg); z-index: 1; }
.shelf.shelf3 .book.s-front { --bw: clamp(210px, 20vw, 290px); --pose: translate(0, -2%) rotateY(-6deg); z-index: 2; }
@media (hover: hover) {
  .shelf.shelf3:hover .book.s-left  { transform: translate(-74%, 5%) rotateY(10deg) rotate(-10deg) scale(1.03); }
  .shelf.shelf3:hover .book.s-right { transform: translate(74%, 7%) rotateY(-10deg) rotate(10deg) scale(1.03); }
  .shelf.shelf3:hover .book.s-front { transform: translate(0, -6%) rotateY(0deg) scale(1.05); }
}
.shelf.shelf3 { min-height: clamp(400px, 40vw, 540px); }

/* ---------- library grid (world page) ---------- */
.library { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.4rem, 3vw, 2.6rem); align-items: end; }
.lib-book { display: grid; justify-items: center; gap: .5rem; width: 100%; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; text-align: center; font: inherit; }
.lib-stage { display: grid; place-items: end center; height: clamp(230px, 24vw, 340px); width: 100%; perspective: 1200px; margin-bottom: 1rem; }
.lib-stage .book { width: auto; height: 100%; max-width: 100%; --ry: -14deg; transform: rotateY(var(--ry)); transition: transform .5s var(--spring); }
.lib-num { font: 700 .72rem/1 var(--display); letter-spacing: .18em; text-transform: uppercase; color: var(--magenta-hi); }
.lib-title { font: 700 clamp(1.02rem, 1.4vw, 1.2rem)/1.25 var(--display); color: var(--gold-hi); }
.lib-tag { font: italic 600 1.02rem/1.35 var(--story); color: #e8d7ee; }
@media (hover: hover) { .lib-book:hover .book { transform: rotateY(0deg) translateY(-10px) scale(1.04); } .lib-book:hover .book .cover::after { transform: translateX(120%); } }
.lib-book:active .book { transform: scale(.96); }

@media (max-width: 860px) {
  .shelf.shelf3 { min-height: 300px; }
  .shelf.shelf3 .book.s-left  { --bw: 130px; --pose: translate(-60%, 8%) rotateY(14deg) rotate(-8deg); }
  .shelf.shelf3 .book.s-right { --bw: 124px; --pose: translate(60%, 10%) rotateY(-14deg) rotate(8deg); }
  .shelf.shelf3 .book.s-front { --bw: 150px; }
  .library { grid-template-columns: repeat(2, 1fr); row-gap: 2.6rem; }
  .lib-stage { height: 220px; }
}
.library > li { min-width: 0; }
.lib-stage .book.b2 { height: auto; width: 100%; max-height: 100%; }

/* ---------- enchanted light (canvas from enchant.js) ---------- */
.sky > canvas.enchant { position: absolute; inset: 0; z-index: 0; pointer-events: none; mix-blend-mode: screen; opacity: .9; }
/* scroll-driven depth: --hp is 0 at the top of the hero and 1 once it has scrolled away */
.sky .hero-copy, .sky-page .wrap { translate: 0 calc(var(--hp, 0) * -40px); opacity: calc(1 - var(--hp, 0) * .35); }
.sky .shelf { translate: 0 calc(var(--hp, 0) * -90px); }
.sky .floaty { translate: 0 calc(var(--hp, 0) * var(--fd, -140px)); }
.sky .floaty:nth-of-type(2n) { --fd: -70px; }
.sky .floaty:nth-of-type(3n) { --fd: -200px; }
.sky .clouds { translate: 0 calc(var(--hp, 0) * 30px); }
@media (prefers-reduced-motion: reduce) {
  .sky .hero-copy, .sky-page .wrap, .sky .shelf, .sky .floaty, .sky .clouds { translate: none; opacity: 1; }
}
/* square Book 2 matched to the visual weight of the portrait covers */
.lib-stage { --stage-h: clamp(230px, 24vw, 340px); height: var(--stage-h); }
.lib-stage .book.b2 { width: min(100%, calc(var(--stage-h) * .8)); height: auto; max-height: none; }
@media (max-width: 860px) { .lib-stage { --stage-h: 220px; } }

/* ---------- four-book fan (Books 1–4, reading order) ---------- */
.shelf.shelf4 { min-height: clamp(380px, 36vw, 500px); }
.shelf.shelf4 .book { --ry: 0deg; width: var(--bw); transform: var(--pose); transition: transform .6s var(--spring); }
.shelf.shelf4 .book.f1 { --bw: clamp(150px, 14vw, 205px); --pose: translate(-118%, 9%) rotateY(20deg) rotate(-11deg); z-index: 1; }
.shelf.shelf4 .book.f2 { --bw: clamp(150px, 14.5vw, 210px); --pose: translate(-42%, 2%) rotateY(8deg) rotate(-4deg); z-index: 3; }
.shelf.shelf4 .book.f3 { --bw: clamp(135px, 13vw, 190px); --pose: translate(42%, 1%) rotateY(-8deg) rotate(4deg); z-index: 3; }
.shelf.shelf4 .book.f4 { --bw: clamp(145px, 14vw, 205px); --pose: translate(118%, 8%) rotateY(-20deg) rotate(11deg); z-index: 2; }
@media (hover: hover) {
  .shelf.shelf4:hover .book.f1 { transform: translate(-132%, 6%) rotateY(12deg) rotate(-13deg) scale(1.03); }
  .shelf.shelf4:hover .book.f2 { transform: translate(-48%, -3%) rotateY(2deg) rotate(-5deg) scale(1.04); }
  .shelf.shelf4:hover .book.f3 { transform: translate(48%, -4%) rotateY(-2deg) rotate(5deg) scale(1.04); }
  .shelf.shelf4:hover .book.f4 { transform: translate(132%, 5%) rotateY(-12deg) rotate(13deg) scale(1.03); }
  .shelf.shelf4 .book:hover { z-index: 5; }
}
@media (max-width: 860px) {
  .shelf.shelf4 { min-height: 250px; }
  .shelf.shelf4 .book.f1 { --bw: 96px;  --pose: translate(-112%, 10%) rotateY(16deg) rotate(-10deg); }
  .shelf.shelf4 .book.f2 { --bw: 104px; --pose: translate(-40%, 2%) rotateY(6deg) rotate(-4deg); }
  .shelf.shelf4 .book.f3 { --bw: 92px;  --pose: translate(40%, 1%) rotateY(-6deg) rotate(4deg); }
  .shelf.shelf4 .book.f4 { --bw: 96px;  --pose: translate(112%, 9%) rotateY(-16deg) rotate(10deg); }
}

/* ==========================================================================
   Royal theme-song player
   ========================================================================== */
.theme-section { background: radial-gradient(60% 60% at 50% 40%, #ffe9f6, transparent 70%), linear-gradient(180deg, #cfe8ff 0%, #f3e3ff 45%, #ffe3f1 100%); padding: clamp(3rem, 7vw, 6rem) 0; }
.royal-player {
  position: relative; max-width: 980px; margin: 0 auto; display: grid; grid-template-columns: auto 1fr; gap: clamp(1.8rem, 4vw, 3.5rem); align-items: center;
  padding: clamp(1.6rem, 4vw, 3rem); border-radius: 36px; color: #fff4dc;
  background:
    radial-gradient(70% 90% at 20% 20%, rgba(255, 120, 200, .28), transparent 60%),
    radial-gradient(60% 80% at 90% 100%, rgba(120, 90, 255, .35), transparent 60%),
    linear-gradient(160deg, #4a1678 0%, #2a0d55 55%, #1a0636 100%);
  box-shadow: 0 0 0 3px #ffe7a0, 0 0 0 9px #e2a83a, 0 0 0 11px #7a440c, 0 0 0 16px rgba(255, 255, 255, .55), 0 40px 80px -20px rgba(70, 20, 120, .55);
}
.royal-player::before { /* gold filigree dots along the frame */
  content: ""; position: absolute; inset: 12px; border-radius: 26px; pointer-events: none;
  border: 2px dashed rgba(255, 215, 120, .35);
}
.rp-art { position: relative; width: clamp(220px, 30vw, 360px); aspect-ratio: 1; }
.rp-art img { position: relative; width: 100%; height: 100%; filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .45)); transition: transform .8s var(--spring); }
.rp-halo { position: absolute; inset: -12%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 220, 130, .55), rgba(255, 120, 200, .2) 45%, transparent 70%); opacity: .5; transition: opacity .6s; }
.rp-body h2 { color: var(--gold-hi); font-size: clamp(1.7rem, 3.4vw, 2.6rem); margin-bottom: .3em; }
.rp-sub { font: italic 600 clamp(1.1rem, 1.8vw, 1.35rem)/1.35 var(--story); color: #ffc9ea; margin: 0 0 1.6rem; }
.rp-controls { display: flex; align-items: center; gap: 1.4rem; }
.rp-play {
  position: relative; width: 96px; height: 96px; border-radius: 50%; border: 0; cursor: pointer; flex: none; display: grid; place-items: center;
  background: radial-gradient(circle at 38% 28%, #fff 0 6%, #ff8fcb 18%, #d6137c 55%, #7c0848 100%);
  box-shadow: 0 0 0 5px #ffe7a0, 0 0 0 9px #c98a22, 0 9px 0 9px #6b3a06, 0 22px 30px 6px rgba(0, 0, 0, .45);
  transition: transform .35s var(--spring), filter .25s;
}
.rp-play::after { content: ""; position: absolute; left: 22%; right: 22%; top: 10%; height: 32%; border-radius: 50%; background: linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,0)); pointer-events: none; }
.rp-play svg { width: 42px; height: 42px; fill: #fff; filter: drop-shadow(0 2px 2px rgba(90, 0, 40, .6)); }
.rp-play .i-pause { display: none; }
.rp-crown { position: absolute; top: -34px; left: 50%; width: 52px; transform: translateX(-50%) rotate(-6deg); filter: drop-shadow(0 4px 6px rgba(0,0,0,.35)); transition: transform .4s var(--spring); }
@media (hover: hover) { .rp-play:hover { transform: scale(1.07); filter: brightness(1.06); } .rp-play:hover .rp-crown { transform: translateX(-50%) rotate(6deg) translateY(-3px); } }
.rp-play:active { transform: scale(.93); transition-duration: .08s; }
.rp-eq { display: flex; align-items: flex-end; gap: 6px; height: 46px; }
.rp-eq i { width: 9px; height: 12px; border-radius: 6px; background: linear-gradient(180deg, #ffe7a0, #f39bd0); box-shadow: 0 0 10px rgba(255, 200, 120, .5); opacity: .45; }
.rp-progress { position: relative; height: 12px; margin-top: 1.8rem; border-radius: 999px; background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1.5px rgba(255, 215, 120, .5); overflow: hidden; }
.rp-bar { position: absolute; inset: 0 auto 0 0; width: var(--p, 0%); border-radius: inherit; background: linear-gradient(90deg, #ffd24a, #ff7ac2, #b98bff); box-shadow: 0 0 12px rgba(255, 180, 220, .8); transition: width .25s linear; }
.rp-time { display: flex; justify-content: space-between; margin: .6rem 0 0; font: 700 .78rem/1 var(--display); letter-spacing: .1em; color: #e8c9f2; }

/* playing state */
.royal-player.playing .i-play { display: none; }
.royal-player.playing .i-pause { display: block; }
.royal-player.playing .rp-halo { opacity: 1; animation: halo 2.4s ease-in-out infinite alternate; }
.royal-player.playing .rp-art img { transform: rotate(-2deg) scale(1.03); }
.royal-player.playing .rp-eq i { opacity: 1; animation: eq .9s ease-in-out infinite alternate; }
.royal-player.playing .rp-eq i:nth-child(2) { animation-duration: .7s; animation-delay: -.2s; }
.royal-player.playing .rp-eq i:nth-child(3) { animation-duration: 1.1s; animation-delay: -.5s; }
.royal-player.playing .rp-eq i:nth-child(4) { animation-duration: .8s; animation-delay: -.1s; }
.royal-player.playing .rp-eq i:nth-child(5) { animation-duration: 1s; animation-delay: -.35s; }
.royal-player.loading .rp-play { filter: saturate(.8) brightness(.95); }
@keyframes eq { from { height: 10px; } to { height: 46px; } }
@keyframes halo { from { transform: scale(.95); } to { transform: scale(1.06); } }

/* hero chip */
.song-chip { display: inline-flex; align-items: center; gap: .7rem; margin-top: 1.3rem; padding: .55rem 1.1rem .55rem .55rem; border-radius: 999px; text-decoration: none;
  font: 700 .76rem/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: #fff;
  background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1.5px rgba(255, 231, 160, .75); backdrop-filter: blur(6px); transition: transform .35s var(--spring), background .2s; }
.song-chip-note { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 40% 30%, #ff9fd0, #c3126f 70%); box-shadow: 0 0 0 2px #ffe7a0; }
.song-chip-note svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.song-chip-note circle { fill: #fff; stroke: none; }
@media (hover: hover) { .song-chip:hover { transform: translateY(-2px) scale(1.03); background: rgba(255, 255, 255, .22); } }

@media (max-width: 860px) {
  .royal-player { grid-template-columns: 1fr; justify-items: center; text-align: center; border-radius: 28px; }
  .rp-art { width: min(72vw, 300px); }
  .rp-controls { justify-content: center; }
  .rp-body { width: 100%; }
  .sky-hero .song-chip { justify-self: center; }
}
@media (prefers-reduced-motion: reduce) {
  .royal-player.playing .rp-eq i { animation: none; height: 30px; }
  .royal-player.playing .rp-halo { animation: none; }
}
.royal-player .eyebrow { color: var(--gold); }

/* ---------- theme song page ---------- */
.rp-more { margin-top: 1.4rem; }
.lyrics { max-width: 980px; margin: 0 auto; columns: 2 320px; column-gap: clamp(2rem, 5vw, 4rem); }
.lyrics .verse { break-inside: avoid; margin: 0 0 2rem; padding: 1.2rem 1.4rem; border-radius: 18px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 215, 120, .18); }
.lyrics h3 { font: 700 .74rem/1 var(--display); letter-spacing: .18em; text-transform: uppercase; color: var(--magenta-hi); margin-bottom: .8rem; }
.lyrics p { margin: 0; font: 600 clamp(1.1rem, 1.6vw, 1.28rem)/1.6 var(--story); color: #f3e3d0; }
.lyrics b { font-family: var(--display); font-size: .78em; letter-spacing: .06em; color: #ffc9ea; }
.lyrics .chorus { background: linear-gradient(160deg, rgba(255, 210, 110, .16), rgba(255, 120, 200, .1)); box-shadow: inset 0 0 0 1.5px rgba(255, 215, 120, .55), 0 0 30px rgba(255, 200, 120, .12); }
.lyrics .chorus h3 { color: var(--gold); }
.lyrics .chorus p { color: var(--gold-hi); }

/* ---------- uniform 9:16 series cards ---------- */
/* every book is the same portrait card now, so one size rule serves all shelves */
.shelf.shelf4 .book { aspect-ratio: 9 / 16 !important; }
.shelf.shelf4 .book.f1, .shelf.shelf4 .book.f2, .shelf.shelf4 .book.f3, .shelf.shelf4 .book.f4 { --bw: clamp(150px, 14vw, 205px); }
.shelf.shelf4 { min-height: clamp(420px, 40vw, 560px); }
.book .cover, .book img { border-radius: 16px; }
.book::before { display: none; }               /* the card has its own gold frame; no page block */
.lib-stage .book, .lib-stage .book.b2 { width: auto; height: 100%; max-width: 100%; aspect-ratio: 9 / 16; }
.world-inner .book, .world-inner .book.tall { width: clamp(170px, 20vw, 230px); aspect-ratio: 9 / 16; }
@media (max-width: 860px) {
  .shelf.shelf4 { min-height: 290px; }
  .shelf.shelf4 .book.f1, .shelf.shelf4 .book.f2, .shelf.shelf4 .book.f3, .shelf.shelf4 .book.f4 { --bw: 100px; }
}

/* ---------- five-book fan (Books 1–5), every card identical in size ---------- */
.shelf.shelf5 { min-height: clamp(420px, 40vw, 560px); }
.shelf.shelf5 .book { --ry: 0deg; aspect-ratio: 9 / 16 !important; width: var(--bw); transform: var(--pose); transition: transform .6s var(--spring); --bw: clamp(130px, 12.4vw, 180px); }
.shelf.shelf5 .book.f1 { --pose: translate(-126%, 12%) rotateY(18deg) rotate(-13deg); z-index: 1; }
.shelf.shelf5 .book.f2 { --pose: translate(-64%, 3%) rotateY(10deg) rotate(-6.5deg); z-index: 2; }
.shelf.shelf5 .book.f3 { --pose: translate(0, -2%); z-index: 4; }
.shelf.shelf5 .book.f4 { --pose: translate(64%, 3%) rotateY(-10deg) rotate(6.5deg); z-index: 2; }
.shelf.shelf5 .book.f5 { --pose: translate(126%, 12%) rotateY(-18deg) rotate(13deg); z-index: 1; }
@media (hover: hover) { .shelf.shelf5 .book:hover { transform: var(--pose) translateY(-8%) scale(1.06); z-index: 6; } }
.library { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 860px) {
  .shelf.shelf5 { min-height: 250px; }
  .shelf.shelf5 .book { --bw: 84px; }
  .library { grid-template-columns: repeat(2, 1fr); }
  .library > li:last-child { grid-column: 1 / -1; justify-self: center; width: 50%; }
}
.roster .cameo .ring { width: clamp(170px, 18vw, 230px); }

/* ==========================================================================
   Characters
   ========================================================================== */
.lineup-section { background: radial-gradient(70% 60% at 50% 30%, #fff 0%, transparent 70%), linear-gradient(180deg, #f3ecff 0%, #fde8f4 60%, #fff3dc 100%); overflow: hidden; }
.lineup-section .section-head h2 { color: var(--plum-800); }
.lineup { list-style: none; margin: 0 auto; padding: 0 0 20px; max-width: 1180px; display: flex; align-items: flex-end; justify-content: center; gap: clamp(0px, 1vw, 14px); position: relative; }
.lineup::before { /* the cloud stage they stand on */
  content: ""; position: absolute; left: 2%; right: 2%; bottom: 62px; height: 70px; border-radius: 50%; z-index: 0;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255, 200, 120, .45), rgba(255, 170, 220, .25) 60%, transparent 72%); filter: blur(6px); }
.actor { position: relative; z-index: 1; display: grid; justify-items: center; flex: 0 1 auto; }
.actor a { display: block; line-height: 0; border-radius: 20px; }
.actor a img { height: calc(var(--h) * 1px * var(--k, .62)); width: auto; filter: drop-shadow(0 14px 12px rgba(80, 30, 110, .28)); transition: transform .5s var(--spring), filter .3s;
  animation: bob 5s ease-in-out calc(var(--i) * -.7s) infinite alternate; --r0: 0deg; --r1: 0deg; }
.actor-label { width: clamp(90px, 10vw, 150px); height: auto; margin-top: 10px; }
@media (hover: hover) { .actor a:hover img { transform: translateY(-14px) scale(1.05); filter: drop-shadow(0 22px 18px rgba(80, 30, 110, .35)) drop-shadow(0 0 22px color-mix(in srgb, var(--c) 45%, transparent)); animation-play-state: paused; } }

.cast-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.4rem, 3vw, 2.4rem); }
.cast-grid > li:nth-child(n+5) { transform: translateX(calc(50% + clamp(.7rem, 1.5vw, 1.2rem))); }
.cast-card { display: grid; justify-items: center; text-align: center; padding: 1.6rem 1.2rem 1.8rem; border-radius: 28px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(255, 244, 252, .92)); color: var(--ink);
  box-shadow: 0 0 0 3px #fff, 0 0 0 7px color-mix(in srgb, var(--c) 55%, #f5c451), 0 26px 50px -18px rgba(0, 0, 0, .55); scroll-margin-top: calc(var(--header-h) + 24px); }
.cast-stage { position: relative; height: 260px; width: 100%; display: grid; place-items: end center; }
.cast-stage img { position: relative; max-height: 100%; width: auto; filter: drop-shadow(0 12px 10px rgba(60, 20, 90, .25)); transition: transform .5s var(--spring); }
.cast-glow { position: absolute; left: 50%; bottom: 0; width: 220px; height: 220px; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--c, #f5c451) 38%, transparent), transparent 68%); }
.cast-label { width: 170px; height: auto; margin: .8rem 0 .2rem; }
.cast-card .role { font: italic 700 1.12rem var(--story); color: var(--c); margin: 0 0 .5rem; }
.cast-card .bio { margin: 0; color: var(--ink-soft); font-size: .98rem; }
@media (hover: hover) { .cast-card:hover .cast-stage img { transform: translateY(-8px) scale(1.04); } }

/* home spotlight */
.spotlight { position: relative; display: grid; place-items: end center; min-height: 480px; justify-self: center; width: 100%; max-width: 380px; --c: #f5c451; }
.spotlight img { position: relative; height: clamp(380px, 38vw, 520px); width: auto; filter: drop-shadow(0 24px 22px rgba(0, 0, 0, .45)); animation: bob 5s ease-in-out infinite alternate; --r0: -1deg; --r1: 1deg; }
.spotlight .cast-glow { width: 360px; height: 360px; bottom: 30px; background: radial-gradient(circle, rgba(255, 214, 110, .5), rgba(255, 120, 200, .18) 45%, transparent 70%); }
.meet-strip { display: flex; align-items: flex-end; gap: 4px; margin: 1.6rem 0 .2rem; height: 86px; }
.meet-strip img { height: 100%; width: auto; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .35)); }
.meet-strip img:nth-child(2), .meet-strip img:nth-child(6) { height: 62%; }

@media (max-width: 1080px) { .cast-grid { grid-template-columns: repeat(2, 1fr); } .cast-grid > li:nth-child(n+5) { transform: none; } .cast-grid > li:last-child { grid-column: 1 / -1; justify-self: center; width: min(100%, 50%); } }
@media (max-width: 860px) {
  .lineup { flex-wrap: wrap; row-gap: 1.6rem; }
  .actor { flex: 0 0 30%; }
  .actor a img { --k: .34; }
  .lineup::before { display: none; }
  .spotlight { min-height: 0; }
  .spotlight img { height: 380px; }
  .meet-strip { justify-content: center; height: 70px; }
}
@media (max-width: 520px) { .cast-grid { grid-template-columns: 1fr; } .cast-grid > li:last-child { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .actor a img, .spotlight img { animation: none; } }
/* card fixes: figure fits its stage; rows centered (4 + 3) */
.cast-grid { display: flex; flex-wrap: wrap; justify-content: center; }
.cast-grid > li { flex: 0 0 calc((100% - 3 * clamp(1.4rem, 3vw, 2.4rem)) / 4); transform: none !important; width: auto !important; }
.cast-stage img { height: 100%; max-height: 260px; width: auto; max-width: 100%; object-fit: contain; }
@media (max-width: 1080px) { .cast-grid > li { flex-basis: calc((100% - clamp(1.4rem, 3vw, 2.4rem)) / 2); } }
@media (max-width: 520px) { .cast-grid > li { flex-basis: 100%; } .cast-stage { height: 240px; } }

/* ---------- characters: on-brand stage, nameplates, jewel cards ---------- */
.lineup-section { background: radial-gradient(60% 50% at 50% 70%, rgba(255, 200, 120, .22), transparent 70%), radial-gradient(90% 70% at 50% 0%, #4a1870 0%, var(--plum-900) 60%, var(--plum-950) 100%); }
.lineup-section .section-head h2 { color: var(--gold-hi); }
.lineup-section .lede { color: #e5d3b5; }
.lineup { padding-bottom: 40px; }
.lineup::before { /* gold stage */
  bottom: 44px; height: 46px; border-radius: 50%; filter: none;
  background: radial-gradient(50% 50% at 50% 40%, #ffe7a0 0%, #e8ac35 45%, #8a4f0c 80%, transparent 82%);
  box-shadow: 0 0 60px rgba(255, 200, 110, .45); opacity: .9; }
.lineup::after { /* spotlight cone */
  content: ""; position: absolute; left: 10%; right: 10%; top: -40px; bottom: 60px; z-index: 0; pointer-events: none;
  background: radial-gradient(50% 60% at 50% 100%, rgba(255, 236, 180, .22), transparent 70%); }
.actor a img { filter: drop-shadow(0 18px 14px rgba(0, 0, 0, .5)); }
@media (hover: hover) { .actor a:hover img { filter: drop-shadow(0 26px 20px rgba(0, 0, 0, .55)) drop-shadow(0 0 26px color-mix(in srgb, var(--c) 60%, transparent)); } }
.nameplate { display: inline-grid; place-items: center; margin-top: 14px; padding: 6px 14px 4px; border-radius: 999px; position: relative; z-index: 2;
  background: linear-gradient(180deg, #fffaf0, #f6e2b6); box-shadow: 0 0 0 2px #fff, 0 0 0 5px color-mix(in srgb, var(--c) 60%, #e2a83a), 0 10px 18px rgba(0, 0, 0, .35); }
.nameplate img { width: clamp(84px, 8.5vw, 128px); height: auto; }
.actor-label { display: none; }

.cast-card { color: #f6ead0;
  background: radial-gradient(90% 60% at 50% 30%, color-mix(in srgb, var(--c) 42%, #2a0d55) 0%, #2a0d55 60%, #1a0636 100%);
  box-shadow: 0 0 0 3px #ffe7a0, 0 0 0 8px #e2a83a, 0 0 0 10px #7a440c, 0 30px 50px -16px rgba(60, 20, 0, .55); }
.cast-card .role { color: #ffd0ec; }
.cast-card .bio { color: #eadcf0; }
.cast-card .nameplate { margin: 1rem 0 .6rem; }
.cast-card .nameplate img { width: 150px; }
.cast-glow { background: radial-gradient(circle, color-mix(in srgb, var(--c, #f5c451) 70%, #fff 10%), transparent 66%); opacity: .75; }
.cast-stage img { filter: drop-shadow(0 16px 14px rgba(0, 0, 0, .5)); }
.cast-stage::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 150px; height: 18px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(50% 50%, rgba(255, 215, 120, .7), transparent 75%); }
@media (max-width: 860px) { .nameplate img { width: 88px; } .lineup::after { display: none; } }

/* ---------- Makeda & Friends page ---------- */
.crew-page { padding-top: clamp(3rem, 6vw, 5rem); }
.crew-head h1 { color: var(--plum-800); margin-bottom: .35em; }
.crew-crown { width: 76px; height: auto; margin: 0 auto .6rem; filter: drop-shadow(0 8px 10px rgba(120, 60, 0, .3)); }