/* =========================================================================
   Long-form reference pages — the answer keys and the API documentation.
   ========================================================================= */

.prose-page { padding-block: clamp(2rem, 5vw, 3.5rem); max-width: 900px; }
.prose-page h1 { max-width: 22ch; margin-bottom: 1rem; }
.prose-page > .lede { max-width: 62ch; margin-bottom: 2rem; }
.prose-page > hr { border: 0; border-top: 1px solid var(--hairline); margin-block: 3rem; }

.spoiler-warn {
  border: 1px solid #e8cdbd;
  border-left: 3px solid var(--terracotta);
  border-radius: var(--radius);
  background: #fdf5f1;
  padding: 1rem 1.15rem;
  margin-bottom: 1.75rem;
  font-size: .93rem; line-height: 1.55; color: var(--ink-mid);
}
.spoiler-warn strong { color: var(--ink); }

.prose { font-size: .97rem; line-height: 1.65; color: var(--ink-mid); }
.prose h1 { font-size: clamp(1.7rem, 3vw, 2.2rem); margin: 2.5rem 0 .8rem; color: var(--ink); }
.prose h2 { font-size: 1.45rem; margin: 2.5rem 0 .7rem; color: var(--ink); }
.prose h3 { font-size: 1.1rem; margin: 1.8rem 0 .5rem; color: var(--ink); }
.prose h1:first-child, .prose h2:first-child { margin-top: 0; }
.prose p { margin: 0 0 .9rem; max-width: 72ch; }
.prose ul { margin: 0 0 1.1rem; padding-left: 1.2rem; }
.prose li { margin-bottom: .25rem; }
.prose hr { border: 0; border-top: 1px solid var(--hairline); margin-block: 2rem; }
.prose code {
  font-family: var(--mono); font-size: .84em;
  background: var(--paper-deep); border: 1px solid var(--hairline);
  border-radius: 4px; padding: .08em .35em;
}
.prose strong { color: var(--ink); }