/* Front page: full-width photo hero with an asymmetric curved bottom edge, intro text below. */
.sc-hero__defs { position: absolute; }
.sc-hero {
	position: relative; isolation: isolate; display: flex; min-height: clamp(34rem, 61vw, 55rem);
	color: var(--sc-white); clip-path: url(#sc-hero-curve);
}
.sc-hero__img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
.sc-hero--plain { background: var(--sc-terracotta); }
/* Text starts right of the logo blob like the design (449px at 1440): the logo sits in the centred --wrap column,
   so the offset follows the column edge + gutter + blob width, never a % of the full-bleed hero. */
.sc-hero__text { width: 100%; padding: clamp(2.5rem, 3.6vw, 3.25rem) var(--gutter) 16vw calc(max(0px, (100vw - var(--wrap)) / 2) + var(--gutter) + var(--logo-w) * 0.925); }
.sc-hero__date { margin: 0 0 clamp(2rem, 6.5vw, 5.75rem); font-family: var(--font-display); font-weight: 600; font-size: var(--step-3); line-height: 0.83; letter-spacing: 0.02em; text-shadow: 0 1px 12px rgb(0 0 0 / 0.25); }
.sc-hero__headline { max-width: 11ch; margin: 0; color: var(--sc-white); font-size: var(--step-4); line-height: 0.88; text-shadow: 0 2px 18px rgb(0 0 0 / 0.25); }

@media (max-width: 899px) {
	.sc-hero { min-height: 106vw; }
	.sc-hero__text { padding: calc(var(--logo-w) * 0.82 - var(--header-h) + 1rem) var(--gutter) 24vw; }
	.sc-hero__date { margin-bottom: 0.75rem; }
	.sc-hero__headline { font-size: clamp(2.5rem, 11.5vw, 4.5rem); }
}

.sc-intro { padding: clamp(2.5rem, 5vw, 4.5rem) 0 clamp(2.5rem, 4vw, 3rem); }
.sc-intro__inner { max-width: calc(77rem + 2 * var(--gutter)); }
.sc-intro .sc-expand { color: var(--sc-text); font-size: var(--step-0); line-height: 1.4; }