/* ============================================================
   RADIO FORTUNA — stylesheet
   Font system: XNarrow -> Big Shoulders Display / Apple Garamond -> EB Garamond
   Etichette e meta: Azeret Mono
   Colour system: #0044CA (blue) + #F5F2E8 (cream). Everything else is a photograph.
   ============================================================ */

/* I font sono caricati da index.html con <link rel="preconnect"> + <link rel="stylesheet">.
   Un @import qui dentro bloccherebbe il rendering: il browser deve prima scaricare
   questo CSS, poi scoprire l'import, poi scaricare i font — due giri invece di uno. */

:root{
  --blue:#0044CA;
  --blue-deep:#00308F;
  /* Il blu pieno su fondo quasi nero si legge male (2,5:1): per il TESTO blu su
     nero serve una versione schiarita dello stesso blu (5,2:1). I fondi e i
     bottoni restano col blu pieno. */
  --blue-on-dark:color-mix(in srgb, var(--blue) 65%, var(--cream));
  --orange:#FF5A1F;
  --cream:#F5F2E8;
  --cream-dim:#E7E2D3;
  --ink:#0B0B0C;
  --ink-soft:#17171A;
  --line: rgba(11,11,12,.14);
  --line-on-dark: rgba(245,242,232,.16);
  --line-on-blue: rgba(245,242,232,.28);

  /* Stack di fallback reali: se il webfont non arriva la pagina resta impaginata,
     non salta su un font di sistema con proporzioni completamente diverse. */
  --f-display:'Big Shoulders Display', 'Arial Narrow', 'Helvetica Neue Condensed', sans-serif;
  --f-serif:'EB Garamond', Georgia, 'Times New Roman', serif;
  --f-mono:'Azeret Mono', ui-monospace, Menlo, Consolas, monospace;
  --f-graffiti:'Rubik Wet Paint', var(--f-display);

  --ease: cubic-bezier(.22,.8,.28,1);
  --nav-h: 84px;

  /* ---- SCALA TIPOGRAFICA ----
     Prima ogni titolo aveva la sua misura decisa a occhio: sette dimensioni
     diverse per i titoli di sezione e quattro per le etichette. Con tanti
     livelli ravvicinati nessuno si distingue davvero, e la pagina risulta
     piatta anche quando i caratteri sono grandi. Qui i livelli sono sei, ben
     distanziati fra loro, e ogni testo ne usa uno.

     clamp() scala con la finestra senza bisogno di breakpoint: il primo valore
     è il minimo sul telefono, l'ultimo il tetto sui monitor grandi. */
  --t-display: clamp(56px, 8.4vw, 150px);  /* la dichiarazione principale */
  --t-h2:      clamp(38px, 5.2vw, 82px);   /* titoli di sezione, brevi */
  --t-h2-long: clamp(29px, 3.5vw, 52px);   /* titoli di sezione a frase intera */
  --t-h3:      clamp(20px, 2.1vw, 28px);
  --t-lead:    clamp(20px, 1.7vw, 27px);   /* paragrafo di apertura */
  --t-body:    18px;
  --t-label:   13px;                        /* etichette e meta in mono */
  --t-label-sm:12px;
}

*,*::before,*::after{ box-sizing:border-box; }
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

html{ overflow-x:hidden; }
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--f-serif);
  font-size:var(--t-body);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  width:100%;
}

img,video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

::selection{ background:var(--blue); color:var(--cream); }

.eyebrow{
  font-family:var(--f-mono);
  font-size:var(--t-label);
  letter-spacing:.18em;
  text-transform:uppercase;
  opacity:.8;
  display:flex;
  align-items:center;
  gap:.6em;
}
.eyebrow::before{
  content:'';
  width:7px;height:7px;
  background:currentColor;
  border-radius:50%;
  display:inline-block;
}
.eyebrow--lg{ font-size:16px; }

.wrap{
  max-width:1400px;
  margin:0 auto;
  padding:0 6vw;
}

/* Crescendo il corpo, il chiaroscuro fra le lettere si apre: per restare compatto
   il tracking va stretto man mano che il titolo diventa grande. È la differenza
   principale fra un titolo "scritto grande" e un titolo composto. */
h1,h2,h3{
  margin:0;
  font-family:var(--f-display);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:-.022em;
  text-wrap:balance;          /* niente parole orfane sull'ultima riga */
}
h1{ letter-spacing:-.032em; }

.reveal{ opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }
.reveal-stagger > *{ transition-delay:calc(var(--i,0) * 70ms); }

/* ---------------- cursor dot ---------------- */
.dot{
  position:fixed; top:0; left:0; width:22px; height:25px;
  pointer-events:none; z-index:9999;
  transform:translate(-50%,-50%);
  transition:width .25s var(--ease), height .25s var(--ease), opacity .25s;
  opacity:0;
  /* Il quadrifoglio è un PNG a tinta unita: usato come maschera se ne controlla
     il colore dal CSS, invece di essere bloccati sul blu del file. */
  background:var(--cream);
  -webkit-mask:url(../assets/clover.png) center/contain no-repeat;
  mask:url(../assets/clover.png) center/contain no-repeat;
  /* difference lo rende visibile su qualunque fondo — crema, blu o nero —
     senza doverne cambiare il colore sezione per sezione. */
  mix-blend-mode:difference;
}
.dot.is-active{ opacity:1; }
.dot.is-big{ width:52px; height:58px; }
@media (hover:none), (pointer:coarse){ .dot{ display:none; } }

/* ---------------- nav ---------------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:500;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 6vw;
  color:var(--cream);
  transition:background .4s var(--ease), color .4s var(--ease), padding .4s var(--ease), border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-solid{
  background:rgba(11,11,12,.86);
  backdrop-filter:blur(10px);
  padding:14px 6vw;
  border-color:var(--line-on-dark);
}
.nav__logo{ display:flex; align-items:center; }
.nav__logo img{ height:26px; width:auto; filter:brightness(0) invert(1); }
.nav__links{ display:flex; gap:34px; font-family:var(--f-mono); font-size:var(--t-label-sm); letter-spacing:.12em; text-transform:uppercase; }
.nav__links a{ opacity:.75; transition:opacity .25s; position:relative; }
.nav__links a:hover{ opacity:1; }
/* Il link "Scrivici" serve solo nel menu mobile: su desktop c'è già la CTA a destra. */
.nav__links .nav__link--contact{ display:none; }

/* Sezione corrente: in una pagina lunga il visitatore deve sapere dove si trova,
   altrimenti lo scroll è una caduta libera senza riferimenti. */
.nav__links a::after{
  content:''; position:absolute; left:0; right:0; bottom:-6px; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav__links a.is-current{ opacity:1; }
.nav__links a.is-current::after{ transform:scaleX(1); }

/* Focus visibile: senza questo il sito è inutilizzabile da tastiera. */
a:focus-visible, button:focus-visible{
  outline:2px solid currentColor; outline-offset:4px; border-radius:2px;
}

/* Bersagli tattili: almeno 44×44px anche dove il testo è piccolo (IT/EN era
   18×18, i link del footer alti 18). L'area in più è un ::before trasparente
   centrato sul link, quindi il dito lo trova senza che cambi di un pixel
   quello che si vede: con il padding si sarebbero spostate sottolineature,
   pillole e allineamenti. */
.nav__logo, .nav__lang a, .nav__cta, .manifesto__links a, .big-email,
.footer__links a, .footer__top{ position:relative; }
.nav__logo::before, .nav__links a::before, .nav__lang a::before, .nav__cta::before, .manifesto__links a::before,
.big-email::before, .footer__links a::before, .footer__top::before, .card__ig::before{
  content:''; position:absolute; left:50%; top:50%;
  width:max(100%, 44px); height:max(100%, 44px); transform:translate(-50%,-50%);
}
.nav__cta{
  font-family:var(--f-mono); font-size:var(--t-label-sm); letter-spacing:.1em; text-transform:uppercase;
  border:1px solid var(--line-on-dark); padding:9px 18px; border-radius:999px;
  transition:background .25s, color .25s, border-color .25s;
}
.nav__cta:hover{ background:var(--cream); color:var(--ink); border-color:var(--cream); }

.nav__social{ display:flex; align-items:center; gap:16px; }
.nav__social a{ display:flex; opacity:.75; transition:opacity .25s; position:relative; }
.nav__social a::before{
  content:''; position:absolute; left:50%; top:50%;
  width:max(100%, 44px); height:max(100%, 44px); transform:translate(-50%,-50%);
}
.nav__social a:hover{ opacity:1; }
.nav__social svg{ width:18px; height:18px; fill:currentColor; display:block; }
/* Sotto 861px restano visibili (l'utente le vuole anche su telefono) ma più
   piccole e strette: lo spazio nella barra è quello di logo + IT/EN + menu. */
@media (max-width:860px){ .nav__social{ gap:12px; } .nav__social svg{ width:16px; height:16px; } }
@media (max-width:420px){ .nav__social{ gap:10px; margin-right:14px; } .nav__social svg{ width:15px; height:15px; } }

/* Selettore lingua: sigle e non bandierine, perché una bandiera indica un Paese,
   non una lingua. La lingua attiva è marcata, così il gruppo si legge come uno
   stato corrente e non come due link qualsiasi. */
.nav__lang{
  display:flex; align-items:center; gap:7px;
  font-family:var(--f-mono); font-size:var(--t-label-sm); letter-spacing:.1em; text-transform:uppercase;
}
.nav__lang a{ opacity:.5; transition:opacity .25s; }
.nav__lang a:hover{ opacity:.85; }
.nav__lang a[aria-current]{ opacity:1; text-decoration:underline; text-underline-offset:5px; }
.nav__lang span{ opacity:.3; }

.menu__lang{
  display:flex; gap:26px; margin-top:34px;
  font-family:var(--f-mono); font-size:var(--t-label); letter-spacing:.1em; text-transform:uppercase;
}
.menu__lang a{ opacity:.5; border:0; padding:0; font-family:inherit; font-size:inherit; letter-spacing:inherit; }
.menu__lang a[aria-current]{ opacity:1; text-decoration:underline; text-underline-offset:5px; }

/* Icona a due linee invece della scritta "MENU": su schermi stretti ogni
   carattere pesa, e un'icona è universalmente riconoscibile senza tradurla.
   Le due linee ruotano a X quando il menu è aperto, così il bottone stesso
   conferma lo stato invece di richiedere di leggere un'etichetta cambiata. */
.nav__burger{
  display:none; background:none; border:1px solid var(--line-on-dark); color:inherit;
  width:44px; height:44px; border-radius:50%; cursor:pointer; padding:0;
  align-items:center; justify-content:center;
}
.nav__burger-box{ position:relative; width:18px; height:12px; display:block; }
.nav__burger-box span{
  position:absolute; left:0; width:100%; height:2px; background:currentColor;
  border-radius:2px; transition:transform .3s var(--ease), top .3s var(--ease), opacity .2s var(--ease);
}
.nav__burger-box span:first-child{ top:0; }
.nav__burger-box span:last-child{ top:10px; }
.nav.is-open .nav__burger-box span:first-child{ top:5px; transform:rotate(45deg); }
.nav.is-open .nav__burger-box span:last-child{ top:5px; transform:rotate(-45deg); }

/* ---------------- menu mobile ---------------- */
.menu{
  position:fixed; inset:0; z-index:499;
  background:var(--ink); color:var(--cream);
  display:flex; flex-direction:column; justify-content:center; gap:6px;
  padding:0 6vw;
}
.menu a{
  font-family:var(--f-display); font-weight:900; text-transform:uppercase;
  font-size:clamp(34px,11vw,64px); line-height:1.05; letter-spacing:-.03em;
  padding:8px 0; border-bottom:1px solid var(--line-on-dark);
}
.menu a.is-current, .menu a[aria-current="page"]{ color:var(--blue-on-dark); }
/* Telefono in orizzontale (375px di altezza): le voci non ci stanno e con
   justify-content:center sporgevano sopra e sotto lo schermo — "Manifesto" ed
   "Eventi" irraggiungibili. I margini auto centrano uguale quando c'è spazio,
   e quando non c'è il menu parte dall'alto e scorre. */
.menu{ justify-content:flex-start; overflow-y:auto; }
.menu > :first-child{ margin-top:auto; }
.menu > :last-child{ margin-bottom:auto; }
@media (max-height:600px){ .menu{ padding-top:calc(var(--nav-h) + 8px); padding-bottom:24px; } }
/* L'attributo hidden è applicato dal browser con una regola debolissima:
   qualunque display: esplicito qui sopra lo vincerebbe, lasciando il menu
   sempre aperto. Va riaffermato. */
.menu[hidden]{ display:none; }

@media (max-width:860px){
  .nav__links{ display:none; }
  .nav__burger{ display:flex; }
  /* Con il menu aperto la CTA sparisce: due azioni concorrenti nella stessa barra
     si tolgono chiarezza a vicenda su uno schermo stretto. */
  .nav.is-open .nav__cta{ display:none; }
}

/* Sotto i 420px logo + IT/EN + "Get in touch" + menu non ci stanno: a 375 fra
   un elemento e l'altro restavano 2px, a 320 la CTA andava a capo e schiacciava
   logo e menu. La CTA è già l'ultima voce del menu, la lingua invece deve
   restare a un tocco: via la CTA, e IT/EN si accosta al menu. */
@media (max-width:420px){
  .nav__cta{ display:none; }
  .nav__lang{ margin-left:auto; margin-right:22px; }
}

/* Sopra gli 860px i link sono già tutti visibili: il menu non serve mai. */
@media (min-width:861px){ .menu{ display:none !important; } }

/* ---------------- hero ---------------- */
.hero{
  position:relative; height:100svh; min-height:560px; overflow:hidden;
  background:var(--ink);
}
.hero__video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.92;
}
/* Copia sfocata dello stesso video, nascosta su desktop dove il video riempie
   già lo schermo senza tagliare nulla. Vedi il commento nell'HTML. */
.hero__bg{ display:none; }

@media (max-width:860px) and (orientation:portrait){
  /* Il video è in 16:9, girato per un led wall: su un telefono verticale,
     mostrato intero, era una striscia alta un quarto dello schermo. Ma il
     contenuto sta tutto al centro — il logo va dal 27% al 73% della larghezza,
     la cassetta con i quadrifogli dal 31% al 68%, il resto è colore pieno —
     quindi qui si mostra solo il 54% centrale e il logo resta intero, grande
     il doppio. hero-mobile.mp4 è già ritagliato così (nitido e leggero);
     object-fit:cover fa lo stesso taglio sul poster, e sul video desktop se il
     telefono viene ruotato dopo il caricamento. */
  .hero{ background:#fff; } /* il video parte bianco: niente lampo nero prima */
  .hero__video{
    position:absolute; inset:auto; left:0; top:50%; transform:translateY(-50%);
    width:100%; height:auto; aspect-ratio:552/576; object-fit:cover; opacity:1;
  }
  /* Sopra e sotto il video: il suo stesso bordo, prolungato (vedi main.js).
     I fotogrammi hanno bordi di colore pieno, bianco o blu, così il video
     sembra riempire lo schermo. Prima qui c'era una copia sfocata e scurita,
     che sui fotogrammi bianchi diventava una cornice grigia. */
  .hero__bg{ display:block; position:absolute; inset:0; width:100%; height:100%; }
}

.hero::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 60%, rgba(0,0,0,.65) 100%);
}
@media (max-width:860px) and (orientation:portrait){
  /* Su telefono la sfumatura si riduce a due fasce di 130px, dietro al menu e
     dietro a "Scorri": stesa su tutta l'altezza ingrigiva i fotogrammi bianchi.
     All'altezza delle scritte resta scura quanto prima (anzi un filo di più):
     con le bande bianche prolungate il menu color crema ne ha bisogno. */
  .hero::after{
    background:linear-gradient(180deg,
      rgba(0,0,0,.45) 0, rgba(0,0,0,.3) 70px, rgba(0,0,0,0) 130px,
      rgba(0,0,0,0) calc(100% - 130px), rgba(0,0,0,.55) calc(100% - 70px), rgba(0,0,0,.7) 100%);
  }
}
.hero__scroll{
  position:absolute; right:6vw; bottom:44px; z-index:2; color:var(--cream);
  font-family:var(--f-mono); font-size:var(--t-label-sm); letter-spacing:.16em; text-transform:uppercase;
  display:flex; align-items:center; gap:10px;
}
.hero__scroll span.arrow{ display:inline-block; animation:bob 1.8s ease-in-out infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(6px);} }

/* Testo per lettori di schermo e motori di ricerca, invisibile a schermo
   (l'h1 della home: lì il titolo visivo è il video). */
.sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Pagine interne (eventi, brand, roster, contatti): non c'è l'hero sotto la
   barra fissa, quindi la prima sezione parte più in basso per non finirci sotto. */
.page-sub main > section:first-child{ padding-top:calc(var(--nav-h) + min(5vw,48px)); }

/* ---------------- section shell ---------------- */
section{ position:relative; }
.section-pad{ padding:min(14vw,150px) 0; }
/* Eventi e case study: meno spazio sopra/sotto — erano le sezioni più lunghe
   della pagina senza un motivo valido, con troppo vuoto sopra e sotto un
   contenuto che sta benissimo in meno spazio. */
.section-pad--tight{ padding:min(4vw,44px) 0; }

/* Saltando a una sezione dal menu, il suo inizio va a filo del bordo alto e la
   barra fissa (~73px) ci si appoggia sopra: su telefono il padding della
   sezione è più basso della barra e il titolo finiva coperto (del tutto, su
   Eventi). Si ferma lo scroll quel tanto prima che serve perché il primo testo
   cada ~20px sotto la barra: --nav-h meno il padding che la sezione ha già,
   quindi zero su desktop dove il padding basta da solo. */
.section-pad{ scroll-margin-top:max(0px, calc(var(--nav-h) + 8px - min(14vw,150px))); }
.section-pad--tight{ scroll-margin-top:max(0px, calc(var(--nav-h) + 8px - min(4vw,44px))); }
.on-blue{ background:var(--blue); color:var(--cream); }
.on-ink{ background:var(--ink); color:var(--cream); }
.on-cream{ background:var(--cream); color:var(--ink); }

/* ---------------- manifesto (graffiti) ---------------- */
/* "NON CREDIAMO NELLA FORTUNA" in un font da graffito, bianco, sopra la foto
   della folla (bianco e nero) invece dello sfondo blu piatto: la sezione era
   troppo grande e troppo vuota, la foto la riempie e dà peso al manifesto.
   Il titolo entra gradualmente scorrendo e cola sotto le lettere. */
/* --reveal vive qui (non su .graffiti-wrap): main.js lo scrive su questa stessa
   sezione. Se un discendente ridichiarasse la stessa custom property col suo
   valore statico, quel valore vincerebbe SEMPRE su di sé e i suoi figli,
   ignorando l'inline style scritto da JS più in alto — bloccherebbe il
   graffito a "non rivelato" per sempre. */
.manifesto{ position:relative; overflow:hidden; padding:min(6vw,64px) 0 min(9vw,90px);
  scroll-margin-top:max(0px, calc(var(--nav-h) + 8px - min(6vw,64px))); /* vedi .section-pad */ }
.manifesto__bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.05); z-index:0;
}
/* Non nero piatto: un velo blu-inchiostro, così la foto in scala di grigi
   resta comunque "di marca" invece di sembrare presa da un sito qualunque. */
.manifesto__scrim{
  position:absolute; inset:0; z-index:0;
  background:linear-gradient(180deg, rgba(0,10,40,.75) 0%, rgba(0,20,60,.55) 45%, rgba(0,10,40,.8) 100%);
}
.manifesto__inner{ position:relative; z-index:1; }
.manifesto__caption{ margin-top:min(4vw,40px); }
.manifesto__caption p{
  font-family:var(--f-serif); font-style:italic; font-size:clamp(22px,2.6vw,34px); line-height:1.4;
  max-width:46ch; color:var(--cream);
}

/* Il titolo eredita lo stile h2 del sito (XNarrow, maiuscolo, peso 900):
   niente più font da graffito. font-size in vw puro (non clamp con un tetto
   in px): deve restare in un'unica riga a qualunque larghezza, main.js lo
   restringe ulteriormente se anche così la frase più lunga (inglese o
   italiana) non ci stesse. */
.graffiti-wrap{ position:relative; max-width:100%; }
.graffiti{
  display:inline-block; white-space:nowrap; max-width:100%;
  font-size:9vw; line-height:.92; color:var(--cream); margin:0;
}
/* Ogni parola parte da fuori dallo schermo (lato alternato, impostato da
   main.js con --fromX/--fromR) e "sbatte" in posizione: l'easing supera
   leggermente il punto di arrivo prima di assestarsi, invece di un semplice
   fade-in. Main.js aggiunge .is-in quando la sezione entra in vista. */
.graffiti__word{
  display:inline-block; opacity:0;
  transform:translateX(var(--fromX,0)) rotate(var(--fromR,0deg));
  transition:transform .7s cubic-bezier(.34,1.56,.64,1), opacity .25s linear;
  transition-delay:calc(var(--i,0) * 110ms);
}
.graffiti-wrap.is-in .graffiti__word{ opacity:1; transform:translateX(0) rotate(0deg); }

/* Instagram / LinkedIn / email: piccoli, in basso a destra della sezione. */
.manifesto__links{
  position:relative; z-index:1; display:flex; justify-content:flex-end; gap:22px; margin-top:min(5vw,50px);
}
.manifesto__links a{
  font-family:var(--f-mono); font-size:var(--t-label-sm); letter-spacing:.1em; text-transform:uppercase;
  color:var(--cream); opacity:.7; border-bottom:1px solid var(--line-on-dark); padding-bottom:4px;
  transition:opacity .25s, border-color .25s;
}
.manifesto__links a:hover{ opacity:1; border-color:var(--cream); }

@media (max-width:700px){
  .manifesto__links{ justify-content:flex-start; flex-wrap:wrap; }
}

/* ---------------- events ---------------- */
.events-head{ margin-bottom:min(3vw,32px); }
.events-head :is(h1,h2){ font-size:var(--t-h2-long); line-height:1; white-space:nowrap; max-width:100%; color:var(--cream); }
.events-head__count{ margin-top:8px; font-family:var(--f-mono); font-size:var(--t-label); letter-spacing:.08em; text-transform:uppercase; opacity:.6; }

/* Sei eventi, tre grandi festival a sinistra e le tre serate nostre a destra,
   in colonna — non più una lista sola con un sottotitolo in mezzo. */
.ev-columns{ display:grid; grid-template-columns:1fr 1fr; gap:0 6vw; align-items:start; }
.ev-list{ border-top:1px solid var(--line-on-dark); }
.ev-row{
  display:grid; grid-template-columns:1fr auto; column-gap:24px; align-items:baseline;
  padding:10px 0; border-bottom:1px solid var(--line-on-dark);
  cursor:pointer; position:relative;
}
.ev-row__main{ grid-column:1; }
.ev-row__name{
  font-family:var(--f-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(22px,2.6vw,36px); line-height:1; letter-spacing:-.02em;
  color:rgba(245,242,232,.4); transition:color .3s var(--ease), transform .3s var(--ease);
}
.ev-row__statwrap{ grid-column:2; text-align:right; }
.ev-row__stat{ font-family:var(--f-mono); font-size:var(--t-label); letter-spacing:.08em; text-transform:uppercase; opacity:.7; white-space:nowrap; }
.ev-row:hover .ev-row__name, .ev-row.is-active .ev-row__name{ color:var(--cream); transform:translateX(6px); }
.ev-row:hover .ev-row__stat, .ev-row.is-active .ev-row__stat{ opacity:1; color:var(--orange); }
.ev-row .ev-row__meta{ font-family:var(--f-mono); font-size:var(--t-label-sm); opacity:.55; }

/* La foto si apre DENTRO alla riga stessa, come la descrizione dei case study:
   niente più pannello a parte. Stessa miniatura, generata una volta sola in
   buildRow(), che serve anche da card fissa su telefono (sotto i 560px). */
.ev-row__thumbwrap{
  grid-column:1 / -1; max-height:0; overflow:hidden; opacity:0;
  transition:max-height .4s var(--ease), opacity .3s, margin-top .4s var(--ease);
}
.ev-row__thumb{
  width:100%; height:150px; object-fit:cover; border-radius:6px; background:var(--ink-soft);
  display:block; transition:filter .15s;
}
.ev-row.is-spinning .ev-row__thumb{ filter:saturate(1.4) brightness(1.08); }
.ev-row__thumb--empty{
  background:var(--ink-soft) url(../assets/clover.png) center/22% no-repeat;
  opacity:.5;
}
/* Solo con hover vero: su un touch screen non ha senso aprire la foto al
   "passaggio" del dito, si passa dritti al tap → galleria. */
@media (hover:hover){
  .ev-row:hover .ev-row__thumbwrap{ max-height:150px; opacity:1; margin-top:12px; }
}

@media (max-width:860px){
  .ev-columns{ grid-template-columns:1fr; gap:0; }
  .ev-row__name{ font-size:clamp(24px,8vw,40px); }
}

/* Sotto i 560px la riga diventa una card orizzontale con la sua foto sempre
   visibile a sinistra (la stessa miniatura, non un elemento in più): sostituisce
   sia l'indice numerico sia l'apertura al passaggio del mouse, che qui non c'è. */
@media (max-width:560px){
  .ev-row{
    grid-template-columns:72px 1fr;
    column-gap:16px; row-gap:3px;
    align-items:center;
  }
  .ev-row__thumbwrap{
    display:block; grid-column:1; grid-row:1 / span 2; max-height:none; opacity:1; margin-top:0;
    width:72px; aspect-ratio:1/1; border-radius:6px; overflow:hidden;
  }
  .ev-row__thumb{ height:100%; }
  .ev-row__main{ grid-column:2; grid-row:1; }
  .ev-row__statwrap{
    grid-column:2; grid-row:2; text-align:left;
  }
  .ev-row__stat{ white-space:normal; opacity:.85; }
  .ev-row .ev-row__meta{ display:block; margin-top:1px; }
}

/* ---------------- odometro (numeri a slot) ---------------- */
/* Ogni cifra è un rullo verticale di 0-9: all'apertura parte da una cifra a
   caso e scorre fino a fermarsi su quella vera, come i rulli di una slot —
   coerente col nome "Fortuna" invece di un banale conteggio in su. */
.odometer{ display:inline-flex; font-variant-numeric:tabular-nums; }
.odometer__reel{ display:inline-block; height:1em; overflow:hidden; vertical-align:top; }
.odometer__strip{ display:flex; flex-direction:column; will-change:transform; }
.odometer__digit{ height:1em; line-height:1; display:flex; align-items:center; justify-content:center; }

/* ---------------- marquee (locandine, loghi) ---------------- */
/* Stesso meccanismo di scorrimento infinito per due banner diversi: la lista
   di elementi viene ripetuta due volte in main.js e la metà scorre via mentre
   l'altra prende il suo posto, senza soluzione di continuità. */
.marquee{ overflow:hidden; }
.marquee__track{ display:flex; align-items:center; width:max-content; animation:marquee var(--speed,38s) linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
@keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* Locandine: una striscia continua, attaccate una all'altra, senza crema
   visibile intorno né come spazio fra un manifesto e l'altro — e non si ferma
   passandoci sopra col mouse (a differenza del comportamento di default di
   .marquee, pensato per i loghi: lì fermarsi serve a leggerli). */
.poster-marquee{ padding:0; }
.poster-marquee:hover .marquee__track{ animation-play-state:running; }
.poster-marquee .marquee__track{ gap:0; }
.poster-marquee__item{ flex:none; height:min(56vw,380px); }
.poster-marquee__item img{ height:100%; width:auto; display:block; }

.brand-marquee{ padding:min(5vw,54px) 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:#fff; color:var(--ink); }
.brand-marquee .marquee__track{ gap:min(7vw,70px); }
/* Riquadro identico per ogni logo (non solo la stessa altezza): loghi larghi
   e loghi quasi quadrati risultavano di "peso" visivo molto diverso. */
.brand-marquee__item{ flex:none; width:130px; height:52px; display:flex; align-items:center; justify-content:center; }
.brand-marquee__item img{ width:100%; height:100%; object-fit:contain; }
/* DLYNR e NSS sono loghi bianchi su trasparente, pensati per lo sfondo nero
   di prima: sullo sfondo bianco sparirebbero senza invertirli in nero. */
.brand-marquee__item img[src*="dolly-noire"], .brand-marquee__item img[src*="nss"]{ filter:brightness(0); }

/* Banner merch: stessa altezza totale della striscia dei loghi, ma foto di
   prodotto a tutta altezza e attaccate una all'altra (come le locandine):
   niente padding né gap, così lo sfondo bianco delle foto si fonde con quello
   della striscia e non si vede stacco fra una tessera e l'altra. */
.merch-marquee{ padding:0; }
.merch-marquee .marquee__track{ gap:0; }
.merch-marquee .brand-marquee__item{ width:auto; height:calc(52px + 2*min(5vw,54px)); }
.merch-marquee .brand-marquee__item img{ width:auto; height:100%; display:block; }

/* ---------------- brands / case studies (3 fasi) ---------------- */
/* Bianco puro, non il crema condiviso da tutte le altre sezioni chiare:
   qui serve un bianco più netto, non la stessa tinta di poster/contatti. */
#brands{ background:#fff; }
/* Blu di marca sulla lista (titolo, nomi, pillole, freccia): solo qui, non
   nella scheda di dettaglio che apre ogni riga — lì il testo resta nero. */
.cases-head, .case-list{ color:var(--blue); }
.cases-head{ margin-bottom:min(4vw,44px); }
.cases-head :is(h1,h2){ font-size:var(--t-h2-long); line-height:1; }

/* Fase 1 — lista: nome grande, pillole dei servizi, freccia. */
.case-list{ border-top:1px solid var(--line); }
.case-row{
  position:relative; overflow:hidden; padding:min(4vw,34px) 0;
  border-bottom:1px solid var(--line); cursor:pointer;
}
.case-row__top{ display:flex; align-items:baseline; justify-content:space-between; gap:24px; }
.case-row__name{
  font-family:var(--f-display); font-weight:800; text-transform:uppercase; letter-spacing:-.02em;
  font-size:clamp(22px,2.6vw,36px); line-height:1; transition:color .3s, transform .3s var(--ease);
}
.case-row:hover .case-row__name{ transform:translateX(10px); }
/* Stessa taglia dei nomi eventi, stessa soglia: la riga diventa più grande
   sotto gli 860px invece di restare compressa. */
@media (max-width:860px){ .case-row__name{ font-size:clamp(24px,8vw,40px); } }
.case-row__meta{ display:flex; align-items:center; gap:20px; flex:none; }
.case-row__pill{
  font-family:var(--f-mono); font-size:var(--t-label-sm); letter-spacing:.08em; text-transform:uppercase;
  border:1px solid var(--line); border-radius:999px; padding:9px 16px; white-space:nowrap; opacity:.75;
}
.case-row__arrow{
  width:44px; height:44px; border-radius:50%; border:1px solid var(--line); flex:none;
  display:flex; align-items:center; justify-content:center; font-size:18px;
  transition:background .3s, color .3s, transform .3s var(--ease);
}
.case-row:hover .case-row__arrow{ background:var(--ink); color:var(--cream); transform:rotate(45deg); }

/* Fase 2 — hover: una riga di descrizione si apre sotto e una foto sbircia da
   destra. Solo dove c'è davvero l'hover: su telefono non serve, si passa
   direttamente al tap → fase 3. */
.case-row__desc{
  max-height:0; opacity:0; overflow:hidden; font-family:var(--f-serif); font-style:italic;
  font-size:var(--t-lead); transition:max-height .4s var(--ease), opacity .3s, margin-top .4s var(--ease);
  max-width:60ch;
}
.case-row__thumb{
  position:absolute; right:6vw; top:50%; width:200px; height:130px; object-fit:cover; border-radius:8px;
  opacity:0; transform:translateY(-50%) translateX(24px) rotate(3deg); pointer-events:none;
  box-shadow:0 20px 40px rgba(11,11,12,.2); transition:opacity .35s var(--ease), transform .35s var(--ease);
}
@media (hover:hover){
  .case-row:hover .case-row__desc{ max-height:4em; opacity:1; margin-top:10px; }
  .case-row:hover .case-row__thumb{ opacity:1; transform:translateY(-50%) translateX(0) rotate(-2deg); }
}
@media (max-width:700px){ .case-row__meta .case-row__pill{ display:none; } }

/* Fase 3 — dettaglio: pannello a schermo intero, stesso registro della
   lightbox foto ma con un contenuto ricco invece di una sola immagine. */
.case-overlay{
  position:fixed; inset:0; z-index:1000; background:var(--cream); color:var(--ink);
  overflow-y:auto; opacity:0; pointer-events:none; transform:translateY(14px);
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.case-overlay.is-open{ opacity:1; pointer-events:auto; transform:none; }
.case-overlay__inner{ max-width:1100px; margin:0 auto; padding:min(10vw,90px) 6vw min(14vw,120px); }
.case-overlay__close{
  position:fixed; top:26px; right:6vw; z-index:2; width:48px; height:48px; border-radius:50%;
  border:1px solid var(--line); background:var(--cream); cursor:pointer; font-size:18px;
}
.case-overlay__eyebrow{ font-family:var(--f-mono); font-size:var(--t-label); letter-spacing:.16em; text-transform:uppercase; opacity:.6; }
.case-overlay__title{ font-size:var(--t-display); line-height:.9; margin-top:16px; }
/* La descrizione non riempie mai tutta la larghezza (max-width in ch): lo
   spazio vuoto a destra ospita il numero a slot, invece di restare vuoto. */
.case-overlay__head{ display:flex; justify-content:space-between; align-items:flex-end; gap:32px; flex-wrap:wrap; }
.case-overlay__subtitle{ font-family:var(--f-serif); font-style:italic; font-size:var(--t-lead); margin-top:20px; max-width:50ch; }
.case-overlay__stat{ flex:none; text-align:right; color:var(--blue); }
.case-overlay__stat-num{ font-family:var(--f-display); font-weight:900; font-size:clamp(40px,5vw,72px); line-height:1; }
.case-overlay__stat-label{
  font-family:var(--f-mono); font-size:var(--t-label); letter-spacing:.08em; text-transform:uppercase;
  max-width:22ch; margin:6px 0 0 auto;
}
@media (max-width:700px){
  .case-overlay__head{ flex-direction:column; align-items:flex-start; }
  .case-overlay__stat{ text-align:left; }
  .case-overlay__stat-label{ margin-left:0; }
}
/* Griglia di miniature invece di un'unica foto grande: si vedono più scatti
   subito, senza dover aprire la lightbox solo per capire cosa c'è. Ogni
   miniatura apre comunque la lightbox completa, sul proprio indice. */
.case-overlay__gallery{
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:min(6vw,54px);
}
.case-overlay__thumb{
  display:block; width:100%; aspect-ratio:4/3; border:0; padding:0;
  border-radius:8px; overflow:hidden; cursor:pointer; background:var(--ink-soft); position:relative;
}
.case-overlay__thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s var(--ease); }
.case-overlay__thumb:hover img{ transform:scale(1.05); }
.case-overlay__thumb--empty{ grid-column:1 / -1; aspect-ratio:21/9; cursor:default; }
.case-overlay__thumb .soon{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--f-mono); font-size:var(--t-label); letter-spacing:.1em; text-transform:uppercase;
  color:var(--cream); opacity:.6;
}
@media (max-width:700px){ .case-overlay__gallery{ grid-template-columns:repeat(2,1fr); } }
.case-overlay__tags{ display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.case-overlay__bar{
  display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:min(6vw,54px);
  padding-top:28px; border-top:1px solid var(--line);
}
.case-overlay__bar span{ display:block; font-family:var(--f-mono); font-size:var(--t-label-sm); letter-spacing:.1em; text-transform:uppercase; opacity:.62; } /* .55 = 4,2:1 sulla crema, sotto soglia */
.case-overlay__bar b{ display:block; margin-top:8px; font-weight:600; line-height:1.4; }
@media (max-width:700px){
  .case-overlay__bar{ grid-template-columns:1fr 1fr; row-gap:28px; }
  /* Su telefono l'occhiello va su due righe e la prima passava sotto la X. */
  .case-overlay__eyebrow{ padding-right:64px; }
}

/* ---------------- artists ---------------- */
.artists-title{ font-size:var(--t-h2-long); line-height:1; max-width:20ch; }

/* Scheda artista: stesso overlay dei case study, contenuto diverso — foto
   tonda + nome invece del titolo enorme, poi la biografia a paragrafi. */
.artist-overlay__top{ display:flex; align-items:center; gap:24px; }
.artist-overlay__photo{ width:96px; height:96px; border-radius:50%; object-fit:cover; flex:none; }
/* Team senza foto ancora pronte: cerchio pieno con le iniziali al posto
   dell'immagine, stesso riquadro di .artist-overlay__photo. */
.artist-overlay__photo--badge{
  display:flex; align-items:center; justify-content:center;
  background:var(--blue); color:var(--cream);
  font-family:var(--f-display); font-weight:800; font-size:28px;
}
.artist-overlay__title{ font-size:var(--t-h2); line-height:1; margin-top:6px; }
.artist-overlay__bio{ margin-top:min(6vw,54px); max-width:68ch; }
.artist-overlay__bio p{ font-family:var(--f-serif); font-size:var(--t-lead); line-height:1.6; }
.artist-overlay__bio p + p{ margin-top:1.1em; }

/* Roster come mazzo di figurine: scorrimento orizzontale con snap, non più
   una griglia fissa. Ogni carta è la foto intera (niente ritaglio quadrato:
   qui la foto è la carta), col nome sopra e Instagram nell'angolo. */
.roster{
  display:flex; gap:18px; margin-top:min(6vw,64px);
  overflow-x:auto; scroll-snap-type:x proximity; padding-bottom:8px;
  scrollbar-width:thin; scrollbar-color:var(--line-on-dark) transparent;
}
.card{
  flex:none; scroll-snap-align:start; position:relative; overflow:hidden;
  width:min(52vw,200px); aspect-ratio:3/4.3; border-radius:14px;
  background:var(--blue-deep); border:1px solid var(--line-on-dark);
  cursor:pointer; transition:transform .3s var(--ease);
}
/* "Si allarga" al passaggio del mouse: scala invece di solo sollevarsi, e
   sale di z-index così non finisce sotto le carte vicine mentre cresce. */
.card:hover{ transform:translateY(-6px) scale(1.08); z-index:1; }
.card__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.card__badge{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--f-display); font-weight:800; font-size:15vw; color:rgba(245,242,232,.5);
  background:repeating-linear-gradient(135deg, rgba(0,0,0,.08) 0 14px, transparent 14px 28px);
}
.card__scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(11,11,12,.55) 0%, transparent 30%, transparent 68%, rgba(11,11,12,.65) 100%); }
.card__name{
  position:absolute; top:16px; left:16px; right:60px; z-index:1;
  font-family:var(--f-display); font-weight:800; text-transform:uppercase; letter-spacing:-.01em;
  font-size:clamp(17px,2vw,22px); line-height:1.05; color:var(--cream);
}
.card__role{ position:absolute; bottom:16px; left:16px; z-index:1; font-family:var(--f-mono); font-size:var(--t-label-sm); letter-spacing:.08em; text-transform:uppercase; color:var(--cream); opacity:.75; }
.card__ig{
  position:absolute; bottom:14px; right:14px; z-index:1; width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; background:rgba(11,11,12,.5); backdrop-filter:blur(4px);
  border:1px solid rgba(245,242,232,.3); transition:background .25s, transform .25s var(--ease), border-color .25s;
}
.card__ig svg{ width:18px; height:18px; fill:var(--cream); }
.card__ig:hover{ background:var(--blue); border-color:var(--blue); transform:scale(1.1); }

/* ---------------- team ---------------- */
/* Due rese della stessa lista (vedi main.js): su desktop le stesse due
   colonne e la stessa riga cliccabile della sezione eventi (.ev-columns/
   .ev-row, riusate di peso — il click apre la bio invece della gallery);
   su telefono il mazzo di carte come il Roster. Mai insieme. */
.team-head{ margin-bottom:min(4vw,44px); }
@media (max-width:860px){ .team-editorial{ display:none; } }
@media (min-width:861px){ .team-namelist{ display:none; } }

/* Telefono: niente foto ancora, quindi niente carte — solo i nomi, grandi,
   un tap apre la bio intera (stesso overlay del desktop). */
.team-namelist{ list-style:none; margin:0; padding:0; }
.team-namelist li{ border-bottom:1px solid var(--line-on-dark); }
.team-namelist__btn{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px; flex-wrap:wrap;
  width:100%; background:none; border:0; padding:22px 0; text-align:left; cursor:pointer; color:var(--cream);
}
.team-namelist__btn span:first-child{
  font-family:var(--f-display); font-weight:800; text-transform:uppercase; letter-spacing:-.02em;
  font-size:clamp(24px,7vw,34px); line-height:1.02;
}
.team-namelist__aka{ font-family:var(--f-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--orange); opacity:.9; }

/* ---------------- special guest ---------------- */
/* Tutto compatto in verticale invece di due colonne che allungavano la
   sezione: nomi su una riga sola sopra, foto piccole in riga sotto. */
.collabs-list{
  list-style:none; margin:18px 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:10px 32px;
}
.collabs-list li{
  font-family:var(--f-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(15px,1.5vw,19px); line-height:1.3; letter-spacing:-.01em;
  white-space:nowrap;
}
.collabs-list a{ border-bottom:1px solid transparent; transition:border-color .25s, opacity .25s; }
.collabs-list a:hover{ border-color:var(--cream); opacity:.85; }
.collabs-photos{ display:flex; gap:10px; margin-top:24px; overflow-x:auto; }
.collabs-photos img{ flex:none; width:min(24vw,140px); aspect-ratio:4/5; object-fit:cover; border-radius:8px; }


/* ---------------- Radio Fortuna REC ---------------- */
.rec__head h2{ font-size:var(--t-h2); line-height:.96; margin-top:18px; max-width:18ch; }
/* Il più recente esce a tutta riga; i precedenti, quando arriveranno, gli si
   mettono sotto in griglia da soli (auto-fill), senza toccare il CSS. */
.rec__list{
  display:grid; gap:36px 28px; margin-top:min(5vw,56px);
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 340px), 1fr));
}
.rec-ep:first-child{ grid-column:1 / -1; }

/* Copertina + play prima del clic, iframe dopo: stesso riquadro 16:9, così la
   pagina non salta quando parte il video. */
.rec-ep__player{
  position:relative; display:block; width:100%; aspect-ratio:16/9;
  padding:0; border:0; border-radius:6px; overflow:hidden;
  background:var(--ink-soft); color:var(--cream); cursor:pointer;
}
.rec-ep__player img{
  width:100%; height:100%; object-fit:cover; filter:brightness(.8);
  transition:transform .6s var(--ease), filter .4s var(--ease);
}
.rec-ep__player:hover img, .rec-ep__player:focus-visible img{ transform:scale(1.03); filter:brightness(.95); }
.rec-ep__play{
  position:absolute; left:50%; top:50%; width:84px; height:84px; margin:-42px 0 0 -42px;
  border-radius:50%; background:var(--cream); display:grid; place-items:center;
  transition:transform .3s var(--ease);
}
.rec-ep__play svg{ width:32px; height:32px; fill:var(--ink); margin-left:4px; }
.rec-ep__player:hover .rec-ep__play{ transform:scale(1.08); }
.rec-ep__note{
  position:absolute; left:16px; bottom:14px;
  font-family:var(--f-mono); font-size:var(--t-label-sm); letter-spacing:.08em; text-transform:uppercase;
  opacity:.85; text-shadow:0 1px 8px rgba(0,0,0,.7);
}
.rec-ep__player--live{ cursor:default; }
.rec-ep__player--live iframe{ display:block; width:100%; height:100%; border:0; }

.rec-ep__meta{ display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:8px 24px; margin-top:16px; }
.rec-ep__num{ font-family:var(--f-mono); font-size:var(--t-label); letter-spacing:.14em; text-transform:uppercase; opacity:.7; }
.rec-ep__dj{ font-size:var(--t-h3); line-height:1.05; margin-top:4px; }
/* Sottolineato invece del bordo: così l'area toccabile può arrivare a 44px
   senza spostare la linea lontano dal testo. */
.rec-ep__sc{
  display:inline-flex; align-items:center; gap:6px; min-height:44px;
  font-family:var(--f-mono); font-size:var(--t-label); letter-spacing:.1em; text-transform:uppercase;
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:6px;
  transition:color .25s;
}
.rec-ep__sc:hover{ color:#FF7733; }

.rec__follow{ display:flex; flex-wrap:wrap; gap:14px; margin-top:min(5vw,48px); }
/* Arancione SoundCloud, come il verde Spotify della Selecta: è l'azione
   principale della sezione, quella per cui vogliamo farci seguire. YouTube
   resta secondario, a contorno, per non avere due richiami che si contendono
   lo stesso sguardo. Testo scuro: sull'arancione il bianco non arriva a 4,5:1. */
.btn.btn--soundcloud{ background:#FF5500; color:var(--ink); }
.btn.btn--soundcloud:hover{ background:#FF7733; }
/* .btn.btn--… e non solo .btn--…: lo stile base .btn sta più in basso nel file
   (sezione contatti) e a parità di peso vincerebbe lui. */
.btn.btn--ghost{ background:transparent; color:var(--cream); box-shadow:inset 0 0 0 1px var(--line-on-dark); }
.btn.btn--ghost:hover{ background:var(--cream); color:var(--ink); }

@media (max-width:560px){
  .rec-ep__play{ width:68px; height:68px; margin:-34px 0 0 -34px; }
  .rec-ep__play svg{ width:26px; height:26px; }
  .rec__follow .btn{ width:100%; justify-content:center; }
}

/* ---------------- contact ---------------- */
.contact-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:6vw; }
.contact-copy :is(h1,h2){ font-size:var(--t-h2); line-height:.96; letter-spacing:-.03em; margin-top:14px; }
.contact-copy p{ font-size:var(--t-lead); line-height:1.45; margin-top:18px; max-width:40ch; }
.contact-copy .big-email{ display:inline-block; margin-top:26px; font-family:var(--f-display); font-weight:800; text-transform:uppercase; font-size:clamp(22px,2.6vw,32px); border-bottom:3px solid var(--ink); }

.form{ display:flex; flex-direction:column; gap:16px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field label{ font-family:var(--f-mono); font-size:var(--t-label-sm); letter-spacing:.1em; text-transform:uppercase; opacity:.7; }
.field input, .field textarea{
  font-family:var(--f-serif); font-size:18px; background:transparent; border:0; border-bottom:1px solid var(--line);
  padding:10px 2px; color:var(--ink); resize:none; font-style:italic;
}
.field input::placeholder, .field textarea::placeholder{ color:rgba(11,11,12,.32); }
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--blue); }
.submit-row{ display:flex; align-items:center; justify-content:space-between; margin-top:6px; gap:20px; flex-wrap:wrap; }
.btn{
  font-family:var(--f-mono); font-size:var(--t-label); letter-spacing:.1em; text-transform:uppercase;
  background:var(--ink); color:var(--cream); border:0; padding:16px 30px; border-radius:999px; cursor:pointer;
  display:inline-flex; align-items:center; gap:10px; transition:background .25s, color .25s, transform .25s;
}
.btn:hover{ background:var(--blue); transform:translateY(-2px); }
.form-note{ font-family:var(--f-mono); font-size:var(--t-label-sm); opacity:.6; line-height:1.5; }
/* Alternative all'app di posta, mostrate dopo il clic su Invia. */
.form-status:empty{ display:none; }
.form-status{ margin-top:4px; padding-top:14px; border-top:1px solid var(--line); }
.form-status p{ margin:0 0 12px; font-size:16px; line-height:1.5; }
.form-status__actions{ display:flex; flex-wrap:wrap; gap:10px; }
.btn.btn--outline{ background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); padding:12px 20px; }
.btn.btn--outline:hover{ background:var(--ink); color:var(--cream); }

@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; } .form-row{ grid-template-columns:1fr; } }

/* ---------------- home: teaser delle pagine ---------------- */
.teasers__head{ margin-bottom:min(4vw,40px); }
.teasers__head h2{ font-size:var(--t-h2-long); line-height:1; margin-top:12px; }
.teasers__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:min(2vw,22px); }
.teaser{
  position:relative; display:block; overflow:hidden; border-radius:16px;
  aspect-ratio:4/5; background:var(--ink); color:var(--cream); isolation:isolate;
}
.teaser__img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .8s var(--ease);
}
.teaser:hover .teaser__img{ transform:scale(1.05); }
.teaser__scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(11,11,12,.12) 0%, rgba(11,11,12,0) 25%, rgba(11,11,12,.6) 55%, rgba(11,11,12,.92) 100%); }
.teaser__body{
  position:absolute; left:0; right:0; bottom:0; z-index:1;
  display:flex; flex-direction:column; gap:8px; padding:min(2.4vw,28px);
}
.teaser__eyebrow{ font-family:var(--f-mono); font-size:var(--t-label-sm); letter-spacing:.14em; text-transform:uppercase; opacity:.8; }
.teaser__title{ font-family:var(--f-display); font-weight:900; text-transform:uppercase; letter-spacing:-.025em; font-size:clamp(36px,4vw,64px); line-height:.92; }
.teaser__text{ font-size:16px; line-height:1.45; opacity:.9; max-width:32ch; }
.teaser__cta{
  align-self:flex-start; margin-top:8px; display:inline-flex; gap:8px;
  font-family:var(--f-mono); font-size:var(--t-label-sm); letter-spacing:.1em; text-transform:uppercase;
  background:var(--cream); color:var(--ink); border-radius:999px; padding:11px 18px;
  transition:background .25s, color .25s;
}
.teaser:hover .teaser__cta{ background:var(--blue); color:var(--cream); }
@media (max-width:860px){
  .teasers__grid{ grid-template-columns:1fr; gap:14px; }
  .teaser{ aspect-ratio:5/4; }
  .teaser__body{ padding:20px; }
  .teaser__title{ font-size:clamp(34px,10vw,48px); }
}

/* ---------------- selecta ---------------- */
.selecta{ text-align:center; }
.selecta h2{ font-size:var(--t-h2); line-height:1; margin-top:18px; }
/* Verde Spotify, non il bottone scuro standard: è l'unica azione della
   sezione ed è più riconoscibile legata al colore del brand che apre. */
.btn--follow{
  margin-top:40px;
  background:#1DB954; color:#0B0B0C;
  text-decoration:none;
}
.btn--follow:hover{ background:#1ED760; transform:translateY(-2px); }
/* Ogni player prende al massimo 480px ed è centrato: con una sola playlist resta
   una colonna compatta invece di stirarsi su tutta la larghezza della sezione;
   se un giorno se ne aggiunge un'altra, si affianca da sola (auto-fit). Su
   telefono una sotto l'altra, a 352px, l'altezza standard di Spotify. */
.selecta-embeds{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 480px));
  justify-content:center; gap:20px; margin-top:48px; text-align:left;
}
.selecta-embed{ border-radius:14px; overflow:hidden; }
@media (max-width:860px){
  .selecta-embeds{ grid-template-columns:1fr; gap:16px; }
  .selecta-embed iframe{ height:352px; }
}

/* ---------------- footer ---------------- */
.footer{ padding:min(9vw,110px) 0 46px; }
.footer__wordmark{ margin-bottom:8px; }
.footer__wordmark img{
  width:min(62vw, 720px); height:auto;
  /* Il logo è blu: su fondo quasi nero sparirebbe. brightness(0) lo appiattisce
     a nero pieno, invert(1) lo ribalta in bianco, che sulla crema del sito
     legge come il resto del footer. */
  filter:brightness(0) invert(1);
  opacity:.94;
}
.footer__row{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-top:0; padding-top:26px; border-top:1px solid var(--line-on-dark); }
.footer__links{ display:flex; gap:26px; flex-wrap:wrap; font-family:var(--f-mono); font-size:var(--t-label-sm); letter-spacing:.1em; text-transform:uppercase; opacity:.7; }
.footer__links a:hover{ opacity:.5; }
.footer__top{ font-family:var(--f-mono); font-size:var(--t-label-sm); letter-spacing:.1em; text-transform:uppercase; opacity:.7; cursor:pointer; }
/* 12px a opacità .4 su nero era 3,5:1: sotto la soglia di lettura. A 13px e .6
   passa 6,6:1 e resta comunque il testo più sommesso del footer. */
.footer__credits{ margin-top:26px; font-family:var(--f-mono); font-size:var(--t-label); letter-spacing:.04em; opacity:.6; line-height:1.9; }

/* ---------------- legal page (privacy & cookie policy) ---------------- */
.legal-nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 6vw; border-bottom:1px solid var(--line);
}
.legal-nav__logo img{ height:26px; width:auto; }
.legal-nav__back{ font-family:var(--f-mono); font-size:var(--t-label-sm); letter-spacing:.1em; text-transform:uppercase; opacity:.7; }
.legal-nav__back:hover{ opacity:1; }
.legal{ max-width:760px; margin:0 auto; padding:64px 6vw 110px; }
.legal__updated{ font-family:var(--f-mono); font-size:var(--t-label-sm); opacity:.6; margin:10px 0 48px; }
.legal h1{ font-size:var(--t-h2-long); }
.legal h2{ font-family:var(--f-display); font-weight:800; text-transform:uppercase; letter-spacing:-.01em; font-size:24px; margin:44px 0 14px; }
.legal h2:first-of-type{ margin-top:0; }
.legal p, .legal li{ font-size:17px; line-height:1.75; }
.legal ul{ padding-left:22px; margin:14px 0; }
.legal li{ margin-bottom:8px; }
.legal a{ color:var(--blue); text-decoration:underline; text-underline-offset:3px; }

/* ---------------- lightbox ---------------- */
.lightbox{
  position:fixed; inset:0; z-index:1000; background:rgba(6,6,7,.96); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .35s var(--ease);
}
.lightbox.is-open{ opacity:1; pointer-events:auto; }
/* Le frecce stanno 70px fuori dalla cornice e la X 70px sopra: la cornice deve
   lasciare quello spazio, altrimenti fra 760 e ~1270px (tablet, portatili
   piccoli) finivano mezze fuori dallo schermo. */
.lightbox__frame{ position:relative; width:min(88vw, calc(100vw - 180px), 1100px); height:min(82vh, calc(100vh - 160px), 820px); display:flex; align-items:center; justify-content:center; }
.lightbox__img{ max-width:100%; max-height:100%; object-fit:contain; border-radius:4px; opacity:0; transition:opacity .3s; }
.lightbox__img.is-on{ opacity:1; }
.lightbox__close, .lightbox__prev, .lightbox__next{
  position:absolute; background:none; border:1px solid var(--line-on-dark); color:var(--cream); border-radius:50%;
  width:52px; height:52px; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:18px;
  transition:background .25s, border-color .25s;
}
.lightbox__close:hover, .lightbox__prev:hover, .lightbox__next:hover{ background:rgba(245,242,232,.12); border-color:var(--cream); }
.lightbox__close{ top:-70px; right:0; }
.lightbox__prev{ left:-70px; top:50%; transform:translateY(-50%); }
.lightbox__next{ right:-70px; top:50%; transform:translateY(-50%); }
.lightbox__count{ position:absolute; bottom:-46px; left:0; font-family:var(--f-mono); font-size:var(--t-label-sm); letter-spacing:.1em; color:var(--cream); opacity:.6; }
.lightbox__title{ position:absolute; bottom:-46px; right:0; font-family:var(--f-mono); font-size:var(--t-label-sm); letter-spacing:.1em; text-transform:uppercase; color:var(--cream); opacity:.6; }
/* Con una foto sola (artisti) frecce e contatore non hanno niente da fare. */
.lightbox.is-single .lightbox__prev, .lightbox.is-single .lightbox__next, .lightbox.is-single .lightbox__count{ display:none; }
/* Telefono: frecce e X non più sopra la foto e in alto, ma in una fila sotto
   la cornice, dove arriva il pollice; contatore e titolo salgono sopra. La
   cornice prende tutta l'altezza che resta, e toccare il vuoto intorno alla
   foto chiude (main.js). Solo in verticale: col telefono girato l'altezza è
   poca e la disposizione da desktop (frecce ai lati) lascia la foto più grande. */
@media (max-width:760px) and (orientation:portrait){
  .lightbox__frame{ width:92vw; height:calc(100svh - 200px); }
  .lightbox__prev, .lightbox__next, .lightbox__close{ top:auto; bottom:-78px; transform:none; }
  .lightbox__prev{ left:0; } .lightbox__next{ right:0; }
  .lightbox__close{ right:auto; left:calc(50% - 26px); }
  .lightbox__count, .lightbox__title{ bottom:auto; top:-40px; }
  .lightbox__title{ left:6.5em; text-align:right; } /* non sotto al contatore se va a capo */
  .lightbox.is-single .lightbox__title{ left:0; }
}

/* ================= MOBILE: TAB BAR + MAZZO DI CARTE =================
   Solo sotto 861px. La tab bar fissa in basso porta alle pagine del sito
   (Home, Eventi, Brand, Roster, Contatti): sono link normali, la pagina
   corrente ha aria-current="page". */
.tabbar{ display:none; }
@media (max-width:860px){
  .tabbar{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:500;
    background:rgba(11,11,12,.92); backdrop-filter:blur(10px);
    border-top:1px solid var(--line-on-dark);
    padding:8px max(6px, env(safe-area-inset-left)) max(8px, env(safe-area-inset-bottom));
  }
  .tabbar__btn{
    flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:4px;
    color:var(--cream); opacity:.55; padding:8px 2px;
    font-family:var(--f-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase;
  }
  .tabbar__btn svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6; }
  .tabbar__btn[aria-current="page"]{ opacity:1; color:var(--orange); }

  /* La barra copre gli ultimi ~76px dello schermo: il footer si allunga di
     altrettanto, così le ultime righe non finiscono sotto la barra. */
  .footer{ padding-bottom:calc(46px + 76px + env(safe-area-inset-bottom)); }

  /* Sotto 861px la lista a righe lascia il posto al mazzo di carte. */
  .ev-columns, .case-list{ display:none; }
}
@media (min-width:861px){ .deck, .deck__count, .deck__hint{ display:none; } }

.deck{ position:relative; height:min(60vh, 460px); max-width:340px; margin:0 auto; touch-action:pan-y; }
.deck__count{
  text-align:center; margin-top:18px; font-family:var(--f-mono); font-size:var(--t-label-sm);
  letter-spacing:.1em; text-transform:uppercase; opacity:.6;
}
.deck__hint{ text-align:center; margin-top:4px; font-family:var(--f-mono); font-size:var(--t-label-sm); opacity:.4; }
.deck__card{
  position:absolute; inset:0;
  transform:scale(calc(1 - var(--i) * .04)) translateY(calc(var(--i) * 14px));
  transition:transform .35s var(--ease), opacity .35s;
  z-index:calc(99 - var(--i));
  opacity:calc(1 - var(--i) * .25);
}
.deck__card:nth-child(n+5){ opacity:0; }
.deck__card.is-flying-left{ transform:translateX(-140%) rotate(-18deg) !important; opacity:0 !important; }
.deck__card.is-flying-right{ transform:translateX(140%) rotate(18deg) !important; opacity:0 !important; }
.deck__flip{
  position:relative; width:100%; height:100%; cursor:grab;
  -webkit-transform-style:preserve-3d; transform-style:preserve-3d; transition:transform .5s var(--ease);
}
.deck__flip.is-flipped{ transform:rotateY(180deg); }
.deck__face{
  position:absolute; inset:0; overflow:hidden; border-radius:18px;
  /* Safari (anche su iOS) ignora backface-visibility senza il prefisso: senza
     -webkit- il retro "sbagliato" resta visibile, specchiato, sotto quello
     giusto — è esattamente il testo doppio/capovolto segnalato su iPhone. */
  -webkit-backface-visibility:hidden; backface-visibility:hidden;
  box-shadow:0 20px 40px rgba(0,0,0,.35);
}
.deck__face--front{ background:var(--ink-soft); }
.deck__face--back{
  transform:rotateY(180deg); color:var(--cream);
  background:linear-gradient(155deg, var(--blue) 0%, var(--blue-deep) 100%);
  padding:22px 20px 18px; display:flex; flex-direction:column;
}
/* Trifoglio a filigrana, solo decorativo: dà al retro la stessa identità
   visiva del resto del sito invece di essere un blocco di testo anonimo. */
.deck__face--back::after{
  content:''; position:absolute; right:-14px; bottom:-14px; width:130px; height:130px;
  background:var(--cream); opacity:.07; pointer-events:none;
  -webkit-mask:url(../assets/clover.png) center/contain no-repeat;
  mask:url(../assets/clover.png) center/contain no-repeat;
}
.deck__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.deck__scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(11,11,12,.5) 0%, transparent 32%, transparent 62%, rgba(11,11,12,.75) 100%); }
.deck__name{
  position:absolute; left:20px; right:20px; bottom:20px; z-index:1;
  font-family:var(--f-display); font-weight:800; text-transform:uppercase; letter-spacing:-.02em;
  font-size:clamp(22px,6.4vw,30px); line-height:1.02; color:var(--cream);
}
.deck__eyebrow{
  position:absolute; left:20px; top:18px; z-index:1;
  font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; opacity:.75; color:var(--cream);
}
.deck__back-top{ position:relative; z-index:1; flex:none; padding-bottom:14px; border-bottom:1px solid var(--line-on-blue); }
.deck__back-eyebrow{ font-family:var(--f-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; opacity:.65; }
.deck__back-name{ font-family:var(--f-display); font-weight:800; text-transform:uppercase; font-size:clamp(18px,5.6vw,23px); line-height:1.05; margin-top:5px; }
.deck__back-body{ position:relative; z-index:1; flex:1; min-height:0; overflow-y:auto; margin-top:14px; }
.deck__back-stat{ font-family:var(--f-mono); font-size:15px; letter-spacing:.04em; opacity:.92; }
.deck__back-stat .odometer{ font-family:var(--f-display); font-weight:800; font-size:1.3em; }
.deck__back-stat .deck__back-stat-label{ font-size:11px; text-transform:uppercase; letter-spacing:.05em; opacity:.75; display:block; margin-top:2px; }
.deck__back-desc{ font-family:var(--f-serif); font-style:italic; font-size:13px; line-height:1.5; margin-top:12px; opacity:.9; }
.deck__back-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.deck__back-tags span{ font-family:var(--f-mono); font-size:9px; letter-spacing:.05em; text-transform:uppercase; border:1px solid var(--line-on-blue); border-radius:999px; padding:4px 9px; opacity:.85; }
.deck__detail-btn{
  position:relative; z-index:1; flex:none; margin-top:14px; width:100%; text-align:center;
  font-family:var(--f-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  background:var(--cream); color:var(--ink); border:0; border-radius:999px; padding:12px 18px; cursor:pointer;
}

#panelEvents .deck{ margin-top:8px; }