/* ============================================================
   ROMANZO.22 — Ristorante di Carne & Mixology
   Stylesheet (vanilla CSS, no frameworks)
   ------------------------------------------------------------
   SECTIONS
   1.  Design tokens (colours, type, spacing)
   2.  Reset & base
   3.  Atmosphere (grain + vignette = "warm lighting")
   4.  Typography & helpers
   5.  Buttons
   6.  Header / navigation / language switch / social
   7.  Footer
   8.  Media placeholders  <-- easy to find & replace
   9.  Hero
   10. Home sections (concept, cards, gallery preview, Instagram, CTA)
   11. Menu page (filters + menu cards)
   12. Experience page (chapters + video blocks)
   13. Gallery page (masonry + lightbox)
   14. Contact page (info, hours, buttons, map)
   15. Reveal animations & reduced motion
   ============================================================ */
 
/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root{
  /* Palette sampled from the Romanzo.22 logo:
     near-black ground · warm ivory · brick-red bull · olive green tricolore */
  --ink:        #090807;   /* base background, near-black (logo ground) */
  --ink-2:      #100d0b;   /* lifted band                          */
  --panel:      #17120f;   /* card surface                         */
  --raised:     #1f1813;   /* raised card / hover surface          */
  --accent:       #8e1915;   /* deep true red — EXACT logo bull red    */
  --accent-soft:  #c43429;   /* brighter true red for text/links/hover */
  --accent-deep:  #6a120e;   /* darkest red for fills/borders/depth    */
  --green:      #2c5a13;   /* forest green — EXACT logo tricolore green */
  --green-soft: #6f9a38;   /* brighter green for small text            */
  --ember:      #a81d17;   /* fire glow — deep red (no orange)         */
  --ember-soft: #c8403a;
  --cream:      #ece4d6;   /* warm ivory text (logo lettering)     */
  --smoke:      #a99e8c;   /* muted text                           */
  --smoke-dim:  #6f665a;   /* faint text / captions                */
  --line:       rgba(142,25,21,.26);  /* hairline red divider      */
  --line-soft:  rgba(142,25,21,.13);
 
  /* Type */
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --body:    "Jost", "Helvetica Neue", Arial, sans-serif;
 
  /* Spacing & layout */
  --container: 1240px;
  --gutter: clamp(20px, 5vw, 64px);
  --section-y: clamp(64px, 9vw, 132px);
  --radius: 4px;
  --radius-lg: 10px;
 
  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}
 
/* ============================================================
   2. RESET & BASE
   ============================================================ */
*,*::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(--ink);
  color:var(--cream);
  font-family:var(--body);
  font-weight:300;
  font-size:clamp(15px,1.05vw,17px);
  line-height:1.65;
  letter-spacing:.01em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }
 
::selection{ background:var(--ember); color:#fff; }
 
/* Visible keyboard focus everywhere */
:focus-visible{
  outline:2px solid var(--accent-soft);
  outline-offset:3px;
  border-radius:2px;
}
 
/* ============================================================
   3. ATMOSPHERE  (warm-lighting feel: film grain + vignette)
   ============================================================ */
body::before{ /* warm vignette */
  content:"";
  position:fixed; inset:0;
  pointer-events:none; z-index:1;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(168,40,32,.12), transparent 55%),
    radial-gradient(140% 120% at 50% 120%, rgba(0,0,0,.55), transparent 60%);
  mix-blend-mode:screen;
  opacity:.9;
}
body::after{ /* fine film grain */
  content:"";
  position:fixed; inset:0;
  pointer-events:none; z-index:2;
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
 
/* ============================================================
   4. TYPOGRAPHY & HELPERS
   ============================================================ */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:var(--section-y); position:relative; z-index:3; }
.section--tight{ padding-block:clamp(48px,6vw,88px); }
.bg-2{ background:var(--ink-2); }
 
h1,h2,h3,h4{ font-family:var(--display); font-weight:400; line-height:1.04; margin:0; letter-spacing:-.01em; }
.display-xl{ font-size:clamp(3.4rem,11vw,9rem); font-weight:300; }
.display-lg{ font-size:clamp(2.4rem,6vw,4.6rem); }
.display-md{ font-size:clamp(1.9rem,3.6vw,3rem); }
em,.italic{ font-style:italic; }
 
/* Eyebrow label — the literary "chapter" marker, used with restraint */
.eyebrow{
  font-family:var(--body);
  font-weight:500;
  font-size:.72rem;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--accent-soft);
  display:inline-flex; align-items:center; gap:.85em;
  margin:0 0 1.1rem;
}
.eyebrow::before{
  content:""; width:34px; height:1px; background:var(--accent); opacity:.6;
}
.eyebrow--center{ justify-content:center; }
.eyebrow--center::after{ content:""; width:34px; height:1px; background:var(--accent); opacity:.6; }
 
.lead{ color:var(--smoke); font-size:clamp(1.02rem,1.4vw,1.18rem); font-weight:300; max-width:60ch; }
.muted{ color:var(--smoke); }
.center{ text-align:center; }
.mx-auto{ margin-inline:auto; }
 
/* Brand mark — real Romanzo.22 logo image */
.brand-mark{ display:inline-flex; align-items:center; line-height:0; }
.brand-logo{ display:block; width:auto; height:100%; }
/* Wordmark fallback (kept for accessibility / if image is removed) */
.brand-mark .dot{ color:var(--accent); }
.brand-mark .num{ color:var(--accent); }
 
/* Section heading block */
.head{ max-width:64ch; }
.head--center{ max-width:60ch; margin-inline:auto; text-align:center; }
 
/* Thin shimmering gold rule */
.rule{ height:1px; border:0; background:linear-gradient(90deg,transparent,var(--accent),transparent); opacity:.5; margin:0; }
 
/* ============================================================
   5. BUTTONS
   ============================================================ */
.btn{
  --bg:var(--accent); --fg:#fdf6ea;
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  padding:.95em 1.9em;
  font-family:var(--body); font-weight:500; font-size:.82rem;
  letter-spacing:.18em; text-transform:uppercase;
  border:1px solid var(--bg); border-radius:var(--radius);
  background:var(--bg); color:var(--fg);
  position:relative; overflow:hidden; isolation:isolate;
  transition:color .4s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease);
}
.btn::before{ /* ember sweep */
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(120deg,var(--ember),var(--ember-soft));
  transform:translateX(-101%); transition:transform .5s var(--ease-out);
}
.btn:hover{ color:#fff; transform:translateY(-2px); box-shadow:0 14px 30px -12px rgba(168,40,32,.6); }
.btn:hover::before{ transform:translateX(0); }
 
.btn--ghost{
  --bg:transparent; --fg:var(--cream);
  border-color:var(--line); color:var(--cream);
}
.btn--ghost::before{ background:rgba(168,40,32,.12); }
.btn--ghost:hover{ color:var(--accent-soft); border-color:var(--accent); box-shadow:none; }
 
.btn--block{ width:100%; }
.btn--sm{ padding:.7em 1.3em; font-size:.74rem; }
 
.text-link{
  display:inline-flex; align-items:center; gap:.5em;
  font-weight:500; font-size:.8rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent-soft); border-bottom:1px solid var(--line);
  padding-bottom:.3em; transition:gap .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.text-link:hover{ gap:.9em; color:var(--ember-soft); border-color:var(--ember); }
 
/* ============================================================
   6. HEADER / NAV / LANGUAGE / SOCIAL
   ============================================================ */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:1.15rem var(--gutter);
  transition:background .45s var(--ease), padding .45s var(--ease), border-color .45s var(--ease);
  border-bottom:1px solid transparent;
}
.site-header.scrolled{
  background:rgba(13,11,9,.82);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--line-soft);
  padding-block:.7rem;
}
.site-header .brand-mark{ z-index:60; }
.site-header .brand-logo{ height:40px; }
 
.nav{ display:flex; align-items:center; gap:clamp(1rem,2vw,2.1rem); }
.nav-links{ display:flex; gap:clamp(1rem,2vw,2rem); }
.nav-links a{
  position:relative; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--cream); opacity:.82; padding-block:.4em; transition:opacity .3s var(--ease), color .3s;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:var(--accent); transform:scaleX(0); transform-origin:right; transition:transform .4s var(--ease-out);
}
.nav-links a:hover{ opacity:1; color:var(--accent-soft); }
.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after{ transform:scaleX(1); transform-origin:left; }
.nav-links a[aria-current="page"]{ opacity:1; color:var(--accent-soft); }
 
/* Language switch */
.lang-switch{ display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.lang-switch button{
  background:transparent; border:0; color:var(--smoke);
  font-size:.72rem; font-weight:500; letter-spacing:.12em; padding:.45em .75em;
  transition:background .3s, color .3s;
}
.lang-switch button[aria-pressed="true"]{ background:var(--accent); color:#fdf6ea; }
.lang-switch button:not([aria-pressed="true"]):hover{ color:var(--accent-soft); }
 
/* Social icon buttons */
.socials{ display:flex; gap:.5rem; }
.icon-btn{
  display:grid; place-items:center; width:38px; height:38px;
  border:1px solid var(--line); border-radius:50%;
  color:var(--cream); background:transparent;
  transition:color .35s, border-color .35s, transform .35s var(--ease), background .35s;
}
.icon-btn svg{ width:17px; height:17px; }
.icon-btn:hover{ color:var(--accent); border-color:var(--accent); transform:translateY(-2px); background:rgba(168,40,32,.08); }
 
.header-tools{ display:flex; align-items:center; gap:.85rem; }
 
/* Hamburger */
.burger{
  display:none; flex-direction:column; gap:5px; width:42px; height:42px;
  align-items:center; justify-content:center; background:transparent; border:1px solid var(--line);
  border-radius:var(--radius); z-index:60;
}
.burger span{ width:20px; height:1.5px; background:var(--cream); transition:transform .4s var(--ease), opacity .3s; }
.burger.open span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; }
.burger.open span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }
 
/* Mobile drawer */
.mobile-menu{
  position:fixed; inset:0; z-index:55;
  background:linear-gradient(180deg,#120e09,#0b0907);
  display:flex; flex-direction:column; justify-content:center; gap:.4rem;
  padding:clamp(2rem,8vw,5rem);
  transform:translateX(100%); transition:transform .5s var(--ease-out);
  visibility:hidden;
}
.mobile-menu.open{ transform:translateX(0); visibility:visible; }
.mobile-menu a.m-link{
  font-family:var(--display); font-size:clamp(2rem,9vw,3.2rem); color:var(--cream);
  padding-block:.18em; border-bottom:1px solid var(--line-soft);
  display:flex; align-items:baseline; gap:.7rem; transition:color .3s, padding-left .4s var(--ease);
}
.mobile-menu a.m-link .idx{ font-family:var(--body); font-size:.8rem; color:var(--accent-soft); letter-spacing:.1em; }
.mobile-menu a.m-link:hover{ color:var(--accent-soft); padding-left:.6rem; }
.mobile-foot{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding-top:1.5rem; }
 
/* ============================================================
   7. FOOTER
   ============================================================ */
.site-footer{ position:relative; z-index:3; background:var(--ink-2); border-top:1px solid var(--line-soft); padding-block:clamp(48px,7vw,80px) 2rem; }
.footer-grid{ display:grid; gap:2.5rem 2rem; grid-template-columns:1fr; }
.footer-brand .brand-mark{ font-size:2rem; }
.footer-brand .brand-logo{ height:58px; }
.footer-brand p{ color:var(--smoke); max-width:34ch; margin:.9rem 0 0; }
.footer-col h4{ font-family:var(--body); font-size:.74rem; letter-spacing:.22em; text-transform:uppercase; color:var(--accent-soft); margin-bottom:1rem; }
.footer-col a, .footer-col p{ color:var(--smoke); display:block; margin:0 0 .55rem; transition:color .3s; }
.footer-col a:hover{ color:var(--accent-soft); }
.footer-bottom{
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
  margin-top:3rem;
  padding-top:1.6rem;
  border-top:1px solid var(--line-soft);
}
.footer-bottom small{ color:var(--smoke-dim); letter-spacing:.04em; }
 
/* ============================================================
   8. MEDIA PLACEHOLDERS
   ------------------------------------------------------------
   Every block with class .ph is a drop-in slot for real media.
   Look for the data-ph="..." label and the HTML comment beside
   each one to know what photo/video goes there.
   ============================================================ */
.ph{
  position:relative; overflow:hidden; border-radius:var(--radius-lg);
  background:
    repeating-linear-gradient(135deg, rgba(168,40,32,.04) 0 2px, transparent 2px 11px),
    radial-gradient(120% 120% at 30% 20%, #2a1f12, #140f0a 70%);
  border:1px dashed var(--accent-deep);
  display:grid; place-items:center; min-height:200px;
  color:var(--smoke);
}
.ph__inner{ text-align:center; padding:1.5rem; }
.ph__icon{ width:34px; height:34px; margin:0 auto .8rem; color:var(--accent-soft); opacity:.8; }
.ph__type{ font-size:.7rem; letter-spacing:.26em; text-transform:uppercase; color:var(--accent-soft); }
.ph__label{ font-family:var(--display); font-size:1.05rem; color:var(--cream); margin:.35rem 0 .15rem; }
.ph__hint{ font-size:.74rem; color:var(--smoke-dim); letter-spacing:.03em; }
.ph--video .ph__play{
  width:58px; height:58px; border-radius:50%; border:1px solid var(--accent);
  display:grid; place-items:center; margin:0 auto .9rem; color:var(--accent);
  transition:background .35s, transform .35s var(--ease);
}
.ph--video:hover .ph__play{ background:rgba(168,40,32,.18); transform:scale(1.06); }
.ph::after{ /* subtle warm glow corner so placeholders read as "premium" */
  content:""; position:absolute; right:-30%; bottom:-40%; width:70%; height:80%;
  background:radial-gradient(circle, rgba(168,40,32,.16), transparent 70%);
}
.ph--photo{
  aspect-ratio:5/5;
  min-height:0;
  overflow:hidden;
}
.ph--video{
  overflow:hidden;
}

.ph--video video{
  width:100%;
  height:100%;
  object-fit:cover !important;
  object-position:center top !important;
  display:block;
}
.ph__image{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}

/* ============================================================
   9. HERO
   ============================================================ */
.hero{ position:relative; min-height:100svh; display:grid; align-items:end; overflow:hidden; }
.hero__media{ position:absolute; inset:0; z-index:0; border:0; border-radius:0; }
/* The <picture> wrapper must not become a grid item in .hero — display:contents
   makes it generate no box, so the absolute .hero__media img behaves exactly as
   it did when it was a direct child. Keeps the hero layout identical. */
.hero picture{ display:contents; }
.hero__media::after{ display:none; }
.hero__media .ph__inner{ opacity:.55; }
.hero__scrim{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(13,11,9,.55) 0%, rgba(13,11,9,.2) 35%, rgba(13,11,9,.78) 82%, var(--ink) 100%),
    radial-gradient(80% 60% at 50% 30%, transparent, rgba(13,11,9,.4));
}
.hero__inner{
  position:relative;
  z-index:3;
  width:100%;
  padding-bottom:clamp(3rem,7vw,6rem);
  padding-top:4rem;
  transform:translateX(-120px);  
}
.hero__title{ display:flex; flex-direction:column; }
.hero .brand-mark{ font-size:clamp(3.6rem,15vw,11rem); font-weight:300; }
.hero .brand-logo{ height:clamp(50px,12vw,115px); }
.hero__sub{
  font-family:var(--display);
  font-style:italic;
  font-size:clamp(0.95rem,2vw,1.35rem);
  color:var(--cream);
  max-width:26ch;
  margin:.8rem 0 0;
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2.2rem; }
.hero__scroll{ position:absolute; left:50%; bottom:1.6rem; z-index:3; transform:translateX(-50%); color:var(--smoke); font-size:.66rem; letter-spacing:.28em; text-transform:uppercase; display:flex; flex-direction:column; align-items:center; gap:.6rem; }
.hero__scroll::after{ content:""; width:1px; height:42px; background:linear-gradient(var(--accent),transparent); animation:scrollPulse 2.4s var(--ease) infinite; }
@keyframes scrollPulse{ 0%,100%{ transform:scaleY(.5); opacity:.4; } 50%{ transform:scaleY(1); opacity:1; } }
 
/* ============================================================
   10. HOME SECTIONS
   ============================================================ */
/* Concept split */
.concept{ display:grid; gap:clamp(2rem,5vw,4.5rem); align-items:center; grid-template-columns:1fr; }
.concept__media{ position:relative; }
.concept__media .ph{ aspect-ratio:4/5; }
.concept blockquote{ font-family:var(--display); font-style:italic; font-size:clamp(1.5rem,3vw,2.3rem); line-height:1.3; margin:1.4rem 0 0; color:var(--cream); }
.concept blockquote span{ color:var(--accent-soft); }
 
/* Three pillar cards */
.pillars{ display:grid; gap:1.2rem; grid-template-columns:1fr; margin-top:3rem; }
.pillar{
  position:relative; overflow:hidden; border:1px solid var(--line-soft);
  border-radius:var(--radius-lg); background:var(--panel);
  padding:2.2rem 1.8rem; min-height:280px; display:flex; flex-direction:column;
  transition:transform .5s var(--ease), border-color .5s, background .5s;
}
.pillar .ph{ position:absolute; inset:0; border:0; border-radius:0; opacity:.16; }
.pillar__body{ position:relative; z-index:2; margin-top:auto; }
.pillar__no{ font-family:var(--display); font-size:.9rem; color:var(--accent-soft); letter-spacing:.1em; }
.pillar h3{ font-size:clamp(1.7rem,2.6vw,2.1rem); margin:.5rem 0 .6rem; }
.pillar p{ color:var(--smoke); font-size:.95rem; margin:0; }
.pillar .ph--photo .ph__image{
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1) translateY(-150px);;
  transform-origin:center;
}
/* ember glow follows cursor (vars set by JS) */
.glow::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(180px 180px at var(--mx,50%) var(--my,50%), rgba(168,40,32,.22), transparent 65%);
  opacity:0; transition:opacity .4s var(--ease);
}
.glow:hover{ transform:translateY(-6px); border-color:var(--accent); background:var(--raised); }
.glow:hover::before{ opacity:1; }
 
/* Gallery preview strip */
.preview-grid{
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:1rem;
  margin-top:2.5rem;
}
.preview-grid .ph{
  aspect-ratio:3/5;
  overflow:hidden;
}
.preview-grid .ph:first-child{
  grid-row:1 / span 2;
  aspect-ratio:auto;
}
 
/* Instagram-style grid */
.ig-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:1.5rem; }
.ig-proof{ display:inline-flex; align-items:center; gap:.6rem; color:var(--accent-soft); font-size:.85rem; letter-spacing:.1em; }
.ig-proof strong{ font-family:var(--display); font-size:1.4rem; color:var(--cream); font-weight:400; }
.ig-grid{ display:grid; gap:.7rem; grid-template-columns:repeat(2,1fr); margin-top:2.2rem; }
.ig-cell{ position:relative; aspect-ratio:1/1; overflow:hidden; border-radius:var(--radius); }
.ig-cell .ph{ position:absolute; inset:0; min-height:0; border-radius:0; }
.ig-cell__tag{
  position:absolute; inset:auto 0 0 0; z-index:3; padding:.7rem .8rem;
  display:flex; align-items:center; gap:.45rem; font-size:.7rem; letter-spacing:.08em; color:var(--cream);
  background:linear-gradient(transparent, rgba(11,9,7,.85)); opacity:0; transform:translateY(8px);
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.ig-cell:hover .ig-cell__tag{ opacity:1; transform:translateY(0); }
.ig-cell__tag svg{ width:14px; height:14px; color:var(--accent-soft); }
 
/* Booking CTA band */
.cta-band{ position:relative; overflow:hidden; }
.cta-band .ph{ position:absolute; inset:0; border:0; border-radius:0; opacity:.22; }
.cta-band__scrim{ position:absolute; inset:0; background:radial-gradient(120% 120% at 50% 0,rgba(168,40,32,.16),transparent 55%), rgba(13,11,9,.55); }
.cta-band__inner{ position:relative; z-index:3; text-align:center; max-width:46ch; margin-inline:auto; }
 
/* ============================================================
   11. MENU PAGE
   ============================================================ */
.page-hero{ position:relative; padding-top:clamp(8rem,16vh,11rem); padding-bottom:clamp(2.5rem,5vw,4rem); }
.page-hero .eyebrow{ margin-bottom:1rem; }
.page-hero p{ max-width:54ch; }
 
.filters{ display:flex; flex-wrap:wrap; gap:.6rem; margin:2.5rem 0 0; position:sticky; top:72px; z-index:20; padding-block:.6rem; }
.filter{
  background:transparent; border:1px solid var(--line); border-radius:100px;
  color:var(--smoke); padding:.55em 1.25em; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; font-weight:500;
  transition:all .35s var(--ease);
}
.filter[aria-pressed="true"]{ background:var(--accent); color:#fdf6ea; border-color:var(--accent); }
.filter:not([aria-pressed="true"]):hover{ color:var(--accent-soft); border-color:var(--accent); }
 
.menu-grid{ display:grid; gap:1rem; grid-template-columns:1fr; margin-top:2.4rem; }
.menu-card{
  position:relative; overflow:hidden; display:flex; gap:1.2rem; align-items:flex-start;
  background:var(--panel); border:1px solid var(--line-soft); border-radius:var(--radius-lg);
  padding:1.3rem; transition:transform .45s var(--ease), border-color .45s, background .45s;
}
.menu-card__thumb{ flex:0 0 84px; }
.menu-card__thumb .ph{ width:84px; height:84px; min-height:0; border-radius:var(--radius); }
.menu-card__main{ flex:1; }
.menu-card__top{ display:flex; align-items:baseline; gap:.8rem; justify-content:space-between; }
.menu-card h3{ font-size:1.3rem; }
.menu-card .price{ font-family:var(--display); color:var(--accent-soft); font-size:1.2rem; white-space:nowrap; }
.menu-card p{ color:var(--smoke); font-size:.9rem; margin:.4rem 0 0; }
.menu-card__tags{ display:flex; gap:.4rem; margin-top:.7rem; flex-wrap:wrap; }
.tag{ font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-soft); border:1px solid var(--line); border-radius:100px; padding:.25em .7em; }
.tag--zero{ color:var(--green-soft); border-color:rgba(111,154,56,.45); }
.menu-card.is-hidden{ display:none; }
.menu-cat-label{ grid-column:1/-1; display:flex; align-items:center; gap:1rem; margin-top:1.5rem; }
.menu-cat-label:first-child{ margin-top:0; }
.menu-cat-label h2{ font-size:clamp(1.6rem,3vw,2.2rem); color:var(--cream); }
.menu-cat-label .rule{ flex:1; }
.menu-cat-label.is-hidden{ display:none; }
 
/* ============================================================
   12. EXPERIENCE PAGE
   ============================================================ */
.chapter{ display:grid; gap:clamp(1.8rem,4vw,4rem); align-items:center; grid-template-columns:1fr; padding-block:clamp(2.5rem,5vw,4rem); }
.chapter + .chapter{ border-top:1px solid var(--line-soft); }
.chapter__media .ph{ aspect-ratio:4/3; }
 
.chapter__video{
  width:100%;
  height:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:var(--radius-lg);
  display:block;
  border:1px solid var(--line-soft);
}
.chapter__image{
  width:100%;
  height:450px;
  object-fit:cover;
  object-position:center;
  border-radius:var(--radius-lg);
  display:block;
  border:1px solid var(--line-soft);
}
.chapter__no{ font-family:var(--display); font-style:italic; font-size:1.05rem; color:var(--accent-soft); letter-spacing:.05em; }
.chapter h2{ font-size:clamp(2rem,4vw,3.2rem); margin:.5rem 0 1rem; }
.chapter p{ color:var(--smoke); max-width:48ch; }
.chapter ul.facts{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.5rem; }
.chapter ul.facts li{ font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-soft); border:1px solid var(--line); border-radius:100px; padding:.4em .9em; }
.exp-intro{ max-width:58ch; }
 
/* Centered story interlude ("La Nostra Storia") — same chapter spacing & reveal, single column */
.chapter.chapter--center{ grid-template-columns:1fr; text-align:center; }
.chapter--center .chapter__text{ max-width:64ch; margin-inline:auto; }
.chapter--center .chapter__text p{ max-width:none; margin-inline:auto; }
.rule--center{ width:96px; margin:1.1rem auto 1.5rem; }
 
/* ============================================================
   13. GALLERY PAGE  (masonry + lightbox)
   ============================================================ */
.gallery-filters{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:2rem; }
.masonry{ columns:1; column-gap:1rem; margin-top:2.4rem; }
.tile{
  position:relative; break-inside:avoid; margin-bottom:1rem; overflow:hidden; border-radius:var(--radius-lg);
  cursor:pointer; border:1px solid var(--line-soft);
}
.tile .ph{ border:0; border-radius:0; }
.tile.t-tall .ph{ min-height:360px; }
.tile.t-wide .ph{ min-height:220px; }
.tile.t-std .ph{ min-height:280px; }
.tile__label{
  position:absolute; inset:auto 0 0 0; z-index:3; padding:1.1rem 1rem;
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  background:linear-gradient(transparent, rgba(11,9,7,.9));
  opacity:0; transform:translateY(10px); transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.tile:hover .tile__label{ opacity:1; transform:translateY(0); }
.tile__label span{ font-size:.8rem; letter-spacing:.1em; }
.tile__label .kind{ font-size:.62rem; letter-spacing:.18em; text-transform:uppercase; color:var(--accent-soft); }
.tile::after{ content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 0 var(--accent); transition:box-shadow .4s var(--ease); pointer-events:none; }
.tile:hover::after{ box-shadow:inset 0 0 0 1px var(--accent); }
.tile.is-hidden{ display:none; }
 
/* Lightbox */
.lightbox{
  position:fixed; inset:0; z-index:120; display:none; place-items:center;
  background:rgba(8,6,4,.92); backdrop-filter:blur(8px); padding:var(--gutter);
}
.lightbox.open{ display:grid; }
.lightbox__frame{ width:min(900px,92vw); max-height:84vh; aspect-ratio:16/10; }
.lightbox__frame .ph{ width:100%; height:100%; }
.lightbox__caption{ text-align:center; color:var(--smoke); margin-top:1rem; font-size:.85rem; letter-spacing:.08em; }
.lightbox__close{ position:absolute; top:1.4rem; right:1.6rem; width:46px; height:46px; border-radius:50%; border:1px solid var(--line); background:transparent; color:var(--cream); font-size:1.3rem; display:grid; place-items:center; transition:.3s; }
.lightbox__close:hover{ border-color:var(--accent); color:var(--accent); transform:rotate(90deg); }
.lightbox__nav{ position:absolute; top:50%; transform:translateY(-50%); width:50px; height:50px; border-radius:50%; border:1px solid var(--line); background:rgba(13,11,9,.6); color:var(--cream); display:grid; place-items:center; transition:.3s; }
.lightbox__nav:hover{ border-color:var(--accent); color:var(--accent); }
.lightbox__nav.prev{ left:1.2rem; } .lightbox__nav.next{ right:1.2rem; }
 
/* ============================================================
   14. CONTACT PAGE
   ============================================================ */
.contact-grid{ display:grid; gap:2.5rem; grid-template-columns:1fr; }
.info-card{ background:var(--panel); border:1px solid var(--line-soft); border-radius:var(--radius-lg); padding:1.8rem; }
.info-card h3{ font-size:1.5rem; margin-bottom:1.1rem; }
.info-row{ display:flex; gap:.9rem; align-items:flex-start; padding:.7rem 0; border-bottom:1px solid var(--line-soft); }
.info-row:last-child{ border-bottom:0; }
.info-row svg{ width:20px; height:20px; color:var(--accent-soft); flex:0 0 20px; margin-top:.15rem; }
.info-row a:hover{ color:var(--accent-soft); }
 
.hours{ width:100%; }
.hours li{ display:flex; justify-content:space-between; gap:1rem; padding:.6rem 0; border-bottom:1px solid var(--line-soft); }
.hours li:last-child{ border-bottom:0; }
.hours .day{ color:var(--cream); letter-spacing:.04em; }
.hours .time{ color:var(--smoke); text-align:right; font-size:.92rem; }
.hours li.today{ background:rgba(168,40,32,.06); margin-inline:-.6rem; padding-inline:.6rem; border-radius:var(--radius); }
.hours li.today .day{ color:var(--accent-soft); }
.hours li.closed .time{ color:var(--ember-soft); }
 
.contact-actions{ display:grid; gap:.7rem; grid-template-columns:1fr 1fr; }
.contact-actions .btn{ width:100%; }
 
.map-wrap{ position:relative; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line-soft); }
.map-wrap .ph{ aspect-ratio:16/9; border:0; border-radius:0; }
 
/* ============================================================
   15. REVEAL ANIMATIONS + REDUCED MOTION
   ============================================================ */
[data-reveal]{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out); }
[data-reveal].in{ opacity:1; transform:none; }
[data-reveal][data-delay="1"]{ transition-delay:.08s; }
[data-reveal][data-delay="2"]{ transition-delay:.16s; }
[data-reveal][data-delay="3"]{ transition-delay:.24s; }
[data-reveal][data-delay="4"]{ transition-delay:.32s; }
 
/* Hero load reveal */
.hero [data-hero]{ opacity:0; transform:translateY(30px); animation:heroIn 1.1s var(--ease-out) forwards; }
.hero [data-hero="1"]{ animation-delay:.15s; }
.hero [data-hero="2"]{ animation-delay:.45s; }
.hero [data-hero="3"]{ animation-delay:.7s; }
.hero [data-hero="4"]{ animation-delay:.9s; }
@keyframes heroIn{ to{ opacity:1; transform:none; } }
 
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  [data-reveal]{ opacity:1; transform:none; }
  .hero [data-hero]{ opacity:1; transform:none; }
}
 
/* ============================================================
   RESPONSIVE  (mobile-first → up)
   ============================================================ */
@media (min-width:600px){
  .menu-grid{ grid-template-columns:repeat(2,1fr); }
  .menu-cat-label{ grid-column:1/-1; }
  .contact-actions{ grid-template-columns:repeat(4,1fr); }
}
@media (min-width:760px){
  .pillars{ grid-template-columns:repeat(3,1fr); }
  .ig-grid{ grid-template-columns:repeat(4,1fr); }
  .masonry{ columns:2; }
  .footer-grid{ grid-template-columns:1.6fr 1fr 1fr 1fr; }
}
@media (min-width:900px){
  .nav-links{ display:flex; }
  .concept{ grid-template-columns:1fr 1fr; }
  .chapter{ grid-template-columns:1fr 1fr; }
  .chapter.flip .chapter__media{ order:2; }
  .preview-grid{ grid-template-columns:repeat(4,1fr); }
  .preview-grid .ph:first-child{ grid-column:1/3; grid-row:1/3; aspect-ratio:auto; }
  .contact-grid{ grid-template-columns:1.1fr .9fr; }
  .contact-grid--3{ grid-template-columns:1fr 1fr 1fr; }
  .masonry{ columns:3; }
}
@media (min-width:1100px){
  .menu-grid{ grid-template-columns:repeat(2,1fr); }
}
 
/* Mobile nav visibility */
@media (max-width:899px){
  .nav-links, .header-tools .socials{ display:none; }
  .burger{ display:flex; }
}
@media (min-width:900px){
  .burger, .mobile-menu{ display:none; }
}

/* ============================================================
   16. MOBILE FIXES   (added later — DESKTOP LAYOUT UNTOUCHED)
   ------------------------------------------------------------
   Every rule below is inside a max-width media query, so it ONLY
   applies to phones / small tablets. None of it changes the
   laptop or desktop layout in any way.
   ============================================================ */

/* ---- Phones & small tablets (<= 899px) ---- */
@media (max-width:899px){

  /* 1) HERO — on desktop the content is intentionally pulled 120px to
        the left for a "bleed" effect. On a narrow screen that pushed
        the logo, subtitle and buttons off the left edge. Reset it so
        the hero sits inside the normal page gutter on mobile. */
  .hero__inner{ transform:none; }

  /* 2) HEADER — stop the logo, language toggle, Book button and the
        hamburger from crowding / overlapping on a narrow bar. The
        language toggle and full menu already live in the slide-out
        drawer, so we hide the redundant header copy and slim things. */
  .site-header{ gap:.6rem; }
  .site-header .brand-logo{ height:30px; }
  .header-tools{ gap:.5rem; }
  .header-tools .lang-switch{ display:none; }

  /* 3) HOME gallery-preview strip — it stayed a cramped 3-column mosaic
        on phones. Drop to a clean 2-up grid, and let the first (tall)
        photo show at its full natural height — like the laptop — instead
        of a wide strip that cropped it down to just the spoon. */
  .preview-grid{ grid-template-columns:1fr 1fr; }
  .preview-grid .ph{ aspect-ratio:1/1; }
  .preview-grid .ph:first-child{
    grid-column:1 / -1;
    grid-row:auto;
    aspect-ratio:auto;
  }
  .preview-grid .ph:first-child .ph__image{ height:auto; }

  /* 4) GALLERY masonry — the photos/videos sit directly in the grid
        without the .tile wrapper that normally carries spacing, so they
        stacked with no gap and looked stuck together. Add a bottom gap
        (and keep each item from splitting across columns). */
  .masonry > .ph,
  .masonry > .gallery-video,
  .masonry > video{
    margin-bottom:1rem;
    break-inside:avoid;
  }

  /* 5) HAMBURGER / CLOSE (X) — the header sat below the open menu drawer
        in the stacking order, so when the menu opened it covered the
        button and hid the X, leaving no visible way to close. Lift the
        header (which contains the burger) above the drawer on mobile so
        the X is always visible and tappable. */
  .site-header{ z-index:60; }

  /* 6) HERO scroll hint ("Scorri") — it's pinned to the bottom-centre of
        the hero and on a phone it landed on top of the "La Cucina"
        button. It's purely decorative, so hide it on small screens. */
  .hero__scroll{ display:none; }

  /* 7) MOBILE MENU drawer — now that the header/logo sits above the open
        drawer (see #5), the first link ("Home") was tucked under the
        logo. Push the menu links down so they start below the header,
        keeping the logo and the X cleanly at the top. */
  .mobile-menu{ padding-top:6.5rem; }

  /* 8) HERO background — the hero media has no object-fit, so on a tall,
        narrow phone a wide photo/video didn't stretch to fill and the
        hero looked wrong. Force the media to cover the whole hero,
        cropped to centre. (Laptop is wide enough that it already filled,
        so this only affects phones.) */
  .hero__media,
  .hero__media > img,
  .hero__media > video,
  img.hero__media,
  video.hero__media{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
  }
}

/* ---- Small phones (<= 360px) ---- */
@media (max-width:360px){
  /* On the very narrowest phones, also drop the header Book button so
     the bar is just logo + menu. Booking is still reachable from the
     menu pages and the footer on every page. */
  .header-tools{ display:none; }
  .hero__inner{ padding-top:3rem; }
}
/* ============================================================
   17. REAL-MEDIA POLISH  (all screens — phone AND laptop)
   ------------------------------------------------------------
   Every image box (.ph) was given a dashed red PLACEHOLDER outline
   so empty slots were easy to find while building. Now that real
   photos/videos are in, that outline reads as a red dashed frame
   around each picture (Instagram grid, gallery preview, etc.).
   Remove it ONLY where a real <img> or <video> actually sits, so it
   looks finished. Truly-empty placeholders (still no media) keep
   their dashed hint so they remain easy to spot.
   NOTE: this intentionally also cleans the same frames on desktop —
   it removes a line only, nothing is moved or resized.
   ============================================================ */
.ph:has(img),
.ph:has(video){ border:0; }

/* ============================================================
   18. INSTAGRAM GRID — FILL FIX  (all screens)
   ------------------------------------------------------------
   Some Instagram tiles (the video tile, the wine-room tile) left an
   empty dark band at the top because the media wasn't stretching to
   the full height of its square tile. Pin every photo/video to fill
   the whole tile edge-to-edge, cropped to centre.
   ============================================================ */
.ig-cell{ position:relative; }
.ig-cell .ph{ position:absolute; inset:0; }
.ig-cell .ph img,
.ig-cell .ph video,
.ig-cell .ph__image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}