/*
	The public pages — the HERITAGE's face, not The Spine canon.

	Two houses on purpose: the canon rules inside the program, where
	Samuel works every day; the public web already had its face and
	that face works. Do not unify.

	⚠️ CON UNA EXCEPCIÓN, decidida por Samuel el 18 de agosto viendo la
	página montada dentro de Caviar: «las tipografías de los títulos son
	exageradas y deberían ser del tamaño de los títulos que hemos puesto
	en la página de Caviar».

	Y es correcto, porque el supuesto de arriba cambió. Estos tamaños se
	midieron en spain-passion.eu, donde la página ocupaba la pantalla
	entera. Aquí viven DENTRO del marco de Caviar, en una columna más
	estrecha y a dos dedos de los títulos del tema. Un 56 que era grande
	en una web completa es desproporcionado en una columna con marco al
	lado. La escala no es una propiedad del título: es la relación entre
	el título y lo que tiene alrededor.

	Así que los TAMAÑOS de los encabezados siguen ahora la escala de
	Caviar (h1 40/600, h2 28, y 31 en el punto de corte). Todo lo demás
	—familias, colores, rejillas, el retrato cuadrado, la mecánica del
	escenario— sigue siendo del heritage y no se unifica.

	Every value here is TRANSCRIBED from mockups/public-pages.html,
	which was measured on spain-passion.eu on 18 August — background
	#f3f3f3, Raleway 15 base, Poppins headings, the two grids that are
	NOT the same grid (artworks 3×gap34, artists 4×gap28), and the
	square 280×280 portrait. The stage mechanics keep the heritage's
	own classes and behaviour.
*/

/*
	⚠️ Headings carry their ELEMENT in the selector on purpose:
	the caviar theme sets `.caviar-cuerpo h1 { font-size: 40px }`
	(0,1,1), which silently beats a bare class (0,1,0). Measured on
	the live page — the name painted 40px where 56px was written.
	House rule: raise specificity, never add !important.
*/
.sp-public,
.sp-public * { box-sizing: border-box; }

.sp-public {
	background: #f3f3f3;
	color: #1a1a1a;
	font-family: Raleway, ui-sans-serif, system-ui, sans-serif;
	font-size: 15px;
	-webkit-font-smoothing: antialiased;
}

.sp-archive-wrap {
	max-width: 1132px;
	margin: 0 auto;
	padding: 44px 24px 90px;
}

.sp-artwork-wrapper,
.sp-artist-wrapper {
	max-width: 1132px;
	margin: 0 auto;
	padding: 44px 24px 90px;
}

/* ── titles ── */

.sp-public h1.sp-title {
	font-family: Poppins, Raleway, sans-serif;
	font-size: 40px;
	font-weight: 600;
	color: #1a1a1a;
	letter-spacing: -0.01em;
	margin: 0;
}

/* 🪦 «The artists H1 is its own: 42/700, measured.»
   Retirada el 18 de agosto. Era verdad en el heritage, y aquí era una
   diferencia de 2px que nadie ve y que sólo existía porque se midieron
   dos páginas distintas el mismo día. Los dos archivos son la misma
   clase de pantalla: llevan el mismo título. */

/* ── filters ── */

.sp-filters {
	display: flex;
	gap: 22px;
	align-items: flex-end;
	margin: 30px 0 10px;
	flex-wrap: wrap;
}

.sp-field {
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.sp-field label {
	font-size: 12px;
	font-weight: 400;
	color: #b6b6b6;
	text-transform: uppercase;
	letter-spacing: 1.68px;
}

.sp-field input,
.sp-field select {
	height: 42px;
	min-width: 200px;
	padding: 0 12px;
	font-family: inherit;
	font-size: 14px;
	color: #6f6f6f;
	background: #fff;
	border: 1px solid #e2e2e2;
	border-radius: 0;
}

.sp-order { display: flex; gap: 0; }

.sp-order button {
	height: 42px;
	padding: 0 26px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	background: #fff;
	color: #6f6f6f;
	border: 1px solid #e2e2e2;
	cursor: pointer;
}

.sp-order button.is-on {
	background: #1a1a1a;
	color: #fff;
	border-color: #1a1a1a;
}

/* Quiet, and only there when a filter is set: the way back. */
.sp-clear {
	align-self: center;
	font-size: 14px;
	color: #6f6f6f;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.sp-count {
	font-size: 14px;
	color: #6f6f6f;
	margin: 18px 0 26px;
}

.sp-count--artists {
	font-size: 15px;
	color: #5a5a5a;
}

/* ── the artworks grid ──
   🩸 Las columnas NO son tres: son las que quepan.

   Estaban fijas en tres porque así se miden en heritage — pero allí el
   contenedor mide 1132px, y tres de 355 es lo que cabe en 1132. El
   número era una consecuencia, no una decisión, y yo transcribí la
   consecuencia. En un escenario más ancho, tres columnas dan tarjetas
   enormes; en uno estrecho, tres tarjetas ilegibles.

   Lo que se conserva es lo que sí era una decisión: **el tamaño de la
   tarjeta**. 300px de mínimo con hueco de 34 devuelve exactamente tres
   columnas a 1132px —el heritage, intacto— y cuatro en cuanto hay
   sitio, sin que nadie elija nada. */

.sp-grid {
	display: grid;
	/* 260, MEDIDO, no elegido:
	     heritage  1132px → (1132+34)/(260+34) = 3,9 → 3 columnas de 355
	     Caviar    1265px → (1265+34)/294       = 4,4 → 4 columnas de 290
	   El mismo número da el heritage intacto y las cuatro que pidió
	   Samuel, sin que nadie tenga que elegir nada. */
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 34px;
}

.sp-card { background: #fff; }

.sp-thumb {
	display: block;
	aspect-ratio: 1 / 1;
	background: #e7e7e7;
	overflow: hidden;
}

.sp-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/*
	Sin fotografía, el hueco habla. Un rectángulo de color sobre el gris
	de la página se lee como algo roto; una frase se lee como una obra
	que todavía no tiene foto — el mismo criterio que «Portfolio coming
	soon» en el archivo de artistas.
*/
.sp-thumb.is-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #efefef;
	border: 1px solid #e2e2e2;
}

.sp-thumb__empty {
	font-size: 13px;
	color: #9a9a9a;
	letter-spacing: 0.02em;
}

.sp-card-body { padding: 18px 20px 22px; }

.sp-public h3.sp-name {
	font-family: Poppins, sans-serif;
	font-size: 17px;
	font-weight: 700;
	color: #1a1a1a;
	line-height: 1.32;
	margin: 0 0 6px;
}

.sp-name a { color: inherit; text-decoration: none; }
.sp-name a:hover { text-decoration: underline; text-underline-offset: 3px; }

.sp-artist { font-size: 14px; color: #6f6f6f; margin-bottom: 4px; }
.sp-artist a { color: inherit; text-decoration: none; }
.sp-artist a:hover { text-decoration: underline; }

.sp-meta { font-size: 14px; color: #6f6f6f; margin-bottom: 10px; }

/* The permanent number — same slot, same class, same monospace the
   heritage gave the post id it replaced. */
.sp-id {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 14px;
	color: #777;
}

/* ── the artists grid — NOT the artworks grid ──
   Mismo criterio, otra medida: el retrato de artista es más pequeño
   que la tarjeta de obra, así que su mínimo es 240 y su hueco 28. A
   1132px salen cuatro, que es lo que hay en heritage. */

.sp-grid-artists {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 28px;
}

/* The square original cropped to 267×200 with cover. No filter: the
   photos already come black and white. */
.sp-portrait {
	display: block;
	aspect-ratio: 267 / 200;
	background: #dcdcdc;
	overflow: hidden;
}

.sp-portrait img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.sp-public h2.sp-artist-name {
	font-family: Poppins, sans-serif;
	font-size: 18px;
	font-weight: 600;
	color: #111;
	margin: 0 0 5px;
}

.sp-artist-name a { color: inherit; text-decoration: none; }
.sp-artist-name a:hover { text-decoration: underline; text-underline-offset: 3px; }

.sp-artist-meta { font-size: 13px; color: #666; }

/* ── single artwork ── */

.sp-artwork-artist {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 20px;
}

.sp-artwork-artist a {
	display: flex;
	align-items: center;
	gap: 14px;
	text-decoration: none;
}

.sp-artwork-artist__avatar {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	object-fit: cover;
	flex: 0 0 auto;
}

.sp-artwork-artist span { font-size: 15px; color: #6f6f6f; }

/* 52/700 en el heritage → 40/600, la escala de Caviar. Ver la nota de
   arriba: el título no encogió porque estuviera mal medido, sino porque
   cambió lo que tiene al lado. */
.sp-public h1.sp-artwork-title {
	font-family: Poppins, sans-serif;
	font-size: 40px;
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.2;
	margin: 0 0 26px;
}

/* ── the stage: the heritage's own mechanics, untouched ── */

.sp-stage { width: 100%; margin: 0 0 10px; }
/*
 * Transparente, no `#f3f3f3`. Samuel preguntó las dos cosas —«del mismo
 * color del fondo o simplemente transparente»— y transparente es mejor
 * respuesta por una razón que va más allá de esta regla:
 *
 * el color hay que MANTENERLO IGUAL a otro sitio; la transparencia no
 * puede desincronizarse nunca.
 *
 * Aquí importa de verdad, porque estas páginas viven en dos casas: en
 * un WordPress pelado el fondo es el `#f3f3f3` de `.sp-public`, y
 * dentro de Caviar es el gris del escenario, que decide el tema. Un
 * `#f3f3f3` escrito aquí acertaría hoy en las dos y sería mentira el
 * día que Caviar cambie su gris.
 *
 * 🪦 Era `background:#fff`, y nunca se vio: la imagen a `width:100%` lo
 * tapaba entero. Al limitar el alto asomaron las franjas blancas a los
 * lados de las obras verticales.
 */
.sp-stage__main { position: relative; width: 100%; background: transparent; overflow: hidden; }
.sp-stage__item { display: none; width: 100%; }
.sp-stage__item.is-active { display: block; }
/*
 * 🔴 LA OBRA NO PUEDE TAPAR LA PANTALLA. Samuel, 18 de agosto: «no me
 * gusta que la imagen ocupe más que el alto de la pantalla y no se vea
 * que hay datos bajo».
 *
 * Medido antes de tocar, con «Paisaje Fragmentado» (1549×2324) en una
 * ventana de 718 de alto:
 *
 *     el escenario empieza en   y 215
 *     la imagen terminaba en    y 1353   ← 1138 de alto
 *     la página entera medía    1880
 *
 * La imagen sola ocupaba **1,6 pantallas**. Debajo estaban la ficha
 * técnica, la nota de la comisaria y el contexto relacionado, y no
 * había ni una señal de que existieran: quien no arrastre se va
 * pensando que la página es una foto.
 *
 * 🩸 Y el `width:100%` era la causa, no el tamaño del archivo. Con el
 * ancho fijado al contenedor, una obra vertical se estira hasta donde
 * la lleve su proporción — la página no decidía el alto, lo decidía la
 * forma del cuadro. Por eso hay obras que caben y obras que no: no es
 * una cuestión de peso ni de calidad de la foto.
 *
 * Se invierte la restricción: manda el ALTO —58vh, medido para que
 * asome la tira de miniaturas por debajo— y el ancho se acomoda. Las
 * apaisadas siguen igual, porque tocan antes el 100 % de ancho.
 *
 * ⚠️ `width:auto` es imprescindible. Un `max-height` encima de un
 * `width:100%` no encoge la imagen: la aplasta, porque las dos medidas
 * quedan fijadas y se pierde la proporción.
 */
.sp-stage__img, .sp-stage__video {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 58vh;
	margin: 0 auto;
}
.sp-stage__video { background: #000; }

.sp-stage__nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin-top: 12px;
}

.sp-stage__button {
	appearance: none;
	border: 1px solid rgba(0, 0, 0, 0.18);
	background: transparent;
	color: #111;
	padding: 8px 13px;
	font-size: 12px;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
}

.sp-stage__button:hover { border-color: #111; }

.sp-stage__counter { font-size: 12px; opacity: 0.65; letter-spacing: 0.04em; }

.sp-stage__thumbs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
	gap: 10px;
	margin-top: 14px;
}

.sp-stage__thumb {
	position: relative;
	appearance: none;
	border: 1px solid transparent;
	background: transparent;
	padding: 0;
	cursor: pointer;
	opacity: 0.55;
}

.sp-stage__thumb.is-active { opacity: 1; border-color: #111; }

.sp-stage__thumb img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
}

.sp-stage__thumb--video {
	aspect-ratio: 1 / 1;
	background: #111;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* ── the sheet ── */

.sp-artwork-content {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 56px;
	padding: 28px 0 10px;
}

.sp-artwork-tech ul { list-style: none; padding: 0; margin: 0; }

.sp-artwork-tech li {
	padding: 9px 0;
	border-bottom: 1px solid #e2e2e2;
	font-size: 15px;
	display: flex;
	gap: 10px;
}

.sp-artwork-tech li b { font-weight: 600; flex: 0 0 130px; color: #6f6f6f; }

.sp-public .sp-artwork-text h3 {
	font-family: Poppins, sans-serif;
	font-size: 19px;
	font-weight: 600;
	margin: 0 0 10px;
}

.sp-artwork-text p { line-height: 1.75; margin: 0 0 14px; max-width: 70ch; }

/* ── related context: label in caps, a rule above, rows with a thin
      rule — NOT bordered cards ── */

.sp-related-context-block {
	margin: 30px 0 0;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	padding-top: 16px;
	/* El bloque se lleva su tipografía puesta, vaya donde vaya: sin esto
	   hereda la del sitio, y el sitio no es el mismo en las tres fichas.
	   El porqué está en el comentario largo de aquí debajo. */
	font-family: Raleway, ui-sans-serif, system-ui, sans-serif;
}

/* Sin `.sp-public` delante, y a propósito.
   Medido: single-artist.php y single-artwork.php envuelven en .sp-public;
   single-journal.php no lo hace —cero apariciones—. Con el ámbito puesto,
   este rótulo se vestía en la ficha del artista y en la del diario salía
   en crudo, con la tipografía del tema; y el enlace, que no declara
   familia, heredaba Raleway en un sitio y Astra en el otro. Es la misma
   clase con dos caras según dónde cae.
   La cura no es envolver el diario en .sp-public —eso le repintaría el
   fondo entero—: es que el bloque se vista solo, y por eso también
   declara su familia justo debajo.
       «Una clase que no declara su tipografía no tiene tipografía:
        tiene la del sitio donde cae.»

   La clase va DOS VECES, y no es un descuido. Quitar `.sp-public`
   bajaba el peso a (0,1,1), y a ese peso el tema gana: `.caviar-cuerpo
   h3 { font-size: 17px }` en style.css empata y se lleva el desempate
   por orden de carga —style.css va detrás de public.css—. Lo medí: al
   des-escribir el ámbito, el rótulo de la ficha de obra se quedaba en
   Raleway 17 sin versales. Repetir la clase sube a (0,2,1) sin colgarse
   de ningún antepasado y sin un !important.
       «Una regla que no aplica no es inofensiva: es una mentira en
        la hoja.» */
.sp-related-context-block.sp-related-context-block h3 {
	font-family: Poppins, sans-serif;
	font-size: 13px;
	font-weight: 600;
	color: #111;
	text-transform: uppercase;
	letter-spacing: 1.56px;
	margin: 0 0 12px;
}

.sp-related-context-list { display: grid; gap: 12px; }

.sp-related-context-link {
	position: relative;
	display: block;
	padding: 0 22px 12px 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	text-decoration: none;
}

.sp-related-context-link span {
	display: block;
	font-size: 15px;
	font-weight: 500;
	color: #111;
	line-height: 1.25;
}

.sp-related-context-link small {
	display: block;
	margin-top: 5px;
	font-size: 13px;
	color: rgba(0, 0, 0, 0.58);
	line-height: 1.45;
}

.sp-related-context-link em {
	position: absolute;
	right: 0;
	top: 1px;
	font-style: normal;
	font-size: 16px;
	color: #111;
	transition: transform 0.18s ease;
}

.sp-related-context-link:hover span { text-decoration: underline; text-underline-offset: 3px; }
.sp-related-context-link:hover em { transform: translateX(3px); }

/* ── the door that replaced the form ── */

.sp-door {
	margin: 44px 0 0;
	padding: 30px 0 0;
	border-top: 1px solid #e2e2e2;
}

.sp-door a {
	display: inline-block;
	background: #1a1a1a;
	color: #fff;
	text-decoration: none;
	font-size: 15px;
	font-weight: 600;
	padding: 15px 32px;
}

.sp-artwork-more { padding: 46px 0 18px; }

.sp-artwork-more__back {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 16px;
	border: 1px solid rgba(0, 0, 0, 0.22);
	color: #111;
	text-decoration: none;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.sp-artwork-more__back:hover { border-color: #111; }

/* ── single artist: measured 18 August ── */

.sp-artist-header {
	display: grid;
	grid-template-columns: 280px minmax(0, 832px);
	gap: 40px;
	align-items: start;
}

/* 280×280, SQUARE. The 280×521 that got measured once was the grid
   cell stretched to the row — measure the <img>, not its box. */
.sp-artist-portrait img {
	width: 280px;
	height: 280px;
	object-fit: cover;
	display: block;
}

/* 56 → 40. Era el título más grande de todo el sitio, y estaba en la
   página que más texto tiene debajo. */
.sp-public h1.sp-artist-name-big {
	font-family: Poppins, sans-serif;
	font-size: 40px;
	font-weight: 600;
	color: #1a1a1a;
	line-height: 1.2;
	margin: 0 0 14px;
}

/* "Biography" and "Works": headlines, not labels.
   40 → 28, el h2 de Caviar. Le dejo el peso 600 en vez del 400 del tema
   porque aquí no son subtítulos de nada: encabezan bloques. Si Samuel
   los quiere idénticos a Caviar, es cambiar 600 por 400 y ya está. */
.sp-public h2.sp-h2-big {
	font-family: Poppins, sans-serif;
	font-size: 28px;
	font-weight: 600;
	color: #1a1a1a;
	line-height: 1.28;
	margin: 0 0 14px;
}

.sp-works-title { margin-top: 52px; }

.sp-bio-text p { font-size: 15px; color: #5a5a5a; line-height: 1.62; margin: 0 0 14px; }

/* 🔴 NOT the archive grid: 3 columns, gap 20 — only image and title. */
.sp-artist-works-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	margin-top: 16px;
}

.sp-artist-work-card { display: block; text-decoration: none; color: inherit; }
.sp-artist-work-card img { width: 100%; height: auto; display: block; }

.sp-artist-work-title {
	font-size: 15px;
	font-weight: 500;
	color: #000;
	padding-top: 9px;
	line-height: 1.3;
}

/* ── shared leftovers ── */

.sp-pagination { margin-top: 44px; font-size: 14px; color: #6f6f6f; }
.sp-pagination a, .sp-pagination span { padding: 6px 10px; color: inherit; }
.sp-pagination .current { color: #1a1a1a; font-weight: 600; }
.sp-none { color: #6f6f6f; }

/* ── responsive, the heritage's own breakpoints ── */

/* 🪦 Los cortes de 1000px para las dos rejillas. `auto-fill` ya hace
   esto solo y mejor: no salta en un ancho elegido a dedo, se ajusta en
   el que deje de caber una tarjeta. Un punto de corte fijo es una
   medida que hay que mantener; éste no. */

@media (max-width: 900px) {
	.sp-artwork-content { grid-template-columns: 1fr; gap: 22px; }
	.sp-artist-header { grid-template-columns: 1fr; gap: 20px; }
	.sp-artist-works-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
	/* 🪦 Aquí forzaban una columna `.sp-grid` y `.sp-grid-artists`.
	   Lo vio Code y tiene razón: con `auto-fill` sobra, y además
	   CONTRADICE lo que la rejilla hace sola — a 640px caben dos, y el
	   corte las bajaba a una. Un punto de corte fijo encima de una
	   rejilla que ya se ajusta no es un ajuste: es una excepción que
	   discute con la regla. Medido: 420px → 1 columna sin ayuda.
	   `.sp-artist-works-grid` se queda: ésa sí es de tres fijas. */
	.sp-artist-works-grid { grid-template-columns: 1fr; }
	/* 31 es lo que hace Caviar con su h1 en este mismo punto de corte.
	   Si el marco encoge su titular y el nuestro no, se nota. */
	.sp-public h1.sp-artwork-title { font-size: 31px; }
	.sp-public h1.sp-artist-name-big { font-size: 31px; }
	.sp-public h1.sp-title { font-size: 31px; }
	.sp-public h2.sp-h2-big { font-size: 24px; }
}

/* ═══════════════════════════════════════════════════════════════════
   EL DIARIO — ORDEN-139 · 2 de septiembre de 2026 · Fable

   Estructura del diario del heritage; medidas de esta casa pública
   (Raleway 15 de base, Poppins en los títulos, fondo #f3f3f3, y la
   escala de Caviar en los encabezados).

   ⚠️ Los encabezados llevan su ELEMENTO en el selector, como el resto
   de este archivo: el tema Caviar pone `.caviar-cuerpo h1 {…}` (0,1,1)
   y le gana a una clase pelada (0,1,0). Se sube la especificidad, no
   se añade `!important` — regla de la casa.
   ═══════════════════════════════════════════════════════════════════ */

.sp-journal__hero {
	margin: 0 0 30px;
}

.sp-journal__kicker {
	margin: 0 0 10px;
	font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(26, 26, 26, 0.55);
}

h1.sp-journal__title {
	margin: 0 0 14px;
	font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
	font-size: 40px;
	font-weight: 600;
	line-height: 1.05;
	letter-spacing: -0.01em;
	color: #1a1a1a;
}

.sp-journal__lede {
	margin: 0;
	max-width: 62ch;
	font-size: 15px;
	line-height: 1.6;
	color: rgba(26, 26, 26, 0.62);
}

/* ═══ LA BARRA: EL CAMPO Y LAS PÍLDORAS, UNA SOLA LÍNEA ══════════════
   El campo primero y ancho —la pregunta abierta va antes que el
   estrechamiento— y las píldoras detrás. En pantalla estrecha el campo
   baja a su propia línea entera, que es donde mejor está. */
.sp-journal__barra {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
	margin: 0 0 14px;
}

.sp-journal__buscar {
	display: block;
	flex: 1 1 320px;
	min-width: 240px;
}

/* El rótulo existe para quien no ve la pantalla; el marcador de dentro
   ya lo dice para quien sí. */
.sp-journal__buscar-rotulo {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.sp-journal__buscar input {
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	background: #fff;
	border: 1px solid rgba(26, 26, 26, 0.16);
	border-radius: 999px;
	padding: 9px 18px;
	font-family: Raleway, ui-sans-serif, system-ui, sans-serif;
	font-size: 13px;
	line-height: 1.2;
	color: #1a1a1a;
}

.sp-journal__buscar input::placeholder {
	color: rgba(26, 26, 26, 0.42);
}

.sp-journal__buscar input:focus {
	outline: 0;
	border-color: rgba(26, 26, 26, 0.45);
}

/* El recuento, en la fórmula de la casa. */
/* ⚠️ `max-width: none` porque el tema le pone 60ch a todo `p` y la raya
   de debajo salía cortada a media página. Tercera vez hoy con la misma
   causa: **si el tema viste el elemento, la clase sola no basta.** */
.sp-journal p.sp-journal__recuento {
	max-width: none;
	margin: 0 0 26px;
	padding: 0 0 26px;
	border-bottom: 1px solid rgba(26, 26, 26, 0.12);
	font-size: 11.5px;
	color: rgba(26, 26, 26, 0.55);
	opacity: 1;
}

.sp-journal__showall {
	appearance: none;
	background: transparent;
	border: 0;
	padding: 0;
	margin-left: 6px;
	cursor: pointer;
	font: inherit;
	color: rgba(26, 26, 26, 0.62);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.sp-journal__showall:hover {
	color: #1a1a1a;
}

/* Las píldoras. La activa se marca con relleno, no con color de tema:
   en esta casa el estado se dice con el peso y el fondo. */
.sp-journal__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
}

.sp-journal__pill {
	appearance: none;
	background: transparent;
	border: 1px solid rgba(26, 26, 26, 0.16);
	border-radius: 999px;
	padding: 8px 18px;
	cursor: pointer;
	font-family: Raleway, ui-sans-serif, system-ui, sans-serif;
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	color: #1a1a1a;
}

.sp-journal__pill:hover {
	background: rgba(26, 26, 26, 0.05);
}

.sp-journal__pill.is-active {
	background: #1a1a1a;
	border-color: #1a1a1a;
	color: #fff;
	font-weight: 600;
}

/* La rejilla del heritage: tres columnas y calle de 34. */
/* Cuatro columnas, la calle de 34: las de `.sp-grid` en Artworks,
   medidas — 291.8px cada una en una ventana de 1920. */
.sp-journal__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 34px;
}

.sp-journal__card[hidden] {
	display: none;
}

/* 🩸 La foto declara su PROPORCIÓN, no su alto: una foto vertical y una
   apaisada dan la misma caja y la rejilla no se descuadra. Es la mitad
   del motivo de que esta página la sirva el plugin; la otra mitad es
   que se pide `medium_large` con su srcset y nunca el original. */
.sp-journal__media {
	display: block;
	aspect-ratio: 4 / 3;
	background: #e7e7e7;
	overflow: hidden;
	margin: 0 0 14px;
}

.sp-journal__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.sp-journal__meta {
	margin: 0 0 8px;
	font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: rgba(26, 26, 26, 0.50);
}

.sp-journal__sep {
	margin: 0 4px;
}

h2.sp-journal__name {
	margin: 0 0 10px;
	font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.005em;
}

h2.sp-journal__name a {
	color: #1a1a1a;
	text-decoration: none;
}

h2.sp-journal__name a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Cuatro líneas y se corta. Un extracto que crece descuadra la fila
   entera, que es justo lo que pasaba en la página vieja. */
.sp-journal__excerpt {
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 15px;
	line-height: 1.6;
	color: rgba(26, 26, 26, 0.68);
}

.sp-journal__empty {
	margin: 40px 0 0;
	font-size: 15px;
	color: rgba(26, 26, 26, 0.55);
}

@media (max-width: 1100px) {
	.sp-journal__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
}

@media (max-width: 700px) {
	.sp-journal__grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
	h1.sp-journal__title { font-size: 31px; }
}

/* 🔴 EL DIARIO PINTA SU PROPIO SUELO. Medido en pantalla el 2 de
   septiembre: montado dentro de Caviar, el tema pinta el fondo de la
   página que lo hospeda —en la prueba, rojo oscuro— y los títulos de la
   casa, que son negros, se volvían ilegibles.

   La cura no es pelearse con el color de esa página: es que el diario
   **no dependa de dónde lo cuelguen**. Ocupa su columna entera con su
   fondo plano y mantiene el texto centrado a 1132, que es la medida de
   las otras dos puertas públicas.

   📌 Es la misma frase de la ORDEN-139 llevada al CSS: si esta página la
   sirve el plugin, es el plugin quien manda sobre lo que se ve. */
/* ═══ EL SUELO Y LA CAJA: IGUAL QUE ARTWORKS ═════════════════════════
   Samuel: «tiene que quedar como en la página artworks y en artists in
   focus. Mismo fondo, el mismo color gris y cubre todo el fondo. Y las
   medidas y las separaciones son las mismas que hay aquí.»

   Así que no se inventa nada: se MIDE Artworks y se copia.

     .caviar-escenario   fixed · 396 → 1920 · #f3f3f3   ← el suelo, uno solo
     .caviar-fondo       #f3f3f3 · sin imagen
     .caviar-cuerpo      padding-left 170 · padding-right 76.8 · margin 0
     .sp-archive-wrap    566 → 1835 · padding 0 0 90px
     .sp-grid            4 columnas de 292 · calle de 34

   🪦 Y con eso caen dos cosas mías:

   1) Yo pintaba el suelo en el envoltorio del diario y APAGABA
      `.caviar-fondo`. Por eso salía el salto de grises que Samuel vio:
      dos suelos pegados, uno del tema y otro mío. **El suelo es UNO y ya
      existía** — sólo hay que dejarlo plano, como en Artworks, en vez de
      taparlo.

   2) Yo quitaba el `margin-left: 170` del cuerpo. Medido aquí: en
      Artworks esos mismos 170 son **padding**, no margen — por eso no
      desbordan. La cura no era quitar el hueco: era ponerlo del lado
      correcto de la caja. Lo mismo dicho de otra forma: **no era el
      número, era la propiedad.**
   ═══════════════════════════════════════════════════════════════════ */
/* 🪦 Aquí había un `padding: 64px 0 90px` — el ATAJO — y sus dos ceros
   laterales tumbaban el centrado de la regla común. Y no por orden de
   carga: `.sp-archive-wrap.sp-journal` son DOS clases (0,2,0) y le gana
   a `html body .sp-archive-wrap` (0,1,2), porque en especificidad las
   clases pesan más que los elementos por muchos que pongas.

   📌 LEY · **Un atajo escribe también lo que no querías decir.** Si sólo
   tienes algo que decir de arriba y abajo, se dicen arriba y abajo. */
.sp-archive-wrap.sp-journal {
	max-width: none;
	padding-top: 64px;
	padding-bottom: 90px;
}





/* 🪦 MI ERROR, y estaba avisado ARRIBA en este mismo archivo.
   La cabecera de public.css dice, desde el 18 de agosto:

     «Los encabezados llevan su ELEMENTO en el selector a propósito: el
      tema caviar pone `.caviar-cuerpo h1 {…}` (0,1,1) y le gana en
      silencio a una clase pelada (0,1,0). Subir especificidad, nunca
      añadir !important.»

   Se lo puse al h1 y al h2 del diario… y no a los párrafos. Medido en
   pantalla: el antetítulo, la entradilla, la meta y el extracto salían
   en BLANCO con `opacity: .9` y a 15px — el tema pinta sus `p` y me
   ganaba por un elemento. Sobre fondo claro, texto blanco: invisible.

   📌 La ley que ya estaba escrita y hay que obedecer entera: **cuando el
   tema viste un ELEMENTO, la clase sola no basta.** Aquí se sube a
   (0,2,1) —contenedor + elemento + clase— y se dice `opacity: 1`, que
   es lo que la clase nunca podría haber corregido. */
.sp-journal p.sp-journal__kicker {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	color: rgba(26, 26, 26, 0.55);
	opacity: 1;
}

.sp-journal p.sp-journal__lede {
	font-size: 15px;
	line-height: 1.6;
	color: rgba(26, 26, 26, 0.62);
	opacity: 1;
}

.sp-journal p.sp-journal__meta {
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.10em;
	color: rgba(26, 26, 26, 0.50);
	opacity: 1;
}

.sp-journal p.sp-journal__excerpt {
	font-size: 15px;
	line-height: 1.6;
	color: rgba(26, 26, 26, 0.68);
	opacity: 1;
}

.sp-journal p.sp-journal__empty {
	font-size: 15px;
	color: rgba(26, 26, 26, 0.55);
	opacity: 1;
}


/* ═══ LAS TRES PUERTAS, CENTRADAS EN SU HUECO ═══════════════════════
   Samuel, 2 de septiembre, retirando su propia instrucción anterior:

   > «Debería estar centrado en el hueco que queda entre el final de la
   >  franja blanca y el final de la página por la derecha… ahora, como
   >  tiene una distancia fija, cuando lo reduces lo aplasta por la
   >  derecha con tal de respetar esa distancia.»

   MEDIDO en `Selected Artworks` antes de tocar — y es idéntico en
   `Artists in Focus`, porque comparten envoltorio:

     .caviar-cuerpo    padding-left 170 · padding-right 76.8
     .sp-archive-wrap  1269px · margin 0 / 0
     resultado         costado izquierdo 170 · derecho 85

   Dos costados distintos, y el izquierdo clavado. Al estrechar la
   ventana el que paga es siempre el mismo lado.

   📌 **LEY · Un hueco fijo no reparte; centrar sí.** Y va en la regla
   COMÚN, no en tres copias con nombre propio: es el mismo gesto en las
   tres puertas, y la cuarta que se escriba mañana lo hereda.

   Se scopea por el MARCADO —el cuerpo que CONTIENE un tablero nuestro—
   y no por el nombre de cada página: así no toca ninguna otra página de
   Caviar, y no hace falta `!important` (clase+clase gana a clase sola).
   ═══════════════════════════════════════════════════════════════════ */
/* ⚠️ Medido: con `.caviar-cuerpo:has(…)` (0,2,0) el relleno seguía en
   170px. No es un estilo en línea —comprobado, el elemento no lleva
   `style`— así que es el tema ganando por especificidad o por orden de
   carga. Se sube a (0,2,2) con `html body`, la misma escalera que ya usa
   este archivo para los encabezados. Sigue sin hacer falta gritar. */


/* ⚠️ Y la misma escalera para el propio tablero: con `.sp-archive-wrap`
   pelado, el `margin-inline: auto` perdía contra un `margin: 0` de más
   arriba y el tablero se pegaba a la izquierda (medido: costado
   izquierdo 0, derecho 255). */
/* ═══ EL TABLERO SE BASTA SOLO ══════════════════════════════════════
   🩸 Samuel, 2 de septiembre: *«las cosas de la web de Caviar no van en
   el plugin. Todo el tema de velos y fondos y menús es de la web, no de
   nuestro plugin. No quiero que se mezclen y que luego la instalación
   sea un desastre.»*

   Tenía razón y el que las había mezclado era yo: este archivo llegó a
   tener CINCO reglas que seleccionaban clases del tema —`.caviar-fondo`,
   `.caviar-velo`, `.caviar-escenario`, `.caviar-cuerpo`—. Instalado en
   otra web esas reglas no valen nada, y peor: dan por hecho un tema.

   📌 LEY · **El plugin sólo se nombra a sí mismo.** Aquí dentro no se
   escribe ni una clase que no sea nuestra. Lo que haga falta ajustar del
   tema, se ajusta EN EL TEMA.

   Así que el tablero se pinta su suelo y se centra él solo, sin pedirle
   nada a nadie: llena el ancho que le den y reparte el sobrante a los
   dos lados, con 48 de respiro mínimo. Si el sitio que lo hospeda le da
   una columna torcida, eso se arregla en ese sitio. */
/* 🩸 LAS CUATRO SUPERFICIES, LA MISMA CAJA. Samuel, viendo Artworks y
   Artists en su portátil: *«vuelven a tener un margen entre el menú y la
   caja y se ve separado y estrecho; no se adapta como la del journal.
   Consigue que todas se vean consistentes y centradas al hueco.»*

   Tenía razón y era culpa del ámbito: yo había curado sólo el diario. El
   plugin tiene TRES envoltorios —el de las listas, el de la obra y el
   del artista— y la regla vale para los tres. Se nombran los tres. */
html body .sp-archive-wrap,
html body .sp-artwork-wrapper,
html body .sp-artist-wrapper {
	background: #f3f3f3;
	width: auto;
	max-width: none;
	/* 🩸 El respiro mínimo es RELATIVO, no 48px clavados. Samuel lo vio en
	   su portátil, más estrecho que esta ventana: con un suelo fijo, en
	   una pantalla pequeña el tablero se queda pegado al menú y no
	   respira. `4vw` es la misma unidad con la que respira el resto del
	   sitio, así que el aire crece y encoge con la pantalla.

	   📌 LEY · **Un mínimo en píxeles deja de ser un mínimo en cuanto
	   cambias de pantalla.** Lo que protege un margen es que se mida en
	   la misma unidad que lo que tiene al lado. */
	padding-left: max(4vw, calc((100% - 1269px) / 2));
	padding-right: max(4vw, calc((100% - 1269px) / 2));
}

/* El artículo quiere columna estrecha: la misma cuenta con 900. */
html body .sp-archive-wrap.sp-journal-single,
html body .sp-artwork-wrapper,
html body .sp-artist-wrapper {
	padding-left: max(4vw, calc((100% - 900px) / 2));
	padding-right: max(4vw, calc((100% - 900px) / 2));
}

/* ═══ EL ARTÍCULO DEL DIARIO ═════════════════════════════════════════
   Hereda el suelo, el centrado y la letra de la lista; sólo cambia lo
   que un texto largo necesita y una rejilla no.

   📌 La medida de lectura, que es la única decisión propia: el tablero
   mide 1269 y una línea de 1269px a 19px son ~110 caracteres — el doble
   de lo que el ojo sigue sin perderse de renglón. La columna de texto se
   queda en 800 (unos 72 caracteres) alineada a la izquierda, bajo la
   foto. **El tablero da el sitio; el texto pone su propia medida.**
   ═══════════════════════════════════════════════════════════════════ */

/* 🩸 La tinta del artículo. MEDIDO (7 sept, ciclo Heaven on Earth):
   el título del single salía BLANCO SOBRE BLANCO — invisible. La
   cadena: .caviar-escenario pinta color:var(--caviar-texto) (blanco,
   nacido para la portada roja) y h1.sp-journal__titulo hereda sin que
   nadie reponga la tinta; los <p> del texto se salvan porque llevan
   color propio. El artículo entero declara aquí su tinta, donde vive
   su piel — no en el tema, porque la avería es de esta pantalla. */
.sp-archive-wrap.sp-journal-single {
	color: #111;
}

.sp-journal-single .sp-journal__portada {
	margin: 0 0 30px;
}

.sp-journal-single .sp-journal__portada img {
	display: block;
	width: 100%;
	height: auto;
}

h1.sp-journal__titulo {
	margin: 0 0 10px;
	max-width: 20ch;
	font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
	font-size: 40px;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: #1a1a1a;
}

.sp-journal-single p.sp-journal__meta {
	margin: 0 0 34px;
}

/* 🪦 DOS COSAS, y la segunda no la había visto yo.
   Samuel: *«el bloque de texto no llega hasta el final, es como si no
   aprovechara la columna»*. Medido:

     .sp-journal__texto   800px   ← mi tope de lectura
     los <p> dentro       605px   ← ¡otro tope, del TEMA!
     tamaño               16px    ← mi regla de 19 no llegaba a aplicarse

   O sea que había DOS estrechamientos encima del otro: el mío, puesto a
   propósito, y uno del tema que yo no vi. Por eso el texto acababa 300px
   antes que la foto.

   Y la letra: mi `.sp-journal-single .sp-journal__texto p` (0,2,1)
   perdía otra vez contra el tema. La misma escalera de siempre —`html
   body`, (0,2,3)— y encima `max-width: none` para desatar los párrafos,
   que es lo que una clase nunca podría haber corregido.

   ⚖️ Sobre la medida: yo había puesto 800 porque a 19px eso son ~72
   caracteres, que es lo que el ojo sigue sin perder el renglón, y 900
   son ~85. Samuel prefiere que el texto llegue donde llega la foto, y es
   su casa: **el texto acompaña al borde de la imagen.** Queda dicho el
   porqué por si algún día un artículo largo se lee incómodo. */
html body .sp-journal-single .sp-journal__texto {
	max-width: none;
}

/* 🪦 LA CADUCIDAD SE CUMPLIÓ · 3 de septiembre de 2026

   Aquí vivían TRES `!important`. Los puse el 2 de septiembre y los dejé
   escritos con fecha de caducidad, porque no defendían un diseño: se
   defendían de un `style=` EN LÍNEA con un vertido entero de variables
   de Tailwind que venía pegado en el cuerpo de los posts. Contra un
   estilo en línea, `!important` no es un atajo: es la única llave.

   Hoy Samuel mandó limpiar los artículos —«sin el HTML de dentro, sino
   como texto»— y los ocho pasaron por el desnudador. Medido después en
   el artículo más sucio de todos (19.830 caracteres → 3.964):

       párrafos con `style=` en línea    0
       párrafos con `class`              0
       tamaño servido                    19px

   Ya no hay contra qué gritar, así que se baja la voz.

   📌 **LEY · Un `!important` que nace con fecha de caducidad hay que ir
   a cobrarla.** Si no, la excepción se vuelve costumbre y dentro de un
   año nadie recuerda de qué se estaba defendiendo. */
html body .sp-journal-single .sp-journal__texto p,
html body .sp-journal-single .sp-journal__texto li {
	max-width: none;
	font-size: 19px;
	line-height: 1.7;
	color: #1a1a1a;
	opacity: 1;
}

.sp-journal-single .sp-journal__texto p {
	margin: 0 0 1.25em;
}

.sp-journal-single .sp-journal__texto img {
	max-width: 100%;
	height: auto;
}

.sp-journal-single .sp-journal__texto h2,
.sp-journal-single .sp-journal__texto h3 {
	margin: 1.6em 0 0.5em;
	font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
	font-weight: 600;
	line-height: 1.25;
}

.sp-journal-single .sp-journal__texto h2 { font-size: 26px; }
.sp-journal-single .sp-journal__texto h3 { font-size: 20px; }

.sp-journal-single p.sp-journal__volver {
	margin: 54px 0 0;
	padding-top: 26px;
	border-top: 1px solid rgba(26, 26, 26, 0.12);
	font-size: 13px;
	opacity: 1;
}

.sp-journal-single p.sp-journal__volver a {
	color: #1a1a1a;
	text-decoration: none;
}

.sp-journal-single p.sp-journal__volver a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (max-width: 700px) {
	h1.sp-journal__titulo { font-size: 31px; max-width: none; }
	.sp-journal-single .sp-journal__texto p { font-size: 17px; }
}






/* 🔵 Cazado por Code al verificar el cableado de la 139, y es un buen
   hallazgo: el enlace que envuelve la foto computaba el AZUL del tema
   —`rgb(4, 107, 210)`— porque no tenía color propio. No se veía porque
   dentro sólo hay un `<img>` y no hay texto que pintar…

   …hasta el día en que una foto falle. Entonces sale su `alt` en azul de
   tema, en mitad del diario, y sólo lo descubriríamos cuando ya está
   pasando.

   📌 LEY · **Un color heredado que hoy no se ve, se ve el día que algo
   se rompe.** El sitio donde se nota una avería no puede depender de que
   no haya averías. */
html body .sp-journal a.sp-journal__media {
	color: rgba(26, 26, 26, 0.55);
	font-size: 11px;
	text-decoration: none;
}

/* ═══ EVENTS — LA CARTELERA (ORDEN-154 · piel de Fable, 7 sept) ═════════
   Maqueta de contrato: mockups/eventos.html v3, bendecida por Samuel.
   Hereda la piel del Journal (barra, pills, recuento, meta, name,
   excerpt, media) y sólo viste lo que la cartelera tiene y el Journal
   no: la tarjeta grande de lo que está en curso, la fila de lo que
   viene y lo pasado, la fecha delante y la línea de tinta del pasado.
   Sin rótulos de registro: el tiempo lo dice la fecha. Medidas tomadas
   del Journal real (h1 40/600 · name Poppins 28/400 -0.14px · excerpt
   15/24 al 68 % · meta 11px versales · línea rgba(26,26,26,.12)). */
.sp-events { color: #1a1a1a; }
.sp-events [data-spine-events-list] a { color: inherit; text-decoration: none; }

/* La tarjeta del Journal, tumbada: la foto 4:3 ocupa dos columnas de
   las cuatro (calc(50% - 17px) = 2×291.75 + 34) y el texto las otras dos. */
.sp-events .sp-events__live {
	display: grid;
	grid-template-columns: calc(50% - 17px) minmax(0, 1fr);
	gap: 34px;
	align-items: start;
	padding: 0 0 40px;
	margin: 0 0 40px;
	border-bottom: 1px solid rgba(26, 26, 26, 0.12);
}
.sp-events .sp-events__live .sp-journal__media { margin: 0; }
.sp-events .sp-events__live .sp-journal__media img { transition: transform 0.6s ease; }
.sp-events .sp-events__live:hover .sp-journal__media img { transform: scale(1.02); }
.sp-events .sp-events__live .sp-journal__name {
	margin: 14px 0 12px;
	font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
	font-size: 28px;
	font-weight: 400;
	line-height: 1.28;
	letter-spacing: -0.14px;
	color: #1a1a1a;
}
.sp-events .sp-events__live .sp-journal__excerpt { -webkit-line-clamp: 5; }

/* La fila de lo que viene y de lo pasado: la fecha delante, en Poppins,
   porque aquí el cuándo es la noticia; la foto contenida 4:3 a 168. */
.sp-events .sp-events__row {
	display: grid;
	grid-template-columns: 150px 168px minmax(0, 1fr) auto;
	gap: 26px;
	align-items: center;
	padding: 20px 0;
	border-bottom: 1px solid rgba(26, 26, 26, 0.12);
}
.sp-events .sp-events__when {
	font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.3;
}
.sp-events .sp-events__when small {
	display: block;
	font-family: -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 12.5px;
	font-weight: 400;
	color: rgba(26, 26, 26, 0.62);
	margin-top: 2px;
}
.sp-events .sp-events__row .sp-journal__media { width: 168px; margin: 0; }
.sp-events .sp-events__row .sp-journal__name {
	margin: 0;
	font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
	font-size: 20px;
	font-weight: 400;
	line-height: 1.28;
	letter-spacing: -0.14px;
	color: #1a1a1a;
}
.sp-events .sp-events__row .sp-journal__meta { margin: 0; white-space: nowrap; }

/* El pasado no lleva palabra: lleva aire y UNA línea de tinta. Es el
   currículum de la casa y se ve entero (Samuel, 7 sept). La fila que lo
   precede suelta su línea fina para que sólo quede la de tinta. */
.sp-events .sp-events__past { margin-top: 48px; padding-top: 18px; border-top: 1px solid #1a1a1a; }
.sp-events [data-spine-events-list] > .sp-events__row:has(+ .sp-events__past) { border-bottom: 0; }
.sp-events .sp-events__live:has(+ .sp-events__past) { border-bottom: 0; }

@media (max-width: 900px) {
	.sp-events .sp-events__live { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.sp-events .sp-events__row { grid-template-columns: 96px minmax(0, 1fr); gap: 14px 18px; }
	.sp-events .sp-events__row .sp-journal__media { width: 96px; }
	.sp-events .sp-events__row .sp-journal__meta { grid-column: 2; }
}

/* ═══════════════════════════════════════════════════════════════════
   📱 EL TELÉFONO — 23 de septiembre de 2026 · Fable
   Medido a 390 dentro de Caviar.
   1 · El aire: 4vw en 390 son 15,6 px, y las páginas de texto del marco
       empiezan en 22. Cambiar de sección no debe mover el punto donde
       empieza a leerse; en el teléfono, 22 a los dos lados.
   2 · FILTERS, PLEGADO. Samuel: «los selectores están tan separados que
       ocupan media página». Medido: 5 campos de 42 + rótulos + 22 de
       hueco = 380 px antes de la primera obra. Ahora: el buscador y una
       banda «Filters ⌄» (44). Abierta: artista a lo ancho, técnica y
       año a medias, y el orden; sin rótulos (el propio selector dice
       «All artists»). Los rótulos siguen ahí para quien lee con voz.
       La casilla y su etiqueta viven en archive-artwork.php.
   3 · ARTISTS sólo tiene buscador y orden: en una fila.
   4 · JOURNAL: las categorías en una fila que se desliza de lado.
   ═══════════════════════════════════════════════════════════════════ */

/* En el escritorio no existen: la envoltura se disuelve y la fila de
   filtros es la de siempre. */
.sp-filtros__abrir,
.sp-filtros__boton { display: none; }
.sp-filtros__mas { display: contents; }

@media (max-width: 640px) {
	html body .sp-archive-wrap,
	html body .sp-archive-wrap.sp-journal-single,
	html body .sp-artwork-wrapper,
	html body .sp-artist-wrapper {
		padding-left: 22px;
		padding-right: 22px;
	}

	/* los rótulos grises, sólo para la voz */
	.sp-public .sp-filters .sp-field label {
		position: absolute; width: 1px; height: 1px; overflow: hidden;
		clip: rect(0 0 0 0); white-space: nowrap;
	}
	.sp-public .sp-filters { gap: 8px; margin: 20px 0 4px; align-items: stretch; }
	.sp-public .sp-field { flex: 1 1 100%; gap: 0; }
	.sp-public .sp-field input,
	.sp-public .sp-field select { width: 100%; min-width: 0; height: 44px; }

	/* 2 · la banda */
	.sp-public .sp-filtros__boton {
		flex: 1 1 100%;
		display: flex; align-items: center; justify-content: space-between;
		height: 44px; padding: 0 2px;
		font-size: 14px; font-weight: 600; color: #1a1a1a;
		border-bottom: 1px solid #e2e2e2;
		cursor: pointer; -webkit-tap-highlight-color: transparent;
	}
	.sp-public .sp-filtros__boton b { font-weight: 600; color: #6f6f6f; }
	.sp-public .sp-filtros__boton i {
		width: 8px; height: 8px; margin-right: 6px;
		border-right: 1.5px solid #1a1a1a; border-bottom: 1.5px solid #1a1a1a;
		transform: translateY(-2px) rotate(45deg); transition: transform .2s ease;
	}
	.sp-public .sp-filtros__abrir:checked + .sp-filtros__boton i { transform: translateY(2px) rotate(-135deg); }

	/* 2 · lo de dentro */
	.sp-public .sp-filtros__mas { display: none; }
	.sp-public .sp-filtros__abrir:checked ~ .sp-filtros__mas {
		flex: 1 1 100%;
		display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
		padding: 8px 0 4px;
	}
	.sp-public .sp-filtros__mas > .sp-field:first-child,
	.sp-public .sp-filtros__mas > .sp-order { grid-column: 1 / -1; }
	.sp-public .sp-filtros__mas .sp-order { display: flex; gap: 0; }
	.sp-public .sp-filtros__mas .sp-order button { height: 44px; }
	.sp-public .sp-filtros__mas .sp-clear { grid-column: 1 / -1; justify-self: start; padding: 6px 0; }

	/* 3 · Artists: buscador y orden en una fila */
	.sp-public .sp-filters:not(:has(.sp-filtros__mas)) { flex-wrap: nowrap; }
	.sp-public .sp-filters:not(:has(.sp-filtros__mas)) .sp-field { flex: 1 1 auto; }
	.sp-public .sp-filters:not(:has(.sp-filtros__mas)) .sp-order button { height: 44px; padding: 0 14px; }

	.sp-public .sp-count { margin: 14px 0 20px; }

	/* 4 · Journal: las categorías, de lado */
	.sp-journal__pills {
		flex-wrap: nowrap; overflow-x: auto;
		margin-left: -22px; margin-right: -22px; padding-left: 22px; padding-right: 22px;
		scrollbar-width: none; -webkit-overflow-scrolling: touch;
	}
	.sp-journal__pills::-webkit-scrollbar { display: none; }
	.sp-journal__pill { flex: 0 0 auto; }
}

/* ═══ CODA 104 · la piel de Fable ═══
   La línea de crédito es la línea pequeña de una cartela: dice de dónde viene la obra sin levantar la
   voz. Misma escala y mismo gris que lo que acompaña (sp-meta, sp-artist), nunca más fuerte que el nombre. */
.sp-credit { font-size: 13px; color: #6f6f6f; margin: -4px 0 10px; }
.sp-artwork-credit { font-size: 14px; color: #6f6f6f; margin: 16px 0 0; }