@layer base {
  html {
    -webkit-text-size-adjust: 100%;
    font-optical-sizing: auto; /* lets Source Serif 4 pick its optical size */
    font-synthesis: none; /* no faux bold or italic, ever */
  }

  body {
    -webkit-font-smoothing: antialiased;
    background: var(--color-ground);
    color: var(--color-ink);
    font-family: var(--font-text);
  }

  h1 {
    font: var(--text-h1);
    letter-spacing: -0.015em;
    text-wrap: balance;
  }

  h2 {
    font: var(--text-h2);
    letter-spacing: -0.012em;
    text-wrap: balance;
  }

  /* Smaller headings never take the serif: it is for 22 px and above only. */
  h3 {
    font: var(--text-h3);
  }

  b,
  strong {
    font-weight: 600;
  }

  a {
    color: var(--color-ink);
    text-decoration: underline;
    text-underline-offset: 0.15em;

    &:hover {
      color: var(--color-muted);
    }
  }

  /* A link to an anchor scrolls it clear of the sticky header. */
  [id] {
    scroll-margin-block-start: 88px;
  }

  :focus-visible {
    outline: var(--focus-ring-size) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
  }
}