/* ==========================================================================
   BASE — reset, element defaults, layout primitives, utilities.
   ==========================================================================
   Everything here derives from tokens.css. No raw values.
   ========================================================================== */

@layer base {

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

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

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

  body {
    margin: 0;
    background: var(--c-paper);
    color: var(--c-ink);
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: var(--body-weight);
    line-height: var(--leading-body);
    -webkit-font-smoothing: antialiased;
  }

  /* ---- Headings ------------------------------------------------------- */

  h1, h2, h3 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: var(--display-weight);
    font-variation-settings: "opsz" var(--display-opsz);
    line-height: var(--leading-tight);
  }

  /* Display type that is not a heading — same treatment, or it reads lighter
     than the headings beside it. */
  .u-display {
    font-family: var(--font-display);
    font-weight: var(--display-weight);
    font-variation-settings: "opsz" var(--display-opsz);
  }

  p { margin: 0; }

  a { color: inherit; }

  :focus-visible {
    outline: 2px solid var(--c-seal);
    outline-offset: 3px;
  }

  /* ---- Layout primitives ---------------------------------------------- */

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

  .section {
    padding-block: var(--space-3xl);
    border-top: var(--border);
  }

  .section__head { margin-bottom: var(--space-2xl); }

  .section__head h2 {
    margin-top: var(--space-xs);
    font-size: var(--text-3xl);
    max-width: 20ch;
  }

  .section__head p {
    margin-top: var(--space-md);
    max-width: var(--measure);
    color: var(--c-ink-muted);
  }

  /* ---- Utilities ------------------------------------------------------- */

  .eyebrow {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--mono-weight);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--c-ink-muted);
  }

  .u-mono-label {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-mono);
    text-transform: uppercase;
  }

  .visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* ---- Motion ----------------------------------------------------------
     Only ever hide content when JS is present to bring it back, so the page
     renders fully without scripts, for crawlers, and in screenshots. */

  .js .reveal { opacity: 0; transform: translateY(8px); }

  .js .reveal.is-in {
    opacity: 1;
    transform: none;
    transition: opacity var(--duration-slow) var(--ease),
                transform var(--duration-slow) var(--ease);
  }

  .js tbody tr.reveal { transition-delay: calc(var(--i, 0) * var(--stagger)); }

  @media (prefers-reduced-motion: reduce) {
    .js .reveal { opacity: 1; transform: none; transition: none; }
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      transition-duration: 0.01ms !important;
    }
  }
}