/* Interlink — APPLIED SURFACES: the shared layer.
 *
 * Every surface in this folder (key visual, report cover, OG card, citation card, slide
 * masters, byline chip) is a FIXED-SIZE artefact, not a responsive page. So this file holds
 * only what is genuinely common to all of them — the surface box, the field layer, the two
 * type recipes, and one-colour mode — and each surface's own composition lives in its own
 * <style> block. Nothing here is a layout engine; a shared grid would be a fiction, because
 * an A4 cover and a 320x64 byline chip do not share one.
 *
 * Load order: ../tokens/fonts.css -> ../tokens/tokens.css -> ../tokens/reset.css -> this.
 * Served over http (see render.py) — Chromium will not load a woff2 from a file: origin, and
 * a surface rendered in a fallback face proves nothing about a typographic identity.
 */

/* ------------------------------------------------------------------ the surface box */

/* One surface per page. --sw/--sh are set by the page; render.py screenshots this element,
   so its box IS the artefact's pixel size. overflow:hidden because the field is full-bleed
   and must be cropped by the surface, not by the viewport. */
.surface {
  position: relative;
  isolation: isolate;
  width: var(--sw);
  height: var(--sh);
  background: var(--il-paper);
  color: var(--il-ink);
  overflow: hidden;
}

/* ------------------------------------------------------------------ the field layer */

/* The ambient device. `color` is set here rather than inherited so the inlined SVG's
   `currentColor` lattice resolves to ink on both themes; the one live point resolves
   --il-signal from :root. Alpha lives inside the SVG (field/params.json), never here —
   dimming it with opacity would silently break the calibrated density contract. */
.field {
  position: absolute;
  inset: 0;
  z-index: 0;
  color: var(--il-ink);
  pointer-events: none;
}

.field svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Everything that is not the field. */
.layer {
  position: relative;
  z-index: 1;
  height: 100%;
}

/* ------------------------------------------------------------------ the identity */

/* An inlined wordmark/lockup SVG, sized by width alone — a wordmark has no meaningful
   height-based size (wordmark/README.md). Set the width on the element, not on the SVG. */
.wm {
  display: block;
  color: var(--il-ink);
}

.wm svg {
  display: block;
  width: 100%;
  height: auto;
}

/* ------------------------------------------------------------------ the two type recipes */

/* THE mono label: uppercase, 0.1em tracking. Section numbers, dates, source credits,
   dataset names, metadata blocks, the descriptor. DECISIONS.md §4. */
.mono {
  font-family: var(--il-font-mono);
  font-weight: var(--il-wght-regular);
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: var(--il-tracking-label);
  line-height: var(--il-leading-label);
}

/* Display Archivo. Sizes are set per surface — these artefacts are fixed-size, so the
   fluid clamp() steps in tokens.css would resolve against a viewport that is not the
   artefact. The axis settings, weight and tracking are the tokens' own. */
.display {
  font-family: var(--il-font-sans);
  font-weight: var(--il-wght-bold);
  font-stretch: var(--il-wdth-display);
  letter-spacing: var(--il-tracking-display-1);
  line-height: var(--il-leading-display-1);
  text-wrap: balance;
}

/* ------------------------------------------------------------------ the signal rule */

/* The short rule under an eyebrow, or under the wordmark in the device. 2px, and 216:1 at
   its reference length — measured off the approved study and shipped as
   motifs/rule-signal.svg. Here it is a <div>, because its length is set by the block it
   belongs to rather than by a fixed aspect. Every red mark is a claim (DECISIONS.md §3):
   there is exactly one per surface, and `render.py` asserts it. */
.signal-rule {
  height: 2px;
  background: var(--il-signal);
}

/* ------------------------------------------------------------------ one colour */

/* The photocopier. A briefing is very often read as a black-and-white duplicate of a
   duplicate, so one-colour is a real output, not a courtesy.
 *
 * Everything collapses to pure black on pure white — no greys. A 20% tint is the thing that
 * photocopies to a muddy dither or drops out entirely, so the hierarchy is carried by SIZE
 * and WEIGHT instead of by value, and the field (5% contrast by design) is removed rather
 * than reproduced as noise. The signal rule survives as a black rule: the claim is still
 * marked, just not in colour. */
/* `:root[data-ink]`, not a bare attribute selector: tokens.css sets the palette on
   `:root[data-theme='light']`, which is two selectors' worth of specificity. A one-selector
   override loses to it and the "one colour" proof comes out in full colour — which it did,
   and the proof is the only reason it was caught. Equal specificity plus a later stylesheet
   is what makes this win. */
:root[data-ink='mono'] {
  --il-paper: #FFFFFF;
  --il-paper-raised: #FFFFFF;
  --il-paper-sunk: #FFFFFF;
  --il-ink: #000000;
  --il-ink-2: #000000;
  --il-ink-muted: #000000;
  --il-ink-muted-sunk: #000000;
  --il-rule: #000000;
  --il-rule-strong: #000000;
  --il-rule-raised: #000000;
  --il-rule-sunk: #000000;
  --il-signal: #000000;
  --il-on-signal: #FFFFFF;
}

:root[data-ink='mono'] .field {
  display: none;
}

/* ------------------------------------------------------------------ page chrome */

/* The page around the surface exists only so a surface can be opened in a browser and
   looked at. It is never photographed: render.py screenshots `.surface`. */
body {
  margin: 0;
  display: grid;
  place-items: start center;
  background: var(--il-paper-sunk);
}

/* A surface that has not finished inlining its SVGs must not be screenshotted. render.py
   waits for html[data-svg-ready]; this makes a missed wait visible rather than silent. */
html:not([data-svg-ready]) .surface {
  visibility: hidden;
}

/* The display scale has three steps, and each pairs a size with its own leading and
   tracking (tokens.css). A surface picks the step whose *proportions* suit it and sets the
   size itself; taking display-1's -0.03em down to a 40px cover title would crowd it. */
.display.d2 {
  letter-spacing: var(--il-tracking-display-2);
  line-height: var(--il-leading-display-2);
}

.display.d3 {
  letter-spacing: var(--il-tracking-display-3);
  line-height: var(--il-leading-display-3);
}