/* ─────────────────────────────────────────────────────────────────────
   PALETA POR ROLES

   El color del sitio se define por lo que hace cada tono, no por cómo se
   llama: fondo, superficie, borde, texto, acento. Los nombres antiguos
   (--black, --amber, …) siguen existiendo y ahora derivan de los roles,
   así que las 1.300 reglas que ya los usan no cambian.

   Esto es lo que permite que cada álbum tenga su propio mundo cromático
   sin duplicar una sola hoja de estilos: un álbum solo redefine los roles.
   La continuidad del sitio la sostienen la retícula, la tipografía y el
   ritmo, que no cambian nunca.
   ───────────────────────────────────────────────────────────────────── */
:root {
  /* Roles */
  --ground: #050508;
  --ground-2: #0a0b0e;
  --surface: #17191e;
  --edge: #2e3138;
  --edge-2: #3a3d42;
  /* --ink-dim subido de #9a9590 (5,9:1) a 8,1:1. Es el color de casi todo el
     texto secundario, así que este solo cambio levanta el contraste general.
     --accent-text* existe porque el acento de marca no siempre supera 4,5:1
     como texto sobre el fondo de su álbum. El segundo nivel se separa por
     saturación, no por claridad: bajarla rompería el contraste. */
  --ink: #e8e4dc;
  --ink-dim: #b3afab;
  /* Un tercer nivel de tinta, entre --ink y --ink-dim. Existe solo para la
     primera frase de la portada: en tinta plena, sobre negro, el trazo
     engorda y parece negrita sin serlo. Mide 14,6:1 sobre el fondo. */
  --ink-soft: #d3cfc9;
  --accent: #f28a28;
  --accent-dim: #d8731f;
  --alert: #e2685a;
  --accent-text: #f28a28;
  --accent-text-dim: #c88b52;
  --ground-rgb: 5 5 8;
  --ground-3: #08090d;
  --accent-rgb: 242 138 40;
  --edge-rgb: 58 61 66;
  --interference-rgb: 90 42 120;
  --scrim-rgb: 2 2 4;
  --rule: rgb(var(--edge-rgb) / .34);

  /* Nombres heredados, derivados de los roles */
  --black: var(--ground);
  --carbon: var(--ground-2);
  --concrete: var(--surface);
  --concrete-mid: var(--edge);
  --concrete-light: var(--edge-2);
  --white-dirty: var(--ink);
  --white-dim: var(--ink-dim);
  --amber-text: var(--accent-text);
  --amber-text-dim: var(--accent-text-dim);
  --amber: var(--accent);
  --amber-dim: var(--accent-dim);
  --line: var(--rule);

  --font-body: "Space Grotesk", system-ui, sans-serif;
  --font-mono: "Space Mono", ui-monospace, monospace;
}

/* ── Home Blind · álbum 1 ────────────────────────────────────────────
   Es la paleta fundacional del proyecto, la misma que :root. Se declara
   igualmente para dejar constancia de que este mundo es una elección y
   no un valor por defecto heredado. Valores del Manual de identidad. */
[data-album="home-blind"] {
  --ground: #050508;
  --ground-2: #0a0b0e;
  --surface: #17191e;
  --edge: #2e3138;
  --edge-2: #3a3d42;
  /* --ink-dim subido de #9a9590 (5,9:1) a 8,1:1. Es el color de casi todo el
     texto secundario, así que este solo cambio levanta el contraste general.
     --accent-text* existe porque el acento de marca no siempre supera 4,5:1
     como texto sobre el fondo de su álbum. El segundo nivel se separa por
     saturación, no por claridad: bajarla rompería el contraste. */
  --ink: #e8e4dc;
  --ink-dim: #b3afab;
  --accent: #f28a28;
  --accent-dim: #d8731f;
  --accent-text: #f28a28;
  --accent-text-dim: #c88b52;
  --ground-rgb: 5 5 8;
  --ground-3: #08090d;
  --accent-rgb: 242 138 40;
  --edge-rgb: 58 61 66;
  --interference-rgb: 90 42 120;
  --scrim-rgb: 2 2 4;
  --rule: rgb(var(--edge-rgb) / .34);
}

/* ── Shelterless · álbum 2 ───────────────────────────────────────────
   Intemperie: «polvo y píxeles». El hormigón cede a la tierra y el ámbar
   de válvula se oxida. Propuesta pendiente de validar: la documentación
   describe el mundo pero no fija códigos de color. */
[data-album="shelterless"] {
  --ground: #0c0a09;
  --ground-2: #131010;
  --surface: #1d1815;
  --edge: #3a302a;
  --edge-2: #4a3b30;
  /* --ink-dim subido de #9c9086 (5,7:1) a 8,1:1. Es el color de casi todo el
     texto secundario, así que este solo cambio levanta el contraste general.
     --accent-text* existe porque el acento de marca no siempre supera 4,5:1
     como texto sobre el fondo de su álbum. El segundo nivel se separa por
     saturación, no por claridad: bajarla rompería el contraste. */
  --ink: #e6ded4;
  --ink-dim: #b7aea7;
  --accent: #c4643c;
  --accent-dim: #a5502e;
  --accent-text: #c86d48;
  --accent-text-dim: #ad7a64;
  --ground-rgb: 12 10 9;
  --ground-3: #0f0c0b;
  --accent-rgb: 196 100 60;
  --edge-rgb: 74 59 48;
  --interference-rgb: 143 163 168;
  --scrim-rgb: 6 5 4;
  --rule: rgb(var(--edge-rgb) / .34);
}

/* ── Silica Unison · álbum 3 ─────────────────────────────────────────
   Aquí el sistema se invierte. Su dirección de arte prescribe blanco
   lechoso ocupando al menos el 60 % del encuadre, rosa cuarzo y cian
   pálido, y prohíbe expresamente polvo, óxido y suciedad. Después de dos
   discos en la oscuridad, el tercero abre. Propuesta pendiente de validar:
   la documentación solo da nombres de color, no códigos. */
[data-album="silica-unison"] {
  color-scheme: light;
  --ground: #f4f2ef;
  --ground-2: #eceae6;
  --surface: #e4e1dc;
  --edge: #c9cdd2;
  --edge-2: #aab0b7;
  /* --ink-dim subido de #5c626a (4,6:1) a 8,1:1. Es el color de casi todo el
     texto secundario, así que este solo cambio levanta el contraste general.
     --accent-text* existe porque el acento de marca no siempre supera 4,5:1
     como texto sobre el fondo de su álbum. El segundo nivel se separa por
     saturación, no por claridad: bajarla rompería el contraste. */
  --ink: #1a1c20;
  --ink-dim: #3a3e43;
  --accent: #b06078;
  --accent-dim: #8f4a60;
  --alert: #9d2f22;
  --accent-text: #90485d;
  --accent-text-dim: #7c535f;
  --ground-rgb: 244 242 239;
  --ground-3: #eceae6;
  --accent-rgb: 176 96 120;
  --edge-rgb: 201 205 210;
  --interference-rgb: 181 224 240;
  --scrim-rgb: 244 242 239;
  --rule: rgb(var(--edge-rgb) / .34);
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: var(--black);
  color-scheme: dark;
  scroll-behavior: smooth;
}

body {
  width: 100%;
  min-width: 320px;
  margin: 0;
  overflow-x: hidden;
  background: var(--black);
  color: var(--white-dirty);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img,
video,
iframe {
  display: block;
  max-width: 100%;
}

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

button,
input,
select,
textarea {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

header[role="banner"],
body > header,
header:not(.track-hero):not(.editorial-title):not(.product-heading):not(.blog-post-hero):not(.album-hero) {
  position: fixed;
  z-index: 100;
  top: 0;
  right: 0;
  left: 0;
  min-height: 100px;
  background: linear-gradient(180deg, rgb(var(--ground-rgb) / .96) 0%, rgb(var(--ground-rgb) / 0) 100%);
  backdrop-filter: blur(4px);
}

/* Coda OE: la cabecera debe ocultar limpiamente la lectura al pasar bajo ella. */
html:has(.nt-coda[data-note="the-opposite-of-exile"]) {
  --nt-coda-header-height: 100px;
  scroll-padding-top: calc(var(--nt-coda-header-height) + 20px);
}

body:has(.nt-coda[data-note="the-opposite-of-exile"]) > header {
  z-index: 102;
  background: var(--ground);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

@media (max-width: 768px) {
  html:has(.nt-coda[data-note="the-opposite-of-exile"]) { --nt-coda-header-height: 68px; }
}

header > .container,
body > header .container {
  display: flex;
  width: 100%;
  max-width: none;
  min-height: 100px;
  margin: 0;
  padding: 20px 40px;
  align-items: center;
}

header .top {
  display: flex;
  flex: 0 0 auto;
  min-height: 60px;
  margin: 0;
  align-items: center;
}

header .top > a {
  display: flex;
  align-items: center;
}

/* El logotipo antiguo (una imagen opaca de 1344x768) se retira: se sustituye
   por el rótulo de marca, que va como MÁSCARA y por tanto toma el color de
   texto del tema. Así se lee igual sobre el negro de Home Blind y sobre el
   blanco de Silica Unison, sin duplicar archivos.

   La caja mide 8,67 px de alto porque el PNG lleva una fila de borde suave
   arriba y otra abajo: descontadas, la tinta sólida cae en 8,50 px, que es
   exactamente lo que miden las mayúsculas del menú. Contado píxel a píxel. */
header .top .brand-mark {
  display: block;
  width: 180px;              /* +20 %: la tinta pasa de 8,83 a 10,60 px,
                                que sigue siendo la del menú al subir este también */
  aspect-ratio: 16.5778;     /* la del archivo, con el espacio ya dentro */
  margin: 0;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
  text-indent: -9999px;
  white-space: nowrap;
  background-color: var(--white-dirty);
  opacity: .92;
  transition: opacity .25s ease;
  -webkit-mask-image: url("/assets/images/wordmark.webp");
  mask-image: url("/assets/images/wordmark.webp");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: left center;
  mask-position: left center;
}

header .top .brand-mark:hover,
header .top .brand-mark:focus-visible {
  opacity: 1;
  outline: none;
}

/* #main-nav ahora es el envoltorio de tres piezas: #album-nav, el launcher
   del audio player y #section-nav. Antes contenia los <a> directamente; el
   gap entre enlaces vive ahora en cada sub-nav para que el launcher no lo
   herede como si fuera un enlace mas. Ver 01_CURRENT_SITE/DOM_INTEGRATION_CONTRACT.md
   en el pack de audio. */
#main-nav {
  display: flex;
  flex: 1;
  min-width: 0;
  margin-left: 24px;
  align-items: center;
  gap: 10px;
}

#album-nav,
#section-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
}

#section-nav {
  margin-left: auto;
}

#main-nav .nav-link {
  display: inline-flex;
  min-height: 36px;
  padding: 8px 10px;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  color: var(--white-dim);
  font-family: var(--font-mono);
  font-size: .78rem;
  line-height: 1;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color .25s ease, border-color .25s ease, background .25s ease;
}

/* Rótulo y menú, la misma altura de mayúscula: 8,86 px. Contado píxel a
   píxel a 5x, no ajustado a ojo. Antes el menú estaba en .7rem (8,50 px de
   tinta) y el rótulo en 7,90: el rótulo parecía mayor porque va más claro
   —#e8e4dc frente a #b3afab—, no porque lo fuera. */
#main-nav .nav-album {
  font-size: .88rem;
  letter-spacing: .13em;
}

#main-nav .nav-section {
  min-width: 56px;
  font-size: .88rem;
  letter-spacing: .15em;
}

#main-nav .nav-link:hover,
#main-nav .nav-link:focus-visible,
#main-nav .nav-link.active {
  border-color: rgb(var(--accent-rgb) / .35);
  background: rgb(var(--accent-rgb) / .05);
  color: var(--amber-text);
  outline: none;
}

/* ── Launcher del audio player ───────────────────────────────────────
   Mismo font-family/cuerpo/tracking/mayusculas que un enlace de album
   (hereda #main-nav .nav-link), pero con borde SIEMPRE visible en vez de
   transparente por defecto: es un control, no un enlace de navegacion. */
.audio-player-launcher {
  gap: 6px;
  min-height: 36px;
  min-width: 44px;
  border-color: rgb(var(--edge-rgb) / .32);
  background: transparent;
  cursor: pointer;
}

.audio-player-launcher:hover,
.audio-player-launcher:focus-visible {
  border-color: rgb(var(--accent-rgb) / .62);
  background: rgb(var(--accent-rgb) / .055);
  color: var(--accent-text);
  outline: none;
}

.audio-player-launcher[aria-expanded="true"] {
  border-color: rgb(var(--accent-rgb) / .78);
  background: rgb(var(--accent-rgb) / .08);
  color: var(--accent-text);
}

.audio-player-state-icon {
  font-size: .85em;
}

main,
main.container,
body > main {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

#page-title {
  display: none;
}

#page-content,
#page-dynamic {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

#page-content > article,
#page-content > section,
#page-dynamic > footer {
  width: 100%;
  max-width: none;
  margin-right: 0;
  margin-left: 0;
}

.eyebrow {
  margin: 0 0 16px;
  color: var(--amber-text);
  font-family: var(--font-mono);
  font-size: .82rem;
  letter-spacing: .3em;
  text-transform: uppercase;
}

.editorial-title {
  margin: 0;
}

.editorial-title h1 {
  margin: 0;
  color: var(--white-dirty);
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .05em;
}

/* ─────────────────────────────────────────────────────────────────────
   PORTADA — LAS TRES PUERTAS

   La portada no explica la trilogía: la abre. Una franja con el rótulo y
   dos frases, y debajo tres puertas a sangre que ocupan todo el ancho de
   la pantalla y todo el alto que queda hasta el borde inferior.

   El reparto vertical no se estima: la franja declara su alto exacto y las
   puertas se quedan con el resto. Como las tres deben llenar el ancho, su
   proporción la marca el hueco, no el archivo, y el canvas pierde algo de
   alto por arriba y por abajo a partes iguales (13-16 % según la ventana).
   Es la única forma de que ocupen el ancho completo sin sacarlas de
   pantalla: tres puertas 9:16 en fila forman un bloque 27:16, más alto que
   el hueco que deja cualquier pantalla panorámica con cabecera.
   ───────────────────────────────────────────────────────────────────── */
.home-page {
  width: 100%;
  background: var(--ground);
}

.home-page {
  --home-header: 56px;
  --word-w: clamp(208px, 22.86vw, 415px);   /* +6,6 %: el archivo es más ancho
                                              al llevar el espacio dentro */
  --home-line: clamp(17.16px, 1.053vw, 18.72px);
  --band-pad: clamp(16px, 2.2vh, 30px);
  --band-gap-1: clamp(18px, 2.4vh, 30px);
  --band-gap-2: clamp(10px, 1.3vh, 16px);
  --band-aire: clamp(28px, 3.6vh, 48px);
  --door-gap: clamp(4px, .5vw, 10px);
}

.home-screen {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  padding-top: var(--home-header);
}

/* ── La franja: rótulo y las dos frases, centrados ───────────────── */
.home-band {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--band-gap-1);
  padding: var(--band-pad) 4vw var(--band-aire);
  text-align: center;
}

.home-wordmark {
  display: block;
  width: var(--word-w);
  aspect-ratio: 16.5778;
  background-color: var(--white-dirty);
  -webkit-mask-image: var(--wordmark);
  mask-image: var(--wordmark);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* El h1 sigue existiendo para buscadores y lectores de pantalla; lo que se
   ve es el rótulo de arriba. */
.home-h1 {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip-path: inset(50%);
  white-space: nowrap;
}

.home-lines {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--band-gap-2);
}

/* Las dos, mismo cuerpo y mismo peso. Ninguna en tinta plena: sobre negro,
   el blanco puro engorda el trazo y parece negrita sin serlo. */
.home-line {
  margin: 0;
  font-size: var(--home-line);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: .004em;
  white-space: nowrap;
}

.home-line-1 { color: var(--ink-soft); }
.home-line-2 { color: var(--white-dim); }

/* ── Las tres puertas ────────────────────────────────────────────── */
.home-doors {
  display: flex;
  flex: 1;
  align-items: stretch;
  justify-content: center;
  gap: var(--door-gap);
  min-height: min(58vh, 420px);
  padding: 0;
}

.home-door {
  position: relative;
  display: block;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  border: 0;
  color: inherit;
  background: var(--ground-2);
}

.home-door img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(1) brightness(.88);
  transition: filter .5s ease;
}

.home-door.is-upcoming img {
  filter: saturate(1.12) brightness(.94) contrast(1.04);
}

/* El canvas va exactamente encima del fotograma, con el mismo encuadre y el
   mismo tratamiento. Si no carga, o si el visitante ha pedido menos
   movimiento, debajo queda la imagen: nunca hay un hueco negro. */
.home-door-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  filter: saturate(1) brightness(.88);
  transition: filter .5s ease;
}

.home-door.is-upcoming .home-door-canvas {
  filter: saturate(1.12) brightness(.94) contrast(1.04);
}

.home-doors:hover .home-door-canvas { filter: saturate(.85) brightness(.5); }

.home-doors .home-door:hover .home-door-canvas,
.home-doors .home-door:focus-visible .home-door-canvas { filter: saturate(1) brightness(1); }

@media (prefers-reduced-motion: reduce) {
  .home-door-canvas { display: none; }
}

/* Al apuntar a una, las otras dos se retiran. */
.home-doors:hover .home-door img { filter: saturate(.85) brightness(.5); }

.home-doors .home-door:hover img,
.home-doors .home-door:focus-visible img { filter: saturate(1) brightness(1); }

.home-door::after {
  position: absolute;
  z-index: 2;
  inset: 0;
  content: "";
  background: linear-gradient(
    0deg,
    rgb(var(--ground-rgb) / .94) 0%,
    rgb(var(--ground-rgb) / .6) 22%,
    rgb(var(--ground-rgb) / .04) 48%,
    rgb(var(--ground-rgb) / .1) 100%
  );
}

/* Silica Unison invierte el sistema: fondo claro, así que su velo es blanco
   y su texto oscuro. La imagen ya es casi blanca, de ahí que el velo sea
   mucho más leve que el de las otras dos. */
.home-door.is-upcoming::after {
  background: linear-gradient(
    0deg,
    rgb(244 242 239 / .84) 0%,
    rgb(244 242 239 / .46) 20%,
    rgb(244 242 239 / .02) 44%,
    rgb(244 242 239 / .04) 100%
  );
}

.home-door-copy {
  position: absolute;
  z-index: 3;
  right: clamp(18px, 2.2vw, 44px);
  bottom: clamp(20px, 2.6vh, 40px);
  left: clamp(18px, 2.2vw, 44px);
  display: block;
  text-align: left;
}

.home-door-title {
  display: block;
  color: var(--white-dirty);
  font-size: clamp(1.26rem, 2.22vw, 2.06rem);
  font-weight: 700;
  line-height: .98;
  letter-spacing: -.025em;
  text-transform: uppercase;
}

.home-door-role {
  display: block;
  margin-top: 8px;
  color: var(--amber-text);
  font-family: var(--font-mono);
  font-size: clamp(.65rem, .82vw, .77rem);
  letter-spacing: .24em;
  text-transform: uppercase;
}

.home-door-meta {
  display: block;
  margin-top: 5px;
  color: var(--white-dim);
  font-family: var(--font-mono);
  font-size: clamp(.6rem, .74vw, .7rem);
  letter-spacing: .15em;
  text-transform: uppercase;
}

.home-door.is-upcoming .home-door-title { color: #1a1c20; }
.home-door.is-upcoming .home-door-role { color: #8f4a60; }
.home-door.is-upcoming .home-door-meta { color: #5c626a; }

/* ── Debajo de las puertas: el presente del proyecto ─────────────── */
.home-now {
  display: block;
  width: 100%;
}

.home-featured {
  position: relative;
  aspect-ratio: 16 / 7.4;
  min-height: 300px;
  overflow: hidden;
  background-color: var(--ground-2);
  background-image: var(--featured-image);
  background-position: center;
  background-size: cover;
}

.home-featured::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(
    0deg,
    rgb(var(--ground-rgb) / .96) 2%,
    rgb(var(--ground-rgb) / .58) 30%,
    rgb(var(--ground-rgb) / .06) 66%,
    rgb(var(--ground-rgb) / .3) 100%
  );
}

.home-featured-copy {
  position: absolute;
  z-index: 2;
  right: 5vw;
  bottom: clamp(26px, 4vw, 52px);
  left: 5vw;
  display: grid;
  align-items: end;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px 40px;
}

.home-featured-copy h2 {
  margin: 0;
  color: var(--white-dirty);
  font-size: clamp(2.04rem, 5.28vw, 4.08rem);
  font-weight: 700;
  line-height: .96;
  letter-spacing: -.03em;
}

.home-featured-meta {
  margin: 10px 0 0;
  color: var(--amber-text);
  font-family: var(--font-mono);
  font-size: .82rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.home-featured-text {
  max-width: 46ch;
  margin: 12px 0 0;
  color: var(--white-dim);
  font-size: clamp(1.08rem, 1.56vw, 1.22rem);
  font-weight: 300;
  line-height: 1.6;
}

.home-featured-cta {
  padding: 13px 22px;
  border: 1px solid var(--concrete-mid);
  color: var(--white-dirty);
  font-family: var(--font-mono);
  font-size: .79rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
}

.home-featured-cta:hover,
.home-featured-cta:focus-visible {
  border-color: var(--amber-text);
  color: var(--amber-text);
}

.home-next {
  position: relative;
  aspect-ratio: 16 / 7.4;
  min-height: 300px;
  overflow: hidden;
  border-top: 1px solid var(--line);
  background-color: var(--ground-2);
  background-image: var(--next-image);
  background-position: center;
  background-size: cover;
}

.home-next::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(
    0deg,
    rgb(var(--ground-rgb) / .96) 2%,
    rgb(var(--ground-rgb) / .58) 30%,
    rgb(var(--ground-rgb) / .06) 66%,
    rgb(var(--ground-rgb) / .3) 100%
  );
}

.home-next-copy {
  position: absolute;
  z-index: 2;
  right: 5vw;
  bottom: clamp(26px, 4vw, 52px);
  left: 5vw;
}

.home-next-copy h2 {
  margin: 0;
  color: var(--white-dirty);
  font-size: clamp(2.04rem, 5.28vw, 4.08rem);
  font-weight: 700;
  line-height: .96;
  letter-spacing: -.03em;
}

.home-tracklist {
  display: block;
  width: 100%;
  margin: 0;
  border-top: 1px solid var(--line);
  padding: 70px 0 96px;
}

.track-side {
  width: 100%;
}

.track-side + .track-side {
  margin-top: 56px;
}

.track-side h2 {
  margin: 0 0 24px;
  padding: 0 5vw;
  color: var(--amber-text-dim);
  font-family: var(--font-mono);
  font-size: .82rem;
  font-weight: 400;
  letter-spacing: .32em;
  text-align: center;
  text-transform: uppercase;
}

.track-row {
  display: grid;
  width: 100%;
  min-height: 96px;
  padding: 20px 4rem;
  grid-template-columns: 3rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  border-bottom: 1px solid rgb(var(--edge-rgb) / .25);
  color: inherit;
  transition: background .25s ease;
}

.track-row::after {
  content: "\2192";
  color: var(--ink-dim);
  transition: color .25s ease, transform .25s ease;
}

.track-row:hover,
.track-row:focus-visible {
  background: rgb(var(--accent-rgb) / .04);
  outline: none;
}

.track-row:hover::after,
.track-row:focus-visible::after {
  color: var(--amber-text);
  transform: translateX(6px);
}

.track-code {
  color: var(--ink-dim);
  font-family: var(--font-mono);
  font-size: .84rem;
  letter-spacing: .1em;
}

.track-name {
  /* El título de la canción es lo más importante de la fila: va a tinta
     plena, no al gris secundario. */
  color: var(--white-dirty);
  font-size: clamp(1rem, 2.5vw, 1.3rem);
  font-weight: 500;
}

.track-phase {
  color: var(--ink-dim);
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .15em;
  text-transform: uppercase;
}

/* Shared editorial heroes */
.about-page,
.shop-page,
.shop-gate,
.blog-page,
.contact-page,
.product-page,
.editorial-page,
.blog-post-page,
.track-page {
  min-height: 100vh;
}

.about-page,
.shop-page,
.shop-gate,
.blog-page,
.contact-page {
  padding-top: 100px;
}

.about-page > .editorial-title,
.shop-page > .editorial-title,
.shop-gate > .editorial-title,
.blog-page > .editorial-title,
.contact-page > .editorial-title {
  position: relative;
  display: flex;
  min-height: 280px;
  padding: 64px 5vw;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background:
    radial-gradient(circle at 50% 100%, rgb(var(--accent-rgb) / .08), transparent 50%),
    var(--black);
}

.about-page > .editorial-title::after,
.shop-page > .editorial-title::after,
.shop-gate > .editorial-title::after,
.blog-page > .editorial-title::after {
  width: 1px;
  height: 60px;
  margin-top: 32px;
  content: "";
  background: linear-gradient(180deg, transparent, var(--amber-dim), transparent);
}

/* About */
.about-page > .editorial-title {
  /* El título va alineado abajo con aire encima: es un recurso editorial
     buscado. Pero a 50vh limpios, en una pantalla alta, la página abría con
     media pantalla en negro y se leía como un error de carga, no como aire.
     Se acota para que el gesto se conserve sin comerse el primer pantallazo. */
  min-height: clamp(320px, 38vh, 460px);
  align-items: flex-start;
  justify-content: flex-end;
  text-align: left;
  background:
    linear-gradient(0deg, var(--black), rgb(var(--ground-rgb) / .35)),
    radial-gradient(circle at 70% 30%, rgb(var(--accent-rgb) / .1), transparent 40%),
    var(--ground-2);
}

.about-page > .editorial-title::after {
  display: none;
}

.about-section {
  display: block;
  width: min(100% - 40px, 800px);
  max-width: 800px;
  margin: 0 auto;
  padding: 0;
  color: var(--white-dim);
}

.about-section:first-of-type {
  padding-top: 64px;
}

.about-section:last-of-type {
  padding-bottom: 96px;
}

.about-section h2 {
  margin: 42px 0 16px;
  color: var(--amber-text-dim);
  font-family: var(--font-mono);
  font-size: .82rem;
  font-weight: 400;
  letter-spacing: .25em;
  text-transform: uppercase;
}

.about-section p {
  margin: 0 0 24px;
  font-size: 1.26rem;
  line-height: 2;
}

/* Shop */
.product-grid {
  display: grid;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 48px 5vw 96px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 32px;
}

.product-card {
  display: block;
  border: 0;
  color: inherit;
}

.product-card-image {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--carbon);
}

.product-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.8) brightness(.9);
  transition: transform .5s ease, filter .4s ease;
}

.product-card:hover .product-card-image img,
.product-card:focus-visible .product-card-image img {
  filter: saturate(1) brightness(1);
  transform: scale(1.04);
}

.product-card-copy {
  display: flex;
  padding: 16px 8px 0;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
}

.product-card-copy span:first-child,
.product-card-copy strong {
  color: var(--white-dirty);
  font-size: 1rem;
  font-weight: 500;
}

.product-card-copy span:last-child,
.product-card-copy small {
  color: var(--amber-text);
  font-family: var(--font-mono);
  font-size: .9rem;
}

/* Product detail */
.product-page {
  padding: 140px 5vw 80px;
}

.product-heading {
  display: flex;
  max-width: 1400px;
  margin: 0 auto 48px;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
}

.product-heading h1 {
  margin: 0;
  color: var(--white-dirty);
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.05;
}

.product-price {
  margin: 0;
  color: var(--amber-text);
  font-family: var(--font-mono);
  font-size: 1.5rem;
  white-space: nowrap;
}

.product-layout {
  display: grid;
  max-width: 1400px;
  margin: 0 auto;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 1fr);
  align-items: start;
  gap: 64px;
}

.product-gallery {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 12px;
}

.product-gallery-main {
  width: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--carbon);
}

.product-gallery-main img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  background: var(--carbon);
}

.product-gallery-thumbnails {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.product-gallery-thumb {
  appearance: none;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid transparent;
  background: var(--carbon);
  cursor: pointer;
  opacity: .62;
  transition: border-color .2s ease, opacity .2s ease;
}

.product-gallery-thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.product-gallery-thumb:hover,
.product-gallery-thumb:focus-visible,
.product-gallery-thumb.is-active {
  border-color: var(--amber-text-dim);
  opacity: 1;
  outline: 0;
}

.product-information {
  position: sticky;
  top: 124px;
  color: var(--white-dim);
  line-height: 1.8;
}

.product-information p {
  margin: 0 0 18px;
}

.product-sizes {
  padding-top: 16px;
  color: var(--white-dirty);
}

.product-sizes span {
  display: block;
  margin-bottom: 6px;
  color: var(--ink-dim);
  font-family: var(--font-mono);
  font-size: .65rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.product-information button,
.contact-form button {
  width: 100%;
  min-height: 50px;
  margin-top: 20px;
  border: 1px solid var(--amber-dim);
  background: var(--amber);
  color: var(--black);
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.product-information button:disabled,
.contact-form button:disabled {
  cursor: not-allowed;
  opacity: .58;
}

/* Blog index */
.blog-list {
  display: grid;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 48px 5vw 96px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
}

.blog-entry {
  display: block;
  min-width: 0;
  border: 0;
  color: inherit;
}

.blog-entry-media {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--carbon);
}

.blog-entry-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.8) brightness(.9);
  transition: transform .5s ease, filter .4s ease;
}

.blog-entry:hover .blog-entry-media img,
.blog-entry:focus-visible .blog-entry-media img {
  filter: saturate(1) brightness(1);
  transform: scale(1.04);
}

.blog-entry-copy {
  display: block;
  padding: 14px 8px 0;
}

.blog-entry-copy strong {
  display: block;
  margin-bottom: 6px;
  color: var(--white-dirty);
  font-size: 1.32rem;
  font-weight: 600;
  line-height: 1.25;
}

.blog-entry-copy small {
  display: block;
  color: var(--white-dim);
  font-family: var(--font-body);
  font-size: 1.02rem;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
}

/* Blog article */
.blog-post-page {
  background: var(--black);
}

.blog-post-hero {
  position: relative;
  width: 100%;
  height: 50vh;
  min-height: 340px;
  overflow: hidden;
}

.blog-post-hero-image,
.blog-post-hero-overlay {
  position: absolute;
  inset: 0;
}

.blog-post-hero-image {
  background-position: center;
  background-size: cover;
  filter: brightness(.72) saturate(1);
}

.blog-post-hero-overlay {
  background: linear-gradient(0deg, var(--black) 2%, rgb(var(--ground-rgb) / .44) 42%, rgb(var(--ground-rgb) / .14) 100%);
}

.blog-post-hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  height: 100%;
  padding: 120px 5vw 56px;
  flex-direction: column;
  justify-content: flex-end;
}

.blog-post-back {
  margin-bottom: 20px;
  color: var(--white-dim);
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.blog-post-back:hover,
.blog-post-back:focus-visible {
  color: var(--amber-text);
}

.blog-post-title {
  max-width: 1000px;
  margin: 0;
  color: var(--white-dirty);
  font-size: clamp(2.64rem, 6vw, 4.2rem);
  line-height: 1.05;
}

.blog-post-container {
  width: min(100% - 40px, 800px);
  max-width: 800px;
  margin: 0 auto;
  padding: 56px 0 80px;
}

.blog-post-content {
  color: var(--white-dim);
}

.blog-post-content p {
  margin: 0 0 24px;
  font-size: 1.26rem;
  line-height: 2;
}

.blog-post-nav {
  display: flex;
  margin-top: 64px;
  padding-top: 32px;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  border-top: 1px solid var(--line);
}

.blog-post-nav-btn {
  display: flex;
  max-width: 48%;
  flex-direction: column;
  gap: 5px;
}

.blog-post-nav-btn.next {
  margin-left: auto;
  text-align: right;
}

.blog-nav-label {
  color: var(--amber-text-dim);
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .25em;
  text-transform: uppercase;
}

.blog-nav-title {
  color: var(--white-dim);
  font-size: 1.14rem;
}

/* Tracks */
.track-page {
  padding-top: 80px;
}

.track-hero {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 50vh;
  margin: 0;
  padding: 64px 5vw 48px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  overflow: hidden;
  background: var(--carbon);
}

/* El marcado de la cabecera de canción declara `--track-image` en línea, pero
   NUNCA hubo una regla que la pintara: solo existía `.track-hero img`, y ahí
   dentro no se emite ninguna <img>. Resultado: las quince páginas de canción
   llevaban desde siempre la cabecera en negro. Comprobado también contra el
   CSS que sirve producción. */
.track-hero::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  content: "";
  background-image: var(--track-image);
  background-position: center;
  background-size: cover;
  filter: brightness(.76) saturate(1);
}

.track-hero::after {
  position: absolute;
  inset: 0;
  z-index: 0;
  content: "";
  /* El .42 dejaba la peor cabecera (Ventilation) en 3,25:1, justo por encima
     del mínimo. Se sube a .56 para tener margen sin volver a apagar la mitad
     de arriba, que es la que se ve. */
  background: linear-gradient(0deg, var(--black) 2%, rgb(var(--ground-rgb) / .56) 38%, rgb(var(--ground-rgb) / .12) 100%);
}

.track-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(.76) saturate(1);
}

.track-hero > *:not(img) {
  position: relative;
  z-index: 1;
}

.track-hero h1 {
  max-width: 1100px;
  margin: 0 0 18px;
  color: var(--white-dirty);
  font-size: clamp(2.5rem, 7vw, 5.5rem);
  line-height: .95;
  letter-spacing: -.02em;
}

.track-sonic {
  margin: 0;
  color: var(--ink-dim);
  font-family: var(--font-mono);
  font-size: .82rem;
  letter-spacing: .24em;
  text-transform: uppercase;
}

.track-video,
.track-description-panel,
.track-lyrics,
.track-gallery,
.track-navigation {
  width: min(100% - 40px, 1200px);
  max-width: 1200px;
  margin-right: auto;
  margin-left: auto;
}

.track-video {
  margin-top: 56px;
}

.track-video iframe,
.track-video video {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  background: #000;
}

.track-description-panel {
  display: grid;
  margin-top: 26.2px;
  padding-top: 32px;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  align-items: stretch;
  gap: 48px;
  border-top: 1px solid var(--line);
}

.album-summary-text,
.track-desc-text {
  min-width: 0;
}

.track-desc-text p {
  margin: 0 0 20px;
  color: var(--white-dim);
  font-size: 1.26rem;
  line-height: 1.9;
}

.track-desc-sidebar {
  display: flex;
  width: auto;
  height: 100%;
  padding-top: 8px;
  flex-direction: column;
  flex-wrap: nowrap;
  row-gap: 24px;
  column-gap: 0;
}

.album-facts > .track-meta-item,
.track-desc-sidebar > .track-meta-item {
  flex: 0 0 auto;
}

.album-facts > .track-meta-item:nth-child(2) {
  flex-basis: 100%;
}

.album-facts > .track-meta-item span,
.album-facts > .track-meta-item strong {
  white-space: nowrap;
}

.track-meta-item {
  border-bottom: 1px solid rgb(var(--edge-rgb) / .25);
  padding-bottom: 16px;
  color: var(--white-dim);
}

.track-meta-item span,
.track-meta-item strong {
  display: block;
}

.track-meta-item span {
  margin-bottom: 5px;
  color: var(--ink-dim);
  font-family: var(--font-mono);
  font-size: .864rem;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.track-lyrics {
  margin-top: 56px;
  padding: 48px 0;
  border-top: 1px solid var(--line);
}

/* Solo hay un encabezado, `Lyrics`. Antes había dos, `Confirmed lyrics` y
   `Lyrics`, con el mismo estilo: parecían un error de duplicado. */
.track-lyrics h2 {
  margin-bottom: 28px;
  color: var(--amber-text-dim);
  font-family: var(--font-mono);
  font-size: .78rem;
  font-weight: 400;
  letter-spacing: .25em;
  text-transform: uppercase;
}

.lyrics-content {
  max-width: 720px;
  color: var(--white-dim);
  font-size: 1.2rem;
  line-height: 2;
  white-space: pre-line;
}

.lyric-break {
  display: block;
  height: 20px;
}

.track-gallery {
  display: grid;
  margin-top: 48px;
  padding-top: 48px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  border-top: 1px solid var(--line);
}

.track-gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--carbon);
}

.track-navigation {
  display: flex;
  margin-top: 64px;
  padding: 40px 0 72px;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  border-top: 1px solid var(--line);
}

.track-nav-btn {
  display: flex;
  min-height: 44px;
  flex-direction: column;
  justify-content: center;
  color: var(--white-dim);
}

.track-nav-btn.next {
  margin-left: auto;
  text-align: right;
}

/* Contact */
.contact-page {
  padding-right: 20px;
  padding-bottom: 96px;
  padding-left: 20px;
}

.contact-page > .editorial-title {
  min-height: 260px;
  padding-bottom: 36px;
}

.contact-subtitle {
  max-width: 600px;
  margin: 18px auto 0;
  color: var(--white-dim);
  font-style: italic;
}

.contact-form {
  display: flex;
  width: min(100%, 600px);
  margin: 0 auto;
  flex-direction: column;
  gap: 22px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group label {
  color: var(--white-dim);
  font-family: var(--font-mono);
  font-size: .65rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--concrete-mid);
  border-radius: 0;
  background: var(--carbon);
  color: var(--white-dirty);
  padding: 12px 14px;
  outline: 0;
}

.form-group textarea {
  min-height: 150px;
  resize: vertical;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--amber-text-dim);
}

.contact-note {
  width: min(100%, 600px);
  margin: 28px auto 0;
  color: var(--ink-dim);
  font-size: .8rem;
  font-style: italic;
  text-align: center;
}

.contact-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.form-consent {
  display: flex;
  width: min(100%, 600px);
  margin: 0 auto;
  gap: 12px;
  align-items: flex-start;
}

.form-consent input[type="checkbox"] {
  width: 18px;
  min-width: 18px;
  height: 18px;
  min-height: 0;
  margin-top: 3px;
  flex: 0 0 auto;
  accent-color: var(--accent);
}

.form-consent label {
  color: var(--ink-dim);
  font-family: inherit;
  font-size: .8rem;
  letter-spacing: normal;
  line-height: 1.55;
  text-transform: none;
}

.form-consent a {
  color: var(--accent-text-dim);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.contact-status {
  width: min(100%, 600px);
  margin: 18px auto 0;
  border-left: 2px solid var(--edge-2);
  padding: 10px 14px;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .1em;
  line-height: 1.5;
}

.contact-status.is-ok { border-left-color: var(--accent); }
.contact-status.is-error { border-left-color: var(--alert); }

/* Legal */
.legal-page {
  padding: 0 20px 96px;
}

.legal-page > .editorial-title {
  min-height: 260px;
  padding-bottom: 36px;
}

.legal-intro {
  max-width: 600px;
  margin: 18px auto 0;
  color: var(--ink-dim);
  font-style: italic;
}

.legal-body {
  width: min(100%, 680px);
  margin: 0 auto;
}

.legal-section + .legal-section {
  margin-top: 44px;
  border-top: 1px solid var(--rule);
  padding-top: 44px;
}

.legal-section h2 {
  margin: 0 0 16px;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.legal-section p {
  margin: 0 0 14px;
  color: var(--ink-dim);
  font-size: 1rem;
  line-height: 1.7;
}

.legal-updated {
  width: min(100%, 680px);
  margin: 56px auto 0;
  color: var(--ink-dim);
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* Generic and 404 */
.editorial-page {
  padding: 140px 5vw 96px;
}

.editorial-copy {
  width: min(100%, 800px);
  margin-top: 48px;
  color: var(--white-dim);
}

.editorial-copy p {
  margin: 0 0 24px;
  font-size: 1.26rem;
  line-height: 2;
}

.editorial-gallery {
  display: grid;
  margin-top: 48px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.editorial-gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.not-found {
  display: flex;
  min-height: 100vh;
  padding: 140px 5vw 80px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.button-link {
  display: inline-flex;
  min-height: 44px;
  margin-top: 24px;
  padding: 10px 16px;
  align-items: center;
  border: 1px solid var(--amber-dim);
  color: var(--amber-text);
  font-family: var(--font-mono);
  font-size: .84rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* Footer */
.site-footer {
  display: flex;
  width: 100%;
  min-height: 120px;
  padding: 40px 5vw;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  border-top: 1px solid rgb(var(--edge-rgb) / .25);
  background: var(--black);
}

.site-footer div {
  display: flex;
  align-items: center;
  gap: 24px;
}

.site-footer strong,
.site-footer span,
.site-footer a {
  color: var(--ink-dim);
  font-family: var(--font-mono);
  font-size: .78rem;
  font-weight: 400;
  letter-spacing: .13em;
  text-transform: uppercase;
}

/* El nombre de la marca no puede pesar lo mismo que un enlace del pie. */
.site-footer strong {
  color: var(--white-dirty);
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
}

.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--amber-text);
}

@media (max-width: 1024px) {
  .blog-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .product-information {
    position: static;
  }
}

@media (max-width: 768px) {
  header[role="banner"],
  body > header,
  header:not(.track-hero):not(.editorial-title):not(.product-heading):not(.blog-post-hero):not(.album-hero) {
    min-height: 68px;
  }

  /* Cabecera movil de tres niveles (fix(header): restructure mobile
     navigation into three levels, 2026-09-03):
     nivel 1 = marca/home en su propia fila, alineada a la izquierda;
     nivel 2 = los tres albumes en una fila;
     nivel 3 = PLAYER + Blog + About en una fila.
     El contenedor pasa de grid de 2 columnas (76px + resto) a una sola
     columna apilada; el nivel 2 y 3 quedan resueltos dentro de #main-nav
     con su propio grid de areas. Ver SUEDE_NOISE_MOBILE_HEADER_3_LEVEL_PACK
     v1.1 en la raiz del proyecto. */
  header > .container,
  body > header .container {
    display: grid;
    min-height: 68px;
    /* --mobile-nav-gap alimenta tanto este row-gap (nivel 1->2) como el
       gap de #main-nav (nivel 2->3, mas abajo): misma fuente, no dos
       valores ajustados por separado. Se hereda en #main-nav porque es
       descendiente de este contenedor. */
    --mobile-nav-gap: 8px;
    padding: 12px 14px 10px;
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--mobile-nav-gap);
  }

  header .top {
    width: 100%;
    justify-content: flex-start;
  }

  /* Marca claramente mas grande y legible que la produccion anterior
     (157px). clamp() da ~180px a 320px, ~200px a 360px y ~205-220px
     entre 390 y 430px, sin superar 220px hasta 768px. */
  header .top .brand-mark {
    width: clamp(180px, 52vw, 220px);
  }

  header .top img {
    width: 76px;
    height: 44px;
  }

  #main-nav {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 0;
    align-content: start;
    justify-content: flex-end;
    /* row-gap = --mobile-nav-gap (mismo valor que nivel 1->2, ver arriba);
       column-gap = 2px, igual que el gap interno de #section-nav, para que
       PLAYER->BLOG y BLOG->ABOUT midan lo mismo opticamente. */
    gap: var(--mobile-nav-gap) 2px;
    overflow: visible;
  }

  #album-nav {
    flex: 1 1 100%;
    justify-content: flex-end;
    gap: 0 2px;
  }

  #section-nav {
    margin-left: 0;
    justify-content: flex-end;
    gap: 0 2px;
  }

  #main-nav .nav-link {
    flex: 0 0 auto;
    min-width: 44px;
    min-height: 40px;
    padding: 8px 7px;
    font-size: .77rem;
    letter-spacing: .1em;
  }

  #main-nav .nav-album { font-size: .77rem; letter-spacing: .1em; }
  #main-nav .nav-section { min-width: 44px; font-size: .77rem; letter-spacing: .1em; }

  .audio-player-launcher {
    min-width: 44px;
    min-height: 44px;
  }


  /* Por debajo de 760 px una sola línea obligaría a 10 px de letra: ilegible.
     Ahí, y solo ahí, se permite que las frases partan. Y las puertas se
     apilan a su proporción exacta, así que en móvil no hay recorte ninguno. */
  .home-page {
    --home-header: 132px;
  }

  .home-band {
    padding: 26px 5vw 22px;
  }

  .home-wordmark {
    display: none;
  }

  .home-lines {
    width: min(calc(100vw - 20px), 450px);
    max-width: none;
  }

  .home-line {
    width: 100%;
    max-width: none;
    font-size: 1.15rem;
    white-space: normal;
    text-wrap: balance;
  }

  .home-doors {
    flex-direction: column;
    align-items: stretch;
    min-height: 0;
    gap: 3px;
  }

  .home-door {
    flex: 0 0 auto;
    width: 100%;
    aspect-ratio: 9 / 16;
  }

  /* A 390 px, `aspect-ratio` combinado con `min-height: 300px` obligaba a la
     caja a medir 649 px de ancho y sacaba scroll horizontal. Aquí manda el
     ancho y la proporción se adapta. */
  .home-featured,
  .home-next {
    aspect-ratio: 3 / 4;
    min-height: 0;
  }

  .home-featured-copy,
  .home-next-copy {
    grid-template-columns: 1fr;
  }

  .home-tracklist {
    padding: 56px 0 72px;
  }

  .track-row {
    min-height: 84px;
    padding: 18px 20px;
    grid-template-columns: 2.4rem minmax(0, 1fr) auto;
    gap: 14px;
  }

  /* 174px es la altura real de la cabecera movil de 3 niveles entre
     361-768px (168px por debajo de 360px); 184px deja un margen de
     10-16px sin hueco excesivo. .legal-page (Privacy) se anade aqui
     porque no tenia padding-top propio y el titulo quedaba tapado
     por la cabecera fija incluso antes de este cambio. */
  .about-page,
  .shop-page,
  .blog-page,
  .contact-page,
  .legal-page {
    padding-top: 184px;
  }

  .about-page > .editorial-title,
  .shop-page > .editorial-title,
  .blog-page > .editorial-title,
  .contact-page > .editorial-title {
    min-height: 230px;
    padding: 52px 20px;
  }

  .about-page > .editorial-title {
    min-height: clamp(240px, 34vh, 340px);
  }

  .product-grid,
  .blog-list {
    padding: 36px 20px 72px;
  }

  .blog-list {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .product-page {
    padding: 108px 20px 72px;
  }

  .product-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
  }

  .product-gallery-thumbnails {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .track-page {
    padding-top: 184px;
  }

  .track-hero {
    min-height: 44vh;
    padding: 52px 20px 36px;
  }

  .track-video,
  .track-description-panel,
  .track-lyrics,
  .track-gallery,
  .track-navigation {
    width: calc(100% - 40px);
  }

  .track-description-panel {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .track-gallery,
  .editorial-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .blog-post-hero {
    min-height: 320px;
  }

  .blog-post-hero-content {
    padding: 100px 20px 36px;
  }

  .blog-post-container {
    width: calc(100% - 40px);
    padding: 44px 0 64px;
  }

  .blog-post-nav {
    flex-direction: column;
  }

  .blog-post-nav-btn,
  .blog-post-nav-btn.next {
    max-width: 100%;
    margin-left: 0;
    text-align: left;
  }

  .site-footer,
  .site-footer div {
    flex-direction: column;
    text-align: center;
  }

  .site-footer nav {
    justify-content: center;
  }
}

/* Por debajo de 360px los cinco enlaces del menú se iban a tres filas y la
   cabecera, que es fija, acababa pisando el primer texto de Blog y Contact.
   Se aprieta lo justo para que vuelvan a caber en dos.

   Va aquí, DESPUÉS del bloque de 768px, y no dentro: la primera versión se
   insertó en medio de aquel bloque y lo partió en dos, de modo que todo lo que
   venía detrás —la rejilla del blog, las filas de canción, la tienda, el pie—
   dejó de aplicarse en móviles normales. Lo cazó la comparación de píxeles:
   las miniaturas del blog pasaban de 350px de ancho a 160. */
@media (max-width: 360px) {
  /* La estructura de tres niveles ya no depende del ancho de columna de la
     marca (columna de 76/58px eliminada en el bloque de 768px de arriba),
     asi que aqui solo se aprieta tipografia/espaciado; no se reintroduce
     la rejilla de dos columnas ni se vuelve a fijar el ancho de la marca
     (clamp() ya baja a 180px en este rango). */
  header > .container,
  body > header .container {
    --mobile-nav-gap: 6px;
    padding: 10px 10px 8px;
    row-gap: var(--mobile-nav-gap);
  }

  #main-nav .nav-link,
  #main-nav .nav-album,
  #main-nav .nav-section {
    min-width: 38px;
    padding: 7px 5px;
    font-size: .70rem;
    letter-spacing: .07em;
  }
}

@media (max-width: 520px) {
  .product-grid {
    grid-template-columns: 1fr;
  }

  .product-gallery-thumbnails {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .track-gallery,
  .editorial-gallery {
    grid-template-columns: 1fr;
  }

  .site-footer nav {
    gap: 18px;
  }
}

/* Full image viewer for all track galleries */
.track-gallery img {
  cursor: zoom-in;
  transition: filter .25s ease, opacity .25s ease;
}

.track-gallery img:hover,
.track-gallery img:focus-visible {
  filter: brightness(1.08);
  opacity: .92;
  outline: 1px solid rgb(var(--accent-rgb) / .65);
  outline-offset: -1px;
}

body.gallery-lightbox-open {
  overflow: hidden;
}

.gallery-lightbox[hidden] {
  display: none;
}

.gallery-lightbox {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  padding: 40px 88px 22px;
  grid-template-columns: 56px minmax(0, 1fr) 56px;
  align-items: center;
  background: rgb(var(--scrim-rgb) / .97);
  backdrop-filter: blur(3px);
}

.gallery-lightbox-close,
.gallery-lightbox-arrow {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--white-dim);
  font-family: var(--font-mono);
  cursor: pointer;
}

.gallery-lightbox-close:hover,
.gallery-lightbox-close:focus-visible,
.gallery-lightbox-arrow:hover,
.gallery-lightbox-arrow:focus-visible {
  color: var(--white-dirty);
  outline: 1px solid rgb(var(--accent-rgb) / .5);
}

.gallery-lightbox-close {
  position: absolute;
  z-index: 2;
  top: 18px;
  right: 22px;
  min-width: 64px;
  min-height: 44px;
  padding: 8px;
  font-size: .78rem;
  letter-spacing: .24em;
  text-transform: uppercase;
}

.gallery-lightbox-arrow {
  display: flex;
  width: 56px;
  min-height: 72px;
  align-items: center;
  justify-content: center;
  font-size: 1.62rem;
}

.gallery-lightbox-previous {
  grid-column: 1;
}

.gallery-lightbox-next {
  grid-column: 3;
}

.gallery-lightbox-figure {
  display: grid;
  width: 100%;
  height: calc(100vh - 62px);
  min-width: 0;
  min-height: 0;
  margin: 0;
  grid-column: 2;
  grid-row: 1;
  grid-template-rows: minmax(0, 1fr) 32px;
  align-items: center;
  justify-items: center;
}

.gallery-lightbox-image {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: calc(100vh - 100px);
  object-fit: contain;
  user-select: none;
}

.gallery-lightbox-footer {
  display: flex;
  width: 100%;
  min-height: 32px;
  align-items: flex-end;
  justify-content: center;
  color: var(--white-dim);
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .15em;
}

@media (max-width: 768px) {
  .gallery-lightbox {
    padding: 58px 12px 14px;
    grid-template-columns: 48px minmax(0, 1fr) 48px;
    align-items: end;
  }

  .gallery-lightbox-figure {
    height: calc(100vh - 116px);
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .gallery-lightbox-image {
    max-height: calc(100vh - 150px);
  }

  .gallery-lightbox-arrow {
    position: relative;
    z-index: 2;
    width: 48px;
    min-height: 48px;
    grid-row: 1;
    align-self: center;
    background: rgb(var(--ground-rgb) / .65);
  }

  .gallery-lightbox-previous {
    grid-column: 1;
    justify-self: start;
  }

  .gallery-lightbox-next {
    grid-column: 3;
    justify-self: end;
  }
}

/* Tienda privada: puerta de contraseña.
   El encuadre (alto, separación de la cabecera y título centrado) lo hereda de
   los grupos de .shop-page. Aquí solo va lo propio del formulario. */
.shop-gate-intro {
  width: min(100% - 10vw, 520px);
  margin: 0 auto 34px;
  color: var(--white-dim);
  font-size: .95rem;
  line-height: 1.7;
  text-align: center;
}

.shop-gate-form {
  display: flex;
  width: min(100% - 10vw, 460px);
  margin: 0 auto;
  flex-direction: column;
  gap: 18px;
}

.shop-gate-form button[type="submit"] {
  width: 100%;
  min-height: 50px;
  margin-top: 4px;
  border: 1px solid var(--amber-dim);
  background: var(--amber);
  color: var(--black);
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.shop-gate-form button[type="submit"]:disabled {
  cursor: progress;
  opacity: .58;
}

.shop-gate-remember {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--white-dim);
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.shop-gate-remember input {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  accent-color: var(--amber-text);
}

.shop-gate-message {
  min-height: 22px;
  margin: 0;
  color: var(--amber-text);
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .06em;
  text-align: center;
}

.shop-lock {
  width: min(100%, 900px);
  margin: 64px auto 0;
  padding: 22px 5vw 0;
  border-top: 1px solid var(--line);
  text-align: right;
}

.shop-lock button {
  border: 1px solid var(--concrete-mid);
  background: transparent;
  color: var(--white-dim);
  padding: 10px 16px;
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
}

.shop-lock button:hover,
.shop-lock button:focus-visible {
  border-color: var(--amber-text-dim);
  color: var(--white-dirty);
}

/* ─────────────────────────────────────────────────────────────────────
   CABECERA COMPACTA DE LA PORTADA

   El resto del sitio lleva una cabecera de 100 px, que ahí sobra sitio.
   En la portada no: cada píxel de cabecera es un píxel menos de puerta,
   y las puertas son la portada. Solo aquí baja a 56.
   ───────────────────────────────────────────────────────────────────── */
html[data-page="home"] header[role="banner"],
html[data-page="home"] body > header,
html[data-page="home"] header:not(.track-hero):not(.editorial-title):not(.product-heading):not(.blog-post-hero):not(.album-hero) {
  min-height: 56px;
}

html[data-page="home"] header > .container,
html[data-page="home"] body > header .container {
  min-height: 56px;
  padding: 6px 4vw;
}

html[data-page="home"] header .top {
  min-height: 0;
}

/* Mas aire por encima del wordmark en movil (fix(header): refine mobile
   hierarchy and home intro, 2026-09-03): la regla de arriba no esta
   condicionada a ningun ancho y gana por especificidad a la del bloque
   general de <=768px, asi que el padding-top movil se corrige aqui, con
   el MISMO selector, colocado despues para ganar la cascada solo en este
   rango. padding-bottom no se toca, para no generar hueco extra bajo el
   nivel 3. >=769px sigue exactamente en 6px/4vw, sin cambios. */
@media (max-width: 768px) {
  html[data-page="home"] header > .container,
  html[data-page="home"] body > header .container {
    padding-top: 12px;
  }
}

@media (max-width: 360px) {
  html[data-page="home"] header > .container,
  html[data-page="home"] body > header .container {
    padding-top: 10px;
  }
}

/* ── Página de álbum ─────────────────────────────────────────────── */
.album-page {
  min-height: 100vh;
}

.album-hero {
  position: relative;
  display: flex;
  min-height: 62vh;
  padding: 152px 5vw 56px;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden;
  text-align: center;
  background: var(--black);
}

.album-hero::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  content: "";
  background-image: var(--album-image);
  background-position: center;
  background-size: cover;
  filter: saturate(1) brightness(.82);
}

.album-hero::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: "";
  /* El velo se concentra abajo, que es donde va el título, y suelta la mitad
     superior, que es donde está la imagen. Las proporciones no son de gusto:
     salen de medir el píxel más claro que queda detrás del título con
     `legibilidad.js` hasta que supera 3:1. La portada de Shelterless tiene un
     haz de luz justo ahí y era la que mandaba. */
  background: linear-gradient(0deg, var(--black) 3%, rgb(var(--ground-rgb) / .72) 24%, rgb(var(--ground-rgb) / .34) 50%, rgb(var(--ground-rgb) / .12) 100%);
}

.album-hero > * {
  position: relative;
  z-index: 2;
}

.album-hero h1 {
  margin: 0;
  color: var(--white-dirty);
  font-size: clamp(2.8rem, 9vw, 6rem);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: .95;
  text-transform: uppercase;
}

.album-tagline {
  max-width: 40ch;
  margin: 22px 0 0;
  color: var(--white-dim);
  font-family: var(--font-mono);
  font-size: .94rem;
  letter-spacing: .05em;
}

@media (max-width: 360px) {
  .album-tagline {
    font-size: .8rem;
    letter-spacing: .02em;
    white-space: nowrap;
  }
}

/* ── Resumen del álbum ───────────────────────────────────────────── */
.album-summary {
  display: grid;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 7.3px 48px 24px;
  grid-template-columns: minmax(420px, 1fr) 550px;
  gap: 48px;
}

.album-summary-text p {
  margin: 0 0 18px;
  color: var(--white-dim);
  font-size: 1.22rem;
  line-height: 1.85;
}

.album-summary-text p:last-child { margin-bottom: 0; }

.album-note {
  margin-top: 26px !important;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: var(--amber-text) !important;
  font-family: var(--font-mono);
  font-size: .86rem !important;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.album-facts {
  display: flex;
  width: 550px;
  flex-wrap: wrap;
  row-gap: 24px;
  column-gap: 32px;
  align-self: stretch;
  align-content: flex-start;
  align-items: flex-start;
  padding: 24px;
  border: 1px solid var(--line);
  background: var(--carbon);
}

@media (max-width: 1120px) {
  .album-summary,
  .track-description-panel {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .album-facts,
  .track-desc-sidebar {
    width: 100%;
  }

  .album-facts > .track-meta-item,
  .track-desc-sidebar > .track-meta-item {
    flex-basis: 100%;
  }

  .album-facts > .track-meta-item span,
  .album-facts > .track-meta-item strong,
  .track-desc-sidebar > .track-meta-item span,
  .track-desc-sidebar > .track-meta-item strong {
    white-space: normal;
  }
}

.album-listen {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.album-listen a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* El tracking de .14em añade un espacio tras la última letra que forma parte
     de la caja de texto: al centrarla, los glifos quedan medio espacio a la
     izquierda. Se compensa aquí, en la regla común, no botón a botón. */
  text-indent: .07em;
  padding: 10px 16px;
  border: 1px solid var(--concrete-mid);
  color: var(--white-dirty);
  font-family: var(--font-mono);
  font-size: .79rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.album-listen a:hover,
.album-listen a:focus-visible {
  border-color: var(--amber-text-dim);
  color: var(--amber-text);
}

/* ── Tracklist de álbum ──────────────────────────────────────────── */
.album-tracklist {
  padding-top: 24px;
}

/* Un tema de un álbum aún sin publicar no lleva enlace. */
.track-row.is-locked {
  cursor: default;
  opacity: .62;
}

.track-row.is-locked:hover {
  background: transparent;
}

/* ── Visuales del álbum ──────────────────────────────────────────── */
.album-visuals {
  display: grid;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 5vw 96px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 20px;
}

.album-visuals img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 1px solid var(--line);
}

/* Silica Unison: la imagen vertical comienza en la línea de Tracklist y queda
   fuera de la descripción, las etiquetas y el pie. El hero conserva su
   maqueta, pero recupera el color real de la portada al retirar el filtro. */
html[data-album="silica-unison"] .album-tracklist {
  background:
    linear-gradient(rgb(var(--ground-rgb) / .80), rgb(var(--ground-rgb) / .80)),
    url("/assets/media/silica-unison/3.webp") center / cover no-repeat;
}

html[data-album="silica-unison"] .album-tracklist .track-phase {
  color: #000;
}

html[data-album="silica-unison"] .album-hero::before {
  filter: none;
}

html[data-album="silica-unison"] .album-hero::after {
  background: linear-gradient(
    0deg,
    rgb(var(--ground-rgb) / .28) 3%,
    rgb(var(--ground-rgb) / .16) 24%,
    rgb(var(--ground-rgb) / .05) 50%,
    rgb(var(--ground-rgb) / .02) 100%
  );
}

/* ── Portada de la trilogía ──────────────────────────────────────────
   El hero de la portada antigua ocultaba su h1 porque en su día mostraba
   un logotipo en su lugar. Aquí el título es tipográfico y sí se ve. */
.trilogy-hero {
  min-height: 44vh;
  padding: 150px 5vw 44px;
}

.trilogy-hero h1 {
  display: block;
  margin: 20px 0 0;
  color: var(--white-dirty);
  font-size: clamp(2.9rem, 11vw, 7.5rem);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: .88;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .album-summary {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-top: 0;
  }

  .album-hero {
    min-height: 52vh;
    padding: 128px 20px 40px;
  }

  .trilogy-hero {
    min-height: 38vh;
    padding: 124px 20px 32px;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   SUBIDA DEL 20 % — 26 de agosto de 2026

   Todos los cuerpos del sitio suben un 20 % sobre su valor anterior, con
   seis excepciones que el propietario dejó fijadas: el título de álbum
   (.album-hero h1), el título de canción (.track-hero h1), el título de
   sección (.editorial-title h1), el título del tema en el tracklist
   (.track-name), y todo lo de la Tienda y lo de Contacto.

   Estas cuatro piezas no declaraban cuerpo: heredaban los 16 px del
   <body>. Se declaran ahora para que suban como el resto. El <body> se
   queda en 16 px a propósito: subirlo arrastraría también al subtítulo de
   Contacto, que está excluido.
   ───────────────────────────────────────────────────────────────────── */
.track-meta-item strong {
  font-size: 1.2rem;
}

.track-nav-btn {
  font-size: 1.2rem;
}

.not-found p {
  font-size: 1.2rem;
}

/* El antetítulo es una pieza compartida: sube en todo el sitio, pero se
   queda como estaba dentro de la Tienda y de Contacto, que el propietario
   dejó fuera de la subida. */
.shop-page .eyebrow,
.product-page .eyebrow,
.shop-gate .eyebrow,
.contact-page .eyebrow {
  font-size: .68rem;
}

/* ═══ ABOUT · scroll essay (fase 27) ═══════════════════════════════ */
.about-x {
  overflow: clip;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
}

html[data-page="about"] header:not(.track-hero):not(.editorial-title):not(.product-heading):not(.blog-post-hero):not(.album-hero),
body:has(.about-x) > header:not(.track-hero):not(.editorial-title):not(.product-heading):not(.blog-post-hero):not(.album-hero) {
  background: linear-gradient(180deg, rgb(var(--ground-rgb) / .88) 0%, rgb(var(--ground-rgb) / .52) 48%, rgb(var(--ground-rgb) / 0) 100%);
  backdrop-filter: blur(1.5px);
}

.about-x picture,
.about-x img {
  display: block;
  width: 100%;
}

.about-x img {
  height: 100%;
}

.about-x h2,
.about-x h3,
.about-x p,
.about-x figure {
  margin-top: 0;
}

.about-x h2 {
  margin-bottom: clamp(28px, 4vw, 54px);
  font-family: var(--font-body);
  font-size: clamp(2.4rem, 5.4vw, 6rem);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: .92;
}

.about-x h3 {
  margin-bottom: clamp(24px, 3vw, 42px);
  font-family: var(--font-body);
  font-size: clamp(2rem, 4vw, 4.5rem);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: .94;
}

.about-x p {
  color: var(--ink-dim);
  font-size: clamp(1rem, 1.25vw, 1.2rem);
  line-height: 1.6;
}

.about-x strong {
  color: var(--ink);
}

.about-x-line {
  position: absolute;
  z-index: 4;
  top: 0;
  bottom: 0;
  left: clamp(24px, 5vw, 72px);
  width: 1px;
  pointer-events: none;
}

.about-x-line span {
  position: absolute;
  left: 0;
  width: 1px;
  background: rgb(var(--edge-rgb) / .40);
}

.about-x-line--stable span,
.about-x-line--drift span,
.about-x-line--returned span {
  inset: 0;
}

.about-x-line--returned {
  transform: translateX(36px);
}

.about-x-line--broken span:nth-child(1) { top: 5%; height: 20%; }
.about-x-line--broken span:nth-child(2) { top: calc(25% + 16px); height: 18%; transform: translateX(10px); opacity: .72; }
.about-x-line--broken span:nth-child(3) { top: 54%; height: 13%; transform: translateX(-10px); opacity: .45; }
.about-x-line--broken span:nth-child(4) { top: 78%; height: 7%; transform: translateX(7px); opacity: .2; }

.about-x-line--fragment,
.about-x-line--fragment-shift {
  top: 18%;
  bottom: auto;
  height: 24%;
}

.about-x-line--fragment-shift {
  transform: translateX(24px);
}

.about-x-line--fragment span,
.about-x-line--fragment-shift span {
  inset: 0;
}

.about-x-hero {
  position: relative;
  background: var(--ground);
}

.about-x-hero-stage {
  position: relative;
}

.about-x-hero-media {
  position: relative;
  aspect-ratio: 2752 / 1536;
  overflow: hidden;
}

.about-x-hero-media img {
  object-fit: contain;
  object-position: center;
}

.about-x-hero-veil {
  display: none;
}

.about-x-hero-copy {
  position: relative;
  z-index: 3;
  padding: 42px 20px 72px;
}

.about-x-eyebrow {
  width: fit-content;
  margin: 0 0 34px;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: .82rem;
  font-weight: 400;
  letter-spacing: .28em;
  line-height: 1.2;
  text-transform: uppercase;
}

.about-x-lead {
  max-width: 60ch;
  margin: 0 0 24px;
}

.about-x-wound {
  position: relative;
  padding: 72px 20px;
  background: var(--ground-2);
}

.about-x-wound-stage,
.about-x-wound-media {
  position: relative;
}

.about-x-wound-media {
  aspect-ratio: 2752 / 1536;
}

.about-x-wound-media img {
  object-fit: contain;
}

.about-x-wound-copy {
  max-width: 62ch;
  padding-top: 42px;
}

.about-x-wound-copy p {
  margin-bottom: 24px;
}

.about-x-condition {
  position: relative;
  display: grid;
  padding: 72px 20px;
  gap: 24px;
}

.about-x-condition-stage,
.about-x-condition-copy {
  display: contents;
}

.about-x-condition-layer {
  position: relative;
  aspect-ratio: 2752 / 1536;
}

.about-x-condition-layer img {
  object-fit: contain;
}

.about-x-condition-layer[data-state="1"] { grid-row: 1; }
.about-x-condition-copy p[data-state="1"] { grid-row: 2; }
.about-x-condition-layer[data-state="2"] { grid-row: 3; }
.about-x-condition-copy p[data-state="2"] { grid-row: 4; }
.about-x-condition-layer[data-state="3"] { grid-row: 5; }
.about-x-condition-copy p[data-state="3"] { grid-row: 6; }
.about-x-condition-coda { grid-row: 7; }

.about-x-condition-copy p {
  max-width: 58ch;
  margin: 0 0 28px;
}

.about-x-condition-coda {
  color: var(--ink);
  font-weight: 700;
}

.about-x-works {
  padding: 84px 20px 0;
  background: var(--ground-2);
}

.about-x-works-head {
  width: min(100%, 64ch);
  margin: 0 auto 80px;
}

#about-works > header.about-x-works-head {
  position: relative;
  z-index: auto;
  inset: auto;
  min-height: 0;
  padding: 0;
  background: none;
  backdrop-filter: none;
}

.about-x-works-head p {
  margin-bottom: 0;
}

.about-x-work {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0 0 96px;
}

.about-x-work-copy {
  display: contents;
}

.about-x-label,
.about-x-subtitle {
  color: var(--accent-text-dim);
  font-family: var(--font-mono);
  font-weight: 400;
  letter-spacing: .25em;
  line-height: 1.3;
  text-transform: uppercase;
}

.about-x-label {
  order: 1;
  margin: 0 0 16px;
  font-size: .78rem;
}

.about-x-work h3 {
  order: 2;
}

.about-x-work-media {
  order: 3;
  margin-bottom: 34px;
}

.about-x-work-media img {
  height: auto;
  aspect-ratio: 1856 / 2304;
  object-fit: contain;
}

.about-x-work-copy > p:not(.about-x-label) {
  order: 4;
  margin-bottom: 22px;
}

.about-x-bridge {
  padding: 92px 20px;
}

.about-x-bridge-main {
  display: grid;
}

.about-x-bridge-copy {
  display: contents;
}

.about-x-bridge-copy h2 { order: 1; }
.about-x-bridge-media { order: 2; margin-bottom: 36px; }
.about-x-bridge-copy p { order: 3; margin-bottom: 22px; }

.about-x-bridge-media img {
  height: auto;
  aspect-ratio: 1856 / 2304;
  object-fit: contain;
}

.about-x-bridge-coda img {
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
}

.about-x figure.about-x-bridge-coda {
  width: 100%;
  margin: 72px 0 0;
}

.about-x-project {
  display: grid;
  padding: 92px 20px;
  background: var(--ground-2);
}

.about-x-project-copy {
  display: contents;
}

.about-x-project h2 { order: 1; }
.about-x-subtitle { order: 2; margin: -18px 0 32px; font-size: .86rem; }
.about-x-project-media { order: 3; margin-bottom: 38px; }
.about-x-project-copy > p:not(.about-x-subtitle) { order: 4; margin-bottom: 22px; }

.about-x-project-media img {
  height: auto;
  aspect-ratio: 1856 / 2304;
  object-fit: contain;
}

.about-x-process {
  padding: 72px 20px;
  background: var(--ground-2);
}

.about-x-process h2 {
  font-size: clamp(2.4rem, 4vw, 3.2rem);
}

.about-x-process p {
  max-width: 58ch;
  margin-bottom: 22px;
  color: var(--ink-dim);
}

.about-x-exit {
  position: relative;
  min-height: 80svh;
  overflow: hidden;
  background: var(--ground);
}

.about-x-exit-media,
.about-x-exit-scrim {
  position: absolute;
  inset: 0;
}

.about-x-exit-media img {
  object-fit: contain;
  object-position: center;
}

.about-x-exit-scrim {
  z-index: 1;
  background: linear-gradient(0deg, rgb(var(--ground-rgb) / .28) 0%, rgb(var(--ground-rgb) / .2) 25%, transparent 60%);
}

.about-x-exit-copy {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: 80svh;
  padding: 0 20px clamp(2.5rem, 6vh, 3.25rem);
  align-items: flex-start;
  flex-direction: column;
  justify-content: flex-end;
}

.about-x-exit-copy p {
  max-width: 16ch;
  margin-bottom: 18px;
  color: var(--ink);
  line-height: .96;
}

.about-x-exit-first {
  font-size: clamp(.88rem, 1.6vw, 1.28rem) !important;
  font-weight: 400;
}

.about-x-exit-last {
  font-size: clamp(2rem, 4.8vw, 5.6rem) !important;
  font-weight: 700;
  letter-spacing: -.045em;
  text-transform: uppercase;
}

html.about-motion .about-x-reveal,
html.about-motion .about-x-work,
html.about-motion .about-x-bridge-main,
html.about-motion .about-x-bridge-coda,
html.about-motion .about-x-project,
html.about-motion .about-x-process {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 900ms ease, transform 1100ms cubic-bezier(.2,.7,.2,1);
}

html.about-motion .about-x-reveal.is-in,
html.about-motion .about-x-work.is-in,
html.about-motion .about-x-bridge-main.is-in,
html.about-motion .about-x-bridge-coda.is-in,
html.about-motion .about-x-project.is-in,
html.about-motion .about-x-process.is-in {
  opacity: 1;
  transform: translateY(0);
}

@media (min-width: 900px) {
  .about-x-hero {
    min-height: 100svh;
    overflow: hidden;
  }

  html.about-motion .about-x-hero {
    min-height: 260svh;
    overflow: visible;
  }

  html.about-motion .about-x-hero-stage {
    position: sticky;
    top: 0;
    height: 100svh;
    overflow: hidden;
  }

  .about-x-hero-media,
  .about-x-hero-veil {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
  }

  .about-x-hero-media img {
    object-fit: cover;
  }

  .about-x-hero-veil {
    z-index: 2;
    display: block;
    background:
      linear-gradient(180deg, rgb(var(--ground-rgb) / .48), transparent 20%),
      linear-gradient(90deg, rgb(var(--ground-rgb) / .82) 0%, rgb(var(--ground-rgb) / .76) 34%, rgb(var(--ground-rgb) / .58) 54%, rgb(var(--ground-rgb) / .26) 68%, transparent 82%);
  }

  .about-x-hero-copy {
    display: flex;
    min-height: 100svh;
    padding: 20vh 9vw 10vh;
    flex-direction: column;
    justify-content: flex-end;
  }

  html.about-motion .about-x-hero-copy {
    opacity: clamp(0, calc((.82 - var(--p)) * 8.3333), 1);
  }

  html.about-motion .about-x-hero-media img {
    transform: scale(calc(1 + .025 * var(--p)));
    transform-origin: center;
  }

  html.about-motion .about-x-hero .about-x-reveal {
    opacity: clamp(0, calc((var(--p) - .18) * 8.3333), 1);
    transform: translateY(clamp(0px, calc((.30 - var(--p)) * 150px), 18px));
    transition: none;
  }

  .about-x-wound {
    padding: 0;
  }

  html.about-motion .about-x-wound {
    min-height: 400vh;
  }

  html.about-motion .about-x-wound-stage {
    position: sticky;
    top: 0;
    height: 100svh;
    overflow: hidden;
  }

  html.about-motion .about-x-wound-media {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
  }

  html.about-motion .about-x-wound-media::after {
    position: absolute;
    content: "";
    inset: 0;
    background: linear-gradient(90deg, rgb(var(--ground-rgb) / .72) 0%, rgb(var(--ground-rgb) / .56) 30%, rgb(var(--ground-rgb) / .27) 50%, rgb(var(--ground-rgb) / 0) 70%);
  }

  html.about-motion .about-x-wound-media img {
    object-fit: cover;
    transform: scale(calc(1 + .015 * var(--p)));
  }

  html.about-motion .about-x-wound-copy {
    position: sticky;
    z-index: 3;
    top: 0;
    display: block;
    height: 100svh;
    width: 100%;
    max-width: none;
    margin-top: -100svh;
    padding: 0;
  }

  html.about-motion .about-x-wound-copy h2,
  html.about-motion .about-x-wound-copy .about-x-reveal {
    position: absolute;
    top: 50%;
    left: 9vw;
    margin: 0;
    transition: none;
    transform: translateY(-50%);
  }

  html.about-motion .about-x-wound-copy h2 {
    width: min(76vw, 900px);
    opacity: clamp(0, calc((.18 - var(--p)) * 20), 1);
  }

  html.about-motion .about-x-wound-copy .about-x-reveal {
    width: min(32rem, 42vw);
    color: var(--ink);
    font-size: clamp(19px, 1.15vw, 22px);
    font-weight: 500;
    line-height: 1.5;
  }

  html.about-motion .about-x-wound-copy .about-x-reveal:nth-of-type(1) {
    opacity: min(clamp(0, calc((var(--p) - .18) * 25), 1), clamp(0, calc((.42 - var(--p)) * 25), 1));
  }

  html.about-motion .about-x-wound-copy .about-x-reveal:nth-of-type(2) {
    opacity: min(clamp(0, calc((var(--p) - .42) * 25), 1), clamp(0, calc((.66 - var(--p)) * 25), 1));
  }

  html.about-motion .about-x-wound-copy .about-x-reveal:nth-of-type(3) {
    opacity: min(clamp(0, calc((var(--p) - .66) * 25), 1), clamp(0, calc((.90 - var(--p)) * 25), 1));
  }

  html.about-motion .about-x-line--drift {
    transform: translateX(calc(32px * var(--p)));
  }

  .about-x-condition {
    padding-inline: 5vw;
  }

  html.about-motion .about-x-condition {
    display: block;
    min-height: 380vh;
    padding: 0;
  }

  html.about-motion .about-x-condition-stage {
    position: sticky;
    top: 0;
    display: block;
    height: 100svh;
    overflow: hidden;
  }

  html.about-motion .about-x-condition-stage::after {
    position: absolute;
    z-index: 2;
    content: "";
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, rgb(var(--ground-rgb) / .68) 0%, rgb(var(--ground-rgb) / .52) 29%, rgb(var(--ground-rgb) / .24) 49%, rgb(var(--ground-rgb) / 0) 69%);
  }

  html.about-motion .about-x-condition-layer {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
  }

  html.about-motion .about-x-condition-layer img {
    object-fit: cover;
    object-position: center;
  }

  html.about-motion .about-x-condition-layer[data-state="1"] {
    opacity: clamp(0, calc((.38 - var(--p)) * 7.1429), 1);
  }

  html.about-motion .about-x-condition-layer[data-state="2"] {
    opacity: min(clamp(0, calc((var(--p) - .24) * 7.1429), 1), clamp(0, calc((.66 - var(--p)) * 7.1429), 1));
  }

  html.about-motion .about-x-condition-layer[data-state="3"] {
    opacity: clamp(0, calc((var(--p) - .52) * 7.1429), 1);
  }

  html.about-motion .about-x-condition-copy {
    position: sticky;
    z-index: 3;
    top: 0;
    display: block;
    height: 100svh;
    margin-top: -100svh;
    pointer-events: none;
  }

  html.about-motion .about-x-condition-copy p {
    position: absolute;
    top: 50%;
    left: 9vw;
    width: min(32rem, 42vw);
    margin: 0;
    color: var(--ink);
    font-size: clamp(19px, 1.15vw, 22px);
    font-weight: 500;
    line-height: 1.5;
    transform: translateY(-50%);
  }

  html.about-motion .about-x-condition-copy p[data-state="1"] {
    opacity: min(clamp(0, calc((var(--p) - .06) * 25), 1), clamp(0, calc((.32 - var(--p)) * 25), 1));
  }

  html.about-motion .about-x-condition-copy p[data-state="2"] {
    opacity: min(clamp(0, calc((var(--p) - .32) * 25), 1), clamp(0, calc((.58 - var(--p)) * 25), 1));
  }

  html.about-motion .about-x-condition-copy p[data-state="3"] {
    opacity: min(clamp(0, calc((var(--p) - .58) * 25), 1), clamp(0, calc((.84 - var(--p)) * 25), 1));
  }

  html.about-motion .about-x-condition-copy .about-x-condition-coda {
    top: auto;
    bottom: 10vh;
    opacity: clamp(0, calc((var(--p) - .86) * 25), 1);
    transform: none;
  }

  html.about-motion .about-x-condition .about-x-line--broken span:nth-child(1) { top: 4%; height: 28%; opacity: clamp(0, calc((.78 - var(--p)) * 5), 1); }
  html.about-motion .about-x-condition .about-x-line--broken span:nth-child(2) { top: 37%; height: 21%; transform: translateX(12px); opacity: clamp(0, calc((.73 - var(--p)) * 5), .72); }
  html.about-motion .about-x-condition .about-x-line--broken span:nth-child(3) { top: 64%; height: 13%; transform: translateX(-9px); opacity: min(clamp(0, calc((var(--p) - .28) * 8), .48), clamp(0, calc((.82 - var(--p)) * 6), .48)); }
  html.about-motion .about-x-condition .about-x-line--broken span:nth-child(4) { top: 85%; height: 5%; transform: translateX(7px); opacity: min(clamp(0, calc((var(--p) - .43) * 8), .24), clamp(0, calc((.84 - var(--p)) * 6), .24)); }

  .about-x-works {
    padding: 12vh 5vw 0;
  }

  .about-x-works-head {
    margin-bottom: 15.5vh;
  }

  .about-x-work {
    display: grid;
    min-height: 100vh;
    padding: 10vh 0;
    align-items: center;
    gap: 0;
    grid-template-columns: 42fr 8fr 50fr;
  }

  .about-x-work-copy {
    display: block;
    grid-column: 3;
  }

  .about-x-work-media {
    margin: 0;
    grid-column: 1;
    grid-row: 1;
  }

  .about-x-work--right {
    grid-template-columns: 50fr 8fr 42fr;
  }

  .about-x-work--right .about-x-work-copy {
    grid-column: 1;
    grid-row: 1;
  }

  .about-x-work--right .about-x-work-media {
    grid-column: 3;
  }

  .about-x-work-copy > p:not(.about-x-label) {
    margin-bottom: 22px;
  }

  .about-x-bridge {
    padding: 18vh 5vw 4vh;
  }

  .about-x-bridge-main {
    display: grid;
    align-items: center;
    grid-template-columns: 42fr 58fr;
    gap: 7vw;
  }

  .about-x-bridge-copy {
    display: block;
  }

  .about-x-bridge-media {
    margin: 0;
  }

  .about-x-bridge-media img {
    max-height: 80vh;
  }

  html.about-motion .about-x-bridge-main {
    clip-path: inset(9% 0 0 0);
    transition: clip-path 1300ms cubic-bezier(.2,.7,.2,1), opacity 1000ms ease;
  }

  html.about-motion .about-x-bridge-main.is-in {
    clip-path: inset(0);
  }

  .about-x figure.about-x-bridge-coda {
    width: min(76vw, 129vh, 1440px);
    margin-top: clamp(48px, 5.5vh, 72px);
    margin-right: auto;
    margin-left: auto;
  }

  .about-x-bridge-coda img {
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
    margin-inline: auto;
  }

  .about-x-project {
    display: grid;
    padding: 6vh 5vw 10vh;
    align-items: center;
    grid-template-columns: 55fr 45fr;
    gap: 7vw;
  }

  .about-x-project-copy {
    display: block;
    max-width: 65ch;
  }

  .about-x-project-media {
    margin: 0;
  }

  .about-x-process {
    padding: clamp(140px, 16vh, 180px) max(5vw, calc((100vw - 58ch) / 2));
  }

  .about-x-exit {
    min-height: 100svh;
  }

  .about-x-exit-media img {
    object-fit: cover;
  }

  html.about-motion .about-x-exit-media img {
    transform: scale(calc(1.015 - .015 * var(--p)));
  }

  .about-x-exit-copy {
    min-height: 100svh;
    padding: 0 8vw clamp(1.75rem, 2.75vh, 2.25rem);
  }
}

@media (max-width: 899px) {
  .about-x-line {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-x *,
  .about-x *::before,
  .about-x *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }

  html.about-motion .about-x-reveal,
  html.about-motion .about-x-work,
  html.about-motion .about-x-bridge-main,
  html.about-motion .about-x-bridge-coda,
  html.about-motion .about-x-project,
  html.about-motion .about-x-process {
    opacity: 1;
    transform: none;
  }

  html.about-motion .about-x-wound,
  html.about-motion .about-x-condition {
    min-height: auto;
  }

  html.about-motion .about-x-wound-stage,
  html.about-motion .about-x-wound-copy,
  html.about-motion .about-x-condition-stage,
  html.about-motion .about-x-condition-copy {
    position: static;
    display: contents;
    height: auto;
    margin: 0;
  }

  html.about-motion .about-x-condition {
    display: grid;
    padding: 72px 5vw;
    gap: 24px;
  }

  html.about-motion .about-x-condition-layer,
  html.about-motion .about-x-condition-copy p {
    position: relative;
    inset: auto;
    width: auto;
    opacity: 1;
    transform: none;
  }

  html.about-motion .about-x-condition-copy .about-x-condition-coda {
    inset: auto;
    opacity: 1;
  }

  html.about-motion .about-x-hero-media img,
  html.about-motion .about-x-wound-media img,
  html.about-motion .about-x-exit-media img {
    transform: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   Audio player — popover panel
   Ver 04_PLAYER_SPEC/*.md y 05_CONTEXTUAL_FX/*.md del pack de implementación
   de audio (SUEDE_NOISE_AUDIO_IMPLEMENTATION_PACK_v1.0_2026-09-01). Nada de
   colores literales: los roles vienen del tema activo del panel
   (data-player-album), nunca del data-album de la página.
   ═══════════════════════════════════════════════════════════════════════ */

#audio-system-root {
  /* Contenedor persistente fuera de #page-body / #dynamic-sections: el
     player se monta una vez y sobrevive a cada render() de la SPA. */
  position: relative;
}

#audio-player-popover {
  position: fixed;
  inset: auto;
  margin: 0;
  z-index: 200;
  width: 348px;
  max-width: 368px;
  max-height: min(520px, calc(100svh - 108px));
  overflow-y: auto;
  padding: 15px;
  border: 1px solid var(--rule);
  background: var(--ground-2);
  backdrop-filter: blur(4px);
  color: var(--ink-dim);
  font-family: var(--font-mono);
}

/* Tema del panel: SIEMPRE Home Blind o Shelterless, nunca Silica, sea cual
   sea el tema de la página en la que se abre. */
#audio-player-popover[data-player-album="home-blind"] {
  --ground-2: #0a0b0e;
  --surface: #17191e;
  --edge: #2e3138;
  --edge-2: #3a3d42;
  --ink: #e8e4dc;
  --ink-dim: #b3afab;
  --accent: #f28a28;
  --accent-dim: #d8731f;
  --accent-text: #f28a28;
  --accent-text-dim: #c88b52;
  --accent-rgb: 242 138 40;
  --edge-rgb: 58 61 66;
  --rule: rgb(var(--edge-rgb) / .34);
}

#audio-player-popover[data-player-album="shelterless"] {
  --ground-2: #131010;
  --surface: #1d1815;
  --edge: #3a302a;
  --edge-2: #4a3b30;
  --ink: #e6ded4;
  --ink-dim: #b7aea7;
  --accent: #c4643c;
  --accent-dim: #a5502e;
  --accent-text: #c86d48;
  --accent-text-dim: #ad7a64;
  --accent-rgb: 196 100 60;
  --edge-rgb: 74 59 48;
  --rule: rgb(var(--edge-rgb) / .34);
}

.audio-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.audio-panel-title {
  color: var(--ink);
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.audio-panel-close {
  min-width: 32px;
  min-height: 32px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-dim);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.audio-panel-close:hover,
.audio-panel-close:focus-visible {
  border-color: rgb(var(--accent-rgb) / .35);
  color: var(--accent-text);
  outline: none;
}

.audio-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--rule);
}

.audio-tab {
  padding: 8px 4px;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--ink-dim);
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}

.audio-tab:hover,
.audio-tab:focus-visible {
  color: var(--ink);
  outline: none;
}

.audio-tab.is-active {
  border-bottom-color: rgb(var(--accent-rgb) / 1);
  color: var(--accent-text);
}

.audio-tracklist {
  max-height: 208px;
  margin-bottom: 8px;
  overflow-y: auto;
  border: 1px solid var(--rule);
}

.audio-tracklist-loading {
  margin: 0;
  padding: 10px;
  color: var(--ink-dim);
  font-size: .74rem;
}

.audio-track-row {
  display: flex;
  width: 100%;
  min-height: 40px;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: none;
  border-bottom: 1px solid var(--rule);
  background: transparent;
  color: var(--ink-dim);
  font-family: var(--font-mono);
  font-size: .74rem;
  text-align: left;
  cursor: pointer;
}

.audio-track-row:last-child {
  border-bottom: none;
}

.audio-track-row:hover,
.audio-track-row:focus-visible {
  background: rgb(var(--accent-rgb) / .06);
  color: var(--ink);
  outline: none;
}

.audio-track-row.is-active {
  color: var(--accent-text);
}

.audio-track-code {
  flex: 0 0 auto;
  min-width: 22px;
  opacity: .75;
}

.audio-track-title {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.audio-track-playing {
  flex: 0 0 auto;
  color: var(--accent-text);
  font-size: .6rem;
}

.audio-track-duration {
  flex: 0 0 auto;
  opacity: .75;
  font-size: .7rem;
}

.audio-now-playing {
  min-height: 1em;
  margin-bottom: 6px;
  overflow: hidden;
  color: var(--ink);
  font-size: .76rem;
  letter-spacing: .04em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.audio-progress-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.audio-seek {
  flex: 1 1 auto;
  min-height: 20px;
  accent-color: var(--accent-text);
}

.audio-time {
  flex: 0 0 auto;
  color: var(--ink-dim);
  font-size: .68rem;
  font-variant-numeric: tabular-nums;
}

.audio-transport {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-bottom: 10px;
}

.audio-btn {
  min-width: 40px;
  min-height: 40px;
  border: 1px solid rgb(var(--edge-rgb) / .32);
  background: transparent;
  color: var(--ink-dim);
  font-size: .95rem;
  cursor: pointer;
}

.audio-btn:hover,
.audio-btn:focus-visible {
  border-color: rgb(var(--accent-rgb) / .55);
  color: var(--accent-text);
  outline: none;
}

.audio-playpause {
  min-width: 48px;
  min-height: 48px;
  font-size: 1.1rem;
}

.audio-bottom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.audio-volume-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.audio-vol-toggle,
.audio-mute,
.audio-fx-toggle {
  min-height: 32px;
  padding: 6px 9px;
  border: 1px solid rgb(var(--edge-rgb) / .32);
  background: transparent;
  color: var(--ink-dim);
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}

.audio-vol-toggle:hover, .audio-vol-toggle:focus-visible,
.audio-mute:hover, .audio-mute:focus-visible,
.audio-fx-toggle:hover, .audio-fx-toggle:focus-visible {
  border-color: rgb(var(--accent-rgb) / .55);
  color: var(--accent-text);
  outline: none;
}

.audio-mute[aria-pressed="true"],
.audio-fx-toggle[aria-pressed="true"] {
  border-color: rgb(var(--accent-rgb) / .7);
  color: var(--accent-text);
}

.audio-volume {
  width: 90px;
  accent-color: var(--accent-text);
}

.audio-error {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid rgb(var(--accent-rgb) / .5);
  color: var(--ink);
  font-size: .7rem;
}

/* Compact player iteration: preserve the approved visual language while
   removing permanent vertical space and shortening the internal viewport. */
#audio-player-popover {
  padding: 4px 10px;
}

.audio-panel-head {
  min-height: 28px;
  margin-bottom: 1px;
}

.audio-close {
  min-width: 28px;
  min-height: 28px;
  padding: 2px 6px;
}

.audio-tabs {
  margin-bottom: 2px;
}

.audio-tab {
  padding: 3px 4px;
}

.audio-tracklist {
  max-height: 96px;
  margin-bottom: 3px;
  scrollbar-width: thin;
  scrollbar-color: rgb(var(--accent-rgb) / .65) rgb(var(--edge-rgb) / .18);
}

.audio-tracklist::-webkit-scrollbar {
  width: 7px;
}

.audio-tracklist::-webkit-scrollbar-track {
  background: rgb(var(--edge-rgb) / .18);
}

.audio-tracklist::-webkit-scrollbar-thumb {
  border: 1px solid rgb(var(--edge-rgb) / .35);
  background: rgb(var(--accent-rgb) / .65);
}

#audio-player-popover:has(.audio-now-playing:empty) .audio-tracklist {
  margin-top: calc(0.38rem + 2.5px);
  margin-bottom: calc(0.38rem + 3.5px);
}

.audio-now-playing:empty {
  display: none;
}

.audio-track-row {
  min-height: 23.75px;
  padding: 1px 8px;
}

.audio-now-playing {
  margin-bottom: 1px;
}

.audio-progress-row {
  gap: 6px;
  margin-bottom: 2px;
}

.audio-seek {
  min-height: 18px;
}

.audio-transport {
  gap: 12px;
  margin-bottom: 2px;
}

.audio-btn {
  min-width: 34px;
  min-height: 34px;
  padding: 1px 5px;
}

.audio-bottom-row,
.audio-volume-group {
  gap: 6px;
}

.audio-vol-toggle,
.audio-mute,
.audio-fx-toggle {
  min-height: 28px;
  padding: 3px 7px;
}

.audio-error[hidden] {
  display: none;
}

.audio-error:not([hidden]) {
  margin-top: 3px;
  padding: 4px 6px;
}

@media (prefers-reduced-motion: no-preference) {
  #audio-player-popover {
    transition: opacity .16s ease, transform .16s ease;
  }
}

@media (max-width: 768px) {
  #audio-player-popover {
    width: min(368px, calc(100vw - 20px));
    max-width: none;
    left: 10px !important;
    right: 10px !important;
    max-height: min(68svh, 520px);
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
  }

  .audio-tracklist {
    max-height: 120px;
  }

  .audio-track-row {
    min-height: 44px;
  }

  .audio-btn {
    min-width: 44px;
    min-height: 44px;
  }

  .audio-vol-toggle,
  .audio-mute,
  .audio-fx-toggle {
    min-height: 40px;
  }
}