/* GENERATO da gen-v2.mjs — non modificare a mano.
   Art direction delle foto reali: forma diversa per fascia di viewport.
   Ogni foto espone le proprie sorgenti come custom property; le classi .ad-*
   decidono quale usare, cosi una foto si dichiara una volta sola anche se
   compare in tre punti diversi.
   Due dichiarazioni per regola: la prima e il ripiego in WebP semplice per i
   browser senza image-set() (Safari < 17, Firefox < 113), la seconda vince dove
   image-set() e valida e porta l'AVIF. */
.f-gesto{--fr-tall-f:url("/foto/reali/gesto-tall-800.webp");--fr-tall:image-set(url("/foto/reali/gesto-tall-800.avif") type("image/avif"),url("/foto/reali/gesto-tall-800.webp") type("image/webp"));--fr-tall2-f:url("/foto/reali/gesto-tall-1200.webp");--fr-tall2:image-set(url("/foto/reali/gesto-tall-1200.avif") type("image/avif"),url("/foto/reali/gesto-tall-1200.webp") type("image/webp"));--fr-quad-f:url("/foto/reali/gesto-quad-900.webp");--fr-quad:image-set(url("/foto/reali/gesto-quad-900.avif") type("image/avif"),url("/foto/reali/gesto-quad-900.webp") type("image/webp"));--fr-wide-f:url("/foto/reali/gesto-wide-1440.webp");--fr-wide:image-set(url("/foto/reali/gesto-wide-1440.avif") type("image/avif"),url("/foto/reali/gesto-wide-1440.webp") type("image/webp"));--fr-wide2-f:url("/foto/reali/gesto-wide-2400.webp");--fr-wide2:image-set(url("/foto/reali/gesto-wide-2400.avif") type("image/avif"),url("/foto/reali/gesto-wide-2400.webp") type("image/webp"))}
.f-al-lavoro{--fr-tall-f:url("/foto/reali/al-lavoro-tall-800.webp");--fr-tall:image-set(url("/foto/reali/al-lavoro-tall-800.avif") type("image/avif"),url("/foto/reali/al-lavoro-tall-800.webp") type("image/webp"));--fr-tall2-f:url("/foto/reali/al-lavoro-tall-1200.webp");--fr-tall2:image-set(url("/foto/reali/al-lavoro-tall-1200.avif") type("image/avif"),url("/foto/reali/al-lavoro-tall-1200.webp") type("image/webp"));--fr-quad-f:url("/foto/reali/al-lavoro-quad-900.webp");--fr-quad:image-set(url("/foto/reali/al-lavoro-quad-900.avif") type("image/avif"),url("/foto/reali/al-lavoro-quad-900.webp") type("image/webp"));--fr-wide-f:url("/foto/reali/al-lavoro-wide-1440.webp");--fr-wide:image-set(url("/foto/reali/al-lavoro-wide-1440.avif") type("image/avif"),url("/foto/reali/al-lavoro-wide-1440.webp") type("image/webp"));--fr-wide2-f:url("/foto/reali/al-lavoro-wide-2400.webp");--fr-wide2:image-set(url("/foto/reali/al-lavoro-wide-2400.avif") type("image/avif"),url("/foto/reali/al-lavoro-wide-2400.webp") type("image/webp"))}
.f-fade{--fr-tall-f:url("/foto/reali/fade-tall-800.webp");--fr-tall:image-set(url("/foto/reali/fade-tall-800.avif") type("image/avif"),url("/foto/reali/fade-tall-800.webp") type("image/webp"));--fr-tall2-f:url("/foto/reali/fade-tall-1200.webp");--fr-tall2:image-set(url("/foto/reali/fade-tall-1200.avif") type("image/avif"),url("/foto/reali/fade-tall-1200.webp") type("image/webp"));--fr-quad-f:url("/foto/reali/fade-quad-900.webp");--fr-quad:image-set(url("/foto/reali/fade-quad-900.avif") type("image/avif"),url("/foto/reali/fade-quad-900.webp") type("image/webp"));--fr-wide-f:url("/foto/reali/fade-wide-1440.webp");--fr-wide:image-set(url("/foto/reali/fade-wide-1440.avif") type("image/avif"),url("/foto/reali/fade-wide-1440.webp") type("image/webp"));--fr-wide2-f:url("/foto/reali/fade-wide-2400.webp");--fr-wide2:image-set(url("/foto/reali/fade-wide-2400.avif") type("image/avif"),url("/foto/reali/fade-wide-2400.webp") type("image/webp"))}
.f-macchinetta{--fr-tall-f:url("/foto/reali/macchinetta-tall-800.webp");--fr-tall:image-set(url("/foto/reali/macchinetta-tall-800.avif") type("image/avif"),url("/foto/reali/macchinetta-tall-800.webp") type("image/webp"));--fr-tall2-f:url("/foto/reali/macchinetta-tall-1200.webp");--fr-tall2:image-set(url("/foto/reali/macchinetta-tall-1200.avif") type("image/avif"),url("/foto/reali/macchinetta-tall-1200.webp") type("image/webp"));--fr-quad-f:url("/foto/reali/macchinetta-quad-900.webp");--fr-quad:image-set(url("/foto/reali/macchinetta-quad-900.avif") type("image/avif"),url("/foto/reali/macchinetta-quad-900.webp") type("image/webp"));--fr-wide-f:url("/foto/reali/macchinetta-wide-1440.webp");--fr-wide:image-set(url("/foto/reali/macchinetta-wide-1440.avif") type("image/avif"),url("/foto/reali/macchinetta-wide-1440.webp") type("image/webp"));--fr-wide2-f:url("/foto/reali/macchinetta-wide-2400.webp");--fr-wide2:image-set(url("/foto/reali/macchinetta-wide-2400.avif") type("image/avif"),url("/foto/reali/macchinetta-wide-2400.webp") type("image/webp"))}
.f-bottega-int{--fr-tall-f:url("/foto/reali/bottega-int-tall-800.webp");--fr-tall:image-set(url("/foto/reali/bottega-int-tall-800.avif") type("image/avif"),url("/foto/reali/bottega-int-tall-800.webp") type("image/webp"));--fr-tall2-f:url("/foto/reali/bottega-int-tall-1200.webp");--fr-tall2:image-set(url("/foto/reali/bottega-int-tall-1200.avif") type("image/avif"),url("/foto/reali/bottega-int-tall-1200.webp") type("image/webp"));--fr-quad-f:url("/foto/reali/bottega-int-quad-900.webp");--fr-quad:image-set(url("/foto/reali/bottega-int-quad-900.avif") type("image/avif"),url("/foto/reali/bottega-int-quad-900.webp") type("image/webp"));--fr-wide-f:url("/foto/reali/bottega-int-wide-1440.webp");--fr-wide:image-set(url("/foto/reali/bottega-int-wide-1440.avif") type("image/avif"),url("/foto/reali/bottega-int-wide-1440.webp") type("image/webp"));--fr-wide2-f:url("/foto/reali/bottega-int-wide-2400.webp");--fr-wide2:image-set(url("/foto/reali/bottega-int-wide-2400.avif") type("image/avif"),url("/foto/reali/bottega-int-wide-2400.webp") type("image/webp"))}
.f-fronte{--fr-tall-f:url("/foto/reali/fronte-tall-800.webp");--fr-tall:image-set(url("/foto/reali/fronte-tall-800.avif") type("image/avif"),url("/foto/reali/fronte-tall-800.webp") type("image/webp"));--fr-tall2-f:url("/foto/reali/fronte-tall-1200.webp");--fr-tall2:image-set(url("/foto/reali/fronte-tall-1200.avif") type("image/avif"),url("/foto/reali/fronte-tall-1200.webp") type("image/webp"));--fr-quad-f:url("/foto/reali/fronte-quad-900.webp");--fr-quad:image-set(url("/foto/reali/fronte-quad-900.avif") type("image/avif"),url("/foto/reali/fronte-quad-900.webp") type("image/webp"));--fr-wide-f:url("/foto/reali/fronte-wide-1440.webp");--fr-wide:image-set(url("/foto/reali/fronte-wide-1440.avif") type("image/avif"),url("/foto/reali/fronte-wide-1440.webp") type("image/webp"));--fr-wide2-f:url("/foto/reali/fronte-wide-2400.webp");--fr-wide2:image-set(url("/foto/reali/fronte-wide-2400.avif") type("image/avif"),url("/foto/reali/fronte-wide-2400.webp") type("image/webp"))}
.f-vetrina{--fr-tall-f:url("/foto/reali/vetrina-tall-800.webp");--fr-tall:image-set(url("/foto/reali/vetrina-tall-800.avif") type("image/avif"),url("/foto/reali/vetrina-tall-800.webp") type("image/webp"));--fr-tall2-f:url("/foto/reali/vetrina-tall-1200.webp");--fr-tall2:image-set(url("/foto/reali/vetrina-tall-1200.avif") type("image/avif"),url("/foto/reali/vetrina-tall-1200.webp") type("image/webp"));--fr-quad-f:url("/foto/reali/vetrina-quad-900.webp");--fr-quad:image-set(url("/foto/reali/vetrina-quad-900.avif") type("image/avif"),url("/foto/reali/vetrina-quad-900.webp") type("image/webp"));--fr-wide-f:url("/foto/reali/vetrina-wide-1440.webp");--fr-wide:image-set(url("/foto/reali/vetrina-wide-1440.avif") type("image/avif"),url("/foto/reali/vetrina-wide-1440.webp") type("image/webp"));--fr-wide2-f:url("/foto/reali/vetrina-wide-2400.webp");--fr-wide2:image-set(url("/foto/reali/vetrina-wide-2400.avif") type("image/avif"),url("/foto/reali/vetrina-wide-2400.webp") type("image/webp"))}
.f-insegna{--fr-tall-f:url("/foto/reali/insegna-tall-800.webp");--fr-tall:image-set(url("/foto/reali/insegna-tall-800.avif") type("image/avif"),url("/foto/reali/insegna-tall-800.webp") type("image/webp"));--fr-tall2-f:url("/foto/reali/insegna-tall-1200.webp");--fr-tall2:image-set(url("/foto/reali/insegna-tall-1200.avif") type("image/avif"),url("/foto/reali/insegna-tall-1200.webp") type("image/webp"));--fr-quad-f:url("/foto/reali/insegna-quad-900.webp");--fr-quad:image-set(url("/foto/reali/insegna-quad-900.avif") type("image/avif"),url("/foto/reali/insegna-quad-900.webp") type("image/webp"));--fr-wide-f:url("/foto/reali/insegna-wide-1440.webp");--fr-wide:image-set(url("/foto/reali/insegna-wide-1440.avif") type("image/avif"),url("/foto/reali/insegna-wide-1440.webp") type("image/webp"));--fr-wide2-f:url("/foto/reali/insegna-wide-2400.webp");--fr-wide2:image-set(url("/foto/reali/insegna-wide-2400.avif") type("image/avif"),url("/foto/reali/insegna-wide-2400.webp") type("image/webp"))}
.f-strada{--fr-tall-f:url("/foto/reali/strada-tall-800.webp");--fr-tall:image-set(url("/foto/reali/strada-tall-800.avif") type("image/avif"),url("/foto/reali/strada-tall-800.webp") type("image/webp"));--fr-tall2-f:url("/foto/reali/strada-tall-1200.webp");--fr-tall2:image-set(url("/foto/reali/strada-tall-1200.avif") type("image/avif"),url("/foto/reali/strada-tall-1200.webp") type("image/webp"));--fr-quad-f:url("/foto/reali/strada-quad-900.webp");--fr-quad:image-set(url("/foto/reali/strada-quad-900.avif") type("image/avif"),url("/foto/reali/strada-quad-900.webp") type("image/webp"));--fr-wide-f:url("/foto/reali/strada-wide-1440.webp");--fr-wide:image-set(url("/foto/reali/strada-wide-1440.avif") type("image/avif"),url("/foto/reali/strada-wide-1440.webp") type("image/webp"));--fr-wide2-f:url("/foto/reali/strada-wide-2400.webp");--fr-wide2:image-set(url("/foto/reali/strada-wide-2400.avif") type("image/avif"),url("/foto/reali/strada-wide-2400.webp") type("image/webp"))}

/* Coppie: verticale dal primo scatto, orizzontale dal secondo. */
.fx-fronte-strada{--fr-tall-f:url("/foto/reali/fronte-tall-800.webp");--fr-tall:image-set(url("/foto/reali/fronte-tall-800.avif") type("image/avif"),url("/foto/reali/fronte-tall-800.webp") type("image/webp"));--fr-tall2-f:url("/foto/reali/fronte-tall-1200.webp");--fr-tall2:image-set(url("/foto/reali/fronte-tall-1200.avif") type("image/avif"),url("/foto/reali/fronte-tall-1200.webp") type("image/webp"));--fr-quad-f:url("/foto/reali/fronte-quad-900.webp");--fr-quad:image-set(url("/foto/reali/fronte-quad-900.avif") type("image/avif"),url("/foto/reali/fronte-quad-900.webp") type("image/webp"));--fr-wide-f:url("/foto/reali/strada-wide-1440.webp");--fr-wide:image-set(url("/foto/reali/strada-wide-1440.avif") type("image/avif"),url("/foto/reali/strada-wide-1440.webp") type("image/webp"));--fr-wide2-f:url("/foto/reali/strada-wide-2400.webp");--fr-wide2:image-set(url("/foto/reali/strada-wide-2400.avif") type("image/avif"),url("/foto/reali/strada-wide-2400.webp") type("image/webp"))}

/* Verificato 2026-08-31: i file NON hanno grading teal cotto dentro (media R/G/B
   neutra o calda su tutti e nove gli scatti). Il commento precedente diceva il
   contrario ed era sbagliato. I filtri delle foto demo restano spenti perche'
   qui gli scatti sono gia' corretti in ripresa. */
.foto-reale{filter:none}

/* Hero e fasce a tutta pagina: verticale sul telefono, orizzontale da tablet.
   Il 2400 solo oltre i 1440, dove serve davvero. */
.ad-hero{background-image:var(--fr-tall2-f);background-image:var(--fr-tall2)}
@media(min-width:761px){.ad-hero{background-image:var(--fr-wide-f);background-image:var(--fr-wide)}}
@media(min-width:1440px){.ad-hero{background-image:var(--fr-wide2-f);background-image:var(--fr-wide2)}}

/* Schede del bento e della galleria. Il quadrato serve solo al telefono stretto:
   appena la scheda va a tutta larghezza con min-height fissa (~300px) diventa un
   riquadro orizzontale, e il quadrato ci si taglierebbe dentro. Misurato: a 768
   la scheda e 691x300. Da qui il taglio a 640, non al breakpoint della griglia. */
.ad-card{background-image:var(--fr-quad-f);background-image:var(--fr-quad)}
@media(min-width:640px){.ad-card{background-image:var(--fr-wide-f);background-image:var(--fr-wide)}}

/* Blocchi a rapporto fisso 4:5 (.ph, .barber-ph): sempre verticale, cambia solo
   la densita. */
.ad-tall{background-image:var(--fr-tall-f);background-image:var(--fr-tall)}
@media(min-width:700px){.ad-tall{background-image:var(--fr-tall2-f);background-image:var(--fr-tall2)}}

/* Contact-sheet: la scheda e alta finche la striscia scorre a tutta pagina, ma
   sul desktop largo si schiaccia (misurato 420x378 a 1440) e li il 4:5 andrebbe
   sforbiciato sopra e sotto. Dal quadrato in poi il taglio e molto piu gentile. */
.ad-strip{background-image:var(--fr-tall-f);background-image:var(--fr-tall)}
@media(min-width:700px){.ad-strip{background-image:var(--fr-tall2-f);background-image:var(--fr-tall2)}}
@media(min-width:1000px){.ad-strip{background-image:var(--fr-quad-f);background-image:var(--fr-quad)}}

/* Il mosaico della galleria: le campate stanno in classi, non in style inline.
   Lo stile inline batteva il collasso a una colonna e sul telefono restavano
   schede larghe 135px. */
.gc1{grid-column:span 7;min-height:320px}
.gc2{grid-column:span 5;min-height:320px}
.gc3,.gc4{grid-column:span 6;min-height:260px}
.gc5{grid-column:span 12;aspect-ratio:16/9;min-height:0}
@media(max-width:860px){.gc1,.gc2,.gc3,.gc4{grid-column:span 12;min-height:300px}.gc5{grid-column:span 12;aspect-ratio:4/3;min-height:0}}

/* La fascia a tutta pagina porta uno scatto di esterno in pieno giorno: muro
   beige, cielo bruciato. Cotto com'e, in mezzo a un sito quasi nero, sembra una
   finestra aperta per sbaglio. Il velo originale copriva solo il fondo (dal 30%
   in giu), pensato per foto gia scure. Qui serve dall'alto, come nell'hero.
   E composizione, non grading: la foto sul disco resta neutra. */
.pb-photo.foto-reale::after{background:linear-gradient(180deg,oklch(0.10 0.02 194 / .62) 0%,oklch(0.10 0.02 194 / .44) 34%,oklch(0.10 0.02 194 / .72) 68%,oklch(0.09 0.018 194 / .95) 88%,var(--bg) 100%)}

/* Le schede foto perdono il filtro-hover che avevano da demo. L'interazione
   resta, ma parte dal neutro invece che da un grading gia applicato. */
.card.foto-reale{transition:transform .5s var(--ease),border-color .4s,box-shadow .4s,filter .5s var(--ease)}
.card.foto-reale:hover{filter:brightness(1.06) saturate(1.06)}
@media(prefers-reduced-motion:reduce){.card.foto-reale{transition:none}}

/* --- Punti focali (audit 2026-08-31) ---
   Prima ogni foto era tagliata a 50% 50%: il centro geometrico non e' quasi mai
   il soggetto. Ogni scatto dichiara il suo punto una volta sola, accanto alle
   sorgenti; i blocchi .ad-* lo leggono da --focal. */
/* il volto di profilo sta a destra del centro, la testa arriva al 15% dall'alto */
.f-al-lavoro{--focal:56% 42%}
/* nuca centrata, leggermente a sinistra; sopra c'e' aria da tagliare */
.f-bottega-int{--focal:45% 38%}
/* testa a destra, la mano con la mantella occupa la meta' sinistra */
.f-fade{--focal:60% 40%}
/* l'insegna col logo vero sta in alto a sinistra: e' il punto che deve restare */
.f-fronte{--focal:42% 34%}
/* pettine e macchinetta al centro-sinistra; il giallo del pettine e' il punto piu' luminoso */
.f-gesto{--focal:40% 50%}
/* la vetrina e' a sinistra, il resto e' muro */
.f-insegna{--focal:40% 52%}
/* testa a destra, mani a sinistra */
.f-macchinetta{--focal:52% 46%}
/* la porta e' al centro in basso; alzare il taglio prende solo serrande e graffiti */
.f-strada{--focal:50% 60%}
/* i quattro poster dei tagli stanno nella meta' alta */
.f-vetrina{--focal:45% 40%}
/* coppia: verticale da fronte, orizzontale da strada -> compromesso sul basso */
.fx-fronte-strada{--focal:48% 54%}