@layer blocks {
  /* Running text: legal pages, settings, landing copy. Only covers what
     actually appears inside .prose: headings, paragraphs, lists, tables, code.
     Colour is inherited rather than set on p/li, so a colour utility on a
     paragraph inside .prose still wins. */
  .prose {
    --flow-space: var(--space-s);
    color: var(--color-text-prose);
  }

  /* Increase legibility by limiting line lengths */
  .prose :is(p, li) {
    max-width: var(--measure);
  }

  .prose :is(h1, h2, h3, h4) {
    max-width: var(--measure-narrow);
    font-weight: var(--weight-semi);
    color: var(--color-text);
  }

  .prose :is(h1, h2, h3) {
    overflow-wrap: anywhere;
  }

  /* Order matters: these three tie on specificity. */
  .prose table,
  .prose table + * {
    --flow-space: var(--space-l);
  }

  .prose :is(h1, h2, h3, h4) + * {
    --flow-space: var(--space-s);
  }

  .prose * + :is(h1, h2, h3, h4) {
    --flow-space: var(--space-m);
  }

  .prose ul {
    padding-inline-start: var(--space-s);
  }

  .prose ul li {
    padding-inline-start: var(--space-2xs);
  }

  .prose ul li + li,
  .prose ul li > ul {
    margin-block-start: var(--space-2xs);
  }

  /* List items holding paragraphs get paragraph spacing. */
  .prose ul li + li:has(p) {
    margin-block-start: var(--flow-space);
  }

  .prose ul li:has(> p) > p {
    margin-block-start: var(--space-2xs);
  }

  .prose code {
    font-weight: var(--weight-semi);
    font-size: 0.95em;
    background: revert;
  }

  .prose code::before,
  .prose code::after {
    content: "`";
  }
}