/* ============================================================
   Spazio Sanremo — minimal scuro + floating glass bar
   ============================================================ */

/* Geist, auto-ospitato. Variabile 100-900: il logotipo usa il peso 200 per
   «spazio», che lo stack di sistema garantiva solo su macOS.
   SIL Open Font License 1.1 — il testo è in assets/font/OFL.txt */
@font-face {
  font-family: 'Geist';
  src: url('../font/geist.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------------------------
   LA TAVOLOZZA — «Ariston»

   Il blu è quello del palco illuminato, campionato da una fotografia della
   scenografia invece che scelto a occhio. Quello che la misura ha detto:

     · il buio del palco sta fra #000014 e #0a0a1e;
     · le pareti illuminate fra #0a1446 e #0a1464;
     · i fasci di luce sono un cobalto elettrico, #285afa e dintorni.

   Tutti nella stessa zona, fra 226° e 233°, e tutti con il canale verde
   molto sotto la retta fra rosso e blu (da −17 a −45). È questo che li
   rende cobalto e non ciano, ed è la ragione per cui questa tinta non si
   legge come violetta mentre un indaco chiaro e slavato alla stessa
   gradazione sì: a fare la differenza è la saturazione, non l'angolo.

   L'accento del testo è il cobalto schiarito quel tanto che basta a
   reggere 6,8:1 sul fondo. Schiarirlo oltre lo porterebbe verso il
   pervinca, che è la strada da cui si è già tornati indietro una volta.

   Un guadagno che il colore precedente non aveva: la distanza fra
   l'accento e il testo bianco è 2,64:1 contro 1,42:1. Un collegamento
   dentro una frase si riconosce perché il suo colore è diverso da quello
   delle parole intorno, e con l'azzurro cielo quella differenza si stava
   chiudendo.

   Il colore non entra mai nel testo corrente e non si mette sui nomi
   propri: va sui collegamenti, sulla voce di menu attiva, sulle barre dei
   grafici e sul conto alla rovescia. Un archivio si legge, e un testo
   colorato si legge peggio.
   ------------------------------------------------------------------------ */
:root {
  --bg:          #040a1a;
  --bg-2:        #0d1640;
  --text:        #f4f4f6;
  --muted:       #8e94a8;
  --dim:         #6e7590;
  --hairline:    rgba(198,214,255,.10);
  --hairline-2:  rgba(198,214,255,.18);

  --accento:     #6b93ff;
  --accento-2:   #4a6ee0;
  --accento-velo: rgba(107,147,255,.13);

  /* L'accento quando diventa un'AREA PIENA, non un testo.

     Non è pignoleria: lo stesso colore steso su un blocco si legge più
     saturo e più indaco della stessa tinta usata per qualche lettera
     sottile, perché l'occhio giudica una superficie e non un contorno.
     La pastiglia del menu a 224° sembrava violetta mentre i collegamenti
     alla stessa tinta no.

     Qui la tinta scende a 215°, tenendo identiche luminosità e
     saturazione: il blocco si legge blu, e il testo scuro sopra guadagna
     anche un po' di contrasto (da 6,9:1 a 8,4:1). */
  --accento-pieno: #6ba9ff;

  --glass:       rgba(255,255,255,.055);
  --glass-hi:    rgba(255,255,255,.13);

  /* alias storico: alcune regole scrivono --line invece di --hairline.
     Senza questa riga quei bordi ereditavano currentColor e comparivano
     bianchi invece che appena accennati. */
  --line:        rgba(198,214,255,.10);

  /* la sottolineatura dei riferimenti: vedi «COLLEGAMENTI DENTRO IL TESTO» */
  --rif:         rgba(255,255,255,.18);

  /* L'oro dei trofei, ripreso dalle statuette per non avere due gialli
     diversi nella stessa riga. Il metallo nei PNG è #d9a521, che sul fondo
     del sito legge già bene (8,8:1 sulla pagina, 7,8:1 dentro a un
     pannello); qui è schiarito a #e8b949 perché un titolo è testo sottile
     e non una superficie piena, e con il margine in più tiene anche sui
     pannelli più chiari: 10,8:1 e 9,5:1. */
  --oro:         #e8b949;
  --oro-tenue:   rgba(232,185,73,.62);

  --maxw:        1060px;
  --font: 'Geist', -apple-system, BlinkMacSystemFont, 'SF Pro Display',
          'Segoe UI', Inter, Helvetica, Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.55;
  padding-top: 132px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;

  /* L'ingresso della pagina.

     Sul <body> si anima SOLO l'opacità, mai la posizione. Una `transform`
     sul body renderebbe il body il blocco di riferimento dei figli in
     `position: fixed`, e la barra del menu smetterebbe di stare agganciata
     alla finestra: scorrendo se ne andrebbe via con la pagina. È un
     effetto collaterale che si vede solo provando a scorrere, quindi è il
     tipo di cosa che passa inosservata fino alla pubblicazione.

     Il movimento verso l'alto lo fanno i contenitori qui sotto, che fissi
     non sono e quindi possono permetterselo. */
  animation: entra-pagina .42s ease-out both;
}

@keyframes entra-pagina {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Il contenuto sale di pochissimo mentre compare. Otto pixel: abbastanza
   perché si percepisca un arrivo, troppo pochi perché si percepisca
   un'animazione. Il ritardo di 60 ms fa partire il movimento a dissolvenza
   già cominciata, così le due cose non sembrano lo stesso gesto. */
.hero, .band {
  animation: sale-contenuto .5s .06s cubic-bezier(.2,.7,.3,1) both;
}

@keyframes sale-contenuto {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* Chi ha chiesto al sistema meno animazioni non se le trova addosso: la
   pagina compare e basta, senza dissolvenza e senza movimento. */
@media (prefers-reduced-motion: reduce) {
  body, .hero, .band, body::before, body::after { animation: none; }
}

/* Gli aloni di fondo.

   PERCHÉ HANNO UN COLORE LORO, E NON L'ACCENTO.
   All'inizio riusavano --accento e --accento-2, che è la cosa che viene
   naturale. Il risultato era un fondo che tirava al verde, e per due volte
   la colpa è sembrata del colore di base: non lo era. Misurando quanto il
   canale verde sta sopra la retta fra rosso e blu, il fondo dava −1 (blu
   pulito) mentre i due accenti davano +18 e +21, cioè tiravano al ciano.
   Stesi su mezzo schermo a bassa opacità, erano loro a dare la dominante.

   I colori qui sotto sono scelti perché quella misura sia vicina a zero:
   #2c5ea8 dà −5,8 e #3a6fc0 dà −7,3. Sono blu con dentro pochissimo
   verde, e infatti si leggono come notte e non come acquario.

   Restano vicini di tinta all'accento (215° contro 202°), quindi la
   famiglia è la stessa: cambia solo che questi non devono essere leggibili,
   devono solo colorare il buio.

   Tre regole che li tengono discreti: opacità fra .07 e .22, nessuna
   seconda tinta che farebbe arcobaleno, e posizione fissa rispetto alla
   finestra, così il testo scorre sopra una luce ferma. */

:root {
  --alone-1: 34, 64, 158;     /* #22409e, le pareti illuminate */
  --alone-2: 51, 88, 216;     /* #3358d8, i fasci di luce */
}

/* Due strati invece di uno: si muovono con tempi e versi diversi, e il
   movimento risulta irregolare invece che una giostra. Si anima solo
   `transform`, che la scheda grafica sa fare senza ridisegnare niente:
   animare `background-position` su un elemento sfocato a schermo intero
   farebbe girare le ventole. */
body::before,
body::after {
  content: '';
  position: fixed;
  inset: -25%;
  pointer-events: none;
  z-index: 0;
  filter: blur(30px);
  will-change: transform;
}

body::before {
  background:
    radial-gradient(38% 30% at 20% 16%, rgba(var(--alone-1),.22), transparent 68%),
    radial-gradient(28% 24% at 88% 56%, rgba(var(--alone-1),.14), transparent 70%),
    radial-gradient(40% 28% at 52% 96%, rgba(var(--alone-1),.10), transparent 72%);
  animation: deriva-a 46s ease-in-out infinite alternate;
}

body::after {
  background:
    radial-gradient(30% 26% at 84% 10%, rgba(var(--alone-2),.13), transparent 66%),
    radial-gradient(34% 28% at 10% 76%, rgba(var(--alone-2),.10), transparent 70%);
  animation: deriva-b 61s ease-in-out infinite alternate;
}

/* Il movimento è di pochi punti percentuali su una macchia larga mezzo
   schermo e sfocata di 30 px: a schermo si legge come un respiro, non
   come uno spostamento. I due tempi sono 46 e 61 secondi, primi fra loro,
   così i due strati non tornano mai allineati e il disegno non si ripete
   in modo riconoscibile. */
@keyframes deriva-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(2.5%, -2%, 0) scale(1.06); }
}
@keyframes deriva-b {
  from { transform: translate3d(0, 0, 0) scale(1.04); }
  to   { transform: translate3d(-3%, 2.5%, 0) scale(1); }
}

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

/* COLLEGAMENTI DENTRO IL TESTO

   Nell'archivio quasi ogni nome e quasi ogni anno porta da qualche parte:
   il conduttore alla sua scheda, l'anno all'edizione, l'etichetta alla
   casa discografica. Senza un segno restano parole come tutte le altre, e
   un collegamento che non si vede è un collegamento che non esiste.

   Le classifiche delle edizioni lo facevano già, con una riga appena
   accennata sotto il nome dell'artista. Qui la stessa riga vale ovunque:
   dentro le schede dati, nelle partecipazioni, negli occhielli, nelle
   legende. Sottile perché queste pagine ne hanno trenta per schermata, e
   trenta righe azzurre sarebbero una grata.

   Restano fuori i pulsanti veri (`.chip`), che si vedono già da soli, e i
   titoli delle righe, che hanno il loro colore al passaggio del mouse. */
.rk .by a,
.rk .aside a,
.rk-fanta .tit a,
.lead a,
.credits a,
.fact dd a,
.part a:not(.chip),
.kicker a,
.sub a,
.legenda a,
.anche a,
.anno-link {
  border-bottom: 1px solid var(--rif);
}

.rk .by a:hover,
.rk .aside a:hover,
.rk-fanta .tit a:hover,
.lead a:hover,
.credits a:hover,
.fact dd a:hover,
.part a:not(.chip):hover,
.kicker a:hover,
.sub a:hover,
.legenda a:hover,
.anche a:hover,
.anno-link:hover {
  color: var(--text);
  border-color: var(--text);
}

.wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 26px;
}

/* ------------------------------------------------------------
   Floating glass bar
   ------------------------------------------------------------ */

.glassbar {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 500;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 8px 8px 8px 22px;
  border-radius: 999px;
  background: var(--glass);
  border: 1px solid var(--hairline-2);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow:
    0 10px 40px rgba(0,0,0,.55),
    0 2px 10px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.10);
  transition: top .3s cubic-bezier(.4,0,.2,1), padding .3s, background .3s;
}

/* Il riflesso speculare in alto alla barra è stato tolto: su un fondo blu
   scuro quella mezzaluna bianca si vedeva come una patina lattiginosa
   invece che come vetro. Restano la sfocatura di fondo e il bordo chiaro,
   che l'effetto vetro lo fanno già. */

.glassbar.scrolled {
  top: 12px;
  background: rgba(255,255,255,.075);
}

/* ------------------------------------------------------------------------
   Il logotipo è un PNG a tre densità (vedi marca() in main.js), non testo più
   SVG. Motivo: composto in HTML le lettere le aggancia alla griglia dei pixel
   il rasterizzatore dei caratteri, le barre no — e a ogni zoom sembravano
   staccarsi dalla parola. Come immagine sono un pezzo solo.

   Prezzo da pagare: non eredita il colore, non è selezionabile, e a zoom
   intermedi il browser lo ricampiona. Per questo c'è l'alt e per questo le
   misure stanno nell'attributo, così il posto è riservato prima del caricamento.
   ------------------------------------------------------------------------ */
.marca      { display: inline-block; line-height: 0; }
.marca-img  { display: block; width: 150px; height: 19px; }

/* Perché il contenitore è flex e non un semplice span.
   Un elemento inline-block sta su una riga di testo, e la riga riserva
   comunque lo spazio del «puntello»: la discendente del carattere
   ereditato, sotto la linea di base. L'immagine si appoggia alla base e
   quello spazio le resta sotto — quindi dentro un riquadro centrato
   l'immagine risulta più alta del centro di circa 1,6 px (16 px di corpo,
   interlinea 1,55). Con `display: flex` la riga di testo non esiste più:
   l'altezza del contenitore è esattamente quella dell'immagine. */
.gb-logo      { display: flex; align-items: center; gap: 4px; }

/* Il segno che apre la tendina. Sul desktop non serve: il menu è già
   tutto in vista, e un secondo modo di arrivarci sarebbe solo rumore. */
.gb-tendina { display: none; }
.gb-pannello { display: none; }

.gb-nav { display: flex; align-items: center; gap: 2px; }

/* «Archivio» è un <button> e non un <a>, perché apre una tendina invece
   di portare da qualche parte. Qui si veste come le altre voci: un
   pulsante di sistema porterebbe un fondo, un bordo e un carattere suoi. */
.gb-apre {
  border: 0;
  background: none;
  font-family: inherit;
  cursor: pointer;
}

.gb-nav a, .gb-apre {
  position: relative;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -.005em;
  color: var(--muted);
  padding: 8px 15px;
  border-radius: 999px;
  transition: color .18s, background .18s;
  white-space: nowrap;
}

.gb-nav a:hover, .gb-apre:hover { color: var(--text); background: rgba(255,255,255,.06); }

.gb-nav a.active, .gb-apre.active {
  color: #04070c;
  background: var(--accento-pieno);
  box-shadow: 0 1px 8px rgba(107,169,255,.32), inset 0 1px 0 rgba(255,255,255,.45);
}

/* menu a tendina dentro la barra */

.gb-item { position: relative; }

.gb-drop {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 186px;
  padding: 7px;
  border-radius: 18px;
  /* Coprente sul serio. A .72 il contenuto della pagina si leggeva
     attraverso la tendina e i due testi si accavallavano: una tendina è
     un foglio che si mette davanti, non un vetro smerigliato. A .94 resta
     un filo di trasparenza, quel tanto che basta perché si capisca che
     galleggia, e sotto non si legge più niente.

     Il colore è quello del fondo, non un grigio neutro: un grigio su un
     fondo blu si vede come una macchia di un'altra famiglia. */
  background: rgba(9,17,32,.94);
  border: 1px solid var(--hairline-2);
  backdrop-filter: blur(26px) saturate(150%);
  -webkit-backdrop-filter: blur(26px) saturate(150%);
  box-shadow: 0 16px 48px rgba(0,0,0,.66), inset 0 1px 0 rgba(255,255,255,.10);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s, transform .2s, visibility .2s;
}

.gb-item:hover .gb-drop,
.gb-item:focus-within .gb-drop,
.gb-item.open .gb-drop {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.gb-drop a {
  display: block;
  padding: 9px 14px;
  border-radius: 12px;
  font-size: 13.5px;
  color: var(--muted);
}
.gb-drop a:hover { background: rgba(255,255,255,.07); color: var(--text); }
 /* La pagina in cui ci si trova, dentro la tendina, si segnala come nella
    barra: pastiglia piena nel colore d'accento e testo scuro sopra. Prima
    era un rettangolo appena più chiaro del fondo, che si confondeva con
    l'effetto del passaggio del puntatore: due stati diversi non possono
    avere lo stesso aspetto. */
.gb-drop a.active {
  color: #04070c;
  background: var(--accento-pieno);
  box-shadow: 0 1px 8px rgba(107,169,255,.28), inset 0 1px 0 rgba(255,255,255,.4);
}
.gb-drop a.active:hover { color: #04070c; background: var(--accento-pieno); }

/* La freccetta è disegnata, non un carattere: vedi FRECCIA in main.js.
   L'opacità è .8 e non .6 perché a questa misura il segno deve leggersi
   come un segno, non come un'ombra accanto alla parola; sotto il mouse
   diventa piena come il testo. */
/* La freccetta è centrata sull'altezza della parola, non appoggiata alla
   sua linea di base: un inline-flex si allinea per base, e una punta che
   si allarga in alto finiva un paio di pixel troppo in basso rispetto al
   centro ottico di «Archivio». `translateY` e non `top`, perché la stessa
   proprietà serve già per farla ruotare quando il menu si apre: le due
   trasformazioni si scrivono insieme. */
.caret {
  display: inline-flex;
  margin-left: 6px;
  opacity: .8;
  transform: translateY(-1px);
  transition: transform .2s ease, opacity .18s;
}
.caret svg { display: block; }
.gb-apre:hover .caret, .gb-item.open .caret, .gb-item:hover .caret { opacity: 1; }
.gb-item.open .caret, .gb-item:hover .caret, .gb-item:focus-within .caret {
  transform: translateY(-1px) rotate(180deg);
}

/* IL PULSANTE IN FONDO A UN RIQUADRO

   Nei due riquadri di «Da riscoprire» il pulsante stava attaccato al
   testo: le due schede hanno testi di lunghezza diversa — una curiosità
   lunga e un elenco di autori corto — e i due pulsanti finivano a quote
   diverse, come due righe storte.

   `margin-top: auto` lo spinge in fondo alla colonna, e i due riquadri,
   che sono alti uguali perché stanno nella stessa griglia, li allineano
   fra loro. A destra perché è il verso in cui si va. */
.glass-panel { display: flex; flex-direction: column; }
.links.coda { margin-top: auto; padding-top: 26px; justify-content: flex-end; }

/* ------------------------------------------------------------
   I QUATTRO TROFEI
   ------------------------------------------------------------

   Le statuette del Festival: palma e leone per i Campioni, il trofeo
   delle Nuove Proposte, la chiave di violino della Critica «Mia Martini»,
   il basco e gli occhiali della Sala Stampa «Lucio Dalla».

   Regola che tiene insieme le quattro: si allineano per ALTEZZA, non per
   riquadro. Hanno proporzioni diverse — la palma è larga, il Lucio Dalla
   è stretto e alto — e riportarle tutte a un quadrato le farebbe sembrare
   di taglie diverse. L'altezza è quella che l'occhio confronta, come per
   i caratteri. Le immagini sono già ritagliate sul disegno, senza vuoto
   intorno, quindi `height` basta e `width: auto` fa il resto. */
.trofeo {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  vertical-align: -3px;
  margin-right: 7px;
}
.trofeo img {
  height: 19px;
  width: auto;
  display: block;
  /* le statuette sono d'oro su fondo scuro: un filo di luce dietro le
     stacca dal blu senza metterci un riquadro intorno */
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.45));
  pointer-events: none;
  -webkit-user-drag: none;
}
.trofeo b {
  font-size: 11px;
  font-weight: 600;
  color: var(--oro);
  font-variant-numeric: tabular-nums;
}

/* Il nome che il premio aveva in quell'anno, nell'albo d'oro delle
   quattro famiglie: più piccolo e più spento della canzone, perché è un
   dato d'archivio e non il contenuto della riga. */
.allora { font-size: .78rem; color: var(--dim); margin-top: 3px; }

/* Il titoletto che stacca i quattro grandi premi dagli altri, nell'indice
   dei premi. Non è una sezione nuova: è una riga di servizio dentro un
   elenco, quindi piccola e distanziata. */
.sec-altri-premi {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: -.012em;
  margin: 46px 0 6px;
  padding-top: 26px;
  border-top: 1px solid var(--hairline);
}

/* La statuetta dentro a una riga: più piccola, e senza il conto. Sta
   sempre DOPO il nome, come nelle classifiche, così i nomi restano
   incolonnati invece di essere spinti a destra solo dove c'è un premio.
   Il margine quindi va a sinistra, altrimenti resta uno spazio sospeso a
   fine riga. */
h3 .trofeo img, .rk .tit .trofeo img, .part .trofeo img { height: 17px; }
.rk .tit .trofeo, h3 .trofeo, .part .trofeo { margin: 0 0 0 8px; }

/* IL MEDAGLIERE DENTRO AL TITOLO

   Le statuette stanno in fila dopo il nome, nella stessa riga: si leggono
   insieme a lui e non costano una riga in più. La misura è in `em`, cioè
   mezza altezza del titolo, quindi si rimpiccioliscono da sole quando il
   titolo si rimpicciolisce sugli schermi stretti — e non c'è una seconda
   regola da tenere allineata alla prima.

   `display: inline-flex` e non `flex`: dentro a un titolo devono
   comportarsi come una parola, e andare a capo con lui se non ci stanno. */
.medagliere {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .28em;
  margin-left: .38em;
  vertical-align: baseline;
}
.medagliere .trofeo { margin-right: 0; vertical-align: 0; }
/* .72em e non mezzo: nel titolo di una scheda le statuette sono la cosa
   che si guarda subito dopo il nome, e a mezza altezza si leggevano come
   un segno di punteggiatura. Restano dentro l'altezza delle maiuscole,
   quindi non spingono in basso la riga. Negli elenchi e nelle classifiche
   la misura è un'altra (17 px fissi): lì sono una nota a margine. */
.medagliere .trofeo img { height: .72em; }
.medagliere .trofeo b { font-size: .3em; }

/* La riga di un elenco che porta un trofeo: il titolo in oro. Non un
   fondo colorato né un bordo, che in un elenco di quaranta canzoni
   sarebbero quaranta rettangoli: solo il nome, che è quello che si legge
   scorrendo. */
.part.premiata a[style*="font-weight:500"],
.part.premiata > div > span[style*="font-weight:500"] { color: var(--oro); }
.part.premiata .pl { color: var(--oro-tenue); }

/* Lo stesso oro nelle classifiche delle edizioni, per chi è arrivato
   primo: nella gara, nelle Nuove Proposte e nella serata delle cover. */
.rk.premiata .tit,
.rk.premiata .tit a { color: var(--oro); }
.rk.premiata .pos { color: var(--oro); }

/* ------------------------------------------------------------
   Ricerca globale
   ------------------------------------------------------------ */

.gb-cerca {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-left: 4px;
  border: none;
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  color: var(--muted);
  cursor: pointer;
  transition: color .18s, background .18s;
}
.gb-cerca:hover { color: var(--text); background: rgba(255,255,255,.13); }

.ric-overlay {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: grid;
  grid-template-rows: 1fr;
  align-items: start;
  justify-items: center;
  padding: 10vh 20px 20px;
}
.ric-overlay[hidden] { display: none; }
body.ric-bloccato { overflow: hidden; }

.ric-fondo {
  position: fixed;
  inset: 0;
  background: rgba(6,6,8,.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.ric-box {
  position: relative;
  width: 100%;
  max-width: 660px;
  max-height: 76vh;
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  background: rgba(20,20,25,.86);
  border: 1px solid var(--hairline-2);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  box-shadow: 0 30px 80px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.14);
  overflow: hidden;
  animation: ric-entra .17s cubic-bezier(.4,0,.2,1);
}
@keyframes ric-entra { from { opacity: 0; transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .ric-box { animation: none; } }

.ric-campo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 16px 16px 20px;
  border-bottom: 1px solid var(--hairline);
}
.ric-lente { color: var(--dim); display: grid; place-items: center; }
.ric-campo input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-family: inherit;
  font-size: 17px;
  letter-spacing: -.015em;
}
.ric-campo input::placeholder { color: var(--dim); }
.ric-campo input::-webkit-search-cancel-button { display: none; }
/* Il pulsante di chiusura. Era la parola «esc» dentro un riquadro, cioè
   una scorciatoia da tastiera disegnata come un tasto: su un telefono,
   dove la tastiera non c'è, era un pulsante che chiedeva di premere un
   tasto inesistente. La croce si capisce dappertutto, e la scorciatoia
   resta, scritta nel `title` per chi ha una tastiera. */
.ric-esc {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border: 1px solid var(--hairline-2);
  background: transparent;
  color: var(--dim);
  border-radius: 999px;
  cursor: pointer;
  transition: color .18s, background .18s, border-color .18s;
}
.ric-esc:hover { color: var(--text); background: var(--glass); border-color: var(--hairline-2); }

.ric-esiti { overflow-y: auto; padding: 8px; flex: 1; overscroll-behavior: contain; }

/* APPENA APERTO, SOLO IL CAMPO

   Prima di scrivere una lettera non c'è né un risultato né un conteggio,
   ma i due contenitori ci sono lo stesso, ognuno con il suo filo di
   separazione e il suo riempimento: sotto al campo comparivano due righe
   vuote, che sembravano un errore di caricamento.

   Si nascondono da soli quando dentro non c'è niente. Nessun codice in
   più: `:empty` guarda il contenuto vero, quindi tornano a comparire da
   sole appena arriva il primo risultato. */
.ric-esiti:empty { display: none; }
.ric-box:has(.ric-conta:empty) .ric-piede { display: none; }
.ric-vuoto { color: var(--dim); font-size: .92rem; padding: 26px 14px; text-align: center; }

.ric-titolo {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--dim);
  padding: 14px 12px 7px;
}
.ric-gruppo:first-child .ric-titolo { padding-top: 6px; }

.ric-voce {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 12px;
  border-radius: 11px;
  cursor: pointer;
}
.ric-voce:hover, .ric-voce.on { background: rgba(255,255,255,.08); }
.ric-nome { font-size: .97rem; letter-spacing: -.012em; }
.ric-sotto {
  color: var(--dim);
  font-size: .8rem;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 45%;
}
.ric-esiti mark {
  background: none;
  color: var(--text);
  font-weight: 600;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.28);
}
.ric-nome { color: var(--muted); }

.ric-tutti {
  display: block;
  margin: 8px 4px 4px;
  padding: 12px;
  border-radius: 11px;
  text-align: center;
  font-size: .87rem;
  color: var(--muted);
  border: 1px solid var(--hairline);
}
.ric-tutti:hover { color: var(--text); background: rgba(255,255,255,.05); }

.ric-piede {
  display: flex;
  gap: 18px;
  align-items: center;
  padding: 10px 18px;
  border-top: 1px solid var(--hairline);
  font-size: 11px;
  color: var(--dim);
}
.ric-piede .ric-conta { margin-left: auto; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------
   Statistiche
   ------------------------------------------------------------ */

/* Quattro colonne fisse, non `auto-fit`.
   Le voci sono otto: con `auto-fit` il numero di colonne dipende dalla
   larghezza della finestra, e a 1060 px ne entravano sei — sei piene e due
   sulla riga sotto, con quattro celle vuote che sembravano dati mancanti.
   Otto diviso quattro fa due righe piene sempre. */
.numeri {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: 18px;
  overflow: hidden;
}
.numero {
  display: grid;
  gap: 6px;
  padding: 26px 22px;
  background: var(--bg);
  transition: background .2s;
}
.numero:hover { background: rgba(255,255,255,.035); }
.numero b {
  font-size: clamp(1.8rem, 3.4vw, 2.5rem);
  font-weight: 500;
  letter-spacing: -.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.numero span { font-size: .8rem; color: var(--dim); letter-spacing: -.005em; }

/* classifica con barra proporzionale */
.grad { list-style: none; counter-reset: none; }
.grad li { display: grid; grid-template-columns: 34px 1fr; align-items: center; }
.grad .pos {
  font-size: .78rem;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
  text-align: right;
  padding-right: 14px;
}
.grad .voce {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 18px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--hairline);
  overflow: hidden;
}
.grad li:first-child .voce { border-top: 1px solid var(--hairline); }
.grad .barra {
  position: absolute;
  inset: 1px auto 1px 0;
  background: rgba(255,255,255,.055);
  border-radius: 0 3px 3px 0;
  transition: background .2s;
}
.grad .voce:hover .barra { background: rgba(255,255,255,.1); }
.grad .nome { position: relative; font-size: 1rem; letter-spacing: -.015em; }
.grad .nome em {
  display: block;
  font-style: normal;
  color: var(--dim);
  font-size: .8rem;
  margin-top: 4px;
  letter-spacing: 0;
}
.grad .val {
  position: relative;
  color: var(--muted);
  font-size: .84rem;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* istogramma.
   Il grafico non si riscala in proporzione allo schermo: settantasei barre
   in trecento pixel non si distinguono più. Sotto una certa larghezza si
   scorre in orizzontale, che è meglio di un grafico illeggibile. */
.grafico { margin: 0; overflow-x: auto; overscroll-behavior-x: contain; }
.grafico svg {
  display: block;
  width: 100%;
  min-width: 620px;
  height: auto;
}
.grafico-tela { position: relative; }
/* Le barre nel blu profondo, quella toccata nell'azzurro pieno: il salto
   fra i due si vede anche di sfuggita, e non serve nient'altro per capire
   quale anno si sta guardando. */
.grafico .gb .barra { fill: var(--accento-2); transition: fill .12s; }
.grafico .gb .barra.on { fill: var(--accento); }
/* il rettangolo invisibile che copre tutta l'altezza: serve a prendere il
   puntatore anche sugli anni con la barra bassa */
.grafico .gb .tocca { fill: transparent; }
/* ogni barra è un collegamento all'edizione: il puntatore deve dirlo */
.grafico .gb a { cursor: pointer; }

/* ATTENZIONE: questa è la targhetta che segue il dito sui grafici delle
   statistiche, non una didascalia. È in posizione assoluta e non va a
   capo (`nowrap`), quindi usata per una nota normale diventa una riga
   larga 837 px che fa scorrere di lato tutta la pagina: è successo sulla
   scheda del 2027. Per una nota sotto a un elenco c'è `.legenda`. */
.grafico-nota {
  position: absolute;
  pointer-events: none;
  padding: 7px 11px;
  border-radius: 10px;
  background: rgba(20,20,25,.95);
  border: 1px solid var(--hairline-2);
  box-shadow: 0 8px 24px rgba(0,0,0,.5);
  font-size: 12.5px;
  color: var(--text);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  z-index: 5;
}
.grafico-nota[hidden] { display: none; }
.grafico .asse { stroke: var(--hairline-2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.grafico .ga text {
  fill: var(--dim);
  font-size: 11px;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
}
.grafico figcaption {
  margin-top: 16px;
  font-size: .84rem;
  color: var(--dim);
}
.grafico figcaption b { color: var(--muted); font-weight: 500; }

/* pagina dei risultati */
.ric-sezione { margin-bottom: 54px; }
.ric-sezione .sec { margin-bottom: 18px; }
.ric-n { color: var(--dim); font-weight: 400; font-size: .6em; margin-left: 6px; }
.ric-espandi { display: block; margin-top: 20px; background: none; border: none;
               font-family: inherit; cursor: pointer; padding: 0; }
#risultati mark { background: none; color: var(--text); box-shadow: inset 0 -1px 0 rgba(255,255,255,.3); }

/* ------------------------------------------------------------
   Tipografia
   ------------------------------------------------------------ */

.kicker {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 26px;
}

/* «Anche alla conduzione e fra gli ospiti.»

   La riga che collega le schede della stessa persona. Sta sotto al nome e
   pesa poco: è un rimando, non un dato, e non deve competere con le cifre
   che vengono subito dopo. Il colore va sui collegamenti e non sulla
   frase, come dappertutto nel sito. */
.anche {
  margin: 14px 0 0;
  font-size: 15px;
  color: var(--dim);
}

h1.display {
  font-size: clamp(2.7rem, 8.2vw, 5.6rem);
  line-height: .96;
  letter-spacing: -.045em;
  font-weight: 600;
}

h1.display .fade { color: var(--dim); }

.lead {
  font-size: clamp(1.02rem, 1.7vw, 1.22rem);
  color: var(--muted);
  max-width: 46ch;
  margin-top: 30px;
  letter-spacing: -.011em;
}

h2.sec {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  letter-spacing: -.032em;
  font-weight: 600;
}

.hero { padding: 34px 0 96px; }

.band { padding: 92px 0; border-top: 1px solid var(--hairline); }

/* Il titolo di sezione e il suo collegamento. Da quando il collegamento è
   una pastiglia e non più testo nudo, l'allineamento per base non regge:
   una pastiglia ha il suo riempimento e appoggiata alla base del titolo
   scende troppo. Si centra sull'altezza del titolo. */
.band-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 46px;
  flex-wrap: wrap;
}

.textlink {
  font-size: 13.5px;
  color: var(--muted);
  transition: color .18s;
}
.textlink:hover { color: var(--accento); }

/* ------------------------------------------------------------
   Liste (news, edizioni)
   ------------------------------------------------------------ */

.list { border-top: 1px solid var(--hairline); }

.row {
  border-bottom: 1px solid var(--hairline);
}
.row { cursor: pointer; }

/* L'EVIDENZIAZIONE CHE NON SEMBRA TAGLIATA

   Stava sulla riga intera, e la riga è larga esattamente quanto il testo:
   il rettangolo chiaro cominciava e finiva sul filo della prima e
   dell'ultima lettera, con gli spigoli vivi. Da fuori non si legge come
   «questa riga», si legge come una fascia troncata ai due lati.

   Ora sta sul contenuto, che esce di 14 px oltre il testo da una parte e
   dall'altra e ha gli angoli tondi: l'aria intorno alle parole dice che
   l'evidenziazione le contiene invece di tagliarle. La riga di separazione
   resta larga quanto il testo, perché quella deve allinearsi al testo.

   I 14 px stanno dentro ai 26 di `.wrap`, quindi non si crea scorrimento
   orizzontale nemmeno sullo schermo più stretto. */
.row-main {
  display: grid;
  align-items: baseline;
  gap: 22px;
  margin-inline: -14px;
  padding: 24px 18px;
  border-radius: 16px;
  transition: background .2s;
}
.row:hover .row-main { background: rgba(255,255,255,.032); }

/* news */
.row.news .row-main { grid-template-columns: 92px 1fr auto; }

.row .meta {
  font-size: 12px;
  color: var(--dim);
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}

.row h3 a { color: inherit; }
.row:hover h3 a { color: var(--accento); }

.row h3 {
  font-size: clamp(1.05rem, 2vw, 1.32rem);
  font-weight: 500;
  letter-spacing: -.022em;
  line-height: 1.28;
}

.row .sub {
  color: var(--muted);
  font-size: .94rem;
  margin-top: 7px;
  max-width: 62ch;
  letter-spacing: -.008em;
}

/* IL PULSANTE IN FONDO ALLA RIGA

   Prima la riga intera era un <a> e la freccetta un decoro: sembrava un
   pulsante e non lo era, e soprattutto impediva di mettere altri
   collegamenti dentro la riga, perché un <a> dentro un <a> non è HTML
   valido. Ora la freccetta è un pulsante vero, e accanto ci può stare
   l'anno che porta all'edizione. */
.chip.vai {
  align-self: center;
  white-space: nowrap;
  gap: 7px;
}
/* IL SEGNO DENTRO AI PULSANTI

   Lo stesso chevron delle righe degli elenchi, non la freccia con il
   gambo: due disegni per la stessa cosa si notavano appena stavano vicini.
   Più grande del testo del pulsante e più spento, così si legge come un
   verso e non come una lettera. */
/* DI QUANTO VA ALZATO IL SEGNO

   Il «›» è più alto del testo che gli sta accanto, e il flex centra le
   scatole, non l'inchiostro: la scatola di un carattere ha sopra e sotto
   quantità diverse di vuoto, quindi due scatole centrate fra loro lasciano
   i due disegni sfasati.

   Lo scarto non è a occhio, è calcolato dalle metriche del carattere: con
   `line-height: 1` il centro dell'inchiostro del segno cade 0,97 px sotto
   quello del testo nei pulsanti e 1,19 px sotto nelle righe degli elenchi.
   Un pixel in su, e i due si leggono allineati.

   Si usa `top` e non `transform` perché la trasformazione serve già a far
   scorrere il segno di lato al passaggio del mouse. */
.chip .segno {
  font-size: 17px;
  line-height: 1;
  position: relative;
  top: -1px;
  color: var(--dim);
  transition: transform .18s ease, color .18s;
}
.chip:hover .segno, .row:hover .chip .segno, .rk:hover .chip .segno { color: var(--text); }
.chip:hover .segno { transform: translateX(2px); }
.chip .segno:first-child { transform: none; }
.chip:hover .segno:first-child { transform: translateX(-2px); }
/* negli indici senza pulsante scritto resta solo il segno, ma con un
   bersaglio grande come gli altri */

/* La freccetta in fondo alla riga: la stessa dell'elenco delle edizioni,
   e negli indici dell'archivio è un segno e basta — chi la preme preme la
   riga, che è tutta un collegamento. */
.chev {
  align-self: center;
  position: relative;
  top: -1px;            /* vedi «di quanto va alzato il segno», più sopra */
  color: var(--dim);
  font-size: 18px;
  line-height: 1;
  transition: transform .28s cubic-bezier(.4,0,.2,1), color .2s;
}
.row.open .chev { transform: rotate(45deg); color: var(--text); }
.row:not(.open):hover .chev { color: var(--text); transform: translateX(3px); }

.row-detail {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .34s cubic-bezier(.4,0,.2,1);
}
.row.open .row-detail { grid-template-rows: 1fr; }
.row-detail > div { overflow: hidden; }

.detail-inner {
  padding: 4px 4px 30px;
  color: var(--muted);
  font-size: .96rem;
  max-width: 68ch;
}

/* edizioni */
.row.ed .row-main { grid-template-columns: 92px 1fr 1fr auto; }

.row.ed .year {
  font-size: 1.55rem;
  font-weight: 500;
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
/* Il vincitore resta bianco.

   Provato in azzurro: era l'informazione che si cerca scorrendo un elenco
   di edizioni, e colorarla sembrava l'uso più utile del colore. In pagina
   però il risultato è un elenco di nomi propri accesi, che a colpo
   d'occhio si leggono come collegamenti tutti uguali invece che come
   persone diverse. Un nome si mette in evidenza col peso, non con la
   tinta: qui basta il 500 contro il 400 della riga accanto. */
.row.ed .winner { font-size: 1.06rem; font-weight: 500; letter-spacing: -.02em; color: var(--text); }
.row.ed .song   { color: var(--muted); font-size: .93rem; margin-top: 4px; }
/* che cosa ha fatto comparire questa edizione fra i risultati di ricerca */
.row.ed .match  {
  color: var(--dim); font-size: .84rem; margin-top: 7px;
  padding-left: 11px; border-left: 1px solid var(--line);
  display: grid; gap: 3px;
}
.row.ed .hosts  { color: var(--dim); font-size: .87rem; letter-spacing: -.005em; }

.facts { display: grid; gap: 1px; margin-top: 2px; }
.fact {
  display: grid;
  grid-template-columns: 116px 1fr;
  gap: 18px;
  padding: 10px 0;
  border-top: 1px solid var(--hairline);
  font-size: .93rem;
}
/* La riga sopra serve a separare due voci, e sopra la prima non c'è niente
   da separare: lì faceva solo da sottolineatura al titolo della scheda. */
.facts .fact:first-child { border-top: 0; padding-top: 0; }

.fact dt { color: var(--dim); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; padding-top: 2px; }
.fact dd { color: var(--text); }

/* ------------------------------------------------------------
   Pannello vetro (statistiche / filtri)
   ------------------------------------------------------------ */

.glass-panel {
  background: var(--glass);
  border: 1px solid var(--hairline);
  border-radius: 22px;
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
  padding: 34px 32px;
}

.figures { display: flex; flex-wrap: wrap; gap: 54px; }
.figure .n {
  font-size: clamp(2.1rem, 5vw, 3.1rem);
  font-weight: 500;
  letter-spacing: -.045em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.figure .l {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--dim);
  margin-top: 11px;
}

/* toolbar filtri — sticky sotto la barra */

.toolbar {
  position: sticky;
  top: 96px;
  z-index: 40;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px;
  margin-bottom: 26px;
  border-radius: 999px;
  background: rgba(14,14,17,.7);
  border: 1px solid var(--hairline);
  backdrop-filter: blur(20px) saturate(170%);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09);
}

.field {
  background: transparent;
  border: none;
  color: var(--text);
  font-family: inherit;
  font-size: 14.5px;
  padding: 10px 18px;
  border-radius: 999px;
  outline: none;
}
.field:focus { background: rgba(255,255,255,.06); }
input.field { flex: 1; min-width: 190px; }
input.field::placeholder { color: var(--dim); }
select.field { color: var(--muted); cursor: pointer; }
select.field option { background: #14141a; color: var(--text); }

.count { font-size: 12.5px; color: var(--dim); margin-bottom: 8px; padding-left: 4px; }

/* La stessa riga, quando fa anche da intestazione delle colonne (elenco
   delle edizioni). Griglia e rientri sono quelli di `.row-main`: il
   margine negativo di 14 px e i 18 di padding rimettono il testo a +4 px,
   dove stava il conteggio da solo, e dove comincia l'anno nelle righe
   sotto. La freccetta c'è ma non si vede: serve solo a tenere la sua
   colonna larga quanto quella delle righe. */
.count.colonne {
  display: grid;
  grid-template-columns: 92px 1fr 1fr auto;
  gap: 22px;
  align-items: baseline;
  margin-inline: -14px;
  padding: 0 18px 10px;
}
.count.colonne .chev { visibility: hidden; }

/* Il conteggio all'estremità destra della stessa riga. Fuori dalla griglia
   (`absolute`), così non si porta via larghezza alle colonne: i 18 px sono
   il padding della riga, e lo fanno finire esattamente sul bordo destro
   dell'elenco. */
.count.colonne { position: relative; }
.count.colonne .quante { position: absolute; right: 18px; bottom: 10px; }

/* Quando la ricerca non trova niente non ci sono colonne da intestare, e
   resta il solo conteggio, dove stava prima: a sinistra. */
.count.colonne.vuota { display: block; }
.count.colonne.vuota > div:not(.quante) { display: none; }
.count.colonne.vuota .quante { position: static; }
/* `display: grid` batte l'`[hidden]` del browser, che è meno specifico:
   senza questa riga le intestazioni restavano in pagina anche quando la
   ricerca non trovava niente. */
.count.colonne[hidden] { display: none; }

.notice {
  font-size: .87rem;
  color: var(--dim);
  border-left: 1px solid var(--hairline-2);
  padding-left: 16px;
  margin-bottom: 30px;
  max-width: 60ch;
}

/* ------------------------------------------------------------
   Storia
   ------------------------------------------------------------ */

/* I collegamenti dentro un testo: azzurri, ma senza sottolineatura fissa.
   In un archivio i collegamenti sono tantissimi, e sottolinearli tutti
   trasformerebbe un paragrafo in un reticolo. La sottolineatura compare
   al passaggio del puntatore. */
/* I COLLEGAMENTI DENTRO A UN TESTO LUNGO

   Erano azzurri. In un elenco un collegamento azzurro non dà fastidio,
   perché è una riga a sé; dentro a una pagina di prosa come «Storia»
   diventano trenta macchie di colore in mezzo al testo, e l'occhio le
   insegue invece di leggere.

   Qui valgono le stesse regole di tutto il resto del sito: il colore del
   testo e una riga appena accennata sotto, che diventa piena al passaggio
   del mouse. Vedi «COLLEGAMENTI DENTRO IL TESTO», in cima. */
.prose a, .articolo-corpo a {
  color: inherit;
  border-bottom: 1px solid var(--rif);
}
.prose a:hover, .articolo-corpo a:hover { color: var(--text); border-color: var(--text); }
.prose a:hover, .articolo-corpo a:hover { text-decoration: underline; text-underline-offset: 3px; }

.prose p { color: var(--muted); font-size: 1.02rem; max-width: 62ch; margin-bottom: 20px; letter-spacing: -.01em; }

.chapters { border-top: 1px solid var(--hairline); }
.chapter {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 30px;
  padding: 40px 0;
  border-bottom: 1px solid var(--hairline);
}
.chapter .yr {
  font-size: .82rem;
  color: var(--dim);
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
  padding-top: 6px;
}
.chapter h3 { font-size: 1.28rem; font-weight: 500; letter-spacing: -.025em; margin-bottom: 10px; }
.chapter p  { color: var(--muted); font-size: .97rem; max-width: 60ch; letter-spacing: -.008em; }

/* ------------------------------------------------------------
   Footer
   ------------------------------------------------------------ */

.foot { border-top: 1px solid var(--hairline); padding: 60px 0 46px; margin-top: 30px; }
.foot-in { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
/* la colonna del marchio: la misura stava scritta in linea dentro main.js,
   e da lì nessuna regola poteva riallinearla per lo schermo stretto */
.foot-marca { max-width: 260px; }
/* `:not(.marca-img)` non è pedanteria: questa regola nasceva per il
   logotipo in SVG, che si adattava da solo. Con il PNG imponeva 16 px di
   altezza lasciando i 150 di larghezza, e il marchio usciva schiacciato.
   Ora la misura del logotipo la decide una regola sola, qui sotto. */
.foot img:not(.marca-img) { height: 16px; opacity: .8; margin-bottom: 16px; }
/* Nel footer il logotipo è più grande che nella barra: lì è un pulsante di
   servizio, qui è la firma in chiusura. 150 × 19 diventa 174 × 22, che
   mantiene il rapporto del disegno con uno scarto dello 0,18%, e resta
   dentro la colonna da 260 px. Il PNG arriva fino a @3x (450 px), quindi
   anche su schermo a doppia densità non viene ingrandito oltre il vero. */
.foot .marca-img { width: 174px; height: 22px; opacity: .85; }
.foot .marca { margin-bottom: 16px; }
.foot p, .foot a { color: var(--dim); font-size: .87rem; }
.foot a { display: block; padding: 3px 0; transition: color .18s; }
.foot a:hover { color: var(--text); }
.foot h4 { font-size: 11px; text-transform: uppercase; letter-spacing: .11em; color: var(--dim); margin-bottom: 12px; font-weight: 500; }
.foot-bottom {
  margin-top: 46px; font-size: .78rem; color: #6e7590;
  /* due estremi della stessa riga: la nota legale a sinistra, la firma a
     destra. Su schermo stretto vanno a capo e restano allineate a sinistra,
     invece di stringersi in due colonne da quattro parole l'una. */
  display: flex; justify-content: space-between; gap: 16px 40px; flex-wrap: wrap;
}
.foot-bottom .firma { color: var(--dim); }
/* il collegamento della firma è in linea, non un blocco come gli altri del
   footer, altrimenti «Vuoi un sito così?» andrebbe a capo da solo */
.foot-bottom a { display: inline; padding: 0; color: var(--muted); }
.foot-bottom a:hover { color: var(--text); }

/* ------------------------------------------------------------
   Pagina edizione
   ------------------------------------------------------------ */

.tabs {
  display: flex;
  gap: 4px;
  padding: 6px;
  margin-bottom: 34px;
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--hairline);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }

.tab {
  flex: none;
  padding: 9px 17px;
  border-radius: 999px;
  border: none;
  background: none;
  color: var(--muted);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background .18s, color .18s;
}
.tab:hover { color: var(--text); background: rgba(255,255,255,.05); }
.tab.on {
  color: #0b0b0d;
  background: rgba(255,255,255,.92);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}

.pane { display: none; }
.pane.on { display: block; animation: fade .3s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* classifica */

.rank { border-top: 1px solid var(--hairline); }

/* La classifica del FantaSanremo ha due sole colonne: il posto e il nome.
   Senza questa riga eredita la griglia a tre della classifica del
   Festival, e il nome resta schiacciato a sinistra con mezza riga vuota
   a destra. */
.rk-fanta { grid-template-columns: 44px 1fr auto; }
.rk-fanta.senza-punti { grid-template-columns: 44px 1fr; }
/* I punti in coda alla riga, come il piazzamento nelle altre classifiche:
   cifre a larghezza fissa, così le colonne restano incolonnate anche fra
   numeri di tre e di due cifre. */
.rk-fanta .punti {
  color: var(--text);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  white-space: nowrap;
}
.rk-fanta .punti span { color: var(--dim); font-weight: 400; font-size: .82em; }

/* LE CLASSIFICHE SI COMPORTANO COME GLI ELENCHI DELL'ARCHIVIO

   Stessa evidenziazione, stessa riga premibile tutta. Il rettangolo
   chiaro non può stare sul fondo della riga, perché la riga porta anche
   il filo di separazione in cima e quello deve restare allineato al
   testo: sta su un `::before` che sborda di 14 px da una parte e
   dall'altra, con `z-index: -1` per finire dietro alle parole e davanti
   al fondo della pagina.

   Solo dove c'è una scheda da aprire: le righe di Sanremo Giovani non ce
   l'hanno, e una riga che si illumina senza portare da nessuna parte è
   una promessa non mantenuta. Da qui il `:has(.vai-scheda)`. */
.rk:has(.vai-scheda) { position: relative; cursor: pointer; }
.rk:has(.vai-scheda)::before {
  content: "";
  position: absolute;
  inset: 2px -14px;
  border-radius: 16px;
  transition: background .2s;
  z-index: -1;
}
.rk:has(.vai-scheda):hover::before { background: rgba(255,255,255,.032); }

/* Tutto quello che dentro la riga porta altrove sta sopra alla copertura
   del titolo, altrimenti il titolo se lo mangerebbe. */
.rk .by a, .rk .credits a, .rk .aside a, .rk .links a, .rk .badge {
  position: relative;
  z-index: 1;
}

/* Il titolo che divide due serate dentro la stessa scheda: senza, le due
   graduatorie di Sanremo Giovani sembravano una sola con il primo posto
   ripetuto a metà. Il primo non ha margine sopra, perché la riga di testa
   della scheda lo precede già. */
.sec-serata {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -.012em;
  margin: 38px 0 6px;
}

.sec-serata:first-child { margin-top: 0; }

.rk {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 18px;
  align-items: baseline;
  padding: 17px 4px;
  border-bottom: 1px solid var(--hairline);
}
/* L'evidenziazione al passaggio del mouse NON sta qui: la riga è larga
   quanto il testo e un fondo su di lei si legge come una fascia tagliata
   ai due lati. Sta sul `::before` più sopra, che sborda e ha gli angoli
   tondi. Questa regola c'era ancora, e le due si sommavano: si vedeva un
   rettangolo chiaro dentro l'altro. */

.rk .pos {
  font-size: 1.05rem;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.rk.podio .pos { color: var(--accento); font-size: 1.3rem; }  /* il numero di posizione, non un nome */
.rk .tit { font-size: 1.03rem; font-weight: 500; letter-spacing: -.02em; }
.rk .by  { color: var(--muted); font-size: .9rem; margin-top: 3px; }
.rk .aside { color: var(--dim); font-size: .82rem; text-align: right; }
.rk-lato { display: grid; justify-items: end; align-content: start; gap: 12px; }
.rk-lato .links { margin: 0; }

.credits { color: var(--dim); font-size: .85rem; margin-top: 6px; }

.links { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  color: var(--muted);
  background: rgba(255,255,255,.05);
  border: 1px solid var(--hairline);
  transition: background .18s, color .18s, border-color .18s;
}
.chip:hover { background: rgba(255,255,255,.1); color: var(--text); border-color: var(--hairline-2); }
button.chip { font-family: inherit; cursor: pointer; }
.chip.on {
  background: var(--accento-pieno);
  color: #04070c;
  border-color: transparent;
}
.chip span { color: var(--dim); font-variant-numeric: tabular-nums; }
.chip.on span { color: rgba(0,0,0,.5); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; }

.embed {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  border: 1px solid var(--hairline);
  margin-top: 16px;
  max-width: 620px;
}
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.quote {
  border-left: 1px solid var(--hairline-2);
  padding: 2px 0 2px 18px;
  margin: 16px 0;
  color: var(--muted);
  font-size: .95rem;
  font-style: italic;
  max-width: 46ch;
}
.quote cite { display: block; font-style: normal; font-size: .78rem; color: var(--dim); margin-top: 8px; }

.bullets { list-style: none; }
.bullets li {
  position: relative;
  padding: 0 0 14px 20px;
  color: var(--muted);
  font-size: .96rem;
  max-width: 66ch;
}
.bullets li::before {
  content: '';
  position: absolute;
  left: 2px; top: .62em;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--dim);
}

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }

.serata-head {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--dim);
  margin: 34px 0 12px;
}

/* testata in cima alla scheda di una singola serata */

.testata-serata {
  padding: 22px 26px;
  margin-bottom: 26px;
  border-radius: 18px;
  background: var(--glass);
  border: 1px solid var(--hairline);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09);
}
.testata-serata .ts-data {
  font-size: 1.22rem;
  letter-spacing: -.028em;
  font-weight: 500;
  text-transform: capitalize;
}
.testata-serata .ts-con {
  color: var(--muted);
  font-size: .93rem;
  margin-top: 7px;
}
.testata-serata .ts-con a {
  color: var(--text);
  border-bottom: 1px solid var(--rif);
}
.testata-serata .ts-con a:hover { border-color: var(--text); }

/* ascolti */

.ascolti { border-top: 1px solid var(--hairline); }

.ascolto {
  display: grid;
  grid-template-columns: 190px 1fr 132px;
  gap: 22px;
  align-items: center;
  padding: 18px 4px;
  border-bottom: 1px solid var(--hairline);
}
.ascolto .a-lab { color: var(--muted); font-size: .9rem; letter-spacing: -.008em; }
.ascolto .a-bar {
  height: 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.055);
  overflow: hidden;
}
.ascolto .a-bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,.35), rgba(255,255,255,.82));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
}
.ascolto .a-val {
  text-align: right;
  font-size: .95rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.015em;
}
.ascolto .a-val span { display: block; color: var(--dim); font-size: .76rem; margin-top: 3px; }

/* ------------------------------------------------------------
   Indici (artisti, autori, ospiti, canzoni)
   ------------------------------------------------------------ */

.alpha { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 26px; }
.alpha button {
  min-width: 30px;
  padding: 6px 8px;
  border-radius: 9px;
  border: none;
  background: none;
  color: var(--dim);
  font-family: inherit;
  font-size: 12.5px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.alpha button:hover { color: var(--text); background: rgba(255,255,255,.06); }
.alpha button.on { color: #0b0b0d; background: rgba(255,255,255,.9); }
.alpha button:disabled { opacity: .22; cursor: default; }

.badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  color: var(--dim);
  border: 1px solid var(--hairline);
  vertical-align: middle;
  margin-left: 9px;
}

.row.entity .row-main { grid-template-columns: 1fr auto auto; gap: 16px; position: relative; }
.row.entity .n-part { color: var(--dim); font-size: .84rem; white-space: nowrap; }

/* IL COLLEGAMENTO CHE SI ALLARGA A TUTTA LA RIGA

   Il titolo è un <a> normale, ma il suo `::after` è un rettangolo vuoto
   grande quanto `.row-main`: da lì in poi la riga si preme dove capita,
   come nell'elenco delle edizioni, senza mettere un <a> dentro un altro
   <a>. Il rettangolo non ha colore, serve solo a raccogliere il clic.

   Gli altri collegamenti della riga — l'anno che porta all'edizione, gli
   artisti di una canzone — si alzano di un piano e restano sopra a quella
   copertura: senza questo, il titolo se li mangerebbe tutti. */
.vai-scheda::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.row.entity .sub a,
.row.entity .anno-link { position: relative; z-index: 1; }

/* L'anno si preme su tutta la sua superficie e non solo sulle quattro
   cifre. Il bersaglio si allarga con un rettangolo invisibile intorno,
   non con il riempimento: il riempimento spingerebbe in giù la riga di
   sottolineatura, che deve restare attaccata alle cifre. */
.row.entity .anno-link::before {
  content: "";
  position: absolute;
  inset: -11px -9px;
}

.part {
  display: grid;
  grid-template-columns: 62px 1fr auto;
  gap: 16px;
  padding: 11px 0;
  border-top: 1px solid var(--hairline);
  font-size: .93rem;
  align-items: baseline;
}
.part .yr { color: var(--dim); font-variant-numeric: tabular-nums; }
.part .pl { color: var(--dim); font-size: .82rem; text-align: right; }

.empty { color: var(--dim); font-size: .93rem; padding: 30px 4px; }

/* ------------------------------------------------------------
   Responsive
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto; }
}

/* artisti fuori classifica: ritirati, esclusi */
.rk.fuori .pos,
.rk.fuori .tit { opacity: .62; }

/* legenda sotto una classifica (F / NF) */
.legenda {
  font-size: .78rem;
  color: var(--dim);
  letter-spacing: .02em;
  margin: 10px 0 30px 4px;
}
.legenda span { opacity: .7; }

/* ------------------------------ fotografie ------------------------------
   Vengono da Wikimedia Commons: libere, ma quasi sempre da attribuire.
   Cliccando si aprono in grande, ed è lì che compaiono i crediti.        */

.ritratto {
  object-fit: cover; cursor: zoom-in; background: var(--panel);
  border: 1px solid var(--line); -webkit-user-drag: none; user-select: none;
}
.ritratto {
  width: 172px; height: 172px; border-radius: 50%;
  margin-bottom: 26px; display: block;
}

#lightbox {
  position: fixed; inset: 0; z-index: 90; display: none;
  background: rgba(8, 8, 10, .93);
  backdrop-filter: blur(18px) saturate(120%);
  align-items: center; justify-content: center; padding: 5vh 5vw;
}
#lightbox.on { display: flex; }
#lightbox figure { margin: 0; max-width: 100%; max-height: 90vh; text-align: center; }
#lightbox img {
  max-width: 100%; max-height: 78vh; border-radius: 10px;
  /* è un blocco: senza questo resta incollata a sinistra */
  margin: 0 auto;
  user-select: none; -webkit-user-drag: none;
}
#lightbox figcaption {
  color: var(--dim); font-size: .85rem; margin-top: 16px; line-height: 1.6;
}
#lightbox figcaption a { color: var(--muted); }
#lightbox .lb-desc { display: block; color: var(--muted); margin-bottom: 4px; }
.lb-chiudi {
  position: absolute; top: 18px; right: 22px; width: 42px; height: 42px;
  border-radius: 50%; border: 1px solid var(--line); cursor: pointer;
  background: rgba(255, 255, 255, .06); color: var(--text); font-size: 1.5rem;
  line-height: 1;
}

/* Una fonte che non è un indirizzo web ma la citazione di un libro: si
   scrive, non si trasforma in un collegamento verso il proprio testo. */
.fonte-cita { color: var(--dim); font-size: .86em; }
.fonte-link { color: var(--dim); }
.fonte-link:hover { color: var(--text); }

/* Gli indirizzi delle fonti si scrivono per intero e vanno a capo dove
   serve: troncarli faceva sembrare rotto un collegamento che funziona. */
.fonte-url { word-break: break-all; line-height: 1.45; }

/* ------------------------------------------------------------
   Home: conto alla rovescia e carosello degli articoli
   ------------------------------------------------------------ */

.conto {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding: 30px 34px;
  border-radius: 22px;
  background: var(--glass);
  border: 1px solid var(--hairline-2);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
  transition: border-color .2s, background .2s;
}
.conto:hover { border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.075); }
.conto .kicker { margin-bottom: 10px; }
/* I quadranti del conto alla rovescia: mesi, giorni, ore.
   `tabular-nums` è obbligatorio, non estetico: senza, ogni volta che un
   numero cambia cifra la riga si sposta di qualche pixel, e con un valore
   che si aggiorna da solo il movimento si nota. */
.conto-quadranti { display: flex; gap: 26px; }
.conto-q { text-align: center; min-width: 62px; }
.conto-q b {
  display: block;
  font-size: clamp(2.2rem, 6vw, 3.4rem);
  font-weight: 500;
  letter-spacing: -.05em;
  line-height: .9;
  font-variant-numeric: tabular-nums;
  /* Il colore delle pastiglie e non quello dei collegamenti: le cifre del
     conto alla rovescia sono grandi e piene, e valgono come superficie più
     che come testo. Stessa ragione per cui la pastiglia del menu ha un
     valore suo.

     Diventano bianche quando il Festival è in onda: il cambio di colore è
     il segnale che la sezione ha cambiato mestiere. */
  color: var(--accento-pieno);
}
.conto-q span {
  display: block;
  margin-top: 8px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--dim);
}
.conto-quadranti.in-corso .conto-q b { color: var(--text); }

/* Il logotipo come titolo della home.
   Largo quanto la colonna di testo ma con un tetto, perché oltre una certa
   misura smette di essere un marchio e diventa una scritta. */
/* Sotto il logotipo, nella home, una riga sottile.
   Chiude il marchio e apre quello che viene dopo, che è il mestiere di un
   filetto. Va per tutta la colonna e non solo sotto il disegno: una riga
   lunga quanto il logotipo sembrerebbe una sottolineatura, cioè parte del
   marchio, mentre così si legge come una divisione della pagina. */
.marchione {
  line-height: 0;
  margin-bottom: 0;
  padding-bottom: 34px;
  border-bottom: 1px solid var(--hairline);
}

/* Il logotipo allineato al testo, non al bordo del suo file.
   L'SVG si porta dentro del vuoto a sinistra: rasterizzandolo a 560 px
   l'inchiostro comincia a 7,00 px dal bordo dell'immagine. Metà è il
   bordo di sicurezza del viewBox (40 unità su 6888), metà è la spalla
   della «s» iniziale. La frase qui sotto comincia invece a 0,54 px — la
   spalla della «T» di Geist a corpo 41,6 px — quindi senza correzione il
   marchio risulta rientrato di sei pixel e mezzo rispetto al testo. Da
   fermi non si nota, ma con la frase larga uguale sotto sì.

   Il recupero è in percentuale e non in pixel perché il logotipo
   rimpicciolisce con la finestra: dentro la calc «100%» vale la larghezza
   del contenitore, che sotto i 560 px è anche la larghezza dell'immagine,
   così lo scarto resta proporzionato a qualunque misura. 7,00 su 560 è
   l'1,25%.

   Corretto qui e non nel file del logotipo perché quel vuoto serve
   altrove — nella barra e nell'immagine social il marchio non deve
   toccare i bordi. */
.marchione img {
  --logo-largo: min(100%, 560px);
  width: var(--logo-largo);
  height: auto;
  margin-left: calc(var(--logo-largo) * -0.0125);
}

/* La promessa del sito, in grande e tutta di un pezzo.
   Niente parole in evidenza: un peso solo, un colore solo.

   Bianca e piena come il logotipo: la differenza fra le due cose non la fa
   il colore e nemmeno il peso, la fa la misura. Il marchio resta la cosa
   più grande, questa è il gradino sotto, e la riga dei numeri in --dim è
   il terzo. Tre gradini della stessa luce. */
.claim {
  /* Senza il logotipo sopra, la frase apre la pagina: non ha più bisogno
     dello stacco che la separava dal marchio. Il margine serve solo
     quando è preceduta da qualcosa. */
  margin-top: 0;

  /* La scala è quella di h1.display, il titolo delle altre pagine, perché
     questa riga è il titolo della home: il logotipo sopra è un marchio,
     non una frase, e senza di lei la pagina si aprirebbe senza dire di che
     cosa parla.

     Il corpo massimo è 3,6rem e non i 5,6 di h1.display, e la ragione è
     misurata sul font vero: a 5,6rem questa frase occupa 2.363 px e la
     colonna ne offre 1.012, cioè tre righe sotto a un logotipo largo
     560 px. A 3,6rem ne occupa 1.519 e si spezza in due righe di circa
     760 px, che è la misura del logotipo poco più larga. Due righe, non
     tre, e il marchio resta la cosa più grande della pagina. */
  font-size: clamp(1.9rem, 4.6vw, 3.6rem);
  font-weight: 600;
  letter-spacing: -.045em;
  line-height: 1.06;
  color: var(--text);

  /* `balance` spezza in due righe di lunghezza simile invece di lasciare
     «a oggi» da solo in fondo; il tetto in em fa sì che il punto di rottura
     scenda insieme al corpo quando la finestra si stringe. */
  max-width: 16em;
  text-wrap: balance;
}

/* La coda della frase, in grigio: «dal 1951 a oggi» dice da quando a quando,
   ed è un'informazione di secondo piano rispetto a che cosa c'è dentro.
   Il grigio è --muted, quello che il sito usa già per il testo secondario,
   e non un grigio nuovo: a 3,6rem fa 6,5:1 sul fondo, ben oltre il 3:1 che
   il testo grande richiede, e 2,75:1 contro il bianco della prima parte,
   abbastanza perché le due metà si leggano come due cose diverse. */
.claim-coda { color: var(--muted); }

/* preceduta da un titolo o da un occhiello, torna a staccarsi */
h1.display + .claim, .kicker + .claim { margin-top: 18px; }

.lead-marchio { margin-top: 20px; max-width: 46ch; }

/* Carosello: una notizia per volta, che ruota da sola.
   Il cambio è una dissolvenza e non uno scorrimento: le lastre stanno una
   sopra l'altra nella stessa cella di griglia, e cambia solo l'opacità.
   Niente da calcolare, niente da ridisegnare, e il riquadro non cambia
   altezza fra una notizia e l'altra. */
.carosello { position: relative; }

.car-vetrina {
  display: grid;
  /* `minmax(0, 1fr)` e non `auto`: una colonna implicita si dimensiona sul
     contenuto più largo, e con `overflow: hidden` sopra il risultato non
     è una barra di scorrimento ma il testo tagliato a metà parola. Su
     schermo stretto si vedeva: «pensa al tou|». */
  grid-template-columns: minmax(0, 1fr);
  border: 1px solid var(--hairline);
  border-radius: 22px;
  overflow: hidden;
  background: var(--bg-2);
}
/* Il passaggio è uno scorrimento.
   Le lastre stanno tutte nella stessa cella di griglia, una sopra l'altra.
   Quella attiva è al centro; le altre aspettano spostate di lato, dalla
   parte da cui arriveranno. La lastra che sta uscendo porta la classe
   `uscita` e va dalla parte opposta: senza quella distinzione, in CSS
   «non attiva» comprenderebbe sia chi se ne va sia chi aspetta, e le due
   si muoverebbero nello stesso verso. `--dir` vale 1 o -1 e lo imposta il
   JavaScript a ogni cambio. */
.car-lastra {
  grid-area: 1 / 1;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 42%) 1fr;
  /* UN'ALTEZZA FISSA, NON UN MINIMO

     Era `min-height`, e allora l'altezza la decideva la notizia con il
     titolo più lungo: bastava pubblicarne una da tre righe invece che da
     due e tutto il carosello cresceva di quaranta pixel, cambiando la home
     senza che nessuno avesse toccato la home. E cambiava di nuovo il
     giorno dopo, quando quella notizia usciva dalle prime quattro.

     Adesso la misura è questa e resta questa. Perché regga, il testo si
     ferma a due righe di titolo e tre di sommario (vedi `.car-corpo h3` e
     `.car-corpo p`): il taglio è nel carosello, non nell'articolo, e chi
     vuole il resto ci entra. */
  height: 352px;
  opacity: 0;
  visibility: hidden;
  transform: translateX(calc(var(--dir, 1) * 60px));
  transition: opacity .78s ease, transform .78s cubic-bezier(.3, .8, .2, 1),
              visibility 0s linear .78s;
  pointer-events: none;
}
.car-lastra.on {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  transition: opacity .78s ease, transform .78s cubic-bezier(.3, .8, .2, 1);
}
.car-lastra.uscita { transform: translateX(calc(var(--dir, 1) * -60px)); }

@media (prefers-reduced-motion: reduce) {
  .car-lastra, .car-lastra.on { transition: opacity .2s linear; transform: none; }
}

/* senza immagine il testo si prende tutto lo spazio */
.car-lastra:not(:has(.car-foto)) { grid-template-columns: 1fr; }
/* L'ALTEZZA DELLA LASTRA LA DECIDE IL TESTO, NON LA FOTOGRAFIA

   Finché le fotografie erano orizzontali non si notava: alte quanto la
   metà della loro larghezza, stavano dentro ai 268 px minimi e l'altezza
   della lastra la dettava il testo. Poi è arrivata una fotografia
   quadrata: a larghezza piena diventava alta quanto la colonna è larga, e
   si trascinava dietro tutto il carosello.

   L'immagine esce dal flusso e si appoggia ai bordi del suo riquadro:
   così non può più spingere niente, e `cover` la ritaglia a qualunque
   forma prenda la lastra. */
.car-foto {
  position: relative;
  background: var(--bg);
  border-right: 1px solid var(--hairline);
}
/* LE FOTO DEL CAROSELLO NON SI PORTANO VIA CON UN CLIC

   `pointer-events: none` toglie all'immagine il menu del tasto destro e
   il trascinamento: il clic attraversa e finisce sul riquadro sotto, che
   non è un'immagine e quindi non offre «Salva immagine con nome». Il
   `touch-callout` fa la stessa cosa sul telefono, dove la pressione lunga
   aprirebbe il pannello di condivisione con «Salva nelle foto».

   Va detto per quello che è: è un ostacolo, non una protezione. Il file
   viaggia comunque dal server al browser, e chi apre gli strumenti per
   sviluppatori lo trova. Dalle infrazioni vere difende la licenza scritta
   sotto la fotografia, non il foglio di stile. */
.car-foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.car-corpo {
  padding: 40px 42px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 14px;
  max-width: 68ch;
}
.car-data {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--dim);
}
.car-corpo h3 {
  font-size: clamp(1.35rem, 2.9vw, 2rem);
  font-weight: 500;
  letter-spacing: -.032em;
  line-height: 1.2;
  /* due righe e basta: è quello che tiene ferma l'altezza della lastra */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.car-corpo h3 a:hover { color: var(--muted); }
.car-corpo p {
  color: var(--muted);
  font-size: .98rem;
  letter-spacing: -.008em;
  max-width: 60ch;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.car-corpo .chip { margin-top: 6px; }

.car-comandi {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 20px;
}
.car-freccia {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: transparent;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: color .18s, border-color .18s, background .18s;
}
.car-freccia:hover { color: var(--text); border-color: var(--hairline-2); background: rgba(255,255,255,.05); }

.car-punti { display: flex; align-items: center; gap: 8px; }

/* `flex: 0 0 auto` non è pleonastico.
   I puntini stanno in un contenitore flex, e per impostazione predefinita
   un elemento flex può restringersi sotto la misura richiesta. Mentre il
   puntino attivo si allarga da 7 a 22 px, il flex compensava schiacciando
   gli altri: per un istante diventavano ovali, poi tornavano tondi. Con
   `flex: 0 0 auto` la misura è quella dichiarata e basta. */
.car-punto {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: var(--dim);
  opacity: .5;
  cursor: pointer;
  transition: width .7s cubic-bezier(.3, .8, .2, 1), opacity .35s, background .35s;
}
.car-punto:hover { opacity: .9; }
.car-punto.on { background: var(--text); opacity: 1; width: 22px; }
@media (prefers-reduced-motion: reduce) { .car-punto { transition: opacity .2s, background .2s; } }

/* ============================================================
   Le notizie
   ============================================================ */

/* La griglia di news.html: schede tutte della stessa misura, in ordine di
   data. Le colonne si contano da sole con `auto-fill`: 320 px è la misura
   sotto la quale una scheda non racconta più niente, e sopra quella soglia
   ne entrano quante ce ne stanno. Nessuna interruzione scritta a mano per
   il telefono — ce n'è una sola, per non lasciare una colonna sola larga
   quanto lo schermo su un tablet stretto. */
.griglia-news {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 26px;
  margin-top: 8px;
}

.scheda-news {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-2);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .22s ease, transform .22s ease;
}
.scheda-news:hover { border-color: var(--line); transform: translateY(-2px); }

/* Tutta la scheda è cliccabile, ma il collegamento è uno solo e invisibile,
   steso sopra. L'alternativa — avvolgere la scheda in un <a> — annega il
   titolo, la data e la categoria dentro un unico nome lunghissimo per chi
   naviga con uno screen reader; così invece il collegamento ha il suo
   `aria-label` e il resto resta testo. */
.scheda-news-tutta { position: absolute; inset: 0; z-index: 2; }

.scheda-news figure, .scheda-news .copertina-scritta { margin: 0; }
.scheda-news img {
  display: block; width: 100%; aspect-ratio: 16 / 10;
  object-fit: cover; background: var(--bg);
}

/* Le notizie senza fotografia non restano mezze vuote e non ricevono un
   rettangolo grigio: al posto dell'immagine va la categoria scritta in
   grande e sbiadita. Non finge di essere una foto, e tiene le schede
   della stessa altezza — che è l'unica ragione per cui si mette un
   segnaposto. */
.copertina-scritta {
  aspect-ratio: 16 / 10;
  display: grid; place-items: center;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.05), transparent 70%),
    var(--bg);
  border-bottom: 1px solid var(--hairline);
}
.copertina-scritta span {
  display: block;
  padding: 0 24px;
  font-size: 1.12rem;
  font-weight: 300;
  line-height: 1.32;
  letter-spacing: -.02em;
  color: var(--dim);
  text-align: center;
  /* tre righe al massimo: oltre, la copertina diventa un muro di testo */
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}

.scheda-news-corpo { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }

.scheda-news-meta {
  display: flex; align-items: center; gap: 10px;
  font-size: .78rem; color: var(--dim); margin-bottom: 12px;
}
.scheda-news-meta .tag {
  color: var(--accento);
  border: 1px solid rgba(107,147,255,.36);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: .72rem;
  letter-spacing: .02em;
}

.scheda-news h3 {
  font-size: 1.14rem; font-weight: 500; letter-spacing: -.025em;
  line-height: 1.28; margin-bottom: 10px; color: var(--text);
}
.scheda-news p {
  font-size: .94rem; color: var(--muted); line-height: 1.5;
  letter-spacing: -.008em;
  /* tre righe e poi taglia: le schede restano allineate anche quando un
     sommario è lungo il doppio degli altri */
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.scheda-news-piede {
  margin-top: auto; padding-top: 16px;
  font-size: .78rem; color: var(--dim);
}

/* ------------------- la striscia sotto anni e persone -------------------- */

/* Le stesse schede della griglia, messe in fila e scorrevoli di lato. In
   fondo alla pagina di un'edizione o di una persona le notizie sono una
   coda, non il contenuto principale: impilate verticalmente allungherebbero
   la pagina per qualcosa che quasi sempre è una notizia o due.

   Lo scorrimento si aggancia (`scroll-snap`) così una scheda non resta mai
   tagliata a metà, e il margine negativo lascia che la striscia esca fino
   al bordo dello schermo sul telefono, dove tenerla dentro al `wrap`
   vorrebbe dire mostrare mezza scheda e basta. */
.sezione-news { margin-top: 64px; }
.sezione-news .sec { margin-bottom: 22px; }

.striscia-news {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, 340px);
  gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: 12px;
  margin-inline: calc(var(--fuga, 0px) * -1);
  padding-inline: var(--fuga, 0px);
  scrollbar-width: thin;
  scrollbar-color: var(--hairline-2) transparent;
}
.striscia-news > * { scroll-snap-align: start; }

/* Una notizia sola non è una striscia: resta una scheda di misura normale,
   senza barra di scorrimento e senza il vuoto a destra. */
.striscia-news.sola {
  grid-auto-flow: row;
  grid-auto-columns: auto;
  grid-template-columns: minmax(0, 420px);
  overflow: visible;
}

/* La barra di scorrimento su WebKit, sottile e solo quando serve */
.striscia-news::-webkit-scrollbar { height: 8px; }
.striscia-news::-webkit-scrollbar-thumb {
  background: var(--hairline-2); border-radius: 99px;
}
.striscia-news::-webkit-scrollbar-track { background: transparent; }

/* --------------------------------- l'articolo --------------------------- */

.articolo { max-width: 760px; }
.articolo-testa { margin: 26px 0 36px; }
.articolo-titolo {
  font-size: clamp(2rem, 4.6vw, 3.1rem);
  letter-spacing: -.038em; line-height: 1.08;
  margin: 14px 0 0;
}
.articolo-occhiello { margin-top: 20px; max-width: 58ch; }
.articolo-firma { margin-top: 20px; font-size: .84rem; color: var(--dim); }

.articolo-corpo h2.sec { margin: 44px 0 18px; }
.articolo-corpo h3 { font-size: 1.2rem; font-weight: 500; letter-spacing: -.025em; margin: 32px 0 12px; }
.articolo-corpo ul { margin: 0 0 20px 20px; max-width: 62ch; }
.articolo-corpo li { color: var(--muted); font-size: 1.02rem; margin-bottom: 8px; letter-spacing: -.01em; }
.articolo-corpo blockquote {
  margin: 28px 0; padding-left: 22px;
  border-left: 2px solid var(--line);
  color: var(--text); font-size: 1.1rem; font-weight: 300;
  letter-spacing: -.018em; max-width: 58ch;
}

.foto-news.grande { margin: 0 0 36px; }

/* ANCHE NELL'ARTICOLO LA FOTOGRAFIA È ORIZZONTALE

   A larghezza piena una verticale diventava un muro di mille pixel prima
   della prima riga di testo (misurata: 760 × 1013), e una quadrata poco
   meno. Qui si ritaglia come nella griglia e nel carosello, alla stessa
   proporzione: qualunque fotografia arrivi, l'articolo comincia sempre
   allo stesso modo.

   Il punto di fuoco è lo stesso delle copertine: `foto-fuoco`
   nell'intestazione della notizia, scritto da figuraFoto() in main.js. */
.foto-news.grande img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 14px;
}
.foto-news figcaption {
  margin-top: 10px; font-size: .8rem; color: var(--dim);
}
.foto-news figcaption a { color: var(--dim); }

.altre-news { margin-top: 72px; padding-top: 40px; border-top: 1px solid var(--hairline); }
.altre-news .sec { margin-bottom: 24px; }

/* --------------------------------- Instagram ---------------------------- */

/* Il riquadro di Instagram arriva con misure sue e con lo sfondo bianco:
   non si può ridisegnare da fuori — è dentro un iframe di Meta — quindi
   ci si limita a centrarlo e a dargli un tetto di larghezza, perché a
   piena pagina sarebbe una lastra bianca alta il doppio del testo. */
/* Del riquadro di Instagram resta solo la fotografia.

   Il riquadro ufficiale è fatto di tre pezzi: una riga in alta con il nome
   di chi ha pubblicato (54 px), la fotografia, e in fondo i cuoricini, i
   «mi piace», il campo «aggiungi un commento» e il logo (154 px). Qui si
   tengono solo i pixel di mezzo.

   Come: `clip-path` ritaglia testa e piede, e i margini negativi della
   stessa misura richiudono lo spazio che il ritaglio lascerebbe vuoto. La
   figura è `display:grid` perché altrimenti il margine negativo di sopra
   si fonderebbe con quello della figura (margin collapsing) e invece di
   accorciarla la sposterebbe in su, lasciando il buco dov'era.

   Due cose misurate sui post veri, che vale la pena sapere prima di
   toccare i numeri:

   · il piede non è sempre alto uguale. Vale 154 px quando il post mostra
     il numero dei «mi piace» e 130 quando non lo mostra, e da fuori non
     c'è modo di sapere quale dei due sia: l'iframe è di un altro sito e
     comunica solo la propria altezza. Si taglia 154 sempre, quindi nel
     secondo caso se ne vanno anche gli ultimi 24 px della fotografia,
     il 3-4% dell'altezza. È il compromesso scelto: meglio perdere una
     striscia di immagine che lasciare in pagina un pezzo di barra.

   · le misure valgono per il riquadro di oggi. Se Instagram rifà il suo
     embed, i due numeri vanno rimisurati, e il sintomo sarà una striscia
     chiara sopra o sotto la foto.

   Detto chiaro: questo ritaglio toglie dalla pagina il nome di chi ha
   pubblicato la fotografia. L'attribuzione resta nel post incorporato, che
   è lì e si apre, ma non si vede più. Scelta consapevole, non una svista. */
.ig {
  display: grid;
  max-width: 540px;
  /* centrata nella colonna dell'articolo, che è larga 760: appoggiata a
     sinistra lasciava 220 px di vuoto da una parte sola, e si vedeva */
  margin: 0 auto 36px;
}

/* Il velo che blocca il carosello.

   Quando il post ha più fotografie, Instagram ci mette le frecce e i
   pallini per scorrerle, dentro al suo riquadro, dove non possiamo
   arrivare: è un altro sito dentro una finestrella, e il CSS nostro lì non
   entra. Questo velo trasparente si stende sopra e si prende i clic e i
   trascinamenti al posto suo, così la fotografia resta quella scelta e non
   cambia sotto le mani di chi legge. Il collegamento al post c'è, sotto, in
   chiaro: il velo toglie la manovra, non la via d'uscita. */
.ig::after {
  content: '';
  /* nella prima cella della griglia, cioè sopra la fotografia e basta: il
     credito sta nella riga sotto e resta cliccabile */
  grid-area: 1 / 1;
  z-index: 2;
}
.ig .instagram-media { margin: 0 auto !important; max-width: 540px !important; min-width: 0 !important; }
.ig figcaption {
  margin-top: 10px;
  font-size: .8rem;
  color: var(--dim);
}
.ig figcaption a { color: var(--dim); }

.ig iframe.instagram-media {
  /* il raggio va dentro al ritaglio: `overflow` sulla figura taglierebbe
     anche la riga del credito, che sta fuori dall'immagine */
  clip-path: inset(54px 0 154px 0 round 14px);
  margin: -54px auto -154px !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
.ig-ripiego { font-size: .94rem; }

/* La versione che non carica niente finché non si preme il pulsante.
   Si vede solo con INCORPORA_SUBITO a false in assets/js/notizie.js. */
.ig-chiusa .ig-avviso {
  background: var(--bg-2);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 28px 26px;
  max-width: 540px;
}
.ig-avviso p { color: var(--muted); font-size: .98rem; margin-bottom: 8px; }
.ig-avviso .ig-nota { color: var(--dim); font-size: .84rem; margin-bottom: 18px; }
.ig-avviso .chip { margin-right: 14px; }


/* ============================================================
   Gli schermi stretti
   ============================================================

   STANNO IN FONDO AL FILE, E NON È UN VEZZO DI ORDINE.

   Un `@media` non aggiunge specificità: `.car-lastra` dentro un media e
   `.car-lastra` fuori valgono uguale, e a parità vince quello scritto
   dopo. Finché i blocchi mobile stavano a metà foglio, ogni regola
   desktop scritta più sotto li cancellava in silenzio — e succedeva
   davvero: sei regole non facevano niente, fra cui quella che sul
   telefono manda il carosello della home a una colonna sola. Il risultato
   era la fotografia schiacciata in un quarto di schermo con il titolo a
   fianco, una parola per riga.

   Da qui in fondo non c'è più niente che possa scavalcarle. Le regole
   nuove per il telefono vanno aggiunte qui dentro, non sparse per il file.

   L'ordine è dal largo allo stretto, così i vincoli più stretti si
   sovrappongono a quelli più larghi e non il contrario.
   ============================================================ */

@media (max-width: 780px) {
  body { padding-top: 108px; }
  .glassbar {
    left: 14px; right: 14px;
    transform: none;
    padding: 7px;
    gap: 8px;
    justify-content: center;
  }
  /* LA BARRA SU SCHERMO STRETTO

     Prima le cinque voci stavano tutte in riga e il logotipo spariva. A
     375 px non ci stavano: «Statistiche» usciva dal bordo destro e la
     lente della ricerca finiva fuori schermo, cioè l'archivio diventava
     irraggiungibile dal telefono. Adesso in barra ci sono solo il
     logotipo e la lente, e le voci stanno in una tendina.

     Il logotipo torna a vedersi, ed è giusto così: su una pagina interna
     era l'unica cosa che diceva su che sito sei. */
  .glassbar { justify-content: space-between; padding: 7px 7px 7px 14px; }
  .gb-logo { display: flex; }
  .gb-nav { display: none; }
  /* `display: grid` e non `flex`: il centraggio della lente lo fa
     `place-items: center` nella regola di base, e `place-items` in un
     contenitore flex centra solo in verticale, perché `justify-items` lì
     non ha effetto. Scritto `flex` la lente stava 9,5 px a sinistra. */
  .gb-cerca { width: 34px; height: 34px; margin-left: 0; flex: 0 0 auto; }

  /* I bersagli del dito. Il logotipo è alto 19 px e il dito non lo
     sbaglia perché è largo 150, ma il collegamento vero deve coprire
     tutta l'altezza della barra: si allarga con il padding, senza
     toccare l'immagine. Stessa cosa per le voci del piede, che a 28 px
     stavano sotto la soglia. */
  .gb-logo .marca { padding: 8px 0; }
  .foot a { padding: 10px 0; }
  .foot-bottom a { padding: 8px 0; }

  /* IL PIEDE, IN COLONNA E AL CENTRO

     Su schermo largo il piede è una riga di colonne allineate a sinistra,
     e funziona perché le colonne stanno affiancate. Stretto, quelle
     colonne andavano a capo una sotto l'altra ma restavano allineate a
     sinistra e di larghezza diversa, con il bordo destro frastagliato:
     sembrava una pagina impaginata male più che una chiusura.

     Centrato torna a essere un blocco solo. Le voci diventano righe piene
     larghe quanto lo schermo, quindi il bersaglio del dito cresce senza
     che serva altro. */
  .foot { text-align: center; }
  .foot-in { flex-direction: column; align-items: center; gap: 34px; }
  .foot-in > div { width: 100%; }
  .foot-marca { max-width: none; }
  .foot-marca p { margin-inline: auto; max-width: 30ch; }
  .foot .marca { margin-inline: auto; }
  .foot h4 { margin-bottom: 4px; }

  /* Due colonne per gruppo, non una. Impilati uno sotto l'altro i
     diciannove collegamenti facevano un piede alto 1.220 px, una volta e
     mezzo lo schermo: si scorreva a lungo per uscire dalla pagina. A due
     colonne sono 846, e l'allineamento al centro resta perché
     l'intestazione del gruppo sta a cavallo delle due. */
  .foot-in > div:not(.foot-marca) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* il vuoto in mezzo: senza, «Direttori d'orchestra» e «Case
       discografiche» si sfiorano e sembrano una voce sola */
    column-gap: 14px;
  }
  .foot-in > div:not(.foot-marca) h4 { grid-column: 1 / -1; }
  .foot-bottom {
    flex-direction: column; align-items: center; gap: 12px;
    margin-top: 38px;
  }
  .foot-bottom .firma { max-width: 32ch; }

  /* IL PULSANTE DELLA TENDINA

     Le tre barre del marchio, non tre lineette qualunque: è lo stesso
     segno dell'icona del sito. Sta a destra insieme alla lente, così i
     due comandi stanno da una parte e il marchio dall'altra.

     Pieno e non trasparente: prima era una freccina grigia accanto al
     logotipo, e non si capiva che fosse un pulsante. */
  /* Tondo e della stessa misura della lente: due cerchi accostati si
     leggono come una coppia di comandi. Era 38 × 34, cioè un ovale, e
     insieme alle barre schiacciate della prima versione faceva sembrare
     tutto il segno più allungato del marchio vero. */
  .gb-tendina {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255,255,255,.10);
    color: var(--text);
    cursor: pointer;
    transition: background .18s, color .18s;
  }
  .gb-tendina svg { fill: currentColor; display: block; }
  .glassbar.aperta .gb-tendina { background: var(--accento-pieno); color: #061024; }

  .gb-comandi { display: flex; align-items: center; gap: 7px; }

  /* Il pannello largo quanto il contenuto delle pagine, non quanto lo
     schermo: sotto ci sono le schede, e due larghezze diverse a due
     centimetri di distanza si vedono. Il `wrap` delle pagine ha 26 px di
     margine per lato, la barra ne aveva 14. */
  .glassbar { left: 26px; right: 26px; }
  .gb-pannello {
    display: grid;
    position: absolute;
    top: calc(100% + 8px);
    left: 0; right: 0;
    padding: 10px;
    border-radius: 22px;
    /* Opaco, non vetro come la barra. La barra è una striscia sottile e
       sotto ci passa il contenuto; il pannello copre mezzo schermo, e
       basta pochissimo perché il logotipo della pagina si veda in
       trasparenza fra una voce e l'altra. */
    background: #0a1029;
    border: 1px solid var(--hairline-2);
    box-shadow: 0 18px 50px rgba(0,0,0,.6);
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    animation: scende-pannello .2s ease-out both;
  }
  .gb-pannello[hidden] { display: none; }
  @keyframes scende-pannello {
    from { opacity: 0; transform: translateY(-8px) }
    to   { opacity: 1; transform: none }
  }
  .gb-pannello a {
    display: block;
    padding: 11px 14px;
    border-radius: 12px;
    font-size: 15px;
    color: var(--muted);
    letter-spacing: -.01em;
  }
  .gb-pannello a.active { color: var(--text); background: var(--accento-velo); }
  .gb-pannello a:active { background: var(--glass); }

  /* IL CASSETTO DELL'ARCHIVIO

     Nove voci srotolate facevano un pannello lungo quanto lo schermo, in
     cui News, Edizioni, Storia e Statistiche annegavano in fondo. Dentro
     a un <details> il pannello torna a cinque righe, e chi cerca gli
     artisti preme «Archivio». Si usa <details> e non del JavaScript
     perché apre e chiude da solo, anche prima che gli script partano. */
  .gb-cassetto { margin: 2px 0; }
  .gb-cassetto summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 14px;
    border-radius: 12px;
    font-size: 15px;
    color: var(--muted);
    cursor: pointer;
    list-style: none;
  }
  .gb-cassetto summary::-webkit-details-marker { display: none; }
  .gb-cassetto summary .caret { opacity: .85; }
  .gb-cassetto[open] summary { color: var(--text); }
  .gb-cassetto[open] summary .caret { transform: rotate(180deg); }
  /* le voci dentro al cassetto rientrano: il rientro dice che stanno
     sotto a qualcosa, senza bisogno di una riga che le separi */
  .gb-cassetto a { padding-left: 30px; font-size: 14.5px; }
  .gb-cassetto > a:last-child { margin-bottom: 6px; }

  /* I profili in fondo alla tendina: una riga sola, staccata dalle voci
     del sito da un filo, perché portano fuori. Più piccoli e più spenti
     delle voci vere: sono un di più, non la navigazione. */
  .gb-social {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 14px;
    margin-top: 8px;
    padding: 14px 14px 6px;
    border-top: 1px solid var(--hairline);
  }
  .gb-social span {
    width: 100%;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .11em;
    color: var(--dim);
    margin-bottom: 2px;
  }
  .gb-social a { padding: 6px 0; font-size: 13.5px; color: var(--muted); }
  .ric-overlay { padding: 0; }
  .ric-box { max-width: none; max-height: 100vh; height: 100%; border-radius: 0; border: none; }
  .ric-sotto { display: none; }
  .numeri { grid-template-columns: repeat(2, 1fr); }
  .conto { flex-direction: column; align-items: flex-start; gap: 14px; padding: 24px 22px; }
  .car-lastra { grid-template-columns: minmax(0, 1fr); height: auto; }
  .car-foto { border-right: none; border-bottom: 1px solid var(--hairline); aspect-ratio: 16/9; }
  .car-corpo { padding: 26px 22px; }
  .conto-quadranti { gap: 18px; }
  .conto-q { min-width: 52px; }
  .numero { padding: 20px 16px; }
  .grad li { grid-template-columns: 24px 1fr; }
  .grad .pos { padding-right: 8px; }
  .grad .voce { padding: 12px 12px; gap: 10px; }

  .row.news .row-main { grid-template-columns: 1fr auto; }
  .row.news .meta { grid-column: 1 / -1; margin-bottom: -12px; }
  .row.ed .row-main { grid-template-columns: 68px 1fr auto; }
  .row.ed .hosts { display: none; }
  /* l'intestazione segue le righe: sul telefono la conduzione non c'è */
  .count.colonne { grid-template-columns: 68px 1fr auto; gap: 14px; }
  .count.colonne .col-conduzione { display: none; }
  .row.ed .year { font-size: 1.28rem; }

  /* LA RIGA DELL'INDICE SU DUE PIANI

     Su schermo largo una riga dell'archivio sta tutta in fila: titolo,
     «2021 · 18° · Serata duetti», freccetta. Su un telefono no: quella
     riga di dati è `nowrap`, e accanto a un titolo lungo faceva scorrere
     di lato tutta la pagina.

     Quindi il titolo prende tutta la larghezza, e sotto restano i dati a
     sinistra e la freccetta a destra. Due piani invece di uno, e niente
     scorrimento orizzontale. */
  .row.entity .row-main { grid-template-columns: minmax(0, 1fr) auto; gap: 12px 14px; }
  .row.entity .row-main > :first-child { grid-column: 1 / -1; }
  .row.entity .n-part { grid-column: 1; white-space: normal; align-self: center; }
  .row.entity .chev { grid-column: 2; justify-self: end; align-self: center; }

  .chapter { grid-template-columns: 1fr; gap: 8px; padding: 32px 0; }

  .grid-2 { grid-template-columns: 1fr; gap: 28px; }
  .rk { grid-template-columns: 34px 1fr; gap: 12px; }
  .rk-lato { grid-column: 2; justify-items: start; margin-top: 6px; }
  .rk .aside { text-align: left; }
  .part { grid-template-columns: 52px 1fr; }
  .testata-serata { padding: 18px 20px; }
  .ascolto { grid-template-columns: 1fr auto; gap: 8px 14px; }
  .ascolto .a-bar { grid-column: 1 / -1; order: 3; }
  .part .pl { grid-column: 2; text-align: left; }
  .gb-drop { left: auto; right: 0; transform: translateY(-6px); }
  .gb-item:hover .gb-drop,
  .gb-item:focus-within .gb-drop,
  .gb-item.open .gb-drop { transform: translateY(0); }
  .figures { gap: 34px; }
  .band { padding: 66px 0; }
  .hero { padding: 20px 0 70px; }
  .toolbar { top: 84px; border-radius: 22px; }
  .glass-panel { padding: 26px 22px; border-radius: 18px; }
  .fact { grid-template-columns: 1fr; gap: 3px; }
}

@media (max-width: 720px) {
  .striscia-news { --fuga: 18px; }
  .striscia-news { grid-auto-columns: minmax(256px, 82%); }
}

@media (max-width: 640px) {
  .ritratto { width: 128px; height: 128px; }
  .mini { width: 38px; height: 38px; }
}