/* fotocarrino.it — direzione «Provino», versione chiara. Base dal mockup approvato c2-provino-chiaro.html */
@font-face{font-family:"Bodoni Moda";src:url(/assets/fonts/bodoni-moda-400.woff2) format("woff2");
  font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:"Nanum Myeongjo";src:url(/assets/fonts/nanum-myeongjo-400.woff2?v=2) format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Nanum Myeongjo";src:url(/assets/fonts/nanum-myeongjo-700.woff2?v=2) format("woff2");
  font-weight:700;font-style:normal;font-display:swap}

:root{
  --panna:#F7F4ED; --panna-2:#ECE7DC; --carta:#FCFAF5;
  --inchiostro:#16191C; --inchiostro-2:#3B4148;
  --mare:#123F57; --mare-chiaro:#8AAEC2; --sabbia:#C7B9A3; --dermo:#B04A34;

  --bg:var(--panna); --bg-2:var(--panna-2); --card:var(--carta);
  --fg:var(--inchiostro); --fg-2:var(--inchiostro-2);
  --acc:var(--mare); --mark:var(--dermo);
  --rule:rgba(22,25,28,.14); --rule-2:rgba(22,25,28,.3);
  --scuro:#101418; --scuro-fg:#F0ECE3;

  --display:"Didot","Bodoni Moda","Bodoni 72",Georgia,serif;
  --body:"Nanum Myeongjo",Georgia,"Times New Roman",serif;
  --pad:clamp(18px,4.5vw,68px);
  --hdr:clamp(66px,7vw,92px);
  --measure:60ch;
}
:root[data-theme="dark"]{--bg:#0F1418; --bg-2:#151B21; --card:#182026; --fg:#F3EFE7; --fg-2:#CDD4DA;
  --acc:#B3D2E5; --mark:#D9705A; --rule:rgba(239,235,226,.15); --rule-2:rgba(239,235,226,.32);
  --scuro:#080B0E; --scuro-fg:#E4DFD4;
  color-scheme:dark}                 /* controlli nativi scuri: icona del calendario chiara, calendario a comparsa scuro */
:root[data-theme="light"]{--bg:var(--panna); --bg-2:var(--panna-2); --card:var(--carta);
  --fg:var(--inchiostro); --fg-2:var(--inchiostro-2); --acc:var(--mare); --mark:var(--dermo);
  --rule:rgba(22,25,28,.14); --rule-2:rgba(22,25,28,.3); --scuro:#101418; --scuro-fg:#F0ECE3}

*{box-sizing:border-box}
body{margin:0; background:var(--bg); color:var(--fg); font-family:var(--body);
  font-size:clamp(15px,.92rem + .2vw,16.5px); line-height:1.78; -webkit-font-smoothing:auto; text-rendering:optimizeLegibility;
  /* Bodoni Moda ha un asse di dimensione ottica. Lasciato a «auto», il browser sceglie il taglio in base al
     corpo: in un titolo da 57 px prende quello da display, disegnato per la stampa, dove le aste sottili sono
     un capello. Su uno schermo normale quel capello sta sotto il pixel, si sfarina e la parola si legge male.
     Blocchiamo l'asse sul taglio da testo, che ha le sottili piene, e lo ingrandiamo.
     Nanum Myeongjo non ha assi variabili: per il testo corrente la riga non fa nulla.
     Le etichette in corsivo se ne riprendono il controllo più sotto (font-variation-settings:normal). */
  font-variation-settings:"opsz" 11}
canvas,img,svg{display:block; max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--acc); outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important; scroll-behavior:auto!important}}

h1,h2,h3{margin:0; font-family:var(--display); font-weight:400; text-wrap:balance}
h1{font-size:clamp(2.2rem,6.2vw,4.4rem); line-height:1.06}
h2{font-size:clamp(1.7rem,3.6vw,2.8rem); line-height:1.14}
h3{font-size:clamp(1.05rem,1.7vw,1.32rem); line-height:1.3}
p{margin:0; max-width:var(--measure)}
.lead{color:var(--fg-2); font-size:clamp(1rem,1.25vw,1.12rem)}
.lab{font-family:var(--body); font-weight:700; text-transform:uppercase; letter-spacing:.2em;
  font-size:.64rem; color:var(--acc); font-variant-numeric:tabular-nums}
.lab--mut{color:var(--fg-2)}
.lab--inv{background:var(--scuro); color:var(--scuro-fg); padding:6px 12px; display:inline-block; letter-spacing:.22em}

.ico{width:1.15em; height:1.15em; fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round; flex:none}
.ico--fill{fill:currentColor; stroke:none}

/* ============ HEADER ============ */
.hdr{position:fixed; inset:0 0 auto; z-index:60; height:var(--hdr);
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:0 var(--pad); color:#FCFAF5;
  transition:background .45s ease,color .45s ease,box-shadow .45s ease,border-color .45s ease;
  border-bottom:1px solid transparent}
.hdr::before{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(rgba(12,16,20,.5),transparent); transition:opacity .45s}
.hdr.solid{background:color-mix(in srgb,var(--bg) 94%,transparent); backdrop-filter:blur(16px);
  color:var(--fg); border-bottom-color:var(--rule)}
.hdr.solid::before{opacity:0}
.hdr__logo{display:block; height:clamp(34px,4.2vw,50px); width:auto}
.hdr__logo svg{height:100%; width:auto; fill:currentColor}
.hdr nav{display:flex; align-items:center; gap:clamp(16px,1.9vw,30px)}
.hdr nav a{font-weight:700; text-transform:uppercase; letter-spacing:.15em; font-size:.76rem;
  text-decoration:none; position:relative; padding:6px 0; transition:opacity .25s}
.hdr nav a::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .3s}
.hdr nav a:hover::after{transform:scaleX(1)}
.hdr .cta{border:1px solid currentColor; padding:11px 20px; letter-spacing:.14em; font-size:.72rem}
.hdr .cta::after{display:none}
.hdr .cta:hover{background:currentColor}
.hdr.solid .cta:hover{color:var(--bg)}
.hdr:not(.solid) .cta:hover{color:var(--inchiostro)}
.burger{display:none; background:none; border:0; color:inherit; cursor:pointer; padding:8px;
  flex-direction:column; gap:5px; width:42px}
.burger i{display:block; height:1.5px; background:currentColor; transition:transform .3s,opacity .3s}
.burger i:nth-child(1){width:22px} .burger i:nth-child(2){width:16px} .burger i:nth-child(3){width:22px}
@media (max-width:1080px){
  .hdr nav{display:none}
  .burger{display:flex}
}
/* IT / EN accanto a luna e sole: solo quando il menu è chiuso nell'hamburger */
.lingua{display:none; align-items:center; gap:4px; padding:8px 4px; text-decoration:none; color:inherit;
  font-weight:700; letter-spacing:.1em; font-size:.72rem}
.hdr__dx,.hdr__dx > *{flex:none}   /* lo spazio accanto al logo è stretto: senza, la luna si schiacciava a 4 px */
.hdr__logo{min-width:0; flex:0 1 auto}   /* se manca spazio cede il logo, non i pulsanti */
.hdr__logo svg{max-width:100%}
.lingua span{opacity:.5; transition:opacity .2s}
.lingua span.on{opacity:1}
.lingua i{font-style:normal; opacity:.35; font-weight:400}
.lingua:hover span{opacity:1}
@media (max-width:1080px){.lingua{display:inline-flex}}
/* menu a tutto schermo */
.menu{position:fixed; inset:0; z-index:70; background:var(--bg); color:var(--fg);
  display:flex; flex-direction:column; justify-content:center; gap:6px; padding:0 var(--pad);
  opacity:0; visibility:hidden; transition:opacity .35s,visibility .35s}
.menu.open{opacity:1; visibility:visible}
.menu a{font-family:var(--display); font-size:clamp(1.7rem,7vw,2.6rem); text-decoration:none;
  padding:9px 0; border-bottom:1px solid var(--rule); transition:color .25s}
.menu a:hover{color:var(--acc)}
.menu__x{position:absolute; top:22px; right:var(--pad); background:none; border:0; color:inherit;
  font-family:var(--display); font-size:2rem; line-height:1; cursor:pointer; padding:6px}
.menu__foot{display:flex; gap:16px; margin-top:26px; align-items:center}
.menu__foot a{font-family:var(--body); font-size:1rem; border:0; padding:0; display:flex; align-items:center; gap:8px}

/* ============ HERO ============ */
.hero{position:relative; height:clamp(560px,96svh,980px); overflow:hidden; display:grid; place-items:center; text-align:center}
/* a tutto schermo (area riservata → Provino e foto della home → Foto di apertura), come la pagina di manutenzione */
.hero--intero{height:100svh; min-height:560px}
.hero picture{position:absolute; inset:0}
/* torna su, in basso a destra: compare dopo una schermata di scorrimento (sotto header e menu, sopra la pagina) */
.su{position:fixed; z-index:55; right:clamp(14px,2vw,28px); bottom:clamp(14px,2vw,28px); width:48px; height:48px; border-radius:50%;
  display:grid; place-items:center; padding:0; cursor:pointer; color:var(--fg); background:var(--bg); border:1px solid var(--rule-2);
  box-shadow:0 8px 24px -10px rgba(22,25,28,.45); opacity:0; transform:translateY(12px); pointer-events:none;
  transition:opacity .3s, transform .3s cubic-bezier(.16,.84,.24,1), background-color .25s, color .25s}
.su.on{opacity:1; transform:none; pointer-events:auto}
.su:hover,.su:focus-visible{background:var(--fg); color:var(--bg); border-color:var(--fg)}
.su .ico{width:1.2rem; height:1.2rem; transform:rotate(-90deg)}
.hero img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 46%}
@media (max-width:760px){.hero img{object-position:64% 46%}}
/* Due veli sovrapposti. Quello lineare serve al menu in alto e alla riga in basso.
   Quello ellittico sta dietro al marchio: la foto di apertura ha l'abito e i fiori bianchi proprio lì, e il
   lockup e bianco — senza, «FRANCESCO CARRINO» si perde sul bianco, che e anche il punto in cui il velo
   lineare e piu chiaro. L'ellisse scurisce solo il centro e lascia intatti mare, cielo e verde ai bordi. */
.hero::after{content:""; position:absolute; inset:0;
  background:radial-gradient(58% 44% at 50% 47%,rgba(8,11,15,.55) 0%,rgba(8,11,15,.3) 52%,rgba(8,11,15,0) 78%),
    linear-gradient(rgba(10,14,18,.32) 0%,rgba(10,14,18,.08) 44%,rgba(10,14,18,.6) 100%)}
.hero__in{position:relative; z-index:2; color:#FCFAF5; display:flex; flex-direction:column;
  align-items:center; gap:clamp(20px,3.2vw,34px); padding:var(--hdr) var(--pad) 0}
/* Ombra stretta e non solo diffusa: le aste sottili del Didot hanno bisogno di uno stacco
   a ridosso del bordo, una nuvola larga 26 px non le aiuta contro una foto chiara. */
.hero__logo{width:min(78vw,660px);
  filter:drop-shadow(0 1px 2px rgba(6,9,12,.62)) drop-shadow(0 3px 16px rgba(6,9,12,.42))}
.hero__logo svg{width:100%; height:auto; fill:#FCFAF5}
.hero p{color:rgba(252,250,245,.94); max-width:44ch; font-size:clamp(.98rem,1.2vw,1.12rem)}
.hero__meta{position:absolute; left:var(--pad); right:var(--pad); bottom:20px; z-index:2;
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 18px; color:rgba(252,250,245,.82)}

.ph{position:relative; aspect-ratio:2/3; overflow:hidden; background:var(--bg-2)}
.ph picture{display:block; width:100%; height:100%}
.ph img{width:100%; height:100%; object-fit:cover}

.btn{display:inline-flex; align-items:center; gap:10px; font-family:var(--body); font-weight:700;
  text-transform:uppercase; letter-spacing:.16em; font-size:.7rem; text-decoration:none;
  padding:15px 30px; cursor:pointer; transition:.3s; border:1px solid currentColor; background:transparent}
.btn:hover,.btn:focus-visible{background:var(--fg); color:var(--bg); border-color:var(--fg)}
.btn--solid{background:var(--fg); color:var(--bg); border-color:var(--fg)}
.btn--solid:hover{background:transparent; color:var(--fg)}
.btn--light{color:#FCFAF5; border-color:rgba(252,250,245,.75)}
.btn--light:hover{background:#FCFAF5; color:var(--inchiostro)}
.btns{display:flex; flex-wrap:wrap; gap:12px}

.sec{padding:clamp(56px,8.5vw,120px) var(--pad); border-bottom:1px solid var(--rule)}
.head{display:flex; flex-direction:column; gap:14px; margin-bottom:clamp(28px,4.4vw,54px); max-width:820px}

.man-wrap{display:grid; gap:clamp(24px,4vw,64px); grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); align-items:center}
.manifesto{font-family:var(--display); font-size:clamp(1.35rem,2.9vw,2.15rem); line-height:1.42; max-width:24ch}
.manifesto em{font-style:italic; color:var(--acc)}
@media (max-width:860px){.man-wrap{grid-template-columns:1fr}}

/* ---------- provino ---------- */
.provino{background:var(--card); border:1px solid var(--rule); padding:clamp(14px,2.2vw,28px)}
.provino__top{display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px;
  padding-bottom:13px; margin-bottom:16px; border-bottom:1px solid var(--rule)}
.sheet{display:grid; gap:clamp(9px,1.3vw,17px); grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.sheet{grid-template-columns:repeat(3,1fr)}}
@media (max-width:620px){.sheet{grid-template-columns:repeat(2,1fr)}}
.scatto{position:relative; text-decoration:none; display:flex; flex-direction:column; gap:6px}
.scatto .ph{border:1px solid var(--rule)}
.scatto .ora{font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:.1em; font-size:.62rem;
  color:var(--fg-2); display:flex; justify-content:space-between; gap:8px}
.scatto .ora b{color:var(--acc)}
.scatto .lbl{font-size:.88rem; line-height:1.4}

/* ---------- categorie ---------- */
.cats{display:grid; gap:clamp(10px,1.6vw,20px); grid-template-columns:repeat(5,1fr)}
.cat{position:relative; text-decoration:none; display:block; overflow:hidden}
.cat .ph{aspect-ratio:3/5; border:1px solid var(--rule)}
.cat__lbl{position:absolute; inset:auto 0 0 0; padding:15px 13px;
  background:linear-gradient(transparent,rgba(10,14,18,.84)); color:#F7F4ED;
  display:flex; flex-direction:column; gap:2px}
.cat__lbl b{font-family:var(--display); font-weight:400; font-size:1.08rem; letter-spacing:.04em}
.cat__lbl span{font-weight:700; font-size:.58rem; letter-spacing:.16em; text-transform:uppercase;
  opacity:.8; font-variant-numeric:tabular-nums}
@media (max-width:1000px){.cats{grid-template-columns:repeat(3,1fr)}}
@media (max-width:620px){.cats{grid-template-columns:repeat(2,1fr)}}

/* ---------- storie ---------- */
.works{display:grid; gap:clamp(16px,2.4vw,30px); grid-template-columns:repeat(3,1fr)}
.work{text-decoration:none; display:flex; flex-direction:column; gap:11px}
.work .ph{border:1px solid var(--rule)}
.work h3{transition:color .25s} .work:hover h3{color:var(--acc)}
@media (max-width:820px){.works{grid-template-columns:1fr}}

.trio{display:grid; gap:clamp(20px,3.2vw,44px); grid-template-columns:repeat(3,1fr)}
.trio article{display:flex; flex-direction:column; gap:10px; padding-top:16px; border-top:1px solid var(--acc)}
.trio p{color:var(--fg-2); font-size:.93rem}
@media (max-width:820px){.trio{grid-template-columns:1fr}}

/* ============ LUOGHI — la costa: mappa e itinerario ============ */
.costa{display:grid; gap:clamp(26px,3.4vw,64px); grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:start}
@media (max-width:980px){.costa{grid-template-columns:1fr}}

/* ---------- la mappa ---------- */
.costa__mappa{margin:0; position:sticky; top:calc(var(--hdr) + 26px)}
@media (max-width:980px){.costa__mappa{position:static; max-width:560px}}
.costa__terra{fill:var(--bg-2); stroke:none}
.costa__linea{fill:none; stroke:var(--mare-chiaro); stroke-width:1.5; opacity:.85;
  stroke-linejoin:round; stroke-linecap:round}
.costa__mare{fill:var(--fg-2); opacity:.5; font-family:var(--label); font-style:italic; font-size:15px}
.pt{fill:var(--bg); stroke:var(--acc); stroke-width:1.5; cursor:pointer;
  transform-box:fill-box; transform-origin:center; transition:transform .3s,fill .3s,stroke .3s}
.pt.on{fill:var(--acc); stroke:var(--acc); transform:scale(1.55)}
.pn{fill:var(--acc); font-family:var(--label); font-style:italic; font-size:16px;
  opacity:0; transition:opacity .25s; pointer-events:none;
  paint-order:stroke; stroke:var(--bg); stroke-width:4.5px; stroke-linejoin:round}
.pn.on{opacity:1}

/* ---------- l'elenco ---------- */
.costa__elenco{list-style:none; margin:0; padding:0; border-top:1.5px solid var(--fg)}
.costa__invito{margin:0 0 12px; font-family:var(--label); font-style:italic; font-size:.95rem; color:var(--fg-2)}
.tappa{display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; align-items:baseline; gap:0 16px;
  padding:13px 0; border-bottom:1px solid var(--rule); text-decoration:none; transition:padding .3s}
.tappa:hover,.tappa.on{padding-left:10px}
.tappa__n{font-weight:700; font-size:.6rem; letter-spacing:.1em; color:var(--mare-chiaro);
  font-variant-numeric:tabular-nums; transition:color .3s}
.tappa:hover .tappa__n,.tappa.on .tappa__n{color:var(--acc)}
.tappa__t{display:flex; flex-direction:column; gap:1px; min-width:0}
.tappa__t b{font-family:var(--display); font-weight:400; font-size:clamp(1.24rem,2vw,1.55rem);
  line-height:1.15; transition:color .3s}
.tappa:hover .tappa__t b,.tappa.on .tappa__t b{color:var(--acc)}
.tappa__t em{font-style:normal; font-size:.85rem; color:var(--fg-2); line-height:1.5}
.tappa__tratto{text-align:right; opacity:.72; transition:opacity .3s,color .3s}
.tappa:hover .tappa__tratto,.tappa.on .tappa__tratto{opacity:1; color:var(--acc)}
/* freccia sempre visibile: dice che la riga porta alla pagina del paese (anche sul telefono, dove non c'è il passaggio del mouse) */
.tappa__vai{align-self:center; display:grid; place-items:center; color:var(--fg-2); opacity:.55;
  transition:transform .3s cubic-bezier(.16,.84,.24,1), opacity .3s, color .3s}
.tappa__vai .ico{width:1.15rem; height:1.15rem}
.tappa:hover .tappa__vai,.tappa:focus-visible .tappa__vai,.tappa.on .tappa__vai{opacity:1; color:var(--acc); transform:translateX(5px)}
@media (max-width:520px){.tappa{grid-template-columns:auto minmax(0,1fr) auto} .tappa__tratto{display:none}}

/* ---------- recensioni ---------- */
.revs{display:grid; gap:clamp(15px,2.2vw,26px); grid-template-columns:repeat(3,1fr)}
.rev{background:var(--card); border:1px solid var(--rule); padding:clamp(20px,2.5vw,32px);
  display:flex; flex-direction:column; gap:13px}
.rev blockquote{margin:0; font-family:var(--display); font-size:1.06rem; line-height:1.5}
.rev .who{font-weight:700; text-transform:uppercase; letter-spacing:.14em; font-size:.6rem; color:var(--fg-2)}
.stars{color:var(--mark); letter-spacing:.26em; font-size:.78rem}
@media (max-width:820px){.revs{grid-template-columns:1fr}}
.gnote{font-weight:700; font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--mark); border:1px dashed var(--mark); padding:8px 14px; display:inline-block}

/* ---------- prezzi ---------- */
.prezzi{display:grid; gap:clamp(15px,2.2vw,26px); grid-template-columns:repeat(3,1fr); align-items:start}
.pack{border:1px solid var(--rule-2); background:var(--card); display:flex; flex-direction:column}
.pack__hd{background:var(--scuro); color:var(--scuro-fg); padding:12px 20px; font-weight:700;
  text-transform:uppercase; letter-spacing:.18em; font-size:.6rem}
.pack--hi .pack__hd{background:var(--acc); color:#fff}
.pack__bd{padding:clamp(20px,2.5vw,32px); display:flex; flex-direction:column; gap:14px}
.cifra{font-family:var(--display); font-size:2.5rem; line-height:1; font-variant-numeric:tabular-nums}
.pack ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px;
  font-size:.88rem; color:var(--fg-2)}
.pack li{padding-left:17px; position:relative}
.pack li::before{content:"+"; position:absolute; left:0; color:var(--acc); font-weight:700}
@media (max-width:820px){.prezzi{grid-template-columns:1fr}}

/* ---------- blog ---------- */
.posts{display:grid; gap:clamp(18px,2.6vw,34px); grid-template-columns:repeat(3,1fr)}
.post{text-decoration:none; display:flex; flex-direction:column; gap:11px}
.post .ph{aspect-ratio:4/3; border:1px solid var(--rule)}
.post h3{transition:color .25s} .post:hover h3{color:var(--acc)}
.post p{font-size:.88rem; color:var(--fg-2)}
@media (max-width:820px){.posts{grid-template-columns:1fr}}

/* ---------- instagram ---------- */
/* una sola riga: 6 miniature su computer, 3 su tablet, una e mezza su telefono; le altre si raggiungono scorrendo (o con le frecce) */
.ig{--ig-col:6; --ig-gap:clamp(7px,1.1vw,13px); display:grid; gap:var(--ig-gap); grid-auto-flow:column;
  grid-auto-columns:calc((100% - (var(--ig-col) - 1) * var(--ig-gap)) / var(--ig-col));
  overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-x:contain}
.ig::-webkit-scrollbar{display:none}
.ig a{display:block; position:relative; overflow:hidden; scroll-snap-align:start}
.rec__nav.ig__nav{padding:0; margin-top:clamp(14px,1.8vw,20px)}
.ig .ph{aspect-ratio:1; border:1px solid var(--rule)}
/* reel: segno ▶ sulla miniatura, si apre nel lettore a tutto schermo */
.ig__play{position:absolute; top:clamp(5px,.7vw,9px); right:clamp(5px,.7vw,9px); width:clamp(24px,2.4vw,34px); aspect-ratio:1;
  display:grid; place-items:center; border-radius:50%; background:rgba(10,13,16,.55); color:#fff; pointer-events:none;
  transition:transform .3s cubic-bezier(.16,.84,.24,1)}
.ig__play .ico{width:52%; height:52%; margin-left:8%}
.ig a:hover .ig__play,.ig a:focus-visible .ig__play{transform:scale(1.14)}
@media (max-width:820px){.ig{--ig-col:3}}
/* telefono: una foto grande per volta (~70% della larghezza) e la successiva che si intravede, da scorrere col dito */
@media (max-width:620px){.ig{--ig-col:1.4}}
.ig-hd{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-bottom:20px}
.ig-hd .who{display:flex; align-items:center; gap:11px; font-family:var(--display); font-size:1.3rem}
.ig-hd .who .ico{width:1.5rem; height:1.5rem; color:var(--acc)}
.ig-hd .who__ico{display:inline-flex; gap:6px}
.ig-hd > a{display:inline-flex; align-items:center; gap:8px; text-decoration:none; font-weight:700;
  text-transform:uppercase; letter-spacing:.14em; font-size:.64rem; color:var(--acc)}

/* ---------- form ---------- */
.contatto{display:grid; gap:clamp(28px,4.4vw,68px); grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); align-items:start}
form{display:grid; gap:17px; grid-template-columns:1fr 1fr}
.f-full{grid-column:1/-1}
label{display:flex; flex-direction:column; gap:6px; font-weight:700; text-transform:uppercase;
  letter-spacing:.14em; font-size:.6rem; color:var(--fg-2)}
input,select,textarea{font-family:var(--body); font-size:1rem; color:var(--fg); background:var(--card);
  border:1px solid var(--rule-2); padding:12px 13px; transition:.25s}
input[type=date]::-webkit-calendar-picker-indicator{cursor:pointer}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--acc)}
textarea{resize:vertical; min-height:100px}
.consent{flex-direction:row; align-items:flex-start; gap:10px; text-transform:none; letter-spacing:0;
  font-weight:400; font-size:.82rem; line-height:1.55}
.consent input{width:17px; height:17px; margin-top:3px; accent-color:var(--acc)}
@media (max-width:820px){.contatto{grid-template-columns:1fr} form{grid-template-columns:1fr}}

/* ============ FOOTER ============ */
.ft{background:var(--scuro); color:var(--scuro-fg)}
.ft__top{display:grid; gap:clamp(30px,4vw,56px); padding:clamp(46px,6vw,84px) var(--pad) clamp(34px,4vw,52px);
  grid-template-columns:minmax(0,1.25fr) repeat(3,minmax(0,.8fr))}
@media (max-width:940px){.ft__top{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ft__top{grid-template-columns:1fr}}
.ft__brand{display:flex; flex-direction:column; gap:20px}
.ft__logo{width:min(78%,300px)} .ft__logo svg{width:100%; height:auto; fill:currentColor}
.ft__claim{color:rgba(240,236,227,.82); font-size:.92rem; max-width:34ch}
.ft__h{margin:0 0 16px; font-weight:700; text-transform:uppercase; letter-spacing:.18em;
  font-size:.6rem; color:rgba(240,236,227,.5)}
.ft ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px}
.ft a{color:rgba(240,236,227,.86); text-decoration:none; transition:color .25s; font-size:.92rem}
.ft a:hover{color:#fff}
.ft__nap{display:flex; flex-direction:column; gap:12px}
.ft__nap a,.ft__nap span{display:flex; align-items:flex-start; gap:11px; font-size:.92rem;
  color:rgba(240,236,227,.86); text-decoration:none; line-height:1.55}
.ft__nap .ico{margin-top:.28em; color:rgba(240,236,227,.7)}
.ft__soc{display:flex; gap:10px; margin-top:4px}
.ft__soc a{width:44px; height:44px; border:1px solid rgba(240,236,227,.24); display:grid; place-items:center;
  transition:background .28s,border-color .28s,color .28s}
.ft__soc a:hover{background:#FCFAF5; border-color:#FCFAF5; color:var(--scuro)}
.ft__soc .ico{width:19px; height:19px}
.ft__bot{border-top:1px solid rgba(240,236,227,.16); padding:20px var(--pad);
  display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:space-between;
  font-size:.78rem; color:rgba(240,236,227,.72)}
.ft__bot nav{display:flex; flex-wrap:wrap; gap:18px}
.ft__bot a{font-size:.78rem; color:rgba(240,236,227,.82)}

.js .reveal{opacity:0; transform:translateY(20px); transition:opacity .85s ease,transform .85s cubic-bezier(.2,.7,.3,1)}
.js .reveal.in{opacity:1; transform:none}

/* ============================================================
   SITO — componenti oltre la home del mockup
   ============================================================ */
.sprite{position:absolute; width:0; height:0; overflow:hidden}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.skip{position:absolute; left:12px; top:-60px; z-index:100; background:var(--fg); color:var(--bg); padding:10px 16px; text-decoration:none}
.skip:focus{top:12px}
.stack{display:flex; flex-direction:column; gap:18px; align-items:flex-start}
.more{margin-top:clamp(22px,3vw,38px)}
.devnote{font-family:var(--body); font-weight:700; font-size:.66rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--mark); border:1px dashed var(--mark); padding:8px 14px; max-width:none}
.hero__meta .lab{color:inherit; text-decoration:none}
.hero__logo{margin:0; font-size:inherit; line-height:0}
.hdr nav a[aria-current="page"]::after{transform:scaleX(1)}
.menu[hidden]{display:none}
.menu a[aria-current="page"]{color:var(--acc)}
.menu__lang{font-family:var(--body)!important; font-size:.9rem!important}
.ft__cols{display:grid!important; grid-template-columns:1fr 1fr; gap:10px 18px!important}
.ft__orari{color:rgba(240,236,227,.72)!important; font-size:.84rem!important; padding-left:calc(1.15em + 11px)}
.ft__h{margin:0 0 16px; font-family:var(--body); font-weight:700; text-transform:uppercase; letter-spacing:.18em;
  font-size:.6rem; color:rgba(240,236,227,.5)}

/* pagine interne */
.no-hero main{padding-top:var(--hdr)}
.pagina{padding:clamp(22px,3vw,40px) var(--pad) clamp(56px,8vw,110px); display:flex; flex-direction:column; gap:clamp(34px,5vw,64px)}
.pagina--breve{min-height:60vh; justify-content:center}
.head--pagina{margin-bottom:0}
.head--pagina h1{font-size:clamp(2rem,5vw,3.6rem)}
.briciole ol{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px 0;
  font-weight:700; font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-2)}
.briciole li+li::before{content:"/"; margin:0 10px; color:var(--fg-2)}
.briciole a{text-decoration:none} .briciole a:hover{color:var(--acc)}
.blocco{display:flex; flex-direction:column; gap:clamp(18px,2.4vw,28px)}
.blocco__hd{display:flex; flex-direction:column; gap:10px; max-width:820px}
.blocco__hd h2 a{text-decoration:none} .blocco__hd h2 a:hover{color:var(--acc)}
.blocco__hd p{color:var(--fg-2)}
.freccia{display:inline-flex; align-items:center; gap:8px; font-weight:700; text-transform:uppercase; letter-spacing:.14em;
  font-size:.64rem; color:var(--acc); text-decoration:none}
.striscia{display:grid; gap:clamp(9px,1.3vw,17px); grid-template-columns:repeat(4,1fr)}
.striscia a{display:block}
.striscia .ph{border:1px solid var(--rule)}
@media (max-width:620px){.striscia{grid-template-columns:repeat(2,1fr)}}
.cats--big{margin-bottom:clamp(10px,2vw,24px)}

/* provino come lista ordinata */
.sheet{list-style:none; margin:0; padding:0}
.scatto a{display:block; text-decoration:none}

/* galleria */
.galleria{list-style:none; margin:0; padding:0; display:grid; gap:clamp(10px,1.6vw,22px); grid-template-columns:repeat(4,1fr)}
@media (max-width:1000px){.galleria{grid-template-columns:repeat(3,1fr)}}
@media (max-width:620px){.galleria{grid-template-columns:repeat(2,1fr)}}
.galleria figure{margin:0; display:flex; flex-direction:column; gap:7px}
.galleria a{display:block; cursor:zoom-in}
.galleria .ph{border:1px solid var(--rule)}
.galleria figcaption{font-size:.8rem; line-height:1.4; color:var(--fg-2)}

/* lightbox */
.lb{border:0; padding:0; margin:0; width:100vw; height:100dvh; max-width:none; max-height:none;
  background:rgba(10,13,16,.96); color:#F0ECE3}
.lb::backdrop{background:rgba(10,13,16,.9)}
.lb figure{margin:0; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:56px 64px 28px}
.lb picture{display:contents}
.lb img{max-width:100%; max-height:calc(100dvh - 120px); width:auto; height:auto; object-fit:contain}
.lb figcaption{font-size:.85rem; color:rgba(240,236,227,.75); text-align:center}
.lb button{position:absolute; background:none; border:0; color:inherit; cursor:pointer; padding:12px; opacity:.8}
.lb button:hover{opacity:1}
.lb .ico{width:28px; height:28px}
.lb__x{top:10px; right:10px} .lb__p{left:6px; top:50%; transform:translateY(-50%)} .lb__n{right:6px; top:50%; transform:translateY(-50%)}
.lb__c{position:absolute; top:22px; left:22px; color:rgba(240,236,227,.6)}
@media (max-width:620px){.lb figure{padding:56px 8px 20px} .lb__p,.lb__n{top:auto; bottom:8px; transform:none}}

/* località e testi lunghi */
.luogo__top{display:grid; gap:clamp(28px,4vw,64px); grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); align-items:end}
@media (max-width:860px){.luogo__top{grid-template-columns:1fr}}
.luogo__cover{margin:0; display:flex; flex-direction:column; gap:8px; max-width:520px; justify-self:end; width:100%}
.luogo__cover .ph{border:1px solid var(--rule)}
.luogo__cover figcaption,.articolo__cover figcaption{font-size:.8rem; color:var(--fg-2)}
.prosa{display:flex; flex-direction:column; gap:clamp(30px,4vw,48px); max-width:68ch}
.prosa--larga{max-width:none; display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.prosa section{display:flex; flex-direction:column; gap:14px}
.prosa h2{font-size:clamp(1.45rem,2.6vw,2.05rem)}
.prosa h3{margin-top:10px}
.prosa p,.prosa li{max-width:68ch}
.prosa p+p{margin-top:0}
.prosa ul,.prosa ol{margin:0; padding-left:1.2em; display:flex; flex-direction:column; gap:8px}
.prosa a{color:var(--acc); text-underline-offset:3px}
.prosa table{border-collapse:collapse; width:100%; font-size:.9rem; background:var(--card); border:1px solid var(--rule)}
.prosa th,.prosa td{text-align:left; padding:10px 14px; border-bottom:1px solid var(--rule); vertical-align:top}
.prosa th{font-weight:700; text-transform:uppercase; letter-spacing:.12em; font-size:.62rem; color:var(--fg-2); background:var(--bg-2)}
.prosa .tbl{overflow-x:auto}
.articolo .prosa{gap:18px}
.articolo .prosa h2{margin-top:clamp(18px,3vw,34px)}
.articolo__cover{margin:0; max-width:860px; display:flex; flex-direction:column; gap:8px}
.firma{font-size:.85rem; color:var(--fg-2)}
.firma a{color:var(--acc)}

/* faq */
.faq{display:flex; flex-direction:column; max-width:820px}
.faq h2{margin-bottom:16px; font-size:clamp(1.45rem,2.6vw,2.05rem)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer; list-style:none; padding:16px 36px 16px 0; font-family:var(--display); font-size:clamp(1.05rem,1.6vw,1.22rem); position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; position:absolute; right:4px; top:12px; font-size:1.5rem; color:var(--acc); transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 18px; color:var(--fg-2)}

/* altre pagine collegate */
.altre{display:flex; flex-direction:column; gap:12px; border-top:1.5px solid var(--fg); padding-top:16px}
.altre ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px 26px}
.altre a{font-family:var(--display); font-size:1.12rem; text-decoration:none}
.altre a:hover{color:var(--acc)}
.filtri{display:flex; flex-wrap:wrap; gap:10px}
.filtri a{font-weight:700; text-transform:uppercase; letter-spacing:.14em; font-size:.64rem; text-decoration:none;
  border:1px solid var(--rule-2); padding:9px 16px}
.filtri a[aria-current="page"],.filtri a:hover{background:var(--fg); color:var(--bg); border-color:var(--fg)}
.elenco{display:flex; flex-direction:column; gap:10px; font-family:var(--display); font-size:1.3rem}

/* chiusa con invito */
.chiusa{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:22px;
  background:var(--card); border:1px solid var(--rule); padding:clamp(22px,3.4vw,44px)}
.chiusa > div:first-child{display:flex; flex-direction:column; gap:12px; align-items:flex-start}
.chiusa__t{font-family:var(--display); font-size:clamp(1.3rem,2.6vw,2rem); line-height:1.2; max-width:26ch}
.btn .ico{width:1rem; height:1rem}
/* solo icona (Instagram, Facebook): quadrato alto quanto gli altri bottoni */
.btn--ico{padding:15px 16px; justify-content:center}
.btn--ico .ico{width:1.25rem; height:1.25rem}

/* prezzi */
.cifra__da{font-family:var(--body); font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-2); vertical-align:middle}
.pack__hd{margin:0}
.nota{color:var(--fg-2); font-size:.92rem}
.nota a{color:var(--acc)}
.extra{margin:0; display:grid; gap:1px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); background:var(--rule); border:1px solid var(--rule)}
.extra div{background:var(--card); padding:18px 20px; display:flex; flex-direction:column; gap:6px}
.extra dt{font-family:var(--display); font-size:1.1rem}
.extra dd{margin:0; color:var(--fg-2); font-size:.9rem}

/* modulo */
.sec--form{padding-left:0; padding-right:0; border-bottom:0}
.contatto .head{margin:0}
.contatto--pagina h1{font-size:clamp(2rem,4.6vw,3.2rem)}
.modulo{display:grid; gap:17px; grid-template-columns:1fr 1fr}
.modulo [aria-invalid="true"]{border-color:var(--mark); box-shadow:0 0 0 1px var(--mark)}
.modulo__msg{padding:12px 14px; font-size:.9rem}
.modulo__msg--err{border:1px solid var(--mark); color:var(--mark)}
.modulo__alt{font-size:.85rem; color:var(--fg-2)}
.modulo__alt a{color:var(--acc)}
/* data del matrimonio: calendario del sito (site.js) al posto di quello del browser */
/* campi su una riga tutti alti uguali: testo, tendina e data hanno altezze naturali diverse */
.modulo :is(input:not([type=checkbox]):not([type=hidden]), select, .cal__campo){height:48px}
.cal__lab{position:relative}
.cal__campo{display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; text-align:left; cursor:pointer;
  font:400 1rem/1.2 var(--body); font-style:normal; text-transform:none; letter-spacing:0; color:var(--fg); background:var(--card);
  border:1px solid var(--rule-2); padding:12px 13px; transition:.25s}
.cal__campo:hover,.cal__campo[aria-expanded="true"]{border-color:var(--acc)}
.cal__campo:focus-visible{outline:none; border-color:var(--acc)}
.cal__campo--vuoto .cal__val{color:var(--fg-2)}
.cal__val::first-letter{text-transform:uppercase}
.cal__campo .ico{flex:none; width:1.1rem; height:1.1rem; color:var(--fg-2)}
.cal{position:absolute; z-index:30; top:calc(100% + 6px); left:0; width:min(330px, calc(100vw - 32px)); padding:14px 14px 10px;
  background:var(--card); border:1px solid var(--rule-2); box-shadow:0 18px 40px -18px rgba(0,0,0,.45);
  font-family:var(--body); font-style:normal; font-weight:400; text-transform:none; letter-spacing:0; color:var(--fg)}
.cal[hidden]{display:none}
.cal__hd{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px}
.cal__mese{font-family:var(--display); font-size:1.2rem; text-transform:capitalize}
.cal__fr{display:grid; place-items:center; width:34px; height:34px; border:1px solid var(--rule); background:none; color:var(--fg); cursor:pointer; transition:.2s}
.cal__fr:hover:not(:disabled){border-color:var(--acc); color:var(--acc)}
.cal__fr:disabled{opacity:.3; cursor:default}
.cal__sett,.cal__griglia{display:grid; grid-template-columns:repeat(7,1fr); gap:2px}
.cal__sett span{text-align:center; font-family:var(--label); font-style:italic; font-size:.78rem; color:var(--fg-2); padding:4px 0; text-transform:capitalize}
.cal__griglia button{aspect-ratio:1; border:1px solid transparent; background:none; color:var(--fg); font:inherit; font-size:.95rem; cursor:pointer;
  font-variant-numeric:lining-nums tabular-nums; transition:background-color .15s, color .15s}
.cal__griglia button:hover:not(:disabled){background:var(--bg-2)}
.cal__griglia button:focus-visible{outline:none; border-color:var(--acc)}
.cal__griglia .cal__oggi{border-color:var(--rule-2)}
.cal__griglia [aria-pressed="true"]{background:var(--acc) !important; color:var(--bg)}
.cal__griglia button:disabled{opacity:.28; cursor:default}
.cal__pie{display:flex; justify-content:space-between; gap:10px; margin-top:8px; padding-top:8px; border-top:1px solid var(--rule)}
.cal__link{background:none; border:0; padding:4px 0; font-family:var(--label); font-style:italic; font-size:.88rem; color:var(--acc); cursor:pointer}
.cal__link:hover{text-decoration:underline; text-underline-offset:3px}
.consent a{color:var(--acc)}
.hp{position:absolute!important; left:-9999px!important; width:1px; height:1px; overflow:hidden}
@media (max-width:820px){.modulo{grid-template-columns:1fr}}
.nap{font-style:normal; line-height:1.7; color:var(--fg-2)}
.nap strong{color:var(--fg); font-weight:700}
.nap a{color:var(--acc)}

/* ============================================================
   FOTO — hover e pressione prolungata
   Un solo gesto per tutte le foto: l'immagine si avvicina piano dentro
   la cornice, la luce si apre appena, la didascalia prende il colore del mare.
   Solo con mouse vero (hover:hover): sul telefono niente stati appiccicati.
   ============================================================ */
.ph img{transition:transform 1.4s cubic-bezier(.16,.84,.24,1), filter .9s ease;
  -webkit-touch-callout:none; -webkit-user-select:none; user-select:none}
.ph::before{content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  box-shadow:inset 0 0 0 0 rgba(252,250,245,0); transition:box-shadow .7s cubic-bezier(.16,.84,.24,1)}
.scatto .lbl,.galleria figcaption,.cat__lbl b{transition:color .4s ease}
.cat__lbl span{transition:letter-spacing .7s cubic-bezier(.16,.84,.24,1), opacity .5s}
@media (hover:hover) and (pointer:fine){
  a:hover > .ph img, a:focus-visible > .ph img,
  .galleria a:hover .ph img, .striscia a:hover .ph img{transform:scale(1.045); filter:brightness(1.04) saturate(1.04)}
  a:hover > .ph::before, a:focus-visible > .ph::before,
  .galleria a:hover .ph::before{box-shadow:inset 0 0 0 7px rgba(252,250,245,.55)}
  .scatto:hover .lbl, .galleria figure:hover figcaption{color:var(--acc)}
  .cat:hover .cat__lbl span{letter-spacing:.24em; opacity:1}
}
/* pressione prolungata: piccolo cedimento mentre si tiene premuto */
.ph.premuto img{transform:scale(.975); transition:transform .45s cubic-bezier(.16,.84,.24,1)}
@media (prefers-reduced-motion:reduce){.ph img,.ph::before{transition:none}}
.lb--uno .lb__p,.lb--uno .lb__n{display:none}
.lb[open]{animation:lb-in .38s cubic-bezier(.16,.84,.24,1)}
.lb[open] img{animation:lb-img .55s cubic-bezier(.16,.84,.24,1)}
@keyframes lb-in{from{opacity:0}}
@keyframes lb-img{from{opacity:0; transform:scale(.96)}}
.lb img{-webkit-touch-callout:default}
.lb:focus{outline:none}
.lb--video video{max-width:100%; max-height:calc(100dvh - 120px); width:auto; height:auto; background:#000}
.lb--video figcaption a{color:inherit; text-underline-offset:3px}
/* post del feed social nel visore: testo del post (al massimo tre righe) e link al post originale */
.lb figcaption:empty{display:none}
.lb:has(.lb__orig:not([hidden])) figcaption{max-width:60ch; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.lb__orig{font-size:.85rem; color:rgba(240,236,227,.92); text-underline-offset:3px}
.lb__orig:hover{color:#fff}
.lb:has(.lb__orig:not([hidden])) img{max-height:calc(100dvh - 220px)}

/* ============================================================
   ETICHETTE — Bodoni Moda corsivo, minuscolo, più grande: fine ma leggibile.
   Sostituisce il maiuscoletto grassetto del mockup.
   ============================================================ */
@font-face{font-family:"Bodoni Moda";src:url(/assets/fonts/bodoni-moda-italic.woff2) format("woff2");
  font-weight:400 900;font-style:italic;font-display:swap}
:root{--label:"Bodoni Moda","Bodoni 72",Georgia,serif}
.lab,.scatto .ora,.cat__lbl span,.costa__mare,.tappa__n,.pack__hd,.briciole ol,.ft__h,
label,.freccia,.gnote{
  font-family:var(--label); font-style:italic; font-weight:400; text-transform:none;
  letter-spacing:.01em; font-optical-sizing:auto; font-variation-settings:normal}
.lab{font-size:clamp(1rem,.94rem + .25vw,1.14rem); line-height:1.35}
.lab--inv{font-size:1rem; padding:6px 14px 7px}
.hero__meta .lab{font-size:.98rem}
.scatto .ora{font-size:.95rem; letter-spacing:0}
.scatto .ora b{font-weight:500}
.cat__lbl span{font-size:.9rem; opacity:.92}
.tappa__tratto{font-size:.88rem}
.tappa__n{font-size:1rem}
.pack__hd{font-size:1.02rem; letter-spacing:.01em}
.briciole ol{font-size:.95rem}
.ft__h{font-size:1rem; color:rgba(240,236,227,.8)}
label{font-size:.98rem; letter-spacing:0; color:var(--fg-2)}
.consent{font-family:var(--body); font-style:normal; font-size:.82rem}
.freccia{font-size:1.02rem}
@media (hover:hover) and (pointer:fine){ .cat:hover .cat__lbl span{letter-spacing:.06em} }

/* ============================================================
   PROVINO — nessun contenitore: le foto stanno sulla pagina, sollevate
   dall'ombra, con una sola linea sottile per i dati dei fotogrammi.
   ============================================================ */
.provino{background:none; border:0; padding:0; box-shadow:none}
.provino__top{border-bottom:1px solid var(--rule-2); padding-bottom:12px; margin-bottom:clamp(18px,2.4vw,28px)}
.provino .sheet{gap:clamp(18px,2.2vw,34px) clamp(12px,1.8vw,26px)}
.provino .scatto .ph{border:0; box-shadow:0 1px 2px rgba(22,25,28,.10), 0 14px 32px -14px rgba(22,25,28,.42)}
:root[data-theme="dark"] .provino .scatto .ph{box-shadow:0 0 0 1px rgba(239,235,226,.08), 0 14px 32px -14px rgba(0,0,0,.7)}
.provino .scatto .ora{margin-top:6px}

/* Foto nelle griglie: un filo d'ombra al posto del bordo, per staccarle dalla carta */
.cats .ph,.galleria .ph,.striscia .ph,.posts .ph,.ig .ph,.luogo__cover .ph,.articolo__cover .ph,.works .ph{
  border:0; box-shadow:0 1px 2px rgba(22,25,28,.10), 0 12px 30px -14px rgba(22,25,28,.38)}
:root[data-theme="dark"] .cats .ph,:root[data-theme="dark"] .galleria .ph,:root[data-theme="dark"] .striscia .ph,
:root[data-theme="dark"] .posts .ph,:root[data-theme="dark"] .ig .ph,:root[data-theme="dark"] .luogo__cover .ph{
  box-shadow:0 0 0 1px rgba(239,235,226,.08), 0 14px 32px -14px rgba(0,0,0,.7)}

/* interruttore del tema */
.tema{background:none; border:0; color:inherit; cursor:pointer; padding:8px; display:inline-grid; place-items:center; opacity:.85}
.tema:hover{opacity:1}
.tema .ico{width:18px; height:18px}
.tema .i-sole{display:none}
:root[data-theme="dark"] .tema .i-luna{display:none}
:root[data-theme="dark"] .tema .i-sole{display:block}
.hdr__dx{display:flex; align-items:center; gap:4px}
.hdr nav{margin-left:auto}

/* Contrasto: testi secondari e dati dei fotogrammi più decisi */
.lead{color:var(--fg-2)}
.tappa__n{color:var(--acc); opacity:.75}
.tappa:hover .tappa__n{opacity:1}
.provino__top .lab--mut,.scatto .ora{color:var(--fg-2)}
.scatto .lbl{color:var(--fg)}
.tappa__t em,.galleria figcaption,.post p,.trio p,.nota,.firma{color:var(--fg-2)}
.lead{font-size:clamp(1.02rem,.96rem + .3vw,1.16rem)}
/* sulle foto e sui fondi scuri l'antialiasing resta: il testo chiaro su scuro altrimenti ingrassa */
.hero,.ft,.lb,.cat__lbl,.btn--solid,.lab--inv,.pack__hd{-webkit-font-smoothing:antialiased}

/* Pulsante «Verifica la tua data» nell'header: al passaggio si riempie, testo sempre leggibile.
   (Prima sfondo e testo prendevano lo stesso colore e la scritta spariva.) */
.hdr .cta{transition:background-color .3s ease,color .3s ease,border-color .3s ease}
.hdr .cta:hover,.hdr .cta:focus-visible{background:#FCFAF5; border-color:#FCFAF5; color:var(--inchiostro)}
.hdr.solid .cta:hover,.hdr.solid .cta:focus-visible{background:var(--fg); border-color:var(--fg); color:var(--bg)}

/* Apertura con testo + foto (chi sono, località, Amalfi Coast):
   testo allineato in alto con la foto, colonne vicine, foto mai più alta dello schermo. */
.luogo__top{align-items:start; grid-template-columns:minmax(0,1fr) minmax(0,auto); gap:clamp(28px,5vw,80px)}
.luogo__top .head--pagina{padding-top:clamp(0px,1.5vw,18px); max-width:640px}
.luogo__cover{justify-self:end; width:min(100%, calc((100svh - var(--hdr) - 90px) * 2 / 3), 460px)}
@media (max-width:860px){
  .luogo__top{grid-template-columns:1fr}
  .luogo__cover{justify-self:stretch; width:100%; max-width:none}
}

/* ============================================================
   APERTURA A DITTICO (località, chi sono, about, Amalfi Coast)
   Testo e foto dividono lo spazio a metà: niente vuoto in mezzo.
   Due verticali affiancate, la seconda sfalsata in basso come una stampa appoggiata.
   ============================================================ */
.luogo__top{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); align-items:center; gap:clamp(28px,5vw,88px)}
.luogo__top .head--pagina{padding-top:0; max-width:620px}
.dittico{display:grid; grid-template-columns:1fr 1fr; gap:clamp(12px,1.6vw,24px); align-items:start;
  width:100%; max-width:calc((100svh - var(--hdr) - 140px) * 1.25); justify-self:end}
.dittico figure{margin:0; display:flex; flex-direction:column; gap:8px}
.dittico figure:nth-child(2){margin-top:clamp(40px,7vw,110px)}
.dittico figcaption{font-size:.8rem; color:var(--fg-2)}
.dittico .ph{box-shadow:0 1px 2px rgba(22,25,28,.10), 0 16px 36px -16px rgba(22,25,28,.42)}
:root[data-theme="dark"] .dittico .ph{box-shadow:0 0 0 1px rgba(239,235,226,.08), 0 16px 36px -16px rgba(0,0,0,.7)}
.dittico--uno{grid-template-columns:1fr; max-width:calc((100svh - var(--hdr) - 140px) * .67)}
.dittico--uno figure{margin-top:0!important}
@media (max-width:860px){
  .luogo__top{grid-template-columns:1fr}
  .dittico{max-width:none; justify-self:stretch}
  .dittico figure:nth-child(2){margin-top:44px}
}
/* dittico: sta tutto nello schermo anche su monitor larghi e bassi */
.dittico{max-width:calc((100svh - var(--hdr) - 170px) * 1.02); justify-self:center}
.dittico figure:nth-child(2){margin-top:clamp(36px,5vw,72px)}
@media (max-width:860px){.dittico{max-width:none}}
/* intestazione del feed: link a Instagram e a Facebook */
.ig-hd__link{display:flex; flex-wrap:wrap; gap:10px 22px}
.ig-hd__link a{display:inline-flex; align-items:center; gap:7px; text-decoration:none; font-family:var(--label); font-style:italic;
  font-size:1rem; color:var(--acc)}
.ig-hd__link a:hover{text-decoration:underline; text-underline-offset:4px}
.ig-hd__link .ico{width:1.05rem; height:1.05rem}

/* ============================================================
   TESTI LUNGHI SU TUTTA LA LARGHEZZA
   Località, «Dove fotografo» e chi sono: i paragrafi si dispongono su due colonne affiancate.
   Articoli: testo a sinistra, indice fisso a destra.
   ============================================================ */
:is(.luogo,.chi,.luoghi-indice) .prosa{display:block; max-width:none; columns:2; column-gap:clamp(40px,5vw,88px)}
:is(.luogo,.chi,.luoghi-indice) .prosa section{break-inside:avoid; margin-bottom:clamp(30px,4vw,48px)}
:is(.luogo,.chi,.luoghi-indice) .prosa p{max-width:none}
@media (max-width:900px){:is(.luogo,.chi,.luoghi-indice) .prosa{columns:1}}

/* il testo prende tutto lo spazio fino all'indice: prima si fermava a 880px e lasciava un vuoto largo prima dell'indice */
.articolo__corpo{display:grid; grid-template-columns:minmax(0,1fr) clamp(240px,22vw,300px); gap:clamp(32px,3.5vw,56px); align-items:start}
.articolo__testo{display:flex; flex-direction:column; gap:clamp(34px,5vw,64px); min-width:0}
.articolo .prosa{max-width:none}
.articolo .prosa p,.articolo .prosa li{max-width:none}
.articolo .prosa :is(h2,h3){scroll-margin-top:calc(var(--hdr) + 24px)}
/* privacy e cookie: impaginate come gli articoli */
.legale .prosa h3{margin-top:6px}
.indice{position:sticky; top:calc(var(--hdr) + 32px); display:flex; flex-direction:column; gap:26px;
  padding-left:clamp(20px,2vw,32px); border-left:1px solid var(--rule); width:100%;
  max-height:calc(100svh - var(--hdr) - 64px); overflow-y:auto}
.indice nav{display:flex; flex-direction:column; gap:14px}
.indice ol{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:9px}
.indice li{font-size:.9rem; line-height:1.4}
.indice .indice__h2{font-family:var(--display); font-size:1.02rem; margin-top:8px}
.indice .indice__h2:first-child{margin-top:0}
.indice .indice__h3{padding-left:14px; color:var(--fg-2)}
.indice nav a{color:inherit; text-decoration:none}
.indice nav a:hover{color:var(--acc); text-decoration:underline; text-underline-offset:3px}
.indice .btn{align-self:flex-start}
@media (max-width:1080px){
  .articolo__corpo{grid-template-columns:minmax(0,1fr)}
  .indice{display:none}
  .articolo .prosa p,.articolo .prosa li{max-width:72ch}
}

/* intestazione dell'articolo sulla stessa griglia del corpo: il titolo prende tutta la riga */
.articolo > .head--pagina{max-width:none; display:grid; grid-template-columns:minmax(0,1fr) clamp(240px,22vw,300px);
  column-gap:clamp(32px,3.5vw,56px); row-gap:14px; align-items:end}
.articolo > .head--pagina > .lab{grid-column:1/-1; justify-self:start}
.articolo > .head--pagina h1{grid-column:1/-1; font-size:clamp(2.2rem,4.8vw,5rem); max-width:none; margin-bottom:8px}
.articolo > .head--pagina .lead{grid-column:1; max-width:62ch}
.articolo > .head--pagina .firma{grid-column:2; width:100%;
  padding-left:clamp(20px,2vw,32px); border-left:1px solid var(--rule)}
@media (max-width:1080px){
  .articolo > .head--pagina{grid-template-columns:minmax(0,1fr)}
  .articolo > .head--pagina .firma{grid-column:1; justify-self:start; padding-left:0; border-left:0; max-width:none}
}

/* ============================================================
   OBIETTIVO (home): scorrendo si apre il diaframma, poi la foto si allarga in un trittico.
   Stato di base = trittico fermo; .anima (aggiunta dal JS) attiva lo scorrimento.
   ============================================================ */
.obiettivo{position:relative; background:#050607; color:#F3EFE7; border-bottom:1px solid var(--rule)}
.obiettivo__stage{position:relative; height:100svh; min-height:520px; overflow:hidden}
.obiettivo__foto{position:absolute; inset:0; display:grid; grid-template-columns:1fr 1fr 1fr}
.obiettivo__f{position:relative; overflow:hidden}
.obiettivo__f picture,.obiettivo__f img{display:block; width:100%; height:100%; object-fit:cover}
.obiettivo__f--1{z-index:1}
.obiettivo__lente{position:absolute; inset:0; width:100%; height:100%; display:none; z-index:2}
.obiettivo__intro{position:absolute; z-index:3; left:0; right:0; bottom:clamp(14px,3.2vh,34px);
  display:none; justify-content:center; align-items:baseline; gap:16px; pointer-events:none}
.obiettivo__intro .lab{color:rgba(243,239,231,.72)}
.obiettivo__f-stop{font-family:var(--display); font-size:clamp(1.1rem,1.8vw,1.5rem); letter-spacing:.08em;
  color:#F3EFE7; font-variant-numeric:tabular-nums}
.obiettivo__testo{position:absolute; z-index:3; left:0; right:0; bottom:0; padding:clamp(60px,12vh,140px) var(--pad) clamp(36px,8vh,90px);
  text-align:center; background:linear-gradient(to top,#050607 0%,rgba(5,6,7,.82) 16%,rgba(5,6,7,.4) 58%,transparent)}
.obiettivo__testo h2{font-size:clamp(1.9rem,4.4vw,4rem); line-height:1.08; max-width:20ch; margin:0 auto; color:#F7F3EA;
  text-shadow:0 2px 24px rgba(0,0,0,.35)}
@media (max-width:760px){
  .obiettivo__foto{grid-template-columns:1fr}
  .obiettivo__f--0,.obiettivo__f--2{display:none}
}

.obiettivo.anima{height:400svh; border-bottom:0}
.obiettivo.anima .obiettivo__stage{position:sticky; top:0}
.obiettivo.anima .obiettivo__lente{display:block}
.obiettivo.anima .obiettivo__intro{display:flex}
.obiettivo__intro .lab{margin:0}
.obiettivo.anima .obiettivo__f{will-change:transform}
.obiettivo.anima .obiettivo__testo{opacity:0; will-change:opacity,transform}
/* passaggio morbido tra il colore della pagina e il nero dell'obiettivo, sopra e sotto */
.sec:has(+ .obiettivo-sfuma){border-bottom:0}
.obiettivo{border-bottom:0}
/* la sfumatura si sovrappone all'inizio e alla fine dell'obiettivo: niente vuoto in più tra i testi */
.obiettivo-sfuma{--sf:clamp(120px,22vh,240px); position:relative; z-index:4; height:var(--sf); margin:-1px 0 calc(var(--sf) * -1);
  pointer-events:none; background:linear-gradient(to bottom,color-mix(in oklab,var(--bg) 100%,#050607) 0%,color-mix(in oklab,var(--bg) 93%,#050607) 12%,color-mix(in oklab,var(--bg) 80%,#050607) 25%,color-mix(in oklab,var(--bg) 60%,#050607) 40%,color-mix(in oklab,var(--bg) 40%,#050607) 55%,color-mix(in oklab,var(--bg) 21%,#050607) 70%,color-mix(in oklab,var(--bg) 7%,#050607) 85%,color-mix(in oklab,var(--bg) 0%,#050607) 100%)}
.obiettivo-sfuma--giu{--sf:clamp(90px,15vh,170px); margin:-1px 0; transform:scaleY(-1)}
.sec:has(+ .obiettivo-sfuma){padding-bottom:clamp(28px,4vw,56px)}
.obiettivo-sfuma--giu + .sec{padding-top:clamp(28px,4vw,56px)}

/* la sfumatura superiore finisce trasparente: il bordo dell'obiettivo emerge dal buio invece di essere tagliato */
.obiettivo-sfuma:not(.obiettivo-sfuma--giu){background:linear-gradient(to bottom,color-mix(in oklab,var(--bg) 100%,#050607) 0%,color-mix(in oklab,var(--bg) 93%,#050607) 8%,color-mix(in oklab,var(--bg) 80%,#050607) 16%,color-mix(in oklab,var(--bg) 60%,#050607) 26%,color-mix(in oklab,var(--bg) 40%,#050607) 36%,color-mix(in oklab,var(--bg) 21%,#050607) 46%,color-mix(in oklab,var(--bg) 7%,#050607) 55%,color-mix(in oklab,var(--bg) 0%,#050607) 65%,rgba(5,6,7,0) 100%)}

/* ============================================================
   GIORNATA (home): scorrendo, la striscia dei fotogrammi passa in orizzontale, l'orologio avanza
   e il fondo segue la luce dalle 7 del mattino a notte. Senza .anima resta la griglia del provino.
   ============================================================ */
.giornata__ora,.giornata-sfuma{display:none}
.giornata.anima{padding:0; border-bottom:0; background:var(--g-bg,var(--bg)); color:var(--fg)}
.giornata.anima .giornata__stage{position:sticky; top:0; height:100svh; overflow:hidden; display:flex; flex-direction:column;
  justify-content:safe center; gap:clamp(10px,2vh,28px); padding:calc(var(--hdr) + clamp(8px,1.6vh,22px)) var(--pad) clamp(12px,2.2vh,30px)}
.giornata.anima .head{margin:0; gap:8px}
.giornata.anima .head h2,.giornata.anima .scatto .lbl{color:var(--fg)}
.giornata.anima .provino__top{margin-bottom:clamp(12px,2vh,22px)}
.giornata.anima .sheet{display:flex; flex-wrap:nowrap; gap:clamp(16px,2vw,32px); will-change:transform}
.giornata.anima .scatto{flex:0 0 auto; width:var(--g-w, min(30vw, calc((100svh - var(--hdr) - 260px) / 1.5))); min-width:120px;
  transition:opacity .35s ease, transform .35s ease}
.giornata.anima .scatto:not(.on){opacity:.42; transform:scale(.94)}
.giornata__ora{position:absolute; right:var(--pad); top:calc(var(--hdr) + clamp(8px,1.6vh,22px)); margin:0;
  font-family:var(--display); font-size:var(--g-ora); line-height:1; letter-spacing:.02em;
  font-variant-numeric:tabular-nums; color:var(--fg); opacity:.9; pointer-events:none}
.giornata.anima .giornata__ora{display:block}
.giornata{--g-ora:clamp(3rem,min(9vw,14vh),8rem)}
.giornata.anima .head{max-width:min(820px, 100% - 30vw); min-height:calc(var(--g-ora) + 10px); justify-content:flex-end}
.giornata-sfuma.on{display:block; height:clamp(90px,15vh,170px); margin:-1px 0;
  background:linear-gradient(to bottom,var(--g-fine),color-mix(in oklab,var(--g-fine) 40%,var(--bg)) 55%,var(--bg))}
.giornata-sfuma:not(.giornata-sfuma--su).on + .sec{padding-top:clamp(28px,4vw,56px)}
/* sopra la giornata: dal colore del blocco che precede (--g-da, dal JS) alla luce dell'alba del primo fotogramma */
.giornata-sfuma--su.on{background:linear-gradient(to bottom,var(--g-da),color-mix(in oklab,var(--g-da) 45%,var(--g-inizio)) 50%,var(--g-inizio))}
.sec:has(+ .giornata-sfuma--su.on){border-bottom:0; padding-bottom:clamp(28px,4vw,56px)}
@media (max-height:1000px){.giornata.anima .head .lead{display:none}}
/* schermi bassi (portatili, monitor 1080p col browser): via la riga dei fotogrammi, l'orologio dice già l'ora */
@media (max-height:900px) and (min-width:761px){
  .giornata{--g-ora:clamp(3rem,11vh,6rem)}
  .giornata.anima .provino__top{display:none}
  .giornata.anima .head h2{font-size:clamp(1.7rem,5.2vh,2.6rem)}
}
@media (max-width:760px){
  .giornata.anima .head :is(.lead,.lab),.giornata.anima .provino__top{display:none}   /* più altezza alle foto: titolo e orologio bastano */
  /* l'orologio sta a destra del titolo, come sul computer, invece che sopra: ~70 px in più alle foto */
  .giornata{--g-ora:clamp(2.2rem,11vw,3.2rem)}
  .giornata.anima .head{max-width:none; min-height:0; padding-right:calc(var(--g-ora) * 2.7)}
  .giornata.anima .giornata__stage{justify-content:flex-start}   /* in alto: titolo e orologio partono dalla stessa riga */
}
/* sopra la giornata animata la sfumatura scende nello spazio riservato all'header, senza toccare i testi */
.obiettivo-sfuma--giu:has(+ .giornata.anima),.obiettivo-sfuma--giu:has(+ .giornata-sfuma--su + .giornata.anima){margin-bottom:calc(var(--hdr) * -1)}
.giornata.anima .giornata__stage > *{flex-shrink:0}
/* tema scuro: le foto non attive restano leggibili sul fondo notturno */
:root[data-theme="dark"] .giornata.anima .scatto:not(.on){opacity:.6; filter:saturate(.8)}
:root[data-theme="dark"] .giornata.anima .scatto.on .ph{box-shadow:0 0 0 1px rgba(239,235,226,.14), 0 18px 40px -16px rgba(0,0,0,.8)}

/* ============================================================
   COME LAVORO (home): tre foto affiancate a tutta larghezza, una per regola. Scorrendo, ogni foto
   si muove dentro la sua cornice più lenta della pagina (parallasse); la regola è scritta sopra.
   Senza JS o con movimento ridotto le foto restano ferme, centrate.
   ============================================================ */
.regole{padding-bottom:0; border-bottom:0}
.regole__banda{display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:1fr auto auto auto;
  height:clamp(440px,82svh,880px); margin-inline:calc(var(--pad) * -1)}
/* subgrid: numero, titolo e testo delle tre regole partono alla stessa altezza anche se i testi sono lunghi diversi */
.regole__r{position:relative; display:grid; grid-row:span 4; grid-template-rows:subgrid; overflow:hidden; isolation:isolate; background:#16191C}
.regole__ph,.regole__ph picture{position:absolute; inset:0}
.regole__ph img{position:absolute; left:0; top:-15%; width:100%; height:130%; object-fit:cover; will-change:transform}
.regole__r::after{content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to top,rgba(12,13,15,.86) 0%,rgba(12,13,15,.62) 26%,rgba(12,13,15,.18) 52%,rgba(12,13,15,0) 70%)}
.regole__t{position:relative; z-index:2; grid-row:2 / span 3; display:grid; grid-template-rows:subgrid;
  padding:0 clamp(22px,3vw,48px) clamp(22px,3vw,48px); color:#F3EFE7}
.regole__t h3{margin-top:14px}
.regole__t p{margin:12px 0 0}
.regole__n{font-family:var(--display); font-size:clamp(1rem,1.3vw,1.2rem); letter-spacing:.14em; opacity:.8;
  padding-bottom:12px; border-bottom:1px solid rgba(243,239,231,.4); max-width:3.2em}
.regole__t h3{font-size:clamp(1.45rem,2.3vw,2.15rem); line-height:1.15; color:#FCFAF5}
.regole__t p{font-size:.98rem; line-height:1.6; max-width:36ch; color:rgba(243,239,231,.86)}
.regole__r + .regole__r{border-left:1px solid rgba(252,250,245,.14)}
/* finestra: con JS le foto restano ferme rispetto allo schermo e la banda scorre sopra di loro come una finestra,
   così la sezione prima e quella dopo, passando, le coprono. clip-path ritaglia le foto fisse dentro la propria colonna. */
.regole__banda.fisso .regole__r{clip-path:inset(0)}
.regole__banda.fisso .regole__ph{position:fixed; inset:auto; top:0; left:var(--rx,0); width:var(--rw,33.34vw); height:100vh}
.regole__banda.fisso .regole__ph img{top:-8%; height:116%}
.regole__banda.fisso:not(.vivo) .regole__ph{display:none}
.js .regole__r:nth-child(2) .regole__t.reveal{transition-delay:.12s}
.js .regole__r:nth-child(3) .regole__t.reveal{transition-delay:.24s}
@media (max-width:820px){
  .regole__banda{grid-template-columns:1fr; grid-template-rows:none; height:auto}
  .regole__r{grid-row:auto; grid-template-rows:1fr auto auto auto; height:clamp(420px,76svh,720px)}
  .regole__r + .regole__r{border-left:0; border-top:1px solid rgba(252,250,245,.14)}
  .js .regole__r .regole__t.reveal{transition-delay:0s}
}

/* ============================================================
   LA COSTA che si percorre: passando su un paese, la riva si ripassa da Sorrento fino a lì.
   Senza mouse la linea resta vuota e la mappa è quella di sempre.
   ============================================================ */
.costa__traccia,.costa__nave{display:none}
.costa.viaggio .costa__traccia{display:block; fill:none; stroke:var(--acc); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round}
.costa.viaggio .costa__nave{display:block; fill:var(--acc); stroke:var(--bg); stroke-width:2.5}
.costa.viaggio .costa__linea{opacity:.45}
.costa.viaggio .pt{transition:transform .3s,fill .4s,stroke .4s}
.costa.viaggio .pt.visto{fill:var(--acc)}

/* ============================================================
   MANUTENZIONE — una pagina sola sopra la foto di apertura (accesa dall'area riservata)
   ============================================================ */
.mn{background:var(--scuro); color:#FCFAF5; -webkit-font-smoothing:antialiased}
.mn__scena{position:relative; min-height:100svh; overflow:hidden; display:grid;
  grid-template-rows:auto 1fr auto; grid-template-columns:minmax(0,1fr); isolation:isolate}
.mn__scena picture{position:absolute; inset:0; z-index:-2}
.mn__scena img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 46%;
  animation:mn-respiro 28s ease-in-out infinite alternate; transform-origin:50% 46%}
@media (max-width:760px){.mn__scena img{object-position:64% 46%}}
/* velo più pieno della home: qui il testo è lungo e deve leggersi sopra qualunque punto della foto */
.mn__scena::after{content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(70% 58% at 50% 50%,rgba(8,11,15,.66) 0%,rgba(8,11,15,.42) 55%,rgba(8,11,15,.2) 100%),
    linear-gradient(rgba(10,14,18,.45) 0%,rgba(10,14,18,.12) 38%,rgba(10,14,18,.72) 100%)}
.mn .lab{color:rgba(252,250,245,.86)}
.mn a{text-decoration:none}
.mn__top,.mn__bot{display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 18px;
  padding:clamp(18px,2.6vw,30px) var(--pad)}
.mn__top a,.mn__bot a{transition:color .25s}
.mn__top a:hover,.mn__bot a:hover{color:#FCFAF5}
.mn__top a{border-bottom:1px solid rgba(252,250,245,.4)}
.mn__in{align-self:center; justify-self:center; width:min(100%,760px); padding:clamp(28px,5vw,56px) var(--pad);
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:clamp(16px,2.4vw,24px)}
.mn__in>*{animation:mn-sale 1.1s cubic-bezier(.2,.7,.2,1) both}
.mn__in>:nth-child(2){animation-delay:.15s} .mn__in>:nth-child(3){animation-delay:.25s}
.mn__in>:nth-child(4){animation-delay:.35s} .mn__in>:nth-child(5){animation-delay:.45s}
.mn__in>:nth-child(6){animation-delay:.55s} .mn__in>:nth-child(7){animation-delay:.65s}
.mn__logo{width:min(82vw,560px); line-height:0; filter:drop-shadow(0 1px 1px rgba(0,0,0,.35)) drop-shadow(0 4px 24px rgba(0,0,0,.25))}
.mn__logo svg{width:100%; height:auto; fill:#FCFAF5}
.mn__filo{display:block; width:1px; height:clamp(28px,4.5vw,48px); background:linear-gradient(rgba(252,250,245,0),rgba(252,250,245,.8))}
.mn__quando{border:1px solid rgba(252,250,245,.4); padding:5px 16px 6px; color:#FCFAF5}
.mn__h{font-size:clamp(1.9rem,4.6vw,3.3rem); line-height:1.1; text-shadow:0 1px 2px rgba(0,0,0,.35)}
.mn__p{color:rgba(252,250,245,.92); max-width:48ch; font-size:clamp(1rem,1.2vw,1.12rem)}
.mn__btns{justify-content:center; margin-top:4px}
.mn__soc{display:flex; flex-direction:column; align-items:center; gap:12px; margin-top:clamp(8px,2vw,18px)}
.mn__soc div{display:flex; gap:14px}
.mn__soc a{width:62px; height:62px; display:grid; place-items:center; color:#FCFAF5;
  border:1px solid rgba(252,250,245,.32); background:rgba(8,11,15,.18); backdrop-filter:blur(6px);
  transition:background .3s,color .3s,border-color .3s}
.mn__soc a:hover,.mn__soc a:focus-visible{background:#FCFAF5; border-color:#FCFAF5; color:var(--inchiostro)}
.mn__soc .ico{width:27px; height:27px; stroke-width:1.4}
.mn__bot .lab{font-size:.95rem}
.mn :focus-visible{outline-color:#FCFAF5}
@keyframes mn-respiro{from{transform:scale(1)} to{transform:scale(1.08)}}
@keyframes mn-sale{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
@media (max-width:560px){
  .mn__btns{flex-direction:column; align-items:stretch; width:100%}
  .mn__btns .btn{justify-content:center}
  .mn__bot{justify-content:center; text-align:center}
}

/* Recensioni Google in home. Le stelle piene sono una seconda fila sopra quelle vuote, tagliata a --v (0–1):
   entrano da sinistra quando la sezione si vede. Le schede scorrono in orizzontale con lo scroll-snap,
   le frecce compaiono solo se non stanno tutte in riga. */
.stelle{position:relative; display:inline-flex; width:max-content; line-height:0; color:var(--mark)}
.stelle__vuote,.stelle__piene{display:flex; gap:3px}
.stelle__vuote{color:var(--rule-2)}
.stelle__piene{position:absolute; inset:0; clip-path:inset(0 calc((1 - var(--v)) * 100%) 0 0)}
.stella{width:15px; height:15px; fill:currentColor; flex:none}
.stelle--grandi .stella{width:22px; height:22px}
.js .stelle--grandi.reveal{opacity:1; transform:none}
.js .stelle--grandi.reveal .stelle__piene{clip-path:inset(0 100% 0 0); transition:clip-path 1.6s cubic-bezier(.3,.7,.2,1) .25s}
.js .stelle--grandi.reveal.in .stelle__piene{clip-path:inset(0 calc((1 - var(--v)) * 100%) 0 0)}
.rec h2 [data-conta]{font-variant-numeric:tabular-nums}

.rec__giro{position:relative; margin:0 calc(var(--pad) * -1)}
.rec__lista{list-style:none; margin:0; padding:6px var(--pad) 26px; display:flex; gap:clamp(16px,2.2vw,28px);
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding:0 var(--pad); scrollbar-width:none; outline:0}
.rec__lista::-webkit-scrollbar{display:none}
.rec__card{flex:1 0 min(78vw,380px); max-width:480px; scroll-snap-align:start; display:flex}
.rec__card figure{position:relative; margin:0; flex:1; display:flex; flex-direction:column; gap:18px;
  padding:clamp(26px,3vw,36px) clamp(22px,2.6vw,32px) clamp(22px,2.4vw,28px); background:var(--card);
  border:1px solid var(--rule); overflow:hidden;
  transition:transform .5s cubic-bezier(.2,.7,.3,1),box-shadow .5s,border-color .5s}
/* filo di colore in alto che si disegna quando la scheda entra */
.rec__card figure::before{content:""; position:absolute; left:0; top:0; height:2px; width:100%; background:var(--acc);
  transform-origin:left; transform:scaleX(0); transition:transform 1.1s cubic-bezier(.3,.7,.2,1) calc(var(--i) * .14s + .35s)}
.rec__card.in figure::before,.rec__card:not(.reveal) figure::before{transform:none}
/* virgolette grandi, in filigrana */
.rec__card figure::after{content:"\201C"; position:absolute; right:clamp(14px,2vw,24px); top:-.12em; font-family:var(--display);
  font-size:clamp(6rem,9vw,8.5rem); line-height:1; color:var(--sabbia); opacity:.38; pointer-events:none;
  transform:translateY(-14px) rotate(-8deg); transition:transform 1.2s cubic-bezier(.2,.7,.3,1) calc(var(--i) * .14s + .2s)}
.rec__card.in figure::after{transform:none}
.rec__card figure:hover{transform:translateY(-6px); border-color:var(--rule-2); box-shadow:0 22px 44px -26px rgba(16,20,24,.45)}
.js .rec__card.reveal{transition-delay:calc(var(--i) * .14s)}
/* stelle delle schede: una alla volta */
.js .rec__card.reveal .stelle__piene .stella{opacity:0; transform:scale(.3) rotate(-40deg);
  transition:opacity .4s,transform .6s cubic-bezier(.3,1.6,.5,1)}
.js .rec__card.reveal.in .stelle__piene .stella{opacity:1; transform:none}
.rec__card .stella:nth-child(1){transition-delay:calc(var(--i) * .14s + .45s)}
.rec__card .stella:nth-child(2){transition-delay:calc(var(--i) * .14s + .55s)}
.rec__card .stella:nth-child(3){transition-delay:calc(var(--i) * .14s + .65s)}
.rec__card .stella:nth-child(4){transition-delay:calc(var(--i) * .14s + .75s)}
.rec__card .stella:nth-child(5){transition-delay:calc(var(--i) * .14s + .85s)}

.rec__card blockquote{position:relative; margin:0; flex:1}
.rec__card blockquote p{font-size:1.02rem; line-height:1.72; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:7; overflow:hidden}
.rec__card.aperta blockquote p{-webkit-line-clamp:unset; display:block}
.rec__piu{align-self:flex-start; margin-top:-8px; padding:0; border:0; background:none; cursor:pointer; color:var(--acc);
  font:700 .66rem/1.4 var(--body); letter-spacing:.16em; text-transform:uppercase; text-decoration:underline; text-underline-offset:4px}
.rec__card figcaption{display:flex; align-items:center; gap:14px; padding-top:18px; border-top:1px solid var(--rule)}
.rec__card figcaption > span:last-child{display:flex; flex-direction:column; line-height:1.4; font-weight:700}
.rec__card figcaption a{text-decoration:none}
.rec__card figcaption a:hover{text-decoration:underline; text-underline-offset:3px}
.rec__card small{font-weight:400; font-size:.8rem; color:var(--fg-2)}
.rec__mono{width:44px; height:44px; flex:none; display:grid; place-items:center; border-radius:50%;
  background:var(--bg-2); border:1px solid var(--rule-2); font-family:var(--display); font-size:1.05rem; letter-spacing:.04em}

.rec__nav{display:flex; align-items:center; gap:18px; margin:4px 0 0; padding:0 var(--pad)}
.rec__nav[hidden]{display:none}
.rec__fr{width:46px; height:46px; display:grid; place-items:center; border:1px solid var(--rule-2); background:transparent;
  color:var(--fg); cursor:pointer; transition:background .3s,color .3s,border-color .3s,opacity .3s}
.rec__fr:hover:not(:disabled),.rec__fr:focus-visible{background:var(--fg); color:var(--bg); border-color:var(--fg)}
.rec__fr:disabled{opacity:.3; cursor:default}
.rec__barra{flex:1; max-width:220px; height:1px; background:var(--rule-2); position:relative; overflow:hidden}
.rec__barra span{position:absolute; inset:0; background:var(--fg); transform-origin:left; transform:scaleX(var(--p,0)); transition:transform .25s}
.rec__fonte{margin:clamp(14px,2vw,22px) 0 clamp(22px,3vw,32px)}
@media (prefers-reduced-motion:reduce){.rec__card figure:hover{transform:none}}