/* ============================================================================
   BASE — reset, document defaults, layout primitives.
   Reads tokens only. No literal colours or sizes below this line.
   ========================================================================== */

/* --- webfonts -------------------------------------------------------------
   Open Sans, self-hosted. NOT linked from Google Fonts on purpose: the
   prototype has to open from file:// out of a folder someone was emailed, and
   a remote stylesheet would leave it unstyled offline. Latin subset, 60KB.

   These are VARIABLE files covering the 300-800 weight axis, so one file
   serves regular, medium and bold — declaring the range rather than three
   fixed weights is what keeps it to a single download.

   Paths are relative to this file, so they resolve from any page depth.
   `swap` so text is readable immediately and never invisible while loading. */
@font-face {
  font-family: "Open Sans"; font-style: normal; font-weight: 300 800;
  font-display: swap; src: url("../fonts/open-sans.woff2") format("woff2");
}
@font-face {
  font-family: "Open Sans"; font-style: italic; font-weight: 300 800;
  font-display: swap; src: url("../fonts/open-sans-italic.woff2") format("woff2");
}

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

html { -webkit-text-size-adjust: 100%; }
/* In-page links (On this page, and any #fragment) glide rather than jump
   (Oct 2026). Only for readers who have not asked for reduced motion; the
   browser sets the pace, which is short and eased. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--color-page);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-body);
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-4);
  font-weight: var(--weight-bold);
}
h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
h4 { font-size: var(--text-md); }

p, ul, ol { margin: 0 0 var(--space-4); }
p { max-width: var(--measure); }

a { color: var(--color-text-link); text-decoration: underline; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

img, svg { max-width: 100%; display: block; }

button { font: inherit; cursor: pointer; }

/* Visible, consistent focus. Never remove this. */
:focus-visible {
  outline: var(--focus-width) solid var(--color-focus);
  outline-offset: var(--focus-offset);
}

/* --- accessibility helpers ------------------------------------------------ */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: var(--space-4); top: calc(var(--space-4) * -4);
  z-index: 100;
  background: var(--color-surface);
  color: var(--color-text);
  padding: var(--space-3) var(--space-4);
  border: var(--border-width) solid var(--color-border-strong);
  transition: top var(--duration-fast) var(--ease);
}
.skip-link:focus { top: var(--space-4); }

/* A full-bleed band (Version A's CheckFirst band was the first) bleeds full width with calc(50% - 50vw). On platforms
   with classic (space-taking) scrollbars, 100vw is wider than the client box,
   so that bleed would push a horizontal scrollbar onto every page carrying
   the band. `clip` trims the overhang without creating a scroll container —
   unlike `hidden`, which would break the sticky On This Page rail. */
body { overflow-x: clip; }

/* --- layout primitives ---------------------------------------------------- */
.shell {
  width: 100%;
  max-width: var(--layout-max);
  margin-inline: auto;
  padding-inline: var(--layout-gutter);
}

.stack > * + * { margin-top: var(--space-4); }
.stack-lg > * + * { margin-top: var(--space-6); }

/* Symmetric. The separation from the footer belongs to .site-footer's own
   margin — see the note there. */
.page-body { padding-block: var(--space-8); }

/* Grey block standing in for un-designed content, as per the lo-fi wires. */
.placeholder--tall { min-height: var(--placeholder-h-tall); }

.placeholder {
  background: var(--color-placeholder);
  border-radius: var(--radius-sm);
  min-height: var(--placeholder-h);
}