:root {
  /* Typography provenance: Space Grotesk" (Google Fonts give it a technical specificity that generic sans-serifs lack. Inter" (Google Fonts Inter's tabular number feature is enabled for all data displays. IBM Plex Mono" (Google Fonts. Interaction Patterns: Patterns:** Intersection Observer (threshold: 0.3 */
  --abyss-base: #0b1a2d;
  --deep-current: #162a3e;
  --pressure-hull: #1e3a52;
  --sonar-green: #a8d8c8;
  --signal-cyan: #2a7c8e;
  --aged-parchment: #d4c8a8;
  --oxidized-brass: #8b7a55;
  --fog-gray: #8fa4b8;
  --alert-amber: #c8a84a;
  --display: "Space Grotesk", sans-serif;
  --body: "Inter", sans-serif;
  --mono: "IBM Plex Mono", monospace;
  --hud: 24px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--aged-parchment);
  color: var(--fog-gray);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.65;
  font-variant-numeric: tabular-nums;
  transition: background-color 1.2s ease;
}
body[data-zone="surface"] { background-color: var(--aged-parchment); }
body[data-zone="twilight"], body[data-zone="log"] { background-color: var(--deep-current); }
body[data-zone="midnight"], body[data-zone="abyss"] { background-color: var(--abyss-base); }

.paper-filter { position: absolute; width: 0; height: 0; }
.depth-contours {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  color: var(--pressure-hull);
  opacity: .42;
}
.contour { fill: none; stroke: currentColor; stroke-width: 1.1; vector-effect: non-scaling-stroke; transition: transform .16s linear, opacity 1s ease; }
body[data-zone="surface"] .depth-contours { opacity: .15; }

.scanline {
  position: fixed;
  inset: 0 0 auto;
  height: 1px;
  z-index: 50;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(168,216,200,.15), transparent);
  animation: scan 12s linear infinite;
}
@keyframes scan { to { transform: translateY(100vh); } }

.hud-frame {
  position: fixed;
  inset: var(--hud);
  z-index: 40;
  pointer-events: none;
  border: 1px solid rgba(42,124,142,.92);
  opacity: 0;
  animation: hudIn 1.5s ease .15s forwards;
  box-shadow: inset 0 0 22px rgba(42,124,142,.07);
}
.hud-frame i { position: absolute; width: 26px; height: 26px; }
.hud-frame i::before, .hud-frame i::after { content: ""; position: absolute; background: var(--signal-cyan); }
.hud-frame i::before { width: 18px; height: 2px; }
.hud-frame i::after { width: 2px; height: 18px; }
.hud-frame i:nth-child(1) { left: -6px; top: -6px; }
.hud-frame i:nth-child(2) { right: -6px; top: -6px; transform: rotate(90deg); }
.hud-frame i:nth-child(3) { right: -6px; bottom: -6px; transform: rotate(180deg); }
.hud-frame i:nth-child(4) { left: -6px; bottom: -6px; transform: rotate(270deg); }
@keyframes hudIn { to { opacity: 1; } }

.fixed-insignia {
  position: fixed;
  z-index: 45;
  top: calc(var(--hud) + 22px);
  left: calc(var(--hud) + 26px);
  width: min(420px, calc(100vw - 115px));
  color: var(--signal-cyan);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .05em;
}
.mark {
  display: inline-block;
  color: var(--sonar-green);
  font-family: var(--display);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: .18em;
  text-shadow: 1px 0 rgba(11,26,45,.55), -1px 0 rgba(212,200,168,.14);
  -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 7px, rgba(0,0,0,.7) 7px 8px);
}
.rule { display: inline-block; width: 170px; height: 1px; margin: 0 0 8px 14px; background: linear-gradient(90deg, var(--signal-cyan), transparent); }
.fixed-insignia nav { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 5px; }
.fixed-insignia a { color: inherit; text-decoration: none; }

.depth-meter {
  position: fixed;
  right: calc(var(--hud) + 34px);
  bottom: calc(var(--hud) + 28px);
  z-index: 46;
  width: 150px;
  color: var(--signal-cyan);
  text-align: center;
}
.pressure-gauge { width: 140px; height: 140px; filter: drop-shadow(0 8px 18px rgba(0,0,0,.35)); }
.ring { fill: rgba(11,26,45,.55); stroke: currentColor; stroke-width: 1.2; }
.inner { fill: none; opacity: .55; }
.ticks line { stroke: currentColor; stroke-width: 1; }
.needle { transform-origin: 90px 90px; transition: transform .08s linear; }
.needle line { stroke: var(--alert-amber); stroke-width: 2; stroke-linecap: round; }
.needle circle { fill: var(--alert-amber); }
.pressure-gauge text, .depth-readout { fill: currentColor; color: currentColor; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; }
.depth-readout { margin-top: -5px; padding: 5px 8px; background: rgba(11,26,45,.55); border: 1px solid rgba(42,124,142,.45); }

main { position: relative; z-index: 5; }
.depth-section {
  min-height: 100vh;
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 20px;
  align-items: center;
  padding: 140px calc(var(--hud) + 44px) 110px;
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(0,0,0,.3);
  overflow: hidden;
}
.depth-section::before, .depth-section::after {
  content: "";
  position: absolute;
  inset: var(--hud);
  pointer-events: none;
  background: linear-gradient(90deg, rgba(42,124,142,.22) 0 1px, transparent 1px calc(100% - 1px), rgba(42,124,142,.22) calc(100% - 1px));
  opacity: .45;
}
.depth-section::after { background: linear-gradient(180deg, rgba(255,255,255,.04), transparent 18%, transparent 82%, rgba(0,0,0,.28)); }
.depth-section.squeeze { animation: squeeze .3s ease-in-out; }
@keyframes squeeze { 50% { padding-left: calc(var(--hud) + 46px); padding-right: calc(var(--hud) + 46px); } }

.surface { color: var(--abyss-base); background: radial-gradient(circle at 25% 20%, rgba(255,255,255,.16), transparent 32%), var(--aged-parchment); }
.twilight { background: linear-gradient(180deg, rgba(22,42,62,.95), var(--deep-current)); }
.midnight, .abyss { background: var(--abyss-base); }
.abyss { min-height: 112vh; }
.logbook { background: linear-gradient(180deg, var(--abyss-base), var(--deep-current)); }

h1, h2 {
  font-family: var(--display);
  font-weight: 700;
  line-height: .95;
  text-transform: uppercase;
  letter-spacing: .12em;
}
h1 { font-size: clamp(2.4rem, 6vw, 5.4rem); color: var(--abyss-base); }
h2 { font-size: clamp(2.4rem, 5vw, 4.8rem); color: var(--sonar-green); }
p { max-width: 48ch; }
.kicker, .coordinate-box span, .status-strip span, .log-card span, .datum span, small {
  display: block;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .05em;
  color: var(--signal-cyan);
  text-transform: uppercase;
}
.kicker { margin-bottom: 18px; }

.document-panel {
  position: relative;
  padding: clamp(28px, 4vw, 54px);
  color: var(--deep-current);
  background: var(--aged-parchment);
  border: 1px solid rgba(139,122,85,.62);
  box-shadow: inset 0 1px rgba(255,255,255,.26), inset 0 -1px rgba(11,26,45,.28), 0 24px 60px rgba(0,0,0,.26);
}
.document-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 38%, transparent 0 38%, rgba(11,26,45,.25) 100%), repeating-linear-gradient(0deg, rgba(11,26,45,.055) 0 .5px, transparent .5px 9px);
  mix-blend-mode: multiply;
}
.document-panel::after { content: ""; position: absolute; inset: 0; pointer-events: none; filter: url(#paper-noise); opacity: .75; }
.document-panel > * { position: relative; z-index: 1; }
.surface-brief { grid-column: 1 / span 5; }
.surface-brief p, .final-log p { margin-top: 28px; color: var(--deep-current); }

.instrument-stack { grid-column: 9 / span 3; display: grid; gap: 18px; }
.coordinate-box, .status-strip, .toggle-plate {
  padding: 18px;
  border: 1px solid rgba(42,124,142,.45);
  background: rgba(11,26,45,.12);
  box-shadow: inset 0 1px rgba(255,255,255,.15), inset 0 -1px rgba(0,0,0,.22);
}
.coordinate-box strong, .status-strip em { display: block; margin-top: 8px; color: var(--abyss-base); font-family: var(--mono); font-style: normal; }
.toggle-plate { display: flex; align-items: center; justify-content: space-between; color: var(--oxidized-brass); background: repeating-linear-gradient(0deg, #8b7a55 0 1px, #7f704e 1px 3px); }
.toggle-plate b { width: 48px; height: 24px; border-radius: 16px; background: #5e533c; box-shadow: inset 0 3px 8px rgba(0,0,0,.45); position: relative; }
.toggle-plate b::after { content: ""; position: absolute; right: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(#d4c8a8, #8b7a55); box-shadow: 0 2px 5px rgba(0,0,0,.45); }

.magazine-copy { grid-column: 1 / span 5; }
.magazine-copy p, .midnight-statement p, .abyss-line p { margin-top: 28px; color: var(--fog-gray); }
.log-card { grid-column: 10 / span 3; padding: 26px; transform: rotate(-.6deg); }
.log-card div { padding: 12px 0; border-bottom: 1px solid rgba(22,42,62,.25); }
.log-card strong { font-family: var(--mono); color: var(--abyss-base); font-weight: 400; }

.midnight-statement { grid-column: 2 / span 6; }
.midnight-statement h2 { max-width: 820px; }
.floating-data { grid-column: 10 / span 2; display: grid; gap: 14px; }
.datum { padding: 15px; background: rgba(30,58,82,.56); border: 1px solid rgba(42,124,142,.45); }
.datum strong { display: block; margin-top: 5px; color: var(--sonar-green); font-family: var(--mono); font-weight: 400; }

.abyss-line { grid-column: 3 / span 6; z-index: 2; }
.abyss-line h2 { font-size: clamp(1.7rem, 4vw, 3.7rem); }
.biofield { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease .3s; }
.abyss.active .biofield { opacity: 1; }
.biofield i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: rgba(168,216,200,.45); box-shadow: 0 0 18px rgba(168,216,200,.45); animation: drift 12s ease-in-out infinite; }
.biofield i:nth-child(1) { left: 14%; top: 34%; animation-duration: 18s; }
.biofield i:nth-child(2) { left: 72%; top: 42%; width: 2px; height: 2px; animation-duration: 10s; animation-delay: -3s; }
.biofield i:nth-child(3) { left: 44%; top: 70%; width: 3px; height: 3px; animation-duration: 20s; animation-delay: -8s; }
.biofield i:nth-child(4) { left: 86%; top: 18%; animation-duration: 14s; animation-delay: -1s; }
.biofield i:nth-child(5) { left: 23%; top: 83%; width: 2px; height: 2px; animation-duration: 16s; animation-delay: -5s; }
.biofield i:nth-child(6) { left: 58%; top: 26%; animation-duration: 11s; animation-delay: -7s; }
.biofield i:nth-child(7) { left: 31%; top: 53%; width: 3px; height: 3px; animation-duration: 19s; animation-delay: -2s; }
@keyframes drift { 50% { transform: translate(26px, -22px); opacity: .28; } }

.final-log { grid-column: 2 / span 5; }
.final-log small { margin-top: 38px; color: var(--oxidized-brass); }

.reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.ripple { position: fixed; z-index: 60; pointer-events: none; border: 1px solid var(--sonar-green); border-radius: 50%; opacity: .3; animation: ping .8s ease-out forwards; }
.ripple:nth-last-child(2) { animation-delay: .06s; opacity: .2; }
.ripple:nth-last-child(3) { animation-delay: .12s; opacity: .1; }
@keyframes ping { to { width: 400px; height: 400px; margin: -200px 0 0 -200px; opacity: 0; } }

@media (max-width: 900px) {
  :root { --hud: 14px; }
  .depth-section { grid-template-columns: 1fr; padding: 125px 28px 110px; }
  .surface-brief, .instrument-stack, .magazine-copy, .log-card, .midnight-statement, .floating-data, .abyss-line, .final-log { grid-column: 1; }
  .depth-meter { width: 96px; right: 18px; bottom: 16px; }
  .pressure-gauge { width: 92px; height: 92px; }
  .fixed-insignia { width: calc(100vw - 58px); }
  .rule { width: 90px; }
}