/**
 * pFolio — estilos globales y modo oscuro. La cabecera, la búsqueda y el
 * menú están en header.css.
 */

:root {
	--pfolio-ease: cubic-bezier(0.22, 1, 0.36, 1);
	/* Sangría del texto de las secciones: alinea todo con el titular del héroe. */
	--pfolio-indent: clamp(88px, 9vw, 160px);
	/* Alto de la cabecera, el de Kalunat (117px a 1536px de ancho). */
	--pfolio-header: 117px;
	/* El alto al hacer scroll: lo fijo se coloca bajo él. */
	--pfolio-header-compact: calc(var(--pfolio-header) - 32px);
	/* Acento de Kalunat: el número de los pies de foto. */
	--pfolio-accent: #d24100;
	/* Peso de los títulos (Acumin), en tres niveles: grandes (cabeceras de
	 * página, hero, año del blog, menú, contacto…) en Medium; medianos
	 * (ladillos, filas del blog, títulos de serie, presentación) y pequeños
	 * (tarjetas, índice, resultados) en Regular. Lo que se escribe en los
	 * campos va en Light. */
	--pfolio-display-weight: 500;
	--pfolio-heading-weight: 400;
	--pfolio-title-weight: 400;
	/* Los títulos de página (H1 de las entradas en Acumin, de los
	 * archivos, del portfolio y de cada serie) y el menú a pantalla
	 * completa, en Light. Los hero de entrada van en Freight Display,
	 * que solo tiene 400. */
	--pfolio-h1-weight: 300;
	/* La letra de los titulares y la de las entradillas: se cambian aquí.
	 * Los titulares grandes, en Freight Big Pro Light; los demás, en Freight
	 * Display Pro Book, porque Freight Big se rompe a tamaños pequeños. Las
	 * entradillas, en Acumin Light. */
	--pfolio-title-font-large: freight-big-pro, var(--wp--preset--font-family--serif-display);
	--pfolio-title-font: freight-display-pro, var(--wp--preset--font-family--serif-display);
	--pfolio-head-large: 300;
	--pfolio-head-small: 400;
	--pfolio-dek-font: var(--wp--preset--font-family--ui);
	--pfolio-dek-weight: 300;
	/* La entradilla del artículo (el párrafo «Introducción»), en Minion Display. */
	--pfolio-intro-font: minion-3-display, var(--wp--preset--font-family--serif-display);
	/* El color de los textos en serif (Minion y Freight sobre el papel): igual
	 * que la tinta en modo claro, propio en el oscuro. */
	--pfolio-serif-ink: var(--wp--preset--color--ink);
	/* El de los títulos: en modo oscuro, más claro que el texto. */
	--pfolio-title-ink: var(--wp--preset--color--ink);
	/* La sombra bajo la cabecera. */
	--pfolio-header-shadow: 0 1px 14px rgba(0, 0, 0, 0.06);
}

@media (max-width: 781px) {
	:root {
		--pfolio-indent: var(--wp--custom--gutter);
		--pfolio-header: 76px;
	}
}

/* Modo oscuro (como en Kalunat): sin elección del visitante sigue al
 * sistema; la luna de la cabecera lo fija en <html data-theme>.
 * Cambian los colores que siguen al modo (papel, fondo, tinta, línea). La
 * tinta es la de la interfaz en Acumin; el texto en serif tiene la suya.
 * Noche, carbón y nieve son fijos: lo que va sobre foto no cambia. */
:root[data-theme="dark"] {
	--wp--preset--color--paper: #17191c;
	--wp--preset--color--base: #1d2024;
	--wp--preset--color--ink: #c0c0c0;
	--wp--preset--color--line: #30343a;
	--wp--preset--color--ash: #9a9a9a;
	--pfolio-serif-ink: #d0ccc5;
	--pfolio-title-ink: #eeebe5;
	--pfolio-header-shadow: 0 1px 14px rgba(0, 0, 0, 0.28);
	--pfolio-accent: #fb864d;
	color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--wp--preset--color--paper: #17191c;
		--wp--preset--color--base: #1d2024;
		--wp--preset--color--ink: #c0c0c0;
		--wp--preset--color--line: #30343a;
		--wp--preset--color--ash: #9a9a9a;
		--pfolio-serif-ink: #d0ccc5;
		--pfolio-title-ink: #eeebe5;
		--pfolio-header-shadow: 0 1px 14px rgba(0, 0, 0, 0.28);
		--pfolio-accent: #fb864d;
		color-scheme: dark;
	}
}

body {
	margin: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* Tipografía: títulos (también los que no son encabezados) e interfaz en
 * Acumin: cabecera, rótulos, datos, botones, menú y los textos pequeños. El
 * texto general también va en Acumin y el de los artículos en Minion 3.
 * :root sube la
 * especificidad para ganar a los pesos de cada pieza. */
:root :is(.pfolio-jentry__title, .pfolio-menu__nav, .pfolio-finder__categories) {
	font-family: var(--wp--preset--font-family--display);
}

:root :is(
	.wp-block-site-title,
	.pfolio-nav,
	.pfolio-eyebrow,
	.pfolio-link,
	.pfolio-slide__eyebrow,
	.pfolio-slide__link,
	.pfolio-slide__place,
	.pfolio-hero__scroll,
	.pfolio-hero__dots button,
	.pfolio-index__label,
	.pfolio-jentry__n,
	.pfolio-jentry__lot,
	.pfolio-jentry__place,
	.pfolio-jentry__date,
	.pfolio-journal__pages,
	.pfolio-share,
	.pfolio-post__tags,
	.pfolio-finder__tags,
	.pfolio-footer__social .wp-block-social-link-label,
	.pfolio-footer__contact a,
	.pfolio-footer__credit,
	.pfolio-footer__links,
	.pfolio-footer__totop,
	.pfolio-menu__social a,
	.pfolio-menu__copy,
	.pfolio-post__content figcaption
) {
	font-family: var(--wp--preset--font-family--ui);
	font-weight: 400;
}

/* La serifa (Minion 3, del kit de Adobe Fonts): a 400, el más fino que
 * trae el kit. También las entradillas que acompañan a un título, para
 * que Acumin quede para etiquetas y datos (el tamaño, en cada pieza). */
:root :is(.pfolio-footer__label, .pfolio-footer__contact, .pfolio-menu__label, .pfolio-menu__contact, .pfolio-index__lead, .pfolio-portfolio-head__lead, .pfolio-slide__text, .pfolio-intro__body) {
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 400;
	font-optical-sizing: auto;
}

/* Cabecera, contenido y pie, pegados: cada sección pone su propio aire. */
.wp-site-blocks > * {
	margin-block-start: 0;
}

/* Botones y campos, con la letra del tema y no la del sistema. */
:where(button, input, select, textarea) {
	font-family: inherit;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

:focus-visible {
	outline: 1px solid currentColor;
	outline-offset: 4px;
}

/* Entrada de la página, una cascada por bloques: lo que se ve al cargar sube
 * un poco con un fundido, cada bloque 90ms después del anterior (--pfolio-i);
 * la cabecera ya está en su sitio. Se mueve con «translate» porque el índice
 * es sticky y su «top» no se puede tocar, y el relleno es «backwards» para que
 * al terminar no quede ningún contexto de apilamiento. */
@media (prefers-reduced-motion: no-preference) {
	/* Entradas: cabecera y primeros bloques del texto, con el índice. */
	.pfolio-byline > *,
	.pfolio-shero__intro > *,
	.pfolio-post__aside,
	.pfolio-post__content > :nth-child(-n + 5),
	/* Portada a pantalla completa y archivos. */
	.pfolio-mag-cover__lead > *,
	.pfolio-mag-cover__strip,
	.pfolio-mag-archive-head,
	.pfolio-mag-entries .wp-block-post-template > li:nth-child(-n + 8),
	/* El resto de páginas: los bloques de primer nivel. */
	.wp-site-blocks > main:not(:has(.pfolio-post, .pfolio-mag-cover, .pfolio-mag-archive-head)) > :nth-child(-n + 6) {
		animation: pfolio-block-in 520ms cubic-bezier(0.29, 0.09, 0.22, 0.98) backwards;
		animation-delay: calc(var(--pfolio-i, 0) * 90ms + 50ms);
	}

	:is(.pfolio-byline, .pfolio-shero__intro, .pfolio-mag-cover__lead) > :nth-child(2),
	.wp-site-blocks > main > :nth-child(2),
	.pfolio-mag-entries .wp-block-post-template > li:nth-child(1) {
		--pfolio-i: 1;
	}

	:is(.pfolio-byline, .pfolio-shero__intro, .pfolio-mag-cover__lead) > :nth-child(3),
	.wp-site-blocks > main > :nth-child(3),
	.pfolio-mag-entries .wp-block-post-template > li:nth-child(2) {
		--pfolio-i: 2;
	}

	:is(.pfolio-byline, .pfolio-shero__intro, .pfolio-mag-cover__lead) > :nth-child(4),
	.wp-site-blocks > main > :nth-child(4),
	.pfolio-mag-entries .wp-block-post-template > li:nth-child(3) {
		--pfolio-i: 3;
	}

	.pfolio-byline > :nth-child(5),
	.wp-site-blocks > main > :nth-child(5),
	.pfolio-mag-entries .wp-block-post-template > li:nth-child(4),
	.pfolio-post__aside,
	.pfolio-post__content > :nth-child(1),
	.pfolio-mag-cover__strip {
		--pfolio-i: 4;
	}

	.wp-site-blocks > main > :nth-child(6),
	.pfolio-mag-entries .wp-block-post-template > li:nth-child(5),
	.pfolio-post__content > :nth-child(2) {
		--pfolio-i: 5;
	}

	.pfolio-mag-entries .wp-block-post-template > li:nth-child(6),
	.pfolio-post__content > :nth-child(3) {
		--pfolio-i: 6;
	}

	.pfolio-mag-entries .wp-block-post-template > li:nth-child(7),
	.pfolio-post__content > :nth-child(4) {
		--pfolio-i: 7;
	}

	.pfolio-mag-entries .wp-block-post-template > li:nth-child(8),
	.pfolio-post__content > :nth-child(5) {
		--pfolio-i: 8;
	}
}

@keyframes pfolio-block-in {
	from {
		opacity: 0;
		translate: 0 12px;
	}
}