@layer base {
  html {
    scroll-behavior: smooth;
    background: var(--c-basalt);
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
  }

  body {
    font-family: var(--f-body);
    font-size: var(--t-md);
    line-height: 1.65;   /* light-on-dark, so nudged up */
    color: var(--c-ash-hi);
    background: var(--c-basalt);
    overflow-x: hidden;
    font-synthesis-weight: none;
  }

  h1, h2, h3, .display {
    font-family: var(--f-display);
    font-weight: 800;
    line-height: 0.86;
    letter-spacing: -0.015em;
    color: var(--c-bone);
    text-transform: uppercase;
    text-wrap: balance;
  }

  h1 { font-size: var(--t-2xl); }
  h2 { font-size: var(--t-xl); }
  h3 { font-size: var(--t-lg); line-height: 1.02; }

  p { max-width: var(--measure); text-wrap: pretty; }

  strong { color: var(--c-bone); font-weight: 600; }

  /* Technical voice: every readout, index and label on the site. */
  .mono {
    font-family: var(--f-mono);
    font-size: var(--t-2xs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1.4;
    color: var(--c-ash);
  }

  .mono--ember { color: var(--c-ember); }

  .eyebrow {
    font-family: var(--f-mono);
    font-size: var(--t-2xs);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--c-ember);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
  }

  .eyebrow::before {
    content: "";
    inline-size: clamp(28px, 6vw, 64px);
    block-size: 1px;
    background: currentColor;
    flex: none;
  }

  .lede {
    font-size: var(--t-md);
    color: var(--c-ash-hi);
    max-inline-size: 46ch;
  }
}