/* ============================================================
   Oceanic Enigmas — design system: SOUNDING LINE
   ------------------------------------------------------------
   The site is a descent; the page is an expedition record.
   Frozen visual spec: design.html at the repo root; token
   record: specs/design.md.
   THEME INVERSION (deliberate, recorded in specs/design.md):
   :root IS the abyss (dark). html.light is "surface mode".
   House rules:
   - tokens on :root, light variant re-declares under .light
   - reading surface never pure white, ink never pure black
   - accents carry meaning: --lume = living light (interaction
     only), --brass = measurement (never interactive),
     --blood = hull stress (almost never)
   ============================================================ */

:root {
  /* surfaces & ink */
  --c-bg: #0B1418;          /* deep water — blue-green black, never pure black */
  --c-bg-deep: #070E11;     /* the column below — gradients descend into this */
  --c-surface: #101C22;     /* raised surfaces: plates, tables, notes */
  --c-ink: #C7D1CB;         /* foam-bone text — never pure white */
  --c-muted: #8DA09A;       /* secondary text, captions */
  --c-rule: rgba(199, 209, 203, 0.16);   /* hairlines */
  /* accents (meaning-bearing — see header) */
  --c-accent: #63E2C0;      /* BIOLUMINESCENCE — only what glows responds */
  --c-accent-soft: rgba(99, 226, 192, 0.35);
  --c-brass: #C0A46B;       /* INSTRUMENT BRASS — kickers, depth marks, table heads */
  --c-blood: #C96A55;       /* PRESSURE RED — warnings, the 404 */
  --c-scroll-shadow: rgba(0, 0, 0, 0.5);   /* readout edge shadow (see .readout) */
  /* type */
  --font-display: "Old Standard TT", Georgia, serif;
  --font-body: "Spectral", Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --font-ui: "JetBrains Mono", ui-monospace, monospace;
  /* layout */
  --measure: 34rem;
  --page: 72rem;

  /* THE PLATE'S OWN WORLD — never re-declared under html.light.
     A plate is a photograph of the deep: it keeps its abyssal ground in both
     themes, so everything printed ON it must keep abyssal ink too. Using the
     themed tokens here is a contrast trap — the light-mode values are derived
     for paper and measure 2.6:1 against the plate. */
  --plate-bg: #08141A;
  --plate-ink: #8DA09A;    /* 6.78:1 on --plate-bg */
  --plate-brass: #C0A46B;  /* 7.79:1 on --plate-bg */
  --plate-rule: rgba(199, 209, 203, 0.16);
}

html.light {
  /* surface mode — the same world re-lit, not inverted */
  --c-bg: #EDEAE0;          /* salt-bleached overcast paper — warm grey, not white */
  --c-bg-deep: #E2DED1;
  --c-surface: #E6E2D5;
  --c-ink: #1E2B2A;         /* warm dark ink, not black */
  --c-muted: #5C6D69;
  --c-rule: rgba(30, 43, 42, 0.18);
  /* Light-mode accents are darkened to clear WCAG AA on paper — the dark-mode
     values are far too bright here. Measured against --c-bg / --c-surface:
     lume 5.15:1 / 4.78:1, brass 5.97:1 / 5.55:1. The brass carries small
     uppercase mono (table titles, field-note tags, depth marks), which is
     exactly where the earlier #8A6D3B failed at 3.7:1. */
  --c-accent: #0C6E59;      /* biolume seen from the surface: deep teal */
  --c-accent-soft: rgba(12, 110, 89, 0.30);
  --c-brass: #6B5426;
  --c-blood: #9E4232;
  --c-scroll-shadow: rgba(30, 43, 42, 0.30);
}

/* ---------- base ---------- */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; background: var(--c-bg); }

body {
  margin: 0;
  /* The descent: the page darkens as you scroll. NOT background-attachment:
     fixed — that paints only the viewport and leaves everything below the fold
     unpainted (white) in full-page captures and on long scrolls. */
  background: linear-gradient(to bottom, var(--c-bg), var(--c-bg-deep));
  background-repeat: no-repeat;
  min-height: 100vh;
  color: var(--c-ink);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1.075rem;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.2;
  text-wrap: balance;
}

a { color: var(--c-accent); text-decoration-thickness: 1px; text-underline-offset: 0.22em; text-decoration-color: var(--c-accent-soft); }
a:hover { text-decoration-color: var(--c-accent); text-shadow: 0 0 14px var(--c-accent-soft); }

code, pre, .data { font-family: var(--font-mono); font-size: 0.9em; }

/* paper grain — feTurbulence rasterized once via data-URI tile. NEVER inline a
   live full-screen SVG filter element: it stalls the compositor on scroll. */
.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 40;
  opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
}

.skip-link {
  position: absolute; left: -999px; top: 0;
  background: var(--c-accent); color: var(--c-bg); padding: 0.5rem 1rem;
}
.skip-link:focus { left: 0; z-index: 50; }

::selection { background: var(--c-accent); color: var(--c-bg); }

/* ---------- masthead ---------- */

.masthead { border-bottom: 1px solid var(--c-rule); }

.masthead__inner {
  max-width: var(--page); margin: 0 auto; padding: 0.9rem 1.25rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}

.brand { text-decoration: none; color: var(--c-ink); }
.brand__title { font-family: var(--font-display); font-size: 1.2rem; letter-spacing: 0.04em; }

.masthead__links { display: flex; align-items: center; gap: 1.1rem; }

.navlink {
  font-family: var(--font-ui); font-size: 0.78rem; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-ink); text-decoration: none;
}
.navlink:hover { color: var(--c-accent); text-shadow: 0 0 14px var(--c-accent-soft); }

.masthead__burger { display: none; }

.theme-toggle {
  background: none; border: 1px solid var(--c-rule); border-radius: 999px;
  width: 2.1rem; height: 2.1rem; padding: 0.35rem; cursor: pointer; color: var(--c-accent);
}
.theme-toggle:hover { border-color: var(--c-accent); box-shadow: 0 0 16px var(--c-accent-soft); }
.theme-toggle svg { width: 100%; height: 100%; }
/* dark (default) shows the sun — click to SURFACE ↑; light shows the moon — DESCEND ↓ */
.theme-toggle__moon { display: none; }
html.light .theme-toggle__sun { display: none; }
html.light .theme-toggle__moon { display: block; }

@media (max-width: 40rem) {
  .masthead__burger {
    display: flex; flex-direction: column; gap: 4px;
    background: none; border: none; padding: 0.4rem; cursor: pointer;
  }
  .masthead__burger span { width: 20px; height: 2px; background: var(--c-ink); }
  .masthead__links {
    display: none; position: absolute; right: 1rem; top: 3.4rem;
    flex-direction: column; align-items: flex-end; gap: 0.8rem;
    background: var(--c-surface); border: 1px solid var(--c-rule);
    border-radius: 6px; padding: 1rem 1.25rem; z-index: 20;
  }
  .masthead__links.is-open { display: flex; }
}

/* ---------- content ---------- */

.prose { max-width: var(--measure); margin: 2rem auto 4rem; padding: 0 1.25rem; }
.prose h1 { font-size: clamp(1.7rem, 5vw, 2.4rem); }
.prose img { max-width: 100%; height: auto; }
.prose blockquote, .essay-body blockquote {
  margin: 1.5rem 0; padding: 0.25rem 0 0.25rem 1.1rem;
  border-left: 2px solid var(--c-accent);
  font-family: var(--font-display); font-style: italic; font-size: 1.15em;
}
.prose table, .essay-body table { border-collapse: collapse; width: 100%; font-size: 0.92rem; }
.prose th, .prose td, .essay-body th, .essay-body td { border-bottom: 1px dotted var(--c-rule); padding: 0.5rem 0.7rem; text-align: left; vertical-align: top; }
.prose th, .essay-body th {
  font-family: var(--font-mono); font-weight: 500; font-size: 0.68rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-muted);
  border-bottom: 1px solid var(--c-rule);
}

/* ---------- home: THE DESCENT ---------- */
/* The homepage IS the dive: the water column darkens from sunlit surface to
   hadal black across nine full-height soundings. Like the plates, the descent
   is THEME-INDEPENDENT — the water column does not change with the light in
   the room, so every color here is a fixed --dive-* value, never a themed
   token. The ramp is painted as chained per-section CSS gradients (each ends
   on the color the next begins with): it reads identically with JS off and —
   unlike background-attachment:fixed or a JS-lerped fixed layer — paints
   correctly in full-page captures. JS adds only the depth-gauge readout. */

body.layout-home {
  /* the descent's own world (cf. --plate-*): never re-declared under .light */
  --dive-surface: #B8D8DC;     /* 0 m — overcast daylight through water */
  --dive-ink-dark: #0B2228;    /* ink on the sunlit stretch */
  --dive-ink-light: #D9ECF0;   /* ink below the twilight boundary */
  --dive-lume: #63E2C0;        /* bioluminescence against the fixed dark ramp */
  --dive-floor: #000204;       /* hadal bottom — the one place the site touches near-black */
  background: var(--dive-floor);
  color: var(--dive-ink-dark);
  overflow-x: clip;            /* swimmers animate from -15vw to 112vw */
}

/* surface stretch: masthead, hero, dive map, intro all share the 0 m water */
.dive-surface { background: var(--dive-surface); display: flow-root; }
body.layout-home .masthead { background: var(--dive-surface); border-bottom-color: rgba(11, 34, 40, 0.16); }
body.layout-home .brand, body.layout-home .navlink { color: var(--dive-ink-dark); }
body.layout-home .navlink:hover { color: #0C6E59; text-shadow: none; }
body.layout-home .theme-toggle { color: #0C6E59; border-color: rgba(11, 34, 40, 0.28); }
body.layout-home .theme-toggle:hover { border-color: #0C6E59; box-shadow: none; }
body.layout-home .masthead__burger span { background: var(--dive-ink-dark); }
@media (max-width: 40rem) {
  body.layout-home .masthead__links { background: #CFE2E4; border-color: rgba(11, 34, 40, 0.2); }
}

.hero {
  position: relative; min-height: 78vh;
  display: flex; flex-direction: column; justify-content: center;
  max-width: 56rem; margin: 0 auto; padding: 2.5rem 1.25rem 4rem;
}
.hero__over {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.26em;
  text-transform: uppercase; margin: 0 0 1.2rem; opacity: 0.7;
}
.hero__title { font-size: clamp(2.4rem, 6.5vw, 4.6rem); line-height: 1.08; margin: 0; }
.hero__title em { font-style: italic; font-weight: 400; }
.hero__dek { font-size: 1.18rem; max-width: 38rem; margin: 1.5rem 0 0; font-weight: 400; }
.hero__cta {
  display: inline-flex; align-items: center; gap: 0.6rem; width: fit-content;
  margin-top: 2.8rem; padding-bottom: 0.4rem;
  font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.18em;
  text-transform: uppercase; text-decoration: none; color: inherit;
  border-bottom: 1px solid rgba(11, 34, 40, 0.4);
  position: relative; z-index: 1;
}
.hero__cta:hover { border-bottom-color: #0C6E59; color: #0C6E59; text-shadow: none; }

body.layout-home .plate--home { margin-top: 0; }
.home-intro { max-width: 56rem; margin: 0 auto; padding: 0 1.25rem 5rem; color: #223B42; }
.home-intro p { max-width: 38rem; font-size: 1.15rem; margin: 0; }

/* the nine soundings — each section holds its own water nearly flat through
   the reading (a slow ~20% drift toward the next anchor), then falls to the
   next anchor inside its bottom 20vh: open water below the essay
   (padding-bottom 24vh), so the fall never crosses text and every line of
   the inline essay reads against a stable background. Each gradient ends on
   the color the next begins with — the column stays seamless at any essay
   length. */
.dive-sec { position: relative; padding-bottom: 24vh; }
.dive-sec__inner {
  max-width: 46rem; margin: 0 auto; padding: 0 1.25rem; width: 100%;
  min-height: 62vh; display: flex; flex-direction: column; justify-content: center;
  position: relative; z-index: 1;
}
.dive-sec--1 { background: linear-gradient(var(--dive-surface) 0px, #AACED4 calc(100% - 20vh), #74A6B4 100%); color: var(--dive-ink-dark); }
.dive-sec--2 { background: linear-gradient(#74A6B4 0px, #6496A6 calc(100% - 20vh), #265870 100%); color: #071C24; }
.dive-sec--3 { background: linear-gradient(#265870 0px, #214F66 calc(100% - 20vh), #0E2A3E 100%); color: var(--dive-ink-light); }
.dive-sec--4 { background: linear-gradient(#0E2A3E 0px, #0D2639 calc(100% - 20vh), #081826 100%); color: var(--dive-ink-light); }
.dive-sec--5 { background: linear-gradient(#081826 0px, #071623 calc(100% - 20vh), #050F19 100%); color: #CFE4EA; }
.dive-sec--6 { background: linear-gradient(#050F19 0px, #050E17 calc(100% - 20vh), #03090F 100%); color: #CFE4EA; }
.dive-sec--7 { background: linear-gradient(#03090F 0px, #03080E calc(100% - 20vh), #020509 100%); color: #C8DFE6; }
.dive-sec--8 { background: linear-gradient(#020509 0px, #020408 calc(100% - 20vh), var(--dive-floor) 100%); color: #C8DFE6; }
.dive-sec--9 { background: var(--dive-floor); color: #C2DBE2; }

.dive-sec__kicker {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.2em;
  text-transform: uppercase; margin: 0; opacity: 0.7;
}
/* full opacity where dark ink rides the still-lit water (AA margin is thin) */
.dive-sec--1 .dive-sec__kicker, .dive-sec--2 .dive-sec__kicker { opacity: 1; }
.dive-sec--3 .dive-sec__kicker { opacity: 0.85; } /* #265870 holds flat here — .7 dips under AA */
.dive-sec--4 .dive-sec__kicker { color: var(--dive-lume); opacity: 0.9; } /* first living light */
.dive-sec__title { font-size: clamp(2.1rem, 4.4vw, 3.4rem); line-height: 1.1; margin: 0.9rem 0 0.7rem; }
.dive-sec__hook { font-size: 1.1rem; line-height: 1.6; margin: 0; max-width: 35rem; opacity: 0.8; }
.dive-sec--1 .dive-sec__hook, .dive-sec--2 .dive-sec__hook { opacity: 1; }

/* the log — the essay inline, printed straight on the water (no sheet, the
   column shows through). It re-declares the THEMED tokens as fixed values in
   one of two ink regimes keyed to the water its section holds — the water is
   near-flat through the reading (see the gradient note above), so one regime
   per section is enough. Panels (readouts, field notes) get translucent
   surfaces; the plates keep their own abyssal world as everywhere else. */
.dive-log {
  /* dark-water regime (03–09): ink for #265870 and everything below */
  --c-ink: #D9ECF0;
  --c-muted: #B7CDD3;
  --c-rule: rgba(217, 236, 240, 0.24);
  --c-surface: rgba(4, 14, 20, 0.5);
  --c-accent: #63E2C0;
  --c-accent-soft: rgba(99, 226, 192, 0.35);
  --c-brass: #C0A46B;
  --c-blood: #C96A55;
  --c-scroll-shadow: rgba(0, 0, 0, 0.5);
  position: relative; z-index: 1;
  max-width: 58rem; margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 3rem);
  color: var(--c-ink);
}
/* lit-water regime (01–02): dark ink on sunlit teal; accent/brass/muted are
   darkened well past the light-theme values — they sit on mid-teal water
   (#74A6B4…#6496A6), not on paper, and small mono needs AA there */
.dive-sec--1 .dive-log, .dive-sec--2 .dive-log {
  --c-ink: #0B2228;
  --c-muted: #16323B;
  --c-rule: rgba(11, 34, 40, 0.3);
  --c-surface: rgba(240, 247, 247, 0.5);
  --c-accent: #073A2F;
  --c-accent-soft: rgba(7, 58, 47, 0.3);
  --c-brass: #4E3B10;
  --c-blood: #7A3226;
  --c-scroll-shadow: rgba(30, 43, 42, 0.35);
}
.dive-log .standfirst,
.dive-log .essay-body,
.dive-log .soundings { max-width: var(--measure); margin-left: auto; margin-right: auto; }
.dive-log .standfirst { margin-bottom: 2rem; }
.dive-log .plate { max-width: 52rem; margin: 0 auto 2.4rem; }
.dive-log .soundings { margin-top: 2.2rem; }

/* scrollytelling reveal — CSS scroll-driven, no JS: each block surfaces as it
   enters the viewport, scrubbed to scroll (back up = back into the murk).
   Unsupported browsers and reduced-motion get static, fully visible content —
   the @supports guard means nothing is ever hidden without the timeline to
   reveal it. */
@supports (animation-timeline: view()) {
  .dive-sec__inner {
    animation: dive-reveal both ease-out;
    animation-timeline: view();
    animation-range: entry 10% entry 70%;
  }
  .dive-log {
    animation: dive-reveal both ease-out;
    animation-timeline: view();
    animation-range: cover 0% cover 9%;
  }
}
@keyframes dive-reveal {
  from { opacity: 0; transform: translateY(2.2rem); }
}

/* ambient decor — swimmers, jellies, marine snow, lume pulses */
.dive-decor { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.dive-decor svg { position: absolute; fill: currentColor; }
.dive-pulse {
  position: absolute; border-radius: 50%;
  background: var(--dive-lume); box-shadow: 0 0 14px var(--dive-lume);
  animation: dive-pulse 4s ease-in-out infinite;
}
.dive-snow {
  position: absolute; top: 0; width: 2px; height: 2px; border-radius: 50%;
  background: rgba(220, 238, 242, 0.5);
  animation: dive-fall 14s linear infinite;
}
/* the glyph's head points LEFT (tail fin on the right), so the default swim
   travels right-to-left; -r flips the fish and swims it back the other way */
@keyframes dive-swim { from { transform: translateX(112vw); } to { transform: translateX(-15vw); } }
@keyframes dive-swim-r { from { transform: translateX(-15vw) scaleX(-1); } to { transform: translateX(112vw) scaleX(-1); } }
@keyframes dive-sway { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-26px) rotate(3deg); } }
@keyframes dive-pulse { 0%, 100% { opacity: 0.25; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes dive-fall {
  from { transform: translateY(-8vh) translateX(0); opacity: 0; }
  12% { opacity: 0.7; }
  to { transform: translateY(70vh) translateX(28px); opacity: 0; }
}

/* depth gauge — JS-revealed (enhancement only, see main.js) */
.gauge {
  display: none;
  position: fixed; right: 1.6rem; top: 50%; transform: translateY(-50%); z-index: 5;
  flex-direction: column; align-items: flex-end; gap: 0.6rem;
  font-family: var(--font-mono); pointer-events: none; color: var(--dive-ink-dark);
}
.gauge.is-live { display: flex; }
.gauge__depth { font-size: 0.92rem; font-weight: 500; letter-spacing: 0.04em; }
.gauge__zone { font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; }
.gauge__rail { width: 1px; height: 170px; position: relative; margin-right: 0.45rem; }
.gauge__rail::before { content: ""; position: absolute; inset: 0; background: currentColor; opacity: 0.35; }
.gauge__dot {
  position: absolute; left: 50%; top: 0; width: 7px; height: 7px; border-radius: 50%;
  background: var(--dive-lume); box-shadow: 0 0 10px var(--dive-lume);
  transform: translate(-50%, -50%);
}
@media (max-width: 48rem) { .gauge.is-live { display: none; } } /* kickers carry the depth on mobile */

/* colophon sits on the hadal floor */
body.layout-home .colophon { background: var(--dive-floor); border-top-color: rgba(157, 188, 196, 0.2); margin-top: 0; }
body.layout-home .colophon__inner, body.layout-home .colophon__links a { color: #9DBCC4; }
body.layout-home .colophon__title { color: #C2DBE2; }
body.layout-home .colophon__note em { color: var(--dive-lume); }

/* ---------- essay apparatus ---------- */

.essay { max-width: var(--measure); margin: 0 auto; padding: 3.5rem 1.25rem 4rem; }
.plate-kicker {
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--c-brass); margin: 0;
}
.essay__title { font-size: clamp(2.1rem, 5vw, 3rem); margin: 0.7rem 0 1rem; }
.standfirst { font-size: 1.14rem; font-style: italic; color: var(--c-muted); margin: 0 0 2.2rem; }

/* The plate — hero images stay abyssal in BOTH themes: a photograph of the deep
   does not change with the room's lighting. Its caption uses the --plate-* tokens
   (see :root), NOT the themed ones: the caption sits on the plate's ground, so it
   belongs to the plate's world, not the page's. */
.plate { margin: 0 0 2.4rem; border: 1px solid var(--c-rule); background: var(--plate-bg); }
.plate img { display: block; width: 100%; aspect-ratio: 2 / 1; object-fit: cover; height: auto; }
.plate figcaption {
  padding: 0.65rem 0.9rem; border-top: 1px solid var(--plate-rule);
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.12em;
  color: var(--plate-ink);
}
.plate figcaption b { color: var(--plate-brass); font-weight: 500; }
.plate--home { max-width: 56rem; margin: 2.2rem auto; }
@media (max-width: 58rem) { .plate--home { margin-left: 1.25rem; margin-right: 1.25rem; } }

.essay-body > p:first-of-type::first-letter {
  font-family: var(--font-display); color: var(--c-brass);
  font-size: 3.4em; float: left; line-height: 0.82; padding: 0.06em 0.12em 0 0;
}
.essay-body > p { margin: 0 0 1.35rem; }

/* Instrument readouts. These are data, not prose: they break out of the reading
   measure toward --page at wide (4–5 columns strangle at 34rem), and below that
   they scroll inside their own frame rather than dragging the page sideways. */
/* NOTE ON SPECIFICITY: `.essay-body > p` (0,1,1) sets the prose margins, so a
   bare `.table-title` (0,1,0) loses every margin battle to it — including the
   margin-left the breakout below depends on. Hence `.essay-body > .table-title`
   throughout; keep the parent in the selector when touching these. */
.essay-body > .table-title {
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--c-brass);
  margin: 2.2rem 0 0; padding: 0.6rem 0.9rem;
  border: 1px solid var(--c-rule); border-bottom: none; background: var(--c-surface);
}
/* Scroll shadows (Komarov's technique): the two `local` layers are the surface
   masking the two `scroll` shadow layers, so a shadow shows only on the side
   that still has table to reveal, and fades out at each end. Without this the
   frame clips the last column mid-word and reads as broken rather than
   swipeable. Zero JS, and it simply doesn't paint where unsupported. */
.essay-body > .readout {
  border: 1px solid var(--c-rule);
  margin: 0 0 2.2rem; overflow-x: auto; -webkit-overflow-scrolling: touch;
  background:
    linear-gradient(to right, var(--c-surface) 30%, rgba(0, 0, 0, 0)) left center,
    linear-gradient(to left, var(--c-surface) 30%, rgba(0, 0, 0, 0)) right center,
    radial-gradient(farthest-side at 0 50%, var(--c-scroll-shadow), rgba(0, 0, 0, 0)) left center,
    radial-gradient(farthest-side at 100% 50%, var(--c-scroll-shadow), rgba(0, 0, 0, 0)) right center,
    var(--c-surface);
  background-repeat: no-repeat;
  background-size: 3rem 100%, 3rem 100%, 0.9rem 100%, 0.9rem 100%;
  background-attachment: local, local, scroll, scroll;
}

/* The shadow alone is nearly invisible on the dark surface (~5/255), so at the
   widths where the readout actually overflows (table min-width 30rem), the
   title bar says so outright. Instrument label, not a UI hint. */
@media (max-width: 32rem) {
  .essay-body > .table-title::after {
    content: " ⟩ swipe";
    color: var(--c-accent);
    letter-spacing: 0.16em;
    white-space: nowrap;   /* keep the chevron with its word when the title wraps */
  }
}
.readout table { margin: 0; min-width: 30rem; }
.readout th, .readout td { padding-left: 0.9rem; padding-right: 0.9rem; }

/* Break out of --measure once there is room on both sides. The readout and its
   title move together; 52rem is wide enough for the 5-column tables to stop
   wrapping titles like "Twenty Thousand Leagues Under the Seas" to three lines. */
@media (min-width: 58rem) {
  .essay-body > .table-title,
  .essay-body > .readout {
    width: 52rem;
    margin-left: 50%;
    transform: translateX(-50%);
  }
  .essay-body > .table-title { margin-top: 2.2rem; margin-bottom: 0; }
  .essay-body > .readout { margin-bottom: 2.4rem; }
}

.field-note {
  margin: 2.2rem 0; padding: 1.1rem 1.3rem; border: 1px solid var(--c-rule);
  border-left: 2px solid var(--c-brass); background: var(--c-surface); font-size: 0.95rem;
}
.field-note .tag {
  display: block; font-family: var(--font-mono); font-size: 0.64rem;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--c-brass); margin-bottom: 0.5rem;
}

.reaction {
  margin: 1.8rem 0; padding: 1rem 1.3rem; border: 1px dashed var(--c-rule);
  font-family: var(--font-mono); font-size: 0.88rem; text-align: center; color: var(--c-ink);
}
.reaction .lume { color: var(--c-accent); }

.soundings {
  margin: 2.6rem 0 0; font-family: var(--font-mono); font-size: 0.68rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-muted);
}
.soundings a { font-size: 0.74rem; }

.divenav {
  display: flex; justify-content: space-between; gap: 1rem; margin-top: 2.6rem;
  padding-top: 1.3rem; border-top: 1px solid var(--c-rule);
  font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.06em;
}
.divenav a { max-width: 46%; }
.divenav .dir {
  display: block; font-size: 0.62rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--c-muted); margin-bottom: 0.3rem;
}
.divenav__next { text-align: right; }

/* ---------- about: AI note + works cited ---------- */

.ai-note {
  margin: 2.2rem 0; padding: 1.2rem 1.4rem; border: 1px solid var(--c-accent-soft);
  border-left: 2px solid var(--c-accent); background: var(--c-surface); font-size: 0.98rem;
}
.ai-note .tag {
  display: block; font-family: var(--font-mono); font-size: 0.64rem;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--c-accent); margin-bottom: 0.6rem;
}
.ai-note .sig {
  display: block; margin-top: 0.9rem; font-family: var(--font-mono);
  font-size: 0.7rem; color: var(--c-muted);
}

.cited { list-style: none; margin: 1rem 0 0; padding: 0; font-size: 0.9rem; color: var(--c-muted); }
.cited li { padding: 0.45rem 0; border-bottom: 1px dotted var(--c-rule); }
.cited .no { font-family: var(--font-mono); color: var(--c-brass); margin-right: 0.7rem; font-size: 0.72rem; }

/* ---------- the 404: below the known seafloor ---------- */

.lost { max-width: var(--measure); margin: 3rem auto 4rem; padding: 0 1.25rem; text-align: center; }
.lost .depth {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--c-blood);
}
.lost h1 { font-size: 2.2rem; margin: 0.7rem 0 0.4rem; }
.lost p { color: var(--c-muted); margin: 0 0 1.2rem; }
.lost .plate { text-align: left; margin-top: 2rem; }

/* ---------- colophon ---------- */

.colophon { border-top: 1px solid var(--c-rule); margin-top: 2rem; }
.colophon__inner {
  max-width: var(--page); margin: 0 auto; padding: 2rem 1.25rem 2.5rem;
  font-family: var(--font-ui); font-size: 0.72rem; letter-spacing: 0.12em; color: var(--c-muted);
}
.colophon__title { font-family: var(--font-display); font-size: 1rem; letter-spacing: 0.04em; color: var(--c-ink); margin: 0 0 0.5rem; }
.colophon__links { display: flex; flex-wrap: wrap; gap: 1rem; }
.colophon__links a { color: var(--c-muted); }
.colophon__note { margin: 1rem 0 0; text-transform: uppercase; }
.colophon__note em { font-style: normal; color: var(--c-accent); }
.colophon__foot { margin-top: 0.6rem; }

/* ---------- motion & print floor (non-negotiable) ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media print {
  .masthead, .colophon, .theme-toggle, .skip-link, .grain { display: none; }
  body { background: #fff; color: #000; }
  /* print has no scrollport — never leave content at a reveal's before-state */
  .dive-sec__inner, .dive-log { animation: none !important; }
}