:root{
  --ink:#fffaf2;
  --ink2:#ffffff;
  --cream:#2b1f14;
  --marigold:#f3a712;
  --teal:#12958f;
  --orange:#e0561f;
  --purple:#6f2a63;
  --crimson:#c23b3b;
  --line: rgba(43,31,20,0.14);
  --banner-h: 132px;   /* full panel height + sag, so nothing clips */
}
*{box-sizing:border-box; margin:0; padding:0;}
/* Several components (form grids, success panels, error text) toggle visibility
   via the plain `hidden` attribute, but also carry a class that sets `display`
   (grid/block/flex) for when they're shown. Author CSS always outranks the
   browser's default `[hidden]{display:none}` rule regardless of specificity,
   so without this, `hidden` silently loses to those classes and the element
   stays in the layout. This guarantees `hidden` always wins. */
[hidden]{ display:none !important; }
html{scroll-behavior:smooth;}
body{
  background:var(--ink);
  color:var(--cream);
  font-family:'Work Sans', sans-serif;
  overflow-x:hidden;
  padding-top: var(--banner-h);
}
h1,h2,h3,.display{
  font-family:'Lilita One', sans-serif;
  text-transform:uppercase;
  letter-spacing:0.02em;
  line-height:0.95;
}
.menu-name{ font-family:'Fraunces', serif; }
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
::selection{ background:var(--crimson); color:var(--cream); }
button{ font-family:inherit; cursor:pointer; }

/* ---------- PAPEL PICADO BANNER ---------- */
#banner-wrap{
  position:fixed; top:0; left:0; right:0; z-index:300;
  height:var(--banner-h);
  overflow:hidden;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(255,250,242,0.92) 0%, rgba(255,250,242,0.55) 55%, transparent 100%);
}
#banner-string{ display:none;
  position:absolute; top:6px; left:-10%; width:120%; height:0;
  border-top:1.5px solid rgba(225,214,198,0.42);
  border-radius:50%;
  box-shadow:0 1px 2px rgba(80,50,20,0.27);
  transform:translateY(2px);
}
#banner-strip{
  position:absolute; top:7px; left:0;
  display:flex; align-items:flex-start;
  height:calc(var(--banner-h) - 7px);
  will-change:transform;
}
.flag{
  flex:0 0 84px;
  width:84px;
  margin-right:-1px;              /* panels butt together like a real strand */
  transform-origin:top center;
  will-change:transform;
  filter:drop-shadow(0 6px 7px rgba(80,50,20,0.203));
}
.flag svg{ width:100%; height:auto; display:block; }

/* ---------- NAV — each item is its own button, no bar behind the row ---------- */
nav{
  position:fixed; top:var(--banner-h); left:0; right:0; z-index:280;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem;
  padding:14px 4vw;
  background:none;              /* no bar */
  backdrop-filter:none;
  border:none;
  transition:transform .4s ease;
}
nav.hide-nav{ transform:translateY(-160%); }

/* shared pill treatment */
.navpill{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.6rem 1.15rem;
  border-radius:999px;
  border:1px solid rgba(43,31,20,0.14);
  background:rgba(255,250,242,0.72);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  color:var(--cream);
  font-family:'Work Sans', sans-serif;
  font-size:0.78rem; letter-spacing:0.07em; text-transform:uppercase; font-weight:600;
  box-shadow:0 4px 14px rgba(80,50,20,0.144);
  transition:background-color .28s ease, color .28s ease, border-color .28s ease,
             transform .22s ease, box-shadow .28s ease;
  white-space:nowrap;
}
.navpill:hover, .navpill:focus-visible{
  transform:translateY(-2px);
  border-color:transparent;
}

/* brandmark is a pill too */
.brandmark{
  font-family:'Lilita One'; font-size:1.05rem; letter-spacing:0.03em;
  padding:.55rem 1.2rem;
}
.brandmark .mk{ color:var(--marigold); transition:color .28s ease; }
.brandmark:hover{ background:var(--marigold); color:var(--ink); box-shadow:0 8px 20px rgba(243,167,18,0.4); }
.brandmark:hover .mk{ color:var(--ink); }

.navlinks{ display:flex; gap:.55rem; align-items:center; }

/* each nav item picks up a different papel picado colour on hover */
.np-teal:hover,   .np-teal:focus-visible   { background:#2fb3d9; color:#fffaf2; box-shadow:0 8px 20px rgba(47,179,217,0.42); }
.np-purple:hover, .np-purple:focus-visible { background:#7b3fa0; color:#fdf6ee; box-shadow:0 8px 20px rgba(123,63,160,0.45); }
.np-orange:hover, .np-orange:focus-visible { background:#e8622a; color:#fffaf2; box-shadow:0 8px 20px rgba(232,98,42,0.45); }
.np-green:hover,  .np-green:focus-visible  { background:#1f8a3d; color:#f2fff5; box-shadow:0 8px 20px rgba(31,138,61,0.42); }

/* Order Now stays filled by default, brightens on hover */
.nav-cta{
  background:var(--crimson);
  border-color:transparent;
  color:var(--cream);
  font-weight:700;
}
.nav-cta:hover, .nav-cta:focus-visible{
  background:#f2b705; color:var(--ink);
  box-shadow:0 10px 24px rgba(242,183,5,0.45);
}

@media (max-width:900px){
  .navpill{ padding:.5rem .8rem; font-size:.68rem; letter-spacing:.05em; }
  .brandmark{ font-size:.9rem; padding:.45rem .8rem; }
  .navlinks{ gap:.35rem; }
  .nl-label{ display:none; }
}
@media (max-width:640px){
  nav{ padding:10px 3vw; }
  .np-hide-sm{ display:none; }
}

main{ padding-top: 0; }
section{ padding:6.5rem 5vw; position:relative; }
.section-head{ text-align:center; margin-bottom:3.2rem; }
.eyebrow{ font-size:0.78rem; letter-spacing:0.32em; text-transform:uppercase; color:var(--teal); font-weight:600; margin-bottom:0.8rem;}
.section-head h2{ font-size:clamp(2.1rem,5vw,3.4rem); }
.divider{ width:64px; height:4px; margin:1.2rem auto 0; border-radius:4px;
  background:linear-gradient(90deg, var(--crimson), var(--marigold), var(--teal)); }

.reveal{ opacity:0; transform:translateY(34px); transition:opacity .8s ease, transform .8s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }

.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:0.9rem 2rem; font-weight:700; font-size:0.82rem;
  letter-spacing:0.07em; text-transform:uppercase; border-radius:999px; cursor:pointer;
  transition:transform .25s ease, box-shadow .25s ease; border:2px solid transparent; background:none; color:inherit;
}
.btn-solid{ background:var(--crimson); color:var(--cream); }
.btn-solid:hover{ transform:translateY(-3px); box-shadow:0 12px 24px rgba(194,59,59,0.32); }
.btn-marigold{ background:var(--marigold); color:var(--ink); }
.btn-marigold:hover{ transform:translateY(-3px); box-shadow:0 12px 24px rgba(243,167,18,0.32); }
.btn-ghost{ border-color:var(--line); color:var(--cream); }
.btn-ghost:hover{ border-color:var(--marigold); color:var(--marigold); transform:translateY(-3px); }
.btn-sm{ padding:.55rem 1.2rem; font-size:.72rem; }

footer{
  padding:3.5rem 5vw 2.2rem; text-align:center; border-top:1px solid var(--line); background:rgba(255,250,242,0.72);
}
footer .brandmark{ justify-content:center; font-size:1.4rem; margin-bottom:1rem; }
footer .navlinks{ justify-content:center; margin-top:.8rem; }
footer p{ color:rgba(43,31,20,0.5); font-size:0.8rem; margin-top:1rem; }

/* ---------- MODALS (location picker + directions) ---------- */
.modal-overlay{
  position:fixed; inset:0; z-index:500; display:none;
  align-items:center; justify-content:center;
  background:rgba(255,250,242,0.72); backdrop-filter:blur(4px);
  padding:1.5rem;
}
.modal-overlay.open{ display:flex; }
.modal-box{
  width:min(460px, 100%); background:rgba(255,250,242,0.9); border:1px solid var(--line);
  border-radius:22px; padding:2rem; position:relative;
  box-shadow:0 30px 70px rgba(80,50,20,0.225);
  max-height:88vh; overflow-y:auto;
}
.modal-close{
  position:absolute; top:14px; right:16px; background:none; border:none; color:var(--cream);
  font-size:1.3rem; opacity:.6; transition:opacity .2s ease;
}
.modal-close:hover{ opacity:1; }
.modal-box h3{ font-size:1.4rem; margin-bottom:1.4rem; }
.modal-loc-btn{
  display:flex; justify-content:space-between; align-items:center; width:100%;
  padding:1rem 1.2rem; margin-bottom:.7rem; border-radius:14px; border:1px solid var(--line);
  background:rgba(43,31,20,0.03); color:var(--cream); text-align:left; transition:all .2s ease;
}
.modal-loc-btn:hover{ border-color:var(--marigold); background:rgba(243,167,18,0.08); }
.modal-loc-btn b{ font-family:'Fraunces'; font-size:1.02rem; display:block; }
.modal-loc-btn span{ font-size:.78rem; opacity:.6; }
.catering-pill{
  display:flex; justify-content:center; align-items:center; gap:.4rem; width:100%;
  margin-top:.9rem; padding:.7rem 1.2rem; border-radius:999px;
  border:1px dashed rgba(31,138,61,0.5); background:rgba(31,138,61,0.09);
  color:#7ee0a0; font-size:.82rem; font-weight:700; letter-spacing:.03em;
  transition:all .2s ease;
}
.catering-pill:hover{ border-style:solid; background:rgba(31,138,61,0.16); color:#a3f5bf; }
.direction-opt{
  display:flex; align-items:center; gap:.85rem; width:100%;
  padding:.9rem 1.1rem; margin-bottom:.6rem; border-radius:14px; border:1px solid var(--line);
  background:rgba(43,31,20,0.03); color:var(--cream); font-weight:600; font-size:.92rem; transition:all .2s ease;
}
.direction-opt:hover{ border-color:var(--teal); background:rgba(18,149,143,0.1); }
/* icon sizing lives here, inside the stable MODALS block, specifically so a future
   full-block CSS replacement elsewhere in the file can't orphan it again */
.direction-opt .dir-ic{
  width:34px; height:34px; flex:0 0 34px;
  border-radius:8px; display:block;
  box-shadow:0 2px 8px rgba(80,50,20,0.18);
}
.direction-opt svg.dir-ic{ box-shadow:none; padding:3px; }
.direction-opt span:first-of-type{ flex:1; }
.dir-arrow{ opacity:.45; font-size:.9rem; }
.direction-opt:hover .dir-arrow{ opacity:.9; }
.toast-msg{
  position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--marigold); color:var(--ink); padding:.8rem 1.4rem; border-radius:999px;
  font-weight:700; font-size:.85rem; z-index:600; opacity:0; transition:all .3s ease; pointer-events:none;
}
.toast-msg.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ---------- LIQUID GLASS DISH POPUP (spotlight, not full-screen dim) ---------- */
#dishModal.modal-overlay{
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  align-items:flex-start;
  justify-content:flex-start;
  padding:0;
}
#dishModal.modal-overlay .modal-box.glass{
  position:absolute;
  width:min(340px,88vw);
  background:rgba(50,32,30,0.38);
  backdrop-filter:blur(26px) saturate(180%);
  -webkit-backdrop-filter:blur(26px) saturate(180%);
  border:1px solid rgba(43,31,20,0.28);
  box-shadow:
    0 25px 60px rgba(80,50,20,0.203),
    0 0 0 1px rgba(255,255,255,0.04) inset,
    0 60px 120px -20px rgba(194,59,59,0.25);
  animation:glassIn .35s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes glassIn{
  from{ opacity:0; transform:scale(0.92) translateY(8px); }
  to{ opacity:1; transform:scale(1) translateY(0); }
}
.dish-photo{
  width:100%; aspect-ratio:4/3; border-radius:16px; margin-bottom:1.3rem; overflow:hidden;
  background:linear-gradient(140deg, var(--purple), var(--orange) 55%, var(--marigold));
  display:flex; align-items:center; justify-content:center; text-align:center; padding:1rem;
  font-family:'Lilita One'; font-size:.85rem; letter-spacing:.05em; color:rgba(255,250,242,0.55);
  position:relative;
}
.dish-photo::after{ content:''; position:absolute; inset:0; opacity:.15; mix-blend-mode:overlay;
  background-image:radial-gradient(rgba(255,255,255,.7) 1px, transparent 1px); background-size:3px 3px; }
/* photo set inline by JS; the old rule here forced background-image:none !important, which hid every photo */
.dish-photo.has-photo{ background-color:#ffffff; background-size:cover; background-position:center; background-repeat:no-repeat; }
.dish-photo.has-photo::after{ display:none; }
.dishModal-name-row{ display:flex; align-items:center; gap:.5rem; }
.dishModal-name{ font-family:'Fraunces'; font-weight:700; font-size:1.5rem; margin-bottom:.3rem; }
.dishModal-speaker-slot:empty{ display:none; }
.dishModal-price{ font-family:'Lilita One'; color:var(--marigold); font-size:1.1rem; margin-bottom:.9rem; display:block;}
.dishModal-desc{ color:rgba(43,31,20,0.85); line-height:1.55; margin-bottom:1.4rem; }
.flavor-tags{ display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1.4rem; }
.flavor-tag{ font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; font-weight:700;
  padding:.35rem .8rem; border-radius:999px; border:1px solid rgba(43,31,20,0.3); color:var(--cream); }

/* ---------- PRONUNCIATION SPEAKER BUTTON ---------- */
.dish-name-wrap{ display:inline-flex; align-items:center; gap:.4rem; min-width:0; }
.speaker-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; flex:0 0 22px; border-radius:50%;
  color:rgba(43,31,20,0.5); cursor:pointer;
  transition:color .2s ease, background-color .2s ease, transform .2s ease;
}
.speaker-ic{ width:14px; height:14px; }
.speaker-btn:hover, .speaker-btn:focus-visible{
  color:var(--marigold);
  background:rgba(243,167,18,0.14);
  transform:scale(1.15);
  outline:none;
}
.speaker-btn:hover .speaker-wave, .speaker-btn:focus-visible .speaker-wave{
  animation:speakerPulse 1s ease-in-out infinite;
}
.speaker-btn:hover .speaker-wave-2, .speaker-btn:focus-visible .speaker-wave-2{ animation-delay:.15s; }
@keyframes speakerPulse{
  0%, 100%{ opacity:.55; transform:translateX(0); }
  50%     { opacity:1;   transform:translateX(1px); }
}
@media (prefers-reduced-motion: reduce){
  .speaker-btn:hover .speaker-wave, .speaker-btn:focus-visible .speaker-wave{ animation:none; }
}


/* ---------- INTERACTIVE MENU GRID ---------- */
.tabs{ display:flex; gap:0.55rem; flex-wrap:wrap; justify-content:center; margin-bottom:2.6rem; }
.tab-btn{
  padding:0.55rem 1.2rem; border-radius:999px; border:1.5px solid var(--line);
  font-size:0.75rem; letter-spacing:0.05em; text-transform:uppercase; font-weight:600;
  background:transparent; color:rgba(43,31,20,0.7); transition:all .25s ease;
}
.tab-btn:hover{ border-color:var(--marigold); color:var(--marigold); }
.tab-btn.active{ background:var(--crimson); border-color:var(--crimson); color:var(--cream); }
.menu-panel{ display:none; }
.menu-panel.active{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:1.3rem; }
.dish{
  background:rgba(43,31,20,0.04); border:1px solid var(--line); border-radius:16px;
  padding:1.3rem 1.4rem; transition:transform .3s ease, border-color .3s ease, background .3s ease;
  transform-style:preserve-3d; text-align:left; width:100%; color:inherit;
}
.dish:hover{ border-color:var(--marigold); background:rgba(43,31,20,0.07); }
.dish-top{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; margin-bottom:0.35rem; }
.dish-name-txt{ font-family:'Fraunces'; font-weight:600; font-size:1.05rem; }
.dish-price-txt{ font-family:'Lilita One'; color:var(--marigold); font-size:.92rem; white-space:nowrap; }
.dish-desc-txt{ font-size:0.85rem; color:rgba(43,31,20,0.6); line-height:1.5; }

/* ---------- GALLERY ---------- */
.gallery-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(230px,1fr)); gap:1rem; }
.gallery-tile{
  aspect-ratio:4/3; border-radius:16px; position:relative; overflow:hidden;
  display:flex; align-items:flex-end; padding:1rem;
  font-family:'Lilita One'; font-size:.8rem; letter-spacing:.04em; color:var(--cream);
}
.gallery-tile::before{ content:''; position:absolute; inset:0; background:linear-gradient(0deg, rgba(80,50,20,0.248), transparent 60%); z-index:1;}
.gallery-tile span{ position:relative; z-index:2; }

/* ---------- INFO CARDS ---------- */
.info-card{ background:rgba(43,31,20,0.04); border:1px solid var(--line); border-radius:20px; padding:2.2rem; }
.info-row{ display:flex; gap:1rem; margin-bottom:1.5rem; align-items:flex-start; }
.info-row .ic{ font-family:'Lilita One'; color:var(--crimson); font-size:1rem; width:24px; }
.info-row h4{ font-size:0.75rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--marigold); margin-bottom:0.25rem; }
.info-row p{ color:rgba(43,31,20,0.78); line-height:1.5; }

.map-block{
  border-radius:20px; overflow:hidden; position:relative; min-height:300px;
  background:linear-gradient(rgba(255,250,242,.55), rgba(255,250,242,.75)),
    repeating-linear-gradient(45deg, rgba(43,31,20,0.05) 0 2px, transparent 2px 22px);
  display:flex; align-items:center; justify-content:center; text-align:center; padding:2rem;
}
.pin{ width:20px; height:20px; border-radius:50% 50% 50% 0; background:var(--crimson); transform:rotate(-45deg);
  position:absolute; top:42%; left:50%; margin:-20px 0 0 -10px; box-shadow:0 0 0 6px rgba(194,59,59,0.18);
  animation:pinPulse 2.4s ease-in-out infinite; }
@keyframes pinPulse{ 0%,100%{ box-shadow:0 0 0 6px rgba(194,59,59,0.18);} 50%{ box-shadow:0 0 0 12px rgba(194,59,59,0.05);} }

.loc-card{
  border-radius:20px; border:1px solid var(--line); background:rgba(43,31,20,0.04);
  padding:2rem; transition:transform .3s ease, border-color .3s ease;
}
.loc-card:hover{ transform:translateY(-6px); border-color:var(--marigold); }
.loc-card .tagpill{ display:inline-block; font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; font-weight:700;
  padding:.3rem .7rem; border-radius:999px; background:rgba(18,149,143,0.18); color:var(--teal); margin-bottom:.9rem; }

/* =========================================================
   AMBIENT FOG — soft drifting glow, sits behind all content

   Previous version layered marigold + crimson + teal blobs under
   mix-blend-mode:screen. Screen blend is additive (like overlapping
   stage lights), so three different hues stacked on top of each
   other pushed toward white/gray instead of staying colorful —
   the "odd gray smudge" that was reported. Fixed by using normal
   blending and one warm hue family (amber -> ember), which is also
   more in keeping with the restaurant's own lighting.
   ========================================================= */
#mouseFog{
  position:fixed; top:0; left:0;
  width:640px; height:640px;
  z-index:-1;
  pointer-events:none;
  opacity:0;
  transition:opacity 1s ease;
  will-change:transform;
}
.fog-blob{
  position:absolute; inset:10%;
  border-radius:44% 56% 58% 42% / 50% 46% 54% 50%;
  filter:blur(70px);
}
.fb1{
  background:radial-gradient(circle at 42% 42%, rgba(243,167,18,0.20), transparent 68%);
  animation:fogDrift1 22s ease-in-out infinite;
}
.fb2{
  inset:18%;
  background:radial-gradient(circle at 58% 55%, rgba(224,86,31,0.14), transparent 70%);
  animation:fogDrift2 27s ease-in-out infinite;
}
@keyframes fogDrift1{
  0%,100%{ transform:translate(0,0) scale(1); border-radius:44% 56% 58% 42% / 50% 46% 54% 50%; }
  50%    { transform:translate(20px,-14px) scale(1.08); border-radius:56% 44% 46% 54% / 46% 54% 44% 56%; }
}
@keyframes fogDrift2{
  0%,100%{ transform:translate(0,0) scale(1.03); }
  50%    { transform:translate(-16px,18px) scale(0.95); }
}

/* Sections need transparent-ish backgrounds so the fog reads through them */
body{ background:var(--ink); }

/* =========================================================
   REDUCED MOTION — honour the OS setting
   ========================================================= */
@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;
  }
  .reveal{ opacity:1 !important; transform:none !important; }
  #mouseFog{ display:none; }
}

/* Visible keyboard focus for accessibility */
:focus-visible{
  outline:2px solid var(--marigold);
  outline-offset:3px;
  border-radius:4px;
}

/* ---------- PHOTO CARDS ---------- */
.photo-card{
  position:relative; overflow:hidden; border-radius:20px; margin:0;
  border:1px solid var(--line);
  box-shadow:0 24px 60px rgba(80,50,20,0.203);
}
.photo-card img{
  width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(1.02);
  transition:transform 1.1s cubic-bezier(.2,.8,.25,1), filter .6s ease;
}
.photo-card:hover img{ transform:scale(1.08); }
.photo-card::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(0deg, rgba(255,250,242,0.72) 0%, rgba(255,250,242,0.12) 42%, transparent 68%);
}
.photo-card figcaption{
  position:absolute; left:1.5rem; bottom:1.4rem; z-index:2;
  font-family:'Lilita One'; font-size:1.05rem; letter-spacing:0.04em; color:var(--cream);
  text-shadow:0 2px 12px rgba(80,50,20,0.27);
}
/* subtle warm halo so the dish reads as the hero of the section */
.photo-card::before{
  content:''; position:absolute; inset:-14%; z-index:0; pointer-events:none;
  background:radial-gradient(ellipse at 50% 45%, rgba(243,167,18,0.16), transparent 62%);
  mix-blend-mode:screen;
}

.gallery-tile.photo-tile{ padding:0; margin:0; }
.gallery-tile.photo-tile img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .9s cubic-bezier(.2,.8,.25,1);
}
.gallery-tile.photo-tile:hover img{ transform:scale(1.07); }
.gallery-tile.photo-tile span{
  position:absolute; left:1rem; bottom:1rem; z-index:2;
  text-shadow:0 2px 10px rgba(80,50,20,0.315);
}

/* ---------- MENU PROMO TILES ---------- */
.menu-promo{
  position:relative;
  display:flex; flex-direction:column; justify-content:center; gap:.5rem;
  padding:1.5rem;
  border-radius:16px;
  overflow:hidden;
  transition:transform .3s ease;
}
.menu-promo:hover{ transform:translateY(-4px); }
.menu-promo::before{
  content:''; position:absolute; inset:-40% -30% auto -30%; height:150%;
  pointer-events:none;
}
.mp-kicker{
  position:relative; z-index:1;
  font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; font-weight:700;
}
.mp-head{
  position:relative; z-index:1;
  font-family:'Fraunces', serif; font-weight:700; font-size:1.2rem; line-height:1.2;
  color:var(--cream);
}
.mp-body{
  position:relative; z-index:1;
  font-size:.85rem; line-height:1.5; color:rgba(43,31,20,0.78);
}
.mp-cta{
  position:relative; z-index:1; align-self:flex-start; margin-top:.2rem;
  font-family:'Lilita One'; font-size:.95rem; letter-spacing:.03em;
  padding:.38rem .9rem; border-radius:999px;
}

/* green — lunch */
.promo-green{
  background:linear-gradient(155deg, rgba(31,138,61,0.30), rgba(18,149,143,0.20));
  border:1px solid rgba(74,201,116,0.42);
  animation:glowGreen 5.5s ease-in-out infinite;
}
.promo-green::before{ background:radial-gradient(ellipse at 50% 0%, rgba(90,220,130,0.20), transparent 68%); }
.promo-green .mp-kicker{ color:#7ee0a0; }
.promo-green .mp-cta{
  background:rgba(74,201,116,0.20); border:1px solid rgba(74,201,116,0.45); color:#9dedb8;
}
@keyframes glowGreen{
  0%,100%{ box-shadow:0 0 0 1px rgba(74,201,116,0.10) inset, 0 0 26px rgba(47,178,94,0.18), 0 0 60px -8px rgba(47,178,94,0.24); }
  50%    { box-shadow:0 0 0 1px rgba(74,201,116,0.16) inset, 0 0 34px rgba(47,178,94,0.30), 0 0 78px -6px rgba(47,178,94,0.38); }
}

/* red — shareables combo */
.promo-red{
  background:linear-gradient(155deg, rgba(194,59,59,0.34), rgba(224,86,31,0.20));
  border:1px solid rgba(232,96,86,0.46);
  animation:glowRed 5s ease-in-out infinite;
}
.promo-red::before{ background:radial-gradient(ellipse at 50% 0%, rgba(255,120,96,0.22), transparent 68%); }
.promo-red .mp-kicker{ color:#ff9d8a; }
.promo-red .mp-cta{
  background:rgba(232,96,86,0.22); border:1px solid rgba(232,96,86,0.5); color:#ffb3a3;
}
@keyframes glowRed{
  0%,100%{ box-shadow:0 0 0 1px rgba(232,96,86,0.10) inset, 0 0 26px rgba(214,64,48,0.20), 0 0 60px -8px rgba(214,64,48,0.26); }
  50%    { box-shadow:0 0 0 1px rgba(232,96,86,0.18) inset, 0 0 36px rgba(214,64,48,0.34), 0 0 80px -6px rgba(214,64,48,0.42); }
}

/* rainbow — animated gradient border.
   Two backgrounds: a flat fill clipped to padding-box sits on top of the
   gradient clipped to border-box, so the gradient only shows in the border. */
.promo-rainbow{
  border:2px solid transparent;
  background:
    linear-gradient(155deg, rgba(255,250,242,0.94), rgba(255,250,242,0.94)) padding-box,
    linear-gradient(120deg, #c23b3b, #e8622a, #f2b705, #1f8a3d, #2fb3d9, #7b3fa0, #e8568f, #c23b3b) border-box;
  background-size:auto, 300% 300%;
  animation:rainbowEdge 9s linear infinite, glowRainbow 6s ease-in-out infinite;
}
.promo-rainbow::before{
  background:radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.10), transparent 66%);
}
.promo-rainbow .mp-kicker{
  background:linear-gradient(96deg, #ffb36b, #ffe08a, #8fe3a8, #7fd4f0, #c89bf0);
  background-size:220% auto;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:rainbowText 7s linear infinite;
}
.promo-rainbow .mp-cta{
  color:var(--cream);
  border:1px solid transparent;
  background:
    linear-gradient(rgba(255,250,242,0.9), rgba(255,250,242,0.9)) padding-box,
    linear-gradient(120deg, #e8622a, #f2b705, #2fb3d9, #7b3fa0) border-box;
  background-size:auto, 250% 250%;
  animation:rainbowEdge 9s linear infinite;
}
@keyframes rainbowEdge{
  0%   { background-position:0% 50%, 0% 50%; }
  100% { background-position:0% 50%, 300% 50%; }
}
@keyframes rainbowText{
  0%   { background-position:0% center; }
  100% { background-position:220% center; }
}
@keyframes glowRainbow{
  0%,100%{ box-shadow:0 0 24px -8px rgba(232,98,42,0.42), 0 0 44px -12px rgba(47,179,217,0.34); }
  50%    { box-shadow:0 0 34px -6px rgba(243,167,18,0.5),  0 0 66px -10px rgba(123,63,160,0.42); }
}

/* ---------- FAN FAVOURITE (gold) ---------- */
.dish-fav{
  position:relative;
  border-color:rgba(226,178,74,0.55);
  background:linear-gradient(158deg, rgba(226,178,74,0.13), rgba(43,31,20,0.04) 60%);
  box-shadow:0 0 22px -6px rgba(226,178,74,0.35);
  overflow:hidden;
}
.dish-fav:hover{
  border-color:rgba(245,205,110,0.85);
  box-shadow:0 0 34px -6px rgba(232,186,86,0.55);
}
/* slow shine sweeping across the card */
.dish-fav::after{
  content:''; position:absolute; top:0; left:-60%; width:45%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,236,180,0.26), transparent);
  transform:skewX(-18deg);
  animation:goldSweep 4.6s ease-in-out infinite;
  pointer-events:none;
}
@keyframes goldSweep{
  0%   { left:-60%; }
  55%  { left:125%; }
  100% { left:125%; }
}
.fav-ribbon{
  position:absolute; top:.7rem; right:.7rem; z-index:2;
  display:inline-flex; align-items:center; gap:.3rem;
  padding:.22rem .55rem .22rem .42rem;
  border-radius:999px;
  background:linear-gradient(140deg, #f6d283, #d9a33f);
  color:#3a2a08;
  font-size:.6rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  box-shadow:0 4px 12px rgba(80,50,20,0.153);
}
.fav-ribbon .trophy-ic{ width:11px; height:11px; }
.dish-fav .dish-top{ padding-right:6.6rem; }

/* gold treatment carried into the popup */
.modal-box.glass.glass-fav{
  border-color:rgba(240,203,120,0.55);
  box-shadow:
    0 25px 60px rgba(80,50,20,0.225),
    0 0 0 1px rgba(255,225,160,0.12) inset,
    0 60px 120px -20px rgba(226,178,74,0.4);
}
.dishModal-fav{
  display:inline-flex; align-items:center; gap:.42rem;
  margin-bottom:.6rem; padding:.34rem .8rem;
  border-radius:999px;
  background:linear-gradient(140deg, #f6d283, #d9a33f);
  color:#3a2a08;
  font-size:.66rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase;
  box-shadow:0 6px 16px rgba(80,50,20,0.158);
  animation:favPop .45s cubic-bezier(.2,.9,.3,1.5);
}
.dishModal-fav[hidden]{ display:none; }
.dishModal-fav .trophy-ic{ width:14px; height:14px; }
@keyframes favPop{
  from{ opacity:0; transform:scale(.6) translateY(6px); }
  to  { opacity:1; transform:scale(1) translateY(0); }
}

/* =========================================================
   SUNBURST STUDIO CREDIT
   ========================================================= */
.made-by{
  display:inline-flex; align-items:center; gap:.45rem;
  margin-top:1.4rem; padding:.5rem 1rem;
  background:none; border:1px solid transparent; border-radius:999px;
  color:rgba(43,31,20,0.52);
  font-size:.8rem; font-weight:600; letter-spacing:.04em;
  transition:color .28s ease, border-color .28s ease, background-color .28s ease, transform .22s ease;
}
.made-by .sb-dot{
  width:7px; height:7px; border-radius:50%;
  background:linear-gradient(135deg,#f7a825,#ff6a2b);
  box-shadow:0 0 8px rgba(247,168,37,0.8);
}
.made-by:hover{
  color:var(--cream);
  border-color:rgba(247,168,37,0.4);
  background:rgba(247,168,37,0.09);
  transform:translateY(-2px);
}

/* --- modal --- */
#sunburstModal .modal-box{
  width:min(560px,100%);
  padding:0; overflow:hidden;
  background:rgba(255,250,242,0.94);
  border:1px solid rgba(43,31,20,0.16);
}
#sunburstModal .modal-close{
  top:12px; right:14px; z-index:6;
  width:32px; height:32px; border-radius:50%;
  background:rgba(80,50,20,0.189); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  color:#fff; opacity:.85;
}
#sunburstModal .modal-close:hover{ opacity:1; background:rgba(80,50,20,0.27); }

.sb-stage{
  position:relative;
  padding:2.6rem 1.75rem 2.2rem;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  --sb-mx:50%; --sb-my:50%;
  background:
    radial-gradient(circle at var(--sb-mx) var(--sb-my), #ffd166 0%, transparent 46%),
    linear-gradient(118deg, #ff7a2f 0%, #f7a825 24%, #4bc0f0 58%, #1a6fd4 82%, #123a8f 100%);
  background-size:180% 180%, 220% 220%;
  animation:sbShift 15s ease-in-out infinite;
}
@keyframes sbShift{
  0%,100%{ background-position:50% 50%, 0% 50%; }
  50%    { background-position:50% 50%, 100% 50%; }
}
.sb-glow{
  position:absolute; inset:-25%;
  background:radial-gradient(circle at 50% 45%, rgba(255,255,255,0.55), transparent 58%);
  filter:blur(28px);
  pointer-events:none;
  will-change:transform;
}
.sb-stage::after{                      /* fine grain so the gradient isn't flat */
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.13;
  background-image:radial-gradient(rgba(255,255,255,.75) 1px, transparent 1px);
  background-size:3px 3px; mix-blend-mode:overlay;
}
.sb-logo{
  position:relative; z-index:2;
  width:min(320px, 78%); height:auto;
  filter:drop-shadow(0 12px 26px rgba(80,50,20,0.144));
  will-change:transform;
  transform-style:preserve-3d;
}

.sb-body{ padding:1.6rem 1.6rem 1.7rem; }
.sb-body p{
  color:rgba(43,31,20,0.8); line-height:1.6; font-size:.94rem; margin-bottom:1.3rem; text-align:center;
}
.sb-choices{ display:grid; grid-template-columns:1fr 1fr; gap:.85rem; }
@media (max-width:520px){ .sb-choices{ grid-template-columns:1fr; } }
.sb-choice{
  display:flex; flex-direction:column; gap:.3rem;
  padding:1.15rem 1.1rem; border-radius:16px; text-align:left;
  border:1px solid var(--line); background:rgba(43,31,20,0.04);
  color:var(--cream); transition:transform .25s ease, border-color .25s ease,
    background-color .25s ease, box-shadow .25s ease;
}
.sb-choice b{ font-family:'Fraunces', serif; font-size:1.02rem; font-weight:700; }
.sb-choice span{ font-size:.78rem; color:rgba(43,31,20,0.6); line-height:1.45; }
.sb-choice:hover{ transform:translateY(-4px); }
.sb-choice.sb-go:hover{
  border-color:rgba(247,168,37,0.65);
  background:rgba(247,168,37,0.12);
  box-shadow:0 14px 30px -8px rgba(247,168,37,0.45);
}
.sb-choice.sb-stay:hover{
  border-color:rgba(194,59,59,0.65);
  background:rgba(194,59,59,0.12);
  box-shadow:0 14px 30px -8px rgba(194,59,59,0.42);
}
.sb-choice .sb-arrow{ font-size:.8rem; opacity:.55; margin-top:.15rem; }

/* =========================================================
   EL BURRITO LOGO
   The wordmark is dark navy, so on the dark page it must sit on a
   light plaque to stay legible. The plaque doubles as painted signage.
   ========================================================= */
/* The cream plaque existed only because the previous wordmark was dark navy
   and vanished on the dark page. This logo has its own outlines and drop
   shadow, so it sits directly on the background — cleaner, and lets the
   artwork's own shadow do the separation. */
.logo-plaque{
  display:inline-flex; align-items:center; justify-content:center;
  background:none; border-radius:0; padding:0; box-shadow:none;
  transition:transform .5s cubic-bezier(.2,.8,.25,1), filter .5s ease;
  filter:drop-shadow(0 18px 34px rgba(80,50,20,0.248));
}
.logo-plaque img{ width:100%; height:auto; display:block; }
.logo-plaque:hover{
  transform:translateY(-5px) rotate(-0.6deg);
  filter:drop-shadow(0 26px 44px rgba(80,50,20,0.279)) drop-shadow(0 0 26px rgba(243,167,18,0.30));
}
.logo-hero{ width:min(560px, 88vw); margin:0 auto 1.6rem; }

/* Nav brandmark now matches the other nav pills (dark frosted) instead of
   being a cream outlier — the logo reads fine on dark, so the light pill it
   used to need is gone. */
.brandmark.logo-pill{
  padding:.3rem .85rem;
  background:rgba(255,250,242,0.72);
  border:1px solid rgba(43,31,20,0.14);
}
.brandmark.logo-pill img{ height:46px; width:auto; display:block; }
.brandmark.logo-pill:hover{
  background:rgba(255,250,242,0.85);
  border-color:rgba(243,167,18,0.45);
  box-shadow:0 10px 24px rgba(243,167,18,0.28);
  transform:translateY(-2px);
}
@media (max-width:900px){ .brandmark.logo-pill img{ height:34px; } }
@media (max-width:640px){ .brandmark.logo-pill img{ height:28px; } }

.footer-logo{ width:min(280px, 66vw); margin:0 auto 1rem; padding:0; }

/* =========================================================
   CATERING PAGE
   ========================================================= */
.catering-photo{
  max-width:1040px; margin:0 auto; aspect-ratio:16/6; border-radius:22px;
  background:linear-gradient(150deg, var(--purple), var(--crimson) 55%, var(--orange));
  display:flex; align-items:center; justify-content:center; text-align:center; padding:2rem;
  position:relative; overflow:hidden;
  box-shadow:0 30px 70px -20px rgba(80,50,20,0.225);
}
.catering-photo::after{
  content:''; position:absolute; inset:0; opacity:.15; mix-blend-mode:overlay;
  background-image:radial-gradient(rgba(255,255,255,.7) 1px, transparent 1px); background-size:3px 3px;
}
.catering-photo span{
  position:relative; z-index:1; font-family:'Lilita One'; font-size:1.1rem; letter-spacing:.05em;
  color:rgba(255,250,242,0.55);
}

.catering-disclaimer{
  max-width:640px; margin:1rem auto 0; font-size:.95rem; line-height:1.6;
  color:rgba(43,31,20,0.78);
}

.catering-form{
  max-width:900px; margin:2.4rem auto 0;
  display:grid; grid-template-columns:1fr 1fr; gap:1.3rem 1.6rem;
}
@media (max-width:720px){ .catering-form{ grid-template-columns:1fr; } }

.cf-field{ display:flex; flex-direction:column; gap:.5rem; }
.cf-span2{ grid-column:1 / -1; }
.cf-field label{
  font-size:.8rem; font-weight:700; letter-spacing:.03em; color:rgba(43,31,20,0.85);
}
.cf-field .req{ color:var(--crimson); }
.cf-field .opt{ color:rgba(43,31,20,0.45); font-weight:500; text-transform:none; letter-spacing:0; }

.cf-field input,
.cf-field select,
.cf-field textarea{
  width:100%; box-sizing:border-box;
  padding:.8rem 1rem; border-radius:12px;
  border:1px solid var(--line); background:rgba(43,31,20,0.045);
  color:var(--cream); font-family:'Work Sans', sans-serif; font-size:.92rem;
  transition:border-color .2s ease, background-color .2s ease;
}
.cf-field select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%23f7ede0' stroke-opacity='0.6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1rem center; padding-right:2.4rem;
}
.cf-field select option{ background:#ffffff; color:var(--cream); }
.cf-field textarea{ resize:vertical; min-height:100px; font-family:inherit; }
.cf-field input::placeholder, .cf-field textarea::placeholder{ color:rgba(43,31,20,0.35); }
.cf-field input:focus, .cf-field select:focus, .cf-field textarea:focus{
  outline:none; border-color:var(--marigold); background:rgba(243,167,18,0.06);
}
/* Native calendar/clock picker icons are hard to see on a dark field — recolor them */
.cf-field input[type="date"]::-webkit-calendar-picker-indicator,
.cf-field input[type="time"]::-webkit-calendar-picker-indicator{
  filter:invert(1) opacity(.7); cursor:pointer;
}

.cf-submit-row{ display:flex; justify-content:center; margin-top:.6rem; }
.cf-submit-row .btn{ min-width:260px; justify-content:center; }

.catering-success{
  max-width:560px; margin:2.4rem auto 0; text-align:center;
  padding:2.6rem 2rem; border-radius:20px;
  border:1px solid rgba(31,138,61,0.4); background:rgba(31,138,61,0.08);
}
.cs-icon{
  width:52px; height:52px; margin:0 auto 1rem; border-radius:50%;
  background:linear-gradient(140deg,#2fa84a,#1f8a3d);
  color:#f2fff5; font-size:1.4rem; font-weight:800;
  display:flex; align-items:center; justify-content:center;
}
.catering-success h3{ font-size:1.4rem; margin-bottom:.6rem; }
.catering-success p{ color:rgba(43,31,20,0.8); line-height:1.6; font-size:.95rem; }

/* =========================================================
   CAREERS MODAL
   ========================================================= */
.careers-box{ width:min(600px, 92vw); }
.careers-intro{
  margin-top:-.6rem; margin-bottom:1.4rem;
  font-size:.95rem; line-height:1.6; color:rgba(43,31,20,0.8);
}
.careers-box .catering-form{ margin-top:0; }

.cf-multiselect{ display:flex; flex-wrap:wrap; gap:.55rem; }
.pill-checkbox{
  position:absolute; width:1px; height:1px; overflow:hidden; opacity:0;
}
.pill-checkbox-label{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.55rem 1rem; border-radius:999px;
  border:1px solid var(--line); background:rgba(43,31,20,0.03);
  color:rgba(43,31,20,0.8); font-size:.84rem; font-weight:600;
  cursor:pointer; transition:all .2s ease; user-select:none;
}
.pill-checkbox-label:hover{ border-color:rgba(243,167,18,0.4); }
.pill-checkbox:checked + .pill-checkbox-label{
  background:rgba(243,167,18,0.16); border-color:var(--marigold); color:var(--marigold);
}
.pill-checkbox:focus-visible + .pill-checkbox-label{
  outline:2px solid var(--marigold); outline-offset:2px;
}
.pill-checkbox-label .pc-check{
  width:14px; height:14px; border-radius:4px; border:1.5px solid rgba(43,31,20,0.4);
  display:inline-flex; align-items:center; justify-content:center; flex:0 0 14px;
  transition:all .2s ease;
}
.pill-checkbox:checked + .pill-checkbox-label .pc-check{
  background:var(--marigold); border-color:var(--marigold);
}
.pill-checkbox:checked + .pill-checkbox-label .pc-check::after{
  content:''; width:4px; height:7px; border:solid #241503; border-width:0 1.6px 1.6px 0;
  transform:rotate(45deg) translate(-1px,-1px);
}

.field-error{
  display:block; margin-top:.5rem; font-size:.8rem; font-weight:600; color:#ff8b7a;
}

.file-drop{
  display:flex; align-items:center; gap:.7rem;
  padding:.9rem 1.1rem; border-radius:12px;
  border:1.5px dashed var(--line); background:rgba(43,31,20,0.02);
  color:rgba(43,31,20,0.65); font-size:.86rem; cursor:pointer;
  transition:all .2s ease;
}
.file-drop:hover{ border-color:var(--marigold); color:var(--cream); }
.file-drop svg{ width:18px; height:18px; flex:0 0 18px; color:var(--marigold); }
.file-drop.has-file{ border-style:solid; border-color:rgba(31,138,61,0.5); color:#7ee0a0; }

/* ---------- MULTI-VARIANT PRICE LIST (dish popup) ---------- */
.price-variants{
  margin-bottom:1rem; padding:.9rem 1rem; border-radius:12px;
  background:rgba(80,50,20,0.081); border:1px solid rgba(43,31,20,0.12);
  max-height:220px; overflow-y:auto;
}
.price-variant-row{
  display:flex; justify-content:space-between; gap:1rem;
  padding:.35rem 0; font-size:.86rem;
  border-bottom:1px solid rgba(43,31,20,0.08);
}
.price-variant-row:last-child{ border-bottom:none; }
.price-variant-row span:first-child{ color:rgba(43,31,20,0.8); }
.price-variant-row span:last-child{ font-family:'Lilita One'; color:var(--marigold); white-space:nowrap; }

/* Category note (e.g. "all fajitas include rice, beans...") sits as a
   full-width line above that category's dishes, inside the same grid. */
.menu-cat-note{
  grid-column:1 / -1;
  font-size:.85rem; font-style:italic; color:rgba(43,31,20,0.58);
  margin-bottom:.3rem; padding-bottom:.6rem;
  border-bottom:1px dashed var(--line);
}

/* Real catering photo overrides the placeholder gradient box */
.catering-photo-real{ background:none; padding:0; }
.catering-photo-real img{
  width:100%; height:100%; object-fit:cover; display:block; border-radius:22px;
}
.catering-photo-real::after{ display:none; }

/* ---------- LANGUAGE TOGGLE ---------- */
.lang-toggle{
  width:48px; height:48px; border-radius:50%;
  border:1.5px solid var(--line);
  background:rgba(255,250,242,0.85);
  backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  font-family:'Lilita One'; font-size:.78rem; letter-spacing:.02em;
  color:var(--cream);
  transition:border-color .2s ease, background-color .2s ease, transform .2s ease;
}
.lang-toggle:hover{
  border-color:var(--marigold);
  background:rgba(243,167,18,0.12);
  transform:translateY(-2px);
}
@media (max-width:640px){
  .lang-toggle{ width:40px; height:40px; font-size:.7rem; right:66px !important; }
}

/* =========================================================
   TEXT-BASED BRAND MARKS
   Each location now carries its own distinct logo (shown on its
   own location.html page), so a single logo image no longer makes
   sense in shared chrome that appears identically on every page —
   there's no one "right" logo to show there. Nav, footer, and the
   homepage hero use a plain text mark instead.
   ========================================================= */
.site-name-hero{
  font-family:'Lilita One', sans-serif; font-weight:400;
  font-size:clamp(3.2rem, 11vw, 8rem);
  letter-spacing:.01em;
  color:var(--cream);
  line-height:1;
  text-shadow:0 0 60px rgba(243,167,18,0.25);
}
.site-name-footer{
  font-family:'Lilita One', sans-serif; font-weight:400;
  font-size:1.7rem; letter-spacing:.02em;
  color:var(--cream);
  margin-bottom:1rem;
}

.home-pill{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.5rem .85rem;
}
.home-ic{ width:17px; height:17px; flex:0 0 17px; }
.home-label{ font-family:'Work Sans'; font-size:.78rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
@media (max-width:640px){ .home-label{ display:none; } .home-pill{ padding:.5rem; } }