/* Page header – shared structure. Each look lives in heroes/<style>.css (only the active one loads). */
.q-page-hero {
	--q-ph-fg: var(--wp--preset--color--contrast);
	--q-ph-muted: var(--wp--preset--color--muted);
	--q-ph-accent: var(--wp--preset--color--accent-dark);
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: clamp(3.25rem, 8vw, 6.5rem) clamp(2.75rem, 6vw, 5rem) !important;
	color: var(--q-ph-fg);
	background: var(--wp--preset--color--cream);
}
.q-page-hero > .q-ph__deco { position: absolute; inset: 0; z-index: -1; max-width: none !important; margin: 0 !important; pointer-events: none; overflow: hidden; }
.q-ph__deco > span { position: absolute; display: block; }
.q-ph__inner { position: relative; }
.q-ph__panel { position: relative; max-width: 820px; }

.q-ph__crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .55em; margin: 0 0 1.1rem; font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--q-ph-accent); }
.q-ph__crumbs a { color: inherit; text-decoration: none; opacity: .8; }
.q-ph__crumbs a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.q-ph__crumbs span[aria-hidden] { opacity: .5; }

.q-page-hero .wp-block-post-title {
	margin: 0 0 .3em;
	color: var(--q-ph-fg);
	font-size: clamp(2.6rem, 6.2vw, 4.9rem);
	line-height: 1.02;
	letter-spacing: -.02em;
	text-wrap: balance;
}
.q-page-hero .q-lede { max-width: 58ch; margin: 0 !important; color: var(--q-ph-muted); font-size: clamp(1.05rem, 1.7vw, 1.3rem) !important; line-height: 1.55; }
.q-page-hero .q-lede p { margin: 0; }

@media (prefers-reduced-motion: reduce) {
	.q-page-hero *, .q-page-hero *::before, .q-page-hero *::after { animation: none !important; }
}