/* ============================================================
   base.css  ·  reset, shell, shared primitives (v12 MASTHEAD)
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; background: var(--paper) !important; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  position: relative;
  font-family: var(--f-body);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.6;
  color: var(--fg);
  background: var(--bg) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* grain — a static paper-fiber texture on the ground, per KO. One
   inline SVG noise tile, no animation (nothing for reduced-motion to
   disable), zero network requests. multiply (not overlay) so it only
   darkens the light ground instead of washing it out. */
body::before {
  content: "";
  position: fixed; inset: 0;
  z-index: 500;
  pointer-events: none;
  opacity: var(--grain-opacity);
  mix-blend-mode: var(--grain-blend);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

::selection { background: var(--ink); color: var(--paper); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.nav :focus-visible { outline-color: var(--band-fg); }

/* section shell */
.section { background: var(--bg); color: var(--fg); padding-block: var(--s16); }
@media (max-width: 720px) { .section { padding-block: var(--s10); } }
.section--tight { padding-block: var(--s10); }

/* eyebrow — tiny tracked-caps label. never empty/vague content. */
.eyebrow {
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: var(--s3);
}

/* display title — uppercase, condensed, tight leading, fills the
   full column width edge to edge. print logic, not a UI heading. */
.section-title {
  font-family: var(--f-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: var(--t-h2);
  line-height: 0.9;
  letter-spacing: -0.005em;
}

/* lead paragraph under a title — sentence case body copy */
.section-lead {
  margin-top: var(--s4);
  max-width: 60ch;
  font-size: var(--t-lead);
  font-weight: 400;
  color: var(--fg-2);
}

/* buttons — square, sentence case, tracked. red is one of its three jobs. */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-mono);
  font-size: 0.85rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--on-red); background: var(--red);
  padding: 14px 26px;
  transition: background var(--dur-1) var(--ease-out);
}
.btn:hover { background: #970f1a; }
.btn-ghost {
  color: var(--fg); background: transparent;
  box-shadow: inset 0 0 0 1px var(--line);
}
.btn-ghost:hover { box-shadow: inset 0 0 0 1px var(--fg-2); }
.btn[aria-disabled="true"] { opacity: 0.4; pointer-events: none; }

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

/* the display headline's one red portion — never used outside a
   phero-title's second line, a scoreline interpunct, or a CTA. */
.accent { color: var(--red-ink); }

/* wordmark — inherits context (paper text in the inverted nav band,
   ink everywhere else). not a dedicated accent color this pass. */
.wordmark {
  font-family: var(--f-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.005em; line-height: 1; white-space: nowrap;
  color: currentColor;
}

/* The ground is now declared for both schemes in tokens.css, so nothing
   needs re-asserting here — and forcing paper would defeat dark mode. */