/* ==========================================================================
   francescadb.com — foglio di stile unico
   Base tipografica e cromatica ereditata dal prototipo homepage.
   Palette: carta avorio, inchiostro caldo, oro sobrio.
   ========================================================================== */

/* Fallback locali calibrati: il testo occupa lo stesso spazio prima e dopo
   il caricamento dei webfont, così la pagina non "salta". */
@font-face{
  font-family:'Cormorant Fallback';
  src:local('Georgia');
  size-adjust:89.2%; ascent-override:103.1%; descent-override:32.5%; line-gap-override:0%;
}
@font-face{
  font-family:'Jost Fallback';
  src:local('Arial');
  size-adjust:93.3%; ascent-override:114.7%; descent-override:40.7%; line-gap-override:0%;
}

:root{
  /* Palette di Francesca, presa dalla pagina workshop Caserta 2026.
     I nomi storici (--paper, --ink, --gold...) sono mantenuti cosi' tutte le
     pagine esistenti si aggiornano senza modifiche. */
  --offwhite:#F2EEEB;  /* fondo pagina */
  --blush:#DCC9B7;     /* fasce di accento */
  --taupe:#BDAB9E;     /* filetti e dettagli decorativi */
  --dark:#6F6862;      /* titoli, bottoni pieni */
  --text:#4A453F;      /* corpo del testo */

  --paper:var(--offwhite);
  --paper-2:#EDE8E2;
  --ink:var(--text);
  --soft:var(--dark);
  --gold:var(--taupe);
  --gold-ink:var(--dark);
  --hairline:#E3DAD0;

  --serif:'Cormorant Garamond','Cormorant Fallback',Georgia,serif;
  --sans:'Jost','Jost Fallback','Helvetica Neue',sans-serif;

  /* Le foto restano a colori. Mettere grayscale(100%) qui le renderebbe
     tutte in bianco e nero come nella pagina Caserta. */
  --photo-filter:none;

  /* Spazio fra le foto nelle gallerie, in tutto il sito.
     Le singole pagine possono scavalcarlo con galleryGap nel frontmatter. */
  --gallery-gap:clamp(10px,1.4vw,20px);
  /* Filetto attorno alle foto. Serve perche' il lavoro di Francesca e' quasi
     tutto in chiave alta: su carta avorio il bordo di una foto chiara sparisce.
     Si vede solo dove c'e' spazio attorno: nelle gallerie fitte e' invisibile,
     e va bene cosi'. Non e' una cornice — e' il confine della fotografia. */
  --photo-edge:0 0 0 1px rgba(111,104,98,.16);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
h1,h2,h3,h4{color:var(--dark)}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  font-size:17px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:1px solid var(--gold);outline-offset:4px}
.wrap{max-width:1200px;margin:0 auto;padding:0 48px}
.wrap-wide{max-width:1440px;margin:0 auto;padding:0 clamp(24px,3.5vw,56px)}
.wrap-narrow{max-width:920px;margin:0 auto;padding:0 clamp(24px,4vw,48px)}

/* Salta al contenuto — accessibilità da tastiera */
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--ink);color:var(--paper);padding:12px 20px;
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;
}
.skip:focus{left:0}

/* ---------- Header ---------- */
header{
  position:sticky;top:0;z-index:100;
  background:rgba(242,238,235,.94);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--hairline);
}
.masthead{
  display:flex;align-items:center;justify-content:space-between;
  padding:22px clamp(24px,3.5vw,56px);gap:30px;
  transition:padding .4s ease;
}
header.scrolled .masthead{padding-top:13px;padding-bottom:13px}
.brand{line-height:1.1}
/* Il marchio disegnato al posto del nome scritto. La larghezza e' quella che
   aveva il testo (235px), cosi' la testata non cambia impaginazione.
   Le due righe sono due tracciati e tengono i colori che avevano da testo: il
   nome eredita quello del testo attorno, il sottotitolo resta oro. Allinearne
   i bordi non e' piu' affare del CSS — sta nella geometria dell'SVG, che
   genera scripts/marchio/lockup.py. */
.brand .marchio{
  display:block;width:235px;height:auto;
  /* Centratura ottica. Il riquadro dell'inchiostro e' gia' centrato nella
     fascia al decimo di pixel — misurato — ma non SEMBRA centrato: il
     sottotitolo e' cosi' chiaro e spaziato che l'occhio lo legge quasi come
     vuoto, e prende per "il logo" la sola riga scura, che di suo sta in alto.
     Il risultato e' che il vuoto sopra pare piu' stretto di quello sotto.
     Lo si sposta giu' di un ottavo della propria altezza. E' una percentuale
     e non dei pixel apposta: vale identica nella testata larga, in quella
     stretta e in quella con l'hamburger, che sono la stessa fascia.
     `transform` e non `margin`: non deve cambiare l'altezza della fascia. */
  transform:translateY(8%);
}
.marchio .mk-nome{fill:currentColor}
.marchio .mk-sotto{fill:var(--gold-ink)}
nav ul{list-style:none;display:flex;gap:36px;align-items:center}
nav a{
  font-size:11px;font-weight:400;letter-spacing:.26em;text-transform:uppercase;
  padding:12px 0;position:relative;
}
nav a::after{
  content:"";position:absolute;left:0;bottom:4px;width:0;height:1px;
  background:var(--gold);transition:width .35s ease;
}
nav li:hover > a::after{width:100%}
nav a[aria-current="page"]::after{width:100%}
/* Il menu a tendina sospeso esiste SOLO da tablet in su.
   Prima era una regola globale poi annullata nel blocco mobile: bastava che
   l'annullamento non vincesse — per ordine, specificita' o momento di
   valutazione — perche' il pannello finisse mezzo fuori dallo schermo, con le
   voci tagliate a sinistra. Racchiudendola in una media query desktop, su
   telefono quelle dichiarazioni non esistono e il problema non e' piu'
   possibile, non solo improbabile. */
@media (min-width:861px){
  .has-drop{position:relative}
  .drop{
    position:absolute;top:100%;left:50%;transform:translate(-50%,10px);
    min-width:245px;padding:16px 0;
    background:var(--paper);border:1px solid var(--hairline);
    box-shadow:0 22px 46px -18px rgba(43,39,35,.28);
    opacity:0;visibility:hidden;transition:opacity .3s,transform .3s,visibility .3s;
  }
  .has-drop:hover .drop, .has-drop:focus-within .drop{
    opacity:1;visibility:visible;transform:translate(-50%,0);
  }
  .drop a{
    display:block;padding:9px 28px;font-size:10.5px;letter-spacing:.2em;
    color:var(--soft);white-space:nowrap;transition:color .3s;
  }
  .drop a:hover{color:var(--gold-ink)}
}

/* Su telefono il sottomenu e' semplicemente un elenco nel flusso. */
@media (max-width:860px){
  .drop{
    display:none;
    padding:4px 0 0;
    background:transparent;border:none;box-shadow:none;
  }
  .has-drop.open .drop{display:block}
  .drop a{
    display:block;padding:5px 0;font-size:11.5px;letter-spacing:.2em;
    color:var(--soft);text-align:center;white-space:normal;
  }
}
.drop a::after{display:none}
.head-social{display:flex;gap:18px;align-items:center}
.head-social a{display:flex;color:var(--ink);transition:color .3s}
.head-social a:hover{color:var(--gold-ink)}
.head-social svg{width:15px;height:15px;fill:currentColor}

.burger{display:none;background:none;border:none;cursor:pointer;padding:8px;z-index:130}
.burger span{display:block;width:25px;height:1px;background:var(--ink);margin:7px 0;transition:.35s}
body.nav-open .burger span:nth-child(1){transform:translateY(8px) rotate(45deg)}
body.nav-open .burger span:nth-child(2){opacity:0}
body.nav-open .burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ---------- Elementi condivisi ---------- */
.eyebrow{
  font-size:10.5px;letter-spacing:.5em;text-transform:uppercase;color:var(--gold-ink);
  font-weight:400;margin-bottom:22px;
}
.btn{
  display:inline-block;padding:16px 44px;
  background:var(--dark);border:1px solid var(--dark);color:#fff;
  font-size:13px;letter-spacing:.18em;text-transform:uppercase;font-weight:300;
  transition:background .4s,color .4s,border-color .4s;
}
.btn:hover{background:transparent;color:var(--dark)}
.btn-ghost{background:transparent;color:var(--dark)}
.btn-ghost:hover{background:var(--dark);color:#fff}
.lnk{
  font-size:10px;letter-spacing:.28em;text-transform:uppercase;font-weight:400;
  padding-bottom:5px;border-bottom:1px solid var(--gold);
  transition:color .3s;
}
.lnk:hover{color:var(--gold-ink)}
.lnk-it{
  font-family:var(--serif);font-style:italic;font-size:18px;
  border-bottom:1px solid var(--taupe);padding-bottom:2px;
  transition:color .3s,border-color .3s;
}
.lnk-it:hover{color:var(--gold-ink);border-color:var(--gold-ink)}
.rule{width:1px;height:70px;background:var(--gold);opacity:.5;margin:0 auto 46px}
.js .reveal{opacity:0;transform:translateY(30px);transition:opacity 1s ease,transform 1s ease}
.js .reveal.in{opacity:1;transform:none}

/* ---------- Testata di pagina interna ---------- */
.page-head{text-align:center;padding:70px 24px 44px}
.page-head h1{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(36px,4.6vw,64px);line-height:1.16;
  max-width:24ch;margin:0 auto;
}
.page-head h1 em{font-style:italic}
.page-head .lead{
  margin-top:26px;color:var(--soft);font-size:16.5px;
  max-width:64ch;margin-left:auto;margin-right:auto;
}

/* ---------- Corpo testuale (pagine e articoli) ---------- */
.prose{padding-bottom:70px}
.prose h2{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(26px,2.8vw,38px);line-height:1.3;
  margin:40px 0 16px;
}
.prose h2 em{font-style:italic}
.prose h3{
  font-family:var(--serif);font-weight:400;font-size:24px;
  letter-spacing:.04em;margin:30px 0 12px;
}
.prose p{color:var(--soft);margin-bottom:22px}
.prose p strong{color:var(--ink);font-weight:400}
.prose ul,.prose ol{color:var(--soft);margin:0 0 22px 22px}
.prose li{margin-bottom:9px}
.prose a:not(.btn):not(.lnk){
  border-bottom:1px solid var(--gold);transition:color .3s;
}
.prose a:not(.btn):not(.lnk):hover{color:var(--gold-ink)}
.prose figure{margin:48px 0}
.prose figcaption{
  margin-top:12px;font-size:9.5px;letter-spacing:.34em;
  text-transform:uppercase;color:var(--soft);
}
.prose blockquote{
  font-family:var(--serif);font-style:italic;font-size:26px;line-height:1.5;
  color:var(--ink);border-left:1px solid var(--gold);
  padding-left:32px;margin:48px 0;
}

/* ---------- Griglia portfolio ---------- */
/* Galleria giustificata: ogni riga ha altezza uniforme e le larghezze si
   adattano alle proporzioni reali delle foto. Nessun ritaglio, nessun bordo
   inferiore frastagliato. Il rapporto arriva da --ar, emesso da {% photofig %}. */
.gallery{
  display:flex;flex-wrap:wrap;
  gap:var(--gallery-gap);
  padding-bottom:70px;
}
.gallery figure{
  /* Il moltiplicatore fissa l'altezza a cui tendono le righe: piu' e' alto,
     meno foto entrano per riga e piu' grandi diventano. */
  flex:var(--ar,1) 1 calc(var(--ar,1) * 330px);
  min-width:0;margin:0;
}
@media (max-width:860px){
  .gallery figure{flex-basis:calc(var(--ar,1) * 200px)}
}
@media (max-width:560px){
  /* Una foto per riga: due affiancate su un telefono farebbero 180px l'una,
     cioe' miniature, non fotografie. */
  .gallery{display:block}
  .gallery figure{margin-bottom:var(--gallery-gap)}

  /* A tutta larghezza. Su un telefono la fotografia e' la pagina: i 24px di
     margine per lato toglievano il 13% della larghezza senza portare nulla.
     La galleria esce dal contenitore e arriva ai bordi. */
  .gallery{
    width:100vw;
    margin-left:50%;
    transform:translateX(-50%);
  }
  /* Dentro un articolo no: li' le foto puntellano il testo e condividerne i
     margini tiene insieme il ritmo della lettura. */
  .prose .gallery,
  .gallery.no-bleed{
    width:auto;margin-left:0;transform:none;
  }
}
.gallery figure{overflow:hidden}
.gallery img{width:100%;height:auto;display:block;transition:transform 1.6s ease}
.gallery figure:hover img{transform:scale(1.04)}

/* ---------- Listino prezzi ---------- */
.price-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(24px,3vw,44px);padding-bottom:120px;
}
.price-card{
  background:var(--paper);border:1px solid var(--hairline);
  padding:44px 36px;display:flex;flex-direction:column;
}
/* Testata e bottone centrati nella colonna; l'elenco delle voci resta a
   sinistra. Centrare anche quello significherebbe righe di lunghezza diversa
   dentro filetti a tutta larghezza: si leggerebbe come un errore di
   allineamento, non come una scelta. Il nome segue il prezzo perche' i due
   sono la testata del pacchetto: centrarne uno solo li spezzerebbe. */
.price-card h3{
  font-family:var(--serif);font-weight:400;font-size:27px;
  letter-spacing:.06em;margin-bottom:6px;text-align:center;
}
.price-card .amount{
  font-family:var(--serif);font-size:36px;color:var(--gold-ink);
  margin-bottom:24px;text-align:center;
}
.price-card ul{list-style:none;color:var(--soft);font-size:14.5px;margin-bottom:30px}
.price-card li{
  padding:9px 0;border-bottom:1px solid var(--hairline);
}
.price-card li:last-child{border-bottom:none}
.price-card .btn{margin-top:auto;align-self:center}

/* ---------- Home: hero ---------- */
.hero{text-align:center;padding:96px 24px 0;position:relative}
.hero-eyebrow{
  font-size:10.5px;letter-spacing:.5em;text-transform:uppercase;color:var(--gold-ink);
  font-weight:400;margin-bottom:32px;
}
.hero h1{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(38px,4.6vw,68px);
  line-height:1.16;letter-spacing:.01em;
  max-width:20ch;margin:0 auto;
}
.hero h1 em{font-style:italic}
.hero-sub{margin-top:28px;color:var(--soft);font-size:15.5px;max-width:52ch;margin-left:auto;margin-right:auto}
.hero-cta{margin-top:42px;display:flex;justify-content:center;align-items:center;gap:40px;flex-wrap:wrap}

.hero-gallery{
  display:grid;grid-template-columns:1fr 1.12fr 1fr;
  gap:clamp(16px,2.4vw,36px);
  align-items:end;
  max-width:1500px;margin:84px auto 0;
  padding:0 clamp(20px,3vw,48px);
}
.hero-gallery figure{position:relative}
.hero-gallery .pic{overflow:hidden}
.hero-gallery img{width:100%;height:auto;transition:transform 1.6s ease}
.hero-gallery figure:hover img{transform:scale(1.04)}
.hero-gallery .tall{transform:translateY(-46px)}
.hero-gallery figcaption{
  margin-top:14px;
  font-size:9.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--soft);
}
.hero-gallery .tall figcaption{text-align:center}
.hero-gallery .side.left figcaption{text-align:left}
.hero-gallery .side.right figcaption{text-align:right}

/* sfumatura morbida dall'hero alla fascia servizi */
.blend{height:150px;margin-top:-40px;background:linear-gradient(180deg,var(--paper) 0%,var(--paper-2) 100%)}

/* ---------- Home: servizi ---------- */
.services{background:var(--paper-2);padding:40px 0 140px}
.services-head{text-align:center;margin-bottom:80px}
.services-head h2{font-family:var(--serif);font-weight:400;font-size:clamp(28px,3vw,42px);line-height:1.25}
.services-head h2 em{font-style:italic}
/* `align-items:stretch` e non `start`: le schede si pareggiano all'altezza
   della piu' alta. Con `start` ognuna finiva dove finiva il suo testo, e visto
   che i paragrafi hanno tre o quattro righe le colonne chiudevano a due altezze
   diverse — 731px contro 755 — con i link "Portfolio / Prices" sfalsati di 25px.
   Il `margin-top:auto` sui link c'era gia' e aspettava solo questo: adesso li
   spinge in fondo, e i quattro attacchi si allineano da soli qualunque cosa si
   scriva nei paragrafi. */
.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.6vw,44px);align-items:stretch}
/* Tre colonne invece di quattro. Il numero e' scritto nella griglia e non si
   ricava dal contenuto, quindi serve una variante: e' lo stesso limite delle
   disposizioni delle gallerie, ma qui le schede sono scritte a mano e il
   numero lo si conosce. */
/* ATTENZIONE alla specificita': `.svc-grid.tre` pesa piu' di `.svc-grid`, quindi
   batteva anche le regole dei punti di rottura piu' sotto e le tre colonne
   restavano tre colonne sull'iPhone — con la terza fuori dallo schermo. Se un
   domani si aggiunge un'altra variante, va aggiunta anche li'. */
.svc-grid.tre{grid-template-columns:repeat(3,1fr)}
.svc{display:flex;flex-direction:column;background:var(--paper);box-shadow:0 24px 50px -30px rgba(43,39,35,.25)}
.svc .pic{overflow:hidden;position:relative}
.svc .pic img{width:100%;height:auto;transition:transform 1.5s ease}
.svc:hover .pic img{transform:scale(1.05)}
.svc .pic::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(43,39,35,0) 72%,rgba(43,39,35,.18) 100%);
  pointer-events:none;
}
.svc .body{padding:30px 28px 32px;display:flex;flex-direction:column;flex:1}
.svc .num{
  font-family:var(--serif);font-style:italic;font-size:14px;color:var(--gold-ink);
  letter-spacing:.16em;margin-bottom:8px;
}
.svc h3{font-family:var(--serif);font-weight:400;font-size:26px;letter-spacing:.06em;margin-bottom:12px}
.svc h3 a:hover{color:var(--gold-ink)}
.svc p{color:var(--soft);font-size:14px;line-height:1.75;margin-bottom:22px}
.svc .links{margin-top:auto;display:flex;gap:24px}

/* ---------- Home: presentazione ---------- */
.intro{padding:150px 0 140px;text-align:center;position:relative}
.intro .wrap{max-width:840px}
.intro h2{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(28px,3.2vw,44px);line-height:1.32;margin-bottom:34px;
}
.intro h2 em{font-style:italic}
.intro p{color:var(--soft);max-width:620px;margin:0 auto}
.intro .signature{font-family:var(--serif);font-style:italic;font-size:31px;color:var(--gold-ink);margin-top:40px}
.intro .est{margin-top:8px;font-size:9.5px;letter-spacing:.42em;text-transform:uppercase;color:var(--soft)}

/* ---------- Fascia fotografica sfocata ---------- */
.banner{
  /* Fondo pieno di default: senza immagine il testo chiaro sarebbe
     illeggibile sul fondo avorio della pagina. */
  position:relative;overflow:hidden;background:var(--dark);
  /* 100px sopra e sotto erano il 40% dell'altezza della fascia: bella da
     vedere, ma la coda della pagina — fascia piu' footer — superava una
     schermata intera prima di arrivare in fondo. */
  padding:60px 24px;text-align:center;color:#EDE8E2;
}
.banner .bg{
  position:absolute;inset:-50px;z-index:0;
  background-size:cover;background-position:center 30%;background-repeat:no-repeat;
  filter:blur(16px) brightness(.52) saturate(.9);
  transform:scale(1.18);
}
.banner .inner{position:relative;z-index:1}
/* L'occhiello appartiene al titolo: a 46px si leggeva come una riga a se'.
   Nelle testate di pagina quella distanza resta, li' il contesto e' diverso. */
.banner .eyebrow{color:var(--blush);margin-bottom:12px}
.banner h2{
  color:#EDE8E2;font-family:var(--serif);font-weight:400;
  font-size:clamp(32px,3.8vw,54px);line-height:1.22;margin-bottom:20px;
}
.banner h2 em{font-style:italic}
.banner p{color:rgba(237,232,226,.85);max-width:54ch;margin:0 auto 36px;font-size:15.5px}
.banner .btn{background:transparent;border-color:rgba(237,232,226,.85);color:#EDE8E2}
.banner .btn:hover{background:#EDE8E2;color:var(--dark)}
.banner .meta{
  margin-top:32px;display:flex;justify-content:center;gap:46px;flex-wrap:wrap;
  font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:rgba(237,232,226,.78);
}
.banner .meta a{transition:color .3s}
.banner .meta a:hover{color:var(--blush)}

/* ---------- Footer ---------- */
/* Spazi verticali contenuti: fra padding del footer, coda della griglia e
   riga finale si sommavano 228px di vuoto sotto l'ultimo contenuto. */
footer{padding:56px 0 0}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:56px;padding-bottom:44px}
.foot-brand .marchio{display:block;width:207px;height:auto}
/* il sottotitolo ora e' dentro il marchio: qui resta lo spazio che teneva */
.foot-brand .marchio{margin-bottom:24px}
.foot-brand p{color:var(--soft);font-size:14.5px;max-width:290px}
.foot-social{display:flex;gap:18px;margin-top:26px}
.foot-social a{color:var(--soft);transition:color .3s;display:flex}
.foot-social a:hover{color:var(--gold-ink)}
.foot-social svg{width:16px;height:16px;fill:currentColor}
footer h3{
  font-size:10px;letter-spacing:.42em;text-transform:uppercase;font-weight:400;
  margin-bottom:18px;
}
footer ul{list-style:none}
footer li{margin-bottom:8px}
footer li a, footer address{font-size:14px;color:var(--soft);font-style:normal;transition:color .3s}
footer li a:hover{color:var(--gold-ink)}
.foot-bottom{
  border-top:1px solid var(--hairline);padding:16px 0;
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--soft);
}
.foot-bottom a:hover{color:var(--gold-ink)}

@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  .gallery figure:hover img{transform:none}
}

/* ---------- Responsive ---------- */
@media (max-width:1120px){
  nav ul{gap:24px}
  .wrap,.media-larghezza-media{padding:0 34px}
  .svc-grid,.svc-grid.tre{grid-template-columns:1fr 1fr;row-gap:56px}
}
@media (max-width:860px){
  nav{
    position:fixed;inset:0;background:var(--paper);
    display:flex;align-items:center;justify-content:center;
    opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s;
    overflow-y:auto;
  }
  body.nav-open nav{opacity:1;visibility:visible}
  nav ul{flex-direction:column;gap:20px;text-align:center;padding:60px 0}
  nav a{font-size:14px}
  .drop{
    position:static;transform:none;opacity:1;visibility:visible;
    border:none;box-shadow:none;background:transparent;padding:4px 0 0;
    display:none;min-width:0;
  }
  .has-drop.open .drop{display:block}
  .drop a{padding:5px 0;font-size:11.5px}
  .head-social{display:none}
  .burger{display:block}
  .page-head{padding:70px 24px 50px}
  .banner{padding:72px 24px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:44px}
  .hero{padding-top:76px}
  .hero-gallery{grid-template-columns:1fr 1fr;gap:18px;margin-top:60px;align-items:start}
  .hero-gallery .tall{grid-column:1 / -1;transform:none;order:-1}
  .hero-gallery .side.right figcaption{text-align:left}
  .blend{margin-top:0;height:100px}
  .intro{padding:110px 0}
}
@media (max-width:560px){
  .svc-grid,.svc-grid.tre{grid-template-columns:1fr;row-gap:44px}
  .hero-gallery{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .wrap,.media-larghezza-media{padding:0 24px}
  .masthead{padding:16px 24px}
  /* Basta la larghezza: il sottotitolo e' dentro il marchio e rimpicciolisce
     con lui. Prima serviva stringerlo a mano o sporgeva di 24px. */
  .brand .marchio{width:197px}
}

/* ==========================================================================
   Stile Caserta 2026 — motivi ripresi dalla pagina che Francesca ha approvato
   ========================================================================== */

/* Le foto seguono il trattamento scelto in :root (--photo-filter) */
.hero-full,.split img,.band-photo img,.svc .pic img,.gallery img{filter:var(--photo-filter)}

/* ---------- Hero a tutto schermo ---------- */
.hero-full{
  position:relative;min-height:92vh;background:#222;
  display:flex;align-items:flex-end;justify-content:flex-end;overflow:hidden;
}
.hero-full > picture,.hero-full > img{position:absolute;inset:0}
/* UNICA ECCEZIONE al principio "niente ritagli": un'immagine a piena
   finestra e' per definizione ritagliata. L'alternativa e' scegliere per
   l'hero una foto orizzontale composta apposta. */
.hero-full picture img,.hero-full > img{
  width:100%;height:100%;object-fit:cover;object-position:center 30%;
}
.hero-full::after{
  content:"";position:absolute;inset:0;
  /* Velatura diagonale: scurisce l'angolo dove sta il testo, cosi' resta
     leggibile anche sulle foto molto chiare, che sono la norma qui. */
  background:
    linear-gradient(to top left, rgba(34,34,34,.78) 0%, rgba(34,34,34,.40) 38%, rgba(34,34,34,0) 68%),
    linear-gradient(180deg, rgba(34,34,34,.22) 0%, rgba(34,34,34,0) 28%);
}
.hero-full .hero-text{position:relative;z-index:1;text-align:right;color:#EDE8E2;padding:0 6vw 8vh 6vw}
.hero-full .brand-line{font-size:clamp(18px,2.4vw,26px);letter-spacing:.35em;font-weight:300;opacity:.9}
.hero-full .place{
  font-family:var(--sans);font-weight:300;color:#EDE8E2;
  font-size:clamp(44px,9vw,110px);line-height:1;margin:6px 0;letter-spacing:.08em;
}
.hero-full .tag{font-size:clamp(12px,1.4vw,15px);letter-spacing:.18em;text-transform:uppercase;opacity:.85}
.hero-full .dates{font-family:var(--serif);font-size:clamp(20px,3vw,30px);letter-spacing:.2em;margin-top:10px}
.hero-full .hero-cta{margin-top:30px;display:flex;justify-content:flex-end}
.hero-full .btn{background:transparent;border-color:rgba(237,232,226,.8);color:#EDE8E2}
.hero-full .btn:hover{background:#EDE8E2;color:var(--dark)}

/* ---------- Filetto divisore ---------- */
.divider{display:flex;justify-content:center;align-items:center;padding:30px 0;background:var(--paper)}
.divider span{display:block;width:90px;height:1px;background:var(--taupe)}

/* ---------- Blocco immagine + testo affiancati ---------- */
.split{display:grid;grid-template-columns:1.1fr 1fr;background:var(--paper);align-items:center}
.split.reverse{grid-template-columns:1fr 1.1fr}
.split.reverse .split-media{order:2}
/* La colonna immagine ha un rapporto fisso: senza, una foto verticale
   imporrebbe la sua altezza naturale e la sezione diventerebbe altissima. */
.split .split-media{position:relative}
.split img{width:100%;height:auto;display:block}
.split .split-text{
  background:var(--paper);display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:clamp(30px,3.4vw,52px);text-align:center;
}
.split .split-text p{color:var(--ink);font-size:16.5px;max-width:54ch;margin:0 0 16px}
.split .split-text b{color:var(--dark);font-weight:500}
.split .greet{font-family:var(--serif);font-size:22px;margin-bottom:18px;color:var(--dark)}
.split .pull{
  display:block;margin-top:22px;font-family:var(--serif);font-size:20px;color:var(--dark);
}
/* Dichiarazione in maiuscolo su fondo chiaro, accanto alla foto */
/* Specificita' alzata: .split .split-text p vinceva sul corpo del testo. */
.split .split-text p.statement{
  font-family:var(--serif);font-size:clamp(30px,4.4vw,56px);line-height:1.18;
  letter-spacing:.02em;text-transform:uppercase;color:var(--dark);
  max-width:14ch;text-wrap:balance;
}
/* Nei blocchi-citazione la colonna di testo e' piu' stretta: la frase deve
   riempirla, non galleggiarci dentro. */
.split.quote{grid-template-columns:1fr 1.3fr}
.split.quote.reverse{grid-template-columns:1fr 1.3fr}
.split.quote .split-text{padding:clamp(48px,6vw,90px)}
@media (max-width:860px){
  .split.quote,.split.quote.reverse{grid-template-columns:1fr}

}

/* ---------- Foto affiancata al testo ----------
   Il testo che segue le scorre attorno. Diverso dallo `split`, che e' una
   struttura della pagina: questa e' un blocco solo, e si mette dove capita. */
.affiancata{max-width:46%;margin:6px 0 22px}
.affiancata.a-sinistra{float:left;margin-right:34px}
.affiancata.a-destra{float:right;margin-left:34px}
.affiancata img{width:100%;height:auto;display:block}
.affiancata figcaption{
  margin-top:10px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--soft);
}
/* Su schermo stretto affiancare non ha senso: 46% di 375px sono 170px */
@media (max-width:700px){
  .affiancata{float:none !important;max-width:100%;margin:22px 0}
}

/* ---------- Confronto: due fotografie da guardare insieme ----------
   Stessa altezza, larghezze secondo le loro proporzioni, niente ritaglio:
   e' il caso "lo stesso bambino a dieci giorni e a un anno". */
.confronto{display:flex;gap:var(--gallery-gap);align-items:flex-start}
.confronto figure{flex:1 1 0;min-width:0;margin:0}
.confronto img{width:100%;height:auto;display:block}
.confronto figcaption{
  margin-top:10px;text-align:center;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--soft);
}
@media (max-width:620px){ .confronto{flex-direction:column} }

/* ---------- Galleria a striscia: si scorre di lato ----------
   Trenta scatti buoni in colonna fanno una pagina infinita, soprattutto da
   telefono — dove peraltro scorrere di lato e' il gesto piu' naturale. */
.gallery.style-striscia{
  display:flex;flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;
  padding-bottom:10px;
}
.gallery.style-striscia figure{
  flex:0 0 auto;height:clamp(260px,42vh,460px);width:auto;scroll-snap-align:start;
}
.gallery.style-striscia figure img{height:100%;width:auto;max-width:none}
.gallery.style-striscia.scale-small figure{height:clamp(190px,30vh,320px)}
.gallery.style-striscia.scale-large figure{height:clamp(320px,56vh,600px)}

/* ---------- Carosello: piu' foto che si alternano in dissolvenza ----------
   Le lastre stanno una sopra l'altra e cambiano opacita'. Con una foto sola si
   comporta esattamente come una foto ferma, quindi non c'e' un caso a parte. */
/* Il carosello ha DUE forme, e prima ne aveva una sola.

   Dentro un contenitore hero (.hero-full, .media-larghezza-hero) riempie lo
   schermo: e' quello per cui era nato, ed e' la forma della home.

   Come blocco dentro una pagina invece deve stare al suo posto. Prima non
   sapeva farlo: era 'position:absolute;inset:0' sempre, quindi senza un
   antenato posizionato usciva dal contenitore e si prendeva la finestra. La
   pagina spariva sotto, e con lei il comando per tornare indietro — un gesto
   presentato come reversibile che in pratica non lo era. */
.carosello{position:relative;aspect-ratio:3/2;overflow:hidden}
.hero-full .carosello,.media-larghezza-hero .carosello{position:absolute;inset:0;aspect-ratio:auto}
.carosello .lastra{position:absolute;inset:0;opacity:0;transition:opacity 1.6s ease}
.carosello .lastra.visibile{opacity:1}
.carosello .lastra picture,.carosello .lastra img{position:absolute;inset:0}
.carosello .lastra img{width:100%;height:100%;object-fit:cover;display:block}
@media (prefers-reduced-motion:reduce){
  .carosello .lastra{transition:none}
}

/* ---------- Larghezza e ritaglio dei blocchi di fotografie ----------
   Le quattro larghezze sono quelle che il sito gia' usava, qui date un nome
   perche' si possano scegliere dalla pagina invece che scrivendo un div:
   stretta 920px (la colonna del testo), media 1200, larga 1440, piena fino ai
   bordi della finestra. */
.media-larghezza-stretta{max-width:920px;margin:0 auto;padding:0 clamp(24px,4vw,48px)}
.media-larghezza-media{max-width:1200px;margin:0 auto;padding:0 48px}
.media-larghezza-larga{max-width:1440px;margin:0 auto;padding:0 clamp(24px,3.5vw,56px)}
.media-larghezza-piena{width:100vw;margin-inline:calc(50% - 50vw);padding:0}

/* "hero": non e' un tipo di blocco, e' la sua MISURA piu' grande — tutto lo
   schermo. Prima era implicito dentro il tipo "carosello", che percio' rompeva
   ogni pagina che non fosse la home. Separandolo, qualunque blocco puo' essere
   una testata (una foto sola, un carosello) e il carosello puo' stare anche in
   mezzo a un testo senza portarsi via la pagina.

   E' l'unico posto dove il ritaglio e' ammesso senza che lo chieda Francesca:
   una testata a tutto schermo E' per definizione un ritaglio, ed e' l'eccezione
   gia' scritta nella regola 1. */
.media-larghezza-hero{width:100vw;margin-inline:calc(50% - 50vw);padding:0;
  position:relative;height:min(88vh,900px);overflow:hidden}
.media-larghezza-hero img{width:100%;height:100%;object-fit:cover}
.media-larghezza-hero figure{margin:0;height:100%}
/* Ma "fino ai bordi" con **piu'** di una fotografia non e' una testata: e' una
   galleria larga quanto la pagina. L'altezza fissa qui non ha niente da
   riempire, e sotto le foto restava contenitore vuoto — misurati 164px su una
   finestra da 1440, che sulla pagina del workshop si sommavano allo spazio del
   blocco e a quello della scheda degli orari. Con una galleria dentro,
   l'altezza la detta il contenuto. */
.media-larghezza-hero:has(.gallery){height:auto;overflow:visible}
/* `figure{height:100%}` serve alla testata, dove la figura deve riempire
   l'altezza fissa. Con una galleria l'altezza la decide la galleria — le sue
   proporzioni, il suo ritaglio — e lasciare il 100% faceva sbordare le figure
   di 30px oltre il contenitore. */
.media-larghezza-hero:has(.gallery) figure{height:auto}

/* La larghezza e' una proprieta' della FASCIA, e una fascia esiste solo al
   primo livello della pagina. Dentro uno split o una tavola il blocco ha gia'
   la sua colonna, e quelle regole li' fanno danno: `calc(50% - 50vw)` misura
   quel 50% sulla colonna invece che sulla pagina, quindi con "fino ai bordi"
   la fotografia usciva dallo schermo a sinistra (misurato: -305px su una
   finestra da 1280) e lasciava un buco a destra. Si portava via anche
   l'etichetta della modifica, che sta agganciata all'angolo del blocco: da
   fuori sembrava che quella foto non si potesse impaginare.
   Qui la larghezza non deve fare niente. Per rimpicciolire c'e' `misura`, che
   e' una frazione del contenitore e per questo vale ovunque. */
.split-media [class*="media-larghezza-"],
.plate [class*="media-larghezza-"]{
  width:auto;max-width:none;margin-inline:0;padding:0
}

/* La misura di una foto sola.
   Senza questa, una foto singola prende e basta la larghezza di cio' che la
   contiene, e dentro uno split o una plate non c'e' modo di rimpicciolirla.
   E' una frazione del contenitore, non una misura fissa, cosi' vale ovunque. */
.media-uno.misura-piccola{max-width:45%;margin-left:auto;margin-right:auto}
.media-uno.misura-media{max-width:65%;margin-left:auto;margin-right:auto}
.media-uno.misura-grande{max-width:85%;margin-left:auto;margin-right:auto}

/* Ritaglio: SPENTO di default, e va lasciato spento a meno che Francesca non
   lo chieda per una galleria precisa.
   Per molto tempo qui non c'era niente perche' il ritaglio era proibito: le
   proporzioni sono una scelta di chi fotografa. La regola e' stata tolta il
   31/08/2026 perche' ora e' Francesca a decidere l'impaginazione dalla pagina,
   quindi il ritaglio torna a essere una sua scelta invece che una decisione
   presa dal CSS a sua insaputa. Resta vero il motivo di allora: una foto
   ritagliata dal sito e' una foto riscritta, quindi non succede mai da solo. */
.gallery.ritaglia figure{--ar:1 !important}
.gallery.ritaglia img{
  width:100%;height:auto;display:block;
  aspect-ratio:var(--ritaglio,1/1);object-fit:cover;
}
.gallery.ritaglia.forma-quadrata img{--ritaglio:1/1}
.gallery.ritaglia.forma-orizzontale img{--ritaglio:3/2}
.gallery.ritaglia.forma-verticale img{--ritaglio:4/5}
.gallery.ritaglia.forma-panorama img{--ritaglio:16/9}

/* ---------- Fascia colorata di accento ---------- */
.band{background:var(--blush);text-align:center;padding:38px 20px 30px}
.band .band-title{
  font-family:var(--serif);font-weight:400;color:var(--dark);
  font-size:clamp(26px,4vw,44px);letter-spacing:.1em;line-height:1.1;
}
.band .band-sub{
  font-size:clamp(14px,2vw,20px);letter-spacing:.35em;color:var(--dark);
  margin-top:8px;text-transform:uppercase;
}
.band .band-tags{margin-top:14px;font-size:15px;letter-spacing:.05em;color:var(--text)}

/* Aria fra la fascia e il testo che la segue.
   Il padding di 30px della fascia sta DENTRO il marrone, quindi non separa
   niente: senza questa regola il primo paragrafo attaccava al bordo colorato
   (misurato: 0px). Il valore resta contenuto per non rompere il ritmo stretto
   del sito. Non tocca le gallerie che seguono una fascia (.wrap-wide), dove la
   foto a ridosso del colore e' voluta. */
.band + .prose{padding-top:clamp(28px,4vw,44px)}

/* ---------- Elenco di voci con titoletto in maiuscolo ---------- */
.item-list{background:var(--paper);text-align:center;padding:50px 20px 70px}
.item-list .intro-text{max-width:880px;margin:0 auto 40px;font-size:16.5px;color:var(--ink)}
.item{max-width:640px;margin:0 auto 30px}
.item h3{
  font-family:var(--sans);font-weight:500;font-size:14px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--dark);margin-bottom:6px;
}
.item p{font-size:15px;margin:0;color:var(--ink)}

@media (max-width:860px){
  .split,.split.reverse{grid-template-columns:1fr}
  .split.reverse .split-media{order:0}

  .hero-full{min-height:78vh}
  .hero-full .hero-text{text-align:center;padding:0 24px 10vh}
  .hero-full .hero-cta{justify-content:center}
}

/* Griglia a quattro colonne, per le sequenze di scatti in esterna */

/* ---------- Domande frequenti a fisarmonica ----------
   Usa <details>/<summary> nativi: nessun JavaScript, accessibili da tastiera,
   indicizzati da Google e apribili dalla ricerca nella pagina del browser. */
.faq{border-top:1px solid var(--hairline);margin:44px 0}
.faq details{border-bottom:1px solid var(--hairline)}
.faq summary{
  cursor:pointer;list-style:none;padding:15px 44px 15px 0;position:relative;
  font-family:var(--serif);font-size:19px;color:var(--dark);
  transition:color .3s;
}
.faq summary:hover{color:var(--taupe)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:8px;top:50%;width:13px;height:1px;
  background:var(--taupe);transform:translateY(-50%);
}
.faq summary::before{
  content:"";position:absolute;right:14px;top:50%;width:1px;height:13px;
  background:var(--taupe);transform:translateY(-50%);transition:opacity .3s,transform .3s;
}
.faq details[open] summary::before{opacity:0;transform:translateY(-50%) rotate(90deg)}
.faq .faq-body{padding:0 0 18px}
.faq .faq-body > *:last-child{margin-bottom:0}
.faq .faq-body p{color:var(--ink);margin-bottom:16px;font-size:16.5px}
.faq .faq-body figure{margin:24px 0 0}
.faq .faq-body figcaption{
  margin-top:10px;font-size:9.5px;letter-spacing:.34em;
  text-transform:uppercase;color:var(--soft);
}

/* Varianti di galleria per le sequenze dentro le pagine */
.gallery.tight{padding-bottom:0}

/* Immagine a tutta larghezza fra due sezioni */
.feature-wide{margin:0}
.feature-wide img{width:100%;height:auto;filter:var(--photo-filter)}

/* Griglia a tre colonne (esplicita, per leggibilita' nel markup) */

/* Tavola singola: una sola immagine, centrata, con aria attorno.
   Serve a dare peso alle fotografie piu' forti, che in una griglia si perdono. */
.plate{max-width:520px;margin:48px auto;padding:0 24px;text-align:center}
.plate img{width:100%;filter:var(--photo-filter)}
.plate figcaption{
  margin-top:14px;font-size:9.5px;letter-spacing:.34em;
  text-transform:uppercase;color:var(--soft);
}


/* Le gallerie dentro un articolo escono dalla colonna di testo.
   .wrap-narrow e' centrato, quindi centrare rispetto al genitore equivale a
   centrare rispetto alla finestra. */
.prose .wrap-wide{
  margin-inline:calc(50% - min(720px, 48vw));
  padding:0;
}
@media (max-width:860px){
  .prose .wrap-wide{margin-inline:0}
}

/* Nelle righe giustificate la didascalia sfalserebbe l'allineamento: la figura
   che ce l'ha diventa piu' alta delle vicine. Una riga si legge come insieme,
   le didascalie restano alle tavole singole (.plate). */
.gallery figcaption{display:none}

/* Ultima riga: senza questo, una foto rimasta sola si allargherebbe a tutta la
   riga diventando enorme. Un elemento invisibile in coda assorbe lo spazio
   residuo, così le foto dell'ultima riga restano dell'altezza delle altre.

   Solo dalle cinque foto in su: sotto quella soglia la galleria sta tutta su
   una riga, e il riempitivo si mangerebbe lo spazio lasciando le foto piccole
   e allineate a sinistra invece che distese sulla larghezza. */
.gallery:has(figure:nth-child(5))::after{content:"";flex-grow:999999;height:0;min-width:0}

/* ---------- Tutte su una riga, quante che siano ----------
   Le disposizioni a colonne sono a numeri fissi — due, tre, quattro — e con
   cinque fotografie non c'e' un'opzione che torni: si finisce a provarle
   tutte senza trovarla. Aggiungerne una da cinque avrebbe solo spostato il
   problema a sei.

   Non serve contare. La galliera giustificata e' gia' un flex con la base
   proporzionale alle proporzioni di ogni foto: va a capo soltanto perche' la
   somma delle basi supera la larghezza. Togliendo l'andare a capo, le foto si
   distendono da sole su una riga sola, con altezza uniforme e larghezze
   diverse — cioe' senza ritagliare niente, che e' la regola 1.

   Sotto gli 860px torna a capo: cinque foto in fila su un telefono sarebbero
   larghe settanta pixel. */
.gallery.una-riga{flex-wrap:nowrap}
.gallery.una-riga::after{content:none}
@media (max-width:860px){
  .gallery.una-riga{flex-wrap:wrap}
  .gallery.una-riga:has(figure:nth-child(5))::after{content:"";flex-grow:999999;height:0;min-width:0}
}

/* ---------- Menu mobile: il pannello deve coprire tutta la finestra ----------
   backdrop-filter sull'header crea un blocco di contenimento, quindi il
   position:fixed della nav si posizionava rispetto all'header (79px di altezza)
   invece che rispetto alla finestra: il menu si apriva schiacciato nella
   striscia in alto. Mentre il menu e' aperto la sfocatura non serve. */
body.nav-open header{backdrop-filter:none;-webkit-backdrop-filter:none}

@media (max-width:860px){
  /* margin:auto invece di align-items:center: centra quando c'e' spazio, ma
     se il contenuto e' piu' alto della finestra non ne taglia la cima. */
  nav{align-items:flex-start;-webkit-overflow-scrolling:touch}
  nav ul{margin:auto;padding:72px 24px;width:100%}
  nav > ul > li{width:100%}
}

/* ==========================================================================
   Configurazioni della galleria
   Si scelgono dal frontmatter della pagina: galleryStyle e galleryScale.
   ========================================================================== */

/* --- Scala: quanto grandi vengono le foto ---
   Nella galleria giustificata regola l'altezza a cui tendono le righe. */
.gallery.scale-small  figure{flex-basis:calc(var(--ar,1) * 230px)}
.gallery.scale-large  figure{flex-basis:calc(var(--ar,1) * 460px)}

/* --- Stile "colonne": larghezze uguali, altezze naturali ---
   Piu' calmo e regolare della giustificata. Il bordo inferiore di ogni riga
   resta irregolare, perche' le foto non vengono ritagliate. */
.gallery.style-columns{
  display:grid;grid-template-columns:repeat(3,1fr);align-items:start;
}
.gallery.style-columns::after{display:none}
.gallery.style-columns figure{flex:none}
.gallery.style-columns.scale-small{grid-template-columns:repeat(4,1fr)}
.gallery.style-columns.scale-large{grid-template-columns:repeat(2,1fr)}

/* --- Stile "cascata": colonne che si riempiono senza vuoti ---
   Le foto scorrono dall'alto in basso, colonna per colonna. Adatto a molte
   immagini di formati diversi. Attenzione: cambia l'ordine di lettura. */
.gallery.style-masonry{
  display:block;column-count:3;column-gap:var(--gallery-gap);
}
.gallery.style-masonry::after{display:none}
.gallery.style-masonry figure{
  break-inside:avoid;margin:0 0 var(--gallery-gap);width:100%;
}
.gallery.style-masonry.scale-small{column-count:4}
.gallery.style-masonry.scale-large{column-count:2}

@media (max-width:1120px){
  .gallery.style-columns,.gallery.style-columns.scale-small{grid-template-columns:repeat(2,1fr)}
  .gallery.style-masonry,.gallery.style-masonry.scale-small{column-count:2}
}
@media (max-width:560px){
  .gallery.style-columns,.gallery.style-columns.scale-small,
  .gallery.style-columns.scale-large{grid-template-columns:1fr}
  .gallery.style-masonry,.gallery.style-masonry.scale-small,
  .gallery.style-masonry.scale-large{column-count:1}
}

/* --- Spazio fra le foto: si sceglie con galleryGap nel frontmatter ---
   Il valore predefinito e' --gallery-gap in :root, valido per tutto il sito.
   "none" fa combaciare le foto: un accostamento da libro fotografico. */
.gallery.gap-none  {--gallery-gap:0}
.gallery.gap-hair  {--gallery-gap:3px}
.gallery.gap-tight {--gallery-gap:clamp(6px,0.7vw,10px)}
.gallery.gap-wide  {--gallery-gap:clamp(20px,2.6vw,40px)}
.gallery.gap-xwide {--gallery-gap:clamp(32px,4.4vw,72px)}

/* Avviso "pagina non aggiornata", solo in sviluppo: lo inserisce lo script in
   base.njk quando la ricostruzione fallisce. */
#build-stale{
  position:fixed;left:0;right:0;bottom:0;z-index:9999;
  background:#8c2f2f;color:#fff;padding:12px 18px;text-align:center;
  font-family:var(--sans);font-size:13px;letter-spacing:.04em;
}

/* ---------- Footer su schermo stretto ----------
   A una sola colonna diventava una colonna lunghissima allineata a sinistra:
   1334px, cioe' una volta e mezza lo schermo di un telefono, in stridore con
   il resto del sito che e' centrato.
   Le due liste di link stanno affiancate; marchio e studio a tutta larghezza. */
@media (max-width:560px){
  .foot-grid{
    grid-template-columns:1fr 1fr;
    gap:26px 20px;
    text-align:center;
    padding-bottom:28px;
  }
  .foot-brand{grid-column:1 / -1}
  .foot-brand p{margin-left:auto;margin-right:auto}
  .foot-social{justify-content:center}
  /* Il blocco "Studio" torna a tutta larghezza in fondo */
  .foot-grid > div:last-child{grid-column:1 / -1}
  footer{padding-top:40px}
  footer h3{margin-bottom:16px}
  footer li{margin-bottom:6px}
  footer li a,footer address{font-size:13.5px}
  .foot-bottom{justify-content:center;text-align:center;gap:10px;flex-direction:column}
}

/* ---------- Sottomenu su schermo stretto: difesa in profondita' ----------
   La versione desktop del menu a tendina usa position:absolute + left:50% +
   translateX(-50%). Se per qualsiasi motivo quella regola sopravvive su
   mobile, il pannello finisce mezzo fuori dallo schermo e le voci risultano
   tagliate a sinistra.
   Qui si annulla con specificita' piu' alta e si toglie il nowrap, cosi' anche
   un'etichetta lunga va a capo invece di uscire dal bordo. */
@media (max-width:860px){
  nav .drop{
    position:static;
    left:auto;right:auto;top:auto;bottom:auto;
    transform:none;
    min-width:0;max-width:100%;
    margin:0;
  }
  nav .drop a{
    white-space:normal;
    text-align:center;
    max-width:100%;
  }
}

/* Immagine a tutta pagina dentro un articolo: esce dalla colonna di testo e
   arriva ai bordi della finestra. Serve a dare respiro e a spezzare il ritmo
   di un pezzo lungo, dove testo e galleria si alternerebbero sempre uguali. */
.prose .full-bleed{
  margin-inline:calc(50% - 50vw);
  margin-top:56px;margin-bottom:56px;
}
.prose .full-bleed img{width:100%;height:auto;display:block;filter:var(--photo-filter)}
.prose .full-bleed figcaption{
  margin-top:16px;text-align:center;
  font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--soft);
}

/* Citazione staccata dentro un articolo */
.prose .pull-quote{
  font-family:var(--serif);font-weight:400;color:var(--dark);
  font-size:clamp(24px,3.4vw,40px);line-height:1.25;letter-spacing:.02em;
  text-align:center;text-wrap:balance;
  margin:64px auto;max-width:20ch;
}

/* Fascia di sezione dentro un articolo */
.prose .band{
  margin-inline:calc(50% - 50vw);
  margin-top:64px;margin-bottom:56px;
}

@media (max-width:860px){
  .prose .full-bleed{margin-top:36px;margin-bottom:36px}
  .prose .pull-quote{margin:44px auto}
}

/* ---------- Apertura del portfolio: una foto per schermata ----------
   L'immagine e' vincolata in ALTEZZA, non in larghezza: cosi' occupa una
   schermata senza essere ritagliata. Una verticale resta stretta e alta come
   una stampa appesa; una orizzontale riempie quasi tutta la larghezza. */
.lead-plates{margin:0 0 clamp(40px,6vw,90px)}
.lead-plate{
  margin:0 auto clamp(28px,4vw,64px);
  display:flex;flex-direction:column;align-items:center;
  padding:0 clamp(16px,3vw,48px);
}
.lead-plate img{
  max-height:82vh;
  width:auto;max-width:100%;
  height:auto;
  filter:var(--photo-filter);
}
.lead-plate figcaption{
  margin-top:16px;
  font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--soft);
}

@media (max-width:860px){
  /* Su telefono l'altezza non e' il vincolo giusto: la foto deve prendere
     tutta la larghezza, come il resto delle gallerie. */
  .lead-plate{padding:0}
  .lead-plate img{max-height:none;width:100%}
  .lead-plate{margin-bottom:var(--gallery-gap)}
  .lead-plates{margin-bottom:clamp(28px,6vw,48px)}
}

/* Le foto senza didascalia non devono lasciare uno spazio vuoto sotto */
.lead-plate figcaption:empty{display:none}

/* ==========================================================================
   Prova: come far staccare le fotografie dal fondo
   Il lavoro e' quasi tutto high-key, quindi su fondo avorio le foto si
   sciolgono nella pagina. Quattro trattamenti a confronto, si sceglie con la
   classe sul <body> (vedi la pagina /prova/portfolio-fondo/).
   ========================================================================== */

.gallery.style-spreads::after{display:none}
.gallery.style-spreads figure{flex:none;margin:0}

/* Ciclo di sei: due "pagine", speculari. Le linee di colonna vanno da 1 a 13. */
.gallery.style-spreads figure:nth-child(6n+1){grid-column:1 / 9}    /* sola, a sinistra */
.gallery.style-spreads figure:nth-child(6n+2){grid-column:1 / 7}
.gallery.style-spreads figure:nth-child(6n+3){grid-column:8 / 13}
.gallery.style-spreads figure:nth-child(6n+4){grid-column:5 / 13}   /* sola, a destra */
.gallery.style-spreads figure:nth-child(6n+5){grid-column:1 / 6}
.gallery.style-spreads figure:nth-child(6n+6){grid-column:7 / 13}

/* La seconda della coppia scende: due foto allineate in alto sono una riga di
   griglia, due sfalsate sono una pagina. */
.gallery.style-spreads figure:nth-child(6n+3),
.gallery.style-spreads figure:nth-child(6n+6){
  margin-top:clamp(36px,7vw,120px);
}

/* Le foto sole respirano anche dopo: sono i punti di sosta della sequenza. */
.gallery.style-spreads figure:nth-child(6n+1),
.gallery.style-spreads figure:nth-child(6n+4){
  margin-bottom:clamp(10px,2vw,36px);
}

/* Niente ingrandimento al passaggio del mouse: qui la quiete e' il punto. */
.gallery.style-spreads figure{overflow:visible}
.gallery.style-spreads figure:hover img{transform:none}

@media (max-width:860px){
  /* Sul telefono la sequenza diventa lineare, a tutta larghezza, con molto
     spazio fra una foto e l'altra: si scorre una fotografia alla volta. */
  .gallery.style-spreads{
    display:block;max-width:none;
    padding-bottom:clamp(48px,12vw,90px);
  }
  .gallery.style-spreads figure{
    margin:0 0 clamp(40px,11vw,72px) !important;
  }
}

/* --- Spreads: si misura in altezza, non in larghezza ---
   Assegnando solo la colonna, un verticale diventava alto il doppio di un
   orizzontale (misurato: 1161px contro 516px) e squilibrava la sequenza.

   Il vincolo giusto e' l'altezza: e' cosi' che una foto si appende a una
   parete, ed e' cosi' che due formati diversi pesano uguale.

   Non si puo' pero' usare width:auto. Con un srcset la larghezza "naturale"
   di un'immagine non e' quella del file, ma quella dichiarata in sizes: tutte
   le foto finivano a 475px identici. Si dichiara invece la larghezza in
   funzione dell'altezza voluta e delle proporzioni reali (--ar, che la
   galleria gia' emette). L'altezza segue da sola, e nulla viene ritagliato. */
.gallery.style-spreads img{
  width:min(100%, calc(var(--ar,1.5) * var(--plate-h)));
  height:auto;
}
.gallery.style-spreads figure:nth-child(6n+1),
.gallery.style-spreads figure:nth-child(6n+4){--plate-h:74vh}
.gallery.style-spreads figure:nth-child(6n+2),
.gallery.style-spreads figure:nth-child(6n+3),
.gallery.style-spreads figure:nth-child(6n+5),
.gallery.style-spreads figure:nth-child(6n+6){--plate-h:54vh}

/* Le foto di destra si allineano al bordo destro della loro colonna, cosi' il
   margine esterno resta pulito e l'asimmetria e' voluta, non casuale. */
.gallery.style-spreads figure:nth-child(6n+3) img,
.gallery.style-spreads figure:nth-child(6n+4) img,
.gallery.style-spreads figure:nth-child(6n+6) img{
  margin-left:auto;
}

@media (max-width:860px){
  .gallery.style-spreads img{width:100%;margin-left:0}
}

/* Il filetto, dove le foto respirano. */
.gallery.style-spreads img,
.lead-plate img{
  box-shadow:var(--photo-edge);
}

/* ==========================================================================
   Filmati Heart Fusion
   Copertina + pulsante; il player di Vimeo arriva solo al clic (vedi lo
   shortcode {% video %} e lo script in base.njk).
   ========================================================================== */
.video{margin:0 0 clamp(48px,7vw,96px)}

.video-plate{
  display:block;width:100%;padding:0;border:0;background:none;
  position:relative;cursor:pointer;
  line-height:0;                 /* niente spazio fantasma sotto l'immagine */
  box-shadow:var(--photo-edge);
}
.video-plate img{width:100%;height:auto;display:block;filter:var(--photo-filter)}

/* L'ombreggiatura sta solo dietro al pulsante, non sopra tutta la foto.
   Un velo esteso garantiva il contrasto del triangolo ma spegneva
   l'immagine, e su questo sito le fotografie restano chiare. */
.video-plate::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 50% 50%,
    rgba(42,39,36,.34) 0, rgba(42,39,36,.20) 12%, rgba(42,39,36,0) 30%);
  transition:opacity .5s ease;
}
.video-plate:hover::after{opacity:.7}

.video-play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:clamp(58px,7vw,84px);aspect-ratio:1;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.video-plate:hover .video-play{transform:translate(-50%,-50%) scale(1.08)}
.video-play svg{width:100%;height:100%;display:block}
.video-play circle{fill:none;stroke:#fff;stroke-width:2;opacity:.9}
.video-play path{fill:#fff}

.video-plate:focus-visible{outline:2px solid var(--gold);outline-offset:4px}

/* Il player, una volta caricato, prende il posto della copertina */
.video iframe{
  display:block;width:100%;aspect-ratio:16/9;border:0;
  background:#000;
}

.video figcaption{
  margin-top:14px;
  font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--soft);
}
.video-note{
  text-transform:none;letter-spacing:.01em;color:var(--taupe);
}
.video-note::before{content:"· "}

@media (prefers-reduced-motion:reduce){
  .video-plate::after,.video-play{transition:none}
  .video-plate:hover .video-play{transform:translate(-50%,-50%)}
}

/* ==========================================================================
   Modulo di contatto
   Campi larghi, etichette sopra, una riga sola su telefono.
   Il modulo funziona senza JavaScript: e' un POST normale verso contact.php.
   ========================================================================== */
.form{margin:0 0 clamp(28px,4vw,44px)}

.form-row{
  display:grid;grid-template-columns:1fr 1fr;
  gap:0 clamp(16px,2.4vw,32px);
}
@media (max-width:640px){
  .form-row{grid-template-columns:1fr}
}

.field{margin:0 0 clamp(18px,2.2vw,26px)}
.field label{
  display:block;margin-bottom:8px;
  font-size:.76rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--soft);
}
.field .req{color:var(--taupe);margin-left:2px}

.field input[type=text],
.field input[type=email],
.field input[type=tel],
.field select,
.field textarea{
  width:100%;
  font:inherit;font-size:1rem;color:var(--ink);
  background:transparent;
  border:0;border-bottom:1px solid var(--hairline);
  border-radius:0;                 /* Safari su iPhone arrotonda da solo */
  padding:10px 2px;
  transition:border-color .3s ease;
  -webkit-appearance:none;appearance:none;
}
.field textarea{resize:vertical;min-height:120px;line-height:1.6}

/* La freccia della tendina, disegnata qui perche' -webkit-appearance:none
   toglie anche quella del sistema. */
.field select{
  background-image:linear-gradient(45deg,transparent 50%,var(--soft) 50%),
                   linear-gradient(135deg,var(--soft) 50%,transparent 50%);
  background-position:calc(100% - 12px) 50%, calc(100% - 7px) 50%;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
  padding-right:28px;
  cursor:pointer;
}

.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;border-bottom-color:var(--dark);
}
.field textarea::placeholder{color:var(--taupe)}

/* Il consenso: casella accanto al testo, non sopra. */
.field-consent label{
  display:flex;gap:12px;align-items:flex-start;
  text-transform:none;letter-spacing:.01em;font-size:.92rem;
  color:var(--text);line-height:1.55;
}
.field-consent input{margin-top:4px;flex:none;accent-color:var(--dark)}
.field-consent a{color:var(--dark);text-decoration:underline}

.form-send{margin:clamp(24px,3vw,36px) 0 0}
.form-note{
  margin:14px 0 0;font-size:.86rem;color:var(--taupe);
}

/* La trappola per i robot. Nascosta senza display:none e senza
   visibility:hidden: alcuni programmi controllano proprio quelle due, e un
   campo palesemente nascosto lo saltano. Cosi' invece lo compilano. */
.hp{
  position:absolute;left:-9999px;width:1px;height:1px;
  overflow:hidden;
}

/* Avviso di errore, mostrato solo tornando da contact.php con ?error=1 */
.form-error{
  margin:0 0 26px;padding:14px 18px;
  background:#F6EEE9;border-left:2px solid #B4796A;
  color:#6E4438;font-size:.94rem;
}

.contact-details{
  max-width:520px;margin:0 auto;text-align:center;
}
.contact-details h3{
  margin:clamp(26px,3.5vw,40px) 0 10px;
  font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:400;color:var(--soft);
}
.contact-details p{margin:0 0 6px}
.contact-details a{color:var(--dark)}

/* --- Listino su telefono: schede più compatte ---
   Con il padding pieno una sola scheda supera l'altezza dello schermo, e tre
   pacchetti che non si possono confrontare valgono meno di uno. Stringendo il
   respiro interno se ne vedono due per schermata, che e' il minimo perche' il
   confronto abbia senso. */
@media (max-width:560px){
  .price-grid{gap:18px;padding-bottom:60px}
  .price-card{padding:26px 22px}
  .price-card h3{font-size:23px}
  .price-card .amount{font-size:30px;margin-bottom:16px}
  .price-card ul{margin-bottom:20px}
  .price-card li{padding:7px 0}
}

/* --- Scala "xlarge" ---
   Non e' solo una questione di dimensione. Con una sequenza che alterna bianco
   e nero e colore, righe da quattro incolonnano sempre lo stesso tono: le
   posizioni 1 e 5 hanno la stessa parita'. Righe da tre invertono la parita' a
   ogni riga e l'alternanza diventa una scacchiera anche in verticale.

   Misurato sul portfolio newborn a 1440px, contando le coppie di bianco e nero
   una sopra l'altra:

     basis 460px -> larghe 358px, righe da 3-4, 4 coppie incolonnate
     basis 520px -> larghe 468px, righe da 2-3, 1 coppia
     basis 640px -> larghe 551px, righe irregolari, 0 coppie

   520 e' il compromesso. Ma un valore fisso funziona solo a una larghezza:
   fra 900 e 1120px le righe tornavano da due e le coppie incolonnate salivano
   a otto, perche' con righe pari l'alternanza incolonna sempre lo stesso tono.
   Legando il basis alla finestra (37vw, con tetto a 520px) le righe restano da
   tre a ogni larghezza: misurato 3,3,3,3,3,2,2 da 900 a 1400px, sempre uguale.

   Restano due coppie incolonnate, ed e' il minimo raggiungibile: le ultime due
   righe hanno due foto, e con righe pari il problema non e' eliminabile. Su
   telefono, una foto per riga, l'alternanza e' perfetta. */
.gallery.scale-xlarge figure{flex-basis:calc(var(--ar,1) * min(520px, 37vw))}

/* ---------- Due fotografie non si toccano mai ----------
   Quando due sezioni diverse mettono una fotografia una sopra l'altra, il
   confine sparisce e le due si leggono come un'immagine sola tagliata male.

   Il principio e' quello detto da Stefano, e vale la pena scriverlo: **se due
   fotografie devono stare attaccate esistono le gallerie.** Fra oggetti
   diversi ci vuole respiro, e lo stacco e' `margin` — quindi mostra il fondo
   della pagina e ne prende il colore da solo, senza che nessun colore vada
   scritto due volte.

   Misurato su tredici pagine il 03/09/2026: due fotografie si toccavano
   davvero in **due punti soltanto** — la home (l'hero e la sezione di
   presentazione, entrambe con la foto a sinistra) e il workshop (offerta e
   saluto, entrambe con la foto a destra). Dove le foto stanno su lati opposti
   non si toccano e lo stacco non serve, ma non fa danno: e' piccolo apposta,
   perche' CLAUDE.md chiede un ritmo compatto e la variante ariosa e' gia'
   stata confrontata e scartata. */
.hero-full + .split,
.split + .split{margin-top:clamp(20px,2.5vw,40px)}

/* ---------- Workshop di Caserta ----------
   Questa pagina e' l'antenata del sito: la tavolozza, i font, `.split`,
   `.statement`, `.band` e `.divider` vengono da qui. Riprodurla vuol dire
   soprattutto RIUSARE quelle classi, non riscriverle. Quello che segue e'
   solo cio' che nel sito non esisteva: l'elenco del programma, gli orari,
   e i pochi ritocchi ai blocchi che qui hanno un compito diverso. */

/* L'hero. Il sito ha gia' la regola per l'immagine a tutta finestra, ma
   guarda il figlio diretto (`.hero-full > picture`): qui il blocco `media`
   mette un `div` in mezzo, quindi non la prendeva e la fotografia restava in
   colonna, larga meta' schermo, col testo di fianco. Vale la stessa eccezione
   dichiarata piu' sopra: un'immagine a piena finestra e' per definizione
   ritagliata. */
.workshop .hero-full > .media-uno{position:absolute;inset:0;width:100%;margin:0}
.workshop .hero-full > .media-uno picture,
.workshop .hero-full > .media-uno img{position:absolute;inset:0;width:100%;height:100%}
.workshop .hero-full > .media-uno img{object-fit:cover;object-position:center 30%}
.workshop .hero-full .hero-text{position:relative;z-index:2}

/* La presentazione: qui il testo e' lungo e va letto, non contemplato, quindi
   resta allineato a sinistra come nella pagina originale. `.greet` e `.pull`
   il sito ce li ha gia' e valgono anche qui. */
.workshop .ws-bio .split-text{
  padding:clamp(40px,6vw,90px) clamp(24px,5vw,60px);
  text-align:left;align-items:flex-start;
}
.workshop .ws-bio .split-text p{font-size:15.5px}
/* Il ritratto pesava quanto meta' schermo: e' una presentazione, non una
   fotografia da guardare. La colonna dell'immagine si stringe e il testo
   prende lo spazio, che e' l'ordine giusto per questa sezione. */
.workshop .ws-bio{grid-template-columns:1.6fr 1fr}

/* Le due citazioni. Il `.statement` del sito e' molto piu' grande di quello
   che era qui (fino a 56px contro 34) e ha un tetto di 14 caratteri per riga:
   su queste frasi, che sono lunghe, diventava una colonna altissima. Si torna
   alla misura originale. */
.workshop .split .split-text p.statement{
  font-size:clamp(22px,3vw,34px);line-height:1.35;letter-spacing:.03em;
  max-width:none;
}

/* Il programma: voci brevi, centrate, una sotto l'altra. */
.workshop .ws-programma{background:var(--offwhite);text-align:center;padding:50px 20px 70px}
/* L'introduzione fa da apertura alla sezione, quindi va letta come tale: nel
   serif e piu' grande del corpo. Prima era testo identico a quello delle voci,
   e la sezione cominciava senza che niente dicesse da dove. */
.workshop .ws-intro{
  max-width:720px;margin:0 auto clamp(38px,4vw,54px);
  font-family:var(--serif);font-size:clamp(17px,1.6vw,21px);
  line-height:1.6;color:var(--dark);
}
.workshop .ws-programma .ws-intro:last-child{margin:20px auto 0}
/* Il programma della giornata: le cose che si vedranno accadere.
   Prima era una colonna centrata con i titoli a 14px — cioe' **piu' piccoli
   del testo che stava sotto**: nessuna gerarchia, e nessun bordo sinistro a
   cui l'occhio potesse tornare fra una voce e l'altra. Da qui il senso di
   dispersione. Ora e' una griglia allineata a sinistra, coi titoli nel serif
   della pagina e un filetto che stacca una voce dall'altra.
   Il filetto, e non le cifre: le cifre sono il segno di `.ws-imparerai`, che
   su questa pagina sta poco sopra, e riusarle qui farebbe sembrare la stessa
   sezione ripetuta due volte. */
.workshop .ws-elenco{
  max-width:1000px;margin:0 auto;text-align:left;
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(26px,3vw,44px) clamp(36px,5vw,72px);
}
.workshop .ws-voce{padding-top:18px;border-top:1px solid var(--taupe)}
.workshop .ws-voce h3{
  font-family:var(--serif);font-weight:400;font-size:clamp(19px,1.7vw,23px);
  letter-spacing:.1em;text-transform:uppercase;color:var(--dark);
  line-height:1.25;margin:0 0 10px;
}
.workshop .ws-voce p{font-size:15px;margin:0}
@media (max-width:860px){
  .workshop .ws-elenco{grid-template-columns:1fr}
}

/* Una fotografia non deve mai toccare la fascia che la segue: sono due oggetti
   diversi, e appoggiati l'uno all'altro sembrano un pezzo solo. */
.split + .band,.hero-full + .band{margin-top:clamp(20px,2.5vw,40px)}

/* Gli orari: due colonne, l'ora e cosa si fa. */
/* Gli orari sono l'unica parte tabellare della pagina: un elenco di ore, non
   prosa. Stavano sullo stesso fondo di tutto il resto, quindi si confondevano
   col programma che li precede — mentre sono la cosa che si torna a cercare.
   Adesso sono una scheda su fondo grigio, staccata dai bordi: si riconosce a
   colpo d'occhio senza doverla leggere.
   Il grigio e' caldo (#E6E1DC) e non neutro: un grigio vero, in mezzo a questa
   tavolozza, sembrerebbe sporco. */
.workshop .ws-orario{background:var(--offwhite);padding:clamp(26px,3.5vw,48px) 20px}
.workshop .ws-orario .wrap{
  max-width:860px;margin:0 auto;background:#E6E1DC;
  padding:clamp(30px,4vw,48px) clamp(24px,4vw,52px);
}
.workshop .ws-orario h2{
  font-family:var(--serif);font-weight:400;color:var(--dark);
  font-size:clamp(24px,2.4vw,30px);letter-spacing:.06em;margin:0 0 22px;
}
.workshop .ws-orario .riga{
  display:flex;gap:18px;font-size:14.5px;padding:11px 0;
  border-bottom:1px solid rgba(111,104,98,.2);
}
.workshop .ws-orario .riga:last-child{border-bottom:none;padding-bottom:0}
/* Sul grigio il taupe non si legge piu': l'ora torna del colore dei titoli. */
.workshop .ws-orario .riga .ora{flex:0 0 150px;color:var(--dark);font-weight:500}
@media (max-width:560px){
  .workshop .ws-orario .riga{flex-direction:column;gap:2px}
  .workshop .ws-orario .riga .ora{flex:none}
}

/* I tre temi del workshop, subito sotto l'hero: le stesse schede della home,
   in tre colonne. Il posto del numero progressivo lo prende la giornata —
   "Day One", "Day Two" — perche' i tre temi non sono una sequenza e numerarli
   direbbe una cosa falsa, mentre sapere in che giornata si affrontano e'
   un'informazione vera e utile a chi sta decidendo. */
.workshop .ws-temi{padding:clamp(48px,6vw,90px) 0 clamp(28px,4vw,56px)}
/* ---------- Cosa saprai fare ----------
   E' la promessa del corso, e arriva prima del programma: chi legge decide
   qui. Per questo e' l'unica fascia scura del corpo della pagina — tutto il
   resto e' sul fondo chiaro, quindi questa si stacca da sola senza bisogno di
   ornamenti. Riprende il buio dell'hero, cosi' non e' un colore nuovo.

   Le cifre sono ordinali veri: sono sette cose diverse, non una sequenza di
   passi, ma numerarle serve a far vedere **quante sono** — che e' l'argomento. */
.workshop .ws-imparerai{background:var(--text);color:var(--offwhite);padding:clamp(64px,8vw,110px) 0}
.workshop .ws-imparerai .occhiello{
  font-family:var(--sans);font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--taupe);margin:0 0 14px;
}
.workshop .ws-imparerai h2{
  font-family:var(--serif);font-weight:400;color:var(--offwhite);
  font-size:clamp(30px,4.4vw,52px);letter-spacing:.06em;line-height:1.15;
  margin:0 0 clamp(36px,5vw,64px);
}
.workshop .ws-imparerai .elenco{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(28px,3.4vw,52px) clamp(36px,5vw,80px);
}
.workshop .ws-imparerai .voce{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start}
.workshop .ws-imparerai .cifra{
  font-family:var(--serif);font-style:italic;font-size:20px;
  color:var(--taupe);line-height:1.5;font-variant-numeric:tabular-nums;
}
.workshop .ws-imparerai h3{
  font-family:var(--serif);font-weight:400;color:var(--offwhite);
  font-size:clamp(18px,1.6vw,22px);letter-spacing:.1em;text-transform:uppercase;
  line-height:1.3;margin:0 0 8px;
}
.workshop .ws-imparerai p{
  color:rgba(242,238,235,.72);font-size:15px;line-height:1.7;margin:0;max-width:46ch;
}
@media (max-width:860px){
  .workshop .ws-imparerai .elenco{grid-template-columns:1fr}
}

/* Le tre caselle in cima alla stessa altezza. E' l'unico punto del sito dove il
   ritaglio e' acceso su richiesta esplicita: qui le tre immagini fanno da
   indice del programma, e tre altezze diverse le facevano leggere come tre
   cose slegate. La forma e' quella del filmato (9:16), cosi' e' lui a non
   essere ritagliato e le due fotografie si adattano a lui. */
.workshop .ws-temi .pic{aspect-ratio:9/16}
/* Tutta la catena deve riempire, non solo l'immagine. Fra la casella e l'img
   ci sono due anelli — il contenitore che il blocco `media` mette attorno e il
   <picture> — e finche' uno dei due ha altezza automatica il `height:100%`
   sull'immagine non trova a cosa riferirsi. Si vedeva: caselle da 666px con
   dentro immagini da 468, e un terzo di fondo vuoto sotto. */
.workshop .ws-temi .pic > *,
.workshop .ws-temi .pic picture{display:block;width:100%;height:100%}
.workshop .ws-temi .pic img,
.workshop .ws-temi .ws-filmato{width:100%;height:100%;object-fit:cover;display:block}

/* I titoli sono l'indice del corso: chi arriva qui deve capire in tre secondi
   cosa si impara. Prendono il trattamento della scritta CASERTA nell'hero —
   stesso carattere, maiuscoletto spaziato — invece di essere sottotitoli
   qualunque. */
.workshop .ws-temi .svc h3{
  font-size:clamp(19px,1.7vw,24px);letter-spacing:.14em;
  text-transform:uppercase;line-height:1.25;margin-bottom:14px;
}
.workshop .ws-temi .svc p{margin-bottom:0}

/* I blocchi di fotografie di questa pagina prendono aria sopra e sotto.
   Non e' una cornice: e' `margin`, quindi lo stacco lascia vedere il fondo
   della pagina e ne prende il colore da solo — se un domani la tavolozza
   cambia, non c'e' un secondo posto da aggiornare.
   Serve a farli leggere come sessioni distinte invece che come un unico
   nastro di immagini: senza, la fine di un gruppo e l'inizio del successivo
   si toccano e sembrano la stessa cosa.
   Solo `margin-block`: le due `margin-inline` negative sono quelle che
   portano i blocchi a tutta finestra, e toccarle li rimetterebbe in colonna. */
.workshop > [data-media],
.workshop > .media-uno,
.workshop > [class*="media-larghezza-"]{line-height:0;margin-block:clamp(28px,4vw,56px)}
/* La galleria si porta dietro 70px di `padding-bottom`, che servono quando sta
   dentro il flusso di un testo. Qui il blocco ha gia' il suo `margin-block`, e
   la scheda degli orari la propria imbottitura: le tre spaziature si sommavano
   e fra il collage e gli orari si apriva un buco di 174px.
   Lo spazio lo decide **uno solo**: il margine del blocco. */
.workshop > [class*="media-"] .gallery{padding-bottom:0}
.workshop > [class*="media-"]:has(+ .ws-orario){margin-bottom:0}
.workshop > [class*="media-"] + .ws-orario{padding-top:clamp(28px,3.5vw,56px)}

.workshop .ws-investimento .split-text,
.workshop .ws-offerta .split-text,
.workshop .ws-saluto .split-text{
  text-align:center;align-items:center;padding:clamp(40px,6vw,60px);
}
.workshop .ws-investimento h2{
  font-family:var(--serif);font-weight:400;color:var(--dark);
  font-size:32px;letter-spacing:.15em;margin:0 0 26px;
}
.workshop .ws-investimento p{font-size:15.5px;max-width:380px;margin:0 0 16px}
.workshop .ws-offerta h3{
  font-family:var(--serif);font-weight:400;color:var(--dark);
  font-size:22px;letter-spacing:.06em;margin:0 0 8px;
}
.workshop .ws-offerta p{font-size:14.5px;margin:0;max-width:460px}
.workshop .ws-saluto .split-text{background:#fff}
.workshop .ws-saluto .firma{
  font-family:var(--serif);font-style:italic;font-size:20px;margin-top:10px;
}

/* La chiamata all'azione: questa pagina ha la sua, e non quella del sito. */
.workshop .ws-richiesta{background:#fff;padding:70px 24px;text-align:center}
/* Fuori da uno split il sito non da' nessuno stile a `.statement`: qui va
   scritto per intero, altrimenti resta un paragrafo qualsiasi. Non e'
   maiuscolo come le citazioni — nell'originale questo titolo era in tondo. */
.workshop .ws-richiesta .statement{
  font-family:var(--serif);font-weight:400;color:var(--dark);
  font-size:32px;letter-spacing:.06em;line-height:1.2;margin:0 0 10px;
}
.workshop .ws-richiesta p{max-width:480px;margin:0 auto 30px;font-size:15px}

/* ---------- I provini sotto il carosello ----------
   Con i provini chi guarda comanda la dissolvenza invece di subirla. Non e'
   solo comodita': un carosello tiene un riquadro fisso e quindi ritaglia, e un
   ritaglio che cambia da solo sotto gli occhi da' molto piu' fastidio di uno
   che cambia quando lo chiedi tu. */
.provini-carosello{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;
  margin-top:10px}
.provini-carosello .provino{padding:0;border:0;background:none;cursor:pointer;
  line-height:0;opacity:.45;transition:opacity .25s ease;
  outline-offset:2px}
.provini-carosello .provino img{display:block;height:52px;width:auto;max-width:none}
.provini-carosello .provino:hover,
.provini-carosello .provino:focus-visible{opacity:.8}
.provini-carosello .provino.qui{opacity:1;box-shadow:0 0 0 1px var(--dark)}
@media (max-width:560px){
  .provini-carosello{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start}
  .provini-carosello .provino img{height:42px}
}