/* ==========================================================================
   base.css — reset, document defaults, typography, focus, utilities.
   Loaded after tokens.css. No hard-coded colours, sizes or durations here:
   everything comes from a custom property.
   ========================================================================== */

/* ---- RESET --------------------------------------------------------------- */

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

/* Margins are opt-in, set by the flow utility and the prose block below. */
body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ol, ul, fieldset {
  margin: 0;
}

ul[class], ol[class] { list-style: none; padding: 0; }

html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Sticky-header offset for in-page anchors. */
  scroll-padding-top: calc(var(--header-h) + var(--sp-5));
  -moz-tab-size: 2;
  tab-size: 2;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  min-height: 100svh;
  margin: 0;
  background-color: var(--c-paper);
  color: var(--c-text);
  font-family: var(--font-text);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  /* Section 12: no horizontal scroll at any width. Wide content scrolls
     inside its own container instead - see .u-scroll-x. Clip is set on the
     root as well as the body: a position:fixed element (the mobile nav
     overlay, parked off-screen) is laid out against the viewport and is not
     clipped by the body, so clipping only the body still leaves the page
     scrollable sideways. */
  overflow-x: clip;
}

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

/* Every image and inline SVG carries explicit width and height attributes.
   This keeps the intrinsic ratio while allowing fluid width, so CLS stays 0. */
img, svg[width][height] { height: auto; }

input, button, textarea, select { font: inherit; color: inherit; }

button { background: none; border: none; padding: 0; cursor: pointer; }

textarea { resize: vertical; }

table { border-collapse: collapse; border-spacing: 0; }

hr {
  height: var(--bw-hair);
  border: 0;
  background-color: var(--c-border);
  margin-block: var(--sp-6);
}

::selection {
  background-color: var(--c-floodlight);
  color: var(--c-ink);
}

/* ---- MOTION -------------------------------------------------------------- */

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

/* ---- FOCUS ---------------------------------------------------------------
   A two-part ring: a core in the opposite of the page ground plus a permanent
   amber halo. Visible on paper, on pitch green, on amber and over photography.
   Never removed anywhere in the codebase. */

:focus-visible {
  outline: var(--focus-width) solid var(--c-focus);
  outline-offset: var(--focus-offset);
  box-shadow: 0 0 0 calc(var(--focus-width) + var(--focus-offset) + 2px)
              var(--c-focus-halo);
  border-radius: var(--r-xs);
}

/* Mouse users do not get the ring, keyboard users always do. */
:focus:not(:focus-visible) { outline: none; }

/* SVG elements cannot take box-shadow reliably; give them a stroke instead. */
svg :focus-visible {
  outline: var(--focus-width) solid var(--c-focus);
  outline-offset: 1px;
  box-shadow: none;
}

/* ---- TYPOGRAPHY ---------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  /* Bold, not black. 900 was chosen for a condensed poster face; on a UI face
     it thickens the strokes until the counters close up, which is most of what
     made the old headings hard to read. */
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  text-wrap: balance;
  color: var(--c-text);
}

h1 { font-size: var(--fs-4xl); line-height: var(--lh-display); }
h2 { font-size: var(--fs-3xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }
h5 { font-size: var(--fs-md); }
h6 {
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
}

p { text-wrap: pretty; }

a {
  color: var(--c-link);
  text-decoration-thickness: max(0.08em, 1px);
  text-underline-offset: 0.16em;
}
a:hover { color: var(--c-link-hover); text-decoration-thickness: max(0.14em, 2px); }
/* Buttons are excluded. a:visited is (0,1,1) and beats every single-class rule
   that sets a button's colour, so once a reader had followed a link the button
   pointing at it turned link-visited blue — dark, and on the hero's photograph
   unreadable. :not(.btn) is how the rest of this stylesheet keeps link colours
   off buttons. Note that :hover needs no such guard: .btn:hover is (0,2,0) and
   already outranks a:hover. */
a:not(.btn):visited { color: var(--c-link-visited); }

strong, b { font-weight: var(--fw-bold); }

small { font-size: var(--fs-sm); }

abbr[title] { text-decoration: underline dotted; cursor: help; }

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

code {
  background-color: var(--c-surface-3);
  padding: 0.1em 0.35em;
  border-radius: var(--r-xs);
}

pre {
  background-color: var(--c-surface-3);
  border: var(--bw-hair) solid var(--c-border);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  overflow-x: auto;
}
pre code { background: none; padding: 0; }

blockquote { margin: 0; }

figcaption {
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
  margin-top: var(--sp-2);
}

/* ---- PROSE ---------------------------------------------------------------
   Applied to any block of running copy. Sets the measure and the vertical
   rhythm in one place. */

.prose {
  max-width: var(--measure);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
}

.prose > * + * { margin-top: var(--sp-4); }
.prose > * + h2 { margin-top: var(--sp-7); }
.prose > * + h3 { margin-top: var(--sp-6); }
.prose > h2 + *,
.prose > h3 + * { margin-top: var(--sp-3); }

.prose ul,
.prose ol { padding-left: var(--sp-5); }
.prose li + li { margin-top: var(--sp-2); }
.prose ul { list-style: square; }

.prose--narrow { max-width: var(--measure-narrow); }
.prose--wide   { max-width: var(--measure-wide); }

/* Vertical rhythm without touching the measure. */
.flow > * + * { margin-top: var(--flow-space, var(--sp-4)); }

/* ---- LISTS THAT ARE NOT DECORATION --------------------------------------- */

.list-plain { list-style: none; padding: 0; margin: 0; }

/* ---- UTILITIES ----------------------------------------------------------- */

.u-visually-hidden:not(:focus):not(:active) {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Present in the DOM, reachable by keyboard and screen reader, invisible to
   sighted users until focused. Used for chart data tables. */
.u-sr-focusable {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.u-sr-focusable:focus-within {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip-path: none;
  white-space: normal;
}

.u-scroll-x {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-gutter: stable;
}

.u-no-wrap { white-space: nowrap; }
.u-tabular { font-variant-numeric: tabular-nums; }
.u-center  { margin-inline: auto; }
.u-measure { max-width: var(--measure); }

.u-caps {
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}

.u-display {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}

.u-muted { color: var(--c-text-muted); }
.u-faint { color: var(--c-text-faint); }

.u-hidden { display: none !important; }

/* Only shown when the document has no JavaScript, and vice versa. The class
   js-on is added to <html> by a tiny inline script in the head of every page. */
.js .u-no-js-only { display: none !important; }
html:not(.js) .u-js-only { display: none !important; }

/* ---- SKIP LINK ----------------------------------------------------------- */

.skip-link {
  position: absolute;
  top: var(--sp-2);
  left: var(--sp-2);
  z-index: var(--z-skip);
  transform: translateY(-200%);
  background-color: var(--c-ink);
  color: var(--c-paper);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  text-decoration: none;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-sm);
  transition: transform var(--dur-fast) var(--ease-out);
}
.skip-link:focus {
  transform: translateY(0);
  color: var(--c-paper);
}

/* ---- FORCED COLOURS (Windows High Contrast) ------------------------------ */

@media (forced-colors: active) {
  :focus-visible { outline: 3px solid CanvasText; box-shadow: none; }
  .btn { border: 1px solid ButtonText; }
}