/*
 * Claira, tema di novembre 2026
 * =============================
 * Evoluzione del sito di prima, non un cambio di identità: nero e blu, titoli in Source Serif,
 * corpo in Inter, la foto di Claira come volto della testata. Nessuna immagine generata: le
 * copertine sono costruite dal codice con i dati dell'edizione (inc/claira-v2.php).
 * Sostituisce i quattordici fogli di prima. Prototipo: docs/proposta-2026-11/prototipo/.
 *
 * Contrasti misurati:
 *   sul nero      testo #E7ECF4 17,7:1 · secondario #93A2BA 8,1:1 · terziario #7D8BA3 6,1:1 · blu #4C8FE0 6,3:1
 *   sui pannelli  #0B111C: secondario 7,3:1 · terziario 5,5:1
 *   bottone       bianco su #0057B7 6,9:1 · tacche della cadenza #44679A 3,7:1
 */

@font-face { font-family: 'Source Serif 4'; font-weight: 400 700; font-display: swap; src: url('fonts/source-serif.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 300 800; font-display: swap; src: url('fonts/inter.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 400 700; font-display: swap; src: url('fonts/jetbrains-mono.woff2') format('woff2'); }

:root {
  --nero: #000000;
  --pannello: #0B111C;
  --pannello-2: #111A29;
  --filetto: #1C2636;
  --filetto-forte: #2A3850;
  --testo: #E7ECF4;
  --testo-2: #93A2BA;
  --testo-3: #7D8BA3;
  --corpo: #D5DCE7;
  --blu: #0057B7;
  --blu-hover: #1A6BD0;
  --blu-testo: #4C8FE0;
  --blu-luce: #8DB9F2;
  --tacca: #44679A;

  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', monospace;

  --pagina: 75rem;
  --gutter: clamp(1rem, 3vw, 1.5rem);
  --r: 6px;
  --testata: 4rem;
  /* la conferma del banner cookie (cookie-consent.js) usa questo nome del foglio di prima */
  --gradient-primary: linear-gradient(135deg, #0057B7, #1A6BD0);
  color-scheme: dark;
}

/* ------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--testata) + 1rem); }
body { margin: 0; background: var(--nero); color: var(--testo); font: 400 1rem/1.6 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg, canvas { display: block; max-width: 100%; }
figure { margin: 0; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1, h2, h3, h4 { text-wrap: balance; }
p, li { text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--blu-luce); outline-offset: 3px; border-radius: 2px; }
.contenitore { max-width: var(--pagina); margin: 0 auto; padding: 0 var(--gutter); }
.solo-lettori { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.solo-lettori:focus { position: fixed; top: 0.5rem; left: 0.5rem; z-index: 50; width: auto; height: auto; clip: auto; padding: 0.6rem 1rem; background: var(--blu); color: #fff; border-radius: var(--r); }
.mono { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; }
.blu { color: var(--blu-testo); }
.unito { white-space: nowrap; }

/* ------------------------------------------------------------- bottoni e link */
.bottone { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 2.75rem; padding: 0.55rem 1.15rem; border-radius: var(--r); background: var(--blu); color: #fff; font: 600 0.95rem/1.25 var(--sans); text-align: center; border: 1px solid var(--blu); cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.bottone:hover { background: var(--blu-hover); border-color: var(--blu-hover); }
.bottone--vuoto { background: transparent; color: var(--testo); border-color: var(--filetto-forte); }
.bottone--vuoto:hover { background: var(--pannello-2); border-color: var(--blu-testo); }
.bottone--piccolo { min-height: 2.25rem; padding: 0 0.9rem; font-size: 0.875rem; white-space: nowrap; }
.link { color: var(--blu-testo); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.link:hover { color: var(--blu-luce); }
/* i link da soli, fuori da una frase, hanno un'area di tocco piena */
.link--azione { display: inline-flex; align-items: center; min-height: 2.75rem; }

/* ------------------------------------------------------------- testata */
.testata { position: sticky; top: 0; z-index: 20; background: var(--nero); border-bottom: 1px solid var(--filetto); }
.testata__riga { display: flex; align-items: center; gap: 1.75rem; min-height: var(--testata); }
.marchio { display: flex; align-items: center; gap: 0.75rem; min-width: 0; min-height: 2.75rem; margin-right: auto; }
/* l'anello e' fuori dal box: il margine lo riporta sul filo del testo */
.marchio__volto { width: 2.25rem; height: 2.25rem; margin-left: 3px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--nero), 0 0 0 3px var(--blu); flex: none; }
.marchio__testo { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.marchio__nome { font: 700 1.3rem/1.1 var(--sans); letter-spacing: -0.01em; color: var(--testo); }
.marchio__sotto { color: var(--testo-3); font-size: 0.6875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav { display: flex; align-items: center; gap: 1.75rem; }
.nav a { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: 0.9375rem; font-weight: 500; color: var(--testo-2); }
.nav a:hover { color: var(--testo); }
.nav a.attiva { color: var(--testo); box-shadow: inset 0 -2px 0 var(--blu-testo); }

.dispaccio { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.25rem; padding: 0.65rem 0; border-bottom: 1px solid var(--filetto); color: var(--testo-3); }
.dispaccio .blu { font-weight: 700; }

/* ------------------------------------------------------------- apertura */
.apertura { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); align-items: center; gap: 2.5rem; min-height: 32rem; }
.apertura__testo { padding: 3.5rem 0; }
.occhiello { color: var(--blu-testo); margin-bottom: 1rem; }
.titolo-apertura { font: 700 clamp(2.4rem, 4.6vw, 3.75rem)/1.06 var(--serif); letter-spacing: -0.02em; margin: 0 0 1.25rem; }
.sommario { font: 400 clamp(1.08rem, 1.4vw, 1.25rem)/1.55 var(--serif); color: var(--corpo); max-width: 34rem; margin-bottom: 2rem; }
.azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; }
.apertura__volto { position: relative; align-self: stretch; min-height: 26rem; }
/* una sola maschera ellittica: la foto sfuma su ogni lato senza bordi netti.
   Con due sfumature lineari composte, in Chrome restava un filo verticale a sinistra. */
.apertura__volto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 40% 28%;
  -webkit-mask-image: radial-gradient(ellipse 54% 60% at 50% 46%, #000 48%, rgba(0, 0, 0, 0.55) 72%, transparent 100%);
  mask-image: radial-gradient(ellipse 54% 60% at 50% 46%, #000 48%, rgba(0, 0, 0, 0.55) 72%, transparent 100%); }
.apertura__firma { position: absolute; right: 0; bottom: 1.25rem; text-align: right; color: var(--testo-2); }
.apertura__firma b { display: block; font: 600 1rem/1.3 var(--sans); color: var(--testo); text-transform: none; letter-spacing: 0; }

/* ------------------------------------------------------ come nasce (banda) */
.nascita { border-top: 1px solid var(--filetto); border-bottom: 1px solid var(--filetto); padding: 1.75rem 0 1.5rem; }
.nascita__testa { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 0.25rem 1.5rem; margin-bottom: 1rem; }
.nascita__titolo { font: 700 1.25rem/1.2 var(--serif); margin: 0; }
.nascita__nota { color: var(--testo-3); font-size: 0.875rem; }
/* La banda ha una didascalia in alto e le etichette sopra le particelle (claira.js): serve
   l'altezza per leggerle. Il filetto la separa dal fondo, che e' lo stesso nero della pagina. */
.nascita__banda { position: relative; height: 15rem; border-radius: var(--r); background: var(--nero); border: 1px solid var(--filetto); overflow: hidden; }
.nascita__banda canvas { width: 100%; height: 100%; }
.banda__testi { position: absolute; inset: 0; pointer-events: none; }
.banda__didascalia { position: absolute; top: 0.85rem; left: 1rem; right: 1rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.85rem; }
.banda__fase { color: var(--blu-testo); }
.banda__frase { font-size: 0.9375rem; line-height: 1.45; color: var(--testo); }
.banda__didascalia.cambia { animation: didascalia 0.45s ease-out; }
@keyframes didascalia { from { opacity: 0; transform: translateY(0.2rem); } }
/* le etichette arrivano quando le particelle sono quasi ferme */
.segno { position: absolute; font: 500 0.6875rem/1.2 var(--mono); letter-spacing: 0.04em; color: var(--testo-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; animation: segno 0.5s ease-out 1.8s forwards; }
.segno b { font-weight: 600; color: var(--testo); }
.segno--asse { transform: translate(-50%, 0.4rem); }
.segno--blu, .blu-luce { color: var(--blu-luce); }
.segno--sinistra { transform: translate(calc(-100% - 0.5rem), calc(-100% - 0.15rem)); }
.segno--destra { transform: translate(0.5rem, calc(-100% - 0.15rem)); }
.segno--sopra { transform: translate(0, calc(-100% - 0.3rem)); }
.soglia { position: absolute; border-left: 1px dashed var(--blu-testo); opacity: 0; animation: segno 0.5s ease-out 1.6s forwards; }
@keyframes segno { to { opacity: 1; } }
.nascita__passi { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; }
/* La linea sopra i passi e' il tempo della banda (claira.js): piena per le fasi gia' raccontate,
   si riempie durante quella in corso con --avanzamento da 0 a 1. Il filetto grigio e' il binario. */
.passo { position: relative; border-top: 2px solid var(--filetto); padding-top: 0.75rem; }
.passo::before { content: ''; position: absolute; left: 0; right: 0; top: -2px; height: 2px; background: var(--blu-testo); transform-origin: left center; transform: scaleX(0); }
.passo.attivo::before { transform: scaleX(var(--avanzamento, 0)); }
.passo.fatto::before { transform: none; }
.passo__nome { color: var(--blu-testo); }
.passo__numero { font: 700 1.75rem/1.1 var(--serif); margin: 0.35rem 0 0.25rem; color: var(--testo); }
.passo__testo { font-size: 0.875rem; color: var(--testo-2); line-height: 1.45; margin-top: 0.35rem; text-wrap: balance; }

/* ------------------------------------------------------------- sezioni */
.sezione { padding: 3.5rem 0 0; }
.sezione__testa { display: grid; gap: 0.5rem; margin-bottom: 1.5rem; max-width: 46rem; }
.sezione__titolo { font: 700 clamp(1.5rem, 2.4vw, 1.875rem)/1.15 var(--serif); letter-spacing: -0.01em; margin: 0; }
.sezione__nota { color: var(--testo-2); font-size: 0.9375rem; }
.sezione--archivio { padding-top: 2.5rem; }
.sezione--archivio .sezione__titolo { font-size: clamp(1.9rem, 3.4vw, 2.5rem); }
[id] { scroll-margin-top: calc(var(--testata) + 1rem); }

/* le schede delle edizioni */
.registro { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 1.5rem; }
.registro__tutte { margin-top: 1.25rem; }
/* in home le schede sono tre, su una riga. Sotto gli 860 px ne restano due: a tre colonne le
   copertine diventavano troppo strette, a due la terza restava da sola su una riga */
.registro.registro--tre { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) {
  .registro.registro--tre { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .registro--tre > :nth-child(n+3) { display: none; }
}
.archivio__cadenza { margin-bottom: 2.5rem; }
.archivio__cadenza .cadenza { padding-top: 0; }
.scheda { display: flex; flex-direction: column; gap: 0.85rem; }
.scheda:hover .copertina { border-color: var(--blu-testo); }
.scheda__meta { color: var(--testo-3); display: flex; gap: 0.75rem; flex-wrap: wrap; }
.scheda__meta .blu { font-weight: 700; }
.scheda__titolo { font: 700 1.3rem/1.25 var(--serif); margin: 0; }
.scheda:hover .scheda__titolo { color: var(--blu-luce); }

/* --------------------------------------------- copertine costruite dal codice */
.copertina { position: relative; aspect-ratio: 16 / 9; border: 1px solid var(--filetto); border-radius: var(--r); overflow: hidden; container-type: inline-size;
  background: radial-gradient(120% 90% at 100% 0%, rgba(0, 87, 183, 0.32), transparent 55%), linear-gradient(180deg, #0B111C, #070B12); transition: border-color 0.15s; }
.copertina::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(141, 185, 242, 0.12) 1px, transparent 1.2px); background-size: 18px 18px; -webkit-mask-image: linear-gradient(135deg, transparent 35%, #000); mask-image: linear-gradient(135deg, transparent 35%, #000); }
.copertina__interno { position: absolute; inset: 0; padding: 6.5% 7%; display: flex; flex-direction: column; gap: 3cqw; min-height: 0; }
.copertina__interno > * { flex-shrink: 0; }
.copertina__etichetta { font: 600 max(11px, 2.7cqw)/1.2 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--blu-luce); }
/* il numero della settimana: cifra a sinistra, cosa misura e chi a destra */
.copertina--numero .copertina__corpo { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 5cqw; }
.copertina--numero .copertina__valore { font: 700 max(34px, 15cqw)/1 var(--serif); color: var(--blu-luce); letter-spacing: -0.03em; }
.copertina__cosa { display: block; font: 500 max(13px, 3.7cqw)/1.35 var(--sans); color: var(--testo); }
.copertina__fonte { display: block; margin-top: 2cqw; font: 500 max(11px, 2.6cqw)/1.3 var(--mono); color: var(--testo-2); letter-spacing: 0.03em; }
/* la domanda */
.copertina--domanda .copertina__domanda { margin: auto 0; font: 700 max(17px, 6cqw)/1.18 var(--serif); color: var(--testo); padding-left: 3.5cqw; border-left: max(2px, 0.8cqw) solid var(--blu-testo); text-wrap: balance; }
/* le tre domande */
.copertina--tre ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.4cqw; counter-reset: q; }
.copertina--tre li { display: grid; grid-template-columns: max(16px, 5cqw) minmax(0, 1fr); align-items: baseline; font: 500 max(13px, 3.6cqw)/1.3 var(--sans); color: var(--testo); counter-increment: q; text-wrap: balance; }
.copertina--tre li::before { content: counter(q); font: 700 max(14px, 4.4cqw)/1 var(--serif); color: var(--blu-luce); }
/* l'impronta */
.copertina--impronta .copertina__riga { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; gap: 6cqw; }
.copertina--impronta .copertina__disegno { height: 100%; aspect-ratio: 1; flex: none; }
.copertina--impronta .copertina__disegno svg { width: 100%; height: 100%; }
.copertina--impronta .copertina__spiega { flex: 1 1 0; min-width: 0; font: 500 max(12px, 3.6cqw)/1.4 var(--sans); color: var(--testo-2); }
.copertina--impronta .copertina__spiega b { color: var(--testo); font-weight: 600; }
/* nella pagina edizione la copertina e' una fascia sotto la firma, non un manifesto */
.copertina--articolo { aspect-ratio: 16 / 5; margin-top: 2rem; }
.copertina--articolo .copertina__interno { padding: 3.6% 4.5%; gap: 1.4cqw; }
.copertina--articolo .copertina__etichetta { font-size: max(11px, 1.55cqw); }
.copertina--articolo.copertina--numero .copertina__valore { font-size: max(34px, 8cqw); }
.copertina--articolo .copertina__cosa { font-size: max(14px, 2.3cqw); }
.copertina--articolo .copertina__fonte { font-size: max(11px, 1.55cqw); margin-top: 1cqw; }
.copertina--articolo .copertina__domanda { font-size: max(18px, 3.4cqw); padding-left: 2cqw; border-left-width: max(2px, 0.45cqw); }
.copertina--articolo.copertina--tre ol { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3cqw; }
.copertina--articolo.copertina--tre li { font-size: max(13px, 1.9cqw); grid-template-columns: max(16px, 3cqw) minmax(0, 1fr); }
.copertina--articolo.copertina--tre li::before { font-size: max(14px, 2.6cqw); }
.copertina--articolo .copertina__spiega { font-size: max(13px, 2cqw); }

/* ------------------------------------------------------------- cadenza */
.cadenza { padding: 2.25rem 0 0; }
.cadenza__testa { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.25rem 1rem; color: var(--testo-3); margin-bottom: 0.75rem; }
.cadenza__testa b { color: var(--testo-2); font-weight: 600; }
.cadenza__barre { display: flex; align-items: flex-end; gap: 3px; height: 3.5rem; }
.cadenza__barre a { flex: 1; background: var(--tacca); border-radius: 1px; min-height: 18%; transition: background 0.15s; }
.cadenza__barre a:hover, .cadenza__barre a:focus-visible { background: var(--testo); }
.cadenza__barre a.ultima { background: var(--blu-luce); }
.cadenza__asse { display: flex; justify-content: space-between; gap: 1rem; color: var(--testo-3); margin-top: 0.5rem; }

/* ------------------------------------------------------------- community */
.community { display: grid; grid-template-columns: 9rem minmax(0, 1fr); align-items: center; gap: 2rem; padding: 2.25rem; border: 1px solid var(--filetto); border-radius: calc(var(--r) * 2); background: linear-gradient(90deg, rgba(0, 87, 183, 0.18), transparent 60%), var(--pannello); }
.community img { width: 9rem; height: 9rem; margin: 4px; border-radius: 50%; object-fit: cover; object-position: 50% 30%; box-shadow: 0 0 0 3px var(--nero), 0 0 0 4px var(--blu); }
.community h2 { font: 700 clamp(1.375rem, 2.2vw, 1.75rem)/1.2 var(--serif); margin: 0.4rem 0 0.6rem; }
.community__testo > p:not(.mono) { color: var(--testo-2); max-width: 40rem; }
.community .bottone { margin-top: 1.25rem; }

/* chi e' Claira: lo stesso pannello della community, con gli altri due lavori di Claira in due
   schede. La scheda della community ha il filetto blu e il bottone: e' l'invito principale */
.chi { display: grid; gap: 1.75rem; padding: 2.25rem; border: 1px solid var(--filetto); border-radius: calc(var(--r) * 2); background: linear-gradient(90deg, rgba(0, 87, 183, 0.18), transparent 60%), var(--pannello); }
.chi__testa { display: grid; grid-template-columns: 9rem minmax(0, 1fr); align-items: center; gap: 2rem; }
.chi__testa img { width: 9rem; height: 9rem; margin: 4px; border-radius: 50%; object-fit: cover; object-position: 50% 30%; box-shadow: 0 0 0 3px var(--nero), 0 0 0 4px var(--blu); }
.chi h2 { font: 700 clamp(1.375rem, 2.2vw, 1.75rem)/1.2 var(--serif); margin: 0.4rem 0 0.6rem; }
.chi__testa p:not(.mono) { color: var(--testo-2); max-width: 46rem; text-wrap: pretty; }
.lavori { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto 1fr auto; column-gap: 1rem; }
.lavoro { grid-row: span 4; display: grid; grid-template-rows: subgrid; row-gap: 0.5rem; padding: 1.25rem; border: 1px solid var(--filetto); border-radius: var(--r); background: var(--pannello-2); }
.lavoro--invito { border-color: var(--blu); }
.lavoro__quando { color: var(--blu-testo); }
.lavoro__nome { font: 700 1.125rem/1.25 var(--serif); margin: 0; }
.lavoro__testo { color: var(--testo-2); font-size: 0.875rem; line-height: 1.5; text-wrap: pretty; }
.lavoro > a { justify-self: start; align-self: end; margin-top: 0.5rem; }

/* ------------------------------------------------------------- piede */
.piede { margin-top: 4.5rem; border-top: 1px solid var(--filetto); padding: 2.5rem 0 2rem; }
.piede__griglia { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr)); gap: 2rem; }
.piede__titolo { font: 600 0.9375rem/1.3 var(--sans); margin: 0 0 0.75rem; color: var(--testo); }
.piede p, .piede li { color: var(--testo-2); font-size: 0.875rem; line-height: 1.6; }
.piede__invito { margin-top: 0.5rem; }
.piede ul { list-style: none; margin: 0; padding: 0; }
.piede li a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.piede li a:hover, .piede__legale a:hover { color: var(--testo); }
.piede__base { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--filetto); color: var(--testo-3); }
.piede__legale { display: flex; flex-wrap: wrap; gap: 0 1.25rem; font-size: 0.875rem; color: var(--testo-2); }
.piede__legale a { display: inline-flex; align-items: center; min-height: 2.75rem; }

/* ------------------------------------------------------------- articolo */
/* il margine occupa anche la riga delle edizioni vicine: cosi' l'indice resta fermo fino in
   fondo invece di scivolare sotto la testata quando l'articolo finisce */
.articolo { display: grid; grid-template-columns: minmax(0, 41rem) minmax(0, 15rem); grid-template-areas: "corpo margine" "vicine margine"; justify-content: space-between; column-gap: 3rem; padding-top: 3rem; }
.articolo__corpo { grid-area: corpo; min-width: 0; }
.articolo__testa .occhiello { margin-bottom: 0.9rem; }
.articolo h1 { font: 700 clamp(2.1rem, 4vw, 3.1rem)/1.08 var(--serif); letter-spacing: -0.02em; margin: 0 0 1rem; }
.articolo__sommario { font: 400 1.2rem/1.55 var(--serif); color: var(--corpo); margin-bottom: 1.5rem; }
.firma { display: flex; align-items: center; gap: 0.85rem; padding: 1rem 0; border-top: 1px solid var(--filetto); border-bottom: 1px solid var(--filetto); }
.firma img { width: 2.75rem; height: 2.75rem; margin-left: 3px; flex: none; border-radius: 50%; object-fit: cover; object-position: 50% 30%; box-shadow: 0 0 0 2px var(--nero), 0 0 0 3px var(--blu); }
.firma b { display: block; font-weight: 600; }
.firma span { color: var(--testo-3); font-size: 0.875rem; }

.lettura { color: var(--corpo); font-size: 1.125rem; line-height: 1.72; margin-top: 2.25rem; }
.lettura p { margin: 0 0 1.2em; }
.lettura h2 { font: 700 1.5rem/1.25 var(--serif); color: var(--testo); margin: 2.2em 0 0.65em; letter-spacing: -0.01em; }
.lettura h3 { font: 700 1.2rem/1.3 var(--serif); color: var(--testo); margin: 1.8em 0 0.5em; }
.lettura ul, .lettura ol { padding-left: 1.3rem; margin: 0 0 1.2em; }
.lettura li { margin: 0.35em 0; }
.lettura strong { color: var(--testo); }
.lettura a:not([class]) { color: var(--blu-testo); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; overflow-wrap: anywhere; }
.lettura a:not([class]):hover { color: var(--blu-luce); }
.lettura table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.5; margin: 1.5em 0; display: block; overflow-x: auto; }
.lettura th, .lettura td { border: 1px solid var(--filetto); padding: 0.55rem 0.7rem; text-align: left; vertical-align: top; }
.lettura th { background: var(--pannello); color: var(--testo); font-weight: 600; }
.lettura blockquote { margin: 1.5em 0; padding: 0.25rem 0 0.25rem 1.25rem; border-left: 3px solid var(--blu-testo); font-family: var(--serif); color: var(--testo); }
.lettura img { height: auto; border-radius: var(--r); }
.lettura hr { border: 0; border-top: 1px solid var(--filetto); margin: 2.25em 0; }
.lettura--pagina { margin-top: 0; }
.lettura--pagina h1 { font: 700 clamp(2rem, 4vw, 2.75rem)/1.1 var(--serif); letter-spacing: -0.02em; color: var(--testo); margin: 0 0 1rem; }
/* i rimandi alle fonti: attaccati alla parola, raggruppati se vicini, con un'area di tocco piu' ampia */
.rimandi { white-space: nowrap; }
.rimando, .rimandi__sep { font: 700 0.68em/1 var(--mono); vertical-align: super; }
.rimando { position: relative; color: var(--blu-testo); padding: 0 0.08em; }
.rimando::after { content: ''; position: absolute; inset: -0.75em -0.4em; }
.rimando:hover { color: var(--blu-luce); }
.rimandi__sep { color: var(--testo-3); }

.cta-tema { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem 1.25rem; margin: 2.5rem 0; padding: 1.25rem 1.4rem; border-radius: var(--r); border: 1px solid var(--blu); background: rgba(0, 87, 183, 0.12); line-height: 1.45; }
.cta-tema:hover { background: rgba(0, 87, 183, 0.2); }
.cta-tema__icona { width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center; background: var(--blu); color: #fff; }
.cta-tema__testo b { display: block; font: 700 1.1rem/1.3 var(--serif); color: var(--testo); text-wrap: balance; }
.cta-tema__sotto { display: block; margin-top: 0.25rem; color: var(--testo-2); font-size: 0.9375rem; }

.fonti-blocco { margin-top: 3rem; }
.fonti-blocco__titolo { font: 700 1.375rem/1.2 var(--serif); margin: 0 0 1.1rem; }
.fonti { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.fonti li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); font-size: 0.9375rem; border-radius: var(--r); }
.fonti li:target { background: rgba(0, 87, 183, 0.14); }
.fonti__n { color: var(--blu-testo); font-weight: 700; line-height: 1.9; }
.fonti .dominio { display: block; color: var(--testo-3); }
/* l'area di tocco si allarga sopra e sotto il titolo senza spostarlo: con un'altezza minima i
   titoli su una riga finivano lontani dalla loro testata, quelli su due no */
.fonti a { display: inline-block; position: relative; color: var(--corpo); overflow-wrap: anywhere; }
.fonti a::after { content: ''; position: absolute; inset: -0.6rem -0.25rem; }
.fonti a:hover { color: var(--blu-luce); }

.riquadro { margin: 2.5rem 0; padding: 1.25rem 1.4rem; border-radius: var(--r); background: var(--pannello); border: 1px solid var(--filetto); border-left: 3px solid var(--blu-testo); }
.riquadro > :last-child { margin-bottom: 0; }
.riquadro__titolo { color: var(--blu-testo); margin: 0 0 0.75rem; }
.riquadro p { color: var(--testo-2); font-size: 0.9375rem; }
.numeri-edizione { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; margin: 0 0 1rem; }
.numeri-edizione div { padding: 0.85rem; border-radius: var(--r); background: var(--pannello-2); }
.numeri-edizione b { display: block; font: 700 1.5rem/1.1 var(--serif); color: var(--testo); }
.numeri-edizione span { font-size: 0.8125rem; color: var(--testo-2); }
.articolo .community { grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1.5rem; padding: 1.75rem; margin-top: 2.5rem; }
.articolo .community img { width: 6.5rem; height: 6.5rem; }

.margine { grid-area: margine; position: sticky; top: calc(var(--testata) + 1.5rem); align-self: start; display: grid; gap: 1.75rem; padding-top: 0.25rem; }
.margine__titolo { color: var(--testo-3); margin: 0 0 0.75rem; }
.indice { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; border-left: 1px solid var(--filetto); }
.indice a { display: block; padding-left: 0.85rem; margin-left: -1px; border-left: 2px solid transparent; font-size: 0.875rem; line-height: 1.4; color: var(--testo-2); text-wrap: pretty; }
.indice a:hover { color: var(--testo); }
.indice a.attivo { color: var(--testo); border-color: var(--blu-testo); }
.condividi { display: grid; gap: 0.5rem; }
.condividi .bottone { justify-content: flex-start; }

.vicine { grid-area: vicine; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 3rem; }
.vicine a { padding: 1.1rem 1.25rem; border: 1px solid var(--filetto); border-radius: var(--r); background: var(--pannello); }
.vicine a:hover { border-color: var(--blu-testo); }
.vicine a:last-child:not(:first-child) { text-align: right; }
.vicine b { display: block; font: 700 1.05rem/1.3 var(--serif); margin-top: 0.35rem; }
.vicine span { color: var(--testo-3); }

/* ------------------------------------------------- archivio, ricerca, pagine */
.paginazione { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 2rem; }
.paginazione .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; padding: 0 0.9rem; border: 1px solid var(--filetto-forte); border-radius: var(--r); color: var(--testo-2); font-weight: 600; font-size: 0.9375rem; }
.paginazione a.page-numbers:hover { border-color: var(--blu-testo); color: var(--testo); }
.paginazione .current { background: var(--blu); border-color: var(--blu); color: #fff; }
.paginazione .dots { border-color: transparent; }
.cerca { display: flex; gap: 0.5rem; max-width: 34rem; margin: 0 0 2rem; }
.cerca input { flex: 1; min-width: 0; min-height: 2.75rem; padding: 0 0.9rem; border: 1px solid var(--filetto-forte); border-radius: var(--r); background: var(--pannello); color: var(--testo); font: 400 1rem var(--sans); }
.cerca input:focus { outline: 2px solid var(--blu-luce); outline-offset: 1px; }

/* stesso filo sinistro delle altre pagine, colonna di lettura larga quanto un articolo */
.pagina-testo { max-width: 46rem; padding-top: 3rem; }
.privacy-policy-container { max-width: var(--pagina); margin: 0 auto; padding: 3rem var(--gutter) 0; }
.privacy-content { max-width: 46rem; }
.pagina-testo h1, .privacy-title { font: 700 clamp(2rem, 4vw, 2.75rem)/1.1 var(--serif); letter-spacing: -0.02em; margin: 0 0 0.75rem; }
.privacy-subtitle { color: var(--testo-2); font: 400 1.15rem/1.5 var(--serif); }
.last-updated { color: var(--testo-3); font: 500 0.75rem/1.4 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; margin: 1rem 0 0; }
.privacy-section { margin-top: 2.75rem; color: var(--corpo); line-height: 1.7; }
.privacy-section h2 { font: 700 1.4rem/1.25 var(--serif); color: var(--testo); margin: 0 0 0.85rem; }
.privacy-section h3, .privacy-section h4 { font: 600 1.05rem/1.35 var(--sans); color: var(--testo); margin: 1.25rem 0 0.5rem; }
.privacy-section p + p, .section-content > * + * { margin-top: 0.85rem; }
.privacy-section ul { padding-left: 1.3rem; }
.privacy-section a, .privacy-footer a { color: var(--blu-testo); text-decoration: underline; text-underline-offset: 3px; }
.data-types, .rights-grid, .contact-grid, .cookie-types { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.75rem; margin-top: 1rem; }
.data-type-card, .right-card, .contact-card, .cookie-card, .purpose-item, .automation-item, .contact-info-box { padding: 1rem 1.1rem; border: 1px solid var(--filetto); border-radius: var(--r); background: var(--pannello); }
.purpose-item, .automation-item { margin-top: 0.75rem; }
.cta-buttons { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1rem; }
.cta-button { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0.5rem 1.1rem; border-radius: var(--r); border: 1px solid var(--blu); background: var(--blu); color: #fff !important; font-weight: 600; text-decoration: none !important; }
.cta-button.secondary { background: transparent; color: var(--testo) !important; border-color: var(--filetto-forte); }
.privacy-footer { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--filetto); color: var(--testo-3); font-size: 0.875rem; }
.privacy-footer p + p { margin-top: 0.35rem; }
.ai-particles-small, .signature-icon, .auto-icon:empty { display: none; }

/* ------------------------------------------------------- banner dei cookie */
/* Markup generato da cookie-consent.js. Rifiutare e' facile quanto accettare: i bottoni hanno
   lo stesso peso. Da chiuso il banner e' nascosto anche alla tastiera, non solo spostato. */
.claira-cookie-consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 1rem var(--gutter); background: var(--pannello); border-top: 1px solid var(--filetto-forte); box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.5); transform: translateY(110%); visibility: hidden; transition: transform 0.3s, visibility 0s 0.3s; }
.claira-cookie-consent.show { transform: none; visibility: visible; transition: transform 0.3s; }
.cookie-consent-content { max-width: calc(var(--pagina) - 2 * var(--gutter)); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 2rem; }
.cookie-text { max-width: 46rem; color: var(--testo-2); font-size: 0.875rem; line-height: 1.5; }
.cookie-text strong { color: var(--testo); }
.cookie-text a { color: var(--blu-testo); text-decoration: underline; text-underline-offset: 3px; }
.cookie-actions, .cookie-settings-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cookie-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: 0 1rem; border-radius: var(--r); border: 1px solid var(--filetto-forte); background: transparent; color: var(--testo); font: 600 0.875rem/1 var(--sans); cursor: pointer; }
.cookie-btn:hover { border-color: var(--blu-testo); background: var(--pannello-2); }
.cookie-btn-save { background: var(--blu); border-color: var(--blu); color: #fff; }
.cookie-btn-save:hover { background: var(--blu-hover); border-color: var(--blu-hover); }
.cookie-settings-modal { position: fixed; inset: 0; z-index: 50; display: none; align-items: center; justify-content: center; padding: 1rem; background: rgba(0, 0, 0, 0.72); }
.cookie-settings-modal.show { display: flex; }
.cookie-settings-content { width: min(36rem, 100%); max-height: calc(100vh - 2rem); overflow: auto; padding: 1.5rem; border-radius: calc(var(--r) * 2); border: 1px solid var(--filetto-forte); background: var(--pannello); }
.cookie-settings-title { font: 700 1.3rem/1.2 var(--serif); margin: 0 0 0.5rem; }
.cookie-settings-description, .cookie-category-description { color: var(--testo-2); font-size: 0.9rem; line-height: 1.5; }
.cookie-category { border-top: 1px solid var(--filetto); margin-top: 1rem; padding-top: 1rem; }
.cookie-category-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 0.35rem; }
.cookie-category-title { font: 600 1rem/1.3 var(--sans); margin: 0; }
.cookie-category-items { margin: 0.5rem 0 0; padding-left: 1.2rem; color: var(--testo-2); font-size: 0.85rem; }
.cookie-toggle { position: relative; display: inline-block; flex: none; width: 2.75rem; height: 1.5rem; }
.cookie-toggle input { position: absolute; inset: 0; z-index: 1; margin: 0; opacity: 0; cursor: pointer; }
.cookie-toggle-slider { position: absolute; inset: 0; border-radius: 999px; background: var(--filetto-forte); transition: background 0.15s; }
.cookie-toggle-slider::after { content: ''; position: absolute; top: 3px; left: 3px; width: calc(1.5rem - 6px); height: calc(1.5rem - 6px); border-radius: 50%; background: var(--testo); transition: transform 0.15s; }
.cookie-toggle input:checked + .cookie-toggle-slider { background: var(--blu); }
.cookie-toggle input:checked + .cookie-toggle-slider::after { transform: translateX(1.25rem); }
.cookie-toggle input:focus-visible + .cookie-toggle-slider { outline: 2px solid var(--blu-luce); outline-offset: 2px; }
.cookie-toggle.disabled { opacity: 0.6; }
.cookie-settings-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--filetto); }
.ai-info { color: var(--testo-3); font-size: 0.8rem; }

/* ------------------------------------------------------------- larghezze */
@media (max-width: 1180px) {
  .registro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  :root { --testata: 6.75rem; }
  .testata__riga { flex-wrap: wrap; column-gap: 1rem; row-gap: 0; padding-top: 0.6rem; }
  .testata__cta { min-height: 2.75rem; }
  .nav { order: 3; flex-basis: 100%; gap: 1.5rem; margin-top: 0.6rem; border-top: 1px solid var(--filetto); overflow-x: auto; scrollbar-width: none; }
  .nav a { white-space: nowrap; font-size: 0.875rem; }
  .apertura { grid-template-columns: 1fr; gap: 0; min-height: 0; }
  .apertura__volto { order: -1; min-height: 0; height: 18rem; margin: 0 calc(var(--gutter) * -1); }
  /* l'ellisse finisce prima del fondo: arrivava al bordo ancora a meta' opacita' e sopra
     "L'ultima edizione" restava uno spigolo netto */
  .apertura__volto img { object-position: 32% 16%;
    -webkit-mask-image: radial-gradient(ellipse 72% 62% at 42% 36%, #000 50%, rgba(0, 0, 0, 0.5) 74%, transparent 100%);
    mask-image: radial-gradient(ellipse 72% 62% at 42% 36%, #000 50%, rgba(0, 0, 0, 0.5) 74%, transparent 100%); }
  .apertura__firma { display: none; }
  .apertura__testo { padding: 0 0 2.5rem; margin-top: -1.5rem; position: relative; }
  .articolo { grid-template-columns: minmax(0, 1fr); grid-template-areas: "corpo" "margine" "vicine"; }
  .margine { position: static; margin-top: 2.5rem; }
  .margine__blocco--indice { display: none; }
  .condividi { grid-template-columns: repeat(3, auto); justify-content: start; }
  .piede__griglia { grid-template-columns: 1fr 1fr; }
  .piede__griglia > :first-child { grid-column: 1 / -1; }
  .bottone--piccolo { min-height: 2.75rem; }
}
@media (max-width: 640px) {
  /* su telefono la testata su due righe prendeva il 12% dello schermo per tutta la lettura:
     resta in cima alla pagina e lascia lo spazio al testo */
  :root { --testata: 0rem; }
  .testata { position: static; }
  .marchio__sotto { display: none; }
  .marchio__nome { font-size: 1.15rem; }
  .testata__cta { padding: 0 0.8rem; }
  .dispaccio { gap: 0.15rem 0.9rem; font-size: 0.6875rem; }
  .solo-largo { display: none; }
  .registro, .registro.registro--tre { grid-template-columns: minmax(0, 1fr); }
  /* sul telefono la didascalia va su tre righe: la banda si allunga invece di stringere il disegno */
  .nascita__banda { height: 16rem; }
  .banda__didascalia { top: 0.75rem; left: 0.85rem; right: 0.85rem; }
  .banda__frase { font-size: 0.875rem; }
  .nascita__passi { grid-template-columns: 1fr 1fr; gap: 1rem 0.75rem; }
  .cadenza__testa { flex-direction: column; }
  /* su un telefono 52 tacche sono larghe pochi pixel: restano un disegno, non 52 bersagli */
  .cadenza__barre a { pointer-events: none; }
  .community, .articolo .community { grid-template-columns: minmax(0, 1fr); gap: 1rem; padding: 1.5rem; }
  .community img, .articolo .community img { width: 4.5rem; height: 4.5rem; }
  /* pannello e schede uno dentro l'altro: con meno margine il testo non resta in una colonna stretta */
  .chi { padding: 1.25rem 1rem; gap: 1.25rem; }
  .chi__testa { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .chi__testa img { width: 4.5rem; height: 4.5rem; }
  .lavori { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 0.75rem; }
  .lavoro { grid-row: auto; grid-template-rows: none; padding: 1rem; }
  /* nella colonna stretta "6 su 10" non si spezza: con balance "prendono" restava da solo */
  .passo__testo { text-wrap: pretty; }
  .piede__sep { display: none; }
  .piede__base .unito { display: block; }
  .copertina--articolo { aspect-ratio: 16 / 9; }
  .copertina--articolo .copertina__interno { padding: 6.5% 7%; gap: 3cqw; }
  .copertina--articolo .copertina__etichetta { font-size: max(11px, 2.7cqw); }
  .copertina--articolo.copertina--numero .copertina__valore { font-size: max(34px, 15cqw); }
  .copertina--articolo .copertina__cosa { font-size: max(13px, 3.7cqw); }
  .copertina--articolo .copertina__fonte { font-size: max(11px, 2.6cqw); }
  .copertina--articolo .copertina__domanda { font-size: max(17px, 6cqw); }
  .copertina--articolo.copertina--tre ol { grid-template-columns: minmax(0, 1fr); }
  .lettura { font-size: 1.0625rem; }
  .cta-tema { grid-template-columns: auto minmax(0, 1fr); }
  .cta-tema__bottone { grid-column: 1 / -1; justify-self: start; }
  .numeri-edizione { grid-template-columns: 1fr 1fr; }
  .vicine { grid-template-columns: minmax(0, 1fr); }
  .vicine a:last-child:not(:first-child) { text-align: left; }
  .cerca { flex-direction: column; }
  /* la paginazione sta su una riga: piu' recenti, pagina corrente, piu' vecchie */
  .paginazione a.page-numbers:not(.prev):not(.next), .paginazione .dots { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
  /* senza animazione le etichette della banda si vedono subito */
  .segno, .soglia { opacity: 1; }
}