/* Variant B — storybook scroll: one journey, chapter by chapter */
.hero-b { position: relative; isolation: isolate; overflow: hidden; padding-top: clamp(40px, 7vw, 88px);
  background: linear-gradient(180deg, #0b1424 0%, #13233c 60%, #0d1a2e 100%); }
.hero-b .sky { z-index: -1; }
.hero-b-copy { display: grid; justify-items: center; text-align: center; gap: 12px; position: relative; z-index: 1; }
.hero-b h1 { margin: 0; }
.logo { width: min(520px, 84vw); height: auto; filter: drop-shadow(0 6px 26px #000a); }
.hero-tagline { font-family: var(--display); font-size: clamp(20px, 2.4vw, 28px); color: var(--gold-soft); margin: 0; text-shadow: 0 2px 12px #000a; }
.hero-b-art { position: relative; margin-top: 8px; }
.hero-b-art img { width: 100%; aspect-ratio: 3840 / 1240; object-fit: cover; }
.hero-b-art::before, .hero-b-art::after { content: ''; position: absolute; left: 0; right: 0; height: 28%; z-index: 1; pointer-events: none; }
.hero-b-art::before { top: 0; background: linear-gradient(180deg, #13233c, #13233c00); }
.hero-b-art::after { bottom: 0; background: linear-gradient(0deg, var(--night), #0d152200); }
@media (prefers-reduced-motion: no-preference) { .hero-b-copy > * { animation: rise 1s ease both; } .hero-b-copy > :nth-child(2) { animation-delay: 0.2s; } }

.hero-b-cta { display: grid; justify-items: center; margin-top: -24px; padding-bottom: 40px; position: relative; z-index: 2; }
.hero-b-cta .cta { justify-items: center; }
.tiles-b { padding-top: 0; }

.story-b { background: radial-gradient(ellipse 60% 40% at 50% 0%, #1b2c42, transparent 70%); }
.chapters { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: clamp(40px, 6vw, 80px); }
.chapters::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; border-left: 2px dotted #ecd09a55; }
.chapter { position: relative; width: min(820px, 100%); justify-self: start; }
.chapter:nth-child(even) { justify-self: end; }
.chapter .story-shot { margin: 0; }
.chapter .story-shot figcaption { display: none; }
.chapter-title { position: absolute; left: 18px; bottom: 18px; display: flex; align-items: center; gap: 12px; max-width: calc(100% - 36px);
  padding: 10px 18px 10px 10px; border-radius: 999px; background: #0d1522e6; border: 1px solid #ecd09a55;
  font-size: clamp(18px, 2.2vw, 26px); color: var(--gold-soft); box-shadow: 0 10px 30px #000a; pointer-events: none; }
.chapter:nth-child(even) .chapter-title { left: auto; right: 18px; }
.chapter-num { flex: none; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; font: 700 16px/1 var(--display-en); color: #1a1408;
  background: radial-gradient(circle at 35% 30%, #fff1cc, var(--gold) 70%); box-shadow: 0 0 16px #ecd09a66; }

.cast-b .cast-row { margin-top: 28px; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; gap: 12px; }
.cast-b .cast-row .char { flex: 0 0 168px; scroll-snap-align: start; }
.cast-b .cast-row .char-art img { max-height: 150px; }
.cast-row::-webkit-scrollbar { height: 6px; } .cast-row::-webkit-scrollbar-thumb { background: #ecd09a44; border-radius: 3px; }

.epilogue-b { position: relative; isolation: isolate; overflow: hidden; min-height: 520px; display: grid; align-items: center; }
.epilogue-b-art { position: absolute; inset: 0; z-index: -1; }
.epilogue-b-art img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.epilogue-b-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #0d1522f0, #0d152299 40%, #0d152200 70%), linear-gradient(180deg, var(--night), #0d152200 25%); }
.epilogue-b-copy { display: grid; gap: 16px; padding: 80px 0; justify-items: start; }

@media (max-width: 900px) {
  .chapters::before { display: none; }
  .chapter, .chapter:nth-child(even) { justify-self: stretch; }
}
@media (max-width: 700px) {
  .hero-b-art img { aspect-ratio: 4 / 3; object-position: 50% 50%; }
  .hero-b-cta { margin-top: 0; }
  .hero-b-cta .cta { justify-items: stretch; width: 100%; }
  .chapter-title, .chapter:nth-child(even) .chapter-title { position: static; margin-top: 10px; background: none; border: 0; box-shadow: none; padding: 0; font-size: 19px; }
  .cast-b .cast-row .char { flex-basis: 128px; }
  .cast-b .cast-row .char-art img { max-height: 104px; }
  .epilogue-b { min-height: 0; display: block; }
  .epilogue-b-art { position: relative; aspect-ratio: 900 / 1144; max-height: 70vh; }
  .epilogue-b-art::after { background: linear-gradient(0deg, var(--night), #0d152200 45%); }
  .epilogue-b-copy { padding: 0 0 48px; margin-top: -60px; position: relative; justify-items: stretch; }
}

/* Hero: H3 (B05 calm, chosen 2026-10-07) is the release default; H1/H2/H4 are review-only (/v/b-h1/ …), tools/build-hero-options.py */
/* H3: B05 was painted with its title on the calm left half, so the logo sits there on desktop */
@media (min-width: 701px) {
  .hero-b--h3 { display: grid; grid-template-areas: 'stack' 'cta'; padding-top: 0; }
  .hero-b--h3 .hero-b-copy, .hero-b--h3 .hero-b-art { grid-area: stack; }
  .hero-b--h3 .hero-b-copy { align-self: center; justify-self: start; justify-items: center; text-wrap: balance; width: min(34%, 560px); margin: 0 0 0 3vw; padding: 0; z-index: 2; }
  .hero-b--h3 .hero-b-copy .logo { width: min(480px, 33vw); }
  /* soft night scrim so the tagline never sits on the moon's reflection */
  .hero-b--h3 .hero-b-copy::before { content: ''; position: absolute; inset: -18% -14%; z-index: -1; pointer-events: none;
    background: radial-gradient(closest-side, #0b1424b3, #0b142466 60%, #0b142400); }
  .hero-b--h3 .hero-b-art { margin-top: 0; z-index: 1; display: flex; justify-content: flex-end; }
  /* art anchored right; its dark lake edge fades into the sky so the logo has calm space */
  .hero-b--h3 .hero-b-art img { width: 78%; aspect-ratio: 1657 / 809; max-height: 82vh; object-position: 50% 12%;
    -webkit-mask-image: linear-gradient(90deg, #0000, #000 22%); mask-image: linear-gradient(90deg, #0000, #000 22%); }
  .hero-b--h3 .hero-b-art::before { height: 14%; background: linear-gradient(180deg, #0b1424, #0b142400); }
  .hero-b--h3 .hero-b-cta { grid-area: cta; margin-top: -20px; }
}
.hero-b--h4 .hero-b-art { display: grid; justify-items: center; padding: 0 16px; margin-top: 18px; }
.hero-b--h4 .hero-b-art::before { display: none; }
.hero-b--h4 .hero-b-art::after { display: none; }
.hero-b--h4 .hero-b-cta { margin-top: 20px; }
.hero-b--h4 .hero-b-art img { position: relative; z-index: 1; width: min(760px, 100%); height: auto; aspect-ratio: auto; object-fit: contain;
  filter: drop-shadow(0 18px 30px #0008); }
.h4-glow { position: absolute; left: 50%; bottom: 4%; width: min(620px, 82%); aspect-ratio: 2.4 / 1; transform: translateX(-50%); z-index: 0; pointer-events: none;
  background: radial-gradient(closest-side, #ffdf9a5c, #ffdf9a1f 55%, #ffdf9a00), radial-gradient(closest-side at 50% 85%, #8fb4e040, #8fb4e000); }
@media (prefers-reduced-motion: no-preference) { .h4-glow { animation: h4-breathe 6s ease-in-out infinite; } }
@keyframes h4-breathe { 50% { opacity: 0.7; } }
@media (max-width: 700px) {
  .hero-b--h3 .hero-b-art img { aspect-ratio: 4 / 3; object-position: 50% 50%; }
  .hero-b--h4 .hero-b-art { margin-top: 10px; padding: 0 10px; }
  .hero-b--h4 .hero-b-art img { width: 100%; }
}

/* Approved in-game title: keep its embedded logo and both friends uncropped. */
.hero-b--current { padding-top: 0; display: block; }
.hero-b--current .hero-b-art { margin: 0 auto; max-width: 1600px; position: relative; }
.hero-b--current .hero-b-art img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; max-height: none; mask-image: none; }
.hero-b--current .hero-b-art::before, .hero-b--current .hero-b-art::after { display: none; }
.hero-b--current .hero-b-cta { position: relative; margin: 0 auto; padding-top: 24px; padding-bottom: 28px; display: grid; justify-items: center; gap: 18px; text-align: center; }
@media (max-width: 700px) {
 .hero-b--current .hero-b-art img { aspect-ratio: 16 / 9; }
 .hero-b--current .hero-b-cta { padding-top: 20px; gap: 14px; }
}