/* ============================================================
   Fornace — foglio di stile pubblico
   Direzione: forno a legna, sala serale. Carta calda + brace + ottone.
   Display: Fraunces · Testo: Instrument Sans
   ============================================================ */

:root{
  --paper:      #f8f4ec;   /* fondo caldo, chiaro */
  --paper-2:    #f1eadb;   /* superfici/card */
  --paper-line: #e4d9c4;   /* filetti su carta */
  --ink:        #241a14;   /* espresso, testo principale */
  --ink-soft:   #6f6153;   /* testo secondario */
  --forno:      #1c130d;   /* fondo scuro hero/footer */
  --forno-2:    #2a1d13;   /* scuro leggermente più chiaro */
  --ember:      #d1401f;   /* brace, accento primario */
  --ember-deep: #a02c12;   /* brace scura, hover */
  --wine:       #7a2620;   /* accento profondo, link */
  --brass:      #b58a3c;   /* ottone, dettagli fini */
  --cream:      #f4e9d6;   /* testo su scuro */

  --maxw: 1120px;
  --radius: 4px;
  --shadow: 0 18px 50px -28px rgba(28,19,13,.55);

  --f-display: "Fraunces", Georgia, "Times New Roman", serif;
  --f-text: "Instrument Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--f-text);
  font-size:1.0625rem;
  line-height:1.62;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4{
  font-family:var(--f-display);
  font-optical-sizing:auto;
  font-weight:600;
  line-height:1.08;
  letter-spacing:-.01em;
  margin:0 0 .5em;
  color:var(--ink);
}

p{ margin:0 0 1rem; }
a{ color:var(--wine); text-decoration:none; }
a:hover{ color:var(--ember-deep); }
img{ max-width:100%; display:block; }

.wrap{
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:clamp(1.1rem,4vw,2rem);
}

.muted{ color:var(--ink-soft); }

/* etichetta fine: corsivo Fraunces, niente all-caps */
.label{
  font-family:var(--f-display);
  font-style:italic;
  font-weight:500;
  font-size:1.05rem;
  color:var(--wine);
  letter-spacing:.01em;
}

.rule{
  height:1px; border:0;
  background:var(--paper-line);
  margin:0;
}

/* ---------- Bottoni ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem;
  font-family:var(--f-text);
  font-weight:600;
  font-size:.98rem;
  line-height:1;
  padding:.9rem 1.5rem;
  border-radius:var(--radius);
  border:1px solid transparent;
  cursor:pointer;
  transition:background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--ember); color:#fff; }
.btn-primary:hover{ background:var(--ember-deep); color:#fff; }
.btn-ghost{
  background:transparent; color:var(--ink);
  border-color:var(--ink);
}
.btn-ghost:hover{ background:var(--ink); color:var(--cream); }

/* bottoni chiari su fondo scuro */
.on-dark .btn-ghost{ color:var(--cream); border-color:rgba(244,233,214,.5); }
.on-dark .btn-ghost:hover{ background:var(--cream); color:var(--ink); border-color:var(--cream); }

/* ============================================================
   Header
   ============================================================ */
.site-head{
  position:static; z-index:40;
  background:var(--paper);
  border-bottom:1px solid var(--paper-line);
}
.head-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; min-height:74px;
}
.brand{
  display:inline-flex; align-items:center; gap:.6rem;
  color:var(--ink);
}
.brand:hover{ color:var(--ink); }
.brand-mark{ display:inline-flex; }
.brand-name{
  font-family:var(--f-display);
  font-weight:600;
  font-size:1.5rem;
  letter-spacing:-.01em;
}
.site-nav{ display:flex; align-items:center; gap:1.9rem; }
.site-nav a{
  color:var(--ink);
  font-weight:500;
  font-size:1rem;
  padding:.35rem 0;
  position:relative;
}
.site-nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-2px;
  height:2px; background:var(--ember);
  transition:right .2s ease;
}
.site-nav a:hover{ color:var(--ink); }
.site-nav a:hover::after,
.site-nav a.is-active::after{ right:0; }
.site-nav a.is-active{ color:var(--ink); }

/* header scuro sulla home, si fonde con l'hero */
body.home .site-head{
  position:absolute; top:0; left:0; right:0;
  background:transparent;
  border-bottom:none;
}
body.home .brand,
body.home .brand-name,
body.home .site-nav a{ color:var(--cream); }
body.home .site-nav a.is-active{ color:#fff; }

/* hamburger */
.nav-toggle{
  display:none;
  width:44px; height:44px;
  background:transparent; border:0; cursor:pointer;
  padding:10px;
}
.nav-toggle span{
  display:block; height:2px; margin:4px 0;
  background:var(--ink); border-radius:2px;
  transition:transform .2s ease, opacity .2s ease;
}
body.home .nav-toggle span{ background:var(--cream); }

/* ============================================================
   Hero (home) — la bocca del forno
   ============================================================ */
.hero{
  position:relative;
  display:flex;
  align-items:center;
  min-height:100svh;
  background:
    radial-gradient(120% 90% at 82% 18%, rgba(209,64,31,.28), transparent 55%),
    radial-gradient(80% 70% at 78% 30%, rgba(181,138,60,.16), transparent 60%),
    var(--forno);
  color:var(--cream);
  border-bottom:1px solid rgba(181,138,60,.28);
}
.hero > .wrap{ width:100%; }
/* sfondo opzionale: attivo solo con classe .has-bg (vedi index.php + site.php) */
.hero.has-bg{
  background:
    linear-gradient(rgba(28,19,13,.55), rgba(28,19,13,.72)),
    var(--hero-img) center/cover no-repeat,
    var(--forno);
}
.hero-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(1.5rem,5vw,4rem);
  align-items:center;
  padding-block:clamp(2rem,4vw,3rem);
}
.hero-scroll{
  position:absolute; left:50%; bottom:1.4rem; transform:translateX(-50%);
  display:inline-flex; flex-direction:column; align-items:center; gap:.3rem;
  color:var(--brass); text-decoration:none;
  font-family:var(--f-display); font-style:italic; font-size:.95rem;
}
.hero-scroll:hover{ color:var(--cream); }
.hero-scroll svg{ width:20px; height:20px; animation:heroBob 2.4s ease-in-out infinite; }
@keyframes heroBob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(5px);} }
.hero-label{
  font-family:var(--f-display);
  font-style:italic;
  font-weight:500;
  font-size:1.1rem;
  color:var(--brass);
  margin:0 0 1rem;
}
.hero-title{
  font-size:clamp(3rem,6.5vw,5.4rem);
  line-height:.98;
  color:#fff;
  margin:0 0 1.1rem;
}
.hero-sub{
  font-size:1.15rem;
  color:rgba(244,233,214,.86);
  max-width:34ch;
  margin:0 0 2rem;
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:.85rem; }

/* opera d'arte: arco del forno con brace */
.hero-art{ display:flex; justify-content:center; }
.forno-svg{ width:min(100%,420px); height:auto; }

/* ============================================================
   Sezioni chiare
   ============================================================ */
.section{ padding-block:clamp(3rem,6vw,5.5rem); }
.section-tight{ padding-block:clamp(2.2rem,4vw,3.4rem); }

.story-grid{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(1.6rem,5vw,4rem);
  align-items:start;
}
.story-grid h2{ font-size:clamp(1.9rem,3.4vw,2.6rem); }
.story-lead{ font-size:1.18rem; }
.story-cols{ columns:2; column-gap:2.2rem; }
@media (max-width:680px){ .story-cols{ columns:1; } }

/* --- Le nostre insegne: menù stampato --- */
.signatures{ background:var(--paper-2); border-block:1px solid var(--paper-line); }
.sig-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:1rem; flex-wrap:wrap; margin-bottom:2rem;
}
.sig-head h2{ font-size:clamp(1.9rem,3.4vw,2.6rem); margin:0; }
.sig-list{ list-style:none; margin:0; padding:0; }
.sig-item{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:baseline;
  gap:.4rem 1rem;
  padding:1.15rem 0;
  border-bottom:1px solid var(--paper-line);
}
.sig-item:first-child{ border-top:1px solid var(--paper-line); }
.sig-name{
  font-family:var(--f-display);
  font-weight:600;
  font-size:1.35rem;
  color:var(--ink);
  position:relative;
  padding-right:.6rem;
}
/* linea di punti tra nome e prezzo */
.sig-lead{
  border-bottom:2px dotted var(--paper-line);
  transform:translateY(-.28em);
  margin:0 .3rem;
}
.sig-price{
  font-family:var(--f-display);
  font-weight:600;
  font-size:1.25rem;
  color:var(--ember);
  white-space:nowrap;
}
.sig-desc{
  grid-column:1 / -1;
  color:var(--ink-soft);
  font-size:.98rem;
  margin:.15rem 0 0;
  max-width:60ch;
}

/* ============================================================
   CTA / fascia locale
   ============================================================ */
.locale{
  background:
    radial-gradient(90% 120% at 15% 10%, rgba(209,64,31,.22), transparent 55%),
    var(--forno);
  color:var(--cream);
}
.locale h2{ color:#fff; font-size:clamp(1.9rem,3.4vw,2.6rem); }
.locale .label{ color:var(--brass); }
.locale-grid{
  display:grid; grid-template-columns:1.1fr .9fr;
  gap:clamp(1.6rem,5vw,3.5rem); align-items:center;
}
.locale-hours{ list-style:none; margin:0; padding:0; }
.locale-hours li{
  display:flex; justify-content:space-between; gap:1rem;
  padding:.6rem 0;
  border-bottom:1px solid rgba(181,138,60,.25);
}
.locale-hours li:last-child{ border-bottom:0; }
.locale-hours .d{ color:var(--cream); font-weight:500; }
.locale-hours .t{ color:rgba(244,233,214,.72); }



/* ============================================================
   Intestazione pagine interne
   ============================================================ */
.page-head{
  padding-block:clamp(2.6rem,5vw,4rem) clamp(1.4rem,3vw,2rem);
  border-bottom:1px solid var(--paper-line);
}
.page-head h1{ font-size:clamp(2.4rem,5vw,3.6rem); margin:0 0 .4rem; }

/* ============================================================
   Menu
   ============================================================ */
.menu-section{ padding-block:clamp(2rem,4vw,3.2rem) clamp(3rem,6vw,5rem); }

.menu-tabs{
  display:inline-flex; gap:.4rem;
  border:1px solid var(--paper-line);
  border-radius:999px;
  padding:.3rem;
  background:var(--paper-2);
  margin-bottom:2.4rem;
}
.tab{
  font-family:var(--f-text);
  font-weight:600; font-size:.98rem;
  color:var(--ink-soft);
  background:transparent; border:0; cursor:pointer;
  padding:.6rem 1.2rem; border-radius:999px;
  transition:background-color .18s ease, color .18s ease;
}
.tab:hover{ color:var(--ink); }
.tab.is-active{ background:var(--ink); color:var(--cream); }

.menu-status{
  color:var(--ink-soft);
  font-family:var(--f-display); font-style:italic; font-size:1.1rem;
  padding:1.5rem 0;
}

.menu-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.1rem 2.4rem;
}

/* piatto = voce di menù cliccabile */
.dish{
  display:flex; flex-direction:column; gap:.5rem;
  text-align:left; width:100%;
  background:transparent;
  border:0;
  border-bottom:1px solid var(--paper-line);
  padding:1.25rem .4rem 1.35rem;
  cursor:pointer;
  transition:padding-left .18s ease, background-color .18s ease;
}
.dish:hover{ background:var(--paper-2); padding-left:.9rem; }
.dish-top{
  display:flex; align-items:baseline; gap:.7rem;
  width:100%;
}
.dish-name{
  font-family:var(--f-display);
  font-weight:600; font-size:1.3rem;
  color:var(--ink); flex:0 1 auto;
}
.dish-top::before{
  content:""; flex:1 1 auto; order:1;
  align-self:flex-end;
  border-bottom:2px dotted var(--paper-line);
  transform:translateY(-.3em);
  min-width:1.5rem;
}
.dish-cost{
  order:2;
  font-family:var(--f-display);
  font-weight:600; font-size:1.25rem;
  color:var(--ember); white-space:nowrap;
}
.dish-cost::before{ content:"€ "; font-size:.85em; color:var(--ink-soft); }
.dish-excerpt{
  color:var(--ink-soft); font-size:.98rem; line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
.dish-tags{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.2rem; }
.dot{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px;
  border:1px solid var(--paper-line); border-radius:50%;
  color:var(--wine); background:var(--paper);
}
.dot svg{ width:15px; height:15px; }
.dot.more{
  font-size:.78rem; font-weight:600; color:var(--ink-soft);
  font-family:var(--f-text);
}

/* paginazione */
.pager{ display:flex; gap:.35rem; justify-content:center; margin-top:2.6rem; }
.pager button{
  min-width:42px; height:42px;
  border:1px solid var(--paper-line); background:var(--paper);
  color:var(--ink); font-weight:600; font-family:var(--f-text);
  border-radius:var(--radius); cursor:pointer;
  transition:background-color .15s ease, color .15s ease, border-color .15s ease;
}
.pager button:hover:not(:disabled){ border-color:var(--ink); }
.pager button.is-active{ background:var(--ink); color:var(--cream); border-color:var(--ink); }
.pager button:disabled{ opacity:.4; cursor:default; }

/* ============================================================
   Modale piatto
   ============================================================ */
.modal[hidden]{ display:none; }
.modal{
  position:fixed; inset:0; z-index:80;
  display:flex; align-items:center; justify-content:center;
  padding:1.2rem;
}
.modal-backdrop{
  position:absolute; inset:0;
  background:rgba(28,19,13,.62);
  backdrop-filter:blur(2px);
}
.modal-card{
  position:relative;
  width:min(560px,100%);
  max-height:90vh; overflow:auto;
  background:var(--paper);
  border-radius:8px;
  box-shadow:var(--shadow);
}
.modal-close{
  position:absolute; top:.8rem; right:.8rem; z-index:2;
  width:40px; height:40px; border-radius:50%;
  border:0; cursor:pointer;
  background:rgba(255,255,255,.9); color:var(--ink);
  display:flex; align-items:center; justify-content:center;
}
.modal-close:hover{ background:#fff; color:var(--ember); }
.modal-media{ background:var(--paper-2); }
.dish-img{
  width:100%; aspect-ratio:16/10;
  background-size:cover; background-position:center;
}
.dish-img.placeholder{
  background:
    radial-gradient(60% 60% at 50% 42%, rgba(209,64,31,.18), transparent 60%),
    var(--forno-2);
  position:relative;
}
.dish-img.placeholder::after{
  content:"C’era una volta";
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--f-display); font-style:italic;
  color:var(--brass); font-size:1.6rem; letter-spacing:.02em;
}
.modal-body{ padding:1.6rem 1.7rem 1.9rem; }
.dish-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:1rem; margin-bottom:.6rem;
}
.dish-head h2{ margin:0; font-size:1.8rem; }
.dish-price{
  font-family:var(--f-display); font-weight:600; font-size:1.4rem;
  color:var(--ember); white-space:nowrap;
}
.dish-price::before{ content:"€ "; font-size:.8em; color:var(--ink-soft); }
.dish-desc{ margin:0 0 1.3rem; }
.allergens{ display:flex; flex-wrap:wrap; gap:.5rem; }
.allergen{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.35rem .7rem .35rem .5rem;
  background:var(--paper-2);
  border:1px solid var(--paper-line);
  border-radius:999px;
  font-size:.85rem; color:var(--ink);
}
.allergen svg{ width:16px; height:16px; color:var(--wine); }
.allergens-empty{ color:var(--ink-soft); font-style:italic; font-family:var(--f-display); }

/* ============================================================
   Contatti
   ============================================================ */
.contact-grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1.2rem,3vw,2rem);
  padding-block:clamp(2rem,4vw,3.4rem) clamp(3rem,6vw,5rem);
}
.contact-card{
  background:var(--paper-2);
  border:1px solid var(--paper-line);
  border-radius:6px;
  padding:1.7rem 1.6rem;
}
.contact-card h3{ font-size:1.35rem; margin:0 0 .7rem; }
.contact-card p{ margin:0 0 .5rem; }
.link{ color:var(--wine); border-bottom:1px solid rgba(122,38,32,.3); }
.link:hover{ color:var(--ember-deep); border-bottom-color:var(--ember-deep); }

.hours{ list-style:none; margin:0; padding:0; }
.hours li{
  display:flex; justify-content:space-between; gap:1rem;
  padding:.5rem 0; border-bottom:1px solid var(--paper-line);
}
.hours li:last-child{ border-bottom:0; }

.social-row{ display:flex; gap:.6rem; align-items:center; }
.social-row a{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:50%;
  border:1px solid var(--paper-line);
  color:var(--ink); background:var(--paper);
  transition:background-color .18s ease, color .18s ease, border-color .18s ease;
}
.social-row a:hover{ background:var(--ink); color:var(--cream); border-color:var(--ink); }
.social-lg{ flex-wrap:wrap; gap:.6rem; margin-top:1rem; }
.social-lg a{ width:auto; border-radius:999px; padding:.55rem 1rem; gap:.5rem; }
.social-lg a span{ font-weight:600; font-size:.92rem; }

/* ============================================================
   Footer
   ============================================================ */
.site-foot{
  background:var(--forno); color:var(--cream);
  padding-block:clamp(2.6rem,5vw,3.6rem) 1.6rem;
  margin-top:auto;
}
.foot-brand-row{
  padding-bottom:1.6rem; margin-bottom:2.4rem;
  border-bottom:1px solid rgba(181,138,60,.25);
}
.foot-grid{
  display:grid; grid-template-columns:1fr 1fr 1.5fr auto;
  gap:2.6rem; padding-bottom:2.4rem;
}
.foot-grid a{ color:var(--cream); }
.foot-grid a:hover{ color:var(--brass); }
.foot-hours{ list-style:none; margin:0; padding:0; }
.foot-hours li{
  display:grid; grid-template-columns:6.4em 1fr; gap:.15rem .9rem;
  padding:.32rem 0; font-size:.9rem;
  border-bottom:1px solid rgba(181,138,60,.14);
}
.foot-hours li:last-child{ border-bottom:0; }
.foot-hours .d{ color:var(--cream); white-space:nowrap; }
.foot-hours .t{ color:rgba(244,233,214,.72); }
.foot-brand{
  font-family:var(--f-display); font-weight:600; font-size:1.6rem;
  color:#fff; margin-bottom:.4rem;
}
.foot-label{
  font-family:var(--f-display); font-style:italic;
  color:var(--brass); font-size:1.05rem; margin-bottom:.6rem;
}
.site-foot .muted{ color:rgba(244,233,214,.68); }
.site-foot .social-row a{
  background:transparent; border-color:rgba(181,138,60,.4); color:var(--cream);
}
.site-foot .social-row a:hover{ background:var(--brass); color:var(--forno); border-color:var(--brass); }
.foot-bottom{
  padding-top:1.4rem; font-size:.9rem;
  border-top:1px solid rgba(181,138,60,.25);
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
}
.foot-bottom a{ color:var(--brass); }
.foot-bottom a:hover{ color:#fff; }

/* ============================================================
   Layout di base pagina
   ============================================================ */
html,body{ height:100%; }
body{ display:flex; flex-direction:column; min-height:100vh; }
main{ flex:1 0 auto; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:900px){
  .hero-grid{ grid-template-columns:1fr; text-align:left; }
  .hero-art{ order:-1; }
  .forno-svg{ width:min(78%,320px); }
  .story-grid,
  .locale-grid{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width:820px){
  .nav-toggle{ display:block; }
  .site-nav{
    position:fixed; inset:74px 0 auto 0;
    flex-direction:column; align-items:flex-start; gap:0;
    background:var(--paper);
    border-bottom:1px solid var(--paper-line);
    padding:.5rem clamp(1.1rem,4vw,2rem) 1.2rem;
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:opacity .18s ease, transform .18s ease;
  }
  body.home .site-nav{ background:var(--forno); }
  .site-nav a{ width:100%; padding:.85rem 0; border-bottom:1px solid var(--paper-line); }
  body.home .site-nav a{ border-bottom-color:rgba(181,138,60,.2); }
  .site-nav a::after{ display:none; }
  body.nav-open .site-nav{ transform:translateY(0); opacity:1; pointer-events:auto; }
  body.nav-open .nav-toggle span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
  body.nav-open .nav-toggle span:nth-child(2){ opacity:0; }
  body.nav-open .nav-toggle span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
}

@media (max-width:640px){
  .menu-grid{ grid-template-columns:1fr; gap:0; }
  .contact-grid{ grid-template-columns:1fr; }
  .foot-grid{ grid-template-columns:1fr; gap:1.6rem; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ transition:none !important; animation:none !important; }
}

/* focus visibile */
:focus-visible{
  outline:2px solid var(--ember);
  outline-offset:2px;
  border-radius:2px;
}

/* ============================================================
   Hero — variante "C'era una volta" (occhiello + lineetta, bottone grande)
   ============================================================ */
.hero-eyebrow{
  display:flex; align-items:center; gap:.9rem;
  margin:0 0 1.15rem;
  font-family:var(--f-text); font-weight:500;
  letter-spacing:.08em;
  font-size:.9rem; color:rgba(244,233,214,.85);
}
.hero-eyebrow::before{
  content:""; width:46px; height:2px;
  background:var(--cream); opacity:.85;
}
.hero-sub{ max-width:46ch; }
.hero-sub strong{ color:#fff; font-weight:600; }
.btn-lg{
  padding:1.05rem 2rem;
  font-size:.9rem; letter-spacing:.12em; text-transform:uppercase;
}

/* ============================================================
   Chi siamo — testo + collage di due foto
   ============================================================ */
.chisiamo-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(2rem,5vw,4.5rem);
  align-items:center;
}
.chisiamo-copy h2{ font-size:clamp(2rem,3.6vw,2.8rem); margin:0 0 .6rem; }
.lead-kicker{
  display:flex; align-items:center; gap:1rem;
  color:var(--ember); font-weight:600; font-size:1.08rem;
  margin:0 0 1.4rem;
}
.lead-kicker::after{
  content:""; flex:0 0 54px; height:2px;
  background:var(--ember); opacity:.85;
}
.chisiamo-copy p:not(.lead-kicker){ color:var(--ink-soft); max-width:52ch; }
.chisiamo-copy .btn{ margin-top:1.6rem; }

.chisiamo-media{ position:relative; min-height:520px; }
.chisiamo-media .ph{
  position:absolute;
  background-color:var(--paper-2);
  background-image:radial-gradient(60% 60% at 50% 40%, rgba(209,64,31,.12), transparent 62%);
  background-size:cover; background-position:center; background-repeat:no-repeat;
  border-radius:10px;
  box-shadow:var(--shadow);
}
.chisiamo-media .ph-1{ top:0; right:0; width:74%; height:72%; }
.chisiamo-media .ph-2{
  left:0; bottom:0; width:60%; height:62%;
  border:7px solid var(--paper); z-index:2;
}

@media (max-width:900px){
  .chisiamo-grid{ grid-template-columns:1fr; }
  .chisiamo-media{ min-height:0; display:grid; gap:1rem; }
  .chisiamo-media .ph{ position:static; width:100%; height:auto; aspect-ratio:4/3; box-shadow:0 12px 34px -22px rgba(28,19,13,.5); }
  .chisiamo-media .ph-2{ border-width:0; }
}

/* ============================================================
   Vetrina menu — come "Chi siamo" ma immagini a SINISTRA
   ============================================================ */
.vetrina{ background:var(--paper-2); border-block:1px solid var(--paper-line); }
.vetrina-grid{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,4.5rem);
  align-items:center;
}
/* specchia il collage: grande in alto a sinistra, davanti in basso a destra */
.vetrina-media .ph-1{ left:0; right:auto; top:0; }
.vetrina-media .ph-2{ right:0; left:auto; bottom:0; border-color:var(--paper-2); }

@media (max-width:900px){
  .vetrina-grid{ grid-template-columns:1fr; }
  .vetrina-grid .chisiamo-copy{ order:-1; }  /* testo sopra le foto su mobile */
}

/* ============================================================
   Logo + ottimizzazioni telefono
   ============================================================ */
.brand-logo{ display:block; height:48px; width:auto; border-radius:3px; }
.site-head{ position:relative; }
body{ overflow-x:clip; }                 /* niente scroll orizzontale */

.pager{ flex-wrap:wrap; align-items:center; }
.pager-gap{ min-width:24px; text-align:center; color:var(--ink-soft); font-weight:600; }

@media (hover:none){
  .dish:hover{ background:transparent; padding-left:.4rem; }
  .dish:active{ background:var(--paper-2); }
}

@media (max-width:820px){
  .head-row{ min-height:64px; }
  .brand-logo{ height:40px; }
  /* tendina ancorata all'header, non allo schermo */
  .site-nav{ position:absolute; inset:100% 0 auto 0; z-index:50; }
}

@media (max-width:640px){
  /* hero */
  .hero-title{ font-size:clamp(2.5rem,12vw,3.2rem); }
  .hero-sub{ font-size:1.02rem; margin-bottom:1.6rem; }
  .hero-eyebrow{ font-size:.82rem; }

  /* intestazione pagine */
  .page-head{ padding-block:1.8rem 1.1rem; }

  /* menu */
  .menu-section{ padding-block:1.4rem 3rem; }
  .menu-tabs{ display:grid; grid-template-columns:1fr 1fr; width:100%; margin-bottom:1.2rem; }
  .tab{ padding:.7rem .5rem; font-size:.93rem; }
  .dish{ padding:1rem 0 1.1rem; gap:.35rem; }
  .dish-top{ gap:.5rem; }
  .dish-name{ font-size:1.15rem; line-height:1.2; flex:0 1 auto; min-width:0; }
  .dish-top::before{ min-width:.8rem; }
  .dish-cost{ font-size:1.1rem; }
  .dish-excerpt{ font-size:.93rem; }
  .dot{ width:24px; height:24px; }
  .dot svg{ width:14px; height:14px; }
  .pager{ gap:.3rem; margin-top:1.8rem; }
  .pager button{ min-width:38px; height:40px; }

  /* scheda piatto: pannello dal basso */
  .modal{ align-items:flex-end; padding:0; }
  .modal-card{
    width:100%; max-height:88vh;
    border-radius:16px 16px 0 0;
    padding-bottom:env(safe-area-inset-bottom);
  }
  .dish-img{ aspect-ratio:16/11; }
  .modal-body{ padding:1.2rem 1.2rem 1.6rem; }
  .dish-head h2{ font-size:1.45rem; }
  .dish-price{ font-size:1.2rem; }

  /* contatti / footer */
  .contact-card{ padding:1.3rem 1.2rem; }
  .hours li{ flex-wrap:wrap; gap:.1rem 1rem; }
  .foot-hours li{ grid-template-columns:5.6em 1fr; }
}

/* ============================================================
   Consegna a domicilio — mappa sotto "Il menu"
   ============================================================ */
.delivery{ padding-top:clamp(1.4rem,3vw,2.2rem); }
.delivery-card{
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  background:var(--paper-2);
  border:1px solid var(--paper-line);
  border-radius:10px; overflow:hidden;
}
.delivery-copy{ padding:clamp(1.3rem,3vw,2rem); }
.delivery-copy .label{ margin:0 0 .3rem; }
.delivery-copy h2{ font-size:clamp(1.5rem,2.6vw,1.9rem); margin:0 0 .5rem; }
.delivery-copy .btn{ margin-top:.4rem; }
.delivery-copy .btn:disabled{ opacity:.65; cursor:progress; }
.delivery-map{
  min-height:320px; height:100%;
  position:relative; isolation:isolate;   /* tiene Leaflet sotto nav e modale */
  background:var(--paper-line);
}
.delivery-result{
  margin-top:1rem; padding:.85rem 1rem;
  border-radius:6px; border:1px solid var(--paper-line);
  background:var(--paper); font-size:.97rem;
}
.delivery-result.is-ok{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  border-color:rgba(209,64,31,.35);
}
.delivery-result.is-ko{ color:var(--wine); }
.delivery-result.is-loading{ color:var(--ink-soft); font-style:italic; }
.dr-cost{
  font-family:var(--f-display); font-weight:600; font-size:1.5rem;
  color:var(--ember); white-space:nowrap;
}
.delivery-zones{ font-size:.88rem; margin:1rem 0 0; }

/* segnaposti mappa */
.map-pin{ border-radius:50%; border:3px solid #fff; box-shadow:0 2px 8px rgba(28,19,13,.45); }
.map-pin.is-shop{ background:var(--ember); }
.map-pin.is-user{ background:#2b6de0; }

@media (max-width:760px){
  .delivery-card{ grid-template-columns:1fr; }
  .delivery-copy .btn{ width:100%; }
  .delivery-map{ min-height:0; height:260px; }
}