/* ODINT — single stylesheet. Tokens are the signed values from
   ODINT_Claude_Handoff/tokens/odint-tokens.css and must not drift, with two
   deliberate exceptions kept as VALUES, not left to "drift" back:
   --odint-font-interface prepends "Inter" because self-hosting Inter (see
   the @font-face below) is a specification decision made after the token
   file was signed; --odint-font-record puts ui-monospace ahead of
   "Courier New" because the OS-native monospace face is better typography
   than the literal Courier New the token file names first. Do not "restore"
   either stack to match the token file verbatim — that would silently break
   the self-hosted font stack / regress the record face. */
:root {
  --odint-white: #ffffff;
  --odint-black: #000000;
  --odint-archive-pale: #eeeae2;
  --odint-carmine: #a1121a;
  --odint-grey: #777777;
  --odint-line-soft: #cbc6bd;

  --odint-font-editorial: Georgia, "Times New Roman", serif;
  --odint-font-interface: "Inter", Arial, Helvetica, sans-serif;
  --odint-font-record: ui-monospace, "Courier New", monospace;

  --odint-reading-width: 46rem;
  --odint-page-gutter: clamp(1.125rem, 3vw, 3rem);
  --odint-section-space: clamp(4.5rem, 8vw, 9rem);
  --odint-rule: 1px solid var(--odint-black);
  --odint-display-leading: 0.99;
  --odint-display-tracking: -0.035em;
  --odint-focus: 2px solid var(--odint-carmine);

  color-scheme: light;
}

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

body {
  margin: 0;
  max-inline-size: 100%;
  overflow-x: clip;
  background: var(--odint-white);
  color: var(--odint-black);
  font-family: var(--odint-font-interface);
  font-size: 1rem;
  line-height: 1.5;
}

h1, h2, h3 {
  font-family: var(--odint-font-editorial);
  line-height: var(--odint-display-leading);
  letter-spacing: var(--odint-display-tracking);
  margin: 0 0 0.5em;
}

.record-meta {
  font-family: var(--odint-font-record);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--odint-grey);
}

.skip-link {
  position: absolute;
  left: -9999px;
}
.skip-link:focus {
  left: var(--odint-page-gutter);
  top: 0;
  z-index: 100;
  background: var(--odint-black);
  color: var(--odint-white);
  padding: 0.75rem 1rem;
}

:focus-visible { outline: var(--odint-focus); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ------------------------------------------------------------------
   INTERFACE FACE — self-hosted only. There is deliberately no font CDN
   link and no remote font import anywhere in this codebase. If the file is
   absent the interface stack falls back to Arial/Helvetica, which is
   metrically close enough that the site is never unstyled.
   ------------------------------------------------------------------ */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/inter-variable.woff2") format("woff2-variations"),
       url("/assets/fonts/inter-variable.woff2") format("woff2");
}

/* ------------------------------------------------------------------
   DERIVED SCALE — not part of the signed token contract. Everything here
   resolves to the six brand values above; no seventh colour exists.
   ------------------------------------------------------------------ */
:root {
  /* Editorial display steps. Leading and tracking come from the tokens. */
  --odint-display-1: clamp(2.5rem, 5.4vw, 4.75rem);
  --odint-display-2: clamp(2rem, 4.4vw, 3.375rem);
  --odint-display-3: clamp(1.5rem, 2.4vw, 2.125rem);
  --odint-display-4: clamp(1.1875rem, 1.5vw, 1.4375rem);

  /* Interface and record steps. */
  --odint-step-ui: 0.875rem;
  --odint-step-body: 1.0625rem;
  --odint-step-lede: clamp(1.0625rem, 1.5vw, 1.3125rem);

  /* Rhythm. */
  --odint-space-xs: 0.375rem;
  --odint-space-sm: 0.75rem;
  --odint-space-md: 1.5rem;
  --odint-space-lg: clamp(2rem, 4vw, 3.5rem);
  --odint-shell-width: 84rem;
  --odint-masthead-height: 4rem;

  /* Inverted rules, for black scenes. Derived from white, never a new hue. */
  --odint-rule-invert: 1px solid var(--odint-white);
  --odint-line-invert: color-mix(in srgb, var(--odint-white) 30%, transparent);

  /* Motion. Short, functional, always overridable by reduced motion. */
  --odint-motion: 120ms;
  --odint-motion-scene: 280ms;
  --odint-ease: cubic-bezier(0.2, 0, 0, 1);
}

html {
  -webkit-text-size-adjust: 100%;
  max-inline-size: 100%;
  overflow-x: clip;
  scroll-behavior: smooth;
  scroll-padding-block-start: calc(var(--odint-masthead-height) + 1.5rem);
}

::selection { background: var(--odint-black); color: var(--odint-white); }

img, svg, video, canvas, embed, iframe {
  display: block;
  max-inline-size: 100%;
}
img, video { block-size: auto; }

hr {
  border: 0;
  border-block-start: var(--odint-rule);
  margin: 0;
}

h4, h5, h6 {
  font-family: var(--odint-font-interface);
  font-size: var(--odint-step-ui);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  margin: 0 0 var(--odint-space-sm);
}

h1 { font-size: var(--odint-display-2); }
h2 { font-size: var(--odint-display-3); text-wrap: balance; }
h3 { font-size: var(--odint-display-4); text-wrap: balance; }

p { margin: 0 0 1em; }

a { color: inherit; }

/* Links inside running text are underlined, never recoloured. Carmine is
   reserved for findings, annotations, markers and active state. */
a:not([class]) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: text-decoration-thickness var(--odint-motion) var(--odint-ease);
}
a:not([class]):hover { text-decoration-thickness: 2px; }

/* A permalinked evidence object, finding or ledger row announces itself. */
:target { outline: var(--odint-focus); outline-offset: 4px; }

/* ==================================================================
   1. SHELL AND SCENES
   The page is built from rules and alignment, not from boxes. Every
   ordinary surface is pure white or pure black; Archive Pale appears
   only under a document, a landmass or an evidence tray.
   ================================================================== */

.shell {
  inline-size: 100%;
  max-inline-size: var(--odint-shell-width);
  margin-inline: auto;
  padding-inline: var(--odint-page-gutter);
}
.shell--reading {
  max-inline-size: calc(var(--odint-reading-width) + 2 * var(--odint-page-gutter));
}
.shell--flush { padding-inline: 0; }

.section { padding-block: var(--odint-section-space); }
.section--tight { padding-block: clamp(2.25rem, 4vw, 3.5rem); }
.section--ruled { border-block-start: var(--odint-rule); }

/* A section head is a ledger head: monospace label left, optional action
   right, one hairline beneath. */
.section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--odint-space-sm) var(--odint-space-md);
  padding-block-end: var(--odint-space-sm);
  border-block-end: var(--odint-rule);
  margin-block-end: var(--odint-space-lg);
}
.section__title {
  font-family: var(--odint-font-record);
  font-size: var(--odint-step-ui);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0;
}

/* Concentrated surface. The reader has entered decisive evidence, so the
   ground inverts on a hard edge: no fade, no tint, no scrim. */
.scene--dark {
  background: var(--odint-black);
  color: var(--odint-white);
}
.scene--dark .section--ruled,
.scene--dark .section__head { border-color: var(--odint-white); }
.scene--dark hr { border-block-start: var(--odint-rule-invert); }
.scene--dark ::selection { background: var(--odint-white); color: var(--odint-black); }

/* Carmine reaches only 2.62:1 against black — below the WCAG 1.4.11 3:1
   minimum for a non-text UI indicator — so on a concentrated surface the
   ring itself is redrawn in white via outline-color (21:1 against black,
   the ring's actual neighbour whether inside the offset gap or outside the
   box). The focused element's own background and text also invert to
   white/black so the label stays legible inside the ring. Both changes
   stay within the six brand values; no shadow, no new hue. */
.scene--dark a:focus-visible,
.scene--dark .btn:focus-visible,
.footer a:focus-visible,
.cover__text-field a:focus-visible,
.evidence--dark a:focus-visible {
  background: var(--odint-white);
  color: var(--odint-black);
  outline-color: var(--odint-white);
  outline-offset: 2px;
}

/* ==================================================================
   2. READING SURFACE
   ================================================================== */

.prose {
  max-inline-size: var(--odint-reading-width);
  font-size: var(--odint-step-body);
  line-height: 1.62;
}
.prose > * + * { margin-block-start: 1.1em; }
.prose h2 { margin-block: 1.8em 0.5em; }
.prose h3 { margin-block: 1.6em 0.4em; }
.prose ul, .prose ol { padding-inline-start: 1.25rem; }
.prose li + li { margin-block-start: 0.4em; }

.prose blockquote {
  margin-inline: 0;
  padding-inline-start: var(--odint-space-md);
  border-inline-start: var(--odint-rule);
  font-family: var(--odint-font-editorial);
  font-size: var(--odint-step-lede);
  line-height: 1.35;
}
.scene--dark .prose blockquote { border-inline-start: var(--odint-rule-invert); }

.prose code, .prose kbd, .prose samp {
  font-family: var(--odint-font-record);
  font-size: 0.9em;
  background: var(--odint-archive-pale);
  padding: 0.05em 0.3em;
}
.prose pre,
.record__body pre {
  max-inline-size: 100%;
  overflow: auto;
  margin-block: clamp(1.5rem, 4vw, 2.75rem);
  padding: clamp(1rem, 3vw, 1.5rem);
  border-block-start: 3px solid var(--odint-carmine);
  background: var(--odint-black);
  color: var(--odint-white);
  font-family: var(--odint-font-record);
  font-size: 0.875rem;
  line-height: 1.65;
  tab-size: 2;
  white-space: pre;
}
.prose pre code,
.record__body pre code {
  background: transparent;
  color: inherit;
  padding: 0;
  font-size: inherit;
}

.lede {
  font-family: var(--odint-font-editorial);
  font-size: var(--odint-step-lede);
  line-height: 1.4;
  max-inline-size: 38ch;
  text-wrap: pretty;
}

.kicker {
  font-family: var(--odint-font-record);
  font-size: var(--odint-step-ui);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  display: block;
  margin-block-end: var(--odint-space-sm);
}

/* Metadata a reader must be able to act on (issue IDs, capture dates,
   source references) carries full contrast. Mid Grey stays on genuinely
   non-critical metadata, which is what the palette assigns it. */
.record-meta--strong { color: var(--odint-black); }
.scene--dark .record-meta--strong { color: var(--odint-white); }

/* ==================================================================
   3. CONTROLS
   Square, one-pixel, black. Carmine never appears on a control except
   as the focus ring, which is state, not decoration.
   ================================================================== */

button, .btn, [type="submit"], [type="button"] {
  font-family: var(--odint-font-interface);
  font-size: var(--odint-step-ui);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8125rem 1.25rem;
  border: var(--odint-rule);
  background: var(--odint-white);
  color: var(--odint-black);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--odint-motion) var(--odint-ease),
              color var(--odint-motion) var(--odint-ease);
}
button:hover, .btn:hover, [type="submit"]:hover, [type="button"]:hover {
  background: var(--odint-black);
  color: var(--odint-white);
}

.btn--solid { background: var(--odint-black); color: var(--odint-white); }
.btn--solid:hover { background: var(--odint-white); color: var(--odint-black); }

.btn--invert {
  background: var(--odint-white);
  color: var(--odint-black);
  border-color: var(--odint-white);
}
.btn--invert:hover { background: var(--odint-black); color: var(--odint-white); }

/* The primary editorial action: read the investigation. A rule, an arrow
   and a hard hover. No fill, no shadow. */
.action {
  font-family: var(--odint-font-interface);
  font-size: var(--odint-step-ui);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: 0.6rem;
  padding-block-end: 0.35rem;
  border-block-end: 2px solid currentcolor;
}
.action::after {
  content: "\2192";
  font-family: var(--odint-font-record);
  transition: transform var(--odint-motion) var(--odint-ease);
}
.action:hover::after { transform: translateX(0.25rem); }

/* Form fields are ruled, not boxed. */
input, select, textarea {
  font-family: var(--odint-font-interface);
  font-size: 1rem;
  color: var(--odint-black);
  background: var(--odint-white);
  border: var(--odint-rule);
  padding: 0.6875rem 0.75rem;
  inline-size: 100%;
}
::placeholder { color: var(--odint-grey); opacity: 1; }

/* ==================================================================
   4. MASTHEAD
   Persistent, white, bounded by a black rule. Two rows at compact
   widths so Donate never leaves the header, one row from 62rem. The
   navigation requires no JavaScript at any width.
   ================================================================== */

.masthead {
  position: sticky;
  inset-block-start: 0;
  z-index: 30;
  background: var(--odint-white);
  color: var(--odint-black);
  border-block-end: var(--odint-rule);
  max-inline-size: 100vw;
  overflow-x: clip;
}
.masthead > .shell {
  overflow: visible;
}
.masthead > .shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  column-gap: var(--odint-space-md);
  min-inline-size: 0;
}

.masthead__lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
  padding-block: 0.75rem;
}
.masthead__lockup img, .masthead__lockup svg { block-size: 1.75rem; inline-size: auto; }

.masthead__nav {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  align-items: stretch;
  gap: clamp(1rem, 3vw, 2.25rem);
  margin-inline: calc(-1 * var(--odint-page-gutter));
  padding-inline: var(--odint-page-gutter);
  border-block-start: var(--odint-rule);
  overflow-x: auto;
  scrollbar-width: none;
  min-inline-size: 0;
  max-inline-size: 100vw;
}
.masthead__nav::-webkit-scrollbar { display: none; }
.masthead__nav a {
  font-size: var(--odint-step-ui);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  text-decoration: none;
  white-space: nowrap;
  padding-block: 0.9375rem;
  border-block-end: 2px solid transparent;
  margin-block-end: -1px;
  transition: border-color var(--odint-motion) var(--odint-ease);
}
.masthead__nav a:hover { border-block-end-color: var(--odint-black); }

/* ------------------------------------------------------------------
   DESKTOP NAVIGATION STATE
   The underline does the work and nothing else needs to. A carmine
   offset ghost behind the type was tried here and rejected: doubling
   the letters made the header hard to read at a glance, which is the
   one thing a persistent masthead cannot afford.

   The lockup takes the same rule as the links so the whole header
   answers the pointer in one language. It never takes the carmine —
   palette law 3 keeps carmine off the logo.
   ------------------------------------------------------------------ */
@media (hover: hover) and (min-width: 62rem) {
  .masthead__nav a,
  .masthead__lockup {
    transition: translate var(--odint-motion) var(--odint-ease),
                border-color var(--odint-motion) var(--odint-ease);
  }
  .masthead__nav a:hover,
  .masthead__nav a:focus-visible { translate: 0 -1px; }
  .masthead__lockup {
    border-block-end: 2px solid transparent;
    margin-block-end: -1px;
  }
  .masthead__lockup:hover,
  .masthead__lockup:focus-visible {
    translate: 0 -1px;
    border-block-end-color: var(--odint-black);
  }
  .masthead__search:hover,
  .masthead__search:focus-visible { border-block-end-width: 2px; }
}

/* Active state is the one navigation use of carmine, and it is text
   colour only. The black underline carries the same information without
   relying on hue, so the state is never signalled by colour alone. */
.masthead__nav a[aria-current="page"] {
  color: var(--odint-carmine);
  border-block-end-color: var(--odint-black);
}

.masthead__search {
  justify-self: end;
  font-family: var(--odint-font-record);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  border-block-end: 1px solid currentcolor;
  padding-block: 0.2rem;
}
.masthead__search:hover { border-block-end-width: 2px; }

.masthead__utilities {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  justify-self: end;
}
.masthead__utilities .masthead__search {
  justify-self: auto;
  white-space: nowrap;
}
.masthead__search[aria-current="page"] { border-block-end-width: 2px; }
.masthead__utility {
  font-size: var(--odint-step-ui);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  text-decoration: none;
  display: none;
}
.masthead__utility:hover { text-decoration: underline; text-underline-offset: 0.2em; }

/* Donate is a solid black control everywhere it appears. Never carmine. */
.masthead__donate {
  font-family: var(--odint-font-interface);
  font-size: var(--odint-step-ui);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  line-height: 1;
  text-decoration: none;
  display: inline-block;
  padding: 0.75rem 1.125rem;
  border: var(--odint-rule);
  background: var(--odint-black);
  color: var(--odint-white);
  transition: background var(--odint-motion) var(--odint-ease),
              color var(--odint-motion) var(--odint-ease);
}
.masthead__donate:hover { background: var(--odint-white); color: var(--odint-black); }

@media (min-width: 62rem) {
  .masthead > .shell { grid-template-columns: auto minmax(0, 1fr) auto auto; }
  .masthead__nav {
    grid-column: 2;
    grid-row: 1;
    margin-inline: 0;
    padding-inline-start: clamp(1.5rem, 4vw, 3rem);
    padding-inline-end: 0;
    border-block-start: 0;
    overflow-x: visible;
  }
  .masthead__nav a { padding-block: 1.375rem; }
  .masthead__utility { display: inline-block; }
}

/* ==================================================================
   5. FOOTER
   A black close to a white page: the second half of the two-state
   grammar, and the last permanent position of Donate.
   ================================================================== */

.footer {
  background: var(--odint-black);
  color: var(--odint-white);
  border-block-start: var(--odint-rule);
  padding-block: var(--odint-space-lg);
}
.footer a { color: var(--odint-white); }
.footer__grid {
  display: grid;
  gap: var(--odint-space-lg);
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}
.footer__group {
  display: flex;
  flex-direction: column;
  gap: var(--odint-space-xs);
  border-block-start: var(--odint-rule-invert);
  padding-block-start: var(--odint-space-sm);
}
.footer__group h4 { color: var(--odint-white); margin-block-end: var(--odint-space-xs); }
.footer__group a { font-size: var(--odint-step-ui); text-decoration: none; }
.footer__group a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.footer__colophon {
  margin-block-start: var(--odint-space-lg);
  padding-block-start: var(--odint-space-sm);
  border-block-start: 1px solid var(--odint-line-invert);
  display: flex;
  flex-wrap: wrap;
  gap: var(--odint-space-sm) var(--odint-space-md);
  justify-content: space-between;
}
.footer .masthead__donate {
  background: var(--odint-white);
  color: var(--odint-black);
  border-color: var(--odint-white);
}
.footer .masthead__donate:hover { background: var(--odint-black); color: var(--odint-white); }

/* ==================================================================
   6. COVER
   A split canvas: an evidence field and a text field that never
   overlap. Nothing is ever set over the evidence, and there is no
   scrim, because the specification forbids sharing coordinates
   between a title and a document.
   ================================================================== */

.cover {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-block-end: var(--odint-rule);
  background: var(--odint-white);
}

.cover__image-field {
  position: relative;
  order: 1;
  background: var(--odint-archive-pale);
  /* `inline-size: 100%` is load-bearing, not tidiness. With only an
     aspect-ratio and a `max-block-size`, a grid item stops stretching
     and derives its WIDTH from the clamped height — so the evidence
     field became 58vh x 4/5 wide and, no longer stretched, aligned to
     the start of its column. On a short phone window that is a narrow
     panel pinned to the left edge with white beside it, which is the
     "torcida" everyone kept seeing and no measurement of the image
     inside the field could ever catch. Stating the inline size makes
     the width definite and leaves the ratio to decide only the height,
     which the cap is then free to shorten. */
  inline-size: 100%;
  aspect-ratio: 4 / 5;
  max-block-size: 58vh;
  overflow: hidden;
  /* Structural pattern: a ruled field beneath the evidence, never over
     it — the rules are z-index 0, the image/svg paints above them. */
  background-image:
    repeating-linear-gradient(0deg, transparent 0 23px, var(--odint-line-soft) 23px 24px);
}
.cover__image-field img,
.cover__image-field video,
.cover__image-field svg {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: var(--odint-focal, 50% 50%);
}
/* ------------------------------------------------------------------
   SURVEY PLATE — tier 2
   A country with no photograph is not a black blob on a pale ground.
   It is the instrument an analyst would actually be holding: a
   neatline, a lettered graticule, the true coastline drawn as a
   one-pixel black line around an Archive Pale landmass, and a carmine
   registration cross on the country's real centroid. Same grammar as
   the Atlas, at national scale.

   The plate carries no inline colour: build/covers.py emits classes
   only, and every value below comes from the six-value palette.

   Two variants, so a record never wears the homepage's plate:
     .plate--record  a reading instrument. Full A–H / 01–08 graticule,
                     a traversing crosshair and a live coordinate
                     readout driven by the pointer.
     .plate--brief   a mounted plate. Coarse graticule, bearing ticks
                     around the neatline, no cursor — the homepage lays
                     its own movable evidence selector over the top.
   ------------------------------------------------------------------ */

.plate {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  overflow: visible;
}
.plate__graticule,
.plate__ticks {
  fill: none;
  stroke: var(--odint-line-soft);
  stroke-width: 0.35;
}
.plate__land {
  fill: var(--odint-archive-pale);
  stroke: var(--odint-black);
  stroke-width: 0.45;
  stroke-linejoin: round;
}
.plate__neatline { fill: none; stroke: var(--odint-black); stroke-width: 0.5; }
.plate__corners { fill: none; stroke: var(--odint-black); stroke-width: 1.5; }
.plate__ref {
  font-family: var(--odint-font-record);
  font-size: 4.2px;
  letter-spacing: 0.04em;
  fill: var(--odint-grey);
}
/* The two axis references the pointer is currently crossing. Carmine
   marks a live map coordinate, which is what the palette reserves it
   for — it is state, and it disappears with the pointer. */
.plate__ref.is-live { fill: var(--odint-carmine); }
.plate__registration path,
.plate__registration circle {
  fill: none;
  stroke: var(--odint-carmine);
  stroke-width: 0.8;
}
.plate__cursor {
  opacity: 0;
  transition: opacity var(--odint-motion) var(--odint-ease);
}
.plate.is-traversing .plate__cursor { opacity: 1; }

/* ------------------------------------------------------------------
   THE PLATE UNDER SURVEY
   At rest the plate is a printed sheet: pale landmass, black coastline,
   grey references. Under the pointer it becomes live — the coastline
   goes carmine, the land clears to white the way a published country
   does on the Atlas, and the plate shows its working: every mark is a
   real Natural Earth survey point at its real position.

   Carmine is doing exactly what the palette reserves it for here — it
   marks a live map coordinate and an active state, and it leaves with
   the pointer. Nothing is tinted, washed or invented.
   ------------------------------------------------------------------ */
.plate__land,
.plate__vertices {
  transition: fill var(--odint-motion-scene) var(--odint-ease),
              stroke var(--odint-motion-scene) var(--odint-ease),
              opacity var(--odint-motion-scene) var(--odint-ease);
}
.plate__vertices {
  fill: none;
  stroke: var(--odint-carmine);
  stroke-width: 0.5;
  opacity: 0;
}
.plate.is-traversing .plate__vertices { opacity: 1; }
.plate.is-traversing .plate__land {
  fill: var(--odint-white);
  stroke: var(--odint-carmine);
}
.plate.is-traversing .plate__registration path,
.plate.is-traversing .plate__registration circle { stroke-width: 1.1; }

/* ------------------------------------------------------------------
   THE SCAN AND THE NAMEPLATE
   A plate at rest is a printed sheet and says nothing. Under the
   pointer it becomes an instrument that is looking at somewhere in
   particular — so it sweeps, and it names the place.

   The cartouche is a solid bar, which is the whole reason it can sit
   inside the neatline: a country's coastline can be any shape, and
   nothing may be set over evidence without a solid field behind it.
   ------------------------------------------------------------------ */
.plate__scan {
  opacity: 0;
  transition: opacity var(--odint-motion-scene) var(--odint-ease);
}
/* Soft line, not carmine. The coastline, the survey points and the
   crosshair are already carmine on hover; a fourth red element turned
   the plate into a red drawing. The sweep is texture, so it uses the
   texture colour. */
.plate__scan path {
  fill: none;
  stroke: var(--odint-line-soft);
  stroke-width: 0.4;
}
.plate.is-traversing .plate__scan {
  opacity: 1;
  animation: plate-sweep 3.2s linear infinite;
}
@keyframes plate-sweep {
  from { transform: translateX(0); }
  to   { transform: translateX(30px); }
}

.plate__nameplate {
  opacity: 0;
  transition: opacity var(--odint-motion-scene) var(--odint-ease);
}
.plate.is-traversing .plate__nameplate { opacity: 1; }
/* ------------------------------------------------------------------
   RELIEF
   Where a country has a real terrain crop, the pointer fills its own
   outline with it. The crop is equirectangular and cut to the exact
   bounding box the plate projects into, so it registers with the
   coastline by construction — it is the same map, not an image placed
   inside a shape.

   At rest the plate stays a drawing. Terrain is what the reader
   uncovers, the same way a photograph's colour is.
   ------------------------------------------------------------------ */
.plate__relief {
  opacity: 0;
  transition: opacity var(--odint-motion-scene) var(--odint-ease);
}
.plate.is-traversing .plate__relief { opacity: 1; }
/* With terrain underneath, the landmass must not paint over it: the
   fill goes, the coastline stays and thickens so the country still
   reads as a drawn boundary. */
.plate.is-traversing .plate__land--lined {
  fill: none;
  stroke: var(--odint-carmine);
  stroke-width: 0.8;
}

/* A phone has no pointer, so on a phone there is nothing to uncover
   with: every reveal above is bound to hover, and a touch reader would
   have got a pale outline and never once seen the terrain the plate is
   carrying. Where hover does not exist the plate simply arrives read —
   relief showing, coastline carmine, the country named — and keeps the
   crosshair and the coordinate readout for the pointer that drives
   them. Same information, delivered by the only means available. */
@media (hover: none) {
  .plate__relief,
  .plate__nameplate { opacity: 1; }
  .plate__land--lined {
    fill: none;
    stroke: var(--odint-carmine);
    stroke-width: 0.8;
  }
}

.plate__nameplate rect { fill: var(--odint-black); }
.plate__nameplate text {
  font-family: var(--odint-font-record);
  font-weight: 700;
  letter-spacing: 0.18em;
  fill: var(--odint-white);
}


.plate__cursor path { stroke: var(--odint-carmine); stroke-width: 0.4; }
.plate__cursor-box { fill: none; stroke: var(--odint-carmine); stroke-width: 0.8; }
.plate__readout rect { fill: var(--odint-black); }
.plate__readout text {
  font-family: var(--odint-font-record);
  font-size: 4.4px;
  letter-spacing: 0.05em;
  fill: var(--odint-white);
}

/* A plate brings its own frame and rules, so the mount underneath it
   drops the ruled pattern it uses behind a photograph, and centres the
   plate on BOTH axes rather than letting a tall country hang off one
   edge of the field. */
.cover__image-field--plate {
  background-color: var(--odint-white);
  background-image: none;
  display: grid;
  /* Definite track, same reason as the mount: `block-size: 100%` on the
     sheet is a percentage, and against an auto row a percentage is
     indeterminate — the plate fell back to its intrinsic size and hung
     116px out of the bottom of a short field, where `overflow: hidden`
     cut the neatline off. */
  grid-template-rows: minmax(0, 1fr);
  place-items: center;
  padding: clamp(3rem, 6vw, 4.5rem) clamp(1rem, 4vw, 3rem) clamp(1rem, 3vw, 2rem);
}
/* A plate is a square sheet mounted in the field, not a backdrop
   stretched across it. `position: static` is stated because the wide
   cover layout absolutely positions `> svg` with `inset: 0` for a
   photograph: on a fixed-width plate that is over-constrained, so the
   browser drops the trailing inset and pins the sheet to the left edge
   — which is exactly how the plate ended up off-centre in the field
   even though the country was centred inside it.

   Both axes are capped at the same length, so height drives the square
   and the width follows: the sheet stays square, centred and whole
   whether it is mounted in a short field or beside a very tall one. */
.cover__image-field--plate .plate,
.record .cover__image-field--plate > .plate {
  position: static;
  inset: auto;
  inline-size: auto;
  block-size: 100%;
  max-inline-size: min(100%, 38rem);
  max-block-size: min(100%, 38rem);
  aspect-ratio: 1;
  object-fit: contain;
  padding: 0;
}
/* Provenance sits on the evidence field as a record line, never as a
   caption over the picture. */
.cover__credit {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  background: var(--odint-white);
  border-block-start: var(--odint-rule);
  padding: 0.5rem var(--odint-space-sm);
}

.cover__text-field {
  order: 2;
  background: var(--odint-black);
  color: var(--odint-white);
  display: flex;
  flex-direction: column;
  gap: var(--odint-space-md);
  padding: clamp(1.5rem, 4vw, 3.5rem) var(--odint-page-gutter);
  min-block-size: clamp(20rem, 40vw, 30rem);
}
.cover__text-field--light {
  background: var(--odint-white);
  color: var(--odint-black);
  border-block-start: var(--odint-rule);
}
.cover__text-field > :last-child { margin-block-start: auto; }

.cover__title {
  font-family: var(--odint-font-editorial);
  font-size: var(--odint-display-1);
  line-height: var(--odint-display-leading);
  letter-spacing: var(--odint-display-tracking);
  margin: 0;
}
.cover__standfirst {
  font-size: var(--odint-step-lede);
  line-height: 1.42;
  max-inline-size: 42ch;
  margin: 0;
  text-wrap: pretty;
}
.cover__footline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--odint-space-sm) var(--odint-space-md);
  padding-block-start: var(--odint-space-sm);
  border-block-start: var(--odint-rule-invert);
}
.cover__text-field--light .cover__footline { border-block-start: var(--odint-rule); }
.cover__text-field--light .record-meta { color: var(--odint-black); }
.cover__text-field .record-meta { color: var(--odint-grey); }

@media (min-width: 62rem) {
  .cover { grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); }
  .cover__image-field {
    order: 2;
    aspect-ratio: auto;
    max-block-size: none;
    border-inline-start: var(--odint-rule);
  }
  .cover__text-field { order: 1; padding-inline: clamp(2rem, 4vw, 3.75rem); }
  .cover__image-field > img,
  .cover__image-field > video,
  .cover__image-field > svg { position: absolute; inset: 0; }
  .cover--reverse .cover__image-field { order: 1; border-inline: 0; }
  .cover--reverse .cover__text-field { order: 2; }
}

/* Desktop display titles break where the editor decided. Mobile is
   allowed to break long strings anywhere rather than overflow. */
@media (max-width: 40rem) {
  .cover__title, h1, h2 { overflow-wrap: anywhere; }
  .cover__title br { display: none; }
}

/* ==================================================================
   7. RULED INDEX
   The editorial archive is a ledger of ruled rows. There is no card,
   no shadow, no thumbnail grid. One hairline per row; the row inverts
   on hover and focus, which is the same two-state grammar the page
   uses everywhere else.
   ================================================================== */

.ruled-index {
  --ruled-inset: clamp(0.625rem, 1.6vw, 1.125rem);
  list-style: none;
  margin: 0;
  padding: 0;
  border-block-end: var(--odint-rule);
}

.ruled-index__row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: baseline;
  gap: var(--odint-space-xs) clamp(1rem, 3vw, 2.5rem);
  border-block-start: var(--odint-rule);
  padding-block: clamp(1rem, 2.2vw, 1.75rem);
  padding-inline: var(--ruled-inset);
  margin-inline: calc(-1 * var(--ruled-inset));
  transition: background var(--odint-motion) var(--odint-ease),
              color var(--odint-motion) var(--odint-ease);
}

.ruled-index__index { grid-column: 1; }
.ruled-index__title {
  grid-column: 1;
  font-family: var(--odint-font-editorial);
  font-size: var(--odint-display-4);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0;
}
.ruled-index__title a { text-decoration: none; }
/* The whole row is the target; the text stays selectable. */
.ruled-index__title a::after { content: ""; position: absolute; inset: 0; }
.ruled-index__summary {
  grid-column: 1;
  font-size: 0.9375rem;
  line-height: 1.5;
  max-inline-size: 60ch;
  margin: 0;
}
.ruled-index__place { grid-column: 1; }

.ruled-index__row .record-meta { color: var(--odint-black); }

.ruled-index__row:hover,
.ruled-index__row:focus-within {
  background: var(--odint-black);
  color: var(--odint-white);
}
.ruled-index__row:hover .record-meta,
.ruled-index__row:focus-within .record-meta { color: var(--odint-white); }
.ruled-index__row:hover .ruled-index__title a {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.16em;
}

/* Carmine marks the row the reader is currently in, and nothing else. */
.ruled-index__row[aria-current="page"] { border-block-start: 3px solid var(--odint-carmine); }

@media (min-width: 48rem) {
  .ruled-index__row {
    grid-template-columns: 9rem minmax(0, 1fr) minmax(0, 11rem);
  }
  .ruled-index__index { grid-column: 1; grid-row: 1 / span 2; }
  .ruled-index__title { grid-column: 2; grid-row: 1; }
  .ruled-index__summary { grid-column: 2; grid-row: 2; }
  .ruled-index__place { grid-column: 3; grid-row: 1; text-align: end; }
}

/* On a black scene the index keeps its rules and inverts its hover. */
.scene--dark .ruled-index { border-block-end: var(--odint-rule-invert); }
.scene--dark .ruled-index__row { border-block-start: var(--odint-rule-invert); }
.scene--dark .ruled-index__row .record-meta { color: var(--odint-white); }
.scene--dark .ruled-index__row:hover,
.scene--dark .ruled-index__row:focus-within {
  background: var(--odint-white);
  color: var(--odint-black);
}
.scene--dark .ruled-index__row:hover .record-meta,
.scene--dark .ruled-index__row:focus-within .record-meta { color: var(--odint-black); }

/* Migrated tour pages (Task 8): a country landing's national route is a
   plain ruled row — an anchor and a meta line, no title/index/summary
   sub-grid. */
.record__body { max-width: var(--odint-reading-width); margin-inline: auto; padding-block: var(--odint-section-space); }
.record-dek { font-family: var(--odint-font-editorial); font-size: 1.25rem; }
.ruled-index__row a { color: inherit; text-decoration: none; font-family: var(--odint-font-editorial); font-size: 1.25rem; }
.ruled-index__row a:hover { text-decoration: underline; }

/* ==================================================================
   8. FINDING
   The only place carmine carries weight. A finding is a sentence that
   can be checked literally against a cited source, so it is set in the
   editorial face, marked by a carmine rule, and always followed by its
   source IDs.
   ================================================================== */

.finding {
  border-block-start: 3px solid var(--odint-carmine);
  padding-block-start: clamp(1rem, 2.5vw, 1.75rem);
  margin-block: var(--odint-space-lg);
  max-inline-size: var(--odint-reading-width);
}
.finding__label {
  font-family: var(--odint-font-record);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--odint-carmine);
  display: block;
  margin-block-end: var(--odint-space-sm);
}
.finding__statement {
  font-family: var(--odint-font-editorial);
  font-size: var(--odint-display-3);
  line-height: 1.14;
  letter-spacing: -0.025em;
  margin: 0;
  text-wrap: pretty;
}
.finding__figure {
  font-family: var(--odint-font-editorial);
  font-size: var(--odint-display-1);
  line-height: 0.92;
  letter-spacing: -0.04em;
  display: block;
  font-variant-numeric: tabular-nums;
}
.finding__sources {
  margin-block-start: var(--odint-space-md);
  padding-block-start: var(--odint-space-xs);
  border-block-start: 1px solid var(--odint-line-soft);
  color: var(--odint-black);
}

/* Carmine text does not reach 4.5:1 on black, so on a concentrated
   scene the label reverts to white and the carmine rule thickens. The
   finding is never identified by hue alone in either state. */
.scene--dark .finding,
.cover__text-field .finding { border-block-start-width: 4px; }
.scene--dark .finding__label,
.cover__text-field .finding__label { color: var(--odint-white); }
.scene--dark .finding__sources,
.cover__text-field .finding__sources {
  color: var(--odint-white);
  border-block-start: 1px solid var(--odint-line-invert);
}

/* ==================================================================
   9. STATUS
   Case Files state an official record, not an accusation. The label is
   a ruled box in black; carmine appears only as the verification tick
   on a record ODINT has itself verified.
   ================================================================== */

.status {
  font-family: var(--odint-font-record);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3125rem 0.5rem;
  border: var(--odint-rule);
  color: var(--odint-black);
  background: var(--odint-white);
}
.status--verified::before {
  content: "";
  inline-size: 0.5rem;
  block-size: 0.5rem;
  background: var(--odint-carmine);
  flex: none;
}

/* ==================================================================
   10. EVIDENCE
   An Archive Pale mount, the way a document is mounted in a physical
   archive: generous margin around the object, a hairline round the
   object itself, and a white caption strip carrying the evidence ID,
   provenance and date. Pale exists here and nowhere else.
   ================================================================== */

.evidence {
  margin: var(--odint-space-lg) 0;
  border: var(--odint-rule);
  background: var(--odint-archive-pale);
}
.evidence__mount {
  padding: clamp(1rem, 3vw, 2.75rem);
  display: grid;
  justify-items: center;
  gap: var(--odint-space-sm);
}
.evidence__mount > img,
.evidence__mount > svg,
.evidence__mount > embed,
.evidence__mount > iframe,
.evidence__mount > table {
  border: var(--odint-rule);
  background: var(--odint-white);
  max-inline-size: 100%;
}
.evidence__mount > iframe, .evidence__mount > embed {
  inline-size: 100%;
  min-block-size: min(78vh, 44rem);
}
.evidence__caption {
  background: var(--odint-white);
  border-block-start: var(--odint-rule);
  padding: 0.8125rem clamp(1rem, 3vw, 1.5rem);
  display: grid;
  gap: var(--odint-space-xs);
}
.evidence__id {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  color: var(--odint-black);
}
.evidence__note {
  font-size: 0.9375rem;
  line-height: 1.5;
  max-inline-size: 68ch;
  margin: 0;
}
/* A pointer into the document itself: the one annotation use of carmine. */
.evidence__annotation {
  font-family: var(--odint-font-record);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--odint-carmine);
  border-inline-start: 2px solid var(--odint-carmine);
  padding-inline-start: 0.5rem;
}
/* A photographic plate is mounted on black rather than pale. */
.evidence--plate { background: var(--odint-black); }
.evidence--plate .evidence__mount > img { border: var(--odint-rule-invert); }
.evidence--dark .evidence__caption {
  background: var(--odint-black);
  color: var(--odint-white);
  border-block-start: var(--odint-rule-invert);
}
.evidence--dark .evidence__id { color: var(--odint-white); }

/* ------------------------------------------------------------------
   Source Ledger. Every public assertion resolves to a row here, so the
   table is dense, monospaced and ruled with the soft line rather than
   full black, which would be unreadable at this row count.
   ------------------------------------------------------------------ */
.ledger {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  text-align: start;
}
.ledger caption {
  font-family: var(--odint-font-record);
  font-size: var(--odint-step-ui);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-align: start;
  padding-block-end: var(--odint-space-sm);
}
.ledger th {
  font-family: var(--odint-font-record);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: start;
  border-block-end: var(--odint-rule);
  padding: 0.5rem 0.75rem 0.5rem 0;
  white-space: nowrap;
}
.ledger td {
  vertical-align: top;
  border-block-start: 1px solid var(--odint-line-soft);
  padding: 0.75rem 0.75rem 0.75rem 0;
}
.ledger td:first-child {
  font-family: var(--odint-font-record);
  font-size: 0.8125rem;
  white-space: nowrap;
}
.ledger tr:target td { border-block-start-color: var(--odint-carmine); }
.ledger__scroll { overflow-x: auto; }
.ledger__scroll > .ledger { min-inline-size: 34rem; }

/* ==================================================================
   11. MIGRATED EVIDENCE SCENES
   The 125 migrated investigations carry their ORIGINAL markup verbatim
   — the handoff forbids rewording a claim, and rewriting structure
   would have meant re-editorializing 125 investigations by machine.
   So these rules target the legacy class names directly rather than
   waiting for a re-extraction pass, and give them the same cinematic
   grammar as .finding/.evidence/.ledger above: few scenes, each one
   deliberate, not a shelf of flat utility cards.

   Four families, each a real scene:
     .finding-card   -> the dark, concentrated moment. Every "Critical
                         Finding" becomes the scene DESIGN_SYSTEM.md
                         describes: bright civic reading interrupted by
                         a black plate the reader has to stop for.
     .stat-highlight -> a by-the-numbers plate, same dark family,
                         ruled columns instead of boxed stat-cards.
     .downloads-grid  -> an evidence tray on Archive Pale, exactly like
                         .evidence's document mount.
     .data-table      -> aliases straight onto .ledger's own grammar.

   The legacy source also carries a live anti-slop violation this
   fixes: `.download-btn.red` is a generic red call-to-action, which the
   handoff explicitly forbids ("No red generic buttons"). Both the red
   and black legacy variants render as the one solid black control
   used everywhere else on the site — never carmine, never red.
   ================================================================== */

.finding-card {
  background: var(--odint-black);
  color: var(--odint-white);
  border-block-start: 4px solid var(--odint-carmine);
  padding: clamp(1.25rem, 3vw, 2rem) clamp(1.25rem, 3vw, 2.25rem);
  margin-block: var(--odint-space-lg);
  max-inline-size: var(--odint-reading-width);
  display: grid;
  gap: var(--odint-space-sm);
}
.fc-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--odint-space-xs) var(--odint-space-md);
}
.fc-title {
  font-family: var(--odint-font-editorial);
  font-size: var(--odint-display-4);
  line-height: 1.15;
  letter-spacing: -0.015em;
}
.fc-badge {
  font-family: var(--odint-font-record);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--odint-carmine);
  border: 1px solid var(--odint-carmine);
  padding: 0.2em 0.55em;
  flex: none;
  white-space: nowrap;
}
.fc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.25rem;
  font-family: var(--odint-font-record);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--odint-line-soft);
  border-block-start: var(--odint-rule-invert);
  padding-block-start: var(--odint-space-xs);
}
.fc-meta-item strong { color: var(--odint-white); font-weight: 600; }
.fc-desc {
  font-size: var(--odint-step-body);
  line-height: 1.6;
  max-inline-size: 62ch;
}

.stat-highlight {
  background: var(--odint-black);
  color: var(--odint-white);
  margin: var(--odint-space-lg) calc(-1 * var(--odint-page-gutter));
  padding: clamp(1.5rem, 4vw, 2.5rem) var(--odint-page-gutter);
  display: flex;
  flex-wrap: wrap;
}
.stat-box {
  flex: 1 1 9rem;
  padding-inline: clamp(0.875rem, 2vw, 1.5rem);
  border-inline-start: var(--odint-rule-invert);
  display: grid;
  gap: 0.25rem;
}
.stat-box:first-child { border-inline-start: none; padding-inline-start: 0; }
.stat-box .num {
  font-family: var(--odint-font-editorial);
  font-size: var(--odint-display-2);
  line-height: 0.95;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  display: block;
}
.stat-box .num.black { color: var(--odint-white); } /* legacy modifier, neutralised */
.stat-box .label {
  font-family: var(--odint-font-record);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--odint-line-soft);
}

.downloads-grid { display: grid; gap: var(--odint-space-sm); margin-block: var(--odint-space-lg); }
.download-item {
  background: var(--odint-archive-pale);
  border: var(--odint-rule);
  padding: clamp(1rem, 2.5vw, 1.5rem);
  display: grid;
  gap: var(--odint-space-sm);
}
.dl-info { display: grid; gap: 0.2rem; }
.dl-info strong { font-family: var(--odint-font-editorial); font-size: 1.0625rem; }
.dl-info span { font-size: 0.9375rem; color: var(--odint-black); }
.dl-name { font-family: var(--odint-font-editorial); font-size: 1.0625rem; }
.dl-meta { font-family: var(--odint-font-record); font-size: 0.75rem; color: var(--odint-grey); }
.download-btn,
.download-btn.red,
.download-btn.black {
  font-family: var(--odint-font-record);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--odint-black);
  color: var(--odint-white);
  border: var(--odint-rule);
  padding: 0.55rem 0.9rem;
  text-decoration: none;
}
.download-btn:hover, .download-btn:focus-visible { background: var(--odint-white); color: var(--odint-black); }
.dl-icon { flex: none; }

.data-table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  text-align: start;
  margin-block: var(--odint-space-lg);
}
.data-table th {
  font-family: var(--odint-font-record);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: start;
  border-block-end: var(--odint-rule);
  padding: 0.5rem 0.75rem 0.5rem 0;
  white-space: nowrap;
}
.data-table td {
  vertical-align: middle;
  border-block-start: 1px solid var(--odint-line-soft);
  padding: 0.6rem 0.75rem 0.6rem 0;
}
.data-table .cell-mono { font-family: var(--odint-font-record); font-size: 0.8125rem; }
.data-table .photo-cell img {
  inline-size: 2.75rem;
  block-size: 2.75rem;
  object-fit: cover;
  border: var(--odint-rule);
  display: block;
}
.data-table .name-cell strong { font-family: var(--odint-font-editorial); }
.data-table .name-cell small { display: block; color: var(--odint-grey); font-size: 0.75rem; }
.data-table-wrap { overflow-x: auto; margin-block: var(--odint-space-lg); }
.data-table-wrap .data-table { margin-block: 0; }
.data-table-wrapper { overflow-x: auto; margin-block: var(--odint-space-lg); }
.data-table-wrapper .data-table { margin-block: 0; }

/* ------------------------------------------------------------------
   HOLDINGS — what a country file actually contains
   A country landing arrived at the new shell with its datasets
   rendered as bare links: the single most important thing on the page
   (what evidence exists, and how much of it) was the least visible.

   These are holdings, not editorial prose, so they are a register:
   one hairline per holding, a status tab on the left rail, the title
   in the editorial face and — the reason a reader is here — the
   quantities set large in the same face, as figures rather than
   footnotes. Same two-state grammar as .ruled-index: the row inverts
   on hover and focus. No card, no shadow, no grid of tiles.
   ------------------------------------------------------------------ */

.section-title {
  font-family: var(--odint-font-editorial);
  font-size: var(--odint-display-3);
  line-height: 1.1;
  letter-spacing: -0.025em;
  border-block-start: 3px solid var(--odint-black);
  padding-block-start: var(--odint-space-sm);
  margin-block: var(--odint-section-space) 0.25rem;
}
.section-subtitle {
  font-family: var(--odint-font-record);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--odint-grey);
  margin-block: 0 var(--odint-space-md);
}

.dataset-grid {
  display: grid;
  border-block-end: var(--odint-rule);
  margin-block: var(--odint-space-md) var(--odint-space-lg);
}
.dataset-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.45rem;
  border-block-start: var(--odint-rule);
  padding: clamp(1.15rem, 2.6vw, 1.75rem) 0;
  color: inherit;
  text-decoration: none;
  transition: background var(--odint-motion) var(--odint-ease),
              color var(--odint-motion) var(--odint-ease),
              padding-inline var(--odint-motion) var(--odint-ease);
}
.dataset-card h4 {
  font-family: var(--odint-font-editorial);
  font-size: var(--odint-display-4);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0;
}
.dataset-card > p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  max-inline-size: 58ch;
}
.card-badge {
  justify-self: start;
  font-family: var(--odint-font-record);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border: 1px solid currentcolor;
  padding: 0.2rem 0.45rem;
}
/* Carmine marks a live holding — a real, published dataset the reader
   can open. "Coming soon" is not a finding, so it stays grey. */
.card-badge.live { color: var(--odint-carmine); }
.card-badge.soon { color: var(--odint-grey); }

.card-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0;
  margin-block-start: 0.35rem;
}
.card-stat {
  flex: 0 1 auto;
  padding-inline: clamp(0.7rem, 2vw, 1.15rem);
  border-inline-start: 1px solid var(--odint-line-soft);
  font-family: var(--odint-font-record);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--odint-grey);
  line-height: 1.35;
}
.card-stat:first-child { border-inline-start: 0; padding-inline-start: 0; }
/* The quantities are the reason the reader opened the country file. */
.card-stat strong {
  display: block;
  font-family: var(--odint-font-editorial);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--odint-black);
  text-transform: none;
}

a.dataset-card::after {
  content: "→";
  position: absolute;
  inset-block-start: clamp(1.15rem, 2.6vw, 1.75rem);
  inset-inline-end: 0;
  font-family: var(--odint-font-record);
  transition: inset-inline-end var(--odint-motion) var(--odint-ease);
}
a.dataset-card:hover,
a.dataset-card:focus-visible {
  background: var(--odint-black);
  color: var(--odint-white);
  padding-inline: clamp(0.75rem, 2vw, 1.25rem);
}
a.dataset-card:hover .card-stat,
a.dataset-card:focus-visible .card-stat { color: var(--odint-line-soft); }
a.dataset-card:hover .card-stat strong,
a.dataset-card:focus-visible .card-stat strong { color: var(--odint-white); }
a.dataset-card:hover .card-stat,
a.dataset-card:focus-visible .card-stat { border-inline-start-color: var(--odint-grey); }
a.dataset-card:hover::after { inset-inline-end: clamp(0.75rem, 2vw, 1.25rem); }

/* A holding that does not exist yet is legible but plainly unavailable:
   pale mount, grey type, no affordance to open. */
.dataset-card.upcoming {
  background: var(--odint-archive-pale);
  color: var(--odint-grey);
  padding-inline: clamp(0.75rem, 2vw, 1.25rem);
}
.dataset-card.upcoming h4 { color: var(--odint-black); }
.dataset-card.upcoming .card-stat strong { color: var(--odint-grey); }

/* A country landing opens on its own numbers. Same dark by-the-numbers
   plate as .stat-highlight — .findings-grid must NOT inherit the black
   "critical finding" card, which is a different legacy family that
   happens to share the .finding-card name. */
.findings-grid {
  background: var(--odint-black);
  color: var(--odint-white);
  margin: var(--odint-space-lg) calc(-1 * var(--odint-page-gutter));
  padding: clamp(1.5rem, 4vw, 2.5rem) var(--odint-page-gutter);
  display: flex;
  flex-wrap: wrap;
}
.findings-grid .finding-card {
  background: none;
  border: 0;
  border-inline-start: var(--odint-rule-invert);
  margin: 0;
  padding: 0 clamp(0.875rem, 2vw, 1.5rem);
  flex: 1 1 8rem;
  display: grid;
  gap: 0.25rem;
  max-inline-size: none;
}
.findings-grid .finding-card:first-child {
  border-inline-start: 0;
  padding-inline-start: 0;
}
.findings-grid .number {
  font-family: var(--odint-font-editorial);
  font-size: var(--odint-display-2);
  line-height: 0.95;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.findings-grid .label {
  font-family: var(--odint-font-record);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--odint-line-soft);
}

.coming-soon-box {
  border: var(--odint-rule);
  border-block-start: 3px solid var(--odint-grey);
  background: var(--odint-archive-pale);
  padding: clamp(1rem, 2.5vw, 1.5rem);
  margin-block: var(--odint-space-lg);
  display: grid;
  gap: 0.4rem;
}
.cs-label {
  font-family: var(--odint-font-record);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--odint-grey);
}
.cs-date { font-family: var(--odint-font-record); font-size: 0.8125rem; }
.cs-note { font-size: 0.9375rem; line-height: 1.55; margin: 0; }

@media (min-width: 44rem) {
  .dataset-card {
    grid-template-columns: 7.5rem minmax(0, 1fr);
    column-gap: clamp(1rem, 3vw, 2rem);
  }
  .card-badge { grid-column: 1; grid-row: 1; align-self: start; }
  .dataset-card h4 { grid-column: 2; grid-row: 1; padding-inline-end: 2rem; }
  .dataset-card > p { grid-column: 2; }
  .card-stats { grid-column: 2; }
}

/* ==================================================================
   12. ATLAS
   Always a recognizable world map, never an abstract dot field. The
   landmass is Archive Pale with a black one-pixel coastline, the
   graticule is the soft line, and a marker exists only for a country
   with a published investigation.
   ================================================================== */

.atlas {
  position: relative;
  border: var(--odint-rule);
  background: var(--odint-white);
}
.atlas__map {
  position: relative;
  inline-size: 100%;
  aspect-ratio: 2 / 1;
}
.atlas__map > svg { inline-size: 100%; block-size: 100%; }

.atlas__land {
  fill: var(--odint-archive-pale);
  stroke: var(--odint-black);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.atlas__graticule {
  fill: none;
  stroke: var(--odint-line-soft);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.atlas__land[data-published="true"] { fill: var(--odint-white); }

/* The country index is the static equivalent of the map and is always
   present. Below 60rem it is the only labelling, so the world view
   never degrades into unlabelled dots. */
.atlas__index {
  border-block-start: var(--odint-rule);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.atlas__index a {
  font-family: var(--odint-font-record);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  padding: 0.6875rem var(--odint-space-sm);
  border-block-end: 1px solid var(--odint-line-soft);
  border-inline-end: 1px solid var(--odint-line-soft);
  display: flex;
  justify-content: space-between;
  gap: var(--odint-space-sm);
}
.atlas__index a:hover { background: var(--odint-black); color: var(--odint-white); }
.atlas__index a[aria-current="page"] { color: var(--odint-carmine); }

/* Task 6: the real Natural Earth world map, rendered server-side as one
   inline <svg class="atlas">. Its markers are SVG <a>/<circle> pairs
   nested inside the SVG document itself, so the SVG carries no colour —
   only these class hooks do. */
.atlas { display: block; width: 100%; height: auto; }
.atlas__land path {
  fill: var(--odint-archive-pale);
  stroke: var(--odint-black);
  stroke-width: 0.5;
  vector-effect: non-scaling-stroke;
}
.atlas__marker circle { fill: var(--odint-carmine); }
.atlas__marker:focus-visible circle { stroke: var(--odint-black); stroke-width: 2; }
.atlas__marker {
  transition: opacity var(--odint-motion-scene) var(--odint-ease);
}
.atlas__marker.is-dimmed { opacity: 0.12; pointer-events: none; }

/* ------------------------------------------------------------------
   THE WORLD UNDER THE POINTER
   At rest the Atlas is a printed sheet: pale land on a white sea. With
   a pointer on it the ground inverts — the sea takes the archive tone
   and the land clears to white, which is the same signal a published
   country already carries — and whichever country is under the pointer
   fills carmine. Carmine on a map is a marker, which is what the
   palette reserves it for, and it leaves with the pointer.

   Every value is one of the six. Nothing is tinted and nothing glows.
   ------------------------------------------------------------------ */
.atlas,
.atlas__land path {
  transition: background-color var(--odint-motion-scene) var(--odint-ease),
              fill var(--odint-motion-scene) var(--odint-ease),
              stroke var(--odint-motion-scene) var(--odint-ease);
}
.home-map-frame:hover .atlas,
.atlas-stage__map:hover .atlas { background: var(--odint-archive-pale); }
.home-map-frame:hover .atlas__land path,
.atlas-stage__map:hover .atlas__land path { fill: var(--odint-white); }
.atlas__land path:hover { fill: var(--odint-carmine); stroke: var(--odint-carmine); }
.home-map-frame:hover .atlas__land path:hover,
.atlas-stage__map:hover .atlas__land path:hover { fill: var(--odint-carmine); }
@media (hover: none) {
  .atlas__land path:hover { fill: var(--odint-archive-pale); stroke: var(--odint-black); }
}

/* ------------------------------------------------------------------
   DOSSIER COMPOSITION
   Registration marks, documentary mounts and file tabs translate the
   approved handoff into the live site without fabricating evidence.
   ------------------------------------------------------------------ */

.dossier-hero {
  position: relative;
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  min-block-size: auto;
  border-block-end: var(--odint-rule);
  overflow: hidden;
  inline-size: 100%;
  max-inline-size: var(--odint-shell-width);
  border-inline: var(--odint-rule);
  padding-inline: 0;
}
.dossier-hero__rail {
  grid-column: 1;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.25rem;
  border-inline-end: var(--odint-rule);
  font-family: var(--odint-font-record);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
}
.dossier-hero__brief {
  grid-column: 2;
  grid-row: 1;
  padding: clamp(2.25rem, 4.5vw, 4rem) var(--odint-page-gutter);
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-block-end: var(--odint-rule);
  min-inline-size: 0;
  max-inline-size: 100%;
}
.dossier-hero__kicker { color: var(--odint-carmine); }
.dossier-hero__place {
  font-family: var(--odint-font-record);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.dossier-hero__brief h1 {
  font-size: clamp(2.6rem, 3.8vw, 3.75rem);
  line-height: 0.9;
  max-inline-size: 12ch;
  text-transform: uppercase;
  margin-block: 0.15em 0.25em;
  overflow-wrap: anywhere;
}
.dossier-title__marked {
  text-decoration-line: underline;
  text-decoration-color: var(--odint-archive-pale);
  text-decoration-thickness: 0.18em;
  text-underline-offset: -0.1em;
  text-decoration-skip-ink: none;
}
.dossier-hero__brief .record-dek { max-inline-size: 48ch; line-height: 1.5; }
.dossier-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-block: var(--odint-rule);
  margin: 0 0 var(--odint-space-md);
  min-inline-size: 0;
  max-inline-size: 100%;
}
.dossier-meta div { padding: 0.55rem 0.75rem; border-inline-start: var(--odint-rule); }
.dossier-meta div:first-child { border-inline-start: 0; padding-inline-start: 0; }
.dossier-meta dt,
.dossier-slip dt,
.record-vitals dt {
  font-family: var(--odint-font-record);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.dossier-meta dd,
.dossier-slip dd,
.record-vitals dd {
  margin: 0.2rem 0 0;
  font-family: var(--odint-font-record);
  font-size: 0.75rem;
  overflow-wrap: anywhere;
}

.dossier-hero__evidence {
  grid-column: 2;
  grid-row: 2;
  position: relative;
  padding: clamp(1.5rem, 4vw, 3.25rem);
  background: var(--odint-archive-pale);
  min-inline-size: 0;
  max-inline-size: 100%;
}
.evidence-register {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--odint-space-xs);
  color: var(--odint-black);
  border-block-end: var(--odint-rule);
  padding-block-end: var(--odint-space-xs);
}
.evidence-register button {
  border: 0;
  border-block-end: 1px solid currentcolor;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}
.dossier-media {
  position: relative;
  min-block-size: clamp(20rem, 38vw, 32rem);
  margin-block-start: var(--odint-space-sm);
  background: var(--odint-white);
  border: var(--odint-rule);
  overflow: hidden;
}
.dossier-media > img,
.dossier-media > svg { inline-size: 100%; block-size: 100%; object-fit: cover; position: absolute; inset: 0; }
.dossier-media > img {
  filter: grayscale(1) contrast(1.12);
  transition: filter var(--odint-motion-scene) var(--odint-ease);
}
.dossier-media:hover > img,
.dossier-media:focus-within > img { filter: none; }
.dossier-media--plate {
  background: var(--odint-white);
  display: grid;
  place-items: center;
  padding: clamp(1rem, 3vw, 2.25rem);
}
.dossier-media--plate > .plate {
  position: static;
  inline-size: auto;
  block-size: 100%;
  max-inline-size: min(100%, 30rem);
  aspect-ratio: 1;
}

/* ------------------------------------------------------------------
   EVIDENCE SELECTOR AND ITS LEADER
   The selector is a registration loupe, not a floating box: corner
   brackets, a centre cross and a live grid reference. Its leader is a
   real line to the archive slip, redrawn from both elements' measured
   positions on every move — the annotation stays attached to the file
   it annotates no matter where the reader parks the loupe, which a
   fixed, rotated pseudo-element could never do.

   Only the loupe moves. The anchor belongs to the record.
   ------------------------------------------------------------------ */

.dossier-media__target {
  position: absolute;
  z-index: 4;
  inline-size: clamp(3.25rem, 7vw, 5.5rem);
  block-size: clamp(3.25rem, 7vw, 5.5rem);
  translate: -50% -50%;
  cursor: grab;
  touch-action: none;
  user-select: none;
}
/* A hard one-pixel white keyline, zero blur: the loupe has to stay
   readable over a black photograph and over a pale plate alike. This
   is registration, not a shadow. */
.evidence-target__frame {
  position: absolute;
  inset: 0;
  border: 1px solid var(--odint-carmine);
  box-shadow: 0 0 0 1px var(--odint-white);
}
.evidence-target__corner {
  position: absolute;
  inline-size: 0.6rem;
  block-size: 0.6rem;
  border: 0 solid var(--odint-carmine);
}
.evidence-target__corner:nth-child(1) { inset-block-start: -1px; inset-inline-start: -1px; border-block-start-width: 3px; border-inline-start-width: 3px; }
.evidence-target__corner:nth-child(2) { inset-block-start: -1px; inset-inline-end: -1px; border-block-start-width: 3px; border-inline-end-width: 3px; }
.evidence-target__corner:nth-child(3) { inset-block-end: -1px; inset-inline-start: -1px; border-block-end-width: 3px; border-inline-start-width: 3px; }
.evidence-target__corner:nth-child(4) { inset-block-end: -1px; inset-inline-end: -1px; border-block-end-width: 3px; border-inline-end-width: 3px; }
.evidence-target__cross {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  inline-size: 0.9rem;
  block-size: 0.9rem;
  translate: -50% -50%;
}
.evidence-target__cross::before,
.evidence-target__cross::after {
  content: "";
  position: absolute;
  background: var(--odint-carmine);
}
.evidence-target__cross::before { inset-inline: 0; inset-block-start: 50%; block-size: 1px; }
.evidence-target__cross::after { inset-block: 0; inset-inline-start: 50%; inline-size: 1px; }
.evidence-target__ref {
  position: absolute;
  inset-block-end: calc(100% + 3px);
  inset-inline-start: -1px;
  background: var(--odint-carmine);
  color: var(--odint-white);
  padding: 0.1rem 0.3rem;
  font-family: var(--odint-font-record);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
/* The leader draws in raw pixel coordinates measured from the page, so
   its own box must map 1:1 to those pixels. `object-fit` is stated
   explicitly because the mounts it lives in style `> svg` for the
   evidence graphic — `cover` there rescaled and re-centred the leader's
   whole coordinate system, which is why the line appeared to start in
   mid-air instead of at the loupe. */
.evidence-leader,
.archive-feature__media > .evidence-leader {
  position: absolute;
  z-index: 3;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: fill;
  pointer-events: none;
  overflow: visible;
}
/* Same registration logic as the loupe's frame: a hard white keyline
   under the leader, zero blur, so the annotation reads over a dark
   photograph and over a pale plate alike. */
.evidence-leader__halo { stroke: var(--odint-white); stroke-width: 3; }
.evidence-leader__line { stroke: var(--odint-carmine); stroke-width: 1; }
.evidence-leader__anchor {
  fill: var(--odint-carmine);
  stroke: var(--odint-white);
  stroke-width: 1.5;
}
.evidence-target.is-dragging { cursor: grabbing; }
.evidence-target:focus-visible { outline-color: var(--odint-carmine); outline-offset: 4px; }
.dossier-slip {
  position: relative;
  z-index: 5;
  background: var(--odint-white);
  border: var(--odint-rule);
  padding: var(--odint-space-md);
  margin: -4rem 0 0 auto;
  inline-size: min(82%, 19rem);
}
.dossier-media__coordinates {
  position: absolute;
  z-index: 2;
  inset-inline-start: 0;
  inset-block-end: 0;
  margin: 0;
  padding: 0.35rem 0.55rem;
  background: var(--odint-black);
  color: var(--odint-white);
}
.dossier-slip dl { margin: 0; }
.dossier-slip dl div { display: flex; justify-content: space-between; gap: 1rem; border-block-start: 1px solid var(--odint-line-soft); padding-block: 0.45rem; }
.dossier-slip__stamp {
  color: var(--odint-carmine);
  border: 2px solid var(--odint-carmine);
  inline-size: fit-content;
  padding: 0.25rem 0.5rem;
  font-family: var(--odint-font-record);
  font-size: 0.6875rem;
  text-transform: uppercase;
  transform: rotate(-3deg);
  margin: var(--odint-space-md) 0 0 auto;
}

.contact-sheet {
  position: relative;
  border-block-end: var(--odint-rule);
  padding-block: var(--odint-space-sm);
}
.contact-sheet__label { margin: 0 0 var(--odint-space-xs); }
.contact-sheet__reel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(10rem, 1fr);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: inline proximity;
  overscroll-behavior-inline: contain;
  border-inline-start: var(--odint-rule);
}
.contact-sheet__reel::-webkit-scrollbar { display: none; }
.contact-sheet__frame {
  position: relative;
  display: block;
  min-block-size: 6.5rem;
  overflow: hidden;
  border-block: var(--odint-rule);
  border-inline-end: var(--odint-rule);
  background: var(--odint-black);
  color: var(--odint-white);
  scroll-snap-align: start;
}
.contact-sheet__frame img {
  inline-size: 100%;
  block-size: 6.5rem;
  object-fit: cover;
  filter: grayscale(1) contrast(1.12);
  opacity: 0.82;
  transition: opacity var(--odint-motion) var(--odint-ease);
}
.contact-sheet__frame:hover img,
.contact-sheet__frame:focus-visible img { opacity: 1; filter: none; }
.contact-sheet__frame span {
  position: absolute;
  z-index: 2;
  inset-inline: 0.35rem;
  inset-block-start: 0.25rem;
  color: var(--odint-white);
  font-size: 0.5625rem;
}

.home-field,
.home-archive { padding-block: clamp(3rem, 6vw, 6rem); }
.home-field { display: grid; gap: var(--odint-space-lg); }
.module-head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--odint-space-sm);
  border-block-start: var(--odint-rule);
  padding-block-start: var(--odint-space-sm);
  margin-block-end: var(--odint-space-md);
}
.module-head h2 { margin: 0; }

/* A country's own investigations. They used to arrive as a bare list of
   anchors with a meta line — the reader could not tell a 200-asset
   record from an empty one without opening both. Same ruled grammar as
   the archive index, plus the two numbers that actually distinguish one
   record in a national route from another. */
.national-route {
  border-block-start: var(--odint-rule);
  padding-block: var(--odint-section-space);
}
.national-route .module-head { border-block-start: 0; padding-block-start: 0; }
.national-route__count { color: var(--odint-grey); text-align: end; }
.route-index__row { align-items: start; }
.route-index__holdings {
  display: flex;
  flex-wrap: wrap;
  gap: 0 clamp(1rem, 3vw, 2rem);
  color: var(--odint-grey);
}
.route-index__holdings strong {
  font-family: var(--odint-font-editorial);
  font-size: 1.375rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--odint-black);
  display: block;
}
.ruled-index__row:hover .route-index__holdings strong,
.ruled-index__row:focus-within .route-index__holdings strong { color: var(--odint-white); }

@media (min-width: 48rem) {
  .route-index__row { grid-template-columns: 9rem minmax(0, 1fr) minmax(0, 11rem); }
  .route-index__holdings { grid-column: 2; grid-row: 3; }
  .route-index__row .ruled-index__place { grid-row: 1 / span 2; }
}
.home-map-frame {
  position: relative;
  border: var(--odint-rule);
  padding: var(--odint-space-sm);
  background: var(--odint-white);
  overflow: hidden;
}
.home-map-frame__canvas {
  transition: transform var(--odint-motion-scene) var(--odint-ease);
  transform-origin: center;
}
.home-map-frame__canvas .atlas { min-block-size: 20rem; }
.home-map-frame__tools {
  position: absolute;
  z-index: 7;
  inset-inline-start: calc(var(--odint-space-sm) * 2);
  inset-block-start: calc(var(--odint-space-sm) * 2);
  display: grid;
}
.home-map-frame__tools button { inline-size: 2.2rem; block-size: 2.2rem; padding: 0; background: var(--odint-white); }
.home-map-frame__tools button + button { border-block-start: 0; }
.home-map-frame__grid,
.atlas-stage__grid {
  position: absolute;
  z-index: 6;
  inset-inline-start: var(--odint-space-sm);
  inset-block-end: var(--odint-space-sm);
  margin: 0;
  padding: 0.25rem 0.4rem;
  background: var(--odint-black);
  color: var(--odint-white);
}
.home-map-frame__focus {
  position: absolute;
  z-index: 6;
  inset-inline-end: var(--odint-space-sm);
  inset-block-end: var(--odint-space-sm);
  inline-size: min(43%, 17rem);
  min-block-size: 8rem;
  padding: var(--odint-space-sm);
  border: var(--odint-rule);
  background: var(--odint-white);
}
.home-map-frame__focus h3 { margin-block: 0.25rem; font-size: var(--odint-display-4); }
.home-map-frame__focus p { margin-block: 0.3rem; font-size: 0.8rem; }
.home-map-frame__focus .action { font-size: 0.6875rem; }
.atlas-reticle {
  position: absolute;
  z-index: 5;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border: 1px solid var(--odint-carmine);
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
}
.atlas-reticle::before,
.atlas-reticle::after {
  content: "";
  position: absolute;
  background: var(--odint-carmine);
}
.atlas-reticle::before { inset-inline: -0.5rem; inset-block-start: 50%; block-size: 1px; }
.atlas-reticle::after { inset-block: -0.5rem; inset-inline-start: 50%; inline-size: 1px; }
.atlas-reticle.is-visible { opacity: 1; }
.home-map-frame::before,
.archive-feature__media::before,
.cover__registry::before {
  content: "+";
  position: absolute;
  z-index: 3;
  inset-inline-start: -0.4rem;
  inset-block-start: -0.9rem;
  font-family: var(--odint-font-record);
  font-size: 1.25rem;
}
/* ------------------------------------------------------------------
   CASE FILE STACK
   The homepage used to list the case files as two grey lines of small
   type — the least legible thing on a page about people. A file is a
   physical object here: it carries its reference, the person's name at
   reading size, what they did, and it turns over to black under the
   pointer like every other record row on the site.
   ------------------------------------------------------------------ */
.file-stack { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--odint-space-sm); }
.file-stack__card { border: var(--odint-rule); border-block-start-width: 3px; }
.file-stack__card a {
  display: grid;
  gap: 0.3rem;
  padding: var(--odint-space-sm) var(--odint-space-md) var(--odint-space-md);
  text-decoration: none;
  color: inherit;
  background: var(--odint-white);
  transition: background var(--odint-motion) var(--odint-ease),
              color var(--odint-motion) var(--odint-ease);
}
.file-stack__ref { color: var(--odint-grey); }
.file-stack__name {
  font-family: var(--odint-font-editorial);
  font-size: var(--odint-display-4);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.file-stack__function { font-size: 0.9375rem; line-height: 1.45; }
.file-stack__open {
  margin-block-start: 0.35rem;
  border-block-start: 1px solid var(--odint-line-soft);
  padding-block-start: 0.5rem;
  display: flex;
  justify-content: space-between;
}
.file-stack__open::after { content: "\2192"; }
.file-stack__card a:hover,
.file-stack__card a:focus-visible { background: var(--odint-black); color: var(--odint-white); }
.file-stack__card a:hover .file-stack__ref,
.file-stack__card a:focus-visible .file-stack__ref { color: var(--odint-line-soft); }
.file-stack__card a:hover .file-stack__open,
.file-stack__card a:focus-visible .file-stack__open { border-block-start-color: var(--odint-grey); }
.file-stack__card a:hover .file-stack__name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.14em; }
.file-stack__note { color: var(--odint-grey); margin-block-start: var(--odint-space-sm); line-height: 1.5; }

.compact-ledger { list-style: none; margin: 0; padding: 0; border-block-end: var(--odint-rule); }
.compact-ledger li {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--odint-space-sm);
  border-block-start: var(--odint-rule);
  padding-block: 0.85rem;
  font-family: var(--odint-font-record);
  font-size: 0.75rem;
  text-transform: uppercase;
}
.compact-ledger a { text-decoration: none; }
.compact-ledger small { color: var(--odint-grey); }
.host-name {
  font-family: var(--odint-font-record);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.mission-document {
  background: var(--odint-archive-pale);
  border: var(--odint-rule);
  padding: clamp(1.5rem, 4vw, 3rem);
  margin-block: var(--odint-section-space);
  max-inline-size: 48rem;
}
.mission-document > .record-meta { margin-block-end: var(--odint-space-md); }
.mission-document h2 { margin-block: 0 var(--odint-space-md); }
.mission-document p, .mission-document ol { max-inline-size: 60ch; }
.mission-document ol { padding-inline-start: 1.25rem; }
.mission-document li + li { margin-block-start: 0.4em; }
.mission-creed {
  font-family: var(--odint-font-record);
  font-size: var(--odint-step-ui);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.home-lookup {
  padding-block: var(--odint-section-space);
  border-block: var(--odint-rule-invert);
}
.home-lookup > p:not(.record-meta) {
  max-inline-size: 60ch;
  margin-block-end: var(--odint-space-md);
}
.scene--dark .global-search { border-block: var(--odint-rule-invert); }
.scene--dark .global-search > label { color: var(--odint-white); }
.scene--dark .global-search__field input {
  background: var(--odint-black);
  color: var(--odint-white);
  border: var(--odint-rule-invert);
}
.scene--dark .global-search__field button {
  background: var(--odint-white);
  color: var(--odint-black);
}

.home-actions { background: var(--odint-black); color: var(--odint-white); }
.home-actions__grid { display: grid; }
.home-actions article { padding-block: clamp(3rem, 7vw, 6rem); }
.home-actions article + article { border-block-start: var(--odint-rule-invert); }
.home-actions .record-meta { color: var(--odint-white); }
.home-actions article p:not(.record-meta) { max-inline-size: 52ch; }
.home-actions .masthead__donate { background: var(--odint-white); color: var(--odint-black); }

.archive-feature__copy { align-self: center; }
.archive-feature__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-block: var(--odint-rule-invert);
  margin-block: var(--odint-space-lg);
}
.archive-feature__facts div { padding: 0.65rem; border-inline-start: var(--odint-rule-invert); }
.archive-feature__facts div:first-child { border-inline-start: 0; padding-inline-start: 0; }
.archive-feature__facts dt { font-family: var(--odint-font-record); font-size: 0.625rem; text-transform: uppercase; }
.archive-feature__facts dd { margin: 0.25rem 0 0; font-family: var(--odint-font-record); font-size: 0.75rem; }
.archive-feature__media {
  position: relative;
  min-block-size: clamp(18rem, 40vw, 32rem);
  background: var(--odint-archive-pale);
  border: var(--odint-rule-invert);
  overflow: hidden;
}
.archive-feature__media > img,
.archive-feature__media > svg { position: absolute; inset: 2.5rem 1rem 1rem; inline-size: calc(100% - 2rem); block-size: calc(100% - 3.5rem); object-fit: cover; }
.archive-feature__media > svg { padding: clamp(2rem, 5vw, 5rem); }
.archive-feature__media > .record-meta { position: absolute; z-index: 2; inset-block-start: 0.65rem; inset-inline: 1rem; color: var(--odint-black); }
.archive-feature__annotation {
  position: absolute;
  z-index: 3;
  inset-inline-end: 1rem;
  inset-block-end: 1rem;
  border: 2px solid var(--odint-carmine);
  color: var(--odint-carmine);
  background: var(--odint-white);
  padding: 0.3rem 0.5rem;
  font-family: var(--odint-font-record);
  font-size: 0.6875rem;
  text-transform: uppercase;
}
.archive-tabs {
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  scrollbar-width: none;
  border-block: var(--odint-rule-invert);
  padding-inline: 0;
}
.archive-tabs::-webkit-scrollbar { display: none; }
.archive-tabs > .record-meta {
  display: grid;
  place-items: center;
  min-inline-size: 8rem;
  margin: 0;
  padding-inline: var(--odint-space-sm);
  color: var(--odint-white);
  border-inline: var(--odint-rule-invert);
}
.archive-tabs button {
  flex: 1 0 11rem;
  border: 0;
  border-inline-end: var(--odint-rule-invert);
  background: var(--odint-black);
  color: var(--odint-white);
  padding: 0.9rem 1rem;
  text-align: start;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
}
.archive-tabs button span { margin-inline-end: 1.5rem; font-family: var(--odint-font-record); }
.archive-tabs button[aria-selected="true"] { background: var(--odint-white); color: var(--odint-black); }
.archive-feature__panel {
  display: grid;
  align-items: end;
  gap: var(--odint-space-lg);
  padding-block: clamp(2.25rem, 5vw, 4.5rem);
}
.archive-feature__panel[hidden] { display: none; }
/* The feature's photographs develop under the pointer like every other
   evidence frame on the site; its plates sweep. Neither carries the
   homepage's loupe — one square, on one record, means something. */
.archive-feature__media > img {
  filter: grayscale(1) contrast(1.12);
  transition: filter var(--odint-motion-scene) var(--odint-ease);
}
.archive-feature__media:hover > img { filter: none; }
@media (hover: none) {
  .archive-feature__media > img { filter: none; }
}
.archive-feature__media--plate {
  background: var(--odint-white);
  display: grid;
  place-items: center;
  padding: clamp(2.5rem, 5vw, 3.5rem) clamp(1rem, 3vw, 2rem) clamp(1rem, 3vw, 2rem);
}
.archive-feature__media--plate > .plate {
  position: static;
  inset: auto;
  inline-size: auto;
  block-size: 100%;
  max-inline-size: min(100%, 27rem);
  aspect-ratio: 1;
  padding: 0;
}
/* Physical insets on purpose. Logical inset properties resolve in the
   ELEMENT's own writing mode, and this tab is `vertical-rl` — so
   `inset-block-start` meant "from the right edge" and `inset-inline-end`
   meant "from the bottom", which parked the file tab at the bottom
   centre of the evidence field instead of on its right edge. */
.archive-feature__file-tab {
  position: absolute;
  z-index: 4;
  right: 0;
  top: 42%;
  padding: 0.7rem 0.35rem;
  background: var(--odint-carmine);
  color: var(--odint-white);
  font-family: var(--odint-font-record);
  writing-mode: vertical-rl;
}

.record { position: relative; counter-reset: record-section; }
.record-edge-tab {
  display: none;
  position: absolute;
  z-index: 12;
  inset-inline-end: 0;
  inset-block-start: 6rem;
  writing-mode: vertical-rl;
  margin: 0;
  padding: 0.75rem 0.45rem;
  background: var(--odint-carmine);
  color: var(--odint-white);
  font-family: var(--odint-font-record);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
}
.cover__registry {
  position: absolute;
  z-index: 3;
  inset-block-start: 0;
  inset-inline: 0;
  margin: 0;
  padding: 0.55rem var(--odint-space-sm);
  background: var(--odint-white);
  color: var(--odint-black);
  border-block-end: var(--odint-rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--odint-space-xs) var(--odint-space-sm);
  flex-wrap: wrap;
}
/* What the field does, not a control to press. The colour and the
   crosshair answer to the pointer now, so the registry line says so and
   stops asking the reader to operate a toggle. */
.cover__registry-hint,
.evidence-register .cover__registry-hint { color: var(--odint-grey); }
@media (hover: none) {
  .cover__registry-hint { display: none; }
}
.record .cover__image-field > img,
.record .cover__image-field > svg { padding-block-start: 2rem; }
.record .cover h1 { font-size: clamp(2.5rem, 4.5vw, 4.25rem); text-transform: uppercase; }
.record .cover__image-field > img,
.record__body img {
  filter: grayscale(1) contrast(1.08);
  transition: filter var(--odint-motion-scene) var(--odint-ease);
}
.record .cover__image-field:hover > img,
.record .cover__image-field:focus-within > img,
.record__body img:hover { filter: none; }
.record__body img {
  inline-size: auto;
  max-inline-size: 100%;
  max-block-size: min(78vh, 50rem);
  margin: clamp(2rem, 5vw, 4rem) auto;
  object-fit: contain;
  border: var(--odint-rule);
}
.record__body figure,
.record__body .image-container {
  margin: clamp(2rem, 5vw, 4rem) auto;
  text-align: center;
}
.record__body figure img,
.record__body .image-container img { margin-block: 0; }
.record__body td img {
  max-block-size: 16rem;
  margin: 0 auto;
}
.record-vitals {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-block: 0;
  border-block-end: var(--odint-rule);
}
.record-vitals div { padding: 0.85rem; border-inline-start: var(--odint-rule); }
.record-vitals div:first-child { border-inline-start: 0; padding-inline-start: 0; }
.record-vitals dd { font-size: 0.8125rem; text-transform: uppercase; }
.record__body > h2 {
  counter-increment: record-section;
  position: relative;
  border-block-start: var(--odint-rule);
  padding-block-start: var(--odint-space-md);
  margin-block-start: var(--odint-space-lg);
}
.record__body > h2::before {
  content: "SECTION " counter(record-section, decimal-leading-zero);
  display: block;
  margin-block-end: var(--odint-space-xs);
  font-family: var(--odint-font-record);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--odint-carmine);
}

.atlas-stage__map { position: relative; overflow: hidden; }
.atlas-stage__tools {
  position: absolute;
  z-index: 4;
  inset-inline-start: var(--odint-space-sm);
  inset-block-start: var(--odint-space-sm);
  display: grid;
}
.atlas-stage__tools button { inline-size: 2.25rem; block-size: 2.25rem; padding: 0; justify-content: center; background: var(--odint-white); }
.atlas-stage__tools button + button { border-block-start: 0; }
.atlas-stage__canvas {
  transition: transform var(--odint-motion-scene) var(--odint-ease);
  transform-origin: center;
}
.atlas-stage__coordinates {
  position: absolute;
  inset-inline-end: var(--odint-space-sm);
  inset-block-end: var(--odint-space-sm);
  margin: 0;
  padding: 0.25rem 0.4rem;
  background: var(--odint-black);
  color: var(--odint-white);
}

/* ==================================================================
   13. EXPLORATION AND READING LAYERS
   JavaScript progressively activates these controls. With scripts off,
   every row, map destination and section remains present in document order.
   ================================================================== */

.archive-intro {
  padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(2rem, 4vw, 3.5rem);
  display: grid;
  gap: var(--odint-space-sm);
}
.archive-intro h1 {
  font-size: var(--odint-display-1);
  max-inline-size: 15ch;
}

/* ------------------------------------------------------------------
   INKED TITLE
   The three archive doors — Investigations, Atlas, Case Files — open
   under a carmine stroke laid across the name, the way a censor's
   marker crosses a page. It is the subject of the archive stated as a
   mark: these are records somebody tried to keep closed.

   The stroke is a torn shape, not a rule and not a wash — a clipped
   polygon with ragged edges, no gradient, no blur, no rounding. It sits
   BEHIND the type and rides the baseline, grazing the feet of the
   letters the way the homepage title's marked underline does. Carmine
   under black type is 2.1:1, so a band deep enough to cross the
   letterforms would turn the title into a picture of a word.

   Deliberately not applied to record titles or the homepage hero. A
   mark used everywhere is a texture; used on three doors it is a sign.
   ------------------------------------------------------------------ */
.archive-intro h1,
.casefiles-cover h1 {
  position: relative;
  isolation: isolate;
  inline-size: fit-content;
}
.archive-intro h1::before,
.casefiles-cover h1::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-inline: 0.02em -0.02em;
  inset-block-start: 0.695em;
  block-size: 0.2em;
  background: var(--odint-carmine);
  rotate: -0.5deg;
  /* A loaded brush, not a bar: thin where it lands, fullest just past
     the middle, lifting off at the end. The envelope is a sine taper so
     the ends come to a point instead of stopping square, and the wobble
     riding on it is the bristle texture. Sixty points, because at a
     fifth of an em a coarse polygon reads as a printed lozenge.

     It hugs the type — a hair inside the first letter, a hair past the
     last — so it underlines the word rather than hanging off it. */
  clip-path: polygon(
    0% 50%, 3.333% 37.3%, 6.667% 31.6%, 10% 24.8%, 13.33% 22%,
    16.67% 17.8%, 20% 14%, 23.33% 14.8%, 26.67% 10.1%, 30% 8.5%,
    33.33% 5.4%, 36.67% 6.5%, 40% 5.7%, 43.33% 2.7%, 46.67% 6.2%,
    50% 2.6%, 53.33% 6.2%, 56.67% 2.9%, 60% 5.7%, 63.33% 7.9%,
    66.67% 7.2%, 70% 8.6%, 73.33% 10.8%, 76.67% 13%, 80% 17.5%,
    83.33% 17.6%, 86.67% 22.5%, 90% 25.2%, 93.33% 31.5%,
    96.67% 37.1%, 100% 50%, 96.67% 63.1%, 93.33% 69.6%,
    90% 74.3%, 86.67% 76.7%, 83.33% 79.6%, 80% 84.3%, 76.67% 85.3%,
    73.33% 90.2%, 70% 89.4%, 66.67% 93.3%, 63.33% 92.6%, 60% 97.4%,
    56.67% 94.5%, 53.33% 98.3%, 50% 97.6%, 46.67% 96.7%,
    43.33% 97.8%, 40% 92.3%, 36.67% 96%, 33.33% 93.8%, 30% 92.4%,
    26.67% 87.7%, 23.33% 84.9%, 20% 84.9%, 16.67% 81.3%,
    13.33% 77.7%, 10% 73.3%, 6.667% 69.4%, 3.333% 63.3%
  );
}
/* The mark is a stroke of ink, not information. A reader who has asked
   for less motion still sees it; a reader who cannot see it loses
   nothing, because the title says everything the mark does. */
@media (prefers-contrast: more) {
  .archive-intro h1::before,
  .casefiles-cover h1::before { display: none; }
}
.archive-intro__dek {
  font-family: var(--odint-font-editorial);
  font-size: var(--odint-step-lede);
  line-height: 1.42;
  max-inline-size: 58ch;
}
.archive-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: var(--odint-space-md) 0 0;
  border-block: var(--odint-rule);
}
.archive-stats div {
  padding: var(--odint-space-sm) clamp(0.5rem, 2vw, 1.5rem);
  border-inline-start: var(--odint-rule);
}
.archive-stats div:first-child { border-inline-start: 0; padding-inline-start: 0; }
.archive-stats dt {
  font-family: var(--odint-font-record);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.archive-stats dd {
  font-family: var(--odint-font-editorial);
  font-size: var(--odint-display-3);
  line-height: 1;
  margin: 0.25rem 0 0;
}

.archive-feature { padding-block: clamp(2.75rem, 6vw, 5.5rem); }
.archive-feature__inner {
  display: grid;
  align-items: end;
  gap: var(--odint-space-lg);
}
.archive-feature__inner h2 { font-size: var(--odint-display-2); max-inline-size: 22ch; }
.archive-feature__inner p:not(.record-meta) { max-inline-size: 62ch; }
.archive-feature .record-meta { color: var(--odint-white); }
.action--invert { color: var(--odint-white); }

.explorer, .atlas-explorer, .search-workspace {
  padding-block: clamp(2.5rem, 5vw, 5rem);
}
.atlas-explorer { padding-block: clamp(1.75rem, 3vw, 3rem) clamp(3rem, 6vw, 6rem); }
.atlas-explorer .explorer__controls { margin-block-end: var(--odint-space-md); }
.explorer__heading {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--odint-space-md);
  margin-block-end: var(--odint-space-md);
}
.explorer__heading h2 { font-size: var(--odint-display-2); }
.explorer__count { font-family: var(--odint-font-record); text-transform: uppercase; }
.explorer__count strong { font-family: var(--odint-font-editorial); font-size: 1.75rem; }

.explorer__controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--odint-space-sm);
  padding-block: var(--odint-space-md);
  border-block: var(--odint-rule);
  background: var(--odint-white);
  margin-block-end: var(--odint-space-lg);
}
.explorer__controls label {
  display: grid;
  align-content: end;
  gap: var(--odint-space-xs);
  font-family: var(--odint-font-record);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.explorer__search { grid-column: 1 / -1; }
.explorer__reset { align-self: end; justify-content: center; }
.explorer__empty {
  border-block: var(--odint-rule);
  padding-block: var(--odint-space-lg);
  font-family: var(--odint-font-editorial);
  font-size: var(--odint-display-4);
}
.explorer__more { margin-block-start: var(--odint-space-lg); }
[data-result][hidden] { display: none !important; }

.status--published::before,
.status--in-progress::before,
.status--review::before {
  content: "";
  inline-size: 0.5rem;
  block-size: 0.5rem;
  flex: none;
  border: 1px solid currentcolor;
}
.status--published::before { background: currentcolor; }
.status--in-progress::before { background: transparent; }
.status--review { border-inline-start: 2px solid var(--odint-carmine); }
.status--review::before { border-color: var(--odint-carmine); background: var(--odint-carmine); }
.ruled-index__place .status + .status { margin-block-start: 0.35rem; }

.atlas-stage {
  display: grid;
  border: var(--odint-rule);
  margin-block-end: var(--odint-space-lg);
}
.atlas-stage__map {
  background: var(--odint-white);
  padding: clamp(0.5rem, 2vw, 1.5rem);
}
.atlas-stage__focus {
  background: var(--odint-black);
  color: var(--odint-white);
  border-block-start: var(--odint-rule);
  padding: clamp(1.25rem, 3vw, 2rem);
  min-block-size: 10rem;
}
.atlas-stage__focus .record-meta { color: var(--odint-white); }
.atlas-stage__focus a { color: var(--odint-white); }

.reading-progress {
  position: fixed;
  z-index: 35;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 3px;
  pointer-events: none;
}
.reading-progress span {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  background: var(--odint-carmine);
  transform: scaleX(0);
  transform-origin: left center;
}
.record-layout {
  display: grid;
  /* minmax(0, 1fr), never auto. An auto track sizes to min-content, and
     the migrated bodies contain blocks that refuse to shrink — a
     negative-margin stat strip, a wide table, an unbreakable URL. On a
     390px phone that grew this column to 590px, pushed the prose off
     the right edge, and body{overflow-x:clip} swallowed it: the text
     was rendered, just permanently out of reach. */
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: clamp(2rem, 5vw, 5rem);
}
.record-layout .record__body {
  margin-inline: 0;
  inline-size: 100%;
  min-inline-size: 0;
  padding-block: clamp(3rem, 5vw, 5rem);
}
.record__body p { line-height: 1.72; }
.record__body p + p { margin-block-start: 1.15em; }
.record__body h3 { margin-block: 2.1em 0.65em; }
.record__body h4 { margin-block: 1.75em 0.55em; }
.record__body :where(ul, ol) { line-height: 1.65; }
.record__body :where(li + li) { margin-block-start: 0.45em; }

.institutional-cover {
  padding-block: clamp(3rem, 6vw, 5.5rem) clamp(2.5rem, 5vw, 4.5rem);
  border-block-end: var(--odint-rule);
  display: grid;
  gap: var(--odint-space-sm);
}
.institutional-cover h1 {
  font-size: var(--odint-display-1);
  max-inline-size: 16ch;
  margin: 0;
}
.institutional-cover__dek {
  max-inline-size: 58ch;
  margin: 0;
  font-family: var(--odint-font-editorial);
  font-size: var(--odint-step-lede);
  line-height: 1.45;
}
.institutional-copy > .page-header {
  border-block-start: var(--odint-rule);
  border-block-end: var(--odint-rule);
  padding-block: var(--odint-space-md);
  margin-block-end: var(--odint-space-lg);
}
.institutional-copy > .page-header h2 { display: none; }
.institutional-copy > .page-header p {
  margin: 0;
  font-family: var(--odint-font-editorial);
  font-size: var(--odint-step-lede);
  line-height: 1.45;
}
.institutional-copy .team-grid { display: grid; gap: var(--odint-space-lg); }
.institutional-copy .team-card {
  border-block-start: var(--odint-rule);
  padding-block-start: var(--odint-space-md);
}
.institutional-copy .team-card h3 { margin-block-start: 0; }
.institutional-copy .team-role {
  font-family: var(--odint-font-record);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--odint-carmine);
  margin-block-end: var(--odint-space-sm);
}
.institutional-copy :where(input, textarea, select) { inline-size: 100%; }
.institutional-copy textarea { min-block-size: 10rem; resize: vertical; }
.institutional-copy form {
  border-block: var(--odint-rule);
  padding-block: var(--odint-space-lg);
  margin-block: var(--odint-space-lg);
}

/* Each institutional document has its own archive grammar. The reading
   column remains identical; only the cover instrument and section markers
   change, so visual identity never competes with the text. */
.institutional-cover__heading { display: grid; gap: var(--odint-space-sm); }
.institutional-signature {
  min-block-size: 13rem;
  border: var(--odint-rule);
  font-family: var(--odint-font-record);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.signature-roster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: var(--odint-archive-pale); }
.signature-roster span { display: grid; align-items: end; padding: var(--odint-space-sm); border-inline-start: var(--odint-rule); border-block-start: var(--odint-rule); }
.signature-roster span:nth-child(odd) { border-inline-start: 0; }
.signature-roster span:nth-child(-n+2) { border-block-start: 0; }
.signature-roster span::before { content: "+"; align-self: start; font-size: 1.25rem; }

.institutional-page--contact .institutional-cover { background: var(--odint-black); color: var(--odint-white); }
.institutional-page--contact .institutional-cover .record-meta { color: var(--odint-white); }
.signature-router { display: grid; grid-template-columns: auto minmax(2rem, 1fr) auto; align-content: center; gap: 1rem; padding: var(--odint-space-md); border-color: var(--odint-white); }
.signature-router i { align-self: center; border-block-start: 1px solid var(--odint-carmine); position: relative; }
.signature-router i::after { content: ""; position: absolute; inset-inline-end: 0; inset-block-start: -0.22rem; inline-size: 0.4rem; block-size: 0.4rem; border: 1px solid var(--odint-carmine); background: var(--odint-black); }
.institutional-page--contact .primary-contact {
  margin-block: var(--odint-space-lg);
  padding: var(--odint-space-lg);
  background: var(--odint-black);
  color: var(--odint-white);
  border-block-start: 4px solid var(--odint-carmine);
}
.institutional-page--contact .primary-contact a { color: var(--odint-white); font-family: var(--odint-font-record); }
.institutional-page--contact .secure-channels { display: grid; border-block-end: var(--odint-rule); }
.institutional-page--contact .channel,
.institutional-page--contact .contact-card { border-block-start: var(--odint-rule); padding-block: var(--odint-space-md); }

.signature-flow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.signature-flow span { padding: var(--odint-space-sm); border-inline-start: var(--odint-rule); border-block-start: var(--odint-rule); color: var(--odint-grey); }
.signature-flow span:nth-child(odd) { border-inline-start: 0; }
.signature-flow span:nth-child(-n+2) { border-block-start: 0; }
.signature-flow strong { display: block; margin-block-start: 1.75rem; color: var(--odint-black); font-family: var(--odint-font-editorial); font-size: 1.1rem; text-transform: none; }
.institutional-page--privacy .institutional-copy .content { counter-reset: privacy-section; }
.institutional-page--privacy .institutional-copy .content > h2 { counter-increment: privacy-section; }
.institutional-page--privacy .institutional-copy .content > h2::before { content: "P." counter(privacy-section, decimal-leading-zero); display: block; font-family: var(--odint-font-record); font-size: 0.6875rem; color: var(--odint-carmine); }
.institutional-page--privacy .last-updated { border: var(--odint-rule); padding: var(--odint-space-sm); font-family: var(--odint-font-record); }

.institutional-page--terms .institutional-cover { background: var(--odint-archive-pale); }
.signature-folio { display: grid; grid-template-columns: minmax(7rem, 0.6fr) minmax(0, 1fr); }
.signature-folio span { padding: var(--odint-space-sm); border-inline-start: var(--odint-rule); border-block-start: var(--odint-rule); }
.signature-folio span:nth-child(odd) { border-inline-start: 0; }
.signature-folio span:nth-child(-n+2) { border-block-start: 0; }
.signature-folio__number { grid-row: span 2; display: grid; place-items: center; font-family: var(--odint-font-editorial); font-size: clamp(3rem, 8vw, 6rem); }
.institutional-page--terms .institutional-copy .content { border-inline-start: var(--odint-rule); padding-inline-start: clamp(1rem, 3vw, 2rem); }
.institutional-page--terms .last-updated { display: inline-block; border: 2px solid var(--odint-carmine); color: var(--odint-carmine); padding: 0.35rem 0.6rem; transform: rotate(-1deg); font-family: var(--odint-font-record); }

.institutional-page--ethics .institutional-cover { background: var(--odint-black); color: var(--odint-white); }
.institutional-page--ethics .institutional-cover .record-meta { color: var(--odint-white); }
.signature-compass { position: relative; display: grid; grid-template-columns: repeat(2, 1fr); border-color: var(--odint-white); }
.signature-compass span { display: grid; place-items: center; padding: var(--odint-space-md); text-align: center; border-inline-start: var(--odint-rule-invert); border-block-start: var(--odint-rule-invert); }
.signature-compass span:nth-child(odd) { border-inline-start: 0; }
.signature-compass span:nth-child(-n+2) { border-block-start: 0; }
.signature-compass i { position: absolute; inset: 50% auto auto 50%; inline-size: 3.25rem; block-size: 3.25rem; border: 2px solid var(--odint-carmine); transform: translate(-50%, -50%) rotate(45deg); }
.institutional-page--ethics .principle-box { margin-block: var(--odint-space-lg); padding: var(--odint-space-lg); background: var(--odint-black); color: var(--odint-white); border-block-start: 4px solid var(--odint-carmine); }
.institutional-page--ethics .ethics-card { border-block-start: var(--odint-rule); padding-block: var(--odint-space-md); }

.institutional-page--team .institutional-copy .team-grid { counter-reset: team-member; }
.institutional-page--team .institutional-copy .team-card { counter-increment: team-member; position: relative; padding-inline-start: clamp(2.75rem, 7vw, 4.5rem); }
.institutional-page--team .institutional-copy .team-card::before { content: counter(team-member, decimal-leading-zero); position: absolute; inset-inline-start: 0; inset-block-start: var(--odint-space-md); font-family: var(--odint-font-record); color: var(--odint-carmine); }
.institutional-page--team .join-cta { margin-block-start: var(--odint-space-lg); padding: var(--odint-space-lg); border: var(--odint-rule); background: var(--odint-archive-pale); }

.casefiles-cover {
  display: grid;
  gap: var(--odint-space-lg);
  padding-block: clamp(2.75rem, 5vw, 4.5rem);
  border-block-end: var(--odint-rule);
}
.casefiles-cover__copy { align-self: end; }
.casefiles-cover h1 { font-size: var(--odint-display-1); margin-block: 0.15em; }
.casefiles-cover__index { position: relative; min-block-size: 13rem; display: grid; align-content: space-between; border: var(--odint-rule); padding: var(--odint-space-md); background: var(--odint-archive-pale); overflow: hidden; }
.casefiles-cover__index strong { font-family: var(--odint-font-editorial); font-size: clamp(3.5rem, 8vw, 6rem); line-height: 0.8; }
.casefiles-cover__index i { position: absolute; inset-inline-end: -0.1em; inset-block-end: -0.35em; font-family: var(--odint-font-editorial); font-size: 8rem; font-style: normal; color: var(--odint-line-soft); }
.casefiles-desk { display: grid; grid-template-columns: 2rem minmax(0, 1fr); padding-block: clamp(2rem, 4vw, 3.5rem); }
.casefiles-desk__rail { display: flex; justify-content: space-between; writing-mode: vertical-rl; border-inline-end: var(--odint-rule); padding-inline-end: 0.35rem; font-family: var(--odint-font-record); font-size: 0.625rem; }
.casefiles-register { align-self: start; }
.casefiles-desk__note { grid-column: 2; margin-block-start: var(--odint-space-lg); padding: var(--odint-space-md); border: var(--odint-rule); background: var(--odint-archive-pale); }
.casefiles-desk__note p:not(.record-meta) { max-inline-size: 42ch; }

.case-file-cover {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  border-block-end: var(--odint-rule);
  padding-inline: 0;
}
.case-file-cover__rail { grid-row: 1 / span 3; display: flex; justify-content: space-between; writing-mode: vertical-rl; padding: var(--odint-space-sm) 0.35rem; border-inline-end: var(--odint-rule); font-family: var(--odint-font-record); font-size: 0.625rem; }
.case-file-cover__copy { padding: clamp(2rem, 5vw, 4rem) var(--odint-page-gutter); }
.case-file-cover h1 { font-size: clamp(2.5rem, 5vw, 4.5rem); margin-block: 0.15em; max-inline-size: 16ch; }
.case-file-cover__register { margin-block-start: var(--odint-space-lg); border-block: var(--odint-rule); }
.case-file-cover__register div { display: grid; grid-template-columns: minmax(8rem, 0.4fr) 1fr; gap: var(--odint-space-sm); padding-block: 0.55rem; border-block-start: 1px solid var(--odint-line-soft); }
.case-file-cover__register div:first-child { border-block-start: 0; }
.case-file-cover__register dt { font-family: var(--odint-font-record); font-size: 0.6875rem; text-transform: uppercase; }
.case-file-cover__register dd { margin: 0; }
.case-file-cover__mark { position: relative; min-block-size: 14rem; display: grid; place-items: center; background: var(--odint-black); color: var(--odint-white); overflow: hidden; }
.case-file-cover__mark span { position: absolute; inset-inline-start: 1rem; inset-block-start: 1rem; font-family: var(--odint-font-record); }
.case-file-cover__mark strong { font-family: var(--odint-font-editorial); font-size: clamp(5rem, 16vw, 11rem); line-height: 0.8; }
.case-file-cover__mark i { position: absolute; inline-size: 5rem; block-size: 5rem; border: 2px solid var(--odint-carmine); transform: rotate(12deg); }
.case-file__caveat { grid-column: 2; margin: 0; padding: var(--odint-space-md) var(--odint-page-gutter); border-block-start: var(--odint-rule); font-family: var(--odint-font-editorial); font-size: var(--odint-step-lede); }
.case-file__body .page-hero,
.case-file__body .page-header,
.case-file__body .profile-card > h2 { display: none; }
.case-file__body .poster-hero { margin-block: var(--odint-space-lg); padding: var(--odint-space-md); border: var(--odint-rule); background: var(--odint-archive-pale); }
.case-file__body .poster-hero iframe { inline-size: 100%; min-block-size: min(78vh, 44rem); border: var(--odint-rule); background: var(--odint-white); }
.case-file__body .profile-meta { display: grid; border-block-end: var(--odint-rule); }
.case-file__body .meta-item { border-block-start: var(--odint-rule); padding-block: var(--odint-space-md); }
.case-file__body .meta-item label { font-family: var(--odint-font-record); font-size: 0.6875rem; text-transform: uppercase; }
.case-file__body .alert-box { margin-block: var(--odint-space-lg); padding: var(--odint-space-lg); background: var(--odint-black); color: var(--odint-white); border-block-start: 4px solid var(--odint-carmine); }
.case-file__body .profile-section { border-block-start: var(--odint-rule); margin-block-start: var(--odint-space-lg); padding-block-start: var(--odint-space-md); }
.record-navigator {
  display: none;
  border-block-start: var(--odint-rule);
  padding-block-start: var(--odint-space-sm);
}
.record-navigator nav { display: grid; }
.record-navigator nav:empty { display: none; }
.record-navigator a {
  border-block-start: 1px solid var(--odint-line-soft);
  padding-block: 0.55rem;
  font-size: 0.8125rem;
  text-decoration: none;
}
.record-navigator a:first-child { border-block-start: 0; }
.record-navigator a[data-level="3"] { padding-inline-start: 1rem; }
.record-navigator a[aria-current="true"] {
  border-inline-start: 3px solid var(--odint-carmine);
  padding-inline-start: 0.5rem;
  font-weight: 700;
}

.global-search { border-block: var(--odint-rule); padding-block: var(--odint-space-md); }
.global-search > label {
  display: block;
  font-family: var(--odint-font-record);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-block-end: var(--odint-space-xs);
}
.global-search__field { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.global-search__field input { min-block-size: 3.5rem; border-inline-end: 0; }
.global-search__field button { background: var(--odint-black); color: var(--odint-white); }
.search-workspace__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--odint-space-md);
  padding-block: var(--odint-space-md);
}
.search-workspace__meta label { font-family: var(--odint-font-record); font-size: 0.75rem; text-transform: uppercase; }
.search-workspace__meta select { inline-size: auto; margin-inline-start: var(--odint-space-xs); }

.about-mission { padding-block: var(--odint-section-space); }
.about-mission > p:not(.record-meta) { font-family: var(--odint-font-editorial); font-size: var(--odint-step-lede); max-inline-size: 60ch; }
.about-pillars {
  display: grid;
  margin-block-start: var(--odint-space-lg);
  border-block: var(--odint-rule-invert);
}
.about-pillars section { padding-block: var(--odint-space-md); border-block-start: var(--odint-rule-invert); }
.about-pillars section:first-child { border-block-start: 0; }
.about-pillars .record-meta { color: var(--odint-white); }
.about-pillars--light { border-block-color: var(--odint-black); }
.about-pillars--light section { border-block-start-color: var(--odint-black); }
.about-pillars--light .record-meta { color: var(--odint-black); }
.about-principles {
  padding-block: var(--odint-section-space);
  display: grid;
  gap: var(--odint-space-lg);
}
.about-principles > div p:last-child { max-inline-size: 55ch; }
.about-principles ul { margin: 0; padding: 0; list-style: none; border-block-end: var(--odint-rule); }
.about-principles li { border-block-start: var(--odint-rule); padding-block: var(--odint-space-sm); }
.about-legal { padding-block-end: var(--odint-section-space); }
.ledger-list { border-block-end: var(--odint-rule); }
.ledger-list div { display: grid; gap: var(--odint-space-xs); border-block-start: var(--odint-rule); padding-block: var(--odint-space-sm); }
.ledger-list dt { font-family: var(--odint-font-record); font-size: 0.75rem; text-transform: uppercase; }
.ledger-list dd { margin: 0; }

@media (min-width: 48rem) {
  .archive-feature__inner,
  .archive-feature__panel { grid-template-columns: minmax(0, 0.9fr) minmax(20rem, 1.1fr); }
  .explorer__controls { grid-template-columns: minmax(16rem, 2fr) repeat(3, minmax(8rem, 1fr)) auto; }
  .explorer__controls--atlas { grid-template-columns: minmax(16rem, 2fr) repeat(2, minmax(8rem, 1fr)) auto; }
  .explorer__search { grid-column: auto; }
  .atlas-stage { grid-template-columns: minmax(0, 3fr) minmax(14rem, 1fr); }
  .atlas-stage__focus { border-block-start: 0; border-inline-start: var(--odint-rule); }
  .about-pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-pillars section { padding: var(--odint-space-md); border-inline-start: var(--odint-rule-invert); }
  .about-pillars section:nth-child(odd) { border-inline-start: 0; }
  .about-pillars--light section { border-inline-start-color: var(--odint-black); }
  .about-principles { grid-template-columns: minmax(0, 1fr) minmax(20rem, 1fr); }
  .about-principles .about-pillars--light { grid-column: 1 / -1; }
  .ledger-list div { grid-template-columns: minmax(11rem, 0.45fr) minmax(0, 1fr); }
  .record-vitals { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .home-field { grid-template-columns: minmax(0, 1.65fr) minmax(18rem, 0.85fr); }
  .home-actions__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-actions article { padding-inline: var(--odint-space-lg); }
  .home-actions article:first-child { padding-inline-start: 0; }
  .home-actions article + article { border-block-start: 0; border-inline-start: var(--odint-rule-invert); }
  .institutional-cover { grid-template-columns: minmax(0, 0.9fr) minmax(22rem, 1.1fr); align-items: stretch; }
  .institutional-cover__heading { align-self: end; }
  .institutional-page--contact .secure-channels { grid-template-columns: repeat(2, minmax(0, 1fr)); border-inline-start: var(--odint-rule); }
  .institutional-page--contact .channel { padding: var(--odint-space-md); border-inline-end: var(--odint-rule); }
  .casefiles-cover { grid-template-columns: minmax(0, 1.2fr) minmax(17rem, 0.8fr); align-items: stretch; }
  .casefiles-desk { grid-template-columns: 2rem minmax(0, 1fr) minmax(15rem, 0.42fr); column-gap: var(--odint-space-lg); }
  .casefiles-desk__note { grid-column: 3; margin-block-start: 0; align-self: start; }
  .case-file-cover { grid-template-columns: 2rem minmax(0, 1.2fr) minmax(17rem, 0.7fr); }
  .case-file-cover__copy { grid-column: 2; grid-row: 1; }
  .case-file-cover__mark { grid-column: 3; grid-row: 1; }
  .case-file__caveat { grid-column: 2 / -1; }
  .case-file__body .profile-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); border-inline-start: var(--odint-rule); }
  .case-file__body .meta-item { padding: var(--odint-space-md); border-inline-end: var(--odint-rule); }
}

@media (min-width: 62rem) {
  .dossier-hero {
    grid-template-columns: 2.25rem minmax(20rem, 0.8fr) minmax(0, 1.55fr);
    min-block-size: clamp(34rem, 65vh, 42rem);
  }
  .dossier-hero__rail { grid-row: 1; }
  .dossier-hero__brief { grid-column: 2; grid-row: 1; border-block-end: 0; border-inline-end: var(--odint-rule); }
  .dossier-hero__evidence {
    grid-column: 3;
    grid-row: 1;
    display: flex;
    flex-direction: column;
  }
  .dossier-media { flex: 1; min-block-size: 0; }
  .dossier-slip {
    position: absolute;
    inset-inline-end: clamp(1rem, 2.5vw, 2rem);
    inset-block-end: clamp(1rem, 2.5vw, 2rem);
    inline-size: min(38%, 17rem);
    margin: 0;
    transform: rotate(-0.6deg);
  }
  .record-edge-tab { display: block; }
  .archive-intro {
    grid-template-columns: minmax(0, 0.95fr) minmax(24rem, 1.05fr);
    column-gap: clamp(3rem, 8vw, 8rem);
    align-items: end;
  }
  .archive-intro > .record-meta { grid-column: 1; }
  .archive-intro > h1 { grid-column: 1; }
  .archive-intro > .archive-intro__dek { grid-column: 2; grid-row: 1 / span 2; align-self: end; }
  .archive-intro > .archive-stats { grid-column: 1 / -1; }
}

@media (min-width: 68rem) {
  .explorer__controls {
    position: sticky;
    inset-block-start: var(--odint-masthead-height);
    z-index: 20;
  }
  .record-layout { grid-template-columns: 15rem minmax(0, var(--odint-reading-width)); justify-content: center; }
  .record-navigator { display: block; position: sticky; inset-block-start: calc(var(--odint-masthead-height) + 2rem); margin-block-start: var(--odint-section-space); }
}

@media (max-width: 32rem) {
  .masthead > .shell { column-gap: 0.65rem; }
  .masthead__lockup img { inline-size: 6.5rem; }
  .masthead__search { font-size: 0.6875rem; }
  .masthead__donate { padding-inline: 0.75rem; }
  .masthead__nav { margin-inline: 0; padding-inline: 0; inline-size: 100%; }
  .dossier-hero__brief h1 { font-size: clamp(2.35rem, 11.5vw, 2.8rem); max-inline-size: 100%; }
  .dossier-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dossier-meta div:nth-child(3) {
    grid-column: 1 / -1;
    border-inline-start: 0;
    border-block-start: var(--odint-rule);
    padding-inline-start: 0;
  }
  .home-map-frame__focus {
    position: relative;
    inset: auto;
    inline-size: 100%;
    min-block-size: 0;
    margin-block-start: var(--odint-space-sm);
  }
  .home-map-frame__grid { inset-block-end: 9rem; }
  .archive-tabs > .record-meta { min-inline-size: 6.5rem; }
  .archive-tabs button { flex-basis: 9.5rem; }
  .case-file-cover__register div { grid-template-columns: 1fr; }
  .casefiles-desk { grid-template-columns: 1fr; }
  .casefiles-desk__rail {
    writing-mode: horizontal-tb;
    border-inline-end: 0;
    border-block-end: var(--odint-rule);
    padding: 0 0 var(--odint-space-xs);
  }
  .casefiles-register,
  .casefiles-desk__note { grid-column: 1; }
  .archive-stats { grid-template-columns: 1fr; }
  .archive-stats div, .archive-stats div:first-child { border-inline-start: 0; border-block-start: var(--odint-rule); padding-inline: 0; }
  .archive-stats div:first-child { border-block-start: 0; }
  .global-search__field { grid-template-columns: 1fr; }
  .global-search__field input { border-inline-end: var(--odint-rule); border-block-end: 0; }
}

/* ==================================================================
   13b. SUPPORT
   The recovered donation page arrived as one undifferentiated block of
   prose in a bare <div>, and its only control pointed at `#donate` — an
   anchor the v1 JavaScript modal used to intercept and the static page
   never had. There was, in practice, no way to give.

   So the page is built as a case rather than a leaflet: the standing
   charitable facts a donor checks first, the argument on a black plate,
   what the money buys, then a register of the five real destinations
   read out of js/donate-modal.js. Not one word of the recovered copy
   is rewritten; only its structure and its dead link change.
   ================================================================== */

.support-cover {
  border-block-end: var(--odint-rule);
  padding-block: clamp(3rem, 7vw, 6rem) clamp(2rem, 4vw, 3.5rem);
}
.support-cover__kicker { color: var(--odint-grey); }
.support-cover h1 {
  font-size: var(--odint-display-1);
  line-height: var(--odint-display-leading);
  letter-spacing: var(--odint-display-tracking);
  margin-block: 0.35em 0;
  max-inline-size: 18ch;
}
.support-cover__lead {
  font-family: var(--odint-font-editorial);
  font-size: var(--odint-step-lede);
  line-height: 1.42;
  max-inline-size: 46ch;
  margin-block-start: var(--odint-space-md);
}
.support-cover__lead .page-header { margin: 0; }
.support-cover__lead p { margin: 0; }
.support-cover__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--odint-space-md);
  margin-block: var(--odint-space-lg) 0;
}
/* The standing record: what a donor verifies before giving anything.
   Ruled columns, monospace, no invention — every value is stated in the
   recovered page or in the charity's own filing. */
.support-standing {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  border-block-start: var(--odint-rule);
  margin-block: var(--odint-space-lg) 0;
}
.support-standing div {
  border-inline-start: 1px solid var(--odint-line-soft);
  padding: var(--odint-space-sm) var(--odint-space-sm) 0;
}
.support-standing div:first-child { border-inline-start: 0; padding-inline-start: 0; }
.support-standing dt {
  font-family: var(--odint-font-record);
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--odint-grey);
}
.support-standing dd {
  margin: 0.3rem 0 0;
  font-family: var(--odint-font-record);
  font-size: 0.875rem;
  overflow-wrap: anywhere;
}

.support-section { border-block-end: var(--odint-rule); }
.support-section > .shell {
  display: grid;
  gap: var(--odint-space-xs) clamp(1.5rem, 4vw, 4rem);
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
}
.support-section h2 { margin: 0; }
.support-section .record-meta { color: var(--odint-grey); }
.support-section__body { max-inline-size: var(--odint-reading-width); }
.support-section__body > :first-child { margin-block-start: 0; }
.support-section.scene--dark { border-block-end: 0; }
.support-section.scene--dark .record-meta { color: var(--odint-line-soft); }
.support-section.scene--dark .support-section__body {
  font-size: var(--odint-step-lede);
  line-height: 1.5;
}

/* "How funds are used" and "Other ways to support" are lists of
   commitments, so they read as a ruled register rather than bullets. */
.support-section--how-funds-are-used .support-section__body > ul,
.support-section--other-ways-to-support .support-section__body > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border-block-end: var(--odint-rule);
}
.support-section--how-funds-are-used .support-section__body > ul > li,
.support-section--other-ways-to-support .support-section__body > ul > li {
  border-block-start: var(--odint-rule);
  padding-block: 0.9rem;
  margin: 0;
  display: grid;
  gap: 0.15rem;
}
.support-section--how-funds-are-used .support-section__body > ul > li strong,
.support-section--other-ways-to-support .support-section__body > ul > li strong {
  font-family: var(--odint-font-record);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* The recovered "Make a Contribution" block. In v1 it was a rounded,
   gradient-filled panel with a red CTA — three separate anti-slop
   violations. Here it is a black plate with the one solid black-and-
   white control the rest of the site uses. */
.donate-box {
  background: var(--odint-black);
  color: var(--odint-white);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  margin-block: var(--odint-space-lg);
  display: grid;
  gap: var(--odint-space-sm);
}
.donate-box h3 {
  font-family: var(--odint-font-editorial);
  font-size: var(--odint-display-3);
  line-height: 1.1;
  margin: 0;
}
.donate-box p { margin: 0; max-inline-size: 56ch; }
.donate-box p:last-child {
  font-family: var(--odint-font-record);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--odint-line-soft);
}
/* The recovered markup wraps its control in a bare <div>. */
.donate-box > div { display: grid; justify-items: start; }
.donate-box a {
  justify-self: start;
  background: var(--odint-white);
  color: var(--odint-black);
  font-family: var(--odint-font-interface);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  text-decoration: none;
  padding: 0.85rem 1.75rem;
  border: 2px solid var(--odint-white);
}
.donate-box a:hover,
.donate-box a:focus-visible { background: var(--odint-black); color: var(--odint-white); }
.donate-box a:focus-visible { outline-color: var(--odint-white); }

.support-give {
  border-block-end: var(--odint-rule);
  padding-block: clamp(2.5rem, 5vw, 4.5rem);
}
.support-give__note { color: var(--odint-grey); text-align: end; }
.give-register {
  list-style: none;
  margin: 0;
  padding: 0;
  border-block-end: var(--odint-rule);
}
.give-register__row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.25rem clamp(1rem, 3vw, 2.5rem);
  border-block-start: var(--odint-rule);
  padding: clamp(1.1rem, 2.4vw, 1.6rem) 0;
  transition: background var(--odint-motion) var(--odint-ease),
              color var(--odint-motion) var(--odint-ease),
              padding-inline var(--odint-motion) var(--odint-ease);
}
.give-register__index { color: var(--odint-grey); }
.give-register__label {
  font-family: var(--odint-font-editorial);
  font-size: var(--odint-display-4);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0;
}
.give-register__label a { text-decoration: none; }
.give-register__label a::after { content: ""; position: absolute; inset: 0; }
.give-register__tagline { margin: 0; font-size: 0.9375rem; line-height: 1.5; }
.give-register__state { color: var(--odint-grey); }
.give-register__row:has(a):hover,
.give-register__row:focus-within {
  background: var(--odint-black);
  color: var(--odint-white);
  padding-inline: clamp(0.75rem, 2vw, 1.25rem);
}
.give-register__row:has(a):hover .record-meta,
.give-register__row:focus-within .record-meta { color: var(--odint-line-soft); }
.give-register__row:has(a):hover .give-register__label a {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.16em;
}
/* A method that does not exist yet is stated plainly and is not a
   control: no link, no hover, no promise. */
.give-register__row--pending { color: var(--odint-grey); }
.give-register__row--pending .give-register__label { color: var(--odint-grey); }

.give-register__details {
  background: var(--odint-archive-pale);
  border: var(--odint-rule);
  padding: var(--odint-space-sm) var(--odint-space-md);
  display: grid;
  gap: 0.3rem;
  margin-block-start: var(--odint-space-xs);
  color: var(--odint-black);
}
.give-register__details .record-meta { color: var(--odint-grey); }
.give-register__payee {
  font-family: var(--odint-font-editorial);
  font-size: 1.0625rem;
  margin: 0;
  max-inline-size: 34ch;
}
.give-register__details address {
  font-family: var(--odint-font-record);
  font-size: 0.8125rem;
  font-style: normal;
  line-height: 1.6;
}
.give-register__caution {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  border-block-start: 1px solid var(--odint-line-soft);
  padding-block-start: 0.5rem;
}

/* Stacked, the register's column rules become hanging strokes with
   nothing to separate, so rows are ruled instead of columns. */
@media (max-width: 47.99rem) {
  .support-standing { grid-template-columns: minmax(0, 1fr); }
  .support-standing div {
    border-inline-start: 0;
    border-block-start: 1px solid var(--odint-line-soft);
    padding-inline: 0;
    padding-block: 0.6rem;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--odint-space-sm);
  }
  .support-standing div:first-child { border-block-start: 0; }
  .support-standing dd { margin: 0; text-align: end; }
  .support-section__body { margin-block-start: var(--odint-space-sm); }
}

@media (min-width: 48rem) {
  /* min-content on the eyebrow row keeps the heading directly under it.
     With both rows auto, the spanning body distributes its height across
     them and strands the heading at the foot of the section. */
  .support-section > .shell {
    grid-template-columns: 14rem minmax(0, 1fr);
    grid-template-rows: min-content 1fr;
  }
  .support-section .record-meta { grid-column: 1; grid-row: 1; }
  .support-section h2 { grid-column: 1; grid-row: 2; align-self: start; }
  .support-section__body { grid-column: 2; grid-row: 1 / span 2; }
  .give-register__row { grid-template-columns: 4rem minmax(0, 1fr) minmax(0, 12rem); }
  .give-register__index { grid-column: 1; grid-row: 1 / span 2; }
  .give-register__label { grid-column: 2; grid-row: 1; }
  .give-register__tagline { grid-column: 2; grid-row: 2; }
  .give-register__state { grid-column: 3; grid-row: 1; text-align: end; }
  .give-register__details { grid-column: 2 / -1; grid-row: 3; }
}

/* ------------------------------------------------------------------
   DEVELOPING THE EVIDENCE
   Editorial monochrome is the resting state; the original colour is
   what the reader uncovers by pointing at a frame. This replaced a
   "View original colour" toggle: a control the reader had to find,
   press and press again, to do what moving the pointer now does.

   A device with no pointer cannot uncover anything, so it is simply
   given the colour. This is not a fallback — it is the same rule stated
   for a different input.
   ------------------------------------------------------------------ */
@media (hover: none) {
  .dossier-media > img,
  .record .cover__image-field > img,
  .record__body img,
  .contact-sheet__frame img { filter: none; }
}

/* ------------------------------------------------------------------
   MOUNTED COVER
   A cover that is not clearly landscape is shown WHOLE on the archive
   mount rather than blown up and cropped to fill a wide field. The
   Diella cover was a 269x371 portrait avatar declaring itself 1200x675
   and being cropped through the subject's face to fit a banner.
   ------------------------------------------------------------------ */
.cover__image-field--mount,
.dossier-media--mount,
.archive-feature__media--mount {
  display: grid;
  /* An explicit track, so `max-block-size: 100%` on the photograph has
     a definite height to be a percentage OF. Against an auto row the
     percentage is indeterminate and resolves to `none`, so a tall
     portrait rendered at its natural height and the field's own
     `overflow: hidden` cut the subject off at the chin on any short
     window. The mount exists to show a cover WHOLE; this is what makes
     it keep that promise. */
  grid-template-rows: minmax(0, 1fr);
  place-items: center;
}
.cover__image-field--mount > img,
.record .cover__image-field--mount > img,
.dossier-media--mount > img,
.archive-feature__media--mount > img {
  position: static;
  inset: auto;
  inline-size: auto;
  block-size: auto;
  max-inline-size: min(100%, 26rem);
  max-block-size: 100%;
  object-fit: contain;
  border: var(--odint-rule);
  background: var(--odint-white);
}
.cover__image-field--mount { padding: clamp(3rem, 6vw, 4.5rem) clamp(1rem, 4vw, 3rem) clamp(1rem, 3vw, 2rem); }
.dossier-media--mount { padding: clamp(1rem, 3vw, 2.25rem); }
.archive-feature__media--mount { padding: clamp(2.5rem, 5vw, 3.5rem) clamp(1rem, 3vw, 2rem) clamp(1rem, 3vw, 2rem); }
.record .cover__image-field--mount > img { padding-block-start: 0; }

/* ------------------------------------------------------------------
   ACTIVE MARKS
   Carmine marks the row the reader is currently in and the byline of
   the record they are reading — state, not decoration.

   Both sit on black, where carmine type would be 2.1:1 and unreadable.
   So the colour is carried by a filled chip and a registration mark
   with light type over it, which reads unmistakably red and stays
   legible. Carmine text on a dark ground is never correct here.
   ------------------------------------------------------------------ */
.ruled-index__row:hover .ruled-index__index,
.ruled-index__row:focus-within .ruled-index__index {
  background: var(--odint-carmine);
  color: var(--odint-white);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: 0.15rem 0.4rem;
  margin-inline-start: -0.4rem;
  inline-size: fit-content;
}
.cover__text-field > .record-meta:last-child {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
}
.cover__text-field > .record-meta:last-child::before {
  content: "";
  flex: none;
  inline-size: 0.55rem;
  block-size: 0.55rem;
  background: var(--odint-carmine);
}
.cover__text-field > .record-meta:last-child::after {
  content: "";
  flex: 1 1 auto;
  block-size: 1px;
  background: var(--odint-carmine);
}

/* ==================================================================
   13c. NARROW SCREENS
   A phone is not a small desktop. Everything below exists because the
   page was measured at 390x844 and something was unreachable, illegible
   or untappable — not because a breakpoint looked tidy.
   ================================================================== */

/* ------------------------------------------------------------------
   MIGRATED BODIES ON A PHONE
   The 125 migrated investigations carry their original markup, which
   was written for a desktop column. None of it may be rewritten, so the
   reading column is made to hold it: anything that cannot shrink is
   allowed to scroll inside its own box instead of dragging the page.
   ------------------------------------------------------------------ */
@media (max-width: 61.99rem) {
  .record__body,
  .record__body > *,
  .institutional-copy,
  .institutional-copy > * { min-inline-size: 0; max-inline-size: 100%; }

  /* Long unbroken strings — emails, tokens, hashes, onion addresses,
     subdomain lists — are the single most common cause of a runaway
     column in this archive. */
  .record__body,
  .institutional-copy { overflow-wrap: anywhere; }
  .record__body :where(code, kbd, samp, .cell-mono, .mono) { overflow-wrap: anywhere; }

  /* A table is data, and a wide one cannot be made narrow without
     destroying it. The FRAME scrolls; the table keeps its natural
     column widths. Forcing the table itself to `display: block` let the
     columns collapse to one character per line. */
  .data-table-wrap,
  .data-table-wrapper {
    max-inline-size: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .data-table-wrap > table,
  .data-table-wrapper > table { min-inline-size: max-content; }
  .record__body :where(pre) { overflow-x: auto; }

  /* The full-bleed dark strips bleed to the gutter and no further. */
  .stat-highlight,
  .findings-grid {
    margin-inline: calc(-1 * var(--odint-page-gutter));
    max-inline-size: calc(100% + 2 * var(--odint-page-gutter));
  }
  .stat-box,
  .findings-grid .finding-card { flex-basis: 7rem; }

  /* Legacy layout wrappers that assume a desktop measure. */
  .record__body :where(.article-wrapper, .article-header, .article-content,
    .topbar, .topbar-inner, .hero, .hero-grid, .hero-copy, .content,
    .page-header, .report-body, .site-map-embed, .banner, .detail) {
    inline-size: auto;
    max-inline-size: 100%;
    min-inline-size: 0;
  }
  .record__body :where(.hero-grid, .downloads-grid, .dataset-grid,
    .stat-row, .badge-row, .fc-buttons, .card-stats) {
    grid-template-columns: minmax(0, 1fr);
    flex-wrap: wrap;
  }
  .record__body img,
  .institutional-copy img {
    display: block;
    margin-inline: auto;
    max-inline-size: 100%;
    block-size: auto;
  }
  /* A picture inside a data cell is a thumbnail, whatever the legacy
     markup called it. Left uncapped it turned one roster row into a
     full screen of portrait. */
  .record__body :where(td, th) img,
  .institutional-copy :where(td, th) img {
    inline-size: auto;
    max-inline-size: 4.5rem;
    max-block-size: 4.5rem;
    margin-inline: 0;
  }

  /* Justified body copy. Asked for, and it needs hyphenation to be
     worth having: justifying a 40-character measure without breaking
     words opens rivers wide enough to read down. Headings, metadata and
     anything monospaced stay ragged — justifying those would stretch
     the word spacing of a label. */
  .record__body p,
  .institutional-copy p,
  .support-section__body p,
  .prose p {
    text-align: justify;
    hyphens: auto;
    -webkit-hyphens: auto;
  }
  .record__body .record-meta,
  .record__body :where(h1, h2, h3, h4, h5, h6),
  .record__body :where(pre, code, .cell-mono, .mono, .dl-meta, .fc-meta),
  .institutional-copy :where(h1, h2, h3, h4, h5, h6),
  .prose :where(h1, h2, h3, h4, h5, h6) {
    text-align: start;
    hyphens: manual;
    -webkit-hyphens: manual;
  }
}

/* ------------------------------------------------------------------
   THE ATLAS ON A PHONE
   Two absolutely positioned readouts sat on the same baseline at
   opposite corners and met in the middle, printing one unreadable line
   over the map. A phone also has no pointer, so the live grid reference
   has nothing to report and the map needs the room instead.
   ------------------------------------------------------------------ */
@media (max-width: 47.99rem) {
  .home-map-frame__grid,
  .atlas-stage__grid,
  .home-map-frame__focus,
  .atlas-stage__coordinates {
    position: static;
    inset: auto;
    display: block;
    inline-size: 100%;
    text-align: center;
  }
  .atlas-stage__coordinates,
  .home-map-frame__focus {
    background: var(--odint-black);
    color: var(--odint-white);
    padding: 0.35rem 0.5rem;
  }
  /* With no pointer there is no live coordinate to print. */
  .home-map-frame__grid,
  .atlas-stage__grid { display: none; }

  /* Controls belong beside the map, not on top of the Atlantic. */
  .atlas-stage__tools,
  .home-map-frame__tools {
    position: static;
    inset: auto;
    display: flex;
    justify-content: flex-end;
    gap: 0.35rem;
    margin-block-end: var(--odint-space-xs);
  }
  .atlas-stage__tools button,
  .home-map-frame__tools button {
    inline-size: 2.75rem;
    block-size: 2.75rem;
    border: var(--odint-rule);
  }
  .atlas-stage__tools button + button,
  .home-map-frame__tools button + button { border-block-start: var(--odint-rule); }

  .atlas-stage__map .atlas,
  .home-map-frame .atlas { min-block-size: 15rem; }
}

/* A 5px marker is a fine target for a mouse and an impossible one for a
   fingertip. The circle keeps its size; its hit area does not. */
@media (hover: none) {
  .atlas__marker { pointer-events: all; }
  .atlas__marker circle {
    stroke: var(--odint-carmine);
    stroke-opacity: 0;
    stroke-width: 14;
  }
}

/* ------------------------------------------------------------------
   THE ARCHIVE DECK ON A PHONE
   Three file tabs in one row ran off the screen with no sign that a
   third existed. They stack, so every spotlight is reachable.
   ------------------------------------------------------------------ */
@media (max-width: 47.99rem) {
  .archive-tabs {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    overflow: visible;
  }
  .archive-tabs button { inline-size: 100%; justify-content: flex-start; }
  .archive-feature__file-tab { display: none; }
  .archive-feature__annotation {
    position: static;
    inset: auto;
    justify-self: start;
    margin-block-start: var(--odint-space-sm);
  }
  .archive-feature__media--plate,
  .archive-feature__media--mount { display: grid; justify-items: center; }
}

/* ------------------------------------------------------------------
   READABILITY AND REACH
   Record metadata is 10px by system. That is right beside a heading on
   a desktop and too small alone on a phone, so the floor is 11px here.
   Controls get a 44px target: below that a fingertip misses.
   ------------------------------------------------------------------ */
@media (max-width: 47.99rem) {
  .record-vitals { grid-template-columns: minmax(0, 1fr); }
  .record-vitals div {
    border-inline-start: 0;
    border-block-start: 1px solid var(--odint-line-soft);
    padding-inline: 0;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--odint-space-sm);
  }
  .record-vitals div:first-child { border-block-start: 0; }
  .record-vitals dd { margin: 0; text-align: end; }

  .record-meta,
  .dossier-meta dt, .dossier-slip dt, .record-vitals dt,
  .support-standing dt, .archive-feature__facts dt,
  .casefiles-desk__rail span { font-size: 0.6875rem; }

  .masthead__search { padding-block: 0.7rem; }
  .action, .action--invert { padding-block: 0.55rem; }
  .footer a { display: inline-block; padding-block: 0.45rem; }
  .give-register__label a,
  .ruled-index__title a,
  .file-stack__card a { display: block; }

  .casefiles-cover__index { min-block-size: auto; overflow: visible; }
  .casefiles-cover__index i { display: none; }
}

/* ==================================================================
   14. UTILITIES
   ================================================================== */

.visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.measure { max-inline-size: var(--odint-reading-width); }
.stack { display: grid; gap: var(--odint-space-md); }
.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--odint-space-sm) var(--odint-space-md);
}
.rule { border-block-start: var(--odint-rule); }

/* ==================================================================
   15. PRINT
   The record has to survive on paper: it is a public archive.
   ================================================================== */

@media print {
  .masthead, .footer, .skip-link, .action, .masthead__donate,
  .reading-progress, .record-navigator, .explorer__controls { display: none; }
  body { font-size: 11pt; }
  .scene--dark, .cover__text-field, .footer {
    background: var(--odint-white);
    color: var(--odint-black);
  }
  .cover, .evidence, .finding, .ruled-index__row { break-inside: avoid; }
  .evidence { background: var(--odint-white); }
  .prose a::after { content: " (" attr(href) ")"; font-size: 0.85em; }
}