/*
 * THE STRIP — how Esmeralda treats images everywhere.
 *
 * Her ruling on number 18, 21 August: I love those visuals · visually it's
 * beautiful, it's elegant, and it matches Esmeralda.
 *
 * Four pictures in a row, edge to edge, a thin gap of ground between them. On
 * a narrow screen it becomes two by two rather than four tiny slivers, so no
 * face is ever reduced to nothing.
 *
 * Nothing is laid over any of them.
 */

.strip {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 4px;
	background: var(--purple-deep);
	padding: 4px 0;
}

@media (min-width: 760px) {
	.strip { grid-template-columns: repeat(4, 1fr); }
}

.strip img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: 50% 42%;
}

/* A strip of two, for a page that wants more of each picture. */
.strip--pair { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .strip--pair { grid-template-columns: repeat(2, 1fr); } }
.strip--pair img { aspect-ratio: 4 / 3; }

/* A single picture, whole, when one has to carry the page on its own. */
.plate {
	margin: 0;
	background: var(--purple-deep);
	padding: 4px 0;
	line-height: 0;
}

.plate img {
	display: block;
	width: 100%;
	max-height: 74svh;
	object-fit: cover;
	object-position: 50% 44%;
}

/* ── Words, always on their own ground ───────────────────────────────────── */

.band {
	background: var(--purple-deep);
	color: var(--white);
	text-align: center;
	padding: clamp(3rem, 9vh, 6rem) clamp(18px, 6vw, 72px);
}

.band--light { background: var(--white); color: var(--ink); }

.band__eyebrow {
	font-family: var(--font-head);
	font-size: clamp(.68rem, 2.5vw, .78rem);
	letter-spacing: .34em;
	text-transform: uppercase;
	color: var(--lilac);
	margin: 0;
}

.band--light .band__eyebrow { color: var(--purple); }

.band__head {
	font-family: var(--font-head);
	font-weight: 300;
	text-transform: uppercase;
	letter-spacing: .05em;
	font-size: clamp(1.6rem, 7vw, 3rem);
	line-height: 1.14;
	max-width: 20ch;
	margin: .55em auto 0;
}

.band--light .band__head { color: var(--purple); }

.band__warm {
	font-family: var(--font-warm);
	font-style: italic;
	font-size: clamp(1.1rem, 4.4vw, 1.6rem);
	line-height: 1.3;
	color: var(--lilac);
	max-width: 30ch;
	margin: .6em auto 0;
}

.band--light .band__warm { color: var(--body-muted); }

.band__body {
	font-family: var(--font-util);
	font-size: clamp(.96rem, 3.6vw, 1.05rem);
	line-height: 1.7;
	color: rgba(255, 255, 255, .84);
	max-width: 44ch;
	margin: 1.4em auto 0;
}

.band--light .band__body { color: var(--body-muted); }

.band__figure {
	font-family: var(--font-head);
	font-weight: 200;
	font-size: clamp(2.6rem, 12vw, 5rem);
	line-height: 1;
	margin: .5em 0 0;
}

.band__note {
	font-family: var(--font-util);
	font-size: clamp(.8rem, 3vw, .86rem);
	letter-spacing: .04em;
	color: rgba(255, 255, 255, .62);
	margin: .8em auto 0;
}

.band--light .band__note { color: var(--body-muted); }