/* =============================================================================
   base.css — il sistema condiviso da TUTTE le pagine del sito.

   Prima di questo file ogni pagina ricopiava i token, il reset, la grana e la
   nav dentro il proprio <style>. Erano già divergenti: la nav dell'archivio
   aveva perso il riflesso ::before e l'ombra allo scroll che la home ha sempre
   avuto, e nessuno se ne era accorto perché le due pagine non si guardano mai
   affiancate. Qui la versione buona è una sola — quella descritta in DESIGN.md.

   Cosa NON sta qui: tutto ciò che è di una pagina sola. Il footer resta nelle
   pagine perché la home ne ha uno a colonne e le altre uno a riga singola;
   .ambient e le view-transition restano dove servono.

   Le pagine lo agganciano con un percorso RELATIVO: "css/base.css" dalla radice,
   "../css/base.css" dalle sottocartelle. build-langs.mjs antepone ../ agli asset
   relativi e le porta da sole a ../css e ../../css dentro en/ ed es/.

   NON usare "/css/base.css" assoluto: su Netlify funziona, ma aprendo un file
   con doppio clic (file://) la radice è quella del disco e il foglio non si
   carica — pagina senza token, senza font, nav non fissa. È già successo.
   ============================================================================= */

/* ----------  Design tokens  ---------- */
:root{
  /* Tema chiaro: bianco caldo elegante (stile Apple), accordato alla crema del logo */
  --bg:        oklch(0.992 0.003 80);   /* bianco caldo, non #fff */
  --bg-2:      oklch(0.968 0.005 80);   /* pannello: stats / footer */
  --surface:   oklch(0.945 0.006 80);
  --ink:       oklch(0.235 0.014 70);   /* near-black caldo, non #000 */
  --ink-soft:  oklch(0.405 0.012 72);
  --ink-mute:  oklch(0.560 0.012 74);
  --line:      oklch(0.30 0.02 80 / 0.14);
  /* hairline a gradiente tricolore (per i separatori di sezione) */
  --rule: linear-gradient(90deg, transparent 2%, oklch(0.43 0.11 158 / .32) 26%, oklch(0.985 0.006 75 / .12) 50%, oklch(0.535 0.205 27 / .32) 74%, transparent 98%);

  /* Tricolore del marchio, da maison italiana (non bandiera) */
  --red:        oklch(0.535 0.205 27);   /* scarlatto del play: firma "on-air"/TV */
  --red-deep:   oklch(0.470 0.185 27);
  --green:      oklch(0.430 0.110 158);  /* verde italiano del logo: legge bene sul bianco */
  --green-deep: oklch(0.380 0.100 158);
  --cream:      oklch(0.985 0.006 75);   /* il campo crema del logo */

  --maxw: 1280px;
  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --serif: "Bodoni Moda", Georgia, "Times New Roman", serif;
  --sans:  "Hanken Grotesk", system-ui, -apple-system, sans-serif;

  /* scala dei micro-corpi: quattro passi, non diciotto valori a occhio */
  --t-micro: 0.6rem;
  --t-label: 0.72rem;
  --t-small: 0.85rem;
  --t-nav: 0.95rem;
  --t-body:  1.03rem;
  --t-lead:  1.15rem;
  --t-mark:  1.35rem;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --spring: cubic-bezier(0.22, 1, 0.36, 1);

  /* immagini in B/N caldo per default, prendono colore all'interazione */
  --mono: grayscale(1) brightness(1.04) contrast(1.06);
}

/* ----------  Registro notturno · l'ambiente della Web TV  ----------
   Aldo (2026-08): "l'ambiente della web TV dovrebbe essere scuro o nero anche
   per differenziarsi dal fondo bianco del portale". Non è un tema nuovo: è la
   sala di proiezione che il sistema aveva già nel lightbox dell'archivio,
   estesa a pagina intera. Stessa carta, spenta la luce: le tinte restano sul
   caldo 65–80, gli accenti salgono di luminosità per leggere sul velluto.
   Si attiva con data-theme="tv" su <html>: la pagina non ricopia nulla. */
[data-theme="tv"]{
  --bg:        oklch(0.165 0.010 65);   /* velluto d'inchiostro caldo */
  --bg-2:      oklch(0.200 0.012 65);
  --surface:   oklch(0.245 0.014 65);
  --ink:       oklch(0.950 0.007 80);   /* crema di proiezione */
  --ink-soft:  oklch(0.810 0.010 78);
  --ink-mute:  oklch(0.640 0.012 75);
  --line:      oklch(0.95 0.02 80 / 0.15);
  --rule: linear-gradient(90deg, transparent 2%, oklch(0.62 0.11 158 / .40) 26%, oklch(0.985 0.006 75 / .16) 50%, oklch(0.64 0.19 27 / .40) 74%, transparent 98%);
  --red:        oklch(0.615 0.205 27);
  --red-deep:   oklch(0.680 0.195 27);  /* al buio l'hover schiarisce, non affonda */
  --green:      oklch(0.660 0.110 158);
  --green-deep: oklch(0.590 0.100 158);
  /* al buio il B/N non deve sbiancare: resta denso */
  --mono: grayscale(1) brightness(0.98) contrast(1.05);
}
[data-theme="tv"] .nav{
  background:linear-gradient(oklch(0.23 0.014 65 / .84), oklch(0.18 0.012 65 / .68));
  border-color:oklch(0.95 0.02 80 / .10);
  box-shadow:inset 0 1px 0 oklch(1 0 0 / .09), 0 14px 34px -20px oklch(0 0 0 / .75);
}
[data-theme="tv"] .nav::before{
  background:radial-gradient(130% 200% at 0% 0%, oklch(1 0 0 / .10), transparent 46%);
}
[data-theme="tv"] .nav.scrolled{
  background:linear-gradient(oklch(0.23 0.014 65 / .94), oklch(0.18 0.012 65 / .84));
  box-shadow:inset 0 1px 0 oklch(1 0 0 / .09), 0 16px 38px -20px oklch(0 0 0 / .85);
}
[data-theme="tv"] .nav__menu-panel{
  background:linear-gradient(oklch(0.24 0.014 65 / .97), oklch(0.19 0.012 65 / .95));
  box-shadow:inset 0 1px 0 oklch(1 0 0 / .09), 0 18px 40px -22px oklch(0 0 0 / .85);
}
/* la grana da 2.2% sparisce sul velluto: qui sale quel poco che serve a vederla */
[data-theme="tv"] .grain{ opacity:.045; }

/* ----------  Reset e basi  ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-font-smoothing:antialiased; background:var(--bg); }
/* le ancore non devono finire sotto alla nav fissa */
:target, section[id], span[id], article[id]{ scroll-margin-top:clamp(6rem,9vw,8rem); }
body{
  background:transparent; color:var(--ink);
  font-family:var(--sans); font-weight:400; line-height:1.65;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--red); color:var(--cream); }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }

/* ----------  Grana cinematografica  ---------- */
.grain{
  position:fixed; inset:-150%; z-index:70; pointer-events:none; opacity:.022;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.1s steps(4) infinite;
  mix-blend-mode:overlay;
}
@keyframes grain{
  0%{transform:translate(0,0)} 25%{transform:translate(-3%,2%)}
  50%{transform:translate(2%,-3%)} 75%{transform:translate(-2%,-2%)} 100%{transform:translate(2%,3%)}
}

/* ----------  Nav: liquid glass flottante  ---------- */
.nav{
  position:fixed; z-index:80;
  top:clamp(.6rem,1.6vw,1.1rem);
  inset-inline:clamp(.6rem,3vw,1.6rem);
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding:.65rem clamp(1rem,2.4vw,1.6rem);
  border-radius:18px;
  background:linear-gradient(oklch(1 0 0 / .74), oklch(1 0 0 / .56));
  backdrop-filter:blur(20px) saturate(1.7);
  -webkit-backdrop-filter:blur(20px) saturate(1.7);
  border:1px solid oklch(0.30 0.02 80 / .10);
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / .65),
    0 14px 34px -20px oklch(0.25 0.03 70 / .40);
  /* il padding cambia di ~2px allo scroll: animarlo costa layout e non si vede */
  transition:background .5s var(--ease), box-shadow .5s var(--ease);
}
.nav::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(130% 200% at 0% 0%, oklch(1 0 0 / .35), transparent 46%);
}
.nav.scrolled{
  background:linear-gradient(oklch(1 0 0 / .86), oklch(1 0 0 / .72));
  padding-block:.5rem;
  box-shadow:inset 0 1px 0 oklch(1 0 0 / .65), 0 16px 38px -20px oklch(0.25 0.03 70 / .5);
}
.logo{ display:inline-flex; align-items:center; gap:.68rem; }
.logo__mark{
  height:54px; width:54px; flex:none; display:block;
  transition:transform .5s var(--ease);
}
.logo:hover .logo__mark{ transform:rotate(-3deg) scale(1.06); }
.logo__mark img{ height:100%; width:100%; object-fit:contain; display:block; }
.logo__lockup{ display:flex; flex-direction:column; justify-content:center; gap:.14rem; }
.logo__text{ font-family:var(--serif); font-weight:600; font-size:var(--t-mark); line-height:1; }
.logo__text i{ font-style:italic; font-weight:500; color:var(--red); }
.logo__tld{ color:var(--ink-mute); font-weight:500; }
.logo__payoff{ font-family:var(--sans); font-size:var(--t-micro); letter-spacing:.24em; text-transform:uppercase; font-weight:600; color:var(--green); line-height:1; }

.nav__links{ display:flex; align-items:center; gap:clamp(1.1rem,2vw,2rem); font-size:var(--t-nav); font-weight:500; white-space:nowrap; }
.nav__links a{ color:var(--ink-soft); transition:color .3s var(--ease); position:relative; }
.nav__links a::after{
  content:""; position:absolute; left:0; right:0; bottom:-5px; height:1px; background:var(--red);
  transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease);
}
.nav__links a:hover{ color:var(--ink); }
.nav__links a:hover::after, .nav__links a.active::after{ transform:scaleX(1); }
.nav__links .locked{ color:var(--ink-mute); cursor:not-allowed; display:inline-flex; align-items:center; gap:.45rem; }
/* quando la barra si stringe (sei voci + UNESCO dal 2026-09-16) la riga cede prima le voci
   ridondanti: Home (il logo porta già in cima) e, sulla home e sull'hub, Chi siamo —
   che restano nel menu a tendina e nel footer */
@media (max-width:1120px){ .nav__links .nav__cede{ display:none; } }
.nav__links .locked svg{ width:12px; height:12px; opacity:.7; }
.nav__links .locked::after{
  content:var(--t-soon); font-size:var(--t-micro); letter-spacing:.14em; text-transform:uppercase;
  color:var(--green); border:1px solid var(--line); border-radius:99px; padding:.05rem .42rem;
}
.nav__badge{
  display:inline-flex; align-items:center; gap:.5rem; white-space:nowrap; flex:none;
  font-size:var(--t-label); letter-spacing:.18em; text-transform:uppercase; font-weight:600; color:var(--ink-soft);
  border:1px solid var(--line); border-radius:99px; padding:.4rem .85rem;
}
.nav__badge .dot{ width:7px; height:7px; border-radius:50%; background:var(--red); animation:pulse 2.6s var(--ease) infinite; }
.nav__right{ display:inline-flex; align-items:center; gap:clamp(.7rem,1.5vw,1.3rem); }
.nav__lang{ display:inline-flex; align-items:center; gap:.5rem; }
.nav__lang-globe{ width:15px; height:15px; color:var(--ink-mute); flex:none; margin-right:.1rem; }
/* stessa grammatica dei link di navigazione: sottolineatura rossa */
.nav__lang-link{ position:relative; font-size:var(--t-label); font-weight:600; letter-spacing:.08em; color:var(--ink-mute); transition:color .3s var(--ease); }
.nav__lang-link::after{ content:""; position:absolute; left:0; right:0; bottom:-5px; height:1px; background:var(--red); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease); }
.nav__lang-link:hover{ color:var(--ink); }
.nav__lang-link:hover::after, .nav__lang-link.is-on::after{ transform:scaleX(1); }
.nav__lang-link.is-on{ color:var(--ink); }
.nav__lang-link:focus-visible{ outline:2px solid var(--red); outline-offset:3px; border-radius:2px; }
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 oklch(0.575 0.205 27 / .6); } 70%{ box-shadow:0 0 0 7px oklch(0.575 0.205 27 / 0); } 100%{ box-shadow:0 0 0 0 oklch(0.575 0.205 27 / 0); }
}

/* ----------  Leggibilità sui telefoni  ----------
   Le micro-etichette sono maiuscoletto spaziato a 0.6rem: sul desktop sono un
   dettaglio, a 9,6px su un telefono diventano un ostacolo. Fra queste ci sono
   cose che DEVONO leggersi — il credito obbligatorio a IDM, la firma del
   fotografo, la durata del filmato. Qui salgono di un gradino e la spaziatura
   si stringe un po', perché è il tracking a costare leggibilità alle misure
   piccole, non solo il corpo. Sul desktop non cambia niente. */
@media (max-width: 620px), (pointer: coarse){
  :root{ --t-micro: 0.68rem; --t-label: 0.76rem; }
}

/* ----------  Bersagli per il dito  ----------
   Verifica del 2026-09-04 (WebKit, 375→1366px, tocco emulato): i link di testo
   piccoli — IT/EN/ES nella nav (20px), i link della riga desktop su iPad
   orizzontale (25px), i rimandi «Da vedere anche in», i crediti delle foto
   UNESCO (15px), «Torna alla home» — restano sotto i 44px che un dito
   richiede. Sul tocco ricevono un'area invisibile alta 44px, centrata sul
   testo, senza spostare nulla di ciò che si vede. Le pagine non ridichiarano
   niente: ogni nuovo link di quel tipo va aggiunto a questa lista. */
@media (pointer: coarse){
  .nav__lang-link, .nav__links a, .anche a, footer a, .regione__link, .scena__link,
  .sito__c a, .fonti a, .marquee__track a, .aree a, .autori__link, .sponsor__cta{ position:relative; }
  .nav__lang-link::before, .nav__links a::before, .anche a::before, footer a::before,
  .regione__link::before, .scena__link::before, .sito__c a::before, .fonti a::before,
  .marquee__track a::before, .aree a::before, .autori__link::before, .sponsor__cta::before{
    content:""; position:absolute; left:-.4rem; right:-.4rem; top:50%; height:44px;
    transform:translateY(-50%);
  }
  /* i tre codici lingua sono vicini: l'area cresce solo in altezza, non di lato */
  .nav__lang-link::before, .nav__links a::before{ left:0; right:0; }
}

/* ----------  Menu su telefono e iPad verticale  ----------
   Sotto gli 860px .nav__links sparisce. Prima non la sostituiva niente e il
   sito restava senza navigazione proprio sui dispositivi da cui il cliente lo
   guarda più spesso. È un <details>: si apre da sé, senza JavaScript.
   Sopra gli 860px il menu non esiste e tornano i link in riga. */
.nav__menu{ display:none; position:relative; }
.nav__menu > summary{
  list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:.45rem;
  min-height:44px; padding:0 .2rem;
  font-size:var(--t-label); letter-spacing:.16em; text-transform:uppercase;
  font-weight:600; color:var(--ink-soft);
  transition:color .3s var(--ease);
}
.nav__menu > summary::-webkit-details-marker{ display:none; }
.nav__menu > summary:hover{ color:var(--ink); }
.nav__menu > summary:focus-visible{ outline:2px solid var(--red); outline-offset:3px; border-radius:3px; }
.nav__menu-i, .nav__menu-x{ width:1.15rem; height:1.15rem; flex:none; }
.nav__menu-x{ display:none; }
.nav__menu[open] > summary{ color:var(--ink); }
.nav__menu[open] .nav__menu-i{ display:none; }
.nav__menu[open] .nav__menu-x{ display:block; }

.nav__menu-panel{
  position:absolute; right:0; top:calc(100% + .55rem); z-index:90;
  min-width:min(15rem, 62vw);
  display:flex; flex-direction:column;
  background:linear-gradient(oklch(1 0 0 / .96), oklch(1 0 0 / .92));
  backdrop-filter:blur(20px) saturate(1.7); -webkit-backdrop-filter:blur(20px) saturate(1.7);
  border:1px solid var(--line); border-radius:14px;
  box-shadow:inset 0 1px 0 oklch(1 0 0 / .65), 0 18px 40px -22px oklch(0.25 0.03 70 / .5);
  padding:.3rem;
}
.nav__menu-panel a{
  display:flex; align-items:center; min-height:46px; padding:0 .9rem;
  font-size:var(--t-nav); color:var(--ink-soft);
  border-radius:10px;
  transition:background .25s var(--ease), color .25s var(--ease);
}
.nav__menu-panel a + a{ box-shadow:inset 0 1px 0 var(--line); }
.nav__menu-panel a:hover, .nav__menu-panel a:focus-visible{ color:var(--red); }
.nav__menu-panel a[aria-current]{ color:var(--ink); font-weight:600; }
.nav__menu-panel a:focus-visible{ outline:2px solid var(--red); outline-offset:-2px; }

@media (max-width:860px){
  .nav__menu{ display:block; }
}
/* il menu apre e chiude senza animazione se l'utente non le vuole */
@media (prefers-reduced-motion:reduce){
  .nav__menu-panel{ transition:none; }
}

/* ----------  Note legali nel footer (Aldo, 2026-09-05)  ----------
   Termini d'uso e Privacy in fondo a ogni pagina: un piccolo nav in riga,
   stessi colori del footer che lo ospita. */
.foot__legal{ display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; }
