.prose {
  --prose-links: var(--forest);
  --prose-headings: var(--forest-deep);

  /* @apply .flow */
  & > * + * {
    margin-block-start: var(--flow-space, 1lh);
  }

  & :not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    /* Layout */
    &:where(p + ul, p + ol, li, li > *, figure > *, dd) {
      margin-top: 0.5lh;
    }

    /* @apply .text-fluid-1 */
    &:where(h1) {
      font-size: var(--text-fluid-1);
      font-weight: 500;
      color: var(--prose-headings);
    }

    /* @apply .text-fluid-2 */
    &:where(h2) {
      font-size: var(--text-fluid-2);
      font-weight: 500;
      color: var(--prose-headings);
    }

    &:where(a) {
      color: var(--prose-links);
      font-weight: 500;
      text-decoration: 1px currentColor underline;
      text-underline-offset: 2px;

      &:focus-visible {
        text-decoration: none;
        outline-offset: 1px;
      }
    }
  }
}