/* Spazio Paradiso, sito test (30/09/2026).
   Stesso impianto del sito attuale (dal 06/10/2026 sera Gambetta e Redaction 35 Italic, fondo #e6e6e0, menu centrato,
   dissolvenze 0.3s)
   con le correzioni del PDF «INFO - SITO». */

/* caratteri (06/10/2026, PDF «Rework sito Spazio Paradiso»):
   Gambetta (Indian Type Foundry, Fontshare), il carattere del sito: un file variabile per tutti i pesi, più il corsivo.
   Licenza ITF Free Font License (fonts/FFL-gambetta.txt): gratuita anche per uso commerciale e ospitabile sul proprio
   sito, ma i file non si modificano né si convertono, quindi sono quelli web di Fontshare così come sono.
   Redaction 35 Italic (Forest Young e Jeremy Mickel / MCKL per Titus Kaphar e Reginald Dwayne Betts), SIL OFL 1.1
   (fonts/OFL-redaction.txt): la voce attiva del menu.
   Entrambi coprono gli accenti italiani e la «ā» di Sirāt. Dal 07/10/2026 li usa anche il pannello (admin/admin.css). */
@font-face{font-family:"Gambetta";font-style:normal;font-weight:300 700;font-display:swap;src:url(../fonts/Gambetta-Variable.woff2) format("woff2")}
@font-face{font-family:"Gambetta";font-style:italic;font-weight:300 700;font-display:swap;src:url(../fonts/Gambetta-VariableItalic.woff2) format("woff2")}
@font-face{font-family:"Redaction 35";font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/Redaction_35-Italic.woff2) format("woff2")}

:root{
  --ink:#000; --paper:#e6e6e0; --soft:#66666b; --line:#c9c9c2; --vuoto:#dcdcd5;   /* fondo come imogenharrison.com/horseware (06/10/2026); --soft da #6e6e73 a #66666b il 09/10/2026: 4,56:1 sul fondo, sopra il minimo di 4,5 */
  --pad:clamp(16px,3vw,32px);
  --fs:clamp(11px,1.05vw,14px);
  --ease:cubic-bezier(.22,1,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:"Gambetta",serif;font-weight:500;font-size:var(--fs);color:var(--ink);background:var(--paper);
  -webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
img{display:block;max-width:100%}
[hidden]{display:none!important}
/* ------------------------------------------------------------------ MENU */
.menu{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:5;
  max-width:100%;padding:0 12px;transition:opacity .3s ease}
.menu ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:nowrap;justify-content:center;
  align-items:baseline;gap:clamp(14px,2.5vw,36px)}
.menu a{white-space:nowrap}
/* il menu un poco più grande dei titoli sotto i progetti, per dare gerarchia (07/10/2026) */
.menu{font-size:calc(var(--fs) * 1.15)}
@media (hover:hover){.menu a:hover{opacity:.55}}   /* sul touch la schiarita restava accesa dopo il tocco */
/* voce della pagina in cui sei in Redaction 35 Italic: i due strati stanno nella stessa cella, la larghezza la tiene il
   Gambetta e il Redaction compare sopra, centrato, così le altre voci non si spostano (07/10/2026) */
.menu .mv{display:inline-grid}
.menu .mv-a,.menu .mv-b{grid-area:1/1;align-self:baseline}
.menu .mv-b{justify-self:center;width:0;display:flex;justify-content:center;white-space:nowrap;visibility:hidden;
  font-family:"Redaction 35",serif;font-style:italic;font-weight:400;font-size:.927em}   /* stessa grandezza a occhio del Gambetta */
.menu a.is-active .mv-a{visibility:hidden}
.menu a.is-active .mv-b{visibility:visible}
.menu a.is-casa .mv-a{visibility:visible}.menu a.is-casa .mv-b{display:none}   /* «Spazio Paradiso» resta sempre in Gambetta */
@media (max-width:767px){
  /* correzione: più aria tra le voci su mobile */
  .menu ul{gap:clamp(16px,4.6vw,22px)}
  .menu a{font-size:14.5px}
  /* con voci aggiunte dal pannello il menu va a capo invece di uscire dallo schermo */
  .menu{width:100%}
  .menu ul{flex-wrap:wrap;row-gap:6px}
}
/* titoli costruiti da SP.fx (js/common.js): la scritta (.fx-a) dentro un involucro (.fx), che l'Index ingrandisce al
   passaggio e le gallerie col mouse fanno comparire. Fino al 07/10/2026 al passaggio passavano anche da Gambetta a
   Redaction 35 Italic, con un secondo strato in Redaction sopra; poi Redaction è rimasto solo nel menu, per la voce
   della pagina in cui sei, e dal 09/10/2026 il secondo strato, che non si vedeva più da nessuna parte, non c'è più */
.fx{position:relative;display:inline-grid}
.fx-a{grid-area:1/1;align-self:baseline}
/* cifre a larghezza fissa (SP.cifre): Gambetta non ha le cifre tabellari; 0,6 em copre la più larga, lo 0 */
.cifra{display:inline-block;width:.6em;text-align:center}
/* link nei testi scritti dal pannello: sottolineati, come nell'anteprima del pannello */
.info-text a,#about-text a{text-decoration:underline;text-underline-offset:.15em}
@media (hover:hover){.info-text a:hover,#about-text a:hover{opacity:.55}}

/* ------------------------------------------------------------------ HOME */
.page-home{overflow:hidden;background:#000}
.page-home .menu a{color:#fff;text-shadow:0 0 2px rgba(0,0,0,.55),0 1px 4px rgba(0,0,0,.45),0 0 16px rgba(0,0,0,.35)}   /* ombra come nell'Index: sulle clip chiare il bianco spariva (09/10/2026) */
.bgvideo{position:fixed;inset:0;z-index:0;overflow:hidden;background:#000 center/cover no-repeat}  /* il fotogramma della prima clip si vede subito */
.bgvideo .layer{position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease}
.bgvideo .layer.is-on{opacity:1}
/* dissolvenza d'ingresso (06/10/2026, come alexstamatiadis.com): aprendo il sito lo sfondo affiora dal nero e il
   menu arriva subito dopo; chi ha chiesto al sistema meno movimento li vede subito */
@keyframes sp-in{from{opacity:0}to{opacity:1}}
.page-home .bgvideo{animation:sp-in 1.6s ease both}
.page-home .menu{animation:sp-in 1.1s ease .7s both}
@media (prefers-reduced-motion:reduce){.page-home .bgvideo,.page-home .menu{animation:none}}
.bgvideo iframe{position:absolute;top:50%;left:50%;width:100vw;height:56.25vw;min-width:177.78vh;
  min-height:100vh;transform:translate(-50%,-50%);border:0;pointer-events:none}
.bgvideo video,.hoverbg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}   /* clip da file: come l'iframe, riempie lo schermo */

/* ------------------------------------------------------ FOTO / VIDEO (gallerie) */
.page-gallery{background:var(--paper)}
.hoverbg{position:fixed;inset:0;z-index:0;display:none;overflow:hidden;background:var(--paper) center/cover no-repeat;
  opacity:0;transition:opacity .3s ease}
.page-video .hoverbg{background-color:#000}
.hoverbg iframe{position:absolute;top:50%;left:50%;width:100vw;height:56.25vw;min-width:177.78vh;
  min-height:100vh;transform:translate(-50%,-50%);border:0;pointer-events:none}
/* un livello per progetto, già pronto: all'hover se ne accende uno, senza ricaricare niente */
.hoverbg .hb{position:absolute;inset:0;background:center/cover no-repeat;opacity:0;transition:opacity .3s ease}
.hoverbg .hb.is-on{opacity:1}
.hoverbg .hb-lq,.hoverbg .hb-hq{position:absolute;inset:0;background:center/cover no-repeat;overflow:hidden}
.hoverbg .hb-lq{filter:blur(22px);transform:scale(1.1)}   /* versione minuscola sfocata, finché arriva quella vera */
.hoverbg .hb-hq{opacity:0;transition:opacity .35s ease}
.hoverbg .hb-hq.is-ready{opacity:1}
/* il nero sopra lo sfondo (13/10/2026): un velo nero dentro il livello di ogni progetto, nelle pagine Photo e Film e
   nell'Index, con l'opacità che Matteo sceglie nel pannello per quel progetto (--nero, da 0 a 0,9: la scrivono
   js/gallery.js e js/indice.js; 0,2 se manca). Sta dentro il livello e non sul contenitore, così la dissolvenza tra un
   progetto e l'altro resta quella di prima: i livelli si danno il cambio ciascuno con il suo nero, mentre un velo unico
   avrebbe dovuto cambiare valore a metà del passaggio. Copre anche il video e il lettore Vimeo, e non prende il mouse */
.hoverbg .hb::after,.idx-bg .ib::after{content:"";position:absolute;inset:0;background:#000;opacity:var(--nero,.2);pointer-events:none}
.gallery{position:relative;z-index:1}
.g-item{margin:0;text-align:center}
.g-item a{display:block}
.g-media{position:relative;width:100%;overflow:hidden;background:var(--vuoto)}
.g-media img{width:100%;height:auto}
.g-media iframe{position:absolute;top:50%;left:50%;width:100%;height:100%;border:0;pointer-events:none;
  transform:translate(-50%,-50%);opacity:0;transition:opacity .4s ease}
.g-media iframe.is-playing{opacity:1}   /* il player Vimeo resta invisibile finché il video non scorre: sotto c'è il fotogramma */
.g-media .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.g-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
.g-item figcaption{margin-top:calc(.4em + 5px);line-height:1.2}

@media (min-width:1280px){
  .page-gallery{height:100vh;overflow:hidden}
  .hoverbg{display:block}
  .gallery{position:absolute;inset:0}
  /* anteprime più grandi (06/10/2026: erano 21vw, al massimo 400 px): stessa disposizione, quattro in alto
     e quattro in basso, con margine ai lati uguale a quello in alto e spazi stretti tra le immagini */
  .page-gallery{--gm:clamp(14px,2.6vh,30px);--gg:clamp(8px,.8vw,16px);--gw:calc((100% - 2 * var(--gm) - 3 * var(--gg)) / 4)}
  .g-item{position:absolute;width:var(--gw);transition:opacity .3s ease}
  .g-item.row-top{top:var(--gm)}
  .g-item.row-bottom{bottom:var(--gm)}
  .g-item.pos-0{left:var(--gm)}
  .g-item.pos-1{left:calc(var(--gm) + var(--gw) + var(--gg))}
  .g-item.pos-2{left:calc(var(--gm) + 2 * (var(--gw) + var(--gg)))}
  .g-item.pos-3{left:calc(var(--gm) + 3 * (var(--gw) + var(--gg)))}
  /* un'anteprima verticale non arriva mai sul menu: si ferma a metà schermo, intera e centrata */
  .page-foto .g-media{width:fit-content;max-width:100%;margin:0 auto}
  .page-foto .g-media img{width:auto;max-width:100%;max-height:calc(50vh - var(--gm) - 64px)}
  .has-hover .hoverbg{opacity:1}
  /* cambiando progetto il nuovo sfondo entra sopra e il vecchio si spegne solo dopo, come nell'Index (13/10/2026): prima si
     davano il cambio insieme, e a metà passaggio traspariva la carta; con il nero sopra gli sfondi diventava un lampo chiaro */
  .has-hover .hoverbg .hb{transition-delay:.3s}
  .has-hover .hoverbg .hb.is-on{transition-delay:0s}
  /* le anteprime nascoste ricevono ancora il mouse (09/10/2026): passando da un progetto a quello accanto lo sfondo cambia
     in dissolvenza; prima, senza mouse, bisognava spegnere tutto a ogni uscita e la pagina sfarfallava */
  .has-hover .g-item{opacity:0}
  .has-hover .g-item.is-hovered{opacity:1;pointer-events:auto;z-index:2}
  .has-hover .menu{opacity:0;pointer-events:none}
  /* sopra lo sfondo il titolo è sempre bianco, con un'ombra piena che lo fa leggere anche sulle foto chiare: uguale in
     Photo, Video e Index (scelta di Matteo sulle tavole di confronto, 12/10/2026; il 13/10 più leggera, sempre su sua richiesta). Prima nero sulle foto chiare, deciso
     sulla luminosità media della foto, che sbagliava dove la scritta sta su una parte scura (Poem against the sea) */
  .has-hover .g-item.is-hovered figcaption{color:#fff;text-shadow:0 0 1px rgba(0,0,0,.55),0 0 3px rgba(0,0,0,.42),0 1px 6px rgba(0,0,0,.32),0 0 18px rgba(0,0,0,.28)}
}
@media (max-width:1279px){
  .page-gallery .menu{position:static;transform:none;padding:var(--pad) 12px 0}
  .gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.7vw,20px);
    padding:clamp(28px,4vw,48px) var(--pad) var(--pad)}
}
@media (max-width:767px){
  .gallery{grid-template-columns:1fr;gap:14px}
  .g-item figcaption{font-size:13px}
}

/* ------------------------------------------------------------------ INDEX */
.page-index .menu,.page-about .menu,.page-legal .menu{position:static;transform:none;padding:var(--pad) 12px 0}
.idx{padding:clamp(36px,6vh,64px) clamp(16px,4vw,48px) clamp(48px,8vh,96px)}
.idx ul{margin:0;padding:0;list-style:none;width:min(64%,940px)}
/* colonne: titolo, che lavoro è (Commissioned, Authorial, Film), tipo (Photo, Video), anno */
.idx a{display:grid;grid-template-columns:minmax(0,1fr) minmax(170px,15vw) minmax(52px,6vw) minmax(64px,7vw);gap:clamp(16px,2.4vw,44px);
  align-items:baseline;padding:clamp(9px,1.3vh,15px) 0;transition:opacity .25s ease}
.idx a:focus-visible{outline:1px solid currentColor;outline-offset:4px}   /* dove si è con la tastiera (09/10/2026) */
/* la voce sotto il mouse, o raggiunta con la tastiera: il titolo si ingrandisce appena (06/10/2026). In 0,3 s dal
   07/10/2026: con un secondo, scorrendo sulle voci le dissolvenze si accavallavano e sembrava che s'inceppasse. Lo
   stato lo comanda il JS (is-hovered), come l'immagine sotto */
.idx a .fx{transform-origin:0 60%;transition:transform .3s ease}
.idx a.is-hovered .fx,.idx a:focus-visible .fx{transform:scale(1.07)}
.idx.is-reset .fx{transition:none!important}
/* al passaggio del mouse l'immagine del progetto riempie lo schermo sotto l'elenco, e le voci restano sopra
   (06/10/2026; prima un'anteprima in una colonna a destra). I livelli li crea js/indice.js; il nero sopra ciascuno è
   nella parte delle gallerie, qui sopra (13/10/2026) */
.idx-bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.idx-bg .ib{position:absolute;inset:0;opacity:0;transition:opacity .3s ease}   /* dissolvenza incrociata tra un progetto e l'altro */
.idx-bg .ib.is-on{opacity:1}
.has-bg .idx-bg .ib{transition-delay:.3s}   /* cambiando voce il vecchio sfondo si spegne dopo che il nuovo è entrato */
.has-bg .idx-bg .ib.is-on{transition-delay:0s}
.idx-bg.is-reset .ib,.idx-bg.is-reset .ib *{transition:none!important}   /* uscita dalla pagina: niente dissolvenze congelate */
.idx-bg .ib-lq,.idx-bg .ib-hq{position:absolute;inset:0;background:center/cover no-repeat}
.idx-bg .ib-lq{filter:blur(22px);transform:scale(1.1)}   /* versione minuscola sfocata, finché arriva quella vera */
.idx-bg .ib-hq{opacity:0;transition:opacity .3s ease}
.idx-bg .ib.has-hq .ib-lq{display:none}   /* arrivata l'immagine vera, la versione sfocata si spegne: sfocare tutto lo schermo pesa */
.idx-bg .ib-hq.is-ready{opacity:1}
.idx-bg .ib-clip{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s ease}
.idx-bg .ib-clip.is-ready{opacity:1}
.page-index .menu{position:relative;top:auto;left:auto;z-index:2}
.page-index .idx{position:relative;z-index:1}
/* sopra l'immagine: tutto bianco (scelta di Matteo, 06/10/2026: provata prima la «differenza», che sui toni medi si
   leggeva meno); le voci restano tutte piene, niente schiarita. Dal 12/10/2026 la stessa ombra dei titoli delle pagine
   Photo e Video, su ogni sfondo (alleggerita il 13/10/2026): niente più testo nero sulle foto chiare */
.has-bg .menu,.has-bg .idx{color:#fff;text-shadow:0 0 1px rgba(0,0,0,.55),0 0 3px rgba(0,0,0,.42),0 1px 6px rgba(0,0,0,.32),0 0 18px rgba(0,0,0,.28)}
@media (max-width:767px){
  .idx ul{width:100%}
  .idx a{grid-template-columns:minmax(0,1fr) auto auto;gap:14px}
}
@media (hover:none){.idx-bg{display:none}}
/* sul touch lo sfondo al passaggio non c'è, e la colonna al 64% stringeva i titoli fino a mandarli a capo (telefono in
   orizzontale, tablet in verticale): l'elenco prende tutta la larghezza, fino a 940 px (09/10/2026) */
@media (pointer:coarse) and (min-width:768px){.idx ul{width:min(100%,940px)}}

/* ------------------------------------------------------------------ PROGETTO FOTO */
.page-project{overflow:hidden;height:100%;--io:cubic-bezier(.87,0,.13,1)}
.p-head{position:fixed;top:0;left:0;right:0;z-index:5;text-align:center;padding:var(--pad) 12px 12px;pointer-events:none;background:var(--paper)}
.p-head .menu{position:static;transform:none;padding:0;pointer-events:auto}
.p-title{margin:clamp(12px,2vh,20px) 0 0;font-size:inherit;font-weight:500;line-height:1.2}
.p-title .sep{opacity:.45;margin:0 .45em}
/* progetti foto (06/10/2026): il titolo con l'estetica della pagina del film. A metà altezza della striscia numero,
   titolo e anno distanziati; con l'Info aperta scende sopra il pannello, sempre a sinistra e nella stessa forma; con
   la vista d'insieme sale al centro sotto il menu, nel visore sulla riga del contatore. Le posizioni le dà il JS
   (--pt-mid, --pt-info, --pt-top), il viaggio di ogni parola lo anima il JS.
   Bianco in «differenza»: nero sul bianco della pagina, leggibile anche dove passa sopra una foto. */
.p-title-spazio{margin:clamp(12px,2vh,20px) 0 0;height:1.2em}   /* il posto del titolo nella testata, quando sale */
/* bianco in «differenza», com'era fino al 09/10/2026 e di nuovo dal 13/10 (richiesta di Matteo, con il titolo tornato a
   metà altezza): nero sulla carta, chiaro sulle foto scure; sparisce quando il mouse passa sulle foto (regola più sotto) */
.p-title.pt{position:fixed;z-index:7;margin:0;display:flex;align-items:baseline;flex-wrap:wrap;color:#fff;
  mix-blend-mode:difference;pointer-events:none;line-height:1.2;font-variant-numeric:tabular-nums}
.p-title.pt>span{transition:transform .8s var(--io),opacity .5s ease}
.p-title.pt{transition:opacity .45s ease}

.p-title.pt.is-riga,.p-title.pt.is-info{left:var(--pad);right:var(--pad);gap:6px clamp(20px,3.6vw,56px)}
.p-title.pt.is-riga{top:var(--pt-mid,50%);margin-top:-.6em}
.p-title.pt.is-info{bottom:var(--pt-info,240px)}
.p-title.pt.is-alto,.p-title.pt.is-visore{left:var(--pad);right:var(--pad);justify-content:center}
.p-title.pt.is-alto{top:var(--pt-top,80px)}
/* vista d'insieme: il titolo sparisce dalla riga e ricompare sotto il menu, che resta al suo posto (13/10/2026; dal 07/10
   il menu spariva e il titolo prendeva il suo posto). Niente si muove sopra le foto */
.p-title.pt.is-cambio{opacity:0;transition:opacity .3s ease}
.p-title.pt.is-riga.is-via{opacity:0}   /* il dito che scorre le foto lo spegne (js/progetto.js, titoloVia) */
.p-title.pt.is-visore{top:var(--pad);z-index:61;padding:0 80px}
.p-title.pt .pt-sl{opacity:.45;margin:0 .45em}
/* il nome del progetto più grande del numero e dell'anno (07/10/2026); col mouse sopra una foto della striscia sparisce,
   così la foto si vede intera */
.p-title.pt .pt-parte{font-size:1.35em;line-height:1}
@media (hover:hover){.page-project:has(.slide:hover) .p-title.pt.is-riga{opacity:0}}
.p-title.pt.is-riga .sep,.p-title.pt.is-riga .pt-sl,.p-title.pt.is-info .sep,.p-title.pt.is-info .pt-sl{position:absolute;opacity:0}
.p-title.pt.is-alto .pt-num,.p-title.pt.is-visore .pt-num{position:absolute;opacity:0}

/* striscia: top e bottom li calcola il JS (sotto la testata, sopra la barra o sopra l'info) */
.strip:focus-visible{outline:1px solid var(--ink);outline-offset:-1px}   /* solo da tastiera (09/10/2026) */
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}   /* testo solo per i lettori di schermo */
.strip{position:fixed;left:0;right:0;top:0;bottom:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;cursor:grab}
.strip.is-dragging{cursor:grabbing}
.strip::-webkit-scrollbar{display:none}
.strip-track{display:flex;align-items:center;height:100%;width:max-content;gap:clamp(56px,11vw,190px)}   /* max-content: anche l'ultima foto si centra */
@media (max-width:767px){.strip-track{gap:22px}}
.slide{flex:0 0 auto;margin:0;position:relative;user-select:none;-webkit-user-select:none}
.slide img{height:100%;width:100%;background:var(--vuoto);-webkit-user-drag:none;pointer-events:none}
.slide .num{position:absolute;left:0;top:100%;margin-top:8px;font-size:11px;color:var(--soft);
  font-variant-numeric:tabular-nums}
.strip.is-panorama .num{display:none}   /* panoramica: foto attaccate, senza numeri */
.strip.is-senza-posto{visibility:hidden}   /* Info aperta in una finestra bassissima: nessuno spazio per la fila (10/10/2026) */
/* info aperto: miniature ravvicinate (riferimento evelyndragan.com, 20px tra le foto) */
.info-open .strip-track{gap:20px}
@media (max-width:767px){.info-open .strip-track{gap:12px}}
/* le transizioni valgono solo mentre si apre o si chiude l'info, non al ridimensionamento */
.strip.is-anim{transition:top .8s var(--io),bottom .8s var(--io)}
.strip.is-anim .strip-track{transition:gap .8s var(--io),padding .8s var(--io)}
.strip.is-anim .slide{transition:width .8s var(--io),height .8s var(--io)}

.p-foot{position:fixed;left:0;right:0;bottom:0;z-index:6;display:flex;align-items:center;gap:clamp(16px,3vw,40px);
  padding:12px var(--pad) var(--pad);pointer-events:none;background:var(--paper);transition:opacity .3s ease,visibility 0s}
.p-foot>*{pointer-events:auto}
.p-foot .grow{flex:1;display:flex;justify-content:center;align-self:stretch;align-items:center;padding:13px 0;margin:-13px 0}   /* alta quanto la barra più un margine trasparente: la linea si tocca anche col dito, e resta dov'era (09/10/2026) */
.progress{width:min(34vw,420px);height:1px;background:var(--line);position:relative}
.progress i{position:absolute;top:-.5px;height:2px;left:0;width:18%;background:var(--ink);transition:left .12s linear}
.btn-link{white-space:nowrap}
.counter{font-variant-numeric:tabular-nums;color:var(--soft);min-width:4.5em;text-align:right}
.ov-open .p-foot{opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s linear .3s}
/* sul telefono la barra in basso (Info, la linea, il contatore) sale di 10 px rispetto a com'era (29/10/2026, Matteo:
   «Info [...] troppo schiacciata in fondo ed è quindi scomoda da cliccare», poi «di poco rispetto a dove si trovava
   prima [...] 10 pixel, 15 pixel»); le foto e l'Info si spostano con lei, perché leggono la sua altezza (--foot-h), e il
   riquadro dei cookie sta sopra di lei */
@media (pointer:coarse){.p-foot{padding-bottom:calc(var(--pad) + 10px)}
  /* il titolo a metà altezza sopra le foto (30/10/2026): un po' più grande dei 13 px della riga, per reggere sopra le
     immagini */
  .page-project .p-title.pt.is-riga{font-size:15px}
  body.page-project .cookie{bottom:calc(var(--foot-h,52px) + 8px)}}
.info-open .cookie.is-on,.ov-open .cookie.is-on{opacity:0;visibility:hidden;pointer-events:none}

/* icona vista d'insieme: la fiamma di Spazio Paradiso (dal 06/10/2026 al posto dei tre cerchi); apre e chiude.
   La posizione verticale la allinea il JS alla riga del titolo. */
.view-toggle{position:fixed;z-index:8;right:calc(var(--pad) - 8px);top:calc(var(--pad) + 22px);padding:4px 8px;
  line-height:0;color:var(--ink);transition:opacity .25s ease}
.view-toggle img{display:block;width:17px;height:30px;max-width:none}   /* la fiamma (img/fiamma*.png) */
.view-toggle:focus-visible{outline:1px solid var(--ink);outline-offset:2px}

/* vista d'insieme: tutte le foto nello schermo, intere; colonne e celle le calcola il JS */
.overview{position:fixed;inset:0;z-index:4;display:flex;overflow-y:auto;background:var(--paper);
  padding:88px var(--pad) var(--pad);opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s linear .35s}
.overview.is-on{opacity:1;visibility:visible;transition:opacity .35s ease,visibility 0s}
.ov-grid{display:grid;margin:auto;justify-content:center}
.ov-cell{width:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;cursor:pointer;
  opacity:0;transform:translateY(8px);transition:opacity .45s ease,transform .6s var(--ease)}
.overview.is-on .ov-cell{opacity:1;transform:none}
.ov-cell img{max-width:100%;max-height:100%;width:auto;height:auto;transition:opacity .2s ease}
/* righe a proporzioni vere: ogni cella ha la forma della sua foto (misure dal JS) */
.ov-grid.is-rows{display:flex;flex-wrap:wrap;align-items:center;justify-content:center}
.ov-grid.is-rows .ov-cell{aspect-ratio:auto;flex:0 0 auto}
.ov-grid.is-left{margin-left:0;justify-content:start}
.ov-grid.is-rows.is-left{justify-content:flex-start}
/* impaginata a mano (07/10/2026): la tavola composta nel pannello, misure e posizioni in px dal JS; ogni cella ha la
   forma della sua foto e l'immagine la riempie tutta, senza bordi vuoti e senza ritaglio */
.ov-grid.is-free{display:block;position:relative;flex:0 0 auto}
.ov-grid.is-free .ov-cell{position:absolute;display:block;aspect-ratio:auto}
.ov-grid.is-free .ov-cell img{display:block;width:100%;height:100%;max-width:none;max-height:none}
/* anteprima nel pannello: niente pop up dei cookie */
.is-preview .cookie{display:none!important}

/* pannello info (riferimento evelyndragan.com): compatto, filetto sopra, testo a sinistra con
   un piccolo scroll interno, tipo, anno e numero di foto a destra. Sta sopra la barra in basso. */
.info{position:fixed;left:0;right:0;bottom:var(--foot-h,52px);z-index:5;background:var(--paper);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px clamp(24px,4vw,64px);
  padding:14px var(--pad) 10px;opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .25s ease,transform .3s ease,visibility 0s linear .3s}
.info::before{content:"";position:absolute;top:0;left:var(--pad);right:var(--pad);border-top:1px solid var(--ink)}
.info.is-on{opacity:1;visibility:visible;transform:none;
  transition:opacity .5s ease .35s,transform .7s var(--ease) .3s,visibility 0s}
.info-text{max-width:62ch;max-height:min(22vh,190px);overflow-y:auto;overscroll-behavior:contain;
  line-height:1.55;padding-right:14px;scrollbar-width:thin;scrollbar-color:#c8c8cc transparent}
.info-text::-webkit-scrollbar{width:3px}
.info-text::-webkit-scrollbar-thumb{background:#c8c8cc}
.info-text p{margin:0 0 .7em}
.info-text p:last-child{margin-bottom:0}
.info-text:empty{display:none}
.info-text:empty + .info-meta{grid-column:-2}
.info-text.has-more{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 30px),transparent);
  mask-image:linear-gradient(to bottom,#000 calc(100% - 30px),transparent)}
.info-meta{margin:0;display:flex;flex-wrap:wrap;gap:8px clamp(24px,3vw,48px);align-content:start}
.info-meta dt{font-size:11px;color:var(--soft);margin:0 0 2px}
.info-meta dd{margin:0}
/* le pubblicazioni di Proboscis nella riga dei dati (13/10/2026, prima c'era anche il microscopio 3D) */
.info-meta-pub a{text-decoration:underline;text-underline-offset:.15em}
/* il libro 3D nell'Info di un progetto (14/10/2026, il primo è Poem Against the Sea): a destra, a metà altezza del
   pannello, dove fino al 12/10 c'era il microscopio. Il libro chiuso gira e si gira trascinandolo; un clic breve apre la
   pagina grande (js/libro.js) */
.info-oggetto{position:absolute;right:var(--pad);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;
  align-items:center;gap:4px;color:inherit;background:none;border:0;padding:0;font:inherit;cursor:pointer}
.info-oggetto-3d{display:block;height:150px;aspect-ratio:3/4;touch-action:pan-y;position:relative;z-index:0}
.info-oggetto-3d canvas{display:block;cursor:grab;transition:opacity .4s ease}
.info-oggetto-3d canvas:active{cursor:grabbing}
/* finché il libro non è disegnato, la copertina intera come immagine, grande quanto il libro nel riquadro; poi si
   scambiano in dissolvenza (14/10/2026: prima il riquadro restava vuoto finché non arrivava il 3D) */
.info-oggetto-3d::before{content:"";position:absolute;inset:var(--attesa-inset,15.96% 16.02% 19.29%);z-index:-1;pointer-events:none;opacity:0;
  background:center/contain no-repeat;transition:opacity .4s ease}
/* l'immagine la chiede progetto.js quando parte il libro, a pagina ferma, e mette is-copertina quando è arrivata tutta:
   non ruba banda alla fila delle foto e non si vede a metà. È la copertina leggera (113 kB, metà lato), la stessa che
   il libro usa nel riquadro: con la texture piena da 815 kB, aprendo l'Info presto, il riquadro restava vuoto per
   secondi (correzione del 14/10/2026). Dal 14/10/2026, sera, l'immagine è quella del libro del progetto (--attesa, la
   mette progetto.js dai dati del pannello) e sta nello stesso riquadro in cui js/libro.js inquadra il libro chiuso,
   largo 1,3 volte la pagina e alto 1,2 volte: un box del 77% x 83,3% (inset 8,33% e 11,5%), con contain. Per Poem e per
   i formati più larghi di 7 a 10 comanda la larghezza, ed è la misura di prima (86,6 x 110 px per Poem); per un formato
   stretto comanda l'altezza, come nel libro 3D. Correzione del 14/10/2026: prima era larga il 77% con l'altezza libera,
   e un libro 11 x 23 perdeva il 17% dell'immagine, sopra e sotto, ed era più grande del libro che la sostituisce.
   Dal 26/10/2026 il libro nel riquadro è visto da più in alto e più lontano (INCLINA in js/libro.js), e l'inset lo
   calcola progetto.js (insetAttesa) dalla proporzione dell'immagine, appena arrivata: la stessa area e lo stesso centro
   della copertina 3D del primo fotogramma, per ogni libro. Quello qui è il valore per le proporzioni di Poem */
.info-oggetto-3d.is-copertina::before{background-image:var(--attesa)}
.info-oggetto-3d.is-attesa::before{opacity:1}
.info-oggetto-3d.is-attesa canvas{opacity:0}
.info-oggetto-3d.is-attesa.is-pronto::before{opacity:0}
.info-oggetto-3d.is-attesa.is-pronto canvas{opacity:1}
.info-oggetto-3d.is-errore{background:var(--attesa) center/contain no-repeat}
.info-oggetto-nome{font-size:11px;color:var(--soft);transition:color .3s ease}
.info-oggetto:focus-visible{outline:1px solid var(--ink);outline-offset:4px}
@media (hover:hover){.info-oggetto:hover .info-oggetto-nome{color:var(--ink)}}
.info-meta-libro{display:none}
.info-meta-libro .btn-link{text-decoration:underline;text-underline-offset:.15em}
/* con il libro l'Info è alta almeno quanto il riquadro e la scritta sotto (14/10/2026): un progetto con poco testo, o un
   film senza testo, aveva il pannello basso e il libro ne usciva, con «Click to open» sotto la barra in fondo */
@media (min-width:768px) and (min-height:521px){.info.con-libro{min-height:206px}}
@media (max-width:767px){
  .info{grid-template-columns:1fr}
  .info-text{max-height:min(24vh,170px)}
  .info-meta{grid-row:2;grid-column:1;align-self:end}
  /* sul telefono il libro sta a destra sulla riga di tipo, anno e immagini */
  .info-oggetto{position:static;transform:none;grid-row:2;grid-column:1;justify-self:end;align-self:end}
  .info-oggetto-3d{height:64px}
}
/* schermi bassi (telefono in orizzontale): tipo e anno accanto al testo, testo più corto */
@media (max-height:520px){
  .info{grid-template-columns:minmax(0,1fr) auto}
  .info-meta{flex-direction:row;gap:4px 16px}   /* in riga: in colonna il pannello cresceva e tagliava le miniature */
  .info-text{max-height:min(22vh,90px)}
  .info-oggetto{display:none}   /* non c'è posto: il libro si apre dalla riga dei dati */
  .info-meta-libro{display:block}
}
/* hover solo con mouse o trackpad: sul touch l'opacità resterebbe bloccata dopo il tocco */
@media (hover:hover){
  .btn-link:hover,.view-toggle:hover{opacity:.55}
  .ov-cell:hover img{opacity:.65}
}
/* volo delle foto tra la striscia e la vista d'insieme (06/10/2026): le celle stanno ferme e piene, si muovono solo le
   foto (trasformazioni scritte dal JS); chiudendo, la vista sparisce di colpo quando le foto sono atterrate */
.overview.is-volo .ov-cell{transition:none!important;opacity:1!important;transform:none!important}
.overview.is-volo .ov-cell img{will-change:transform}
.overview.is-chiude{transition:none!important}
/* chi ha chiesto meno movimento nelle impostazioni: cambi di stato senza animazione */
@media (prefers-reduced-motion:reduce){
  .strip.is-anim,.strip.is-anim .strip-track,.strip.is-anim .slide,.info,.info.is-on,.ov-cell,.p-title.pt>span{transition:none!important}
}

/* lightbox */
.lb{position:fixed;inset:0;z-index:60;background:var(--paper);opacity:0;visibility:hidden;
  transition:opacity .3s ease,visibility .3s ease;touch-action:pinch-zoom;cursor:grab}
.lb.is-zoom{touch-action:auto;cursor:auto}   /* pagina ingrandita con due dita: il dito sposta la vista */
.lb.is-dragging{cursor:grabbing}
.lb.is-on{opacity:1;visibility:visible}
.lb-track{position:absolute;inset:0;display:flex;will-change:transform}
.lb-slide{flex:0 0 100%;height:100%;display:flex;align-items:center;justify-content:center;
  padding:clamp(56px,9vh,84px) clamp(12px,4vw,64px)}
.lb-slide img{max-width:100%;max-height:100%;width:auto;height:auto;-webkit-user-drag:none;pointer-events:none;
  user-select:none}
.lb-bar{position:absolute;left:0;right:0;top:0;display:flex;justify-content:space-between;
  padding:var(--pad);z-index:2}
.lb-count{font-variant-numeric:tabular-nums;color:var(--soft)}

/* la pagina grande del libro 3D (14/10/2026, nata per Poem Against the Sea): sopra il progetto come il visore, sul
   fondo del sito. Un clic va avanti, trascinando si gira il libro (il dito e le due dita li gestisce js/libro.js:
   touch-action none); Close in alto a destra, la guida in basso, lo zoom e Reset view in basso a destra */
.libro{position:fixed;inset:0;z-index:60;background:var(--paper);opacity:0;visibility:hidden;
  transition:opacity .3s ease,visibility .3s ease}
.libro.is-on{opacity:1;visibility:visible}
/* il link diretto al libro (progetto.html?p=…#libro, 28/10/2026): la pagina del progetto non si vede mentre il libro si
   carica; al centro la copertina d'attesa (--attesa, da js/progetto.js), sotto la pagina grande del libro */
.libro-attesa{display:none}
.libro-attesa:target:not(.is-via){display:block;position:fixed;inset:0;z-index:59;background:var(--paper) var(--attesa,none) center/auto min(59vh,77vw) no-repeat}
.libro-scena{position:absolute;inset:0;cursor:grab;touch-action:none}
.libro-scena.is-trascina{cursor:grabbing}
.libro-scena canvas{display:block}
.libro-vista{position:absolute;right:var(--pad);bottom:var(--pad);display:flex;gap:clamp(14px,2vw,24px);z-index:2}
/* spenti con aria-disabled, che lascia il fuoco sul pulsante (js/libro.js, correzione del 14/10/2026) */
.libro-vista .btn-link[aria-disabled=true],.libro-comandi .btn-link[aria-disabled=true]{opacity:.3;cursor:default}
/* sul telefono e sul tablet −, + e Reset view hanno ognuno la sua area di 44 pixel, attaccate: con l'area allargata di
   .btn-link (in fondo, pointer:coarse) quelle di − e + si sovrapponevano e il tocco sul − arrivava al + (correzione del
   14/10/2026). Il gruppo scende di quanto l'area cresce sotto il testo, così le scritte restano dov'erano */
@media (pointer:coarse){
  .libro-vista{gap:0;bottom:calc(var(--pad) - 13px)}
  .libro-vista .btn-link{min-width:44px;min-height:44px}
}
/* ingranditi o girati, il libro passa sotto le barre: in alto e in basso il fondo sfuma sopra le pagine, così comandi e
   guida si leggono e non coprono il testo (correzione del 14/10/2026; la classe is-ingrandito la mette js/libro.js) */
.libro::before,.libro::after{content:"";position:absolute;left:0;right:0;z-index:1;pointer-events:none;opacity:0;
  transition:opacity .3s ease}
.libro::before{top:0;height:calc(var(--pad) + 44px);background:linear-gradient(var(--paper) 50%,transparent)}
.libro::after{bottom:0;height:calc(var(--pad) + 44px);background:linear-gradient(transparent,var(--paper) 50%)}
.libro.is-ingrandito::before,.libro.is-ingrandito::after{opacity:1}
@media (max-width:899px){.libro::after{height:calc(var(--pad) + 76px)}}
.libro-bar{position:absolute;left:0;right:0;top:0;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;
  padding:var(--pad);z-index:2;pointer-events:none}
.libro-capitoli,.libro-comandi{display:flex;gap:clamp(12px,2vw,24px);pointer-events:auto}
.libro-capitoli .btn-link{color:var(--soft)}
.libro-capitoli .btn-link.is-on{color:var(--ink)}
/* il tasto del pre-order (28/10/2026): sottolineato, perché porta fuori dal libro */
.libro-preordine{text-decoration:underline;text-underline-offset:.15em}
.libro-guida{position:absolute;left:var(--pad);right:var(--pad);bottom:var(--pad);text-align:center;font-size:11px;
  color:var(--soft);pointer-events:none;transition:opacity .4s ease;z-index:2}
@media (max-width:899px){.libro-guida{bottom:calc(var(--pad) + 34px)}}   /* sopra lo zoom, che a destra non lascia spazio */

/* ------------------------------------------------------------------ PROGETTO VIDEO (pagina del film)
   Riferimento alexstamatiadis.com: fondo nero, il video intero e più grande possibile al centro (mai ritagliato),
   una riga a metà altezza con numero, titolo e anno e il tempo a destra, comandi testuali in basso, Exit in alto. */
.page-film{background:#000;color:#fff;overflow:hidden;height:100%}
.page-film .p-head{display:none}
.film-stage{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#000}
.film-frame{position:relative;width:min(100vw,calc(100vh * var(--ar,1.7778)));aspect-ratio:var(--ar,1.7778);
  max-height:100vh;transition:opacity .5s ease}
@supports (height:100dvh){.film-frame{width:min(100vw,calc(100dvh * var(--ar,1.7778)));max-height:100dvh}}
.film-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.film-frame .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;
  pointer-events:none;transition:opacity .6s ease}
.film-frame.is-started .poster{opacity:0}
.film-hit{position:absolute;inset:0;z-index:1;cursor:pointer}
/* mentre il video scorre e il mouse è fermo il cursore sparisce insieme ai comandi, anche sopra il video
   (prima restava la manina di .film-hit); non sopra il pop up dei cookie, che resta visibile e cliccabile */
.page-film.is-idle,.page-film.is-idle *:not(.cookie,.cookie *){cursor:none}
.film-ui{transition:opacity .6s ease}
/* comandi e scritte sopra il video: la stessa ombra del menu della home, sulle immagini chiare il bianco spariva
   (col telefono in orizzontale il film prende tutta l'altezza); sulle bande nere non si vede (09/10/2026) */
.film-ui,.page-film .cookie{text-shadow:0 0 2px rgba(0,0,0,.55),0 1px 4px rgba(0,0,0,.45),0 0 16px rgba(0,0,0,.35)}
.film-prog{filter:drop-shadow(0 0 1.5px rgba(0,0,0,.55))}
.page-film.is-idle .film-ui{opacity:0}   /* solo invisibili: un clic sul punto di un comando lo esegue comunque */
.page-film .btn-link{color:#fff}
.film-exit{position:fixed;top:var(--pad);right:var(--pad);z-index:6}
.film-meta{position:fixed;left:var(--pad);right:var(--pad);top:50%;transform:translateY(-50%);z-index:3;
  display:flex;justify-content:space-between;align-items:baseline;gap:12px 24px;pointer-events:none;
  font-variant-numeric:tabular-nums}
.fm-l{display:flex;flex-wrap:wrap;gap:6px clamp(20px,3.6vw,56px)}
.fm-r{display:flex;gap:clamp(20px,3.6vw,56px);white-space:nowrap}
.film-foot{position:fixed;left:0;right:0;bottom:0;z-index:6;display:flex;align-items:center;
  gap:clamp(14px,2.2vw,28px);padding:12px var(--pad) var(--pad);font-variant-numeric:tabular-nums}
.film-foot .grow{flex:1}
.film-parts{display:flex;gap:10px}
.film-parts:empty{display:none}
.film-parts .btn-link{opacity:.5}
.film-parts .btn-link.is-on{opacity:1}
/* avanzamento come nel riferimento: una linea sottile chiusa da due trattini */
.film-prog{position:relative;width:min(16vw,180px);height:15px;cursor:pointer;touch-action:none}
.film-prog::before{content:"";position:absolute;left:0;right:0;top:7px;height:1px;background:rgba(255,255,255,.35)}
.film-prog::after{content:"";position:absolute;left:0;right:0;top:3px;height:9px;
  border-left:1px solid #fff;border-right:1px solid #fff}
.film-prog i{position:absolute;left:0;top:6px;height:3px;width:0;background:#fff}
.film-prog:focus-visible{outline:1px solid #fff;outline-offset:3px}
/* Info: lo stesso pannello dei progetti foto, in negativo */
.page-film .info{background:#000;color:#fff}
.page-film .info::before{border-top-color:rgba(255,255,255,.7)}
.page-film .info-meta dt{color:#a0a0a6}
.page-film .info-text{scrollbar-color:#555 transparent}
.page-film .info-text::-webkit-scrollbar-thumb{background:#555}
.page-film.info-open .film-frame{opacity:.28}
.page-film.info-open .film-foot{background:#000}
/* il pop up dei cookie (prima visita) sta sopra la barra dei comandi, non sopra Info e Audio */
.page-film .cookie{bottom:calc(var(--foot-h,52px) + 6px)}
.page-film.info-open .film-meta{opacity:0}
/* il libro 3D nell'Info di un film (14/10/2026, js/progetto.js): il nome sotto il riquadro chiaro come le etichette dei
   dati, e la pagina grande, che sta sulla carta come nei progetti foto, con i comandi neri (qui i btn-link sono bianchi) */
.page-film .info-oggetto-nome{color:#a0a0a6}
@media (hover:hover){.page-film .info-oggetto:hover .info-oggetto-nome{color:#fff}}
.page-film .libro{color:var(--ink);text-shadow:none}
.page-film .libro .btn-link{color:var(--ink)}
.page-film .libro .libro-capitoli .btn-link{color:var(--soft)}
.page-film .libro .libro-capitoli .btn-link.is-on{color:var(--ink)}
@media (hover:hover){.film-foot .btn-link:hover,.film-exit:hover{opacity:.55}}
/* Info/Close, Play/Pause e Audio On/Off tengono la larghezza della scritta più lunga, su ogni schermo: cambiando
   scritta non spostano i vicini e sul telefono la barra non cambia righe a film avviato (misure in em, 09/10/2026) */
.film-info{min-width:2.45em;text-align:left}
.film-play{min-width:2.6em;text-align:left}
.film-audio{min-width:4.4em;text-align:left}
@media (max-width:767px){
  /* telefono: la riga del titolo sta sopra il video, il tempo sotto, allineato a destra */
  .film-meta{flex-direction:column;align-items:stretch;font-size:13px}
  .p-title.pt,.p-title-spazio{font-size:13px}   /* il titolo dei progetti foto come la riga del film */
  .fm-r{justify-content:flex-end}
  .film-prog{width:min(26vw,120px)}
  .film-foot{flex-wrap:wrap;row-gap:10px;column-gap:10px}
}

/* ------------------------------------------------------------------ ABOUT
   (06/10/2026, come l'immagine del PDF) testo a sinistra e Selected Clients a destra, alla stessa altezza; più in basso,
   al centro, «Contact» (apre la mail, come il pulsante di prima) con l'indirizzo sotto; in fondo Privacy e Cookie. */
.page-about{min-height:100%;display:flex;flex-direction:column}
.about{flex:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;column-gap:var(--pad);
  padding:clamp(80px,20vh,220px) var(--pad) 0}
.about-testo{max-width:44ch;font-size:clamp(15px,1.35vw,19px);line-height:1.4}
.about-testo p{margin:0 0 .9em}
.about-clienti{justify-self:end;text-align:right}
.about h2{font-size:clamp(15px,1.35vw,19px);font-weight:500;line-height:1.4;margin:0 0 .9em}   /* come la presentazione (07/10/2026) */
.about .clients{font-size:clamp(15px,1.35vw,19px);line-height:1.4;margin:0;padding:0;list-style:none}
.about-contatto{grid-column:1/-1;justify-self:center;text-align:center;margin-top:clamp(56px,14vh,160px);
  display:flex;flex-direction:column;align-items:center;gap:.4em;font-size:var(--fs)}
/* «Contact» con la sua linea sotto, perché si capisca che è un pulsante (07/10/2026); la porta la scritta, perché la
   sottolineatura del link non entra nell'involucro di SP.fx */
#about-contact .fx-a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.25em}
.about-indirizzo{margin:0}
.foot{display:flex;justify-content:center;gap:clamp(18px,3vw,36px);padding:clamp(36px,6vh,64px) var(--pad) var(--pad);
  font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.foot a{text-decoration:underline;text-underline-offset:.2em}
.foot .fx-a{text-decoration:underline;text-underline-offset:.2em}   /* la sottolineatura non entra negli inline-block */
@media (max-width:767px){
  .about{grid-template-columns:1fr;row-gap:clamp(40px,8vh,64px);padding-top:clamp(48px,10vh,96px)}
  .about-clienti{justify-self:start;text-align:left}
  .about-contatto{margin-top:0}
}

/* ------------------------------------------------------------------ LEGAL */
/* 45ch: lo zero di Gambetta è largo, in 45ch stanno circa 60 caratteri di testo (mediana misurata il 07/10/2026) */
.legal{max-width:calc(45ch + 2 * var(--pad));margin:0 auto;padding:clamp(40px,7vh,72px) var(--pad) clamp(64px,10vh,96px);
  font-size:clamp(13px,1.1vw,15px);line-height:1.55}
.legal h1{margin:0 0 .4em;font-size:clamp(18px,2.4vw,28px);font-weight:700;line-height:1.2}
.legal h2{margin:2em 0 .6em;font-size:1.05em;font-weight:700}
.legal p,.legal ul{margin:0 0 .9em}
.legal ul{padding-left:1.25em}
.legal li+li{margin-top:.35em}
.legal a{text-decoration:underline}
.legal code{font:inherit}   /* nomi dei cookie: nel carattere del testo, non nel monospazio del sistema */
.legal .updated{opacity:.65;font-size:max(12px,.9em);margin-bottom:2em}   /* almeno 12 px, anche al telefono */
.legal .btn-outline{border:1px solid var(--ink);padding:.65em .95em;font-size:13px}
.legal-404-vie{display:flex;flex-wrap:wrap;gap:8px 28px}   /* pagina d'errore (09/10/2026) */
@media (hover:hover){.legal .btn-outline:hover{background:var(--ink);color:var(--paper)}}

/* ------------------------------------------------------------------ NEGOZIO (13/10/2026)
   Elenco e scheda degli oggetti (shop.php): caratteri, fondo e menu come About e Index. Le foto sono sempre intere, mai
   ritagliate (regola di Matteo): nella scheda al massimo larghe la colonna e alte lo schermo, nell'elenco larghe la
   cella con l'altezza dalle proporzioni. Il pulsante giallo, bianco o blu lo disegna PayPal: qui solo il posto e gli
   angoli dritti come il resto del sito (--paypal-button-border-radius, developer.paypal.com/sdk/js/reference) */
.page-shop{min-height:100%;display:flex;flex-direction:column}
.page-shop .menu{position:static;transform:none;padding:var(--pad) 12px 0}
.shop{flex:1;width:100%;max-width:1440px;margin:0 auto;padding:clamp(36px,6vh,64px) var(--pad) clamp(48px,8vh,96px)}
/* «Anteprima» (in italiano, per Matteo) e «Test mode»: un riquadro a filetto, come il tasto Accept */
.shop-anteprima,.shop-prova{max-width:62ch;margin:0 0 clamp(24px,4vh,40px);padding:10px 14px;border:1px solid var(--ink);
  font-size:13px;line-height:1.45}
.shop-anteprima a{text-decoration:underline;text-underline-offset:.15em}
/* elenco: celle che si dividono la riga, foto allineate in basso così titoli e prezzi stanno sulla stessa linea */
.shop-lista{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));
  gap:clamp(32px,5vw,64px) clamp(16px,2.4vw,36px);align-items:end}
.shop-voce a{display:flex;flex-direction:column;gap:4px;color:inherit}
.shop-voce-foto{display:block;margin-bottom:8px}
.shop-voce-foto img{width:100%;height:auto}
.shop-senza-foto{display:block;aspect-ratio:4/5;background:var(--vuoto)}
.shop-voce-t{font-size:clamp(15px,1.35vw,19px);line-height:1.25}
.shop-voce-p,.shop-voce-spento{color:var(--soft)}
.shop-voce-spento{font-size:12px}
.shop-voce a:focus-visible{outline:1px solid var(--ink);outline-offset:4px}
@media (hover:hover){.shop-voce a:hover .shop-voce-t{text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px}}
.shop-vuoto{color:var(--soft)}
/* scheda: sul computer la prima foto e le altre a sinistra, il testo e l'acquisto a destra, fermi mentre si scorrono le foto */
.shop-scheda{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(280px,1fr);column-gap:clamp(28px,4.5vw,80px);
  row-gap:clamp(20px,3vw,40px);align-items:start}
.shop-foto{margin:0}
.shop-foto img{width:auto;max-width:100%;height:auto;max-height:calc(100vh - 2 * var(--pad))}
.shop-scheda>.shop-foto{grid-column:1;grid-row:1}
.shop-altre{grid-column:1;grid-row:2;display:grid;gap:clamp(20px,3vw,40px)}
.shop-info{grid-column:2;grid-row:1/span 2;position:sticky;top:var(--pad);max-width:44ch}
.shop-torna{margin:0 0 1.4em;font-size:13px}
.shop-torna a,.shop-nota a{text-decoration:underline;text-underline-offset:.2em}
.shop-titolo{margin:0;font-size:clamp(20px,2.2vw,30px);font-weight:500;line-height:1.15}
.shop-prezzo{margin:.35em 0 1.3em;font-size:clamp(15px,1.35vw,19px)}
.shop-testo{font-size:clamp(14px,1.1vw,16px);line-height:1.5;margin:0 0 1.6em}
.shop-testo p{margin:0 0 .9em}
.shop-esaurito{margin:0 0 1em;font-size:clamp(15px,1.35vw,19px)}
.shop-compra,.shop-fatto{border-top:1px solid var(--ink);padding-top:16px;display:flex;flex-direction:column;gap:14px}
.shop-riga{display:flex;align-items:center;justify-content:space-between;gap:16px}
.shop-riga select{font:inherit;color:inherit;background:transparent;border:0;border-bottom:1px solid var(--ink);border-radius:0;
  min-height:40px;min-width:5em;padding:4px 4px;cursor:pointer}
.shop-zone{border:0;margin:0;padding:0;min-width:0}
.shop-zone legend{padding:0;margin:0 0 4px}
.shop-zona{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;min-height:40px;cursor:pointer}
.shop-zona input{accent-color:#000;width:16px;height:16px;margin:0}
.shop-zona-p{color:var(--soft)}
.shop-paesi{font-size:13px;color:var(--soft);line-height:1.45}
.shop-paesi summary{cursor:pointer;text-decoration:underline;text-underline-offset:.2em;min-height:32px;display:inline-flex;align-items:center}
.shop-paesi p{margin:4px 0 0}
.shop-totale{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin:0;padding-top:12px;
  border-top:1px solid var(--line);font-size:clamp(15px,1.35vw,19px)}
.shop-paypal{min-height:48px}
.shop-paypal paypal-button{display:block;width:100%;--paypal-button-border-radius:0}
.shop-attesa{margin:0;color:var(--soft)}
.shop-msg{margin:0;line-height:1.45}
.shop-msg.is-errore{border-left:2px solid var(--ink);padding-left:10px}
.shop-riprova{text-decoration:underline;text-underline-offset:.2em;min-height:32px}
.shop-fatto h2{margin:0;font-size:clamp(15px,1.35vw,19px);font-weight:700}
.shop-fatto h2:focus{outline:none}
.shop-fatto p{margin:0;line-height:1.5}
.shop-nota{margin:1.6em 0 0;font-size:13px;line-height:1.5;color:var(--soft)}
.shop-compra :disabled{cursor:default;opacity:.55}
/* recesso e garanzia legale (14/10/2026): i due link sotto la nota della scheda, l'avviso armonizzato sotto la scheda.
   L'avviso è l'immagine ufficiale dell'Unione: intera, mai ritagliata, larga quanto basta per leggerla e inquadrarne
   il codice QR, mai più della sua misura */
.shop-legali{margin:1em 0 0;font-size:13px;line-height:1.5;display:flex;flex-wrap:wrap;gap:6px 18px}
.shop-legali a{text-decoration:underline;text-underline-offset:.2em}
.shop-garanzia{margin:clamp(40px,7vh,80px) 0 0;scroll-margin-top:var(--pad)}
.shop-garanzia figure,.cond-avviso{margin:0;max-width:min(100%,560px)}
.shop-garanzia img,.cond-avviso img{display:block;width:100%;height:auto}
.cond-avviso{margin:1em 0 1.4em}
/* condizioni di vendita: il modulo tipo di recesso in un riquadro, il link alla funzione di recesso in cima, un dato
   del venditore che manca in rosso (solo in anteprima: a negozio acceso non ce ne sono) */
.cond-recesso{margin:-1em 0 2em}
.cond-modulo{border:1px solid var(--ink);padding:12px 14px;margin:0 0 .9em}
.cond-modulo h3{margin:0 0 .5em;font-size:1em;font-weight:700}
.cond-modulo p{margin:0}
.cond-manca{color:#b00020;font-style:italic}
/* la pagina per recedere: campi a tutta larghezza, l'errore sotto l'etichetta, il tasto come quelli del sito */
.rec-it{color:var(--soft)}
.legal h1+.rec-it{margin-top:-.2em;margin-bottom:1.4em}
.rec-modulo{display:flex;flex-direction:column;gap:18px;margin:1.6em 0}
.rec-campo{display:flex;flex-direction:column;gap:4px}
.rec-campo label{font-weight:700}
.rec-campo input{font:inherit;color:inherit;background:transparent;border:0;border-bottom:1px solid var(--ink);border-radius:0;
  padding:8px 0;min-height:40px;width:100%}
.rec-campo input:focus-visible{outline:1px solid var(--ink);outline-offset:4px}
.rec-aiuto{font-size:max(12px,.9em);color:var(--soft)}
.rec-errore{font-size:max(12px,.9em);color:#b00020}
.rec-campo.is-errore input{border-bottom-color:#b00020;border-bottom-width:2px}
.rec-errori{border-left:2px solid #b00020;padding-left:10px;margin:0 0 1em}
.rec-tasto{margin:0}
.rec-tasto button{font:inherit;color:var(--paper);background:var(--ink);border:1px solid var(--ink);border-radius:0;padding:.75em 1.1em;cursor:pointer;min-height:44px}
.rec-tasto button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.rec-dati{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 16px;margin:1em 0 1.4em}
.rec-dati dt{font-weight:700}
.rec-dati dd{margin:0}
.rec-altro{font-size:max(12px,.9em);color:var(--soft)}
@media (hover:hover){.rec-tasto button:hover{background:var(--paper);color:var(--ink)}}
/* telefono e tablet in verticale: una colonna, prima foto, testo e acquisto, poi le altre foto; foto larghe lo schermo */
@media (max-width:899px){
  .shop-scheda{grid-template-columns:minmax(0,1fr)}
  .shop-scheda>.shop-foto,.shop-info,.shop-altre{grid-column:1;grid-row:auto;position:static;max-width:none}
  .shop-foto img{width:100%;max-height:none}
}
@media (pointer:coarse){
  .page-shop .menu{position:relative;top:auto;left:auto;z-index:2}
  .shop-riga select,.shop-zona,.shop-paesi summary,.shop-riprova{min-height:44px}
  .shop-zona input{width:20px;height:20px}
  .shop-torna a,.shop-nota a,.shop-legali a{display:inline-block;padding:14px 0;margin:-14px 0}
  .rec-campo input{min-height:44px}
}

/* ------------------------------------------------------------------ COOKIE */
/* correzione: non più la fascia a tutta larghezza né il riquadro nero in basso a destra,
   ma un piccolo pop up in basso a sinistra (riferimento robrie.com) */
.cookie{position:fixed;left:var(--pad);bottom:var(--pad);z-index:50;width:min(300px,calc(100% - 2 * var(--pad)));
  background:var(--paper);color:var(--ink);font-size:11px;line-height:1.55;letter-spacing:.02em;
  padding:0;opacity:0;transform:translateY(8px);transition:opacity .4s ease,transform .4s var(--ease)}
.cookie.is-on{opacity:1;transform:none}
.cookie p{margin:0 0 12px}
.cookie a{text-decoration:underline;text-underline-offset:.15em}
.cookie button{border:1px solid var(--ink);padding:.55em 1.1em;font-size:11px;background:var(--paper)}
@media (hover:hover){.cookie button:hover{background:var(--ink);color:var(--paper)}}
.page-home .cookie,.page-video.has-hover .cookie,.page-film .cookie{background:transparent;color:#fff}
.page-home .cookie{text-shadow:0 0 2px rgba(0,0,0,.55),0 1px 4px rgba(0,0,0,.45),0 0 16px rgba(0,0,0,.35)}
.page-home .cookie button{box-shadow:0 0 2px rgba(0,0,0,.45),0 1px 6px rgba(0,0,0,.3)}
.page-home .cookie button,.page-video.has-hover .cookie button,.page-film .cookie button{border-color:#fff;background:transparent;color:#fff}
@media (hover:hover){.page-home .cookie button:hover,.page-video.has-hover .cookie button:hover,.page-film .cookie button:hover{background:#fff;color:#000}}
.page-project .cookie{bottom:calc(var(--pad) + 34px)}
/* pagina del film (10/10/2026): il pop up sta sopra il video, e il bianco senza fondo sui fotogrammi chiari scendeva sotto
   2:1. Prende il nero della pagina, come nelle pagine chiare prende il fondo carta; il riquadro sporge di 12 px per lato,
   così il testo resta allineato a Info e va a capo come prima */
.page-film .cookie{background:#000;padding:10px 12px;left:calc(var(--pad) - 12px);width:calc(min(300px,100% - 2 * var(--pad)) + 24px)}
.has-cookie:is(.page-about,.page-index,.page-gallery,.page-pub,.page-legal,.page-shop)::after{content:"";display:block;flex:none;height:calc(var(--cookie-h,0px) + var(--pad))}

/* ------------------------------------------------------------------ TELEFONI E TABLET (07/10/2026)
   Aree di tocco di almeno 44 px (Info, Close, comandi del film, menu, Contact, piede, cookie, fiamma): allargate con
   uno pseudo elemento invisibile o con padding compensato, così il disegno non si sposta. Niente riquadro colorato
   del browser al tocco. Solo dove il puntatore è il dito: sul computer non cambia niente. */
a,button,[role=slider]{-webkit-tap-highlight-color:transparent}
@media (pointer:coarse){
  .menu a{display:inline-block;padding:15px 8px;margin:-15px -8px}
  .page-about .menu,.page-legal .menu{position:relative;top:auto;left:auto;z-index:2}
  .btn-link:not(.film-exit),.foot a,.about-contatto a,.cookie a,.cookie button,.pub-capo h1 a{position:relative}
  /* .pub-capo h1 a: il titolo delle pubblicazioni, l'unico link per tornare al progetto, era alto 22 px (10/10/2026) */
  .btn-link::after,.foot a::after,.about-contatto a::after,.cookie a::after,.cookie button::after,.pub-capo h1 a::after{content:"";position:absolute;
    left:50%;top:50%;width:max(100%,44px);height:44px;transform:translate(-50%,-50%)}
  #about-contact::after{top:auto;bottom:-2px;transform:translateX(-50%)}
  #about-email::after{top:-2px;transform:translateX(-50%)}
  .view-toggle::after{content:"";position:absolute;inset:-4px -6px}
  .film-prog{height:44px;margin:-14.5px 0}
  .film-prog::before{top:21.5px}
  .film-prog::after{top:17.5px}
  .film-prog i{top:20.5px}
}
@media (pointer:coarse) and (max-width:1279px){
  .page-gallery .menu{position:relative;top:auto;left:auto;z-index:2}
}

/* cambiamenti visibili per telefoni e tablet, approvati da Matteo il 07/10/2026 */
/* testo a 13 px dove si usa il dito (prima 11), righe dell'Index più alte */
@media (pointer:coarse){
  :root{--fs:clamp(13px,1.05vw,14px)}
  .foot,.cookie,.cookie button,.slide .num,.info-meta dt,.info-oggetto-nome,.libro-guida{font-size:12px}
  .idx a{padding-block:14px}
}
/* lo scorrimento col dito si ferma con una foto al centro (la classe la mette il JS al tocco) */
@media (max-width:767px),(hover:none) and (pointer:coarse){
  .strip.is-snap{scroll-snap-type:x mandatory}
  .slide{scroll-snap-align:center}
}
/* film sul telefono in verticale: titolo sopra il video e tempo sotto (--ar lo scrive il JS sulla radice). Dal 10/10/2026
   anche sul tablet in verticale, fino a 1279 px (stessa soglia in js/progetto.js): lì la riga passava in mezzo al video */
@media (max-width:1279px) and (orientation:portrait){
  .film-meta{top:0;bottom:0;transform:none;display:block}
  .fm-l,.fm-r{position:absolute;left:0;right:0}
  .fm-r{justify-content:flex-end}   /* il tempo a destra, come sul telefono (sul tablet la regola dei 767 px non c'è) */
  .fm-l{bottom:calc(50% + min(50vw / var(--ar,1.7778), 50% - 48px) + 14px)}
  .fm-r{top:calc(50% + min(50vw / var(--ar,1.7778), 50% - 48px) + 14px)}
  /* film più alti dello spazio (verticali): la riga torna a metà altezza, come prima (classe dal JS) */
  .page-film.is-film-alto .film-meta{top:50%;bottom:auto;transform:translateY(-50%);display:flex}
  .page-film.is-film-alto .fm-l,.page-film.is-film-alto .fm-r{position:static}
}
/* telefono in orizzontale (e finestre basse): testata e barra più strette, foto più grandi */
@media (max-height:520px){
  .page-project{--pad:12px}
  .lb-slide{padding:40px 12px 12px}
}
/* Index sul telefono: colonne Tipo e Anno allineate fra le righe (dove subgrid manca resta com'era). Sotto i 360 px
   no: la colonna Anno larga quanto «2021/2025» manderebbe a capo i titoli lunghi */
@media (min-width:360px) and (max-width:767px){
  .idx ul{display:grid;grid-template-columns:minmax(0,1fr) auto auto;column-gap:14px}
  .idx li{display:grid;grid-column:1/-1;grid-template-columns:subgrid}
  .idx a{grid-column:1/-1;grid-template-columns:subgrid}
}
/* visore sul telefono: il titolo su una riga, sotto contatore e Close */
@media (max-width:767px){
  .p-title.pt.is-visore{top:calc(var(--pad) + 24px);padding:0 var(--pad)}
  .lb-slide{padding-top:max(68px,9vh)}
}
/* Index sul touch: tenendo il dito su una voce il titolo si ingrandisce, come col mouse */
@media (hover:none){
  .idx a:active .fx{transform:scale(1.07)}
}

/* Index sul telefono (07/10/2026): «che lavoro è» va sotto il titolo, piccolo; tipo e anno restano nelle loro colonne */
@media (max-width:767px){
  .idx a{row-gap:3px}
  .idx a .idx-cat{grid-column:1;grid-row:2;font-size:inherit;opacity:.6}
  .idx a .idx-cat:empty{display:none}
  .p-title.pt .pt-parte{font-size:1.25em}
}

/* pagine Photo e Video col mouse (07/10/2026, richiesta di Matteo): niente titoli sotto le anteprime; passando sopra
   un progetto il titolo compare da solo, in Gambetta (niente Redaction nelle anteprime), con una dissolvenza veloce.
   Il posto del titolo resta, così niente si sposta. Sul telefono e sul tablet, dove il passaggio non c'è, i titoli
   restano visibili */
@media (hover:hover) and (pointer:fine){
  .g-item figcaption .fx-a{opacity:0;transition:opacity .4s cubic-bezier(.33,0,.2,1)}
  .g-item.is-hovered figcaption .fx-a,.g-item a:hover figcaption .fx-a,.g-item a:focus-visible figcaption .fx-a{opacity:1}
}

/* pubblicazioni scientifiche di un progetto (08/10/2026): schermate intere 4:5, mai ritagliate; titolo, sede e anno
   al passaggio come nelle gallerie, sempre visibili sul telefono */
.page-pub .menu{position:static;transform:none;padding:var(--pad) 12px 0}
.pub{padding:clamp(36px,6vh,64px) var(--pad) clamp(48px,8vh,96px)}
.pub-capo{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px clamp(20px,3vw,48px);margin:0 0 clamp(28px,5vh,56px)}
.pub-capo h1{margin:0;font-size:1.35em;font-weight:500;line-height:1.2}
.pub-capo h1 a{color:inherit;text-decoration:none}
.pub-capo p{margin:0;color:var(--soft);max-width:62ch}
/* griglia: sotto i 384 px le colonne restavano una, e la pagina diventava tre volte più lunga (iPhone SE e mini, i tanti
   Android da 360 px). La cella minima scende a metà della lista meno metà dello spazio fra le colonne (12 px fin lì),
   quindi due colonne; da 384 px in su resta tutto come prima, telefoni in orizzontale compresi (10/10/2026) */
.pub-lista{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(170px,calc(50% - 6px)),1fr));
  gap:clamp(20px,2.6vw,40px) clamp(12px,1.6vw,24px)}
.pub-item a{display:block;color:inherit;text-decoration:none}
.pub-item a:focus-visible{outline:1px solid var(--ink);outline-offset:4px}
.pub-item figure{margin:0}
.pub-item img,.pub-scheda{display:block;width:100%;height:auto;aspect-ratio:4/5;background:#fff}
.pub-scheda{box-sizing:border-box;padding:14% 11%;display:flex;flex-direction:column;justify-content:space-between}
.pub-scheda-v,.pub-scheda-y{font-size:11px;color:var(--soft);line-height:1.3}
.pub-scheda-t{font-size:clamp(13px,1.1vw,16px);line-height:1.25;overflow:hidden}
.pub-item figcaption{margin-top:.6em;font-size:13px;line-height:1.3}
.pub-v{display:block;margin-top:2px;font-size:11px;color:var(--soft)}
@media (hover:hover) and (pointer:fine){
  .pub-item figcaption{opacity:0;transition:opacity .4s cubic-bezier(.33,0,.2,1)}
  .pub-item a:hover figcaption,.pub-item a:focus-visible figcaption{opacity:1}
}
/* sul tocco le schede senza schermata hanno già titolo, sede e anno, e la didascalia sotto li ripeteva uguali: si toglie
   solo lì. Il nome del link per i lettori di schermo resta, lo dà l'aria-label (10/10/2026) */
@media (hover:none),(pointer:coarse){
  .pub-scheda + figcaption{display:none}
}
/* sede e anno delle pubblicazioni a 12 px sul tocco, come le altre etichette dal 07/10/2026 (le pubblicazioni sono
   arrivate dopo). Qui e non nella regola dei 12 px più su, che sta prima delle regole delle pubblicazioni e perderebbe */
@media (pointer:coarse){
  .pub-v,.pub-scheda-v,.pub-scheda-y{font-size:12px}
}