:root{
  --bg:#ffffff; --ink:#14161f; --muted:#555b6b; --line:#d9dce3; --link:#0b4fd6; --tile:#f3f4f7;
  --c1:#ed1c24; --c2:#fff200; --c3:#8cc63f; --c4:#0f75bc; --c5:#9f1f62; /* colori del logo */
  --bars:linear-gradient(90deg,var(--c1) 0 20%,var(--c2) 20% 40%,var(--c3) 40% 60%,var(--c4) 60% 80%,var(--c5) 80% 100%);
}
@media (prefers-color-scheme:dark){
  :root{--bg:#10121a; --ink:#f1f2f6; --muted:#a3a9ba; --line:#2b2f3d; --link:#8db3ff; --tile:#1b1f2c}
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5rem}
body{margin:0;background:var(--bg);color:var(--ink);font:1.0625rem/1.6 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
.bars{height:14px;background:var(--bars)}
.bars-end{background:linear-gradient(90deg,var(--c1) 0 33.333%,var(--c3) 33.333% 66.667%,var(--c4) 66.667% 100%)} /* barra di chiusura: rosso, verde, blu */
main,footer,.bar-in{max-width:72rem;margin:0 auto;padding:0 1.5rem}   /* schermata larga su desktop */
a{color:var(--link)}
a:focus-visible,summary:focus-visible,button:focus-visible{outline:3px solid #f2c230;outline-offset:3px}

/* Menu fisso */
.site-header{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--line)}
.bar-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:3.75rem}
.brand{display:flex;align-items:center;gap:.6rem;color:var(--ink);text-decoration:none;font:900 1.1rem/1 "Arial Black","Helvetica Neue",Arial,sans-serif}
.brand img{width:2.4rem;height:2.4rem;display:block}
.nav{display:flex;align-items:center;gap:.15rem;flex-wrap:wrap;justify-content:flex-end}
.nav a{color:var(--ink);text-decoration:none;font-weight:700;font-size:.95rem;padding:.5rem .6rem;border-radius:.4rem}
.nav a:hover{background:var(--tile)}
.nav a.yt{background:var(--ink);color:var(--bg);margin-left:.4rem}
.nav a.yt:hover{background:var(--ink);text-decoration:underline}
.burger{display:none;background:none;border:2px solid var(--ink);color:var(--ink);border-radius:.4rem;width:2.75rem;height:2.75rem;padding:0;cursor:pointer}
.burger span,.burger span::before,.burger span::after{display:block;width:1.2rem;height:2px;background:currentColor;margin:0 auto;position:relative;content:""}
.burger span::before{position:absolute;top:-6px;left:0}
.burger span::after{position:absolute;top:6px;left:0}
@media (max-width:640px){
  .js .burger{display:block}
  .js .nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;background:var(--bg);border-bottom:1px solid var(--line);padding:.5rem 1.25rem 1rem}
  .js .nav.open{display:flex}
  .js .nav a{padding:.85rem .5rem;border-bottom:1px solid var(--line);border-radius:0}
  .js .nav a.yt{margin:.8rem 0 0;border:0;text-align:center;border-radius:.4rem}
  .nav{flex-wrap:wrap}
  html:not(.js) .bar-in{flex-direction:column;align-items:flex-start;padding-top:.6rem;padding-bottom:.6rem}
}

/* Hero */
.hero{display:flex;align-items:center;gap:1.5rem;margin:2.2rem 0 1rem}
.hero-logo{width:clamp(5.5rem,22vw,9rem);height:auto;flex:none;display:block}
h1{font:900 clamp(1.8rem,7vw,3.2rem)/1.04 "Arial Black",Impact,"Helvetica Neue",Arial,sans-serif;letter-spacing:-.02em;margin:0}
h2{font:800 1.5rem/1.2 "Arial Black","Helvetica Neue",Arial,sans-serif;margin:0 0 .75rem}
h3{margin:0;font-size:1.1rem;line-height:1.25}
.lead{font-size:1.25rem;max-width:36rem;margin:0 0 .5rem}
.motto{color:var(--muted);font-style:italic;margin:0 0 1.5rem}
.cta{display:flex;flex-wrap:wrap;gap:.75rem;margin:1.5rem 0 3rem}
.cta a{display:inline-block;padding:.7rem 1.2rem;border:2px solid var(--ink);color:var(--ink);text-decoration:none;font-weight:700;border-radius:.4rem}
.cta a.main{background:var(--ink);color:var(--bg)}
.cta a:hover{text-decoration:underline}
@media (max-width:480px){.hero{gap:1rem}.cta a{flex:1 1 auto;text-align:center}}

/* Sezioni */
section.block{margin:0 0 3rem}
.story p{max-width:38rem;margin:0 0 1rem}

/* Palinsesto con loghi */
.guide{border-top:2px solid var(--ink)}
.show{display:flex;align-items:center;gap:1.25rem;padding:1.15rem 0;border-bottom:1px solid var(--line)}
.show .txt{min-width:0}
.show p{margin:.3rem 0 0;max-width:36rem}
.small{color:var(--muted);font-size:.95rem}
.tile{flex:none;width:6rem;height:6rem;border-radius:1.4rem;overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--tile);border:1px solid var(--line)}
.tile img{display:block;width:100%;height:100%;object-fit:cover}
.tile.contain{background:#fff;padding:.5rem}
.tile.contain img{object-fit:contain}
.tile.ph{border:0;color:#fff;font:900 1.6rem/1 "Arial Black",Impact,Arial,sans-serif;letter-spacing:-.02em}
.ph.c1{background:#2f4bd8}.ph.c2{background:#d946a8}.ph.c3{background:#e5383b}.ph.c4{background:#19b5c9;color:#10121a}
@media (max-width:480px){.tile{width:4.75rem;height:4.75rem;border-radius:1.1rem}.show{gap:1rem}.tile.ph{font-size:1.3rem}}

/* FAQ */
details{border-bottom:1px solid var(--line);padding:.9rem 0}
summary{cursor:pointer;font-weight:700}
details p{margin:.6rem 0 0}
footer{padding-top:2rem;padding-bottom:3rem;color:var(--muted);font-size:.9rem}
footer p{margin:.4rem 0}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}

/* ===== Storia (articoli) ===== */
.crumbs{font-size:.9rem;color:var(--muted);margin:1.5rem 0 .5rem}
.crumbs a{color:var(--muted)}
.part{display:inline-block;font-weight:800;font-size:.85rem;letter-spacing:.04em;text-transform:uppercase;background:var(--tile);border:1px solid var(--line);border-radius:2rem;padding:.2rem .8rem;margin:0 0 .8rem}
.article h1{margin:0 0 1.2rem}
.article .body{max-width:38rem}
.article .body p,.article .body ul,.article .body ol,.article .body blockquote{margin:0 0 1.1rem}
.article .body h2{margin:2rem 0 .6rem}
.article .body h3{margin:1.5rem 0 .4rem}
.article .body blockquote{border-left:4px solid #f2c230;padding:.2rem 0 .2rem 1rem;color:var(--muted);font-style:italic}
.article .body img{max-width:100%;height:auto}
.gal{position:relative;margin:0 0 1.8rem;border:1px solid var(--line);border-radius:1rem;overflow:hidden;background:var(--tile)}
.gal-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.gal-track::-webkit-scrollbar{display:none}
.gal-slide{flex:0 0 100%;scroll-snap-align:center;aspect-ratio:16/10;margin:0}
.gal-slide img{display:block;width:100%;height:100%;object-fit:contain}
.gal-btn,.gal-count{display:none}
.js .gal.multi .gal-btn{display:flex;position:absolute;top:50%;transform:translateY(-50%);width:2.75rem;height:2.75rem;align-items:center;justify-content:center;border:0;border-radius:50%;background:rgba(16,18,26,.75);color:#fff;font-size:1.6rem;line-height:1;cursor:pointer}
.gal-btn.prev{left:.6rem}.gal-btn.next{right:.6rem}
.gal-count{position:absolute;right:.7rem;bottom:.7rem;background:rgba(16,18,26,.75);color:#fff;font-size:.8rem;padding:.15rem .6rem;border-radius:2rem}
.gal.multi .gal-count{display:block}
.pager{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin:2.5rem 0 1.5rem}
.pager a{display:block;border:2px solid var(--ink);border-radius:.6rem;padding:.8rem 1rem;color:var(--ink);text-decoration:none}
.pager a:hover{background:var(--tile)}
.pager small{display:block;color:var(--muted);font-weight:700;text-transform:uppercase;font-size:.75rem;letter-spacing:.04em}
.pager .prev{grid-column:1}
.pager .next{grid-column:2;text-align:right}
.toc{margin:0 0 3rem;padding-left:1.4rem}
.toc li{margin:.3rem 0}
.toc [aria-current]{font-weight:800;color:var(--ink);text-decoration:none}
.progress{height:4px;background:var(--line);border-radius:4px;margin:0 0 1.5rem;overflow:hidden}
.progress i{display:block;height:100%;background:var(--bars)}

.img-break{margin:1.8rem 0;border:1px solid var(--line);border-radius:1rem;overflow:hidden;background:var(--tile)}
.img-break img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:contain}
.alist{list-style:none;margin:0 0 3rem;padding:0;border-top:2px solid var(--ink)}
.alist li{padding:1rem 0;border-bottom:1px solid var(--line)}
.alist a{font-weight:800;font-size:1.1rem}
.alist small{display:block;color:var(--muted)}
.alist p{margin:.3rem 0 0;max-width:36rem}
.btn-start{display:inline-block;padding:.7rem 1.2rem;border:2px solid var(--ink);background:var(--ink);color:var(--bg);font-weight:700;border-radius:.4rem;text-decoration:none}
.btn-start:hover{text-decoration:underline}

/* ===== Link moderni ===== */
/* base: sottolineatura sottile e staccata dal testo, che si ispessisce al passaggio del mouse */
a{text-underline-offset:.22em;text-decoration-thickness:1px;transition:color .2s,text-decoration-thickness .2s}
a:hover{text-decoration-thickness:2px}
/* link nei testi: niente sottolineatura classica, ma una linea con i 5 colori del logo che si ispessisce */
.body a,.story p a,.small a,.lead a,details a{
  color:var(--link);font-weight:600;text-decoration:none;padding-bottom:2px;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  transition:background-size .2s ease,color .2s}
.body a:hover,.story p a:hover,.small a:hover,.lead a:hover,details a:hover{background-size:100% 5px;color:var(--ink)}
/* "Leggi tutto →": link con freccia che scorre */
a.more{display:inline-flex;align-items:center;gap:.45rem;font-weight:800;background-image:none;padding-bottom:0;
  text-decoration:underline;text-decoration-thickness:2px;text-decoration-color:var(--c1);text-underline-offset:.3em}
a.more:hover{text-decoration-color:var(--c4);background-size:0}
a.more span{display:inline-block;transition:transform .2s ease}
a.more:hover span{transform:translateX(5px)}
/* briciole di pane, indici e footer: discreti */
.crumbs a,footer a{color:inherit;font-weight:600}
.crumbs a:hover,footer a:hover{color:var(--link)}
.toc a,.alist a{text-decoration-color:var(--c4)}

/* ===== Elenchi di articoli con miniatura ===== */
.acard{position:relative;display:flex;align-items:center;gap:1.1rem}
.acard .thumb{flex:none;width:6rem;height:6rem;border-radius:1.2rem;overflow:hidden;background:var(--tile);border:1px solid var(--line)}
.acard .thumb img{display:block;width:100%;height:100%;object-fit:cover}
.acard .thumb.contain{background:#fff}
.acard .thumb.contain img{object-fit:contain;padding:.6rem}
.acard .txt{min-width:0}
.acard .t{color:var(--ink);text-decoration:none;font-weight:800;font-size:1.1rem;line-height:1.25}
.acard .t::after{content:"";position:absolute;inset:0}   /* tutta la riga è cliccabile */
.acard:hover .t{text-decoration:underline;text-decoration-color:var(--c4);text-decoration-thickness:2px}
.acard:hover .thumb{border-color:var(--ink)}
.acard small{display:block;font-weight:700;color:var(--muted);text-transform:uppercase;font-size:.75rem;letter-spacing:.04em}
@media (max-width:480px){.acard{gap:.9rem}.acard .thumb{width:4.75rem;height:4.75rem;border-radius:1.1rem}}


/* =====================================================================
   TEMA 8-BIT (videogame retro) - sovrascrive i colori e lo stile di base.
   Per tornare allo stile classico basta cancellare questo blocco.
   ===================================================================== */
@font-face{font-family:"Press Start 2P";src:url("../fonts/PressStart2P.woff2") format("woff2");font-display:swap}
:root{
  color-scheme:dark;
  --bg:#2b2c32; --panel:#383a43; --ink:#f4f4f8; --muted:#f4f4f8; --line:#555867; --link:#fff200; --tile:#383a43;
  --field:#1f2025;   /* campi del modulo: un gradino più scuri dello sfondo, per distinguerli */
  --px:"Press Start 2P","Courier New",monospace;       /* font pixel: solo per titoli ed elementi di interfaccia */
}
::selection{background:var(--c2);color:#000}
body{background-color:var(--bg);color:var(--ink);
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:16px 16px}
/* righe da vecchio monitor CRT (leggerissime, non cliccabili) */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:200;background:repeating-linear-gradient(0deg,rgba(0,0,0,.06) 0 1px,transparent 1px 4px)}
@media (prefers-contrast:more){body::after{display:none}}

/* barre colorate: restano in alto e in basso */
.bars{height:16px}

/* menu */
.site-header{background:var(--bg);border-bottom:4px solid var(--ink);box-shadow:0 4px 0 #000}
.brand{font:400 .78rem/1.4 var(--px);text-transform:uppercase}
.nav a{font:400 .62rem/1.4 var(--px);text-transform:uppercase;padding:.75rem .7rem;border-radius:0}
.nav a:hover,.nav a[aria-current]{background:var(--c2);color:#000}
.nav a.yt{background:var(--c1);color:#fff;border:3px solid var(--ink);box-shadow:4px 4px 0 #000;margin-left:.7rem}
.nav a.yt:hover{background:var(--c2);color:#000;text-decoration:none;transform:translate(2px,2px);box-shadow:2px 2px 0 #000}
.burger{border:3px solid var(--ink);border-radius:0}
@media (max-width:640px){.js .nav{border-bottom:4px solid var(--ink)}.js .nav a{border-radius:0}}

/* titoli */
h1{font:400 clamp(1.2rem,3.3vw,2.4rem)/1.4 var(--px);letter-spacing:0;text-shadow:4px 4px 0 var(--c1)}
.hero h1::after{content:"_";color:var(--c2);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
h2{font:400 clamp(.85rem,1.5vw,1.1rem)/1.6 var(--px);color:var(--c2);margin:0 0 1.1rem}
h2::before{content:"▶ ";color:var(--c1)}
h3{font:400 .74rem/1.7 var(--px)}
.hero{margin:3rem 0 1.5rem;gap:2rem}
.hero-logo{width:clamp(6rem,15vw,11rem);filter:drop-shadow(6px 6px 0 #000)}
.lead{max-width:48rem;font-size:1.2rem}
.motto{color:var(--c1)}
.small{color:var(--muted)}

/* pulsanti: ombra "pixel" che si schiaccia al click */
.cta a,.btn-start,.yt-box{border:4px solid var(--ink);border-radius:0;box-shadow:6px 6px 0 #000;text-decoration:none;transition:none}
.cta a,.btn-start{font:400 .68rem/1.5 var(--px);text-transform:uppercase;padding:1rem 1.2rem;background:var(--panel);color:var(--ink)}
.cta a.main,.btn-start{background:var(--c1);color:#fff}
.cta a:hover,.btn-start:hover,.yt-box:hover,.pager a:hover{background:var(--c2);color:#000;text-decoration:none;transform:translate(3px,3px);box-shadow:3px 3px 0 #000}
.cta a:active,.btn-start:active,.yt-box:active{transform:translate(6px,6px);box-shadow:0 0 0 #000}
.pager a{border:4px solid var(--ink);border-radius:0;background:var(--panel);box-shadow:6px 6px 0 #000;font-weight:700;transition:none}
.pager small{font:400 .55rem/1.6 var(--px);color:var(--c3)}
.pager a:hover small{color:#000}
.yt-box{display:block;margin-top:1.6rem;background:var(--c1);color:#fff;padding:1rem;font:400 .6rem/1.9 var(--px);text-transform:uppercase}

/* pannelli: parodie della home, elenchi di articoli, domande frequenti */
.guide{border-top:0;display:grid;gap:1.4rem;grid-template-columns:1fr}
.show{background:var(--panel);border:4px solid var(--ink);box-shadow:6px 6px 0 #000;padding:1rem;align-items:flex-start}
.tile{border-radius:0;border:4px solid var(--ink)}
.tile.ph{font-family:var(--px);font-size:1.2rem;border:4px solid var(--ink)}
.alist{border-top:0;display:grid;gap:1.3rem;grid-template-columns:1fr}
.alist li{background:var(--panel);border:4px solid var(--line);box-shadow:5px 5px 0 #000;padding:1rem}
.acard .thumb{border-radius:0;border:3px solid var(--ink)}
.acard .t{color:var(--ink)}
.acard:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 #000}
.acard:hover .t{text-decoration-color:var(--c2)}
.acard:hover .thumb{border-color:var(--c2)}
.acard small,.alist small{font:400 .55rem/1.8 var(--px);color:var(--c3);text-transform:uppercase}
details{background:var(--panel);border:4px solid var(--line);padding:.9rem 1.1rem;margin:0 0 1rem}
details[open]{border-color:var(--ink)}
summary{font:400 .68rem/1.7 var(--px)}
details[open] summary{color:var(--c2)}
#domande{max-width:54rem}
@media (min-width:56rem){.guide,.alist{grid-template-columns:1fr 1fr}.side .alist{grid-template-columns:1fr}}

/* articolo: testo + colonna laterale su desktop */
.crumbs{font:400 .58rem/1.9 var(--px);color:var(--muted)}
.crumbs a{color:var(--ink)}
.part{font:400 .58rem/1.4 var(--px);background:var(--c4);color:#fff;border:3px solid var(--ink);border-radius:0;padding:.55rem .75rem;margin-bottom:1rem}
.progress{height:22px;border:4px solid var(--ink);border-radius:0;background:#000;padding:2px;margin-bottom:1.8rem}
.progress i{background:repeating-linear-gradient(90deg,var(--c3) 0 10px,transparent 10px 14px)}
.article .body{max-width:46rem;font-size:1.1rem}
.article .body blockquote{border-left:6px solid var(--c2);background:var(--panel);padding:1rem 1.2rem;color:var(--ink)}
.gal,.img-break{border:4px solid var(--ink);border-radius:0;background:var(--panel);box-shadow:6px 6px 0 #000}
.js .gal.multi .gal-btn{border-radius:0;background:var(--c1);border:3px solid var(--ink)}
.gal-count{border-radius:0;font:400 .55rem/1.6 var(--px)}
.layout{display:block}
.side{margin-top:2.5rem}
.side h2{font-size:.8rem}
.side .toc{background:var(--panel);border:4px solid var(--ink);box-shadow:6px 6px 0 #000;padding:1rem 1rem 1rem;margin:0;list-style:none;counter-reset:t}
.side .toc li,.toc li{counter-increment:t}
.toc li::before{content:counter(t,decimal-leading-zero);font:400 .6rem/1 var(--px);color:var(--c1);margin-right:.6rem}
.toc{list-style:none;padding-left:0}
.toc a{text-decoration-color:var(--c4)}
.toc [aria-current]{color:var(--c3);text-decoration:none}
.side .acard .thumb{width:3.6rem;height:3.6rem}
.side .alist li{padding:.7rem}
@media (min-width:62rem){
  .layout{display:grid;grid-template-columns:minmax(0,1fr) 20rem;gap:3rem;align-items:start}
  .side{margin-top:0;position:sticky;top:6.5rem}
}

/* footer */
footer{border-top:4px dashed var(--line);margin-top:2.5rem;padding-top:1.6rem}
.story p{max-width:52rem}
footer{border-top:0;padding-top:0}
footer p:first-child{border-top:4px dashed var(--line);padding-top:1.4rem}


/* =====================================================================
   TEMA "PALINSESTO TV" - titoli a barra colorata, canali P101..., menu e
   footer rossi. Sta in fondo al file e sovrascrive i blocchi precedenti.
   ===================================================================== */
:root{
  --red:#d42f50;          /* rosso del menu, del footer e dei bordi dei pannelli */
  --red-dark:#8f1a33;
  --cy:#00f2ff; --ye:#fff200; --gr:#00f21d;   /* azzurro, giallo, verde dei titoli */
  --scan:repeating-linear-gradient(0deg,rgba(0,0,0,.05) 0 1px,transparent 1px 4px);   /* righe di sezioni, menu e footer */
}

/* ---- Titoli di sezione: barra a tutta larghezza (azzurro / giallo / verde) ---- */
main h2,.side h2,.article .body h2{
  --hc:var(--cy);
  display:flex;align-items:center;gap:.8rem;
  font:400 clamp(.7rem,1.3vw,.9rem)/1.5 var(--px);text-transform:uppercase;letter-spacing:.04em;
  color:#000;background:var(--scan),var(--hc);
  padding:.8rem 1rem;margin:0 0 1.2rem;
  box-shadow:0 5px 16px rgba(0,0,0,.45)}
main h2::before,.side h2::before,.article .body h2::before{
  content:"";flex:none;width:.6em;height:.6em;background:#000;margin:0}
.article .body h2{margin:2.2rem 0 1rem}
#il-canale h2{--hc:var(--cy)}
#le-parodie h2{--hc:var(--ye)}
#domande h2{--hc:var(--gr)}
.article .body h2:nth-of-type(3n+2){--hc:var(--ye)}
.article .body h2:nth-of-type(3n){--hc:var(--gr)}
.side .toc+h2,.side .alist+h2{--hc:var(--ye)}

/* ---- La storia del canale ---- */
.story p{max-width:52rem;line-height:1.85}
a.more{font:400 .78rem/1.6 var(--px);color:var(--ye);text-decoration:underline;text-decoration-thickness:3px;
  text-decoration-color:var(--ye);text-underline-offset:.4em}
a.more:hover{color:#fff;text-decoration-color:#fff;background-size:0}

/* ---- Parodie: pannelli con numero di canale e bordo rosso ---- */
.guide{counter-reset:ch 100;gap:.6rem 1.3rem}
.show{counter-increment:ch;align-items:center;gap:1.2rem;
  background:rgba(255,255,255,.045);border:0;border-left:6px solid var(--red);box-shadow:none;
  padding:1rem 1.1rem 1rem .9rem}
.show::before{content:"P" counter(ch);flex:none;width:3.1rem;font:400 .6rem/1 var(--px);color:var(--cy)}
.show .txt{flex:1}
.show h3{font:400 .82rem/1.7 var(--px);margin:0 0 .3rem}
.show p{margin:0;line-height:1.7}
.show p.small{margin-top:.6rem}
.tile{width:6rem;height:6rem;border:2px solid #fff;border-radius:0}
.tile.ph{border:2px solid #fff}
@media (max-width:480px){
  .show{flex-wrap:wrap;gap:.7rem 1rem}
  .show::before{flex-basis:100%}
  .tile{width:4.75rem;height:4.75rem}
  .show .txt{flex:1 1 10rem}
}

/* ---- Domande frequenti ---- */
details{background:rgba(255,255,255,.045);border:0;border-left:6px solid var(--red);padding:1.05rem 1.3rem;margin:0 0 .8rem}
details[open]{border-left-color:var(--red)}
summary{display:flex;align-items:center;gap:1rem;list-style:none;font:400 .78rem/1.7 var(--px);color:var(--ink)}
summary::-webkit-details-marker{display:none}
summary::before{content:"";flex:none;border-left:14px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent;transition:none}
details[open] summary::before{transform:rotate(90deg);border-left-color:var(--gr)}
details[open] summary{color:var(--gr)}
details p{margin:.8rem 0 0 1.9rem;line-height:1.7}

/* ---- Menu in alto: sempre rosso ---- */
.site-header{background:var(--scan),var(--red);color:#fff;border-bottom:4px solid var(--red-dark);box-shadow:0 4px 0 #000}
.brand{color:#fff}
.nav a{color:#fff}
.nav a:hover,.nav a[aria-current]{background:var(--ye);color:#000}
.nav a.yt{background:var(--bg);color:var(--ye);border:3px solid #fff;box-shadow:4px 4px 0 #000}
.nav a.yt:hover{background:var(--ye);color:#000}
.burger{background:transparent;color:#fff;border-color:#fff}
@media (max-width:640px){
  .js .nav{background:var(--red);border-bottom:4px solid var(--red-dark)}
  .js .nav a{border-bottom:1px solid rgba(255,255,255,.35)}
  .js .nav a.yt{border:3px solid #fff}
}

/* ---- Footer: fascia rossa a tutta larghezza ---- */
footer{max-width:none;margin:3rem 0 0;padding:1.8rem max(1.5rem,calc((100% - 72rem)/2 + 1.5rem)) 2rem;
  background:var(--scan),var(--red);color:#fff;border:0;font-size:.95rem}
footer p,footer p:first-child{border-top:0;padding-top:0;margin:.55rem 0}
footer a{color:#fff;font:400 .72rem/1.8 var(--px);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.3em;background:none}
footer a:hover{color:var(--ye)}
.story p a.more,.story p a.more:hover{background:none;padding-bottom:0}

/* ---- Titolo principale senza ombra + motto in font 8-bit ---- */
h1{text-shadow:none}
.motto{font:400 .75rem/1.9 var(--px);font-style:normal;color:var(--c2)}

/* ---- Font del testo: Courier Prime, ospitato sul sito (in /fonts) ----
   Niente Google Fonts: così il browser dei visitatori non contatta server esterni (privacy) e le pagine caricano più in fretta.
   Licenza: SIL Open Font License, testo in /fonts/OFL-CourierPrime.txt */
@font-face{font-family:"Courier Prime";font-style:normal;font-weight:400;src:url("../fonts/CourierPrime-Regular.woff2") format("woff2");font-display:swap}
@font-face{font-family:"Courier Prime";font-style:normal;font-weight:700;src:url("../fonts/CourierPrime-Bold.woff2") format("woff2");font-display:swap}
@font-face{font-family:"Courier Prime";font-style:italic;font-weight:400;src:url("../fonts/CourierPrime-Italic.woff2") format("woff2");font-display:swap}
@font-face{font-family:"Courier Prime";font-style:italic;font-weight:700;src:url("../fonts/CourierPrime-BoldItalic.woff2") format("woff2");font-display:swap}
:root{--body-font:"Courier Prime","Courier New",Courier,monospace}
body{font-family:var(--body-font);line-height:1.7}
.lead{font-size:1.15rem}
.story p,.show p,details p,.article .body{line-height:1.75}

/* =====================================================================
   RICERCA STILE TELEVIDEO (pannello "Cerca" + ricerca per numero di pagina)
   ===================================================================== */
.search-btn{order:3;display:inline-flex;align-items:center;gap:.55rem;cursor:pointer;margin-left:.4rem;
  background:var(--bg);color:var(--ye);border:3px solid #fff;box-shadow:4px 4px 0 #000;padding:.6rem .75rem;
  font:400 .62rem/1.4 var(--px);text-transform:uppercase}
.search-btn:hover,.search-btn:focus-visible{background:var(--ye);color:#000}
@media (max-width:640px){
  .js .search-btn{order:2;margin-left:auto;padding:0;width:2.75rem;height:2.75rem;justify-content:center}
  .js .search-btn .lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .js .burger{order:3;margin-left:.4rem}
}
html:not(.js) .search-btn{display:none}
body.tt-open{overflow:hidden}

.tt{position:fixed;inset:0;z-index:100;display:flex;align-items:flex-start;justify-content:center;
  padding:4.5rem 1rem 1rem;overflow:auto;background:rgba(4,5,10,.88)}
.tt[hidden]{display:none}
.tt-screen{position:relative;width:100%;max-width:46rem;background:#000;border:4px solid #fff;
  box-shadow:8px 8px 0 #000,0 0 0 4px var(--red);font-family:var(--px);color:#fff;overflow:hidden}
.tt-screen::after{content:"";position:absolute;inset:0;pointer-events:none;background:var(--scan)}
.tt-head{display:flex;align-items:center;gap:.9rem;background:#1414c8;padding:.65rem .8rem;font-size:.6rem;line-height:1.4}
.tt-logo{color:var(--ye)}
.tt-page{color:#fff;margin-left:auto;min-width:4.5ch;text-align:right}
.tt-clock{color:var(--cy);font-size:.5rem;text-transform:uppercase;white-space:nowrap}
.tt-x{flex:none;background:none;border:2px solid #fff;color:#fff;font:400 .7rem/1 var(--px);width:2rem;height:2rem;cursor:pointer}
.tt-x:hover,.tt-x:focus-visible{background:var(--red);border-color:var(--red)}
.tt-form{padding:1rem 1rem .6rem;margin:0}
.tt-form label{display:block;color:var(--cy);font-size:.55rem;line-height:1.8;margin-bottom:.6rem}
.tt-field{display:flex;align-items:center;border:3px solid var(--cy);background:#000}
.tt-field:focus-within{box-shadow:0 0 0 3px #000,0 0 0 6px var(--ye)}
.tt-field span{color:var(--ye);padding:0 .2rem 0 .8rem;font-size:.9rem}
.tt-field input{flex:1;min-width:0;background:#000;color:var(--ye);border:0;outline:0;caret-color:var(--ye);
  font:400 .9rem/1.4 var(--px);padding:.85rem .7rem}
.tt-field input::placeholder{color:#6d6f3a}
.tt-body{padding:.3rem 1rem 1rem;min-height:13rem;max-height:52vh;overflow-y:auto}
.tt-hint{font-size:.55rem;line-height:2;color:var(--gr);margin:.4rem 0 .6rem}
.tt-hint.warn{color:var(--ye)}
.tt-list{display:block}
.tt-r{display:grid;grid-template-columns:auto 1fr auto;gap:.15rem .9rem;align-items:baseline;padding:.7rem .7rem .7rem .6rem;
  margin-bottom:.25rem;border-left:6px solid var(--red);background:rgba(255,255,255,.05);color:#fff;text-decoration:none;cursor:pointer}
.tt-r .tt-n{color:var(--ye);font-size:.6rem}
.tt-r .tt-t{font-size:.68rem;line-height:1.7}
.tt-r .tt-k{color:var(--cy);font-size:.48rem;text-transform:uppercase}
.tt-r .tt-s{grid-column:2/4;font-family:var(--body-font,monospace);font-size:.88rem;line-height:1.5;color:#f0f1f6}
.tt-r.sel{background:var(--cy);border-left-color:#fff;color:#000}
.tt-r.sel .tt-n,.tt-r.sel .tt-k,.tt-r.sel .tt-s{color:#000}
.tt-seek{text-align:center;padding:2.2rem .5rem 1rem}
.tt-big{font-size:clamp(2.2rem,10vw,4.2rem);line-height:1.3;color:var(--ye);letter-spacing:.05em}
.tt-big.found{color:var(--gr)}
.tt-big.nf{color:#ff4d6d}
.tt-msg{font-size:.7rem;line-height:2;margin:.8rem 0 .4rem;color:#fff}
.tt-msg.nf-msg{color:#ff4d6d;font-size:.8rem;animation:tt-blink 1s steps(1) infinite}
@keyframes tt-blink{50%{opacity:.15}}
.tt-fast{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.tt-f{border:0;border-top:3px solid #000;cursor:pointer;padding:.7rem .3rem;color:#000;font:400 .5rem/1.5 var(--px);text-transform:uppercase;text-align:center;overflow:hidden;text-overflow:ellipsis}
.tt-f small{display:block;font-size:.45rem;opacity:.75;margin-top:.15rem}
.tt-f:hover,.tt-f:focus-visible{filter:brightness(1.15);text-decoration:underline}
.tt-f.f0{background:#ff3b3b}.tt-f.f1{background:var(--gr)}.tt-f.f2{background:var(--ye)}.tt-f.f3{background:var(--cy)}
.tt-seek .tt-hint{margin-top:1.4rem}
@media (max-width:640px){
  .tt{padding:0}
  .tt-screen{border:0;box-shadow:none;min-height:100%;display:flex;flex-direction:column}
  .tt-body{flex:1;max-height:none}
  .tt-clock{display:none}
  .tt-page{margin-left:auto}
}

/* ---- Loghi sempre interi: il lato più lungo dell'immagine occupa il lato più lungo del riquadro ---- */
.tile.contain,.acard .thumb.contain{background:#fff;display:flex;align-items:center;justify-content:center}
.tile.contain{padding:.45rem}
.tile.contain img,.acard .thumb.contain img{width:100%;height:100%;object-fit:contain;padding:0}
.acard .thumb.contain{padding:.4rem}
.brand img,.hero-logo{object-fit:contain}

/* ---- Falsa interferenza sul logo (js/glitch.js) ---- */
.sig{position:relative;display:block;flex:none;line-height:0}
.sig .hero-logo{aspect-ratio:1/1;height:auto;object-fit:contain}
.sig::before,.sig::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0}
.sig::after{                                            /* neve + righe */
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.22) 0 2px,transparent 2px 5px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:screen}
.sig::before{                                           /* striscia che "scorre" */
  top:auto;bottom:auto;height:16%;background:rgba(255,255,255,.55);mix-blend-mode:overlay}
.sig.sig-on .hero-logo{animation:sig-jit .16s steps(1) infinite}
.sig.sig-on::after{opacity:.35;animation:sig-snow .12s steps(1) infinite}
.sig.sig-on::before{opacity:1;animation:sig-roll .5s linear infinite}
.sig.sig-hard .hero-logo{filter:contrast(1.5) saturate(1.8) drop-shadow(-5px 0 #f0f) drop-shadow(5px 0 #0ff)}
.sig.sig-hard::after{opacity:.7}
.hero-logo.sig-old{image-rendering:pixelated;filter:contrast(1.2) saturate(1.3) drop-shadow(-3px 0 #f0f) drop-shadow(3px 0 #0ff)}
.sig.sig-hard .hero-logo.sig-old{filter:contrast(1.6) saturate(2) drop-shadow(-6px 0 #f0f) drop-shadow(6px 0 #0ff)}
@keyframes sig-jit{
  0%{transform:translateX(0);clip-path:inset(0 0 0 0)}
  25%{transform:translateX(-6px);clip-path:inset(12% 0 55% 0)}
  50%{transform:translateX(7px);clip-path:inset(0 0 0 0)}
  75%{transform:translateX(-3px);clip-path:inset(60% 0 8% 0)}}
@keyframes sig-snow{0%{background-position:0 0,0 0}25%{background-position:0 2px,37px 21px}50%{background-position:0 4px,-23px 55px}75%{background-position:0 1px,61px -17px}}
@keyframes sig-roll{0%{top:-16%}100%{top:100%}}
@media (prefers-reduced-motion:reduce){.sig::before,.sig::after{display:none}}
/* la neve e la striscia compaiono solo dentro la forma del logo (maschera impostata da js/glitch.js) */
.sig::before,.sig::after{
  -webkit-mask-image:var(--sig-mask);mask-image:var(--sig-mask);
  -webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}

/* =====================================================================
   MENU: tasto Cerca con lo stesso effetto "premuto" degli altri pulsanti
   ===================================================================== */
.search-btn{transition:none}
.search-btn:hover,.search-btn:focus-visible{background:var(--ye);color:#000;transform:translate(2px,2px);box-shadow:2px 2px 0 #000}
.search-btn:active{transform:translate(4px,4px);box-shadow:0 0 0 #000}

/* =====================================================================
   SOCIAL: icona nel riquadro + nome piccolo sotto (stessa grafica dei pulsanti di prima)
   ===================================================================== */
.cta{gap:1rem 1.1rem}
.cta a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.7rem;
  flex:0 0 auto;width:7.2rem;padding:1rem .5rem .85rem;text-align:center}
.cta a svg{display:block;width:2.6rem;height:2.6rem;color:var(--ye);fill:currentColor}
.cta a span{display:block;font:400 .5rem/1 var(--px);letter-spacing:.04em;color:#fff;text-transform:uppercase}
.cta a:hover svg,.cta a:hover span{color:#000}
@media (max-width:480px){.cta a{flex:1 1 28%;width:auto;min-width:5.6rem}.cta a svg{width:2.2rem;height:2.2rem}}

/* =====================================================================
   HOME: le card delle parodie portano alla loro pagina (tutta la card è cliccabile)
   ===================================================================== */
.show{position:relative}
.show h3 a{color:inherit;text-decoration:none}
.show h3 a::after{content:"";position:absolute;inset:0}
.show:hover{background:rgba(255,255,255,.09)}
.show:hover h3 a,.show h3 a:focus-visible{text-decoration:underline;text-decoration-color:var(--ye);text-underline-offset:.3em}
.show h3 a:focus-visible{outline:3px solid var(--ye);outline-offset:4px}
#le-parodie>p{margin-top:1.4rem}

/* Lente del tasto Cerca: segue il colore del testo (gialla, nera in hover) */
.search-btn .lens{flex:none;display:block;width:1.35rem;height:1.35rem}
.search-btn .lens{width:1.5rem;height:1.5rem}
@media (max-width:640px){.js .search-btn .lens{width:1.75rem;height:1.75rem}}

/* ---- Footer: icone dei social sotto le scritte ---- */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
footer .foot-social{display:flex;flex-wrap:wrap;gap:1rem;margin:1.2rem 0 0}
footer .foot-social a{display:inline-flex;align-items:center;justify-content:center;width:2.6rem;height:2.6rem;color:#fff;background:none;text-decoration:none}
footer .foot-social svg{display:block;width:1.8rem;height:1.8rem}
footer .foot-social a:hover,footer .foot-social a:focus-visible{color:var(--ye);transform:translateY(-2px)}

/* =====================================================================
   MODULO CONTATTI
   ===================================================================== */
.cform{max-width:42rem}
.cform .field{margin:0 0 1.3rem}
.cform label{display:block;font:400 .6rem/1.8 var(--px);color:var(--cy);text-transform:uppercase;margin-bottom:.5rem}
.cform .opt{color:var(--muted);text-transform:none}
.cform input[type=text],.cform input[type=email],.cform select,.cform textarea{
  display:block;width:100%;box-sizing:border-box;background:var(--field);color:#fff;border:3px solid #fff;border-radius:0;
  font:400 1rem/1.5 var(--body-font,monospace);padding:.8rem .9rem}
.cform textarea{resize:vertical;min-height:9rem}
.cform input:focus,.cform select:focus,.cform textarea:focus{outline:0;border-color:var(--ye);box-shadow:0 0 0 3px #000,0 0 0 6px var(--ye)}
.cform input:user-invalid,.cform select:user-invalid,.cform textarea:user-invalid{border-color:#ff4d6d}
.cform .check label{display:flex;gap:.8rem;align-items:flex-start;font:400 .95rem/1.6 var(--body-font,monospace);color:#fff;text-transform:none;cursor:pointer}
.cform .check input{flex:none;width:1.4rem;height:1.4rem;margin:.15rem 0 0;accent-color:var(--ye)}
.cform .check a{color:var(--ye)}
.cform .hint{font:400 .6rem/1.9 var(--px);color:var(--gr);margin:.5rem 0 0}
.cform .hint.warn{color:var(--ye)}
.cform button{cursor:pointer}
.cform button[disabled]{opacity:.55;cursor:wait;filter:grayscale(.4)}
/* trappola per i bot: fuori schermo, non display:none (alcuni bot saltano i campi nascosti) */
.hp{position:absolute!important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.cerr{max-width:42rem;margin:0 0 1.5rem;padding:1rem 1.2rem;background:rgba(255,77,109,.12);border-left:6px solid #ff4d6d}
.cerr p{margin:0 0 .4rem;font:400 .62rem/1.9 var(--px);color:#ff9fb0;text-transform:uppercase}
.cerr ul{margin:0;padding-left:1.2rem}
.cerr:focus{outline:3px solid var(--ye);outline-offset:3px}
.cok{max-width:42rem;margin:0 0 1.3rem;padding:1rem 1.2rem;background:rgba(0,242,29,.1);border-left:6px solid var(--gr)}

/* =====================================================================
   PAGINE LEGALI (privacy, termini di utilizzo, disclaimer)
   ===================================================================== */
.legal .upd{margin:0 0 1.6rem}
.article .body ul{padding-left:1.4rem}
.article .body li{margin:0 0 .55rem}
.article .body li::marker{color:var(--c1)}
.legal .pager{margin-top:3rem}
/* link nelle pagine legali e nella casella privacy del modulo: testo giallo con sottolineatura gialla a tinta unita (niente palette) */
.legal .body a,.cform .check a{color:var(--ye);font-weight:600;background:none;padding-bottom:0;
  text-decoration:underline;text-decoration-color:var(--ye);text-decoration-thickness:2px;text-underline-offset:.22em}
.legal .body a:hover,.legal .body a:focus-visible,.cform .check a:hover,.cform .check a:focus-visible{color:#fff;background:none;text-decoration-color:#fff;text-decoration-thickness:3px}


/* ---- Domande frequenti in fondo all'articolo (blocco facoltativo, stesso stile di "Domande a caso" in home) ---- */
.faq{max-width:46rem;margin:2.5rem 0 0}
.faq h2{--hc:var(--gr)}
.faq details p a{overflow-wrap:anywhere}

/* ---- Fine articolo: date di pubblicazione/aggiornamento e (solo in localhost) pulsante Modifica ---- */
.art-end{max-width:38rem;margin:2rem 0 0;padding-top:1rem;border-top:2px dashed var(--line)}
.art-end p{margin:0 0 .6rem}
.pubinfo{color:var(--muted);font-size:.9rem}
.sched{background:#fff7d6;border:2px solid #f2c230;color:#5c4600;padding:.5rem .8rem;font-weight:600}
.admin-edit a{display:inline-block;font:400 .68rem/1.5 var(--px);text-transform:uppercase;padding:.6rem .9rem;border:3px solid var(--ye);color:var(--ye);text-decoration:none;background:none}
.admin-edit a:hover,.admin-edit a:focus-visible{background:var(--ye);color:#000}

/* ---- Questionario "Richieste commerciali" (pagina Contatti): una domanda alla volta, risposte a bottoni ---- */
.quiz #quiz-app{max-width:40rem;outline:none}
.quiz-prog{margin:0 0 .4rem;color:var(--muted);font-size:.9rem}
.quiz-bar{height:.6rem;background:var(--panel);border:2px solid var(--line);margin:0 0 1.2rem}
.quiz-bar span{display:block;height:100%;background:var(--gr)}
.quiz .quiz-q{margin:0 0 1rem;font-size:1.3rem;line-height:1.3;color:var(--ink)}
.quiz-opts{display:grid;gap:.8rem}
.quiz-opt{display:block;width:100%;text-align:left;font-family:inherit;font-weight:600;font-size:1rem;line-height:1.35;padding:.9rem 1.1rem;background:var(--panel);color:var(--ink);
  border:4px solid var(--ink);border-radius:0;box-shadow:6px 6px 0 #000;cursor:pointer}
.quiz-opt:hover,.quiz-opt:focus-visible{background:var(--c2);color:#000;transform:translate(3px,3px);box-shadow:3px 3px 0 #000}
.quiz-opt:active{transform:translate(6px,6px);box-shadow:0 0 0 #000}
.quiz-back{margin:1.2rem 0 0;padding:.4rem .2rem;background:none;border:0;color:var(--ye);font:inherit;font-weight:600;text-decoration:underline;text-underline-offset:.2em;cursor:pointer}
.quiz-back:hover,.quiz-back:focus-visible{color:var(--ink)}
.quiz-res{font-size:1.15rem;margin:0 0 1rem}
.quiz-mail{margin:0 0 1rem;font-size:1.4rem;font-weight:700;overflow-wrap:anywhere}
.quiz-mail a{color:var(--ye)}
.quiz-mail a:hover,.quiz-mail a:focus-visible{color:var(--ink)}
.quiz .cta{margin:1rem 0 1.2rem}