:where(body > main) {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--text-common);

  & > * + * {
    margin-top: 1.05em;
  }

  a {
    color: color-mix(in srgb, var(--primary-teal) 70%, var(--brand-charcoal));
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.18em;
    text-decoration-color: color-mix(in srgb, currentColor 55%, transparent);
    transition: color .15s ease, text-decoration-color .15s ease;

    &:hover {
      color: var(--primary-teal);
      text-decoration-color: currentColor;
    }
    &:visited { color: var(--brand-charcoal) }
    &:visited:hover { color: var(--primary-teal) }
  }  

  :where(h1, h2, h3, h4, h5, h6) {
    font-family: 'Playfair Display', serif;
    color: var(--brand-charcoal);
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin-top: 20px;
    margin-bottom: 16px;
    scroll-margin-top: 100px; /* helps anchor links with fixed nav */
  }
  h1 { font-size: clamp(2rem, 4vw, 2.6rem); }
  h2 { font-size: clamp(1.65rem, 3.2vw, 2.1rem); }
  h3 { font-size: clamp(1.35rem, 2.4vw, 1.65rem); }
  h4 { font-size: 1.25rem; line-height: 1.3; }
  h5 { font-size: 1.1rem; line-height: 1.35; }
  h6 {
    font-size: 0.95rem;
    line-height: 1.4;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-slate);
  }
  /* tighter spacing when a heading follows another heading */
  :where(h1, h2, h3, h4, h5, h6) + :where(h1, h2, h3, h4, h5, h6) {
    margin-top: 0.9em;
  }

  p { margin: 0; }
  :where(p, li) {
    text-align: justify;
    hyphens: auto;
    overflow-wrap: break-word;
  }
  :where(p, img, ul, ol, dl, div, figure) + p {text-indent: 2.25em;}
  :where(ul, ol) {
    margin: 0;
    padding-left: 1.25em;

    li {
        margin: 0.4em 0;
        padding-left: 0.15em;

        &::marker {
            color: var(--primary-teal);
            font-weight: 600;
        }
    }
  }
  ul { list-style: disc; }
  ol { list-style: decimal; }
  dl {
    margin: 1.5rem 0;
    dt {
      font-weight: 600;
      margin-top: 1rem;
      line-height: 1.4;

      &:first-child {
        margin-top: 0;
      }
    }
    dd {
      margin: 0.25rem 0 0.75rem 0;
      padding-left: 1.25em;

      color: var(--text-muted, #555);
      line-height: 1.6;
    }
    dt + dd + dd {
      margin-top: 0;
    }

    &.compact {
      dt { font-weight: 500 }
      dd { margin-bottom: 0.4rem; padding-left: 1em; }
    }
  }

  blockquote {
    border-left: 4px solid var(--primary-teal);
    padding-left: 20px;
    font-style: italic;
    font-size: 1.4rem;
    margin: 40px 0;
    color: var(--brand-charcoal);
  }

  img, figure {
    margin: 1.1em auto;
  }
  img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(2, 6, 23, 0.08);
  }
  figure {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: space-evenly;

    img { margin: 0; object-fit: cover; }
    figcaption {
        flex-basis: 100%;
        margin-top: 8px;
        font-size: 0.92em;
        opacity: 0.8;
        line-height: 1.4;
    }
  }

  /* Generic div blocks inside typography (cards/notes/sections) */
  div {
    /* keep neutral by default; spacing is handled by the rhythm rule above */
    border-radius: 16px;
  }

  /* Make empty divs (common for spacer/hero blocks) not accidentally tall */
  div:empty {
    min-height: 0;
    padding: 0;
  }
}

@media (min-width: 520px) {
  :where(body > main) {
    font-size: 1.1rem;
    line-height: 1.8;

    img { border-radius: 16px }
    .left { float: left }
    .right { float: right }
    .left, .right {
      max-width: 40%;
      margin: 8px;
    }
  }
}

@media (min-width: 700px) {
  :where(body > main) {
    dl.columns {
      display: grid;
      grid-template-columns: max-content 1fr;
      column-gap: 1.5rem;

      dt {
        margin: 0;
      }

      dd {
        margin: 0 0 1rem 0;
        padding-left: 0;
      }
    }
  }
}