/* ============================================================================
   Angela Palacios - pagina puente
   Un programa de mano, no una landing: papel, tinta y fichas de creditos.
   El unico color de la pagina lo ponen sus fotografias y sus carteles.
   ========================================================================= */

/* --- Fuentes --------------------------------------------------------------
   Autoalojadas. No hay una sola peticion a un dominio de terceros en toda la
   pagina: por eso no lleva banner de cookies.

   Bodoni Moda para display y Archivo para metadatos. La didone es la voz del
   cartel de teatro, y su eje `opsz` da contraste alto a 96 px en el titular y
   trazo mas robusto a 17 px en los pies de cartel con un solo fichero.

   Las cursivas son ficheros reales, no oblicuas fabricadas por el navegador
   (ver `font-synthesis: none` mas abajo).

   El `unicode-range` es el subconjunto latino, que cubre todo el castellano;
   cualquier caracter fuera de el cae en la pila de respaldo en lugar de
   mostrar un hueco. */

@font-face {
  font-family: 'Bodoni Moda';
  src: url('/assets/fonts/bodoni-moda-var.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Bodoni Moda';
  src: url('/assets/fonts/bodoni-moda-var-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Archivo';
  src: url('/assets/fonts/archivo-var.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Archivo';
  src: url('/assets/fonts/archivo-var-italic.woff2') format('woff2');
  font-weight: 400 600;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Sistema -------------------------------------------------------------- */

:root {
  --papel: #FAFAF8;
  --tinta: #111111;
  --tinta-fuerte: #3A3833;  /* 11,2:1 sobre papel */
  --tinta-media: #4A4741;   /*  8,9:1 */
  --tinta-suave: #5C5952;   /*  6,7:1 - suelo de la paleta, nunca por debajo */
  --linea: rgba(17, 17, 17, 0.16);
  --linea-firme: rgba(17, 17, 17, 0.34);

  --display: 'Bodoni Moda', 'Didot', 'Times New Roman', serif;
  --texto: 'Archivo', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;

  --ancho: 74rem;             /* 1184 px */
  --margen: clamp(1.25rem, 5vw, 3.5rem);
  --hueco-bloque: clamp(4.5rem, 10vw, 8.5rem);
  --masthead-alto: 5rem;

  --curva: cubic-bezier(0.16, 1, 0.3, 1);
}

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

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  /* Las cuatro variantes (redonda y cursiva de cada familia) estan
     autoalojadas, asi que no hay ningun caso legitimo en que el navegador
     tenga que fabricar una. */
  font-synthesis: none;
  font-family: var(--texto);
  font-size: 1rem;
  line-height: 1.6;
  /* Sin `-webkit-font-smoothing: antialiased`. Adelgaza el trazo, y con una
     didone eso no es un matiz: los finos de la Bodoni se rompen y palabras
     como «Actriz» salen medio borradas. El suavizado por defecto del sistema
     es el que la fuente espera. */
}

/* Superficies del navegador: seleccion, foco y barras de scroll tambien son
   parte del diseno, y por defecto no son de nadie. */
::selection {
  background: var(--tinta);
  color: var(--papel);
}

:focus-visible {
  outline: 2px solid var(--tinta);
  outline-offset: 3px;
  border-radius: 1px;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

figure { margin: 0; }

/* Sin esto la imagen se queda en su ancho intrinseco (el del fichero servido
   en `src`) y no llena la figura, que es mas ancha en las pantallas grandes. */
.apertura__lamina img,
.banda img,
.contacto__retrato img { width: 100%; }

cite { font-style: italic; }

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: text-decoration-color 0.2s var(--curva);
}

a:hover { text-decoration-color: var(--linea-firme); }

.salto {
  position: absolute;
  left: var(--margen);
  top: 0;
  z-index: 2;
  padding: 0.75rem 1rem;
  background: var(--tinta);
  color: var(--papel);
  font-size: 0.875rem;
  text-decoration: none;
  transform: translateY(-120%);
}

.salto:focus { transform: translateY(0); }

/* Credito de fotografia: el marcado ya esta puesto en cada <figure>. En cuanto
   se rellene el atributo, la linea aparece sola; vacio no pinta nada. */
figure[data-credito]:not([data-credito=''])::after {
  content: 'Fotografía: ' attr(data-credito);
  display: block;
  margin-top: 0.6rem;
  color: var(--tinta-suave);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}

/* --- 0 · Cabecera --------------------------------------------------------- */

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: var(--masthead-alto);
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--margen);
}

.masthead p {
  margin: 0;
  color: var(--tinta-suave);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* No es un menu: es un enlace, el unico del encabezamiento. Segun la analitica
   del sitio antiguo, mas de uno de cada diez visitantes llega desde la
   biografia de Instagram, y viene a contactar o a ver que hace, no a leer.
   Dejarle el contacto a cinco pantallas de scroll era el fallo. */
.masthead__ruta a { color: var(--tinta); }

/* Por debajo de 30rem no caben el nombre, el lugar y la ruta en una linea. Cae
   el lugar, que es contexto y esta ademas en la biografia y en el JSON-LD. */
.masthead__lugar { display: none; }

@media (min-width: 30rem) {
  .masthead__lugar { display: inline; }
}

/* --- 1 · Apertura --------------------------------------------------------- */

.apertura {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-content: end;
  min-height: calc(100vh - var(--masthead-alto));
  min-height: calc(100svh - var(--masthead-alto));
  max-width: var(--ancho);
  margin-inline: auto;
  padding: clamp(2rem, 6vw, 4rem) var(--margen) var(--hueco-bloque);
}

/* El eje `opsz` de la Bodoni se fija a mano en cada uso en lugar de dejarlo
   en `auto`. `auto` lo deriva del cuerpo en puntos y a 31 px ya elige un corte
   con los finos demasiado delgados para pantalla. Aqui, a 96 px, el contraste
   alto es justo lo que se busca. */
.apertura__titulo {
  margin: 0;
  font-variation-settings: 'opsz' 72;
  font-family: var(--display);
  font-size: clamp(3.25rem, 9vw, 6rem);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

.apertura__claim {
  margin: clamp(1.25rem, 2.5vw, 1.75rem) 0 0;
  max-width: 30ch;
  color: var(--tinta-fuerte);
  font-size: clamp(1.0625rem, 1.6vw, 1.3125rem);
  line-height: 1.45;
  text-wrap: pretty;
}

.apertura__estado {
  margin: 0;
  max-width: 52ch;
  padding-top: 1.25rem;
  border-top: 1px solid var(--linea);
  color: var(--tinta-suave);
  font-size: 0.8125rem;
  line-height: 1.65;
}

@media (min-width: 60rem) {
  .apertura {
    /* La fotografia manda sobre el texto: es la portada del programa. Al
       quedarse la columna de texto por debajo del ancho del titulo, «Ángela
       Palacios» rompe en dos lineas, que es como tiene presencia. */
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.1fr);
    grid-template-areas:
      'texto lamina'
      'estado estado';
    align-items: end;
    column-gap: clamp(2.5rem, 5vw, 4.5rem);
  }

  .apertura__texto { grid-area: texto; }
  .apertura__lamina { grid-area: lamina; }
  .apertura__estado { grid-area: estado; }
}

/* --- Bloques -------------------------------------------------------------- */

.bloque {
  max-width: var(--ancho);
  margin-inline: auto;
  padding: 0 var(--margen) var(--hueco-bloque);
}

/* Mas aire encima del encabezado que debajo: el titulo pertenece a lo que
   viene despues, no a lo que queda arriba. */
.bloque__titulo {
  margin: 0 0 clamp(1.75rem, 3.5vw, 2.75rem);
  font-variation-settings: 'opsz' 28;
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--linea);
  font-family: var(--display);
  font-size: clamp(1.625rem, 3.4vw, 2.5rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.015em;
}

/* --- 2 · Quien es --------------------------------------------------------- */

.biografia {
  margin: 0;
  font-variation-settings: 'opsz' 14;
  max-width: 62ch;
  font-family: var(--display);
  font-size: clamp(1.25rem, 2.3vw, 1.625rem);
  line-height: 1.5;
  letter-spacing: -0.005em;
  text-wrap: pretty;
}

.nombre-propio { font-style: italic; }

.banda {
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
  max-width: 68.75rem; /* 1100 px: el original solo mide 1142, no se amplia */
}

/* --- 3 · Los oficios ------------------------------------------------------ */

.oficios {
  margin: 0;
  border-top: 1px solid var(--linea);
}

.oficios__linea {
  display: grid;
  gap: 0.25rem 2.5rem;
  padding: clamp(1rem, 2vw, 1.4rem) 0;
  border-bottom: 1px solid var(--linea);
}

.oficios__nombre {
  font-variation-settings: 'opsz' 20;
  /* «Directora de cine y guionista» no cabe en una linea: equilibrando el
     corte, la conjuncion baja con «guionista» en vez de quedarse huerfana. */
  text-wrap: balance;
  font-family: var(--display);
  font-size: clamp(1.375rem, 2.8vw, 1.9375rem);
  line-height: 1.1;
  letter-spacing: -0.012em;
}

.oficios__dato {
  margin: 0;
  color: var(--tinta-media);
  font-size: 0.9375rem;
  line-height: 1.55;
  text-wrap: pretty;
}

@media (min-width: 48rem) {
  .oficios__linea {
    grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
    align-items: baseline;
  }
}

/* Tira de laminas. Alto comun y ancho segun la proporcion real de cada foto:
   ninguna se recorta para encajar en una retícula. */
.laminas {
  display: flex;
  gap: clamp(0.75rem, 1.6vw, 1.5rem);
  /* En pantallas estrechas la tira sale del margen y llega al borde: asi se ve
     que continua, en vez de parecer una foto cortada. */
  margin: clamp(2.5rem, 6vw, 4rem) calc(-1 * var(--margen)) 0;
  padding: 0 var(--margen) 0.5rem;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--linea-firme) transparent;
}

.laminas__pieza { flex: 0 0 auto; }

/* Movil: altura comun y ancho segun la proporcion de cada foto, en una fila
   que se desplaza. */
.laminas__pieza img {
  height: clamp(11.25rem, 22vw, 17.8125rem);
  width: auto;
  max-width: none;
}

/* Escritorio: la tira deja de desplazarse y pasa a rejilla, con una columna
   por foto y el ancho de cada una proporcional a su propia proporcion (440/423
   las tres cuadradas, 440/642 la vertical). Asi las cuatro salen a la misma
   altura y el conjunto encaja EXACTO en el contenedor, sea cual sea el ancho.

   Antes tambien aqui mandaba la altura fija de arriba y el ancho salia de ella.
   El calculo no restaba el relleno del contenedor, asi que a 1440 px la tira
   media 1154 px dentro de 1072: se salia 82 px y cortaba la cuarta foto, con
   barra de scroll en una pagina donde nada mas se desplaza en horizontal.
   Va DESPUES de la regla base a proposito: misma especificidad, gana la
   ultima. */
@media (min-width: 60rem) {
  .laminas {
    display: grid;
    grid-template-columns: 1.0402fr 0.6854fr 1.0402fr 1.0402fr;
    margin-inline: 0;
    padding-inline: 0;
    overflow: visible;
  }

  .laminas__pieza img {
    width: 100%;
    height: auto;
  }
}

/* --- 4 · Palmares --------------------------------------------------------- */

.palmares {
  margin: 0;
  /* Medida ancha a proposito: es un bloque denso de honores, no un parrafo
     de lectura. Encajonarlo en la medida del texto lo dejaba en una columna
     estrecha de ocho lineas, con media pagina vacia al lado. */
  max-width: 58rem;
  color: var(--tinta-media);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.95;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

.palmares__item:not(:last-child)::after {
  content: ' · ';
  margin: 0 0.35em;
  color: var(--tinta-suave);
}

/* --- 5 · Piezas ----------------------------------------------------------- */

.carteles {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 62vw;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  margin-inline: calc(-1 * var(--margen));
  margin-block: 0;
  padding: 0 var(--margen) 0.5rem;
  scroll-padding-inline-start: var(--margen);
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--linea-firme) transparent;
}

.carteles__pieza { scroll-snap-align: start; }

.carteles__pieza figure {
  display: flex;
  flex-direction: column;
  /* Los carteles se apoyan en una linea comun, como puestos de pie: siete de
     los ocho son formato A y el octavo es mas corto. Alinearlos arriba dejaria
     ese pie descolgado del resto de la fila. */
  justify-content: flex-end;
  height: 100%;
}

.carteles__pieza img {
  width: 100%;
  /* Los carteles llevan tipografia y creditos incrustados: se sirven en su
     proporcion original. Recortarlos a cuadrado los destroza. */
}

.carteles figcaption {
  margin-top: 0.9rem;
  font-variation-settings: 'opsz' 11;
  font-family: var(--display);
  font-size: 1.0625rem;
  line-height: 1.25;
  text-wrap: pretty;
}

.carteles__ano {
  display: block;
  margin-top: 0.3rem;
  color: var(--tinta-suave);
  font-family: var(--texto);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.1em;
}

@media (min-width: 64rem) {
  .carteles {
    margin-inline: 0;
    padding-inline: 0;
    grid-auto-flow: row;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-columns: auto;
    overflow: visible;
    scroll-snap-type: none;
    row-gap: clamp(2rem, 4vw, 3.25rem);
  }

  /* Reserva de dos lineas de titulo para que los pies de los ocho carteles
     caigan a la misma altura aunque el titulo ocupe una linea o dos. */
  .carteles figcaption { min-height: calc(2 * 1.25em + 1.35rem); }
}

/* --- 6 · Contacto --------------------------------------------------------- */

.contacto {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4rem);
}

.contacto__ficha {
  margin: 0;
  border-top: 1px solid var(--linea);
}

.contacto__linea {
  display: grid;
  gap: 0.15rem 2rem;
  padding: clamp(0.9rem, 1.8vw, 1.25rem) 0;
  border-bottom: 1px solid var(--linea);
}

.contacto__linea dt {
  color: var(--tinta-suave);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.contacto__linea dd {
  margin: 0;
  font-variation-settings: 'opsz' 16;
  font-family: var(--display);
  font-size: clamp(1.125rem, 2.2vw, 1.375rem);
  line-height: 1.35;
}

/* Un usuario de Instagram va en la grotesca, no en la Bodoni. Dos motivos, y
   el primero es de lectura: los guiones bajos de la didone son finos, se
   apoyan en la linea del subrayado y desaparecen, de modo que
   «@_angela_palacios» se lee «@ angela palacios», que es otro usuario. El
   segundo es de sistema: un identificador que alguien puede querer teclear es
   un dato, y los datos de esta pagina van en Archivo. */
.contacto__usuario {
  font-family: var(--texto);
  font-size: 1rem;
  letter-spacing: 0.01em;
  text-underline-offset: 0.26em;
}

.contacto__alterno {
  margin-left: 0.85em;
  color: var(--tinta-suave);
  font-family: var(--texto);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.contacto__retrato { max-width: 23.75rem; }

@media (min-width: 60rem) {
  .contacto {
    grid-template-columns: minmax(0, 1fr) minmax(0, 23.75rem);
    align-items: start;
  }
}

@media (min-width: 40rem) {
  .contacto__linea { grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); }
  .contacto__linea dt { padding-top: 0.4em; }
}

/* --- 7 · Pie -------------------------------------------------------------- */

.pie {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  justify-content: space-between;
  max-width: var(--ancho);
  margin-inline: auto;
  padding: 1.75rem var(--margen) 2.5rem;
  border-top: 1px solid var(--linea);
  color: var(--tinta-suave);
  font-size: 0.75rem;
}

.pie p { margin: 0; }

/* Dos enlaces legales, no uno: sin separacion propia quedarian pegados por un
   espacio de texto y pareceria un solo enlace partido. */
.pie__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
}

/* --- Movimiento ----------------------------------------------------------- */

/* Una sola entrada, la misma para todo: aparecer. La regla vive dentro de
   `no-preference`, de modo que con `prefers-reduced-motion` los elementos
   nacen visibles y no hay animacion que acortar. Sin JavaScript tampoco se
   aplica la clase `js` y la pagina se ve entera. */
@media (prefers-reduced-motion: no-preference) {
  .js .entra {
    opacity: 0;
    transform: translateY(8px);
  }

  .js .entra--visible {
    opacity: 1;
    transform: none;
    transition:
      opacity 0.36s var(--curva),
      transform 0.36s var(--curva);
  }
}

/* --- Paginas secundarias: 404 y textos legales ---------------------------- */

/* Mismo papel, misma tinta y la misma cabecera que la portada. Una pagina de
   error o un aviso legal que se ven como otro sitio distinto son un fallo de
   confianza, no un detalle. */

.documento {
  max-width: var(--ancho);
  margin-inline: auto;
  padding: clamp(3rem, 9vw, 6.5rem) var(--margen) var(--hueco-bloque);
}

.documento__titulo {
  margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
  font-variation-settings: 'opsz' 48;
  max-width: 22ch;
  font-family: var(--display);
  font-size: clamp(2.25rem, 6vw, 4rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.documento__cuerpo {
  max-width: 64ch;
  color: var(--tinta-fuerte);
  font-size: 1rem;
  line-height: 1.7;
}

.documento__cuerpo p { margin: 0 0 1.15rem; }

.documento__cuerpo h2 {
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0.85rem;
  font-variation-settings: 'opsz' 20;
  font-family: var(--display);
  font-size: clamp(1.375rem, 2.6vw, 1.75rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.012em;
  color: var(--tinta);
}

.documento__cuerpo ul {
  margin: 0 0 1.15rem;
  padding-left: 1.15rem;
}

.documento__cuerpo li { margin-bottom: 0.4rem; }

.documento__cuerpo a { color: var(--tinta); }

/* Hueco pendiente de rellenar. Se ve, y se tiene que ver: un dato legal que
   falta es un dato que falta, no un texto que se pueda maquillar. */
.pendiente {
  display: inline-block;
  padding: 0.1em 0.45em;
  border: 1px dashed var(--linea-firme);
  color: var(--tinta-suave);
  font-family: var(--texto);
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
}

.volver {
  display: inline-block;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--linea);
  color: var(--tinta);
  font-size: 0.875rem;
  letter-spacing: 0.04em;
}