:root {
  --char: #0b0806;
  --char-soft: #17100b;
  --brown: #1d0e07;
  --deep-red: #2b0d06;
  --ink: #1b0d07;
  --paper: #fff3df;
  --paper-2: #e8c184;
  --pepper: #c85a1d;
  --palm: #f6a719;
  --leaf: #087b16;
  --leaf-bright: #45a82d;
  --cream: #fff3df;
  --muted: rgba(255, 242, 220, .72);
  --line: rgba(255, 242, 220, .2);
  --display: "Archivo Black", Impact, sans-serif;
  --body: "DM Sans", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
}

.legal-page {
  width: min(920px, calc(100vw - 40px));
  margin: 0 auto;
  padding: 132px 0 72px;
}

.legal-hero,
.legal-panel {
  border: 1px solid rgba(255, 244, 223, .14);
  background: rgba(255, 244, 223, .05);
  border-radius: 24px;
  padding: clamp(22px, 4vw, 42px);
  box-shadow: var(--shadow-soft);
}

.legal-hero h1,
.legal-panel h2 {
  margin: 0 0 14px;
  font-family: var(--display);
  text-transform: uppercase;
  line-height: .95;
  letter-spacing: 0;
}

.legal-hero h1 {
  font-size: clamp(36px, 7vw, 72px);
}

.legal-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.legal-quick-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 18px;
}

.legal-quick-grid article {
  border: 1px solid rgba(255, 244, 223, .14);
  background: rgba(255, 244, 223, .08);
  border-radius: 20px;
  padding: 20px;
}

.legal-quick-grid span,
.legal-details-panel summary {
  display: block;
  color: var(--palm);
  font-family: var(--mono);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.legal-quick-grid p {
  margin: 10px 0 0;
  color: rgba(255, 244, 223, .84);
  line-height: 1.55;
}

.legal-quick-grid a {
  color: var(--palm);
  font-weight: 900;
}

.legal-panel {
  margin-top: 18px;
}

.legal-short-panel ul {
  display: grid;
  gap: 12px;
  margin: 0;
  padding-left: 1.2rem;
}

.legal-panel h2 {
  font-size: clamp(24px, 4vw, 38px);
}

.legal-panel p,
.legal-panel li,
.legal-updated {
  color: rgba(255, 244, 223, .82);
  line-height: 1.65;
}

.legal-panel a {
  color: var(--palm);
  font-weight: 900;
}

.legal-details-panel {
  padding: 0;
  overflow: hidden;
}

.legal-details-panel summary {
  cursor: pointer;
  padding: 22px clamp(22px, 4vw, 42px);
}

.legal-details-panel details > div {
  padding: 0 clamp(22px, 4vw, 42px) clamp(22px, 4vw, 42px);
}

@media (max-width: 760px) {
  .legal-quick-grid {
    grid-template-columns: 1fr;
  }
}

.sms-consent-check {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  grid-column: 1 / -1;
  color: rgba(255, 244, 223, .68);
  font-size: .75rem;
  line-height: 1.42;
}

.sms-consent-check input {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: .12rem;
  accent-color: var(--palm);
}

.sms-consent-check a {
  color: var(--palm);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 2px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--char);
}

body {
  margin: 0;
  color: var(--cream);
  background: var(--brown);
  font-family: var(--body);
  max-width: 100%;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .18;
  background:
    linear-gradient(90deg, rgba(255, 242, 220, .045) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 242, 220, .035) 1px, transparent 1px);
  background-size: 88px 88px;
}

a {
  color: inherit;
  text-decoration: none;
}

img,
video,
iframe {
  display: block;
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
}

.skip-link,
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link:focus {
  z-index: 100;
  width: auto;
  height: auto;
  clip: auto;
  left: 16px;
  top: 16px;
  padding: 10px 14px;
  background: var(--paper);
  color: var(--ink);
}

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 40;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  min-height: 76px;
  padding: 12px clamp(16px, 4vw, 44px);
  color: var(--cream);
  background: linear-gradient(180deg, rgba(13, 8, 9, .94), rgba(13, 8, 9, .16));
}

.brand {
  display: inline-grid;
  place-items: center;
}

/* 2026-09-24 (Mkaguzi brand-audit #38, P0): the mark's real canvas is
   458x362 (cropped-lockup export ratio 382:306, ~1.248:1) -- it is NOT
   square. The old rule forced a 46x46 circle with no object-fit, squashing
   the mark ~21% and cropping its edges on every page load. Fixed:
   object-fit:contain inside a box sized to the real ratio (60x48 @1x, see
   mm-logo-header[@2x/@3x].png), no forced circle, no crop.

   The old `background: var(--paper)` (light cream) chip behind the image
   is also removed -- that light backing sat directly under the logo's
   "AFRICAN KITCHEN" wordmark, which is rendered near-white in the source
   art (designed to sit on a dark ground, per mm-logo-share.png) -- so the
   chip was erasing the wordmark's own contrast to near-invisible on every
   page. .site-header's own background
   (linear-gradient(180deg, rgba(13,8,9,.94), rgba(13,8,9,.16))) is dark at
   every scroll position, so the transparent PNG now sits directly on a
   dark ground and the white wordmark reads correctly without a chip. */
.brand img {
  width: 60px;
  height: 48px;
  aspect-ratio: 60 / 48;
  object-fit: contain;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.site-nav {
  justify-self: center;
  display: flex;
  gap: 6px;
  padding: 8px;
  border: 1px solid rgba(255, 242, 220, .2);
  background: rgba(13, 8, 9, .84);
  backdrop-filter: blur(18px);
  border-radius: 8px;
  box-shadow: 0 16px 42px rgba(0, 0, 0, .18);
}

.site-nav a,
.header-call,
.action,
.menu-filter {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  font: 900 11px/1 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.site-nav a {
  padding: 0 10px;
  color: rgba(255, 242, 220, .88);
  font-size: 12px;
  white-space: nowrap;
}

.site-nav a:hover,
.site-nav a:focus-visible {
  background: rgba(255, 242, 220, .1);
  color: var(--cream);
}

.header-call {
  justify-self: end;
  padding: 0 16px;
  background: var(--cream);
  color: var(--ink);
}

.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  background: rgba(13, 8, 9, .72);
  color: var(--cream);
}

.menu-toggle span:not(.sr-only) {
  display: block;
  width: 18px;
  height: 2px;
  margin: 4px auto;
  background: currentColor;
}

/* 2026-09-24 (Mkaguzi brand-audit #38 follow-up, Nia QA round 2): the
   header's compact/hamburger nav pattern -- previously only active
   <=760px -- now activates up to 1500px. Two real, measured defects made
   this necessary, not a cosmetic call:

   1. Between ~761px and ~1000px (confirmed present before the logo fix
      too, via the pre-fix commit): .site-nav (display:flex, no
      white-space:nowrap at the time) sat as an in-flow item in
      .site-header's `auto 1fr auto` grid. Once the nav's own content
      stopped fitting on one line, the browser's grid track-sizing
      algorithm collapsed the adjacent `auto` .brand column to computed
      width:0 -- the logo did not just look bad, it did not render at
      all. Root cause is nav overflow inside the grid, not the logo
      itself, so the fix has to remove the wide flex-nav from that grid's
      in-flow competition below the width where it truly fits.
   2. At 1440px (real DPR2 screenshots, Nia QA): the nav's 10 items no
      longer fit on one line at their default sizing and wrapped.
      Measured true no-wrap width for all 10 items + logo + Call button +
      header padding/gaps, with .site-nav's gap tightened 10px->6px and
      .site-nav a's padding tightened 14px->10px (see those rules above)
      and real webfonts loaded (document.fonts.ready): ~1444px. 1500px
      here gives ~56px of margin above that measured figure -- deliberate
      safety margin, since the 1440-vs-measurement gap that surfaced this
      whole issue came from a font-loading/rendering discrepancy between
      two otherwise-correct measurements, and a razor-thin fit is exactly
      the kind of thing that breaks again under slightly different
      conditions. white-space:nowrap on .site-nav a (see that rule above)
      means an individual label can no longer wrap onto two lines even if
      this margin is ever eroded by an added nav item -- it will overflow
      or trigger this breakpoint sooner, never wrap.

   .header-call ("Call") stays VISIBLE through the whole compact range
   (unlike the old <=760px-only block, which hid it) -- Craig/Nia's
   explicit requirement ("Keep CALL visible"). It auto-places into the
   header's 3rd grid slot once .site-nav is taken out of flow
   (position:absolute below), sitting to the right of the hamburger
   button; verified by screenshot, not just reasoned about.

   Only the header/nav-specific declarations moved here from the old
   max-width:760px block (further down this file) -- unrelated mobile
   rules in that block (hero-grid, h1 sizing, etc.) are untouched and
   still switch at 760px, the general site mobile breakpoint. This block
   MUST stay after the base .site-header/.site-nav/.menu-toggle/
   .header-call rules above (same-specificity cascade: source order
   decides the override) -- do not move it earlier in the file. */
@media (max-width: 1500px) {
  main section[id] {
    scroll-margin-top: 78px;
  }

  .site-header {
    grid-template-columns: auto 1fr auto;
    min-height: 66px;
  }

  .brand img {
    width: 50px;
    height: 40px;
  }

  .site-nav {
    position: absolute;
    left: 14px;
    right: 14px;
    top: calc(100% + 8px);
    justify-self: stretch;
    width: calc(100vw - 28px);
    display: none;
    flex-direction: column;
    align-items: stretch;
    background: rgba(18, 7, 6, .96);
  }

  .site-nav.open {
    display: flex;
  }

  .site-nav a {
    justify-content: flex-start;
  }

  .menu-toggle {
    display: block;
    margin-left: auto;
    justify-self: end;
  }
}

.happy-hour-promo {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  position: relative;
  z-index: 2;
}

.happy-hour-promo h2 {
  color: var(--cream);
}

.happy-hour-promo p:not(.site-kicker) {
  margin: 0;
  color: rgba(255, 242, 220, .82);
  line-height: 1.5;
}

.hero-priority-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-width: 560px;
  margin: 18px 0 12px;
}

.action-hero-primary {
  min-height: 56px;
  font-size: 13px;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .18);
}

.hero-actions .action-dark,
.hero-priority-actions .action {
  border-width: 2px;
}

.hero-menu-card {
  box-shadow: 0 28px 70px rgba(0, 0, 0, .28);
}

.hero,
.ticker,
.proof-wall,
.food-menu-band,
.menu-lab,
.catering-band,
.faq-band,
.feature-links,
.map-band,
.page-hero,
.page-panel,
.drink-menu-page,
.artist-cta,
.performer-page,
.visit-band,
.site-footer {
  position: relative;
  z-index: 1;
}

main section[id] {
  scroll-margin-top: 92px;
}

.hero {
  min-height: 100svh;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 34%, rgba(237, 73, 38, .22), transparent 34%),
    linear-gradient(135deg, #0d0809 0%, #260b07 48%, #070404 100%);
}

.hero-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(13, 8, 9, .92) 0 30%, rgba(59, 14, 7, .52) 56%, rgba(13, 8, 9, .88) 100%),
    linear-gradient(180deg, rgba(13, 8, 9, .58), rgba(59, 14, 7, .24) 44%, rgba(13, 8, 9, .9));
}

.hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1);
  transition: opacity .55s ease, transform .7s ease;
}

.hero-image.is-active {
  opacity: 1;
  transform: scale(1);
}

.hero-grid {
  position: relative;
  z-index: 3;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, .94fr) minmax(320px, .56fr);
  grid-template-rows: 1fr auto;
  gap: 18px;
  align-items: end;
  padding: clamp(92px, 11vw, 138px) clamp(18px, 5vw, 72px) clamp(22px, 5vw, 54px);
}

.hero-copy {
  max-width: 760px;
}

.site-kicker,
.board-top span,
.menu-card span,
.proof-card span,
.visit-list dt {
  display: block;
  color: var(--leaf-bright);
  font: 900 11px/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2,
h3 {
  text-wrap: balance;
}

h1 {
  margin: 14px 0 20px;
  font-family: var(--display);
  font-size: clamp(56px, 9vw, 138px);
  line-height: .78;
  letter-spacing: 0;
  text-transform: uppercase;
  max-width: 920px;
}

.flavor-stack span {
  display: block;
}

.cream-word {
  color: var(--cream);
}

.gold-word {
  color: var(--palm);
}

.red-word {
  color: var(--leaf-bright);
}

.hero-line {
  max-width: 660px;
  margin: 0 0 26px;
  color: rgba(255, 242, 220, .78);
  font-size: clamp(18px, 2.2vw, 28px);
  line-height: 1.25;
}

h2 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(42px, 7vw, 96px);
  line-height: .86;
  letter-spacing: -.07em;
  text-transform: uppercase;
}

h3 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(25px, 3vw, 38px);
  line-height: .9;
  letter-spacing: -.05em;
  text-transform: uppercase;
}

.hero-actions,
.visit-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.action {
  padding: 0 16px;
  border: 1px solid transparent;
  cursor: pointer;
}

.action-hot {
  background: var(--palm);
  color: var(--ink);
}

.action-light {
  background: var(--cream);
  color: var(--ink);
}

.action-line {
  border-color: rgba(255, 242, 220, .34);
  background: rgba(13, 8, 9, .42);
  color: var(--cream);
}

.action-dark {
  border-color: rgba(8, 123, 22, .28);
  background: rgba(8, 63, 17, .82);
  color: var(--cream);
}

.hero-menu-card {
  align-self: end;
  display: grid;
  min-height: 420px;
  border: 1px solid rgba(255, 243, 223, .24);
  background:
    linear-gradient(180deg, rgba(11, 8, 6, .08), rgba(11, 8, 6, .86)),
    var(--char-soft);
  color: var(--cream);
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .28);
}

.hero-menu-card img {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.12) contrast(1.05);
  transform: scale(1.01);
  transition: transform .65s ease, filter .65s ease;
}

.hero-menu-card:hover img,
.hero-menu-card:focus-visible img {
  filter: saturate(1.2) contrast(1.08);
  transform: scale(1.06);
}

.hero-menu-card > div {
  grid-area: 1 / 1;
  z-index: 2;
  display: grid;
  align-content: end;
  gap: 10px;
  padding: clamp(18px, 3vw, 30px);
  background:
    linear-gradient(180deg, rgba(11, 8, 6, .06) 18%, rgba(11, 8, 6, .28) 54%, rgba(11, 8, 6, .9)),
    radial-gradient(circle at 18% 88%, rgba(8, 123, 22, .34), transparent 18rem);
}

.hero-menu-card span {
  color: var(--palm);
  font: 900 11px/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.hero-menu-card strong {
  max-width: 9ch;
  font-family: var(--display);
  font-size: clamp(40px, 5vw, 66px);
  line-height: .82;
  letter-spacing: -.055em;
  text-transform: uppercase;
}

.hero-menu-card p {
  max-width: 360px;
  margin: 0;
  color: rgba(255, 243, 223, .78);
  font-size: 17px;
  line-height: 1.35;
}

.menu-filter {
  border: 1px solid rgba(255, 242, 220, .18);
  background: rgba(255, 242, 220, .06);
  color: rgba(255, 242, 220, .74);
  cursor: pointer;
}

.menu-filter.is-active {
  background: var(--cream);
  color: var(--ink);
}

.visit-ticket {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  align-items: center;
  width: max-content;
  max-width: 100%;
  border: 1px solid rgba(255, 242, 220, .2);
  background: rgba(26, 11, 8, .72);
  backdrop-filter: blur(16px);
  padding: 12px 14px;
  font-family: var(--mono);
}

.visit-ticket span {
  color: var(--leaf-bright);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.visit-ticket strong,
.visit-ticket em {
  font-size: 12px;
  font-style: normal;
}

.food-menu-band {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  color: var(--cream);
}

.food-menu-band h2 {
  max-width: 680px;
}

.food-menu-band p:not(.site-kicker) {
  max-width: 560px;
  margin: 12px 0 0;
}

.food-menu-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: end;
  gap: 10px;
}

/* Full-bleed food hero cards */
.food-hero-card {
  position: relative;
  overflow: hidden;
  min-height: clamp(380px, 50vw, 520px);
  display: flex;
  align-items: flex-end;
  border-radius: 0;
}
.food-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.food-hero-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(0deg, rgba(13, 8, 6, .92) 0%, rgba(13, 8, 6, .6) 40%, rgba(13, 8, 6, .15) 70%, transparent 100%),
    linear-gradient(90deg, rgba(13, 8, 6, .5) 0%, transparent 60%);
}
.food-hero-card-light::after {
  background:
    linear-gradient(0deg, rgba(13, 8, 6, .88) 0%, rgba(13, 8, 6, .55) 38%, rgba(13, 8, 6, .1) 68%, transparent 100%),
    linear-gradient(270deg, rgba(13, 8, 6, .4) 0%, transparent 60%);
}
.food-hero-copy {
  position: relative;
  z-index: 2;
  max-width: 680px;
  padding: clamp(28px, 5vw, 56px) clamp(22px, 5vw, 72px);
}
.food-hero-card h2 {
  color: #fff;
  font-size: clamp(32px, 5vw, 60px);
  line-height: .96;
  letter-spacing: -.04em;
  margin: .3rem 0 .6rem;
  text-shadow: 0 2px 18px rgba(0,0,0,.4);
}
.food-hero-card p:not(.site-kicker) {
  color: rgba(255, 242, 220, .88);
  font-size: clamp(16px, 2vw, 20px);
  line-height: 1.5;
  margin: 0;
  text-shadow: 0 1px 8px rgba(0,0,0,.3);
}
.food-hero-card .site-kicker {
  color: var(--palm);
  text-shadow: 0 1px 6px rgba(0,0,0,.4);
}

.ticker {
  overflow: hidden;
  contain: paint;
  border-block: 1px solid rgba(255, 249, 238, .2);
  background: var(--paper);
  color: var(--ink);
}

.ticker-track {
  display: flex;
  width: max-content;
  animation: ticker-slide 32s linear infinite;
}

.ticker-group {
  display: flex;
  flex-wrap: nowrap;
  gap: 28px;
  padding: 14px 28px 14px 0;
}

.ticker span {
  font-family: var(--display);
  font-size: clamp(34px, 5vw, 72px);
  line-height: .82;
  letter-spacing: -.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

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

@media (prefers-reduced-motion: reduce) {
  .ticker-group[aria-hidden="true"] { display: none; }
  .ticker-track { width: 100%; }
  .ticker-group { flex-wrap: wrap; justify-content: center; width: 100%; }
}

.proof-wall {
  display: grid;
  grid-template-columns: 1.15fr .85fr 1fr;
  grid-auto-rows: minmax(290px, 38vw);
  gap: 10px;
  padding: 10px;
  background: var(--char);
}

.proof-card {
  position: relative;
  min-height: 280px;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 242, 220, .18);
}

.proof-food {
  grid-row: span 2;
}

.proof-room {
  grid-column: span 2;
}

.proof-card img,
.proof-card video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.08) contrast(1.04);
}

.proof-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 42%, rgba(0, 0, 0, .78));
}

.proof-card figcaption {
  position: absolute;
  z-index: 2;
  left: 18px;
  right: 18px;
  bottom: 18px;
}

.proof-card strong {
  display: block;
  margin-top: 8px;
  font-family: var(--display);
  font-size: clamp(24px, 3vw, 46px);
  line-height: .88;
  letter-spacing: -.06em;
  text-transform: uppercase;
}

.proof-vibe {
  isolation: isolate;
  background:
    radial-gradient(circle at 76% 18%, rgba(245, 169, 29, .24), transparent 16rem),
    linear-gradient(135deg, #0a0403, #2a0905 64%, #050202);
}

.proof-vibe::before {
  content: "";
  position: absolute;
  inset: -18%;
  z-index: 2;
  pointer-events: none;
  opacity: .2;
  background:
    repeating-linear-gradient(105deg, transparent 0 24px, rgba(255, 242, 220, .5) 25px 26px),
    linear-gradient(90deg, transparent, rgba(237, 73, 38, .38), transparent);
  mix-blend-mode: screen;
  transform: translateX(-18%) rotate(-6deg);
  animation: vibe-scan 9s ease-in-out infinite;
}

.proof-vibe::after {
  z-index: 3;
  background:
    linear-gradient(180deg, rgba(8, 3, 2, .08), rgba(8, 3, 2, .42) 45%, rgba(8, 3, 2, .9)),
    radial-gradient(circle at 18% 88%, rgba(8, 123, 22, .36), transparent 20rem);
}

.proof-vibe figcaption {
  z-index: 4;
}

.vibe-collage,
.vibe-room {
  position: absolute;
  inset: 0;
}

.vibe-room {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .56;
  filter: saturate(1.18) contrast(1.12) brightness(.78);
  transform: scale(1.08);
  animation: vibe-room-pan 15s ease-in-out infinite alternate;
}

.vibe-frame {
  position: absolute;
  z-index: 1;
  overflow: hidden;
  border: 1px solid rgba(255, 242, 220, .36);
  background: #120806;
  box-shadow: 0 24px 62px rgba(0, 0, 0, .42);
}

.vibe-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.16) contrast(1.08);
}

.vibe-frame-main {
  left: 5%;
  top: 9%;
  width: 46%;
  height: 45%;
  transform: rotate(-5deg);
}

.vibe-frame-heat {
  right: 4%;
  top: 10%;
  width: 45%;
  height: 38%;
  transform: rotate(5deg);
}

.vibe-frame-room {
  left: 18%;
  right: 6%;
  bottom: 17%;
  height: 32%;
  transform: rotate(-1deg);
}

.vibe-frame-main img,
.vibe-frame-heat img {
  animation: vibe-food-pulse 7s ease-in-out infinite alternate;
}

.vibe-band {
  position: absolute;
  z-index: 3;
  right: -28px;
  top: 48%;
  padding: 10px 42px 10px 18px;
  background: var(--pepper);
  color: var(--cream);
  box-shadow: 0 14px 34px rgba(237, 73, 38, .34);
  font: 900 11px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  transform: rotate(-6deg);
}

.vibe-sparks {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.vibe-sparks span {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--palm);
  box-shadow: 0 0 22px rgba(245, 169, 29, .95);
  animation: vibe-spark 5s ease-in-out infinite;
}

.vibe-sparks span:nth-child(1) {
  left: 13%;
  top: 17%;
}

.vibe-sparks span:nth-child(2) {
  right: 18%;
  top: 34%;
  animation-delay: -1.5s;
}

.vibe-sparks span:nth-child(3) {
  left: 58%;
  bottom: 28%;
  animation-delay: -3s;
}

@keyframes vibe-room-pan {
  from {
    transform: scale(1.08) translate3d(-1.5%, 0, 0);
  }

  to {
    transform: scale(1.13) translate3d(1.5%, -1%, 0);
  }
}

@keyframes vibe-food-pulse {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.06);
  }
}

@keyframes vibe-scan {
  0%,
  100% {
    transform: translateX(-18%) rotate(-6deg);
  }

  50% {
    transform: translateX(16%) rotate(-6deg);
  }
}

@keyframes vibe-spark {
  0%,
  100% {
    opacity: .25;
    transform: translateY(0) scale(.8);
  }

  50% {
    opacity: 1;
    transform: translateY(-12px) scale(1.25);
  }
}

.plate-lineup {
  position: relative;
  z-index: 1;
  padding: clamp(56px, 7vw, 108px) clamp(16px, 5vw, 72px);
  background:
    radial-gradient(circle at 18% 16%, rgba(237, 73, 38, .08), transparent 20rem),
    linear-gradient(180deg, #fff7ee 0%, #f6ebda 100%);
  color: var(--ink);
}

.plate-lineup-head {
  display: grid;
  gap: 10px;
  margin-bottom: clamp(24px, 4vw, 38px);
}

.plate-lineup-head h2 {
  margin: 0;
  max-width: 760px;
  font-family: var(--display);
  font-size: clamp(34px, 6vw, 72px);
  line-height: .9;
  letter-spacing: -.06em;
  text-transform: uppercase;
}

.plate-lineup-head p:last-child {
  max-width: 760px;
  margin: 0;
  color: #5f4635;
  line-height: 1.65;
}

.plate-lineup-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.plate-card {
  position: relative;
  min-height: 260px;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(28, 10, 6, .16);
  background: #120806;
  box-shadow: 0 24px 64px rgba(37, 11, 7, .13);
}

.plate-card-feature {
  grid-column: span 2;
  grid-row: span 2;
  min-height: 540px;
}

.plate-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.12) contrast(1.06);
  transform: scale(1.02);
  transition: transform .8s ease, filter .8s ease;
}

.plate-card:hover img {
  filter: saturate(1.2) contrast(1.1);
  transform: scale(1.07);
}

.plate-card::before {
  content: "";
  position: absolute;
  inset: 12px;
  z-index: 2;
  pointer-events: none;
  border: 1px solid rgba(255, 242, 220, .16);
}

.plate-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(18, 8, 6, .02) 18%, rgba(18, 8, 6, .28) 54%, rgba(18, 8, 6, .9)),
    radial-gradient(circle at 18% 88%, rgba(8, 123, 22, .28), transparent 18rem);
}

.plate-card figcaption {
  position: absolute;
  z-index: 4;
  left: 18px;
  right: 18px;
  bottom: 18px;
  color: var(--cream);
}

.plate-card figcaption strong {
  display: block;
  margin-top: 8px;
  font-family: var(--display);
  font-size: clamp(22px, 3vw, 38px);
  line-height: .9;
  letter-spacing: -.05em;
  text-transform: uppercase;
}

.plate-card figcaption span,
.plate-map span,
.plate-stamp,
.plate-ticket b,
.plate-pair span,
.plate-ribbon {
  font: 900 11px/1 var(--mono);
  letter-spacing: .11em;
  text-transform: uppercase;
}

.plate-map,
.plate-ticket,
.plate-stamp,
.plate-meter,
.plate-pair,
.plate-ribbon,
.plate-dots,
.plate-room-lines {
  position: absolute;
  z-index: 3;
  pointer-events: none;
}

.plate-map {
  left: 18px;
  top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 58%;
}

.plate-map span {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  background: rgba(255, 242, 220, .9);
  color: var(--ink);
  box-shadow: 0 10px 24px rgba(13, 8, 9, .18);
}

.plate-ticket {
  right: 20px;
  top: 20px;
  display: grid;
  gap: 5px;
  width: min(34%, 210px);
  padding: 13px;
  background: rgba(13, 8, 9, .82);
  color: var(--cream);
  border: 1px solid rgba(255, 242, 220, .22);
  transform: rotate(3deg);
  box-shadow: 0 16px 34px rgba(13, 8, 9, .26);
}

.plate-ticket small {
  color: rgba(255, 242, 220, .74);
  font-weight: 900;
  line-height: 1.25;
  text-transform: uppercase;
}

.plate-stamp {
  top: 16px;
  right: 16px;
  padding: 9px 10px;
  background: var(--palm);
  color: var(--ink);
  transform: rotate(4deg);
  box-shadow: 0 12px 26px rgba(245, 169, 29, .26);
}

.plate-meter {
  left: 16px;
  right: 16px;
  top: 16px;
  height: 6px;
  background: rgba(255, 242, 220, .24);
}

.plate-meter span {
  display: block;
  width: 72%;
  height: 100%;
  background: linear-gradient(90deg, var(--palm), var(--pepper));
}

.plate-pair {
  inset: 14px 14px auto auto;
  display: grid;
  gap: 6px;
}

.plate-pair span {
  display: inline-flex;
  justify-content: center;
  min-width: 72px;
  padding: 8px 10px;
  background: rgba(255, 242, 220, .88);
  color: var(--ink);
  transform: rotate(-3deg);
}

.plate-pair span:nth-child(2) {
  margin-left: 16px;
  background: var(--pepper);
  color: var(--cream);
}

.plate-pair span:nth-child(3) {
  margin-left: 5px;
  background: rgba(13, 8, 9, .82);
  color: var(--cream);
}

.plate-ribbon {
  top: 20px;
  left: -38px;
  min-width: 158px;
  padding: 9px 20px;
  text-align: center;
  background: var(--pepper);
  color: var(--cream);
  transform: rotate(-38deg);
  box-shadow: 0 12px 28px rgba(237, 73, 38, .26);
}

.plate-dots {
  top: 18px;
  right: 18px;
  display: grid;
  grid-template-columns: repeat(2, 12px);
  gap: 7px;
}

.plate-dots span {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--palm);
  box-shadow: 0 0 18px rgba(245, 169, 29, .65);
}

.plate-room-lines {
  top: 18px;
  left: 18px;
  display: grid;
  gap: 8px;
}

.plate-room-lines span {
  display: block;
  width: 82px;
  height: 8px;
  background: rgba(255, 242, 220, .82);
  box-shadow: 0 10px 24px rgba(13, 8, 9, .16);
}

.plate-room-lines span:nth-child(2) {
  width: 132px;
  background: var(--palm);
}

.plate-room-lines span:nth-child(3) {
  width: 104px;
  background: var(--pepper);
}

.plate-card-table img {
  object-position: center;
}

.plate-card-first img {
  object-position: 50% 45%;
}

.plate-card-swallow img,
.plate-card-fish img {
  object-position: center;
}

.plate-card-snack img {
  object-position: 70% 28%;
}

.plate-card-inside img {
  object-position: center 54%;
}

.feature-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 10px;
  border-block: 1px solid rgba(255, 242, 220, .18);
  background: var(--char);
  color: var(--cream);
}

.feature-links a {
  position: relative;
  display: grid;
  gap: 10px;
  min-height: clamp(300px, 36vw, 460px);
  align-content: end;
  padding: clamp(18px, 4vw, 44px);
  overflow: hidden;
  border: 1px solid rgba(255, 242, 220, .16);
  background: #120806;
  box-shadow: 0 22px 70px rgba(0, 0, 0, .18);
}

.feature-links a::before,
.feature-links a::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.feature-links a::before {
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(13, 8, 9, .08) 0%, rgba(13, 8, 9, .18) 36%, rgba(13, 8, 9, .86) 100%),
    radial-gradient(circle at 20% 86%, rgba(8, 123, 22, .4), transparent 17rem);
}

.feature-links a::after {
  z-index: 2;
  inset: 14px;
  border: 1px solid rgba(255, 242, 220, .18);
}

.feature-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.08) contrast(1.08);
  transform: scale(1.02);
  transition: transform .7s ease, filter .7s ease;
}

.feature-card:hover img,
.feature-card:focus-visible img {
  filter: saturate(1.2) contrast(1.12);
  transform: scale(1.08);
}

.feature-entertainment img {
  object-position: 48% 46%;
}

.feature-catering img {
  object-position: center;
}

.feature-artists img {
  object-position: center 52%;
}

.feature-links span {
  position: relative;
  z-index: 3;
  width: fit-content;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 9px;
  background: var(--leaf);
  color: var(--cream);
  font: 900 11px/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.feature-links strong {
  position: relative;
  z-index: 3;
  display: block;
  font-family: var(--display);
  max-width: 10ch;
  color: var(--cream);
  text-shadow: 0 8px 24px rgba(0, 0, 0, .38);
  font-size: clamp(34px, 4.2vw, 62px);
  line-height: .85;
  letter-spacing: -.055em;
  text-transform: uppercase;
  text-wrap: balance;
}

.amala-special {
  position: relative;
  z-index: 1;
  padding: clamp(64px, 8vw, 118px) clamp(16px, 5vw, 72px);
  background:
    radial-gradient(circle at 10% 18%, rgba(246, 167, 25, .26), transparent 28rem),
    radial-gradient(circle at 86% 12%, rgba(8, 123, 22, .24), transparent 30rem),
    linear-gradient(135deg, #170806 0%, #3b0e07 54%, #0d0809 100%);
  color: var(--cream);
  border-block: 1px solid rgba(255, 242, 220, .18);
}

.special-shell {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(22px, 4vw, 42px);
  align-items: end;
  margin-bottom: clamp(28px, 5vw, 54px);
}

.special-copy {
  max-width: 960px;
}

.special-copy h2 {
  margin: .18em 0 .24em;
  font-family: var(--display);
  font-size: clamp(42px, 8vw, 112px);
  line-height: .82;
  letter-spacing: -.07em;
  text-transform: uppercase;
  text-wrap: balance;
}

.special-lede {
  max-width: 760px;
  color: rgba(255, 242, 220, .78);
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.42;
}

.special-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.special-offer-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  width: 100%;
  min-width: 0;
}

.special-price-card {
  display: grid;
  gap: 12px;
  min-width: 0;
  min-height: 300px;
  align-content: end;
  justify-items: start;
  text-align: left;
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid rgba(255, 242, 220, .22);
  border-radius: 34px;
  background:
    linear-gradient(145deg, rgba(255, 242, 220, .16), rgba(245, 169, 29, .18)),
    rgba(13, 8, 9, .56);
  box-shadow: 0 28px 80px rgba(0, 0, 0, .28);
  overflow: hidden;
}

.special-price-card span,
.addon-card span {
  color: var(--palm);
  font: 900 12px/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.special-price-card strong {
  min-width: 0;
  max-width: 100%;
  font-family: var(--display);
  font-size: clamp(56px, 8vw, 104px);
  line-height: .86;
  letter-spacing: -.065em;
  overflow-wrap: normal;
  text-wrap: balance;
}

.special-price-card .special-date-strong {
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: .96;
  letter-spacing: -.04em;
}

.special-price-card .special-status-strong {
  max-width: 16ch;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: .96;
  letter-spacing: -.04em;
}

.special-price-card small {
  min-width: 0;
  max-width: 100%;
  color: rgba(255, 242, 220, .78);
  font-weight: 900;
  font-size: .98rem;
  line-height: 1.34;
  overflow-wrap: anywhere;
}

.special-details-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr 1.1fr;
  gap: 14px;
  width: 100%;
  min-width: 0;
}

.special-panel {
  min-width: 0;
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid rgba(255, 242, 220, .18);
  border-radius: 28px;
  background: rgba(255, 242, 220, .08);
  backdrop-filter: blur(14px);
  overflow: hidden;
}

.special-panel ul {
  display: grid;
  gap: 10px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.special-panel li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 242, 220, .14);
  color: rgba(255, 242, 220, .82);
  line-height: 1.35;
}

.special-panel li span,
.special-panel li strong,
.special-how p,
.special-how address,
.follow-line {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.special-panel li strong {
  text-align: right;
  white-space: normal;
}

.special-panel li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.special-panel li strong,
.special-how strong {
  color: var(--cream);
}

.special-how p,
.special-how address,
.follow-line,
.addon-card small {
  color: rgba(255, 242, 220, .78);
  line-height: 1.55;
}

.special-how address {
  margin-top: 16px;
  font-style: normal;
  font-weight: 900;
}

.addon-card {
  display: grid;
  gap: 5px;
  margin-top: 18px;
  padding: 16px;
  border-radius: 18px;
  background: rgba(245, 169, 29, .14);
  border: 1px solid rgba(245, 169, 29, .32);
}

.addon-card strong {
  font-size: 1.2rem;
}

.page-hero {
  min-height: 92svh;
  display: grid;
  align-items: end;
  overflow: hidden;
  background: var(--char);
}

.page-hero > img,
.page-hero > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(13, 8, 9, .92), rgba(37, 11, 7, .42), rgba(13, 8, 9, .82)),
    linear-gradient(180deg, rgba(13, 8, 9, .32), rgba(13, 8, 9, .92));
}

.page-hero-copy {
  position: relative;
  z-index: 2;
  width: 100%;
  min-width: 0;
  max-width: 980px;
  padding: clamp(98px, 11vw, 150px) clamp(18px, 5vw, 72px) clamp(34px, 6vw, 70px);
}

.page-hero h1 {
  max-width: 980px;
}

.page-panel {
  padding: clamp(70px, 8vw, 120px) clamp(16px, 5vw, 72px);
  background: var(--paper);
  color: var(--ink);
}

.drinks-hero h1 {
  max-width: 1100px;
  font-size: clamp(48px, 7vw, 108px);
}

.menu-hero h1 {
  max-width: 1120px;
  font-size: clamp(46px, 7vw, 108px);
}

.native-menu-page,
.drink-menu-page {
  padding: clamp(52px, 7vw, 104px) clamp(16px, 5vw, 72px);
  background:
    radial-gradient(circle at 12% 8%, rgba(8, 123, 22, .18), transparent 26rem),
    radial-gradient(circle at 86% 18%, rgba(246, 167, 25, .2), transparent 28rem),
    linear-gradient(180deg, #fff7eb 0%, #f4e3c8 100%);
  color: var(--ink);
}

.native-menu-page {
  background:
    radial-gradient(circle at 12% 8%, rgba(8, 123, 22, .18), transparent 26rem),
    radial-gradient(circle at 88% 18%, rgba(246, 167, 25, .2), transparent 28rem),
    linear-gradient(180deg, #fff8ed 0%, #f4e4c9 100%);
}

.menu-photo-picks {
  margin-top: clamp(26px, 4vw, 44px);
  display: grid;
  gap: 18px;
}

.menu-picks-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.menu-pick-card {
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(41, 19, 11, .14);
  background: rgba(255, 248, 237, .85);
}

.menu-pick-card img {
  display: block;
  width: 100%;
  height: 240px;
  object-fit: cover;
}

.menu-pick-card figcaption {
  display: grid;
  gap: 10px;
  padding: 16px;
}

.menu-pick-card strong {
  display: block;
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(24px, 2vw, 32px);
  line-height: .92;
  text-transform: uppercase;
}

.menu-pick-card p {
  margin: 0;
  color: rgba(28, 10, 6, .74);
  line-height: 1.42;
}

.menu-pick-card small {
  color: rgba(28, 10, 6, .56);
  font: 700 11px/1.35 var(--mono);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.drink-menu-intro,
.drink-feature,
.drink-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, .62fr);
  gap: clamp(18px, 4vw, 44px);
  align-items: end;
}

.drink-menu-intro h2,
.drink-feature h2,
.drink-section-head h2,
.drink-cta h2 {
  font-size: clamp(34px, 5vw, 70px);
  line-height: .9;
  color: var(--ink);
}

.drink-menu-intro > p,
.drink-card p,
.drink-list small {
  color: rgba(27, 13, 7, .7);
  line-height: 1.5;
}

.drink-jump-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: clamp(24px, 4vw, 38px) 0;
  padding: 10px;
  border: 1px solid rgba(27, 13, 7, .13);
  background: rgba(255, 250, 240, .68);
}

.drink-jump-nav a {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  background: rgba(8, 123, 22, .09);
  color: var(--leaf);
  font: 900 11px/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.drink-feature {
  margin-bottom: clamp(34px, 5vw, 64px);
  padding: clamp(22px, 4vw, 38px);
  border: 1px solid rgba(8, 123, 22, .18);
  background:
    linear-gradient(135deg, rgba(8, 123, 22, .12), rgba(246, 167, 25, .18)),
    rgba(255, 250, 240, .72);
}

.happy-hour-grid,
.drink-grid,
.drink-two-column {
  display: grid;
  gap: 10px;
}

.happy-hour-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.happy-hour-grid article,
.drink-card,
.drink-panel,
.drink-list article {
  border: 1px solid rgba(27, 13, 7, .14);
  background: rgba(255, 250, 240, .78);
}

.happy-hour-grid article,
.drink-card,
.drink-list article {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: start;
  padding: 14px;
}

.happy-hour-grid span,
.drink-card h3,
.drink-list span {
  color: var(--leaf);
  font: 900 13px/1.15 var(--mono);
  letter-spacing: .03em;
  text-transform: uppercase;
}

.happy-hour-grid strong,
.drink-card strong,
.drink-list em {
  flex: 0 0 auto;
  color: var(--pepper);
  font: 900 15px/1 var(--mono);
  font-style: normal;
}

.drink-section {
  scroll-margin-top: 92px;
  margin-top: clamp(34px, 5vw, 66px);
}

.drink-section-head {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.drink-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.drink-card {
  min-height: 148px;
  align-content: space-between;
}

.drink-card h3 {
  margin-bottom: 8px;
  font-size: clamp(14px, 1.2vw, 18px);
  letter-spacing: 0;
}

.drink-card p {
  margin: 0;
  font-size: 15px;
}

.compact-drink-grid .drink-card {
  min-height: 82px;
  align-items: center;
}

.drink-two-column {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.drink-panel {
  padding: clamp(18px, 3vw, 28px);
}

.drink-list {
  display: grid;
  gap: 8px;
}

.drink-list article {
  flex-wrap: wrap;
}

.drink-list small {
  flex: 0 0 100%;
  font-weight: 800;
}

.drink-cta {
  margin-top: clamp(42px, 6vw, 78px);
  padding: clamp(22px, 4vw, 38px);
  border: 1px solid rgba(255, 242, 220, .18);
  background: linear-gradient(135deg, #170806, #2b0d06 58%, #083f11);
  color: var(--cream);
}

.drink-cta h2 {
  color: var(--cream);
}

.happy-hour-note,
.section-note {
  margin: 14px 0 0;
  max-width: 780px;
  font-size: 15px;
  line-height: 1.45;
}

.food-menu-section {
  scroll-margin-top: 92px;
  margin-top: clamp(34px, 5vw, 66px);
}

.food-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.food-card {
  display: grid;
  gap: 10px;
  min-height: 250px;
  align-content: start;
  padding: 18px;
  border: 1px solid rgba(27, 13, 7, .14);
  background:
    linear-gradient(180deg, rgba(255, 250, 240, .88), rgba(255, 250, 240, .66)),
    rgba(255, 250, 240, .78);
  box-shadow: 0 18px 48px rgba(27, 13, 7, .08);
}

.food-card span {
  width: fit-content;
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  padding: 0 9px;
  background: rgba(8, 123, 22, .11);
  color: var(--leaf);
  font: 900 11px/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.food-card h3 {
  color: var(--ink);
  font-size: clamp(24px, 2.5vw, 34px);
  line-height: .92;
  letter-spacing: -.04em;
}

.food-card p {
  margin: 0;
  color: rgba(27, 13, 7, .7);
  line-height: 1.45;
}

.food-card strong {
  align-self: end;
  width: fit-content;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  background: var(--palm);
  color: var(--ink);
  font: 900 16px/1 var(--mono);
}

.food-card small {
  color: #6b4a33;
  font-weight: 900;
  line-height: 1.35;
}

.compact-food-grid .food-card {
  min-height: 168px;
}

.dessert-preview-grid .food-card-note {
  min-height: 190px;
}

.food-card-note strong {
  background: rgba(8, 123, 22, .14);
}

.compact-proof {
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-rows: minmax(360px, 44vw);
}

.artist-cta {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 18px;
  padding: clamp(48px, 8vw, 110px) clamp(18px, 5vw, 72px);
  background:
    radial-gradient(circle at 14% 30%, rgba(237, 73, 38, .18), transparent 30%),
    var(--deep-red);
}

.artist-cta > div {
  max-width: 760px;
}

.artist-cta p {
  max-width: 680px;
  margin: 10px 0 0;
  color: rgba(255, 242, 220, .82);
  font-size: clamp(17px, 2vw, 24px);
  line-height: 1.35;
}

.artist-cta-button {
  min-width: min(100%, 260px);
  min-height: 58px;
}

.map-band {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  min-height: 84svh;
  border-top: 1px solid rgba(255, 242, 220, .18);
  background: var(--paper);
}

.map-frame {
  position: relative;
  min-height: 560px;
  overflow: hidden;
  background: #0e1d10;
}

.route-map-live {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #0e1d10;
}

.route-map-live .maplibregl-ctrl-attrib {
  font-size: 10px;
  opacity: .75;
}

.mm-map-pin {
  position: relative;
  width: 22px;
  height: 22px;
}

.mm-map-pin-dot {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 16px;
  height: 16px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--hot, #ff4d00);
  border: 3px solid #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .45);
}

.mm-map-pin-ring {
  position: absolute;
  left: 50%;
  bottom: -7px;
  width: 30px;
  height: 30px;
  transform: translateX(-50%);
  border-radius: 50%;
  border: 2px solid var(--hot, #ff4d00);
  animation: mm-pin-pulse 2.2s ease-out infinite;
}

@keyframes mm-pin-pulse {
  0% { transform: translateX(-50%) scale(.55); opacity: .9; }
  100% { transform: translateX(-50%) scale(1.7); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .mm-map-pin-ring { animation: none; opacity: .5; }
}

.mm-map-pin-label {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 6px 10px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cream, #f4ead8);
  background: rgba(8, 6, 4, .88);
  border: 1px solid rgba(69, 168, 45, .55);
}

.route-map-tag {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 3;
  padding: 7px 12px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cream);
  background: rgba(8, 6, 4, .82);
  border: 1px solid rgba(69, 168, 45, .55);
  box-shadow: 0 0 14px rgba(69, 168, 45, .35);
  pointer-events: none;
}

.visit-map {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 560px;
}

.visit-map .leaflet-tile {
  filter: saturate(.94) contrast(1.03);
}

.visit-map .leaflet-control-attribution {
  z-index: 3;
  font-family: var(--body);
  font-size: 10px;
}

.mm-map-marker {
  display: grid;
  place-items: center;
  width: 88px;
  height: 80px;
  border: 3px solid var(--cream);
  border-radius: 24px;
  background: rgba(13, 8, 9, .9);
  padding: 6px 7px;
  overflow: hidden;
  box-shadow: 0 20px 46px rgba(28, 10, 6, .34);
}

.mm-map-marker img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(13, 8, 9, .18));
}

.map-click-target {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
}

.map-click-target:focus-visible {
  outline: 3px solid var(--palm);
  outline-offset: -8px;
}

.find-note {
  max-width: 720px;
  margin: 0;
  color: rgba(28, 10, 6, .72);
  font-size: clamp(17px, 2vw, 24px);
  line-height: 1.35;
}

.performer-page {
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  background: var(--paper);
  color: var(--ink);
}

.performer-media {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-content: end;
  overflow: hidden;
  padding: clamp(98px, 10vw, 140px) clamp(18px, 5vw, 70px) clamp(34px, 6vw, 70px);
  color: var(--cream);
}

.performer-media img,
.performer-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.performer-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13, 8, 9, .1), rgba(13, 8, 9, .88));
}

.performer-media > div {
  position: relative;
  z-index: 2;
}

.performer-hero-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  max-width: 520px;
  margin-top: 24px;
}

.performer-panel {
  display: grid;
  align-content: center;
  gap: 28px;
  padding: clamp(28px, 6vw, 84px);
}

.performer-media h1 {
  font-size: clamp(52px, 5.6vw, 86px);
}

.performer-invite {
  display: grid;
  gap: 10px;
  max-width: 720px;
}

.performer-invite .site-kicker {
  color: var(--leaf);
}

.performer-invite h2 {
  margin: 0;
  font-size: clamp(34px, 4.2vw, 62px);
  line-height: .95;
}

.performer-invite p {
  max-width: 660px;
  margin: 0;
  color: rgba(41, 19, 11, .76);
  font-size: clamp(17px, 1.8vw, 22px);
  line-height: 1.4;
}


.menu-lab {
  padding: clamp(70px, 8vw, 120px) clamp(16px, 4vw, 60px);
  background:
    linear-gradient(90deg, rgba(245, 169, 29, .14), transparent 42%),
    linear-gradient(180deg, #210a06, #120807);
}

.section-head {
  display: grid;
  grid-template-columns: minmax(0, .65fr) minmax(0, 1.35fr);
  gap: 18px;
  align-items: end;
  margin-bottom: 28px;
}

.menu-shell {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 12px;
}

.menu-rail {
  position: sticky;
  top: 88px;
  align-self: start;
  display: grid;
  gap: 8px;
}

.menu-filter {
  justify-content: flex-start;
  padding: 0 12px;
}

.menu-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.menu-card {
  position: relative;
  min-height: 250px;
  overflow: hidden;
  border: 1px solid rgba(255, 242, 220, .18);
  background:
    linear-gradient(180deg, rgba(255, 242, 220, .08), rgba(255, 242, 220, .025)),
    var(--char-soft);
  padding: 18px;
}

.menu-card.is-hidden {
  display: none;
}

.menu-card p {
  max-width: 290px;
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.45;
}

.menu-card strong {
  position: absolute;
  right: 18px;
  bottom: 16px;
  font: 900 13px/1 var(--mono);
  color: var(--palm);
}

.catering-option-card {
  min-height: 360px;
  display: grid;
  align-content: end;
  padding: 0;
  background: #120806;
  box-shadow: 0 22px 70px rgba(0, 0, 0, .18);
}

.catering-option-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.08) contrast(1.08);
  transform: scale(1.01);
  transition: transform .7s ease, filter .7s ease;
}

.catering-option-card::before,
.catering-option-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.catering-option-card::before {
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(13, 8, 9, .05) 0%, rgba(13, 8, 9, .28) 42%, rgba(13, 8, 9, .9) 100%),
    radial-gradient(circle at 18% 88%, rgba(8, 123, 22, .44), transparent 17rem);
}

.catering-option-card::after {
  z-index: 2;
  inset: 14px;
  border: 1px solid rgba(255, 242, 220, .18);
}

.catering-option-card:hover img,
.catering-option-card:focus-within img {
  filter: saturate(1.16) contrast(1.1);
  transform: scale(1.06);
}

.catering-option-card > div {
  position: relative;
  z-index: 3;
  display: grid;
  gap: 10px;
  padding: clamp(18px, 3vw, 28px);
}

.catering-option-card span {
  color: var(--palm);
  text-shadow: 0 3px 14px rgba(0, 0, 0, .4);
}

.catering-option-card h3 {
  max-width: 11ch;
  color: var(--cream);
  text-shadow: 0 8px 24px rgba(0, 0, 0, .46);
}

.catering-option-card p {
  max-width: 320px;
  margin: 0;
  color: rgba(255, 242, 220, .86);
  font-weight: 900;
  text-shadow: 0 4px 16px rgba(0, 0, 0, .44);
}

.catering-native {
  position: relative;
  z-index: 1;
  padding: clamp(58px, 8vw, 108px) clamp(16px, 5vw, 72px);
  background:
    radial-gradient(circle at 12% 8%, rgba(8, 123, 22, .18), transparent 26rem),
    radial-gradient(circle at 88% 10%, rgba(246, 167, 25, .2), transparent 30rem),
    linear-gradient(180deg, #fff8ed 0%, #f1dfbf 100%);
  color: var(--ink);
}

.catering-native-dark {
  border-block: 1px solid rgba(255, 242, 220, .18);
  background:
    radial-gradient(circle at 12% 12%, rgba(246, 167, 25, .2), transparent 26rem),
    radial-gradient(circle at 86% 18%, rgba(8, 123, 22, .3), transparent 30rem),
    linear-gradient(135deg, #150706 0%, #2b0d06 54%, #052b0b 100%);
  color: var(--cream);
}

.catering-native .section-head {
  margin-bottom: clamp(24px, 4vw, 42px);
}

.catering-native .site-kicker {
  color: var(--leaf);
}

.catering-native-dark .site-kicker {
  color: var(--leaf-bright);
}

.catering-native h2 {
  max-width: 980px;
  color: inherit;
  font-size: clamp(38px, 6vw, 86px);
}

.bundle-grid,
.monthly-special-grid {
  display: grid;
  gap: 12px;
}

.bundle-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tray-category-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.meal-prep-grid {
  display: grid;
  grid-template-columns: 1.15fr repeat(2, minmax(0, .925fr));
  gap: 12px;
  margin-bottom: clamp(18px, 3vw, 34px);
}

.bundle-card,
.monthly-special-card,
.meal-prep-card,
.tray-category-card {
  min-width: 0;
  border: 1px solid rgba(27, 13, 7, .14);
  box-shadow: 0 24px 70px rgba(27, 13, 7, .08);
}

.catering-tray-menu {
  background:
    radial-gradient(circle at 20% 18%, rgba(200, 90, 29, .14), transparent 26rem),
    radial-gradient(circle at 82% 12%, rgba(8, 123, 22, .14), transparent 30rem),
    linear-gradient(180deg, #f7ead0 0%, #fff8ed 100%);
}

.catering-paths {
  background:
    radial-gradient(circle at 12% 10%, rgba(246, 167, 25, .2), transparent 28rem),
    radial-gradient(circle at 88% 18%, rgba(8, 123, 22, .2), transparent 28rem),
    linear-gradient(180deg, #fffaf0 0%, #f3dfbb 100%);
}

.buyer-path-grid {
  display: grid;
  grid-template-columns: 1.12fr repeat(2, minmax(0, .94fr));
  gap: 12px;
}

.buyer-path-card {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 14px;
  min-height: 360px;
  padding: clamp(18px, 2.6vw, 30px);
  border: 1px solid rgba(27, 13, 7, .14);
  background: rgba(255, 250, 240, .9);
  box-shadow: 0 24px 70px rgba(27, 13, 7, .08);
}

.buyer-path-card-featured {
  grid-row: span 2;
  min-height: 0;
  background:
    linear-gradient(145deg, rgba(6, 53, 15, .98), rgba(31, 9, 5, .98)),
    var(--ink);
  color: #fffaf0;
}

.buyer-path-card span {
  color: var(--leaf);
  font: 900 12px/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.buyer-path-card-featured span {
  color: var(--leaf-bright);
}

.buyer-path-card h3 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(27px, 3vw, 46px);
  line-height: .94;
}

.buyer-path-card-featured h3 {
  color: #fffaf0;
  font-size: clamp(38px, 5vw, 74px);
}

.buyer-path-card p {
  margin: 0;
  color: rgba(27, 13, 7, .78);
  font-weight: 900;
  line-height: 1.45;
}

.buyer-path-card-featured p {
  color: rgba(255, 250, 240, .8);
}

.buyer-path-card ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.buyer-path-card li {
  display: flex;
  gap: 10px;
  color: rgba(27, 13, 7, .76);
  font-weight: 900;
  line-height: 1.35;
}

.buyer-path-card-featured li {
  color: rgba(255, 250, 240, .82);
}

.buyer-path-card li::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-top: .42em;
  border-radius: 999px;
  background: var(--leaf);
}

.buyer-path-card-featured li::before {
  background: var(--leaf-bright);
}

.buyer-path-card strong {
  align-self: end;
  color: var(--pepper);
  font: 900 12px/1.25 var(--mono);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.buyer-path-card-featured strong {
  color: var(--leaf-bright);
}

.tray-build-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: clamp(18px, 3vw, 34px);
}

.tray-build-strip article {
  min-width: 0;
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 18px;
  border: 1px solid rgba(27, 13, 7, .13);
  background: rgba(255, 250, 240, .76);
}

.tray-build-strip span {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  background: var(--leaf);
  color: #fffaf0;
  font: 900 13px/1 var(--mono);
}

.tray-build-strip strong {
  color: var(--ink);
  font-size: 18px;
  line-height: 1.1;
}

.tray-build-strip p {
  margin: 0;
  color: rgba(27, 13, 7, .74);
  font-weight: 900;
  line-height: 1.4;
}

.tray-category-card {
  display: grid;
  align-content: start;
  gap: 14px;
  min-height: 330px;
  padding: clamp(18px, 2.5vw, 26px);
  background: rgba(255, 250, 240, .86);
}

.meal-prep-card {
  display: grid;
  align-content: start;
  gap: 13px;
  min-height: 250px;
  padding: clamp(18px, 2.4vw, 28px);
  background: #fffaf0;
}

.meal-prep-card-featured {
  background: var(--ink);
  color: #fffaf0;
}

.meal-prep-card span,
.tray-category-card span {
  color: var(--leaf);
  font: 900 12px/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.meal-prep-card-featured span {
  color: var(--leaf-bright);
}

.meal-prep-card h3,
.tray-category-card h3 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(28px, 3vw, 44px);
  line-height: .94;
}

.meal-prep-card-featured h3 {
  color: #fffaf0;
}

.meal-prep-card p {
  margin: 0;
  color: rgba(27, 13, 7, .78);
  font-weight: 800;
  line-height: 1.45;
}

.meal-prep-card-featured p {
  color: rgba(255, 250, 240, .78);
}

.meal-prep-card strong {
  align-self: end;
  color: var(--pepper);
  font: 900 13px/1.2 var(--mono);
  text-transform: uppercase;
}

.meal-prep-card-featured strong {
  color: var(--leaf-bright);
}

.tray-category-card ul {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tray-category-card li {
  color: rgba(27, 13, 7, .78);
  font-weight: 900;
  line-height: 1.3;
}

.tray-price-list {
  display: grid;
  gap: 10px;
  margin: 0;
}

.tray-price-item {
  display: grid;
  gap: 4px;
  padding: 10px 0;
  border-top: 1px solid rgba(27, 13, 7, .12);
}

.tray-price-item:first-child {
  border-top: 0;
  padding-top: 0;
}

.tray-price-item dt {
  color: var(--ink);
  font-weight: 1000;
  line-height: 1.2;
}

.tray-price-item dd {
  margin: 0;
  color: rgba(27, 13, 7, .72);
  font: 900 13px/1.35 var(--mono);
}

.bundle-card {
  display: grid;
  align-content: start;
  gap: 18px;
  min-height: 520px;
  padding: clamp(18px, 3vw, 28px);
  background:
    linear-gradient(180deg, rgba(255, 250, 240, .92), rgba(255, 250, 240, .76)),
    rgba(255, 250, 240, .82);
}

.bundle-card-featured {
  background:
    linear-gradient(145deg, rgba(8, 123, 22, .16), rgba(246, 167, 25, .18)),
    rgba(255, 250, 240, .88);
  border-color: rgba(8, 123, 22, .28);
}

.bundle-card header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: end;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(27, 13, 7, .14);
}

.bundle-card header span {
  color: var(--leaf);
  font: 900 13px/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.bundle-card header strong {
  color: var(--pepper);
  font-family: var(--display);
  font-size: clamp(54px, 6vw, 88px);
  line-height: .82;
  letter-spacing: -.07em;
}

.bundle-card ul,
.special-rule-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bundle-card li,
.special-rule-list li {
  display: flex;
  gap: 10px;
  align-items: start;
  color: rgba(27, 13, 7, .76);
  font-weight: 900;
  line-height: 1.35;
}

.bundle-card li::before,
.special-rule-list li::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-top: .42em;
  border-radius: 999px;
  background: var(--leaf);
}

.catering-rule-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.catering-rule-strip span {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  padding: 0 13px;
  border: 1px solid rgba(27, 13, 7, .13);
  background: rgba(255, 250, 240, .72);
  color: var(--leaf);
  font: 900 11px/1.2 var(--mono);
  letter-spacing: .05em;
  text-transform: uppercase;
}

.catering-rule-strip-dark span {
  border-color: rgba(255, 242, 220, .18);
  background: rgba(255, 242, 220, .08);
  color: var(--cream);
}

.native-catering-actions {
  justify-content: flex-start;
  margin-top: 18px;
}

.monthly-special-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.monthly-special-card {
  display: grid;
  gap: 22px;
  align-content: start;
  min-height: 520px;
  padding: clamp(20px, 4vw, 34px);
  border-color: rgba(255, 242, 220, .18);
  background:
    linear-gradient(160deg, rgba(255, 242, 220, .1), rgba(8, 123, 22, .14)),
    rgba(13, 8, 9, .44);
}

.monthly-special-card-hot {
  background:
    linear-gradient(145deg, rgba(246, 167, 25, .2), rgba(8, 123, 22, .22)),
    rgba(13, 8, 9, .52);
}

.monthly-special-card span {
  color: var(--palm);
  font: 900 12px/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.monthly-special-card h3 {
  margin: 8px 0 10px;
  font-size: clamp(36px, 5vw, 68px);
  color: var(--cream);
}

.monthly-special-card p {
  max-width: 620px;
  margin: 0;
  color: rgba(255, 242, 220, .78);
  font-size: clamp(16px, 1.6vw, 20px);
  line-height: 1.45;
}

.special-date-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.special-date-list div {
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(255, 242, 220, .16);
  background: rgba(255, 242, 220, .08);
}

.special-date-list dt {
  margin-bottom: 8px;
  color: var(--leaf-bright);
  font: 900 11px/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.special-date-list dd {
  margin: 0;
  color: var(--cream);
  font: 900 clamp(18px, 2vw, 26px)/1.05 var(--body);
}

.monthly-special-card .special-rule-list li {
  color: rgba(255, 242, 220, .82);
}

.monthly-special-card .special-rule-list li::before {
  background: var(--palm);
}

.media-card {
  min-height: 340px;
  padding: 0;
}

.media-card img,
.media-card video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 38%, rgba(0, 0, 0, .82));
}

.media-card span,
.media-card h3 {
  position: relative;
  z-index: 2;
}

.media-card span {
  position: absolute;
  left: 18px;
  bottom: 70px;
}

.media-card h3 {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
}

.catering-band,
.entertainment-band,
.visit-band {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: 0;
  min-height: 84svh;
  overflow: hidden;
  border-top: 1px solid rgba(255, 242, 220, .18);
}

.catering-media,
.entertainment-stage,
.visit-photo {
  position: relative;
  min-width: 0;
  min-height: 560px;
  overflow: hidden;
}

.catering-media img,
.entertainment-stage video,
.visit-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.entertainment-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13, 8, 9, .12), rgba(13, 8, 9, .82));
}

.stage-copy {
  position: absolute;
  z-index: 2;
  left: clamp(18px, 5vw, 64px);
  right: clamp(18px, 5vw, 64px);
  bottom: clamp(20px, 5vw, 58px);
}

.catering-copy,
.entertainment-copy,
.visit-copy {
  display: grid;
  align-content: center;
  gap: 24px;
  min-width: 0;
  padding: clamp(28px, 6vw, 84px);
  background: var(--paper);
  color: var(--ink);
}

.catering-copy > *,
.entertainment-copy > *,
.visit-copy > * {
  max-width: 100%;
}

.catering-copy .site-kicker,
.page-panel .site-kicker,
.visit-copy .site-kicker {
  color: var(--leaf);
}

.stage-copy .site-kicker {
  color: var(--palm);
}

.brief-form,
.performer-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  max-width: 720px;
}

.brief-form label,
.performer-form label {
  display: grid;
  gap: 7px;
  color: rgba(41, 19, 11, .76);
  font: 900 11px/1 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.brief-form input,
.brief-form select,
.performer-form input,
.performer-form select,
.performer-form textarea {
  width: 100%;
  min-height: 50px;
  border: 1px solid rgba(41, 19, 11, .18);
  background: #fffaf0;
  color: var(--ink);
  padding: 0 12px;
  border-radius: 3px;
  font: 700 15px/1 var(--body);
  letter-spacing: 0;
  text-transform: none;
}

.performer-form textarea {
  min-height: 112px;
  padding: 12px;
  resize: vertical;
}

.brief-form button,
.brief-form p,
.performer-form h2,
.performer-form h3,
.performer-form button,
.performer-form p,
.wide-field {
  grid-column: 1 / -1;
}

.brief-form p,
.performer-form p {
  min-height: 20px;
  margin: 0;
  color: var(--leaf);
  font-weight: 900;
  line-height: 1.35;
}

.brief-form p a,
.performer-form p a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.event-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.event-cards article {
  min-height: 220px;
  border: 1px solid rgba(28, 10, 6, .16);
  background: #fffaf0;
  padding: 0 16px 18px;
  overflow: hidden;
}

.event-cards .event-card-featured {
  background: var(--ink);
  color: #fffaf0;
}

.event-cards img {
  width: calc(100% + 32px);
  height: 220px;
  margin: 0 -16px 16px;
  object-fit: cover;
  filter: saturate(1.08) contrast(1.04);
}

.event-cards span {
  display: block;
  margin-bottom: 12px;
  color: var(--leaf);
  font: 900 12px/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.event-cards .event-card-featured span {
  color: var(--leaf-bright);
}

.event-cards h3,
.performer-form h2,
.performer-form h3 {
  color: var(--ink);
}

.event-cards .event-card-featured h3 {
  color: #fffaf0;
}

.performer-form h2 {
  font-size: clamp(32px, 4vw, 58px);
}

.event-cards h3 {
  font-size: clamp(20px, 1.55vw, 24px);
  line-height: .95;
  letter-spacing: 0;
  overflow-wrap: normal;
  word-break: normal;
}

.event-cards p {
  margin: 12px 0 0;
  color: rgba(28, 10, 6, .7);
  line-height: 1.35;
}

.event-cards .event-card-featured p {
  color: rgba(255, 250, 240, .76);
}

.visit-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  min-width: 0;
}

.visit-list div {
  min-width: 0;
  border: 1px solid rgba(41, 19, 11, .16);
  padding: 14px;
  overflow: hidden;
}

.visit-list dd {
  margin: 8px 0 0;
  font-weight: 900;
  line-height: 1.3;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.visit-list a {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.find-copy .visit-list dt {
  color: #6e2114;
}

.site-footer {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: clamp(28px, 5vw, 56px) clamp(16px, 4vw, 60px);
  border-top: 1px solid rgba(68, 42, 24, .12);
  background: #fbfefa;
  color: #3a2418;
  text-align: center;
}

.footer-signoff-logo {
  width: min(230px, 60vw);
  height: auto;
}

.footer-tagline,
.footer-address-line {
  margin: 0;
  color: #4b3428;
}

.footer-contact,
.footer-social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 14px;
}

.footer-contact a,
.footer-social a {
  color: #196122;
  font-weight: 900;
}

.footer-social,
.footer-social-line,
.footer-legal-line {
  font-weight: 800;
}

.footer-social-line a,
.footer-legal-line a {
  color: #196122;
  font-weight: 900;
}

.footer-dot {
  color: rgba(58, 36, 24, .35);
}

@media (max-width: 1100px) {
  .hero-grid,
  .section-head,
  .menu-shell,
  .catering-band,
  .entertainment-band,
  .map-band,
  .drink-menu-intro,
  .drink-feature,
  .drink-cta,
  .performer-page,
  .visit-band,
  .email-offer-band {
    grid-template-columns: 1fr;
  }

  .hero-copy {
    align-self: end;
  }

  .proof-wall,
  .plate-lineup-grid,
  .menu-grid,
  .food-card-grid,
  .drink-grid,
  .drink-two-column,
  .bundle-grid,
  .buyer-path-grid,
  .meal-prep-grid,
  .tray-category-grid,
  .tray-build-strip,
  .feature-links,
  .event-cards,
  .menu-picks-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .buyer-path-card-featured {
    grid-row: auto;
    grid-column: span 2;
  }

  .feature-entertainment {
    grid-column: span 2;
    min-height: clamp(320px, 48vw, 480px);
  }

  .menu-pick-card:last-child {
    grid-column: span 2;
  }

  .special-shell,
  .special-offer-grid,
  .special-details-grid,
  .monthly-special-grid {
    grid-template-columns: 1fr;
  }

  .compact-proof {
    grid-template-columns: 1fr 1fr;
  }

  .performer-media {
    min-height: 72svh;
  }

  .proof-room {
    grid-column: auto;
  }

  .plate-card-feature {
    grid-column: span 2;
    grid-row: auto;
    min-height: 360px;
  }

  .menu-rail {
    position: static;
    display: flex;
    flex-wrap: wrap;
  }

  .menu-filter {
    justify-content: center;
    padding: 0 12px;
  }
}

@media (max-width: 760px) {
  /* Header/nav-specific rules (main section[id] scroll-margin-top,
     .site-header, .site-nav, .site-nav.open, .site-nav a, .menu-toggle,
     .header-call) moved 2026-09-24 to the new max-width:1500px block
     above .happy-hour-promo -- the compact/hamburger nav now activates
     well above 760px (see that block's comment). This block keeps every
     OTHER general small-viewport rule, still switching at the site's
     normal 760px mobile breakpoint. */

  .hero-grid {
    padding-top: 88px;
  }

  h1 {
    font-size: clamp(48px, 16vw, 74px);
  }

  #catering-title {
    font-size: clamp(44px, 15vw, 68px);
  }

  .hero-priority-actions,
  .hero-actions,
  .visit-actions,
  .food-menu-actions,
  .performer-hero-actions,
  .brief-form,
  .performer-form {
    grid-template-columns: 1fr;
    display: grid;
  }

  .action {
    width: 100%;
  }

  .hero-menu-card {
    min-height: 320px;
  }

  .food-menu-actions {
    justify-content: stretch;
  }

  .visit-ticket {
    width: 100%;
  }

  .proof-wall,
  .plate-lineup-grid,
  .menu-grid,
  .food-card-grid,
  .drink-grid,
  .drink-two-column,
  .happy-hour-grid,
  .bundle-grid,
  .buyer-path-grid,
  .meal-prep-grid,
  .tray-category-grid,
  .tray-build-strip,
  .special-date-list,
  .feature-links,
  .event-cards,
  .visit-list,
  .menu-picks-grid {
    grid-template-columns: 1fr;
  }

  .buyer-path-card,
  .buyer-path-card-featured {
    grid-column: auto;
    min-height: 0;
  }

  .drink-jump-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .drink-jump-nav a {
    justify-content: center;
  }

  .drink-card,
  .drink-list article,
  .happy-hour-grid article {
    display: grid;
  }

  .special-price-card {
    min-height: 220px;
  }

  .special-price-card .special-status-strong {
    max-width: 16ch;
    font-size: clamp(26px, 7vw, 38px);
  }

  .special-panel li {
    display: grid;
  }

  .feature-links a {
    min-height: 280px;
    border-right: 0;
    border-bottom: 1px solid rgba(28, 10, 6, .16);
  }

  .feature-links a:last-child {
    border-bottom: 0;
  }

  .feature-entertainment {
    grid-column: auto;
  }

  .artist-cta {
    display: grid;
  }

  .proof-food {
    grid-row: auto;
  }

  .plate-card-feature {
    grid-column: auto;
    min-height: 300px;
  }

  .plate-card {
    min-height: 220px;
  }

  .plate-card-snack {
    min-height: 210px;
  }

  .plate-card figcaption {
    left: 16px;
    right: 16px;
    bottom: 16px;
  }

  .plate-card figcaption strong {
    font-size: clamp(18px, 6vw, 28px);
  }

  .catering-media,
  .entertainment-stage,
  .map-frame,
  .visit-map,
  .visit-photo {
    min-height: 360px;
  }

  .compact-proof {
    grid-template-columns: 1fr;
  }

  .performer-media {
    min-height: 72svh;
  }
}

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

  video {
    opacity: .001;
  }
}

/* Smoked Turkey Brunch Teaser */
.brunch-teaser {
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.brunch-teaser-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.brunch-teaser-overlay {
  position: relative;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(8, 4, 2, .88) 0%, rgba(8, 4, 2, .72) 30%, rgba(8, 4, 2, .82) 70%, rgba(8, 4, 2, .95) 100%),
    linear-gradient(90deg, rgba(8, 4, 2, .7), transparent 50%);
  padding: clamp(3rem, 8vw, 6rem) clamp(1.5rem, 5vw, 4rem);
}
.brunch-teaser-copy {
  max-width: 1100px;
  margin: 0 auto;
}
.brunch-tag {
  display: inline-block;
  padding: .4rem 1.2rem;
  border-radius: 999px;
  background: var(--pepper);
  color: #fff;
  font-weight: 900;
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 1rem;
  animation: brunch-pulse 2s ease-in-out infinite;
}
@keyframes brunch-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(200, 90, 29, .5); }
  50% { box-shadow: 0 0 0 10px rgba(200, 90, 29, 0); }
}
.brunch-teaser h2 {
  font-size: clamp(2.4rem, 6vw, 5.5rem);
  line-height: .92;
  letter-spacing: -.055em;
  color: #fff;
  margin: 0 0 1rem;
  max-width: 820px;
  text-shadow: 0 4px 30px rgba(0,0,0,.5);
}
.brunch-lede {
  font-size: clamp(1.1rem, 2.5vw, 1.45rem);
  line-height: 1.55;
  color: rgba(255, 242, 220, .88);
  max-width: 680px;
  margin: 0 0 2rem;
  text-shadow: 0 1px 8px rgba(0,0,0,.3);
}
.brunch-details-strip {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1.8rem;
}
.brunch-details-strip span {
  padding: .35rem .9rem;
  border-radius: 8px;
  background: rgba(255, 242, 220, .08);
  border: 1px solid rgba(255, 242, 220, .15);
  color: rgba(255, 242, 220, .9);
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.brunch-details-strip span:last-child {
  background: rgba(200, 90, 29, .25);
  border-color: rgba(200, 90, 29, .4);
  color: var(--palm);
}
.brunch-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: 2rem;
}
.brunch-card {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  aspect-ratio: 16 / 10;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1rem 1.2rem;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .4);
  border: 1px solid rgba(255, 242, 220, .1);
}
.brunch-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transition: transform .4s ease;
}
.brunch-card:hover img {
  transform: scale(1.04);
}
.brunch-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(0deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.2) 55%, transparent 100%);
}
.brunch-card span,
.brunch-card strong {
  position: relative;
  z-index: 2;
}
.brunch-card span {
  color: var(--palm);
  font-size: .72rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .14em;
}
.brunch-card strong {
  display: block;
  color: #fff;
  font-size: clamp(1rem, 2vw, 1.3rem);
  letter-spacing: -.02em;
  margin-top: .2rem;
  text-shadow: 0 1px 8px rgba(0,0,0,.4);
}
.brunch-fomo {
  font-size: clamp(.95rem, 2vw, 1.15rem);
  color: rgba(255, 242, 220, .78);
  line-height: 1.5;
  margin: 0 0 1.2rem;
}
.brunch-fomo strong {
  color: var(--palm);
}
.brunch-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}
.brunch-actions .action-line {
  border-color: rgba(255, 242, 220, .3);
  color: rgba(255, 242, 220, .9);
}
@media (max-width: 700px) {
  .brunch-cards {
    grid-template-columns: 1fr;
  }
}

/* Rewards */
.loyalty-program {
  margin: 2rem clamp(1rem, 4vw, 2rem);
  padding: clamp(2rem, 6vw, 5rem) clamp(1rem, 4vw, 3rem);
  border-radius: 36px;
  background:
    radial-gradient(circle at 80% 10%, rgba(243, 182, 63, .22), transparent 28rem),
    linear-gradient(135deg, #fff9ed, #f4dfbd 62%, #e8c995);
  border: 1px solid rgba(36,18,11,.12);
  box-shadow: 0 28px 80px rgba(36,18,11,.12);
}
.loyalty-hero {
  display: flex;
  justify-content: center;
  min-width: 0;
}
.loyalty-hero h2 { font-size: clamp(2rem, 5vw, 4.4rem); line-height: .96; letter-spacing: -.055em; margin: .2rem 0 1rem; }
.loyalty-hero p { max-width: 780px; color: var(--muted); line-height: 1.65; }
.passport-card {
  position: relative;
  overflow: hidden;
  min-height: 320px;
  border-radius: 24px;
  box-shadow: 0 28px 70px rgba(36, 18, 11, .3), 0 0 0 1px rgba(255, 215, 0, .15);
  transform: rotate(.75deg);
  transform-origin: center;
  width: min(100%, 520px);
  aspect-ratio: 3.375 / 2.125;
}
.passport-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.passport-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(0deg, rgba(10, 5, 3, .94) 0%, rgba(10, 5, 3, .65) 40%, rgba(10, 5, 3, .2) 70%, rgba(10, 5, 3, .08) 100%),
    linear-gradient(135deg, rgba(122, 40, 23, .3), transparent 60%);
}
.passport-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  padding: 1.5rem;
  color: #fff8ef;
}
.rewards-badge {
  width: 64px;
  height: 64px;
  object-fit: contain;
  border-radius: 50%;
  margin-bottom: .6rem;
  border: 2px solid rgba(255, 211, 106, .4);
  box-shadow: 0 4px 20px rgba(0, 0, 0, .4);
}
.passport-card strong {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  letter-spacing: -.04em;
  line-height: 1;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .5);
}
.passport-card small {
  color: rgba(255, 211, 106, .9);
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-top: .35rem;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .4);
}
.passport-stripe {
  margin-top: .75rem;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(255, 211, 106, .7), rgba(200, 90, 29, .6) 50%, rgba(8, 123, 22, .5));
}
.passport-progress { height: 12px; border-radius: 999px; background: rgba(255,255,255,.18); overflow: hidden; }
.passport-progress i { display: block; width: 84%; height: 100%; background: var(--gold); border-radius: inherit; transition: width .25s ease; }
.loyalty-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: .9rem; margin: 1.5rem 0; }
.loyalty-card,
.loyalty-panel { background: rgba(255,255,255,.78); border: 1px solid rgba(36,18,11,.13); border-radius: 24px; padding: 1rem; box-shadow: 0 14px 42px rgba(36,18,11,.08); }
.loyalty-card span { color: var(--pepper); text-transform: uppercase; letter-spacing: .12em; font-weight: 900; font-size: .75rem; }
.loyalty-card-bonus { border-color: rgba(200, 90, 29, .28); background: linear-gradient(135deg, rgba(255, 253, 248, .94), rgba(255, 211, 106, .12)); }
.loyalty-card strong { display: block; margin: .35rem 0; font-size: 1.35rem; }
.loyalty-card p { color: var(--muted); line-height: 1.55; margin: 0; }
.loyalty-details { display: grid; grid-template-columns: .85fr 1.15fr; gap: .9rem; }
.loyalty-panel h3 { margin: 0 0 1rem; font-size: clamp(1.4rem, 3vw, 2rem); letter-spacing: -.035em; }
.loyalty-panel.dark { background: var(--deep); color: #fff8ef; }
.reward-note { font-size: clamp(1.25rem, 3vw, 2.3rem); line-height: 1.15; letter-spacing: -.035em; font-weight: 900; }
.reward-note strong { color: var(--gold); }
.loyalty-panel.dark .note { color: #e6cdb1; }
@media (max-width: 900px) {
  .loyalty-hero,
  .loyalty-grid,
  .loyalty-details { grid-template-columns: 1fr; }
  .passport-card { min-height: 240px; aspect-ratio: auto; }
}


/* Readability hardening for rewards */
.loyalty-program {
  color: #1c0a06;
}
.loyalty-program .site-kicker,
.loyalty-card span {
  color: #9f2f1b;
}
.loyalty-program p,
.loyalty-program .muted,
.loyalty-program .note,
.loyalty-hero p,
.loyalty-card p {
  color: #5f4635;
}
.loyalty-panel.dark {
  background: #250b07;
  color: #fff8ef;
}
.loyalty-panel.dark .note {
  color: #e6cdb1;
}
.loyalty-panel.dark .site-kicker {
  color: #ffd36a;
}
.reward-note strong {
  color: #ffd36a;
}
.passport-progress i {
  background: #ffd36a;
}
.loyalty-card,
.loyalty-panel {
  background: rgba(255, 253, 248, .94);
}
.loyalty-panel.dark {
  background: #250b07;
}

/* Rewards email gate */
.rewards-gate {
  margin: 2rem 0;
  padding: clamp(2rem, 5vw, 3rem);
  border-radius: 24px;
  background: rgba(255, 253, 248, .94);
  border: 2px solid rgba(200, 90, 29, .22);
  box-shadow: 0 14px 42px rgba(36, 18, 11, .08);
  text-align: center;
}
.rewards-gate label {
  display: block;
  font-size: clamp(1.2rem, 3vw, 1.6rem);
  font-weight: 900;
  letter-spacing: -.03em;
  color: #1c0a06;
  margin-bottom: 1rem;
}
.rewards-gate-row {
  display: flex;
  gap: .75rem;
  max-width: 540px;
  margin: 0 auto;
}
.rewards-gate-row input {
  flex: 1;
  padding: .85rem 1.1rem;
  border-radius: 14px;
  border: 1px solid rgba(36, 18, 11, .2);
  font-size: 1rem;
  background: #fff;
  color: #1c0a06;
}
.rewards-gate-row input:focus {
  outline: 2px solid var(--pepper);
  outline-offset: 1px;
}
.rewards-gate-note {
  margin: 1rem 0 0;
  font-size: .85rem;
  color: #8a6b55;
}
.rewards-gate [data-rewards-result] {
  font-weight: 700;
  color: var(--pepper);
  margin: .75rem 0 0;
}
.rewards-gate.is-enrolled {
  display: none;
}

.email-offer-band {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(320px, .7fr);
  gap: clamp(18px, 4vw, 40px);
  align-items: center;
  padding: clamp(36px, 6vw, 72px) clamp(18px, 5vw, 72px);
  background:
    linear-gradient(135deg, rgba(255, 243, 223, .98), rgba(232, 193, 132, .94)),
    radial-gradient(circle at top right, rgba(200, 90, 29, .24), transparent 30rem);
  color: #1c0a06;
}

.email-offer-copy h2 {
  margin: 0;
  max-width: 720px;
  font-family: var(--display);
  font-size: clamp(34px, 6vw, 72px);
  line-height: .92;
  letter-spacing: 0;
  text-transform: uppercase;
}

.email-offer-copy p:not(.site-kicker) {
  max-width: 620px;
  color: #5f4635;
  font-size: clamp(1rem, 1.5vw, 1.18rem);
  line-height: 1.55;
}

.email-offer-form {
  display: grid;
  gap: 10px;
  padding: clamp(18px, 3vw, 28px);
  border: 1px solid rgba(36, 18, 11, .16);
  border-radius: 8px;
  background: rgba(255, 253, 248, .86);
  box-shadow: 0 18px 50px rgba(36, 18, 11, .12);
}

.email-offer-form label {
  font: 900 11px/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #7d3b20;
}

.email-offer-form input {
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid rgba(36, 18, 11, .2);
  border-radius: 6px;
  background: #fff;
  color: #1c0a06;
}

.email-offer-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.email-offer-form p {
  margin: 2px 0 0;
  color: #745943;
  font-size: .88rem;
  line-height: 1.45;
}

.email-offer-form [data-email-offer-result] {
  min-height: 1.25em;
  color: #9f2f1b;
  font-weight: 900;
}

@media (max-width: 600px) {
  .rewards-gate-row {
    flex-direction: column;
  }

  .email-offer-row {
    grid-template-columns: 1fr;
  }
}

.order-lab-shell {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  padding: 104px clamp(16px, 4vw, 44px) 64px;
  background:
    radial-gradient(circle at top left, rgba(237, 73, 38, .14), transparent 28rem),
    linear-gradient(180deg, #120805 0%, #1c0c07 100%);
}

.order-lab-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
  gap: 18px;
  margin-bottom: 26px;
}

.order-lab-hero > *,
.order-layout > *,
.order-main,
.order-toolbar > *,
.order-card,
.order-card-copy,
.order-cart {
  min-width: 0;
}

.order-lab-hero h1,
.order-toolbar h2,
.order-cart-head h2,
.order-modal-form h2 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(34px, 5vw, 60px);
  line-height: .92;
  letter-spacing: -.05em;
  text-transform: uppercase;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.order-lab-hero p:last-child,
.order-toolbar p:last-child {
  max-width: 720px;
  color: rgba(255, 242, 220, .8);
  line-height: 1.7;
}

.order-lab-status,
.order-card,
.order-cart,
.order-modal-card,
.order-empty {
  border: 1px solid rgba(255, 242, 220, .12);
  background: rgba(14, 8, 6, .78);
  backdrop-filter: blur(16px);
  box-shadow: 0 26px 72px rgba(0, 0, 0, .24);
}

.order-lab-status {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 22px;
}

.order-lab-status span,
.order-card-copy span,
.order-cart-footnote h3,
.order-cart-summary span,
.order-modal-price span {
  font: 800 11px/1 var(--mono);
  letter-spacing: .11em;
  text-transform: uppercase;
  color: rgba(255, 242, 220, .64);
}

.order-lab-status strong {
  font-family: var(--display);
  font-size: clamp(24px, 3vw, 34px);
  line-height: .95;
  letter-spacing: -.04em;
  text-transform: uppercase;
}

.order-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(320px, .7fr);
  gap: 18px;
  align-items: start;
}

.order-main {
  display: grid;
  gap: 18px;
}

.order-toolbar {
  display: grid;
  gap: 16px;
}

.order-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.order-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.order-card {
  display: grid;
  overflow: hidden;
}

.order-card-media {
  position: relative;
  min-height: 220px;
  background: #120806;
}

.order-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.order-card-copy {
  display: grid;
  gap: 12px;
  padding: 18px;
}

.order-card-copy h3,
.cart-line h3,
.order-empty h3,
.order-cart-footnote h3,
.order-modal-form h3 {
  margin: 0;
  font-size: 22px;
  line-height: 1.05;
}

.order-card-copy p,
.cart-line p,
.order-cart-footnote p,
.order-empty p,
.order-modal-form p {
  margin: 0;
  color: rgba(255, 242, 220, .76);
  line-height: 1.6;
}

.order-ingredient-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.order-ingredient-list li {
  padding: 8px 10px;
  border: 1px solid rgba(255, 242, 220, .12);
  background: rgba(255, 242, 220, .06);
  color: rgba(255, 242, 220, .84);
  font-size: 13px;
}

.order-card-footer,
.order-cart-summary,
.order-modal-inline,
.cart-line {
  display: grid;
  gap: 12px;
}

.order-card-footer {
  grid-template-columns: 1fr auto;
  align-items: end;
}

.order-card-footer strong,
.cart-line-meta strong,
.order-modal-price strong {
  font-family: var(--display);
  font-size: 28px;
  line-height: .95;
  letter-spacing: -.04em;
}

.order-cart {
  position: sticky;
  top: 96px;
  display: grid;
  gap: 16px;
  padding: 18px;
}

.order-cart-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.order-cart-toggle {
  display: none;
}

.order-cart-notice {
  margin: 0;
  padding: 12px 14px;
  border-left: 3px solid var(--palm);
  background: rgba(245, 169, 29, .1);
  color: rgba(255, 242, 220, .82);
  line-height: 1.55;
}

.order-cart-items {
  display: grid;
  gap: 10px;
}

.order-customer-form {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(255, 242, 220, .1);
  background: rgba(255, 242, 220, .035);
}

.order-customer-form label {
  display: grid;
  gap: 7px;
  color: rgba(255, 242, 220, .72);
  font: 800 11px/1.25 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.order-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.order-form-hint {
  margin: -2px 0 0;
  color: rgba(255, 242, 220, .58);
  font: 700 11px/1.5 var(--body);
  letter-spacing: 0;
  text-transform: none;
}

.order-customer-form input,
.order-customer-form select,
.order-customer-form textarea {
  width: 100%;
  border: 1px solid rgba(255, 242, 220, .16);
  background: rgba(18, 8, 6, .76);
  color: var(--cream);
  padding: 11px 12px;
  font: 700 13px/1.35 var(--body);
  letter-spacing: 0;
  text-transform: none;
}

.cart-line {
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 14px;
  border: 1px solid rgba(255, 242, 220, .1);
  background: rgba(255, 242, 220, .04);
}

.cart-line small {
  color: rgba(255, 242, 220, .66);
}

.cart-line-meta {
  text-align: right;
  align-content: start;
}

.cart-line-meta span,
.cart-line-meta button {
  font: 800 11px/1.4 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.cart-line-meta button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--palm);
  cursor: pointer;
}

.order-cart-summary {
  padding-top: 8px;
  border-top: 1px solid rgba(255, 242, 220, .12);
}

.order-payment-choice {
  display: flex;
  gap: 16px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 242, 220, .12);
}

.order-payment-choice label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 244, 223, .82);
  font: 700 12px/1.3 var(--body);
  cursor: pointer;
}

.order-payment-choice input {
  accent-color: var(--palm);
}

.order-cart-summary div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.order-cart-summary strong {
  font: 900 12px/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.order-cart-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.order-cart-actions button:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.order-cart-footnote {
  padding-top: 10px;
  border-top: 1px solid rgba(255, 242, 220, .1);
}

.order-empty {
  padding: 20px;
}

.order-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(5, 3, 2, .74);
}

.order-modal[hidden] {
  display: none;
}

.order-modal-card {
  position: relative;
  width: min(720px, 100%);
  max-height: min(88svh, 920px);
  overflow: auto;
  padding: 22px;
}

.order-modal-close {
  position: sticky;
  top: 0;
  margin-left: auto;
  border: 0;
  background: none;
  color: var(--cream);
  font-size: 30px;
  cursor: pointer;
}

.order-modal-form {
  display: grid;
  gap: 16px;
}

.order-modal-section {
  display: grid;
  gap: 10px;
  /* Modifier groups use <fieldset>/<legend> for native, no-extra-ARIA
     accessible grouping of their radio/checkbox options; reset the UA
     fieldset chrome so it matches the plain <section> blocks around it. */
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.order-modal-form legend {
  font-size: 22px;
  line-height: 1.05;
  padding: 0;
  margin: 0;
  color: var(--cream);
}

.order-modal-required {
  font-size: 12px;
  font-weight: 700;
  color: var(--palm);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.order-card-modifier-hint {
  margin: 0;
  font-size: 12px;
  color: var(--palm);
  text-transform: uppercase;
  letter-spacing: .03em;
  font-weight: 700;
}

.order-modal-error {
  margin: 0;
  font-size: 13px;
  color: #ff8a6b;
}

.order-modal-error[hidden] {
  display: none;
}

.order-modal-price-stack {
  display: grid;
  gap: 6px;
  justify-items: end;
}

.order-modal-price-stack .order-modal-price {
  display: grid;
  gap: 2px;
  justify-items: end;
}

.order-modal-price-stack .order-modal-total strong {
  color: var(--palm);
}

.order-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.order-chip {
  position: relative;
  display: inline-flex;
}

.order-chip input {
  position: absolute;
  opacity: 0;
}

.order-chip span {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid rgba(255, 242, 220, .14);
  background: rgba(255, 242, 220, .05);
  color: var(--cream);
}

.order-chip input:checked + span {
  border-color: var(--palm);
  background: rgba(245, 169, 29, .16);
  color: var(--cream);
}

.order-modal-section textarea,
.order-modal-section input[type="number"] {
  width: 100%;
  border: 1px solid rgba(255, 242, 220, .16);
  background: rgba(255, 242, 220, .04);
  color: var(--cream);
  padding: 12px 14px;
}

.order-modal-inline {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
}

.order-modal-inline label {
  display: grid;
  gap: 8px;
}

.order-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

body.order-modal-open {
  overflow: hidden;
}

.request-confirm {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(5, 3, 2, .82);
  animation: request-confirm-fade .2s ease;
}

@keyframes request-confirm-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.request-confirm-card {
  position: relative;
  width: min(560px, 100%);
  max-height: min(90svh, 900px);
  overflow: auto;
  padding: 30px 30px 26px;
  border: 1px solid rgba(245, 169, 29, .35);
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(245, 169, 29, .12), transparent 60%),
    var(--char-soft);
  color: var(--cream);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
  animation: request-confirm-rise .28s ease;
}

@keyframes request-confirm-rise {
  from { transform: translateY(14px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.request-confirm-close {
  position: absolute;
  top: 12px;
  right: 14px;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.request-confirm-close:hover {
  color: var(--cream);
}

.request-confirm-badge {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--leaf);
  color: #fff;
  font-size: 30px;
  font-weight: 700;
}

.request-confirm-card h2 {
  margin: 6px 0 4px;
  font-family: var(--display);
  font-size: clamp(22px, 4vw, 30px);
  line-height: 1.1;
  color: var(--cream);
}

.request-confirm-ref {
  margin: 4px 0 0;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--muted);
}

.request-confirm-ref strong {
  color: var(--palm);
}

.request-confirm-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0;
}

.request-confirm-summary div {
  flex: 1 1 160px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 242, 220, .14);
  background: rgba(255, 242, 220, .05);
}

.request-confirm-summary dt {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
}

.request-confirm-summary dd {
  margin: 4px 0 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--cream);
}

.request-confirm-steps h3 {
  margin: 0 0 8px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--palm);
}

.request-confirm-steps ol {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 8px;
}

.request-confirm-steps li {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 242, 220, .9);
}

.request-confirm-contact {
  margin: 16px 0 22px;
  font-size: 14px;
  color: var(--muted);
}

.request-confirm-contact a {
  color: var(--palm);
}

.request-confirm-actions {
  display: flex;
  justify-content: flex-end;
}

[data-catering-studio] {
  background: #100704;
}

.catering-studio-shell {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  padding: 92px clamp(14px, 3vw, 38px) clamp(40px, 6vw, 82px);
  color: var(--cream);
  background:
    linear-gradient(135deg, rgba(6, 53, 15, .94), rgba(18, 8, 6, .92) 34%, rgba(74, 22, 8, .96) 72%, rgba(246, 167, 25, .2)),
    #120806;
}

.catering-studio-hero,
.catering-order-studio {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(340px, 1.08fr);
  gap: clamp(14px, 2vw, 24px);
  align-items: stretch;
}

.catering-studio-hero {
  min-height: min(760px, calc(100svh - 112px));
  margin-bottom: clamp(16px, 3vw, 34px);
}

.catering-hero-copy,
.catering-visual-stage,
.occasion-lanes,
.catering-special-slab,
.catering-live-cart {
  border: 1px solid rgba(255, 243, 223, .14);
  background: rgba(255, 243, 223, .075);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .26);
  backdrop-filter: blur(18px);
}

.catering-hero-copy {
  display: grid;
  align-content: end;
  gap: clamp(14px, 2vw, 22px);
  min-width: 0;
  padding: clamp(22px, 4.6vw, 68px);
}

.catering-hero-copy h1 {
  max-width: 690px;
  margin: 0;
  color: #fffaf0;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: clamp(50px, 7vw, 102px);
  font-weight: 900;
  /* Heavy 900-weight glyphs occupy ~1.29em; a sub-1 line-height made the
     wrapped hero title (up to 5 lines on narrow/mobile widths) overlap by
     ~28px per line. Keep the tight display feel without letters colliding. */
  line-height: 1;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.catering-hero-copy p:not(.site-kicker) {
  max-width: 530px;
  margin: 0;
  color: rgba(255, 250, 240, .82);
  font-size: clamp(16px, 1.55vw, 22px);
  font-weight: 900;
  line-height: 1.25;
}

.catering-visual-stage {
  display: grid;
  grid-template-columns: 1.08fr .74fr .74fr;
  grid-template-rows: minmax(240px, 1fr) minmax(190px, .72fr);
  gap: 12px;
  min-height: 520px;
  overflow: hidden;
  padding: clamp(12px, 2vw, 18px);
  background: rgba(255, 250, 240, .08);
}

.catering-proof-frame {
  position: relative;
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 250, 240, .2);
  background: #1b0d07;
  box-shadow: 0 26px 70px rgba(27, 13, 7, .24);
}

.catering-proof-frame img,
.catering-proof-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.catering-proof-frame figcaption {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 8px 10px;
  background: rgba(16, 7, 4, .84);
  color: #fffaf0;
  font: 900 11px/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.catering-proof-large {
  grid-row: span 2;
}

.catering-proof-tall img {
  object-position: 50% 58%;
}

.occasion-lanes {
  display: grid;
  gap: clamp(14px, 2vw, 24px);
  margin-bottom: clamp(16px, 3vw, 34px);
  padding: clamp(16px, 2.8vw, 34px);
}

.occasion-lanes-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: end;
}

.occasion-lanes h2,
.catering-order-toolbar h2,
.catering-special-slab h2 {
  margin: 0;
  color: #fffaf0;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: clamp(28px, 4.8vw, 60px);
  font-weight: 900;
  line-height: .98;
  letter-spacing: 0;
}

.occasion-card-grid {
  display: grid;
  grid-template-columns: 1.28fr repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.occasion-card {
  min-width: 0;
  min-height: 178px;
  display: grid;
  align-content: space-between;
  gap: 16px;
  padding: clamp(16px, 2vw, 24px);
  border: 1px solid rgba(255, 243, 223, .16);
  border-radius: 0;
  background: rgba(255, 250, 240, .08);
  color: #fffaf0;
  text-align: left;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background-color .18s ease;
}

.occasion-card:hover,
.occasion-card:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(246, 167, 25, .72);
  background: rgba(255, 250, 240, .13);
  outline: none;
}

.occasion-card.is-primary {
  background: #fffaf0;
  color: var(--ink);
}

.occasion-card span,
.occasion-card small {
  font: 900 11px/1.1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.occasion-card span {
  color: var(--leaf-bright);
}

.occasion-card.is-primary span {
  color: var(--leaf);
}

.occasion-card strong {
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: clamp(20px, 2.45vw, 38px);
  font-weight: 900;
  line-height: .98;
  letter-spacing: 0;
  text-transform: uppercase;
}

.occasion-card small {
  color: currentColor;
  opacity: .72;
}

.starter-pack-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.starter-pack {
  min-width: 0;
  display: grid;
  gap: 8px;
  align-content: start;
  min-height: 120px;
  padding: 16px;
  border: 1px solid rgba(246, 167, 25, .32);
  background: rgba(246, 167, 25, .12);
  color: #fffaf0;
  text-align: left;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background-color .18s ease;
}

.starter-pack:hover,
.starter-pack:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(246, 167, 25, .78);
  background: rgba(246, 167, 25, .18);
  outline: none;
}

.starter-pack span,
.starter-pack small {
  font: 900 11px/1.2 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.starter-pack span {
  color: var(--palm);
}

.starter-pack strong {
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: clamp(18px, 2vw, 28px);
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.starter-pack small {
  color: rgba(255, 250, 240, .72);
}

.catering-order-studio {
  align-items: start;
}

.catering-order-toolbar {
  position: sticky;
  top: 86px;
  z-index: 3;
  padding: clamp(16px, 2.3vw, 28px);
  border: 1px solid rgba(255, 243, 223, .12);
  background: rgba(16, 7, 4, .86);
  backdrop-filter: blur(16px);
}

.catering-order-toolbar .order-filter-row {
  gap: 8px;
}

.catering-order-toolbar .menu-filter {
  min-height: 44px;
  border: 1px solid rgba(255, 243, 223, .16);
  background: rgba(255, 250, 240, .06);
  color: rgba(255, 250, 240, .84);
}

.catering-order-toolbar .menu-filter.is-active {
  border-color: var(--palm);
  background: var(--palm);
  color: var(--ink);
}

.catering-order-grid {
  /* Price-sheet rows, not photo cards. This grid lives in the LEFT column
     of .catering-order-studio (site/catering.html) alongside the sticky
     .catering-live-cart aside -- at a 1440px viewport its own column is
     only ~470px wide, nowhere near enough for a 2-up row grid to read as
     anything but a cramped card grid with the photos stripped out.
     One column at every breakpoint; the row itself gets the column's
     full width. */
  grid-template-columns: 1fr;
  gap: 0;
}

[data-catering-studio] .order-card {
  position: relative;
  cursor: pointer;
}

/* Catering price-sheet row (renderCatalog() in ordering.js, gated on
   isCateringPage / [data-catering-studio]). There is no per-item photo --
   59 catering items share ~7 stock photos, so an <img> per card just
   repeated the same handful of pictures and read as broken. This styles
   the row as a printed price sheet instead: name (wraps up to 2 lines)
   and price on the same first line, price pinned right and non-wrapping;
   a 2-line clamped description; quiet ingredient chips; the
   customize/add action on its own line, right-aligned. order.html's
   `.order-card` markup and rules (styles.css ~4048-4193) are untouched --
   this only targets the `.catering-sheet-row` class that ordering.js
   emits solely on the catering page.

   No dotted name->price leader. Real catalog names run 17-34 characters
   (median 26) at a 900-weight display size; at the ~430px content width
   available here the name alone consumes the line before there is any
   room left for a leader to occupy, so it renders as an invisible,
   effectively dead element. A clean baseline row (consistent name/price
   columns, no literal dots) reads more like a price sheet than a broken
   flourish would.

   Rows are separated by a single hairline `border-bottom` rather than a
   boxed border+background per row -- with one column and up to 59 rows
   per category, 59 stacked boxes (each with its own border, background,
   and shadow) read as a repeated card grid again, just without photos.
   A plain list with a hairline between rows and a hover/focus tint is
   what an actual printed price sheet looks like, and it is quieter at
   this row count. */
[data-catering-studio] .catering-sheet-row {
  display: grid;
  gap: 8px;
  border: 0;
  border-bottom: 1px solid rgba(255, 243, 223, .14);
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
  padding: clamp(16px, 2vw, 22px) 4px;
  transition: background-color .18s ease, border-color .18s ease;
}

[data-catering-studio] .catering-sheet-row:hover,
[data-catering-studio] .catering-sheet-row:focus-visible {
  background: rgba(255, 250, 240, .06);
  border-color: rgba(246, 167, 25, .5);
  outline: none;
}

[data-catering-studio] .catering-sheet-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

[data-catering-studio] .catering-sheet-head h3 {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: clamp(17px, 1.5vw, 21px);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: uppercase;
  color: #fffaf0;
}

[data-catering-studio] .catering-sheet-price {
  flex: 0 0 auto;
  font-family: var(--display);
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.2;
  letter-spacing: -.04em;
  color: #fffaf0;
  white-space: nowrap;
}

[data-catering-studio] .catering-sheet-desc {
  margin: 0;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: rgba(255, 242, 220, .68);
  font: 700 13px/1.5 var(--body);
  letter-spacing: 0;
  text-transform: none;
}

[data-catering-studio] .catering-sheet-ingredients {
  gap: 6px;
}

[data-catering-studio] .catering-sheet-ingredients li {
  padding: 5px 8px;
  border-color: rgba(255, 243, 223, .1);
  background: rgba(255, 250, 240, .04);
  color: rgba(255, 242, 220, .58);
  font-size: 10px;
  letter-spacing: .02em;
  text-transform: uppercase;
}

[data-catering-studio] .catering-sheet-row .order-card-modifier-hint {
  margin: 0;
}

[data-catering-studio] .catering-sheet-action {
  display: flex;
  justify-content: flex-end;
}

.catering-live-cart {
  top: 86px;
  border-color: rgba(246, 167, 25, .36);
  background:
    linear-gradient(180deg, rgba(27, 13, 7, .94), rgba(6, 53, 15, .84)),
    rgba(14, 8, 6, .92);
}

.catering-live-cart .order-cart-head h2 {
  color: #fffaf0;
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: clamp(30px, 4vw, 52px);
  font-weight: 900;
  letter-spacing: 0;
}

.catering-live-cart .order-cart-actions {
  grid-template-columns: .7fr 1.3fr;
}

.catering-live-cart [data-checkout-button] {
  min-height: 58px;
  font-size: 12px;
}

.catering-special-slab {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  padding: clamp(16px, 2.4vw, 28px);
  min-width: 0;
}

.catering-special-slab > div {
  min-width: 0;
}

.catering-special-slab > div h2 {
  font-size: clamp(28px, 3.4vw, 48px);
  overflow-wrap: anywhere;
}

.catering-special-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
}

.catering-special-slab article {
  display: grid;
  gap: 8px;
  align-content: start;
  min-width: 0;
  padding: 18px;
  border: 1px solid rgba(255, 243, 223, .14);
  background: rgba(255, 250, 240, .08);
}

.catering-special-slab strong {
  display: block;
  min-width: 0;
  font-family: var(--display);
  font-size: clamp(20px, 1.9vw, 30px);
  line-height: 1.02;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.catering-special-slab span {
  display: block;
  min-width: 0;
  color: rgba(255, 250, 240, .78);
  font: 900 12px/1.35 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

@media (max-width: 520px) {
  .catering-special-cards {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 980px) {
  .catering-studio-hero,
  .catering-order-studio,
  .catering-special-slab {
    grid-template-columns: 1fr;
  }

  .occasion-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .starter-pack-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .occasion-card.is-primary {
    grid-column: span 2;
  }

  /* .catering-order-grid is already grid-template-columns: 1fr at every
     breakpoint (see base rule) -- no override needed here. */

  .catering-order-toolbar,
  .catering-live-cart {
    position: static;
  }

  .order-layout,
  .order-lab-hero,
  .order-grid {
    grid-template-columns: 1fr;
  }

  .order-cart {
    position: static;
  }
}

@media (max-width: 760px) {
  .catering-studio-shell {
    padding-top: 80px;
  }

  .catering-studio-hero {
    min-height: 0;
  }

  .catering-hero-copy h1 {
    font-size: clamp(58px, 20vw, 86px);
  }

  .catering-visual-stage {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    min-height: 0;
  }

  .catering-proof-frame,
  .catering-proof-large {
    grid-row: auto;
    aspect-ratio: 1.12;
  }

  .catering-proof-tall {
    aspect-ratio: 1;
  }

  .occasion-lanes-head {
    display: grid;
    justify-content: start;
  }

  .occasion-card-grid,
  .starter-pack-grid {
    grid-template-columns: 1fr;
  }

  .occasion-card,
  .occasion-card.is-primary {
    grid-column: auto;
    min-height: 138px;
  }

  .catering-order-toolbar .order-filter-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .catering-live-cart .order-cart-actions {
    grid-template-columns: 1fr;
  }

  .order-lab-shell {
    padding-top: 88px;
    padding-inline: 20px;
    max-width: 100vw;
  }

  .order-lab-hero,
  .order-layout,
  .order-main,
  .order-toolbar,
  .order-lab-hero > div,
  .order-lab-status {
    max-width: 100%;
  }

  .order-lab-hero .hero-actions,
  .order-lab-hero .hero-actions .action {
    min-width: 0;
    max-width: 100%;
  }

  .order-lab-hero p,
  .order-lab-status p,
  .order-lab-status strong,
  .order-toolbar h2 {
    overflow-wrap: anywhere;
  }

  .order-lab-status strong {
    font-size: clamp(22px, 7vw, 30px);
  }

  .order-lab-hero h1,
  .order-toolbar h2,
  .order-cart-head h2,
  .order-modal-form h2 {
    font-size: clamp(22px, 8vw, 36px);
    line-height: .98;
  }

  .order-card-media {
    min-height: 200px;
  }

  .order-cart-toggle {
    display: block;
  }

  .order-cart {
    gap: 12px;
  }

  .order-cart:not(.is-open) .order-cart-items,
  .order-cart:not(.is-open) .order-customer-form,
  .order-cart:not(.is-open) .order-cart-summary,
  .order-cart:not(.is-open) .order-payment-choice,
  .order-cart:not(.is-open) .order-cart-actions,
  .order-cart:not(.is-open) .order-cart-footnote {
    display: none;
  }

  .order-cart.is-open .order-cart-items,
  .order-cart.is-open .order-customer-form,
  .order-cart.is-open .order-cart-summary,
  .order-cart.is-open .order-cart-actions,
  .order-cart.is-open .order-cart-footnote {
    display: grid;
  }

  .order-cart.is-open .order-payment-choice {
    display: flex;
  }

  .cart-line,
  .order-modal-inline,
  .order-form-grid,
  .order-cart-actions {
    grid-template-columns: 1fr;
  }

  .cart-line-meta {
    text-align: left;
  }
}


/* FAQ band. Visible copy is required for FAQPage rich results — the JSON-LD in
   index.html mirrors this text exactly. Keep them in sync if either changes. */
.faq-band {
  padding: clamp(48px, 7vw, 96px) clamp(18px, 5vw, 64px);
}

.faq-shell {
  max-width: 900px;
  margin: 0 auto;
}

.faq-shell h2 {
  margin: 10px 0 clamp(24px, 4vw, 44px);
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  line-height: 1.15;
}

.faq-list {
  display: grid;
  gap: clamp(14px, 2vw, 22px);
  margin: 0;
}

.faq-item {
  padding: clamp(16px, 2.2vw, 26px);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(0, 0, 0, .16);
}

.faq-item dt {
  font-weight: 800;
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  margin-bottom: 8px;
}

.faq-item dd {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.faq-item dd a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.faq-item dd a:hover,
.faq-item dd a:focus-visible {
  color: var(--paper);
}

/* Unit / Serves line from the menu sheet (2026-10-08). */
.order-card-unit {
  margin: 0.25rem 0 0;
  font-size: 0.85em;
  opacity: 0.75;
}

/* Table ordering is for guests already dining at M&M. */
.hero-table-note {
  margin: 12px 0 0;
  color: var(--cream, #fff4d6);
  font-size: 0.9rem;
  line-height: 1.5;
}