/* ============================================================
   VINI E VECCHI SAPORI — Firenze
   «Scritto a mano, ogni giorno.»
   Design system: carta, inchiostro, timbri, cartoline.
   ============================================================ */

/* Font self-hosted (subset latin, variabili). display:block: il preloader copre l'attesa,
   il testo appare direttamente col carattere giusto — niente swap, niente salti di layout. */
@font-face{font-family:"Fraunces";font-style:normal;font-weight:300 900;font-display:block;src:url("../fonts/fraunces.woff2") format("woff2")}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:300 900;font-display:block;src:url("../fonts/fraunces-italic.woff2") format("woff2")}
@font-face{font-family:"Caveat";font-style:normal;font-weight:400 700;font-display:block;src:url("../fonts/caveat.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:block;src:url("../fonts/plexmono-400.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:block;src:url("../fonts/plexmono-500.woff2") format("woff2")}

:root{
  --paper:#F5EFE2;
  --paper-deep:#EDE4CF;
  --rosa:#F0DAC6;
  --rosa-deep:#E8CDB4;
  --ink:#271A10;
  --ink-soft:#57422C;
  --ink-faint:#75604A;
  --chianti:#7E2733;
  --chianti-deep:#5E1B25;
  --giallo:#D9A441;
  --oliva:#5C5B35;
  --notte:#171009;
  --cream:#F7F1E4;
  --line:rgba(39,26,16,.16);
  --shadow-card:0 1px 2px rgba(39,26,16,.10), 0 12px 32px -12px rgba(39,26,16,.28);
  --f-display:"Fraunces",Georgia,serif;
  --f-hand:"Caveat","Segoe Script",cursive;
  --f-mono:"IBM Plex Mono","Courier New",monospace;
  --ease-out:cubic-bezier(.19,1,.22,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --gutter:clamp(1.25rem,4vw,4rem);
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:clip}
html:focus-within{scroll-behavior:smooth}
body{
  font-family:var(--f-display);
  font-optical-sizing:auto;
  font-weight:400;
  background:var(--paper);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--chianti);color:var(--cream)}
:focus-visible{outline:2px solid var(--chianti);outline-offset:3px;border-radius:2px}

/* Grana della carta, su tutto */
body::before{
  content:"";position:fixed;inset:-10%;z-index:2000;pointer-events:none;
  background-image:var(--noise);background-size:140px;
  opacity:.16;mix-blend-mode:multiply;
}
@media (max-width:820px){ /* su mobile niente blend: raster più leggero, stessa grana */
  body::before{mix-blend-mode:normal;opacity:.08}
}

.skip{position:fixed;left:1rem;top:-4rem;z-index:3000;background:var(--ink);color:var(--cream);
  padding:.6rem 1rem;border-radius:4px;transition:top .2s;font-family:var(--f-mono);font-size:.8rem}
.skip:focus{top:1rem}

/* ============ PRELOADER ============ */
#loader{
  position:fixed;inset:0;z-index:2500;background:var(--paper);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;
  transition:transform .9s var(--ease-out), visibility 0s .9s;
}
#loader.done{transform:translateY(-101%);visibility:hidden}
#loader .l-hand{
  font-family:var(--f-hand);font-size:clamp(2.2rem,7vw,4.2rem);color:var(--ink);
  white-space:nowrap;
  clip-path:inset(-10% 100% -10% 0); /* niente layout shift: si anima solo il ritaglio */
  animation:write 1.15s .15s var(--ease-out) forwards;
}
#loader .l-sub{
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.35em;text-transform:uppercase;
  color:var(--ink-soft);opacity:0;animation:fadein .5s 1.05s forwards;
}
#loader .l-date{font-family:var(--f-hand);font-size:1.15rem;color:var(--chianti);
  opacity:0;animation:fadein .5s 1.25s forwards}
@keyframes write{to{clip-path:inset(-10% 0 -10% 0)}}
@keyframes fadein{to{opacity:1}}

/* ============ CURSORE PENNINO ============ */
@media (pointer:fine){
  html.inkcursor, html.inkcursor a, html.inkcursor button, html.inkcursor summary,
  html.inkcursor [role=button], html.inkcursor img{cursor:none}
  #nib{
    position:fixed;z-index:2600;left:0;top:0;width:10px;height:10px;border-radius:50%;
    background:var(--ink);pointer-events:none;mix-blend-mode:multiply;opacity:0;
    transform:translate(-50%,-50%);transition:width .25s,height .25s,background .25s,opacity .3s;
  }
  #nib.live{opacity:1}
  #nib.hot{width:38px;height:38px;background:rgba(126,39,51,.22);
    border:1.5px solid var(--chianti)}
  /* width/height espliciti obbligatori: il canvas è un elemento sostituito, quindi
     inset:0 non lo stira — senza queste due misure prende la dimensione dei propri
     attributi (viewport × devicePixelRatio) e la scia si disegna lontana dal cursore. */
  #ink{position:fixed;inset:0;width:100%;height:100%;z-index:2590;pointer-events:none;mix-blend-mode:multiply}
}
@media (pointer:coarse){#nib,#ink{display:none}}

/* ============ HEADER ============ */
header.top{
  position:fixed;inset:0 0 auto 0;z-index:1000;
  display:flex;align-items:center;gap:1.5rem;
  padding:.9rem var(--gutter);
  transition:background .35s,box-shadow .35s,padding .35s;
}
header.top::before{ /* sfondo sfocato su pseudo-elemento: non crea containing block per la nav fixed */
  content:"";position:absolute;inset:0;z-index:-2;opacity:0;transition:opacity .35s;
  background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
header.top.scrolled{box-shadow:0 1px 0 var(--line);padding:.55rem var(--gutter)}
header.top.scrolled::before{opacity:1}
.brand{display:flex;align-items:baseline;gap:.6rem;text-decoration:none}
.brand .sigil{
  font-family:var(--f-display);font-weight:900;font-size:1.35rem;line-height:1;
  color:var(--cream);background:var(--chianti);width:2.1rem;height:2.1rem;border-radius:50%;
  display:grid;place-items:center;align-self:center;
  font-style:italic;box-shadow:inset 0 0 0 1.5px rgba(247,241,228,.35);
}
.brand .name{font-weight:700;font-size:1.02rem;letter-spacing:.01em;white-space:nowrap}
.brand .name em{font-style:italic;font-weight:400}
nav.main{margin-left:auto;display:flex;gap:1.6rem;align-items:center}
nav.main a{
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;color:var(--ink-soft);position:relative;padding:.3rem 0;
}
nav.main a::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:var(--chianti);transform:scaleX(0);transform-origin:right;
  transition:transform .35s var(--ease-out);
}
nav.main a:hover{color:var(--ink)}
nav.main a:hover::after{transform:scaleX(1);transform-origin:left}
.head-call{
  font-family:var(--f-mono);font-size:.78rem;letter-spacing:.05em;text-decoration:none;
  background:var(--ink);color:var(--cream);padding:.55rem .95rem;border-radius:99px;
  display:inline-flex;gap:.45rem;align-items:center;white-space:nowrap;
  transition:background .25s,transform .25s;
}
.head-call:hover{background:var(--chianti);transform:translateY(-1px)}
.lang{display:flex;border:1px solid var(--line);border-radius:99px;overflow:hidden}
.lang button{
  font-family:var(--f-mono);font-size:.68rem;padding:.42rem .7rem;letter-spacing:.08em;
  color:var(--ink-soft);transition:.25s;
}
.lang button[aria-pressed=true]{background:var(--ink);color:var(--cream)}
#menuToggle{display:none}

/* mobile nav */
@media (max-width:960px){
  nav.main{
    position:fixed;inset:0;height:100dvh;background:var(--paper);flex-direction:column;justify-content:center;
    align-items:center;gap:2.2rem;transform:translateY(-102%);z-index:-1;
    visibility:hidden;transition:transform .5s var(--ease-out),visibility 0s .5s;
  }
  nav.main.open{visibility:visible;transition:transform .5s var(--ease-out)}
  nav.main.open{transform:none}
  nav.main a{font-size:1rem}
  #menuToggle{
    display:grid;place-items:center;width:2.4rem;height:2.4rem;margin-left:auto;
  }
  #menuToggle span,#menuToggle span::before,#menuToggle span::after{
    content:"";display:block;width:22px;height:2px;background:var(--ink);position:relative;
    transition:.3s;
  }
  #menuToggle span::before{position:absolute;top:-7px}
  #menuToggle span::after{position:absolute;top:7px}
  #menuToggle[aria-expanded=true] span{background:transparent}
  #menuToggle[aria-expanded=true] span::before{top:0;transform:rotate(45deg)}
  #menuToggle[aria-expanded=true] span::after{top:0;transform:rotate(-45deg)}
  .head-call .t{display:none}
  header.top{gap:.8rem}
  .lang{margin-left:auto}
  #menuToggle{margin-left:0}
}

/* ============ HERO ============ */
.hero{
  position:relative;min-height:100svh;display:flex;flex-direction:column;
  justify-content:center;padding:7rem var(--gutter) 4.5rem;overflow:hidden;
}
.hero-date{
  position:absolute;top:5.2rem;right:var(--gutter);text-align:right;
  font-family:var(--f-hand);font-size:clamp(1.2rem,2.4vw,1.7rem);color:var(--ink-soft);
  transform:rotate(2deg);
}
.hero-date .d2{color:var(--chianti)}
.hero-eyebrow{
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.4em;text-transform:uppercase;
  color:var(--ink-soft);display:flex;align-items:center;gap:1rem;margin-bottom:1.4rem;
}
.hero-eyebrow::before{content:"";width:3.2rem;height:1px;background:var(--ink-soft)}
h1.hero-title{
  font-weight:900;line-height:.92;letter-spacing:-.015em;
  font-size:clamp(3.4rem,11.5vw,9.8rem);
  text-wrap:balance;max-width:12ch;
}
h1.hero-title .row{display:block;overflow:hidden}
h1.hero-title .row>span{display:inline-block;transform:translateY(110%);
  transition:transform 1s var(--ease-out)}
body.ready h1.hero-title .row>span{transform:none}
h1.hero-title .row:nth-child(2)>span{transition-delay:.08s}
h1.hero-title .row:nth-child(3)>span{transition-delay:.16s}
h1.hero-title .row.mid{font-size:.42em;line-height:1.15;padding-left:.06em;margin-block:.1em}
h1.hero-title em{
  font-style:italic;font-weight:300;letter-spacing:0;color:var(--ink-soft);
}
h1.hero-title .swash{position:relative;display:inline-block}
h1.hero-title .swash svg{
  position:absolute;left:-2%;bottom:-.12em;width:104%;height:.24em;overflow:visible;
}
h1.hero-title .swash path{
  fill:none;stroke:var(--chianti);stroke-width:7;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:1;
}
body.ready h1.hero-title .swash path{animation:draw 1s 1s var(--ease-out) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.hero-sub{
  margin-top:2rem;max-width:44ch;font-size:clamp(1.05rem,1.6vw,1.3rem);
  color:var(--ink-soft);text-wrap:pretty;
}
.hero-sub strong{color:var(--ink);font-weight:600}
.hero-cta{display:flex;gap:.9rem;margin-top:2.4rem;flex-wrap:wrap;align-items:center}

.btn{
  --bg:var(--chianti);
  position:relative;display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--f-mono);font-size:.85rem;letter-spacing:.04em;text-decoration:none;
  background:var(--bg);color:var(--cream);padding:1rem 1.6rem;border-radius:99px;
  overflow:hidden;transition:transform .3s var(--ease-spring),box-shadow .3s;
  box-shadow:0 10px 24px -12px rgba(94,27,37,.7);
}
.btn::after{
  content:"";position:absolute;inset:0;background:var(--chianti-deep);
  clip-path:circle(0% at 50% 120%);transition:clip-path .5s var(--ease-out);
}
.btn:hover{transform:translateY(-2px)}
.btn:hover::after{clip-path:circle(140% at 50% 100%)}
.btn>*{position:relative;z-index:1}
.btn-ghost{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--f-mono);font-size:.85rem;letter-spacing:.04em;text-decoration:none;
  color:var(--ink);padding:1rem 1.6rem;border-radius:99px;border:1.5px solid var(--ink);
  position:relative;overflow:hidden;transition:color .35s,transform .3s var(--ease-spring);
}
.btn-ghost::after{
  content:"";position:absolute;inset:0;background:var(--ink);
  transform:scaleY(0);transform-origin:bottom;transition:transform .35s var(--ease-out);
}
.btn-ghost:hover{color:var(--cream);transform:translateY(-2px)}
.btn-ghost:hover::after{transform:scaleY(1)}
.btn-ghost>*{position:relative;z-index:1}

.hero-note{font-family:var(--f-hand);font-size:1.25rem;color:var(--chianti);transform:rotate(-1.5deg)}

/* polaroid galleggianti */
.hero-floats{position:absolute;inset:0;pointer-events:none;z-index:-1}
.pol{
  position:absolute;background:#fff;padding:.55rem .55rem 2.1rem;
  box-shadow:var(--shadow-card);width:clamp(150px,17vw,250px);
  transform:rotate(var(--r,3deg));
}
.pol img{aspect-ratio:1/1.05;object-fit:cover;filter:saturate(1.05) contrast(1.02)}
.pol .cap{
  position:absolute;left:0;right:0;bottom:.4rem;text-align:center;
  font-family:var(--f-hand);font-size:1.05rem;color:var(--ink-soft);
}
.pol::before{
  content:"";position:absolute;top:-11px;left:50%;transform:translateX(-50%) rotate(var(--tr,-2deg));
  width:76px;height:24px;background:rgba(214,186,132,.6);
  box-shadow:0 1px 3px rgba(39,26,16,.15);
}
.hero .p1{top:21%;right:13%;--r:4deg}
.hero .p2{bottom:22%;right:5%;--r:-5deg;--tr:3deg}
.hero .p3{bottom:5%;right:26%;--r:2deg;display:none}
@media (min-width:1200px){.hero .p3{display:block}}
@media (max-width:820px){
  .hero{padding-top:8.5rem}
  .hero-floats{position:relative;inset:auto;display:flex;gap:1rem;margin-top:3rem;z-index:0}
  .pol{position:static;width:46%;max-width:230px}
  .hero .p3{display:none}
  .hero-date{top:4.4rem;right:var(--gutter)}
}

/* nastro marquee */
.marquee{
  position:relative;border-block:1.5px solid var(--ink);
  background:var(--rosa);overflow:hidden;padding:.85rem 0;
  transform:rotate(-1.1deg) scale(1.02);margin-block:-.5rem .5rem;z-index:5;
}
.marquee .track{display:flex;gap:3.5rem;width:max-content;animation:mq 36s linear infinite}
.marquee span{
  font-family:var(--f-mono);font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink);white-space:nowrap;display:inline-flex;align-items:center;gap:3.5rem;
}
.marquee b{color:var(--chianti);font-weight:500}
@keyframes mq{to{transform:translateX(-50%)}}

/* ============ SEZIONI base ============ */
section{position:relative}
.wrap{max-width:1200px;margin-inline:auto;padding:clamp(4.5rem,9vw,8.5rem) var(--gutter)}
.label{
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.38em;text-transform:uppercase;
  color:var(--chianti);display:flex;align-items:center;gap:1rem;margin-bottom:1.3rem;
}
.label::before{content:"";width:2.6rem;height:1px;background:currentColor;flex:none}
h2.t{
  font-weight:800;letter-spacing:-.015em;line-height:1.02;
  font-size:clamp(2.3rem,5.6vw,4.6rem);max-width:16ch;text-wrap:balance;
}
h2.t em{font-style:italic;font-weight:300}
.lead{margin-top:1.3rem;max-width:52ch;color:var(--ink-soft);font-size:clamp(1rem,1.35vw,1.18rem);text-wrap:pretty}
.hand{font-family:var(--f-hand);color:var(--chianti)}

/* reveal system */
[data-rv]{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
[data-rv].in{opacity:1;transform:none}
[data-rv="stamp"]{transform:scale(1.5) rotate(-7deg);filter:blur(3px)}
[data-rv="stamp"].in{transform:scale(1) rotate(var(--sr,-2deg));filter:none;
  transition:all .45s cubic-bezier(.2,1.4,.4,1)}
[data-rv="left"]{transform:translateX(-34px)}
[data-rv="right"]{transform:translateX(34px)}
[data-rv="left"].in,[data-rv="right"].in{transform:none}

/* macchie di vino */
.stain{position:absolute;border-radius:50%;pointer-events:none;
  border:10px solid rgba(126,39,51,.08);filter:blur(1px)}
.stain::after{content:"";position:absolute;inset:-18px;border-radius:50%;
  border:2px solid rgba(126,39,51,.06)}

/* ============ FIDUCIA ============ */
.trust{border-block:1px solid var(--line);background:var(--paper-deep)}
.trust .wrap{padding-block:1.4rem;display:flex;flex-wrap:wrap;gap:1rem 2.8rem;
  align-items:center;justify-content:center}
.trust span{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-soft);display:flex;gap:.5rem;align-items:center}
.trust b{color:var(--ink);font-weight:600}
.trust .star{color:var(--chianti)}

/* ============ MANIFESTO NO ============ */
.rules{background:var(--paper)}
.rules .wrap{max-width:1200px}
.no-list{margin-top:3rem;display:flex;flex-direction:column;gap:.4rem}
.no{
  display:flex;align-items:baseline;gap:clamp(.8rem,3vw,2rem);
  font-weight:900;font-size:clamp(2rem,6.4vw,5.3rem);line-height:1.04;
  letter-spacing:-.02em;text-transform:uppercase;
  border-bottom:1px solid var(--line);padding-block:.4rem;
}
.no .x{
  font-family:var(--f-hand);color:var(--chianti);font-size:.62em;
  transform:rotate(-6deg);flex:none;font-weight:700;
}
.no small{
  margin-left:auto;font-family:var(--f-mono);font-weight:400;font-size:clamp(.82rem,1.35vw,1rem);
  letter-spacing:.01em;text-transform:none;color:var(--ink-soft);text-align:right;flex:none;
}
@media (max-width:640px){
  .no{flex-wrap:wrap;row-gap:.1rem}
  .no small{flex-basis:100%}
}
.rules .why{
  margin-top:2.6rem;display:grid;gap:1.2rem;grid-template-columns:1fr;max-width:60ch;
}
.rules .why p{color:var(--ink-soft);font-size:1.08rem}
.rules .why .hand{font-size:1.5rem;transform:rotate(-1deg);display:inline-block}

.stamp{ /* inchiostro pieno: la grana della carta (body::before) basta a "consumarlo" */
  display:inline-block;font-family:var(--f-mono);font-weight:500;
  font-size:clamp(.82rem,1.5vw,1rem);letter-spacing:.2em;text-transform:uppercase;
  color:var(--chianti);border:3px double var(--chianti);border-radius:6px;
  padding:.6rem 1.15rem;transform:rotate(var(--sr,-2deg));
  background:rgba(126,39,51,.06);
}

/* ============ STORIA ============ */
.story{background:var(--rosa);overflow:clip}
.story::after{ /* bordo strappato in basso */
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:26px;background:var(--paper);
  clip-path:polygon(0 62%,2.5% 30%,5% 66%,8% 34%,11% 70%,14% 38%,17% 64%,20% 30%,23% 62%,26% 36%,29% 70%,32% 32%,35% 60%,38% 34%,41% 68%,44% 30%,47% 62%,50% 38%,53% 68%,56% 32%,59% 62%,62% 36%,65% 70%,68% 30%,71% 64%,74% 34%,77% 66%,80% 30%,83% 62%,86% 38%,89% 70%,92% 34%,95% 64%,98% 32%,100% 60%,100% 100%,0 100%);
}
.story .grid{
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2.5rem,6vw,5.5rem);
  margin-top:3.4rem;align-items:start;
}
@media (max-width:920px){.story .grid{grid-template-columns:1fr}}
.thread{position:relative;padding-left:3.2rem}
.thread svg.wire{position:absolute;left:.65rem;top:.4rem;height:calc(100% - .8rem);width:2.2rem;overflow:visible}
.thread svg.wire path{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round}
.ep{position:relative;padding-bottom:2.6rem}
.ep:last-child{padding-bottom:0}
.ep .dot{
  position:absolute;left:-3.2rem;top:.4rem;width:1.3rem;height:1.3rem;margin-left:.35rem;
  border-radius:50%;background:var(--rosa);border:2px solid var(--ink);z-index:1;
}
.ep .when{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--chianti)}
.ep h3{font-size:clamp(1.35rem,2.6vw,1.9rem);font-weight:700;margin-top:.35rem;letter-spacing:-.01em}
.ep p{color:var(--ink-soft);margin-top:.5rem;max-width:46ch;text-wrap:pretty}
.ep .hand{font-size:1.35rem}
.story .fig{position:sticky;top:14vh}
.story .fig .pol{position:relative;width:min(430px,100%);--r:2.4deg;margin-inline:auto}
.story .fig .pol img{aspect-ratio:4/5}
.story .fig .side-note{
  font-family:var(--f-hand);font-size:1.4rem;color:var(--ink-soft);text-align:center;
  margin-top:1.2rem;transform:rotate(-2deg);
}

/* ============ PIATTI ============ */
.dishes{background:var(--paper)}
.dish-grid{
  margin-top:3.4rem;display:grid;gap:clamp(1.2rem,2.6vw,2.2rem);
  grid-template-columns:repeat(3,1fr);
}
@media (max-width:1020px){.dish-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.dish-grid{grid-template-columns:1fr}}
.dish{
  position:relative;background:#fff;padding:.7rem .7rem 1.1rem;
  box-shadow:var(--shadow-card);transform:rotate(var(--r,0deg));
  transition:transform .45s var(--ease-spring),box-shadow .45s;
}
.dish:nth-child(odd){--r:.7deg}
.dish:nth-child(even){--r:-.8deg}
.dish:hover{transform:rotate(0) translateY(-6px) scale(1.015);
  box-shadow:0 2px 4px rgba(39,26,16,.12),0 26px 48px -18px rgba(39,26,16,.38)}
.dish .ph{overflow:hidden;position:relative}
.dish img{aspect-ratio:4/3.1;object-fit:cover;width:100%;
  transition:transform .8s var(--ease-out);filter:saturate(1.04)}
.dish:hover img{transform:scale(1.06)}
.dish .meta{display:flex;align-items:baseline;gap:.8rem;padding:1rem .45rem .2rem}
.dish h3{font-size:1.22rem;font-weight:700;letter-spacing:-.01em;line-height:1.2}
.dish .pr{margin-left:auto;font-family:var(--f-mono);font-size:.95rem;color:var(--chianti);white-space:nowrap}
.dish .note{padding:0 .45rem;font-family:var(--f-hand);font-size:1.18rem;color:var(--ink-soft)}
.dish .tag{
  position:absolute;top:1.1rem;left:-.55rem;z-index:2;white-space:nowrap;background:var(--chianti);color:var(--cream);
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  padding:.4rem .7rem .4rem .9rem;box-shadow:0 6px 14px -6px rgba(94,27,37,.6);
}
.dish .tag::after{content:"";position:absolute;left:0;bottom:-.5rem;
  border:.28rem solid transparent;border-top-color:var(--chianti-deep);border-right-color:var(--chianti-deep)}
.dishes .after{margin-top:2.8rem;display:flex;gap:1.4rem;align-items:center;flex-wrap:wrap}
.dishes .after .hand{font-size:1.45rem;transform:rotate(-1.6deg)}

/* ============ QUADERNO / MENU PREVIEW ============ */
.notebook{background:var(--paper-deep);border-block:1px solid var(--line)}
.notebook .grid{
  display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(2.5rem,6vw,5rem);
  align-items:center;margin-top:3rem;
}
@media (max-width:920px){.notebook .grid{grid-template-columns:1fr}}
.notebook .real{position:relative;justify-self:center}
.notebook .real .pol{position:relative;width:min(420px,88vw);--r:-2.6deg}
.notebook .real .pol img{aspect-ratio:3/4;object-fit:cover;object-position:top}
.menu-sheet{
  position:relative;background:var(--rosa);padding:clamp(1.6rem,3.5vw,2.8rem);
  box-shadow:var(--shadow-card);transform:rotate(.6deg);
  background-image:linear-gradient(rgba(39,26,16,.035) 1px,transparent 1px);
  background-size:100% 2.1rem;
}
.menu-sheet .ms-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  border-bottom:1.5px solid var(--ink);padding-bottom:.7rem}
.menu-sheet .ms-head .hand{font-size:1.6rem;color:var(--ink)}
.menu-sheet .ms-head .date{font-family:var(--f-hand);font-size:1.25rem;color:var(--chianti)}
.menu-sheet ul{list-style:none;margin-top:1.1rem;display:grid;gap:.55rem}
.menu-sheet li{
  display:flex;align-items:baseline;gap:.7rem;font-family:var(--f-hand);
  font-size:clamp(1.25rem,2.2vw,1.5rem);line-height:1.25;
}
.menu-sheet li .dots{flex:1;border-bottom:1.5px dotted rgba(39,26,16,.4);transform:translateY(-4px)}
.menu-sheet li .pr{font-family:var(--f-mono);font-size:.85em;color:var(--chianti)}
.menu-sheet .ms-foot{margin-top:1.4rem;font-family:var(--f-mono);font-size:.7rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);text-align:center}
.notebook .cta-row{display:flex;gap:1rem;margin-top:2rem;flex-wrap:wrap;align-items:center}

/* ============ BOURDAIN ============ */
.night{background:var(--notte);color:var(--cream)}
.night .wrap{display:grid;grid-template-columns:1fr .9fr;gap:clamp(2.5rem,6vw,5.5rem);align-items:center}
@media (max-width:920px){.night .wrap{grid-template-columns:1fr}}
.night .label{color:var(--giallo)}
.night h2.t{color:var(--cream);font-weight:700}
.night p{color:rgba(247,241,228,.78);max-width:50ch;margin-top:1.2rem;font-size:1.08rem;text-wrap:pretty}
.night .hand{color:var(--giallo);font-size:1.5rem}
.night .glow{position:relative}
.night .glow::before{
  content:"";position:absolute;inset:-18%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(217,164,65,.28),transparent 70%);
  animation:flicker 4.5s ease-in-out infinite;
}
@keyframes flicker{0%,100%{opacity:.85}42%{opacity:1}58%{opacity:.72}}
.night .pol{--r:-2deg;background:#20160c;position:relative}
.night .pol .cap{color:rgba(247,241,228,.75)}
.night .quote{
  margin-top:2rem;padding-left:1.2rem;border-left:2px solid var(--giallo);
  font-style:italic;color:rgba(247,241,228,.85);
}
.night .quote cite{display:block;margin-top:.5rem;font-style:normal;
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(247,241,228,.72)}

/* ============ CARTOLINE (galleria) ============ */
.postcards{background:var(--paper);overflow:hidden}
.postcards .head{display:flex;align-items:end;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.postcards .hint{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.25em;
  text-transform:uppercase;color:var(--ink-soft);display:flex;align-items:center;gap:.7rem}
.postcards .hint svg{width:2.4rem;height:auto}
.strip{
  margin-top:3rem;display:flex;gap:clamp(1.2rem,2.5vw,2rem);overflow-x:auto;
  padding:2rem var(--gutter) 2.6rem;margin-inline:calc(var(--gutter) * -1);
  scroll-snap-type:x proximity;cursor:grab;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  scrollbar-width:none;
}
.strip::-webkit-scrollbar{display:none}
.strip.dragging{cursor:grabbing;scroll-snap-type:none}
.card{
  flex:0 0 auto;width:clamp(240px,30vw,340px);background:#fff;
  padding:.6rem .6rem 2.4rem;box-shadow:var(--shadow-card);
  transform:rotate(var(--r,1.5deg));scroll-snap-align:center;position:relative;
  user-select:none;-webkit-user-drag:none;
}
.card:nth-child(3n){--r:-1.8deg}
.card:nth-child(3n+1){--r:1.4deg}
.card:nth-child(3n+2){--r:-.6deg}
.card img{aspect-ratio:1/1;object-fit:cover;pointer-events:none}
.card .cap{position:absolute;left:.8rem;right:.8rem;bottom:.5rem;display:flex;
  justify-content:space-between;align-items:baseline;gap:.6rem}
.card .cap .hand{font-size:1.2rem;color:var(--ink-soft)}
.card .cap .no{font-family:var(--f-mono);font-size:.62rem;color:var(--ink-faint);
  letter-spacing:.15em;border:none;padding:0;text-transform:none}
.card::before{
  content:"";position:absolute;top:-10px;left:24%;width:70px;height:22px;
  background:rgba(214,186,132,.6);transform:rotate(-3deg);box-shadow:0 1px 3px rgba(39,26,16,.15);
}

/* ============ LIBRO DEGLI OSPITI ============ */
.guestbook{background:var(--rosa-deep);position:relative}
.guestbook::before{
  content:"";position:absolute;left:0;right:0;top:-1px;height:26px;background:var(--paper);
  clip-path:polygon(0 0,100% 0,100% 38%,97% 70%,94% 34%,91% 66%,88% 30%,85% 62%,82% 36%,79% 70%,76% 32%,73% 64%,70% 30%,67% 62%,64% 38%,61% 70%,58% 34%,55% 64%,52% 30%,49% 62%,46% 36%,43% 68%,40% 32%,37% 62%,34% 36%,31% 70%,28% 30%,25% 64%,22% 34%,19% 66%,16% 30%,13% 62%,10% 38%,7% 70%,4% 34%,1.5% 60%,0 40%);
}
.g-grid{margin-top:3.2rem;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,2.5vw,2rem)}
@media (max-width:960px){.g-grid{grid-template-columns:1fr;max-width:560px}}
.g-note{
  background:var(--cream);padding:1.8rem 1.6rem 1.4rem;box-shadow:var(--shadow-card);
  transform:rotate(var(--r,-1deg));display:flex;flex-direction:column;gap:1rem;position:relative;
  background-image:linear-gradient(rgba(39,26,16,.05) 1px,transparent 1px);
  background-size:100% 1.75rem;
}
.g-note:nth-child(2){--r:1.2deg}
.g-note:nth-child(3){--r:-.5deg}
.g-note p{font-family:var(--f-hand);font-size:1.45rem;line-height:1.35;color:var(--ink)}
.g-note footer{margin-top:auto;font-family:var(--f-mono);font-size:.68rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint)}
.g-note .pin{
  position:absolute;top:-9px;left:50%;transform:translateX(-50%);
  width:16px;height:16px;border-radius:50%;background:var(--chianti);
  box-shadow:inset -2px -3px 4px rgba(0,0,0,.35),0 3px 5px rgba(39,26,16,.3);
}
.g-badges{margin-top:2.6rem;display:flex;gap:1rem 2.4rem;flex-wrap:wrap;justify-content:center}
.g-badges span{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft)}
.g-badges b{color:var(--ink)}

/* ============ PRENOTA / INFO ============ */
.book{background:var(--paper)}
.book .grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2.5rem,6vw,5rem);margin-top:3rem;align-items:start}
@media (max-width:920px){.book .grid{grid-template-columns:1fr}}
.tel-giant{
  display:inline-block;font-weight:900;letter-spacing:-.02em;text-decoration:none;
  font-size:clamp(2.6rem,7.5vw,5.6rem);line-height:1;color:var(--chianti);
  border-bottom:4px solid transparent;transition:border-color .3s,transform .3s var(--ease-spring);
  font-variant-numeric:tabular-nums;
}
.tel-giant:hover{border-bottom-color:var(--chianti);transform:translateY(-3px)}
.book .why-call{margin-top:1.6rem;color:var(--ink-soft);max-width:46ch;font-size:1.08rem}
.book .hand-big{font-family:var(--f-hand);font-size:1.6rem;color:var(--chianti);
  display:inline-block;transform:rotate(-1.5deg);margin-top:1.4rem}
.receipt{
  background:var(--cream);font-family:var(--f-mono);box-shadow:var(--shadow-card);
  padding:2rem 1.8rem;position:relative;font-size:.88rem;transform:rotate(.8deg);
  max-width:440px;justify-self:center;width:100%;
}
.receipt::before,.receipt::after{
  content:"";position:absolute;left:0;right:0;height:12px;
  background-image:linear-gradient(45deg,var(--cream) 25%,transparent 25%),linear-gradient(-45deg,var(--cream) 25%,transparent 25%);
  background-size:14px 14px;background-repeat:repeat-x;
}
.receipt::before{top:-11px;transform:rotate(180deg)}
.receipt::after{bottom:-11px}
.receipt h3{font-size:.8rem;letter-spacing:.3em;text-transform:uppercase;text-align:center;font-weight:500}
.receipt .rl{display:flex;justify-content:space-between;gap:1rem;padding:.5rem 0;
  border-bottom:1px dashed rgba(39,26,16,.25)}
.receipt .rl:last-of-type{border:0}
.receipt .rl b{font-weight:600;white-space:nowrap}
.receipt .rl span{text-align:right}
.receipt .div{border-top:1.5px solid var(--ink);margin:1.1rem 0;position:relative}
.receipt .tot{font-size:.95rem;font-weight:600}
.receipt .small{font-size:.7rem;color:var(--ink-faint);text-align:center;margin-top:1.2rem;letter-spacing:.08em}
.receipt .hand{font-size:1.35rem;text-align:center;display:block;margin-top:.6rem;transform:rotate(-2deg)}
.book .actions{display:flex;gap:1rem;margin-top:2.2rem;flex-wrap:wrap}

/* ============ FAQ ============ */
.faq{background:var(--paper-deep);border-top:1px solid var(--line)}
.faq .qs{margin-top:2.8rem;max-width:820px}
.q{border-bottom:1px solid var(--line)}
.q button.qh{
  width:100%;display:flex;align-items:baseline;gap:1.2rem;text-align:left;
  padding:1.4rem .2rem;font-family:var(--f-display);font-size:clamp(1.15rem,2.2vw,1.45rem);
  font-weight:600;letter-spacing:-.01em;transition:color .25s;
}
.q button.qh:hover{color:var(--chianti)}
.q .qn{font-family:var(--f-mono);font-size:.75rem;color:var(--chianti);flex:none;transform:translateY(-2px)}
.q .pm{margin-left:auto;flex:none;width:1.5rem;height:1.5rem;position:relative}
.q .pm::before,.q .pm::after{content:"";position:absolute;background:var(--ink);left:50%;top:50%;transition:transform .35s var(--ease-out)}
.q .pm::before{width:14px;height:1.8px;transform:translate(-50%,-50%)}
.q .pm::after{width:1.8px;height:14px;transform:translate(-50%,-50%)}
.q[data-open] .pm::after{transform:translate(-50%,-50%) scaleY(0)}
.q .qa{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease-out)}
.q[data-open] .qa{grid-template-rows:1fr}
.q .qa>div{overflow:hidden}
.q .qa p{padding:0 .2rem 1.5rem;color:var(--ink-soft);max-width:62ch;text-wrap:pretty}
.q .qa .hand{font-size:1.3rem}

/* ============ FOOTER ============ */
footer.end{background:var(--ink);color:var(--cream);position:relative;margin-top:0}
footer.end::before{
  content:"";position:absolute;left:0;right:0;top:-1px;height:26px;background:var(--paper-deep);
  clip-path:polygon(0 0,100% 0,100% 30%,97.5% 66%,95% 30%,92% 62%,89% 34%,86% 70%,83% 32%,80% 64%,77% 30%,74% 62%,71% 36%,68% 70%,65% 32%,62% 64%,59% 30%,56% 62%,53% 36%,50% 68%,47% 30%,44% 62%,41% 34%,38% 68%,35% 30%,32% 64%,29% 34%,26% 66%,23% 30%,20% 62%,17% 36%,14% 70%,11% 32%,8% 62%,5% 34%,2.5% 64%,0 36%);
}
footer.end .wrap{padding-block:5.5rem 2.5rem}
.f-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2.5rem}
@media (max-width:960px){.f-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.f-grid{grid-template-columns:1fr}}
.f-brand .hand{font-size:2rem;color:var(--giallo)}
.f-brand p{color:rgba(247,241,228,.6);margin-top:.8rem;max-width:30ch;font-size:.95rem}
footer.end h3{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--giallo);margin-bottom:1.1rem;font-weight:500}
footer.end ul{list-style:none;display:grid;gap:.55rem}
footer.end li,footer.end address{font-style:normal;color:rgba(247,241,228,.78);font-size:.95rem}
footer.end a{text-decoration:none;transition:color .2s}
footer.end a:hover{color:var(--giallo)}
.f-bottom{margin-top:4rem;padding-top:1.6rem;border-top:1px solid rgba(247,241,228,.14);
  display:flex;gap:1rem 2rem;flex-wrap:wrap;align-items:center;
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.12em;color:rgba(247,241,228,.45)}
.f-bottom .sep{flex:1}
.f-bottom a{color:rgba(247,241,228,.6)}

/* ============ STICKY CALL ============ */
#callPill{
  position:fixed;right:1.2rem;bottom:1.2rem;z-index:1500;
  display:flex;align-items:center;gap:.6rem;text-decoration:none;
  background:var(--chianti);color:var(--cream);border-radius:99px;
  padding:.9rem 1.35rem;font-family:var(--f-mono);font-size:.85rem;letter-spacing:.04em;
  box-shadow:0 14px 34px -10px rgba(94,27,37,.75);
  transform:translateY(140%);transition:transform .5s var(--ease-spring),background .25s;
}
#callPill.show{transform:none}
#callPill:hover{background:var(--chianti-deep)}
#callPill .ring{position:relative;width:9px;height:9px;border-radius:50%;background:var(--giallo)}
#callPill .ring::after{content:"";position:absolute;inset:-5px;border-radius:50%;
  border:1.5px solid var(--giallo);animation:ping 1.8s var(--ease-out) infinite}
@keyframes ping{0%{transform:scale(.5);opacity:1}80%,100%{transform:scale(1.6);opacity:0}}
@media (max-width:820px){#callPill{right:.9rem;bottom:.9rem}}

/* ============ PAGINE INTERNE (menu, legal) ============ */
.page-head{padding:9rem var(--gutter) 3rem;max-width:1100px;margin-inline:auto}
.page-head .back{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.2em;
  text-transform:uppercase;text-decoration:none;color:var(--ink-soft);display:inline-flex;gap:.5rem;align-items:center}
.page-head .back:hover{color:var(--chianti)}
.page-head h1{font-weight:900;letter-spacing:-.02em;line-height:1;
  font-size:clamp(2.8rem,8vw,6rem);margin-top:1.4rem}
.page-head .sub{margin-top:1.2rem;color:var(--ink-soft);max-width:52ch;font-size:1.1rem}

.menu-full{max-width:1100px;margin-inline:auto;padding:0 var(--gutter) 6rem}
.menu-day{
  background:var(--rosa);box-shadow:var(--shadow-card);position:relative;
  padding:clamp(1.8rem,5vw,4rem);transform:rotate(.35deg);
  background-image:linear-gradient(rgba(39,26,16,.035) 1px,transparent 1px);
  background-size:100% 2.2rem;
}
.menu-day .m-date{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem;
  align-items:baseline;border-bottom:2px solid var(--ink);padding-bottom:1rem}
.menu-day .m-date .hand{font-size:clamp(1.7rem,4vw,2.4rem);color:var(--ink)}
.menu-day .m-date .today{font-family:var(--f-hand);font-size:1.4rem;color:var(--chianti)}
.m-sec{margin-top:2.6rem;break-inside:avoid}
.m-sec h2{
  font-family:var(--f-hand);font-weight:700;font-size:clamp(1.9rem,3.6vw,2.6rem);
  color:var(--chianti);text-transform:capitalize;display:flex;align-items:center;gap:1.2rem;
}
.m-sec h2::after{content:"";flex:1;border-bottom:1.5px solid rgba(39,26,16,.3)}
.m-sec ul{list-style:none;margin-top:1.1rem;display:grid;gap:.7rem;grid-template-columns:1fr 1fr;column-gap:3rem}
@media (max-width:820px){.m-sec ul{grid-template-columns:1fr}}
.m-sec li{display:flex;align-items:baseline;gap:.7rem;font-family:var(--f-hand);
  font-size:clamp(1.3rem,2.2vw,1.55rem);line-height:1.3}
.m-sec li .en{display:block;font-family:var(--f-display);font-style:italic;font-size:.68em;color:var(--ink-faint)}
.m-sec li .nm{display:flex;flex-direction:column}
.m-sec li .dots{flex:1;border-bottom:1.5px dotted rgba(39,26,16,.4);transform:translateY(-6px);min-width:2rem}
.m-sec li .pr{font-family:var(--f-mono);font-size:.8em;color:var(--chianti);white-space:nowrap}
.menu-day .m-no{
  margin-top:3.2rem;padding-top:1.6rem;border-top:2px solid var(--ink);
  display:flex;flex-wrap:wrap;gap:.7rem 1.6rem;justify-content:center;
}
.menu-day .m-no span{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink)}
.menu-day .m-no b{color:var(--chianti)}
.menu-day .m-heart{margin-top:1.2rem;text-align:center;font-family:var(--f-hand);
  font-size:1.35rem;color:var(--chianti)}
.menu-note{margin:2.6rem auto 0;max-width:60ch;text-align:center;color:var(--ink-soft)}
.menu-cta{display:flex;justify-content:center;gap:1rem;margin-top:2.4rem;flex-wrap:wrap}

.legal{max-width:760px;margin-inline:auto;padding:0 var(--gutter) 6rem}
.legal h2{font-size:1.5rem;margin:2.4rem 0 .8rem}
.legal p,.legal li{color:var(--ink-soft)}
.legal ul{padding-left:1.2rem}

/* ============ VARIE ============ */
.sr-only{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden;white-space:nowrap}
.float{will-change:transform}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.15s!important}
  [data-rv]{opacity:1;transform:none;filter:none}
  .marquee .track{animation:none;width:auto}
  #loader{display:none}
  h1.hero-title .row>span{transform:none}
  h1.hero-title .swash path{stroke-dashoffset:0;animation:none}
  #nib,#ink{display:none}
  html.inkcursor,html.inkcursor a,html.inkcursor button{cursor:auto}
}