/* ============================================================================
   Reset + base typography. Tokens only — see tokens.css.
   ========================================================================= */

@layer base {

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.62;
  overflow-x: hidden;
}
img { max-width: 100%; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-radius: var(--radius);
}

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--surface); color: var(--ink);
  padding: var(--s3) var(--s4); z-index: 100;
  border: 1px solid var(--rule-strong);
}
.skip:focus { left: var(--s4); top: var(--s4); }

.vh {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------- typography --- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.prose { max-width: 68ch; color: var(--ink-2); }
.prose + .prose { margin-top: var(--s4); }
.small { font-size: var(--fs-small); line-height: 1.5; }

} /* @layer base */