/* ═══════════════════════════════════════════════════════════
   Latteria Maffucci — Dergano, Milano
   Concept: «A mezzogiorno e la sera non è lo stesso posto.»
   Gesto-firma: la settimana come griglia 7×2 (pranzo/cena).
   Palette letta dalla loro sala: pareti salmone, tovaglie a
   quadretti rosso/ocra su sottotovaglia bordeaux, palladiana.
   ═══════════════════════════════════════════════════════════ */

:root{
  --crema:#FBF3EA;
  --carta:#FFFCF7;
  --inchiostro:#33241F;
  --bordeaux:#8E2B2B;
  --bordeaux-scuro:#6B1F1F;
  --salmone:#E9C9B8;
  --legno:#A9784E;
  --ocra:#C9A24B;
  --grigio:#6E6A62;
  --riga:rgba(51,36,31,.14);
  --mx:clamp(1.15rem,5vw,5.5rem);
  --display:"Petrona",Georgia,serif;
  --testo:"Epilogue",system-ui,-apple-system,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--crema);
  color:var(--inchiostro);
  font-family:var(--testo);
  font-size:clamp(1rem,.96rem + .25vw,1.09rem);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit}

h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.04;letter-spacing:-.018em;margin:0}

/* ── FLASH-GUARD: stato iniziale dei .reveal.
      Senza queste tre righe gli elementi lampeggiano prima che
      ScrollTrigger li prenda in carico (immediateRender:false). ── */
.js .reveal{opacity:0}
.js .reveal.in-view{opacity:1}
html:not(.js) .reveal,html.reduced-motion .reveal{opacity:1}

.skip{position:absolute;left:-9999px;top:0;background:var(--bordeaux);color:#fff;padding:.7rem 1.1rem;z-index:200;border-radius:0 0 6px 0}
.skip:focus{left:0}

:where(a,button,summary,iframe,[tabindex]):focus-visible{
  outline:2.5px solid var(--bordeaux);outline-offset:3px;border-radius:3px;
}

/* ═══════════ INTRO ═══════════ */
#intro{
  position:fixed;inset:0;z-index:300;
  background:var(--bordeaux);
  display:grid;place-items:center;
  padding:1.5rem;
}
#introMark{
  font-family:var(--display);
  font-size:clamp(1.5rem,6vw,3.1rem);
  color:var(--crema);
  letter-spacing:-.02em;
  text-align:center;
}
html.no-intro #intro{display:none}

/* ═══════════ HEADER ═══════════ */
#header{
  position:fixed;top:0;left:0;right:0;z-index:120;
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;
  padding:.85rem var(--mx);
  background:rgba(251,243,234,.97);
  border-bottom:1px solid transparent;
  transition:border-color .3s ease,background .3s ease;
}
#header.scrolled{border-bottom-color:var(--riga)}

.brand{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(1.02rem,2.4vw,1.24rem);
  letter-spacing:-.02em;
  text-decoration:none;
  white-space:nowrap;
}

#mainNav{display:flex;align-items:center;gap:clamp(.9rem,1.9vw,1.7rem)}
#mainNav a:not(.cta){
  text-decoration:none;
  font-size:.88rem;
  font-weight:500;
  color:var(--inchiostro);
  opacity:.72;
  transition:opacity .2s ease;
}
#mainNav a:not(.cta):hover{opacity:1}

#langToggle{
  background:none;border:1px solid var(--riga);
  color:var(--inchiostro);
  font-family:var(--testo);font-size:.74rem;font-weight:600;
  letter-spacing:.07em;
  padding:.3rem .55rem;border-radius:3px;cursor:pointer;
  transition:border-color .2s ease,color .2s ease;
}
#langToggle:hover{border-color:var(--bordeaux);color:var(--bordeaux)}

.cta{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--bordeaux);color:var(--crema);
  text-decoration:none;
  font-family:var(--testo);font-weight:600;
  font-size:.85rem;
  padding:.6rem 1.15rem;
  border-radius:3px;
  transition:background .22s ease;
  white-space:nowrap;
}
.cta:hover{background:var(--bordeaux-scuro)}
.cta-big{font-size:1rem;padding:.9rem 1.7rem;margin-top:1.6rem}

#burger{display:none;flex-direction:column;gap:4px;background:none;border:0;cursor:pointer;padding:.45rem}
#burger span{display:block;width:22px;height:2px;background:var(--inchiostro);transition:transform .28s ease,opacity .2s ease}
#burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
#burger[aria-expanded="true"] span:nth-child(2){opacity:0}
#burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

@media (max-width:860px){
  #burger{display:flex}
  #mainNav{
    position:fixed;inset:0 0 auto;top:0;
    flex-direction:column;justify-content:center;
    height:100dvh;gap:1.5rem;
    background:var(--crema);
    transform:translateY(-100%);
    transition:transform .38s cubic-bezier(.4,0,.2,1);
  }
  #mainNav.nav-open{transform:translateY(0)}
  #mainNav a:not(.cta){font-size:1.35rem;font-family:var(--display);opacity:1}
}

/* ═══════════ HERO ═══════════ */
#hero{
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  padding:7.5rem var(--mx) 4rem;
  position:relative;
  background:
    linear-gradient(180deg,transparent 0%,rgba(233,201,184,.34) 100%);
}
/* la trama a quadretti della tovaglia, appena accennata */
#hero::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    repeating-linear-gradient(90deg,rgba(142,43,43,.055) 0 26px,transparent 26px 52px),
    repeating-linear-gradient(0deg,rgba(142,43,43,.055) 0 26px,transparent 26px 52px);
}

.hero-kicker{
  font-size:.79rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--bordeaux);margin:0 0 1.6rem;
}
#hero h1{
  font-size:clamp(2.6rem,8.4vw,7rem);
  max-width:16ch;
}
.hero-sub{
  max-width:46ch;margin:1.9rem 0 0;
  font-size:clamp(1.02rem,1.7vw,1.17rem);
  color:#4C3A33;
}
.hero-meta{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:1.4rem 2.4rem;
  margin-top:2.8rem;padding-top:1.5rem;
  border-top:1px solid var(--riga);
  max-width:46ch;
}
.hero-rating{margin:0;font-size:.94rem;color:var(--grigio)}
.hero-rating strong{font-family:var(--display);font-size:1.7rem;color:var(--bordeaux);margin-right:.35rem}
.hero-call{
  font-family:var(--display);font-size:1.35rem;font-weight:700;
  text-decoration:none;letter-spacing:-.01em;
}
.hero-call:hover{color:var(--bordeaux)}

/* ═══════════ sezioni ═══════════ */
section{padding:clamp(4.5rem,10vw,8.5rem) var(--mx)}
.sec-head{margin-bottom:clamp(2.6rem,5vw,4rem)}
.eyebrow{
  font-size:.75rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--bordeaux);margin:0 0 .9rem;
}
h2{font-size:clamp(1.85rem,4.6vw,3.4rem)}
section p{max-width:56ch}

/* ═══════════ LA SETTIMANA — gesto-firma ═══════════ */
#settimana{background:var(--carta);border-block:1px solid var(--riga)}

.griglia{
  display:flex;flex-direction:column;gap:.42rem;
  max-width:820px;
}
.g-riga{
  display:grid;
  grid-template-columns:minmax(3.6rem,5.2rem) repeat(7,1fr);
  gap:.42rem;align-items:center;
}
.g-testa span{
  font-size:.76rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--grigio);text-align:center;
}
.g-lab{
  font-size:.76rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--grigio);text-align:right;padding-right:.5rem;
}
.cella{
  aspect-ratio:1;
  border:1px solid var(--riga);
  border-radius:2px;
  background:transparent;
  transform-origin:center;
}
.cella.on{background:var(--ocra);border-color:transparent}
.cella.on.sera{background:var(--bordeaux)}

.sett-nota{
  margin:2.6rem 0 0;max-width:52ch;
  font-size:clamp(1rem,1.6vw,1.13rem);
  color:#4C3A33;
}
.sett-nota strong{color:var(--inchiostro)}

/* ═══════════ 1988 — la storia ═══════════ */
.storia-inner{
  display:grid;grid-template-columns:auto 1fr;
  gap:clamp(1.8rem,5vw,4.5rem);align-items:start;
}
@media (max-width:760px){.storia-inner{grid-template-columns:1fr;gap:1.4rem}}
.anno{
  margin:0;font-family:var(--display);line-height:.86;
  color:var(--bordeaux);white-space:nowrap;
}
.anno span{display:block;font-size:.9rem;font-weight:400;letter-spacing:.16em;
  text-transform:uppercase;color:var(--grigio);margin-bottom:.5rem}
.anno b{font-size:clamp(3.4rem,10vw,6.4rem);font-weight:700;letter-spacing:-.03em}
.storia-testo p{margin:0 0 1.15rem;font-size:clamp(1rem,1.5vw,1.1rem)}
.storia-fonte{font-size:.83rem;color:var(--grigio);font-style:italic}
.storia-fonte a{color:var(--bordeaux)}

/* ═══════════ due colonne ═══════════ */
.due-col{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(2.2rem,5vw,4.5rem);align-items:center;
}
@media (max-width:860px){.due-col{grid-template-columns:1fr}}
.col-fig{margin:0}
.col-fig img{border-radius:3px;width:100%}
.col-testo h2{margin-bottom:1.4rem}
.col-testo p{margin:0 0 1.1rem}

/* ── i piatti della lavagna ── */
.piatti{list-style:none;margin:1.9rem 0 1.1rem;padding:0;max-width:46ch}
.piatti li{
  display:flex;align-items:baseline;gap:.7rem;
  padding:.62rem 0;
  border-bottom:1px solid var(--riga);
  font-size:.98rem;
}
.piatti li span{flex:1}
.piatti li b{
  font-family:var(--display);font-size:1.05rem;color:var(--bordeaux);
  white-space:nowrap;
}
.piatti li b::after{content:" €";font-size:.78em;opacity:.6}
.pr-nota{font-size:.85rem;color:var(--grigio);font-style:italic;max-width:44ch}

/* ═══════════ LA SERA ═══════════ */
#sera{
  background:var(--inchiostro);
  color:var(--crema);
}
#sera .eyebrow{color:var(--salmone)}
#sera p{color:rgba(251,243,234,.84)}
#sera strong{color:var(--crema)}
.sera-inner{max-width:60ch}
.sera-cit{
  margin:2.4rem 0 0;padding:1.5rem 0 0;
  border-top:1px solid rgba(251,243,234,.2);
}
.sera-cit p{font-family:var(--display);font-size:1.16rem;font-style:italic;margin:0 0 .8rem}
.sera-cit cite{font-style:normal;font-size:.82rem;letter-spacing:.05em;color:rgba(251,243,234,.6)}
#sera .cta{background:var(--salmone);color:var(--inchiostro)}
#sera .cta:hover{background:#F2DBCE}

/* ═══════════ LA SALA ═══════════ */
.sa-cit{
  font-family:var(--display);font-style:italic;font-size:1.1rem;
  color:var(--bordeaux);border-left:2px solid var(--ocra);
  padding-left:1rem;margin-top:1.7rem;
}
.sala-strip{
  display:grid;grid-template-columns:1fr 1fr;gap:1rem;
  margin-top:clamp(2rem,4vw,3.2rem);
}
@media (max-width:700px){.sala-strip{grid-template-columns:1fr}}
.shot{
  border:0;padding:0;background:none;cursor:zoom-in;
  border-radius:3px;overflow:hidden;display:block;
}
.shot img{width:100%;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.shot:hover img{transform:scale(1.035)}
.sala-nota{margin-top:1.4rem;font-size:.85rem;color:var(--grigio);font-style:italic}

/* ═══════════ RECENSIONI ═══════════ */
#voci{background:var(--carta);border-block:1px solid var(--riga)}
#voci h2{color:var(--bordeaux)}
.voci-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:clamp(1.4rem,3vw,2.4rem)}
.voci-grid blockquote{margin:0;padding-top:1.2rem;border-top:2px solid var(--ocra)}
.voci-grid p{font-size:.99rem;margin:0 0 .9rem;max-width:none}
.voci-grid cite{font-style:normal;font-size:.79rem;letter-spacing:.06em;text-transform:uppercase;color:var(--grigio)}

/* ═══════════ DOVE ═══════════ */
.dove-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.2rem,5vw,4rem);align-items:start}
@media (max-width:860px){.dove-grid{grid-template-columns:1fr}}
#dove address{font-style:normal;font-size:1.1rem;line-height:1.75;margin:1.5rem 0 .6rem}
.dove-tel a{font-family:var(--display);font-size:1.5rem;font-weight:700;text-decoration:none}
.dove-tel a:hover{color:var(--bordeaux)}
.dove-stato{margin:.9rem 0 1.5rem;font-size:.92rem;font-weight:600;min-height:1.4em}
.dove-stato .aperto{color:#2E7D48}
.dove-stato .chiuso{color:var(--bordeaux)}
.orari{list-style:none;margin:0;padding:0;border-top:1px solid var(--riga);max-width:34rem}
.orari li{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;border-bottom:1px solid var(--riga);font-size:.92rem}
.orari li b{font-weight:600;text-align:right}
.orari li.oggi{color:var(--bordeaux);font-weight:600}
.dove-serv{margin:1.3rem 0 0;font-size:.85rem;color:var(--grigio)}
.dove-map{border-radius:3px;overflow:hidden;border:1px solid var(--riga);min-height:390px}
.dove-map iframe{width:100%;height:100%;min-height:390px;display:block;filter:grayscale(.28) sepia(.12)}

/* ═══════════ FAQ ═══════════ */
#faq h2{margin-bottom:2.2rem}
.faq-list{max-width:62ch}
.faq-list details{border-bottom:1px solid var(--riga)}
.faq-list summary{
  cursor:pointer;padding:1.1rem 0;list-style:none;
  font-family:var(--display);font-size:1.09rem;font-weight:500;
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";color:var(--bordeaux);font-size:1.35rem;line-height:1;flex-shrink:0}
.faq-list details[open] summary::after{content:"–"}
.faq-list p{margin:0 0 1.2rem;font-size:.97rem;color:#4C3A33}

/* ═══════════ FOOTER ═══════════ */
footer{
  background:var(--inchiostro);color:rgba(251,243,234,.82);
  padding:clamp(3rem,6vw,4.5rem) var(--mx) 6.2rem;
}
.foot-inner{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2rem;align-items:start}
@media (max-width:760px){.foot-inner{grid-template-columns:1fr;gap:1.6rem}}
.foot-name{font-family:var(--display);font-size:1.6rem;color:var(--crema);margin:0}
.foot-col p{margin:0 0 .4rem;font-size:.9rem}
.foot-col a{text-decoration:none}
.foot-col a:hover{color:var(--salmone)}
.foot-credit{
  margin:3rem 0 0;padding-top:1.5rem;
  border-top:1px solid rgba(251,243,234,.16);
  font-size:.8rem;color:rgba(251,243,234,.55);
}
.foot-credit a{color:var(--salmone)}

/* ═══════════ ACTION BAR (mobile) ═══════════ */
#actionBar{
  position:fixed;bottom:0;left:0;right:0;z-index:110;
  display:none;
  background:var(--crema);
  border-top:1px solid var(--riga);
  padding:.6rem .8rem calc(.6rem + env(safe-area-inset-bottom));
  gap:.6rem;
  transform:translateY(105%);
  transition:transform .32s cubic-bezier(.4,0,.2,1);
}
#actionBar.is-visible{transform:translateY(0)}
#actionBar a{
  flex:1;text-align:center;text-decoration:none;
  padding:.72rem .5rem;border-radius:3px;
  font-size:.9rem;font-weight:600;
}
.ab-call{background:var(--bordeaux);color:var(--crema)}
.ab-map{border:1px solid var(--riga);color:var(--inchiostro)}
@media (max-width:700px){
  #actionBar{display:flex}
  footer{padding-bottom:7rem}
}

/* ═══════════ LIGHTBOX ═══════════ */
#lightbox{
  position:fixed;inset:0;z-index:250;
  background:rgba(30,20,17,.94);
  display:grid;place-items:center;padding:1.5rem;
}
#lightbox[hidden]{display:none}
#lightboxImg{max-width:100%;max-height:88vh;border-radius:3px}
#lightboxClose{
  position:absolute;top:1rem;right:1rem;
  background:none;border:0;color:var(--crema);
  font-size:1.7rem;cursor:pointer;line-height:1;padding:.5rem;
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}