/*!
 * Archivo del Desierto — el álbum
 *
 * Todo lo que sólo existe en /galeria/: la portada del álbum, los seis capítulos, la sección
 * sobre la letra manuscrita y la hoja de contactos.
 *
 * La hoja de contactos es una retícula justificada, no una cuadrícula. Cada lámina crece en
 * proporción exacta a su propio formato —`flex-basis: ar × alto de fila` y `flex-grow: ar`
 * dan, dentro de una línea, anchos proporcionales al ancho real de cada copia—, así que todas
 * las láminas de una fila acaban con la misma altura y ninguna se recorta ni se rellena. Es
 * como se monta un álbum de verdad y es la única manera de que una vertical no arrastre media
 * cartulina vacía a los lados.
 */

@layer pages {

	/* ══════════════════════════════════════════════════════════════════════
	   Portada del álbum
	   ══════════════════════════════════════════════════════════════════════ */

	.album-facts {
		display: flex;
		flex-wrap: wrap;
		gap: clamp(1.5rem, 5vw, 3.5rem);
		margin-top: clamp(1.75rem, 4vw, 2.75rem);
		padding-top: clamp(1.25rem, 3vw, 1.75rem);
		border-top: 1px solid var(--color-border);
	}

	.album-facts__item { min-width: 0; }

	.album-facts__label {
		font-family: var(--font-mono);
		font-size: 0.625rem;
		letter-spacing: var(--tracking-wide);
		text-transform: uppercase;
		color: var(--on-dark-muted);
	}

	.album-facts__value {
		margin-top: 0.3rem;
		font-family: var(--font-hand);
		font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
		line-height: 1;
		text-transform: uppercase;
		color: var(--accent-deep);
	}

	/* ══════════════════════════════════════════════════════════════════════
	   Los seis capítulos
	   ══════════════════════════════════════════════════════════════════════ */

	.leaves {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
		gap: clamp(1.5rem, 3.5vw, 2.75rem);
		margin-top: clamp(2rem, 5vw, 3.5rem);
		padding: 0;
		list-style: none;
		counter-reset: none;
	}

	.leaf { min-width: 0; }

	.leaf__link {
		display: flex;
		flex-direction: column;
		height: 100%;
		padding: clamp(0.9rem, 2vw, 1.35rem);
		background-color: var(--color-paper-warm);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-sm);
		box-shadow: var(--shadow-paper);
		color: inherit;
		text-decoration: none;
		transition: transform var(--motion-normal) var(--ease-standard),
			box-shadow var(--motion-normal) var(--ease-standard),
			border-color var(--motion-normal) var(--ease-standard);
	}

	.leaf__link:hover,
	.leaf__link:focus-visible {
		transform: translateY(-4px);
		box-shadow: var(--shadow-photograph);
		border-color: color-mix(in oklab, var(--accent) 50%, transparent);
	}

	/* La foto de portada del capítulo, montada con dos esquineras como en el álbum. */
	.leaf__plate {
		position: relative;
		display: block;
		overflow: hidden;
		border-radius: var(--radius-xs);
		background-color: color-mix(in oklab, var(--color-ink) 8%, transparent);
	}

	.leaf__plate img {
		display: block;
		width: 100%;
		aspect-ratio: 16 / 10;
		object-fit: cover;
		/* Muchas copias llevan el pie escrito abajo: encuadrando alto, la portada del
		   capítulo enseña la fotografía y no medio renglón cortado. */
		object-position: center 38%;
		filter: saturate(0.6) contrast(1.05);
		transition: transform var(--motion-slow) var(--ease-standard),
			filter var(--motion-slow) var(--ease-standard);
	}

	.leaf__link:hover .leaf__plate img,
	.leaf__link:focus-visible .leaf__plate img {
		transform: scale(1.035);
		filter: saturate(0.85) contrast(1.08);
	}

	.leaf__corner {
		position: absolute;
		z-index: 1;
		width: 22px;
		aspect-ratio: 1;
		background-image: linear-gradient(135deg,
			color-mix(in oklab, var(--color-ink) 55%, transparent),
			transparent 70%);
		pointer-events: none;
	}

	.leaf__corner--tl { top: 0; left: 0; clip-path: polygon(0 0, 100% 0, 0 100%); }
	.leaf__corner--br { bottom: 0; right: 0; clip-path: polygon(100% 0, 100% 100%, 0 100%); }

	.leaf__body {
		display: flex;
		flex-direction: column;
		flex: 1 1 auto;
		gap: 0.4rem;
		padding-top: clamp(0.9rem, 2vw, 1.25rem);
	}

	/*
	 * El número del capítulo. Va en la display y no en la letra del álbum: la I de esa mano
	 * es un palo corto y ligeramente curvo, de modo que «III» se lee como un paréntesis.
	 */
	.leaf__numeral {
		font-family: var(--font-display);
		font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
		font-weight: 700;
		line-height: 0.9;
		letter-spacing: 0.06em;
		color: var(--accent-deep);
	}

	.leaf__kicker {
		font-family: var(--font-mono);
		font-size: 0.625rem;
		letter-spacing: var(--tracking-wide);
		text-transform: uppercase;
		color: var(--on-surface-muted);
	}

	.leaf__title {
		font-family: var(--font-display);
		font-size: var(--text-xl);
		font-weight: 700;
		line-height: 1.12;
		color: var(--color-ink);
	}

	.leaf__text {
		font-size: 0.9375rem;
		line-height: 1.5;
		color: var(--on-surface-muted);
	}

	.leaf__foot {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		justify-content: space-between;
		gap: 0.5rem;
		margin-top: auto;
		padding-top: clamp(0.75rem, 2vw, 1.1rem);
		border-top: 1px solid var(--color-border);
	}

	.leaf__count {
		font-family: var(--font-mono);
		font-size: 0.625rem;
		letter-spacing: var(--tracking-wide);
		text-transform: uppercase;
		color: var(--on-surface-muted);
	}

	.leaf__cta {
		font-size: 0.875rem;
		font-weight: 600;
		color: var(--accent-text);
	}

	.leaf__link:hover .leaf__cta span { padding-inline-start: 0.2rem; }
	.leaf__cta span { transition: padding var(--motion-fast) var(--ease-standard); }

	/* ══════════════════════════════════════════════════════════════════════
	   La letra del álbum
	   ══════════════════════════════════════════════════════════════════════ */

	.hand-proof {
		display: grid;
		gap: clamp(1.25rem, 3vw, 2rem);
		margin-top: clamp(1.5rem, 4vw, 2.5rem);
	}

	@media (min-width: 52em) {
		.hand-proof { grid-template-columns: 1fr 1fr; }
	}

	.hand-proof figure {
		margin: 0;
		padding: clamp(1rem, 2.5vw, 1.75rem);
		background-color: color-mix(in oklab, var(--color-paper) 92%, transparent);
		border-radius: var(--radius-sm);
	}

	.hand-proof__real img {
		display: block;
		width: 100%;
		height: auto;
	}

	.hand-proof__set { display: flex; flex-direction: column; }

	.hand-proof__type {
		flex: 1 1 auto;
		display: flex;
		align-items: center;
		font-size: clamp(1.05rem, 0.55rem + 2.1vw, 2rem);
		line-height: 1.15;
		color: var(--color-ink);
	}

	/* Estas dos fichas van sobre papel claro dentro de una sección oscura: el pie es tinta. */
	.hand-proof__label {
		margin-top: 0.9rem;
		font-family: var(--font-mono);
		font-size: 0.625rem;
		letter-spacing: var(--tracking-wide);
		text-transform: uppercase;
		color: var(--on-surface-muted);
	}

	.hand-grid {
		display: grid;
		gap: clamp(1.5rem, 4vw, 3rem);
		margin-top: clamp(2rem, 5vw, 3.25rem);
	}

	@media (min-width: 60em) {
		.hand-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; }
	}

	.hand-grid__prose p + p { margin-top: 0.9em; }

	.hand-grid__caveat {
		padding-top: 1rem;
		border-top: 1px solid color-mix(in oklab, var(--on-dark) 18%, transparent);
		font-size: 0.9375rem;
		color: var(--on-dark-muted);
	}

	.hand-grid__specimen {
		padding: clamp(1.1rem, 3vw, 1.9rem);
		border: 1px solid color-mix(in oklab, var(--on-dark) 20%, transparent);
		border-radius: var(--radius-sm);
	}

	.hand-specimen {
		font-family: var(--font-hand);
		font-size: clamp(1.1rem, 0.6rem + 2vw, 1.9rem);
		line-height: 1.3;
		word-break: break-word;
		color: var(--on-dark);
	}

	.hand-specimen--small {
		margin-top: 0.6rem;
		font-size: clamp(0.95rem, 0.7rem + 1vw, 1.35rem);
		color: color-mix(in oklab, var(--accent) 85%, var(--on-dark));
	}

	.hand-specimen__name {
		margin-top: 1.1rem;
		padding-top: 0.85rem;
		border-top: 1px solid color-mix(in oklab, var(--on-dark) 18%, transparent);
		font-family: var(--font-mono);
		font-size: 0.625rem;
		letter-spacing: var(--tracking-wide);
		text-transform: uppercase;
		color: var(--on-dark-muted);
	}

	.hand-kinds {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
		gap: clamp(1.25rem, 3vw, 2.25rem);
		margin-top: clamp(2rem, 5vw, 3rem);
		padding: 0;
		list-style: none;
	}

	.hand-kinds__item {
		padding-top: 1rem;
		border-top: 2px solid color-mix(in oklab, var(--accent) 60%, transparent);
	}

	.hand-kinds__count {
		font-family: var(--font-mono);
		font-size: 0.625rem;
		letter-spacing: var(--tracking-wide);
		text-transform: uppercase;
		color: color-mix(in oklab, var(--accent) 85%, var(--on-dark));
	}

	.hand-kinds__title {
		margin-top: 0.35rem;
		font-family: var(--font-display);
		font-size: var(--text-lg);
		font-weight: 700;
		color: var(--on-dark);
	}

	.hand-kinds__text {
		margin-top: 0.4rem;
		font-size: 0.9375rem;
		line-height: 1.5;
		color: var(--on-dark-muted);
	}

	/* ══════════════════════════════════════════════════════════════════════
	   Barra de herramientas
	   ══════════════════════════════════════════════════════════════════════ */

	.archive-toolbar {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-m);
		margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
	}

	.archive-filters {
		display: flex;
		flex-wrap: wrap;
		gap: 0.4rem;
	}

	.archive-filter {
		padding: 0.5rem 0.95rem;
		min-height: 40px;
		font-family: var(--font-mono);
		font-size: 0.6875rem;
		letter-spacing: var(--tracking-wide);
		text-transform: uppercase;
		color: var(--on-surface-muted);
		background-color: transparent;
		border: 1px solid var(--color-border);
		border-radius: var(--radius-pill);
		transition: color var(--motion-fast) var(--ease-standard),
			border-color var(--motion-fast) var(--ease-standard),
			background-color var(--motion-fast) var(--ease-standard);
	}

	.archive-filter:hover {
		color: var(--color-ink);
		border-color: var(--color-border-strong);
	}

	.archive-filter[aria-pressed="true"] {
		color: #fff;
		background-color: var(--accent-deep);
		border-color: var(--accent-deep);
	}

	.archive-search {
		position: relative;
		flex: 0 1 18rem;
	}

	.archive-search input {
		padding-inline-start: 2.4rem;
		font-size: 0.9375rem;
		border-radius: var(--radius-pill);
	}

	.archive-search__icon {
		position: absolute;
		inset-block-start: 50%;
		inset-inline-start: 0.9rem;
		translate: 0 -50%;
		opacity: 0.5;
		pointer-events: none;
	}

	.archive-count {
		font-family: var(--font-mono);
		font-size: 0.6875rem;
		letter-spacing: var(--tracking-wide);
		text-transform: uppercase;
		color: var(--on-surface-muted);
	}

	/* ══════════════════════════════════════════════════════════════════════
	   La hoja de contactos
	   ══════════════════════════════════════════════════════════════════════ */

	.wall {
		/* Altura a la que tiende cada fila. Todo lo demás sale de aquí. */
		--wall-row: clamp(6.5rem, 21vw, 16rem);
		--wall-gap: clamp(10px, 1.2vw, 20px);

		display: flex;
		flex-wrap: wrap;
		gap: calc(var(--wall-gap) * 2.4) var(--wall-gap);
		align-items: flex-start;
	}

	.wall .plate {
		/*
		 * Dentro de una línea el reparto del hueco sobrante es proporcional a `flex-grow`;
		 * como la base también es proporcional a la relación de aspecto, el ancho final de
		 * cada lámina queda exactamente proporcional a su formato y toda la fila comparte
		 * altura. De ahí que no haga falta ni recortar ni rellenar ninguna copia.
		 */
		flex: var(--ar) 1 calc(var(--ar) * var(--wall-row));
		min-width: 0;
	}

	.wall .plate[hidden] { display: none; }

	/*
	 * En el muro el pie va recortado a tres renglones. Algunos pies mecanografiados tienen
	 * cuatro líneas de texto y estiraban la fila entera; el texto íntegro está siempre en el
	 * visor, que es donde se lee el documento.
	 */
	.wall .plate__hand {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		line-clamp: 3;
		overflow: hidden;
	}

	/*
	 * Rellenos de última fila. Sin ellos, las dos o tres láminas que sobran al final se
	 * estirarían hasta ocupar todo el ancho y saldrían enormes. Estos toman el hueco y no
	 * pintan nada.
	 */
	.wall__fill {
		flex: 1 1 calc(1.4 * var(--wall-row));
		height: 0;
		margin: 0;
	}

	.wall__empty {
		flex: 1 1 100%;
		padding: var(--space-2xl) var(--space-m);
		text-align: center;
		color: var(--on-surface-muted);
	}

	/* ══════════════════════════════════════════════════════════════════════
	   Un capítulo
	   ══════════════════════════════════════════════════════════════════════ */

	.chapter-head {
		display: flex;
		align-items: flex-start;
		gap: clamp(1rem, 3vw, 2.25rem);
	}

	.chapter-head__numeral {
		flex: 0 0 auto;
		font-family: var(--font-display);
		font-size: clamp(2.5rem, 1.4rem + 4.4vw, 5rem);
		font-weight: 700;
		line-height: 0.82;
		letter-spacing: 0.05em;
		color: color-mix(in oklab, var(--accent) 88%, var(--on-dark));
	}

	.chapter-head__body { min-width: 0; }

	/* En pantalla estrecha el número y la entradilla se pisan: mejor apilados. */
	@media (max-width: 40em) {
		.chapter-head { flex-direction: column; gap: 0.4rem; }
	}

	.chapter-head__meta {
		margin-top: clamp(1rem, 2.5vw, 1.5rem);
		font-family: var(--font-mono);
		font-size: 0.6875rem;
		letter-spacing: var(--tracking-wide);
		text-transform: uppercase;
		color: var(--on-dark-muted);
	}

	.chapter-places {
		padding: clamp(1.1rem, 3vw, 1.75rem) clamp(1.1rem, 3vw, 2rem);
		background-color: var(--color-paper-warm);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-sm);
	}

	.chapter-places__label {
		font-family: var(--font-mono);
		font-size: 0.625rem;
		letter-spacing: var(--tracking-wide);
		text-transform: uppercase;
		color: var(--on-surface-muted);
	}

	.chapter-places__list {
		margin: 0.5rem 0 0.9rem;
		font-family: var(--font-hand);
		font-size: clamp(1.05rem, 0.85rem + 0.9vw, 1.5rem);
		line-height: 1.35;
		text-transform: uppercase;
	}

	.chapter-places__list a {
		display: inline-block;
		padding-block: 0.15rem;
		color: var(--color-ink);
		text-decoration-color: color-mix(in oklab, var(--accent) 55%, transparent);
		text-underline-offset: 0.18em;
	}

	.chapter-places__list a:hover { color: var(--accent-deep); }

	.chapter-nav {
		border-top: 1px solid var(--color-border);
		border-bottom: 1px solid var(--color-border);
		background-color: var(--color-paper-warm);
	}

	.chapter-nav__inner {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
		gap: var(--space-m);
		padding-block: clamp(1.1rem, 3vw, 1.75rem);
	}

	.chapter-nav__link {
		display: flex;
		flex-direction: column;
		gap: 0.2rem;
		min-width: 0;
		color: inherit;
		text-decoration: none;
	}

	.chapter-nav__link--next { text-align: right; }

	.chapter-nav__dir {
		font-family: var(--font-mono);
		font-size: 0.625rem;
		letter-spacing: var(--tracking-wide);
		text-transform: uppercase;
		color: var(--on-surface-muted);
	}

	.chapter-nav__title {
		font-family: var(--font-display);
		font-size: var(--text-lg);
		font-weight: 700;
		line-height: 1.15;
	}

	.chapter-nav__link:hover .chapter-nav__title { color: var(--accent-deep); }

	.chapter-nav__all {
		padding: 0.55rem 0.2rem;
		font-family: var(--font-mono);
		font-size: 0.625rem;
		letter-spacing: var(--tracking-wide);
		text-transform: uppercase;
		color: var(--on-surface-muted);
		white-space: nowrap;
	}

	.chapter-nav__all:hover { color: var(--accent-deep); }

	@media (max-width: 40em) {
		.chapter-nav__inner { grid-template-columns: 1fr; text-align: left; }
		.chapter-nav__link--next { text-align: left; }
		.chapter-nav__all { order: 3; }
	}

	/* ══════════════════════════════════════════════════════════════════════
	   Añadidos al visor
	   ══════════════════════════════════════════════════════════════════════ */

	.viewer__serie {
		font-family: var(--font-mono);
		font-size: 0.625rem;
		letter-spacing: var(--tracking-wide);
		text-transform: uppercase;
		color: color-mix(in oklab, var(--on-dark) 62%, transparent);
	}

	.viewer__hand {
		margin: clamp(0.9rem, 2.5vw, 1.4rem) 0 0;
		padding-inline-start: clamp(0.8rem, 2vw, 1.15rem);
		border-inline-start: 2px solid color-mix(in oklab, var(--accent) 70%, transparent);
	}

	.viewer__hand-text {
		margin: 0;
		font-family: var(--font-hand);
		font-size: clamp(1.05rem, 0.8rem + 1vw, 1.5rem);
		line-height: 1.25;
		text-transform: uppercase;
		color: var(--on-dark);
	}

	.viewer__hand-kind {
		margin-top: 0.45rem;
		font-family: var(--font-mono);
		font-size: 0.5625rem;
		letter-spacing: var(--tracking-wide);
		text-transform: uppercase;
		color: color-mix(in oklab, var(--on-dark) 55%, transparent);
	}

	.viewer__place {
		display: inline-flex;
		align-items: baseline;
		gap: 0.35rem;
		margin-top: clamp(0.9rem, 2.5vw, 1.35rem);
		font-size: 0.875rem;
		color: var(--on-dark);
	}
}