/* ============================================================
   Base — resets, document type, links, focus, grounds.
   Loaded after tokens.css, before components.css.
   ============================================================ */

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--soft-black);
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  font-size: var(--body-base);
  line-height: var(--leading-body);
  text-wrap: pretty;
}

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

/* Body type does not scale with viewport — a freeze condition. */

/* ---------- Links ----------
   The default is the PROSE link, because that is the link a person adds
   later without touching CSS. Three requirements, all measured:
   · contrast — orange text measures 2.76:1 on paper, 2.34:1 on stone and
     1.51:1 on lilac, so the accent cannot carry the text colour.
     --text-strong measures 12.08 / 10.26 / 6.59 on the same grounds.
   · identification without colour — the underline does that, and the
     accent survives as the underline colour.
   · focus — the ring below, unchanged, at a 3px offset.
   Components that are not prose links (buttons, cards, tiles, nav rows,
   footer columns, the CTA text link) set their own colour AND clear the
   underline explicitly; see components.css. */
a {
  color: var(--text-strong);
  text-decoration: underline;
  text-decoration-color: var(--orange);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}
a:hover { color: var(--soft-black); text-decoration-thickness: 2px; }
.on-black a { color: var(--text-on-black); }
.on-black a:hover { color: var(--paper); }
.ground-lilac a { color: var(--soft-black); }
a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--soft-black);
  outline-offset: 3px;
}
.on-black a:focus-visible,
.on-black button:focus-visible {
  outline-color: var(--text-on-black);
}

/* ---------- Headings ---------- */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  line-height: var(--leading-display);
  margin: 0;
}
h1 { font-size: var(--display-hero); line-height: var(--leading-display-tight); }
h2 { font-size: var(--display-section); }
h3 { font-size: var(--display-card); }
p { margin: 0; }

/* ---------- Layout shell ---------- */
.shell {
  width: min(100%, var(--container-max));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.band { width: 100%; padding-block: var(--pad-section); }
.band--hero  { padding-block: var(--pad-band); }
.band--tight { padding-block: var(--pad-tight); }
.band--utility { padding-block: var(--pad-utility); }

/* ---------- Grounds ----------
   paper and white are DISTINCT grounds in this system, not synonyms.
   Two matching grounds must never touch; where a light ground meets a
   lined ground the boundary carries .ground-rule. */
.ground-paper { background: var(--paper); }
.ground-white { background: #fff; }
.ground-stone { background: var(--stone); }
.ground-lilac { background: var(--lilac); color: var(--soft-black); }
.ground-black { background: var(--soft-black); color: var(--text-on-black); }
.ground-lined {
  background: var(--paper) url("../../assets/backgrounds/lined-paper-1920x1080.png")
              top center / 100% auto repeat-y;
}

/* The boundary rule is a rule, not a per-page border — it belongs to the
   boundary, so removing or reordering a section cannot orphan it. */
.ground-rule { border-bottom: var(--border-ground); }
.ground-rule-top { border-top: var(--border-ground); }
.ground-rule-on-black { border-bottom: var(--border-on-black); }

/* Lilac carries soft-black text only, never white. Verified across all
   thirteen lilac grounds in the set — 21 v2 §1. */
.ground-lilac h1, .ground-lilac h2, .ground-lilac h3, .ground-lilac p { color: var(--soft-black); }

/* ---------- Eyebrows ----------
   B-32, approved. The WORDS take a compliant text token; the ORANGE stays
   as an adjacent decorative rule. Orange text measured 2.76:1 on paper and
   2.34:1 on stone; --text-strong measures 12.08 and 10.26. The topic cue is
   not lost — it moves from the letterforms to the marker beside them, and
   on cards it is already carried by the topic icon. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: max-content;      /* the marker must not squeeze the words */
  max-width: 100%;
  font-weight: var(--weight-eyebrow);
  font-size: var(--eyebrow-size);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--text-strong);
}
.eyebrow::before {
  content: "";
  flex: 0 0 auto;
  width: 20px;
  height: 2px;
  background: var(--orange);
}
/* Card eyebrows sit beside a topic icon, which is the cue: no second
   marker, and no rule to compete with the icon. */
.eyebrow--card {
  display: inline;
  font-size: var(--eyebrow-card-size);
  letter-spacing: var(--eyebrow-card-tracking);
}
.eyebrow--card::before { content: none; }
/* On dark grounds the words take the light text token. */
.on-black .eyebrow, .ground-black .eyebrow, .hero-dark .eyebrow { color: var(--text-on-black); }
/* On lilac, soft-black — DEV-03 — and the marker goes soft-black too,
   because orange sits too close to lilac in value to read at 2px. */
.ground-lilac .eyebrow { color: var(--soft-black); }
.ground-lilac .eyebrow::before { background: var(--soft-black); }

/* ---------- Measures ---------- */
.measure     { max-width: 32em; }
.measure-lead{ max-width: 30em; }
.measure-wide{ max-width: 44em; }
.measure-legal { max-width: var(--measure-legal); }

/* ---------- Utility ---------- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.status-line {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);   /* was --text-faint: 2.76:1 on paper. DEV-32 */
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  /* NOTE: house of hopium's S01 kicker delivers REAL COPY by script. Under
     reduced motion the copy must still be present — it is suppressed as
     animation, never as content. See 21 v2 §2. */
}

@media (max-width: 600px) {
  .band { padding-block: var(--pad-tight); }
  .band--hero { padding-block: var(--pad-section); }
}