:root{
  --wine:#5C1A24;
  --wine-deep:#3E0F17;
  --ink:#211C18;
  --cream:#FBF7EF;
  --white:#FFFFFF;
  --gold:#B4823B;
  --gold-light:#CFA05E;
  --gold-dark:#8A6326; /* gold that passes contrast with white text */
  --line:rgba(92,26,36,0.14);
  --font-display:'Fraunces', serif;
  --font-body:'Work Sans', sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{background:var(--cream);} /* fills the notch areas in landscape (viewport-fit=cover) */
body{font-family:var(--font-body);color:var(--ink);}
a{color:inherit;text-decoration:none;}
.wrap{
  max-width:min(1440px, 92vw);margin:0 auto;padding:0 32px;
  /* keep content clear of the notch areas */
  padding-left:max(32px, env(safe-area-inset-left));
  padding-right:max(32px, env(safe-area-inset-right));
}
/* Phones: full-width content. Kept here, before the section rules, so narrower
   containers (.hero-content, .visit-content, .order-content, .footer-content) keep their max-width */
@media (max-width:760px){
  .wrap{
    max-width:100%;
    padding-left:20px;padding-right:20px;
    padding-left:max(20px, env(safe-area-inset-left));
    padding-right:max(20px, env(safe-area-inset-right));
  }
}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:15px 30px;
  font-family:var(--font-body);
  font-size:13.5px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  font-weight:600;
  border-radius:2px;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .25s ease, background .25s ease;
}
.btn-gold{background:var(--gold);color:var(--white);}
.btn-gold:hover{background:var(--wine);transform:translateY(-2px);}

header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(251,247,239,0.94);
  backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:box-shadow .3s ease, border-color .3s ease;
}
header.scrolled{
  border-color:var(--line);
  box-shadow:0 4px 24px rgba(92,26,36,0.06);
}

.utility-bar{
  background:var(--wine-deep);
  overflow:hidden;
  max-height:38px;
  transition:max-height .35s ease, padding .35s ease;
}
header.scrolled .utility-bar{max-height:0;}
.utility-bar .wrap{
  display:flex;align-items:center;justify-content:space-between;
  padding-top:9px;padding-bottom:9px;
}
.utility-bar span{
  font-size:11.5px;letter-spacing:0.03em;color:rgba(251,247,239,0.85);
  white-space:nowrap;
}
/* Narrow phones: drop ", NJ 08861" from the strip so the address and hours fit on one
   line (the full address is in the Visit section and footer). Below 440px the full
   address + "Open daily from 8 AM" (377px at 11.5px) no longer fits */
@media (max-width:439px){
  .utility-bar .utility-address-extra{display:none;}
}
/* Smallest phones: shrink the strip text in small steps so both pieces stay on one line */
@media (max-width:374px){
  .utility-bar span{font-size:11px;letter-spacing:0.02em;}
}
@media (max-width:359px){
  .utility-bar span{font-size:10px;letter-spacing:0.01em;}
}

.main-header{padding:10px 0;transition:padding .3s ease;}
header.scrolled .main-header{padding:6px 0;}
header .main-header .wrap{display:flex;align-items:center;justify-content:space-between;}

.brand{display:flex;align-items:center;gap:12px;}
.brand img{height:64px;width:auto;transition:height .3s ease;}
header.scrolled .brand img{height:50px;}

.brand-text{
  font-family:var(--font-display);
  font-size:20px;
  font-weight:700;
  color:var(--wine);
  letter-spacing:0.02em;
}
.brand-text small{
  font-family:var(--font-body);
  font-size:15px;
  font-weight:500;
  color:var(--ink);
  margin-left:6px;
}

nav.main-nav{display:flex;align-items:center;gap:44px;}
nav.main-nav a{
  font-size:13px;letter-spacing:0.08em;text-transform:uppercase;font-weight:500;
  color:var(--ink);
  white-space:nowrap;
  position:relative;
  padding-bottom:4px;
}
nav.main-nav a::after{
  content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--gold);
  transition:width .3s ease;
}
nav.main-nav a:hover::after{width:100%;}

.header-cta{display:flex;align-items:center;gap:22px;}
.header-cta .btn{padding:11px 22px;font-size:12px;white-space:nowrap;position:relative;}

/* "Soon" pill on the header's Order Online items. Absolutely positioned, so it adds
   no width to the button or nav link. Hidden unless <body> has .delivery-coming-soon */
.soon-tag{
  display:none;
  position:absolute;
  top:-9px;right:-10px;
  padding:2px 6px;
  border-radius:3px;
  background:var(--gold-dark);
  color:var(--white);
  font-family:var(--font-body);
  font-size:9.5px;
  font-weight:600;
  line-height:1.2;
  letter-spacing:0.1em;
  text-transform:uppercase;
  white-space:nowrap;
}
nav.main-nav a .soon-tag{top:-13px;right:-18px;}
body.delivery-coming-soon .soon-tag{display:block;}

/* Hidden visually but read by screen readers */
.visually-hidden{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

.menu-toggle{display:none;background:none;border:0;cursor:pointer;padding:6px;position:relative;z-index:200;}
.menu-toggle span{display:block;width:24px;height:2px;background:var(--wine);margin:5px 0;transition:transform .3s ease, opacity .3s ease;}
.menu-toggle.active span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.menu-toggle.active span:nth-child(2){opacity:0;}
.menu-toggle.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.hero{
  background:var(--cream);
  padding:150px 0 90px;
  text-align:center;
}
.hero-content{max-width:640px;margin:0 auto;}
.hero .eyebrow{
  font-size:11.5px;letter-spacing:0.18em;text-transform:uppercase;font-weight:600;color:var(--gold);
  margin-bottom:14px;
}
.hero h1{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(32px, 5vw, 46px);
  color:var(--wine);
  line-height:1.15;
}
.hero h1 em{font-style:italic;font-weight:400;color:var(--gold);}
.hero .lede{
  font-size:14.5px;color:#6b6259;line-height:1.7;margin-top:16px;
  max-width:440px;margin-left:auto;margin-right:auto;
}
.hero-actions{display:flex;gap:12px;justify-content:center;margin-top:24px;flex-wrap:wrap;}
.btn-outline-wine{border:1px solid var(--wine);color:var(--wine);background:transparent;}
.btn-outline-wine:hover{background:var(--wine);color:var(--white);}

.ornament-divider{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:34px;}
.ornament-divider .stem{width:48px;height:1px;background:var(--line);}
.ornament-divider .diamond{width:12px;height:12px;border:1.4px solid var(--gold);transform:rotate(45deg);}

.story{
  background:var(--white);
  padding:100px 0;
  border-top:1px solid var(--line);
}
.story-grid{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:60px;
  align-items:center;
}
.story .eyebrow{
  font-size:11.5px;letter-spacing:0.18em;text-transform:uppercase;font-weight:600;color:var(--gold);
  margin-bottom:14px;
}
.story h2{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(26px, 3.4vw, 36px);
  color:var(--wine);
  line-height:1.15;
  margin-bottom:20px;
}
.story-lead{
  font-family:var(--font-display);font-style:italic;font-weight:400;
  font-size:16px;color:var(--ink);
  margin-bottom:12px;
  line-height:1.5;
}
.story-body{
  font-size:14px;color:#6b6259;line-height:1.75;
  max-width:420px;
}
.story-visual{
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:4px;
  aspect-ratio:664 / 415;
  overflow:hidden;
}
.story-visual img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.menu{
  background:var(--cream);
  padding:100px 0;
  border-top:1px solid var(--line);
}
.menu-head{
  max-width:600px;
  margin:0 auto 48px;
  text-align:center;
}
.menu .eyebrow{
  font-size:11.5px;letter-spacing:0.18em;text-transform:uppercase;font-weight:600;color:var(--gold);
  margin-bottom:14px;
  display:inline-block;
}
.menu h2{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(28px, 3.8vw, 40px);
  color:var(--wine);
  line-height:1.15;
}
.menu-intro{
  font-size:14px;color:#6b6259;line-height:1.7;
  margin-top:14px;
}

.accordion{
  max-width:820px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* Loading / error message shown in place of the accordion */
.menu-status{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:4px;
  padding:32px 24px;
  text-align:center;
  font-family:var(--font-display);
  font-style:italic;
  font-size:16px;
  line-height:1.5;
  color:var(--wine);
}

.acc-item{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:4px;
  overflow:hidden;
}

.acc-header{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:none;
  border:0;
  cursor:pointer;
  padding:18px 22px;
  font-family:var(--font-display);
  font-size:16px;
  font-weight:600;
  color:var(--wine);
  text-align:left;
  scroll-margin-top:90px; /* clears the fixed header when scrolled into view */
}
.acc-item.active .acc-header{
  background:var(--cream);
}

.acc-icon{
  position:relative;
  width:16px;height:16px;
  flex-shrink:0;
}
.acc-icon::before, .acc-icon::after{
  content:"";
  position:absolute;
  background:var(--gold);
  top:50%;left:50%;
  transform:translate(-50%,-50%);
}
.acc-icon::before{width:14px;height:2px;}
.acc-icon::after{width:2px;height:14px;transition:transform .3s ease;}
.acc-item.active .acc-icon::after{transform:translate(-50%,-50%) rotate(90deg);}

.acc-panel{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .35s ease;
}
.acc-item.active .acc-panel{
  grid-template-rows:1fr;
}
/* Set briefly by menu.js to close a panel instantly */
.acc-panel.no-transition{
  transition:none;
}
.acc-panel-inner{
  overflow:hidden;
}

.dish-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:40px;
  padding:4px 22px 24px;
}
.dish{
  padding:14px 0;
  border-bottom:1px solid var(--line);
}
.dish:nth-last-child(1), .dish:nth-last-child(2):nth-child(odd){
  border-bottom:none;
}
.dish h4{
  font-family:var(--font-display);
  font-size:15px;
  font-weight:600;
  color:var(--ink);
  margin-bottom:4px;
  line-height:1.3;
}
/* name on the left (may wrap), price on the right, aligned with the name's first line */
.dish-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:14px;
  margin-bottom:4px;
}
.dish-head h4{
  margin-bottom:0;
  min-width:0;
}
.dish-price{
  flex-shrink:0;
  white-space:nowrap;
  font-family:var(--font-display);
  font-size:15px;
  font-weight:600;
  line-height:1.3;
  color:var(--wine);
}
.dish p{
  font-size:12.5px;
  color:#6b6259;
  line-height:1.55;
}

.menu-note{
  text-align:center;
  margin-top:36px;
  font-size:12.5px;
  color:#8a8078;
  font-style:italic;
}

.visit{
  background:var(--white);
  padding:100px 0;
  border-top:1px solid var(--line);
  text-align:center;
}
.visit-content{max-width:560px;margin:0 auto;}
.visit .eyebrow{
  font-size:11.5px;letter-spacing:0.18em;text-transform:uppercase;font-weight:600;color:var(--gold);
  margin-bottom:14px;
  display:inline-block;
}
.visit h2{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(28px, 3.8vw, 40px);
  color:var(--wine);
  line-height:1.15;
  margin-bottom:26px;
}
.visit-info p{
  font-size:14.5px;
  color:var(--ink);
  line-height:1.7;
}
.visit-note{
  font-size:13px;
  color:#6b6259;
  font-style:italic;
  margin-top:18px;
}
.visit-actions{
  display:flex;
  gap:12px;
  justify-content:center;
  margin-top:22px;
  flex-wrap:wrap;
}
.visit-map{
  margin-top:40px;
  border:1px solid var(--line);
  border-radius:4px;
  overflow:hidden;
}
.visit-map iframe{
  width:100%;
  height:220px;
  border:0;
  display:block;
}

.order-online{
  background:var(--cream);
  padding:90px 0;
  border-top:1px solid var(--line);
  text-align:center;
}
.order-content{max-width:560px;margin:0 auto;}
.order-online .eyebrow{
  font-size:11.5px;letter-spacing:0.18em;text-transform:uppercase;font-weight:600;color:var(--gold);
  margin-bottom:14px;
  display:inline-block;
}
.order-online h2{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(26px, 3.4vw, 36px);
  color:var(--wine);
  line-height:1.15;
}
.order-intro{
  font-size:14px;color:#6b6259;line-height:1.7;
  margin-top:14px;
}

.order-badges{
  /* Grid, not flex-wrap: equal columns keep every badge the same width, and
     grid-auto-rows:1fr keeps every row the same height, so a badge looks the same
     size with or without its "Coming soon" caption, on any row */
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 176px));
  grid-auto-rows:1fr;
  justify-content:center;
  gap:16px;
  margin-top:32px;
}
.order-badge{
  min-width:0;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:6px;
  padding:18px 28px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform .25s ease, border-color .25s ease;
}
.order-badge:hover{
  transform:translateY(-3px);
  border-color:var(--gold);
}
.order-badge img{
  height:32px;
  width:auto;
  max-width:min(130px, 100%);
  object-fit:contain;
}

/* Phone number for pickup orders while delivery is coming soon */
.order-phone{
  margin-top:10px;
  font-family:var(--font-display);
  font-size:22px;
  font-weight:600;
  color:var(--wine);
}
.order-phone a{
  text-decoration:underline;
  text-decoration-color:var(--gold);
  text-decoration-thickness:1px;
  text-underline-offset:4px;
  transition:text-decoration-color .25s ease, text-decoration-thickness .25s ease;
}
.order-phone a:hover,
.order-phone a:focus-visible{
  text-decoration-color:var(--wine);
  text-decoration-thickness:2px;
}

/* A delivery badge without a link is "coming soon": normal card, grey dimmed logo,
   a caption underneath, and no hover. Adding its href makes it a normal live badge. */
.order-badge:not([href]){
  flex-direction:column;
  cursor:default;
}
.order-badge:not([href]):hover{
  transform:none;
  border-color:var(--line);
}
.order-badge:not([href]) img{
  opacity:0.5;
  filter:grayscale(1);
}
.order-badge:not([href])::after{
  content:"Coming soon";
  margin-top:8px;
  font-family:var(--font-body);
  font-size:10.5px;
  font-weight:500;
  letter-spacing:0.12em;
  text-transform:uppercase;
  white-space:nowrap;
  color:#6b6259;
}

.site-footer{
  background:var(--wine-deep);
  padding:56px 0 32px;
  text-align:center;
}
.footer-content{max-width:600px;margin:0 auto;}
.footer-brand{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-bottom:20px;
}
.footer-logo{
  height:64px;
  width:auto;
}
.footer-brand span{
  font-family:var(--font-display);
  font-weight:700;
  font-size:20px;
  letter-spacing:0.04em;
  color:var(--cream);
}
.footer-nav{
  display:flex;
  gap:22px;
  justify-content:center;
  flex-wrap:wrap;
  margin-bottom:22px;
}
.footer-nav a{
  font-size:11.5px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--gold-light);
  transition:color .25s ease;
}
.footer-nav a:hover{color:var(--cream);}
.footer-contact{
  font-size:12.5px;
  color:rgba(251,247,239,0.7);
  border-top:1px solid rgba(251,247,239,0.15);
  padding-top:16px;
  margin-bottom:12px;
}
.footer-hours{margin-top:6px;}
.footer-bottom{
  font-size:11px;
  color:rgba(251,247,239,0.45);
}

.marquee-banner{
  background:var(--wine-deep);
  padding:16px 0;
  overflow:hidden;
}
.marquee-track{
  display:flex;
  width:max-content;
  animation:marquee-scroll 22s linear infinite;
}
.marquee-item{
  padding:0 4px;
  white-space:nowrap;
  font-size:13px;
  letter-spacing:0.15em;
  font-weight:600;
  color:var(--cream);
}

@keyframes marquee-scroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}

.footer-social{
  display:flex;
  gap:16px;
  justify-content:center;
  margin-top:24px;
  margin-bottom:24px;
}
.footer-social a{
  color:var(--gold-light);
  display:flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border:1px solid rgba(251,247,239,0.2);
  border-radius:50%;
  transition:color .25s ease, border-color .25s ease, transform .25s ease;
}
.footer-social a:hover{
  color:var(--cream);
  border-color:var(--gold-light);
  transform:translateY(-2px);
}
.footer-social svg{
  width:16px;
  height:16px;
}
/* Compact header: subtitle hidden, tighter nav (full header needs 1462px+) */
@media (max-width:1461px){
  .brand-text small{display:none;}
  nav.main-nav{gap:24px;}
}
/* Hamburger: below the width where the compact header fits with 60px to spare.
   Must match HAMBURGER_MAX_WIDTH in header.js. */
@media (max-width:1118px){
  nav.main-nav, .header-cta .btn{display:none;}
  .brand-text small{display:inline;}
  .menu-toggle{display:block;}
  nav.main-nav.open{
    display:flex;flex-direction:column;
    position:absolute;top:100%;right:0;width:70%;
    max-height:calc(100vh - 100%);overflow-y:auto;
    background:var(--cream);
    padding:24px 40px 40px;gap:28px;z-index:99;
    padding-right:calc(40px + env(safe-area-inset-right)); /* clear of the right-hand notch area */
    box-shadow:-10px 0 30px rgba(92,26,36,0.1);
  }
}
@media (max-width:760px){
  .hero{padding:130px 0 60px;}
  .story{padding:70px 0;}
  .story-grid{grid-template-columns:1fr;gap:32px;}
  .story-visual{order:-1;}
  .menu{padding:70px 0;}
  .menu-head{margin-bottom:32px;}
  .acc-header{padding:15px 18px;font-size:14.5px;}
  .dish-grid{grid-template-columns:1fr;padding:4px 18px 18px;}
  .dish{border-bottom:1px solid var(--line) !important;}
  .dish:last-child{border-bottom:none !important;}
  .visit{padding:70px 0;}
  .visit-map iframe{height:180px;}
  .order-online{padding:60px 0;}
  .order-badges{gap:12px;}
  .order-badge{padding:14px 20px;}
  .site-footer{padding:44px 0 28px;}
  .footer-nav{gap:14px 18px;}
  .marquee-track{animation: marquee-scroll 35s linear infinite;}
}
/* Narrow phones: two badges per row, the odd last one centred underneath at the same width */
@media (max-width:480px){
  .order-badges{grid-template-columns:repeat(2, minmax(0, 176px));}
  .order-badge{padding:14px 12px;}
  .order-badge:last-child:nth-child(odd){
    grid-column:1 / -1;
    justify-self:center;
    width:calc((100% - 12px) / 2);
  }
}