/* =========================================================================
   COPERNICUS-ALIGNED — light, institutional, and not a dashboard.
   =========================================================================
   The dark console with coloured accents reads as a product demo whatever the
   accents are. This page's claim is that it is a TECHNICAL RECORD, and the
   register a European due-diligence reader expects for that is a document:
   paper ground, black-blue text, hairline rules, one institutional blue, and
   colour only where it carries meaning.

   The blue is Copernicus Marine's own. That is not decoration by association —
   the sargassum product, the currents, the waves and the licence quoted in the
   footer are all theirs. Borrowing the agency's visual language is the honest
   move where inventing a house palette would be pretending the data is ours.

   CONTRAST MEASURED AGAINST BOTH GROUNDS, not eyeballed. Every token below
   clears 3.0:1 for graphics and all but four clear 4.5:1 for body text; the
   four that do not (muted, assumed, sev-0) are never body text. Audited
   2026-09-11.

   THE TWO SEPARATIONS SURVIVE, as they did through the dark palette:
     · `synthetic` sits off the severity ramp and off measured/modelled.
     · `unknown` sits off the ramp too — an unobserved coast must never borrow
       a pale severity colour, which is how "nobody looked" becomes "nothing
       there".
   ========================================================================= */
/* SELF-HOSTED. This page used to pull Archivo and IBM Plex Mono from
   fonts.googleapis.com, which sent every visitor's IP address to Google before
   a single pixel rendered — on the one page written for a German audience,
   while every other page in this directory already served its faces from
   web/fonts/. Both families are SIL Open Font License, so hosting them
   ourselves is exactly what the licence is for.

   SUBSET IS latin ONLY. latin-ext is U+0100-024F, Central and Eastern
   European; every character es/en/de needs — the accented vowels, n-tilde,
   the umlauts, the eszett, the inverted marks — is inside U+0000-00FF and
   therefore inside latin. Shipping latin-ext too would double the payload for
   glyphs no page here can produce. */
@font-face {
  font-family: "Archivo";
  src: url("fonts/Archivo-Variable.woff2") format("woff2-variations");
  font-weight: 300 600;          /* one variable file covers every weight below */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/IBMPlexMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/IBMPlexMono-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ground ---------------------------------------------------------------- */
  --nm-ground:   #FFFFFF;
  --nm-panel:    #F2F6F9;
  --nm-panel-2:  #E8EEF3;
  --nm-rule:     #C9D6E0;
  --nm-rule-soft:#E1E9EF;

  /* text ------------------------------------------------------------------ */
  --nm-ink:      #0B2B40;
  --nm-ink-2:    #4A6274;
  --nm-muted:    #6B7D8C;

  /* provenance — the four words, as colour --------------------------------- */
  --nm-measured: #0E5AA7;   /* Copernicus blue */
  --nm-modelled: #41729B;
  --nm-assumed:  #71808E;
  --nm-synthetic:#6B4E8A;   /* off both axes, on purpose */

  /* marks ----------------------------------------------------------------- */
  --nm-accent:   #9A5B00;   /* sargassum ochre, dark enough to read on paper */
  --nm-signal:   #B3121C;

  /* severity ramp: grey -> green -> amber -> burnt -> red -------------------- */
  --nm-sev-0:    #71808E;
  --nm-sev-1:    #2F6B44;
  --nm-sev-2:    #8A6000;
  --nm-sev-3:    #A8451A;
  --nm-sev-4:    #B3121C;
  --nm-unknown:  #41729B;   /* off the ramp: not a severity, a missing one */

  /* the drawn figures need a land fill too */
  --nm-land:      #E4EAEF;
  --nm-land-edge: #A9BDCB;
}

/* NO DARK MODE HERE, deliberately. The other three pages are consoles and keep
   one behind a toggle for night work. This one is the record — a document, and
   a document does not have a night mode. It also loads no rx-tokens.css and
   carries no theme class, so a :not(.theme-light) rule would have made it dark
   by default, which is the exact opposite of the intent. */

/* ==========================================================================
   VBK-SAR-01 — investor technical record
   Precision instrument: strict grid, hairlines, monospace numerics.
   Depth comes from value and rule weight. No shadows, no radii, no gradients.
   ========================================================================== */

:root {
  /* base ---------------------------------------------------------------- */
  --ink:        var(--nm-ground);
  --surface:    var(--nm-panel);
  --surface-2:  var(--nm-panel-2);
  --rule:       var(--nm-rule);
  --rule-soft:  var(--nm-rule-soft);

  /* text ---------------------------------------------------------------- */
  --text:       var(--nm-ink);
  --text-2:     var(--nm-ink-2);
  --muted:      var(--nm-muted);

  /* the one accent, plus two semantic marks ----------------------------- */
  --gold:       var(--nm-accent);
  --cyan:       var(--nm-measured);
  --red:        var(--nm-signal);

  /* metrics ------------------------------------------------------------- */
  --gutter:     clamp(20px, 4vw, 64px);
  --max:        1440px;
  --no-col:     clamp(44px, 6vw, 92px);

  --f-ui:   "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

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

/* A dataset identifier is one 36-character word. Below ~365 px it is wider than
   the column, and an unbreakable word pushes the whole page sideways — which is
   how a phone ends up scrolling horizontally through a document that has no wide
   figure in it at all. Prose-embedded monospace, and every live figure slot, may
   break mid-token; the figures themselves keep their own scroll frames. */
.mono, .f { overflow-wrap: anywhere; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--f-ui);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.62;
  letter-spacing: 0.005em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; }

/* --------------------------------------------------------------- helpers */
.mono {
  font-family: var(--f-mono);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.lbl {
  font-family: var(--f-ui);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 14px;
}

.body {
  font-size: 15px;
  line-height: 1.72;
  color: var(--text-2);
  margin: 0 0 18px;
  max-width: 62ch;
}
.body b { color: var(--text); font-weight: 500; }
.body i { font-style: italic; }

.note {
  font-size: 13px;
  line-height: 1.66;
  color: var(--muted);
  margin: 0 0 14px;
  max-width: 66ch;
}
.note b { color: var(--text-2); font-weight: 500; }

.ok   { color: var(--cyan); }
.bad  { color: var(--red); }
.plan { color: var(--muted); }

.hide-sm { display: inline; }

/* ------------------------------------------------------------ state mark */
/* Four marks. Square = decided state, hollow = not built, slash = failed.  */
.st {
  display: inline-block;
  width: 7px; height: 7px;
  margin-right: 8px;
  vertical-align: 1px;
  flex: none;
}
.st--meas { background: var(--cyan); }
.st--op   { background: var(--gold); }
.st--plan { background: none; box-shadow: inset 0 0 0 1px var(--muted); }
.st--fail { background: var(--red); }

/* ================================================================ MASTHEAD */
.mast {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255,255,255,0.94);
  border-bottom: 1px solid var(--rule);
}
.mast__in {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.mast__id { display: flex; align-items: center; gap: 12px; min-width: 0; }
/* The two segmented controls travel together and never wrap. */
.mast__ctl { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.mast__brand {
  font-size: 12px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text); white-space: nowrap;
}
.mast__brand b { font-weight: 300; color: var(--muted); }
.mast__doc { font-size: 11px; letter-spacing: 0.1em; color: var(--gold); white-space: nowrap; }
.mast__sep { width: 1px; height: 12px; background: var(--rule); flex: none; }
.mast__meta {
  display: flex; align-items: center; gap: 12px;
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); white-space: nowrap;
}

/* ==================================================================== DOC */
.doc {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* =================================================================== HERO */
.hero { padding: clamp(56px, 11vh, 130px) 0 clamp(48px, 8vh, 92px); }

.hero__line {
  font-family: var(--f-ui);
  font-weight: 400;
  font-size: clamp(30px, 5.6vw, 68px);
  line-height: 1.06;
  letter-spacing: -0.028em;
  color: var(--text);
  margin: 0 0 26px;
  max-width: 20ch;
}
.hero__line em { font-style: normal; color: var(--gold); }

.hero__sub {
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.62;
  color: var(--text-2);
  max-width: 60ch;
  margin: 0 0 40px;
}

.hero__rule { height: 1px; background: var(--rule); margin: 0 0 34px; }

.hero__oath {
  margin: 30px 0 0;
  font-size: 13px;
  line-height: 1.66;
  color: var(--muted);
  max-width: 68ch;
  border-left: 1px solid var(--rule);
  padding-left: 16px;
}

/* metrics ----------------------------------------------------------------- */
.metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--rule);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.metric { background: var(--ink); padding: 26px 20px 24px; min-width: 0; }
.metric:first-child { padding-left: 0; }

.metric__v {
  font-size: clamp(40px, 6.2vw, 76px);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: -0.045em;
  color: var(--text);
  margin-bottom: 16px;
  white-space: nowrap;
}
/* The hero row is four nowrap numerals plus their unit suffixes. At 1024 px the
   type is already at its clamp ceiling and the 4 x 20 px of side padding is what
   pushes the last unit 8 px past the viewport — caught by the gate, not by eye,
   because 8 px of overflow looks like nothing and still makes the page scroll
   sideways. Recover it from the padding rather than the type: shrinking the
   numerals is the whole point of this row. */
@media (min-width: 861px) and (max-width: 1140px) {
  .metric { padding-left: 12px; padding-right: 12px; }
}

.metric__u {
  font-size: 0.36em;
  letter-spacing: 0;
  color: var(--muted);
  margin-left: 0.16em;
  vertical-align: 0.34em;
}
.metric__k {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text);
  margin-bottom: 10px;
}
.metric__p {
  font-size: 10px;
  line-height: 1.55;
  color: var(--muted);
  letter-spacing: 0.01em;
}
.metric__p .mono { font-size: 10px; }

/* key --------------------------------------------------------------------- */
.key {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 26px;
  padding: 22px 0 0;
}
.key__t {
  font-size: 10px; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--muted);
}
.key__i {
  display: inline-flex; align-items: center;
  font-size: 11px; letter-spacing: 0.04em; color: var(--text-2);
}

/* =============================================================== SECTIONS */
.sec {
  border-top: 1px solid var(--rule);
  padding: clamp(48px, 7vh, 88px) 0 clamp(40px, 6vh, 76px);
}
.sec__head {
  display: grid;
  grid-template-columns: var(--no-col) minmax(0, 1fr);
  gap: 0 8px;
  margin-bottom: clamp(32px, 5vh, 56px);
}
.sec__no {
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--gold);
  padding-top: 0.62em;
}
.sec__title {
  font-weight: 400;
  font-size: clamp(24px, 3.4vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.024em;
  margin: 0 0 16px;
  max-width: 22ch;
  color: var(--text);
}
.sec__lede {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-2);
  margin: 0;
  max-width: 64ch;
}

.cols2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 64px);
  padding-top: 8px;
}

/* ============================================== 01 · RESOLUTION FIGURE */
.scales {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-bottom: 40px;
}
.scale { background: var(--surface-2); padding: 0; min-width: 0; }
.scale__frame {
  position: relative;
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
  aspect-ratio: 1 / 1;
}
.scale__frame svg { display: block; width: 100%; height: 100%; }
.scale__body { padding: 16px 16px 20px; }
.scale__fov {
  font-family: var(--f-mono);
  font-size: clamp(15px, 1.5vw, 21px);
  letter-spacing: -0.02em;
  color: var(--gold);
  margin: 0 0 6px;
}
.scale__fov small { color: var(--muted); font-size: 0.62em; letter-spacing: 0.04em; }
.scale__name {
  font-size: 12px; font-weight: 500; color: var(--text);
  margin: 0 0 8px; line-height: 1.35;
}
.scale__src {
  font-size: 10px; line-height: 1.55; color: var(--muted); margin: 0 0 10px;
}
.scale__nest {
  font-family: var(--f-mono);
  font-size: 10px;
  line-height: 1.5;
  color: var(--text-2);
  border-top: 1px solid var(--rule-soft);
  padding-top: 10px;
  margin: 0;
}
.scale__nest b { color: var(--cyan); font-weight: 400; }
.scale__tag {
  display: inline-flex; align-items: center;
  font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 10px;
}

/* live overlay on the resolution frames ----------------------------------- */
/* The transport is chrome, not content: it sits above the frames and never
   overlaps a figure, because a control parked over a measurement is how a
   reader ends up quoting a number they could not fully see. */
.scl-bar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 10px 14px; margin-bottom: 14px;
  background: var(--surface-2); border: 1px solid var(--rule-soft);
}
.scl-btn {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.16em;
  color: var(--cyan); background: transparent;
  border: 1px solid var(--rule); padding: 6px 14px; cursor: pointer;
  min-width: 92px;
}
.scl-btn:hover  { border-color: var(--cyan); }
.scl-btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.scl-range { flex: 1 1 180px; min-width: 120px; accent-color: var(--cyan); }
.scl-day   { font-size: 12px; color: var(--gold); }
.scl-count { font-size: 10px; color: var(--muted); }
.scl-axis  {
  font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted);
}
.scl-dead  {
  font-family: var(--f-mono); font-size: 10px; color: var(--red);
  letter-spacing: 0.04em;
}

/* The per-frame live line. Four states, and only one of them is green-ish:
   'empty' (looked, found nothing here) must never look like 'dead' (nobody
   looked), and neither may look like a measurement. */
.scale__live {
  font-family: var(--f-mono); font-size: 10px; line-height: 1.55;
  color: var(--text-2); margin: 10px 0 0;
  border-top: 1px solid var(--rule-soft); padding-top: 10px;
  min-height: 1.55em;
}
.scale__live:empty { border-top: 0; padding-top: 0; }
.scale__live b { color: var(--gold); font-weight: 400; }
.scale__live[data-state="dead"]  { color: var(--red); }
.scale__live[data-state="dead"] b { color: var(--red); }
.scale__live[data-state="wait"]  { color: var(--muted); }
.scale__live[data-state="empty"] { color: var(--text-2); }
.scale__live[data-state="plan"]  { color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  /* The day transport still works by hand; nothing advances on its own. */
  .scl-btn { opacity: 1; }
}

/* ladder ------------------------------------------------------------------ */
.ladder { margin: 0 0 44px; }
.ladder svg { display: block; width: 100%; }
.ladder figcaption,
.fig figcaption {
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
  margin-top: 14px;
  max-width: 76ch;
}
.ladder figcaption b, .fig figcaption b { color: var(--text-2); font-weight: 400; }

/* ================================================================ 02 STACK */
.stack { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.stack__i {
  display: grid;
  grid-template-columns: var(--no-col) minmax(0, 1fr);
  gap: 0 8px;
  padding: 30px 0 30px;
  border-bottom: 1px solid var(--rule);
}
.stack__n { font-size: 11px; letter-spacing: 0.1em; color: var(--muted); padding-top: 4px; }
.stack__b { min-width: 0; }
.stack__h {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 20px;
  margin-bottom: 14px;
}
.stack__h h3 {
  font-size: clamp(17px, 2vw, 23px);
  font-weight: 400;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--text);
}
.tag {
  display: inline-flex; align-items: center;
  font-size: 10px; letter-spacing: 0.13em; text-transform: uppercase;
  padding: 3px 9px 3px 8px;
  border: 1px solid var(--rule);
  color: var(--text-2);
  white-space: nowrap;
}
.tag--op   { border-color: rgba(200,155,60,0.42); }
.tag--plan { border-color: var(--rule); color: var(--muted); }
.tag--part { border-color: rgba(200,155,60,0.28); }
.tag .st { margin-right: 6px; width: 6px; height: 6px; }

/* ============================================================== 03 LEDGER */
.control {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(24px, 4vw, 56px);
  margin: 0 0 clamp(36px, 5vh, 56px);
  padding: 0 0 clamp(32px, 5vh, 48px);
  border-bottom: 1px solid var(--rule);
}
.control__fig {
  background: var(--surface);
  border: 1px solid var(--rule);
  min-width: 0;
}
.control__fig svg { display: block; width: 100%; }
.control__txt { min-width: 0; }

.control__nums { margin: 22px 0 18px; padding: 0; border-top: 1px solid var(--rule); }
.control__nums > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--rule-soft);
}
.control__nums dt { font-size: 12px; color: var(--text-2); }
.control__nums dd {
  margin: 0; font-size: 15px; color: var(--text);
  letter-spacing: -0.01em; white-space: nowrap;
}
.control__fail { border-bottom: 1px solid var(--rule) !important; }
.control__fail dt { color: var(--text); }
@media (max-width: 560px) {
  /* The figure keeps its nowrap so a number never breaks across lines. On a
     phone the label goes above it instead — "0 beobachtete px · 0 Algen" is
     half again as wide as "0 observed px · 0 algae" and pushed the row off the
     screen in German and Spanish. */
  .control__nums > div { flex-wrap: wrap; gap: 2px 16px; }
  .control__nums dt { flex: 1 1 100%; }
}

/* rows -------------------------------------------------------------------- */
.ledger { border-top: 1px solid var(--rule); }

.ledger__head,
.ledger__row {
  display: grid;
  grid-template-columns: 18px minmax(120px, 1.15fr) minmax(150px, 1.65fr) 92px 92px 118px;
  gap: 4px 18px;
  align-items: start;
}
.ledger__head {
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 9px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted);
  position: sticky; top: 46px; background: var(--ink); z-index: 20;
}
.ledger__row {
  padding: 20px 0 22px;
  border-bottom: 1px solid var(--rule);
}
.ledger__row > .st { margin: 6px 0 0; }
.ld-a h3 {
  font-size: 14px; font-weight: 500; margin: 0;
  line-height: 1.35; letter-spacing: -0.008em; color: var(--text);
}
.ld-b { font-size: 12px; line-height: 1.55; color: var(--text-2); }
.ld-b .mono { font-size: 11px; word-break: break-word; }
.ld-c, .ld-d { font-size: 12px; line-height: 1.5; color: var(--text-2); }
.ld-e { font-size: 11px; line-height: 1.45; }
.ld-e b {
  display: block; font-weight: 500; font-size: 12px;
  letter-spacing: 0.02em; color: var(--text);
}
.ld-e span { color: var(--muted); font-size: 10px; }
.ld-m {
  grid-column: 2 / -1;
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.68;
  color: var(--text-2);
  max-width: 96ch;
  border-left: 1px solid var(--rule);
  padding-left: 16px;
}
.ld-m b { color: var(--text); font-weight: 500; }
.ld-m .mono { font-size: 12px; }
.ld-m__k {
  display: block;
  font-size: 9px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted);
  margin-bottom: 6px;
}

/* =========================================================== 04 BATHYMETRY */
.stat2 {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--rule);
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  margin: 22px 0;
}
.stat2__i { background: var(--ink); padding: 20px 18px 18px; }
.stat2__i:first-child { padding-left: 0; }
.stat2__v {
  font-size: clamp(32px, 4.6vw, 54px); line-height: 0.94;
  letter-spacing: -0.04em; color: var(--red); margin-bottom: 12px;
}
.stat2__u { font-size: 0.44em; color: var(--muted); letter-spacing: -0.02em; }
.stat2__k { font-size: 11px; line-height: 1.45; color: var(--text-2); }

.fig {
  margin: clamp(32px, 5vh, 56px) 0 0;
  padding-top: clamp(24px, 4vh, 36px);
  border-top: 1px solid var(--rule);
}
.fig__head {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 8px 24px; margin-bottom: 18px;
}
.fig__head .lbl { margin: 0; }
.fig__key { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 10px; color: var(--muted); }
.fig__key span { display: inline-flex; align-items: center; }
.sw { width: 12px; height: 2px; margin-right: 7px; display: inline-block; }
.sw--gold { background: var(--gold); }
.sw--dim  { background: #4A4740; }
.sw--red  { background: var(--red); }
.fig > div { background: var(--surface); border: 1px solid var(--rule); }
.fig svg { display: block; width: 100%; }

/* ============================================================= 05 COVERAGE */
.sites {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--rule); border: 1px solid var(--rule);
  margin-bottom: clamp(32px, 5vh, 52px);
}
.site { background: var(--surface-2); min-width: 0; }
.site__map { background: var(--surface); border-bottom: 1px solid var(--rule); }
.site__map svg { display: block; width: 100%; }
.site__body { padding: 20px clamp(16px, 2vw, 26px) 24px; }
.site__id {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.12em;
  color: var(--gold); margin: 0 0 6px;
}
.site__name {
  font-size: clamp(16px, 1.8vw, 21px); font-weight: 400;
  letter-spacing: -0.015em; margin: 0 0 18px; color: var(--text);
}
.site__grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px; background: var(--rule); border-top: 1px solid var(--rule);
}
.site__cell { background: var(--surface-2); padding: 13px 0 12px; }
.site__cell:nth-child(even) { padding-left: 14px; }
.site__cv {
  font-family: var(--f-mono); font-size: 19px; letter-spacing: -0.03em;
  color: var(--text); line-height: 1.1; margin-bottom: 6px;
}
.site__cv small { font-size: 0.55em; color: var(--muted); letter-spacing: 0; }
.site__ck { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.site__note {
  font-size: 11px; line-height: 1.55; color: var(--muted);
  margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--rule);
}

.deflist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.deflist li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 9px 0; border-bottom: 1px solid var(--rule-soft);
  font-size: 12px; color: var(--text-2);
}
.deflist b { font-weight: 400; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }

/* ================================================================= FOOTER */
.foot { border-top: 1px solid var(--rule); margin-top: clamp(40px, 6vh, 72px); }
.foot__in {
  max-width: var(--max); margin: 0 auto;
  padding: clamp(36px, 6vh, 64px) var(--gutter) clamp(48px, 8vh, 80px);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 64px);
}
.foot__list { list-style: none; margin: 0; padding: 0; }
.foot__list li {
  font-size: 12px; line-height: 1.6; color: var(--muted);
  padding: 9px 0; border-bottom: 1px solid var(--rule-soft);
}
.foot__list .mono { font-size: 11px; word-break: break-word; }
.foot__id {
  margin: 20px 0 0; font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted);
}
.foot__id span { color: var(--gold); }

/* ================================================================= MOTION */
/* One orchestrated load. Elements settle and never move again. */
@keyframes rv-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.js .rv { opacity: 0; }
.rv.rv--go {
  animation: rv-in 620ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
  animation-delay: var(--d, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  .rv, .rv.rv--go { opacity: 1; animation: none !important; transform: none !important; }
  * { scroll-behavior: auto !important; }
}

/* ------------------------------------------------- wide figures on narrow */
/* A chart is not made legible by shrinking it. Below its natural width each
   figure scrolls inside its own frame; the page itself never scrolls sideways. */
.ladder > div,
.fig > div,
.control__fig,
.site__map { overflow-x: auto; }

.ladder svg  { min-width: 680px; }
.fig svg     { min-width: 720px; }
.control__fig svg { min-width: 520px; }
.site__map svg    { min-width: 460px; }

/* ============================================================= RESPONSIVE */
@media (max-width: 1180px) {
  .ledger__head, .ledger__row {
    grid-template-columns: 16px minmax(0, 1.1fr) minmax(0, 1.5fr) 84px 118px;
  }
  .ledger__head span:nth-child(5), .ld-d { display: none; }
}

@media (max-width: 980px) {
  .scales { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .control { grid-template-columns: minmax(0, 1fr); }
  .sites { grid-template-columns: minmax(0, 1fr); }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric:nth-child(3) { padding-left: 0; }
}

@media (max-width: 860px) {
  .cols2, .foot__in { grid-template-columns: minmax(0, 1fr); }
  .sec__head { grid-template-columns: minmax(0, 1fr); }
  .sec__no { padding-top: 0; margin-bottom: 10px; }
  .stack__i { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .stack__n { padding-top: 0; margin-bottom: 8px; }

  /* ledger collapses to stacked records, header rule retired */
  .ledger__head { display: none; }
  .ledger__row {
    grid-template-columns: 14px minmax(0, 1fr);
    gap: 0 12px;
    padding: 22px 0 24px;
  }
  .ld-a, .ld-b, .ld-c, .ld-d, .ld-e { grid-column: 2; }
  .ld-a { margin-bottom: 8px; }
  .ld-b { margin-bottom: 8px; }
  .ld-c, .ld-d {
    display: block; font-size: 11px; color: var(--muted); line-height: 1.5;
  }
  .ld-d { margin-bottom: 2px; }
  .ld-e { margin-top: 8px; }
  .ld-e b { display: inline; }
  .ld-e span { margin-left: 8px; }
  .ld-m { grid-column: 2; }
}

@media (max-width: 520px) {
  /* A state tag is nowrap so it reads as one token. The longest one — "Geometry
     operational · probability planned" — has a 349 px min-content width, which
     is wider than a 320 px phone and pushed the whole document sideways. Below
     the width where it can hold a line, it wraps instead of shoving. */
  .tag { white-space: normal; }
}

@media (max-width: 640px) {
  body { font-size: 15px; }
  .hide-sm { display: none; }
  .metrics { grid-template-columns: minmax(0, 1fr); }
  .metric { padding: 22px 0 20px; }
  .metric__v { font-size: 54px; }
  .stat2 { grid-template-columns: minmax(0, 1fr); }
  .stat2__i { padding: 18px 0 16px; }
  .scales { grid-template-columns: minmax(0, 1fr); }
  .site__cell:nth-child(even) { padding-left: 12px; }
  .ld-m { padding-left: 12px; }
}

@media (max-width: 560px) {
  /* the masthead keeps its identity and drops its metadata, never wraps */
  .mast__meta span:not(:nth-child(3)) { display: none; }
  .mast__in { gap: 10px; }
}

@media (max-width: 700px) {
  /* Two controls plus the document id do not fit beside the brand once the
     view labels are set in German ("Bericht"). The document id is printed in
     the record itself and in the footer, so it is the one that goes. */
  .mast__doc, .mast__id .mast__sep { display: none; }
  .mast__ctl { gap: 6px; }
}

@media (max-width: 420px) {
  .metric__v { font-size: 46px; }
  .doc, .foot__in { --gutter: 16px; }
}


/* ---------- live strip, inside the RECORD view ----------
   The only element in the printed record that moves. It shows what the running
   system is measuring now, in the MEASURED cyan.

   FIXED 2026-09-09: this block was written against the token names used by
   tramos.css (--meas, --fg, --accent, --fg-dim). None of them exist in this
   stylesheet, so every colour resolved to nothing and the dot rendered
   transparent. It now uses this page's own tokens.

   It also no longer hides itself on failure. A silent disappearance is exactly
   the fallback this project forbids: the reader cannot tell "no sargassum" from
   "no link". It says which. */
.live {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  margin: 26px 0 8px; padding: 13px 0 0;
  border-top: 1px solid var(--rule);
  font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.02em;
}
.live__dot {
  width: 7px; height: 7px; background: var(--cyan);
  align-self: center; flex: none;
  animation: livepulse 2.6s ease-in-out infinite;
}
@keyframes livepulse { 0%,100% { opacity: 1 } 50% { opacity: 0.35 } }
@media (prefers-reduced-motion: reduce) { .live__dot { animation: none } }
.live__lbl { color: var(--cyan); font-size: 10px; letter-spacing: 0.16em; font-family: var(--f-ui); font-weight: 600; }
.live__body { color: var(--text-2); }
.live__body b { color: var(--text); font-weight: 500; }
.live__src { color: var(--muted); font-size: 10px; }
.live[data-state="dead"] .live__dot { background: var(--red); animation: none; }
.live[data-state="dead"] .live__lbl { color: var(--red); }
@media (max-width: 720px) { .live { gap: 8px; font-size: 11px; } }


/* ========================================================== VIEW SWITCH */
/* Same idiom as the OPERADOR/ANALISTA control in tramos.js — a two-position
   segmented control driven by aria-pressed, not a checkbox — drawn in this
   page's language: square corners, one hairline, no radius. */
.seg {
  display: inline-flex;
  border: 1px solid var(--rule);
  flex: 0 0 auto;
}
.seg button {
  background: transparent; border: 0; cursor: pointer;
  font-family: var(--f-ui); font-size: 10px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); padding: 6px 12px; line-height: 1.5;
  white-space: nowrap;
}
.seg button + button { border-left: 1px solid var(--rule); }
.seg button:hover { color: var(--text-2); }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--text); }
.seg button:focus-visible { outline: 1px solid var(--gold); outline-offset: 1px; }
/* Three positions instead of two, same idiom. The labels are ISO codes so they
   do not change width between languages. */
.seg--lang button { padding: 6px 10px; letter-spacing: 0.12em; }

/* Exactly one root is in the document flow at a time. The default is stamped
   on <body> in the markup so the correct view is up before a byte of JS runs. */
.vroot { display: none; }
body[data-view="live"]   #view-live-root   { display: block; }
body[data-view="record"] #view-record-root { display: block; }

/* an inline control that reads as prose, not as a button */
.lnk {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: var(--gold);
  border-bottom: 1px solid rgba(200,155,60,0.42);
}
.lnk:hover { color: var(--text); border-bottom-color: var(--text); }

/* ============================================================= LIVE VIEW */
/* ---------------------------------------------------------- figure slots */
/* Three states and no fourth. Waiting is visibly waiting, a value is a value,
   and a failure is red and says which endpoint. Nothing is ever blank. */
.f { font-family: var(--f-mono); font-variant-numeric: tabular-nums; color: inherit; }
.f--wait { color: var(--muted); letter-spacing: 0.1em; }
.f--dead {
  font-family: var(--f-ui); font-size: 0.86em; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--red);
  overflow-wrap: anywhere;
}
/* A failure notice inside a display number must not inherit a 54 px type size:
   at that scale one word of English is wider than a phone. It drops to a fixed
   caption size wherever a big figure would have stood. */
.metric__v .f--dead,
.stat2__v  .f--dead,
.site__cv  .f--dead,
.lv-find__v .f--dead,
.lv-head__line .f--dead {
  font-size: 11px; font-weight: 600; letter-spacing: 0.12em;
  vertical-align: 0.4em; line-height: 1.4;
}

/* -------------------------------------------------------------- basis chip */
.bs {
  display: inline-flex; align-items: center;
  font-family: var(--f-ui);
  font-size: 9px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 2px 7px; border: 1px solid var(--rule);
  color: var(--muted); white-space: nowrap;
  vertical-align: 1px;
}
.bs--meas { color: var(--cyan);   border-color: rgba(79,195,217,0.40); }
.bs--mod  { color: var(--gold);   border-color: rgba(200,155,60,0.40); }
.bs--assu { color: var(--text-2); }
.bs--syn  { color: var(--muted);  border-style: dashed; }
.bs--none { color: var(--red);    border-color: rgba(198,86,75,0.45); }

/* ------------------------------------------------------------- link state */
.lv-status {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 14px;
  padding: 13px 0; border-bottom: 1px solid var(--rule);
  font-size: 11px; line-height: 1.6;
}
.lv-status .lv-dot {
  width: 7px; height: 7px; flex: none; align-self: center;
  background: var(--muted);
}
.lv-status[data-state="live"]  .lv-dot { background: var(--cyan); animation: livepulse 2.6s ease-in-out infinite; }
.lv-status[data-state="stale"] .lv-dot { background: var(--gold); }
.lv-status[data-state="dead"]  .lv-dot { background: var(--red); }
.lv-status__lbl {
  font-family: var(--f-ui); font-size: 10px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
}
.lv-status[data-state="live"]  .lv-status__lbl { color: var(--cyan); }
.lv-status[data-state="stale"] .lv-status__lbl { color: var(--gold); }
.lv-status[data-state="dead"]  .lv-status__lbl { color: var(--red); }
.lv-status__txt { color: var(--text-2); min-width: 0; }
.lv-status__api { color: var(--muted); font-size: 10px; word-break: break-all; min-width: 0; }

/* ----------------------------------------------------------- fault notice */
.lv-fault {
  border: 1px solid rgba(198,86,75,0.45);
  padding: 18px 20px 20px;
  margin: 26px 0 0;
}
.lv-fault__k {
  font-family: var(--f-ui); font-size: 10px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--red); margin: 0 0 9px;
}
.lv-fault p { margin: 0 0 8px; font-size: 13px; line-height: 1.64; color: var(--text-2); max-width: 78ch; }
.lv-fault p:last-child { margin-bottom: 0; }
.lv-fault .mono { color: var(--muted); font-size: 11px; word-break: break-all; }

/* ---------------------------------------------------------------- headline */
.lv-head { padding: clamp(40px, 7vh, 88px) 0 clamp(36px, 6vh, 68px); }
.lv-head__line { max-width: 21ch; margin-bottom: 24px; }

.lv-find { border-top: 1px solid var(--rule); margin: 34px 0 0; }
.lv-find__r {
  display: grid;
  grid-template-columns: var(--no-col) minmax(0, 1fr);
  gap: 0 8px;
  padding: 22px 0 24px;
  border-bottom: 1px solid var(--rule);
}
.lv-find__n { font-size: 11px; letter-spacing: 0.1em; color: var(--gold); padding-top: 0.35em; }
.lv-find__v {
  font-family: var(--f-mono);
  font-size: clamp(19px, 2.5vw, 29px);
  letter-spacing: -0.03em; line-height: 1.14;
  color: var(--text); margin-bottom: 10px;
}
.lv-find__v small {
  font-family: var(--f-ui); font-size: 0.44em; font-weight: 400;
  letter-spacing: 0.02em; color: var(--muted);
}
.lv-find__t { font-size: 13px; line-height: 1.66; color: var(--text-2); margin: 0; max-width: 74ch; }
.lv-find__t b { color: var(--text); font-weight: 500; }
/* The CMEMS product identifiers are printed verbatim — they are how a reviewer
   finds the exact dataset — but they are provenance, not a figure, so they sit
   under the sentence at caption weight instead of competing with it. */
.lv-find__t [data-f="field.src"] {
  display: block; margin-top: 8px;
  font-size: 11px; line-height: 1.55; color: var(--muted);
}
/* ...but a FAILED provenance line is still a failure and stays red. */
.lv-find__t [data-f="field.src"].f--dead { color: var(--red); }

.lv-verdict {
  margin: 36px 0 0;
  padding: 4px 0 4px 20px;
  border-left: 2px solid var(--gold);
}
.lv-verdict h3 {
  font-size: clamp(18px, 2.3vw, 27px); font-weight: 400;
  letter-spacing: -0.022em; line-height: 1.16;
  margin: 0 0 14px; color: var(--text); max-width: 26ch;
}
.lv-verdict .body:last-of-type { margin-bottom: 16px; }

.lv-cols > div { min-width: 0; }

/* ------------------------------------------------------------- lead figure */
.lv-lead { margin: 0 0 8px; }
.lv-bar {
  display: flex; height: 12px; width: 100%;
  border: 1px solid var(--rule); background: var(--surface-2);
  overflow: hidden;
}
.lv-bar__used { background: var(--red);  flex: 0 0 auto; min-width: 0; }
.lv-bar__left { background: var(--gold); flex: 0 0 auto; min-width: 0; }
.lv-bar__k {
  display: flex; flex-wrap: wrap; gap: 6px 24px;
  margin-top: 12px; font-size: 11px; line-height: 1.6; color: var(--muted);
}
/* NOT inline-flex: a flex container swallows the whitespace around its text
   nodes, which silently glued "43.8" to "h" and "t0" to the timestamp. */
.lv-bar__k > span { display: inline; }
.lv-bar__k .sw { vertical-align: 0.12em; }
.lv-lead__v { color: var(--gold); }

/* ------------------------------------------------------------------- sites */
.lv-sites {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px; background: var(--rule); border: 1px solid var(--rule);
}
.lv-site {
  display: block; background: var(--surface-2); min-width: 0;
  padding: 24px clamp(16px, 2vw, 28px) 24px;
  text-decoration: none; color: inherit;
}
.lv-site:hover { background: var(--surface); }
.lv-site:hover .site__name { color: var(--gold); }
.lv-site:focus-visible { outline: 1px solid var(--gold); outline-offset: -2px; }
.lv-site .site__name { margin-bottom: 16px; }
.lv-site .site__cell { background: transparent; }
.lv-site .site__grid { background: var(--rule); }
.lv-site .site__grid > .site__cell { background: var(--surface-2); }
.lv-site:hover .site__grid > .site__cell { background: var(--surface); }
.lv-site__state {
  font-size: 12px; line-height: 1.6; color: var(--text-2);
  margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--rule);
}
.lv-site__state b { color: var(--text); font-weight: 500; }
.lv-site__go {
  display: block; margin-top: 14px;
  font-family: var(--f-ui); font-size: 10px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold);
}
.lv-site__foot { margin: 20px 0 clamp(32px, 5vh, 52px); }

/* --------------------------------------------------------------- jump-offs */
.lv-jump {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px; background: var(--rule); border: 1px solid var(--rule);
}
.lv-jump a {
  display: block; background: var(--surface-2); min-width: 0;
  padding: 26px clamp(16px, 2vw, 28px) 28px; text-decoration: none;
}
.lv-jump a:hover { background: var(--surface); }
.lv-jump a:focus-visible { outline: 1px solid var(--gold); outline-offset: -2px; }
.lv-jump__k {
  display: block; font-family: var(--f-ui); font-size: 10px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold);
  margin-bottom: 14px;
}
.lv-jump__t {
  font-size: clamp(17px, 2vw, 23px); font-weight: 400; letter-spacing: -0.02em;
  color: var(--text); margin: 0 0 10px;
}
.lv-jump a:hover .lv-jump__t { color: var(--gold); }
.lv-jump__d { font-size: 12px; line-height: 1.62; color: var(--text-2); margin: 0; max-width: 48ch; }
.lv-jump__u {
  display: block; margin-top: 16px;
  font-family: var(--f-mono); font-size: 10px; color: var(--muted);
  word-break: break-all;
}

/* ---------------------------------------------------------- layer registry */
.lv-layers { border-top: 1px solid var(--rule); }
.lv-layer {
  display: grid;
  grid-template-columns: minmax(130px, 0.85fr) 136px minmax(0, 2.3fr);
  gap: 8px 20px; align-items: start;
  padding: 17px 0 18px; border-bottom: 1px solid var(--rule);
}
.lv-layer__k { font-size: 13px; font-weight: 500; color: var(--text); line-height: 1.45; }
.lv-layer__b { padding-top: 1px; min-width: 0; }
.lv-layer__d { font-size: 12px; line-height: 1.62; color: var(--text-2); margin: 0; }
.lv-layer__d b { color: var(--text); font-weight: 500; }
.lv-layer__d .mono { font-size: 11px; word-break: break-word; }

/* ------------------------------------------------------------ source table */
.lv-src { border-top: 1px solid var(--rule); }
.lv-src__r {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px 16px;
  padding: 10px 0; border-bottom: 1px solid var(--rule-soft);
  font-size: 12px; color: var(--text-2); min-width: 0;
}
.lv-src__r .mono { font-size: 11px; }
.lv-src__n { min-width: 0; word-break: break-word; }
.lv-src__v { white-space: nowrap; color: var(--muted); font-size: 11px; }
.lv-src__v b { color: var(--text-2); font-weight: 400; }
.lv-src__v .bad { color: var(--red); }

/* ------------------------------------------------------ live: RESPONSIVE */
@media (max-width: 980px) {
  .lv-sites, .lv-jump { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .lv-find__r { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .lv-find__n { padding-top: 0; margin-bottom: 8px; }
  .lv-layer { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 18px 0 20px; }
}
@media (max-width: 700px) {
  /* The switch is the only masthead control that must survive; the metadata it
     would otherwise push off the edge is printed in the record and the footer. */
  .mast__meta { display: none; }
}
@media (max-width: 640px) {
  .lv-verdict { padding-left: 14px; }
  .lv-status { font-size: 11px; }
}
@media (max-width: 420px) {
  /* Three controls plus the brand is 40 px more than a 320 px phone has, and
     the brand was being clipped mid-word — worst in Spanish, where the view
     switch reads EN VIVO / REGISTRO. The controls give the width back rather
     than the identity. */
  .seg button { padding: 5px 7px; font-size: 9px; letter-spacing: 0.06em; }
  .seg--lang button { padding: 5px 5px; }
  .mast__ctl { gap: 4px; }
  .mast__in { gap: 6px; }
  .mast__brand { letter-spacing: 0.10em; }
}