/* 07/11/2026 (Gionatha: «Mi piace quello che hai creato per sito e cellulare. procedi»): home «Manifesto».
   Rock da affissione: caratteri condensati pesanti, nero inchiostro e carta, oro solo come accento. Niente bagliori. */
@font-face{font-family:"Big Shoulders Display";font-style:normal;font-weight:700 900;font-display:swap;src:url(/assets/fonts/big-shoulders-display-latin-var.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-latin-500.woff2) format("woff2")}
@font-face{font-family:"Source Serif 4";font-style:italic;font-weight:400;font-display:swap;src:url(/assets/fonts/source-serif-4-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:"Oswald cifre";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/oswald-600-cifre.woff2) format("woff2")}

:root{--ink:#0F0E0D;--ink2:#1A1816;--rule:#33302B;--paper:#ECE5D6;--muted:#A39B8E;--gold:#FFD68C;--signal:#E0473B;
  --disp:"Big Shoulders Display",Impact,"Arial Narrow",sans-serif;--mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --serif:"Source Serif 4",Georgia,serif}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--paper);font:1rem/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:0;padding:.5rem 1rem;background:var(--gold);color:var(--ink);z-index:9}
.skip:focus{left:1rem;top:1rem}
.mono{font:500 .75rem/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0}
.disp{font-family:var(--disp);font-weight:900;text-transform:uppercase;line-height:.9;letter-spacing:.01em;margin:0}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}

/* barra */
.top{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--rule)}
.logo{display:flex;align-items:center;gap:10px}.logo img{width:34px;height:34px}
.logo b{font:900 22px/1 var(--disp);letter-spacing:.12em}
.top nav{display:flex;gap:22px}
.top nav a{font:500 .75rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.top nav a:hover{color:var(--gold)}

/* hero */
.hero{display:grid;grid-template-columns:1fr 1.1fr;min-height:620px;border-bottom:1px solid var(--rule)}
.foto{position:relative;overflow:hidden;background:var(--ink2);margin:0}
.foto img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;filter:grayscale(1) contrast(1.25) brightness(.9)}
.foto::after{content:"";position:absolute;inset:0;background:radial-gradient(rgba(15,14,13,.55) 1px,transparent 1.3px) 0 0/4px 4px}
.foto .tag{position:absolute;left:16px;bottom:14px;z-index:1;background:var(--ink);padding:4px 8px}
.htxt{padding:56px 48px;display:flex;flex-direction:column;justify-content:center;gap:22px}
.htxt h1{font-size:clamp(56px,7.4vw,118px)}
.htxt h1 em{font-style:normal;color:var(--gold)}
.lead{font-size:1.1rem;max-width:34ch;margin:0}
.btns{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 20px;font:800 18px/1.05 var(--disp);letter-spacing:.06em;text-transform:uppercase;border:2px solid var(--paper);color:var(--paper);background:none;cursor:pointer;text-align:center}
.btn:hover{border-color:var(--gold);color:var(--gold)}
.btn.pri{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.btn.pri:hover{background:var(--paper);border-color:var(--paper);color:var(--ink)}

/* sezioni */
section.blocco{padding:56px 0;border-bottom:1px solid var(--rule)}
.sez{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:22px}
.sez h2{font-size:44px}
.sez a.mono:hover{color:var(--gold)}
.nuovo{color:var(--signal)}
.ultimo{display:grid;grid-template-columns:1.2fr 1fr;gap:36px;align-items:center}
.yt{display:block;position:relative;width:100%;padding:0;border:0;background:#000;cursor:pointer;aspect-ratio:16/9}
.yt img{width:100%;height:100%;object-fit:cover}
.yt iframe{width:100%;height:100%;border:0}
.ytplay{position:absolute;left:50%;top:50%;width:72px;height:72px;margin:-36px 0 0 -36px;border-radius:50%;background:var(--gold)}
.ytplay::after{content:"";position:absolute;left:29px;top:22px;border-style:solid;border-width:14px 0 14px 22px;border-color:transparent transparent transparent var(--ink)}
.ultimo h3{font-size:64px;margin:8px 0 14px}
.verso{font:italic 400 1.5rem/1.35 var(--serif);color:var(--gold);margin:0 0 22px;border-left:3px solid var(--gold);padding-left:16px}
.nota{margin:10px 0 0;font-size:.85rem;color:var(--muted)}

/* clip */
.clips{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.clip{position:relative;display:block}
.clip img{width:100%;aspect-ratio:9/10;object-fit:cover;border:1px solid var(--rule)}
.clip:hover img{border-color:var(--gold)}
.clip .play{position:absolute;right:10px;top:10px;width:40px;height:40px;border-radius:50%;background:var(--gold)}
.clip .play::after{content:"";position:absolute;left:15px;top:11px;border-style:solid;border-width:9px 0 9px 14px;border-color:transparent transparent transparent var(--ink)}
.clip .t{font:800 22px/1 var(--disp);text-transform:uppercase;margin:10px 0 4px}

/* gioco */
.gioco{background:var(--paper);color:var(--ink);padding:36px;display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center}
.gioco .q{font:900 120px/.8 var(--disp)}
.gioco h2{font-size:40px;margin:4px 0 10px}
.gioco .mono{color:#5a5248}
.gioco p{margin:0}

/* album */
.griglia{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.griglia li{border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.cella{background:var(--ink);padding:18px;min-height:130px;display:flex;flex-direction:column;justify-content:space-between;height:100%}
a.cella:hover{background:var(--ink2)}
.cella .n{font:900 56px/1 var(--disp);color:var(--gold)}
.cella .tt{font:800 20px/1.05 var(--disp);text-transform:uppercase}
.cella.off .n{color:transparent;-webkit-text-stroke:1.5px var(--paper)}
.cella.off .tt{color:var(--muted)}

/* conto alla rovescia */
.conto{margin-top:28px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding:18px;border:1px solid var(--rule)}
.conto[hidden]{display:none}
.conto-data{font:800 24px/1.1 var(--disp);text-transform:uppercase;margin:4px 0 0}
.tab{display:flex;align-items:center;gap:6px}
.tab .g{display:flex;gap:3px}
.tab .d{position:relative;width:34px;height:50px;border-radius:4px;display:flex;align-items:center;justify-content:center;
  font:600 36px/1 "Oswald cifre",var(--disp);color:var(--gold);background:var(--ink2);box-shadow:inset 0 0 0 1px var(--rule);perspective:200px}
.tab .d::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:var(--ink)}
.tab .sep{font:600 28px "Oswald cifre",var(--disp);color:var(--muted)}
.tab .d.gira{animation:gira .35s ease-in-out}
@keyframes gira{0%{transform:rotateX(0)}50%{transform:rotateX(-90deg)}100%{transform:rotateX(0)}}

/* piede */
footer.piede{padding:36px 0 60px}
.social{list-style:none;margin:0 0 18px;padding:0;display:flex;gap:22px;flex-wrap:wrap}
.social a{font:800 20px var(--disp);text-transform:uppercase;letter-spacing:.06em}
.social a:hover{color:var(--gold)}
.ai{max-width:60ch;color:var(--muted);font-size:.95rem;margin:0 0 18px}
.legale{display:flex;flex-wrap:wrap;gap:6px 18px;font:500 .75rem var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.legale a:hover{color:var(--gold)}

/* 07/11/2026 pagine legali (privacy, termini) e 404 nello stesso stile */
.doc main{max-width:46rem;margin:0 auto;padding:40px 20px 64px;overflow-wrap:break-word}
.doc main a{color:var(--gold);text-decoration:underline;text-underline-offset:.2em;overflow-wrap:anywhere}
.doc h1{font:900 clamp(44px,8vw,72px)/.9 var(--disp);text-transform:uppercase;margin:0 0 12px}
.doc h2{font:800 26px/1.05 var(--disp);text-transform:uppercase;margin:2.4rem 0 .8rem;color:var(--gold)}
.doc .updated{font:500 .75rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.doc p,.doc li{color:#d9d2c4}
.doc strong{color:var(--paper)}
.doc .note{border:1px solid var(--rule);padding:1rem 1.25rem;background:var(--ink2)}
.doc hr{border:0;border-top:1px solid var(--rule);margin:4rem 0}
.top nav.lingua{display:flex}
.vuota{min-height:60vh;display:flex;flex-direction:column;justify-content:center;gap:22px;padding:40px 20px}
.vuota h1{font:900 clamp(64px,12vw,140px)/.85 var(--disp);text-transform:uppercase;margin:0}

.ascolta-su{margin:0 0 18px}
.ascolta-su a{color:var(--paper)}
.ascolta-su a:hover{color:var(--gold)}

/* telefono */
@media (max-width:700px){
  .top nav{display:none}
  .hero{grid-template-columns:1fr;min-height:0}
  .foto{height:400px}
  .htxt{padding:26px 20px 30px;gap:16px}
  .htxt h1{font-size:54px}
  .btns .btn{flex:1 1 140px}
  .ultimo{grid-template-columns:1fr;gap:20px}
  .ultimo h3{font-size:48px}
  .sez{flex-wrap:wrap}
  .sez h2{font-size:36px}
  .clips{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin-right:-20px;padding-right:20px}
  .clips li{flex:0 0 72%;scroll-snap-align:start}
  .griglia{grid-template-columns:repeat(2,1fr)}
  .gioco{grid-template-columns:1fr;padding:26px;gap:8px}
  .gioco .q{font-size:80px}
  .tab .d{width:28px;height:42px;font-size:30px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.nota a{color:var(--gold);text-decoration:underline;text-underline-offset:.2em}

/* 07/11/2026 verifica QA: menu visibile anche su telefono, aree cliccabili piu' alte, titolo EN delle pagine legali */
@media (max-width:700px){
  .top{flex-wrap:wrap;gap:10px}
  .top nav{display:flex;width:100%;overflow-x:auto;gap:18px;padding:2px 0 4px;scrollbar-width:none}
  .top nav a{white-space:nowrap;padding:6px 0}
}
.legale a,.legale span,.briciole a{display:inline-block;padding:6px 0}
.doc h2.h1en{font:900 clamp(44px,8vw,72px)/.9 var(--disp);color:var(--paper);margin:0 0 12px}

/* 08/11/2026 versione inglese: selettore IT | EN, striscia per chi non legge l'italiano, testo + traduzione */
.lingua-sel{display:inline-flex;border:1px solid var(--rule);margin-left:22px;flex:none}
.lingua-sel a{font:500 .75rem var(--mono);letter-spacing:.08em;padding:6px 10px;color:var(--muted)}
.lingua-sel a.on{background:var(--gold);color:var(--ink)}
.lingua-sel a:not(.on):hover{color:var(--gold)}
.top{gap:12px}
.striscia-en{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 14px;padding:10px 16px;background:var(--ink2);border-bottom:1px solid var(--rule);font:500 .8rem var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--paper)}
.striscia-en[hidden]{display:none}
.striscia-en a{color:var(--gold)}
.striscia-en .chiudi{background:none;border:0;color:var(--muted);font:inherit;cursor:pointer;padding:4px 8px}
.testi{margin-top:56px;padding-top:40px;border-top:1px solid var(--rule);max-width:42rem}
.testi .strofe p,.traduzione p{font:1.1rem/1.7 var(--serif);margin:0 0 1.2rem}
.traduzione{margin-top:28px;border:1px solid var(--rule);padding:14px 18px}
.traduzione summary{cursor:pointer;font:800 20px var(--disp);text-transform:uppercase;letter-spacing:.04em;color:var(--gold)}
.traduzione[open] summary{margin-bottom:16px}
.traduzione p{font-style:italic;color:#d9d2c4}
@media (max-width:700px){
  .top{position:relative}
  .lingua-sel{position:absolute;right:16px;top:12px;margin:0}
}

/* 08/11/2026: triangolo play disegnato (il carattere ▶ sull'iPhone diventa un'emoji) */
.tri{display:inline-block;width:0;height:0;border-style:solid;border-width:.4em 0 .4em .65em;border-color:transparent transparent transparent currentColor;margin-right:.45em;vertical-align:.05em}

/* collaudo 08/11: aree di tocco di almeno 24px; menu su telefono su due righe (niente voci nascoste) */
.social a{display:inline-block;padding:6px 6px;min-width:24px;text-align:center}
.sez a.mono,.striscia-en a{display:inline-block;padding:6px 0}
@media (max-width:700px){.top nav{flex-wrap:wrap;overflow:visible;gap:4px 18px}}

/* 10/11/2026 PROVA movimento sobrio. In cima alle pagine l'ingresso dei titoli e' solo CSS: parte al primo disegno e
   non dipende dagli script (senza script il testo c'e' comunque). Le sezioni piu' in basso le muove stile/moto.js.
   Mai sulle immagini. Con «riduci movimento» la regola piu' sopra (animation:none) spegne tutto. */
@keyframes sale{from{opacity:0;transform:translateY(18px)}}
@keyframes appare{from{opacity:0}}
.htxt>*,.album-testa>*,.scheda>div>*{animation:sale .7s cubic-bezier(.22,1,.36,1) backwards}
.htxt>:nth-child(2),.album-testa>:nth-child(2),.scheda>div>:nth-child(2){animation-delay:.08s}
.htxt>:nth-child(3),.album-testa>:nth-child(3),.scheda>div>:nth-child(3){animation-delay:.16s}
.htxt>:nth-child(4),.scheda>div>:nth-child(4){animation-delay:.24s}
.scheda>div>:nth-child(5){animation-delay:.32s}
.htxt h1 em{animation:appare .7s .45s backwards}