:root {
  --sky-soft: #5B8BA8;
  --sky-deep: #2E5B7E;
  --epi: #1E5A8A;
  --meso: #0F3A66;
  --bathy: #062349;
  --abyss: #03132E;
  --hadal: #010812;
  --foam: #EAF4FB;
  --text-light: #F4F9FC;
  --text-mid: rgba(244, 249, 252, 0.72);
  --text-faint: rgba(244, 249, 252, 0.45);
  --bio-cyan: #6FE3FF;
  --bio-green: #7DFFC6;
  --bio-violet: #B89FFF;
  --bio-amber: #FFB870;
  --bio-pink: #FF9ECF;
  --border-light: rgba(244, 249, 252, 0.1);
  --border-mid: rgba(244, 249, 252, 0.22);
  --radius: 12px;
  --radius-lg: 16px;
  --nav-height: 72px;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-serif: 'Source Serif 4', Georgia, serif;
  --font-mono: 'JetBrains Mono', monospace;
  --container: 1100px;
  --gutter: 32px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { min-height: 100%; overflow-y: auto; }
html { scroll-behavior: smooth; }

/* ============ custom scrollbar ============ */
html { scrollbar-gutter: stable; }
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track {
  background: rgba(1, 8, 18, 0.6);
  border-left: 0.5px solid rgba(244, 249, 252, 0.08);
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #6FE3FF 0%, #4AA8C8 100%);
  border-radius: 6px;
  border: 2px solid rgba(1, 8, 18, 0.4);
  box-shadow: 0 0 12px rgba(111, 227, 255, 0.5);
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #9FF0FF 0%, #6FE3FF 100%);
  box-shadow: 0 0 20px rgba(111, 227, 255, 0.8), 0 0 4px rgba(111, 227, 255, 0.6) inset;
}
html { scrollbar-color: #6FE3FF rgba(1, 8, 18, 0.6); scrollbar-width: thin; }

body {
  font-family: var(--font-sans);
  color: var(--text-light);
  background: var(--sky-soft);
  line-height: 1.6;
  user-select: text;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  padding-top: var(--nav-height);
}
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); position: relative; z-index: 2; }

/* ============ depth gauge (left side, animated + draggable) ============ */
.gauge {
  position: fixed; top: 50%; left: 20px; transform: translateY(-50%);
  z-index: 80;
  font-family: var(--font-mono);
  pointer-events: none; /* readout text is non-interactive */
}
.gauge-rail-wrap {
  position: relative;
  pointer-events: auto;
  cursor: pointer;
  padding: 10px 18px 10px 10px;
  margin-left: -10px;
}
.gauge-rail {
  width: 2px; height: 320px;
  background: rgba(244, 249, 252, 0.22);
  position: relative;
  border-radius: 2px;
  pointer-events: none;
}
.gauge-rail::before, .gauge-rail::after {
  content: ''; position: absolute; left: -4px; width: 10px; height: 0.5px; background: var(--text-mid);
}
.gauge-rail::before { top: 0; } .gauge-rail::after { bottom: 0; }
.gauge-rail .zone-mark {
  position: absolute; left: -3px; width: 8px; height: 0.5px; background: rgba(244, 249, 252, 0.32);
}
.zone-mark.z1 { top: 4%; }  /* 200m */
.zone-mark.z2 { top: 18%; }  /* 1km */
.zone-mark.z3 { top: 38%; }  /* 4km */
.zone-mark.z4 { top: 58%; }  /* 6km */
.zone-mark.z5 { top: 95%; }  /* 11km */
.gauge-sub {
  position: absolute; left: -6px; top: 0%; width: 14px; height: 14px;
  border: 1px solid var(--bio-cyan); border-radius: 50%;
  transform: translateY(-50%);
  box-shadow: 0 0 12px 2px rgba(111, 227, 255, 0.5);
  background: rgba(2, 8, 15, 0.6);
  cursor: grab;
  pointer-events: auto;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.gauge-sub:hover {
  transform: translateY(-50%) scale(1.15);
  box-shadow: 0 0 16px 3px rgba(111, 227, 255, 0.8);
}
.gauge-sub.dragging {
  cursor: grabbing;
  transform: translateY(-50%) scale(1.25);
  box-shadow: 0 0 22px 4px rgba(111, 227, 255, 1);
}
.gauge-sub::before {
  content: ''; position: absolute; inset: 4px; border-radius: 50%; background: var(--bio-cyan); opacity: 0.9;
  animation: subPulse 2.2s ease-in-out infinite;
}
@keyframes subPulse { 0%, 100% { opacity: 0.9; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.6); } }
.gauge-readout {
  position: absolute; left: 22px; top: 50%; transform: translateY(-50%);
  font-size: 9px; letter-spacing: 0.14em; color: var(--text-mid);
  text-transform: uppercase; white-space: nowrap;
}
.gauge-readout .depth-num {
  color: var(--bio-cyan); font-weight: 500;
  font-size: 16px; letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: 3px;
  margin-top: 4px; line-height: 1;
  text-transform: none;
}
.gauge-readout .depth-unit { font-size: 10px; color: var(--text-mid); }
.gauge-readout .zone-name {
  display: block; color: var(--text-light); margin-top: 8px;
  font-family: var(--font-serif); font-style: italic; font-size: 12px;
  letter-spacing: 0; text-transform: lowercase;
}

/* ============ pressure + temp (top-right) ============ */
.hud {
  position: fixed; top: 100px; right: 24px; z-index: 80; pointer-events: none;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-mid); text-align: right;
  background: rgba(1, 8, 18, 0.32);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 0.5px solid rgba(244, 249, 252, 0.08);
  border-radius: var(--radius);
  padding: 10px 14px; opacity: 0; transform: translateY(-8px);
  transition: opacity 0.4s, transform 0.4s, background 0.6s ease, border-color 0.6s ease;
  min-width: 130px;
}
.hud.show { opacity: 0.85; transform: translateY(0); }
.hud:hover { opacity: 1; }
.hud .hud-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.hud .hud-row + .hud-row { margin-top: 4px; }
.hud .label { color: var(--text-faint); font-size: 8.5px; }
.hud .val { font-size: 12px; font-weight: 500; letter-spacing: 0; font-variant-numeric: tabular-nums; text-transform: none; }
.hud .val.cyan { color: var(--bio-cyan); }
.hud .val.amber { color: var(--bio-amber); }
/* deeper zones, slightly heavier background to stay readable on near-black */
.hud.deep { background: rgba(1, 8, 18, 0.55); border-color: rgba(111, 227, 255, 0.12); }

/* ============ nav ============ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  min-height: var(--nav-height);
  background: rgba(46, 91, 126, 0.55);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 0.5px solid rgba(244, 249, 252, 0.15);
  transition: background 0.8s ease;
}
.nav.dark { background: rgba(3, 19, 46, 0.7); }
.nav.deep { background: rgba(1, 8, 18, 0.85); }

/* reading progress bar */
.progress-bar {
  position: fixed; top: 0; left: 0; right: 0;
  height: 2px; z-index: 100;
  background: rgba(1, 8, 18, 0.2);
  pointer-events: none;
}
.progress-bar .progress-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--bio-cyan) 0%, #B89FFF 100%);
  box-shadow: 0 0 8px rgba(111, 227, 255, 0.6);
  transition: width 0.08s linear;
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; font-size: 14px; }
.mark {
  display: flex; align-items: center; gap: 12px;
  font-weight: 700; letter-spacing: 0.04em; font-size: 19px;
  color: white;
  font-family: var(--font-sans); font-style: normal;
  text-transform: uppercase;
}
.mark .logo {
  position: relative;
  width: 260px; max-width: 320px; max-height: 70px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.mark .logo svg,
.mark .logo img { display: block; width: 100%; height: auto; max-height: 70px; object-fit: contain; }
.mark .logo .ring {
  stroke: var(--bio-cyan);
  fill: none;
  opacity: 0.4;
}
.mark .logo .ring.r1 { animation: ringPulse 3s ease-in-out infinite; }
.mark .logo .ring.r2 { animation: ringPulse 3s ease-in-out 0.5s infinite; }
.mark .logo .ring.r3 { animation: ringPulse 3s ease-in-out 1s infinite; }
@keyframes ringPulse {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 0.85; }
}
.mark .logo .sub {
  fill: var(--bio-cyan);
  filter: drop-shadow(0 0 6px rgba(111, 227, 255, 0.9));
  animation: subDrift 4s ease-in-out infinite;
}
@keyframes subDrift {
  0%, 100% { transform: translateY(-2px); }
  50% { transform: translateY(2px); }
}
.nav-links { display: flex; gap: 26px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; }
.nav-links a { color: rgba(244, 249, 252, 0.78); text-decoration: none; transition: color 0.15s; cursor: pointer; }
.nav-links a:hover { color: white; }
.nav-links a span { color: var(--bio-cyan); margin-right: 6px; font-weight: 500; }

/* "Menu" button - wave icon, deep-sea themed */
.nav-toggle {
  display: none;
  width: 42px; height: 42px;
  border: 0.5px solid rgba(244, 249, 252, 0.25);
  background: rgba(244, 249, 252, 0.06);
  border-radius: 10px;
  cursor: pointer;
  align-items: center; justify-content: center;
  padding: 0;
  transition: background 0.2s ease, border-color 0.2s ease;
  position: relative; z-index: 95;
  color: var(--bio-cyan);
}
.nav-toggle:hover { background: rgba(111, 227, 255, 0.12); border-color: rgba(111, 227, 255, 0.4); }
.nav-toggle .menu-icon,
.nav-toggle .close-icon {
  width: 20px; height: 20px;
  transition: opacity 0.25s ease, transform 0.3s ease;
}
.nav-toggle .menu-icon path { stroke: currentColor; }
.nav-toggle .close-icon { position: absolute; opacity: 0; transform: rotate(-45deg) scale(0.7); }
.nav-toggle.open .menu-icon { opacity: 0; transform: rotate(45deg) scale(0.7); }
.nav-toggle.open .close-icon { opacity: 1; transform: rotate(0) scale(1); }

.nav-right { display: flex; align-items: center; gap: 10px; }

/* On mobile/tablet: move audio toggle into the nav, same height as menu button */
/* ============ hero ============ */
.hero {
  position: relative; padding: 120px 0 100px; min-height: 96vh; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
}
/* SKY: above the surface. Cool tones with a warm sun glow. */
.hero-sky {
  position: absolute; inset: 0;
  background:
    /* sun glow at top right */
    radial-gradient(ellipse 50% 32% at 72% 16%, rgba(255, 220, 170, 0.45) 0%, rgba(255, 210, 160, 0.15) 38%, transparent 65%),
    /* sky gradient from upper deep blue to softer near horizon */
    linear-gradient(180deg,
      #3D6F94 0%,
      #4F82A4 18%,
      #6FA0BC 38%,
      #8EB6CC 56%,
      #9BBFD1 70%,
      #7DA6BC 80%,
      #3D6F94 100%);
  z-index: 0;
}
/* subtle scrim behind hero text content for readability */
.hero::after {
  content: ''; position: absolute; left: 0; right: 0; top: 30%; bottom: 30%;
  background: radial-gradient(ellipse 70% 60% at 35% 50%, rgba(20, 40, 70, 0.32) 0%, transparent 70%);
  z-index: 1; pointer-events: none;
}
/* the sun disc itself */
.hero-sun {
  position: absolute; top: 14%; right: 22%;
  width: 110px; height: 110px;
  background: radial-gradient(circle, rgba(255, 250, 230, 1) 0%, rgba(255, 240, 210, 0.95) 30%, rgba(255, 225, 180, 0.5) 55%, rgba(255, 215, 170, 0.15) 75%, transparent 100%);
  z-index: 1; pointer-events: none;
  border-radius: 50%;
  filter: blur(2px);
  animation: sunShimmer 8s ease-in-out infinite;
  box-shadow: 0 0 80px 20px rgba(255, 230, 180, 0.5);
}
@keyframes sunShimmer {
  0%, 100% { transform: scale(1); opacity: 0.95; }
  50% { transform: scale(1.06); opacity: 1; }
}
/* sun reflection band on the water */
.hero-sun-glint {
  position: absolute;
  right: 18%; bottom: 0;
  width: 18%; height: 28%;
  background: radial-gradient(ellipse at top, rgba(255, 235, 190, 0.55) 0%, rgba(255, 225, 180, 0.2) 30%, transparent 70%);
  z-index: 2; pointer-events: none;
  mix-blend-mode: screen;
  filter: blur(3px);
}
/* nav contrast gradient */
.hero::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 200px;
  background: linear-gradient(180deg, rgba(3, 19, 46, 0.35) 0%, transparent 100%);
  z-index: 3; pointer-events: none;
}

/* CLOUDS: soft, layered, drifting slowly */
.hero-clouds {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden;
}
.cloud {
  position: absolute;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  filter: blur(8px);
  opacity: 0.8;
  animation: cloudDrift var(--dur, 90s) linear infinite;
}
@keyframes cloudDrift {
  0% { transform: translateX(-30vw); }
  100% { transform: translateX(130vw); }
}

/* SEAGULLS: small flying birds in the distance */
.hero-birds {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden;
}
.bird {
  position: absolute;
  width: 24px; height: 14px;
  animation: birdFly var(--dur, 35s) linear infinite;
}
.bird svg { width: 100%; height: 100%; opacity: 0.55; }
.bird svg path { animation: wingFlap 0.7s ease-in-out infinite; transform-origin: center; }
@keyframes birdFly {
  0% { transform: translate(-10vw, 0); }
  50% { transform: translate(50vw, -20px); }
  100% { transform: translate(110vw, 10px); }
}
@keyframes wingFlap {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.55); }
}

/* SHIP: distant silhouette on the sea horizon */
.hero-ship {
  position: absolute;
  right: 8%; bottom: 32%;
  width: 140px;
  z-index: 2; pointer-events: none;
  opacity: 0.7;
  filter: drop-shadow(0 2px 4px rgba(20, 40, 60, 0.3));
  transform-origin: 50% 100%;
  will-change: transform;
}
.hero-ship svg { width: 100%; height: auto; display: block; }

/* DISTANT MOUNTAINS/COASTLINE: just barely visible on the far horizon */
.hero-horizon {
  position: absolute;
  left: 0; right: 0;
  bottom: 33%;
  height: 24px;
  z-index: 1; pointer-events: none;
  opacity: 0.35;
}
.hero-horizon svg { width: 100%; height: 100%; display: block; }

/* WAVES at the bottom: the surface of the sea, with the dive threshold below */
.hero-surface {
  position: absolute; left: 0; right: 0; bottom: -2px; height: 32%;
  z-index: 2; overflow: hidden;
}
.hero-surface svg { display: block; width: 100%; height: 100%; }
.hero-content { position: relative; z-index: 4; }
.eyebrow {
  font-family: var(--font-mono); font-size: 11px; color: rgba(255, 255, 255, 0.9);
  letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 32px;
  display: flex; align-items: center; gap: 14px;
}
.eyebrow::before { content: ''; width: 36px; height: 0.5px; background: rgba(255, 255, 255, 0.7); }
.h1 {
  font-family: var(--font-serif); font-size: clamp(56px, 8vw, 104px); line-height: 0.98; font-weight: 400;
  letter-spacing: -0.03em; color: white; max-width: 820px; margin-bottom: 32px;
  text-shadow: 0 4px 32px rgba(3, 19, 46, 0.5), 0 1px 2px rgba(3, 19, 46, 0.3);
}
.h1 .it { font-style: italic; color: var(--foam); }
.lede {
  font-size: 21px; line-height: 1.5; color: rgba(255, 255, 255, 0.95);
  max-width: 580px; margin-bottom: 48px;
  text-shadow: 0 1px 16px rgba(3, 19, 46, 0.35);
}
.cta-row { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.cta {
  background: white; color: var(--bathy); border: none;
  padding: 16px 28px; font-size: 14px; font-weight: 500; border-radius: 999px;
  cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 10px;
  letter-spacing: 0.02em; transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 8px 28px -8px rgba(3, 19, 46, 0.4);
}
.cta:hover { transform: translateY(-2px); box-shadow: 0 14px 36px -8px rgba(3, 19, 46, 0.5); }
.cta i { font-size: 18px; }
.hero-stats {
  display: flex; gap: 0; font-family: var(--font-mono);
  font-size: 9px; color: rgba(255, 255, 255, 0.7); letter-spacing: 0.18em; text-transform: uppercase;
  border-left: 0.5px solid rgba(255, 255, 255, 0.2);
}
.hero-stats span {
  padding: 4px 24px;
  border-right: 0.5px solid rgba(255, 255, 255, 0.2);
  display: flex; flex-direction: column; gap: 4px;
}
.hero-stats span b {
  font-family: var(--font-serif); font-size: 22px; color: white;
  font-weight: 400; letter-spacing: -0.01em;
  text-transform: none; font-variant-numeric: tabular-nums;
  line-height: 1;
}
.hero-stats span:last-child b { color: var(--bio-cyan); }

/* secondary "about" link beside the CTA */
.hero-secondary {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: 18px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none; cursor: pointer;
  transition: color 0.2s ease, transform 0.2s ease;
}
.hero-secondary:hover { color: white; transform: translateX(2px); }
.hero-secondary::after {
  content: "→";
  font-size: 13px;
  transition: transform 0.2s ease;
}
.hero-secondary:hover::after { transform: translateX(3px); }
.scroll-hint {
  position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7); display: flex; flex-direction: column; align-items: center; gap: 14px;
  z-index: 3;
}
.scroll-hint .line { width: 0.5px; height: 36px; background: rgba(255, 255, 255, 0.45); position: relative; overflow: hidden; }
.scroll-hint .line::after {
  content: ''; position: absolute; top: -36px; left: 0; width: 100%; height: 36px;
  background: white; animation: scrollLine 2.4s ease-in-out infinite;
}
@keyframes scrollLine { 0% { top: -36px; } 60%, 100% { top: 36px; } }

/* ============ zones ============ */
.zone {
  position: relative; padding: 140px 0 160px; overflow: visible;
  transition: background 0.8s ease;
}
.zone-epi { background: linear-gradient(180deg, var(--epi) 0%, #133F66 100%); }
.zone-meso { background: linear-gradient(180deg, #133F66 0%, var(--meso) 60%, #082A4D 100%); }
.zone-bathy { background: linear-gradient(180deg, #082A4D 0%, var(--bathy) 60%, #03132E 100%); }
.zone-abyss { background: linear-gradient(180deg, #03132E 0%, var(--abyss) 60%, #010812 100%); }
.zone-hadal { background: linear-gradient(180deg, #010812 0%, var(--hadal) 100%); }

.zone-header {
  display: grid; grid-template-columns: 240px 1fr; gap: 56px;
  margin-bottom: 96px; align-items: start; position: relative; z-index: 5;
}
.zone-marker {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--bio-cyan); padding-top: 12px; border-top: 0.5px solid var(--border-mid);
}
.zone-marker b {
  display: block; font-family: var(--font-serif); font-style: italic; font-size: 30px;
  font-weight: 400; color: var(--text-light); letter-spacing: -0.01em;
  margin-top: 14px; text-transform: none;
}
.zone-marker .range { display: block; margin-top: 18px; color: var(--text-mid); font-variant-numeric: tabular-nums; }
.zone-marker .light { display: block; margin-top: 4px; color: var(--text-faint); }
.zone-intro h2 {
  font-family: var(--font-serif); font-size: clamp(36px, 5vw, 56px); line-height: 1.06;
  font-weight: 400; letter-spacing: -0.02em; margin-bottom: 28px; max-width: 760px;
}
.zone-intro h2 .it { font-style: italic; color: var(--bio-cyan); }
.zone-intro h2 .w {
  display: inline-block; opacity: 0; filter: blur(8px); transform: translateY(10px);
  transition: opacity 0.9s ease, filter 0.9s ease, transform 0.9s ease;
}
.zone-intro h2 .w.in { opacity: 1; filter: blur(0); transform: translateY(0); }
.zone-intro p {
  font-size: 17px; line-height: 1.7; color: var(--text-mid); max-width: 680px;
}

/* ============ entry (creature OR wreck OR human artifact) ============ */
.entry {
  display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: start;
  margin-bottom: 72px; opacity: 0; transform: translateY(60px);
  transition: opacity 1s ease, transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1);
  position: relative; z-index: 5; isolation: isolate;
}
.entry.in { opacity: 1; transform: translateY(0); }
.entry.flip { direction: rtl; }
.entry.flip > * { direction: ltr; }

/* art container: by default a clean rounded box; all creatures overflow */
.entry-art {
  position: relative; aspect-ratio: 1 / 1; isolation: isolate;
  background: rgba(244, 249, 252, 0.025);
  border: 0.5px solid var(--border-light); border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center;
  overflow: visible;
}
.entry-art::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 45%, rgba(111, 227, 255, 0.06) 0%, transparent 60%);
  pointer-events: none; z-index: 0;
}
.entry-art img,
.entry-art svg.creature {
  position: relative; z-index: 2; max-width: 88%; max-height: 88%;
  width: 88%; height: auto;
  object-fit: contain; transition: transform 0.6s ease;
  filter: drop-shadow(0 8px 24px rgba(3, 19, 46, 0.4));
}
.entry-art .scale-tag {
  position: absolute; bottom: 14px; right: 16px; z-index: 6;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em;
  color: var(--text-faint); text-transform: uppercase;
  background: rgba(1, 8, 18, 0.72); padding: 6px 10px; border-radius: 6px;
  border: 0.5px solid var(--border-mid);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* === LIVE VIDEO CREATURES === */
/* Layer order: entry text/content on top, creature video in the middle, container box behind. */
.entry-art video.creature-video {
  position: absolute;
  top: 50%; left: 50%;
  z-index: 2;
  width: 116%; max-width: 116%; height: auto;
  object-fit: contain;
  mix-blend-mode: normal;
  pointer-events: none;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 10px 28px rgba(3, 19, 46, 0.55));
}
.entry.has-video .entry-art {
  overflow: visible;
  border-color: transparent;
  background: rgba(1, 8, 18, 0.10);
}
.entry.has-video .entry-art::after {
  content: ''; position: absolute; inset: 0;
  border: 0.5px solid var(--border-light); border-radius: inherit;
  pointer-events: none; z-index: 0;
}
/* huge live video: break the frame like the SVG huge variant */
.entry.has-video.huge .entry-art video.creature-video {
  width: 150%; max-width: 150%;
  transform: translate(-50%, -50%) scale(1.1);
}
.entry.has-video.massive .entry-art video.creature-video {
  width: 190%; max-width: 190%;
  transform: translate(-50%, -50%) scale(1.2);
}

/* Creatures never intercept pointer events, so they can never block the
   narrator button or other controls even when they overflow the card. */
.entry-art svg.creature,
.entry-art img.creature,
.entry-art video.creature-video { pointer-events: none; }

/* === SIZE VARIANTS for breaking the box === */
/* The .entry-art is half the row (1fr of 1fr 1fr). For huge things to cover ~40% of the screen, the art needs to be ~80% of half = ~40% viewport */

/* Huge: shark, whale-sized, overflow card moderately */
.entry.huge .entry-art { overflow: visible; }
.entry.huge .entry-art img,
.entry.huge .entry-art svg.creature {
  max-width: 180%; max-height: 180%; width: 180%;
  transform: scale(1.3) rotate(-3deg);
}

/* Massive: blue whale, whale shark, megalodon scale, dramatic 40%+ coverage */
.entry.massive .entry-art { overflow: visible; }
.entry.massive .entry-art img,
.entry.massive .entry-art svg.creature {
  max-width: 240%; max-height: 240%; width: 240%;
  transform: scale(1.5) rotate(-4deg) translateY(-10px) translateX(-8%);
}
.entry.massive.flip .entry-art img,
.entry.massive.flip .entry-art svg.creature {
  transform: scale(1.5) rotate(4deg) translateY(-10px) translateX(8%);
}

/* Tiny: amphipod, anglerfish (small), sits modestly */
.entry.tiny .entry-art img,
.entry.tiny .entry-art svg.creature { max-width: 60%; max-height: 60%; width: 60%; }

/* Wreck (Titanic): silhouette spreads horizontally */
.entry.wreck .entry-art { overflow: visible; }
.entry.wreck .entry-art img,
.entry.wreck .entry-art svg.creature { max-width: 150%; max-height: 150%; width: 150%; transform: scale(1.2); }

/* Move kind tags to second row on mobile to prevent wrapping issues */
@media (max-width: 600px) {
  .entry-info .kind { display: block; margin-top: 4px; }
  .entry-info .num { flex-wrap: wrap; }
}

/* Center compare content on mobile */
@media (max-width: 600px) {
  .compare-art { justify-content: center; gap: 24px; }
}

/* Mobile-friendly modal map */
@media (max-width: 600px) {
  .modal-map {
    min-width: 320px;
    padding: 20px;
  }
  .modal-map svg {
    min-width: 320px;
    max-width: 100%;
  }
}

/* All creatures overflow their container on mobile */
@media (max-width: 768px) {
  .entry-art { overflow: visible !important; }
  .entry.massive .entry-art img,
  .entry.massive .entry-art svg.creature {
    max-width: 180%; max-height: 180%; width: 180%;
    transform: scale(1.2) rotate(-4deg) translateY(-6px) translateX(-6%);
  }
  .entry.massive.flip .entry-art img,
  .entry.massive.flip .entry-art svg.creature {
    transform: scale(1.2) rotate(4deg) translateY(-6px) translateX(6%);
  }
}

/* Sub: small, tall vertical aspect */
.entry.sub .entry-art img,
.entry.sub .entry-art svg.creature { max-width: 70%; max-height: 85%; width: 70%; }

/* === NATURAL SWIM ORIENTATIONS ===
   These add subtle rotation + drift to creatures so they look like they're
   moving naturally rather than all facing the same direction.
   Combine with size variants via class composition. */

/* Base swim variants for non-sized entries */
.entry.swim-up .entry-art svg.creature,
.entry.swim-up .entry-art img.creature { transform: rotate(-28deg) translateY(-6px); }
.entry.swim-down .entry-art svg.creature,
.entry.swim-down .entry-art img.creature { transform: rotate(22deg) translateY(4px); }
.entry.swim-tilt .entry-art svg.creature,
.entry.swim-tilt .entry-art img.creature { transform: rotate(-14deg); }
.entry.swim-tilt-r .entry-art svg.creature,
.entry.swim-tilt-r .entry-art img.creature { transform: rotate(12deg); }
.entry.swim-face-r .entry-art svg.creature,
.entry.swim-face-r .entry-art img.creature { transform: scaleX(-1) rotate(-5deg); }

/* Huge size + swim direction */
.entry.huge.swim-up .entry-art svg.creature,
.entry.huge.swim-up .entry-art img.creature { transform: scale(1.3) rotate(-25deg); }
.entry.huge.swim-down .entry-art svg.creature,
.entry.huge.swim-down .entry-art img.creature { transform: scale(1.3) rotate(20deg); }
.entry.huge.swim-tilt .entry-art svg.creature,
.entry.huge.swim-tilt .entry-art img.creature { transform: scale(1.3) rotate(-12deg); }
.entry.huge.swim-tilt-r .entry-art svg.creature,
.entry.huge.swim-tilt-r .entry-art img.creature { transform: scale(1.3) rotate(10deg); }
.entry.huge.swim-face-r .entry-art svg.creature,
.entry.huge.swim-face-r .entry-art img.creature { transform: scale(1.3) scaleX(-1) rotate(3deg); }

/* Massive size + swim direction */
.entry.massive.swim-up .entry-art svg.creature,
.entry.massive.swim-up .entry-art img.creature { transform: scale(1.5) rotate(-18deg); }
.entry.massive.swim-down .entry-art svg.creature,
.entry.massive.swim-down .entry-art img.creature { transform: scale(1.5) rotate(15deg); }
.entry.massive.swim-tilt .entry-art svg.creature,
.entry.massive.swim-tilt .entry-art img.creature { transform: scale(1.5) rotate(-10deg); }
.entry.massive.swim-tilt-r .entry-art svg.creature,
.entry.massive.swim-tilt-r .entry-art img.creature { transform: scale(1.5) rotate(8deg); }
.entry.massive.swim-face-r .entry-art svg.creature,
.entry.massive.swim-face-r .entry-art img.creature { transform: scale(1.5) scaleX(-1) rotate(-4deg); }

/* Tiny + swim variants */
.entry.tiny.swim-up .entry-art svg.creature,
.entry.tiny.swim-up .entry-art img.creature { transform: rotate(-30deg) scale(0.95); }
.entry.tiny.swim-down .entry-art svg.creature,
.entry.tiny.swim-down .entry-art img.creature { transform: rotate(25deg) scale(0.95); }
.entry.tiny.swim-tilt .entry-art svg.creature,
.entry.tiny.swim-tilt .entry-art img.creature { transform: rotate(-15deg); }
.entry.tiny.swim-tilt-r .entry-art svg.creature,
.entry.tiny.swim-tilt-r .entry-art img.creature { transform: rotate(13deg); }
.entry.tiny.swim-face-r .entry-art svg.creature,
.entry.tiny.swim-face-r .entry-art img.creature { transform: scaleX(-1) rotate(-5deg); }

/* Gentle continuous floating for ALL creatures regardless of swim variant
   (combined with their static rotation transform via different property: translate) */
.entry-art svg.creature, .entry-art img.creature {
  transform-box: fill-box;
  transition: transform 0.3s ease;
}

/* info column */
.entry-info {
  position: relative;
  z-index: 10;
  padding: 4px 0;
}
.entry-info .num {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em;
  color: var(--bio-cyan); margin-bottom: 18px;
  display: flex; align-items: center; gap: 10px;
}.entry-info .num .divider { flex: 1; height: 0.5px; background: var(--border-light); max-width: 120px; }

/* ============ location button + modal ============ */
.locate {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 2px; margin-bottom: 22px;
  padding: 6px 12px 6px 10px;
  border-radius: 999px;
  border: 0.5px solid rgba(111, 227, 255, 0.35);
  background: rgba(111, 227, 255, 0.06);
  color: var(--bio-cyan);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: all 0.2s ease;
}
.locate:hover {
  background: rgba(111, 227, 255, 0.15);
  border-color: rgba(111, 227, 255, 0.6);
  box-shadow: 0 0 16px rgba(111, 227, 255, 0.25);
  transform: translateY(-1px);
}
.locate svg { width: 12px; height: 12px; }

.modal-backdrop {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(1, 8, 18, 0.85);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.modal-backdrop.show { opacity: 1; pointer-events: auto; }
.modal {
  position: relative;
  max-width: 720px; width: 100%;
  max-height: 88vh; overflow-y: auto;
  background: linear-gradient(180deg, #082A4D 0%, var(--abyss) 100%);
  border: 0.5px solid rgba(111, 227, 255, 0.3);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 80px rgba(1, 8, 18, 0.9), 0 0 60px rgba(111, 227, 255, 0.15);
  padding: 40px;
  transform: translateY(20px) scale(0.97);
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
  color: var(--text-light);
}
.modal-backdrop.show .modal { transform: translateY(0) scale(1); }
.modal-close {
  position: absolute; top: 16px; right: 16px;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(244, 249, 252, 0.08);
  border: 0.5px solid rgba(244, 249, 252, 0.15);
  color: var(--text-mid);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s ease;
}
.modal-close:hover { background: rgba(244, 249, 252, 0.18); color: var(--text-light); }
.modal-close svg { width: 14px; height: 14px; }
.modal-tag {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--bio-cyan); margin-bottom: 12px;
  display: flex; align-items: center; gap: 8px;
}
.modal h3 {
  font-family: var(--font-serif); font-size: 32px; line-height: 1.1; font-weight: 400;
  letter-spacing: -0.02em; margin-bottom: 8px;
}
.modal h3 .latin {
  display: block; font-style: italic; font-size: 14px; color: var(--text-faint);
  letter-spacing: 0; margin-top: 4px;
}
.modal-map {
  margin: 24px 0;
  background: rgba(1, 8, 18, 0.5);
  border: 0.5px solid var(--border-light);
  border-radius: var(--radius);
  padding: 20px;
  position: relative;
}
.modal-map svg { display: block; width: 100%; height: auto; }
@media (max-width: 600px) {
  .modal-map { padding: 16px; margin: 16px 0; }
  .modal-map svg { min-width: 320px; }
}
.modal-map .map-pin {
  fill: var(--bio-amber);
  filter: drop-shadow(0 0 8px rgba(255, 184, 112, 0.9));
  animation: pinPulse 2s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes pinPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.4); } }
.modal-map .map-pin-halo {
  fill: rgba(255, 184, 112, 0.2);
  stroke: rgba(255, 184, 112, 0.5);
  stroke-width: 0.5;
  animation: haloPulse 2s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes haloPulse {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(2.2); opacity: 0; }
}
.modal-info {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border-top: 0.5px solid var(--border-light);
  padding-top: 20px;
}
.modal-info .info-cell { padding: 12px 16px 12px 0; }
.modal-info .info-cell + .info-cell { border-left: 0.5px solid var(--border-light); padding-left: 20px; }
.modal-info .info-label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--text-faint); margin-bottom: 8px;
}
.modal-info .info-value {
  font-family: var(--font-serif); font-size: 21px; line-height: 1.4;
  color: var(--text-light);
}
.modal-info .info-value .accent { color: var(--bio-cyan); }
.modal-text {
  margin-top: 20px; padding-top: 20px;
  border-top: 0.5px solid var(--border-light);
  font-size: 16px; line-height: 1.75; color: var(--text-mid);
}
.modal-text p + p { margin-top: 12px; }
.modal-text .src {
  margin-top: 18px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-faint);
}
.modal-text .src a { color: var(--bio-cyan); text-decoration: none; transition: color 0.15s; }
.modal-text .src a:hover { color: var(--text-light); }
@media (max-width: 600px) {
  .modal { padding: 28px 20px; }
  .modal-info { grid-template-columns: 1fr; }
  .modal-info .info-cell + .info-cell { border-left: none; border-top: 0.5px solid var(--border-light); padding-left: 0; padding-top: 16px; margin-top: 8px; }
}

/* ============ narrator button ============ */
.narrate {
  position: relative;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 0.5px solid rgba(111, 227, 255, 0.35);
  background: rgba(111, 227, 255, 0.06);
  color: var(--bio-cyan);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: auto;
  padding: 0;
  transition: all 0.2s ease;
  font-family: inherit;
  flex-shrink: 0;
}
.narrate:hover {
  background: rgba(111, 227, 255, 0.15);
  border-color: rgba(111, 227, 255, 0.6);
  box-shadow: 0 0 16px rgba(111, 227, 255, 0.3);
  transform: scale(1.06);
}
.narrate svg { width: 14px; height: 14px; display: block; }
.narrate.playing {
  background: rgba(111, 227, 255, 0.2);
  border-color: var(--bio-cyan);
  box-shadow: 0 0 20px rgba(111, 227, 255, 0.5);
}
.narrate.playing::before {
  content: '';
  position: absolute; inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--bio-cyan);
  opacity: 0.5;
  animation: narrateRing 1.6s ease-out infinite;
}
@keyframes narrateRing {
  0% { transform: scale(0.9); opacity: 0.8; }
  100% { transform: scale(1.4); opacity: 0; }
}
.narrate .icon-speak { display: block; }
.narrate .icon-stop { display: none; }
.narrate.playing .icon-speak { display: none; }
.narrate.playing .icon-stop { display: block; }
.entry-info .kind {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px;
  background: rgba(111, 227, 255, 0.1); color: var(--bio-cyan);
  border: 0.5px solid rgba(111, 227, 255, 0.25);
}
.entry-info .kind.wreck-tag { background: rgba(255, 184, 112, 0.1); color: var(--bio-amber); border-color: rgba(255, 184, 112, 0.25); }
.entry-info .kind.sub-tag { background: rgba(184, 159, 255, 0.1); color: var(--bio-violet); border-color: rgba(184, 159, 255, 0.25); }
.entry-info h3 {
  font-family: var(--font-serif); font-size: 42px; line-height: 1.04; font-weight: 400;
  letter-spacing: -0.02em; margin-bottom: 8px; color: var(--text-light);
}
@media (max-width: 600px) {
  .entry-info h3 { font-size: 32px; }
}
.entry-info .latin {
  font-family: var(--font-serif); font-style: italic; font-size: 15px;
  color: var(--text-faint); margin-bottom: 26px; display: block;
}
.entry-info p {
  font-size: 16px; line-height: 1.75; color: var(--text-mid); margin-bottom: 28px;
}
.entry-info .fact-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border-top: 0.5px solid var(--border-light); padding-top: 22px;
}
.entry-info .fact { padding: 0 16px 0 0; }
.entry-info .fact + .fact { border-left: 0.5px solid var(--border-light); padding-left: 20px; }
.entry-info .fact-label {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-faint); margin-bottom: 8px;
}
.entry-info .fact-value {
  font-family: var(--font-serif); font-size: 19px; color: var(--text-light); line-height: 1.3;
}
.entry-info .fact-value .accent { color: var(--bio-cyan); }
.entry-info .fact-value.bio { color: var(--bio-green); }

/* ============ height comparisons (every few entries) ============ */
.compare {
  margin: 80px auto 120px;
  max-width: 1180px;
  padding: 0;
  background: none;
  border: none;
  position: relative; z-index: 5;
  opacity: 0; transform: translateY(40px);
  transition: opacity 1s ease, transform 1s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.compare.in { opacity: 1; transform: translateY(0); }
.compare-head {
  max-width: 620px; margin: 0 auto 36px; text-align: center;
}
.compare-tag {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--bio-amber); margin-bottom: 16px;
}
.compare h4 {
  font-family: var(--font-serif); font-size: clamp(28px, 4vw, 42px); line-height: 1.12; font-weight: 400;
  letter-spacing: -0.015em; margin-bottom: 16px; color: var(--text-light);
}
.compare h4 .num {
  color: var(--bio-cyan); font-variant-numeric: tabular-nums;
}
.compare p {
  font-size: 15px; line-height: 1.7; color: var(--text-mid); max-width: 560px; margin: 0 auto;
}
.compare-art {
  position: relative;
  height: 62vh; min-height: 480px; max-height: 760px;
  display: flex; align-items: flex-end; justify-content: center;
  gap: clamp(40px, 8vw, 120px);
  margin-top: 20px;
}
.compare-art .figure {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  position: relative; height: 100%; justify-content: flex-end;
}
.compare-art svg,
.compare-art img,
.compare-art video {
  display: block;
  filter: drop-shadow(0 8px 30px rgba(3, 19, 46, 0.6));
  height: 100%; width: auto;
  object-fit: contain;
}
.compare-art video {
  pointer-events: none;
  mix-blend-mode: screen;
}
.compare-art .figure-label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-faint); text-align: center;
  white-space: nowrap;
}
.compare-art .figure-label b { display: block; color: var(--text-light); font-size: 20px; margin-top: 4px; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.compare-art .figure.you svg path,
.compare-art .figure.you svg rect,
.compare-art .figure.you svg circle,
.compare-art .figure.you svg ellipse { fill: var(--bio-cyan); }
.compare-art .figure.you .figure-label b { color: var(--bio-cyan); }
.compare-art .ground-line {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 38px;
  width: 100%; max-width: 1100px;
  height: 1px; background: linear-gradient(90deg, transparent, var(--border-mid) 20%, var(--border-mid) 80%, transparent);
}
.compare-art .figure.you {
  /* the human/diver marker is tiny next to the giant landmark */
  justify-content: flex-end;
}
@media (max-width: 900px) {
  .compare-art { height: 52vh; min-height: 360px; gap: 32px; }
  .compare h4 { font-size: clamp(24px, 6vw, 32px); }
  .compare-art .figure-label b { font-size: 16px; }
}

/* === FINALE: the Challenger Deep summary, intentionally tall and scrollable === */
.compare.finale { max-width: 920px; }
.compare.finale .finale-hint {
  margin-top: 24px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--bio-amber); opacity: 0.8;
}
.compare.finale .finale-art {
  height: auto;          /* override the 62vh cap */
  min-height: 0;
  max-height: none;
  margin-top: 32px;
  display: block;        /* SVG fills its own width */
  gap: 0;
}
.compare.finale .finale-art svg {
  width: 100%; height: auto;
  max-width: 900px;
  margin: 0 auto;
  display: block;
  filter: drop-shadow(0 12px 40px rgba(3, 19, 46, 0.7));
}
@media (max-width: 900px) {
  .compare.finale .finale-art svg { max-width: 100%; }
}
.particles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
.particle {
  position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: var(--bio-cyan); box-shadow: 0 0 10px 2px rgba(111, 227, 255, 0.45);
  opacity: 0; animation: drift 14s linear infinite;
}
.particle.green { background: var(--bio-green); box-shadow: 0 0 10px 2px rgba(125, 255, 198, 0.45); }
.particle.violet { background: var(--bio-violet); box-shadow: 0 0 10px 2px rgba(184, 159, 255, 0.45); }
.particle.amber { background: var(--bio-amber); box-shadow: 0 0 12px 3px rgba(255, 184, 112, 0.55); }
.particle.pink { background: var(--bio-pink); box-shadow: 0 0 10px 2px rgba(255, 158, 207, 0.4); }
@keyframes drift {
  0% { opacity: 0; transform: translate(0, 30px); }
  10% { opacity: 0.9; }
  90% { opacity: 0.9; }
  100% { opacity: 0; transform: translate(15px, -140px); }
}
.snow {
  position: absolute; width: 2px; height: 2px; border-radius: 50%;
  background: rgba(244, 249, 252, 0.35); opacity: 0;
  animation: snowFall 24s linear infinite;
}
@keyframes snowFall {
  0% { opacity: 0; transform: translateY(-60px); }
  10% { opacity: 0.55; }
  100% { opacity: 0; transform: translateY(110vh); }
}

/* ============ bubbles ============ */
.bubble {
  position: absolute;
  border-radius: 50%;
  border: 0.5px solid rgba(244, 249, 252, 0.4);
  background: radial-gradient(circle at 35% 35%, rgba(244, 249, 252, 0.35), rgba(244, 249, 252, 0.05));
  opacity: 0;
  animation: bubbleRise 14s linear infinite;
  pointer-events: none;
}
.bubble::after {
  content: ''; position: absolute; top: 15%; left: 25%;
  width: 30%; height: 30%; border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
}
@keyframes bubbleRise {
  0% { opacity: 0; transform: translate(0, 100px) scale(0.6); }
  5% { opacity: 0.5; }
  50% { transform: translate(20px, -50vh) scale(1); }
  95% { opacity: 0.5; }
  100% { opacity: 0; transform: translate(-10px, -120vh) scale(1.1); }
}

/* ============ shimmer ============ */
.shimmer {
  position: absolute;
  width: 2px; height: 2px;
  border-radius: 50%;
  background: rgba(244, 249, 252, 0.8);
  box-shadow: 0 0 6px 1px rgba(244, 249, 252, 0.6);
  opacity: 0;
  animation: shimmerPulse 4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes shimmerPulse {
  0%, 100% { opacity: 0; transform: scale(0.5); }
  50% { opacity: 0.9; transform: scale(1.2); }
}

/* ============ ambient audio toggle ============ */
.audio-toggle {
  position: fixed; bottom: 24px; left: 24px;
  z-index: 95;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(1, 8, 18, 0.75);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 0.5px solid rgba(111, 227, 255, 0.4);
  color: var(--bio-cyan);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.25s ease;
  box-shadow: 0 0 20px rgba(1, 8, 18, 0.5);
}
.audio-toggle:hover {
  background: rgba(1, 8, 18, 0.9);
  border-color: var(--bio-cyan);
  box-shadow: 0 0 24px rgba(111, 227, 255, 0.35);
  transform: scale(1.05);
}
.audio-toggle svg { width: 18px; height: 18px; }
.audio-toggle .icon-on { display: none; }
.audio-toggle .icon-off { display: block; }
.audio-toggle.on .icon-on { display: block; }
.audio-toggle.on .icon-off { display: none; }
.audio-toggle.on {
  background: rgba(111, 227, 255, 0.15);
  border-color: var(--bio-cyan);
  box-shadow: 0 0 24px rgba(111, 227, 255, 0.4);
}
.audio-toggle.on::after {
  content: '';
  position: absolute; inset: -3px; border-radius: 50%;
  border: 1px solid var(--bio-cyan);
  opacity: 0.4;
  animation: audioRing 2s ease-out infinite;
}
@keyframes audioRing {
  0% { transform: scale(0.95); opacity: 0.6; }
  100% { transform: scale(1.4); opacity: 0; }
}

/* Two audio toggle buttons: floating one for desktop, nav-embedded one for mobile.
   They share state via JS. Each is hidden at the wrong breakpoint. */
.audio-toggle.nav-audio { display: none; }
@media (max-width: 980px) {
  .audio-toggle:not(.nav-audio) { display: none !important; }
  .audio-toggle.nav-audio {
    display: flex;
    position: static;
    width: 42px; height: 42px;
    border-radius: 10px;
    background: rgba(244, 249, 252, 0.06);
    border: 0.5px solid rgba(244, 249, 252, 0.25);
    box-shadow: none;
    z-index: auto;
  }
  .audio-toggle.nav-audio:hover {
    transform: none;
    background: rgba(111, 227, 255, 0.12);
    border-color: rgba(111, 227, 255, 0.4);
    box-shadow: none;
  }
  .audio-toggle.nav-audio.on {
    background: rgba(111, 227, 255, 0.12);
    border-color: rgba(111, 227, 255, 0.45);
    box-shadow: none;
  }
  /* no pulsing ring on the inline nav variant */
  .audio-toggle.nav-audio.on::after { display: none; }
  /* hud panel can now sit at left:16 since the floating audio button is hidden */
  .mobile-hud { left: 16px; }
}

.hold-hint {
  position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: rgba(1, 8, 18, 0.85);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 0.5px solid rgba(111, 227, 255, 0.4);
  border-radius: 999px;
  padding: 12px 22px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--bio-cyan);
  z-index: 200;
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
  display: flex; align-items: center; gap: 10px;
  box-shadow: 0 0 32px rgba(111, 227, 255, 0.25);
}
.hold-hint.show {
  opacity: 1; transform: translateX(-50%) translateY(0);
}
.hold-hint .pulse {
  width: 8px; height: 8px; border-radius: 50%; background: var(--bio-cyan);
  box-shadow: 0 0 10px rgba(111, 227, 255, 0.8);
  animation: holdPulse 1.2s ease-in-out infinite;
}
@keyframes holdPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.6); opacity: 0.5; } }

/* ============ scrolling hint badge (shows briefly on first load) ============ */
.intro-hint {
  position: fixed; bottom: 28px; right: 28px;
  background: rgba(1, 8, 18, 0.78);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 0.5px solid var(--border-light);
  border-radius: var(--radius);
  padding: 14px 18px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em;
  color: var(--text-mid);
  z-index: 90;
  max-width: 240px;
  line-height: 1.5;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
}
.intro-hint.show { opacity: 1; transform: translateY(0); }
.intro-hint b { color: var(--bio-cyan); font-weight: 500; }
.intro-hint .row { display: flex; gap: 8px; align-items: flex-start; margin-top: 6px; }
.intro-hint .row:first-child { margin-top: 0; }
.intro-hint .icon-mini { color: var(--bio-cyan); flex-shrink: 0; margin-top: 1px; }
@media (max-width: 980px) {
  .intro-hint {
    bottom: 72px; right: 16px; left: 76px;
    max-width: none;
    padding: 12px 14px;
    font-size: 10px;
  }
  /* hide the depth-gauge tip on mobile (gauge is hidden below 980px) */
  .intro-hint .row.desktop-only { display: none; }
}

/* ============ coda ============ */
.coda { padding: 140px 0 120px; position: relative; }
.coda-h {
  font-family: var(--font-serif); font-size: clamp(40px, 5.5vw, 68px); line-height: 1.04;
  font-weight: 400; letter-spacing: -0.02em; color: var(--text-light); max-width: 780px;
  margin-bottom: 36px;
}
.coda-h .it { font-style: italic; color: var(--bio-cyan); }
.coda-h .w {
  display: inline-block; opacity: 0; filter: blur(8px); transform: translateY(10px);
  transition: opacity 0.9s, filter 0.9s, transform 0.9s;
}
.coda-h .w.in { opacity: 1; filter: blur(0); transform: translateY(0); }
.coda p { font-size: 18px; line-height: 1.75; color: var(--text-mid); max-width: 620px; margin-bottom: 52px; }
.coda-cta {
  background: transparent;
  color: var(--bio-cyan);
  border: 0.5px solid rgba(111, 227, 255, 0.5);
  padding: 16px 32px; font-size: 13px; font-weight: 500; border-radius: 999px;
  cursor: pointer; font-family: var(--font-mono); display: inline-flex; align-items: center; gap: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  transition: all 0.3s ease;
  box-shadow: 0 0 0 0 rgba(111, 227, 255, 0);
}
.coda-cta:hover {
  background: rgba(111, 227, 255, 0.08);
  border-color: var(--bio-cyan);
  transform: translateY(-2px);
  box-shadow: 0 0 32px rgba(111, 227, 255, 0.25);
}
.coda-cta i { font-size: 14px; }

/* ============ footer ============ */
.site-foot { background: var(--hadal); border-top: 0.5px solid var(--border-light); }
.foot {
  padding: 80px 0 48px;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 56px;
  font-size: 13px; color: var(--text-faint);
}
.foot-brand .foot-logo {
  display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
  font-family: var(--font-sans); font-style: normal; font-weight: 700; font-size: 20px;
  color: var(--text-light); letter-spacing: 0.04em; text-transform: uppercase;
}
.foot-brand .foot-logo .logo {
  width: 280px; max-width: 360px; max-height: 76px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.foot-brand .foot-logo .logo svg,
.foot-brand .foot-logo .logo img { width: 100%; height: auto; max-height: 76px; object-fit: contain; }
.foot-brand .foot-logo .ring {
  stroke: var(--bio-cyan); fill: none; opacity: 0.4;
}
.foot-brand .foot-logo .sub {
  fill: var(--bio-cyan);
  filter: drop-shadow(0 0 4px rgba(111, 227, 255, 0.7));
}
.foot-brand .tag {
  font-family: var(--font-mono); font-size: 10px; color: var(--text-faint);
  letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 24px;
}
.foot-brand p {
  font-size: 13px; line-height: 1.65; color: var(--text-mid); max-width: 320px;
}
.foot-brand .domain {
  font-family: var(--font-mono); font-size: 12px; color: var(--bio-cyan); margin-top: 16px;
  display: inline-flex; align-items: center; gap: 6px;
}
.foot-col h6 {
  font-family: var(--font-mono); font-size: 10px; color: var(--text-light);
  font-weight: 500; margin-bottom: 18px; letter-spacing: 0.18em; text-transform: uppercase;
}
.foot-col a {
  display: block; color: var(--text-faint); text-decoration: none; padding: 6px 0;
  transition: color 0.15s; font-size: 13px; line-height: 1.4;
}
.foot-col a:hover { color: var(--text-light); }
.foot-col a .ext {
  display: inline-block; margin-left: 4px; font-size: 10px; opacity: 0.6;
  transition: transform 0.15s;
}
.foot-col a:hover .ext { transform: translate(2px, -2px); opacity: 1; }
.foot-bot {
  border-top: 0.5px solid var(--border-light); padding: 24px 0 32px;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-faint);
}
.foot-bot a { color: inherit; text-decoration: none; }
.foot-bot a:hover { color: var(--text-light); }

/* Footer feedback button */
.foot-bot-right {
  display: flex;
  align-items: center;
  gap: 16px;
}
.feedback-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 0.5px solid rgba(111, 227, 255, 0.35);
  background: rgba(111, 227, 255, 0.06);
  color: var(--bio-cyan);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s ease;
}
.feedback-btn:hover {
  background: rgba(111, 227, 255, 0.15);
  border-color: var(--bio-cyan);
  box-shadow: 0 0 16px rgba(111, 227, 255, 0.25);
  transform: translateY(-1px);
}
.feedback-btn svg { width: 14px; height: 14px; }
.feedback-credit {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* Feedback modal */
.feedback-modal {
  max-width: 480px;
  padding: 32px;
  background: linear-gradient(180deg, #082A4D 0%, var(--abyss) 100%);
}
.feedback-modal h3 {
  margin-bottom: 24px;
}
.feedback-field {
  margin-bottom: 16px;
}
.feedback-field:last-of-type {
  margin-bottom: 24px;
}
.feedback-field label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 6px;
}
.feedback-field input,
.feedback-field textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 0.5px solid var(--border-light);
  background: rgba(1, 8, 18, 0.5);
  color: var(--text-light);
  font-family: var(--font-sans);
  font-size: 14px;
}
.feedback-field input:focus,
.feedback-field textarea:focus {
  outline: none;
  border-color: var(--bio-cyan);
  box-shadow: 0 0 0 2px rgba(111, 227, 255, 0.2);
}
.feedback-field input::placeholder,
.feedback-field textarea::placeholder {
  color: var(--text-faint);
}
.feedback-field textarea {
  min-height: 100px;
  resize: vertical;
}
.feedback-submit {
  width: 100%;
  padding: 12px 24px;
  border-radius: 999px;
  border: none;
  background: var(--bio-cyan);
  color: var(--abyss);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s ease;
}
.feedback-submit:hover {
  background: #9FF0FF;
  transform: translateY(-1px);
  box-shadow: 0 0 20px rgba(111, 227, 255, 0.4);
}
.feedback-success {
  text-align: center;
  padding: 20px 0;
}
.feedback-success p {
  font-family: var(--font-serif);
  font-size: 18px;
  color: var(--text-light);
}

@media (max-width: 980px) {
  :root { --gutter: 24px; }
  .gauge { display: none; }
  .hud { display: none; }
  .hero { padding: 80px 0 60px; min-height: 84vh; }
  .h1 { font-size: clamp(44px, 9vw, 64px); }
  .zone { padding: 96px 0 100px; }
  .zone-header { grid-template-columns: 1fr; gap: 28px; margin-bottom: 64px; }
  .entry { grid-template-columns: 1fr; gap: 36px; margin-bottom: 96px; }
  .entry.flip { direction: ltr; }
  .entry-art { max-width: 420px; margin: 0 auto; width: 100%; }
  .entry-info h3 { font-size: 30px; }
  .foot { grid-template-columns: 1fr 1fr; gap: 40px; }
  .foot-brand { grid-column: 1 / -1; }
  .hero-stats {
    flex-direction: column; gap: 14px;
    border-left: none; margin-top: 4px;
  }
  .hero-stats span {
    flex-direction: row; align-items: baseline; justify-content: space-between;
    padding: 8px 0;
    border: none;
    border-bottom: 0.5px solid rgba(255, 255, 255, 0.18);
    gap: 16px;
  }
  .hero-stats span:last-child { border-bottom: none; }
  .hero-stats span b { font-size: 19px; }
  .hero-secondary { margin-left: 0; }
  .scroll-hint { display: none; }

  /* hamburger replaces inline links */
  .mark .logo,
  .mark .logo img { max-width: 210px; max-height: 56px; }
  .nav-toggle { display: flex; }
  .nav-links {
    position: fixed; top: 0; right: 0;
    height: 100vh; height: 100dvh;
    width: min(80vw, 320px);
    flex-direction: column; gap: 0;
    background: #03132E;
    border-left: 0.5px solid rgba(111, 227, 255, 0.25);
    box-shadow: -20px 0 60px rgba(1, 8, 18, 0.6);
    padding: 96px 32px 40px;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
    z-index: 90;
    font-size: 13px;
    overflow-y: auto;
  }
  .nav-links.open { transform: translateX(0); }
  .nav-links a {
    padding: 18px 0;
    border-bottom: 0.5px solid rgba(244, 249, 252, 0.1);
    font-size: 13px;
    display: flex; align-items: baseline; gap: 4px;
  }
  .nav-links a span { font-size: 12px; min-width: 76px; display: inline-block; }
  .mobile-depth { display: none; }
}
@media (max-width: 600px) {
  .entry-info .fact-grid { grid-template-columns: 1fr; }
  .foot-bot-right {
    gap: 12px;
  }
  .feedback-btn {
    padding: 6px 12px;
    font-size: 9px;
  }
  .feedback-credit {
    font-size: 9px;
  }
  .feedback-modal {
    padding: 24px 18px;
  }
  .entry-info .fact + .fact { border-left: none; border-top: 0.5px solid var(--border-light); padding-left: 0; padding-top: 16px; margin-top: 16px; }
  .foot { grid-template-columns: 1fr; }
  .entry-art { max-width: 100%; }
  .modal { padding: 24px 18px; }
  .h1 { font-size: clamp(38px, 11vw, 56px); }
  .mark .logo,
  .mark .logo img,
  .foot-brand .foot-logo .logo,
  .foot-brand .foot-logo .logo img { max-width: 180px; max-height: 48px; }
  .audio-toggle { bottom: 16px; left: 16px; width: 40px; height: 40px; }
}

/* mobile depth indicator: hidden on desktop, shown via media query.
   Old inline indicator next to the hamburger, kept for backward compat
   but only used to mirror the mdVal text. The real mobile HUD is below. */
.mobile-depth {
  display: none;
  align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--bio-cyan); letter-spacing: 0.08em;
  margin-right: 14px;
}
.mobile-depth .md-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--bio-cyan);
  box-shadow: 0 0 8px rgba(111, 227, 255, 0.8);
}
.mobile-depth .md-val { font-weight: 500; }
.mobile-depth .md-unit { opacity: 0.6; font-size: 9px; }

/* ============ MOBILE/TABLET HUD (bottom-pinned glass panel) ============
   Hidden on desktop (gauge + top-right HUD work there).
   Shown below 980px. Tap to expand for full readings. */
.mobile-hud {
  display: none;
  position: fixed;
  bottom: 16px;
  left: 16px;
  right: 16px;
  z-index: 80;
  background: rgba(1, 8, 18, 0.78);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 0.5px solid rgba(111, 227, 255, 0.18);
  border-radius: 14px;
  padding: 10px 14px;
  font-family: var(--font-mono);
  color: var(--text-light);
  transition: padding 0.3s ease, background 0.6s ease,
              opacity 0.35s ease, transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
  cursor: pointer;
}
.mobile-hud.dim {
  opacity: 0.55;
  transform: translateY(8px);
}
.mobile-hud:active { background: rgba(1, 8, 18, 0.9); }

.mobile-hud .mh-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.mobile-hud .mh-left {
  display: flex; align-items: baseline; gap: 8px;
}
.mobile-hud .mh-depth-num {
  font-size: 18px; font-weight: 500; color: var(--bio-cyan);
  font-variant-numeric: tabular-nums; letter-spacing: 0;
  line-height: 1;
}
.mobile-hud .mh-depth-unit { font-size: 10px; color: var(--text-mid); }
.mobile-hud .mh-zone {
  font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-faint);
}
.mobile-hud .mh-right {
  display: flex; align-items: center; gap: 14px;
  font-size: 11px; letter-spacing: 0.04em;
}
.mobile-hud .mh-stat { display: flex; align-items: baseline; gap: 5px; font-variant-numeric: tabular-nums; }
.mobile-hud .mh-stat .lbl { font-size: 9px; color: var(--text-faint); letter-spacing: 0.08em; text-transform: uppercase; }
.mobile-hud .mh-stat .val { color: var(--text-light); }
.mobile-hud .mh-stat .val.amber { color: var(--bio-amber); }
.mobile-hud .mh-chev {
  width: 18px; height: 18px; opacity: 0.5;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}
.mobile-hud.expanded .mh-chev { transform: rotate(180deg); }

/* Expanded panel: shows a mini depth bar with markers */
.mobile-hud .mh-expanded {
  display: none;
  margin-top: 10px; padding-top: 10px;
  border-top: 0.5px solid rgba(244, 249, 252, 0.1);
}
.mobile-hud.expanded .mh-expanded { display: block; }

.mobile-hud .mh-bar {
  position: relative;
  height: 6px; border-radius: 3px;
  background: linear-gradient(to right,
    #7DB4D8 0%,        /* surface */
    #3D7BA8 4%,        /* 200m */
    #1E5A8A 18%,       /* 1000m */
    #0F3A66 55%,       /* 4000m */
    #062349 85%,       /* 6000m */
    #020D1E 100%);     /* 11000m */
  margin: 6px 0 18px;
  overflow: visible;
}
.mobile-hud .mh-bar-fill {
  position: absolute; top: -2px; bottom: -2px; left: 0; width: 0%;
  border-right: 2px solid var(--bio-cyan);
  box-shadow: 4px 0 12px rgba(111, 227, 255, 0.6);
  transition: width 0.2s ease;
}
.mobile-hud .mh-marks {
  display: flex; justify-content: space-between;
  font-size: 8px; color: var(--text-faint);
  letter-spacing: 0.08em;
}
.mobile-hud .mh-marks span { font-variant-numeric: tabular-nums; }
.mobile-hud .mh-hint {
  font-size: 9px; color: var(--text-faint);
  letter-spacing: 0.18em; text-transform: uppercase;
  margin-top: 8px; text-align: center; opacity: 0.6;
}

@media (max-width: 980px) {
  .mobile-hud { display: block; }
  /* Reserve scroll space below the HUD so it never permanently covers content */
  body { padding-bottom: 80px; }
  /* push the intro hint higher so it doesn't overlap the bottom hud */
  .intro-hint { bottom: 90px; }
  /* if the user expanded the hud, intro hint goes even higher */
  .intro-hint.hud-tall { bottom: 240px; }
}
@media (max-width: 360px) {
  /* very small phones: drop the chevron caret to free space */
  .mobile-hud .mh-chev { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .zone-intro h2 .w, .coda-h .w { opacity: 1; filter: none; transform: none; }
  .entry { opacity: 1; transform: none; }
  .map-pin, .map-pin-halo { animation: none !important; }
  .gauge-sub::before { animation: none !important; }
  .audio-toggle.on::after { animation: none !important; }
}

/* ====== ACCESSIBILITY: focus rings + skip link ====== */

/* Skip-to-content link, invisible until focused via Tab */
.skip-link {
  position: absolute; top: -100px; left: 16px;
  z-index: 999;
  padding: 12px 18px;
  background: var(--bio-cyan); color: var(--abyss);
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  border-radius: var(--radius);
  text-decoration: none;
  transition: top 0.2s ease;
}
.skip-link:focus {
  top: 16px;
  outline: 2px solid white; outline-offset: 2px;
}

/* Crisp focus ring on every interactive element when keyboard-focused.
   Uses :focus-visible so mouse clicks don't leave a lingering ring. */
:focus { outline: none; }
a:focus-visible,
button:focus-visible,
[role="slider"]:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--bio-cyan);
  outline-offset: 3px;
  border-radius: 4px;
}
.cta:focus-visible, .narrate:focus-visible, .locate:focus-visible, .audio-toggle:focus-visible {
  outline-offset: 4px;
  box-shadow: 0 0 0 4px rgba(111, 227, 255, 0.25);
}
.nav-links a:focus-visible {
  outline-offset: 6px;
}
.modal-close:focus-visible {
  outline-offset: 2px;
}