/* Interlink — interlink.zone, layout.
 *
 * Load order: fonts.css → tokens.css → reset.css → atoms.css → THIS.
 *
 * This file adds LAYOUT ONLY. It defines no colour, no radius, no shadow and no type scale:
 * every value below is either a `--il-*` token or a layout measure that belongs to this page
 * rather than to the system. Components come from atoms.css, the wordmark from wordmark/,
 * the figures from ui/dataviz/, the ambient field from field/. Nothing here forks any of them.
 *
 * ---------------------------------------------------------------------------------------
 * THE MINIMALISM CONTRACT, as it lands on this page (SHARED.md; countable, and binding)
 *
 * 1. ONE ambient device per viewport → the field, and therefore no pattern tile and no rule
 *    motif anywhere below. There is exactly one `<canvas>` on the page and no
 *    `background-image` in this file.
 * 2. ONE eyebrow-and-signal-rule per screenful → `.il-eyebrow` appears once, in the hero.
 *    Every other section head is a hairline plus a mono label (`.site-head`) and carries no
 *    signal. The header brand is the PLAIN wordmark for the same reason (DECISIONS §7b).
 * 4. Hairlines separate genuinely different things → the ones on this page are: under the
 *    header, above each section head, above each pillar, between index rows, around form
 *    inputs, above the footer, and the two inside each figure's own chrome. There is no
 *    decorative rule.
 * 5. At most three type sizes in a section → checked section by section in the comments.
 * 7. ≥96px between major sections, 128px usually right on desktop → `.il-section` (atoms)
 *    carries 96/128 top AND bottom, so adjacent sections sit 192–256px apart. Those long
 *    empty stretches are the design, not a gap in it.
 */

/* ============================================================================ THE FIELD */
/* Fixed and full-bleed, at `--il-z-field` (-1), behind everything. DECISIONS §5 forbids the
   field reading as a rectangular panel, and a hero-shaped box is exactly that — so it covers
   the viewport, has no edge of its own (field.js's veil dissolves the border), and simply
   does not move when the page scrolls. `<canvas>` is a replaced element, so `inset: 0` alone
   leaves it at its intrinsic 300x150: the explicit size is required, not belt-and-braces. */
#field {
  position: fixed;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  z-index: var(--il-z-field);
  display: block;
  pointer-events: none;   /* never swallow a click meant for the page */
}

/* In-page links land under a 64px sticky header without this. */
html { scroll-padding-block-start: var(--il-space-9); }

/* ================================================================================ HEADER */
/* Sticky and opaque: a transparent sticky bar over a scrolling page is unreadable, and the
   ground is `--il-paper` either way, so the field simply continues underneath it. */
.site-nav {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--il-z-header);
  background: var(--il-paper);
}
/* Compact on scroll — the bar loses 16px of height and nothing else. The wordmark is left
   alone on purpose: its documented minimum is 96px wide (wordmark/README.md) and shrinking
   it in a header is how an identity quietly ends up under its own floor. */
.site-nav .il-nav__bar {
  transition: min-block-size var(--il-dur-ui) var(--il-ease);
}
:root[data-scrolled] .site-nav .il-nav__bar {
  min-block-size: var(--il-space-7);
}

/* The theme control. One button cycling light → dark → system: three separate controls in a
   bar that already carries nine links is the density the client objected to. It borrows
   `.il-label`'s mono face and `.il-lang__link`'s behaviour, and introduces no new colour. */
.site-theme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: var(--il-target);
  min-inline-size: var(--il-target);
  padding-inline: var(--il-space-2);
  color: var(--il-ink-muted);
  transition: color var(--il-dur-micro) var(--il-ease);
}
.site-theme:hover { color: var(--il-ink); }
.site-theme__value { display: block; }

/* ================================================================================== HERO */
/* Four things and nothing else, set low and left, with a large empty region above
   (DECISIONS §7b; target `w3_S1-light-sparse.png`).
   Three type sizes: the mono eyebrow, the display headline, the standfirst. */
.site-hero {
  display: flex;
  align-items: flex-end;
  /* Tall enough that the next section is below the fold at every one of the five verified
     viewports — the hero is four things, and a fifth line of the lede peeking in under the
     standfirst is a fifth thing. The px cap stops a very tall window from turning the empty
     region above into a void. */
  min-block-size: min(86svh, 960px);
  padding-block: var(--il-space-9) var(--il-space-8);
}
@media (min-width: 900px) {
  .site-hero { padding-block-end: var(--il-space-9); }
}
.site-hero__headline {
  /* display-1 is the one loud thing on the page. */
  font-size: var(--il-text-display-1);
  line-height: var(--il-leading-display-1);
  letter-spacing: var(--il-tracking-display-1);
  font-weight: var(--il-wght-semibold);
  font-stretch: var(--il-wdth-display);
  /* The motif worker measured the approved study: the signal rule sits in equal clear space
     between the eyebrow and the headline's cap top, ~1.9x the eyebrow's cap height. */
  margin-block-start: var(--il-space-6);
}
.site-hero__standfirst {
  margin-block-start: var(--il-space-5);
  font-size: var(--il-text-body-lg);
  line-height: var(--il-leading-body-lg);
  color: var(--il-ink-2);
  max-inline-size: 44ch;
}

/* ================================================================================== LEDE */
/* The two paragraphs from the live site, deliberately out of the hero. No heading, no rule,
   no label — one element, one type size, and a lot of paper. */
.site-lede {
  padding-block: var(--il-space-9) var(--il-space-8);
}
@media (min-width: 900px) {
  .site-lede { padding-block: var(--il-space-10) var(--il-space-9); }
}
.site-lede__measure {
  max-inline-size: 54ch;
  display: grid;
  gap: var(--il-space-5);
  font-size: var(--il-text-h3);
  line-height: var(--il-leading-h3);
  letter-spacing: var(--il-tracking-h3);
}

/* ========================================================================= SECTION HEADS */
/* One object, used by every section below the hero: an emphatic hairline, then a mono label.
   It is the same head the work index (`.il-index__head`) and every dataviz figure already
   carry, so the page has ONE way of saying "a new region starts here" — and it spends no
   signal, because the hero eyebrow has spent the page's one rule. */
.site-head {
  border-block-start: var(--il-hairline) solid var(--il-rule-strong);
  padding-block-start: var(--il-space-6);
  margin-block-end: var(--il-space-7);
}

/* ================================================================================= PROSE */
.site-prose {
  max-inline-size: var(--il-container-prose);
  display: grid;
  gap: var(--il-space-5);
  font-size: var(--il-text-body-lg);
  line-height: var(--il-leading-body-lg);
  color: var(--il-ink-2);
}
.site-prose strong { color: var(--il-ink); font-weight: var(--il-wght-semibold); }
.site-prose--single { max-inline-size: 58ch; }

/* =============================================================================== PILLARS */
/* The section-bar motif three times over (motifs/README.md): hairline, mono number, label.
   No boxes — the rule and the number are the entire structure.
   Three type sizes: the mono label (head and numbers), the h3 titles, the body. */
.site-pillars {
  display: grid;
  gap: var(--il-space-8);
}
@media (min-width: 900px) {
  .site-pillars {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--il-space-7);
  }
}
.site-pillar {
  border-block-start: var(--il-hairline) solid var(--il-rule);
  padding-block-start: var(--il-space-4);
}
.site-pillar__title {
  margin-block-start: var(--il-space-4);
  font-size: var(--il-text-h3);
  line-height: var(--il-leading-h3);
  letter-spacing: var(--il-tracking-h3);
  font-weight: var(--il-wght-semibold);
}
.site-pillar__body {
  margin-block-start: var(--il-space-3);
  color: var(--il-ink-2);
  max-inline-size: 44ch;
}

/* ========================================================================== CAPABILITIES */
/* Stacked, not gridded: the pillars above are already a three-column row, and two of those
   in succession is the "every region filled" rhythm the client objected to. The mono name
   sits in the same 240px left column the work index uses, so the two read as one system.
   Two type sizes: the mono label and the body. */
.site-capabilities {
  display: grid;
  gap: var(--il-space-8);
}
.site-capability { display: grid; gap: var(--il-space-3); }
@media (min-width: 720px) {
  .site-capability {
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 0 var(--il-space-5);
    align-items: baseline;
  }
}
.site-capability__name { color: var(--il-ink); }
.site-capability p {
  color: var(--il-ink-2);
  max-inline-size: 56ch;
  font-size: var(--il-text-body-lg);
  line-height: var(--il-leading-body-lg);
}

/* ============================================================================ PULL QUOTE */
/* The motif worker's treatment (motifs/README.md, `mark-quote`): a 2px signal rule, clear
   space, the quote in Archivo 500 — 600 shouts at this size and the register is calm — and a
   mono attribution, because a pull quote in a source-cited brand carries its source.
   It keeps the signal: it is alone in its screenful, and the eyebrow only outranks it where
   the two would share one. */
.site-quoteband { padding-block: var(--il-space-9); }
@media (min-width: 900px) {
  .site-quoteband { padding-block: var(--il-space-10); }
}
.site-quote {
  margin: 0;
  border-inline-start: var(--il-mark) solid var(--il-signal);
  padding-inline-start: var(--il-space-5);
}
/* The measure lives on the element that carries the display size, not on the figure: `ch`
   resolves against the font-size of the element it is written on, and `.site-quote` inherits
   body. Written up there it silently gave a 183px column and broke the quote into six
   one-word lines. */
.site-quote__body p {
  max-inline-size: 26ch;
  font-size: var(--il-text-display-3);
  line-height: var(--il-leading-display-3);
  letter-spacing: var(--il-tracking-display-3);
  font-weight: var(--il-wght-medium);
}
.site-quote__source {
  margin-block-start: var(--il-space-5);
  color: var(--il-ink-muted);
}

/* =============================================================================== FIGURES */
/* The dataviz worker's charts, inlined so `currentColor` and `var(--il-signal)` resolve.
   Capped at their native 960px rather than stretched to the container: scaling a chart up
   scales its type up with it, and a 27px figure title would start competing with the page's
   own scale. Below 720px the compact build takes over — it has its own cluster and lane
   geometry, and is not the desktop picture scaled (ui/dataviz/README.md, "Two widths"). */
.site-figure {
  margin: 0;
  margin-block-start: var(--il-space-8);
  max-inline-size: 960px;
}
.site-figure svg { inline-size: 100%; block-size: auto; }
/* Pull each chart left by its OWN chrome margin, so the figure's rules land on the same
   left edge as the section head's rule and the running text. Without it a chart sits 32px
   in from everything else on the page, which reads as a slip rather than as a margin.
   The figure box is always exactly as wide as the chart it holds, so a percentage margin on
   the <svg> resolves to that margin at whatever scale the chart is currently drawn.
   The two ratios are the charts' own numbers — 32 of 960, 16 of 360 — and verify_site.py
   reads both back out of the source SVGs, so they cannot quietly go stale. */
.site-figure--desk svg { margin-inline-start: calc(100% * -32 / 960); }
.site-figure--compact svg { margin-inline-start: calc(100% * -16 / 360); }
.site-figure--compact { display: none; max-inline-size: 360px; }
@media (max-width: 719px) {
  .site-figure--desk { display: none; }
  .site-figure--compact { display: block; }
}

/* =========================================================================== COLLABORATE */
/* Three type sizes: the mono head and field labels, the h2 statement, the body. */
.site-collab { display: grid; gap: var(--il-space-8); }
@media (min-width: 900px) {
  .site-collab {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--il-space-9);
    align-items: start;
  }
}
.site-statement {
  font-size: var(--il-text-h2);
  line-height: var(--il-leading-h2);
  letter-spacing: var(--il-tracking-h2);
  font-weight: var(--il-wght-semibold);
  max-inline-size: 22ch;
}
.site-collab__note {
  margin-block-start: var(--il-space-5);
  color: var(--il-ink-2);
  max-inline-size: 44ch;
}
.site-collab__form { max-inline-size: none; }
.site-collab__actions { display: flex; gap: var(--il-space-4); }
/* Stated, not simulated. The status is a real `.il-notice`, revealed only after a submit.
   `[hidden]` needs restating here: `.il-notice` sets `display: flex`, which is a class
   selector and beats the UA's `[hidden] { display: none }` — so without this the status was
   on screen from the start. */
.site-form-status { max-inline-size: 52ch; }
.site-form-status[hidden] { display: none; }

/* ================================================================================ FOOTER */
.site-footer { margin-block-start: var(--il-space-9); }
@media (min-width: 900px) {
  .site-footer { margin-block-start: var(--il-space-10); }
}