/* Visuele kopgroottes, losgekoppeld van de HTML-tag (zie base.css). Elk blok
   kiest via het heading_level-veld welke tag (h1-h4) gerenderd wordt, en past
   hier de bijbehorende visuele klasse op toe — nooit andersom. */

.heading--hero {
	font-size: clamp(48px, 6.2vw, 82px);
}

.heading--xl {
	font-size: 46px;
}

.heading--lg {
	font-size: 44px;
}

.heading--md {
	font-size: 29px;
}

@media (max-width: 760px) {
	.heading--xl,
	.heading--lg {
		font-size: 36px;
	}
}

.eyebrow {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .14em;
	font-weight: 800;
	color: var(--rose-dark);
}

.body-copy {
	color: var(--copy);
	font-size: 14px;
}