/* =============================================================================
   Stella & Vine — "bright modern bistro"
   Crisp white + near-black ink + ONE bold Italian-red accent.
   Bold grotesque display (Anton) + clean grotesque body (Archivo).
   Deliberately NOT a cream-paper / bordeaux / Fraunces editorial site.
   Mechanics come verbatim from the skill controllers; this file is the LOOK.
   ========================================================================== */

/* ----------------------------------------------------------------- tokens -- */
:root {
  /* surfaces — crisp, white-led, lots of air */
  --paper:      #ffffff;          /* page background */
  --paper-2:    #f6f4f1;          /* alternating section wash (warm off-white) */
  --paper-3:    #ece8e3;          /* hairline fills, chip rest */
  --ink:        #14110f;          /* near-black text */
  --ink-soft:   #55504a;          /* secondary text (AAA on white) */
  --ink-faint:  #6e685f;          /* tertiary / captions (AA on white) */

  /* the ONE accent — deep Italian red */
  --accent:      #c8302e;         /* 5.36:1 white text — AA on white */
  --accent-deep: #a8241f;         /* hover / accent text on off-white */
  --star:        #c8302e;

  --line:       rgba(20, 17, 15, 0.12);
  --line-2:     rgba(20, 17, 15, 0.22);
  --card:       #ffffff;
  --shadow:     0 22px 48px -30px rgba(20, 17, 15, 0.45);
  --shadow-sm:  0 10px 26px -20px rgba(20, 17, 15, 0.40);

  /* type */
  --display: "Anton", "Arial Narrow", Impact, sans-serif;
  --sans:    "Archivo", system-ui, -apple-system, Segoe UI, sans-serif;

  /* fluid scale */
  --fs-hero: clamp(2.9rem, 9vw, 6.4rem);
  --fs-h1:   clamp(2.4rem, 6.5vw, 4.4rem);
  --fs-h2:   clamp(1.9rem, 4.6vw, 3.1rem);
  --fs-h3:   clamp(1.15rem, 2vw, 1.4rem);
  --step-1:  clamp(1.05rem, 1.6vw, 1.2rem);

  /* rhythm */
  --gutter: clamp(1.15rem, 4vw, 2.6rem);
  --wrap:   1200px;
  --gap:    1rem;
  --header-h: 66px;
  /* measured heights of the two sticky menu bars — used to stack them and to
     set section scroll-margin so a tapped category lands clear of the stack. */
  --tabs-h:   59px;   /* .menu-tabs strip */
  --chipnav-h: 61px;  /* .menu-nav chip bar */

  --r-lg: 20px;
  --r-md: 14px;
  --r-sm: 10px;

  --ease: cubic-bezier(.4, 0, .2, 1);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(1rem, 1.1vw, 1.06rem);
  line-height: 1.62;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;            /* belt-and-braces against 390px overflow */
}

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

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

::selection { background: var(--accent); color: #fff; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

.wrap { width: min(100% - var(--gutter) * 2, var(--wrap)); margin-inline: auto; }
.center { text-align: center; }

/* display headings — bold grotesque, tight, uppercase energy without shouting */
h1, h2, h3, .display {
  font-family: var(--display);
  font-weight: 400;            /* Anton ships at 400 only; its weight IS bold */
  line-height: 0.96;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  margin: 0;
  color: var(--ink);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.05; }

.accent-ink { color: var(--accent); }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- eyebrow -- */
/* A boxed/ticked label, NOT the marketing site's dash-led eyebrow. */
.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--sans); font-weight: 700;
  font-size: .72rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--accent-deep);
}
.eyebrow::before {
  content: ""; width: .5rem; height: .5rem; background: var(--accent);
  /* a square tick, not a line — visually distinct from the marketing eyebrow */
}

/* --------------------------------------------------------------- buttons --- */
.btn {
  --bg: var(--ink); --fg: #fff; --bd: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 48px; padding: .85rem 1.5rem;
  font-family: var(--sans); font-weight: 700; font-size: .92rem;
  letter-spacing: .02em; text-transform: uppercase;
  background: var(--bg); color: var(--fg); border: 2px solid var(--bd);
  border-radius: 999px; cursor: pointer;
  transition: transform .16s var(--ease), background .2s var(--ease),
              color .2s var(--ease), border-color .2s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { --bg: var(--accent); --fg: #fff; --bd: var(--accent); }
.btn--primary:hover { --bg: var(--accent-deep); --bd: var(--accent-deep); }
.btn--outline { --bg: transparent; --fg: var(--ink); --bd: var(--line-2); }
.btn--outline:hover { --bg: var(--ink); --fg: #fff; --bd: var(--ink); }
.btn--ghost-light { --bg: rgba(255,255,255,.12); --fg: #fff; --bd: rgba(255,255,255,.6); }
.btn--ghost-light:hover { --bg: #fff; --fg: var(--ink); --bd: #fff; }
.btn .icon { width: 1.05rem; height: 1.05rem; }

/* ----------------------------------------------------------------- icons --- */
.icon { width: 1.25rem; height: 1.25rem; flex: none; }

/* ================================================================ HEADER === */
/* site-nav: nav-center variation (links L / centered logo / links R). */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
.header__inner {
  height: var(--header-h);              /* CONSTANT height (no shrink-on-scroll) */
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}

.wordmark {
  display: inline-flex; flex-direction: column;
  align-items: center; justify-content: center; line-height: 1;
}
.wordmark__name {
  font-family: var(--display); font-size: 1.5rem; line-height: 1;
  letter-spacing: .02em; text-transform: uppercase; color: var(--ink);
}
.wordmark__name em { font-style: normal; color: var(--accent); }
.wordmark__tag {
  font-family: var(--sans); font-weight: 600; font-size: .56rem; line-height: 1;
  letter-spacing: .34em; text-transform: uppercase; color: var(--ink-faint);
  margin-top: .3rem;
}

.nav { display: flex; align-items: center; }
.nav a {
  font-family: var(--sans); font-weight: 600; font-size: .82rem;
  letter-spacing: .07em; text-transform: uppercase; color: var(--ink);
  position: relative;
}
/* hover underline: a 0-height box drawn with a 2px bottom border, wiped in by
   animating `right` (transform-free, no reflow). Border-drawn rather than a
   height:2px bar so it reads as the decoration it is, not a tap target. */
.nav a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -.4rem;
  border-bottom: 2px solid var(--accent); transition: right .25s var(--ease);
}
.nav a:not(.btn):hover::after { right: 0; }

.nav-toggle {
  display: none; align-items: center; justify-content: center;
  min-width: 48px; min-height: 48px; margin: -.4rem;
  appearance: none; background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--ink); line-height: 0;
}
.nav-toggle .icon { width: 1.7rem; height: 1.7rem; }
.nav-toggle__close { display: none; }
.nav-close { display: none; }

/* desktop nav-center: grid with centered wordmark, link groups left/right.
   All three cells are pinned to ROW 1 — otherwise auto-placement spills the
   wordmark and a link group into separate implicit rows, doubling the header
   height and floating the wordmark to the top (the "logo too high" bug). One
   row + align-items:center makes the wordmark, left links and right links share
   one optically-centered baseline. */
@media (min-width: 721px) {
  .site-header[data-nav-layout="center"] .header__inner {
    display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: 1fr;
    align-items: center; gap: 1rem;
  }
  .site-header[data-nav-layout="center"] .wordmark { grid-row: 1; grid-column: 2; justify-self: center; }
  .site-header[data-nav-layout="center"] .nav { display: contents; }
  .site-header[data-nav-layout="center"] .nav__group { display: flex; align-items: center; gap: 1.5rem; }
  .site-header[data-nav-layout="center"] .nav__group--l { grid-row: 1; grid-column: 1; justify-content: flex-start; }
  .site-header[data-nav-layout="center"] .nav__group--r { grid-row: 1; grid-column: 3; justify-content: flex-end; }
}

/* mobile: collapse to toggle + sheet panel (drawer motion) */
@media (max-width: 720px) {
  .site-header.nav-enhanced .nav-toggle { display: inline-flex; }
  .site-header[data-nav-layout="center"] .nav__group { display: contents; }
  .site-header.nav-enhanced .nav {
    position: fixed; inset: var(--header-h) 0 auto 0;
    display: flex; flex-direction: column; align-items: stretch; gap: .15rem;
    padding: 1rem var(--gutter) 1.6rem;
    background: var(--paper); border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
    transform: translateY(-12px); opacity: 0; visibility: hidden; pointer-events: none;
    transition: transform .24s var(--ease), opacity .24s var(--ease), visibility 0s linear .24s;
  }
  .site-header[data-open] .nav {
    transform: translateY(0); opacity: 1; visibility: visible; pointer-events: auto;
    transition: transform .24s var(--ease), opacity .24s var(--ease);
  }
  .site-header.nav-enhanced .nav a:not(.btn) {
    font-size: 1.05rem; padding: .85rem .2rem; min-height: 48px;
    display: flex; align-items: center; border-bottom: 1px solid var(--line);
  }
  .site-header.nav-enhanced .nav a:not(.btn)::after { display: none; }
  .site-header.nav-enhanced .nav .btn { margin-top: .9rem; }
}
@media (prefers-reduced-motion: reduce) {
  .site-header.nav-enhanced .nav { transition: none; }
}

/* ================================================================== HERO === */
/* mosaic / asymmetric photo-grid hero with a bold sans overlay panel.
   NOT a serif headline with one colored word. */
.hero {
  background: var(--paper);
  padding: clamp(1.4rem, 4vw, 2.6rem) 0 clamp(2.4rem, 6vw, 4rem);
}
.hero__grid {
  display: grid; gap: clamp(.6rem, 1.4vw, 1rem);
  grid-template-columns: 1.15fr .85fr;
  grid-template-areas:
    "panel  shotA"
    "shotB  shotA";
  align-items: stretch;
}
/* Desktop (wide) layout only: bound the two rows so the photo column (shotA,
   spanning both) and the whole hero stay within ~one viewport instead of
   growing from the photo's natural pixels. The stacked mobile layout below
   uses auto rows so a fixed cap can't squeeze the columns into overflow. */
@media (min-width: 861px) {
  .hero__grid {
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
    max-height: min(74vh, 580px);
  }
}
.hero__panel {
  grid-area: panel;
  background: var(--ink); color: #fff;
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 3.4vw, 2.8rem);
  display: flex; flex-direction: column; justify-content: center; gap: 1rem;
  min-height: clamp(260px, 32vw, 340px);
}
.hero__panel .eyebrow { color: #ff7a6a; }
.hero__panel .eyebrow::before { background: var(--accent); }
.hero__title {
  font-size: var(--fs-hero); color: #fff; line-height: .94;
  text-wrap: balance;
}
.hero__title .line2 { display: block; color: var(--accent); }
.hero__title .underline {
  display: inline-block;
  box-shadow: inset 0 -.16em 0 var(--accent);
}
.hero__lede {
  font-family: var(--sans); font-weight: 400; text-transform: none;
  font-size: var(--step-1); color: rgba(255,255,255,.84); line-height: 1.5;
  max-width: 42ch; margin: 0;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: .3rem; }

.hero__shot { border-radius: var(--r-lg); overflow: hidden; position: relative; background: var(--paper-3); min-height: 0; }
.hero__shot img { width: 100%; height: 100%; object-fit: cover; }
/* shotA spans both rows; its height is bounded by the grid rows above (it fills
   the column, the image is object-fit:cover inside). shotB fills its single
   bounded row. Neither dictates section height from natural pixels. */
.hero__shot--a { grid-area: shotA; }
.hero__shot--b { grid-area: shotB; }
.hero__tagchip {
  position: absolute; left: .7rem; bottom: .7rem; right: .7rem; z-index: 2;
  width: max-content; max-width: calc(100% - 1.4rem);
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--accent); color: #fff;
  font-family: var(--sans); font-weight: 700; font-size: .68rem;
  letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  padding: .4rem .7rem; border-radius: 999px;
}
.hero__tagchip .icon { width: .85rem; height: .85rem; }
/* the small mobile photo is too narrow to host the badge legibly — hide it there;
   the "local favorite" note already lives in the hero copy + reviews. */
@media (max-width: 700px) { .hero__tagchip { display: none; } }

/* hero stat strip under the mosaic */
.hero__facts {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: .6rem; margin-top: clamp(.8rem, 2vw, 1.2rem);
}
.hero__fact {
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 1rem 1.1rem;
  display: flex; flex-direction: column; gap: .15rem;
}
.hero__fact b {
  font-family: var(--display); font-size: 1.5rem; letter-spacing: .01em;
  text-transform: uppercase; color: var(--accent-deep); line-height: 1;
}
.hero__fact span { font-size: .82rem; color: var(--ink-soft); }

@media (max-width: 860px) {
  .hero__grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "panel panel"
      "shotA shotB";
  }
  .hero__panel { min-height: 0; }
  .hero__shot--a, .hero__shot--b { min-height: 0; aspect-ratio: 1 / 1; }
}
@media (max-width: 540px) {
  /* keep TWO photos side-by-side on mobile (image grids stay multi-column) */
  .hero__grid { gap: .5rem; }
  .hero__panel { padding: 1.5rem 1.35rem; border-radius: var(--r-md); }
  .hero__shot--a, .hero__shot--b { border-radius: var(--r-md); aspect-ratio: 3 / 4; }
  .hero__facts { gap: .5rem; }
  .hero__fact { padding: .8rem .75rem; }
  .hero__fact b { font-size: 1.2rem; }
  .hero__fact span { font-size: .72rem; }
}

/* =============================================================== SECTIONS == */
.section { padding: clamp(3rem, 8vw, 6rem) 0; }
.section--wash { background: var(--paper-2); }
.section--ink { background: var(--ink); color: #fff; }
.section--ink h2, .section--ink h3 { color: #fff; }

.section-head { max-width: 60ch; margin-bottom: clamp(1.6rem, 4vw, 2.6rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head h2 { margin: .6rem 0 .7rem; }
.section-head p { color: var(--ink-soft); font-size: var(--step-1); margin: 0; }
.section--ink .section-head p { color: rgba(255,255,255,.82); }

/* ------------------------------------------------------------- STORY band -- */
.story {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(1.6rem, 5vw, 4rem); align-items: center;
}
.story__media { position: relative; border-radius: var(--r-lg); overflow: hidden; }
/* Bounded frame: a gentle landscape ratio capped by max-height so the photo
   can't out-grow the copy column and stretch the section. cover fills it. */
.story__media img { width: 100%; aspect-ratio: 4 / 3; max-height: 440px; object-fit: cover; }
.story__media figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2.2rem 1.1rem .9rem;
  background: linear-gradient(transparent, rgba(20,17,15,.78));
  color: #fff; font-size: .82rem; font-weight: 600; letter-spacing: .02em;
}
.story__body h2 { margin: .7rem 0 1.1rem; }
.story__body p { color: var(--ink-soft); }
.story__sign {
  font-family: var(--display); text-transform: uppercase; color: var(--ink);
  font-size: 1rem; letter-spacing: .03em; margin-top: 1.2rem;
}
.story__pulls {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; margin-top: 1.6rem;
}
.story__pull {
  border-top: 3px solid var(--accent); padding-top: .7rem;
}
.story__pull b {
  display: block; font-family: var(--display); font-size: 1.35rem;
  text-transform: uppercase; color: var(--ink); line-height: 1;
}
.story__pull span { font-size: .8rem; color: var(--ink-faint); }
@media (max-width: 760px) {
  .story { grid-template-columns: 1fr; }
  .story__media img { aspect-ratio: 4 / 3; }
}

/* --------------------------------------------------------- SIGNATURE cards - */
.dishes {
  display: grid; gap: clamp(.8rem, 2vw, 1.3rem);
  grid-template-columns: repeat(3, 1fr);
}
.dish-card {
  display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-sm);
  transition: transform .18s var(--ease), box-shadow .25s var(--ease);
}
.dish-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.dish-card .media { aspect-ratio: 4 / 3; overflow: hidden; }
.dish-card .media img { width: 100%; height: 100%; object-fit: cover; }
.dish-card__body { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .4rem; }
.dish-card__row { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; }
.dish-card__name {
  font-family: var(--display); font-size: 1.2rem; text-transform: uppercase;
  letter-spacing: .01em; line-height: 1.02; min-width: 0;
}
.dish-card__name em { font-style: normal; color: var(--accent); }
.dish-card__price {
  font-family: var(--sans); font-weight: 800; color: var(--accent-deep);
  font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 1.05rem;
}
.dish-card__desc { margin: 0; font-size: .9rem; color: var(--ink-soft); }
.dish-card__tag {
  align-self: flex-start; margin-top: .15rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent-deep);
  background: color-mix(in srgb, var(--accent) 10%, #fff);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  padding: .25rem .55rem; border-radius: 999px;
}
@media (max-width: 720px) {
  /* stay 2-up on mobile (image grid never collapses to one column) */
  .dishes { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .dish-card__body { padding: .65rem .7rem .8rem; }
  .dish-card__name { font-size: .98rem; }
  .dish-card__price { font-size: .9rem; }
  .dish-card__desc { font-size: .8rem; }
  .dish-card__tag { font-size: .6rem; }
}

/* =============================================================== GALLERY === */
/* photo-gallery: gallery-justified (Flickr-style justified rows). */
.gx { padding: clamp(2rem, 6vw, 4rem) 0; }
.gx__title {
  font-family: var(--display); font-size: var(--fs-h2); text-transform: uppercase;
  margin: 0; color: var(--ink);
}
.just {
  --row-h: 230px; --jgap: .5rem;
  display: flex; flex-wrap: wrap; gap: var(--jgap); margin: 1.4rem 0 0; padding: 0; list-style: none;
}
.just__item {
  flex: calc(var(--ar) * 100) 1 calc(var(--ar) * var(--row-h));
  min-width: 0; height: var(--row-h); border-radius: var(--r-sm); overflow: hidden;
  background: var(--paper-3);
}
.just .ph-btn { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.just .ph-btn img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: filter .3s var(--ease);
}
.just .ph-btn:hover img { filter: brightness(1.06); }
.just::after { content: ""; flex-grow: 1e6; }
@media (max-width: 600px) { .just { --row-h: 138px; --jgap: .4rem; } }   /* 2–3 per row, never 1 */
@media (max-width: 380px) { .just { --row-h: 118px; } }

/* lightbox — markup is injected by gallery.js (.ph-lightbox*), toggled via aria-hidden */
.ph-lightbox { position: fixed; inset: 0; z-index: 200; display: none; }
.ph-lightbox[aria-hidden="false"] { display: block; }
.ph-lightbox__backdrop { position: absolute; inset: 0; background: rgba(12,10,9,.93); }
.ph-lightbox__dialog {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1rem, 5vw, 3rem);
}
.ph-lightbox__figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: .8rem; max-width: 100%; }
.ph-lightbox__img { max-width: 100%; max-height: 80vh; border-radius: var(--r-sm); box-shadow: 0 30px 80px -20px rgba(0,0,0,.7); }
.ph-lightbox__cap { color: rgba(255,255,255,.92); font-size: .9rem; text-align: center; max-width: 60ch; }
.ph-lightbox__btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; border-radius: 999px;
  background: rgba(255,255,255,.12); border: 1.5px solid rgba(255,255,255,.5); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background .15s, transform .15s;
}
.ph-lightbox__btn:hover { background: rgba(255,255,255,.26); }
.ph-lightbox__btn svg { width: 1.5rem; height: 1.5rem; }
.ph-lightbox__prev { left: clamp(.5rem, 2vw, 1.4rem); }
.ph-lightbox__next { right: clamp(.5rem, 2vw, 1.4rem); }
.ph-lightbox__close { top: clamp(.6rem, 2vw, 1.2rem); right: clamp(.6rem, 2vw, 1.2rem); transform: none; }

/* keep the gallery marquee CSS available in case any page uses it */
.marquee { overflow: hidden; }
.marquee__track { display: flex; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.marquee__item { flex: 0 0 auto; }

/* ============================================================ ORDER hub ==== */
.order-hub {
  display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(1.6rem, 5vw, 4rem); align-items: start;
}
.order-hub__lead h2 { margin: .6rem 0 .9rem; }
.order-hub__lead p { color: rgba(255,255,255,.84); }
.order-hub__phone {
  display: inline-flex; align-items: center; gap: .6rem; margin-top: 1.1rem;
  font-family: var(--display); font-size: 1.6rem; text-transform: uppercase;
  letter-spacing: .02em; color: #fff;
}
.order-hub__phone .icon { color: var(--accent); width: 1.5rem; height: 1.5rem; }
.order-hub__hours { margin-top: .8rem; font-size: .85rem; color: rgba(255,255,255,.6); }

.order-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.order-row {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--r-md); transition: border-color .2s var(--ease), background .2s var(--ease);
}
.order-row:hover { border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.1); }
.order-row.order-direct { background: var(--accent); border-color: var(--accent); }
.order-row.order-direct:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.order-row__link { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.1rem; min-height: 64px; color: #fff; }
.order-row__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px; flex: none;
  background: rgba(255,255,255,.12); color: #fff;
}
.order-row.order-direct .order-row__icon { background: rgba(255,255,255,.22); }
.order-row__icon svg { width: 1.35rem; height: 1.35rem; }
.order-row__body { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.order-row__name { font-family: var(--display); font-size: 1.05rem; text-transform: uppercase; letter-spacing: .02em; }
.order-row__meta { font-size: .8rem; color: rgba(255,255,255,.7); }
@media (max-width: 760px) { .order-hub { grid-template-columns: 1fr; } }

/* ============================================================== REVIEWS ==== */
/* reviews: reviews-wall (masonry quote grid via CSS columns). */
.reviews-wall { list-style: none; margin: 1.6rem 0 0; padding: 0;
  columns: 3 270px; column-gap: clamp(1rem, 2vw, 1.4rem); }
.rev-wall__item {
  break-inside: avoid; margin: 0 0 clamp(1rem, 2vw, 1.4rem);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: clamp(1.2rem, 2.4vw, 1.7rem); box-shadow: var(--shadow-sm);
}
.rev-wall__item .review__stars { color: var(--star); display: inline-flex; gap: .12em; }
.rev-wall__item .review__star { width: 1.05em; height: 1.05em; }
.rev-wall__quote {
  font-family: var(--sans); font-weight: 500; font-size: 1.08rem; line-height: 1.5;
  margin: .7rem 0 .9rem; color: var(--ink); text-transform: none;
}
.rev-wall__by { display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; font-size: .82rem; color: var(--ink-faint); margin: 0; }
.rev-wall__author { font-family: var(--sans); font-weight: 800; color: var(--ink); text-transform: uppercase; letter-spacing: .03em; }
.rev-wall__note { text-align: center; margin-top: 1.4rem; color: var(--ink-faint); font-size: .8rem; }
@media (max-width: 560px) { .reviews-wall { columns: 1; } }

/* ============================================================== CONNECT ==== */
.connect__inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.4rem, 4vw, 3rem); align-items: center;
}
.connect__copy h2 { margin: .6rem 0 .8rem; }
.connect__copy p { color: var(--ink-soft); }
.section--ink .connect__copy p { color: rgba(255,255,255,.82); }
.connect__actions { display: flex; flex-wrap: wrap; gap: .7rem; }
.connect__btn {
  display: inline-flex; align-items: center; gap: .55rem; min-height: 48px;
  padding: .7rem 1.1rem; border-radius: 999px;
  font-family: var(--sans); font-weight: 700; font-size: .82rem;
  letter-spacing: .04em; text-transform: uppercase;
  background: var(--card); color: var(--ink); border: 2px solid var(--line-2); cursor: pointer;
  transition: transform .16s var(--ease), border-color .2s var(--ease), background .2s, color .2s;
}
.connect__btn:hover { transform: translateY(-2px); border-color: var(--accent); color: var(--accent-deep); }
.connect__btn .icon { width: 1.15rem; height: 1.15rem; }
.connect__btn--accent { background: var(--accent); color: #fff; border-color: var(--accent); }
.connect__btn--accent:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; }
/* on the dark band variant */
.section--ink .connect__btn { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.34); }
.section--ink .connect__btn:hover { background: #fff; color: var(--ink); border-color: #fff; }
.section--ink .connect__btn--accent { background: var(--accent); border-color: var(--accent); }
.section--ink .connect__btn--accent:hover { background: #fff; color: var(--accent-deep); }
.connect__done { font-weight: 700; }

/* ================================================================ VISIT ==== */
.visit { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem, 5vw, 3.5rem); }
.visit h2 { margin: .6rem 0 1.1rem; }
.hours-table { width: 100%; border-collapse: collapse; }
.hours-table td { padding: .7rem .2rem; border-bottom: 1px solid var(--line); font-size: .95rem; }
.hours-table td:first-child { font-weight: 600; color: var(--ink); }
.hours-table td:last-child { text-align: right; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.hours-table tr.today td { color: var(--accent-deep); font-weight: 700; }
.hours-table tr.today td:first-child::before { content: "▸ "; color: var(--accent); }
.visit__note { margin-top: 1rem; font-size: .85rem; color: var(--ink-faint); }

.contact-lines { list-style: none; margin: 0 0 1.3rem; padding: 0; display: grid; gap: .9rem; }
.contact-lines li { display: flex; gap: .8rem; align-items: flex-start; }
.contact-lines .icon { color: var(--accent); margin-top: .15rem; }
.contact-lines .k { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.contact-lines a { color: var(--ink); font-weight: 600; }
.contact-lines a:hover { color: var(--accent-deep); }
.visit__map { margin: 0; border-radius: var(--r-md); overflow: hidden; }
.visit__map img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
@media (max-width: 760px) { .visit { grid-template-columns: 1fr; } }

/* =============================================================== FOOTER ==== */
.site-footer { background: var(--ink); color: rgba(255,255,255,.78); padding: clamp(2.6rem, 6vw, 4rem) 0 0; }
.site-footer .wrap:first-child { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 2rem; }
.f-brand { font-family: var(--display); font-size: 1.7rem; text-transform: uppercase; color: #fff; letter-spacing: .02em; }
.f-brand em { font-style: normal; color: var(--accent); }
.site-footer p { color: rgba(255,255,255,.66); font-size: .9rem; max-width: 36ch; margin: .8rem 0 0; }
.site-footer h4 { font-family: var(--display); font-size: 1rem; text-transform: uppercase; color: #fff; letter-spacing: .06em; margin: 0 0 .8rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.site-footer a { color: rgba(255,255,255,.78); font-size: .9rem; }
.site-footer a:hover { color: var(--accent); }
.f-social { display: flex; gap: .6rem; margin-top: 1rem; }
.f-social a {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border-radius: 999px; border: 1.5px solid rgba(255,255,255,.28); color: #fff;
  transition: background .2s, border-color .2s, color .2s;
}
.f-social a:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.f-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem;
  margin-top: clamp(2rem, 5vw, 3rem); padding: 1.3rem 0;
  border-top: 1px solid rgba(255,255,255,.14);
  font-size: .78rem; color: rgba(255,255,255,.55);
}
@media (max-width: 720px) {
  .site-footer .wrap:first-child { grid-template-columns: 1fr 1fr; }
  .f-brand-col { grid-column: 1 / -1; }
}

/* ============================================================ SAMPLE flag == */
.sample-flag {
  background: var(--accent); color: #fff; text-align: center;
  font-size: .8rem; padding: .7rem var(--gutter); line-height: 1.4;
}
.sample-flag strong { font-weight: 800; }

/* ======================================================= MENU / DRINKS ===== */
/* menu-picker: sticky tab strip */
.menu-tabs {
  position: sticky; top: var(--header-h); z-index: 40;
  display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none;
  background: var(--paper); border-bottom: 1px solid var(--line);
  padding: .55rem var(--gutter);
}
.menu-tabs::-webkit-scrollbar { display: none; }
.menu-tabs a {
  flex: 0 0 auto; min-height: 40px; display: inline-flex; align-items: center;
  padding: .45rem .95rem; border-radius: 999px;
  font-family: var(--sans); font-weight: 700; font-size: .78rem;
  letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft);
  border: 1.5px solid transparent;
}
.menu-tabs a:hover { color: var(--ink); }
.menu-tabs a[aria-current="page"] { color: #fff; background: var(--accent); border-color: var(--accent); }

/* menu-nav: sticky category chip bar (menu-nav.js) — stacks under header + tabs */
.menu-nav {
  position: sticky; top: calc(var(--header-h) + var(--tabs-h)); z-index: 35;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.menu-nav .wrap { position: relative; display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; padding-block: .5rem; }
.menu-nav .wrap::-webkit-scrollbar { display: none; }
.menu-nav a {
  flex: 0 0 auto; min-height: 44px; display: inline-flex; align-items: center;
  padding: .5rem 1rem; border-radius: 999px;
  font-family: var(--sans); font-weight: 600; font-size: .82rem;
  letter-spacing: .03em; text-transform: uppercase; color: var(--ink-soft);
  border: 1.5px solid var(--line);
  transition: color .2s, background .2s, border-color .2s;
}
.menu-nav a:hover { color: var(--ink); border-color: var(--line-2); }
.menu-nav a.is-active { color: #fff; background: var(--accent); border-color: var(--accent); }
.menu-nav__arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 999px; z-index: 2;
  background: var(--paper); border: 1.5px solid var(--line-2); color: var(--ink);
  display: none; align-items: center; justify-content: center; cursor: pointer;
}
.menu-nav--has-arrows.menu-nav--scrollable .menu-nav__arrow { display: inline-flex; }
.menu-nav__arrow--prev { left: .4rem; }
.menu-nav__arrow--next { right: .4rem; }
.menu-nav__arrow .icon { width: 1.2rem; height: 1.2rem; }

/* menu hero */
.menu-hero { padding: clamp(2.2rem, 6vw, 4rem) 0 clamp(1rem, 3vw, 2rem); background: var(--paper); }
.menu-hero h1 { font-size: var(--fs-h1); margin: .6rem 0 .9rem; }
.menu-hero h1 em { font-style: normal; color: var(--accent); }
.menu-hero p { color: var(--ink-soft); font-size: var(--step-1); max-width: 62ch; }
.menu-hero a { color: var(--accent-deep); font-weight: 700; border-bottom: 2px solid currentColor; }

/* menu-cards layout (menu.html) */
.menu-body { padding: clamp(1.5rem, 5vw, 3rem) 0 4rem; }
.menu-section { margin-bottom: clamp(2rem, 5vw, 3.4rem); scroll-margin-top: calc(var(--header-h) + var(--tabs-h) + var(--chipnav-h) + 8px); }
.menu-section__head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.2rem; }
.menu-section__head h2 { font-size: var(--fs-h2); }
.menu-section__head h2 em { font-style: normal; color: var(--accent); }
.menu-section__head .rule { flex: 1; height: 3px; background: var(--accent); border-radius: 2px; }
.menu-section__note { margin: -.3rem 0 1.1rem; color: var(--ink-faint); font-size: .9rem; max-width: 64ch; }

.menu-cards {
  display: grid; gap: clamp(.7rem, 2vw, 1.1rem);
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
}
.dish {
  display: flex; flex-direction: column; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden;
  box-shadow: var(--shadow-sm); transition: transform .18s var(--ease), box-shadow .25s var(--ease);
}
.dish:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.dish__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.dish__body { padding: .85rem .95rem 1.05rem; display: flex; flex-direction: column; gap: .3rem; flex: 1; }
.dish__top { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; }
.dish__name { font-family: var(--display); font-size: 1.12rem; text-transform: uppercase; letter-spacing: .01em; line-height: 1.02; margin: 0; min-width: 0; }
.dish__name em { font-style: normal; color: var(--accent); }
.dish__price { font-family: var(--sans); font-weight: 800; color: var(--accent-deep); font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 1.02rem; }
.dish__desc { margin: 0; font-size: .87rem; color: var(--ink-soft); }
.dish--noimg .dish__body { padding-top: 1.1rem; }
.dish__cat {
  font-size: .64rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-deep); margin-bottom: .15rem;
}
@media (max-width: 560px) {
  .menu-cards { grid-template-columns: 1fr 1fr; gap: .55rem; }   /* 2-up, never 1 */
  .dish__body { padding: .55rem .6rem .7rem; }
  .dish__name { font-size: .92rem; }
  .dish__price { font-size: .88rem; }
  .dish__desc { font-size: .78rem; }
}

/* diet tags (labeled, not color-only) */
.tag {
  display: inline-block; vertical-align: middle; margin-left: .3rem;
  font-family: var(--sans); font-size: .56rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .18rem .4rem; border-radius: 5px; line-height: 1;
}
.tag-veg   { color: #2f5d2a; background: #e7f1e3; }
.tag-spicy { color: #9a2410; background: #fbe4dc; }
.tag-gf    { color: #6a4a12; background: #f3ebd6; }

.menu-foot-note { max-width: 64ch; margin-top: 1.5rem; font-size: .82rem; color: var(--ink-faint); }

/* drinks list (menu-leader rows, distinct from the menu's cards) */
.menu-list--single { max-width: 760px; }
.menu-row { padding: .75rem 0; border-bottom: 1px dotted var(--line-2); }
.menu-row__top { display: flex; align-items: baseline; gap: .55rem; }
.menu-row__name { font-family: var(--display); font-size: 1.12rem; text-transform: uppercase; letter-spacing: .01em; min-width: 0; }
.menu-row__name em { font-style: normal; color: var(--accent); }
.menu-row__dots { flex: 1; border-bottom: 2px dotted var(--line-2); transform: translateY(-4px); opacity: .7; }
.menu-row__price { font-family: var(--sans); font-weight: 800; color: var(--accent-deep); font-variant-numeric: tabular-nums; white-space: nowrap; }
.menu-row__desc { margin: .25rem 0 0; font-size: .9rem; color: var(--ink-soft); max-width: 60ch; }

/* =========================================================== MENU HUB ====== */
.menu-hub { padding: clamp(2.4rem, 6vw, 4.5rem) 0 clamp(3rem, 7vw, 5rem); }
.menu-hub__head { width: min(100% - var(--gutter) * 2, 760px); margin: 0 auto clamp(1.8rem, 4vw, 2.8rem); text-align: center; }
.menu-hub__head h1 { font-size: var(--fs-h1); margin: .6rem 0 .9rem; }
.menu-hub__head h1 em { font-style: normal; color: var(--accent); }
.menu-hub__head p { color: var(--ink-soft); font-size: var(--step-1); }
.menu-hub__grid {
  width: min(100% - var(--gutter) * 2, var(--wrap)); margin: 0 auto;
  list-style: none; padding: 0; display: grid; gap: clamp(.7rem, 2vw, 1.2rem);
  grid-template-columns: 1fr 1fr;
}
.menu-card { position: relative; display: block; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4 / 3; }
.menu-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.menu-card:hover img { transform: scale(1.05); }
.menu-card__scrim { position: absolute; inset: 0; background: linear-gradient(transparent 35%, rgba(20,17,15,.82)); }
.menu-card__label { position: absolute; left: 1.2rem; bottom: 1.1rem; right: 1.2rem; color: #fff; }
.menu-card__label .k { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #ff8b7c; }
.menu-card__label strong { font-family: var(--display); font-size: clamp(1.6rem, 4vw, 2.4rem); text-transform: uppercase; letter-spacing: .01em; line-height: 1; display: block; margin-top: .2rem; }
.menu-hub__cta { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin-top: clamp(1.6rem, 4vw, 2.4rem); }
@media (max-width: 560px) {
  /* keep both menu cards on screen, stacked but generous */
  .menu-hub__grid { grid-template-columns: 1fr; }
  .menu-card { aspect-ratio: 16 / 10; }
}