/* GreenHouse Restaurant — modernized site styles */

:root {
  --forest: #1f3d2e;
  --forest-dark: #142720;
  --forest-light: #2f5642;
  --cream: #faf6ee;
  --cream-dark: #f0e9d8;
  --clay: #c4633f;
  --clay-dark: #a94f2f;
  --gold: #c9a15a;
  --moss: #5f7148;
  --moss-dark: #475635;
  --moss-wash: #eef1e6;
  --charcoal: #23241f;
  --gray: #6b6a63;
  --white: #ffffff;

  --font-head: "Fraunces", Georgia, serif;
  --font-body: "Work Sans", -apple-system, BlinkMacSystemFont, sans-serif;

  --radius: 14px;
  --shadow: 0 10px 30px rgba(20, 39, 32, 0.12);
  --max: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* ---------------------------------------------------------------
   Utilities — keeps presentational rules out of the markup
   --------------------------------------------------------------- */
.center      { text-align: center; }
.mt-0        { margin-top: 0; }
.mt-sm       { margin-top: 16px; }
.mt-md       { margin-top: 28px; }
.mt-lg       { margin-top: 40px; }
.mt-xl       { margin-top: 56px; }
.mb-0        { margin-bottom: 0; }
.mb-md       { margin-bottom: 28px; }
.note        { font-size: 0.9rem; }
.fine-print  { font-size: 0.78rem; color: var(--gray); }
.measure     { max-width: 520px; margin-left: auto; margin-right: auto; }
.framed      { border-radius: var(--radius); box-shadow: var(--shadow); }

/* Horizontal button/link rows */
.btn-row       { display: flex; gap: 14px; flex-wrap: wrap; }
.btn-row.center{ justify-content: center; }

/* Inline text links inside body copy */
.link-inline { color: var(--forest); font-weight: 600; }
.link-moss   { color: var(--moss-dark); font-weight: 600; }
.link-moss.underline { text-decoration: underline; }

/* Third-party embeds (Instagram widget) */
.embed-frame { width: 100%; border: 0; overflow: hidden; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--charcoal);
  background: var(--cream);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 0.5em;
  color: var(--forest-dark);
}

h1 { font-size: clamp(2.4rem, 5vw, 4rem); }
h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); }
h3 { font-size: 1.3rem; }

p { margin: 0 0 1em; color: var(--gray); }

a { color: inherit; text-decoration: none; }
/* width/height attributes on <img> reserve space and stop layout shift;
   height:auto keeps them fluid when CSS scales them down */
img { max-width: 100%; height: auto; display: block; }

.container {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.78rem;
  color: var(--clay);
  margin-bottom: 0.75em;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }

.btn-primary {
  background: var(--clay);
  color: var(--white);
  box-shadow: 0 8px 20px rgba(196, 99, 63, 0.35);
}
.btn-primary:hover { background: var(--clay-dark); }

.btn-outline {
  background: transparent;
  border-color: var(--white);
  color: var(--white);
}
.btn-outline:hover { background: rgba(255,255,255,0.15); }
/* .btn-outline is white on transparent, drawn for the dark page hero, the dark
   footer and .cta-band. Dropped onto a cream section it is white on cream and
   disappears — the same failure .cta-band .btn-ghost fixes further down. These
   two selectors name the light grounds explicitly rather than excluding the
   dark ones, so a new dark band cannot silently inherit the wrong ink. */
.bg-cream-dark .btn-outline,
.section-light .btn-outline {
  border-color: var(--forest);
  color: var(--forest);
}
.bg-cream-dark .btn-outline:hover,
.section-light .btn-outline:hover { background: rgba(31,61,46,0.10); }
/* .cta-band is forest green wherever it is dropped, including inside the light
   grounds above, so the coercion must not reach into it. */
.bg-cream-dark .cta-band .btn-outline,
.section-light .cta-band .btn-outline {
  border-color: var(--white);
  color: var(--white);
}
.bg-cream-dark .cta-band .btn-outline:hover,
.section-light .cta-band .btn-outline:hover { background: rgba(255,255,255,0.15); }

.btn-forest {
  background: var(--forest);
  color: var(--white);
}
.btn-forest:hover { background: var(--forest-dark); }

.btn-ghost {
  background: transparent;
  border-color: var(--forest);
  color: var(--forest);
}
.btn-ghost:hover { background: var(--forest); color: var(--white); }

.btn-sm { padding: 10px 20px; font-size: 0.85rem; }

/* Top info bar */
.topbar {
  background: var(--forest-dark);
  color: var(--cream-dark);
  font-size: 0.82rem;
}
.topbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 8px;
  padding-bottom: 8px;
  gap: 16px;
  flex-wrap: wrap;
}
.topbar a { color: var(--gold); font-weight: 600; }

/* Sign-up actions pinned to the info bar. These read as things to do, while
   the header buttons below handle the transactions (order, reserve, gift). */
.topbar-actions { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.topbar-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 14px;
  border: 1px solid rgba(201, 161, 90, 0.55);
  border-radius: 999px;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
/* The dot marks Rewards as the one worth doing first */
.topbar-cta-dot::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
}
.topbar-cta:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--forest-dark);
}
.topbar-cta-dot:hover::before { background: var(--forest-dark); }

/* Short hours line swaps in on phones so two CTAs don't push the bar taller */
.hours-short { display: none; }

/* Header / nav */
header.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 246, 238, 0.92);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid rgba(31, 61, 46, 0.08);
}
.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  max-width: var(--max);
  margin: 0 auto;
}
.brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.brand img { height: 74px; width: auto; display: block; }

nav.main-nav {
  display: flex;
  align-items: center;
  /* 18px, not 22: seven items plus the three CTA buttons wrap to a second row
     at 22px on a 1350px viewport, which is just above the 1200px breakpoint
     where the hamburger takes over. */
  gap: 18px;
}
nav.main-nav a.nav-link {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--forest-dark);
  position: relative;
  padding: 6px 0;
}
nav.main-nav a.nav-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 0%;
  height: 2px;
  background: var(--clay);
  transition: width 0.2s ease;
}
nav.main-nav a.nav-link:hover::after { width: 100%; }
/* Extra actions surfaced only inside the mobile dropdown */
.nav-link-mobile { display: none; }

.nav-ctas { display: flex; gap: 12px; align-items: center; }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.nav-toggle span {
  width: 26px; height: 2px; background: var(--forest-dark); display: block;
}

/* Hero */
.hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: center;
  color: var(--white);
  overflow: hidden;
}
/* Rotating slides — stacked and cross-faded */
.hero-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.9s ease, visibility 0s linear 0.9s;
}
.hero-slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.9s ease, visibility 0s;
}
.hero-slide::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,39,32,0.58) 0%, rgba(20,39,32,0.38) 45%, rgba(20,39,32,0.88) 100%);
}
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 720px;
  padding: 0 24px;
  margin: 0 auto;
  text-align: center;
}
/* Slides 2+ use a styled paragraph so the page keeps exactly one <h1> */
.hero-title {
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.15;
  font-size: clamp(2.2rem, 4.6vw, 3.6rem);
  color: var(--white);
  margin: 0 0 0.5em;
  text-wrap: balance;
}

/* Slide picker */
.hero-dots {
  position: absolute;
  left: 0; right: 0; bottom: 26px;
  z-index: 3;
  display: flex;
  gap: 10px;
  justify-content: center;
}
.hero-dot {
  width: 34px; height: 4px;
  border: 0; padding: 0;
  border-radius: 999px;
  background: rgba(255,255,255,0.35);
  cursor: pointer;
  transition: background 0.25s ease, width 0.25s ease;
}
.hero-dot:hover { background: rgba(255,255,255,0.6); }
.hero-dot.is-active { background: var(--gold); width: 52px; }
.hero-dot:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
.hero-content .eyebrow { color: var(--gold); }
.hero-content h1 { color: var(--white); }
.hero-content p.lead {
  color: rgba(255,255,255,0.9);
  font-size: 1.15rem;
  max-width: 560px;
  margin: 0 auto 1.75em;
}
.hero-ctas {
  display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;
}
.hero-tags {
  display: flex; gap: 10px; justify-content: center; margin-top: 2.5em; flex-wrap: wrap;
}
.hero-tags span {
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Happy hour promo band */
.promo-bar { background: var(--clay); }
.promo-bar-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  text-align: center;
  padding: 16px 24px;
}
.promo-bar-text {
  margin: 0;
  color: var(--white);
  font-size: 0.95rem;
  font-weight: 500;
}
.promo-bar-text strong {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  margin-right: 8px;
}
.promo-bar .btn-outline { border-color: var(--white); flex-shrink: 0; }

/* Sections */
section { padding: 96px 0; }
.section-head { max-width: 640px; margin: 0 auto 56px; text-align: center; }

.bg-forest { background: var(--forest); color: var(--cream); }
.bg-forest h2, .bg-forest h3 { color: var(--white); }
.bg-forest p { color: rgba(250,246,238,0.78); }
.bg-cream-dark { background: var(--cream-dark); }

/* Feature 3-col (Restaurant / Patio / Bar) */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.feature-card {
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--white);
  box-shadow: var(--shadow);
}
.feature-card .img-wrap { aspect-ratio: 4/3; overflow: hidden; }
.feature-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.feature-card:hover img { transform: scale(1.06); }
.feature-card .body { padding: 24px; }

/* Fact strip on the bar page. Deliberately not .feature-card: that component is
   built around an image and takes its padding from the .body wrapper inside it,
   so text dropped straight in sits flush against the card edge. auto-fit means
   it reflows on its own and needs no breakpoint of its own. */
.bar-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 24px;
}
.bar-fact {
  text-align: center;
  padding: 40px 28px 34px;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border-top: 3px solid var(--gold);
}
.bar-fact-value {
  display: block;
  font-family: var(--font-head);
  font-size: clamp(2rem, 3.6vw, 2.5rem);
  font-weight: 600;
  line-height: 1;
  color: var(--forest);
  margin-bottom: 14px;
}
.bar-fact h3 {
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--moss-dark);
  margin: 0 0 10px;
}
.bar-fact p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--gray);
  margin: 0;
}
.bar-fact a { color: var(--clay); font-weight: 600; }

/* Gallery */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 220px;
  gap: 16px;
}
.gallery-grid a { border-radius: var(--radius); overflow: hidden; display: block; }
.gallery-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.gallery-grid a:hover img { transform: scale(1.08); }
.gallery-grid .tall { grid-row: span 2; }

/* Events */
.events-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: stretch;
}
.event-card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 340px;
  display: flex;
  align-items: flex-end;
  color: var(--white);
}
.event-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.event-card::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,39,32,0) 30%, rgba(20,39,32,0.88) 100%);
  z-index: 1;
}
.event-card .body { position: relative; z-index: 2; padding: 28px; }
.event-card h3 { color: var(--white); }
.event-card p { color: rgba(255,255,255,0.85); }

/* Review grid */
.review-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 48px;
}
.review-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px 26px;
}
.review-card .stars { color: var(--gold); font-size: 1rem; letter-spacing: 3px; margin-bottom: 14px; }
.review-card blockquote {
  margin: 0 0 16px;
  font-family: var(--font-head);
  font-size: 1.05rem;
  font-style: italic;
  color: var(--forest-dark);
  line-height: 1.45;
}
.review-card cite { font-style: normal; font-weight: 700; color: var(--forest-dark); font-size: 0.88rem; }
.review-card cite span { font-weight: 400; color: var(--gray); }

/* Review stats */
.review-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 640px;
  margin: 0 auto;
}
.review-stats.one {
  grid-template-columns: 1fr;
  max-width: 320px;
}
.review-stat {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px 24px;
  text-align: center;
  transition: transform 0.18s ease;
}
.review-stat:hover { transform: translateY(-3px); }
.review-score {
  display: block;
  font-family: var(--font-head);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--forest-dark);
}
.review-score small { font-size: 1.2rem; color: var(--gold); }
.review-source {
  display: block;
  font-size: 0.85rem;
  color: var(--gray);
  margin: 4px 0 14px;
}
.review-cta {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--clay);
}

/* Info / hours + map */

/* Gift card banner */
.gift-banner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 40px;
  background: var(--cream-dark);
  border-radius: var(--radius);
  overflow: hidden;
}
.gift-banner .body { padding: 56px; }
.gift-banner img { width: 100%; height: 100%; object-fit: cover; min-height: 280px; }

/* Footer */
footer.site-footer {
  background: var(--forest-dark);
  color: rgba(250,246,238,0.75);
  padding: 72px 0 28px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 48px;
}
/* Grid and flex children default to min-width:auto, meaning a track can never
   shrink below its widest unbreakable word. The footer email is 32 characters
   with no break opportunity, which held both mobile columns open at 305px and
   pushed every page on the site into horizontal scroll. These two rules let
   the columns shrink and let the address wrap. */
.footer-grid > * { min-width: 0; }

.footer-grid h4 { color: var(--white); font-family: var(--font-body); font-size: 0.95rem; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 1.2em; }
/* break-word matters here: greenhouse@greenhousenewhope.com is 32 unbreakable
   characters and used to hold both mobile columns open, overflowing the page. */
.footer-grid a { display: block; margin-bottom: 10px; color: rgba(250,246,238,0.75); overflow-wrap: break-word; }
.footer-grid a:hover { color: var(--gold); }
.footer-brand { font-family: var(--font-head); font-size: 1.6rem; color: var(--white); margin-bottom: 14px; }
.social-row { display: flex; gap: 14px; margin-top: 8px; }
.social-row a {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(250,246,238,0.3);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 0;
}
.social-row a:hover { background: var(--gold); border-color: var(--gold); color: var(--forest-dark); }
/* Email signup band, sits between the footer columns and the copyright line */
.footer-signup {
  border-top: 1px solid rgba(250,246,238,0.15);
  margin-top: 12px;
  padding: 28px 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px 32px;
}
.footer-signup-copy { max-width: 46ch; }
.footer-signup h4 {
  font-family: var(--font-head);
  font-size: 1.15rem;
  color: var(--cream);
  margin: 0 0 6px;
}
.footer-signup p {
  margin: 0;
  font-size: 0.86rem;
  color: rgba(250,246,238,0.72);
  line-height: 1.5;
}
.footer-signup .btn { flex-shrink: 0; }
.footer-signup-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  flex-shrink: 0;
}
/* Touch devices only. An sms: link does nothing on a desktop, so showing it
   there is a dead end. Gated on input capability rather than screen width,
   because a narrow desktop window is still a desktop with no messaging app.
   Hidden by default so anything that can't read the query stays hidden.
   The button and its consent text are gated together — the disclosure has to
   travel with the button it belongs to, never appear without it. */
.footer-sms-wrap { display: none; }
@media (hover: none) and (pointer: coarse) {
  .footer-sms-wrap { display: flex; flex-direction: column; gap: 8px; }
}
.footer-signup-sms { width: 100%; justify-content: center; }
/* Not fine print — this tells people a second step is coming. Anyone who
   texts JOIN and ignores the reply never actually joins, so it needs to be
   readable, not buried. */
.footer-sms-terms {
  margin: 0;
  max-width: 40ch;
  font-size: 0.74rem;
  line-height: 1.5;
  color: rgba(250,246,238,0.62);
  text-align: center;
}
.footer-sms-terms strong { color: var(--gold); font-weight: 600; }

.footer-bottom {
  border-top: 1px solid rgba(250,246,238,0.15);
  padding-top: 24px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-size: 0.82rem;
}

/* Sticky mobile CTA */
.sticky-cta {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 200;
  display: none;
  background: var(--white);
  box-shadow: 0 -6px 20px rgba(0,0,0,0.12);
  padding: 10px 14px;
  gap: 10px;
}
/* Three buttons now share this bar. .btn is white-space: nowrap with 28px of
   side padding, which would push the labels straight out of their boxes at a
   third of a 375px screen, so the padding and type come down in here only. */
.sticky-cta .btn {
  flex: 1;
  justify-content: center;
  padding-left: 6px;
  padding-right: 6px;
  font-size: 0.86rem;
  letter-spacing: 0;
}
/* Menu is the quiet one of the three: on a phone the nav is behind the burger,
   so this is the only always-visible way to reach the food. */
.sticky-cta .btn-menu {
  background: var(--white);
  color: var(--forest);
  border-color: var(--forest);
  flex: 0 0 27%;
}
.sticky-cta .btn-menu:hover { background: var(--moss-wash); }

/* ---------------------------------------------------------------
   Rewards nudge — a slide-in, deliberately not a popup.
   It never covers the page and only appears to someone who has
   already stayed, so it avoids Google's intrusive-interstitial
   penalty. Sits below the sticky CTA in z-order and clears it on
   mobile, so it can never hide Order Online or Reservations.
   --------------------------------------------------------------- */
.rewards-nudge {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 150;
  width: 330px;
  max-width: calc(100vw - 40px);
  background: var(--forest);
  color: var(--cream);
  border-radius: var(--radius);
  box-shadow: 0 18px 40px rgba(20, 39, 32, 0.35);
  padding: 24px 26px 22px;
  transform: translateY(130%);
  opacity: 0;
  visibility: hidden;
  transition: transform 0.45s ease, opacity 0.45s ease, visibility 0s linear 0.45s;
}
.rewards-nudge.is-open {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  transition: transform 0.45s ease, opacity 0.45s ease;
}
.rewards-nudge .eyebrow { color: var(--gold); margin-bottom: 0.5em; }
.rewards-nudge h3 {
  color: var(--white);
  font-size: 1.25rem;
  margin: 0 0 8px;
}
.rewards-nudge p {
  color: rgba(250, 246, 238, 0.8);
  font-size: 0.88rem;
  line-height: 1.55;
  margin: 0 0 16px;
}
.rewards-nudge .btn { width: 100%; justify-content: center; }

.rewards-nudge-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 30px;
  height: 30px;
  border: 0;
  background: none;
  color: rgba(250, 246, 238, 0.6);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
}
.rewards-nudge-close:hover { color: var(--white); background: rgba(255,255,255,0.12); }

@media (prefers-reduced-motion: reduce) {
  .rewards-nudge { transition: opacity 0.3s ease; transform: none; }
}

/* Page hero (interior pages) */
.page-hero {
  position: relative;
  padding: 160px 0 80px;
  color: var(--white);
  text-align: center;
  background-size: cover;
  background-position: center;
}
.page-hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,39,32,0.75), rgba(20,39,32,0.6));
  z-index: 0;
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 { color: var(--white); margin-bottom: 0.3em; }
.page-hero p { color: rgba(255,255,255,0.85); max-width: 560px; margin: 0 auto; }
/* Hero eyebrows are always gold — no need to set it per page */
.page-hero .eyebrow { color: var(--gold); }

/* ---------------------------------------------------------------
   Forms (careers, contact)
   Submissions POST to FormSubmit. Netlify Forms needs a build step to detect
   the markup and this site is deployed by drag and drop, so there is none.
   No client-side JS is involved beyond the empty-file guard in main.js.
   --------------------------------------------------------------- */
.form-layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 48px;
  align-items: start;
}
/* No sidebar — centre the form instead of letting it run the full width */
.form-layout-single {
  grid-template-columns: minmax(0, 680px);
  justify-content: center;
}
.form-aside h2 { font-size: 1.5rem; margin-bottom: 0.5em; }
.form-aside p { color: var(--gray); font-size: 0.95rem; }
.form-links { list-style: none; padding: 0; margin: 0 0 24px; }
.form-links li {
  padding: 9px 0;
  border-bottom: 1px solid var(--cream-dark);
  font-size: 0.92rem;
  color: var(--gray);
}
.form-aside-note {
  background: var(--moss-wash);
  border-left: 3px solid var(--moss);
  border-radius: var(--radius);
  padding: 18px 20px;
  font-size: 0.9rem;
}
.form-aside-note strong { display: block; color: var(--moss-dark); margin-bottom: 4px; }

.site-form {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 36px 34px;
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.field { margin: 0 0 20px; }
.field label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--charcoal);
}
.field .req { color: var(--clay); }
.field .optional { font-weight: 400; color: var(--gray); font-size: 0.8rem; }

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--cream-dark);
  border-radius: 10px;
  background: var(--cream);
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--charcoal);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.field textarea { resize: vertical; min-height: 110px; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--moss);
  box-shadow: 0 0 0 3px rgba(95, 113, 72, 0.18);
}
.field input[type="file"] {
  padding: 10px 12px;
  background: var(--white);
  font-size: 0.86rem;
}
.site-form .btn { width: 100%; justify-content: center; }
.form-fineprint {
  margin: 14px 0 0;
  font-size: 0.78rem;
  color: var(--gray);
  text-align: center;
}

/* Honeypot. Bots fill this in, people never see it. Kept out of the
   layout and out of the tab order rather than display:none, which some
   bots check for. */
.form-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.center-block { margin-left: auto; margin-right: auto; }
.link-gold { color: var(--gold); font-weight: 600; }

/* Menu page */
.menu-subnav {
  position: sticky;
  top: 90px;
  z-index: 90;
  background: var(--cream);
  border-bottom: 1px solid rgba(31,61,46,0.1);
  overflow-x: auto;
  white-space: nowrap;
}
.menu-subnav .container { padding-top: 14px; padding-bottom: 14px; display: flex; gap: 8px; justify-content: center; }
.menu-subnav a {
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--forest-dark);
  border: 1px solid rgba(31,61,46,0.15);
  flex-shrink: 0;
}
.menu-subnav a.active, .menu-subnav a:hover { background: var(--moss); color: var(--white); border-color: var(--moss); }

.menu-note {
  background: var(--moss-wash);
  border-left: 3px solid var(--moss);
  border-radius: var(--radius);
  padding: 20px 24px;
  font-size: 0.85rem;
  color: var(--gray);
  margin-bottom: 60px;
}
.menu-note strong { color: var(--moss-dark); }

.menu-category {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 44px 40px;
  margin-bottom: 36px;
  scroll-margin-top: 140px;
  border-top: 4px solid var(--moss);
}
/* Alternating tint keeps a long menu from reading as one flat block */
.menu-category:nth-of-type(even) { background: var(--moss-wash); }
.menu-category .eyebrow { margin-bottom: 2px; color: var(--moss); }
.menu-category h2 {
  border-bottom: 2px solid var(--clay);
  display: inline-block;
  padding-bottom: 8px;
  margin-bottom: 8px;
}
.menu-category .cat-note { font-size: 0.85rem; margin-bottom: 32px; color: var(--gray); font-style: italic; }

.menu-items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px 48px;
  margin-top: 28px;
}
.menu-item { border-bottom: 1px dashed rgba(31,61,46,0.15); padding-bottom: 18px; }
.menu-item-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.menu-item-top h4 { margin: 0; font-family: var(--font-head); font-weight: 600; font-size: 1.12rem; color: var(--forest-dark); }
.menu-item-price { font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; color: var(--clay-dark); white-space: nowrap; }
.menu-item p { margin: 6px 0 0; font-size: 0.9rem; }
.tag {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--white);
  background: var(--moss);
  border-radius: 4px;
  padding: 2px 6px;
  margin-left: 6px;
  vertical-align: middle;
  letter-spacing: 0.03em;
}

/* Cocktail cards */
.cocktail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 28px;
}
.cocktail-card {
  background: var(--white);
  border: 1px solid rgba(95,113,72,0.22);
  border-radius: var(--radius);
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  transition: border-color 0.18s ease, transform 0.18s ease;
}
.cocktail-card:hover { border-color: var(--moss); transform: translateY(-3px); }
.cocktail-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
}
.cocktail-card h4 {
  margin: 0;
  font-family: var(--font-head);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--forest-dark);
}
.cocktail-card .price {
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--clay-dark);
  white-space: nowrap;
}
.cocktail-card .pour {
  font-size: 0.88rem;
  color: var(--gray);
  margin: 0 0 12px;
  line-height: 1.5;
}
.cocktail-card .note {
  margin: auto 0 0;
  padding-top: 12px;
  border-top: 1px solid rgba(95,113,72,0.18);
  font-size: 0.8rem;
  font-style: italic;
  color: var(--moss-dark);
}
.cocktail-card.zero { background: var(--moss-wash); }

/* Featured (next up) event */
.event-featured {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  background: var(--forest-dark);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  margin-bottom: 64px;
}
.event-featured-img { position: relative; min-height: 340px; }
.event-featured-img img { width: 100%; height: 100%; object-fit: cover; }
.event-featured-body { padding: 44px 40px; display: flex; flex-direction: column; justify-content: center; }
.event-featured-body .eyebrow { color: var(--gold); }
.event-featured-body h2 { color: var(--white); font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 10px; }
.event-featured-body .when {
  font-family: var(--font-head);
  font-size: 1.15rem;
  color: var(--gold);
  margin-bottom: 14px;
}
.event-featured-body p { color: rgba(250,246,238,0.82); }

/* Month grouping */
.event-month-head {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0 0 24px;
}
.event-month-head h2 {
  font-size: 1.5rem;
  margin: 0;
  white-space: nowrap;
  color: var(--moss-dark);
}
.event-month-head .rule { flex: 1; height: 1px; background: rgba(95,113,72,0.3); }

/* Event cards */
.event-list { list-style: none; margin: 0 0 56px; padding: 0; display: grid; gap: 18px; }
.event-row {
  display: flex;
  gap: 26px;
  align-items: center;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px 30px;
  border-left: 5px solid var(--moss);
  transition: transform 0.18s ease, border-color 0.18s ease;
}
.event-row:hover { transform: translateX(4px); border-left-color: var(--clay); }
.event-date {
  flex-shrink: 0;
  width: 84px;
  text-align: center;
  background: var(--moss-wash);
  border-radius: 10px;
  padding: 12px 6px;
}
.event-month {
  display: block;
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--moss-dark);
}
.event-day {
  display: block;
  font-family: var(--font-head);
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1.05;
  color: var(--forest-dark);
}
.event-dow {
  display: block;
  font-size: 0.72rem;
  color: var(--gray);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.event-body { flex: 1; }
.event-body h3 { font-size: 1.25rem; margin-bottom: 6px; }
.event-body p { margin: 0; }
.event-time {
  font-weight: 700;
  color: var(--clay-dark);
  font-size: 0.9rem;
  margin-bottom: 8px !important;
}
.event-body a { color: var(--moss-dark); font-weight: 600; text-decoration: underline; }
.event-flag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  margin-left: 8px;
  vertical-align: middle;
  background: var(--moss-wash);
  color: var(--moss-dark);
}
.event-flag.kitchen { background: #f6e8e2; color: var(--clay-dark); }

/* Events preview (home) */
.events-preview {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.event-mini {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px 20px;
  border-top: 3px solid var(--clay);
  transition: transform 0.18s ease;
  display: block;
}
.event-mini:hover { transform: translateY(-4px); }
.event-mini-date {
  display: block;
  font-family: var(--font-head);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--clay-dark);
  line-height: 1.1;
}
.event-mini-name {
  display: block;
  font-weight: 700;
  color: var(--forest-dark);
  margin: 8px 0 4px;
  font-size: 0.98rem;
}
.event-mini-time { display: block; font-size: 0.82rem; color: var(--gray); }

.gallery-filters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 40px;
}
.gallery-filter {
  padding: 9px 20px;
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--forest-dark);
  background: transparent;
  border: 1px solid rgba(95,113,72,0.35);
  cursor: pointer;
  font-family: var(--font-body);
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.gallery-filter:hover { border-color: var(--moss); }
.gallery-filter[aria-pressed="true"] {
  background: var(--moss);
  color: var(--white);
  border-color: var(--moss);
}

.masonry { columns: 3; column-gap: 18px; }
.masonry .photo {
  break-inside: avoid;
  margin: 0 0 18px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--white);
  position: relative;
  display: block;
}
.masonry .photo img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.45s ease;
}
.masonry .photo:hover img { transform: scale(1.04); }
.masonry .photo figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 26px 16px 14px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--white);
  background: linear-gradient(180deg, rgba(20,39,32,0) 0%, rgba(20,39,32,0.85) 60%);
}
[hidden] { display: none !important; }

/* Off-screen but still rendered. Used for the Toast booking widget, which we
   mount but never show — display:none would stop its button from being
   clickable, so it has to keep a box. */

/* ---------------------------------------------------------------
   Guide page (free things to do) — editorial, not cards
   --------------------------------------------------------------- */
.guide-head {
  background: var(--forest-dark);
  color: var(--cream);
  padding: 84px 0 72px;
}
.guide-head .container { max-width: 780px; }
.guide-head .eyebrow { color: var(--gold); }
.guide-head h1 { color: var(--white); margin-bottom: 0.4em; }
.guide-standfirst {
  color: rgba(250,246,238,0.86);
  font-size: 1.12rem;
  line-height: 1.65;
  margin-bottom: 1.2em;
}
/* The colour above is for .guide-head, which sits on dark forest. On a page
   that opens with .page-hero instead, the standfirst lands on cream and is
   invisible. Inherit the body colour there. */
.guide-body .guide-standfirst { color: inherit; }
.guide-byline {
  color: rgba(250,246,238,0.6);
  font-size: 0.86rem;
  margin: 0;
  padding-top: 18px;
  border-top: 1px solid rgba(250,246,238,0.18);
}

.guide-body { max-width: 780px; padding-top: 72px; padding-bottom: 8px; }

.guide-item { padding-bottom: 52px; margin-bottom: 52px; border-bottom: 1px solid rgba(95,113,72,0.22); }
.guide-item:last-of-type { border-bottom: 0; }

/* Photographs inside the long-form guides */
.guide-figure { margin: 30px 0 0; }
.guide-figure img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow); }
.guide-figure figcaption {
  margin-top: 10px;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--gray);
  font-style: italic;
}
.guide-dist {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--moss-dark);
  background: var(--moss-wash);
  border-radius: 999px;
  padding: 5px 14px;
  margin-bottom: 16px;
}
.guide-item h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 0.5em; }
.guide-item p { font-size: 1.02rem; line-height: 1.72; }
.guide-item p:last-child { margin-bottom: 0; }
.guide-note {
  border-left: 3px solid var(--clay);
  padding-left: 18px;
  font-size: 0.94rem !important;
  color: var(--charcoal);
}

/* Rewards — how it works */
.rewards-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.reward-step {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border-top: 4px solid var(--moss);
  padding: 32px 28px;
}
.reward-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--moss-wash);
  color: var(--moss-dark);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.15rem;
  margin-bottom: 16px;
}
.reward-step h3 { font-size: 1.15rem; margin-bottom: 0.5em; }
.reward-step p { margin: 0; font-size: 0.94rem; }

/* FAQ accordion */
.faq-list {
  max-width: 780px;
  margin: 0 auto;
  display: grid;
  gap: 12px;
}
.faq {
  background: var(--white);
  border-radius: var(--radius);
  border-left: 4px solid var(--moss);
  box-shadow: var(--shadow);
  padding: 0 22px;
}
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 30px 18px 0;
  font-weight: 700;
  color: var(--forest-dark);
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 4px; top: 50%;
  transform: translateY(-50%);
  font-size: 1.35rem;
  font-weight: 400;
  color: var(--moss);
  line-height: 1;
}
.faq[open] summary::after { content: "\2013"; }
.faq p {
  margin: 0;
  padding: 0 0 20px;
  font-size: 0.94rem;
}
.faq a { color: var(--moss-dark); font-weight: 600; text-decoration: underline; }

/* Instagram block on the home page — capped so it stays a compact square
   beside the hours instead of running the full length of the section. */
/* Instagram beside copy, in its own frame, sized for a 3x3 grid.
   (Column count is set in the LightWidget dashboard, not here.) */
.ig-split {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 48px;
  align-items: center;
}
.ig-split-text h2 { margin-bottom: 0.45em; }
.ig-frame {
  background: var(--white);
  border: 1px solid rgba(95,113,72,0.25);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px;
}
.ig-frame .lightwidget-widget {
  display: block;
  border-radius: 8px;
  /* Roughly three square thumbnails tall; the widget resizes itself inside this */
  min-height: 520px;
}

/* ---------------------------------------------------------------
   Visit section — hours, contact, and map as three clear tiles
   --------------------------------------------------------------- */
.visit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.visit-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  border-top: 4px solid var(--moss);
  padding: 34px 32px;
}
.visit-card-title {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--moss-dark);
  font-family: var(--font-body);
  margin-bottom: 20px;
}

.hours { margin: 0; }
.hours-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(31,61,46,0.08);
}
.hours-row:last-child { border-bottom: 0; }
.hours dt { color: var(--gray); font-size: 0.95rem; }
.hours dd {
  margin: 0;
  font-weight: 600;
  color: var(--forest-dark);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* The one line people most need to know */
.hours-callout {
  background: var(--moss-wash);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 16px 0;
}
.hours-callout-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--moss-dark);
  margin-bottom: 3px;
}
.hours-callout-value {
  display: block;
  font-weight: 600;
  color: var(--forest-dark);
  font-variant-numeric: tabular-nums;
}

.visit-address {
  font-style: normal;
  font-family: var(--font-head);
  font-size: 1.3rem;
  line-height: 1.4;
  color: var(--forest-dark);
  margin-bottom: 16px;
}
.visit-contact { list-style: none; margin: 0 0 4px; padding: 0; }
.visit-contact li { padding: 5px 0; }
.visit-contact a { color: var(--moss-dark); font-weight: 600; word-break: break-word; }
.visit-contact a:hover { text-decoration: underline; }

.visit-map {
  grid-column: 1 / -1;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  min-height: 300px;
}
.visit-map iframe { width: 100%; height: 100%; min-height: 300px; border: 0; display: block; }

/* Instagram feed (LightWidget) */
.ig-feed {
  max-width: 1000px;
  margin: 0 auto;
  border-radius: var(--radius);
  overflow: hidden;
  /* Reserve height so the page doesn't jump while the widget sizes itself */
  min-height: 300px;
}
.ig-feed iframe { display: block; }

/* Chef's picks strip */
.chefs-picks { padding: 60px 0 16px; }
.chefs-picks-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.chefs-pick {
  position: relative;
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  aspect-ratio: 3 / 4;
}
.chefs-pick img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.chefs-pick:hover img { transform: scale(1.07); }
.chefs-pick::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,39,32,0) 55%, rgba(20,39,32,0.85) 100%);
}
.chefs-pick span {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 16px 14px;
  color: var(--white);
  font-weight: 700;
  font-size: 0.88rem;
  z-index: 1;
}

/* Happy hour specials boards */
.specials-boards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
}
.specials-board {
  background: var(--forest-dark);
  border-radius: var(--radius);
  padding: 36px 32px;
  box-shadow: var(--shadow);
  border-top: 4px solid var(--moss);
}
.specials-board h2 {
  color: var(--gold);
  font-size: 1.4rem;
  margin-bottom: 24px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(95,113,72,0.5);
}
.specials-list { list-style: none; margin: 0; padding: 0; }
.specials-list li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 11px 0;
}
.specials-list .name {
  color: var(--cream);
  font-weight: 600;
  font-size: 0.98rem;
  white-space: nowrap;
}
.specials-list .name small {
  display: block;
  color: rgba(250,246,238,0.55);
  font-weight: 400;
  font-size: 0.76rem;
  white-space: normal;
  margin-top: 2px;
}
.specials-list .fill {
  flex: 1;
  border-bottom: 1px dotted rgba(250,246,238,0.3);
  margin-bottom: 5px;
  min-width: 20px;
}
.specials-list .price {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--gold);
  white-space: nowrap;
}

/* Wine/spirits simple list */
.menu-category h3 {
  color: var(--moss-dark);
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 34px;
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(95,113,72,0.25);
}
.simple-list { list-style: none; padding: 0; margin: 0; }
.simple-list li {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 12px 0;
  border-bottom: 1px dashed rgba(31,61,46,0.15);
  font-size: 0.92rem;
}
.simple-list li span:first-child { font-weight: 600; color: var(--forest-dark); }
.simple-list li small { display: block; color: var(--gray); font-weight: 400; }
.simple-list li span:last-child { font-family: var(--font-head); font-weight: 700; color: var(--clay-dark); white-space: nowrap; }
.spirits-list { columns: 2; column-gap: 48px; margin-top: 28px; }
.spirits-list .spirit-group { break-inside: avoid; margin-bottom: 20px; }
.spirits-list h4 { margin-bottom: 6px; color: var(--clay-dark); text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.95rem; }
.spirits-list p { margin: 0; font-size: 0.88rem; }

/* Private events page */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

.cta-band {
  background: var(--forest);
  border-radius: var(--radius);
  padding: 56px;
  text-align: center;
  color: var(--white);
}
.cta-band h2 { color: var(--white); }
.cta-band p { color: rgba(250,246,238,0.8); max-width: 560px; margin: 0 auto 28px; }

/* The band is forest green, and btn-ghost is forest green on transparent, so
   putting one in here renders it invisible against its own background. This
   happened once already. Rather than rely on remembering, any ghost button
   dropped in this band is coerced to the light-on-dark treatment. */
.cta-band .btn-ghost {
  border-color: var(--white);
  color: var(--white);
}
.cta-band .btn-ghost:hover { background: rgba(255,255,255,0.15); color: var(--white); }


/* Tripadvisor link. Deliberately not their embed widget: that script replaces
   the container's contents, so it controlled both the size and the
   destination, and it needed two extra script hosts in the CSP. */
.ta-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--moss-dark);
}
.ta-link img { flex-shrink: 0; }
.ta-link:hover { text-decoration: underline; }

/* Fade-in animation */
.fade-in { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }

/* Responsive */
@media (max-width: 1200px) {
  .form-layout { grid-template-columns: 1fr; gap: 32px; }
  nav.main-nav { display: none; }
  .nav-toggle { display: flex; }
  .nav-wrap.open nav.main-nav {
    display: flex;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--cream);
    flex-direction: column;
    align-items: flex-start;
    padding: 24px;
    gap: 18px;
    box-shadow: var(--shadow);
  }
  .nav-ctas { display: none; }
  .nav-wrap.open .nav-link-mobile { display: block; }
  .feature-grid { grid-template-columns: 1fr; }
  .events-grid { grid-template-columns: 1fr; }
  .review-grid { grid-template-columns: 1fr; }
  .specials-boards { grid-template-columns: 1fr; }
  .chefs-picks-grid { grid-template-columns: repeat(2, 1fr); }
  .menu-category { padding: 32px 24px; }
  .event-row { padding: 20px 18px; gap: 16px; }
  .event-date { width: 68px; padding: 10px 4px; }
  .event-day { font-size: 1.8rem; }
  .event-body h3 { font-size: 1.1rem; }
  .event-featured { grid-template-columns: 1fr; }
  .event-featured-img { min-height: 220px; }
  .event-featured-body { padding: 30px 24px; }
  .cocktail-grid { grid-template-columns: 1fr; }
  .masonry { columns: 2; column-gap: 14px; }
  .masonry .photo { margin-bottom: 14px; }
    .ig-split { grid-template-columns: 1fr; gap: 32px; }
  .ig-frame .lightwidget-widget { min-height: 420px; }
  .visit-grid { grid-template-columns: 1fr; }
  .rewards-steps { grid-template-columns: 1fr; }
  .visit-card { padding: 26px 22px; }
  .guide-head { padding: 56px 0 48px; }
  .guide-body { padding-top: 52px; }
  .guide-item { padding-bottom: 40px; margin-bottom: 40px; }
    .events-preview { grid-template-columns: 1fr 1fr; }
    .gift-banner { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; }
  .menu-items { grid-template-columns: 1fr; }
  .spirits-list { columns: 1; }
  .two-col { grid-template-columns: 1fr; }
  .sticky-cta { display: flex; }
  /* The bar renders ~76px tall; leave real clearance rather than guessing */
  body { padding-bottom: 84px; }
  /* Sit clear of the sticky order/reserve bar, with room to spare */
  .rewards-nudge { left: 16px; right: 16px; bottom: 94px; width: auto; }
  section { padding: 64px 0; }
}

@media (max-width: 560px) {
  .site-form { padding: 26px 20px; }
  .field-row { grid-template-columns: 1fr; }
  /* The subnav is a horizontal scroller. Once the pills overflow, centring
     them puts the first one off the left edge with no way to reach it. */
  .menu-subnav .container { justify-content: flex-start; }
  /* Info bar gets tight — shorten the hours, drop the address, keep both CTAs */
  .topbar .container { justify-content: center; gap: 6px 12px; }
  .topbar-addr { display: none; }
  .hours-long { display: none; }
  .hours-short { display: inline; }
  .topbar-actions { gap: 6px; }
  .topbar-cta { padding: 3px 11px; font-size: 0.74rem; }
  .footer-signup { flex-direction: column; align-items: flex-start; }
  .footer-signup-actions { align-items: stretch; width: 100%; }
  .footer-signup .btn { width: 100%; justify-content: center; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .hero-ctas { flex-direction: column; width: 100%; }
  .hero-ctas .btn { width: 100%; justify-content: center; }
  .review-stats { grid-template-columns: 1fr; }
  .brand img { height: 54px; }
  .events-preview { grid-template-columns: 1fr; }
  .masonry { columns: 1; }
}