/* =============================================================================
   Base — informal, v0.1
   Reset + document defaults. Deliberately minimal: no framework, no utility
   layer, no preprocessor.
   ========================================================================== */

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

* {
  margin: 0;
}

/* --- [hidden] -------------------------------------------------------------
   The UA's own `[hidden] { display: none }` is a bare attribute selector, so
   anything more specific beats it — and the img/svg/video rule below states a
   real `display`, so an `<img hidden>` would still be drawn. Stated here at the
   weight the attribute promises, the way a reset states any of the others. */
[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* The page is light-only, and says so — in the one spelling that is actually
     listened to. `color-scheme` is the document telling the UA which schemes it
     was designed for, and it is what stops a UA that auto-darkens (Chrome's Auto
     Dark Theme, `--force-dark-mode`, an OS-level invert) from re-painting this
     one on its own. Left unsaid, the page is fair game: the UA turns paper to
     black and ink to white and a visitor sees a "black section" nobody authored —
     exactly the report that arrives when a monochrome white page meets a dark-mode
     browser, and there is no dark variant anywhere here to blame (tokens.css fixes
     #ffffff paper / #000000 ink and nothing points them at a `prefers-color-scheme`
     block).

     THE `only` IS THE WHOLE POINT. Measured, not assumed: under `--force-dark-mode
     --enable-features=WebContentsForceDark`, a white page declaring
     `color-scheme: light` is darkened (rgb(18,18,18)) exactly like one declaring
     nothing, and the `<meta name="color-scheme" content="light">` form is darkened
     too; only `color-scheme: only light` survives, the page staying rgb(255,255,255).
     `light` says "this page can do light"; `only light` says "this page can do
     light and NOTHING ELSE", and it is the second that an auto-darkening UA honours
     as an opt-out. So the page keeps its one scheme, form controls and scrollbars
     follow it, and the monochrome pair stays put. */
  color-scheme: only light;
  /* Keep anchored sections clear of the sticky header. This MUST track the
     real header height (--header-h): too small and every in-page anchor lands
     with its target hidden underneath the header. */
  scroll-padding-block-start: var(--header-offset);
}

body {
  background: var(--c-bg);
  color: var(--c-fg);
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1,
h2,
h3 {
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

a {
  color: inherit;
}

/* Focus: the source system had no focus treatment at all. This is the token
   for it — a 2px offset ring in the foreground colour, legible on both black
   and white surfaces because it carries its own contrast gap. */
:focus-visible {
  outline: var(--bw-base) solid var(--c-fg);
  outline-offset: 2px;
}

/* On a black surface the ring has to invert, or it disappears. */
.on-dark :focus-visible {
  outline-color: var(--c-bg);
}

::selection {
  background: var(--c-fg);
  color: var(--c-bg);
}

/* --- Layout primitives ---------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--pad-page);
}

.stack > * + * {
  margin-block-start: var(--stack-gap, var(--s-4));
}

/* --- Shared type treatments ---------------------------------------------- */

.eyebrow {
  font-size: var(--fs-meta);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.meta {
  font-size: var(--fs-meta);
  color: var(--c-muted);
}

.lead {
  font-size: 1.125rem;
  max-width: 48ch;
}

/* A rule that matches the border-weight language. */
.rule {
  border: 0;
  border-block-start: var(--bw-hairline) solid var(--c-fg);
}

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