/* ============================================================
   ABYSSAL INSTITUTE — a descent from surface light to trench dark
   Spectral (display serif) · Space Grotesk (sans) · IBM Plex Mono (gauge)
   ============================================================ */

:root{
  /* depth ramp (set continuously by JS on the canvas; these are for chrome) */
  --aqua:#cfeeea;
  --twilight:#2a6b8a;
  --midnight:#10314f;
  --abyss:#04070f;
  --biolum:#4ff0e0;
  --green:#7dffb0;
  --lure:#a9e8ff;

  /* per-station theme (overridden by station classes) */
  --plate: rgba(10,32,42,.55);
  --plate-border: rgba(79,240,224,.22);
  --ink:#eaf7f6;
  --ink-dim:rgba(234,247,246,.66);
  --accent:var(--biolum);

  --serif:'Spectral', Georgia, serif;
  --sans:'Space Grotesk', system-ui, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, monospace;

  --edge: clamp(20px, 5vw, 96px);
  --maxw: 1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html.qa{scroll-behavior:auto}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--abyss);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
img,svg{max-width:100%}

/* ---- fixed descending world ---- */
#deep{
  position:fixed; inset:0;
  width:100%; height:100%;
  z-index:0;
  display:block;
}
.lamp{
  position:fixed; inset:0; z-index:1;
  pointer-events:none;
  mix-blend-mode:screen;
  opacity:0;
  transition:opacity .6s ease;
  background:radial-gradient(240px 240px at var(--mx,50%) var(--my,50%),
     rgba(169,232,255,.16), rgba(79,240,224,.06) 40%, transparent 68%);
}
body.deep-lamp .lamp{opacity:1}

/* ---- skip link ---- */
.skip-link{
  position:absolute; left:12px; top:-60px; z-index:100;
  background:var(--biolum); color:#02202a; font-family:var(--mono);
  padding:10px 16px; border-radius:8px; font-size:14px;
  transition:top .2s;
}
.skip-link:focus{top:12px}

/* ---- header ---- */
.site-head{
  position:fixed; top:0; left:0; right:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px var(--edge);
  color:var(--ink);
  transition:color .5s ease;
}
.brand{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--serif); font-weight:500; font-size:20px;
  letter-spacing:.01em; text-decoration:none; color:inherit;
}
.brand-mark{width:20px; height:26px; color:var(--accent)}
.brand-sub{font-family:var(--mono); font-size:11px; letter-spacing:.34em;
  text-transform:uppercase; margin-left:8px; opacity:.72; vertical-align:middle}
.site-head nav{display:flex; align-items:center; gap:26px}
.site-head nav a{
  color:inherit; text-decoration:none; font-size:14px; letter-spacing:.02em;
  opacity:.82; transition:opacity .2s, color .2s;
}
.site-head nav a:hover{opacity:1; color:var(--accent)}
.nav-cta{
  border:1px solid currentColor; border-radius:100px; padding:8px 16px;
  opacity:1 !important; font-family:var(--mono); font-size:12px !important;
  letter-spacing:.08em; text-transform:uppercase;
}
.nav-cta:hover{background:var(--accent); color:var(--abyss)!important; border-color:var(--accent)}

/* ---- depth gauge ---- */
.gauge{
  position:fixed; z-index:20;
  left:var(--edge); bottom:34px;
  display:flex; flex-direction:column; gap:6px;
  font-family:var(--mono); color:var(--ink);
  transition:color .5s ease;
  pointer-events:none;
}
.gauge__track{
  position:relative; width:3px; height:120px;
  background:rgba(255,255,255,.14); border-radius:3px; margin-bottom:8px;
}
.gauge__fill{
  position:absolute; top:0; left:0; width:100%; height:0%;
  background:linear-gradient(var(--lure), var(--biolum), var(--midnight));
  border-radius:3px;
  box-shadow:0 0 10px rgba(79,240,224,.6);
}
.gauge__read{display:flex; align-items:baseline; gap:3px}
.gauge__depth{font-size:26px; font-weight:500; letter-spacing:-.01em;
  font-variant-numeric:tabular-nums; line-height:1}
.gauge__unit{font-size:13px; opacity:.66}
.gauge__zone{font-size:11px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--accent); transition:color .5s}
.gauge__press{font-size:11px; opacity:.6}

/* ---- generic station ---- */
.station{
  position:relative; z-index:5;
  max-width:var(--maxw); margin:0 auto;
  padding:16vh var(--edge) 14vh;
}
.station__marker{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-dim);
  margin:0 0 clamp(28px,5vh,60px);
}
.station__marker .dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 12px var(--accent);
}
.station__head{max-width:760px; margin-bottom:clamp(40px,7vh,80px)}
.station h2{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(34px,6vw,66px); line-height:1.02; letter-spacing:-.015em;
  margin:0 0 22px;
}
.station__intro{
  font-size:clamp(16px,1.5vw,20px); color:var(--ink-dim);
  max-width:60ch; margin:0;
}
.station__intro em{color:var(--ink); font-style:italic}

/* ======== theming per depth station ======== */
.station--surface{--plate:rgba(233,248,246,.82);--plate-border:rgba(20,70,80,.14);--ink:#0b2b33;--ink-dim:rgba(11,43,51,.66);--accent:#0f7d86}
.station--twilight{--plate:rgba(21,58,78,.5);--plate-border:rgba(79,240,224,.2);--ink:#dff2f4;--ink-dim:rgba(223,242,244,.62);--accent:#3fd7d0}
.station--midnight{--plate:rgba(9,32,50,.62);--plate-border:rgba(79,240,224,.24);--ink:#e7f6f6;--ink-dim:rgba(231,246,246,.6);--accent:#4ff0e0}
.station--abyssal{--plate:rgba(7,22,36,.66);--plate-border:rgba(125,255,176,.22);--ink:#eef8f6;--ink-dim:rgba(238,248,246,.58);--accent:#7dffb0}
.station--trench{--plate:rgba(3,7,15,.55);--plate-border:rgba(169,232,255,.18);--ink:#f2fbfa;--ink-dim:rgba(242,251,250,.6);--accent:#a9e8ff}
.station--return{--plate:rgba(18,49,79,.55);--plate-border:rgba(169,232,255,.2);--ink:#eaf7f6;--ink-dim:rgba(234,247,246,.64);--accent:#a9e8ff}

.station{color:var(--ink)}

/* legibility halo for text sitting directly over the descending canvas
   (cards/plates carry their own plate background). Deep stations only. */
.station--twilight, .station--midnight, .station--abyssal,
.station--trench, .station--return{
  text-shadow:0 1px 30px rgba(1,8,16,.6), 0 0 2px rgba(1,8,16,.5);
}
.station--twilight .prog, .station--midnight .fleet-specs,
.station--midnight .sub__svg, .station--abyssal .plate{ text-shadow:none }

/* ======== SURFACE / hero ======== */
.station--surface{min-height:100vh; display:flex; flex-direction:column; justify-content:center; padding-top:22vh}
.hero-title{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(46px,9.5vw,124px); line-height:.96; letter-spacing:-.03em;
  margin:0 0 34px; color:var(--ink);
}
.hero-title span{display:block}
.hero-title .l3{font-style:italic; color:var(--accent)}
.hero-lede{
  font-family:var(--serif); font-size:clamp(18px,2.1vw,26px); font-weight:300;
  line-height:1.5; max-width:40ch; color:var(--ink); margin:0 0 40px;
}
.hero-lede em{font-style:italic; color:var(--accent)}
.hero-meta{display:flex; flex-wrap:wrap; gap:clamp(24px,4vw,60px)}
.hero-meta div{display:flex; flex-direction:column; gap:4px}
.hero-meta__k{font-family:var(--mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-dim)}
.hero-meta__v{font-family:var(--serif); font-size:clamp(18px,2vw,24px)}
.scroll-cue{
  margin-top:clamp(40px,8vh,90px);
  font-family:var(--mono); font-size:12px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink-dim);
  display:inline-flex; align-items:center; gap:10px;
}
.chev{display:inline-block; animation:bob 2s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* ======== TWILIGHT / programmes ======== */
.programmes{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(14px,2vw,26px);
  counter-reset:none;
}
.prog{
  position:relative;
  background:var(--plate); border:1px solid var(--plate-border);
  border-radius:16px; padding:clamp(24px,3vw,38px);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:transform .4s cubic-bezier(.2,.7,.2,1), border-color .4s, box-shadow .4s;
}
.prog:hover{transform:translateY(-6px); border-color:var(--accent);
  box-shadow:0 20px 60px -30px var(--accent)}
.prog__no{font-family:var(--mono); font-size:12px; letter-spacing:.2em;
  color:var(--accent)}
.prog h3{font-family:var(--serif); font-weight:400; font-size:clamp(22px,2.6vw,30px);
  margin:14px 0 12px; line-height:1.08}
.prog p{margin:0 0 20px; color:var(--ink-dim); font-size:15.5px; max-width:42ch}
.prog__tag{font-family:var(--mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-dim);
  padding-top:14px; border-top:1px solid var(--plate-border); display:block}

/* ======== MIDNIGHT / fleet ======== */
.sub{margin:0 0 clamp(30px,5vh,54px)}
.sub__svg{width:100%; height:auto; display:block;
  filter:drop-shadow(0 30px 80px rgba(0,0,0,.5))}
.sub figcaption{
  margin-top:22px; font-size:15px; color:var(--ink-dim);
  max-width:60ch; line-height:1.55;
}
.sub figcaption strong{color:var(--ink); font-family:var(--serif); font-weight:500}
.fleet-specs{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--plate-border); border:1px solid var(--plate-border);
  border-radius:14px; overflow:hidden; margin:0;
}
.fleet-specs div{background:var(--plate); padding:clamp(18px,2.4vw,30px);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px)}
.fleet-specs dt{font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-dim); margin-bottom:8px}
.fleet-specs dd{margin:0; font-family:var(--serif); font-size:clamp(24px,3vw,34px)}

/* animated svg call-outs */
.sub__labels .call{opacity:0; transform:translateY(6px);
  transition:opacity .6s ease, transform .6s ease}
.sub.in .call{opacity:1; transform:none}
.sub.in .call:nth-child(2){transition-delay:.1s}
.sub.in .call:nth-child(3){transition-delay:.2s}
.sub.in .call:nth-child(4){transition-delay:.3s}
.sub.in .call:nth-child(5){transition-delay:.4s}
.sub.in .call:nth-child(6){transition-delay:.5s}
.sub.in .call:nth-child(7){transition-delay:.6s}
.sub__spin{transform-origin:742px 230px; animation:spin 5s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.sub__port{animation:portglow 4s ease-in-out infinite}
@keyframes portglow{0%,100%{filter:drop-shadow(0 0 3px rgba(169,232,255,.4))}
  50%{filter:drop-shadow(0 0 12px rgba(169,232,255,.9))}}

/* ======== ABYSSAL / plates ======== */
.plates{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,24px);
}
.plate{
  background:var(--plate); border:1px solid var(--plate-border);
  border-radius:16px; overflow:hidden;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:transform .4s cubic-bezier(.2,.7,.2,1), border-color .4s, box-shadow .4s;
}
.plate:hover{transform:translateY(-6px); border-color:var(--accent);
  box-shadow:0 24px 70px -34px var(--accent)}
.plate__fig{
  aspect-ratio:200/140; display:grid; place-items:center;
  background:
    linear-gradient(rgba(255,255,255,.02),rgba(255,255,255,.02)),
    radial-gradient(120% 120% at 70% 20%, rgba(79,240,224,.10), transparent 60%);
  border-bottom:1px solid var(--plate-border);
}
.plate__fig svg{width:78%; height:auto}
.plate__lure{animation:pulse 3.4s ease-in-out infinite}
.plate:nth-child(2) .plate__lure{animation-delay:.6s}
.plate:nth-child(4) .plate__lure{animation-delay:1.1s}
@keyframes pulse{0%,100%{opacity:.5}50%{opacity:1; filter:drop-shadow(0 0 6px var(--lure))}}
.plate__body{padding:clamp(18px,2.2vw,26px)}
.plate__cat{font-family:var(--mono); font-size:11px; letter-spacing:.18em; color:var(--accent)}
.plate h3{font-family:var(--serif); font-weight:500; font-size:clamp(20px,2.4vw,26px);
  margin:10px 0 2px; line-height:1.05}
.plate__lat{font-style:italic; font-family:var(--serif); font-size:14px;
  color:var(--ink-dim); margin:0 0 14px}
.plate__note{font-size:14.5px; color:var(--ink-dim); margin:0 0 16px; line-height:1.5}
.plate__depth{font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-dim); margin:0;
  padding-top:12px; border-top:1px solid var(--plate-border)}

/* ======== TRENCH / manifesto ======== */
.station--trench{min-height:92vh; display:flex; flex-direction:column; justify-content:center}
.manifesto{margin:0; max-width:20ch}
.manifesto p{
  font-family:var(--serif); font-weight:300; font-style:italic;
  font-size:clamp(30px,6vw,68px); line-height:1.1; letter-spacing:-.02em;
  color:var(--ink); margin:0;
}
.manifesto__small{
  font-size:clamp(16px,2vw,22px)!important; font-style:normal!important;
  color:var(--ink-dim)!important; max-width:34ch; margin-top:34px!important;
}

/* ======== RETURN / contact ======== */
.station--return{padding-bottom:8vh}
.return__grid{display:grid; grid-template-columns:1.2fr 1fr; gap:clamp(30px,5vw,80px);
  align-items:start}
.return__lede{font-size:clamp(16px,1.5vw,19px); color:var(--ink-dim);
  max-width:44ch; margin:0 0 30px}
.mailbtn{
  display:inline-block; font-family:var(--mono); font-size:clamp(15px,2vw,20px);
  color:var(--ink); text-decoration:none; padding-bottom:6px;
  border-bottom:2px solid var(--accent); transition:color .2s, letter-spacing .3s;
  overflow-wrap:anywhere;
}
.mailbtn:hover{color:var(--accent); letter-spacing:.02em}
.return__cols{list-style:none; margin:0; padding:0; display:grid; gap:22px}
.return__cols li{font-size:15.5px; color:var(--ink); line-height:1.4}
.return__cols span{display:block; font-family:var(--mono); font-size:11px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-dim); margin-bottom:4px}
.site-foot{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
  margin-top:clamp(50px,9vh,110px); padding-top:24px;
  border-top:1px solid var(--plate-border);
  font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--ink-dim);
}
.site-foot a{color:var(--accent); text-decoration:none}
.site-foot a:hover{text-decoration:underline}

/* ---- focus ---- */
a:focus-visible, .mailbtn:focus-visible{
  outline:2px solid var(--accent); outline-offset:4px; border-radius:4px;
}

/* ======== responsive ======== */
@media (max-width:860px){
  .site-head nav{gap:14px}
  .site-head nav a:not(.nav-cta){display:none}
  .programmes{grid-template-columns:1fr}
  .plates{grid-template-columns:repeat(2,1fr)}
  .fleet-specs{grid-template-columns:repeat(2,1fr)}
  .return__grid{grid-template-columns:1fr}
  .gauge{left:14px; bottom:16px}
  .gauge__track{height:80px}
}
@media (max-width:560px){
  .plates{grid-template-columns:1fr}
  .hero-meta{gap:22px}
  .gauge__depth{font-size:20px}
  .gauge__track{display:none}
}

/* ======== reduced motion ======== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .chev,.sub__spin,.sub__port,.plate__lure{animation:none}
  .sub__labels .call{opacity:1; transform:none}
  *{transition-duration:.001s !important}
}