/* ==========================================================================
   Base: reset, typography and layout utilities.
   ========================================================================== */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  min-height: 100svh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-body);
  -webkit-font-smoothing: antialiased;
}

img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
input, textarea, select, button { font: inherit; letter-spacing: inherit; color: inherit; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }

:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }

/* ---- Headings: lowercase by convention, written that way in the copy so
   acronyms like NCAA keep their capitals ---- */
h1, h2, h3, h4 {
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}
h1 { font-size: var(--text-4xl); line-height: var(--leading-solid); }
h2 { font-size: var(--text-3xl); }
h3, .h3 { font-size: var(--text-xl); line-height: var(--leading-snug); letter-spacing: var(--tracking-snug); }
h4 { font-size: var(--text-xl); letter-spacing: var(--tracking-snug); line-height: var(--leading-snug); }

p { max-width: 62ch; text-wrap: pretty; }
.lead { font-size: var(--text-lg); line-height: 1.4; letter-spacing: -0.012em; }
.muted { color: var(--color-text-muted); }
.small { font-size: var(--text-sm); }

/* Small section marker: "01 colour" */
.label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
}

/* ---- Layout ---- */
.container { width: min(100% - 2 * var(--gutter), var(--container-max)); margin-inline: auto; }

.section { padding-block: clamp(var(--space-8), 10vw, var(--space-10)); }

.stack > * + * { margin-top: var(--stack-gap, var(--space-5)); }

.grid { display: grid; gap: var(--grid-gap, var(--space-6)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }

/* Offset split: label left, content right, the asymmetry of the board */
.split { display: grid; gap: var(--space-5); }
@media (min-width: 60rem) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-7); }
}

/* ---- Inverse section: blue ground, paper text ---- */
.section--ink {
  --color-text: var(--color-on-ink);
  --color-text-muted: var(--color-on-ink-muted);
  --color-border: rgb(248 248 248 / 0.25);
  --color-border-strong: var(--color-on-ink);
  --color-accent: var(--color-on-ink);
  background: var(--color-ink-bg);
  color: var(--color-text);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}