@layer base {
  :where(p) {
    font-size: clamp(1rem, 3vw, 1.13rem);
    line-height: 2;
  }

  :where(h1, h2, h3, h4, h5, h6, [class*="heading-level-"]) {
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
  }

  :where(h1, h2, h3, h4, h5, h6):not(:last-child) {
    margin-bottom: .6em;
  }

  :where(h1, .heading-level-1) {
    font-size: clamp(3.5rem, 12vw, 5.5rem);
    color: hsl(from var(--color-theme-primary) h s calc(l + 15));
  }

  :where(h2, .heading-level-2) {
    font-size: 2rem;
  }

  :where(h3, .heading-level-3) {
    font-size: 1.75rem;
  }

  :where(h4, .heading-level-4) {
    font-size: 1.5rem;
  }

  :where(h5, .heading-level-5) {
    font-size: 1.25rem;
  }

  :where(h6, .heading-level-6) {
    font-size: 1rem;
  }

  :where(a) {
    text-decoration: none;
  }

  p:where(p > a) {
    color: hsl(from var(--color-theme-primary) h s calc(l + 15%));
    text-underline-offset: 3px;
    text-decoration: underline;
    font-weight: 700;
  }

  a:is(:hover, :focus) {
    color: var(--color-white);
    text-decoration: none;
  }

  small {
    font-size: 0.875rem;
  }

  code,
  pre {
    font-family: var(--font-primary), monospace;
    font-size: 0.9em;
  }

  pre {
    overflow-x: auto;
    line-height: 1.6;
  }

  blockquote {
    border-left: 3px solid var(--color-theme-primary);
    padding-left: 1rem;
    font-weight: 500;
    color: var(--color-theme-alert);
  }
}