/* ==========================================================================
   Izakaya Tenzo — layout and components
   Every value comes from a token in tokens.css. Where a number is hard
   coded it is a one off measurement from the canvas, and it says so.
   ========================================================================== */

/* --- Reset ---------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  /* Kills the white flash when the page is over scrolled past either end. */
  background: var(--color-ink);
  overscroll-behavior-y: none;
}

body {
  margin: 0;
  background: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--font-weight-light);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, dl, dd, figure { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 3px; }

/* --- Type primitives ------------------------------------------------------ */

.display {
  font-family: var(--font-display);
  font-weight: var(--font-weight-regular);
  font-size: var(--text-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
}

.display--xl {
  font-size: var(--text-display-xl);
  line-height: var(--leading-display-xl);
}

.display--brand { color: var(--color-brand); }

.title {
  font-size: var(--text-title);
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-title);
}

.eyebrow {
  font-size: var(--text-title);
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-body);
  opacity: var(--opacity-muted);
}

.label {
  font-size: var(--text-label);
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-flat);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.prose p + p { margin-top: var(--spacing-xs); }

.badge {
  display: inline-block;
  padding: 1px var(--spacing-2xs);
  border-radius: var(--radius-pill);
  background: var(--color-brand-soft);
  color: var(--color-text-inverse);
  font-size: var(--text-micro);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.badge[hidden] { display: none; }

/* --- Buttons -------------------------------------------------------------- */
/* Every button clears --spacing-touch (44px). */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2xs);
  min-height: var(--spacing-touch);
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: var(--radius-sm);
  font-size: var(--text-action);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-flat);
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.btn--primary { background: var(--color-brand); color: var(--color-text-inverse); }
.btn--primary:hover { background: var(--color-brand-deep); }

.btn--dark { background: var(--color-scrim-strong); color: var(--color-text-inverse); }
.btn--dark:hover { background: var(--color-black); }

.btn--ghost { color: var(--color-text-inverse-muted); letter-spacing: var(--tracking-label); }
.btn--ghost:hover { color: var(--color-text-inverse); }

/* --- Chevrons ------------------------------------------------------------- */
/* Thin, red, no plate behind them. */

.chev {
  position: absolute;
  z-index: 2;
  display: grid;
  place-items: center;
  width: var(--spacing-touch);
  height: var(--spacing-touch);
  color: var(--color-white);
  opacity: 0.75;
  transition: opacity 0.18s ease, translate 0.18s ease;
}

.chev:hover { opacity: 1; }

.chev svg {
  width: 26px;
  height: 26px;
  /* The photos underneath vary, so the icon carries its own contrast. */
  filter: drop-shadow(0 1px 3px rgb(0 0 0 / 0.55));
}

.chev--prev { left: var(--spacing-md); top: 50%; translate: 0 -50%; }
.chev--next { right: var(--spacing-md); top: 50%; translate: 0 -50%; }
.chev--prev:hover { translate: -3px -50%; }
.chev--next:hover { translate: 3px -50%; }

.chev--up, .chev--down { left: 50%; translate: -50% 0; }
.chev--up { top: var(--spacing-2xs); }
.chev--down { bottom: var(--spacing-2xs); }
.chev--up:hover { translate: -50% -3px; }
.chev--down:hover { translate: -50% 3px; }

/* --- Nav ------------------------------------------------------------------ */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 10;
  padding-top: env(safe-area-inset-top, 0px);
  /* The gradient from the canvas: ink at the top, gone by the bottom edge.
     It keeps the links and the mark legible over any frame of the video. */
  background-image: linear-gradient(to bottom, rgb(0 0 0 / 0.85) 0%, rgb(0 0 0 / 0) 100%);
  transition: background-color 0.25s ease;
}

.nav.is-solid { background-color: var(--color-black); background-image: none; }

.nav__inner {
  display: flex;
  align-items: flex-start;          /* links sit on the top line, logo hangs */
  justify-content: space-between;
  gap: var(--spacing-md);
  max-width: var(--container-page);
  margin: 0 auto;
  padding: var(--spacing-md) var(--spacing-lg) 0;
  transition: padding 0.25s ease;
}

.nav__group {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  flex: 1;
}

.nav__group--right { justify-content: flex-end; }

.nav__group a {
  position: relative;
  display: flex;
  align-items: center;
  min-height: var(--spacing-touch);
  color: var(--color-text-inverse-muted);
  font-size: var(--text-label);
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-flat);
  letter-spacing: var(--tracking-label);
  text-decoration: none;
  transition: color 0.18s ease;
}

.nav__group a:hover { color: var(--color-text-inverse); }

/* Underline wipes in from the left under the lighten. */
.nav__group a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 28%;
  width: 100%;
  height: 1px;
  background: currentColor;
  scale: 0 1;
  transform-origin: left center;
  transition: scale 0.22s ease;
}

.nav__group a:hover::after,
.nav__group a:focus-visible::after { scale: 1 1; }

.nav__logo { flex-shrink: 0; }

.nav__logo img {
  width: 200px;                     /* logo size from the canvas */
  height: auto;
  transition: width 0.25s ease;
}

/* Scrolled: shorter bar, smaller mark, everything on one centre line. */
.nav.is-solid .nav__inner {
  align-items: center;
  padding-top: var(--spacing-xs);
  padding-bottom: var(--spacing-xs);
}

.nav.is-solid .nav__group { align-items: center; }
.nav.is-solid .nav__logo img { width: 128px; }
.nav.is-solid .nav__group a { min-height: 40px; }

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

/* The hero pins itself while the next section rides up over it. */
.hero {
  position: sticky;
  top: 0;
  z-index: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100svh;
  /* Top padding is the nav band (32 + the 65 tall mark) plus breathing room,
     so the headline can never run into the logo. */
  padding: calc(97px + var(--spacing-3xl)) var(--gutter) var(--spacing-section);
  overflow: clip;
  background: var(--color-black);
  text-align: center;
}

/* Hero slideshow. Each photograph drifts in slowly and dissolves into the
   next. The scale runs far longer than the fade, so the outgoing frame is
   still moving as it leaves instead of snapping back. */
.hero__media { position: absolute; inset: 0; overflow: clip; }

.hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  scale: 1;
  transition: opacity 1.4s ease, scale 9s linear;
}

/* Without JS the first frame simply stays up. */
.hero__media:not(.is-live) img:first-child { opacity: 1; }

.hero__media img.is-active { opacity: 1; scale: 1.08; }

.hero__scrim {
  position: absolute;
  inset: 0;
  background: var(--color-scrim);
}

.hero__body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-md);
  max-width: 596px;                 /* measure from the canvas */
}

.hero__body .display { color: var(--color-text-inverse); }

.hero__lede {
  max-width: var(--container-text);
  color: #d2d2d2;                   /* hero only, a step softer than the token */
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-2xs);
}

/* --- Scroll cue ------------------------------------------------------------
   A hairline with a drop travelling down it. Replaces the old arrow.
   -------------------------------------------------------------------------- */

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: calc(var(--spacing-lg) + env(safe-area-inset-bottom, 0px));
  translate: -50% 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xs);
  text-decoration: none;
}

.scroll-cue__word {
  font-size: 8px;                   /* deliberately tiny, all caps carries it */
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.24em;
  line-height: var(--leading-flat);
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.32);
}

.scroll-cue__rail {
  position: relative;
  display: block;
  width: 1px;
  height: 30px;
  background: rgb(255 255 255 / 0.22);
  overflow: hidden;
}

.scroll-cue__rail i {
  position: absolute;
  left: 0;
  width: 1px;
  height: 12px;
  background: var(--color-white);
  animation: cue-fall 2.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes cue-fall {
  0%   { top: -14px; opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { top: 30px; opacity: 0; }
}

.scroll-cue__label {
  font-size: 10px;
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-label);
  line-height: var(--leading-flat);
  color: var(--color-text-inverse-muted);
}

/* --- About ---------------------------------------------------------------- */

/* Everything after the hero rides over it, hence the stacking context. */
.about,
.feature,
.reserve,
.visit,
.faq,
.delivery,
.footer { position: relative; z-index: 1; }

.about {
  padding: var(--section-space) var(--gutter) var(--spacing-4xl);
  background: var(--color-surface-muted);
  /* A soft edge as the section lifts over the hero. */
  box-shadow: 0 -24px 48px rgb(0 0 0 / 0.45);
}

.about__inner {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: var(--spacing-4xl);
  max-width: var(--container-content);
  margin: 0 auto;
}

.about__col {
  flex: 1 1 var(--container-column);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2xl);
}

.about__col--offset { gap: var(--spacing-3xl); }

.about__hero-img {
  width: 100%;
  height: 548px;                    /* crop height from the canvas */
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.about__pair { display: flex; gap: var(--spacing-md); }

.about__pair img {
  flex: 1 1 0;
  min-width: 0;
  height: 262px;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.about__pair img:first-child { margin-top: var(--spacing-3xl); }

/* --- Feature dish ----------------------------------------------------------
   Exactly one viewport tall, minus the padding that frames it.
   -------------------------------------------------------------------------- */

.feature {
  display: flex;
  gap: var(--spacing-sm);
  height: 100svh;
  padding: var(--spacing-sm);
  background: var(--color-cream);
}

/* Left: slideshow */

.slideshow {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  border-radius: var(--radius-sm);
  overflow: clip;
}

.slideshow__track { position: absolute; inset: 0; }

.slideshow__track img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.9s ease;
}

.slideshow__track img.is-active { opacity: 1; }

.slideshow__caption {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--spacing-xl);
  padding: var(--spacing-lg) var(--spacing-xl) var(--spacing-xl);
  background: linear-gradient(to bottom, rgb(0 0 0 / 0) 0%, rgb(0 0 0 / 0.95) 86%);
}

.slideshow__caption .display { flex: 0 1 280px; color: var(--color-cream); }
.slideshow__caption p { flex: 0 1 560px; color: var(--color-text-inverse-soft); }

/* Right: vertical ticker */

.ticker {
  position: relative;
  flex: 0 0 400px;                  /* right rail width from the canvas */
  border-radius: var(--radius-sm);
  overflow: clip;
}

.ticker__viewport {
  height: 100%;
  overflow: hidden;
  /* A short fade at each end, so photos arrive and leave rather than cut. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 4%, #000 96%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 4%, #000 96%, transparent 100%);
}

.ticker__viewport::-webkit-scrollbar { width: 0; height: 0; }

.ticker__track { display: flex; flex-direction: column; gap: var(--spacing-sm); }

.ticker__track img {
  width: 100%;
  height: 276px;                    /* photo height from the canvas */
  object-fit: cover;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

/* --- Reservations ---------------------------------------------------------- */

/* The backdrop is the prepped artwork, one crop per breakpoint. */
.reserve {
  position: relative;
  display: grid;
  place-items: center;
  padding: var(--section-space) var(--gutter);
  background: var(--color-brand) url("../assets/img/reserve-bg-desktop.png") center / cover no-repeat;
  overflow: clip;
  text-align: center;
}

.reserve__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-md);
  max-width: var(--container-content);
  color: var(--color-text-inverse);
}

.reserve__inner .display { color: var(--color-text-inverse); }

.reserve__note { max-width: var(--container-text); color: var(--color-text-inverse-soft); }
.reserve__note a { text-decoration-thickness: 1px; text-underline-offset: 3px; }

.reserve .btn { margin-top: var(--spacing-2xs); }

/* --- Visit ----------------------------------------------------------------- */

.visit {
  padding: var(--spacing-3xl) var(--gutter);
  /* Street grid pattern over the ink ground. */
  background: var(--color-ink) url("../assets/img/map-pattern.png") center / cover no-repeat;
  color: var(--color-text-inverse);
}

.visit__inner {
  display: flex;
  align-items: center;
  gap: var(--spacing-4xl);
  max-width: var(--container-content);
  margin: 0 auto;
}

.visit__col {
  flex: 1 1 496px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.visit__col .display { color: var(--color-text-inverse); }

.visit__address {
  display: flex;
  align-items: center;
  gap: var(--spacing-2xs);
  color: var(--color-text-inverse-soft);
}

.visit__address svg { flex-shrink: 0; color: var(--color-text-inverse-muted); }

.hours { border-radius: var(--radius-sm); overflow: clip; }

.hours__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  padding: var(--spacing-xs) var(--spacing-md);
  border-bottom: 1px solid var(--color-line);
  color: var(--color-text-inverse-soft);
  transition: background-color 0.2s ease;
}

.hours__row:last-child { border-bottom: 0; }
.hours__row--today { background: var(--color-line); }

.hours__row dt { display: flex; align-items: center; gap: var(--spacing-2xs); }
.hours__row dd { margin: 0; white-space: nowrap; }

.visit__map {
  position: relative;
  flex: 0 0 600px;                  /* map width from the canvas */
  height: 391px;
  border-radius: var(--radius-sm);
  overflow: clip;
}

.visit__map iframe { width: 100%; height: 100%; border: 0; display: block; }

.visit__directions { position: absolute; right: var(--spacing-sm); bottom: var(--spacing-sm); }

/* --- FAQ ------------------------------------------------------------------- */

.faq {
  padding: var(--spacing-4xl) var(--gutter);
  background: var(--color-surface);
}

.faq__inner {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
  max-width: var(--container-narrow);
  margin: 0 auto;
}

.faq__head { display: flex; flex-direction: column; gap: var(--spacing-xs); }

.faq__list { max-width: 720px; }    /* measure, keeps the answers readable */

.faq__item { border-bottom: 1px solid var(--color-line); }
.faq__item:first-child { border-top: 1px solid var(--color-line); }
.faq__item h3 { margin: 0; font: inherit; }

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  width: 100%;
  min-height: var(--spacing-touch);
  padding: var(--spacing-md) 0;
  text-align: left;
  font-size: var(--text-action);
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-title);
  transition: color 0.18s ease;
}

.faq__q:hover { color: var(--color-brand); }

/* A plus that becomes a minus. */
.faq__mark {
  position: relative;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}

.faq__mark::before,
.faq__mark::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: currentColor;
  transition: rotate 0.3s ease, opacity 0.3s ease;
}

.faq__mark::before { width: 14px; height: 1.5px; translate: -50% -50%; }
.faq__mark::after  { width: 1.5px; height: 14px; translate: -50% -50%; }

.faq__item.is-open .faq__mark::after { rotate: 90deg; opacity: 0; }

/* Height animates from 0 to the measured height, set in JS. */
.faq__a {
  overflow: hidden;
  height: 0;
  transition: height 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq__a > div { padding-bottom: var(--spacing-md); color: var(--color-text-muted); }

/* --- Delivery --------------------------------------------------------------
   Each platform sits on a soft white pill, as on the canvas.
   -------------------------------------------------------------------------- */

.delivery {
  padding: var(--spacing-3xl) var(--gutter);
  background: var(--color-surface-sunken);
}

.delivery__inner {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
  max-width: var(--container-narrow);
  margin: 0 auto;
}

.delivery__head { display: flex; flex-direction: column; gap: var(--spacing-sm); }

.delivery__list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
}

.platform {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 84px;
  padding: var(--spacing-md) var(--spacing-2xl);
  border-radius: 142px;             /* pill radius from the canvas */
  background: rgb(255 255 255 / 0.55);
  text-decoration: none;
  transition: background-color 0.18s ease, translate 0.18s ease;
}

.platform:hover { background: var(--color-white); translate: 0 -2px; }

.platform img { height: 32px; width: auto; }

/* --- Menu pages -------------------------------------------------------------
   Used by menu-food.html and menu-drinks.html. Centred, two columns, with
   the banner borrowed from the reservations section on the home page.
   ---------------------------------------------------------------------------- */

.menu-hero {
  /* 80 over, 72 under, plus the nav band the page has to clear. */
  padding: calc(97px + var(--spacing-3xl)) var(--gutter) var(--spacing-section-mobile);
  background: var(--color-brand) url("../assets/img/menu-header-desktop.png") center / cover no-repeat;
  color: var(--color-text-inverse);
  text-align: center;
}

.menu-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
  max-width: var(--container-content);
  margin: 0 auto;
}

.menu-hero__eyebrow {
  font-size: var(--text-title);
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-body);
  opacity: var(--opacity-muted);
}

.menu-hero .display { color: var(--color-text-inverse); }

.menu-hero__lede {
  max-width: var(--container-text);
  color: var(--color-text-inverse-soft);
}

/* Category jump links, sitting on the banner. */
.menu-jump {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-2xs);
  margin-top: var(--spacing-md);
}

.menu-jump a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 var(--spacing-md);
  border: 1px solid rgb(255 255 255 / 0.25);
  border-radius: var(--radius-pill);
  background: rgb(0 0 0 / 0.16);
  color: var(--color-text-inverse);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}

.menu-jump a:hover {
  background: rgb(0 0 0 / 0.42);
  border-color: rgb(255 255 255 / 0.55);
}

.menu-body {
  padding: var(--spacing-3xl) var(--gutter) var(--spacing-4xl);
  background: var(--color-surface);
}

.menu-body__inner {
  display: flex;
  flex-direction: column;
  max-width: var(--container-narrow);
  margin: 0 auto;
}

/* Each section is ruled off from the next. The space under the rows is
   carried by the list rather than the section, so the column hairline is
   painted all the way down to the rule instead of stopping short. */
.menu-group {
  --menu-space: var(--spacing-3xl);
  scroll-margin-top: 110px;
  padding: var(--menu-space) 0 0;
  border-bottom: 1px solid var(--color-line);
}

.menu-group:first-child { padding-top: 0; }
.menu-group:last-child { border-bottom: 0; }

/* Section head. The arch is sized by the title, never wider than it, so a
   short word like Fried gets a short arch instead of a canopy. */
.menu-group__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: max-content;
  max-width: 100%;
  margin: 0 auto var(--spacing-xl);
}

.menu-group__arch {
  width: min(104px, 100%);
  height: auto;
}

.menu-group__title {
  margin-top: var(--spacing-2xs);   /* 8px of air under the arch */
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: var(--font-weight-regular);
  line-height: 1;
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--color-brand);
}

.menu-group__note {
  margin: calc(var(--spacing-xs) * -1) 0 var(--spacing-lg);
  color: var(--color-text-muted);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  text-align: center;
}

/* Two columns with a hairline down the middle. */
.menu-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--spacing-4xl);
  align-items: start;
  padding-bottom: var(--menu-space);
  /* The hairline between the columns, painted rather than placed, so it
     always runs the full height of the section and meets the rule below. */
  background-image: linear-gradient(
    to right,
    transparent calc(50% - 0.5px),
    var(--color-line) calc(50% - 0.5px),
    var(--color-line) calc(50% + 0.5px),
    transparent calc(50% + 0.5px)
  );
}

/* A single item still spans the full width of the two column block. */
.menu-list--single {
  grid-template-columns: minmax(0, 1fr);
  background-image: none;
}

/* With the full width to play with, the description can run longer. */
.menu-list--single .menu-row__desc { max-width: 72ch; }

/* One row does not need the same tail as a section of fifteen. */
.menu-list--single { padding-bottom: var(--spacing-lg); }

.menu-row {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: var(--spacing-md);
  padding: var(--spacing-sm) 0;
}

.menu-row__name {
  font-size: var(--text-action);
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-title);
}

.menu-row__desc {
  grid-column: 1 / -1;
  margin-top: 2px;
  max-width: 44ch;
  color: var(--color-text-muted);
}

.menu-row__price {
  font-size: var(--text-action);
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-title);   /* shares the name's baseline */
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}


/* Closing CTA, photograph behind a scrim, held still while the page moves. */
.menu-close {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-4xl) var(--gutter);
  background: var(--color-cream);
  text-align: center;
}

.menu-close--photo {
  background: var(--color-ink) url("../assets/img/table-spread.jpg") center / cover no-repeat fixed;
  color: var(--color-text-inverse);
}

.menu-close--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 0.55);
}

.menu-close--photo > * { position: relative; }
.menu-close--photo .display { color: var(--color-text-inverse); }

.menu-close__actions { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); justify-content: center; }
.menu-close .btn--dark { background: var(--color-scrim-strong); }

/* --- Lightbox ---------------------------------------------------------------
   Opens from any gallery photo. Click the backdrop, press Escape or use the
   close button to leave; arrows and the chevrons move between photos.
   ---------------------------------------------------------------------------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: var(--spacing-3xl) var(--spacing-xl);
  background: rgb(0 0 0 / 0.92);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.lightbox[hidden] { display: none; }
.lightbox.is-open { opacity: 1; visibility: visible; }

.lightbox__img {
  max-width: min(1100px, 100%);
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-sm);
}

.lightbox .chev { color: var(--color-white); opacity: 0.7; }
.lightbox .chev:hover { opacity: 1; }

.lightbox__close {
  position: absolute;
  top: var(--spacing-md);
  right: var(--spacing-md);
  display: grid;
  place-items: center;
  width: var(--spacing-touch);
  height: var(--spacing-touch);
  color: var(--color-white);
  opacity: 0.7;
  transition: opacity 0.18s ease;
}

.lightbox__close:hover { opacity: 1; }
.lightbox__close svg { width: 22px; height: 22px; }

.lightbox__count {
  position: absolute;
  bottom: var(--spacing-md);
  left: 50%;
  translate: -50% 0;
  color: var(--color-text-inverse-muted);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-label);
}

/* Photos that open the lightbox say so on hover. */
.feature img { cursor: zoom-in; }

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

.footer {
  padding: var(--spacing-3xl) var(--gutter) var(--spacing-lg);
  background: var(--color-ink);
  color: var(--color-text-inverse-soft);
}

.footer__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-4xl);
  max-width: var(--container-narrow);
  margin: 0 auto;
}

.footer__logo img { width: 168px; height: auto; }

.footer__cols {
  display: flex;
  gap: var(--spacing-4xl);
  flex-wrap: wrap;
}

.footer__cols .label { color: var(--color-text-inverse-muted); margin-bottom: var(--spacing-xs); }
.footer__cols p + p { margin-top: var(--spacing-2xs); }
.footer__cols a { text-decoration: none; }
.footer__cols a:hover { text-decoration: underline; text-underline-offset: 3px; }

.footer__base {
  max-width: var(--container-narrow);
  margin: var(--spacing-3xl) auto 0;
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--color-line-inverse);
  color: var(--color-text-inverse-muted);
  font-size: var(--text-label);
}

/* ==========================================================================
   Mobile. 768px and below, matching the 390 wide artboard.
   ========================================================================== */

@media (max-width: 768px) {

  /* Mobile nav: the mark on its own band, then one hairline ruled row of
     links spread across the full width. */
  .nav { background-image: none; background-color: var(--color-black); }

  .nav__inner {
    flex-wrap: wrap;
    justify-content: center;
    /* No column gap: the two link groups have to read as one ruled band. */
    row-gap: var(--spacing-sm);
    column-gap: 0;
    padding: var(--spacing-md) 0 0;
  }

  .nav__logo { order: -1; width: 100%; display: flex; justify-content: center; }
  .nav__logo img { width: 152px; }

  /* Two groups, two links each, no padding or gap: space-around then puts
     all four centres a quarter of the width apart, whatever the labels say. */
  .nav__group {
    flex: 1 1 0;
    justify-content: space-around;
    gap: 0;
    padding: 0;
    background: var(--color-chip);
    border-top: 0.5px solid #373737;
    border-bottom: 0.5px solid #373737;
  }

  .nav__group a { min-height: 42px; }
  .nav__group a::after { bottom: 20%; }

  /* Scrolled, the link row is the bottom edge of the bar. */
  .nav.is-solid .nav__inner {
    padding-top: var(--spacing-2xs);
    padding-bottom: 0;
    row-gap: var(--spacing-2xs);
  }

  /* The mobile nav stacks, so it needs more clearance than the desktop band. */
  .hero { padding: calc(150px + var(--spacing-lg)) var(--gutter) var(--section-space); }
  .hero__body { max-width: var(--container-mobile); }

  .about { padding: var(--section-space) var(--gutter) var(--spacing-xl); }
  .about__inner { flex-direction: column; gap: var(--spacing-lg); }
  /* The 548px basis is a column width. Once stacked it becomes dead height,
     which is where the big empty band under each block came from. */
  .about__col { flex: 0 0 auto; gap: var(--spacing-lg); }
  .about__col--offset { gap: var(--spacing-lg); }
  .about__hero-img { height: 326px; }
  .about__pair img { height: 155px; }
  /* A short step, not a whole section's worth. */
  .about__pair img:first-child { margin-top: var(--spacing-lg); }

  /* The feature still fills the viewport, split 2 to 1. */
  .feature { flex-direction: column; gap: var(--spacing-xs); padding: var(--spacing-xs); }
  .slideshow { flex: 2 1 0; min-height: 0; }
  .ticker { flex: 1 1 0; min-height: 0; }

  .slideshow__caption {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-2xs);
    padding: var(--spacing-md);
  }

  .slideshow__caption .display,
  .slideshow__caption p { flex: 0 0 auto; }

  .chev--prev { left: var(--spacing-2xs); }
  .chev--next { right: var(--spacing-2xs); }

  /* Ticker runs sideways on mobile, where height is scarce. */
  .ticker__viewport {
    height: 100%;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%);
  }

  .ticker__track { flex-direction: row; height: 100%; gap: var(--spacing-xs); }
  .ticker__track img { height: 100%; width: 220px; }

  /* The rail runs sideways here, so the same two icons turn a quarter turn. */
  .chev--up { top: 50%; left: var(--spacing-2xs); translate: 0 -50%; }
  .chev--down { bottom: auto; top: 50%; left: auto; right: var(--spacing-2xs); translate: 0 -50%; }
  .chev--up svg, .chev--down svg { rotate: -90deg; }
  .chev--up:hover, .chev--down:hover { translate: 0 -50%; }

  .reserve {
    padding: var(--spacing-4xl) var(--gutter);
    background-image: url("../assets/img/reserve-bg-mobile.png");
  }

  .visit { padding: var(--section-space) var(--gutter); }
  .visit__inner { flex-direction: column; align-items: stretch; gap: var(--spacing-lg); }
  .visit__col { flex: 0 0 auto; }
  .visit__map { flex: 0 0 auto; height: 240px; }

  .hours__row { flex-wrap: wrap; gap: var(--spacing-3xs); }
  .hours__row dt { flex: 1 1 auto; }

  .faq { padding: var(--section-space) var(--gutter); }
  .faq__inner { gap: var(--spacing-xl); }

  .menu-hero {
    padding: calc(150px + var(--spacing-lg)) var(--gutter) var(--spacing-xl);
    background-image: url("../assets/img/menu-header-mobile.png");
  }

  .menu-body { padding: var(--spacing-xl) var(--gutter) var(--section-space); }
  .menu-group { --menu-space: var(--spacing-xl); }
  .menu-group__head { margin-bottom: var(--spacing-lg); }
  .menu-list { grid-template-columns: minmax(0, 1fr); background-image: none; }
  .menu-close { padding: var(--section-space) var(--gutter); }
  /* iOS will not composite a fixed background, so it scrolls here. */
  .menu-close--photo { background-attachment: scroll; }

  .delivery { padding: var(--section-space) var(--gutter); }
  .delivery__inner { gap: var(--spacing-2xl); }
  .delivery__list { flex-direction: column; align-items: stretch; gap: var(--spacing-md); }
  .platform { padding: var(--spacing-md) var(--spacing-lg); }

  .footer { padding: var(--section-space) var(--gutter) var(--spacing-lg); }
  .footer__inner { flex-direction: column; gap: var(--spacing-xl); }
  .footer__cols { gap: var(--spacing-xl); }
  .footer__base { margin-top: var(--spacing-xl); }
}

/* --- Reduced motion --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; }
  .scroll-cue__rail i { animation: none; top: 15px; }
  .hero__media img.is-active { scale: 1; }
}