/* =============================================================================
   SATQUERY — SYSTEM
   Tokens · shell · open-composition primitives

   Aesthetic: a quiet scientific instrument printed on paper.
   Warm ivory field, charcoal type, one restrained ochre accent.
   No cards. No rounded rectangles. No glass. No glow. No faux telemetry.
   Structure is made from: hairlines, image edges, whitespace, type, alignment.
   ============================================================================= */

/* ------------------------------------------------------------------ fonts -- */
/* Self-hosted webfonts. This replaced an @import of the Google Fonts CSS API,
   which was render-blocking (and, per spec, also blocked the first classic
   script while its stylesheet was pending), was a single point of failure on a
   font-host stall or outage, and transmitted every visitor's IP to Google.
   The woff2 files in ../fonts/ are byte-identical to the ones fonts.gstatic.com
   served for these families, so text metrics are unchanged. Subsets: latin,
   latin-ext; anything outside those ranges falls through to the fallback stack.
   Licence: SIL Open Font License 1.1 — see ../fonts/OFL.txt */

/* Archivo — variable: weight 400–700, width 62%–125% */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('../fonts/archivo-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('../fonts/archivo-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Fraunces — variable: weight 300–700, optical size 9–144, SOFT, WONK; italic */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/fraunces-var-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/fraunces-var-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/fraunces-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/fraunces-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* IBM Plex Mono — 400 */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* IBM Plex Mono — 500 */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ----------------------------------------------------------------- tokens -- */
:root {
  /* surfaces — warm, paper-like, never white ------------------------- */
  --surface-0: #FBF9F5;   /* ivory — the page */
  --surface-1: #F5F2EB;   /* off-white — alternate band */
  --surface-2: #EEEAE1;   /* pale stone — inset */
  --surface-3: #E4DFD4;   /* light sand */

  /* ink — charcoal, never pure black --------------------------------- */
  --ink-900: #171918;
  --ink-700: #353836;
  --ink-600: #4A4E4A;
  --ink-500: #5E625C;
  --ink-400: #84877F;
  --ink-300: #A5A79F;

  /* rules — the primary structural device ---------------------------- */
  --rule:   rgba(23, 25, 24, 0.11);
  --rule-2: rgba(23, 25, 24, 0.20);
  --rule-3: rgba(23, 25, 24, 0.34);

  /* ONE accent: ochre, derived from earth imagery.
     Everything else is neutral, so ochre still means something. */
  --ochre:      #A5662E;
  --ochre-wash: rgba(165, 102, 46, 0.10);
  --ochre-rule: rgba(165, 102, 46, 0.38);

  /* earth-toned evidence states (never neon) ------------------------- */
  --verd:    #4C7A5F;   /* verified / locked */
  --oxide:   #8A4A42;   /* blocked */
  --mineral: #3A5F6B;   /* sparing instrument note */

  /* type ------------------------------------------------------------- */
  --f-display: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --f-ui: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* rhythm ----------------------------------------------------------- */
  --gut: clamp(22px, 4.2vw, 76px);
  --bar: 56px;
  --band: clamp(64px, 9vw, 150px);   /* vertical rhythm between bands */

  /* motion ----------------------------------------------------------- */
  --e-out: cubic-bezier(0.16, 1, 0.3, 1);
  --e-io: cubic-bezier(0.65, 0, 0.35, 1);

}

/* ------------------------------------------------------------------- base -- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* D3: a class-level `display` rule beats the UA `[hidden]{display:none}` rule,
   so elements like #metaHost (.kv, display:grid), #evNote (.ev-note, display:flex),
   and #cmpEmpty (.disclose.viewer__disclose, display:flex) still render with
   the hidden attribute set. Reinstate the UA default with !important.
   Blast radius verified zero: every [hidden] usage lives in mission.html, and
   no other stylesheet redefines [hidden]. */
[hidden] { display: none !important; }

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

img, canvas, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--ochre-wash); color: var(--ink-900); }

:focus-visible {
  outline: 1px solid var(--ochre);
  outline-offset: 3px;
}

* { scrollbar-width: thin; scrollbar-color: var(--ink-300) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--surface-3); border: 2px solid var(--surface-0); }

/* -------------------------------------------------------------- type kit -- */
.display {
  font-family: var(--f-display);
  font-weight: 400;
  font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 144;
  letter-spacing: -0.022em;
  line-height: 0.98;
  margin: 0;
  color: var(--ink-900);
}
.display--it { font-style: italic; font-variation-settings: 'SOFT' 0, 'WONK' 1, 'opsz' 144; }
.display--softer { font-variation-settings: 'SOFT' 40, 'WONK' 0, 'opsz' 144; }

.label, .mono {
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-400);
}
.label--bright { color: var(--ink-600); }
.label--ochre  { color: var(--ochre); }
.label--signal { color: var(--ochre); }
.label--verd   { color: var(--verd); }
.label--oxide  { color: var(--oxide); }
.label--amber  { color: var(--ochre); }

.lede {
  font-family: var(--f-display);
  font-variation-settings: 'opsz' 50, 'SOFT' 30;
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.5;
  color: var(--ink-600);
  font-weight: 400;
  letter-spacing: -0.005em;
  max-width: 62ch;
}
.prose { color: var(--ink-600); max-width: 64ch; }
.prose p { margin: 0 0 1.05em; }
.prose strong { color: var(--ink-900); font-weight: 500; }
.prose em { font-style: italic; font-family: var(--f-display); font-variation-settings: 'opsz' 30, 'SOFT' 30, 'WONK' 1; }

.num { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }

/* editorial eyebrow: small label + short rule tying it to the type */
.eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.eyebrow::after { content: ''; height: 1px; width: 34px; background: var(--rule-2); }

/* ----------------------------------------------------------------- shell -- */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--bar);
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 0 clamp(16px, 2.2vw, 34px);
  background: rgba(251, 249, 245, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rule);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 400;
  font-variation-settings: 'opsz' 144, 'SOFT' 0, 'WONK' 1;
  font-size: 21px;
  letter-spacing: -0.01em;
  color: var(--ink-900);
  white-space: nowrap;
}
.wordmark .glyph {
  width: 7px; height: 7px;
  border: 1px solid var(--ochre);
  transform: rotate(45deg);
  flex: none;
}

.nav {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.nav::-webkit-scrollbar { display: none; }
.navlink {
  font-family: var(--f-ui);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-500);
  padding: 7px 13px;
  white-space: nowrap;
  position: relative;
  transition: color 0.25s var(--e-out);
}
.navlink:hover { color: var(--ink-900); }
.navlink.is-active { color: var(--ink-900); }
.navlink.is-active::after {
  content: '';
  position: absolute;
  left: 13px; right: 13px; bottom: 2px;
  height: 1px;
  background: var(--ochre);
}

main { position: relative; z-index: 1; padding-top: var(--bar); }

/* ---------------------------------------------------------------- footer -- */
.foot {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--rule);
  margin-top: var(--band);
  padding: 52px var(--gut) 60px;
  display: flex;
  flex-wrap: wrap;
  gap: 32px 56px;
  align-items: flex-start;
}
.foot .col { min-width: 160px; }
.foot .col h5 {
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-400);
  font-weight: 500;
  margin: 0 0 12px;
}
.foot .col a {
  display: block;
  font-size: 13px;
  color: var(--ink-600);
  padding: 3px 0;
  transition: color 0.2s;
}
.foot .col a:hover { color: var(--ochre); }
.foot .note {
  font-family: var(--f-ui);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--ink-500);
  max-width: 50ch;
}
.foot .mark { color: var(--ochre); font-family: var(--f-mono); font-size: 11px; }

/* ------------------------------------------------------------- structure -- */
.wrap { padding: 0 var(--gut); }
.sec { padding: var(--band) var(--gut); position: relative; }
.sec--tight { padding-top: clamp(30px, 4vw, 54px); }

/* the hairline is the primary structural element of the whole site. */
.rule { height: 1px; background: var(--rule); border: 0; margin: 0; }
.rule--fade { background: linear-gradient(90deg, var(--rule-2), transparent 70%); }
.rule--ochre { background: var(--ochre-rule); }

.sechead {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding-bottom: 16px;
  margin-bottom: clamp(24px, 3vw, 44px);
  border-bottom: 1px solid var(--rule);
}
.sechead .idx {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--ink-300);
}
.sechead h2 {
  font-family: var(--f-display);
  font-variation-settings: 'opsz' 144, 'SOFT' 0, 'WONK' 0;
  font-weight: 400;
  font-size: clamp(26px, 3.4vw, 48px);
  letter-spacing: -0.022em;
  margin: 0;
  line-height: 1;
  color: var(--ink-900);
}
.sechead .meta {
  margin-left: auto;
  font-family: var(--f-display);
  font-variation-settings: 'opsz' 30, 'SOFT' 30, 'WONK' 1;
  font-style: italic;
  font-size: 13px;
  /* D4: --ink-400 (#84877F) measured 3.47:1 on --surface-0 — below AA, and this
     class carries honesty text ("Plots drawn from mock result arrays", "No
     learned router · rule table is public"). --ink-500 (#5E625C) measures 5.91:1. */
  color: var(--ink-500);
  text-align: right;
}

/* ----------------------------------------------------------------- chips -- */
/* small, square, unpillowed. They mark evidence state, nothing else. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--f-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 3px 8px 3px 7px;
  color: var(--ink-500);
  border: 1px solid var(--rule-2);
  white-space: nowrap;
  background: transparent;
}
.chip::before {
  content: '';
  width: 4px; height: 4px;
  background: currentColor;
  flex: none;
}
.chip--verified   { color: var(--verd);  border-color: rgba(76,122,95,0.34); }
.chip--supported  { color: var(--mineral); border-color: rgba(58,95,107,0.30); }
.chip--unverified { color: var(--ochre); border-color: var(--ochre-rule); }
.chip--blocked    { color: var(--oxide); border-color: rgba(138,74,66,0.32); }
.chip--notrun     { color: var(--ink-300); border-style: dashed; }
.chip--plain::before { display: none; }
.chip--active     { color: var(--ochre); border-color: var(--ochre-rule); }
/* a retired ochre chip modifier was removed here: it duplicated
   .chip--unverified and its class suffix tripped the retired-token audit. */

/* ------------------------------------------------------------- disclosure --
   Honesty lives next to the thing it qualifies, never in global chrome.
   A disclosure is a small italic aside under a rule. It is not a badge,
   not a toast, not a banner. */
.disclose {
  display: flex;
  /* D-fix(D): without flex-wrap, every text run and inline element becomes its
     own flex item in one nowrap row, so the parent's min-content becomes the
     SUM of all items' min-contents instead of the largest single one. That
     alone forces mission.html's scrollWidth from 390 to 613 at vw=390 (and
     renders every .disclose as broken newspaper columns at every width —
     see audit screenshot). With wrap, items break onto multiple lines and
     the text flows as a single paragraph; the diamond marker stays on line 1. */
  flex-wrap: wrap;
  align-items: baseline;
  gap: 9px;
  font-family: var(--f-display);
  font-variation-settings: 'opsz' 24, 'SOFT' 40, 'WONK' 1;
  font-style: italic;
  font-size: 12.5px;
  line-height: 1.5;
  /* D2: --ink-400 (#84877F) measured 3.47:1 on --surface-0 at 12.5px, below AA
     for body text — on every page. --ink-500 (#5E625C) measures 5.91:1. */
  color: var(--ink-500);
  padding-top: 11px;
  margin-top: 13px;
  border-top: 1px solid var(--rule);
  max-width: 62ch;
}
.disclose::before {
  content: '';
  flex: none;
  width: 5px; height: 5px;
  border: 1px solid var(--ink-300);
  transform: translateY(-3px) rotate(45deg);
}
.disclose--flush { border-top: 0; margin-top: 0; padding-top: 0; }
/* D2: --ochre (#A5662E) measured 4.40:1 on --surface-0 at 12.5px. This darker
   ochre (#8A5324) keeps the accent hue and measures 5.97:1. */
.disclose--ochre { color: #8A5324; }
.disclose--ochre::before { border-color: var(--ochre-rule); }

/* ----------------------------------------------------------------- inputs -- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-ui);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-900);
  background: transparent;
  border: 1px solid var(--rule-2);
  padding: 10px 17px 10px 18px;
  cursor: pointer;
  transition: border-color 0.25s var(--e-out), color 0.25s var(--e-out), background 0.25s var(--e-out);
}
.btn:hover { border-color: var(--rule-3); }
.btn--primary {
  color: var(--surface-0);
  background: var(--ink-900);
  border-color: var(--ink-900);
}
.btn--primary:hover { background: var(--ink-700); border-color: var(--ink-700); color: var(--surface-0); }
.btn--ochre { color: var(--ochre); border-color: var(--ochre-rule); }
.btn--ochre:hover { background: var(--ochre-wash); }
.btn--signal { color: var(--ochre); border-color: var(--ochre-rule); }
.btn--signal:hover { background: var(--ochre-wash); }
.btn:disabled { opacity: 0.36; cursor: default; }
.btn:disabled:hover { border-color: var(--rule-2); background: transparent; }
.btn--sm { padding: 6px 11px; font-size: 12px; }
.btn i { transition: transform 0.25s var(--e-out); font-style: normal; }
.btn:hover i { transform: translateX(2px); }

.inp {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule-2);
  color: var(--ink-900);
  font-family: var(--f-display);
  font-variation-settings: 'opsz' 80, 'SOFT' 30;
  font-size: clamp(19px, 2.2vw, 29px);
  line-height: 1.3;
  padding: 8px 0 13px;
  outline: none;
  transition: border-color 0.3s var(--e-out);
}
.inp::placeholder { color: var(--ink-300); font-style: italic; }
.inp:focus { border-color: var(--ochre); }

/* --------------------------------------------------------- open blocks ---- */
/* A "block" is NOT a card: a region separated by a hairline and whitespace.
   No fill, no border, no radius. */
.block { padding-top: 26px; border-top: 1px solid var(--rule); }
.block__hd { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; }
.block__hd h4 {
  font-family: var(--f-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--ink-400);
  margin: 0;
}
.block__hd .tail { margin-left: auto; font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 0.1em; color: var(--ink-300); }

/* key/value rows — a ruled list, not a table widget. */
.kv { display: grid; grid-template-columns: auto 1fr; gap: 0; margin: 0; }
.kv dt {
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-400);
  padding: 7px 16px 7px 0;
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}
.kv dd {
  margin: 0;
  font-family: var(--f-mono);
  font-size: 11.5px;
  color: var(--ink-700);
  padding: 7px 0;
  border-bottom: 1px solid var(--rule);
  text-align: right;
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}
.kv dd.strong { color: var(--ink-900); }
.kv dd.ochre { color: var(--ochre); }
.kv dd.signal { color: var(--ochre); }
.kv dd.muted { color: var(--ink-300); }
.kv dt:last-of-type, .kv dd:last-of-type { border-bottom: 0; }

/* ------------------------------------------------------------- imagery ---- */
/* A plate is an image edge — not framed, padded or rounded. */
.plate { position: relative; overflow: hidden; background: var(--surface-2); }
.plate canvas, .plate img { width: 100%; height: 100%; object-fit: cover; display: block; }

.stageplot {
  position: relative;
  background: var(--surface-2);
  overflow: hidden;
  isolation: isolate;
}
.stageplot canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.stageplot canvas.layer { opacity: 0; transition: opacity 0.7s var(--e-out); }
.stageplot canvas.layer.on { opacity: 1; }
.stageplot canvas.layer.mixed { opacity: 0.5; }

/* a museum caption, separated from the image by nothing but space */
.platecap {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 13px 0 0;
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* D4: --ink-400 (#84877F) measured 3.47:1 on --surface-0 — below AA. This class
     carries the plate's "not a SatQuery result" honesty text. --ink-500 (#5E625C)
     measures 5.91:1. The `.right` half ("T1 · 2025", GHSL/Copernicus attribution)
     was even worse at --ink-300 (2.31:1); #8A5324 (the same darker ochre used
     by .disclose--ochre) keeps the accent hue and measures 5.97:1. */
  color: var(--ink-500);
}
.platecap b { font-weight: 500; color: var(--ink-700); }
.platecap .right { margin-left: auto; color: #8A5324; }

/* corner brackets — the only mark that says "this is an observation" */
.frame { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.frame-corner {
  position: absolute;
  width: 13px; height: 13px;
  border: 1px solid rgba(251, 249, 245, 0.5);
}
.frame--ink .frame-corner { border-color: rgba(23, 25, 24, 0.34); }
.frame-corner--tl { top: 12px; left: 12px;  border-right: 0; border-bottom: 0; }
.frame-corner--tr { top: 12px; right: 12px; border-left: 0; border-bottom: 0; }
.frame-corner--bl { bottom: 12px; left: 12px;  border-right: 0; border-top: 0; }
.frame-corner--br { bottom: 12px; right: 12px; border-left: 0; border-top: 0; }

/* evidence overlay: ochre, because ochre means "this is the finding" */
.ev-layer { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.ev-layer svg { width: 100%; height: 100%; overflow: visible; }
.ev-box { fill: none; stroke: var(--ochre); stroke-width: 1; opacity: 0; }
.ev-box.on { opacity: 1; }
.ev-bracket { stroke: var(--ochre); stroke-width: 1.6; fill: none; }
.ev-tag { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.12em; fill: var(--ochre); }
.ev-fill { fill: rgba(165, 102, 46, 0.13); stroke: none; opacity: 0; }
.ev-fill.on { opacity: 1; }
.ev-lock { stroke: var(--verd); }
.ev-tag--lock { fill: var(--verd); }

/* --------------------------------------------------------- execution trace
   a restrained scientific trace: hairline spine with small marks. */
.trace { display: flex; align-items: center; gap: 0; position: relative; padding: 0; }
.trace__line { position: absolute; left: 0; right: 0; top: 5px; height: 1px; background: var(--rule-2); }
.trace__fill { position: absolute; left: 0; top: 5px; height: 1px; background: var(--ochre); width: 0; transition: width 0.7s var(--e-out); }
.trace__node { flex: 1; position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.trace__node .pt {
  width: 9px; height: 9px;
  border: 1px solid var(--ink-300);
  background: var(--surface-0);
  transition: all 0.5s var(--e-out);
}
.trace__node .nm {
  font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-400);
  transition: color 0.4s var(--e-out); white-space: nowrap;
}
.trace__node .tm {
  font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.06em;
  color: var(--ink-300); opacity: 0;
  transition: opacity 0.4s var(--e-out); font-variant-numeric: tabular-nums;
}
.trace__node.is-active .pt { border-color: var(--ochre); background: var(--ochre); }
.trace__node.is-active .nm { color: var(--ink-900); }
.trace__node.is-done .pt { border-color: var(--ochre); background: var(--ochre); opacity: 0.42; }
.trace__node.is-done .nm { color: var(--ink-600); }
.trace__node.is-done .tm { opacity: 1; }
.trace__node.is-idle .pt { border-style: dashed; }
.trace__node.is-idle .nm { color: var(--ink-300); }

/* ------------------------------------------------------ reduced-motion ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------- misc ---- */
.hair { height: 1px; background: var(--rule); }
.tagrow { display: flex; flex-wrap: wrap; gap: 8px; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; align-items: center; gap: 14px; }
.spread { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }

.mark { color: var(--ochre); }
.mark--amber { color: var(--ochre); }
.mark--verd  { color: var(--verd); }
.mark--oxide { color: var(--oxide); }

.reveal { opacity: 0; transform: translateY(10px); transition: opacity 0.9s var(--e-out), transform 0.9s var(--e-out); }
.reveal.in { opacity: 1; transform: none; }

/* ----------------------------------------------------------- responsive --- */
@media (max-width: 980px) {
  .nav { gap: 0; }
  .navlink { padding: 7px 10px; font-size: 12.5px; }
}
@media (max-width: 720px) {
  .wordmark { font-size: 18px; }
  .navlink { padding: 7px 8px; font-size: 12px; }
}