/* Layout: una sera alla fornacella. Palco scuro, una finestra verticale sul video che scorre con la pagina,
   poi sezioni lunghe e basse come una canala: la carta, la cantina, le voci, l'indirizzo. Look scuro unico, per scelta.

   Colori e font vengono dal brand book (maggio 2025). I caratteri sono sul sito, non su Google Fonts.
   Nota: i titoli del manuale sono in TT Chocolates, che è a pagamento; qui c'è Outfit, molto simile. */
@font-face{font-family:Outfit;src:url(../font/outfit.woff2)format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Sofia Sans";src:url(../font/sofia-sans.woff2)format('woff2');font-weight:1 1000;font-style:normal;font-display:swap}
@font-face{font-family:"Sofia Sans";src:url(../font/sofia-sans-italic.woff2)format('woff2');font-weight:1 1000;font-style:italic;font-display:swap}
:root{
  --carbone:#030102;        /* fondo */
  --fuliggine:#121010;      /* superfici */
  --osso:#fdfbe7;           /* testo */
  --polvere:#a8a394;        /* testo secondario */
  --brace:#f18c1b;          /* accento: la brace */
  --montepulciano:#080606;  /* la cantina */
  --oro:#f2b707;            /* l'olio */
  --oliva:#17220e;          /* fondo della sezione olio */
  --legno:#d9a86a;          /* lo spiedo */
  --aperto:#7fb259;         /* stato: aperto */
  --line:rgba(253,251,231,.14);
  --line-strong:rgba(253,251,231,.28);

  --f-display:Outfit,"Sofia Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-text:"Sofia Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --logo-mark:var(--brace);  /* il calice e lo spiedo del marchio */

  --gutter:clamp(16px,4vw,56px);
  --nav-h:72px;
  --section:clamp(88px,12vw,168px);
  color-scheme:dark;
}
html{scroll-behavior:smooth;background:var(--carbone)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--carbone);color:var(--osso);font-family:var(--f-text);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}   /* gli elementi nascosti restano nascosti anche se hanno un display proprio (menu del telefono, finestre) */
h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:400;letter-spacing:-.015em;text-wrap:balance}
a{color:inherit}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--brace);outline-offset:3px}
.amp{font-family:var(--f-text);font-style:italic;color:var(--brace);font-weight:600}
.eyebrow{font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--polvere)}
.wrap{max-width:1280px;margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section)}
.lead{font-size:clamp(18px,1.5vw,21px);line-height:1.55;color:var(--osso);max-width:36em}
.muted{color:var(--polvere)}

/* bottoni */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border:1px solid var(--line-strong);border-radius:2px;
  font:600 13px/1 var(--f-text);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--osso);background:transparent;cursor:pointer;
  transition:background .2s,border-color .2s,color .2s}
.btn:hover{border-color:var(--osso)}
.btn-brace{background:var(--brace);border-color:var(--brace);color:var(--carbone)}
.btn-brace:hover{background:var(--osso);border-color:var(--osso)}
.btn-sm{min-height:40px;padding:0 16px;font-size:12px}
.btn svg{width:16px;height:16px;flex:none}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- navigazione ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;height:calc(var(--nav-h) + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) var(--gutter) 0;
  display:flex;align-items:center;gap:24px;
  background:linear-gradient(to bottom,rgba(3,1,2,.75),rgba(3,1,2,0));transition:background .3s,border-color .3s;border-bottom:1px solid transparent}
.nav.solid{background:rgba(3,1,2,.88);border-bottom-color:var(--line);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.brand{display:inline-flex;align-items:center;text-decoration:none;color:var(--osso)}
.brand .logo{width:auto;height:30px;display:block}
.brand:hover .logo{--logo-mark:#f6a44a}
.links{display:flex;gap:28px;margin-left:auto}
.links a{font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;text-decoration:none;white-space:nowrap;color:var(--polvere);transition:color .2s}
.links a:hover,.links a[aria-current]{color:var(--osso)}
.links a[aria-current]{text-decoration:underline;text-decoration-color:var(--brace);text-underline-offset:8px;text-decoration-thickness:1px}
.sheet a.big[aria-current]{color:var(--brace)}
.nav-status{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--polvere);white-space:nowrap}
.dot{width:7px;height:7px;border-radius:50%;background:var(--polvere);flex:none}
.is-open .dot{background:var(--aperto);box-shadow:0 0 0 4px rgba(127,178,89,.16)}
.burger{display:none;margin-left:auto;width:44px;height:44px;border:1px solid var(--line-strong);border-radius:2px;background:transparent;color:var(--osso);cursor:pointer;align-items:center;justify-content:center}
.burger span{display:block;width:18px;height:1px;background:currentColor;box-shadow:0 -6px 0 currentColor,0 6px 0 currentColor}
.sheet{position:fixed;inset:0;z-index:60;background:var(--carbone);padding:calc(var(--nav-h) + env(safe-area-inset-top,0px) + 24px) var(--gutter) 32px;display:flex;flex-direction:column;gap:8px}
.sheet a.big{font-family:var(--f-display);font-size:clamp(36px,10vw,56px);text-decoration:none;line-height:1.2;border-bottom:1px solid var(--line);padding-block:10px}
.sheet .close{position:absolute;top:calc(env(safe-area-inset-top,0px) + 14px);right:var(--gutter)}
.sheet .btn{margin-top:24px}
@media (max-width:1240px){.nav-status{display:none}}
@media (max-width:1080px){.links{display:none}.nav-status{display:none}.burger{display:inline-flex}.nav .btn-sm{margin-left:auto}.nav .burger{margin-left:0}}

/* ---------- hero ---------- */
.hero{position:relative;height:600svh;background:var(--carbone)}
.stage{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;isolation:isolate}
.window{position:absolute;inset:0;background-color:#040203;background-position:center;background-size:cover;background-repeat:no-repeat}   /* primo fotogramma: nello <style data-hero-sfondo> della home */
.window canvas{display:block;width:100%;height:100%}
.scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(3,1,2,.96) 0%,rgba(3,1,2,.78) 24%,rgba(3,1,2,.25) 52%,rgba(3,1,2,0) 66%),
             linear-gradient(to bottom,rgba(3,1,2,.55) 0%,rgba(3,1,2,0) 16%)}
.copy{position:absolute;left:var(--gutter);right:var(--gutter);bottom:calc(36px + env(safe-area-inset-bottom,0px));display:grid;align-items:end;container-type:inline-size}
.copy>.panel{grid-area:1/1;min-width:0}
.panel{will-change:opacity,transform}
.js .panel:not(.intro){opacity:0;visibility:hidden}
.intro .eyebrow{color:var(--osso);opacity:.8}
.intro h1{margin:22px 0 24px}
.hero-logo .logo{width:min(100%,clamp(260px,62cqi,560px));height:auto;display:block}
.intro p{max-width:30em;color:var(--osso);opacity:.86;font-size:clamp(16px,1.35vw,19px)}
.cue{display:inline-flex;align-items:center;gap:14px;margin-top:28px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--polvere);text-decoration:none}
.cue i{position:relative;display:block;width:1px;height:44px;background:var(--line-strong);overflow:hidden}
.cue i::after{content:"";position:absolute;left:0;top:-40%;width:1px;height:40%;background:var(--brace);animation:cue 2.2s cubic-bezier(.6,0,.2,1) infinite}
@keyframes cue{to{top:100%}}
@media (prefers-reduced-motion:reduce){.cue i::after{animation:none;top:30%}}
.chapter .eyebrow{color:var(--brace)}
.chapter h2{font-size:clamp(40px,10cqi,84px);line-height:.98;letter-spacing:-.02em;margin:14px 0 18px}
.chapter p{max-width:32em;color:var(--osso);opacity:.84;font-size:clamp(16px,1.3vw,19px)}
.chapter .eyebrow + p:not(.eyebrow){margin-top:14px}
.outro h2{font-size:clamp(40px,10cqi,84px);line-height:.98;letter-spacing:-.02em;margin:14px 0 18px}
.outro p{max-width:30em;opacity:.84;margin-bottom:28px}
.bar{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--line)}
.bar i{display:block;height:100%;width:100%;background:var(--brace);transform-origin:0 50%;transform:scaleX(0)}
.rail{display:none}

/* hero orizzontale: video a tutto schermo, testo a sinistra, spiedo-indice a destra */
@media (min-aspect-ratio:1/1) and (min-width:760px){
  .hero{height:720vh}
  .stage{height:100vh}
  .window{background-size:cover;background-position:50% 50%}
  .scrim{background:
    linear-gradient(90deg,rgba(3,1,2,.9) 0%,rgba(3,1,2,.72) 28%,rgba(3,1,2,.22) 52%,rgba(3,1,2,0) 68%,rgba(3,1,2,.5) 100%),
    linear-gradient(to bottom,rgba(3,1,2,.62) 0%,rgba(3,1,2,0) 22%,rgba(3,1,2,0) 72%,rgba(3,1,2,.6) 100%)}
  .copy{top:var(--nav-h);bottom:24px;right:auto;align-items:center;width:min(600px,42vw)}
  .hero-logo .logo{width:min(100%,clamp(240px,76cqi,440px))}
  .bar{display:none}
  .rail{display:grid;position:absolute;right:var(--gutter);top:50%;transform:translateY(-50%);grid-template-columns:auto 12px;column-gap:18px;row-gap:0;align-items:center;justify-content:end}
  .rail .lab{grid-column:1;text-align:right;font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:rgba(253,251,231,.62);transition:color .3s;padding-block:16px;white-space:nowrap;text-shadow:0 1px 12px rgba(0,0,0,.6)}
  .rail .lab b{font-family:var(--f-text);font-weight:600;font-style:italic;letter-spacing:0;text-transform:none;font-size:15px;margin-right:8px;color:inherit}
  .rail .cube{grid-column:2;width:12px;height:12px;border:1px solid var(--line-strong);background:var(--carbone);position:relative;z-index:1;transition:background .3s,border-color .3s}
  .rail .stick{grid-column:2;grid-row:1 / span 5;justify-self:center;align-self:stretch;width:1px;background:var(--line-strong);position:relative;margin-bottom:-40px}
  .rail .stick::after{content:"";position:absolute;left:-1px;bottom:0;width:3px;height:40px;background:var(--legno);opacity:.55;border-radius:0 0 2px 2px}
  .rail .stick i{position:absolute;left:0;top:0;width:1px;height:100%;background:var(--brace);transform-origin:50% 0;transform:scaleY(0)}
  .rail .lab.on{color:var(--osso)}
  .rail .cube.done{background:var(--brace);border-color:var(--brace)}
  .rail .cube.on{border-color:var(--brace);background:var(--brace);box-shadow:0 0 0 5px rgba(241,140,27,.18)}
}
@media (min-aspect-ratio:1/1) and (min-width:760px) and (max-height:620px){
  .intro h1{margin:14px 0 16px}.hero-logo .logo{width:min(100%,clamp(220px,48cqi,380px))}
  .chapter h2,.outro h2{font-size:clamp(32px,8cqi,60px)}
  .cue{display:none}
}

/* ---------- la casa ---------- */
.casa-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,7vw,112px);align-items:center}
.casa-fig{position:relative;isolation:isolate}
/* effetto brace: bagliore dietro la foto, scintille sopra, inclinazione col mouse */
.brace-glow{position:absolute;left:-24%;right:-24%;top:8%;bottom:-12%;z-index:-1;pointer-events:none;opacity:.7;
  background:radial-gradient(ellipse 62% 58% at 50% 70%,rgba(241,140,27,.85),rgba(193,86,10,.35) 45%,rgba(193,86,10,0) 72%);filter:blur(34px)}
.embers{position:absolute;left:0;top:0;z-index:2;pointer-events:none}
.casa-fig .media{position:relative;transform-origin:50% 60%}
.casa-fig .glare{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .5s;mix-blend-mode:screen;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,40%),rgba(252,190,100,.32),rgba(252,190,100,0) 42%)}
.casa-fig .media.is-hot .glare{opacity:1}
.casa-fig img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 50%}
.casa-fig figcaption{margin-top:14px;font-size:13px;color:var(--polvere)}
.casa h2{font-size:clamp(40px,5.4vw,80px);line-height:1;letter-spacing:-.02em;margin:18px 0 32px}
.casa .copytext{display:grid;gap:18px;max-width:36em;color:var(--polvere)}
.casa .copytext p:first-child{color:var(--osso)}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:48px;padding-top:28px;border-top:1px solid var(--line)}
.facts dt{font-family:var(--f-display);font-size:clamp(28px,2.8vw,40px);line-height:1;font-variant-numeric:lining-nums;margin-bottom:10px}
.facts dd{font-size:14px;line-height:1.45;color:var(--polvere)}
@media (max-width:860px){.casa-grid{grid-template-columns:minmax(0,1fr)}.casa-fig{max-width:520px}.casa-fig img{aspect-ratio:4/5;object-position:50% 50%}}
@media (max-width:520px){.facts{grid-template-columns:minmax(0,1fr);gap:20px}}

/* ---------- dalla cucina: nastro di foto che scorre ---------- */
.cucina{position:relative;border-top:1px solid var(--line);overflow:hidden;
  background:radial-gradient(ellipse 60% 45% at 50% 72%,rgba(241,140,27,.11),rgba(241,140,27,0) 70%)}
.cucina-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px clamp(32px,6vw,96px);align-items:end;width:100%}
.cucina h2{font-size:clamp(40px,5.4vw,80px);line-height:1;letter-spacing:-.02em;margin-top:16px}
.cucina-intro{display:grid;gap:14px;justify-items:start}
.ring-hint{display:inline-flex;align-items:center;gap:12px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--polvere)}
.ring-hint i{display:block;flex:none;width:28px;height:1px;background:var(--brace)}
.hint-touch{display:none}
@media (hover:none){.hint-fine{display:none}.hint-touch{display:inline}}
@media (max-width:760px){.cucina-head{grid-template-columns:minmax(0,1fr)}.mq-item{width:min(62vw,280px)}}
.mq{position:relative;margin-top:clamp(40px,5vw,68px);overflow:hidden;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
.mq.dragging{cursor:grabbing}
.mq-track{display:flex;gap:clamp(14px,1.6vw,24px);width:max-content;padding:14px 0 6px;will-change:transform}
.mq-item{flex:none;width:clamp(200px,21vw,320px);margin:0;padding:0;border:0;background:none;color:var(--osso);font:inherit;text-align:left;cursor:inherit;
  display:grid;gap:14px;transform:skewX(var(--sk,0deg));-webkit-tap-highlight-color:transparent}
.mq-ph{position:relative;display:block;aspect-ratio:3/4;border-radius:6px;overflow:hidden;background:var(--fuliggine);
  box-shadow:inset 0 0 0 1px var(--line),0 28px 60px -34px rgba(0,0,0,.9);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.mq-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none;
  transform:translate3d(var(--px,0px),0,0) scale(1.14);transition:scale .7s cubic-bezier(.2,.7,.2,1)}
.mq-ph::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(2,1,1,.35),rgba(2,1,1,0) 40%);pointer-events:none}
.mq-cap{display:grid;gap:2px;padding-right:8px}
.mq-cap strong{font-family:var(--f-display);font-weight:500;font-size:clamp(20px,1.6vw,24px);line-height:1.15}
.mq-cap span{font-size:13px;color:var(--polvere)}
@media (hover:hover){.mq-item:hover .mq-ph{transform:translateY(-10px)}.mq-item:hover .mq-ph img{scale:1.05}}
.mq-item:focus-visible{outline:none}
.mq-item:focus-visible .mq-ph{outline:2px solid var(--brace);outline-offset:3px}
/* con "riduci movimento": niente scorrimento automatico, la striscia si scorre a mano */
.mq.mq-static{overflow-x:auto;cursor:auto;-webkit-mask-image:none;mask-image:none}
.mq.mq-static .mq-track{padding-inline:var(--gutter)}
/* vista a tutto schermo */
.lb{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:clamp(16px,4vw,48px) clamp(16px,9vw,120px);
  background:rgba(2,1,1,.95);opacity:0;transition:opacity .3s;touch-action:pan-y}
.lb[hidden]{display:none}
.lb.open{opacity:1}
.lb-fig{margin:0;display:grid;justify-items:center;gap:16px;max-width:100%}
.lb-img{display:block;max-width:100%;max-height:calc(100vh - 200px);max-height:calc(100svh - 200px);width:auto;height:auto;border-radius:6px;
  box-shadow:0 40px 120px -30px rgba(0,0,0,.9);transition:opacity .3s,transform .3s}
.lb-img.swap{opacity:0;transform:scale(.8)}
.lb-cap{display:grid;gap:2px;text-align:center}
.lb-cap strong{font-family:var(--f-display);font-weight:500;font-size:clamp(22px,2.2vw,30px);line-height:1.15}
.lb-cap span{font-size:14px;color:var(--polvere)}
.lb-btn{position:absolute;z-index:1;display:grid;place-items:center;width:52px;height:52px;padding:0;border:1px solid var(--line-strong);border-radius:50%;
  background:rgba(3,1,2,.6);color:var(--osso);cursor:pointer;transition:border-color .2s,color .2s}
.lb-btn:hover,.lb-btn:focus-visible{border-color:var(--brace);color:var(--brace)}
.lb-btn:focus-visible{outline:2px solid var(--brace);outline-offset:3px}
.lb-btn svg{width:22px;height:22px}
.lb-close{top:max(16px,env(safe-area-inset-top));right:16px}
.lb-prev,.lb-next{top:50%;transform:translateY(-50%)}
.lb-prev{left:clamp(12px,3vw,40px)}
.lb-next{right:clamp(12px,3vw,40px)}
.lb-count{position:absolute;left:50%;bottom:max(18px,env(safe-area-inset-bottom));transform:translateX(-50%);margin:0;font-size:12px;letter-spacing:.2em;font-weight:600;color:var(--polvere);font-variant-numeric:tabular-nums}
@media (max-width:760px){
  .lb{padding:72px 16px 96px}
  .lb-img{max-height:calc(100svh - 260px)}
  .lb-prev,.lb-next{top:auto;bottom:max(16px,env(safe-area-inset-bottom));transform:none}
  .lb-prev{left:16px}.lb-next{right:16px}
  .lb-count{bottom:calc(max(16px,env(safe-area-inset-bottom)) + 19px)}
}
@media (prefers-reduced-motion:reduce){.mq-ph,.mq-ph img,.lb,.lb-img{transition:none}}

/* ---------- la carta ---------- */
.carta{border-top:1px solid var(--line)}
.carta-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(40px,7vw,112px)}
.carta-side{position:sticky;top:calc(var(--nav-h) + 32px);align-self:start;display:grid;gap:22px}
.carta-side :is(h1,h2){font-size:clamp(40px,4.6vw,72px);line-height:1;letter-spacing:-.02em}
.carta-side .slab3d{margin-top:12px}
/* effetto 3D a lamelle sulla foto del pane */
.slab3d{position:relative;perspective:1100px;perspective-origin:50% 45%}
.slab3d.on img{opacity:0}
.slab-slices{position:absolute;inset:0;display:flex;transform-style:preserve-3d}
.slice{position:relative;flex:1 1 0;height:100%;margin-right:-.5px;background-repeat:no-repeat;
  background-size:calc(var(--n) * 100%) auto;background-position:calc(var(--i) / (var(--n) - 1) * 100%) 50%;
  transform-origin:50% 50%;backface-visibility:hidden;-webkit-backface-visibility:hidden;will-change:transform}
.slice i{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none}
.slice::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:var(--gl,0);
  background:linear-gradient(90deg,rgba(255,219,150,0),rgba(255,219,150,.22) 50%,rgba(255,219,150,0))}
.carta-side img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:50% 50%}
.carta-side .note{font-size:14px;color:var(--polvere);border-left:1px solid var(--brace);padding-left:14px}
.carta-list{display:grid;gap:64px}
.cat-title{display:flex;align-items:center;gap:16px;margin-bottom:6px}
.cat-title::after{content:"";flex:1;height:1px;background:var(--line)}
.item{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:24px;row-gap:4px;padding-block:20px;border-bottom:1px solid var(--line)}
.item h3{font-size:clamp(23px,2vw,28px);line-height:1.15;letter-spacing:-.005em}
.item p{grid-column:1;font-size:15px;color:var(--polvere)}
.item .tag{grid-column:2;grid-row:1;align-self:center;font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--brace);white-space:nowrap}
.cat.featured .item{padding-block:26px}
.cat.featured .item h3{font-size:clamp(32px,3.6vw,48px)}
.cat.featured .item h3 em{font-family:var(--f-text);font-style:italic;font-weight:600;color:var(--brace)}
@media (max-width:860px){.carta-grid{grid-template-columns:minmax(0,1fr)}.carta-side{position:static}.carta-side .slab3d{max-width:420px}.carta-side img{aspect-ratio:4/3}}

/* ---------- vini ---------- */
.vini{background:var(--montepulciano);position:relative;overflow:hidden}
.vini{padding-block:0}
.vini .eyebrow{color:rgba(253,251,231,.7)}
/* apertura a tutto schermo: il video delle bottiglie con il titolo sopra */
.vini-hero{position:relative;height:100vh;height:100svh;min-height:520px;overflow:hidden;isolation:isolate}
.vh-media{position:absolute;inset:0;background:#040203}
.vh-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.fx .vh-media[data-fx="img"] > video{transform:scale(calc(1.16 - var(--e) * .16))}   /* entra con uno zoom leggero e si ferma a grandezza piena */
@media (min-aspect-ratio:1/1){.vh-media video{object-position:0 50%}}   /* bottiglie un po' a destra, lontano dal testo */
.vh-scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(8,6,6,.9) 0%,rgba(8,6,6,.64) 30%,rgba(8,6,6,.14) 56%,rgba(8,6,6,0) 70%),
             linear-gradient(to bottom,rgba(3,1,2,.55) 0%,rgba(3,1,2,0) 18%,rgba(8,6,6,0) 62%,rgba(8,6,6,.5) 84%,var(--carbone) 100%)}   /* in fondo sfuma nella sezione dopo */
.vh-copy{position:absolute;left:0;right:0;bottom:clamp(64px,13vh,150px);display:grid;justify-items:start}
.vini .vh-copy .eyebrow{color:var(--osso);opacity:.82}
.vini .vh-copy :is(h1,h2){font-size:clamp(42px,5.2vw,86px);line-height:.98;letter-spacing:-.02em;max-width:8.4em;margin:18px 0 34px}
.vh-copy :is(h1,h2) em{font-family:var(--f-text);font-style:italic;font-weight:600;color:var(--brace)}
@media (max-width:760px){
  .vh-scrim{background:linear-gradient(to bottom,rgba(3,1,2,.5) 0%,rgba(3,1,2,0) 20%,rgba(8,6,6,.12) 40%,rgba(8,6,6,.8) 70%,rgba(10,7,8,.92) 88%,var(--carbone) 100%)}
  .vh-copy{bottom:104px}
  .vini .vh-copy :is(h1,h2){font-size:clamp(38px,11vw,56px);margin:14px 0 26px}
}

/* ---------- recensioni ---------- */
.recensioni{position:relative;overflow:hidden;isolation:isolate}
.recensioni > .wrap{position:relative;z-index:1}
/* sfondo: scintille che salgono da una brace nascosta sul fondo della sezione */
.rec-glow{position:absolute;left:-10%;right:-10%;bottom:0;height:62%;z-index:0;pointer-events:none;opacity:.75;
  background:radial-gradient(ellipse 55% 60% at 50% 108%,rgba(241,140,27,.26),rgba(193,86,10,.09) 48%,rgba(193,86,10,0) 75%)}
.rec-sparks{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:0;transition:opacity 1.2s ease;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 16%,#000 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 16%,#000 100%)}
.rec-sparks.on{opacity:1}
/* intestazione: titolo a sinistra, voto Google a destra */
.rec-top{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:28px 40px;margin-bottom:clamp(36px,4vw,56px)}
.rec-top h2{font-size:clamp(40px,5.4vw,84px);line-height:1;letter-spacing:-.025em;margin-top:16px;max-width:12em}
.rec-top h2 em{font-family:var(--f-text);font-style:italic;font-weight:600;color:var(--brace)}
.rec-badge{display:inline-flex;align-items:center;gap:14px;padding:14px 22px 14px 16px;border:1px solid var(--line-strong);border-radius:14px;
  background:rgba(253,251,231,.04);text-decoration:none;color:var(--osso);transition:border-color .25s,background-color .25s}
.rec-badge:hover{border-color:var(--brace);background:rgba(241,140,27,.08)}
.rec-badge-star{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--brace);color:var(--carbone);font-size:22px;line-height:1}
.rec-badge-num{font-family:var(--f-display);font-size:clamp(36px,3.4vw,48px);line-height:1;letter-spacing:-.02em;font-variant-numeric:lining-nums}
.rec-badge-txt{font-size:13px;line-height:1.35;color:var(--polvere)}
/* schede delle recensioni */
.revs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.6vw,20px)}
.rev{display:grid;align-content:start;gap:18px;margin:0;padding:clamp(26px,2.8vw,38px);border:1px solid var(--line);border-radius:16px;
  background:rgba(18,16,16,.78);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:border-color .3s,transform .3s}
.rev:hover{border-color:rgba(241,140,27,.45)}
.rev-who{display:flex;align-items:center;gap:14px}
.rev-av{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;background:var(--osso);color:var(--carbone);font-family:var(--f-display);font-size:18px;font-weight:600}
.rev-id{display:grid;gap:2px}
.rev-id strong{font-size:16px;font-weight:600;color:var(--osso)}
.rev-id span{font-size:13px;color:var(--polvere)}
.rev-stars{color:var(--oro);font-size:15px;letter-spacing:.14em}
.rev blockquote p{font-size:clamp(17px,1.35vw,20px);line-height:1.6;color:rgba(253,251,231,.9)}
/* piede: nota e Instagram a sinistra, pulsante a destra */
.rec-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px;margin-top:clamp(28px,3vw,40px)}
.rec-foot-txt{display:grid;gap:8px;color:var(--polvere);font-size:15px}
.rec-note{font-size:13px}
.rec-foot a{color:var(--osso)}
.rec-foot .btn{color:var(--osso)}
.rec-foot .ig-wine{color:var(--brace);font-weight:600;text-decoration-thickness:1px;text-underline-offset:3px}   /* il vino che producono: in evidenza */
.rec-foot .ig-wine:hover{color:var(--osso)}
@media (max-width:860px){.revs{grid-template-columns:minmax(0,1fr)}.rec-top{grid-template-columns:minmax(0,1fr);justify-items:start}}

/* ---------- dove ---------- */
.dove{background:var(--fuliggine);border-top:1px solid var(--line)}
.dove-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(48px,7vw,112px)}
.dove h2{font-size:clamp(44px,6vw,92px);line-height:.98;letter-spacing:-.025em;margin:18px 0 24px}
.addr{font-style:normal;font-size:clamp(17px,1.4vw,20px);line-height:1.5}
.coords:empty{display:none}
.coords{font-size:13px;letter-spacing:.06em;color:var(--polvere);margin-top:8px;font-variant-numeric:tabular-nums}
.dove .btn-row{margin-top:32px}
.tel{margin-top:44px;padding-top:28px;border-top:1px solid var(--line);display:grid;gap:14px}
.tel .num{font-family:var(--f-display);font-size:clamp(32px,3.6vw,48px);line-height:1;font-variant-numeric:lining-nums;letter-spacing:-.01em;user-select:all}
.tel .num .pfx{font-family:var(--f-text);font-weight:400;font-size:.62em;letter-spacing:0;vertical-align:.12em;color:var(--polvere)}
.tel .muted{font-size:15px;max-width:34em}
.copied{font-size:13px;color:var(--aperto);min-height:1.4em}
.hint{margin-top:28px;display:grid;gap:10px;font-size:15px;color:var(--polvere);max-width:34em}
.hint p{padding-left:16px;border-left:1px solid var(--line-strong)}
.orari h3{font-family:var(--f-text);font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--polvere);margin-bottom:16px}
.status{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border:1px solid var(--line-strong);border-radius:999px;font-size:14px;margin-bottom:28px}
.orari table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.orari td{padding:14px 0;border-bottom:1px solid var(--line);font-size:16px}
.orari td:last-child{text-align:right;color:var(--polvere)}
.orari tr.closed td{color:var(--polvere)}
.orari tr.today td{color:var(--osso)}
.orari tr.today td:first-child::after{content:"oggi";margin-left:10px;font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--carbone);background:var(--brace);padding:3px 7px;border-radius:2px;vertical-align:2px}
@media (max-width:860px){.dove-grid{grid-template-columns:minmax(0,1fr)}}


/* ---------- transizioni allo scroll ----------
   JS scrive su ogni [data-fx] due valori: --e (ingresso 0→1) e --x (uscita in alto 0→1); le regole qui sotto li traducono in movimento. */
main,.foot-site{overflow-x:clip}
.media{display:block;overflow:hidden}
.fx [data-fx]{--e:0;--x:0;--fxd:110px}
.fx [data-fx="left"],.fx [data-fx="right"],.fx [data-fx="up"]{opacity:calc(var(--e) * (1 - var(--x)));will-change:transform,opacity}
.fx [data-fx="left"]{transform:translate3d(calc((1 - var(--e)) * var(--fxd) * -1),calc(var(--x) * -40px),0)}
.fx [data-fx="right"]{transform:translate3d(calc((1 - var(--e)) * var(--fxd)),calc(var(--x) * -40px),0)}
.fx [data-fx="up"]{transform:translate3d(0,calc((1 - var(--e)) * 80px - var(--x) * 40px),0)}
.fx [data-fx="zoom"]{opacity:calc(var(--e) * (1 - var(--x)));transform:scale(calc(.78 + var(--e) * .22))}
.fx [data-fx="zoom-left"]{opacity:calc(var(--e) * (1 - var(--x)));transform:translate3d(calc((1 - var(--e)) * -160px),calc(var(--x) * -40px),0) scale(calc(.6 + var(--e) * .4));transform-origin:left bottom}
.fx [data-fx="img"]{opacity:calc(1 - var(--x));clip-path:inset(0 calc((1 - var(--e)) * 100%) 0 0)}
.fx [data-fx="img"] > :is(img,video){transform:translate3d(0,calc(var(--p,0) * 4%),0) scale(calc(1.32 - var(--e) * .22));will-change:transform}
.fx [data-fx^="split"]{opacity:calc(1 - var(--x));transform:translate3d(0,calc(var(--x) * -40px),0)}
.fx [data-fx^="split"] .w{display:inline-block;--ei:clamp(0,calc(var(--e) * var(--k,1) - var(--i,0) * .14),1);
  opacity:var(--ei);transform:translate3d(calc((1 - var(--ei)) * var(--dir,-1) * var(--fxd)),0,0);filter:blur(calc((1 - var(--ei)) * 8px))}
.fx [data-fx="line"] > *{opacity:calc(var(--e) * (1 - var(--x)));transform:translate3d(calc((1 - var(--e)) * -60px),0,0)}
.fx [data-fx="line"]::after{transform:scaleX(var(--e));transform-origin:left center;opacity:calc(1 - var(--x))}
@media (max-width:760px){.fx [data-fx]{--fxd:56px}}

/* ---------- footer (uguale in tutte le pagine) ---------- */
.foot-site{padding-block:72px calc(40px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);background:var(--carbone)}
.foot-cols{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:40px clamp(28px,4vw,64px)}
.foot-site .brand .logo{height:clamp(40px,4vw,52px)}
.foot-brand p{margin-top:10px;color:var(--polvere);font-size:15px}
.foot-brand .btn{margin-top:24px}
.foot-col .eyebrow{margin-bottom:14px}
.foot-col a,.foot-col p{display:block;font-size:15px;line-height:1.9;color:var(--polvere);text-decoration:none}
.foot-col a:hover{color:var(--osso)}
.foot-col a[aria-current]{color:var(--osso)}
.small{margin-top:48px;padding-top:24px;border-top:1px solid var(--line);font-size:13px;color:var(--polvere)}
@media (max-width:860px){.foot-cols{grid-template-columns:repeat(2,minmax(0,1fr))}.foot-brand{grid-column:1/-1}}
@media (max-width:440px){.foot-cols{grid-template-columns:minmax(0,1fr)}}

/* ---------- elementi comuni alle pagine interne ---------- */
.page-first{padding-top:calc(var(--nav-h) + clamp(40px,6vw,88px))}
.prov{display:inline-flex;align-items:center;gap:8px;align-self:start;justify-self:start;width:max-content;max-width:100%;padding:6px 12px;border:1px dashed var(--line-strong);border-radius:999px;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--polvere)}
.prov::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--oro);flex:none}
.chip{display:inline-block;vertical-align:middle;margin-left:10px;padding:3px 8px;border:1px solid var(--line-strong);border-radius:999px;font-family:var(--f-text);font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--polvere)}
.chip-ph{border-style:dashed}
.item .price{grid-column:2;grid-row:1;align-self:center;font-family:var(--f-display);font-size:clamp(20px,1.8vw,24px);font-variant-numeric:lining-nums;white-space:nowrap}
.cat-index{display:flex;flex-wrap:wrap;gap:8px}
.cat-index a,.pill{display:inline-flex;align-items:center;min-height:34px;padding:0 14px;border:1px solid var(--line-strong);border-radius:999px;background:transparent;color:var(--osso);
  font:600 11px/1 var(--f-text);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:border-color .2s,color .2s,background .2s}
.cat-index a:hover,.pill:hover{border-color:var(--brace);color:var(--brace)}
.pill.is-on{background:var(--osso);border-color:var(--osso);color:var(--carbone)}
.carta-page .carta-side .slab3d img{aspect-ratio:4/3}
.cat{scroll-margin-top:calc(var(--nav-h) + 24px)}
.cta-band{border-top:1px solid var(--line);text-align:center}
.cta-band h2{font-size:clamp(36px,4.6vw,64px);line-height:1.02;letter-spacing:-.02em;margin:16px auto 28px;max-width:14em}
.cta-band .btn-row{justify-content:center}
.btn-oro{background:var(--oro);border-color:var(--oro);color:var(--carbone)}
.btn-oro:hover{background:var(--osso);border-color:var(--osso)}
.ph-photo{display:grid;place-items:center;aspect-ratio:4/5;border:1px dashed var(--line-strong);border-radius:6px;padding:24px;text-align:center;
  color:var(--polvere);font-size:14px;background:repeating-linear-gradient(135deg,rgba(253,251,231,.03) 0 12px,transparent 12px 24px)}

/* ---------- home: il nostro olio ---------- */
.olio-home{position:relative;overflow:hidden;background:radial-gradient(ellipse 50% 60% at 22% 55%,rgba(242,183,7,.14),rgba(242,183,7,0) 70%),var(--oliva);border-top:1px solid var(--line)}
.olio-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,7vw,112px);align-items:center}
.olio-fig{position:relative}
.olio-fig img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 30%}
.olio-home h2{font-size:clamp(40px,5.2vw,80px);line-height:1;letter-spacing:-.02em;margin:18px 0 28px}
.olio-home h2 em,.olio-hero h1 em,.olio-page h2 em{font-family:var(--f-text);font-style:italic;font-weight:600;color:var(--oro)}
.olio-home .eyebrow,.olio-hero .eyebrow,.olio-page .eyebrow{color:var(--oro)}
.olio-copy{display:grid;gap:18px;max-width:34em;justify-items:start}
.olio-copy .lead{color:var(--osso)}
.olio-copy .btn{margin-top:10px}
@media (max-width:860px){.olio-grid{grid-template-columns:minmax(0,1fr)}.olio-fig{max-width:520px}}

/* ---------- pagina cantina ---------- */
.radici{position:relative;overflow:hidden;border-top:1px solid rgba(253,251,231,.1);background:radial-gradient(ellipse 60% 70% at 18% 50%,rgba(241,140,27,.1),rgba(241,140,27,0) 68%),var(--fuliggine)}
.radici-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(40px,5vw,72px)}
.radici h2{font-size:clamp(56px,8vw,120px);line-height:.9;letter-spacing:-.03em;margin:16px 0 24px}
.radici-copy{display:grid;gap:16px;justify-items:start;max-width:40em}
.radici-copy p{color:rgba(253,251,231,.82)}
.radici-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.radici-card{display:grid;align-content:start;border:1px solid rgba(253,251,231,.14);border-radius:6px;background:rgba(3,1,2,.4);overflow:hidden}
.radici-foto{aspect-ratio:4/5;overflow:hidden;background:#030102}
.radici-foto img{width:100%;height:100%;object-fit:cover;object-position:50% 68%;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.radici-card:hover .radici-foto img{transform:scale(1.04)}
.radici-body{display:grid;gap:8px;padding:22px 24px 26px}
.radici-card h3{font-size:clamp(24px,2.2vw,30px);line-height:1.1}
.radici-card p{font-size:14px;color:rgba(253,251,231,.74)}
.radici-tipo{font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:#d465d6}
.radici-card[data-tipo="bianco"] .radici-tipo{color:#f2d234}
.radici-card:is([data-tipo="cerasuolo"],[data-tipo="rosato"]) .radici-tipo{color:#f5577f}
.carta-vini-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 40px;align-items:end;margin-bottom:40px}
.carta-vini-head h2{font-size:clamp(40px,5vw,72px);line-height:1;letter-spacing:-.02em;margin-top:14px}
.carta-vini-head .muted{max-width:34em;margin-top:16px}
.vini-filtri{display:flex;flex-wrap:wrap;gap:8px}
.vini-list{display:grid;gap:48px}
.wine-group[hidden]{display:none}
.wine{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 24px;align-items:center;padding-block:20px;border-bottom:1px solid var(--line)}
.wine h3{font-size:clamp(22px,2vw,28px);line-height:1.15}
.wine p{font-size:15px;color:var(--polvere);margin-top:4px}
.wine-price{display:flex;gap:18px;font-family:var(--f-display);font-size:clamp(18px,1.6vw,22px);font-variant-numeric:lining-nums;white-space:nowrap}
.wine-price small{font-family:var(--f-text);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--polvere);margin-right:4px}
.wine-price:empty{display:none}
@media (max-width:860px){.radici-grid,.carta-vini-head{grid-template-columns:minmax(0,1fr)}}

/* ---------- pagina olio ---------- */
.olio-page{background:var(--oliva)}
.olio-hero{position:relative;height:88vh;height:88svh;min-height:520px;overflow:hidden;isolation:isolate;background:var(--oliva)}
.oh-media{position:absolute;top:0;bottom:0;right:0;width:56%;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24%);mask-image:linear-gradient(90deg,transparent 0,#000 24%)}
.oh-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 58%}
.oh-scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(3,1,2,.45) 0%,rgba(3,1,2,0) 18%,rgba(23,34,14,0) 78%,var(--oliva) 100%)}
.oh-copy{position:absolute;left:0;right:0;bottom:clamp(56px,11vh,130px);display:grid;gap:16px;justify-items:start}
.olio-hero h1{font-size:clamp(46px,5.4vw,92px);line-height:.96;letter-spacing:-.02em;max-width:8em;margin-top:6px}
.oh-copy > *{max-width:min(36em,44vw)}
.olio-hero .lead{max-width:30em;color:var(--osso)}
.olio-hero .muted{max-width:34em}
.olio-section{border-top:1px solid rgba(253,251,231,.1)}
.olio-section h2{font-size:clamp(38px,4.6vw,68px);line-height:1;letter-spacing:-.02em;margin:16px 0 28px}
.storia-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(40px,7vw,112px);align-items:center}
.storia-foto{margin:0;border-radius:6px;overflow:hidden;background:#030102}
.storia-foto img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 30%}
.storia-text{display:grid;gap:18px;max-width:36em;color:var(--polvere);font-size:clamp(16px,1.3vw,18px)}
.olio-page .facts{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));grid-auto-rows:auto auto;margin-top:0;align-items:start}
@media (min-width:900px){.olio-page .facts .lungo{grid-column:span 2}}   /* una descrizione lunga (es. profilo di gusto) prende due colonne */
.olio-page .facts dt{grid-row:1;align-self:end;line-height:1.05;font-size:clamp(24px,2.2vw,32px)}
.olio-page .facts dd{grid-row:2}
.formati{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin-bottom:32px}
.formato{padding:26px 24px;border:1px solid rgba(253,251,231,.16);border-radius:6px;background:rgba(242,183,7,.05)}
.formato h3{font-size:clamp(24px,2.2vw,30px);margin-bottom:8px}
.formato p{font-size:15px;color:var(--polvere)}
.olio-dove{color:var(--polvere);max-width:36em;margin-bottom:28px}
@media (max-width:860px){.storia-grid{grid-template-columns:minmax(0,1fr)}.storia-foto{max-width:520px}
  .olio-hero{height:auto;min-height:0;padding-top:var(--nav-h)}
  .oh-media{position:relative;width:100%;aspect-ratio:4/5;-webkit-mask-image:linear-gradient(to bottom,#000 70%,transparent 100%);mask-image:linear-gradient(to bottom,#000 70%,transparent 100%)}
  .oh-media img{object-position:50% 66%}
  .oh-scrim{display:none}
  .oh-copy{position:relative;bottom:auto;margin-top:-48px;padding-bottom:64px}
  .oh-copy > *{max-width:none}}
.radici-note{padding-top:28px;border-top:1px solid rgba(253,251,231,.12);color:var(--polvere);font-size:clamp(16px,1.3vw,18px);max-width:52em}
.radici-note strong{color:var(--osso);font-weight:600;margin-right:.3em}
.radici .ig-wine{color:var(--brace);font-weight:600;text-underline-offset:3px}
.radici .ig-wine:hover{color:var(--osso)}
@media (max-width:860px){
  .radici-cards{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:78%;overflow-x:auto;scroll-snap-type:x mandatory;
    margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);scroll-padding-inline:var(--gutter);scrollbar-width:none}
  .radici-cards::-webkit-scrollbar{display:none}
  .radici-card{scroll-snap-align:start}}

/* ---------- pagina privacy e riga legale nel footer ---------- */
.legal{max-width:46em}
.legal h1{font-size:clamp(40px,5vw,72px);line-height:1;letter-spacing:-.02em;margin:14px 0 12px}
.legal-date{color:var(--polvere);font-size:14px;margin-bottom:clamp(32px,4vw,48px)}
.legal h2{font-size:clamp(22px,2vw,28px);line-height:1.15;margin:40px 0 12px}
.legal p{color:rgba(253,251,231,.78);margin-bottom:12px}
.legal strong{color:var(--osso);font-weight:600}
.legal a{color:var(--brace);text-underline-offset:3px}
.legal a:hover{color:var(--osso)}
.foot-legal{display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:space-between;align-items:baseline}
.foot-legal a{color:var(--polvere);text-underline-offset:3px}
.foot-legal a:hover,.foot-legal a[aria-current]{color:var(--osso)}

/* ---------- menù vero: note di categoria, gusti delle bruschette ---------- */
.cat-note{font-size:15px;color:var(--polvere);margin:2px 0 6px;max-width:40em}
.cat.solo-nota{padding-bottom:8px}
.cat.solo-nota .cat-note{font-size:clamp(17px,1.4vw,19px);color:rgba(253,251,231,.82);padding:14px 0 20px;border-bottom:1px solid var(--line);margin:0}
.gusti{list-style:none;margin:10px 0 0;padding:0 0 22px;display:flex;flex-wrap:wrap;gap:10px;border-bottom:1px solid var(--line)}
.gusti li{font-family:var(--f-display);font-size:clamp(18px,1.6vw,22px);line-height:1.2;padding:10px 16px;border:1px solid var(--line-strong);border-radius:999px}
@media (max-width:520px){.gusti{gap:8px}.gusti li{font-size:16px;padding:8px 13px}}

/* ---------- carta dei vini: due colonne, nome dell'etichetta, simbolo BIO ---------- */
.carta-vini{border-top:1px solid rgba(253,251,231,.1)}
.wine-group{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(32px,4vw,64px)}
.wine-group .cat-title{grid-column:1/-1}
.wine{padding-block:16px}
.wine h3{font-size:clamp(19px,1.6vw,23px)}
.wine-label{font-family:var(--f-text);font-style:italic;font-weight:500;color:var(--brace)}
.wine-label::before{content:"– ";font-style:normal;color:var(--polvere)}
.wine p{font-size:14px;margin-top:2px}
.bio{display:inline-flex;align-items:center;gap:4px;vertical-align:middle;margin-left:8px;padding:3px 9px 3px 6px;border:1px solid rgba(143,196,99,.7);border-radius:999px;background:rgba(143,196,99,.12);
  font-family:var(--f-text);font-style:normal;font-size:11px;font-weight:700;letter-spacing:.1em;line-height:1.4;color:#a3d477;white-space:nowrap}
.bio svg{width:13px;height:13px;flex:none}
.carta-vini-head .bio{margin-left:2px;margin-right:2px}
@media (max-width:860px){.wine-group{grid-template-columns:minmax(0,1fr)}}

/* ---------- mappa (si carica al clic) ---------- */
.mappa{position:relative;margin-top:clamp(48px,6vw,88px);aspect-ratio:21/8;min-height:340px;border:1px solid var(--line);border-radius:6px;overflow:hidden;
  background:
    linear-gradient(115deg,transparent 47%,rgba(253,251,231,.06) 47.4%,rgba(253,251,231,.06) 49%,transparent 49.4%),
    linear-gradient(28deg,transparent 58%,rgba(253,251,231,.05) 58.3%,rgba(253,251,231,.05) 59.4%,transparent 59.7%),
    repeating-linear-gradient(0deg,transparent 0 46px,rgba(253,251,231,.035) 46px 48px),
    repeating-linear-gradient(90deg,transparent 0 62px,rgba(253,251,231,.035) 62px 64px),
    radial-gradient(ellipse 40% 60% at 50% 50%,rgba(241,140,27,.1),transparent 70%),#0c0a09}
.mappa-ph{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:14px;padding:24px;text-align:center}
.mappa-pin{width:40px;height:40px;color:var(--brace);filter:drop-shadow(0 6px 14px rgba(241,140,27,.35))}
.mappa-t{font-family:var(--f-display);font-size:clamp(22px,2.2vw,30px);line-height:1.15}
.mappa-t span{display:block;font-family:var(--f-text);font-size:15px;color:var(--polvere);margin-top:6px}
.mappa .btn-row{margin-top:6px;justify-content:center}
.mappa-note{max-width:34em;font-size:12.5px;line-height:1.5;color:var(--polvere)}
.mappa-note a{color:var(--osso);text-underline-offset:3px}
.mappa.is-on .mappa-ph{visibility:hidden}
.mappa-img,.mappa-img picture,.mappa-img img{position:absolute;inset:0;z-index:1;width:100%;height:100%}
.mappa-img img{object-fit:cover;filter:saturate(.85) brightness(.96)}
.mappa-prev{position:absolute;z-index:2;right:12px;top:12px;max-width:calc(100% - 24px);padding:7px 12px;border-radius:999px;background:rgba(3,1,2,.82);
  color:var(--osso);font-size:12px;line-height:1.35;letter-spacing:.02em}
@media (max-width:520px){.mappa-prev{top:auto;bottom:40px;left:12px;right:12px;text-align:center}}
.mappa iframe{position:absolute;inset:0;z-index:1;width:100%;height:100%;border:0;
  filter:saturate(.85) brightness(.96)}   /* colori di Google appena smorzati, per non stonare col fondo scuro */
@media (max-width:860px){.mappa{aspect-ratio:16/10;min-height:0}}
@media (max-width:520px){.mappa{aspect-ratio:4/5}}

/* ---------- guide (Slow Food, Gambero Rosso) nella sezione "La casa" ---------- */
.guide-wrap{margin-top:40px}
.guide{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:16px}
.guida{display:flex;align-items:center;gap:14px;margin:0;padding:16px;border:1px solid var(--line);border-radius:12px;background:rgba(253,251,231,.03)}
.guida-logo{display:grid;place-items:center;flex:none;width:64px;height:64px;border-radius:10px;border:1px solid var(--line-strong);color:var(--oro)}
.guida-logo svg{width:30px;height:30px}
.guida-logo.has-img{border:0;background:none;padding:0}
.guida-logo.has-img img{width:100%;height:100%;object-fit:contain}
.guida-logo.su-chiaro{width:86px;background:#fff;padding:7px 9px}   /* loghi su fondo bianco (es. Slow Food) */
.guida figcaption{display:grid;gap:4px}
.guida strong{font-family:var(--f-display);font-weight:400;font-size:clamp(19px,1.6vw,22px);line-height:1.15;color:var(--osso)}
.guida figcaption > span{font-size:13px;line-height:1.4;color:var(--polvere)}
.guida-anni{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px}
.guida-anni b{font-weight:600;font-size:12px;letter-spacing:.04em;padding:2px 7px;border-radius:999px;border:1px solid rgba(242,183,7,.5);color:var(--oro)}
@media (max-width:600px){.guide{grid-template-columns:minmax(0,1fr)}}

/* pulsante ▶ del video della cantina: compare solo se il telefono blocca la partenza automatica */
.vh-play{position:absolute;left:50%;top:50%;z-index:3;transform:translate(-50%,-50%);display:grid;place-items:center;width:72px;height:72px;border-radius:50%;border:1px solid rgba(253,251,231,.5);background:rgba(3,1,2,.45);color:var(--osso);cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.vh-play svg{width:28px;height:28px;margin-left:4px}
.vh-play[hidden]{display:none}
.vh-seq{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1}

/* video della cantina sul computer: intero, sotto il menù, appoggiato in basso a destra (le bottiglie non si tagliano) */
@media (min-aspect-ratio:1/1) and (min-width:760px){
  .vini-hero{--vh-alto:clamp(84px,11vh,124px)}
  .vh-media video,.vh-media .vh-seq{top:auto;bottom:0;left:0;right:0;width:100%;height:calc(100% - var(--vh-alto));object-fit:contain;object-position:100% 100%}
  .fx .vh-media[data-fx="img"] > video{transform:scale(calc(1.05 - var(--e) * .05));transform-origin:100% 100%}
}