/* ══════════════════════════════════════════════════════════════
   ABYSSAL STATION — styles
   surface teal → hadal black · bioluminescent cyan · cold blue
   ══════════════════════════════════════════════════════════════ */

:root{
  --hadal:      #01060a;
  --surface:    #0e4d5c;
  --cyan:       #46f0d9;
  --blue:       #6ab8ff;
  --warm:       #ffd9a0;
  --ink:        #d9edf2;
  --ink-dim:    #9dbfc9;
  --ink-faint:  #6e93a0;
  --line:       rgba(70,240,217,.16);
  --card-bg:    linear-gradient(168deg, rgba(8,30,41,.74), rgba(3,13,19,.82));
  --font-d:     'Sora', sans-serif;
  --font-m:     'JetBrains Mono', monospace;
  --rail-w:     96px;
  --ease-out:   cubic-bezier(.16,.84,.28,1);
  --depth-p:     0;
  --light-a:     1;
  --pressure-p:  0;
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html{
  scroll-behavior:smooth;
  color-scheme:dark;
  scroll-padding-top:72px;
  scrollbar-color:rgba(70,240,217,.58) #01060a;
  scrollbar-width:thin;
}
html:focus-within{ scroll-behavior:smooth; }
::-webkit-scrollbar{ width:12px; height:12px; }
::-webkit-scrollbar-track{ background:#01060a; }
::-webkit-scrollbar-thumb{
  border:3px solid #01060a;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(70,240,217,.9), rgba(106,184,255,.64));
  box-shadow:0 0 16px rgba(70,240,217,.28);
}
::-webkit-scrollbar-thumb:hover{ background:linear-gradient(180deg, #7affef, #83c5ff); }

body{
  background:var(--hadal);
  color:var(--ink);
  font-family:var(--font-d);
  font-weight:300;
  font-size:16px;
  line-height:1.65;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  -webkit-tap-highlight-color:rgba(70,240,217,.16);
  touch-action:manipulation;
}

::selection{ background:rgba(70,240,217,.34); color:#001014; text-shadow:none; }

a{ color:var(--cyan); text-decoration:none; }
a:focus-visible, button:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:3px;
  border-radius:2px;
}
main:focus-visible{ outline:2px solid var(--cyan); outline-offset:-4px; }
.skip-link{
  position:fixed; left:18px; top:12px; z-index:200;
  transform:translateY(-160%);
  padding:10px 14px;
  font-family:var(--font-m); font-size:11px; letter-spacing:.12em;
  color:#001014; background:var(--cyan);
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  transition:transform .2s var(--ease-out);
}
.skip-link:focus-visible{ transform:none; outline:2px solid #eafffb; outline-offset:3px; }

/* ── ambient layers ─────────────────────────────────────────── */

.bg{
  position:fixed; inset:0; z-index:-3;
  background:
    radial-gradient(110% 70% at 52% -10%, rgba(105,218,230,calc(var(--light-a) * .30)), transparent 64%),
    linear-gradient(180deg, rgba(255,255,255,calc(var(--light-a) * .07)), transparent 18%),
    var(--surface);              /* JS interpolates this */
  overflow:hidden;
}
.depth-glow,
.pressure-field{
  position:absolute; inset:-8%;
  pointer-events:none;
}
.depth-glow{
  opacity:calc(.1 + var(--light-a) * .72);
  background:
    radial-gradient(42% 34% at 32% 14%, rgba(154,255,236,.26), transparent 68%),
    radial-gradient(48% 46% at 72% 22%, rgba(106,184,255,.16), transparent 72%),
    linear-gradient(115deg, transparent 0 44%, rgba(255,255,255,.045) 46% 47%, transparent 49% 100%);
  mix-blend-mode:screen;
  transform:translate3d(calc(var(--depth-p) * -28px), calc(var(--depth-p) * 18px), 0);
}
.pressure-field{
  opacity:calc(.045 + var(--pressure-p) * .16);
  background:
    repeating-linear-gradient(0deg, rgba(140,230,255,.22) 0 1px, transparent 1px 36px),
    repeating-linear-gradient(90deg, rgba(70,240,217,.14) 0 1px, transparent 1px 92px);
  -webkit-mask-image:radial-gradient(80% 66% at 54% 48%, #000, transparent 76%);
          mask-image:radial-gradient(80% 66% at 54% 48%, #000, transparent 76%);
  transform:translate3d(0, calc(var(--depth-p) * -54px), 0);
}
.rays{
  position:absolute; inset:-10% -20%;
  background:
    repeating-linear-gradient(101deg,
      transparent 0 110px,
      rgba(196,255,242,.055) 128px 158px,
      transparent 176px 300px),
    repeating-linear-gradient(83deg,
      transparent 0 190px,
      rgba(140,230,255,.04) 208px 236px,
      transparent 254px 430px);
  -webkit-mask-image:linear-gradient(#000 0%, rgba(0,0,0,.5) 45%, transparent 78%);
          mask-image:linear-gradient(#000 0%, rgba(0,0,0,.5) 45%, transparent 78%);
  animation:raysDrift 34s linear infinite alternate;
}
@keyframes raysDrift{
  from{ transform:translateX(-3%) }
  to  { transform:translateX(3%) }
}
.vignette{
  position:absolute; inset:0;
  background:radial-gradient(120% 90% at 50% 38%, transparent 52%, rgba(0,2,4,.55) 100%);
}

#sea{ position:fixed; inset:0; z-index:-2; width:100%; height:100%; }

.grain{
  position:fixed; inset:0; z-index:60; pointer-events:none;
  opacity:.07; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
  background-size:220px;
}

/* ── topbar ─────────────────────────────────────────────────── */

.topbar{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:0 clamp(14px, 2.5vw, 30px);
  min-height:56px;
  font-family:var(--font-m); font-size:11px; letter-spacing:.08em;
  background:
    linear-gradient(180deg, rgba(1,8,13,.94), rgba(1,8,13,.76)),
    linear-gradient(90deg, rgba(70,240,217,.05), transparent 32%, rgba(106,184,255,.04));
  backdrop-filter:blur(14px) saturate(1.25);
  -webkit-backdrop-filter:blur(14px) saturate(1.25);
  border-bottom:1px solid var(--line);
  box-shadow:0 14px 44px rgba(0,3,6,.32);
}
.brand{
  display:inline-flex; align-items:center; gap:10px;
  color:var(--ink); font-weight:500; letter-spacing:.14em;
  padding:16px 0; white-space:nowrap;
  transition:color .25s var(--ease-out), text-shadow .25s var(--ease-out);
}
.brand svg{ color:var(--cyan); flex:none; }
.brand:hover{ color:#effcff; text-shadow:0 0 18px rgba(70,240,217,.36); }
.brand-pre{ font-style:normal; }
.zone-nav{ display:flex; gap:2px; }
.zone-nav a{
  color:var(--ink-dim); padding:19px 11px;
  transition:color .25s var(--ease-out), background-size .25s var(--ease-out), text-shadow .25s var(--ease-out);
  white-space:nowrap;
}
.zone-nav a:hover{ color:var(--cyan); }
.zone-nav a.on{
  color:var(--cyan);
  text-shadow:0 0 12px rgba(70,240,217,.45);
  background:linear-gradient(var(--cyan), var(--cyan)) center bottom / calc(100% - 22px) 2px no-repeat;
}
.status-chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 13px; border:1px solid var(--line); border-radius:999px;
  color:var(--ink-dim); white-space:nowrap;
  min-height:34px;
}
.status-chip i{
  width:7px; height:7px; border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 8px var(--cyan);
  animation:pulseDot 2.2s ease-in-out infinite;
}
@keyframes pulseDot{ 50%{ opacity:.35 } }
body.arrived .status-chip i{ background:var(--warm); box-shadow:0 0 8px var(--warm); animation:none; }
body.arrived .status-chip{ color:var(--warm); border-color:rgba(255,217,160,.3); }

/* ── depth rail (desktop / tablet) ──────────────────────────── */

.rail{
  position:fixed; left:0; top:50%; transform:translateY(-50%); z-index:90;
  width:var(--rail-w); height:min(74vh, 700px);
  display:flex; flex-direction:column; align-items:center; gap:14px;
  padding:18px 10px;
  font-family:var(--font-m);
  border-right:1px solid var(--line);
  background:linear-gradient(90deg, rgba(1,6,10,.42), rgba(1,6,10,.05));
}
.rail::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(to bottom, rgba(70,240,217,.18), transparent 18%, transparent 76%, rgba(255,217,160,.12)),
    repeating-linear-gradient(to bottom,
      transparent 0 calc(25% - 1px),
      rgba(106,184,255,.22) calc(25% - 1px) 25%);
  opacity:.55;
  pointer-events:none;
}
.rail > *{ position:relative; z-index:1; }
.rail-top{
  font-size:9px; letter-spacing:.3em; text-align:center;
  color:var(--ink-faint); line-height:1.7;
}
.rail-depth{
  font-size:20px; font-weight:700; color:var(--cyan);
  text-shadow:0 0 18px rgba(70,240,217,.45);
  display:flex; align-items:baseline; gap:3px;
  font-variant-numeric:tabular-nums;
}
.rail-depth small{ font-size:10px; font-weight:400; color:var(--ink-faint); }
.rail-ruler{
  position:relative; flex:1; width:34px; overflow:hidden;
  background:
    linear-gradient(to bottom, rgba(217,237,242,.44) 0 1px, transparent 1px) right top / 9px 12px repeat-y,
    linear-gradient(to bottom, rgba(217,237,242,.68) 0 1px, transparent 1px) right top / 17px 60px repeat-y;
}
.rail-ruler::before{
  content:"";
  position:absolute; left:5px; bottom:0; width:2px;
  height:calc(var(--depth-p) * 100%);
  background:linear-gradient(to top, var(--cyan), rgba(106,184,255,.25));
  box-shadow:0 0 14px rgba(70,240,217,.5);
}
.rail-needle{
  position:absolute; left:0; right:0; top:50%; height:2px;
  background:var(--cyan); box-shadow:0 0 9px var(--cyan);
}
.rail-needle::before{
  content:""; position:absolute; left:0; top:-4px;
  border:4.5px solid transparent; border-left-color:var(--cyan);
}
.rail-zone{
  writing-mode:vertical-rl; transform:rotate(180deg);
  font-size:10px; letter-spacing:.34em; color:var(--blue);
  min-height:110px; display:flex; align-items:center;
}
.rail-data{ display:flex; flex-direction:column; gap:7px; width:100%; }
.rail-data div{ display:flex; flex-direction:column; align-items:center; gap:1px; }
.rail-data dt{ font-size:8px; letter-spacing:.28em; color:var(--ink-faint); }
.rail-data dd{ font-size:10.5px; color:var(--ink-dim); font-variant-numeric:tabular-nums; white-space:nowrap; }

/* ── phone HUD strip ────────────────────────────────────────── */

.hudstrip{
  display:none;
  position:fixed; left:0; right:0; bottom:0; z-index:90;
  justify-content:space-between; align-items:center; gap:10px;
  padding:11px 16px calc(11px + env(safe-area-inset-bottom, 0px));
  font-family:var(--font-m); font-size:10.5px; letter-spacing:.06em;
  color:var(--ink-dim);
  background:rgba(1,6,10,.78);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-top:1px solid var(--line);
  font-variant-numeric:tabular-nums;
}
.hud-depth b{ color:var(--cyan); font-weight:700; font-size:14px; text-shadow:0 0 12px rgba(70,240,217,.5); }
#zoneNameS{ letter-spacing:.2em; color:var(--blue); }

/* ── hero ───────────────────────────────────────────────────── */

main{ position:relative; z-index:1; }

.hero{
  min-height:100svh;
  display:grid; place-items:center;
  padding:104px clamp(20px, 5vw, 56px) 52px;
}
.hero-inner{
  width:100%;
  max-width:1180px;
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  grid-template-areas:"boot" "core" "meta" "ladder";
  gap:clamp(18px, 4vw, 30px);
  align-items:center;
  text-align:center;
}

.hero-core{
  grid-area:core;
  position:relative;
  isolation:isolate;
}
.hero-core::before{
  content:"";
  position:absolute; z-index:-1;
  left:50%; top:50%;
  width:min(68vw, 640px); aspect-ratio:1;
  transform:translate(-50%, -50%);
  border:1px solid rgba(70,240,217,.13);
  border-radius:50%;
  background:
    linear-gradient(90deg, transparent calc(50% - 1px), rgba(70,240,217,.13) 50%, transparent calc(50% + 1px)),
    linear-gradient(0deg, transparent calc(50% - 1px), rgba(70,240,217,.1) 50%, transparent calc(50% + 1px)),
    radial-gradient(circle, rgba(70,240,217,.08), transparent 58%);
  box-shadow:0 0 80px rgba(70,240,217,.1) inset;
  opacity:.7;
}

.hero-panel{
  grid-area:boot;
  justify-self:center;
  width:min(100%, 510px);
  text-align:left;
  padding:14px 0 0 18px;
  border-left:1px solid rgba(70,240,217,.34);
  font-family:var(--font-m);
  color:var(--ink-dim);
}
.panel-label{
  margin-bottom:10px;
  font-size:9px;
  letter-spacing:.34em;
  color:var(--blue);
}

.boot{
  font-family:var(--font-m); font-size:clamp(10px, 1.3vw, 12px);
  letter-spacing:.1em; line-height:2;
  color:rgba(70,240,217,.75);
  min-height:4.5em;
  white-space:pre-wrap; text-align:left;
}
.boot .cursor{ animation:pulseDot 1s steps(2) infinite; }
.signal-bars{
  display:flex; gap:4px; align-items:end;
  height:22px; margin-top:9px;
}
.signal-bars i{
  width:9px; height:calc(6px + var(--i, 1) * 2px);
  border:1px solid rgba(70,240,217,.28);
  background:rgba(70,240,217,.06);
  box-shadow:0 0 10px rgba(70,240,217,.12);
}
.signal-bars i:nth-child(1){ --i:1; }
.signal-bars i:nth-child(2){ --i:3; }
.signal-bars i:nth-child(3){ --i:5; background:rgba(70,240,217,.18); }
.signal-bars i:nth-child(4){ --i:4; }
.signal-bars i:nth-child(5){ --i:2; }
.panel-note{
  margin-top:10px;
  max-width:34ch;
  font-size:10px;
  line-height:1.7;
  letter-spacing:.08em;
  color:var(--ink-faint);
}

.hero-title{
  font-weight:800;
  font-size:clamp(2.9rem, 10.4vw, 8.1rem);
  line-height:.98;
  letter-spacing:.045em;
  margin-left:.045em; /* optically recenter letterspaced caps */
  color:var(--ink);
  text-transform:uppercase;
  text-wrap:balance;
}
.hero-title .row{ display:block; white-space:nowrap; }
.hero-title .row-2{
  color:transparent;
  -webkit-text-stroke:1.35px rgba(130,224,239,.82);
  text-shadow:0 0 34px rgba(70,240,217,.28), 0 20px 70px rgba(0,0,0,.3);
}
.hero-title .ch{
  display:inline-block;
  opacity:0; transform:translateY(.55em);
  filter:blur(10px);
  transition:opacity .9s var(--ease-out), transform .9s var(--ease-out), filter .9s var(--ease-out);
  transition-delay:calc(var(--i) * 55ms + 400ms);
}
body.booted .hero-title .ch{ opacity:1; transform:none; filter:none; }

.hero-sub{
  margin:clamp(20px, 3.5vh, 36px) auto 0;
  max-width:590px;
  color:var(--ink);
  font-size:clamp(15px, 1.6vw, 17.5px);
  font-weight:300;
  text-wrap:pretty;
}
.hero-meta{
  grid-area:meta;
  list-style:none;
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:10px 22px;
  font-family:var(--font-m); font-size:11px; letter-spacing:.1em;
  color:var(--ink-dim);
}
.hero-meta li{
  display:inline-grid;
  grid-template-columns:auto auto;
  gap:6px;
  align-items:baseline;
}
.hero-meta b{ color:var(--blue); font-weight:500; }
.hero-meta span{ font-variant-numeric:tabular-nums; }

.dive-cue{
  display:inline-flex; flex-direction:column; align-items:center; gap:9px;
  margin-top:clamp(30px, 5.5vh, 58px);
  font-family:var(--font-m); font-size:11px; letter-spacing:.34em;
  color:var(--cyan); padding:12px 18px;
  transition:color .3s var(--ease-out), text-shadow .3s var(--ease-out), transform .3s var(--ease-out);
}
.dive-cue:hover{ color:#eafffb; text-shadow:0 0 18px rgba(70,240,217,.55); transform:translateY(-2px); }
.dive-cue i{
  width:11px; height:11px;
  border-right:2px solid var(--cyan); border-bottom:2px solid var(--cyan);
  transform:rotate(45deg);
  animation:cueBob 1.8s ease-in-out infinite;
}
@keyframes cueBob{ 50%{ transform:rotate(45deg) translate(5px,5px); opacity:.4 } }

.depth-ladder{
  grid-area:ladder;
  position:relative;
  width:min(100%, 650px);
  justify-self:center;
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:0;
  padding-top:18px;
  font-family:var(--font-m);
  color:var(--ink-faint);
  border-top:1px solid rgba(70,240,217,.26);
}
.depth-ladder::before{
  content:"";
  position:absolute; top:-2px; left:0;
  width:calc(var(--depth-p) * 100%);
  height:3px;
  background:linear-gradient(90deg, var(--cyan), var(--blue), var(--warm));
  box-shadow:0 0 18px rgba(70,240,217,.45);
}
.depth-ladder span{
  position:relative;
  display:grid;
  gap:5px;
  padding:0 10px;
  font-size:9px;
  line-height:1.35;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.depth-ladder span::before{
  content:"";
  position:absolute; top:-22px; left:50%;
  width:1px; height:11px;
  background:rgba(70,240,217,.38);
}
.depth-ladder b{
  color:var(--cyan);
  font-size:10px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
}

/* staggered load-in for hero copy */
.reveal-load{
  opacity:0; transform:translateY(14px);
  transition:opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
body.booted .reveal-load{ opacity:1; transform:none; }
body.booted .hero-sub{ transition-delay:1.5s; }
body.booted .hero-meta{ transition-delay:1.75s; }
body.booted .dive-cue{ transition-delay:2.05s; }
body.booted .depth-ladder{ transition-delay:2.2s; }

/* ── drift markers (the water between) ──────────────────────── */

.drift{
  margin:38vh auto;
  padding:0 24px;
  max-width:680px;
  text-align:center;
  font-family:var(--font-m);
  font-size:11.5px; letter-spacing:.16em; line-height:2;
  color:rgba(198,225,233,.88);
}

/* ── zone sections & cards ──────────────────────────────────── */

.zone{
  position:relative;
  display:grid; place-items:center;
  min-height:112vh;
  padding:16vh clamp(18px, 4vw, 48px);
}

.zone, .finale{ scroll-margin-top:70px; }

.card{
  position:relative;
  width:100%; max-width:820px;
  overflow:hidden;
  padding:clamp(32px, 5.5vw, 62px);
  background:
    linear-gradient(90deg, rgba(70,240,217,.045) 1px, transparent 1px) 0 0 / 54px 54px,
    linear-gradient(0deg, rgba(106,184,255,.035) 1px, transparent 1px) 0 0 / 54px 54px,
    radial-gradient(420px 240px at 78% 12%, rgba(70,240,217,.1), transparent 68%),
    var(--card-bg);
  border:1px solid rgba(70,240,217,.22);
  box-shadow:0 34px 100px rgba(0,3,6,.55), inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
}
/* HUD corner ticks */
.card::before, .card::after{
  content:""; position:absolute; width:22px; height:22px; pointer-events:none;
}
.card::before{
  top:-1px; left:-1px;
  border-top:2px solid var(--cyan); border-left:2px solid var(--cyan);
}
.card::after{
  bottom:-1px; right:-1px;
  border-bottom:2px solid var(--cyan); border-right:2px solid var(--cyan);
}

.card-tag{
  font-family:var(--font-m); font-size:10.5px; letter-spacing:.26em;
  color:var(--cyan);
  margin-bottom:18px;
}
.card h2, .finale h2{
  font-weight:700;
  font-size:clamp(1.9rem, 4.6vw, 3.1rem);
  letter-spacing:.015em;
  line-height:1.06;
  color:var(--ink);
  text-wrap:balance;
}
.card h2{ max-width:15ch; }
.h-sub{
  display:block;
  font-weight:300; font-size:.42em;
  letter-spacing:.3em; text-transform:uppercase;
  color:var(--blue);
  margin-top:.65em;
}
.lede{
  margin-top:22px;
  font-size:clamp(15px, 1.7vw, 17px);
  color:var(--ink);
  max-width:60ch;
  text-wrap:pretty;
}
.lede em{ font-style:normal; color:var(--cyan); }

.facts{
  display:grid; grid-template-columns:repeat(4, 1fr);
  gap:1px;
  margin-top:30px;
  background:var(--line);
  border:1px solid var(--line);
}
.facts > div{
  background:rgba(2,10,15,.72);
  padding:13px 14px;
  display:flex; flex-direction:column; gap:4px;
}
.facts dt{
  font-family:var(--font-m); font-size:9px; letter-spacing:.24em;
  color:var(--ink-faint);
}
.facts dd{
  font-family:var(--font-m); font-size:12.5px; font-weight:500;
  color:var(--ink); letter-spacing:.02em;
  font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere;
}

.log{
  margin-top:26px;
  padding:18px 22px;
  border-left:2px solid var(--blue);
  background:rgba(106,184,255,.055);
}
.log-head{
  font-family:var(--font-m); font-size:10px; letter-spacing:.22em;
  color:var(--blue); margin-bottom:9px;
}
.log p:last-child{ font-size:14.5px; color:var(--ink); }
.log b{ font-weight:600; color:#eafcff; }
.log i{ font-style:italic; }

.card blockquote{
  margin-top:28px;
  padding-top:22px;
  border-top:1px dashed rgba(70,240,217,.22);
}
.card blockquote p{
  font-size:clamp(16px, 1.9vw, 19px);
  font-weight:200; line-height:1.55;
  color:#e7f6fa;
}
.card blockquote cite{
  display:block; margin-top:12px;
  font-style:normal; font-family:var(--font-m);
  font-size:10.5px; letter-spacing:.16em;
  color:var(--ink-dim);
}

.zone-visual{
  position:absolute;
  right:clamp(18px, 5vw, 56px);
  top:clamp(26px, 5vw, 58px);
  width:180px; height:132px;
  opacity:.72;
  pointer-events:none;
  filter:drop-shadow(0 0 28px rgba(70,240,217,.18));
}
.visual-fish span{
  position:absolute;
  width:34px; height:10px;
  background:linear-gradient(90deg, rgba(157,255,242,.5), rgba(3,22,30,.82));
  clip-path:polygon(0 50%, 18% 8%, 18% 36%, 76% 0, 100% 50%, 76% 100%, 18% 64%, 18% 92%);
  transform:translate3d(var(--x), var(--y), 0) rotate(var(--r));
  animation:fishFlick 3.8s ease-in-out infinite;
  animation-delay:var(--d);
}
.visual-fish span:nth-child(1){ --x:14px; --y:8px; --r:-9deg; --d:.0s; }
.visual-fish span:nth-child(2){ --x:78px; --y:20px; --r:4deg; --d:.3s; }
.visual-fish span:nth-child(3){ --x:122px; --y:42px; --r:-15deg; --d:.7s; }
.visual-fish span:nth-child(4){ --x:30px; --y:56px; --r:12deg; --d:.1s; }
.visual-fish span:nth-child(5){ --x:96px; --y:72px; --r:-5deg; --d:.8s; }
.visual-fish span:nth-child(6){ --x:146px; --y:88px; --r:8deg; --d:.2s; }
.visual-fish span:nth-child(7){ --x:54px; --y:104px; --r:-18deg; --d:.5s; }
.visual-fish span:nth-child(8){ --x:120px; --y:112px; --r:2deg; --d:.9s; }
.visual-fish span:nth-child(9){ --x:0px; --y:92px; --r:-4deg; --d:.4s; }
@keyframes fishFlick{
  50%{ transform:translate3d(calc(var(--x) + 10px), calc(var(--y) - 5px), 0) rotate(calc(var(--r) + 5deg)); opacity:.9; }
}

.visual-jelly{
  height:170px;
  filter:drop-shadow(0 0 34px rgba(70,240,217,.28));
}
.jelly-bell{
  position:absolute; left:50%; top:10px;
  width:98px; height:66px;
  transform:translateX(-50%);
  border:1px solid rgba(174,255,244,.42);
  border-radius:58% 58% 46% 46% / 86% 86% 28% 28%;
  background:
    radial-gradient(circle at 50% 24%, rgba(240,255,250,.34), transparent 28%),
    radial-gradient(ellipse at 50% 72%, rgba(109,17,43,.46), transparent 42%),
    linear-gradient(180deg, rgba(70,240,217,.28), rgba(70,240,217,.04));
  animation:jellyPulse 3.2s ease-in-out infinite;
}
.visual-jelly span{
  position:absolute; left:50%; top:66px;
  width:1px; height:92px;
  transform:translateX(var(--x));
  background:linear-gradient(to bottom, rgba(174,255,244,.6), rgba(70,240,217,0));
  animation:jellyLine 3.4s ease-in-out infinite;
  animation-delay:var(--d);
}
@keyframes jellyPulse{
  50%{ transform:translateX(-50%) scale(.88, 1.14); opacity:.86; }
}
@keyframes jellyLine{
  50%{ transform:translateX(calc(var(--x) + 8px)) skewX(-8deg); opacity:.55; }
}

.visual-angler{
  width:210px; height:126px;
  filter:drop-shadow(0 0 36px rgba(70,240,217,.18));
}
.angler-body{
  position:absolute; left:40px; top:56px;
  width:126px; height:48px;
  background:linear-gradient(90deg, #020a10, #061b27 58%, #01060a);
  clip-path:polygon(0 50%, 20% 10%, 60% 0, 86% 24%, 100% 50%, 86% 76%, 58% 100%, 18% 86%);
  border:1px solid rgba(106,184,255,.2);
}
.angler-body::before{
  content:"";
  position:absolute; left:20px; top:21px;
  width:30px; height:12px;
  border-bottom:1px solid rgba(220,245,252,.56);
  box-shadow:8px 2px 0 -7px rgba(220,245,252,.56), 16px 3px 0 -7px rgba(220,245,252,.56);
}
.angler-line{
  position:absolute; left:86px; top:28px;
  width:54px; height:46px;
  border-top:1px solid rgba(126,214,255,.38);
  border-left:1px solid transparent;
  border-radius:80% 0 0 0;
  transform:rotate(-18deg);
}
.angler-lure{
  position:absolute; left:136px; top:19px;
  width:12px; height:12px; border-radius:50%;
  background:#eafffb;
  box-shadow:0 0 16px var(--cyan), 0 0 52px rgba(70,240,217,.75);
  animation:lureBlink 2.8s ease-in-out infinite;
}
@keyframes lureBlink{
  40%{ opacity:.52; transform:scale(.76); }
  48%{ opacity:1; transform:scale(1.2); }
}

.visual-pods span{
  position:absolute;
  width:42px; height:18px;
  border-radius:50%;
  border:1px solid rgba(220,246,255,.36);
  background:
    repeating-linear-gradient(90deg, rgba(220,246,255,.22) 0 2px, transparent 2px 7px),
    rgba(180,226,245,.07);
  transform:translate3d(var(--x), var(--y), 0) rotate(var(--r));
  box-shadow:0 0 20px rgba(106,184,255,.14);
  animation:podTwitch 4.4s ease-in-out infinite;
  animation-delay:var(--d);
}
.visual-pods span::before,
.visual-pods span::after{
  content:"";
  position:absolute; right:-9px; top:5px;
  width:12px; height:1px;
  background:rgba(220,246,255,.36);
  transform:rotate(-22deg);
}
.visual-pods span::after{ top:11px; transform:rotate(24deg); }
.visual-pods span:nth-child(1){ --x:8px; --y:14px; --r:-18deg; --d:.1s; }
.visual-pods span:nth-child(2){ --x:98px; --y:28px; --r:12deg; --d:.7s; }
.visual-pods span:nth-child(3){ --x:44px; --y:70px; --r:30deg; --d:1.1s; }
.visual-pods span:nth-child(4){ --x:132px; --y:88px; --r:-9deg; --d:.4s; }
.visual-pods span:nth-child(5){ --x:18px; --y:110px; --r:2deg; --d:1.5s; }
@keyframes podTwitch{
  46%{ transform:translate3d(calc(var(--x) + 16px), calc(var(--y) - 7px), 0) rotate(calc(var(--r) - 12deg)); opacity:.92; }
  52%{ transform:translate3d(calc(var(--x) + 7px), calc(var(--y) - 3px), 0) rotate(calc(var(--r) + 8deg)); }
}

/* scroll reveal */
.reveal{
  opacity:0; transform:translateY(30px);
  transition:opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
.reveal.in{ opacity:1; transform:none; }
.card.reveal > *{
  opacity:0; transform:translateY(18px);
  transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.card.reveal.in > *{ opacity:1; transform:none; }
.card.reveal.in > *:nth-child(1){ transition-delay:.05s }
.card.reveal.in > *:nth-child(2){ transition-delay:.14s }
.card.reveal.in > *:nth-child(3){ transition-delay:.23s }
.card.reveal.in > *:nth-child(4){ transition-delay:.32s }
.card.reveal.in > *:nth-child(5){ transition-delay:.41s }
.card.reveal.in > *:nth-child(6){ transition-delay:.5s }

/* ── finale ─────────────────────────────────────────────────── */

.finale{
  position:relative;
  overflow:hidden;
  padding:22vh clamp(18px, 4vw, 48px) 9vh;
  display:grid; place-items:center;
}
.finale::before{
  content:"";
  position:absolute; inset:6vh -10vw auto;
  height:64vh;
  background:
    radial-gradient(closest-side at 50% 64%, rgba(255,217,160,.18), rgba(255,217,160,.035) 44%, transparent 72%),
    radial-gradient(closest-side at 50% 80%, rgba(70,240,217,.1), transparent 70%);
  opacity:0;
  transform:scale(.74);
  pointer-events:none;
}
body.arrived .finale::before{ animation:stationWake 3.4s var(--ease-out) .2s forwards; }
@keyframes stationWake{
  0%{ opacity:0; transform:scale(.74); filter:blur(12px); }
  54%{ opacity:.82; filter:blur(2px); }
  100%{ opacity:.5; transform:scale(1); filter:none; }
}
.finale-inner{ position:relative; z-index:1; max-width:920px; width:100%; text-align:center; }
.finale .card-tag{ margin-bottom:22px; }
.finale-lede{
  margin:18px auto 0;
  max-width:52ch; color:var(--ink);
  font-size:clamp(15px, 1.7vw, 17px);
}

.station-fig{ margin-top:clamp(30px, 6vh, 60px); }
.station-svg{ width:100%; max-width:880px; height:auto; display:block; margin-inline:auto; }

.seafloor{ fill:url(#floorFade); }
.m9{ animation:m9glide 16s ease-in-out infinite alternate; }
@keyframes m9glide{
  from{ transform:translate(0,0) }
  to  { transform:translate(30px,12px) }
}
.rock{ fill:#08141c; }
.struts path{ stroke:#0a1e29; stroke-width:5; stroke-linecap:round; fill:none; }
.truss path{ stroke:#0c2531; stroke-width:8; stroke-linecap:round; fill:none; }
.dome{ fill:#081a26; stroke:#123140; stroke-width:2; }
.hatch{ fill:#061420; stroke:#123140; stroke-width:1.5; }
.mast{ stroke:#123140; stroke-width:3; stroke-linecap:round; fill:none; }

.win{ fill:#0a1d29; transition:fill .3s; }
.flood, .lamp, .m9-lamp{ opacity:0; }
.beacon{ fill:#123140; }
.beacon-halo{ fill:var(--warm); opacity:0; }
.m9-eye{ fill:#0f2e3d; }

/* lights on */
body.arrived .win{
  animation:flickOn .9s steps(1) forwards;
  animation-delay:calc(var(--i) * 160ms + .3s);
}
@keyframes flickOn{
  0%  { fill:#0a1d29 }
  18% { fill:var(--warm) }
  30% { fill:#0a1d29 }
  46% { fill:var(--warm) }
  58% { fill:#241d10 }
  100%{ fill:var(--warm) }
}
body.arrived .flood{ transition:opacity 2.4s ease 2.1s; opacity:.8; }
body.arrived .lamp{ transition:opacity 1.8s ease 2.5s; opacity:1; }
body.arrived .m9-lamp, body.arrived .m9-eye{ transition:opacity 1.2s ease .1s, fill 1.2s ease .1s; opacity:1; fill-opacity:1; }
body.arrived .m9-eye{ fill:var(--warm); }
body.arrived .beacon{ animation:beaconBlink 3s ease-in-out 2.8s infinite; }
body.arrived .beacon-halo{ animation:beaconHalo 3s ease-in-out 2.8s infinite; }
@keyframes beaconBlink{ 0%,88%,100%{ fill:#123140 } 92%,96%{ fill:var(--warm) } }
@keyframes beaconHalo{ 0%,88%,100%{ opacity:0 } 93%{ opacity:.35 } }

.fig-cap{
  margin-top:14px;
  font-family:var(--font-m); font-size:10.5px; letter-spacing:.22em;
  color:var(--ink-dim);
}
body.arrived .fig-cap{ color:var(--warm); }

.station-facts{ max-width:720px; margin-inline:auto; margin-top:clamp(28px, 5vh, 48px); text-align:left; }

.dock-console{
  --dock-x:41%;
  --dock-y:35%;
  width:min(100%, 780px);
  margin:clamp(24px, 4.8vh, 42px) auto 0;
  display:grid;
  grid-template-columns:176px minmax(0, 1fr);
  grid-template-areas:"scope readout" "scope channels";
  gap:16px 20px;
  align-items:center;
  padding:18px;
  text-align:left;
  border:1px solid rgba(255,217,160,.22);
  background:
    linear-gradient(90deg, rgba(255,217,160,.035) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(0deg, rgba(70,240,217,.035) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(145deg, rgba(8,23,29,.78), rgba(2,9,13,.88));
  box-shadow:0 24px 80px rgba(0,3,6,.5), inset 0 0 44px rgba(255,217,160,.035);
}
.dock-scope{
  grid-area:scope;
  position:relative;
  aspect-ratio:1;
  border:1px solid rgba(70,240,217,.22);
  border-radius:50%;
  overflow:hidden;
  background:
    radial-gradient(circle, transparent 0 23%, rgba(70,240,217,.12) 23.5% 24%, transparent 24.5% 47%, rgba(70,240,217,.09) 47.5% 48%, transparent 48.5%),
    linear-gradient(90deg, transparent calc(50% - 1px), rgba(70,240,217,.16) 50%, transparent calc(50% + 1px)),
    linear-gradient(0deg, transparent calc(50% - 1px), rgba(70,240,217,.16) 50%, transparent calc(50% + 1px)),
    radial-gradient(circle at 50% 50%, rgba(70,240,217,.08), rgba(1,6,10,.72));
  box-shadow:inset 0 0 34px rgba(70,240,217,.08), 0 0 30px rgba(255,217,160,.06);
}
.dock-scope::after{
  content:"";
  position:absolute;
  left:var(--dock-x);
  top:var(--dock-y);
  width:12px; height:12px;
  transform:translate(-50%, -50%);
  border-radius:50%;
  background:var(--warm);
  box-shadow:0 0 16px var(--warm), 0 0 42px rgba(255,217,160,.42);
  animation:dockPing 1.45s ease-out infinite;
}
.scope-sweep{
  position:absolute; inset:50% 0 0 50%;
  width:50%; height:50%;
  transform-origin:0 0;
  background:conic-gradient(from -18deg, rgba(70,240,217,.22), rgba(70,240,217,0) 42deg);
  animation:scopeSweep 5.6s linear infinite;
}
.scope-contact{
  position:absolute;
  width:5px; height:5px; border-radius:50%;
  background:rgba(106,184,255,.72);
  box-shadow:0 0 12px rgba(106,184,255,.5);
}
.c1{ left:41%; top:35%; }
.c2{ left:58%; top:47%; }
.c3{ left:50%; top:66%; }
@keyframes scopeSweep{ to{ transform:rotate(360deg); } }
@keyframes dockPing{
  0%{ box-shadow:0 0 0 0 rgba(255,217,160,.55), 0 0 16px var(--warm); }
  100%{ box-shadow:0 0 0 24px rgba(255,217,160,0), 0 0 16px var(--warm); }
}
.dock-readout{ grid-area:readout; align-self:end; }
.dock-readout .panel-label{ margin-bottom:8px; color:var(--warm); }
.dock-readout p:last-child{
  color:var(--ink);
  font-size:14px;
  line-height:1.7;
  text-wrap:pretty;
}
.dock-channels{
  grid-area:channels;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:8px;
}
.dock-channels button{
  min-height:58px;
  padding:11px 12px;
  text-align:left;
  color:var(--ink-dim);
  background:rgba(1,6,10,.58);
  border:1px solid rgba(70,240,217,.16);
  font-family:var(--font-m);
  cursor:pointer;
  transition:border-color .25s var(--ease-out), color .25s var(--ease-out), background .25s var(--ease-out), transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.dock-channels button:hover,
.dock-channels button:focus-visible,
.dock-channels button.active{
  color:#fff8ea;
  border-color:rgba(255,217,160,.55);
  background:rgba(255,217,160,.075);
  box-shadow:0 0 22px rgba(255,217,160,.12), inset 0 0 20px rgba(255,217,160,.035);
}
.dock-channels button:hover{ transform:translateY(-2px); }
.dock-channels b{
  display:block;
  margin-bottom:4px;
  font-size:10px;
  font-weight:600;
  letter-spacing:.16em;
}
.dock-channels span{
  display:block;
  font-size:9.5px;
  line-height:1.35;
  letter-spacing:.07em;
  color:var(--ink-faint);
}
.dock-channels button.active span{ color:rgba(255,217,160,.74); }

.finale-line{
  margin-top:clamp(34px, 7vh, 70px);
  font-size:clamp(1.7rem, 4.2vw, 2.9rem);
  font-weight:200; letter-spacing:.01em;
  color:var(--ink);
}
.finale-line span{ font-weight:700; color:var(--warm); }

.finale-ps{
  margin:clamp(26px, 5vh, 44px) auto 0;
  max-width:560px;
  font-family:var(--font-m);
  font-size:10.5px; letter-spacing:.22em; line-height:2.2;
  color:var(--ink-faint);
  opacity:0;
  transition:opacity 1.8s ease 3.6s;
}
body.arrived .finale-ps{ opacity:1; }
.finale-ps b{ font-weight:500; color:var(--warm); }

/* ── footer ─────────────────────────────────────────────────── */

.foot{
  position:relative; z-index:1;
  text-align:center;
  padding:64px 24px calc(64px + env(safe-area-inset-bottom, 0px));
  border-top:1px solid var(--line);
  font-family:var(--font-m); font-size:11.5px; letter-spacing:.08em;
  color:var(--ink-dim);
  background:
    radial-gradient(70% 140% at 50% 0%, rgba(14,77,92,.16), transparent 58%),
    linear-gradient(rgba(1,6,10,.86), rgba(0,2,4,.96));
  text-shadow:0 1px 10px rgba(0,0,0,.85);
}
.foot-depth{ color:var(--ink-faint); letter-spacing:.3em; font-size:10px; margin-bottom:18px; }
.foot p{ margin-bottom:10px; }
.foot nav{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:4px 14px; margin-bottom:14px; }
.foot nav a{ color:var(--cyan); padding:13px 4px; display:inline-block; }
.foot nav a:hover{ text-decoration:underline; text-underline-offset:4px; }
.foot nav span{ color:var(--ink-faint); align-self:center; }
.foot-fiction{ color:var(--ink-faint); font-size:10.5px; }

/* ══ guide page ═════════════════════════════════════════════ */

body.guide-page{
  --light-a:.28;
  --pressure-p:.82;
  --depth-p:.72;
  background:var(--hadal);
}
.guide-bg{
  background:
    radial-gradient(80% 48% at 50% -8%, rgba(14,77,92,.52), transparent 72%),
    linear-gradient(180deg, #04141c, #01060a 58%);
}
.guide-bg .rays{ opacity:.12; }
.guide-wrap{
  position:relative;
  max-width:1040px;
  margin-inline:auto;
  padding:132px clamp(20px, 6vw, 72px) 96px;
}
.guide-wrap::before{
  content:"";
  position:absolute; left:clamp(20px, 6vw, 72px); top:130px; bottom:70px;
  width:1px;
  background:linear-gradient(to bottom, rgba(70,240,217,.35), rgba(70,240,217,.04));
  transform:translateX(-24px);
}
.guide-hero{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 260px;
  gap:clamp(28px, 6vw, 70px);
  align-items:end;
  margin-bottom:54px;
}
.guide-kicker{
  font-family:var(--font-m); font-size:11px; letter-spacing:.3em;
  color:var(--cyan); margin-bottom:16px;
}
.guide-wrap h1{
  font-weight:800; font-size:clamp(2rem, 6vw, 3.4rem);
  line-height:1.05; letter-spacing:.01em; margin-bottom:22px;
  max-width:10ch;
  text-wrap:balance;
}
.guide-wrap h2{
  font-weight:700; font-size:clamp(1.2rem, 3vw, 1.55rem);
  margin:46px 0 14px;
  padding-top:26px;
  border-top:1px dashed rgba(70,240,217,.24);
  color:#e8f8fb;
  text-wrap:balance;
}
.guide-wrap p, .guide-wrap li{ color:var(--ink); font-size:15.5px; max-width:74ch; }
.guide-wrap p + p, .tokens + p{ margin-top:16px; }
.guide-wrap ul{ padding-left:20px; display:grid; gap:10px; margin-top:12px; }
.guide-wrap li::marker{ color:var(--cyan); }
.guide-wrap code{
  font-family:var(--font-m); font-size:.86em;
  color:var(--cyan);
  background:rgba(70,240,217,.08);
  padding:2px 6px; border-radius:4px;
  overflow-wrap:anywhere;
}
.guide-recorder{
  position:relative;
  padding:18px 18px 20px;
  min-height:190px;
  border:1px solid rgba(70,240,217,.26);
  background:
    linear-gradient(90deg, rgba(70,240,217,.04) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(0deg, rgba(106,184,255,.035) 1px, transparent 1px) 0 0 / 32px 32px,
    rgba(2,11,17,.64);
  box-shadow:0 22px 80px rgba(0,3,6,.45), inset 0 0 44px rgba(70,240,217,.04);
  font-family:var(--font-m);
}
.guide-recorder::before,
.guide-recorder::after{
  content:""; position:absolute; width:24px; height:24px;
}
.guide-recorder::before{
  top:-1px; left:-1px; border-top:2px solid var(--cyan); border-left:2px solid var(--cyan);
}
.guide-recorder::after{
  right:-1px; bottom:-1px; border-right:2px solid var(--blue); border-bottom:2px solid var(--blue);
}
.guide-recorder span{
  display:block;
  margin-bottom:16px;
  font-size:9px;
  letter-spacing:.3em;
  color:var(--cyan);
}
.guide-recorder b{
  display:block;
  margin-bottom:18px;
  font-size:20px;
  line-height:1;
  color:var(--ink);
  letter-spacing:.08em;
}
.guide-recorder i{
  display:block;
  padding:10px 0;
  border-top:1px solid rgba(70,240,217,.14);
  color:var(--ink-dim);
  font-style:normal;
  font-size:10.5px;
  letter-spacing:.09em;
}
.tokens{
  display:flex; flex-wrap:wrap; gap:10px; margin-top:16px;
  font-family:var(--font-m); font-size:11px; letter-spacing:.05em;
}
.tokens span{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--line); padding:8px 12px;
  color:var(--ink-dim);
}
.tokens i{ width:14px; height:14px; border-radius:3px; display:inline-block; border:1px solid rgba(255,255,255,.14); }
.guide-quote{
  margin-top:16px; margin-bottom:18px; padding:18px 22px;
  border-left:2px solid var(--blue);
  background:rgba(106,184,255,.055);
  font-size:14.5px;
}

/* ══ responsive ═════════════════════════════════════════════ */

@media (min-width: 1180px){
  .hero-inner{
    grid-template-columns:minmax(188px, 245px) minmax(0, 1fr) minmax(188px, 250px);
    grid-template-areas:"boot core meta" "ladder ladder ladder";
    column-gap:clamp(28px, 4vw, 54px);
    row-gap:clamp(24px, 5vh, 44px);
    text-align:left;
  }
  .hero-core{ text-align:left; }
  .hero-title{ font-size:clamp(4.4rem, 8vw, 7.25rem); }
  .hero-core::before{ left:46%; }
  .hero-sub{ margin-left:0; margin-right:0; }
  .dive-cue{ align-items:flex-start; margin-left:2px; }
  .hero-panel{ justify-self:stretch; align-self:center; }
  .hero-meta{
    align-self:center;
    display:grid;
    justify-content:stretch;
    gap:14px;
    padding:16px 0 16px 22px;
    border-left:1px solid rgba(70,240,217,.28);
    background:linear-gradient(90deg, rgba(70,240,217,.05), transparent);
  }
  .hero-meta li{
    grid-template-columns:1fr;
    gap:3px;
  }
  .depth-ladder{
    width:min(76%, 780px);
    justify-self:end;
  }

  .zone{
    padding-inline:clamp(70px, 10vw, 170px);
  }
  .zone--sun,
  .zone--midnight{ justify-items:end; }
  .zone--twilight,
  .zone--abyss{ justify-items:start; }
  .zone--midnight .card{ margin-top:-8vh; }
  .zone--abyss .card{ margin-bottom:-4vh; }
}

@media (min-width: 900px) and (max-width: 1179px){
  .hero-inner{ max-width:720px; }
  .hero-panel{
    display:grid;
    grid-template-columns:minmax(0, 1fr) auto;
    column-gap:20px;
    align-items:end;
  }
  .hero-panel .panel-label{ grid-column:1 / -1; }
  .panel-note{ max-width:28ch; }
  .zone-visual{ opacity:.46; }
}

/* keep card content clear of the rail on mid widths */
@media (min-width: 761px){
  main, .foot{ padding-left:var(--rail-w); }
  .topbar{ padding-left:calc(var(--rail-w) + 6px); }
}
@media (min-width: 761px) and (max-width: 1023px){
  .zone-nav a{ padding:19px 6px; }
  .brand-pre{ display:none; }             /* keep the wordmark, drop the prefix */
  .status-chip span{ display:none; }      /* dot-only status — colour still signals DOCKED */
  .status-chip{ padding:7px 9px; }
}

@media (max-width: 760px){
  .rail{ display:none; }
  .hudstrip{ display:flex; }

  .topbar{
    flex-wrap:wrap;
    padding:0;
    row-gap:0;
  }
  .brand-pre{ display:none; }
  .brand{ padding:13px 14px 11px; }
  .status-chip{ margin-right:14px; padding:5px 11px; font-size:10px; }
  .zone-nav{
    order:3; width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    border-top:1px solid rgba(70,240,217,.09);
    padding:0 30px 0 8px;
    -webkit-mask-image:linear-gradient(90deg, #000 0 93%, transparent);
            mask-image:linear-gradient(90deg, #000 0 93%, transparent);
  }
  .zone-nav::-webkit-scrollbar{ display:none; }
  .zone-nav a{ padding:15.5px 12px; font-size:10.5px; }

	  .hero{ padding-top:130px; }
  .hero-inner{ gap:17px; }
  .hero-panel{
    width:100%;
    padding-left:14px;
  }
  .panel-note{ display:none; }
  .hero-title{ font-size:clamp(2.6rem, 15vw, 4.25rem); }
  .hero-sub{ max-width:34ch; }
  .hero-meta{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px 12px;
    width:100%;
    max-width:350px;
    margin-inline:auto;
    text-align:left;
  }
  .hero-meta li{
    grid-template-columns:1fr;
    gap:2px;
    padding-top:8px;
    border-top:1px solid rgba(70,240,217,.16);
  }
  .depth-ladder{
    grid-template-columns:1fr;
    gap:8px;
    width:min(100%, 350px);
    padding-top:0;
    border-top:0;
    border-left:1px solid rgba(70,240,217,.24);
    text-align:left;
  }
  .depth-ladder::before{
    top:0; left:-2px;
    width:3px;
    height:calc(var(--depth-p) * 100%);
  }
  .depth-ladder span{
    grid-template-columns:56px 1fr;
    padding:0 0 0 16px;
    font-size:8.5px;
  }
  .depth-ladder span::before{
    top:50%; left:-5px;
    width:9px; height:1px;
  }
	  .drift{ margin:30vh auto; }
	  .facts{ grid-template-columns:1fr 1fr; }
	  .zone{ padding:10vh 16px; }
	  .card{ padding:26px 20px 30px; }
  .card h2{ max-width:100%; }
  .zone-visual{
    right:8px; top:10px;
    width:142px; height:100px;
    opacity:.25;
    transform:scale(.86);
    transform-origin:top right;
  }
	  .finale{ padding-top:16vh; }
  .dock-console{
    grid-template-columns:1fr;
    grid-template-areas:"scope" "readout" "channels";
    justify-items:center;
    padding:16px;
  }
  .dock-scope{ width:min(58vw, 190px); }
  .dock-readout{ text-align:center; }
  .dock-channels{ width:100%; grid-template-columns:1fr; }
  .dock-channels button{ min-height:52px; }
	  main{ padding-bottom:54px; }   /* clear the HUD strip */
	  .foot{ padding-bottom:calc(96px + env(safe-area-inset-bottom, 0px)); }
  .guide-wrap{
    padding:130px 20px 82px;
  }
  .guide-wrap::before{ display:none; }
  .guide-hero{
    grid-template-columns:1fr;
    gap:22px;
    margin-bottom:38px;
  }
  .guide-recorder{
    min-height:auto;
  }
}

@media (max-width: 480px){
  .foot nav{ flex-direction:column; gap:0; }
  .foot nav span{ display:none; }         /* no orphaned dot separators */
  .foot nav a{ padding:13px 10px; }  /* ≥44px tap target when stacked */
  .tokens span{
    width:100%;
    justify-content:flex-start;
  }
  .guide-wrap h1{ max-width:11ch; }
}

@media (max-width: 420px){
  .hero-meta{ gap:8px 18px; font-size:10px; }
  .boot{ font-size:9.5px; }
  .hero-title{ font-size:clamp(2.4rem, 14vw, 3.75rem); }
  .card-tag{ letter-spacing:.2em; }
}

/* ══ reduced motion ═════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  html:focus-within{ scroll-behavior:auto; }
  .rays{ animation:none; }
  .depth-glow, .pressure-field{ transform:none !important; }
  .dive-cue i{ animation:none; }
  .status-chip i{ animation:none; }
  .m9{ animation:none; }
  .finale::before{ animation:none !important; opacity:.28; transform:none; filter:none; }
  .scope-sweep,
  .dock-scope::after{ animation:none !important; }
  .visual-fish span,
  .jelly-bell,
  .visual-jelly span,
  .angler-lure,
  .visual-pods span{ animation:none !important; }
  .reveal, .card.reveal > *, .reveal-load, .hero-title .ch{
    opacity:1 !important; transform:none !important; filter:none !important;
    transition:none !important;
  }
  body.arrived .win{ animation:none; fill:var(--warm); }
  body.arrived .beacon{ animation:none; fill:var(--warm); }
  body.arrived .beacon-halo{ animation:none; opacity:.25; }
  body.arrived .flood, body.arrived .lamp{ transition:none; }
  .finale-ps{ transition:none; }
}