@layer components {
  .prose {
    max-inline-size: 720px;

    h1 {
      font-size: var(--text-3xl);
      font-weight: 700;
      letter-spacing: -0.025em;
    }

    h2 {
      margin-top: var(--block-space-double);
      font-size: var(--text-xl);
      font-weight: 600;
    }

    p {
      color: oklch(var(--lch-gray-600));
      line-height: 1.625;
    }

    p + p {
      margin-top: var(--block-space);
    }
  }

  .prose__updated {
    color: var(--color-muted);
    font-size: var(--text-sm);
  }

  .category-prose {
    margin-top: var(--block-space-double);

    h3 {
      margin-top: var(--block-space);
      font-size: var(--text-lg);
      font-weight: 600;
    }

    ul, ol {
      margin-top: var(--block-space);
      padding-inline-start: 1.25em;
      color: oklch(var(--lch-gray-600));
      line-height: 1.625;

      li + li {
        margin-top: calc(var(--block-space) / 2);
      }
    }

    h2 + p, h3 + p, p + ul, p + ol {
      margin-top: var(--block-space);
    }
  }

  .category-prose--introduction {
    margin-top: 0;
    margin-bottom: var(--block-space);
  }
}