/* ════════════════════════════════════════════════════════════════════════
   TENKU · SITO PERSONALE — foglio di stile
   ════════════════════════════════════════════════════════════════════════
   Applicazione di design/DESIGN_SYSTEM.md ("Smoked Steel · AAA HUD") al web.
   Le regole sono le stesse degli overlay: pannelli in vetro fumé, hairline
   da 1px, il rosso solo nei micro-dettagli, movimento appena percepibile.

   Differenze rispetto all'overlay, e perché:
     · niente backdrop-filter sui pannelli grandi — qui sotto non c'è il
       gameplay, c'è lo sfondo del sito: costa GPU e non si vede. Resta
       solo sulla barra in alto, dove il contenuto scorre davvero sotto.
     · scala tipografica alzata: l'overlay si guarda a 2 metri su uno
       schermo condiviso, un sito si legge a 50cm. I 9px diventano 10-11.
     · tutto in rem/clamp: l'overlay ha una risoluzione sola, il sito no.
════════════════════════════════════════════════════════════════════════ */

/* ── 1 · TOKEN ─────────────────────────────────────────────────────────── */
:root{
  /* Neutri strutturali (§2.1 del design system) */
  --gunmetal:#282B31;
  --graphite:#141619;
  --charcoal:#0C0D0F;
  --ink:#ECEAE6;
  --white:#F7F6F4;
  --soft:#C3C7CD;
  --dim:#9D9D9D;

  /* Accento identitario (§2.2) — in RGB perché serve nelle rgba() */
  --red:225,29,42;
  --red-glow:255,42,54;

  /* Toni semantici (§2.3) */
  --t-twitch:145,71,255;
  --t-youtube:255,0,0;
  --t-tiktok:105,201,208;
  --t-instagram:225,48,108;
  --t-discord:88,101,242;
  --t-telegram:0,168,225;
  --t-live:225,29,42;
  --t-oro:245,196,81;
  --t-verde:52,211,153;
  --t-grigio:148,153,161;

  /* Geometria (§5) */
  --radius:12px;
  --radius-s:8px;
  --edge:rgba(255,255,255,.09);
  --edge-hi:rgba(255,255,255,.16);

  /* Movimento (§7.1) */
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-in:cubic-bezier(.55,0,.8,.4);

  /* Ritmo verticale */
  --gutter:clamp(18px, 4vw, 40px);
  --sez:clamp(64px, 9vw, 116px);
}

/* ── 2 · BASE ──────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth; scroll-padding-top:88px}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  color:var(--ink);
  font-family:'Rajdhani',system-ui,-apple-system,sans-serif;
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  background:var(--charcoal);
  overflow-x:hidden;
}

/* Lo sfondo vive in un layer fisso: così le sezioni ci scorrono davanti
   invece di trascinarselo dietro, e la nebbia non "salta" allo scroll. */
.fondo{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(1300px 700px at 78% -14%, rgba(40,43,49,.62), transparent 62%),
    radial-gradient(1000px 560px at -10% 22%, rgba(225,29,42,.055), transparent 58%),
    radial-gradient(900px 700px at 50% 110%, rgba(40,43,49,.34), transparent 60%),
    linear-gradient(165deg,#0e0f12 0%,#08090b 100%);
}
/* Grana finissima: toglie la plastica ai gradienti grandi. */
.fondo::after{
  content:''; position:absolute; inset:0; opacity:.5;
  background-image: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='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}
/* La nebbia: due strati che scorrono a velocità diverse, lentissimi. */
.nebbia{
  position:fixed; inset:-20%; z-index:-1; pointer-events:none; opacity:.5;
  background:
    radial-gradient(48% 34% at 22% 30%, rgba(120,130,145,.055), transparent 70%),
    radial-gradient(42% 30% at 76% 62%, rgba(120,130,145,.045), transparent 70%);
  animation:deriva 64s linear infinite;
}
@keyframes deriva{
  0%  {transform:translate3d(-2%,0,0) scale(1)}
  50% {transform:translate3d(2%,-1.5%,0) scale(1.06)}
  100%{transform:translate3d(-2%,0,0) scale(1)}
}
@media (prefers-reduced-motion:reduce){ .nebbia{animation:none} }

img{max-width:100%; display:block}
a{color:inherit}

/* ── 3 · TIPOGRAFIA (§3) ──────────────────────────────────────────────── */
.mono{font-family:'JetBrains Mono',ui-monospace,monospace}

/* Micro-etichetta con dot: apre ogni sezione e ogni card. */
.eyebrow{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:10px; font-weight:700; letter-spacing:.26em; text-transform:uppercase;
  color:rgb(var(--tone,var(--red)));
  display:inline-flex; align-items:center; gap:8px; line-height:1;
}
.eyebrow::before{
  content:''; width:4px; height:4px; border-radius:1px; flex:none;
  background:rgb(var(--tone,var(--red)));
  box-shadow:0 0 6px rgba(var(--tone,var(--red)),.45);
}

h1,h2,h3{margin:0; font-weight:700; color:var(--white); line-height:1.05}
h1{font-size:clamp(38px,7.5vw,76px); letter-spacing:.005em}
h2{font-size:clamp(26px,3.6vw,40px); letter-spacing:.01em}
h3{font-size:19px; letter-spacing:.015em}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}

.lead{color:var(--soft); font-size:clamp(16px,1.6vw,19px); line-height:1.6; max-width:62ch}
.dim{color:var(--dim)}
b, strong{color:var(--white); font-weight:700}

/* ── 4 · IMPALCATURA ──────────────────────────────────────────────────── */
.wrap{max-width:1200px; margin:0 auto; padding-inline:var(--gutter)}

section{padding-block:var(--sez); position:relative}
/* Divisorio fra sezioni: una hairline che sfuma ai bordi, non una riga secca. */
section + section::before{
  content:''; position:absolute; top:0; left:var(--gutter); right:var(--gutter);
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.10) 22% 78%,transparent);
}

.testa{margin-bottom:clamp(28px,4vw,44px)}
.testa .eyebrow{margin-bottom:14px}
.testa .lead{margin-top:14px}

/* ── 5 · SUPERFICIE (§4.1) ────────────────────────────────────────────── */
.surface{
  position:relative; overflow:hidden;
  border:1px solid var(--edge);
  border-radius:var(--radius);
  background:linear-gradient(165deg,
    rgba(40,43,49,.62) 0%,
    rgba(20,22,25,.72) 42%,
    rgba(12,13,15,.82) 100%);
  box-shadow:
    0 22px 48px -18px rgba(0,0,0,.62),
    0 4px 14px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.07);
}
/* Layer di materia (§4.2): sheen radiale + texture spazzolata. */
.surface::before{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(130% 100% at 14% -12%, rgba(255,255,255,.055) 0%, transparent 55%),
    repeating-linear-gradient(100deg, rgba(255,255,255,.014) 0 1px, transparent 1px 4px);
}
/* Linea d'accento verticale: l'unico punto a piena intensità di tono. */
.surface::after{
  content:''; position:absolute; left:0; top:0; bottom:0; width:2px; z-index:4;
  background:linear-gradient(180deg,
    rgba(var(--tone,var(--red)),.95) 0%,
    rgba(var(--tone,var(--red)),.40) 62%,
    rgba(var(--tone,var(--red)),.08) 100%);
}
.surface > *{position:relative; z-index:2}

/* Hairline illuminata in cima, rientrata di 16px come nell'overlay. */
.surface.hairline > .hl{
  position:absolute; top:0; left:16px; right:16px; height:1px; z-index:5;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.26) 30% 70%,transparent);
}

/* Superficie cliccabile */
a.surface{
  text-decoration:none; display:block;
  transition:transform .28s var(--ease-out), border-color .28s, box-shadow .28s;
}
a.surface:hover{
  transform:translateY(-3px);
  border-color:rgba(var(--tone,var(--red)),.42);
  box-shadow:
    0 30px 56px -20px rgba(0,0,0,.70),
    0 4px 14px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.09);
}
a.surface:focus-visible{
  outline:2px solid rgba(var(--tone,var(--red)),.75); outline-offset:3px;
}
@media (prefers-reduced-motion:reduce){ a.surface:hover{transform:none} }

/* ── 6 · BOX ICONA "acciaio satinato" (§4.3) ──────────────────────────── */
.ic{
  flex:none; display:grid; place-items:center; position:relative; overflow:hidden;
  width:44px; height:44px; border-radius:var(--radius-s);
  background:linear-gradient(160deg,
    rgba(255,255,255,.085) 0%, rgba(255,255,255,.02) 45%, rgba(0,0,0,.30) 100%);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -8px 14px rgba(0,0,0,.22),
    inset 0 -2px 0 rgba(var(--tone,var(--red)),.85);
  color:#E8EAED;
}
.ic::after{  /* scanline interna */
  content:''; position:absolute; inset:0; opacity:.3;
  background:repeating-linear-gradient(0deg,transparent 0 2px,rgba(0,0,0,.20) 2px 3px);
}
.ic svg{width:24px; height:24px; fill:currentColor}
.ic.sm{width:34px; height:34px}
.ic.sm svg{width:18px; height:18px}

/* ── 7 · CHIP ─────────────────────────────────────────────────────────── */
.chip{
  display:inline-flex; align-items:center; gap:6px;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:9.5px; font-weight:700; letter-spacing:.10em; text-transform:uppercase;
  padding:5px 10px; border-radius:999px; line-height:1;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(var(--tone,var(--grigio)),.30);
  color:var(--soft);
}
.chip .pt{width:5px; height:5px; border-radius:50%; background:rgb(var(--tone,var(--red)))}
.chip.acceso{color:var(--white); border-color:rgba(var(--tone),.55); background:rgba(var(--tone),.10)}

/* Il pallino che pulsa quando è live. Tre battiti al minuto, non di più:
   deve dire "sta succedendo", non chiedere attenzione. */
.chip.live .pt{animation:battito 2.6s var(--ease-out) infinite}
@keyframes battito{
  0%,72%,100%{opacity:1; box-shadow:0 0 0 0 rgba(var(--red),.55)}
  36%        {opacity:.55; box-shadow:0 0 0 6px rgba(var(--red),0)}
}
@media (prefers-reduced-motion:reduce){ .chip.live .pt{animation:none} }

/* ── 8 · BOTTONI ──────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; gap:9px; cursor:pointer;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  padding:14px 22px; border-radius:var(--radius-s); text-decoration:none;
  color:var(--white); line-height:1;
  background:linear-gradient(160deg,rgba(255,255,255,.085),rgba(0,0,0,.30));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
  transition:transform .24s var(--ease-out), border-color .24s, background .24s;
}
.btn:hover{transform:translateY(-2px); border-color:rgba(var(--tone,var(--red)),.55)}
.btn:focus-visible{outline:2px solid rgba(var(--tone,var(--red)),.75); outline-offset:3px}
.btn svg{width:16px; height:16px; fill:currentColor}
/* Il bottone principale: unico posto del sito dove il rosso è una superficie,
   e comunque solo come velo sopra l'acciaio. */
.btn.primario{
  background:linear-gradient(160deg,rgba(var(--red),.30),rgba(var(--red),.10) 60%,rgba(0,0,0,.34));
  border-color:rgba(var(--red),.48);
}
.btn.primario:hover{background:linear-gradient(160deg,rgba(var(--red),.40),rgba(var(--red),.14) 60%,rgba(0,0,0,.34))}
@media (prefers-reduced-motion:reduce){ .btn:hover{transform:none} }

/* ── 9 · BARRA IN ALTO ────────────────────────────────────────────────── */
.barra{
  position:fixed; top:0; left:0; right:0; z-index:60;
  border-bottom:1px solid transparent;
  transition:background .3s, border-color .3s, backdrop-filter .3s;
}
/* Diventa solida solo dopo lo scroll: in cima il sito deve respirare. */
.barra.giu{
  background:rgba(10,11,13,.80);
  -webkit-backdrop-filter:blur(14px) saturate(135%);
  backdrop-filter:blur(14px) saturate(135%);
  border-bottom-color:var(--edge);
}
.barra .in{
  max-width:1200px; margin:0 auto; padding:12px var(--gutter);
  display:flex; align-items:center; gap:18px;
}
.marchio{display:flex; align-items:center; gap:11px; text-decoration:none; flex:none}
.marchio img{width:32px; height:32px; border-radius:6px}
.marchio .n{font-size:17px; font-weight:700; color:var(--white); letter-spacing:.01em; line-height:1}
.marchio .n b{color:rgb(var(--red))}

.menu{display:flex; gap:4px; margin-left:auto; align-items:center}
.menu a{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:10px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--dim); text-decoration:none; padding:9px 12px; border-radius:6px;
  transition:color .2s, background .2s;
}
.menu a:hover, .menu a.attivo{color:var(--white); background:rgba(255,255,255,.05)}
.menu a.attivo{box-shadow:inset 0 -2px 0 rgba(var(--red),.85)}

.apri-menu{display:none; margin-left:auto; background:none; border:0; padding:10px; cursor:pointer; color:var(--soft)}
.apri-menu svg{width:22px; height:22px; fill:currentColor}

@media (max-width:900px){
  .apri-menu{display:block}
  .menu{
    position:absolute; top:100%; left:0; right:0; flex-direction:column; gap:0;
    margin:0; padding:8px var(--gutter) 16px;
    background:rgba(10,11,13,.96); border-bottom:1px solid var(--edge);
    -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
    display:none;
  }
  .menu.aperto{display:flex}
  /* Col menu aperto la barra si scurisce anche se sei in cima: altrimenti
     il pannello solido resta appeso sotto una striscia trasparente. */
  .barra:has(.menu.aperto){background:rgba(10,11,13,.96); border-bottom-color:transparent}
  .menu a{padding:13px 4px; font-size:11px; width:100%}
  .menu a.attivo{box-shadow:inset 2px 0 0 rgba(var(--red),.85)}
}

/* ── 10 · HERO ────────────────────────────────────────────────────────── */
.hero{
  min-height:min(92vh,900px); display:flex; align-items:center;
  padding-top:clamp(96px,14vh,150px); padding-bottom:var(--sez);
}
.hero .in{
  display:grid; gap:clamp(32px,5vw,64px); align-items:center; width:100%;
  grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
}
@media (max-width:940px){
  .hero .in{grid-template-columns:1fr}
  .hero .ritratto{order:-1; max-width:280px}
}

.hero h1{margin:16px 0 0}
.hero h1 .cognome{color:rgb(var(--red))}
.hero .ruolo{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:11px; font-weight:500; letter-spacing:.20em; text-transform:uppercase;
  color:var(--dim); margin-top:18px;
}
.hero .tagline{
  font-size:clamp(19px,2.3vw,26px); color:var(--soft); font-weight:600;
  margin-top:20px; max-width:34ch; line-height:1.35;
}
.hero .azioni{display:flex; flex-wrap:wrap; gap:12px; margin-top:34px}

/* Il ritratto/logo: incastonato come un oggetto, non appoggiato. */
.ritratto{
  position:relative; aspect-ratio:1; border-radius:var(--radius);
  padding:clamp(20px,3vw,34px); display:grid; place-items:center;
  background:linear-gradient(165deg,rgba(40,43,49,.55),rgba(12,13,15,.85));
  border:1px solid var(--edge);
  box-shadow:0 30px 70px -26px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.06);
}
.ritratto img{width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 10px 26px rgba(0,0,0,.5))}
/* Staffe HUD agli angoli (§5) */
.ritratto .staffa{position:absolute; width:14px; height:14px; border:1px solid rgba(255,255,255,.30)}
.ritratto .staffa.tl{top:10px; left:10px; border-right:0; border-bottom:0}
.ritratto .staffa.tr{top:10px; right:10px; border-left:0; border-bottom:0}
.ritratto .staffa.bl{bottom:10px; left:10px; border-right:0; border-top:0}
.ritratto .staffa.br{bottom:10px; right:10px; border-left:0; border-top:0}

/* ── 11 · PANNELLO DIRETTA ────────────────────────────────────────────── */
.diretta{--tone:var(--t-live)}
.diretta .quadro{padding:clamp(18px,2.4vw,26px)}
.diretta .cima{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:18px}
.diretta .cima .titolo{font-size:19px; font-weight:700; color:var(--white); flex:1; min-width:200px}
.diretta .meta{
  display:flex; gap:18px; flex-wrap:wrap; margin-top:16px;
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:10.5px;
  letter-spacing:.10em; text-transform:uppercase; color:var(--dim);
}
.diretta .meta b{color:var(--soft); font-weight:700}

.player{
  position:relative; aspect-ratio:16/9; border-radius:var(--radius-s); overflow:hidden;
  background:#0a0b0d; border:1px solid var(--edge);
}
.player iframe{position:absolute; inset:0; width:100%; height:100%; border:0}

/* Stato offline: al posto del player, il prossimo appuntamento. */
.offline-box{
  display:grid; gap:22px; align-items:center;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  padding:clamp(22px,3vw,34px);
}
@media (max-width:760px){ .offline-box{grid-template-columns:1fr} }
.conto{display:flex; gap:10px}
.conto .u{
  flex:1; text-align:center; padding:14px 8px; border-radius:var(--radius-s);
  background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(0,0,0,.28));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.conto .u .v{font-size:clamp(28px,4vw,40px); font-weight:700; color:var(--white); line-height:1; font-variant-numeric:tabular-nums}
.conto .u .e{
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:9px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--dim); margin-top:8px;
}

/* ── 12 · PALINSESTO ──────────────────────────────────────────────────── */
.settimana{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:10px}
@media (max-width:900px){ .settimana{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:460px){ .settimana{grid-template-columns:1fr} }

.giorno{
  --tone:var(--t-grigio);
  padding:16px 14px 18px; border-radius:var(--radius-s); min-height:132px;
  display:flex; flex-direction:column; gap:8px;
  background:linear-gradient(165deg,rgba(40,43,49,.42),rgba(12,13,15,.70));
  border:1px solid var(--edge);
  position:relative; overflow:hidden;
}
.giorno .d{
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:9.5px; font-weight:700;
  letter-spacing:.20em; text-transform:uppercase; color:var(--dim);
}
.giorno .t{font-size:16px; font-weight:700; color:var(--soft); line-height:1.25; flex:1}
.giorno .o{
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:10px;
  letter-spacing:.08em; color:var(--dim);
}
.giorno.oggi{
  --tone:var(--t-live);
  border-color:rgba(var(--red),.38);
  background:linear-gradient(165deg,rgba(52,44,46,.55),rgba(14,12,13,.80));
}
.giorno.oggi::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:linear-gradient(180deg,rgba(var(--red),.95),rgba(var(--red),.10));
}
.giorno.oggi .d{color:rgb(var(--red))}
.giorno.oggi .t{color:var(--white)}
.giorno.riposo .t{color:var(--dim); font-style:italic}

/* ── 13 · GRIGLIE DI CONTENUTO ────────────────────────────────────────── */
.griglia{display:grid; gap:14px}
.griglia.g3{grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
.griglia.g4{grid-template-columns:repeat(auto-fill,minmax(265px,1fr))}
.griglia.video{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.griglia.verticali{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}

/* Card video (YouTube, clip): copertina 16:9 + testo sotto. */
.card-video{--tone:var(--t-grigio); display:flex; flex-direction:column}
.card-video .cop{
  position:relative; aspect-ratio:16/9; overflow:hidden; background:#0a0b0d;
  border-bottom:1px solid var(--edge);
}
.card-video .cop img{width:100%; height:100%; object-fit:cover;
  transition:transform .5s var(--ease-out), filter .4s; filter:saturate(.85) contrast(1.05)}
a.card-video:hover .cop img{transform:scale(1.045); filter:saturate(1) contrast(1.05)}
@media (prefers-reduced-motion:reduce){ a.card-video:hover .cop img{transform:none} }
/* Velo scuro in basso: i testi delle miniature non devono competere. */
.card-video .cop::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 45%,rgba(8,9,11,.55) 100%);
}
.card-video .play{
  position:absolute; inset:0; display:grid; place-items:center; z-index:3;
  opacity:0; transition:opacity .3s var(--ease-out);
}
a.card-video:hover .play{opacity:1}
.card-video .play span{
  width:52px; height:52px; border-radius:50%; display:grid; place-items:center;
  background:rgba(12,13,15,.70); border:1px solid rgba(255,255,255,.28);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.card-video .play svg{width:18px; height:18px; fill:var(--white); margin-left:3px}
.card-video .durata{
  position:absolute; right:8px; bottom:8px; z-index:3;
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:9.5px; font-weight:700;
  letter-spacing:.06em; padding:3px 7px; border-radius:4px; color:var(--white);
  background:rgba(8,9,11,.82); border:1px solid rgba(255,255,255,.14);
}
.card-video .sotto{padding:14px 15px 16px; display:flex; flex-direction:column; gap:8px; flex:1}
.card-video .tit{
  font-size:16px; font-weight:700; color:var(--white); line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.card-video .info{
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:9.5px; font-weight:500;
  letter-spacing:.10em; text-transform:uppercase; color:var(--dim);
  margin-top:auto; display:flex; gap:12px; flex-wrap:wrap;
}

/* Card verticale (TikTok, Reel): 9:16 con il testo sopra l'immagine. */
.card-vert{--tone:var(--t-grigio); position:relative; aspect-ratio:9/16; overflow:hidden}
.card-vert img{width:100%; height:100%; object-fit:cover; filter:saturate(.9);
  transition:transform .5s var(--ease-out)}
a.card-vert:hover img{transform:scale(1.05)}
@media (prefers-reduced-motion:reduce){ a.card-vert:hover img{transform:none} }
.card-vert .velo{
  position:absolute; inset:0; z-index:3; display:flex; flex-direction:column; justify-content:flex-end;
  padding:14px; gap:8px;
  background:linear-gradient(180deg,rgba(8,9,11,.10) 30%,rgba(8,9,11,.86) 100%);
}
.card-vert .tit{font-size:15px; font-weight:700; color:var(--white); line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}

/* Segnaposto: quando una sezione non ha (ancora) contenuti.
   Occupa tutta la riga della griglia: da solo in una colonna sembrerebbe
   una card mancante, non un messaggio. */
.vuoto{
  --tone:var(--t-grigio); grid-column:1 / -1;
  padding:clamp(26px,4vw,40px); text-align:center;
  border:1px dashed rgba(255,255,255,.13); border-radius:var(--radius);
  background:linear-gradient(165deg,rgba(40,43,49,.30),rgba(12,13,15,.55));
}
.vuoto .ic{margin:0 auto 16px}
.vuoto p{color:var(--dim); font-size:15.5px; max-width:56ch; margin:0 auto 4px}
.vuoto .btn{margin-top:20px}

/* ── 14 · SOCIAL ──────────────────────────────────────────────────────── */
.card-social{padding:18px 18px 20px; display:flex; flex-direction:column; gap:14px}
.card-social .riga{display:flex; align-items:center; gap:13px}
.card-social .nome{font-size:17px; font-weight:700; color:var(--white); line-height:1.15}
.card-social .handle{
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:10px; font-weight:500;
  letter-spacing:.08em; color:var(--dim); margin-top:4px; word-break:break-all;
}
.card-social .cta{color:var(--soft); font-size:15px; line-height:1.45; flex:1}
.card-social .vai{
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:9.5px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:rgb(var(--tone));
  display:flex; align-items:center; gap:7px;
}
.card-social .vai svg{width:11px; height:11px; fill:currentColor;
  transition:transform .3s var(--ease-out)}
a.card-social:hover .vai svg{transform:translateX(4px)}

/* ── 15 · CHI SONO ────────────────────────────────────────────────────── */
.chi{display:grid; gap:clamp(28px,4.5vw,56px); grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr)}
@media (max-width:900px){ .chi{grid-template-columns:1fr} }
.chi .testo p{color:var(--soft); font-size:17.5px; line-height:1.68; max-width:60ch}

.numeri{display:flex; flex-direction:column; gap:10px}
.num{
  --tone:var(--red);
  padding:18px 20px; border-radius:var(--radius-s);
  background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(0,0,0,.28));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
  display:flex; align-items:baseline; gap:14px;
}
.num .v{font-size:34px; font-weight:700; color:var(--white); line-height:1; font-variant-numeric:tabular-nums}
.num .e{
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:9.5px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--dim); line-height:1.4;
}

/* ── 16 · DISCORD ─────────────────────────────────────────────────────── */
.discord{--tone:var(--t-discord)}
.discord .quadro{display:grid; gap:clamp(24px,3.5vw,44px); padding:clamp(22px,3vw,34px);
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); align-items:start}
@media (max-width:900px){ .discord .quadro{grid-template-columns:1fr} }
.discord .nomeserver{font-size:clamp(24px,3vw,32px); margin-top:14px}
.discord p{color:var(--soft); margin-top:14px; font-size:16.5px; line-height:1.6}
.discord .azioni{margin-top:24px}

.canali{display:flex; flex-direction:column; gap:8px}
.canale{
  display:flex; align-items:center; gap:12px; padding:11px 13px; border-radius:var(--radius-s);
  background:rgba(255,255,255,.028); border:1px solid rgba(255,255,255,.07);
}
.canale .g{
  flex:none; width:26px; height:26px; display:grid; place-items:center;
  color:var(--dim); font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:16px; font-weight:700; line-height:1;
}
.canale .g svg{width:15px; height:15px; fill:currentColor}
.canale .n{font-size:15.5px; font-weight:700; color:var(--soft); line-height:1.2}
.canale .d{font-size:13.5px; color:var(--dim); line-height:1.35; margin-top:2px}
.canale.annunci .g{color:rgb(var(--t-oro))}
.canale.evento  .g{color:rgb(var(--t-discord))}
.canale.voce    .g{color:rgb(var(--t-verde))}

/* ── 17 · BLOG ────────────────────────────────────────────────────────── */
.card-post{--tone:var(--red); display:flex; flex-direction:column}
.card-post .cop{
  aspect-ratio:16/9; position:relative; overflow:hidden; border-bottom:1px solid var(--edge);
  background:
    radial-gradient(90% 120% at 20% -10%, rgba(225,29,42,.14), transparent 60%),
    linear-gradient(165deg,rgba(40,43,49,.75),rgba(10,11,13,.95));
}
.card-post .cop img{width:100%; height:100%; object-fit:cover}
/* Senza copertina: una "nebbia" incisa, così la card non resta nuda. */
.card-post .cop .glifo{
  position:absolute; inset:0; display:grid; place-items:center;
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:11px; font-weight:700;
  letter-spacing:.42em; text-transform:uppercase; color:rgba(255,255,255,.13);
}
.card-post .sotto{padding:16px 17px 18px; display:flex; flex-direction:column; gap:10px; flex:1}
.card-post .meta{
  display:flex; gap:12px; align-items:center; flex-wrap:wrap;
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:9.5px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--dim);
}
.card-post .meta .tag{color:rgb(var(--red))}
.card-post .tit{font-size:20px; font-weight:700; color:var(--white); line-height:1.25}
.card-post .est{color:var(--soft); font-size:15px; line-height:1.55; flex:1;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.card-post .vai{
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:9.5px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:rgb(var(--red));
  display:flex; align-items:center; gap:7px;
}
.card-post .vai svg{width:11px; height:11px; fill:currentColor; transition:transform .3s var(--ease-out)}
a.card-post:hover .vai svg{transform:translateX(4px)}

/* ── 18 · ARTICOLO ────────────────────────────────────────────────────── */
.articolo{max-width:74ch; margin:0 auto; padding-top:clamp(100px,14vh,150px)}
.articolo .meta{
  display:flex; gap:14px; flex-wrap:wrap; align-items:center; margin-bottom:18px;
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:10px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--dim);
}
.articolo .meta .tag{color:rgb(var(--red))}
.articolo h1{font-size:clamp(32px,5.5vw,54px); line-height:1.1}
.corpo{margin-top:36px; color:var(--soft); font-size:18px; line-height:1.75}
.corpo > *{margin-block:0 1.15em}
.corpo h2{font-size:26px; margin-top:1.9em; color:var(--white)}
.corpo h3{font-size:20px; margin-top:1.6em; color:var(--white)}
.corpo a{color:rgb(var(--red-glow)); text-decoration:underline; text-underline-offset:3px}
.corpo blockquote{
  margin:1.6em 0; padding:4px 0 4px 22px; border-left:2px solid rgba(var(--red),.55);
  color:var(--ink); font-size:20px; font-style:italic;
}
.corpo ul,.corpo ol{padding-left:1.3em}
.corpo li{margin-bottom:.5em}
.corpo img{border-radius:var(--radius-s); border:1px solid var(--edge); margin-block:1.6em}
.corpo code{
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:.86em;
  background:rgba(255,255,255,.06); padding:2px 6px; border-radius:4px; color:var(--ink);
}
.corpo hr{border:0; height:1px; margin:2.4em 0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.14) 20% 80%,transparent)}

/* ── 19 · PIÈ DI PAGINA ───────────────────────────────────────────────── */
footer{
  border-top:1px solid var(--edge); padding-block:clamp(40px,6vw,64px);
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.35));
}
footer .in{display:flex; gap:26px; flex-wrap:wrap; align-items:flex-start; justify-content:space-between}
footer .marchio{margin-bottom:14px}
footer .nota{color:var(--dim); font-size:13.5px; max-width:46ch; line-height:1.55}
footer .copy{
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:9.5px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--dim); margin-top:18px;
}
footer .link{display:flex; gap:10px; flex-wrap:wrap}
footer .link a{
  width:40px; height:40px; border-radius:var(--radius-s); display:grid; place-items:center;
  color:var(--dim); border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(0,0,0,.25));
  transition:color .24s, border-color .24s, transform .24s var(--ease-out);
}
footer .link a:hover{color:var(--white); border-color:rgba(var(--tone),.5); transform:translateY(-2px)}
footer .link svg{width:17px; height:17px; fill:currentColor}
@media (prefers-reduced-motion:reduce){ footer .link a:hover{transform:none} }

/* ── 20 · INGRESSO A CASCATA (§7.3) ───────────────────────────────────── */
/* fade + slide corto + de-blur, gli unici movimenti d'ingresso ammessi. */
.rivela{opacity:0; transform:translateY(14px); filter:blur(6px)}
.rivela.dentro{
  opacity:1; transform:none; filter:none;
  transition:opacity .55s var(--ease-out), transform .55s var(--ease-out), filter .55s var(--ease-out);
}
@media (prefers-reduced-motion:reduce){
  .rivela{opacity:1; transform:none; filter:none}
}

/* ── 21 · UTILITÀ ─────────────────────────────────────────────────────── */
.solo-lettori{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.salta{
  position:absolute; top:-60px; left:var(--gutter); z-index:100;
  padding:12px 18px; border-radius:var(--radius-s); background:var(--charcoal);
  border:1px solid rgba(var(--red),.5); color:var(--white); text-decoration:none;
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:11px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; transition:top .2s;
}
.salta:focus{top:12px}

/* Card verticale senza copertina: il glifo della piattaforma inciso nel
   fondo. Serve a Instagram, le cui miniature stanno su un CDN che non si
   lascia agganciare e che comunque scadono dopo poche ore. Senza questo
   resterebbe un rettangolo nero e sembrerebbe un'immagine non caricata. */
.card-vert.nuda{
  background:
    radial-gradient(90% 70% at 50% 22%, rgba(var(--tone),.14), transparent 62%),
    linear-gradient(165deg, rgba(40,43,49,.72), rgba(10,11,13,.96));
}
.card-vert .glifo{
  position:absolute; inset:0; display:grid; place-items:center; padding-bottom:22%;
  color:rgba(255,255,255,.13);
}
.card-vert .glifo svg{width:38%; height:auto; fill:currentColor}
.card-vert.nuda .velo{background:linear-gradient(180deg,transparent 45%,rgba(8,9,11,.72) 100%)}
/* Il velo è una colonna flex: senza questo il chip si stira per tutta la
   larghezza della card e sembra un bottone, non un'etichetta. */
.card-vert .velo .chip{align-self:flex-start}

/* ── 22 · IN EVIDENZA ─────────────────────────────────────────────────── */
/* Una fascia sola, subito sotto l'hero: è la cosa che conta adesso, e
   quando non conterà più sparisce togliendo `inEvidenza` da dati.js. */
.evidenza{padding-top:0; padding-bottom:var(--sez)}
.evidenza section + section::before{display:none}
.evidenza .surface{--tone:var(--red)}
.evidenza .quadro{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(24px,3.5vw,44px); align-items:center;
  padding:clamp(24px,3.4vw,40px); text-decoration:none; color:inherit;
}
@media (max-width:860px){
  .evidenza .quadro{grid-template-columns:1fr}
  .evidenza .cop{order:-1}
}
.evidenza h3{font-size:clamp(24px,3.4vw,36px); margin-top:14px; line-height:1.15}
.evidenza .quando{
  display:inline-flex; align-items:center; gap:8px; margin-top:14px;
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:11px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:rgb(var(--red));
}
.evidenza .quando svg{width:14px; height:14px; fill:currentColor}
.evidenza p{color:var(--soft); margin-top:16px; font-size:16.5px; line-height:1.6; max-width:52ch}
.evidenza .btn{margin-top:24px}
.evidenza .cop{
  border-radius:var(--radius-s); overflow:hidden; border:1px solid var(--edge);
  aspect-ratio:16/10; background:#0a0b0d;
}
.evidenza .cop img{width:100%; height:100%; object-fit:cover;
  transition:transform .6s var(--ease-out)}
.evidenza a.quadro:hover .cop img{transform:scale(1.04)}
@media (prefers-reduced-motion:reduce){ .evidenza a.quadro:hover .cop img{transform:none} }

/* ── 23 · DUE PANNELLI COMMUNITY ──────────────────────────────────────── */
.pannelli{display:flex; flex-direction:column; gap:clamp(16px,2.2vw,24px)}
.discord .racconto p{color:var(--soft); margin-top:14px; font-size:16.5px; line-height:1.6}
.discord .racconto p:first-child{margin-top:14px}
.discord .contatore{display:flex; gap:8px; flex-wrap:wrap; margin-top:20px}
.discord .contatore:empty{display:none}

/* L'evento citato dentro il pannello: una riga cliccabile, non una card
   che compete col pannello che la contiene. */
.evento{
  display:flex; align-items:center; gap:12px; margin-top:22px; padding:12px 14px;
  border-radius:var(--radius-s); text-decoration:none; color:inherit;
  background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.10);
  transition:border-color .24s, background .24s;
}
.evento:hover{border-color:rgba(var(--tone),.45); background:rgba(255,255,255,.06)}
.evento .t{font-size:15px; font-weight:700; color:var(--white); line-height:1.25}
.evento .n{font-size:13px; color:var(--dim); margin-top:3px; line-height:1.35}
.evento > svg{width:12px; height:12px; fill:rgb(var(--tone)); flex:none; margin-left:auto;
  transition:transform .3s var(--ease-out)}
.evento:hover > svg{transform:translateX(4px)}

/* ── 24 · STREAMER CONSIGLIATI ────────────────────────────────────────── */
.card-streamer{padding:18px 18px 20px; display:flex; flex-direction:column; gap:13px}
.card-streamer .riga{display:flex; align-items:center; gap:13px}
.card-streamer .avatar{
  width:52px; height:52px; border-radius:10px; flex:none; object-fit:cover;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
}
.card-streamer .avatar.vuoto{
  display:grid; place-items:center; color:#E8EAED;
  background:linear-gradient(160deg,rgba(255,255,255,.085),rgba(0,0,0,.30));
}
.card-streamer .avatar.vuoto svg{width:22px; height:22px; fill:currentColor}
/* Il blocco testo DEVE poter rimpicciolirsi: senza min-width:0 un figlio
   flex non scende sotto la larghezza del suo contenuto, e la riga sotto al
   nome si spezzava una lettera per volta invece di accorciarsi. */
.card-streamer .chi{min-width:0; flex:1}
.card-streamer .nome{
  font-size:17px; font-weight:700; color:var(--white); line-height:1.15;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.card-streamer .handle{
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:10.5px; font-weight:500;
  letter-spacing:.04em; color:var(--dim); margin-top:5px;
  /* Mai andare a capo: un handle spezzato in colonna e' illeggibile.
     Se proprio non ci sta, si accorcia con i puntini. */
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; word-break:normal;
}
.card-streamer .stato{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.card-streamer .stato .gioco{
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:9.5px; font-weight:700;
  letter-spacing:.10em; text-transform:uppercase; color:var(--dim);
}
/* La descrizione la scrivono loro sul profilo Twitch e puo' essere lunga
   (250 caratteri buoni): quattro righe tengono le card della griglia alte
   uguali senza tagliare il senso. */
.card-streamer .nota{
  color:var(--soft); font-size:14.5px; line-height:1.5; flex:1;
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden;
}
.card-streamer .titolo-live{
  font-size:13.5px; color:var(--dim); line-height:1.4; padding-top:11px;
  border-top:1px solid rgba(255,255,255,.07);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.card-streamer .vai{
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:9.5px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:rgb(var(--tone));
  display:flex; align-items:center; gap:7px;
}
.card-streamer .vai svg{width:11px; height:11px; fill:currentColor;
  transition:transform .3s var(--ease-out)}
.card-streamer:hover .vai svg{transform:translateX(4px)}
/* Chi è in onda si distingue senza urlare: il tono passa al rosso del
   brand e il bordo si accende appena. */
.card-streamer.live{--tone:225,29,42; border-color:rgba(225,29,42,.32)}

/* ── 25 · MOSAICO (proporzioni miste) ─────────────────────────────────── */
/* Instagram mette insieme foto 4:5, quadrate e reel 9:16. Con un formato
   unico e object-fit:cover le scritte finivano tagliate a meta'. Qui le
   card seguono l'altezza vera dell'immagine e scorrono in colonne: non si
   taglia niente e la sezione resta ordinata lo stesso. */
.mosaico{columns:3; column-gap:14px}
@media (max-width:900px){ .mosaico{columns:2} }
@media (max-width:520px){ .mosaico{columns:1} }
.mosaico > *{break-inside:avoid; margin-bottom:14px; width:100%}
/* `break-inside` da solo non basta su alcuni browser: senza questo una
   card puo' spezzarsi fra due colonne. */
.mosaico > *{-webkit-column-break-inside:avoid; page-break-inside:avoid}

.card-vert.natura{aspect-ratio:auto; display:block}
.card-vert.natura img{width:100%; height:auto; display:block}
/* Senza copertina serve comunque un'altezza: il glifo da solo non ne ha. */
.card-vert.natura.nuda{aspect-ratio:4/5}

/* ── 26 · SOCIAL NELLA BARRA IN ALTO ──────────────────────────────────── */
/* Sempre a portata di clic, senza dover cercare la sezione. Restano
   piccoli e grigi finché non li sfiori: sono un servizio, non devono
   competere col menu né col marchio. */
.social-barra{display:flex; gap:4px; align-items:center; margin-left:14px; padding-left:14px;
  border-left:1px solid var(--edge); flex:none}
.social-barra a{
  width:30px; height:30px; border-radius:7px; display:grid; place-items:center;
  color:var(--dim); transition:color .2s, background .2s, transform .2s var(--ease-out);
}
.social-barra a:hover{color:rgb(var(--tone)); background:rgba(255,255,255,.06); transform:translateY(-1px)}
.social-barra a:focus-visible{outline:2px solid rgba(var(--tone),.75); outline-offset:2px}
.social-barra svg{width:15px; height:15px; fill:currentColor}
@media (prefers-reduced-motion:reduce){ .social-barra a:hover{transform:none} }

/* Sotto i 1180px il menu completo + 6 icone non ci stanno: le icone
   restano (sono la cosa che chiede di piu'), il menu passa a tendina. */
@media (max-width:1180px){
  .social-barra{margin-left:auto; padding-left:0; border-left:0; order:2}
  .apri-menu{order:3; margin-left:6px}
}
@media (max-width:560px){
  /* Su telefono si tengono solo i quattro principali: sei icone piu' il
     marchio e l'hamburger diventano una fila illeggibile. */
  .social-barra a:nth-child(n+5){display:none}
  .social-barra{gap:2px}
}

/* ── 27 · TITOLI DI SEZIONE ───────────────────────────────────────────── */
/* I titoli ora dicono chiaramente in che sezione sei ("Blog", "Clip",
   "Social"). Per non farli sembrare etichette scarne, l'occhiello sopra
   e' un po' piu' marcato e il titolo ha una lineetta d'accento. */
.testa h2{position:relative; padding-bottom:14px}
.testa h2::after{
  content:''; position:absolute; left:0; bottom:0; width:44px; height:2px;
  background:linear-gradient(90deg, rgb(var(--tone,var(--red))), rgba(var(--tone,var(--red)),0));
}