/* Radio Caffè Criminale — prima pagina v0.5 (26/10/2026): la v0.3 alleggerita.
   Notte e giallo, apertura a tutto schermo, scorrimento morbido (Lenis) e passaggio animato all'articolo;
   senza sipario, senza pagina bloccata, senza puntatore personalizzato; menu delle sezioni nella barra. */
@font-face{font-family:"Newsreader";src:url(../fonts/newsreader-normal.woff2) format("woff2");font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url(../fonts/newsreader-italic.woff2) format("woff2");font-weight:400 600;font-style:italic;font-display:swap}
@font-face{font-family:"Inter";src:url(../fonts/inter.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(../fonts/barlow-condensed-600.woff2) format("woff2");font-weight:600;font-display:swap}

:root{
  --giallo:#ffde00;
  --nero:#0b0b0a;
  --notte:#151513;
  --osso:#f2eee4;
  --fumo:#9a968a;
  --linea:rgba(242,238,228,.14);
  --rosso:#ff3b2f;
  --serif:"Newsreader",Georgia,serif;
  --sans:"Inter",system-ui,sans-serif;
  --cond:"Barlow Condensed","Arial Narrow",sans-serif;
  --gut:clamp(16px,4vw,56px);
  --molla:cubic-bezier(.2,.8,.2,1);
}

/* passaggio tra le pagine: la foto cliccata diventa la foto dell'articolo */
@view-transition{navigation:auto}
::view-transition-old(root){animation:.35s ease both vt-esce}
::view-transition-new(root){animation:.55s var(--molla) both vt-entra}
::view-transition-group(foto){animation-duration:.7s;animation-timing-function:cubic-bezier(.7,0,.2,1)}
@keyframes vt-esce{to{opacity:0}}
@keyframes vt-entra{from{opacity:0;transform:translateY(28px)}}

*{box-sizing:border-box}
html{background:var(--nero);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--nero);color:var(--osso);font:17px/1.55 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit;color:inherit}
::selection{background:var(--giallo);color:var(--nero)}
.g{padding-inline:var(--gut)}
.occhiello{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font:600 13px/1 var(--cond);letter-spacing:.16em;text-transform:uppercase;color:var(--fumo)}
.occhiello b{font-weight:600;color:var(--giallo)}
.pal{width:8px;height:8px;border-radius:50%;background:var(--rosso);flex:none;animation:pulsa 1.8s ease-out infinite}
@keyframes pulsa{0%{box-shadow:0 0 0 0 rgba(255,59,47,.6)}100%{box-shadow:0 0 0 12px rgba(255,59,47,0)}}
.freccia{width:18px;height:18px;flex:none;transition:transform .35s var(--molla)}
a:hover>.freccia,a:hover .freccia{transform:translateX(5px)}

/* grana di pellicola sopra tutto */
.grana{position:fixed;inset:-60%;z-index:95;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grana .9s steps(5) infinite}
@keyframes grana{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-5%)}60%{transform:translate(-6%,-2%)}80%{transform:translate(5%,4%)}}

/* barra in alto */
.barra{position:fixed;top:0;left:0;right:0;z-index:85;transition:transform .5s var(--molla),background .4s,backdrop-filter .4s}
.barra-in{height:72px;display:flex;align-items:center;gap:28px}
/* riga della testata: data e registrazione, come in un quotidiano */
.riga-testata{display:flex;justify-content:space-between;align-items:center;gap:20px;height:32px;overflow:hidden;border-bottom:1px solid rgba(242,238,228,.18);font:500 12px/1 var(--sans);color:#d9d4c6;transition:height .4s var(--molla),opacity .3s,border-color .3s}
.riga-testata .reg{color:#b9b4a6}
.riga-testata .reg-breve{display:none;color:#b9b4a6}
.riga-testata .soc{display:flex;gap:16px}
.riga-testata a:hover{color:var(--giallo)}
.barra.piena .riga-testata{height:0;opacity:0;border-color:transparent}
@media(max-width:900px){.riga-testata .soc,.riga-testata .reg{display:none}.riga-testata .reg-breve{display:inline}.riga-testata{font-size:11px;white-space:nowrap}}
.barra.piena{background:rgba(11,11,10,.88);backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);border-bottom:1px solid var(--linea)}
.barra.via{transform:translateY(-100%)}
.menu-aperto .barra{transform:none;background:none;backdrop-filter:none;border-color:transparent}
.marchio{display:flex;align-items:center;gap:12px;font:600 17px/.9 var(--cond);letter-spacing:.06em;text-transform:uppercase}
.marchio img{width:42px;height:42px;border-radius:50%}
.oggi{font:500 13px/1 var(--sans);color:var(--fumo)}
.rapida{display:flex;gap:4px;margin-left:auto}
.rapida a{position:relative;padding:10px 11px;white-space:nowrap;font:600 14px/1 var(--cond);letter-spacing:.14em;text-transform:uppercase;color:#cfcab9}
.rapida a::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:2px;background:var(--giallo);transform:scaleX(0);transform-origin:right;transition:transform .4s var(--molla)}
.rapida a:hover{color:var(--osso)}
.rapida a:hover::after{transform:scaleX(1);transform-origin:left}
.pillola{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 18px;border-radius:999px;background:var(--giallo);color:var(--nero);font:600 14px/1 var(--cond);letter-spacing:.14em;text-transform:uppercase;border:0;cursor:pointer}
.menu-btn{display:flex;align-items:center;gap:12px;height:44px;padding:0 4px 0 14px;border:1px solid var(--linea);border-radius:999px;background:none;cursor:pointer;font:600 14px/1 var(--cond);letter-spacing:.14em;text-transform:uppercase}
.menu-btn .linee{position:relative;width:36px;height:36px;border-radius:50%;background:var(--osso)}
.menu-btn .linee i{position:absolute;left:11px;right:11px;height:2px;background:var(--nero);transition:transform .45s var(--molla),top .45s var(--molla)}
.menu-btn .linee i:first-child{top:14px}.menu-btn .linee i:last-child{top:20px}
.menu-aperto .menu-btn .linee i:first-child{top:17px;transform:rotate(45deg)}
.menu-aperto .menu-btn .linee i:last-child{top:17px;transform:rotate(-45deg)}
@media(max-width:1500px){.oggi{display:none}}
@media(max-width:1180px){.rapida{display:none}.pillola{margin-left:auto}}
@media(max-width:560px){.barra-in{height:62px;gap:10px}.marchio span{display:none}.menu-btn em{display:none}.menu-btn{padding:0 4px;border:0}.pillola{height:40px;padding:0 14px}}

/* equalizzatore (si muove durante l'ascolto) */
.eq{display:inline-flex;align-items:flex-end;gap:2px;height:14px}
.eq i{width:3px;height:40%;background:currentColor;border-radius:1px}
.in-ascolto .eq i{animation:eq .8s ease-in-out infinite alternate}
.in-ascolto .eq i:nth-child(2){animation-delay:-.3s}.in-ascolto .eq i:nth-child(3){animation-delay:-.55s}
@keyframes eq{from{height:20%}to{height:100%}}

/* menu a tutto schermo */
.menu{position:fixed;inset:0;z-index:84;background:var(--nero);padding:120px var(--gut) 32px;display:grid;grid-template-rows:1fr auto;gap:32px;overflow:auto}
.menu[hidden]{display:none}
.menu ol{list-style:none;margin:0;padding:0;columns:2;column-gap:6vw;counter-reset:v}
.menu li{break-inside:avoid;overflow:hidden;counter-increment:v}
.menu li a{display:inline-flex;align-items:baseline;gap:14px;padding:4px 0;font:600 clamp(40px,6.2vw,100px)/1 var(--cond);text-transform:uppercase;transition:color .25s}
.menu li a::before{content:counter(v,decimal-leading-zero);font:500 14px/1 var(--sans);color:var(--fumo)}
.menu li a:hover{color:var(--giallo)}
.menu-piede{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-top:24px;border-top:1px solid var(--linea);font:500 13px/1.5 var(--sans);color:var(--fumo)}
.menu-piede nav{display:flex;gap:20px}
.menu-piede a:hover{color:var(--giallo)}
@media(max-width:700px){.menu ol{columns:1}.menu li a{font-size:44px}}

/* apertura */
.apertura{position:relative;height:100svh;min-height:620px;overflow:hidden;display:flex;align-items:flex-end}
.ap-foto{position:absolute;inset:0;overflow:hidden}
.ap-foto img{width:100%;height:115%;object-fit:cover;object-position:50% 40%}
.apertura::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent 45%,rgba(11,11,10,.55)),linear-gradient(180deg,rgba(11,11,10,.6) 0,rgba(11,11,10,0) 26%,rgba(11,11,10,.25) 52%,rgba(11,11,10,.95) 100%)}
.ap-testo{position:relative;z-index:2;width:100%;padding-bottom:clamp(88px,11vh,130px);display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,350px);gap:clamp(32px,4vw,72px);align-items:end}
.ap-princ{min-width:0}
.ap-colonna{border-left:1px solid rgba(242,238,228,.3);padding-left:28px}
.ap-colonna ol{list-style:none;margin:16px 0 0;padding:0}
.ap-colonna li a{display:block;padding:14px 0;border-top:1px solid rgba(242,238,228,.18)}
.ap-colonna li:first-child a{border-top:0;padding-top:2px}
.ap-colonna strong{display:block;margin-top:7px;font:500 18px/1.2 var(--serif);text-wrap:balance}
.ap-colonna a:hover strong{color:var(--giallo)}
.firma{display:block;margin-top:8px;font:500 12.5px/1.35 var(--sans);color:var(--fumo)}
.ap-sotto .firma{margin-top:12px;color:#cfcab9}
@media(max-width:1000px){.apertura::after{background:linear-gradient(180deg,rgba(11,11,10,.6) 0,rgba(11,11,10,.3) 22%,rgba(11,11,10,.82) 50%,var(--nero) 72%)}.apertura{height:auto;min-height:100svh}.ap-testo{grid-template-columns:1fr;padding-top:130px}.ap-colonna{border-left:0;padding-left:0;border-top:2px solid var(--osso);padding-top:16px}}
.ap-testo .occhiello{color:#e4dfd2;text-shadow:0 1px 10px rgba(0,0,0,.5)}
.apertura h1{margin:22px 0 0;font:500 clamp(54px,8.4vw,150px)/.88 var(--serif);letter-spacing:-.04em;max-width:13ch;text-wrap:balance}
.apertura h1.lungo{font-size:clamp(38px,4.8vw,84px);line-height:.94;max-width:20ch}
.apertura h1 a:hover{color:var(--giallo)}
.ap-sotto{display:flex;align-items:flex-end;gap:clamp(24px,4vw,64px);margin-top:30px;flex-wrap:wrap}
.ap-sotto p{margin:0;max-width:46ch;font:400 clamp(17px,1.4vw,21px)/1.45 var(--serif);color:#d9d4c6}
.leggi{display:inline-flex;align-items:center;gap:12px;height:58px;padding:0 28px;border-radius:999px;background:var(--giallo);color:var(--nero);font:600 16px/1 var(--cond);letter-spacing:.14em;text-transform:uppercase;flex:none}
.scorri-giu{position:absolute;right:var(--gut);bottom:clamp(96px,13vh,150px);z-index:2;display:flex;flex-direction:column;align-items:center;gap:14px;font:600 12px/1 var(--cond);letter-spacing:.24em;text-transform:uppercase;color:var(--fumo);writing-mode:vertical-rl}
.scorri-giu i{width:1px;height:64px;background:linear-gradient(var(--osso),var(--osso)) 0 0/100% 40% no-repeat,var(--linea);animation:goccia 1.8s ease-in-out infinite}
@keyframes goccia{0%{background-position:0 -30px}100%{background-position:0 70px}}
@media(max-width:700px){.scorri-giu{display:none}.leggi{height:52px;padding:0 22px}}

/* nastro dell'ultim'ora */
.nastro{position:relative;z-index:3;display:flex;align-items:center;height:58px;border-block:1px solid var(--linea);background:var(--nero);overflow:hidden}
.nastro .etichetta{flex:none;display:flex;align-items:center;gap:10px;height:100%;padding:0 22px 0 var(--gut);background:var(--nero);font:600 14px/1 var(--cond);letter-spacing:.16em;text-transform:uppercase;color:var(--osso);position:relative;z-index:2;box-shadow:24px 0 24px var(--nero)}
.nastro-riga{display:flex;width:max-content;will-change:transform}
.nastro-riga a{display:flex;align-items:center;gap:14px;padding:0 28px;white-space:nowrap;font:500 15px/1 var(--serif)}
.nastro-riga a time{font:600 12px/1 var(--cond);letter-spacing:.14em;color:var(--giallo)}
.nastro-riga a::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--fumo);margin-left:28px}
.nastro-riga a:hover{color:var(--giallo)}

/* titoli di sezione giganti */
.testa{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.gigante{margin:0;font:600 clamp(60px,11vw,196px)/.82 var(--cond);text-transform:uppercase;letter-spacing:-.005em}
.gigante em{font:italic 400 .64em/1 var(--serif);text-transform:none;letter-spacing:-.03em;color:var(--giallo)}
.tutti{display:inline-flex;align-items:center;gap:10px;font:600 15px/1 var(--cond);letter-spacing:.14em;text-transform:uppercase;padding-bottom:6px;border-bottom:1px solid currentColor}
.tutti:hover{color:var(--giallo)}

/* le ultime: binario orizzontale bloccato durante lo scorrimento */
.ultime-pin{display:flex;flex-direction:column;gap:clamp(28px,4vw,56px);padding-block:clamp(90px,10vw,150px) 20px}
.contatore{font:600 16px/1 var(--cond);letter-spacing:.14em;color:var(--fumo);font-variant-numeric:tabular-nums}
.contatore b{color:var(--osso);font-weight:600}
.binario-ultime{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(40px,4vw,64px) clamp(18px,2.2vw,32px);align-items:start;padding-inline:var(--gut)}
.pezzo{min-width:0}
.contatore{display:none}
.pezzo:nth-child(even){margin-top:clamp(0px,4vw,64px)}
.pezzo .foto{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:4px;background:var(--notte)}
.pezzo:nth-child(3n+2) .foto{aspect-ratio:1}
.pezzo .foto img{position:absolute;top:-8%;left:0;width:100%;height:116%;object-fit:cover;filter:grayscale(.45) contrast(1.05);transition:filter .6s}
.pezzo:hover .foto img{filter:none}
.pezzo .num{position:absolute;left:14px;top:12px;z-index:1;font:600 15px/1 var(--cond);letter-spacing:.1em;color:var(--giallo);text-shadow:0 1px 8px rgba(0,0,0,.6)}
.pezzo .occhiello{margin-top:18px}
.pezzo h3{margin:10px 0 0;font:500 clamp(21px,1.65vw,27px)/1.12 var(--serif);letter-spacing:-.01em;text-wrap:balance}
.pezzo:hover h3{color:var(--giallo)}
@media(max-width:899px){
  .ultime-pin{padding-block:88px 56px}
  .contatore{display:block}
  .binario-ultime{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:6px}
  .binario-ultime::-webkit-scrollbar{display:none}
  .pezzo{flex:none;width:76vw;scroll-snap-align:center}
  .pezzo:nth-child(even){margin-top:0}
}

/* manifesto: le parole si accendono scorrendo */
.manifesto{padding-block:clamp(110px,16vw,240px)}
.manifesto p{margin:0;max-width:22ch;font:500 clamp(34px,5vw,84px)/1.06 var(--serif);letter-spacing:-.03em}
.manifesto em{color:var(--giallo)}
.manifesto .firma{margin-top:40px}

/* le sezioni: indice con la foto che segue il puntatore */
.sezioni{padding-block:clamp(40px,6vw,90px) clamp(100px,12vw,180px)}
.filtri{display:flex;gap:8px;flex-wrap:wrap;margin-top:36px}
.filtri button{height:42px;padding:0 18px;border-radius:999px;border:1px solid var(--linea);background:none;cursor:pointer;font:600 14px/1 var(--cond);letter-spacing:.14em;text-transform:uppercase;color:var(--fumo);transition:background .3s,color .3s,border-color .3s}
.filtri button:hover{color:var(--osso);border-color:var(--osso)}
.filtri button.on{background:var(--osso);border-color:var(--osso);color:var(--nero)}
.giornale{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(36px,4vw,56px);border-top:2px solid var(--osso)}
.blocco{min-width:0;padding:22px clamp(18px,2vw,30px) 40px;border-bottom:1px solid var(--linea);border-left:1px solid var(--linea)}
.blocco.inizio{border-left:0;padding-left:0}
.blocco.fine{padding-right:0}
.blocco.largo{grid-column:span 2;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);column-gap:clamp(20px,2.4vw,36px);align-content:start}
.blocco.largo .b-testa{grid-column:1/-1}
.b-testa{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:18px}
.b-testa h3{margin:0;display:flex;align-items:center;gap:10px;font:600 22px/1 var(--cond);letter-spacing:.08em;text-transform:uppercase}
.b-testa h3::before{content:"";width:12px;height:12px;background:var(--giallo)}
.b-testa a{font:600 12.5px/1 var(--cond);letter-spacing:.14em;text-transform:uppercase;color:var(--fumo)}
.b-testa a:hover{color:var(--giallo)}
.b-lead{display:block;min-width:0}
.b-lead .foto{aspect-ratio:16/10;overflow:hidden;border-radius:3px;background:var(--notte)}
.b-lead .foto img{width:100%;height:100%;object-fit:cover;filter:grayscale(.35);transition:filter .6s,transform 1s var(--molla)}
.b-lead:hover .foto img{filter:none;transform:scale(1.04)}
.b-lead .occhiello{margin-top:14px}
.b-lead strong{display:block;margin-top:8px;font:500 clamp(21px,1.7vw,28px)/1.12 var(--serif);letter-spacing:-.015em;text-wrap:balance}
.blocco.largo .b-lead strong{font-size:clamp(26px,2.4vw,38px);line-height:1.06}
.b-lead:hover strong{color:var(--giallo)}
.b-lead p{margin:10px 0 0;font:400 16px/1.45 var(--serif);color:#cfcab9;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.b-lista{list-style:none;margin:18px 0 0;padding:0;min-width:0}
.blocco.largo .b-lista{margin-top:0}
.b-lista a{display:block;padding:14px 0;border-top:1px solid var(--linea)}
.blocco.largo .b-lista li:first-child a{border-top:0;padding-top:0}
.b-lista strong{display:block;font:500 17px/1.25 var(--serif)}
.b-lista a:hover strong{color:var(--giallo)}
@media(max-width:899px){
  .giornale{grid-template-columns:1fr}
  .blocco,.blocco.inizio,.blocco.fine{padding:22px 0 32px;border-left:0}
  .blocco.largo{grid-column:auto;grid-template-columns:1fr}
  .blocco.largo .b-lista{margin-top:18px}
  .blocco.largo .b-lista li:first-child a{border-top:1px solid var(--linea);padding-top:14px}
}
.indice{position:relative;z-index:2;list-style:none;margin:44px 0 0;padding:0;border-top:1px solid var(--linea)}
.indice a{display:grid;grid-template-columns:150px minmax(0,1fr) 170px 24px;gap:28px;align-items:center;padding:28px 0;border-bottom:1px solid var(--linea);transition:color .35s,padding .5s var(--molla)}
.indice time{font:500 13px/1 var(--sans);color:var(--fumo)}
.indice strong{font:500 clamp(22px,2.4vw,40px)/1.1 var(--serif);letter-spacing:-.02em}
.indice .cat{justify-self:end;font:600 13px/1 var(--cond);letter-spacing:.14em;text-transform:uppercase;color:var(--fumo)}
.indice img{display:none}
@media(hover:hover){.indice:hover a{color:rgba(242,238,228,.32)}.indice a:hover{color:var(--osso);padding-left:22px}.indice a:hover .freccia{color:var(--giallo)}}
.anteprima{position:fixed;left:0;top:0;z-index:1;width:min(30vw,400px);aspect-ratio:4/3;pointer-events:none;border-radius:6px;overflow:hidden;opacity:0;scale:.5;transform-origin:50% 50%;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.anteprima img{width:100%;height:100%;object-fit:cover;filter:brightness(.62) saturate(.9)}
@media(max-width:899px){
  .indice a{grid-template-columns:84px minmax(0,1fr);grid-template-rows:auto auto;gap:6px 16px;padding:18px 0}
  .indice img{display:block;grid-row:1/3;width:84px;height:84px;object-fit:cover;border-radius:4px}
  .indice time{grid-column:2;grid-row:1;align-self:end}
  .indice strong{grid-column:2;grid-row:2;align-self:start;font-size:19px}
  .indice .cat,.indice .freccia{display:none}
  .anteprima{display:none}
}

/* podcast e video: la fascia gialla si apre a tutto schermo */
.ondemand{position:relative;background:var(--giallo);color:var(--nero);padding-block:clamp(80px,10vw,150px) clamp(90px,10vw,150px);overflow:hidden}
.ondemand ::selection{background:var(--nero);color:var(--giallo)}
.od-titolo{margin:0 0 clamp(48px,7vw,110px);font:600 clamp(84px,19vw,350px)/.8 var(--cond);text-transform:uppercase;letter-spacing:-.01em;white-space:nowrap}
.od-titolo span{display:block}
.od-titolo span:last-child{text-align:right}
.od-titolo em{font:italic 400 .62em/1 var(--serif);text-transform:none;letter-spacing:-.03em}
.ondemand .occhiello{color:rgba(11,11,10,.62)}
.ondemand .occhiello b{color:var(--nero)}
.od-nuovo{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:center}
.od-cover{position:relative;width:min(70%,480px)}
.od-cover .busta{position:relative;z-index:2;width:100%;aspect-ratio:1;object-fit:cover;box-shadow:0 30px 70px rgba(0,0,0,.35)}
.vinile{position:absolute;inset:3%;z-index:1}
.vinile .giro{width:100%;height:100%;border-radius:50%;background:radial-gradient(circle,var(--giallo) 0 15%,#111 15.5% 16.5%,transparent 17%),repeating-radial-gradient(circle,#121211 0 2px,#1f1f1c 2px 3px);box-shadow:0 20px 50px rgba(0,0,0,.4)}
.vinile .giro::after{content:"";position:absolute;inset:48.6%;border-radius:50%;background:var(--nero)}
.in-ascolto .od-nuovo:has(.play.suona) .giro{animation:gira 2.4s linear infinite}
@keyframes gira{to{transform:rotate(1turn)}}
.od-testo h3{margin:16px 0 0;font:500 clamp(34px,4.4vw,72px)/1 var(--serif);letter-spacing:-.03em;text-wrap:balance}
.od-testo .onda{margin-top:clamp(26px,3vw,40px)}
.od-azioni{display:flex;align-items:center;gap:22px;margin-top:28px;flex-wrap:wrap}
.od-azioni .meta{font:500 14px/1.4 var(--sans)}
.piattaforme{display:flex;gap:8px;flex-wrap:wrap}
.piattaforme a{height:38px;display:inline-flex;align-items:center;padding:0 16px;border-radius:999px;border:1px solid rgba(11,11,10,.35);font:600 13px/1 var(--cond);letter-spacing:.14em;text-transform:uppercase}
.piattaforme a:hover{background:var(--nero);color:var(--giallo);border-color:var(--nero)}
.programmi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,28px);margin-top:clamp(80px,10vw,150px)}
.prog{position:relative;display:block}
.prog .sl{position:relative;aspect-ratio:1}
.prog .sl img{position:relative;z-index:2;width:100%;height:100%;object-fit:cover;box-shadow:0 18px 40px rgba(0,0,0,.28)}
.prog .sl .vinile{inset:6%;transition:transform .7s var(--molla)}
.prog:hover .sl .vinile{transform:translateY(-24%) rotate(40deg)}
.prog strong{display:block;margin-top:18px;font:600 clamp(22px,2vw,30px)/1 var(--cond);text-transform:uppercase}
.prog span{display:inline-flex;align-items:center;gap:8px;margin-top:8px;font:500 14px/1 var(--sans)}
.od-piede{display:flex;justify-content:center;margin-top:clamp(56px,7vw,100px)}
.od-piede .pillola{height:58px;padding:0 30px;background:var(--nero);color:var(--giallo);font-size:16px}
@media(max-width:899px){
  .od-nuovo{grid-template-columns:1fr}
  .od-cover{width:min(72%,400px)}
  .programmi{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* pulsanti play */
.play{position:relative;width:88px;height:88px;flex:none;border:0;border-radius:50%;background:var(--nero);cursor:pointer;display:grid;place-items:center}
.play::before{content:"";position:absolute;inset:-9px;border-radius:50%;border:2px solid var(--nero);opacity:0;animation:anello 2.2s ease-out infinite}
@keyframes anello{0%{transform:scale(.85);opacity:.7}100%{transform:scale(1.3);opacity:0}}
.play i{width:0;height:0;margin-left:6px;border-left:24px solid var(--giallo);border-block:15px solid transparent}
.play.suona i{width:22px;height:26px;margin:0;border:0;background:linear-gradient(90deg,var(--giallo) 0 8px,transparent 8px 14px,var(--giallo) 14px)}
.play.suona::before{animation-duration:1s}

/* onda cliccabile (player.js) */
.onda{display:flex;align-items:center;gap:2px;height:72px;cursor:pointer;--p:0}
.onda i{flex:1;min-width:1px;height:var(--h);border-radius:2px;background-color:rgba(11,11,10,.18);background-image:linear-gradient(var(--nero),var(--nero));background-repeat:no-repeat;background-size:calc(clamp(0,var(--p)*var(--n) - var(--i),1)*100%) 100%;transition:background-color .2s}
.onda:hover i{background-color:rgba(11,11,10,.32)}
.in-ascolto .onda.attiva i{animation:vibra 1.2s ease-in-out infinite alternate;animation-delay:calc(var(--i)*-37ms)}
@keyframes vibra{from{transform:scaleY(.82)}to{transform:scaleY(1.08)}}
@media(max-width:560px){.onda{gap:1px;height:56px}}

/* dossier: le schede si impilano */
.dossier{padding-block:clamp(110px,13vw,200px) clamp(60px,8vw,120px)}
.dossier .testa p{margin:0;max-width:36ch;font:400 19px/1.45 var(--serif);color:#cfcab9}
.pila{margin-top:clamp(48px,6vw,90px)}
.pila{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.dos{display:grid;grid-template-rows:clamp(220px,22vw,320px) 1fr;overflow:hidden;border-radius:14px;background:var(--notte);border:1px solid var(--linea);transition:border-color .4s,transform .6s var(--molla)}
.dos:hover{border-color:rgba(255,222,0,.45);transform:translateY(-6px)}
.dos .foto{position:relative;overflow:hidden}
.dos .foto img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.12) brightness(.85);transition:filter .8s}
.dos:hover .foto img{filter:grayscale(.2) contrast(1.05)}
.dos .foto .n{position:absolute;left:20px;bottom:14px;font:600 clamp(64px,6vw,104px)/.8 var(--cond);color:var(--giallo)}
.dos .testo{display:flex;flex-direction:column;padding:clamp(20px,2.2vw,32px)}
.dos h3{margin:14px 0 0;font:600 clamp(40px,3.6vw,62px)/.86 var(--cond);text-transform:uppercase}
.dos .testo>p{margin:12px 0 0;font:400 16.5px/1.45 var(--serif);color:#cfcab9}
.dos ul{list-style:none;margin:auto 0 0;padding:24px 0 0}
.dos li a{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-top:1px solid var(--linea);font:500 15.5px/1.3 var(--serif)}
.dos li a:hover{color:var(--giallo)}
@media(max-width:899px){
  .pila{grid-template-columns:1fr}
  .dos{grid-template-rows:200px 1fr}
  .dos h3{font-size:44px}
  .dos li:nth-child(n+3){display:none}
}

/* video */
.video{padding-block:clamp(80px,10vw,150px)}
.rullo{display:flex;gap:clamp(16px,2vw,28px);margin-top:clamp(36px,5vw,64px);padding-inline:var(--gut);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);scrollbar-width:none;cursor:grab}
.rullo::-webkit-scrollbar{display:none}
.rullo.trascina{cursor:grabbing;scroll-snap-type:none}
.rullo.trascina .v{pointer-events:none}
.v{flex:none;width:clamp(280px,36vw,580px);scroll-snap-align:start}
.v .img{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:6px;background:#000}
.v .img img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--molla),filter .6s;filter:saturate(.8)}
.v:hover .img img{transform:scale(1.06);filter:none}
.v .img::after{content:"";position:absolute;left:50%;top:50%;width:72px;height:72px;margin:-36px 0 0 -36px;border-radius:50%;background:var(--giallo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6.5v11l9-5.5z' fill='%230b0b0a'/%3E%3C/svg%3E") 54% 50%/30px no-repeat;transform:scale(.8);opacity:.92;transition:transform .4s var(--molla)}
.v:hover .img::after{transform:scale(1)}
.v.aperto .img::after{display:none}
.v iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.v strong{display:block;margin-top:16px;font:500 19px/1.22 var(--serif)}
.v .meta{display:block;margin-top:6px;font:500 13px/1.3 var(--sans);color:var(--fumo)}

/* editoriale */
.editoriale{padding-block:clamp(100px,12vw,190px);border-top:1px solid var(--linea)}
.editoriale blockquote{margin:28px 0 0;font:italic 400 clamp(40px,6vw,104px)/1 var(--serif);letter-spacing:-.035em;max-width:18ch;text-wrap:balance}
.editoriale blockquote a:hover{color:var(--giallo)}
.editoriale .sotto{display:flex;gap:28px;align-items:center;margin-top:36px;flex-wrap:wrap;font:500 14px/1.4 var(--sans);color:var(--fumo)}

/* piede */
.piede{background:var(--giallo);color:var(--nero);padding-block:clamp(56px,7vw,100px) 28px;overflow:hidden}
.piede .marchio-gigante{margin:0;font:600 clamp(64px,17.5vw,330px)/.8 var(--cond);text-transform:uppercase;letter-spacing:-.01em}
.piede .colonne{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;margin-top:clamp(48px,6vw,90px);padding-top:32px;border-top:1px solid rgba(11,11,10,.25)}
.piede h4{margin:0 0 14px;font:600 14px/1 var(--cond);letter-spacing:.16em;text-transform:uppercase}
.piede ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font:500 15px/1.3 var(--sans)}
.piede a:hover{text-decoration:underline}
.piede p{margin:0 0 12px;font:400 17px/1.45 var(--serif);max-width:40ch}
.piede .legale{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:48px;font:500 12.5px/1.5 var(--sans);color:rgba(11,11,10,.7)}
@media(max-width:899px){.piede .colonne{grid-template-columns:1fr 1fr}.piede .colonne>div:first-child{grid-column:1/-1}}

/* lettore fisso (player.js) */
.dock{position:fixed;left:12px;right:12px;bottom:12px;z-index:86;transform:translateY(140%);transition:transform .6s var(--molla)}
.con-dock .dock{transform:none}
.dock-in{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:auto minmax(0,1.2fr) auto minmax(0,1.6fr) auto auto;gap:18px;align-items:center;padding:10px 14px 10px 10px;background:rgba(11,11,10,.82);backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);border:1px solid rgba(255,222,0,.3);border-radius:20px;box-shadow:0 24px 70px rgba(0,0,0,.5);color:var(--osso)}
.dock button{border:0;background:none;color:inherit;cursor:pointer;font:600 14px/1 var(--cond);letter-spacing:.08em}
.disco{position:relative;width:56px;height:56px;padding:0}
.disco img{width:56px;height:56px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px var(--giallo)}
.disco i{position:absolute;inset:22px;border-radius:50%;background:var(--nero);box-shadow:0 0 0 2px rgba(255,255,255,.5)}
.suona .disco img{animation:gira 6s linear infinite}
.dock-tit{min-width:0}
.dock-tit .kicker{font:600 11.5px/1 var(--cond);letter-spacing:.14em;text-transform:uppercase;color:var(--giallo)}
.dock-tit strong{display:block;margin-top:5px;font:500 15px/1.2 var(--serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dock-ctl{display:flex;align-items:center;gap:6px}
.dock .pp{width:46px;height:46px;border-radius:50%;background:var(--giallo);display:grid;place-items:center}
.dock .pp::after{content:"";margin-left:4px;border-left:15px solid var(--nero);border-block:9px solid transparent}
.dock.suona .pp::after{width:14px;height:16px;margin:0;border:0;background:linear-gradient(90deg,var(--nero) 0 5px,transparent 5px 9px,var(--nero) 9px)}
.dock .salta{width:40px;height:40px;border-radius:50%;color:#cfcab9}
.dock .salta:hover,.dock .vel:hover,.dock .chiudi:hover{color:var(--giallo)}
.dock-barra{display:flex;align-items:center;gap:10px;font:500 12px/1 var(--sans);color:#a9a493;font-variant-numeric:tabular-nums}
.scorri{position:relative;flex:1;height:34px;cursor:pointer}
.scorri canvas{position:absolute;inset:0;width:100%;height:100%}
.scorri::before{content:"";position:absolute;left:0;right:0;top:50%;height:3px;margin-top:-1.5px;background:rgba(255,255,255,.14);border-radius:2px}
.scorri .pieno{position:absolute;left:0;top:50%;z-index:1;height:3px;margin-top:-1.5px;background:var(--giallo);border-radius:2px;box-shadow:0 0 12px var(--giallo)}
.dock .vel{min-width:44px;height:30px;border:1px solid #4a473d;border-radius:15px}
.dock .chiudi{width:30px;color:#77736a}
@media(max-width:760px){
  .dock{left:8px;right:8px;bottom:8px}
  .dock-in{grid-template-columns:auto minmax(0,1fr) auto auto;gap:10px;row-gap:4px;padding:8px 10px 8px 8px;border-radius:16px}
  .dock .salta,.dock .vel{display:none}
  .dock-barra{grid-column:1/-1;order:5}
  .dock-barra span{display:none}
  .scorri{height:16px}
  .disco,.disco img{width:46px;height:46px}.disco i{inset:18px}
}

/* stati iniziali delle animazioni: valgono solo se JavaScript e il movimento sono attivi */
.anim .ap-foto,.anim .ap-testo{visibility:hidden}

/* chi ha chiesto meno movimento: niente animazioni, tutto fermo e leggibile */
@media(prefers-reduced-motion:reduce){
  .grana,.pal,.scorri-giu i,.play::before,.in-ascolto .onda.attiva i,.in-ascolto .od-nuovo:has(.play.suona) .giro,.suona .disco img,.in-ascolto .eq i{animation:none}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

.dos h3 a:hover{color:var(--giallo)}
.dos .dos-tutto{align-self:flex-start;margin-top:18px;font-size:13px}