/* ============================================================
   MZ — Design System · COMPONENTES
   Depende de tokens.css + base.css.
   Cada componente vive en su propio bloque y no conoce a los
   demás: se combinan por composición en el HTML.
   ============================================================ */


/* ============================================================
   RAIL — barra lateral fija
   Contiene marca, navegación y pie. Es el único elemento
   persistente del sitio; da la referencia de dónde estás.
   Por debajo de 900px se convierte en barra superior pegajosa.
   ============================================================ */
.rail{
  position: fixed; inset: 0 auto 0 0; width: var(--rail-w); z-index: var(--z-rail);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: var(--s-gutter);
  background: var(--c-paper);
  border-right: var(--bw) solid var(--c-rule);
}
.rail__name{
  font-size: var(--t-name);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-name);
  white-space: nowrap;   /* el nombre nunca se parte */
}

/* Los roles pueden pasar de renglón ENTRE roles, nunca dentro de uno:
   "Sound artist" partido en dos líneas se lee como dos cosas. */
.rail__roles{ margin-top: var(--s-2); color: var(--c-text-mute) }
.rail__roles span{ white-space: nowrap }
.rail__foot { color: var(--c-text-mute) }

/* ranura de utilidades: hoy sólo el interruptor de tema, mañana lo que
   haga falta (selector de idioma, por ejemplo) */
.rail__tools{ margin-top: var(--s-7) }

/* el contenido principal se corre para dejarle lugar */
.rail-offset{ margin-left: var(--rail-w) }


/* ============================================================
   NAV-CHECK — navegación de casillas
   La casilla vacía / llena marca la sección activa. Viene de la
   metáfora de archivo impreso: es un índice que se tilda, no un
   menú que se resalta.
   Estados: reposo · hover · .is-on
   ============================================================ */
.nav-check{ display: flex; flex-direction: column; gap: var(--s-05); margin-top: var(--s-7) }

.nav-check a{
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-1) 0;
  color: var(--c-text-mute);
  transition: color var(--dur-fast);
}
.nav-check a::before{
  content: ""; flex: none;
  width: var(--s-2); height: var(--s-2);
  border: var(--bw) solid currentColor;
}
.nav-check a:hover,
.nav-check a.is-on{ color: var(--c-text) }
.nav-check a.is-on::before{ background: var(--c-text); border-color: var(--c-text) }

/* variante horizontal — la usa la barra superior en móvil */
.nav-check--row{ flex-direction: row; gap: var(--s-4); margin: 0 }


/* ============================================================
   THEME-SWITCH — interruptor claro / oscuro
   Toma prestado el cuadrado de .nav-check y le da un sentido
   literal: el cuadrado se llena de tinta. Vacío = papel,
   lleno = tinta. Muestra el estado actual, no el destino.
   Necesita theme.js. Estados: reposo · hover · aria-pressed
   ============================================================ */
.theme-switch{
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-1) 0;
  color: var(--c-text-mute);
  transition: color var(--dur-fast);
}
.theme-switch::before{
  content: ""; flex: none;
  width: var(--s-2); height: var(--s-2);
  border: var(--bw) solid currentColor;
  transition: background var(--dur-fast);
}
.theme-switch:hover{ color: var(--c-text) }
.theme-switch[aria-pressed="true"]::before{ background: currentColor }


/* ============================================================
   SECTION-HEAD — encabezado de región
   Numeración a la izquierda, dato al margen derecho. Siempre en
   .lbl. Anuncia la región y la separa con una línea estructural.
   ============================================================ */
/* Una sola línea, debajo de la etiqueta: abre la región, no la cierra.
   Las secciones se separan entre sí por el hueco de --s-section, no
   por un trazo. Se probó cerrarlas con una línea arriba y no hacía
   falta: el problema que esa línea resolvía era la divisoria vertical
   del split colgando en el aire, y esa divisoria ya no existe. */
.section-head{
  display: flex; justify-content: space-between; gap: var(--s-4);
  align-items: baseline;
  padding: var(--s-section) var(--s-gutter) var(--s-5);
  color: var(--c-text-mute);
  border-bottom: var(--bw) solid var(--c-rule);
}

/* El nombre de la sección es lo que dice en qué parte del documento
   estás: va a 16px y en tinta plena. El dato del margen derecho queda
   más chico y en gris — es metadato, no encabezado. */
.section-head .lbl{
  font-size: var(--t-section);
  letter-spacing: var(--tr-section);
  color: var(--c-text);
}
.section-head .tag{ font-size: var(--t-section-sm) }


/* ============================================================
   TAG — etiqueta entre corchetes
   Misma capa utilitaria que .lbl, pero leída como código de
   catálogo: [BRUSSELS], [09 WORKS]. Los corchetes son generados,
   así que el texto del HTML queda limpio y se puede traducir sin
   arrastrar puntuación.
   ============================================================ */
.tag{
  font-size: var(--t-label);
  line-height: var(--lh-label);
  font-weight: var(--w-regular);
  text-transform: uppercase;
  letter-spacing: var(--tr-label);
  color: var(--c-text-mute);
  white-space: nowrap;
}
.tag::before{ content: "[" }
.tag::after { content: "]" }


/* ============================================================
   ROWS — filas etiqueta / valor
   Clave chica en versalitas a la izquierda, texto de lectura a la
   derecha, filete entre filas y mucho aire vertical. La usan
   Services y Contact.

   No lleva borde superior: .section-head ya cierra por abajo con
   una línea estructural, y sumarle otra da un trazo de 2px que
   rompe el único peso de línea del sistema.
   ============================================================ */
.rows__row{
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: var(--s-gutter);
  align-items: start;
  padding: var(--s-7) var(--s-gutter);
  border-bottom: var(--bw) solid var(--c-rule-soft);
}
.rows__key{ color: var(--c-text-mute); padding-top: .25em }
.rows__val{
  font-size: var(--t-body);
  line-height: var(--lh-prose);
  color: var(--c-text-body);
  max-width: 62ch;
}
.rows__val a{ border-bottom: var(--bw) solid var(--c-rule-soft); transition: border-color var(--dur-fast) }
.rows__val a:hover{ border-color: var(--c-text) }

/* el valor es accionable, no descriptivo — lo usa la fila de email */
.rows__val--action{ color: var(--c-text); font-size: var(--t-base) }


/* ============================================================
   CV — la ficha al pie
   Tres columnas: año, entrada, lugar. A ancho completo, que es
   todo el punto: la misma información que apretada en la columna
   secundaria de la bio no se podía recorrer.
   El padding va en el grupo (no margin) y en todos por igual, así
   el primero también respira debajo del encabezado de sección sin
   necesitar una regla para el caso especial.
   ============================================================ */
.cv__group{ padding-top: var(--s-8) }

.cv__label{
  color: var(--c-text-mute);
  padding: 0 var(--s-gutter) var(--s-3);
}

.cv__row{
  display: grid;
  grid-template-columns: 108px minmax(0, 1.25fr) minmax(0, 1fr);
  gap: var(--s-4);
  padding: var(--s-3) var(--s-gutter);
  border-top: var(--bw) solid var(--c-rule-soft);
  font-size: var(--t-meta);
  line-height: var(--lh-snug);
}
.cv__group:last-child .cv__row:last-child{ border-bottom: var(--bw) solid var(--c-rule-soft) }

.cv__year { color: var(--c-text-mute); font-variant-numeric: tabular-nums }
.cv__what { color: var(--c-text) }
.cv__where{ color: var(--c-text-mute) }


/* ============================================================
   SPLIT — la división editorial recurrente
   1.55fr / 1fr. Es el esqueleto de Bio y del cuerpo de la ficha.
   Colapsa a una columna por debajo de 900px.

   SIN línea entre columnas: la separación la hace la zanja. Una
   divisoria vertical sólo puede terminar donde termina la columna
   más alta, y ahí queda colgando —no hay ninguna línea horizontal
   que la reciba—. Separar con distancia no tiene ese problema.
   ============================================================ */
.split{
  display: grid;
  grid-template-columns: var(--split);
  column-gap: var(--s-9);
}

/* Sin relleno abajo: el hueco entre una sección y la siguiente lo pone
   SIEMPRE el encabezado de la que viene (--s-section). Si además cada
   región agregara el suyo, el hueco dependería de con qué termina cada
   una — y una sección que cierra con un split quedaría más separada
   que una que cierra con una retícula. */
.split__main,
.split__aside{ padding: var(--s-block) var(--s-gutter) 0 }


/* SUBBLOCK — un apartado dentro de una columna (ej. Statement) */
.subblock{
  margin-top: var(--s-block);
  padding-top: var(--s-6);
  border-top: var(--bw) solid var(--c-rule-soft);
}
.subblock__label{ color: var(--c-text-mute); margin-bottom: var(--s-4) }


/* ============================================================
   GRID + CELL — retícula de obras
   Celdas modulares separadas por líneas estructurales, sin
   márgenes: la retícula llega a los bordes de la pantalla.
   Estados: reposo · hover (lavado + leve acercamiento)

   El título va ARRIBA de la imagen, en .cell__head, con el año al
   margen derecho. Deja de ser pie de foto y pasa a ser entrada de
   catálogo: es lo que permite recorrer la retícula leyendo, sin
   depender de reconocer cada imagen.
   ============================================================ */
.grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--grid-min), 1fr)) }

.cell{
  display: block; width: 100%;
  border-right:  var(--bw) solid var(--c-rule);
  border-bottom: var(--bw) solid var(--c-rule);
  transition: background var(--dur);
}
.cell:hover{ background: var(--c-surface-hover) }

/* Celda de relleno: completa la última fila para que la retícula cierre
   como rectángulo. No tiene contenido, no recibe foco y no reacciona
   al cursor — sólo aporta sus bordes. La agrega el JS de la página,
   porque la cantidad de columnas la decide auto-fill. */
.cell--filler{ pointer-events: none }

.cell__head{
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3);
  padding: var(--s-4) var(--s-gutter);
  border-bottom: var(--bw) solid var(--c-rule-soft);
}
.cell__head .cell__title{ font-size: var(--t-small-plus) }

.cell__media{
  aspect-ratio: 3/2; overflow: hidden;
  background: var(--c-surface-empty);
  border-bottom: var(--bw) solid var(--c-rule);
}
.cell__media img{
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);
}
.cell:hover .cell__media img{ transform: scale(1.028) }

.cell__cap{
  display: flex; flex-direction: column; gap: var(--s-2);
  padding: var(--s-3) var(--s-gutter) var(--s-5);
}
.cell__num   { color: var(--c-text-mute); font-variant-numeric: tabular-nums }
.cell__title { font-size: var(--t-title); line-height: var(--lh-snug); letter-spacing: var(--tr-title) }
/* alto mínimo para que los pies queden alineados entre filas
   aunque el medio ocupe una o dos líneas */
.cell__medium{ color: var(--c-text-mute); min-height: 2.8em }


/* ============================================================
   DATALIST — tabla de datos clave / valor
   Ficha técnica: educación, residencias, metadatos de obra.
   Clave en gris a la izquierda, valor a la derecha, filete entre
   filas. --datalist-key ajusta el ancho de la columna clave.
   Variantes: por defecto (una línea) · .datalist--stacked (dos)
   ============================================================ */
.datalist{ --datalist-key: 88px }

.datalist__row{
  display: grid; grid-template-columns: var(--datalist-key) 1fr; gap: var(--s-3);
  padding: var(--s-2) 0;
  font-size: var(--t-meta);
  border-top: var(--bw) solid var(--c-rule-soft);
}
.datalist__row:last-child{ border-bottom: var(--bw) solid var(--c-rule-soft) }

.datalist__key{ color: var(--c-text-mute); font-style: normal; font-variant-numeric: tabular-nums }
.datalist__val{ color: var(--c-text-body) }

/* apilada: título en tinta y detalle en gris debajo */
.datalist--stacked .datalist__val b{ font-weight: var(--w-regular); color: var(--c-text); display: block }
.datalist--stacked .datalist__val span{ color: var(--c-text-mute) }

.datalist__label{ color: var(--c-text-mute); margin-bottom: var(--s-3) }
.datalist + .datalist{ margin-top: var(--s-6) }

/* dos columnas cuando hay ancho de sobra y las filas son cortas.
   Por debajo de 2×240px vuelve sola a una columna. */
.datalist--cols{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  column-gap: var(--s-7);
}
.datalist--cols .datalist__label{ grid-column: 1 / -1 }
/* el borde inferior del "último" no sirve en rejilla: lo lleva cada
   fila de la última hilera, y cuál es esa depende del ancho */
.datalist--cols .datalist__row:last-child{ border-bottom: 0 }


/* ============================================================
   BULLETS — lista de definiciones
   Para enumerar estados o partes de una obra: término en tinta,
   descripción debajo. Separadas por filete, sin viñeta.
   ============================================================ */
.bullets{ margin-top: var(--s-6) }
.bullets li{
  padding: var(--s-3) 0;
  border-top: var(--bw) solid var(--c-rule-soft);
  font-size: var(--t-small-plus);
  color: var(--c-text-body);
}
.bullets b{ font-weight: var(--w-regular); color: var(--c-text); display: block; margin-bottom: var(--s-1) }


/* ============================================================
   FRAME — marco de medio embebido
   Reserva la proporción del video ANTES de que exista el enlace,
   así incorporar el embed no mueve nada del layout.
   Estados: .frame con iframe · .frame vacío (muestra .frame__todo)
   ============================================================ */
.frame{
  position: relative; aspect-ratio: 16/9;
  background: var(--c-surface-empty);
  border-bottom: var(--bw) solid var(--c-rule);
}
.frame iframe{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0 }

.frame__todo{
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-2);
  color: var(--c-text-disabled);
  text-align: center;
}
/* LINKROW — enlace a un medio que no se puede incrustar acá.
   Del alto de una línea, no de un video: no finge ser lo que reemplaza. */
.linkrow{
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4);
  padding: var(--s-5) var(--s-gutter);
  border-bottom: var(--bw) solid var(--c-rule);
  color: var(--c-text-body);
  font-size: var(--t-small-plus);
  transition: color var(--dur-fast);
}
.linkrow:hover{ color: var(--c-text) }
.linkrow .lbl{ color: var(--c-text-mute); white-space: nowrap }

/* el video dentro de una figura: el pie ya trae su propia línea */
.figure--video .frame{ border-bottom: 0 }


/* ============================================================
   TRACK — bloque de audio
   Título, subtítulo y reproductor de Bandcamp con alto fijo,
   por el mismo motivo que .frame.
   ============================================================ */
/* la lista dentro de la columna de medios: mismo canal y misma línea
   de cierre que una figura, para que el audio entre en el ritmo */
.tracklist{
  padding: var(--s-6) var(--s-gutter);
  border-bottom: var(--bw) solid var(--c-rule);
}

.track{ padding: var(--s-3) 0; border-top: var(--bw) solid var(--c-rule-soft) }
.track:last-child{ border-bottom: var(--bw) solid var(--c-rule-soft) }
.track__sub{ color: var(--c-text-mute); font-size: var(--t-micro); margin-top: var(--s-05) }
.track__player{
  --track-h: 120px;
  margin-top: var(--s-3); height: var(--track-h);
  display: flex; align-items: center; justify-content: center;
  background: var(--c-surface-hover);
  border: var(--bw) solid var(--c-rule-soft);
  color: var(--c-text-disabled);
}
.track__player iframe{ width: 100%; height: var(--track-h); border: 0 }


/* ============================================================
   LINKLIST — lista de enlaces externos
   Etiqueta a la izquierda, flecha al margen derecho. Un enlace
   sin destino se muestra como "pendiente" en gris claro y no es
   accionable: el sitio puede publicarse incompleto sin mentir.
   ============================================================ */
.linklist li{ border-top: var(--bw) solid var(--c-rule-soft) }
.linklist li:last-child{ border-bottom: var(--bw) solid var(--c-rule-soft) }

.linklist a,
.linklist .is-pending{
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3);
  padding: var(--s-3) 0;
  color: var(--c-text-body);
  font-size: var(--t-small);
}
.linklist a{ transition: color var(--dur-fast) }
.linklist a:hover{ color: var(--c-text) }
.linklist .is-pending{ color: var(--c-text-body) }
.linklist .is-pending span{ color: var(--c-text-disabled) }


/* ============================================================
   MAILTO — enlace de contacto grande
   El único elemento del sitio que se comporta como titular
   accionable. El subrayado se oscurece al pasar por encima.
   ============================================================ */
.mailto{
  display: inline-block;
  font-size: var(--t-display-sm);
  font-weight: var(--w-light);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-mail);
  padding-bottom: var(--s-1);
  border-bottom: var(--bw) solid var(--c-rule-soft);
  transition: border-color var(--dur);
}
.mailto:hover{ border-color: var(--c-text) }


/* ============================================================
   DETAIL — ficha de obra
   Capa que cubre el área de contenido dejando el rail visible.
   Entra desde abajo con una traslación corta.
   Estados: reposo (oculta) · .is-on
   ============================================================ */
.detail{
  position: fixed; inset: 0 0 0 var(--rail-w); z-index: var(--z-detail);
  background: var(--c-paper);
  overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; transform: translateY(14px); pointer-events: none;
  transition: opacity var(--dur), transform var(--dur) var(--ease);
}
.detail.is-on{ opacity: 1; transform: none; pointer-events: auto }

/* barra: volver al índice + paginación entre obras */
.detail__bar{
  position: sticky; top: 0; z-index: var(--z-bar);
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-4);
  height: var(--bar-h); padding: 0 var(--s-gutter);
  background: var(--c-paper);
  border-bottom: var(--bw) solid var(--c-rule);
}
/* La barra es la única navegación disponible con la ficha abierta: a
   10px, «Index» y los números pedían apuntar. Van al mismo cuerpo que
   el encabezado de región, que es el otro elemento de orientación. */
.detail__bar .lbl{ font-size: var(--t-section-sm) }

.detail__pager{ display: flex; align-items: center; gap: var(--s-5); color: var(--c-text-mute) }
.detail__pager button{ transition: color var(--dur-fast) }
.detail__pager button:hover{ color: var(--c-text) }
.detail__pager button[disabled]{ opacity: .3; cursor: default }
.detail__pager span{ font-variant-numeric: tabular-nums; color: var(--c-text) }
.detail__back{ display: flex; align-items: center; gap: var(--s-2); color: var(--c-text) }
.detail__back:hover{ color: var(--c-text-mute) }

/* Cabecera: título grande contra la ficha técnica.
   Centrados entre sí, no alineados abajo: la tabla de la derecha crece
   o se achica según cuántos datos tenga la obra, y con align:end el
   título subía y bajaba de una obra a otra. Centrado queda quieto. */
.detail__head{
  display: grid; grid-template-columns: var(--split); gap: var(--s-region);
  align-items: center;
  padding: var(--s-8) var(--s-gutter);
  border-bottom: var(--bw) solid var(--c-rule);
}
.detail__title{
  font-size: var(--t-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
}
.detail__sub{ margin-top: var(--s-3); color: var(--c-text-mute); font-size: var(--t-small-plus) }

/* cuerpo: medios a la izquierda, texto fijo a la derecha.
   El texto queda pegado mientras la columna de imágenes scrollea,
   para que no haya que recordar qué se está mirando. */
.detail__body{ display: grid; grid-template-columns: var(--split); align-items: start }

.detail__text{
  position: sticky; top: var(--bar-h);
  padding: var(--s-block) var(--s-gutter);
}

.detail__media{ border-right: var(--bw) solid var(--c-rule) }
.detail__media figure{ margin: 0; border-bottom: var(--bw) solid var(--c-rule) }
.detail__media figcaption{
  padding: var(--s-2) var(--s-gutter);
  color: var(--c-text-mute);
  border-top: var(--bw) solid var(--c-rule-soft);
}


/* ============================================================
   CREDIT — pie de página
   ============================================================ */
.credit{
  display: flex; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-gutter);
  color: var(--c-text-mute);
}


/* ============================================================
   REFLUJO — único punto de quiebre (900px)
   Por debajo: el rail pasa arriba, todo lo partido se apila y
   nada queda fijo.
   ============================================================ */
@media (max-width: 900px){

  .rail{
    position: sticky; top: 0; inset: auto; width: auto;
    flex-direction: row; flex-wrap: wrap; align-items: center;
    gap: var(--s-3);
    border-right: 0;
    border-bottom: var(--bw) solid var(--c-rule);
  }
  .rail__roles,
  .rail__foot{ display: none }
  .rail-offset{ margin-left: 0 }

  /* wrap, no scroll: con cinco o más ítems (Bio, Works, Services,
     Contact, CV) la fila no entra en 375px y el último quedaba
     cortado contra el borde */
  .nav-check{ flex-direction: row; flex-wrap: wrap; gap: var(--s-3) var(--s-4); margin: 0 }

  .rail__tools{ margin-top: var(--s-3) }

  .split,
  .detail__head,
  .detail__body{ grid-template-columns: 1fr }

  /* apiladas no hace falta línea: cada bloque trae su propia etiqueta */
  .split__aside{ padding-top: var(--s-8) }

  .detail__media{ border-bottom: var(--bw) solid var(--c-rule) }
  .detail__text{ position: static }

  .detail{ inset: 0 }

  .grid{ grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) }

  /* la clave se apila sobre el valor */
  .rows__row{
    grid-template-columns: 1fr;
    gap: var(--s-3);
    padding-block: var(--s-6);
  }
  .rows__key{ padding-top: 0 }

  /* el año queda a la izquierda; obra y lugar se apilan a su derecha */
  .cv__row{
    grid-template-columns: 88px minmax(0, 1fr);
    row-gap: var(--s-1);
  }
  .cv__where{ grid-column: 2 }
}