/* PRESS-1 — la vetrina editoriale: i COMPONENTI DEL CONTENUTO.
 *
 * LA VETRINA NON EREDITA NIENTE DALLA SHELL. Non estende `core/base.html` — è
 * un SITO, servito su un altro dominio — quindi reset, token e font li porta
 * da sé. Da PRESS-THEME-T2a li porta `press-theme.css`, caricato PRIMA di
 * questo foglio da `press/portal/_base.html`: là il guscio e i token del
 * prototipo, qui articolo, blocchi, liste ed eventi sopra quei token.
 * `box-sizing` resta ripetuto qui: è la lezione del portale di catalog, dove i
 * campi sfondavano il contenitore di 24px per un reset che non c'era.
 *
 * NESSUN JAVASCRIPT NECESSARIO e nessun terzo: i font sono self-hosted, e un
 * sito che smette di leggersi perché un CDN non risponde è un sito chiuso.
 * L'unico script («Ascolta l'articolo», T2b-B) è un miglioramento progressivo.
 */

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

/* PRESS-THEME-T2a — I TOKEN DEL CONTENUTO SONO QUELLI DEL TEMA.
 *
 * Questo foglio arriva DOPO `press-theme.css` (lo carica `_base.html`, e solo
 * lei): i nomi `--press-*` restano, perché tutte le regole qui sotto li usano,
 * ma puntano ai token del prototipo. Con valori propri il contenuto avrebbe
 * avuto una tavolozza e il guscio un'altra — marrone e verde sulla stessa
 * pagina, senza un errore da nessuna parte. La resa del contenuto sul
 * prototipo (articolo, card, sezioni) è T2b: qui cambia solo da dove arrivano
 * colori e caratteri. */
:root {
  --press-ink: var(--ink);
  --press-muted: var(--muted);
  --press-line: var(--rule);
  --press-bg: var(--carta);
  --press-accent: var(--verde);
  /* La MISURA DI LETTURA: ~68 caratteri. Una riga più lunga costringe l'occhio
   * a cercare l'inizio della successiva, ed è la prima causa di abbandono su
   * un testo lungo. */
  --press-measure: 42rem;
  /* Un ELENCO non si legge riga per riga, si scorre: la misura di lettura lo
   * strozzerebbe in una colonna sola su uno schermo largo. */
  --press-wide: 64rem;
}

/* `body` È DEL TEMA (fondo, carattere, colore): una seconda regola qui
 * vincerebbe per ordine e toglierebbe il guscio a tutte le pagine. Il corpo di
 * lettura prende misura e interlinea dal prototipo (`.article-body`: 18px,
 * 1.75, `--ink-2`). */
.press-article,
.press-composed,
.press-list,
.press-latest {
  font-size: 1.125rem;
  line-height: 1.7;
}

.press-body { color: var(--ink-2); line-height: 1.75; }

.press-article {
  max-width: var(--press-measure);
  margin: 0 auto;
  padding: 3rem 1.25rem 5rem;
}

.press-head { margin-bottom: 2.5rem; }

.press-head h1 {
  /* Il titolo è il serif di testata, come `.article-head h1` del prototipo. */
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.9rem, 5vw, 2.75rem);
  line-height: 1.15;
  margin: 0 0 .75rem;
  letter-spacing: -0.01em;
}

.press-sub {
  font-size: 1.25rem;
  color: var(--press-muted);
  margin: 0 0 1rem;
  line-height: 1.45;
}

/* La firma e la data in un carattere diverso dal testo: sono metadati, e
 * distinguerli dal corpo è ciò che permette di saltarli leggendo. */
.press-byline, .press-date {
  font-family: var(--sans);
  font-size: .9375rem;
  color: var(--press-muted);
  margin: 0 0 .25rem;
}

.press-byline { font-weight: 600; color: var(--press-ink); }

/* La dicitura di trasparenza sta SOPRA il contenuto e si vede: un contenuto
 * sponsorizzato marcato in fondo è marcato per il regolamento, non per chi
 * legge. */
.press-disclosure {
  font-family: var(--sans);
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--press-accent);
  border: 1px solid var(--press-accent);
  border-radius: 3px;
  padding: .4rem .7rem;
  display: inline-block;
  margin: 0 0 1.5rem;
}

.press-body > * { margin: 0 0 1.5rem; }

.press-h {
  font-size: 1.5rem;
  line-height: 1.3;
  margin: 2.5rem 0 1rem;
}

.press-p { margin: 0 0 1.5rem; }

.press-quote {
  margin: 2.5rem 0;
  padding: 0 0 0 1.25rem;
  border-left: 3px solid var(--press-accent);
  font-size: 1.3rem;
  line-height: 1.5;
  font-style: italic;
}
.press-quote p { margin: 0 0 .5rem; }
.press-quote cite {
  display: block;
  font-size: .9375rem;
  font-style: normal;
  color: var(--press-muted);
  font-family: var(--sans);
}

/* ---------------------------------------------------------------------------
 * INTEGRAZIONI-2 G2 — LA FRASE IN RILIEVO e IL RIQUADRO DI CONDIVISIONE.
 *
 * Lo scheletro di `.share-box` è già nel tema (è del prototipo). Qui c'è ciò
 * che il prototipo non ha: la citazione in RILIEVO, e le pillole della
 * condivisione — che nel prototipo sono `<button>` e da noi sono LINK, quindi
 * la regola deve vestire tutti e due gli elementi o i tre link uscirebbero
 * come testo blu sottolineato accanto a un bottone a pillola.
 * ------------------------------------------------------------------------ */

.press-pullquote { margin: 3rem 0; padding: 0; }

/* Più grande della citazione normale, e con il filetto sui DUE lati: è ciò che
 * la fa leggere come una pausa nel testo invece che come un inciso. */
.press-quote--rilievo {
  border-left: 0;
  border-top: 2px solid var(--press-accent);
  border-bottom: 2px solid var(--press-accent);
  padding: 1.5rem 0;
  margin: 0;
  font-size: clamp(1.4rem, 3.2vw, 1.75rem);
  line-height: 1.35;
  text-align: center;
  text-wrap: pretty;
}

.press-pullquote-azioni {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1rem;
  align-items: center;
  justify-content: center;
  margin-top: 1rem;
}

.press-pullquote-invito {
  font-family: var(--sans);
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--press-muted);
}

.press-share-links { display: flex; gap: .5rem; flex-wrap: wrap; }

/* UNA SOLA REGOLA PER IL LINK E PER IL BOTTONE. `.press-share` sta su tutti e
 * tre i link delle reti e su «Copia link»: sono la stessa affordance, e due
 * regole separate divergerebbero al primo ritocco. */
.press-share {
  display: inline-block;
  border: 1px solid #c4d3c6;
  background: var(--carta);
  color: var(--press-ink);
  font-family: var(--sans);
  font-size: .84375rem;
  font-weight: 600;
  line-height: 1.2;
  padding: .625rem 1rem;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.press-share:hover,
.press-share:focus-visible { border-color: var(--press-accent); color: var(--press-accent); }
/* Durante la conferma di «Copiato» il bottone è `disabled`: non deve sembrare
 * rotto, deve sembrare che ha appena funzionato. */
.press-share--copia[disabled] { opacity: 1; border-color: var(--press-accent); color: var(--press-accent); }
/* `hidden` deve vincere su `display: inline-block`: un attributo non batte una
 * regola di `display` da solo. */
.press-share[hidden] { display: none; }

.press-share-box .press-share-sub {
  font-family: var(--sans);
  font-size: .84375rem;
  line-height: 1.55;
  color: var(--press-muted);
}

.press-figure { margin: 2.5rem 0; }
/* PRESS-COLLAUDO-1b — `max-width`, NON `width`.
 *
 * Con `width: 100%` un'immagine PIU' PICCOLA della colonna veniva INGRANDITA:
 * un logo o una foto a bassa risoluzione uscivano sgranati, e nell'anteprima
 * di collaudo il PNG di prova da 8x8 diventava un riquadro grigio alto mezzo
 * schermo. Con `max-width` una piccola resta alla sua misura e una grande si
 * adatta: nessuna immagine viene mai stirata oltre i suoi pixel.
 *
 * `height: auto` resta e serve: senza, un `height` dichiarato nell'HTML
 * deformerebbe le proporzioni appena la larghezza cambia.
 *
 * Vale anche per l'ANTEPRIMA in redazione: usa questi stessi template. */
.press-figure img {
  max-width: 100%;
  height: auto;
  /* CENTRATA NELLA COLONNA (PRESS-COLLAUDO-1c). `display: block` da solo
   * incolla a sinistra l'immagine piu' stretta della colonna: con il
   * `max-width` di 1b una foto piccola resta piccola, e restava piccola e
   * spostata. `margin-inline: auto` la mette al centro; la didascalia la
   * segue, o direbbe di un'immagine che sta da un'altra parte. */
  margin-inline: auto;
}

.press-figure { text-align: center; }
.press-figure figcaption { text-align: center; }
.press-figure figcaption,
.press-gallery figcaption {
  font-family: var(--sans);
  font-size: .875rem;
  color: var(--press-muted);
  margin-top: .5rem;
  line-height: 1.4;
}

/* Le immagini «wide» e «full» escono dalla misura di lettura: è il motivo per
 * cui esiste quel campo. Il testo resta stretto, la fotografia respira. */
.press-figure--wide { margin-inline: -4rem; }
.press-figure--full { margin-inline: calc(50% - 50vw); }

.press-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 1rem;
  margin: 2.5rem 0;
}
/* Stessa regola della figura: una foto piu' piccola della cella non si
 * ingrandisce. Esteso in PRESS-COLLAUDO-1c — in 1b la decisione firmata
 * nominava la sola figura dell'articolo, e le altre due superfici erano
 * rimaste indietro. */
.press-gallery img { max-width: 100%; height: auto; display: block; margin-inline: auto; }

.press-video a, .press-sources a { color: var(--press-accent); }

/* Il blocco di ripiego dell'import: TESTO PIANO, e si vede che è da
 * sistemare. Non si nasconde — un difetto invisibile non si corregge. */
.press-legacy {
  white-space: pre-wrap;
  word-break: break-word;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: .8125rem;
  background: #f6f6f6;
  border: 1px dashed var(--press-line);
  padding: 1rem;
  color: var(--press-muted);
}

.press-sources {
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--press-line);
  font-family: var(--sans);
  font-size: .9375rem;
}
.press-sources h2 {
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--press-muted);
  margin: 0 0 .75rem;
}
.press-sources ul { margin: 0; padding-left: 1.1rem; }
.press-sources li { margin-bottom: .35rem; }

/* ---------------------------------------------------------------------------
 * PRESS-2a — LE SUPERFICI CHE NON SONO UN ARTICOLO.
 *
 * Fino a qui il foglio vestiva una pagina sola. La regola `body` valeva
 * comunque per tutte, ed è esattamente ciò che ha reso il difetto invisibile:
 * home composta e liste avevano il carattere giusto e nient'altro — nessuna
 * misura, nessun respiro, i link blu di sistema — e in un test tutto passava,
 * perché il markup c'era. L'ha trovato uno scatto.
 *
 * La MISURA di lettura non vale qui: un elenco non si legge riga per riga come
 * un testo, si scorre. Il contenitore è più largo (`--press-wide`), e a 390 px
 * ogni griglia diventa una colonna sola.
 * ------------------------------------------------------------------------- */

.press-composed,
.press-list,
.press-latest {
  max-width: var(--press-wide);
  margin: 0 auto;
  padding: 3rem 1.25rem 5rem;
}

/* I titoli delle voci sono di lettura, non di corpo: carattere di sistema, che
 * a corpo grande sta in piedi meglio del serif su schermo. */
.press-list-title {
  font-family: var(--sans);
  line-height: 1.25;
  text-wrap: balance;
}

/* I LINK DELLA VETRINA NON SONO BLU E NON SONO SOTTOLINEATI A RIPOSO: il blu di
 * sistema è la firma di una pagina non vestita. La sottolineatura torna al
 * passaggio e al focus, dove serve a dire che è un bersaglio. */
.press-composed a,
.press-list a,
.press-latest a {
  color: inherit;
  text-decoration: none;
}

.press-composed a:hover,
.press-composed a:focus-visible,
.press-list a:hover,
.press-list a:focus-visible,
.press-latest a:hover,
.press-latest a:focus-visible {
  text-decoration: underline;
  text-underline-offset: .18em;
  color: var(--press-accent);
}

/* --- le liste (categoria, tag, archivio, autore) e il ripiego --- */

.press-list-title { font-size: clamp(1.6rem, 4vw, 2.25rem); margin: 0 0 .5rem; }

/* La biografia di un autore e la descrizione di una categoria fanno lo stesso
   mestiere — dire di che cosa parla questo elenco — e si vestono uguale. */
.press-author-bio,
.press-list-description {
  color: var(--press-muted);
  margin: 0 0 2.5rem;
  max-width: var(--press-measure);
}

.press-list-items { list-style: none; margin: 2rem 0 0; padding: 0; }

.press-list-item {
  border-top: 1px solid var(--press-line);
  padding: 1.5rem 0;
}

.press-list-item > a {
  font-family: var(--sans);
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.3;
  display: inline-block;
}

.press-list-excerpt { margin: .5rem 0 0; color: var(--press-muted); font-size: 1rem; }

.press-empty { color: var(--press-muted); margin-top: 2rem; }

/* La paginazione sono LINK, e devono sembrarlo: qui la sottolineatura a riposo
 * ci vuole, perché non c'è un titolo attorno che dica che si può cliccare. */
.press-pager {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 3rem;
  border-top: 1px solid var(--press-line);
  padding-top: 1.5rem;
  font-family: var(--sans);
  font-size: .9375rem;
}

.press-pager a { color: var(--press-accent); text-decoration: underline; }
.press-pager a[rel="next"] { margin-left: auto; }

/* --- i dati di un EVENTO, sull'articolo ---
 *
 * Stanno sopra il titolo perché data e luogo sono l'informazione per cui si
 * apre la pagina di un evento. Senza queste regole erano tre righe di testo
 * indistinguibili dal corpo, ed è così che si vedevano nello scatto. */

.press-event {
  font-family: var(--sans);
  border-left: 3px solid var(--press-accent);
  padding: .25rem 0 .25rem 1rem;
  margin: 0 0 1.75rem;
}

.press-event p { margin: 0; }
.press-event-when { font-size: 1.0625rem; font-weight: 600; }
.press-event-where { color: var(--press-muted); font-size: .9375rem; }

/* CONCLUSO NON VUOL DIRE SPARITO (D18): la pagina resta, e lo stato si legge.
 * Il grigio dice «passato» senza che nessuno debba leggere la data e fare il
 * conto. */
.press-event-over {
  display: inline-block;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--press-muted);
  border: 1px solid var(--press-line);
  border-radius: 3px;
  padding: .2rem .5rem;
  margin-bottom: .5rem !important;
}

.press-event--over { border-left-color: var(--press-line); }

/* PRESS-2c — L'ELENCO, e i LINK dentro il testo.
 *
 * Il rientro dell'elenco è quello del corpo, non uno in più: un elenco che
 * sporge rispetto ai paragrafi spezza la colonna di lettura.
 */

.press-list-block {
  margin: 0 0 1.5rem;
  padding-left: 1.4rem;
}

.press-list-block li { margin-bottom: .5rem; }

/* I LINK DEL CORPO SI VEDONO. In una lista si toglie la sottolineatura perché
 * lì il titolo è già il bersaglio; in un articolo no: un link che non si
 * distingue dal testo è un link che nessuno clicca, e l'intera ragione per cui
 * i run esistono è che i rimandi dell'archivio sopravvivano. */
.press-body a,
.press-list-block a {
  color: var(--press-accent);
  text-decoration: underline;
  text-underline-offset: .15em;
}

.press-body a:hover,
.press-body a:focus-visible,
.press-list-block a:hover,
.press-list-block a:focus-visible { text-decoration-thickness: 2px; }

/* PRESS-AUDIO-1 — IL PODCAST.
 *
 * Il player e' quello NATIVO del browser: `controls` e basta. Riscriverlo
 * vorrebbe dire mantenere codice per rifare cio' che il browser fa gia' — e su
 * questa vetrina la CSP e' `script-src 'self'` con zero inline, quindi un
 * player nostro sarebbe anche un file in piu' da servire.
 *
 * `width: 100%`: i controlli nativi hanno una larghezza propria che su
 * telefono sborda dalla colonna.
 */

.press-player {
  width: 100%;
  margin: .5rem 0 0;
}

.press-episode {
  border-left: 3px solid var(--press-accent);
  padding: .25rem 0 .5rem 1rem;
  margin: 0 0 2rem;
}

.press-episode-length {
  font-family: var(--sans);
  font-size: .875rem;
  color: var(--press-muted);
  margin: .4rem 0 0;
}

@media (max-width: 32rem) {
  .press-composed,
  .press-list,
  .press-latest { padding: 2rem 1rem 3.5rem; }


  /* Il prototipo scende a 17px sotto i 640px (`.article-body`). */
  .press-article { font-size: 1.0625rem; }
  .press-article { padding: 2rem 1.1rem 3.5rem; }
  /* Su telefono la misura di lettura è già la larghezza dello schermo: le
   * immagini «wide» non hanno margine da cui uscire, e sporgerebbero. */
  .press-figure--wide { margin-inline: 0; }
}

@media print {
  .press-sources { border-top-color: #999; }
  .press-legacy { border-color: #999; }
}

/* PRESS-THEME-T2b-C — IL CONTENUTO LEGACY SANIFICATO.
 *
 * `html_legacy` non è più un <pre>: arriva dall'allowlist di
 * `press.services.legacy_html` con i soli tag ammessi (paragrafi, liste,
 * tabelle, immagini dei nostri media, link). Si veste come il corpo, e la
 * tabella scorre in orizzontale invece di sfondare la colonna su telefono. */
.press-legacy-html { margin: 0 0 1.5rem; overflow-x: auto; }
.press-legacy-html p { margin: 0 0 1rem; }
.press-legacy-html img { max-width: 100%; height: auto; margin-inline: auto; }
.press-legacy-html table { border-collapse: collapse; width: 100%; font-size: .9375rem; }
.press-legacy-html th,
.press-legacy-html td { border-bottom: 1px solid var(--press-line); padding: .5rem .6rem; text-align: left; vertical-align: top; }
.press-legacy-html th { font-weight: 700; }
.press-legacy-html a[href] { color: var(--press-accent); text-decoration: underline; text-underline-offset: .15em; }
.press-legacy-audio { margin: 0 0 1.5rem; }
.press-legacy-audio a { font-weight: 700; color: var(--press-accent); }

/* PRESS-THEME-T2b-B — LA PAGINA ARTICOLO SUL PROTOTIPO.
 *
 * Le misure sono quelle di `templates/pages/article.html` del prototipo, già
 * in `press-theme.css` (`.article-head` 720, `.article-body` 680, `.toc`,
 * `.media-strip`, `.audio-player`, `.cards`). Qui solo ciò che il prototipo non
 * dice o che le regole storiche di questo foglio contraddirebbero. Ogni
 * selettore nomina l'articolo: la pagina statica (`.press-page-body`) usa ancora
 * `.press-article` e resta com'era. */
.press-article:not(.press-page-body) { max-width: none; padding: 0 0 3rem; }

.article-head.press-head { margin-bottom: 0; }
.article-head h1 { font-size: 44px; line-height: 1.06; margin: 0; }
.article-head .press-disclosure,
.article-head .press-event { align-self: flex-start; margin: 0; }
.article-head .kicker { margin: 0; }
.article-head .kicker a { color: inherit; text-decoration: none; }
.article-head .kicker a:hover,
.article-head .kicker a:focus-visible { text-decoration: underline; }

/* L'OCCHIELLO sta SOTTO il titolo (INTEGRAZIONI-2 G1), com'è nel prototipo, e
 * porta la voce `.occhiello`: senza questa riga vincerebbe `.press-sub`
 * storica, che è 1.25rem e grigio chiaro. Regola tenuta anche dopo il
 * rovesciamento dell'ordine: l'occhiello resta un `.press-sub` nel markup —
 * test e smoke lo leggono da lì — e il valore che deve vincere è lo stesso. */
.article-head .press-sub { margin: 0; font-size: 18px; line-height: 1.6; color: #3f4d45; }

.article-head .article-byline { margin: 4px 0 0; }
.article-byline .press-byline,
.article-byline .press-date { font: inherit; color: inherit; margin: 0; }
.article-byline a.autore { text-decoration: none; }
.article-byline a.autore:hover,
.article-byline a.autore:focus-visible { text-decoration: underline; color: var(--verde); }

/* INTEGRAZIONI-2 G3 (d) — «MOSTRA DI PIÙ», con la correzione di FIX-G3.
 *
 * NON C'È NIENTE DA NASCONDERE QUI: i blocchi sono divisi in due dal service, e
 * la seconda metà sta dentro un `<details>`. Questo foglio veste il comando e
 * sfuma il bordo fra le due metà; togliendolo, il `<details>` resta un
 * `<details>` — si apre con un clic, senza JavaScript. È la ragione per cui il
 * meccanismo è HTML e non CSS: un ripiegamento fatto di sola altezza massima
 * smetterebbe di potersi aprire il giorno che il foglio non arriva. */
.press-body-fold {
  max-width: var(--press-measure);
  margin: 0 auto 1.5rem;
}
.press-body-fold-summary {
  list-style: none;
  cursor: pointer;
  border: 1px solid #c4d3c6;
  background: var(--carta);
  color: var(--press-ink);
  font-family: var(--sans);
  font-size: .875rem;
  font-weight: 600;
  padding: .7rem 1.4rem;
  border-radius: 999px;
}
.press-body-fold-summary::-webkit-details-marker { display: none; }
.press-body-fold-summary::marker { content: ""; }
.press-body-fold-summary:hover,
.press-body-fold-summary:focus-visible { border-color: var(--press-accent); color: var(--press-accent); }

/* FIX-G3 — IL COMANDO STA DOVE SERVE, e i due stati sono due posti diversi.
 *
 * Ripiegato, «Mostra di più» sta alla PIEGA: è lì che il testo si interrompe.
 * Disteso, «Mostra meno» deve stare IN FONDO, dopo l'ultimo blocco — altrimenti
 * resta a metà pagina, il testo continua sotto, e per richiudere bisogna
 * risalire un articolo che si è appena finito di aprire.
 *
 * `<summary>` è per forza il PRIMO figlio del `<details>`: a spostarlo è
 * l'ordine del flex, mai `position` — che lo toglierebbe dal flusso e dalla
 * tabulazione, cioè dalla portata di chi naviga da tastiera.
 *
 * Il ritorno alla piega quando si richiude è di `audio-player.js`: senza
 * JavaScript il comando sta comunque in fondo, e non si scorre. */
.press-body-fold { display: flex; flex-direction: column; text-align: center; }
.press-body-fold > .press-body { text-align: initial; }
.press-body-fold-summary { align-self: center; }
.press-body-fold[open] > .press-body-fold-summary { order: 2; }

/* LA SFUMATURA sull'ultimo pezzo dell'anteprima, e solo finché è chiuso: dice
 * che il testo continua. Sparisce all'apertura, o resterebbe in mezzo. */
.press-article > .press-body:has(+ .press-body-fold:not([open])) {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 5rem), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 5rem), transparent);
}
/* Una sola etichetta per volta, e la scrive il MARKUP in tutte e due le forme:
 * un `content:` in CSS non si traduce. */
.press-body-fold[open] .press-body-fold-piu,
.press-body-fold:not([open]) .press-body-fold-meno { display: none; }

/* FIX-G3 — IL PLAYER DELL'ARTICOLO È QUELLO DEL TEMA.
 *
 * La pillola verde, il cerchio di play, la barra e il bottone della velocità
 * sono del PROTOTIPO e vivono in `press-theme.css` (`.audio-player …`): non si
 * riscrivono qui. Qui c'è solo ciò che il prototipo non ha, perché il suo
 * player leggeva col browser e il nostro suona un file:
 *
 *  * i tre comandi del tema nascono `hidden` e li scopre `audio-player.js`,
 *    che nello stesso gesto toglie i `controls` nativi. `[hidden]` deve
 *    VINCERE sul `display` del tema, o comparirebbero comunque;
 *  * il `<audio>` di RIPIEGO — quello che si vede senza JavaScript — prende
 *    tutta la riga della pillola: i controlli nativi hanno una larghezza
 *    propria che su telefono sborda;
 *  * la barra si riempie con `transform`, che si scrive da CSSOM: `style-src
 *    'self'` non intercetta la CSSOM, e uno `style=""` nel markup sì.
 */
.press-audio .play[hidden],
.press-audio .info[hidden],
.press-audio .rate[hidden] { display: none; }

.press-audio-line { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.press-audio .meta { font-family: var(--sans); font-size: 12.5px; color: var(--muted); }
.press-audio .fill {
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .25s linear;
}
/* Il ripiego senza JavaScript: il player di sistema, a tutta larghezza. Con JS
 * questo elemento perde `controls` e non si vede più. */
.press-audio > audio { flex: 1 1 100%; width: 100%; }
.press-audio > audio:not([controls]) { display: none; }

/* L'apertura come nel prototipo (16:9, angoli), ma `max-width` e non `width`:
 * la regola di PRESS-COLLAUDO-1b vale anche qui — una copertina piccola non
 * si ingrandisce. */
.press-cover { text-align: initial; }
.press-cover img { width: auto; max-width: 100%; display: block; margin-inline: auto; }

.media-strip a { position: relative; flex: 0 0 auto; display: block; border-radius: 10px; overflow: hidden; width: 72px; height: 54px; }

.toc a { color: inherit; text-decoration: none; }
.toc a:hover .t,
.toc a:focus-visible .t { text-decoration: underline; }
.toc .kicker,
.toc .meta { color: var(--muted); }
.toc .meta { font-size: 12.5px; }

.article-body .press-h { scroll-margin-top: 60px; }
.article-body .press-quote {
  border-left: 0;
  font-style: normal;
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1.35;
  color: #1d3a2e;
}
.article-body .press-quote p { margin: 0; }

.tags a { text-decoration: none; }
.press-article .press-sources { max-width: 680px; margin: 3.5rem auto 0; }

.press-related { max-width: 900px; margin: 52px auto 0; padding-bottom: 0; }
.press-related .card a { color: inherit; text-decoration: none; }
.press-related .card a.t:hover,
.press-related .card a.t:focus-visible { text-decoration: underline; color: var(--verde); }
.press-related .card .meta { font-size: 12.5px; color: var(--muted); }

@media (max-width: 640px) {
  .article-head h1 { font-size: 32px; }
  .press-article:not(.press-page-body) { padding: 0 0 2rem; }
}

/* PRESS-THEME-T2b-A — LA HOME SULLE SEZIONI DEL PROTOTIPO.
 *
 * Le misure delle sezioni (`.lead`, `.cards`, `.split`, `.posters`, `.rows`,
 * `.index-grid`, `.band`) sono quelle di `press-theme.css`, cioè del prototipo.
 * Qui solo ciò che il prototipo non dice e che le regole storiche di questo
 * foglio contraddirebbero: il contenitore largo quanto il guscio, la voce che
 * non ha copertina, gli stili che il prototipo scriveva inline. */
.press-composed,
.press-latest { max-width: none; padding: 0 0 1rem; font-size: inherit; line-height: inherit; }

/* Una voce è un link INTERO: sottolineare tutto il riquadro al passaggio lo
 * rende illeggibile. Si sottolinea il titolo. */
.press-composed a:hover,
.press-composed a:focus-visible,
.press-latest a:hover,
.press-latest a:focus-visible { text-decoration: none; color: inherit; }
.press-section a:hover :is(h1, h2, h3, .t),
.press-section a:focus-visible :is(h1, h2, h3, .t),
.press-section a.t:hover,
.press-section a.t:focus-visible { text-decoration: underline; text-underline-offset: .15em; }
.press-section .section-head a:hover { text-decoration: underline; color: var(--verde); }

.press-split-excerpt { font-size: 15px; line-height: 1.6; color: var(--ink-3); }
.press-split-text { display: flex; flex-direction: column; gap: 6px; }
.split-list a.press-split-nocover { grid-template-columns: minmax(0, 1fr); }
.index-grid .kicker { color: var(--muted); }

/* UN POSTER SENZA COPERTINA RESTA UN POSTER: la proporzione la tiene il
 * riquadro, e la didascalia in basso resta leggibile sul verde. */
.poster.press-poster--nocover { aspect-ratio: 4 / 5; background: var(--verde); }

.press-section .press-disclosure--sm {
  align-self: flex-start; margin: 0; padding: .15rem .45rem; font-size: .6875rem;
}
.poster .press-disclosure--sm,
.band .press-disclosure--sm { color: #f2f7f1; border-color: currentColor; }

/* INTEGRAZIONI-2 G3 (e) — LA FASCIA È UN INDICE, non tre riproduttori: via i
 * player, e la riga intera diventa il bersaglio. */
.press-episode-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.band a.episode { color: inherit; text-decoration: none; }
.band a.episode:hover .t,
.band a.episode:focus-visible .t { text-decoration: underline; }

.press-latest-title { margin: 0; font-family: var(--serif); font-size: 30px; font-weight: 400; }
/* Il ripiego non ha un'apertura sopra: il respiro dalla testata lo dà la sezione. */
.press-latest .section-head { padding-top: 30px; }

@media (max-width: 640px) {
  .press-latest-title { font-size: 26px; }
}

/* PRESS-THEME-T2c-B — la citazione del canale in fondo alla home: l'autore
 * col grigio del prototipo (`style="color:var(--muted)"` là, una classe qui). */
.press-quote-box .kicker { color: var(--muted); }

/* LEAD-RESA-1 — L'APERTURA ALLA RESA DEL RIFERIMENTO
 * (docs/design/greentomeet-tema/blocco_importante.png e
 * riferimento-home-completa.png).
 *
 * Il prototipo Django impilava la foto sopra il testo (`.lead-main` di
 * press-theme.css): il riferimento adottato mette il principale su DUE COLONNE,
 * testo a sinistra e foto 16:10 a destra, e i secondari in una FILA DA TRE sotto
 * una fascetta, fra due filetti. `.lead` del tema resta sul <section> per la
 * sezione, ma qui smette di essere un flex. */
.press-lead.lead { display: block; padding: 36px 0 0; }

.press-lead-main {
  display: grid;
  grid-template-columns: minmax(0, 45fr) minmax(0, 50fr);
  gap: 48px;
  align-items: center;
}
/* Senza foto il testo prende la riga, con una misura di lettura. */
.press-lead-main--nocover { grid-template-columns: minmax(0, 1fr); }
.press-lead-main--nocover .press-lead-text { max-width: 760px; }

.press-lead-text { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.press-lead-title {
  margin: 0; font-family: var(--serif); font-size: 56px; font-weight: 400;
  line-height: 1.04; letter-spacing: -.015em; color: var(--ink); text-wrap: pretty;
}
.press-lead-excerpt { margin: 0; font-size: 20px; line-height: 1.7; color: var(--ink-3); text-wrap: pretty; }
.press-lead-text .meta { font-size: 15px; }
.press-lead-photo {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 10;
  object-fit: cover; border-radius: var(--r-l);
}

.press-lead-more {
  margin-top: 52px; padding: 48px 0 52px;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.press-lead-band {
  margin: 0 0 30px; font-size: 12px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
}
.press-lead-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px; }
.press-lead-card { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.press-lead-card img {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 2;
  object-fit: cover; border-radius: var(--r-m); margin-bottom: 8px;
}
.press-lead-card .t {
  margin: 0; font-family: var(--serif); font-size: 28px; font-weight: 400;
  line-height: 1.2; color: var(--ink); text-wrap: pretty;
}
.press-lead-card .meta { font-size: 14px; }

/* Larghezza intermedia: il titolo scende, le card vanno a due per riga. */
@media (max-width: 960px) {
  .press-lead-title { font-size: 44px; }
  .press-lead-main { gap: 32px; }
  .press-lead-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 390: il principale si impila con la FOTO SOPRA, le card una per riga. */
@media (max-width: 640px) {
  .press-lead.lead { padding-top: 24px; }
  .press-lead-main { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .press-lead-photo { order: -1; }
  .press-lead-title { font-size: 32px; }
  .press-lead-excerpt { font-size: 17px; }
  .press-lead-more { margin-top: 36px; padding: 32px 0 36px; }
  .press-lead-row { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .press-lead-card .t { font-size: 24px; }
}

/* LEAD-RESA-1 — feature_list con UNA voce sola («In evidenza»): una voce, non
 * mezzo split. Foto piccola a sinistra, testo a destra; a 390 la foto sopra. */
.press-feature-voce {
  display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: 32px; align-items: center; padding: 4px 0 8px;
}
.press-feature-voce--nocover { grid-template-columns: minmax(0, 1fr); }
.press-feature-voce img {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 2;
  object-fit: cover; border-radius: var(--r-m);
}
.press-feature-voce-testo { display: flex; flex-direction: column; gap: 10px; min-width: 0; max-width: 760px; }
.press-feature-voce .t {
  font-family: var(--serif); font-size: 30px; font-weight: 400; line-height: 1.15;
  color: var(--ink); text-wrap: pretty;
}
.press-feature-voce-sommario { font-size: 16px; line-height: 1.6; color: var(--ink-3); text-wrap: pretty; }
.press-feature-voce .meta { font-size: 13px; }

@media (max-width: 640px) {
  .press-feature-voce { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .press-feature-voce .t { font-size: 24px; }
}