/* ========================================================================== *
 * # Section
 * ==========================================================================
 * Classes: .section .section-panel .section-head .section-head-left .eyebrow .display .headline .title .lead
 *          .prose .tick-list
 *
 *   .section		vertical rhythm (--section-space)
 *   .section-panel	the quiet grey ground that alternates with white
 *   .section-head	centred eyebrow + headline + lead, max 760px
 *   .eyebrow		the small coloured line above a headline (sentence case, never shouting)
 *   .display		the hero's headline; .headline a section's; .title a card's
 *   .lead			the large paragraph under a headline
 *   .prose			Markdown-ish body (policies, about)
 *   .tick-list		a list with a check glyph per line
 * ========================================================================== */

.section {
	padding-top: var(--section-space);
	padding-bottom: var(--section-space);
}

.section-panel {
	background: var(--panel);
}

.section-tight {
	padding-top: calc(var(--section-space) / 2);
	padding-bottom: calc(var(--section-space) / 2);
}

.section-head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-100);
	max-width: 760px;
	margin: 0 auto var(--space-300);
	text-align: center;

	@media (min-width: 1000px) {
		margin-bottom: var(--space-400);
	}
}

.section-head-left {
	align-items: flex-start;
	margin-left: 0;
	text-align: left;
}

.eyebrow {
	font-size: var(--label);
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--pri);

	@media (min-width: 1000px) {
		font-size: var(--h4);
	}
}

.display {
	font-size: var(--display);
	font-weight: 700;
	line-height: 1.04;
	letter-spacing: -0.035em;
	text-wrap: balance;
}

.headline {
	font-size: var(--headline);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

.title {
	font-size: var(--title);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.02em;
}

.lead {
	font-size: var(--lead);
	line-height: 1.45;
	color: var(--muted);
	max-width: var(--measure);
	text-wrap: pretty;
}

.prose {
	display: flex;
	flex-direction: column;
	gap: var(--space-100);
	max-width: var(--measure);
	overflow-wrap: anywhere;

	& h2 {
		margin-top: var(--space-150);
		font-size: var(--h2);
	}

	& h3 {
		margin-top: var(--space-50);
		font-size: var(--h3);
	}

	& ul,
	& ol {
		display: flex;
		flex-direction: column;
		gap: var(--space-50);
		padding-left: var(--space-125);
	}

	& li {
		list-style: disc;
	}

	& ol > li {
		list-style: decimal;
	}
}

.prose-centre {
	margin: 0 auto;
}

.tick-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-75);
	padding: 0;

	& li {
		display: flex;
		gap: var(--space-75);
		align-items: flex-start;
		list-style: none;
	}

	& svg {
		flex: none;
		margin-top: 3px;
		color: var(--pri);
	}
}