/* ===========================================================================
   Elasticity — base resets & typography. Depends on tokens.css + fonts.css.
   Theme-agnostic: everything reads role tokens, which tokens.css swaps.
   =========================================================================== */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv11", "ss01";  /* Inter: single-storey a, open digits */
  position: relative;
}

/* Headings are Geist (--display). font-feature-settings resets the body's
   Inter-specific cv11/ss01, which select unrelated alternates in Geist. */
h1, h2, h3 { font-family: var(--display); font-weight: 600; margin: 0; text-wrap: balance; line-height: 1.15; letter-spacing: -.02em; font-feature-settings: normal; }
a { color: var(--link); text-underline-offset: 2px; }
::selection { background: var(--accent-wash); color: var(--fg); }

/* Numbers are data here: tabular everywhere so columns line up. */
.num, .mono, code, kbd, samp { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); }

.sheet { max-width: 1120px; margin: 0 auto; padding-inline: var(--s4); padding-block: var(--s6) var(--s7); position: relative; }
@media (max-width: 720px) { .sheet { padding-block: var(--s5) var(--s6); } }

/* — section header: title + hairline running to the right edge. */
.sec { display: flex; align-items: center; gap: var(--s3); margin: var(--s7) 0 var(--s4); }
.sec::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.sec > .t { font-family: var(--display); font-size: 17px; font-weight: 600; letter-spacing: -.01em; color: var(--fg); }

/* — eyebrow: small uppercase mono label above a block (LLM Stats pattern). */
.eyebrow { font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-faint); }

.hint { color: var(--fg-faint); font-size: 12px; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}