/* CSS del sito — generato da costruisci-assets.py, non modificare a mano */

/* ===== 00-font.css ===== */
/* ===== Caratteri =====
   Archivio per i titoli, IBM Plex Mono per occhielli, metadati e ticker.
   Serviti da Google Fonts: se un giorno si vogliono locali, basta
   sostituire questo file — nessun altro pezzo li nomina. */
@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,500;0,700;0,900;1,900&family=IBM+Plex+Mono:wght@400;500;600&display=swap');


/* ===== 01-token.css ===== */
/* ===== Token — l'unico posto dove stanno colori, misure e ritmo =====
   Tutto il resto del CSS discende da qui. */
:root {
  --carta:        #f4f2ec;   /* fondo pagina */
  --inchiostro:   #111111;   /* testo e righe */
  --verde:        #0f6f4f;   /* accento */
  --grigio:       #555555;   /* metadati */
  --grigio-chiaro:#c9c5b8;
  --provino:      #e7e4dc;   /* fondo dei segnaposto foto */

  --titolo: Archivo, system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;

  --riga-spessa: 4px solid var(--inchiostro);
  --riga: 2px solid var(--inchiostro);
  --riga-sottile: 1px solid var(--grigio-chiaro);

  --gap: 3px;                /* il filo nero fra i riquadri della griglia */
  --largo: 1100px;
  --lettura: 640px;

  /* Margine laterale del contenitore. Cresce con lo schermo invece di
     saltare a scalini: su un telefono da 320px, 28px fissi per lato
     mangiavano il 18% della larghezza e la riga di lettura scendeva
     sotto i 40 caratteri. */
  --bordo: clamp(16px, 4vw, 28px);

  /* Ritmo verticale, anch'esso proporzionato allo schermo. */
  --spazio-s: clamp(10px, 2.5vw, 16px);
  --spazio-m: clamp(18px, 4vw, 28px);
  --spazio-l: clamp(28px, 6vw, 44px);

  /* Aree toccabili: 44px e' la misura minima indicata da Apple. */
  --tocco: 44px;
}


/* ===== 02-globale.css ===== */
/* ===== Impostazioni globali ===== */
*, *::before, *::after { box-sizing: border-box; }

html {
  /* iOS ingrandisce da solo il testo quando si ruota in orizzontale,
     scompaginando le colonne. Questa riga glielo impedisce. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--carta);
  color: var(--inchiostro);
  font-family: var(--titolo);
  -webkit-font-smoothing: antialiased;
  /* Rete di sicurezza contro lo scorrimento laterale: le cause vere sono
     corrette una per una, ma un solo elemento sfuggito rovinerebbe la
     lettura su telefono. "clip" non crea un contenitore di scorrimento,
     quindi non rompe position:sticky come farebbe "hidden". */
  overflow-x: clip;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--verde); }

/* La messa a fuoco deve restare SEMPRE visibile: su un fondo cosi'
   contrastato l'outline di sistema sparisce, quindi se ne da' uno. */
:focus-visible { outline: 3px solid var(--verde); outline-offset: 2px; }

img, svg { max-width: 100%; }

.contenitore {
  max-width: var(--largo);
  margin: 0 auto;
  /* Sui telefoni con notch, in orizzontale il testo finirebbe sotto la
     tacca: env() aggiunge lo spazio solo dove serve davvero. */
  padding-inline: max(var(--bordo), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
}

.mono { font-family: var(--mono); }

.occhiello {
  font-family: var(--mono);
  font-size: clamp(12px, 2.6vw, 12px);
  font-weight: 600;
  color: var(--verde);
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* Segnaposto delle fotografie: righe diagonali, come nel mockup. */
.provino {
  background: repeating-linear-gradient(45deg,
              var(--provino) 0 12px, #eeebe2 12px 24px);
  display: grid; place-items: center;
  font-family: var(--mono);
  font-size: clamp(12px, 2.4vw, 12px);
  color: #8a8578;
  text-align: center;
  padding: 8px;
}

/* Riquadro di una fotografia. Prende il posto del provino quando la
   foto c'e' davvero, e occupa esattamente lo stesso spazio: le classi
   di posizione (.articolo__foto, .tessera__foto, .home-punta__foto)
   danno l'altezza a entrambi, quindi la pagina non si muove di un
   pixel fra un articolo con foto e uno senza. */
.foto-riquadro {
  display: block;
  overflow: hidden;
  background: var(--provino);      /* si vede mentre la foto arriva */
}
.foto-riquadro__img {
  display: block;
  width: 100%;
  height: 100%;
  /* Le altezze dei riquadri sono fisse (vengono dal mockup) mentre le
     fotografie hanno proporzioni qualunque: senza cover, una foto
     verticale uscirebbe schiacciata. */
  object-fit: cover;
}

/* Testo destinato solo a chi usa uno screen reader. */
.solo-lettori {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Il salto al contenuto: invisibile finche' non riceve la messa a fuoco. */
.salta-a-contenuto {
  position: absolute; left: -9999px; top: 0;
  background: var(--inchiostro); color: var(--carta);
  padding: 12px 18px;
  font-family: var(--mono); font-size: 13px;
  z-index: 100;
  /* Misurato: con il solo padding l'altezza risultava 41px, tre sotto
     il minimo di 44. E' il primo bersaglio che incontra chi naviga da
     tastiera, quindi vale la pena che sia pieno. */
  min-height: var(--tocco);
  display: inline-flex; align-items: center;
}
.salta-a-contenuto:focus { left: 8px; top: 8px; }


/* ===== 03-animazioni.css ===== */
/* ==========================================================================
   CYCLISM — Runtime animazioni decorative
   assets/css/parti/03-animazioni.css

   Questa e' una PARTE: costruisci-assets.py la unisce alle altre in
   assets/css/site.css. Non collegare mai questo file direttamente da
   una pagina. Il numero 03 la colloca dopo i token (01) e il globale
   (02), prima dei componenti.

   Dopo ogni modifica:  python3 strumenti/costruisci-assets.py

   Contratto: il back-end stampa SOLO markup + custom properties.
   Nessuno stile inline oltre alle variabili --anim-*. Nessun <style> generato.

   <div class="anim-layer" data-slot="hero_home" aria-hidden="true">
     <span class="anim-el anim--spin"
           style="--anim-src:url(/Res/animazioni/elementi/drivetrain/corona-52t.svg);
                  --anim-w:520px; --anim-x:-120px; --anim-y:-140px;
                  --anim-op:.16; --anim-col:#0f6f4f; --anim-dur:40s"
           data-ax="right" data-ay="top"></span>
   </div>

   Il contenitore ospite deve avere position:relative (classe .anim-host).
   NON deve avere overflow:hidden: a ritagliare la decorazione ci pensa
   .anim-layer. Vedi il commento sotto .anim-host.
   ========================================================================== */

/* --- 1. host ------------------------------------------------------------ */

.anim-host {
  position: relative;
  isolation: isolate;          /* impedisce che i layer sfuggano ai blend */
}

/* NON si mette overflow:hidden qui. A ritagliare la decorazione ci pensa
   gia' .anim-layer, che ha inset:0 e overflow:hidden per conto suo.
   Metterlo anche sull'ospite significa ritagliare il CONTENUTO: e' cosi'
   che la citazione dell'articolo, che sporge di proposito ai lati, veniva
   tagliata a meta' parola, e che il menu della testata non riusciva piu' a
   scorrere lateralmente. Un contenitore decorativo non deve mai imporre
   limiti al contenuto che ospita. */

.anim-host > *:not(.anim-layer) {
  position: relative;
  z-index: 1;                  /* il contenuto sta sempre sopra la decorazione */
}

/* --- 2. layer ----------------------------------------------------------- */

.anim-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;        /* mai intercettare click o selezione */
  contain: strict;             /* isola layout/paint: niente reflow sul resto */
  overflow: hidden;
}

/* Kill switch globale: si imposta data-anim="off" su <html> dal pannello. */
[data-anim="off"] .anim-layer { display: none; }

/* --- 3. elemento -------------------------------------------------------- */

.anim-el {
  /* default: sovrascrivibili dalle custom property stampate dal renderer */
  --anim-w: 300px;
  --anim-h: auto;
  --anim-x: 0px;
  --anim-y: 0px;
  --anim-op: 0.12;
  --anim-col: currentColor;
  --anim-dur: 30s;
  --anim-delay: 0s;
  --anim-timing: linear;
  --anim-rot: 0deg;
  --anim-scale: 1;

  position: absolute;
  display: block;
  width: var(--anim-w);
  height: var(--anim-h, auto);
  aspect-ratio: var(--anim-ratio, 1);
  opacity: var(--anim-op);

  /* Il colore arriva dal background; la forma dalla maschera SVG.
     Un solo file serve infinite varianti cromatiche — niente duplicati. */
  background-color: var(--anim-col);
  -webkit-mask-image: var(--anim-src);
          mask-image: var(--anim-src);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;

  transform: rotate(var(--anim-rot)) scale(var(--anim-scale));
  will-change: transform;
  backface-visibility: hidden;
}

/* Ancoraggio: quale angolo del contenitore fa da origine agli offset.
   Il renderer stampa data-ax / data-ay; gli offset restano custom property
   cosi' l'editor visuale puo' aggiornarli senza riscrivere le classi. */
.anim-el[data-ay="top"]    { top: var(--anim-y); }
.anim-el[data-ay="bottom"] { bottom: var(--anim-y); }
.anim-el[data-ax="left"]   { left: var(--anim-x); }
.anim-el[data-ax="right"]  { right: var(--anim-x); }
/* Ancoraggio centrato: va sottratta meta' dell'ingombro, altrimenti al centro
   finisce il BORDO dell'elemento e non il suo centro. Non si puo' usare
   translate(-50%), perche' i keyframe riscrivono per intero la proprieta'
   transform; l'altezza pero' e' nota (larghezza / rapporto), quindi il
   margine negativo si calcola. */
.anim-el[data-ax="center"] {
  left: 50%;
  margin-left: calc(var(--anim-x) - var(--anim-w) / 2);
}
.anim-el[data-ay="center"] {
  top: 50%;
  margin-top: calc(var(--anim-y) - (var(--anim-w) / var(--anim-ratio, 1)) / 2);
}

/* --- 4. keyframe -------------------------------------------------------- */
/* Portati dal mockup (cySpin, cySpinR, cyChain, cyShift, cyPedal) e
   normalizzati. Ogni nuovo keyframe va aggiunto QUI e censito in
   anim_animazioni, altrimenti il pannello non lo propone. */

@keyframes cySpin   { to   { transform: rotate(360deg) scale(var(--anim-scale)); } }
@keyframes cySpinR  { to   { transform: rotate(-360deg) scale(var(--anim-scale)); } }
@keyframes cyPedal  { 0%, 100% { transform: rotate(-6deg) scale(var(--anim-scale)); }
                      50%      { transform: rotate(6deg) scale(var(--anim-scale)); } }
@keyframes cyShift  { 0%, 45%  { transform: rotate(0) scale(var(--anim-scale)); }
                      55%,100% { transform: rotate(-22deg) scale(var(--anim-scale)); } }
@keyframes cyChain  { from { -webkit-mask-position: 0 center;     mask-position: 0 center; }
                      to   { -webkit-mask-position: -80px center; mask-position: -80px center; } }
@keyframes cyDrift  { 0%,100% { transform: translateY(0) scale(var(--anim-scale)); }
                      50%     { transform: translateY(-18px) scale(var(--anim-scale)); } }
@keyframes cyPulse  { 0%,100% { opacity: var(--anim-op); }
                      50%     { opacity: calc(var(--anim-op) * 1.9); } }

.anim--spin   { animation: cySpin  var(--anim-dur) var(--anim-timing) var(--anim-delay) infinite; }
.anim--spin-r { animation: cySpinR var(--anim-dur) var(--anim-timing) var(--anim-delay) infinite; }
.anim--pedal  { animation: cyPedal var(--anim-dur) ease-in-out var(--anim-delay) infinite;
                transform-origin: 50% 50%; }
.anim--shift  { animation: cyShift var(--anim-dur) ease-in-out var(--anim-delay) infinite;
                transform-origin: 25% 10%; }   /* pivot sul bullone del deragliatore */
.anim--drift  { animation: cyDrift var(--anim-dur) ease-in-out var(--anim-delay) infinite; }
.anim--pulse  { animation: cyPulse var(--anim-dur) ease-in-out var(--anim-delay) infinite; }
.anim--none   { animation: none; }

/* Catena: la maschera si ripete in orizzontale e scorre di un tile esatto.
   Il tile e' 80px: il keyframe DEVE traslare di 80px per essere seamless. */
.anim--chain {
  -webkit-mask-repeat: repeat-x;
          mask-repeat: repeat-x;
  -webkit-mask-size: 80px auto;
          mask-size: 80px auto;
  -webkit-mask-position: 0 center;
          mask-position: 0 center;
  animation: cyChain var(--anim-dur, 1.6s) linear var(--anim-delay) infinite;
  will-change: mask-position;
}

/* Verso inverso senza duplicare i keyframe. */
.anim-el[data-dir="reverse"] { animation-direction: reverse; }

/* --- 5. accessibilita' e performance ------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  /* La forma resta, il moto sparisce — anche per le parti degli elementi
     compositi e per il percorso della catena. */
  .anim-el,
  .anim-part,
  .anim--catena #catena-percorso { animation: none !important; }
}

/* Sotto i 768px si mostrano solo gli elementi marcati come mobile-safe:
   su schermo stretto la decorazione ruba spazio e batteria. */
@media (max-width: 767px) {
  .anim-el:not([data-mobile="1"]) { display: none; }
  .anim-el[data-mobile="1"] { --anim-w: calc(var(--anim-w-mobile, var(--anim-w)) * 1); }
}

/* Stampa: nessuna decorazione. */
@media print { .anim-layer { display: none; } }

/* Fallback: senza mask-image un elemento a maschera diventa un rettangolo
   colorato pieno, quindi va nascosto. La regola NON deve toccare gli
   elementi inline e i livelli 3D, che non usano affatto la maschera. */
@supports not ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
  .anim-el:not(.anim-el--inline):not(.anim-el--3d) { display: none; }
}

/* ==========================================================================
   6. ELEMENTI COMPOSITI INLINE  (migration 004)

   Gli SVG tecnici non passano da mask-image: il renderer li inlina nel DOM
   cosi' ogni gruppo con data-parte puo' avere animazione e velocita' proprie.

   <span class="anim-el anim-el--inline" style="--anim-w:620px">
     <svg …>
       <g data-parte="corona-anteriore" class="anim-part anim--spin"
          style="--anim-dur:9s">…</g>
       <g data-parte="catena" class="anim-part anim--catena"
          style="--anim-dur:1.4s">…</g>
     </svg>
   </span>
   ========================================================================== */

.anim-el--inline {
  background: none;                /* niente maschera: il colore sta nell'SVG */
  -webkit-mask-image: none;
          mask-image: none;
  color: var(--anim-col);
}

.anim-el--inline > svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* Il colore arriva dal DB: le regole CSS vincono sugli attributi di
   presentazione dell'SVG, quindi il file resta modificabile a mano
   senza perdere la ricolorazione. */
.anim-el--inline [stroke]:not([stroke="none"]) { stroke: var(--anim-col); }
.anim-el--inline [fill]:not([fill="none"])     { fill:   var(--anim-col); }

/* Ogni parte ruota attorno al centro del PROPRIO bounding box: e' l'unico
   modo perche' la corona giri sul movimento centrale e la ruota sul mozzo
   senza scrivere a mano un transform-origin per ciascun pezzo. */
.anim-part {
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform;
}

.anim-part[data-visibile="0"] { display: none; }

/* --- catena ---------------------------------------------------------------
   Le maglie disegnate una per una non traslano lungo il percorso. Quando al
   gruppo catena viene assegnata l'animazione, si mostra il percorso
   tratteggiato al passo della catena e si nascondono le maglie statiche:
   stroke-dashoffset da' uno scorrimento continuo e senza salti. */

[data-parte="catena"] #catena-percorso { display: none; }

[data-parte="catena"].anim--catena #catena-percorso { display: block; }
[data-parte="catena"].anim--catena #catena-maglie,
[data-parte="catena"].anim--catena #catena-rulli { display: none; }

@keyframes cyCatena { to { stroke-dashoffset: -20; } }   /* -1 passo esatto */

.anim--catena #catena-percorso {
  animation: cyCatena var(--anim-dur, 1.4s) linear var(--anim-delay, 0s) infinite;
}

/* ==========================================================================
   7. LIVELLI 3D  (glTF/GLB via three.js)

   <span class="anim-el anim-el--3d" data-modello="corona"
         data-src="/Res/animazioni/modelli3d/corona.glb"
         style="--anim-w:520px;--anim-ratio:1">
     <canvas></canvas>
     <img class="anim-3d-fallback" src="…webp" alt="">
   </span>
   ========================================================================== */

.anim-el--3d {
  background: none;
  -webkit-mask-image: none;
          mask-image: none;
}

.anim-el--3d > canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Il fallback resta visibile finche' lo script non dichiara la scena pronta:
   se WebGL manca o il modulo non si carica, l'utente vede comunque qualcosa. */
.anim-el--3d > .anim-3d-fallback { display: block; width: 100%; height: auto; }
.anim-el--3d[data-stato="pronto"] > .anim-3d-fallback { display: none; }
.anim-el--3d:not([data-stato="pronto"]) > canvas { display: none; }

/* Le scene 3D non girano mai per decorazione se l'utente chiede meno moto. */
@media (prefers-reduced-motion: reduce) {
  .anim-el--3d[data-autorotazione="1"] > canvas { animation: none; }
}

/* Sotto i 768px il 3D e' spento salvo scelta esplicita da pannello. */
@media (max-width: 767px) {
  html:not([data-anim-3d-mobile="1"]) .anim-el--3d > canvas { display: none; }
  html:not([data-anim-3d-mobile="1"]) .anim-el--3d > .anim-3d-fallback { display: block; }
}

[data-anim-3d="off"] .anim-el--3d { display: none; }


/* ===== 10-testata.css ===== */
/* ===== Ticker e testata ===== */

/* Il ticker contiene piu' testo di quanto entri in uno schermo stretto.
   Invece di tagliarlo in silenzio, lo si rende scorrevole col dito: il
   contenuto resta raggiungibile e la striscia mantiene il suo aspetto. */
.ticker {
  background: var(--verde);
  color: var(--carta);
  font-family: var(--mono);
  font-size: clamp(12px, 2.7vw, 12.5px);
  letter-spacing: .08em;
  display: flex;
  gap: clamp(20px, 5vw, 36px);
  padding: 9px max(var(--bordo), env(safe-area-inset-left, 0px));
  white-space: nowrap;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;               /* Firefox */
  -webkit-overflow-scrolling: touch;
}
.ticker::-webkit-scrollbar { display: none; }
.ticker > span { flex: none; }

.testata {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: clamp(12px, 3vw, 24px);
  padding: clamp(14px, 3vw, 22px) var(--bordo) 10px;
  border-bottom: var(--riga-spessa);
  position: relative;
  z-index: 2;
  background: var(--carta);
}
.testata__marchio {
  font-weight: 900;
  font-size: clamp(26px, 7vw, 44px);
  letter-spacing: -.03em;
  line-height: 1;
  flex: none;
  /* area toccabile piena anche quando il testo e' basso */
  display: inline-flex; align-items: center; min-height: var(--tocco);
}
.testata__marchio span { color: var(--verde); }

.nav {
  display: flex;
  gap: clamp(14px, 2.4vw, 26px);
  align-items: center;
  justify-content: flex-end;
  font-family: var(--mono);
  font-size: clamp(12px, 2.6vw, 13px);
  font-weight: 500;
  letter-spacing: .06em;

  /* Scorrevole a QUALSIASI larghezza, non solo sotto una soglia.
     Con la soglia a 720px restava una fascia — fra 721px e circa 900px,
     cioe' iPad mini e affini — in cui le voci non entravano e sfondavano
     la pagina. min-width:0 e' indispensabile: senza, un figlio flex non
     si restringe mai sotto la propria larghezza naturale. */
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.nav::-webkit-scrollbar { display: none; }
/* Ogni voce ha l'altezza minima di un bersaglio toccabile: con 14px di
   testo nudo si sbaglia mira una volta su tre. */
.nav a {
  display: inline-flex; align-items: center;
  min-height: var(--tocco);
  padding-inline: 2px;
  white-space: nowrap;
}
.nav a[aria-current="page"] { color: var(--verde); }
.nav__iscriviti {
  background: var(--inchiostro);
  color: var(--carta);
  /* Il riquadro pieno resta compatto come nel mockup, ma l'area
     toccabile arriva ai 44px: si allarga il padding verticale, non
     il riquadro visibile. */
  padding: 10px 14px;
  min-height: var(--tocco);
}
.nav__iscriviti:hover { background: var(--verde); color: var(--carta); }

/* --- schermo stretto: testata in due righe, menu scorrevole ---------------
   Un menu a scomparsa richiederebbe JavaScript e un pulsante in piu' da
   raggiungere. Una striscia che scorre col dito mostra subito che ci sono
   altre voci, e resta in tema con l'impaginazione da rivista. */
@media (max-width: 720px) {
  .testata {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding-bottom: 0;
  }
  .nav {
    justify-content: flex-start;
    gap: 18px;
    padding-bottom: 2px;
    /* a tutta larghezza: le voci scorrono da bordo a bordo */
    margin-inline: calc(var(--bordo) * -1);
    padding-inline: var(--bordo);
  }
  .nav a { flex: none; }
}


/* ===== 11-piede.css ===== */
/* ===== Piede ===== */
.piede {
  display: flex;
  justify-content: space-between;
  gap: var(--spazio-s);
  flex-wrap: wrap;
  padding: var(--spazio-m) 0 max(var(--spazio-m), env(safe-area-inset-bottom, 0px));
  margin-top: var(--spazio-l);
  border-top: var(--riga);
  font-family: var(--mono);
  font-size: clamp(12px, 2.7vw, 12.5px);
  color: #6d6d6d;
  letter-spacing: .06em;
}
.piede a {
  display: inline-flex; align-items: center;
  min-height: var(--tocco);
  padding-inline: 6px;
}
/* Misura piena a ogni larghezza, non solo su schermo tattile: (pointer:
   coarse) non e' affidabile sui portatili con schermo tattile ne' in
   emulazione, e nel piede il costo di un bersaglio generoso e' nullo. */
.piede a:hover { color: var(--verde); }

@media (max-width: 560px) {
  .piede { flex-direction: column; gap: 4px; text-align: left; }
}


/* ===== 30-apertura.css ===== */
/* ===== Apertura della homepage (mockup 2a) ===== */
.apertura { padding-bottom: var(--spazio-l); border-bottom: var(--riga); }

.apertura__numero {
  font-family: var(--mono);
  font-size: clamp(11px, 2.8vw, 13px);
  font-weight: 600;
  color: var(--verde);
  letter-spacing: .12em;
  margin-bottom: 10px;
  padding-top: var(--spazio-m);
}

.apertura__titolo {
  margin: 0;
  font-weight: 900;
  /* Il titolo di apertura e' l'elemento piu' a rischio: in maiuscolo, con
     parole lunghe, su uno schermo da 320px. Il limite basso della scala
     tiene conto della parola piu' lunga, non della media. */
  font-size: clamp(34px, 9vw, 104px);
  line-height: .92;
  letter-spacing: -.035em;
  text-transform: uppercase;
  max-width: 980px;
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: auto;
}
.apertura__titolo em { font-style: italic; color: var(--verde); }

.apertura__coda {
  display: flex;
  gap: clamp(16px, 3vw, 40px);
  align-items: flex-end;
  flex-wrap: wrap;
  margin-top: var(--spazio-m);
}
.apertura__sommario {
  margin: 0;
  max-width: 440px;
  font-weight: 500;
  font-size: clamp(16px, 4.2vw, 18px);
  line-height: 1.5;
}
.apertura__firma {
  font-family: var(--mono);
  font-size: clamp(12px, 2.7vw, 12.5px);
  line-height: 1.7;
  color: var(--grigio);
}
/* Nella pagina contatti qui dentro ci sono indirizzi e-mail, cioe' link
   veri e non solo metadati: devono essere toccabili come tutto il resto. */
.apertura__firma a {
  display: inline-block;
  padding-block: 6px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-width: 860px) {
  .apertura__firma a { padding-block: 12px; }
}
.bottone-verde {
  margin-left: auto;
  flex: none;
  background: var(--verde);
  color: var(--carta);
  font-weight: 700;
  font-size: clamp(14px, 3.4vw, 15px);
  padding: 14px 26px;
  letter-spacing: .04em;
  display: inline-flex; align-items: center;
  min-height: var(--tocco);
}
.bottone-verde:hover { background: var(--inchiostro); color: var(--carta); }

/* Sotto i 760px il pulsante va a capo: spinto a destra resterebbe
   appiccicato al bordo, e in una colonna sola sta meglio a piena larghezza. */
@media (max-width: 760px) {
  .apertura__coda { gap: 16px; }
  .bottone-verde { margin-left: 0; width: 100%; justify-content: center; }
}


/* ===== 31-home-griglia.css ===== */
/* ===== Corpo della homepage: articolo di punta + piu' letti ===== */
.home-corpo {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  border-bottom: var(--riga);
}
.home-punta {
  border-right: var(--riga);
  padding: 0 var(--spazio-m) var(--spazio-m) 0;
  min-width: 0;                      /* impedisce ai figli di dilatare la colonna */
}
.home-punta__foto { height: clamp(180px, 30vw, 340px); margin: var(--spazio-m) 0 16px; }
.home-punta__titolo {
  margin: 6px 0 8px;
  font-weight: 900;
  font-size: clamp(22px, 3.6vw, 34px);
  line-height: 1.02;
  letter-spacing: -.02em;
  text-transform: uppercase;
  overflow-wrap: break-word;
}
.home-punta__sommario {
  margin: 0;
  font-size: clamp(14.5px, 2.2vw, 15px);
  line-height: 1.55;
  color: #333;
  max-width: 520px;
}

.piu-letti { display: flex; flex-direction: column; min-width: 0; }
.piu-letti__titolo {
  font-family: var(--mono);
  font-size: clamp(12px, 2.6vw, 12px);
  font-weight: 600;
  letter-spacing: .12em;
  padding: var(--spazio-m) 0 10px var(--spazio-m);
  color: var(--grigio);
  position: relative;
}
.piu-letti__voce {
  display: flex;
  gap: 16px;
  padding: 14px 0 14px var(--spazio-m);
  border-top: var(--riga-sottile);
  align-items: baseline;
  position: relative;
  min-height: var(--tocco);
}
.piu-letti__n {
  font-weight: 900;
  font-size: clamp(20px, 4vw, 26px);
  color: var(--verde);
  font-style: italic;
  flex: none;
}
.piu-letti__testo {
  font-weight: 700;
  font-size: clamp(15px, 3.8vw, 17px);
  line-height: 1.25;
}

/* In una colonna sola il bordo destro e i rientri non hanno piu' senso:
   servivano a separare due colonne che non ci sono. */
@media (max-width: 860px) {
  .home-corpo { grid-template-columns: 1fr; }
  .home-punta { border-right: 0; padding: 0 0 var(--spazio-m); }
  .piu-letti__titolo, .piu-letti__voce { padding-left: 0; }
}


/* ===== 32-newsletter.css ===== */
/* ===== Riquadro newsletter ===== */
.musette {
  margin-top: auto;
  background: var(--inchiostro);
  color: var(--carta);
  padding: clamp(18px, 4vw, 22px) clamp(16px, 4vw, 24px);
}
.musette__titolo {
  font-weight: 900;
  font-size: clamp(17px, 4.4vw, 20px);
  letter-spacing: -.01em;
  line-height: 1.15;
  position: relative;
}
.musette__form { display: flex; gap: 8px; margin-top: 14px; position: relative; }
.musette__campo {
  flex: 1;
  min-width: 0;                      /* senza, il campo non si restringe mai */
  background: var(--carta);
  color: var(--inchiostro);
  border: 0;
  font-family: var(--mono);
  /* 16px esatti: sotto questa misura iOS ingrandisce la pagina appena si
     tocca il campo, e non la rimpicciolisce piu'. */
  font-size: 16px;
  padding: 12px;
  min-height: var(--tocco);
}
.musette__invia {
  background: var(--verde);
  color: var(--carta);
  border: 0;
  cursor: pointer;
  font-weight: 700;
  font-size: 13px;
  padding: 12px 16px;
  font-family: var(--titolo);
  flex: none;
  min-height: var(--tocco);
  white-space: nowrap;
}
.musette__invia:hover { background: var(--carta); color: var(--inchiostro); }

@media (max-width: 420px) {
  .musette__form { flex-direction: column; }
  .musette__invia { width: 100%; }
}


/* ===== 40-griglia.css ===== */
/* ===== Griglia brutalista (mockup 2b) — archivio e categorie =====
   Il fondo nero e il gap di 3px fanno da bordo: nessuna ombra, nessun
   raggio. E' il filo nero che tiene insieme i riquadri. */
.griglia-brutale { background: var(--inchiostro); padding: var(--gap); }

.griglia-brutale__righe {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--gap);
}

.tessera {
  position: relative;
  background: var(--carta);
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.tessera--copertina { grid-row: span 2; }
.tessera--accento { background: var(--verde); color: var(--carta); }
.tessera--accento .occhiello { color: var(--carta); opacity: .8; }
.tessera .occhiello { display: block; }
.tessera--accento a:hover { color: var(--carta); text-decoration: underline; }

.tessera__titolo {
  display: block;
  margin: 0;
  font-weight: 900;
  font-size: clamp(18px, 4.6vw, 22px);
  line-height: 1.05;
  text-transform: uppercase;
  overflow-wrap: break-word;
}
.tessera--copertina .tessera__titolo {
  font-size: clamp(26px, 5.6vw, 52px);
  letter-spacing: -.03em;
}
.tessera--accento .tessera__titolo { font-size: clamp(20px, 5vw, 26px); font-style: italic; }
.tessera__sommario {
  display: block;
  margin: 0;
  font-size: clamp(13.5px, 3.4vw, 14px);
  line-height: 1.5;
  color: #333;
}
.tessera--copertina .tessera__sommario { font-size: clamp(15px, 3.8vw, 16px); }
.tessera--accento .tessera__sommario { color: inherit; opacity: .9; }
.tessera__foto { display: grid; height: clamp(110px, 20vw, 120px); }
.tessera--copertina .tessera__foto { height: clamp(180px, 32vw, 300px); }
/* Tutta la scheda e' un unico collegamento: un bersaglio grande al posto
   di due piccoli, e una sola voce nell'elenco dei link dello screen reader. */
.tessera__tutto {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  color: inherit;
  min-width: 0;
  /* Il riempimento sta sul COLLEGAMENTO, non sulla scheda: cosi' anche il
     margine interno risponde al tocco. Con il padding sulla scheda restava
     una cornice di 16-22px inerte tutt'attorno — proprio dove il pollice
     tende a cadere. */
  padding: clamp(16px, 3.4vw, 22px);
}
.tessera--copertina .tessera__tutto { padding: clamp(18px, 3.6vw, 26px); }
.tessera__tutto:hover { color: inherit; }
.tessera:hover .tessera__titolo { color: var(--verde); }
.tessera--accento:hover .tessera__titolo { color: inherit; text-decoration: underline; }
.tessera__coda {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  border-top: var(--riga);
  padding-top: 14px;
  font-family: var(--mono);
  font-size: clamp(12px, 2.6vw, 12px);
  color: var(--grigio);
}
.tessera--accento .tessera__coda { border-color: var(--carta); color: var(--carta); opacity: .85; }

/* La striscia dei risultati e' lunga per natura: come il ticker, scorre
   col dito invece di essere tagliata a meta' parola. */
.striscia-risultati { display: flex; gap: var(--gap); margin-top: var(--gap); }
.striscia-risultati__testo {
  flex: 1;
  min-width: 0;
  background: var(--inchiostro);
  color: var(--carta);
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
  font-family: var(--mono);
  font-size: clamp(11px, 2.7vw, 12px);
  letter-spacing: .08em;
  padding: 12px clamp(14px, 3vw, 20px);
  -webkit-overflow-scrolling: touch;
}
.striscia-risultati__testo::-webkit-scrollbar { display: none; }
.striscia-risultati__tutti {
  background: var(--carta);
  color: var(--inchiostro);
  font-weight: 900;
  font-size: clamp(12px, 3vw, 13px);
  padding: 10px clamp(14px, 3vw, 22px);
  letter-spacing: .04em;
  display: flex; align-items: center;
  flex: none;
  min-height: var(--tocco);
}

@media (max-width: 900px) {
  .griglia-brutale__righe { grid-template-columns: 1fr 1fr; }
  .tessera--copertina { grid-column: span 2; grid-row: auto; }
}
@media (max-width: 600px) {
  .griglia-brutale__righe { grid-template-columns: 1fr; }
  .tessera--copertina { grid-column: auto; }
  /* In colonna singola la striscia va a capo: affiancare un testo che
     scorre e un pulsante li stringe entrambi. */
  .striscia-risultati { flex-direction: column; }
  .striscia-risultati__tutti { justify-content: center; }
}

.tessera__vai { font-weight: 600; color: var(--verde); }
.tessera--accento .tessera__vai { color: var(--carta); }


/* ===== 50-articolo.css ===== */
/* ===== Pagina articolo (mockup 2c) ===== */
.articolo {
  /* padding-BLOCK, non la scorciatoia: .articolo condivide l'elemento con
     .contenitore, e "padding" avrebbe azzerato il margine laterale che il
     contenitore imposta. E' cosi' che il testo finiva appiccicato al bordo
     dello schermo sui telefoni. */
  padding-block: var(--spazio-l) var(--spazio-m);
}

.articolo__titolo {
  margin: 12px 0 18px;
  font-weight: 900;
  font-size: clamp(30px, 7.2vw, 58px);
  line-height: .98;
  letter-spacing: -.03em;
  text-transform: uppercase;
  text-wrap: balance;
  /* I titoli in maiuscolo senza spazi possono superare la colonna su
     schermi stretti: si spezzano invece di sfondare. */
  overflow-wrap: break-word;
}
.articolo__sommario {
  margin: 0 0 22px;
  font-size: clamp(16px, 4vw, 19px);
  line-height: 1.5;
  font-weight: 500;
  color: #333;
  max-width: var(--lettura);
}
.articolo__meta {
  display: flex;
  gap: clamp(10px, 3vw, 26px);
  flex-wrap: wrap;
  align-items: center;
  border-top: var(--riga);
  border-bottom: var(--riga);
  padding: 12px 0;
  font-family: var(--mono);
  font-size: clamp(12px, 2.6vw, 12px);
  color: var(--grigio);
}
.articolo__minuti { margin-left: auto; color: var(--verde); font-weight: 600; }
.articolo__foto {
  height: clamp(180px, 42vw, 360px);
  margin: var(--spazio-m) 0;
}

/* --- striscia delle quattro cifre ---------------------------------------- */
.statistiche {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: var(--riga);
  margin-bottom: var(--spazio-l);
  background: var(--carta);
}
.statistiche__voce { padding: clamp(11px, 3vw, 16px); border-right: var(--riga); }
.statistiche__voce:last-child { border-right: 0; }
.statistiche__valore {
  font-weight: 900;
  font-size: clamp(20px, 5vw, 30px);
  line-height: 1.05;
}
.statistiche__voce:nth-child(even) .statistiche__valore { color: var(--verde); }
.statistiche__etichetta {
  font-family: var(--mono);
  font-size: clamp(12px, 2.3vw, 12px);
  color: var(--grigio);
  letter-spacing: .07em;
  margin-top: 3px;
}
/* Quattro colonne su un telefono ridurrebbero ogni cifra a una scheggia:
   sotto i 700px si passa a due, e sparisce il bordo di troppo. */
@media (max-width: 700px) {
  .statistiche { grid-template-columns: repeat(2, 1fr); }
  .statistiche__voce:nth-child(2n) { border-right: 0; }
  .statistiche__voce:nth-child(-n+2) { border-bottom: var(--riga); }
}

/* --- colonna di lettura --------------------------------------------------- */
.testo {
  max-width: var(--lettura);
  margin: 0 auto;
  font-size: clamp(16px, 4.2vw, 17px);
  line-height: 1.7;
  color: #222;
}
.testo > p { margin: 0 0 20px; }
.testo > p:first-of-type::first-letter {
  float: left;
  font-weight: 900;
  font-size: clamp(46px, 12vw, 64px);
  line-height: .8;
  padding: 6px 10px 0 0;
  color: var(--verde);
}
.testo a { color: var(--verde); text-decoration: underline; text-underline-offset: 3px; }
.testo h2 {
  font-weight: 900;
  font-size: clamp(20px, 5.4vw, 26px);
  text-transform: uppercase;
  margin: var(--spazio-l) 0 12px;
  line-height: 1.1;
}
.testo img { display: block; margin: var(--spazio-m) 0; }

/* --- citazione a tutta larghezza ------------------------------------------
   Sporge oltre la colonna di lettura, ma solo di quanto lo spazio permette
   davvero. Il valore fisso di -60px sfondava fra 780 e 1100px di finestra,
   dove la colonna e' gia' larga quanto il contenitore.
   La formula: meta' dello spazio libero fra contenitore e colonna, mai piu'
   di 60px e mai negativo. */
.citazione {
  --sporgenza: clamp(0px, (min(var(--largo), 100vw) - var(--bordo) * 2 - var(--lettura)) / 2, 60px);
  position: relative;
  margin: var(--spazio-l) calc(var(--sporgenza) * -1);
  padding: clamp(18px, 4vw, 26px) clamp(16px, 4vw, 30px);
  border-top: var(--riga-spessa);
  border-bottom: var(--riga-spessa);
  border-color: var(--verde);
  font-weight: 900;
  font-size: clamp(19px, 5.4vw, 32px);
  line-height: 1.08;
  letter-spacing: -.02em;
  font-style: italic;
  text-transform: uppercase;
  overflow-wrap: break-word;
}
/* Il testo deve stare sopra la decorazione, che e' in posizione assoluta. */
.citazione__testo { position: relative; z-index: 1; }

.prossimo {
  max-width: var(--lettura);
  margin: var(--spazio-l) auto 0;
  border-top: var(--riga);
  padding-top: 18px;
  display: flex;
  gap: 12px;
  align-items: baseline;
  flex-wrap: wrap;
}
.prossimo__etichetta {
  font-family: var(--mono); font-size: 12px;
  letter-spacing: .1em; color: var(--grigio); flex: none;
}
.prossimo__titolo {
  display: inline-flex; align-items: center;
  min-height: var(--tocco);
  font-weight: 900;
  font-size: clamp(16px, 4.4vw, 18px);
  text-transform: uppercase;
  line-height: 1.15;
}


/* ===== 90-404.css ===== */
/* ===== Pagina non trovata ===== */
.perduto {
  /* stesso motivo di .articolo: qui la scorciatoia cancellerebbe il
     margine laterale del contenitore */
  padding-block: clamp(48px, 12vw, 80px) var(--spazio-l);
  text-align: center;
}
.perduto__codice {
  font-weight: 900;
  font-size: clamp(72px, 22vw, 200px);
  line-height: .85;
  letter-spacing: -.05em;
  color: var(--verde);
}
.perduto__titolo {
  font-weight: 900;
  font-size: clamp(22px, 6vw, 30px);
  text-transform: uppercase;
  margin: 10px 0 14px;
}
.perduto__testo {
  color: var(--grigio);
  max-width: 460px;
  margin: 0 auto var(--spazio-m);
  line-height: 1.6;
  font-size: clamp(15px, 4vw, 16px);
}
.perduto .bottone-verde { margin: 0 auto; width: auto; }