/* ==========================================================================
   FDCA — Festival della Canzone Artificiale
   Design system "Lo Spartito della Macchina"
   Tesi: il sito è la partitura che la macchina sta eseguendo.
   Vocabolario: forme d'onda, battute, tracce, pentagramma, playhead.
   Zero framework. CSS moderno, JS < 30KB, fallback sempre leggibili.
   ========================================================================== */

/* ---------- Design token ---------- */
:root {
  --bg:          #060607;
  --bg-raise:    #0c0c0e;
  --fg:          #f4f2ef;
  --fg-dim:      color-mix(in oklab, var(--fg) 62%, transparent);
  --fg-faint:    color-mix(in oklab, var(--fg) 36%, transparent);
  --accent:      #FF2A5F;
  --accent-hot:  #ff5c84;
  --accent-veil: color-mix(in oklab, var(--accent) 9%, transparent);
  --border:      color-mix(in oklab, var(--fg) 10%, transparent);
  --border-hot:  color-mix(in oklab, var(--accent) 45%, transparent);
  --card:        color-mix(in oklab, var(--fg) 3%, transparent);
  --card-hover:  color-mix(in oklab, var(--fg) 6%, transparent);
  --staff-line:  color-mix(in oklab, var(--fg) 9%, transparent);

  --font-display: 'Syne', 'Arial Black', sans-serif;
  --font-body:    'Manrope', 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'Consolas', monospace;

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;
  --space-7: 9rem;

  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-snap: cubic-bezier(0.22, 1, 0.36, 1);

  --gutter: clamp(1.25rem, 5vw, 5rem);
  --header-h: 4.5rem;
  --max-w: 88rem;
  --label-col: 11rem;

  color-scheme: dark;
}

/* ---------- Reset essenziale ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  min-height: 100vh;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4 { line-height: 1.05; text-wrap: balance; }
p { text-wrap: pretty; }

::selection { background: var(--accent); color: #fff; }
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #2a2a2e; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- Transizioni di pagina native (MPA) ---------- */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: vt-out 0.2s var(--ease-out) both; }
  ::view-transition-new(root) { animation: vt-in 0.32s var(--ease-out) both; }
}
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in  { from { opacity: 0; translate: 0 0.6rem; } }

/* ---------- Atmosfera ---------- */
.grain {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 80;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: no-preference) {
  .grain { animation: grain-shift 0.6s steps(2) infinite; }
}
@keyframes grain-shift {
  0% { transform: translate(0, 0); }
  50% { transform: translate(-1.5%, 1%); }
  100% { transform: translate(1%, -1.5%); }
}

.glow-field {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 50% 40% at 85% 10%, color-mix(in oklab, var(--accent) 13%, transparent), transparent 70%),
    radial-gradient(ellipse 38% 30% at 5% 95%, color-mix(in oklab, var(--accent) 6%, transparent), transparent 70%);
}

/* ---------- Motivi musicali ---------- */

/* Pentagramma: 5 linee orizzontali */
.staff {
  position: relative;
}
.staff::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    var(--staff-line) 0 1px,
    transparent 1px calc((100% - 1px) / 4)
  );
}

/* Righello temporale: tacche da timeline */
.ruler {
  height: 16px;
  background:
    repeating-linear-gradient(90deg, var(--border) 0 1px, transparent 1px 10px) bottom / 100% 7px no-repeat,
    repeating-linear-gradient(90deg, color-mix(in oklab, var(--fg) 20%, transparent) 0 1px, transparent 1px 100px) bottom / 100% 16px no-repeat;
  position: relative;
}
.ruler .playhead {
  position: absolute; top: -4px; bottom: 0;
  left: var(--at, 18%);
  width: 2px;
  background: var(--accent);
}
.ruler .playhead::before {
  content: "";
  position: absolute; top: -5px; left: -4px;
  border: 5px solid transparent;
  border-top-color: var(--accent);
}

/* Forma d'onda: barre verticali animate (CSS-only, statiche senza motion) */
.wave {
  display: flex;
  align-items: center;
  gap: 3px;
  height: var(--wave-h, 4.5rem);
  /* Le barrette hanno una larghezza minima: 96 di loro nel piede di pagina
     chiedono 477px e sotto i 500 trascinavano di lato l'intera pagina, su ogni
     schermo di telefono e su ogni pagina del sito. L'onda e' decorazione
     (aria-hidden): tagliarne il fondo non toglie niente a nessuno. */
  overflow: hidden;
}
.wave i {
  flex: 1;
  min-width: 2px;
  height: calc(var(--h, 40) * 1%);
  background: var(--wave-color, color-mix(in oklab, var(--fg) 30%, transparent));
  border-radius: 1px;
}
.wave i:nth-child(7n)  { background: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  .wave.live i {
    animation: wave-pulse var(--t, 1.6s) ease-in-out infinite alternate;
    animation-delay: var(--d, 0s);
  }
}
@keyframes wave-pulse {
  from { transform: scaleY(0.35); }
  to   { transform: scaleY(1); }
}

/* Battuta: etichetta di sezione in stile spartito */
.measure-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--fg-faint);
  display: flex;
  align-items: center;
  gap: 1rem;
}
.measure-label b { color: var(--accent); font-weight: 500; }
.measure-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* Riga-prompt: il prompt come verso, cursore lampeggiante */
.prompt-line {
  font-family: var(--font-mono);
  font-size: clamp(0.82rem, 1.5vw, 1rem);
  letter-spacing: 0.05em;
  color: var(--fg-dim);
}
.prompt-line .cmd { color: var(--accent); }
.prompt-line b { color: var(--fg); font-weight: 500; }
.prompt-line::after {
  content: "";
  display: inline-block;
  width: 0.55em; height: 1.05em;
  background: var(--accent);
  vertical-align: text-bottom;
  margin-left: 0.35em;
}
@media (prefers-reduced-motion: no-preference) {
  .prompt-line::after { animation: caret 1.1s steps(1) infinite; }
}
@keyframes caret { 50% { opacity: 0; } }

/* ---------- Utility tipografiche ---------- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
}
.display {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.03em;
}
.text-outline {
  color: transparent;
  -webkit-text-stroke: 1.5px color-mix(in oklab, var(--fg) 32%, transparent);
}
.mono-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

/* ---------- Layout ---------- */
.wrap { max-width: var(--max-w); margin-inline: auto; padding-inline: var(--gutter); }
main { min-height: 100vh; padding-top: var(--header-h); }
.section { padding-block: var(--space-6); }

/* Traccia: riga con canale etichetta a sinistra (come in un DAW) */
.track {
  display: grid;
  gap: var(--space-3) var(--space-5);
  padding-block: var(--space-5);
  border-top: 1px solid var(--border);
}
@media (min-width: 900px) { .track { grid-template-columns: var(--label-col) 1fr; } }
.track > .ch {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--fg-faint);
  line-height: 2;
}
.track > .ch b { display: block; color: var(--accent); font-weight: 500; }

/* ---------- Reveal on scroll (IO in main.js; senza JS tutto visibile) ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.js .rise {
    opacity: 0;
    translate: 0 2.2rem;
    transition: opacity 0.7s var(--ease-out), translate 0.7s var(--ease-out);
  }
  html.js .rise.in { opacity: 1; translate: 0 0; }
}

/* ---------- Header / Navigazione ibrida ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 60;
  height: var(--header-h);
  background: color-mix(in oklab, var(--bg) 78%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid color-mix(in oklab, var(--fg) 6%, transparent);
}
.site-header .bar {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
  height: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
}
/* Il marchio non e' piu' testo ma il logo ufficiale: FDCA sul pentagramma.
   Altezza fissa in rem cosi' segue il corpo del testo, larghezza automatica. */
.brand {
  display: flex;
  align-items: center;
  text-decoration: none;
}
.brand img {
  height: 1.65rem;
  width: auto;
  transition: opacity 0.3s var(--ease-out);
}
.brand:hover img { opacity: 0.7; }

/* Nav inline su desktop */
.top-nav { display: none; }
@media (min-width: 1024px) {
  .top-nav { display: flex; gap: clamp(1rem, 2vw, 2rem); }
  .top-nav a {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--fg-dim);
    text-decoration: none;
    padding-block: 0.4rem;
    border-bottom: 1px solid transparent;
    transition: color 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
  }
  .top-nav a:hover { color: var(--fg); }
  .top-nav a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); }
}

.header-cta { display: flex; align-items: center; gap: var(--space-2); }
.pill {
  display: inline-block;
  padding: 0.5rem 1.2rem;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.3s var(--ease-out), color 0.3s var(--ease-out);
}
.pill--ghost { border: 1px solid var(--accent); color: var(--accent); }
.pill--ghost:hover { background: var(--accent); color: #fff; }
.pill--solid { background: var(--accent); color: #fff; }
.pill--solid:hover { background: var(--fg); color: var(--bg); }
@media (max-width: 767px) { .header-cta .pill { display: none; } }

/* Hamburger: solo sotto i 1024px */
.menu-toggle {
  width: 2.8rem; height: 2.8rem;
  display: grid; place-items: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in oklab, var(--bg) 55%, transparent);
  transition: border-color 0.3s var(--ease-out);
  position: relative;
  z-index: 75;
}
@media (min-width: 1024px) { .menu-toggle { display: none; } }
.menu-toggle:hover { border-color: color-mix(in oklab, var(--fg) 32%, transparent); }
.menu-toggle .lines { position: relative; width: 1.05rem; height: 0.7rem; }
.menu-toggle .lines::before,
.menu-toggle .lines::after {
  content: "";
  position: absolute; left: 0; right: 0;
  height: 2px; background: var(--fg);
  transition: transform 0.35s var(--ease-snap), top 0.35s var(--ease-snap), bottom 0.35s var(--ease-snap);
}
.menu-toggle .lines::before { top: 0; }
.menu-toggle .lines::after { bottom: 0; }
body.menu-open .menu-toggle .lines::before { top: 0.3rem; transform: rotate(45deg); }
body.menu-open .menu-toggle .lines::after { bottom: 0.26rem; transform: rotate(-45deg); }

/* Overlay mobile */
.menu-overlay {
  position: fixed; inset: 0;
  z-index: 70;
  background: var(--bg);
  display: flex; flex-direction: column;
  padding: calc(var(--header-h) + var(--space-4)) var(--gutter) var(--space-3);
  overflow-y: auto;
  visibility: hidden;
  opacity: 0;
  clip-path: circle(0% at calc(100% - 4rem) 2.5rem);
  transition:
    clip-path 0.7s var(--ease-snap),
    opacity 0.45s var(--ease-out),
    visibility 0s linear 0.7s;
}
body.menu-open .menu-overlay {
  visibility: visible;
  opacity: 1;
  clip-path: circle(160% at calc(100% - 4rem) 2.5rem);
  transition: clip-path 0.7s var(--ease-snap), opacity 0.3s var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  .menu-overlay, body.menu-open .menu-overlay { clip-path: none; transition: opacity 0.2s linear, visibility 0s linear 0.2s; }
  body.menu-open .menu-overlay { transition: opacity 0.2s linear; }
}
@media (min-width: 1024px) { .menu-overlay { display: none; } }
body.menu-open { overflow: hidden; }

.menu-overlay .glow { position: fixed; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 45%, var(--accent-veil), transparent 65%); }

.menu-nav { display: flex; flex-direction: column; gap: clamp(0.6rem, 2vh, 1.2rem); margin-block: auto; position: relative; }
.menu-nav a.menu-link {
  display: flex; align-items: baseline; gap: 1.1rem;
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  /* Il corpo guarda l'altezza dello schermo ma deve guardare anche la larghezza:
     con la sola `5.5vh` su un telefono alto le voci crescevano fino a chiedere
     il doppio della colonna, e «si mangiavano» il bordo destro. Il tetto in
     `vw` è tarato sulla voce più larga che il menù può contenere: a 320 px
     restano una decina di pixel di margine sotto «CONTATTACI». Il minimo sta
     basso apposta — se lo si alza, su uno schermo molto basso torna a sfondare. */
  font-size: clamp(1.15rem, min(5.5vh, 6.5vw), 3.4rem);
  /* Rete di sicurezza: se un domani una voce si allunga, va a capo dentro la
     parola invece di uscire dallo schermo. */
  overflow-wrap: break-word;
  text-decoration: none;
  color: transparent;
  -webkit-text-stroke: 1.5px color-mix(in oklab, var(--fg) 34%, transparent);
  transition: color 0.3s var(--ease-out), -webkit-text-stroke-color 0.3s var(--ease-out);
  opacity: 0;
  translate: 0 2rem;
}
body.menu-open .menu-nav a.menu-link {
  opacity: 1; translate: 0 0;
  transition:
    opacity 0.5s var(--ease-out) var(--d, 0.1s),
    translate 0.5s var(--ease-out) var(--d, 0.1s),
    color 0.3s var(--ease-out),
    -webkit-text-stroke-color 0.3s var(--ease-out);
}
.menu-nav a.menu-link:hover { color: var(--fg); -webkit-text-stroke-color: transparent; }
.menu-nav a.menu-link[aria-current="page"] { color: var(--accent); -webkit-text-stroke-color: transparent; }
.menu-nav a.menu-link .n {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  color: var(--fg-faint);
  -webkit-text-stroke: 0;
  min-width: 2rem;
}
@media (prefers-reduced-motion: reduce) {
  .menu-nav a.menu-link, body.menu-open .menu-nav a.menu-link { opacity: 1; translate: 0; transition: none; }
}
.menu-sub { padding-left: 3.1rem; display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; }
.menu-sub a {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-dim);
  text-decoration: none;
}
.menu-sub a:hover { color: var(--accent); }
.menu-foot {
  border-top: 1px solid var(--border);
  padding-top: var(--space-3);
  margin-top: var(--space-4);
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--space-3);
}
.menu-foot .org b { font-family: var(--font-display); font-size: 1.1rem; text-transform: uppercase; }
/* Quattro profili in fila non stanno in 275px: senza andare a capo uscivano
   dallo schermo e facevano scorrere il menu' di lato. */
.menu-foot .social { display: flex; flex-wrap: wrap; gap: 0.6rem var(--space-3); }
.menu-foot .social a {
  font-size: 0.76rem; letter-spacing: 0.16em; text-transform: uppercase;
  text-decoration: none; color: var(--fg-dim);
}
.menu-foot .social a:hover { color: var(--accent); }

/* ---------- Hero "copertina di partitura" ---------- */
.hero {
  position: relative;
  min-height: calc(96vh - var(--header-h));
  display: flex; flex-direction: column;
  overflow: hidden;
}
.hero .wrap { position: relative; z-index: 2; width: 100%; }
.hero-top {
  padding-top: clamp(2rem, 6vh, 4.5rem);
  display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3);
}
.hero-opus {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--fg-faint);
  text-align: right;
  line-height: 2.1;
}
.hero-opus b { color: var(--fg-dim); font-weight: 500; }

.hero-title {
  margin-top: clamp(1.5rem, 4vh, 3rem);
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: -0.035em;
}
.hero-title .w1 {
  display: block;
  font-size: clamp(1.9rem, 7.2vw, 6.4rem);
}
.hero-title .w2 {
  display: block;
  font-size: clamp(1.05rem, 3.8vw, 3.4rem);
  color: transparent;
  -webkit-text-stroke: 1.5px color-mix(in oklab, var(--fg) 34%, transparent);
  margin-block: 0.25em 0.18em;
  padding-left: clamp(0.5rem, 8vw, 7rem);
}
.hero-title .w3 {
  display: block;
  font-size: clamp(1.9rem, 7.2vw, 6.4rem);
  color: var(--accent);
}
.hero-title .line { display: block; overflow: hidden; }
.hero-title .line > span { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .hero-title .line > span {
    animation: line-reveal 0.9s var(--ease-snap) backwards;
    animation-delay: calc(0.08s + var(--i, 0) * 0.11s);
  }
}
@keyframes line-reveal { from { translate: 0 110%; } to { translate: 0 0; } }

/* L'onda che attraversa l'hero come un rigo */
.hero-wave {
  margin-top: clamp(1.5rem, 5vh, 3.5rem);
  --wave-h: clamp(3.5rem, 10vh, 6.5rem);
}
.hero-bottom {
  margin-top: auto;
  padding-block: var(--space-3) 0;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-3);
}
.hero-cta-row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.hero-ruler { margin-top: var(--space-3); }

/* ---------- Bottoni ---------- */
.btn {
  position: relative;
  display: inline-block;
  padding: 1rem 2rem;
  background: var(--fg);
  color: var(--bg);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  overflow: hidden;
  border: none;
}
.btn .label { position: relative; z-index: 1; transition: color 0.3s var(--ease-out); }
.btn::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.38s var(--ease-snap);
}
.btn:hover::before { transform: scaleX(1); }
.btn:hover .label { color: #fff; }
.btn--line { background: transparent; color: var(--fg); border: 1px solid var(--border); }
.btn--line:hover { border-color: var(--border-hot); }

/* ---------- Nastro metadati (sostituisce il marquee) ---------- */
.meta-strip {
  border-block: 1px solid var(--border);
  background: var(--bg-raise);
  padding-block: var(--space-2);
  overflow: hidden;
}
.meta-strip .row {
  display: flex; gap: var(--space-4); align-items: center;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
.meta-strip .row .v { color: var(--fg-dim); }
.meta-strip .row .hot { color: var(--accent); }
@media (max-width: 767px) { .meta-strip .row { flex-wrap: wrap; gap: var(--space-1) var(--space-3); letter-spacing: 0.18em; } }

/* ---------- Statement (tesi in grande) ---------- */
.statement {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  font-size: clamp(1.7rem, 4.2vw, 3.2rem);
  line-height: 1.08;
}
.statement .hot { color: var(--accent); }
.prose { color: var(--fg-dim); font-size: 1.08rem; line-height: 1.75; max-width: 38rem; }
.prose + .prose { margin-top: var(--space-3); }

/* ---------- Battuta "Dal 2024" ---------- */
.since-block {
  position: relative;
  padding-block: var(--space-6);
  overflow: hidden;
}
.since-block .staff-bg {
  position: absolute; inset: 15% 0;
}
.since-inner { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-4); }
.since-inner .year {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(4.5rem, 16vw, 13rem);
  line-height: 1;
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 2px color-mix(in oklab, var(--accent) 80%, transparent);
}
.since-inner .claim {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  font-size: clamp(1.3rem, 3.4vw, 2.6rem);
  line-height: 1.1;
  max-width: 20ch;
}
.since-note { margin-top: var(--space-3); }

/* ---------- Tracklist (news) ---------- */
.tracklist { border-top: 1px solid var(--border); }
.track-item {
  display: grid;
  grid-template-columns: 3rem 1fr auto;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  transition: background 0.3s var(--ease-out), padding-left 0.3s var(--ease-out);
}
@media (min-width: 768px) {
  .track-item { grid-template-columns: 3.5rem 1fr 11rem 8rem auto; }
}
a.track-item:hover { background: var(--accent-veil); padding-left: var(--space-2); }
.track-item .no {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--fg-faint);
}
.track-item h3 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  font-size: clamp(1.05rem, 2.2vw, 1.45rem);
  transition: color 0.3s var(--ease-out);
  /* Un titolo di news e' testo altrui: puo' contenere una parola lunga o un
     indirizzo. Nella colonna `1fr` di una griglia, senza queste due righe,
     spinge fuori pagina la riga intera. */
  min-width: 0;
  overflow-wrap: anywhere;
}
a.track-item:hover h3 { color: var(--accent); }
.track-item .tag {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid color-mix(in oklab, var(--accent) 35%, transparent);
  padding: 0.18rem 0.6rem;
  justify-self: start;
}
.track-item .date {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
.track-item .arrow { color: var(--fg-faint); transition: color 0.3s var(--ease-out), translate 0.3s var(--ease-out); }
a.track-item:hover .arrow { color: var(--accent); translate: 0.4rem 0; }
@media (max-width: 767px) {
  .track-item .date { grid-column: 2; }
  .track-item .arrow { display: none; }
}

/* ---------- Pagine interne: testata a battuta ---------- */
.page-head {
  padding-block: var(--space-5) var(--space-4);
  position: relative;
}
.page-head .measure-label { margin-bottom: var(--space-3); }
.page-head h1 {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  /* La pendenza è calibrata sulla parola più lunga del sito, «REGOLAMENTO»:
     undici lettere che a 7.4vw non stavano nella colonna a NESSUNA larghezza
     fra 520 e 1500px — sul telefono uscivano di pagina, sul desktop sfioravano
     il bordo. A 6.6vw ci stanno ovunque, e i titoli perdono un decimo di corpo. */
  font-size: clamp(1.4rem, 6.6vw, 5.6rem);
  /* Rete di sicurezza: nessun titolo, per lungo che sia, esce dalla pagina. */
  overflow-wrap: break-word;
  line-height: 0.95;
}
.page-head .sub { margin-top: var(--space-2); }
.page-head .ruler { margin-top: var(--space-4); }

/* ---------- Manifesto: note sul pentagramma ---------- */
.tenet {
  display: grid;
  gap: var(--space-2) var(--space-4);
  padding-block: var(--space-5);
  border-top: 1px solid var(--border);
}
@media (min-width: 900px) { .tenet { grid-template-columns: var(--label-col) 1fr; } }
.tenet .note-cell { position: relative; height: 4.5rem; }
.tenet .note-cell .staff-bg { position: absolute; inset: 0; width: min(100%, 9rem); }
.tenet .note-cell .dot {
  position: absolute;
  left: calc(1.2rem + var(--pos, 0) * 1.4rem);
  bottom: calc(var(--pos, 0) * 25% - 0.45rem);
  width: 1rem; height: 0.82rem;
  border-radius: 50%;
  rotate: -18deg;
  background: var(--accent);
}
.tenet .note-cell .dot::after {
  content: "";
  position: absolute;
  right: -1px; bottom: 40%;
  width: 2px; height: 2.4rem;
  background: color-mix(in oklab, var(--accent) 75%, transparent);
  rotate: 18deg;
  transform-origin: bottom;
}
.tenet .num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.26em;
  color: var(--fg-faint);
  margin-top: 0.6rem;
}
.tenet h2 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  font-size: clamp(1.35rem, 3vw, 1.9rem);
  margin-bottom: var(--space-2);
}
.tenet p { color: var(--fg-dim); max-width: 44rem; font-size: 1.08rem; line-height: 1.7; }

/* ---------- Filosofia: movimenti ---------- */
.movement {
  display: grid;
  gap: var(--space-2) var(--space-5);
  padding-block: var(--space-5);
  border-top: 1px solid var(--border);
}
@media (min-width: 900px) { .movement { grid-template-columns: var(--label-col) 1fr; } }
.movement .roman {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px color-mix(in oklab, var(--fg) 20%, transparent);
}
.movement .tempo {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 0.5rem;
}
.movement h2 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  font-size: clamp(1.4rem, 3.2vw, 2rem);
  margin-bottom: var(--space-2);
}
.movement p { color: color-mix(in oklab, var(--fg) 80%, transparent); font-size: 1.1rem; line-height: 1.75; max-width: 46rem; }
.movement--boxed .inner {
  border: 1px solid color-mix(in oklab, var(--accent) 30%, transparent);
  background: var(--accent-veil);
  padding: var(--space-4);
}
.movement--boxed h2 { color: var(--accent); }

/* ---------- Regolamento ---------- */
.rule-block { padding-block: var(--space-4); border-top: 1px solid var(--border); display: grid; gap: var(--space-2) var(--space-5); }
@media (min-width: 900px) { .rule-block { grid-template-columns: var(--label-col) 1fr; } }
.rule-block .ch { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--fg-faint); line-height: 2; }
.rule-block .ch b { display: block; color: var(--accent); font-weight: 500; }
.rule-block h2 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  margin-bottom: var(--space-3);
}
.rule-block ul, .rule-block ol {
  padding-left: 1.4rem;
  display: flex; flex-direction: column; gap: var(--space-2);
  color: var(--fg-dim);
  font-size: 1.06rem;
  line-height: 1.7;
  max-width: 44rem;
}
.rule-block li::marker { color: var(--accent); font-family: var(--font-mono); }
.rule-block--boxed .content {
  border: 1px solid var(--border);
  background: var(--card);
  padding: var(--space-4);
}

/* ---------- Edizioni: discografia ---------- */
.disco { border-top: 1px solid var(--border); }
.disco-item {
  display: grid;
  gap: var(--space-2) var(--space-4);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--border);
  align-items: center;
}
@media (min-width: 900px) { .disco-item { grid-template-columns: var(--label-col) 1fr 16rem; } }
.disco-item .cat {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  color: var(--accent);
}
.disco-item .cat small { display: block; color: var(--fg-faint); letter-spacing: 0.22em; text-transform: uppercase; font-size: 0.62rem; margin-top: 0.4rem; }
.disco-item h2 {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  font-size: clamp(1.5rem, 3.6vw, 2.4rem);
}
.disco-item p { color: var(--fg-dim); margin-top: var(--space-1); max-width: 40rem; line-height: 1.7; }
.disco-item .wave { --wave-h: 3rem; --wave-color: color-mix(in oklab, var(--fg) 18%, transparent); }
.disco-empty {
  padding-block: var(--space-6);
  text-align: center;
}
.disco-empty p {
  font-family: var(--font-display);
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--fg-faint);
  line-height: 2.1;
}

/* ---------- Canali (contatti) ---------- */
.channel {
  display: grid;
  gap: var(--space-2) var(--space-4);
  padding-block: var(--space-4);
  border-top: 1px solid var(--border);
}
@media (min-width: 700px) { .channel { grid-template-columns: 8rem 1fr; } }
.channel .ch-id {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-faint);
  line-height: 2;
}
.channel .ch-id b { display: block; color: var(--accent); font-weight: 500; }
.channel h2 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  font-size: 1.35rem;
  margin-bottom: var(--space-1);
}
.channel p { color: var(--fg-dim); }
.channel .mail {
  display: inline-block;
  margin-top: var(--space-1);
  font-family: var(--font-mono);
  font-size: 0.92rem;
  color: var(--accent);
  text-decoration: none;
}
.channel .mail:hover { color: var(--fg); }

.contact-cols { display: grid; gap: var(--space-5); }
@media (min-width: 1000px) { .contact-cols { grid-template-columns: 1.1fr 1fr; } }
.panel { border: 1px solid var(--border); background: var(--card); padding: var(--space-4); }
.panel > h2 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  font-size: 1.35rem;
  margin-bottom: var(--space-4);
}

/* ---------- Form ---------- */
.field { display: flex; flex-direction: column; gap: 0.5rem; }
.field label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
.field input, .field textarea {
  background: transparent;
  border: none;
  border-bottom: 1px solid color-mix(in oklab, var(--fg) 18%, transparent);
  padding-block: 0.6rem;
  transition: border-color 0.3s var(--ease-out);
  resize: none;
}
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--accent); }
.form-stack { display: flex; flex-direction: column; gap: var(--space-3); }

/* Spiegazioni accanto ai campi. Il Regolamento 2026 chiede due cose che hanno
   bisogno di essere spiegate mentre si compila, non in un'altra pagina: una riga
   sempre visibile sotto l'etichetta, e il resto dentro un blocco che si apre.
   Niente tooltip al passaggio del mouse: sul telefono non esiste, e chi ingrandisce
   la pagina lo perde. */
.field-hint { font-size: 0.85rem; line-height: 1.6; color: var(--fg-dim); margin: -0.15rem 0 0; }
.field-help { margin: 0; font-size: 0.9rem; }
.field-help > summary {
  cursor: pointer;
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  list-style: none;
}
.field-help > summary::-webkit-details-marker { display: none; }
.field-help > summary::before { content: '+ '; }
.field-help[open] > summary::before { content: '\2212  '; }
.field-help > summary:focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; }
.field-help .help-body {
  line-height: 1.7;
  color: var(--fg-dim);
  border-left: 2px solid var(--accent);
  padding: 0.2rem 0 0.2rem 0.9rem;
  margin-top: 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.field-help .help-body ul { padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.35rem; }
.field-help .help-body li::marker { color: var(--accent); }
.field-help .help-body b { color: var(--fg); }

.inline-form { display: flex; width: 100%; }
/* La casella parte da larghezza zero e cresce con lo spazio che avanza.
   Lasciata a `width: auto`, chiede la sua misura naturale da venti caratteri
   (~210px) anche quando il browser calcola la larghezza minima del contenuto:
   con il pulsante accanto la riga pretendeva 331px dove ce n'erano 280, e a
   320px la pagina si allargava di 31px. Il colpevole sembrava l'intestazione
   solo perche' gli elementi fissi si stirano fino al bordo dello scorrimento;
   la riga che sfondava era questa, in fondo alla pagina. */
.inline-form input {
  flex: 1 1 0px;
  width: 0;
  min-width: 0;
  background: color-mix(in oklab, var(--bg) 55%, transparent);
  border: 1px solid color-mix(in oklab, var(--fg) 18%, transparent);
  border-right: none;
  padding: 0.85rem 1.1rem;
  font-size: 0.92rem;
}
.inline-form input:focus { outline: none; border-color: var(--accent); }
.inline-form button {
  background: var(--fg); color: var(--bg);
  font-weight: 700; font-size: 0.72rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  padding: 0.85rem 1.6rem;
  transition: background 0.3s var(--ease-out), color 0.3s var(--ease-out);
}
.inline-form button:hover { background: var(--accent); color: #fff; }
.form-note { font-size: 0.85rem; margin-top: var(--space-2); min-height: 1.3em; }
.form-note.ok { color: #4ade80; }
.form-note.err { color: var(--accent-hot); }
/* Scheda inviata: il messaggio prende il posto del modulo, quindi deve pesare. */
.form-note.big {
  font-size: 1.15rem; line-height: 1.7; text-align: center;
  border-top: 1px solid var(--border); padding: var(--space-5) var(--space-2) 0;
  max-width: 34rem; margin-inline: auto;
}

/* ---------- Coda newsletter (banda finale) ---------- */
.coda {
  border-top: 1px solid var(--border);
  background: var(--accent-veil);
  padding-block: var(--space-5);
}
.coda .inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); }
.coda h2 {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  font-size: clamp(1.5rem, 3.4vw, 2.2rem);
}
.coda p { color: var(--fg-dim); font-size: 0.95rem; max-width: 34rem; margin-top: var(--space-1); }
.coda .form-holder { flex: 1; min-width: min(100%, 20rem); max-width: 28rem; }

/* ---------- Articolo ---------- */
.article-body {
  max-width: 46rem;
  font-size: 1.12rem;
  line-height: 1.8;
  color: color-mix(in oklab, var(--fg) 84%, transparent);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.article-body h2 { font-family: var(--font-display); text-transform: uppercase; font-size: 1.5rem; margin-top: var(--space-3); }
.article-body a { color: var(--accent); }
.article-body img { border: 1px solid var(--border); }
.article-cover { border: 1px solid var(--border); margin-bottom: var(--space-4); width: 100%; object-fit: cover; max-height: 28rem; }
.back-link {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-faint);
  text-decoration: none;
}
.back-link:hover { color: var(--accent); }

/* ---------- Footer "sfumato in coda" ---------- */
.site-footer {
  border-top: 1px solid var(--border);
  margin-top: var(--space-6);
}
.site-footer .fade-wave { --wave-h: 2.4rem; --wave-color: color-mix(in oklab, var(--fg) 12%, transparent); padding-inline: var(--gutter); margin-top: var(--space-4); }
.site-footer .cols {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-3);
  padding-block: var(--space-4);
}
.site-footer .logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--fg-faint);
}
.site-footer .logo img { height: 1.3rem; width: auto; }
.site-footer .logo .c { color: var(--accent); }
.site-footer .byline {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
.site-footer .links { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.site-footer .links a {
  font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg-dim); text-decoration: none;
}
.site-footer .links a:hover { color: var(--accent); }

/* ---------- 404 ---------- */
.error-hero { min-height: 60vh; display: grid; place-items: center; text-align: center; }
.error-hero .code {
  font-family: var(--font-display);
  font-weight: 800;
  /* Il minimo del clamp deve stare nella colonna piu' stretta che il sito
     ammette: a 6rem le tre cifre chiedevano 312px dove ce n'erano 280, e la
     pagina di errore sfondava di 12px. */
  font-size: clamp(4.5rem, 22vw, 14rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px color-mix(in oklab, var(--accent) 60%, transparent);
}
.error-hero p { color: var(--fg-dim); margin-block: var(--space-3) var(--space-4); }

/* ---------- Stampa ---------- */
@media print {
  .site-header, .menu-overlay, .grain, .meta-strip, .wave { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ---------- Banner staff (manutenzione attiva, utente loggato) ---------- */
.staff-banner {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 90;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-align: center;
  padding: 0.6rem var(--gutter);
}
.staff-banner a { color: #fff; font-weight: 700; }

/* ---------- Newsletter: form riusabile + footer ---------- */
.nl-form { display: flex; flex-direction: column; gap: 0.7rem; }
.nl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.nl-consent {
  display: flex; gap: 0.6rem; align-items: flex-start;
  font-size: 0.78rem; line-height: 1.5; color: var(--fg-dim);
  cursor: pointer;
}
.nl-consent input { margin-top: 0.25rem; accent-color: var(--accent); flex-shrink: 0; width: 1rem; height: 1rem; }
.nl-consent a { color: var(--accent); }
.nl-hint { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.12em; color: var(--fg-faint); }
.nl-form .form-note { margin-top: 0; }
.footer-nl {
  display: grid; gap: var(--space-4);
  padding-block: var(--space-5) var(--space-3);
  border-bottom: 1px solid var(--border);
}
@media (min-width: 900px) { .footer-nl { grid-template-columns: 1fr 1fr; align-items: start; } }
.footer-nl-form { max-width: 30rem; }
.nl-form--compact .nl-consent { font-size: 0.72rem; }
.article-nl {
  margin-top: var(--space-6);
  border: 1px solid var(--border);
  background: var(--card);
  padding: var(--space-4);
  max-width: 46rem;
}

/* ---------- Immagini negli articoli e nelle liste ---------- */
.article-body figure { margin: var(--space-3) 0; }
.article-body figure img { width: 100%; height: auto; border: 1px solid var(--border); }
.article-body figcaption { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-faint); margin-top: 0.5rem; }
.track-item .thumb { width: 96px; height: 72px; object-fit: cover; border: 1px solid var(--border); }
@media (min-width: 768px) {
  .track-item:has(.thumb) { grid-template-columns: 3.5rem 96px 1fr 11rem 8rem auto; }
}
@media (max-width: 767px) { .track-item .thumb { display: none; } }

/* ---------- Candidatura: file input e progresso ---------- */
.file-input { padding: 0.6rem 0; font-family: var(--font-mono); font-size: 0.8rem; color: var(--fg-dim); border-bottom: 1px solid color-mix(in oklab, var(--fg) 18%, transparent); }
.file-input::file-selector-button {
  font: inherit; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
  background: transparent; color: var(--fg); border: 1px solid var(--border); padding: 0.45rem 0.9rem; margin-right: 0.8rem; cursor: pointer;
}
.file-input::file-selector-button:hover { border-color: var(--border-hot); color: var(--accent); }
.upload-progress { display: flex; flex-direction: column; gap: 0.3rem; }
.a-bar { height: 6px; background: var(--border); overflow: hidden; }
.a-bar i { display: block; height: 100%; background: var(--accent); width: var(--w, 0%); transition: width 0.3s; }
.rule-list { padding-left: 1.2rem; color: var(--fg-dim); display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.95rem; }
.rule-list li::marker { color: var(--accent); }

/* ---------- Voto: candidati ---------- */
.candidates { display: grid; gap: var(--space-2); }
@media (min-width: 900px) { .candidates { grid-template-columns: 1fr 1fr; } }
.candidate {
  position: relative; display: grid; grid-template-columns: 2.5rem 1fr; gap: var(--space-2);
  border: 1px solid var(--border); background: var(--card); padding: var(--space-3);
  cursor: pointer; transition: border-color 0.3s var(--ease-out), background 0.3s var(--ease-out);
}
.candidate:has(.cand-cover) { grid-template-columns: 2.5rem 6rem 1fr; }
.candidate:hover { border-color: var(--border-hot); }
.candidate input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.candidate:has(input:checked) { border-color: var(--accent); background: var(--accent-veil); }
.candidate:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.cand-no { font-family: var(--font-mono); font-size: 0.8rem; color: var(--fg-faint); }
.cand-cover { width: 6rem; height: 6rem; object-fit: cover; border: 1px solid var(--border); }
.cand-body { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.cand-title { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: -0.02em; font-size: 1.15rem; }
.cand-artist { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); }
.cand-bio { font-size: 0.85rem; color: var(--fg-dim); line-height: 1.5; }
.cand-body audio { width: 100%; margin-top: 0.4rem; height: 2.2rem; }
.cand-check {
  position: absolute; top: 0.7rem; right: 0.7rem; width: 1.6rem; height: 1.6rem;
  border-radius: 50%; display: grid; place-items: center; font-size: 0.85rem; font-weight: 700;
  border: 1px solid var(--border); color: transparent; transition: all 0.25s var(--ease-out);
}
.candidate:has(input:checked) .cand-check { background: var(--accent); border-color: var(--accent); color: #fff; }
.vote-bar {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-2);
  margin-top: var(--space-3); padding: var(--space-2) var(--space-3);
  background: color-mix(in oklab, var(--bg) 88%, transparent); backdrop-filter: blur(10px);
  border: 1px solid var(--border);
}
.vote-bar .mono-label b { color: var(--accent); font-size: 1rem; }

/* Rete di sicurezza: se il JS non arriva entro 2,5s, i blocchi .rise diventano visibili comunque */
@media (prefers-reduced-motion: no-preference) {
  html.js .rise:not(.in) { animation: rise-fallback 0.4s var(--ease-out) 2.5s forwards; }
}
@keyframes rise-fallback { to { opacity: 1; translate: 0 0; } }

/* ---------- Candidatura: layout a due card + modulo a colonna unica ---------- */
.cards-row { display: grid; gap: var(--space-3); margin-bottom: var(--space-4); }
@media (min-width: 900px) { .cards-row { grid-template-columns: 1fr 1fr; } }
.cards-row .channel { border: 1px solid var(--border); background: var(--card); padding: var(--space-3); grid-template-columns: 6rem 1fr; }
.submit-panel { max-width: 56rem; }
.form-grid { display: grid; gap: var(--space-3); }
@media (min-width: 768px) { .form-grid { grid-template-columns: 1fr 1fr; } .form-grid .field--full { grid-column: 1 / -1; } }
.success-panel {
  border: 1px solid var(--accent); background: var(--accent-veil);
  padding: var(--space-5) var(--space-4); max-width: 56rem;
}
.success-panel .display { font-size: clamp(2rem, 5vw, 3.4rem); margin-block: var(--space-2) var(--space-3); }
.success-panel .success-msg { font-size: 1.1rem; line-height: 1.7; color: var(--fg); margin-bottom: var(--space-2); }

/* ---------- v1.3.1: candidati (audio fuori dalla label), file scelti, targhette ---------- */
.candidate { display: flex; flex-direction: column; gap: 0.6rem; padding: 0; }
.cand-hit { display: grid; grid-template-columns: 2.5rem 1fr; gap: var(--space-2); padding: var(--space-3); cursor: pointer; position: relative; }
.candidate:has(.cand-cover) .cand-hit { grid-template-columns: 2.5rem 6rem 1fr; }
.candidate > audio { width: calc(100% - 2 * var(--space-3)); margin: 0 var(--space-3) var(--space-3); height: 2.2rem; }
.cand-select { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-faint); margin-top: 0.3rem; }
.candidate:has(input:checked) .cand-select { color: var(--accent); }
.candidate:has(input:checked) .cand-select::before { content: "✓ "; }
.file-row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.file-row .file-name { font-family: var(--font-mono); font-size: 0.72rem; color: var(--fg-dim); word-break: break-all; }
.file-row .file-clear { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--border-hot); padding: 0.25rem 0.6rem; }

/* Salta al contenuto: visibile solo con la tastiera.
   Era uno style inline con onfocus/onblur; qui e' CSS, e la CSP puo' esistere. */
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--accent); color: #fff; padding: 0.6rem 1rem;
  font: 600 0.9rem/1 var(--font-body); text-decoration: none;
}
.skip-link:focus { left: 0; }

/* Filtri e paginazione della lista news */
.news-filters {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  margin-bottom: var(--space-4); padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
}
.news-filters a {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em;
  text-transform: uppercase; text-decoration: none; color: var(--fg-dim);
  border: 1px solid var(--border); padding: 0.35rem 0.7rem;
  transition: color 0.2s, border-color 0.2s;
}
.news-filters a:hover { color: var(--fg); border-color: var(--fg-faint); }
.news-filters a.on { color: var(--accent); border-color: var(--border-hot); }
.news-filters .n { color: var(--fg-faint); }
.pager {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-4);
}
.pager .mono-label { order: -1; width: 100%; text-align: center; }
@media (min-width: 40rem) { .pager .mono-label { order: 0; width: auto; } }

/* ---------- Manifesto: la chiusa ---------- */
.manifesto-coda {
  position: relative;
  margin-top: var(--space-5);
  padding-block: var(--space-6);
  overflow: hidden;
}
.manifesto-coda .staff-bg { position: absolute; inset: 20% 0; }
.manifesto-coda .inner { position: relative; max-width: 44rem; }
.manifesto-coda .claim {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  font-size: clamp(1.2rem, 3vw, 2.1rem);
  line-height: 1.15;
  margin-top: var(--space-2);
}
.manifesto-coda .coda-cta {
  position: relative;
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  margin-top: var(--space-4);
}

/* ---------- Regolamento: l'avviso che il PDF e' il testo che vale ---------- */
.rule-warn {
  display: grid;
  gap: var(--space-3) var(--space-5);
  border: 1px solid var(--border-hot);
  background: var(--accent-veil);
  padding: var(--space-4);
  margin-bottom: var(--space-5);
}
@media (min-width: 900px) { .rule-warn { grid-template-columns: 1.35fr 1fr; align-items: center; } }
.rule-warn h2 {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  font-size: clamp(1.15rem, 2.6vw, 1.75rem);
  line-height: 1.15;
  margin-block: var(--space-1) var(--space-2);
}
.rule-warn p { color: var(--fg-dim); line-height: 1.7; }
.rule-warn p b { color: var(--fg); }
.rule-warn .mono-label { color: var(--accent); }
.rule-warn-cta { display: flex; flex-direction: column; gap: var(--space-2); align-items: stretch; }
.rule-warn-cta .btn { text-align: center; }

/* ---------- Regolamento: le tre date in evidenza ---------- */
.rule-dates {
  display: grid;
  gap: var(--space-3) var(--space-5);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding-block: var(--space-3);
  margin-bottom: var(--space-2);
}
@media (min-width: 720px) { .rule-dates { grid-template-columns: repeat(3, 1fr); } }
.rule-dates .mono-label { color: var(--fg-faint); }
.rule-dates .v {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1rem, 2.2vw, 1.35rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-top: 0.45rem;
}
.rule-dates .v.hot { color: var(--accent); }
.rule-dates-note { margin-bottom: var(--space-4); }

/* ---------- Edizioni: le puntate dal podcast e le canzoni da scaricare (v1.6.0) ---------- */
.edition { border-bottom: 1px solid var(--border); }
.edition .disco-item { border-bottom: 0; }
.edition-body { display: grid; gap: var(--space-4); padding-bottom: var(--space-5); }
@media (min-width: 900px) { .edition-body { margin-left: calc(var(--label-col) + var(--space-4)); max-width: 56rem; } }
.ep-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.ep {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: var(--space-1) var(--space-3);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--border);
}
.ep-play {
  width: 3rem; height: 3rem;
  border-radius: 50%;
  border: 1px solid var(--border-hot);
  background: transparent;
  color: var(--fg);
  display: grid; place-items: center;
  cursor: pointer;
  margin-top: 0.15rem;
  transition: background 0.3s var(--ease-out), border-color 0.3s var(--ease-out), color 0.3s var(--ease-out);
}
.ep-play::before {
  content: "";
  width: 0; height: 0; margin-left: 0.2rem;
  border-left: 0.8rem solid currentColor;
  border-top: 0.5rem solid transparent;
  border-bottom: 0.5rem solid transparent;
}
.ep.is-playing .ep-play::before {
  width: 0.8rem; height: 0.9rem; margin: 0; border: 0;
  background: linear-gradient(to right, currentColor 0 36%, transparent 36% 64%, currentColor 64%);
}
.ep-play:hover, .ep.is-active .ep-play { background: var(--accent); border-color: var(--accent); color: #fff; }
html:not(.js) .ep-play, html:not(.js) .ep-bar { display: none; }
.ep-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem var(--space-2); }
.ep-head .no { font-family: var(--font-mono); font-size: 0.8rem; color: var(--fg-faint); }
.ep-head h3 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  font-size: clamp(1.05rem, 2.2vw, 1.4rem);
  transition: color 0.3s var(--ease-out);
}
.ep.is-active h3 { color: var(--accent); }
.ep-head .tag {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid color-mix(in oklab, var(--accent) 35%, transparent);
  padding: 0.18rem 0.6rem;
}
.ep-meta {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin-top: 0.3rem;
}
.ep-desc { color: var(--fg-dim); line-height: 1.65; font-size: 0.95rem; margin-top: 0.5rem; max-width: 44rem; }
.ep-bar {
  display: none;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-2);
  align-items: center;
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--fg-faint);
}
.ep.is-active .ep-bar { display: grid; }
.ep-seek {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px; margin: 0;
  border-radius: 2px;
  background: linear-gradient(to right, var(--accent) var(--p, 0%), var(--border) var(--p, 0%));
  cursor: pointer;
}
.ep-seek::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: var(--fg); border: 2px solid var(--accent); }
.ep-seek::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--fg); border: 2px solid var(--accent); }
.ep-seek::-moz-range-track { background: transparent; }
.ep noscript audio { width: 100%; margin-top: var(--space-2); }
.ep-source {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin-top: var(--space-2);
}
.ep-source a { color: var(--accent); text-decoration: none; border-bottom: 1px solid color-mix(in oklab, var(--accent) 40%, transparent); }
.edition-dl { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.edition-dl .dl-note {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

/* ============================================================================
   CLASSIFICHE — il risultato delle serate, in home e su /classifiche.

   Tre forme per lo stesso oggetto: la combinata di una semifinale, e in finale
   le tre dei tre premi. Il numero a destra cambia significato secondo il modo
   (preferenze, media, punti) e l'etichetta lo dice, perche' tre numeri diversi
   non devono sembrare la stessa cosa.
   ========================================================================== */

/* Lo striscione del voto, sotto la copertina della home. */
.vote-banner {
  border: 1px solid var(--accent);
  background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 12%, transparent), transparent);
  padding: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  justify-content: space-between;
}
.vote-banner .vb-testo { flex: 1 1 20rem; }
.vote-banner .vb-quando {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 var(--space-2);
}
.vote-banner h2 { font-size: clamp(1.5rem, 4vw, 2.2rem); line-height: 1.05; margin: 0 0 var(--space-2); }
.vote-banner p { color: var(--fg-dim); margin: 0; max-width: 44ch; }
.vote-banner .btn { flex: 0 0 auto; }

/* Il blocco delle classifiche. Una sola: larga. Piu' d'una: affiancate. */
.clf-griglia {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  align-items: start;
}
.clf { border-top: 2px solid var(--fg); padding-top: var(--space-3); }
.clf-occhiello {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin: 0 0 0.3rem;
}
.clf-titolo { font-size: 1.25rem; line-height: 1.1; margin: 0 0 var(--space-3); }
.clf-lista { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.clf-riga {
  display: grid;
  grid-template-columns: 2.4rem 1fr auto;
  align-items: baseline;
  gap: 0 var(--space-2);
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--border);
}
.clf-pos { font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; color: var(--fg-faint); }
.clf-riga--primo .clf-pos { color: var(--accent); font-size: 1.7rem; }
.clf-chi { min-width: 0; }
.clf-brano { display: block; font-weight: 600; overflow-wrap: anywhere; }
.clf-artista { display: block; font-size: 0.85rem; color: var(--fg-dim); overflow-wrap: anywhere; }
.clf-val { text-align: right; white-space: nowrap; }
.clf-val b { font-family: var(--font-mono); font-size: 1.05rem; display: block; }
.clf-val span {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
.clf-qual {
  grid-column: 2 / -1;
  justify-self: start;
  margin-top: 0.3rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid color-mix(in oklab, var(--accent) 45%, transparent);
  padding: 0.1rem 0.4rem;
}
.clf-nota, .clf-vuota { font-size: 0.85rem; color: var(--fg-dim); margin-top: var(--space-2); }

/* La finale: pubblico a sinistra, vincitore al centro, giuria a destra.
   Su schermo stretto il vincitore va per primo — e' quello che si cerca. */
.clf-finale { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
.clf-finale .clf-vincitore { order: -1; }
.clf-finale .clf-vincitore .clf { border-top-color: var(--accent); }
.clf-finale .clf-vincitore .clf-titolo { color: var(--accent); }
@media (min-width: 62rem) {
  .clf-finale { grid-template-columns: 1fr 1.15fr 1fr; align-items: start; }
  .clf-finale .clf-vincitore { order: 0; }
}

/* Il conto per esteso: una tabella che si può leggere e rifare a mano.
   Scorre dentro il suo contenitore, non trascina la pagina di lato. */
/* `min-width: 0` non e' decorazione: senza, la tabella larga 40rem gonfia la
   colonna della griglia che la contiene e a 390px trascina di lato l'intera
   pagina, titolo compreso. Con questo, a scorrere e' solo la tabella. */
.tabellone-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; min-width: 0; max-width: 100%; }
.track > * { min-width: 0; }
.tabellone { width: 100%; border-collapse: collapse; font-size: 0.9rem; min-width: 40rem; }
.tabellone th {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-faint);
  text-align: left;
  font-weight: 400;
  padding: 0 0.6rem 0.6rem 0;
  border-bottom: 1px solid var(--border);
}
.tabellone td { padding: 0.7rem 0.6rem 0.7rem 0; border-bottom: 1px solid var(--border); vertical-align: baseline; }
.tabellone .num { text-align: right; font-family: var(--font-mono); white-space: nowrap; }
.tabellone th.num { text-align: right; }
.tabellone .pos { font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; color: var(--fg-faint); }
.tabellone tr:first-child .pos { color: var(--accent); }
.tabellone .chi { display: block; font-size: 0.8rem; color: var(--fg-dim); }
.tabellone .mini { font-size: 0.7rem; color: var(--fg-faint); }
.tabellone .tot b { font-size: 1.05rem; }
.tabellone tr.qual .tot b { color: var(--accent); }

/* ---------- Briciole di pane ----------
   Sull'articolo, sopra la data. Stesso registro del back-link che sostituisce:
   monospaziato, minuscolo, spento — è un'indicazione di posizione, non un
   invito. Il separatore è disegnato dal CSS e non letto dai lettori di schermo,
   che dell'elenco ordinato sanno già leggere la struttura. */
.briciole { padding-top: var(--space-4); }
.briciole ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem;
  list-style: none; margin: 0; padding: 0;
  font-family: var(--font-mono); font-size: 0.72rem;
  letter-spacing: 0.16em; text-transform: uppercase;
}
.briciole li { display: flex; align-items: center; gap: 0.55rem; color: var(--fg-faint); }
.briciole li + li::before { content: "/"; color: var(--border-hot); }
.briciole a { color: var(--fg-faint); text-decoration: none; }
.briciole a:hover { color: var(--accent); }
.briciole [aria-current="page"] {
  color: var(--fg-dim);
  max-width: 28ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}