/* ─────────────────────────────────────────────────────────────────
   Timeward — voyage.css   (home only)
   The hold-to-travel control over the hero sky, and the corridor: a
   pinned passage through time between the hero and the factsheet.
   html.tw-voyage is set by the head script when motion is allowed;
   without it the corridor is a plain, readable list.
   ───────────────────────────────────────────────────────────────── */

/* ══ travel ═══════════════════════════════════════════════════════ */

.travel {
  display: inline-flex; align-items: center; gap: .9em;
  margin-top: 26px; padding: .5em 0;
  background: none; border: 0; cursor: pointer;
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ash);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: none;
  transition: color .3s var(--ease);
}
.travel[hidden] { display: none; }
.travel:hover, .travel[aria-pressed="true"] { color: var(--ink); }
/* a small dial: one hand, turning at the pace of a second hand */
.travel-dial {
  position: relative; width: 26px; height: 26px; flex: none; border-radius: 50%;
  border: 1px solid var(--hairline-2);
  background: radial-gradient(circle, var(--ink) 0 1.2px, transparent 1.6px);
  transition: border-color .3s var(--ease), box-shadow .4s var(--ease);
}
.travel-dial::before {
  content: ""; position: absolute; left: 50%; bottom: 50%; width: 1px; height: 9px; margin-left: -.5px;
  background: var(--ink); transform-origin: 50% 100%;
  animation: dial 60s steps(60) infinite;
}
/* the fill ring: holding is charging */
.travel-dial::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  background: conic-gradient(rgba(236,235,229,.75) calc(var(--tk, 0) * 360deg), transparent 0);
  -webkit-mask: radial-gradient(circle, transparent 15.5px, #000 16px);
          mask: radial-gradient(circle, transparent 15.5px, #000 16px);
}
.travel:hover .travel-dial { border-color: var(--graphite); }
html.is-travelling .travel-dial { box-shadow: 0 0 22px rgba(220,226,255,.28); }
html.is-travelling .travel-dial::before { animation-duration: .5s; animation-timing-function: linear; }
@keyframes dial { to { transform: rotate(360deg); } }
.travel-k { color: var(--ash); opacity: .7; }

/* the readout hangs under the pole the sky turns around */
.travel-read {
  position: absolute; z-index: 2; pointer-events: none;
  left: calc(var(--px) * 1%); top: calc(var(--py) * 1%);
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-family: var(--font-mono); color: var(--graphite); text-align: center; white-space: nowrap;
  opacity: 0; filter: blur(6px);
  transition: opacity .6s var(--ease-out), filter .6s var(--ease-out);
}
.travel-read.is-on { opacity: 1; filter: none; }
.travel-date { font-size: clamp(1.3rem, 2.4vw, 2rem); letter-spacing: .12em; font-variant-numeric: tabular-nums; color: var(--graphite); }
.travel-date b { font-weight: 400; color: #FFFFFF; text-shadow: 0 0 24px rgba(220,226,255,.45); }
.travel-delta { font-size: .7rem; letter-spacing: .2em; color: var(--ash); font-variant-numeric: tabular-nums; }
.travel-note {
  font-family: var(--font-display); font-size: clamp(1rem, 1.5vw, 1.25rem); letter-spacing: 0; color: var(--ink);
  opacity: 0; transform: translateY(6px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.travel-read.has-note .travel-note { opacity: 1; transform: none; }

/* the sky under travel: brighter, closer, the pole flaring */
.hero--cine .sky-turn {
  /* the trails sit back so the words and the bird come forward; travel brings them up again */
  opacity: calc(.5 + var(--tk, 0) * .5);
  transform-origin: calc(var(--px) * 1%) calc(var(--py) * 1%);
  scale: calc(1 + var(--tk, 0) * .06);
  filter: brightness(calc(1 + var(--tk, 0) * .7));
}
.hero-stage::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(circle at calc(var(--px) * 1%) calc(var(--py) * 1%), rgba(226,232,255,.34), rgba(226,232,255,.06) 18%, transparent 42%);
  opacity: var(--tk, 0);
  mix-blend-mode: screen;
}
.hero--cine .ridge--far  { translate: 0 calc(var(--tk, 0) * 6px); }
.hero--cine .ridge--near { translate: 0 calc(var(--tk, 0) * 12px); }
html.is-travelling .hero--cine { cursor: grabbing; }
@media (pointer: fine) {
  .hero--cine { cursor: default; }
}

/* the readout is the caption under the bird: centred on its axis, in the
   dark sky between the tail and the ridge, opened by a hairline */
.travel-read {
  top: calc(var(--py) * 1% + clamp(420px, 44vw, 760px) * .56);
  transform: translate(-50%, 0);
}
.travel-read::before {
  content: ""; width: 44px; height: 1px; margin-bottom: 4px;
  background: var(--prism); opacity: .9;
}
@media (max-aspect-ratio: 19/20) {
  /* upright, there is no sky under the bird: the words step back while you
     travel, and the date takes their place */
  .travel-read { top: calc(var(--py) * 1% + clamp(280px, 80vw, 480px) * .46); }
  .hero--cine .hero-copy > :not(.travel) { transition: opacity .55s var(--ease-out); }
  html.is-travelling .hero--cine .hero-copy > :not(.travel) { opacity: .08; }
}

/* ══ the eye ══════════════════════════════════════════════════════
   The corvus hangs in the night with its eye on the celestial pole, so
   every star trail turns about the bird's eye. The eye is the only truly
   black thing in the sky: a pupil rimmed with light, breathing slowly.
   Hold to travel and it narrows against the glare; scroll and you fall
   through it, into the corridor. (--ex/--ey: the eye, in the mark.) */
.iris {
  --bw: clamp(420px, 44cqw, 760px);
  --ex: 48.16%; --ey: 10.41%;
  position: absolute; z-index: 5; width: var(--bw); aspect-ratio: 980 / 557;
  left: calc(var(--px) * 1% - var(--bw) * .4816);
  top: calc(var(--py) * 1% - var(--bw) * .0592);
  /* the eye drifts to the middle of whatever is still showing of the sky */
  translate: calc((50 - var(--px)) * 1cqw * var(--dive, 0)) calc((50 - var(--py)) * 1cqh * var(--dive, 0) + 40cqh * var(--dive, 0) * var(--dive, 0));
  will-change: translate;
  pointer-events: none;
}
.iris-bird {
  display: block; width: 100%; height: auto; max-width: none;
  /* the bird is drawn in the pole's own light: each shard edged in platinum,
     brightest at the eye and falling off to the wingtips; screened, so the
     trails keep turning through it */
  --bo: 1;
  opacity: calc(var(--bo) * (1 - min(var(--dive, 0) * 4, 1)));
  mix-blend-mode: screen;
  transform-origin: var(--ex) var(--ey);
  scale: calc(1 + var(--dive, 0) * .6);
  filter: drop-shadow(0 0 16px rgba(210,218,245,.16));
  will-change: opacity, scale;
}
.iris-eye {
  --ew: calc(var(--bw) * .03);
  position: absolute; left: var(--ex); top: var(--ey);
  width: var(--ew); height: var(--ew); margin: calc(var(--ew) / -2) 0 0 calc(var(--ew) / -2);
  /* only the eye grows when you fall: a small layer, scaled on the compositor */
  scale: calc(1 + var(--dive, 0) * var(--dive, 0) * var(--dive, 0) * 26);
  opacity: calc(1 - max(0, var(--dive, 0) - .72) * 3.6);
  will-change: scale, opacity;
}
.iris-fib, .iris-pupil, .iris-glint { position: absolute; border-radius: 50%; }
/* round the pupil: a thin ring of iris and a soft halo, fading into the trails */
.iris-fib {
  inset: -70%;
  background: radial-gradient(circle closest-side, transparent 62%, rgba(236,240,255,.55) 66%, rgba(236,240,255,.08) 72%, transparent 100%);
  opacity: calc(1 - min(var(--dive, 0) * 1.8, 1));
}
.iris-fib--2 {
  inset: -420%;
  background: radial-gradient(circle closest-side, rgba(214,222,248,.16), rgba(214,222,248,.04) 38%, transparent 70%);
  opacity: calc(1 - min(var(--dive, 0) * 1.8, 1));
}
.iris-pupil {
  inset: 0;
  background: radial-gradient(circle closest-side, #010102 0 76%, #06060A 96%, #0B0B10 100%);
  box-shadow:
    0 0 0 1px rgba(240,243,255,.6),
    0 0 10px 1px rgba(226,232,255,.55),
    0 0 34px 6px rgba(200,212,245,.2);
  scale: calc(1 - var(--tk, 0) * .42);
  transition: scale .5s var(--ease-out);
}
.iris-glint {
  width: 16%; height: 11%; left: 30%; top: 30%;
  background: radial-gradient(closest-side, rgba(255,255,255,.85), transparent);
  rotate: -30deg;
}
@media (prefers-reduced-motion: no-preference) {
  .iris { animation: iris-open 2.6s cubic-bezier(.16,1,.3,1) .5s both; }
  html.tw-intro .iris { animation-delay: 1.7s; }
  .iris-pupil { animation: iris-breathe 9s ease-in-out 3s infinite; }
}
@keyframes iris-open { from { opacity: 0; filter: blur(8px); } }
@keyframes iris-breathe { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.12); } 55% { transform: scale(1.12); } }
/* falling through: the sky swells toward you and the pupil takes the frame */
/* night comes down over the sky as one layer (opacity only, nothing repaints),
   and the ground ends in the corridor's own black, so the fall has no seam */
.hero-night {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: #06060A;
  opacity: calc(var(--dive, 0) * var(--dive, 0) * 1.35);
  will-change: opacity;
}
.hero--cine .hero-stage::after { background: linear-gradient(to bottom, #070709, #06060A); }
@media (max-aspect-ratio: 19/20) {
  .iris { --bw: clamp(280px, 80cqw, 480px); }
  /* upright, the words stand under the bird: its tail dissolves before it reaches them */
  .iris-bird {
    --bo: .9;
    -webkit-mask-image: linear-gradient(#000 0%, #000 42%, rgba(0,0,0,.35) 62%, transparent 86%);
            mask-image: linear-gradient(#000 0%, #000 42%, rgba(0,0,0,.35) 62%, transparent 86%);
  }
}

/* the proof under the call to action: one call, seen and then arrived */
.hero-proof {
  display: inline-grid; grid-template-columns: auto auto auto; align-items: center; gap: 14px;
  margin-top: 26px; padding: 12px 18px 12px 14px;
  border: 1px solid rgba(236,235,229,.12); border-radius: 2px;
  background: linear-gradient(90deg, rgba(10,10,14,.6), rgba(10,10,14,.2));
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .1em; color: var(--slate);
  text-decoration: none; transition: border-color .3s var(--ease), color .3s var(--ease);
}
.hero-proof:hover { border-color: rgba(236,235,229,.3); color: var(--ink); }
.hero-proof b { font-weight: 400; color: #FFFFFF; }
.hero-proof q { font-family: var(--font-display); font-style: italic; font-size: 1.02rem; letter-spacing: 0; color: var(--ink); quotes: "“" "”"; }
.hero-proof i {
  display: block; width: 42px; height: 1px; font-style: normal;
  background: linear-gradient(90deg, rgba(236,235,229,.2), #FFFFFF);
  position: relative;
}
.hero-proof i::after { content: ""; position: absolute; right: -2px; top: -2px; width: 5px; height: 5px; border-radius: 50%; background: #FFF; box-shadow: 0 0 8px rgba(220,226,255,.9); }
.hero-proof .hp-a, .hero-proof .hp-b { display: grid; gap: 3px; }
.hero-proof small { font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ash); }
@media (max-width: 560px) {
  .hero-proof { grid-template-columns: 1fr; gap: 10px; }
  .hero-proof i { display: none; }
  .hero-proof .hp-b { padding-top: 10px; border-top: 1px solid rgba(236,235,229,.1); }
}

/* ══ corridor ═════════════════════════════════════════════════════ */

/* ── without motion: a list you read top to bottom ─────────────── */
.corridor {
  position: relative; isolation: isolate;
  background: #06060A;
  /* the corridor is night in either theme */
  --paper: #15151A; --white: #1E1E25; --hairline: #2F2F37; --hairline-2: #45454F;
  --ink: #ECEBE5; --graphite: #C6C6CC; --slate: #B4B4BB; --ash: #8E8E97;
  color: var(--ink);
}
.corridor-pin { position: relative; padding: clamp(72px, 9vw, 130px) var(--pad-x); }
.corridor-field, .corridor-hud, .corridor-scale, .corridor-arrive { display: none; }
.corridor-stops { list-style: none; margin: 0 auto; padding: 0; max-width: 640px; display: grid; gap: clamp(48px, 6vw, 80px); }
.stop { position: relative; }
.stop-y {
  display: block; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(3.6rem, 9vw, 6rem); line-height: .9; letter-spacing: -.04em;
  color: transparent; -webkit-text-stroke: 1px rgba(236,235,229,.34);
  margin-bottom: 10px;
}
.stop-k { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ash); margin: 0 0 12px; }
.stop-h { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.9rem, 3.4vw, 2.9rem); line-height: 1.06; letter-spacing: -.018em; margin: 0 0 14px; color: var(--ink); text-wrap: balance; }
.stop-p { color: var(--slate); font-size: 1.02rem; line-height: 1.6; margin: 0; max-width: 42ch; text-wrap: pretty; }
.stop-p a { color: var(--ink); border-bottom: 1px solid var(--hairline-2); }
.stop-p a:hover { border-color: var(--ink); }
.stop--title .stop-h { font-size: clamp(2.4rem, 5vw, 4.4rem); }
.corridor-skip {
  position: absolute; right: var(--pad-x); bottom: 26px;
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ash);
}
.corridor-skip:hover { color: var(--ink); }

/* ── with motion: the passage ──────────────────────────────────── */
html.tw-voyage .corridor { height: calc(var(--legs, 11.95) * 38vh + 100vh); }
html.tw-voyage .corridor-pin {
  position: sticky; top: 0; height: 100vh; height: 100svh; padding: 0; overflow: hidden;
}
/* the corridor opens out of the hero's ground and hands over to the page */
html.tw-voyage .corridor-pin::before,
html.tw-voyage .corridor-pin::after {
  content: ""; position: absolute; left: 0; right: 0; height: 18vh; z-index: 1200; pointer-events: none;
}
html.tw-voyage .corridor-pin::before { top: 0; background: linear-gradient(#06060A, transparent); }
html.tw-voyage .corridor-pin::after  { bottom: 0; background: linear-gradient(transparent, #06060A); }

html.tw-voyage .corridor-field { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }

html.tw-voyage .corridor-stops { position: absolute; inset: 0; max-width: none; display: block; }
html.tw-voyage .stop {
  position: absolute; left: 50%; top: 50%;
  width: min(600px, 84vw); text-align: center;
  opacity: 0; visibility: hidden;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}
html.tw-voyage .stop:first-child { opacity: 1; visibility: visible; transform: translate(-50%, -50%); }
html.tw-voyage .stop-y {
  position: absolute; left: 50%; top: 50%; z-index: -1; margin: 0;
  transform: translate(-50%, -62%);
  font-size: clamp(7rem, 19vw, 16rem);
  -webkit-text-stroke: 1px rgba(236,235,229,.2);
  white-space: nowrap;
}
html.tw-voyage .stop-p { margin-inline: auto; }
/* a short keyline above each stop, like a mark on a dial */
html.tw-voyage .stop-k::before {
  content: ""; display: block; width: 1px; height: 26px; margin: 0 auto 16px;
  background: linear-gradient(transparent, var(--graphite));
}

/* instruments: the year, top left; the scale, right edge */
html.tw-voyage .corridor-hud {
  display: grid; gap: 6px; position: absolute; z-index: 1300;
  left: clamp(16px, 3vw, 44px); top: clamp(88px, 12vh, 120px);
  font-family: var(--font-mono); pointer-events: none;
}
.hud-k { font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ash); }
.hud-v { font-size: clamp(1.6rem, 2.6vw, 2.3rem); letter-spacing: .06em; color: var(--graphite); font-variant-numeric: tabular-nums; line-height: 1; }
.hud-y { color: #FFFFFF; }
.hud-era {
  font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink);
  display: inline-flex; align-items: center; gap: .7em;
}
.hud-era::before { content: ""; width: 18px; height: 1px; background: var(--prism); }

html.tw-voyage .corridor-scale {
  display: block; position: absolute; z-index: 1300; pointer-events: none;
  right: clamp(16px, 3vw, 44px); top: 22vh; bottom: 22vh; width: 1px;
  background: linear-gradient(transparent, var(--hairline-2) 8%, var(--hairline-2) 92%, transparent);
}
.corridor-scale .tick { position: absolute; right: 0; width: 7px; height: 1px; background: var(--ash); }
.corridor-scale .tick em {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  font-style: normal; font-family: var(--font-mono); font-size: .6rem; letter-spacing: .14em; color: var(--ash); white-space: nowrap;
}
.scale-mark {
  position: absolute; right: -4px; width: 15px; height: 1px; margin-top: -.5px;
  background: #FFFFFF; box-shadow: 0 0 10px rgba(220,226,255,.8);
}

/* the arrival: the bore floods with light and says one thing */
html.tw-voyage .corridor-arrive {
  display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 18px;
  position: absolute; inset: 0; z-index: 1250; pointer-events: none;
  opacity: var(--a, 0);
}
.corridor-arrive p {
  margin: 0; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(3rem, 8vw, 7.4rem); letter-spacing: -.03em; line-height: 1;
  color: #FFFFFF;
  text-shadow: 0 0 60px rgba(220,226,255,.35);
  transform: scale(calc(1.18 - var(--a, 0) * .18));
  filter: blur(calc((1 - var(--a, 0)) * 10px));
}
.corridor-arrive span {
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .24em; text-transform: uppercase; color: var(--graphite);
}

/* ── line of sight: each call, seen and then arrived ───────────────── */
.stop-q { font-style: italic; }
.stop-q::before { content: "“"; } .stop-q::after { content: "”"; }
.stop-arc {
  display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
  margin: 0 0 16px; font-family: var(--font-mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ash);
}
.stop-arc span:last-child { color: #FFFFFF; }
.stop-arc i {
  position: relative; display: block; width: 54px; height: 1px;
  background: linear-gradient(90deg, rgba(236,235,229,.18), #FFFFFF);
}
.stop-arc i::after {
  content: ""; position: absolute; right: -3px; top: -3px; width: 7px; height: 7px; border-radius: 50%;
  background: #FFFFFF; box-shadow: 0 0 10px rgba(220,226,255,.9);
}
/* open calls: the line is dotted and the point is a ring — not there yet */
.stop--open .stop-arc i { background: repeating-linear-gradient(90deg, rgba(236,235,229,.55) 0 3px, transparent 3px 7px); }
.stop--open .stop-arc i::after { background: transparent; border: 1px solid #FFFFFF; box-shadow: 0 0 12px rgba(220,226,255,.5); }
.stop--open .stop-k { color: var(--ink); }
html:not(.tw-voyage) .stop-arc { justify-content: flex-start; }
.hud-lead {
  font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--graphite);
  margin-top: 6px; opacity: 0; transition: opacity .4s var(--ease);
}
.hud-lead.is-on { opacity: 1; }
.corridor-note {
  max-width: 640px; margin: 48px auto 0; font-family: var(--font-mono); font-size: .64rem; letter-spacing: .1em; color: var(--ash);
}
html.tw-voyage .corridor-note {
  position: absolute; z-index: 1300; left: 50%; bottom: clamp(18px, 4vh, 34px); translate: -50% 0; margin: 0;
  width: max-content; max-width: 60vw; text-align: center; opacity: .8;
}
@media (max-width: 860px) {
  html.tw-voyage .corridor-note { bottom: clamp(56px, 9vh, 80px); max-width: 84vw; width: auto; }
  .stop-arc { font-size: .6rem; gap: 8px; }
  .stop-arc i { width: 30px; }
}

/* the factsheet folds into the mandate: four figures on one keyline */
.scene-facts {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: clamp(26px, 4vh, 40px) 0 0;
  border-top: 1px solid var(--hairline);
}
.scene-facts > div { padding: 16px 18px 0 0; }
.scene-facts > div + div { padding-left: 18px; border-left: 1px solid var(--hairline); }
.scene-facts dd { margin: 6px 0 0; font-size: clamp(1rem, 1.35vw, 1.22rem); }
@media (max-width: 860px) {
  .scene-facts { grid-template-columns: 1fr 1fr; row-gap: 18px; }
  .scene-facts > div:nth-child(3) { padding-left: 0; border-left: 0; }
}

html.tw-voyage .corridor-skip { z-index: 1300; bottom: clamp(18px, 4vh, 34px); }

@media (max-width: 860px) {
  html.tw-voyage .corridor-scale { right: 12px; }
  .corridor-scale .tick em { display: none; }
  html.tw-voyage .corridor-hud { top: 78px; }
  html.tw-voyage .stop { width: min(520px, 86vw); }
  html.tw-voyage .stop-y { font-size: clamp(6rem, 30vw, 9rem); }
}

html[data-theme="light"] .corridor { background: #06060A; }

/* ══ the whole page is the voyage ═════════════════════════════════
   Below the corridor the page doesn't go back to a flat background:
   space keeps moving behind it (the deep field), sections arrive out
   of the distance, and the last screen is the hero's own ranges at dawn. */

body[data-page="home"] { background: #0A0A0E; }
html.has-deep body[data-page="home"] .cosmos { display: none; }
.deepfield {
  position: fixed; inset: 0; z-index: -1; width: 100vw; height: 100vh;
  pointer-events: none; display: block;
  /* the stars keep to the margins; the reading column stays calm */
  -webkit-mask-image: radial-gradient(ellipse 44% 62% at 50% 46%, rgba(0,0,0,.1), rgba(0,0,0,.35) 60%, #000 100%);
          mask-image: radial-gradient(ellipse 44% 62% at 50% 46%, rgba(0,0,0,.1), rgba(0,0,0,.35) 60%, #000 100%);
}
html[data-theme="light"] .deepfield { display: none; }
@media (max-width: 860px) {
  .deepfield { -webkit-mask-image: linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.45)); mask-image: linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.45)); }
}

/* the register's dates set in the board's mono, fixed-width, so the flip doesn't jostle */
body[data-page="home"] .index-meta, body[data-page="home"] .stat-v { font-variant-numeric: tabular-nums; }

/* ── the arrival: dawn over the ranges ─────────────────────────────
   --dawn runs 0 → 1 as the section fills the screen (voyage.js). The
   light comes up behind the far range; a small hard sun clears the
   ridge; faint rays turn above it. The words stand in the upper sky. */
.arrival {
  --dawn: 0;
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100vh; min-height: 100svh;
  display: flex; align-items: flex-start;
  color: var(--ink);
  /* the arrival is a sky in either theme */
  --paper: #15151A; --white: #1E1E25; --hairline: #2F2F37; --hairline-2: #45454F;
  --ink: #ECEBE5; --graphite: #C6C6CC; --slate: #B4B4BB; --ash: #8E8E97;
}
.arrival-sky {
  position: absolute; inset: 0; z-index: -1; overflow: hidden; container-type: size;
  --horizon: 80%; --rh: max(16.4cqw, 150px);
  background:
    radial-gradient(70% 46% at 50% var(--horizon), rgba(236,238,246, calc(.08 + var(--dawn) * .42)), rgba(170,176,196, calc(var(--dawn) * .16)) 45%, transparent 75%),
    linear-gradient(to bottom, #0A0A0E 0%, color-mix(in srgb, #2A2C36 calc(var(--dawn) * 100%), #0A0A0E) 62%, color-mix(in srgb, #8E93A6 calc(var(--dawn) * 100%), #14151B) var(--horizon));
}
.arrival-sun {
  position: absolute; left: 50%; width: 9cqw; min-width: 64px; aspect-ratio: 1; border-radius: 50%;
  /* it clears the far ridge, no more: a sunrise, not a noon */
  top: calc(var(--horizon) - var(--rh) * .42 + 5cqh - var(--dawn) * 7cqh);
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, #FFFFFF 0 20%, rgba(240,243,252,.7) 27%, rgba(222,228,246,.22) 44%, rgba(222,228,246,.06) 58%, transparent 70%);
  opacity: calc(var(--dawn) * 1.2 - .1);
}
.arrival-rays {
  position: absolute; left: 50%; width: 220cqw; aspect-ratio: 1;
  top: calc(var(--horizon) - var(--rh) * .42 + 5cqh - var(--dawn) * 7cqh);
  transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from 0deg, rgba(236,238,246,.055) 0deg 1.2deg, transparent 1.2deg 9deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 4%, rgba(0,0,0,.35) 30%, transparent 60%);
          mask-image: radial-gradient(closest-side, #000 4%, rgba(0,0,0,.35) 30%, transparent 60%);
  opacity: var(--dawn);
}
@media (prefers-reduced-motion: no-preference) {
  .arrival-rays { animation: rays-turn 240s linear infinite; }
}
@keyframes rays-turn { to { rotate: 360deg; } }
/* the ground under the near range hands over to the footer */
.arrival-sky::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  top: calc(var(--horizon) + var(--rh) * .38 - 1px);
  background: linear-gradient(to bottom, #070709, var(--paper));
}
.arrival .ridge { animation: none; }
.arrival .ridge--far { opacity: .95; }

.arrival-copy {
  position: relative; text-align: center;
  padding-top: clamp(110px, 17vh, 190px);
  display: flex; flex-direction: column; align-items: center;
}
.arrival-copy .eyebrow { justify-content: center; }
.arrival-copy .display { font-size: clamp(2.8rem, 6.6vw, 6.4rem); line-height: .98; letter-spacing: -.028em; }
.arrival-copy .lede { max-width: 52ch; margin: 26px auto 0; color: #D2D2D8; text-wrap: balance; }
.arrival-cta { margin-top: 34px; }

@media (max-aspect-ratio: 19/20) {
  .arrival-sky { --horizon: 84%; --rh: max(16.4cqw, 150px); }
  .arrival-sun { width: 22cqw; }
}

/* the footer stands on the ground, not on a new night */
body[data-page="home"] .arrival + * { margin-top: 0; }

/* ══ scenes: every section is a station ═══════════════════════════
   html.has-scenes (voyage.js) turns each [data-scene] into a tall
   section with a pinned screen. Without it — no script, reduced
   motion, or content taller than a screen (.is-flow) — they read as
   ordinary sections. */

.scene { position: relative; color: var(--ink); }
.scene-pin { position: relative; padding-block: clamp(72px, 9vw, 120px); }
.scene-num {
  position: absolute; right: 4vw; top: 50%; z-index: -1; pointer-events: none;
  transform: translateY(-50%);
  font-family: var(--font-display); font-weight: 400; line-height: .8; letter-spacing: -.05em;
  font-size: clamp(14rem, 34vw, 30rem);
  color: transparent; -webkit-text-stroke: 1px rgba(236,235,229,.12);
}
.scene-body, .scene-head { position: relative; }
.scene-h { font-size: clamp(2.6rem, 5.4vw, 5.2rem); line-height: 1; letter-spacing: -.026em; max-width: 16ch; margin: 0 0 clamp(26px, 3vw, 44px); }
.scene-h2 { font-size: clamp(2.2rem, 4.2vw, 3.8rem); line-height: 1.02; letter-spacing: -.022em; margin-bottom: .35em; }
.scene-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(22px, 3.6vw, 56px); max-width: 980px; }
.scene-split .body { font-size: clamp(1rem, 1.15vw, 1.12rem); color: #C4C4CB; }
.scene-cta { margin-top: clamp(26px, 3vw, 40px); }
.scene .lede { max-width: 60ch; }
@media (max-width: 760px) { .scene-split { grid-template-columns: 1fr; } }

/* ── pinned ────────────────────────────────────────────────────── */
html.has-scenes .scene:not(.is-flow) { height: calc(var(--len, 240) * 1vh); }
html.has-scenes .scene:not(.is-flow) > .scene-pin {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  padding: 0; display: flex; flex-direction: column; justify-content: center;
}
html.has-scenes .scene:not(.is-flow) [data-d] { will-change: transform, opacity; transform-origin: 50% 50%; }
html.has-scenes .scene:not(.is-flow) [data-d]:not([data-far]) { opacity: 0; }
html.has-scenes .scene:not(.is-flow) .scene-body [data-d] { transform-origin: 0 50%; }

/* ── the chronograph ───────────────────────────────────────────── */
.dial { display: none; }
.dial-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0 auto; width: min(100%, var(--maxw)); padding-inline: var(--pad-x); }
.dstat { margin: 0; padding: 22px 18px; border-left: 1px solid var(--hairline); }
.dstat dd { margin: 0; }
@media (max-width: 760px) { .dial-stats { grid-template-columns: 1fr 1fr; } }

html.has-scenes .scene--dial:not(.is-flow) .scene-pin { align-items: center; }
html.has-scenes .scene--dial:not(.is-flow) .dial {
  --D: min(64vmin, 560px);
  display: block; position: relative; width: var(--D); height: var(--D); border-radius: 50%;
  background:
    radial-gradient(circle, rgba(16,16,22,.2) 0 55%, rgba(16,16,22,.75) 70%, rgba(10,10,14,.9) 100%);
  box-shadow: inset 0 0 0 1px var(--hairline-2), 0 0 120px rgba(210,216,240,.06);
}
/* sixty minute marks, every fifth one long */
.dial-ticks {
  position: absolute; inset: 4%; border-radius: 50%;
  background:
    repeating-conic-gradient(from -.4deg, rgba(236,235,229,.62) 0 .8deg, transparent .8deg 30deg),
    repeating-conic-gradient(from -.2deg, rgba(236,235,229,.24) 0 .4deg, transparent .4deg 6deg);
  -webkit-mask: radial-gradient(circle, transparent 0 calc(50% - 16px), #000 calc(50% - 15px) calc(50% - 1px), transparent 50%);
          mask: radial-gradient(circle, transparent 0 calc(50% - 16px), #000 calc(50% - 15px) calc(50% - 1px), transparent 50%);
}
/* the swept arc: where the hand has been, the dial is lit */
.dial-ring {
  position: absolute; inset: 14%; border-radius: 50%;
  background: conic-gradient(rgba(226,230,245,.09) var(--sweep, 0deg), transparent 0);
  -webkit-mask: radial-gradient(circle, transparent 0 calc(50% - 2px), #000 calc(50% - 1px));
          mask: radial-gradient(circle, transparent 0 calc(50% - 2px), #000 calc(50% - 1px));
  box-shadow: inset 0 0 0 1px rgba(236,235,229,.08);
}
.scene--dial .dial::after {
  content: ""; position: absolute; inset: 14%; border-radius: 50%;
  background: conic-gradient(rgba(226,230,245,.03) var(--sweep, 0deg), transparent 0);
}
.dial-hand {
  position: absolute; left: 50%; top: 6%; width: 2px; height: 44%; margin-left: -1px;
  background: linear-gradient(to top, rgba(255,255,255,.3), #FFFFFF);
  transform-origin: 50% 100%;
  box-shadow: 0 0 14px rgba(220,226,255,.8);
  border-radius: 2px;
}
.dial-hand::after {   /* the counterweight */
  content: ""; position: absolute; left: 50%; bottom: -26px; width: 2px; height: 26px; margin-left: -1px; background: rgba(255,255,255,.45);
}
.dial-mark {
  position: absolute; left: 50%; top: 50%; width: 26%; height: auto; transform: translate(-50%, -50%);
  opacity: .9; filter: drop-shadow(0 0 18px rgba(220,226,255,.2));
}
.scene--dial .dial::before {  /* the arbor */
  content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px; border-radius: 50%;
  background: #FFFFFF; z-index: 2; box-shadow: 0 0 10px rgba(220,226,255,.9);
}
/* the figures stand at the four diagonals, reading outward */
html.has-scenes .scene--dial:not(.is-flow) .dial-stats {
  display: block; position: absolute; inset: 0; width: auto; padding: 0; pointer-events: none;
  --D: min(64vmin, 560px);
}
html.has-scenes .scene--dial:not(.is-flow) .dstat {
  position: absolute; width: min(250px, 24vw); padding: 0; border: 0;
  opacity: 0; transform-origin: 50% 50%;
  --lit: 0;
}
html.has-scenes .scene--dial:not(.is-flow) .dstat .stat-k { color: color-mix(in srgb, var(--ink) calc(var(--lit) * 100%), var(--ash)); }
html.has-scenes .scene--dial:not(.is-flow) .dstat .stat-v {
  font-size: clamp(1.2rem, 1.9vw, 1.75rem);
  color: color-mix(in srgb, #FFFFFF calc(var(--lit) * 100%), #5E5E68);
  text-shadow: 0 0 calc(var(--lit) * 26px) rgba(220,226,255, calc(var(--lit) * .35));
}
html.has-scenes .scene--dial:not(.is-flow) .dstat::before {  /* leader toward the dial */
  content: ""; display: block; height: 1px; width: 64px; margin-bottom: 14px;
  background: linear-gradient(90deg, rgba(236,235,229, calc(.2 + var(--lit) * .7)), transparent);
}
.dstat[data-q="0"] { left: calc(50% + var(--D) * .42); top: calc(50% - var(--D) * .46); }
.dstat[data-q="1"] { left: calc(50% + var(--D) * .42); top: calc(50% + var(--D) * .3); }
.dstat[data-q="2"] { right: calc(50% + var(--D) * .42); top: calc(50% + var(--D) * .3); text-align: right; }
.dstat[data-q="3"] { right: calc(50% + var(--D) * .42); top: calc(50% - var(--D) * .46); text-align: right; }
.dstat[data-q="2"]::before, .dstat[data-q="3"]::before { margin-left: auto; transform: scaleX(-1); }
@media (max-width: 860px) {
  html.has-scenes .scene--dial:not(.is-flow) .dial,
  html.has-scenes .scene--dial:not(.is-flow) .dial-stats { --D: min(76vw, 52vh); }
  html.has-scenes .scene--dial:not(.is-flow) .dial { margin-top: -16vh; }
  html.has-scenes .scene--dial:not(.is-flow) .dstat { width: 42vw; }
  .dstat[data-q="0"], .dstat[data-q="3"] { top: auto; bottom: 21vh; }
  .dstat[data-q="1"], .dstat[data-q="2"] { top: auto; bottom: 7vh; }
  .dstat[data-q="0"], .dstat[data-q="1"] { left: 52%; }
  .dstat[data-q="3"], .dstat[data-q="2"] { right: 52%; }
  html.has-scenes .scene--dial:not(.is-flow) .dstat .stat-v { font-size: 1.08rem; }
  html.has-scenes .scene--dial:not(.is-flow) .dstat::before { width: 40px; margin-bottom: 10px; }
}

/* ── the time wheel ────────────────────────────────────────────── */
.wheel-ring { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; width: min(100%, var(--maxw)); margin: 30px auto 0; padding-inline: var(--pad-x); }
@media (max-width: 1180px) { .wheel-ring { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .wheel-ring { grid-template-columns: 1fr; } }
.wheel-foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 26px; }
.wheel-count { display: none; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .2em; color: var(--ash); }
.wheel-count b { font-weight: 400; color: #FFFFFF; }

html.has-scenes .scene--wheel:not(.is-flow) .scene-head { text-align: center; }
html.has-scenes .scene--wheel:not(.is-flow) .scene-head .eyebrow { justify-content: center; }
html.has-scenes .scene--wheel:not(.is-flow) .scene-head .lede { margin-inline: auto; font-size: clamp(1rem, 1.2vw, 1.12rem); }
html.has-scenes .scene--wheel:not(.is-flow) .wheel {
  perspective: 1500px; perspective-origin: 50% 40%;
  height: clamp(300px, 40vh, 380px); margin-top: clamp(14px, 3vh, 34px);
}
html.has-scenes .scene--wheel:not(.is-flow) .wheel-ring {
  display: block; position: relative; width: min(360px, 80vw); height: 100%; margin: 0 auto; padding: 0;
  transform-style: preserve-3d;
}
html.has-scenes .scene--wheel:not(.is-flow) .wheel-card {
  position: absolute; inset: 0; margin: 0;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  background: color-mix(in srgb, #1B1B22 90%, transparent);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border-color: var(--hairline-2);
  transition: border-color .4s var(--ease), box-shadow .4s var(--ease);
}
html.has-scenes .scene--wheel:not(.is-flow) .wheel-card.is-front {
  border-color: rgba(236,235,229,.42);
  box-shadow: 0 0 0 1px rgba(236,235,229,.06), 0 30px 80px -30px rgba(200,208,235,.25);
}
html.has-scenes .scene--wheel:not(.is-flow) .wheel-card .h3 { font-size: clamp(1.4rem, 2vw, 1.8rem); }
html.has-scenes .scene--wheel:not(.is-flow) .wheel-foot { justify-content: center; flex-direction: column; gap: 16px; margin-top: clamp(18px, 3.4vh, 36px); }
html.has-scenes .scene--wheel:not(.is-flow) .wheel-count { display: block; }
@media (max-width: 860px) {
  html.has-scenes .scene--wheel:not(.is-flow) .scene-head .lede { display: none; }
  html.has-scenes .scene--wheel:not(.is-flow) .wheel { height: clamp(330px, 46vh, 400px); }
}

/* ── the departure board ───────────────────────────────────────── */
html.has-scenes .scene--board:not(.is-flow) .index { border-top-color: var(--hairline-2); margin-top: clamp(18px, 3vh, 34px); }
html.has-scenes .scene--board:not(.is-flow) .index-row { background: color-mix(in srgb, #0E0E13 55%, transparent); }
html.has-scenes .scene--board:not(.is-flow) .scene-body .index-row { transform-origin: 50% 50%; }
html.has-scenes .scene--board:not(.is-flow) .lede { font-size: clamp(1rem, 1.2vw, 1.12rem); }
@media (max-height: 820px) and (min-width: 861px) {
  html.has-scenes .scene--board:not(.is-flow) .lede { display: none; }
}

@media (max-width: 860px) {
  .scene-num { font-size: 16rem; right: -4vw; top: 28%; }
}

/* phones: the board keeps its rows and drops the lede; the wheel card hugs its words */
@media (max-width: 860px) {
  html.has-scenes .scene--board:not(.is-flow) .lede { display: none; }
  html.has-scenes .scene--board:not(.is-flow) .index-row { padding-block: 14px; }
  html.has-scenes .scene--board:not(.is-flow) .scene-h2 { font-size: 2.1rem; }
  html.has-scenes .scene--wheel:not(.is-flow) .wheel { height: clamp(270px, 38vh, 330px); }
}

/* ── stations: a quiet index on the right edge ───────────────────
   Ticks at rest; the current one is long and white, its name shown.
   Hovering the rail shows every name. Hidden in the hero and corridor. */
.stations {
  position: fixed; right: clamp(12px, 2vw, 28px); top: 50%; z-index: 45;
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
  transform: translate(8px, -50%); opacity: 0; pointer-events: none;
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
.stations.is-on { opacity: 1; transform: translate(0, -50%); pointer-events: auto; }
.stations a {
  display: flex; align-items: center; gap: 12px; padding: 7px 0 7px 14px;
  font-family: var(--font-mono); font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ash);
}
.stations a span { opacity: 0; transform: translateX(6px); transition: opacity .35s var(--ease-out), transform .35s var(--ease-out), color .3s var(--ease); white-space: nowrap; }
.stations a i { display: block; width: 12px; height: 1px; background: var(--ash); transition: width .45s var(--ease-out), background .3s var(--ease), box-shadow .3s var(--ease); }
.stations:hover a span, .stations a:focus-visible span, .stations a[aria-current] span { opacity: 1; transform: none; }
.stations a[aria-current] { color: var(--ink); }
.stations a[aria-current] i { width: 30px; background: #FFFFFF; box-shadow: 0 0 8px rgba(220,226,255,.7); }
.stations a:hover { color: var(--ink); }
.stations a:hover i { width: 22px; background: var(--graphite); }
@media (max-width: 860px) {
  .stations { right: 6px; gap: 0; }
  .stations a { padding: 6px 0 6px 10px; }
  .stations a span { display: none; }
  .stations a i { width: 8px; }
  .stations a[aria-current] i { width: 16px; }
}
html[data-theme="light"] .stations a[aria-current] i { background: var(--ink); box-shadow: none; }

/* ══ the visual layer ═════════════════════════════════════════════
   Line work only, one weight, platinum on night: the charts under each
   call, the source glyphs, the segment marks, the process as a diagram. */

/* source glyphs on a stop's label */
.ic { display: inline-block; width: 13px; height: 13px; margin: 0 .7em 0 0; vertical-align: -2px; color: var(--ink); }
html.tw-voyage .stop-k::before { display: none; }

/* the chart under each call: seen → arrived, drawn in when the stop comes to you */
.stop-chart { margin: 6px auto 16px; width: min(460px, 100%); color: #E6E9F4; }
.sc { display: block; width: 100%; height: auto; overflow: visible; }
.sc-base { stroke: rgba(236,235,229,.14); stroke-width: 1; }
.sc-line { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.sc-area { opacity: .9; }
.sc-band { fill: rgba(236,235,229,.06); stroke: rgba(236,235,229,.3); stroke-width: .8; stroke-dasharray: 2 3; }
.sc-level { stroke: rgba(236,235,229,.5); stroke-width: .9; stroke-dasharray: 3 4; }
.sc-dl { fill: #06060A; stroke: #FFFFFF; stroke-width: 1; }
.sc-future { fill: rgba(236,235,229,.025); }
.sc-today { stroke: rgba(236,235,229,.35); stroke-width: .8; stroke-dasharray: 1 3; }
.sc-seen-l { stroke: rgba(236,235,229,.3); stroke-width: .8; stroke-dasharray: 2 3; }
.sc-seen { fill: #06060A; stroke: #FFFFFF; stroke-width: 1.4; }
.sc-hit { fill: #FFFFFF; }
.sc-now { fill: #06060A; stroke: #FFFFFF; stroke-width: 1.4; }
.sc-now-p { fill: none; stroke: rgba(255,255,255,.35); stroke-width: 1; transform-box: fill-box; transform-origin: center; scale: 2.2; }
.sc-t { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .06em; fill: #9A9AA1; }
.sc-t--hi { fill: #FFFFFF; }
.sc-t--dim { fill: #6E6E77; }
.sc-t--asset { fill: #C6C6CC; font-weight: 500; letter-spacing: .16em; }
@media (prefers-reduced-motion: no-preference) {
  html.tw-voyage .sc-line { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.9s cubic-bezier(.45,.05,.2,1); }
  html.tw-voyage .sc-area, html.tw-voyage .sc-hit, html.tw-voyage .sc-now, html.tw-voyage .sc-t--hi, html.tw-voyage .sc-dl { opacity: 0; transition: opacity .7s var(--ease-out) 1.3s; }
  html.tw-voyage .stop.is-drawn .sc-line { stroke-dashoffset: 0; }
  html.tw-voyage .stop.is-drawn .sc-area { opacity: .9; }
  html.tw-voyage .stop.is-drawn .sc-hit, html.tw-voyage .stop.is-drawn .sc-now,
  html.tw-voyage .stop.is-drawn .sc-t--hi, html.tw-voyage .stop.is-drawn .sc-dl { opacity: 1; }
}
@media (max-height: 760px) and (min-width: 861px) { .stop-chart { width: min(380px, 100%); margin-bottom: 10px; } }
@media (max-width: 860px) { .stop-chart { margin: 2px auto 12px; } .sc-t { font-size: 11px; } }

/* conviction: each segment carries its mark */
.seg-ic { display: block; width: 46px; height: 46px; margin: 0 0 18px; color: var(--ink); opacity: .92; }
.wheel-card.is-front .seg-ic { filter: drop-shadow(0 0 10px rgba(220,226,255,.3)); }

/* facts: a glyph over each figure */
.fact-ic { display: block; width: 20px; height: 20px; margin: 0 0 12px; color: var(--graphite); }

/* the mandate's process, as a diagram: four steps on one rail */
.flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; position: relative; }
.flow-step {
  position: relative; display: grid; grid-template-columns: 34px 1fr; column-gap: 16px; align-items: center;
  padding: 0 0 16px;
}
.flow-step:last-child { padding-bottom: 0; }
.flow-step::before {
  content: ""; position: absolute; left: 17px; top: 36px; bottom: 2px; width: 1px;
  background: linear-gradient(rgba(236,235,229,.45), rgba(236,235,229,.08));
}
.flow-step:last-child::before { display: none; }
.flow-ic {
  grid-row: span 2; width: 34px; height: 34px; padding: 6px; box-sizing: border-box;
  border: 1px solid rgba(236,235,229,.22); border-radius: 50%; color: var(--ink);
  background: #0B0B10;
}
.flow-step:last-child .flow-ic { border-color: rgba(236,235,229,.6); box-shadow: 0 0 16px rgba(220,226,255,.18); }
.flow-n { display: none; }
.flow-step b { font-family: var(--font-display); font-weight: 400; font-size: 1.14rem; color: var(--ink); line-height: 1.2; }
.flow-d { font-size: .86rem; color: var(--slate); line-height: 1.4; }

/* the board: the kind of note, at a glance */
.row-ic { display: inline-block; width: 14px; height: 14px; margin-right: .8em; vertical-align: -2px; color: var(--graphite); }
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ══ the phone ════════════════════════════════════════════════════
   Held in one hand, the voyage is a column: every screen composed to
   fit the glass, the words low under the sky, the controls under a
   thumb. Nothing is dropped; it is only set closer. */
@media (max-width: 560px) {
  /* hero: the eye high, the words standing on the ground, one screen */
  .hero--cine.hero { padding-top: clamp(120px, 34svh, 300px); padding-bottom: 22px; }
  .hero--cine .hero-tag { margin-bottom: 16px; font-size: .64rem; }
  .hero--cine .display { font-size: clamp(2.55rem, 12.4vw, 3.5rem); }
  .hero--cine .lede { margin-top: 16px !important; font-size: 1rem; line-height: 1.5; max-width: 34ch; color: #D2D2D8; }
  .hero-cta { display: flex; gap: 10px; margin-top: 22px !important; }
  .hero-cta .btn { flex: 1 1 0; width: auto; margin: 0; padding: 1em .8em; }
  .hero-cta .btn + .btn { margin-top: 0; }
  /* the proof: one slim plate, seen above arrived */
  .hero-proof {
    display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 6px 14px;
    width: 100%; margin-top: 14px; padding: 12px 14px;
  }
  .hero-proof .hp-a { grid-column: 1 / -1; }
  .hero-proof .hp-b { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; padding-top: 8px; }
  .hero-proof q { font-size: .98rem; }
  .hero-proof small { font-size: .56rem; letter-spacing: .16em; }
  .travel { display: flex; width: max-content; margin: 14px 0 0 auto; padding: .7em 0; }
  .travel[hidden] { display: none; }

  /* corridor: the instruments fold into one line across the top */
  html.tw-voyage .corridor-hud {
    top: 22px; left: 20px; right: 20px;
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px;
  }
  html.tw-voyage .corridor-hud .hud-k { display: none; }
  html.tw-voyage .hud-v { font-size: 1.15rem; }
  html.tw-voyage .hud-lead { flex-basis: 100%; margin: 0; }
  html.tw-voyage .corridor-scale { top: 16vh; bottom: 16vh; right: 8px; }
  html.tw-voyage .stop { top: 51%; width: calc(100vw - 40px); }
  html.tw-voyage .stop-y { font-size: 34vw; -webkit-text-stroke-color: rgba(236,235,229,.14); }
  .stop-k { font-size: .64rem; margin-bottom: 10px; }
  .stop-h { font-size: 1.5rem; line-height: 1.14; margin-bottom: 10px; }
  .stop--title .stop-h { font-size: 2.4rem; line-height: 1.02; }
  .stop-p { font-size: .94rem; line-height: 1.55; }
  .stop-arc { margin-bottom: 10px; }
  .stop-chart { width: 100%; }
  html.tw-voyage .corridor-note { bottom: 70px; font-size: .58rem; line-height: 1.6; max-width: calc(100vw - 48px); }
  html.tw-voyage .corridor-skip { bottom: 24px; right: 20px; font-size: .62rem; }
  .corridor-arrive p { font-size: 3.4rem; }

  /* stations: set closer, so each one fits the glass and pins */
  .scene-num { font-size: 12rem; right: -6vw; top: 22%; }
  .scene .eyebrow { margin-bottom: 1em; }
  .scene-h { font-size: 2.35rem; margin-bottom: 18px; }
  .scene-h2 { font-size: 2rem; }
  .scene-split { gap: 18px; }
  .scene-split .body { font-size: .95rem; line-height: 1.58; }
  .flow { grid-template-columns: 1fr 1fr; gap: 14px 12px; }
  .flow-step { grid-template-columns: 28px 1fr; column-gap: 10px; align-items: start; padding: 0; }
  .flow-step::before { display: none; }
  .flow-ic { width: 28px; height: 28px; padding: 5px; }
  .flow-step b { font-size: .98rem; }
  .flow-d { font-size: .76rem; line-height: 1.35; }
  .scene-facts { margin-top: 20px; row-gap: 14px; }
  .scene-facts > div { padding: 12px 10px 0 0; }
  .scene-facts > div + div { padding-left: 12px; }
  .scene-facts > div:nth-child(3) { padding-left: 0; }
  .scene-facts .fact-ic { width: 16px; height: 16px; margin-bottom: 8px; }
  .scene-facts dd { font-size: 1rem; }
  /* section calls to action sit side by side, not as full-width slabs */
  .scene-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
  .scene-cta .btn, .wheel-foot .btn { flex: 0 1 auto; width: auto; padding: .95em 1.1em; }
  .scene-cta .btn + .btn { margin-top: 0; }
  html.has-scenes .scene--wheel:not(.is-flow) .wheel-card { padding: 22px 20px; }
  html.has-scenes .scene--wheel:not(.is-flow) .wheel-card .body { font-size: .92rem; }
  .seg-ic { width: 38px; height: 38px; margin-bottom: 12px; }
  html.has-scenes .scene--board:not(.is-flow) .index-row { padding: 12px 4px; row-gap: 5px; }
  .scene--board .index-title { font-size: 1rem; }
  /* the rail would crowd the reading column: the eyepiece carries the map */
  .stations { display: none; }

  /* dawn: the words in the upper sky, the door under a thumb */
  .arrival-copy { padding-top: clamp(90px, 15svh, 140px); }
  .arrival-copy .display { font-size: clamp(2.6rem, 12vw, 3.4rem); }
  .arrival-copy .lede { font-size: 1rem; margin-top: 18px; }
  .arrival-cta { margin-top: 26px; width: 100%; }
  .doors a, .doors a + a { padding-block: 14px; }
  .doors-v { font-size: 1rem; }
}
/* short phones (and phones on their side): trim the air before the words */
@media (max-width: 560px) and (max-height: 700px) {
  .hero--cine.hero { padding-top: clamp(96px, 26svh, 200px); }
  .hero--cine .lede { font-size: .95rem; }
  .scene-split .body { font-size: .9rem; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .hero--cine .hero-proof, .travel { display: none; }
  html.tw-voyage .stop-chart { width: min(300px, 100%); margin-bottom: 6px; }
  html.tw-voyage .corridor-note { display: none; }
}