:root{
  --top-banners-h:0px;
  --black:#0F0F0F;
  --charcoal:#1c1315;
  --charcoal-2:#241a1d;
  --charcoal-3:#2c2126;
  --wine-black-1:#000000;
  --wine-black-2:#0a0004;
  --wine-black-3:#1a0009;
  --gold:#D4AF37;
  --gold-light:#E8C96A;
  --gold-deep:#9c7a24;
  --warm-white:#F5F1E8;
  --muted:#b7b0a0;
  --muted-2:#8a8577;
  --veg:#5F9E63;
  --nonveg:#B4523F;
  --line: rgba(212,175,55,0.16);
  --line-strong: rgba(212,175,55,0.35);
  --shadow: 0 20px 60px rgba(0,0,0,0.55);
  --radius: 2px;
  --serif-display:'Cinzel', 'Cormorant Garamond', serif;
  --serif:'Cormorant Garamond', serif;
  --sans:'Jost', sans-serif;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:
    radial-gradient(ellipse 85% 65% at 50% 42%, var(--wine-black-1) 0%, var(--wine-black-2) 48%, var(--wine-black-3) 100%);
  background-attachment:fixed;
  background-color:var(--wine-black-3);
  color:var(--warm-white);
  font-family:var(--sans);
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
/* Lets a responsive <picture>'s <img> participate in its parent's layout
   exactly as if the <picture> wrapper weren't there — needed wherever CSS
   sizes the image via width/height:100% + object-fit against the direct
   parent (mp-media, gtile, etc.): an ordinary inline <picture> box has no
   definite height of its own for a percentage-height child to resolve
   against, which is exactly the trap that makes a wrapped image render at
   its raw aspect ratio instead of filling the tile. */
picture{display:contents;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
::selection{background:var(--gold);color:var(--black);}

/* Visually hidden but readable by screen readers/search engines — for
   content that's redundant with a styled visual (like the hero logo image)
   but still needs to exist as real text in the document. */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

.eyebrow{
  font-family:var(--sans);
  letter-spacing:0.35em;
  text-transform:uppercase;
  font-size:11.5px;
  color:var(--gold);
  font-weight:500;
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{content:'';width:22px;height:1px;background:var(--gold);display:inline-block;}

.section-head{max-width:640px;margin:0 auto 56px;text-align:center;}
.section-head h2{
  font-family:var(--serif-display);
  font-weight:500;
  font-size:clamp(28px,4vw,42px);
  letter-spacing:0.04em;
  margin:14px 0 16px;
  color:var(--warm-white);
}
.section-head p{
  font-family:var(--serif);
  font-style:italic;
  font-size:18px;
  color:var(--muted);
  line-height:1.6;
  margin:0;
}

section{padding:88px 24px;position:relative;scroll-margin-top:90px;}
.wrap{max-width:1180px;margin:0 auto;}

/* thread divider — signature element */
.gold-thread{
  position:relative;
  height:56px;
  margin:0 auto;
  width:1px;
  background:linear-gradient(to bottom, transparent, var(--line-strong), transparent);
}
.gold-thread::after{
  content:'';
  position:absolute;
  left:50%;top:50%;
  width:6px;height:6px;
  transform:translate(-50%,-50%) rotate(45deg);
  background:var(--gold);
  box-shadow:0 0 12px 2px rgba(212,175,55,0.6);
}
.thread-wrap{display:flex;justify-content:center;background:transparent;}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(28px);transition:opacity 0.9s ease, transform 0.9s ease;}
.reveal.in{opacity:1;transform:translateY(0);}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  html{scroll-behavior:auto;}
}

/* NAV */
#nav{
  position:fixed;top:var(--top-banners-h,0px);left:0;right:0;z-index:500;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px clamp(20px,4vw,56px);
  transition:background 0.4s ease, padding 0.4s ease, border-color .4s ease, top .35s ease;
  border-bottom:1px solid transparent;
}
#nav.solid{
  background:rgba(10,3,6,0.88);
  backdrop-filter:blur(10px);
  padding:14px clamp(20px,4vw,56px);
  border-bottom:1px solid var(--line);
}
#nav .brand{display:flex;align-items:center;gap:10px;}
#nav .brand img{height:32px;width:auto;display:block;transition:height .4s ease;}
#nav.solid .brand img{height:26px;}
#nav-links{display:flex;gap:34px;align-items:center;}
#nav-links a{
  font-size:12px;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--muted);font-weight:500;
  position:relative;padding-bottom:4px;
  transition:color .3s ease;
}
#nav-links a:hover, #nav-links a.active{color:var(--warm-white);}
#nav-links a::after{
  content:'';position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--gold);
  transition:width .3s ease;
}
#nav-links a:hover::after, #nav-links a.active::after{width:100%;}
.btn-ghost-gold{
  display:inline-block;
  border:1px solid var(--gold-deep);
  color:var(--gold-light);
  padding:10px 22px;
  font-size:11.5px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  background:transparent;
  transition:all .3s ease;
  white-space:nowrap;
}
.btn-ghost-gold:hover{background:var(--gold);color:var(--black);border-color:var(--gold);}
.btn-solid-gold{
  display:inline-block;
  background:linear-gradient(135deg,var(--gold-light),var(--gold) 60%,var(--gold-deep));
  color:var(--black);
  border:none;
  padding:12px 26px;
  font-size:11.5px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  font-weight:600;
  text-align:center;
  transition:transform .3s ease, box-shadow .3s ease;
}
.btn-solid-gold:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(212,175,55,0.28);}
.btn-text-gold{color:var(--gold-light);font-size:11.5px;letter-spacing:0.2em;text-transform:uppercase;border-bottom:1px solid var(--gold-deep);padding-bottom:3px;}
.btn-text-gold.disabled{display:inline-block;color:var(--muted-2);border-color:var(--line);cursor:default;pointer-events:none;}

#nav-toggle{display:none;background:none;border:none;color:var(--warm-white);font-size:22px;}

/* mobile nav */
#mobile-panel{
  position:fixed;inset:0;
  background:radial-gradient(ellipse 90% 70% at 50% 40%, var(--wine-black-1) 0%, var(--wine-black-2) 50%, var(--wine-black-3) 100%);
  z-index:600;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;
  transform:translateY(-100%);transition:transform .5s ease;
}
#mobile-panel.open{transform:translateY(0);}
#mobile-panel a{font-family:var(--serif-display);font-size:22px;letter-spacing:0.08em;color:var(--warm-white);}
#mobile-close{position:absolute;top:26px;right:26px;font-size:26px;background:none;border:none;color:var(--warm-white);}

/* HERO */
#hero{
  height:100vh;min-height:640px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;position:relative;padding:0 20px;
  overflow:hidden;
  background:var(--wine-black-3);
}
.hero-bg-image{
  position:absolute;inset:0;z-index:0;
  background-image:url('../assets/hero-bg-1.jpg');
  background-size:cover;background-position:50% 60%;background-repeat:no-repeat;
}
.hero-overlay{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(212,175,55,0.12), transparent 55%),
    linear-gradient(180deg, rgba(5,1,3,0.74) 0%, rgba(5,1,3,0.52) 45%, rgba(5,1,3,0.82) 100%);
}
#hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:1;
  background-image:
    repeating-linear-gradient(115deg, rgba(255,255,255,0.015) 0px, rgba(255,255,255,0.015) 1px, transparent 1px, transparent 90px);
}
.hero-content{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;}
.hero-logo{width:min(72vw,420px);margin:0 auto 26px;filter:drop-shadow(0 6px 30px rgba(0,0,0,0.55));}
.hero-logo img{width:100%;height:auto;display:block;}
#hero .tagline{
  font-family:var(--serif);
  font-style:italic;
  font-weight:400;
  font-size:clamp(15px,2vw,20px);
  color:var(--muted);
  letter-spacing:0.03em;
  margin:0 0 44px;
}
.hero-ctas{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;}
.scroll-cue{
  position:absolute;bottom:34px;left:50%;transform:translateX(-50%);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  color:var(--muted-2);font-size:10px;letter-spacing:0.3em;text-transform:uppercase;
}
.scroll-cue .line{width:1px;height:34px;background:linear-gradient(var(--gold),transparent);animation:scrollmove 2.2s ease-in-out infinite;}
@keyframes scrollmove{0%{transform:scaleY(0.4);opacity:0.4;}50%{transform:scaleY(1);opacity:1;}100%{transform:scaleY(0.4);opacity:0.4;}}
@media (max-height:620px){
  .scroll-cue{display:none;}
}

/* Top banners (e.g. an API connection warning) stack inside a shared
   wrapper so nav always offsets by however much space they actually take
   up, instead of guessing/hardcoding a height. */
#top-banners{position:fixed;top:0;left:0;right:0;z-index:510;}

/* also fixed elements need to move below the banners when they're showing */
body.has-ticker #mobile-panel{padding-top:var(--top-banners-h,0px);}

/* ABOUT */
#about .about-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:80px;align-items:start;}
#about .story p{font-size:17px;line-height:1.9;color:var(--muted);margin:0 0 18px;font-weight:300;}
#about .story p:first-of-type{color:var(--warm-white);font-size:19px;}
.pillars{display:flex;flex-direction:column;gap:28px;}
.pillar{border-left:1px solid var(--line-strong);padding:4px 0 4px 24px;}
.pillar .num{font-family:var(--serif-display);color:var(--gold);font-size:13px;letter-spacing:0.2em;}
.pillar h3{font-family:var(--serif);font-weight:600;font-size:22px;margin:8px 0 8px;}
.pillar p{margin:0;color:var(--muted);font-size:15px;line-height:1.7;}

/* TABS (shared: food&drinks, gallery) */
.tabbar{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:52px;}
.tabbtn{
  background:transparent;border:1px solid var(--line-strong);color:var(--muted);
  padding:9px 20px;font-size:11.5px;letter-spacing:0.16em;text-transform:uppercase;
  transition:all .3s ease;
}
.tabbtn.active,.tabbtn:hover{background:var(--gold);border-color:var(--gold);color:var(--black);}

.menu-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px 60px;}
.menu-item{
  display:flex;justify-content:space-between;gap:18px;
  padding:18px 0;border-bottom:1px dashed var(--line);
}
.menu-item .mi-name{font-family:var(--serif);font-weight:600;font-size:19px;color:var(--warm-white);}
.menu-item .mi-desc{font-size:13.5px;color:var(--muted-2);margin-top:4px;line-height:1.5;font-style:italic;}
.menu-item .mi-price{font-family:var(--serif-display);color:var(--gold-light);font-size:16px;white-space:nowrap;padding-top:2px;}

/* EVENTS SECTION — a dramatic spotlight glow sits behind the heading only,
   scoped tightly to #events so it can't bleed into any other section */
#events{position:relative;overflow:hidden;}
#events::before{
  content:'';position:absolute;top:-10%;left:50%;transform:translateX(-50%);
  width:900px;height:600px;max-width:140vw;
  background:radial-gradient(ellipse at center, rgba(212,175,55,0.13), transparent 62%);
  pointer-events:none;z-index:0;
  animation:events-glow-breathe 8s ease-in-out infinite;
}
@keyframes events-glow-breathe{
  0%, 100%{opacity:1;}
  50%{opacity:0.65;}
}
@media (prefers-reduced-motion: reduce){
  #events::before{animation:none;}
}
#events .wrap{position:relative;z-index:1;}
#events .section-head .lux-line{
  font-family:var(--serif);font-style:italic;font-size:19px;color:var(--gold-light);
  margin:0;letter-spacing:0.02em;
}

/* FEATURED EVENT — a genuine ticket silhouette. The notches are cut from
   the shape itself via clip-path (an SVG path computed in JS from the
   element's real rendered size — see buildTicketPath/updateTicketShape in
   main.js) so the page background shows through them naturally.
   Structure: .featured-event (outer, carries the soft spotlight glow behind
   the ticket — NOT clipped, so the glow isn't cut off by the ticket's own
   silhouette) > .fe-card (carries the silhouette-following drop-shadow) >
   .fe-ticket (its own clip-path defines the visible cutout shape).
   Border mechanism differs by breakpoint on purpose:
   - Desktop (.is-wide): a single SVG <path>, stroked once, using the exact
     same path string as .fe-ticket's own clip-path. One shape, one
     boundary — nothing that can end up slightly misaligned on one edge.
   - Mobile (:not(.is-wide)): .fe-card is a gold-filled layer inset by
     --fe-border-w, and the border is the gap between its shape and the
     (slightly smaller) inner ticket's shape. This is left exactly as it
     was, since it's confirmed working correctly there. */
.featured-event{
  position:relative;
  width:min(1180px, calc(100vw - 96px));margin:64px auto 72px;--fe-border-w:1px;
}
.featured-event::before{
  content:'';position:absolute;inset:-90px;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse at center, rgba(174,118,40,0.14) 0%, rgba(88,39,15,0.07) 38%, transparent 72%);
}
.featured-event .fe-card{
  position:relative;z-index:1;border-radius:8px;
  filter:drop-shadow(0 18px 30px rgba(0,0,0,0.55)) drop-shadow(0 0 14px rgba(199,164,61,0.10));
  transition:transform 250ms ease, filter 250ms ease;
}
.featured-event .fe-card:hover{
  transform:translateY(-4px);
  filter:drop-shadow(0 20px 34px rgba(0,0,0,0.58)) drop-shadow(0 0 20px rgba(199,164,61,0.16));
}
.featured-event .fe-card:not(.is-wide){
  padding:var(--fe-border-w);
  background:rgba(199,164,61,0.75);
}

.featured-event .fe-ticket{
  position:relative;display:grid;grid-template-columns:34% 66%;
  aspect-ratio:3.3/1;min-height:322px;max-height:352px;border-radius:6px;
  background-color:var(--charcoal);
  background-image:
    repeating-linear-gradient(115deg, rgba(255,255,255,0.02) 0px, rgba(255,255,255,0.02) 1px, transparent 1px, transparent 24px),
    linear-gradient(135deg,var(--charcoal-2),var(--charcoal));
  box-shadow:inset 0 0 0 1px rgba(255,225,160,0.06);
}

/* the desktop border — one SVG path, stroked once, covering the ticket exactly */
.featured-event .fe-border-svg{
  position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:4;display:none;
}
.featured-event .fe-ticket.is-wide .fe-border-svg{display:block;}

/* the event photo — a real image, not a background texture, so it can be
   swapped per event and always fills its slot correctly. When there's no
   photo yet, the fallback pattern is deliberately a bit more present than
   before — a flat black panel read as an unfinished placeholder rather
   than an intentional dark surface. */
.featured-event .fe-photo{
  grid-column:1;position:relative;overflow:hidden;
  background-color:var(--charcoal-3);
  background-image:
    repeating-linear-gradient(115deg, rgba(255,255,255,0.035) 0px, rgba(255,255,255,0.035) 1px, transparent 1px, transparent 22px),
    radial-gradient(ellipse at 30% 25%, rgba(212,175,55,0.14), transparent 62%),
    linear-gradient(160deg,var(--charcoal-3),var(--charcoal));
}
.featured-event .fe-photo img{width:100%;height:100%;object-fit:cover;object-position:center 22%;display:block;}
.featured-event .fe-photo::after{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 68% 38%, rgba(255,214,140,0.10), transparent 45%),
    linear-gradient(90deg, rgba(7,3,4,0.20), rgba(7,3,4,0.48));
  pointer-events:none;
}
.featured-event .fe-banner-empty{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:11px;z-index:1;
}
.featured-event .fe-banner-empty .icon-badge{
  width:48px;height:48px;border-radius:50%;border:1px solid rgba(212,175,55,0.35);
  display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.35);
}
.featured-event .fe-banner-empty .icon-placeholder{width:19px;height:19px;color:var(--gold-light);opacity:0.85;}
.featured-event .fe-banner-empty .label{font-size:9.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--gold-light);opacity:0.75;}
.featured-event .fe-photo-tag{
  position:absolute;top:14px;left:14px;z-index:2;
  background:var(--gold);color:var(--black);font-size:9px;letter-spacing:0.1em;text-transform:uppercase;
  font-weight:700;padding:5px 10px;
}

/* the perforation — precise 2px dots on 8px centers (2px dot + 6px gap),
   built with radial-gradient rather than border-style:dotted so the dot
   size/spacing is exact rather than left to the browser's own rendering
   of "dotted". Position is kept in sync with the clip-path notches by JS
   (see updateTicketShape), so it always meets the top/bottom (or left/
   right, on mobile) notches exactly where they are. */
.featured-event .fe-tear{position:absolute;z-index:3;pointer-events:none;}
.featured-event .fe-ticket.is-wide .fe-tear{
  top:22px;bottom:22px;width:2px;margin-left:-1px;
  background-image:radial-gradient(circle, rgba(199,164,61,0.60) 1px, transparent 1.3px);
  background-size:2px 8px;background-repeat:repeat-y;background-position:center top;
}
.featured-event .fe-ticket:not(.is-wide) .fe-tear{
  left:22px;right:22px;height:2px;margin-top:-1px;
  background-image:radial-gradient(circle, rgba(199,164,61,0.60) 1px, transparent 1.3px);
  background-size:8px 2px;background-repeat:repeat-x;background-position:left center;
}

/* the content zone — centered, matching the reference's ticket-invite layout */
.featured-event .fe-content{
  grid-column:2;position:relative;padding:22px 52px;
  display:flex;flex-direction:column;align-items:center;text-align:center;justify-content:center;
}
/* a very faint inner frame, inset from the content zone's own edges only —
   never drawn over the photo or the perforation */
.featured-event .fe-content::before{
  content:'';position:absolute;inset:16px;border:1px solid rgba(199,164,61,0.10);pointer-events:none;
}
.featured-event .fe-title-block{position:static;}
.featured-event .fe-mobile-desc{display:none;}

.featured-event .fe-diamond{
  width:6px;height:6px;background:var(--gold);transform:rotate(45deg);flex-shrink:0;display:inline-block;
}
.featured-event h3{
  font-family:var(--serif-display);font-size:clamp(28px,3vw,44px);margin:10px 0;line-height:1.12;
  color:var(--gold-light);letter-spacing:0.02em;
}
.featured-event .fe-divider-row{display:flex;align-items:center;gap:14px;width:100%;max-width:440px;margin:0 auto;}
.featured-event .fe-divider-row .line{flex:1;height:1px;background:rgba(212,175,55,0.3);}

.featured-event .fe-meta-row{display:flex;align-items:flex-start;gap:22px;margin-top:8px;}
.featured-event .fe-meta-item{display:flex;align-items:center;gap:8px;padding:0 16px;position:relative;}
.featured-event .fe-meta-item:not(:last-child)::after{
  content:'';position:absolute;right:-11px;top:2px;bottom:2px;width:1px;background:rgba(212,175,55,0.25);
}
.featured-event .fe-meta-item .icon-inline{width:15px;height:15px;color:var(--gold);flex-shrink:0;}
.featured-event .fe-meta-item div{text-align:left;}
.featured-event .fe-meta-item b{display:block;font-size:9px;letter-spacing:0.1em;text-transform:uppercase;color:var(--gold-light);margin-bottom:2px;font-weight:600;}
.featured-event .fe-meta-item span{font-size:12px;color:var(--warm-white);line-height:1.4;}

.featured-event .fe-actions{display:flex;justify-content:center;margin-top:18px;}
.featured-event .fe-actions .btn-text-gold{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;min-width:265px;
  border:1px solid rgba(212,175,55,0.5);padding:13px 36px;font-size:11px;letter-spacing:0.16em;
  color:var(--gold-light);text-transform:uppercase;transition:all .3s ease;box-sizing:border-box;
}
.featured-event .fe-actions .btn-text-gold:hover{background:var(--gold);color:var(--black);border-color:var(--gold);}
.featured-event .ev-view-details{display:inline-block;margin-top:10px;font-size:9.5px;}

/* the shine sweep — a soft diagonal light pass, once every few seconds, like
   light catching an embossed card. Subtle on purpose: this is a wow-touch,
   not a distraction. Lives inside .fe-ticket so it's clipped to the ticket
   shape too, never spilling into the notches. */
.featured-event .fe-shine{
  position:absolute;inset:0;z-index:5;pointer-events:none;overflow:hidden;
}
.featured-event .fe-shine::before{
  content:'';position:absolute;top:-40%;bottom:-40%;left:-30%;width:22%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,0.05) 45%, rgba(232,201,106,0.16) 50%, rgba(255,255,255,0.05) 55%, transparent);
  transform:skewX(-18deg);
  animation:fe-shine-sweep 7s ease-in-out infinite;
}
@keyframes fe-shine-sweep{
  0%, 20%{left:-30%;}
  55%, 100%{left:130%;}
}
@media (prefers-reduced-motion: reduce){
  .featured-event .fe-shine::before{animation:none;display:none;}
}

/* tablet / small desktop tier */
@media (min-width:768px) and (max-width:1365px){
  .featured-event{width:calc(100vw - 64px);max-width:1050px;}
  .featured-event .fe-ticket{aspect-ratio:3/1;min-height:0;max-height:none;}
  .featured-event .fe-content{padding:34px 36px;}
  .featured-event h3{font-size:clamp(24px,2.8vw,36px);}
}

/* mobile — a genuinely different vertical layout, not a squeezed horizontal one */
@media (max-width:767px){
  .featured-event{width:calc(100vw - 64px);max-width:380px;margin:32px auto 36px;}
  .featured-event .fe-ticket{grid-template-columns:1fr;grid-template-rows:auto auto;aspect-ratio:unset;min-height:0;max-height:none;}
  .featured-event .fe-photo{grid-column:1;grid-row:1;aspect-ratio:1/1;}
  .featured-event .fe-photo::after{
    background:linear-gradient(180deg, transparent 30%, rgba(10,3,6,0.55) 65%, rgba(10,3,6,0.92) 100%);
  }
  .featured-event .fe-content{grid-column:1;grid-row:2;padding:12px 16px 14px;}

  /* the title block overlays the bottom of the photo instead of sitting in
     the content zone below it — JS sets its height to match the photo's
     actual measured height (see updateTicketShape), and flexbox bottom-
     alignment puts the text right at the photo's lower edge regardless of
     exactly how tall that ends up being */
  .featured-event .fe-title-block{
    position:absolute;top:0;left:0;right:0;z-index:2;
    display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
    padding:0 18px 10px;
  }
  .featured-event .fe-title-block .fe-divider-row{max-width:220px;}
  .featured-event .fe-title-block .fe-divider-row .line{background:rgba(212,175,55,0.5);}

  .featured-event h3{font-size:20px;margin:6px 0;text-shadow:0 2px 10px rgba(0,0,0,0.6);}

  /* meta rows stack with a horizontal rule between each, instead of
     side-by-side columns with vertical rules — and the perforation
     rotates from vertical to horizontal, with notches now on the left
     and right edges instead of top and bottom */
  .featured-event .fe-meta-row{flex-direction:column;align-items:stretch;gap:0;width:100%;max-width:280px;margin:8px auto 0;}
  .featured-event .fe-meta-item{
    padding:7px 2px;justify-content:flex-start;border-bottom:1px solid rgba(212,175,55,0.18);
  }
  .featured-event .fe-meta-item:last-child{border-bottom:none;}
  .featured-event .fe-meta-item::after{display:none;}

  .featured-event .fe-mobile-desc{
    display:block;font-size:11.5px;color:var(--muted);line-height:1.5;
    margin:8px 0 0;max-width:280px;
  }
  .featured-event .fe-actions{margin-top:14px;}
  .featured-event .fe-actions .btn-text-gold{min-width:0;width:100%;max-width:280px;padding:10px 20px;font-size:10px;}
}


/* EVENTS GRID — clean box-office poster cards (no ticket perforation, that's reserved for the featured ticket above) */
.events-list{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:22px;
}
.events-list .event-card{opacity:0;transform:translateY(18px);}
.events-list.in .event-card{animation:card-cascade .7s ease forwards;}
@keyframes card-cascade{to{opacity:1;transform:translateY(0);}}
.events-list.in .event-card:nth-child(1){animation-delay:.02s;}
.events-list.in .event-card:nth-child(2){animation-delay:.10s;}
.events-list.in .event-card:nth-child(3){animation-delay:.18s;}
.events-list.in .event-card:nth-child(4){animation-delay:.26s;}
.events-list.in .event-card:nth-child(5){animation-delay:.34s;}
.events-list.in .event-card:nth-child(6){animation-delay:.42s;}
.events-list.in .event-card:nth-child(n+7){animation-delay:.48s;}
@media (prefers-reduced-motion: reduce){
  .events-list .event-card{opacity:1;transform:none;animation:none !important;}
}
.event-card{
  background:var(--charcoal);border:1px solid var(--line);position:relative;
  display:flex;flex-direction:column;overflow:hidden;border-radius:16px;
  transition:border-color .35s ease, transform .35s ease, box-shadow .35s ease;
}
.event-card:hover{
  border-color:var(--gold-deep);transform:translateY(-6px);
  box-shadow:0 22px 46px rgba(0,0,0,0.42), 0 0 0 1px rgba(212,175,55,0.25), 0 0 32px rgba(212,175,55,0.16);
}
.event-card .ec-poster{
  position:relative;aspect-ratio:3/4;min-height:230px;overflow:hidden;
  background-color:var(--charcoal);
  background-image:
    repeating-linear-gradient(115deg, rgba(255,255,255,0.025) 0px, rgba(255,255,255,0.025) 1px, transparent 1px, transparent 22px),
    radial-gradient(ellipse at center, rgba(212,175,55,0.09), transparent 65%),
    linear-gradient(135deg,var(--charcoal-3),var(--charcoal));
  background-size:cover;background-position:center;
  filter:grayscale(0.2);transition:filter .4s ease, transform .5s ease;
}
.event-card:hover .ec-poster{filter:grayscale(0);transform:scale(1.06);}
.event-card .ec-poster-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;}
.event-card .ec-poster-empty .icon-badge{
  width:44px;height:44px;border-radius:50%;border:1px solid var(--line-strong);
  display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.3);
}
.event-card .ec-poster-empty .icon-placeholder{width:18px;height:18px;color:var(--muted-2);opacity:0.7;}
.event-card .ec-poster-empty span.label{font-size:9px;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted-2);}
.event-card .ec-badge{
  position:absolute;top:10px;left:10px;background:var(--gold);color:var(--black);z-index:2;
  font-size:9.5px;letter-spacing:0.1em;text-transform:uppercase;font-weight:700;padding:4px 10px;
}
.event-card .ec-badge.live{background:var(--warm-white);}
.event-card .ec-badge-secondary{
  position:absolute;top:38px;left:10px;background:rgba(10,3,6,0.65);border:1px solid rgba(212,175,55,0.4);
  color:var(--gold-light);z-index:2;font-size:9px;letter-spacing:0.08em;text-transform:uppercase;
  padding:4px 9px;backdrop-filter:blur(2px);max-width:calc(100% - 20px);
}
.event-card .ec-poster-foot{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:24px 12px 10px;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,0.85) 70%);
  display:flex;justify-content:space-between;align-items:flex-end;gap:6px;flex-wrap:wrap;
}
.event-card .ec-poster-foot span{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--gold-light);letter-spacing:0.02em;white-space:nowrap;}
.event-card .ec-poster-foot .icon-inline{width:11px;height:11px;flex-shrink:0;}
.event-card .ec-info{padding:16px 18px 18px;flex:1;display:flex;flex-direction:column;min-width:0;border-top:1px solid var(--line);}
.event-card h4{font-family:var(--serif);font-weight:600;font-size:17px;margin:0 0 5px;line-height:1.25;}
.event-card .ec-desc{font-size:12.5px;color:var(--muted);line-height:1.5;margin:0 0 12px;}
.ec-desc.clamped{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.event-card .ec-actions{display:flex;flex-direction:column;align-items:flex-start;gap:7px;margin-top:auto;}
.event-card .ev-view-details, .featured-event .ev-view-details{background:none;border:none;padding:0;font-size:10.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--muted);cursor:pointer;border-bottom:1px solid var(--line-strong);font-family:var(--sans);text-decoration:none;display:inline-block;}
.event-card .ev-view-details:hover, .featured-event .ev-view-details:hover{color:var(--gold-light);}

/* OFFERS SECTION — a soft background spotlight, scoped tightly to #offers */
#offers{position:relative;overflow:hidden;}
#offers::before{
  content:'';position:absolute;top:-8%;left:50%;transform:translateX(-50%);
  width:800px;height:520px;max-width:130vw;
  background:radial-gradient(ellipse at center, rgba(212,175,55,0.10), transparent 62%);
  pointer-events:none;z-index:0;
}
#offers .wrap{position:relative;z-index:1;}

.offers-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}

/* offer cards — invitation / membership card feel */
.offer-card{
  background:var(--charcoal);border:1px solid var(--line);border-radius:16px;padding:32px 28px;position:relative;
  transition:border-color .35s ease, transform .35s ease, box-shadow .35s ease;
}
.offer-card:hover{
  border-color:var(--gold-deep);transform:translateY(-5px);
  box-shadow:0 20px 42px rgba(0,0,0,0.38), 0 0 0 1px rgba(212,175,55,0.22), 0 0 30px rgba(212,175,55,0.15);
}
.offer-card .offer-icon{display:block;width:24px;height:24px;color:var(--gold);margin-bottom:16px;}
.offer-card .eyebrow{margin-bottom:14px;}
.offer-card h3{font-family:var(--serif);font-size:22px;font-weight:600;margin:0 0 10px;}
.offer-card p{color:var(--muted);font-size:14px;line-height:1.7;margin:0 0 18px;}
.offer-card .offer-link{
  font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--gold-light);
  border-bottom:1px solid var(--line-strong);padding-bottom:3px;display:inline-block;text-decoration:none;
  transition:color .25s ease, border-color .25s ease;
}
.offer-card .offer-link:hover{color:var(--gold);border-color:var(--gold);}

/* CAFÉ */
#cafe{
  background:linear-gradient(180deg,#000000,#170007 55%,#000000);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.cafe-intro{display:grid;grid-template-columns:0.85fr 1.15fr;gap:60px;align-items:center;margin-bottom:56px;}
.cafe-photo{position:relative;aspect-ratio:4/5;overflow:hidden;border:1px solid var(--line);background:var(--charcoal);}
.cafe-photo img{width:100%;height:100%;object-fit:cover;}
.cafe-photo-fallback{width:100%;height:100%;display:grid;place-items:center;background:radial-gradient(circle at 50% 40%, var(--wine-black-3), var(--wine-black-2));}
.cafe-photo-fallback span{color:var(--gold);font-size:32px;text-shadow:0 0 18px rgba(212,175,55,.5);}
.cafe-copy .eyebrow{margin-bottom:16px;}
.cafe-copy h2{font-family:var(--serif-display);font-size:clamp(30px,4.4vw,44px);margin:0 0 18px;}
.cafe-desc{font-family:var(--serif);font-style:italic;color:var(--muted);font-size:17px;line-height:1.7;margin:0 0 18px;max-width:520px;}
.cafe-hours{font-size:12.5px;letter-spacing:0.12em;text-transform:uppercase;color:var(--gold-light);margin:0 0 22px;}
.cafe-features{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:30px;}
.cafe-chip{border:1px solid var(--line-strong);padding:9px 18px;font-size:11.5px;letter-spacing:0.1em;color:var(--muted);text-transform:uppercase;}

/* café menu highlights — same blurred-backdrop treatment as the homepage
   menu-preview cards (see .mp-media-bg): shows each item's full photo with
   no cropping, no dead letterbox space around it. */
.cafe-highlights{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.cafe-item{
  position:relative;display:block;aspect-ratio:1/1;overflow:hidden;
  border:1px solid var(--line);background:var(--charcoal);
  transition:border-color .3s, transform .3s cubic-bezier(.2,.7,.3,1);
}
.cafe-item:hover{border-color:var(--line-strong);transform:translateY(-4px);}
.cafe-item-bg{
  position:absolute;inset:-5%;width:110%;height:110%;
  background-size:cover;background-position:center;filter:blur(20px) brightness(.55) saturate(1.15);
}
.cafe-item-fg{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;transition:.5s;}
.cafe-item:hover .cafe-item-fg{transform:scale(1.03);}
.cafe-item-fallback{width:100%;height:100%;display:grid;place-items:center;background:radial-gradient(circle at 50% 40%, var(--wine-black-3), var(--wine-black-2));}
.cafe-item-fallback span{color:var(--gold);font-size:22px;}
.cafe-item-scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top, rgba(10,7,8,.85) 0%, rgba(10,7,8,.25) 44%, transparent 64%);
}
.cafe-item-info{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:14px;}
.cafe-item-info h4{font-family:var(--serif);font-weight:400;font-size:16px;line-height:1.2;margin:0 0 4px;color:var(--warm-white);}
.cafe-item-price{font-size:12px;color:var(--gold);letter-spacing:0.03em;}

/* GALLERY */
.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.gtile{
  aspect-ratio:3/4;background-color:var(--charcoal);border:1px solid var(--line);border-radius:16px;
  background-image:
    repeating-linear-gradient(115deg, rgba(255,255,255,0.025) 0px, rgba(255,255,255,0.025) 1px, transparent 1px, transparent 22px),
    radial-gradient(ellipse at center, rgba(212,175,55,0.09), transparent 65%),
    linear-gradient(135deg,var(--charcoal-3),var(--charcoal));
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
  filter:grayscale(0.25);transition:filter .3s ease, border-color .3s ease, transform .3s ease;
}
.gtile:hover{filter:grayscale(0);border-color:var(--line-strong);transform:translateY(-5px);}
.gtile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.gtile .gicon{width:26px;height:26px;color:var(--muted-2);opacity:0.55;}
.gtile .gcap{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:26px 14px 12px;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,0.85) 70%);
  font-size:11.5px;letter-spacing:0.06em;color:var(--warm-white);text-transform:uppercase;text-align:left;
}
.gtile.no-photo .gcap{position:static;background:none;padding:0;margin-top:10px;color:var(--muted-2);text-align:center;}

/* RESERVE FORM */
#reserve .res-wrap{display:grid;grid-template-columns:0.85fr 1.15fr;gap:70px;align-items:flex-start;}
.res-info h3{font-family:var(--serif);font-size:26px;margin:20px 0 14px;}
.res-info p{color:var(--muted);line-height:1.8;font-size:15px;}
.res-info .info-row{display:flex;gap:14px;margin-top:22px;font-size:14px;color:var(--muted);align-items:flex-start;}
.res-info .info-row b{color:var(--warm-white);display:block;font-weight:500;}

.check-status-toggle{
  background:none;border:none;color:var(--gold-light);font-size:12.5px;letter-spacing:0.04em;
  cursor:pointer;margin-top:26px;padding:0;border-bottom:1px solid var(--line-strong);padding-bottom:3px;
}
.check-status-toggle:hover{color:var(--gold);border-color:var(--gold);}
.check-status-panel{
  margin-top:18px;padding:20px;background:var(--charcoal);border:1px solid var(--line);
}
.status-result-card{margin-top:14px;padding:14px 16px;border:1px solid var(--line-strong);background:rgba(0,0,0,0.25);}
.status-result-card .status-pill{
  display:inline-block;padding:4px 10px;font-size:10px;letter-spacing:0.08em;text-transform:uppercase;margin-bottom:8px;
}
.status-result-card .status-pill.confirmed{background:var(--gold);color:var(--black);}
.status-result-card .status-pill.pending{background:rgba(224,185,106,0.15);color:#e0b96a;border:1px solid rgba(224,185,106,0.4);}
.status-result-card .status-pill.waitlisted{background:rgba(224,185,106,0.15);color:#e0b96a;border:1px solid rgba(224,185,106,0.4);}
.status-result-card .status-pill.cancelled{background:rgba(224,138,138,0.15);color:#e08a8a;border:1px solid rgba(224,138,138,0.4);}
.status-result-card p{margin:4px 0 0;font-size:13px;color:var(--muted);line-height:1.6;}
form.card-form{background:var(--charcoal);border:1px solid var(--line);padding:38px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px;}
.form-row.full{grid-template-columns:1fr;}
.field label{display:block;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted-2);margin-bottom:8px;}
.field input, .field select, .field textarea{
  width:100%;background:var(--black);border:1px solid var(--line-strong);
  padding:12px 14px;color:var(--warm-white);font-family:var(--sans);font-size:14px;
}
.field textarea{resize:vertical;min-height:80px;}
.field input:focus, .field select:focus, .field textarea:focus{outline:none;border-color:var(--gold);}
.field input.field-locked{
  border-color:rgba(212,175,55,0.5);background:rgba(212,175,55,0.06);color:var(--gold-light);cursor:not-allowed;
}
.field-hint{font-size:11.5px;color:var(--muted-2);margin:6px 2px 0;line-height:1.5;}
.field-error{font-size:12px;color:#e08a8a;margin:6px 2px 0;line-height:1.4;}
.field-error:empty{display:none;margin:0;}
.field input.invalid, .field select.invalid{border-color:#e08a8a;}
/* Native date/time inputs default their picker icon to a dark color meant for
   light backgrounds — on our black fields that icon is nearly invisible,
   making the field look like plain text rather than something you can pick
   from. color-scheme tells the browser this UI is dark so it adapts the
   icon automatically; the filter re-tints it gold to match the site. */
.field input[type="date"], .field input[type="time"]{
  color-scheme:dark;cursor:pointer;
}
.field input[type="date"]::-webkit-calendar-picker-indicator,
.field input[type="time"]::-webkit-calendar-picker-indicator{
  filter:invert(70%) sepia(50%) saturate(400%) hue-rotate(0deg);
  cursor:pointer;padding:4px;
}
.form-msg{margin-top:16px;font-size:13.5px;padding:12px 16px;border:1px solid var(--line-strong);display:none;}
.form-msg.show{display:block;}
.form-msg.ok{color:var(--gold-light);border-color:var(--gold);}

/* CONTACT */
#contact .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;}
.contact-list{display:flex;flex-direction:column;gap:22px;}
.contact-item{display:flex;gap:16px;align-items:flex-start;padding:18px 0;border-bottom:1px solid var(--line);}
.contact-item .ci-icon{width:34px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--gold);}
.contact-item .ci-icon svg{width:19px;height:19px;}
.contact-item b{display:block;font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted-2);margin-bottom:4px;}
.contact-item a,.contact-item span{font-size:15px;color:var(--warm-white);}
.map-frame{width:100%;height:100%;min-height:340px;border:1px solid var(--line);filter:grayscale(0.4) invert(0.92) contrast(0.9);}

/* FOOTER */
footer{border-top:1px solid var(--line);padding:60px 24px 30px;text-align:center;}
footer .foot-links{display:flex;justify-content:center;gap:28px;flex-wrap:wrap;margin:26px 0;}
footer .foot-links a{font-size:11.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);}
footer .foot-links a:hover{color:var(--gold-light);}
footer .socials{display:flex;justify-content:center;gap:18px;margin-bottom:26px;}
footer .socials a{width:38px;height:38px;border:1px solid var(--line-strong);display:flex;align-items:center;justify-content:center;transition:all .3s ease;color:var(--muted);}
footer .socials a svg{width:16px;height:16px;}
footer .socials a:hover{background:var(--gold);color:var(--black);}
footer .fine{font-size:11px;color:var(--muted-2);letter-spacing:0.04em;}
footer .fine a{text-decoration:underline;text-underline-offset:3px;}

/* FLOATING */
.floating-stack{position:fixed;right:22px;bottom:22px;z-index:450;display:flex;flex-direction:column;gap:12px;align-items:flex-end;}
.fab{
  display:flex;align-items:center;gap:10px;
  background:var(--gold);color:var(--black);padding:14px 20px;
  font-size:12px;letter-spacing:0.14em;text-transform:uppercase;font-weight:600;
  box-shadow:0 12px 30px rgba(0,0,0,0.5);opacity:0;transform:translateY(16px);pointer-events:none;
  transition:opacity .4s ease, transform .4s ease;
}
.fab.show{opacity:1;transform:translateY(0);pointer-events:auto;}
.fab-wa{background:var(--charcoal-2);color:var(--warm-white);border:1px solid var(--line-strong);width:52px;height:52px;border-radius:50%;justify-content:center;padding:0;}
.fab-wa svg{width:22px;height:22px;}
.fab svg{width:20px;height:20px;flex-shrink:0;}

/* ADMIN */
#admin-gate{
  position:fixed;inset:0;background:var(--black);z-index:900;
  display:none;align-items:center;justify-content:center;
}
#admin-gate.show{display:flex;}
.gate-card{background:var(--charcoal);border:1px solid var(--line-strong);padding:44px;width:340px;text-align:center;}
.gate-card h3{font-family:var(--serif-display);font-size:22px;margin:16px 0 8px;}
.gate-card p{font-size:12.5px;color:var(--muted-2);margin:0 0 22px;line-height:1.6;}
.gate-card input{width:100%;background:var(--black);border:1px solid var(--line-strong);padding:12px 14px;color:var(--warm-white);margin-bottom:14px;text-align:center;letter-spacing:0.2em;}
.gate-err{color:#d47a7a;font-size:12px;display:none;margin-bottom:10px;}
.gate-err.show{display:block;}
.gate-back{display:block;margin-top:16px;font-size:11px;color:var(--muted-2);letter-spacing:0.1em;text-transform:uppercase;}

#admin{
  position:fixed;inset:0;background:var(--black);z-index:800;overflow-y:auto;display:none;
}
#admin.show{display:block;}
.admin-topbar{
  position:sticky;top:0;background:var(--charcoal);border-bottom:1px solid var(--line-strong);
  display:flex;align-items:center;justify-content:space-between;padding:16px 28px;z-index:5;
}
.admin-topbar .a-title{font-family:var(--serif-display);font-size:18px;letter-spacing:0.06em;}
.admin-body{display:flex;min-height:calc(100vh - 66px);}
.admin-side{width:220px;border-right:1px solid var(--line);padding:26px 0;flex-shrink:0;}
.admin-side button{
  display:block;width:100%;text-align:left;background:none;border:none;color:var(--muted);
  padding:13px 26px;font-size:12.5px;letter-spacing:0.1em;text-transform:uppercase;border-left:2px solid transparent;
}
.admin-side button.active{color:var(--gold-light);border-left-color:var(--gold);background:var(--charcoal);}
.admin-side button:hover{color:var(--warm-white);}
.admin-main{flex:1;padding:34px 40px;max-width:920px;}
.admin-main h2{font-family:var(--serif-display);font-size:24px;margin:0 0 6px;}
.admin-main>p.hint{color:var(--muted-2);font-size:13px;margin:0 0 30px;}
.admin-row{
  background:var(--charcoal);border:1px solid var(--line);padding:16px 18px;
  display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:10px;
}
.admin-row .ar-info b{display:block;font-size:15px;font-family:var(--serif);font-weight:600;}
.admin-row .ar-info span{font-size:12px;color:var(--muted-2);}
.admin-row .ar-actions{display:flex;gap:8px;flex-shrink:0;}
.admin-row .ar-actions button, .admin-row .ar-actions a{background:none;border:1px solid var(--line-strong);color:var(--muted);padding:6px 12px;font-size:11px;letter-spacing:0.06em;text-transform:uppercase;text-decoration:none;}
.admin-row .ar-actions button:hover, .admin-row .ar-actions a:hover{border-color:var(--gold);color:var(--gold-light);}
.admin-row .ar-actions button.danger:hover{border-color:#d47a7a;color:#d47a7a;}
#ev-clear-featured{
  background:none;border:1px solid var(--line-strong);color:var(--muted);
  padding:5px 11px;font-size:10.5px;letter-spacing:0.06em;text-transform:uppercase;cursor:pointer;
}
#ev-clear-featured:hover{border-color:#d47a7a;color:#d47a7a;}
.admin-add{background:var(--charcoal-2);border:1px dashed var(--line-strong);padding:20px;margin-top:24px;}
.admin-add h4{margin:0 0 16px;font-size:13px;letter-spacing:0.1em;text-transform:uppercase;color:var(--gold-light);}
.admin-grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px;}
.admin-add input,.admin-add textarea,.admin-add select{
  width:100%;background:var(--black);border:1px solid var(--line-strong);padding:10px 12px;color:var(--warm-white);font-size:13.5px;font-family:var(--sans);
}
.admin-add input[type="date"],.admin-add input[type="datetime-local"],
#admin .admin-grid2 > div > input{
  width:100%;background:var(--black);border:1px solid var(--line-strong);padding:10px 12px;color:var(--warm-white);font-size:13.5px;font-family:var(--sans);
}
#admin input[type="date"],#admin input[type="datetime-local"]{color-scheme:dark;cursor:pointer;}
.admin-add input[type="date"]::-webkit-calendar-picker-indicator,
.admin-add input[type="datetime-local"]::-webkit-calendar-picker-indicator,
#admin input[type="date"]::-webkit-calendar-picker-indicator,
#admin input[type="datetime-local"]::-webkit-calendar-picker-indicator{
  filter:invert(70%) sepia(50%) saturate(400%) hue-rotate(0deg);cursor:pointer;
}
.admin-add label{display:block;font-size:10.5px;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted-2);margin-bottom:6px;}
.admin-save-note{font-size:12px;color:var(--gold-light);margin-top:14px;display:none;}
.admin-save-note.show{display:block;}
.admin-warn{background:rgba(212,175,55,0.08);border:1px solid var(--line-strong);padding:14px 18px;font-size:12.5px;color:var(--muted);line-height:1.7;margin-bottom:26px;}
.admin-warn b{color:var(--gold-light);}

/* RESPONSIVE */
@media (max-width:980px){
  #nav-links, .btn-ghost-gold.nav-reserve{display:none;}
  #nav-toggle{display:block;}
  #about .about-grid, #reserve .res-wrap, #contact .contact-grid{grid-template-columns:1fr;gap:44px;}
  .offers-grid{grid-template-columns:1fr 1fr;}
  .gallery-grid{grid-template-columns:repeat(2,1fr);}
  .menu-grid{grid-template-columns:1fr;}
  .cafe-intro{grid-template-columns:1fr;gap:34px;}
  .cafe-photo{aspect-ratio:16/9;}
  .cafe-highlights{grid-template-columns:repeat(2,1fr);}
  .admin-side{width:170px;}
  .admin-grid2{grid-template-columns:1fr;}
}
@media (max-width:600px){
  section{padding:60px 18px;}
  .form-row{grid-template-columns:1fr;}
  .offers-grid{grid-template-columns:1fr;}
  .gallery-grid{grid-template-columns:repeat(2,1fr);}
  .events-list{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px;}
  .floating-stack{right:16px;bottom:16px;gap:10px;}
  .fab{width:50px;height:50px;padding:0;justify-content:center;border-radius:50%;}
  .fab .fab-label{display:none;}
  .admin-body{flex-direction:column;}
  .admin-side{width:100%;display:flex;overflow-x:auto;padding:10px;border-right:none;border-bottom:1px solid var(--line);}
  .admin-side button{white-space:nowrap;border-left:none;border-bottom:2px solid transparent;padding:10px 16px;}
  .admin-side button.active{border-left:none;border-bottom-color:var(--gold);}
  .admin-main{padding:24px 18px;}
}

/* ===========================================================
   MENU PREVIEW — homepage teaser. Full browsing lives on the standalone
   /menu page (css/menu.css); this is a curated, tabbed sample that links
   straight into the right section over there.
   =========================================================== */
#menu-preview{ padding-top:70px; padding-bottom:88px; }

.mp-tabs{ display:flex; justify-content:center; gap:8px; flex-wrap:wrap; margin:40px 0 36px; }
.mp-tabs button{
  font-family:var(--sans); letter-spacing:0.14em; text-transform:uppercase; font-size:11px;
  color:var(--muted); background:transparent; border:1px solid var(--line); padding:11px 20px;
  cursor:pointer; transition:all .25s;
}
.mp-tabs button:hover{ border-color:var(--line-strong); color:var(--warm-white); }
.mp-tabs button.active{ border-color:var(--gold); color:var(--black); background:var(--gold); }

.mp-grid{
  display:grid; grid-template-columns:1fr; gap:18px; max-width:1040px; margin:0 auto;
}
/* The whole card is the photo (or fallback panel), aspect-ratio'd so grid
   row-sizing has something definite to measure — everything else (scrim,
   badge, veg mark, caption) sits on top as an absolute overlay. Doing the
   photo as a nested flex/percentage-height child instead of this measured
   pretty reliably ends up rendering at the source image's native aspect
   ratio rather than filling the tile, which is the trap this avoids. */
.mp-card{
  position:relative; display:block; overflow:hidden; aspect-ratio:16/11;
  border:1px solid var(--line); background:var(--charcoal);
  transition:border-color .3s, transform .3s cubic-bezier(.2,.7,.3,1);
}
.mp-card:hover{ border-color:var(--line-strong); transform:translateY(-4px); }
.mp-media{ position:absolute; inset:0; overflow:hidden; background:var(--charcoal); }
/* The foreground photo is object-fit:contain (never cropped — a dish photo
   cropped to fit a fixed-shape tile was cutting off parts of the actual
   plate), which on a tile whose shape doesn't match the photo's own aspect
   ratio leaves empty space top/bottom or side/side. Rather than showing
   that gap as flat charcoal (which read as an oversized border), it's
   filled with a heavily blurred, oversized copy of the SAME photo — a
   common technique (album art players, Apple/Spotify use it) for "show the
   whole image, no dead space, no crop" all at once. */
.mp-media-bg{
  position:absolute; inset:-5%; width:110%; height:110%;
  background-size:cover; background-position:center; filter:blur(22px) brightness(.55) saturate(1.15);
}
.mp-media-fg{ position:relative; z-index:1; width:100%; height:100%; object-fit:contain; filter:saturate(1.02); transition:.5s; }
.mp-card:hover .mp-media-fg{ transform:scale(1.03); }
.mp-fallback{
  width:100%; height:100%; display:grid; place-items:center;
  background:radial-gradient(circle at 50% 40%, var(--wine-black-3), var(--wine-black-2));
}
.mp-fallback span{ color:var(--gold); font-size:26px; text-shadow:0 0 18px rgba(212,175,55,.5); }
.mp-scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to top, rgba(10,7,8,.82) 0%, rgba(10,7,8,.2) 44%, transparent 64%);
}
.mp-badge{
  position:absolute; top:12px; left:12px; z-index:2; font-size:8.5px; letter-spacing:0.22em;
  text-transform:uppercase; color:var(--gold); background:rgba(15,15,15,.78);
  border:1px solid rgba(212,175,55,0.4); padding:4px 9px;
}
.mp-veg{
  position:absolute; top:12px; right:12px; z-index:2; width:14px; height:14px; border:1.4px solid;
  display:grid; place-items:center; background:rgba(15,15,15,.78);
}
.mp-veg::after{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.mp-veg.veg{ color:var(--veg); }
.mp-veg.nonveg{ color:var(--nonveg); }
.mp-info{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  display:flex; align-items:baseline; gap:10px; padding:16px;
}
.mp-info h3{
  font-family:var(--serif); font-weight:400; font-size:19px; line-height:1.2; margin:0;
  color:var(--warm-white); min-width:0;
}
.mp-leader{ flex:1; border-bottom:1px dotted rgba(212,175,55,0.42); transform:translateY(-4px); min-width:12px; }
.mp-price{ font-size:13px; color:var(--gold); letter-spacing:0.04em; flex:none; }

.mp-foot{
  display:flex; flex-direction:column; align-items:center; gap:20px; margin-top:44px; text-align:center;
}
.mp-foot p{ font-family:var(--serif); font-style:italic; font-size:16px; color:var(--muted); margin:0; }

@media (min-width:761px){
  .mp-grid{ grid-template-columns:1.4fr 1fr; gap:22px; }
  .mp-card.featured{ grid-row:1 / 3; aspect-ratio:auto; }
  .mp-info h3{ font-size:21px; }
  .mp-foot{ flex-direction:row; justify-content:space-between; text-align:left; }
}