/*
 * Page title block. Figma 230:70: white band, 400px tall, first line's
 * cap top at 40/200, second line one 88px line lower.
 */

.page-title {
	min-height: clamp(220px, 20.8333vw, 400px);
	padding-top: var(--space-200);
	padding-bottom: var(--space-40);
	background: var(--color-white);
}

/* One block with the Figma line height; trimming to cap height and baseline matches Figma's text boxes. */
.page-title__heading {
	color: var(--color-forest-a);
	font-family: var(--font-serif);
	font-size: var(--fs-100);
	font-weight: var(--fw-text);
	line-height: var(--lh-subheadline);
	letter-spacing: var(--ls-subheadline);
	text-box: trim-both cap alphabetic;
}

.page-title__line {
	display: block;
}

.page-title__line--light {
	font-weight: var(--fw-extralight);
}

/* Provisional until the mobile design: the header is in the page flow below 1100px. */
@media (max-width: 1100px) {
	.page-title {
		padding-top: var(--space-80);
	}
}