/* Shallots Bistro - shared stylesheet.
   Loaded by index.html and menu.html. */

/* ============================ TOKENS ============================ */
:root{
  --ink:#100E0C;
  --ink-2:#17140F;
  --surface:#1D1913;
  --surface-2:#241F18;
  --line:rgba(220,200,165,.16);
  --line-soft:rgba(220,200,165,.09);

  --cream:#F5EFE4;
  --cream-dim:#CFC5B4;
  --muted:#9C9080;

  --brass:#C9A15A;
  --brass-bright:#E3C078;
  --wine:#7C2130;
  --wine-bright:#9C2E3F;

  --display:"Playfair Display","Didot","Bodoni MT","Hoefler Text",Garamond,Georgia,"Times New Roman",serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --pad:clamp(1.25rem,5vw,4rem);
  --maxw:1200px;
  --header-h:76px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--header-h);-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}
body{
  margin:0;background:var(--ink);color:var(--cream);
  font-family:var(--sans);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:2px}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.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}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--brass);color:var(--ink);padding:.75rem 1.25rem;font-weight:600}
.skip:focus{left:.5rem;top:.5rem}

/* ============================ TYPE ============================ */
h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:1.1;margin:0;letter-spacing:-.01em}
.eyebrow{
  font-family:var(--sans);font-size:.7rem;font-weight:600;letter-spacing:.28em;
  text-transform:uppercase;color:var(--brass);margin:0 0 1rem;
}
.section-title{font-size:clamp(2rem,5.5vw,3.4rem);margin-bottom:1.1rem}
.lede{color:var(--cream-dim);font-size:clamp(1rem,2.2vw,1.125rem);max-width:62ch}
.rule{width:64px;height:1px;background:var(--brass);margin:1.75rem 0;opacity:.7}
.rule.center{margin-inline:auto}

section{padding-block:clamp(4.5rem,10vw,8rem);position:relative}
.section-head{margin-bottom:clamp(2.5rem,5vw,4rem)}
.section-head.center{text-align:center}
.section-head.center .lede{margin-inline:auto}

/* ==================== GOLD FLECKS (side margins) ====================
   Content is capped at --maxw, so wide screens leave flat dark margins.
   These scattered gold specks fill that space. The mask fades them out
   across the middle of the viewport so they never sit behind text, and
   the whole layer is hidden below 900px where there are no margins.
   Tile sizes are deliberately mismatched so the repeat isn't readable. */
/* Eleven tiled layers: six bright specks, three mid-size flakes, two soft
   glows so the field doesn't read as flat dots. Tile sizes are deliberately
   mismatched (150x180, 185x215, ...) so the repeat never becomes visible.
   To make the whole effect brighter or dimmer, scale the alpha values. */
main > section:not(.hero)::before,
.footer::before{
  content:"";position:absolute;inset:-26px 0;z-index:0;pointer-events:none;
  background-image:
    radial-gradient(circle at 17% 24%, rgba(206,168,96,.92)  0 1.2px, transparent 1.9px),
    radial-gradient(circle at 68% 61%, rgba(236,206,145,.80) 0 1.5px, transparent 2.2px),
    radial-gradient(circle at 41% 83%, rgba(206,168,96,.69)  0 1.3px, transparent 2.0px),
    radial-gradient(circle at 88% 15%, rgba(236,206,145,.86) 0 1.0px, transparent 1.6px),
    radial-gradient(circle at  8% 70%, rgba(206,168,96,.76)  0 1.7px, transparent 2.5px),
    radial-gradient(circle at 30% 55%, rgba(236,206,145,.65) 0 1.1px, transparent 1.7px),
    radial-gradient(circle at 57% 38%, rgba(206,168,96,.57)  0 2.4px, transparent 3.4px),
    radial-gradient(circle at 78% 88%, rgba(227,192,120,.47) 0 2.0px, transparent 3.0px),
    radial-gradient(circle at 23% 44%, rgba(206,168,96,.43)  0 2.8px, transparent 4.0px),
    radial-gradient(circle at 50% 30%, rgba(201,161,90,.10)  0 8px,   transparent 18px),
    radial-gradient(circle at 12% 66%, rgba(227,192,120,.08) 0 6px,   transparent 14px);
  background-size:150px 180px,185px 215px,128px 162px,108px 138px,
                  205px 240px,163px 193px,258px 298px,298px 338px,
                  338px 388px,430px 480px,378px 420px;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.92) 9%,transparent 25%,transparent 75%,rgba(0,0,0,.92) 91%,#000 100%);
          mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.92) 9%,transparent 25%,transparent 75%,rgba(0,0,0,.92) 91%,#000 100%);
  animation:fleckDrift 46s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes fleckDrift{
  from{transform:translate3d(0,-13px,0)}
  to  {transform:translate3d(0, 13px,0)}
}
/* content must sit above the fleck layer */
main > section > .wrap,.footer > .wrap{position:relative;z-index:1}
.footer{position:relative}
@media (max-width:900px){
  main > section:not(.hero)::before,.footer::before{display:none}
}
@media (prefers-reduced-motion:reduce){
  main > section:not(.hero)::before,.footer::before{animation:none;transform:none}
}

/* ============================ BUTTONS ============================ */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:1rem 2rem;border-radius:2px;font-size:.78rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;
  transition:transform .35s var(--ease),background .35s var(--ease),color .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
  will-change:transform;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--brass);color:#191308;box-shadow:0 10px 30px -12px rgba(201,161,90,.65)}
.btn-primary:hover{background:var(--brass-bright);box-shadow:0 18px 40px -14px rgba(201,161,90,.8)}
.btn-outline{border:1px solid rgba(245,239,228,.34);color:var(--cream)}
.btn-outline:hover{border-color:var(--brass);color:var(--brass-bright);background:rgba(201,161,90,.07)}
.btn-wine{background:var(--wine);color:var(--cream);box-shadow:0 10px 30px -12px rgba(124,33,48,.7)}
.btn-wine:hover{background:var(--wine-bright)}
.btn-lg{padding:1.15rem 2.6rem;font-size:.82rem}
.btn-sm{padding:.7rem 1.3rem;font-size:.68rem}
.btn .arr{transition:transform .35s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}

/* ============================ HEADER ============================ */
.header{
  position:fixed;inset:0 0 auto 0;z-index:100;height:var(--header-h);
  display:flex;align-items:center;
  transition:background .4s var(--ease),height .4s var(--ease),box-shadow .4s var(--ease),border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.header::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(16,14,12,.82),rgba(16,14,12,0));
  transition:opacity .4s var(--ease);
}
.header.scrolled{
  height:64px;background:rgba(16,14,12,.93);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--line-soft);box-shadow:0 12px 40px -24px rgba(0,0,0,.9);
}
.header.scrolled::before{opacity:0}
.header .wrap{display:flex;align-items:center;justify-content:space-between;gap:1.5rem}

.brand{display:flex;flex-direction:column;line-height:1;flex-shrink:0}
.brand-name{font-family:var(--display);font-size:1.4rem;font-weight:600;letter-spacing:.02em}
.brand-sub{font-size:.55rem;letter-spacing:.34em;text-transform:uppercase;color:var(--brass);margin-top:.35rem}

.nav{display:flex;align-items:center;gap:1.35rem}
.nav a{
  position:relative;font-size:.72rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--cream-dim);padding-block:.4rem;white-space:nowrap;
  transition:color .3s var(--ease);
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--brass);
  transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease);
}
.nav a:hover,.nav a.active{color:var(--cream)}
.nav a:hover::after,.nav a.active::after{transform:scaleX(1);transform-origin:left}

.header-cta{display:flex;align-items:center;gap:.6rem;flex-shrink:0}
.hdr-social{
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  color:var(--cream-dim);border:1px solid var(--line-soft);
  transition:color .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease);
}
.hdr-social:hover{color:var(--brass);border-color:var(--brass);background:rgba(201,161,90,.07)}

.burger{display:none;width:44px;height:44px;position:relative;flex-shrink:0;z-index:120}
.burger span{
  position:absolute;left:11px;width:22px;height:1.5px;background:var(--cream);
  transition:transform .4s var(--ease),opacity .25s var(--ease);
}
.burger span:nth-child(1){top:16px}
.burger span:nth-child(2){top:21.5px}
.burger span:nth-child(3){top:27px}
body.nav-open .burger span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
body.nav-open .burger span:nth-child(2){opacity:0}
body.nav-open .burger span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

.mobile-nav{
  position:fixed;inset:0;z-index:110;background:var(--ink-2);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.1rem;
  opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s;
  padding:calc(var(--header-h) + 1rem) var(--pad) 2rem;overflow-y:auto;
}
body.nav-open .mobile-nav{opacity:1;visibility:visible}
.mobile-nav a{
  font-family:var(--display);font-size:clamp(1.25rem,5.5vw,1.7rem);color:var(--cream);
  padding:.35rem 1rem;opacity:0;transform:translateY(14px);
  transition:opacity .5s var(--ease),transform .5s var(--ease),color .3s;
}
.mobile-nav a.active{color:var(--brass)}
.mobile-nav a:hover{color:var(--brass)}
body.nav-open .mobile-nav a{opacity:1;transform:none}
body.nav-open .mobile-nav a:nth-child(1){transition-delay:.08s}
body.nav-open .mobile-nav a:nth-child(2){transition-delay:.13s}
body.nav-open .mobile-nav a:nth-child(3){transition-delay:.18s}
body.nav-open .mobile-nav a:nth-child(4){transition-delay:.23s}
body.nav-open .mobile-nav a:nth-child(5){transition-delay:.28s}
body.nav-open .mobile-nav a:nth-child(6){transition-delay:.33s}
body.nav-open .mobile-nav a:nth-child(7){transition-delay:.38s}
body.nav-open .mobile-nav a:nth-child(8){transition-delay:.43s}
body.nav-open .mobile-nav a:nth-child(9){transition-delay:.48s}
.mobile-nav .btn{margin-top:2rem;opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease) .4s,transform .5s var(--ease) .4s}
body.nav-open .mobile-nav .btn{opacity:1;transform:none}
/* .mobile-nav a (above) otherwise overrides the button's own type + colour,
   and its :hover paints brass-on-brass. This is the only order button on phones. */
.mobile-nav a.btn{
  font-family:var(--sans);font-size:.82rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;padding:1.15rem 2.6rem;
}
.mobile-nav a.btn-primary,.mobile-nav a.btn-primary:hover{color:#191308}
body.nav-open{overflow:hidden}

/* nine nav items need room; below this the hamburger takes over */
@media (max-width:1180px){
  .nav{display:none}
  .burger{display:block}
}

/* ============================ HERO ============================ */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:center;
  padding-block:calc(var(--header-h) + 3rem) 5rem;overflow:hidden;
}
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden;background:#0B0A09}
.hero-bg img{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;
  animation:kenburns 26s var(--ease) infinite alternate;
  opacity:0;transition:opacity 1.4s var(--ease);
}
.hero-bg img.loaded{opacity:1}
/* Video layers over the poster image and cross-fades in once it actually plays,
   so a slow or blocked load never leaves the hero empty. */
.hero-bg video{
  position:absolute;inset:0;z-index:1;
  width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.2s var(--ease);
}
.hero-bg video.playing{opacity:1}
.hero-bg.video-on img{animation:none}
@keyframes kenburns{
  from{transform:scale(1.04) translate3d(0,0,0)}
  to{transform:scale(1.16) translate3d(-1.5%,-1.5%,0)}
}
.hero-bg::after{
  content:"";position:absolute;inset:0;z-index:2;
  background:
    linear-gradient(180deg,rgba(16,14,12,.72) 0%,rgba(16,14,12,.42) 38%,rgba(16,14,12,.88) 88%,var(--ink) 100%),
    radial-gradient(120% 80% at 50% 45%,transparent 25%,rgba(16,14,12,.65) 100%);
}
.hero .wrap{position:relative;z-index:2;text-align:center}

.hero-status{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.5rem 1.1rem;border:1px solid var(--line);border-radius:999px;
  background:rgba(16,14,12,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  font-size:.68rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cream-dim);margin-bottom:2rem;
}
.dot{width:7px;height:7px;border-radius:50%;background:var(--muted);flex-shrink:0}
.dot.open{background:#5FBF7F;box-shadow:0 0 0 0 rgba(95,191,127,.6);animation:pulse 2.4s infinite}
.dot.soon{background:var(--brass)}
.dot.closed{background:#8C6060}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(95,191,127,0)}100%{box-shadow:0 0 0 0 rgba(95,191,127,0)}}

.hero h1{
  font-size:clamp(3rem,12vw,7.5rem);line-height:.94;letter-spacing:-.025em;
  margin-bottom:1.25rem;text-shadow:0 4px 40px rgba(0,0,0,.5);
}
.hero-tagline{
  font-size:clamp(.72rem,2.4vw,.95rem);letter-spacing:.42em;text-transform:uppercase;
  color:var(--brass);font-weight:600;margin-bottom:1.75rem;
}
.hero-desc{
  color:var(--cream-dim);max-width:46ch;margin:0 auto 2.75rem;
  font-size:clamp(1rem,2.4vw,1.15rem);
}
.hero-actions{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}
@media (max-width:480px){
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .btn{width:100%}
}

.hero-badges{
  display:flex;flex-wrap:wrap;gap:.75rem 2rem;justify-content:center;align-items:center;
  margin-top:3rem;padding-top:2rem;border-top:1px solid var(--line-soft);
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
}
.hero-badges span{display:inline-flex;align-items:center;gap:.5rem}
.kosher-mark{
  display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;
  border:1px solid var(--brass);color:var(--brass);
  font-family:var(--display);font-size:.62rem;letter-spacing:0;font-weight:700;
}

.scroll-cue{
  position:absolute;left:50%;bottom:2rem;transform:translateX(-50%);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:.6rem;
  font-size:.6rem;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);
}
.scroll-cue .line{width:1px;height:44px;background:linear-gradient(180deg,var(--brass),transparent);animation:cue 2.2s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media (max-height:700px){.scroll-cue{display:none}}

/* ============================ REVEAL ============================ */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.09s}.reveal.d2{transition-delay:.18s}
.reveal.d3{transition-delay:.27s}.reveal.d4{transition-delay:.36s}

/* ============================ ABOUT ============================ */
.about{background:linear-gradient(180deg,var(--ink),var(--ink-2))}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,5rem);align-items:center}
@media (max-width:900px){.about-grid{grid-template-columns:1fr}}
.about-media{position:relative}
.about-media .frame{
  position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:3px;
  background:var(--surface);
}
.about-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.about-media .frame:hover img{transform:scale(1.05)}
.about-media::after{
  content:"";position:absolute;inset:14px -14px -14px 14px;border:1px solid var(--brass);
  opacity:.45;z-index:-1;border-radius:3px;
}
.est-badge{
  position:absolute;right:-12px;bottom:-18px;z-index:3;
  width:112px;height:112px;border-radius:50%;
  background:var(--wine);color:var(--cream);
  display:grid;place-content:center;text-align:center;line-height:1.25;
  box-shadow:0 20px 50px -18px rgba(0,0,0,.9);
  border:1px solid rgba(245,239,228,.18);
}
.est-badge b{display:block;font-family:var(--display);font-size:1.75rem}
.est-badge small{font-size:.55rem;letter-spacing:.22em;text-transform:uppercase;opacity:.85}
@media (max-width:900px){.est-badge{width:92px;height:92px;right:8px}}

.about-body p{color:var(--cream-dim);margin:0 0 1.15rem}
.about-body p strong{color:var(--cream);font-weight:600}
.pull{
  font-family:var(--display);font-size:clamp(1.15rem,2.6vw,1.5rem);line-height:1.45;
  color:var(--cream);border-left:2px solid var(--brass);padding-left:1.5rem;
  margin:2rem 0;font-style:italic;
}
.about-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2.5rem;padding-top:2rem;border-top:1px solid var(--line-soft)}
.about-stats div b{display:block;font-family:var(--display);font-size:clamp(1.5rem,4vw,2rem);color:var(--brass)}
.about-stats div small{font-size:.63rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* ============================ MENU ============================ */
.menu{background:var(--ink-2)}
.menu-tabs{
  display:flex;justify-content:center;flex-wrap:wrap;gap:.5rem;
  margin-bottom:1rem;
}
.menu-tab{
  position:relative;padding:.85rem 1.9rem;border:1px solid var(--line-soft);border-radius:2px;
  font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);transition:all .35s var(--ease);
}
.menu-tab:hover{color:var(--cream);border-color:var(--line)}
.menu-tab[aria-selected="true"]{background:var(--brass);color:#191308;border-color:var(--brass)}
.menu-note-top{text-align:center;color:var(--muted);font-size:.8rem;margin-bottom:3rem}

/* standalone pages have no hero, so they must clear the fixed header */
.menu-page,.events-intro,.page-intro{padding-top:calc(var(--header-h) + clamp(2.5rem,6vw,4.5rem))}
.cross-note{
  margin:1.75rem auto 0;text-align:center;color:var(--muted);font-size:.88rem;max-width:52ch;
}
.cross-note a{color:var(--brass);transition:color .3s var(--ease)}
.cross-note a:hover{color:var(--brass-bright)}
.events-cta{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-top:.5rem}
@media (max-width:480px){.events-cta{flex-direction:column;align-items:stretch}.events-cta .btn{width:100%}}
.events-form{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(1.5rem,4vw,2.5rem);align-items:start}
@media (max-width:860px){.events-form{grid-template-columns:1fr}}
.events-aside .info-block{margin-bottom:2rem}
.events-aside .addr{font-family:var(--display);font-size:1.15rem;color:var(--cream);line-height:1.4}
.menu-back{margin-top:clamp(2.5rem,5vw,3.5rem);text-align:center}
.menu-back a{
  font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);transition:color .3s var(--ease);
}
.menu-back a:hover{color:var(--brass-bright)}

.season-banner{
  display:flex;gap:1rem;align-items:flex-start;
  max-width:760px;margin:0 auto 2.5rem;padding:1.15rem 1.5rem;
  border:1px solid rgba(201,161,90,.34);border-radius:3px;
  background:linear-gradient(135deg,rgba(201,161,90,.10),rgba(124,33,48,.10));
}
.season-banner[hidden]{display:none}
.season-mark{color:var(--brass);font-size:1rem;line-height:1.5;flex-shrink:0}
.panel-note{
  margin:-1rem 0 2.5rem;padding-left:1rem;border-left:1px solid var(--line-soft);
  color:var(--muted);font-size:.82rem;line-height:1.6;max-width:62ch;
}
.season-banner p{margin:0;font-size:.9rem;line-height:1.6;color:var(--cream-dim)}
.season-banner strong{color:var(--cream);font-weight:600}

/* wine: two price columns */
.wine-head{
  display:flex;gap:1.25rem;flex-shrink:0;
  font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
}
.wine-head span{width:52px;text-align:right}
.wine-items{grid-template-columns:1fr;gap:0}
@media (min-width:1100px){.wine-items{grid-template-columns:repeat(2,1fr);gap:.25rem 3.5rem}}
.item.wine .item-desc{font-size:.82rem;font-style:italic}
.wine-prices{display:flex;gap:1.25rem;flex-shrink:0}
.wine-prices b{
  width:52px;text-align:right;font-size:.92rem;font-weight:700;
  color:var(--brass);letter-spacing:.02em;font-variant-numeric:tabular-nums;
}
.wine-prices i{color:var(--muted);font-style:normal;opacity:.5}

.menu-panel[hidden]{display:none}
.menu-panel{animation:fade .6s var(--ease)}
@keyframes fade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.cat{margin-bottom:clamp(3rem,6vw,4.5rem)}
.cat-head{display:flex;align-items:baseline;gap:1.25rem;margin-bottom:2rem}
.cat-head h3{font-size:clamp(1.4rem,3.4vw,1.9rem);white-space:nowrap;color:var(--cream)}
.cat-head .fill{flex:1;height:1px;background:var(--line-soft)}
.cat-sub{
  color:var(--brass);font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  margin:-1.25rem 0 2rem;
}
.cat-note{
  color:var(--muted);font-size:.85rem;font-style:italic;margin:-1rem 0 2rem;max-width:70ch;line-height:1.6;
}

.items{display:grid;grid-template-columns:repeat(2,1fr);gap:.25rem 3.5rem}
@media (max-width:820px){.items{grid-template-columns:1fr}}
.item{
  padding:1rem .9rem;border-radius:3px;border-bottom:1px solid var(--line-soft);
  transition:background .35s var(--ease),transform .35s var(--ease),border-color .35s var(--ease);
}
.item:hover{background:rgba(201,161,90,.05);border-bottom-color:var(--line);transform:translateX(5px)}
.item-top{display:flex;align-items:baseline;gap:.6rem}
.item-name{font-family:var(--display);font-size:1.08rem;font-weight:600;color:var(--cream)}
.item-lead{flex:1;border-bottom:1px dotted rgba(220,200,165,.28);transform:translateY(-4px)}
.item-price{font-size:.95rem;font-weight:700;color:var(--brass);letter-spacing:.02em;white-space:nowrap}
.item-price.mp{font-size:.72rem;letter-spacing:.14em}
.item-desc{color:var(--muted);font-size:.875rem;line-height:1.55;margin-top:.35rem;max-width:52ch}

.addons{
  display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.5rem;
  padding:1.1rem 1.25rem;border:1px dashed var(--line-soft);border-radius:3px;align-items:center;
}
.addons b{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--brass);margin-right:.5rem}
.addons span{font-size:.82rem;color:var(--cream-dim)}
.addons span::after{content:"·";margin-inline:.6rem;color:var(--muted)}
.addons span:last-child::after{content:""}

.menu-foot{
  margin-top:3rem;padding-top:2.5rem;border-top:1px solid var(--line-soft);
  display:flex;flex-wrap:wrap;gap:1.5rem;align-items:center;justify-content:space-between;
}
.menu-foot p{margin:0;color:var(--muted);font-size:.82rem;max-width:52ch}

/* ==================== HOMEPAGE: A TASTE OF THE MENU ==================== */
.teaser{background:var(--ink-2)}
.teaser-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
@media (max-width:900px){.teaser-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.teaser-grid{grid-template-columns:1fr}}

.taste{
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--surface);border:1px solid var(--line-soft);border-radius:3px;
  transition:transform .45s var(--ease),border-color .45s var(--ease),background .45s var(--ease);
}
.taste:hover{transform:translateY(-6px);border-color:var(--line);background:var(--surface-2)}
.taste-img{aspect-ratio:3/2;overflow:hidden;background:var(--surface-2)}
.taste-img img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease);filter:saturate(.92)}
.taste:hover .taste-img img{transform:scale(1.06);filter:saturate(1.04)}
.taste-body{display:flex;flex-direction:column;flex:1;padding:1.35rem 1.5rem 1.5rem}
.taste-body .item-desc{margin-top:.45rem;flex:1;max-width:none}
.taste-cat{
  margin-top:1.1rem;font-size:.6rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--brass);
}
.teaser-foot{
  margin-top:clamp(2.5rem,5vw,3.5rem);display:flex;flex-direction:column;
  align-items:center;gap:1.1rem;text-align:center;
}
.teaser-foot p{margin:0;color:var(--muted);font-size:.88rem;max-width:52ch}

/* ============================ VIDEO / FEATURE ============================ */
.feature{background:linear-gradient(180deg,var(--ink-2),var(--ink))}
.video-shell{
  position:relative;aspect-ratio:16/9;border-radius:3px;overflow:hidden;
  background:var(--surface);border:1px solid var(--line-soft);
  box-shadow:0 40px 90px -50px rgba(0,0,0,1);
}
.video-shell img,.video-shell iframe{width:100%;height:100%;object-fit:cover;border:0;display:block}
.video-shell .veil{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(16,14,12,.25),rgba(16,14,12,.75));
  transition:background .5s var(--ease);
}
.video-shell.playable{cursor:pointer}
.video-shell.playable:hover .veil{background:linear-gradient(180deg,rgba(16,14,12,.15),rgba(16,14,12,.6))}
.play-btn{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:82px;height:82px;border-radius:50%;
  background:rgba(201,161,90,.94);color:#191308;
  display:grid;place-items:center;
  transition:transform .45s var(--ease),background .35s var(--ease);
  box-shadow:0 0 0 0 rgba(201,161,90,.4);
}
.video-shell.playable:hover .play-btn{transform:translate(-50%,-50%) scale(1.1);background:var(--brass-bright)}
.play-btn svg{margin-left:5px}
/* author-origin display:grid above defeats the UA [hidden] rule, so restore it
   explicitly - otherwise the button shows even with no video configured */
.play-btn[hidden]{display:none}
.video-caption{
  position:absolute;left:0;right:0;bottom:0;padding:clamp(1.25rem,3vw,2rem);
  display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;align-items:baseline;
}
.video-caption h3{font-size:clamp(1.1rem,3vw,1.6rem)}
.video-caption p{margin:0;color:var(--cream-dim);font-size:.85rem}

.feature-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:1.25rem}
@media (max-width:820px){.feature-cards{grid-template-columns:1fr}}
.fcard{
  padding:2rem 1.75rem;background:var(--surface);border:1px solid var(--line-soft);border-radius:3px;
  transition:transform .45s var(--ease),border-color .45s var(--ease),background .45s var(--ease);
  display:flex;flex-direction:column;
}
.fcard:hover{transform:translateY(-6px);border-color:var(--line);background:var(--surface-2)}
.fcard .num{font-family:var(--display);font-size:.8rem;color:var(--brass);letter-spacing:.2em;margin-bottom:1rem}
.fcard h4{font-size:1.2rem;margin-bottom:.6rem}
.fcard p{color:var(--muted);font-size:.87rem;margin:0 0 1.25rem;flex:1}
.fcard a{
  font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);
  display:inline-flex;align-items:center;gap:.5rem;transition:gap .3s var(--ease),color .3s
}
.fcard a:hover{gap:.85rem;color:var(--brass-bright)}

/* ============================ GALLERY ============================ */
.gallery{background:var(--ink)}
.gal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem}
.gal-grid figure{
  position:relative;margin:0;overflow:hidden;border-radius:3px;cursor:zoom-in;
  background:var(--surface);aspect-ratio:1;
}
/* Repeating 6-tile rhythm so the mosaic reads well at ANY photo count. */
.gal-grid figure:nth-child(6n+1){grid-column:span 2;grid-row:span 2;aspect-ratio:1}
.gal-grid figure:nth-child(6n+4){grid-column:span 2;aspect-ratio:2/1}
@media (max-width:820px){
  .gal-grid{grid-template-columns:repeat(2,1fr)}
  .gal-grid figure:nth-child(6n+1){grid-column:span 2;grid-row:auto;aspect-ratio:3/2}
  .gal-grid figure:nth-child(6n+4){grid-column:span 2;aspect-ratio:2/1}
}
.gal-grid img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease),filter .6s var(--ease);filter:saturate(.88)}
.gal-grid figure:hover img{transform:scale(1.07);filter:saturate(1.05)}
.gal-grid figure::after{
  content:"";position:absolute;inset:0;background:rgba(16,14,12,.28);
  opacity:0;transition:opacity .5s var(--ease);pointer-events:none;
}
.gal-grid figure:hover::after{opacity:1}
.gal-grid .zoom{
  position:absolute;right:1rem;bottom:1rem;width:38px;height:38px;border-radius:50%;
  background:rgba(201,161,90,.92);color:#191308;display:grid;place-items:center;
  opacity:0;transform:translateY(8px);transition:all .45s var(--ease);pointer-events:none;
}
.gal-grid figure:hover .zoom{opacity:1;transform:none}

.lightbox{
  position:fixed;inset:0;z-index:150;background:rgba(8,7,6,.97);
  display:grid;place-items:center;padding:clamp(1rem,4vw,3rem);
  opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s;
}
.lightbox.on{opacity:1;visibility:visible}
.lightbox img{max-width:100%;max-height:82vh;object-fit:contain;border-radius:3px;box-shadow:0 40px 100px -40px #000}
.lb-btn{
  position:absolute;width:52px;height:52px;border-radius:50%;
  background:rgba(245,239,228,.08);border:1px solid var(--line);color:var(--cream);
  display:grid;place-items:center;transition:background .3s,border-color .3s,transform .3s var(--ease);
}
.lb-btn:hover{background:rgba(201,161,90,.2);border-color:var(--brass);transform:scale(1.06)}
.lb-close{top:clamp(1rem,3vw,2rem);right:clamp(1rem,3vw,2rem)}
.lb-prev{left:clamp(.5rem,3vw,2.5rem);top:50%;margin-top:-26px}
.lb-next{right:clamp(.5rem,3vw,2.5rem);top:50%;margin-top:-26px}
.lb-count{
  position:absolute;bottom:clamp(1rem,3vw,2rem);left:50%;transform:translateX(-50%);
  font-size:.7rem;letter-spacing:.2em;color:var(--muted);
}

/* ==================== ORDER / GIFT-CARD CARDS ==================== */
.order-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem;max-width:900px;margin-inline:auto}
.gift-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem;max-width:760px;margin-inline:auto}
@media (max-width:640px){.order-grid,.gift-grid{grid-template-columns:1fr}}
/* Catering: three ways to cater, three across */
.cater-ways{grid-template-columns:repeat(3,1fr);max-width:1040px}
@media (max-width:900px){.cater-ways{grid-template-columns:1fr;max-width:520px}}

/* Image-based menu tabs (Cocktails & Spirits, Wine, Event Dinner Menu) */
.menu-imgs{display:flex;flex-direction:column;align-items:center;gap:1.5rem}
.menu-img{
  width:100%;max-width:780px;height:auto;border-radius:10px;
  border:1px solid var(--line-soft);box-shadow:0 24px 60px -28px rgba(0,0,0,.85);
}
.menu-pdf{margin:0 0 2rem;text-align:center}
.order-card{
  position:relative;display:flex;flex-direction:column;
  padding:clamp(1.75rem,4vw,2.5rem);background:var(--surface);
  border:1px solid var(--line-soft);border-radius:3px;
  transition:transform .4s var(--ease),border-color .4s var(--ease),background .4s var(--ease);
}
.order-card:hover{transform:translateY(-5px);border-color:var(--line);background:var(--surface-2)}
.order-card[hidden]{display:none}
.order-card-primary{border-color:rgba(201,161,90,.35);background:linear-gradient(160deg,rgba(201,161,90,.08),var(--surface))}
.order-tag{
  position:absolute;top:1rem;right:1rem;font-size:.6rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:#191308;background:var(--brass);padding:.3rem .6rem;border-radius:2px;
}
.order-card h2{font-family:var(--display);font-size:clamp(1.3rem,3vw,1.65rem);color:var(--cream);margin-bottom:.6rem}
.order-card p{color:var(--muted);font-size:.92rem;line-height:1.6;margin:0 0 1.5rem;flex:1}
.order-go{
  font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);
  display:inline-flex;align-items:center;gap:.5rem;transition:gap .3s var(--ease),color .3s
}
.order-card:hover .order-go{gap:.8rem;color:var(--brass-bright)}
.order-note{text-align:center;color:var(--muted);font-size:.9rem;margin:2.5rem auto 0;max-width:52ch}

/* takeout & delivery list (Order page) - big linked headings + promo text */
.takeout-list{max-width:640px;margin:0 auto;display:flex;flex-direction:column;gap:clamp(2rem,4.5vw,3rem);text-align:center}
.takeout-item[hidden]{display:none}
.takeout-name{
  display:inline-block;font-family:var(--display);font-weight:600;
  font-size:clamp(1.5rem,4vw,2.1rem);line-height:1.15;color:var(--brass);
  text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px;
  transition:color .3s var(--ease);
}
.takeout-name:hover{color:var(--brass-bright)}
.takeout-item p{margin:1rem auto 0;color:var(--cream-dim);font-size:1rem;line-height:1.65;max-width:56ch}
.takeout-item p strong{color:var(--cream);font-weight:600}
.promo-banner{
  display:flex;gap:1rem;align-items:flex-start;max-width:760px;margin:0 auto 2.5rem;
  padding:1.15rem 1.5rem;border:1px solid rgba(201,161,90,.4);border-radius:3px;
  background:linear-gradient(135deg,rgba(201,161,90,.14),rgba(124,33,48,.12));
}
.promo-banner[hidden]{display:none}
.promo-mark{color:var(--brass);font-size:1.1rem;line-height:1.4;flex-shrink:0}
.promo-banner p{margin:0;font-size:.95rem;line-height:1.6;color:var(--cream-dim)}
.promo-banner code{font-size:.85em;color:var(--brass);background:rgba(201,161,90,.1);padding:.1em .4em;border-radius:2px}

/* ==================== RESERVATIONS PAGE ==================== */
.reserve-cta{display:flex;justify-content:center;margin:0 0 3rem}
.reserve-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);max-width:900px;margin-inline:auto;align-items:start}
@media (max-width:760px){.reserve-grid{grid-template-columns:1fr;gap:2.5rem}}
.reserve-h{font-size:clamp(1.15rem,2.6vw,1.4rem);color:var(--cream);margin:1.25rem 0 1rem}
.event-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.event-list li{
  position:relative;color:var(--cream-dim);font-size:.95rem;line-height:1.5;
  padding:.7rem 0 .7rem 1.5rem;border-bottom:1px solid var(--line-soft);
}
.event-list li:last-child{border-bottom:none}
.event-list li::before{content:"";position:absolute;left:0;top:1.15rem;width:6px;height:6px;border-radius:50%;background:var(--brass)}

/* ==================== FAQ / POLICIES / HOURS PAGES ==================== */
.info-narrow{max-width:820px;margin-inline:auto}

/* native <details> accordion - keyboard accessible with no JS */
.faq-item{border-bottom:1px solid var(--line-soft)}
.faq-item summary{
  list-style:none;cursor:pointer;padding:1.35rem 3rem 1.35rem 0;position:relative;
  font-family:var(--display);font-size:clamp(1.05rem,2.4vw,1.22rem);color:var(--cream);
  transition:color .3s var(--ease);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--brass-bright)}
.faq-item summary::after{
  content:"";position:absolute;right:.5rem;top:50%;width:11px;height:11px;
  border-right:1.5px solid var(--brass);border-bottom:1.5px solid var(--brass);
  transform:translateY(-70%) rotate(45deg);transition:transform .35s var(--ease);
}
.faq-item[open] summary::after{transform:translateY(-20%) rotate(225deg)}
.faq-item .faq-a{padding:0 3rem 1.5rem 0;color:var(--cream-dim);line-height:1.7;max-width:68ch}
.faq-item .faq-a p{margin:0 0 .75rem}
.faq-item .faq-a p:last-child{margin-bottom:0}
.faq-item .faq-a a{color:var(--brass);text-decoration:underline;text-underline-offset:3px}
.faq-item .faq-a a:hover{color:var(--brass-bright)}

.policy-block{margin-bottom:clamp(2.25rem,5vw,3rem)}
.policy-block h3{
  font-size:clamp(1.2rem,2.8vw,1.45rem);color:var(--cream);margin-bottom:.75rem;
}
.policy-block p{color:var(--cream-dim);line-height:1.7;margin:0 0 .8rem;max-width:68ch}
.policy-block p:last-child{margin-bottom:0}
.policy-block strong{color:var(--cream);font-weight:600}

/* hours page */
.hours-wide{max-width:640px;margin-inline:auto}
.hours-wide .hours-table td{padding:.95rem .25rem;font-size:1rem}
.hours-status{display:flex;justify-content:center;margin-bottom:2rem}
.special-hours{
  margin-top:2.5rem;padding:1.5rem 1.75rem;
  border:1px solid rgba(201,161,90,.3);border-radius:3px;
  background:linear-gradient(135deg,rgba(201,161,90,.08),rgba(124,33,48,.08));
}
.special-hours h3{font-size:1.05rem;color:var(--cream);margin-bottom:.9rem}
.special-hours ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.special-hours li{
  color:var(--cream-dim);font-size:.95rem;padding:.6rem 0;
  border-bottom:1px solid var(--line-soft);
}
.special-hours li:last-child{border-bottom:none}

/* ============================ OPENING POP-UP ============================ */
.popup-wrap{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;padding:clamp(1rem,5vw,2rem);
  background:rgba(8,7,6,.74);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
  opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s;
}
.popup-wrap.on{opacity:1;visibility:visible}
.popup-card{
  position:relative;width:100%;max-width:440px;
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
  border:1px solid var(--line);border-radius:4px;text-align:center;
  padding:clamp(2.25rem,5vw,3rem) clamp(1.75rem,5vw,2.75rem) clamp(2rem,5vw,2.75rem);
  box-shadow:0 40px 100px -40px rgba(0,0,0,1);
  transform:translateY(18px) scale(.97);transition:transform .55s var(--ease);
}
.popup-wrap.on .popup-card{transform:none}
.popup-close{
  position:absolute;top:.8rem;right:.8rem;width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;color:var(--muted);
  transition:background .3s var(--ease),color .3s var(--ease);
}
.popup-close:hover{background:rgba(245,239,228,.08);color:var(--cream)}
.popup-mark{
  display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;
  border:1px solid var(--brass);color:var(--brass);margin-bottom:1.15rem;
  font-family:var(--display);font-size:.72rem;font-weight:700;
}
.popup-title{font-size:clamp(1.5rem,4.5vw,2.05rem);color:var(--cream);margin-bottom:.7rem;text-wrap:balance}
.popup-body{color:var(--cream-dim);font-size:.95rem;line-height:1.65;margin-bottom:1.5rem}
.popup-body:last-child{margin-bottom:0}
.popup-body strong{color:var(--cream);font-weight:600}
.popup-hours{
  list-style:none;margin:.5rem 0 1.85rem;padding:0;
  display:flex;flex-direction:column;
}
.popup-hours li{
  color:var(--cream-dim);font-size:1rem;line-height:1.5;
  padding:.7rem 0;border-bottom:1px solid var(--line-soft);
}
.popup-hours li:first-child{padding-top:0}
.popup-hours li:last-child{border-bottom:none}
.popup-hours li strong{color:var(--cream);font-weight:600}
.popup-cta{width:100%}
@media (prefers-reduced-motion:reduce){
  .popup-card{transform:none;transition:none}
}

/* ============================ VISIT ============================ */
.visit{background:linear-gradient(180deg,var(--ink),var(--ink-2))}
.visit-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(2.5rem,5vw,4rem);align-items:start}
@media (max-width:980px){.visit-grid{grid-template-columns:1fr}}

.info-block{margin-bottom:2.5rem}
.info-block h4{
  font-family:var(--sans);font-size:.68rem;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--brass);margin-bottom:1rem;
}
.info-block p{margin:0;color:var(--cream-dim)}
.info-block a:hover{color:var(--brass-bright)}
.addr{font-family:var(--display);font-size:clamp(1.15rem,2.6vw,1.4rem);color:var(--cream);line-height:1.4}
.contact-line{display:flex;align-items:center;gap:.75rem;padding:.55rem 0;color:var(--cream-dim);transition:color .3s}
.contact-line:hover{color:var(--brass-bright)}
.contact-line svg{color:var(--brass);flex-shrink:0}

.hours-table{width:100%;border-collapse:collapse}
.hours-table tr{border-bottom:1px solid var(--line-soft);transition:background .3s}
.hours-table tr:last-child{border-bottom:none}
.hours-table td{padding:.7rem .25rem;font-size:.92rem}
.hours-table td:first-child{color:var(--cream-dim);font-weight:500}
.hours-table td:last-child{text-align:right;color:var(--cream);font-variant-numeric:tabular-nums}
.hours-table tr.today{background:rgba(201,161,90,.08)}
.hours-table tr.today td{color:var(--cream);font-weight:700}
.hours-table tr.today td:first-child::before{
  content:"";display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--brass);margin-right:.6rem;vertical-align:middle;
}
.hours-table tr.shut td:last-child{color:var(--muted);font-style:italic;font-weight:500}
.hours-note{
  margin-top:1rem;font-size:.78rem;color:var(--muted);line-height:1.6;
  padding-left:1rem;border-left:1px solid var(--line-soft);
}

/* compact homepage hours line - full table now lives on /hours */
.hours-summary{display:flex;flex-wrap:wrap;align-items:center;gap:.1rem .55rem;margin:0}
.hours-summary span{color:var(--cream-dim);font-size:.95rem;font-variant-numeric:tabular-nums}
.hours-summary i{color:var(--brass);font-style:normal;opacity:.6}
.info-link{margin:.9rem 0 0}
.info-link a{
  color:var(--brass);font-size:.85rem;transition:color .3s var(--ease);
}
.info-link a:hover{color:var(--brass-bright)}
.contact-actions{display:flex;flex-direction:column;gap:.7rem;margin-top:1.5rem}
.contact-actions .btn{width:100%}

.map-frame{
  position:relative;width:100%;aspect-ratio:16/10;border-radius:3px;overflow:hidden;
  border:1px solid var(--line-soft);background:var(--surface);margin-bottom:1.25rem;
}
.map-frame iframe{width:100%;height:100%;border:0;filter:grayscale(.35) contrast(1.05) brightness(.92)}
.map-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:2.5rem}

/* ============================ FORM ============================ */
.form-card{
  background:var(--surface);border:1px solid var(--line-soft);border-radius:3px;
  padding:clamp(1.75rem,4vw,2.75rem);
}
.form-card h3{font-size:clamp(1.35rem,3.2vw,1.75rem);margin-bottom:.6rem}
.form-card > p{color:var(--muted);font-size:.9rem;margin:0 0 2rem}
.f-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
@media (max-width:640px){.f-grid{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:.45rem}
.field.full{grid-column:1/-1}
.field label{font-size:.65rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.field label .req{color:var(--wine-bright);margin-left:.2rem}
.field input,.field select,.field textarea{
  width:100%;padding:.85rem 1rem;background:rgba(16,14,12,.6);
  border:1px solid var(--line-soft);border-radius:2px;color:var(--cream);
  font-family:var(--sans);font-size:.92rem;
  transition:border-color .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease);
}
.field textarea{resize:vertical;min-height:120px}
.field select{appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%239C9080' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.5rem}
.field select option{background:var(--ink-2);color:var(--cream)}
.field input::placeholder,.field textarea::placeholder{color:#6E6558}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--brass);background:rgba(16,14,12,.85);
  box-shadow:0 0 0 3px rgba(201,161,90,.12);
}
.field .err{font-size:.72rem;color:#D98A8A;min-height:1em;opacity:0;transition:opacity .25s}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:#A85454}
.field.invalid .err{opacity:1}
.form-actions{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;margin-top:1.75rem}
.form-msg{font-size:.85rem;line-height:1.5;flex:1;min-width:200px}
.form-msg.ok{color:#7FCF9B}
.form-msg.bad{color:#D98A8A}
.hp{position:absolute!important;left:-9999px!important;opacity:0;height:0;width:0;pointer-events:none}

/* ============================ FOOTER ============================ */
/* Decluttered: brand + contact + social. The nav links moved fully to the
   top navigation, so the footer no longer repeats them. */
.footer{background:var(--ink);border-top:1px solid var(--line-soft);padding-block:clamp(3rem,6vw,4.25rem) 2rem}
.foot-simple{
  display:flex;flex-wrap:wrap;gap:2rem 3rem;align-items:flex-start;
  justify-content:space-between;margin-bottom:2.75rem;
}
.foot-brand{max-width:42ch}
.foot-brand .brand-name{font-size:1.75rem}
.foot-brand p{color:var(--muted);font-size:.88rem;margin:1.15rem 0 0}
.foot-contact{display:flex;flex-direction:column;gap:.55rem;font-size:.9rem}
.foot-contact .foot-h{
  font-family:var(--sans);font-size:.65rem;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--brass);margin:0 0 .35rem;
}
.foot-contact a{color:var(--cream-dim);transition:color .3s var(--ease)}
.foot-contact a:hover{color:var(--brass-bright)}
.foot-contact .addr{color:var(--cream-dim);font-style:normal;line-height:1.5}

/* mailing-list sign-up */
.foot-signup{max-width:320px}
.foot-signup-note{color:var(--muted);font-size:.83rem;line-height:1.6;margin:0 0 .9rem}
.signup-row{display:flex;gap:.5rem}
.signup-row input{
  flex:1;min-width:0;padding:.7rem .85rem;background:rgba(16,14,12,.6);
  border:1px solid var(--line-soft);border-radius:2px;color:var(--cream);
  font-family:var(--sans);font-size:.88rem;
  transition:border-color .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease);
}
.signup-row input::placeholder{color:#6E6558}
.signup-row input:focus{
  outline:none;border-color:var(--brass);background:rgba(16,14,12,.85);
  box-shadow:0 0 0 3px rgba(201,161,90,.12);
}
.signup-row .btn{flex-shrink:0;padding:.7rem 1.15rem}
.foot-signup .form-msg{font-size:.8rem;margin:.6rem 0 0}
@media (max-width:420px){.signup-row{flex-direction:column}.signup-row .btn{width:100%}}

/* rewards block (gift card page) */
.rewards{
  max-width:760px;margin:3rem auto 0;padding:clamp(1.75rem,4vw,2.5rem);
  border:1px solid rgba(201,161,90,.28);border-radius:3px;
  background:linear-gradient(160deg,rgba(201,161,90,.09),var(--surface));
}
.rewards h2{font-size:clamp(1.35rem,3.2vw,1.75rem);color:var(--cream);margin-bottom:.6rem}
.rewards > p{color:var(--cream-dim);font-size:.95rem;line-height:1.7;margin:0 0 1.5rem;max-width:62ch}
.rewards-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-bottom:1.75rem}
@media (max-width:640px){.rewards-steps{grid-template-columns:1fr;gap:1rem}}
.rewards-steps div b{
  display:block;font-family:var(--display);font-size:.75rem;color:var(--brass);
  letter-spacing:.18em;text-transform:uppercase;margin-bottom:.4rem;
}
.rewards-steps div span{color:var(--cream-dim);font-size:.9rem;line-height:1.55}

/* corporate gifting: holiday cards */
.holiday-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem}
@media (max-width:760px){.holiday-grid{grid-template-columns:1fr}}
.holiday-card{
  padding:clamp(1.5rem,3.5vw,2rem);background:var(--surface);
  border:1px solid var(--line-soft);border-radius:3px;
  transition:transform .4s var(--ease),border-color .4s var(--ease),background .4s var(--ease);
}
.holiday-card:hover{transform:translateY(-4px);border-color:var(--line);background:var(--surface-2)}
.holiday-when{
  font-size:.62rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--brass);display:block;margin-bottom:.5rem;
}
.holiday-card h3{font-size:clamp(1.15rem,2.6vw,1.4rem);color:var(--cream);margin-bottom:.55rem}
.holiday-card p{color:var(--muted);font-size:.92rem;line-height:1.65;margin:0}
.holiday-card p strong{color:var(--cream-dim);font-weight:600}

.socials{display:flex;gap:.75rem;margin-top:1.75rem}
.socials a{
  width:42px;height:42px;border-radius:50%;border:1px solid var(--line);
  display:grid;place-items:center;color:var(--cream-dim);
  transition:all .4s var(--ease);
}
.socials a:hover{background:var(--brass);border-color:var(--brass);color:#191308;transform:translateY(-3px)}

.foot-bar{
  border-top:1px solid var(--line-soft);padding-top:2rem;
  display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;justify-content:space-between;
  font-size:.76rem;color:var(--muted);
}
.foot-bar .kosher{display:inline-flex;align-items:center;gap:.6rem}

.to-top{
  position:fixed;right:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);z-index:90;
  width:46px;height:46px;border-radius:50%;
  background:var(--brass);color:#191308;display:grid;place-items:center;
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:all .4s var(--ease);box-shadow:0 12px 30px -12px rgba(201,161,90,.7);
}
.to-top.on{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--brass-bright);transform:translateY(-3px)}

/* ============================ LANGUAGE SWITCHER ============================ */
.lang-switch{
  display:inline-flex;align-items:center;gap:1px;
  border:1px solid var(--line-soft);border-radius:999px;padding:2px;
}
.lang-opt{
  font-family:var(--sans);font-size:.62rem;font-weight:700;letter-spacing:.06em;
  color:var(--cream-dim);background:transparent;border:0;cursor:pointer;
  padding:.34rem .5rem;border-radius:999px;line-height:1;
  transition:color .3s var(--ease),background .3s var(--ease);
}
.lang-opt[lang="he"]{letter-spacing:0;font-size:.72rem;font-weight:600}
.lang-opt:hover{color:var(--cream)}
.lang-opt.on{background:var(--brass);color:#191308}
/* On phones the collapsed header has room; keep the socials out of the way so
   the brand + language toggle + burger sit comfortably. */
@media (max-width:520px){
  .header-cta .hdr-social{display:none}
  .lang-opt{padding:.34rem .42rem}
}

/* ============================ RIGHT-TO-LEFT (HEBREW) ============================ */
[dir="rtl"] .lede,
[dir="rtl"] .about-body,
[dir="rtl"] .about-body p,
[dir="rtl"] .faq-item .faq-a,
[dir="rtl"] .policy-block,
[dir="rtl"] .policy-block p,
[dir="rtl"] .foot-brand p,
[dir="rtl"] .foot-signup-note,
[dir="rtl"] .foot-contact,
[dir="rtl"] .item-desc,
[dir="rtl"] .cat-sub,
[dir="rtl"] .cat-note,
[dir="rtl"] .panel-note,
[dir="rtl"] .season-banner p,
[dir="rtl"] .promo-banner p,
[dir="rtl"] .addons,
[dir="rtl"] .popup-body{ text-align:right }
[dir="rtl"] .faq-item .faq-a{ padding:0 0 1.5rem 3rem }
[dir="rtl"] .faq-item summary{ padding-right:0;padding-left:2.5rem }
/* keep the FAQ marker on the trailing (left) side in RTL */
[dir="rtl"] .faq-item summary::after{ right:auto;left:0 }
/* Playfair has no Hebrew glyphs; use the clean sans for Hebrew headings/labels
   rather than an inconsistent serif fallback. The English brand keeps its serif. */
html.lang-he h1,html.lang-he h2,html.lang-he h3,
html.lang-he .section-title,html.lang-he .popup-title,
html.lang-he .hero-title,html.lang-he .cat-head h3{ font-family:var(--sans);font-weight:700 }
html.lang-he .eyebrow,html.lang-he .nav a,html.lang-he .mobile-nav a,
html.lang-he .btn,html.lang-he .foot-h{ letter-spacing:.02em }