/* ---------------------------------------------------------------------------
   Lluís Gelabert
   Misma escala que Film Lab Services: 1rem = 0.81vw en escritorio.
--------------------------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	font-size: 0.81vw;
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: #fff;
	color: rgba(0, 0, 0, 0.85);
	font-family: "Playfair Display", Georgia, "Times New Roman", serif;
	font-weight: 400;
	letter-spacing: -0.040em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* Nada de seleccionar: al pulsar varias veces seguidas la foto, el texto
	   y la propia foto se quedaban en azul. El callout es la lupa de iOS. */
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
}

a {
	color: inherit;
	text-decoration: none;
}

a:active {
	opacity: 0.7;
}

img,
video {
	display: block;
	width: 100%;
	height: auto;
}

/* --- Columna izquierda: nombre y menú ------------------------------------ */

.lateral {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 20;
	width: 22rem;
	padding: 5rem 0 0 5rem;
}

.nombre {
	display: block;
	font-size: 4.05rem;
	/* Como el titular de Film Lab Services: peso 400 e interlineado 0.75,
	   para que lo de debajo quede pegado al nombre. */
	font-weight: 400;
	line-height: 0.75;
	/* En una línea: sobresale de la columna, por eso el contenido empieza
	   por debajo del nombre. */
	white-space: nowrap;
}

.menu {
	/* El tamaño de la letra pequeña de Film Lab Services. */
	margin-top: 0.6rem;
	font-size: 1.45rem;
	line-height: 1.5;
}

.menu a,
.menu summary {
	display: block;
}

.menu summary {
	list-style: none;
	cursor: pointer;
}

.menu summary::-webkit-details-marker {
	display: none;
}

.menu details a {
	margin-left: 0.8em;
}

/* La página en la que estás queda en gris; al pasar el ratón, una negrita
   muy fina. Solo con ratón: en táctil el hover se queda pegado tras tocar. */
.menu a.activa {
	color: rgba(0, 0, 0, 0.4);
}

@media (hover: hover) {
	.menu a:hover,
	.menu summary:hover,
	.pie:hover,
	.indice a:hover {
		font-weight: 500;
	}
}

/* --- Portada: una foto grande -------------------------------------------- */

.es-portada {
	overflow: hidden;
}

.portada {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 11rem 5rem 5rem 27rem;
	cursor: pointer;
}

.portada img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
}

/* --- Miniaturas: todas las fotos de la portada en pequeño ----------------- */

.miniaturas {
	display: none;
	flex-wrap: wrap;
	gap: 1.5rem;
	margin-left: 27rem;
	padding: 11rem 5rem 8rem 0;
}

.miniaturas img {
	width: auto;
	height: 11rem;
	cursor: pointer;
}

.ver-miniaturas {
	overflow: auto;
}

.ver-miniaturas .portada {
	display: none;
}

.ver-miniaturas .miniaturas {
	display: flex;
}

.pie {
	position: fixed;
	top: 5rem;
	right: 5rem;
	z-index: 20;
	font-size: 1.45rem;
	line-height: 1.5;
}

/* --- Páginas de fotos ---------------------------------------------------- */

.pagina {
	margin-left: 27rem;
	padding: 11rem 5rem 8rem 0;
}

.fila {
	display: flex;
	gap: 1rem;
	margin: 0 auto 1rem;
}

.fila > div {
	min-width: 0;
}

.columnas {
	column-count: var(--columnas, 4);
	column-gap: 1rem;
}

.columnas img {
	margin-bottom: 1rem;
	break-inside: avoid;
}

.pagina img {
	cursor: zoom-in;
}

.pagina-contact .fila {
	max-width: 45rem;
}

.pagina-contact img {
	cursor: default;
}

/* --- Diario -------------------------------------------------------------- */

.anyo {
	position: sticky;
	top: 11rem;
	z-index: 5;
	height: 0;
	font-size: 10rem;
	font-weight: 700;
	line-height: 0.8;
	letter-spacing: 0;
	pointer-events: none;
}

.mes {
	margin: 0;
	padding: 6rem 0 3rem;
	font-size: 6rem;
	font-weight: 700;
	line-height: 0.8;
	letter-spacing: 0;
}

.anyo + .mes {
	padding-top: 12rem;
}

.anyo + .columnas {
	padding-top: 12rem;
}

.ancla {
	display: block;
}

.ancla,
.mes {
	scroll-margin-top: 11rem;
}

.indice {
	position: fixed;
	top: 11rem;
	right: 5rem;
	z-index: 10;
	text-align: right;
	font-size: 1.45rem;
	line-height: 1.5;
}

.indice a {
	display: block;
}

/* --- Visor: la foto en grande -------------------------------------------- */

.visor {
	position: fixed;
	inset: 0;
	z-index: 50;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 3rem;
	background: #fff;
	cursor: zoom-out;
}

.visor[hidden] {
	display: none;
}

.visor img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
}

/* --- Móvil --------------------------------------------------------------- */

@media (max-width: 767px) {
	html {
		font-size: 2.6vw;
	}

	.lateral {
		position: static;
		width: auto;
		padding: 2rem 2rem 0;
		text-align: center;
	}

	.es-portada .lateral {
		position: fixed;
		left: 0;
		right: 0;
	}

	.nombre {
		font-size: 3.4rem;
	}

	.menu {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 0 1.6rem;
		padding-top: 0.6rem;
	}

	.menu details[open] {
		flex-basis: 100%;
	}

	.menu details a {
		display: inline-block;
		margin: 0 0.6em;
	}

	.portada {
		padding: 16rem 1.5rem 3rem;
	}

	.ver-miniaturas .lateral {
		position: static;
	}

	.miniaturas {
		justify-content: center;
		gap: 1rem;
		margin-left: 0;
		padding: 3rem 1.5rem 6rem;
	}

	.miniaturas img {
		height: 9rem;
	}

	/* Arriba a la derecha no cabe: ahí llega el nombre. Va abajo. */
	.pie {
		top: auto;
		right: 2rem;
		bottom: 2rem;
	}

	.pagina {
		margin-left: 0;
		padding: 3rem 1.5rem 6rem;
	}

	/* En móvil todas las filas van a todo el ancho. */
	.fila {
		width: 100% !important;
	}

	.columnas {
		column-count: 2;
	}

	.anyo {
		top: 1.5rem;
		font-size: 6rem;
	}

	.mes {
		font-size: 4rem;
	}

	.indice {
		display: none;
	}
}