/* Interlink — UI atoms.
 *
 * The component layer: everything the site and the briefings are assembled from. Built only
 * from `--il-*` tokens — no literal colour, no pixel value outside the 4px space scale, and
 * no shadow anywhere (elevation in this system is `paper-raised` plus a hairline).
 *
 * Load order:  fonts.css → tokens.css → reset.css → atoms.css
 *
 * ---------------------------------------------------------------------------------------
 * NAMING.  `il-<block>`, `il-<block>__<element>`, `il-<block>--<modifier>`.
 *
 * STATES are real selectors, not classes: `:hover`, `:active`, `:focus-visible`, `:disabled`,
 * `[aria-current]`, `[aria-invalid]`, `[aria-expanded]`, `[open]`. The one exception is the
 * `.is-hover` / `.is-active` / `.is-focus` trio, declared *beside* the real selector it
 * mirrors so a specimen or a test can force a state and the two can never drift apart.
 *
 * ---------------------------------------------------------------------------------------
 * THREE RULES THAT EXPLAIN MOST OF WHAT FOLLOWS
 *
 * 1. Rules do the work borders usually do. A card is a hairline-ruled region far more often
 *    than it is a box; the index list (§7) has no boxes at all.
 *
 * 2. The signal is a claim, never decoration (DECISIONS §3). It appears here in exactly five
 *    places: the eyebrow rule, the wordmark rule, a live badge, a citation marker, an active
 *    control (focus ring, current tab, live row). Nothing else may take it.
 *
 * 3. Interactive boundaries carry `--il-ink-muted`, NOT `--il-rule`. WCAG 1.4.11 wants 3:1
 *    for a control's boundary and the rule tokens are deliberately below that — they are
 *    structure, not affordance. Measured in verify_ui.py; the table is in README.md.
 */

/* ======================================================================== 0. PRIMITIVES */

:root {
  /* Not a design choice and not on the 4px scale: 44px is WCAG 2.5.5's target size, and the
     floor every control in this file is built to. It lives here rather than in tokens.css
     because it belongs to the component layer, not to the locked foundation. */
  --il-target: 44px;
  /* The mark weight: twice the hairline. Every drawn line in this layer that is a MARK
     rather than a STRUCTURE takes it — the eyebrow's signal rule, the citation edge, the
     current-tab and current-page underlines, the checkmark, the disclosure's bars. A
     hairline is the system's structure; a mark has to survive beside a 108px headline. */
  --il-mark: 2px;
}

/* The mono label — uppercase, tracked. Every label, date, category, number and badge in the
   system is one of these, so it exists once and everything else composes it. */
.il-label,
.il-eyebrow__text,
.il-badge,
.il-btn,
.il-index__meta,
.il-cite,
.il-nav__link,
.il-lang__link,
.il-notice__kicker,
.il-nav__provenance,
.il-pager,
.il-tabs__tab,
.il-footer__meta {
  font-family: var(--il-font-mono);
  font-size: var(--il-text-label);
  line-height: var(--il-leading-label);
  letter-spacing: var(--il-tracking-label);
  text-transform: uppercase;
  font-weight: var(--il-wght-medium);
}

.il-label {
  display: block;
  color: var(--il-ink-muted);
}
.il-label--sm,
.il-badge,
.il-index__meta,
.il-cite,
.il-lang__link,
.il-nav__provenance,
.il-footer__meta {
  font-size: var(--il-text-label-sm);
  line-height: var(--il-leading-label-sm);
  letter-spacing: var(--il-tracking-label-sm);
}

/* The specimen/test mirror of the focus ring. reset.css owns the real `:focus-visible`;
   this exists so a proof sheet can show the ring without holding keyboard focus, and it is
   declared HERE, above every component, so that a component's own override of the ring
   (`.il-btn--danger`, `.il-index__link`) still wins on specificity. */
.is-focus {
  outline: var(--il-focus-width) solid var(--il-focus);
  outline-offset: var(--il-focus-offset);
}

/* Icons.  `.il-icon` and its size modifiers are NOT defined here — they belong to the icon
   set and ship in `icons/icons.css`, which must be in the load order (see atoms.html).
   Components below style the icon *in context* (`.il-link-external .il-icon`), which is a
   component's business; redefining the class is not.

   No `fill: none` is needed at this layer, though it looks as though it should be: reset.css
   sets `svg { fill: currentColor }` for the solid brand assets, but every icon in the set
   carries its own `<g fill="none" stroke="currentColor">` (and `<g fill="currentColor"
   stroke="none">` for its solids), and a presentation attribute on the group beats a value
   inherited from the host `<svg>`. So the icons are self-protecting. Worth knowing before
   someone "fixes" an icon that is already correct.

/* Layout helpers. Not a layout system — just the container and the whitespace band, which
   the minimalism contract makes a countable rule (≥96px between major sections, 128px
   usually right on desktop). */
.il-container {
  inline-size: 100%;
  max-inline-size: var(--il-container);
  margin-inline: auto;
  padding-inline: var(--il-gutter);
}
.il-container--wide { max-inline-size: var(--il-container-wide); }
.il-container--prose { max-inline-size: var(--il-container-prose); }

.il-section { padding-block: var(--il-space-9); }
@media (min-width: 900px) {
  .il-section { padding-block: var(--il-space-10); }
}

/* The skip link. Off-screen until focused, then a real block at the top-left. Never
   `display: none` — that would take it out of the tab order, which is the whole point. */
.il-skip {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: var(--il-z-toast);
  transform: translateY(-101%);
  display: inline-flex;
  align-items: center;
  min-block-size: var(--il-target);
  background: var(--il-ink);
  color: var(--il-paper);
  padding-inline: var(--il-space-4);
  font-family: var(--il-font-mono);
  font-size: var(--il-text-label);
  letter-spacing: var(--il-tracking-label);
  text-transform: uppercase;
  text-decoration: none;
  transition: transform var(--il-dur-ui) var(--il-ease);
}
.il-skip:focus-visible { transform: translateY(0); }

/* ========================================================================== 1. EYEBROW */
/* The mono label over a short signal rule — the most characteristic small gesture in the
   system, and the one the minimalism contract caps at ONE per screenful.
   The rule is 2px, deliberately heavier than the 1px structural hairline: it is a mark, not
   a structure, and at 1px it disappears against a large headline. It runs slightly short of
   the label, as in the wave-3 target. */
.il-eyebrow {
  display: inline-flex;
  flex-direction: column;
  gap: var(--il-space-3);
  color: var(--il-ink);
}
.il-eyebrow::after {
  content: '';
  display: block;
  inline-size: 92%;
  block-size: var(--il-mark);
  background: var(--il-signal);
}
/* Where the eyebrow heads a section rather than a page, the label drops to muted so the
   headline below it stays the loudest thing in the band. */
.il-eyebrow--section .il-eyebrow__text { color: var(--il-ink-muted); }

/* ========================================================================== 2. BUTTONS */
.il-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--il-space-2);
  min-block-size: var(--il-target);                 /* WCAG 2.5.8 target size, everywhere, not only touch */
  padding-inline: var(--il-space-5);
  border: var(--il-hairline) solid transparent;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--il-dur-micro) var(--il-ease),
    border-color var(--il-dur-micro) var(--il-ease),
    color var(--il-dur-micro) var(--il-ease);
}
/* Pressed. One rule for every variant: the fill cannot get darker than ink on a light
   theme, so the press is geometric. One hairline — the system's smallest real distance. */
.il-btn:active,
.il-btn.is-active { transform: translateY(var(--il-hairline)); }

.il-btn--sm {
  min-block-size: calc(var(--il-target) - var(--il-space-2));
  padding-inline: var(--il-space-4);
  font-size: var(--il-text-label-sm);
  letter-spacing: var(--il-tracking-label-sm);
}
/* A coarse pointer has no 36px affordance, whatever the design wants. */
@media (pointer: coarse) {
  .il-btn--sm { min-block-size: var(--il-target); }
}

/* primary — ink fill */
.il-btn--primary {
  background: var(--il-ink);
  color: var(--il-paper);
  border-color: var(--il-ink);
}
.il-btn--primary:hover,
.il-btn--primary.is-hover { background: var(--il-ink-2); border-color: var(--il-ink-2); }
.il-btn--primary:active,
.il-btn--primary.is-active { background: var(--il-ink); border-color: var(--il-ink); }

/* secondary — hairline outline. `ink-muted` and not `rule`: this is a boundary a person has
   to find, so it owes 3:1. */
.il-btn--secondary {
  background: transparent;
  color: var(--il-ink);
  border-color: var(--il-ink-muted);
}
.il-btn--secondary:hover,
.il-btn--secondary.is-hover { border-color: var(--il-ink); background: var(--il-paper-raised); }
.il-btn--secondary:active,
.il-btn--secondary.is-active { background: var(--il-paper-sunk); border-color: var(--il-ink); }

/* ghost — no boundary at all, for the tertiary action beside a real one */
.il-btn--ghost { background: transparent; color: var(--il-ink-2); }
.il-btn--ghost:hover,
.il-btn--ghost.is-hover { color: var(--il-ink); background: var(--il-paper-sunk); }
.il-btn--ghost:active,
.il-btn--ghost.is-active { background: var(--il-ink); color: var(--il-paper); }

/* destructive — THE ONE CONTROL PERMITTED A SIGNAL FILL.
   Everywhere else the signal is a hairline-sized marker of a connection. A destructive
   confirmation is the single case where the mark must be impossible to misread, and it is
   tiny, rare and always carried by its own text — so it stays inside the ~2% rule. */
.il-btn--danger {
  background: var(--il-signal);
  color: var(--il-on-signal);
  border-color: var(--il-signal);
}
.il-btn--danger:hover,
.il-btn--danger.is-hover { background: var(--il-ink); border-color: var(--il-ink); color: var(--il-paper); }
.il-btn--danger:active,
.il-btn--danger.is-active { background: var(--il-signal); border-color: var(--il-ink); }
/* A signal ring around a signal fill is no ring at all — swap it for ink. */
.il-btn--danger:focus-visible,
.il-btn--danger.is-focus { outline-color: var(--il-ink); }

/* disabled — real tokens, never `opacity`, which mutes a contrast ratio silently */
.il-btn:disabled,
.il-btn[aria-disabled='true'] {
  background: var(--il-paper-sunk);
  color: var(--il-ink-muted-sunk);
  border-color: var(--il-rule-sunk);
  cursor: not-allowed;
}

/* ============================================================================ 3. LINKS */
/* Inline, in prose. The underline is tuned rather than left to the UA: a 1px rule at 0.18em
   offset, in `rule-strong` so it reads as a hairline under the text and not as a second
   weight of ink. It goes to the signal on hover — the accent marking a live connection. */
.il-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--il-rule-strong);
  text-decoration-thickness: var(--il-hairline);
  text-underline-offset: 0.18em;
  transition: text-decoration-color var(--il-dur-micro) var(--il-ease);
}
.il-link:hover,
.il-link.is-hover { text-decoration-color: var(--il-signal); }

/* Standalone — the one that ends a block. The arrow is the typographic U+2192 from the
   fonts' symbols subset, not an icon: it inherits weight and tracking for free. */
.il-link-standalone {
  display: inline-flex;
  align-items: baseline;
  gap: var(--il-space-3);
  min-block-size: var(--il-target);
  align-content: center;
  flex-wrap: wrap;
  font-family: var(--il-font-mono);
  font-size: var(--il-text-label);
  letter-spacing: var(--il-tracking-label);
  text-transform: uppercase;
  font-weight: var(--il-wght-medium);
  color: var(--il-ink);
  text-decoration: none;
}
.il-link-standalone__arrow {
  color: var(--il-ink-muted);
  transition: transform var(--il-dur-micro) var(--il-ease), color var(--il-dur-micro) var(--il-ease);
}
.il-link-standalone:hover .il-link-standalone__arrow,
.il-link-standalone.is-hover .il-link-standalone__arrow {
  color: var(--il-signal);
  transform: translateX(var(--il-space-1));
}

/* External — same as standalone but carries the `external` icon, and says so to a screen
   reader. The icon sits at the text's own size so it never outweighs the label. */
.il-link-external { text-decoration-color: transparent; }
.il-link-external:hover,
.il-link-external.is-hover {
  text-decoration: underline;
  text-decoration-color: var(--il-signal);
  text-decoration-thickness: var(--il-hairline);
  text-underline-offset: 0.3em;
}
/* The glyph is aligned here and nothing else: `icons.css` forbids recolouring an icon with
   the signal — the signal marks a connection Interlink has established and an icon is not
   one — so the hover lands on the label, and the icon inherits the link's colour as the set
   intends. */
.il-link-external .il-icon { align-self: center; }

/* =========================================================================== 4. BADGES */
.il-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--il-space-2);
  padding: var(--il-space-1) var(--il-space-2);
  border: var(--il-hairline) solid var(--il-rule-strong);
  color: var(--il-ink-2);
}
/* A status badge is a state, so it gets the stronger boundary and the full ink. */
.il-badge--status { border-color: var(--il-ink-muted); color: var(--il-ink); }
/* Live — an investigation currently running. The signal is doing exactly its job here:
   marking a connection that is open. The dot is a second, non-colour cue. */
.il-badge--live { border-color: var(--il-signal); color: var(--il-signal); }
.il-badge--live::before {
  content: '';
  inline-size: var(--il-space-2);
  block-size: var(--il-space-2);
  background: var(--il-signal);
  flex: none;
}

/* ====================================================================== 5. WORK INDEX */
/* Published work is an index LIST, not a card grid (DECISIONS §7b, w3_S4-light-index.png).
   Rows separated by one hairline; mono category + year left, title in Archivo right. No
   thumbnail, no box, no border beyond the row rule, no button. The whole row is the link,
   so the hit target is the row and the focus ring frames it. */
.il-index {
  border-block-start: var(--il-hairline) solid var(--il-rule-strong);
}
.il-index__head {
  color: var(--il-ink-muted);
  padding-block: var(--il-space-6) var(--il-space-7);
}
.il-index__row { display: block; border-block-end: var(--il-hairline) solid var(--il-rule); }
.il-index__link {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--il-space-2);
  padding-block: var(--il-space-5);
  color: inherit;
  text-decoration: none;
}
@media (min-width: 720px) {
  .il-index__link {
    grid-template-columns: 240px 1fr;
    gap: 0 var(--il-space-5);   /* no row gap: the sub-line sets its own, much tighter */
    align-items: baseline;
    padding-block: var(--il-space-6);
  }
}
.il-index__meta {
  color: var(--il-ink-muted);
  transition: color var(--il-dur-micro) var(--il-ease);
}
.il-index__title {
  font-size: var(--il-text-h3);
  line-height: var(--il-leading-h3);
  letter-spacing: var(--il-tracking-h3);
  font-weight: var(--il-wght-medium);
  text-wrap: balance;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: var(--il-hairline);
  text-underline-offset: 0.18em;
  transition: text-decoration-color var(--il-dur-micro) var(--il-ease);
}
/* Optional second line — collaborators, "featured in". Only where it exists. */
.il-index__sub {
  grid-column: -2 / -1;
  margin-block-start: var(--il-space-2);
  font-family: var(--il-font-mono);
  font-size: var(--il-text-label-sm);
  line-height: var(--il-leading-label-sm);
  letter-spacing: var(--il-tracking-label-sm);
  text-transform: uppercase;
  color: var(--il-ink-muted);
}
.il-index__link:hover .il-index__title,
.il-index__link.is-hover .il-index__title { text-decoration-color: var(--il-ink); }
.il-index__link:hover .il-index__meta,
.il-index__link.is-hover .il-index__meta { color: var(--il-ink); }
/* Live — an open investigation. One row at most; if everything is live, nothing is. */
.il-index__row--live .il-index__meta { color: var(--il-signal); }
.il-index__row--live .il-index__link:hover .il-index__meta,
.il-index__row--live .il-index__link.is-hover .il-index__meta { color: var(--il-signal); }

/* The focus ring wants to sit just inside the row so it is not clipped by the rule above. */
.il-index__link:focus-visible,
.il-index__link.is-focus { outline-offset: calc(var(--il-focus-offset) * -1); }

/* ==================================================================== 6. FEATURE CARD */
/* The exception, at most once per page: a lead item that has to outrank the index. Hairline
   bounded, no shadow, no radius, no fill beyond `paper-raised`. */
.il-feature {
  border: var(--il-hairline) solid var(--il-rule-strong);
  background: var(--il-paper-raised);
  padding: var(--il-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--il-space-4);
  align-items: start;
}
@media (min-width: 720px) {
  .il-feature { padding: var(--il-space-8); gap: var(--il-space-5); }
}
.il-feature__title {
  font-size: var(--il-text-h2);
  line-height: var(--il-leading-h2);
  letter-spacing: var(--il-tracking-h2);
  font-weight: var(--il-wght-semibold);
  margin: 0;
  max-inline-size: 22ch;
}
.il-feature__standfirst {
  font-size: var(--il-text-body-lg);
  line-height: var(--il-leading-body-lg);
  color: var(--il-ink-2);
  max-inline-size: 52ch;
  margin: 0;
}

/* ======================================================================== 7. CITATION */
/* The brand's core promise made into a component: a claim beside its source. The signal
   edge is sanctioned by DECISIONS §3 — a citation marker is precisely a connection
   Interlink has established. */
.il-cite {
  display: block;
  border-inline-start: var(--il-mark) solid var(--il-signal);
  padding-inline-start: var(--il-space-3);
  color: var(--il-ink-muted);
  font-weight: var(--il-wght-regular);
}
.il-cite__source { color: var(--il-ink-2); font-weight: var(--il-wght-medium); }
.il-cite a { color: inherit; }
/* In-prose marker: the same claim, shrunk to a reference. Not `<sup>` — a raised mono
   numeral at label-sm is legible where a browser-shrunk superscript is not. */
.il-cite-marker {
  font-family: var(--il-font-mono);
  font-size: var(--il-text-label-sm);
  letter-spacing: normal;      /* label tracking here detaches the following comma */
  color: var(--il-signal);
  text-decoration: none;
  vertical-align: 0.35em;
  /* Start-side only. A trailing pad pushes the following comma off the word, which reads as
     a stray space in the middle of a sentence. */
  padding-inline: 2px 0;
}

/* ========================================================================== 8. NOTICE */
/* The AI-assisted disclaimer pattern. Informational, not alarming: a sunk well and a mono
   kicker, no signal, no warning iconography. It states a method; it is not an incident. */
.il-notice {
  background: var(--il-paper-sunk);
  border: var(--il-hairline) solid var(--il-rule-sunk);
  padding: var(--il-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--il-space-2);
}
.il-notice__kicker { color: var(--il-ink-muted-sunk); }
.il-notice__body {
  font-size: var(--il-text-small);
  line-height: var(--il-leading-small);
  color: var(--il-ink-2);
  max-inline-size: 72ch;
  margin: 0;
}

/* =========================================================================== 9. FORMS */
/* Boxed, not underlined. Chosen once and applied everywhere: a box of hairlines is the same
   idea as the rest of the system (rules doing the work borders do), it gives an unambiguous
   44px target, and an underline-only field cannot reach 3:1 on its non-underlined sides. */
.il-form {
  display: flex;
  flex-direction: column;
  gap: var(--il-space-5);
  max-inline-size: 52ch;
}
.il-field { display: flex; flex-direction: column; gap: var(--il-space-2); }
.il-field__label { color: var(--il-ink-2); }
.il-field__hint {
  font-size: var(--il-text-small);
  line-height: var(--il-leading-small);
  color: var(--il-ink-muted);
}

.il-input {
  inline-size: 100%;
  min-block-size: var(--il-target);
  padding: var(--il-space-3);
  background: var(--il-paper-raised);
  color: var(--il-ink);
  border: var(--il-hairline) solid var(--il-ink-muted);
  font-family: var(--il-font-sans);
  font-size: var(--il-text-body);
  line-height: var(--il-leading-body);
  transition: border-color var(--il-dur-micro) var(--il-ease);
}
.il-input:hover:not(:disabled),
.il-input.is-hover { border-color: var(--il-ink); }
textarea.il-input { min-block-size: var(--il-space-10); resize: vertical; }
.il-input:disabled {
  background: var(--il-paper-sunk);
  color: var(--il-ink-muted-sunk);
  border-color: var(--il-rule-sunk);
  cursor: not-allowed;
}
/* Error. The border is a second cue, never the only one — `aria-invalid` carries it to
   assistive tech and `.il-field__error` states it in words. */
.il-input[aria-invalid='true'] { border-color: var(--il-signal); }
.il-field__error {
  display: flex;
  gap: var(--il-space-2);
  font-family: var(--il-font-mono);
  font-size: var(--il-text-label-sm);
  line-height: var(--il-leading-label-sm);
  letter-spacing: var(--il-tracking-label-sm);
  text-transform: uppercase;
  color: var(--il-signal);
}
.il-field__error::before { content: '\2717'; }   /* ✗ — the non-colour half of the cue */

/* Select. `appearance: none` plus a CSS chevron, so a form needs no icon dependency; the
   chevron is two borders on a rotated square, which stays sharp at any zoom. */
.il-select { position: relative; display: block; }
.il-select .il-input { padding-inline-end: var(--il-space-8); appearance: none; }
.il-select::after {
  content: '';
  position: absolute;
  inset-inline-end: var(--il-space-4);
  inset-block-start: calc(50% - 5px);
  inline-size: 7px;
  block-size: 7px;
  border-inline-end: var(--il-hairline) solid var(--il-ink-2);
  border-block-end: var(--il-hairline) solid var(--il-ink-2);
  transform: rotate(45deg);
  pointer-events: none;
}

/* Checkbox and radio. Both are squares, because radius 0 is a brand rule with no exceptions
   (DECISIONS §6) — so the two are told apart by their INDICATOR, not their outline: a check
   for the checkbox, a filled inner square for the radio. The 44px target lives on the label
   wrapper, not the 20px box. */
.il-check {
  display: flex;
  align-items: center;
  gap: var(--il-space-3);
  min-block-size: var(--il-target);
  cursor: pointer;
}
.il-check__box {
  appearance: none;
  inline-size: 20px;
  block-size: 20px;
  flex: none;
  background: var(--il-paper-raised);
  border: var(--il-hairline) solid var(--il-ink-muted);
  display: grid;
  place-content: center;
  cursor: pointer;
  transition: background-color var(--il-dur-micro) var(--il-ease),
              border-color var(--il-dur-micro) var(--il-ease);
}
.il-check__box:hover:not(:disabled),
.il-check__box.is-hover { border-color: var(--il-ink); }
.il-check__box:checked { background: var(--il-ink); border-color: var(--il-ink); }
.il-check__box:checked::after {
  content: '';
  inline-size: 5px;
  block-size: 9px;
  border-inline-end: var(--il-mark) solid var(--il-paper);
  border-block-end: var(--il-mark) solid var(--il-paper);
  transform: translateY(-1px) rotate(45deg);
}
.il-check__box[type='radio']:checked::after {
  inline-size: var(--il-space-2);
  block-size: var(--il-space-2);
  border: 0;
  background: var(--il-paper);
  transform: none;
}
.il-check__box:disabled {
  background: var(--il-paper-sunk);
  border-color: var(--il-rule-sunk);
  cursor: not-allowed;
}
.il-check__box:disabled:checked { background: var(--il-ink-muted-sunk); border-color: var(--il-ink-muted-sunk); }
.il-check:has(.il-check__box:disabled) { color: var(--il-ink-muted-sunk); cursor: not-allowed; }
.il-check__text { font-size: var(--il-text-body); line-height: var(--il-leading-body); }

/* The honeypot. A real, labelled, empty field that a person never sees and a bot fills in;
   the server rejects any submission where it is non-empty. Positioned off-screen rather
   than `display: none` or `hidden`, because the common scrapers skip anything hidden the
   easy way — and `aria-hidden` + `tabindex="-1"` keep it out of a person's path. Carried
   over from the current interlink.zone markup; keep the name `website`. */
.il-honeypot {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ====================================================================== 10. NAVIGATION */
.il-nav {
  position: relative;
  border-block-end: var(--il-hairline) solid var(--il-rule-strong);
}
.il-nav__bar {
  display: flex;
  align-items: center;
  gap: var(--il-space-5);
  min-block-size: var(--il-space-8);
}
.il-nav__brand {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--il-target);
  color: var(--il-ink);
  text-decoration: none;
  margin-inline-end: auto;
}
/* The PLAIN wordmark — no signal rule. The wordmark+rule device is for STANDALONE identity
   contexts, where nothing else on the surface carries the brand: report covers, OG cards, a
   citation card, a byline chip. Page chrome is not one of those, because the page underneath
   is already identifying itself — and a rule here plus the hero eyebrow's rule is two signal
   rules in the first viewport, which is the repetition SHARED.md rule 2 exists to prevent and
   a good part of why the wave-2 mocks read as busy (DECISIONS, 2026-09-30).
   Height is set here; the width comes from the SVG's own aspect ratio. */
.il-nav__brand svg { block-size: var(--il-space-5); inline-size: auto; }

.il-nav__links {
  display: flex;
  align-items: center;
  gap: var(--il-space-5);
}
.il-nav__link {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--il-target);
  color: var(--il-ink-2);
  text-decoration: none;
  transition: color var(--il-dur-micro) var(--il-ease);
}
.il-nav__link:hover,
.il-nav__link.is-hover { color: var(--il-ink); }
/* Current page: ink plus an underline. Two cues, neither of them colour alone. */
.il-nav__link[aria-current='page'] {
  color: var(--il-ink);
  text-decoration: underline;
  text-decoration-thickness: var(--il-hairline);
  text-underline-offset: 0.4em;
}

/* Provenance sits behind its own hairline — a genuine distinction (whose site this is, not
   where to go next), which is the only thing that earns a rule in this system. */
.il-nav__provenance {
  display: none;
  padding-inline-start: var(--il-space-5);
  border-inline-start: var(--il-hairline) solid var(--il-rule);
  color: var(--il-ink-muted);
}
@media (min-width: 1100px) { .il-nav__provenance { display: block; } }

/* Language. Five links, mono, current in full ink at semibold — weight and `aria-current`,
   never colour alone. No signal anywhere in this bar — the page's one signal rule belongs
   to the hero eyebrow.
   No separator glyphs: each link is a 44px target, which spaces them on its own, and four
   decorative middots in a header are four things doing no work. */
.il-lang { display: flex; align-items: center; }
.il-lang__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: var(--il-target);
  min-inline-size: var(--il-target);
  color: var(--il-ink-muted);
  text-decoration: none;
  transition: color var(--il-dur-micro) var(--il-ease);
}
.il-lang__link:hover,
.il-lang__link.is-hover { color: var(--il-ink); }
.il-lang__link[aria-current='true'] { color: var(--il-ink); font-weight: var(--il-wght-semibold); }

/* Mobile disclosure. `<details>`/`<summary>`, so it is keyboard-operable, announces its
   expanded state and survives with JavaScript off — no script anywhere in this layer. */
.il-nav__disclosure { display: block; }
.il-nav__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--il-target);
  block-size: var(--il-target);
  margin-inline-start: auto;
  list-style: none;
  cursor: pointer;
  color: var(--il-ink);
}
.il-nav__toggle::-webkit-details-marker { display: none; }
/* Three bars, drawn from borders so they inherit `currentColor` and need no asset. */
.il-nav__toggle span {
  inline-size: 20px;
  block-size: 11px;
  border-block-start: var(--il-mark) solid currentColor;
  border-block-end: var(--il-mark) solid currentColor;
  position: relative;
}
.il-nav__toggle span::after {
  content: '';
  position: absolute;
  inset-block-start: calc(50% - 1px);
  inset-inline: 0;
  border-block-start: var(--il-mark) solid currentColor;
}
/* The panel is positioned against `.il-nav`, not against the <details> it lives in: the
   <details> is a shrink-to-fit flex item pinned to the right of the bar, so an in-flow panel
   opens as a narrow column hanging off the viewport. Pinned to the nav it spans the bar. */
.il-nav__panel {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 100%;
  z-index: var(--il-z-header);
  display: flex;
  flex-direction: column;
  gap: var(--il-space-5);
  padding-block: var(--il-space-5) var(--il-space-6);
  padding-inline: var(--il-gutter);
  background: var(--il-paper);
  border-block-start: var(--il-hairline) solid var(--il-rule-strong);
  border-block-end: var(--il-hairline) solid var(--il-rule-strong);
}
.il-nav__panel .il-nav__links { flex-direction: column; align-items: stretch; gap: 0; }
.il-nav__panel .il-nav__provenance {
  display: block;
  padding-inline-start: 0;
  border-inline-start: 0;
}

/* One breakpoint, two arrangements. Below 900px the bar is brand + toggle; above it, the
   full row, and the disclosure is gone from the accessibility tree entirely. */
@media (max-width: 899px) {
  .il-nav__bar > .il-nav__links,
  .il-nav__bar > .il-lang,
  .il-nav__bar > .il-nav__provenance { display: none; }
}
@media (min-width: 900px) {
  .il-nav__disclosure { display: none; }
}

/* ========================================================================== 11. FOOTER */
.il-footer {
  border-block-start: var(--il-hairline) solid var(--il-rule-strong);
  padding-block: var(--il-space-8) var(--il-space-7);
  display: grid;
  gap: var(--il-space-7);
}
@media (min-width: 900px) {
  .il-footer { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
}
/* Plain wordmark here too, and larger — the footer is where the brand signs off, so it is
   the one place the letters may be the biggest thing in the band. */
.il-footer__brand svg { block-size: var(--il-space-6); inline-size: auto; color: var(--il-ink); }
.il-footer__descriptor {
  margin-block-start: var(--il-space-4);
  font-size: var(--il-text-body);
  line-height: var(--il-leading-body);
  color: var(--il-ink-2);
  max-inline-size: 34ch;
}
.il-footer__meta {
  display: flex;
  flex-direction: column;
  color: var(--il-ink-muted);
}
/* Every row is one 44px band, so the one row that is a link needs no special height and the
   rhythm stays even. */
.il-footer__meta > * {
  display: flex;
  align-items: center;
  min-block-size: var(--il-target);
}
@media (min-width: 900px) { .il-footer__meta > * { justify-content: end; } }
/* The <p> band is 44px; the <a> is the thing a finger actually hits, so it fills it. */
.il-footer__meta a {
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  color: var(--il-ink-2);
  text-decoration: none;
}
.il-footer__meta a:hover { color: var(--il-ink); }

/* ================================================================ 12. TABS, PAGINATION */
/* Navigational tabs, not an ARIA tab widget: each one is a link to a filtered view, so it
   needs `aria-current` and nothing else — no roving tabindex, no arrow-key handler, no
   JavaScript. If a future panel really does swap in place without a navigation, that is a
   different component and should say so. */
.il-tabs {
  display: flex;
  flex-wrap: wrap;                      /* wraps rather than scrolls: no clipped affordance */
  gap: 0 var(--il-space-6);
  border-block-end: var(--il-hairline) solid var(--il-rule);
}
.il-tabs__tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: var(--il-target);
  min-inline-size: var(--il-target);                /* a two-letter tab is still a 44px target */
  color: var(--il-ink-muted);
  text-decoration: none;
  border-block-end: var(--il-mark) solid transparent;
  margin-block-end: -1px;
  transition: color var(--il-dur-micro) var(--il-ease);
}
.il-tabs__tab:hover,
.il-tabs__tab.is-hover { color: var(--il-ink); }
/* Active control — one of the five sanctioned signal uses. */
.il-tabs__tab[aria-current='page'] { color: var(--il-ink); border-block-end-color: var(--il-signal); }

.il-pager {
  display: flex;
  align-items: center;
  gap: var(--il-space-4);
  color: var(--il-ink-muted);
}
.il-pager__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: var(--il-target);
  min-block-size: var(--il-target);
  color: var(--il-ink-2);
  text-decoration: none;
}
.il-pager__link:hover,
.il-pager__link.is-hover { color: var(--il-ink); }
.il-pager__link[aria-current='page'] {
  color: var(--il-ink);
  font-weight: var(--il-wght-semibold);
  text-decoration: underline;
  text-decoration-color: var(--il-signal);
  text-decoration-thickness: var(--il-mark);
  text-underline-offset: 0.4em;
}
.il-pager__link[aria-disabled='true'] { color: var(--il-ink-muted-sunk); pointer-events: none; }