/* =========================================================================
   Mini Drama
   -------------------------------------------------------------------------
   Nove visitatori su dieci arrivano qui da un telefono, cercando video
   verticali. Quindi la larghezza base e' quella del telefono e il desktop e'
   il caso aggiunto dopo, non il contrario: niente griglie che si comprimono
   fino a rompersi, ma un impianto stretto a cui su schermo largo si affianca
   un cassetto sempre aperto.
   ========================================================================= */

:root{
  color-scheme: light dark;

  /* Il fucsia e' il colore del marchio. Quello scuro esiste perche' lo stesso
     rosa che si legge su fondo nero, su fondo bianco scende sotto il rapporto
     di contrasto minimo per il testo. */
  --brand:#ff2e88;
  --brand-ink:#c2185b;
  --brand-soft:rgba(255,46,136,.12);

  --bg:#ffffff;
  --panel:#fbf7f9;
  --sunk:#f4eaf0;
  --ink:#170910;
  --ink-dim:#6d5a64;
  --rule:#efe2e9;
  --rule-hard:#e2cfda;

  --radius:16px;
  --radius-sm:10px;
  --shadow:0 1px 2px rgba(23,9,16,.05), 0 8px 24px -12px rgba(23,9,16,.16);

  --drawer-w:264px;
  --page:760px;
  --gutter:16px;

  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
}

/* Il tema scuro segue il sistema, ma un interruttore esplicito nel documento
   vince sempre: chi ha scelto ha scelto. */
@media (prefers-color-scheme: dark){
  :root:not([data-skin="light"]){
    --brand-ink:#ff5c9e;
    --brand-soft:rgba(255,46,136,.16);
    --bg:#0e060b;
    --panel:#180d14;
    --sunk:#21121b;
    --ink:#fbf4f8;
    --ink-dim:#a8919e;
    --rule:#2a1922;
    --rule-hard:#3b2430;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.7);
  }
}
:root[data-skin="dark"]{
  --brand-ink:#ff5c9e;
  --brand-soft:rgba(255,46,136,.16);
  --bg:#0e060b;
  --panel:#180d14;
  --sunk:#21121b;
  --ink:#fbf4f8;
  --ink-dim:#a8919e;
  --rule:#2a1922;
  --rule-hard:#3b2430;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.7);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.65 var(--sans);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--brand-ink);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{line-height:1.2;letter-spacing:-.02em;margin:0;text-wrap:balance}
p{margin:0 0 1em}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}

.u-hide{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--brand);color:#fff;padding:10px 16px;border-radius:0 0 8px 0}
.skip:focus{left:0}

/* ---------- barra in testa ------------------------------------------------
   Resta attaccata in alto perche' su telefono e' l'unico accesso al cassetto:
   una barra che scorre via lascia il lettore senza navigazione a meta' pagina. */
.masthead{
  position:sticky;top:0;z-index:40;
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--rule);
}
.masthead-in{
  max-width:calc(var(--page) + var(--drawer-w) + 64px);
  margin:0 auto;padding:0 var(--gutter);
  height:56px;display:flex;align-items:center;gap:12px;
}
.burger{
  appearance:none;border:1px solid var(--rule-hard);background:var(--panel);color:var(--ink);
  width:38px;height:38px;border-radius:11px;display:grid;place-items:center;cursor:pointer;flex:0 0 auto;
}
.burger:hover{border-color:var(--brand)}
.burger span{display:block;width:16px;height:1.5px;background:currentColor;border-radius:2px;position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:16px;height:1.5px;background:currentColor;border-radius:2px}
.burger span::before{top:-5px}
.burger span::after{top:5px}

.wordmark{display:flex;align-items:center;gap:8px;font-weight:800;font-size:16px;letter-spacing:-.03em;color:var(--ink)}
.wordmark:hover{text-decoration:none}
.wordmark b{color:var(--brand-ink);font-weight:800}
.masthead-end{margin-left:auto;display:flex;align-items:center;gap:8px}
.skin-toggle{
  appearance:none;border:1px solid var(--rule-hard);background:var(--panel);color:var(--ink-dim);
  width:38px;height:38px;border-radius:11px;display:grid;place-items:center;cursor:pointer;font-size:15px;line-height:1;
}
.skin-toggle:hover{color:var(--brand-ink);border-color:var(--brand)}

/* ---------- impianto ------------------------------------------------------ */
.frame{
  max-width:calc(var(--page) + var(--drawer-w) + 64px);
  margin:0 auto;padding:0 var(--gutter);
  display:grid;grid-template-columns:1fr;gap:32px;
}
.column{min-width:0;padding-bottom:56px}

/* ---------- cassetto ------------------------------------------------------
   Su telefono e' un pannello che scorre da sinistra; da 1040px in su diventa
   una colonna fissa e il pulsante sparisce. Stesso markup, nessun doppione. */
.drawer{
  position:fixed;inset:0 auto 0 0;width:min(84vw,300px);z-index:60;
  background:var(--bg);border-right:1px solid var(--rule);
  transform:translateX(-102%);transition:transform .22s ease;
  overflow-y:auto;overscroll-behavior:contain;
  padding:14px 12px 40px;
}
.drawer[data-open="1"]{transform:none}
.veil{position:fixed;inset:0;background:rgba(10,4,8,.5);z-index:50;opacity:0;pointer-events:none;transition:opacity .22s ease}
.veil[data-open="1"]{opacity:1;pointer-events:auto}
.drawer-head{display:flex;justify-content:flex-end;margin-bottom:6px}
.drawer-close{appearance:none;border:0;background:var(--sunk);color:var(--ink);width:34px;height:34px;border-radius:10px;cursor:pointer;font-size:17px;line-height:1}

.drawer-set{list-style:none;margin:0 0 6px;padding:0 0 10px;border-bottom:1px solid var(--rule)}
.drawer-set:last-of-type{border-bottom:0}
.drawer-cap{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-dim);padding:12px 10px 6px;margin:0}
.drawer-link{
  display:flex;align-items:center;gap:9px;
  padding:8px 10px;border-radius:10px;color:var(--ink);font-size:14.5px;font-weight:500;line-height:1.35;
}
.drawer-link:hover{background:var(--sunk);text-decoration:none}
.drawer-link[aria-current]{background:var(--brand-soft);color:var(--brand-ink);font-weight:700}
.drawer-link .mark{flex:0 0 auto;width:18px;text-align:center;opacity:.65;font-size:13px}
.drawer-link .tail{margin-left:auto;font-size:11.5px;font-weight:700;color:var(--ink-dim);background:var(--sunk);border-radius:6px;padding:2px 6px}
.drawer-link[aria-current] .tail{background:#fff2}
.drawer .cta{margin:12px 6px}

@media (min-width:1040px){
  .frame{grid-template-columns:var(--drawer-w) minmax(0,1fr)}
  .burger{display:none}
  .veil{display:none}
  .drawer{
    position:sticky;top:56px;transform:none;width:auto;z-index:1;
    height:calc(100dvh - 56px);border-right:1px solid var(--rule);
    padding:8px 12px 40px;margin-left:calc(var(--gutter) * -1);
  }
  .drawer-head{display:none}
}

/* ---------- insegna -------------------------------------------------------
   L'immagine non e' decorativa: e' un fotogramma vero della serie. Il velo
   sopra serve a tenere leggibile il titolo qualunque cosa ci sia sotto. */
.billboard{position:relative;border-radius:var(--radius);overflow:hidden;margin:16px 0 28px;background:var(--sunk);isolation:isolate}
.billboard-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.billboard::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(8,3,6,.25) 0%,rgba(8,3,6,.72) 58%,rgba(8,3,6,.92) 100%);
}
.billboard-copy{position:relative;z-index:2;padding:96px 20px 22px;color:#fff}
.billboard-copy h1{font-size:clamp(25px,6.4vw,40px);color:#fff;margin:0 0 10px}
.billboard-copy p{color:rgba(255,255,255,.88);font-size:15.5px;margin:0 0 18px;max-width:48ch}
.billboard-tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.tag{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:4px 9px;border-radius:999px;background:rgba(255,255,255,.16);color:#fff;backdrop-filter:blur(4px)}
.tag-hot{background:var(--brand);color:#fff}
.billboard-cta{display:flex;flex-wrap:wrap;gap:10px}

/* ---------- bottoni ------------------------------------------------------- */
.cta{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:12px 20px;border-radius:12px;font-weight:700;font-size:15px;
  border:1px solid transparent;cursor:pointer;text-align:center;line-height:1.2;
}
.cta:hover{text-decoration:none}
.cta-solid{background:var(--brand);color:#fff;box-shadow:0 6px 18px -8px var(--brand)}
.cta-solid:hover{background:var(--brand-ink);color:#fff}
.cta-line{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.cta-line:hover{border-color:#fff;background:rgba(255,255,255,.1);color:#fff}
.cta-quiet{background:var(--panel);color:var(--ink);border-color:var(--rule-hard)}
.cta-quiet:hover{border-color:var(--brand);color:var(--brand-ink)}
.cta-wide{width:100%}
.cta-small{padding:9px 14px;font-size:13.5px;border-radius:10px}

/* ---------- blocchi di pagina --------------------------------------------- */
.slab{margin:0 0 34px}
.slab-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 14px}
.slab-head h2{font-size:19px}
.slab-head a{font-size:13.5px;font-weight:600;white-space:nowrap}

/* ---------- griglia delle serie -------------------------------------------
   Due colonne anche sul telefono piu' stretto: le copertine sono verticali e
   a colonna singola se ne vedrebbe una sola per schermata. */
.rail{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (min-width:560px){.rail{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}}
@media (min-width:1040px){.rail{grid-template-columns:repeat(4,minmax(0,1fr))}}

.tile{display:flex;flex-direction:column;min-width:0}
.tile-art{
  position:relative;display:block;border-radius:var(--radius-sm);overflow:hidden;
  background:var(--sunk);aspect-ratio:3/4;box-shadow:var(--shadow);
}
/* Il contenitore fissa la proporzione e l'immagine la riempie in posizione
   assoluta: cosi' il rapporto nativo del file non ha voce in capitolo e le
   copertine restano tutte della stessa altezza, quale che sia la sorgente. */
.tile-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tile-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(8,3,6,.62) 100%)}
.tile-heat{position:absolute;left:7px;top:7px;z-index:2;font-size:10.5px;font-weight:800;letter-spacing:.04em;padding:3px 7px;border-radius:999px;background:rgba(8,3,6,.62);color:#fff;backdrop-filter:blur(3px)}
.tile-cast{position:absolute;right:7px;top:7px;z-index:2;font-size:10.5px;font-weight:800;padding:3px 7px;border-radius:999px;background:var(--brand);color:#fff}
.tile-grade{position:absolute;left:7px;bottom:7px;z-index:2;display:flex;align-items:center;gap:5px;color:#fff;font-size:11.5px;font-weight:700}
.tile-name{font-size:13.5px;font-weight:650;line-height:1.35;margin:8px 2px 0;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
a.tile-name:hover{color:var(--brand-ink);text-decoration:none}
.tile-note{font-size:12px;color:var(--ink-dim);margin:2px 2px 0}

/* ---------- stelle --------------------------------------------------------
   Disegnate a larghezza, non a carattere: una stella mezza piena non esiste
   come simbolo e arrotondare falserebbe la media. */
.grade{display:inline-flex;gap:1.5px;vertical-align:-2px}
.grade-pip{position:relative;width:12px;height:12px;display:inline-block;
  background:currentColor;opacity:.26;
  -webkit-mask:var(--star) center/contain no-repeat;mask:var(--star) center/contain no-repeat}
.grade-pip i{position:absolute;inset:0;display:block;background:var(--brand);opacity:1;
  -webkit-mask:var(--star) left center/12px 12px no-repeat;mask:var(--star) left center/12px 12px no-repeat}
:root{--star:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" fill="black"/></svg>')}
.tile-grade .grade-pip{background:#fff;opacity:.4}
.tile-grade .grade-pip i{background:#fff;opacity:1}

/* ---------- riquadri di risposta ------------------------------------------ */
.ask-grid{display:grid;gap:10px}
@media (min-width:640px){.ask-grid{grid-template-columns:repeat(3,1fr)}}
.ask{background:var(--panel);border:1px solid var(--rule);border-radius:var(--radius);padding:15px 16px}
.ask h3{font-size:14.5px;margin:0 0 6px;color:var(--brand-ink)}
.ask p{font-size:14px;color:var(--ink-dim);margin:0;line-height:1.55}

/* ---------- testo lungo ---------------------------------------------------- */
.copy{font-size:16.5px;line-height:1.72}
.copy h2{font-size:21px;margin:34px 0 12px;scroll-margin-top:70px}
.copy h3{font-size:17px;margin:26px 0 8px;scroll-margin-top:70px}
.copy ul,.copy ol{margin:0 0 1.1em;padding-left:1.15em}
.copy li{margin:0 0 .4em}
.copy blockquote{margin:1.4em 0;padding:2px 0 2px 16px;border-left:3px solid var(--brand);color:var(--ink-dim);font-style:normal}
.copy strong{font-weight:680}
.copy figure{margin:1.6em 0}
.copy figure img{border-radius:var(--radius-sm)}
.copy figcaption{font-size:13px;color:var(--ink-dim);margin-top:7px;text-align:center}

.lede{font-size:17.5px;line-height:1.62;color:var(--ink);background:var(--panel);
  border:1px solid var(--rule);border-left:3px solid var(--brand);
  border-radius:var(--radius);padding:16px 18px;margin:0 0 26px}
.lede p:last-child{margin:0}

/* ---------- scala di esplicitezza ------------------------------------------ */
.meter{margin:24px 0}
.meter-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;
  padding:11px 13px;border:1px solid var(--rule);border-radius:12px;margin:0 0 7px;background:var(--panel);color:var(--ink)}
a.meter-row:hover{border-color:var(--brand);text-decoration:none}
.meter-num{font-size:13px;font-weight:800;color:var(--brand-ink);min-width:28px}
.meter-what{font-size:14.5px;font-weight:650}
.meter-dots{display:flex;gap:3px;margin-top:4px}
.meter-dots i{width:16px;height:4px;border-radius:2px;background:var(--rule-hard)}
.meter-dots i.on{background:var(--brand)}
.meter-count{font-size:12.5px;color:var(--ink-dim);white-space:nowrap}
.meter-row.is-empty{opacity:.55}

/* ---------- domande -------------------------------------------------------- */
.qa{border-top:1px solid var(--rule);margin-top:30px}
.qa details{border-bottom:1px solid var(--rule)}
.qa summary{cursor:pointer;list-style:none;padding:15px 34px 15px 0;position:relative;font-weight:650;font-size:15.5px}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:19px;color:var(--brand);font-weight:400;line-height:1}
.qa details[open] summary::after{content:"\2212"}
.qa .a{padding:0 0 16px;font-size:15.5px;color:var(--ink-dim);line-height:1.68}
.qa .a p:last-child{margin:0}

/* ---------- voto ----------------------------------------------------------- */
.ballot{background:var(--panel);border:1px solid var(--rule);border-radius:var(--radius);padding:15px 16px;margin:26px 0;text-align:center}
.ballot fieldset{border:0;margin:0;padding:0}
.ballot-ask{font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-dim);padding:0;margin:0 0 9px;display:block;width:100%}
/* Le stelle sono radio veri. In ordine inverso nel markup, cosi' il fratello
   generale ~ raggiunge quelle a sinistra e il riempimento al passaggio del
   mouse funziona senza una riga di JavaScript. */
.ballot-pips{display:inline-flex;flex-direction:row-reverse;gap:3px}
.ballot-pips input{position:absolute;opacity:0;width:0;height:0}
.ballot-pips label{width:30px;height:30px;cursor:pointer;display:block;
  background:var(--rule-hard);
  -webkit-mask:var(--star) center/26px 26px no-repeat;mask:var(--star) center/26px 26px no-repeat}
.ballot-pips label:hover,.ballot-pips label:hover ~ label,
.ballot-pips input:checked ~ label,
.ballot-pips input:focus-visible + label{background:var(--brand)}
.ballot.is-cast .ballot-pips label{cursor:default;opacity:.75}
.ballot-tally{font-size:13.5px;color:var(--ink-dim);margin:10px 0 0}
.ballot-tally strong{color:var(--ink);font-size:16px}

/* ---------- scheda serie ---------------------------------------------------- */
.sheet{display:grid;gap:18px;margin:16px 0 26px}
@media (min-width:620px){.sheet{grid-template-columns:200px minmax(0,1fr);align-items:start}}
.sheet-art{position:relative;aspect-ratio:3/4;border-radius:var(--radius);overflow:hidden;background:var(--sunk);box-shadow:var(--shadow);max-width:260px}
.sheet-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sheet-head h1{font-size:clamp(23px,5.6vw,31px);margin:0 0 10px}
.sheet-facts{list-style:none;margin:0 0 16px;padding:0;font-size:14.5px}
.sheet-facts li{display:flex;gap:10px;padding:7px 0;border-bottom:1px solid var(--rule)}
.sheet-facts b{flex:0 0 116px;font-weight:600;color:var(--ink-dim)}
.sheet-facts span{min-width:0}

/* ---------- avviso e coda ---------------------------------------------------- */
.notice{background:var(--panel);border:1px solid var(--rule);border-radius:var(--radius);
  padding:14px 16px;font-size:13px;line-height:1.6;color:var(--ink-dim);margin:30px 0 0}
.notice b{color:var(--ink)}

.colophon{border-top:1px solid var(--rule);background:var(--panel);padding:26px var(--gutter) 40px;margin-top:20px}
.colophon-in{max-width:calc(var(--page) + var(--drawer-w) + 64px);margin:0 auto}
.colophon nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:16px;margin:0 0 14px;padding:0}
.colophon nav a{font-size:13.5px;color:var(--ink-dim)}
.colophon nav a:hover{color:var(--brand-ink)}
.colophon .fine{font-size:12.5px;line-height:1.65;color:var(--ink-dim);margin:0}

/* ---------- velo dei 18 anni -------------------------------------------------
   Sta sopra una pagina gia' completa invece di sostituirla: il testo resta
   nell'HTML, quindi i motori leggono il contenuto e non si perde l'indice per
   una conferma che nessuno puo' verificare comunque. */
#gate{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;
  background:rgba(8,3,6,.86);backdrop-filter:blur(8px)}
html.is-adult #gate{display:none}
#gate .gate-box{background:var(--bg);border:1px solid var(--rule-hard);border-radius:18px;padding:26px 22px;max-width:380px;text-align:center;box-shadow:0 24px 60px -20px rgba(0,0,0,.6)}
#gate h2{font-size:19px;margin:0 0 9px}
#gate p{font-size:14.5px;color:var(--ink-dim);margin:0 0 18px}
#gate .gate-cta{display:grid;gap:8px}

@media print{.masthead,.drawer,.veil,#gate,.ballot,.cta{display:none!important}.frame{display:block}}

/* ---------- fila di voci sotto la barra ------------------------------------
   Scorre in orizzontale invece di andare a capo: due righe di voci farebbero
   ballare l'altezza della testata da una pagina all'altra. La barra di
   scorrimento resta nascosta, il gesto no. */
.chipbar{
  position:sticky;top:56px;z-index:39;
  background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--rule);
}
.chipbar-in{
  max-width:calc(var(--page) + var(--drawer-w) + 64px);
  margin:0 auto;padding:9px var(--gutter);
  display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
  scroll-padding-inline:var(--gutter);
}
.chipbar-in::-webkit-scrollbar{display:none}
.chip{
  flex:0 0 auto;font-size:13.5px;font-weight:600;line-height:1;white-space:nowrap;
  padding:8px 13px;border-radius:999px;
  border:1px solid var(--rule-hard);background:var(--panel);color:var(--ink);
}
.chip:hover{border-color:var(--brand);color:var(--brand-ink);text-decoration:none}
.chip[aria-current]{background:var(--brand);border-color:var(--brand);color:#fff}
@media (min-width:1040px){.chipbar{display:none}}

/* L'immagine dell'insegna e' cliccabile e porta fuori. Il link copre tutto il
   riquadro ma resta sotto il blocco di testo: i bottoni e il titolo restano
   cliccabili per conto loro, e non ci sono link annidati dentro link. */
.billboard-hit{position:absolute;inset:0;z-index:1;display:block}
.billboard-copy{position:relative;z-index:2}
.cta-dark{background:rgba(8,3,6,.72);color:#fff;border-color:rgba(255,255,255,.28);backdrop-filter:blur(6px)}
.cta-dark:hover{background:rgba(8,3,6,.9);border-color:rgba(255,255,255,.5);color:#fff}