/* prose block deltas (plan §5.2) — generic rich-text, measure-constrained. */
@layer web {
  .prose {
    color: var(--sph-text);
    --prose-text-size: var(--sph-fs-md);
  }
  .prose__title {
    font-family: var(--sph-font-display);
    font-weight: var(--sph-weight-extrabold);
    font-size: var(--prose-title-size);
    line-height: var(--sph-lh-tight);
    letter-spacing: var(--sph-tracking-tight);
    color: var(--sph-text);
    max-width: 24ch;
    margin: 0 0 clamp(var(--sph-space-4), 3vw, var(--sph-space-6));
  }
  .prose__title .sph-accent { color: var(--sph-primary); }
  .prose__body {
    font-size: var(--prose-text-size);
    line-height: var(--sph-lh-relaxed, 1.7);
  }
  .prose__body > * { margin-block: 0 1em; }
  .prose__body > :last-child { margin-bottom: 0; }
  .prose--narrow { max-width: 38rem; }
  .prose--wide { max-width: 75rem; }
  .prose__body--split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(var(--sph-space-5), 4vw, var(--sph-space-10));
  }
  .prose__body--split > .prose__column { margin: 0; }
  .prose__column > * { margin-block: 0 1em; }
  .prose__column > :last-child { margin-bottom: 0; }
  .prose strong { font-weight: var(--sph-weight-bold); }
  .prose .sph-accent { color: var(--sph-primary); }

  /* Each heading level sets a paired body scale. Untitled prose preserves the
     original medium body size. */
  .prose--heading-1 {
    --prose-title-size: clamp(var(--sph-fs-2xl), 5vw, var(--sph-fs-4xl));
    --prose-text-size: var(--sph-fs-lg);
  }
  .prose--heading-2 {
    --prose-title-size: clamp(var(--sph-fs-xl), 4vw, var(--sph-fs-3xl));
    --prose-text-size: var(--sph-fs-md);
  }
  .prose--heading-3 {
    --prose-title-size: clamp(var(--sph-fs-lg), 3vw, var(--sph-fs-2xl));
    --prose-text-size: var(--sph-fs-base);
  }
  .prose--heading-4 {
    --prose-title-size: var(--sph-fs-xl);
    --prose-text-size: var(--sph-fs-base);
  }
  .prose--heading-5 {
    --prose-title-size: var(--sph-fs-lg);
    --prose-text-size: var(--sph-fs-sm);
  }
  .prose--heading-6 {
    --prose-title-size: var(--sph-fs-md);
    --prose-text-size: var(--sph-fs-sm);
  }

  @media (max-width: 44rem) {
    .prose__body--split { grid-template-columns: 1fr; }
  }
}