/* ===== TT Radio — direzione «909»: la pagina e' il frontale di una drum machine ===== */
:root{
  --panel:#C9C6BD; --panel-2:#BDBAB0; --riga:#A9A69C; --grafite:#1C1D1F; --grafite-2:#2B2C2F; --testo-2:#3A3B3E;
  --crema:#EFE8D8; --rosso:#DE3B26; --ora:#F26B1D; --giallo:#F0BE2C; --led:#FF4A1C;
  --lcd:#14150F; --lcd-on:#FF8A3D; --lcd-dim:rgba(255,138,61,.62); --lcd-off:rgba(255,138,61,.10);
  --disp:'Archivo',Arial,sans-serif; --serif:'Source Serif 4',Georgia,serif; --pixel:'Silkscreen','Courier New',monospace;
  --gutter:clamp(16px,3.4vw,44px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--panel);scroll-behavior:auto}
body{min-height:100vh;color:var(--grafite);font-family:var(--disp);-webkit-font-smoothing:antialiased;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px),
    linear-gradient(180deg,#CFCCC3 0%,var(--panel) 38%,#C1BEB4 100%) fixed;}
a{color:inherit}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--ora);outline-offset:3px}
.silk{font-stretch:62%;font-weight:650;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--testo-2)}
.silk b{color:var(--ora);font-weight:800}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.vite{position:absolute;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#E7E4DC,#8F8C84 70%);box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
.vite::after{content:"";position:absolute;left:3px;right:3px;top:6px;height:2px;background:#6D6A63;transform:rotate(38deg)}
.salta{position:absolute;left:12px;top:-60px;z-index:50;background:var(--grafite);color:var(--crema);padding:10px 14px;text-decoration:none}
.salta:focus{top:12px}

.frontale{position:relative;max-width:1320px;margin:0 auto;padding:30px var(--gutter) 40px}
.frontale>.vite:nth-of-type(1){left:12px;top:12px}.frontale>.vite:nth-of-type(2){right:12px;top:12px}

/* ---------- testata ---------- */
.testa{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:18px 30px;padding-bottom:22px;border-bottom:2px solid var(--grafite)}
.marchio{text-decoration:none;color:var(--grafite)}
.marchio .nome{display:block;font-stretch:125%;font-weight:800;font-size:clamp(46px,8.4vw,112px);line-height:.82;letter-spacing:-.035em}
.marchio .nome .c{display:inline-block}
.marchio .silk{margin-top:12px;display:block}
.navi{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px}
.navi a{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--grafite);padding:4px 0}
.navi a i{width:8px;height:8px;background:#7E7B73;display:block;transition:background .15s,box-shadow .15s}
.navi a[aria-current="page"] i{background:var(--led);box-shadow:0 0 8px var(--led)}
.navi a:hover i{background:var(--ora)}
.lingua{display:inline-flex;border:1.5px solid var(--grafite)}
.lingua button{background:none;border:0;padding:5px 9px;font:inherit;cursor:pointer;color:var(--grafite)}
.lingua button[aria-pressed="true"]{background:var(--grafite);color:var(--crema)}

/* mini player: compare quando si lascia la pagina Live con la radio accesa */
.mini{position:fixed;right:var(--gutter);bottom:18px;z-index:40;display:flex;align-items:center;gap:14px;max-width:min(520px,calc(100vw - 32px));
  background:var(--lcd);color:var(--lcd-on);padding:10px 12px 10px 16px;border-radius:6px;box-shadow:0 0 0 4px var(--grafite-2),0 14px 30px rgba(0,0,0,.35)}
.mini[hidden]{display:none}
body.con-mini .frontale{padding-bottom:110px}
.mini .led{width:10px;height:10px;border-radius:50%;background:var(--led);box-shadow:0 0 10px var(--led);flex:none}
.mini .testo{min-width:0;display:grid}
.mini .testo span{font-stretch:62%;font-weight:600;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--lcd-dim)}
.mini .testo b{font-stretch:78%;font-weight:750;font-size:17px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini button{flex:none;border:0;border-radius:4px;background:var(--crema);color:var(--grafite);font:inherit;font-stretch:112%;font-weight:800;font-size:13px;letter-spacing:.08em;padding:9px 12px;cursor:pointer}

/* ---------- viste ---------- */
.vista{padding-top:30px}
.vista[hidden]{display:none}

/* ---------- LIVE: display, volume, start ---------- */
.comandi{display:grid;grid-template-columns:1fr auto auto;gap:22px;align-items:stretch}
.lcd{position:relative;background:var(--lcd);border-radius:6px;color:var(--lcd-on);min-height:228px;
  box-shadow:inset 0 2px 10px rgba(0,0,0,.8),0 0 0 6px var(--grafite-2),0 0 0 7px #0006;overflow:hidden;isolation:isolate}
.lcd::after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(20,21,15,.94) 0%,rgba(20,21,15,.78) 55%,rgba(20,21,15,.35) 100%),
  repeating-linear-gradient(0deg,rgba(0,0,0,.22) 0 1px,transparent 1px 3px);pointer-events:none;z-index:1}
.lcd .dentro{position:relative;z-index:2;padding:18px 22px 20px}
.lcd .riga{display:flex;justify-content:space-between;gap:16px;align-items:baseline}
.lcd .et{font-stretch:62%;font-weight:600;font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--lcd-dim)}
.lcd .titolo{margin-top:8px;font-stretch:78%;font-weight:750;font-size:clamp(26px,3.6vw,46px);line-height:1.02;text-transform:uppercase;letter-spacing:.02em;
  text-shadow:0 0 12px rgba(255,138,61,.55);overflow-wrap:anywhere}
.lcd .artista{margin-top:4px;font-stretch:78%;font-weight:650;font-size:clamp(16px,1.6vw,20px);letter-spacing:.04em;color:var(--lcd-on);text-transform:uppercase}
.lcd .sotto{margin-top:6px;font-stretch:78%;font-size:15px;letter-spacing:.06em;color:rgba(255,138,61,.78)}
.lcd .numeri{display:flex;gap:clamp(18px,3vw,38px);margin-top:16px;align-items:flex-end;flex-wrap:wrap}
.num{display:grid;gap:4px}
.seg{position:relative;font-family:'DSEG7',monospace;font-size:clamp(26px,3.2vw,42px);line-height:1;color:var(--lcd-on);text-shadow:0 0 10px rgba(255,138,61,.6);white-space:nowrap}
.seg::before{content:attr(data-spento);position:absolute;inset:0;color:var(--lcd-off);text-shadow:none}
.spettro{flex:1;min-width:150px;height:52px;display:flex;align-items:flex-end;gap:4px}
.spettro i{flex:1;background:var(--lcd-on);opacity:.9;height:6%;box-shadow:0 0 6px rgba(255,138,61,.5)}
.lcd .dopo{margin-top:14px;padding-top:10px;border-top:1px dashed rgba(255,138,61,.25);display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}
.lcd .dopo b{font-stretch:78%;font-weight:700;font-size:15px;letter-spacing:.06em;text-transform:uppercase}

.manopola{display:grid;justify-items:center;align-content:center;gap:12px;padding:0 6px}
.knob{position:relative;width:118px;height:118px;border-radius:50%;cursor:grab;touch-action:none;
  background:radial-gradient(circle at 40% 35%,#4A4B4F,#1E1F21 62%);box-shadow:0 8px 16px rgba(0,0,0,.35),inset 0 2px 2px rgba(255,255,255,.12)}
.knob::before{content:"";position:absolute;inset:-12px;border-radius:50%;
  background:repeating-conic-gradient(from 225deg,var(--grafite) 0 1.2deg,transparent 1.2deg 13.5deg);
  -webkit-mask:radial-gradient(circle,transparent 66px,#000 67px 70px,transparent 71px);mask:radial-gradient(circle,transparent 66px,#000 67px 70px,transparent 71px)}
.knob .indice{position:absolute;left:50%;top:10px;width:5px;height:28px;margin-left:-2.5px;background:var(--crema);border-radius:2px}
.knob:focus-visible{outline:3px solid var(--ora);outline-offset:14px}

.start{display:grid;justify-items:center;align-content:center;gap:12px}
.start button{position:relative;width:170px;height:118px;border:0;border-radius:6px;cursor:pointer;background:var(--crema);color:var(--grafite);
  box-shadow:0 6px 0 #A59E8F,0 10px 18px rgba(0,0,0,.28);font:inherit;font-stretch:112%;font-weight:800;font-size:22px;letter-spacing:.08em;transition:transform .08s,box-shadow .08s}
.start button:active{transform:translateY(5px);box-shadow:0 1px 0 #A59E8F,0 3px 8px rgba(0,0,0,.3)}
.start button .led{position:absolute;top:14px;right:14px;width:12px;height:12px;border-radius:50%;background:#6B2A20}
.start button[aria-pressed="true"] .led{background:var(--led);box-shadow:0 0 12px var(--led)}
.start button.conn .led{background:var(--giallo);box-shadow:0 0 10px var(--giallo)}
.start button small{display:block;margin-top:6px;font-stretch:62%;font-weight:600;font-size:11px;letter-spacing:.24em}

/* i 16 passi: una battuta 4/4 in sedicesimi */
.sequenza{margin-top:40px}
.sequenza .testina{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px}
.passi{display:grid;grid-template-columns:repeat(16,1fr);gap:clamp(6px,.9vw,12px)}
.passo{display:grid;gap:9px;justify-items:center}
.passo .led{width:11px;height:11px;border-radius:50%;background:#5E2A21}
.passo.qui .led{background:var(--led);box-shadow:0 0 12px 2px var(--led)}
.tasto{width:100%;aspect-ratio:.72;border-radius:4px;background:var(--c);box-shadow:0 5px 0 color-mix(in srgb,var(--c) 62%,#000),inset 0 -3px 0 rgba(0,0,0,.12);
  position:relative;transition:transform .06s,box-shadow .06s;filter:saturate(.72) brightness(.94)}
.passo.pieno .tasto{filter:none}
.passo.pieno .tasto::after{content:"";position:absolute;left:22%;right:22%;top:14%;height:6px;border-radius:3px;background:rgba(255,255,255,.55)}
.passo.qui .tasto{transform:translateY(3px);box-shadow:0 2px 0 color-mix(in srgb,var(--c) 62%,#000)}
.passo .n{font-stretch:62%;font-weight:700;font-size:12px;letter-spacing:.1em;color:var(--testo-2)}
.gruppi{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(6px,.9vw,12px);margin-top:12px}
.gruppi span{border-top:2px solid var(--grafite);padding-top:6px;text-align:center}

/* cronologia dei brani */
.storia{margin-top:46px;display:grid;grid-template-columns:260px 1fr;gap:28px;padding-top:24px;border-top:2px solid var(--grafite)}
.storia h2{font-family:var(--pixel);font-weight:700;font-size:clamp(22px,2.4vw,30px);line-height:1;text-transform:uppercase}
.storia ol{list-style:none;display:grid;border-top:1.5px solid var(--riga)}
.storia li{display:grid;grid-template-columns:96px 1fr;gap:16px;align-items:baseline;padding:12px 0;border-bottom:1.5px solid var(--riga)}
.storia .ora{font-family:'DSEG7';font-size:18px}
.storia b{font-stretch:100%;font-weight:800;font-size:17px;text-transform:uppercase}
.storia em{font-style:normal;font-family:var(--serif);color:var(--testo-2)}
.storia li.vuota{display:block;font-family:var(--serif);color:var(--testo-2);padding:12px 0}

/* ---------- titoli pixel (dal pacchetto: Text Animations/1) ---------- */
.pixel{font-family:var(--pixel);font-weight:700;font-size:min(8.2vw,118px);line-height:.9;text-transform:uppercase;letter-spacing:-.01em;color:var(--grafite);white-space:nowrap}
.pixel .l{display:inline-block;will-change:transform}
.intro{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:18px 40px;padding-bottom:26px;border-bottom:2px solid var(--grafite)}
.intro p{font-family:var(--serif);font-size:19px;line-height:1.45;color:var(--testo-2);max-width:40ch}

/* ---------- PROGRAMI ---------- */
.giorni{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-top:28px}
.giorni button{border:0;border-radius:4px;background:var(--grafite-2);color:var(--crema);padding:14px 0 12px;font:inherit;font-stretch:78%;font-weight:700;font-size:15px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;box-shadow:0 4px 0 #0B0B0C;position:relative}
.giorni button[aria-pressed="true"]{background:var(--ora);color:var(--grafite);box-shadow:0 4px 0 #9C3F0B}
.giorni button.oggi::after{content:"";position:absolute;top:6px;right:6px;width:7px;height:7px;border-radius:50%;background:var(--led);box-shadow:0 0 8px var(--led)}
.palinsesto{list-style:none;margin-top:22px;border-top:1.5px solid var(--riga)}
.blocco{position:relative;overflow:hidden;border-bottom:1.5px solid var(--riga)}
.blocco .riga{display:grid;grid-template-columns:170px 1fr auto;gap:18px;align-items:baseline;padding:18px 0}
.blocco .ora{font-family:'DSEG7';font-size:clamp(17px,1.8vw,22px);white-space:nowrap}
.blocco b{font-stretch:112%;font-weight:800;font-size:clamp(20px,2.4vw,30px);text-transform:uppercase;letter-spacing:-.005em}
.blocco em{display:block;font-style:normal;font-family:var(--serif);color:var(--testo-2);margin-top:2px}
.blocco .bpm{font-stretch:62%;font-weight:700;font-size:13px;letter-spacing:.2em;color:var(--testo-2);white-space:nowrap}
.blocco.adesso b::before{content:"";display:inline-block;width:12px;height:12px;border-radius:50%;background:var(--led);box-shadow:0 0 10px var(--led);margin-right:12px;vertical-align:.12em}
.blocco .adesso-et{display:none;margin-left:10px;color:var(--rosso)}
.blocco.adesso .adesso-et{display:inline}
/* la striscia che entra dal bordo piu' vicino (dal pacchetto: Hover Effects/4) */
.striscia{position:absolute;inset:0;overflow:hidden;background:var(--ora);transform:translateY(101%);pointer-events:none}
.striscia .dentro{height:100%;transform:translateY(-101%);display:flex;align-items:center}
.striscia .nastro{display:flex;white-space:nowrap;animation:nastro 12s linear infinite}
.striscia .nastro span{font-stretch:125%;font-weight:800;font-size:clamp(20px,2.4vw,30px);text-transform:uppercase;padding-right:36px;color:var(--grafite)}
.striscia .nastro span i{font-style:normal;font-family:'DSEG7';font-size:.7em;margin-right:14px}
@keyframes nastro{to{transform:translateX(-50%)}}
.p-nota{margin-top:14px}

/* ---------- REZIDENTËT ---------- */
.rez{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center;margin-top:34px}
.passi-rez{list-style:none;display:grid;gap:0;border-top:1.5px solid var(--riga);counter-reset:p}
.passi-rez li{display:grid;grid-template-columns:64px 1fr;gap:16px;align-items:baseline;padding:18px 0;border-bottom:1.5px solid var(--riga);counter-increment:p}
.passi-rez li::before{content:counter(p);font-family:'DSEG7';font-size:30px;color:var(--ora)}
.passi-rez li span{font-stretch:100%;font-weight:750;font-size:clamp(18px,1.8vw,22px);line-height:1.2}
.azioni{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.tasto-crema{display:inline-flex;align-items:center;gap:10px;border:0;border-radius:6px;background:var(--crema);color:var(--grafite);text-decoration:none;
  padding:16px 20px;font:inherit;font-stretch:112%;font-weight:800;font-size:15px;letter-spacing:.06em;text-transform:uppercase;box-shadow:0 5px 0 #A59E8F;cursor:pointer}
.tasto-crema.ar{background:var(--ora);box-shadow:0 5px 0 #9C3F0B}
.tasto-crema:active{transform:translateY(4px);box-shadow:0 1px 0 #A59E8F}
/* l'anello che gira come un disco (idea da Hero Animations/16) */
.disco{position:relative;width:min(100%,460px);aspect-ratio:1;margin:0 auto;justify-self:center}
.disco svg{width:100%;height:100%;display:block}
.disco .anello{font-family:var(--pixel);font-weight:700;font-size:21px;letter-spacing:.06em;fill:var(--grafite)}
.disco .anello2{font-family:var(--disp);font-stretch:62%;font-weight:700;font-size:15px;letter-spacing:.3em;fill:var(--testo-2)}
.disco .centro{position:absolute;inset:32%;border-radius:50%;background:radial-gradient(circle at 40% 35%,#4A4B4F,#1E1F21 62%);box-shadow:0 10px 24px rgba(0,0,0,.35);display:grid;place-items:center}
.disco .centro::after{content:"";width:14%;aspect-ratio:1;border-radius:50%;background:var(--ora);box-shadow:0 0 0 6px var(--crema)}

/* ---------- KONTAKT: moduli come in un rack ---------- */
.moduli{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:34px}
.modulo{position:relative;background:var(--panel-2);border:1.5px solid var(--riga);border-radius:6px;padding:26px 26px 24px;display:grid;gap:12px;align-content:start;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.modulo .vite{top:9px}.modulo .vite:nth-of-type(1){left:9px}.modulo .vite:nth-of-type(2){right:9px}
.modulo h2{font-stretch:125%;font-weight:800;font-size:clamp(22px,2.3vw,30px);line-height:.95;text-transform:uppercase;letter-spacing:-.01em;margin-top:8px}
.modulo p{font-family:var(--serif);font-size:17px;line-height:1.45;color:var(--testo-2)}
.modulo .dato{font-stretch:100%;font-weight:750;font-size:19px;text-decoration:none;overflow-wrap:anywhere}
.modulo .dato:hover{color:var(--rosso)}
.modulo .lcd-mini{background:var(--lcd);color:var(--lcd-on);border-radius:4px;padding:12px 14px;font-stretch:78%;font-weight:650;font-size:15px;overflow-wrap:anywhere;box-shadow:0 0 0 4px var(--grafite-2)}
.modulo .azioni{margin-top:6px}

/* ---------- piede ---------- */
.piede{margin-top:56px;padding-top:18px;border-top:2px solid var(--grafite);display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px}
.piede a{text-decoration:underline;text-underline-offset:3px}

/* ---------- telefono ---------- */
@media (max-width:980px){
  .comandi{grid-template-columns:1fr 1fr}
  .lcd{grid-column:1/-1}
  .passi{grid-template-columns:repeat(8,1fr);row-gap:22px}
  .gruppi{display:none}
  .storia,.rez{grid-template-columns:1fr}
  .moduli{grid-template-columns:1fr}
  .blocco .riga{grid-template-columns:120px 1fr}
  .blocco .bpm{grid-column:2}
}
@media (max-width:520px){
  .start button{width:100%;max-width:170px}
  .knob{width:96px;height:96px}
  .knob::before{-webkit-mask:radial-gradient(circle,transparent 54px,#000 55px 58px,transparent 59px);mask:radial-gradient(circle,transparent 54px,#000 55px 58px,transparent 59px)}
  .giorni{gap:5px}.giorni button{font-size:12px;letter-spacing:.06em}
  .blocco .riga{grid-template-columns:1fr;gap:6px}.blocco .bpm{grid-column:1}
  .storia li{grid-template-columns:78px 1fr}
  .mini{left:16px;right:16px;max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .tasto,.passo .led{transition:none}
  .striscia .nastro{animation:none}
}
#stato{background:rgba(20,21,15,.88);padding:3px 8px;border-radius:3px;color:var(--lcd-on)}