@utility prose {
  display: flex;
  flex-flow: column;
  gap: 1lh;
  /* Inherits into descendants — Safari (only implementer) hangs decorative
   * punctuation glyphs (e.g. a ::before quote mark) fully outside their box.
   * Opt those out with hanging-punctuation: none. */
  hanging-punctuation: first allow-end last;

  /* Using padding instead of margin, so #targets will leave some whitespace above when scrolling to the component. */
  > * + :where(h2),
  > * + :where(astro-island, astro-slot) > :where(h2):first-child {
    margin-top: calc(var(--spacing) * 6);
    scroll-margin-block: calc(var(--spacing) * 6);
  }

  > * + :where(h3),
  > * + :where(astro-island, astro-slot) > :where(h3):first-child {
    margin-top: calc(var(--spacing) * 4);
    scroll-margin-block: calc(var(--spacing) * 4);
  }

  > * + :where(h4, h5, h6),
  > * + :where(astro-island, astro-slot) > :where(h4, h5, h6):first-child {
    margin-top: calc(var(--spacing) * 2);
    scroll-margin-block: calc(var(--spacing) * 2);
  }

  :where(ul) {
    list-style-type: initial;
  }

  /* Basic list styles */
  :where(ul, ol),
  > :where(astro-island, astro-slot) :where(ul, ol) {
    list-style-position: outside;
    margin-left: 2em;

    :where(ul, ol) {
      margin-left: 0;
      padding-left: 1em;
    }

    li {
      font-variant-numeric: lining-nums;
    }

    li + li {
      margin-top: calc(var(--spacing));
    }

    li > :where(ul, ol) {
      margin-top: calc(var(--spacing));
    }
  }

  :where(a) {
    text-decoration-line: underline;
  }

  :where(> img),
  :where(> figure img) {
    border: 1px solid oklch(90% 0 0deg);
    border-radius: var(--radius);
  }

  :where(> figure) {
    inline-size: fit-content;
    margin-inline: auto;
  }

  :where(> figure figcaption) {
    contain: inline-size;
  }

  :where(.fancylist) {
    margin-left: 1em;
    padding-left: 0;
  }
}

@utility prose-tight {
  @apply prose;
  gap: 1em;
}