@layer base {
  h1,
  h2,
  h3,
  h4 {
    margin: 0 0 var(--fp-space-3);
    color: var(--fp-color-text-primary);
    font-family: var(--fp-font-heading);
    font-weight: 800;
    letter-spacing: 0;
    line-height: var(--fp-leading-tight);
  }

  h1 {
    font-size: var(--fp-text-2xl);
  }

  h2 {
    font-size: var(--fp-text-xl);
  }

  h3 {
    font-size: var(--fp-text-lg);
  }

  p {
    margin: 0 0 var(--fp-space-4);
  }

  small,
  .muted {
    color: var(--fp-color-text-muted);
  }

  .fp-kicker {
    color: var(--fp-color-brand-accent);
    font-size: var(--fp-text-xs);
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .fp-readable {
    max-width: 74ch;
  }

  .fp-readable > * + * {
    margin-top: var(--fp-space-4);
  }
}