@layer typography {
  body {
    font-family: var(--font-body);
    font-size: var(--size-base);
    line-height: 1.6;
    color: var(--color-text);
    background-color: var(--color-bg);
  }

  /* h1–h3: display font, uppercase, tight leading */
  h1,
  h2,
  h3 {
    font-family: var(--font-display);
    font-weight: 400; /* display font has limited weights */
    line-height: 1.05;
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }

  /* h4–h6: subhead font, readable */
  h4,
  h5,
  h6 {
    font-family: var(--font-subhead);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0;
  }

  h1 { font-size: var(--size-4xl); }
  h2 { font-size: var(--size-3xl); }
  h3 { font-size: var(--size-2xl); }
  h4 { font-size: var(--size-xl); }
  h5 { font-size: var(--size-lg); }
  h6 { font-size: var(--size-base); }

  p {
    max-width: 68ch;
  }

  small {
    font-size: var(--size-sm);
  }

  code,
  kbd,
  samp,
  pre {
    font-family: var(--font-mono);
    font-size: 0.875em;
  }
}