/* =====================================================================
   deftones.it — foglio di stile unico.

   Impianto allineato a deftones.com: nero e bianco puri, un serif da
   display ad altissimo contrasto per i titoli, un grottesco neutro per
   il testo, filetti da un pixel, bottoni solo contornati, molta aria.

   I font sono ospitati qui: nessuna richiesta a Google, quindi nessun
   dato dei visitatori esce dal sito e la pagina non aspetta terzi.
   ===================================================================== */

@font-face {
  font-family: "Instrument Serif";
  src: url(fonts/instrumentserif-latin-normal.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF;
}

@font-face {
  font-family: "Inter";
  src: url(fonts/inter-latin-normal.woff2) format("woff2");
  font-weight: 100 900;                 /* un solo file: è variabile */
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF;
}

:root {
  --fondo:       #000;
  --fondo-alto:  #0c0c0c;
  --bordo:       rgba(255,255,255,.15);
  --bordo-forte: rgba(255,255,255,.35);
  --testo:       #fff;
  --testo-tenue: rgba(255,255,255,.52);

  /* Il verde di deftones.com. Stimato dagli screenshot del sito
     ufficiale, non campionato: quel dominio risponde 403 a chi non è un
     browser. Se hai il valore esatto, cambialo qui e basta — è l'unico
     punto in cui è scritto. */
  --accento:      #3ea84b;
  --accento-scuro:#2d7d38;

  /* Colore funzionale, non decorativo: segnala che una notizia non è
     confermata. Resta distinto dal verde proprio per questo. */
  --avviso:      #d8b44a;

  --display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --testo-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                Roboto, Helvetica, Arial, sans-serif;
  --larghezza: 62rem;
}

*, *::before, *::after { box-sizing: border-box; }

::selection { background: var(--accento); color: #000; }
/* Le dimensioni del sito sono tutte in rem: cambiando la radice il
   testo cala di 1px su mobile e le spaziature lo seguono in proporzione,
   invece di restare tarate su un corpo che non c'è più.
   Il logo è in px, quindi non viene toccato. */
html {
  font-size: 15px;
  -webkit-text-size-adjust: 100%;
}
@media (min-width: 40rem) { html { font-size: 16px; } }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--testo);
  font-family: var(--testo-font);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: .005em;
  -webkit-font-smoothing: antialiased;
}

/* Lo sfondo: tre copie dello stesso pattern a scale e opacità diverse.
   Lo scorrimento le muove a velocità crescenti, così le lettere che
   compongono la parola si separano invece di restare un blocco fermo.
   La maschera a gradiente le spegne scendendo, dove si legge.

   Le tre opacità sommano all'incirca al .3 che era impostato prima su
   un unico livello: l'intensità complessiva resta quella. */
.sfondo {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  /* Molte tappe ravvicinate invece di poche: una sfumatura con tre soli
     punti mostra le fasce, con sette scende senza che si veda il salto.
     E arriva fino in fondo, non si spegne all'92%. */
  -webkit-mask-image: linear-gradient(to bottom,
      rgba(0,0,0,1) 0%, rgba(0,0,0,.97) 16%, rgba(0,0,0,.86) 32%,
      rgba(0,0,0,.66) 50%, rgba(0,0,0,.42) 68%, rgba(0,0,0,.2) 85%,
      rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to bottom,
      rgba(0,0,0,1) 0%, rgba(0,0,0,.97) 16%, rgba(0,0,0,.86) 32%,
      rgba(0,0,0,.66) 50%, rgba(0,0,0,.42) 68%, rgba(0,0,0,.2) 85%,
      rgba(0,0,0,0) 100%);
}

/* L'altezza la calcola il JS: dev'essere finestra + una piastrella, e
   la piastrella dipende dalla larghezza. Il 200% qui è solo il valore
   di ripiego per chi ha i movimenti ridotti e non esegue lo script. */
.strato {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 200%;
  /* Ripetuto in ENTRAMBE le direzioni, non solo in verticale.
     Il generatore ridisegna ogni lettera che sborda anche sul lato
     opposto della piastrella: è così che il disegno resta continuo
     quando si affianca a sé stesso. Ma con repeat-y le piastrelle si
     impilavano soltanto verso il basso, e il bordo laterale restava un
     taglio esposto — da cui le lettere tagliate. */
  background-repeat: repeat;
  background-position: center 0;
  will-change: transform;
}

/* Quattro piani di profondità, non quattro copie dello stesso disegno:
   ogni file contiene lettere di una sola dimensione, generate da
   strumenti/genera-sfondo.py. Le opacità crescono con la vicinanza,
   come cresce il contrasto delle cose vicine. */
.s1 { background-image: url(sfondo-1-m.svg); opacity: .13; }
.s2 { background-image: url(sfondo-2-m.svg); opacity: .17; }
.s3 { background-image: url(sfondo-3-m.svg); opacity: .21; }
.s4 { background-image: url(sfondo-4-m.svg); opacity: .25; }

/* Due serie di file con lo stesso disegno ma tratto diverso: su mobile
   la piastrella è grande il 300% della larghezza contro il 90% del
   desktop, e con un unico spessore il contorno risulterebbe più pesante
   proprio sullo schermo più piccolo. Scegliendo qui, ogni dispositivo
   scarica solo la serie che gli serve. */
@media (min-width: 640px) {
  .s1 { background-image: url(sfondo-1.svg); }
  .s2 { background-image: url(sfondo-2.svg); }
  .s3 { background-image: url(sfondo-3.svg); }
  .s4 { background-image: url(sfondo-4.svg); }
}

/* Un secondo strato, sopra il pattern e sotto il testo: una luce fredda
   molto tenue in alto a sinistra che stacca la testata dal fondo. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(90% 60% at 78% -12%, rgba(62,168,75,.10) 0%, transparent 62%),
    radial-gradient(120% 80% at 15% -10%, rgba(255,255,255,.06) 0%, transparent 60%),
    linear-gradient(to bottom, transparent 60%, #000 100%);
}

a { color: inherit; }

/* Il ritaglio va sul body, non su main, e la differenza è tutta qui:
   l'apertura esce dal contenitore apposta, per arrivare ai bordi dello
   schermo. Ritagliando su main la si ritaglia proprio dove doveva
   uscire, e resta larga quanto il contenitore.
   Sul body invece non taglia niente di voluto: serve solo a togliere i
   quindici pixel che l'apertura sfora quando c'è la barra di
   scorrimento, perché 50vw la comprende e il contenitore no.
   "clip" e non "hidden" perché hidden romperebbe gli elementi sticky. */
body { overflow-x: clip; }

.contenitore {
  width: 100%;
  max-width: var(--larghezza);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ---------------------------------------------------------- testata */

/* Su mobile la testata scorre via: logo e sottotitolo si vedono
   all'arrivo e poi lasciano spazio. È la barra del menu, qui sotto, a
   restare fissa. Da 40rem in su la testata torna una riga sola e resta
   lei in cima. */
.testata {
  /* Ferma in cima ovunque, telefono compreso. Lo fa position: sticky, non
     un pezzo di JavaScript che legge lo scorrimento: sul telefono la
     pagina scorre in un thread suo e il codice arriva sempre un
     fotogramma dopo, quindi la testata inseguirebbe invece di stare
     ferma — si vede vibrare. Sticky lo gestisce il compositore, e non
     trema. */
  position: sticky;
  top: 0;
  z-index: 10;
  /* Fondo appena velato invece che pieno: quello che scorre sotto si
     intuisce, sfocato. Il saturate serve perché lo sfocato da solo
     slava i colori, e il verde dell'accento sotto ne uscirebbe grigio. */
  background: rgba(0,0,0,.62);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--bordo);
}

/* La barra del menu è fuori dalla testata, non dentro: un elemento
   sticky si sblocca quando il suo contenitore esce dalla vista.
   Si aggancia sotto la testata, che adesso resta anche lei: l'altezza la
   misura lo script una volta al caricamento, perché dipende da logo,
   payoff e spaziature e scriverla a mano invecchierebbe male. */
.menu-barra {
  position: sticky;
  top: var(--alta-testata, 0px);
  z-index: 10;
  background: rgba(0,0,0,.62);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--bordo);
  padding: .7rem 0;
}
.menu-barra .menu { justify-content: center; }

/* Senza sfocato la sola trasparenza lascerebbe leggere il testo
   dell'articolo attraverso la testata. Lì si torna a un fondo pieno. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .testata, .menu-barra { background: rgba(0,0,0,.95); }
}

@media (min-width: 40rem) {
  .menu-barra { display: none; }        /* su desktop il menu sta nella testata */
}
/* Da telefono la testata si incolonna e si centra: logo, sottotitolo,
   menu. Da 40rem in su torna in riga, allineata ai bordi. */
.testata-int {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .85rem;
  padding: 1.25rem 0 1.75rem;        /* il payoff non deve toccare il menu */
}

@media (min-width: 40rem) {
  .testata-int {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    gap: 1.5rem;
    min-height: 5rem;
    padding: 0;
  }
}

/* La testata esce dalla colonna del testo e va da bordo a bordo: il logo
   si appoggia al margine della finestra, il menu all'altro. */
.testata .contenitore {
  max-width: none;
  padding: 0.75rem 1.75rem;
}
@media (min-width: 64rem) { .testata .contenitore { padding: 0 2.5rem; } }

.marchio-blocco {
  display: flex;
  flex-direction: column;
  align-items: center;          /* centrato su mobile */
  gap: .5rem;
}
@media (min-width: 40rem) {
  .marchio-blocco { align-items: flex-start; gap: .45rem; }
}

.marchio { display: block; line-height: 0; color: var(--testo); transition: opacity .2s; }

/* Il sottotitolo sta sotto il logo e ne condivide il bordo sinistro: il
   logo parte da x=0 nel suo viewBox, quindi si allineano da soli.
   Corpo molto piccolo e lettere spaziate — deve dire chi sei senza
   competere con il marchio. */
.sottotitolo {
  margin: 0;
  font-size: .5625rem;
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--testo-tenue);
  white-space: nowrap;
}
.sottotitolo span { color: var(--accento); }

@media (min-width: 40rem) {
  .sottotitolo { font-size: .625rem; letter-spacing: .2em; }
}
.marchio:hover { color: var(--accento); }

/* Logo SVG inline monocromatico: eredita il colore del link, quindi non
   serve una seconda immagine per la versione chiara. */
.logo { display: block; height: 30px; width: auto; max-width: 78vw; }

.menu { display: flex; gap: 1.5rem; flex-wrap: wrap; justify-content: center; }
.menu-riga { display: none; }           /* su mobile il menu è la barra sotto */
@media (min-width: 40rem) { .menu-riga { display: flex; } }
.menu a {
  color: var(--testo-tenue);
  text-decoration: none;
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .12em;             /* il maiuscolo senza spazio si legge male */
  transition: color .2s;
}
.menu a:hover { color: var(--accento); }

/* Con cinque voci, sul telefono la barra andava a capo e occupava due
   righe fisse in cima allo schermo. Meno spazio fra le lettere e un
   corpo appena più piccolo la rimettono su una riga sola. */
@media (max-width: 26rem) {
  .menu { gap: .9rem; }
  .menu a { font-size: .75rem; letter-spacing: .07em; }
}

/* ------------------------------------------------------------- meta */

.meta {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: .75rem;
  font-size: .75rem;
  color: var(--testo-tenue);
  text-transform: lowercase;
}

.etichetta {
  display: inline-block;
  padding: .2rem .6rem;
  border: 1px solid var(--bordo);
  font-size: .6875rem;
  letter-spacing: .04em;
  text-transform: lowercase;
  color: var(--testo-tenue);
}
/* Le due categorie che un fan cerca davvero: tour e uscite. Il verde
   qui ha una funzione — farle saltare all'occhio in un elenco. */
.et-tour, .et-uscita { border-color: rgba(62,168,75,.55); color: var(--accento); }
.et-dubbio { border-color: rgba(216,180,74,.5); color: var(--avviso); }

/* --------------------------------------------------------- apertura */

.apertura { padding: 4rem 0 3rem; border-bottom: 1px solid var(--bordo); }

/* --------------------------------------------- carosello agganciato */
/* Il carosello resta appiccicato in cima mentre scorri, e le tre notizie
   avanzano seguendo la corsa percorsa. Poi si sgancia e la pagina
   riprende normalmente. Vale ovunque, telefono compreso.

   Non è intercettazione dello scorrimento: il dito e la rotella
   continuano sempre a muovere la pagina, e quello che cambia è solo cosa
   si vede muovere. Se il sistema chiede di ridurre il movimento non si
   attiva affatto, e il carosello torna ad avanzare a tempo — senza che
   nessuna riga di JavaScript debba saperlo, perché quello legge
   l'altezza dell'involucro e qui non gliene diamo una. */
@media (prefers-reduced-motion: no-preference) {
  /* La corsa totale: divisa per tre notizie fa poco meno di mezza
     schermata ciascuna. È il numero da girare se il cambio sembra troppo
     pronto o troppo pigro. */
  .carosello-aggancio { height: calc(var(--h-apertura) + 140vh); }
  /* Si aggancia a zero: la testata e la barra del menu le stanno sopra,
     velate e sfocate, con la foto che ci passa sotto. */
  .carosello-aggancio > .carosello { position: sticky; top: 0; }
}

/* ----------------------------------------------------- il carosello */
/* Le prime tre notizie in apertura. Le diapositive sono sovrapposte e si
   muovono in verticale: quella che esce sale, quella che entra arriva da
   sotto.
   Non è un contenitore che scorre, ed è una scelta. Un contenitore con
   overflow verticale si sarebbe preso la rotella del mouse e il dito sul
   telefono, cioè avrebbe intercettato lo scorrimento della pagina senza
   che nessuno lo avesse chiesto. Qui la rotella resta della pagina.
   Nessun margine in alto: comincia dove finisce la testata, e il -1px
   chiude il filo di fondo che resterebbe fra i due. */
/* L'altezza sta sull'involucro e non sul carosello: le variabili CSS
   scendono ai discendenti, non salgono al genitore, e l'involucro deve
   poterci calcolare sopra la propria corsa. */
/* L'apertura occupa lo schermo, meno quello che le sta sopra: sul
   telefono la barra del menu, da 40rem in su la testata. Così alla prima
   occhiata ci sta tutta, credito compreso, e quando il carosello si
   aggancia in cima lascia intravedere un filo di quello che viene dopo —
   che è l'invito a scorrere.

   svh e non vh: sul telefono vh comprende lo spazio della barra degli
   indirizzi anche quando è visibile, e l'apertura sborderebbe di
   settanta pixel. La riga con vh resta per i browser che non conoscono
   svh: la seconda sovrascrive la prima dove è capita. */
.carosello-aggancio {
  /* Quanto occupa quello che sta sopra l'apertura: la barra del menu sul
     telefono, la testata da 40rem in su. Una misura sola, usata sia per
     l'altezza sia per il punto in cui il carosello si aggancia — se
     fossero due numeri, il giorno che la testata cambia altezza uno dei
     due resterebbe indietro e comparirebbe una fessura. */
  --h-testata: 3.5rem;
  /* La fila degli indicatori: fino a 48rem sta nel flusso sotto la
     pista, quindi occupa spazio e va scalata — o mentre il carosello è
     agganciato finirebbe appena sotto il bordo dello schermo, invisibile
     proprio quando serve. Da 48rem in su è appoggiata sul fianco e non
     occupa niente. */
  --h-guida: 3rem;
  --h-apertura: calc(100vh - var(--h-guida));
  --h-apertura: calc(100svh - var(--h-guida));
  min-height: 24rem;
}
@media (min-width: 48rem) { .carosello-aggancio { --h-guida: 0rem; } }
/* Da 40rem in su l'apertura passa DIETRO la testata.
   La testata è sticky, quindi occupa il suo posto nel flusso e spinge
   giù tutto quello che segue: per farcela passare sotto bisogna tirare
   su l'apertura esattamente di quanto la testata è alta. Da lì l'apertura
   è alta quanto tutto lo schermo, non più lo schermo meno la testata, e
   si aggancia a zero.
   Il logo e il menu restano leggibili perché la testata è velata e
   sfocata: la foto ci passa sotto sfumata, che è l'effetto voluto.
   Sotto i 40rem non si fa: lì la testata non è una riga sola ma logo,
   payoff e barra del menu, e l'apertura finirebbe dietro tutto. */
@media (min-width: 40rem) {
  .carosello-aggancio {
    --h-testata: 5rem;
    --h-apertura: calc(100vh - var(--h-guida));
    --h-apertura: calc(100svh - var(--h-guida));
    margin-top: calc(-1 * var(--h-testata));
  }
}

.carosello { position: relative; margin: -1px calc(50% - 50vw) 1.5rem; }

.carosello-piste {
  position: relative;
  height: var(--h-apertura);
  min-height: 24rem;
  overflow: hidden;
  /* Il dito verticale resta alla pagina; quello orizzontale lo leggiamo
     noi. Senza questa riga, su iOS uno scorrimento laterale può far
     scattare il "torna indietro" del browser. pinch-zoom resta, che
     toglierlo è un dispetto a chi ha bisogno di ingrandire. */
  touch-action: pan-y pinch-zoom;
}
/* Il selettore è più specifico del necessario, e serve: .apertura.hero
   dichiara position: relative, pesa uguale a .carosello .apertura ed è
   scritta più in basso — vinceva lei, le diapositive restavano nel flusso
   e la pista si riempiva di vuoto con la foto schiacciata in fondo. */
.carosello .carosello-piste > .apertura { position: absolute; inset: 0; }

/* Una diapositiva senza fotografia non passa dalle regole del banner: le
   serve comunque il testo appoggiato in basso, o resterebbe in cima a
   un riquadro vuoto. */
.carosello .apertura:not(.hero) {
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0; border-bottom: 0;
}

/* Senza JavaScript le diapositive resterebbero tutte una sopra l'altra e
   si vedrebbe l'ultima: così invece si vede la prima, che è la notizia
   più recente. Lo script prende il comando da qui. */
.carosello .carosello-piste > .apertura { opacity: 0; transform: translateY(100%); }
.carosello .carosello-piste > .apertura:first-child { opacity: 1; transform: none; }

/* I comandi in colonna sul fianco destro, allineati al bordo della
   colonna di testo. Verticali perché verticale è il movimento: frecce su
   e giù, e le stanghette dell'indicatore in piedi.
   Il calc allinea la fila al bordo destro del contenitore: .carosello è
   largo quanto lo schermo, quindi il suo 50% è mezzo schermo, e da lì si
   torna indietro di metà contenitore più il suo margine. */
.carosello-guida {
  position: absolute; z-index: 3;
  top: 50%; transform: translateY(-50%);
  right: max(1.25rem, calc(50% - var(--larghezza) / 2 + 1.5rem));
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
}
.carosello-punti { display: flex; flex-direction: column; gap: .3rem; }
.carosello-punto { border: 0; background: none; cursor: pointer; }
.carosello-punto { padding: .25rem .6rem; }
.carosello-punto span {
  display: block; width: 2px; height: 2rem;
  background: rgba(255,255,255,.28);
  transition: background .25s, height .25s, width .25s;
}
.carosello-punto.attivo span { height: 2.6rem; }

/* Sul telefono le frecce non ci sono e la colonna sul fianco stringerebbe
   il titolo, che lì è la pagina: gli indicatori scendono sotto il banner,
   in riga, e le stanghette tornano coricate. */
@media (max-width: 47.99rem) {
  .carosello-guida {
    position: static; transform: none;
    flex-direction: row; justify-content: center;
    margin: .75rem auto 0; padding: 0 1.5rem;
  }
  .carosello-punti { flex-direction: row; }
  .carosello-punto { padding: .6rem .25rem; }
  .carosello-punto span { width: 2.2rem; height: 2px; }
  .carosello-punto.attivo span { width: 2.8rem; height: 2px; }
}
.carosello-punto:hover span { background: rgba(255,255,255,.45); }
.carosello-punto.attivo span { background: var(--accento); }

/* Le frecce servono a chi ha il mouse: col dito bastano gli indicatori. */
.carosello-freccia { display: none; }
@media (min-width: 48rem) {
  .carosello-freccia {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem;
    border: 1px solid var(--bordo); border-radius: 2px;
    background: none; color: var(--testo-tenue); cursor: pointer;
    transition: color .15s, border-color .15s;
  }
  .carosello-freccia:hover { color: var(--accento); border-color: var(--accento-scuro); }
}

/* ------------------------------------------------------- il banner */
/* Il primo articolo della home, quando ha una foto: l'immagine esce dal
   contenitore e va da bordo a bordo, il testo resta nella colonna.
   Il calc(50% - 50vw) è il modo di uscire da un contenitore centrato
   senza toccare il markup: 50% è metà del contenitore, 50vw metà dello
   schermo, e la differenza è esattamente il margine da recuperare. */
.apertura.hero {
  position: relative;
  isolation: isolate;          /* i piani negativi restano dentro al banner */
  overflow: hidden;
  margin: 0;   /* a uscire dal contenitore ci pensa .carosello */
  padding: 0;
  border-bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* L'altezza la detta la pista, che le contiene tutte: se stesse anche
     qui le due misure potrebbero divergere, e la pagina salterebbe
     cambiando notizia. */
}

/* La foto non finisce sul nero: si dissolve.
   Prima il fondo del banner sfumava verso il nero pieno, e quel nero
   COPRIVA le lettere dello sfondo — si vedeva una fascia scura netta con
   il pattern tagliato di sotto. Adesso a sfumare è l'immagine stessa,
   con una maschera: dove l'immagine si dirada, le lettere che si muovono
   ricompaiono attraverso. Nessuno stacco, perché non c'è più niente che
   copra.
   Molte tappe ravvicinate invece di poche: una sfumatura con tre punti
   mostra le fasce, con sette scende senza che si veda il salto. */
.apertura.hero {
  --sfuma-banner: linear-gradient(to bottom,
      rgba(0,0,0,1) 0%,  rgba(0,0,0,.98) 30%, rgba(0,0,0,.88) 46%,
      rgba(0,0,0,.66) 62%, rgba(0,0,0,.38) 78%, rgba(0,0,0,.14) 90%,
      rgba(0,0,0,0) 100%);
}
.hero-foto, .hero-velo {
  position: absolute; inset: 0; z-index: -1;
  -webkit-mask-image: var(--sfuma-banner);
  mask-image: var(--sfuma-banner);
}
.hero-foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }

/* In basso la velatura arriva al nero pieno, non a un grigio: così la
   foto sfuma nella pagina invece di finire con un taglio netto. E si
   ferma a metà altezza — più su laverebbe l'immagine. */
/* La velatura non arriva più al nero pieno: quel compito ora ce l'ha la
   maschera. Le resta il suo mestiere vero, tenere leggibile il testo
   sopra la parte di foto ancora visibile. */
.hero-velo {
  background:
    linear-gradient(to top,
      rgba(0,0,0,.84) 0%, rgba(0,0,0,.62) 26%, rgba(0,0,0,.3) 50%,
      rgba(0,0,0,.08) 72%, rgba(0,0,0,0) 88%),
    linear-gradient(to bottom, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 24%);
}

/* Il testo torna nella colonna del resto della pagina. Volutamente NON
   posizionato, né lui né hero-testo: così il ::after del titolo si stende
   sul banner intero e non sul solo blocco di testo. Sta sopra la foto
   perché quella sta a z-index negativo. */
.hero-interno {
  width: 100%;
  max-width: var(--larghezza);
  margin: 0 auto;
  /* Il fondo tiene il testo staccato dal bordo: appoggiato alla base
     dello schermo sembra caduto lì, non messo. */
  padding: 0 1.5rem 3.75rem;
}
/* Fra i 48 e i 62rem i comandi stanno sul fianco destro ma il
   contenitore non ha ancora margine da avanzare: lì, e solo lì, il testo
   si tira indietro per non finirci sotto. Più stretto scendono sotto il
   banner, più largo c'è spazio di suo. */
@media (min-width: 48rem) and (max-width: 62rem) {
  .hero-interno { padding-right: 3rem; }
}
.hero-testo { max-width: 44rem; }
.hero-testo .meta { margin-bottom: .55rem; }
/* Nel banner il titolo resta lo stesso serif, solo un po' più raccolto:
   sopra una fotografia una misura da manifesto diventa illeggibile. */
/* Sul telefono il titolo del banner è la pagina: 12vw sono quarantasette
   pixel su un iPhone, contro i trenta di prima. Da 40rem in su torna a
   una misura da colonna, perché lì accanto al titolo c'è dell'altro. */
.apertura.hero h1 { margin: 0 0 .7rem; font-size: clamp(2.75rem, 12vw, 3.4rem); }
@media (min-width: 40rem) {
  .apertura.hero h1 { font-size: clamp(2.4rem, 4.6vw, 3.2rem); }
}
/* Il titolo è un collegamento normale: prima un ::after steso copriva
   tutta la diapositiva, e su un carosello che avanza scorrendo era un
   bersaglio grande quanto lo schermo pronto a raccogliere clic che
   nessuno voleva dare. Adesso ci si va dal titolo o dal pulsante. */
.hero-cta {
  display: inline-flex; align-items: center; gap: .55em;
  margin: 0 0 1.5rem;          /* o tocca la riga della fonte, sotto */
  padding: .7rem 1.35rem;
  border: 1px solid var(--bordo-forte);
  border-radius: 2px;
  background: rgba(0,0,0,.35);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--testo);
  text-decoration: none;
  font-size: .875rem;
  letter-spacing: .03em;
  transition: color .18s, border-color .18s, background .18s;
}
.hero-cta:hover, .hero-cta:focus-visible {
  color: var(--accento);
  border-color: var(--accento);
  background: rgba(0,0,0,.55);
}
/* La freccia si sposta di tre pixel: dice che si va da qualche parte. */
.hero-cta svg { flex: none; transition: transform .18s; }
.hero-cta:hover svg { transform: translateX(3px); }
.hero .sommario { margin: 0 0 1.25rem; color: rgba(255,255,255,.84); }

/* Con un titolo da quarantasette pixel il sommario non ci sta per
   intero: tre righe e poi si taglia, invece di far traboccare il banner. */
@media (max-width: 39.99rem) {
  .hero .sommario {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* Sopra il collegamento steso, o non ci si potrebbe cliccare. */
/* Il distacco dal fondo lo dà .hero-interno, una volta sola: qui
   servirebbe solo a sommarsi. */
.hero .piede { position: relative; }
.piede-destra { display: flex; align-items: center; gap: 1rem; }
.hero .credito { margin: 0; text-align: right; }
.hero .credito a { border-bottom-color: rgba(255,255,255,.28); }

/* Il serif da display vuole corpi grandi: sotto una certa dimensione il
   contrasto fra pieni e filetti sparisce e sembra solo un serif qualsiasi. */
.apertura h1 {
  margin: 0 0 1.25rem;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.4rem, 7vw, 4rem);
  line-height: 1.05;
  letter-spacing: -.01em;
}
.apertura h1 a { text-decoration: none; transition: opacity .2s; }
.apertura h1 a:hover { color: var(--accento); }

.sommario { margin: 0 0 1rem; color: rgba(255,255,255,.75); font-size: 1rem; }
.fonte {
  margin: 0;
  font-size: .75rem;
  color: var(--testo-tenue);
  text-transform: lowercase;
  letter-spacing: .02em;
}

/* ------------------------------------------------------------ video */

.video {
  position: relative;
  aspect-ratio: 16 / 9;
  margin: 2rem 0;
  background: #08080a;
  border: 1px solid var(--bordo);
  overflow: hidden;
}
.video iframe { display: block; width: 100%; height: 100%; border: 0; }

.video-avvia {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .9rem;
  background: radial-gradient(60% 60% at 50% 45%, rgba(62,168,75,.07), transparent 70%);
  border: 0;
  color: var(--testo-tenue);
  font: inherit;
  cursor: pointer;
  transition: color .2s;
}
.video-avvia:hover { color: var(--testo); }

.video-play {
  display: flex; align-items: center; justify-content: center;
  width: 4rem; height: 4rem;
  border: 1px solid var(--bordo);
  border-radius: 50%;
  padding-left: .2rem;              /* il triangolo pesa a sinistra */
  transition: border-color .2s, color .2s, transform .2s;
}
.video-avvia:hover .video-play {
  color: var(--accento);
  border-color: var(--accento-scuro);
  transform: scale(1.06);
}
.video-nota { font-size: .875rem; text-align: center; line-height: 1.5; }
.video-nota em {
  display: block;
  font-style: normal;
  font-size: .75rem;
  opacity: .62;
}
.video-altrove { margin: 2rem 0; font-size: .875rem; }

/* ------------------------------------------------- pagine di testo */

.pagina-testo h1 { margin-bottom: 2rem; }
.pagina-testo .occhiello { max-width: none; margin-bottom: 2.5rem; font-size: 1.0625rem; }
.pagina-testo h3 { margin-top: 2.5rem; }
.aggiornata { margin-top: 3rem; font-size: .8125rem; color: var(--testo-tenue); }

/* ------------------------------------------------------------- hot */
/* Il bollo delle notizie che contano. Ambra e non verde: il verde è già
   l'accento di tutto il sito e non spiccherebbe, mentre il rosso su
   fondo nero grida troppo per un sito che non urla. */
.hot {
  display: inline-flex;
  align-items: center;
  gap: .25em;
  padding: .1rem .4rem .1rem .3rem;
  border: 1px solid rgba(216,180,74,.4);
  border-radius: 2px;
  color: var(--avviso);
  font-size: .625rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .1em;
  line-height: 1.4;
}
.hot svg { flex: none; margin-top: -1px; }

/* Nel banner tutto è un po' più grande, anche questo. */
.hero .hot { font-size: .6875rem; }

/* --------------------------------------------------------- filtri */

/* .filtri-archivio e non .filtri: il pannello di amministrazione aveva
   già una classe .filtri, e le due si sovrapponevano in un modo
   particolarmente sgradevole. La regola del pannello sta più in basso e
   vinceva su display, gap e align-items — ma non dichiarava
   flex-direction, quindi il column di questa regola sopravviveva e il
   modulo dei filtri si incolonnava. Due componenti diversi non devono
   condividere un nome di classe, e non basta che le regole "sembrino"
   compatibili. */
.filtri-archivio { margin: 0 0 2rem; display: flex; flex-direction: column; gap: .6rem; }
.filtro-riga {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem .55rem;
}
.filtro-nome {
  flex: none; width: 5rem;
  font-size: .6875rem; color: var(--testo-tenue);
  text-transform: uppercase; letter-spacing: .12em;
}
.filtro-voce {
  display: inline-flex; align-items: baseline; gap: .35em;
  padding: .25rem .6rem;
  border: 1px solid var(--bordo);
  border-radius: 2px;
  font-size: .8125rem;
  color: var(--testo-tenue);
  text-decoration: none;
  transition: color .15s, border-color .15s;
}
.filtro-voce:hover { color: var(--testo); border-color: rgba(255,255,255,.3); }
.filtro-voce.attivo {
  color: var(--accento);
  border-color: var(--accento-scuro);
  background: rgba(62,168,75,.07);
}
/* Il conteggio non deve avere lo stesso peso della voce: è un
   contorno, e se compete col nome della categoria si fa fatica a
   leggere la riga di colpo. */
.filtro-n { font-size: .6875rem; opacity: .55; font-variant-numeric: tabular-nums; }

@media (max-width: 34rem) {
  .filtro-riga { gap: .35rem .4rem; }
  .filtro-nome { width: 100%; }
}

.conteggio { margin: 0 0 1.5rem; font-size: .875rem; }

.altro { display: flex; justify-content: center; margin: 2.5rem 0 1rem; }
.bottone-altro {
  padding: .8rem 2rem;
  line-height: 1.25;
  border: 1px solid var(--bordo);
  border-radius: 2px;
  color: var(--testo-tenue);
  text-decoration: none;
  font-size: .8125rem;
  text-transform: lowercase;
  letter-spacing: .06em;
  transition: color .15s, border-color .15s;
}
.bottone-altro:hover { color: var(--accento); border-color: var(--accento-scuro); }

/* --------------------------------------------------------- ricerca */

/* La lente, ultima voce del menu. */
.menu-lente {
  display: inline-flex; align-items: center;
  color: var(--testo-tenue); transition: color .2s;
}
.menu-lente:hover { color: var(--accento); }

/* Il riquadro a scomparsa, che la lente apre da qualunque pagina. */
.cercatore {
  position: fixed; inset: 0; z-index: 60;
  display: flex; justify-content: center;
  /* flex-start e non lo stretch predefinito: senza, il riquadro si
     allunga fino in fondo allo schermo e i suggerimenti, che si
     posizionano al 100% della sua altezza, finiscono fuori dalla
     finestra. Da fuori sembra che l'autocompletamento non funzioni. */
  align-items: flex-start;
  /* Nessun margine ai lati: lo tiene il riquadro, dentro di sé. Con il
     margine qui il riquadro valeva il 100% di uno spazio già ridotto, e
     bastava che una qualsiasi altra regola gli desse una larghezza
     diversa perché sfondasse — ed è quello che succedeva. Messo dentro,
     il riquadro è largo quanto lo schermo e il modulo ci sta per
     costruzione. */
  padding: 14vh 0 1.5rem;
}
.cercatore[hidden] { display: none; }
/* Sul telefono il pannello scende più in alto e stringe i margini: lo
   spazio in larghezza è quello che è, e serve al campo. */
@media (max-width: 34rem) {
  .cercatore { padding: 8vh 0 1rem; }
  .ricerca button { padding: .7rem .8rem; }
}
.cercatore-fondo {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.74);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
/* La larghezza sta tutta su .cercatore .ricerca-blocco, qui sotto: le
   due classi vivono sullo stesso elemento e quella più specifica vince,
   quindi dichiararla anche qui serviva solo a far credere il contrario. */
.cercatore-riquadro { position: relative; }
.cercatore .ricerca { margin: 0; max-width: none; }

/* L'involucro è il riferimento dei suggerimenti, che escono sopra il
   resto della pagina invece di spingerlo in basso a ogni tasto. */
.ricerca-blocco { position: relative; max-width: 32rem; margin: 0 0 2rem; }
/* 38rem, non 36: due sono i margini interni, che adesso stanno qui. */
.cercatore .ricerca-blocco {
  width: 100%;
  max-width: 38rem;
  margin: 0;
  padding: 0 1rem;
}
/* I suggerimenti si allineano al campo, non al bordo del riquadro. */
.cercatore .suggerimenti { left: 1rem; right: 1rem; }

.ricerca { display: flex; gap: .5rem; margin: 0; max-width: 32rem; }
.ricerca input {
  flex: 1;
  min-width: 0;                /* o un campo lungo sfonda il flex */
  -webkit-appearance: none;
  appearance: none;
  padding: .7rem .9rem;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--bordo);
  border-radius: 2px;
  color: var(--testo);
  font: inherit;
  font-size: 1rem;             /* meno di 16px e iOS zooma da solo */
}
.ricerca input::placeholder { color: rgba(255,255,255,.34); }
.ricerca input:focus {
  outline: none;
  border-color: var(--accento-scuro);
  background: rgba(255,255,255,.07);
}
.ricerca button {
  padding: .7rem 1.15rem;
  background: none;
  border: 1px solid var(--bordo);
  border-radius: 2px;
  color: var(--testo-tenue);
  font: inherit;
  font-size: .8125rem;
  text-transform: lowercase;
  letter-spacing: .04em;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.ricerca button:hover { color: var(--accento); border-color: var(--accento-scuro); }

/* I suggerimenti. */
.suggerimenti {
  position: absolute; top: calc(100% + .4rem); left: 0; right: 0; z-index: 20;
  list-style: none; margin: 0; padding: 0;
  max-height: 58vh; overflow-y: auto;
  background: #0a0a0b;
  border: 1px solid var(--bordo);
  border-radius: 2px;
  box-shadow: 0 18px 40px rgba(0,0,0,.55);
}
.suggerimenti[hidden] { display: none; }
.suggerimenti li + li { border-top: 1px solid var(--bordo); }
.suggerimenti a {
  display: flex; flex-direction: column; gap: .2rem;
  padding: .7rem .9rem; text-decoration: none;
}
.suggerimenti a:hover, .suggerimenti li.scelto a { background: rgba(255,255,255,.06); }
.sug-titolo { font-size: .9375rem; line-height: 1.35; }
.sug-meta {
  font-size: .6875rem; color: var(--testo-tenue);
  text-transform: lowercase; letter-spacing: .03em;
}

/* ----------------------------------------------------- discografia */

.titolo-gruppo {
  margin: 3rem 0 1.25rem;
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.6rem;
  text-transform: lowercase;
  color: var(--testo-tenue);
}

/* auto-fill e non auto-fit: con pochi dischi in una fila, auto-fit li
   allargherebbe fino a farne due copertine giganti. */
.griglia-dischi {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: 1.5rem 1.25rem;
  margin: 0 0 1rem;
}
.disco-carta { display: block; text-decoration: none; }
.disco-copertina {
  display: block;
  aspect-ratio: 1;
  margin-bottom: .6rem;
  background: #0c0c0d;
  border: 1px solid var(--bordo);
  overflow: hidden;
}
.disco-copertina img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: opacity .25s;
}
.disco-carta:hover .disco-copertina img { opacity: .78; }

/* Senza copertina, l'iniziale del titolo: un riquadro vuoto sembra un
   errore, una lettera sembra una scelta. */
.disco-senza {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  font-family: var(--display);
  font-size: 3.5rem;
  color: rgba(255,255,255,.13);
}
.disco-titolo { display: block; font-size: .9375rem; line-height: 1.3; }
.disco-carta:hover .disco-titolo { color: var(--accento); }
.disco-anno {
  display: block; margin-top: .15rem;
  font-size: .75rem; color: var(--testo-tenue);
  text-transform: lowercase; letter-spacing: .03em;
}

.disco { padding: 3rem 0 1rem; max-width: 42rem; margin-inline: auto; }
.disco-testa { display: flex; gap: 1.75rem; align-items: flex-start; margin-bottom: 2.5rem; }
.disco-grande {
  flex: none; width: 12rem; aspect-ratio: 1; object-fit: cover;
  border: 1px solid var(--bordo);
}
.disco-dati { min-width: 0; }
.disco h1 {
  margin: .5rem 0 1rem;
  font-family: var(--display); font-weight: 400;
  font-size: clamp(2rem, 5vw, 2.8rem); line-height: 1.05;
}
@media (max-width: 34rem) {
  .disco-testa { flex-direction: column; gap: 1.25rem; }
  .disco-grande { width: 100%; max-width: 16rem; }
}

.scheda-dati {
  display: grid; grid-template-columns: auto 1fr;
  gap: .3rem 1rem; margin: 0; font-size: .875rem;
}
.scheda-dati dt { color: var(--testo-tenue); text-transform: lowercase; letter-spacing: .03em; }
.scheda-dati dd { margin: 0; }

.tracklist { list-style: none; margin: 0; padding: 0; max-width: 34rem; }
.tracklist li {
  display: flex; align-items: baseline; gap: .9rem;
  padding: .55rem 0;
  border-bottom: 1px solid var(--bordo);
}
.traccia-n {
  flex: none; width: 1.6rem;
  font-size: .75rem; color: var(--testo-tenue);
  font-variant-numeric: tabular-nums;
}
.traccia-titolo { flex: 1; min-width: 0; }
.traccia-durata {
  flex: none; font-size: .8125rem; color: var(--testo-tenue);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------- testata dell'articolo */

/* Il titolo di un articolo con fotografia si legge SOPRA la fotografia,
   come l'apertura della home: la copertina non è un blocco infilato fra
   il titolo e il testo, è il fondo su cui il titolo sta.

   Tre pezzi sovrapposti: la foto in fondo, una velatura che la scurisce
   quel tanto che basta a tenere leggibile il testo, e il testo sopra.
   I primi due stanno a z-index negativo, così il testo ci finisce sopra
   senza doverlo posizionare.

   Senza fotografia niente di tutto questo si applica: .testa e
   .testa-interno restano due contenitori qualunque e il titolo torna in
   cima alla colonna, dov'era. */

/* A sfumare in basso è l'immagine stessa, con una maschera, e non una
   fascia scura appoggiata sopra: dove l'immagine si dirada tornano a
   vedersi le lettere che scorrono nello sfondo, quindi fra la foto e il
   testo che comincia sotto non c'è nessuno stacco. Tappe fitte e non
   tre: con pochi punti la sfumatura mostra le fasce. */
.testa-foto {
  position: relative;
  isolation: isolate;          /* i piani negativi restano dentro la testata */
  overflow: hidden;
  /* Da bordo a bordo. Il calc(50% - 50vw) è il modo di uscire da un
     contenitore centrato senza toccare il markup: 50% è metà della
     colonna, 50vw metà dello schermo, e la differenza è esattamente il
     margine da recuperare. */
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  margin-bottom: 2.5rem;
  /* Il testo si appoggia in basso, come nel banner della home. */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* Poco più di mezzo schermo e non di più: questa è l'apertura di un
     pezzo da leggere, non un manifesto, e sotto la piega deve restare
     il testo. Le tre misure servono tutte: il 52vw tiene le proporzioni
     della foto sugli schermi larghi, il 58svh è il tetto vero, e il
     24rem è il pavimento — sul telefono 52vw sono due dita di foto, e
     il titolo se la mangerebbe tutta. svh e non vh perché vh conta anche lo spazio
     della barra degli indirizzi, e la testata sborderebbe.
     min-height e non height: se il titolo è lungo, cresce lui. */
  min-height: clamp(24rem, 52vw, 58vh);
  min-height: clamp(24rem, 52vw, 58svh);
  --sfuma-testata: linear-gradient(to bottom,
      rgba(0,0,0,1) 0%,   rgba(0,0,0,.99) 40%, rgba(0,0,0,.92) 56%,
      rgba(0,0,0,.72) 70%, rgba(0,0,0,.42) 82%, rgba(0,0,0,.16) 92%,
      rgba(0,0,0,0) 100%);
}
.testa-sfondo, .testa-velo {
  position: absolute; inset: 0; z-index: -1;
  -webkit-mask-image: var(--sfuma-testata);
  mask-image: var(--sfuma-testata);
}
.testa-sfondo img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  /* Il ritaglio parte dall'alto e non dal centro: nelle foto dal vivo il
     volto sta quasi sempre nella metà superiore, e un taglio centrato lo
     decapita. Qui conta doppio, perché la metà bassa è quella che la
     maschera fa sparire e che il titolo copre. */
  object-position: 50% 35%;
}
/* La velatura non deve arrivare al nero: a portare l'immagine al niente
   ci pensa la maschera. Il suo mestiere è un altro, tenere leggibile il
   testo sopra la parte di foto ancora visibile. */
.testa-velo {
  background:
    linear-gradient(to top,
      rgba(0,0,0,.82) 0%, rgba(0,0,0,.6) 28%, rgba(0,0,0,.28) 52%,
      rgba(0,0,0,.06) 74%, rgba(0,0,0,0) 90%),
    linear-gradient(to bottom, rgba(0,0,0,.4) 0%, rgba(0,0,0,0) 22%);
}
/* Il testo rientra nella colonna dell'articolo. La larghezza è quella
   di .articolo più i due fianchi: senza aggiungerli il titolo sopra la
   foto risulterebbe di un dito più stretto del testo sotto, e lo
   sfalsamento fra i due si vede. */
.testa-foto .testa-interno {
  width: 100%;
  max-width: calc(42rem + 3rem);
  margin: 0 auto;
  padding: 0 1.5rem 2.5rem;
}
/* Sopra la fotografia il titolo si raccoglie: la misura da manifesto
   che regge sul fondo pieno, su una foto diventa illeggibile. */
.testa-foto h1 { margin: 0; font-size: clamp(1.9rem, 5.2vw, 2.9rem); }
.testa-foto .credito { text-align: right; margin-top: .9rem; }
.testa-foto .credito a { border-bottom-color: rgba(255,255,255,.28); }

.credito {
  margin: .5rem 0 0;
  font-size: .6875rem;
  line-height: 1.45;
  letter-spacing: .02em;
  color: var(--testo-tenue);
}
.credito a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--bordo); }
.credito a:hover { color: var(--accento); border-bottom-color: var(--accento-scuro); }

/* ------------------------------------------ firma e condivisione */

/* Il piede di ogni scheda: da dove viene il pezzo a sinistra, il modo
   per passarlo a qualcuno a destra. */
.piede {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.bollino {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  color: var(--accento);
  letter-spacing: .03em;
  white-space: nowrap;
}
.bollino svg { flex: none; opacity: .92; }
.bollino-nota { color: var(--testo-tenue); }

.rimando-nostro { display: flex; align-items: center; gap: .45em; flex-wrap: wrap; }
.rimando-nostro .bollino { font-size: 1rem; }

.condividi-mini {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: .35rem;
  margin: -.35rem;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--testo-tenue);
  font: inherit;
  font-size: .75rem;
  letter-spacing: .02em;
  cursor: pointer;
  transition: color .15s;
}
.condividi-mini:hover,
.condividi-mini:focus-visible { color: var(--accento); }
.condividi-mini.fatto { color: var(--accento); }
.condividi-mini.fatto::after { content: 'copiato'; }

/* Nell'articolo la riga è alta e ariosa: l'icona ci sta dentro senza il
   margine negativo che serve a incastonarla nel piede di una scheda. */
.condividi .condividi-mini { margin: 0; padding: .4rem; }

/* ----------------------------------------------------------- elenco */

.elenco { display: grid; }
.scheda { padding: 2rem 0; border-bottom: 1px solid var(--bordo); }
.scheda h2 {
  margin: 0 0 .625rem;
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1.15;
}
.scheda h2 a { text-decoration: none; transition: opacity .2s; }
.scheda h2 a:hover { color: var(--accento); }
.scheda .sommario { font-size: .9375rem; margin-bottom: .625rem; }

@media (min-width: 46rem) {
  .elenco-largo { grid-template-columns: 1fr 1fr; column-gap: 3rem; }
}

/* --------------------------------------------------------- articolo */

/* La colonna di lettura è più stretta del contenitore — 42rem sono circa
   settanta caratteri per riga, la misura in cui l'occhio ritrova da solo
   l'inizio della riga dopo — ma va centrata nella pagina, o il bianco
   resta tutto da una parte. Stessa misura per le correlate in fondo,
   altrimenti il filo sopra di loro sborda oltre l'articolo. */
.articolo { padding: 4rem 0 2rem; max-width: 42rem; margin-inline: auto; }
/* La fotografia comincia dove finisce la barra del menu: i quattro rem
   di stacco che l'articolo si prende in cima servono a staccare il
   titolo dal menu, e qui in cima non c'è più il titolo — c'è la foto,
   che il menu lo tocca apposta.
   Questa riga va dopo quella qui sopra e non può stare nel blocco della
   testata illustrata: pesano uguale, e a parità di peso vince l'ultima
   scritta. Messa più su restava un rettangolo nero fra menu e foto. */
.articolo-foto { padding-top: 0; }
.articolo h1 {
  margin: 0 0 1.75rem;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.1rem, 6vw, 3.2rem);
  line-height: 1.08;
  letter-spacing: -.01em;
}
.corpo { font-size: 1.0625rem; line-height: 1.75; color: rgba(255,255,255,.88); }
.corpo p { margin: 0 0 1.375rem; }

/* Immagine sostituita dal segnaposto: niente ombre né bordi doppi, il
   disegno se li porta già dentro. */
/* Un'immagine che non carica sparisce, con tutto quello che le sta
   intorno: didascalie e cornici vuote sarebbero peggio del buco. */
img.img-mancante { display: none; }
figure:has(> img.img-mancante) { display: none; }

/* Da qui in giù: l'archivio 2002-2021. Vent'anni di HTML scritto da mani
   diverse, quindi lo stile deve reggere qualunque cosa arrivi. */
.corpo img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 2rem 0;
}
.corpo iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;      /* i video vecchi non dichiarano le proporzioni */
  height: auto;
  border: 0;
  margin: 2rem 0;
  background: var(--fondo-alto);
}
.corpo a { color: var(--testo); text-decoration: underline; text-underline-offset: .18em; }
.corpo a:hover { color: var(--accento); }
.corpo h2, .corpo h3 {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.2;
  margin: 2.5rem 0 1rem;
}
.corpo h2 { font-size: 1.9rem; }
.corpo h3 { font-size: 1.5rem; }
.corpo ul, .corpo ol { margin: 0 0 1.375rem; padding-left: 1.5rem; }
.corpo li { margin-bottom: .4rem; }
.corpo blockquote {
  margin: 2rem 0;
  padding-left: 1.25rem;
  border-left: 1px solid var(--bordo-forte);
  color: var(--testo-tenue);
}
/* Le tabelle dell'archivio non hanno larghezze sensate: le lasciamo
   scorrere invece di far scorrere tutta la pagina. */
.corpo table { display: block; overflow-x: auto; max-width: 100%; border-collapse: collapse; }
.corpo td, .corpo th { padding: .4rem .75rem; border: 1px solid var(--bordo); }

.nota-dubbio {
  margin: 0 0 2rem;
  padding: .875rem 1.125rem;
  border: 1px solid rgba(216,180,74,.35);
  font-size: .875rem;
  color: var(--avviso);
}

.rimando {
  margin: 3rem 0 0;
  padding: 1.5rem 0 0;
  border-top: 1px solid var(--bordo);
  font-size: .9375rem;
  color: var(--testo-tenue);
}
.rimando strong { color: var(--testo); font-weight: 500; }
.rimando a { color: var(--accento); text-decoration: none; border-bottom: 1px solid var(--accento-scuro); }
.rimando a:hover { border-bottom-color: var(--accento); }

/* -------------------------------------------------------- raccolte */

.occhiello {
  max-width: 40rem;
  margin: 0 0 2.5rem;
  color: var(--testo-tenue);
  font-size: 1rem;
}

.raccolta { padding: 3.5rem 0 1rem; max-width: 42rem; margin-inline: auto; }
.raccolta h1 {
  margin: .75rem 0 1rem;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.1rem, 6vw, 3.2rem);
  line-height: 1.08;
  letter-spacing: -.01em;
}
.raccolta .meta a { color: var(--testo-tenue); text-decoration: none; }
.raccolta .meta a:hover { color: var(--accento); }
.introduzione { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--bordo); }

/* La cronologia è il punto della raccolta: un elenco di date, non di
   schede. Le schede si sfogliano, una cronologia si legge in fila. */
.cronologia { list-style: none; margin: 2.5rem 0 0; padding: 0; }
.cronologia-anno {
  font-family: var(--display);
  font-size: 2rem;
  color: var(--testo-tenue);
  margin: 2.5rem 0 .75rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--bordo);
}
.cronologia-anno:first-child { margin-top: 0; }
.cronologia-voce {
  display: flex;
  gap: 1.25rem;
  align-items: baseline;
  padding: .7rem 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.cronologia-voce time {
  flex: 0 0 8.5rem;
  font-size: .75rem;
  color: var(--testo-tenue);
  text-transform: lowercase;
}
.cronologia-voce a {
  text-decoration: none;
  line-height: 1.35;
  transition: color .2s;
}
.cronologia-voce a:hover { color: var(--accento); }

@media (max-width: 34rem) {
  .cronologia-voce { flex-direction: column; gap: .25rem; }
  .cronologia-voce time { flex: none; }
}

.appartiene {
  margin: 0 0 1rem;
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--testo-tenue);
}
.appartiene a { color: var(--accento); text-decoration: none; }
.appartiene a:hover { border-bottom: 1px solid var(--accento); }

/* ---------------------------------------------------- condivisione */

.condividi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin: 2.5rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--bordo);
}
.condividi-etichetta {
  font-size: .6875rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--testo-tenue);
  margin-right: .25rem;
}
.condividi-voce {
  font-family: inherit;
  font-size: .75rem;
  text-transform: lowercase;
  color: var(--testo-tenue);
  text-decoration: none;
  background: transparent;
  border: 1px solid var(--bordo);
  padding: .35rem .75rem;
  cursor: pointer;
  transition: border-color .2s, color .2s;
}
.condividi-voce:hover { border-color: var(--accento); color: var(--accento); }
.condividi-voce.fatto { border-color: var(--accento); color: var(--accento); }

.tag { margin: 2rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.tag a {
  font-size: .75rem;
  color: var(--testo-tenue);
  text-decoration: none;
  border: 1px solid var(--bordo);
  padding: .3rem .7rem;
  text-transform: lowercase;
  transition: border-color .2s, color .2s;
}
.tag a:hover { border-color: var(--bordo-forte); color: var(--testo); }

.correlate {
  padding: 3rem 0 0;
  max-width: 42rem;
  margin-inline: auto;
  border-top: 1px solid var(--bordo);
}
.correlate > h2 {
  margin: 0 0 .5rem;
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.75rem;
  text-transform: lowercase;
}

/* ------------------------------------------------------------ varie */

/* I titoli di sezione sono minuscoli come sul sito ufficiale. I titoli
   delle notizie no: sono testo redazionale con nomi propri e date, e
   forzarli in minuscolo li renderebbe più difficili da scorrere. */
.titolo-sezione {
  margin: 3.5rem 0 .5rem;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(3rem, 6vw, 8rem);
  line-height: 1.05;
  text-transform: lowercase;
  text-align: center;
}

.vuoto { padding: 6rem 0; text-align: center; color: var(--testo-tenue); }
.vuoto h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 3rem;
  color: var(--testo);
  margin: 0 0 .5rem;
  text-transform: lowercase;
}

/* Bottoni contornati, mai pieni, angoli vivi: è la cifra del sito
   ufficiale, dove ogni "tickets" è un rettangolo vuoto. */
.bottone {
  display: inline-block;
  padding: .7rem 1.75rem;
  background: transparent;
  border: 1px solid var(--bordo-forte);
  color: var(--testo);
  text-decoration: none;
  font-family: inherit;
  font-size: .875rem;
  /* Dichiarata, o i pulsanti non sono alti uguale.
     Un <a> eredita l'interlinea del corpo, 1.6; un <button> no — i
     controlli di modulo partono da "normal" e nessun browser gliela
     passa. Misurati: 46,77px il collegamento, 41,38 il pulsante. Il
     testo dentro è identico, la differenza è tutta lì, e si vede solo
     quando i due tipi stanno in fila. */
  line-height: 1.25;
  text-transform: lowercase;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
.bottone:hover { background: var(--accento); color: #000; border-color: var(--accento); }
.bottone-tenue { border-color: var(--bordo); color: var(--testo-tenue); }
.bottone-tenue:hover { background: transparent; color: var(--accento); border-color: var(--accento); }

/* ---------------------------------------------------- pie di pagina */

.pieDiPagina {
  margin-top: 5rem;
  padding: 2.5rem 0 4rem;
  border-top: 1px solid var(--bordo);
  font-size: .75rem;
  color: var(--testo-tenue);
}
.avviso { margin: 0 0 1.25rem; max-width: 44rem; line-height: 1.7; }
.pieDiPagina a { color: var(--testo-tenue); }
.pieDiPagina a:hover { color: var(--accento); }

.colofone {
  display: flex; align-items: center; gap: 1.25rem;
  margin: 1.5rem 0 0;
}
/* Il margine negativo è solo sul contenitore, per riallineare la prima
   icona col testo sopra: metterlo su ogni collegamento farebbe
   sovrapporre le aree cliccabili, che è il difetto che si sente col dito
   e non si vede con gli occhi. */
.social { display: flex; align-items: center; gap: .35rem; margin-left: -.7rem; }
.social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem;      /* bersaglio da quaranta pixel */
  color: var(--testo-tenue);
  transition: color .2s;
}
.social a:hover { color: var(--accento); }

/* ----------------------------------------------------------- admin */

.pannello { padding: 3rem 0; }
.pannello-testa {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 2rem;
  padding-bottom: 1rem; border-bottom: 1px solid var(--bordo);
}
.pannello-testa h1 {
  margin: 0; font-family: var(--display); font-weight: 400;
  font-size: 2rem; text-transform: lowercase;
}

.bozza { border: 1px solid var(--bordo); padding: 1.5rem; margin-bottom: 1rem; }
.bozza h2 {
  margin: 0 0 .75rem; font-family: var(--display); font-weight: 400;
  font-size: 1.5rem; line-height: 1.15;
}
.bozza .sommario { font-size: .9375rem; color: rgba(255,255,255,.72); }
.punteggio {
  display: inline-block; min-width: 2.5rem; text-align: center;
  padding: .2rem .5rem; border: 1px solid var(--accento-scuro);
  color: var(--accento); font-size: .75rem; font-variant-numeric: tabular-nums;
}
/* align-items: center, e i moduli sono elementi flex anche loro.
   Senza, un pulsante avvolto in un <form> restava qualche pixel più in
   basso degli <a> che gli stanno di fianco: il modulo si stirava per
   l'altezza della riga e il pulsante gli restava appoggiato in cima. */
.azioni { display: flex; align-items: center; gap: .625rem; margin-top: 1.25rem; flex-wrap: wrap; }
.azioni form, .riga-azioni form { display: flex; margin: 0; }

.accesso { max-width: 22rem; margin: 6rem auto; }
.accesso h1 {
  font-family: var(--display); font-weight: 400; font-size: 2.25rem;
  margin: 0 0 2rem; text-transform: lowercase;
}
.campo { display: block; margin-bottom: 1.25rem; }
.campo span {
  display: block; font-size: .75rem; color: var(--testo-tenue);
  margin-bottom: .4rem; text-transform: lowercase;
}
.campo input {
  width: 100%; padding: .7rem .875rem;
  background: transparent; border: 1px solid var(--bordo);
  color: var(--testo); font: inherit; font-size: .9375rem;
}
.campo textarea {
  width: 100%; padding: .7rem .875rem;
  background: transparent; border: 1px solid var(--bordo);
  color: var(--testo); font: inherit; font-size: .9375rem;
  resize: vertical; min-height: 4.5rem;
}
.campo input:focus, .campo textarea:focus { outline: none; border-color: var(--accento); }

.avvisoOk, .avvisoKo { padding: .875rem 1.125rem; margin-bottom: 1.5rem; font-size: .875rem; }
.avvisoOk { border: 1px solid var(--accento-scuro); color: var(--accento); }
.avvisoKo { border: 1px solid rgba(216,180,74,.5); color: var(--avviso); }

/* ------------------------------------------- pannello: filtri e liste */

.filtri {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  margin-bottom: 1.5rem; padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--bordo);
}
.filtri input[type="search"], .filtri select {
  background: transparent; border: 1px solid var(--bordo);
  color: var(--testo); font: inherit; font-size: .875rem;
  padding: .5rem .7rem; border-radius: 0;
}
.filtri input[type="search"] { min-width: 14rem; flex: 1 1 14rem; }
.filtri select { color: var(--testo-tenue); }
.filtri option { background: #111; color: var(--testo); }
.filtri input:focus, .filtri select:focus { outline: none; border-color: var(--accento); }

/* ------------------------------------------ pannello: icone e foto */

/* Quante bozze aspettano. Era grigio come il resto del titolo e non si
   leggeva: è il numero per cui si apre il pannello. */
.conta {
  display: inline-block;
  margin-left: .35rem;
  padding: .1rem .55rem;
  border: 1px solid var(--accento-scuro);
  border-radius: 2px;
  background: rgba(62,168,75,.1);
  color: var(--accento);
  font-family: var(--testo-font);
  font-size: .9375rem;
  font-variant-numeric: tabular-nums;
  vertical-align: .3em;
}

/* Un pulsante di sola icona: quadrato, senza il margine che l'icona
   tiene quando ha una parola di fianco. */
.bottone-solo-icona { padding: .7rem; }
.bottone-solo-icona .icona { margin-right: 0; }

/* Le icone stanno dentro ai pulsanti, non al posto del testo: da sole
   costringono a indovinare, accanto alla parola si leggono in un colpo
   d'occhio e la parola resta per chi non le riconosce. */
.icona { flex: none; margin-right: .4em; margin-top: -1px; vertical-align: -2px; }
.bottone { display: inline-flex; align-items: center; }
.piccolo .icona { margin-right: .3em; }

.torna {
  display: inline-flex; align-items: center; gap: .2rem;
  color: var(--testo-tenue); font-size: .875rem; text-decoration: none;
}
.torna:hover { color: var(--accento); }

/* La copertina attuale, con accanto cosa se ne può fare. */
.copertina-adesso {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1.25rem;
  margin: 1.5rem 0 2.5rem;
  padding-bottom: 2rem; border-bottom: 1px solid var(--bordo);
}
.copertina-adesso img { width: 18rem; max-width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.copertina-dati { flex: 1 1 16rem; }
.copertina-vuota {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .6rem;
  width: 18rem; max-width: 100%; aspect-ratio: 16/9;
  border: 1px dashed var(--bordo);
  color: var(--testo-tenue); font-size: .8125rem;
}

/* Il catalogo da cui scegliere. Miniature piccole e fitte: qui si
   riconosce una fotografia, non la si guarda. */
.griglia-foto {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: .75rem;
  margin-top: 1.5rem;
}
.foto-scelta button {
  display: block; width: 100%; padding: 0;
  background: none; border: 1px solid var(--bordo); border-radius: 2px;
  color: var(--testo-tenue); font: inherit; text-align: left;
  cursor: pointer; overflow: hidden;
  transition: border-color .15s, color .15s;
}
.foto-scelta button:hover { border-color: var(--accento-scuro); color: var(--testo); }
.foto-scelta img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; }

/* Nel catalogo le miniature sono più fitte: lì si scorre per giudicare,
   non per scegliere una. */
.griglia-fitta { grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: .5rem; }

/* Una scartata resta visibile ma spenta: si deve capire a colpo d'occhio
   cosa è stato buttato, e poterlo rimettere. */
.foto-fuori button { border-style: dashed; }
.foto-fuori img { filter: grayscale(1); opacity: .32; }
.foto-fuori .foto-dati { opacity: .5; }
.foto-fuori button:hover img { opacity: .6; }
.foto-dati { display: block; padding: .4rem .5rem .5rem; }
.foto-autore { display: block; font-size: .75rem; line-height: 1.3; }
.foto-uso { display: block; font-size: .6875rem; opacity: .6; margin-top: .15rem; }
/* Il bollino delle licenze non commerciali: non è un avvertimento, è un
   promemoria di cosa andrebbe tolto se il sito cambiasse natura. */
.tag-nc {
  display: inline-block; padding: 0 .3em; margin-left: .2em;
  border: 1px solid rgba(216,180,74,.45); border-radius: 2px;
  color: var(--avviso); font-size: .625rem; letter-spacing: .06em;
}
/* La data un filo più marcata del resto della riga: è il dato per cui
   si guarda quella riga. */
.foto-quando { color: var(--testo); opacity: .85; font-variant-numeric: tabular-nums; }

/* ------------------------------------------- modulo di modifica */

.modulo { display: flex; flex-direction: column; gap: 1.25rem; margin-top: 1.5rem; }
.modulo label { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.modulo label > span {
  font-size: .75rem; color: var(--testo-tenue);
  text-transform: uppercase; letter-spacing: .1em;
}
.modulo label > span em {
  text-transform: none; letter-spacing: 0; font-style: normal; opacity: .75;
}
.modulo input, .modulo textarea, .modulo select {
  background: rgba(255,255,255,.03);
  border: 1px solid var(--bordo);
  border-radius: 0;
  color: var(--testo);
  font: inherit;
  font-size: 1rem;                 /* meno di 16px e iOS zooma da solo */
  padding: .6rem .75rem;
  width: 100%;
}
.modulo textarea {
  /* Il corpo è HTML: a spaziatura fissa si vedono i tag e l'indentazione,
     e non si confonde una virgoletta storta con una dritta. */
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .875rem;
  line-height: 1.6;
  resize: vertical;
}
.modulo input:focus, .modulo textarea:focus, .modulo select:focus {
  outline: none; border-color: var(--accento-scuro);
  background: rgba(255,255,255,.06);
}
.modulo option { background: #111; color: var(--testo); }
.modulo-riga { display: flex; flex-wrap: wrap; gap: 1rem; }
.modulo-riga > label { flex: 0 1 14rem; }
.modulo-riga > label.cresce { flex: 1 1 20rem; }
.modulo-nota { font-size: .75rem; color: var(--testo-tenue); }

/* Un pulsante acceso dice che quello stato è attivo adesso. */
.bottone-acceso {
  color: var(--accento);
  border-color: var(--accento-scuro);
  background: rgba(62,168,75,.08);
}
.riga-azioni { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }

.scelta { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; }
.scelta input { accent-color: var(--accento); width: 1rem; height: 1rem; }

/* La barra delle azioni resta a portata di pollice mentre scorri una
   lista lunga: con seicento bozze si scorre parecchio. */
.barra-azioni {
  position: sticky; bottom: 0;
  display: flex; flex-wrap: wrap; gap: .625rem; align-items: center;
  margin-top: 1.5rem; padding: 1rem;
  background: rgba(0,0,0,.92);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--bordo);
}

.paginazione {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; margin: 2rem 0; padding-top: 1.5rem;
  border-top: 1px solid var(--bordo);
  font-size: .875rem; color: var(--testo-tenue);
}
.paginazione a { color: var(--testo); text-decoration: none; }
.paginazione a:hover { color: var(--accento); }

.titoletto {
  font-family: var(--display); font-weight: 400; font-size: 1.5rem;
  text-transform: lowercase; margin: 3rem 0 1rem;
}
.bozza.compatta { padding: .875rem 1.25rem; }
.bozza .riga {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; flex-wrap: wrap;
}
.bozza .riga a { font-weight: 500; text-decoration: none; }
.bozza .riga a:hover { color: var(--accento); }
.bottone.piccolo { padding: .3rem .7rem; font-size: .75rem; }
.registro { font-size: .8125rem; color: var(--testo-tenue); }
.registro div { padding: .35rem 0; border-bottom: 1px solid var(--bordo); }
.registro strong { color: var(--testo); font-weight: 500; }

/* ------------------------------------ raccolte lanciate dal pannello */

/* Il nome è "barra-raccolte" e non "raccolte" perché .raccolta, al
   singolare, è già la pagina pubblica delle raccolte di articoli: due
   selettori quasi uguali per due cose diverse sono un incidente che
   aspetta il suo turno. */
.barra-raccolte {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  margin: 0 0 1.5rem;
}
.barra-raccolte form { margin: 0; }
.barra-raccolte .bottone { display: inline-flex; align-items: center; gap: .4rem; }

.resoconto { margin: 0 0 2rem; }
.resoconto summary {
  cursor: pointer;
  color: var(--testo-tenue);
  font-size: .9rem;
  padding: .35rem 0;
}
.resoconto summary:hover { color: var(--accento); }
.resoconto pre {
  margin: .5rem 0 0;
  padding: .8rem 1rem;
  background: var(--fondo-alto);
  border: 1px solid var(--bordo);
  border-radius: 4px;
  overflow-x: auto;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--testo-tenue);
  white-space: pre;
}

/* -------------------------------- caricamento manuale di una foto */

.caricamento { margin: 0 0 2rem; max-width: 34rem; }
.caricamento > summary {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .9rem;
  border: 1px solid var(--bordo);
  border-radius: 4px;
  color: var(--testo-tenue);
  font-size: .9rem;
}
.caricamento > summary:hover { color: var(--accento); border-color: var(--accento); }
.caricamento .occhiello { margin: 1rem 0; font-size: .92rem; }

.modulo-foto { display: grid; gap: .9rem; }
.modulo-foto label {
  display: grid;
  gap: .3rem;
  font-size: .85rem;
  color: var(--testo-tenue);
}
.modulo-foto input,
.modulo-foto select {
  width: 100%;
  padding: .5rem .7rem;
  background: var(--fondo-alto);
  border: 1px solid var(--bordo);
  border-radius: 4px;
  color: var(--testo);
  font: inherit;
  font-size: .95rem;
}
.modulo-foto input:focus,
.modulo-foto select:focus { outline: none; border-color: var(--accento); }
.modulo-foto input[type="file"] { padding: .4rem; font-size: .85rem; }
.modulo-foto .facolt { color: var(--testo-tenue); opacity: .65; font-style: italic; }
.modulo-foto button { justify-self: start; margin-top: .3rem; }

/* ------------------------- l'avanzamento di un lavoro, riga per riga */

.avvisoOk p, .avvisoKo p { margin: 0; }
.avanzamento {
  margin: .8rem 0 0;
  max-height: 16rem;
  overflow: auto;
  padding: .7rem .8rem;
  background: rgba(0,0,0,.35);
  border-radius: 3px;
  font-size: .74rem;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--testo-tenue);
}
.avanzamento:empty { display: none; }

/* ---------------------------------- la barra dei pulsanti del pannello */

/* Una riga sua, larga quanto la pagina. Prima stava accanto al titolo e
   andava a capo da sé: i pulsanti si spezzavano su due righe con un
   buco a destra, e quale gruppo finisse sopra dipendeva da quanti erano.
   Occupando tutta la larghezza il problema non si pone più. */
.pannello-testa .azioni { flex-basis: 100%; width: 100%; margin-top: 0; }

/* Le tre di servizio: in alto a destra, sopra il titolo, e larghe quanto
   basta. Non lavorano sulle bozze e stare in fila con gli strumenti che
   invece ci lavorano le faceva sembrare della stessa famiglia. */
.azioni-servizio { justify-content: flex-end; margin: 0 0 1.25rem; }
.azioni-servizio > * { flex: 0 0 auto; }
.pannello-testa .azioni > *,
.pannello-testa .azioni > form { flex: 1 1 auto; }
.pannello-testa .azioni > form > .bottone { width: 100%; justify-content: center; }
.pannello-testa .azioni > .bottone { justify-content: center; }
/* Il "+" resta quadrato: allargarlo lo farebbe sembrare un altro
   pulsante, e invece è l'unico che non ha una parola sopra. */
.pannello-testa .azioni > .bottone-solo-icona { flex: 0 0 auto; }

/* --------------------------------------------------- i costi dell'API */

.costi-riquadri {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: .625rem;
  margin: 0 0 2.5rem;
}
.costo-riquadro {
  display: grid;
  gap: .2rem;
  padding: .8rem .9rem;
  border: 1px solid var(--bordo);
  border-radius: 3px;
}
.costo-forte { border-color: var(--accento-scuro); }
.costo-nome  { font-size: .75rem; color: var(--testo-tenue); text-transform: lowercase; }
.costo-cifra { font-family: var(--display); font-size: 1.6rem; line-height: 1.1; }
.costo-forte .costo-cifra { color: var(--accento); }
.costo-sotto { font-size: .7rem; color: var(--testo-tenue); }

.costi-giorni { display: grid; gap: .2rem; margin: 0 0 2.5rem; }
.costo-giorno {
  display: grid;
  grid-template-columns: 3.2rem 1fr 4.5rem;
  align-items: center;
  gap: .6rem;
  font-size: .78rem;
  color: var(--testo-tenue);
}
.costo-barra {
  display: block;
  height: .7rem;
  background: rgba(255,255,255,.05);
  border-radius: 2px;
  overflow: hidden;
}
.costo-barra i { display: block; height: 100%; background: var(--accento-scuro); }
.costo-valore { text-align: right; }

/* La coda in attesa, sotto le bozze: quanti articoli aspettano enrich. */
.coda-stato {
  margin: 2.5rem 0 0;
  padding: .7rem .9rem;
  border: 1px solid var(--bordo);
  border-radius: 3px;
  font-size: .85rem;
  color: var(--testo-tenue);
}
.coda-stato strong { color: var(--accento); font-weight: 500; }