/* ==========================================================================
   Full-bleed image band
   ========================================================================== */

/* Edge to edge: about 280px tall on phones, up to 448px on desktop. */
.band {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	min-height: clamp(17.5rem, 12rem + 20vw, 28rem);
	overflow: hidden;
	/* Duotone base: the photo is multiplied onto this, so its whites become brand blue. */
	background-color: var(--brand-blue);
}

/* Duotone: greyscale photo multiplied onto brand blue. Shadows go to deep navy,
   highlights to brand blue. Multiply can only darken, so no part of the band is
   ever lighter than brand blue, which keeps white text at 6.3:1 or better. */
.band__image {
	position: absolute;
	inset: 0;
	z-index: -2;
	/* On the wrapper, not the img: the wrapper is its own layer, so a blend
	   set on the img inside it would have nothing blue to blend with. */
	mix-blend-mode: multiply;
}

.band__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(1) contrast(1.1) brightness(1.1);
}

/* Darker behind the text on the left, fading out to the right, so the window
   lines in the photo never compete with the words. */
.band::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(90deg, var(--brand-blue-900) 0%, transparent 70%);
	opacity: 0.85;
}

.band__inner {
	padding-block: var(--space-8);
}

.band__statement {
	max-width: 16ch;
	font-size: var(--text-4xl);
	font-weight: var(--weight-extrabold);
	line-height: var(--leading-tight);
	letter-spacing: -0.01em;
	text-transform: uppercase;
	text-wrap: balance;
	color: var(--on-blue);
}