/* Home: the scroll-driven 3D story. Sits under the ivory header; uses site.css tokens. */
#story { position: relative; height: 1000vh; background: var(--ink); color: var(--on-ink); }
#stage { position: sticky; top: 76px; height: calc(100vh - 76px); overflow: hidden; }
#scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.vignette { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 70% 45%, transparent 45%, rgba(0,0,0,.85) 100%),
              linear-gradient(90deg, rgba(0,0,0,.94) 0%, rgba(0,0,0,.6) 34%, transparent 56%); }

/* loader inside the stage */
#loader { position: absolute; inset: 0; z-index: 6; background: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; transition: opacity .8s ease, visibility .8s; }
#loader.done { opacity: 0; visibility: hidden; }
/* Approved reversed logo (dark backgrounds only). The file has transparent margins around the
   wordmark; at 150 px the wordmark is ~130 px wide (above the 60 px minimum, below native size). */
.loader-logo { width: 150px; height: auto; margin-bottom: 6px; }
.loader-bar { width: 220px; height: 2px; background: var(--ink-line); overflow: hidden; }
.loader-bar span { display: block; height: 100%; width: 0; background: var(--saffron); transition: width .2s linear; }
.loader-count { font: 400 12px var(--mono); color: var(--on-ink-muted); letter-spacing: .04em; }
.loader-count span { color: var(--on-ink); }

/* globe labels */
.labels { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.mk { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 8px; white-space: nowrap; font-size: 12px; color: var(--on-ink); opacity: 0; will-change: transform, opacity; }
.mk i { width: 7px; height: 7px; border-radius: 50%; background: var(--saffron); box-shadow: 0 0 0 4px rgba(255,102,0,.2); flex: none; }
.mk.next i { background: transparent; border: 1.5px solid var(--on-ink-muted); box-shadow: none; }
.mk b { font-weight: 600; }
.mk small { font: 400 11px var(--mono); color: var(--on-ink-muted); }
.mk .pill { font: 500 10px var(--mono); letter-spacing: .06em; padding: 2px 7px; border: 1px solid rgba(244,239,230,.35); border-radius: 2px; color: var(--on-ink); }

/* story panels */
.panel { position: absolute; z-index: 3; left: var(--gutter); top: 50%; width: min(540px, calc(100% - 2 * var(--gutter) - 40px)); transform: translateY(-50%); opacity: 0; will-change: opacity, transform; }
.panel.live { pointer-events: auto; }
.panel h1 { font-size: clamp(40px, 5vw, 72px); margin-bottom: 22px; }
.panel h2 { font-size: clamp(34px, 3.8vw, 56px); margin-bottom: 16px; }
.panel h1 em, .panel h2 em { font-style: italic; color: #f7c9b0; }
.panel .lede { color: var(--on-ink-muted); font-size: clamp(16px, 1.15vw, 18px); max-width: 52ch; }
.panel .lede b { color: var(--on-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.panel .meta { margin-top: 26px; font: 400 12px var(--mono); color: var(--on-ink-muted); letter-spacing: .02em; }
.panel .meta b { color: var(--on-ink); font-weight: 500; }
.panel .ctas { margin-top: 28px; }
.panel .btn-ghost { color: var(--on-ink); }
.scroll-hint { margin-top: 34px; font: 400 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--on-ink-muted); display: flex; align-items: center; gap: 12px; }
.scroll-hint span { width: 1px; height: 34px; background: linear-gradient(var(--saffron), transparent); animation: drip 2s ease-in-out infinite; transform-origin: top; }
@keyframes drip { 0%, 100% { transform: scaleY(.4); } 50% { transform: scaleY(1); } }
.kpis { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 22px; margin-top: 22px; }
.kpis div { border-left: 2px solid var(--saffron); padding-left: 10px; }
.kpis b { display: block; font: 600 18px/1.2 var(--sans); font-variant-numeric: tabular-nums; }
.kpis span { font: 400 11px var(--mono); color: var(--on-ink-muted); }
.fig { margin-top: 22px; max-width: 440px; }
.fig + .fig { margin-top: 14px; }
.fig figcaption { font: 500 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--on-ink-muted); margin: 0 0 10px; }
.tiers { display: flex; gap: 22px; margin-top: 22px; }
.tiers div { padding-left: 10px; border-left: 2px solid; }
.tiers b { display: block; font: 600 26px var(--sans); font-variant-numeric: tabular-nums; }
.tiers span { font: 400 11px var(--mono); color: var(--on-ink-muted); display: block; max-width: 120px; }
.t-strong { border-color: #2fbf5b !important; } .t-lean { border-color: #f5d33f !important; } .t-risky { border-color: #e0384b !important; }
.booth-name { font: 500 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--on-ink-muted); margin: -4px 0 14px; }
.closing-line { font-family: var(--serif); font-size: clamp(20px, 1.8vw, 26px); line-height: 1.3; margin-top: 22px; color: var(--on-ink); max-width: 30ch; }
/* story charts are on ink */
#story .chart .grid { stroke: var(--ink-line); }
#story .chart .axis, #story .chart .zero { stroke: rgba(244,239,230,.5); }
#story .chart .tick, #story .chart .sub, #story .chart .end-n { fill: var(--on-ink-muted); }
#story .chart .lab, #story .chart .val { fill: var(--on-ink); }
#story .chart .track { fill: rgba(244,239,230,.08); }
#story .chart .stem { stroke: rgba(244,239,230,.35); }
#story .chart .up { fill: #6fd394; } #story .chart .down { fill: #ff8a80; }

/* altitude rail */
.rail { position: absolute; z-index: 4; right: clamp(16px, 3vw, 40px); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 22px; align-items: flex-end; }
.rail-track { position: absolute; right: 5px; top: 6px; bottom: 6px; width: 1px; background: var(--ink-line); }
.rail-track span { position: absolute; top: 0; left: 0; width: 1px; height: 0; background: var(--saffron); }
.rail button { position: relative; background: none; border: 0; cursor: pointer; color: var(--on-ink-muted); display: flex; flex-direction: row-reverse; align-items: center; gap: 12px; font: 500 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 0; }
.rail button i { width: 11px; height: 11px; border-radius: 50%; border: 1px solid var(--on-ink-muted); background: var(--ink); transition: all .3s; }
.rail button span { opacity: .55; transition: opacity .3s; }
.rail button:hover span, .rail button.active span { opacity: 1; }
.rail button.active { color: var(--on-ink); }
.rail button.active i { background: var(--saffron); border-color: var(--saffron); box-shadow: 0 0 0 5px rgba(255,102,0,.2); }
.rail button.passed i { background: var(--saffron); border-color: var(--saffron); }

.story-source { position: absolute; z-index: 3; left: var(--gutter); bottom: 18px; right: 200px; font: 400 11px var(--mono); color: var(--on-ink-muted); opacity: .85; }
.tooltip { position: fixed; z-index: 50; pointer-events: none; opacity: 0; transition: opacity .15s; background: rgba(20,20,20,.95); color: var(--on-ink); border: 1px solid var(--ink-line); border-radius: 2px; padding: 10px 12px; font-size: 12px; line-height: 1.5; min-width: 150px; }
.tooltip.show { opacity: 1; }

@media (max-width: 860px) {
  .rail button span { display: none; }
  .rail { gap: 16px; }
  .panel { top: auto; bottom: 48px; transform: none; width: calc(100% - 2 * var(--gutter) - 32px); }
  .vignette { background: linear-gradient(0deg, rgba(0,0,0,.96) 0%, rgba(0,0,0,.62) 48%, transparent 72%); }
  .kpis { grid-template-columns: repeat(2, auto); }
  .fig + .fig, .panel .meta { display: none; }
  .story-source { right: var(--gutter); bottom: 10px; font-size: 10px; }
  .mk small { display: none; }
}
@media (max-height: 820px) and (min-width: 861px) {
  .panel h1 { font-size: clamp(34px, 3.6vw, 52px); margin-bottom: 14px; }
  .panel .lede { font-size: 15.5px; line-height: 1.55; }
  .panel .ctas { margin-top: 18px; }
  .panel .meta { margin-top: 14px; }
  .scroll-hint { display: none; }
  .panel h2 { font-size: clamp(30px, 3.2vw, 46px); }
  .fig { margin-top: 14px; } .fig + .fig { margin-top: 8px; }
}
@media (prefers-reduced-motion: reduce) { .scroll-hint span { animation: none; } }