/* =========================================================================
   Hardline
   -------------------------------------------------------------------------
   Il traffico arriva da telefono e cerca video verticali. La larghezza base e'
   quella del telefono; il desktop e' il caso aggiunto dopo. Niente cassetti
   laterali: la navigazione sta in testa come fila di schede, sempre visibile,
   perche' le sei pagine di risposta sono il motivo per cui la gente arriva e
   nasconderle dietro un tocco costa lettori.
   ========================================================================= */

:root{
  color-scheme: light dark;

  /* Ambra. La variante scura esiste perche' lo stesso arancio che si legge su
     fondo nero, su fondo bianco scende sotto il rapporto di contrasto minimo. */
  --hot:#ff2d95;
  --hot-ink:#c2126b;
  --hot-wash:rgba(255,45,149,.12);

  --page:#ffffff;
  --panel:#fff8fb;
  --sunk:#fbeaf3;
  --ink:#1c0a16;
  --ink-soft:#7a5a6e;
  --rule:#f5e1ec;
  --rule-firm:#e8c6d9;

  --round:14px;
  --round-sm:9px;
  --lift:0 1px 2px rgba(28,10,22,.05), 0 10px 26px -14px rgba(28,10,22,.22);

  --measure:760px;
  --side-w:252px;
  --edge:16px;
  --stack:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

@media (prefers-color-scheme: dark){
  :root:not([data-mode="light"]){
    --hot-ink:#ff6bb5; --hot-wash:rgba(255,45,149,.16);
    --page:#0f0610; --panel:#190b17; --sunk:#241022;
    --ink:#fff4fa; --ink-soft:#b394a8; --rule:#2c1527; --rule-firm:#43203a;
    --lift:0 1px 2px rgba(0,0,0,.45), 0 10px 26px -14px rgba(0,0,0,.75);
  }
}
:root[data-mode="dark"]{
  --hot-ink:#ff6bb5; --hot-wash:rgba(255,45,149,.16);
  --page:#0f0610; --panel:#190b17; --sunk:#241022;
  --ink:#fff4fa; --ink-soft:#b394a8; --rule:#2c1527; --rule-firm:#43203a;
  --lift:0 1px 2px rgba(0,0,0,.45), 0 10px 26px -14px rgba(0,0,0,.75);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--page);color:var(--ink);font:16px/1.65 var(--stack);
  overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--hot-ink);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{line-height:1.2;letter-spacing:-.02em;margin:0;text-wrap:balance}
p{margin:0 0 1em}
:focus-visible{outline:2px solid var(--hot);outline-offset:2px;border-radius:4px}
.offscreen{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.jump{position:absolute;left:-9999px;top:0;z-index:99;background:var(--hot);color:#ffffff;padding:10px 16px;border-radius:0 0 8px 0;font-weight:700}
.jump:focus{left:0}

/* ---------- barra in testa ------------------------------------------------ */
.topbar{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--page) 90%,transparent);
  backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--rule)}
.topbar-in{max-width:calc(var(--measure) + var(--side-w) + 64px);margin:0 auto;padding:0 var(--edge);height:54px;
  display:flex;align-items:center;gap:12px}
.mark{display:flex;align-items:center;gap:7px;font-weight:800;font-size:16px;letter-spacing:-.03em;color:var(--ink)}
.mark:hover{text-decoration:none}
.mark em{font-style:normal;color:var(--hot-ink)}
.mark span{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:7px;
  background:var(--hot);color:#ffffff;font-size:12px;font-weight:900;letter-spacing:-.04em}
.topbar-end{margin-left:auto;display:flex;gap:8px;align-items:center}
.mode{appearance:none;border:1px solid var(--rule-firm);background:var(--panel);color:var(--ink-soft);
  width:36px;height:36px;border-radius:10px;display:grid;place-items:center;cursor:pointer;font-size:15px;line-height:1}
.mode:hover{color:var(--hot-ink);border-color:var(--hot)}

/* ---------- colonna laterale -------------------------------------------------
   Su telefono e' un pannello che scorre da sinistra; da 1020px in su diventa
   una colonna fissa e il pulsante sparisce. Stesso markup, nessun doppione.
   La navigazione sta a sinistra e non in testa perche' con una sessantina di
   serie l'elenco deve poter respirare in verticale. */
.grip{appearance:none;border:1px solid var(--rule-firm);background:var(--panel);color:var(--ink);
  width:38px;height:38px;border-radius:10px;display:grid;place-items:center;cursor:pointer;flex:0 0 auto}
.grip:hover{border-color:var(--hot)}
.grip span{display:block;width:16px;height:1.5px;background:currentColor;border-radius:2px;position:relative}
.grip span::before,.grip span::after{content:"";position:absolute;left:0;width:16px;height:1.5px;background:currentColor;border-radius:2px}
.grip span::before{top:-5px}.grip span::after{top:5px}

.sidecol{position:fixed;inset:0 auto 0 0;width:min(84vw,296px);z-index:60;background:var(--page);
  border-right:1px solid var(--rule);transform:translateX(-102%);transition:transform .22s ease;
  overflow-y:auto;overscroll-behavior:contain;padding:14px 12px 40px}
.sidecol[data-open="1"]{transform:none}
.dim{position:fixed;inset:0;background:rgba(12,4,10,.5);z-index:50;opacity:0;pointer-events:none;transition:opacity .22s ease}
.dim[data-open="1"]{opacity:1;pointer-events:auto}
.sidecol-x{display:flex;justify-content:flex-end;margin-bottom:6px}
.sidecol-x button{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}
.sidecol-cap{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft);
  padding:12px 10px 6px;margin:0}
.sidecol-set{list-style:none;margin:0 0 6px;padding:0 0 10px;border-bottom:1px solid var(--rule)}
.sidecol-set:last-of-type{border-bottom:0}
.sidecol-link{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:9px;color:var(--ink);
  font-size:14.5px;font-weight:500;line-height:1.35}
.sidecol-link:hover{background:var(--sunk);text-decoration:none}
.sidecol-link[aria-current]{background:var(--hot-wash);color:var(--hot-ink);font-weight:700}
.sidecol-link .bullet{flex:0 0 auto;width:16px;text-align:center;opacity:.6;font-size:12px}
.sidecol-link .count{margin-left:auto;font-size:11.5px;font-weight:700;color:var(--ink-soft);
  background:var(--sunk);border-radius:6px;padding:2px 6px}
.sidecol-link[aria-current] .count{background:#fff4}
.sidecol .push{margin:12px 6px}

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

@media (min-width:1020px){
  .wrapper{grid-template-columns:var(--side-w) minmax(0,1fr)}
  .grip,.dim{display:none}
  .sidecol{position:sticky;top:54px;transform:none;width:auto;z-index:1;
    height:calc(100dvh - 54px);padding:8px 12px 40px;margin-left:calc(var(--edge) * -1)}
  .sidecol-x{display:none}
}

/* ---------- insegna --------------------------------------------------------
   L'immagine e' un fotogramma vero, non decorazione. Il velo sopra serve a
   tenere leggibile il titolo qualunque cosa ci sia sotto. */
.curtain{position:relative;border-radius:var(--round);overflow:hidden;margin:16px 0 26px;background:var(--sunk);isolation:isolate}
.curtain img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.curtain::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(12,4,10,.2) 0%,rgba(12,4,10,.7) 56%,rgba(12,4,10,.93) 100%)}
.curtain-say{position:relative;z-index:2;padding:90px 20px 22px;color:#fff}
.curtain-say h1{font-size:clamp(25px,6.2vw,39px);color:#fff;margin:0 0 10px}
.curtain-say p{color:rgba(255,255,255,.88);font-size:15.5px;margin:0 0 18px;max-width:50ch}
.flags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.flag{font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:4px 9px;border-radius:5px;
  background:rgba(255,255,255,.18);color:#fff;backdrop-filter:blur(4px)}
.flag-hot{background:var(--hot);color:#ffffff}
.curtain-go{display:flex;flex-wrap:wrap;gap:10px}

/* ---------- bottoni --------------------------------------------------------- */
.push{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:12px 20px;
  border-radius:10px;font-weight:700;font-size:15px;border:1px solid transparent;cursor:pointer;line-height:1.2;text-align:center}
.push:hover{text-decoration:none}
.push-solid{background:var(--hot);color:#ffffff;box-shadow:0 6px 18px -8px var(--hot)}
.push-solid:hover{background:var(--hot-ink);color:#fff}
.push-edge{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.push-edge:hover{border-color:#fff;background:rgba(255,255,255,.1);color:#fff}
/* Il secondo bottone dell'insegna: scuro pieno, cosi' si stacca dall'immagine
   senza competere con quello in colore che gli sta a sinistra. */
.push-dark{background:rgba(12,4,10,.72);color:#fff;border-color:rgba(255,255,255,.28);backdrop-filter:blur(6px)}
.push-dark:hover{background:rgba(12,4,10,.9);border-color:rgba(255,255,255,.5);color:#fff}
.push-mute{background:var(--panel);color:var(--ink);border-color:var(--rule-firm)}
.push-mute:hover{border-color:var(--hot);color:var(--hot-ink)}
.push-full{width:100%}
.push-thin{padding:9px 14px;font-size:13.5px;border-radius:8px}

/* ---------- blocchi ---------------------------------------------------------- */
.block{margin:0 0 32px}
.block-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 14px}
.block-top h2{font-size:19px}
.block-top a{font-size:13.5px;font-weight:650;white-space:nowrap}

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

.poster{display:flex;flex-direction:column;min-width:0}
.poster-face{position:relative;display:block;border-radius:var(--round-sm);overflow:hidden;
  background:var(--sunk);aspect-ratio:3/4;box-shadow:var(--lift)}
/* Il contenitore fissa la proporzione, l'immagine la riempie in posizione
   assoluta: cosi' il rapporto nativo del file non ha voce e le copertine
   restano tutte della stessa altezza, quale che sia la sorgente. */
.poster-face img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.poster-face::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 56%,rgba(12,4,10,.66) 100%)}
.poster-tag{position:absolute;left:7px;top:7px;z-index:2;font-size:10.5px;font-weight:800;
  padding:3px 7px;border-radius:5px;background:rgba(12,4,10,.66);color:#fff;backdrop-filter:blur(3px)}
.poster-face-real{position:absolute;right:7px;top:7px;z-index:2;font-size:10.5px;font-weight:800;
  padding:3px 7px;border-radius:5px;background:var(--hot);color:#ffffff}
.poster-score{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}
.poster-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.poster-name:hover{color:var(--hot-ink);text-decoration:none}
.poster-note{font-size:12px;color:var(--ink-soft);margin:2px 2px 0}

/* ---------- pip di punteggio -------------------------------------------------- */
.pip{display:inline-flex;gap:1.5px;vertical-align:-2px}
.pip b{position:relative;width:12px;height:12px;display:inline-block;background:currentColor;opacity:.25;
  -webkit-mask:var(--star) center/contain no-repeat;mask:var(--star) center/contain no-repeat}
.pip b i{position:absolute;inset:0;display:block;background:var(--hot);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>')}
.poster-score .pip b{background:#fff;opacity:.42}
.poster-score .pip b i{background:#fff;opacity:1}

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

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

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

/* ---------- scala di esplicitezza -------------------------------------------------- */
.gauge{margin:22px 0}
.gauge-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;
  padding:11px 13px;border:1px solid var(--rule);border-radius:10px;margin:0 0 7px;background:var(--panel);color:var(--ink)}
a.gauge-row:hover{border-color:var(--hot);text-decoration:none}
.gauge-n{font-size:13px;font-weight:800;color:var(--hot-ink);min-width:28px}
.gauge-what{font-size:14.5px;font-weight:650}
.gauge-bars{display:flex;gap:3px;margin-top:4px}
.gauge-bars i{width:16px;height:4px;border-radius:2px;background:var(--rule-firm)}
.gauge-bars i.lit{background:var(--hot)}
.gauge-c{font-size:12.5px;color:var(--ink-soft);white-space:nowrap}
.gauge-row.is-void{opacity:.55}

/* ---------- etichette del catalogo --------------------------------------------------
   L'aggancio di questo sito: si vede il conteggio accanto al nome, perche' il
   conteggio e' l'argomento. */
.labelset{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 22px}
.labelset a{display:inline-flex;align-items:baseline;gap:6px;font-size:13.5px;font-weight:650;
  padding:7px 12px;border-radius:999px;border:1px solid var(--rule-firm);background:var(--panel);color:var(--ink)}
.labelset a:hover{border-color:var(--hot);color:var(--hot-ink);text-decoration:none}
.labelset a b{font-size:11.5px;font-weight:800;color:var(--ink-soft)}

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

/* ---------- voto ---------------------------------------------------------------------- */
.voteset{background:var(--panel);border:1px solid var(--rule);border-radius:var(--round);padding:15px 16px;margin:26px 0;text-align:center}
.voteset fieldset{border:0;margin:0;padding:0}
.voteset legend{font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft);padding:0;margin:0 0 9px;display:block;width:100%}
/* Radio veri, in ordine inverso nel markup: il fratello generale ~ raggiunge
   quelli a sinistra e il riempimento al passaggio del mouse esce dal CSS. */
.voteset-pips{display:inline-flex;flex-direction:row-reverse;gap:3px}
.voteset-pips input{position:absolute;opacity:0;width:0;height:0}
.voteset-pips label{width:30px;height:30px;cursor:pointer;display:block;background:var(--rule-firm);
  -webkit-mask:var(--star) center/26px 26px no-repeat;mask:var(--star) center/26px 26px no-repeat}
.voteset-pips label:hover,.voteset-pips label:hover ~ label,
.voteset-pips input:checked ~ label,.voteset-pips input:focus-visible + label{background:var(--hot)}
.voteset.is-done .voteset-pips label{cursor:default;opacity:.75}
.voteset-count{font-size:13.5px;color:var(--ink-soft);margin:10px 0 0}
.voteset-count strong{color:var(--ink);font-size:16px}

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

/* ---------- coda -------------------------------------------------------------------------- */
.footnote{background:var(--panel);border:1px solid var(--rule);border-radius:var(--round);
  padding:14px 16px;font-size:13px;line-height:1.6;color:var(--ink-soft);margin:30px 0 0}
.footnote b{color:var(--ink)}
.closing{border-top:1px solid var(--rule);background:var(--panel);padding:26px var(--edge) 40px;margin-top:22px}
.closing-in{max-width:calc(var(--measure) + var(--side-w) + 64px);margin:0 auto}
.closing nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:16px;margin:0 0 14px;padding:0}
.closing nav a{font-size:13.5px;color:var(--ink-soft)}
.closing nav a:hover{color:var(--hot-ink)}
.closing p{font-size:12.5px;line-height:1.65;color:var(--ink-soft);margin:0}

/* ---------- velo dei 18 anni -----------------------------------------------------------------
   Sopra una pagina gia' completa invece che al posto suo: il testo resta
   nell'HTML, i motori leggono, e non si perde l'indice per una conferma che
   nessuno puo' verificare comunque. */
#curtainwall{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;
  background:rgba(12,4,10,.88);backdrop-filter:blur(8px)}
html.is-over18 #curtainwall{display:none}
#curtainwall .box{background:var(--page);border:1px solid var(--rule-firm);border-radius:16px;
  padding:26px 22px;max-width:380px;text-align:center;box-shadow:0 24px 60px -20px rgba(0,0,0,.6)}
#curtainwall h2{font-size:19px;margin:0 0 9px}
#curtainwall p{font-size:14.5px;color:var(--ink-soft);margin:0 0 18px}
#curtainwall .pair{display:grid;gap:8px}

@media print{.topbar,.sidecol,.dim,#curtainwall,.voteset,.push{display:none!important}}

/* L'immagine dell'insegna e' 16:9 e il contenitore la ritaglia. Senza
   un'altezza minima, su telefono resterebbe una striscia con i volti tagliati
   a meta'; su schermo largo invece va lasciata respirare. */
.curtain{min-height:320px}
@media(min-width:700px){.curtain{min-height:400px}}
@media(min-width:1020px){.curtain{min-height:440px}}
.curtain img{object-position:center 30%}

/* L'immagine dell'insegna porta fuori. Il link copre tutto il riquadro ma
   resta sotto il blocco di testo, cosi' bottoni e titolo restano cliccabili
   per conto loro e non ci sono link annidati dentro link. */
.curtain-hit{position:absolute;inset:0;z-index:1;display:block}
.curtain-say{position:relative;z-index:2}

/* -------------------------------------------------------------------------
   Testata delle pagine guida: titolo, bottone e tre copertine nella prima
   schermata. Copertina sfocata dietro; il riquadro intero porta su Candy.
   ------------------------------------------------------------------------- */
.frontis{position:relative;isolation:isolate;overflow:hidden;display:grid;gap:18px;margin:16px 0 22px;padding:22px 16px 20px;border-radius:14px;background:#1a1006;color:#fff}
.frontis-bg{position:absolute;left:-36px;top:-36px;z-index:0;width:calc(100% + 72px);height:calc(100% + 72px);max-width:none;object-fit:cover;filter:blur(22px) saturate(1.4) brightness(.5)}
.frontis::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(175deg,rgba(15,6,16,.3),rgba(15,6,16,.9) 72%)}
.frontis-hit{position:absolute;inset:0;z-index:2}
.frontis-words,.frontis-row{position:relative;z-index:3}
.frontis h1{margin:0 0 14px;font-size:clamp(25px,6vw,36px);line-height:1.12;color:#fff}
.frontis-words p{margin:-4px 0 14px;font-size:15px;color:rgba(255,255,255,.85)}
.frontis-acts{display:flex;flex-wrap:wrap;gap:8px}
.frontis-acts .push-solid{flex:1 1 100%}
.frontis .push-ghost{background:rgba(15,6,16,.45);color:#fff;border:1px solid rgba(255,255,255,.4)}
.frontis .push-ghost:hover{border-color:var(--hot);color:#fff}
.frontis-row{display:grid;grid-template-columns:1fr 1.2fr 1fr;align-items:end;gap:8px}
.frontis-pick{display:flex;flex-direction:column;gap:4px;color:#fff;text-decoration:none}
.frontis-pick:hover{text-decoration:none}.frontis-pick:hover .frontis-pick-img{transform:translateY(-4px)}
.frontis-pick-img{position:relative;display:block;aspect-ratio:2/3;overflow:hidden;border-radius:10px;background:#2a1b09;box-shadow:0 14px 28px -14px rgba(0,0,0,.9);border:1px solid rgba(255,255,255,.16);transition:transform .2s}
.frontis-pick-lead .frontis-pick-img{border:2px solid var(--hot);box-shadow:0 18px 36px -14px var(--hot)}
.frontis-pick-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top}
.frontis-pick-title{font-size:12.5px;font-weight:750;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.frontis-pick-sub{font-size:11px;color:rgba(255,255,255,.7)}
@media (min-width:700px){
  .frontis{grid-template-columns:minmax(0,1fr) 300px;align-items:center;padding:28px 24px}
  .frontis-alone{grid-template-columns:minmax(0,1fr)}
  .frontis-acts .push-solid{flex:0 0 auto}
}