/* Marketing homepage — the cinematic surface.
 *
 * Every colour, size and radius here resolves to a token from
 * packages/design-tokens/tokens.css. This file adds motion and scale on top
 * of the brand system; it does not introduce a second one. If something here
 * needs a colour that isn't a token, that's a signal the token set is missing
 * something — add it there, not here.
 *
 * This file is also loaded by every /pages/* document and by order, track
 * and account for the header, footer, reveals and view transitions, so those
 * blocks are shared chrome; everything from "hero" down is homepage-only.
 *
 * The 2026-09-19 rebuild
 * ----------------------
 * Antigravity's mock (localhost:8081) was read as a design spec -- section
 * order and rhythm, a photo rotator with a proof dock, a filterable menu grid (the pinned four-chapter
 * screen was removed 2026-10-08),
 * promise cards, a quote block, three visit cards, a phone order bar -- and
 * rebuilt here inside our stack: our tokens, our header, our self-hosted
 * motion libraries, our copy. Its surface scale was the one honest thing
 * worth taking whole: a page that is dark but not black, six steps a
 * half-tone apart with warmth in them (tokens.css, 2026-09-19).
 */

/* Anchor targets clear the fixed header when the browser jumps natively —
   home.js applies its own offset through Lenis, but this is what catches a
   visitor whose JS never ran. */
html { scroll-padding-top: 84px; }

/* The ordering app's stylesheet sets `* { box-sizing: border-box }`; this
   page and the /pages/* documents did not load it, so a .ui-btn rendered
   62px here and 44px there for want of one rule. One rule, here, shared. */
.home *, .home *::before, .home *::after { box-sizing: border-box; }
.home { background: var(--bg); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* --------------------------------------------------------------- header */
.home-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-24);
  padding: var(--space-18) var(--gutter);
  /* Transparent over the hero, then dark glass once the page scrolls under
     it — the class is toggled by home.js / site.js. */
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              padding var(--dur) var(--ease);
  view-transition-name: site-header;
}
.home-header.is-stuck {
  background: rgba(19, 14, 11, .82);
  -webkit-backdrop-filter: blur(16px) saturate(1.2); /* Safari only took this unprefixed at 18 */
  backdrop-filter: blur(16px) saturate(1.2);
  border-bottom-color: var(--gold-edge);
  padding-top: var(--space-12); padding-bottom: var(--space-12);
}
.home-header .brand-mark { display: inline-flex; align-items: center; min-height: 44px; }
.home-nav { display: flex; align-items: center; gap: var(--space-2); }
.home-nav a {
  color: var(--ink-dim); font-size: var(--text-sm); text-decoration: none;
  /* 44px floor: it is the same nav on every page. */
  display: inline-flex; align-items: center; gap: var(--space-6); min-height: 44px;
  padding-inline: var(--space-12);
  position: relative;
  transition: color var(--dur-fast) var(--ease);
}
.home-nav a:hover { color: var(--ink); }
.home-nav a[aria-current='page'] { color: var(--ink); }
.home-nav a[aria-current='page']::after { left: var(--space-12); right: var(--space-12); }
.home-nav a::after {
  content: ''; position: absolute; left: 50%; right: 50%; bottom: 6px;
  height: 1px; background: var(--accent);
  transition: left var(--dur) var(--ease), right var(--dur) var(--ease);
}
.home-nav a:hover::after { left: var(--space-12); right: var(--space-12); }
/* The handset beside the number, in every header and on the Visit card.
   Under 560px the digits go and the icon carries the link (aria-label on the
   anchor says the number). */
.ico-phone { width: 1.05em; height: 1.05em; fill: currentColor; flex: 0 0 auto; }
/* .nav-call takes the plain .home-nav a colour: Order online stays the one accent in the header (audit 2026-09-25). */
@media (max-width: 560px) {
  .home-nav a { padding-inline: var(--space-8); }
  .nav-call .nav-call-num { display: none; }
  .nav-call { min-width: 44px; justify-content: center; }
  .nav-call .ico-phone { width: 1.3em; height: 1.3em; }
}

/* ------------------------------------------------------ page transitions
   Same-origin navigations cross-fade instead of flashing; the header is a
   shared element so it stays put while the page beneath it changes. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 160ms var(--ease) both chrome-fade-out; }
::view-transition-new(root) { animation: 220ms var(--ease) both chrome-fade-in; }
::view-transition-old(site-header), ::view-transition-new(site-header) { animation: none; }
@keyframes chrome-fade-out { to { opacity: 0; } }
@keyframes chrome-fade-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ----------------------------------------------------------------- hero */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh; /* keeps mobile browser chrome from cropping the copy */
  display: flex; align-items: center;
  overflow: hidden;
  background: var(--bg-deep);
}
.hero-media { position: absolute; inset: 0; } /* no will-change: GSAP promotes it only while it scrubs */
/* The rotator. Frames stack; the active one is visible and pushes in slowly
   over its whole stay. The film frame holds the still and the <video>. */
.hero-frame {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0; transform: scale(1);
  transition: opacity 1.4s var(--ease), transform 7s linear;
  pointer-events: none;
}
.hero-frame.is-active { opacity: 1; transform: scale(1.05); }
.hero-frame[data-frame='film'].is-active { transform: none; } /* the film moves on its own */
.hero-video { width: 100%; height: 100%; display: block; object-fit: cover; }
.hero-video[hidden] { display: none; }
.hero-frame picture, .hero-frame video { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* The video sits over the still and fades in only once it is actually
   playing (home.js adds .is-playing), so a slow server shows the still, not
   a black rectangle. */
.hero-frame video { opacity: 0; transition: opacity .9s var(--ease); }
.hero-frame video.is-playing { opacity: 1; }

/* Two stacked scrims: the vertical pass anchors the header and the dock, the
   horizontal one carves a dark bed under the copy. Warm-tinted, because a
   neutral black over warm footage reads as grey haze. */
.hero-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(14,10,8,.72) 0%, rgba(14,10,8,.16) 30%, rgba(14,10,8,.58) 72%, var(--bg) 100%),
    linear-gradient(90deg, rgba(14,10,8,.86) 0%, rgba(14,10,8,.5) 44%, rgba(14,10,8,.1) 100%);
}

.hero-copy {
  position: relative; z-index: 2;
  max-width: 780px;
  padding: 0 var(--gutter);
  margin-bottom: clamp(80px, 14vh, 150px); /* room for the dashes and the dock */
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-16);
  will-change: transform, opacity;
}
/* The gold pill: the one place the second colour holds a line of text, at
   caps size, on a tint of itself. 8.5:1 on the darkest tint it can land on. */
.hero-pill {
  display: inline-flex; align-items: center; gap: var(--space-8);
  padding: var(--space-8) var(--space-16);
  border-radius: var(--radius-pill);
  background: rgba(14,10,8,.72); border: 1px solid var(--gold);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: var(--gold); font-size: var(--text-sm); font-weight: var(--weight-bold, 700);
  /* Sentence case: a 49-character phrase in caps reads slowly (audit 2026-09-25). */
  letter-spacing: .01em;
}
.hero-copy h1 {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  line-height: .98;
  letter-spacing: -.035em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
.hero-copy > p {
  font-size: var(--text-lead); color: var(--ink-dim);
  line-height: var(--leading-body); margin: 0; max-width: 48ch;
  text-wrap: pretty;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-12); margin-top: var(--space-8); }
/* A ghost button over footage: the hairline is gold on a faint bed so it
   never vanishes against a bright frame. */
.hero-actions .ui-btn--ghost { border-color: var(--gold-edge-hi); background: rgba(19,14,11,.35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hero-actions .ui-btn--ghost:hover { border-color: var(--gold); }

/* Dash indicators, bottom right, above the dock. Real buttons: 44px tall hit
   areas around a 4px dash. */
.hero-dashes {
  position: absolute; right: var(--gutter); bottom: clamp(88px, 12vh, 130px); z-index: 3;
  display: flex; gap: var(--space-4);
}
.hero-dash {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  padding: 20px var(--space-10); margin: 0; position: relative; min-width: 44px;
}
.hero-dash::before {
  content: ''; display: block; width: 24px; height: 4px; border-radius: 4px;
  background: rgba(233,184,114,.28);
  transition: width var(--dur-slow) var(--ease), background var(--dur) var(--ease);
}
.hero-dash.is-active::before { width: 44px; background: var(--gold); box-shadow: 0 0 10px rgba(233,184,114,.45); }
.hero-dash:hover::before { background: rgba(233,184,114,.6); }
.hero-dash:focus-visible { outline: 2px solid var(--gold); outline-offset: -6px; border-radius: var(--radius-sm); }

/* The proof dock: raised over the seam between the hero and the page. */
.proof-dock-wrap { position: relative; z-index: 4; padding: 0 var(--gutter); margin-top: calc(var(--space-40) * -1); }
.proof-dock {
  list-style: none; margin: 0 auto; padding: var(--space-20) var(--space-24);
  max-width: var(--maxw);
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-16);
  background: var(--bg-card); border: 1px solid var(--gold-edge);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(0,0,0,.2);
}
.proof-dock li { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; padding-left: var(--space-16); border-left: 1px solid var(--gold-edge); }
.proof-dock li:first-child { border-left: 0; padding-left: 0; }
.proof-dock strong {
  font-family: var(--font-display);
  font-size: var(--text-xl); color: var(--gold);
  font-weight: var(--weight-semi); letter-spacing: -.01em; line-height: 1.05;
}
.proof-dock span {
  font-size: var(--text-sm); color: var(--ink-dim); line-height: 1.35;
}


/* -------------------------------------------------------------- section */
.section { padding: var(--section-y) var(--gutter); max-width: var(--maxw); margin: 0 auto; }
.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--space-24); margin-bottom: var(--space-40);
}
.section-head .ui-eyebrow { margin-bottom: var(--space-12); }
.section-head > div { min-width: 0; flex: 1; }
/* In a flex column the eyebrow's rule shrinks to nothing; stretch it. */
.section-head .ui-eyebrow--rule, .split .copy .ui-eyebrow--rule { align-self: stretch; }
.ui-eyebrow--rule::after { background: linear-gradient(90deg, var(--gold-edge-hi), transparent); }
.section-more {
  /* The same secondary style as "See the menu" / "Read our story" (ghost
     pill), so one kind of secondary action looks one way (audit 2026-09-25). */
  display: inline-flex; align-items: center; gap: var(--space-8); min-height: 44px;
  padding: 0 var(--space-18); border: 1px solid var(--line); border-radius: var(--radius-pill);
  color: var(--ink); font-weight: var(--weight-semi); font-size: var(--text-sm);
  text-decoration: none; white-space: nowrap;
  transition: border-color var(--dur-fast) var(--ease), gap var(--dur) var(--ease);
}
.section-foot { display: flex; justify-content: center; margin-top: var(--space-32); }
.section-more:hover { border-color: var(--line-strong); gap: var(--space-12); }

/* A band: a section that steps forward from the page by one half-tone, with
   a low warm glow in one corner so it has light in it. The gradient ends on
   --page-bg, not the band's own --bg, so the edges are soft on both sides. */
.band {
  --page-bg: var(--bg);
  background:
    radial-gradient(ellipse 60% 50% at 100% 0%, var(--gold-glow), transparent 70%),
    linear-gradient(180deg, var(--page-bg) 0%, var(--bg-band) 8%, var(--bg-band) 92%, var(--page-bg) 100%);
}

/* ----------------------------------------------------------------- menu
   Eight wide, landscape panels in two columns -- a photograph the width of
   half the page with the category's name set on it. The photography is
   landscape, so the panels are; nothing scrolls sideways. */
.cuisine-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); }
.cuisine-tile {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--space-4);
  padding: var(--space-16) var(--space-20); overflow: hidden;
  aspect-ratio: 21 / 9;
  border-radius: var(--radius-lg); border: 1px solid var(--gold-edge);
  background: var(--bg-card); color: var(--ink); text-decoration: none;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.cuisine-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-slow) var(--ease); }
/* Text sits on a gradient that only darkens the lower third, so the plate
   stays bright and the words stay readable. */
.cuisine-tile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,10,8,0) 38%, rgba(14,10,8,.55) 70%, rgba(14,10,8,.88) 100%); }
.cuisine-tile:hover { border-color: var(--gold-edge-hi); transform: translateY(-3px); }
.cuisine-tile:hover img { transform: scale(1.04); }
.cuisine-tile:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* Name and sub-line sit in normal flow at the foot of the panel (the tile is
   a bottom-aligned flex column), so a wrapped line pushes up, never over. */
.cuisine-name, .cuisine-sub { position: relative; z-index: 1; }
.cuisine-name { font-family: var(--font-display); font-weight: var(--weight-semi); font-size: var(--text-xl); letter-spacing: -.01em; line-height: 1.1; text-wrap: balance; }
.cuisine-sub { font-size: var(--text-sm); line-height: 1.35; color: var(--ink-dim);  text-wrap: balance; }
/* The live dish count, top right, as a gold chip. Empty until /api/menu answers. */
.cuisine-count { position: absolute; top: var(--space-14); right: var(--space-14); z-index: 1; padding: var(--space-4) var(--space-10); border-radius: var(--radius-pill); background: rgba(14,10,8,.7); border: 1px solid var(--gold-edge-hi); color: var(--gold); font-size: var(--text-xs); font-weight: var(--weight-semi); letter-spacing: var(--tracking-caps); text-transform: uppercase; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.cuisine-count:empty { display: none; }

/* ------------------------------------------------------------- promises */
.promise-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-16); }
.promise-card {
  background: var(--bg-card); border: 1px solid var(--gold-edge); border-radius: var(--radius-lg);
  padding: var(--space-24); display: flex; flex-direction: column; gap: var(--space-8);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
/* Static cards: no hover change and no 01-04 numbers, so nothing here looks
   interactive (audit 2026-09-25). A short gold rule marks each card instead. */
.promise-card::before { content: ''; display: block; width: 28px; height: 2px; border-radius: 2px; background: var(--gold); }
.promise-card strong { color: var(--ink); font-size: var(--text-lead); font-weight: var(--weight-semi); margin-top: var(--space-6); }
.promise-card p { margin: 0; color: var(--ink-dim); font-size: var(--text-sm); line-height: var(--leading-body); text-wrap: pretty; }

/* ---------------------------------------------------------------- split */
.split { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.split .copy {
  padding: var(--section-y) clamp(var(--space-24), 6vw, var(--space-80));
  display: flex; flex-direction: column; justify-content: center;
  align-items: flex-start; gap: var(--space-16);
}
.split .copy p { color: var(--ink-dim); font-size: var(--text-base); line-height: var(--leading-body); margin: 0; max-width: 46ch; text-wrap: pretty; }
.split .media { position: relative; overflow: hidden; min-height: 560px; background: var(--bg-card-hi); }
.split .media-img {
  position: absolute; left: 0; right: 0; top: -12%; bottom: -12%;
  background-size: cover; background-position: center;
  will-change: transform;
}
.story-section {
  --page-bg: var(--bg);
  background:
    radial-gradient(ellipse 50% 60% at 0% 100%, var(--gold-glow), transparent 70%),
    var(--bg-band);
}
/* The quote block: the restaurant's own sentence, on a gold bar. */
.story-quote {
  margin: 0; padding: var(--space-16) var(--space-20);
  border-left: 3px solid var(--gold); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--gold-tint); max-width: 46ch;
}
.story-quote p { font-family: var(--font-display); font-style: italic; font-size: var(--text-lead); line-height: 1.45; color: var(--ink); }
.story-stats {
  display: flex; gap: var(--space-40);
  margin-top: var(--space-8); padding-top: var(--space-24);
  border-top: 1px solid var(--line);
  width: 100%; max-width: 46ch;
}
.story-stats strong { display: block; font-family: var(--font-display); font-size: var(--text-2xl); color: var(--gold); line-height: 1; letter-spacing: -.02em; }
.story-stats span { display: block; margin-top: var(--space-6); font-size: var(--text-sm); color: var(--ink-dim); } /* sentence case: a phrase, not a label */

/* -------------------------------------------------------------- gallery */
.gallery-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-12); }
.gallery-tile { display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--gold-edge); background: var(--bg-card-hi); }
.gallery-tile:nth-child(1), .gallery-tile:nth-child(4) { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.gallery-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-slow) var(--ease); }
.gallery-tile:hover img { transform: scale(1.04); }
.gallery-tile:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.catering-card {
  margin-top: var(--space-40);
  display: grid; grid-template-columns: 1.1fr 1fr; overflow: hidden;
  background: var(--bg-card); border: 1px solid var(--gold-edge); border-radius: var(--radius-lg);
}
.catering-copy { padding: clamp(var(--space-24), 4vw, var(--space-56)); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-12); }
.catering-copy .ui-eyebrow { color: var(--gold); margin: 0; }
.catering-copy h3 { font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1.15; letter-spacing: var(--tracking-tight); color: var(--ink); margin: 0; text-wrap: balance; }
.catering-copy p { margin: 0; color: var(--ink-dim); font-size: var(--text-base); line-height: var(--leading-body); max-width: 48ch; text-wrap: pretty; }
.catering-actions { display: flex; flex-wrap: wrap; gap: var(--space-12); margin-top: var(--space-8); }
.catering-actions .ico-phone { margin-right: var(--space-6); }
.catering-photo { min-height: 300px; background-size: cover; background-position: center; }

/* ----------------------------------------------------------------- proud */
.proud-band { padding: var(--space-40) var(--gutter); text-align: center; border-block: 1px solid var(--gold-edge); background: var(--gold-tint); }
.proud-line { margin: 0 auto; max-width: 30ch; font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1.2; letter-spacing: var(--tracking-tight); color: var(--ink); text-wrap: balance; }
.proud-line strong { color: var(--gold); font-weight: inherit; }
@media (min-width: 701px) { .proud-line { max-width: none; } }

/* ------------------------------------------------------------------ cart */
.cart-band { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 0; overflow: hidden; border: 1px solid var(--gold-edge); border-radius: var(--radius-lg); background: var(--bg-card); max-width: var(--maxw); margin-inline: auto; margin-block: var(--space-48, 48px); }
.cart-band-media { min-height: 320px; background-size: cover; background-position: center; }
.cart-band-copy { display: flex; flex-direction: column; justify-content: center; gap: var(--space-16); padding: var(--space-40, 40px); }
.cart-band-copy .ui-display { font-size: var(--text-3xl); }
.cart-band-copy p { margin: 0; color: var(--ink-dim); font-size: var(--text-base); line-height: var(--leading-body); max-width: 46ch; }
@media (max-width: 800px) { .cart-band { grid-template-columns: 1fr; margin-inline: var(--gutter); } .cart-band-media { min-height: 220px; } .cart-band-copy { padding: var(--space-24); } }

/* ------------------------------------------------------------ instagram */
/* Six tiles in one row: five photographs and the follow tile. */
.insta-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-8); }
.insta-tile, .insta-follow a { display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--gold-edge); background: var(--bg-card-hi); }
.insta-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-slow) var(--ease); }
.insta-tile:hover img { transform: scale(1.05); }
.insta-tile:focus-visible, .insta-follow a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* The tile is its own size container, so the handle is sized to the tile and
   never wider than it (17 characters; it cannot wrap and must not clip). */
.insta-follow a {
  container-type: inline-size;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4%; /* a percentage: cqw on the container itself would measure the page */
  padding: 6%; /* a percentage, not cqw: cqw on the container itself would measure an ancestor */ text-align: center; background: var(--accent); border-color: var(--accent); color: var(--ink-onAccent);
}
.insta-icon { flex: 0 0 auto; width: clamp(28px, 24cqw, 44px); height: clamp(28px, 24cqw, 44px); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.insta-follow-name { font-weight: var(--weight-semi); font-size: var(--text-xs); line-height: 1.1; white-space: nowrap; max-width: 100%; }
.insta-follow-cta { font-size: var(--text-xs); font-weight: var(--weight-semi); letter-spacing: var(--tracking-caps); text-transform: uppercase; padding: 2cqw 6cqw; border-radius: 999px; background: var(--ink-onAccent); color: var(--accent); }
.insta-follow a, .insta-follow a:hover { text-decoration: none; }
.insta-follow a:hover { filter: brightness(1.08); }
/* Type steps up with the tile, in whole token sizes (never an in-between value):
   the handle is 17 characters and must stay inside the tile at every size. */
@container (min-width: 150px) { .insta-follow-name, .insta-follow-cta { font-size: var(--text-sm); } }
@container (min-width: 190px) { .insta-follow-name, .insta-follow-cta { font-size: var(--text-base); } }

/* -------------------------------------------------------------- reviews */
.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-16); }
.review-card {
  background: var(--bg-card); border: 1px solid var(--gold-edge);
  border-radius: var(--radius-lg); padding: var(--space-24); margin: 0;
  position: relative;
  transition: border-color var(--dur) var(--ease);
}
.review-card:hover { border-color: var(--gold-edge-hi); }
.review-card::before {
  content: '\201C';
  font-family: var(--font-display); font-size: 52px; line-height: 1;
  color: var(--gold); opacity: .55;
  position: absolute; top: 12px; left: 18px;
}
.review-card p { color: var(--ink-dim); font-size: var(--text-base); line-height: var(--leading-body); margin: var(--space-24) 0 0; text-wrap: pretty; }

/* ---------------------------------------------------------------- visit */
.visit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-16); }
.visit-card {
  background: var(--bg-card); border: 1px solid var(--gold-edge); border-radius: var(--radius-lg);
  padding: var(--space-24); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-10);
}
.visit-card-label { color: var(--gold); font-size: var(--text-xs); font-weight: var(--weight-semi); letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.visit-card-lead { margin: 0; font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.2; color: var(--ink); display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-10); }
.visit-card p { margin: 0; color: var(--ink-dim); font-size: var(--text-sm); line-height: var(--leading-body); }
.visit-card .ui-btn { margin-top: auto; }
.visit-link { color: var(--accent-text); text-decoration: none; }
.visit-link:hover { color: var(--accent-hover); }
.visit-phone { color: var(--accent-text); text-decoration: none; display: inline-flex; align-items: center; gap: var(--space-8); min-height: 44px; }
.visit-phone:hover { color: var(--accent-hover); }
.visit-card .hours { width: 100%; display: grid; gap: var(--space-4); }
.visit-card .hrow { display: flex; justify-content: space-between; gap: var(--space-12); font-size: var(--text-sm); color: var(--ink-dim); }
.visit-card .hrow span:last-child { color: var(--ink); font-variant-numeric: tabular-nums; }
/* The open/closed pill. Green only where it means "open". */
.open-pill {
  display: inline-flex; align-items: center; gap: var(--space-6);
  padding: var(--space-4) var(--space-12); border-radius: var(--radius-pill);
  font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  background: var(--gold-tint); border: 1px solid var(--gold-edge-hi); color: var(--gold);
}
.open-pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.open-pill.is-open { background: var(--ok-tint); border-color: var(--ok-edge); color: var(--ok); }
.open-pill.is-shut { background: transparent; border-color: var(--line-strong); color: var(--ink-dim); }

/* ------------------------------------------------------------ order bar */
.order-bar {
  position: fixed; left: var(--space-12); right: var(--space-12); bottom: calc(var(--space-12) + env(safe-area-inset-bottom, 0px));
  z-index: 45; display: none; align-items: center; justify-content: space-between; gap: var(--space-12);
  padding: var(--space-10) var(--space-10) var(--space-10) var(--space-16);
  background: rgba(30,23,18,.92); border: 1px solid var(--gold-edge-hi); border-radius: var(--radius-lg);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 16px 40px rgba(0,0,0,.5);
  transform: translateY(120%); opacity: 0;
  transition: transform var(--dur-slow) var(--ease), opacity var(--dur-slow) var(--ease);
}
.order-bar.is-on { transform: none; opacity: 1; }
.order-bar-text { display: flex; flex-direction: column; min-width: 0; }
.order-bar-text strong { color: var(--ink); font-size: var(--text-sm); }
.order-bar-text span { color: var(--gold); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; white-space: nowrap; }
.order-bar .ui-btn { white-space: nowrap; }

/* --------------------------------------------------------------- footer */
.home-footer {
  padding: var(--space-80) var(--gutter) var(--space-32);
  border-top: 1px solid var(--gold-edge);
  background: linear-gradient(180deg, var(--bg), var(--bg-deep));
}
.footer-cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-40); margin-bottom: var(--space-56); max-width: var(--maxw); margin-inline: auto; }
.footer-col strong { display: block; color: var(--ink); font-size: var(--text-sm); font-weight: var(--weight-semi); margin-bottom: var(--space-16); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.footer-col a, .footer-col span { display: block; color: var(--ink-dim); font-size: var(--text-sm); text-decoration: none; margin-bottom: var(--space-12); line-height: var(--leading-snug); transition: color var(--dur-fast) var(--ease); }
.footer-col a:hover { color: var(--ink); }
.footer-brand strong { font-family: var(--font-display); color: var(--ink); font-size: var(--text-lead); letter-spacing: .04em; text-transform: none; }
.footer-brand span { color: var(--ink-faint); }
.footer-legal {
  display: flex; flex-wrap: wrap; gap: var(--space-16); justify-content: space-between;
  padding-top: var(--space-24); border-top: 1px solid var(--line-soft);
  color: var(--ink-dim); font-size: var(--text-sm);
  max-width: var(--maxw); margin-inline: auto;
}
.footer-legal a { color: inherit; text-decoration: none; transition: color var(--dur-fast) var(--ease); }
.footer-legal a:hover { color: var(--ink); }

/* ================================================================ motion
   `.js-motion` is set on <html> before first paint (inline script in the
   head) and removed again by home.js if the animation libraries never load.
   The hidden state lives HERE, in CSS, and is undone by adding `.is-in`: a
   class can only reveal, so no path leaves a section blank. */
.js-motion [data-reveal],
.js-motion [data-reveal-group] > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.js-motion [data-reveal].is-in,
.js-motion [data-reveal-group] > .is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .hero-frame { transition: opacity .01s; transform: none !important; }
}

/* ----------------------------------------------------------- responsive */
@media (max-width: 1100px) {
  .promise-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-strip { grid-template-columns: repeat(4, 1fr); }
  .footer-cols { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .home-header { padding: var(--space-12) var(--space-16); }
  .home-header > .ui-btn { white-space: nowrap; }
  .home-header.is-stuck { padding-top: var(--space-10); padding-bottom: var(--space-10); }
  /* 701-900px (small tablets): the nav on its own line under the brand and
     the CTA, one scrolling row. Phones (<=700px) get the menu button and
     drawer below instead (Spencer, 2026-09-25). */
  .home-header { flex-wrap: wrap; row-gap: var(--space-10); }
  .home-nav { display: flex; order: 3; flex-basis: 100%; gap: var(--space-2); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .home-nav::-webkit-scrollbar { display: none; }
  .home-nav a { white-space: nowrap; }
  .home-nav::after { content: ''; flex: 0 0 var(--space-4); }
  /* The header is two rows tall here; the hero centres its copy on the
     viewport, so pad the top to keep the headline clear of the nav. */
  .hero { min-height: 92svh; padding-top: 150px; }
  .hero-copy { margin-bottom: clamp(90px, 18vh, 150px); }
  .hero-dashes { right: auto; left: var(--gutter); bottom: clamp(70px, 10vh, 110px); }
  .proof-dock { grid-template-columns: 1fr 1fr; gap: var(--space-14) var(--space-16); }
  .proof-dock li:nth-child(3) { border-left: 0; padding-left: 0; }
  /* The heading costs two lines a phone screen cannot spare; the eyebrow
     and the rail say what this is. */
  .split { grid-template-columns: 1fr; }
  .split .media { min-height: 320px; order: -1; }
  .split .copy { padding: var(--space-56) var(--space-20); }
  .catering-card { grid-template-columns: 1fr; }
  .catering-photo { min-height: 220px; order: -1; }
  .review-grid, .visit-grid { grid-template-columns: 1fr; }
  .insta-grid { grid-template-columns: repeat(3, 1fr); }
  .gallery-strip { grid-template-columns: repeat(2, 1fr); }
  .gallery-tile:nth-child(1), .gallery-tile:nth-child(4) { grid-column: span 2; grid-row: auto; aspect-ratio: 16 / 9; }
  .order-bar { display: flex; }
}

/* Laptop screens under ~860px tall: the pinned screen must fit in one
   viewport, so the section heading goes (the eyebrow and tabs remain) and
   the chapter type steps down. */
@media (min-width: 901px) and (max-height: 860px) {
}

/* A short landscape phone has no room for a sticky screen: the chapters
   stack and the section takes its natural height. */
@media (max-height: 520px) and (orientation: landscape) {
}

@media (max-width: 700px) {
  .hero-actions { width: 100%; }
  .hero-actions a { flex: 1; text-align: center; }
  /* Two across, still landscape: eight full-width panels were a 2,000px
     column on a phone. 4:3 keeps the plate readable at ~170px wide. */
  .cuisine-grid { grid-template-columns: 1fr 1fr; gap: var(--space-10); }
  .cuisine-tile { aspect-ratio: 4 / 3; }
  .cuisine-tile { padding: var(--space-12); gap: var(--space-2); }
  /* Small panels: the caption covers half the plate, so the shade starts higher. */
  .cuisine-tile::after { background: linear-gradient(180deg, rgba(14,10,8,0) 15%, rgba(14,10,8,.6) 50%, rgba(14,10,8,.92) 100%); }
  .cuisine-name { font-size: var(--text-md); }
  .cuisine-sub { font-size: var(--text-xs); }
  .cuisine-count { top: var(--space-8); right: var(--space-8); }
  .promise-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .proof-dock { padding: var(--space-16); }
  .proof-dock strong { font-size: var(--text-lead); }
  /* Brand column full width, then the three link columns two across. */
  .footer-cols { grid-template-columns: 1fr 1fr; gap: var(--space-24) var(--space-20); }
  .footer-brand { grid-column: 1 / -1; }
  .footer-col a { min-height: 44px; display: flex; align-items: center; margin-bottom: 0; }
  .footer-legal { flex-direction: column; gap: var(--space-8); }
  .story-stats { gap: var(--space-24); }
  .home-footer { padding-bottom: calc(var(--space-32) + 72px); } /* clear the order bar */
}

/* ------------------------------------------------------------ phone menu
   <=700px: menu button (two lines) at the top left, destinations in a drawer
   from the left, built by nav-drawer.js from the header's own nav. Above
   700px none of this shows and the header nav is untouched. */
.menu-btn, .site-drawer, .site-drawer-scrim { display: none; }
@media (max-width: 700px) {
  .home-header { flex-wrap: nowrap; }
  /* html + body in the selector: pages.css re-shows the nav with
     `.is-content .home-nav` and loads after this file. */
  html body .home-header .home-nav { display: none; }
  .home-header .brand-mark { margin-right: auto; }
  .menu-btn {
    display: grid; place-items: center; flex: 0 0 auto;
    width: 44px; height: 44px; margin-left: calc(-1 * var(--space-10));
    background: transparent; border: 0; border-radius: var(--radius-sm); cursor: pointer; color: var(--ink);
  }
  .menu-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
  .menu-btn span, .menu-btn span::after {
    content: ''; display: block; width: 22px; height: 2px; border-radius: 2px; background: currentColor;
  }
  .menu-btn span { position: relative; transform: translateY(-4px); }
  .menu-btn span::after { position: absolute; top: 8px; left: 0; }

  .site-drawer {
    display: flex; flex-direction: column;
    position: fixed; z-index: 1000; top: 0; left: 0; bottom: 0;
    width: min(320px, 86vw);
    padding: max(var(--space-20), env(safe-area-inset-top)) var(--space-20) max(var(--space-20), env(safe-area-inset-bottom));
    background: var(--bg-raised); border-right: 1px solid var(--gold-edge);
    box-shadow: 0 0 48px rgba(0,0,0,.55);
    overflow-y: auto; overscroll-behavior: contain;
    transform: translateX(-102%); visibility: hidden;
    transition: transform .26s var(--ease), visibility 0s linear .26s;
  }
  .drawer-open .site-drawer { transform: none; visibility: visible; transition: transform .26s var(--ease); }
  .site-drawer-scrim { position: fixed; inset: 0; z-index: 999; background: rgba(6,5,4,.62); }
  .drawer-open .site-drawer-scrim { display: block; }
  .drawer-open, .drawer-open body { overflow: hidden; }
  .site-drawer-head { padding: var(--space-6) 0 var(--space-20); border-bottom: 1px solid var(--line-soft); }
  .site-drawer-links { display: flex; flex-direction: column; padding: var(--space-12) 0; }
  .site-drawer-links a {
    display: flex; align-items: center; min-height: 52px; padding: 0 var(--space-12);
    border-radius: var(--radius-sm); color: var(--ink-dim); text-decoration: none;
    font-size: var(--text-md); font-weight: var(--weight-semi);
  }
  .site-drawer-links a:hover, .site-drawer-links a:focus-visible { color: var(--ink); background: var(--bg-card); outline: none; }
  .site-drawer-links a[aria-current='page'] { color: var(--ink); background: var(--bg-card); box-shadow: inset 3px 0 0 var(--accent); }
  .site-drawer-foot { margin-top: auto; display: grid; gap: var(--space-12); padding-top: var(--space-16); border-top: 1px solid var(--line-soft); }
  .site-drawer-call { color: var(--accent-text); font-weight: var(--weight-semi); text-decoration: none; min-height: 44px; display: flex; align-items: center; }
  /* One-row header now: the hero no longer has to clear a second nav row. */
  .hero { padding-top: 104px; }
}
@media (max-width: 700px) and (prefers-reduced-motion: reduce) {
  .site-drawer, .drawer-open .site-drawer { transition: none; }
}
.home .ui-display--lg { font-size: var(--text-hero); } /* 78, not a second 76px size */

/* Footer policy row on phones: every control a 44px tap target (the
   "Cookie choices" button measured 89x20, audit 2026-09-25). */
@media (max-width: 700px) {
  .footer-policies a, .footer-policies button,
  .footer-legal a, .footer-legal button { display: inline-flex; align-items: center; min-height: 44px; }
}


/* ------------------------------------------- phones and small tablets
   Spencer's phone screenshots, 2026-09-27 (Galaxy S24 Ultra, iPhones).

   The four chapters: the pinned 100svh screen does not fit photo + tabs +
   chapter on a phone. The grid row holding the photo was squeezed below the
   photo's height (overflow:hidden lets it shrink to 0), so the chapter's
   kicker and headline landed ON the photo, over its badge. Here the section
   is not pinned at all: natural height, the photo at full size, the chapter
   below it, and the tabs switch chapters (home.js already does that when
   the screen is not sticky). One chapter at a time, as on desktop. */
@media (max-width: 900px) {
}

/* The eight menu doors on a phone: at ~170px wide a two-line name and a
   two-line line of dishes covered the whole plate. The caption moves under
   the photograph, like a menu card; nothing sits on the food. */
@media (max-width: 700px) {
  .cuisine-grid > li { display: flex; }
  .cuisine-tile { flex: 1; aspect-ratio: auto; padding: 0; gap: 0; justify-content: flex-start; }
  .cuisine-tile img { position: relative; inset: auto; height: auto; aspect-ratio: 4 / 3; }
  .cuisine-tile::after { display: none; }
  .cuisine-name { padding: var(--space-10) var(--space-12) var(--space-2); font-size: var(--text-md); }
  .cuisine-sub { padding: 0 var(--space-12) var(--space-12); font-size: var(--text-sm); color: var(--ink-dim); }
}

/* Where delivery/takeout hours differ from the store's (2026-09-30). */
.hours-svc-note { margin: var(--space-10) 0 0; color: var(--ink-dim); font-size: var(--text-sm); line-height: 1.5; }

/* Phones: two across, so the handle fits the follow tile at a readable size. */
@media (max-width: 600px) {
  .insta-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Phones (<= 700px): the page is centred, the way Sabri asked (2026-10-09). Headings,
   eyebrows, cards, the story, the catering copy and the visit cards sit on the middle
   line; only things that read as a table (opening hours) keep their two columns. */
@media (max-width: 700px) {
  .hero-copy { align-items: center; text-align: center; }
  .hero-actions { justify-content: center; }
  .section-head, .section-foot, .split .copy, .catering-copy, .cart-band-copy, .promise-card, .review-card, .visit-card, .story-stats { text-align: center; }
  .section-head { justify-content: center; }
  .section-head > div { flex: 1 1 100%; }
  .ui-eyebrow--rule { justify-content: center; }
  .ui-eyebrow--rule::before { content: ''; flex: 1; height: 1px; background: linear-gradient(270deg, var(--line-strong), transparent); }
  .split .copy { align-items: center; }
  .split .copy p, .catering-copy p { margin-inline: auto; }
  .story-quote { border-left: 0; border-top: 3px solid var(--gold); border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
  .story-stats { justify-content: center; }
  .promise-card { align-items: center; }
  .promise-card::before { margin-inline: auto; }
  .review-card::before { position: static; display: block; margin: 0 auto -8px; }
  .review-card p { margin-top: var(--space-8); }
  .catering-actions, .cart-band-copy .hero-actions { justify-content: center; }
  .cart-band-copy { align-items: center; }
  .cart-band-copy p { margin-inline: auto; }
  .visit-card { align-items: center; }
  .visit-card-lead { justify-content: center; }
  .order-bar-text { text-align: left; }
}