/* =====================================================================
   GustaPizza — Design System
   Concept: "L'Oltrarno a forma di cuore"
   Palette: carta toscana · pomodoro · basilico · oro-semola (luce diurna)
   Type: Bricolage Grotesque (display) + Figtree (text)
   Regole: scroll nativo, GPU-only (transform/opacity), reduced-motion safe
   ===================================================================== */

/* ---------- Tokens ---------- */
:root{
  /* colori */
  --paper:      #F7F0E4;   /* carta toscana, luce del giorno */
  --paper-2:    #FBF7EE;   /* carta più chiara */
  --cream:      #FFF7E9;   /* crema mozzarella */
  --ink:        #241B14;   /* cornicione bruciato (testo) */
  --ink-soft:   #4A3B2E;   /* testo secondario */
  --tomato:     #E23A2E;   /* San Marzano — accento/CTA */
  --tomato-deep:#BF2A20;
  --basil:      #3F7D52;   /* basilico */
  --basil-deep: #2C5A3B;
  --crust:      #E7A44A;   /* oro-semola */
  --crust-deep: #C6832F;
  --line:       #E4D8C4;   /* bordi caldi */
  --line-strong:#D6C6AB;

  --bg: var(--paper);
  --fg: var(--ink);

  /* tipografia */
  --serif: 'Bricolage Grotesque', ui-serif, Georgia, serif;
  --sans:  'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* scala fluida */
  --step--1: clamp(0.82rem, 0.78rem + 0.2vw, 0.94rem);
  --step-0:  clamp(1rem, 0.95rem + 0.25vw, 1.16rem);
  --step-1:  clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
  --step-2:  clamp(1.5rem, 1.3rem + 1vw, 2.2rem);
  --step-3:  clamp(2rem, 1.6rem + 2vw, 3.4rem);
  --step-4:  clamp(2.6rem, 1.9rem + 3.4vw, 5rem);
  --step-5:  clamp(3.4rem, 2rem + 6.4vw, 8.5rem);
  --step-6:  clamp(4rem, 1.5rem + 11vw, 12rem);

  /* spazio */
  --sp-1: 0.5rem; --sp-2: 1rem; --sp-3: 1.5rem; --sp-4: 2.5rem;
  --sp-5: 4rem;   --sp-6: 6rem; --sp-7: 9rem;
  --container: 1240px;
  --radius: 18px;
  --radius-lg: 32px;

  /* ombre calde */
  --shadow-sm: 0 2px 8px rgba(60,40,20,.08);
  --shadow:    0 18px 44px -18px rgba(70,45,20,.28);
  --shadow-lg: 0 40px 80px -30px rgba(70,45,20,.40);

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:auto; }
body{
  font-family:var(--sans);
  font-size:var(--step-0);
  line-height:1.65;
  color:var(--fg);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; background:none; border:none; }
ul{ list-style:none; padding:0; }
:focus-visible{ outline:3px solid var(--tomato); outline-offset:3px; border-radius:6px; }
::selection{ background:var(--tomato); color:var(--cream); }

/* paper texture, leggerissima, GPU-free */
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(1200px 700px at 80% -10%, rgba(231,164,74,.20), transparent 60%),
    radial-gradient(900px 600px at -10% 20%, rgba(63,125,82,.10), transparent 55%),
    var(--paper);
}
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background-image:radial-gradient(rgba(120,90,50,.05) 1px, transparent 1px);
  background-size:4px 4px;
}

/* ---------- Tipografia ---------- */
h1,h2,h3,h4{ font-family:var(--serif); font-weight:800; line-height:1.02;
  letter-spacing:-.02em; color:var(--ink); }
h2{ font-size:var(--step-4); }
h3{ font-size:var(--step-2); }
.display{ font-size:var(--step-6); line-height:.9; letter-spacing:-.04em; }
.eyebrow{
  font-family:var(--sans); font-weight:700; text-transform:uppercase;
  letter-spacing:.24em; font-size:var(--step--1); color:var(--tomato);
  display:inline-flex; align-items:center; gap:.6em;
}
.eyebrow::before{ content:""; width:26px; height:2px; background:var(--tomato); display:inline-block; }
.serif-italic{ font-style:italic; }
.lead{ font-size:var(--step-1); color:var(--ink-soft); max-width:56ch; }
.text-tomato{ color:var(--tomato); }
.text-basil{ color:var(--basil-deep); }

/* ---------- Layout ---------- */
.container{ width:min(100% - 2.5rem, var(--container)); margin-inline:auto; }
.section{ padding-block:clamp(4rem, 8vw, 9rem); position:relative; }
.section--tight{ padding-block:clamp(3rem,5vw,5rem); }
.section--ink{ background:var(--ink); color:var(--cream); }
.section--ink h2,.section--ink h3{ color:var(--cream); }
.section--basil{ background:var(--basil-deep); color:var(--cream); }
.section--basil h2,.section--basil h3{ color:var(--cream); }
.grid{ display:grid; gap:clamp(1.5rem,3vw,3rem); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.split{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,5rem); align-items:center; }

/* ---------- Bottoni ---------- */
.btn{
  --_bg:var(--tomato); --_fg:var(--cream);
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  padding:.95em 1.6em; min-height:48px;
  background:var(--_bg); color:var(--_fg);
  border-radius:100px; font-weight:700; font-size:var(--step-0);
  letter-spacing:.01em; position:relative; overflow:hidden;
  transition:transform .35s var(--ease-out), box-shadow .35s var(--ease-out), background .3s;
  box-shadow:var(--shadow-sm); will-change:transform;
}
.btn svg{ width:1.15em; height:1.15em; }
.btn:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.btn:active{ transform:translateY(-1px) scale(.99); }
.btn--ghost{ --_bg:transparent; --_fg:var(--ink); border:1.5px solid var(--line-strong); box-shadow:none; }
.btn--ghost:hover{ border-color:var(--ink); background:var(--cream); }
.btn--basil{ --_bg:var(--basil-deep); }
.btn--light{ --_bg:var(--cream); --_fg:var(--ink); }
.btn--lg{ padding:1.1em 2em; font-size:var(--step-1); }
.link-underline{ position:relative; font-weight:600; }
.link-underline::after{ content:""; position:absolute; left:0; bottom:-3px; width:100%; height:2px;
  background:var(--tomato); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease); }
.link-underline:hover::after{ transform:scaleX(1); }

/* ---------- Loader ---------- */
#loader{
  position:fixed; inset:0; z-index:9999; display:grid; place-items:center;
  background:var(--paper); transition:opacity .6s var(--ease), visibility .6s;
}
#loader.done{ opacity:0; visibility:hidden; }
.loader-mark{ width:96px; height:96px; animation:spin 1.6s linear infinite; }
.loader-mark .slice{ transform-origin:50% 50%; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.loader-txt{ margin-top:1.2rem; font-family:var(--serif); font-size:var(--step-1);
  letter-spacing:.02em; color:var(--ink); text-align:center; }
.loader-txt small{ display:block; font-family:var(--sans); font-size:var(--step--1);
  letter-spacing:.28em; text-transform:uppercase; color:var(--tomato); margin-top:.4rem; }

/* ---------- Header / Nav ---------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:900;
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem clamp(1.25rem,4vw,2.5rem);
  transition:background .4s var(--ease), box-shadow .4s, padding .4s;
}
.site-header.scrolled{
  background:color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter:blur(14px) saturate(1.3); -webkit-backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:0 1px 0 var(--line); padding-block:.65rem;
}
.brand{ display:flex; align-items:center; gap:.6rem; font-family:var(--serif);
  font-weight:800; font-size:1.35rem; letter-spacing:-.02em; color:var(--ink); }
.brand svg{ width:34px; height:34px; }
.brand b{ color:var(--tomato); }
.nav{ display:flex; align-items:center; gap:clamp(1rem,2.4vw,2.2rem); }
.nav-links{ display:flex; gap:clamp(1rem,2vw,1.8rem); }
.nav-links a{ font-weight:600; font-size:var(--step--1); letter-spacing:.02em;
  position:relative; padding:.3rem 0; }
.nav-links a::after{ content:""; position:absolute; left:0; bottom:-2px; height:2px; width:100%;
  background:var(--tomato); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease); }
.nav-links a:hover::after{ transform:scaleX(1); }

/* toggle lingua */
.lang{ display:inline-flex; border:1.5px solid var(--line-strong); border-radius:100px; overflow:hidden; }
.lang button{ padding:.35rem .7rem; font-size:.78rem; font-weight:700; letter-spacing:.04em; color:var(--ink-soft); }
.lang button[aria-pressed="true"]{ background:var(--ink); color:var(--cream); }

.menu-toggle{ display:none; width:46px; height:46px; border:1.5px solid var(--line-strong);
  border-radius:12px; align-items:center; justify-content:center; }
.menu-toggle span{ display:block; width:20px; height:2px; background:var(--ink); position:relative; }
.menu-toggle span::before,.menu-toggle span::after{ content:""; position:absolute; left:0; width:20px; height:2px; background:var(--ink); transition:.3s var(--ease); }
.menu-toggle span::before{ top:-6px; } .menu-toggle span::after{ top:6px; }
body.nav-open .menu-toggle span{ background:transparent; }
body.nav-open .menu-toggle span::before{ top:0; transform:rotate(45deg); }
body.nav-open .menu-toggle span::after{ top:0; transform:rotate(-45deg); }
.nav-mobile{ display:none; }  /* solo overlay mobile: nascosto su desktop */

/* ---------- Hero ---------- */
.hero{ position:relative; min-height:100svh; display:flex; align-items:center;
  padding-top:6rem; overflow:hidden; }
/* width/height espliciti obbligatori: senza, il canvas si dimensiona dai propri
   attributi (hero × devicePixelRatio) e la polvere finisce fuori dall'hero. */
#flour{ position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }
.hero .container{ position:relative; z-index:2; }
.hero-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:2rem; align-items:center; }
.hero-copy{ max-width:none; }
.hero h1{ font-size:clamp(2.8rem, 5.4vw, 6rem); line-height:.96; letter-spacing:-.03em; }
.hero h1 .row{ display:block; }
.hero h1 .row span{ display:inline-block; max-width:100%; }
.hero h1 em{ font-style:italic; color:var(--tomato); }
.hero-sub{ margin-top:1.6rem; font-size:var(--step-1); color:var(--ink-soft); max-width:34ch; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2rem; }
.hero-meta{ margin-top:2.2rem; display:flex; flex-wrap:wrap; gap:1.4rem 2rem; align-items:center;
  font-size:var(--step--1); color:var(--ink-soft); }
.hero-meta b{ color:var(--ink); }
.hero-meta .dot{ width:7px; height:7px; border-radius:50%; background:var(--basil); display:inline-block; margin-right:.5em; }

/* signature: pizza→cuore */
.pizza-stage{ position:relative; display:grid; place-items:center; aspect-ratio:1; }
#pizzaHeart{ width:min(46vw,520px); height:auto; overflow:visible; cursor:pointer;
  filter:drop-shadow(0 30px 50px rgba(120,70,20,.30)); }
#pizzaHeart .base{ transition:fill .4s; }
.pizza-hint{ position:absolute; bottom:2%; left:50%; transform:translateX(-50%);
  font-size:var(--step--1); color:var(--ink-soft); background:color-mix(in srgb,var(--cream) 80%,transparent);
  padding:.35rem .8rem; border-radius:100px; border:1px solid var(--line); white-space:nowrap; }
.pizza-hint b{ color:var(--tomato); }

/* marquee "sempre pieno" */
.marquee{ overflow:hidden; border-block:1.5px solid var(--ink); background:var(--tomato); color:var(--cream); }
.marquee-track{ display:flex; gap:2.5rem; white-space:nowrap; padding:.7rem 0;
  font-family:var(--serif); font-weight:800; font-size:var(--step-1); letter-spacing:.01em;
  animation:marquee 26s linear infinite; will-change:transform; }
.marquee-track span{ display:inline-flex; align-items:center; gap:2.5rem; }
.marquee .star{ color:var(--crust); }
@keyframes marquee{ to{ transform:translateX(-50%); } }
.marquee:hover .marquee-track{ animation-play-state:paused; }

/* ---------- Reveal ---------- */
[data-reveal]{ opacity:0; transform:translateY(28px); }
[data-reveal].in{ opacity:1; transform:none; transition:opacity .9s var(--ease-out), transform .9s var(--ease-out); }
[data-reveal][data-delay="1"].in{ transition-delay:.08s; }
[data-reveal][data-delay="2"].in{ transition-delay:.16s; }
[data-reveal][data-delay="3"].in{ transition-delay:.24s; }

/* ---------- Cards / immagini ---------- */
.figure{ position:relative; border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow); background:var(--cream); }
.figure img{ width:100%; height:100%; object-fit:cover; }
img.figure{ display:block; width:100%; height:auto; object-fit:cover; }
.figure:not([hidden]) + .ph{ display:none !important; } /* foto attiva → nasconde il placeholder */
/* placeholder elegante (quando manca la foto) */
.ph{ position:relative; aspect-ratio:4/3; border-radius:var(--radius-lg); overflow:hidden;
  display:grid; place-items:center; box-shadow:var(--shadow);
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(255,247,233,.9), transparent 60%),
    linear-gradient(140deg, var(--crust) 0%, var(--tomato) 55%, var(--basil) 130%);
}
.ph--basil{ background:linear-gradient(140deg,var(--basil) 0%, var(--basil-deep) 100%); }
.ph--warm{ background:linear-gradient(140deg,var(--crust) 0%, var(--tomato-deep) 120%); }
.ph--square{ aspect-ratio:1; }
.ph--wide{ aspect-ratio:16/9; }
.ph .ph-ico{ width:34%; max-width:120px; opacity:.9; filter:drop-shadow(0 8px 16px rgba(0,0,0,.2)); }
.ph .ph-cap{ position:absolute; left:1rem; bottom:1rem; font-family:var(--serif); font-weight:700;
  color:var(--cream); font-size:var(--step-0); text-shadow:0 2px 10px rgba(0,0,0,.35); }
.tilt{ transition:transform .5s var(--ease-out); will-change:transform; }

/* story split blocks */
.story{ align-items:center; }
.story .figure,.story .ph{ transform:rotate(-1.2deg); }
.story:nth-child(even) .figure,.story:nth-child(even) .ph{ transform:rotate(1.2deg); }

/* ---------- "Come funziona" steps ---------- */
.steps{ counter-reset:s; }
.step{ display:flex; gap:1.2rem; padding:1.6rem 0; border-top:1.5px solid var(--line); }
.step:last-child{ border-bottom:1.5px solid var(--line); }
.step .num{ counter-increment:s; font-family:var(--serif); font-weight:800; font-size:var(--step-3);
  color:var(--tomato); line-height:1; min-width:2.2ch; }
.step .num::before{ content:counter(s,decimal-leading-zero); }
.step h3{ font-size:var(--step-1); margin-bottom:.2rem; }
.step p{ color:var(--ink-soft); font-size:var(--step-0); }

/* orari / oggi */
.hours{ display:grid; gap:.2rem; }
.hours li{ display:flex; justify-content:space-between; gap:1rem; padding:.55rem .2rem;
  border-bottom:1px dashed var(--line); font-variant-numeric:tabular-nums; }
.hours li.today{ background:var(--cream); border-radius:10px; padding-inline:.7rem; border-bottom-color:transparent;
  box-shadow:inset 0 0 0 1.5px var(--crust); }
.hours li.today .day{ font-weight:800; }
.hours .badge-today{ font-size:.66rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  background:var(--basil-deep); color:var(--cream); padding:.1rem .5rem; border-radius:100px; margin-left:.5rem; }
.hours li.closed{ color:var(--ink-soft); }

/* ---------- Menu preview cards ---------- */
.dish{ background:var(--paper-2); border:1.5px solid var(--line); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column; transition:transform .4s var(--ease-out), box-shadow .4s; }
.dish:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.dish .ph,.dish .figure{ border-radius:0; box-shadow:none; }
.dish-body{ padding:1.1rem 1.2rem 1.3rem; display:flex; flex-direction:column; gap:.35rem; flex:1; }
.dish-body .top{ display:flex; justify-content:space-between; align-items:baseline; gap:.6rem; }
.dish-body h3{ font-size:var(--step-1); }
.dish-body .price{ font-family:var(--serif); font-weight:800; color:var(--tomato); font-size:var(--step-1); white-space:nowrap; }
.dish-body p{ font-size:var(--step--1); color:var(--ink-soft); }

/* badges */
.badges{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.3rem; }
.badge{ font-size:.68rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  padding:.22rem .6rem; border-radius:100px; border:1.5px solid var(--line-strong); color:var(--ink-soft); }
.badge--veg{ color:var(--basil-deep); border-color:color-mix(in srgb,var(--basil) 50%,white); background:color-mix(in srgb,var(--basil) 12%,white); }
.badge--hot{ color:var(--tomato-deep); border-color:color-mix(in srgb,var(--tomato) 45%,white); background:color-mix(in srgb,var(--tomato) 10%,white); }
.badge--star{ color:var(--crust-deep); border-color:color-mix(in srgb,var(--crust) 55%,white); background:color-mix(in srgb,var(--crust) 16%,white); }

/* ---------- Reviews ---------- */
.reviews{ display:grid; gap:1.5rem; grid-template-columns:repeat(3,1fr); }
.review{ background:var(--paper-2); border:1.5px solid var(--line); border-radius:var(--radius);
  padding:1.6rem; display:flex; flex-direction:column; gap:.8rem; }
.section--ink .review{ background:color-mix(in srgb,var(--cream) 6%,transparent); border-color:rgba(255,255,255,.14); color:var(--cream); }
.stars{ color:var(--crust); letter-spacing:.15em; font-size:.95rem; }
.review blockquote{ font-family:var(--serif); font-size:var(--step-1); line-height:1.35; font-weight:500; }
.review cite{ font-style:normal; font-size:var(--step--1); color:var(--ink-soft); font-weight:700; }
.section--ink .review cite{ color:color-mix(in srgb,var(--cream) 75%,transparent); }
.rating-hero{ display:flex; flex-wrap:wrap; align-items:center; gap:1.4rem 2.2rem; }
.rating-hero .big{ font-family:var(--serif); font-size:var(--step-4); font-weight:800; line-height:1; }
.rating-hero .src{ display:flex; align-items:center; gap:.5rem; font-size:var(--step--1); }

/* ---------- FAQ ---------- */
.faq{ max-width:820px; margin-inline:auto; }
.faq-item{ border-bottom:1.5px solid var(--line); }
.faq-q{ width:100%; display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:1.35rem .2rem; text-align:left; font-family:var(--serif); font-weight:700; font-size:var(--step-1); }
.faq-q .ic{ flex:none; width:30px; height:30px; border-radius:50%; border:1.5px solid var(--line-strong);
  display:grid; place-items:center; transition:.35s var(--ease); position:relative; }
.faq-q .ic::before,.faq-q .ic::after{ content:""; position:absolute; background:var(--ink); border-radius:2px; }
.faq-q .ic::before{ width:12px; height:2px; } .faq-q .ic::after{ width:2px; height:12px; transition:transform .35s var(--ease); }
.faq-item.open .faq-q .ic{ background:var(--tomato); border-color:var(--tomato); }
.faq-item.open .faq-q .ic::before,.faq-item.open .faq-q .ic::after{ background:var(--cream); }
.faq-item.open .faq-q .ic::after{ transform:rotate(90deg); }
.faq-a{ overflow:hidden; max-height:0; transition:max-height .4s var(--ease); }
.faq-a p{ padding:0 .2rem 1.4rem; color:var(--ink-soft); max-width:70ch; }

/* ---------- Contatti ---------- */
.map-wrap{ border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow); border:1.5px solid var(--line); background:var(--cream); }
.map-wrap iframe{ width:100%; height:100%; min-height:340px; border:0; display:block; filter:saturate(1.05); }
.info-card{ background:var(--paper-2); border:1.5px solid var(--line); border-radius:var(--radius); padding:1.6rem 1.7rem; }
.info-card h3{ font-size:var(--step-1); margin-bottom:.6rem; }
.info-row{ display:flex; gap:.8rem; padding:.5rem 0; align-items:flex-start; }
.info-row svg{ width:22px; height:22px; flex:none; color:var(--tomato); margin-top:.15rem; }

/* ---------- Sticky CTA mobile ---------- */
.sticky-cta{ position:fixed; left:0; right:0; bottom:0; z-index:850; display:none;
  gap:.6rem; padding:.7rem .8rem calc(.7rem + env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--paper) 90%,transparent);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-top:1.5px solid var(--line); box-shadow:0 -8px 24px rgba(70,45,20,.10); }
.sticky-cta .btn{ flex:1; padding:.85em 1em; min-height:50px; }

/* ---------- Footer ---------- */
.site-footer{ background:var(--ink); color:var(--cream); padding-block:clamp(3rem,6vw,5rem) 2rem; }
.site-footer a{ color:color-mix(in srgb,var(--cream) 85%,transparent); }
.site-footer a:hover{ color:var(--crust); }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2.5rem; }
.footer-grid h4{ color:var(--cream); font-size:var(--step-1); margin-bottom:.9rem; }
.footer-brand{ font-family:var(--serif); font-size:var(--step-3); font-weight:800; letter-spacing:-.02em; }
.footer-brand b{ color:var(--tomato); }
.footer-list li{ padding:.28rem 0; }
.socials{ display:flex; gap:.7rem; margin-top:1rem; }
.socials a{ width:44px; height:44px; border:1.5px solid rgba(255,255,255,.2); border-radius:12px;
  display:grid; place-items:center; transition:.3s var(--ease); }
.socials a:hover{ background:var(--tomato); border-color:var(--tomato); transform:translateY(-3px); }
.socials svg{ width:20px; height:20px; }
.footer-bottom{ margin-top:3rem; padding-top:1.6rem; border-top:1px solid rgba(255,255,255,.14);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; font-size:var(--step--1);
  color:color-mix(in srgb,var(--cream) 70%,transparent); }

/* pill info */
.pill{ display:inline-flex; align-items:center; gap:.5rem; padding:.4rem .9rem; border-radius:100px;
  border:1.5px solid var(--line-strong); font-size:var(--step--1); font-weight:600; background:var(--paper-2); }
.pill svg{ width:16px; height:16px; color:var(--basil); }
.pill--open{ border-color:color-mix(in srgb,var(--basil) 40%,white); }
.pill--open .status-dot{ width:9px; height:9px; border-radius:50%; background:var(--basil); box-shadow:0 0 0 0 rgba(63,125,82,.5); animation:pulse 2.2s infinite; }
.pill--closed .status-dot{ background:var(--tomato); }
@keyframes pulse{ 70%{ box-shadow:0 0 0 8px rgba(63,125,82,0); } 100%{ box-shadow:0 0 0 0 rgba(63,125,82,0); } }

/* ---------- Menu page specifics ---------- */
.menu-hero{ padding-top:8rem; padding-bottom:2rem; }
.menu-controls{ position:sticky; top:70px; z-index:500; display:flex; flex-wrap:wrap; gap:.7rem;
  padding:1rem; background:color-mix(in srgb,var(--paper) 88%,transparent); backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px); border:1.5px solid var(--line); border-radius:var(--radius); margin-bottom:2.5rem; }
.search{ flex:1; min-width:200px; display:flex; align-items:center; gap:.6rem; padding:.6rem 1rem;
  background:var(--paper-2); border:1.5px solid var(--line); border-radius:100px; }
.search svg{ width:18px; height:18px; color:var(--ink-soft); flex:none; }
.search input{ border:none; background:none; width:100%; font-size:var(--step-0); color:var(--ink); }
.search input:focus{ outline:none; }
.filters{ display:flex; flex-wrap:wrap; gap:.5rem; }
.chip{ padding:.55rem 1rem; border-radius:100px; border:1.5px solid var(--line-strong);
  font-size:var(--step--1); font-weight:700; transition:.25s var(--ease); }
.chip[aria-pressed="true"]{ background:var(--ink); color:var(--cream); border-color:var(--ink); }
.chip:hover{ border-color:var(--ink); }
.menu-section{ margin-bottom:3rem; }
.menu-section h2{ font-size:var(--step-3); margin-bottom:.3rem; }
.menu-section .cat-note{ color:var(--ink-soft); margin-bottom:1.5rem; }
.menu-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:.4rem 3rem; }
.mrow{ display:flex; gap:1rem; align-items:baseline; padding:1rem .2rem; border-bottom:1px dashed var(--line); }
.mrow .m-main{ flex:1; }
.mrow .m-name{ font-family:var(--serif); font-weight:700; font-size:var(--step-1); display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.mrow .m-desc{ color:var(--ink-soft); font-size:var(--step--1); margin-top:.1rem; }
.mrow .m-price{ font-family:var(--serif); font-weight:800; color:var(--tomato); font-size:var(--step-1); font-variant-numeric:tabular-nums; }
.mrow.hide{ display:none; }
.no-results{ text-align:center; padding:3rem 1rem; color:var(--ink-soft); display:none; }
.no-results.show{ display:block; }

/* ---------- Gallery mosaic ---------- */
.gallery{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:210px; gap:14px; }
.g-item{ overflow:hidden; border-radius:20px; box-shadow:var(--shadow); margin:0; background:var(--cream); }
.g-item img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease-out); }
.g-item:hover img{ transform:scale(1.06); }
.g-wide{ grid-column:span 2; }
.g-tall{ grid-row:span 2; }
@media (max-width:760px){ .gallery{ grid-template-columns:repeat(2,1fr); grid-auto-rows:150px; } .g-wide{ grid-column:span 2; } }
@media (max-width:420px){ .gallery{ grid-auto-rows:130px; } }

/* dish card image resta quadrata (crop) */
.dish img.figure{ aspect-ratio:1/1; width:100%; height:auto; object-fit:cover; }

/* menu page: lavagna reale */
.menu-figure{ border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow); transform:rotate(1.2deg); border:1.5px solid var(--line); }
.menu-figure img{ width:100%; height:auto; display:block; }

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .hero-grid{ grid-template-columns:1fr; gap:1rem; }
  .hero-copy{ max-width:none; }
  .pizza-stage{ order:-1; max-width:440px; margin-inline:auto; }
  #pizzaHeart{ width:min(70vw,420px); }
  .grid-3,.reviews{ grid-template-columns:1fr 1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:760px){
  .nav-links,.nav .lang.desktop{ display:none; }
  .menu-toggle{ display:inline-flex; }
  .nav-mobile{ position:fixed; inset:0; z-index:899; background:var(--paper);
    display:flex; flex-direction:column; justify-content:center; gap:1.4rem; padding:2rem;
    transform:translateY(-100%); transition:transform .5s var(--ease); }
  body.nav-open .nav-mobile{ transform:none; }
  .nav-mobile a{ font-family:var(--serif); font-size:var(--step-3); font-weight:800; }
  .nav-mobile .lang{ align-self:flex-start; }
  .split,.grid-2,.grid-3,.reviews,.menu-list,.footer-grid{ grid-template-columns:1fr; }
  .story .figure,.story .ph,.story:nth-child(even) .figure,.story:nth-child(even) .ph{ transform:none; }
  .sticky-cta{ display:flex; }
  body{ padding-bottom:76px; }
  .menu-controls{ top:60px; }
  .hero{ min-height:auto; padding-block:7rem 3rem; }
  .marquee-track{ font-size:var(--step-0); }
}
@media (max-width:420px){
  .hero-cta{ flex-direction:column; align-items:stretch; }
  .hero-cta .btn{ width:100%; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important; }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
  .marquee-track{ animation:none; transform:none; }
  #flour{ display:none; }
  .loader-mark{ animation:none; }
}

/* print */
@media print{ .site-header,.sticky-cta,#flour,#loader,.menu-controls{ display:none !important; } body{ padding:0; } }