/**
 * Kalunat — estilos globales.
 *
 * Solo lo que theme.json no puede expresar. Cada sección explica por qué
 * está aquí y no en theme.json.
 *
 * 1. Modo oscuro
 * 2. Base
 * 3. Pies de foto
 * 4. Barra de desplazamiento
 * 5. Piezas editoriales
 * 6. Movimiento reducido
 */

/* =====================================================================
   1. MODO OSCURO
   theme.json no puede variar la paleta según el modo de color, así que
   aquí se redefinen las mismas variables. Se sigue la preferencia del
   sistema salvo que el visitante haya elegido otra cosa con el botón de
   modo oscuro (Kalunat Core pone data-theme en <html> antes del primer
   render). Los tonos son los del logo: tinta #16181A, papel #F3F2EE y
   el naranja de "64°N" (#D24100 en claro, #FB864D en oscuro).
   "on-image" no cambia porque siempre va sobre fotografía.
   Los dos bloques de declaraciones deben mantenerse idénticos.
   ===================================================================== */

:root {
	color-scheme: light;

	/* Tinta y papel del logo, fijos: no cambian con el modo de color.
	   Los usan las superficies que siempre son oscuras, como el menú a
	   pantalla completa. */
	--kalunat--ink: #16181a;
	--kalunat--paper: #f3f2ee;
}

@media (prefers-color-scheme: dark) {

	:root:not([data-theme="light"]) {
		color-scheme: dark;
		--wp--preset--color--base: #16181a;
		--wp--preset--color--contrast: #f3f2ee;
		--wp--preset--color--muted: #a3a3a3;
		--wp--preset--color--line: #d6d6d6;
		--wp--preset--color--accent: #fb864d;
		--kalunat--image-filter: brightness(0.92);
		--kalunat--article-text: color-mix(in srgb, #f3f2ee 88%, #16181a);
	}
}

/* body.kalunat-is-dark: páginas que van siempre en oscuro, sea cual sea
   el modo elegido (plantilla Journal). */
:root[data-theme="dark"],
body.kalunat-is-dark {
	color-scheme: dark;
	--wp--preset--color--base: #16181a;
	--wp--preset--color--contrast: #f3f2ee;
	--wp--preset--color--muted: #a3a3a3;
	--wp--preset--color--line: #d6d6d6;
	--wp--preset--color--accent: #fb864d;
	--kalunat--image-filter: brightness(0.92);
	--kalunat--article-text: color-mix(in srgb, #f3f2ee 88%, #16181a);
}

/* Las fotos se oscurecen un poco en modo oscuro para no deslumbrar. */
:where(.wp-block-image, .wp-block-cover, .wp-block-post-featured-image, .wp-block-gallery, .wp-block-media-text) img {
	filter: var(--kalunat--image-filter, none);
}

/* =====================================================================
   2. BASE
   ===================================================================== */

/* Sin negritas de imitación: Freight Big solo tiene el peso 400 en el
   kit de Adobe, y los titulares que pidan más peso se quedan en 400.
   Acumin es variable (100-900) y tiene todos los pesos. */
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizelegibility;
	font-synthesis-weight: none;
	transition: background-color var(--wp--custom--motion--fast) ease, color var(--wp--custom--motion--fast) ease;
}

/* Los titulares grandes no deben partir palabras ni dejar viudas. */
:where(h1, h2, h3, h4) {
	text-wrap: balance;
	word-break: keep-all;
}

:where(p) {
	text-wrap: pretty;
}

/* Subrayado fino y separado en los enlaces de texto. */
a {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}

/* El formato "Resaltado" del editor genera <mark>; sustituye al
   antiguo shortcode [highlight]. Sin color de fondo propio, el <mark>
   toma un tinte del acento: el naranja puro con texto encima no llega
   al contraste mínimo, el tinte sí, en claro y en oscuro. */
mark:not([style*="background-color"]) {
	background-color: color-mix(in srgb, var(--wp--preset--color--accent) 28%, transparent);
	color: inherit;
	padding-inline: 0.1em;
}

::selection {
	background-color: color-mix(in srgb, var(--wp--preset--color--accent) 35%, transparent);
}

/* =====================================================================
   3. PIES DE FOTO
   Pequeños, en la letra de la interfaz, alineados a la izquierda bajo la
   foto y numerados en cada entrada (01, 02, 03...) con el número en el
   color de acento. Valen para las imágenes sueltas, el pie de las
   galerías de WordPress y el de las galerías justificadas
   (.ejg-gallery-caption, que no es un "caption" de theme.json).
   Los pies de cada foto dentro de una galería de WordPress (que
   WordPress pone sobre la foto) y los de la tira de Portfolio
   (portfolio.css) siguen con su diseño.
   ===================================================================== */

.wp-block-post-content {
	counter-reset: kalunat-figure;
}

.wp-block-image:not(.wp-block-gallery .wp-block-image) > .wp-element-caption,
.wp-block-gallery:not(.kalunat-strip *) > .blocks-gallery-caption,
.ejg-gallery-caption {
	display: block;
	max-width: none;
	margin: 0.9em 0 0;
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--xx-small);
	line-height: var(--wp--custom--line-height--snug);
	letter-spacing: var(--wp--custom--letter-spacing--wide);
	text-align: left;
}

.wp-block-image:not(.wp-block-gallery .wp-block-image) > .wp-element-caption::before,
.wp-block-gallery:not(.kalunat-strip *) > .blocks-gallery-caption::before,
.ejg-gallery-caption::before {
	content: counter(kalunat-figure, decimal-leading-zero);
	margin-right: 1em;
	color: var(--wp--preset--color--accent);
	counter-increment: kalunat-figure;
}

/* A sangre, el pie recupera el margen de las columnas del fondo. */
:is(.wp-block-image.alignfull, .wp-block-gallery.alignfull, .ejg-gallery.alignfull) :is(.wp-element-caption, .blocks-gallery-caption, .ejg-gallery-caption) {
	padding-inline: var(--kalunat-column-pad);
}

/* =====================================================================
   4. BARRA DE DESPLAZAMIENTO
   ===================================================================== */

html {
	scroll-behavior: smooth;
	scrollbar-width: thin;
	scrollbar-color: var(--wp--preset--color--line) transparent;
}

/* =====================================================================
   5. PIEZAS EDITORIALES
   Clases que usan las plantillas y los patrones del tema. Van aquí
   porque combinan varios bloques y no pertenecen a ninguno en concreto.
   ===================================================================== */

/* Compatibilidad con el contenido escrito con Eroica. Sus entradas
   envuelven el texto en grupos (a veces uno dentro de otro, a veces con
   el estilo "article-narrow"). En Kalunat esos grupos quedarían al
   ancho del texto (840px) y las imágenes y galerías "amplias" no
   podrían salir de ellos.

   - Un grupo contenedor (sin fondo ni alineación) ocupa todo el ancho
     disponible; su contenido sigue a 840px por su propio layout.
   - "article-narrow" hace lo mismo que en el child de Eroica: lo normal
     va estrecho y lo amplio o completo sale a su ancho. */
.wp-block-post-content .wp-block-group:is(.is-layout-constrained, .is-style-article-narrow):not(.alignwide, .alignfull, .has-background) {
	max-width: none;
}

.wp-block-post-content .is-style-article-narrow > :not(.alignwide, .alignfull, .is-layout-constrained) {
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
}

.wp-block-post-content .is-style-article-narrow > .alignwide {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
}

/* Imágenes y galerías "amplias" de un artículo: solo un 8% más anchas
   que el texto, para un conjunto más recogido (el ancho amplio del
   sitio queda para portadas y listados). Lo "completo" sigue de borde a
   borde. */
.wp-block-post-content :is(.wp-block-image, .wp-block-gallery, .ejg-gallery).alignwide {
	max-width: calc(var(--wp--style--global--content-size) * 1.08);
	margin-inline: auto;
}

/* Lo "completo" dentro de esos grupos: WordPress no deja que salga de un
   grupo que no es completo y le quita los márgenes negativos. Como el
   grupo ya ocupa todo el ancho disponible (reglas de arriba), basta con
   devolverle el margen lateral del sitio para que llegue de borde a
   borde. No se usa 100vw porque incluye la barra de desplazamiento y
   provocaría scroll horizontal. */
.wp-block-post-content :is(.has-global-padding, .is-style-article-narrow) > .alignfull {
	width: auto;
	max-width: none;
	margin-right: calc(var(--wp--style--root--padding-right) * -1) !important;
	margin-left: calc(var(--wp--style--root--padding-left) * -1) !important;
}

/* En móvil las fotos y galerías de un artículo van de borde a borde,
   como en el child de Eroica: en una pantalla estrecha cada píxel de
   foto cuenta. El pie de foto recupera el margen lateral. */
@media (max-width: 768px) {

	/* Con el margen lateral del sitio en negativo, como lo "completo" de
	   arriba, y no con 100vw: 100vw incluye la barra de desplazamiento y,
	   en una ventana de escritorio estrecha, daba scroll horizontal. */
	.wp-block-post-content :is(.wp-block-image:not(.alignleft, .alignright), .ejg-gallery) {
		width: auto;
		max-width: none;
		margin-right: calc(var(--wp--style--root--padding-right) * -1) !important;
		margin-left: calc(var(--wp--style--root--padding-left) * -1) !important;
	}

	.wp-block-post-content :is(.wp-block-image, .ejg-gallery) :is(.wp-element-caption, .ejg-gallery-caption) {
		padding-inline: var(--wp--custom--gutter);
	}
}

/* Párrafos de los artículos (Acumin, variable): ligeros, a 350. Las
   negritas, a 700 y en el color pleno del texto, para que contrasten
   mucho con el párrafo. El color del párrafo, en claro un gris muy
   oscuro (#404040); en oscuro, el blanco roto del texto con un 12% del
   fondo (--kalunat--article-text, en la sección 1).
   La familia, el tamaño, el interlineado (1,3) y el espaciado los
   heredan del bloque Contenido de la entrada (theme.json,
   styles.blocks), donde se pueden cambiar desde Estilos.
   La entradilla (estilo "callout") tiene su propia tipografía en
   styles/blocks/paragraph-callout.json, sin especificidad: se excluye
   para que esta regla no la pise. También los párrafos de las citas
   (blockquote), que llevan la tipografía de la cita. */
.wp-block-post-content p:not(.is-style-cnvs-paragraph-callout, blockquote p) {
	color: var(--kalunat--article-text, rgb(64 64 64));
	font-weight: 350;
	line-height: inherit;
	letter-spacing: inherit;
}

/* Los párrafos de una cita, con el interlineado de la cita (theme.json
   da a todos los párrafos 1.2, demasiado para una cita grande). */
.wp-block-post-content blockquote p {
	line-height: inherit;
}

.wp-block-post-content :is(b, strong) {
	color: var(--wp--preset--color--contrast);
	font-weight: 700;
}

/* Tamaño: el del bloque Contenido de la entrada (theme.json), de 17px
   en móvil a 18px en pantallas grandes. Se respetan los párrafos con
   un tamaño elegido en el editor y la entradilla (estilo "callout"), y
   no se tocan las citas. */
.wp-block-post-content p:not([class*="-font-size"], .is-style-cnvs-paragraph-callout, blockquote p) {
	font-size: inherit;
}

/* El tamaño de los encabezados de los artículos está en theme.json, en
   los elementos del bloque Contenido de la entrada.

   Los titulares con un tamaño elegido en el editor (las clases
   has-*-font-size, que WordPress pone con !important), un 8% mayores,
   como el resto de titulares del tema: Freight Big se ve pequeña. */
:is(h1, h2, h3, h4, h5, h6):not(.is-style-label).has-large-font-size {
	font-size: calc(var(--wp--preset--font-size--large) * 1.08) !important;
}

:is(h1, h2, h3, h4, h5, h6):not(.is-style-label).has-x-large-font-size {
	font-size: calc(var(--wp--preset--font-size--x-large) * 1.08) !important;
}

:is(h1, h2, h3, h4, h5, h6):not(.is-style-label).has-xx-large-font-size {
	font-size: calc(var(--wp--preset--font-size--xx-large) * 1.08) !important;
}

:is(h1, h2, h3, h4, h5, h6):not(.is-style-label).has-huge-font-size {
	font-size: calc(var(--wp--preset--font-size--huge) * 1.08) !important;
}

/* Más aire entre el texto y las imágenes o galerías (el espacio normal
   entre bloques se queda entre párrafos y entre fotos seguidas). */
.wp-block-post-content :not(figure) + :is(figure.wp-block-image, .wp-block-gallery, .ejg-gallery),
.wp-block-post-content :is(figure.wp-block-image, .wp-block-gallery, .ejg-gallery) + :not(figure, h2, h3) {
	margin-top: var(--wp--preset--spacing--40);
}

/* Encabezados dentro de un artículo: más aire por encima (separan
   secciones) y algo más por debajo que el espacio normal entre bloques. */
.wp-block-post-content :is(h2, h3).wp-block-heading {
	margin-top: var(--wp--preset--spacing--50);
	margin-bottom: var(--wp--preset--spacing--30);
}

/* Enlaces que abren otra pestaña (target="_blank") dentro del texto: una
   flecha en diagonal al final indica que salen de la web. Los lectores
   de pantalla oyen "abre en una pestaña nueva" en vez del nombre de la
   flecha. No se aplica a enlaces que envuelven una imagen. */
.wp-block-post-content a[target="_blank"]:not(:has(img))::after {
	content: "\2197";
	content: "\2197" / " (abre en una pestaña nueva)";
	display: inline-block;
	margin-left: 0.15em;
	font-family: var(--wp--preset--font-family--ui);
	font-size: 0.8em;
	line-height: 1;
	text-decoration: none;
}

/* Listado en lista horizontal: si la primera columna (la de la foto)
   se queda vacía porque la entrada no tiene imagen destacada, se oculta
   y el texto ocupa toda la fila. */
.kalunat-list-item > .wp-block-column:first-child:not(:has(.wp-block-post-featured-image)) {
	display: none;
}

/* Entradas relacionadas (parte "related-posts"): la lista de Journal
   (journal.css y journal.js, con la foto que sigue al cursor) sin la
   columna de fecha, solo título y categoría, al ancho amplio del sitio.
   Entre dos filetes, con el rótulo centrado arriba. */
.kalunat-related {
	margin-top: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--50);
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--line) 25%, transparent);
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--line) 25%, transparent);
}

/* H2 con el estilo "Rótulo": 3rem por defecto, de 2rem en móvil, con
   menos espaciado entre letras que el rótulo pequeño para que a ese
   tamaño no se desperdigue. Un tamaño elegido en el editor manda. */
h2.wp-block-heading.is-style-label:not([class*="-font-size"]) {
	font-size: clamp(2rem, 1.4rem + 2.5vw, 3rem);
	line-height: 1.05;
	letter-spacing: var(--wp--custom--letter-spacing--wide);
}

/* "Artículos relacionados": un rótulo algo mayor que el pequeño (1rem),
   no los 3rem de los rótulos H2. La barra de comentarios usa la misma
   medida (blocks/comments.css). */
.kalunat-related h2.wp-block-heading.kalunat-related__heading {
	margin: 0;
	padding: var(--wp--preset--spacing--40) var(--wp--custom--gutter);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: var(--wp--custom--letter-spacing--widest);
	text-align: center;
}

/* Las tarjetas son las de los archivos (assets/css/archive.css); aquí,
   el ancho de la rejilla y el aire hasta el filete de abajo. */
.kalunat-related .kalunat-archive__grid.wp-block-post-template {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding: var(--wp--preset--spacing--20) var(--wp--custom--gutter) var(--wp--preset--spacing--30);
}

/* Línea de metadatos: "Jose · 23 de septiembre de 2026 · 5 minutos". */
.kalunat-post-meta {
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--xx-small);
	font-weight: 500;
	letter-spacing: var(--wp--custom--letter-spacing--wider);
	text-transform: uppercase;
}

.kalunat-post-meta > * {
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
}

.kalunat-post-meta > * + *::before {
	content: "·";
	margin-inline: 0.6em;
}

/* Entradilla bajo el título: el extracto, en el color del texto. */
.kalunat-lede {
	color: var(--wp--preset--color--contrast);
	line-height: var(--wp--custom--line-height--snug);
}

/* El límite de ancho va en el párrafo y no en el bloque: en un grupo
   "restringido" (la cabecera del artículo) un bloque más estrecho que
   la columna se centra con márgenes automáticos y se desalinea del
   título. */
.kalunat-lede p {
	max-width: 40ch;
	margin: 0;
}

/* Buscador grande (búsqueda y 404): solo una línea bajo el texto. */
.kalunat-search-large .wp-block-search__inside-wrapper {
	padding: 0;
	border: 0;
	border-bottom: 1px solid currentcolor;
}

.kalunat-search-large .wp-block-search__input {
	border: 0;
	background: transparent;
	color: inherit;
	font-size: var(--wp--preset--font-size--large);
}

.kalunat-search-large .wp-block-search__button {
	border: 0;
	background: none;
	color: inherit;
}

.kalunat-search-large .wp-block-search__button svg {
	fill: currentcolor;
}

/* Transiciones entre páginas (View Transitions API): la página cambia
   con un fundido y la foto de una entrada viaja de la tarjeta al hero
   (nombres en inc/transitions.php). Donde no hay soporte, la navegación
   es la de siempre. La foto se recorta, no se deforma, mientras cambia
   de proporción. */
@media (prefers-reduced-motion: no-preference) {

	@view-transition {
		navigation: auto;
	}
}

::view-transition-group(*) {
	animation-duration: 0.6s;
	animation-timing-function: var(--wp--custom--motion--ease);
}

::view-transition-old(.kalunat-photo),
::view-transition-new(.kalunat-photo) {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Entrada de la página, como la "animación de carga" de Eroica: todo
   salvo la cabecera baja 50px mientras aparece, 470ms con su curva
   (easeInOutSine) tras 50ms. Se anima "top" (con position: relative) y
   no "transform", que durante la animación descolocaría los elementos
   fijos que hay dentro (la línea de lectura, la foto flotante de
   Journal...). Con "reducir movimiento", la regla de abajo la deja en
   nada.
   Relleno "backwards" y no "both": una animación de opacidad que se
   queda aplicada al terminar convierte el <main> en un contexto de
   apilamiento para siempre, y la línea de lectura (fija, dentro) quedaba
   debajo de la cabecera. */
.wp-site-blocks > :is(main, footer) {
	position: relative;
	animation: kalunat-site-in 470ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 50ms backwards;
}

@keyframes kalunat-site-in {

	from {
		top: -50px;
		opacity: 0;
	}

	to {
		top: 0;
		opacity: 1;
	}
}

/* Cabeceras de entrada como las del tema Keel.

   Fila de datos de los heros (.kalunat-hero-meta): etiqueta ("Fecha:") y
   valor, en una rejilla con las mismas columnas que las líneas del
   fondo. Categorías y resumen ocupan dos columnas; fecha y autor, una.
   Sin resumen (hero centrado), las categorías ocupan cuatro. La usan
   los heros de imagen (cover.css) y el de título en movimiento (Kalunat
   Core). */
.kalunat-hero-meta {
	display: grid;
	grid-template-columns: repeat(var(--kalunat-columns), minmax(0, 1fr));
	row-gap: var(--wp--preset--spacing--30);
	width: 100%;
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.35;
	text-align: left;
}

/* Sin el margen superior que el flujo de WordPress da a los bloques
   siguientes (dejaba la primera columna más alta que las demás). */
.kalunat-hero-meta > .kalunat-hero-meta__item {
	min-width: 0;
	margin-block: 0;
	padding-inline: var(--kalunat-column-pad);
}

.kalunat-hero-meta__item > *,
.kalunat-hero-meta__item p {
	margin: 0;
}

.kalunat-hero-meta__item--terms,
.kalunat-hero-meta__item--excerpt {
	grid-column: span 2;
}

/* Bajo la foto, al inicio del artículo (plantillas "Hero: imagen
   completa" y "…centrada"): con los colores de la página, aire arriba y
   abajo y un filete que la separa del texto. */
.kalunat-hero-meta.kalunat-hero-meta--below {
	width: auto;
	margin-top: 0;
	padding-block: var(--wp--preset--spacing--40);
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--line) 40%, transparent);
}

/* Compactos y centrados: en una fila del ancho de su contenido, en vez
   de repartidos por las columnas del fondo. El resumen, como mucho a
   unos 36 caracteres por línea. */
.kalunat-hero-meta.kalunat-hero-meta--below {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
	justify-content: center;
}

.kalunat-hero-meta--below > .kalunat-hero-meta__item {
	padding-inline: 0;
}

.kalunat-hero-meta--below > .kalunat-hero-meta__item--excerpt {
	max-width: 36ch;
}

/* El filete, solo del ancho de los datos: en vez de ir en el bloque
   (que ocupa toda la pantalla), cada dato lleva su tramo y, sin huecos
   entre ellos, forman una sola línea. El aire entre datos es su relleno
   lateral. */
@media (min-width: 782px) {

	.kalunat-hero-meta.kalunat-hero-meta--below {
		column-gap: 0;
		padding-bottom: 0;
		border-bottom: 0;
	}

	.kalunat-hero-meta--below > .kalunat-hero-meta__item {
		padding: 0 calc(var(--wp--preset--spacing--50) / 2) var(--wp--preset--spacing--40);
		border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--line) 40%, transparent);
	}

	.kalunat-hero-meta--below > .kalunat-hero-meta__item:first-child {
		padding-left: 0;
	}

	.kalunat-hero-meta--below > .kalunat-hero-meta__item:last-child {
		padding-right: 0;
	}
}

/* En móvil, centrados quedarían escalonados: dos columnas alineadas a
   la izquierda, con categorías y resumen a lo ancho. */
@media (max-width: 781px) {

	.kalunat-hero-meta.kalunat-hero-meta--below {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		padding-inline: var(--kalunat-column-pad);
	}

	.kalunat-hero-meta--below > .kalunat-hero-meta__item--excerpt {
		max-width: none;
	}

	.kalunat-hero-meta--below > :is(.kalunat-hero-meta__item--date, .kalunat-hero-meta__item--author) {
		grid-column: auto;
	}
}

.kalunat-hero-meta:not(:has(.kalunat-hero-meta__item--excerpt)) .kalunat-hero-meta__item--terms {
	grid-column: span calc(var(--kalunat-columns) - 2);
}

.kalunat-hero-meta__label {
	margin-bottom: 0.3em;
	font-weight: 500;
}

.kalunat-hero-meta__label::after {
	content: ":";
}

.kalunat-hero-meta__item > :not(.kalunat-hero-meta__label) {
	color: inherit;
	font: inherit;
	letter-spacing: normal;
	text-transform: none;
	opacity: 0.75;
}

.kalunat-hero-meta a {
	color: inherit;
	text-decoration: none;
}

.kalunat-hero-meta a:hover {
	text-decoration: underline;
}

/* Móvil (4 columnas): categorías y resumen a lo ancho, fecha y autor en
   dos columnas cada uno. */
@media (max-width: 781px) {

	/* Especificidad alta: gana a la regla de "sin resumen" de arriba. */
	.kalunat-hero-meta .kalunat-hero-meta__item.kalunat-hero-meta__item--terms,
	.kalunat-hero-meta .kalunat-hero-meta__item.kalunat-hero-meta__item--excerpt {
		grid-column: 1 / -1;
	}

	.kalunat-hero-meta__item--date,
	.kalunat-hero-meta__item--author {
		grid-column: span 2;
	}
}

/* Plantillas "Estrecha" y "Estrecha centrada" (sin hero): categoría,
   título grande, y una fila con el extracto a un lado y el autor (foto,
   nombre, fecha y lectura) al otro; debajo, la imagen destacada al
   ancho del texto. En la centrada, todo en el eje. */
.kalunat-narrow .kalunat-narrow__terms {
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: normal;
	text-transform: none;
}

/* Como en Keel (63px a 1344px de ancho), un poco más grande. */
.kalunat-narrow .kalunat-narrow__title {
	margin: 0;
	font-size: clamp(2.7rem, 5.616vw, 5.94rem);
	font-weight: 300;
	line-height: 0.95;
	letter-spacing: var(--wp--custom--letter-spacing--display);
}

.kalunat-narrow .kalunat-narrow__row {
	width: 100%;
	margin-top: var(--wp--preset--spacing--20);
}

.kalunat-narrow .kalunat-narrow__excerpt {
	max-width: 40ch;
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--wp--custom--line-height--snug);
}

.kalunat-narrow__excerpt p {
	margin: 0;
}

.kalunat-narrow__avatar img {
	display: block;
	border-radius: 50%;
}

.kalunat-narrow .kalunat-narrow__author {
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
}

.kalunat-narrow--narrow-centered .kalunat-narrow__excerpt {
	margin-inline: auto;
}

.kalunat-narrow--narrow-centered .kalunat-narrow__byline {
	text-align: left;
}

.kalunat-narrow__image {
	margin-bottom: 0;
}

/* Líneas verticales de fondo, como en el tema Keel: dividen la pantalla
   en 6 columnas iguales (4 en móvil), en el color del texto muy
   atenuado. Van por encima del contenido pero no reciben clics; quedan
   bajo la cabecera y el menú. Las cabeceras de entrada, que van a todo
   el ancho, alinean sus columnas con ellas usando el mismo número de
   columnas (--kalunat-columns). Para quitarlas basta con borrar este
   bloque. */
:root {
	--kalunat-columns: 6;
}

/* Relleno lateral de cada columna (el texto no toca la línea). */
:root {
	--kalunat-column-pad: max(1.25rem, 1.67vw);
}

body::after {
	content: "";
	position: fixed;
	inset: 0 0 0 -1px;
	z-index: 1;
	background-image: linear-gradient(90deg, color-mix(in srgb, var(--wp--preset--color--contrast) 7%, transparent) 1px, transparent 1px);
	background-position: calc(100% / var(--kalunat-columns)) 0;
	background-size: calc(100% / var(--kalunat-columns)) 100%;
	pointer-events: none;
}

@media (max-width: 781px) {

	:root {
		--kalunat-columns: 4;
	}
}

/* En las entradas, las líneas acaban donde empiezan las relacionadas: a
   medida que su borde superior sube por la pantalla, se recorta la
   parte de las líneas que queda por debajo de él (animación ligada a la
   posición de las relacionadas en la pantalla). Sin soporte para estas
   animaciones, las líneas siguen hasta el final. */
@supports (animation-timeline: view()) {

	body:has(.kalunat-related) {
		timeline-scope: --kalunat-related;
	}

	.kalunat-related {
		view-timeline: --kalunat-related block;
	}

	body:has(.kalunat-related)::after {
		animation: kalunat-lines-end linear both;
		animation-timeline: --kalunat-related;
		animation-range: cover 0% cover 100vh;
	}
}

@keyframes kalunat-lines-end {

	from {
		clip-path: inset(0 0 0 0);
	}

	to {
		clip-path: inset(0 0 100% 0);
	}
}

/* =====================================================================
   6. MOVIMIENTO REDUCIDO
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}