/* ==========================================================================
   Fabbrica dell’Immagine — Design token

   Direzione "Affiche" (espressivo-Déco): carta calda, inchiostro pieno,
   blocchi di colore e filetti spessi. Notable (titoli e logotipo, maiuscolo
   largo e pesante, un solo peso) + Literata (testo) + Archivo (metadati e
   interfaccia). Rosso scuro come secondo colore (link, focus, hover dei
   pulsanti), niente blu. La hero ha come sfondo la locandina stessa, molto
   sfocata, sotto un velo scuro. Ispirazione Déco, non pastiche.

   I componenti leggono solo questi token: nessun colore, font o spaziatura
   è scritto direttamente in components.css.

   Breakpoint (le custom properties non funzionano nelle media query,
   quindi sono scritti per esteso nei CSS):
   - 40em  ≈  640 px   tablet
   - 64em  ≈ 1024 px   desktop

   Font: self-hosted (assets/fonts/, regole @font-face in base.css).

   Contrasto WCAG 2.2 (testo normale ≥ 4,5:1, elementi non testuali ≥ 3:1)
   - testo            #1b1a17 su fondo #efe6d2   14,02:1 · su fondo-alt #e4d7bb 12,21:1
   - testo-secondario #594f3f su fondo            6,47:1 · su fondo-alt           5,64:1
   - accento (link)   #a3281f su fondo            5,87:1 · su fondo-alt           5,12:1
     (il rosso di palette #c8352b è solo 4,23:1: usato solo per filetti)
   - focus            #a3281f su fondo            5,87:1
   - pulsante         #efe6d2 su #1b1a17         14,02:1 · hover su rosso #a3281f  5,87:1
   - header           #1b1a17 su giallo #e9b83a   9,43:1 · secondario #4a3c1c       5,82:1
                      focus inchiostro 9,43:1 · filetto hover del menu #a3281f 3,95:1 (non testo)
                      logotipo carta #efe6d2 su inchiostro 14,02:1 (anche dove sporge sulla hero)
   - hero             testo carta #efe6d2 sull'immagine sfocata coperta dal velo inchiostro al 72%:
                      caso peggiore (immagine bianca) 5,55:1, immagine nera 14,99:1;
                      prima che l'immagine arrivi: su inchiostro 14,02:1.
                      Pulsante #1b1a17 su carta 14,02:1 · hover carta su rosso #a3281f 5,87:1 ·
                      focus carta ≥ 5,55:1.
                      Pulsante Pausa/Riprendi carta sul velo ≥ 5,55:1 · hover inchiostro su carta 14,02:1 ·
                      barra del tempo giallo #e9b83a sul velo ≥ 3,8:1 (non testo; traccia decorativa)
   - evidenza         #1b1a17 su giallo #e9b83a   9,43:1 · secondario #4a3c1c       5,82:1
   - footer           #efe6d2 su #1b1a17         14,02:1 · secondario #bfb49e      8,48:1
                      titoli e focus giallo #e9b83a su #1b1a17 9,43:1
   - concorso         occhiello #a3281f su fondo 5,87:1 · filetto rosso #c8352b 4,23:1 (non testo)
   - avviso riuso     testo-secondario #594f3f su fondo 6,47:1 · nel footer #bfb49e su inchiostro 8,48:1
   - loghi            su fascia bianca #ffffff (loghi esclusi dal requisito di contrasto)
   - consenso         banner: carta #efe6d2 su inchiostro 14,02:1 · titolo e focus giallo 9,43:1 ·
                      pulsanti inchiostro su carta 14,02:1, hover carta su #a3281f 5,87:1 ·
                      preferenze: come la pagina (testo 14,02:1, secondario 6,47:1, link 5,87:1)
   - leggibilità      pulsante carta su inchiostro 14,02:1, hover su #a3281f 5,87:1 · pannello come la pagina
                      contrasto elevato: #000 su #fff 21:1, secondario #1f1f1f 16,1:1, link #7a0000 11,2:1
   - zoom             #efe6d2 su #1b1a17         14,02:1 · focus giallo 9,43:1 ·
                      pulsante #1b1a17 su carta 14,02:1, hover carta su #a3281f 5,87:1
   ========================================================================== */

:root {
  /* --- Palette di riferimento derivata dalle opere (brief) --------------- */
  --palette-carta: #efe6d2;
  --palette-inchiostro: #1b1a17;
  --palette-rosso: #c8352b;
  --palette-giallo: #e9b83a;

  /* --- Spaziature (scala fluida) ----------------------------------------- */
  --spazio-3xs: 0.25rem;
  --spazio-2xs: 0.5rem;
  --spazio-xs: 0.75rem;
  --spazio-s: 1rem;
  --spazio-m: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  --spazio-l: clamp(1.75rem, 1.25rem + 2vw, 3rem);
  --spazio-xl: clamp(2.5rem, 1.5rem + 4vw, 5rem);
  --spazio-2xl: clamp(3.5rem, 2rem + 6vw, 8rem);

  /* --- Layout ------------------------------------------------------------- */
  --margine-pagina: clamp(1rem, 0.25rem + 3.2vw, 3rem);
  --larghezza-max: 90rem;
  --misura-lettura: 65ch;
  --colonna-min: 14rem;
  --colonna-min-larga: 22rem;
  --loghi-altezza: clamp(2.25rem, 1.75rem + 1.5vw, 3.5rem);
  --loghi-spazio: var(--spazio-s) var(--spazio-m);
  --loghi-fondo: #ffffff;
  --griglia-colonne: 2;
  --scheda-quota-opera: 55%;
  --scheda-altezza-opera: calc(100svh - 10rem); /* lascia spazio a margine e credito sotto l'immagine */
  --scheda-tecnica-termine: min(7rem, 40%); /* con testo ingrandito la colonna dei termini non supera il 40% della riga */
  /* La hero intera (header, didascalia, barra del tempo e margini ≈ 19rem) sta in una schermata */
  --hero-altezza-opera: clamp(24rem, 100svh - 19rem, 52rem);

  /* --- Movimento ---------------------------------------------------------- */
  --durata-breve: 150ms;
  --durata-media: 300ms;
  --durata-lenta: 900ms;
  --curva: cubic-bezier(0.2, 0, 0, 1);

  /* --- Livelli ------------------------------------------------------------ */
  --z-header: 5; /* il logotipo sporge sulla sezione sotto l'header */
  --z-salta-contenuto: 10;
  --z-leggibilita: 15; /* pulsante e pannello delle opzioni di leggibilità, sotto il banner dei cookie */
  --z-consenso: 20; /* banner dei cookie, sopra tutto tranne i <dialog> (top layer) */

  /* --- Forme e focus ------------------------------------------------------ */
  --raggio: 0;
  --focus-spessore: 3px;
  --focus-offset: 3px;
  --ombra-opera: none;

  /* --- Scala tipografica -------------------------------------------------- */
  /* Notable è molto largo ("DELL’IMMAGINE" ≈ 9,33em): le dimensioni dei titoli sono contenute */
  --testo-xs: 0.8125rem;
  --testo-s: 0.9375rem;
  --testo-m: clamp(1rem, 0.9rem + 0.4vw, 1.1875rem);
  --testo-l: clamp(1.1875rem, 1rem + 0.75vw, 1.5rem);
  --titolo-s: clamp(1.125rem, 1rem + 0.45vw, 1.375rem);
  --titolo-m: clamp(1.375rem, 1.1rem + 1vw, 2rem);
  --titolo-l: clamp(1.75rem, 1.2rem + 2.2vw, 3.25rem);
  --titolo-xl: clamp(2.25rem, 1.25rem + 4vw, 5.5rem);
  --numeri-meta: tabular-nums;

  /* --- Colore ------------------------------------------------------------- */
  --colore-fondo: #efe6d2;
  --colore-fondo-alt: #e4d7bb;
  --colore-superficie: #f8f2e4;
  --colore-testo: #1b1a17;
  --colore-testo-secondario: #594f3f;
  --colore-filetto: #cdbf9f;
  --colore-filetto-forte: #1b1a17;
  --colore-accento: #a3281f;
  --colore-accento-hover: #1b1a17;
  --colore-su-accento: #efe6d2;
  --colore-focus: #a3281f;
  --colore-selezione: #f1d58c;

  /* --- Tipografia --------------------------------------------------------- */
  --font-display: "Notable", "Arial Black", sans-serif;
  --font-testo: "Literata", Georgia, "Times New Roman", serif;
  --font-ui: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display-peso: 400;
  --display-maiuscolo: uppercase;
  --display-spaziatura: 0;
  --display-interlinea: 1;
  --interlinea-titoli: 1.08;
  --interlinea-testo: 1.55;
  --ui-peso: 400;
  --ui-peso-forte: 700;
  --ui-maiuscolo: uppercase;
  --ui-spaziatura: 0.05em;

  /* --- Filetti ------------------------------------------------------------ */
  --filetto-sottile: 2px;
  --filetto-spesso: 6px;

  /* --- Header e logotipo -------------------------------------------------- */
  --header-fondo: var(--palette-giallo);
  --header-testo-secondario: #4a3c1c;
  --header-focus: var(--colore-testo);
  --header-filetto: var(--filetto-spesso);
  --header-filetto-colore: var(--colore-testo);
  --header-spazio: var(--spazio-s);
  --logotipo-font: var(--font-display);
  --logotipo-peso: 400;
  /* "FABBRICA" larga quanto "DELL’IMMAGINE": larghezze in Notable 6,228em e 9,326em */
  --logotipo-dimensione: calc(var(--logotipo-dimensione-seconda) * 9.326 / 6.228);
  /* 2rem da 1440 px: "FABBRICA" ≈ 300 px, larga quanto il menu. Il tetto tiene il riquadro (largo 9,326 volte la
     dimensione, più la spaziatura interna) dentro i margini della pagina anche con testo ingrandito. */
  --logotipo-dimensione-seconda: min(
    clamp(1rem, 0.4rem + 1.8vw, 2rem),
    calc((100vw - 2 * var(--margine-pagina) - 2 * var(--logotipo-spazio-interno-x)) / 9.4)
  );
  --logotipo-maiuscolo: uppercase;
  --logotipo-interlinea: 1.05;
  --logotipo-fondo: var(--colore-testo);
  --logotipo-testo: var(--colore-fondo);
  --logotipo-spazio-interno-x: clamp(0.875rem, 0.4rem + 1.3vw, 1.5rem);
  --logotipo-spazio-interno: clamp(0.625rem, 0.3rem + 0.9vw, 1rem) var(--logotipo-spazio-interno-x);
  --menu-peso: 700;
  --menu-maiuscolo: uppercase;
  --menu-spaziatura: 0.05em;
  --menu-filetto: 4px;

  /* --- Pulsante ----------------------------------------------------------- */
  --pulsante-fondo: var(--colore-testo);
  --pulsante-testo: var(--colore-fondo);
  --pulsante-fondo-hover: var(--colore-accento);
  --pulsante-testo-hover: var(--colore-fondo);
  --pulsante-peso: 700;
  --pulsante-maiuscolo: uppercase;
  --pulsante-spaziatura: 0.05em;

  /* --- Hero: locandina sfocata sotto un velo inchiostro ------------------- */
  /* L'immagine arriva da home.js come --opera-immagine sulla sezione */
  --hero-fondo: var(--colore-testo);
  --hero-testo: var(--colore-fondo);
  --hero-testo-secondario: var(--colore-fondo);
  --hero-accento: var(--palette-giallo);
  --hero-focus: var(--colore-fondo);
  --hero-pulsante-fondo: var(--colore-fondo);
  --hero-pulsante-testo: var(--colore-testo);
  --hero-pulsante-fondo-hover: var(--colore-accento);
  --hero-pulsante-testo-hover: var(--colore-fondo);
  --hero-sfondo-sfocatura: 10px;
  --hero-velo: color-mix(in srgb, var(--palette-inchiostro) 72%, transparent);
  --hero-colonne: minmax(0, 7fr) minmax(0, 5fr);
  --hero-titolo-dimensione: clamp(1.875rem, 10.5cqi, 7rem); /* cqi: larghezza della colonna di testo; una parola fino a ~9,3em resta su una riga */
  /* Rotazione delle opere: effetto di cambio, barra del tempo, pulsante di pausa */
  --hero-cambio-durata: var(--durata-lenta);
  --hero-avanzamento-spessore: 3px;
  --hero-avanzamento-colore: var(--palette-giallo);
  --hero-avanzamento-traccia: color-mix(in srgb, var(--palette-carta) 30%, transparent);
  --hero-pausa-filetto: var(--filetto-sottile);
  --hero-pausa-spazio: var(--spazio-3xs) var(--spazio-2xs);
  --hero-pausa-larghezza: 6.5rem; /* uguale per "Pausa" e "Riprendi": la barra non cambia lunghezza */

  /* --- Sezioni ------------------------------------------------------------ */
  --sezione-fondo-alterno: var(--colore-fondo-alt);
  --sezione-titolo-dimensione: var(--titolo-l);
  --sezione-filetto: var(--filetto-spesso);
  --evidenza-fondo: var(--palette-giallo);
  --evidenza-testo: var(--colore-testo);
  --evidenza-testo-secondario: #4a3c1c;
  --evidenza-filetto: var(--colore-testo);
  --evidenza-focus: var(--colore-testo);
  --intestazione-titolo-dimensione: var(--titolo-xl);
  --scheda-titolo-dimensione: clamp(1.75rem, 8cqi, 3.5rem); /* cqi: colonna dei contenuti */
  --testo-lead-dimensione: var(--testo-l);
  --interlinea-lead: 1.5;
  --capolettera-righe: 3;
  --capolettera-font: var(--font-display);
  --capolettera-colore: var(--colore-accento);
  --capolettera-spazio: var(--spazio-2xs);


  /* --- Zoom a schermo intero ---------------------------------------------- */
  --zoom-fondo: var(--colore-testo);
  --zoom-testo: var(--colore-fondo);
  --zoom-focus: var(--palette-giallo);
  --zoom-filetto: #4a453c;
  --zoom-pulsante-fondo: var(--colore-fondo);
  --zoom-pulsante-testo: var(--colore-testo);
  --zoom-pulsante-fondo-hover: var(--colore-accento);
  --zoom-pulsante-testo-hover: var(--colore-fondo);

  /* --- Griglia e card ----------------------------------------------------- */
  --griglia-gap: clamp(1rem, 0.5rem + 1.5vw, 2rem);
  --griglia-gap-righe: clamp(2rem, 1rem + 3vw, 3.5rem);
  --card-meta-gap: var(--spazio-3xs);
  /* Bordo appena percettibile attorno all'intera immagine (filetto a metà intensità) */
  --card-immagine-bordo: 1px solid color-mix(in srgb, var(--colore-filetto) 50%, transparent);
  /* Titolo in Archivo: in Notable la griglia diventava troppo pesante */
  --card-titolo-font: var(--font-ui);
  --card-titolo-dimensione: clamp(1.0625rem, 0.95rem + 0.4vw, 1.3125rem);
  --card-titolo-peso: 600;
  --card-titolo-maiuscolo: none;
  --card-titolo-spaziatura: 0;
  --card-titolo-interlinea: 1.2;
  --id-font: var(--font-ui);
  --id-dimensione: var(--testo-xs);
  --id-peso: 700;
  --id-colore: var(--colore-accento);

  /* --- Indici (Esplora per) e conteggio ----------------------------------- */
  --indice-nome-font: var(--font-display);
  --indice-nome-dimensione: var(--titolo-s);
  --indice-filetto: var(--filetto-spesso);
  --indice-filetto-colore: var(--palette-rosso);
  /* cqi: larghezza della voce. Il tetto (1/5 della larghezza utile: "1930–39" è largo 5,04 em) non cambia nulla
     con il testo normale (a 320 px vale esattamente il minimo di 1rem) e serve solo con testo ingrandito,
     quando il minimo di 1rem crescerebbe più della colonna */
  --linea-tempo-nome-dimensione: min(clamp(1rem, 15cqi, 2.25rem), calc((100cqi - var(--spazio-s)) / 5));
  --conteggio-font: var(--font-display);
  --conteggio-dimensione: var(--titolo-m);
  --conteggio-peso: 400;
  --conteggio-filetto: var(--filetto-spesso);
  --conteggio-filetto-colore: var(--colore-filetto-forte);

  /* --- Concorso (home) --------------------------------------------------- */
  --concorso-filetto: var(--filetto-spesso);
  /* "REINTERPRETA" in Notable è largo 9,78em: con 10cqi la parola sta sempre nella colonna
     (.concorso__intestazione è un container); altrimenti la dimensione delle altre sezioni */
  --concorso-titolo-dimensione: min(var(--sezione-titolo-dimensione), 10cqi);
  --concorso-filetto-colore: var(--palette-rosso);

  /* --- Consenso ai cookie: banner inchiostro come il footer ------------- */
  --consenso-fondo: var(--colore-testo);
  --consenso-testo: var(--colore-fondo);
  --consenso-titolo: var(--palette-giallo);
  --consenso-link: var(--colore-fondo);
  --consenso-link-hover: var(--palette-giallo);
  --consenso-focus: var(--palette-giallo);
  --consenso-pulsante-fondo: var(--colore-fondo);
  --consenso-pulsante-testo: var(--colore-testo);
  --consenso-pulsante-fondo-hover: var(--colore-accento);
  --consenso-pulsante-testo-hover: var(--colore-fondo);
  --consenso-filetto: var(--filetto-spesso);
  --consenso-filetto-colore: var(--palette-rosso);
  --consenso-velo: rgb(27 26 23 / 0.6);
  --consenso-altezza-massima: 70svh; /* oltre, il banner scorre al suo interno */
  --consenso-pulsante-larghezza: 11.75rem; /* "Rifiuta" largo quanto "Accetta tutti" */
  --consenso-preferenze-larghezza: 38rem;
  --consenso-casella: 1.25rem;

  /* --- Opzioni di leggibilità: pulsante fisso e pannello ------------------ */
  --leggibilita-pulsante: 3rem;
  --leggibilita-pulsante-fondo: var(--colore-testo);
  --leggibilita-pulsante-testo: var(--colore-fondo);
  --leggibilita-pulsante-fondo-hover: var(--colore-accento);
  --leggibilita-distanza: var(--spazio-s);
  --leggibilita-pannello-larghezza: 20rem;
  --leggibilita-filetto-colore: var(--palette-rosso);
  --leggibilita-ombra: 0 0.5rem 1.5rem rgb(27 26 23 / 0.25);

  /* --- Footer: blocco inchiostro ------------------------------------------ */
  --footer-fondo: var(--colore-testo);
  --footer-testo: var(--colore-fondo);
  --footer-testo-secondario: #bfb49e;
  --footer-titolo: var(--palette-giallo);
  --footer-link: var(--colore-fondo);
  --footer-filetto: #4a453c;
  --footer-focus: var(--palette-giallo);
}

@media (min-width: 40em) {
  :root {
    --griglia-colonne: 3;
  }
}

@media (min-width: 64em) {
  :root {
    --griglia-colonne: 4;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --durata-breve: 0ms;
    --durata-media: 0ms;
    --durata-lenta: 0ms;
  }
}

/* ==========================================================================
   Opzioni di leggibilità (js/leggibilita.js): attributi data-leggibilita-* su <html>
   ========================================================================== */

/* Dimensione del testo: la scala tipografica è in rem, quindi basta la radice */
:root[data-leggibilita-scala="1.25"] { font-size: 125%; }
:root[data-leggibilita-scala="1.5"] { font-size: 150%; }
:root[data-leggibilita-scala="1.75"] { font-size: 175%; }

/* Contrasto elevato: nero su bianco, secondari scuri, link rosso molto scuro */
:root[data-leggibilita-contrasto] {
  --colore-fondo: #ffffff;
  --colore-fondo-alt: #f0f0f0;
  --colore-superficie: #ffffff;
  --colore-testo: #000000;
  --colore-testo-secondario: #1f1f1f;
  --colore-filetto: #000000;
  --colore-filetto-forte: #000000;
  --card-immagine-bordo: 1px solid var(--colore-filetto);
  --colore-accento: #7a0000;
  --colore-accento-hover: #000000;
  --colore-focus: #7a0000;
  --header-testo-secondario: #000000;
  --evidenza-testo-secondario: #000000;
  --footer-testo-secondario: #ffffff;
  --footer-filetto: #ffffff;
  --hero-velo: color-mix(in srgb, #000000 88%, transparent);
}

/* Carattere più leggibile: sans-serif di sistema, niente maiuscolo largo nei titoli.
   Il logotipo resta in Notable (è il marchio). */
:root[data-leggibilita-carattere] {
  --font-display: Verdana, Tahoma, "Segoe UI", system-ui, sans-serif;
  --font-testo: Verdana, Tahoma, "Segoe UI", system-ui, sans-serif;
  --font-ui: Verdana, Tahoma, "Segoe UI", system-ui, sans-serif;
  --display-maiuscolo: none;
  --ui-maiuscolo: none;
  --logotipo-font: "Notable", "Arial Black", sans-serif;
}

/* Spaziatura del testo (WCAG 1.4.12): interlinea 1,5+, lettere 0,12em, parole 0,16em */
:root[data-leggibilita-spaziatura] {
  --interlinea-testo: 1.9;
  --interlinea-lead: 1.9;
  --interlinea-titoli: 1.3;
}

/* Ferma le animazioni: come prefers-reduced-motion */
:root[data-leggibilita-animazioni] {
  --durata-breve: 0ms;
  --durata-media: 0ms;
  --durata-lenta: 0ms;
}