/* ================= DRAMA: il mondo delle serie, blu notte e champagne ====
   Il mondo Drama si stacca dal resto del sito (carta bruna, candela) con la
   palette scelta dall'utente il 29 ott 2026: blu notte #17294A, avorio
   #F8F4EB, champagne #D6BD91, nero #171717, il tono di una rivista
   letteraria raffinata. Le sue indicazioni: fondo avorio molto chiaro,
   intestazione e menu nel blu, titoli neri in un carattere elegante (Bodoni
   Moda), pulsanti e collegamenti nel colore piu' vivo, champagne SOLO per
   linee e dettagli. Sul tema scuro la stessa stanza di notte: fondo blu
   profondo, testo avorio, dettagli champagne. Dietro, una seta fotografata
   (avorio di giorno, blu di notte); sopra, lastre di vetro.
   Come funziona: le pagine del mondo (saga.html con slug drama, serie.html,
   product.html delle puntate) hanno la classe "drama" sul body, e qui dentro
   si RIDEFINISCONO i colori e i caratteri di base del sito (--paper, --ink,
   --accent, --display, --sans...): i componenti di sempre cambiano veste da
   soli. Le parti proprie stanno in tre file: questo (base, testata, mondo,
   carta in Saghe), drama-serie.css (la pagina della serie) e
   drama-puntata.css (la scheda della puntata e il player). Colori SOLO dalle
   variabili per ruolo qui sotto (--dr-fondo, --dr-testo-1, --dr-accento,
   --dr-oro...), registrate in deploy/check_palette.py. */

@font-face { font-family:"Bodoni Moda"; font-style:normal; font-weight:400 900; font-display:swap;
  src:url("/assets/fonts/bodoni-moda-normal-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:"Bodoni Moda"; font-style:normal; font-weight:400 900; font-display:swap;
  src:url("/assets/fonts/bodoni-moda-normal-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:"Bodoni Moda"; font-style:italic; font-weight:400 900; font-display:swap;
  src:url("/assets/fonts/bodoni-moda-italic-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:"Bodoni Moda"; font-style:italic; font-weight:400 900; font-display:swap;
  src:url("/assets/fonts/bodoni-moda-italic-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:"Hanken Grotesk"; font-style:normal; font-weight:400 700; font-display:swap;
  src:url("/assets/fonts/hanken-grotesk-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:"Hanken Grotesk"; font-style:normal; font-weight:400 700; font-display:swap;
  src:url("/assets/fonts/hanken-grotesk-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* la palette: i quattro colori dell'utente e i pochi derivati che servono
   per i contrasti (testo secondario, fondo di notte, oro sul chiaro) */
:root {
  --dr-blu:#17294A;  --dr-avorio:#F8F4EB;  --dr-champagne:#D6BD91;  --dr-nero:#171717;
  --dr-blu-profondo:#0E1A30;  --dr-blu-scheda:#1F3560;
  --dr-grigio:#6B655C;  --dr-avorio-2:#C9C1B2;  --dr-oro-scuro:#A8884F;
  --dr-titoli:"Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --dr-testo:"Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
}

body.drama {
  /* i RUOLI, tema scuro: la stanza di notte */
  --dr-fondo:var(--dr-blu-profondo); --dr-scheda:var(--dr-blu); --dr-scheda-2:var(--dr-blu-scheda);
  --dr-testo-1:var(--dr-avorio); --dr-testo-2:var(--dr-avorio-2);
  --dr-accento:var(--dr-champagne); --dr-accento-ink:var(--dr-blu);
  --dr-oro:var(--dr-champagne);
  --dr-vetro:color-mix(in srgb, var(--dr-blu) 60%, transparent);
  --dr-vetro-forte:color-mix(in srgb, var(--dr-blu) 86%, transparent);
  --dr-filo:color-mix(in srgb, var(--dr-champagne) 28%, transparent);
  --dr-luce:color-mix(in srgb, var(--dr-avorio) 18%, transparent);
  --dr-ombra:rgba(0,0,0,.5);
  --dr-velo-foto:color-mix(in srgb, var(--dr-blu-profondo) 28%, transparent);
  --foto:url("/assets/img/sfondo-drama-scuro.webp?v=2");
  /* i colori del sito, rifatti coi ruoli */
  --paper:var(--dr-fondo); --paper-2:var(--dr-scheda); --paper-3:var(--dr-scheda-2);
  --ink:var(--dr-testo-1); --ink-soft:var(--dr-testo-2); --ink-faint:var(--dr-testo-2);
  --line:color-mix(in srgb, var(--dr-oro) 24%, transparent);
  --line-2:color-mix(in srgb, var(--dr-oro) 42%, transparent);
  --accent:var(--dr-accento); --accent-ink:var(--dr-accento); --hx:var(--dr-oro);
  --btn-bg:var(--dr-accento); --btn-bg-hover:color-mix(in srgb, var(--dr-accento) 82%, var(--dr-testo-1));
  --btn-ink:var(--dr-accento-ink);
  --display:var(--dr-titoli); --sans:var(--dr-testo); --serif:var(--dr-testo);
  font-family:var(--dr-testo);
  background:var(--dr-fondo);
}
:root[data-theme="light"] body.drama {
  /* i RUOLI, tema chiaro: avorio, titoli neri, bottoni blu, oro per le linee */
  --dr-fondo:var(--dr-avorio); --dr-scheda:var(--dr-avorio);
  --dr-scheda-2:color-mix(in srgb, var(--dr-champagne) 22%, var(--dr-avorio));
  --dr-testo-1:var(--dr-nero); --dr-testo-2:var(--dr-grigio);
  --dr-accento:var(--dr-blu); --dr-accento-ink:var(--dr-avorio);
  --dr-oro:var(--dr-oro-scuro);
  --dr-vetro:color-mix(in srgb, var(--dr-avorio) 66%, transparent);
  --dr-vetro-forte:color-mix(in srgb, var(--dr-avorio) 88%, transparent);
  --dr-filo:color-mix(in srgb, var(--dr-oro-scuro) 36%, transparent);
  --dr-luce:color-mix(in srgb, var(--dr-avorio) 95%, transparent);
  --dr-ombra:rgba(0,0,0,.14);
  --dr-velo-foto:color-mix(in srgb, var(--dr-avorio) 22%, transparent);
  --foto:url("/assets/img/sfondo-drama-chiaro.webp?v=2");
  --btn-bg-hover:color-mix(in srgb, var(--dr-blu) 80%, var(--dr-nero));
}
@media (orientation: portrait) {
  body.drama { --foto:url("/assets/img/sfondo-drama-scuro-verticale.webp?v=2"); }
  :root[data-theme="light"] body.drama { --foto:url("/assets/img/sfondo-drama-chiaro-verticale.webp?v=2"); }
}

/* il sito da' a .hab, .hab-drama e .saga-hero i colori del vecchio mondo
   (bordeaux, e sul chiaro una testata "sempre scura" col piede beige): qui
   dentro valgono quelli nuovi, in entrambi i temi */
body.drama .hab, body.drama .hab-drama, body.drama .s-drama, body.drama .saga-hero {
  --hx:var(--dr-oro); --ha:var(--dr-oro); --hd:var(--dr-oro);
  --accent:var(--dr-accento); --accent-ink:var(--dr-accento);
  --btn-bg:var(--dr-accento); --btn-ink:var(--dr-accento-ink); }
:root[data-theme="light"] body.drama .hab, :root[data-theme="light"] body.drama .hab-drama,
:root[data-theme="light"] body.drama .s-drama, :root[data-theme="light"] body.drama .saga-hero {
  --hx:var(--dr-oro); --ha:var(--dr-oro); --hd:var(--dr-oro);
  --accent:var(--dr-accento); --accent-ink:var(--dr-accento);
  --btn-bg:var(--dr-accento); --btn-bg-hover:color-mix(in srgb, var(--dr-blu) 80%, var(--dr-nero));
  --btn-ink:var(--dr-accento-ink); }
:root[data-theme="light"] body.drama .saga-hero .crumb { color:var(--ink); }

/* lo sfondo: la seta al posto della foto del sito, con un velo che la
   abbassa quanto basta perche' il testo si legga. Niente motivo a tratto,
   niente fondale coi simboli dei mondi: e' un'altra stanza */
body.drama::before, body.drama .fondale { display:none; }
body.drama::after { display:block;
  background:linear-gradient(var(--dr-velo-foto), var(--dr-velo-foto)),
             var(--foto) center bottom / cover no-repeat; }

/* INTESTAZIONE e MENU nel blu, in entrambi i temi (indicazione dell'utente):
   dentro la testata il testo torna avorio e l'accento champagne, e il menu
   che ne scende e' vetro blu */
body.drama .site-head { --ink:var(--dr-avorio); --ink-soft:var(--dr-avorio-2); --ink-faint:var(--dr-avorio-2);
  --accent:var(--dr-champagne); --accent-ink:var(--dr-champagne);
  --line:color-mix(in srgb, var(--dr-champagne) 26%, transparent);
  --paper-2:var(--dr-blu); --paper-3:var(--dr-blu-scheda);
  background:color-mix(in srgb, var(--dr-blu) 90%, transparent);
  border-bottom:1px solid color-mix(in srgb, var(--dr-champagne) 30%, transparent); color:var(--dr-avorio); }
:root[data-theme="light"] body.drama .site-head { background:color-mix(in srgb, var(--dr-blu) 92%, transparent);
  border-bottom-color:color-mix(in srgb, var(--dr-champagne) 30%, transparent); }
:root[data-theme="light"] body.drama .brand img { filter:none; }
body.drama .prof-menu { background:color-mix(in srgb, var(--dr-blu) 88%, transparent);
  border-color:color-mix(in srgb, var(--dr-champagne) 26%, transparent); color:var(--dr-avorio); }
body.drama .site-foot { background:color-mix(in srgb, var(--dr-fondo) 82%, transparent);
  border-top:1px solid var(--line); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); }
:root[data-theme="light"] body.drama .site-foot { background:color-mix(in srgb, var(--dr-avorio) 86%, transparent);
  --ink-faint:var(--dr-grigio); --accent:var(--dr-blu); }
body.drama ::selection { background:var(--dr-champagne); color:var(--dr-blu); }
body.drama h1, body.drama h2, body.drama h3 { font-family:var(--dr-titoli); font-optical-sizing:auto;
  font-weight:600; letter-spacing:-.005em; color:var(--dr-testo-1); }

/* il VETRO di Drama, una ricetta sola per tutte le lastre */
body.drama .dr-vetro, body.drama .pcard, body.drama .placeholder, body.drama .pannello {
  background:var(--dr-vetro); border:1px solid var(--dr-filo);
  -webkit-backdrop-filter:blur(20px) saturate(1.4); backdrop-filter:blur(20px) saturate(1.4);
  box-shadow:inset 0 1px 0 var(--dr-luce), 0 24px 48px -30px var(--dr-ombra); }

/* i BOTTONI: pieni nel colore vivo (blu di giorno, champagne di notte), i
   "ghost" sono vetro col filo d'oro */
body.drama .btn { border-radius:999px; font-family:var(--dr-testo); font-weight:700; letter-spacing:.01em;
  background:var(--btn-bg); color:var(--btn-ink); border:1px solid transparent; }
@media (hover: hover) and (pointer: fine) {
  body.drama .btn:hover { background:var(--btn-bg-hover); color:var(--btn-ink);
    box-shadow:0 10px 26px -14px var(--dr-ombra); }
}
body.drama .btn.ghost { background:var(--dr-vetro); color:var(--ink); border-color:var(--dr-filo);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); }
@media (hover: hover) and (pointer: fine) {
  body.drama .btn.ghost:hover { border-color:var(--dr-oro); color:var(--ink); background:var(--dr-vetro-forte); }
}

/* la TESTATA del mondo e delle serie: niente fascia scura ne' mantovana,
   il titolo grande in Bodoni direttamente sulla seta, con sotto un filetto
   champagne. Con la locandina (la pagina della serie) l'immagine resta,
   sotto un velo del colore del fondo che sale dal basso */
body.drama .saga-hero { background:transparent; border-bottom:0;
  padding-block:clamp(2.2rem, 6vh, 5rem) clamp(1rem, 3vh, 2rem); }
body.drama .saga-hero::before { content:none; }
body.drama .saga-hero.s-drama { padding-top:clamp(2.2rem, 6vh, 5rem); }
body.drama .saga-hero h1 { font-family:var(--dr-titoli); font-weight:500; color:var(--dr-testo-1);
  font-size:clamp(2.8rem, 1.6rem + 6vw, 6.6rem); line-height:.98; letter-spacing:-.015em;
  text-wrap:balance; margin:.5rem 0 1.1rem; }
body.drama .saga-hero h1::after { content:""; display:block; width:min(7rem, 30%); height:1px;
  margin-top:1.1rem; background:var(--dr-oro); }
body.drama .saga-hero .crumb { display:inline-flex; align-items:center; gap:.35rem;
  padding:.45em .9em .45em .7em; border-radius:999px; text-decoration:none; text-transform:none;
  font-family:var(--dr-testo); font-size:.84rem; font-weight:600; letter-spacing:0; color:var(--ink);
  background:var(--dr-vetro); border:1px solid var(--dr-filo);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); }
body.drama .saga-hero .note { color:var(--dr-testo-2); font-family:var(--dr-testo); font-size:1rem; }
/* i conti del mondo (serie e puntate): due pillole di vetro, senza puntini */
body.drama .dr-conti { display:flex; flex-wrap:wrap; gap:.5rem; margin:0; }
body.drama .dr-conti span { padding:.4em .95em; border-radius:999px; font-weight:600; font-size:.92rem;
  color:var(--dr-testo-1); background:var(--dr-vetro); border:1px solid var(--dr-filo);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); }
body.drama .saga-hero.has-img::after {
  background:linear-gradient(to top, var(--dr-fondo) 2%, color-mix(in srgb, var(--dr-fondo) 64%, transparent) 45%,
                             color-mix(in srgb, var(--dr-fondo) 18%, transparent)); }
body.drama .saga-hero.has-img h1, body.drama .saga-hero.has-img .note,
body.drama .saga-hero.has-img .crumb { color:var(--dr-testo-1); }

/* le ETICHETTE: generi, 18+, audio. Piccole, in minuscolo, distinte dal
   tipo di riempimento piu' che dal colore: champagne pieno, blu pieno, filo */
body.drama .genere, body.drama .serie-tag { border-radius:999px; text-transform:none;
  letter-spacing:.01em; font-family:var(--dr-testo); font-size:.78rem; font-weight:700;
  padding:.3em .8em; border:1px solid transparent; }
body.drama .genere.romantico { background:var(--dr-champagne); color:var(--dr-blu); }
body.drama .genere.erotico { background:var(--dr-blu-scheda); color:var(--dr-champagne);
  border-color:color-mix(in srgb, var(--dr-champagne) 40%, transparent); }
body.drama .genere.giallo { background:transparent; color:var(--dr-testo-1); border-color:var(--dr-oro); }
:root[data-theme="light"] body.drama .genere.romantico { background:var(--dr-champagne); color:var(--dr-nero); }
:root[data-theme="light"] body.drama .genere.erotico { background:var(--dr-blu); color:var(--dr-avorio); border-color:transparent; }
body.drama .serie-tag { background:var(--dr-vetro); border-color:var(--dr-filo); color:var(--dr-testo-1); }
body.drama .serie-tag.adulti { background:var(--dr-testo-1); color:var(--dr-fondo); border-color:transparent; }

/* le SERIE nella pagina del mondo: lastre di vetro col filo champagne, la
   locandina 16:9 dentro la lastra, il titolo in Bodoni */
body.drama .serie-card { border-radius:16px; overflow:hidden;
  transition:translate .25s cubic-bezier(.23,1,.32,1), border-color .2s ease; }
body.drama .serie-card .pcard-cover { border-radius:10px; margin:.55rem .55rem 0; overflow:hidden;
  background:var(--dr-scheda-2); }
body.drama .serie-card .pcard-body { padding:.9rem 1.1rem 1.15rem; }
body.drama .serie-card h3 { font-family:var(--dr-titoli); font-weight:600; font-size:1.4rem;
  line-height:1.15; letter-spacing:-.005em; color:var(--dr-testo-1); }
@media (hover: hover) and (pointer: fine) {
  body.drama a.serie-card:hover { translate:0 -3px; border-color:var(--dr-oro); }
}
body.drama .serie-card:active { scale:.985; }
body.drama .segno-audio { background:color-mix(in srgb, var(--dr-blu) 70%, transparent);
  color:var(--dr-avorio); border-color:color-mix(in srgb, var(--dr-champagne) 30%, transparent); }
body.drama .placeholder { border-radius:16px; border-style:solid; padding:clamp(1.6rem, 4vw, 2.6rem);
  font-family:var(--dr-titoli); font-size:clamp(1.25rem, 1.05rem + 1vw, 1.8rem); font-weight:500;
  font-style:italic; color:var(--dr-testo-1); text-align:left; animation:none; }

/* la carta DRAMA nella pagina Saghe: niente quinte di velluto ne' mantovana,
   la seta blu e il nome in Bodoni. E' la porta del mondo, ne annuncia lo stile */
.worlds .spalco { background:linear-gradient(color-mix(in srgb, var(--dr-blu-profondo) 25%, transparent),
                                             color-mix(in srgb, var(--dr-blu-profondo) 25%, transparent)),
    url("/assets/img/sfondo-drama-scuro.webp?v=2") center / cover no-repeat;
  border-color:color-mix(in srgb, var(--dr-champagne) 40%, transparent); border-radius:16px; }
.worlds .spalco::before, .worlds .spalco .sipario { display:none; }
.worlds .spalco .scard-name { font-family:var(--dr-titoli); font-weight:500; letter-spacing:-.01em;
  color:var(--dr-avorio); text-shadow:0 2px 24px rgba(0,0,0,.45); }
.worlds .spalco .scard-count, .worlds .spalco .scard-go { font-family:var(--dr-testo); color:var(--dr-avorio); }
.worlds .spalco .scard-go { padding:.45em 1em; border-radius:999px; color:var(--dr-blu);
  background:var(--dr-champagne); }

@media (prefers-reduced-transparency: reduce) {
  body.drama .dr-vetro, body.drama .pcard, body.drama .placeholder, body.drama .pannello,
  body.drama .btn.ghost, body.drama .saga-hero .crumb, body.drama .serie-tag, body.drama .dr-conti span {
    background:var(--paper-2); -webkit-backdrop-filter:none; backdrop-filter:none; }
}
@media (prefers-reduced-motion: reduce) {
  body.drama .serie-card { transition:border-color .2s ease; }
  body.drama a.serie-card:hover { translate:none; }
}