/* ======================================================================================================
   EYESHOT - IL FOGLIO COMUNE DEI PORTALI (eyeshot-cornice.css, plugin Eyeshot Blocks).
   Nato il 16/10/2026 staccandolo dal portale fotografi; RISCRITTO il 20/10/2026 un capitolo per pezzo
   (architettura decisa con Marco il 20/10/2026: docs/manuale-design-eyeshot.md, capitolo 2).

   I QUATTRO LIVELLI, in quest'ordine: valori (eyeshot-stile.css) -> base -> pezzi comuni -> pagina.
   L'ordine e' DICHIARATO con @layer (in cima al foglio dei valori), non si vince piu' scrivendo una regola piu' forte:
   - base: la pagina vuota (fondo, testo normale, titoli semplici, chiaro e scuro);
   - pezzi: l'aspetto di ogni pezzo comune, nomi es-, un capitolo per pezzo;
   - il foglio della pagina (ep-portal-N.css, eoc-jury-N.css) resta fuori dai livelli e per questo viene per
     ultimo: dice solo dove stanno le cose. Il controllo dello stile gli vieta colori, caratteri, fondi e fili
     dei pezzi comuni (ridipinge, doppie).
   Dentro un livello vale ancora la forza delle regole: qui si tiene la piu' semplice che basta. Un pezzo che
   manca si aggiunge qui per tutti i portali, nel suo capitolo, e si guarda nella vetrina (?eyeshot-vetrina=1).
   Solo valori del foglio unico. Le decisioni di Marco con la data: docs/stile-eyeshot.md.
   ====================================================================================================== */
/* l'ordine dei livelli (@layer base, pezzi) e' dichiarato in cima al foglio dei valori, che si carica per primo: cosi'
   vale anche per le regole che un foglio di pagina mette nel livello dei pezzi (vedi ep-portal-37.css, in fondo). */

/* ======================================================================================================
   BASE: la pagina vuota
   ====================================================================================================== */
@layer base {
html,body{margin:0;min-height:100%;overflow-x:clip;font-size:var(--ey-s15);line-height:var(--ey-lh-text);background:var(--ey-bg);color:var(--ey-ink)}
/* una parola piu' lunga della riga (un indirizzo email al telefono) va a capo invece di uscire dallo schermo: una volta qui, e si
   eredita in ogni testo (revisione schermo del 31/10/2026: nella FAQ «publisher@eyeshotstreetphotograph» tagliato) */
body{overflow-wrap:break-word}
*{box-sizing:border-box;border-radius:0}
[class*="avatar"]{border-radius:50%}
/* un solo carattere: Text, Display per i titoli; niente maiuscolo, niente lettere spaziate (17/10/2026).
   I pezzi che li vogliono (etichette, titoli da 30 in su) lo dicono nel loro capitolo. Spaziatura e maiuscolo si azzerano
   una volta sulla pagina e dentro si ereditano (revisione del 30/10/2026): azzerati su ogni elemento, dentro un titolo fatto
   a pezzi ogni span tornava a 0 (il titolo della Home perdeva il -0,07) e servivano toppe «inherit» pezzo per pezzo. Le
   regole di WordPress e WooCommerce restano sotto, nel loro livello, e continuano a perdere. */
:where(:not(svg,svg *,[class*="icon"],[class*="dashicons"],i)){font-family:var(--ey-font-text)}
:where(html){letter-spacing:0;text-transform:none}
:where(html) :where(:not(svg,svg *,.ey-logo-word)){letter-spacing:inherit;text-transform:inherit}
:where(h1,h2,h3,h4){font-family:var(--ey-font-display);font-weight:var(--ey-w-title)}
:where(h2,h3,h4){line-height:var(--ey-lh-title)}
h2{margin:0 0 var(--ey-8);font-size:var(--ey-s30);letter-spacing:var(--ey-ls-big)}
:where(h5,h6,b,strong,summary){font-weight:var(--ey-w-medium)}
:where(small){font-size:var(--ey-s13)}
:where(svg text){font-size:var(--ey-s13)}
a{color:var(--ey-ink)}
:where(dl,dd){border-color:var(--ey-line-row)}
kbd{margin-left:var(--ey-8);padding:0;font:var(--ey-w-text) var(--ey-s13)/var(--ey-lh-text) var(--ey-font-text);color:var(--ey-grey-1);background:none;border:0;box-shadow:none}
/* cio' che e' nascosto resta nascosto anche quando un pezzo dice display:flex o grid (regola standard) */
[hidden]{display:none !important /* serve: [hidden] vince su ogni display */}
}

/* ======================================================================================================
   PEZZI COMUNI, un capitolo per pezzo
   ====================================================================================================== */
@layer pezzi {
/* --- TITOLI (revisione del 30/10/2026): una regola per grandezza, che elenca i pezzi di quel ruolo. Prima ogni pezzo
   riscriveva carattere, peso, grandezza, interlinea e spaziatura del suo titolo (35 volte) e le copie divergevano: il 30 aveva
   interlinea 0,86 in cinque pezzi e 1 in quattro, l'A-Z a 48 l'interlinea del 30. Qui i valori della scala, uno per grandezza;
   i pezzi tengono solo margini, posizione e colore. Un pezzo nuovo col titolo di una grandezza si aggiunge alla sua lista.
   Il cambio al telefono resta dove la grandezza scende, con i tre valori della grandezza d'arrivo (un 48 che al telefono
   diventa 30 prende interlinea e spaziatura del 30); da 48 a 36 e da 96 a 56 restano quelli del ruolo. I temi delle FAQ e i
   capitoli col sommario restano accanto alla regola del titolo delle pagine di testo, che correggono. --- */
.es-chap .es-box>h2,.es-duo>.es-box>h2,.es-h2,.es-col>:is(h2,h4),
:is(.es-tile-tx b,.es-tile-tx strong,.es-card>b,.es-card>p strong),
.es-blk-due h3,
.es-blk-tre h3,
.es-anni b,
.es-vert b,.es-corr-tx .es-corr-chi,.es-blk-chi,
.es-prose>h3{font-family:var(--ey-font-display);font-weight:var(--ey-w-title);font-size:var(--ey-s20);line-height:var(--ey-lh-title);letter-spacing:var(--ey-ls-20)}
.es-box>:is(h2,h3),.es-chap>h2,.es-hrow h2,
.es-app>h2.es-h2,
.es-gate-tx :is(h2,b),
.es-blk-bar h2,
.es-blk-txt>h2,
.es-premio-tx h3,
.es-ep-tx b,
.es-due-tx b{font-family:var(--ey-font-display);font-weight:var(--ey-w-title);font-size:var(--ey-s30);line-height:var(--ey-lh-big);letter-spacing:var(--ey-ls-big)}
:is(.es-head h1,.es-main>h1),
.es-sc b,
.es-foot-mid h2,
.es-blk-frase,
.es-az,
.es-nuovo h3,
.es-el b,
.es-pg-tx b,
.es-due-bar h2,
.es-rail-xl .es-hrow h2,.es-hrow-xl h2,
.es-blk-bar h2.es-blk-big,
.es-sf-bar h2{font-family:var(--ey-font-display);font-weight:var(--ey-w-title);font-size:var(--ey-s48);line-height:var(--ey-lh-l);letter-spacing:var(--ey-ls-l)}
.es-ev-t :is(h1,h2),
.es-seq-cap h2,
.es-t96 h2,
.es-frase96,
.es-corr h2,
.es-ep-n,
.es-anni-y{font-family:var(--ey-font-display);font-weight:var(--ey-w-title);font-size:min(var(--ey-s96),100cqi / (var(--parola,1) * var(--ey-lettera)));line-height:var(--ey-lh-xl);letter-spacing:var(--ey-ls-xl)}
/* i titoli a 96 restano della grandezza della scala; quelli che sanno la loro parola piu' lunga (--parola, la conta il PHP) e
   stanno in un contenitore (container-type) calano quanto serve perche' stia intera nella colonna. Senza --parola il calcolo
   da' piu' della scala e non cambia niente (31/10/2026, «Magazines» spezzato sull'iPad 11) */


/* --- Testo dentro un titolo: corsivi, note, bottoni restano nel carattere del testo --- */
/* non nei titoli fatti a pezzi (il titolo che riempie la riga, il titolo a 96 della pagina bianca): li' ogni pezzo e' il titolo.
   Era questa regola a mettere quei titoli nel carattere del testo (27/10/2026: mai scelto, l'ha visto Marco) */
:is(h1,h2,h3,h4,.es-h2):not(.es-fit,.es-t96p) :is(i,small,span:not([class]),button){font-family:var(--ey-font-text);font-weight:var(--ey-w-text)}

/* --- Pagina --- */
.es-main{max-width:none;margin:0;padding:var(--ey-48) var(--ey-margin) var(--ey-120)}
.es-app>:empty:first-child{display:none}
@media (max-width:820px){.es-main{padding-top:var(--ey-24)}}
/* la pagina del sito che si apre con una foto a tutta pagina (eyeshot-has-hero: un'apertura della rosa come primo pezzo, o la foto
   grande della home): niente spazio in cima, la foto parte dal bordo alto e la testata trasparente ci sta sopra (Marco,
   26/10/2026: «se c'e' una fotografia di apertura a tutta pagina il menu ci deve andare sopra»; col modello pagina-sito i 48 di
   es-main lasciavano una fascia bianca sotto il menu). Nei portali la classe non c'e'. */
.eyeshot-has-hero .es-main{padding-top:0}
/* e l'apertura in cima non porta il margine della sezione anche quando non e' il primo pezzo: nelle pagine del negozio prima di
   lei c'e' il riquadro (vuoto) degli avvisi di WooCommerce, e i 96 della sezione spingevano giu' la pagina sotto il menu (Marco,
   27/10/2026, sulla pagina Magazines: «la foto intera parte dallo schermo come si apre e il menu va sempre sopra»). La prima
   section della pagina e' l'apertura: eyeshot-has-hero c'e' solo quando la pagina comincia con lei. */
.eyeshot-has-hero .es-main>:is(.es-giro,.es-pila,.es-seq,.es-ap):first-of-type{margin-top:0}

/* --- Barra in alto: una sola per tutti i portali, la scrive eyeshot_portal_top() (18/10/2026). Niente linea sotto, qui come
   nella testata del sito (Marco, 25/10/2026: «quella linea sotto il menu e' obsoleta, leviamola dappertutto, teniamola come
   regola»): la barra si riconosce dal logo, dalle voci e dallo spazio bianco; i fili stanno sopra i capitoli. --- */
.es-top{position:relative;display:flex;align-items:center;gap:var(--ey-24);min-height:64px;margin:0;padding:0 var(--ey-margin);background:var(--ey-bg)}
.es-logo{display:block;flex:none;line-height:0}
.es-logo img{display:block;width:auto;height:16px}
:root:not([data-tone="dark"]) .es-logo img{filter:invert(1)}
.es-name{flex:none;font-size:var(--ey-s13);font-weight:var(--ey-w-medium);line-height:1;color:var(--ey-ink);text-decoration:none;white-space:nowrap;text-transform:uppercase;letter-spacing:calc(var(--ey-ls-label) * 4 + var(--ey-ls-label) / 2)}
.es-sp{flex:1 1 auto}
/* 6 dentro e 6 fuori: contiene l'area di tocco dei collegamenti, altrimenti il menu scorreva di 2 e si muoveva sotto il mouse (Marco, 18/10/2026) */
.es-nav{display:flex;align-items:center;gap:var(--ey-24);min-width:0;padding:calc(var(--ey-8) * 3 / 4);margin:calc(var(--ey-8) * -3 / 4)}
.es-nav:has(.es-switch[open]){-webkit-mask-image:none;mask-image:none}
/* «Sign out» nella barra non va mai a capo, ed e' a 48 dal menu (24 della barra + 24) (18/10/2026) */
/* le voci della barra come il piede (Marco, 24/10/2026): 13 maiuscolo, lettere spaziate, nere; la pagina in cui si e'
   e' sottolineata; al passaggio si schiariscono come le icone. «Sign out» e la scelta del libro parlano allo stesso modo */
.es-navlinks{display:flex;align-items:center;gap:var(--ey-24)}
.es-navlinks:empty{display:none}
.es-navlinks:not(:empty)~.es-link{margin-left:var(--ey-24)}
.es-navlinks>a,.es-switch>summary,.es-nav .es-link{display:inline-flex;align-items:center;gap:var(--ey-8);height:auto;margin:0;padding:var(--ey-8) 0;font:var(--ey-w-text) var(--ey-s13)/var(--ey-lh-text) var(--ey-font-text);letter-spacing:var(--ey-ls-label);text-transform:uppercase;color:var(--ey-ink);background:none;border:0;border-radius:0;text-decoration:none;white-space:nowrap;cursor:pointer}
.es-navlinks>a:hover,.es-switch>summary:hover,.es-nav .es-link:hover{color:var(--ey-ink);opacity:.7}
.es-navlinks>a.on{color:var(--ey-ink);background:linear-gradient(var(--ey-ink),var(--ey-ink)) 0 100%/100% var(--ey-line-active) no-repeat}
.es-switch>summary{list-style:none;max-width:280px;overflow:hidden;text-overflow:ellipsis}
.es-switch>summary::-webkit-details-marker{display:none}
.es-switch>summary i{font-style:normal;font-size:var(--ey-s13)}
.es-menu{position:absolute;right:var(--ey-margin);top:100%;z-index:20;min-width:280px;max-height:70vh;overflow:auto;padding:var(--ey-8) 0;background:var(--ey-bg);border:var(--ey-line) solid var(--ey-line-section)}
.es-menu-h{margin:var(--ey-16) var(--ey-16) var(--ey-8);font-size:var(--ey-s13);font-weight:var(--ey-w-label);color:var(--ey-grey-1);text-transform:uppercase;letter-spacing:var(--ey-ls-label)}
.es-menu a{display:flex;flex-direction:column;padding:var(--ey-8) var(--ey-16);color:var(--ey-ink);text-decoration:none}
/* la voce del menu: sottolineata come le schede, niente fondo grigio (Marco, 17/10/2026) */
.es-menu a:hover b,.es-menu a.cur b{background:linear-gradient(var(--ey-ink),var(--ey-ink)) 0 100%/100% var(--ey-line-active) no-repeat}
/* ultima voce del menu: il collegamento all'elenco completo, staccato da un filo di riga */
.es-menu .es-menu-all{margin-top:var(--ey-8);padding-top:var(--ey-16);border-top:var(--ey-line) solid var(--ey-line-row)}
.es-menu b{font-size:var(--ey-s15);font-weight:var(--ey-w-medium)}
.es-menu span{font-size:var(--ey-s13);color:var(--ey-grey-1)}
/* le icone a destra: «?», chiaro/scuro, il proprio conto per ultimo (16/10/2026) */
.es-opts{display:inline-flex;align-items:center;gap:var(--ey-8);flex:none}
/* niente quadrato intorno alle icone (Marco, 24/10/2026: «quel quadratino intorno alle icone non mi piace»): il segno da
   solo, area di tocco 32; al passaggio si schiarisce come i comandi della testata del sito; il proprio conto, quando si e'
   nel conto, e' sottolineato come le voci del menu */
.es-tone{display:inline-flex;align-items:center;justify-content:center;flex:none;width:32px;height:32px;margin:0;padding:0;color:var(--ey-ink);background:none;border:0;border-radius:0;cursor:pointer}
.es-tone:hover{opacity:.7}
.es-tone svg{display:block;width:16px;height:16px}
.es-me{text-decoration:none}
.es-me.on{background:linear-gradient(var(--ey-ink),var(--ey-ink)) 0 100%/100% var(--ey-line-active) no-repeat}
/* schermi larghi: se il menu non ci sta, scorre di lato invece di finire sotto le icone */
@media (min-width:1366px){.es-nav{flex:0 1 auto;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}.es-nav::-webkit-scrollbar{display:none}.es-navlinks{flex:none}}
@media (min-width:1366px) and (max-width:1439px){.es-nav,.es-navlinks{gap:var(--ey-16)}}
/* schermi stretti: logo e nome sopra, il menu sotto che scorre di lato, le icone a destra */
@media (max-width:1365px){
 .es-top{flex-wrap:wrap;column-gap:var(--ey-16);row-gap:0;padding-top:var(--ey-16);padding-bottom:var(--ey-8)}
 .es-logo{order:0}.es-name{order:1}
 .es-sp{order:2;flex:0 0 100%;height:0}
 .es-nav{order:3;flex:1 1 0;gap:var(--ey-16);margin:calc(var(--ey-8) / 4) calc(var(--ey-8) * -3 / 4) calc(var(--ey-8) * -3 / 4);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;padding:calc(var(--ey-8) * 3 / 4) calc(var(--ey-32) + var(--ey-8) * 3 / 4) calc(var(--ey-8) * 3 / 4) calc(var(--ey-8) * 3 / 4);-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - var(--ey-32) - var(--ey-8) / 4),transparent calc(100% - var(--ey-8) / 4));mask-image:linear-gradient(90deg,#000 calc(100% - var(--ey-32) - var(--ey-8) / 4),transparent calc(100% - var(--ey-8) / 4))}
 .es-opts,.es-top>.es-tone{order:4;margin-top:var(--ey-8)}
 .es-top:not(:has(.es-nav)) :is(.es-opts,.es-tone){margin-left:auto}
 /* senza menu (ingresso, benvenuto) niente seconda riga: chiaro/scuro resta sulla riga del logo, alta 64 (Marco, 16/10/2026) */
 .es-top:not(:has(.es-nav)){padding-block:var(--ey-16) calc(var(--ey-16) - var(--ey-line))}
 .es-top:not(:has(.es-nav))>.es-sp{display:none}
 .es-top:not(:has(.es-nav)) :is(.es-opts,.es-tone){margin-top:0}
 .es-nav::-webkit-scrollbar{display:none}
 .es-navlinks{gap:var(--ey-16);flex:none}
 .es-switch{position:static}
 .es-menu{left:var(--ey-margin);right:var(--ey-margin);min-width:0}
}

/* sotto 1100 (Marco, 24/10/2026, come nel sito): una riga sola, logo e nome a sinistra, icone a destra e per ultimo il
   segno del menu; il menu si apre in un pannello bianco sotto la barra, le voci una per riga a 20 Display, la croce al
   posto del segno. Lo apre e lo chiude il bottone stesso (classe is-open sulla barra). */
.es-burger{display:none}
.es-burger svg+svg,.es-top.is-open .es-burger svg{display:none}
.es-top.is-open .es-burger svg+svg{display:block}
@media (max-width:1099px){
 .es-top:has(.es-nav){flex-wrap:nowrap;padding-block:0}
 .es-top:has(.es-nav)>.es-sp{order:2;flex:1 1 auto}
 .es-top:has(.es-nav) .es-opts{margin-top:0}
 .es-burger{display:inline-flex}
 .es-top .es-nav{display:none}
 .es-top.is-open .es-nav{position:absolute;top:100%;left:0;right:0;z-index:20;display:flex;flex-direction:column;align-items:flex-start;gap:var(--ey-16);margin:0;padding:var(--ey-24) var(--ey-margin) var(--ey-48);overflow:visible;background:var(--ey-bg);border-bottom:var(--ey-line) solid var(--ey-line-row);-webkit-mask-image:none;mask-image:none}
 .es-top.is-open .es-navlinks{flex-direction:column;align-items:flex-start;gap:var(--ey-16)}
 .es-top.is-open .es-navlinks:not(:empty)~.es-link{margin-left:0}
 .es-top.is-open :is(.es-navlinks>a,.es-switch>summary){padding:0;font-family:var(--ey-font-display);font-size:var(--ey-s20);font-weight:var(--ey-w-title);letter-spacing:0;text-transform:none;color:var(--ey-ink)}
}
/* al telefono logo, nome del portale e icone non stanno in una riga: il nome va sotto il logo, le icone restano a destra */
@media (max-width:600px){
 .es-top:has(.es-nav){display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;row-gap:var(--ey-8);padding-block:var(--ey-16)}
 .es-top:has(.es-nav)>.es-logo{grid-area:1/1}
 .es-top:has(.es-nav)>.es-name{grid-area:2/1}
 .es-top:has(.es-nav)>.es-sp{display:none}
 .es-top:has(.es-nav) .es-opts{grid-area:1/3/3/4}
}

/* --- Testa della pagina: titolo 48, chi, dati, introduzione --- */
.es-head{margin:0 0 var(--ey-48)}
:is(.es-head h1,.es-main>h1){margin:0;padding-block:var(--ey-big-pad);color:var(--ey-ink)}
/* l'etichetta sopra il titolo: 16 fino al titolo (--ey-gap-label, 10/10/2026), niente sopra. Prima la distanza la davano i
   margini del browser (13) o di WordPress (0): l'articolo aveva l'etichetta attaccata al titolo, il libro no (24/10/2026) */
.es-head>.es-label{margin:0 0 var(--ey-gap-label)}
.es-by{margin:var(--ey-8) 0 0;font-size:var(--ey-s20);line-height:var(--ey-lh-title);color:var(--ey-grey-1)}
.es-by a{color:inherit;text-decoration:none}
.es-by a:hover{color:var(--ey-ink)}
.es-by small{margin-left:var(--ey-8);font-size:var(--ey-s13);color:var(--ey-grey-1)}
/* gli account dell'autore accanto al nome: icone monocrome, colore del testo secondario (16/10/2026) */
.es-soc{display:inline-flex;gap:var(--ey-8);margin-left:var(--ey-16);vertical-align:middle}
.es-soc a{display:inline-flex;color:var(--ey-grey-1)}
.es-soc a:hover{color:var(--ey-ink)}
.es-soc svg{width:var(--ey-16);height:var(--ey-16)}
/* le icone dei canali fra i dati dell'evento (Eyeshot 50mm), sotto «Listen»: nel colore del testo, a 16 come le icone social del
   sito, ognuna dentro uno spazio di 24 per il dito (Rosa::CANALI; Marco, 29/10/2026: a 24 «troppo grandi») */
.es-soc.es-ev-canali{display:flex;align-items:center;gap:var(--ey-8);margin:0}
.es-ev-canali a{display:inline-flex;align-items:center;min-width:var(--ey-24);min-height:var(--ey-24);color:inherit;transition:opacity .2s ease-in-out}
.es-soc.es-ev-canali a:is(:hover,:focus-visible:where(:root:not([data-puntatore]) *)){color:inherit;opacity:.6} /* col mouse piu' chiare, come i nomi delle schede: la regola delle icone social (nere col mouse, sul bianco) sulla foto le spegneva (Marco, 29/10/2026) */
.es-ev-canali svg{width:auto;height:var(--ey-16)} /* larga quanto il disegno: le icone sono quadrate, il logo di Amazon Music e' largo */
.es-meta{margin:var(--ey-8) 0 0;font-size:var(--ey-s13);line-height:var(--ey-lh-text);color:var(--ey-grey-1)}
/* la riga di numeri sotto il titolo della Home del portale fotografi («19 books  2 magazines  525 photographs in print»):
   15, parole grigie, numeri neri, 24 fra una voce e l'altra, niente puntini (24/10/2026, la testa delle pagine del sito).
   Oggi la stessa regola vive anche nel foglio del portale (ep-dash-n): quando quel foglio si rinnova, la Home usa questa. */
.es-nums{display:flex;flex-wrap:wrap;gap:var(--ey-8) var(--ey-24);margin:var(--ey-16) 0 0;font-size:var(--ey-s15);color:var(--ey-grey-1)}
.es-nums :is(b,strong){color:var(--ey-ink)}
/* nelle pagine dell'editor ogni voce e' un paragrafo: niente margini suoi, la distanza la da' la riga */
.es-nums>*{margin:0}
/* nota: 13 grigio, 8 sopra (16/10/2026) */
.es-note{margin:var(--ey-8) 0 0;font-size:var(--ey-s13);color:var(--ey-grey-1)}
.es-lead{margin:var(--ey-24) 0 0;max-width:var(--ey-measure);font-size:var(--ey-s20);line-height:var(--ey-lh-lead);color:var(--ey-grey-1);overflow-wrap:anywhere}
.es-sub{margin:0 0 var(--ey-24);max-width:640px;font-weight:var(--ey-w-text);line-height:var(--ey-lh-text);color:var(--ey-grey-1)}
@media (max-width:781px){:is(.es-head h1,.es-main>h1){font-size:var(--ey-s48-phone)}}

/* --- Schede del libro: testo, la scheda attiva sottolineata --- */
.es-tabs{display:flex;gap:var(--ey-24);margin:0 0 var(--ey-48);padding:0;border-bottom:var(--ey-line) solid var(--ey-line-row);flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.es-tabs::-webkit-scrollbar{display:none}
.es-tabitem{flex:none;margin:0;padding:var(--ey-8) 0 var(--ey-16);font:var(--ey-w-medium) var(--ey-s15)/1.2 var(--ey-font-text);color:var(--ey-grey-1);background:none;border:0;text-decoration:none;white-space:nowrap}
.es-tabitem:hover{color:var(--ey-ink)}
.es-tabitem.is-on{color:var(--ey-ink);background:linear-gradient(var(--ey-ink),var(--ey-ink)) 0 100%/100% var(--ey-line-active) no-repeat}
.es-tabitem.is-off{color:var(--ey-grey-2);cursor:default}
@media (max-width:820px){.es-tabs{gap:var(--ey-16)}}

/* --- Filtri e viste: testo, quello che stai guardando sottolineato come le schede. Dal 22/10/2026 non per i valori che
   si salvano: quelli sono le scelte qui sotto (es-choice, es-check) --- */
.es-chips{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--ey-24);margin:0 0 var(--ey-24)}
.es-chip{display:inline-flex;align-items:center;gap:var(--ey-8);height:auto;padding:var(--ey-8) 0;font:var(--ey-w-medium) var(--ey-s15)/1.2 var(--ey-font-text);color:var(--ey-grey-1);background:none;border:0;border-radius:0;text-decoration:none;cursor:pointer}
.es-chip:hover{color:var(--ey-ink)}
.es-chip.on,.es-chip.is-on{color:var(--ey-ink);background:linear-gradient(var(--ey-ink),var(--ey-ink)) 0 100%/100% var(--ey-line-active) no-repeat}
.es-chip:disabled{color:var(--ey-grey-2);cursor:default;background:none}
.es-chip i{margin-left:var(--ey-8);font-style:normal;font-weight:var(--ey-w-text);color:var(--ey-grey-1)}
@media (hover:none){kbd{display:none}}   /* i tasti rapidi, accanto a una voce o a un bottone: al telefono non servono */
/* il filo della scelta e' lungo quanto la parola o il numero; l'area per il dito si allarga di lato con un ::after
   invisibile, senza allungare il filo (Marco, 18/10/2026: «la riga sotto deve essere sempre nello stile») */
.es-chips>.es-chip{position:relative}
.es-chips>.es-chip::after{content:"";position:absolute;inset:0 calc(var(--ey-8) * -.75)}

/* --- Le cose che imposti tu (Marco, 22/10/2026): un valore fra piu' opzioni (es-choices > es-choice) o un si'/no
   (es-check). Un segno solo, il quadrato da 16: vuoto = spento, pieno nero = acceso. Niente spunta, niente cerchi:
   e' lo stesso quadrato degli stati, con le linee dritte della cornice di una foto (tavola A/B, Marco ha scelto il
   quadrato pieno al posto del passe-partout: «chiaro dovunque»). Che se ne scelga uno solo lo dice il gruppo (un
   titolo, le voci in colonne); un interruttore sta da solo col suo nome. La sottolineatura resta per dove sei.
   Lo stato e' aria-checked (role="radio") o la casella del browser (checked): chi non vede lo sente. --- */
/* in colonne (Marco, 22/10/2026: «le caselle non sono allineate»): il gruppo dice quante (--n, es. 3 per sei voci su due
   righe), ogni colonna e' larga quanto la sua voce piu' lunga, cosi' i quadrati cadono uno sotto l'altro. Prima andavano a
   capo dove finiva lo spazio, e la seconda riga partiva con le sue misure */
.es-choices{display:grid;grid-template-columns:repeat(var(--n,2),minmax(0,max-content));justify-content:start;align-items:center;gap:0 var(--ey-16);margin:0 0 var(--ey-24)}   /* 16 fra le colonne: tre voci stanno nel pannello di 332 del coordinatore */
.es-choice{display:inline-flex;align-items:center;gap:var(--ey-8);margin:0;padding:var(--ey-8) 0;font:var(--ey-w-medium) var(--ey-s15)/1.2 var(--ey-font-text);color:var(--ey-grey-1);text-align:left;background:none;border:0;border-radius:0;cursor:pointer}
.es-check{display:inline-flex;align-items:flex-start;gap:var(--ey-8);font-size:var(--ey-s15);color:var(--ey-ink);cursor:pointer}
.es-check input{-webkit-appearance:none;appearance:none;margin:calc((1lh - var(--ey-16)) / 2) 0 0;font:inherit;cursor:pointer}
/* il quadrato, scritto una volta per tutti e due i pezzi */
.es-choice::before,.es-check input{content:"";flex:none;box-sizing:border-box;width:var(--ey-16);height:var(--ey-16);background:none;border:var(--ey-line) solid var(--ey-grey-1);border-radius:0}
.es-choice:hover,.es-choice[aria-checked="true"]{color:var(--ey-ink)}
.es-choice:hover::before,.es-check input:hover{border-color:var(--ey-ink)}
.es-choice:disabled{color:var(--ey-grey-2);cursor:default}
.es-choice:disabled::before,.es-check input:disabled{border-color:var(--ey-line-section);cursor:default}
.es-choice[aria-checked="true"]::before,.es-check input:checked{background:var(--ey-ink);border-color:var(--ey-ink)}
/* a scala (Marco, 26/10/2026, le stelle dei portali): un livello da 1 a 5, non una voce fra cinque. Si riempiono anche i
   quadrati prima di quello scelto: il 3 accende 1, 2 e 3. Il valore resta uno solo (aria-checked sul 3) */
.es-choices.is-scale .es-choice:has(~ [aria-checked="true"]){color:var(--ey-ink)}
.es-choices.is-scale .es-choice:has(~ [aria-checked="true"])::before{background:var(--ey-ink);border-color:var(--ey-ink)}
.es-check input:focus-visible:where(:root:not([data-puntatore]) *){outline:var(--ey-line-active) solid var(--ey-ink);outline-offset:2px}
.es-check-s{align-items:center;font-size:var(--ey-s13);color:var(--ey-grey-1)}   /* la casella dentro una riga di dati, 13 grigio */
.es-check-s input{margin:0}

/* --- Bottoni: due soli, normale e piccolo ---
   La scritta sta su una riga finche' il bottone ci sta; quando la colonna e' piu' stretta della scritta il bottone si ferma al
   bordo e la scritta va su due righe, mai fuori dal margine (31/10/2026: a 820 «Discover the current release» usciva di 21). */
.es-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--ey-8);width:auto;height:auto;padding:var(--ey-btn-pad);font:var(--ey-btn-w) var(--ey-btn-size)/var(--ey-btn-lh) var(--ey-font-text);letter-spacing:var(--ey-btn-ls);text-transform:var(--ey-btn-case);color:var(--ey-ink);background:none;border:var(--ey-line) solid var(--ey-ink);border-radius:0;outline:0;text-decoration:none;white-space:normal;text-wrap:balance;min-width:min(max-content,100%);max-width:100%;cursor:pointer;transition:background-color .2s ease-in-out,color .2s ease-in-out,border-color .2s ease-in-out}
/* al passaggio del mouse: nei portali una velatura, nel sito nuovo pieno d'inchiostro col testo bianco (valori --ey-btn-hover-*) */
.es-btn:hover,.es-btn:focus-visible:where(:root:not([data-puntatore]) *),a:hover .es-btn{background:var(--ey-btn-hover-bg);border-color:var(--ey-btn-hover-filo);color:var(--ey-btn-hover-ink)}
/* il dato dentro il bottone (prezzo, «Sold out»: il libro sfogliato) resta grigio, anche sul bottone pieno */
.es-btn-dato{color:var(--ey-grey-1);font-weight:var(--ey-w-text);font-variant-numeric:tabular-nums}
:is(.es-btn:hover,.es-btn:focus-visible:where(:root:not([data-puntatore]) *),a:hover .es-btn) .es-btn-dato{color:var(--ey-btn-hover-dato)}
@media (prefers-reduced-motion:reduce){.es-btn{transition:none}}
/* il bottone spento (un libro esaurito): grigio, filo chiaro, niente passaggio (24/10/2026) */
.es-btn:disabled{color:var(--ey-grey-2);border-color:var(--ey-line-section);background:none;cursor:default}
.es-btn-s{padding:var(--ey-btn-pad-small);font-size:var(--ey-btn-size-small)}
.es-btn:is(:disabled,[disabled],[aria-disabled="true"]){color:var(--ey-grey-2);border-color:var(--ey-line-section);background:none;cursor:not-allowed}

/* --- Collegamenti piccoli e righe di azioni --- */
.es-row{display:flex;gap:var(--ey-8) var(--ey-24);align-items:center;flex-wrap:wrap;margin:var(--ey-24) 0 0}
.es-link{color:var(--ey-grey-1);font-size:var(--ey-s13);text-decoration:none}
.es-link:hover{color:var(--ey-ink)}
/* un collegamento piccolo puo' essere anche un bottone (azione nella pagina, 17/10/2026): stesso aspetto, niente
   riquadro del browser, area di tocco di almeno 24 come i link della barra */
button.es-link{position:relative;margin:0;padding:0;font-family:inherit;line-height:inherit;background:none;border:0;cursor:pointer}
button.es-link::after{content:"";position:absolute;inset:calc(var(--ey-8) * -.75)}

/* --- Etichette: 13 grigio, normale, MAIUSCOLO (come A24, 11/10/2026) --- */
.es-th,.es-label{font-size:var(--ey-s-label);font-weight:var(--ey-w-label);color:var(--ey-grey-1);text-transform:uppercase;letter-spacing:var(--ey-ls-etichetta);background:none;border:0;padding:0;align-items:end}
:is(.es-th,.es-label) span{text-transform:uppercase;letter-spacing:var(--ey-ls-label);white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:normal;word-break:normal;hyphens:none}
/* LO STATO di un lavoro (Marco, 18/10/2026, fase C): la parola es-state (come un'etichetta; is-done nero, is-alert rosso) e il
   quadratino es-dot (is-open vuoto = da fare, is-draft grigio = bozza, is-done nero = pronto, is-alert rosso = da correggere,
   is-off chiaro = spento). Il quadratino si legge in un colpo d'occhio negli elenchi; la parola dice lo stesso per esteso. */
.es-state{display:inline-block;font-size:var(--ey-s13);font-weight:var(--ey-w-label);color:var(--ey-grey-1);text-transform:uppercase;letter-spacing:var(--ey-ls-label);background:none;border:0;border-radius:0}
.es-state.is-done{color:var(--ey-ink)}
.es-state.is-alert{color:var(--ey-error)}
.es-dot{flex:none;width:8px;height:8px;border-radius:0;background:var(--ey-grey-2);border:0}
.es-dot.is-open{background:none;border:var(--ey-line) solid var(--ey-grey-2)}
.es-dot.is-draft{background:var(--ey-grey-1)}
.es-dot.is-done{background:var(--ey-ink)}
.es-dot.is-alert{background:var(--ey-error)}
.es-dot.is-off{background:var(--ey-line-section)}

/* --- Tabelle a righe (17/10/2026): testo 13, filo di riga sopra ogni riga, numeri a destra. Le colonne le dice la pagina.
   La riga dei titoli e' un'etichetta (in basso, senza filo); il grassetto delle righe resta Medium. --- */
.es-tab{font-size:var(--ey-s13)}
.es-tr{display:grid;gap:var(--ey-8);align-items:center;padding:var(--ey-8) 0;border-top:var(--ey-line) solid;border-color:var(--ey-line-row)}
.es-tr.es-th{padding:0;border:0 var(--ey-line-row);align-items:end}
.es-tr>span{font-size:var(--ey-s13)}
.es-tr b{display:block;font-weight:var(--ey-w-medium);color:var(--ey-ink)}
.es-tr small{color:var(--ey-grey-1);font-size:var(--ey-s13)}
/* la riga scelta (es. la fascia di sconto delle copie d'autore), 19/10/2026 */
.es-tr.on>*{font-weight:var(--ey-w-medium);color:var(--ey-ink)}
.es-cv,.es-num{text-align:right;font-variant-numeric:tabular-nums;color:var(--ey-ink)}
.es-cv{font-size:var(--ey-s13)}
/* l'intestazione e' tutta grigia, numeri compresi, in ogni portale (Marco, 18/10/2026, fase C) */
.es-th>.es-num{color:inherit}

/* --- Capitoli: filo sopra, 24, titolo 30. Colonne affiancate: filo sopra, 24, titolo 20 --- */
.es-box,.es-chap,.es-col{min-width:0;margin:var(--ey-72) 0 0;padding:var(--ey-24) 0 0;background:none;border:0;border-top:var(--ey-line) solid var(--ey-line-section);border-radius:0;box-shadow:none;color:inherit}
.es-box{overflow-wrap:anywhere}
.es-box.is-off{opacity:.45;pointer-events:none}
.es-app>:first-child,.es-app>:first-child>:is(.es-box,.es-col){margin-top:0}
/* titolo di colonna o di parte di un capitolo: 20 */
.es-chap .es-box>h2,.es-duo>.es-box>h2,.es-h2,.es-col>:is(h2,h4){margin:0;padding:0} /* il colore lo eredita */
/* titolo di capitolo: 30 (viene dopo, vince a parita' di forza) */
.es-box>:is(h2,h3),.es-chap>h2,.es-hrow h2{margin:0;padding:0;color:var(--ey-ink)}
/* un titolo di capitolo scritto da solo nella pagina, senza riquadro: porta lui il filo */
.es-app>h2.es-h2{margin:var(--ey-72) 0 var(--ey-24);padding:var(--ey-24) 0 0;color:var(--ey-ink);border-top:var(--ey-line) solid var(--ey-line-section)}
.es-app>h2.es-h2:first-child{margin-top:0}
/* dopo il titolo 24; una nota 13 grigia subito sotto il titolo sta a 8, e il contenuto parte 24 sotto la nota
   (Marco, 19/10/2026: «Common to all books» toccava la riga Binding) */
:is(.es-box,.es-chap,.es-col)>:is(h2,h3,h4)+*{margin-top:var(--ey-24)}
:is(.es-box,.es-chap,.es-col)>:is(h2,h4)+:is(.es-hint,p,.es-note,.es-sub),.es-box>h3+p{margin-top:var(--ey-8)}
:is(.es-box,.es-chap,.es-col)>:is(h2,h4)+.es-note+*{margin-top:var(--ey-24)}
.es-hrow{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--ey-8) var(--ey-16);margin:0 0 var(--ey-24);padding:0;border:0}
.es-hrow>span,.es-hrow>p,.es-hrow h2 i,.es-h2 i{font-family:var(--ey-font-text);font-style:normal;font-weight:var(--ey-w-text);font-size:var(--ey-s13);letter-spacing:0;color:var(--ey-grey-1)}
.es-h2 i,.es-hrow h2 i{margin-left:var(--ey-8)}
.es-hint{max-width:680px;margin:0 0 var(--ey-16);font-size:var(--ey-s13);color:var(--ey-grey-1);overflow-wrap:anywhere}
/* capitoli affiancati: la distanza la danno le colonne */
.es-duo{display:grid;grid-template-columns:minmax(0,1fr);align-items:stretch;column-gap:var(--ey-24);row-gap:var(--ey-72)}
/* una riga di colonne messa da sola nella pagina e' un capitolo: 72 come gli altri (24/10/2026: dopo le schede stava a 48);
   piu' righe di colonne nello stesso capitolo stanno a 48, la distanza fra i pezzi dentro un capitolo (prima 16, le domande si toccavano) */
:is(.es-main,.es-app)>.es-duo{margin-top:var(--ey-72)}
:is(.es-main,.es-app)>.es-duo:first-child{margin-top:0}
.es-duo+.es-duo{margin-top:var(--ey-48)}
.es-duo>*{min-width:0}
.es-duo>.es-box{margin-top:0}
.es-chap .es-box{margin-top:var(--ey-48);padding-top:0;border-top:0}
/* dopo la testa 48, sempre (il suo margine): il primo capitolo non porta i suoi 72. Nei portali lo fa es-app, nelle pagine
   del sito il capitolo sta subito sotto la testa (pagina dell'Open Call 2025, 24/10/2026: stava a 72) */
.es-head+:is(.es-box,.es-chap,.es-col,.es-duo){margin-top:0}
@media (min-width:1100px){.es-duo{grid-template-columns:repeat(2,minmax(0,1fr))}.es-duo.es-tre{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* --- Il primo blocco sotto le schede del libro non ha un altro filo: la riga delle schede basta --- */
.es-tabs~.es-app>:first-child,.es-tabs~.es-app>:first-child>:not(button,a,input,select,textarea,label),.es-tabs~.es-app>:first-child>.es-flow>*{border-top:0;padding-top:0}
.es-tabs~.es-app>:empty:first-child+*,.es-tabs~.es-app>:empty:first-child+*>:not(button,a,input,select,textarea,label),.es-tabs~.es-app>:empty:first-child+*>*>.es-box{margin-top:0;padding-top:0;border-top:0}

/* --- Misura: una barra sottile per un valore in percentuale (--v), per leggere a colpo d'occhio (21/10/2026, la media di un
   criterio nel pannello del coordinatore). Il filo della riga come binario, il nero come valore, alta quanto il filo attivo. --- */
.es-meter{display:block;height:var(--ey-line-active);margin-top:var(--ey-8);background:var(--ey-line-row)}
.es-meter i{display:block;width:var(--v,0%);height:100%;background:var(--ey-ink)}

/* --- Numeri grandi: filo sopra, numero 48, etichetta 13 --- */
.es-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--ey-24);row-gap:var(--ey-48);margin:0 0 var(--ey-48)}
.es-strip-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.es-sc{min-width:0;margin:0;padding:var(--ey-24) 0 0;border-top:var(--ey-line) solid var(--ey-line-section)}
:is(.es-box,.es-chap) .es-sc{padding-top:0;border-top:0}
.es-sc b{display:block;padding-block:var(--ey-big-pad);color:var(--ey-ink)}
.es-sc span{display:block;margin:var(--ey-8) 0 0;font-size:var(--ey-s13);color:var(--ey-grey-1)}
@media (max-width:820px){.es-strip,.es-strip-3{grid-template-columns:repeat(2,minmax(0,1fr))}.es-strip-3>:nth-child(3){grid-column:1/-1}.es-sc b{font-size:var(--ey-s48-phone)}}

/* --- Pannello a tre passi (Contract, Selection, Sequence, Statement): tre colonne --- */
/* i e b dei portali, em e strong delle pagine scritte nell'editor di WordPress: stesso pezzo (24/10/2026) */
.es-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--ey-24);row-gap:var(--ey-48);margin:0 0 var(--ey-48);padding:0;background:none;border:0;overflow:hidden}
.es-tabs~.es-app>.es-flow:first-child{padding-top:var(--ey-8)}
.es-flow-step{display:flex;flex-direction:column;align-items:flex-start;gap:var(--ey-8);min-width:0;margin:0;padding:0;background:none;border:0}
.es-flow-n{display:flex;align-items:center;gap:var(--ey-8);margin:0 0 var(--ey-16);padding:0;font-size:var(--ey-s13);font-weight:var(--ey-w-label);color:var(--ey-grey-1);text-transform:uppercase;letter-spacing:var(--ey-ls-label);background:none;border:0}
/* il numero del passo: «1.» grigio, nero e senza punto quando il passo e' fatto */
.es-flow-n :is(i,em){display:inline-flex;align-items:center;justify-content:center;width:auto;height:auto;font-style:normal;font-size:var(--ey-s13);letter-spacing:0;color:var(--ey-grey-1);background:none;border:0}
.es-flow-n :is(i,em)::after{content:"."}
.es-flow-step.done .es-flow-n :is(i,em){color:var(--ey-ink)}
.es-flow-step.done .es-flow-n :is(i,em)::after{content:""}
.es-flow-v{margin:0;font-size:var(--ey-s20);line-height:var(--ey-lh-lead);color:var(--ey-ink)}
.es-flow-v :is(b,strong){font-weight:var(--ey-w-medium);color:var(--ey-ink)}
.es-flow-s{margin:0 0 var(--ey-8);font-size:var(--ey-s13);line-height:var(--ey-lh-text);color:var(--ey-grey-1)}
.es-flow-s :is(b,strong){color:var(--ey-ink)}
/* testo -> bottone 24, come ovunque (--ey-gap-cta): 8 dello spazio del passo, 8 sotto la riga, 8 qui (24/10/2026, prima 16) */
.es-flow-step>.es-btn{margin-top:var(--ey-8)}
.es-flow-a{margin:0 0 var(--ey-8);font-size:var(--ey-s13);color:var(--ey-ink);text-decoration:none}
.es-flow-a:hover{text-decoration:underline}
.es-ask{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--ey-8);font-size:var(--ey-s13)}
.es-flow-step .es-ask{display:flex;margin-top:auto;color:var(--ey-ink)}
.es-flow-step .es-ask span{flex:1 0 100%}
.es-flow-bar{width:100%;margin:var(--ey-8) 0 0}
@media (max-width:860px){.es-flow{grid-template-columns:minmax(0,1fr)}}

/* --- Campi: tutti uguali (testo 15, filo del campo, angoli vivi, nessun fondo) --- */
.es-field,.es-area{width:100%}
.es-area{resize:vertical}
:is(input,select,textarea,button):is(.es-field,.es-area,.es-select){height:auto;margin:0;padding:var(--ey-8) var(--ey-16);font:var(--ey-w-text) var(--ey-s15)/var(--ey-lh-text) var(--ey-font-text);color:var(--ey-ink);background-color:transparent;border:var(--ey-line) solid var(--ey-line-field);border-radius:0;outline:0;box-shadow:none}
:is(input,select,textarea,button):is(.es-field,.es-area,.es-select):focus{border-color:var(--ey-ink)}
/* campi su una riga: stessa altezza dei bottoni, cosi' stanno in fila */
input.es-field{padding:var(--ey-btn-pad);line-height:var(--ey-btn-lh)}
/* un bottone che apre una scelta (es. il pannellino delle ore del tavolo editoriale, 03/11/2026) e' un campo come la
   tendina: stesso filo e stessa freccia. Prima prendeva l'aspetto del browser, grigio in rilievo (Marco: «grafica anni 80») */
:is(select.es-field,select.es-select,button.es-field){padding:var(--ey-btn-pad);padding-right:var(--ey-32);line-height:var(--ey-btn-lh);-webkit-appearance:none;appearance:none;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--ey-grey-1) 50%),linear-gradient(135deg,var(--ey-grey-1) 50%,transparent 50%);background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;background-size:5px 5px;background-repeat:no-repeat}
/* le date: la casella si allarga quanto la data, mai l'anno tagliato fuori (15/10/2026) */
input[type=date]{width:auto;max-width:100%;min-width:0}
/* il campo per scegliere un file: il testo 13 grigio, il bottone come un bottone piccolo col filo (in questo capitolo dal 20/10/2026: e' un campo) */
input[type=file]{font:inherit;font-size:var(--ey-s13);color:var(--ey-grey-1)}
input[type=file]::file-selector-button{height:36px;margin-right:var(--ey-8);padding:0 var(--ey-16);font:inherit;font-size:var(--ey-s13);color:var(--ey-ink);background:transparent;border:var(--ey-line) solid var(--ey-line-section);border-radius:0;cursor:pointer}
input[type=file]::file-selector-button:hover{border-color:var(--ey-ink);color:var(--ey-ink)}
/* sugli schermi da toccare un campo e' a 16, non 15: sotto 16 iPhone ingrandisce la pagina quando lo si tocca (Marco, 20/10/2026) */
@media (max-width:820px),(pointer:coarse){input:not([type=checkbox]):not([type=radio]):not([type=range]),textarea,select{font-size:var(--ey-s15-touch)}}

/* --- Foto. Sempre a colori pieni, ferme, nessun effetto al passaggio (Marco, 15/10/2026).
   La griglia: righe giustificate (Marco, 28/10/2026, sulle foto del volume dell'Open Call e dei libri: «lo spazio tra le
   foto deve essere uguale... tutte la stessa altezza... responsive»). In ogni riga le foto hanno la stessa altezza, ognuna
   larga secondo le sue proporzioni (--r = larghezza/altezza), lo spazio fra loro e' sempre quello di base e la riga va da
   bordo a bordo: ogni foto cresce in proporzione alla sua forma (flex-grow = --r), cosi' l'altezza resta uguale.
   Sostituisce la scelta del 24/10/2026 (tutte alla stessa altezza in tutta la pagina, con lo spazio che cambiava): lo
   spazio arrivava a 76 px dove c'erano foto verticali. Misurato sul volume Open Call 2026 · Series (303 foto, 1470 px):
   prima spazi da 34 a 76 e altezza 165; ora spazio 16 e altezza 175, 185-202 solo nelle righe con verticali.
   Quante foto in una riga lo decide la larghezza della griglia (100cqi): N foto orizzontali, da 2 a 9, una ogni 290 px
   circa. Il nascosto in fondo (::after) prende lo spazio avanzato dell'ultima riga: le sue foto restano alla misura di
   base, appoggiate a sinistra, senza ingrandirsi per riempirla. --- */
/* fra una riga e l'altra 24 (Marco, 31/10/2026, sulle singole e le serie della giuria: «e' tutto troppo attaccato, la riga
   di sotto deve stare piu' distante»): la didascalia sta a 8 dalla sua foto e a 24 dalla foto sotto, tre volte tanto, cosi'
   si legge con la foto sopra. Prima lo spazio fra le righe era 0 e la didascalia toccava la riga seguente. */
.es-photos{container-type:inline-size;display:flex;flex-wrap:wrap;column-gap:var(--ey-16);row-gap:var(--ey-24)}
.es-photos::after{content:"";flex:1000 0 0}
.es-photo{display:flex;flex-direction:column;align-items:stretch;gap:var(--ey-8);min-width:0;margin:0;padding:0;font:inherit;color:inherit;text-align:left;background:none;border:0;cursor:zoom-in}
.es-photo:focus{outline:none}
.es-photos>.es-photo{flex:var(--r,1.5) 1 calc(var(--r,1.5) * (100cqi - 8 * var(--ey-16)) / (9 * 1.55))}
@container (max-width:2379px){.es-photos>.es-photo{flex-basis:calc(var(--r,1.5) * (100cqi - 7 * var(--ey-16)) / (8 * 1.55))}}
@container (max-width:2089px){.es-photos>.es-photo{flex-basis:calc(var(--r,1.5) * (100cqi - 6 * var(--ey-16)) / (7 * 1.55))}}
@container (max-width:1799px){.es-photos>.es-photo{flex-basis:calc(var(--r,1.5) * (100cqi - 5 * var(--ey-16)) / (6 * 1.55))}}
@container (max-width:1509px){.es-photos>.es-photo{flex-basis:calc(var(--r,1.5) * (100cqi - 4 * var(--ey-16)) / (5 * 1.55))}}
@container (max-width:1219px){.es-photos>.es-photo{flex-basis:calc(var(--r,1.5) * (100cqi - 3 * var(--ey-16)) / (4 * 1.55))}}
@container (max-width:929px){.es-photos>.es-photo{flex-basis:calc(var(--r,1.5) * (100cqi - 2 * var(--ey-16)) / (3 * 1.55))}}
@container (max-width:639px){.es-photos>.es-photo{flex-basis:calc(var(--r,1.5) * (100cqi - var(--ey-16)) / (2 * 1.55))}}
/* l'ultima riga alla stessa altezza della riga sopra (eyeshot-portali.js misura --es-h; Marco, 28/10/2026: «tendi sempre
   a rimpicciolire l'ultima riga»); se a quell'altezza non ci sta, si allarga fino al bordo come le altre */
.es-photos>.es-photo.is-last{flex:0 0 calc(var(--r,1.5) * var(--es-h))}
.es-photos.is-full::after{flex-grow:0}
/* una serie, che si legge in sequenza (pagina Series): al computer tutte in una riga che riempie la pagina, quanto
   e' larga; al telefono va a capo come le altre */
@media (min-width:821px){.es-photos.is-row{flex-wrap:nowrap}.es-photos.is-row::after{content:none}.es-photos.is-row>.es-photo{flex:var(--r,1.5) 1 0}}
/* la foto da sola (fuori dalla griglia): 3:2, intera, appoggiata in basso a sinistra */
.es-photo-im{position:relative;display:block;aspect-ratio:3/2;overflow:hidden;background:none;border-radius:0;outline:var(--ey-line-active) solid transparent;outline-offset:2px;transition:outline-color .15s}
.es-photo-im img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;object-position:0 100%}
.es-photo:hover .es-photo-im,.es-photo:focus-visible:where(:root:not([data-puntatore]) *) .es-photo-im{outline-color:var(--ey-grey-2)}
/* nella griglia: la foto riempie il suo posto; il segno del passaggio e' sulla foto, non sul riquadro */
.es-photos .es-photo-im{aspect-ratio:var(--r,1.5);overflow:visible;outline:0}
.es-photos .es-photo-im img{object-fit:cover;outline:var(--ey-line-active) solid transparent;outline-offset:2px}
.es-photos .es-photo:hover .es-photo-im img,.es-photos .es-photo:focus-visible:where(:root:not([data-puntatore]) *) .es-photo-im img{outline-color:var(--ey-grey-2)}
/* la didascalia di una foto: il numero a sinistra, il testo a destra, MAI a capo (Marco, 22/10/2026: nel pannello del
   coordinatore le didascalie lunghe andavano a capo dove capitava, sotto le foto verticali larghe 125). Una riga, e se non
   basta i tre puntini. Senza numero il testo parte da sinistra, come una didascalia. */
.es-photo-cap{display:flex;justify-content:space-between;gap:0 var(--ey-8);min-height:18px;font-size:var(--ey-s13);color:var(--ey-grey-1)}
.es-photo-cap em{flex:none;font-style:normal;font-weight:var(--ey-w-medium);color:var(--ey-ink);font-variant-numeric:tabular-nums}
.es-photo-cap span{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right}
.es-photo-cap>span:only-child{text-align:left}
:is(.es-gate-im,.es-tile-im,.es-card-im) img{opacity:1;filter:none;transform:none;transition:none}

/* --- Schede con foto. Grandi (es-tiles): foto 3:2, sotto il titolo 20 e una riga grigia.
   Piccole (es-cards): copertina 3:2, titolo 20, riga 13. La copertina mancante e' una cornice sottile della forma della
   copertina, con la scritta grigia in basso a sinistra: il posto dove arrivera' la foto (Marco, 28/10/2026: «non mettere
   quella linea sopra e tutto vuoto»; prima, dal 17/10/2026, era un filo sopra e il vuoto, che sembrava un errore). Non un
   fondo grigio: i riquadri grigi restano fuori regola (14/10/2026). --- */
.es-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--ey-24);row-gap:var(--ey-48);margin-bottom:var(--ey-48)}
/* due schede per riga, quando le cose da mostrare sono due e hanno qualche riga di testo (pagina dell'Open Call 2025,
   cantiere del sito, 24/10/2026: il magazine e la mostra) */
.es-tiles.es-tiles-2{grid-template-columns:repeat(2,minmax(0,1fr))}
/* la fila sempre piena quando le schede sono quante capita (es-tiles-piena: gli elenchi degli articoli, le schede delle
   pagine; Marco, 24/10/2026): la griglia ha sei parti e ogni scheda ne prende due; se nell'ultima fila restano due schede
   prendono tre parti ciascuna, se ne resta una le ultime quattro vanno due e due. Al telefono una per riga come sempre. */
@media (min-width:601px){
 .es-tiles-piena{grid-template-columns:repeat(6,minmax(0,1fr))}
 .es-tiles-piena>*{grid-column:span 2}
 .es-tiles-piena>:nth-child(3n+1):nth-last-child(2),.es-tiles-piena>:nth-child(3n+2):last-child,
 .es-tiles-piena>:nth-child(3n+1):last-child,.es-tiles-piena>:nth-child(3n):nth-last-child(2),
 .es-tiles-piena>:nth-child(3n+2):nth-last-child(3),.es-tiles-piena>:nth-child(3n+1):nth-last-child(4){grid-column:span 3}
}
/* gli elenchi di articoli con le foto intere (es-tiles-intere; Marco, 24/10/2026: «sempre proporzionato all'altezza delle
   foto», come la griglia dei portali): ogni scheda e' larga quanto le proporzioni della sua foto (--r, Articoli::intera) e
   le schede di una fila crescono insieme fino al bordo, cosi' in ogni fila le foto hanno la stessa altezza e nessuna e'
   tagliata. */
/* Dal 29/10/2026 (Marco, la pagina Editor's Notes: «devono avere tutte la stessa altezza, la distanza tra le foto quella che
   usiamo canonicamente... piu' si allarga la pagina piu' foto ce ne entrano per riga») lo spazio e' quello della griglia delle
   foto dei portali, 16 fra le schede (e 24 fra le file, fino al 31/10/2026), e le schede per fila crescono con la larghezza come li': tre a 1470,
   quattro da 1510, cinque da 2100, due al tablet, una al telefono. L'ultima fila prende l'altezza di quella sopra
   (eyeshot-portali.js: le file con --es-w e is-file; un elenco che carica ancora con --es-h, is-last, is-full). */
/* Dal 31/10/2026 piu' aria fra le file, in tutte le griglie di foto del sito (Marco: «quello che manca e' l'aria tra le
   honorable mention e tra le singole... sembra tutto troppo attaccato»; poi «lo stesso spazio... anche a questa pagina», la
   pagina di tutte le edizioni, «Every edition» e «In print»): fra le file 72 come fra le fasce delle serie, 48 al telefono;
   fra le foto della stessa fila 16 come ovunque, anche nelle fasce («la distanza tra una foto di sinistra e un'altra foto di
   destra deve essere dappertutto uguale»; provato 32 e scartato) */
.es-tiles.es-tiles-intere{container-type:inline-size;display:flex;flex-wrap:wrap;column-gap:var(--ey-16);row-gap:var(--ey-72)}
@media (max-width:781px){.es-tiles.es-tiles-intere{row-gap:var(--ey-48)}}
.es-tiles-intere>*{flex:var(--r,1.5) 1 calc(var(--r,1.5) * (100cqi - 4 * var(--ey-16)) / (5 * 1.55))} /* 1,55 come la griglia dei portali: le foto 3:2 entrano con un filo di margine, mai una in meno per un arrotondamento */
@container (max-width:2099px){.es-tiles-intere>*{flex-basis:calc(var(--r,1.5) * (100cqi - 3 * var(--ey-16)) / (4 * 1.55))}}
@container (max-width:1509px){.es-tiles-intere>*{flex-basis:calc(var(--r,1.5) * (100cqi - 2 * var(--ey-16)) / (3 * 1.55))}}
@container (max-width:929px){.es-tiles-intere>*{flex-basis:calc(var(--r,1.5) * (100cqi - var(--ey-16)) / (2 * 1.55))}}
@container (max-width:599px){.es-tiles-intere>*{flex-basis:100%}}
/* le schede grandi di un elenco corto (es-tiles-grandi, Elenco::a_blocchi con un blocco solo: Picturing the Past, 29/10/2026):
   in una fila entrano circa due schede e mezza di foto 1:1, cioe' tre verticali; le file le fa la regola di tutte le griglie */
.es-tiles-intere.es-tiles-grandi>*{flex-basis:calc(var(--r,1.5) * (100cqi - 2 * var(--ey-16)) / 2.5)}
@container (max-width:599px){.es-tiles-intere.es-tiles-grandi>*{flex-basis:100%}}
/* tre per fila anche sullo schermo largo (Rosa::fascia, fila="3": «In print», 29/10/2026); due sul tablet, una al telefono, come le altre */
.es-tiles-intere.es-tiles-3>*{flex-basis:calc(var(--r,1.5) * (100cqi - 2 * var(--ey-16)) / (3 * 1.55))}
@container (max-width:929px){.es-tiles-intere.es-tiles-3>*{flex-basis:calc(var(--r,1.5) * (100cqi - var(--ey-16)) / (2 * 1.55))}}
@container (max-width:599px){.es-tiles-intere.es-tiles-3>*{flex-basis:100%}}
.es-tiles-intere::after{content:"";flex:999 1 0}
.es-tiles-intere>.is-last{flex:0 0 calc(var(--r,1.5) * var(--es-h))}
/* le file decise da eyeshot-portali.js (la regola di tutte le griglie del sito, 29/10/2026): ogni scheda ha la sua larghezza
   (--es-w) e ogni fila arriva al bordo. Il nascosto in fondo tolto, non solo fermo: lo spazio prima di lui lasciava 16 vuoti */
.es-tiles-intere.is-file>*{flex:0 0 var(--es-w)}
.es-tiles-intere:is(.is-file,.is-full)::after{display:none} /* is-full: l'ultima fila di un elenco che carica ancora, quasi piena */
.es-tiles-intere .es-tile-im{aspect-ratio:var(--r,1.5)}
/* margine 0: scritte nell'editor le schede sono blocchi uno dopo l'altro e WordPress da' a ognuna tranne la prima lo spazio
   fra i blocchi, che nella griglia abbassava di 16 tutte le schede tranne la prima (Marco, 24/10/2026) */
.es-tile{position:relative;display:flex;flex-direction:column;min-width:0;margin:0;overflow:visible;color:var(--ey-ink);text-decoration:none;background:none;border-radius:0}
/* l'altezza la da' sempre il 3:2 (24/10/2026: con height 100% una foto si allungava quando la scheda accanto aveva due righe di testo) */
.es-tile-im{position:relative;display:block;aspect-ratio:3/2;overflow:hidden;width:100%;height:auto;margin:0}
.es-tile-im img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
/* foto intere (es-tiles-whole): le opere dell'Open Call, vincitori, menzioni e finalisti, non si tagliano mai (24/10/2026).
   Ogni foto sta intera nel suo spazio 3:2, appoggiata in basso a sinistra come la foto da sola dei portali (es-photo-im), ma
   larga e alta quanto le sue proporzioni: niente bande vuote, e in ogni fila i titoli partono alla stessa altezza. */
.es-tiles-whole .es-tile-im{display:flex;align-items:flex-end;justify-content:flex-start}
.es-tiles-whole .es-tile-im img{position:static;width:auto;height:auto;max-width:100%;max-height:100%}
.es-tile-tx{display:flex;flex-direction:column;gap:var(--ey-8);min-width:0;padding:var(--ey-16) 0 0;color:var(--ey-ink);background:none}
/* b e span dei portali; nelle pagine scritte nell'editor il titolo e' un paragrafo in grassetto, la riga il paragrafo dopo
   (cantiere del sito, 24/10/2026). Niente margini propri: la distanza la da' la scheda. */
.es-tile-tx>*{margin:0}
.es-tile-tx :is(span:not(.es-label),p+p){font-size:var(--ey-s13);line-height:var(--ey-lh-text);color:var(--ey-grey-1)}
.es-tile-tx :is(b,strong){color:var(--ey-ink)}
/* scritta nell'editor la scheda non e' un collegamento: lo e' il titolo, e si apre toccando la scheda intera, come nei portali.
   Vale per le schede grandi e per le piccole (24/10/2026, le altre edizioni in fondo alla pagina dell'Open Call 2025) */
:is(.es-tile-tx,.es-card) a{color:inherit;text-decoration:none}
:is(.es-tile-tx,.es-card) a::after{content:"";position:absolute;inset:0}
:is(.es-tile-tx,.es-card) a:focus-visible:where(:root:not([data-puntatore]) *){outline:var(--ey-line-active) solid var(--ey-ink);outline-offset:2px}
/* --- La fascia che scorre (es-rail; Marco, 24/10/2026, come «Latest in TV» di A24): la chiusura comune di libri, note,
   interviste e serie (Articoli::chiusura). Il titolo del capitolo e a destra le due frecce; sotto le schede grandi una
   accanto all'altra (es-scroll), che escono dal bordo destro della pagina e scorrono di lato, col dito, col trackpad o con
   le frecce, una scheda alla volta (assets/js/eyeshot-rail.js). Le foto tutte alla stessa altezza e intere (Marco,
   24/10/2026): ogni scheda e' larga quanto le proporzioni della sua foto (--r, scritto dal server, come nella griglia delle foto
   dei portali) per l'altezza comune. L'altezza (Marco, 24/10/2026: «troppo grandi», poi «si deve vedere una foto che
   scavalla, che va oltre il quadro, e si capisce che bisogna cliccare»): dal margine sinistro al bordo dello schermo
   stanno tre foto 3:2 e mezza al computer (alte circa 250), due e mezza al tablet, una e mezza al telefono, cosi' il
   bordo taglia sempre una foto a meta' e non la lascia finire quasi intera. Senza frecce al telefono (si scorre col dito). --- */
.es-rail-nav{display:flex;gap:var(--ey-8);margin:calc((var(--ey-24) - var(--ey-48)) / 2) 0 calc((var(--ey-24) - var(--ey-48)) / 2) auto;align-self:center}
/* i bottoni sono alti 48 (il dito) ma nella riga contano quanto la freccia, 24: se no allargavano la riga del titolo e la scritta
   sotto finiva a 25 dal titolo (Marco, 27/10/2026: «troppo staccato dal testo sopra») */
/* le frecce restano sempre sulla riga del titolo e la scritta grigia, quando non c'e' posto accanto, va sotto (Marco, 27/10/2026:
   «la freccia deve rimanere sempre sopra... il testo va sotto. Tienilo come buona regola»): sotto i 1200 la scritta prende una
   riga sua e il titolo, se e' lungo, va a capo prima delle frecce (31/10/2026: la regola scattava solo sotto i 782, e a 820 nello
   shop le frecce scendevano sotto il titolo) */
@media (max-width:1199px){.es-rail .es-hrow>span{order:1;flex-basis:100%}.es-rail .es-hrow:has(>.es-rail-nav) h2{flex:1 1 0;min-width:0}}
/* le tre verticali hanno le frecce solo quando scorrono (es-vert-scorre) */
.es-rail-vert:not(:has(.es-vert-scorre)) .es-rail-nav{display:none}
/* al telefono una freccia sola, avanti: dice che si va a destra e lascia al titolo la riga (con due «More from Eyeshot» andava a capo) */
@media (max-width:600px){.es-rail-nav .es-rail-prev{display:none}}
/* il titolo che apre la pubblicazione (le righe del negozio): resta un titolo, la sottolineatura solo al passaggio */
.es-hrow h2 a{font:inherit;letter-spacing:inherit;color:inherit;text-decoration:none}
.es-hrow h2 a:hover{text-decoration:underline;text-underline-offset:.15em;text-decoration-thickness:var(--ey-line)}
.es-rail-nav button{display:inline-flex;align-items:center;justify-content:center;width:var(--ey-48);height:var(--ey-48);margin:0;padding:0;background:none;border:0;color:var(--ey-ink);cursor:pointer}
.es-rail-nav button:disabled{color:var(--ey-grey-2);cursor:default}
.es-rail-nav svg{width:var(--ey-24);height:var(--ey-24)}
/* Embla Carousel (eyeshot-rail.js, 29/10/2026, come A24): la finestra es-embla taglia ai bordi dello schermo e la fascia dentro
   si muove; lo scorrimento e l'aggancio del browser si spengono. Al fondo, dopo l'ultima scheda, il margine della pagina come
   prima (Embla lo legge dal margine dell'ultima scheda). La foto non si stacca per essere scaricata */
.es-embla{overflow:hidden;margin-right:calc(var(--ey-margin) * -1)}
.es-embla>.es-scroll{margin-right:0;padding-right:0;overflow:visible;scroll-snap-type:none;touch-action:pan-y pinch-zoom}
.es-embla>.es-scroll>:last-child{margin-right:var(--ey-margin)}
:is(.es-scroll,.es-vert) img{-webkit-user-drag:none}
/* il bottone in fondo alla fascia, per vederle tutte (chiusura degli articoli, finalisti della Home): staccato dalle schede come
   il bottone sotto un testo */
.es-rail>.es-btn{margin-top:var(--ey-gap-cta)}
.es-scroll{display:flex;align-items:flex-start;gap:var(--ey-24);margin:0 calc(var(--ey-margin) * -1) var(--ey-48) 0;padding:0 var(--ey-margin) 0 0;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.es-scroll::-webkit-scrollbar{display:none}
.es-scroll:focus-visible:where(:root:not([data-puntatore]) *){outline:var(--ey-line-active) solid var(--ey-ink);outline-offset:var(--ey-8)}
.es-scroll>*{flex:0 0 auto;width:calc(var(--r,1.5) * (100vw - var(--ey-margin) - var(--ey-24) * 3) / 5.25);scroll-snap-align:start}
.es-scroll .es-tile-im{aspect-ratio:var(--r,1.5)}
@media (max-width:781px){.es-scroll>*{width:calc(var(--r,1.5) * (100vw - var(--ey-margin) - var(--ey-24) * 2) / 3.75)}}
@media (max-width:600px){.es-scroll{gap:var(--ey-16)}.es-scroll>*{width:calc(var(--r,1.5) * (100vw - var(--ey-margin) - var(--ey-16)) / 2.25)}}
.es-cards{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));column-gap:var(--ey-24);row-gap:var(--ey-48);margin:var(--ey-16) 0 var(--ey-32)}
.es-cards.es-cards-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.es-cards-4>[style*="--q"]{grid-column:var(--q)}
.es-card{position:relative;display:flex;flex-direction:column;gap:var(--ey-8);margin:0;color:inherit;text-decoration:none}
/* nelle pagine scritte nell'editor titolo e riga sono due paragrafi, come nelle schede grandi */
.es-card>p{margin:0}
.es-card :is(span:not(.es-card-im),p+p){color:var(--ey-grey-1);font-size:var(--ey-s13)}
.es-card-im{display:block;aspect-ratio:3/2;overflow:hidden;margin:0 0 var(--ey-8);background:none;border:0;border-radius:0}
.es-card-im img{display:block;width:100%;height:100%;object-fit:cover}
.es-card-im[style*="--r"]{aspect-ratio:var(--r)} /* una scheda che dichiara le proporzioni della sua foto la tiene intera (i ritratti quadrati del Team nella About, 28/10/2026) */
.es-card-im:empty{display:flex;align-items:flex-end;justify-content:flex-start;padding:var(--ey-16);border:var(--ey-line) solid var(--ey-line-section)}
.es-card-im:empty::after{content:"No photographs yet";font-size:var(--ey-s13);color:var(--ey-grey-1)}
.es-card-gap .es-card-im:empty::after{content:""}
.es-card-gap b{color:var(--ey-grey-1)}
@media (max-width:1100px){.es-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:600px){.es-tiles,.es-tiles.es-tiles-2{grid-template-columns:minmax(0,1fr)}.es-cards,.es-cards.es-cards-4{grid-template-columns:repeat(2,minmax(0,1fr))}.es-cards-4>[style*="--q"]{grid-column:auto}}

/* --- Ingressi: le due porte d'accesso, su fondo scuro sempre --- */
.es-gate{--ey-bg:var(--ey-d-bg);--ey-paper:var(--ey-d-panel);--ey-ink:var(--ey-d-ink);--ey-grey-1:var(--ey-d-grey-1);--ey-grey-2:var(--ey-d-grey-2);--ey-line-section:var(--ey-d-line-section);--ey-line-row:var(--ey-d-line-row);--ey-line-field:var(--ey-d-line-field);--ey-error:var(--ey-d-error)}
body:has(.es-gates){display:flex;flex-direction:column;min-height:100svh}
body:has(.es-gates) .es-main{flex:1 0 auto;display:flex;flex-direction:column;padding-bottom:var(--ey-48)}
.es-gates{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ey-24)}
.es-gate{position:relative;display:block;overflow:hidden;color:var(--ey-ink);text-decoration:none;background:var(--ey-bg);border-radius:0}
.es-gate-im,.es-gate-im img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.es-gate-im::before{content:"";position:absolute;left:0;right:0;top:0;height:120px;background:linear-gradient(180deg,color-mix(in srgb,var(--ey-bg) 62%,transparent),transparent);z-index:1}
.es-gate-im::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,color-mix(in srgb,var(--ey-bg) 86%,transparent))}
.es-gate-form .es-gate-im::after{background:linear-gradient(180deg,transparent 40%,color-mix(in srgb,var(--ey-bg) 55%,transparent) 62%,color-mix(in srgb,var(--ey-bg) 93%,transparent) 88%)}
.es-cred{position:absolute;top:var(--ey-16);left:var(--ey-24);right:var(--ey-24);z-index:2;font-size:var(--ey-s13);line-height:var(--ey-lh-text);color:color-mix(in srgb,var(--ey-ink) 92%,transparent);text-shadow:none}
.es-gate-tx{position:absolute;left:26px;right:26px;bottom:24px;z-index:2;display:block;overflow-wrap:anywhere}
/* i titoli delle due porte: 30, uguali (Sign in e Submit your work), nel carattere dei titoli anche al telefono (20/10/2026) */
.es-gate-tx :is(h2,b){display:block;margin:0 0 var(--ey-8)}
.es-gate-p{display:block;max-width:460px;margin:0 0 var(--ey-16);font-size:var(--ey-s13);line-height:var(--ey-lh-text);color:var(--ey-ink)}
.es-gate form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:var(--ey-8);align-items:end;max-width:640px}
.es-gate label{display:flex;flex-direction:column;gap:var(--ey-8);font-size:var(--ey-s13);letter-spacing:var(--ey-ls-label);text-transform:uppercase;color:var(--ey-grey-1)}
.es-gate input{width:100%;min-width:0;padding:var(--ey-8) var(--ey-16);font-family:inherit;font-size:var(--ey-s15);line-height:var(--ey-lh-text);letter-spacing:0;text-transform:none;color:var(--ey-ink);background:color-mix(in srgb,var(--ey-bg) 70%,transparent);border:var(--ey-line) solid var(--ey-line-field);border-radius:0;outline:none;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.es-gate input:focus{border-color:var(--ey-ink)}
.es-gate-steps{max-width:520px;margin:0;padding:0;list-style:none;counter-reset:s}
.es-gate-steps li{counter-increment:s;display:grid;grid-template-columns:28px minmax(0,1fr);gap:0 var(--ey-8);padding:var(--ey-8) 0;font-size:var(--ey-s13);line-height:var(--ey-lh-text);color:var(--ey-ink);border-top:var(--ey-line) solid color-mix(in srgb,var(--ey-ink) 18%,transparent)}
.es-gate-steps li:first-child{border-top:0}
.es-gate-steps li:last-child{padding-bottom:0} /* l'ultima riga dell'elenco finisce sul bordo del blocco, alla riga dei campi accanto */
/* il numero del passo da solo, come nei passi di un libro: quadrati e numeri, mai cerchi (Marco, 28/10/2026). Nel colore
   del testo e non grigio: sopra la foto, in scuro, il grigio spariva */
.es-gate-steps li::before{content:counter(s);grid-row:span 2;font-size:var(--ey-s13);line-height:var(--ey-lh-text);color:var(--ey-ink)}
.es-gate-steps b{display:block;font-size:var(--ey-s15);font-weight:var(--ey-w-medium);color:var(--ey-ink)}
@media (min-width:821px){
 /* ogni porta ha il suo testo appoggiato in fondo, tutto unito: titolo, frase e campi senza vuoti in mezzo, e le due porte
    finiscono sulla stessa riga (Marco, 28/10/2026, pagina della password: «Choose your password deve stare piu' giu',
    attaccato ai campi»; allineare i titoli lasciava un vuoto fra la frase e i campi) */
 .es-gates{flex:1 0 auto;min-height:560px;row-gap:0;grid-template-rows:minmax(0,1fr) auto}
 .es-gate{display:grid;grid-row:span 2;grid-template-rows:subgrid}
 .es-gate-tx{position:relative;grid-row:2;align-self:end;display:flex;flex-direction:column;align-items:flex-start;left:auto;right:auto;bottom:auto;margin:0 var(--ey-24) var(--ey-24)}
 .es-gate-tx :is(h2,b){line-height:var(--ey-lh-big);margin:0 0 var(--ey-16)}
 .es-gate-tx form{align-self:stretch}
 /* la pagina d'accesso, due porte fatte uguali: titolo, frase, messaggio, campi e aiuto sulle stesse righe */
 .es-gates:has(>a.es-gate){grid-template-rows:minmax(0,1fr) repeat(5,auto)}
 .es-gates:has(>a.es-gate)>.es-gate{grid-row:span 6}
 .es-gates:has(>a.es-gate) .es-gate-tx{grid-row:2/span 5;display:grid;grid-template-rows:subgrid;row-gap:0}
 .es-gates:has(>a.es-gate) .es-gate-tx>:is(h2,b){grid-row:1}
 .es-gates:has(>a.es-gate) .es-gate-tx>.es-gate-p{grid-row:2}
 .es-gates:has(>a.es-gate) .es-gate-tx>:is(form,.es-btn){grid-row:4;align-self:end}
 .es-gates:has(>a.es-gate) .es-gate-tx>.es-btn{justify-self:start}
 .es-gates:has(>a.es-gate) .es-gate-tx>:is(.es-ok,.es-err){grid-row:3;margin-top:0}   /* nella griglia i margini non si fondono: lo spazio sopra lo da' gia' il testo */
 .es-gates:has(>a.es-gate) .es-gate-tx>.es-help{grid-row:5}
}
@media (max-width:820px){
 .es-gates{grid-template-columns:1fr;min-height:0}
 .es-gate{min-height:400px}
 .es-gate-form{display:flex;flex-direction:column;min-height:0}
 .es-gate-form .es-gate-im{position:relative;aspect-ratio:16/10;height:auto}
 .es-gate-form .es-gate-im::after{background:linear-gradient(180deg,transparent 60%,var(--ey-bg))}
 .es-gate-form .es-gate-tx{position:relative;left:auto;right:auto;bottom:auto;padding:0 var(--ey-16) var(--ey-24);margin-top:calc(var(--ey-32) * -1)}
 .es-gate-form:not(:has(.es-gate-im)) .es-gate-tx{margin-top:0;padding-top:var(--ey-24)}
 .es-gate form{grid-template-columns:minmax(0,1fr)}
 .es-gate form .es-btn{width:100%}
 .es-cred{left:var(--ey-16);right:var(--ey-16)}
 .es-gate-tx{left:var(--ey-16);right:var(--ey-16);bottom:var(--ey-24)}
}

/* --- Messaggi: una forma sola per errore e conferma; la riga d'aiuto delle porte --- */
.es-err,.es-ok{max-width:640px;margin:0 0 var(--ey-16);padding:var(--ey-8) var(--ey-16);font-size:var(--ey-s13);background:var(--ey-line-row);border-radius:0}
/* Sotto un bottone o un testo il messaggio prende spazio anche sopra (04/11/2026, Marco: «i messaggi di errore sono
   sempre attaccati ai bottoni»): nato per stare in cima, aveva margine solo sotto. Nel flusso normale i due margini si
   fondono, quindi dopo un paragrafo che ha gia' 16 sotto lo spazio resta 16 */
*+:is(.es-err,.es-ok){margin-top:var(--ey-16)}
/* Primo pezzo sotto le schede: la regola «niente filo e niente spazio sopra» e' per i capitoli, a un messaggio toglieva
   lo spazio dentro il riquadro e il testo restava in alto (05/11/2026, Marco: «sembra piu' verso l'alto») */
.es-tabs~.es-app>:is(.es-err,.es-ok):first-child,.es-tabs~.es-app>:empty:first-child+:is(.es-err,.es-ok){padding-top:var(--ey-8)}
.es-err{color:var(--ey-error)}
.es-ok{color:var(--ey-ink)}
.es-help{margin:var(--ey-8) 0 0;font-size:var(--ey-s13);color:var(--ey-grey-1);overflow-wrap:anywhere}
.es-help a{font-weight:var(--ey-w-medium);color:var(--ey-grey-1);text-decoration:none}
.es-help a:hover{color:var(--ey-ink)}

/* ======================================================================================================
   IL SITO (cantiere del sito, dal 24/10/2026): i pezzi della cornice del sito nuovo, che il tema «Eyeshot» compone.
   I blocchi di WordPress e WooCommerce che stanno dentro questi pezzi (menu, logo, conto, carrello) li veste il tema,
   un foglio per blocco (tema-eyeshot/assets/blocchi/). Le decisioni di Marco con la data: docs/stile-eyeshot.md.
   ====================================================================================================== */

/* --- Testata del sito: la barra dei portali (Marco sceglie B, 24/10/2026). Logo a sinistra, le sezioni in fila, a
   destra gli strumenti in parole, Search, Log in (Account da collegati) e Cart col numero accanto se c'e' qualcosa (Marco,
   03/11/2026, «tutto in parole»: l'omino del conto sembrava da sito vecchio, e A24 nel negozio scrive Log in e Cart).
   Fra le sezioni e gli strumenti lo spazio doppio (--ey-testata-stacco, che cala fino a 782 perche' la riga ci stia), cosi' si
   leggono come due gruppi; fra le parole lo spazio delle voci.
   Alta 64, niente filo sotto (25/10/2026), margini del sito. Sotto i 782 le sezioni
   non ci stanno: si aprono dal segno del menu, ultimo a destra (Marco: «sull'iPhone il menu lungo che va a scomparsa
   dietro al logo non funziona»). Le voci e il pannello del menu li veste il tema (core--navigation.css).
   Trasparente sempre, come A24 (Marco, 25/10/2026: «il fondo bianco e' vecchio stile; il carattere cambia bianco o nero,
   dipende dal fondo»): ogni pezzo e' nero sul chiaro e bianco sullo scuro, ciascuno secondo cio' che ha sotto (es-su-scuro,
   lo mette assets/js/testata.js del tema guardando la foto o il fondo sotto quel pezzo; i colori dello scuro: foglio unico).
   Sopra la foto d'apertura e' fissa (eyeshot-has-hero la mette eyeshot-theme-overrides.js). Il logo lo gira il tema. --- */
.es-sitebar{display:flex;align-items:center;gap:0;min-height:var(--ey-testata-h);margin:0;padding:0 var(--ey-margin-bordo);color:var(--ey-ink);background:none}
.es-sitebar>*{margin:0}
/* fra il logo e le sezioni lo spazio che resta (margin-left:auto, a 782 da collegati circa 24); fra le sezioni e gli strumenti 24
   piu' lo stacco */
.es-sitebar-nav{margin-left:auto;margin-right:calc(var(--ey-24) + var(--ey-testata-stacco))}
.es-sitebar-tools{display:flex;align-items:center;gap:var(--ey-24)}
.es-sitebar-tools>*{margin:0}
/* le parole degli strumenti come le voci del menu (core--navigation.css del tema): la ricerca (eyeshot/search-trigger), il
   conto e il carrello di WooCommerce, che il tema spoglia dei loro segni (woocommerce--customer-account.css, --mini-cart.css) */
.es-sitebar :is(.es-sitebar-btn,.wc-block-customer-account__link,.wc-block-mini-cart__button){display:inline-flex;align-items:center;gap:var(--ey-8);margin:0;padding:var(--ey-8) 0;background:none;border:0;color:inherit;font-family:var(--ey-font-text);font-size:var(--ey-s13);font-weight:var(--ey-w-text);line-height:var(--ey-lh-text);letter-spacing:var(--ey-ls-label);text-transform:uppercase;text-decoration:none;white-space:nowrap;cursor:pointer}
.es-sitebar :is(.es-sitebar-btn,.wc-block-customer-account__link,.wc-block-mini-cart__button):hover{opacity:.7}
@media (max-width:781px){.es-sitebar-nav{order:3;margin-left:0}.es-sitebar-tools{margin-left:auto}.es-sitebar{gap:var(--ey-8)}}
.eyeshot-has-hero header:has(>.es-sitebar){position:fixed;top:var(--wp-admin--admin-bar--height,0px);left:0;right:0;z-index:100}
/* la ricerca aperta fa scendere la pagina spostandola (sito.css del tema); la pagina spostata diventa il riferimento della testata
   fissa, che contava gia' dal suo bordo alto e aggiungeva di nuovo la barra di WordPress: da collegati testata e velo stavano 32
   piu' in basso della foto, con una striscia chiara sopra (Marco, 03/11/2026). Finche' la pagina e' spostata, aperta e mentre risale
   (eyeshot-search-chiude, eyeshot-search.js), la testata conta da zero */
.eyeshot-has-hero:is(.eyeshot-search-open,.eyeshot-search-chiude) header:has(>.es-sitebar){top:0}
/* La testata che si ritira, come A24 (Marco, 25/10/2026: «l'effetto a scomparsa del menu che ha A24, straordinario»).
   Resta in cima mentre si scorre; scendendo logo, voci e segni salgono di 16 e svaniscono uno dopo l'altro, da sinistra,
   il logo per ultimo; risalendo tornano a cascata, sempre senza fondo.
   Lo stato lo mette assets/js/testata.js del tema (is-via sulla barra, l'ordine --i su ogni pezzo, data-es-i). */
header:has(>.es-sitebar){position:sticky;top:var(--wp-admin--admin-bar--height,0px);z-index:100}
.es-sitebar [data-es-i]{color:var(--ey-ink);transition:transform .15s cubic-bezier(.215,.61,.355,1) calc(.05s + var(--i,0) * .015s),opacity .15s cubic-bezier(.215,.61,.355,1) calc(.05s + var(--i,0) * .015s),color .3s cubic-bezier(.215,.61,.355,1)}
/* ritirata, la testata lascia passare i clic anche col suo contenitore: prima la barra no, ma l'header invisibile restava sopra
   i 64 pixel in alto della pagina (30/10/2026: le frecce della serie grande, salita in cima, chiudevano invece di sfogliare) */
header:has(>.es-sitebar.is-via),.es-sitebar.is-via{pointer-events:none}
/* il velo sotto il menu bianco (Marco, 26/10/2026: «sul menu in alto lo sfondo ombreggiato a sfumare, come sul sito di oggi, cosi'
   risalta il testo del menu, qualunque sfondo sia»): ogni volta che la testata e' bianca su una foto (testata.js mette es-velo),
   in cima alla pagina o piu' giu', sotto ha l'inchiostro che svanisce; quando si ritira se ne va con lei */
.es-sitebar::before{content:"";position:absolute;inset:0 0 auto;z-index:-1;height:var(--ey-velo-alto-h);background-image:var(--ey-velo-alto);opacity:0;pointer-events:none;transition:opacity .4s cubic-bezier(.65,0,.35,1)}
.es-sitebar.es-velo:not(.is-via)::before{opacity:1}
.es-sitebar.is-via [data-es-i]{opacity:0;transform:translateY(calc(var(--ey-16) * -1));transition-timing-function:cubic-bezier(.55,.055,.675,.19);transition-delay:calc(var(--i,0) * .015s)}
/* Il carrello sta nella testata come le altre parole e si ritira con lei (Marco, 03/11/2026). Prima, dal 25/10/2026, era
   il carrello del negozio di A24: lasciata la cima scendeva in verticale nel margine destro. Tolto perche' su Safari la barra
   di scorrimento (15) copre la striscia del margine (24) e il carrello non si cliccava; per tenerlo serviva una corsia a
   destra piu' larga del margine sinistro, e Marco vuole i due margini uguali. */
@media (prefers-reduced-motion:reduce){.es-sitebar,.es-sitebar::before,.es-sitebar [data-es-i]{transition:none}}

/* --- Ricerca alla A24 (Marco, 11/10/2026): pannello scuro in alto, alto quanto --ey-search-h; la pagina scende per
   lasciargli posto (lo dice il tema), senza scurire niente. Campo 48 a sinistra con un filo da bordo a bordo, freccia per
   cercare a destra, Close in alto a destra. Lo apre eyeshot-search.js (classe is-open). --- */
.es-search{position:absolute;top:0;left:0;right:0;z-index:1000;box-sizing:border-box;height:var(--ey-search-h);display:flex;flex-direction:column;justify-content:center;padding:var(--ey-120) var(--ey-margin-bordo) var(--ey-72);background:var(--ey-d-bg);color:var(--ey-d-ink);visibility:hidden;transform:translateY(-100%);transition:transform .45s cubic-bezier(.65,0,.35,1),visibility 0s linear .45s}
.es-search.is-open{visibility:visible;transform:none;transition:transform .45s cubic-bezier(.65,0,.35,1),visibility 0s}
.es-search-close{position:absolute;top:var(--ey-24);right:var(--ey-margin-bordo);display:inline-flex;align-items:center;gap:var(--ey-8);margin:0;padding:var(--ey-8) 0;background:none;border:0;color:inherit;font-size:var(--ey-s13);font-weight:var(--ey-w-label);line-height:var(--ey-lh-title);letter-spacing:var(--ey-ls-label);text-transform:uppercase;cursor:pointer}
.es-search-close:hover,.es-search-go:hover{opacity:.7}
.es-search-x{width:var(--ey-24);height:var(--ey-24)}
.es-search-form{width:100%;margin:0;padding:0}
.es-search-label{position:absolute;width:var(--ey-line);height:var(--ey-line);margin:calc(var(--ey-line) * -1);padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.es-search-row{display:flex;align-items:flex-end;gap:var(--ey-24);padding-bottom:var(--ey-16);border-bottom:var(--ey-line) solid currentColor}
.es-search-input{flex:1;min-width:0;margin:0;padding:0;background:none;border:0;border-radius:0;outline:0;color:inherit;caret-color:currentColor;font-family:var(--ey-font-display);font-size:var(--ey-s48);font-weight:var(--ey-w-title);line-height:var(--ey-lh-title);letter-spacing:var(--ey-ls-l);appearance:none}
.es-search-input::placeholder{color:var(--ey-d-grey-2)}
.es-search-go{flex:none;margin:0;padding:0;background:none;border:0;color:inherit;line-height:0;cursor:pointer}
.es-search-hint{display:none}
@media (max-width:781px){
 .es-search{padding:var(--ey-72) var(--ey-margin-bordo) var(--ey-48)}
 .es-search-input{font-size:var(--ey-s48-phone)}
 .es-search-close{top:var(--ey-16)}
}
@media (prefers-reduced-motion:reduce){.es-search,.es-search.is-open{transition:none}}

/* --- Il piede del sito (Marco, 29/10/2026: la versione A2 della tavola, «si', installala»; Piede::html, includes/class-piede.php).
   Come il piede di a24films.com su fondo bianco, a blocchi (Marco sul primo: «a destra in fondo e' vuoto, e' tutto molto
   lineare... mi piace piu' come fa A24, piu' strutturato»). Comincia con un filo dentro i margini, 48 sotto (25/10/2026).
   In alto le voci in quattro colonne uguali (pagine, aiuto, podcast, social), a 20 (a 30 «troppo grandi»), strette e alte
   quanto si tocca col dito. Un filo, poi due colonne uguali riga per riga (etichetta, titolo a 48, la riga piccola attaccata
   sotto, l'azione): l'abbonamento e la newsletter, col bottone e il campo alla stessa altezza («tutto in linea»). In fondo i
   testi piccoli e grigi sotto le quattro colonne: il logo e «Design and made in Italy» («essenziale») aprono, le voci legali,
   l'indirizzo e la partita IVA, il copyright chiude («inverti»); la mail no (sta nella FAQ e nei Terms). Le voci piccole al
   passo delle righe dei dati, da toccare su 24. I fili verticali di A24 no (regola del 26/10). Al telefono una colonna.
   Sui margini del contenuto, come A24 (Marco: «il menu nel piede lo tratta come il contenuto della pagina... altrimenti sotto si
   allarga di nuovo tutto»): sugli schermi grandi resta entro 1744 con le schede; al bordo solo testata e foto grandi.
   Prima: sei colonne coi titoletti grigi e le voci a 13 maiuscole (14-28/10), poi le voci a 30 in tre zone (29/10). --- */
.es-foot{margin:0 var(--ey-margin);padding:var(--ey-48) 0;background:var(--ey-bg);color:var(--ey-ink);border-top:var(--ey-line) solid var(--ey-line-section)}
.es-foot ul{list-style:none;margin:0;padding:0}
.es-foot li{margin:0;padding:0}
.es-foot a{color:var(--ey-ink);text-decoration:none;white-space:nowrap}
.es-foot a:not(.es-btn):is(:hover,:focus-visible:where(:root:not([data-puntatore]) *)){text-decoration:underline;text-underline-offset:.3em} /* i link di testo; il bottone dell'abbonamento ha il suo passaggio del mouse, senza sottolineato (Marco, 30/10/2026) */
.es-foot-top,.es-foot-base{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--ey-24)}
.es-foot-top{padding-bottom:var(--ey-48)}
.es-foot-z :is(li,a){font-family:var(--ey-font-text);font-size:var(--ey-s20);font-weight:var(--ey-w-text);line-height:var(--ey-lh-lead)}
/* le due colonne di mezzo: quattro righe riempite colonna dopo colonna, ogni colonna larga due quarti */
.es-foot-mid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(4,auto);grid-auto-flow:column;column-gap:var(--ey-24);align-items:end;padding:var(--ey-48) 0;border-top:var(--ey-line) solid var(--ey-line-section)}
.es-foot-mid .es-label{margin:0 0 var(--ey-16)}
.es-foot-mid h2{margin:0}
.es-foot-mid h2+p{align-self:start;margin:var(--ey-8) 0 var(--ey-24);font-size:var(--ey-s13);line-height:var(--ey-lh-text);color:var(--ey-grey-1)}
.es-foot-base{padding-top:var(--ey-16);border-top:var(--ey-line) solid var(--ey-line-section)}
.es-foot .es-foot-base :is(p,li,a){margin:0;font-size:var(--ey-s-label);font-weight:var(--ey-w-label);line-height:var(--ey-lh-text);letter-spacing:var(--ey-ls-etichetta);text-transform:uppercase;color:var(--ey-grey-1)}
.es-foot .es-foot-base a:is(:hover,:focus-visible:where(:root:not([data-puntatore]) *)){color:var(--ey-ink)}
/* le voci piccole restano strette alla vista, ma si toccano su 24 (WCAG 2.5.8): l'area invisibile sopra e sotto la scritta */
.es-foot :is(.es-foot-base,.es-foot-z) a{position:relative}
.es-foot :is(.es-foot-base,.es-foot-z) a::after{content:"";position:absolute;inset:calc(var(--ey-8) * -.75) 0} /* come gli altri comandi piccoli (es-link): 6 sopra e 6 sotto; anche le voci in alto, alte 20 sull'iPad */
.es-foot-logo{display:block;width:var(--ey-120);height:auto;margin:0 0 var(--ey-8)}
:root:not([data-tone="dark"]) .es-foot-logo{filter:invert(1)}
@media (max-width:781px){ /* al telefono: le voci su due colonne, i due blocchi uno sotto l'altro, i testi piccoli in una colonna */
 .es-foot-top{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--ey-32)}
 .es-foot-mid{grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row}
 .es-foot-mid>div+.es-label{margin-top:var(--ey-48)}
 .es-foot-mid h2{font-size:var(--ey-s48-phone)}
 .es-foot-base{grid-template-columns:1fr;row-gap:var(--ey-24)}
 .es-foot .es-foot-base li+li{margin-top:var(--ey-16)} /* le voci legali una sotto l'altra: le aree da toccare (6 sopra e 6 sotto) non si sovrappongono (31/10/2026) */
}
/* il menu del telefono in testata (Menu, includes/class-menu.php): il segno a due righe dove stava quello di WordPress, solo
   dove il menu del computer non sta in fila; il pannello sopra tutta la pagina (is-fisso), che entra in un attimo dall'alto e
   finisce al bordo basso (alto quanto lo spazio sotto la barra di WordPress, non quanto lo schermo: sforava di 46) */
.es-menu-btn{display:none;align-items:center;margin:0;padding:var(--ey-8);background:none;border:0;color:inherit;cursor:pointer}
.es-menu-btn:hover{opacity:.7}
.es-menu-p[hidden]{display:none}
.es-menu-p.is-fisso{--es-menu-h:0;position:fixed;inset:var(--wp-admin--admin-bar--height,0px) 0 0;z-index:1001;overflow-y:auto;opacity:0;transform:translateY(calc(var(--ey-16) * -1));transition:opacity .3s cubic-bezier(.65,0,.35,1),transform .3s cubic-bezier(.65,0,.35,1)}
.es-menu-p.is-fisso.is-on{opacity:1;transform:none}
.es-menu-p-top>a{display:flex;align-items:center;min-height:var(--ey-24)}
.es-menu-p-chiudi{display:inline-flex;margin:0;padding:var(--ey-8);background:none;border:0;color:inherit;cursor:pointer}
.es-menu-aperto,.es-menu-aperto body,html:has(>.eyeshot-search-open),.eyeshot-search-open{overflow:hidden} /* la pagina sotto non scorre, col menu del telefono e con la ricerca aperti (eyeshot-search.js; Marco, 03/11/2026, come lo shop di A24: prima la pagina scorreva, il pannello usciva dallo schermo restando aperto e la testata si perdeva) */
@media (max-width:781px){.es-menu-btn{display:inline-flex}}
@media (prefers-reduced-motion:reduce){.es-menu-p.is-fisso{transition:none}}
/* il menu del telefono aperto: un pannello bianco pieno (oggi un velo chiaro trasparente su meta' schermo, sopra la foto); in
   alto logo e X dove sta l'hamburger, le quattro voci a 36 una sotto l'altra, sotto il filo le voci del piede a 20, in fondo
   conto, ricerca e carrello come etichette. Sulla tavola dentro una cornice larga come un telefono (es-tavola-tel). */
.es-menu-p{display:flex;flex-direction:column;min-height:var(--es-menu-h,100%);padding:0 var(--ey-margin-bordo) var(--ey-24);background:var(--ey-bg);color:var(--ey-ink)}
.es-menu-p-top{display:flex;justify-content:space-between;align-items:center;min-height:var(--ey-testata-h)}
.es-menu-p-logo{display:block;width:auto;height:var(--ey-logo-h)} /* come il logo della testata */
:root:not([data-tone="dark"]) .es-menu-p-logo{filter:invert(1)}
.es-menu-p-x{position:relative;width:var(--ey-24);height:var(--ey-24)}
.es-menu-p-x::before,.es-menu-p-x::after{content:"";position:absolute;top:50%;left:0;width:100%;height:var(--ey-line-active);background:currentColor;transform:rotate(var(--es-x,45deg))}
.es-menu-p-x::after{--es-x:-45deg}
:where(.es-menu-p ul){list-style:none;margin:0;padding:0} /* senza peso: gli spazi delle liste del pannello sotto la valgono */
.es-menu-p a{color:inherit;text-decoration:none}
.es-menu-p-main{margin-top:var(--ey-32)}
.es-menu-p-main a{display:block;padding:var(--ey-8) 0;font-family:var(--ey-font-display);font-size:var(--ey-s48-phone);font-weight:var(--ey-w-title);line-height:var(--ey-lh-title);letter-spacing:var(--ey-ls-l)}
.es-menu-p-sec{margin-top:var(--ey-32);padding-top:var(--ey-24);border-top:var(--ey-line) solid var(--ey-line-section)}
.es-menu-p-sec a{display:block;padding:var(--ey-8) 0;font-size:var(--ey-s20);line-height:var(--ey-lh-title)}
.es-menu-p-tools{display:flex;gap:var(--ey-24);margin-top:auto;padding-top:var(--ey-48)}
.es-menu-p-tools a{display:block;padding:var(--ey-8) 0;font-size:var(--ey-s-label);font-weight:var(--ey-w-label);letter-spacing:var(--ey-ls-etichetta);text-transform:uppercase}
.es-tavola-tel{width:min(100%,390px);height:780px;margin:var(--ey-16) 0 0;overflow:hidden;border:var(--ey-line) solid var(--ey-line-section)}

/* --- Newsletter (12/10/2026): il nostro modulo al posto di quello di EmailOctopus. Campo e bottone in fila, il bottone
   e' es-btn; sotto il messaggio 13 grigio. Nel piede prende i colori dello scuro da solo. --- */
.es-news{margin:var(--ey-16) 0 0;max-width:var(--ey-article-col)}
.es-foot .es-news{width:100%;margin:0;max-width:none}
.es-news-row{display:flex;gap:var(--ey-8);align-items:stretch}
.es-news-email{flex:1 1 auto;min-width:0;margin:0;padding:var(--ey-btn-pad);background:transparent;border:var(--ey-line) solid var(--ey-line-section);border-radius:0;box-shadow:none;outline:0;color:var(--ey-ink);font-family:var(--ey-font-text);font-size:var(--ey-btn-size);line-height:var(--ey-btn-lh);appearance:none}
.es-news-email::placeholder{color:var(--ey-grey-1)}
.es-news-email:focus{border-color:var(--ey-ink)}
.es-news-send{flex:0 0 auto}
.es-news-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.es-news-msg{margin:var(--ey-8) 0 0;font-size:var(--ey-s13);color:var(--ey-grey-1)}
.es-news-msg:empty{display:none}
.es-news-msg.is-ok{font-size:var(--ey-s15);color:var(--ey-ink)}

/* --- Briciole (Marco, 13/10/2026): 13, link in inchiostro sottolineati, pagina attuale e barre in grigio 1 --- */
.es-crumbs{margin:0;padding:0;font-size:var(--ey-s13);line-height:var(--ey-lh-text);color:var(--ey-grey-1)}
.es-crumbs a{color:var(--ey-ink);text-decoration:underline;text-underline-offset:.2em}
.es-crumbs a:hover{text-decoration:none}
/* al telefono le briciole lunghe vanno a capo: ogni collegamento alto 24, perche' si tocchi col dito senza prendere quello sotto (24/10/2026, articoli delle serie) */
@media (max-width:820px),(pointer:coarse){.es-crumbs a{display:inline-block;min-height:var(--ey-24)}}
/* --- I blocchi del sito (proposta del 25/10/2026, tavola [eyeshot_tavola_blocchi]; studio in docs/cantiere-sito/12-studio-a24.md).
   Marco: «tipologie di blocco come fa A24; poi adattiamo il contenuto al blocco». Coi nostri caratteri, colori e scala; da
   A24 solo il ragionamento. Solo nel sito: classi nuove (es-blk...), i portali non le usano. Regole per tutti: il filo solo
   sopra, mai sotto (il blocco dopo porta il suo); sulla riga del filo due cose, a sinistra cos'e', a destra dove porta o il
   titolo (es-blk-bar); nelle schede il nome a sinistra e il dato a destra (es-tile-nd); dati come il piede (es-dati). --- */
/* gli spazi misurati su A24 (Marco, 25/10/2026: «troppo spazio tra il titolo e il testo sotto, e verso la foto... vedi gli spazi
   di A24»): dal filo alla riga 8 (A24 9-13), dalla riga al contenuto 24 (A24 28), dalla foto al testo 8 (A24 4-12), dalla
   foto ai dati 16 (A24 18), fra i paragrafi 16, fra i blocchi la sezione (A24 88-106). Solo nei blocchi del sito. */
.es-blk{margin:var(--ey-section) 0 0;padding:var(--ey-8) 0 0;border-top:var(--ey-line) solid var(--ey-line-section)}
/* l'ultimo blocco non aggiunge spazio sotto: prima del piede lo da' gia' es-main (120), uguale in ogni pagina. Con la sezione
   in piu' si sommavano 96 + 120 e sotto l'ultimo blocco restava un vuoto bianco (Marco, 31/10/2026, home sull'iPad 11) */
/* ogni punto della pagina a cui porta un indice o un collegamento (le lettere di Featured Photographers, i blocchi delle note, i
   temi delle FAQ, i capitoli delle pagine di testo): arrivandoci il titolo resta sotto la testata, che risalendo torna
   (29/10/2026: «80 to 99» finiva sotto il logo, e i temi delle FAQ arrivando da /contact/) */
main [id]{scroll-margin-top:calc(var(--wp-admin--admin-bar--height,0px) + var(--ey-120))}
.es-blk-bar{display:flex;justify-content:space-between;align-items:baseline;gap:var(--ey-8) var(--ey-24);flex-wrap:wrap;margin:0 0 var(--ey-24)}
.es-blk-bar>*{margin:0}
/* dentro le griglie dei blocchi niente spazio automatico fra i blocchi di WordPress (16 sopra ogni blocco che ne segue un altro):
   spingeva in basso la seconda e la terza colonna, a scalini (Marco, 25/10/2026, sulla About) */
:is(.es-blk-tre,.es-blk-due,.es-blk-txt,.es-dati,.es-blk-grid,.es-blk-bar)>*{margin-block:0}
.es-blk-bar h2{margin:0}
.es-blk-bar h2.es-blk-big{text-align:right}
.es-blk-go{font-size:var(--ey-s13);line-height:var(--ey-lh-text);letter-spacing:var(--ey-ls-label);text-transform:uppercase;color:var(--ey-ink);text-decoration:none;white-space:nowrap}
.es-blk-go:hover{text-decoration:underline;text-underline-offset:.2em}
/* scritto nell'editor e' un paragrafo col collegamento dentro */
.es-blk-go a{color:inherit;text-decoration:none;letter-spacing:var(--ey-ls-label);text-transform:uppercase}
.es-blk-go a:hover{text-decoration:underline;text-underline-offset:.2em}
/* A · la foto intera (mai tagliata), sotto la riga di dati a 24, vicina come in A24 (Marco, 25/10/2026: «troppa distanza tra la
   fotografia e i testi sotto»); niente credito scritto sotto la foto */
.es-blk-vt{margin:0}
.es-blk-vt img{display:block;width:100%;height:auto}
.es-blk-vt>a{display:block} /* la copertina del correlato porta al prodotto (Rosa::correlato, 31/10/2026) */
/* la vetrina al computer: la foto intera nei due terzi di sinistra (8 colonne), i dati nel terzo di destra appoggiati sul bordo
   basso della foto, il bottone sotto (Marco, 25/10/2026: «testi ai lati delle immagini»; a tutta larghezza la foto 3:2 era alta
   916 su uno schermo di 956 e i dati finivano nello schermo dopo). Foto e dati stanno in uno schermo, sulla griglia a 12. */
/* La stessa vetrina apre la pagina di un libro (es-vetrina, 27/10/2026, tavola della pagina del libro): la copertina nei due
   terzi, accanto i dati, il prezzo e la barra per comprare, senza il filo di un blocco (sta sotto il titolo, come in A24) */
@media (min-width:782px){
 :is(.es-blk,.es-vetrina):has(>.es-blk-vt){display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--ey-24)}
 :is(.es-blk,.es-vetrina):has(>.es-blk-vt)>*{grid-column:1 / -1}
 :is(.es-blk,.es-vetrina)>.es-blk-vt{grid-column:1 / span 8}
 :is(.es-blk,.es-vetrina)>.es-blk-vt+.es-dati{grid-column:9 / -1;align-self:end;grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--ey-24);margin-top:0}
 :is(.es-blk,.es-vetrina)>.es-blk-vt+.es-dati>:not(.es-dati-azione){grid-column:span 1}
 :is(.es-blk,.es-vetrina)>.es-blk-vt+.es-dati>.es-dati-azione{grid-column:1 / -1}
 .es-blk>.es-blk-vt+.es-corr-tx{grid-column:9 / span 3;align-self:end;margin-top:0} /* una colonna vuota verso il bordo, come A24 (Marco, 26/10/2026) */
}
/* nelle colonne tutte le foto nello stesso riquadro 3:2, intere e appoggiate in basso a sinistra: i titoli sotto stanno in riga */
.es-blk-tre .es-blk-vt{display:flex;align-items:flex-end;aspect-ratio:3/2}
.es-blk-tre .es-blk-vt img{width:auto;max-width:100%;max-height:100%}
.es-dati{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--ey-24);margin:var(--ey-48) 0 0;padding:0}
.es-blk-vt+.es-dati{margin-top:var(--ey-16)}
/* ogni dato stretto (2 colonne su 12, come A24), uno accanto all'altro da sinistra; l'azione sul bordo destro (4 colonne) */
/* ogni dato e' un gruppo con l'etichetta e il valore: scritto dal codice o nell'editor, la stessa forma */
.es-dati>:not(.es-dati-azione){grid-column:span 2;display:flex;flex-direction:column;gap:var(--ey-8);min-width:0;margin:0}
.es-dati>*>*{margin:0}
.es-dati>*>:not(.es-label){font-size:var(--ey-s20);line-height:var(--ey-lh-lead);color:var(--ey-ink)}
.es-dati-azione{grid-column:9 / -1;align-self:start}
/* una voce lunga (le fonti delle foto di Picturing the Past, 27/10/2026: fino a 14 archivi) prende mezza riga: in una colonna
   da due dodicesimi diventava una torre di dodici righe (Serie::dati la segna sopra i 40 caratteri) */
.es-dati>.es-dati-lungo:not(.es-dati-azione){grid-column:span 6} /* :not, per valere anche fra 900 e 1199 */
.es-dati-azione{margin:0}
.es-dati-azione :is(.es-btn,.wp-block-buttons,.wp-block-button,.wp-block-button__link){width:100%;margin:0}
/* dentro i due terzi del capitolo le colonne sono piu' strette: ogni dato 3 su 12 */
/* dentro i due terzi del capitolo: quattro colonne, ognuna larga come 2 su 12 della pagina, sugli stessi bordi della vetrina */
.es-blk-txt .es-dati{grid-template-columns:repeat(4,minmax(0,1fr))}
.es-blk-txt .es-dati>:not(.es-dati-azione){grid-column:span 1}
/* fra 900 e 1200 (iPad orizzontale, portatili piccoli) due colonne sono troppo strette: ogni dato 3, l'azione le ultime 3 */
@media (min-width:782px) and (max-width:1199px){.es-dati>:not(.es-dati-azione){grid-column:span 3}.es-dati-azione{grid-column:10 / -1}}
/* B e F · il titolo (o l'etichetta) in un terzo, il testo nei due terzi: la prima frase 20, poi 15; la frase grande 48 */
/* sulla griglia a 12 della pagina (non «un terzo e due terzi» misurati a parte, che spostavano la destra di 8): il titolo 4 colonne,
   il resto 8; cosi' cade sulle stesse linee delle tre colonne e dei dati */
.es-blk-txt{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--ey-24)}
.es-blk-txt>*{grid-column:span 8}
.es-blk-txt>:first-child{grid-column:1 / span 4}
.es-blk-txt>h2{margin:0}
.es-blk-txt>div>*{margin:0;max-width:var(--ey-measure)}
.es-blk-txt>div>*+*{margin-top:var(--ey-16)}
.es-blk-txt>div>.es-dati{max-width:none;margin-top:var(--ey-24)}
/* il testo dei blocchi di testo e' il testo di lettura del sito, a 20 come le pagine di testo (29/10/2026). Quando e' lungo (tre
   paragrafi o piu' dopo la frase) dal 1366 in su va su due colonne, la frase sopra tutte e due, invece di restare una colonna
   stretta con la meta' destra vuota (Marco: «mai colonna a meta' pagina con la destra vuota»; la Professional Review
   dell'Academy). Lo decide la forma del testo, non una classe scritta a mano dalla pagina: contano solo i paragrafi semplici, cosi'
   l'etichetta, chi scrive e la lettera della About (es-blk-citazione, larga come la colonna degli articoli) restano come sono */
.es-blk-txt>div>p:not([class]){font-size:var(--ey-s20);line-height:var(--ey-lh-lead)}
@media (min-width:1366px){
 .es-blk-txt>div:has(>p:not([class])+p:not([class])+p:not([class])){columns:2;column-gap:var(--ey-24)}
 .es-blk-txt>div:has(>p:not([class])+p:not([class])+p:not([class]))>*{max-width:none}
 .es-blk-txt>div:has(>p:not([class])+p:not([class])+p:not([class]))>.es-blk-frase{column-span:all;margin-bottom:var(--ey-24)}
}
.es-blk-txt>div>.es-blk-frase{max-width:none}
/* una lettera nel blocco (la About, 28/10/2026): le righe larghe come la colonna di lettura degli articoli, non 66 caratteri a 20
   (880 pixel); nel terzo di sinistra chi scrive, il nome a 20 come nelle tre verticali (es-blk-chi) e il ruolo come etichetta */
.es-blk-txt>div>.es-blk-citazione{max-width:var(--ey-article-col)}
/* la citazione (una frase lunga, firmata) a 20 in inchiostro: la frase grande 48 resta per le frasi brevi */
.es-blk-citazione{font-size:var(--ey-s20);line-height:var(--ey-lh-lead);color:var(--ey-ink)}
/* l'indice dei fotografi (Rosa::nomi, 28/10/2026): sotto la carrellata di ogni lettera tutti i suoi nomi nella grandezza delle
   didascalie, le foto restano la parte grande. Un nome per riga in colonne, come l'indice in fondo a un libro (Marco, 28/10: il
   paragrafo di seguito «sembra un elenco che va dall'inizio della pagina fino alla fine»): si scorre a occhio e il bianco fra le
   colonne fa respirare. Sei colonne sul computer, quattro sotto 1100, due al telefono */
.es-nomi-elenco{margin:var(--ey-32) 0 0;padding:0;list-style:none;columns:6;column-gap:var(--ey-24);font-size:var(--ey-s15);line-height:var(--ey-lh-text);color:var(--ey-grey-1)}
.es-nomi-elenco li{break-inside:avoid}
@media (max-width:1099px){.es-nomi-elenco{columns:4}}
/* al telefono, in due colonne, tutti i nomi facevano 12.800 pixel su 23.800 di pagina: si vedono i primi 20 di ogni lettera e
   il bottone sotto apre gli altri (eyeshot-rail.js). Sul computer stanno tutti, il bottone non c'e' */
.es-nomi-tutti{display:none}
@media (max-width:600px){
 .es-nomi-elenco{columns:2;column-gap:var(--ey-16)}
 .es-nomi-elenco:not(.es-aperto)>li:nth-child(n+21){display:none}
 .es-nomi-tutti{display:inline-block;margin-top:var(--ey-16)}
}
/* l'alfabeto in cima all'indice: le lettere grandi come le teste delle lettere (48) e distese su tutta la riga, l'indice si legge
   come un titolo e non come una fila di link a 13 (Marco, 28/10: «curare maggiormente esteticamente»). Al telefono nove per riga */
.es-az{display:flex;flex-wrap:wrap;justify-content:space-between;margin:var(--ey-32) 0 0}
.es-az a{color:var(--ey-ink);text-decoration:none;transition:color .2s ease-in-out}
.es-az a:hover,.es-az a:focus-visible:where(:root:not([data-puntatore]) *){color:var(--ey-grey-1)}
@media (max-width:600px){.es-az{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));row-gap:var(--ey-8);font-size:var(--ey-s30);line-height:var(--ey-lh-big);letter-spacing:var(--ey-ls-big)}}
/* i numeri delle note (Elenco::a_blocchi): cinque per riga al telefono, tre cifre a 30 non stanno in nove colonne (a sei «200» e «180» si toccavano) */
@media (max-width:600px){.es-az-n{grid-template-columns:repeat(5,minmax(0,1fr))}}
/* C · tre colonne, ognuna col suo filo (il filo del blocco si divide in tre, come A24) */
.es-blk.es-blk-split{padding-top:0;border-top:0}
.es-blk-tre{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--ey-24)}
.es-blk-tre>div{min-width:0;padding-top:var(--ey-8);border-top:var(--ey-line) solid var(--ey-line-section)}
.es-blk-tre .es-blk-bar{margin-bottom:var(--ey-16)}
/* sotto un titolo (blocco col suo filo) le colonne non hanno un filo loro: un filo solo per blocco */
.es-blk:not(.es-blk-split) .es-blk-tre>div{padding-top:0;border-top:0}

/* i collegamenti di una sezione: due colonne nei due terzi a destra del titolo (ogni colonna un terzo della pagina) */
.es-blk-due{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ey-24)}
.es-blk-due>*,.es-blk-txt>.es-blk-due>*{min-width:0;max-width:none;margin:0}
.es-blk-due>*>*{margin:0}
.es-blk-due p:not(.es-label,.es-blk-go){margin-top:var(--ey-8);font-size:var(--ey-s15);line-height:var(--ey-lh-text);color:var(--ey-grey-1)}
:is(.es-blk-tre,.es-blk-due) h3 a{color:inherit;text-decoration:none}
:is(.es-blk-tre,.es-blk-due) h3 a:hover{text-decoration:underline;text-underline-offset:.15em}
.es-blk-tre h3{margin:var(--ey-8) 0 0}
.es-blk-tre p:not(.es-label,.es-blk-go){margin:var(--ey-8) 0 0;font-size:var(--ey-s15);line-height:var(--ey-lh-text);color:var(--ey-grey-1)}
/* D ed E · la scheda: il nome a sinistra, il dato a destra in grigio, sulla stessa riga */
/* se non stanno su una riga il dato scende sotto, intero e al bordo destro; il nome non si stringe sotto la sua parola piu'
   lunga (revisione schermo del 31/10/2026: al telefono «Alexander» finiva scritto sopra «BEST OF EYESHOT ARCHIVE #19») */
.es-tile-nd{flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:var(--ey-8) var(--ey-16)}
.es-tile-nd>span:not(.es-label){flex:none;font-size:var(--ey-s15)}
/* il dato a destra (l'autore, il Paese, l'edizione) intero su una riga, al bordo destro della foto; a scendere e' il titolo
   (Marco, 29/10/2026, «In print»: «i nomi degli autori ... interi su un'unica riga e si allineano alla foto in basso a destra»;
   prima si restringeva e andava a capo, «KARIM / MOTTAGHI») */
.es-tile-nd>:first-child{flex:1 1 0;min-width:min-content} /* base 0: prima va a capo il nome, il dato scende solo se accanto non ci sta nemmeno la sua parola piu' lunga */
.es-tile-nd>.es-label{flex:none;margin-left:auto;white-space:nowrap;text-align:right}
/* il titolo accanto al nome, nella riga dei premi (Rosa::riga_premio): grande quanto il nome, tondo e grigio, va a capo sotto il
   nome se non ci sta; e' uno span, che le schede farebbero a 13 come le righe sotto il nome */
.es-tile-tx b>.es-tile-ti{font-size:inherit;line-height:inherit;font-weight:var(--ey-w-text);color:var(--ey-grey-1)}
.es-blk-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--ey-24);row-gap:var(--ey-48)}
.es-blk-grid .es-tile-im{aspect-ratio:var(--r,1.5)}
.es-blk .es-scroll{margin-bottom:0}
.es-blk .es-tile-tx{padding-top:var(--ey-8)}
/* la nota della tavola sopra ogni blocco (solo nella tavola) */
.es-blk-nota{margin:var(--ey-section) 0 0;font-size:var(--ey-s13);line-height:var(--ey-lh-text);color:var(--ey-grey-2)}
.es-blk-nota b{font-weight:var(--ey-w-medium);color:var(--ey-ink)}
.es-blk-nota+.es-blk{margin-top:var(--ey-16)}
.es-blk-nota-capo{margin-top:0}
@media (max-width:781px){
 .es-blk-txt,.es-blk-tre,.es-blk-due{grid-template-columns:minmax(0,1fr)}
 .es-blk-txt>*,.es-blk-txt>:first-child{grid-column:1 / -1}
 .es-blk-tre{row-gap:var(--ey-48)}
 .es-dati>:not(.es-dati-azione),.es-blk-txt .es-dati>:not(.es-dati-azione){grid-column:span 6}
 .es-dati>.es-dati-lungo:not(.es-dati-azione){grid-column:1 / -1}
 .es-dati-azione{grid-column:1 / -1}
 .es-blk-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .es-blk-frase{font-size:var(--ey-s30);line-height:var(--ey-lh-big);letter-spacing:var(--ey-ls-big)}
}
@media (max-width:600px){
 .es-blk-grid{grid-template-columns:minmax(0,1fr)}
 .es-blk-bar h2.es-blk-big{font-size:var(--ey-s30);line-height:var(--ey-lh-big);letter-spacing:var(--ey-ls-big)}
}

/* --- La rosa dei blocchi del sito (nata sulla tavola estetica il 25-26/10/2026, scelta tutta da Marco; i pezzi in
   includes/class-rosa.php, [eyeshot_rosa]; il catalogo in [eyeshot_tavola_estetica]). Marco
   sulla About coi blocchi: «non ha nulla a che vedere con A24, che ha personalita' e stile». Misurato sulla home di A24: la
   personalita' sta nei titoli d'apertura che riempiono la riga sopra foto a tutto schermo, nelle etichette piccole accanto a
   titoli enormi, nel ritmo che cambia a ogni sezione. Solo nel sito: i portali non usano queste classi. --- */
/* A · l'apertura: la foto a tutto schermo da bordo a bordo, alta al massimo lo schermo e mai piu' della foto (su un MacBook
   Air una 3:2 perde 24 pixel; sugli schermi stretti si vede intera); il velo in basso dove sta il titolo (quello della home);
   sotto la testata trasparente, che si fa bianca o nera da se' guardando la foto */
.es-ap{position:relative;display:block;height:min(var(--ey-schermo),calc(100vw / var(--r,1.5)));max-width:none;margin:0 calc(var(--ey-margin) * -1);overflow:hidden;color:var(--ey-d-ink)} /* max-width: WordPress da' a ogni pezzo della pagina la larghezza della colonna, la foto esce dai margini */
.es-ap>img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.es-ap::after{content:"";position:absolute;inset:auto 0 0;height:60%;background-image:var(--ey-velo-basso)}
/* sotto il titolo l'aria per le code delle lettere (g, p, y): con le parole corte il titolo arriva a 350 e la coda toccava il bordo */
/* --giu: lo spazio per una riga sotto il titolo (l'annuncio: chi ha fatto la foto e i titoli del giro), che alza titolo e riga sopra */
.es-ap>.es-fit{position:absolute;left:var(--ey-margin-bordo);right:var(--ey-margin-bordo);bottom:calc(var(--ey-24) + var(--ey-big-pad) * 2 + var(--giu,0px));z-index:1}
/* sopra il titolo: chi l'ha fatto, il credito editoriale, il bottone; alla distanza giusta da un titolo alto quanto --fit dice,
   su --righe righe (due per un titolo lungo di una serie, eyeshot-rosa.js) */
.es-ap-riga{position:absolute;left:var(--ey-margin-bordo);right:var(--ey-margin-bordo);bottom:calc(var(--ey-24) + var(--ey-s96) * var(--fit,2) * (var(--ey-lh-big) * var(--righe,1) + .14) + var(--ey-24) + var(--giu,0px));z-index:1;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:var(--ey-16) var(--ey-24);margin:0}
.es-ap-riga>*{margin:0}
.es-ap-riga .es-label{margin:0;color:inherit} /* sulla foto il colore della riga, bianco */
/* le due righe sottili attorno al titolo, per ogni apertura della rosa (Marco, 30/10/2026 sera: «non mi convince quel blocco di
   testo»): sopra, alla stessa altezza, l'etichetta (cosa si annuncia, l'autore) e il bottone; sotto, a destra, il credito (chi
   ha fatto la foto, o il credito editoriale), sulla linea dei titoli del giro. --giu alza titolo e riga sopra per fargli posto.
   Al telefono sotto la foto, in grigio. Prima sopra il titolo una frase a 15 col credito sotto e il bottone */
.es-ap:has(>.es-ap-cr){--giu:var(--ey-48)}
.es-ap:has(>.es-ap-cr)>.es-ap-riga{align-items:center}
.es-ap-cr{position:absolute;right:var(--ey-margin-bordo);bottom:calc(var(--ey-24) + var(--ey-8));z-index:1;margin:0}
.es-ap-cr>.es-label{margin:0;color:inherit}
@media (max-width:600px){.es-ap-cr{position:static;margin:var(--ey-8) var(--ey-margin-bordo) 0}.es-ap-cr>.es-label{color:var(--ey-grey-1)}}
.es-ap .es-btn{color:inherit;border-color:currentColor}
/* il titolo che riempie la riga: il 96 per --fit, che lo script calcola sulla larghezza (come A24) e scrive sull'apertura;
   una riga sola */
.es-fit{margin:0;font-family:var(--ey-font-display);font-weight:var(--ey-w-title);font-size:calc(var(--ey-s96) * var(--fit,2));line-height:var(--ey-lh-big);letter-spacing:var(--ey-ls-apertura);white-space:nowrap}
/* letter-spacing:inherit: la cornice azzera la spaziatura su ogni elemento (in cima, «niente lettere spaziate»), quindi la
   spaziatura del titolo va detta anche sulle lettere, se no resta 0 (visto il 27/10/2026: -.04 e -.06 a schermo erano uguali) */
/* padding-right: la spaziatura stretta toglie spazio anche dopo l'ultima lettera, che sporgeva dalla misura del titolo; lo
   script che riempie la riga misurava senza quel pezzo e la lettera finiva nel margine (Marco, 30/10/2026 sera, sulla Home:
   «la E e la S sembrano tagliati»; la «s» di «winners» 11 pixel oltre il margine). Lo spazio torna e la misura conta la lettera intera */
.es-fit>span{display:inline-block;font-family:inherit;letter-spacing:inherit;padding-right:calc(var(--ey-ls-apertura) * -1)}
/* un titolo lungo di una serie sulla foto: due righe equilibrate invece di una piccola (Marco, 29/10/2026; eyeshot-rosa.js) */
.es-ap>.es-fit.es-fit-due{white-space:normal;text-wrap:balance}
.es-ap>.es-fit.es-fit-due>span{display:inline}
/* al telefono la foto 3:2 e' bassa (260 a 390): la foto resta intera col titolo sopra, la riga va sotto, in inchiostro */
@media (max-width:600px){
 .es-ap{display:grid;grid-template-columns:minmax(0,1fr);height:auto;overflow:visible} /* la colonna non si allarga sul titolo in una riga */
 .es-ap>img,.es-ap::after,.es-ap>.es-fit{grid-area:1 / 1}
 .es-ap>img{position:static;height:auto;aspect-ratio:var(--r,1.5)}
 .es-ap::after{position:relative;align-self:end;height:60%}
 .es-ap>.es-fit{position:relative;inset:auto;align-self:end;margin:0 var(--ey-margin-bordo) calc(var(--ey-16) + var(--ey-big-pad) * 2)}
 .es-ap-riga{position:static;margin:var(--ey-16) var(--ey-margin-bordo) 0;color:var(--ey-ink)}
}
/* N · l'evento sulla foto: l'apertura (es-ap: foto intera da bordo a bordo, velo in basso) con un filo in alto e uno in basso
   in bianco; sotto il filo basso, sulle colonne, il titolo 96 (un terzo), i dati in due colonne (un terzo), il testo 20 e
   sotto il bottone col filo (un terzo). Un velo anche in cima, per la riga alta. Sotto 900 la foto intera e i dati sotto, in inchiostro */
/* il velo in cima alla foto, per i testi che le stanno sopra in alto: la riga alta dell'evento (N, non in cima alla pagina) e
   l'elenco dei titoli (A a giro). Sopra la foto (z-index 1: la foto viene dopo nella pagina e la copriva), sotto i testi. Il velo
   sotto il menu e' della testata (.es-sitebar.es-velo), non della foto. */
.es-ev:not(.es-ev-cima)::before,.es-giro>.es-ap::before{content:"";position:absolute;inset:0 0 auto;z-index:1;height:var(--ey-velo-alto-h);background-image:var(--ey-velo-alto);pointer-events:none}
.es-ev .es-label{color:inherit}
/* N in cima alla pagina (variante="cima", 26/10/2026): senza la riga alta, che sotto la testata le si sovrapponeva */
.es-ev-cima .es-ev-bar{display:none}
.es-ev-bar{position:absolute;top:var(--ey-24);left:var(--ey-margin-bordo);right:var(--ey-margin-bordo);z-index:1;display:flex;justify-content:space-between;align-items:baseline;gap:var(--ey-24);padding-top:var(--ey-8);border-top:var(--ey-line) solid currentColor}
.es-ev-bar>*,.es-ev-bar .es-blk-go{margin:0;color:inherit}
.es-ev-dt{position:absolute;left:var(--ey-margin-bordo);right:var(--ey-margin-bordo);bottom:var(--ey-48);z-index:1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--ey-24);padding-top:var(--ey-8);border-top:var(--ey-line) solid currentColor}
.es-ev-dt>*{margin:0}
.es-ev-t{grid-column:1 / span 4;grid-row:1 / span 2}
.es-ev-t>*{margin:0}
/* il titolo a 96 lo da' il pezzo, non il tipo di titolo (revisione del 30/10/2026, Marco: «From A to Z»): con h1 (About, Shop,
   Note, 50mm e le altre aperture in cima alla pagina) usciva a 48, con h2 (Home, edizioni) a 96 */
.es-ev-t :is(h1,h2){margin-top:var(--ey-16);padding-block:var(--ey-big-pad);text-wrap:balance} /* balance: righe bilanciate, mai una lettera sola sotto («From A to / Z») */
/* la colonna del titolo e' il suo contenitore: se la parola piu' lunga (--parola, Rosa::evento) non ci entra, il titolo cala
   (regola dei titoli a 96 in cima). Prima la scala del tablet si fermava a 56 mentre la colonna continuava a stringersi, e
   la parola si spezzava (Marco, 31/10/2026, sull'iPad 11: «Magazine» e sotto la «s») */
.es-ev-t{container-type:inline-size}
.es-ev-dl{grid-column:5 / span 4;grid-row:1 / span 2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ey-16) var(--ey-24);align-content:start} /* i dati in due colonne: in una sola, con quattro dati, l'ultimo usciva sotto la foto (Open Call 2025, 26/10/2026) */
/* etichetta e numero sono due righe della griglia comune: se un'etichetta va su due righe, i numeri della stessa riga restano
   allineati e l'etichetta corta sta in basso, sopra il suo numero (31/10/2026: a 820 «Single image finalists» abbassava il 47 di 15) */
.es-ev-dl>div{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:var(--ey-8)}
.es-ev-dl dt{align-self:end}
.es-ev-dl dd{margin:0;font-size:var(--ey-s20);line-height:var(--ey-lh-lead)}
.es-ev-tx{grid-column:9 / -1;font-size:var(--ey-s20);line-height:var(--ey-lh-lead)}
.es-ev-tx>*{margin:0}
.es-ev-tx>.es-label{margin-top:var(--ey-16)} /* il credito della foto d'apertura, sotto il testo */
.es-ev-dt>.es-btn{grid-column:9 / -1;grid-row:2;justify-self:start;align-self:start;margin-top:var(--ey-24);color:inherit;border-color:currentColor}
@media (max-width:781px){
 .es-ev{display:grid;grid-template-columns:minmax(0,1fr);height:auto;overflow:visible}
 .es-ev>img,.es-ev::before,.es-ev-bar{grid-area:1 / 1}
 .es-ev>img{position:static;height:auto;aspect-ratio:var(--r,1.5)}
 .es-ev::before{position:relative;align-self:start;height:auto;min-height:var(--ey-120)}
 .es-ev::after{display:none}
 .es-ev-bar{position:relative;inset:auto;align-self:start;margin:var(--ey-16) var(--ey-margin-bordo) 0}
 .es-ev-dt{position:static;grid-template-columns:minmax(0,1fr);row-gap:var(--ey-24);margin:var(--ey-24) var(--ey-margin-bordo) 0;color:var(--ey-ink);border-top-color:var(--ey-line-section)}
 .es-ev-t,.es-ev-dl{grid-row:auto}
 .es-ev-dt>.es-btn{grid-row:auto;margin-top:0}
 .es-ev-dt>*{grid-column:1 / -1}
 .es-ev-dt>.es-btn{grid-column:1 / -1;justify-self:start} /* la colonna del computer (11) creava dieci colonne vuote e schiacciava il testo */
}
@media (max-width:600px){.es-ev-t :is(h1,h2){font-size:min(var(--ey-s96-phone),100cqi / (var(--parola,1) * var(--ey-lettera)))}}
/* I premi (le pagine delle edizioni dell'Open Call, 26/10/2026): una riga per premio, le foto intere nei due terzi (una, o
   le tre di una serie in fila alla stessa altezza, appoggiate in basso), a destra il premio, il fotografo 30, il titolo
   dell'opera 20, il testo 15, appoggiati sul bordo basso delle foto; un filo di riga fra i premi. Sotto 900 uno sotto l'altro */
.es-premio{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--ey-24);padding:var(--ey-24) 0;border-top:var(--ey-line) solid var(--ey-line-row)}
.es-premi>.es-premio:first-child{padding-top:0;border-top:0}
.es-premio-im{grid-column:1 / span 8;display:flex;align-items:flex-end;gap:var(--ey-16)}
.es-premio-f{flex:var(--r,1.5) 1 0;min-width:0}
.es-premio-f img{display:block;width:100%;height:auto}
.es-premio-f:only-child{flex:none;max-width:100%}
.es-premio-f:only-child img{width:auto;max-width:100%;max-height:80svh}
.es-premio-tx{grid-column:9 / -1;align-self:end;display:flex;flex-direction:column;gap:var(--ey-8)}
.es-premio-tx>*{margin:0}
.es-premio-tx .es-premio-ti{font-size:var(--ey-s20);line-height:var(--ey-lh-lead)}
.es-premio-st>p{margin:var(--ey-8) 0 0;font-size:var(--ey-s15);line-height:var(--ey-lh-text);color:var(--ey-grey-1);max-width:var(--ey-measure)}
.es-premio-btn{display:flex;flex-wrap:wrap;gap:var(--ey-8);margin-top:var(--ey-gap-cta)} /* «View the series» e il libro (Rosa::testo_premio) */
/* la griglia coi testi che si aprono: la scheda di sempre (foto intera, sotto il nome e il titolo); toccando la foto si apre il
   testo sotto (details, senza script); il segno della tastiera sulla foto */
[data-apri] .es-apri-go{display:block;width:100%;margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
[data-apri] .es-apri-go:focus-visible:where(:root:not([data-puntatore]) *){outline:var(--ey-line-active) solid var(--ey-ink);outline-offset:var(--ey-8)}
.es-gr .es-tile-tx{display:flex}
.es-gr .es-tile-tx .es-label{color:var(--ey-grey-1)}
/* La fascia del testo (Marco, 26/10/2026: «il testo risulta troppo lungo»; «se applichiamo una regola di stile sui testi,
   applichiamola anche agli altri»): a sinistra premio, fotografo e titolo nel primo terzo, a destra il testo in una colonna da
   leggere e il bottone. Nei premi (podio e serie) e nelle griglie si apre al clic (es-banda). */
.es-banda .es-premio-tx{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--ey-24);align-content:start}
.es-banda .es-premio-tx>*{grid-column:1 / span 4}
/* i bottoni a sinistra sotto il titolo, il testo da leggere da solo a destra (Marco, 30/10/2026: «i due tasti... li possiamo
   mettere sotto il titolo della serie?», per dare spazio alle foto della serie grande): a sinistra chi, cosa e dove andare.
   Il contenitore del testo non fa scatola (display:contents) e i suoi due pezzi vanno nelle colonne; l'ultima riga flessibile
   prende l'altezza in piu' del testo lungo, cosi' etichetta, nome, titolo e bottoni restano stretti fra loro */
.es-banda .es-premio-tx{grid-template-rows:repeat(4,auto) 1fr}
.es-banda .es-premio-st{display:contents}
.es-banda .es-premio-st>p{grid-column:6 / -1;grid-row:1 / span 5;margin-top:0}
/* attaccati al titolo: 16 in tutto con lo spazio fra le righe, non lo spazio testo -> bottone (Marco, 30/10/2026: «i tasti
   sono troppo distanti, scendono troppo giu'»; scelta «A, bottoni vicini», scartati i link con la freccia) */
.es-banda .es-premio-btn{grid-column:1 / span 4;grid-row:4;margin-top:var(--ey-8)}
/* La fascia che si apre (Marco, 26/10/2026: «quando clicchi, tutto il blocco sotto scende e si vede il testo; se clicco su
   un'altra foto rimane il testo; cliccando la stessa foto tutto si rialza», come la ricerca in alto): la mette eyeshot-rosa.js
   dopo l'ultima foto della riga toccata, in un contenitore [data-apri]; il movimento lo fa lo script (la pagina scivola al suo
   posto, la fascia si scopre dall'alto). Aperta, le altre foto si abbassano. */
.es-banda{flex:0 0 100%}
.es-banda .es-premio-tx{margin:0;padding-top:var(--ey-24);border-top:var(--ey-line) solid var(--ey-line-row)}
/* nella serie grande il testo e' la didascalia delle foto subito sopra: niente filo (nelle griglie divide il testo dalle righe
   di foto sotto), e la riga del nome sotto le foto, invisibile perche' il nome si legge grande nel testo, non tiene posto. Lo
   spazio va alle foto (Marco, 30/10/2026: «quella linea sopra che senso ha?... acquisiremo spazio per le foto») */
.es-premio-fascia.is-grande+.es-banda .es-premio-tx{border-top:0}
.es-premio-fascia.is-grande>.es-tile-tx{display:none}
/* aperta una foto, l'attenzione e' tutta su di lei (Marco, 26/10/2026: «quando clicco su una foto si dovrebbe vedere solo
   quella e tutte le altre sfumate, anche i testi»): si abbassano le altre foto coi loro nomi e il resto della pagina (es-spento,
   lo mette eyeshot-rosa.js); della foto aperta spariscono posto e nome, che si leggono grandi nella fascia: resta il «-».
   Tempi e curva dello stile, come il movimento (pulizie del 30/10/2026 sera; prima .5s e .3s con una curva loro): le altre
   si abbassano nel lento con la curva morbida, i nomi della foto aperta spariscono nel medio. */
[data-apri] :is(.es-apri-go,.es-hrow),[data-apri]>:not(.es-apri-x),.es-spegni{transition:opacity var(--ey-t-lento) var(--ey-curva-morbida)}
[data-apri].is-aperta .es-apri-x:not(.is-on) .es-apri-go,[data-apri].is-aperta>:not(.es-apri-x,.es-banda,.es-grande),.es-spento{opacity:.3}
.es-apri-x .es-tile-tx .es-label,.es-apri-x .es-tile-tx b{transition:color var(--ey-t-medio),opacity var(--ey-t-medio)}
.es-apri-x.is-on .es-tile-tx .es-label{opacity:0}
.es-apri-x.is-on .es-tile-tx b{color:transparent}
@media (prefers-reduced-motion:reduce){[data-apri] :is(.es-apri-go,.es-hrow),.es-spegni,.es-apri-x .es-tile-tx :is(.es-label,b){transition:none}}
/* «podio»: le foto in fila alla stessa altezza (ognuna larga quanto la sua foto). Sotto il posto e il fotografo come nelle
   griglie; il testo nella fascia che si apre (la «sotto», un premio serie per riga, tolta il 30/10/2026 sera: le serie sono fasce) */
/* fra una foto e l'altra 16, come fra le foto di una serie: una distanza sola nelle foto della rosa (Marco, 26/10/2026: «e' voluta la
   distanza piu' grande per le singole e piu' ravvicinata per le serie? a me piace piu' vicine, come le serie»): podio, griglie, fascia grande */
.es-premi-podio{display:flex;flex-wrap:wrap;column-gap:var(--ey-16);row-gap:var(--ey-48);align-items:flex-start}
.es-rail-xl .es-scroll{column-gap:var(--ey-16)}
.es-premi-podio .es-premio{display:block;flex:var(--r,1.5) 1 0;min-width:0;padding:0;border:0}
.es-premi-podio .es-premio-f:only-child{flex:1 1 0}
.es-premi-podio .es-premio-f:only-child img{width:100%;max-height:none}
/* i premi serie come fasce (Rosa::premi_fasce): sopra le frecce, sotto la fascia nome e Paese fermi; toccando una foto la
   fascia del testo si apre sotto. Fra un premio e l'altro il passo delle sezioni, anche con la fascia del testo in mezzo;
   aperta, le altre serie si abbassano tutte, frecce comprese */
.es-premi-fasce>.es-premio-fascia:not(:first-child){margin-top:var(--ey-72)}
/* la foto grande delle singole, a ogni larghezza dal 31/10/2026 (eyeshot-rosa.js; Marco, 30/10/2026: «la fotografia si ingrandisce... e sulla
   destra si libera lo spazio bianco per vedere le informazioni»): una riga sua all'inizio della riga della foto toccata, la
   foto nei due terzi a sinistra, mai piu' alta dello schermo sotto la testata (una verticale resta stretta e il testo si
   allarga), il testo in basso a destra come nei premi. La scheda toccata esce dalla griglia finche' la foto e' grande. Sopra
   le altre: crescendo passa sulle foto accanto che si stanno dissolvendo, senza vederle attraverso */
[data-apri]>.es-grande{position:relative;z-index:1;flex:0 0 100%;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--ey-24);align-items:end;min-width:0}
.es-grande-im{position:relative;grid-column:1 / span 8;justify-self:start;width:min(100%,calc(var(--r,1.5) * (100svh - var(--ey-testata-h) - var(--ey-72))));min-width:0;cursor:zoom-out} /* largo quanto la foto: i due terzi, o meno se cosi' sarebbe piu' alta dello schermo (--r: le proporzioni della foto scelta). La misura la da' il riquadro e non la foto, che arriva dalla griglia con la misura piccola (Marco, 30/10/2026: «resta piccola»); la versione piu' definita (es-grande-hd) lo riempie */
.es-grande-im img{display:block;width:100%;height:auto}
.es-grande>.es-premio-tx{grid-column:9 / -1}
[data-apri]>.es-grande-via{display:none}
.es-grande-im>.es-grande-hd{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none} /* la versione piu' definita, sopra la foto (eyeshot-rosa.js, nitida) */
/* mentre le foto si muovono (es-muove, eyeshot-rosa.js) e nella serie grande, la foto non si avvicina col mouse: il movimento
   e' gia' quello della foto che si apre (prima la cornice, che ingrandita diventava nera e spessa: Marco, 30/10/2026) */
[data-apri].es-muove :is(.es-tile-im,.es-premio-f) img,.es-premio-fascia.is-grande .es-tile-im img{transform:none}
.es-premi-fasce.is-aperta>.es-apri-x:not(.is-on) .es-hrow{opacity:.3}
/* la serie grande (eyeshot-rosa.js, a ogni larghezza dal 31/10/2026): toccata una foto, le foto della fascia alte quanto la foto grande delle
   singole (due terzi della pagina per una 3:2), ma foto e testo insieme nello schermo (Marco, 30/10/2026, sul MacBook Air il
   testo restava sotto il bordo): l'altezza e' lo schermo meno 24 sopra, le frecce (48), il nome e il testo misurati da
   eyeshot-rosa.js (--es-serie-sotto) e 24 sotto; mai sotto meta' schermo. La testata si ritira (eyeshot-rosa.js, scorri).
   Durante lo zoom la finestra lascia vedere le foto che escono a sinistra (a destra taglia la pagina, html overflow-x:clip) */
.es-premio-fascia.is-grande .es-scroll>*{width:calc(var(--r,1.5) * min(max(50svh,100svh - var(--wp-admin--admin-bar--height,0px) - var(--ey-120) - var(--es-serie-sotto,0px)),(100vw - var(--ey-margin) * 2) / 2.25))}
/* sotto 782, dove la fascia normale passa a una scheda e mezza (la serie grande vale a ogni larghezza dal 31/10/2026): le foto
   alte uguali come sopra, con la larghezza che segue la proporzione. L'altezza e' quella di una 3:2 larga la riga meno 48 (la
   foto dopo si affaccia e si capisce che la serie continua), mai piu' alta dello spazio sopra il testo e mai piu' bassa della
   fascia normale (col telefono di traverso il testo lungo la schiacciava). Prima era la larghezza a essere uguale: una
   verticale nella serie alzava la riga e sotto le orizzontali restava un vuoto bianco, e due orizzontali di poco diverse
   avevano altezze diverse (Marco, 31/10/2026, sull'iPhone, la serie di Joseph Rodriguez) */
@media (max-width:781px){.es-premio-fascia.is-grande .es-scroll>*{width:calc(var(--r,1.5) * max((100vw - var(--ey-margin) - var(--ey-16)) / 2.25,min(max(50svh,100svh - var(--wp-admin--admin-bar--height,0px) - var(--ey-120) - var(--es-serie-sotto,0px)),(100vw - var(--ey-margin) * 2 - var(--ey-48)) / 1.5)))}}
.es-embla.is-zoom{overflow:visible}
.es-premi-podio .es-premio-im{display:flex}
@media (max-width:781px){
 .es-banda .es-premio-tx{display:flex;flex-direction:column;gap:var(--ey-8)}
 .es-premi-podio .es-premio{flex:0 0 100%}
 .es-premi-podio .es-premio-f:only-child img{width:auto;max-width:100%;max-height:80svh} /* una sotto l'altra: la verticale non piu' alta dello schermo */
}
/* fino a 781 il testo va sotto la foto: la foto si stringe con lo schermo e il testo da leggere no (non scende sotto 15), e
   accanto diventava piu' alto della foto (Marco, 26/10/2026, il terzo premio a 1024: 450 contro 353) */
@media (max-width:781px){
 .es-premio-im,.es-premio-tx{grid-column:1 / -1}
 .es-premio-tx{margin-top:var(--ey-16)}
 /* la foto grande (a ogni larghezza dal 31/10/2026): la foto prende la riga e il testo va sotto, come nei premi; da 782 (iPad
    11) foto nei due terzi e testo accanto, come al computer */
 .es-grande-im,.es-grande>.es-premio-tx{grid-column:1 / -1}
}
/* A · in cornice: la stessa apertura dentro i margini, alta al massimo lo schermo meno 120 (si vede che e' dentro la pagina);
   i testi a 24 dal bordo della foto */
.es-ap.es-ap-in{height:min(calc(100svh - var(--ey-120)),calc((100vw - var(--ey-margin) * 2) / var(--r,1.5)));margin:0}
@media (min-width:601px){.es-ap-in>.es-fit,.es-ap-in>.es-ap-riga{left:var(--ey-24);right:var(--ey-24)}} /* solo sopra la foto: al telefono il titolo e' nel flusso e left lo spostava */
@media (max-width:600px){.es-ap.es-ap-in{height:auto}.es-ap-in>.es-ap-riga{margin-inline:0}}
/* A · a pila: le aperture una dopo l'altra, ognuna ferma in cima mentre si scorre (la dopo sale e la copre); l'ultima scorre
   via e uscendo si stringe nei margini della pagina (--cornice, da 0 al margine, lo mette lo script). Al telefono e per chi
   chiede meno movimento una sotto l'altra */
.es-pila{max-width:none;margin:var(--ey-section) calc(var(--ey-margin) * -1) 0} /* max-width: come l'apertura, WordPress la limitava alla colonna */
.es-pila>.es-ap{position:sticky;top:var(--wp-admin--admin-bar--height,0px);margin:0}
.es-pila>.es-ap:last-child{position:relative;top:auto;clip-path:inset(var(--cornice,0px) var(--cornice,0px) 0)}
@media (max-width:600px),(prefers-reduced-motion:reduce){
 .es-pila>.es-ap{position:relative;top:auto}
 .es-pila>.es-ap+.es-ap{margin-top:var(--ey-48)}
 .es-pila>.es-ap:last-child{clip-path:none}
}
/* A · a giro: le aperture nella stessa cella, se ne vede una (is-on, lo script ogni 4 secondi), dissolvenza 0,6 come la home;
   l'elenco dei titoli in alto a sinistra sulla foto, la voce di quella che si vede attenuata (come la home di oggi e A24);
   al telefono l'elenco sotto, in inchiostro */
.es-giro{position:relative;display:grid;max-width:none;margin:var(--ey-section) calc(var(--ey-margin) * -1) 0}
/* nel giro e nella pila tutte le foto hanno la stessa cornice, 3:2 e mai piu' alta dello schermo (Marco, 27/10/2026: «se c'e' una
   slide le foto devono avere tutte la stessa dimensione... non possono scorrere sotto sopra in base alla foto; anche se ci sono
   piccole differenze non fa niente»): prima ognuna aveva l'altezza delle sue proporzioni e il bordo basso saliva e scendeva al
   cambio; ora una foto un po' piu' alta o piu' larga si taglia di poco ai lati o sopra e sotto (la foto riempie la cornice) */
.es-pila>.es-ap{height:min(var(--ey-schermo),calc(100vw / 1.5))}
/* le slide (il giro) alte quanto lo schermo su ogni apparecchio, come A24 (Marco, 31/10/2026: «le slide alla lunghezza dello
   schermo... sia sull'iPhone che su iPad 11 e 13»; A24: home-hero-slide alta quanto la finestra, la foto in cover). Al computer
   cambia poco (una 3:2 su un MacBook Air era gia' alta quasi lo schermo); su iPad e telefono in verticale la foto riempie lo
   schermo e si taglia ai lati, e titolo, riga, credito e titoli del giro restano sulla foto come al computer */
/* --ey-barra: l'altezza della barra in basso (il pre-ordine, Eyeshot Store) quando si vede: la slide finisce sopra di lei, se
   no la barra copriva i titoli del giro e il credito (31/10/2026). La foto si taglia ai lati attorno a --fx, il punto scelto
   per ogni foto nell'elenco delle slide (Rosa::foto, «codice@80»), al centro se non c'e' */
.es-giro>.es-ap{height:calc(var(--ey-schermo) - var(--ey-barra))}
.es-giro>.es-ap>img{object-position:var(--fx,50%) 50%}
@media (max-width:600px){
 .es-giro>.es-ap{display:block;overflow:hidden}
 .es-giro>.es-ap>img{position:absolute;inset:0;height:100%;aspect-ratio:auto}
 .es-giro>.es-ap::after{position:absolute;inset:auto 0 0;height:60%}
 .es-giro>.es-ap>.es-fit{position:absolute;inset:auto var(--ey-margin-bordo) calc(var(--ey-24) + var(--ey-big-pad) * 2 + var(--giu,0px));margin:0} /* la posizione dell'apertura al computer: la regola del telefono qui sopra la azzera (inset:auto) */
 .es-giro>.es-ap>.es-ap-riga{position:absolute;margin:0;color:inherit}
 .es-giro>.es-ap>.es-ap-cr{position:absolute;margin:0}
 .es-giro>.es-ap>.es-ap-cr>.es-label{color:inherit}
}
/* al telefono la riga e il bottone della pila vanno sotto la foto (l'apertura al telefono, sopra): l'altezza fissa li faceva
   finire sotto l'apertura dopo (30/10/2026 sera, l'annuncio a pila); la foto resta della cornice comune, 3:2 */
@media (max-width:600px){.es-pila>.es-ap{height:auto}.es-pila>.es-ap>img{aspect-ratio:1.5;object-fit:cover}}
/* height: quando la barra del pre-ordine entra (o si chiude) la slide si accorcia insieme a lei, coi suoi tempi (.4s, la stessa
   curva, eyeshot-messages-4.css), invece di uno scatto dei testi */
.es-giro>.es-ap{grid-area:1 / 1;margin:0;opacity:0;visibility:hidden;transition:opacity .6s cubic-bezier(.65,0,.35,1),visibility 0s linear .6s,height .4s cubic-bezier(.65,0,.35,1)}
.es-giro>.es-ap.is-on{opacity:1;visibility:visible;transition:opacity .6s cubic-bezier(.65,0,.35,1),visibility 0s,height .4s cubic-bezier(.65,0,.35,1)}
.es-giro-ix{position:absolute;top:var(--ey-24);left:var(--ey-margin-bordo);right:var(--ey-margin-bordo);z-index:2;display:flex;flex-wrap:wrap;gap:0 var(--ey-24);margin:0;color:var(--ey-d-ink)}
.es-giro-ix button{margin:0;padding:var(--ey-8) 0;background:none;border:0;color:inherit;font-family:var(--ey-font-text);font-size:var(--ey-s13);font-weight:var(--ey-w-label);line-height:var(--ey-lh-text);letter-spacing:var(--ey-ls-label);text-transform:uppercase;cursor:pointer;transition:opacity .2s cubic-bezier(.16,1,.3,1)}
.es-giro-ix button.is-on{opacity:.6}
.es-giro-ix button:focus-visible:where(:root:not([data-puntatore]) *){outline:var(--ey-line-active) solid currentColor;outline-offset:var(--ey-8)}
@media (max-width:600px){
 .es-giro-ix{position:static;grid-row:2;margin:var(--ey-24) var(--ey-margin-bordo) 0;color:var(--ey-ink)}
}
@media (prefers-reduced-motion:reduce){.es-giro>.es-ap,.es-giro>.es-ap.is-on,.es-giro-ix button{transition:none}}
/* un'apertura in mezzo alla pagina (l'evento dopo una sezione) parte alla distanza delle sezioni: prima toccava il blocco sopra
   (Marco, 28/10/2026, la Home: «e' tutto attaccato»). In cima resta a zero (sopra, .eyeshot-has-hero) */
.es-main>.es-ap:not(:first-child){margin-top:var(--ey-section)}
/* i libri nuovi in pre-ordine (la Home del lancio, 28/10/2026): due affiancati, lo stesso peso; la foto 3:2 come le schede dei
   titoli (poi il mock-up), il titolo a 48, cosa contiene, i dati in due colonne, il prezzo e il bottone sulla stessa riga */
.es-nuovi{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ey-48) var(--ey-24)}
.es-nuovo{display:flex;flex-direction:column;min-width:0}
.es-nuovo>*{margin:0}
.es-nuovo-im{aspect-ratio:3 / 2;overflow:hidden}
.es-nuovo-im img{display:block;width:100%;height:100%;object-fit:cover}
.es-nuovo h3{margin-top:var(--ey-24)}
.es-nuovo-sotto{margin-top:var(--ey-8);font-size:var(--ey-s20);line-height:var(--ey-lh-lead);color:var(--ey-grey-1)}
.es-nuovo-az{display:flex;justify-content:space-between;align-items:center;gap:var(--ey-24);margin-top:var(--ey-24)}
.es-nuovo-az>*{margin:0}
/* la scheda (30/10/2026 notte): copertina e titolo in un link solo, il numero grigio a destra come nelle fasce dei
   magazine, il credito come etichetta, prezzo e bottone senza il filo sopra */
.es-nuovo-a{display:block;color:inherit;text-decoration:none}
.es-nuovo-a h3{display:flex;justify-content:space-between;align-items:baseline;gap:var(--ey-16);margin:var(--ey-24) 0 0}
.es-nuovo-t{transition:color .3s ease-in-out} /* col nome (es-nuovo-t, es-nuovo-n): gli span senza classe nei titoli prendono il peso del testo */
.es-nuovo-n{color:var(--ey-grey-1)}
.es-nuovo-cr{margin-top:var(--ey-16)}
@media (hover:hover) and (min-width:900px){.es-nuovo-a:hover .es-nuovo-t{color:var(--ey-grey-2)}}
.es-nuovo-az p{font-size:var(--ey-s20);line-height:var(--ey-lh-lead)}
@media (max-width:781px){.es-nuovi{grid-template-columns:minmax(0,1fr)}}
@media (max-width:600px){.es-nuovo h3{font-size:var(--ey-s48-phone)}} /* al telefono il titolo come le altre teste a 48 */
/* la riga dei numeri sotto la testa di una sezione: a 24 dalla testa, non a 48 */
.es-hrow+.es-dati-sotto{margin-top:var(--ey-24)}
/* la riga che chiude la pagina: i collegamenti a destra, in fila */
.es-vai{display:flex;flex-wrap:wrap;gap:var(--ey-8) var(--ey-24);margin:0}
/* A · l'annuncio (la Home del 30/10/2026): l'apertura (es-ap) con la foto che si avvicina piano (da 1,06 a 1 in nove secondi,
   una volta sola) e le parole del titolo che salgono una dopo l'altra da sotto la riga; la riga sopra arriva dopo, in dissolvenza.
   Scorrendo la foto resta un po' indietro, a un quarto della velocita' della pagina (A24): mentre l'annuncio esce dall'alto
   scende di un quarto della sua altezza (la foto e' alta quanto lui). Lo calcola il browser insieme allo scorrimento
   (animation-timeline), non piu' il JavaScript a ogni fotogramma, che su Safari per iPad restava indietro e tremava
   (31/10/2026); dove il browser non lo sa fare la foto resta ferma. scale e translate sono due proprieta' diverse: zoom e
   parallasse non si pestano. Al telefono la foto e' nel flusso (es-ap) e la parallasse non c'e' */
.es-an>img{animation:es-an-foto 9s cubic-bezier(.16,1,.3,1) both}
@supports (animation-timeline:view()){@media (min-width:601px){
 .es-an{view-timeline:--es-an block;view-timeline-inset:0} /* inset 0: la parallasse parte quando l'annuncio tocca il bordo della finestra. Con l'accesso
    WordPress mette scroll-padding-top (la sua barra) e Safari lo contava due volte: la foto partiva gia' 8 pixel giu' e sopra restava una
    striscia grigia, il bianco della pagina sotto il velo (Marco, 03/11/2026). Per chi non e' collegato e' lo stesso di prima */
 .es-an>img{animation:es-an-foto 9s cubic-bezier(.16,1,.3,1) both,es-an-sp linear both;animation-timeline:auto,--es-an;animation-range:normal,exit-crossing}
}}
@keyframes es-an-sp{to{translate:0 25%}}
.es-an-w{display:inline-block;overflow:visible clip;padding-bottom:var(--ey-big-pad);margin-bottom:calc(var(--ey-big-pad) * -1);vertical-align:top} /* il taglio sotto la riga, con l'aria per le lettere che scendono; solo in verticale: ai lati tagliava l'ultima lettera di ogni parola, che con la spaziatura stretta esce dalla sua scatola (la «e» di «The», 30/10/2026 sera) */
.es-an-w>span{display:inline-block;animation:es-an-sale .9s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(.25s + var(--i,0) * .12s)}
.es-an>:is(.es-ap-riga,.es-ap-cr){animation:es-an-appare .8s ease both;animation-delay:.9s}
.es-an-sopra{max-width:var(--ey-measure);font-size:var(--ey-s20);line-height:var(--ey-lh-lead)} /* la riga sopra il titolo degli annunci, una frase che si legge: in etichetta (11 pixel, maiuscolo) sulla foto chiara spariva (Marco, 31/10/2026, la «B» della tavola delle slide) */
.es-an-n{opacity:.6} /* il numero del magazine accanto al nome, in grigio sulla foto come i titoli spenti dell'indice sotto */
@keyframes es-an-foto{from{scale:1.06}to{scale:1}}
@keyframes es-an-sale{from{transform:translateY(105%)}to{transform:none}}
@keyframes es-an-appare{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.es-an>img,.es-an-w>span,.es-an>:is(.es-ap-riga,.es-ap-cr){animation:none;translate:none}}
/* piu' annunci che si danno il cambio (Rosa::annuncio, Marco, 30/10/2026 sera: «vorrei farlo dinamico», la prova «B2»): il
   titolo, la foto e le righe ripartono ogni volta che un annuncio si vede (is-on); sotto il titolo grande, sulla riga di chi ha
   fatto la foto, i loro titoli (Marco: «lassu' manco si vede»), quello che si vede pieno e le altre attenuate. Sotto ogni
   titolo il filo della sequenza (es-seq-filo), che lo script accende (is-va) e che in sei secondi passa al prossimo; fermo
   fuori dallo schermo e col mouse sui titoli (is-fermo) */
.es-an-giro{--dur:6s}
.es-an-giro>.es-an:not(.is-on) .es-an-w>span,.es-an-giro>.es-an:not(.is-on)>:is(img,.es-ap-riga,.es-ap-cr){animation:none}
.es-an-giro>.es-giro-ix{top:auto;bottom:var(--ey-24)}
/* al telefono i titoli del giro restano sulla foto, in fondo, come al computer (Marco, 31/10/2026: «le puoi mettere sulla
   slide»): prima andavano sotto la foto, dopo testo e bottone, e sembravano staccati. Accanto a loro il credito non ci sta
   (390 pixel): sale di una riga, a sinistra, e titolo e riga salgono con lui (--giu) */
@media (max-width:600px){
 .es-an-giro>.es-giro-ix{position:absolute;grid-row:auto;margin:0;color:var(--ey-d-ink)}
 .es-an-giro>.es-an>.es-ap-cr{left:var(--ey-margin-bordo);right:auto;bottom:calc(var(--ey-24) + var(--ey-s13) * var(--ey-lh-text) + var(--ey-8) * 3)}
 .es-an-giro>.es-an:has(>.es-ap-cr){--giu:calc(var(--ey-48) + var(--ey-s13) * var(--ey-lh-text) + var(--ey-8) * 3)}
}
.es-an-giro .es-giro-ix button{position:relative;opacity:.6}
.es-an-giro .es-giro-ix button.is-on{opacity:1}
.es-an-giro .es-seq-filo{inset:auto 0 0}
.es-an-giro .es-seq-filo.is-va::after{animation:es-seq-filo var(--dur) linear both}
.es-an-giro.is-fermo .es-seq-filo::after{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.es-an-giro .es-seq-filo.is-va::after{animation:none}}
/* A · la sequenza (la Home del 30/10/2026): le aperture nella stessa cella, se ne vede una, taglio netto (nessuna dissolvenza:
   come girare una pagina); su ognuna in basso chi e cosa; sotto, sulla foto, il numero, il bottone e il filo che si riempie
   fino alla prossima in --dur (lo script passa alla prossima quando il filo e' pieno: un tempo solo) */
.es-seq{position:relative;display:grid;max-width:none;margin:var(--ey-section) calc(var(--ey-margin) * -1) 0;color:var(--ey-d-ink);cursor:pointer;--dur:4s}
.es-seq>.es-ap{grid-area:1 / 1;height:min(var(--ey-schermo),calc(100vw / 1.5));margin:0;visibility:hidden}
.es-seq>.es-ap.is-on{visibility:visible}
.es-seq-cap{position:absolute;left:var(--ey-margin-bordo);right:var(--ey-margin-bordo);bottom:calc(var(--ey-48) + var(--ey-24));z-index:1;margin:0}
.es-seq-cap>*{margin:0}
.es-seq-cap h2{margin-top:var(--ey-8);padding-block:var(--ey-big-pad)}
.es-seq-cap h2+p{margin-top:var(--ey-8);font-size:var(--ey-s20);line-height:var(--ey-lh-lead)}
.es-seq-cap .es-label{color:inherit}
.es-seq-bar{grid-area:1 / 1;align-self:end;position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:var(--ey-24);margin:0 var(--ey-margin-bordo) var(--ey-24);padding-top:var(--ey-16)}
.es-seq-bar>*{margin:0}
.es-seq-bar .es-label{color:inherit}
.es-seq-bar .es-btn{color:inherit;border-color:currentColor}
.es-seq-filo{position:absolute;inset:0 0 auto;height:var(--ey-line)}
.es-seq-filo::before,.es-seq-filo::after{content:"";position:absolute;inset:0;background:currentColor}
.es-seq-filo::before{opacity:.35}
.es-seq-filo::after{transform-origin:left;transform:scaleX(0)}
.es-seq.is-va .es-seq-filo::after{animation:es-seq-filo var(--dur) linear both}
.es-seq.is-fermo .es-seq-filo::after{animation-play-state:paused}
.es-seq:focus-visible:where(:root:not([data-puntatore]) *){outline:var(--ey-line-active) solid currentColor;outline-offset:calc(var(--ey-8) * -1)}
@keyframes es-seq-filo{to{transform:scaleX(1)}}
@media (max-width:600px){
 .es-seq{color:var(--ey-ink)}
 .es-seq>.es-ap{height:auto}
 .es-seq-cap{position:static;margin:var(--ey-16) var(--ey-margin-bordo) 0;color:var(--ey-ink)} /* sotto la foto, sul bianco: l'inchiostro (es-ap da' il chiaro della foto) */
 .es-seq-cap .es-label{color:var(--ey-grey-1)}
 .es-seq-cap h2{font-size:var(--ey-s48-phone)}
 .es-seq-bar{grid-area:2 / 1;margin:var(--ey-24) var(--ey-margin-bordo) 0}
}
@media (prefers-reduced-motion:reduce){.es-seq.is-va .es-seq-filo::after{animation:none}}
/* B · la testa a 96: l'etichetta nel primo quarto, il titolo e l'introduzione nei tre quarti */
.es-t96{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--ey-24);margin:var(--ey-16) 0 0}
.es-t96>*{margin:0}
.es-t96>.es-label{grid-column:1 / span 3}
.es-t96>div{grid-column:4 / -1}
.es-t96 h2{margin:0;padding-block:var(--ey-big-pad)}
.es-t96 div>p{margin:var(--ey-24) 0 0;max-width:var(--ey-measure);font-size:var(--ey-s20);line-height:var(--ey-lh-lead)}
/* C · la fascia grande: due schede intere e meta' della terza (Marco, 26/10/2026: «due piene e una che sborda»; la foto sul
   bordo a meta', come la fascia di sempre), il titolo della riga a 48; sotto la foto il nome come quello dei vincitori e il dato
   (Paese, edizione, autore) come le etichette («mi piace tantissimo quello stile, applicalo anche alle serie finaliste»). Al tablet e al telefono una e mezza. La
   variante «una» (es-rail-una) tiene la prima misura, una scheda e tre quarti, per pochi pezzi in evidenza */
.es-hrow-xl .es-blk-go{margin-left:auto} /* la testa di sezione della rosa (Rosa::testa): dove porta, a destra come le frecce della fascia */
.es-rail-xl .es-scroll>*{width:calc(var(--r,1.5) * (100vw - var(--ey-margin) - var(--ey-16) * 2) / 3.75)}
@media (max-width:781px){.es-rail-xl .es-scroll>*{width:calc(var(--r,1.5) * (100vw - var(--ey-margin) - var(--ey-16)) / 2.25)}}
.es-rail-xl.es-rail-una .es-scroll>*{width:calc(var(--r,1.5) * (100vw - var(--ey-margin) - var(--ey-16)) / 2.625)}
/* la riga piu' bassa (es-rail-basso: ogni fila col libro in Books e Magazines, le righe pari di Featured Photographers; Marco, «rimpicciolisci leggermente la seconda riga,
   la quarta, la sesta... cosi' non abbiamo questa simmetria perfetta»): le schede un quinto meno alte */
.es-rail-xl.es-rail-basso .es-scroll>*{width:calc(var(--r,1.5) * var(--ey-fila))}
/* il libro, prima scheda di una fila (Book_Sheet::libro_in_fila): la cornice larga quanto il suo libro, stesso spazio prima della
   prima foto in ogni fila. --lx e le altre sono del singolo libro; senza misure la foto del prodotto sta intera */
.es-tile-im>.es-foto-libro{object-fit:contain}
.es-tile-im>.es-foto-libro[style]{inset:auto;left:var(--lx);top:var(--ly);width:var(--lw);height:auto;max-width:none;clip-path:var(--lc);transform-origin:var(--lo)}
.es-rail-xl .es-tile-tx{padding-bottom:var(--ey-8)} /* il nome a 30 sporge di 3 pixel sotto la scheda (le lettere, non la scatola): senza questo spazio la fascia scorreva anche in verticale */
/* D · la frase a tutta riga: 96 su tutte le colonne */
.es-frase96{margin:0;padding-block:var(--ey-big-pad)}
.es-frase96 span{color:var(--ey-grey-1);font-family:inherit;letter-spacing:inherit} /* le parole fra graffe della frase (Rosa::frase96): lo stesso carattere e la stessa spaziatura (la base le rimette su ogni elemento), solo il grigio */
/* E · l'elenco a titoli grandi: una riga per voce sulla griglia, titolo 48 in otto colonne, poi il nome e il dato. Al
   passaggio del mouse le altre righe si spengono (grigio 2) e la foto compare accanto al puntatore (--x e --y li mette lo
   script); col dito o sotto 900 la foto non c'e' e la riga porta alla pagina */
.es-el{margin:0;padding:0;list-style:none}
.es-el>li{margin:0;padding:0;border-top:var(--ey-line) solid var(--ey-line-row)}
.es-el>li:first-child{border-top:0}
.es-el a{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--ey-24);align-items:baseline;padding:var(--ey-16) 0;color:var(--ey-ink);text-decoration:none;transition:color .3s ease-in-out}
.es-el b{grid-column:1 / span 8;padding-block:var(--ey-big-pad)}
.es-el-by{grid-column:span 3;font-size:var(--ey-s15);line-height:var(--ey-lh-text)}
.es-el-yr{grid-column:span 1;justify-self:end;font-size:var(--ey-s13);line-height:var(--ey-lh-text);color:var(--ey-grey-1);font-variant-numeric:tabular-nums;white-space:nowrap}
/* la foto sta sotto la riga, appena a destra del puntatore, per non coprire il titolo che si legge; in fondo allo schermo
   sopra la riga (es-el-su, lo mette lo script) */
.es-el-im{position:fixed;top:var(--y,0);left:var(--x,0);z-index:50;display:block;height:calc(var(--ey-120) * 2.5);opacity:0;pointer-events:none;transform:translate(var(--ey-24),var(--ey-48));transition:opacity .2s ease-in-out}
.es-el.es-el-su .es-el-im{transform:translate(var(--ey-24),calc(-100% - var(--ey-48)))}
.es-el-im img{display:block;width:auto;height:100%}
@media (hover:hover) and (min-width:900px){
 .es-el a:hover .es-el-im{opacity:1}
}
@media (hover:none),(max-width:899px){.es-el-im{display:none}}
@media (prefers-reduced-motion:reduce){.es-el a,.es-el-im{transition:none}}
/* F · la doppia pagina: due foto intere come nel libro, una per pagina, appoggiate in basso; il numero di pagina sotto, sul
   bordo esterno (a sinistra la pagina pari, a destra la dispari) */
.es-dp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--ey-24);align-items:end}
.es-dp>figure{margin:0}
.es-dp img{display:block;width:100%;height:auto}
.es-dp figcaption{margin:var(--ey-8) 0 0;font-size:var(--ey-s13);line-height:var(--ey-lh-text);color:var(--ey-grey-1);font-variant-numeric:tabular-nums}
.es-dp>figure+figure figcaption{text-align:right}
/* G · il correlato in chiusura: titolo 96 a sinistra e anno 48 grigio a destra sulla stessa linea, poi la vetrina */
.es-corr{display:flex;justify-content:space-between;align-items:baseline;gap:var(--ey-24);margin:0 0 var(--ey-24)}
.es-corr>*{margin:0}
.es-corr h2{padding-block:var(--ey-big-pad)}
/* accanto alla foto una colonna da leggere (Marco, 26/10/2026: «i testi con il pulsante li gestirei meglio»): il fotografo 20,
   il credito editoriale 13 grigio, la prima frase della scheda del libro 15, il bottone della sua misura; sotto 900 sotto la foto */
.es-corr-tx{margin:var(--ey-16) 0 0}
.es-corr-tx>*{margin:0;max-width:var(--ey-measure)}
.es-corr-tx p:not(.es-corr-chi,.es-label){margin-top:var(--ey-24);font-size:var(--ey-s20);line-height:var(--ey-lh-lead);color:var(--ey-ink)} /* la frase come un'introduzione, come il testo dell'apertura (Marco, 26/10/2026) */
.es-corr-tx>.es-btn{margin-top:var(--ey-gap-cta)}
/* H · gli episodi: il numero 96 grigio nei primi due dodicesimi, l'ospite 30 e il tema 15 negli altri, sulla linea del numero */
.es-ep{margin:0;padding:0;list-style:none}
.es-ep>li{margin:0;padding:0;border-top:var(--ey-line) solid var(--ey-line-row)}
.es-ep>li:first-child{border-top:0}
.es-ep a{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--ey-24);align-items:baseline;padding:var(--ey-16) 0;color:var(--ey-ink);text-decoration:none}
.es-ep-n{grid-column:span 2;padding-block:var(--ey-big-pad);color:var(--ey-grey-1);font-variant-numeric:tabular-nums}
.es-ep-tx{grid-column:span 10;display:flex;flex-direction:column;gap:var(--ey-8)}
.es-ep-tx span{font-size:var(--ey-s15);line-height:var(--ey-lh-text);color:var(--ey-grey-1)}
/* I · la prima grande: la foto intera nei due terzi, numero e titolo 48 nel terzo, appoggiati in basso; sotto la griglia */
.es-pg{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--ey-24);align-items:end;margin:0 0 var(--ey-48);color:var(--ey-ink);text-decoration:none}
.es-pg-im{grid-column:1 / span 8;display:block}
.es-pg-im img{display:block;width:auto;max-width:100%;height:auto;max-height:80svh} /* intera e mai piu' alta di quattro quinti dello schermo: una foto verticale nei due terzi superava lo schermo */
.es-pg-v .es-pg-im{grid-column:1 / span 4}
.es-pg-v .es-pg-tx{grid-column:5 / -1}
/* le schede sotto riempiono la riga: senza il riempitivo degli elenchi lunghi crescono in proporzione e restano alte uguali */
.es-pg+.es-tiles{margin-bottom:0}
.es-pg+.es-tiles-intere::after{display:none}
.es-pg-tx{grid-column:9 / -1;display:flex;flex-direction:column;gap:var(--ey-16)}
.es-pg-tx>*{margin:0}
.es-pg-tx b{padding-block:var(--ey-big-pad)}
/* J · l'indice per anni: l'anno 96 nel terzo di sinistra, i nomi in due colonne nei due terzi; un filo di riga fra gli anni */
.es-anni{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--ey-24);padding:var(--ey-16) 0 var(--ey-24);border-top:var(--ey-line) solid var(--ey-line-row)}
.es-blk-bar+.es-anni{padding-top:0;border-top:0}
.es-anni>*{margin:0}
.es-anni-y{grid-column:1 / span 4;padding-block:var(--ey-big-pad);font-variant-numeric:tabular-nums}
.es-anni ul{grid-column:5 / -1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ey-16) var(--ey-24);align-content:start;margin:0;padding:0;list-style:none}
.es-anni li{display:flex;flex-direction:column;gap:var(--ey-8);margin:0}
/* K · tre verticali: tre colonne da un terzo, la foto nel riquadro 2:3 fisso (entrano solo foto 2:3, lo controlla chi scrive il
   blocco), sotto a sinistra il fotografo e il libro, a destra il bottone. La scheda e' un collegamento solo. Al passaggio del
   mouse, come i film in sala della home di A24 (.thumb-title-theatrical:hover .display-name, .is-hover-group:hover .a24-button):
   il titolo della scheda toccata passa al grigio (la riga piccola sopra no) e il suo bottone si accende; le altre restano come sono (Marco, 28/10/2026: «all'opposto come lo facciamo adesso...
   più semplicità»; prima si spegnevano le altre due). Quando non c'e' posto scorrono di lato, come le fasce */
.es-vert{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--ey-24);margin:0;padding:0;list-style:none}
.es-vert:focus-visible:where(:root:not([data-puntatore]) *){outline:var(--ey-line-active) solid var(--ey-ink);outline-offset:var(--ey-8)}
.es-vert>li{display:flex;min-width:0;margin:0}
/* le tre schede alte uguali (la riga della griglia) e i loro testi allineati: i nomi sulla stessa linea in basso, i bottoni pure,
   anche quando una riga piccola va a capo (Marco, 30/10/2026 sera: «sotto i bottoni sono tutti strani e sfasati»; prima ogni
   scheda impilava i suoi testi da sola e quella con la riga piu' lunga scendeva) */
.es-vert a{display:flex;flex:1 1 auto;flex-direction:column;min-width:0;color:var(--ey-ink);text-decoration:none;transition:color .3s ease-in-out}
.es-vert-im{display:block;aspect-ratio:2/3;overflow:hidden}
.es-vert-im img{display:block;width:100%;height:100%;object-fit:cover}
.es-vert-tx{display:flex;flex:1 1 auto;justify-content:space-between;align-items:flex-end;gap:var(--ey-16);padding-top:var(--ey-16)}
.es-vert-tx>span:first-child{display:flex;flex:1 1 auto;flex-direction:column;justify-content:flex-end;gap:var(--ey-8);min-width:0} /* cresce: col bottone sotto il nome, i nomi delle tre restano sulla stessa linea */
/* la riga piccola sopra il titolo (Photobooks, Quarterly issues) nel grigio delle etichette, come in tutte le schede: stacca dal
   titolo sotto (Marco, 29/10/2026: «non li voglio neri, li voglio grigi, il nostro grigio»; prima prendeva il nero della scheda).
   Lo stesso nella doppia pagina (es-due) */
/* il bottone accanto al nome anche sotto i 900 (Marco, 27/10/2026: «a destra e' piu' bello»); solo al telefono sotto il nome:
   a 390 la scheda e' larga 252 e «Open Call 2026» andava su tre righe */
/* col bottone sotto, i testi prendono tutta la larghezza della scheda (stretch) e solo il bottone resta della sua misura.
   ⛔ Non flex-start: Safari, quando eyeshot-rail.js passa la scheda da «bottone accanto» a «bottone sotto», teneva i testi
   stretti come quando il bottone era accanto, e a 820 (iPad 11) «Limited-edition issues» e «Eyeshot Magazine» andavano a
   capo e la scheda di mezzo scendeva (Marco, 31/10/2026, foto dall'iPad; visto anche nel Safari del Mac, Chrome no) */
@media (max-width:600px){.es-vert-tx{flex-direction:column;align-items:stretch}.es-vert-tx>.es-btn{align-self:flex-start}}
.es-vert.es-vert-sotto .es-vert-tx{flex-direction:column;align-items:stretch} /* da 782, quando nome e bottone non stanno accanto: il bottone sotto, le tre in fila (eyeshot-rail.js) */
.es-vert.es-vert-sotto .es-vert-tx>.es-btn{align-self:flex-start}
/* il nome a 20 come nelle fasce (Marco, 27/10/2026: «come quelli delle finaliste delle serie, piu' piccolino»; a 30, col bottone
   accanto, «Open Call 2026» andava su tre righe) */
/* lo stesso nome, nero e bold, anche per chi ha fatto il libro nel blocco «correlato» (Marco, 27/10/2026: «il nome dell'autrice
   e' troppo piccolino e si perde... fammelo nero come in More from Eyeshot, bello bold») */
.es-vert .es-btn{flex:none;color:inherit;border-color:currentColor}
@media (prefers-reduced-motion:reduce){.es-vert a{transition:none}}
/* il nome delle schede al passaggio del mouse: nel capitolo «Il passaggio del mouse», in fondo alla cornice */
/* M · due foto sfalsate: tre righe. In alto la riga del titolo sui due terzi di sinistra (col suo filo); a destra la verticale
   nel terzo parte all'altezza del filo e scende per le prime due righe; a sinistra l'orizzontale, dalla seconda alla
   sesta colonna (al margine), sta in fondo alla seconda riga, quindi finisce con la verticale; nella terza riga i due titoli, in riga.
   Le due schede dividono le righe della sezione (subgrid). Sotto 900 una sotto l'altra */
.es-due{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto 1fr auto;column-gap:var(--ey-24)}
.es-due-bar{grid-column:1 / span 8;grid-row:1;display:flex;justify-content:space-between;align-items:baseline;gap:var(--ey-24);margin:0 0 var(--ey-48);padding-top:var(--ey-8);border-top:var(--ey-line) solid var(--ey-line-section)}
.es-due-bar>*{margin:0}
.es-due-bar h2{padding-block:var(--ey-big-pad)}
.es-due-a,.es-due-b{display:grid;grid-template-rows:subgrid;color:var(--ey-ink);text-decoration:none;transition:color .3s ease-in-out}
.es-due-a{grid-column:1 / span 6;grid-row:2 / span 2} /* al margine (Marco, 26/10/2026: «allineamela a sinistra»; A24 la rientra di una colonna) */
.es-due-b{grid-column:9 / -1;grid-row:1 / span 3}
.es-due-a .es-due-im{grid-row:1;align-self:end}
.es-due-b .es-due-im{grid-row:1 / span 2}
.es-due-a .es-due-tx{grid-row:2}
.es-due-b .es-due-tx{grid-row:3}
.es-due-im{display:block}
.es-due-im img{display:block;width:100%;height:auto}
.es-due-tx{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--ey-16);padding-top:var(--ey-16)}
.es-due-tx>span:first-child{display:flex;flex-direction:column;gap:var(--ey-8);min-width:0}
.es-due-tx b{transition:color .3s ease-in-out}
.es-due .es-btn{flex:none;color:inherit;border-color:currentColor}

@media (prefers-reduced-motion:reduce){.es-due-a,.es-due-b,.es-due-tx b{transition:none}}
@media (max-width:781px){
 .es-due{grid-template-rows:none;row-gap:var(--ey-48)}
 .es-due-bar{grid-column:1 / -1;margin:0}
 .es-due-a,.es-due-b{grid-column:1 / -1;grid-row:auto;grid-template-rows:none}
 .es-due-a .es-due-im,.es-due-b .es-due-im,.es-due-a .es-due-tx,.es-due-b .es-due-tx{grid-row:auto}
 .es-due-tx b{font-size:var(--ey-s20);line-height:var(--ey-lh-title);letter-spacing:var(--ey-ls-20)}
 .es-due-bar h2{font-size:var(--ey-s48-phone)}
}
/* L · il libro sfogliato: la riga in alto in due pezzi di filo (il terzo di sinistra e i due terzi), la foto dal bordo
   sinistro dello schermo fino alla fine dell'ottava colonna, nel riquadro 3:2; le foto una sull'altra, se ne vede una
   (is-on, la mette lo script ogni mezzo secondo, taglio netto); sotto il numero di pagina. A destra il testo 20 appoggiato
   in basso, largo tre colonne su quattro (A24 lascia lo spazio verso il bordo destro), il credito, il bottone col prezzo o
   lo stato in grigio. Sotto 900 la foto da bordo a bordo e il testo sotto */
.es-sf{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--ey-24)}
.es-sf-bar{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;align-items:start;row-gap:var(--ey-8);margin:0 0 var(--ey-32)}
/* i due fili in una riga loro, sopra; sotto le tre scritte sulla stessa riga, allineate in alto (Marco, 26/10/2026: «Eyeshot
   Books alla fine della linea»; poi «li vorrei ancorati in alto, non verso la fine del testo»: non sulla linea di base del titolo) */
.es-sf-filo{grid-row:1;align-self:start;border-top:var(--ey-line) solid var(--ey-line-section)}
.es-sf-filo:first-child{grid-column:1 / span 4}
.es-sf-filo+.es-sf-filo{grid-column:5 / -1}
.es-sf-bar>:not(.es-sf-filo){grid-row:2;margin:0}
.es-sf-bar>.es-blk-go{grid-column:1 / span 4}
.es-sf-bar h2{grid-column:5 / span 6;padding-block:var(--ey-big-pad)}
.es-sf-bar>.es-label{grid-column:11 / -1;justify-self:end;white-space:nowrap}
.es-sf-im{grid-column:1 / span 8;margin:0 0 0 calc(var(--ey-margin) * -1)}
.es-sf-im>.es-sf-foglio{display:none;aspect-ratio:3/2}
.es-sf-im>.es-sf-foglio.is-on{display:block}
.es-sf-foglio img{display:block;width:100%;height:100%;object-fit:cover}
.es-sf-im figcaption{margin:var(--ey-8) 0 0 var(--ey-margin);font-size:var(--ey-s13);line-height:var(--ey-lh-text);color:var(--ey-grey-1);font-variant-numeric:tabular-nums}
.es-sf-tx{grid-column:9 / span 3;align-self:end;margin:0 0 calc(var(--ey-lh-text) * var(--ey-s13) + var(--ey-8))}
.es-sf-tx>*{margin:0}
.es-sf-tx>p:first-child{font-size:var(--ey-s20);line-height:var(--ey-lh-lead);color:var(--ey-ink)}
.es-sf-tx>.es-corr-ed{margin-top:var(--ey-16)}
.es-sf-tx>.es-btn{margin-top:var(--ey-gap-cta)}
@media (max-width:781px){
 .es-sf-im{grid-column:1 / -1;margin-right:calc(var(--ey-margin) * -1)}
 .es-sf-tx{grid-column:1 / -1;margin:var(--ey-24) 0 0}
 .es-sf-bar h2{grid-column:5 / -1;font-size:var(--ey-s30);line-height:var(--ey-lh-big);letter-spacing:var(--ey-ls-big)}
 .es-sf-bar>.es-label{grid-row:3;grid-column:5 / -1;justify-self:start} /* al telefono non ci sta accanto al titolo: va sotto */
}
/* le tre verticali scorrono di lato quando nelle tre colonne il nome e il bottone si toccherebbero (Marco, 27/10/2026: «non ci
   devono essere sovrapposizioni... poco prima passi alla visualizzazione che le immagini escono a destra»): lo misura
   eyeshot-rail.js scheda per scheda e mette es-vert-scorre. Scorrendo due schede intere e la terza fuori, mai piu' strette di
   quanto servono nome e bottone uno accanto all'altro (--vert-min, misurato); al telefono il bottone va sotto il nome e la
   scheda e' il 72% */
.es-vert.es-vert-scorre{display:flex;gap:var(--ey-16);margin-right:calc(var(--ey-margin) * -1);padding:0 var(--ey-margin) var(--ey-8) 0;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain} /* sotto, 8: le lettere sporgono di 2 pixel e la fascia scorreva anche in verticale */
.es-vert.es-vert-scorre::-webkit-scrollbar{display:none}
.es-vert.es-vert-scorre>li{flex:0 0 max(var(--vert-min,0px),calc((100% - var(--ey-16) * 2) / 2.4));scroll-snap-align:start}
@media (max-width:600px){.es-vert.es-vert-scorre>li{flex-basis:72%}}
@media (max-width:781px){
 .es-pg-im,.es-pg-tx,.es-anni-y,.es-anni ul{grid-column:1 / -1}
 .es-pg-tx{margin-top:var(--ey-16)}
 .es-anni ul{margin-top:var(--ey-16)}
}
@media (max-width:600px){
 .es-dp{column-gap:var(--ey-16)}
 .es-corr h2,.es-anni-y{font-size:var(--ey-s96-phone)}
 .es-ep-n{grid-column:span 3;font-size:var(--ey-s96-phone)}
 .es-ep-tx{grid-column:span 9}
 .es-ep-tx b{font-size:var(--ey-s20);line-height:var(--ey-lh-title);letter-spacing:var(--ey-ls-20)}
 .es-pg-tx b{font-size:var(--ey-s30);line-height:var(--ey-lh-big);letter-spacing:var(--ey-ls-big)}
 .es-anni ul{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:781px){
 .es-t96>.es-label,.es-t96>div{grid-column:1 / -1}
 .es-t96>div{margin-top:var(--ey-16)}
 .es-el b{grid-column:1 / -1}
 .es-el-by{grid-column:1 / span 10;margin-top:var(--ey-8)}
 .es-el-yr{grid-column:span 2}
}
@media (max-width:600px){
 .es-t96 h2{font-size:var(--ey-s96-phone)}
 .es-frase96{font-size:var(--ey-s48-phone);line-height:var(--ey-lh-l);letter-spacing:var(--ey-ls-l)}
 .es-el b{font-size:var(--ey-s30);line-height:var(--ey-lh-big);letter-spacing:var(--ey-ls-big)}
 .es-rail-xl .es-scroll>*{width:calc(var(--r,1.5) * (100vw - var(--ey-margin) - var(--ey-16)) / 2.25)}
 .es-rail-xl.es-rail-una .es-scroll>*{width:calc(var(--r,1.5) * (100vw - var(--ey-margin) - var(--ey-16)) / 1.875)}
 .es-rail-xl .es-hrow h2,.es-hrow-xl h2{font-size:var(--ey-s30);line-height:var(--ey-lh-big);letter-spacing:var(--ey-ls-big)} /* al telefono la testa a 30, coi valori del 30 */
}

/* --- Le briciole non si vedono (Marco, 04/11/2026). Nel sito nuovo (body es-testatina, lo mette il tema) escono dalla pagina;
   l'etichetta della testa porta alla sezione sopra la pagina, presa dalle briciole (testata.js del tema, es-label-su): nella
   pagina del magazine «EYESHOT MAGAZINE» porta a Magazines. Dal 25/10/2026 il percorso stava a destra sulla riga
   dell'etichetta (la testatina, es-sitecrumb, a 11/13 dal 27/10): tolta perche' c'era solo su alcune pagine e sul checkout
   diceva un'altra cosa dell'etichetta; il sito ha due livelli e il menu dice gia' dove sei (A24 non le usa). La scritta resta
   l'etichetta, sottolineata col mouse; col dito si tocca 8 sopra e sotto la parola --- */
.es-testatina .es-crumbs{display:none}
.es-testatina .es-crumbs+:is(.es-art,.es-head){margin-top:0}
.es-label-su{position:relative;color:inherit;text-decoration:none}
.es-label-su:hover{text-decoration:underline;text-underline-offset:.2em}
.es-label-su::after{content:"";position:absolute;inset:calc(var(--ey-8) * -1) 0}
/* negli articoli a due colonne la colonna delle foto parte all'altezza del titolo, una riga d'etichetta piu' in basso: la riga
   dell'etichetta corre sopra le due colonne (nata il 25/10/2026 per la testatina, tenuta: senza, le foto salirebbero alla
   riga dell'etichetta). Nel libro aperto (es-libro) no: il testo comincia senza etichetta e la foto partiva 32 piu' in basso
   della prima riga (Marco, 29/10/2026, pagina dell'abbonamento: «le fotografie non sono allineate con Four issues») */
@media (min-width:782px){
 .es-testatina .es-crumbs~.es-art:not(.es-libro)>.es-art-ph{padding-top:calc(var(--ey-s-label) * var(--ey-lh-text) + var(--ey-gap-label))}
}

/* --- Canvas: un gruppo di una pagina a tutta larghezza, coi margini del sito (es-canvas lo mette il server a ogni
   eyeshot-canvas, Stile_Anteprima::prosa) --- */
.es-canvas{box-sizing:border-box;padding-left:var(--ey-margin);padding-right:var(--ey-margin)}
/* i blocchi delle pagine coi pezzi nuovi (Pezzi_Nuovi, 24/10/2026): l'apertura (briciole e testa) sta 48 sotto la barra come
   in .es-main (24 al telefono); il primo capitolo dopo la testa sta 48 sotto, come .es-head+.es-box; la foto sola e' intera,
   larga due colonne su tre, a sinistra come il testo; i capitoli di testo affiancati stanno due per riga, tre quando sono tre
   (es-tre: la fila sempre piena); piu' gruppi di righe di fila (le persone di Past Jurors) si leggono come un elenco solo */
.es-apertura{padding-top:var(--ey-48)}
@media (max-width:781px){.es-apertura{padding-top:var(--ey-24)}}
.es-apertura .es-head{margin-bottom:0}
.es-apertura+.es-canvas:not(.es-faq-toc)>:first-child{margin-top:var(--ey-48)} /* non l'indice delle FAQ, che sta accanto ai temi e parte col primo (29/10/2026) */
.es-canvas>.es-duo{margin-top:var(--ey-72)}
.es-canvas:has(>.es-duo:last-child)+.es-canvas>.es-duo:first-child{margin-top:var(--ey-48)}
.es-foto-sola{max-width:calc((100% - var(--ey-24) * 2) / 3 * 2 + var(--ey-24));margin-top:var(--ey-72)}
@media (max-width:781px){.es-foto-sola{max-width:100%}}

/* --- Testo lungo: le pagine di solo testo (Terms, Returns, Regolamento e ogni pagina di testo futura; Marco, 13/10/2026,
   «lo stesso identico stile per tutti»). es-prose lo mette il server a ogni canvas fatto solo di titoli, paragrafi, elenchi
   e tabelle (Stile_Anteprima::prosa). Colonna di lettura, filo sopra ogni capitolo con 24 dopo e 48 prima, h3 a 20, niente
   grassetto nel testo, elenchi a 16 dal margine, 96 prima del piede (48 sul telefono). Con almeno quattro capitoli lo script
   ey-text-toc aggiunge l'indice (es-toc) e es-prose-toc: al computer indice a sinistra (3/12, fermo mentre si scorre,
   capitolo che si legge in inchiostro e sottolineato), testo fino al margine destro, capitoli a 30. --- */
.es-prose{padding-bottom:var(--ey-section)}
.es-prose>*{margin-block-start:var(--ey-16)}
.es-prose>:first-child{margin-block-start:0}
.es-prose>:is(p,ul,ol,h2,h3,h4,figure){max-width:var(--ey-article-col);margin-left:0;margin-right:auto}
:is(.es-prose,.es-faq-group,.es-faq-end)>h2{margin:var(--ey-48) 0 var(--ey-24);padding-top:var(--ey-24);padding-bottom:var(--ey-big-pad);border-top:var(--ey-line) solid var(--ey-line-section);font-size:var(--ey-s48);line-height:var(--ey-lh-l);letter-spacing:var(--ey-ls-l)}
.es-prose>h3{margin:var(--ey-32) 0 var(--ey-8)}
.es-prose>:is(p,ul,ol){font-size:var(--ey-s20);line-height:var(--ey-lh-lead)} /* il testo di lettura del sito, come le note, le FAQ e A24 nella sua Privacy Policy (29/10/2026; prima 15). L'indirizzo email lungo che va a capo lo dice ora la base, per tutto il sito (31/10/2026) */
.es-prose>:is(p,ul,ol) :is(strong,b){font-weight:inherit}
.es-prose>p{margin-bottom:var(--ey-16)}
.es-prose>:is(ul,ol){margin-bottom:var(--ey-16);padding-left:var(--ey-16)}
.es-prose>:is(ul,ol)>li{margin:0 0 var(--ey-8)}
.es-prose>div[aria-hidden="true"]{display:none} /* gli spaziatori messi a mano: lo spazio lo da' il pezzo */
.es-prose>:last-child{margin-bottom:0}
:is(.es-prose-toc,.es-faq-group,.es-faq-end)>h2{font-size:var(--ey-s30);line-height:var(--ey-lh-big);letter-spacing:var(--ey-ls-big)} /* i temi delle FAQ sono capitoli come quelli delle pagine di testo (29/10/2026) */
.es-toc{display:none}
.es-toc ul{display:flex;flex-direction:column;gap:var(--ey-8);list-style:none;margin:0;padding:0}
.es-toc li{margin:0;padding:0}
.es-toc a{font-size:var(--ey-s15);line-height:var(--ey-lh-text);color:var(--ey-grey-1);text-decoration:none}
.es-toc a:is(:hover,.is-current){color:var(--ey-ink);text-decoration:underline;text-decoration-thickness:var(--ey-line);text-underline-offset:.3em}
@media (max-width:767px){.es-prose>h2{font-size:var(--ey-s48-phone)}:is(.es-prose-toc,.es-faq-group,.es-faq-end)>h2{font-size:var(--ey-s30)}}
@media (min-width:782px){
 .es-prose-toc{display:grid;grid-template-columns:3fr 9fr;column-gap:var(--ey-48);row-gap:0;align-items:start}
 .es-prose-toc>*{grid-column:2;margin-block-start:0;margin-inline:0}
 .es-prose-toc>.es-toc{display:block;grid-column:1;grid-row:1 / span 300;position:sticky;top:calc(var(--ey-72) + var(--ey-24));max-height:calc(100vh - var(--ey-120));overflow:auto}
 .es-prose.es-prose-toc>.es-toc{margin-top:var(--ey-48)} /* nei canvas di testo l'indice parte all'altezza del primo capitolo; nelle policy di iubenda in cima */
 .es-prose-toc>:is(p,ul,ol,h2,h3,h4,figure){max-width:none;margin-right:0}
 :is(.es-prose-toc,.es-faq-group,.es-faq-end)>h2{margin-top:var(--ey-32)}
 .es-prose-toc>:is(p,ul,ol,h3,h4,figure){margin-top:0}
}

/* --- Articolo (cantiere del sito, passo 4, 24/10/2026): i 346 articoli riscritti dal convertitore (includes/class-articoli.php).
   La chiave dei libri (Marco, 24/10/2026: niente spazi vuoti a destra; «testi a sinistra e foto a destra, con l'effetto di
   scorrimento», col nostro stile): a sinistra un terzo, la testa (etichetta, titolo 48, credito; niente data) e il testo nella colonna
   di lettura (es-art-tx); a destra due terzi, le foto intere una sotto l'altra (es-art-ph), 24 fra una e l'altra; sotto, fuori
   dall'articolo, la chiusura (es-box) a 72. La colonna piu' corta scende piu' piano dell'altra e arrivano in fondo insieme
   (Marco, 24/10/2026, come nello shop di oggi; lo fa assets/js/eyeshot-articolo.js): nessuna delle due resta vuota. Le foto mai tagliate,
   tutte larghe quanto la colonna, credito 13 grigio sotto. Al telefono una colonna: testa, foto in evidenza, testo, le altre foto. --- */
/* fra le due colonne 72, la distanza fra i capitoli (Marco, 24/10/2026: piu' aria; con 48 il testo sembrava appoggiato alla foto) */
.es-art{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);column-gap:var(--ey-72);align-items:start}
.es-art>*{margin-block:0}
.es-art.es-art-solo{grid-template-columns:minmax(0,1fr)}
.es-art+.es-box{margin-top:var(--ey-72)}
.es-art-tx>*{margin-block:0}
.es-art-tx>*+*{margin-top:var(--ey-48)}
.es-art .es-prose{padding-bottom:0}
.es-art-ph{display:flex;flex-direction:column}
.es-art-ph>*{margin-block:0}
/* 24 fra le foto, come nello shop di oggi (Marco, 24/10/2026: a 48 «troppa», prima nel libro, poi anche negli articoli) */
.es-art-ph>*+*{margin-top:var(--ey-24)}
/* le briciole sopra l'articolo (le scrive il server): 24 fino alla testa */
.es-crumbs+:is(.es-art,.es-head){margin-top:var(--ey-24)}
/* solo i lati: sopra e sotto li dice la colonna (24/10/2026: con margin:0 qui le foto del libro e delle serie erano attaccate) */
.es-art-im{margin-inline:0;max-width:100%}
/* tutte larghe quanto la colonna (Marco, 24/10/2026: «una finisce prima, una finisce dopo»): le verticali sono piu' alte dello schermo e si scorrono */
.es-art-im img{display:block;width:100%;height:auto}
.es-art-im figcaption{margin:var(--ey-8) 0 0;font-size:var(--ey-s13);line-height:var(--ey-lh-text);color:var(--ey-grey-1)}
/* il libro (pagina del negozio, stesso pezzo dell'articolo, 24/10/2026): i capitoli nella colonna sinistra a 72 come le pagine,
   le righe della scheda chiave e valore, i gruppi uno sotto l'altro; sotto la prima foto la barra per comprare, ferma in cima
   mentre si guardano le foto (Marco, 11/10/2026), su fondo bianco, sotto la barra di WordPress per chi amministra */
.es-art-tx>.es-box{margin-top:var(--ey-72)}
.es-libro .es-tr{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
.es-libro-gruppi{display:flex;flex-direction:column;gap:var(--ey-48)}
/* dentro il capitolo le persone e i gruppi non portano filo e 72 di loro: il capitolo li ha gia' (Marco, 24/10/2026: sotto
   «Who made it» restavano un vuoto e un secondo filo) */
.es-libro-gruppi>*{margin:0;padding-top:0;border-top:0}
/* la barra come quella di oggi (Marco, 24/10/2026): due meta' larghe, subito sotto la foto (16). Non si ferma piu' mentre si
   scorre (Marco, 25/10/2026: «va a cavallo con il menu sopra, magari bisogna non farlo che si ferma»): con la testata
   trasparente, quando la testata ricompare la barra si fermava sotto di lei e fra le due passava una striscia di foto.
   Per comprare restano la barra al suo posto e il carrello ancorato al margine. */
/* i bottoni affiancati e larghi uguali quando ci stanno; quando una scritta non ci sta nella sua meta' il secondo va sotto, mai
   la scritta fuori dal bordo (Marco, 29/10/2026: a 1024 «Browse the magazines» usciva dal bottone) */
.es-libro-bar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ey-8) var(--ey-16);margin:0;padding:var(--ey-16) 0;background:var(--ey-bg)}
/* la barra del libro a 24 dalla foto sopra e da quella sotto (8 piu' i 16 della barra). Al telefono restano le regole della colonna sola. */
.es-art-ph>.es-libro-bar{margin-top:0}
.es-art-ph>.es-libro-bar+*{margin-top:var(--ey-32)}
@media (min-width:782px){
 .es-art-ph>.es-libro-bar{margin-top:var(--ey-8)}
 .es-art-ph>.es-libro-bar+*{margin-top:var(--ey-8)}
}
.es-libro-bar>.es-btn{flex:1 1 0}
/* un bottone solo (il libro esaurito: la strada verso cio' che si compra) prende tutta la barra */
.es-libro-bar>.es-btn:only-child{flex-basis:100%}
/* al telefono una cosa per riga, larga tutto lo schermo (27/10/2026: nella barra dell'abbonamento «Browse the magazines» in
   meta' schermo usciva dal suo bottone) */
@media (max-width:600px){.es-libro-bar>*{flex-basis:100%}}
.es-libro-bar>*{margin:0}
/* la riga del pre-ordine sopra il numero e il bottone (03/11/2026): a tutta riga, testo 15 in inchiostro come nel carrello */
.es-libro-bar>.es-preordine{flex-basis:100%;margin:0 0 var(--ey-8);font-size:var(--ey-s15);line-height:var(--ey-lh-text);color:var(--ey-ink)}
/* il numero di copie − 1 + accanto al bottone, come nel carrello (Marco, 03/11/2026: «C, col numero»). Alto quanto il
   bottone, bordo dei campi; al posto dei cinque quadrati */
.es-qty{display:inline-flex;align-items:stretch;align-self:stretch;flex:none;border:var(--ey-line) solid var(--ey-line-field)}
.es-qty button{width:var(--ey-32);padding:0;font-size:var(--ey-s15);color:var(--ey-ink);background:none;border:0;cursor:pointer}
.es-qty input{width:2ch;padding:0;font-size:var(--ey-s15);font-variant-numeric:tabular-nums;color:var(--ey-ink);background:none;border:0;-moz-appearance:textfield;appearance:textfield}
.es-qty input::-webkit-inner-spin-button,.es-qty input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
@media (max-width:600px){.es-libro-bar>.es-qty{flex-basis:auto}.es-libro-bar>.es-qty+.es-btn{flex-basis:0}}
@media (max-width:781px){
 /* in una colonna ogni pezzo e' largo quanto lo schermo (align-items:start delle due colonne qui li stringeva: barra a 155) */
 .es-art{display:flex;flex-direction:column;align-items:stretch;gap:var(--ey-48)}
 .es-art-tx,.es-art-ph{display:contents}
 .es-art-tx>.es-head{order:1}
 .es-art-ph>:first-child{order:2}
 .es-art-tx>:not(.es-head){order:3}
 .es-art-ph>:not(:first-child){order:4}
 .es-art-ph>.es-libro-bar{order:2}
 .es-art-ph>*+*{margin-top:0}
 /* al telefono la barra resta attaccata alla foto come al computer (non i 48 fra un pezzo e l'altro) */
 .es-art-ph>.es-libro-bar{margin-top:calc(var(--ey-48) * -1)}
 .es-art-tx>*+*{margin-top:0}
 /* nel libro l'apertura (copertina, dati, bottone) c'e' gia': la prima foto non apre, quindi al telefono la descrizione, poi
    tutte le foto di seguito, poi le schede (Marco, 31/10/2026: una foto sola sopra il testo e le altre in fondo, versione A) */
 .es-libro .es-art-ph>:not(.es-libro-bar){order:4}
 .es-libro .es-art-tx>.es-box{order:5}
}

/* --- Domande (FAQ; Marco, 12/10/2026, versione C): niente apertura; al computer l'indice dei temi e' una colonna stretta a
   sinistra (3/12) ferma mentre si scorre, le domande a destra; il tema che si legge in inchiostro e sottolineato, gli altri
   grigi; sul telefono l'indice e' una riga di parole sopra le domande. In fondo «Still have a question?» 30 e un bottone.
   es-faq-toc (indice), es-faq-group (un tema), es-faq-end (chiusura) li mette il server ai canvas faq-toc, stick1 e faq-end;
   il tema che si legge lo segna lo script di Stile_Anteprima::faq_toc (is-current). Le domande sono il blocco Accordion di
   WordPress, vestito dal tema. --- */
.es-faq-toc{margin-top:0;padding-top:var(--ey-48)}
.es-faq-toc ul{display:flex;flex-wrap:wrap;gap:var(--ey-8) var(--ey-24);list-style:none;margin:0;padding:0}
.es-faq-toc li{margin:0;padding:0}
.es-faq-toc a{display:inline;padding:0;font-size:var(--ey-s15);color:var(--ey-ink);text-decoration:none}
.es-faq-toc a:is(:hover,.is-current){text-decoration:underline;text-decoration-thickness:var(--ey-line);text-underline-offset:.3em}
:is(.es-faq-toc+.es-faq-group,.es-faq-toc+script+.es-faq-group){margin-top:var(--ey-48)}
/* 29/10/2026 (Marco: «quando si apre la pagina quell'indice e' in basso, dovrebbe stare in alto»; «vince sempre la linea di stile
   comune»): l'indice parte nella riga del primo tema (prima la terza: partiva dal secondo, 500 sotto); i temi sono capitoli come
   quelli delle pagine di testo, filo e titolo a 30 (la regola di .es-prose-toc>h2; prima 48); le risposte a 20, il testo di
   lettura delle pagine nuove (prima 15) */
:is(.es-faq-group,.es-faq-end)>.wp-block-spacer{display:none} /* gli spazi scritti a mano nella pagina sotto ogni tema (72 dal titolo alla prima domanda): lo spazio e' quello dei capitoli, 24; «Still have a question?» e' l'ultimo capitolo, col suo filo (29/10/2026: senza gli spazi era attaccata all'ultima domanda) */
.es-faq-group :is(p,li),.es-faq-end p{font-size:var(--ey-s20);line-height:var(--ey-lh-lead)}
.es-faq-end{padding-bottom:var(--ey-section)}
.es-faq-end p{margin:0 0 var(--ey-24)}
@media (min-width:782px){
 :has(>.es-faq-toc){display:grid;grid-template-columns:3fr 9fr;column-gap:var(--ey-48)}
 :has(>.es-faq-toc)>*{grid-column:1/-1}
 :has(>.es-faq-toc)>.es-faq-toc{grid-column:1;grid-row:2 / span 40;align-self:start;position:sticky;top:calc(var(--ey-72) + var(--ey-24));margin:var(--ey-section) 0 0 calc(var(--ey-margin) * -1);padding-top:calc(var(--ey-32) + var(--ey-24));padding-right:0} /* la prima voce all'altezza del titolo del primo tema: il suo spazio sopra (32) e sotto il filo (24), come nei Terms */
 :has(>.es-faq-toc)>:is(.es-faq-group,.es-faq-end){grid-column:2;margin-left:0;padding-left:0}
 :is(.es-faq-toc+.es-faq-group,.es-faq-toc+script+.es-faq-group){margin-top:var(--ey-section)}
 .es-faq-toc ul{flex-direction:column}
 .es-faq-toc a{color:var(--ey-grey-1)}
 .es-faq-toc a:is(:hover,.is-current){color:var(--ey-ink)}
}

/* --- Accessibilita' (scelte di Marco del 17/10/2026, viste in anteprima) ---
   Il segno della tastiera: col tasto Tab una cornice di 2 attorno a cio' su cui ci si trova. Mai col mouse o col dito.
   Non su cio' che ha tabindex="-1": col Tab non ci si arriva, il fuoco ce lo mette uno script (l'avviso del carrello, 31/10/2026).
   Area di tocco: i comandi piccoli della barra rispondono al dito per almeno 24 punti, senza cambiare cosa si vede. */
:is(a,button,summary,[tabindex]:not([tabindex="-1"]),.es-chip,.es-btn):focus-visible:where(:root:not([data-puntatore]) *){outline:var(--ey-line-active) solid var(--ey-ink) !important /* serve: chi usa la tastiera deve sempre vedere dove si trova, qualunque cosa dica un foglio di pagina */;outline-offset:2px !important /* serve: come sopra */}
:root[data-puntatore] :focus-visible{outline:none} /* col mouse o col dito nemmeno il segno del browser: dopo un clic, Esc o il fuoco rimesso da uno script lo accendevano (Marco, 30/10/2026; assets/js/eyeshot-tasti.js) */
/* non le voci del menu a tendina: sono gia' alte 34 e larghe tutto il menu, e un'area che sporge lo faceva scorrere di 6 di lato
   sotto il mouse (trovato da verifica.js il 20/10/2026, lo stesso errore della barra del 18/10) */
:is(.es-top,.es-soc) a:not(.es-menu a){position:relative}
:is(.es-top,.es-soc) a:not(.es-menu a)::after{content:"";position:absolute;inset:calc(var(--ey-8) * -.75)}
}

/* --- La pagina di una serie dell'Open Call (cantiere del sito, 27/10/2026; includes/class-serie.php, docs/cantiere-sito/15-pagine-serie.md).
   Marco: «riprogettala completamente». Una serie e' una sequenza di foto con un titolo, come un libro. Scelta da Marco fra due
   versioni (27/10/2026): si apre con la foto (l'apertura A della rosa, es-ap, col titolo della serie che la riempie), sotto la
   riga di dati; le parole dell'autore a 20 nella colonna di lettura spostata a destra (lo spazio bianco a sinistra, come la testa
   a 96), poi le altre foto in fogli larghi uguali, intere, mai piu' alte dello schermo, col numero nella serie sotto; una verticale
   mai da sola, accanto alla foto vicina e alta come lei (Marco, 27/10/2026: «si perde la linearita'»). Senza foto orizzontali la
   testa sulla pagina bianca (es-serie-testa).
   Sulla griglia a 12: orizzontali e coppie nelle colonne 2-11, una verticale sola nelle 4-9. 16 fra le foto (la regola della
   rosa), 72 fra i pezzi diversi (apertura, parole, foto). Al telefono una colonna, le coppie una sotto l'altra. --- */
.es-serie{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--ey-24);margin:0} /* lo spazio in cima lo da' es-main, come in ogni pagina (30/10/2026: prima 24 in piu', del tempo in cui la pagina del libro non aveva es-main) */
.es-serie>*{grid-column:1 / -1;margin:var(--ey-72) 0 0;min-width:0}
.es-serie>:first-child{margin-top:0}
.es-serie-testa>.es-head{margin:0 0 var(--ey-gap-label)}
.es-serie-testa>.es-dati{margin-top:var(--ey-24)}
/* il titolo lungo va a capo a 96, con la spaziatura e l'interlinea del 96 (dal 27/10/2026 notte, come A24: ogni grandezza la sua) */
/* il titolo di un lavoro sulla pagina bianca (note, interviste, Picturing the Past, libri; Marco, 27/10/2026): il titolo di
   tutto il sito, un peso solo (il Text 65 Medium sul sito, notte del 27/10/2026, al posto dei «due tipi di titolo» della sera), con la
   spaziatura e l'interlinea del 96, ma a 96 fisso (al telefono come i titoli del telefono): sulla foto il titolo della serie riempie la riga come una locandina, sulla pagina
   bianca la grandezza che cambiava da pagina a pagina (126, 90, 86) sembrava casuale. Lungo va a capo. Sulla prima riga a
   destra il numero, grigio, grande quanto il titolo (Marco: «enfatizzare il numero, grande quanto il testo, a destra»); nelle
   interviste sulla prima riga il nome dell'ospite, sotto il tema in grigio («nome e tema su due righe») */
.es-t96p{margin:0;font-family:var(--ey-font-display);font-weight:var(--ey-w-title);font-size:var(--ey-s96);line-height:var(--ey-lh-xl);letter-spacing:var(--ey-ls-xl);color:var(--ey-ink)}
.es-t96p>*{display:block}
/* la spaziatura arriva anche ai pezzi del titolo: l'azzeramento in cima alla cornice («:where(html) :where(:not(svg...))») la
   rimetteva a zero su ogni span, e il titolo veniva l'8% piu' largo di quello delle serie (misurato da Claude dopo che Marco
   l'ha visto, 27/10/2026: «lo spazio tra i caratteri non mi sembra assolutamente uguale») */
/* e il carattere: anche lui lo rimette la base su ogni elemento (il testo); i pezzi del titolo prendono il Display del titolo
   (27/10/2026 notte, visto installando: le parole restavano nel carattere del testo di base) */
.es-t96p span{font-family:inherit;letter-spacing:inherit}
.es-t96p-riga{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:first baseline;column-gap:var(--ey-gap-num)}
.es-t96p :is(.es-t96p-tit,.es-t96p-tema){text-wrap:balance;overflow-wrap:anywhere}
.es-t96p-n{color:var(--ey-grey-1);font-variant-numeric:tabular-nums}
.es-t96p-tema{color:var(--ey-grey-1)}
/* al telefono i titoli da 96 scendono a 36: spaziatura e interlinea della loro grandezza nuova, quelle del 48 (27/10/2026 notte) */
@media (max-width:781px){.es-t96p{font-size:var(--ey-s48-phone);line-height:var(--ey-lh-l);letter-spacing:var(--ey-ls-l)}}
.es-serie-o,.es-serie-coppia{grid-column:2 / 12}
.es-serie-v{grid-column:4 / 10}
/* fra le foto 16, come in tutta la rosa (Marco, 26/10/2026; sulle serie, 27/10/2026: «la distanza tra le fotografie mi sembra
   troppa», erano 72): fra le due foto di un foglio e fra un foglio e l'altro, sotto la didascalia col numero */
.es-serie-foglio{display:flex;justify-content:center;align-items:flex-start;gap:var(--ey-16)}
.es-serie>.es-serie-foglio+.es-serie-foglio{margin-top:var(--ey-16)}
.es-serie-foglio figure{display:flex;flex-direction:column;min-width:0;margin:0}
/* tutti i fogli larghi uguali, una foto sotto l'altra con la stessa larghezza, qualunque sia la sua misura (Marco,
   27/10/2026: «la fotografia di sopra deve essere larga come quella di sotto... dobbiamo mantenere una linea di design»;
   vale per serie, note, interviste, Picturing the Past). Prima una foto non 3:2 si stringeva per non superare l'altezza
   dello schermo (da 1012 a 1137 invece di 1138 a 1470): la larghezza vince sull'altezza. La larghezza dal foglio, non dalla
   misura del file: stringendo la finestra il browser scarica la copia piccola e, riallargando, la foto restava piccola.
   Resta piu' stretta solo una verticale che non ha nessuna foto accanto (es-serie-v), oggi in nessuna pagina */
.es-serie-foglio:not(.es-serie-coppia) figure{width:100%}
.es-serie-foglio img{display:block;width:100%;height:auto}
/* il video nella pagina (le interviste Eyeshot 50mm, 27/10/2026; Serie::video, eyeshot-rosa.js): la foto dell'ospite intera,
   col segno del play sopra (sotto); gli altri video (i sottotitoli giapponesi) sotto, a 16, coi bottoni del sito. Premuto, il video di YouTube si apre nel riquadro della foto, che non cambia misura: la foto
   resta intera, le bande nere sono del video */
.es-video-im{position:relative;cursor:pointer}
.es-video-im>iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:var(--ey-d-bg)}
.es-video>.es-video-cmd{display:flex;flex-wrap:wrap;gap:var(--ey-8);margin:var(--ey-16) 0 0} /* sopra la didascalia dei fogli (a 8, grigia) */
/* il play sulla foto (Marco, 27/10/2026), come il trailer di A24: tutta la foto e' il bottone, al centro un triangolo di filo
   bianco; passando il mouse si fa un poco piu' grande. L'ombra leggera lo fa leggere anche su un cielo bianco. Quando il
   video si apre, il segno sparisce. Prima a 1 pixel e 72 (come A24): su una foto piena di dettagli non si vedeva (Marco non
   l'ha trovato su Ximena Echague); ora a 1,5 pixel, 96 al computer e 72 al telefono (Marco: «piu' visibile, restando minimale») */
.es-video-play{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;width:100%;margin:0;padding:0;background:none;border:0;color:var(--ey-d-ink);cursor:pointer;filter:var(--ey-ombra-segno)}
.es-video-play svg{width:calc(var(--ey-48) * 2);height:calc(var(--ey-48) * 2);transition:transform .3s ease-in-out}
.es-video-play:hover svg,.es-video-play:focus-visible:where(:root:not([data-puntatore]) *) svg{transform:scale(1.08)}
.es-video-play:focus-visible:where(:root:not([data-puntatore]) *){outline:var(--ey-line-active) solid var(--ey-d-ink);outline-offset:calc(var(--ey-8) * -1)}
.es-video-im:has(iframe)>.es-video-play{display:none}
@media (max-width:600px){.es-video-play svg{width:var(--ey-72);height:var(--ey-72)}}
@media (prefers-reduced-motion:reduce){.es-video-play svg{transition:none}}
/* due foto in un foglio, alte uguali: ognuna larga in proporzione alla sua forma (--r); il foglio largo quanto gli altri
   (Marco, 27/10/2026: la stessa larghezza vince sull'altezza dello schermo; prima due verticali si fermavano a 1123) */
.es-serie-coppia{width:100%}
.es-serie-coppia figure{flex:var(--r,1) 1 0}
/* ogni foto intera nello schermo, la serie sempre larga uguale (Marco, 29/10/2026, opzione B su tavola: «sul MacBook Air la
   foto non si vede per intero»; al MacBook Air e al Full HD le orizzontali toccavano il bordo e due verticali affiancate
   uscivano, alte 874 su 800). La larghezza comune dei fogli la decide il foglio piu' alto della pagina (Serie::articolo: le
   sue proporzioni --rf-min e, se e' una coppia, lo spazio fra le sue due foto): alto quanto lo schermo meno 120 (la testata quando torna,
   il numero sotto, l'aria), tutti gli altri larghi come lui. Mai piu' grandi di oggi: sui monitor grandi resta la colonna.
   La regola del 27/10 resta (la larghezza uguale vince): cambia solo quale larghezza. La verticale sola (es-serie-v) con le
   sue proporzioni. Al telefono le foto vanno una sotto l'altra ed entrano gia' intere */
@media (min-width:782px){
 .es-serie{--serie-h:calc(100svh - var(--ey-120))}
 .es-serie>:is(.es-serie-o,.es-serie-coppia){justify-self:center;width:100%;max-width:calc(var(--rf-min) * var(--serie-h))}
 .es-serie-alta-coppia>:is(.es-serie-o,.es-serie-coppia){max-width:calc(var(--rf-min) * var(--serie-h) + var(--ey-16))}
 .es-serie>.es-serie-v{justify-self:center;width:100%;max-width:calc(var(--rf) * var(--serie-h))}
}
.es-serie-foglio figcaption{margin:var(--ey-8) 0 0;font-size:var(--ey-s13);line-height:var(--ey-lh-text);color:var(--ey-grey-1)}
/* le parole in sei colonne, dalla quinta: righe di circa 66 caratteri a 20 (con otto colonne erano 88, troppo lunghe da leggere;
   controllo della pagina, 27/10/2026) */
.es-serie-parole{grid-column:5 / span 6}
/* la pagina del libro (27/10/2026): i capitoli (chi l'ha fatto, l'edizione, i materiali) dalla quinta colonna come le parole,
   lo spazio bianco a sinistra; a tutta larghezza le righe chiave e valore erano lunghe 1374 e il testo dei materiali non si
   leggeva */
.es-serie>.es-box{grid-column:5 / -1}
/* fra l'apertura della pagina e il libro aperto la distanza fra i pezzi della pagina */
.es-serie+.es-art{margin-top:var(--ey-72)}
/* --- La foto di dentro (es-dentro, 27/10/2026; Marco: «quando il mouse va sopra alla copertina si vede una fotografia del
   libro... va a coprire i bordi, fa un bel lavoro»). Ogni scheda che porta a un libro mostra di base la copertina (il prodotto:
   si riconosce, e al telefono, senza mouse, si vede solo quella); al passaggio del mouse, o col tasto Tab, una foto del libro
   prende il suo posto e riempie la cornice, coprendo il bianco attorno al libro. Dal 28/10/2026 nelle fasce dei titoli la
   scheda e' gia' una foto del libro e al passaggio arriva un'altra foto dello stesso titolo, in dissolvenza (Marco: «cambia
   la foto, ne mette un'altra... piu' di design»; prima taglio netto come il negozio di A24). Sui telefoni non c'e' e non si
   scarica (display:none). Una regola per tutte le schede: la fascia degli altri titoli, le schede dei libri, la ricerca; il
   blocco dei libri della home fa lo stesso. --- */
.es-dentro{display:none}
@media (hover:hover) and (pointer:fine){
 :is(.es-tile-im,.es-card-im,.es-nuovo-im):has(>.es-dentro){position:relative}
 .es-dentro{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .3s ease-in-out}
 a:is(:hover,:focus-visible:where(:root:not([data-puntatore]) *)) .es-dentro{opacity:1}
}
@media (prefers-reduced-motion:reduce){.es-dentro{transition:none}}
/* --- IL PASSAGGIO DEL MOUSE, la regola per tutto il sito (Marco, 29/10/2026: «vorrei che si adottasse come una linea guida...
   cosi' si capisce quando uno c'ha il mouse sopra che si seleziona»). Col mouse su una cosa che si apre (una scheda con la foto,
   una riga di un elenco) la foto si avvicina (dal 30/10/2026 notte; prima la cornice intorno alla foto) e il suo nome passa al grigio; il resto non cambia, niente
   sottolineato, nessuna scheda vicina si spegne. Solo il nome: Paese, autore, numero restano. Un posto solo per tutti i pezzi:
   schede delle griglie e delle fasce, card, premi, tre verticali, doppia pagina, episodi, nota in grande, elenco a titoli grandi.
   Sostituisce le regole del 27/10 (si spegnevano le altre schede) e il sottolineato degli episodi e della nota in grande. --- */
:is(.es-tile-tx :is(b,strong),.es-card>b,.es-vert b,.es-due-tx b,.es-ep-tx b,.es-pg-tx b,.es-el b){transition:color .3s ease-in-out}
@media (hover:hover) and (min-width:900px){
 /* .es-apri-go: ogni foto che apre la fascia, premi e griglie (menzioni, finalisti singoli); prima solo i premi, e nella
    griglia il nome restava nero (Marco, 29/10/2026: «la cornice e il nome che diventa grigio... qui nell'Open Call non va») */
 :is(a.es-tile:hover .es-tile-tx :is(b,strong),a.es-card:hover>b,.es-apri-go:hover .es-tile-tx b,.es-vert a:hover b,:is(.es-due-a,.es-due-b):hover .es-due-tx b,.es-ep a:hover b,a.es-pg:hover b,.es-el a:hover b){color:var(--ey-grey-2)}
}
@media (prefers-reduced-motion:reduce){:is(.es-tile-tx :is(b,strong),.es-card>b,.es-vert b,.es-due-tx b,.es-ep-tx b,.es-pg-tx b,.es-el b){transition:none}}
/* --- La foto che si avvicina al passaggio del mouse (30/10/2026 notte; Marco: «questa piccola cornicetta nera... l'avevo
   pensata quando c'era uno sfondo nero... cosi' e' brutta, non si capisce e non si vede... fare quell'effetto che la foto si
   zooma leggermente, molto usato, ma anche molto efficace»). Sostituisce la cornice del 29/10 (un filo nel colore del testo
   dentro il bordo della foto, preso da A24). Su ogni foto che si clicca (schede, fasce, tre verticali, premi, libri nuovi,
   doppia pagina, episodi): la foto cresce del 4% dentro la sua cornice, che resta ferma e la taglia, in un movimento solo e
   morbido coi valori dello stile (due volte il tempo lento, la curva che rallenta alla fine); il nome passa al grigio come
   prima (sopra). Coi premi delle serie, tre foto in un comando, solo quella sotto il mouse. Col tasto Tab lo stesso, oltre al
   segno della tastiera. L'elenco a titoli grandi no: la sua foto segue il puntatore. --- */
:is(a,button) :is(.es-tile-im,.es-vert-im,.es-card-im,.es-premio-f,.es-nuovo-im,.es-due-im,.es-pg-im){position:relative;overflow:hidden}
:is(a,button) :is(.es-tile-im,.es-vert-im,.es-card-im,.es-premio-f,.es-nuovo-im,.es-due-im,.es-pg-im) img{transition:transform calc(var(--ey-t-lento) * 2) var(--ey-curva)}
@media (hover:hover){
 :is(a,button):is(:hover,:focus-visible:where(:root:not([data-puntatore]) *)) :is(.es-tile-im,.es-vert-im,.es-card-im,.es-nuovo-im,.es-due-im,.es-pg-im) img,
 :is(a,button):focus-visible:where(:root:not([data-puntatore]) *) .es-premio-f img,
 :is(a,button) .es-premio-f:hover img{transform:scale(1.04)}
}
@media (prefers-reduced-motion:reduce){:is(a,button) :is(.es-tile-im,.es-vert-im,.es-card-im,.es-premio-f,.es-nuovo-im,.es-due-im,.es-pg-im) img{transition:none;transform:none}}
.es-serie-parole>*{margin:0;font-size:var(--ey-s20);line-height:var(--ey-lh-lead);color:var(--ey-ink)}
.es-serie-parole>*+*{margin-top:var(--ey-16)}
/* L'apertura delle serie sulla foto con la testata delle interviste (Marco, 29/10/2026 notte, sulla tavola: «si', applicalo»):
   la foto da bordo a bordo, in fondo il nome del fotografo e il titolo della serie a 96 (es-t96p), il nome nell'inchiostro
   del tema scuro e il titolo nel suo grigio; sotto la foto i dati. Al telefono nome e titolo sotto la foto, nero e grigio */
.es-serie:has(>.es-ap:first-child){margin-top:0}
.es-serie>.es-ap{margin:0 calc(var(--ey-margin) * -1)}
.es-serie>.es-ap+.es-serie-sotto{margin-top:var(--ey-24)}
.es-ap>.es-ap-t{position:absolute;left:var(--ey-margin-bordo);right:var(--ey-margin-bordo);bottom:var(--ey-24);z-index:1;color:var(--ey-d-ink)}
.es-ap>.es-ap-t .es-t96p-tema{color:var(--ey-d-grey-1)}
@media (max-width:781px){
 .es-ap>.es-ap-t{position:static;grid-area:2 / 1;margin:var(--ey-16) var(--ey-margin-bordo) 0;color:var(--ey-ink)} /* static: left e bottom della foto spostavano il titolo */
 .es-ap>.es-ap-t .es-t96p-tema{color:var(--ey-grey-1)}
}
@media (max-width:781px){
 .es-serie>*,.es-serie-o,.es-serie-v,.es-serie-coppia,.es-serie-parole,.es-serie>.es-box{grid-column:1 / -1}
 .es-serie>*{margin-top:var(--ey-48)}
 .es-serie-coppia{flex-direction:column;gap:var(--ey-16)}
 /* larghe quanto la colonna, come le foto sole: senza la larghezza la foto prendeva quella del file scaricato (il foglio
    allinea in cima, quindi non si allarga da sola) e su Safari dell'iPhone la verticale di una coppia restava piu' stretta
    e a sinistra (Marco, 31/10/2026, Tanzir Ahmed, foto 15) */
 .es-serie-coppia figure{flex:none;width:100%}
}