/* Statement band. */

.quote-section { padding-top: var(--space-above, var(--space-default)); }

.quote-section__band {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	/* 151/150 at 390 -> 276/305 at 1728 */
	padding-block: clamp(151px, 114.57px + 9.342vw, 276px)
	               clamp(150px, 104.82px + 11.585vw, 305px);
	padding-inline: var(--gutter);
	background: var(--red-ink);
	color: var(--white);
}

.quote-section__image {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Black 60% wash. */
.quote-section__band::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(0, 0, 0, var(--quote-overlay, .6));
}

.quote-section__statement > * {
	font-weight: 600;
	line-height: 1.27; /* 168px over three 44px lines */
	text-align: center;
}

/* Unread words sit at 40%; the reveal walks left to right on scroll. */
.quote-section__word {
	opacity: .4;
	transition: opacity .45s ease;
}
.quote-section__word.is-lit { opacity: 1; }
/* Drawn in #fad7d7 and tried in --red at the client's request on
   2026-09-02. Red measures ~2.5:1 against this band - a photograph under a
   60% black wash - which is below the 3:1 floor for large text, where white
   is ~10:1, so the statement reads all white. Point this back at
   --red-tint-strong (or --red) to restore a tint; the **markers** in the
   field, the word spans and the scroll reveal are all unchanged. */
.quote-section__word--hl { color: var(--white); }

@media (prefers-reduced-motion: reduce) {
	.quote-section__word { opacity: 1; transition: none; }
}

/* Without JS every word reads at full strength rather than dimmed. */
.no-js .quote-section__word { opacity: 1; }