* {box-sizing: border-box;}
/* reserva siempre el ancho de la scrollbar vertical, tenga o no la pagina
   contenido para scrollear. Sin esto, main/aside (que son porcentajes del
   viewport) median distinto en la home (alta, con scrollbar) que en about/
   press/publications (mas cortas, sin scrollbar) -- unos px de diferencia
   que se notaban como si el menu "se moviera" al cambiar de pagina */
html {overflow-y: scroll;}
/* visible solo para lectores de pantalla / SEO, no ocupa espacio en pantalla */
.sr-only {position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0,0,0,0);white-space: nowrap;border: 0;}
body {margin: 0;font-family: "Inter", sans-serif;font-optical-sizing: auto;}
:root {
	--azul: #0115ef;
}
a,a:visited,a:focus,button:focus {color:inherit;text-decoration:none;}

.page {display: flex;align-items: flex-start;position: relative;}
main {flex: 0 0 66.6666667%;min-width: 0;position: relative;}

main .exhibition {/* width: 100%; */max-width: 100%;height: 100vh;margin-bottom: 200px;aspect-ratio: 1.5/1;object-fit: contain;position: relative;object-position: right;display: flex;flex-direction: row;align-items: flex-start;}
main .exhibition .slides {width: 100%;height: 100%;position: relative;flex: 1;overflow: hidden;}
/* .slides-track es lo unico que se desliza (transform); las zonas de click
   quedan afuera del track para no moverse junto con las fotos */
main .exhibition .slides-track {width: 100%;height: 100%;display: flex;transition: transform 0.45s ease;transform: translateX(calc(var(--active-index, 0) * -100%));}
main .exhibition .slides img.slide {flex: 0 0 100%;width: 100%;height: 100%;object-fit: contain;object-position: bottom right;}
/* la orientacion se marca en cada <img>, NO en el .exhibition: si estuviera en
   el contenedor, al pasar de foto la que se esta yendo cambiaria de object-fit
   en pleno deslizamiento y se veria "achicarse" mientras sale */
main .exhibition .slides img.slide.is-horizontal {object-fit: cover;object-position: center;}

/* desktop: no hay botones visibles. Las franjas laterales de la foto son zonas
   de click invisibles, y ahi el cursor se convierte en una flecha (izquierda a
   la izquierda, derecha a la derecha) para que se entienda que se pasa de foto */
main .exhibition .slide-zone {position: absolute;top: 0;bottom: 0;width: 22%;z-index: 3;appearance: none;border: 0;padding: 0;background: transparent;}
main .exhibition .slide-zone.prev {left: 0;cursor: url("img/arrow-left.svg") 16 6, w-resize;}
main .exhibition .slide-zone.next {right: 0;cursor: url("img/arrow.svg") 16 6, e-resize;}

/* las flechitas indicativas son solo de mobile */
main .exhibition .swipe-hint {display: none;}
main .exhibition .info {flex: 0 0 240px;width: var(--aside-w, 33.3333vw);padding-left: 1.4rem;padding-right: calc(var(--name-w, 20px) + 6rem);font-size: 14px;position: absolute;bottom: 2rem;right: 0;align-self: flex-end;transform: translateX(100%);z-index: 5;text-wrap: pretty;}
main .exhibition .info .exhibition-title {font-size: 14px;font-weight: 800;color: #6c6e6b;margin: 0 0 0.75em;}
/* short y long viven los dos detras del "Read more", short primero. Algunos
   textos largos son realmente largos: en vez de dejar que .info crezca sin
   limite (podria terminar mas alto que el viewport), el propio bloque
   expandido tiene su tope y scrollea internamente. El titulo, el caption de
   la foto y el boton "Read more"/"Read less" quedan afuera de este scroll,
   siempre visibles */
main .exhibition .info .expanded-text {margin-top: 1lh;max-height: 50vh;overflow-y: auto;}
main .exhibition .info .short-text {color: #6c6e6b;font-weight:500;overflow-wrap: anywhere;}
/* caption propio de la foto que se esta viendo. El bloque queda siempre en el
   mismo lugar (entre .short-text y "Read more"): solo se muestra el item activo */
main .exhibition .info .photo-caption {margin-top: 1lh;font-size: 12px;color: #6c6e6b;}
main .exhibition .info .photo-caption .caption-item {display: none;}
main .exhibition .info .photo-caption .caption-item.active {display: block;}
main .exhibition .info .read-more {display: block;border: 0;background: none;padding: 0;margin-top: 1lh;font: inherit;font-size: 14px;cursor: pointer;font-weight: 500;}
main .exhibition .info .long-text {margin-top: 0.5rem;padding-bottom: 6em;font-size: 12px;line-height: 1.3;color: #6c6e6b;overflow-wrap: anywhere;}
main .exhibition .info .long-text h2 {font-size: 13px;font-weight: 700;color: #111;margin: 1em 0 0.3em;}
main .exhibition .info .long-text h2:first-child {margin-top: 0;}
/* un poco de aire entre parrafos en vez de sangria, para que se lea mejor */
main .exhibition .info .long-text p {margin: 0 0 0.75em;}
main .exhibition .info .long-text p:last-child {margin-bottom: 0;}
/* subrayado en los links del cuerpo de texto (cargados desde el admin, ya
   sea con el boton Link o pegando una url suelta), para que se note que son
   clickeables. Los del menu del aside quedan afuera a proposito (regla base
   de arriba, text-decoration:none) */
main .exhibition .info .short-text a, main .exhibition .info .long-text a, main .exhibition .info .photo-caption a,
main.text-page .page-content a, main.text-page .pub-body a, main.text-page .pub-tech-sheet a, main.text-page .pub-image figcaption a,
aside #contact-panel a {text-decoration: underline;cursor: pointer;}
/* titulos dentro del texto libre de about/press (linea que empieza con "## ") */
main.text-page .page-content h2 {font-size: 1.1rem;font-weight: 700;/* color: #111; */margin: 1.5em 0 0.5em;}
main.text-page .page-content h2:first-child {margin-top: 0;}
/* un poco de aire entre parrafos en vez de sangria, para que se lea mejor */
main.text-page .page-content p {margin: 0 0 0.9em;}
main.text-page .page-content p:last-child {margin-bottom: 0;}

main.text-page {padding: 1.4rem 4rem 4rem 1.4rem;box-sizing: border-box;font-size: 16px;line-height: 1.6;color: #414042;}

/* selector de categoria: filtra que tabs se ven (y por lo tanto que
   publicaciones). Solo se muestra si hay mas de una categoria cargada.
   Label a la izquierda (no arriba) y flechita propia dibujada a mano, porque
   appearance:none le saca la flecha nativa del navegador */
main.text-page .pub-category-select {display: flex;align-items: center;gap: 0.7rem;margin: 0 0 1.75rem;}
main.text-page .pub-category-select label {font-size: 12px;color: #6c6e6b;margin: 0;}
main.text-page .pub-category-select select {appearance: none;-webkit-appearance: none;-moz-appearance: none;font: inherit;font-size: 14px;font-weight: 700;color: #111;border: 1px solid #ccc;border-radius: 4px;background-color: #fff;background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%236c6e6b' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat: no-repeat;background-position: right 0.7rem center;background-size: 10px 6px;padding: 0.45rem 2rem 0.45rem 0.8rem;cursor: pointer;}
main.text-page .pub-category-select select:hover {border-color: #999;}
main.text-page .pub-category-select select:focus {outline: none;border-color: #111;}

/* tabs de Publications: solo texto, separadas por una barra vertical. La
   activa (la que se esta viendo) es la unica en negro y negrita */
main.text-page .pub-tabs {display: flex;flex-wrap: wrap;margin: 0 0 2rem;}
main.text-page .pub-tab {appearance: none;border: 0;border-right: 1px solid #ccc;background: none;font: inherit;font-size: 14px;color: #6c6e6b;cursor: pointer;padding: 0 0.8em;margin: 0;line-height: 1.4;}
main.text-page .pub-tab:first-child {padding-left: 0;}
main.text-page .pub-tab:last-child {border-right: 0;}
main.text-page .pub-tab.active {color: #111;font-weight: 700;}
main.text-page .pub-panel[hidden] {display: none;}
main.text-page .pub-title {font-size: 1rem;font-weight: 700;color: #111;margin: 0 0 1rem;}
/* la descripcion ocupa a lo sumo la mitad del ancho de la columna de contenido */
main.text-page .pub-body {max-width: 50%;margin-bottom: 2rem;overflow-wrap: anywhere;}
main.text-page .pub-body h2 {font-size: 0.95rem;font-weight: 700;color: #111;margin: 1.5em 0 0.5em;}
main.text-page .pub-body h2:first-child {margin-top: 0;}
/* un poco de aire entre parrafos en vez de sangria, para que se lea mejor */
main.text-page .pub-body p {margin: 0 0 0.9em;}
main.text-page .pub-body p:last-child {margin-bottom: 0;}
/* ficha tecnica: campo aparte de la descripcion, a proposito, porque el
   espaciado entre parrafos de .pub-body no queda bien en un listado de datos
   sueltos (edicion, formato, paginas...) -- estas lineas van pegadas, como
   antes de que .pub-body tuviera margen entre parrafos */
main.text-page .pub-tech-sheet {max-width: 50%;margin-bottom: 2rem;font-size: 0.9em;color: #6c6e6b;line-height: 1.5;overflow-wrap: anywhere;}
/* las imagenes, en cambio, usan todo el ancho de la columna, y cada una su
   propio alto segun su proporcion real */
main.text-page .pub-images {display: flex;flex-direction: column;gap: 2rem;margin-bottom: 3rem;}
main.text-page .pub-image {margin: 0;}
main.text-page .pub-image img {display: block;width: 100%;height: auto;}
main.text-page .pub-image figcaption {margin-top: 0.5rem;font-size: 12px;color: #6c6e6b;}
.page.about main.text-page {
    /* text-align: center; */
    padding-left: 1.4rem;
}
main.text-page h1 {font-size: 1.4rem;font-weight: 700;margin: 0;color: #111;}
.page.about main.text-page h1 {max-width: 26ch;/* color: #6c6e6b; *//* display: inline-block; */}
/* columna angosta: ch es el ancho del caracter "0", la forma estandar en CSS
   de medir el ancho de una columna en caracteres */
/* overflow-wrap: una URL larga escrita/pegada como texto (autolink la deja
   visible tal cual) no tiene espacios donde cortar una linea normal, y sin
   esto estira el contenedor de ancho en vez de bajar de linea -- eso genera
   scroll horizontal en toda la pagina, y en mobile el boton hamburguesa
   (position: fixed) se corre junto con ese scroll */
.page main.text-page .page-content {max-width: 50%;/* display: inline-block; */text-align: left;text-align: justify;hyphens: auto;color: #6c6e6b;overflow-wrap: anywhere;}

/* z-index mas alto que el .info de .exhibition (que esta en 5): asi el fondo
   blanco del menu (aside ul, mas abajo) lo tapa cuando .info le pasa por
   detras al scrollear. z-index en el <ul> no alcanza porque no tiene
   position propio -- z-index no hace nada en un elemento sin position.
   pointer-events:none en aside es necesario porque, al quedar por encima,
   su caja entera (100vh) tapaba los clicks de .info (el boton Read more)
   aunque ahi aside no tenga nada visible; se lo devolvemos solo al <ul>,
   que es donde vive todo lo clickeable (incluidos los paneles anidados
   de Exhibitions y Contact) */
aside {position: sticky;top:0;flex: 0 0 33.3333333%;min-width: 0;/* display: flex; */height: 100vh;padding: 1.4rem 3rem 2rem 1.4rem;flex-direction: row;font-size: 15px;font-weight: 400;letter-spacing: -0.02em;color: #6c6e6b;line-height: 1.5;z-index: 10;pointer-events: none;}
aside .mobile-bar, aside ul {pointer-events: auto;}
aside .mobile-bar {display: none;}
aside ul {list-style: none;padding: 0;margin: 0;background-color: white;overflow-wrap: anywhere;}
aside ul a {
    cursor: pointer;
}
aside ul a[aria-expanded="true"] {/* color: var(--azul); */margin-bottom: 2lh;/*font-weight: bold;*/}
aside ul a[aria-expanded="true"]+div {/* color: var(--azul); */margin-bottom: 1lh;font-weight: 600;}
aside ul button {appearance: none;border:0;padding:0;background-color: transparent;font-size:inherit;}
aside #exhibitions-panel li, aside #works-panel li {padding-left: 1em;padding-right: calc(var(--name-w, 20px) + 6rem);}
/* Exhibitions y Works no se ponen todo en bold como Contact: solo el item
   que esta en pantalla en ese momento (scrollspy) */
aside #exhibitions-panel, aside #works-panel {font-weight: normal;}
aside #exhibitions-panel a.active, aside #works-panel a.active {font-weight: 600;}

/* pista invisible que va desde el arranque de la pagina hasta el final: le da a #floating-name el recorrido para subir y quedar sticky arriba */
.name-track {position: absolute;top: 0;right: 0;bottom: 0;width: var(--aside-w, 33.3333%);padding: 2rem 1.4rem;box-sizing: border-box;text-align: right;pointer-events: none;}

#floating-name {position: sticky;top: 2rem;margin-top: calc(100vh - 4rem - var(--name-h, 150px));writing-mode: vertical-rl;transform: rotate(180deg);font-weight: bold;display: inline-block;white-space: nowrap;pointer-events: auto;color: #6c6e6b;font-size: 14px;}

/* ===================== responsive (mobile) ===================== */
@media (max-width: 768px) {

	.page {flex-direction: column;}
	main {width: 100%;padding-top: var(--aside-h, 4.5rem);}
	/* el margen extra del titulo y la columna angosta son solo de desktop */
	main.text-page {padding: 5.5rem 1rem 2rem;}
	.page.about main.text-page {padding-left: 1rem;padding-right: 1rem;}
	main.text-page h1 {margin-top: 0;}
	.page main.text-page .page-content {max-width: none;}
	.page.about main.text-page .page-content {max-width:100%;}
	main.text-page .pub-body {max-width: none;}
	main.text-page .pub-tech-sheet {max-width: none;}

	/* el .info siempre va debajo de la imagen, a todo el ancho, sea horizontal o vertical */
	main .exhibition {height: auto;aspect-ratio: auto;flex-direction: column;margin-bottom: 3rem;}
	/* marco de proporcion fija segun la orientacion de la foto activa: asi el
	   .info que va abajo no salta tanto de lugar al pasar de foto en foto */
	main .exhibition .slides {height: auto;}
	main .exhibition.is-horizontal .slides {aspect-ratio: 4/3;}
	main .exhibition.is-vertical .slides {aspect-ratio: 3/4;}
	/* siempre llenan el marco, recortando lo que sobre. Se repite el selector con
	   la clase de orientacion porque la regla de desktop tiene mas especificidad
	   (la @media no aporta especificidad por si misma) */
	main .exhibition .slides img.slide,
	main .exhibition .slides img.slide.is-horizontal,
	main .exhibition .slides img.slide.is-vertical {object-fit: cover;object-position: center;}

	/* flechitas entre la foto y el titulo, una bien a cada extremo. Son botones:
	   se puede pasar de foto tocandolas o con swipe.
	   width:100% porque .exhibition tiene align-items:flex-start y si no el
	   renglon se encoge al ancho de las dos flechitas y quedan pegadas */
	main .exhibition .swipe-hint {display: flex;justify-content: space-between;width: 100%;padding: 0.25rem 0.25rem 0;color: #6c6e6b;line-height: 1;}
	/* el padding del boton es area de toque, no separacion visual: sumado al
	   0.25rem del contenedor deja la flecha a 1rem del borde, igual que antes,
	   pero con un blanco de ~44px que se puede tocar comodo con el dedo */
	main .exhibition .swipe-arrow {appearance: none;border: 0;background: transparent;color: inherit;font: inherit;font-size: 20px;line-height: 1;padding: 0.75rem;cursor: pointer;}
	/* en mobile no hay zonas de click: se pasa con swipe */
	main .exhibition .slide-zone {display: none;}

	main .exhibition .info {
		position: static;
		width: 100%;
		flex: none;
		transform: none;
		right: auto;
		left: auto;
		bottom: auto;
		padding: 1rem 1rem 1rem;
		/* en desktop el JS desvanece el .info al scrollear porque flota sobre el
		   menu; en mobile va siempre debajo asi que no puede chocar con nada */
		opacity: 1 !important;
		pointer-events: auto !important;
	}
	main .exhibition .info .read-more {text-align: right;display: block;width: 100%;margin-top: 2em;color: #6c6e6b;}
	/* mismo criterio que desktop (bloque expandido con tope + scroll interno,
	   en vez de dejar que la pagina crezca sin limite). Mas bajo que en
	   desktop a proposito: con 60vh costaba encontrar donde terminaba el
	   scroll del texto para poder seguir bajando por la pagina */
	main .exhibition .info .expanded-text {max-height: 40vh;overflow-y: auto;}

	/* el nombre rotado de desktop se reemplaza por el de la mobile-bar */
	.name-track {display: none;}

	/* aside pasa de sidebar sticky a barra fija arriba con menu hamburguesa */
	aside {position: fixed;top: 0;left: 0;right: 0;width: 100%;height: auto;padding: 0;z-index: 100;background: #fff;}
	aside .mobile-bar {display: flex;align-items: center;justify-content: space-between;padding: 1rem;}
	aside .mobile-name {font-weight: 800;color: #6c6e6b;font-size: 14px;}
	aside .menu-toggle {border: 0;background: none;font-size: 22px;line-height: 1;cursor: pointer;padding: 0.25rem;color: #6c6e6b;}
	aside ul#main-nav {display: none;list-style: none;margin: 0;padding: 0 1rem 1rem;max-height: calc(100vh - 4rem);overflow-y: auto;text-align: right;}
	aside ul a {line-height:3;}
	aside ul a[href] {line-height:1.5;padding: 0.5rem 0;display: block;}
	aside.nav-open ul#main-nav {display: block;}
	aside #exhibitions-panel, aside #works-panel {max-height: 40vh;overflow-y: auto;}
	aside #exhibitions-panel ul, aside #works-panel ul {padding: 0;}
	aside #exhibitions-panel li, aside #works-panel li {padding-left: 0;padding-right: 1em;}
}