/* ==========================================================================
   Section heading — the brand motif: title | vertical gold line | lead.
   The line is decorative (gold on light is never used for text).
   ========================================================================== */
.section-head {
	display: grid;
	gap: var(--s-3);
	margin-block-end: clamp(2.5rem, 1.5rem + 3vw, 5rem);
}
.section-head__title { max-width: 15em; }
.section-head__aside {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	gap: var(--s-2);
	padding-inline-start: var(--s-3);
	border-inline-start: 1px solid var(--line-gold);
}
.section-head__lead {
	max-width: 52ch;
	font-size: var(--fs-lead);
	line-height: 1.5;
	color: var(--c-slate);
}
.tone-dark .section-head__lead { color: var(--c-mist); }

@media (min-width: 1024px) {
	.section-head--split {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		column-gap: 0;
		align-items: stretch;
	}
	.section-head--split .section-head__title { padding-inline-end: clamp(2rem, 4vw, 5rem); align-self: start; }
	.section-head--split .section-head__aside {
		justify-content: flex-start;
		padding-inline-start: clamp(2rem, 3vw, 3.5rem);
		padding-block: 0.75rem 0.25rem;
	}
	.section-head--title-only { grid-template-columns: minmax(0, 8fr); }
}