/*
Theme Name: StudyLyft (TEMPORARY)
Theme URI: https://debugsquare.com
Author: DebugSquare
Description: TEMPORARY WordPress theme scaffold for the StudyLyft "Departures Concourse" one-page site. Wraps the existing HTML/CSS/GSAP build into header/front-page/footer templates. NOT final — the intake-deadline board is still hard-coded (see CLAUDE.md: make admin-editable via an "Intakes" CPT/ACF before shipping).
Version: 0.1-temp
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
Text Domain: studylyft
*/

/* ===== STUDYLYFT v4 — THE DEPARTURES CONCOURSE ===== */

:root {
  --bg: #0d0c0a;
  --bg-2: #15140f;
  --bg-3: #1d1b14;
  --paper: #f3eedf;
  --paper-2: #e8e2cc;
  --ink: #f3eedf;
  --ink-2: #c9c2ab;
  --ink-3: #8b8674;
  --ink-faint: #5a5648;
  --line: rgba(243, 238, 223, 0.14);
  --line-strong: rgba(243, 238, 223, 0.28);
  --accent: #ff5f1f;     /* runway orange */
  --accent-2: #f7c948;   /* signal amber */
  --green: #7cc66f;      /* boarding green */
  --red: #e54d2e;        /* delayed red */

  --display: 'Big Shoulders Display', 'Anton', impact, sans-serif;
  --sans: 'Manrope', ui-sans-serif, system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;

  --pad-x: clamp(20px, 4vw, 72px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg); color: var(--ink); }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  font-family: var(--sans);
  font-weight: 400;
  overflow-x: hidden;
  cursor: none;
  min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: none; }

::selection { background: var(--accent); color: #fff; }

/* type helpers */
.mono { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--ink-3); text-transform: uppercase; }
.label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-3); }
.tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border: 1px solid var(--line-strong);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-2);
}
.tag .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ===== BOOT LOADER ===== */
.boot {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--bg);
  display: grid; place-items: center;
  pointer-events: all;
}
.boot__inner { width: min(720px, 86vw); }
.boot__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 32px; }
.boot__brand { font-family: var(--display); font-size: 44px; line-height: 0.9; letter-spacing: -0.01em; }
.boot__brand em { font-style: normal; color: var(--accent); }
.boot__meta { font-family: var(--mono); font-size: 11px; color: var(--ink-3); text-align: right; line-height: 1.7; }
.boot__bar {
  height: 2px; background: var(--line); position: relative; overflow: hidden; margin-bottom: 16px;
}
.boot__bar i { position: absolute; inset: 0 100% 0 0; background: var(--accent); }
.boot__row { display: flex; justify-content: space-between; align-items: center; font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.boot__row .pct { font-family: var(--display); font-size: 32px; color: var(--paper); letter-spacing: 0.02em; }
.boot__row .pct b { font-weight: 700; }
.boot__row .pct em { color: var(--ink-faint); font-style: normal; }
.boot__msg { min-width: 220px; text-align: right; }

/* ===== OVERLAY CHROME ===== */
.chrome {
  position: fixed; inset: 0; pointer-events: none; z-index: 100;
}
.chrome > * { position: absolute; pointer-events: auto; }

.chrome__brand { top: 24px; left: var(--pad-x); display: flex; align-items: center; gap: 12px; }
.chrome__brand .mark {
  width: 36px; height: 36px; background: var(--accent); color: #fff;
  display: grid; place-items: center; font-family: var(--display); font-size: 22px; line-height: 1;
  font-weight: 700;
}
.chrome__brand b { font-family: var(--display); font-size: 18px; letter-spacing: 0.02em; }
.chrome__brand em { font-style: normal; color: var(--accent); }
.chrome__brand .sub { display: block; font-family: var(--mono); font-size: 9px; color: var(--ink-3); letter-spacing: 0.18em; text-transform: uppercase; }

.chrome__nav { top: 28px; left: 50%; transform: translateX(-50%); display: flex; gap: 22px; }
.chrome__nav a { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-2); position: relative; padding: 4px 0; }
.chrome__nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; transition: transform .3s ease; }
.chrome__nav a:hover::after { transform: scaleX(1); }
.chrome__nav a .num { color: var(--ink-faint); margin-right: 6px; }

.chrome__clocks { top: 24px; right: var(--pad-x); display: flex; gap: 20px; align-items: center; }
.clock { display: flex; flex-direction: column; align-items: flex-end; line-height: 1; }
.clock .city { font-family: var(--mono); font-size: 9px; letter-spacing: 0.22em; color: var(--ink-faint); text-transform: uppercase; }
.clock .time { font-family: var(--display); font-size: 22px; letter-spacing: 0.02em; color: var(--paper); margin-top: 2px; }
.clock .time b { color: var(--accent); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0.2; } }

.chrome__credit { bottom: 22px; left: var(--pad-x); font-family: var(--mono); font-size: 10px; color: var(--ink-faint); letter-spacing: 0.18em; text-transform: uppercase; }
.chrome__credit em { font-style: normal; color: var(--ink-2); }

.chrome__progress { bottom: 22px; right: var(--pad-x); font-family: var(--mono); font-size: 10px; color: var(--ink-faint); letter-spacing: 0.18em; text-transform: uppercase; display: flex; align-items: center; gap: 12px; }
.chrome__progress .num { font-family: var(--display); font-size: 16px; color: var(--paper); }
.chrome__progress .bar { width: 80px; height: 1px; background: var(--line); position: relative; }
.chrome__progress .bar i { position: absolute; inset: 0 100% 0 0; background: var(--accent); }

/* ===== CUSTOM CURSOR ===== */
.cursor {
  position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9000;
  width: 16px; height: 16px; border: 1px solid var(--paper); border-radius: 50%;
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
}
.cursor.dot {
  width: 4px; height: 4px; background: var(--accent); border: 0; mix-blend-mode: normal;
}
.cursor[data-state="hover"] { width: 56px; height: 56px; }
.cursor[data-state="hover"].dot { width: 4px; height: 4px; }

/* ===== HERO — DEPARTURES BOARD ===== */
.hero { position: relative; min-height: 100vh; padding: 140px var(--pad-x) 80px; }
.hero__head { display: flex; align-items: baseline; justify-content: space-between; gap: 32px; margin-bottom: 48px; }
.hero__kicker { display: flex; align-items: center; gap: 14px; }
.hero__kicker .ln { width: 80px; height: 1px; background: var(--line-strong); }
.hero__head-r { font-family: var(--mono); font-size: 11px; color: var(--ink-3); letter-spacing: 0.18em; text-transform: uppercase; text-align: right; line-height: 1.7; }
.hero__head-r b { color: var(--paper); font-weight: 500; }

.hero__main {
  display: flex;
  flex-direction: column;
  gap: 64px;
}
.hero__sub {
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
  align-items: end;
}
@media (min-width: 1100px) {
  .hero__sub { grid-template-columns: minmax(0, 1fr) 480px; }
  .hero__pass { justify-self: end; }
}
.hero__col { display: flex; flex-direction: column; gap: 36px; max-width: 56ch; }

.hero__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(64px, 10.6vw, 184px);
  line-height: 0.85;
  letter-spacing: -0.015em;
  text-transform: uppercase;
}
.hero__title .line { display: block; overflow: hidden; }
.hero__title .word { display: inline-block; will-change: transform; }
.hero__title .char { display: inline-block; will-change: transform; }
.hero__title em { font-style: italic; color: var(--accent); font-weight: 500; }
.hero__title .out { color: var(--ink-faint); }

.hero__lede { font-size: 18px; line-height: 1.55; color: var(--ink-2); max-width: 52ch; }
.hero__lede em { font-style: normal; color: var(--paper); border-bottom: 1px solid var(--accent); }
.hero__cta { display: flex; gap: 14px; flex-wrap: wrap; }

.btn-magnetic {
  position: relative; display: inline-flex; align-items: center; gap: 14px;
  padding: 20px 28px; background: var(--paper); color: var(--bg);
  font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  will-change: transform;
}
.btn-magnetic .inner { display: inline-flex; align-items: center; gap: 14px; will-change: transform; }
.btn-magnetic .arr { width: 22px; height: 14px; }
.btn-magnetic.gh { background: transparent; color: var(--ink-2); border: 1px solid var(--line-strong); }
.btn-magnetic.gh:hover { color: var(--paper); border-color: var(--paper); }

/* ===== HERO BOARDING PASS COMPOSITION ===== */
.hero__pass {
  position: relative;
  width: 480px;
  height: 600px;
  background: var(--paper);
  color: var(--bg);
  overflow: hidden;
  box-shadow: 0 40px 100px rgba(0,0,0,0.55), 0 8px 30px rgba(0,0,0,0.35);
  transform-origin: center bottom;
  isolation: isolate;
  flex-shrink: 0;
  margin: 0 auto;
}
.hero__pass .hp__frame {
  position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px);
  color: rgba(13,12,10,0.35);
  pointer-events: none; z-index: 2;
}
.hero__pass .hp__rect {
  stroke-dasharray: 4 6;
}
.hero__pass .hp__scan {
  position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: 0.06;
  background: repeating-linear-gradient(to bottom, transparent 0 2px, var(--bg) 2px 3px);
  mix-blend-mode: multiply;
}

.hp__corner { position: absolute; z-index: 3; font-family: var(--mono); font-size: 9px; letter-spacing: 0.18em; color: rgba(13,12,10,0.55); line-height: 1.4; text-transform: uppercase; }
.hp__corner b { display: block; font-family: var(--display); font-size: 14px; color: var(--bg); letter-spacing: 0.04em; }
.hp__corner.tl { top: 24px; left: 28px; }
.hp__corner.tr { top: 24px; right: 28px; text-align: right; }

.hp__head { position: absolute; top: 78px; left: 28px; right: 28px; display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 14px; border-bottom: 2px dashed rgba(13,12,10,0.25); z-index: 3; }
.hp__brand { font-family: var(--display); font-size: 22px; font-weight: 700; letter-spacing: 0.02em; }
.hp__brand em { font-style: normal; color: var(--accent); }
.hp__brand .sub { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: 0.18em; color: rgba(13,12,10,0.55); margin-top: 2px; font-weight: 400; }
.hp__cls { font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-align: right; color: rgba(13,12,10,0.6); line-height: 1.5; }
.hp__cls i { font-style: normal; font-family: var(--display); font-size: 14px; color: var(--bg); letter-spacing: 0.06em; }

.hp__route { position: absolute; top: 168px; left: 28px; right: 28px; display: grid; grid-template-columns: 1fr 220px 1fr; gap: 14px; align-items: center; z-index: 3; }
.hp__cd b { display: block; font-family: var(--display); font-size: 64px; line-height: 0.85; font-weight: 700; letter-spacing: 0.01em; }
.hp__cd span { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; color: rgba(13,12,10,0.55); margin-top: 6px; text-transform: uppercase; }
.hp__cd.r { text-align: right; }
.hp__arc { height: 70px; color: var(--accent); }
.hp__arc svg { width: 100%; height: 100%; overflow: visible; }
.hp__flap { display: inline-block; min-width: 3.2ch; }

.hp__meta {
  position: absolute; top: 310px; left: 28px; right: 28px;
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 18px; z-index: 3;
  padding-bottom: 18px; border-bottom: 1px dashed rgba(13,12,10,0.25);
}
.hp__cell label { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: 0.18em; color: rgba(13,12,10,0.55); text-transform: uppercase; margin-bottom: 4px; }
.hp__cell b { font-family: var(--display); font-size: 22px; font-weight: 700; color: var(--bg); letter-spacing: 0.02em; }

.hp__notes { position: absolute; top: 400px; left: 28px; right: 28px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; z-index: 3; }
.hp__notes label { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: 0.18em; color: rgba(13,12,10,0.55); text-transform: uppercase; margin-bottom: 4px; }
.hp__notes span { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--bg); font-weight: 500; text-transform: uppercase; }

.hp__barcode {
  position: absolute; bottom: 80px; left: 28px; right: 28px; height: 56px; z-index: 3;
  background-image: repeating-linear-gradient(to right, var(--bg) 0 2px, transparent 2px 5px, var(--bg) 5px 6px, transparent 6px 9px, var(--bg) 9px 12px, transparent 12px 14px, var(--bg) 14px 17px, transparent 17px 19px);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.hp__pnr { position: absolute; bottom: 32px; left: 28px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; color: rgba(13,12,10,0.55); z-index: 3; text-transform: uppercase; white-space: nowrap; }
.hp__pnr b { display: block; font-family: var(--display); font-size: 18px; color: var(--bg); letter-spacing: 0.08em; margin-top: 2px; font-weight: 700; }

.hp__stamp {
  position: absolute;
  top: 360px; right: 40px;
  z-index: 4;
  font-family: var(--display);
  font-size: 28px; font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--red);
  border: 3px solid var(--red);
  padding: 8px 18px 10px;
  text-align: center;
  transform: rotate(-12deg) scale(1);
  opacity: 0.92;
  mix-blend-mode: multiply;
  text-shadow: 0 0 1px var(--red);
  box-shadow: inset 0 0 0 1px var(--red);
}
.hp__stamp::before, .hp__stamp::after { content: ''; position: absolute; left: -8px; right: -8px; height: 1px; background: var(--red); opacity: 0.6; }
.hp__stamp::before { top: -4px; }
.hp__stamp::after { bottom: -4px; }
.hp__stamp .hp__stamp-sub { display: block; font-size: 10px; font-family: var(--mono); letter-spacing: 0.18em; margin-top: 2px; font-weight: 500; }

/* fading tear-line on right edge */
.hp__tear {
  position: absolute;
  top: 78px; bottom: 28px; right: 78px;
  width: 1px;
  z-index: 2;
  background-image: repeating-linear-gradient(to bottom, rgba(13,12,10,0.3) 0 4px, transparent 4px 8px);
}

/* ===== BIG BOARD (Solari split-flap) ===== */
.board {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(to bottom, var(--bg-2), var(--bg));
  padding: 14px 0;
  position: relative;
}
.board::before, .board::after {
  content: ''; position: absolute; left: 0; right: 0; height: 1px; background: var(--line);
}
.board::before { top: 36px; }
.board::after { bottom: 36px; }
.board__header, .board__footer {
  display: grid;
  grid-template-columns: 60px 100px 1.4fr 1fr 90px 110px 110px;
  gap: 22px;
  padding: 6px var(--pad-x);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-faint);
}
.board__header span:nth-child(n+5), .board__footer span:nth-child(n+5) { text-align: right; }
.board__rows { display: flex; flex-direction: column; }
.board__row {
  display: grid;
  grid-template-columns: 60px 100px 1.4fr 1fr 90px 110px 110px;
  gap: 22px;
  padding: 16px var(--pad-x);
  border-bottom: 1px dashed var(--line);
  align-items: center;
  font-family: var(--display);
  font-size: 32px;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--paper);
  text-transform: uppercase;
}
.board__row:last-child { border-bottom: 0; }
.board__row .num { color: var(--ink-3); font-size: 18px; }
.board__row .flight { color: var(--accent-2); font-size: 22px; letter-spacing: 0.06em; }
.board__row .city { font-size: 32px; }
.board__row .uni { font-size: 18px; color: var(--ink-2); font-family: var(--sans); font-weight: 500; text-transform: none; letter-spacing: 0; }
.board__row .gate { text-align: right; color: var(--ink-2); font-size: 22px; }
.board__row .deadline { font-size: 18px; letter-spacing: 0; color: var(--paper); }
.board__row .term { text-align: right; color: var(--ink-2); font-size: 18px; font-family: var(--mono); }
.board__row .status { text-align: right; font-size: 13px; font-family: var(--mono); letter-spacing: 0.16em; padding: 5px 10px; display: inline-block; justify-self: end; }
.board__row .status[data-st="boarding"] { color: var(--bg); background: var(--green); }
.board__row .status[data-st="ontime"] { color: var(--green); border: 1px solid var(--green); }
.board__row .status[data-st="open"] { color: var(--accent-2); border: 1px solid var(--accent-2); }
.board__row .status[data-st="final"] { color: var(--bg); background: var(--accent); }
.board__row .status[data-st="closing"] { color: var(--accent); border: 1px solid var(--accent); }
.board__row .status[data-st="closed"] { color: var(--ink-3); border: 1px solid var(--ink-faint); opacity: 0.7; }
.board__row .status[data-st="delay"] { color: var(--red); border: 1px solid var(--red); }
.board__row .days { display: flex; flex-direction: column; gap: 7px; justify-content: center; }
.board__row .days__num { font-family: var(--mono); font-size: 14px; letter-spacing: 0.04em; color: var(--accent-2); font-weight: 500; }
.board__row .days__bar { position: relative; width: 100%; height: 5px; background: rgba(243,238,223,0.10); overflow: hidden; }
.board__row .days__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; background: var(--accent-2); }
.board__row .days[data-st="closing"] .days__num { color: var(--accent); }
.board__row .days[data-st="closing"] .days__fill { background: var(--accent); }
.board__row .days[data-st="final"] .days__num { color: var(--red); }
.board__row .days[data-st="final"] .days__fill { background: var(--red); }
.board__row .days[data-st="final"] .days__bar { box-shadow: 0 0 10px rgba(0,0,0,0); }
.board__row .days[data-st="final"] .days__fill { animation: daysPulse 1.1s ease-in-out infinite; }
.board__row .days[data-st="closed"] .days__num { color: var(--ink-faint); font-size: 11px; letter-spacing: 0.12em; }
.board__row .days[data-st="closed"] .days__fill { background: var(--ink-faint); }
@keyframes daysPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } }

/* split-flap character */
.flap {
  display: inline-block;
  position: relative;
  overflow: hidden;
  height: 1em;
  vertical-align: bottom;
}
.flap span { display: inline-block; will-change: transform; }

/* ===== ATLAS — pinned scroll ===== */
.atlas { position: relative; }
.atlas__pin { height: 100vh; position: relative; overflow: hidden; }
.atlas__stage {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: 1fr 420px;
  /* Pin the row to the stage height. Without this, a tall destination
     side-panel (on short viewports) stretches the row past 100vh, which
     turns the MAP cell portrait — and slice-cropping then cuts the
     westernmost destinations (Canada) off the left edge. */
  grid-template-rows: minmax(0, 1fr);
}
.atlas__map { position: relative; overflow: hidden; min-height: 0; min-width: 0; }
.atlas__map svg { width: 100%; height: 100%; }
.atlas__map .grid line { stroke: var(--line); stroke-width: 0.5; }
.atlas__map .land { fill: rgba(243,238,223,0.06); stroke: rgba(243,238,223,0.18); stroke-width: 0.4; }
.atlas__map .route { fill: none; stroke: var(--accent); stroke-width: 1.6; }
.atlas__map .route-amb { fill: none; stroke: rgba(243, 238, 223, 0.14); stroke-width: 0.7; stroke-dasharray: 2 5; }
.atlas__map .origin { fill: var(--accent); }
.atlas__map .origin-ring { fill: none; stroke: var(--accent); stroke-width: 1; opacity: 0.6; }
.atlas__map .dest { fill: var(--paper); }
.atlas__map .dest-label { fill: var(--paper); font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; }
.atlas__map .plane { fill: var(--accent-2); }

.atlas__side { padding: 64px 48px 28px; border-left: 1px solid var(--line); background: var(--bg-2); position: relative; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.atlas__num { font-family: var(--display); font-size: 14px; color: var(--ink-3); letter-spacing: 0.04em; }
.atlas__count { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; margin-bottom: 14px; }
.atlas__count b { font-family: var(--display); font-size: 76px; line-height: 1; color: var(--accent); font-weight: 700; }
.atlas__count em { font-family: var(--display); font-size: 28px; color: var(--ink-3); font-style: normal; }
.atlas__city-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; color: var(--ink-faint); text-transform: uppercase; margin-bottom: 6px; }
.atlas__city { font-family: var(--display); font-size: 56px; line-height: 0.95; color: var(--paper); text-transform: uppercase; margin-bottom: 18px; min-height: 56px; word-break: keep-all; overflow-wrap: normal; }
.atlas__city .accent { color: var(--accent); }
.atlas__body { color: var(--ink-2); font-size: 15px; line-height: 1.6; margin-bottom: 22px; min-height: 84px; }
.atlas__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; border-top: 1px solid var(--line); padding-top: 18px; }
.atlas__stat .l { font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; color: var(--ink-faint); text-transform: uppercase; }
.atlas__stat .v { font-family: var(--display); font-size: 28px; color: var(--paper); margin-top: 4px; }
.atlas__stat .v small { font-size: 14px; color: var(--ink-3); margin-left: 4px; }
.atlas__hint { margin-top: auto; padding-top: 24px; left: 48px; right: 48px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; color: var(--ink-faint); display: flex; justify-content: space-between; }

/* destination progress rail — pairs with the 01/10 counter; the active dot slides/grows as you scroll */
.atlas__dots { display: flex; align-items: center; gap: 8px; margin: 0 0 30px; }
.atlas__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ink-faint); opacity: 0.4;
  transition: width .45s cubic-bezier(.5,0,.2,1), background-color .45s ease, opacity .45s ease, box-shadow .45s ease;
}
.atlas__dot.is-past { background: var(--accent); opacity: 0.5; }
.atlas__dot.is-active {
  width: 30px; border-radius: 5px;
  background: var(--accent); opacity: 1;
  box-shadow: 0 0 14px rgba(255,95,31,0.55);
}

/* ===== SERVICES (horizontal pin) ===== */
.services { position: relative; background: var(--bg); }
.services__intro {
  padding: 120px var(--pad-x) 60px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px;
  align-items: end;
}
.services__intro h2 {
  font-family: var(--display); font-size: clamp(48px, 7vw, 96px); line-height: 0.92;
  letter-spacing: -0.01em; text-transform: uppercase; font-weight: 700;
}
.services__intro h2 em { font-style: italic; color: var(--accent); font-weight: 500; }
.services__intro p { color: var(--ink-2); font-size: 17px; line-height: 1.55; max-width: 48ch; }
.services__pin { height: 100vh; overflow: hidden; }
.services__track { display: flex; height: 100%; padding: 80px var(--pad-x); gap: 32px; align-items: stretch; }
.svc {
  flex: 0 0 auto;
  width: 480px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  padding: 36px;
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
}
.svc:hover { background: var(--bg-3); }
.svc__num { font-family: var(--display); font-size: 96px; line-height: 0.85; color: var(--ink-faint); font-weight: 700; }
.svc__tag { font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; color: var(--accent); text-transform: uppercase; margin-top: -8px; margin-bottom: 28px; }
.svc__title { font-family: var(--display); font-size: 40px; line-height: 1; text-transform: uppercase; margin-bottom: 18px; font-weight: 700; }
.svc__title em { font-style: italic; color: var(--accent); font-weight: 500; }
.svc__body { color: var(--ink-2); font-size: 15px; line-height: 1.6; margin-bottom: auto; }
.svc__foot { border-top: 1px solid var(--line); padding-top: 18px; margin-top: 28px; display: flex; justify-content: space-between; align-items: baseline; font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; color: var(--ink-3); text-transform: uppercase; }
.svc__foot .arr { font-family: var(--display); color: var(--paper); font-size: 22px; }
.svc.ghost { background: transparent; border-style: dashed; align-items: flex-start; justify-content: center; }
.svc.ghost h3 { font-family: var(--display); font-size: 64px; line-height: 0.9; text-transform: uppercase; font-weight: 700; max-width: 14ch; }
.svc.ghost h3 em { font-style: italic; color: var(--accent); font-weight: 500; }
.svc.ghost p { color: var(--ink-2); margin-top: 18px; font-size: 15px; line-height: 1.55; max-width: 32ch; }

/* ===== MARQUEE ===== */
.marquee { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 28px 0; overflow: hidden; position: relative; background: var(--accent); color: var(--bg); }
.marquee__track { display: flex; gap: 56px; white-space: nowrap; will-change: transform; }
.marquee__item { font-family: var(--display); font-size: 64px; line-height: 1; font-weight: 700; text-transform: uppercase; display: inline-flex; align-items: center; gap: 56px; }
.marquee__item .star { font-size: 36px; opacity: 0.7; }

/* ===== TESTIMONIALS — draggable deck ===== */
.testimonials { padding: 140px var(--pad-x); background: var(--bg); position: relative; }
.testimonials__head { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; margin-bottom: 64px; }
.testimonials__head h2 {
  font-family: var(--display); font-size: clamp(48px, 7vw, 96px); line-height: 0.92;
  letter-spacing: -0.01em; text-transform: uppercase; font-weight: 700;
}
.testimonials__head h2 em { font-style: italic; color: var(--accent); font-weight: 500; }
.testimonials__hint { font-family: var(--mono); font-size: 11px; color: var(--ink-3); letter-spacing: 0.18em; text-transform: uppercase; text-align: right; line-height: 1.7; }
.testimonials__hint b { color: var(--paper); }

.deck {
  position: relative;
  height: 520px;
  display: flex; align-items: center; justify-content: center;
  perspective: 1200px;
}
.pass {
  position: absolute;
  width: min(720px, 90%);
  height: 380px;
  background: var(--paper);
  color: var(--bg);
  display: grid;
  grid-template-columns: 1fr 200px;
  border-radius: 4px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
  overflow: hidden;
  will-change: transform;
  cursor: grab;
}
.pass:active { cursor: grabbing; }
.pass__l { padding: 32px 36px; display: flex; flex-direction: column; }
.pass__head { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 16px; border-bottom: 2px dashed rgba(13,12,10,0.2); margin-bottom: 24px; }
.pass__brand { font-family: var(--display); font-size: 16px; letter-spacing: 0.04em; font-weight: 700; }
.pass__brand em { color: var(--accent); font-style: normal; }
.pass__brand .sub { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: 0.18em; color: var(--ink-faint); margin-top: 2px; }
.pass__cls { font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; color: var(--ink-faint); }

.pass__route { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: center; margin-bottom: 22px; }
.pass__cd { font-family: var(--display); font-size: 56px; line-height: 0.85; font-weight: 700; }
.pass__cd small { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; color: var(--ink-faint); margin-top: 6px; font-weight: 400; }
.pass__cd.r { text-align: right; }
.pass__arrow { font-family: var(--display); font-size: 24px; color: var(--accent); }
.pass__quote { font-family: 'Newsreader', Georgia, serif; font-size: 17px; line-height: 1.45; color: var(--bg); margin-bottom: auto; font-style: italic; }
.pass__quote::before { content: '“'; font-size: 32px; color: var(--accent); margin-right: 4px; line-height: 0; vertical-align: -0.1em; }
.pass__foot { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px dashed rgba(13,12,10,0.2); padding-top: 14px; margin-top: 14px; }
.pass__name { font-family: var(--display); font-size: 18px; font-weight: 700; }
.pass__name small { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: 0.16em; color: var(--ink-faint); margin-top: 2px; font-weight: 400; }
.pass__seat { font-family: var(--display); font-size: 28px; color: var(--accent); }

.pass__r {
  border-left: 2px dashed rgba(13,12,10,0.2);
  padding: 24px 20px;
  background: var(--paper-2);
  display: flex; flex-direction: column; justify-content: space-between;
}
.pass__r .stub { font-family: var(--mono); font-size: 9px; letter-spacing: 0.18em; color: var(--ink-faint); }
.pass__r .stub b { display: block; font-family: var(--display); font-size: 16px; color: var(--bg); margin-top: 2px; letter-spacing: 0.02em; }
.pass__bar {
  height: 56px;
  background: repeating-linear-gradient(
    to right,
    var(--bg) 0 2px,
    transparent 2px 4px,
    var(--bg) 4px 5px,
    transparent 5px 8px,
    var(--bg) 8px 11px,
    transparent 11px 13px
  );
}
.pass__pnr { text-align: center; font-family: var(--mono); font-size: 10px; letter-spacing: 0.3em; color: var(--ink-faint); }
.pass__pnr b { display: block; font-family: var(--display); font-size: 22px; color: var(--bg); letter-spacing: 0.08em; margin-top: 4px; }

.deck__nav { display: flex; justify-content: center; align-items: center; gap: 24px; margin-top: 48px; }
.deck__nav button { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; color: var(--ink-2); text-transform: uppercase; border: 1px solid var(--line-strong); padding: 12px 22px; }
.deck__nav button:hover { color: var(--paper); border-color: var(--paper); }
.deck__dots { display: flex; gap: 10px; }
.deck__dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.deck__dots i.on { background: var(--accent); width: 24px; border-radius: 4px; }

/* ===== STATS COUNTER ===== */
.stats { padding: 100px var(--pad-x); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.stat { border-top: 1px solid var(--line); padding-top: 22px; }
.stat .l { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; color: var(--ink-3); text-transform: uppercase; margin-bottom: 12px; }
.stat .v { font-family: var(--display); font-size: clamp(64px, 8vw, 124px); font-weight: 700; line-height: 0.9; color: var(--paper); display: flex; align-items: baseline; gap: 6px; }
.stat .v small { font-size: 0.4em; color: var(--accent); font-weight: 700; }
.stat .b { color: var(--ink-2); font-size: 14px; margin-top: 12px; line-height: 1.5; max-width: 28ch; }

/* ===== STAT FLAP DIGITS ===== */
.stat .v { position: relative; }
.stat .v .digit {
  display: inline-block;
  position: relative;
  overflow: hidden;
  height: 1em;
  vertical-align: bottom;
  min-width: 0.6em;
  text-align: center;
}
.stat .v .digit > span { display: inline-block; will-change: transform; }

/* ===== CTA ===== */
.cta { padding: 160px var(--pad-x); text-align: center; position: relative; overflow: hidden; }
.cta__stamp {
  position: absolute;
  top: 22%; right: 8%;
  font-family: var(--display);
  font-size: clamp(36px, 4.4vw, 72px);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--red);
  border: 5px solid var(--red);
  padding: 14px 32px 18px;
  text-align: center;
  transform: rotate(-12deg) scale(0.95);
  opacity: 0; /* revealed by JS */
  pointer-events: none;
  box-shadow: inset 0 0 0 1px var(--red);
}
.cta__stamp::before, .cta__stamp::after { content: ''; position: absolute; left: -10px; right: -10px; height: 2px; background: var(--red); opacity: 0.7; }
.cta__stamp::before { top: -6px; }
.cta__stamp::after { bottom: -6px; }
.cta__stamp .sub { display: block; font-size: 0.3em; font-family: var(--mono); letter-spacing: 0.2em; margin-top: 4px; font-weight: 500; }
.cta__stamp.l { right: auto; left: 8%; transform: rotate(8deg) scale(0.95); top: 60%; color: var(--green); border-color: var(--green); }
.cta__stamp.l::before, .cta__stamp.l::after { background: var(--green); }
.cta__kicker { display: inline-flex; align-items: center; gap: 12px; padding: 8px 18px; border: 1px solid var(--line-strong); font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 40px; }
.cta__kicker .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px var(--green); }
.cta h2 {
  font-family: var(--display); font-size: clamp(80px, 13vw, 220px); line-height: 0.85;
  letter-spacing: -0.02em; text-transform: uppercase; font-weight: 700; margin-bottom: 36px;
}
.cta h2 em { font-style: italic; color: var(--accent); font-weight: 500; }
.cta p { font-size: 18px; line-height: 1.55; color: var(--ink-2); max-width: 56ch; margin: 0 auto 48px; }
.cta__btn { display: inline-flex; align-items: center; gap: 16px; padding: 28px 44px; background: var(--accent); color: #fff; font-family: var(--mono); font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600; }
.cta__btn .arr { font-family: var(--display); font-size: 24px; }

/* ===== FOOTER ===== */
footer.f {
  padding: 60px var(--pad-x) 36px;
  border-top: 1px solid var(--line);
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
}
footer.f .col h4 { font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; color: var(--ink-faint); text-transform: uppercase; margin-bottom: 16px; }
footer.f .col a, footer.f .col p { display: block; color: var(--ink-2); font-size: 14px; line-height: 1.7; }
footer.f .col a:hover { color: var(--paper); }
footer.f .brand { font-family: var(--display); font-size: 64px; line-height: 0.9; letter-spacing: -0.01em; font-weight: 700; text-transform: uppercase; }
footer.f .brand em { color: var(--accent); font-style: italic; font-weight: 500; }
footer.f .brand p { font-family: var(--sans); font-size: 14px; color: var(--ink-3); margin-top: 12px; max-width: 36ch; font-weight: 400; letter-spacing: 0; }
.f__base { grid-column: 1 / -1; display: flex; justify-content: space-between; padding-top: 32px; border-top: 1px solid var(--line); margin-top: 24px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; color: var(--ink-faint); text-transform: uppercase; }
.f__base a { color: var(--accent); text-decoration: none; transition: opacity .25s ease; }
.f__base a:hover { opacity: 0.7; text-decoration: underline; }

/* responsive */
@media (max-width: 760px) {
  body { cursor: auto; }
  .cursor { display: none; }
  .chrome__nav { display: none; }
  .chrome__credit { display: none; }
  .hero__sub { gap: 40px; }
  .hero__pass { width: 100%; max-width: 480px; }
  .cta__stamp { display: none; }
  .board__header, .board__footer, .board__row { grid-template-columns: 44px 64px 1fr 90px; gap: 14px; }
  .board__row .uni, .board__row .term, .board__header span:nth-child(4), .board__header span:nth-child(6), .board__footer span:nth-child(4), .board__footer span:nth-child(6), .board__header span:nth-child(7), .board__footer span:nth-child(7) { display: none; }
  .board__row { font-size: 20px; padding: 12px var(--pad-x); }
  .board__row .city { font-size: 20px; }
  .board__row .gate { display: none; }
  .atlas__stage { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .atlas__side { padding: 32px; border-left: 0; border-top: 1px solid var(--line); }
  .atlas__city { font-size: 36px; }
  .services__intro { grid-template-columns: 1fr; }
  .svc { width: 320px; padding: 24px; }
  .testimonials__head { grid-template-columns: 1fr; }
  .pass { grid-template-columns: 1fr; height: auto; }
  .pass__r { border-left: 0; border-top: 2px dashed rgba(13,12,10,0.2); flex-direction: row; align-items: center; gap: 20px; }
  .stats__grid { grid-template-columns: 1fr 1fr; }
  footer.f { grid-template-columns: 1fr; }
}


/* ============================================================
   STORY — scroll-locked hero (9-phase student journey)
   ============================================================ */

.story { position: relative; background: var(--bg); }

/* ---------- HERO ZOOM (intro → Phase 01 handoff) ---------- */
.story__intro { position: relative; height: 100vh; }
.story__hero {
  position: relative; height: 100vh; width: 100%;
  overflow: hidden; background: var(--bg);
  /* Stays ABOVE the pinned Phase 01 so it covers it during the whole
     dolly-in zoom; herozoom.js cross-dissolves it out at the end to
     reveal the identical Phase 01 already pinned behind it. */
  z-index: 4;
}

/* the media region simply centres a small card */
.hz-media {
  position: absolute; inset: 0; z-index: 1;
  display: grid; place-items: center;
}
/* the card itself — aspect matches the viewport so one scale fills it.
   herozoom.js grows it from 1 → (fills screen) on scroll. */
.hz-frame {
  position: relative;
  width: 40vw; height: 40vh;
  container-type: size;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 40px 120px rgba(0,0,0,0.62);
  transform-origin: center center;
  will-change: transform;
}
.hz-frame__ring {
  position: absolute; inset: 0; z-index: 6; pointer-events: none;
  border: 2px solid var(--line-strong);
  border-radius: 34px;
  /* drop shadow for depth + a huge spread that darkens the surround into a
     vignette, so the small Phase-01 card reads as a framed card. Both fade
     out (via story.js opacity) as the card grows to full-bleed. */
  box-shadow: 0 30px 90px rgba(0,0,0,0.55), 0 0 0 100vmax rgba(8,7,5,0.5);
}
.hz-media__bg {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(135deg, rgba(243,238,223,0.03) 0 2px, transparent 2px 24px),
    radial-gradient(120% 100% at 50% 24%, #2b2117, #15110b 64%, #0c0a07 100%);
}
.hz-media__bg::after {
  content: ""; position: absolute; inset: 0; opacity: 0.06; mix-blend-mode: screen;
  background-image: radial-gradient(rgba(243,238,223,0.7) 0.5px, transparent 0.5px);
  background-size: 3px 3px;
}
/* live Phase-01 poster — sized in container units so it fills the small
   card cleanly and scales 1:1 with it when the card grows */
.hz-poster { position: absolute; inset: 0; overflow: hidden; }
.hz-poster__stars { position: absolute; inset: 0; }
.hz-poster__stars i {
  position: absolute; width: 0.5cqw; height: 0.5cqw; border-radius: 50%;
  background: var(--paper); opacity: 0.5;
  animation: hzTwinkle 3.2s ease-in-out infinite;
}
@keyframes hzTwinkle { 0%,100% { opacity: 0.18; } 50% { opacity: 0.7; } }
.hz-poster__sky {
  position: absolute; left: 0; right: 0; top: 13cqh; height: 28cqh;
  color: var(--accent-2); opacity: 0.85;
}
.hz-poster__inner {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 0 7cqw;
}
.hz-poster__tag {
  font-family: var(--mono); font-size: 2cqw; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--accent-2); margin-bottom: 1.1em;
}
.hz-poster__head {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: 14cqw; line-height: 0.84; letter-spacing: -0.01em;
  color: var(--paper);
}
.hz-poster__head em { font-style: italic; color: var(--accent); }
.hz-poster__cap {
  max-width: 78cqw; margin: 1.3em auto 0;
  font-size: 2.5cqw; line-height: 1.45; color: var(--ink-2);
}
.hz-poster__loc {
  display: flex; align-items: center; gap: 1cqw; margin-top: 1.5em;
  font-family: var(--mono); font-size: 1.9cqw; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-2);
}
.hz-poster__loc .l { color: var(--ink-3); }
.hz-poster__loc b { color: var(--paper); font-weight: 500; }
.hz-poster__loc .sep { color: var(--accent); margin: 0 0.4cqw; }

/* framing text — sits ABOVE + BELOW the framed image */
.hz-text { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.hz-kicker {
  position: absolute; top: 12.5%; left: 0; right: 0;
  display: flex; align-items: center; justify-content: center; gap: 16px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--ink-3);
}
.hz-kicker .ln { width: 64px; height: 1px; background: var(--line-strong); }
.hz-row {
  position: absolute; left: 0; right: 0; text-align: center; overflow: hidden;
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(30px, 5vw, 74px); line-height: 1; letter-spacing: -0.01em;
  color: var(--paper); padding: 0.1em 6vw; will-change: transform; white-space: nowrap;
}
.hz-row--top { bottom: 72.5%; }
.hz-row--bot { top: 72.5%; }
.hz-row .w { display: inline-block; will-change: transform; }
.hz-row .hz-em { font-style: italic; color: var(--accent); font-weight: 500; }

.hz-hint {
  position: absolute; bottom: clamp(22px, 4.5vh, 44px); left: 50%; transform: translateX(-50%); z-index: 5;
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--ink-2);
  border: 1px solid var(--line-strong); padding: 11px 18px;
}
.hz-hint .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.hz-hint svg { width: 13px; height: 20px; color: var(--accent); }

@media (max-width: 820px) {
  .hz-frame { width: 68vw; height: 50vh; }
  .hz-row { font-size: clamp(24px, 7.4vw, 48px); padding: 0.1em 5vw; }
  .hz-row--top { bottom: 78%; }
  .hz-row--bot { top: 78%; }
  .hz-kicker { font-size: 10px; gap: 10px; }
  .hz-kicker .ln { width: 32px; }
}

/* very short viewports: drop the kicker so it can never crowd the menu/top line */
@media (max-height: 600px) {
  .hz-kicker { display: none; }
}

/* ---------- PIN + STAGE ---------- */
/* The pinned hero: a small framed card (#storyZoom scaled down) that grows to
   full-bleed, then the phases run inside the SAME stage. */
.story__pin {
  position: relative;
  height: 100vh;
  overflow: hidden;
  background: var(--bg);
}
.story__anchor { position: absolute; top: 0; left: 0; width: 1px; height: 1px; pointer-events: none; }
.story__zoom {
  position: absolute; inset: 0; z-index: 1;
  transform-origin: center center;
  will-change: transform;
  /* story.js scales this from ~0.4 (small Phase-01 card) to 1 (full-bleed) */
}
.story__stage {
  position: relative;
  height: 100vh;
  width: 100%;
  background: var(--bg);
}

/* ---------- PERSISTENT OVERLAY ---------- */
.st-overlay {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 50;
}
.st-overlay > * { position: absolute; }
.st-overlay__tl { top: 36px; left: var(--pad-x); display: flex; flex-direction: column; gap: 4px; }
.st-overlay__tl .l { font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; color: var(--ink-faint); text-transform: uppercase; }
.st-overlay__tl b { font-family: var(--display); font-size: 18px; letter-spacing: 0.04em; color: var(--paper); font-weight: 700; text-transform: uppercase; transition: color .4s ease; }
.st-overlay__tr { top: 36px; right: var(--pad-x); display: flex; align-items: baseline; gap: 8px; }
.st-overlay__tr .l { font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; color: var(--ink-faint); text-transform: uppercase; }
.st-overlay__tr b { font-family: var(--display); font-size: 36px; line-height: 1; color: var(--accent); font-weight: 700; }
.st-overlay__tr .of { font-family: var(--display); font-size: 18px; color: var(--ink-3); }
.st-overlay__br {
  bottom: 38px; right: var(--pad-x);
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.22em; color: var(--ink-2);
  text-transform: uppercase;
}
/* ---------- IDEA 03 · runway centerline (bottom progress) ---------- */
.st-runway {
  bottom: 0; left: 0; right: 0; height: 44px;
  pointer-events: none;
}
.st-rwy__piano {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  height: 15px; display: flex; gap: 4px;
}
.st-rwy__piano.l { left: 26px; }
.st-rwy__piano.r { right: 26px; }
.st-rwy__piano i { width: 4px; height: 100%; background: rgba(243, 238, 223, 0.22); }
.st-rwy__line,
.st-rwy__lit {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  height: 3px;
}
.st-rwy__line {
  left: 72px; right: 72px;
  background: repeating-linear-gradient(90deg, var(--ink-faint) 0 18px, transparent 18px 34px);
}
.st-rwy__lit {
  left: 72px; width: 0;
  background: repeating-linear-gradient(90deg, var(--accent) 0 18px, transparent 18px 34px);
  filter: drop-shadow(0 0 6px rgba(255, 95, 31, 0.6));
}
.st-rwy__bug {
  position: absolute;
  top: 50%; left: 72px;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center;
}
.st-rwy__plane {
  font-size: 27px; line-height: 1; color: var(--paper);
  filter: drop-shadow(0 2px 7px rgba(0, 0, 0, 0.75));
}
.st-rwy__name {
  position: absolute; bottom: 128%; white-space: nowrap;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--accent-2);
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.st-rwy__name.show { opacity: 1; transform: translateY(0); }
body[data-tint="light"] .st-rwy__piano i { background: rgba(13, 12, 10, 0.3); }
body[data-tint="light"] .st-rwy__line { background: repeating-linear-gradient(90deg, rgba(13, 12, 10, 0.32) 0 18px, transparent 18px 34px); }
body[data-tint="light"] .st-rwy__plane { color: #0a0907; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.25)); }

/* ---------- SCENES (all absolutely fill the stage) ---------- */
.st-scene {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  /* fluid padding so the stack always clears the viewport edges on any screen */
  padding: clamp(52px, 8.5vh, 100px) var(--pad-x) clamp(44px, 6.5vh, 80px);
  opacity: 0; visibility: hidden;
  background: var(--bg);
  will-change: opacity;
}

.st-scene__inner {
  position: relative;
  width: 100%; max-width: 1280px;
  text-align: center;
}

.st-tag {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.24em;
  color: var(--accent); text-transform: uppercase;
  margin-bottom: clamp(12px, 2.6vh, 28px);
}
.st-headline {
  font-family: var(--display); font-weight: 700;
  /* size tracks BOTH width and height so it shrinks on short laptops too */
  font-size: clamp(40px, min(8.4vw, 12.5vh), 144px);
  line-height: 0.86; letter-spacing: -0.01em;
  text-transform: uppercase;
  margin-bottom: clamp(16px, 3.4vh, 40px);
}
.st-headline em { font-style: italic; color: var(--accent); font-weight: 500; }
.st-caption {
  font-size: clamp(14px, 1.7vh, 17px); line-height: 1.55; color: var(--ink-2);
  max-width: 64ch; margin: clamp(16px, 3vh, 36px) auto 0;
}

/* ============== STAGE-SPECIFIC BACKGROUNDS ============== */
.st-scene[data-stage="1"] { background: radial-gradient(ellipse at center top, #1a1f3a 0%, #0d0c0a 70%); }
.st-scene[data-stage="2"] { background: var(--paper); color: var(--bg); }
.st-scene[data-stage="3"] { background: #1a1610; }
.st-scene[data-stage="4"] { background: radial-gradient(ellipse at center, #14110b 0%, #0a0907 80%); }
.st-scene[data-stage="5"] { background: var(--paper); color: var(--bg); }
.st-scene[data-stage="6"] { background: #f0e7d2; color: var(--bg); }
.st-scene[data-stage="7"] { background: #efe7d6; color: var(--bg); }
.st-scene[data-stage="8"] { background: linear-gradient(160deg, #1a0c08 0%, #2a1a14 60%, #1a0c08 100%); }
.st-scene[data-stage="9"] { background: linear-gradient(to bottom, #b8a78a 0%, #d9c8ad 55%, #efe1c3 100%); color: #1f1810; }
.st-scene[data-stage="10"] { background: linear-gradient(to bottom, #c8e0e9 0%, #f3eedf 70%); color: var(--bg); }

/* On paper stages, recolour the overlay so it reads */
.st-scene[data-stage="2"] ~ .st-overlay,
.st-scene[data-stage="5"] ~ .st-overlay,
.st-scene[data-stage="6"] ~ .st-overlay,
.st-scene[data-stage="8"] ~ .st-overlay,
.st-scene[data-stage="9"] ~ .st-overlay { /* placeholder — we toggle via JS */ }

/* ============== STAGE 01 — DREAM ============== */
.st-stars { position: absolute; inset: 0; pointer-events: none; }
.st-stars i {
  position: absolute;
  width: 2px; height: 2px;
  background: rgba(243, 238, 223, 0.7);
  border-radius: 50%;
  animation: stTwinkle 2s ease-in-out infinite alternate;
}
@keyframes stTwinkle {
  from { opacity: var(--o, 0.3); }
  to { opacity: 0.1; }
}
.st-sky {
  position: absolute; left: 0; right: 0; top: 20%;
  width: 100%; height: 200px;
  color: rgba(255, 95, 31, 0.7);
  pointer-events: none;
}
.st-sky #st1Plane { fill: var(--accent); }
.st-locator {
  display: inline-flex; align-items: baseline; gap: 12px;
  margin-top: 32px;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em;
  color: var(--ink-2); text-transform: uppercase;
  white-space: nowrap;
  justify-content: center;
}
.st-locator .l { color: var(--ink-faint); font-size: 10px; }
.st-locator b { font-family: var(--display); font-size: 22px; color: var(--paper); letter-spacing: 0.04em; font-weight: 700; }
.st-locator .sep { color: var(--accent); font-size: 18px; }

/* ===== Body-level tint when story stage has paper background ===== */
body[data-tint="light"] .chrome__brand b,
body[data-tint="light"] .chrome__nav a,
body[data-tint="light"] .clock .city,
body[data-tint="light"] .clock .time,
body[data-tint="light"] .chrome__credit,
body[data-tint="light"] .chrome__credit em,
body[data-tint="light"] .chrome__progress,
body[data-tint="light"] .chrome__progress .num,
body[data-tint="light"] .st-overlay__tl .l,
body[data-tint="light"] .st-overlay__tl b,
body[data-tint="light"] .st-overlay__tr .l,
body[data-tint="light"] .st-overlay__tr .of,
body[data-tint="light"] .st-overlay__bl .l,
body[data-tint="light"] .st-overlay__bl b,
body[data-tint="light"] .st-overlay__bl .of,
body[data-tint="light"] .st-overlay__br { color: rgba(13,12,10,0.78); }

body[data-tint="light"] .chrome__brand b em,
body[data-tint="light"] .chrome__nav a:hover { color: var(--accent); }
body[data-tint="light"] .chrome__brand .mark { background: var(--bg); color: var(--paper); }
body[data-tint="light"] .clock .time { color: rgba(13,12,10,0.95); }
body[data-tint="light"] .clock .time b { color: var(--accent); }
body[data-tint="light"] .chrome__progress .bar { background: rgba(13,12,10,0.15); }
body[data-tint="light"] .st-overlay__tr b { color: var(--accent); }
body[data-tint="light"] .st-overlay__bar { background: rgba(13,12,10,0.12); }

/* the chrome brand "sub" line is light grey by default — bump on light bg */
body[data-tint="light"] .chrome__brand .sub { color: rgba(13,12,10,0.5); }
body[data-tint="light"] .chrome__nav a .num { color: rgba(13,12,10,0.4); }

/* ============== STAGE 02 — INTEREST ============== */
.st-chips {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 14px; max-width: 920px; margin: 0 auto;
  position: relative;
}
.st-chip {
  display: inline-flex; align-items: center;
  padding: 14px 26px;
  border: 1.5px solid rgba(13, 12, 10, 0.18);
  font-family: var(--display); font-size: 22px;
  font-weight: 700; letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgba(13, 12, 10, 0.55);
  background: transparent;
  border-radius: 100px;
  transition: color .3s ease, border-color .3s ease, transform .3s ease;
}
.st-chip[data-pick] {
  color: var(--bg);
  border-color: var(--bg);
}
.st-circle {
  position: absolute;
  width: 280px; height: 90px;
  left: 50%; transform: translate(-50%, -55%);
  top: 100%;
  pointer-events: none;
}

/* ============== STAGE 03 — CONSULTATION ============== */
.st-folder {
  display: inline-block;
  position: relative;
  background: var(--paper);
  color: var(--bg);
  box-shadow: 0 30px 80px rgba(0,0,0,0.55);
  text-align: left;
  max-width: 600px;
  margin: 0 auto;
}
.st-folder__tab {
  position: absolute; top: -28px; left: 24px;
  background: var(--paper); color: var(--bg);
  padding: 10px 22px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
  font-weight: 700;
  border-radius: 4px 4px 0 0;
}
.st-folder { margin-top: 22px; }
.st-folder__body { padding: 36px 40px 64px; position: relative; }
.st-folder__head {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: rgba(13,12,10,0.55);
  padding-bottom: 16px; margin-bottom: 18px;
  border-bottom: 2px dashed rgba(13,12,10,0.2);
}
.st-folder__line {
  display: grid; grid-template-columns: 140px 1fr;
  align-items: baseline; gap: 16px;
  will-change: opacity, transform;
  padding: 8px 0;
  border-bottom: 1px dashed rgba(13,12,10,0.1);
}
.st-folder__line label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; color: rgba(13,12,10,0.55); text-transform: uppercase; }
.st-folder__line b { font-family: var(--display); font-size: 18px; letter-spacing: 0.04em; font-weight: 700; text-transform: uppercase; }
.st-folder__stamp {
  position: absolute; top: auto; bottom: 16px; right: 28px;
  font-family: var(--display); font-size: 28px; font-weight: 700;
  letter-spacing: 0.04em; color: var(--green);
  border: 3px solid var(--green); padding: 6px 16px;
  transform: rotate(-8deg); opacity: 0;
}
.st-timer {
  display: inline-flex; align-items: baseline; gap: 12px;
  margin-top: 32px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
  color: var(--ink-3); text-transform: uppercase;
}
.st-timer .l { color: var(--ink-faint); }
.st-timer b {
  font-family: var(--display); font-size: 36px; line-height: 1; color: var(--accent); font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  display: inline-block; width: 2.7em; text-align: center;
}
.st-timer .r { color: var(--ink-2); }

/* ============== STAGE 04 — SHORTLIST ============== */
.st-flags {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 14px; max-width: 980px; margin: 0 auto 32px;
}
.st-flag {
  position: relative;
  padding: 22px 14px 16px;
  border: 1px solid var(--line-strong);
  background: rgba(243, 238, 223, 0.02);
  opacity: 0.35;
  transition: opacity .4s ease, border-color .4s ease, background .4s ease;
}
.st-flag b {
  display: block;
  font-family: var(--display); font-size: 42px; line-height: 1;
  font-weight: 700; letter-spacing: 0.04em;
  color: var(--paper);
}
.st-flag span {
  display: block; margin-top: 8px;
  font-family: var(--mono); font-size: 9px;
  letter-spacing: 0.18em; color: var(--ink-3); text-transform: uppercase;
}
.st-flag i {
  display: block; margin-top: 6px;
  font-family: var(--mono); font-size: 10px; color: var(--ink-faint);
  font-style: normal; letter-spacing: 0.06em;
}
.st-flag[data-active="true"] {
  opacity: 1; background: rgba(255, 95, 31, 0.08);
  border-color: var(--accent);
}
.st-flag[data-active="true"] b { color: var(--accent); }
.st-pick {
  display: inline-flex; align-items: baseline; gap: 14px;
  padding: 16px 28px;
  background: var(--accent); color: #fff;
  margin: 0 auto;
  opacity: 0;
}
.st-pick .l { font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; opacity: 0.7; text-transform: uppercase; }
.st-pick b { font-family: var(--display); font-size: 22px; letter-spacing: 0.04em; font-weight: 700; text-transform: uppercase; }
.st-pick .r { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; opacity: 0.85; }

/* ============== STAGE 05 — DOCUMENTS ============== */
.st-checks {
  list-style: none;
  max-width: 720px; margin: 0 auto;
  text-align: left;
}
.st-checks li {
  display: grid; grid-template-columns: 32px 1fr auto;
  align-items: center; gap: 18px;
  padding: 18px 0;
  border-bottom: 1px dashed rgba(13, 12, 10, 0.18);
  opacity: 0.4;
  transition: opacity .3s ease;
}
.st-checks li[data-checked="true"] { opacity: 1; }
.st-checks .bx {
  position: relative;
  width: 22px; height: 22px;
  border: 2px solid rgba(13, 12, 10, 0.4);
  display: block;
}
.st-checks li[data-checked="true"] .bx { border-color: var(--green); background: var(--green); }
.st-checks .bx::after {
  content: ''; position: absolute;
  top: 2px; left: 6px;
  width: 6px; height: 12px;
  border: solid var(--paper);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transform-origin: center;
  transition: transform .25s ease;
}
.st-checks li[data-checked="true"] .bx::after { transform: rotate(45deg) scale(1); }
.st-checks b {
  font-family: var(--display); font-size: 24px; letter-spacing: 0.02em;
  font-weight: 700; text-transform: uppercase;
}
.st-checks i {
  font-style: normal;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em;
  color: rgba(13, 12, 10, 0.55); text-align: right;
}

/* ============== STAGE 07 — SUBMIT & BIOMETRICS ============== */
.st-submit {
  position: relative;
  display: flex; flex-wrap: wrap; gap: 20px;
  justify-content: center; align-items: stretch;
  max-width: 860px; margin: 0 auto;
}
/* digital eVisa card */
.st-evisa {
  flex: 1 1 360px; max-width: 420px;
  background: var(--paper); color: var(--bg);
  border: 1px solid rgba(13,12,10,0.16);
  box-shadow: 0 24px 60px rgba(0,0,0,0.28);
  text-align: left; padding: 20px 22px;
  display: flex; flex-direction: column;
}
.st-evisa__l {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em;
  color: rgba(13,12,10,0.55); text-transform: uppercase;
  padding-bottom: 13px; border-bottom: 2px dashed rgba(13,12,10,0.2);
}
.st-evisa__rows { list-style: none; margin: 16px 0 6px; display: flex; flex-direction: column; gap: 13px; }
.st-evisa__rows li {
  display: grid; grid-template-columns: 24px 1fr; align-items: center; gap: 12px;
  opacity: 0; /* revealed by scroll (story.js) */
}
.st-evisa__rows .tick {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--green); color: var(--paper);
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
}
.st-evisa__rows b { font-family: var(--display); font-size: 19px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: var(--bg); line-height: 1.05; }
.st-evisa__code {
  margin-top: auto; padding-top: 14px; border-top: 1px dashed rgba(13,12,10,0.2);
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.st-evisa__code .l { font-family: var(--mono); font-size: 9px; letter-spacing: 0.16em; color: rgba(13,12,10,0.55); text-transform: uppercase; }
.st-evisa__code b { font-family: var(--mono); font-size: 20px; font-weight: 600; letter-spacing: 0.08em; color: var(--accent); }

/* biometric capture card */
.st-bio {
  flex: 0 0 190px;
  background: var(--bg); color: var(--paper);
  border: 1px solid rgba(13,12,10,0.2);
  box-shadow: 0 24px 60px rgba(0,0,0,0.28);
  padding: 18px 16px; text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 12px;
}
.st-bio__l { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.13em; color: var(--ink-3); text-transform: uppercase; line-height: 1.4; }
.st-bio__scan { position: relative; width: 92px; height: 116px; overflow: hidden; }
.st-bio__fp {
  position: absolute; inset: 0;
  -webkit-mask: url(fingerprint.png) center / contain no-repeat;
  mask: url(fingerprint.png) center / contain no-repeat;
}
.st-bio__fp--base { background: rgba(243, 238, 223, 0.32); }
.st-bio__fp--fill { background: #7cc66f; clip-path: inset(100% 0 0 0); }
.st-bio__line {
  position: absolute; left: -6%; width: 112%; height: 2px; bottom: 0;
  background: var(--green); box-shadow: 0 0 12px 1px var(--green); opacity: 0;
}
.st-bio__status { font-family: var(--display); font-size: 18px; font-weight: 700; letter-spacing: 0.04em; color: var(--ink-3); text-transform: uppercase; }
.st-bio[data-done="true"] .st-bio__status { color: var(--green); }

/* RECEIVED stamp across the whole submission */
.st-submit__stamp {
  position: absolute; left: 50%; top: 52%;
  transform: translate(-50%, -50%) rotate(-11deg);
  font-family: var(--display); font-size: clamp(38px, 6.4vh, 66px); font-weight: 700;
  letter-spacing: 0.05em; color: var(--green);
  border: 4px solid var(--green); padding: 6px 24px;
  text-transform: uppercase; opacity: 0; pointer-events: none;
  background: rgba(243,238,223,0.55); backdrop-filter: blur(1px);
}

/* ============== STAGE 06 — OFFER ============== */
.st-letter {
  position: relative;
  width: 560px; max-width: 100%;
  height: min(460px, 54vh);
  margin: 0 auto;
}
.st-envelope {
  position: absolute;
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: min(460px, 94%); height: min(284px, 34vh);
  z-index: 3;
  filter: drop-shadow(0 24px 40px rgba(0,0,0,0.45));
}
/* open lid — the inside of the flap, folded back behind the letter */
.st-env__lid {
  position: absolute; left: 50%; bottom: 48%;
  transform: translateX(-50%);
  width: 100%; height: 66%;
  background: linear-gradient(180deg, #f0e4c6 0%, #e6d6ad 100%);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  z-index: 1;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
}
/* back panel of the envelope */
.st-env__back {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #dcc48b 0%, #cdb277 100%);
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(13,12,10,0.10);
  z-index: 0;
}
/* front pocket — masks the bottom of the letter so it reads as "tucked in" */
.st-env__front {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 60%;
  background: linear-gradient(180deg, #d3b97f 0%, #c2a767 100%);
  clip-path: polygon(0 8%, 50% 20%, 100% 8%, 100% 100%, 0 100%);
  z-index: 4;
  border-radius: 0 0 3px 3px;
  box-shadow: 0 -6px 14px rgba(13,12,10,0.18);
}
/* thin airmail dashes along the very bottom edge */
.st-env__front::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 6px;
  background: repeating-linear-gradient(45deg,
    var(--red) 0 8px, transparent 8px 16px, #2f5fb0 16px 24px, transparent 24px 32px);
  opacity: 0.55;
}
.st-env__air {
  position: absolute; bottom: 14px; left: 0; right: 0; text-align: center;
  font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.16em;
  color: rgba(13,12,10,0.45); text-transform: uppercase;
}
.st-env__seal {
  position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%);
  width: 40px; height: 40px; border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #e8624c, #b23a2a);
  color: #f3eedf; font-family: var(--display); font-weight: 700; font-size: 17px;
  display: grid; place-items: center; letter-spacing: 0.02em;
  box-shadow: 0 3px 8px rgba(0,0,0,0.35), inset 0 0 0 2px rgba(255,255,255,0.18);
}
.st-page {
  position: absolute;
  left: 50%; bottom: 12px;
  --st6-rise: 120px;
  transform: translateX(-50%);
  width: min(388px, 82%);
  background: var(--paper); color: var(--bg);
  box-shadow: 0 16px 34px rgba(0,0,0,0.28);
  padding: 24px 28px 28px;
  text-align: left;
  z-index: 2;
  opacity: 0;
}
.st-page__head { border-bottom: 2px solid var(--bg); padding-bottom: 14px; margin-bottom: 18px; }
.st-page__head b { display: block; font-family: var(--display); font-size: 18px; letter-spacing: 0.04em; font-weight: 700; text-transform: uppercase; }
.st-page__head span { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; color: rgba(13,12,10,0.55); margin-top: 4px; text-transform: uppercase; }
.st-page__body p { font-size: 13px; line-height: 1.6; margin-bottom: 10px; }
.st-page__body p em { font-style: normal; color: var(--accent); font-weight: 600; }
.st-page__deg b { font-family: var(--display); font-size: 22px; letter-spacing: 0.02em; }
.st-page__sig { margin-top: 16px; font-family: var(--display); font-size: 16px; letter-spacing: 0.04em; }
.st-page__sig span { display: block; font-family: var(--mono); font-size: 9px; color: rgba(13,12,10,0.55); letter-spacing: 0.16em; margin-top: 2px; }
.st-page__stamp {
  position: absolute; top: 36px; right: 24px;
  font-family: var(--display); font-size: 32px; font-weight: 700;
  letter-spacing: 0.08em; color: var(--red);
  border: 4px solid var(--red); padding: 6px 18px;
  transform: rotate(-12deg) scale(2.4); opacity: 0;
  box-shadow: inset 0 0 0 1px var(--red);
}

/* ============== STAGE 07 — VISA ============== */
.st-passport {
  position: relative;
  width: 760px; max-width: 100%;
  height: min(460px, 52vh);
  margin: 0 auto;
  perspective: 1400px;
}
.st-pp__cover, .st-pp__page {
  position: absolute;
  left: 50%; top: 50%;
  width: min(380px, 41vh); height: min(480px, 52vh);
  transform-style: preserve-3d;
}
.st-pp__cover {
  text-align: left;
  transform: translate(-100%, -50%);
  transform-origin: 100% 50%;
  z-index: 3;
  transform-style: preserve-3d;
}
/* OUTSIDE of the cover — the engraved Pakistan passport. Hidden until the
   book swings shut (it sits on the back face, rotated 180°). */
.st-pp__face {
  position: absolute; inset: 0;
  transform: rotateY(180deg);
  backface-visibility: hidden;
  background: #23332A;
  border-radius: 2px 8px 8px 2px;
  box-shadow: 6px 6px 30px rgba(0,0,0,0.5), inset 0 0 0 2px rgba(254, 210, 134, 0.22);
  overflow: hidden;
}
.st-pp__face svg.st-pp__art {
  width: 100%; height: 100%;
  display: block;
}
/* INSIDE lining — what you read while the passport lies open. Swaps away
   to reveal the cover art as the book closes. */
.st-pp__inside {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  background:
    radial-gradient(120% 80% at 50% 0%, #2c4034 0%, #23332A 60%),
    #23332A;
  border-radius: 8px 2px 2px 8px;
  box-shadow: -6px 6px 30px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(254,210,134,0.16);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 22px;
  overflow: hidden;
}
.st-pp__inside .st-pp__seam {
  position: absolute; left: 14px; top: 22px; bottom: 22px;
  width: 2px; border-radius: 2px;
  background: repeating-linear-gradient(180deg, rgba(254,210,134,0.45) 0 6px, transparent 6px 12px);
}
.st-pp__inside .st-pp__roundel {
  width: 92px; height: 92px; border-radius: 50%;
  border: 2px solid rgba(254,210,134,0.5);
  box-shadow: inset 0 0 0 6px rgba(254,210,134,0.10);
  position: relative;
}
.st-pp__inside .st-pp__roundel::after {
  content: "★"; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #FED286; font-size: 40px; line-height: 1;
}
.st-pp__inside .st-pp__lining {
  max-width: 70%;
  text-align: center;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.18em;
  color: rgba(254,210,134,0.55); text-transform: uppercase;
  line-height: 1.7;
}
.st-pp__crest { font-size: 56px; line-height: 1; margin-bottom: 24px; }
.st-pp__brand { font-family: var(--display); font-size: 32px; letter-spacing: 0.06em; font-weight: 700; }
.st-pp__sub { font-family: var(--mono); font-size: 9px; letter-spacing: 0.2em; margin-top: 8px; }
.st-pp__num { margin-top: auto; font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; }

.st-pp__page {
  background: var(--paper);
  color: var(--bg);
  padding: clamp(15px, 2.6vh, 28px);
  container-type: inline-size;
  transform: translate(0, -50%);
  z-index: 2;
  box-shadow: 6px 6px 30px rgba(0,0,0,0.5);
  border-radius: 2px 8px 8px 2px;
  overflow: hidden;
}
.st-visa { display: flex; flex-direction: column; height: 100%; position: relative; }
.st-visa__head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: clamp(8px, 1.5vh, 12px);
  border-bottom: 2px solid var(--bg);
  margin-bottom: 0;
}
.st-visa__head .l { font-family: var(--mono); font-size: clamp(7px, 2.5cqw, 9px); letter-spacing: 0.14em; color: rgba(13,12,10,0.55); text-transform: uppercase; }
.st-visa__head b { font-family: var(--display); font-size: clamp(11px, 4cqw, 14px); letter-spacing: 0.05em; text-transform: uppercase; font-weight: 700; }
.st-visa__body {
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22cqw;
  gap: 6cqw;
  align-items: stretch;
  padding-top: clamp(10px, 1.8vh, 14px);
}
.st-visa__photo {
  width: 100%;
  aspect-ratio: 78 / 98;
  align-self: start;
  background:
    repeating-linear-gradient(45deg, rgba(13,12,10,0.08) 0 4px, transparent 4px 8px),
    #d9c8ad;
  border: 1px solid rgba(13,12,10,0.3);
  display: flex; align-items: flex-end; justify-content: center;
  overflow: hidden;
  justify-self: end;
}
.st-visa__person {
  width: 80%; height: auto; display: block;
  fill: rgba(13,12,10,0.42);
}
.st-visa__rows { display: grid; row-gap: clamp(6px, 1.6vh, 12px); align-content: space-between; min-width: 0; }
.st-visa__row { display: grid; grid-template-columns: clamp(52px, 34cqw, 80px) minmax(0, 1fr); column-gap: clamp(8px, 3cqw, 14px); align-items: baseline; }
.st-visa__row label { font-family: var(--mono); font-size: clamp(7px, 2.4cqw, 9px); letter-spacing: 0.06em; color: rgba(13,12,10,0.55); text-transform: uppercase; }
.st-visa__row b { font-family: var(--display); font-size: clamp(10px, 3.4cqw, 12.5px); letter-spacing: 0.02em; font-weight: 700; text-transform: uppercase; min-width: 0; line-height: 1.15; }
.st-visa__stamp {
  position: absolute; bottom: clamp(8px, 1.5vh, 14px); right: clamp(4px, 1.5cqw, 8px);
  font-family: var(--display); font-size: clamp(13px, 4.6cqw, 18px); font-weight: 700;
  letter-spacing: 0.03em; color: var(--green);
  border: 2px solid var(--green); padding: 4px 11px;
  text-align: center;
  transform: rotate(-10deg) scale(1.7); opacity: 0;
  box-shadow: inset 0 0 0 1px var(--green);
}
.st-visa__stamp .sub { display: block; font-family: var(--mono); font-size: clamp(6px, 1.8cqw, 8px); letter-spacing: 0.16em; margin-top: 2px; font-weight: 500; }

/* ============== STAGE 08 — DEPARTURE ============== */
.st-pass {
  position: relative;
  width: 640px; max-width: 100%;
  background: #1a1410; color: var(--paper);
  margin: 0 auto;
  padding: 24px 28px 60px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.4);
  text-align: left;
}
.st-pass__head { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 14px; border-bottom: 2px dashed rgba(243,238,223,0.25); margin-bottom: 20px; }
.st-pass__brand { font-family: var(--display); font-size: 20px; letter-spacing: 0.02em; font-weight: 700; }
.st-pass__brand em { font-style: normal; color: var(--accent); }
.st-pass__brand span { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: 0.18em; color: var(--ink-3); margin-top: 2px; font-weight: 400; }
.st-pass__cls { font-family: var(--display); font-size: 22px; letter-spacing: 0.06em; color: var(--accent); }
.st-pass__route { display: grid; grid-template-columns: 1fr 240px 1fr; gap: 14px; align-items: center; margin-bottom: 22px; }
.st-pass__cd b { display: block; font-family: var(--display); font-size: 56px; line-height: 0.85; font-weight: 700; letter-spacing: 0.01em; }
.st-pass__cd span { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; color: var(--ink-3); margin-top: 6px; text-transform: uppercase; }
.st-pass__cd.r { text-align: right; }
.st-pass__arc { height: 60px; color: var(--accent); width: 100%; }
.st-pass__meta { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 16px; padding-bottom: 18px; border-bottom: 1px dashed rgba(243,238,223,0.25); }
.st-pass__meta label { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: 0.18em; color: var(--ink-3); margin-bottom: 4px; text-transform: uppercase; }
.st-pass__meta b { font-family: var(--display); font-size: 20px; letter-spacing: 0.02em; font-weight: 700; }
.st-pass__bar {
  margin: 16px 0;
  height: 42px;
  background-image: repeating-linear-gradient(to right, var(--paper) 0 2px, transparent 2px 5px, var(--paper) 5px 6px, transparent 6px 9px, var(--paper) 9px 12px, transparent 12px 14px);
}
.st-pass__pnr { font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; color: var(--ink-3); text-transform: uppercase; position: absolute; bottom: 24px; left: 28px; }
.st-pass__pnr b { display: block; font-family: var(--display); font-size: 16px; color: var(--paper); letter-spacing: 0.08em; margin-top: 2px; font-weight: 700; }
.st-pass__stamp {
  position: absolute; top: 50%; right: -32px;
  transform: translate(0, -50%) rotate(-10deg) scale(2.4);
  font-family: var(--display); font-size: 32px; font-weight: 700;
  letter-spacing: 0.06em; color: var(--green);
  border: 4px solid var(--green); padding: 8px 22px;
  opacity: 0;
  box-shadow: inset 0 0 0 1px var(--green);
}

.st-skyline { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 140px; color: rgba(31, 24, 16, 0.4); pointer-events: none; }
.st-flyplane { position: absolute; top: 18%; left: -200px; width: 160px; color: rgba(31, 24, 16, 0.7); pointer-events: none; }

/* ============== STAGE 09 — ARRIVAL ============== */
.st-arrival { max-width: 980px; margin: 0 auto; }
.st-arrival__count {
  display: flex; flex-direction: column; align-items: center;
  margin-bottom: 36px;
}
.st-arrival__count .l { font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; color: rgba(13, 12, 10, 0.55); text-transform: uppercase; }
.st-arrival__count b {
  font-family: var(--display); font-size: clamp(96px, 14vw, 220px);
  line-height: 0.85; font-weight: 700; letter-spacing: -0.01em;
  color: var(--accent);
  margin: 12px 0;
}
.st-arrival__count .r { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; color: rgba(13, 12, 10, 0.55); font-style: italic; }
.st-arrival__grid {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}
.st-arrival__grid > div {
  padding: 16px 14px;
  border: 1px solid rgba(13, 12, 10, 0.2);
  background: rgba(255, 255, 255, 0.4);
  display: flex; flex-direction: column; align-items: flex-start;
}
.st-arrival__grid b { font-family: var(--display); font-size: 22px; font-weight: 700; letter-spacing: 0.04em; }
.st-arrival__grid span { font-family: var(--display); font-size: 32px; color: var(--accent); font-weight: 700; margin-top: 4px; }
.st-cta {
  display: inline-flex; align-items: center; gap: 14px;
  margin-top: 12px;
  padding: 22px 32px;
  background: var(--bg); color: var(--paper);
  font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
}
.st-cta svg { width: 22px; height: 14px; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 980px) {
  .story__title { font-size: clamp(32px, 8.4vw, 64px); max-width: 16ch; }
  .st-headline { font-size: clamp(40px, 11vw, 80px); }
  .st-overlay__tl, .st-overlay__bl, .st-overlay__br { display: none; }
  .st-flags { grid-template-columns: repeat(5, 1fr); gap: 6px; }
  .st-flag { padding: 12px 6px 10px; }
  .st-flag b { font-size: 24px; }
  .st-flag span, .st-flag i { font-size: 8px; }
  .st-checks { font-size: 14px; }
  .st-checks li { grid-template-columns: 24px 1fr; }
  .st-checks i { grid-column: 2; text-align: left; }
  .st-passport, .st-letter { height: 340px; }
  .st-pp__cover, .st-pp__page { width: 280px; height: 360px; }
  .st-envelope { width: 320px; height: 200px; }
  .st-page { width: 320px; }
  .st-pass { padding: 18px 20px 50px; }
  .st-pass__route { grid-template-columns: 1fr 140px 1fr; }
  .st-pass__cd b { font-size: 40px; }
  .st-pass__meta { grid-template-columns: 1fr 1fr; }
  .st-arrival__grid { grid-template-columns: repeat(5, 1fr); gap: 6px; }
  .st-arrival__grid > div { padding: 8px 6px; }
  .st-arrival__grid b { font-size: 14px; }
  .st-arrival__grid span { font-size: 18px; }

  /* SERVICES — below the 981px JS breakpoint the pinned horizontal rail
     is NOT built, so make the track a NATIVE horizontal swipe-scroll
     instead of a clipped overflow:hidden box (cards were unreachable). */
  .services__pin {
    height: auto;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .services__pin::-webkit-scrollbar { display: none; }
  .services__track {
    height: auto;
    padding: 40px var(--pad-x) 56px;
    gap: 20px;
  }
  .svc { scroll-snap-align: start; width: 360px; }
  .svc.ghost { width: 360px; }
}

/* ============================================================
   SHORT SCREENS — 13"/14" laptops (viewport ≈ 650–800px tall)
   ------------------------------------------------------------
   On these the pinned story scenes were taller than the stage, so the
   centred headline crept UP under the fixed top menu/overlay ("menu
   sath") and props/captions spilled off-screen. Here we (a) raise the
   scene's top padding so content always clears the menu (~50px) and the
   PHASE/CHAPTER overlay (~80px), and (b) shrink every prop, headline and
   list so the whole stack fits one screen. Heights use vh so it stays
   fluid across 13"→16". 21"+ monitors never trigger this — they have room.
   ============================================================ */
@media (max-height: 860px) {
  /* clear the fixed menu + overlay labels at the top */
  .st-scene { padding: 80px var(--pad-x) 60px; }
  .st-tag { margin-bottom: 12px; }
  .st-headline { font-size: min(7.6vw, 9vh); margin-bottom: 16px; }
  .st-caption { margin-top: 16px; font-size: 14px; }

  /* ATLAS side panel — compact so the stats + dots + hint below the
     intake stay fully visible (no cut/scroll) on short laptops */
  .atlas__side { padding: 52px 40px 22px; }
  .atlas__count { margin-bottom: 16px; }
  .atlas__count b { font-size: 52px; }
  .atlas__count em { font-size: 22px; }
  .atlas__city { font-size: 40px; margin-bottom: 12px; min-height: 0; }
  .atlas__body { font-size: 13.5px; line-height: 1.5; margin-bottom: 16px; min-height: 0; }
  .atlas__stats { gap: 12px; padding-top: 14px; }
  .atlas__stat .v { font-size: 22px; }
  .atlas__stat .v small { font-size: 12px; }
  .atlas__dots { margin-bottom: 18px; }

  /* STAGE 06 — offer letter */
  .st-letter { height: min(380px, 48vh); }
  .st-envelope { height: min(224px, 28vh); }
  /* compact the letter so it fits a short screen and rises LESS — its top
     stays under the headline and its bottom stays tucked behind the pocket */
  .st-page {
    --st6-rise: 74px;
    width: min(360px, 80%);
    padding: 18px 22px 22px;
  }
  .st-page__head { padding-bottom: 10px; margin-bottom: 12px; }
  .st-page__head b { font-size: 16px; }
  .st-page__head span { font-size: 9px; margin-top: 3px; }
  .st-page__body p { font-size: 12px; line-height: 1.5; margin-bottom: 7px; }
  .st-page__deg b { font-size: 19px; }
  .st-page__sig { margin-top: 12px; font-size: 14px; }
  .st-page__stamp { top: 26px; right: 18px; font-size: 26px; padding: 5px 14px; }

  /* STAGE 07 — biometrics + eVisa */
  .st-submit { gap: 14px; }
  .st-evisa { padding: 14px 16px; flex-basis: 320px; }
  .st-evisa__rows { gap: 10px; margin: 12px 0 4px; }
  .st-evisa__rows b { font-size: 16px; }
  .st-evisa__code b { font-size: 17px; }
  .st-bio { flex-basis: 150px; padding: 12px 14px; }
  .st-bio__scan { width: 74px; height: 94px; }
  .st-submit__stamp { font-size: clamp(30px, 5.4vh, 48px); padding: 5px 18px; }

  /* STAGE 08 — passport / visa */
  .st-passport { height: min(360px, 44vh); }
  .st-pp__cover, .st-pp__page { width: min(300px, 38vh); height: min(360px, 44vh); }

  /* STAGE 03 — file folder */
  .st-folder__body { padding: 24px 32px 52px; }
  .st-folder__line { padding: 5px 0; }
  .st-folder__line b { font-size: 16px; }
  .st-timer { margin-top: 16px; }

  /* STAGE 05 — documents checklist */
  .st-checks li { padding: 9px 0; }
  .st-checks b { font-size: 20px; }

  /* STAGE 04 — flags */
  .st-flags { margin-bottom: 20px; }
  .st-flag { padding: 14px 12px 12px; }
  .st-flag b { font-size: 34px; }

  /* STAGE 02 — chips */
  .st-chip { padding: 11px 20px; font-size: 18px; }

  /* STAGE 09 — arrival counter */
  .st-arrival__count { margin-bottom: 18px; }
  .st-arrival__count b { font-size: min(14vw, 15vh); margin: 6px 0; }
  .st-arrival__grid { gap: 10px; margin-bottom: 14px; }
  .st-arrival__grid > div { padding: 10px 12px; }

  /* STAGE 08 — boarding pass (content-driven, so scale it) */
  .st-pass { transform: scale(0.9); transform-origin: center top; }
}

@media (max-height: 720px) {
  .st-scene { padding: 76px var(--pad-x) 52px; }
  .st-headline { font-size: min(6.8vw, 8vh); margin-bottom: 12px; }
  .st-caption { font-size: 13px; }

  /* ATLAS side panel — tightest fit for very short screens */
  .atlas__side { padding: 46px 36px 18px; }
  .atlas__num { font-size: 12px; }
  .atlas__count { margin-bottom: 10px; }
  .atlas__count b { font-size: 40px; }
  .atlas__count em { font-size: 18px; }
  .atlas__city { font-size: 32px; margin-bottom: 8px; }
  .atlas__body { font-size: 12px; line-height: 1.45; margin-bottom: 12px; }
  .atlas__stats { gap: 9px 12px; padding-top: 11px; }
  .atlas__stat .l { font-size: 9px; }
  .atlas__stat .v { font-size: 18px; }
  .atlas__dots { margin-bottom: 14px; gap: 6px; }
  .atlas__dot.is-active { width: 24px; }

  .st-letter { height: min(330px, 44vh); }
  .st-envelope { height: min(200px, 26vh); }
  /* very short: rise even less and compact the letter further so its
     content height stays within its container (no overflow up into the
     headline) and its bottom stays tucked in the envelope */
  .st-page {
    --st6-rise: 18px;
    width: min(320px, 80%);
    padding: 13px 16px 14px;
  }
  .st-page__head { padding-bottom: 6px; margin-bottom: 8px; }
  .st-page__head b { font-size: 13px; }
  .st-page__head span { font-size: 8px; margin-top: 2px; }
  .st-page__body p { font-size: 10px; line-height: 1.35; margin-bottom: 4px; }
  .st-page__deg b { font-size: 15px; }
  .st-page__sig { margin-top: 7px; font-size: 12px; }
  .st-page__sig span { font-size: 8px; }
  .st-page__stamp { top: 20px; right: 14px; font-size: 21px; padding: 4px 11px; border-width: 3px; }
  .st-passport { height: min(320px, 42vh); }
  .st-pp__cover, .st-pp__page { width: min(270px, 36vh); height: min(320px, 42vh); }
  /* short viewport: keep the passport's proportions — fit the visa purely by
     tightening font-size, line-height and row spacing (no box resizing) */
  .st-visa__row { grid-template-columns: clamp(52px, 26cqw, 70px) minmax(0, 1fr); column-gap: clamp(6px, 2.4cqw, 12px); }
  .st-visa__row label { font-size: clamp(7px, 2.4cqw, 9px); }
  .st-visa__row b { font-size: clamp(8px, 3cqw, 12px); line-height: 1.05; }
  .st-visa__rows { row-gap: clamp(3px, 0.9vh, 8px); }
  .st-visa__body { padding-top: 6px; gap: 5cqw; }

  .st-folder__line { padding: 4px 0; }
  .st-folder__line b { font-size: 15px; }
  .st-checks li { padding: 7px 0; }
  .st-checks b { font-size: 18px; }
  .st-flag b { font-size: 30px; }
  .st-arrival__count b { font-size: min(12vw, 13vh); }
  .st-pass { transform: scale(0.8); }
}

/* ============================================================
   NARROW PHONES (≤560px) — contain the two "prop" scenes so they sit
   fully inside a phone screen. Placed AFTER the height-based blocks so
   it wins on phones (which match both width and height queries). Two
   specific overflows made the layout feel stretched / spilling:
   • STAGE 08 open passport = cover + page side-by-side (≈2×280px ≈
     560px) overflowed a ~390px screen → shrink the leaves so the open
     book fits within the viewport.
   • STAGE 09 boarding-pass "APPROVED" stamp (right:-32px, scale 2.4)
     poked off the right edge → pull it back inside the card.
   ============================================================ */
@media (max-width: 560px) {
  /* open passport: two leaves must fit within viewport width */
  .st-passport { height: 280px; }
  .st-pp__cover, .st-pp__page { width: min(158px, 43vw); height: 280px; }
  .st-pp__crest { font-size: 38px; margin-bottom: 14px; }
  .st-pp__brand { font-size: 22px; }
  .st-pp__sub { font-size: 8px; }
  .st-pp__inside .st-pp__roundel { width: 64px; height: 64px; }
  .st-pp__inside .st-pp__roundel::after { font-size: 26px; }
  .st-pp__inside .st-pp__lining { font-size: 10px; line-height: 1.5; }

  /* boarding-pass stamp back inside the card */
  .st-pass__stamp {
    right: 8px;
    transform: translate(0, -50%) rotate(-9deg) scale(1.2);
    font-size: 20px; padding: 5px 13px; border-width: 3px;
  }
}

/* ===== TEMP · Option A+B — scroll-aware chrome visibility =====
   Driven by chrome-visibility.js via <body data-chrome-zone>. Remove this
   block + that script tag + the file to revert. */
.chrome__credit,
.chrome__progress {
  transition: opacity .4s ease;
}

/* ===== MENU BAR — logo + nav + live clocks in ONE glassmorphism bar.
   Sticky from the hero through to the footer; hidden only over the
   immersive destinations (atlas) map. ===== */
.chrome__bar {
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 8px 14px;
  border-radius: 14px;
  background: rgba(243, 238, 223, 0.08);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid rgba(243, 238, 223, 0.2);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.3),
              inset 0 1px 0 rgba(243, 238, 223, 0.12);
  transition: opacity .4s ease, transform .4s ease,
              background .4s ease, border-color .4s ease;
}
body[data-tint="light"] .chrome__bar {
  background: rgba(255, 255, 255, 0.55);
  border-color: rgba(13, 12, 10, 0.12);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12),
              inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
/* the three groups now sit INSIDE the bar (normal flow, not screen corners) */
.chrome__bar .chrome__brand,
.chrome__bar .chrome__nav,
.chrome__bar .chrome__clocks {
  position: static;
  top: auto; left: auto; right: auto;
  transform: none;
}
.chrome__bar .chrome__brand .mark { width: 28px; height: 28px; font-size: 17px; }
.chrome__bar .chrome__brand .sub { display: none; }
/* nav sits in the centre with hairline dividers either side */
.chrome__bar .chrome__nav {
  padding: 2px 20px;
  border-left: 1px solid rgba(243, 238, 223, 0.16);
  border-right: 1px solid rgba(243, 238, 223, 0.16);
}
body[data-tint="light"] .chrome__bar .chrome__nav {
  border-color: rgba(13, 12, 10, 0.14);
}

/* destinations map — slide the whole bar up & out */
body[data-chrome-zone="atlas"] .chrome__bar {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(-18px);
}

/* bottom corner chrome (credit / progress) stays out of the scroll zones */
body[data-chrome-zone="atlas"] .chrome__credit,
body[data-chrome-zone="atlas"] .chrome__progress,
body[data-chrome-zone="busy"] .chrome__credit,
body[data-chrome-zone="busy"] .chrome__progress,
body[data-chrome-zone="story"] .chrome__credit,
body[data-chrome-zone="story"] .chrome__progress {
  opacity: 0;
  pointer-events: none;
}

/* ===== STORY BOARD PHASES (1-9) — special case =====
   Once the pinned board has engaged (story zone, NOT the hero intro), hide
   the menu bar by default. Bringing the cursor to the top edge reveals it
   for ~3s (chrome-visibility.js sets .chrome-peek) and tucks the CHAPTER /
   PHASE labels away while it's open; both restore when it auto-hides.
   The hero intro, the atlas, and everything after stay exactly as before. */
.st-overlay__tl,
.st-overlay__tr { transition: opacity .35s ease; }

body[data-chrome-zone="story"]:not(.is-hero-intro) .chrome__bar {
  opacity: 0;
  pointer-events: none;
}
body[data-chrome-zone="story"]:not(.is-hero-intro).chrome-peek .chrome__bar {
  opacity: 1;
  pointer-events: auto;
}
body[data-chrome-zone="story"]:not(.is-hero-intro).chrome-peek .st-overlay__tl,
body[data-chrome-zone="story"]:not(.is-hero-intro).chrome-peek .st-overlay__tr {
  opacity: 0;
}