/* Self-hosted fonts. Previously loaded from Google's CDN, which blocked render
   for ~750ms: the stylesheet request chained to three font files at ~600ms each.
   Latin subset only, woff2 only, font-display:swap. */
@font-face{
  font-family:'Barlow Condensed';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('/assets/fonts/barlow-condensed-latin-600-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Barlow Condensed';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('/assets/fonts/barlow-condensed-latin-700-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Barlow Condensed';
  font-style:normal;
  font-weight:800;
  font-display:swap;
  src:url('/assets/fonts/barlow-condensed-latin-800-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'DM Sans';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/assets/fonts/dm-sans-latin-400-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'DM Sans';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('/assets/fonts/dm-sans-latin-600-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'DM Sans';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('/assets/fonts/dm-sans-latin-700-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ==========================================================================
   Whiskey Down — site styles
   Palette and type per WDD brand guide + approved style guide.
   ========================================================================== */

:root{
  /* Brand */
  --black:#1A1A1A;
  --gold:#CC9933;
  --gold-light:#E4C992;
  /* AA-safe gold for TEXT on a light background. --gold itself is only 2.47:1
     on --paper and 2.24:1 on --cream, both failing WCAG AA. This clears 4.5:1
     against BOTH light grounds — 4.74:1 on --cream (the body background, and
     the harder of the two) and 5.21:1 on --paper. Check any change against
     --cream, not --paper, or it will pass on cards and fail on the page.
     Use --gold for fills, borders and text on dark. */
  --gold-deep:#856518;
  --brown:#836038;
  --cream:#F5EFE3;
  --paper:#FFFAF0;

  /* Derived */
  --ink:#1A1A1A;
  --body:#3A362F;
  --muted:#6E6A63;
  --line:rgba(26,26,26,.14);
  --line-dark:rgba(228,201,146,.22);

  --display:"Barlow Condensed",Impact,"Haettenschweiler","Arial Narrow",sans-serif;
  --sans:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  --wrap:1240px;
  --gutter:clamp(1.25rem,4vw,3rem);
  --header-h:82px;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  overflow-x:clip;
  background:var(--cream);
  color:var(--body);
  font-family:var(--sans);
  font-size:1.0125rem;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block;height:auto}
picture{display:contents}
a{color:inherit}

h1,h2,h3,h4,.display{
  font-family:var(--display);
  font-weight:800;
  color:var(--ink);
  line-height:.94;
  letter-spacing:.005em;
  text-transform:uppercase;
  margin:0;
}

p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

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

.skip{
  position:absolute;left:.5rem;top:.5rem;z-index:200;
  background:var(--gold);color:var(--black);
  padding:.75rem 1.25rem;font-weight:700;text-decoration:none;
  clip-path:inset(50%);
}
.skip:focus{clip-path:none}

:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ---------- Eyebrow + section heads ---------- */

.eyebrow{
  font-family:var(--display);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.2em;
  font-size:.82rem;
  color:var(--brown);
  display:flex;align-items:center;gap:.7rem;
  margin:0 0 .85rem;
}
.eyebrow::after{content:"";flex:0 0 44px;height:2px;background:var(--gold)}
.eyebrow.center{justify-content:center}
.eyebrow.center::before{content:"";flex:0 0 44px;height:2px;background:var(--gold)}
.on-dark .eyebrow{color:var(--gold-light)}

.section{padding:clamp(3.75rem,8vw,6.5rem) 0}
.section-head{max-width:46rem;margin-bottom:2.75rem}
.section-head h2{font-size:clamp(2.4rem,5.4vw,3.9rem)}
.section-head p{margin-top:1rem;color:var(--muted);font-size:1.06rem}
.section-head.center{margin-inline:auto;text-align:center}

.on-dark{background:var(--black);color:rgba(255,255,255,.78)}
.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4{color:var(--paper)}
.on-dark .section-head p{color:rgba(255,255,255,.66)}

/* ---------- Buttons ---------- */

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;font-size:1rem;
  padding:.92rem 1.9rem;text-align:center;
  border:2px solid transparent;
  text-decoration:none;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
  cursor:pointer;
}
.btn-gold{background:var(--gold);color:var(--black);border-color:var(--gold)}
.btn-gold:hover{background:#b9862c;border-color:#b9862c}
.btn-ghost{border-color:rgba(255,255,255,.5);color:var(--paper)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
.btn-outline{border-color:var(--ink);color:var(--ink)}
.btn-outline:hover{background:var(--ink);color:var(--paper)}
.btn-sm{padding:.62rem 1.15rem;font-size:.9rem}

/* ---------- Header ---------- */

.header{
  position:sticky;top:0;z-index:100;
  background:var(--black);
  border-bottom:1px solid var(--line-dark);
}
.header-in{
  height:var(--header-h);
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
}
.brand{display:flex;align-items:center;gap:.8rem;text-decoration:none;flex:0 0 auto}
.brand img{width:52px;height:52px}
.brand-txt{display:flex;flex-direction:column;line-height:1}
.brand-txt strong{
  font-family:var(--display);font-weight:800;font-size:1.16rem;
  letter-spacing:.055em;color:var(--paper);text-transform:uppercase;
}
.brand-txt span{
  font-size:.66rem;letter-spacing:.19em;text-transform:uppercase;
  color:var(--gold);margin-top:.28rem;font-weight:600;
}

.nav{display:flex;align-items:center;gap:1.35rem}
.nav a{
  font-family:var(--display);font-weight:600;font-size:1.04rem;
  text-transform:uppercase;letter-spacing:.11em;
  color:rgba(255,255,255,.84);text-decoration:none;
  padding:.35rem 0;border-bottom:2px solid transparent;
  white-space:nowrap;
}
.nav a:hover{color:var(--gold)}
.nav a[aria-current="page"]{color:var(--gold);border-bottom-color:var(--gold)}
.nav .btn{white-space:nowrap}
.nav .btn-gold{color:var(--black)}
.nav .btn-gold:hover{color:var(--black)}

.nav-group{position:relative;display:flex;align-items:center;align-self:stretch}
.nav-parent{
  display:inline-flex;align-items:center;gap:.42rem;height:100%;
  background:none;border:0;cursor:pointer;
  font-family:var(--display);font-weight:600;font-size:1.04rem;
  text-transform:uppercase;letter-spacing:.11em;
  color:rgba(255,255,255,.84);
  padding:.35rem 0;border-bottom:2px solid transparent;
  white-space:nowrap;
}
.nav-parent:hover{color:var(--gold)}
.nav-parent.is-active{color:var(--gold);border-bottom-color:var(--gold)}
.nav-parent .chev{width:10px;height:6px;transition:transform .2s ease}
.nav-group.open .nav-parent .chev{transform:rotate(180deg)}

.subnav{
  display:none;position:absolute;top:100%;left:-1.2rem;
  min-width:14rem;background:#141414;
  border:1px solid var(--line-dark);
  padding:.4rem 0;z-index:120;
}
.nav-group:hover .subnav,
.nav-group:focus-within .subnav,
.nav-group.open .subnav{display:block}
.subnav a{
  display:block;padding:.72rem 1.2rem;
  font-family:var(--display);font-weight:600;font-size:1rem;
  text-transform:uppercase;letter-spacing:.09em;
  color:rgba(255,255,255,.84);text-decoration:none;border-bottom:0;
}
.subnav a:hover{background:rgba(204,153,51,.14);color:var(--gold)}
.subnav a[aria-current="page"]{color:var(--gold);border-bottom:0}

.nav-toggle{
  display:none;background:none;border:0;padding:.5rem;cursor:pointer;
}
.nav-toggle span{
  display:block;width:26px;height:2px;background:var(--paper);margin:5px 0;
  transition:transform .2s ease,opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- Announcement ---------- */

.announce{
  background:var(--brown);color:#F7EEDF;
  font-size:.9rem;text-align:center;padding:.6rem 1rem;
  letter-spacing:.02em;
}
.announce a{color:var(--paper);font-weight:600}

/* ---------- Hero ---------- */

.hero{position:relative;background:var(--black);color:var(--paper);overflow:hidden}
.hero-media{position:absolute;inset:0}
.hero-media img{width:100%;height:100%;object-fit:cover;opacity:.42}
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(26,26,26,.94) 0%,rgba(26,26,26,.74) 46%,rgba(26,26,26,.35) 100%);
}
.hero-in{position:relative;z-index:2;padding:clamp(4.5rem,12vw,8.5rem) 0}
.hero-copy{max-width:40rem}
.hero h1{
  font-size:clamp(3.1rem,9vw,6.4rem);
  color:var(--paper);
  margin-bottom:1.35rem;
}
.hero h1 em{font-style:normal;color:var(--gold);display:block}
.hero-lede{font-size:clamp(1.06rem,2.2vw,1.22rem);color:rgba(255,255,255,.84);max-width:34rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.2rem}

.hero-stamp{
  position:absolute;right:clamp(1rem,5vw,4.5rem);bottom:clamp(1rem,5vw,3.5rem);
  z-index:3;width:clamp(120px,15vw,190px);opacity:.95;
}

/* ---------- Quick strip ---------- */

.quick{background:var(--paper);border-bottom:1px solid var(--line)}
.quick-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.quick-grid a{
  display:flex;flex-direction:column;gap:.35rem;
  padding:1.9rem 1.4rem;text-decoration:none;
  border-right:1px solid var(--line);
  transition:background .18s ease;
}
.quick-grid a:last-child{border-right:0}
.quick-grid a:hover{background:var(--cream)}
.quick-grid strong{
  font-family:var(--display);font-weight:700;font-size:1.35rem;
  text-transform:uppercase;letter-spacing:.04em;color:var(--ink);
}
.quick-grid span{font-size:.9rem;color:var(--muted)}

/* ---------- Food grid ---------- */

.food-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:minmax(196px,auto);
  gap:1.1rem;
}
.food-card{
  position:relative;overflow:hidden;
  background:var(--black);text-decoration:none;
  display:flex;align-items:flex-end;
  min-height:196px;
}
.food-card img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .5s ease;opacity:.78;
}
.food-card:hover img{transform:scale(1.05)}
.food-card::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(26,26,26,.9) 0%,rgba(26,26,26,.18) 62%);
}
.food-card-txt{position:relative;z-index:2;padding:1.4rem 1.5rem}
.food-card h3{color:var(--paper);font-size:1.8rem;letter-spacing:.02em}
.food-card p{color:rgba(255,255,255,.74);font-size:.9rem;margin:.35rem 0 0}
.fc-tall{grid-row:span 2}
.fc-wide{grid-column:span 2}

/* ---------- Locations ---------- */

.loc-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem}
.loc-card{
  background:#141414;border:1px solid var(--line-dark);
  display:flex;flex-direction:column;overflow:hidden;
}
.loc-photo{aspect-ratio:16/10;overflow:hidden;background:#0f0f0f}
.loc-photo img{width:100%;height:100%;object-fit:cover}
.loc-body{padding:2rem clamp(1.4rem,3vw,2.2rem) 2.2rem;flex:1;display:flex;flex-direction:column}
.loc-body h3{font-size:2.35rem;color:var(--paper);margin-bottom:.2rem}
.loc-status{
  display:inline-flex;align-items:center;gap:.45rem;align-self:flex-start;
  font-family:var(--display);font-weight:700;font-size:.78rem;
  text-transform:uppercase;letter-spacing:.16em;
  padding:.3rem .7rem;margin-bottom:1rem;
}
.loc-status.open{background:var(--gold);color:var(--black)}
.loc-status.soon{background:transparent;color:var(--gold-light);border:1px solid var(--line-dark)}
.loc-meta{color:rgba(255,255,255,.74);font-size:.98rem;margin-bottom:1.5rem}
.loc-meta a{color:var(--gold-light)}
.loc-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:auto}

/* Location cards on a light section */
.section:not(.on-dark) .loc-card{background:var(--paper);border-color:var(--line)}
.section:not(.on-dark) .loc-card h3{color:var(--ink)}
.section:not(.on-dark) .loc-photo{background:var(--cream)}
.section:not(.on-dark) .loc-status.soon{border-color:var(--line);color:var(--brown)}
.section:not(.on-dark) .loc-meta{color:var(--muted)}
.section:not(.on-dark) .loc-meta a{color:var(--brown)}

/* ---------- Story ---------- */

.story{position:relative;background:var(--paper);overflow:hidden}
.story-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.story h2{font-size:clamp(2.5rem,5.6vw,4.1rem);margin-bottom:1.3rem}
.story-quote{
  border-left:3px solid var(--gold);
  padding:.2rem 0 .2rem 1.4rem;margin:1.7rem 0;
  font-size:1.12rem;font-style:italic;color:var(--ink);
}
.story-photo{position:relative}
.story-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 38%}

/* ---------- Reviews marquee ---------- */

.marquee{
  position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
}
.marquee-track{
  display:flex;width:max-content;
  /* --marquee-shift and --marquee-duration are set by site.js from the measured
     group width, so the loop is seamless and the speed is constant no matter how
     many reviews there are. Tune speed via marqueePxPerSecond in site.json. */
  animation:marquee var(--marquee-duration,120s) linear infinite;
}
.marquee-group{display:flex;flex-shrink:0;gap:1.4rem;padding-right:1.4rem}
@keyframes marquee{
  from{transform:translateX(0)}
  to{transform:translateX(calc(-1 * var(--marquee-shift,50%)))}
}

.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track,
.marquee.is-paused .marquee-track{animation-play-state:paused}

.rev{
  flex:0 0 clamp(266px,74vw,364px);
  position:relative;
  background:var(--paper);
  border:1px solid rgba(228,201,146,.2);
  border-top:3px solid var(--gold);
  padding:2.4rem 1.75rem 1.75rem;
  display:flex;flex-direction:column;
}
.rev::before{
  content:"\201C";
  position:absolute;top:1.1rem;right:1.3rem;
  font-family:Georgia,"Times New Roman",serif;font-weight:700;
  font-size:4.6rem;line-height:1;color:rgba(204,153,51,.26);
  pointer-events:none;
}
.stars{color:var(--gold-deep);letter-spacing:.2em;font-size:.95rem;margin-bottom:1rem}
.rev p{font-size:1rem;color:var(--body);position:relative;z-index:1}
.rev cite{
  margin-top:1.4rem;padding-top:1rem;
  border-top:1px solid var(--line);
  font-style:normal;
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.11em;font-size:.86rem;color:var(--brown);
}
.rev .src{
  display:block;margin-top:.2rem;
  font-family:var(--sans);font-weight:400;text-transform:none;
  letter-spacing:0;font-size:.8rem;color:var(--muted);
}

.marquee-controls{
  display:flex;align-items:center;justify-content:center;gap:1rem;
  margin-top:2.2rem;
}
.marquee-toggle{
  display:inline-flex;align-items:center;gap:.55rem;
  background:none;cursor:pointer;
  border:1px solid rgba(228,201,146,.34);
  color:var(--gold-light);
  font-family:var(--display);font-weight:700;
  text-transform:uppercase;letter-spacing:.11em;font-size:.86rem;
  padding:.6rem 1.1rem;
}
.marquee-toggle:hover{border-color:var(--gold);color:var(--gold)}
.marquee-toggle svg{width:13px;height:13px;fill:currentColor}
.marquee-toggle .ico-play{display:none}
.marquee-toggle[aria-pressed="true"] .ico-play{display:block}
.marquee-toggle[aria-pressed="true"] .ico-pause{display:none}

@media (max-width:400px){
  .brand{gap:.55rem}
  .brand img{width:38px;height:38px}
  .brand-txt strong{font-size:.94rem;letter-spacing:.02em}
}

@media (prefers-reduced-motion:reduce){
  .marquee{overflow-x:auto}
  .marquee-track{animation:none}
  .marquee-controls{display:none}
}

/* ---------- Menu pages ---------- */

.menu-note{
  background:var(--paper);border:1px solid var(--line);
  border-left:3px solid var(--gold);
  padding:1.2rem 1.4rem;font-size:.95rem;color:var(--muted);
  margin-bottom:2.6rem;
}
.menu-section{margin-bottom:3.6rem}
.menu-section > h2{
  font-size:2.1rem;padding-bottom:.7rem;margin-bottom:1.5rem;
  border-bottom:2px solid var(--gold);
}
.menu-section > h2 small{
  display:block;font-family:var(--sans);font-size:.88rem;
  font-weight:400;text-transform:none;letter-spacing:0;
  color:var(--muted);margin-top:.5rem;line-height:1.5;
}
.menu-items{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem 3rem}
.menu-item{display:flex;flex-direction:column}
.menu-item-top{display:flex;align-items:baseline;gap:.7rem}
.menu-item-top h3{font-size:1.28rem;letter-spacing:.02em;flex:0 1 auto}
.menu-dots{flex:1 1 auto;border-bottom:1px dotted var(--line);transform:translateY(-4px)}
.menu-price{
  font-family:var(--display);font-weight:700;font-size:1.22rem;color:var(--brown);
  flex:0 0 auto;
}
.menu-item p{font-size:.94rem;color:var(--muted);margin:.3rem 0 0;max-width:34rem}

/* Menu sections on a dark background need lifted text colors (WCAG AA) */
.on-dark .menu-section > h2{border-bottom-color:var(--gold)}
.on-dark .menu-section > h2 small{color:rgba(255,255,255,.72)}
.on-dark .menu-item p{color:rgba(255,255,255,.72)}
.on-dark .menu-price{color:var(--gold-light)}
.on-dark .menu-dots{border-bottom-color:rgba(255,255,255,.22)}

/* ---------- In-page menu navigation ---------- */
.menu-jump{
  display:flex;flex-wrap:wrap;gap:.5rem;
  margin:0 0 2.8rem;padding-bottom:1.6rem;
  border-bottom:1px solid var(--line);
}
.menu-jump a{
  font-family:var(--display);font-weight:700;
  text-transform:uppercase;letter-spacing:.09em;font-size:.84rem;
  color:var(--ink);text-decoration:none;
  border:1px solid var(--line);
  padding:.5rem .85rem;
  transition:background .16s ease,border-color .16s ease,color .16s ease;
}
.menu-jump a:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.on-dark .menu-jump{border-bottom-color:var(--line-dark)}
.on-dark .menu-jump a{color:var(--paper);border-color:var(--line-dark)}
.on-dark .menu-jump a:hover{background:var(--gold);border-color:var(--gold);color:var(--black)}

/* anchored sections must clear the sticky header */
.menu-section{scroll-margin-top:calc(var(--header-h) + 1.5rem)}

/* ---------- Page hero (interior) ---------- */

.page-hero{background:var(--black);color:var(--paper);padding:clamp(3rem,7vw,5rem) 0 clamp(2.6rem,6vw,4rem)}
.page-hero h1{font-size:clamp(2.1rem,7vw,5rem);color:var(--paper);overflow-wrap:break-word}
.page-hero p{margin-top:1.1rem;color:rgba(255,255,255,.74);max-width:38rem;font-size:1.08rem}

.crumbs{font-size:.83rem;letter-spacing:.06em;color:rgba(255,255,255,.5);margin-bottom:1.1rem}
.crumbs{line-height:1.9}
.crumbs a{color:var(--gold-light);text-decoration:none;display:inline-block;padding-block:.22rem}
.crumbs a:hover{text-decoration:underline}

/* ---------- Info blocks (location/contact) ---------- */

.info-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,4rem)}
.info-grid > *{min-width:0}
.info-grid img{width:100%}
.info-list{list-style:none;margin:0;padding:0}
.info-list li{
  display:grid;grid-template-columns:8.5rem 1fr;gap:1rem;
  padding:.95rem 0;border-bottom:1px solid var(--line);
}
.info-list dt,.info-list .k{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.11em;font-size:.86rem;color:var(--brown);
}
.info-list a{color:var(--ink)}

.hours-table{width:100%;border-collapse:collapse}
.hours-table th,.hours-table td{
  text-align:left;padding:.62rem 0;border-bottom:1px solid var(--line);
  font-size:.98rem;
}
.hours-table th{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.09em;font-size:.9rem;color:var(--ink);width:9rem;
}

.cta-band{background:var(--gold);color:var(--black);text-align:center;padding:clamp(3rem,7vw,4.75rem) 0}
.cta-band h2{font-size:clamp(2.2rem,5.4vw,3.6rem);color:var(--black)}
.cta-band p{margin:1rem auto 0;max-width:36rem;color:rgba(26,26,26,.78)}
.cta-band .hero-cta{justify-content:center}
.cta-band .btn-outline{border-color:var(--black)}
.cta-band .btn-outline:hover{background:var(--black);color:var(--gold)}

/* ---------- Gallery (CSS-column masonry) ---------- */
.gal{columns:4;column-gap:1rem}
.gal-item{
  break-inside:avoid;margin:0 0 1rem;padding:0;
  display:block;width:100%;position:relative;
  border:0;background:none;cursor:zoom-in;
  overflow:hidden;line-height:0;
}
.gal-item img{
  width:100%;height:auto;display:block;
  transition:transform .5s ease,filter .3s ease;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
  pointer-events:none;
}
/* transparent shield: blocks long-press save and right-click on the image itself */
.gal-item::after{content:"";position:absolute;inset:0;background:transparent}
.gal-item:hover img{transform:scale(1.04);filter:brightness(1.06)}
.gal-item:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

.gal-group{margin-bottom:3.4rem}
.gal-group > h2{
  font-size:clamp(1.6rem,3.4vw,2.2rem);
  padding-bottom:.7rem;margin-bottom:1.5rem;
  border-bottom:2px solid var(--gold);
}

/* ---------- Lightbox ---------- */
.lb[hidden]{display:none}
.lb{
  position:fixed;inset:0;z-index:300;
  background:rgba(10,10,10,.975);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;
  padding:clamp(1rem,4vw,3rem);
}
.lb-fig{margin:0;max-width:100%;max-height:100%;display:flex;
  flex-direction:column;align-items:center;gap:.9rem}
.lb-fig img{
  max-width:100%;max-height:78vh;width:auto;height:auto;display:block;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
  pointer-events:none;
}
.lb-cap{
  color:rgba(255,255,255,.78);font-size:.94rem;text-align:center;
  max-width:44rem;
}
.lb-count{
  font-family:var(--display);font-weight:700;letter-spacing:.14em;
  font-size:.8rem;color:var(--gold);text-transform:uppercase;
}
.lb-btn{
  position:absolute;background:rgba(26,26,26,.72);
  border:1px solid rgba(228,201,146,.34);color:var(--paper);
  width:52px;height:52px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.lb-btn:hover{border-color:var(--gold);color:var(--gold)}
.lb-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.lb-close{top:clamp(.8rem,2.5vw,1.6rem);right:clamp(.8rem,2.5vw,1.6rem)}
.lb-prev{left:clamp(.5rem,2vw,1.6rem);top:50%;transform:translateY(-50%)}
.lb-next{right:clamp(.5rem,2vw,1.6rem);top:50%;transform:translateY(-50%)}
body.lb-open{overflow:hidden}

/* Between the hamburger breakpoint and roughly 1320px the full nav is tight.
   Dropping the brand sub-label buys back the ~190px it needs. */
@media (max-width:1320px){
  .brand-txt span{display:none}
  .brand img{width:46px;height:46px}
  .nav{gap:1.1rem}
}

@media (max-width:1240px){ .gal{columns:3} }
@media (max-width:760px){  .gal{columns:2} }
@media (max-width:430px){  .gal{columns:1}
  .lb-prev,.lb-next{top:auto;bottom:1rem;transform:none}
}

.listing-links a{color:var(--gold-light)}

/* ---------- Legal pages ---------- */
.legal{max-width:48rem}
.legal h2{
  font-size:clamp(1.5rem,3.2vw,2rem);
  margin:2.6rem 0 .85rem;padding-top:1.6rem;
  border-top:1px solid var(--line);
}
.legal h2:first-of-type{border-top:0;padding-top:0;margin-top:1.4rem}
.legal h3{font-size:1.18rem;margin:1.7rem 0 .5rem;letter-spacing:.03em}
.legal ul{padding-left:1.15rem;margin:0 0 1.1em}
.legal li{margin-bottom:.5rem}
.legal .updated{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;font-size:.84rem;color:var(--brown);
  padding-bottom:1.4rem;border-bottom:1px solid var(--line);
}
.legal table{width:100%;border-collapse:collapse;margin:1rem 0 1.6rem}
.legal th,.legal td{
  text-align:left;vertical-align:top;padding:.7rem .8rem .7rem 0;
  border-bottom:1px solid var(--line);font-size:.95rem;
}
.legal th{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;font-size:.85rem;color:var(--ink);
}

/* ---------- Footer ---------- */

.footer{background:var(--black);color:rgba(255,255,255,.66);padding:clamp(3rem,6vw,4.5rem) 0 2rem}
.footer h2{
  font-size:1.02rem;letter-spacing:.14em;color:var(--gold);margin-bottom:1.05rem;
}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2.4rem}
.footer a{color:rgba(255,255,255,.72);text-decoration:none}
.footer a:hover{color:var(--gold)}
.footer ul{list-style:none;margin:0;padding:0}
.footer li{margin-bottom:.55rem;font-size:.95rem}
.footer-brand img{width:88px;margin-bottom:1.1rem}
.footer-brand p{font-size:.93rem;max-width:22rem}
.social{display:flex;gap:.8rem;margin-top:1.2rem}
.social a{
  width:40px;height:40px;border:1px solid var(--line-dark);
  display:flex;align-items:center;justify-content:center;
}
.social a:hover{border-color:var(--gold)}
.social svg{width:19px;height:19px;fill:currentColor}
.colophon{
  margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--line-dark);
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;
  font-size:.85rem;color:rgba(255,255,255,.62);
}
.colophon ul{display:flex;gap:1.4rem}
.colophon li{margin:0}

/* ---------- Map embed ---------- */
.map-embed{
  position:relative;width:100%;aspect-ratio:5/2;
  border:1px solid var(--line);background:var(--paper);
  overflow:hidden;
}
.map-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.map-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.1rem}
.on-dark .map-embed{border-color:var(--line-dark)}

@media (max-width:900px){
  .map-embed{aspect-ratio:4/3}
}

/* ---------- Elfsight embeds ---------- */
/* Elfsight renders into the page DOM with no shadow root or iframe, so
   site-wide rules bleed into it. Neutralise them inside any embed. */
.elf-embed{margin-inline:auto}
.reviews-embed{max-width:1140px;min-height:460px}
.ig-embed{max-width:1240px;min-height:380px}

.elf-embed h1,.elf-embed h2,
.elf-embed h3,.elf-embed h4{
  font-family:var(--sans);font-weight:600;color:inherit;
  text-transform:none;letter-spacing:normal;line-height:1.4;
}
.elf-embed img{display:inline-block;max-width:none}
.elf-embed a{color:var(--brown)}
.elf-embed p{margin:0}

/* On dark sections the inherited link color needs lifting */
.on-dark .elf-embed a{color:var(--gold-light)}

.reviews-fallback{
  text-align:center;color:var(--muted);font-size:.95rem;
  padding:2rem 1rem;
}

/* Target size (WCAG 2.2 SC 2.5.8) — standalone links need 24px of height.
   Links inline within a sentence are exempt and left alone. */
.footer ul a,
.colophon ul a{display:inline-block;padding-block:.28rem}
.loc-meta a{display:inline-block;padding-block:.22rem}
.info-list a{display:inline-block;padding-block:.2rem}

/* ---------- Utilities ---------- */
.mt-1{margin-top:1.2rem}
.mt-2{margin-top:2rem}
.mt-3{margin-top:2.8rem}
.pt-0{padding-top:0}
.center{text-align:center}
.narrow{max-width:52rem}
.narrower{max-width:44rem}
.readable{max-width:56rem}
.h2-sm{font-size:clamp(1.9rem,4vw,2.7rem);margin-bottom:1.2rem}
.h2-md{font-size:clamp(2rem,4.4vw,3rem);margin-bottom:1.3rem}
.h2-lg{font-size:clamp(2.2rem,5vw,3.4rem);margin-bottom:1.4rem}
.note{font-size:.94rem;color:var(--muted)}
.on-dark .note{color:rgba(255,255,255,.66)}

/* ---------- Responsive ---------- */

@media (max-width:1240px){
  /* Below the 4-column layout every card goes full width at a uniform height.
     The spans must be reset, not just the column count: leaving fc-tall/fc-wide
     spanning inside a narrower grid is what made the cards alternate half and
     full width at different heights. If this changes, re-measure the `sizes`
     on the .food-card images in index.html — they assume 92vw here. */
  .food-grid{grid-template-columns:1fr}
  .fc-wide,.fc-tall{grid-column:auto;grid-row:auto}
  .footer-grid{grid-template-columns:1fr 1fr}
}

@media (max-width:1240px){
  .nav-toggle{display:block}
  .nav{
    position:absolute;top:100%;left:0;right:0;
    background:var(--black);flex-direction:column;align-items:stretch;
    gap:0;padding:.5rem 0 1.4rem;
    border-bottom:1px solid var(--line-dark);
    display:none;
  }
  .nav.open{display:flex}
  .nav a{padding:1rem var(--gutter);border-bottom:1px solid rgba(255,255,255,.07)}
  .nav a[aria-current="page"]{border-bottom-color:rgba(255,255,255,.07)}
  .nav-group{display:block;position:static}
  .nav-parent{
    width:100%;height:auto;justify-content:space-between;
    padding:1rem var(--gutter);
    border-bottom:1px solid rgba(255,255,255,.07);
  }
  .nav-parent.is-active{border-bottom-color:rgba(255,255,255,.07)}
  .subnav{
    position:static;border:0;min-width:0;padding:0;
    background:rgba(255,255,255,.04);
  }
  .nav-group:hover .subnav,
  .nav-group:focus-within .subnav{display:none}
  .nav-group.open .subnav{display:block}
  .subnav a{padding:.9rem var(--gutter) .9rem calc(var(--gutter) + 1.1rem)}
  .nav .btn{margin:1rem var(--gutter) 0}
  .quick-grid{grid-template-columns:1fr 1fr}
  .quick-grid a:nth-child(2){border-right:0}
  .quick-grid a:nth-child(1),.quick-grid a:nth-child(2){border-bottom:1px solid var(--line)}
  .loc-grid{grid-template-columns:1fr}
  .story-grid{grid-template-columns:1fr}
  .story-photo{order:-1;max-width:26rem}
  .info-grid{grid-template-columns:1fr}
  .menu-items{grid-template-columns:1fr}
}

@media (max-width:600px){
  .hero-stamp{display:none}
  .eyebrow{flex-wrap:wrap;overflow-wrap:anywhere}
  h1,h2,h3{overflow-wrap:break-word}
  .eyebrow::before,.eyebrow::after{flex:0 1 26px}
  .quick-grid strong{overflow-wrap:anywhere}
  .brand-txt span{display:none}
  .brand img{width:44px;height:44px}
  .brand-txt strong{font-size:1.04rem;letter-spacing:.04em}
  /* .food-grid is already single-column from the 1240px breakpoint down */
  .footer-grid{grid-template-columns:1fr}
  .colophon{flex-direction:column}
  .colophon ul{flex-wrap:wrap;gap:1rem}
  .info-list li{grid-template-columns:1fr;gap:.2rem}
  .hero-cta .btn{width:100%}
}

@media (max-width:400px){
  .brand{gap:.55rem}
  .brand img{width:38px;height:38px}
  .brand-txt strong{font-size:.94rem;letter-spacing:.02em}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ---------- Mailchimp signup ---------- */
/* Mailchimp's own stylesheet is switched off in the form's embed settings;
   everything below hangs off their documented hooks (#mc-embedded-subscribe-form,
   .mc-field-group, .asterisk, #mce-responses) plus a few classes of our own.
   Works on cream and inside .on-dark — no separate markup for the two. */

.signup{max-width:44rem}
.signup-title{font-size:clamp(1.6rem,3vw,2.2rem);margin-bottom:.6rem}
.signup-lede{color:var(--muted);margin-bottom:1.4rem}
.on-dark .signup-lede{color:rgba(255,255,255,.66)}

.signup-required{
  font-size:.8rem;color:var(--muted);margin:0 0 1rem;
}
.on-dark .signup-required{color:rgba(255,255,255,.6)}
/* --gold fails AA on cream, so gold text on light uses --gold-deep */
.asterisk{color:var(--gold-deep)}
.on-dark .asterisk{color:var(--gold-light)}

/* auto-fit: one column in a narrow footer column, two in a wide page section */
.signup-fields{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));
  gap:1rem 1.1rem;
  margin-bottom:1.3rem;
}
.mc-field-group{display:flex;flex-direction:column;gap:.4rem;min-width:0}
.mc-field-group label{
  font-family:var(--display);font-weight:700;font-size:.82rem;
  text-transform:uppercase;letter-spacing:.1em;color:var(--ink);
}
.on-dark .mc-field-group label{color:var(--paper)}

.mc-field-group input{
  font-family:var(--sans);font-size:1rem;line-height:1.4;
  width:100%;padding:.72rem .85rem;
  color:var(--body);background:var(--paper);
  border:1px solid var(--line);border-radius:0;
  transition:border-color .18s ease,background .18s ease;
}
.mc-field-group input:hover{border-color:rgba(26,26,26,.28)}
.mc-field-group input:focus-visible{
  outline:3px solid var(--gold);outline-offset:2px;border-color:var(--gold);
}
/* :user-invalid, not :invalid — otherwise every required field is red on load */
.mc-field-group input:user-invalid{border-color:#B3261E;background:rgba(179,38,30,.04)}

.on-dark .mc-field-group input{
  color:var(--paper);background:rgba(255,255,255,.06);border-color:var(--line-dark);
}
.on-dark .mc-field-group input:hover{border-color:rgba(228,201,146,.42)}
.on-dark .mc-field-group input:focus-visible{border-color:var(--gold)}
.on-dark .mc-field-group input:user-invalid{border-color:#F2B8B5;background:rgba(242,184,181,.08)}

.signup-actions{margin-bottom:1.1rem}
.signup .btn{width:auto}

.signup-consent{font-size:.85rem;line-height:1.55;color:var(--muted);margin:0}
.signup-consent a{color:var(--gold-deep);text-underline-offset:.18em}
.on-dark .signup-consent{color:rgba(255,255,255,.66)}
.on-dark .signup-consent a{color:var(--gold-light)}

/* Bot trap — off-screen rather than display:none, which some bots skip */
.signup-hp{position:absolute;left:-5000px;width:1px;height:1px;overflow:hidden}

/* Populated only if Mailchimp's validation script is ever added; :empty keeps
   both boxes out of the layout until then, so no inline display:none needed */
.signup-responses{margin-bottom:1.1rem}
.signup-responses .response{
  padding:.75rem .95rem;font-size:.92rem;border-left:3px solid;margin-bottom:.6rem;
}
.signup-responses .response:empty{display:none}
#mce-error-response{border-color:#B3261E;background:rgba(179,38,30,.08);color:#8C1D18}
#mce-success-response{border-color:var(--gold-deep);background:rgba(138,106,31,.09);color:var(--gold-deep)}
.on-dark #mce-error-response{border-color:#F2B8B5;background:rgba(242,184,181,.1);color:#F2B8B5}
.on-dark #mce-success-response{border-color:var(--gold);background:rgba(204,153,51,.12);color:var(--gold-light)}

/* Signup in the footer: a band above the four columns, not a fifth column —
   four fields will not fit in a 1fr track. The .footer rules below it are
   more specific than the .signup ones, so the overrides here are deliberate. */
.signup-band{
  padding-bottom:2.6rem;margin-bottom:2.8rem;
  border-bottom:1px solid var(--line-dark);
  background:none;                       /* .on-dark paints black; footer already is */
}
.signup-band .signup{max-width:none}
.footer .signup-title{
  font-size:clamp(1.5rem,2.6vw,2rem);   /* beats .footer h2's 1.02rem */
  letter-spacing:.01em;color:var(--paper);margin-bottom:1rem;
}
.footer .signup-consent a{color:var(--gold-light);text-decoration:underline}
.footer .signup-consent a:hover{color:var(--gold)}
/* footer fields get more room than a page column, so allow four across */
.signup-band .signup-fields{grid-template-columns:repeat(auto-fit,minmax(12rem,1fr))}

@media (max-width:600px){
  .signup-band{padding-bottom:2rem;margin-bottom:2.2rem}
}

/* Babylon Village photo grid — same masonry as the Gallery, one column wider
   at each step so twelve photos of one room read bigger than eighty of
   everything. Declared after the .gal media queries so these win. */
.gal-babylon{columns:3}
@media (max-width:1240px){ .gal-babylon{columns:3} }
@media (max-width:760px){  .gal-babylon{columns:2} }
@media (max-width:430px){  .gal-babylon{columns:1} }

/* ---------- Video block ---------- */
/* Click-to-play only. No autoplay anywhere on this site, so there is no
   WCAG 2.2.2 pause control to add — the native controls are the control. */
.video-block{margin:0}
.video-block video{
  display:block;width:100%;height:auto;
  aspect-ratio:16/9;background:var(--black);
  border:1px solid var(--line);
}
.on-dark .video-block video{border-color:var(--line-dark)}
.video-block figcaption{
  margin-top:.7rem;font-size:.9rem;color:var(--muted);max-width:44rem;
}
.on-dark .video-block figcaption{color:rgba(255,255,255,.66)}