/* ============================================================
   HADAL INSTITUTE — the page is a descent.
   Palette: #020610 abyss · #04182B twilight · #0E3A4D mesopelagic
            #7FF4E3 biolume cyan · #F2FBFF foam white
   ============================================================ */

:root{
  --abyss:#020610;
  --twilight:#04182B;
  --meso:#0E3A4D;
  --lume:#7FF4E3;
  --foam:#F2FBFF;
  --ink:rgba(242,251,255,.88);
  --ink-dim:rgba(242,251,255,.6);
  --hairline:rgba(127,244,227,.22);
  --hairline-dim:rgba(127,244,227,.12);
  --display:"Fraunces",serif;
  --body:"Atkinson Hyperlegible",sans-serif;
  --mono:"IBM Plex Mono",monospace;
  --col:44rem;
}

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

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  background:var(--twilight); /* no-JS fallback; canvas paints the real gradient */
  color:var(--ink);
  font-family:var(--body);
  font-size:1.0625rem;
  line-height:1.72;
  overflow-x:hidden;
}

::selection{background:rgba(127,244,227,.28);color:var(--foam)}

:focus-visible{outline:2px solid var(--lume);outline-offset:3px;border-radius:2px}

a{color:var(--lume);text-decoration-color:rgba(127,244,227,.4);text-underline-offset:.2em}
a:hover{text-decoration-color:var(--lume)}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- fixed layers ---------- */

#sea{
  position:fixed;inset:0;width:100%;height:100%;
  z-index:0;pointer-events:none;
}
html:not(.js) #sea{display:none}

.vignette{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 42%,transparent 55%,rgba(2,6,16,.5) 100%);
}

/* grain */
body::after{
  content:"";position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.05;
  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='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

main,header.topbar,footer.floor{position:relative;z-index:3}

/* ---------- top bar ---------- */

.topbar{
  position:fixed;top:0;left:0;right:0;z-index:10;
  display:flex;justify-content:space-between;align-items:baseline;
  padding:1.1rem 2rem;
  background:linear-gradient(to bottom,rgba(2,6,16,.55),transparent);
}
.wordmark{
  font-family:var(--display);
  font-size:1.15rem;font-weight:500;
  font-variation-settings:"opsz" 40,"SOFT" 40;
  color:var(--foam);text-decoration:none;letter-spacing:.01em;
}
.wordmark span{color:var(--lume);font-style:italic;font-weight:340}
.topbar nav{display:flex;gap:1.6rem}
.topbar nav a{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-dim);text-decoration:none;
}
.topbar nav a:hover{color:var(--lume)}

/* ---------- HUD (descent instruments) ---------- */

.hud{
  position:fixed;left:1.9rem;top:50%;transform:translateY(-50%);
  z-index:9;display:flex;flex-direction:column;gap:1rem;
  font-family:var(--mono);
  opacity:0;transition:opacity .8s ease .4s;
}
html.js .hud{opacity:1}
.hud-label{
  display:block;font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(127,244,227,.55);margin-bottom:.15rem;
}
.hud-depth{font-size:1.3rem;color:var(--lume);font-weight:500;white-space:nowrap}
.hud-val{font-size:.78rem;color:var(--ink-dim);white-space:nowrap}
.unit{margin-left:.18em;opacity:.65;font-weight:400}
.hud-depth .unit{font-size:.8em}
.hud-zone{color:rgba(127,244,227,.8);font-style:normal}
.hud-zone.flash{animation:zoneflash 1.1s ease}
@keyframes zoneflash{
  0%{color:var(--foam);text-shadow:0 0 14px rgba(127,244,227,.95)}
  100%{color:rgba(127,244,227,.8);text-shadow:0 0 0 rgba(127,244,227,0)}
}
@media (prefers-reduced-motion:reduce){.hud-zone.flash{animation:none}}

.hud-track{
  position:relative;width:1px;height:9.5rem;margin-left:2px;
  background:linear-gradient(to bottom,rgba(127,244,227,.5),rgba(127,244,227,.12));
}
.hud-tick{position:absolute;left:-2px;width:5px;height:1px;background:rgba(127,244,227,.5)}
.hud-cursor{
  position:absolute;left:-3px;top:0;width:7px;height:7px;border-radius:50%;
  background:var(--lume);box-shadow:0 0 8px rgba(127,244,227,.8);
  transform:translateY(-3px);
}

.listen{
  display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(127,244,227,.75);
  background:rgba(4,24,43,.5);border:1px solid var(--hairline);border-radius:2rem;
  padding:.45rem .8rem;cursor:pointer;
  transition:color .3s,border-color .3s,background .3s;
}
.listen:hover{color:var(--lume);border-color:rgba(127,244,227,.5)}
.listen[aria-pressed="true"]{color:var(--abyss);background:var(--lume);border-color:var(--lume)}
html:not(.js) .listen{display:none}

/* ---------- structure & type ---------- */

main{display:block}

.section,.hero{
  max-width:var(--col);
  margin-inline:auto;
  padding-inline:1.5rem;
}

.eyebrow{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--lume);margin-bottom:1.4rem;
}

h1,h2{
  font-family:var(--display);
  font-weight:330;
  font-variation-settings:"opsz" 120,"SOFT" 30;
  color:var(--foam);
  line-height:1.12;
  letter-spacing:-.01em;
  text-wrap:balance;
}
h1 em,h2 em{font-style:italic;font-variation-settings:"opsz" 120,"SOFT" 70,"WONK" 1}

/* ---------- hero ---------- */

.hero{
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  padding-top:14vh;
}
.hero h1{font-size:clamp(2.6rem,6.4vw,4.9rem);max-width:16ch}
.hero .lede{
  margin-top:2rem;max-width:34rem;
  font-size:clamp(1.05rem,1.5vw,1.2rem);color:var(--ink-dim);
}
.descend-cue{
  margin-top:4.5rem;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(127,244,227,.65);
}
.cue-arrow{display:inline-block;margin-right:.6rem;animation:sink 2.6s cubic-bezier(.45,0,.35,1) infinite}
@keyframes sink{
  0%,100%{transform:translateY(-3px);opacity:.5}
  50%{transform:translateY(4px);opacity:1}
}

/* ---------- zone boundaries ---------- */

.boundary{
  max-width:56rem;margin:38vh auto;padding-inline:1.5rem;
  display:flex;align-items:center;gap:1.4rem;
  font-family:var(--mono);
}
.boundary::before,.boundary::after{
  content:"";flex:1;height:1px;
  background:linear-gradient(to right,transparent,var(--hairline),transparent);
}
.boundary-depth{
  font-size:.95rem;color:var(--lume);white-space:nowrap;letter-spacing:.08em;
}
.boundary-note{
  font-size:.68rem;letter-spacing:.06em;color:var(--ink-dim);
  max-width:22rem;
}

/* ---------- ghost depth captions (records passed on the way down) ---------- */

.ghost{
  max-width:var(--col);margin:26vh auto;padding-inline:1.5rem;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;line-height:1.9;
  color:rgba(242,251,255,.45);
}
.ghost.alt{text-align:right}

/* ---------- sections ---------- */

.section{margin-block:34vh}
.section h2{font-size:clamp(1.9rem,3.6vw,3rem);max-width:22ch}
.prose{margin-top:2rem;max-width:38rem}
.prose p+p{margin-top:1.2rem}
.prose strong{color:var(--foam);font-weight:700}

/* stats */
.statrow{
  margin-top:3.2rem;display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;
  border-top:1px solid var(--hairline-dim);padding-top:1.6rem;
}
.statrow dt{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-dim);margin-bottom:.4rem;
}
.statrow dd{
  font-family:var(--display);font-size:1.9rem;font-weight:340;
  font-variation-settings:"opsz" 60;color:var(--lume);
}

/* programs */
.programs{
  margin-top:2.8rem;
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--hairline-dim);
  border:1px solid var(--hairline-dim);
}
.program{
  background:rgba(2,6,16,.55);
  padding:1.8rem 1.7rem 2rem;
}
.program h3{
  font-family:var(--display);font-weight:420;font-size:1.25rem;color:var(--foam);
  font-variation-settings:"opsz" 60,"SOFT" 40;
  margin-bottom:.8rem;
}
.program-no{
  display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;
  color:var(--lume);margin-bottom:.7rem;
}
.program p{font-size:.95rem;color:var(--ink-dim)}

/* ---------- specimen labels ---------- */

.specimen-wrap{
  max-width:var(--col);margin:44vh auto;padding-inline:1.5rem;
  display:flex;justify-content:flex-start;
}
.specimen-wrap.alt{justify-content:flex-end}
.specimen{
  max-width:26.5rem;width:100%;
  border:1px solid var(--hairline);
  background:rgba(2,6,16,.6);
  padding:1.5rem 1.7rem 1.7rem;
  position:relative;
}
.specimen::before{ /* punched hole, like a tag */
  content:"";position:absolute;top:.85rem;right:.85rem;width:7px;height:7px;
  border:1px solid var(--hairline);border-radius:50%;
}
.specimen-head{
  display:flex;justify-content:space-between;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(127,244,227,.7);
  border-bottom:1px dashed var(--hairline-dim);
  padding-bottom:.8rem;margin-bottom:1.2rem;
  padding-right:1.4rem;
}
.specimen-glyph{
  width:7.5rem;height:auto;color:rgba(127,244,227,.75);margin-bottom:1rem;
}
.glyph-lure{fill:var(--lume)}
html.js .glyph-lure{animation:lure 3.4s ease-in-out infinite}
@keyframes lure{0%,100%{opacity:.25}45%,60%{opacity:1}}
@media (prefers-reduced-motion:reduce){html.js .glyph-lure{animation:none;opacity:1}}
.species{
  font-family:var(--display);font-weight:350;font-size:1.7rem;color:var(--foam);line-height:1.15;
}
.species em{font-variation-settings:"opsz" 90,"SOFT" 60,"WONK" 1}
.common{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-dim);margin-top:.5rem;
}
.specimen-note{font-size:.92rem;color:var(--ink-dim);margin-top:1rem}

/* ---------- sonar timeline ---------- */

.sonar{
  list-style:none;margin-top:3rem;
  border-left:1px solid var(--hairline-dim);
}
.ping{
  position:relative;padding:0 0 2.8rem 2.4rem;
}
.ping:last-child{padding-bottom:.4rem}
.ping-dot{
  position:absolute;left:-4.5px;top:.5rem;width:8px;height:8px;border-radius:50%;
  background:var(--lume);box-shadow:0 0 10px rgba(127,244,227,.7);
}
.ping-dot::before,.ping-dot::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:1px solid var(--lume);opacity:0;
}
.ping.live .ping-dot::before{animation:ring 3.8s cubic-bezier(.2,.6,.35,1) infinite}
.ping.live .ping-dot::after{animation:ring 3.8s cubic-bezier(.2,.6,.35,1) 1.1s infinite}
@keyframes ring{
  0%{transform:scale(1);opacity:.8}
  70%{transform:scale(5.5);opacity:0}
  100%{transform:scale(5.5);opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .ping.live .ping-dot::before,.ping.live .ping-dot::after{animation:none;transform:scale(2.6);opacity:.35}
}
.ping-meta{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--lume);margin-bottom:.5rem;
}
.ping-body p:not(.ping-meta){font-size:.95rem;color:var(--ink-dim);max-width:34rem}

/* ---------- the dive ---------- */

.dive .divetable{
  margin-top:3rem;width:100%;border-collapse:collapse;
  font-family:var(--mono);font-size:.8rem;
}
.divetable tr{border-top:1px solid var(--hairline-dim)}
.divetable tr:last-child{border-bottom:1px solid var(--hairline-dim)}
.divetable th{
  text-align:left;font-weight:400;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-dim);padding:.7rem 0;font-size:.68rem;
}
.divetable td{text-align:right;color:var(--lume);padding:.7rem 0}
.dive-coda{
  margin-top:3rem;max-width:36rem;
  font-family:var(--display);font-weight:340;font-style:italic;
  font-variation-settings:"opsz" 40,"SOFT" 60;
  font-size:1.25rem;line-height:1.55;color:rgba(242,251,255,.75);
}

/* ---------- floor / footer ---------- */

.floor{
  margin-top:30vh;
  background:linear-gradient(to bottom,transparent,rgba(2,6,16,.85));
  padding:5rem 1.5rem 2.5rem;
}
.floor-mark{
  font-family:var(--mono);font-size:.85rem;letter-spacing:.2em;color:var(--lume);
  text-align:center;
}
.floor-mark::before{
  content:"";display:block;width:3.5rem;height:1px;margin:0 auto 1.4rem;
  background:linear-gradient(to right,transparent,var(--hairline),transparent);
}
.floor-line{
  font-family:var(--display);font-weight:330;font-variation-settings:"opsz" 100,"SOFT" 40;
  font-size:clamp(1.6rem,3.4vw,2.6rem);color:var(--foam);
  text-align:center;margin:1.2rem auto 0;max-width:24ch;line-height:1.2;text-wrap:balance;
}
.floor-cols{
  max-width:var(--col);margin:4.5rem auto 0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem;
  font-size:.88rem;color:var(--ink-dim);
}
.floor-h{
  font-family:var(--mono);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(127,244,227,.7);margin-bottom:.7rem;
}
.credit{
  max-width:var(--col);margin:4rem auto 0;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;
  color:rgba(242,251,255,.4);
}
.credit a{color:rgba(127,244,227,.6)}

/* ---------- responsive ---------- */

@media (max-width:1100px){
  .hud{left:1.1rem}
}

@media (max-width:900px){
  .topbar{padding:1rem 1.2rem}
  .topbar nav{gap:1rem}
  .topbar nav a{font-size:.64rem;letter-spacing:.1em}

  /* HUD becomes a bottom strip */
  .hud{
    left:0;right:0;top:auto;bottom:0;transform:none;
    flex-direction:row;align-items:center;gap:1.1rem;
    padding:.6rem 1rem;
    background:rgba(2,6,16,.78);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    border-top:1px solid var(--hairline-dim);
  }
  .hud-track{display:none}
  .hud-depth{font-size:.95rem}
  .hud-val{font-size:.66rem}
  .hud-block{white-space:nowrap}
  .hud-label{font-size:.5rem;margin-bottom:.05rem}
  .listen{margin-left:auto;padding:.35rem .6rem;font-size:.55rem}
  .listen svg{width:11px;height:11px}
  main{padding-bottom:4.5rem}

  .statrow{grid-template-columns:repeat(2,1fr)}
  .programs{grid-template-columns:1fr}
  .floor-cols{grid-template-columns:1fr 1fr}
}

@media (max-width:600px){
  body{font-size:1rem}
  .hide-sm{display:none}
  .topbar nav a:nth-child(3){display:none} /* keep bar airy at 390 */
  .hero{padding-top:18vh}
  .hero h1{font-size:clamp(2.3rem,10vw,3rem)}
  .boundary{flex-wrap:wrap;gap:.7rem;margin-block:30vh}
  .boundary::before{display:none}
  .boundary-note{max-width:100%}
  .section{margin-block:26vh}
  .specimen-wrap{margin-block:32vh}
  .specimen{max-width:100%}
  .statrow dd{font-size:1.5rem}
  .floor-cols{grid-template-columns:1fr;gap:1.8rem}
  .hud .hud-block:nth-child(4){display:none} /* hide temp on narrowest */
}

@media (prefers-reduced-motion:reduce){
  .cue-arrow{animation:none}
}