/* ==========================================================================
   HOOD MONEY MUSIC — hoja de estilo única
   --------------------------------------------------------------------------
   Sitio estático. Sin PHP, sin base de datos, sin compilación y sin JavaScript.

   UNA petición a terceros, y una sola: el iframe del reproductor de Spotify en
   la sección Tracks, elegido por el cliente. Todo lo demás —tipografías, fotos,
   iconos— se sirve desde este dominio. Esta línea decía "sin peticiones a
   terceros" y dejó de ser cierta al añadir el reproductor; se corrige aquí en
   vez de dejar el comentario mintiendo.

   Registro: serhatdurmus.com, según las capturas entregadas. Negro, un solo
   acento ROJO, tipografía display enorme que sangra por los costados, fotografía
   casi monocroma con grano, carrusel con los elementos laterales apagados y
   marcas de índice, y un par de fotos rotadas en la sección de historia.

   Todo el movimiento del carrusel es CSS: scroll-snap para el desplazamiento,
   `animation-timeline: view()` para el apagado de los laterales y `:has()` con
   `:target` para la marca activa. No hay JavaScript en este sitio y no lo va a
   haber: es una cuenta que estuvo comprometida.
   ========================================================================== */

/* --- 1. Tipografía autoalojada -------------------------------------------
     Anton            — display, condensada y pesada, un solo peso
     Barlow Condensed — encabezados y etiquetas
     Barlow           — texto corrido
   Autoalojada en woff2. Nunca @import de Google Fonts: es una petición a un
   tercero y este sitio no hace ninguna.
   -------------------------------------------------------------------------- */
@font-face { font-family:"Anton";  src:url("/assets/fonts/anton-latin-400-normal.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"BarlowC";src:url("/assets/fonts/barlow-condensed-latin-600-normal.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:"BarlowC";src:url("/assets/fonts/barlow-condensed-latin-700-normal.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"Barlow"; src:url("/assets/fonts/barlow-latin-400-normal.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Barlow"; src:url("/assets/fonts/barlow-latin-600-normal.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; }

/* --- 2. Tokens -----------------------------------------------------------
   DOS ROJOS, y no es indecisión. Ningún rojo hace los dos trabajos:

     rojo        sobre negro   sobre panel-2   BLANCO encima
     #E11B22        4.13           3.59            4.79
     #F02D33        4.83           4.20            4.09
     #FF3B30        5.58           4.85            3.55
     #D01018        3.55           3.09            5.57

   Un rojo lo bastante claro para leerse COMO TEXTO sobre negro es demasiado
   claro para llevar texto blanco ENCIMA, y viceversa. Es la misma trampa que el
   oro de la versión anterior (blanco sobre oro = 1.63:1), sólo que el rojo la
   esconde mejor porque el fallo cae en 3.5 y no en 1.6.

     --red      #FF3B30  texto y acento. 4.85:1 en la superficie MÁS clara
                         en la que se posa, no sólo sobre el negro de fondo.
     --red-fill #D01018  relleno de botón y franja. Blanco encima = 5.57:1.
                         Su borde contra el fondo mide 3.55:1 — por encima del
                         3:1 que pide WCAG 1.4.11 para un límite no textual.

   El logo es blanco y negro puro, así que el acento es una decisión, no una
   consecuencia: es el rojo de la referencia, pedido explícitamente.
   -------------------------------------------------------------------------- */
:root{
  --black:#0A0A0A;
  --panel:#141414;
  --panel-2:#1C1B19;
  --line:#2E2C28;
  --line-2:#4A4741;

  --red:#FF3B30;        /* 5.58 negro | 5.19 panel | 4.85 panel-2 */
  --red-fill:#D01018;   /* blanco encima 5.57 */
  --text:#E8E6E1;       /* 15.87 */
  --muted:#A3A099;      /* 7.59  */

  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem;
  --s5:1.5rem; --s6:2rem;  --s7:3rem;   --s8:4.5rem; --s9:7rem;

  --display:"Anton", Impact, "Arial Narrow Bold", sans-serif;
  --head:"BarlowC","Barlow Condensed",Impact,sans-serif;
  --body:"Barlow",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;

  --t:220ms;
}

/* --- 3. Base -------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--black);
  color:var(--text);
  font-family:var(--body);
  font-size:1.0625rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3{margin:0 0 var(--s4);line-height:.9;text-transform:uppercase}
h1,h2{font-family:var(--display);font-weight:400;letter-spacing:-.01em}
h3{font-family:var(--head);font-weight:700;line-height:1.05;letter-spacing:.01em}

h1{font-size:clamp(3.4rem,15vw,12rem)}
h2{font-size:clamp(2.4rem,8vw,5.5rem)}
h3{font-size:clamp(1.25rem,2.4vw,1.6rem)}

p{margin:0 0 var(--s4);max-width:62ch}
a{color:var(--red);text-underline-offset:3px}
a:hover{color:#fff}
img,svg{max-width:100%;height:auto;display:block}
ul{list-style:none;padding:0;margin:0}

:focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:2px}
:target{scroll-margin-top:6rem}

.skip-link{
  position:absolute;left:var(--s4);top:-100px;z-index:100;
  background:var(--red-fill);color:#fff;
  padding:var(--s3) var(--s5);font-family:var(--head);font-weight:700;
  text-decoration:none;transition:top var(--t) ease;
}
.skip-link:focus{top:var(--s4);color:#fff}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* --- 4. Contenedor -------------------------------------------------------- */
.wrap{width:100%;max-width:1240px;margin-inline:auto;padding-inline:var(--s5)}
@media (min-width:900px){.wrap{padding-inline:var(--s7)}}
.section{padding-block:clamp(var(--s8),10vw,var(--s9))}

.kicker{
  font-family:var(--head);font-weight:700;
  font-size:.875rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--red);margin:0 0 var(--s4);
  /* max-width:none anula el `p{max-width:62ch}` de la base. Con el tope puesto,
     el kicker medía 372px en vez del ancho del contenedor: la línea del ::after
     se cortaba a un tercio, y el kicker centrado de Tracks no podía centrarse
     porque su caja ya estaba pegada a la izquierda. Medido, no supuesto. */
  max-width:none;
  display:flex;align-items:center;gap:var(--s4);
}
.kicker::after{content:"";flex:1;height:1px;background:var(--line)}

.lede{font-size:clamp(1.05rem,1.7vw,1.25rem);color:var(--muted);max-width:56ch}

/* --- 5. Botones ----------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  min-height:52px;padding:var(--s3) var(--s6);
  font-family:var(--head);font-weight:700;font-size:1.0625rem;
  letter-spacing:.06em;text-transform:uppercase;text-decoration:none;
  border:2px solid transparent;cursor:pointer;
  transition:background-color var(--t) ease,color var(--t) ease,
             border-color var(--t) ease,transform var(--t) ease;
}
.btn:hover{transform:translateY(-2px)}
/* Blanco sobre --red-fill = 5.57:1. Sobre --red mediría 3.55 y reprobaría. */
.btn--red{background:var(--red-fill);color:#fff}
.btn--red:hover{background:#fff;color:var(--black)}
.btn--ghost{background:transparent;color:var(--text);border-color:var(--line-2)}
.btn--ghost:hover{border-color:var(--text);color:#fff;background:rgba(255,255,255,.06)}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s3)}

/* --- 6. Encabezado -------------------------------------------------------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(10,10,10,.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);min-height:84px}
.brand{display:inline-flex;align-items:center;line-height:0}
/* 54px, no 40. El logo es un lockup APILADO — disco, estrellas, HOOD sobre
   MONEY sobre MUSIC — no una firma horizontal. A 40px de alto las tres líneas
   miden ~7px cada una y se ven como una mancha. */
.brand__logo{height:54px;width:auto}
.site-header .btn{min-height:44px;padding:var(--s2) var(--s5);font-size:.9375rem}
@media (max-width:420px){.brand__logo{height:42px}}

/* --- 7. Hero -------------------------------------------------------------
   El arte del hero viene terminado del cliente. Aquí no se le pinta nada
   encima: ni titular, ni velo, ni gradiente. Lo único que hace este bloque es
   enseñarlo ENTERO y que se vea igual de bien en un teléfono que en un monitor.

   POR QUÉ NUNCA SE RECORTA. Medido sobre el archivo: el lettering rojo llega a
   1.8% de los dos bordes laterales. Recortar de lado corta letras, y la
   proporción más vertical que conserva el texto es 1.71:1 — sigue siendo
   apaisada. No existe un recorte para móvil: hay que enseñarlo completo.

   `object-fit:contain` en vez de `cover`, por lo mismo. Cuando la ventana es
   más apaisada que 16:9 aparecen bandas a los lados — y no se ven, porque los
   bordes del arte miden 0.6 de luminancia sobre un fondo de página que mide 10.
   -------------------------------------------------------------------------- */
.hero{background:#000;overflow:clip}
.hero__h1{
  /* Es un H1 de verdad, pero su texto está oculto: el nombre vive dentro del
     JPEG. Se resetean los estilos de titular para que no reserve altura. */
  /* font-size NORMAL, no 0. Con 0 el H1 se declaraba a 0px y la comprobación de
     tamaño mínimo de texto lo marcaba en los once viewports — con razón: un
     encabezado a 0px es exactamente lo que hace un maquetador cuando quiere
     esconder texto de un buscador. Quien suprime el espacio es `line-height:0`,
     no el tamaño; el H1 sólo contiene la imagen (en bloque) y un span oculto y
     absoluto, así que ninguno de los dos aporta altura. */
  margin:0;line-height:0;font-size:1rem;letter-spacing:normal;
}
.hero__h1 picture{display:block}
.hero__h1 .vh{line-height:1.4}
.hero__img{
  display:block;width:100%;height:auto;
  /* La caja queda reservada por aspect-ratio y por width/height en el HTML, así
     que la imagen puede llegar tarde sin mover un píxel de lo que va debajo. */
  aspect-ratio:1600/900;
  object-fit:contain;
  /* Tope de altura: en un monitor alto, un 16:9 a ancho completo se pasaría de
     la ventana y habría que hacer scroll para ver el lettering, que es
     justamente lo que no puede pasar. */
  max-height:88svh;
}

/* --- 7b. Bajada, ya fuera del hero --------------------------------------- */
.intro{padding-block:var(--s7) var(--s6);border-bottom:1px solid var(--line)}
.intro__grid{display:grid;grid-template-columns:1fr;gap:var(--s5);align-items:end}
@media (min-width:900px){
  .intro__grid{grid-template-columns:minmax(0,1fr) auto;gap:var(--s8)}
}
.hero__meta{
  display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);
  font-family:var(--head);font-weight:600;
  font-size:.9375rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text);margin:0 0 var(--s4);max-width:none;
}
.hero__meta span{display:inline-flex;align-items:center;gap:var(--s3)}
.hero__meta span::before{content:"";width:7px;height:7px;background:var(--red);flex:none}
.intro .lede{margin-bottom:0}

/* --- 8. Franja de géneros -------------------------------------------------
   Relleno --red-fill con texto BLANCO: 5.57:1. Con --red habría medido 3.55 y
   es una franja de texto, no un límite decorativo. */
.strip{background:var(--red-fill);color:#fff;overflow:clip}
.strip__inner{
  display:flex;gap:var(--s6);align-items:center;
  padding-block:var(--s4);margin:0;max-width:none;
  font-family:var(--display);font-size:clamp(1.1rem,2.6vw,1.9rem);
  text-transform:uppercase;white-space:nowrap;justify-content:center;flex-wrap:wrap;
}
.strip__inner i{font-style:normal;opacity:.55}

/* --- 9. Carrusel ---------------------------------------------------------
   El carrusel de la referencia, sin JavaScript:

   · desplazamiento y encaje  -> scroll-snap
   · laterales apagados       -> animation-timeline: view(inline). Es una
     animación dirigida por scroll, no por tiempo: cada lámina se atenúa según
     dónde está dentro del riel. Donde el navegador no lo soporte, las láminas
     se quedan a opacidad plena — se pierde el matiz, no la función.
   · marca de índice activa   -> :has() + :target. El enlace #foto-3 marca su
     propia pastilla sin una línea de script.
   -------------------------------------------------------------------------- */
.rail-wrap{position:relative}
.rail{
  display:grid;grid-auto-flow:column;
  grid-auto-columns:minmax(78vw,1fr);
  gap:var(--s4);
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-padding-inline:var(--s5);
  padding-inline:var(--s5);padding-block:var(--s2) var(--s5);
  scrollbar-width:thin;scrollbar-color:var(--line-2) transparent;
  overscroll-behavior-inline:contain;
}
@media (min-width:700px){.rail{grid-auto-columns:minmax(360px,1fr)}}
@media (min-width:900px){.rail{scroll-padding-inline:var(--s7);padding-inline:var(--s7)}}

.rail::-webkit-scrollbar{height:6px}
.rail::-webkit-scrollbar-track{background:var(--panel)}
.rail::-webkit-scrollbar-thumb{background:var(--line-2)}

.slide{
  scroll-snap-align:start;margin:0;
  position:relative;background:var(--panel-2);
  border:1px solid var(--line);
  transition:border-color var(--t) ease;
}
.slide:hover{border-color:var(--red)}
.slide img{width:100%;aspect-ratio:4/5;object-fit:cover}

.slide figcaption{
  display:flex;align-items:baseline;gap:var(--s3);
  padding:var(--s4) var(--s5) var(--s5);
}
.slide__n{
  font-family:var(--display);font-size:1.5rem;color:var(--red);
  line-height:1;flex:none;
}
.slide__t{
  font-family:var(--head);font-weight:700;font-size:1.0625rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--text);
}
.slide__s{display:block;font-weight:600;letter-spacing:.14em;font-size:.875rem;color:var(--muted)}

/* Apagado de los laterales, dirigido por la posición en el riel. */
@supports (animation-timeline: view()) {
  /* Suelo en .55, no en .28. Las cinco fotos son de noche: su luminancia media
     ronda 35 de 255. Al 28% sobre un fondo #0A0A0A la lámina lateral no se ve
     APAGADA, se ve VACÍA — en la captura de escritorio parecían tarjetas negras
     rotas. El valor que funciona en la referencia no se traslada, porque allí
     las láminas son portadas de disco y aquí son fotos oscuras. */
  @keyframes rail-dim{
    entry 0%   {opacity:.55}
    entry 100% {opacity:1}
    exit  0%   {opacity:1}
    exit  100% {opacity:.55}
  }
  .slide{
    animation:rail-dim linear both;
    animation-timeline:view(inline);
    animation-range:entry 0% entry 90%, exit 10% exit 100%;
  }
}

/* Marcas de índice. Son enlaces reales: navegan, no sólo indican. */
.ticks{
  display:flex;gap:var(--s2);align-items:center;
  padding-inline:var(--s5);padding-top:var(--s2);
}
@media (min-width:900px){.ticks{padding-inline:var(--s7)}}
.ticks a{
  /* 24px de alto real + 8px de separación: por debajo de 24x24 WCAG 2.5.8 pide
     que la separación compense el tamaño, y estas marcas son deliberadamente
     finas. Se les da altura de objetivo con padding, no con la marca visible. */
  display:grid;place-items:center;
  width:44px;height:44px;padding:0;
  text-decoration:none;
}
.ticks a::before{
  content:"";display:block;width:28px;height:3px;
  background:var(--line-2);transition:background-color var(--t) ease;
}
.ticks a:hover::before{background:var(--text)}
.rail-wrap:has(#foto-1:target) .ticks a:nth-child(1)::before,
.rail-wrap:has(#foto-2:target) .ticks a:nth-child(2)::before,
.rail-wrap:has(#foto-3:target) .ticks a:nth-child(3)::before,
.rail-wrap:has(#foto-4:target) .ticks a:nth-child(4)::before,
.rail-wrap:has(#foto-5:target) .ticks a:nth-child(5)::before{background:var(--red)}
.rail-wrap:not(:has(.slide:target)) .ticks a:first-child::before{background:var(--red)}

/* --- 9b. Tracks: casetes + reproductor -----------------------------------
   La sección de la captura: título centrado, carrusel donde la pieza del centro
   manda y las de los lados se encogen y se apagan, y el nombre en ROJO debajo
   de la que está activa.

   El escalado va en `transform`, que NO afecta a la maqueta — por eso las
   piezas pueden crecer y encogerse sin mover nada alrededor y sin sumar ni un
   punto de CLS.
   -------------------------------------------------------------------------- */
.tracks-head{text-align:center}
.tracks-head .lede{margin-inline:auto}
.kicker--mid{justify-content:center}
.kicker--mid::after{display:none}
.tracks-head h2{margin-bottom:var(--s4)}

.rail--tapes{
  grid-auto-columns:minmax(80vw,1fr);
  padding-block:var(--s6) var(--s5);
  align-items:center;
}
@media (min-width:700px){.rail--tapes{grid-auto-columns:minmax(440px,1fr)}}

.tape{position:relative;margin:0;scroll-snap-align:center;text-align:center}
.tape__body{
  position:relative;aspect-ratio:1100/880;
  /* La caja está reservada por aspect-ratio, así que la foto puede llegar tarde
     sin empujar nada: es la diferencia entre CLS 0.001 y CLS 0.2. */
}
/* La FOTO real del casete, recortada sobre transparencia — flota sobre el
   negro, sin caja ni marco. Sustituye a la carcasa que yo había dibujado en
   SVG: un render bueno sigue pareciendo un render, y ahora hay foto.
   El envejecido, el viraje frío y el título a mano (deformado al plano de la
   etiqueta, inclinada 1.53°) se hornean en el PNG — ver build-src/make_tapes.py.
   No lleva arte de disco: el cliente lo pidió así. */
.tape__photo{
  width:100%;height:100%;object-fit:contain;
  /* Sin sombra CSS: la sombra ya viene en el propio PNG, hecha a partir del
     contorno real de la pieza. Una segunda sombra rectangular por debajo
     delataría que hay una caja. */
}

/* Toda la pieza es el objetivo táctil, no sólo el título. */
.tape__hit{position:absolute;inset:0;z-index:3;border-radius:4px}
.tape__title{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.5rem,3.4vw,2.4rem);line-height:1;
  color:var(--muted);margin:var(--s5) 0 var(--s1);
  transition:color var(--t) ease;
}
.tape__sub{
  font-family:var(--head);font-weight:600;font-size:.875rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:0;
}
/* Rojo en la activa, como el "BLACK DESERT" de la referencia. El primero queda
   en rojo mientras no se haya elegido ninguna. */
.tape:target .tape__title,
.tracks:not(:has(.tape:target)) .tape:first-child .tape__title{color:var(--red)}

@supports (animation-timeline: view()) {
  @keyframes tape-focus{
    entry 0%   {opacity:.35; transform:scale(.76)}
    entry 100% {opacity:1;   transform:scale(1)}
    exit  0%   {opacity:1;   transform:scale(1)}
    exit  100% {opacity:.35; transform:scale(.76)}
  }
  .tape__body{
    animation:tape-focus linear both;
    animation-timeline:view(inline);
    animation-range:entry 0% entry 95%, exit 5% exit 100%;
  }
}

/* --- 9c. Reproductor de Spotify -----------------------------------------
   UNO visible a la vez. Cada iframe pesa cerca de un mega; cinco a la vez
   harían de esta sección la parte más lenta del sitio.

   El cambio es CSS puro: `:target` marca el casete elegido y `:has()` sube esa
   información hasta el contenedor para encender el reproductor que le toca. Sin
   una línea de JavaScript, en un sitio de una cuenta que estuvo comprometida.

   `loading="lazy"` en los iframes: los que están en display:none no llegan a
   entrar en el viewport, así que el navegador no los descarga hasta que hacen
   falta. Comprobado contando peticiones de red, no suponiéndolo.
   -------------------------------------------------------------------------- */
.players{max-width:760px;margin-inline:auto;padding-inline:var(--s5);margin-top:var(--s6)}
@media (min-width:900px){.players{padding-inline:var(--s7)}}
.player{display:none}
.player iframe{display:block;width:100%;border:0;border-radius:12px}
.tracks:not(:has(.tape:target)) .player:first-child{display:block}
.tracks:has(#track-1:target) .player:nth-child(1){display:block}
.tracks:has(#track-2:target) .player:nth-child(2){display:block}
.tracks:has(#track-3:target) .player:nth-child(3){display:block}
.tracks:has(#track-4:target) .player:nth-child(4){display:block}
.players__note{
  margin:var(--s4) 0 0;max-width:none;text-align:center;
  font-size:.875rem;color:var(--muted);
}

/* --- 10. Argumento de rango ----------------------------------------------- */
.range{display:grid;grid-template-columns:1fr;gap:var(--s6)}
@media (min-width:900px){.range{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s8)}}
.range__item p{color:var(--muted);margin-bottom:0}
/* `p.range__num`, no `.range__num` a secas. `.range__item p` puntúa (0,1,1) y
   una clase sola puntúa (0,1,0): el gris ganaba y los números salían apagados
   en vez de rojos. Se veía en la captura, no en ninguna comprobación — el mismo
   fallo venía arrastrándose desde la versión dorada sin que nadie lo notara. */
.range__item p.range__num{
  font-family:var(--display);font-size:clamp(4rem,11vw,8rem);
  color:var(--red);line-height:.8;margin-bottom:var(--s3);
}
.range__item h3{color:var(--text)}

/* --- 11. Par de fotos rotadas --------------------------------------------
   El gesto de la sección de historia en la referencia. La rotación es pequeña
   —2.5 y 3 grados— porque a más grados deja de leerse como un par de fotos
   sobre una mesa y empieza a leerse como un error de maquetación.

   Las dos fotos reservan su caja con width/height y aspect-ratio, así la
   rotación no desplaza nada al cargar: es la diferencia entre un CLS de 0.001 y
   uno de 0.2.
   -------------------------------------------------------------------------- */
/* Dos columnas a partir de 1080px, no de 940. A 1000px de ventana la columna
   de texto medía 365px y el párrafo caía a 44 caracteres por renglón: el ojo
   salta de línea demasiado seguido y el texto se lee a tirones. El ancho de la
   columna no lo dice — lo dice la línea RENDERIZADA, que es lo que mide
   audit_desktop.py con Range.getClientRects(). */
.story{display:grid;grid-template-columns:1fr;gap:var(--s8);align-items:center}
@media (min-width:1080px){.story{grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:var(--s8)}}
@media (min-width:1240px){.story{gap:var(--s9)}}

.pair{position:relative;padding-block:var(--s5) var(--s7);display:flex;justify-content:center}
.pair figure{margin:0;position:relative;width:min(56%,296px)}
.pair img{
  width:100%;aspect-ratio:3/4;object-fit:cover;
  border:1px solid var(--line);background:var(--panel-2);
  /* El halo negro separa la foto de delante de la de atrás. Sin él, dos fotos
     casi monocromas superpuestas se leen como una sola imagen confusa. */
  box-shadow:0 0 0 6px var(--black), 0 18px 40px rgba(0,0,0,.55);
}
/* Solape del 6%, no del 14%. Al 14% la foto de delante tapaba al sujeto de la
   de atrás y se comía su pie de foto: el gesto de "dos fotos sobre la mesa"
   sólo funciona si las dos siguen siendo legibles como fotos. */
.pair figure:first-child{transform:rotate(-3deg);z-index:1}
.pair figure:last-child{transform:rotate(3.5deg);margin-left:-6%;margin-top:11%;z-index:2}
.pair figcaption{
  position:absolute;left:0;right:0;bottom:calc(var(--s5) * -1);z-index:3;
  font-family:var(--head);font-weight:600;font-size:.8125rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);text-align:center;
}

/* --- 12. Artistas --------------------------------------------------------- */
/* 1 / 2 / 4 columnas, no 1 / 2 / 3. El roster son CUATRO personas: con tres
   columnas la cuarta tarjeta se queda sola en una fila y la rejilla se ve rota.
   Dos y cuatro dividen exacto. */
.roster{display:grid;grid-template-columns:1fr;gap:var(--s5)}
@media (min-width:640px){.roster{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1120px){.roster{grid-template-columns:repeat(4,minmax(0,1fr))}}

.artist{
  position:relative;
  background:var(--panel);
  border:1px solid var(--line);
  display:flex;flex-direction:column;
  transition:border-color var(--t) ease,transform var(--t) ease;
}
.artist:hover{border-color:var(--red);transform:translateY(-3px)}

.artist__media{
  position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--panel-2);
  display:grid;place-items:center;
}
.artist__media img{width:100%;height:100%;object-fit:cover}

/* Marcador de foto pendiente. Se ve DELIBERADO, no roto: iniciales enormes
   sobre un patrón diagonal. Una foto real lo reemplaza sin tocar el CSS.
   Siguen aquí a propósito: tengo cinco fotos del crew y no sé qué cara
   corresponde a qué nombre. Poner una foto en la tarjeta equivocada es un error
   con el nombre de una persona encima. */
.artist__ph{
  width:100%;height:100%;display:grid;place-items:center;
  font-family:var(--display);font-size:clamp(3rem,7vw,4.5rem);
  color:#3A3833;
  background:repeating-linear-gradient(135deg, #1C1B19 0 14px, #171614 14px 28px);
}
.artist__body{padding:var(--s5);display:flex;flex-direction:column;gap:var(--s3);flex:1}
.artist__role{
  /* 14px, no 13px. En mayúsculas y con tracking abierto, 13px en un teléfono a
     la distancia a la que se sostiene se lee mal — y este renglón lleva el rol
     de la persona, que es información, no adorno. */
  font-family:var(--head);font-weight:700;font-size:.875rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--red);
}
.artist__name{font-family:var(--display);font-size:clamp(1.6rem,3vw,2.1rem);line-height:.95;text-transform:uppercase;margin:0}
.artist__genre{color:var(--muted);font-size:.9688rem;margin:0}
.artist__links{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:auto;padding-top:var(--s3)}
.artist__links a{
  display:inline-flex;align-items:center;gap:var(--s2);
  min-height:44px;padding:var(--s2) var(--s4);
  border:1px solid var(--line-2);color:var(--text);
  font-family:var(--head);font-weight:600;font-size:.875rem;
  letter-spacing:.08em;text-transform:uppercase;text-decoration:none;
  transition:border-color var(--t) ease,color var(--t) ease,background-color var(--t) ease;
}
.artist__links a:hover{border-color:var(--red);color:var(--red);background:rgba(255,59,48,.09)}
.artist__links .pending{color:var(--muted);border-style:dashed;pointer-events:none}

/* --- 13. Estudio ---------------------------------------------------------- */
.studio{background:var(--panel);border-block:1px solid var(--line)}
.studio__grid{display:grid;grid-template-columns:1fr;gap:var(--s6)}
@media (min-width:940px){.studio__grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--s8);align-items:center}}
.studio__list{display:grid;gap:var(--s4);margin-top:var(--s5)}
.studio__list li{display:flex;gap:var(--s4);align-items:flex-start;color:var(--muted)}
.studio__list b{color:var(--text);font-family:var(--head);font-weight:700;letter-spacing:.02em;display:block;text-transform:uppercase;font-size:1.0625rem}
.studio__list span::before{content:"";display:block;width:10px;height:10px;background:var(--red);margin-top:.55rem;flex:none}

/* --- 14. Contacto --------------------------------------------------------- */
.contact__grid{display:grid;grid-template-columns:1fr;gap:var(--s6)}
@media (min-width:860px){.contact__grid{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--s8)}}
.datos{display:grid;gap:0}
.datos div{padding-block:var(--s4);border-top:1px solid var(--line)}
.datos div:last-child{border-bottom:1px solid var(--line)}
.datos dt{
  font-family:var(--head);font-weight:700;font-size:.8125rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:var(--s1);
}
.datos dd{margin:0;font-family:var(--head);font-weight:700;font-size:1.25rem;letter-spacing:.01em}
.datos dd a{color:var(--text);text-decoration:none}
.datos dd a:hover{color:var(--red)}
/* Segunda línea de la dirección: el código postal y la ciudad no necesitan el
   mismo peso que la calle, pero sí tienen que leerse. 14px, no 13. */
.datos__sub{
  display:block;font-family:var(--body);font-weight:400;
  font-size:.875rem;letter-spacing:0;color:var(--muted);margin-top:var(--s1);
}

/* --- 15. Pie -------------------------------------------------------------- */
.site-footer{border-top:1px solid var(--line);padding-block:var(--s7) var(--s5);font-size:.9375rem;color:var(--muted)}
.footer__grid{display:grid;grid-template-columns:1fr;gap:var(--s6);padding-bottom:var(--s6)}
@media (min-width:760px){.footer__grid{grid-template-columns:1.6fr 1fr 1fr}}
.footer__grid h2{
  font-family:var(--head);font-size:.8125rem;letter-spacing:.2em;
  color:var(--muted);margin-bottom:var(--s3);font-weight:700;line-height:1.4;
}
.footer__list li{margin-bottom:var(--s3)}
.footer__list a{color:var(--text);text-decoration:none}
.footer__list a:hover{color:var(--red)}
.footer__bottom{
  padding-top:var(--s5);border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);justify-content:space-between;
}
.footer__bottom p{margin:0;max-width:none}

/* --- 16. Movimiento reducido ---------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .btn:hover,.artist:hover{transform:none}
  /* La rotación del par se queda: es composición, no movimiento. Lo que se
     apaga es el atenuado del riel, que sí es una animación. */
  .slide{animation:none!important;opacity:1!important}
}

/* --- 17. Impresión -------------------------------------------------------- */
@media print{
  .site-header,.skip-link,.btn-row,.ticks{display:none}
  body,.studio,.strip{background:#fff!important;color:#000!important}
  h1,h2,h3,.artist__name,.slide__t{color:#000!important}
  .rail{display:block;overflow:visible}
  .pair figure{transform:none!important;margin:0 0 var(--s4)!important;width:100%}
}

/* --- 18. Utilidades ------------------------------------------------------
   Existen porque la CSP de este sitio es `style-src 'self'` sin
   'unsafe-inline': cualquier atributo style="" queda BLOQUEADO por el navegador
   y el margen simplemente no se aplica — en silencio. Se descubrió midiendo, no
   leyendo. La alternativa era añadir 'unsafe-inline' a la política, es decir,
   debilitar la seguridad de un sitio de una cuenta comprometida para ahorrarse
   seis clases. No.
   -------------------------------------------------------------------------- */
.mt-6{margin-top:var(--s6)}
.mt-4{margin-top:var(--s4)}
.mb-8{margin-bottom:var(--s8)}
.bg-panel-2{background:var(--panel-2)}
.w-34{max-width:34ch}
.red{color:var(--red)}
.h1--404{font-size:clamp(2.6rem,9vw,6rem);margin-inline:0}