/* Pagina di una singola release (generata da scripts/release-pagine-build.js).
   NON ridefinisce colori: eredita --accent/--panel/--line/--page-max da label.css, quindi ogni
   scheda prende automaticamente l'identita cromatica del suo sello tramite .theme-<slug> sul body.
   Layout: copertina quadrata a sinistra, dati e testo a destra; sotto i 900px diventa una colonna
   sola con la copertina sopra, che e' come si guarda un disco dal telefono. */

.rel-main{
  max-width:var(--page-max);
  margin:0 auto;
  padding:clamp(28px,6vw,72px) var(--page-pad) clamp(48px,8vw,96px);
}

.rel-card{
  display:grid;
  grid-template-columns:minmax(260px,420px) 1fr;
  gap:clamp(24px,4vw,56px);
  align-items:start;
}

.rel-cover img{
  width:100%;
  height:auto;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:var(--panel);
}

.rel-kicker{
  margin:0 0 10px;
  font-size:.78rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--accent);
}

.rel-title{
  margin:0 0 22px;
  font-size:clamp(1.9rem,4.4vw,3.1rem);
  line-height:1.06;
  font-weight:800;
  color:var(--white);
}
.rel-title .rel-artist{ color:var(--accent); }

/* I dati della release: etichetta, catalogo, data. Coppie termine/valore su righe pulite,
   perche' e' la parte che si legge a colpo d'occhio prima del testo. */
.rel-meta{ margin:0 0 26px; padding:0; border-top:1px solid var(--line); }
.rel-meta > div{
  display:flex;
  gap:16px;
  padding:11px 0;
  border-bottom:1px solid var(--line);
}
.rel-meta dt{ min-width:132px; color:var(--grey); font-size:.9rem; }
.rel-meta dd{ margin:0; color:var(--white); font-size:.95rem; }
.rel-meta dd a{ color:var(--accent); text-decoration:none; }
.rel-meta dd a:hover{ text-decoration:underline; }

.rel-desc{
  margin:0 0 28px;
  color:var(--white);
  opacity:.92;
  font-size:1.02rem;
  line-height:1.66;
  max-width:64ch;
}

.rel-links{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.rel-links-t{
  width:100%;
  margin:0 0 4px;
  font-size:.78rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--grey);
}

/* Le altre release: sono i collegamenti interni che tengono insieme il catalogo — per chi legge
   e per chi indicizza. Restano discrete, non devono competere con il disco della pagina. */
.rel-more{ margin-top:clamp(40px,7vw,84px); }
.rel-more h2{
  margin:0 0 16px;
  font-size:1.02rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--grey);
  font-weight:600;
}
.rel-list{ list-style:none; margin:0; padding:0; display:grid; gap:2px; }
.rel-list li{ border-bottom:1px solid var(--line); }
.rel-list a{
  display:block;
  padding:13px 4px;
  color:var(--white);
  text-decoration:none;
  font-size:.98rem;
  transition:color .16s ease, padding-left .16s ease;
}
.rel-list a:hover{ color:var(--accent); padding-left:10px; }

.rel-back{ margin:22px 0 0; }
.rel-back a{ color:var(--accent); text-decoration:none; font-size:.95rem; }
.rel-back a:hover{ text-decoration:underline; }

@media (max-width:900px){
  .rel-card{ grid-template-columns:1fr; }
  .rel-cover{ max-width:420px; }
  .rel-meta dt{ min-width:110px; }
}