/*!
 * Archivo del Desierto — page-level compositions
 */

@layer pages {

	/* ══════════════════════════════════════════════════════════════════════
	   Hero — the archive plate
	   ══════════════════════════════════════════════════════════════════════ */

	.hero {
		position: relative;
		display: flex;
		align-items: flex-end;
		min-height: min(92svh, 54rem);
		padding-block: calc(var(--header-height) + var(--space-2xl)) clamp(3rem, 8vh, 6rem);
		background-color: var(--color-night);
		color: var(--color-paper);
		overflow: clip;
		isolation: isolate;
	}

	/* The photograph itself, as an element rather than a background: it can then carry srcset
	   and be graded independently of the scrims above it. */
	.hero__plate {
		position: absolute;
		inset: 0;
		z-index: -2;
	}

	.hero__plate img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		scale: 1.05;
		translate: 0 var(--hero-parallax, 0px);
		will-change: translate;
	}

	/*
	 * Two very different sources need two different treatments, so the grading is keyed off
	 * the origin class the template sets rather than applied blindly:
	 *
	 * .hero--commissioned — the composite is already a warm, finished image. Desaturating it
	 *   would throw away the whole point of it. It only needs a touch of contrast and a
	 *   slight darkening so white type holds.
	 * .hero--archive — a raw 1958 contact print: low contrast, bright paper. Pushed to
	 *   monochrome and darkened, or white text lands on white sky.
	 */
	.hero--commissioned .hero__plate img {
		object-position: 58% 44%;
		filter: contrast(1.02) saturate(1.06) brightness(1.04);
	}

	.hero--archive .hero__plate img {
		object-position: center 32%;
		filter: grayscale(1) contrast(1.18) brightness(0.82);
	}

	/* Scrims. Two passes: vertical for the header and the fold, horizontal for the text
	   column, so the right side of the image stays legible. */
	.hero__scrim {
		position: absolute;
		inset: 0;
		z-index: -1;
		pointer-events: none;
		background:
			linear-gradient(
				180deg,
				rgb(11 13 16 / 0.72) 0%,
				rgb(11 13 16 / 0.28) 26%,
				rgb(11 13 16 / 0.34) 54%,
				rgb(11 13 16 / 0.88) 92%,
				var(--color-night) 100%
			),
			linear-gradient(
				96deg,
				rgb(11 13 16 / 0.8) 0%,
				rgb(11 13 16 / 0.35) 46%,
				rgb(11 13 16 / 0.05) 78%
			),
			radial-gradient(
				120% 90% at 78% 18%,
				color-mix(in oklab, var(--color-brass) 26%, transparent) 0%,
				transparent 60%
			);
	}

	/*
	 * The commissioned image is bright across its whole left half — sky and open dune — where
	 * the headline sits, and its own warm light already supplies the glow the brass radial was
	 * faking. So: a heavier left-to-right wash, and no added tint.
	 */
	.hero--commissioned .hero__scrim {
		background:
			/* 1. Just enough under the header for the navigation, gone by a third of the way down. */
			linear-gradient(
				180deg,
				rgb(9 11 15 / 0.66) 0%,
				rgb(9 11 15 / 0.22) 17%,
				transparent 34%
			),
			/* 2. The text column. Strong where the headline sits, fully clear of the frame by
			      two thirds — the camp, the tent and the sunset on the right are the reason the
			      image was commissioned and must not be washed out to hold type they never touch. */
			linear-gradient(
				95deg,
				rgb(9 11 15 / 0.84) 0%,
				rgb(9 11 15 / 0.60) 27%,
				rgb(9 11 15 / 0.22) 49%,
				transparent 67%
			),
			/* 3. A pool under the headline and the fact row, weighted left so it never reaches
			      the right edge. */
			radial-gradient(
				88% 60% at 12% 94%,
				rgb(9 11 15 / 0.60) 0%,
				rgb(9 11 15 / 0.20) 54%,
				transparent 82%
			),
			/* 4. The seam into the page below — a thin vignette, not a curtain. */
			linear-gradient(
				180deg,
				transparent 87%,
				rgb(9 11 15 / 0.48) 96%,
				var(--color-night) 100%
			);
	}

	/*
	 * On a portrait phone a 16:9 image is cropped hard. Pull the framing back to the centre
	 * so the soldier and the sunset both survive, and lean on a stronger vertical wash
	 * instead of the horizontal one, because the text now sits over the middle of the image.
	 */
	@media (max-width: 47.99em) {
		.hero--commissioned .hero__plate img {
			object-position: 68% 46%;
		}

		.hero--commissioned .hero__scrim {
			background:
				linear-gradient(
					180deg,
					rgb(9 11 15 / 0.76) 0%,
					rgb(9 11 15 / 0.42) 20%,
					rgb(9 11 15 / 0.46) 52%,
					rgb(9 11 15 / 0.76) 84%,
					var(--color-night) 100%
				),
				/* The text sits over the lower half here, so the weight goes under it rather
				   than across the whole plate. */
				radial-gradient(
					120% 52% at 40% 100%,
					rgb(9 11 15 / 0.52) 0%,
					transparent 78%
				);
		}
	}

	.hero__inner {
		position: relative;
		width: 100%;
	}

	.hero__eyebrow {
		display: inline-flex;
		align-items: center;
		gap: 0.9rem;
		margin-bottom: clamp(1rem, 2.5vw, 1.75rem);
		font-family: var(--font-mono);
		font-size: 0.6875rem;
		letter-spacing: var(--tracking-widest);
		text-transform: uppercase;
		/* Brass on its own disappears into the sepia sky behind it on a portrait phone, where
		   the type sits over the middle of the plate rather than over a wash. Lifted towards
		   white and given a shadow so it separates on any part of the image. */
		color: color-mix(in oklab, var(--color-brass) 58%, white);
		text-shadow: 0 2px 14px rgb(9 11 15 / 0.75);
	}

	.hero__eyebrow::before {
		content: "";
		width: 34px;
		height: 1px;
		background-color: currentColor;
	}

	.hero__title {
		max-width: 14ch;
		font-size: var(--text-5xl);
		font-weight: 800;
		line-height: 0.98;
		letter-spacing: -0.025em;
		color: #fff;
		text-shadow: 0 18px 60px rgb(0 0 0 / 0.55);
	}

	.hero__title em {
		display: block;
		font-style: italic;
		font-weight: 500;
		color: var(--color-sand);
	}

	.hero__standfirst {
		max-width: 42ch;
		margin-top: clamp(1.25rem, 3vw, 2rem);
		font-size: var(--text-lg);
		line-height: var(--leading-relaxed);
		font-weight: 300;
		color: color-mix(in oklab, var(--color-paper) 92%, transparent);
		text-shadow: 0 6px 26px rgb(0 0 0 / 0.5);
	}

	.hero__actions {
		margin-top: clamp(1.75rem, 4vw, 2.75rem);
	}

	/* Three facts, set as archival metadata across the foot of the hero. */
	.hero__facts {
		display: flex;
		flex-wrap: wrap;
		gap: clamp(1.5rem, 4vw, 3.5rem);
		margin-top: clamp(2.5rem, 6vw, 4rem);
		padding-top: var(--space-m);
		border-top: 1px solid color-mix(in oklab, var(--color-paper) 16%, transparent);
	}

	.hero__fact {
		display: flex;
		flex-direction: column;
		gap: 0.2rem;
	}

	.hero__fact-value {
		font-family: var(--font-display);
		font-size: clamp(1.5rem, 3vw, 2.1rem);
		font-weight: 600;
		line-height: 1;
		color: var(--color-paper);
	}

	.hero__fact-label {
		font-family: var(--font-mono);
		font-size: 0.625rem;
		letter-spacing: var(--tracking-wider);
		text-transform: uppercase;
		color: color-mix(in oklab, var(--color-paper) 78%, transparent);
	}

	/* The photograph's own credit, bottom-right, like a museum wall label. */
	.hero__credit {
		position: absolute;
		inset-block-end: clamp(0.75rem, 2vh, 1.5rem);
		inset-inline-end: var(--space-gutter);
		max-width: 22ch;
		text-align: right;
		font-family: var(--font-mono);
		font-size: 0.625rem;
		line-height: 1.5;
		letter-spacing: var(--tracking-wide);
		text-transform: uppercase;
		color: color-mix(in oklab, var(--color-paper) 45%, transparent);
	}

	@media (max-width: 47.99em) {
		.hero { min-height: min(88svh, 44rem); }
		.hero__credit { display: none; }
	}

	/* ══════════════════════════════════════════════════════════════════════
	   Book page hero
	   ══════════════════════════════════════════════════════════════════════ */

	.book-hero {
		position: relative;
		padding-block: calc(var(--header-height) + clamp(2.5rem, 6vw, 5rem)) clamp(3rem, 7vw, 5.5rem);
		background-color: var(--color-night);
		color: var(--color-paper);
		overflow: clip;
	}

	.book-hero::before {
		content: "";
		position: absolute;
		inset: 0;
		background:
			radial-gradient(90% 120% at 12% 0%, color-mix(in oklab, var(--accent) 24%, transparent) 0%, transparent 58%),
			radial-gradient(70% 100% at 92% 96%, color-mix(in oklab, var(--accent) 16%, transparent) 0%, transparent 62%);
		pointer-events: none;
	}

	.book-hero__inner {
		position: relative;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: clamp(2rem, 6vw, 5rem);
	}

	.book-hero__object {
		flex: 0 1 19rem;
		min-width: 0;
	}

	.book-hero__body {
		flex: 1 1 26rem;
		min-width: 0;
	}

	.book-hero__numeral {
		display: flex;
		align-items: baseline;
		gap: 0.9rem;
		margin-bottom: var(--space-s);
	}

	.book-hero__numeral-mark {
		font-family: var(--font-display);
		font-size: clamp(2.4rem, 6vw, 3.6rem);
		font-weight: 500;
		line-height: 0.8;
		color: color-mix(in oklab, var(--accent) 70%, white 10%);
	}

	.book-hero__numeral-label {
		font-family: var(--font-mono);
		font-size: 0.6875rem;
		letter-spacing: var(--tracking-widest);
		text-transform: uppercase;
		color: color-mix(in oklab, var(--color-paper) 60%, transparent);
	}

	.book-hero__title {
		font-size: var(--text-4xl);
		line-height: 1.02;
		color: #fff;
	}

	.book-hero__subtitle {
		margin-top: 0.5rem;
		font-family: var(--font-display);
		font-style: italic;
		font-size: var(--text-xl);
		font-weight: 500;
		color: color-mix(in oklab, var(--accent) 60%, white 30%);
	}

	.book-hero__standfirst {
		max-width: 46ch;
		margin-top: var(--space-m);
		font-size: var(--text-lg);
		font-weight: 300;
		color: color-mix(in oklab, var(--color-paper) 88%, transparent);
	}

	.book-hero .meta-row {
		margin-block: var(--space-l) var(--space-l);
		color: color-mix(in oklab, var(--color-paper) 58%, transparent);
	}

	.book-hero .meta-row__item + .meta-row__item::before {
		background-color: color-mix(in oklab, var(--color-paper) 24%, transparent);
	}

	/* The free-reading promise, stated plainly next to the buttons. */
	.book-hero__note {
		margin-top: var(--space-m);
		max-width: 44ch;
		font-size: 0.9375rem;
		line-height: var(--leading-normal);
		color: color-mix(in oklab, var(--color-paper) 55%, transparent);
	}

	@media (max-width: 47.99em) {
		/* Explicit width, not shrink-to-fit: the book derives its own size from this box
		   (container queries), so `flex-basis: auto` + a width:100% child resolves to zero.
		   Same trap as .volume__object. */
		.book-hero__object { flex: 0 0 auto; width: min(13rem, 54%); }
	}

	/* ── Next volume ────────────────────────────────────────────────────── */

	.next-volume {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-l);
		padding: clamp(1.75rem, 4vw, 2.75rem);
		background-color: var(--surface-alt);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-m);
		text-decoration: none;
		transition: border-color var(--motion-normal) var(--ease-standard),
			background-color var(--motion-normal) var(--ease-standard),
			transform var(--motion-normal) var(--ease-standard);
	}

	.next-volume:hover,
	.next-volume:focus-visible {
		border-color: color-mix(in oklab, var(--accent) 50%, transparent);
		transform: translateY(-2px);
	}

	.next-volume__label {
		font-family: var(--font-mono);
		font-size: 0.6875rem;
		letter-spacing: var(--tracking-widest);
		text-transform: uppercase;
		color: var(--on-surface-muted);
		margin-bottom: 0.4rem;
	}

	.next-volume__title {
		font-family: var(--font-display);
		font-size: var(--text-xl);
		font-weight: 700;
		color: var(--color-ink);
	}

	.next-volume__object { flex: 0 0 auto; width: 5.5rem; }

	/* ══════════════════════════════════════════════════════════════════════
	   Photograph viewer — the museum room
	   ══════════════════════════════════════════════════════════════════════ */

	.viewer {
		position: fixed;
		inset: 0;
		z-index: 200;
		display: flex;
		flex-direction: column;
		background-color: color-mix(in oklab, var(--color-night) 97%, transparent);
		-webkit-backdrop-filter: blur(8px);
		backdrop-filter: blur(8px);
		color: var(--color-paper);
		animation: viewer-in var(--motion-normal) var(--ease-standard);
	}

	.viewer[hidden] { display: none !important; }

	@keyframes viewer-in {
		from { opacity: 0; }
		to { opacity: 1; }
	}

	.viewer__bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-m);
		padding: var(--space-s) var(--space-gutter);
		border-bottom: 1px solid color-mix(in oklab, var(--color-paper) 12%, transparent);
	}

	.viewer__ref {
		font-family: var(--font-mono);
		font-size: 0.75rem;
		letter-spacing: var(--tracking-wider);
		color: var(--color-brass);
	}

	.viewer__body {
		flex: 1;
		display: flex;
		align-items: center;
		gap: clamp(0.5rem, 2vw, 1.5rem);
		padding: clamp(1rem, 3vw, 2.5rem) var(--space-gutter);
		min-height: 0;
	}

	.viewer__stage {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 0;
		min-height: 0;
		height: 100%;
	}

	.viewer__img {
		max-width: 100%;
		max-height: 100%;
		width: auto;
		height: auto;
		object-fit: contain;
		background-color: var(--color-paper-warm);
		padding: clamp(6px, 1vw, 14px);
		border-radius: var(--radius-xs);
		box-shadow: var(--shadow-modal);
	}

	/* The wall label beside the print. */
	.viewer__label {
		flex: 0 0 min(22rem, 34vw);
		align-self: stretch;
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: var(--space-s);
		padding-inline-start: clamp(1rem, 3vw, 2rem);
		border-inline-start: 1px solid color-mix(in oklab, var(--color-paper) 12%, transparent);
	}

	.viewer__title {
		font-family: var(--font-display);
		font-size: var(--text-xl);
		font-weight: 600;
		color: var(--color-paper);
	}

	.viewer__desc {
		font-size: 0.9375rem;
		line-height: var(--leading-normal);
		color: var(--on-dark-muted);
	}

	.viewer__meta {
		display: flex;
		flex-direction: column;
		gap: 0.4rem;
		padding-top: var(--space-s);
		border-top: 1px solid color-mix(in oklab, var(--color-paper) 10%, transparent);
		font-family: var(--font-mono);
		font-size: 0.6875rem;
		letter-spacing: var(--tracking-wide);
		text-transform: uppercase;
		color: color-mix(in oklab, var(--on-dark-muted) 90%, transparent);
	}

	.viewer__nav,
	.viewer__close {
		flex: 0 0 auto;
		display: grid;
		place-items: center;
		width: 46px;
		height: 46px;
		border-radius: 50%;
		color: var(--color-paper);
		background-color: rgb(255 255 255 / 0.07);
		border: 1px solid color-mix(in oklab, var(--color-paper) 22%, transparent);
		transition: background-color var(--motion-fast) var(--ease-standard),
			border-color var(--motion-fast) var(--ease-standard),
			scale var(--motion-fast) var(--ease-standard);
	}

	.viewer__nav:hover,
	.viewer__close:hover {
		background-color: var(--color-brass);
		border-color: var(--color-brass);
		scale: 1.05;
	}

	.viewer__nav svg,
	.viewer__close svg { width: 18px; height: 18px; }

	@media (max-width: 63.99em) {
		.viewer__body { flex-direction: column; padding-inline: var(--space-s); }

		.viewer__label {
			flex: 0 0 auto;
			border-inline-start: 0;
			border-block-start: 1px solid color-mix(in oklab, var(--color-paper) 12%, transparent);
			padding-inline-start: 0;
			padding-block-start: var(--space-s);
			width: 100%;
		}

		.viewer__nav {
			position: absolute;
			inset-block-end: 1rem;
			z-index: 2;
		}

		.viewer__nav--prev { inset-inline-start: 1rem; }
		.viewer__nav--next { inset-inline-end: 1rem; }
	}

	/* ══════════════════════════════════════════════════════════════════════
	   Author
	   ══════════════════════════════════════════════════════════════════════ */

	.portrait {
		position: relative;
		max-width: 26rem;
	}

	.portrait img {
		width: 100%;
		filter: grayscale(1) contrast(1.08);
		background-color: var(--color-paper-warm);
		padding: clamp(8px, 1.5vw, 16px);
		border: 1px solid var(--color-border);
		box-shadow: var(--shadow-photograph);
	}

	.portrait__label {
		margin-top: var(--space-s);
		font-family: var(--font-mono);
		font-size: 0.6875rem;
		line-height: 1.6;
		letter-spacing: var(--tracking-wide);
		text-transform: uppercase;
		color: var(--on-surface-muted);
	}

	/* ══════════════════════════════════════════════════════════════════════
	   Archive teaser strip (home)
	   ══════════════════════════════════════════════════════════════════════ */

	.strip {
		display: flex;
		gap: clamp(10px, 1.4vw, 16px);
		align-items: flex-start;
	}

	/*
	 * La tira reparte el ancho en proporción al formato de cada copia, igual que la hoja de
	 * contactos del archivo: así las cinco láminas de la fila comparten altura aunque haya
	 * verticales entre ellas. Con anchos iguales, una vertical salía el doble de alta.
	 */
	.strip .plate { flex: var(--ar) 1 0; min-width: 0; }

	@media (max-width: 47.99em) {
		.strip { flex-wrap: wrap; }
		.strip .plate { flex: var(--ar) 1 40%; }
		.strip .plate:nth-child(n + 5) { display: none; }
	}

	/* ══════════════════════════════════════════════════════════════════════
	   404 / search
	   ══════════════════════════════════════════════════════════════════════ */

	.page-intro {
		padding-block: calc(var(--header-height) + clamp(3rem, 7vw, 5rem)) clamp(2rem, 5vw, 3.5rem);
		background-color: var(--color-night);
		color: var(--color-paper);
	}

	.page-intro__title {
		font-size: var(--text-3xl);
		color: #fff;
		margin-top: var(--space-s);
	}

	.page-intro__standfirst {
		max-width: var(--measure);
		margin-top: var(--space-m);
		font-size: var(--text-lg);
		font-weight: 300;
		color: color-mix(in oklab, var(--color-paper) 82%, transparent);
	}

	.page-intro .breadcrumbs { color: color-mix(in oklab, var(--color-paper) 70%, transparent); }

	/* ══════════════════════════════════════════════════════════════════════
	   Página de agradecimiento — iNTERVOLUTIONS
	   ══════════════════════════════════════════════════════════════════════ */

	/*
	 * The studio's mark is a saturated cyan-blue, which has no business in a palette of paper,
	 * brass and iron-gall ink. Rather than tint it — you do not repaint someone else's logo —
	 * it is mounted on a night plate, where a cold accent reads as a maker's stamp on the back
	 * of a photograph instead of as a colour clash.
	 */
	.patron-mark {
		margin-top: clamp(2rem, 5vw, 3rem);
	}

	.patron-mark__link {
		display: inline-flex;
		align-items: center;
		gap: clamp(0.85rem, 2vw, 1.25rem);
		padding: 0.7rem 1.2rem 0.7rem 0.75rem;
		text-decoration: none;
		border: 1px solid color-mix(in oklab, var(--color-paper) 20%, transparent);
		border-radius: var(--radius-m);
		background-color: rgb(255 255 255 / 0.04);
		transition: border-color var(--motion-fast) var(--ease-standard),
			background-color var(--motion-fast) var(--ease-standard),
			transform var(--motion-fast) var(--ease-standard);
	}

	.patron-mark__link:hover,
	.patron-mark__link:focus-visible {
		border-color: color-mix(in oklab, var(--color-paper) 44%, transparent);
		background-color: rgb(255 255 255 / 0.09);
		transform: translateY(-1px);
	}

	.patron-mark__isotype {
		width: clamp(2.25rem, 5vw, 2.75rem);
		height: auto;
		border-radius: var(--radius-s);
	}

	.patron-mark__words {
		display: flex;
		flex-direction: column;
		gap: 0.15rem;
	}

	.patron-mark__name {
		font-family: var(--font-mono);
		font-size: clamp(0.9375rem, 2.2vw, 1.0625rem);
		font-weight: 500;
		letter-spacing: var(--tracking-wide);
		color: var(--color-paper);
	}

	.patron-mark__tag {
		font-family: var(--font-mono);
		font-size: 0.625rem;
		letter-spacing: var(--tracking-wider);
		text-transform: uppercase;
		color: color-mix(in oklab, var(--color-paper) 66%, transparent);
	}

	.patron-mark--centred {
		display: flex;
		justify-content: center;
		margin-top: 0;
	}

	/* ── The project record, set like a catalogue card ──────────────────── */


	.record {
		padding: clamp(1.5rem, 4vw, 2rem);
		background-color: color-mix(in oklab, var(--color-sand) 26%, var(--color-paper));
		border: 1px solid var(--color-border);
		border-radius: var(--radius-s);
		box-shadow: var(--shadow-paper);
	}

	.record__heading {
		font-family: var(--font-mono);
		font-size: 0.625rem;
		letter-spacing: var(--tracking-widest);
		text-transform: uppercase;
		color: var(--accent-text);
	}

	.record__list {
		margin-top: var(--space-m);
	}

	.record__row {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		justify-content: space-between;
		gap: 0.5rem 1rem;
		padding-block: 0.6rem;
		border-top: 1px solid var(--color-border);
	}

	.record__row:first-child {
		border-top: 0;
		padding-top: 0;
	}

	.record__label {
		font-family: var(--font-mono);
		font-size: 0.625rem;
		letter-spacing: var(--tracking-wider);
		text-transform: uppercase;
		color: var(--color-muted);
	}

	.record__value {
		font-size: var(--text-sm);
		text-align: right;
		color: var(--color-ink);
	}

	/* The one line the studio's own case-study sheet does not carry. */
	.record__row--accent {
		margin-top: 0.3rem;
		padding-top: 0.9rem;
		border-top: 1px solid var(--color-border-strong);
	}

	.record__row--accent .record__value {
		font-family: var(--font-display);
		font-size: var(--text-lg);
		line-height: 1;
		color: var(--accent-text);
	}

	.record__note {
		margin-top: var(--space-m);
		font-size: var(--text-xs);
		line-height: var(--leading-normal);
		color: var(--color-muted);
	}

	/* ── What they built ────────────────────────────────────────────────── */

	.built {
		display: flex;
		flex-direction: column;
		gap: 0;
		margin-top: var(--space-xl);
		list-style: none;
		max-width: var(--measure-wide);
	}

	.built__item {
		display: flex;
		align-items: baseline;
		gap: clamp(1rem, 3vw, 2rem);
		padding-block: clamp(1.1rem, 2.5vw, 1.5rem);
		border-top: 1px solid var(--color-border);
	}

	.built__item:last-child {
		border-bottom: 1px solid var(--color-border);
	}

	.built__n {
		flex: 0 0 auto;
		font-family: var(--font-mono);
		font-size: var(--text-sm);
		font-weight: 500;
		letter-spacing: var(--tracking-wide);
		color: var(--accent-text);
	}

	.built__text {
		margin: 0;
		font-size: var(--text-lg);
		line-height: var(--leading-normal);
		color: var(--color-charcoal);
	}

	/* ── Screenshots, hung like prints ──────────────────────────────────── */

	.shots {
		display: flex;
		flex-wrap: wrap;
		gap: clamp(1.75rem, 4vw, 3rem);
		margin-top: var(--space-xl);
	}

	.shot {
		flex: 1 1 min(34rem, 100%);
		min-width: 0;
		margin: 0;
	}

	.shot__frame {
		display: block;
		padding: clamp(0.4rem, 1.2vw, 0.7rem);
		background-color: color-mix(in oklab, var(--color-paper) 10%, transparent);
		border: 1px solid color-mix(in oklab, var(--color-paper) 16%, transparent);
		border-radius: var(--radius-s);
	}

	/* No forced ratio: these are reproductions of real pages and one of them is a 1.9:1 card.
	   Cropping them to a common rectangle cut the artwork's own title off. */
	.shot__frame img {
		display: block;
		width: 100%;
		height: auto;
		border-radius: 2px;
	}

	.shot__caption {
		display: flex;
		flex-direction: column;
		gap: 0.35rem;
		margin-top: var(--space-s);
	}

	.shot__label {
		font-family: var(--font-mono);
		font-size: 0.625rem;
		letter-spacing: var(--tracking-wider);
		text-transform: uppercase;
		color: color-mix(in oklab, var(--color-brass) 58%, white);
	}

	.shot__text {
		font-size: var(--text-sm);
		line-height: var(--leading-normal);
		color: var(--on-dark-muted);
	}

	/* ── The author's testimonial ───────────────────────────────────────── */

	/*
	 * Centred by its holder, not by `margin-inline: auto` on the figure itself.
	 *
	 * WordPress prints `:where(figure){margin:0 0 1em}` in an inline <style> with no cascade
	 * layer around it, and an unlayered author declaration outranks every layer we have —
	 * `:where()` scoring zero specificity is irrelevant, because layer order is settled before
	 * specificity is ever consulted. So auto margins on a <figure> lose silently, at any layer
	 * (verified: identical declarations failed in `pages` and in `utilities`, and worked only
	 * unlayered), and the quote sat hard against the left gutter. Flex centring on the parent
	 * does not go through the margin cascade at all, so the question never arises.
	 */
	.testimonial-holder {
		display: flex;
		justify-content: center;
	}

	.testimonial {
		max-width: var(--measure);
		text-align: center;
	}

	.testimonial__rating {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		justify-content: center;
		gap: 0.5rem 0.9rem;
	}

	.testimonial__score {
		font-family: var(--font-display);
		font-size: var(--text-2xl);
		font-weight: 600;
		line-height: 1;
		color: var(--accent-text);
	}

	.testimonial__scale {
		font-family: var(--font-mono);
		font-size: var(--text-sm);
		color: var(--color-muted);
	}

	.testimonial__verified {
		font-family: var(--font-mono);
		font-size: 0.625rem;
		letter-spacing: var(--tracking-wider);
		text-transform: uppercase;
		color: var(--color-muted);
	}

	.testimonial__quote {
		position: relative;
		margin: var(--space-2xl) 0 0;
		padding: 0;
		border: 0;
	}

	/* The opening mark is set as a display glyph behind the text, the way a printed pull
	   quote does it — decorative, so it must never reach the accessibility tree. */
	.testimonial__quote::before {
		content: "“";
		position: absolute;
		inset-block-start: -0.62em;
		inset-inline-start: 50%;
		translate: -50% 0;
		font-family: var(--font-display);
		font-size: clamp(3.25rem, 8vw, 5rem);
		line-height: 1;
		color: color-mix(in oklab, var(--color-brass) 34%, transparent);
		pointer-events: none;
		z-index: -1;
	}

	.testimonial__quote p {
		font-family: var(--font-display);
		font-size: var(--text-xl);
		font-style: italic;
		font-weight: 500;
		line-height: var(--leading-snug);
		text-wrap: balance;
		color: var(--color-ink);
	}

	.testimonial__by {
		display: flex;
		flex-direction: column;
		gap: 0.2rem;
		margin-top: var(--space-l);
	}

	.testimonial__who {
		font-size: var(--text-sm);
		font-weight: 600;
		letter-spacing: var(--tracking-wide);
		color: var(--color-ink);
	}

	.testimonial__role {
		font-family: var(--font-mono);
		font-size: 0.625rem;
		letter-spacing: var(--tracking-wider);
		text-transform: uppercase;
		color: var(--color-muted);
	}

	/* ── Who they are, and the way out ──────────────────────────────────── */

	.patron-card {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--space-m);
		text-align: center;
	}

	.patron-card__blurb {
		max-width: 46ch;
		font-family: var(--font-display);
		font-size: var(--text-lg);
		font-style: italic;
		line-height: var(--leading-snug);
		color: var(--color-paper);
	}

	.patron-card__meta {
		max-width: 62ch;
		font-family: var(--font-mono);
		font-size: 0.6875rem;
		line-height: var(--leading-normal);
		letter-spacing: var(--tracking-wide);
		color: var(--on-dark-muted);
	}

	.patron-services {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 0.75rem;
		margin: var(--space-2xs) 0 0;
		padding: 0;
		list-style: none;
	}

	.patron-services__item a {
		display: inline-flex;
		align-items: baseline;
		gap: 0.55rem;
		padding: 0.5rem 1rem;
		text-decoration: none;
		border: 1px solid color-mix(in oklab, var(--color-paper) 18%, transparent);
		border-radius: var(--radius-pill);
		transition: border-color var(--motion-fast) var(--ease-standard),
			background-color var(--motion-fast) var(--ease-standard);
	}

	.patron-services__item a:hover,
	.patron-services__item a:focus-visible {
		border-color: color-mix(in oklab, var(--color-paper) 46%, transparent);
		background-color: rgb(255 255 255 / 0.08);
	}

	.patron-services__n {
		font-family: var(--font-mono);
		font-size: 0.625rem;
		letter-spacing: var(--tracking-wider);
		color: color-mix(in oklab, var(--color-brass) 62%, white);
	}

	.patron-services__label {
		font-size: var(--text-sm);
		color: var(--color-paper);
	}

	.actions--centred {
		justify-content: center;
		margin-top: var(--space-s);
	}

	.patron-card__foot {
		max-width: 54ch;
		margin-top: var(--space-s);
		padding-top: var(--space-m);
		border-top: 1px solid var(--color-border-on-dark);
		font-size: var(--text-sm);
		line-height: var(--leading-relaxed);
		color: var(--on-dark-muted);
	}

	@media (max-width: 47.99em) {
		.record__row {
			flex-direction: column;
			align-items: flex-start;
		}

		.record__value {
			text-align: left;
		}

		.built__item {
			flex-direction: column;
			gap: 0.4rem;
		}
	}

	/* ══════════════════════════════════════════════════════════════════════
	   Ficha de libro — bloques nuevos
	   ══════════════════════════════════════════════════════════════════════ */

	/* A band of figures, sitting on the seam between the night hero and the paper below it.
	   Its job is to answer "how long is this?" before the reader has to ask. */
	.figures-band {
		position: relative;
		padding-block: clamp(1.5rem, 4vw, 2.25rem);
		background-color: var(--color-night);
		border-top: 1px solid color-mix(in oklab, var(--color-paper) 12%, transparent);
	}

	.figures {
		display: flex;
		flex-wrap: wrap;
		gap: clamp(1.5rem, 6vw, 4.5rem);
		margin: 0;
	}

	/* <dd> before <dt>: the number is the headline and the label explains it, which is the
	   opposite of the source order a definition list wants. Reversing visually keeps the
	   markup semantically correct. */
	.figures__item {
		display: flex;
		flex-direction: column-reverse;
		gap: 0.25rem;
	}

	.figures__value {
		margin: 0;
		font-family: var(--font-display);
		font-size: clamp(1.5rem, 3.4vw, 2.25rem);
		font-weight: 600;
		line-height: 1;
		color: var(--color-paper);
	}

	.figures__label {
		font-family: var(--font-mono);
		font-size: 0.625rem;
		letter-spacing: var(--tracking-wider);
		text-transform: uppercase;
		color: color-mix(in oklab, var(--color-paper) 72%, transparent);
	}

	/* ── What the book covers, as terms ─────────────────────────────────── */

	.chips {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.chips__item {
		padding: 0.35rem 0.85rem;
		font-family: var(--font-mono);
		font-size: 0.6875rem;
		letter-spacing: var(--tracking-wide);
		color: var(--color-charcoal);
		background-color: color-mix(in oklab, var(--color-sand) 34%, transparent);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-pill);
	}

	/* ── A line from the book, set in the margin ────────────────────────── */

	.side-quote {
		margin: 0;
		padding-inline-start: clamp(1rem, 2.5vw, 1.5rem);
		border-inline-start: 2px solid var(--accent);
	}

	.side-quote blockquote {
		margin: 0;
	}

	.side-quote blockquote p {
		font-family: var(--font-display);
		font-size: var(--text-lg);
		font-style: italic;
		line-height: var(--leading-snug);
		color: var(--color-ink);
		text-wrap: pretty;
	}

	.side-quote figcaption {
		margin-top: var(--space-s);
		font-family: var(--font-mono);
		font-size: 0.625rem;
		letter-spacing: var(--tracking-wider);
		text-transform: uppercase;
		color: var(--color-muted);
	}

	/* ── The table of contents ──────────────────────────────────────────── */

	.toc {
		margin: var(--space-xl) 0 0;
		padding: 0;
		list-style: none;
		max-width: var(--measure-wide);
	}

	.toc__item {
		display: flex;
		align-items: baseline;
		gap: clamp(0.75rem, 2vw, 1.25rem);
		padding-block: 0.75rem;
		border-top: 1px solid var(--color-border);
	}

	.toc__item:last-child {
		border-bottom: 1px solid var(--color-border);
	}

	.toc__n {
		flex: 0 0 auto;
		min-width: 2.5rem;
		font-family: var(--font-mono);
		font-size: 0.75rem;
		letter-spacing: var(--tracking-wide);
		color: var(--accent-text);
	}

	/* The month column is a date, not a numeral, so it needs room to sit on one line. */
	.toc--months .toc__n {
		min-width: 9.5rem;
	}

	/*
	 * The leader dots are drawn, not typed. A row of literal periods would be read out one by
	 * one by a screen reader; a repeating radial gradient on the flexible middle track gives
	 * the same printed-index look and is invisible to the accessibility tree.
	 */
	/*
	 * Shrink-to-fit, not fill: the leader dots are drawn from the end of the title outwards,
	 * so a title box that stretched to the page number would leave nowhere to draw them.
	 * The page number is pushed right by its own auto margin instead.
	 */
	.toc__title {
		flex: 0 1 auto;
		position: relative;
		font-size: var(--text-base);
		color: var(--color-ink);
	}

	.toc__item:has(.toc__page) .toc__title::after {
		content: "";
		position: absolute;
		inset-block-end: 0.3em;
		inset-inline-start: calc(100% + 0.6ch);
		width: 100vw;
		height: 1px;
		background-image: radial-gradient(circle, var(--color-border-strong) 0.5px, transparent 0.5px);
		background-size: 0.5rem 1px;
		background-repeat: repeat-x;
		opacity: 0.8;
	}

	.toc__page {
		flex: 0 0 auto;
		margin-inline-start: auto;
		position: relative;
		z-index: 1;
		padding-inline-start: 0.75rem;
		font-family: var(--font-mono);
		font-size: 0.75rem;
		font-variant-numeric: tabular-nums;
		color: var(--color-muted);
		background-color: var(--surface);
	}

	.toc__item--plain .toc__title {
		font-style: italic;
		color: var(--color-charcoal);
	}

	/* The dotted leader has to be clipped to the row, or it paints across the gutter. */
	.toc { overflow: clip; }

	/* ── The other two volumes ──────────────────────────────────────────── */

	.companions {
		display: flex;
		flex-wrap: wrap;
		gap: clamp(1.75rem, 4vw, 3rem);
		margin-top: var(--space-xl);
	}

	.companion {
		display: flex;
		align-items: flex-start;
		gap: clamp(1.25rem, 3vw, 2rem);
		flex: 1 1 min(26rem, 100%);
		min-width: 0;
	}

	/* Explicit width, not shrink-to-fit: the 3D book is sized in container query units and an
	   auto-basis flex item gives its container no inline size to resolve against. */
	.companion__object {
		flex: 0 0 auto;
		display: block;
		width: min(8rem, 30%);
		text-decoration: none;
	}

	.companion__body {
		flex: 1 1 auto;
		min-width: 0;
	}

	.companion__numeral {
		font-family: var(--font-mono);
		font-size: 0.625rem;
		letter-spacing: var(--tracking-wider);
		text-transform: uppercase;
		color: var(--accent-text);
	}

	.companion__title {
		margin-top: 0.35rem;
		font-size: var(--text-xl);
	}

	.companion__title a {
		text-decoration: none;
		color: inherit;
		background-image: linear-gradient(currentColor, currentColor);
		background-size: 0 1px;
		background-position: 0 100%;
		background-repeat: no-repeat;
		transition: background-size var(--motion-normal) var(--ease-standard);
	}

	.companion__title a:hover,
	.companion__title a:focus-visible {
		background-size: 100% 1px;
	}

	.companion__excerpt {
		margin-top: var(--space-xs);
		font-size: var(--text-sm);
		line-height: var(--leading-relaxed);
		color: var(--color-charcoal);
	}

	.companion__meta {
		margin-top: var(--space-xs);
		margin-bottom: var(--space-s);
		font-family: var(--font-mono);
		font-size: 0.625rem;
		letter-spacing: var(--tracking-wide);
		text-transform: uppercase;
		color: var(--color-muted);
	}

	/*
	 * En móvil la ficha no se apila: se invierte. Apilada, la portada se comía media pantalla
	 * y el título quedaba a un scroll de distancia de su propio libro. En fila invertida se
	 * lee como una entrada de catálogo —el texto donde empieza la lectura, la portada a la
	 * derecha— y las tres caben de una vez.
	 */
	@media (max-width: 32em) {
		.companions { gap: 0; }

		.companion,
		.companion--third {
			flex-direction: row-reverse;
			align-items: flex-start;
			gap: clamp(1rem, 4.5vw, 1.5rem);
			flex-basis: 100%;
		}

		.companion + .companion {
			margin-top: clamp(1.25rem, 5vw, 1.75rem);
			padding-top: clamp(1.25rem, 5vw, 1.75rem);
			border-top: 1px solid color-mix(in oklab, currentColor 16%, transparent);
		}

		.companion__object,
		.companion--third .companion__object {
			width: min(6.5rem, 32%);
		}

		.companion__title { font-size: var(--text-lg); }
	}

	/* ══════════════════════════════════════════════════════════════════════
	   Portada — la promesa y la declaración
	   ══════════════════════════════════════════════════════════════════════ */

	/*
	 * Three claims, directly under the hero. Not a feature grid with icons: each one is a
	 * number, a headline and the sentence that backs it up, because the thing being sold here
	 * is credibility, and a pictogram does not carry any.
	 */
	.promise {
		background-color: var(--surface);
	}

	.promise__list {
		display: flex;
		flex-wrap: wrap;
		gap: clamp(2rem, 5vw, 4rem);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.promise__item {
		flex: 1 1 min(18rem, 100%);
		min-width: 0;
		padding-top: var(--space-m);
		border-top: 2px solid var(--accent);
	}

	.promise__value {
		font-family: var(--font-mono);
		font-size: 0.6875rem;
		letter-spacing: var(--tracking-wider);
		text-transform: uppercase;
		color: var(--accent-text);
	}

	.promise__title {
		margin-top: var(--space-s);
		font-size: var(--text-xl);
		line-height: var(--leading-snug);
	}

	.promise__text {
		margin-top: var(--space-s);
		font-size: var(--text-base);
		line-height: var(--leading-relaxed);
		color: var(--color-charcoal);
	}

	/* ── The author's own statement of intent ───────────────────────────── */

	.statement {
		background-color: var(--surface-alt);
	}

	/* Flex, not auto margins: see the note on .testimonial-holder — WordPress's unlayered
	   figure rule wins over every layer here. */
	.statement__holder {
		display: flex;
		justify-content: center;
	}

	.statement__figure {
		max-width: 42ch;
		margin: 0;
		text-align: center;
	}

	.statement__quote {
		margin: 0;
		padding: 0;
	}

	.statement__quote p {
		font-family: var(--font-display);
		font-size: var(--text-xl);
		font-style: italic;
		font-weight: 500;
		line-height: 1.28;
		text-wrap: balance;
		color: var(--color-ink);
	}

	.statement__by {
		display: flex;
		flex-direction: column;
		gap: 0.3rem;
		margin-top: var(--space-xl);
	}

	.statement__who {
		font-size: var(--text-sm);
		font-weight: 600;
		letter-spacing: var(--tracking-wide);
		color: var(--color-ink);
	}

	.statement__where {
		font-family: var(--font-mono);
		font-size: 0.625rem;
		letter-spacing: var(--tracking-wider);
		text-transform: uppercase;
		color: var(--color-muted);
	}

	/* A hairline rule above the attribution, drawn short and centred like a printer's mark. */
	.statement__by::before {
		content: "";
		align-self: center;
		width: 3rem;
		height: 1px;
		margin-bottom: var(--space-m);
		background-color: var(--accent);
	}

	/* ── Patrones de cierre ─────────────────────────────────────────────── */

	/* Three across instead of two: the closing block shows the whole collection, so each
	   card gets a third of the row rather than half. */
	.companion--third {
		flex: 1 1 min(19rem, 100%);
	}

	.companion--third .companion__object {
		width: min(6.5rem, 32%);
	}

	/* On a night surface the companion's own text colours have to invert. */
	.section--dark .companion__title,
	.section--dark .companion__title a {
		color: var(--color-paper);
	}

	.section--dark .companion__excerpt {
		color: var(--on-dark-muted);
	}

	.section--dark .companion__meta,
	.section--dark .companion__numeral {
		color: color-mix(in oklab, var(--color-brass) 62%, white);
	}

	/* ── The list of reasons to write in ────────────────────────────────── */

	.checklist {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.checklist__item {
		position: relative;
		padding-inline-start: 1.9rem;
		padding-block: 0.7rem;
		font-size: var(--text-base);
		line-height: var(--leading-normal);
		color: var(--color-charcoal);
		border-top: 1px solid var(--color-border);
	}

	.checklist__item:last-child {
		border-bottom: 1px solid var(--color-border);
	}

	/* A drawn tick rather than a character: no font dependency, and nothing for a screen
	   reader to announce in front of every item. */
	.checklist__item::before {
		content: "";
		position: absolute;
		inset-inline-start: 0;
		inset-block-start: 1.15em;
		width: 0.7rem;
		height: 0.38rem;
		border-inline-start: 1.5px solid var(--accent);
		border-block-end: 1.5px solid var(--accent);
		rotate: -45deg;
	}

	/* ── Contexto histórico: los dos territorios ────────────────────────── */

	.territories {
		display: flex;
		flex-wrap: wrap;
		gap: clamp(1.5rem, 4vw, 3rem);
		margin-top: var(--space-xl);
	}

	.territory {
		flex: 1 1 min(22rem, 100%);
		min-width: 0;
		padding-top: var(--space-m);
		border-top: 2px solid var(--accent);
	}

	.territory__span,
	.territory__meta {
		font-family: var(--font-mono);
		font-size: 0.625rem;
		letter-spacing: var(--tracking-wider);
		text-transform: uppercase;
	}

	.territory__span { color: var(--accent-text); }
	.territory__meta { margin-top: 0.35rem; color: var(--color-muted); }

	.territory__name {
		margin-top: var(--space-2xs);
		font-size: var(--text-2xl);
	}

	/* The number is the point of the pairing: 1.500 km² against 266.000. */
	.territory__area {
		margin-top: var(--space-s);
		font-family: var(--font-display);
		font-size: var(--text-2xl);
		font-weight: 600;
		line-height: 1;
		color: var(--color-ink);
	}

	.territory__text {
		margin-top: var(--space-s);
		line-height: var(--leading-relaxed);
		color: var(--color-charcoal);
	}

	/* ── Sobre el autor: los destinos ───────────────────────────────────── */

	/*
	 * A service record, set the way one is printed: the dates in a fixed column, the unit as
	 * the entry, the garrison underneath. Not a timeline — the life already has one, and a
	 * second rail on the same page would compete with it.
	 */
	.postings {
		margin: var(--space-xl) 0 0;
		padding: 0;
		list-style: none;
		max-width: var(--measure-wide);
		counter-reset: posting;
	}

	.posting {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: 0.35rem clamp(1rem, 3vw, 2.5rem);
		padding-block: clamp(0.85rem, 2vw, 1.15rem);
		border-top: 1px solid var(--color-border);
	}

	.posting:last-child {
		border-bottom: 1px solid var(--color-border);
	}

	.posting__when {
		flex: 0 0 auto;
		min-width: 8rem;
		font-family: var(--font-mono);
		font-size: 0.6875rem;
		letter-spacing: var(--tracking-wider);
		text-transform: uppercase;
		color: var(--accent-text);
	}

	.posting__unit {
		flex: 1 1 16rem;
		min-width: 0;
		font-size: var(--text-lg);
		color: var(--color-ink);
	}

	/* Pushed to the right, the way a service record aligns its garrison column. */
	.posting__place {
		flex: 0 1 auto;
		margin-inline-start: auto;
		text-align: end;
		font-family: var(--font-mono);
		font-size: 0.625rem;
		letter-spacing: var(--tracking-wide);
		text-transform: uppercase;
		color: var(--color-muted);
	}

	@media (max-width: 47.99em) {
		.posting {
			flex-direction: column;
			gap: 0.25rem;
		}

		.posting__unit { font-size: var(--text-base); }
	}
}