/* Long-form body copy (news articles, roles, services, stories): the .prose wrapper around the post
   content in the Theme Builder singles. Owner: NEWS. Built 1 Oct 2026.
   Tokens only. Readable measure, steady rhythm, headings stepped down from the page's own scale,
   brand bullets, underlined links, images and tables that never overflow. */
.prose { max-width: var(--measure); color: var(--body); font-size: var(--fs-body); line-height: 1.7; overflow-wrap: break-word; }
/* Spacing rules carry `body .elementor` too: mock.css zeroes every p/ul/h* margin at 0,1,2 (measured 1 Oct, paragraphs ran together). */
.prose > :first-child, .prose .elementor-widget-container > :first-child, body .elementor .prose > :first-child { margin-top: 0; }
.prose :is(p, ul, ol, figure, blockquote, table), body .elementor .prose :is(p, ul, ol, figure, blockquote, table) { margin: 0 0 1.2em; }

/* Headings inside an article: the page h1 is the title, so h2 here is a section head, not a page head. */
.prose :is(h2, h3, h4), body .elementor .prose :is(h2, h3, h4) { color: var(--heading); font-family: var(--font); margin: 1.8em 0 0.6em; }
.prose h2 { font-size: var(--fs-h3); font-weight: 700; line-height: 1.2; }
.prose h3 { font-size: var(--fs-h4); font-weight: 700; line-height: 1.3; }
.prose h4 { font-size: var(--fs-body); font-weight: 700; line-height: 1.4; }
.prose strong { color: var(--heading); font-weight: 700; }

/* Links: white, underlined in DDC green (body text is white on Black 6, so colour alone is not enough). */
.prose a {
  color: var(--white); text-decoration: underline; text-decoration-color: var(--ddc-green);
  text-decoration-thickness: var(--mark-w); text-underline-offset: 0.2em;
  transition: color var(--dur-fast) var(--ease), text-decoration-color var(--dur-fast) var(--ease);
}
.prose a:hover { color: var(--ddc-purple-soft); text-decoration-color: currentColor; }

/* Lists: DDC green bullets, soft purple numbers. */
.prose :is(ul, ol) { padding-left: 1.4em; }
.prose li, body .elementor .prose li { margin: 0 0 0.4em; padding-left: 0.2em; }
.prose ul > li::marker { color: var(--ddc-green); font-size: 1.1em; }
.prose ol > li::marker { color: var(--ddc-purple-soft); font-weight: 700; }

/* Quotes: a quiet panel, no side stripe. */
.prose blockquote {
  padding: var(--gap-20) var(--gap-40); border-radius: var(--r-card); background-color: var(--paper);
  font-size: var(--fs-lead); line-height: 1.55; color: var(--heading);
}
.prose blockquote > :last-child, body .elementor .prose blockquote > :last-child { margin-bottom: 0; }

/* Images and figures: full measure, rounded like every card, captions muted. */
.prose img { display: block; max-width: 100%; height: auto; border-radius: var(--r-card); }
.prose figure img { width: 100%; }
.prose figcaption { margin-top: var(--gap-10); color: var(--muted); font-size: var(--fs-small); }

/* Tables scroll inside themselves on a phone rather than pushing the page sideways. */
.prose table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: var(--fs-small); }
.prose :is(th, td) { padding: var(--gap-10) var(--gap-20) var(--gap-10) 0; border-bottom: var(--hair) solid var(--line); text-align: left; vertical-align: top; }
.prose th { color: var(--heading); font-weight: 700; }

.prose hr { border: 0; border-top: var(--hair) solid var(--line); margin: var(--gap-40) 0; }