.hero {
	position: relative;
	padding: 0;
	background: var(--sk-black);
	color: var(--sk-white);

	/*
	 * The kicker and the division list read as one unit in the comp, so they
	 * share a size rather than each carrying its own and drifting apart. The
	 * ceiling is the comp's ratio against the 72px headline.
	 */

	--sk-hero-lede: clamp(1rem, 0.9rem + 0.35vw, 1.1875rem);

	/* Cross-fade length from the comp. Only the photography moves. */
	--sk-hero-fade: 900ms;

	.eyebrow {
		color: color-mix(in srgb, var(--sk-white) 80%, transparent);
	}
}

/* Every slide shares one grid cell, so they stack without absolute
	   positioning and the section is still sized by the tallest one. */

.hero__viewport {
	position: relative;
	display: grid;
}

.hero__slide {
	grid-area: 1 / 1;
	display: grid;
	align-items: end;
	min-height: clamp(26rem, 58vh, 40rem);

	/* Raised for desktop only. Phones are left on the shorter band above,
		   where the same proportions would push the whole of the copy below the
		   fold rather than making more room for it. */

	@media (min-width: 62rem) {
		min-height: clamp(32rem, 72vh, 46rem);
	}
}

/*
	 * Only the photography cross-fades. The copy is swapped rather than faded
	 * because the eyebrow and the underlined division differ per slide, and a
	 * simultaneous fade would show both readings at once.
	 */

.hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	opacity: 0;

	/* Contains the multiply below, which would otherwise blend down through
		   the hero into the page. */

	isolation: isolate;
	transition: opacity var(--sk-hero-fade) ease-in-out;

	img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	/* The division's color, multiplied into the photo so each slide carries
		   its own cast rather than one shared wash. */

	&::before {
		position: absolute;
		inset: 0;
		z-index: 1;
		background: var(--sk-slide-accent, var(--sk-accent));
		opacity: 0.55;
		mix-blend-mode: multiply;
		content: "";
	}

	/*
		 * Two scrims: one from the left to hold the copy legible over any
		 * exposure, one up from the bottom for the dots and the button.
		 */

	&::after {
		position: absolute;
		inset: 0;
		z-index: 2;
		background:
				linear-gradient(
					90deg,
					rgb(10 14 19 / 85%) 0%,
					rgb(10 14 19 / 62%) 38%,
					rgb(10 14 19 / 22%) 70%,
					rgb(10 14 19 / 5%) 100%
				),
				linear-gradient(0deg, rgb(10 14 19 / 45%) 0%, rgb(10 14 19 / 0%) 55%);
		content: "";
	}
}

.hero__slide[data-sk-active] .hero__media {
	opacity: 1;
}

/*
	 * The copy does not animate at all. Every slide prints the same headline,
	 * kicker, division list, and button, so hiding one block and showing the next
	 * in the same frame leaves the copy apparently untouched while the
	 * photography behind it cross-fades; only the eyebrow and the underline,
	 * which are what name the current slide, change.
	 *
	 * This replaced a fade. Because the eyebrow differs per slide the two blocks
	 * could not be allowed to overlap, so the incoming one waited for the
	 * outgoing one to clear, and the copy blinked out for a third of a second on
	 * every change.
	 *
	 * visibility rather than opacity: it also takes the inactive slides' buttons
	 * out of the tab order, which is why they are safe to leave stacked.
	 */

.hero__content {
	position: relative;
	z-index: 2;
	padding-block: clamp(2.5rem, 6vw, 4.5rem);
	visibility: hidden;
}

.hero__slide[data-sk-active] .hero__content {
	visibility: visible;
}

.hero__heading {
	max-width: 22ch;
	margin-bottom: 1rem;
	color: var(--sk-white);
}

.hero__kicker {
	margin-bottom: 0.5rem;
	font-size: var(--sk-hero-lede);
	font-weight: 700;
}

.hero__divisions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	margin-bottom: 1.75rem;
	font-size: var(--sk-hero-lede);

	/* Divider pipes between division names, as in the comp. */
	li + li::before {
		margin-right: 1rem;
		color: color-mix(in srgb, var(--sk-white) 40%, transparent);
		content: "|";
	}
}

.hero__division {
	color: color-mix(in srgb, var(--sk-white) 75%, transparent);

	&.is-active {
		color: var(--sk-white);
	}
}

/*
	 * The name carries the underline rather than the list item, which would draw
	 * it through the preceding pipe and the gap before it too.
	 */

.hero__division.is-active .hero__division-name {
	font-weight: 700;
	text-decoration: underline;
	text-decoration-color: var(--sk-accent);
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.hero__dots {
	position: absolute;
	right: var(--sk-gutter);
	bottom: 1.25rem;
	z-index: 3;
	display: flex;

	/* The buttons carry their own spacing as hit area, below. */
	gap: 0;
}

/*
	 * The button is the 24px square WCAG asks a target to be; the dot drawn
	 * inside it stays the 12px of the comp. Padding the button itself would have
	 * grown the dot with it, since the dot is the button's own background.
	 */

.hero__dot {
	display: grid;
	place-items: center;
	width: 1.5rem;
	height: 1.5rem;
	border: 0;
	padding: 0;
	background: none;

	&::before {
		width: 0.75rem;
		height: 0.75rem;
		border-radius: 50%;
		background: color-mix(in srgb, var(--sk-white) 45%, transparent);
		content: "";
		transition: background var(--sk-transition);
	}

	&[aria-selected="true"]::before {
		background: var(--sk-support);
	}
}