/* RELAXIMO · /music/ · ESTRUCTURA J (EL ESTUDIO)
   =====================================================================
   Se carga DESPUES de estilo.css y motion.css, y solo en esta ruta. Todo
   lo de aqui cuelga de `body.estudio` o de `.hoja`, asi que no puede
   alcanzar a ninguna otra pagina.

   Cabecera, pie y navegacion son los de produccion y no se tocan: lo que
   cambia es el cuerpo del documento. Lomo fijo de 38 ch con la voz de
   Stefano a la izquierda; a la derecha, el material. Una sola interaccion:
   senalar una palabra marcada enciende su objeto.
   ===================================================================== */

@font-face {
  font-family: "Newsreader";
  /* SIL Open Font License 1.1 · vendor/fuentes/NEWSREADER_OFL.txt
     Copyright 2020 The Newsreader Project Authors. Variable: wght 200-800,
     opsz 6-72. Subconjunto latino basico, 89.520 B. */
  src: url("/vendor/fuentes/newsreader-opsz.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* Respaldo con METRICAS AJUSTADAS. Sin el, el cambio del tipo del sistema a
   Newsreader reflowa la prosa justificada del lomo y el CLS se dispara
   (medido: 0,253 en movil). Newsreader mide upm 2000 y avance de la "n"
   1095 = 0,5475 em; Times/Liberation mide 0,5 em. De ahi size-adjust
   109,5 %, y los override divididos por ese mismo factor. */
@font-face {
  font-family: "Newsreader respaldo";
  src: local("Times New Roman"), local("Liberation Serif"), local("Tinos"), local("Georgia");
  size-adjust: 109.5%;
  ascent-override: 67.1%;
  descent-override: 24.2%;
  line-gap-override: 0%;
  font-display: swap;
}

body.estudio {
  --humo: #8e8779;          /* 5,48:1 sobre el fondo */
  --lomo-ancho: 38ch;
  font-family: "Newsreader", "Newsreader respaldo", Georgia, serif;
  font-weight: 300;
  font-optical-sizing: auto;
}

/* main de produccion trae su propio relleno vertical y lo anula para el hero
   y para la cinta de seccion. Esta pagina necesita lo mismo: el documento
   empieza justo debajo de la cabecera y acaba justo encima del pie. */
.estudio main:has(> .hoja) { padding-top: 0; padding-bottom: 0; }

/* La reja vive FUERA de .envoltorio: el documento ocupa el ancho completo,
   que es lo que distingue a esta pagina de las demas. */
.estudio .hoja {
  display: grid;
  grid-template-columns: minmax(0, var(--lomo-ancho)) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "lomo portadilla"
    "lomo material";
  border-top: 1px solid var(--linea);
}
.estudio .lomo       { grid-area: lomo; }
.estudio .portadilla { grid-area: portadilla; }
.estudio .material   { grid-area: material; }
.estudio .portadilla { padding: clamp(1.4rem, 3.4vh, 2.6rem) clamp(1.1rem, 3vw, 3rem) 0; }

/* ---------------------------------------------------------------------------
   EL LOMO · la voz de Stefano. Prosa justificada, continua, pequena.
   El eje optico hace el trabajo: opsz 9 en el cuerpo, 11 en los epigrafes,
   7 en la nota del pie.
   --------------------------------------------------------------------------- */
.estudio .lomo {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow-y: auto;
  overflow-x: hidden;
  border-right: 1px solid var(--linea);
  padding: clamp(1.4rem, 3.4vh, 2.6rem) clamp(1.1rem, 2vw, 1.9rem) 4rem;
  font-size: 13.5px;
  line-height: 1.72;
  font-variation-settings: "opsz" 9;
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
  color: var(--tinta-apagada);
  scrollbar-width: thin;
  scrollbar-color: #2c2721 transparent;
}
.estudio .lomo h2 {
  margin: 2rem 0 .4rem;
  font-family: inherit;          /* gana a la regla de Syne de estilo.css */
  font-size: 14px;
  font-weight: 500;
  font-variation-settings: "opsz" 11;
  letter-spacing: .01em;
  color: var(--tinta);
  text-indent: 0;
  border-top: 0;                 /* el filete de seccion es de las otras paginas */
  padding-top: 0;
}
.estudio .lomo p { margin: 0; text-indent: 1.3em; font-size: inherit; }
.estudio .lomo h2 + p, .estudio .lomo p:first-of-type { text-indent: 0; }
.estudio .lomo em { font-style: italic; color: #c8c2b6; }
.estudio .lomo a { color: var(--acento); border-bottom: 1px solid #4b3b26; text-decoration: none; }

/* La microentrada: dos lineas factuales para quien aterrice aqui de fuera.
   Va en la voz del sitio, no en la suya, y por eso se marca distinta. */
.estudio .entrada-factual {
  margin: 0 0 1.4rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--linea);
  font-size: 12.5px;
  font-variation-settings: "opsz" 8;
  letter-spacing: .01em;
  color: var(--tinta);
  text-align: left;
  text-indent: 0;
}

/* La nota sobre el simbolo. Es dato de marca, no su voz: se aparta. */
.estudio .nota {
  margin-top: 2.2rem;
  padding-top: .9rem;
  border-top: 1px solid var(--linea);
  font-size: 11.5px;
  line-height: 1.6;
  font-variation-settings: "opsz" 7;
  color: var(--humo);
  text-align: left;
  text-indent: 0;
}
.estudio .nota b { display: block; color: var(--tinta-apagada); font-weight: 500; letter-spacing: .05em; text-transform: uppercase; font-size: 10px; margin-bottom: .35rem; }
.estudio .nota a { color: var(--acento); border-bottom: 1px solid #4b3b26; text-decoration: none; }

/* El compas como calderon: marca de parrafo, no ornamento. */
.estudio .calderon { display: inline-block; width: .74em; vertical-align: -.04em; margin-right: .3em; color: #6b6459; }
.estudio .calderon svg { width: 100%; height: auto; display: block; }

/* ---------------------------------------------------------------------------
   LA CORRESPONDENCIA · la unica interaccion de la pagina.
   Sin JavaScript, .enl es texto normal y todos los objetos se ven a plena
   luz: el apagado solo existe cuando el guion puede volver a encenderlo.
   --------------------------------------------------------------------------- */
.estudio .enl { color: var(--tinta); }
.estudio.liga-activa .enl { cursor: pointer; border-bottom: 1px dotted #5d564c; }
.estudio.liga-activa .enl:hover,
.estudio.liga-activa .enl:focus-visible { color: var(--acento); border-bottom-color: var(--acento); outline: none; }

/* ---------------------------------------------------------------------------
   COLUMNA DE MATERIAL
   --------------------------------------------------------------------------- */
.estudio .material { min-width: 0; padding: clamp(1.4rem, 3.4vh, 2.6rem) clamp(1.1rem, 3vw, 3rem) 5rem; }
.estudio .portadilla h1 {
  margin: 0 0 1.6rem;
  font-family: inherit;
  font-size: clamp(1.6rem, 1rem + 2.6vw, 3.4rem);
  font-weight: 200;
  font-variation-settings: "opsz" 60;
  line-height: 1.02;
  letter-spacing: -.016em;
  color: var(--tinta);
}
.estudio .material h2 {
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  font-variation-settings: "opsz" 8;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--humo);
  border-top: 0;
  padding-top: 0;
  margin: 2.4rem 0 .8rem;
}

.estudio .portadilla .entradilla {
  max-width: 46ch;
  margin: 0;
  font-family: inherit;
  font-size: clamp(1rem, .95rem + .35vw, 1.2rem);
  font-weight: 300;
  font-variation-settings: "opsz" 16;
  line-height: 1.5;
  color: var(--tinta-apagada);
}

/* LA FRASE. Es lo unico que compite con el titular, y a proposito. */
.estudio .frase {
  margin: 2.2rem 0 2.6rem;
  padding: 0;
  border: 0;
  font-size: clamp(1.4rem, .9rem + 1.9vw, 2.5rem);
  font-weight: 200;
  font-variation-settings: "opsz" 48;
  line-height: 1.12;
  letter-spacing: -.012em;
  color: var(--acento);
  text-indent: -.4em;            /* la comilla de apertura, fuera de caja */
}
.estudio .frase cite { display: block; margin-top: .6rem; font-style: normal; font-size: 11.5px; font-variation-settings: "opsz" 7; letter-spacing: .06em; text-transform: uppercase; color: var(--humo); text-indent: 0; }

/* Objetos de la mesa: una fila por pieza. */
.estudio .objeto {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 1.1rem;
  align-items: center;
  padding: .9rem 0;
  border-top: 1px solid var(--linea);
}
.estudio .objeto:last-of-type { border-bottom: 1px solid var(--linea); }
.estudio .objeto .num { width: 2ch; font-size: 12px; font-variation-settings: "opsz" 7; color: var(--humo); }
.estudio .objeto .que { font-size: clamp(1rem, .9rem + .5vw, 1.35rem); font-weight: 300; line-height: 1.2; }
.estudio .objeto .que small { display: block; margin-top: .15rem; font-size: 12px; font-variation-settings: "opsz" 8; color: var(--humo); }
.estudio .objeto .dur { font-size: 12px; font-variation-settings: "opsz" 7; color: var(--humo); }
.estudio .objeto[data-vivo] { background: var(--fondo-alto); }
.estudio .objeto[data-vivo] .que { color: var(--acento); }

/* Piezas visuales. El apagado NO baja el brillo: estas piezas son geometria
   luminosa sobre negro y restarles luz las deja en un rectangulo negro. Lo
   que se apaga es el COLOR — el oro se va y vuelve —, que es exactamente la
   correspondencia que J describe. */
.estudio .pieza { margin: 0 0 1.4rem; }
.estudio .pieza > figcaption { margin-top: .45rem; font-size: 11.5px; font-variation-settings: "opsz" 7; color: var(--humo); }
.estudio .pieza img, .estudio .pieza video {
  display: block; width: 100%; height: auto; max-width: 760px;
  border-radius: 2px; background: #000;
}
.estudio.liga-activa .pieza img,
.estudio.liga-activa .pieza video {
  /* 22/10 · `opacity:.62` dejaba el 47,7 % de los pixeles del DECK por debajo de 8.
     Se apaga el COLOR y se recoloca el brillo: el negro del render cae en 12,9,
     que es el negro de la pagina. */
  filter: grayscale(1) contrast(.86) brightness(.70);
  opacity: 1;
  transition: filter 420ms ease, opacity 420ms ease;
}
.estudio.liga-activa .pieza[data-vivo] img,
.estudio.liga-activa .pieza[data-vivo] video { filter: none; opacity: 1; }

/* El simbolo oficial como objeto que se mira, no como fondo que late.
   NO se dessatura en reposo: el manual de marca es explicito en que los
   acentos se distinguen por grosor y COLOR, y un compas sin ellos se lee
   como un circulo con un punto, que no es la marca. */
.estudio .simbolo { display: block; width: clamp(130px, 20vw, 210px); height: auto; margin: 0 0 1.4rem; color: var(--tinta); }
.estudio.liga-activa .simbolo { opacity: .5; transition: opacity 420ms ease; }
.estudio.liga-activa .simbolo[data-vivo] { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  /* EL PULSO · 100 ppm · lo unico que sobrevive de la prueba WebGL del 22/10.
     Un tiempo dura 0,6 s y el compas son doce: 7,2 s de vuelta. Los retardos
     son los tiempos 12 · 3 · 6 · 8 · 10 contados a ese ritmo —0 · 1,8 · 3,6 ·
     4,8 · 6,0 s— y ya estaban escritos aqui; lo unico que cambia es que el
     compas deja de esperar a que lo senalen y late solo.
     En reposo el pulso es de opacidad y nada mas: no toca la geometria, no
     reescala el trazo y no obliga a re-rasterizar el camino en cada cuadro.
     Al senalarlo sube de volumen con el gesto fuerte, que ya estaba aprobado. */
  .estudio .simbolo .acento { animation: acento-leve 7.2s linear infinite; }
  .estudio .simbolo .a12 { animation-delay: 0s; }
  .estudio .simbolo .a3  { animation-delay: 1.8s; }
  .estudio .simbolo .a6  { animation-delay: 3.6s; }
  .estudio .simbolo .a8  { animation-delay: 4.8s; }
  .estudio .simbolo .a10 { animation-delay: 6s; }
  .estudio .simbolo[data-vivo] .acento { animation-name: acento; }
}

/* El pulso en reposo. Muy poco recorrido a proposito: tiene que notarse que
   la pagina respira, no que algo parpadea detras del texto. */
@keyframes acento-leve {
  0%, 100% { opacity: .74; }
  2%       { opacity: 1; }
  30%      { opacity: .74; }
}
@keyframes acento {
  0%, 10%, 100% { opacity: 1; stroke-width: 10.4; }
  3%            { opacity: 1; stroke-width: 15.6; }
  22%           { opacity: .42; stroke-width: 10.4; }
}

/* Escucha y contacto: listas cortas, no secciones. */
.estudio .material ul.lista { margin: 0; padding-left: 1.1em; }
.estudio .material ul.lista li { margin: .3rem 0; font-size: 14px; font-variation-settings: "opsz" 10; }
.estudio .material a { color: var(--acento); }

/* ---------------------------------------------------------------------------
   MOVIL · el documento se endereza. El lomo deja de ser lomo y pasa a ser
   cabecera; el material va debajo. No hay cursor con el que senalar, asi que
   la correspondencia se apaga y todo se ve entero.
   --------------------------------------------------------------------------- */
@media (max-width: 880px) {
  /* El documento se endereza y el orden pasa a ser: titular, la frase, la voz
     de Stefano y despues el material. El lomo deja de ser lomo. */
  .estudio .hoja {
    display: flex;
    flex-direction: column;
  }
  .estudio .portadilla { order: 1; padding-bottom: 0; }
  .estudio .lomo       { order: 2; }
  .estudio .material   { order: 3; }
  .estudio .lomo {
    position: static; height: auto; overflow: visible;
    border-right: 0; border-bottom: 1px solid var(--linea);
    font-size: 14px;
  }
  .estudio .material { padding-top: 1.6rem; }
  .estudio.liga-activa .pieza img,
  .estudio.liga-activa .pieza video,
  .estudio.liga-activa .simbolo { filter: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .estudio * { animation: none !important; transition: none !important; }
}


/* ===========================================================================
   FASE 1 · ATMOSFERA DE INTERFAZ   (22/10)
   El vocabulario ya existia aprobado en la portada (`.hero-fondo`, `.hero-grano`).
   Aqui se extiende a /music/. Capa fija por DETRAS de todo: la legibilidad del
   texto no cambia en ningun punto.
   =========================================================================== */
html:has(body.estudio) { background: var(--fondo); }
body.estudio { background: transparent; }
.ambiente { position: fixed; inset: 0; z-index: -1; pointer-events: none; contain: strict; }
.ambiente > * { position: absolute; inset: 0; }

.amb-campo {
  background:
    radial-gradient(58% 46% at 14% 6%,  rgba(217,160,91,0.075) 0%, rgba(217,160,91,0) 66%),
    radial-gradient(54% 52% at 88% 88%, rgba(164,72,44,0.055) 0%, rgba(164,72,44,0) 70%),
    linear-gradient(168deg, #141211 0%, #0d0c0b 46%, #090807 100%);
}
.amb-haz {
  background: linear-gradient(104deg, rgba(244,241,236,0.050) 0%, rgba(244,241,236,0.016) 13%, rgba(244,241,236,0) 31%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,0.5) 42%, transparent 80%);
          mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,0.5) 42%, transparent 80%);
}
.amb-vineta {
  background: radial-gradient(ellipse 116% 94% at 46% 38%,
    transparent 34%, rgba(0,0,0,0.34) 76%, rgba(0,0,0,0.60) 100%);
}
.amb-grano {
  opacity: 0.09;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* EL CANTO DE LA PIEZA  (22/10)
   El render definitivo llega ILUMINADO hasta el borde: a media altura por la
   izquierda la pared vale 62 y la pagina 12. Se deshilacha el canto del propio
   medio con dos gradientes lineales cruzados: deja de haber frontera porque el
   medio se funde con el ambiente, que es el mismo a los dos lados.
   24 px a los lados y abajo, 32 arriba. Por encima de eso el aro pierde brillo
   y la cifra mejora mientras la imagen empeora. */
.estudio .pieza { position: relative; }
.estudio .pieza > img,
.estudio .pieza > video {
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 32px, #000 calc(100% - 24px), transparent 100%);
  mask-image:
    linear-gradient(to right,  transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 32px, #000 calc(100% - 24px), transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.estudio .pieza > figcaption { position: relative; }
.estudio .simbolo { filter: drop-shadow(0 0 42px rgba(0, 0, 0, 0.85)); }

/* ===========================================================================
   LA CAPA DE ESPACIO  ·  prueba aislada
   El lienzo vive DENTRO de .ambiente, entre el campo y el vineteado, para que
   el viñeteo y el grano de la Fase 1 sigan cayendo encima: lo que se ve es el
   mismo acabado, con una sala detras en vez de un degradado.
   La mascara lateral protege la columna de texto: el espacio se disuelve antes
   de llegar a la prosa, que es donde el contraste no se negocia.
   =========================================================================== */
.amb-espacio {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 1200ms ease;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 22%, rgba(0,0,0,.30) 38%, #000 64%, #000 100%);
          mask-image: linear-gradient(to right, transparent 0%, transparent 22%, rgba(0,0,0,.30) 38%, #000 64%, #000 100%);
}
html.espacio-vivo .amb-espacio { opacity: 1; }

/* Con la preferencia de menos movimiento el guion ni siquiera arranca, asi que
   el lienzo no llega a existir. Esta regla es el cinturon: si existiera, no se
   veria. */
@media (prefers-reduced-motion: reduce) {
  .amb-espacio { display: none !important; }
}

/* En movil el espacio pierde el polvo y baja de resolucion desde el guion.
   Aqui ademas se retira hacia el fondo para no competir con el texto, que en
   una columna estrecha pasa por encima de todo el cuadro. */
@media (max-width: 720px) {
  .amb-espacio {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.35) 30%, #000 70%);
            mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.35) 30%, #000 70%);
    opacity: .52;
  }
  html.espacio-vivo .amb-espacio { opacity: .52; }
}