/* Statement Band 004 — Text with Inline Photos.
 *
 * Large type, set left at the page width; the paragraph's inline images (core's "Inline image"
 * format) styled as small photographs set into the line.
 *
 * Copied from Asteri and restyled to this site: the type is this site's
 * heading sizes (--heading-2, --heading-3 on a phone), the colours its tokens,
 * and the eases are the pattern's own (below).
 */

/* Centred (Asteri's original is left-aligned), the statement running the
   container's full width. WIDTH IS NOT SET HERE: the inner `.site-container`
   takes the site's measure. */
.statement-band-004__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-md);
	text-align: center;
}

/* (0,2,0): over the site's own paragraph sizing. */
.statement-band-004 .statement-band-004__text {
	/* The page's full content width: at this size a narrower measure breaks
	   the statement into too many short lines. */
	max-inline-size: none;
	inline-size: 100%;
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--heading-2);
	line-height: 1.38;
	color: var(--color-text);
	/* Balanced: centred lines of like length, never a lonely last word. */
	text-wrap: balance;
}

/* An inline photograph: a little taller than the capitals (still inside the
   line's height, so the lines keep their spacing), 3 : 2, cropped to fill,
   sitting on the line. A width set on the image in the editor (an inline
   style) overrides the width here, for that image only. */
.statement-band-004__text img {
	display: inline-block;
	block-size: 1.08em;
	inline-size: auto;
	aspect-ratio: 3 / 2;
	max-inline-size: none;
	object-fit: cover;
	/* Its foot a little below the baseline, so it sits centred on the
	   capitals rather than towering over them. */
	vertical-align: -0.2em;
	/* Tucked toward its name: the space after it is already a word space. */
	margin-inline: 0.02em -0.04em;
}

/* A photograph and its name, kept on one line (the span is added by
   inc/statement-photos.php, in the HTML, on the front end). */
.statement-band-004__pair {
	white-space: nowrap;
}

/* Armed by pattern.js only, so without the script the photographs show. */
.statement-band-004.is-wipe-armed .statement-band-004__text img {
	clip-path: inset(0 100% 0 0);
}

@media (max-width: 48rem) {
	.statement-band-004 .statement-band-004__text {
		font-size: var(--heading-3);
		line-height: 1.44;
	}
}

/* A name that is a link.
 *
 * On the front end inc/statement-photos.php renders the pair as ONE link —
 * `<a class="__link"><img>&nbsp;<span class="__name">name</span></a>` — so the
 * photograph is part of the link too. The site's drawn underline leaves out a
 * link around an image (`a:has(img)`), so the band draws the same two-layer
 * line itself, on the words alone: a resting hairline, the full line drawn in
 * from the left on hover, leaving to the right.
 *
 * The link keeps the statement's ink rather than the content link colour —
 * coloured names would pull the sentence apart. (0,4,1): over the site's
 * content-link colour rule at (0,3,1), in both the editor and the front end.
 * In the editor there are no pairs, and the bare `<a>` around the name simply
 * takes the site's underline. */
.statement-band-004 .statement-band-004__text a:any-link:not(.wp-element-button) {
	color: inherit;
	padding-block-end: 0;
}

.statement-band-004 .statement-band-004__text .statement-band-004__name {
	background-image:
		linear-gradient(currentColor, currentColor),
		linear-gradient(color-mix(in srgb, currentColor 30%, transparent), color-mix(in srgb, currentColor 30%, transparent));
	background-repeat: no-repeat;
	background-position: 100% 100%, 0 100%;
	background-size: 0% 1px, 100% 1px;
	transition: background-size 0.6s var(--statement-band-004-ease-out);
}

.statement-band-004 .statement-band-004__text .statement-band-004__link:is(:hover, :focus-visible) .statement-band-004__name {
	background-position: 0 100%, 0 100%;
	background-size: 100% 1px, 100% 1px;
}

/* Pointing at a name dims the rest of the statement.
 *
 * Once the pointer has touched a name, the paragraph's ink thins to a
 * third and every photograph fades with it, while the name pointed at
 * last keeps the full colour — and that holds while the pointer is ANYWHERE
 * over the statement, the gaps between words included. It clears only when
 * the pointer leaves the statement. Keyboard focus lights a name the
 * same way.
 *
 * Two classes carry the state, set by pattern.js: `is-dimmed` on the
 * paragraph, `is-lit` on the photograph-and-name pair (the span that
 * inc/statement-photos.php adds on the front end — the editor has neither, so
 * it is untouched). Classes rather than `:hover`, because `:hover` ends the
 * moment the pointer slips off a word into the space beside it, which read
 * as flicker. Colour is inherited, so the links (colour: inherit, above) and
 * the drawn underline (currentColor) follow. */
.statement-band-004 .statement-band-004__text,
.statement-band-004 .statement-band-004__text .statement-band-004__pair,
.statement-band-004 .statement-band-004__text img {
	transition: color 0.5s var(--statement-band-004-ease-out), opacity 0.5s var(--statement-band-004-ease-out), transform 0.7s var(--statement-band-004-ease);
}

/* The lit photograph grows — a transform, so the line it sits in does not
   reflow, and raised above its neighbours so the enlarged picture is never
   tucked under a word. It grows from its bottom-right corner: that corner
   touches its own name, so the name is never covered, and the growth goes up
   and to the left, over the dimmed text before it — and it tilts a little,
   like a photograph picked up off the page. The ease overshoots slightly
   (a soft "back"), so it settles rather than stops; the way back uses the
   same curve, which reads as it being set down. Bespoke geometry: the
   scale and the tilt are the gesture, tuned by eye. */
.statement-band-004 {
	/* Paper of its own: placed after a hero that scrolls away slowly
	   (hero-006), it comes up over it, and must not show the hero through. */
	background: var(--color-background);
	--statement-band-004-ease: cubic-bezier(0.34, 1.4, 0.64, 1);
	/* An expo ease-out (Asteri has it as a site token; this site has none). */
	--statement-band-004-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

.statement-band-004 .statement-band-004__text img {
	position: relative;
	z-index: 0;
	transform-origin: right bottom;
}

.statement-band-004 .statement-band-004__text .statement-band-004__pair.is-lit img {
	transform: scale(1.8) rotate(-6deg);
	z-index: 1;
}

.statement-band-004 .statement-band-004__text.is-dimmed {
	color: color-mix(in srgb, var(--color-text) 32%, transparent);
}

.statement-band-004 .statement-band-004__text.is-dimmed img {
	opacity: 0.32;
}

.statement-band-004 .statement-band-004__text .statement-band-004__pair.is-lit,
.statement-band-004 .statement-band-004__text .statement-band-004__pair.is-lit img {
	color: var(--color-text);
	opacity: 1;
}

/* The lit name also shows the full underline, not only while hovered. */
.statement-band-004 .statement-band-004__text .statement-band-004__pair.is-lit .statement-band-004__name {
	background-position: 0 100%, 0 100%;
	background-size: 100% 1px, 100% 1px;
}

@media (prefers-reduced-motion: reduce) {
	.statement-band-004 .statement-band-004__text,
	.statement-band-004 .statement-band-004__text .statement-band-004__pair,
	.statement-band-004 .statement-band-004__text img,
	.statement-band-004 .statement-band-004__text .statement-band-004__name {
		transition: none;
	}
}