/* Headings, paragraphs and links. */

@layer base {
  h1, h2, h3 { font-weight: 400; line-height: 1.15; margin: 0 0 0.75rem; }
  h1 {
    font: 400 2.6rem/1.1 var(--font-display);
    letter-spacing: 0.01em;
    margin-bottom: 1.25rem;

    @media (max-width: 860px) { font-size: 2.1rem; }

    &:has(+ .lede) { margin-bottom: 0.4rem; }
  }
  .lede { color: var(--muted); font-size: 1.1rem; margin-bottom: 1.5rem; }
  h2 { font: 700 1.35rem/1.2 var(--font-body); margin-top: 2rem; }
  h3 { font: 700 1.05rem/1.3 var(--font-body); }
  p { margin: 0 0 0.9rem; max-width: 70ch; }

  a {
    color: var(--ink);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;

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