@layer components {
  /* Tipografia de conteúdo (ADR-011): fonte ajustável via `--font-content`. */
  .prose {
    max-inline-size: 65ch; /* medida de leitura 60–75ch (DESIGN.md §3) */
    color: var(--ink);
    font-family: var(--font-content);
    font-size: var(--text-body);
    line-height: 1.7;
  }

  .prose :is(h1, h2, h3, h4) {
    color: var(--ink);
    text-wrap: balance;
  }

  .prose h1 {
    margin-block: 2.5rem 1.5rem;
    font-size: var(--text-h1);
    font-weight: 800;
  }

  .prose h2 {
    margin-block: 2rem 1rem;
    font-size: var(--text-h2);
    font-weight: 700;
  }

  .prose h3 {
    margin-block: 1.5rem 0.75rem;
    font-size: 1.25rem;
    font-weight: 700;
  }

  .prose p,
  .prose ul,
  .prose ol {
    margin-block: 0 1rem;
  }

  .prose a {
    color: var(--tenant-link);
    text-decoration: underline;
  }

  .prose img {
    inline-size: 100%;
    block-size: auto;
    margin-block: 2rem;
    border-radius: var(--tenant-radius);
  }
}