/* ==========================================================================
   I componenti del progetto: i disegni che OS non ha, col prefisso gl- e
   solo token nei valori. Ogni blocco è il porting del suo omonimo dal
   redesign Next (src/styles/components.css), tradotto sui nomi token di OS.
   Gli hex vivono in theme.css, il posto canonico: qui solo var().

   La copia servita è public/gl-components.css, scritta da bin/sync-assets.
   ========================================================================== */

/* ==========================================================================
   LA HOME — l'esplorazione 2, eseguita sui componenti e sui token di OS.

   Il cliente ha scelto questa fra tre proposte. Le regole sono due, e sono
   scritte per esteso in theme.css: l'architettura parla sans e il contenuto
   parla serif; il blu non decora, costruisce. Qui c'è solo quel che il
   sistema non ha — le composizioni.

   Quel che NON sta qui perché lo fa OS: la traccia da 1200 e il gutter (li
   dà `.ds-site__band`), il ritmo verticale fra le sezioni (`--ds-rhythm-
   section`), il fondo e gli inchiostri di una campitura a tutta larghezza
   (`.gl-band` ri-punta `--ds-surface-0` e la sezione lo dipinge, che è il
   meccanismo con cui la fascia d'intestazione è blu da sempre), i richiami
   (il bottone del sistema, ri-puntato sui suoi ganci in theme.css).
   ========================================================================== */

/* ── L'inchiostro di una campitura ────────────────────────────────────────
   Ogni campo pieno di blu porta due cose: la classe `.gl-band`, che ri-punta
   i token, e una riga `color` sua, che sposta l'inchiostro EREDITATO. Sono
   due meccanismi diversi e servono tutti e due.

   `.ds-site` scrive `color: var(--ds-site-ink)` sulla shell, e lì il token è
   già stato risolto sul quasi-nero della pagina. Un discendente che ri-punta
   `--ds-text-primary-neutral` non se ne accorge: quel colore è stato calcolato
   a monte e viene ereditato così com'è. Senza la riga `color` il titolo dentro
   una campitura blu esce nero in tema chiaro — e nello scuro il difetto
   sparisce, perché lì l'inchiostro di pagina è già chiaro.

   La riga sta su ogni campitura e non su una classe unica messa in comune,
   e questo è il secondo tentativo: la classe unica c'era, si chiamava
   `.gl-campo`, e la cella blu dell'archivio la batteva. `.gl-cella` dichiara
   `color: inherit` per spegnere il colore che il browser dà a un link, ha la
   stessa specificità e viene dopo nel foglio, quindi vinceva per sola
   posizione. Un'astrazione che il componente sotto può battere senza saperlo
   non è un'astrazione. Il valore letto è sempre `--ds-text-primary-neutral`,
   che `.gl-band` ha già portato al bianco sullo stesso elemento.

   Su `.gl-band` non si può mettere, perché `.gl-band` veste anche i bottoni:
   un `color` lì batterebbe quello del bottone del sistema per sola posizione,
   e un primario bianco su blu diventerebbe bianco su bianco. */

/* ── Il capo di sezione: sectionTitle di OS, vestito ─────────────────────
   Dal 4 settembre 2026 il markup è `ds-section-title` col filetto acceso:
   la riga a baseline coi passi 8/24, il filetto col suo respiro, il
   bersaglio alzato del rimando e l'a-capo deciso dalle parole sono del
   sistema. Qui il vestito del brand: token, più le proprietà contate (n),
   candidate a manopole come `case` ed `edge` del bottone. */
.gl-under-bar .ds-section-title {
  --ds-section-title-rule: var(--ds-brand);
  /* (1) i 40 fra capo e contenuto, il respiro di queste pagine: candidata,
     il passo sotto il capo come manopola. */
  margin-block-end: var(--ds-space-10);
}

.gl-under-bar .ds-section-title__action {
  --ds-section-title-action-size: var(--ds-font-small-size);
  --ds-section-title-action-weight: var(--ds-weight-intense);
  --ds-section-title-action-tracking: 0.12em;
  --ds-section-title-action-ink: var(--ds-brand);
  /* (2) il maiuscolo del rimando: candidata `action-case`. */
  text-transform: uppercase;
}

/* Sul campo blu il capo si inverte da solo dove i token bastano: filetto e
   titolo sul bianco della campitura, il rimando sulla voce quieta. */
.gl-band .ds-section-title {
  --ds-section-title-rule: var(--ds-text-primary-neutral);
}

.gl-band .ds-section-title__action {
  --ds-section-title-action-ink: var(--ds-text-secondary-neutral);
}

/* Il rimando sciolto, fuori da un capo: la stessa voce del rimando del
   capo, per il collegamento che chiude un blocco. Prima prendeva in
   prestito la classe del capo; adesso ha la sua. */
.gl-rimando {
  font-size: var(--ds-font-small-size);
  font-weight: var(--ds-weight-intense);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ds-brand);
  text-decoration: none;
  white-space: nowrap;
  padding-block: var(--ds-space-1);
  margin-block: calc(var(--ds-space-1) * -1);
  transition: color var(--ds-duration) var(--gml-ease);
}

.gl-rimando:hover {
  color: var(--ds-text-primary-neutral);
}

/* L'ancora sotto la barra, per qualunque bersaglio raggiunto col
   cancelletto: OS la offre legata al SUO header sticky, e la barra qui è
   la nostra, quindi la regola è nostra. Stessa misura, 64. */
.gl-under-bar :target {
  scroll-margin-block-start: var(--ds-space-16);
}

/* ── I metadati di un pezzo ───────────────────────────────────────────────
   Categoria e data sopra il titolo, in maiuscoletto micro. La categoria è
   l'unica delle due che porta colore: è quella che si scandaglia. */
.gl-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-2);
  align-items: baseline;
  margin: 0;
  font-size: var(--gml-text-micro);
  font-weight: var(--ds-weight-intense);
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  /* Primario e non secondario. E' l'unica cosa che dice QUANDO, e su una
     griglia di schede il grigio la faceva sparire: chi cerca un pezzo del
     2016 in mezzo a centocinquanta cerca proprio quella riga. */
  color: var(--ds-text-primary-neutral);
}

.gl-meta__cat {
  color: var(--ds-brand);
}

/* Sulle campiture il metadato non può leggere il brand: blu su blu sparisce.
   `.gl-band` ha già spostato i due inchiostri neutri, quindi resta da
   riportare la categoria sul primario. */
.gl-band .gl-meta__cat {
  color: var(--ds-text-primary-neutral);
}

/* ── L'apertura ───────────────────────────────────────────────────────────
   Una campitura blu che parte dal bordo alto del documento. La testata del
   sito è fissa ed è dello stesso blu: non ci si allinea sotto, ci si fonde
   dentro, e quello che si vede è un solo campo che tiene mezza schermata. Il
   padding alto è il posto della barra, non un margine — per questo la shell
   della home rinuncia al suo pavimento (`.gl-under-bar--flush`).

   In fondo un filetto da 6px nell'azzurro chiaro: è l'unico gesto a piena
   saturazione della pagina, ed è la giunzione fra il campo blu e il campo
   chiaro che segue. */
.gl-apertura {
  color: var(--ds-text-primary-neutral);
  border-block-end: 6px solid var(--gml-blue-bright);
  padding-block-start: calc(var(--ds-space-16) + var(--ds-space-10));
}

/* Il testo si centra sul ritratto invece di appoggiarsi al suo piede. Con
   `end` le due colonne si allineavano in basso, e il blocco di parole finiva
   spinto giu' quanto bastava a lasciare sopra una fascia vuota di blu. */
.gl-apertura__griglia {
  display: grid;
  grid-template-columns: 1fr;
  /* Il passo e' quello che teneva il testo: sciolto il suo contenitore, e'
     la griglia a doverlo dare. Attorno al ritratto ci pensa il suo margine. */
  gap: var(--ds-space-6);
  justify-items: start;
  align-items: center;
  padding-block-end: var(--ds-space-12);
}

.gl-apertura__griglia > .gl-apertura__testo > .ds-font-overline {
  order: 1;
}

.gl-apertura__griglia > .gl-apertura__testo > h1 {
  order: 2;
}

.gl-apertura__griglia > .gl-ritratto {
  order: 3;
  margin-block: var(--ds-space-4);
}

.gl-apertura__griglia > .gl-apertura__testo > .gl-apertura__intro {
  order: 4;
}

.gl-apertura__griglia > .gl-apertura__testo > .gl-azioni {
  order: 5;
}

/* Sotto i 1024 la colonna e' una sola, e li' il ritratto sta FRA il titolo e
   la presentazione: si legge chi e', si vede chi e', si legge cosa fa. In
   fondo alla colonna invece arrivava dopo i bottoni, cioe' dopo la fine.

   `display: contents` scioglie questo contenitore e i suoi figli diventano
   caselle della griglia insieme al ritratto: da li' bastano cinque `order`.
   L'alternativa era mettere la fotografia due volte nel markup e nasconderne
   una, che vuol dire due <img> per una sola immagine. Da 64rem in su il
   contenitore torna una colonna sua e gli ordini si azzerano. */
/* La testata di OGNI pagina: occhiello, titolo, riga, in colonna e col loro
   passo.

   Il passo lo possiede il CONTENITORE, che e' la regola del sistema: il DS ha
   tolto apposta i margini di adiacenza sui figli, perche' un margine sul
   figlio litiga con qualunque gap abbia il genitore.

   E questa regola non dice piu' `display: contents`. Lo diceva, e serve — ma
   serve alla sola griglia della home, sotto i 64rem, dove i figli devono
   diventare celle per infilarsi in mezzo al ritratto con gli `order`. Scritta
   senza scope si prendeva tutte e dodici le pagine: sciolto il contenitore,
   nessuno possedeva piu' la distanza e occhiello, titolo e riga si toccavano.
   Sopra i 1024 non si vedeva, perche' li' il contenitore tornava una colonna.
   Segnalato dal proprietario su /contatti il 19 settembre 2026, ed era su
   tutte. */
.gl-apertura__testo {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-6);
  align-items: start;
  /* Come il capo di sezione: la barra e' fissa e alta quanto `--ds-space-16`,
     e una testata raggiunta col cancelletto atterrerebbe sotto di lei. */
  scroll-margin-block-start: var(--ds-space-16);
}

/* Solo la home, e solo dove la colonna e' una: li' il contenitore si scioglie
   e i suoi figli diventano celle accanto al ritratto. */
@media (max-width: 63.999rem) {
  .gl-apertura__griglia > .gl-apertura__testo {
    display: contents;
  }
}

.gl-apertura__intro {
  /* 48ch e non 60: `ch` è la larghezza dello zero, più larga della lettera
     media, quindi 60ch manda la riga oltre gli ottanta caratteri. */
  margin: 0;
  max-inline-size: 48ch;
  line-height: 1.55;
  color: var(--ds-text-secondary-neutral);
}

.gl-azioni {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-space-3);
}

/* Il ritratto com'è, su nero, dentro la campitura blu.

   Prima entrava nella tavolozza: scala di grigi, i neri schiacciati e una
   fusione in `lighten` sopra il blu, così il fondo dello scatto collassava
   nella campitura e restava solo il viso. Tecnicamente funzionava — il fondo
   spariva davvero — ma il prezzo era il viso: schiacciare i neri per far
   sparire uno sfondo li schiaccia anche sulla pelle, e la fotografia usciva
   slavata. Al cliente non piaceva, e aveva ragione lui.

   Quindi la fotografia si vede per quel che è, e il fondo che aveva nello
   studio — un nero appena tinto di blu, misurato agli angoli fra 7 e 30 — lo
   trova anche qui. Il pannello nero dentro la campitura blu non è un
   incidente: è il taglio fra due campi, lo stesso gesto del filetto azzurro
   sotto l'apertura.

   Per un giro la campitura è stata nera anche lei, così il pannello spariva e
   restava solo lui nel buio. Il proprietario ha preferito il blu, ed è la
   decisione giusta per un'altra ragione: quel blu è l'unica campitura piena
   che apre il sito, e toglierlo dalla prima schermata lo toglieva proprio
   dove dichiara di che colore è il sito. */
.gl-ritratto {
  position: relative;
  isolation: isolate;
  background-color: var(--gml-nero);
  aspect-ratio: 4 / 5;
  overflow: hidden;
}

.gl-ritratto img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

/* Gli indici. Sono i numeri che la home diceva dentro una frase; qui stanno
   in fondo alla campitura, su un filetto, incolonnati e in cifre tabulari
   perché si leggano come una tabella e non come un ornamento. */
/* La riga si chiude su tre lati, non su uno. Aveva il filetto solo in cima e
   i due divisori interni, quindi a sinistra e a destra restava aperta e i
   tre campi leggevano come una tabella lasciata a meta'. Il fondo lo chiude
   gia' il filetto da 6px dell'apertura, che sta appena sotto. */
.gl-indici {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-block-start: 1px solid var(--gml-blue-bright);
  border-inline: 1px solid var(--gml-blue-bright);
  margin: 0;
}

/* Lo stesso respiro in tutti e tre, cosi' il primo campo sta dentro la sua
   cella come gli altri due invece di appoggiarsi al bordo. */
.gl-indice {
  padding-block: var(--ds-space-5);
  padding-inline: var(--ds-space-5);
}

.gl-indice + .gl-indice {
  border-inline-start: 1px solid var(--gml-blue-bright);
}

.gl-indice__k {
  font-size: var(--gml-text-micro);
  font-weight: var(--ds-weight-intense);
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ds-text-secondary-neutral);
}

.gl-indice__v {
  margin: 0;
  font-family: var(--ds-typeface-body);
  font-size: clamp(2rem, calc(var(--ds-viewport) * 0.044), 3.25rem);
  font-weight: var(--ds-weight-delicate);
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  margin-block-start: var(--ds-space-1);
}

/* ── 01 In evidenza ───────────────────────────────────────────────────────
   Due pesi diversi, non due card uguali: a sinistra la fotografia, a destra
   una campitura piena. Fra due riquadri identici non esiste gerarchia; fra
   una foto e un blocco di colore sì, e si legge prima di leggere i titoli. */
.gl-evidenza {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ds-space-6);
}

.gl-primo {
  display: flex;
  flex-direction: column;
  background-color: var(--gml-velo);
  color: inherit;
  text-decoration: none;
}

.gl-primo__media {
  display: block;
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background-color: var(--gml-blue);
}

.gl-primo__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}

.gl-primo__plancia {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-3);
  padding: var(--ds-space-6);
}

/* Il titolo di un pezzo è contenuto, quindi serif: le taglie però sono della
   card, non della scala — è la card a decidere quanto pesa il suo titolo
   dentro il proprio riquadro. Faccia e peso vengono dai token dei titoli di
   contenuto, così una revisione della voce li muove tutti insieme. */
.gl-primo__t {
  margin: 0;
  font-family: var(--ds-typeface-display);
  font-size: clamp(1.375rem, calc(var(--ds-viewport) * 0.024), 1.875rem);
  font-weight: var(--ds-weight-intense);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

/* La seconda in evidenza rinuncia alla copertina e diventa una campitura
   piena. `.gl-band` le porta gli inchiostri; qui resta la forma. */
/* Il grappolo in cima e il richiamo in fondo, non quattro pezzi sparsi.
   `space-between` distribuiva tutti e quattro — categoria, titolo, occhiello,
   "Leggi" — negli avanzi della cella, che sulla traccia larga sono tanti: il
   titolo finiva a meta' altezza e il suo occhiello duecento pixel piu' sotto,
   come se non si riguardassero. Adesso i tre che si riguardano stanno
   insieme in alto e solo il richiamo scende. */
.gl-secondo {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-4);
  background-color: var(--gml-blue);
  color: var(--ds-text-primary-neutral);
  padding: var(--ds-space-6);
  min-block-size: 18rem;
  text-decoration: none;
}

/* La fotografia della campitura in evidenza. Stessa forma e stessa regola
   delle celle dell'archivio: 16:10, e dentro ci sta intera. Quel che avanza
   resta blu, perche' il fondo della campitura E' blu — e' l'unico posto del
   sito dove il vuoto attorno a una fotografia non si vede affatto. */
.gl-secondo__media {
  display: block;
  position: relative;
  aspect-ratio: 16 / 10;
  flex: 0 0 auto;
  overflow: hidden;
}

.gl-secondo__media img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}

.gl-secondo__t {
  margin: 0;
  font-family: var(--ds-typeface-display);
  font-size: clamp(1.5rem, calc(var(--ds-viewport) * 0.028), 2.125rem);
  font-weight: var(--ds-weight-intense);
  line-height: 1.12;
  letter-spacing: -0.015em;
}

.gl-secondo__x {
  margin: 0;
  line-height: 1.5;
  color: var(--ds-text-secondary-neutral);
  /* Gli occhielli dell'archivio vanno dalla riga al paragrafo: senza un tetto
     la campitura si allunga e la coppia si sbilancia. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.gl-secondo__vai {
  margin-block-start: auto;
  font-size: var(--ds-font-small-size);
  font-weight: var(--ds-weight-intense);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

/* ── 02 L'indice delle categorie ──────────────────────────────────────────
   Righe, non pillole. Tredici etichette affiancate non dicono da dove
   cominciare; incolonnate, con il conteggio allineato a destra in cifre
   tabulari, l'archivio si legge come un sommario.

   Due trattamenti per riga e non quattro. Ce n'erano quattro: il numero
   d'ordine a 12 in blu, il nome a 20 in bianco, la cifra a 18 in grigio e la
   parola "articoli" a 10 maiuscola. Quattro modi di scrivere in una riga che
   dice due cose, il nome e quante ne contiene, e sopra tredici righe fanno
   cinquantadue pezzi di tipografia per un elenco.

   Il numero d'ordine se ne va: non e' una classifica che il lettore usa, e
   contava da 01 come le cinque ragioni piu' in basso. La cifra e la parola
   diventano una cosa sola, stessa faccia e stesso corpo del nome, solo piu'
   quiete: sono la meta' subordinata della coppia, non una terza voce.
   -------------------------------------------------------------------------- */
.gl-categorie {
  display: grid;
  grid-template-columns: 1fr;
  border-block-start: 1px solid var(--gml-filo);
}

.gl-categoria {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--ds-space-4);
  padding-block: var(--ds-space-4);
  border-block-end: 1px solid var(--gml-filo);
  color: inherit;
  text-decoration: none;
  transition:
    background-color var(--ds-duration-fast) var(--gml-ease),
    color var(--ds-duration-fast) var(--gml-ease);
}

/* Il campo pieno al passaggio rientra dal margine della riga, o il blu
   toccherebbe il filetto verticale della colonna accanto. */
.gl-categoria:hover {
  background-color: var(--gml-blue);
  color: var(--gml-header-fg);
}

/* Il nome di una categoria e' architettura, non contenuto: e' una voce
   dell'indice del sito. Sans, come i capi di sezione. */
/* Maiuscolo come le altre volte che il sito nomina una categoria. La crenatura
   torna positiva: il terzo titolo la porta negativa, che su un maiuscoletto
   chiude le lettere una sull'altra. */
.gl-categoria__nome {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0;
  transition: transform var(--ds-duration-fast) var(--gml-ease);
}

.gl-categoria:hover .gl-categoria__nome {
  transform: translateX(var(--ds-space-2));
}

.gl-categoria__n-art {
  margin: 0;
  font-size: var(--ds-font-heading-6-size);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--ds-text-secondary-neutral);
}

.gl-categoria:hover .gl-categoria__n-art {
  color: var(--gml-header-fg-quiet);
}

/* ── 03 L'archivio, a pesi diversi ────────────────────────────────────────
   Sei articoli in celle di taglia diversa: una grande su due righe con la
   copertina, una campitura piena, una chiara larga, tre in fondo strette. La
   gerarchia la fa la superficie, non il corpo del titolo.

   I filetti non sono bordi: sono il `gap`. La griglia ha il fondo del colore
   del filetto e ogni cella ha il suo fondo opaco, quindi la riga da 1px è
   quello che resta scoperto — e quando la griglia si ricompone su una colonna
   le righe si ridisegnano da sole, senza un solo selettore in più. */
.gl-bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background-color: var(--gml-filo);
  border: 1px solid var(--gml-filo);
}

/* Il bottone verso l'archivio, sotto la griglia: lo stesso passo di 40 che
   il bento tiene prima dei suoi, cosi' le sezioni della home chiudono tutte
   con lo stesso gesto.

   La seconda riga e' la coda «Dove sono stato», che e' arrivata dopo e senza
   la sua parte di questa regola: il bottone nasceva attaccato alla griglia,
   zero contro i quaranta delle altre due, ed era la prima cosa che si vedeva
   guardando la sezione (proprietario, 16 settembre 2026). La stessa regola e
   non una sua copia: il passo e' uno, e scritto in due punti diventa due il
   giorno che cambia. `.gl-eventi-archivio` porta questa griglia anche in
   /eventi e /conferenze, ma li' non ha nessun `.gl-azioni` accanto e la riga
   non la tocca. */
.gl-bento + .gl-azioni,
.gl-eventi-archivio + .gl-azioni {
  margin-block-start: var(--ds-space-10);
}

.gl-cella {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-4);
  justify-content: flex-end;
  background-color: var(--ds-surface-0);
  padding: var(--ds-space-6);
  min-block-size: 12rem;
  color: inherit;
  text-decoration: none;
  transition: background-color var(--ds-duration-fast) var(--gml-ease);
}

.gl-cella:hover {
  background-color: var(--gml-velo);
}

.gl-cella--blu {
  background-color: var(--gml-blue);
  color: var(--ds-text-primary-neutral);
}

.gl-cella--blu:hover {
  background-color: var(--gml-blu-fondo);
}

.gl-cella--foto {
  padding: 0;
  gap: 0;
  /* Il contenuto parte dall'alto. `.gl-cella` lo spinge in fondo — giusto per
     una cella di solo testo, dove il titolo si appoggia al pavimento — ma con
     una fotografia in cima quel che avanza finiva SOPRA di lei, e due celle
     accanto con titoli di lunghezza diversa avevano la fotografia a due
     altezze diverse. */
  justify-content: flex-start;
}

/* Una forma sola per le celle piccole, 16:10, e la fotografia la riempie
   ritagliando quel che non ci sta. La forma fissa e non l'altezza elastica
   perche' tre schede affiancate sono una riga solo se lo sono: con l'altezza
   presa da quel che il titolo lascia, un titolo di due righe accorciava la
   sua fotografia e i tre occhielli sotto finivano su tre linee diverse. */
.gl-cella__media {
  display: block;
  position: relative;
  aspect-ratio: 16 / 10;
  flex: 0 0 auto;
  background-color: var(--gml-blue);
  overflow: hidden;
}

/* La grande occupa due righe, e la sua fotografia se le prende tutte: senza
   forma fissa, quel che il titolo lascia. Con la forma fissa restavano 440
   pixel di vuoto sotto il titolo. */
.gl-cella--xl .gl-cella__media {
  aspect-ratio: auto;
  flex: 1 1 auto;
  min-block-size: 14rem;
}

.gl-cella__media img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}

.gl-cella__corpo {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-3);
}

.gl-cella--foto .gl-cella__corpo {
  padding: var(--ds-space-6);
}

.gl-cella__t {
  margin: 0;
  transition: transform var(--ds-duration-fast) var(--gml-ease);
}

.gl-cella:hover .gl-cella__t {
  transform: translateX(var(--ds-space-1));
}

.gl-cella--xl .gl-cella__t,
.gl-cella--blu .gl-cella__t {
  font-size: clamp(1.375rem, calc(var(--ds-viewport) * 0.022), 1.75rem);
  letter-spacing: -0.01em;
}

/* ── 04 Gli eventi, sul pieno ─────────────────────────────────────────────
   La seconda grande campitura della pagina, e come la fascia Telegram è la
   SEZIONE a essere blu: la classe ri-punta il token di superficie che la
   sezione dipinge, e `.gl-band` porta gli inchiostri.

   Le locandine restano su fondo bianco fisso: sono grafiche chiare con
   cornici chiare, e appoggiate sul blu diventano schegge di luce sul campo
   pieno — il contrasto che regge la sezione. `contain` e non `cover`: il
   taglio su una locandina mangia il titolo, che è l'unica cosa che
   quell'immagine deve dire. */
.gl-eventi {
  color: var(--ds-text-primary-neutral);
}

.gl-eventi-nota {
  max-inline-size: 48ch;
  line-height: 1.55;
  color: var(--ds-text-secondary-neutral);
  margin-block-end: var(--ds-space-8);
}


/* ── 05 Perché seguirmi ───────────────────────────────────────────────────
   Cinque voci numerate, e le tre righe di ciascuna — numero, titolo, testo —
   allineate fra loro con `subgrid`. Senza, «Indipendenza» e «Comunità» hanno
   lunghezze diverse e i cinque paragrafi partono a cinque altezze diverse: è
   il difetto che rende una fila di colonne un elenco disordinato. */
.gl-perche {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ds-space-6);
  list-style: none;
  padding: 0;
  margin: 0;
}

.gl-perche__v {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-2);
  border-block-start: 1px solid var(--gml-filo);
  padding-block-start: var(--ds-space-4);
}

.gl-perche__n {
  font-size: var(--ds-font-heading-4-size);
  font-weight: var(--ds-weight-delicate);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ds-brand);
}

/* Le cinque voci sono architettura, non pezzi: sans, e più pesanti dei capi
   di sezione perché qui il corpo è piccolo e il peso è l'unica leva rimasta. */
.gl-perche__t {
  margin: 0;
  font-family: var(--ds-typeface-body);
  font-size: var(--ds-font-heading-6-size);
  font-weight: var(--ds-weight-robust);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.gl-perche__d {
  margin: 0;
  line-height: 1.5;
  color: var(--ds-text-secondary-neutral);
}

/* Le stesse voci quando sono quattro. La griglia madre ne conta cinque, e
   quattro voci in cinque colonne lasciano un quinto di riga vuoto in fondo,
   che si legge come una voce mancante invece che come una scelta. */
.gl-perche--quattro {
  grid-template-columns: 1fr;
}

/* ── Il canale — due blocchi incastrati ───────────────────────────────────
   Il campo blu esce dalla traccia e arriva al bordo dello schermo; il campo
   chiaro con il QR gli si appoggia contro. Il testo però resta in colonna con
   il resto della pagina: il padding interno del blocco blu vale il margine
   della traccia, quindi la campitura sfonda e la riga di testo no.

   La sezione che lo tiene è `flush` e `full`: niente ritmo verticale e niente
   gutter, perché qui il contenuto È la banda. */
.gl-canale {
  display: grid;
  grid-template-columns: 1fr;
}

.gl-canale__pieno {
  background-color: var(--gml-blue);
  color: var(--ds-text-primary-neutral);
  padding-block: clamp(var(--ds-space-12), calc(var(--ds-viewport) * 0.06), var(--ds-space-20));
  padding-inline: var(--ds-space-6);
}

.gl-canale__testo {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-5);
  align-items: start;
  max-inline-size: 34rem;
}

/* Più grande del capo di una sezione, e apposta: questo non introduce un
   elenco, è l'unico invito del sito che porta fuori dal sito e occupa mezza
   pagina da solo. La taglia è della composizione, faccia e peso del ruolo. */
.gl-canale__t {
  font-size: clamp(1.75rem, calc(var(--ds-viewport) * 0.034), 2.75rem);
  letter-spacing: -0.035em;
  line-height: 1.02;
}

.gl-canale__d {
  margin: 0;
  line-height: 1.55;
  color: var(--ds-text-secondary-neutral);
}

.gl-canale__qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-4);
  background-color: var(--gml-velo);
  padding: var(--ds-space-10);
  text-decoration: none;
}

.gl-canale__qr img {
  inline-size: auto;
  block-size: auto;
  max-inline-size: 12rem;
  max-block-size: 16rem;
  object-fit: contain;
}

.gl-canale__qr-k {
  font-size: var(--gml-text-micro);
  font-weight: var(--ds-weight-intense);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ds-brand);
}

/* Il gemello di `.gl-canale__qr`: lo stesso campo tenue appoggiato contro la
   campitura piena, ma con dentro una colonna di righe invece di un codice da
   inquadrare. Allineato all'inizio e non centrato, perché quello che tiene è
   testo e il testo si legge da un bordo. */
.gl-canale__chiaro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  gap: var(--ds-space-4);
  background-color: var(--gml-velo);
  padding: var(--ds-space-10);
}

/* ── 06 Contatti ──────────────────────────────────────────────────────────
   I recapiti restano la lista del sistema (`descriptionList`, righe rigate):
   è quel che il refactor A1 aveva già portato dentro OS. La direzione nuova
   la ritocca in theme.css e per tutto il sito, non qui e non solo in home:
   la stessa lista sta anche su /contatti, e due vestiti per un componente
   solo sarebbero il difetto, non la rifinitura.

   Il modulo sta su un velo, non dentro una card: un form non è un oggetto di
   contenuto, è la pagina che chiede qualcosa. La superficie tenue lo separa
   dai recapiti — che sono lo stesso gesto in un altro modo — senza chiuderlo
   in una scatola. */
.gl-contatti {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ds-space-10);
  align-items: start;
}

.gl-modulo {
  background-color: var(--gml-velo);
  padding: var(--ds-space-6);
}

/* ── La locandina che non c'è ─────────────────────────────────────────────
   Un evento senza grafica lasciava un riquadro bianco vuoto in mezzo a
   quattordici locandine a colori, e un riquadro vuoto non si legge come una
   scelta: si legge come un'immagine che non ha caricato. Qui la locandina la
   scrive il sito, con quel che di quell'evento si sa di sicuro — il giorno,
   il mese, la città — e il marchio dove lo mettono le locandine vere, cioè
   nell'angolo in alto a sinistra.

   Le misure sono in `cqi` e non in `rem`, e la regola dichiara il proprio
   contenitore: la stessa composizione sta in una scheda larga 416 e sulla
   pagina dell'evento a 520, e un corpo fisso sarebbe minuscolo nella prima e
   perso nella seconda.

   Il rapporto è 3:4 come le locandine vere, così una fila di schede resta
   una fila. Dove la fessura ha già un'altezza sua — la scheda, la fascia
   della home — vince quella; sulla pagina dell'evento, dove non ce l'ha, il
   rapporto è quel che la disegna. */
/* Il campo è il blu profondo e non il blu pieno. Sulla scheda dell'archivio
   i due si equivalgono, ma sull'apertura di un evento la pagina sotto è già
   una campitura di blu pieno: con lo stesso identico colore la colonna di
   sinistra sembrava vuota. `--gml-blu-fondo` è il blu scurito che il tema
   tiene per un campo dentro un campo, ed è esattamente questo caso. */
.gl-muta {
  /* Dichiarato, perché OS lo dichiara per componente invece di azzerarlo una
     volta: senza, il padding si sommava fuori dalla fessura e il riquadro
     usciva 483 per 621 dentro uno slot da 416 per 555, tagliato in basso e a
     destra da `overflow: hidden` — ed è lì che il marchio si perdeva. */
  box-sizing: border-box;
  container-type: inline-size;
  position: relative;
  display: flex;
  flex-direction: column;
  /* Centrato e non appoggiato al piede: con il blocco in fondo restavano due
     terzi di campo vuoto sopra, e il marchio da solo lassù non li riempiva. */
  justify-content: center;
  /* Il rapporto e basta. `block-size: 100%` dentro una plancia che l'altezza
     ce l'ha automatica è un ciclo — l'altezza del figlio dipende da quella
     del padre che dipende da quella del figlio — e il browser lo chiude a
     zero: sull'apertura di un evento il riquadro usciva 0 per 0. Dove la
     fessura un'altezza ce l'ha, la larghezza è la stessa e il rapporto porta
     alla stessa altezza. */
  aspect-ratio: 3 / 4;
  padding: 9%;
  overflow: hidden;
  background-color: var(--gml-blu-fondo);
  color: var(--ds-text-primary-neutral);
}

/* Il giorno è una cifra, e le cifre di questo sito parlano sans. Leggero e
   non pesante: a questo corpo il peso non serve a farsi vedere, serve solo a
   chiudere le contro-forme.

   Interlinea 1 e non 0.82. A 0.82 la riga era più corta dei glifi e il mese
   sotto saliva dentro la pancia del 9: misurato, «SETTEMBRE 2026» toccava il
   «19» a ogni misura, perché il difetto è nel rapporto e non nei pixel. */
.gl-muta__giorno {
  font-family: var(--ds-typeface-body);
  font-size: 30cqi;
  font-weight: var(--ds-weight-delicate);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
  line-height: 1;
}

.gl-muta__mese {
  font-size: 5cqi;
  font-weight: var(--ds-weight-intense);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  line-height: 1.4;
  color: var(--gml-header-fg-quiet);
}

.gl-muta__citta {
  margin-block-start: 8%;
  padding-block-start: 8%;
  border-block-start: 1px solid var(--ds-border);
  font-size: 6.5cqi;
  font-weight: var(--ds-weight-intense);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.15;
}

/* In alto a sinistra, dove ogni locandina vera porta il riquadro col nome e
   il ritratto. Il file è bianco con la trasparenza, disegnato per stare sul
   blu della barra, quindi qui non chiede niente. */
/* La misura è una percentuale e non `cqi`. Con `16cqi` il marchio usciva 55px
   dentro una scheda da 416 e 520 dentro un'apertura da 520, cioè largo quanto
   tutto il riquadro: l'unità di contenitore su `inline-size` non regge dove
   il contenitore prende l'altezza da un rapporto. La percentuale si misura
   sulla scatola del segnaposto, che è ferma. */
.gl-muta__marchio {
  position: absolute;
  inset-block-start: 9%;
  inset-inline-start: 9%;
  inline-size: 13%;
  block-size: auto;
}

/* ── Gli scatti: la fascia di fotografie di /eventi ──────────────────────
   Il sito vecchio apriva /eventi con la locandina del mese messa a testata.
   Qui l'apertura è tipografica come su ogni altra pagina, e le fotografie
   arrivano subito sotto come un campo solo: tre riquadri accostati che vanno
   da bordo a bordo, senza filo fra loro, perché fra due campi c'è un taglio.

   Il rapporto è dichiarato e non lasciato al file: le tre foto nascono 3:2 e
   restano tre riquadri identici. Su una colonna il rapporto si abbassa a
   16:9, o tre fotografie in fila diventano tre schermate di telefono. */
.gl-scatti {
  display: grid;
  grid-template-columns: 1fr;
}

/* `block-size: auto` e non solo il rapporto: le tre `img` portano `width` e
   `height`, che il browser legge come altezza dichiarata, e un'altezza
   dichiarata batte `aspect-ratio`. Senza questa riga i riquadri uscivano
   480 per 960 invece di 480 per 320. Gli attributi restano perche' sono
   quello che tiene il posto in pagina prima che la foto arrivi. */
.gl-scatti img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* ── L'apertura di un evento ─────────────────────────────────────────────
   Cinque parti di locandina e sette di parole, e la locandina sta a sinistra
   perché è quella che si riconosce da lontano: una grafica chiara sul campo
   blu pieno, che è lo stesso contrasto su cui regge la fascia della home.

   `align-items: start` e non `center`: la colonna delle parole è alta quanto
   il suo contenuto, e centrarla su una locandina alta settecento pixel la
   staccherebbe dall'occhiello, che è la prima cosa che si legge. */
.gl-evento {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ds-space-10);
  align-items: start;
  padding-block-end: var(--ds-space-12);
}

.gl-evento__testo {
  align-items: start;
}

/* Il filetto fra i fatti. `.gl-band` porta `--ds-border-subtle` a
   trasparente, perché su una campitura piena un filo grigio chiaro sparisce e
   la sua assenza è la scelta giusta quasi ovunque. Qui no: quattro coppie
   nome-valore senza righe diventano un blocco di testo, e la riga è quello
   che le fa leggere come un elenco. Bianco al 22%, che è il filo più tenue
   che si vede ancora sul blu. */
.gl-evento .ds-description-list {
  --ds-border-subtle: rgba(255, 255, 255, 0.22);
  inline-size: 100%;
}


/* ── La fascia dei cookie ────────────────────────────────────────────────
   Fissa in fondo, campo pieno come ogni altra campitura del sito, e sopra la
   barra nell'ordine di sovrapposizione: la barra sta a 20 e questa a 30,
   perché finché non si è risposto è l'unica cosa che deve stare davanti.

   `[hidden]` porta il suo `display: none`: l'attributo da solo perde contro
   il `display: flex` di questa regola, e la fascia sarebbe rimasta visibile a
   chi ha già risposto — cioè esattamente a chi non deve rivederla.

   Il padding orizzontale è `--gml-bordo`, il margine da cui parte tutto il
   sito: così il testo della fascia comincia in colonna con il testo della
   pagina invece che a un margine suo. */
.gl-cookie {
  position: fixed;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-4) var(--ds-space-8);
  padding: var(--ds-space-5) var(--gml-bordo);
  border-block-start: 3px solid var(--gml-blue-bright);
  background-color: var(--gml-blue);
  color: var(--ds-text-primary-neutral);
}

.gl-cookie[hidden] {
  display: none;
}

.gl-cookie__testo {
  margin: 0;
  max-inline-size: 60ch;
  line-height: 1.5;
}

.gl-cookie__testo a {
  color: inherit;
  text-underline-offset: 0.2em;
}

/* ── Il moto ──────────────────────────────────────────────────────────────
   Tutto quello che si muove qui cambia colore o posizione, mai scala e mai
   ombra, e dura un battito. Chi ha chiesto meno movimento non ne riceve
   nessuno: restano i cambi di colore, che sono informazione. */
@media (prefers-reduced-motion: reduce) {
  .gl-categoria__nome,
  .gl-cella__t {
    transition: none;
  }

  .gl-categoria:hover .gl-categoria__nome,
  .gl-cella:hover .gl-cella__t {
    transform: none;
  }
}

/* ── Le foto dentro un articolo ───────────────────────────────────────────
   I 144 articoli importati sono PDF, e dentro i PDF ci sono 178 fotografie
   che il testo estratto aveva lasciato indietro: ritratti, schermate,
   locandine, le immagini attorno a cui l'articolo e' scritto. Tornano dove
   stavano, in un `<figure>` che porta questa classe.

   Quattro varianti perche' quattro sono le disposizioni che i PDF usano
   davvero: una foto per intero, una a lato del testo, due o tre affiancate.
   La base e' la larghezza della colonna di lettura, che e' anche il caso piu'
   frequente.

   Scritta PRIMA de «Le larghezze» apposta: le sue soglie stanno in quella
   sezione, e una media query che viene prima nel foglio perde per sola
   posizione contro una regola scritta dopo. */
.gl-foto {
  margin-block: var(--ds-rhythm-block);
  margin-inline: 0;
}

/* Nessuna fotografia viene gonfiata oltre la sua misura vera. Una schermata
   da 300x225 tirata a 944 e' una poltiglia di pixel, e negli articoli vecchi
   ce ne sono parecchie: misurate, 80 delle 172 erano piu' piccole del posto
   che gli era stato dato.

   `inline-size: auto` con le due misure scritte sul tag: l'immagine esce alla
   sua taglia, e `max-inline-size` la ferma quando la colonna e' piu' stretta
   di lei. Nessuno stile scritto a mano dentro l'HTML — la misura ce l'ha gia'
   il tag, e il foglio la lascia parlare invece di scavalcarla.

   Al centro, perche' una fotografia stretta appoggiata al margine sinistro di
   una colonna larga sembra un errore di impaginazione. */
.gl-foto img {
  display: block;
  inline-size: auto;
  max-inline-size: 100%;
  block-size: auto;
  /* E nemmeno piu' alta di cosi'. Una verticale larga quanto la colonna
     diventa alta millequattrocento pixel: uno schermo e mezzo di fotografia
     in mezzo a un articolo, che si scorre come un buco. Con tutte e due le
     misure su `auto` e un tetto su una sola, il browser stringe l'altra e le
     proporzioni restano quelle. */
  max-block-size: 32rem;
  margin-inline: auto;
  /* Il fondo tenue si vede mentre l'immagine arriva, e sotto una fotografia
     con lo sfondo bianco tiene il bordo dove sarebbe altrimenti sparito. */
  background-color: var(--ds-surface-1);
}

/* Vale anche in riga e a lato del testo, non solo a piena larghezza: una
   334x596 dentro una casella da 464 verrebbe tirata del 39 per cento, e su
   una fotografia si vede. Le caselle restano uguali fra loro — le fa la
   griglia — e l'immagine ci sta dentro centrata: la riga si legge come una
   riga lo stesso. */

/* Due o tre affiancate: colonne uguali, e l'altezza la decide la fotografia
   piu' alta. `1fr` e non `auto`, o una verticale in mezzo a due orizzontali
   si prende meta' riga. */
.gl-foto--due,
.gl-foto--tre {
  display: grid;
  gap: var(--ds-space-4);
}

/* La tavola: quattro o piu' fotografie che nel PDF stanno insieme, in cima
   all'articolo, come le figure numerate di una lezione. Impilate una sotto
   l'altra erano sette francobolli centrati in una colonna da mille, con
   quattro schermate di niente attorno.

   `auto-fit` con una misura minima invece di un numero di colonne: la tavola
   si riempie da sola, tre in fila su una colonna larga, due su un tablet, una
   su un telefono, e non serve una soglia per ogni caso. `start` in verticale
   perche' le fotografie di una tavola hanno altezze diverse e allinearle in
   basso le fa galleggiare. */
.gl-foto--tavola {
  display: grid;
  /* `min(45%, 13rem)` e non 13rem secchi: su una colonna larga la misura
     minima e' 13rem e la tavola fa quattro colonne, su un telefono e' il 45
     per cento della colonna e ne fa due. Sette fotografie in fila indiana su
     un telefono sono duemila pixel di scorrimento per una cosa che nel PDF
     si guarda tutta insieme. */
  grid-template-columns: repeat(auto-fit, minmax(min(45%, 13rem), 1fr));
  gap: var(--ds-space-4);
  align-items: start;
  justify-items: center;
}

/* Dentro una tavola il tetto e' piu' basso: le celle sono strette, e una
   verticale alta 512 in mezzo a orizzontali da 200 sfonda la riga. */
.gl-foto--tavola img {
  max-block-size: 18rem;
}

/* A lato del testo. Il float e non una griglia: quel che serve e' che il
   testo GIRI attorno alla fotografia, e girare attorno e' l'unica cosa che
   una griglia non sa fare. */
.gl-foto--sx,
.gl-foto--dx {
  inline-size: min(48%, 22rem);
}

/* The caption, when the PDF had one under the photograph: nineteen of the
   two hundred and twenty-six, in a smaller body, read back on 10 September
   2026 (data-didascalie.json). Small and secondary, like the source line
   under the byline, centred under a centred photograph. No element when
   there is no text: the figure ends with its image. */
.gl-foto figcaption {
  margin-block-start: var(--ds-space-2);
  font-size: var(--ds-font-small-size);
  line-height: var(--ds-font-small-leading);
  color: var(--ds-text-secondary-neutral);
  text-align: center;
}

/* In a row of two or three the caption spans the row: a grid item of its own
   would take a cell and push the last photograph down. */
.gl-foto--due figcaption,
.gl-foto--tre figcaption,
.gl-foto--tavola figcaption {
  grid-column: 1 / -1;
}

/* ── Le larghezze ─────────────────────────────────────────────────────────
   Una sola soglia vera, a 64rem: sotto, tutto è una colonna e i pesi della
   griglia non hanno senso; sopra, la traccia da 1200 con le sue dodici
   colonne. A 48rem si apre solo quello che regge due colonne senza stringere
   il testo. */
/* I versi dell'apertura, e la soglia e' misurata sul testo e non scelta.
   Il verso piu' lungo — «che sono dietro le quinte del palcoscenico del potere
   globale.» — sta dentro la colonna fino a 560 pixel di finestra e a 520 va a
   capo. Da qui in su ogni verso e' un blocco e gli accapo sono quelli
   dell'autore; sotto, gli span restano in riga e il testo scorre come un
   capoverso, perche' a 390 pixel di otto versi ne uscirebbero quattordici,
   metà pieni e metà mozzi, che non e' il ritmo che aveva scritto. */
@media (min-width: 35rem) {
  .gl-apertura__intro span {
    display: block;
  }
}

@media (min-width: 48rem) {
  /* Sotto i 768 le fotografie stanno una sotto l'altra e larghe quanto la
     colonna: due affiancate su un telefono sono due francobolli, e una foto
     a lato del testo lascia una colonna di parole larga sei sillabe. Da qui
     in su ognuna prende la sua forma. */
  .gl-foto--due { grid-template-columns: repeat(2, 1fr); }

  .gl-foto--tre { grid-template-columns: repeat(3, 1fr); }

  /* Il respiro sopra resta quello di ogni altra figura. Era azzerato per
     allineare il bordo alto della fotografia alla prima riga che le scorre
     accanto, e il prezzo era che il capoverso SOPRA le finiva addosso: una
     fotografia incollata al testo, che e' la prima cosa che si vede. */
  .gl-foto--sx {
    float: inline-start;
    margin-inline-end: var(--ds-rhythm-block);
  }

  .gl-foto--dx {
    float: inline-end;
    margin-inline-start: var(--ds-rhythm-block);
  }

  .gl-categorie {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--ds-space-6);
  }

  .gl-categoria {
    grid-template-columns: 3.5rem 1fr auto;
    column-gap: var(--ds-space-6);
    padding-inline: var(--ds-space-3);
  }

  .gl-perche {
    grid-template-columns: repeat(2, 1fr);
  }

  .gl-scatti {
    grid-template-columns: repeat(3, 1fr);
  }

  .gl-scatti img {
    aspect-ratio: 3 / 2;
  }
}

@media (min-width: 64rem) {
  .gl-apertura__griglia {
    /* Apertura larga due unità di spalla: la proporzione che regge la prima
       schermata senza che il ritratto diventi il soggetto. */
    grid-template-columns: 7fr 4fr;
    gap: var(--ds-space-12);
    padding-block-end: var(--ds-space-16);
  }

  .gl-apertura__griglia > .gl-ritratto {
    order: 0;
    margin-block: 0;
  }

  .gl-evidenza {
    grid-template-columns: 7fr 5fr;
  }

  .gl-bento {
    grid-template-columns: repeat(12, 1fr);
  }

  .gl-cella--xl {
    grid-column: span 7;
    grid-row: span 2;
  }

  .gl-cella--blu,
  .gl-cella--larga {
    grid-column: span 5;
  }

  .gl-cella--terzo {
    grid-column: span 4;
  }

  .gl-perche {
    grid-template-columns: repeat(5, 1fr);
    /* Tre righe dichiarate qui e riprese dalle voci con `subgrid`: numero,
       titolo e testo delle cinque colonne cadono sulle stesse tre linee. */
    grid-template-rows: auto auto auto;
    gap: 0;
  }

  .gl-perche__v {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    gap: var(--ds-space-2);
    padding-inline-end: var(--ds-space-5);
  }

  .gl-perche__v + .gl-perche__v {
    border-inline-start: 1px solid var(--gml-filo);
    padding-inline-start: var(--ds-space-5);
  }

  .gl-evento {
    grid-template-columns: 5fr 7fr;
    gap: var(--ds-space-12);
  }

  .gl-canale {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }

  .gl-perche--quattro {
    grid-template-columns: repeat(4, 1fr);
  }

  .gl-canale__pieno {
    /* La campitura arriva al bordo dello schermo, il testo resta in colonna
       con la traccia: il padding a sinistra vale esattamente il margine. */
    padding-inline-start: var(--gml-bordo);
    padding-inline-end: var(--ds-space-12);
  }

  /* La stessa regola dall'altra parte: il campo chiaro arriva al bordo dello
     schermo e le sue righe finiscono sul margine della traccia. */
  .gl-canale__chiaro {
    padding-inline-start: var(--ds-space-12);
    padding-inline-end: var(--gml-bordo);
  }

  .gl-contatti {
    grid-template-columns: 5fr 7fr;
    gap: var(--ds-space-12);
  }
}

/* ── La card di un articolo: blogCard di OS, vestita ─────────────────────
   Dal 4 settembre 2026 il markup è `ds-blog-card` di OS (frame bare, su
   16/10): la scatola, il gap, il link steso sull'intera scheda, il ritaglio
   della copertina, il segnaposto quando la copertina manca e il piede
   ancorato in fondo sono del sistema. Qui resta il vestito del brand: quasi
   tutto ri-puntamento di token, più le proprietà segnate (n), ognuna una
   candidata a diventare manopola di OS come è successo a `case` ed `edge`
   del bottone. */

/* Il titolo parla da quinto titolo, come prima: token. L'accensione in
   hover è il ri-puntamento dell'inchiostro, non una proprietà. */
.ds-blog-card .ds-card__title {
  --ds-card-title-face: var(--ds-font-heading-5-face);
  --ds-card-title-size: var(--ds-font-heading-5-size);
  --ds-card-title-weight: var(--ds-font-heading-5-weight);
  --ds-card-title-leading: var(--ds-font-heading-5-leading);
  --ds-card-title-tracking: var(--ds-font-heading-5-tracking);
  /* (1) il tetto di righe che tiene insieme la griglia: da chiedere a OS
     come `titleLines` accanto al `lines` della descrizione. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--ds-duration) var(--gml-ease);
}

.ds-blog-card:hover .ds-card__title {
  --ds-card-title-ink: var(--ds-brand);
}

/* L'estratto è il contenuto della card, non la sua didascalia: corpo pieno
   in primario. Solo token. */
.ds-blog-card .ds-card__description {
  --ds-card-description-face: var(--ds-font-body-face);
  --ds-card-description-size: var(--ds-font-body-size);
  --ds-card-description-weight: var(--ds-font-body-weight);
  --ds-card-description-leading: var(--ds-font-body-leading);
  --ds-card-description-tracking: var(--ds-font-body-tracking);
  --ds-card-description-ink: var(--ds-text-primary-neutral);
}

/* (2) Titolo ed estratto a 12 e non ai 4 del sistema: due blocchi di testo
   corrente, non un titolo con l'etichetta. Candidata: il passo del heading
   come manopola. La scheda tiene i suoi due passi storici, 16 fra copertina
   e corpo e 12 fra corpo e piede: il gap della card scende a 12 e la
   copertina riprende i suoi 4. */
.ds-blog-card .ds-card__heading {
  gap: var(--ds-space-3);
}

.ds-blog-card {
  gap: var(--ds-space-3);
}

.ds-blog-card .ds-card__media {
  margin-block-end: var(--ds-space-1);
}

/* La categoria come prima: campo blu a filo d'angolo, maiuscolo. I colori
   sono token del badge; (3) il filo d'angolo e (4) il maiuscolo con la sua
   crenatura sono proprietà. */
.ds-blog-card .ds-blog-card__category {
  --ds-badge-solid: var(--gml-blue);
  --ds-badge-on-solid: var(--gml-header-fg);
  inset-block-end: 0;
  inset-inline-start: 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  /* Il respiro del campo com'era: 4 sopra e sotto, 12 ai lati. */
  padding: var(--ds-space-1) var(--ds-space-3);
}

/* Il piede parla da metadato, come `.gl-meta`: token del meta di pagina,
   più (5) il filetto sopra la data, che OS non disegna, e (6) il maiuscolo. */
.ds-blog-card .ds-card__footer {
  border-block-start: 1px solid var(--ds-border-subtle);
  padding-block-start: var(--ds-space-3);
}

.ds-blog-card .ds-site-page__meta {
  --ds-site-page-meta-size: var(--ds-font-small-size);
  --ds-site-page-meta-leading: var(--ds-font-small-leading);
  --ds-site-page-meta-weight: var(--ds-weight-intense);
  --ds-site-page-meta-tracking: 0.14em;
  --ds-site-page-meta-ink: var(--ds-text-primary-neutral);
  text-transform: uppercase;
}

/* Un soffio in hover, non uno zoom: il movimento dice "è cliccabile", non
   rifà l'inquadratura. (7) La coppia di movimento. */
.ds-blog-card .ds-card__media img {
  transition: transform var(--ds-duration-slow) var(--gml-ease);
}

.ds-blog-card:hover .ds-card__media img {
  transform: scale(1.03);
}

/* ── La card di un evento: la locandina, e sotto dove e quando ───────────
   Senza scatola, come la card di un articolo: la locandina è già una grafica
   con la sua cornice, e un bordo attorno le mette una seconda cornice a un
   millimetro dalla prima.

   Le righe erano anche le stesse tre volte: la linguetta diceva «28 mag», il
   titolo diceva «Padova, 28 maggio 2026» e la riga sotto diceva «Padova».
   Adesso la data sta sulla locandina come l'etichetta di categoria sta sulla
   copertina di un articolo, e sotto resta il nome della tappa. */
.gl-evento-card {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-4);
  text-decoration: none;
  color: inherit;
}

.gl-evento-card__media {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--ds-radius-2);
  /* Bianco fisso, non un token di superficie: le locandine hanno cornici
     chiare e in tema scuro galleggerebbero in un ritaglio nero. */
  background-color: var(--gml-poster-bg);
}

.gl-evento-card__img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  display: block;
}

.gl-evento-card__corpo {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-1);
}

/* Il titolo dell'incontro è contenuto, quindi serif, e si accende al
   passaggio come il titolo di un articolo: le due schede rispondono allo
   stesso modo perché fanno la stessa promessa.

   Il tetto di tre righe tiene insieme la griglia, come sulle card degli
   articoli: questi titoli vanno da tre parole («Come in alto così in basso»)
   a diciotto, e senza il tetto una riga di quattro schede si scalerebbe
   dietro la più lunga. */
.gl-evento-card__titolo {
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--ds-duration) var(--gml-ease);
}

.gl-evento-card:hover .gl-evento-card__titolo {
  color: var(--ds-brand);
}

/* Il campo dietro la locandina non risponde al passaggio. Ci ho provato con
   un velo e il bianco smetteva di essere bianco: queste grafiche hanno il
   fondo bianco stampato dentro, e la plancia deve continuarlo senza giunta.
   Basta una tinta al 7% perché si veda il rettangolo dove finisce l'immagine
   e comincia il riquadro. */

@media (prefers-reduced-motion: reduce) {
  .gl-evento-card__titolo {
    transition: none;
  }
}

/* La sala in una targhetta blu, sotto la locandina e sopra la riga di data e
   città: è lo stesso oggetto dell'etichetta di categoria su una copertina
   d'articolo, e questa è la forma che il sito ha già per dire dove.

   Sotto il titolo ci era finita per un giro, come riga grigia a 10px con la
   crenatura aperta: faceva 4.76:1, che passa la soglia solo perché la soglia
   non guarda il corpo, e «Hotel Ibis Styles Roma Eur» a quella misura si
   decifra invece di leggersi. Sul blu pieno fa 7.84:1 a 12px. */
.gl-evento-card__luogo {
  align-self: start;
  padding: var(--ds-space-1) var(--ds-space-3);
  background-color: var(--gml-blue);
  color: var(--gml-header-fg);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Sul campo blu la targhetta portava lo stesso blu del campo e spariva: la
   sala restava scritta, ma come testo sciolto invece che su una piastrina.
   E' successo il 16 settembre 2026, quando «Prossimi eventi» in home e'
   passata a questa scheda: fin li' la scheda aveva vissuto solo su fondo
   chiaro, dove il blu pieno stacca da se'. Il blu profondo e' lo stesso che
   la fascia delle note usa al passaggio, ed e' il modo che questo sito ha
   gia' per far staccare qualcosa restando sul pieno. */
.gl-band .gl-evento-card__luogo {
  background-color: var(--gml-blu-fondo);
}

/* Città e data alla stessa taglia della sala qui sopra, 12 invece di 10.
   Su questa scheda sono la stessa cosa detta in due righe — dove si va e
   quando — e a 10 la seconda si leggeva come una nota della prima. Solo qui:
   `.gl-meta` vale anche sopra i titoli della home, dove sta accanto a un
   titolo grande e i 10 sono giusti. */
.gl-evento-card .gl-meta {
  font-size: var(--ds-font-small-size);
}

/* ── La griglia degli eventi: quattro per riga, e quattro restano ─────────
   La leggono tutte e due le griglie di /eventi, i prossimi e i passati: sono
   le stesse schede, e due passi diversi sulla stessa pagina si leggono come
   due cose diverse.
   `cols: 4` mette il tetto e `--ds-grid-floor` decide quando la riga cade a
   tre, due e una. Il pavimento di sistema è 24rem e su una traccia da 1296
   vince lui — max(384, 306) = 384, e passano tre colonne. A 15rem vince il
   quarto della traccia: quattro colonne, larghe 306 a 1440 e 422 a 1920.

   Prima erano sette, perché la griglia contava `auto` con un pavimento da
   10rem: una locandina larga 164 pixel non si legge, si riconosce. */
.gl-eventi-archivio {
  --ds-grid-floor: 15rem;
}

/* ── La locandina, sulla pagina dell'evento ───────────────────────────────
   Grande abbastanza da leggerla: sala, ora, indirizzo e prenotazioni stanno
   scritti dentro l'immagine, e sulla griglia quella stessa immagine e' alta
   duecento pixel. Il tetto e' la misura di lettura, perche' una locandina
   larga un metro non si legge meglio, si guarda da piu' lontano.

   Il fondo e' bianco fisso come nelle schede: sono grafiche chiare con
   cornici chiare, e in tema scuro galleggerebbero in un ritaglio nero. */
/* Su una colonna la locandina non deve mangiare la prima schermata, quindi ha
   un tetto e si centra. Da 64rem in su il tetto cade: la colonna che la tiene
   è già cinque dodicesimi della traccia, e un secondo limite sopra il primo
   la stringeva a 544 dentro uno spazio da 520 in giù, cioè non serviva a
   niente e complicava. Le due righe stanno qui e non nella sezione delle
   larghezze perché una regola scritta dopo una media query la batte per sola
   posizione, ed è la terza volta che questo foglio me lo fa pagare. */
.gl-evento-locandina {
  background-color: var(--gml-poster-bg);
  /* `inline-size: 100%` esplicito accanto al margine automatico: su una
     griglia un margine `auto` spegne lo stretch dell'elemento, e la plancia
     restava senza una sorgente per la larghezza — dentro una traccia da 520
     usciva 0 per 0, perché il segnaposto che tiene ha solo un rapporto e
     nessuna misura propria da dare. */
  inline-size: 100%;
  max-inline-size: 34rem;
  margin-inline: auto;
}

@media (min-width: 64rem) {
  .gl-evento-locandina {
    max-inline-size: none;
  }
}

/* Figlia diretta e non discendente. `.gl-evento-locandina img` prendeva anche
   il marchio dentro il segnaposto, che è due livelli più giù, e con una
   specificità più alta della sua: l'aquila usciva larga 520 su una plancia da
   520, cioè grande quanto tutto il riquadro. Il `>` la riporta a valere per
   la locandina e basta. */
.gl-evento-locandina > img {
  inline-size: 100%;
  block-size: auto;
  display: block;
}

/* ── La fascia d'intestazione: la barra del sito, portata dal Next ────────
   Fissa, blu in entrambi i temi, marchio bianco piatto appoggiato sul blu
   (niente avatar: il tondo chiaro sotto lo farebbe sparire), voci in
   maiuscoletto col filo che cresce, social da 1024 in su, burger a ogni
   misura: il menu è destinato a crescere e una barra di link non basterebbe. */
.gl-header {
  position: fixed;
  inset-inline: 0;
  inset-block-start: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-6);
  min-block-size: var(--ds-space-16);
  /* Il margine della pagina, non un numero suo: la barra è fissa e non passa
     dalla banda di OS, quindi senza questa riga il marchio e la prima parola
     della pagina partono da due ascisse diverse — misurate 45 contro 117 a
     1440, che è il difetto che OS stesso chiama "due numeri che decidono una
     cosa sola". */
  padding-inline: var(--gml-bordo);
  background-color: var(--gml-blue);
  color: var(--gml-header-fg);
}

.gl-header__brand {
  display: flex;
  align-items: center;
  gap: var(--ds-space-3);
  color: inherit;
  text-decoration: none;
  /* Le stesse tre misure del marchio nel piede, lette dallo stesso nome: e'
     un nome solo e si scrive in un modo solo. La barra lo lasciava al ruolo
     etichetta, 14 peso 400, mentre il piede lo dava a 16 peso 400. */
  font-family: var(--gml-marchio-face);
  font-size: var(--gml-marchio-size);
  font-weight: var(--gml-marchio-weight);
  line-height: var(--gml-marchio-leading);
  letter-spacing: var(--gml-marchio-tracking);
}

.gl-header__mark {
  block-size: var(--ds-space-10);
  inline-size: auto;
  display: block;
}

.gl-header__right {
  display: flex;
  align-items: center;
  gap: var(--ds-space-6);
}

.gl-header__nav {
  display: none;
  align-items: center;
  gap: var(--ds-space-6);
}

@media (min-width: 48rem) {
  .gl-header__nav {
    display: flex;
  }
}

.gl-nav-link {
  position: relative;
  font-family: var(--ds-font-overline-face);
  font-size: var(--ds-font-overline-size);
  font-weight: var(--ds-font-overline-weight);
  letter-spacing: var(--ds-font-overline-tracking);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--gml-header-fg-quiet);
  white-space: nowrap;
  padding-block-end: var(--ds-space-1);
  transition: color var(--ds-duration) var(--gml-ease);
}

.gl-nav-link::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 1px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--ds-duration) var(--gml-ease);
}

.gl-nav-link:hover,
.gl-nav-link:focus-visible {
  color: var(--gml-header-fg);
}

.gl-nav-link:hover::after,
.gl-nav-link:focus-visible::after {
  transform: scaleX(1);
}

/* La pagina corrente tiene il filo, pieno: è l'unico modo per distinguerla
   a colpo d'occhio da una voce che sta solo sotto il mouse. */
.gl-nav-link[aria-current="page"] {
  color: var(--gml-header-fg);
}

.gl-nav-link[aria-current="page"]::after {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .gl-nav-link::after {
    transition: none;
  }
}

/* Le social lasciano la barra sotto i 1024: con marchio, sei voci, cinque
   icone e burger il contenuto non ci sta. Restano nell'overlay e nel piede. */
.gl-header__social {
  display: none;
  align-items: center;
  gap: var(--ds-space-1);
}

@media (min-width: 64rem) {
  .gl-header__social {
    display: flex;
  }
}

.gl-icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--ds-size-2);
  block-size: var(--ds-size-2);
  border-radius: var(--ds-radius-2);
  color: inherit;
  transition: background-color var(--ds-duration) var(--gml-ease);
}

.gl-icon-link:hover {
  background-color: var(--ds-surface-hover);
}

/* Il burger: due linee che diventano una X. */
.gl-burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--ds-size-2);
  block-size: var(--ds-size-2);
  padding: 0;
  border: 0;
  border-radius: var(--ds-radius-2);
  background: none;
  color: inherit;
  cursor: pointer;
  transition: background-color var(--ds-duration) var(--gml-ease);
}

.gl-burger:hover {
  background-color: var(--ds-surface-hover);
}

.gl-burger__box {
  /* Lo spessore della riga e' un nome perche' serve due volte: qui la riga
     lo usa per essere alta, e la croce per sapere di quanto deve scendere. */
  --gl-burger-riga: 2px;

  position: relative;
  inline-size: var(--ds-space-5);
  block-size: var(--ds-space-3);
  display: block;
}

.gl-burger__line {
  position: absolute;
  inset-inline: 0;
  block-size: var(--gl-burger-riga);
  border-radius: var(--ds-radius-full);
  background-color: currentColor;
  transition: transform var(--ds-duration) var(--gml-ease);
}

.gl-burger__line:first-child { inset-block-start: 0; }
.gl-burger__line:last-child { inset-block-end: 0; }

/* La croce: le due righe si incontrano in mezzo alla scatola, quindi ognuna
   scende di meta' scatola meno mezza riga.

   Era scritto `5px`, che e' quel conto risolto a mano quando la scatola era
   12: (12 - 2) / 2. Ma la scatola e' in rem e cresce col testo che il lettore
   sceglie — a 130% diventa 15,6 e le righe restavano indietro di quasi due
   pixel ciascuna, cioe' non si incontravano piu' e la X usciva storta.
   Segnalato dal proprietario su iPhone. Il conto scritto com'e' vale a
   qualunque misura. */
.gl-burger.is-open .gl-burger__line:first-child {
  transform: translateY(calc((var(--ds-space-3) - var(--gl-burger-riga)) / 2)) rotate(45deg);
}

.gl-burger.is-open .gl-burger__line:last-child {
  transform: translateY(calc((var(--gl-burger-riga) - var(--ds-space-3)) / 2)) rotate(-45deg);
}

/* ── L'overlay a tutto schermo, a ogni misura ─────────────────────────────
   Fratello della barra, così il burger resta cliccabile a menu aperto. I
   link vengono scoperti dall'alto con una maschera, uno dopo l'altro. */
.gl-overlay {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* `safe center`, non `center`. Centrato e basta, quando il contenuto e' piu'
     alto dello schermo il di piu' esce da TUTTE E DUE le parti — e quello che
     esce sopra un contenitore che scorre non lo raggiunge nessuno, perche' lo
     scorrimento non va sotto zero. Su un iPhone 14 Pro Max, che non e' un
     telefono basso, «Home» spariva cosi'. `safe` dice: centra finche' ci sta,
     e appena non ci sta comportati come se fosse `start`. */
  justify-content: safe center;
  gap: var(--ds-space-6);
  /* Da quando il piede porta anche le modalita', la colonna puo' superare lo
     schermo su un telefono basso o col testo al 130%: senza questo l'ultima
     riga non si raggiunge. */
  overflow-y: auto;
  /* In cima ci va l'altezza della barra, che e' fissa e sta SOPRA il menu:
     finche' le voci stavano centrate non si vedeva, ma col testo al 130% il
     menu comincia dall'alto e l'alto e' dietro la barra — «Home» e «Chi
     sono» sparivano, fotografate su iPhone. L'altezza la misura
     `gl-menu.js`, perche' cambia con la tacca del telefono e con la misura
     del testo scelta dal lettore. */
  padding-block-start: calc(var(--ds-space-6) + var(--gl-barra-h, 0px));
  padding-block-end: var(--ds-space-12);
  background-color: color-mix(in srgb, var(--ds-surface-0) 88%, transparent);
  backdrop-filter: blur(24px) saturate(1.5);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--ds-duration-slow) var(--gml-ease),
    visibility 0s linear var(--ds-duration-slow);
}

.gl-overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity var(--ds-duration-slow) var(--gml-ease),
    visibility 0s;
}

.gl-overlay__link {
  font-family: var(--ds-font-heading-2-face);
  font-size: var(--ds-font-heading-2-size);
  font-weight: var(--ds-font-heading-2-weight);
  line-height: 1.15;
  color: var(--ds-text-primary-neutral);
  text-decoration: none;
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--ds-duration-slow) var(--gml-ease);
}

.gl-overlay.is-open .gl-overlay__link {
  clip-path: inset(0 0 0 0);
}

.gl-overlay__link:hover {
  color: var(--ds-text-secondary-neutral);
}

/* La pagina in cui sei porta il blu del sito, non un grigio: era secondaria,
   cioe' lo stesso trattamento di una voce sotto il puntatore, e la voce
   corrente si distingueva da quella che stai per premere solo finche' non ci
   passavi sopra. */
.gl-overlay__link[aria-current="page"] {
  color: var(--ds-brand);
}

.gl-overlay .gl-overlay__link:nth-child(2) { transition-delay: 90ms; }
.gl-overlay .gl-overlay__link:nth-child(3) { transition-delay: 180ms; }
.gl-overlay .gl-overlay__link:nth-child(4) { transition-delay: 270ms; }
.gl-overlay .gl-overlay__link:nth-child(5) { transition-delay: 360ms; }
.gl-overlay .gl-overlay__link:nth-child(6) { transition-delay: 450ms; }

/* Piede dell'overlay: le social vivono qui. In assoluto, così i link
   restano centrati sull'asse e non si spostano per fargli spazio. */
/* Il piede dell'overlay: i social sopra, le modalita' di visione sotto.
   
   Non e' piu' inchiodato al fondo con `position: absolute`. Lo era finche'
   teneva una riga sola — cinque marchi e un bottone — e a fondo pagina ci
   stava sempre; da quando ci sta dentro il gruppo delle modalita', che sono
   tre righe, quell'ancoraggio lo faceva salire sopra i rimandi del menu e
   «Contatti» finiva sotto «Modalita' di visione». Adesso e' un figlio della
   colonna come i rimandi, quindi la colonna lo conta e nessuno si sovrappone
   a nessuno. */
.gl-overlay__footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Fra i social e le modalita' respira piu' di quanto respirino i rimandi
     fra loro: sono due blocchi diversi, non due voci dello stesso elenco. */
  gap: var(--ds-space-8);
  /* E il piede sta LONTANO dal menu. I rimandi sono la cosa per cui si apre
     l'overlay; i social e le modalita' sono quel che si trova dopo averli
     letti, e appiccicati sotto l'ultima voce sembravano la settima. */
  margin-block-start: var(--ds-space-16);
}

/* Il gruppo non prende tutta la larghezza dell'overlay: tre righe nome-comando
   larghe quanto lo schermo si leggono come una tabella, e la colonna dei nomi
   finisce lontanissima dai comandi. */
.gl-overlay__social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--ds-space-3);
}

.gl-overlay__modes {
  /* Misurata, non scelta a occhio: la fila delle tre misure del testo vuole
     287px per stare su una riga, la colonna dei nomi ne prende 75 e il vuoto
     fra le due 16 — 378 in tutto, e 24rem sono 384.

     Sul viewport e non in percentuale: il piede e' una colonna centrata che
     si stringe sul contenuto, quindi un `100%` qui dentro si misurava sulla
     riga dei social — 320px — e il tetto non mordeva mai. */
  /* Quanto gli serve, non un numero scelto: la griglia dentro e' `auto
     max-content`, quindi il gruppo e' largo i nomi piu' il piu' largo dei tre
     menu. Il tetto sul viewport resta per il telefono stretto. */
  inline-size: max-content;
  max-inline-size: calc(100vw - var(--ds-space-8));
}

/* Le griglie di card respirano a 24, il gap-6 del Next: le card senza
   scatola si toccano con l'aria, non con un filo. */
.gl-cards {
  --ds-grid-gap: var(--ds-space-6);
}

/* La barra è fissa: tutto il sito comincia sotto di lei.

   Tranne quando la prima cosa della pagina è una campitura dello stesso blu
   della barra. Lì il pavimento va tolto e il campo deve scorrere fin sotto,
   perché le due si leggano come un solo blocco invece che come una barra
   appoggiata su una sezione: il posto della barra diventa il padding alto
   della campitura (`.gl-apertura`), che è la stessa misura in un posto solo
   diverso. `page(flush: true)` è la leva. */
.gl-under-bar {
  padding-block-start: var(--ds-space-16);
}

.gl-under-bar--flush {
  padding-block-start: 0;
}

/* ── Il titolo di un articolo torna alla voce del contenuto ──────────────
   La regola della direzione nuova è che l'architettura parla sans e il
   contenuto parla serif, e il titolo di primo livello sta di norma dalla
   parte dell'architettura: è l'insegna della home, il nome di una pagina.

   Su un articolo no. Lì l'h1 È il pezzo, e con il ruolo dell'architettura
   usciva in Manrope da 95px con la crenatura chiusa — cinque righe di sans
   sopra un occhiello serif, cioè le due voci scambiate di posto. La scala
   qui sotto è quella di prima della direzione nuova, che era stata misurata
   su Domine: il serif ha più colore in pagina di un sans e alla stessa
   misura pesa di più, quindi scende di taglia e non sale sopra il semibold.

   Si ri-puntano i token del ruolo dentro uno scope, che è il meccanismo con
   cui OS stesso cambia pelle fra le superfici: nessun selettore del sistema
   riscritto, e il giorno in cui la scala cambia, cambia da un posto solo. */
.gl-article-head {
  --ds-font-heading-1-face: var(--ds-typeface-display);
  --ds-font-heading-1-size: clamp(2.25rem, calc(var(--ds-viewport) * 0.045), 3.75rem);
  --ds-font-heading-1-weight: var(--ds-weight-intense);
  --ds-font-heading-1-tracking: -0.01em;
  --ds-font-heading-1-leading: 1.12;
}

/* ── L'articolo: la testata del Next, tutta a sinistra sulla colonna di
   lettura. Prima categoria e data stavano centrate e minuscole sopra un
   titolo enorme, senza niente in mezzo a fare da gradino. */
.gl-kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ds-space-3);
}

/* Data e minuti di lettura in maiuscoletto spaziato, come ogni altro
   metadato: sono la stessa cosa che sulle schede sta in fondo, e leggerla in
   due voci diverse a seconda della pagina e' quel che rende un sito una
   raccolta di pagine invece che un sito. */
.gl-kicker time,
.gl-kicker > span {
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.gl-kicker__cat {
  padding: var(--ds-space-1) var(--ds-space-3);
  background-color: var(--gml-blue);
  color: var(--gml-header-fg);
  border-radius: var(--ds-radius-1);
  font-family: var(--ds-font-overline-face);
  font-size: var(--ds-font-overline-size);
  font-weight: var(--ds-font-overline-weight);
  letter-spacing: var(--ds-font-overline-tracking);
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color var(--ds-duration) var(--gml-ease);
}

.gl-kicker__cat:hover {
  background-color: var(--gml-blue-bright);
}

.gl-article-byline {
  padding-block-start: var(--ds-space-4);
  border-block-start: 1px solid var(--ds-border-subtle);
}

/* Il marchio di una testata, quando la firma non è una faccia. Figlio
   diretto, così non prende anche l'immagine dentro l'avatar del sistema, che
   sta due livelli più giù e le sue misure ce l'ha già.

   Alto quanto l'avatar sarebbe stato, largo quanto viene: le due firme stanno
   sulla stessa riga senza che l'una salti rispetto all'altra, e un marchio
   che è largo il triplo di quanto è alto resta largo il triplo invece di
   entrare in un cerchio. */
.gl-article-byline > .ds-row > img {
  block-size: var(--ds-size-4);
  inline-size: auto;
  max-inline-size: 12rem;
  object-fit: contain;
  display: block;
}

/* La copertina: più larga della colonna di lettura, un respiro fra testata
   e testo. */
/* La copertina prende la colonna dell'articolo. Aveva una misura sua e due
   margini automatici perche' stava dentro una sezione a misura di lettura e
   doveva uscirne; adesso la colonna e' gia' quella larghezza. */
.gl-article-lead {
  margin-inline: 0;
}

/* ── L'articolo e la sua rubrica ──────────────────────────────────────────
   La colonna di OS porta la propria larghezza, 16rem, quindi la riga non ha
   misure: il pezzo si prende quel che resta. `1 1 32rem` e non `1 1 0`
   perche' e' anche la larghezza sotto la quale i due non stanno piu'
   affiancati, e il `wrap` della riga li impila senza una soglia scritta.

   La prosa dentro tiene la sua misura di lettura da sola, 48ch: la colonna
   puo' essere larga quanto vuole, le righe restano leggibili. */
.gl-article-colonna {
  flex: 1 1 32rem;
  min-inline-size: 0;
}

/* La colonna di lettura lunga di questo sito: il corpo di un articolo, e il
   testo delle note della redazione. È più larga delle 48ch di sistema e va
   giustificata. Le due cose stanno insieme: giustificare una riga corta apre
   fiumi bianchi in mezzo al testo, perché lo spazio da distribuire è tanto e
   le parole per assorbirlo sono poche.

   `hyphens: auto` non è un di più, è la condizione. Senza sillabazione una
   riga giustificata in italiano — dove le parole sono lunghe — si allarga per
   far quadrare il conto, ed è esattamente il difetto che il giustificato ha
   fama di produrre. Il documento dichiara `lang="it"`, quindi il browser sa
   con quali regole spezzare.

   Una classe sola e non una per pagina: le due pagine vogliono lo stesso
   trattamento, e scritto in due punti sarebbe rimasto lo stesso finché
   qualcuno non ne avesse cambiato uno. Le dieci pagine fisse restano
   allineate a sinistra sulla misura di sistema: sono documenti brevi, non
   letture lunghe. */
.gl-lettura {
  /* Il testo arriva dove arriva il contenitore. La misura non è più in `ch`
     ma un tetto in pixel: prende tutta la colonna in cui sta — nell'articolo
     944px a 1440 di finestra, gli stessi della copertina sopra — e si ferma a
     1000 sugli schermi più larghi, dove altrimenti continuerebbe a crescere.

     Misurato: 97 caratteri per riga invece di 73. È molto sopra la misura
     comoda, e va scritto invece che nascosto — è una scelta di impaginazione,
     non un numero che qualcuno ha calcolato: il pezzo e la sua immagine
     stanno nella stessa colonna, e una riga che finiva 260 pixel prima del
     bordo della fotografia lasciava un vuoto verticale lungo tutto
     l'articolo. Il giustificato e la sillabazione qui sotto sono quel che
     rende sostenibile una riga di questa lunghezza. */
  --ds-prose-measure: 62.5rem;
}

/* Il giustificato regge finche' la riga e' lunga. Su un telefono la colonna
   sta sotto i 360 pixel e ci stanno sette o otto parole: per far tornare i
   conti il browser allarga gli spazi fino a lasciare buchi in mezzo alle
   righe, e il testo si legge storto. Li' il testo va a bandiera, e la
   sillabazione resta perche' e' quella che tiene corta la coda a destra.

   La soglia sta qui e non nella sezione «Le larghezze» piu' su, per la stessa
   ragione della fascia delle note: quella sezione viene PRIMA nel foglio, e
   una regola scritta dopo batte una media query scritta prima. */
.gl-lettura p,
.gl-lettura li {
  text-align: left;
  hyphens: auto;
}

@media (min-width: 48rem) {
  .gl-lettura p,
  .gl-lettura li {
    text-align: justify;
  }
}

/* ── La rubrica: la colonna di OS, vestita da editoriale ──────────────────
   Nessun componente nuovo. `sidebar()` e' gia' gruppi con un nome e righe che
   portano un indirizzo, e qui si ri-puntano i suoi token, che e' lo stesso
   meccanismo con cui la fascia d'intestazione e' blu.

   Cosa cambia rispetto a un pannello: il titolo di gruppo diventa un
   occhiello, perche' e' la stessa etichetta che apre ogni sezione del sito;
   le righe scendono al corpo dell'etichetta, perche' sono un indice e non
   una navigazione da premere tutto il giorno; e il tier delle righe scende,
   perche' 40px di altezza per riga su venticinque righe sono mille pixel di
   colonna per un elenco. */
.gl-rubrica {
  --ds-sidebar-width: 16rem;
  --ds-sidebar-inset: 0px;
  --ds-sidebar-tier: var(--ds-size-1);
  --ds-sidebar-heading-face: var(--ds-font-overline-face);
  --ds-sidebar-heading-size: var(--ds-font-overline-size);
  --ds-sidebar-heading-weight: var(--ds-font-overline-weight);
  --ds-sidebar-heading-tracking: var(--ds-font-overline-tracking);
  --ds-sidebar-heading-ink: var(--ds-text-secondary-neutral);
  --ds-sidebar-item-size: var(--ds-font-label-size);
  --ds-sidebar-item-leading: 1.35;
  /* Il fondo della pagina, non una superficie sua: la rubrica sta dentro
     l'articolo, non accanto a una schermata. */
  background-color: transparent;
}

/* Il filetto sopra ogni gruppo, che e' il segno con cui questo sito separa:
   lo stesso 1px del filo che divide le righe delle categorie e le celle
   dell'archivio. Il primo non ce l'ha, o la colonna aprirebbe con una riga
   sotto il titolo dell'articolo. */
.gl-rubrica .ds-sidebar__group + .ds-sidebar__group {
  border-block-start: 1px solid var(--gml-filo);
  padding-block-start: var(--ds-space-5);
  margin-block-start: var(--ds-space-5);
}

/* La copertina non viene gonfiata, come nessun'altra fotografia del sito.
   140 delle 153 sono piu' strette dei 944 della colonna — la mediana e' 556,
   la piu' piccola 283 — e tirarle a piena larghezza le sfoca: una 366x348
   stampata a 944 e' ingrandita due volte e mezza, ed e' la prima cosa che si
   vede aprendo l'articolo.

   Quella grande riempie la colonna come prima. Quella piccola resta piccola,
   allineata a sinistra col titolo sopra di lei: e' una fotografia che non c'e'
   tutta, e mostrarla per quel che e' e' meglio che ingrandirla finche' i
   pixel si vedono. */
.gl-article-lead img {
  inline-size: auto;
  max-inline-size: 100%;
  block-size: auto;
  /* Un tetto anche qui, piu' alto di quello delle fotografie nel testo: 640
     pixel lasciano intatta una copertina larga — una 16:10 a piena colonna e'
     alta 590 — e fermano le verticali, che senza arrivavano a 1417, uno
     schermo e mezzo prima della prima riga dell'articolo. */
  max-block-size: 40rem;
  display: block;
  border-radius: var(--ds-radius-3);
}

/* L'allegato PDF: una riga, non una card. È un'appendice al pezzo, mentre
   in testata è l'azione: sul sito attuale il PDF È la pagina. */
.gl-article-attachment {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-4);
  margin-block-start: var(--ds-space-12);
  padding: var(--ds-space-6);
  background-color: var(--ds-surface-1);
  border: 1px solid var(--ds-border-subtle);
  border-radius: var(--ds-radius-3);
}

.gl-article-attachment p {
  margin: 0;
}

/* Il selettore del tema, nel piede dell'overlay come nel Next. Le due icone
   si scambiano sull'attributo del tema. */
.gl-overlay__footer-label {
  font-family: var(--ds-font-overline-face);
  font-size: var(--ds-font-overline-size);
  letter-spacing: var(--ds-font-overline-tracking);
  text-transform: uppercase;
  color: var(--ds-text-secondary-neutral);
}


/* ── L'indice del blog: ricerca, contatore, filtri ────────────────────────
   La ricerca non prende tutta la riga: a piena larghezza sembrerebbe il
   campo principale della pagina, e il campo principale sono gli articoli. */
/* Il campo prende la riga e il conteggio va sotto. Prima dividevano la riga e
   il campo aveva un tetto di 22rem: dentro una traccia da 1296 restava un
   riquadro corto in mezzo alla pagina, e una ricerca corta sembra un filtro
   accessorio invece della prima cosa che si fa in un archivio di 148 pezzi. */
.gl-blog-toolbar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--ds-space-3);
}

.gl-blog-toolbar__search {
  inline-size: 100%;
}

.gl-blog-toolbar__count {
  margin: 0;
  margin-inline-start: auto;
  color: var(--ds-text-secondary-neutral);
}

/* ── I filtri dell'archivio: filterBar di OS, avvolta, vestita ───────────
   Dal 4 settembre 2026 la fila e' `ds-filter-bar--wrap`: le righe, il tier
   piccolo, il tab stop unico con le frecce, il portatore che dice change e
   il conteggio nella meta' subordinata sono del sistema. Qui il vestito:
   il campo del chip acceso sul blu (token della coppia inverse, nello
   scope del chip), piu' (1) il maiuscolo con la crenatura aperta, come
   ogni volta che questo sito nomina una categoria: candidata `chip-case`. */
.gl-under-bar .ds-filter-bar__chip {
  --ds-inverse: var(--gml-blue);
  --ds-on-inverse: var(--gml-header-fg);
  /* Un filtro e' un'azione, e un'azione in grigio si legge come
     disattivata: inchiostro pieno anche da spento. */
  --ds-filter-bar-chip-ink: var(--ds-text-primary-neutral);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  /* (2) l'angolo del progetto: il pill di OS e' radius-full, che il modo
     square non tocca. Candidata: il raggio del chip come token. */
  border-radius: var(--ds-radius-2);
}

/* The lit chip keeps the system's white. The rule above names the ink for
   every chip at the same weight as OS names it for the lit one, and this
   sheet comes later, so in light mode the lit chip read dark on blue
   (owner's screenshot, 10 September 2026); dark mode hid it because the
   primary ink there is near white. One weight up, the pair's own ink. */
.gl-under-bar .ds-filter-bar__chip[aria-checked='true'] {
  --ds-filter-bar-chip-ink: var(--ds-on-inverse);
}

.gl-under-bar .ds-filter-bar__chip[aria-checked='true'] .ds-filter-bar__count {
  --ds-filter-bar-count-ink: var(--gml-header-fg-quiet);
}

/* ── La riga che annuncia le note della redazione ─────────────────────────
   Sticky sotto la barra fissa mentre l'archivio scorre: è l'unica cosa della
   pagina che vale a metà lettura quanto in cima, perché dice come leggere
   gli articoli che stai già scorrendo.

   Sfonda fino al bordo della finestra e tiene il testo in colonna col resto
   della pagina: sta fuori dalla sezione, quindi la traccia non gliela dà
   nessuno e se la prende da `--gml-bordo`, che è la stessa misura da cui
   comincia ogni altra prima lettera del sito.

   Bassa. Sta in cima dall'inizio e ci resta per tutto l'archivio, e una
   fascia che non se ne va deve pesare quanto una riga: 40 pixel invece di
   63, che sono i 20 di margine tornati a 8. */
/* Tre e non uno. La scheda di OS stende il suo collegamento su tutta l'area
   con un `::after` a `z-index: 1`, e a parita' di quota vince chi viene dopo
   nel documento: gli articoli, che stanno sotto la fascia nel sorgente e le
   scorrono sopra qui. La striscia restava visibile e smetteva di essere sua,
   e un clic apriva l'articolo che in quel momento le passava sotto — su 21
   punti misurati lungo la striscia, 19 finivano su una scheda. Tre sta sopra
   le schede e sotto il velo (10), la barra (20) e i cookie (30). */
.gl-nota-band {
  position: sticky;
  inset-block-start: var(--ds-space-16);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: var(--ds-space-4);
  padding-block: var(--ds-space-2);
  /* Larga quanto la traccia, non quanto la finestra: nel flusso sta fra il
     titolo e la ricerca, e li' un campo che sfonda fino ai bordi dello schermo
     e' piu' largo di tutto quel che ha sopra e sotto. I margini sono il bordo
     della traccia, quindi la fascia comincia dove comincia il titolo. */
  margin-inline: var(--gml-bordo);
  /* Il respiro dentro il campo, che nel flusso e' un campo con due bordi
     visibili e non una striscia da un capo all'altro dello schermo: senza,
     l'etichetta tocca il bordo blu a sinistra e la freccia lo tocca a destra.
     Ferma in alto torna a essere il bordo della traccia, perche' li' i bordi
     del campo sono quelli della finestra e il testo deve stare in colonna col
     resto della pagina. */
  padding-inline: var(--ds-space-4);
  /* Campo pieno e non una superficie tenue con un filo blu di lato. È la
     riga che dice come leggere gli articoli che stai già scorrendo, e su
     `--ds-surface-1` — che è il fondo della pagina spostato di un gradino —
     passava inosservata. Il taglio azzurro sotto è lo stesso dell'apertura
     della home: dice dove finisce il campo. */
  border-block-end: 3px solid var(--gml-blue-bright);
  background-color: var(--gml-blue);
  color: var(--ds-text-primary-neutral);
  text-decoration: none;
  transition: background-color var(--ds-duration) var(--gml-ease);
}

/* Two sizes, one element. In flow, between the title and the search, the
   band is a card: the note's title at heading size, 24 of padding above and
   below, the title free to wrap. Stuck under the bar it is the one line it
   was, 8 of padding and a long title cut with an ellipsis, because a strip
   that stays for the whole archive weighs what a line weighs (owner, 10
   September 2026). The padding and the size move with the system's
   duration, so the band settles rather than jumps when it lands. */
.gl-nota-band {
  flex-wrap: nowrap;
  /* The arrow at the far end and not beside the words, in both sizes: the
     band is read as a box with a way out at its edge, and the edge is where
     the eye goes looking for it. It used to come back beside the title once
     stuck, which made the way out move while the page scrolled (owner,
     16 September 2026). */
  justify-content: space-between;
  padding-block: var(--ds-space-6);
  padding-inline: var(--ds-space-6);
  border-radius: var(--ds-radius-2);
  transition:
    background-color var(--ds-duration) var(--gml-ease),
    padding var(--ds-duration) var(--gml-ease),
    border-radius var(--ds-duration) var(--gml-ease);
}

.gl-nota-band[data-fissa] {
  padding-block: var(--ds-space-2);
  border-radius: 0;
}

.gl-nota-band[data-fissa] .gl-nota-band__label {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ── L'indice del blog: titolo, fascia, ricerca ────────────────────────────
   Tre pezzi di pagina in colonna, e il contenitore esiste per una ragione
   sola: `order`. La fascia e' larga quanto la finestra, quindi non puo'
   stare dentro una sezione, e quel che il cliente vuole su uno schermo largo
   e' vederla fra il titolo e la ricerca invece che sopra ogni cosa. Su un
   telefono invece va bene dov'era, in cima e attaccata alla barra.
   Due posti, un elemento solo: duplicarla nel documento e nasconderne una
   col foglio vorrebbe dire due volte lo stesso collegamento, e chi legge con
   la tastiera o con la voce li incontra tutti e due.

   I margini delle due sezioni si annullano dove la fascia li rimpiazza: due
   sezioni attaccate fanno 96 sotto piu' 96 sopra, e fra un titolo e un campo
   di ricerca quella e' mezza schermata di niente. */
.gl-blog-testa {
  display: flex;
  flex-direction: column;
}

/* In cima, com'era: su un telefono la fascia e' la prima cosa sotto la barra
   fissa, quindi al primo sguardo e' gia' ferma dove restera'. */
.gl-blog-testa .gl-nota-band {
  order: -1;
}

/* Senza fascia in mezzo le due sezioni tornano una: il titolo non ha margine
   sotto e la ricerca porta i 32 dello stack che c'era prima. */
.gl-blog-testa__titolo {
  padding-block-end: 0;
}

.gl-blog-testa__corpo {
  padding-block-start: var(--ds-space-8);
}

/* La soglia sta qui e non nella sezione «Le larghezze» piu' su, per la stessa
   ragione della fascia: quella sezione viene PRIMA nel foglio, e una regola
   scritta dopo batte una media query scritta prima. */
@media (min-width: 48rem) {
  .gl-blog-testa .gl-nota-band {
    order: 0;
  }

  /* Fra il titolo e la fascia lo stesso passo che c'e' fra la fascia e la
     ricerca: la fascia divide due cose, e una divisione storta si legge come
     un errore di montaggio. */
  .gl-blog-testa__titolo {
    padding-block-end: var(--ds-space-8);
  }
}

/* Ferma in alto, invece, arriva ai bordi dello schermo: li' non ha piu' un
   titolo accanto a cui stare, ha la pagina che le scorre sotto, e una striscia
   che finisce prima del bordo lascia due tagli di fondo pagina ai lati.

   Il margine se ne va e diventa padding: la fascia cresce di 144 pixel e il
   testo dentro non si muove di uno. Cambia il campo, non la riga.

   `data-fissa` lo mette il bundle del sito guardando quando la fascia tocca la
   sua quota — il CSS non ha un selettore per «adesso e' incollata» — ed e' un
   attributo e non una classe apposta: `components.css` e' in CONTROLLED MODE e
   un nome nuovo nel vocabolario delle classi vuole il consenso scritto del
   proprietario, mentre uno stato che il sito si scrive addosso e il foglio
   legge e' lo stesso meccanismo dei sette `data-` che OS gia' emette. */
.gl-nota-band[data-fissa] {
  margin-inline: 0;
  padding-inline: var(--gml-bordo);
}

/* Il velo e non `--ds-surface-hover`. Quello di sistema è un nero al 4% di
   opacità, che su una superficie ferma è un grigio e qui no: questa fascia è
   `sticky`, quindi al passaggio gli articoli le scorrevano DENTRO. Il velo è
   una tinta piena, mescolata col fondo della pagina invece che appoggiata
   sopra, e resta opaca mentre la pagina le passa sotto. */
/* Al passaggio il blu si scurisce invece di schiarirsi: la fascia è `sticky`
   e gli articoli le scorrono sotto, quindi il fondo deve restare pieno. */
.gl-nota-band:hover {
  background-color: var(--gml-blu-fondo);
}

/* The title at heading 5's size in flow, on the architecture's sans and
   not heading 5's own face, since the band is a way in and not the piece;
   the overline it was once stuck. White on the field either way: `.gl-band`
   has already turned the two neutral inks white. */
.gl-nota-band__label {
  font-family: var(--ds-font-overline-face);
  font-size: var(--ds-font-heading-5-size);
  font-weight: var(--ds-font-heading-5-weight);
  line-height: var(--ds-font-heading-5-leading);
  letter-spacing: var(--ds-font-heading-5-tracking);
  color: inherit;
  transition: font-size var(--ds-duration) var(--gml-ease);
}

.gl-nota-band[data-fissa] .gl-nota-band__label {
  font-family: var(--ds-font-overline-face);
  font-size: var(--ds-font-overline-size);
  font-weight: var(--ds-font-overline-weight);
  line-height: var(--ds-font-overline-leading);
  letter-spacing: var(--ds-font-overline-tracking);
  text-transform: uppercase;
}

/* Come l'etichetta qui sopra, e per lo stesso motivo, che a quel giro era
   stato applicato solo a lei: `--ds-brand` E' il blu del campo, quindi la
   freccia era dipinta del colore esatto del suo fondo — misurato, tutte e due
   rgb(11, 83, 148) — ed e' rimasta invisibile da quando la fascia e' un campo
   pieno. */
.gl-nota-band__go {
  color: inherit;
  /* The card's arrow at the title's size, the line's at the line's. */
  font-size: var(--ds-font-heading-5-size);
  line-height: var(--ds-font-heading-5-leading);
}

.gl-nota-band[data-fissa] .gl-nota-band__go {
  font-size: inherit;
  line-height: inherit;
}

/* Le note della redazione, sulla loro pagina: la firma chiude. */
.gl-nota__firma {
  margin: 0;
  font-style: italic;
  color: var(--ds-text-secondary-neutral);
}