/* =============================================================================
 * csc-page-header — a page's header in text (21 Oct, replacing the banners)
 *
 *   ground   the kit's pale blue (global d923463, #F4F7FB; --csc-bg is the same
 *            value and the fallback), edge to edge, with the 2px green rule the
 *            homepage's category tiles carry under their photos
 *   band     1200 with the site gutter, so the text lines up with the header
 *            and its navigation (120px in at 1440)
 *   crumbs   14px, the link blue for links and ink-3 for the current page
 *   label    the homepage's eyebrow: mono 12/700, tracked, link blue
 *   title    the homepage's display heading: Roboto 300, 44px (28px on phones)
 *   line     16/1.55 ink-2; items separated by " · " stack on phones
 *
 * Edge to edge from inside any container. The ground and the rule are painted
 * with border-image outsets, which reach the viewport's edges without adding
 * to the page's width: unlike 100vw, they never cause a horizontal scrollbar,
 * and the widget needs no container setting changed.
 * ========================================================================== */

.csc-page-header__ground {
	--csc-ph-ground: var(--e-global-color-d923463, var(--csc-bg));
	position: relative;
	border-image: conic-gradient(var(--csc-ph-ground) 0 0) fill 0 / / 0 100vmax;
}

.csc-page-header__ground::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 2px;
	border-image: conic-gradient(var(--csc-green-btn) 0 0) fill 0 / / 0 100vmax;
}

.csc-page-header__pad {
	padding-inline: var(--csc-gutter);
}

.csc-page-header__band {
	max-width: var(--csc-band);
	margin-inline: auto;
	padding-block: 36px 34px;
}

/* --- Breadcrumb ------------------------------------------------------------ */

.csc-page-header__crumbs ol {
	display: flex;
	flex-wrap: wrap;
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
	font-size: var(--csc-fs-ui);
	line-height: 1.4;
	color: var(--csc-ink-3);
}

.csc-page-header__crumbs li + li::before {
	content: "/";
	margin-inline: var(--csc-space-2);
	color: var(--csc-rule-strong);
}

.csc-page-header__crumbs a {
	color: var(--csc-link);
	text-decoration: none;
}

.csc-page-header__crumbs a:hover {
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* --- Label, title, line ---------------------------------------------------- */

.csc-page-header__eyebrow {
	display: block;
	margin-bottom: var(--csc-space-2);
}

.csc-widget .csc-page-header__title {
	margin: 0;
	font-family: var(--csc-font);
	font-size: var(--csc-fs-h1);
	font-weight: 300;
	line-height: var(--csc-lh-display);
	letter-spacing: var(--csc-ls-display);
	color: var(--csc-ink);
	text-wrap: balance;
}

.csc-page-header__intro {
	margin: var(--csc-space-3) 0 0;
	max-width: 760px;
	font-size: var(--csc-fs-body);
	line-height: var(--csc-lh-body);
	color: var(--csc-ink-2);
}

.csc-page-header__part + .csc-page-header__part::before {
	content: "·";
	margin-inline: var(--csc-space-2);
	color: var(--csc-ink-3);
}

.csc-page-header__intro a {
	color: var(--csc-link);
	text-decoration: none;
}

.csc-page-header__intro a:hover {
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* --- Phones ---------------------------------------------------------------- */

@media (max-width: 767px) {
	.csc-page-header__band {
		padding-block: var(--csc-space-6) 22px;
	}

	.csc-page-header__crumbs ol {
		margin-bottom: var(--csc-space-3);
	}

	.csc-widget .csc-page-header__title {
		font-size: 28px;
	}

	/* One item to a line, without the separators. */
	.csc-page-header__part {
		display: block;
	}

	.csc-page-header__part + .csc-page-header__part::before {
		content: none;
	}
}