/* ============================================================================
   prose.css — long-form ARTICLE typography
   ----------------------------------------------------------------------------
   Apply .prose to the article body container. Optimised for a 5–10 minute read:
   serif body at a ~65–75ch measure, sans-serif headings with deliberate rhythm,
   accent-underlined links, and styled lists / blockquote.
   ========================================================================== */

.prose {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-text-soft);
  max-width: var(--measure);   /* ~68ch — keeps line length readable */
}

/* Optional standfirst / lead paragraph */
.prose__lead {
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--color-text-soft);
  margin: 0 0 var(--space-5);
}

/* Paragraphs */
.prose p { margin: 0 0 var(--space-5); }
.prose > :last-child { margin-bottom: 0; }

/* Heading rhythm — generous space above, tight below */
.prose h2 {
  font-family: var(--font-display); font-weight: 800;
  font-size: var(--text-2xl); line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight); color: var(--color-text);
  margin: var(--space-7) 0 var(--space-3);
}
.prose h3 {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-xl); line-height: var(--leading-snug);
  color: var(--color-text); margin: var(--space-6) 0 var(--space-3);
}
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }

/* Links — brand colour, accent underline */
.prose a {
  color: var(--color-link); font-weight: 600;
  text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--color-link) 35%, transparent);
  text-underline-offset: 2px; text-decoration-thickness: 1px;
}
.prose a:hover { color: var(--color-brand-strong); }

/* Emphasis */
.prose strong { color: var(--color-text); font-weight: 700; }
.prose em { font-style: italic; }

/* Lists */
.prose ul, .prose ol { margin: 0 0 var(--space-5); padding-left: 1.4em; display: grid; gap: 10px; }
.prose li { padding-left: .15em; }
.prose ol li::marker { color: var(--color-accent-strong); font-weight: 700; }
.prose ul li::marker { color: var(--color-accent); }

/* Blockquote */
.prose blockquote {
  margin: var(--space-6) 0; padding: var(--space-2) 0 var(--space-2) var(--space-5);
  border-left: 4px solid var(--color-accent);
  font-size: var(--text-xl); line-height: var(--leading-snug);
  color: var(--color-text); font-style: italic;
}
.prose blockquote cite {
  display: block; margin-top: .7em; font-family: var(--font-display); font-style: normal;
  font-size: var(--text-sm); font-weight: 600; color: var(--color-muted);
}

/* Inline callout / aside inside prose (mini table of contents, tips) */
.prose .toc {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius); padding: var(--space-5); margin: 0 0 var(--space-6);
  font-family: var(--font-display);
}
.prose .toc__title {
  font-size: var(--text-sm); font-weight: 700; color: var(--color-text);
  text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 10px;
}
.prose .toc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: var(--text-base); }
.prose .toc a { text-decoration: none; }
.prose .toc a:hover { text-decoration: underline; }

/* Horizontal rule */
.prose hr { border: none; border-top: 1px solid var(--color-border); margin: var(--space-7) 0; }