/* =========================================================
   NELIA — Lasagneria Artigianale
   Design tokens
   ========================================================= */
:root{
  /* brand palette — exact hex from branding PDF */
  --cream:        #eed1a6;
  --cream-paper:  #f7ead0;
  --cream-deep:   #e2bd88;
  --ink:          #221a12;
  --ink-soft:     #4a3a28;
  --night:        #14100c;
  --red:          #fb3232;
  --red-deep:     #d81f1f;
  --blue:         #6390a5;
  --blue-deep:    #4d7488;
  --white:        #fffaf0;

  /* type */
  --font-display: "Fraunces", "Georgia", serif;
  --font-body:    "Inter", "Helvetica Neue", Arial, sans-serif;

  --fs-caption:   0.8125rem;
  --fs-body:      1.0625rem;
  --fs-body-lg:   1.25rem;
  --fs-h3:        clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --fs-h2:        clamp(2.1rem, 1.6rem + 2.2vw, 3.4rem);
  --fs-h1:        clamp(2.6rem, 1.8rem + 3.8vw, 5.6rem);
  --fs-display:   clamp(2.6rem, 1.6rem + 5vw, 6.4rem);

  --measure:      38rem;
  --container:    76rem;
  --gutter:       clamp(1.25rem, 3vw, 3rem);

  --radius-sm:    0.5rem;
  --radius-md:    1rem;
  --radius-lg:    1.75rem;

  --ease-out:     cubic-bezier(.16,.8,.24,1);
  --dur-fast:     180ms;
  --dur-med:      420ms;
  --dur-slow:     900ms;

  --topbar-h:     64px;
  --scallop-h:    22px;
}

/* =========================================================
   Reset
   ========================================================= */
*, *::before, *::after{ box-sizing: border-box; }
html{
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
}
body{
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width: 100%; display: block; }
h1,h2,h3,h4,p,figure{ margin: 0; }
ul{ margin: 0; padding: 0; list-style: none; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
svg{ display: block; }

/* respect reduced motion globally */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* focus visibility */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible{
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}

.container{
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link{
  position: absolute;
  left: 1rem;
  top: -80px;
  background: var(--ink);
  color: var(--cream-paper);
  padding: .75rem 1.25rem;
  border-radius: var(--radius-sm);
  z-index: 999;
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus{ top: 1rem; }

.eyebrow{
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-caption);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--blue-deep);
}

.visually-hidden{
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* =========================================================
   Reveal-on-scroll utility
   ========================================================= */
.reveal{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
  will-change: opacity, transform;
}
.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}
.reveal-stagger > *{ transition-delay: calc(var(--i, 0) * 90ms); }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity: 1; transform: none; transition: none; }
}

/* =========================================================
   Scalloped "foil-tray edge" divider — signature motif
   ========================================================= */
.scallop{
  position: relative;
  height: var(--scallop-h);
  width: 100%;
  -webkit-mask-image: radial-gradient(circle at 11px 0, transparent 11px, black 11.5px);
  mask-image: radial-gradient(circle at 11px 0, transparent 11px, black 11.5px);
  -webkit-mask-size: 22px 22px;
  mask-size: 22px 22px;
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-mask-position: center;
  mask-position: center;
}
.scallop--cream{ background: var(--cream); }
.scallop--red{ background: var(--red); }
.scallop--night{ background: var(--night); }
.scallop--flip{ transform: rotate(180deg); }

/* the wrapper supplies the colour that shows through the bites */
.scallop-wrap{ line-height: 0; }
.scallop-wrap--red{ background: var(--red); }

/* =========================================================
   Top bar
   ========================================================= */
.topbar{
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 500;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: clamp(1rem, 3vw, 2.25rem);
  transition: background-color var(--dur-med) var(--ease-out),
              box-shadow var(--dur-med) var(--ease-out);
}
.topbar::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(238, 209, 166, .0);
  backdrop-filter: blur(0px);
  transition: background-color var(--dur-med) var(--ease-out), backdrop-filter var(--dur-med) var(--ease-out);
  z-index: -1;
}
.topbar.is-scrolled::before{
  background: rgba(247, 234, 208, .88);
  backdrop-filter: blur(10px);
  box-shadow: 0 6px 24px rgba(34,26,18,.08);
}

.lang-switch{
  display: flex;
  align-items: center;
  gap: .4rem;
}
.lang-btn{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid transparent;
  opacity: .55;
  transition: opacity var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.lang-btn:hover{ opacity: .85; transform: translateY(-1px); }
.lang-btn[aria-pressed="true"]{
  opacity: 1;
  border-color: var(--red);
}
.lang-btn svg{ width: 100%; height: 100%; }

.topbar__logo{
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
}
.topbar__logo img{
  height: 30px;
  width: auto;
  transition: opacity var(--dur-med) var(--ease-out);
}
/* cream lockup while the bar floats over the dark hero, red once it docks */
.topbar__logo img + img{ position: absolute; inset: 0; margin: auto; }
.topbar__logo .topbar__logo--red{ opacity: 0; }
.topbar.is-scrolled .topbar__logo--red{ opacity: 1; }
.topbar.is-scrolled .topbar__logo--cream{ opacity: 0; }

.topbar__menu-link{
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-caption);
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .55rem 1.1rem;
  border-radius: 999px;
  border: 1.5px solid rgba(247,234,208,.75);
  color: var(--cream-paper);
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-med) var(--ease-out);
}
.topbar__menu-link:hover{ background: var(--cream-paper); color: var(--night); }
.topbar.is-scrolled .topbar__menu-link{
  border-color: var(--ink);
  color: var(--ink);
}
.topbar.is-scrolled .topbar__menu-link:hover{ background: var(--ink); color: var(--cream-paper); }

/* =========================================================
   Floating WhatsApp button
   ========================================================= */
.fab-whatsapp{
  position: fixed;
  right: clamp(1rem, 3vw, 1.75rem);
  bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: 600;
  display: flex;
  align-items: center;
  gap: .6rem;
  background: var(--red);
  color: var(--white);
  padding: .85rem 1.1rem;
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(216,31,31,.35), 0 2px 8px rgba(0,0,0,.15);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.fab-whatsapp:hover{
  background: var(--red-deep);
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(216,31,31,.4), 0 2px 8px rgba(0,0,0,.2);
}
.fab-whatsapp svg{ width: 22px; height: 22px; flex: none; }
.fab-whatsapp__label{
  font-weight: 700;
  font-size: .875rem;
  letter-spacing: .01em;
  white-space: nowrap;
}
@media (max-width: 560px){
  .fab-whatsapp__label{ display: none; }
  .fab-whatsapp{ padding: .9rem; }
}
@media (prefers-reduced-motion: no-preference){
  .fab-whatsapp{ animation: fab-pulse 3.4s ease-in-out infinite; }
}
@keyframes fab-pulse{
  0%, 88%, 100%{ box-shadow: 0 10px 30px rgba(216,31,31,.35), 0 2px 8px rgba(0,0,0,.15), 0 0 0 0 rgba(251,50,50,.0); }
  92%{ box-shadow: 0 10px 30px rgba(216,31,31,.35), 0 2px 8px rgba(0,0,0,.15), 0 0 0 10px rgba(251,50,50,.0); }
}

/* =========================================================
   HERO — "a montra acesa"
   Night outside the shop: the sign flickers on, printed photos
   float in the warm dark.
   ========================================================= */
.hero{
  /* width of the centred copy column — the cards are sized against it */
  --copy-w: 44rem;
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding-top: calc(var(--topbar-h) + 2.5rem);
  padding-bottom: 5rem;
  overflow: hidden;
  isolation: isolate;
  background: var(--night);
}

/* warm lightbox glow behind the sign */
/* photographic backdrop — the beach shot carries the whole frame */
.hero__photo{
  position: absolute;
  inset: 0;
  z-index: 1;
}
.hero__photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* the source is portrait; bias up the frame so the towel and sea read
     rather than a single cropped tray */
  object-position: 50% 28%;
  opacity: .62;
}
/* Two scrims: a radial that keeps the middle dark, plus a horizontal band
   over the copy so the red keywords hold their contrast. Top and bottom stay
   clear, so the photo still reads. */
.hero__photo::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      transparent 26%,
      rgba(20,16,12,.55) 42%,
      rgba(20,16,12,.6) 78%,
      transparent 94%
    ),
    radial-gradient(
      56% 56% at 50% 50%,
      rgba(20,16,12,.9) 0%,
      rgba(20,16,12,.85) 40%,
      rgba(20,16,12,.58) 74%,
      rgba(20,16,12,.42) 100%
    );
}


/* grain — barely there, just enough to feel printed */
.hero::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: .05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* soft vignette — light enough that the photo still shows at the edges */
.hero::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: radial-gradient(135% 100% at 50% 42%, transparent 55%, rgba(0,0,0,.5) 100%);
}

/* ---- the sign ---- */
.hero__logo{
  position: relative;
  z-index: 5;
  width: min(62vw, 420px);
  margin-inline: auto;
  margin-bottom: clamp(1.5rem, 3.5vw, 2.25rem);
}
.hero__logo img{
  width: 100%;
  height: auto;
  /* a plain soft shadow to lift it off the photo — no glow */
  filter: drop-shadow(0 4px 22px rgba(0,0,0,.6));
}

.hero__copy{
  position: relative;
  z-index: 5;
  max-width: 44rem;
  margin-inline: auto;
  padding-inline: 1rem;
}
.hero__copy p{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.15rem, 1rem + 1vw, 1.6rem);
  line-height: 1.5;
  color: rgba(247,234,208,.9);
  margin-bottom: 1rem;
  text-shadow: 0 1px 18px rgba(0,0,0,.6);
}
.hero__copy mark{
  background: none;
  color: var(--red);
  font-weight: 700;
  font-style: italic;
}
.hero__copy .hero__signature{
  margin-top: 1.75rem;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: var(--fs-caption);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: rgba(247,234,208,.6);
}
.hero__copy .hero__signature strong{
  color: var(--red);
  font-weight: 800;
}

.hero__scroll-cue{
  position: relative;
  z-index: 5;
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  font-size: var(--fs-caption);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(247,234,208,.65);
}
.hero__scroll-cue:hover{ color: var(--cream-paper); }
.hero__scroll-cue svg{ width: 16px; height: 22px; }
@media (prefers-reduced-motion: no-preference){
  .hero__scroll-cue svg{ animation: cue-bob 1.8s ease-in-out infinite; }
}
@keyframes cue-bob{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(6px); }
}

/* ---- floating printed photos ---- */
/* layer stack: photo 1 · glow 2 · cards 3 · grain+vignette 4 · type 5 */
.hero__cards{
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.hero-card{
  position: absolute;
  left: var(--x, auto);
  top: var(--y, auto);
  /* never wider than the gutter beside the copy column, so a card can never
     end up sitting under the text */
  width: min(var(--w, 190px), calc((100% - var(--copy-w)) / 2 - 2.5rem));
  aspect-ratio: 4 / 5;
  will-change: transform;
  /* parallax only — rotation and float live on the inner element */
  transform: translateY(var(--parallax-y, 0px));
}
.hero-card__inner{
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 10px;
  border: 4px solid rgba(247,234,208,.92);
  box-shadow: 0 26px 50px rgba(0,0,0,.6), 0 4px 12px rgba(0,0,0,.4);
  transform: rotate(var(--rot, 0deg));
  will-change: transform;
}
.hero-card img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (prefers-reduced-motion: no-preference){
  /* the sign flickers on, then the photos land, then they drift */
  .hero__logo img{ animation: sign-on 1.9s var(--ease-out) both; }
  .hero__copy, .hero__scroll-cue{ animation: rise-in .9s var(--ease-out) 1.1s both; }
  .hero__scroll-cue{ animation-delay: 1.3s; }
  .hero-card__inner{
    animation:
      card-in .9s var(--ease-out) var(--d, 0s) both,
      card-float var(--dur, 7s) ease-in-out calc(var(--d, 0s) + .9s) infinite;
  }
}
@keyframes sign-on{
  0%   { opacity: 0; }
  18%  { opacity: .4; }
  24%  { opacity: .06; }
  36%  { opacity: .78; }
  43%  { opacity: .18; }
  58%  { opacity: 1; }
  66%  { opacity: .72; }
  100% { opacity: 1; }
}
@keyframes rise-in{
  from{ opacity: 0; transform: translateY(22px); }
  to  { opacity: 1; transform: translateY(0); }
}
@keyframes card-in{
  from{ opacity: 0; transform: rotate(var(--rot,0deg)) translateY(54px) scale(.9); }
  to  { opacity: 1; transform: rotate(var(--rot,0deg)) translateY(0) scale(1); }
}
@keyframes card-float{
  0%,100%{ transform: rotate(var(--rot,0deg)) translateY(0); }
  50%    { transform: rotate(var(--rot,0deg)) translateY(-15px); }
}

/* Fewer photos as the frame narrows, so the type keeps its room. Below the
   last step the gutter is too tight for any card and the backdrop photo
   carries the hero on its own. */
@media (max-width: 1340px){
  .hero-card--b, .hero-card--d{ display: none; }
}
@media (max-width: 1140px){
  .hero__cards{ display: none; }
}
@media (max-width: 860px){
  .hero__cards{ display: none; }
  .hero__photo{
    display: block;
    position: absolute;
    inset: 0;
    z-index: 1;
  }
  .hero__photo img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .72;
  }
  /* the photo carries the top of the frame, around the sign; it only gives way
     lower down, where the copy needs a dark bed to stay readable */
  .hero__photo::after{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      180deg,
      rgba(20,16,12,.38) 0%,
      rgba(20,16,12,.42) 30%,
      rgba(20,16,12,.93) 50%,
      rgba(20,16,12,.96) 100%
    );
  }
}

@media (max-width: 640px){
  .topbar{ padding-inline: .75rem; }
  .topbar__logo img{ height: 22px; }
  .lang-btn{ width: 30px; height: 30px; }
  .topbar__menu-link{ padding: .5rem .85rem; }

  .hero{ padding-top: calc(var(--topbar-h) + 1rem); padding-bottom: 6rem; }
  .hero__logo{ width: 66vw; margin-bottom: 1rem; }
  .hero__copy p{ font-size: 1.05rem; margin-bottom: .75rem; }
  .hero__copy .hero__signature{ margin-top: 1.1rem; padding-right: 3.25rem; }
  .hero__scroll-cue{ margin-top: 1.5rem; }
}

/* =========================================================
   MENU
   ========================================================= */
.menu{
  position: relative;
  background: var(--red);
  color: var(--white);
  padding-block: clamp(3rem, 6vw, 5rem) clamp(4rem, 8vw, 7rem);
}
.menu__intro{
  text-align: center;
  max-width: 40rem;
  margin: 0 auto clamp(2rem, 5vw, 3.5rem);
}
.menu__intro .eyebrow{ color: var(--cream); opacity: .85; }
.menu__intro h2{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h2);
  margin-top: .5rem;
  color: var(--cream-paper);
}

.menu__nav{
  position: sticky;
  top: calc(var(--topbar-h) - 1px);
  z-index: 50;
  display: flex;
  justify-content: center;
  gap: .6rem;
  flex-wrap: wrap;
  padding-block: .75rem;
  margin-bottom: clamp(2.5rem, 6vw, 4rem);
  background: linear-gradient(180deg, var(--red) 70%, rgba(251,50,50,0));
}
.menu__nav-btn{
  font-family: var(--font-body);
  font-weight: 800;
  font-size: var(--fs-caption);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cream-paper);
  padding: .6rem 1.15rem;
  border-radius: 999px;
  border: 1.5px solid rgba(255,250,240,.4);
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.menu__nav-btn:hover{ border-color: var(--white); }
.menu__nav-btn.is-active{
  background: var(--ink);
  border-color: var(--ink);
  color: var(--cream-paper);
}
/* keep the three categories on one line on a phone */
@media (max-width: 640px){
  .menu__nav{ gap: .4rem; }
  .menu__nav-btn{
    padding: .5rem .8rem;
    font-size: .72rem;
    letter-spacing: .06em;
  }
}

.menu__category{
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  scroll-margin-top: calc(var(--topbar-h) + 64px);
}
.menu__category + .menu__category{
  margin-top: clamp(3.5rem, 8vw, 6rem);
  padding-top: clamp(3.5rem, 8vw, 6rem);
  border-top: 1px dashed rgba(255,250,240,.35);
}
@media (min-width: 860px){
  .menu__category{ grid-template-columns: .85fr 1.15fr; gap: 3.5rem; }
  .menu__category--reverse .menu__visual{ order: 2; }
  .menu__category--reverse .menu__list-wrap{ order: 1; }
}

.menu__visual{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.menu__visual-illustration{
  width: min(100%, 340px);
  /* without this the HTML height attribute wins and stretches the image */
  height: auto;
  filter: drop-shadow(0 18px 26px rgba(0,0,0,.28));
}
/* the wine glass is portrait, so cap its height instead of its width */
.menu__visual-illustration--tall{
  width: auto;
  height: clamp(250px, 32vw, 380px);
}
@media (prefers-reduced-motion: no-preference){
  .menu__visual-illustration{ animation: menu-float 5.5s ease-in-out infinite; }
}

/* two illustrations sharing one category visual */
.menu__visual-duo{
  position: relative;
  width: min(100%, 380px);
  aspect-ratio: 1 / .9;
}
.menu__visual-duo img{
  position: absolute;
  height: auto;
  filter: drop-shadow(0 16px 24px rgba(0,0,0,.32));
}
.menu__visual-duo .duo-olives{ width: 74%; left: 0; top: 0; }
.menu__visual-duo .duo-tiramisu{ width: 68%; right: 0; bottom: 0; }
@media (prefers-reduced-motion: no-preference){
  .menu__visual-duo .duo-olives{ animation: menu-float 6.2s ease-in-out infinite; }
  .menu__visual-duo .duo-tiramisu{ animation: menu-float 7.6s ease-in-out .9s infinite; }
}

/* single column below this width, so the illustrations would otherwise run
   nearly edge to edge. Must stay after the base rules to win. */
@media (max-width: 860px){
  .menu__visual-illustration{ width: min(52%, 190px); }
  .menu__visual-illustration--tall{ width: auto; height: clamp(150px, 30vw, 200px); }
  .menu__visual-duo{ width: min(66%, 240px); }
}
@keyframes menu-float{
  0%,100%{ transform: translateY(0) rotate(-1.5deg); }
  50%{ transform: translateY(-12px) rotate(1.5deg); }
}

.menu__category-label{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 1.5rem + 1.6vw, 2.75rem);
  color: var(--cream-paper);
  margin-bottom: .35rem;
}
.menu__category-sub{
  font-size: var(--fs-caption);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,250,240,.7);
  margin-bottom: 1.5rem;
  display: block;
}

.menu__item{
  padding-block: 1.1rem;
  border-bottom: 1px solid rgba(255,250,240,.22);
}
.menu__item:first-of-type{ border-top: 1px solid rgba(255,250,240,.22); }
.menu__item-row{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}
.menu__item-name{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--cream-paper);
}
.menu__item-price{
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--white);
  white-space: nowrap;
}
.menu__item-desc{
  margin-top: .3rem;
  font-size: .95rem;
  color: rgba(255,250,240,.8);
  max-width: 34rem;
}
.menu__item-tag{
  display: inline-block;
  margin-top: .5rem;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--red);
  background: var(--cream-paper);
  padding: .25rem .55rem;
  border-radius: 999px;
}
/* glass / bottle shown side by side, each price under its own label */
.menu__prices{
  display: flex;
  align-items: flex-end;
  gap: .8rem;
  flex: none;
}
.menu__price-unit{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.25;
}
.menu__price-label{
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,250,240,.68);
}
.menu__price-sep{
  width: 1px;
  align-self: stretch;
  margin-block: .15rem;
  background: rgba(255,250,240,.3);
}

/* =========================================================
   QUOTE
   ========================================================= */
.quote{
  position: relative;
  background: var(--cream);
  padding-block: clamp(4.5rem, 10vw, 8rem);
  text-align: center;
  overflow: hidden;
}
.quote__mark{
  position: absolute;
  font-family: var(--font-display);
  font-size: clamp(9rem, 8rem + 10vw, 20rem);
  line-height: 1;
  color: var(--blue);
  opacity: .18;
  top: clamp(-2rem, -4vw, -1rem);
  left: 50%;
  transform: translateX(-50%);
  user-select: none;
  pointer-events: none;
}
.quote blockquote{
  position: relative;
  z-index: 2;
  max-width: 50rem;
  margin-inline: auto;
  font-family: var(--font-display);
  font-weight: 600;
  font-style: italic;
  font-size: var(--fs-display);
  line-height: 1.08;
  color: var(--ink);
  padding-inline: 1rem;
}
.quote cite{
  position: relative;
  z-index: 2;
  display: block;
  margin-top: 1.5rem;
  font-style: normal;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-caption);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--red-deep);
}

/* =========================================================
   RESERVE
   ========================================================= */
.reserve{
  background: var(--cream-deep);
  padding-block: clamp(3.5rem, 8vw, 6rem);
}
.reserve__card{
  position: relative;
  max-width: 52rem;
  margin-inline: auto;
  background: var(--ink);
  color: var(--cream-paper);
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 5vw, 3.5rem);
  text-align: center;
  box-shadow: 0 30px 60px rgba(34,26,18,.25);
}
.reserve__card .eyebrow{ color: var(--red); }
.reserve__card h2{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h2);
  margin-block: .5rem 1rem;
}
.reserve__card p{
  max-width: 34rem;
  margin-inline: auto;
  color: rgba(247,234,208,.8);
}
.reserve__cta{
  margin-top: 2rem;
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  background: var(--red);
  color: var(--white);
  font-weight: 800;
  font-size: 1.05rem;
  padding: 1rem 1.75rem;
  border-radius: 999px;
  transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.reserve__cta:hover{ background: var(--red-deep); transform: translateY(-2px); }
.reserve__cta svg{ width: 22px; height: 22px; }
.reserve__phone{
  margin-top: 1rem;
  font-size: .9rem;
  color: rgba(247,234,208,.65);
}

/* =========================================================
   VISIT (location + hours)
   ========================================================= */
.visit{
  background: var(--cream);
  padding-block: clamp(3.5rem, 8vw, 6rem);
}
.visit__grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: start;
}
@media (min-width: 860px){
  .visit__grid{ grid-template-columns: 1.1fr .9fr; gap: 3.5rem; }
}
.visit__map{
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 22px 44px rgba(34,26,18,.18);
  aspect-ratio: 4 / 3.2;
  border: 6px solid var(--white);
}
.visit__map iframe{ width: 100%; height: 100%; border: 0; display: block; }

.visit__info h2{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h2);
  margin-top: .5rem;
  margin-bottom: 1.25rem;
}
.visit__address{
  font-size: var(--fs-body-lg);
  margin-bottom: .5rem;
}
.visit__link{
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-weight: 700;
  color: var(--red-deep);
  border-bottom: 2px solid currentColor;
  padding-bottom: .1rem;
  margin-bottom: 2rem;
}
.visit__link svg{ width: 16px; height: 16px; }

.hours{
  border-top: 1px solid rgba(34,26,18,.15);
}
.hours__row{
  display: flex;
  justify-content: space-between;
  padding-block: .7rem;
  border-bottom: 1px solid rgba(34,26,18,.15);
  font-weight: 600;
}
.hours__row.is-today{
  color: var(--red-deep);
  font-weight: 800;
}
.hours__row.is-today .hours__badge{
  display: inline-block;
  margin-left: .5rem;
  font-size: .65rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: var(--blue);
  color: var(--white);
  padding: .15rem .5rem;
  border-radius: 999px;
  font-weight: 800;
  vertical-align: middle;
}
.hours__row.is-closed{ opacity: .55; }

/* =========================================================
   GALLERY / INSTAGRAM
   ========================================================= */
.gallery{
  background: var(--cream-paper);
  padding-block: clamp(3.5rem, 8vw, 6rem);
}
.gallery__head{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: clamp(2rem, 5vw, 3rem);
}
.gallery__head h2{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h2);
  margin-top: .5rem;
}
.gallery__ig-link{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 800;
  font-size: var(--fs-caption);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--red-deep);
  border: 1.5px solid var(--red-deep);
  padding: .6rem 1.1rem;
  border-radius: 999px;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.gallery__ig-link:hover{ background: var(--red-deep); color: var(--white); }
.gallery__ig-link svg{ width: 18px; height: 18px; }

.gallery__grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(.5rem, 1.4vw, 1rem);
}
@media (min-width: 640px){
  .gallery__grid{ grid-template-columns: repeat(3, 1fr); }
}
.gallery__item{
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--cream-deep);
}
.gallery__item img{
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-med) var(--ease-out);
}
.gallery__item:hover img{ transform: scale(1.06); }
.gallery__item::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(34,26,18,.55), rgba(34,26,18,0) 55%);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.gallery__item:hover::after, .gallery__item:focus-visible::after{ opacity: 1; }
.gallery__item-icon{
  position: absolute;
  right: .75rem;
  bottom: .75rem;
  width: 30px; height: 30px;
  color: var(--white);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.gallery__item:hover .gallery__item-icon,
.gallery__item:focus-visible .gallery__item-icon{
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{
  background: var(--ink);
  color: var(--cream-paper);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
}
.footer__top{
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  justify-content: space-between;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(247,234,208,.15);
}
.footer__logo img{ height: 64px; width: auto; margin-bottom: 1rem; }
.footer__col h3{
  font-size: var(--fs-caption);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: .85rem;
}
.footer__col p, .footer__col a{
  display: block;
  color: rgba(247,234,208,.78);
  margin-bottom: .5rem;
}
.footer__col a:hover{ color: var(--cream-paper); }
.footer__social{
  display: flex;
  gap: .75rem;
  margin-top: .5rem;
}
.footer__social a{
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid rgba(247,234,208,.3);
  border-radius: 50%;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.footer__social a:hover{ background: var(--red); border-color: var(--red); }
.footer__social svg{ width: 18px; height: 18px; }

.footer__bottom{
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  padding-top: 1.5rem;
  font-size: .8rem;
  color: rgba(247,234,208,.5);
}
.footer__bottom .lang-switch{ gap: .5rem; }
.footer__bottom .lang-btn{ width: 26px; height: 26px; opacity: .6; }
.footer__bottom .lang-btn[aria-pressed="true"]{ opacity: 1; }

/* =========================================================
   Section headings shared
   ========================================================= */
section[id]{ scroll-margin-top: calc(var(--topbar-h) + 12px); }