/* =========================================================================
   joanbages.com — 2027
   Sistema musical interactiu · artista sonor, compositor, pianista
   -------------------------------------------------------------------------
   Interfície monocroma. El color hi entra només com a energia sonora:
   greu = vermell, agut = violeta. La imatge la genera el so.
   ========================================================================= */

:root{
  --bg:      #050507;
  --bg-2:    #0b0b0f;
  --bg-3:    #121218;
  --line:    #26262f;
  --line-2:  #16161d;
  --fg:      #ecedf2;
  --fg-2:    #9b9ca8;
  --fg-3:    #61626e;

  /* espectre: greu → agut */
  --s0:#ff3b1f; --s1:#ff8a1f; --s2:#f2cd3c; --s3:#35e0d0; --s4:#8b5cff;
  --hot:var(--s2);

  --mono: ui-monospace,"SF Mono","JetBrains Mono",Menlo,"DejaVu Sans Mono",Consolas,monospace;
  --sans: "Helvetica Neue",Helvetica,-apple-system,"Segoe UI",Arial,sans-serif;
  --disp: "Helvetica Neue",Helvetica,Arial,sans-serif;

  --rail: 13rem;
  --pad: clamp(1.15rem,3.5vw,3rem);
  --rhythm: clamp(3.5rem,8vw,7rem);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--sans);
  font-size:clamp(15px,.5vw + 13.6px,16.5px); line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
::selection{ background:var(--s0); color:#fff; }
[hidden]{ display:none !important; }

/* ---------------------------------------------------------- camp espectral */
#field{
  position:fixed; inset:0; width:100vw; height:100vh;
  z-index:0; pointer-events:none; opacity:.85;
}
body::after{  /* trama fina, com un paper de partitura */
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none;
  background:repeating-linear-gradient(to bottom,rgba(255,255,255,.022) 0 1px,transparent 1px 4px);
  mix-blend-mode:overlay;
}
.page{ position:relative; z-index:2; }

/* --------------------------------------------------------------- capçalera */
.site-header{
  position:sticky; top:0; z-index:60;
  background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid var(--line-2);
}
.bar{
  display:flex; align-items:center; gap:clamp(.5rem,1.2vw,1.1rem);
  padding:0 var(--pad); min-height:58px;
}

.brand{ text-decoration:none; margin-right:auto; display:flex; align-items:baseline; gap:.6rem; }
.brand b{
  font-family:var(--disp); font-weight:700; font-size:.95rem;
  letter-spacing:-.02em; text-transform:uppercase;
}
.brand i{
  font-style:normal; font-family:var(--mono); font-size:.56rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--fg-3);
  white-space:nowrap;
}
@media (max-width:1340px){ .brand i{ display:none; } }

.nav{ display:flex; align-items:center; gap:clamp(.5rem,1.1vw,1.1rem); }
.nav a{
  text-decoration:none; color:#bcbdc9;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.11em;
  text-transform:uppercase; padding:.4rem 0; position:relative; white-space:nowrap;
  transition:color .18s;
}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:.1rem; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.nav a:hover,.nav a:focus-visible{ color:var(--fg); }
.nav a:hover::after,.nav a:focus-visible::after{ transform:scaleX(1); }
.nav a[aria-current="page"]{ color:var(--fg); }
.nav a[aria-current="page"]::after{ transform:scaleX(1); background:var(--s2); }

/* interruptor de so + espectre en directe */
.sound{
  display:flex; align-items:center; gap:.5rem;
  border:1px solid var(--line); border-radius:2px; padding:.25rem .45rem .25rem .3rem;
  background:var(--bg-2);
}
.sound button{
  display:flex; align-items:center; gap:.4rem;
  background:none; border:0; cursor:pointer; color:var(--fg-2);
  font-family:var(--mono); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase;
  padding:.15rem .2rem;
}
.sound button:hover{ color:var(--fg); }
.sound .dot{
  width:7px; height:7px; border-radius:50%; background:var(--fg-3);
  box-shadow:0 0 0 0 rgba(242,205,60,.5); transition:background .25s;
}
.sound[data-on="true"] button{ color:var(--fg); }
.sound[data-on="true"] .dot{ background:var(--s2); animation:pulse 2s infinite; }
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(242,205,60,.45); }
  70%{ box-shadow:0 0 0 7px rgba(242,205,60,0); }
  100%{ box-shadow:0 0 0 0 rgba(242,205,60,0); }
}
.sound canvas{ width:78px; height:18px; display:block; }
@media (max-width:560px){ .sound canvas{ width:44px; } }

.lang{ display:flex; gap:.15rem; }
.lang button{
  background:none; border:1px solid transparent; color:var(--fg-3); cursor:pointer;
  font-family:var(--mono); font-size:.62rem; letter-spacing:.1em; padding:.2rem .35rem;
}
.lang button:hover{ color:var(--fg); }
.lang button[aria-pressed="true"]{ color:var(--bg); background:var(--fg); }

.nav-toggle{
  display:none; background:none; border:1px solid var(--line); color:var(--fg);
  cursor:pointer; font-family:var(--mono); font-size:.62rem; letter-spacing:.14em;
  text-transform:uppercase; padding:.35rem .55rem;
}
/* Entre 1080 i 1460 px el menú no hi cabia a la mateixa línia i l'últim
   ítem quedava tallat contra la vora. Ara baixa a una línia pròpia,
   sencer i llegible, sense haver d'obrir la finestra del tot.          */
@media (min-width:1081px) and (max-width:1460px){
  .bar{ flex-wrap:wrap; padding-bottom:0; }
  .nav{
    order:5; width:100%; justify-content:flex-start;
    gap:clamp(.9rem,2.2vw,1.8rem);
    border-top:1px solid var(--line-2); margin-top:.1rem; padding:.15rem 0 .35rem;
  }
}

@media (max-width:1080px){
  .nav-toggle{ display:block; order:4; }
  .nav{
    order:5; width:100%; flex-direction:column; align-items:stretch; gap:0;
    display:none; padding-bottom:.6rem;
  }
  .nav a{ padding:.65rem 0; border-bottom:1px solid var(--line-2); }
  .site-header.open .nav{ display:flex; }
  .bar{ flex-wrap:wrap; padding-block:.45rem; }
  .brand{ margin-right:auto; }
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--s2); color:#000; padding:.6rem 1rem;
}
.skip:focus{ left:0; }

/* ------------------------------------------------------- graella + canal */
.wrap{ padding-inline:var(--pad); max-width:1500px; margin-inline:auto; }

.split{ display:grid; grid-template-columns:1fr; gap:clamp(1.2rem,3vw,2.5rem); }
@media (min-width:1000px){
  .split{ grid-template-columns:var(--rail) minmax(0,1fr); }
}

/* canal lateral, com una tira de taula de mescles */
.rail{
  font-family:var(--mono); font-size:.6rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--fg-3);
  display:flex; flex-direction:column; gap:.55rem;
  border-top:1px solid var(--line-2); padding-top:.7rem;
}
.rail b{ color:var(--s2); font-weight:400; }
.rail span{ display:block; }
/* la pista del gest: només té sentit si el so es pot activar */
.rail .gest{ margin-top:.5rem; padding-top:.6rem; border-top:1px solid var(--line-2);
  color:var(--s2); letter-spacing:.12em; }
@media (min-width:1000px){
  .rail{ position:sticky; top:78px; align-self:start; }
}

/* -------------------------------------------------------------- portada */
.hero{ padding-block:clamp(3rem,10vw,7.5rem) clamp(2rem,6vw,4rem); }
.hero .roles{
  font-family:var(--mono); font-size:clamp(.6rem,1.3vw,.72rem);
  letter-spacing:.32em; text-transform:uppercase; color:var(--fg-2); margin:0 0 1.6rem;
}
.hero h1{
  font-family:var(--disp); font-weight:700;
  font-size:clamp(3rem,13vw,10.5rem); line-height:.84;
  letter-spacing:-.045em; text-transform:uppercase;
  margin:0 0 1.6rem; max-width:14ch;
}
.hero h1 span{ display:block; }
.hero h1 span:nth-child(2){ color:transparent; -webkit-text-stroke:1px var(--fg-2); }
.hero .lede{
  max-width:46ch; color:var(--fg-2); font-size:clamp(1rem,1.4vw,1.15rem); margin:0 0 2rem;
}

/* comptadors */
.counts{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  background:var(--line-2); border-block:1px solid var(--line-2);
}
@media (min-width:760px){ .counts{ grid-template-columns:repeat(4,1fr); } }
.counts a{
  background:var(--bg); text-decoration:none; padding:1.4rem 1.2rem;
  display:flex; flex-direction:column; gap:.3rem;
  transition:background .25s;
}
.counts a:hover{ background:var(--bg-2); }
.counts b{
  font-family:var(--disp); font-weight:700; font-size:clamp(2rem,4.5vw,3.2rem);
  line-height:1; letter-spacing:-.04em;
}
.counts a:nth-child(1) b{ color:var(--s0); }
.counts a:nth-child(2) b{ color:var(--s1); }
.counts a:nth-child(3) b{ color:var(--s3); }
.counts a:nth-child(4) b{ color:var(--s4); }
.counts span{
  font-family:var(--mono); font-size:.6rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--fg-3);
}

/* ------------------------------------------------------------- seccions */
section{ padding-block:var(--rhythm); }
section + section{ border-top:1px solid var(--line-2); }
section.tight{ padding-block:clamp(1.5rem,4vw,2.5rem); }

.page-head{ padding-block:clamp(2.5rem,8vw,5.5rem) clamp(1.2rem,3vw,2rem); }
.page-head h1{
  font-family:var(--disp); font-weight:700; text-transform:uppercase;
  font-size:clamp(2.4rem,8vw,6rem); line-height:.88; letter-spacing:-.04em; margin:0 0 .8rem;
}
.page-head p{ color:var(--fg-2); max-width:56ch; margin:0; }

.eyebrow{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.3em;
  text-transform:uppercase; color:var(--s2); margin:0 0 1rem;
}

h2{
  font-family:var(--disp); font-weight:700; text-transform:uppercase;
  font-size:clamp(1.4rem,3vw,2.1rem); line-height:1.05; letter-spacing:-.03em; margin:0 0 1.2rem;
}
h3{
  font-family:var(--mono); font-size:.64rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--fg-3); font-weight:400; margin:0 0 1.1rem;
}
p{ margin:0 0 1.15rem; max-width:66ch; }
p:last-child{ margin-bottom:0; }
.muted{ color:var(--fg-2); }
.lead{ font-size:1.1rem; }

.cols2{ display:grid; gap:clamp(1.5rem,4vw,3rem); }
@media (min-width:860px){ .cols2{ grid-template-columns:1fr 1fr; } }

.btn-row{ display:flex; flex-wrap:wrap; gap:.5rem; }
.btn{
  display:inline-flex; align-items:center; gap:.5rem; text-decoration:none;
  border:1px solid var(--line); padding:.55rem 1rem; color:var(--fg-2);
  font-family:var(--mono); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase;
  transition:color .2s,border-color .2s,background .2s;
}
.btn:hover{ color:var(--bg); background:var(--fg); border-color:var(--fg); }
.btn.hot{ border-color:var(--s2); color:var(--s2); }
.btn.hot:hover{ background:var(--s2); color:#000; }

/* ----------------------------------------------------------------- fitxes */
.grid{ display:grid; gap:1px; background:var(--line-2); border:1px solid var(--line-2); }
@media (min-width:700px){ .grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1080px){ .grid.three{ grid-template-columns:repeat(3,1fr); } }
.tile{
  background:var(--bg); padding:clamp(1.2rem,2.6vw,1.9rem);
  display:flex; flex-direction:column; gap:.6rem; text-decoration:none;
  transition:background .25s;
}
a.tile:hover{ background:var(--bg-2); }
.tile h4{
  font-family:var(--disp); font-weight:700; text-transform:uppercase;
  font-size:1.02rem; letter-spacing:-.02em; margin:0;
}
.tile p{ color:var(--fg-2); font-size:.9rem; margin:0; }
.tile .meta{
  font-family:var(--mono); font-size:.58rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--fg-3); margin-top:auto; padding-top:.7rem;
}

/* ------------------------------------------------------------ eina/llista */
.toolbar{
  display:flex; flex-wrap:wrap; gap:.5rem; align-items:center;
  padding-block:1rem; border-bottom:1px solid var(--line);
  position:sticky; top:58px; z-index:30;
  background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:blur(14px);
}
@media (max-width:1080px){ .toolbar{ position:static; backdrop-filter:none; } }
.toolbar input[type="search"]{
  flex:1 1 15rem; min-width:0;
  background:var(--bg-2); border:1px solid var(--line); color:var(--fg);
  padding:.5rem .8rem; font-family:var(--mono); font-size:.8rem; letter-spacing:.04em;
}
.toolbar input[type="search"]:focus{ outline:2px solid var(--s2); outline-offset:-1px; }
.toolbar select{
  background:var(--bg-2); border:1px solid var(--line); color:var(--fg);
  padding:.5rem .7rem; font-family:var(--mono); font-size:.72rem;
}
.count{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.14em;
  color:var(--fg-3); margin-left:auto; white-space:nowrap;
}

.entries{ list-style:none; margin:0; padding:0; }
.entry{
  display:grid; gap:.1rem .9rem; padding:.85rem 0;
  border-bottom:1px solid var(--line-2);
  grid-template-columns:3.2rem 4.6rem minmax(0,1fr);
  align-items:start; cursor:default;
  transition:background .18s;
}
.entry:hover{ background:var(--bg-2); }
/* petit indicador d'energia: cada entrada té el seu lloc a l'espectre */
.entry .sig{
  grid-row:span 3; align-self:stretch; margin-top:.35rem;
  height:1.5rem; display:flex; align-items:flex-end; gap:2px;
}
.entry .sig i{ display:block; width:2px; background:currentColor; opacity:.55; }
.entry .idx{
  font-family:var(--mono); font-size:.66rem; color:var(--fg-3); padding-top:.3rem;
  letter-spacing:.02em;
}
.entry .title{
  grid-column:3; margin:0; font-family:var(--disp); font-weight:700;
  font-size:1.02rem; line-height:1.25; letter-spacing:-.015em;
}
.entry:hover .title{ color:var(--s2); }
/* obres que són un lloc: el títol hi porta */
.entry .title a{
  color:inherit; text-decoration:none;
  border-bottom:1px solid color-mix(in srgb,var(--s2) 55%,transparent);
}
.entry .title a:hover{ color:var(--s2); border-bottom-color:var(--s2); }
.entry .desc{ grid-column:3; color:var(--fg-2); font-size:.86rem; margin:.15rem 0 0; max-width:78ch; }
.entry .tag{
  grid-column:3; font-family:var(--mono); font-size:.58rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--fg-3); margin-top:.3rem;
}
@media (max-width:620px){
  .entry{ grid-template-columns:2.4rem minmax(0,1fr); }
  .entry .sig{ grid-row:span 3; }
  .entry .idx{ grid-column:2; padding-top:0; }
  .entry .title,.entry .desc,.entry .tag{ grid-column:2; }
}

.year-head{
  position:sticky; top:calc(58px + 3.3rem); z-index:20;
  display:flex; align-items:center; gap:.8rem;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.3em;
  color:var(--fg); background:var(--bg);
  padding:1.6rem 0 .5rem; border-bottom:1px solid var(--line);
}
@media (max-width:1080px){ .year-head{ position:static; } }
.year-head .bar-n{
  height:3px; background:var(--s2); opacity:.75; min-width:2px;
}
.year-head em{
  font-style:normal; font-family:var(--mono); font-size:.58rem;
  letter-spacing:.14em; color:var(--fg-3);
}

.empty{
  padding:3rem 0; color:var(--fg-3);
  font-family:var(--mono); font-size:.72rem; letter-spacing:.14em;
}

/* -------------------------------------------------------------- portades */
.covers{
  display:grid; gap:clamp(.7rem,1.6vw,1.2rem);
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
}
.cover{ display:flex; flex-direction:column; gap:.45rem; text-decoration:none; color:inherit; }
.cover .shot{
  position:relative; aspect-ratio:1; overflow:hidden;
  background:var(--bg-2); border:1px solid var(--line-2);
}
.cover img{
  width:100%; height:100%; object-fit:cover;
  font-size:0; color:transparent;
  filter:grayscale(1) contrast(1.08); transition:filter .35s,transform .5s;
}
a.cover:hover img{ filter:none; transform:scale(1.04); }
a.cover:hover .shot{ border-color:currentColor; }
.cover .fmt{
  font-family:var(--mono); font-size:.55rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--fg-3);
}
.cover .name{ font-size:.82rem; line-height:1.3; color:var(--fg-2); }
a.cover:hover .name{ color:var(--fg); }

/* --------------------------------------------------------------- figures */
figure{ margin:0; }
figure img{
  width:100%; border:1px solid var(--line-2); background:var(--bg-2);
  font-size:0; color:transparent;
  filter:grayscale(1) contrast(1.05); transition:filter .4s;
}
figure:hover img{ filter:none; }
figcaption{
  font-family:var(--mono); font-size:.58rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--fg-3); margin-top:.5rem;
}
/* esquemes de la tesi: són per llegir, no per mirar — sense filtre i sobre blanc */
.esquemes{ display:grid; gap:clamp(1.1rem,2.6vw,1.8rem); margin:1.4rem 0 0; }
@media (min-width:760px){ .esquemes{ grid-template-columns:1fr 1fr; } }
.esquemes figure img{
  filter:none; background:#fff; border:1px solid var(--line);
  padding:0; image-rendering:auto;
}
.esquemes figure:hover img{ filter:none; }
.esquemes figcaption{
  font-family:var(--sans); text-transform:none; letter-spacing:0;
  font-size:.78rem; line-height:1.5; color:var(--fg-2); margin-top:.55rem;
}
.esquemes .ref{ font-family:var(--mono); font-size:.6rem; letter-spacing:.14em;
  color:var(--s2); text-transform:uppercase; display:block; margin-bottom:.25rem; }

.duo{ display:grid; gap:1px; background:var(--line-2); }
@media (min-width:700px){ .duo{ grid-template-columns:1fr 1fr; } }
.strip{ display:grid; gap:1px; background:var(--line-2); }
@media (min-width:640px){ .strip{ grid-template-columns:repeat(3,1fr); } }
.strip img{ aspect-ratio:4/3; object-fit:cover; }

/* ---------------------------------------------------------------- vídeos */
.videos{ display:grid; gap:1px; background:var(--line-2); }
@media (min-width:820px){ .videos{ grid-template-columns:1fr 1fr; } }
.video{ position:relative; aspect-ratio:16/9; background:var(--bg-2); }
.video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* ------------------------------------------------------------------ nota */
.note{
  border-left:2px solid var(--s2); background:var(--bg-2);
  padding:.9rem 1.1rem; color:var(--fg-2); font-size:.88rem;
}

/* ------------------------------------------------------------------- peu */
.site-footer{
  border-top:1px solid var(--line-2); padding-block:clamp(2.5rem,6vw,4rem);
  color:var(--fg-3); font-size:.86rem;
}
.site-footer .in{ display:grid; gap:2rem; }
@media (min-width:820px){ .site-footer .in{ grid-template-columns:1fr auto; align-items:end; } }
.social{ display:flex; flex-wrap:wrap; gap:.35rem; list-style:none; margin:.9rem 0 0; padding:0; }
.social a{
  text-decoration:none; border:1px solid var(--line); padding:.3rem .7rem;
  font-family:var(--mono); font-size:.58rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--fg-2); transition:color .2s,border-color .2s;
}
.social a:hover{ color:var(--fg); border-color:var(--fg-3); }
a.mail{ color:var(--fg); text-decoration:none; border-bottom:1px solid var(--s2); }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* =========================================================================
   Llegibilitat: el camp espectral queda obert a la capçalera de cada
   pàgina i es vela per sota, on hi ha el text i els catàlegs.
   ========================================================================= */
#field{ opacity:.78; }

main > section{
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(2px);
}
main > section:first-of-type{
  box-shadow:0 -60px 60px -30px color-mix(in srgb,var(--bg) 88%,transparent);
}
.site-footer{
  background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:blur(2px);
}
.toolbar{ background:var(--bg); backdrop-filter:none; }
.year-head{ background:color-mix(in srgb,var(--bg) 90%,transparent); }
@supports not (backdrop-filter: blur(2px)){
  main > section,.site-footer{ background:var(--bg); }
}

/* portada de disc que encara no s'ha copiat: caixa neutra, no icona trencada */
.cover .shot{
  background-image:
    repeating-linear-gradient(45deg,rgba(255,255,255,.03) 0 6px,transparent 6px 12px);
}
.cover img{ display:block; }

/* enllaços als articles escanejats o en PDF */
.entry .files{ grid-column:3; display:flex; flex-wrap:wrap; gap:.35rem; margin:.5rem 0 0; }
.entry .files .file{
  text-decoration:none; border:1px solid var(--line); padding:.18rem .55rem;
  font-family:var(--mono); font-size:.56rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--fg-2); transition:color .2s,border-color .2s,background .2s;
}
.entry .files .file:hover{ background:var(--s2); border-color:var(--s2); color:#000; }
@media (max-width:620px){ .entry .files{ grid-column:2; } }

/* banda d'imatge a tota amplada */
.band{ position:relative; }
.band img{ width:100%; max-height:72vh; object-fit:cover; filter:grayscale(1) contrast(1.06); transition:filter .6s; }
.band:hover img{ filter:none; }
.band figcaption{
  position:absolute; left:var(--pad); bottom:1rem;
  background:color-mix(in srgb,var(--bg) 75%,transparent); padding:.3rem .6rem;
}

/* galeria d'obra */
.gallery{ display:grid; gap:1px; background:var(--line-2); border:1px solid var(--line-2); }
@media (min-width:600px){ .gallery{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .gallery{ grid-template-columns:repeat(4,1fr); } }
.gallery img{ aspect-ratio:4/3; object-fit:cover; width:100%;
  filter:grayscale(.35) contrast(1.05); transition:filter .45s, transform .6s; }
.gallery img:hover{ filter:none; transform:scale(1.03); }

/* =========================================================================
   Desplegables dels catàlegs
   ========================================================================= */
.modes{ display:flex; gap:1px; background:var(--line); border:1px solid var(--line); }
.modes button{
  background:var(--bg-2); border:0; cursor:pointer; color:var(--fg-3);
  font-family:var(--mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase;
  padding:.45rem .7rem; transition:background .2s,color .2s;
}
.modes button:hover{ color:var(--fg); }
.modes button[aria-pressed="true"]{ background:var(--fg); color:var(--bg); }

.bulk{ display:flex; gap:.35rem; }
.bulk button{
  background:none; border:1px solid var(--line); cursor:pointer; color:var(--fg-3);
  font-family:var(--mono); font-size:.58rem; letter-spacing:.12em; text-transform:uppercase;
  padding:.45rem .6rem; transition:color .2s,border-color .2s;
}
.bulk button:hover{ color:var(--fg); border-color:var(--fg-3); }

details.grp{ border-bottom:1px solid var(--line-2); }
details.grp > summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:.9rem;
  padding:1rem .2rem 1rem 0; user-select:none;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--fg-2); transition:color .2s;
}
details.grp > summary::-webkit-details-marker{ display:none; }
details.grp > summary::before{
  content:"+"; font-family:var(--mono); font-size:.95rem; line-height:1;
  color:var(--s2); width:1rem; flex:none; transition:transform .25s;
}
details.grp[open] > summary::before{ content:"–"; }
details.grp > summary:hover{ color:var(--fg); }
details.grp[open] > summary{ color:var(--fg); }
summary .gname{ flex:none; }
summary .gbar{ height:3px; background:var(--s2); opacity:.6; flex:none; }
details.grp[open] > summary .gbar{ opacity:1; }
summary .gnum{ margin-left:auto; color:var(--fg-3); letter-spacing:.1em; }
details.grp[open] > summary .gnum{ color:var(--s2); }
.entries-in{ list-style:none; margin:0; padding:0 0 1.2rem; }
.entries-in .entry:last-child{ border-bottom:0; }
@media (max-width:620px){
  summary .gbar{ display:none; }
  details.grp > summary{ font-size:.66rem; letter-spacing:.14em; gap:.6rem; }
}

/* en saltar a un any, deixar espai per a la capçalera i la barra d'eines */
details.grp{ scroll-margin-top:130px; }
@media (max-width:1080px){ details.grp{ scroll-margin-top:20px; } }

/* =========================================================================
   Textura tipomorfològica — una per classe de massa
   El contrast entre pàgines és de GRA, dins del mateix registre fosc.
   ========================================================================= */
#texture{
  position:fixed; inset:0; width:100vw; height:100vh;
  z-index:0; pointer-events:none; opacity:.9;
}
#field{ z-index:1; }
body::after{ z-index:2; }
.page{ z-index:3; }

/* cada classe té el seu matís de fosc: mateixa lluminositat, altre to */
body[data-patch="pur"]            { --bg:#04060b; --bg-2:#0a0d14; --line-2:#141a22; }
body[data-patch="tonique"]        { --bg:#070608; --bg-2:#0d0b10; --line-2:#191620; }
body[data-patch="groupe-tonique"] { --bg:#05070b; --bg-2:#0b0e15; --line-2:#151a24; }
body[data-patch="cannele"]        { --bg:#08050a; --bg-2:#0e0a12; --line-2:#1b1522; }
body[data-patch="groupe-nodal"]   { --bg:#070707; --bg-2:#0d0d0e; --line-2:#18181c; }
body[data-patch="noeud"]          { --bg:#0a0406; --bg-2:#11080b; --line-2:#201216; }
body[data-patch="frange"]         { --bg:#04070a; --bg-2:#0a0e12; --line-2:#141b21; }

/* el vel deixa passar una mica més de textura */
main > section{ background:color-mix(in srgb,var(--bg) 84%,transparent); }
.site-footer{ background:color-mix(in srgb,var(--bg) 90%,transparent); }

/* -------------------------------------------------------------------------
   Gra de superfície: una trama CSS per classe de massa, damunt del vel i
   sota el text. És el que fa que cada pàgina es toqui diferent, fins i tot
   on el contingut tapa el camp espectral.
   ------------------------------------------------------------------------- */
main > section{ position:relative; }
main > section::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  opacity:.9;
}
main > section > *{ position:relative; z-index:1; }

/* 1 · son pur — gairebé res: una retícula ampla i neta */
body[data-patch="pur"] main > section::before{
  background:
    repeating-linear-gradient(to bottom, rgba(210,225,255,.055) 0 1px, transparent 1px 84px);
}

/* 2 · tonique — estries horitzontals de pas harmònic */
body[data-patch="tonique"] main > section::before{
  background:
    repeating-linear-gradient(to bottom, rgba(255,205,120,.05) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(to bottom, rgba(255,150,90,.045) 0 1px, transparent 1px 27px);
}

/* 3 · groupe tonique — tres famílies d'estries superposades */
body[data-patch="groupe-tonique"] main > section::before{
  background:
    repeating-linear-gradient(to bottom, rgba(255,110,70,.045) 0 1px, transparent 1px 11px),
    repeating-linear-gradient(to bottom, rgba(120,235,220,.04) 0 1px, transparent 1px 17px),
    repeating-linear-gradient(to bottom, rgba(160,130,255,.035) 0 1px, transparent 1px 29px);
}

/* 4 · cannelé — canals verticals de gruix desigual */
body[data-patch="cannele"] main > section::before{
  background:
    repeating-linear-gradient(to right, rgba(230,190,255,.06) 0 2px, transparent 2px 23px),
    repeating-linear-gradient(to right, rgba(255,160,110,.04) 0 1px, transparent 1px 7px);
}

/* 5 · groupe nodal — clapes de punts en registres */
body[data-patch="groupe-nodal"] main > section::before{
  background-image:
    radial-gradient(rgba(255,200,140,.10) 1px, transparent 1.4px),
    radial-gradient(rgba(120,230,215,.08) 1px, transparent 1.4px);
  background-size:19px 19px, 31px 31px;
  background-position:0 0, 9px 13px;
}

/* 6 · nœud — reixa creuada densa */
body[data-patch="noeud"] main > section::before{
  background:
    repeating-linear-gradient(45deg,  rgba(255,90,60,.05) 0 1px, transparent 1px 11px),
    repeating-linear-gradient(-45deg, rgba(255,140,70,.045) 0 1px, transparent 1px 11px);
}

/* 7 · frange — gra finíssim, al llindar del soroll */
body[data-patch="frange"] main > section::before{
  background-image:
    radial-gradient(rgba(190,210,255,.09) .6px, transparent .9px),
    radial-gradient(rgba(150,120,255,.06) .6px, transparent .9px);
  background-size:5px 5px, 7px 7px;
  background-position:0 0, 2px 3px;
}

/* la trama fina general sobra quan cada pàgina ja té el seu gra */
body::after{ opacity:.5; }
#texture{ opacity:1; }

/* =========================================================================
   La criatura — el cursor és un ésser que viu dins el web
   ========================================================================= */
#creature{
  position:fixed; inset:0; z-index:90;
  pointer-events:none; width:100vw; height:100vh;
}

/* el cursor del sistema s'amaga només quan l'ésser és a la pàgina; sobre
   text i camps de text es manté, que és on fa falta */
@media (pointer:fine) and (prefers-reduced-motion:no-preference){
  .has-creature,
  .has-creature a,
  .has-creature button,
  .has-creature summary,
  .has-creature .card,
  .has-creature .tile,
  .has-creature .cover{ cursor:none; }
  .has-creature input,
  .has-creature select,
  .has-creature textarea,
  .has-creature p,
  .has-creature h1,.has-creature h2,.has-creature h3,.has-creature h4{ cursor:auto; }
}

/* ------------------------------------------------- el fader de volum ---
   Sempre visible al costat de l'interruptor. El regueró ple porta el color
   groc de l'espectre; el que queda per omplir, la línia fosca.           */
.sound input.vol{
  -webkit-appearance:none; appearance:none;
  width:84px; height:16px; margin:0 0 0 .5rem;
  background:transparent; cursor:pointer; flex:none;
}
.sound input.vol::-webkit-slider-runnable-track{
  height:3px; border-radius:2px;
  background:linear-gradient(to right,var(--s2) 0,var(--s2) var(--v,75%),
             var(--line-2) var(--v,75%),var(--line-2) 100%);
}
.sound input.vol::-moz-range-track{
  height:3px; border-radius:2px;
  background:linear-gradient(to right,var(--s2) 0,var(--s2) var(--v,75%),
             var(--line-2) var(--v,75%),var(--line-2) 100%);
}
.sound input.vol::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:9px; height:14px; margin-top:-5.5px; border:0; border-radius:1px;
  background:var(--fg); box-shadow:0 0 0 2px var(--bg);
}
.sound input.vol::-moz-range-thumb{
  width:9px; height:14px; border:0; border-radius:1px;
  background:var(--fg); box-shadow:0 0 0 2px var(--bg);
}
.sound input.vol:focus-visible{ outline:2px solid var(--s2); outline-offset:4px; }
.sound[data-on="false"] input.vol{ opacity:.4; }
/* mentre el navegador reté el so, l'indicador batega */
.sound[data-waiting="true"] .dot{ animation:jb-wait 1.15s ease-in-out infinite; }
@keyframes jb-wait{ 0%,100%{opacity:.25} 50%{opacity:1} }

/* ----------------------------------------------------------- bestiari ---
   La fitxa de cada forma de la criatura. A partir de 1000 px el text
   d'introducció es queda enganxat a l'esquerra i les set fitxes passen a
   la dreta, que és on el Joan les volia.                                 */
#la-criatura{ scroll-margin-top:130px; }
.bestiari{ display:grid; gap:clamp(1.6rem,3vw,2.8rem); }
@media (min-width:1000px){
  .bestiari{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); }
  .bestiari-intro{ position:sticky; top:110px; align-self:start; }
}
.bestiari-intro h3{ margin-top:0; }
/* la fitxa de catàleg: el web és una obra, i té número */
.bestiari-intro .obra{
  margin:.1rem 0 .9rem; font-family:var(--mono); font-size:.6rem;
  letter-spacing:.18em; text-transform:uppercase;
}
.bestiari-intro .obra a{ color:var(--s2); text-decoration:none; opacity:.85; }
.bestiari-intro .obra a:hover{ opacity:1; text-decoration:underline; }
.bestiari-intro .note{
  font-family:var(--mono); font-size:.72rem; line-height:1.7;
  color:var(--s2); border-left:1px solid var(--line-2); padding-left:.9rem;
}

.beasts{ list-style:none; margin:0; padding:0;
  display:grid; gap:1px; background:var(--line-2);
  border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2); }
.beast{
  background:var(--bg); display:grid; grid-template-columns:72px minmax(0,1fr);
  gap:clamp(.9rem,2vw,1.4rem); align-items:start;
  padding:clamp(.9rem,2vw,1.3rem) 0;
}
@media (min-width:600px){ .beast{ grid-template-columns:104px minmax(0,1fr); } }
.beast canvas{
  width:72px; height:72px; display:block; border-radius:2px;
  background:color-mix(in srgb,#03040a 70%,transparent);
}
@media (min-width:600px){ .beast canvas{ width:104px; height:104px; } }
.beast h4{
  font-family:var(--mono); font-size:.74rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--fg); margin:.15rem 0 0; font-weight:400;
}
.beast .where{
  display:block; font-family:var(--mono); font-size:.58rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--s2); margin:.35rem 0 .55rem;
}
/* La fitxa té dues lectures, i en aquest ordre: primer què hi fa la
   criatura, en prosa, i només si el lector ho demana, el so en termes de
   Schaeffer. Escoltar l'objecte abans d'anomenar-lo.
   Compte amb el nom: .sound ja és el rectangle del botó de so de la
   capçalera (display:flex amb vora). Si aquest paràgraf es digués .sound,
   cada negreta es convertiria en una columna. Per això es diu .morpho.  */
.morpho-box{ margin-top:.7rem; }
.morpho-box summary{
  list-style:none; cursor:pointer; display:inline-flex; gap:.5rem; align-items:center;
  font-family:var(--mono); font-size:.58rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--fg-3); transition:color .2s;
}
.morpho-box summary::-webkit-details-marker{ display:none; }
.morpho-box summary::before{ content:"+"; color:var(--s2); }
.morpho-box[open] summary::before{ content:"−"; }
.morpho-box summary:hover{ color:var(--fg-2); }
.beast .morpho{
  font-family:var(--mono); font-size:.68rem; line-height:1.85;
  color:var(--fg-3); margin:.65rem 0 .2rem; padding-left:.75rem;
  border-left:1px solid var(--line-2);
}
.beast .morpho b{ color:var(--s2); font-weight:400; }
.beast p{ margin:0; color:var(--fg-2); font-size:.88rem; line-height:1.65; }

/* La capçalera s'ha quedat justa des que hi ha el fader: que ni la marca
   ni l'etiqueta del so parteixin mai en dues línies, i que el fader
   s'estrenyi abans que res altre.                                       */
.brand b{ white-space:nowrap; }
.sound .lbl{ white-space:nowrap; }
.sound{ flex:none; }
@media (max-width:1500px){ .sound input.vol{ width:62px; } }
@media (max-width:1180px){ .sound input.vol{ width:52px; } }
@media (max-width:1340px){ .sound canvas{ width:96px; } }

/* la línia del canal lateral que diu el to real d'aquesta entrada */
.rail .tone{ display:flex; gap:.5rem; align-items:baseline; }
.rail .tone i{ font-style:normal; }
.rail .tone b{ color:var(--s2); font-weight:400; margin-left:auto; }

/* -------------------------------------------------------------- ulls ---
   El botó de la càmera viu dins de «La criatura», no a la capçalera: el
   permís s'ha de demanar allà on s'explica què en farem, no de cop.     */
.eyes-ask{ margin-top:1.6rem; border-top:1px solid var(--line-2); padding-top:1.2rem; }
.eyes-ask button{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--bg); background:var(--s2);
  border:0; border-radius:2px; padding:.6rem 1.1rem; cursor:pointer;
  transition:filter .2s;
}
.eyes-ask button:hover{ filter:brightness(1.12); }
.eyes-ask button[aria-pressed="true"]{ background:none; color:var(--s2); box-shadow:inset 0 0 0 1px var(--s2); }
.eyes-ask button:disabled{ opacity:.4; cursor:not-allowed; }
.eyes-ask p{ margin:.9rem 0 0; color:var(--fg-2); font-size:.85rem; line-height:1.6; }
.eyes-ask .fine{ font-size:.72rem; color:var(--fg-3); line-height:1.65; }
.eyes-ask .err{ color:var(--s1); }
.rail .eyes{ color:var(--s3); }

/* ========================================================================
   ELS ULLS — la criatura és el botó
   No hi ha cap pestanya ni cap botó permanent: si punxes la criatura,
   s'obre aquesta finestra al seu costat. A cada pàgina, de nou.
   ====================================================================== */
body.sobre-criatura{ cursor:pointer; }

.ullspop{
  position:fixed; z-index:80; width:min(21rem,calc(100vw - 2rem));
  background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:blur(20px) saturate(140%);
  border:1px solid var(--line); padding:1rem 1.1rem 1.1rem;
  box-shadow:0 18px 50px rgba(0,0,0,.6);
  animation:pop-obre .3s cubic-bezier(.2,.7,.3,1);
}
@keyframes pop-obre{
  from{ opacity:0; transform:scale(.94) translateY(4px); }
  to{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion:reduce){ .ullspop{ animation:none; } }
.ullspop-cap{
  margin:0 0 .6rem; font-family:var(--mono); font-size:.6rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--s3);
}
.ullspop p{ margin:0 0 .55rem; font-size:.82rem; color:var(--fg-2); line-height:1.5; }
.ullspop p.fine{ font-size:.72rem; color:var(--fg-3); }
.ullspop p.err{ color:var(--s0); }
.ullspop button[data-eyes-toggle]{
  margin-top:.5rem; width:100%; cursor:pointer;
  background:none; border:1px solid var(--s3); color:var(--s3);
  font-family:var(--mono); font-size:.66rem; letter-spacing:.16em;
  text-transform:uppercase; padding:.55rem .7rem;
  transition:background .2s,color .2s;
}
.ullspop button[data-eyes-toggle]:hover{ background:var(--s3); color:var(--bg); }
.ullspop button[data-eyes-toggle][aria-pressed="true"]{ border-color:var(--s0); color:var(--s0); }
.ullspop button[data-eyes-toggle][aria-pressed="true"]:hover{ background:var(--s0); color:#fff; }
.ullspop button[disabled]{ opacity:.4; cursor:not-allowed; }
.ullspop-x{
  position:absolute; top:.35rem; right:.45rem; background:none; border:0;
  color:var(--fg-3); cursor:pointer; font-size:1.05rem; line-height:1;
  padding:.2rem .35rem;
}
.ullspop-x:hover{ color:var(--fg); }

/* ========================================================================
   PROPERAMENT — una part de la criatura que s'obre
   Un ull tancat que batega. Es desperta sol a la portada, i a dins hi ha
   el concert imminent. Es tanca i es torna a obrir amb un clic.
   ====================================================================== */
.proper{
  margin:0 var(--pad) 0; border:1px solid var(--line);
  border-top:0; background:
    linear-gradient(180deg,color-mix(in srgb,var(--s2) 7%,var(--bg-2)),var(--bg-2));
  position:relative; overflow:hidden;
}
.proper::before{                      /* el fil d'energia de dalt */
  content:""; position:absolute; inset:0 0 auto 0; height:1px;
  background:linear-gradient(90deg,transparent,var(--s2),transparent);
  opacity:.5;
}
.proper-tab{
  display:flex; align-items:center; gap:.85rem; width:100%;
  background:none; border:0; cursor:pointer; color:var(--fg);
  padding:.55rem .85rem; text-align:left;
}
.proper-eye{ width:30px; height:30px; flex:none; display:block; }
.proper-kicker{
  font-family:var(--mono); font-size:.6rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--s2); flex:none;
}
.proper-peek{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.06em;
  color:var(--fg-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  min-width:0; flex:1;
}
.proper-tab:hover .proper-peek{ color:var(--fg); }
.proper[data-open="true"] .proper-peek{ opacity:0; transition:opacity .3s; }
.proper-x{
  flex:none; width:11px; height:11px; position:relative;
  transition:transform .35s cubic-bezier(.2,.7,.3,1);
}
.proper-x::before,.proper-x::after{
  content:""; position:absolute; background:var(--fg-3);
  left:0; right:0; top:5px; height:1px;
}
.proper-x::after{ transform:rotate(90deg); transition:transform .35s cubic-bezier(.2,.7,.3,1); }
.proper[data-open="true"] .proper-x::after{ transform:rotate(0deg); }

/* l'obertura: no és un desplegable, és una escletxa que s'eixampla */
.proper-body{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .55s cubic-bezier(.2,.7,.3,1);
}
.proper[data-open="true"] .proper-body{ grid-template-rows:1fr; }
.proper-in{
  overflow:hidden; opacity:0; transform:translateY(-.4rem);
  transition:opacity .4s .12s, transform .45s .12s cubic-bezier(.2,.7,.3,1);
}
.proper[data-open="true"] .proper-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .proper-body,.proper-in,.proper-x,.proper-x::after{ transition:none; }
}

.proper-in > *{ margin:0; padding:0 .85rem; }
.proper-in > :first-child{ padding-top:.35rem; }
.proper-in > :last-child{ padding-bottom:1.1rem; }
.proper-quan{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--s2);
}
.proper-data{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.14em;
  color:var(--fg-3); margin-top:.15rem !important;
}
.proper-titol{
  color:var(--fg);
  font-family:var(--disp); font-weight:700; letter-spacing:-.02em;
  font-size:clamp(1.25rem,3.2vw,2.1rem); line-height:1.1;
  margin:.35rem 0 .3rem !important; text-transform:uppercase;
}
.proper-desc{ color:var(--fg-2); font-size:.92rem; max-width:62ch; }
.proper-mes{
  list-style:none; margin:.9rem 0 0 !important;
  border-top:1px solid var(--line-2); padding-top:.5rem;
}
.proper-mes li{
  display:flex; gap:.7rem; align-items:baseline; flex-wrap:wrap;
  padding:.3rem 0; font-size:.82rem; color:var(--fg-2);
  border-bottom:1px solid var(--line-2);
}
.proper-mes li:last-child{ border-bottom:0; }
.proper-mes b{ font-family:var(--mono); font-size:.72rem; color:var(--s2); flex:none; }
.proper-mes i{ font-style:normal; color:var(--fg-3); font-size:.76rem; }
.proper-tot{ margin-top:.9rem !important; }
.proper-tot a{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--s2); text-decoration:none;
  border-bottom:1px solid currentColor; padding-bottom:.1rem;
}
.proper-tot a:hover{ color:var(--fg); }

/* a la portada s'obre gran; a la resta, una escletxa discreta */
.proper[data-proper-big]{ margin-bottom:0; }
.proper:not([data-proper-big]) .proper-titol{ font-size:clamp(1.05rem,2.4vw,1.5rem); }
@media (max-width:620px){
  .proper-kicker{ display:none; }
  .proper-tab{ gap:.6rem; padding:.5rem .7rem; }
}

/* ---------------------------------------------------------------- repertori
   Música d'altri que toca. No és el catàleg: per això no s'hi assembla. */
.programes,
.repertori{ list-style:none; margin:1.4rem 0 0; padding:0; }
.programes li,
.repertori li{
  display:flex; gap:1.2rem; align-items:baseline; flex-wrap:wrap;
  padding:.7rem 0; border-bottom:1px solid var(--line-2);
}
.programes li:first-child,
.repertori li:first-child{ border-top:1px solid var(--line-2); }
.repertori b{
  flex:0 0 clamp(9rem,17vw,13rem);
  font-family:var(--disp); font-weight:700; letter-spacing:-.01em;
  font-size:1rem; color:var(--fg);
}
.repertori span{ color:var(--fg-2); font-size:.92rem; }
@media (max-width:560px){ .repertori b{ flex-basis:100%; } .repertori li{ gap:.2rem; } }

/* ---------------------------------------------------------- banc de fotos
   Les fotos no estan quietes: van en fila i llisquen segons on tens el
   ratolí a sobre. Sense fletxes ni punts — el mateix gest que mou la
   criatura mou les imatges. */
.banc{
  position:relative; overflow:hidden; margin:0 calc(var(--pad) * -1);
  padding:0; cursor:ew-resize; outline:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
.banc:focus-visible{ outline:1px solid var(--s2); outline-offset:-1px; }
.banc-fila{
  display:flex; gap:.6rem; will-change:transform;
  padding:0 var(--pad);
}
.banc-fila figure{
  margin:0; flex:0 0 auto; width:clamp(15rem,31vw,25rem);
  border:1px solid var(--line-2); background:var(--bg-2);
}
.banc-fila img{
  width:100%; height:clamp(11rem,21vw,17rem); object-fit:cover;
  filter:grayscale(1) contrast(1.08); transition:filter .35s;
}
.banc-fila figure:hover img{ filter:none; }
.banc-pista{
  position:absolute; right:calc(var(--pad) + .2rem); bottom:.5rem;
  font-family:var(--mono); font-size:.58rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--fg-3);
  background:color-mix(in srgb,var(--bg) 75%,transparent);
  padding:.25rem .5rem; pointer-events:none; transition:opacity .4s;
}
.banc[data-mogut="true"] .banc-pista{ opacity:0; }
@media (prefers-reduced-motion:reduce){
  .banc{ overflow-x:auto; cursor:default; }
  .banc-fila{ transform:none !important; }
}

/* els programes de concert: el número és seu, tal com els té numerats */
.programes b{
  flex:0 0 2.6rem; font-family:var(--mono); font-size:.8rem;
  color:var(--s2); letter-spacing:.06em;
}
.programes span{ color:var(--fg); font-size:1rem; }
.programes li:last-child{ border-bottom:0; }

/* el peu de cada foto del banc: només quan hi passes per sobre */
.banc-fila figure{ position:relative; }
.banc-fila figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:.85rem .7rem .5rem;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.09em;
  color:var(--fg); text-transform:uppercase; line-height:1.35;
  background:linear-gradient(transparent,rgba(3,4,7,.88));
  opacity:0; transform:translateY(.3rem); transition:opacity .3s, transform .3s;
  pointer-events:none;
}
.banc-fila figure:hover figcaption{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .banc-fila figcaption{ transition:none; } }

/* cada programa: número, títol i el que hi sona */
.programes li{ align-items:flex-start; }
.programes li > div{ flex:1; min-width:0; }
.programes li > div > span{ display:block; color:var(--fg); font-size:1.05rem;
  font-family:var(--disp); font-weight:700; letter-spacing:-.01em; }
.programes li > div > p{ margin:.25rem 0 0; color:var(--fg-2); font-size:.87rem;
  line-height:1.55; max-width:68ch; }

/* un sol reproductor: la llista sencera, i que es vegi gran */
.videos.un{ grid-template-columns:1fr; max-width:60rem; }