/*
 * Design system «La Griglia» del sito pubblico (ADR-0009; T-040; RF-01, RF-21, RNF-04, RNF-05, RNF-10, RNF-12).
 * CSS puro, senza build step. Due caratteri self-hosted (nessuna chiamata a Google Fonts): Bitter per
 * tutto ciò che è dell'autore (marchio, titoli, sottotitoli, abstract, corpo, «In breve», citazioni),
 * IBM Plex Sans per tutto ciò che è del sito (tagline, nav, etichette, titoli di sezione, firme, meta,
 * didascalie, tabelle, pulsanti, campi, piè). Nessun testo sotto 13 px; 13 px solo per kicker fissi.
 *
 * Un colore, un ruolo: blu notte #0b2e4f solo testata e piè; blu #0f4c81 solo ciò che si tocca; giallo
 * #f5c042 solo su blu notte; tinte di rubrica in due token per rubrica (--rubrica-testo scuro per il testo,
 * --rubrica-barra chiaro per riempimenti ≥ 3 px) esposti dal template tag `stile_rubrica` sullo style
 * dell'elemento. Il marrone del vecchio foglio esce, salvo il kicker «Nota di revisione».
 *
 * Contrasti (WCAG 2.2 AA): inchiostro/fondo 12,8:1; secondario/fondo 6,6:1 e su bianco 7,6:1; bianco su
 * blu notte 13,8:1; tagline su blu notte 9,8:1; giallo su blu notte 8,2:1; blu su bianco 8,9:1 e sul fondo
 * 7,7:1; bordo forte su bianco 4,8:1; tinte di rubrica (testo) su bianco ≥ 6,3:1.
 * Il pannello di redazione ha il proprio foglio (pannello.css): qui c'è solo il sito pubblico e l'accesso.
 */

/* --- Caratteri (RNF-10) -------------------------------------------------------------------------- */

@font-face {
  font-family: "Bitter";
  src: url("../font/Bitter-Variable.b3b94b7ba08a.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Bitter";
  src: url("../font/Bitter-Italic-Variable.e474651175f0.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("../font/IBMPlexSans-Variable.5ab1e167091f.woff2") format("woff2");
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("../font/IBMPlexSans-Italic-Variable.56884f5d1caa.woff2") format("woff2");
  font-weight: 100 700;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Token ----------------------------------------------------------------------------------------- */

:root {
  /* Colori di marca, un ruolo ciascuno */
  --fondo: #f1efe9;
  --superficie: #ffffff;
  --inchiostro: #1f2933;
  --secondario: #4b5563;
  --blu-notte: #0b2e4f;
  --tagline: #cfdbe8;
  --blu: #0f4c81;
  --giallo: #f5c042;
  --bordo: #d6d3cc;
  --bordo-forte: #6b7280;
  --avviso-sfondo: #fff4d6;
  --avviso-bordo: #b8860b;
  --verde: #1f6b3a;
  --rosso: #9b1c1c;
  --filetto-su-blu: rgba(255, 255, 255, 0.2);
  --hairline: rgba(31, 41, 51, 0.12);

  /* Riserva grigia per i due token di rubrica: `stile_rubrica` li sovrascrive sull'elemento */
  --rubrica-testo: #4e5c6b;
  --rubrica-barra: #798898;

  /* Caratteri */
  --font-testo: "Bitter", "Iowan Old Style", Georgia, serif;
  --font-ui: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* Scala tipografica: sette gradini, tutti in rem */
  --t0: 0.8125rem; /* 13 px, Plex 600 maiuscolo: solo kicker fissi e corti */
  --t1: 0.875rem; /* 14 px: meta, firme, didascalie, piè */
  --t2: 1rem; /* 16 px: nav, pulsanti, campi, tabelle; sottotitoli nelle schede */
  --t3: 1.125rem; /* 18 px: corpo, abstract, «In breve» nell'articolo, titoli di sezione */
  --t4: 1.25rem; /* 20 px: titolo della scheda con foto, h3 nel corpo */
  --t4b: 1.375rem; /* 22 px: titolo della scheda senza foto */
  --t5: 1.5rem; /* 24 px: h2 nel corpo, evidenza sotto 48 rem */
  --t6: clamp(1.75rem, 1.25rem + 1.5vw, 2.25rem); /* 28-36 px: evidenza, h1 di elenchi e rubrica */
  --t7: clamp(2rem, 1.5rem + 1.6vw, 2.625rem); /* 32-42 px: h1 dell'articolo */
  --marchio: clamp(1.75rem, 1.2rem + 2.2vw, 3rem); /* 28-48 px */
  --misura: 64ch; /* colonna dell'articolo in Bitter a 18 px ≈ 660 px */

  /* Spazi e griglia: 48 rem e 64 rem i due punti di rottura */
  --padding-contenitore: 1rem;
  --gutter: 1rem;
  --scheda-padding: 1rem;
  --sezione: 2rem;
  --larghezza-sito: 72rem;
  --raggio: 6px;
  --ombra: 0 1px 2px rgba(31, 41, 51, 0.08);
}

@media (min-width: 48rem) {
  :root {
    --sezione: 2.5rem;
  }
}

@media (min-width: 64rem) {
  :root {
    --padding-contenitore: 1.5rem;
    --gutter: 1.5rem;
    --scheda-padding: 1.25rem;
    --sezione: 3rem;
  }
}

/* --- Base ------------------------------------------------------------------------------------------ */

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

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

body {
  margin: 0;
  font-family: var(--font-testo);
  font-size: var(--t3);
  line-height: 1.65;
  color: var(--inchiostro);
  background: var(--fondo);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-testo);
  font-weight: 700;
  line-height: 1.2;
  margin: 1.6em 0 0.5em;
  overflow-wrap: anywhere;
}

h1 {
  font-size: var(--t6);
  line-height: 1.15;
  margin-top: 0.5em;
  text-wrap: balance;
}

h2 {
  font-size: var(--t5);
}

h3 {
  font-size: var(--t4);
}

p,
ul,
ol,
blockquote,
figure,
table {
  margin: 0 0 1em;
}

a {
  color: var(--blu);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

a:hover {
  color: var(--blu-notte);
}

/* Anelli di focus: blu con alone bianco sulle superfici chiare; giallo sulle superfici blu (sotto). */
:focus-visible {
  outline: 3px solid var(--blu);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--superficie);
  border-radius: 2px;
}

img,
video,
iframe {
  max-width: 100%;
  height: auto;
}

figure {
  margin-inline: 0;
}

figcaption,
.didascalia {
  font-family: var(--font-ui);
  font-size: var(--t1);
  line-height: 1.45;
  color: var(--secondario);
  margin-top: 0.5rem;
}

blockquote {
  border-inline-start: 4px solid var(--bordo-forte);
  padding-inline-start: 1rem;
  color: var(--secondario);
  font-style: italic;
}

ul li::marker,
ol li::marker {
  color: var(--secondario);
}

code,
pre {
  font-family: var(--font-mono);
  font-size: 0.95em;
}

hr {
  border: 0;
  border-top: 1px solid var(--bordo);
  margin: 2.5rem 0;
}

/* Tabelle: contenitore scorrevole, prima colonna fissa, cifre tabulari a destra */
.tabella-scorrevole {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 1em;
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  background: var(--superficie);
}

/* Il margine della tabella lo porta il contenitore: dentro non deve restare un vuoto */
.tabella-scorrevole table {
  margin: 0;
}

table {
  border-collapse: collapse;
  width: 100%;
  font-family: var(--font-ui);
  font-size: var(--t2);
  line-height: 1.5;
}

caption {
  text-align: start;
  font-weight: 600;
  padding: 0.5rem 0.75rem;
}

th,
td {
  border-bottom: 1px solid var(--bordo);
  padding: 0.5rem 0.75rem;
  text-align: start;
  vertical-align: top;
}

th {
  background: var(--superficie);
  font-weight: 600;
  border-bottom: 2px solid var(--inchiostro);
}

th:first-child,
td:first-child {
  position: sticky;
  left: 0;
  background: var(--superficie);
}

td.numero,
th.numero,
.tabella td[data-numero] {
  text-align: end;
  font-variant-numeric: tabular-nums;
}

/* --- Elementi ricorrenti --------------------------------------------------------------------------- */

/* Linea di quota: filetto 1 px con due tacche di 9 px alle estremità. Quattro soli usi (ADR-0009): sotto il
   marchio (in giallo), sopra i titoli di sezione (in inchiostro), come bordo superiore dell'«In breve» (in
   tinta) e sotto la descrizione nell'intestazione delle pagine rubrica, tag ed elenco (in tinta o inchiostro).
   Mai su schede, pulsanti, tabelle o piè. */
.quota {
  position: relative;
  border-top: 1px solid currentColor;
  padding-top: 0.5rem;
}

.quota::before,
.quota::after {
  content: "";
  position: absolute;
  top: -5px;
  width: 1px;
  height: 9px;
  background: currentColor;
}

.quota::before {
  left: 0;
}

.quota::after {
  right: 0;
}

/* Pillola del livello di lettura: una sola forma in tutto il sito, nessun colore di significato */
.pillola {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 0.625rem;
  border: 1px solid var(--bordo-forte);
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: var(--t1);
  font-weight: 400;
  line-height: 1;
  color: var(--secondario);
  white-space: nowrap;
  text-decoration: none;
  vertical-align: middle;
}

a.pillola {
  min-height: 44px;
  color: var(--blu);
  border-color: var(--blu);
}

/* Bersaglio da 44 px (WCAG 2.5.8) */
.tocco {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
}

/* Link da 44 px dentro una riga di testo da 14 px senza toccare l'interlinea: il padding verticale è
   compensato dal margine negativo (righe meta, righe di stato, riga del direttore) */
.tocco-inline {
  display: inline-block;
  padding-block: 0.8rem;
  margin-block: -0.8rem;
}

/* Kicker: parole fisse e corte di sistema («In breve», «Rubrica», «Tag», «Autore»), mai nomi variabili */
.kicker,
.etichetta {
  display: block;
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--t0);
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--secondario);
}

.kicker--rubrica {
  color: var(--rubrica-testo);
}

.etichetta a,
.kicker a {
  color: inherit;
}

/* Nome della rubrica: minuscolo normale, Plex 600 14 px, nel colore del testo della rubrica */
.etichetta-rubrica {
  font-family: var(--font-ui);
  font-size: var(--t1);
  font-weight: 600;
  line-height: 1.45;
  color: var(--rubrica-testo);
  text-decoration: none;
}

a.etichetta-rubrica:hover,
a.etichetta-rubrica:focus-visible {
  color: var(--rubrica-testo);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* Quadratino 10×10 nella barra della rubrica (piè): il colore ripetuto, mai da solo */
.quadratino {
  display: inline-block;
  width: 10px;
  height: 10px;
  flex: none;
  background: var(--rubrica-barra);
}

.pulsante,
button.pulsante {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-ui);
  font-size: var(--t2);
  font-weight: 600;
  line-height: 1.3;
  min-height: 44px;
  padding: 0.5rem 1rem;
  border: 1px solid var(--blu);
  border-radius: var(--raggio);
  background: var(--blu);
  color: var(--superficie);
  text-decoration: none;
  cursor: pointer;
}

.pulsante:hover {
  background: var(--blu-notte);
  border-color: var(--blu-notte);
  color: var(--superficie);
}

.pulsante--secondario {
  background: transparent;
  color: var(--blu);
}

.pulsante--secondario:hover {
  background: var(--superficie);
  color: var(--blu-notte);
}

label {
  font-family: var(--font-ui);
  font-size: var(--t2);
  font-weight: 600;
  display: block;
  margin-bottom: 0.25rem;
}

input[type="search"],
input[type="text"],
input[type="email"],
select {
  font: inherit;
  font-family: var(--font-ui);
  font-size: var(--t2);
  min-height: 44px;
  width: 100%;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--bordo-forte);
  border-radius: var(--raggio);
  background: var(--superficie);
  color: var(--inchiostro);
}

::placeholder {
  color: var(--secondario);
  opacity: 1;
}

/* Avviso: articolo archiviato, nota di revisione */
.avviso {
  font-family: var(--font-ui);
  font-size: var(--t2);
  line-height: 1.5;
  background: var(--avviso-sfondo);
  border-inline-start: 4px solid var(--avviso-bordo);
  padding: 0.75rem 1rem;
  margin: 1rem 0;
  border-radius: 0 var(--raggio) var(--raggio) 0;
}

.avviso p:last-child {
  margin-bottom: 0;
}

/* Nota di revisione: stesso riquadro dell'avviso; il kicker è l'unico residuo del marrone (7,7:1 su #fff4d6) */
.nota-revisione {
  font-family: var(--font-ui);
  font-size: var(--t2);
  line-height: 1.5;
  background: var(--avviso-sfondo);
  border-inline-start: 4px solid var(--avviso-bordo);
  padding: 0.75rem 1rem;
  margin: 1rem 0;
}

.nota-revisione .kicker {
  color: #6b3a0c;
  margin-bottom: 0.25rem;
}

.nota-revisione p {
  margin: 0;
}

.visivamente-nascosto {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.solo-stampa {
  display: none;
}

/* --- Struttura -------------------------------------------------------------------------------------- */

.contenitore {
  width: 100%;
  max-width: var(--larghezza-sito);
  margin-inline: auto;
  padding-inline: var(--padding-contenitore);
}

.misura {
  max-width: var(--misura);
}

main {
  flex: 1;
  padding-block: 2.5rem var(--sezione);
  display: flex;
  flex-direction: column;
  gap: var(--sezione);
}

@media (max-width: 47.99rem) {
  main {
    padding-top: 1rem;
  }
}

main > * {
  margin-block: 0;
}

/* Skip link: al focus, riquadro 48 px giallo su blu notte in alto a sinistra */
.salta {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 100;
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 1rem;
  background: var(--giallo);
  color: var(--blu-notte);
  font-family: var(--font-ui);
  font-size: var(--t2);
  font-weight: 600;
  text-decoration: none;
}

.salta:focus {
  left: 0.5rem;
  top: 0.5rem;
  outline-color: var(--blu-notte);
  box-shadow: none;
}

/* --- Testata ---------------------------------------------------------------------------------------- */

.testata {
  background: var(--blu-notte);
  color: var(--superficie);
  font-family: var(--font-ui);
  font-size: var(--t2);
  line-height: 1.5;
}

.testata a {
  color: var(--superficie);
}

.testata :focus-visible,
.piede :focus-visible {
  outline: 3px solid var(--giallo);
  box-shadow: none;
}

.testata__riga {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem 1.5rem;
  padding-block: 1rem 0.75rem;
}

@media (min-width: 64rem) {
  .testata__riga {
    padding-block: 1.5rem 1.25rem;
  }
}

.testata__marchio {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  color: var(--giallo); /* la quota sotto il marchio è gialla */
  min-width: 0;
}

@media (min-width: 64rem) {
  .testata__marchio {
    gap: 0.625rem;
  }
}

.testata__nome {
  margin: 0;
}

.marchio {
  display: block;
  font-family: var(--font-testo);
  font-size: var(--marchio);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  text-wrap: balance;
  max-width: 18ch; /* «Nonsoloprofessione» è una parola sola di 18 caratteri: non deve traboccare */
  color: var(--superficie);
  text-decoration: none;
}

.marchio__quota {
  width: 100%;
  padding-top: 0;
}

.tagline {
  margin: 0;
  max-width: 44ch;
  font-size: var(--t1);
  line-height: 1.45;
  color: var(--tagline);
}

/* «Ultimo articolo: 3 settembre 2026» è un blocco indivisibile: se non sta sulla riga della tagline
   scende intero (il « · » resta in coda alla riga prima), mai con l'anno orfano sulla riga dopo. */
.tagline__ultimo {
  white-space: nowrap;
}

@media (max-width: 47.99rem) {
  .tagline {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .tagline__separatore,
  .tagline__ultimo {
    display: none; /* sul telefono la riga «Ultimo articolo» non compare */
  }
}

.testata__strumenti {
  display: none;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
  flex: 1;
}

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

/* Da 64 rem la fila A (campo, «Tutti gli articoli», «Autori», «Come contribuire») deve stare su una riga:
   la colonna degli strumenti ha una larghezza minima e il blocco del marchio (min-width 0) cede il resto;
   fra 64 e 72 rem il campo è a 16 rem, da 72 rem a 18 rem come da specifica. */
@media (min-width: 48rem) and (max-width: 63.99rem) {
  .testata__strumenti {
    min-width: 29.5rem; /* iPad verticale: campo 14 rem, «Autori» e «Come contribuire» su una riga */
  }
}

@media (min-width: 64rem) {
  .testata__strumenti {
    min-width: 40rem;
  }
}

@media (min-width: 72rem) {
  .testata__strumenti {
    min-width: 42.5rem;
  }
}

.testata__fila {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
}

.testata__fila--b {
  gap: 0.25rem;
}

.testata__voce {
  padding: 0 0.75rem;
  text-decoration: none;
}

.testata__voce:hover,
.testata__voce[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--giallo);
  text-decoration-thickness: 3px;
  text-underline-offset: 0.35em;
}

/* iPad verticale (48-64 rem): fila A con campo, «Autori» e «Come contribuire»; fila B ridotta a
   «Chi siamo · Redazione · Correzioni» (le altre pagine restano nel piè e nel pannello del telefono). */
@media (min-width: 48rem) and (max-width: 63.99rem) {
  .testata__voce--tutti,
  .testata__voce--come-usiamo-ai,
  .testata__voce--privacy {
    display: none;
  }
}

/* «Come contribuire»: l'unico elemento evidenziato, bordato e non campito (si scrive su invito) */
.testata__invito {
  padding: 0 0.875rem;
  border: 1px solid var(--giallo);
  border-radius: var(--raggio);
  color: var(--giallo) !important;
  font-weight: 600;
  text-decoration: none;
}

.testata__invito:hover {
  background: rgba(245, 192, 66, 0.12);
}

/* Campo di ricerca vero (form GET a /cerca/) nella fila A */
.cerca {
  display: flex;
  width: 14rem;
  height: 44px;
  background: var(--superficie);
  border-radius: var(--raggio);
  overflow: hidden;
}

@media (min-width: 64rem) {
  .cerca {
    width: 16rem;
  }
}

@media (min-width: 72rem) {
  .cerca {
    width: 18rem;
  }
}

.cerca__campo {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  border: 0;
  border-radius: 0;
  padding: 0 0.75rem;
  font-size: var(--t2);
}

.cerca__campo:focus-visible {
  outline-offset: -3px;
  box-shadow: none;
  outline-color: var(--blu);
}

.cerca__pulsante {
  width: 44px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: var(--blu);
  color: var(--superficie);
  cursor: pointer;
}

.cerca__pulsante:focus-visible {
  outline-offset: -3px;
}

/* Link «Cerca» 44×44 con lupa: solo sotto 48 rem */
.testata__cerca-telefono {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 44px;
  height: 44px;
  flex: none;
  text-decoration: none;
  font-size: var(--t1); /* «Cerca» a 14 px: il minimo vale anche qui, non è un kicker fisso */
  line-height: 1;
}

@media (min-width: 48rem) {
  .testata__cerca-telefono {
    display: none;
  }
}

/* Nav «Rubriche» a griglia: quattro colonne a 1152, nomi interi, banda in tinta come bordo superiore */
.nav-rubriche {
  display: none;
  border-top: 1px solid var(--filetto-su-blu);
}

@media (min-width: 48rem) {
  .nav-rubriche {
    display: block;
  }
}

.nav-rubriche__voci {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
}

@media (min-width: 64rem) {
  .nav-rubriche__voci {
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  }
}

.nav-rubriche__voce {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0.375rem 0.875rem;
  border-top: 4px solid var(--rubrica-barra);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
}

.nav-rubriche__voce:hover,
.nav-rubriche__voce[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--giallo);
  text-decoration-thickness: 3px;
  text-underline-offset: 0.35em;
}

/* Sotto 48 rem: details nativo «Rubriche» con pannello bianco a due colonne e gruppo «Il portale» (classe storica `nav-telefono__rivista`) */
.nav-telefono {
  display: block;
  position: relative;
  margin-inline: calc(-1 * var(--padding-contenitore));
  border-top: 1px solid var(--filetto-su-blu);
}

@media (min-width: 48rem) {
  .nav-telefono {
    display: none;
  }
}

.nav-telefono__details {
  display: block;
  min-width: 0;
}

/* Il summary occupa la riga; «Tutti gli articoli» sta in alto a destra, sopra lo spazio lasciato libero */
.nav-telefono__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.375rem 1rem;
  margin-inline-end: var(--larghezza-tutti, 10rem);
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  list-style: none;
}

.nav-telefono__summary::-webkit-details-marker {
  display: none;
}

.nav-telefono__summary:focus-visible {
  outline-offset: -3px;
}

.nav-telefono__freccia {
  flex: none;
}

.nav-telefono__details[open] .nav-telefono__freccia {
  transform: rotate(180deg);
}

.nav-telefono__tutti {
  position: absolute;
  top: 0;
  right: 0;
  width: var(--larghezza-tutti, 10rem);
  min-height: 48px;
  justify-content: center;
  padding: 0 0.75rem;
  border-left: 1px solid var(--filetto-su-blu);
  white-space: nowrap;
  text-decoration: none;
}

.nav-telefono__pannello {
  background: var(--superficie);
  color: var(--inchiostro);
  padding: 0.5rem 1rem 1rem;
}

.nav-telefono__pannello a {
  color: var(--inchiostro);
}

.nav-telefono__pannello :focus-visible {
  outline-color: var(--blu);
  box-shadow: 0 0 0 2px var(--superficie);
}

.nav-telefono__rubriche,
.nav-telefono__rivista ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-telefono__rubriche {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.25rem 0.75rem;
}

.nav-telefono__rubrica {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0.375rem 0.75rem;
  border-left: 4px solid var(--rubrica-barra);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
}

.nav-telefono__rubrica[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--blu);
  text-decoration-thickness: 3px;
  text-underline-offset: 0.35em;
}

.nav-telefono__rivista {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--bordo);
}

.nav-telefono__kicker {
  margin-bottom: 0.25rem;
}

.nav-telefono__rivista ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
}

.nav-telefono__rivista a {
  padding: 0 0.5rem;
  color: var(--blu);
}

.nav-telefono__invito {
  border: 1px solid var(--blu);
  border-radius: var(--raggio);
  padding: 0 0.875rem !important;
  text-decoration: none;
  font-weight: 600;
}

/* --- Intestazione di sezione ------------------------------------------------------------------------- */

.intestazione-sezione {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "titolo destra"
    "quota quota";
  align-items: baseline;
  column-gap: 1rem;
  row-gap: 0.5rem;
  margin-bottom: 1rem;
  color: var(--inchiostro);
}

.intestazione-sezione__titolo {
  grid-area: titolo;
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--t3);
  font-weight: 600;
  line-height: 1.3;
}

.intestazione-sezione__sottotitolo {
  grid-area: destra;
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--t1);
  line-height: 1.45;
  color: var(--secondario);
}

.intestazione-sezione__link {
  grid-area: destra;
  justify-self: end;
  font-family: var(--font-ui);
  font-size: var(--t2);
  font-weight: 600;
}

.intestazione-sezione__quota {
  grid-area: quota;
  padding-top: 0;
}

@media (max-width: 47.99rem) {
  .intestazione-sezione {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "titolo"
      "quota"
      "destra";
    row-gap: 0.25rem;
  }

  .intestazione-sezione__link {
    justify-self: start;
  }
}

/* --- Schede degli articoli --------------------------------------------------------------------------- */

.griglia-articoli {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--gutter);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  align-items: stretch;
}

/* Con 1-2 articoli le schede stanno a tutta larghezza, una sotto l'altra (griglia_articoli.html con
   `intere=True`): il <li> resta il contenitore della container query, così sopra i 30 rem la scheda si sdraia */
.griglia-articoli--intere {
  grid-template-columns: minmax(0, 1fr);
}

/* Stato vuoto di un elenco: una frase in Plex, mai una scheda segnaposto */
.stato-vuoto {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--t2);
  line-height: 1.5;
  color: var(--secondario);
}

/* Il contenitore della scheda per la container query (variante orizzontale) */
.griglia-articoli > li,
.contenitore-scheda {
  container-type: inline-size;
  min-width: 0;
  display: flex;
}

.scheda {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--superficie);
  border-top: 4px solid var(--rubrica-barra);
  border-radius: var(--raggio);
  overflow: hidden;
  font-family: var(--font-ui);
}

.scheda__figura {
  position: relative;
  display: block;
}

.scheda__figura picture,
.scheda__figura img {
  display: block;
  width: 100%;
}

.scheda__figura img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Hairline attorno all'immagine: un elaborato su fondo bianco non sparisce nella scheda bianca */
.scheda__figura::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px var(--hairline);
  pointer-events: none;
}

.scheda__corpo {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: var(--scheda-padding);
  flex: 1;
}

.scheda__testo,
.scheda__coda,
.scheda__in-breve {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.scheda__coda {
  margin-top: auto;
  padding-top: 0.125rem;
}

.scheda__in-breve {
  gap: 0.25rem;
}

.scheda__rubrica {
  margin: 0;
  line-height: 1.45;
}

.scheda__titolo {
  margin: 0;
  font-family: var(--font-testo);
  font-size: var(--t4);
  font-weight: 700;
  line-height: 1.2;
  text-wrap: balance;
}

.scheda--testo .scheda__titolo {
  font-size: var(--t4b);
}

.scheda__titolo a {
  color: var(--inchiostro);
  text-decoration: none;
}

/* Link esteso: tutta la scheda apre l'articolo, il nome del link resta il titolo */
.scheda__titolo a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.scheda__sottotitolo {
  margin: 0;
  font-family: var(--font-testo);
  font-size: var(--t2);
  line-height: 1.5;
  color: var(--secondario);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

.scheda__punto {
  margin: 0;
  font-family: var(--font-testo);
  font-size: var(--t2);
  line-height: 1.45;
  color: var(--inchiostro);
}

/* Etichetta e nomi degli autori restano link autonomi sopra il link esteso, alti 44 px */
.scheda .etichetta-rubrica,
.scheda .firma a {
  position: relative;
  z-index: 1;
}

.scheda .etichetta-rubrica {
  display: inline-block;
  padding-block: 0.75rem;
  margin-block: -0.75rem;
}

.scheda .firma a {
  padding-block: 0.8rem;
}

.scheda:hover .scheda__titolo a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

@supports selector(:has(a)) {
  .scheda:has(.scheda__titolo a:focus-visible) {
    outline: 3px solid var(--blu);
    outline-offset: 3px;
    border-radius: var(--raggio);
  }

  .scheda__titolo a:focus-visible {
    outline: none;
    box-shadow: none;
  }
}

/* Variante orizzontale: solo con .scheda--orizzontale e un contenitore largo almeno 30 rem */
@container (min-width: 30rem) {
  .scheda--orizzontale:not(.scheda--testo) {
    display: grid;
    grid-template-columns: 2fr 3fr;
  }

  .scheda--orizzontale:not(.scheda--testo) .scheda__figura {
    min-height: 12rem;
    height: 100%;
  }

  .scheda--orizzontale:not(.scheda--testo) .scheda__figura img {
    position: absolute;
    inset: 0;
    height: 100%;
    aspect-ratio: auto;
  }

  .scheda--orizzontale.scheda--testo .scheda__corpo {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gutter);
    align-items: start;
  }

  .scheda--orizzontale.scheda--testo .scheda__coda {
    margin-top: 0;
    height: 100%;
    padding-top: 0;
  }

  .scheda--orizzontale.scheda--testo .scheda__coda .firma {
    margin-top: auto;
  }
}

/* --- Firma ------------------------------------------------------------------------------------------ */

.firma {
  font-family: var(--font-ui);
  font-size: var(--t1);
  line-height: 1.45;
  color: var(--secondario);
  margin: 0;
}

.firma a {
  color: var(--inchiostro);
  font-weight: 600;
}

.firma__meta {
  display: inline;
}

.firma__meta .pillola {
  margin-inline-start: 0.25rem;
}

.firma__aggiornato {
  font-style: italic;
}

.firma--compatta {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.firma--compatta .firma__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
}

.firma--compatta .firma__meta .pillola {
  margin-inline-start: 0;
}

.firma--articolo {
  font-size: var(--t2);
  line-height: 1.5;
}

.firma--articolo a {
  color: var(--blu);
  text-decoration: underline;
}

/* --- In breve --------------------------------------------------------------------------------------- */

.in-breve {
  margin: 0;
  color: var(--rubrica-testo); /* la quota superiore prende la tinta */
  font-family: var(--font-ui);
  padding-top: 0;
}

.in-breve--riquadro {
  background: var(--superficie);
  padding: 1rem 1.25rem;
}

.in-breve__kicker {
  margin: 0.75rem 0 0.625rem;
}

.in-breve--riquadro .in-breve__kicker {
  margin-top: 0;
}

.in-breve__punti {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: punto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.in-breve__punti li {
  position: relative;
  padding-inline-start: 2rem;
  font-family: var(--font-testo);
  font-size: var(--t3);
  line-height: 1.5;
  color: var(--inchiostro);
}

.in-breve__punti li::before {
  counter-increment: punto;
  content: counter(punto);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-ui);
  font-size: var(--t3);
  font-weight: 600;
  line-height: 1.5;
  color: var(--rubrica-testo);
}

.in-breve--compatto .in-breve__punti {
  gap: 0.375rem;
}

.in-breve--compatto .in-breve__punti li,
.in-breve--compatto .in-breve__punti li::before {
  font-size: var(--t2);
  line-height: 1.45;
}

/* --- Evidenza (home) ------------------------------------------------------------------------------- */

.evidenza {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--superficie);
  border-top: 6px solid var(--rubrica-barra);
  border-radius: var(--raggio);
  box-shadow: var(--ombra);
  overflow: hidden;
  font-family: var(--font-ui);
}

.evidenza--testo {
  max-width: 48rem;
}

@media (min-width: 48rem) {
  .evidenza:not(.evidenza--testo) {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 64rem) {
  .evidenza:not(.evidenza--testo) {
    grid-template-columns: 3fr 2fr;
  }
}

.evidenza__figura {
  position: relative;
  display: block;
  order: 1;
}

.evidenza__figura picture,
.evidenza__figura img {
  display: block;
  width: 100%;
}

.evidenza__figura img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.evidenza__figura::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px var(--hairline);
  pointer-events: none;
}

@media (min-width: 48rem) {
  .evidenza__figura {
    order: 0;
    height: 100%;
  }

  .evidenza__figura img {
    position: absolute;
    inset: 0;
    height: 100%;
    aspect-ratio: auto;
  }
}

.evidenza__corpo {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: var(--scheda-padding);
}

@media (min-width: 64rem) {
  .evidenza__corpo {
    gap: 0.875rem;
    padding: 1.5rem;
  }
}

.evidenza__intestazione {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin: 0;
}

.evidenza__titolo,
.evidenza h2 {
  margin: 0;
  font-family: var(--font-testo);
  font-size: var(--t5);
  font-weight: 700;
  line-height: 1.2;
  text-wrap: balance;
}

@media (min-width: 48rem) {
  .evidenza__titolo,
  .evidenza h2 {
    font-size: var(--t6);
    line-height: 1.15;
  }
}

.evidenza__titolo a,
.evidenza h2 a {
  color: var(--inchiostro);
  text-decoration: none;
}

.evidenza__titolo a::after,
.evidenza h2 a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.evidenza__sottotitolo {
  margin: 0;
  font-family: var(--font-testo);
  font-size: var(--t3);
  line-height: 1.4;
  color: var(--secondario);
}

@media (min-width: 48rem) {
  .evidenza__sottotitolo {
    font-size: var(--t4);
  }
}

.evidenza__abstract {
  margin: 0;
  font-family: var(--font-testo);
  font-size: var(--t3);
  line-height: 1.65;
}

.evidenza .etichetta-rubrica,
.evidenza .firma a {
  position: relative;
  z-index: 1;
}

.evidenza .firma {
  margin-top: auto;
}

@media (max-width: 47.99rem) {
  .evidenza .in-breve__punti li:nth-child(n + 3) {
    display: none; /* sul telefono l'evidenza mostra due punti */
  }
}

@supports selector(:has(a)) {
  .evidenza:has(.evidenza__titolo a:focus-visible),
  .evidenza:has(h2 a:focus-visible) {
    outline: 3px solid var(--blu);
    outline-offset: 3px;
  }

  .evidenza__titolo a:focus-visible,
  .evidenza h2 a:focus-visible {
    outline: none;
    box-shadow: none;
  }
}

/* --- Brevi (home): righe senza immagini sotto la spalla --------------------------------------------- */

.brevi {
  list-style: none;
  margin: var(--gutter) 0 0;
  padding: 0;
  font-family: var(--font-ui);
}

.breve {
  position: relative;
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0.25rem 1rem;
  min-height: 56px;
  padding: 0.75rem 0;
  border-top: 1px solid var(--bordo);
}

.brevi > li:first-child .breve {
  border-top: 0;
}

.breve__data {
  margin: 0;
  font-size: var(--t1);
  line-height: 1.45;
  color: var(--secondario);
}

.breve__titolo {
  margin: 0;
  font-family: var(--font-testo);
  font-size: var(--t3);
  font-weight: 700;
  line-height: 1.3;
}

.breve__titolo a {
  color: var(--inchiostro);
  text-decoration: none;
}

.breve__titolo a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.breve__rubrica {
  margin: 0;
  justify-self: end;
  text-align: end;
}

@media (max-width: 47.99rem) {
  .breve {
    grid-template-columns: minmax(0, 1fr);
    min-height: 64px;
  }

  .breve__rubrica {
    justify-self: start;
    text-align: start;
  }
}

@supports selector(:has(a)) {
  .breve:has(a:focus-visible) {
    outline: 3px solid var(--blu);
    outline-offset: 2px;
  }

  .breve__titolo a:focus-visible {
    outline: none;
    box-shadow: none;
  }
}

/* --- Tessere delle rubriche (home) ------------------------------------------------------------------ */

.tessere {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--gutter);
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
}

/* iPad verticale (48-64 rem): due colonne con la riga «Ultimo:», non tre tessere strette */
@media (min-width: 48rem) and (max-width: 63.99rem) {
  .tessere {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 47.99rem) {
  .tessere {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }
}

.tessera {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  height: 100%;
  min-height: 10rem;
  padding: var(--scheda-padding);
  background: var(--superficie);
  border-top: 4px solid var(--rubrica-barra);
  border-radius: var(--raggio);
  font-family: var(--font-ui);
}

@media (max-width: 47.99rem) {
  .tessera {
    min-height: 8rem;
  }
}

.tessera__nome {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--t2);
  font-weight: 600;
  line-height: 1.3;
}

.tessera__nome a {
  color: var(--inchiostro);
  text-decoration: none;
}

.tessera__nome a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.tessera__descrizione {
  margin: 0;
  font-family: var(--font-testo);
  font-size: var(--t2);
  line-height: 1.5;
  color: var(--secondario);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

@media (max-width: 47.99rem) {
  .tessera__descrizione {
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }

  .tessera__ultimo {
    display: none; /* sotto 48 rem resta il conteggio */
  }
}

.tessera__ultimo {
  margin: 0;
  font-size: var(--t1);
  line-height: 1.45;
  color: var(--rubrica-testo);
}

.tessera__ultimo a {
  position: relative;
  z-index: 1;
  font-size: var(--t2);
  font-weight: 600;
  color: var(--inchiostro);
}

.tessera__conteggio {
  margin: auto 0 0;
  font-size: var(--t1);
  line-height: 1.45;
  color: var(--blu);
}

@supports selector(:has(a)) {
  .tessera:has(.tessera__nome a:focus-visible) {
    outline: 3px solid var(--blu);
    outline-offset: 3px;
  }

  .tessera__nome a:focus-visible {
    outline: none;
    box-shadow: none;
  }
}

/* Vecchio elenco delle rubriche (in attesa delle tessere) */
.rubriche {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--gutter);
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  font-family: var(--font-ui);
}

.rubriche a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.5rem 1rem;
  background: var(--superficie);
  border-radius: var(--raggio);
  text-decoration: none;
  color: var(--inchiostro);
}

.rubriche .conteggio {
  font-size: var(--t1);
  color: var(--secondario);
}

/* --- Intestazioni di pagina, paginazione, ricerca --------------------------------------------------- */

.intestazione-elenco {
  margin-bottom: 0;
}

.intestazione-elenco h1 {
  margin-top: 0.25rem;
}

.intestazione-elenco p {
  font-family: var(--font-ui);
  font-size: var(--t2);
  line-height: 1.5;
  color: var(--secondario);
  max-width: var(--misura);
}

/* Intestazione della pagina rubrica/tag/autore: blocco bianco con banda 8 px in tinta */
.intestazione-rubrica {
  background: var(--superficie);
  border-top: 8px solid var(--rubrica-barra);
  border-radius: var(--raggio);
  padding: 1.5rem 1.5rem 1.25rem;
}

.intestazione-rubrica h1 {
  margin: 0.25rem 0 0;
  font-size: var(--t6);
}

.intestazione-rubrica__descrizione {
  margin: 0.75rem 0 0;
  max-width: var(--misura);
  font-size: var(--t3);
  line-height: 1.65;
  color: var(--secondario);
}

.intestazione-rubrica__quota {
  max-width: var(--misura);
  margin-top: 1rem;
  color: var(--rubrica-testo);
  padding-top: 0;
}

.intestazione-rubrica__stato,
.intestazione-rubrica__argomenti {
  margin: 0.75rem 0 0;
  font-family: var(--font-ui);
  font-size: var(--t1);
  line-height: 1.45;
  color: var(--secondario);
}

.fonte {
  font-family: var(--font-ui);
  font-size: var(--t1);
  line-height: 1.45;
  color: var(--secondario);
}

.paginazione {
  font-family: var(--font-ui);
  font-size: var(--t2);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: var(--gutter);
}

.paginazione a,
.paginazione span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0 1rem;
  border: 1px solid var(--bordo-forte);
  border-radius: var(--raggio);
  text-decoration: none;
  background: var(--superficie);
  color: var(--inchiostro);
}

.paginazione [aria-current="page"] {
  background: var(--blu-notte);
  color: var(--superficie);
  border-color: var(--blu-notte);
}

.htmx-request .indicatore {
  visibility: visible;
}

.indicatore {
  visibility: hidden;
  font-family: var(--font-ui);
  font-size: var(--t1);
  color: var(--secondario);
}

/* --- Articolo ---------------------------------------------------------------------------------------- */

.articolo {
  max-width: var(--misura);
  margin-inline: auto;
  width: 100%;
}

.articolo__testata {
  border-top: 4px solid var(--rubrica-barra);
  padding-top: 1rem;
  margin-bottom: 1.5rem;
}

.articolo__testata h1 {
  font-size: var(--t7);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0.5rem 0 0;
}

.articolo__testata .etichetta-rubrica {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* 20 px fra il sottotitolo e la firma estesa (specifica «articolo», testata) */
.articolo__testata .firma--articolo {
  margin-top: 1.25rem;
}

.sottotitolo {
  font-family: var(--font-testo);
  font-size: var(--t4);
  line-height: 1.4;
  color: var(--secondario);
  margin: 0.75rem 0 0;
}

.articolo__dati {
  margin: 0.75rem 0 0;
  font-family: var(--font-ui);
  font-size: var(--t1);
  line-height: 1.45;
  color: var(--secondario);
}

.articolo__dati dt,
.articolo__dati dd {
  display: inline;
  margin: 0;
}

.articolo__dati dt {
  font-weight: 400;
}

.articolo__dati dd + dt::before {
  content: " · ";
}

/* «1 tabella», «12 riferimenti», «Codice 7k3fq, versione 2»: un'ancora di due parole non si spezza a metà */
.articolo__dati a {
  white-space: nowrap;
}

.copertina {
  margin: 1.5rem 0 0;
}

.copertina picture,
.copertina img {
  display: block;
  width: 100%;
}

.copertina img,
.figura img {
  border-radius: var(--raggio);
}

/* Cornice con hairline per qualunque immagine non ritagliata (copertina, figure, evidenza): l'inset
   box-shadow sull'<img> resta sotto la foto e non si vede, il filetto va su uno pseudo-elemento sopra. */
.cornice {
  position: relative;
  display: block;
  border-radius: var(--raggio);
  overflow: hidden;
}

.cornice::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--raggio);
  box-shadow: inset 0 0 0 1px var(--hairline);
  pointer-events: none;
}

.cornice img {
  display: block;
  width: 100%;
  height: auto;
  box-shadow: none;
}

.abstract {
  font-family: var(--font-testo);
  font-size: var(--t3);
  font-weight: 400;
  line-height: 1.65;
  margin: 1.5rem 0 0;
}

.articolo .in-breve {
  margin: 1.5rem 0;
}

.articolo__corpo p {
  margin-bottom: 1em;
}

.articolo__corpo h2 {
  font-size: var(--t5);
  margin-top: 1.6em;
}

.articolo__corpo h3 {
  font-size: var(--t4);
}

.figura,
.video,
.formula {
  margin: 1.5rem 0;
}

.figura img {
  display: block;
  width: 100%;
}

.figura .numero,
.tabella .numero {
  font-weight: 600;
  color: var(--inchiostro);
}

.formula {
  text-align: center;
  overflow-x: auto;
  padding: 0.5rem 0;
}

.formula code {
  display: inline-block;
  text-align: start;
  white-space: pre-wrap;
  background: var(--superficie);
  padding: 0.5rem 1rem;
  border-radius: var(--raggio);
  border: 1px solid var(--bordo);
}

.video-facciata {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--inchiostro);
  border-radius: var(--raggio);
  overflow: hidden;
  color: var(--superficie);
  text-decoration: none;
}

.video-facciata img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
}

.video-facciata__pulsante {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--t2);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.video-facciata__pulsante::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 14px 0 14px 24px;
  border-color: transparent transparent transparent currentColor;
}

.video iframe {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
  border: 0;
  border-radius: var(--raggio);
}

.allegato {
  font-family: var(--font-ui);
  font-size: var(--t2);
  background: var(--superficie);
  border: 1px solid var(--bordo);
  border-radius: var(--raggio);
  padding: 0.75rem 1rem;
}

.allegato a {
  font-weight: 600;
}

.allegato .dettagli {
  color: var(--secondario);
  font-size: var(--t1);
}

.riferimenti {
  font-family: var(--font-ui);
  font-size: var(--t2);
  line-height: 1.5;
}

.riferimenti li {
  margin-bottom: 0.5rem;
  overflow-wrap: anywhere;
}

.tag {
  margin-top: 2rem;
}

.tag-elenco {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tag-elenco a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 1rem;
  border-radius: 999px;
  border: 1px solid var(--bordo-forte);
  font-family: var(--font-ui);
  font-size: var(--t2);
  text-decoration: none;
  color: var(--inchiostro);
}

.articolo__piede {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--bordo);
  font-family: var(--font-ui);
  font-size: var(--t1);
  line-height: 1.45;
}

.articolo__piede h2 {
  font-family: var(--font-ui);
  font-size: var(--t3);
  font-weight: 600;
  margin: 1.5rem 0 0.5rem;
}

.citazione {
  background: var(--superficie);
  border-radius: var(--raggio);
  padding: 1rem 1.25rem;
  font-family: var(--font-testo);
  font-size: var(--t2);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.citazione .codice,
.citazione .indirizzo {
  font-family: var(--font-mono);
  font-size: 0.9375rem;
}

.condivisione ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.condivisione ul a,
.condivisione button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 1rem;
  border: 1px solid var(--blu);
  border-radius: var(--raggio);
  background: var(--superficie);
  color: var(--blu);
  text-decoration: none;
  font: 600 var(--t2) / 1.3 var(--font-ui);
  cursor: pointer;
}

.condivisione ul a:hover,
.condivisione button:hover {
  background: var(--blu);
  color: var(--superficie);
}

.condivisione .esito {
  color: var(--verde);
}

.disclaimer,
.dicitura-ai,
.licenza {
  color: var(--secondario);
  font-size: var(--t1);
}

.scheda-autore {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: var(--superficie);
  border-radius: var(--raggio);
  padding: var(--scheda-padding);
  margin: 1rem 0;
  font-family: var(--font-ui);
  font-size: var(--t1);
  line-height: 1.45;
}

/* Il ritratto è un cerchio di 96 px: l'elemento flex è il <picture>, che non deve cedere al testo */
.scheda-autore > picture {
  flex: 0 0 auto;
  display: block;
}

.scheda-autore img {
  display: block;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.scheda-autore h3,
.scheda-autore h2 {
  margin: 0 0 0.25rem;
  font-family: var(--font-ui);
  font-size: var(--t3);
  font-weight: 600;
}

/* Il nome è un link da 44 px nel colore del testo (la scheda è già bianca e riconoscibile) */
.scheda-autore h2 a,
.scheda-autore h3 a {
  color: var(--inchiostro);
  display: inline-block;
  padding-block: 0.5rem;
  margin-block: -0.5rem;
}

/* « · coautore» / « · con il contributo di» accanto al nome, nella pagina articolo */
.scheda-autore__ruolo {
  font-weight: 400;
  color: var(--secondario);
}

/* «N articoli» in fondo alla scheda, nell'indice degli autori */
.scheda-autore__conteggio {
  margin: 0.5rem 0 0;
}

.scheda-autore p {
  margin: 0 0 0.25rem;
}

.scheda-autore p strong {
  font-size: var(--t2);
}

.scheda-autore--grande img {
  width: 160px;
  height: 160px;
}

.scheda-autore .bio {
  font-family: var(--font-testo);
  font-size: var(--t2);
  line-height: 1.5;
  margin-top: 0.5rem;
}

.correlati {
  margin-top: var(--sezione);
}

.griglia-autori {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--gutter);
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}

.griglia-autori .scheda-autore {
  margin: 0;
}

.link-professionali {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.link-professionali a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 1rem;
  border: 1px solid var(--bordo-forte);
  border-radius: 999px;
  text-decoration: none;
  color: var(--inchiostro);
}

/* Riquadro d'invito della pagina rubrica */
.invito-rubrica {
  background: var(--superficie);
  border-inline-start: 4px solid var(--rubrica-barra);
  padding: 1rem 1.25rem;
  font-size: var(--t3);
  line-height: 1.65;
}

.invito-rubrica p {
  margin: 0;
}

.invito-rubrica a {
  font-family: var(--font-ui);
  font-size: var(--t2);
  font-weight: 600;
}

/* --- Piè di pagina ---------------------------------------------------------------------------------- */

.piede {
  background: var(--blu-notte);
  color: var(--superficie);
  font-family: var(--font-ui);
  font-size: var(--t2);
  line-height: 1.5;
  padding-block: 2rem;
}

@media (min-width: 64rem) {
  .piede {
    padding-block: 2.5rem;
  }
}

.piede a {
  color: var(--superficie);
}

.gerenza {
  margin: 0 0 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--filetto-su-blu);
  font-size: var(--t1);
  line-height: 1.6;
  color: var(--tagline);
}

.gerenza a {
  color: var(--tagline);
  min-width: 0;
}

.piede__colonne {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.piede__titolo {
  color: var(--giallo);
  margin: 0 0 0.5rem;
}

.piede ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.piede li a {
  padding: 0 0.5rem;
  margin-left: -0.5rem;
  gap: 0.625rem;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.piede__nota {
  margin: 1.25rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--filetto-su-blu);
  font-size: var(--t1);
  line-height: 1.6;
  color: var(--tagline);
  max-width: 90ch;
}

/* Collegamento al pannello di redazione in fondo alla pagina (copy deck: pie_pannello). */
.piede__pannello { margin: var(--sp-3, 1rem) 0 0; }
.piede__pannello a { color: #ffffff; font-weight: 600; padding: 0 0.5rem; margin-left: -0.5rem; text-underline-offset: 0.15em; }

/* --- Stampa (A4 dall'iPad) --------------------------------------------------------------------------- */

@media print {
  @page {
    margin: 20mm;
  }

  .salta,
  .testata,
  .nav-rubriche,
  .nav-telefono,
  .cerca,
  .condivisione,
  .correlati,
  .tag,
  .piede,
  .video-facciata,
  .paginazione {
    display: none !important;
  }

  .solo-stampa {
    display: block;
    font-family: var(--font-ui);
    font-size: 9pt;
    color: #000;
    margin: 4pt 0 8pt;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
    line-height: 1.5;
    display: block;
  }

  main,
  .contenitore {
    padding: 0;
    max-width: none;
  }

  .articolo {
    max-width: none;
  }

  .articolo__testata {
    border-top-color: #000;
  }

  .articolo__corpo a[href^="http"]:not(.riferimenti a)::after {
    content: " (" attr(href) ")";
    font-family: var(--font-ui);
    font-size: 8pt;
    word-break: break-all;
  }

  .figura,
  .tabella,
  .formula,
  .in-breve,
  .scheda-autore {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .figura img,
  .copertina img {
    max-height: 130mm;
    width: auto;
    max-width: 100%;
    box-shadow: none;
  }

  /* Immagini al più mezza pagina anche dentro la cornice, senza hairline */
  .cornice {
    overflow: visible;
  }

  .cornice::after {
    display: none;
  }

  .cornice img {
    width: auto;
    max-width: 100%;
    max-height: 130mm;
  }

  .tabella-scorrevole {
    overflow: visible;
    border: 0;
  }

  table {
    font-size: 9pt;
  }

  th:first-child,
  td:first-child {
    position: static;
  }

  .in-breve,
  .citazione,
  .allegato {
    background: transparent;
    border: 1px solid #000;
  }

  .in-breve.quota {
    border-width: 1px 0 0;
  }

  .dicitura-ai,
  .disclaimer,
  .licenza {
    font-size: 8pt;
    color: #000;
  }

  .video .riassunto {
    display: block;
  }
}

/* --- Movimento -------------------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- Accesso (pagine allauth: login, codice, password; T-065) --------------------------------------- */

.accesso {
  max-width: 34rem;
  margin: 0 auto 2rem;
  font-family: var(--font-ui);
  font-size: var(--t2);
  line-height: 1.5;
  width: 100%;
}

.accesso h1 {
  font-size: var(--t6);
}

.accesso__riquadro {
  background: var(--superficie);
  border-radius: var(--raggio);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.accesso__riquadro h2 {
  margin-top: 0;
  font-size: var(--t5);
}

.accesso input[type="email"],
.accesso input[type="password"],
.accesso input[type="text"] {
  font: inherit;
  font-size: var(--t3);
  min-height: 48px;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--bordo-forte);
  border-radius: var(--raggio);
  background: var(--superficie);
  color: var(--inchiostro);
}

.accesso input.codice {
  font-family: var(--font-mono);
  font-size: 1.6rem;
  letter-spacing: 0.3em;
  text-align: center;
}

.accesso input[type="checkbox"] {
  width: 1.4rem;
  height: 1.4rem;
}

.accesso .campo {
  margin-bottom: 1rem;
}

.accesso .campo--casella {
  display: flex;
  gap: 0.6rem;
  align-items: center;
}

.accesso .campo--casella label {
  margin: 0;
  font-weight: 400;
}

.accesso .campo--errore input {
  border-color: var(--rosso);
}

.accesso .campo__aiuto,
.accesso .nota {
  font-size: var(--t1);
  color: var(--secondario);
}

.accesso .campo__aiuto {
  margin: 0.25rem 0 0;
}

.accesso .errore {
  color: var(--rosso);
  font-weight: 600;
  list-style: none;
  padding: 0;
  margin: 0.25rem 0 0.5rem;
}

.accesso .pulsante {
  width: 100%;
  font-size: var(--t3);
  min-height: 48px;
}

.accesso .azioni {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.accesso .azioni .pulsante {
  width: auto;
  flex: 1 1 10rem;
}

.accesso details {
  margin-top: 1rem;
}

.accesso summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--blu);
  padding: 0.5rem 0;
}

.accesso .indirizzo {
  font-weight: 700;
  overflow-wrap: anywhere;
}

.accesso .messaggi {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
}

.accesso .messaggi li {
  background: var(--avviso-sfondo);
  border-inline-start: 4px solid var(--avviso-bordo);
  padding: 0.5rem 1rem;
  border-radius: 0 var(--raggio) var(--raggio) 0;
  margin-bottom: 0.5rem;
}

.accesso .messaggi .success {
  background: #e8f3ec;
  border-color: var(--verde);
}

.accesso .messaggi .error {
  background: #fbecec;
  border-color: var(--rosso);
}