@layer elements {

  /* ── BASE ────────────────────────────────────────────────────────────── */
  html {
    font-size: 16px;
  }

  body {
    background-color: var(--color-paper);
    color: var(--color-ink);
    font-family: var(--font-body);
    font-size: var(--size-base);
    line-height: var(--leading-read);
    -webkit-font-smoothing: antialiased;
  }

  /* ── HEADINGS ────────────────────────────────────────────────────────── */
  h1, h2, h3, h4, h5, h6 {
    line-height: var(--leading-tight);
    letter-spacing: -0.02em;
    text-wrap: pretty;
    font-weight: 500;
  }

  /* ── LINKS ──────────────────────────────────────────────────────────── */
  a {
    color: inherit;
    text-decoration-style: solid;
    text-underline-offset: 0.3ex;
    text-decoration-thickness: 1px;
  }

  /* ── PARAGRAPH INDENT ───────────────────────────────────────────────── */
  p:not(:first-of-type) {
    text-indent: var(--paragraph-indent);
  }

  *:not(p) + p {
    text-indent: 0;
  }

  /* ── MONOSPACE UI ───────────────────────────────────────────────────── */
  .label,
  .meta,
  .nav-item,
  .tag,
  code,
  pre {
    font-family: var(--font-mono);
    letter-spacing: 0.08em;
    line-height: var(--leading-mono);
  }

  /* ── PAGE GRID (base — 2-col for nav + content) ─────────────────────── */
  .page {
    display: grid;
    grid-template-columns: var(--nav-width) 1fr;
    min-height: 100vh;
    max-width: var(--page-max-width);
    margin: 0 auto;
  }

}