@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(../fonts/baloo2-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(../fonts/baloo2-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-ui);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  overflow-x: hidden;
}
a { color: inherit; }
:focus-visible { outline: 3px solid var(--text); outline-offset: 3px; border-radius: 8px; }

.skip {
  position: absolute; left: 12px; top: -64px; z-index: 20;
  background: var(--banner); color: var(--banner-ink);
  padding: 8px 16px; border-radius: var(--r-pill); font-weight: var(--fw-bold); text-decoration: none;
}
.skip:focus { top: 12px; }

/* ---------- Shared pieces ---------- */
.sticker {
  border: var(--line) solid var(--ink);
  border-radius: var(--r-lg);
  box-shadow: 0 4px 0 var(--shade);
}
.soon { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; }
.soon-label {
  background: var(--lamp-light); color: var(--on-lamp);
  border-radius: var(--r-pill); padding: 6px 18px 4px;
  font-weight: var(--fw-heavy); font-size: var(--fs-label); letter-spacing: 0.03em;
}
.play-badge {
  display: inline-flex; align-items: center; gap: 10px;
  background: #1F1A24; color: #FFF8EC;
  border-radius: 12px; padding: 7px 18px 7px 12px; text-align: left;
}
.play-badge svg { width: 26px; height: 28px; flex: none; }
.pb-small { display: block; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.2; }
.pb-big { display: block; font-size: 20px; font-weight: var(--fw-bold); line-height: 1.1; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 4px;
  padding: 28px 20px 76px;
  text-align: center;
}
.hero-text { max-width: 560px; }
.kicker {
  margin: 0 0 2px;
  color: var(--text-soft);
  font-size: 13px; font-weight: var(--fw-bold); letter-spacing: 0.16em; text-transform: uppercase;
}
.title {
  margin: 0;
  color: var(--banner);
  font-size: clamp(60px, 17vw, 128px);
  font-weight: var(--fw-heavy);
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-shadow: 0 5px 0 var(--lamp-light);
}
.hook {
  margin: 14px auto 20px;
  max-width: 30ch;
  font-size: clamp(18px, 4.8vw, 23px);
  line-height: 1.35;
}
.hero-art { width: min(100%, 420px); }
.hero-scene { display: block; width: 100%; height: auto; }
.scroll-cue {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; min-height: 48px; padding: 4px 14px;
  color: var(--text-soft); font-weight: var(--fw-bold); font-size: var(--fs-small); text-decoration: none;
}
.scroll-cue svg { width: 22px; height: 14px; }

@media (min-width: 900px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 56px;
    max-width: 1200px;
    margin: 0 auto;
    padding-inline: 40px;
    text-align: left;
  }
  .hero-text { justify-self: end; }
  .hook { margin-left: 0; }
  .hero .soon { justify-content: flex-start; }
  .hero-art { width: min(100%, 540px); justify-self: start; }
}

/* ---------- Journey ---------- */
.journey { position: relative; }
.path-layer { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; }
.path-start { display: block; width: 1px; height: 24px; margin: 0 auto; }

.region { position: relative; padding: 40px 16px 16px; }
.region-inner {
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.region-card {
  position: relative; z-index: 3;
  justify-self: center;
  margin-bottom: 4px;
  padding: 6px 24px 10px;
  background: var(--banner); color: var(--banner-ink);
  text-align: center;
}
.region-card .kick { display: block; font-size: 12px; font-weight: var(--fw-bold); letter-spacing: 0.2em; text-transform: uppercase; }
.region-card h2 { margin: 0; font-size: clamp(22px, 6vw, 30px); font-weight: var(--fw-heavy); line-height: 1.1; }

.row { position: relative; z-index: 2; width: 100%; max-width: 480px; height: 132px; justify-self: center; }
.row.tall { height: 164px; }
.node, .decor { position: absolute; left: var(--x); transform: translateX(-50%); line-height: 0; }
.node {
  bottom: 8px; z-index: 1;
  width: 72px; height: 80px;
  padding: 0; border: 0; background: none; cursor: pointer;
  border-radius: 14px;
  -webkit-tap-highlight-color: transparent;
}
.node.mile { width: 104px; height: 116px; }
.node .ring { position: absolute; left: -16px; top: -16px; pointer-events: none; }
.decor { bottom: var(--y, 8px); pointer-events: none; }
.stop-mark { position: absolute; top: 0; left: 0; width: 1px; height: 1px; }

.feature {
  position: relative; z-index: 3;
  justify-self: center;
  width: 100%; max-width: 460px;
  margin: 4px 0;
  padding: 18px 20px 20px;
  background: var(--surface); color: var(--text);
}
.feature .lede { margin: 0; font-size: 17px; line-height: 1.45; }
.feature hr { margin: 14px 0; border: 0; border-top: 2px dashed var(--paper-shade); }
.feature h3 { margin: 0 0 6px; font-size: 22px; font-weight: var(--fw-heavy); line-height: 1.15; }
.feature p { margin: 0; }
.feature .art { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin-top: 16px; min-height: 96px; }
.art .banner-meter { width: min(100%, 320px); height: auto; }
.art-arrow { width: 28px; height: 20px; }

.mini-banner { padding: 6px 22px 8px; background: var(--banner); color: var(--banner-ink); text-align: center; border-radius: 14px; }
.mini-banner small { display: block; font-size: 12px; font-weight: var(--fw-bold); letter-spacing: 0.16em; }
.mini-banner strong { display: block; font-size: 22px; font-weight: var(--fw-heavy); line-height: 1.15; }

.swatches { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 0; margin: 0; list-style: none; }
.swatch {
  position: relative;
  width: 40px; height: 54px;
  background: var(--paper);
  border: var(--line) solid var(--ink);
  border-radius: 20px 20px 4px 4px;
  box-shadow: inset -8px 0 0 var(--shade);
}
.swatch::after {
  content: ''; position: absolute; left: 50%; bottom: 9px;
  width: 12px; height: 12px; margin-left: -6px; border-radius: 50%;
  background: var(--lamp); border: 1.5px solid var(--ink);
}
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 0; margin: 0; list-style: none; }
.chip { padding: 4px 14px 2px; background: var(--button); border-radius: var(--r-pill); font-weight: var(--fw-bold); font-size: 15px; }
.side { display: none; }

@media (min-width: 900px) {
  .region { padding-top: 72px; }
  .region-inner { grid-template-columns: minmax(0, 1fr) 460px minmax(0, 1fr); column-gap: 48px; }
  .region-card { grid-column: 2; grid-row: 1; }
  .row { grid-column: 2; height: 150px; }
  .row.tall { height: 180px; }
  .feature { grid-column: 1; grid-row: 2 / span 4; align-self: center; justify-self: end; }
  .feature.right { grid-column: 3; justify-self: start; }
  .side { display: block; position: relative; grid-column: 3; grid-row: 2 / span 4; pointer-events: none; }
  .side.left { grid-column: 1; }
  .side .decor { top: var(--y); bottom: auto; }
}

/* ---------- Finale and footer ---------- */
.finale { position: relative; padding: 16px 20px 40px; text-align: center; }
.finale-lamp { display: inline-block; position: relative; z-index: 2; line-height: 0; }
.finale h2 { margin: 12px 0 8px; color: var(--banner); font-size: clamp(30px, 8vw, 46px); font-weight: var(--fw-heavy); line-height: 1.05; }
.finale p { max-width: 34ch; margin: 0 auto 20px; font-size: 18px; }
.finale .sprig { position: absolute; bottom: 40px; line-height: 0; }

.site-footer { padding: 24px 20px 40px; text-align: center; font-size: 15px; }
.site-footer p { margin: 0; }
.site-footer .links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 18px; margin-bottom: 6px; }
.site-footer a { display: inline-flex; align-items: center; min-height: 44px; font-weight: var(--fw-bold); }
.site-footer .fine { color: var(--text-soft); }

/* ---------- Site loops (character idles come from motion.css) ---------- */
.sway :is(.part-curtain-l, .part-curtain-r) { animation: m-curtain-sway 4000ms var(--ease-in-out) infinite; }
.sway .part-curtain-r { animation-delay: 500ms; }
.loop-glow .part-glow { animation: m-glow-pulse 2800ms var(--ease-in-out) infinite; }
.ring .part-ring { animation: m-current-node-pulse 1800ms var(--ease-in-out) infinite; }
.lamp .part-glow, .lamp .part-flame { opacity: 0; transition: opacity 900ms var(--ease-out); }
.lamp.is-lit .part-glow, .lamp.is-lit .part-flame { opacity: 1; }
.lamp.is-lit .part-glow { animation: m-glow-pulse 2800ms var(--ease-in-out) 900ms infinite; }
.lamp.is-lit .part-flame { animation: m-flame-flicker 1400ms var(--ease-in-out) infinite; }
.scroll-cue svg { animation: m-bob-idle 2400ms var(--ease-in-out) infinite; }
[data-offscreen] * { animation-play-state: paused !important; }

:root[data-motion="reduced"] :is(.sway, .loop-glow, .ring, .lamp) .part,
:root[data-motion="reduced"] .scroll-cue svg { animation: none; }
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) :is(.sway, .loop-glow, .ring, .lamp) .part,
  :root:not([data-motion="full"]) .scroll-cue svg { animation: none; }
}