/* ==========================================================================
   TRRM — Home v1
   Paleta plana, sin opacidad ni transparencias en ningún lado. Los colores
   (fondo/texto/fondo del overlay/texto del overlay) y los tamaños de fuente
   de acá abajo son solo el FALLBACK: los valores reales que se ven en el
   sitio se editan desde wp-admin en TRRM → Diseño y pisan estas variables
   con un <style> inline (ver trrm-core/inc/settings-design.php). También se
   puede pisar el color de una página puntual desde el cuadro "Colores de
   esta página" al editarla (ver trrm-core/inc/meta-box-page-colors.php).
   El overlay de menú siempre usa el color OPUESTO al de la página en la
   que está (ver --trrm-bg-alt / --trrm-text-alt) para que se note que es
   una capa distinta, sin usar transparencia para lograrlo.
   ========================================================================== */

/* Tipografía: Sora, cargada desde Google Fonts (ver functions.php →
   trrm_enqueue_assets). Si en algún momento preferís auto-hostear la
   fuente en vez de depender de Google Fonts, descargá los .woff2 de
   https://fonts.google.com/specimen/Sora, ponelos en /assets/fonts/ y
   descomentá este bloque (y sacá el wp_enqueue_style de trrm-font-sora
   en functions.php):
*/
/*
@font-face {
	font-family: 'Sora';
	src: url('../fonts/sora-regular.woff2') format('woff2');
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: 'Sora';
	src: url('../fonts/sora-semibold.woff2') format('woff2');
	font-weight: 600;
	font-display: swap;
}
*/

:root {
	--trrm-bg: #f3f3f3;
	--trrm-text: #000000;
	--trrm-bg-alt: #000000;
	--trrm-text-alt: #f3f3f3;
	--trrm-font: 'Sora', 'Helvetica Neue', Arial, sans-serif;
	--trrm-header-h: 168px;

	/* Tamaños. Editables desde wp-admin en TRRM → Diseño (logo: TRRM →
	   Ajustes generales), que pisa estos valores con un <style> inline (ver
	   trrm-core/inc/settings-design.php) — estos son solo el fallback si
	   todavía no se guardó nada ahí. Cada título tiene su propia variable,
	   no comparten una única escala. */
	--trrm-fs-base: 16px;
	--trrm-fs-small: 13px;
	--trrm-fs-intro: 32px;
	--trrm-fs-card-title: 24px;
	--trrm-fs-archive-title: 56px;
	--trrm-fs-proyecto-title: 56px;
	--trrm-logo-h: 56px;

	/* Interlineado (line-height) e interletrado (letter-spacing). Uno para
	   texto normal (párrafos, footer, nav) y otro para títulos grandes
	   (bajada del Home, títulos de proyecto/tarjeta/listado). */
	--trrm-lh-base: 1.5;
	--trrm-lh-heading: 1.2;
	--trrm-ls-base: 0em;
	--trrm-ls-heading: 0em;
}

/* Sección invertida (About): se agrega al <body> vía body_class cuando la
   página usa el Template "TRRM — About (invertido)". Swapea las 4 variables
   así todo el CSS de abajo (que solo usa var(--trrm-bg/--trrm-text)) se
   invierte solo, sin duplicar reglas. */
body.trrm-inverted {
	--trrm-bg: #000000;
	--trrm-text: #ffce00;
	--trrm-bg-alt: #ffce00;
	--trrm-text-alt: #000000;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--trrm-bg);
	color: var(--trrm-text);
	font-family: var(--trrm-font);
	font-size: var(--trrm-fs-base);
	line-height: var(--trrm-lh-base);
	letter-spacing: var(--trrm-ls-base);
	-webkit-font-smoothing: antialiased;
}

/* Títulos grandes: interlineado/interletrado propio (ver TRRM → Diseño →
   Espaciado), en vez de heredar el de párrafo del body. */
.trrm-intro__text,
.trrm-grid-item__title,
.trrm-proyecto__title,
.trrm-work-archive__title {
	line-height: var(--trrm-lh-heading);
	letter-spacing: var(--trrm-ls-heading);
}

a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }

/* ---------------- Header ---------------- */

.trrm-header {
	position: fixed;
	top: 0; left: 0; right: 0;
	height: var(--trrm-header-h);
	display: flex;
	align-items: center;
	gap: 40px;
	padding: 0 40px;
	z-index: 100;
	background: var(--trrm-bg);
	color: var(--trrm-text);
}

.trrm-logo {
	display: flex;
	align-items: center;
	font-weight: 700;
	font-size: 20px;
	letter-spacing: 0.08em;
	color: var(--trrm-text);
	flex-shrink: 0;
}

/* Alto real (no un techo) del logo en imagen, según lo elegido en Ajustes
   > TRRM ("Alto del logo (px)"). Tiene que ser "height" y no "max-height":
   con max-height, si la imagen subida ya era más chica que el valor
   elegido, nunca crecía — quedaba igual pase lo que pase. Es independiente
   de --trrm-header-h para que el logo no cambie solo si se le da más aire
   al header. */
.trrm-logo__image {
	height: var(--trrm-logo-h);
	width: auto;
	max-width: 100%;
	display: block;
}

.trrm-header__nav {
	margin-left: auto;
	display: flex;
	gap: 28px;
	font-size: calc(var(--trrm-fs-small) + 1px);
}

.trrm-header__nav a { color: var(--trrm-text); }
.trrm-header__nav a:hover { text-decoration: underline; }

.trrm-menu-toggle {
	width: 32px; height: 20px;
	background: none; border: none;
	display: flex; flex-direction: column; justify-content: space-between;
	cursor: pointer; padding: 0;
}
.trrm-menu-toggle span {
	display: block; height: 2px; width: 100%;
	background: var(--trrm-text);
	transition: transform .3s ease;
}
.trrm-menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.trrm-menu-toggle[aria-expanded="true"] span:nth-child(2) { transform: scaleX(0); }
.trrm-menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* ---------------- Nav overlay (siempre el color opuesto al de la página) --- */

/* Estructura calcada de buck.co: al abrir el menú, el listado de links
   grande queda arriba a la izquierda (mismo margen que el resto del sitio)
   y abajo una fila con copyright a la izquierda y redes a la derecha —
   eso es lo que hace de "footer" ahí, porque buck.co no tiene una franja
   de footer visible al pie de la página: todo ese contenido vive en este
   mismo menú overlay. */
.trrm-nav-overlay {
	position: fixed; inset: 0;
	background: var(--trrm-bg-alt);
	color: var(--trrm-text-alt);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: calc(var(--trrm-header-h) + 20px) 40px 40px;
	visibility: hidden;
	transform: translateY(-100%);
	transition: transform .35s ease, visibility 0s linear .35s;
	z-index: 90;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
}
.trrm-nav-overlay.is-open {
	visibility: visible;
	transform: translateY(0);
	transition: transform .35s ease;
}
.trrm-nav-overlay__main { margin: auto 0; }
.trrm-nav-overlay__list {
	list-style: none; margin: 0; padding: 0;
	text-align: left;
}
.trrm-nav-overlay__list li { margin: 2px 0; }
.trrm-nav-overlay__list a {
	display: inline-block;
	font-size: clamp(32px, 6vw, 64px);
	font-weight: 400;
	line-height: 1.28;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	color: var(--trrm-text-alt);
}
.trrm-nav-overlay__list a:hover,
.trrm-nav-overlay__list .current-menu-item > a {
	text-decoration: underline;
	text-underline-offset: 10px;
}

.trrm-nav-overlay__footer {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 16px;
	padding-top: 40px;
	font-size: var(--trrm-fs-small);
}
.trrm-nav-overlay__copy { margin: 0; opacity: .7; }
.trrm-nav-overlay__social { display: flex; gap: 24px; }
.trrm-nav-overlay__social a:hover { text-decoration: underline; }

/* ---------------- Work feed: grilla asimétrica (layout de buck.co) ----
   Medido directamente sobre buck.co: es una grilla de 3 columnas donde
   cada tarjeta ocupa 1 o 2 columnas (angosta 1/3 o ancha 2/3), y ese
   patrón se alterna cada fila: fila 1 = angosta+ancha, fila 2 =
   ancha+angosta, fila 3 = angosta+ancha, etc. Scroll vertical normal. */

.trrm-home { padding-top: var(--trrm-header-h); }

/* Bajada del Home: mismo margen izquierdo que la grilla de abajo, texto
   grande, y el mismo tipo de "aire" que tiene en buck.co antes de que
   arranque el feed de trabajos. */
.trrm-intro {
	padding: 64px 40px 96px;
}
.trrm-intro__text {
	margin: 0;
	max-width: 680px;
	font-size: clamp(calc(var(--trrm-fs-intro) * 0.7), 2.6vw, var(--trrm-fs-intro));
	font-weight: 500;
}

.trrm-work-feed--empty {
	padding: 120px 40px;
	text-align: center;
}
.trrm-work-feed--empty a { text-decoration: underline; }

.trrm-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 96px 24px;
	padding: 60px 40px 100px;
}

/* Patrón alternado cada 4 tarjetas (= 2 filas): angosta, ancha, ancha, angosta. */
.trrm-grid-item:nth-child(4n+1) { grid-column: span 1; }
.trrm-grid-item:nth-child(4n+2) { grid-column: span 2; }
.trrm-grid-item:nth-child(4n+3) { grid-column: span 2; }
.trrm-grid-item:nth-child(4n)   { grid-column: span 1; }

.trrm-grid-item {
	display: flex;
	flex-direction: column;
	/* Bug de Safari/WebKit: en una grilla CSS, por default un ítem no se
	   achica más allá del tamaño "natural" de su contenido (acá, la imagen
	   de 1200px de ancho real). Chrome sí lo achica igual; Safari no, y por
	   eso una columna (la angosta, 1 de 3) se queda pegada en un tamaño
	   fijo mientras las demás sí escalan al angostar la ventana. min-width:0
	   le dice al navegador que puede ignorar ese tamaño "natural" y achicar
	   el ítem al ancho real de su columna. */
	min-width: 0;
}

.trrm-grid-item__media {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--trrm-bg-alt);
	margin-bottom: 24px;
	min-width: 0;
}
.trrm-grid-item__image,
.trrm-grid-item__video {
	width: 100%; height: 100%;
	object-fit: cover;
}
.trrm-grid-item__image { transition: transform .6s ease; }
.trrm-grid-item__image--placeholder { background: var(--trrm-bg-alt); }
.trrm-grid-item:hover .trrm-grid-item__image { transform: scale(1.04); }

/* El video de preview se muestra con display, no con opacity. */
.trrm-grid-item__video {
	position: absolute; inset: 0;
	display: none;
}
.trrm-grid-item.is-hovering .trrm-grid-item__video { display: block; }

.trrm-grid-item__caption {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: 20px;
}

.trrm-grid-item__eyebrow {
	display: block;
	font-size: var(--trrm-fs-small);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
.trrm-grid-item__title {
	font-size: clamp(calc(var(--trrm-fs-card-title) * 0.75), 1.6vw, var(--trrm-fs-card-title));
	font-weight: 600;
	margin: 0 0 8px;
}
.trrm-grid-item__desc {
	font-size: calc(var(--trrm-fs-base) - 2px);
	margin: 0;
	/* Hereda line-height/letter-spacing del body (--trrm-lh-base / --trrm-ls-base). */
}

/* ---------------- Proyecto / archive genéricos ---------------- */

.trrm-proyecto,
.trrm-work-archive,
.trrm-page,
.trrm-generic {
	padding: calc(var(--trrm-header-h) + 60px) 40px 100px;
	max-width: 1100px;
	margin: 0 auto;
}
/* Encabezado calcado de buck.co: una columna vacía a la izquierda (el
   mismo "gutter" editorial que usan ahí) y título/bajada recién arrancando
   más adentro, no pegados al margen de la página — nada de cajas ni
   bordes, todo el peso lo lleva la tipografía. */
.trrm-proyecto__header {
	display: grid;
	grid-template-columns: 0.7fr 1.3fr 1.3fr;
	gap: 40px;
	align-items: end;
	margin-bottom: 8px;
}
.trrm-proyecto__header-left { grid-column: 2; }
.trrm-proyecto__header .trrm-proyecto__desc { grid-column: 3; }
.trrm-proyecto__eyebrow {
	display: block;
	font-weight: 400;
	font-size: var(--trrm-fs-small);
	opacity: .5;
	margin-bottom: 14px;
}
.trrm-proyecto__title {
	font-weight: 400;
	line-height: 1.04;
	font-size: clamp(calc(var(--trrm-fs-proyecto-title) * 0.57), 5vw, var(--trrm-fs-proyecto-title));
	margin: 0 0 18px;
}
.trrm-proyecto__desc {
	max-width: 46ch;
	font-size: var(--trrm-fs-base);
	opacity: .65;
}

/* Tags (Film / Direction / 2026...) como texto plano separado por "/",
   sin cápsulas ni bordes. */
.trrm-proyecto__tags {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin: 0;
	padding: 0;
}
.trrm-proyecto__tags li {
	font-size: var(--trrm-fs-small);
	opacity: .5;
}
.trrm-proyecto__tags li:not(:last-child)::after {
	content: '/';
	margin: 0 8px;
}

/* Portada + video: se sale del ancho máximo de .trrm-proyecto (que tiene
   padding lateral y max-width:1100px) para ocupar todo el ancho de la
   ventana. Trick estándar: ancho = 100vw, con margen negativo igual a la
   mitad de la diferencia entre el viewport y el propio elemento.
   La portada sale a color por defecto. El video no se carga hasta tocar
   el botón de play (ver main.js): antes de eso solo hay una imagen de
   fondo fija, más liviano que un iframe/video en cada visita. */
.trrm-proyecto__hero {
	position: relative;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	margin-top: 40px;
	margin-bottom: 60px;
	height: 86vh;
	min-height: 480px;
	max-height: 900px;
	overflow: hidden;
	background: var(--trrm-bg-alt);
	display: flex;
	align-items: flex-end;
}
.trrm-proyecto__hero-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.trrm-proyecto__hero.is-playing .trrm-proyecto__hero-bg { display: none; }

.trrm-proyecto__play {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 88px; height: 88px;
	border-radius: 999px;
	border: 1px solid var(--trrm-text-alt);
	background: var(--trrm-bg-alt);
	color: var(--trrm-text-alt);
	font-size: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding-left: 4px; /* centra visualmente el triángulo de "play" */
}
/* Ya no es un overlay adentro del hero: es un <p> aparte, debajo, chico
   e itálica — como el caption que buck.co pone bajo cada video. */
.trrm-proyecto__hero-caption {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 24px;
	margin: 20px 0 70px;
	color: var(--trrm-text);
	font-style: italic;
	font-size: var(--trrm-fs-small);
	opacity: .55;
}
.trrm-proyecto__hero-caption span {
	font-style: normal;
	white-space: nowrap;
}

/* Una vez tocado el play, se arma acá un <iframe> (YouTube/Vimeo) o
   <video> (mp4) por JS. Mismo truco de "cubrir" que un video de fondo. */
.trrm-proyecto__hero-player {
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
}
iframe.trrm-proyecto__hero-player {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100vw;
	height: 56.25vw; /* 16:9 */
	min-height: 100%;
	min-width: 177.78vh; /* 16:9 sobre el alto */
	transform: translate(-50%, -50%);
}

/* ---------------- Ficha técnica + Bajada ---------------- */
.trrm-proyecto__ficha-wrap { margin-bottom: 60px; }
.trrm-proyecto__ficha {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 24px 32px;
	margin: 0;
	max-width: 900px;
}
.trrm-proyecto__ficha-item dt {
	font-size: var(--trrm-fs-small);
	font-weight: 400;
	opacity: .5;
	margin-bottom: 6px;
}
.trrm-proyecto__ficha-item dd { margin: 0; font-size: calc(var(--trrm-fs-base) - 1px); }
.trrm-proyecto__bajada {
	font-style: italic;
	font-size: calc(var(--trrm-fs-base) * 1.3);
	max-width: 760px;
	margin: 32px 0 0;
	line-height: var(--trrm-lh-heading);
}

/* ---------------- Bloques de contenido: imagen + texto intercalados ----
   "Secuencia de imágenes" y "Escenas" (dos repeaters separados en el
   panel) se renderizan acá como un solo flujo intercalado — imagen,
   texto, imagen, texto... — en vez de todas las imágenes juntas y recién
   después todo el texto. Cada escena quedó simplificada a un párrafo
   simple (sin el heading "Scene 01 / TÍTULO" que tenía antes), alineado
   en la misma columna que la descripción del header, para que toda la
   página lea sobre una sola línea vertical de texto. */
.trrm-proyecto__bloques { display: flex; flex-direction: column; gap: 60px; margin-bottom: 60px; }

.trrm-proyecto__secuencia-completa img { width: 100%; height: auto; display: block; }
/* Las parejas de imágenes salen a todo el ancho de la ventana, igual que
   el hero — así queda igual que la galería de "closer look" de buck.co,
   en vez de quedar encajonadas adentro del ancho de lectura. */
.trrm-proyecto__secuencia-par {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
.trrm-proyecto__secuencia-par img { width: 100%; height: auto; display: block; }

.trrm-proyecto__escena {
	display: grid;
	grid-template-columns: 0.7fr 1.3fr 1.3fr;
	gap: 40px;
}
.trrm-proyecto__escena-subtitulo,
.trrm-proyecto__escena-parrafo {
	grid-column: 3;
	max-width: 46ch;
	margin: 0 0 16px;
}
.trrm-proyecto__escena-subtitulo { font-size: calc(var(--trrm-fs-base) * 1.15); font-weight: 500; opacity: .85; }
.trrm-proyecto__escena-parrafo { opacity: .65; }
.trrm-proyecto__escena-parrafo:last-child,
.trrm-proyecto__escena-subtitulo:last-child { margin-bottom: 0; }

/* ---------------- Cita de cierre ---------------- */
.trrm-proyecto__cita {
	font-style: italic;
	font-size: clamp(24px, 3.2vw, calc(var(--trrm-fs-intro) * 1.1));
	line-height: var(--trrm-lh-heading);
	max-width: 900px;
	margin: 0 0 60px;
}

/* ---------------- Antes / después ---------------- */
.trrm-proyecto__ad { margin-bottom: 60px; }
.trrm-proyecto__ad-heading { display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap; margin-bottom: 8px; }
.trrm-proyecto__ad-heading h2 { font-size: calc(var(--trrm-fs-base) * 1.4); font-weight: 400; margin: 0; }
.trrm-proyecto__ad-tags { font-size: var(--trrm-fs-small); opacity: .5; }
.trrm-proyecto__ad-lateral {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	font-size: var(--trrm-fs-small);
}
.trrm-proyecto__ad-lateral li { margin-bottom: 4px; }
.trrm-proyecto__ad-toma { margin: 0 0 40px; }
.trrm-proyecto__ad-toma-frame {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--trrm-bg-alt);
}
.trrm-proyecto__ad-toma-despues,
.trrm-proyecto__ad-toma-antes {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* La imagen "antes" se recorta con clip-path (no con un wrapper angosto),
   así queda exactamente alineada en el mismo tamaño/posición que la de
   "después" — solo cambia cuánto se ve, no cómo se escala. JS actualiza
   el clip-path según el slider. */
.trrm-proyecto__ad-toma-antes { clip-path: inset(0 50% 0 0); }
.trrm-proyecto__ad-toma-range {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0; /* el input queda invisible pero clickeable/arrastrable sobre toda la imagen */
	cursor: ew-resize;
}
.trrm-proyecto__ad-toma figcaption {
	display: flex;
	gap: 10px;
	margin-top: 12px;
	font-size: var(--trrm-fs-small);
}

/* ---------------- Prensa ---------------- */
.trrm-proyecto__prensa { margin-bottom: 60px; max-width: 700px; }
.trrm-proyecto__prensa h2 {
	font-size: var(--trrm-fs-small);
	font-weight: 400;
	opacity: .5;
	margin: 0 0 16px;
}
.trrm-proyecto__prensa ul { list-style: none; margin: 0; padding: 0; }
.trrm-proyecto__prensa li { padding: 10px 0; font-size: calc(var(--trrm-fs-base) - 1px); }
.trrm-proyecto__prensa a:hover { text-decoration: underline; }

/* Contenido enriquecido (lo que se carga en el editor del proyecto):
   ancho de lectura cómodo, no todo el ancho de la página, con aire entre
   bloques. */
.trrm-proyecto__content {
	max-width: 760px;
	font-size: calc(var(--trrm-fs-base) * 1.05);
}
.trrm-proyecto__content > * + * { margin-top: 28px; }
.trrm-proyecto__content img,
.trrm-proyecto__content video {
	width: 100%;
	height: auto; /* a diferencia del hero, acá no se recorta nada */
	display: block;
}
.trrm-proyecto__content h2,
.trrm-proyecto__content h3 {
	font-size: calc(var(--trrm-fs-base) * 1.4);
	line-height: 1.3;
	margin: 0;
}
/* Un link de YouTube/Vimeo pegado solo en una línea, adentro del
   contenido, WordPress lo convierte solo en un bloque de "embed" — este
   CSS es lo que lo hace responsivo (proporción 16:9 fija, sea cual sea el
   ancho de pantalla), sin depender de que el core cargue sus propios
   estilos de bloque, que este theme no encola. */
.trrm-proyecto__content .wp-block-embed__wrapper {
	position: relative;
	height: 0;
	padding-bottom: 56.25%;
	overflow: hidden;
}
.trrm-proyecto__content .wp-block-embed__wrapper iframe {
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.trrm-proyecto__link { margin-top: 40px; }
.trrm-proyecto__link a { text-decoration: underline; }

/* ---------------- Créditos: lista en 3 columnas, tipo masonry ---------------- */
.trrm-proyecto__creditos {
	margin-top: 80px;
	max-width: none;
	padding-top: 40px;
}
.trrm-proyecto__creditos h2 {
	font-size: var(--trrm-fs-small);
	font-weight: 400;
	opacity: .5;
	margin: 0 0 24px;
}
.trrm-proyecto__creditos-list {
	list-style: none;
	margin: 0;
	padding: 0;
	column-count: 3;
	column-gap: 32px;
}
.trrm-proyecto__creditos-list li {
	display: block;
	break-inside: avoid;
	padding: 0 0 24px;
}
.trrm-proyecto__creditos-role {
	display: block;
	font-size: var(--trrm-fs-small);
	opacity: .5;
	margin-bottom: 4px;
}
.trrm-proyecto__creditos-name { display: block; font-size: calc(var(--trrm-fs-base) - 1px); }

/* ---------------- Próximo proyecto: texto + peek de la portada siguiente
   El link de texto cuelga del lado derecho de la página (como en buck.co)
   con el texto adentro alineado a la izquierda. Justo debajo, a todo el
   ancho de la ventana, asoma la portada del próximo proyecto — un
   adelanto de la página siguiente, como pidió Luciano. */
.trrm-proyecto__next {
	display: block;
	margin: 100px 0 10px auto;
	max-width: 480px;
	text-align: left;
}
.trrm-proyecto__next-eyebrow {
	display: block;
	font-size: var(--trrm-fs-small);
	font-weight: 400;
	opacity: .5;
	margin-bottom: 12px;
}
.trrm-proyecto__next-title {
	display: inline-block;
	font-size: clamp(28px, 5vw, 48px);
	font-weight: 400;
	margin: 0;
	transition: opacity .3s ease;
}
.trrm-proyecto__next:hover .trrm-proyecto__next-title { opacity: .55; }

.trrm-proyecto__next-peek {
	display: block;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	margin-top: 60px;
	height: 72vh;
	min-height: 360px;
	max-height: 760px;
	overflow: hidden;
}
.trrm-proyecto__next-peek img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .6s ease;
}
.trrm-proyecto__next-peek:hover img { transform: scale(1.03); }

.trrm-work-archive__title {
	padding: calc(var(--trrm-header-h) + 20px) 40px 0;
	font-size: clamp(calc(var(--trrm-fs-archive-title) * 0.57), 5vw, var(--trrm-fs-archive-title));
}

/* ---------------- Footer ---------------- */

.trrm-footer {
	padding: 60px 40px 40px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.trrm-footer__contact { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.trrm-footer__email { font-size: calc(var(--trrm-fs-base) * 1.25); }
.trrm-footer__social { display: flex; gap: 20px; font-size: calc(var(--trrm-fs-small) + 1px); }
.trrm-footer__social a:hover { text-decoration: underline; }
.trrm-footer__copy { font-size: var(--trrm-fs-small); margin: 0; }

/* ---------------- Responsive ---------------- */

@media (max-width: 860px) {
	/* --trrm-logo-h se pisa acá solo como fallback (antes de que cargue el
	   <style> inline de wp-admin); el valor real se edita en TRRM → Ajustes
	   generales → "Alto del logo — celular (px)", separado del de
	   escritorio para que no se vea gigante en pantallas chicas. */
	:root { --trrm-header-h: 108px; --trrm-logo-h: 40px; }
	.trrm-header { gap: 20px; padding: 0 20px; }
	.trrm-logo__image { max-width: 48vw; }

	.trrm-intro { padding: 40px 20px 56px; }

	.trrm-grid {
		grid-template-columns: 1fr;
		gap: 64px;
		padding: 40px 20px 80px;
	}
	.trrm-grid-item { grid-column: span 1 !important; }

	/* En mobile el caption se apila: eyebrow, después título + descripción,
	   todo a ancho completo — como en buck.co/ — en vez de las 2 columnas
	   angostas que usa el desktop. */
	.trrm-grid-item__caption {
		display: block;
	}
	.trrm-grid-item__eyebrow { margin-bottom: 10px; }

	.trrm-footer { padding: 40px 20px; }
	.trrm-proyecto, .trrm-work-archive, .trrm-page, .trrm-generic { padding-left: 20px; padding-right: 20px; }

	.trrm-proyecto__header { grid-template-columns: 1fr; gap: 20px; align-items: start; }
	.trrm-proyecto__header-left,
	.trrm-proyecto__header .trrm-proyecto__desc { grid-column: 1; }
	.trrm-proyecto__desc { max-width: none; }

	.trrm-proyecto__hero { height: 62vh; min-height: 320px; margin: 28px 0 40px; }
	.trrm-proyecto__hero-caption { margin: 14px 0 40px; flex-direction: column; gap: 6px; }
	.trrm-proyecto__play { width: 64px; height: 64px; font-size: 16px; }

	.trrm-proyecto__creditos { margin-top: 50px; }
	.trrm-proyecto__creditos-list { column-count: 1; }

	.trrm-proyecto__next { margin: 60px 0 10px; max-width: none; }

	.trrm-proyecto__secuencia-par {
		grid-template-columns: 1fr;
		width: 100vw;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
		gap: 4px;
	}
	.trrm-proyecto__escena { grid-template-columns: 1fr; gap: 12px; }
	.trrm-proyecto__escena-subtitulo,
	.trrm-proyecto__escena-parrafo { grid-column: 1; max-width: none; }
	.trrm-proyecto__bloques { gap: 40px; margin-bottom: 40px; }
	.trrm-proyecto__ad-heading { flex-direction: column; gap: 6px; }

	.trrm-proyecto__next-peek { height: 46vh; min-height: 260px; margin-top: 40px; }
}

/* Mobile navigation — quiet black canvas, oversized editorial links. */
.trrm-nav-overlay__eyebrow,.trrm-nav-overlay__contact{display:none}
.trrm-menu-toggle:focus-visible{outline:1px solid currentColor;outline-offset:7px}
@media(max-width:860px){
 body .trrm-header{height:88px;padding:0 24px;gap:20px}
 body .trrm-header__nav{display:none}
 body .trrm-menu-toggle{margin-left:auto;width:44px;height:44px;padding:12px 6px}
 body .trrm-logo__image{height:42px;width:auto}
 body.admin-bar .trrm-header{top:32px}
}
@media all{
 body.trrm-menu-open .trrm-header{background:#111210!important;color:#f0efe9!important}
 body.trrm-menu-open .trrm-logo{color:#f0efe9}
 body.trrm-menu-open .trrm-logo__image{filter:brightness(0) invert(1)!important}
 body.trrm-menu-open .trrm-menu-toggle span{background:#f0efe9}
 body .trrm-nav-overlay{top:0;height:100dvh;background:#111210;color:#f0efe9;padding:124px 24px max(26px,env(safe-area-inset-bottom));transform:translateY(-16px);opacity:0;transition:opacity .3s ease,transform .45s cubic-bezier(.22,1,.36,1),visibility 0s .45s}
 body.admin-bar .trrm-nav-overlay{top:32px;height:calc(100dvh - 32px)}
 body .trrm-nav-overlay.is-open{opacity:1;transform:none;transition:opacity .3s ease,transform .45s cubic-bezier(.22,1,.36,1)}
 .trrm-nav-overlay__main{margin:auto 0;padding:22px 0 52px}
 .trrm-nav-overlay__eyebrow{display:block;font-size:10px;line-height:1.5;letter-spacing:.02em;color:#9b9d95;margin:0 0 30px;max-width:22em}
 .trrm-nav-overlay__list li{margin:0;overflow:hidden}
 body .trrm-nav-overlay__list a{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:8px 0;font-size:clamp(40px,15.6vw,100px);font-weight:400;line-height:1.08;letter-spacing:-.065em;text-transform:none;color:#f0efe9;transform:translateY(110%);transition:transform .6s cubic-bezier(.22,1,.36,1),color .2s}
 .trrm-nav-overlay.is-open .trrm-nav-overlay__list a{transform:none;transition-delay:.08s}
 .trrm-nav-overlay.is-open .trrm-nav-overlay__list li:nth-child(2) a{transition-delay:.13s}
 .trrm-nav-overlay.is-open .trrm-nav-overlay__list li:nth-child(3) a{transition-delay:.18s}
 .trrm-nav-overlay__list a:after{content:'↗';font-size:.43em;letter-spacing:0;font-weight:400;color:#8f9288}
 body .trrm-nav-overlay__list a:hover,body .trrm-nav-overlay__list .current-menu-item>a{color:#a9ac9f;text-decoration:none}
 .trrm-nav-overlay__list a:focus-visible{outline:1px solid #a9ac9f;outline-offset:-1px}
 .trrm-nav-overlay__footer{display:grid;grid-template-columns:1fr auto;align-items:end;gap:30px 16px;padding-top:0;flex-shrink:0}
 .trrm-nav-overlay__contact{display:flex;flex-direction:column;gap:10px;grid-column:1/-1;font-size:15px;letter-spacing:-.025em}
 .trrm-nav-overlay__contact>span{font-size:10px;color:#9b9d95;letter-spacing:0}
 .trrm-nav-overlay__contact>a{display:flex;justify-content:space-between;gap:12px}
 .trrm-nav-overlay__copy{font-size:8px;line-height:1.6;max-width:23em;color:#85877e;opacity:1}
 .trrm-nav-overlay__social{font-size:10px;gap:12px}
}
@media(max-width:782px){body.admin-bar .trrm-header{top:46px!important}body.admin-bar .trrm-nav-overlay{top:46px;height:calc(100dvh - 46px)}}
@media(max-width:860px) and (max-height:600px){body .trrm-nav-overlay{padding-top:100px}.trrm-nav-overlay__main{padding:10px 0 25px}.trrm-nav-overlay__eyebrow{margin-bottom:12px}body .trrm-nav-overlay__list a{font-size:40px}.trrm-nav-overlay__footer{gap:16px}}
@media(prefers-reduced-motion:reduce){body .trrm-nav-overlay,body .trrm-nav-overlay__list a,body .trrm-menu-toggle span{transition:none!important;transform:none}}

/* Draw navigation arrows as geometry: iOS must never render them as emoji. */
@media all{
 .trrm-nav-overlay__list a:after,.trrm-nav-overlay__contact>a:after{content:'';display:block;flex:0 0 22px;width:22px;height:22px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 19L19 5M5 5h14v14' fill='none' stroke='black' stroke-width='1.3'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 19L19 5M5 5h14v14' fill='none' stroke='black' stroke-width='1.3'/%3E%3C/svg%3E") center/contain no-repeat}
 .trrm-nav-overlay__contact>a>span{display:none}
 .trrm-nav-overlay__contact>a:after{flex-basis:15px;width:15px;height:15px;color:#8f9288}
 .trrm-nav-overlay__list a{align-items:center!important}
 .trrm-nav-overlay.is-open .trrm-nav-overlay__list li:nth-child(4) a{transition-delay:.23s}
}

.pt-credits dd{white-space:pre-line}

/* Keep each home pair on shared image/caption rows. */
.trrm-grid-row{display:contents}
.trrm-grid-item.is-narrow{grid-column:span 1}
.trrm-grid-item.is-wide{grid-column:span 2}
@media(min-width:861px){
 .trrm-home .trrm-grid-row{display:grid;grid-column:1/-1;grid-template-columns:minmax(0,1fr) minmax(0,2fr);column-gap:24px;row-gap:0;align-items:stretch}
 .trrm-home .trrm-grid-row--reverse{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
 .trrm-home .trrm-grid-row>.trrm-grid-item{grid-column:auto}
 .trrm-home .trrm-grid-row>.is-wide{display:grid;grid-row:1/span 2;grid-template-rows:subgrid;row-gap:0;min-width:0}
 .trrm-home .is-wide .trrm-grid-item__media{grid-row:1;margin-bottom:0;align-self:stretch;width:100%;max-width:100%}
 .trrm-home .is-wide .trrm-grid-item__caption{grid-row:2;padding-top:24px}
 .trrm-home .trrm-grid-row>.is-narrow{grid-row:1;min-height:0}
 .trrm-home .is-narrow .trrm-grid-item__media{flex-shrink:0}
 .trrm-home .is-narrow .trrm-grid-item__caption{display:flex;flex:1;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:32px}
 .trrm-home .is-narrow .trrm-grid-item__text{max-width:34ch}
 .trrm-home .trrm-grid-row:has(>.trrm-grid-item:only-child){grid-template-columns:1fr 2fr}
 .trrm-home .trrm-grid-row>.trrm-grid-item:only-child .trrm-grid-item__caption{flex:0;gap:24px}
}

/* Desktop uses the same navigation canvas with more generous typography. */
@media(min-width:861px){
 body.trrm-menu-open .trrm-header__nav{visibility:hidden}
 body .trrm-nav-overlay{padding:calc(var(--trrm-header-h) + 36px) 40px 32px}
 .trrm-nav-overlay__main{width:min(760px,70vw);padding:20px 0 36px}
 .trrm-nav-overlay__eyebrow{font-size:13px;max-width:none;margin-bottom:24px}
 body .trrm-nav-overlay__list a{font-size:clamp(56px,8vw,112px);padding:2px 0;line-height:1.05}
 .trrm-nav-overlay__list a:after{flex-basis:32px;width:32px;height:32px}
 .trrm-nav-overlay__footer{grid-template-columns:1fr auto;gap:20px 40px}
 .trrm-nav-overlay__contact{font-size:22px;max-width:760px}
 .trrm-nav-overlay__contact>span,.trrm-nav-overlay__social{font-size:13px}
 .trrm-nav-overlay__copy{font-size:11px;max-width:none}
}

/* Header and overlay share the menu edited in Appearance > Menus. */
.trrm-header__nav>ul{display:flex;align-items:center;gap:28px;list-style:none;margin:0;padding:0}
.trrm-header__nav>ul>li{margin:0;padding:0}
.trrm-header__nav>ul>li>a{font-size:inherit;text-transform:none;letter-spacing:normal;line-height:inherit;color:inherit}
.trrm-header__nav>ul>li>a:after{display:none}

/* Project labels use their authored casing, including brand names. */
.trrm-grid-item__eyebrow{ text-transform:none;letter-spacing:0; }
:is(.editorial-study,.trrm-cinema,.trrm-atelier) :is(h1,h2,.cinema-eyebrow,.cinema-label,.cinema-chapter,.cinema-cover-caption,.atelier-section-label){text-transform:none}

/* Mobile portfolio previews: portrait crop without stretching the source. */
@media (max-width: 860px) {
  .trrm-home .trrm-grid-item__media { aspect-ratio: 4 / 5; }
  .trrm-home .trrm-grid-item__image,
  .trrm-home .trrm-grid-item__video { width: 100%; height: 100%; object-fit: cover; object-position: center; }
}

/* A final unpaired project keeps the narrow-card composition on desktop. */
@media (min-width: 861px) {
 .trrm-home .trrm-grid-row > .trrm-grid-item:only-child { display:flex; flex-direction:column; grid-row:auto; aspect-ratio:8 / 9; }
 .trrm-home .trrm-grid-row > .trrm-grid-item:only-child .trrm-grid-item__media { flex-shrink:0; margin-bottom:24px; }
 .trrm-home .trrm-grid-row > .trrm-grid-item:only-child .trrm-grid-item__caption { display:flex; flex:1; flex-direction:column; align-items:flex-start; justify-content:space-between; gap:32px; padding-top:0; }
 .trrm-home .trrm-grid-row > .trrm-grid-item:only-child .trrm-grid-item__text { max-width:34ch; }
}

/* Lighter navigation lettering on mobile. */
@media (max-width: 860px) {
  body .trrm-nav-overlay__list a { font-weight: 300; }
}

/* Match the desktop navigation to the mobile Light weight. */
@media (min-width: 861px) {
  body .trrm-nav-overlay__list a { font-weight: 300; }
}