/* ============================================================
   DATUM — altitude ledger
   Tokens first. Theme by overriding these eight values.
   ============================================================ */
:root{
  --canvas:#06080B;
  --surface:#0D1116;
  --ink:#F4F1EA;
  --ink-soft:#8E9AA5;
  --ink-faint:#6B7883;
  --accent:#E0A63C;          /* brass: above the datum */
  --accent-deep:#4FC3D9;     /* glacial cyan: below the datum */
  --accent-ink:#14100A;
  --rule:rgba(244,241,234,.14);

  --font-display:"Fraunces","Iowan Old Style",Georgia,serif;
  --font-text:"Inter",system-ui,-apple-system,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --gutter:clamp(20px,5vw,72px);
  --rail:clamp(54px,6vw,92px);
  --measure:34ch;
}
/* the single colour change on the page */
html.below-sea{ --accent:var(--accent-deep); --accent-ink:#04171C; }
html{ scroll-behavior:smooth; }
html.is-scrolling{ scroll-behavior:auto; }

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:var(--canvas); color:var(--ink);
  font-family:var(--font-text); font-size:clamp(15px,1.05vw,17px); line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; }
::selection{ background:var(--accent); color:var(--accent-ink); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

.u-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip{ position:fixed; top:10px; left:10px; z-index:200; padding:10px 16px; background:var(--accent);
  color:var(--accent-ink); font:600 13px/1 var(--font-text); border-radius:2px; transform:translateY(-200%); }
.skip:focus{ transform:none; }

/* ---------- type ---------- */
.display{
  font-family:var(--font-display); font-weight:400; font-optical-sizing:auto;
  font-variation-settings:"SOFT" 0,"WONK" 0; letter-spacing:-.022em; line-height:.98;
  text-wrap:balance; margin:0;
}
h1.display{ font-size:clamp(34px,4.5vw,68px); letter-spacing:-.028em; }
.hero h1{ max-width:13ch; }
h2.display{ font-size:clamp(34px,5.4vw,82px); }
h3.display{ font-size:clamp(22px,2.4vw,34px); line-height:1.08; }
.lede{ font-size:clamp(17px,1.5vw,22px); line-height:1.5; color:var(--ink); max-width:var(--measure); margin:0; }
.body{ color:var(--ink-soft); max-width:var(--measure); margin:0; }
.body + .body{ margin-top:1.1em; }
.tag{
  font:500 clamp(10px,.78vw,12px)/1 var(--font-mono); letter-spacing:.22em; text-transform:uppercase;
  color:var(--accent); margin:0;
}
.tag--soft{ color:var(--ink-soft); }
.ph{ color:var(--ink-faint); font-family:var(--font-mono); font-size:.85em; }

/* ---------- masthead ---------- */
.mast{
  position:fixed; inset:0 var(--rail) auto 0; z-index:90;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:clamp(16px,2.2vh,26px) var(--gutter);
  pointer-events:none;
}
.mast::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:-1;
  background:linear-gradient(180deg,rgba(4,6,9,.72),rgba(4,6,9,.32) 55%,transparent);
}
.mast > *{ pointer-events:auto; }
.wordmark{
  font:400 clamp(16px,1.35vw,21px)/1 var(--font-display); letter-spacing:.30em;
  text-decoration:none; color:#fff; text-indent:.30em;
}
.mast__right{ display:flex; align-items:center; gap:clamp(14px,2vw,30px); }
.mast__note{ font:400 11px/1 var(--font-mono); letter-spacing:.14em; color:#fff; text-transform:uppercase; opacity:.7; }
@media (max-width:720px){ .mast__note{ display:none; } }

.btn{
  display:inline-flex; align-items:center; gap:.65em; padding:.85em 1.5em;
  font:500 12px/1 var(--font-mono); letter-spacing:.16em; text-transform:uppercase;
  text-decoration:none; border:1px solid currentColor; border-radius:999px; color:#fff;
  min-height:44px; transition:background .3s,color .3s;
}
.btn:hover{ background:#fff; color:#000; }
.btn--solid{
  background:var(--accent); color:var(--accent-ink); border-color:var(--accent);
  transition:background .3s,border-color .3s,transform .3s,color .3s;
}
.btn--solid:hover{ background:#fff; border-color:#fff; color:#000; transform:translateY(-2px); }

/* ============================================================
   THE ALTIMETER  (navigation)
   ============================================================ */
.alt{
  position:fixed; top:0; right:0; bottom:0; width:var(--rail); z-index:95;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  border-left:1px solid var(--rule); background:linear-gradient(90deg,transparent,rgba(6,8,11,.55));
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
}
.alt__track{ position:absolute; inset:clamp(70px,12vh,130px) 0 clamp(70px,12vh,130px); }
.alt__line{ position:absolute; left:50%; top:0; bottom:0; width:1px; background:var(--rule); }
.alt__sea{ position:absolute; left:12%; right:12%; top:var(--at,80%); height:1px; background:var(--accent); opacity:.5; }
.alt__sea::after{
  content:"0"; position:absolute; right:calc(100% + 6px); top:-.62em;
  font:500 9px/1 var(--font-mono); color:var(--accent);
}
.alt__stop{
  position:absolute; left:50%; top:var(--at,0%); width:9px; height:1px; background:var(--ink-faint);
  transform:translateX(-50%); transition:background .4s,width .4s;
}
.alt__stop.is-live{ background:var(--accent); width:19px; }
.alt__needle{ position:absolute; left:0; right:0; top:var(--at,0%); height:0; }
.alt__needle::before{
  content:""; position:absolute; left:50%; top:-1px; width:26px; height:2px;
  background:var(--accent); transform:translateX(-50%); box-shadow:0 0 12px 1px color-mix(in srgb,var(--accent) 60%,transparent);
}
.alt__read{
  position:absolute; right:100%; margin-right:8px; top:50%; transform:translateY(-50%);
  display:flex; align-items:baseline; gap:3px; white-space:nowrap;
  padding:.42em .62em; border-radius:2px; background:rgba(5,8,11,.9);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(244,241,234,.09);
  font:500 clamp(13px,1.15vw,17px)/1 var(--font-mono); color:var(--accent);
  font-variant-numeric:tabular-nums; letter-spacing:-.01em;
}
.alt__read small{ font-size:.6em; letter-spacing:.1em; opacity:.75; }
.alt__caption{
  position:absolute; bottom:clamp(18px,3vh,30px); left:50%; transform:translateX(-50%) rotate(180deg);
  writing-mode:vertical-rl; font:500 9px/1 var(--font-mono); letter-spacing:.28em;
  text-transform:uppercase; color:var(--ink-faint); white-space:nowrap;
}
.alt__jump{
  position:absolute; left:0; top:var(--at,0%); width:100%; height:34px; transform:translateY(-50%);
  background:none; border:0; cursor:pointer; padding:0;
}
@media (max-width:860px){
  :root{ --rail:0px; }
  .alt{ width:auto; left:0; right:0; top:auto; bottom:0; height:44px; flex-direction:row;
    border-left:0; border-top:1px solid var(--rule); background:rgba(6,8,11,.82); }
  .alt__track{ inset:0 clamp(96px,26vw,150px) 0 var(--gutter); }
  .alt__line{ left:0; right:0; top:50%; bottom:auto; width:auto; height:1px; }
  .alt__sea{ left:var(--at,80%); right:auto; top:22%; bottom:22%; width:1px; height:auto; }
  .alt__sea::after{ right:auto; left:4px; top:auto; bottom:-2px; }
  .alt__stop{ left:var(--at,0%); top:50%; width:1px; height:9px; transform:translate(-50%,-50%); }
  .alt__stop.is-live{ height:17px; width:2px; }
  .alt__needle{ top:0; bottom:0; left:var(--at,0%); right:auto; width:0; height:auto; }
  .alt__needle::before{ left:-1px; top:50%; width:2px; height:24px; transform:translateY(-50%); }
  .alt__read{ right:var(--gutter); left:auto; top:50%; margin:0; }
  .alt__caption{ display:none; }
  .alt__jump{ left:var(--at,0%); top:0; width:34px; height:100%; transform:translateX(-50%); }
  .mast{ inset:0 0 auto 0; }
  body{ padding-bottom:44px; }
}

/* ============================================================
   act shell
   ============================================================ */
.act{ position:relative; }
.stage{ position:sticky; top:0; height:100svh; overflow:hidden; }
.plate{ position:absolute; inset:0; overflow:hidden; }
.plate img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.wrap{
  position:relative; height:100%; display:flex;
  padding:clamp(80px,11vh,130px) calc(var(--gutter) + var(--rail)) clamp(66px,10vh,110px) var(--gutter);
}
.grain{
  position:absolute; inset:0; pointer-events:none; opacity:.16; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
.vig{ position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 85% at 50% 42%,transparent 42%,rgba(3,5,7,.72) 100%); }
/* scrim only where text sits, never full-frame */
.scrim-l{ position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(96deg,rgba(4,6,9,.94) 0%,rgba(4,6,9,.86) 26%,rgba(4,6,9,.55) 44%,rgba(4,6,9,.16) 60%,transparent 74%); }
.scrim-b{ position:absolute; inset:auto 0 0 0; height:62%; pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(4,6,9,.88)); }

/* cue reveals */
[data-cue]{ opacity:0; transform:translate3d(0,22px,0); }
[data-cue].is-in{ opacity:1; transform:none;
  transition:opacity .9s cubic-bezier(.22,.61,.36,1),transform .9s cubic-bezier(.22,.61,.36,1); }
[data-cue][data-cue-d="1"].is-in{ transition-delay:.10s; }
[data-cue][data-cue-d="2"].is-in{ transition-delay:.20s; }
[data-cue][data-cue-d="3"].is-in{ transition-delay:.30s; }
[data-cue][data-cue-d="4"].is-in{ transition-delay:.42s; }
[data-cue][data-cue-d="5"].is-in{ transition-delay:.54s; }

/* chapter slug shared by every located act */
.slug{ display:flex; align-items:baseline; gap:.8em; flex-wrap:wrap; }
.slug__alt{ font:500 clamp(13px,1.2vw,17px)/1 var(--font-mono); color:var(--accent); font-variant-numeric:tabular-nums; }
.slug__place{ font:500 11px/1 var(--font-mono); letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft); }
.rule{ height:1px; background:var(--rule); border:0; margin:0; }

/* ============================================================
   ACT 1 — hero, five planes
   ============================================================ */
#hero{ height:230svh; }
.hero__sky{ position:absolute; inset:0;
  background:
    radial-gradient(130% 78% at 62% 74%,rgba(150,186,205,.42) 0%,rgba(60,92,116,.18) 38%,transparent 68%),
    linear-gradient(178deg,#05070A 0%,#0A1220 34%,#152B3C 62%,#2E5568 84%,#4E7C8C 100%); }
.hero__plane{ position:absolute; left:-6%; right:-6%; bottom:0; will-change:transform; }
.hero__plane img{ position:static; width:100%; height:auto; }
/* far range: screen-blended so its haze reads as atmosphere */
.hero__far{ bottom:20%; opacity:.30; mix-blend-mode:screen; filter:blur(1px) saturate(.5); }
.hero__mid{ bottom:4%; opacity:.78; mix-blend-mode:screen; }
/* genuine alpha cutout: the crest band, two figures at real scale */
.hero__subject{ bottom:19%; left:8%; right:auto; width:112%;
  /* left fade hides the crop through the ridge mass, bottom fade hides the crop edge */
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.15) 9%,#000 33%),
                     linear-gradient(180deg,#000 52%,rgba(0,0,0,.5) 80%,transparent 100%);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.15) 9%,#000 33%),
                     linear-gradient(180deg,#000 52%,rgba(0,0,0,.5) 80%,transparent 100%);
          mask-composite:intersect; }
/* genuine alpha cutout: spires that occlude the foot of the headline */
.hero__fore{ bottom:-2%; left:-14%; right:-14%; height:clamp(190px,33svh,330px);
  -webkit-mask-image:linear-gradient(180deg,#000 62%,rgba(0,0,0,.6) 86%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 62%,rgba(0,0,0,.6) 86%,transparent 100%); }
.hero__fore img{ width:100%; height:100%; object-fit:cover; object-position:50% 0%; }
.hero__mist{
  position:absolute; left:-20%; right:-20%; bottom:14%; height:38%; will-change:transform;
  background:linear-gradient(180deg,transparent,rgba(174,200,214,.16) 45%,rgba(174,200,214,.05));
  filter:blur(28px);
}
.hero__wrap{ align-items:flex-end; padding-bottom:clamp(120px,22svh,225px); }
.hero__copy{ position:relative; width:min(100%,44ch); max-width:min(100%,44ch);
  opacity:clamp(0,calc((.82 - var(--p,0)) * 5),1);
  transform:translate3d(0,calc(var(--p,0) * -4vh),0); }
.hero__scrim{ position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(96deg,rgba(4,7,11,.94) 0%,rgba(4,7,11,.84) 24%,rgba(4,7,11,.52) 42%,rgba(4,7,11,.14) 58%,transparent 72%),
    linear-gradient(285deg,rgba(4,7,11,.8) 0%,rgba(4,7,11,.34) 16%,transparent 34%); }
.hero h1{ color:#fff; text-shadow:0 2px 40px rgba(3,8,14,.55); }
.hero h1 em{ font-style:italic; font-variation-settings:"SOFT" 22,"WONK" 1; color:var(--accent); }
.hero__deck{ margin-top:clamp(16px,2.2vh,26px); max-width:34ch; color:#CBD3DA;
  font-size:clamp(14px,1.05vw,17px); line-height:1.55; text-shadow:0 1px 18px rgba(3,7,12,.9); }
.hero__meta{
  position:absolute; right:calc(var(--gutter) + var(--rail)); bottom:clamp(96px,17svh,180px);
  text-align:right; display:grid; gap:.5em; max-width:22ch; z-index:2; isolation:isolate;
  opacity:clamp(0,calc((.82 - var(--p,0)) * 5),1);
}
.hero__meta::before{
  content:""; position:absolute; inset:-54px -70px -54px -96px; z-index:-1; pointer-events:none;
  background:radial-gradient(72% 66% at 64% 50%,rgba(4,7,11,.97) 0%,rgba(4,7,11,.9) 40%,rgba(4,7,11,.52) 62%,rgba(4,7,11,.16) 76%,transparent 88%);
}
@media (max-width:860px){ .hero__meta{ display:none; } }

/* ============================================================
   ACT 2 — the datum, kinetic type, no photograph
   ============================================================ */
#datum{ height:250svh; background:var(--canvas); }
.datum__wrap{ align-items:center; justify-content:center; text-align:left;
  padding-top:clamp(110px,15vh,170px); }
.datum__inner{ width:min(100%,62ch); }
.datum__line{ display:block; }
.datum__line + .datum__line{ margin-top:.12em; }
.datum__q{ font-family:var(--font-display); font-size:clamp(25px,3.5vw,50px); line-height:1.08;
  letter-spacing:-.024em; margin:0; }
.datum__q b{ font-weight:400; color:#9AA6B0; }
.datum__q .hi{ color:var(--accent); font-style:italic; }
.datum__foot{ margin-top:clamp(30px,5vh,58px); display:flex; gap:clamp(24px,4vw,56px); flex-wrap:wrap; }
.datum__foot p{ margin:0; max-width:26ch; color:var(--ink-soft); font-size:14px; }
.zeroline{ position:absolute; left:0; right:0; top:50%; height:1px; background:var(--accent); opacity:0; }

/* ============================================================
   ACT 3 — Ngorongoro, lateral pan
   ============================================================ */
#rim{ height:340svh; }
.pan{ position:absolute; inset:0; display:flex; will-change:transform; }
.pan__f{ position:relative; flex:0 0 78vw; height:100%; overflow:hidden; }
.pan__f img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.pan__cap{ position:absolute; left:clamp(16px,2vw,30px); bottom:clamp(16px,2.4vh,30px); z-index:2;
  font:500 10px/1.5 var(--font-mono); letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.82);
  text-shadow:0 1px 14px rgba(0,0,0,.9); }
.rim__copy{ position:absolute; left:var(--gutter); top:clamp(88px,14vh,150px); z-index:3;
  max-width:min(46ch,42vw); }
@media (max-width:860px){
  .pan__f{ flex:0 0 88vw; }
  .rim__copy{ max-width:none; right:var(--gutter); }
}

/* ============================================================
   ACT 4 — Paso John Gardner, diagonal wipe
   ============================================================ */
#paso{ height:250svh; }
.wipe{ position:absolute; inset:0; }
.wipe__l{ position:absolute; inset:0; will-change:clip-path; }
.wipe__l img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.paso__wrap{ align-items:flex-end; }
.paso__copy{ max-width:min(100%,40ch); }
.paso__scrim{ position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(84deg,rgba(6,9,13,.95) 0%,rgba(6,9,13,.88) 26%,rgba(6,9,13,.58) 44%,rgba(6,9,13,.16) 62%,transparent 76%),
    linear-gradient(0deg,rgba(6,9,13,.86) 0%,rgba(6,9,13,.4) 22%,transparent 44%); }
.paso__stats{ display:flex; gap:clamp(22px,3.4vw,48px); margin-top:clamp(20px,3vh,34px); flex-wrap:wrap; }
.paso__stat{ display:grid; gap:.3em; }
.paso__stat dt{ font:500 10px/1 var(--font-mono); letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); }
.paso__stat dd{ margin:0; font:400 clamp(19px,2vw,27px)/1 var(--font-display); color:var(--ink); }

/* ============================================================
   ACT 5 — how a route is made, documentary grid
   ============================================================ */
#route{ background:var(--surface); padding:clamp(90px,13vh,150px) 0 clamp(80px,11vh,130px); }
.route__in{ padding:0 calc(var(--gutter) + var(--rail)) 0 var(--gutter); }
.route__head{ display:grid; gap:clamp(18px,2.4vh,28px); max-width:52ch; margin-bottom:clamp(46px,7vh,82px); }
.route__grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(12px,1.6vw,22px); }
.card{ position:relative; overflow:hidden; background:#0A0E12; border:1px solid var(--rule); }
.card img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; filter:grayscale(.35) contrast(1.05); transition:filter .6s,transform .8s; }
.card:hover img{ filter:grayscale(0) contrast(1.08); transform:scale(1.035); }
.card__t{ position:absolute; inset:auto 0 0 0; padding:clamp(26px,3vw,40px) clamp(14px,1.6vw,22px) clamp(14px,1.6vw,22px);
  background:linear-gradient(180deg,rgba(6,9,12,0) 0%,rgba(6,9,12,.74) 26%,rgba(6,9,12,.93) 58%,rgba(6,9,12,.97) 100%); }
.card__n{ font:500 10px/1 var(--font-mono); letter-spacing:.2em; color:var(--accent); }
.card__h{ margin:.6em 0 0; font:400 clamp(16px,1.5vw,21px)/1.16 var(--font-display); }
.card__p{ margin:.5em 0 0; font-size:13px; line-height:1.5; color:var(--ink-soft); }
.c-6{ grid-column:span 6; } .c-4{ grid-column:span 4; } .c-8{ grid-column:span 8; }
@media (max-width:860px){ .c-6,.c-4,.c-8{ grid-column:span 12; } }

/* ============================================================
   ACT 6 — Danum Valley, macro, authored silence
   ============================================================ */
#danum{ height:230svh; }
.danum__plate img{ transform:scale(1.06); }
.danum__wrap{ align-items:center; }
.danum__copy{ max-width:min(100%,40ch); margin-left:auto; text-align:right; }
.danum__copy .body,.danum__copy .lede{ margin-left:auto; }
.scrim-r{ position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(264deg,rgba(4,8,6,.94) 0%,rgba(4,8,6,.84) 26%,rgba(4,8,6,.52) 46%,rgba(4,8,6,.14) 62%,transparent 76%); }
@media (max-width:860px){ .danum__copy{ text-align:left; margin-left:0; } .scrim-r{ background:linear-gradient(180deg,rgba(4,8,6,.3),rgba(4,8,6,.9)); } }

/* ============================================================
   ACT 7 — ZERO. the crossing. the peak.
   The waterline is the photograph's own, not a clip edge.
   ============================================================ */
#zero{ height:520svh; }
#zero .grain{ opacity:.07; }
.cross{ position:absolute; inset:0; background:#04070A; overflow:hidden; }
.cross__air{ position:absolute; inset:0; opacity:var(--air-o,1); }
.cross__air img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* the split level frame is taller than the viewport and travels through it */
.cross__sea{ position:absolute; inset:0; overflow:hidden; opacity:var(--sea-o,0); }
.cross__sea img{
  position:absolute; left:50%; top:0; width:auto; height:300svh; min-width:100%; max-width:none;
  transform:translate3d(-50%,calc(var(--sea-y,45) * 1svh),0); will-change:transform;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 11%);
          mask-image:linear-gradient(180deg,transparent 0%,#000 11%);
}
/* light falling off with depth */
.cross__depth{ position:absolute; inset:0; pointer-events:none; opacity:var(--deep-o,0);
  background:linear-gradient(180deg,rgba(5,28,46,.06) 0%,rgba(3,18,32,.5) 55%,rgba(2,12,24,.82) 100%); }
.cross__rule{
  position:absolute; left:var(--gutter); right:calc(var(--gutter) + var(--rail)); top:50%;
  display:flex; align-items:center; gap:16px; opacity:var(--rule-o,0);
  transform:translateY(-50%); pointer-events:none;
}
.cross__rule i{ flex:1; height:1px; background:var(--accent); font-style:normal; opacity:.8; }
.cross__rule b{
  font:500 clamp(10px,.86vw,13px)/1 var(--font-mono); letter-spacing:.24em; text-transform:uppercase;
  color:var(--accent); font-weight:500; white-space:nowrap; text-shadow:0 1px 12px rgba(0,10,20,.8);
}
.cross__copy{
  position:absolute; left:var(--gutter); bottom:clamp(72px,11vh,120px);
  max-width:min(100%,40ch); opacity:var(--copy-o,1);
}
#zero .cross::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:var(--copy-o,1);
  background:linear-gradient(14deg,rgba(4,7,11,.9) 0%,rgba(4,7,11,.5) 26%,transparent 52%);
}
.cross__zero{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scale(var(--z-s,1));
  font:400 clamp(96px,24vw,320px)/1 var(--font-display); color:rgba(255,255,255,.85);
  opacity:var(--z-o,0); pointer-events:none; letter-spacing:-.05em;
  text-shadow:0 0 90px rgba(6,26,42,.85);
}
.bubbles{ position:absolute; inset:0; overflow:hidden; opacity:var(--bub-o,0); pointer-events:none; }
.bub{ position:absolute; bottom:-8%; border-radius:50%; background:rgba(214,240,248,.5);
  box-shadow:inset 0 0 4px rgba(255,255,255,.85); animation:rise linear infinite; }
@keyframes rise{ from{ transform:translate3d(0,0,0) } to{ transform:translate3d(14px,-115svh,0) } }

/* ============================================================
   ACT 8 — Raja Ampat, drift
   ============================================================ */
#deep{ height:280svh; background:#04141C; }
.deep__plane{ position:absolute; inset:-8%; will-change:transform; }
.deep__plane img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.deep__wrap{ align-items:center; }
.deep__copy{ max-width:min(100%,42ch); }
.deep__list{ list-style:none; margin:clamp(22px,3vh,34px) 0 0; padding:0; display:grid; gap:.85em; }
.deep__list li{ display:flex; gap:1em; align-items:baseline; font-size:14px; color:var(--ink-soft);
  border-top:1px solid var(--rule); padding-top:.85em; }
.deep__list b{ font:500 11px/1 var(--font-mono); letter-spacing:.14em; color:var(--accent);
  min-width:6.5ch; font-weight:500; }

/* ============================================================
   ACT 9 — departures, the close
   ============================================================ */
#departures{ background:var(--canvas); padding:clamp(100px,17vh,200px) 0 clamp(56px,8vh,90px); }
.dep__in{ padding:0 calc(var(--gutter) + var(--rail)) 0 var(--gutter); }
.dep__head{ max-width:26ch; margin-bottom:clamp(46px,7vh,84px); }
.dep__board{ border-top:1px solid var(--rule); }
.dep__row{
  display:grid; grid-template-columns:clamp(78px,9vw,120px) 1fr auto auto; align-items:center;
  gap:clamp(12px,2vw,28px); padding:clamp(18px,2.6vh,30px) 0; border-bottom:1px solid var(--rule);
  text-decoration:none; position:relative; transition:padding-left .45s cubic-bezier(.22,.61,.36,1);
}
.dep__row:hover{ padding-left:14px; }
.dep__row::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--accent);
  transform:scaleY(0); transform-origin:top; transition:transform .45s cubic-bezier(.22,.61,.36,1); }
.dep__row:hover::before{ transform:scaleY(1); }
.dep__alt{ font:500 clamp(13px,1.25vw,18px)/1 var(--font-mono); color:var(--accent); font-variant-numeric:tabular-nums; }
.dep__name{ font:400 clamp(20px,2.3vw,32px)/1.1 var(--font-display); }
.dep__where{ font:500 10px/1 var(--font-mono); letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); }
.dep__go{ font:500 11px/1 var(--font-mono); letter-spacing:.16em; color:var(--ink-soft); transition:color .35s,transform .35s; }
.dep__row:hover .dep__go{ color:var(--accent); transform:translateX(5px); }
@media (max-width:720px){
  .dep__row{ grid-template-columns:1fr auto; row-gap:6px; }
  .dep__where{ grid-column:1; } .dep__go{ grid-column:2; }
}
.dep__cta{ margin-top:clamp(52px,9vh,110px); display:flex; align-items:flex-end;
  justify-content:space-between; gap:32px; flex-wrap:wrap; }
.dep__cta h3{ max-width:16ch; }
.foot{ margin-top:clamp(56px,10vh,110px); padding-top:clamp(22px,3vh,34px); border-top:1px solid var(--rule);
  display:flex; justify-content:space-between; gap:22px; flex-wrap:wrap;
  font:400 11px/1.6 var(--font-mono); letter-spacing:.1em; color:var(--ink-faint); text-transform:uppercase; }
.foot a{ text-decoration:none; }
.foot a:hover{ color:var(--accent); }



/* ============================================================
   enquiry form: the close resolves into a real action
   ============================================================ */
.enq{ margin-top:clamp(56px,9vh,110px); padding-top:clamp(40px,6vh,70px); border-top:1px solid var(--rule);
  scroll-margin-top:clamp(80px,12vh,120px); }
.enq__head{ display:grid; gap:clamp(12px,1.8vh,20px); max-width:46ch; margin-bottom:clamp(30px,4.6vh,54px); }
.enq__form{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2vw,26px); align-items:start; }
.f{ display:grid; gap:.55em; min-width:0; }
.f--half{ grid-column:span 2; } .f--quarter{ grid-column:span 1; } .f--full{ grid-column:1 / -1; }
.f label{ font:500 10px/1 var(--font-mono); letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft); }
.f input,.f select,.f textarea{
  width:100%; font:400 15px/1.45 var(--font-text); color:var(--ink);
  background:rgba(255,255,255,.035); border:1px solid var(--rule); border-radius:2px;
  padding:.82em .9em; min-height:46px; appearance:none;
  transition:border-color .25s,background .25s;
}
.f textarea{ resize:vertical; min-height:112px; }
.f select{
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-soft) 50%),linear-gradient(135deg,var(--ink-soft) 50%,transparent 50%);
  background-position:calc(100% - 19px) 52%,calc(100% - 13px) 52%;
  background-size:6px 6px,6px 6px; background-repeat:no-repeat; padding-right:2.6em;
}
.f select option{ background:var(--surface); color:var(--ink); }
.f input:hover,.f select:hover,.f textarea:hover{ border-color:rgba(244,241,234,.28); }
.f input:focus,.f select:focus,.f textarea:focus{
  outline:none; border-color:var(--accent); background:rgba(255,255,255,.06);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 48%,transparent);
}
.f input[aria-invalid="true"],.f textarea[aria-invalid="true"]{ border-color:#E2714F; }
.f__err{ margin:0; font:400 12.5px/1.45 var(--font-text); color:#F0A88C; }
/* honeypot: off screen rather than display:none, so bots still fill it */
.f--hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.f--submit{ grid-column:1 / -1; display:flex; align-items:center; gap:clamp(16px,2.4vw,30px);
  flex-wrap:wrap; margin-top:clamp(4px,1vh,10px); }
.f--submit .btn{ border-radius:999px; }
.f--submit .btn[disabled]{ opacity:.55; pointer-events:none; }
.enq__status{ margin:0; font:400 13.5px/1.5 var(--font-text); color:var(--ink-soft); max-width:44ch; }
.enq__status.is-ok{ color:var(--accent); }
.enq__status.is-bad{ color:#F0A88C; }
@media (max-width:860px){
  .enq__form{ grid-template-columns:repeat(2,1fr); }
  .f--half{ grid-column:1 / -1; } .f--quarter{ grid-column:span 1; }
}
@media (max-width:460px){
  .enq__form{ grid-template-columns:1fr; }
  .f--quarter{ grid-column:1 / -1; }
}

/* ============================================================
   mobile art direction: a portrait composition, not a squeezed one
   ============================================================ */
@media (max-width:860px){
  #hero{ height:200svh; }
  .hero__sky{ background:
    radial-gradient(120% 52% at 56% 66%,rgba(150,186,205,.44) 0%,rgba(60,92,116,.2) 40%,transparent 70%),
    linear-gradient(178deg,#05070A 0%,#080F1B 26%,#122536 52%,#25465A 74%,#4A7383 100%); }
  .hero__far{ bottom:36%; left:-16%; right:-16%; opacity:.26; }
  .hero__mid{ bottom:17%; left:-58%; right:-58%; opacity:.84;
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.45) 9%,#000 24%);
            mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.45) 9%,#000 24%); }
  .hero__subject{ bottom:10%; left:-16%; width:168%;
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.2) 12%,#000 38%),
                       linear-gradient(180deg,#000 50%,rgba(0,0,0,.5) 80%,transparent 100%);
    -webkit-mask-composite:source-in;
            mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.2) 12%,#000 38%),
                       linear-gradient(180deg,#000 50%,rgba(0,0,0,.5) 80%,transparent 100%);
            mask-composite:intersect; }
  .hero__mist{ bottom:22%; height:26%; }
  .hero__fore{ bottom:-1%; left:-22%; right:-22%; height:clamp(96px,15svh,150px); }
  .hero__wrap{ padding-bottom:clamp(112px,20svh,180px); }
  .hero__copy{ max-width:none; }
  /* copy sits at the foot in portrait, so the scrims run vertically */
  .hero__scrim{ background:linear-gradient(180deg,rgba(4,7,11,.9) 0%,rgba(4,7,11,.34) 22%,
    rgba(4,7,11,.1) 42%,rgba(4,7,11,.66) 70%,rgba(4,7,11,.96) 100%); }
  .scrim-l{ background:linear-gradient(180deg,rgba(4,6,9,.95) 0%,rgba(4,6,9,.88) 32%,
    rgba(4,6,9,.52) 56%,rgba(4,6,9,.24) 76%,rgba(4,6,9,.62) 100%); }
  .paso__scrim{ background:linear-gradient(0deg,rgba(6,9,13,.96) 0%,rgba(6,9,13,.88) 32%,
    rgba(6,9,13,.46) 58%,transparent 86%); }
  #zero .cross::after{ background:linear-gradient(0deg,rgba(4,7,11,.94) 0%,rgba(4,7,11,.6) 26%,transparent 54%); }
  .mast::before{ background:linear-gradient(180deg,rgba(4,6,9,.9),rgba(4,6,9,.5) 60%,transparent); }
  .datum__q{ font-size:clamp(22px,5.6vw,32px); }
  .deep__copy,.danum__copy,.paso__copy,.cross__copy{ max-width:none; }
}

/* ============================================================
   reduced motion: keep the depth, drop the movement
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; }
  [data-cue]{ opacity:1 !important; transform:none !important; }
  .hero__plane,.deep__plane,.pan,.hero__mist{ transform:none !important; }
  #hero{ height:100svh; } #datum{ height:auto; } #rim{ height:auto; }
  #paso{ height:auto; } #danum{ height:auto; } #zero{ height:auto; } #deep{ height:auto; }
  .stage{ position:relative; height:auto; min-height:100svh; }
  .pan{ position:relative; inset:auto; flex-wrap:wrap; }
  .pan__f{ flex:1 1 48%; min-height:52svh; }
  /* copy flows above the grid instead of floating over it */
  .rim__copy,.cross__copy{ position:relative; left:auto; right:auto; top:auto; bottom:auto;
    max-width:none; padding:clamp(70px,10vh,120px) calc(var(--gutter) + var(--rail)) clamp(26px,4vh,46px) var(--gutter); }
  #rim .stage,#zero .stage{ display:flex; flex-direction:column; }
  #zero .cross{ position:relative; inset:auto; min-height:80svh; order:2; }
  /* only the two whose copy now flows below the image lose their scrim.
     every other scrim is carrying contrast, not motion, and stays. */
  #rim .scrim-l,#zero .cross::after{ display:none; }
  .wipe__l{ clip-path:none !important; position:relative; height:60svh; }
  .wipe__l + .wipe__l{ display:none; }
  .cross__sea{ opacity:1 !important; }
  .cross__sea img{ transform:translate3d(-50%,1svh,0) !important; }
  .cross__air{ opacity:0 !important; }
  .cross__rule{ opacity:1 !important; }
  .bubbles{ display:none; }
  .cross__zero{ opacity:.1 !important; }
}