/* ==========================================================================
   Hero — home (full screen) and inner pages. Dark, photo + shade + spotlight.
   The gold line is the single "bold" element; on the home page it is drawn on load.
   ========================================================================== */
.hero {
	position: relative;
	display: flex;
	flex-direction: column;
}

/* The one decorative use of metallic gold besides the logo. */
.hero__line {
	display: block;
	width: 1px;
	background: linear-gradient(180deg, rgb(201 169 106 / 0) 0%, #a8894f 8%, #e4c984 40%, #f5e19a 55%, #c9a96a 92%, rgb(201 169 106 / 0) 100%);
}

/* --------------------------------------------------------------------------
   Home hero
   -------------------------------------------------------------------------- */
.hero--home {
	min-height: clamp(560px, calc(100svh - var(--header-h)), 760px);
	--spot-x: 58%;
	--spot-y: 36%;
}
@media (min-width: 1024px) {
	/* Small text stays in the left 60%: the photo side is shaded less, so the photo reads
	   (only the large gold words sit there). */
	.hero--home { min-height: clamp(640px, calc(100svh - var(--header-h)), 980px); --shade-at: 60%; --shade-b: 0.8; --shade-c: 0.7; }
}
@media (min-width: 1280px) {
	.hero--home { --shade-c: 0.5; }
}
.hero--home .hero__inner {
	flex: 1;
	display: grid;
	grid-template-columns: 1px minmax(0, 1fr);
	grid-template-rows: auto auto;
	column-gap: clamp(1.25rem, 3vw, 2rem);
	align-content: center;
	padding-block: clamp(4rem, 2rem + 6vw, 8rem) clamp(3rem, 2rem + 3vw, 5rem);
}
.hero--home .hero__line { grid-column: 1; grid-row: 1 / span 2; }
.hero--home .hero__main { grid-column: 2; grid-row: 1; }
.hero--home .hero__aside { grid-column: 2; grid-row: 2; }

.hero__title {
	max-width: 13em;
	color: var(--c-white);
	font-size: var(--fs-h1);
}
.hero__lead {
	max-width: 44ch;
	margin-block-start: clamp(1.5rem, 1rem + 1.2vw, 2.25rem);
	color: var(--c-mist);
	font-size: var(--fs-lead);
	line-height: 1.55;
}
.hero__actions { margin-block-start: clamp(2rem, 1.5rem + 1.5vw, 3rem); }

.hero__aside {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.5rem;
	margin-block-start: var(--s-5);
	color: var(--c-gold-light);
	font-family: var(--font-display);
	font-size: clamp(1.375rem, 1.1rem + 1vw, 2.25rem);
	font-weight: 500;
	line-height: 1.35;
}

@media (min-width: 1024px) {
	.hero--home .hero__inner {
		grid-template-columns: minmax(0, 1fr) 1px minmax(11rem, 19rem);
		grid-template-rows: auto;
		column-gap: clamp(2.5rem, 5vw, 6rem);
	}
	.hero--home .hero__main { grid-column: 1; grid-row: 1; }
	.hero--home .hero__line { grid-column: 2; grid-row: 1; }
	.hero--home .hero__aside {
		grid-column: 3;
		grid-row: 1;
		align-self: center;
		flex-direction: column;
		margin-block-start: 0;
		line-height: 1.6;
	}
}

/* Licence line at the bottom of the first screen. */
.hero__credential {
	padding-block: var(--s-3);
	border-block-start: 1px solid var(--line-dark);
}
.hero__credential p {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
	color: var(--c-mist);
	font-size: var(--fs-xs);
	font-variant-numeric: lining-nums;
	letter-spacing: 0.01em;
}
.hero__credential .icon { color: var(--c-gold); width: 1.125rem; height: 1.125rem; }
.hero__credential-sep {
	display: inline-block;
	width: 1px;
	height: 0.875rem;
	background: var(--c-gold);
}
/* Narrow screens: one item per line behind a single gold line, no hanging separators. */
@media (max-width: 767px) {
	.hero__credential p {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.25rem;
		padding-inline-start: var(--s-2);
		border-inline-start: 1px solid var(--c-gold);
	}
	.hero__credential .icon,
	.hero__credential-sep { display: none; }
}

/* Orchestrated load: the line is drawn top → bottom, then the text appears. */
@keyframes msa-line-draw {
	from { transform: scaleY(0); }
	to { transform: scaleY(1); }
}
@keyframes msa-reveal {
	from { opacity: 0; transform: translateY(0.75rem); }
	to { opacity: 1; transform: none; }
}
.hero--home .hero__line {
	transform-origin: 50% 0;
	animation: msa-line-draw 1100ms var(--ease-out) 150ms both;
}
.hero--home .hero__main > *,
.hero--home .hero__aside li,
.hero--home .hero__credential {
	animation: msa-reveal 700ms var(--ease-out) both;
}
.hero--home .hero__main > :nth-child(1) { animation-delay: 850ms; }
.hero--home .hero__main > :nth-child(2) { animation-delay: 1000ms; }
.hero--home .hero__main > :nth-child(3) { animation-delay: 1150ms; }
.hero--home .hero__aside li:nth-child(1) { animation-delay: 1050ms; }
.hero--home .hero__aside li:nth-child(2) { animation-delay: 1150ms; }
.hero--home .hero__aside li:nth-child(3) { animation-delay: 1250ms; }
.hero--home .hero__credential { animation-delay: 1400ms; }

/* Every hero photo settles in slowly on load (the shade stays in place). */
@keyframes msa-settle {
	from { transform: scale(1.06); }
	to { transform: none; }
}
.hero .media-bg .msa-img { animation: msa-settle 1800ms var(--ease-out) both; }

/* Home: up to three photos cross-fade (assets/js/hero-slides.js). The incoming photo fades in
   over the outgoing one, which stays opaque underneath — no dip to the ground colour —
   and settles from the same slight zoom. Without JS only the first photo is shown. */
.hero--home .hero__slides .hero__slide {
	opacity: 0;
	animation: none;
	transition: opacity 1600ms var(--ease-out);
}
.hero--home .hero__slides .hero__slide.is-active {
	opacity: 1;
	animation: msa-settle 2400ms var(--ease-out) both;
}
.hero--home .hero__slides .hero__slide.is-leaving {
	z-index: -1;
	opacity: 1;
	transition: none;
}

/* Pause control at the end of the licence line: thin progress lines + one button. */
.hero--home .hero__credential {
	display: flex;
	flex-wrap: wrap; /* narrow screens: the control drops under the licence text instead of squeezing it */
	align-items: center;
	justify-content: space-between;
	gap: var(--s-1) var(--s-2);
}
.hero__slides-ctrl {
	display: flex;
	align-items: center;
	gap: var(--s-1);
	margin-inline-start: auto;
	margin-block: -0.75rem; /* the 44px button does not make the line taller */
}
.hero__slides-ctrl[hidden] { display: none; }
.hero__slides-bars { display: flex; gap: 0.375rem; }
.hero__slides-bar {
	position: relative;
	width: 1.75rem;
	height: 2px;
	overflow: hidden;
	background: rgb(255 255 255 / 0.22);
}
.hero__slides-bar::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--c-gold);
	transform: scaleX(0);
	transform-origin: 0 50%;
}
.hero__slides-bar.is-active::after { animation: msa-progress var(--slide-ms, 7000ms) linear both; }
.hero__slides-ctrl.is-paused .hero__slides-bar.is-active::after { animation-play-state: paused; }
@keyframes msa-progress {
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}
.hero__slides-toggle {
	display: inline-grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--c-mist);
	cursor: pointer;
	transition: color 200ms ease;
}
.hero__slides-toggle:hover { color: var(--c-gold-light); }
/* Beats the licence-line icon rules above (gold colour, hidden on phones). */
.hero__slides-toggle .icon { display: block; width: 1.125rem; height: 1.125rem; color: inherit; }
.hero__slides-toggle .hero__slides-play,
.is-paused .hero__slides-toggle .hero__slides-pause { display: none; }
.is-paused .hero__slides-toggle .hero__slides-play { display: block; }

/* Inner pages: a shorter version of the home sequence — the text settles in,
   then the lead opens top → bottom behind its gold line. */
@keyframes msa-draw {
	from { clip-path: inset(0 0 100% 0); opacity: 0; }
	to { clip-path: inset(0 0 0 0); opacity: 1; }
}
.hero--inner .breadcrumbs,
.hero--inner .hero__heading { animation: msa-reveal 700ms var(--ease-out) both; }
.hero--inner .breadcrumbs { animation-delay: 60ms; }
.hero--inner .hero__heading { animation-delay: 160ms; }
.hero--inner .hero__lead-wrap { animation: msa-draw 900ms var(--ease-out) 420ms both; }

/* --------------------------------------------------------------------------
   Inner page hero: breadcrumbs, H1 | line | lead.
   -------------------------------------------------------------------------- */
.hero--inner {
	min-height: clamp(380px, 52vh, 600px);
	--spot-x: 70%;
	--spot-y: 30%;
	--shade-c: 0.84; /* the lead sits on the far side */
}
.hero--inner .hero__inner {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding-block: var(--s-4) clamp(3rem, 2rem + 3vw, 5.5rem);
}
.hero--inner .hero__body {
	display: grid;
	gap: var(--s-3);
	margin-block-start: auto;
	padding-block-start: clamp(3rem, 2rem + 4vw, 6rem);
}
.hero--inner .hero__title { font-size: clamp(2.5rem, 1.5rem + 3.4vw, 5rem); max-width: 15em; }
.hero--inner .hero__lead-wrap {
	padding-inline-start: var(--s-3);
	border-inline-start: 1px solid var(--c-gold);
}
.hero--inner .hero__lead { margin: 0; }
@media (min-width: 1024px) {
	.hero--inner .hero__body {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		gap: 0;
		align-items: end;
	}
	.hero--inner .hero__title { padding-inline-end: clamp(2rem, 4vw, 5rem); }
	.hero--inner .hero__lead-wrap { padding-inline-start: clamp(2rem, 3vw, 3.5rem); padding-block: 0.5rem; }
	/* The title and the lead sit at the bottom: the shade runs top → bottom, so the upper part
	   shows the photo (only the breadcrumbs sit there). A placeholder keeps the full shade. */
	.hero--inner:not(.hero--stacked):not(:has(.is-placeholder, .msa-img--empty)) { --shade-dir: 180deg; --shade-a: 0.76; --shade-at: 40%; --shade-b: 0.8; --shade-c: 0.9; --spot-a: 0.2; }
}

/* Meta line above the title (news: date; pages: last updated). */
.hero__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1.25rem;
	margin-block-end: var(--s-3);
	color: var(--c-mist);
	font-size: var(--fs-xs);
	font-variant-numeric: lining-nums;
}

/* Stacked variant (articles): title, then the lead behind the line. */
.hero--stacked .hero__title { font-size: clamp(2.25rem, 1.4rem + 2.8vw, 4.25rem); max-width: 18em; }
@media (min-width: 1024px) {
	.hero--inner.hero--stacked .hero__body { grid-template-columns: minmax(0, 9fr) minmax(0, 3fr); gap: var(--s-4); }
	.hero--inner.hero--stacked .hero__heading { grid-column: 1; }
	.hero--inner.hero--stacked .hero__lead-wrap { grid-column: 1; max-width: 60ch; padding-inline-start: var(--s-3); }
	.hero--inner.hero--stacked .hero__title { padding-inline-end: 0; }
	/* All text is on the left: the photo side is shaded less (as on the home page).
	   A placeholder keeps the full shade. */
	.hero--stacked:not(:has(.is-placeholder, .msa-img--empty)) { --shade-at: 55%; --shade-b: 0.8; --shade-c: 0.7; }
}
@media (min-width: 1280px) {
	.hero--stacked:not(:has(.is-placeholder, .msa-img--empty)) { --shade-c: 0.5; }
}