/**
 * Hero style: Layered Landscape
 *
 * Two lockups, one at each end of a band taller than the viewport, over three photographic
 * layers taking different multipliers of the same --jazzy-progress. The middle row is a spacer,
 * so the copy holds both edges however tall the band ends up.
 *
 * --jazzy-progress runs 0-1 over one band height, and the band is taller than the viewport, so
 * it only reaches about a third before the hero has scrolled away. The multipliers below are
 * therefore about three times the travel anyone actually sees; the sunburst sits midway between
 * the other two so the three layers separate evenly.
 *
 * The two far layers carry the amplitude. The landscape is anchored to the band's foot and the
 * band clips, so asking it to travel further only opens a gap under it — where sky and sunburst
 * have the whole band above them to move in.
 */

.module.hero.style-layered {
	--layered-pad-top: 296px;
	display: grid;
	grid-template-rows: auto 1fr;
	isolation: isolate;
	min-height: max(100svh, 99vw);
	overflow: clip;
	position: relative;
	row-gap: var(--module-spacing-medium);
}

/** Layers — sky, sunburst, landscape, in that order **/

/* No z-index of its own: the landscape has to sit between the two copy lockups, so the three
   layers are ordered individually against them rather than as one group behind both. */
.module.hero.style-layered .layers {
	inset: 0;
	position: absolute;
}

.module.hero.style-layered .media {
	aspect-ratio: auto;
	inset: 0;
	position: absolute;
}

.module.hero.style-layered .media.backdrop {
	z-index: -3;
}

.module.hero.style-layered .media.backdrop img {
	object-position: bottom center;
	transform: translate3d(0, calc(var(--jazzy-progress, 0) * 324px), 0) scale(1.18);
}

.module.hero.style-layered .media.fore {
	height: var(--foreground-height, 56%);
	pointer-events: none;
	top: auto;
	transform: translate3d(0, calc(var(--jazzy-progress, 0) * 48px), 0);
	z-index: 1;
}

.module.hero.style-layered .media.fore.focus-top img {
	object-position: top center;
}

.module.hero.style-layered .media.fore.focus-center img {
	object-position: center;
}

.module.hero.style-layered .media.fore.focus-bottom img {
	object-position: bottom center;
}

/* The pollen rule is what a link looks like here, so nothing that is not a link wears it. A
   phrase an editor marks in the WYSIWYG without giving it a destination takes the line's own
   colour and nothing else. Without the anchor below, a link in this line falls through to the UA
   default and renders blue. */
.module.hero.style-layered .emphasis.inline {
	color: inherit;
}

.module.hero.style-layered .intro > .statement a {
	color: inherit;
	text-decoration-color: var(--pollen);
	text-decoration-line: underline;
	text-decoration-thickness: 5px;
	text-underline-offset: 6px;
	transition: color var(--motion) var(--ease-out), text-decoration-color var(--motion) var(--ease-out), text-underline-offset var(--motion) var(--ease-out);
}

/* Same mark, scaled to the smaller line under the statement. */
.module.hero.style-layered .intro > .large a {
	color: inherit;
	font-weight: 700;
	text-decoration-color: var(--pollen);
	text-decoration-line: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.module.hero.style-layered .intro a:hover {
	text-decoration-color: var(--sun);
}

.module.hero.style-layered .intro > .statement a:is(:hover, :focus-visible) {
	color: color-mix(in srgb, var(--ray) 25%, currentColor);
	text-underline-offset: 8px;
}

.module.hero.style-layered .intro > .large a:is(:hover, :focus-visible) {
	color: color-mix(in srgb, var(--ray) 25%, currentColor);
	text-underline-offset: 6px;
}

.module.hero.style-layered .sunburst {
	aspect-ratio: 1202 / 527;
	color: var(--white);
	display: block;
	left: 50%;
	opacity: var(--sunburst-opacity, .12);
	position: absolute;
	top: var(--sunburst-position, var(--layered-pad-top));
	transform: translate3d(0, calc(var(--jazzy-progress, 0) * 198px), 0);
	/* Centred off its own width rather than by auto margins, which collapse to zero the moment
	   the mark is wider than the band — which the floor below makes it on a narrow screen. */
	translate: -50% 0;
	/* The band stops shrinking once its height comes from the viewport rather than from 99vw, so
	   below that crossover a width-only mark keeps shrinking against a band that does not. The
	   floor is the mark's own ratio applied to the share of the band it holds on a desktop. */
	width: max(83.5%, calc(37svh * 1202 / 527));
	z-index: -2;
}

.module.hero.style-layered .sunburst svg {
	display: block;
	height: 100%;
	max-width: none;
	width: 100%;
}

/* The band the header sits on, and the section nav under it where a page has one — hence the depth
   is composed from both rather than a literal 200px, which cleared the header and had nothing left
   by the time a nav bar's second row reached it.

   It holds .4 the whole way down that depth before it starts to fade, because the fade is what was
   failing: white nav copy on a light blue sky measures 2.0:1 bare and 2.4:1 at the old scrim's foot,
   where .4 makes it 5.1:1. */
.module.hero.style-layered::before {
	--hero-scrim-depth: calc(var(--header-height) + var(--section-nav-height, 0px));
	--hero-scrim-fade: 220px;
	/* Smoothstep, not a straight ramp. A linear fade holds one slope and then meets transparent at
	   zero, and the eye reads that corner as a line drawn across the sky — which is what showed at
	   the old scrim's foot. These stops carry the same curve a CSS ease would: flat where the hold
	   ends, steepest in the middle, flat again where it runs out, so neither junction has an edge. */
	background: linear-gradient(180deg,
		rgba(0, 0, 0, .45) 0%,
		rgba(0, 0, 0, .4) var(--hero-scrim-depth),
		rgba(0, 0, 0, .389) calc(var(--hero-scrim-depth) + var(--hero-scrim-fade) * .1),
		rgba(0, 0, 0, .358) calc(var(--hero-scrim-depth) + var(--hero-scrim-fade) * .2),
		rgba(0, 0, 0, .314) calc(var(--hero-scrim-depth) + var(--hero-scrim-fade) * .3),
		rgba(0, 0, 0, .259) calc(var(--hero-scrim-depth) + var(--hero-scrim-fade) * .4),
		rgba(0, 0, 0, .2)   calc(var(--hero-scrim-depth) + var(--hero-scrim-fade) * .5),
		rgba(0, 0, 0, .141) calc(var(--hero-scrim-depth) + var(--hero-scrim-fade) * .6),
		rgba(0, 0, 0, .086) calc(var(--hero-scrim-depth) + var(--hero-scrim-fade) * .7),
		rgba(0, 0, 0, .042) calc(var(--hero-scrim-depth) + var(--hero-scrim-fade) * .8),
		rgba(0, 0, 0, .011) calc(var(--hero-scrim-depth) + var(--hero-scrim-fade) * .9),
		rgba(0, 0, 0, 0)    calc(var(--hero-scrim-depth) + var(--hero-scrim-fade)));
	content: '';
	height: calc(var(--hero-scrim-depth) + var(--hero-scrim-fade));
	inset: 0 0 auto;
	position: absolute;
	z-index: -1;
}

/* Proportional, not 825px: the band's height is viewport-derived, so a fixed scrim would
   swamp a short one and strand a tall one. */
.module.hero.style-layered::after {
	background: linear-gradient(180deg, transparent 0%, var(--overlay-darker) 100%);
	content: '';
	height: calc(825 / 1425 * 100%);
	inset: auto 0 0;
	position: absolute;
	z-index: 2;
}

/** Copy **/

.module.hero.style-layered .title,
.module.hero.style-layered .intro {
	--heading-color: currentColor;
	color: var(--white);
	text-align: center;
	--focus-ring: var(--white);
}

.module.hero.style-layered .title {
	padding-top: var(--layered-pad-top);
	row-gap: var(--text-spacing-small);
	text-shadow: 0 4px 28px var(--overlay-dim);
}

/* The Mega cut clears the header and no more — at 148 the heading needs the band's top back.
   Composed rather than a literal, so it tracks the header the way the narrow-screen value does;
   the sunburst keeps the deeper offset and stays where it is. */
.module.hero.style-layered:has(.title .mega) .title {
	padding-top: calc(var(--header-height) + var(--module-spacing-medium));
}

.module.hero.style-layered .intro {
	align-self: end;
	padding-bottom: var(--module-spacing-xlarge);
	row-gap: var(--text-spacing-xsmall);
	text-shadow: 0 4px 20px var(--overlay-medium);
	z-index: 3;
}

.module.hero.style-layered .title > * {
	grid-column: 1 / -1;
	margin: 0;
}

.module.hero.style-layered .intro > * {
	grid-column: 2 / span 10;
	margin: 0;
}

/** No backdrop photograph — the band is the wash instead **/

.module.hero.style-layered:not(:has(.backdrop)) {
	background-image: linear-gradient(180deg, rgb(from var(--off-white) r g b / 0) 0%, var(--ray) 100%);
}

.module.hero.style-layered:not(:has(.backdrop)) .title {
	color: var(--charcoal);
	text-shadow: none;
}

.module.hero.style-layered:not(:has(.backdrop)) .sunburst {
	--sunburst-opacity: .05;
	color: var(--charcoal);
}

/* The mark rests at a fraction of full, so the global fade-in's 0 → 1 would land it opaque. Its
   own rest value is the end state, and the property is what carries it through the two bands. */
@media (prefers-reduced-motion: no-preference) {

	.module.hero.style-layered .sunburst[data-jazzy-scroll] {
		opacity: 0;
	}

	.module.hero.style-layered .sunburst[data-jazzy-scroll].animated-in {
		opacity: var(--sunburst-opacity, .12);
	}

}

.module.hero.style-layered:not(:has(.backdrop))::before {
	background: none;
}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 950 - Tablet Sizes */
/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: calc(950rem/16)) {

	.module.hero.style-layered {
		--layered-pad-top: calc(var(--header-height) + var(--module-spacing-medium));
	}

	.module.hero.style-layered .intro > * {
		grid-column: 1 / -1;
	}

}

/***************************************************************************************************************************************************************************************/
/* MQ MAX-WIDTH 650 - Mobile Sizes */
/***************************************************************************************************************************************************************************************/

@media only screen and (max-width: calc(650rem/16)) {

	/* Clear of the header and no more. A Mega cut is most of the screen's height here, so the band
	   the desktop composition puts above it is height the heading itself needs. */
	.module.hero.style-layered:has(.title .mega) .title {
		padding-top: calc(var(--header-height) + var(--text-spacing-xxsmall));
	}

	/* The band is a tall narrow one here and the statement sits over the landscape rather than over
	   sky, so the scrim starts higher up it and holds more of its weight through the middle. */
	.module.hero.style-layered::after {
		background: linear-gradient(180deg, transparent 0%, var(--overlay-medium) 55%, var(--overlay-darker) 100%);
		height: 80%;
	}

	/* Over the scrim rather than under it: the foot scrim reaches this far up the band at this rung,
	   and the copy at the head of it is the one thing that cannot be behind it. The statement at the
	   other end already stands clear on its own. */
	.module.hero.style-layered .title {
		z-index: 3;
	}

	/* The Display cut buys some of the same room back — less of it, because the line is shorter. */
	.module.hero.style-layered .title {
		padding-top: calc(var(--layered-pad-top) - var(--text-spacing-xsmall));
	}

	/* The band's own cut of the two lockups. Both are set for a screen the copy crosses in a few
	   words; here the headline takes four lines of a screen it also has to leave a landscape room
	   on, and the line under it follows it down the scale. */
	.module.hero.style-layered .title .heading-1 {
		font-size: calc(52rem / 16);
	}

	.module.hero.style-layered .intro > .statement.heading-6 {
		font-size: calc(26rem / 16);
	}

	/* The two measures the band is composed on, answered again for this shape. Each falls back to
	   the one above it, so a hero that has nothing to say here keeps what it already had. */
	.module.hero.style-layered .sunburst {
		top: var(--sunburst-position-mobile, var(--sunburst-position, var(--layered-pad-top)));
	}

	.module.hero.style-layered .media.fore {
		height: var(--foreground-height-mobile, var(--foreground-height, 56%));
	}

}