/*
 * Inner pages: the title band and the long-form content body.
 *
 * These pages carry copy migrated from the old site rather than designed
 * sections, so the job here is a readable text column - a type scale, vertical
 * rhythm, and list and quote styling - not a layout. Everything is scoped under
 * .prose so it cannot reach the composed homepage sections.
 */

.page__header {
	padding-top: var(--space-64);
}

.page__title {
	margin: 0;
	font-size: var(--text-h1-fluid);
	line-height: var(--lh-h1);
}

/* --- Long-form content ---------------------------------------------------- */

.prose > *:first-child {
	margin-top: 0;
}

.prose > *:last-child {
	margin-bottom: 0;
}

.prose > p {
	margin: 0 0 var(--space-16);
	color: var(--color-text-muted);
}

/* The opening paragraph carries the page's summary, so it is set larger and in
   the heading colour to read as a standfirst rather than as body copy. */
.prose > .lead {
	margin-bottom: var(--space-32);
	font-size: var(--text-body-lg);
	color: var(--color-text-primary);
}

/* Only direct children are styled as article text: these pages also carry
   composed sections whose own components must not inherit this rhythm. */

/* Headings need more room above than below so each one binds to the text it
   introduces instead of floating between two blocks. */
.prose > h2 {
	margin: var(--space-48) 0 var(--space-16);
	font-size: var(--text-h3-fluid);
}

.prose > h3 {
	margin: var(--space-32) 0 var(--space-8);
	font-size: var(--text-h5);
}

.prose > ul,
.prose > ol {
	margin: 0 0 var(--space-16);
	padding-left: var(--space-24);
	color: var(--color-text-muted);
}

.prose > ul > li,
.prose > ol > li {
	margin-bottom: var(--space-8);
}

.prose > ul > li::marker,
.prose > ol > li::marker {
	color: var(--color-primary);
}

.prose > blockquote {
	margin: var(--space-32) 0;
	padding: var(--space-24);
	border-left: 3px solid var(--color-primary);
	border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
	background: var(--color-bg-warm);
}

.prose > blockquote p {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--text-subtitle);
	line-height: var(--lh-quote);
	color: var(--color-text-heading);
}

.prose > blockquote cite {
	display: block;
	margin-top: var(--space-12);
	font-style: normal;
	font-size: var(--text-body-sm);
	color: var(--color-text-muted);
}

@media (max-width: 767px) {
	.page__header {
		padding-top: var(--space-42);
	}

	.prose {
		padding-block: var(--space-32);
	}

	.prose > h2 {
		margin-top: var(--space-32);
	}
}