/* ==========================================================================
   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 design, 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); }

/* Running copy is set in the sans. Everything else, buttons, labels,
   subtitles, item names, stays in the serif. */
.hero__lede,
.prose p,
.slideshow__caption p,
.reserve__note,
.visit__address,
.hours__row,
.faq__a,
.delivery__head p,
.menu-hero__lede,
.menu-row__desc,
.footer__cols p:not(.label),
.footer__base { font-family: var(--font-copy); }

/* --- 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); }
.btn--ghost svg { transition: translate 0.18s ease; }
.btn--ghost:hover svg { translate: 3px 0; }

/* --- 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);
  /* Ink at the top, gone by the bottom edge. It keeps the links and the
     mark legible over any frame of the slideshow. */
  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 */
  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;
  /* At least one screen tall. On a short screen (a phone with the browser's
     toolbars showing) it grows instead of letting the scroll cue run into
     the buttons. */
  min-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) calc(var(--spacing-lg) + env(safe-area-inset-bottom, 0px));
  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 design */
  margin-block: auto;              /* centred in the space above the scroll cue */
}

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

.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: relative;               /* in the flow, below the hero content */
  margin-top: var(--spacing-xl);
  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 {
  max-width: 260px;
  text-align: center;
  text-wrap: balance;
  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; }

/* Dark ground, a touch lighter at the top, with two of the logo's
   swooshes laid in at 30% black. */
.about {
  padding: 157px var(--gutter) 112px;  /* padding from the design */
  background: linear-gradient(in oklab to bottom, oklab(26% 0 0), oklab(19.6% 0 0));
  color: var(--color-text-inverse);
  overflow: clip;
  /* A soft edge as the section lifts over the hero. */
  box-shadow: 0 -24px 48px rgb(0 0 0 / 0.45);
}

.about::before,
.about::after {
  content: "";
  position: absolute;
  width: 2014.59px;
  height: 639px;
  background: url("../assets/svg/swoosh.svg") center / 100% 100% no-repeat;
  translate: -50% 0;
  pointer-events: none;
}

.about::before { left: calc(50% - 180.71px); bottom: -13px; }

.about::after {
  left: calc(50% + 2141.6px);
  bottom: -251.16px;
  rotate: -149.41deg;
  transform-origin: 0 0;
}

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

/* The About heading reads as a lead-in in the sans rather than a block of
   display capitals. 30px here; the mobile block brings it to 20px. */
.about .display {
  font-family: var(--font-copy);
  font-weight: var(--font-weight-light);
  font-size: 30px;
  line-height: 40px;
  letter-spacing: 0;
  text-transform: none;
}

.about__inner {
  position: relative;
  z-index: 1;                       /* above the swooshes */
  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: 60px;
}

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

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

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

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

.about__pair > :first-child { margin-top: 72px; }   /* step from the design */

.about .prose .title { margin-bottom: 20px; }

/* --- 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-surface-dark);
}

/* 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 0 auto; color: var(--color-cream); }
.slideshow__caption .nowrap { white-space: nowrap; }

/* Narrower than this the bracketed name is wider than the column. */
@media (max-width: 1100px) {
  .slideshow__caption .nowrap { white-space: normal; }
}
.slideshow__caption p { flex: 0 1 560px; color: var(--color-text-inverse-soft); }
.slideshow__caption strong { font-weight: var(--font-weight-semibold); }

/* Below this the dish name and the copy no longer fit side by side. */
@media (max-width: 1200px) {
  .slideshow__caption { flex-direction: column; align-items: flex-start; gap: var(--spacing-sm); }
  .slideshow__caption p { flex: 0 0 auto; max-width: 560px; }
}

/* Right: vertical ticker */

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

.ticker__viewport {
  height: 100%;
  overflow: hidden;
  touch-action: pan-x;              /* the drag along the rail is handled in script */
  user-select: none;
  -webkit-user-select: none;
  /* 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 design */
  object-fit: cover;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  -webkit-user-drag: none;
}

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

/* The backdrop is the prepped artwork, one crop per breakpoint. */
.reserve {
  position: relative;
  display: grid;
  place-items: center;
  padding: var(--spacing-4xl) 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: clamp(var(--spacing-xl), 6vw, 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 rgb(0 0 0 / 0.6);   /* a darker rule than --color-line */
  color: var(--color-text-inverse-soft);
}

.hours__row:last-child { border-bottom: 0; }

.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 1 600px;                  /* map width from the design; gives way on narrower screens */
  min-width: 0;
  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-content);
  margin: 0 auto;
}

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

.faq__list { width: 100%; }        /* full width, matching the sections around it */

.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 { max-width: 72ch; padding-bottom: var(--spacing-md); color: var(--color-text-muted); }   /* a readable line for long answers */

/* --- Delivery --------------------------------------------------------------
   Each platform sits on a soft white pill.
   -------------------------------------------------------------------------- */

.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-content);
  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) clamp(var(--spacing-md), 3vw, var(--spacing-2xl));
  border-radius: 142px;             /* pill radius from the design */
  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; }

.delivery__list > li { flex: 0 1 auto; min-width: 0; }

/* The logo scales down as a whole if its pill runs out of room; it is
   never squeezed out of proportion. */
.platform img { display: block; height: 32px; width: auto; max-width: 100%; object-fit: contain; }

/* Below 1100px three full-size logos no longer fit side by side, so the
   pills stack, as they do on phones. */
@media (min-width: 769px) and (max-width: 1100px) {
  .delivery__list { flex-direction: column; align-items: stretch; }
  .platform { padding: var(--spacing-md) var(--spacing-lg); }

  /* The 600px map no longer fits beside the hours; stack them. */
  .visit__inner { flex-direction: column; align-items: stretch; gap: var(--spacing-xl); }
  .visit__col { flex: 0 0 auto; }
  .visit__map { flex: 0 0 auto; width: 100%; }
}

/* --- 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 {
  /* The same on both menus, so switching between them does not jump. */
  min-height: 424px;              /* fits the food chips when they wrap to two rows */
  /* 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 #6e0d16;         /* idle stroke from the design */
  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;
}

/* Hover sinks the pill a shade deeper; the stroke stays put. */
.menu-jump a:hover { background: var(--color-brand-deep); }

.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; }

/* Touch screens (iPad and iPhone Safari among them) cannot hold a fixed
   background: they stretch the photo over the whole page instead. There,
   and on narrower screens, it scrolls with the section. */
@media (hover: none), (max-width: 1100px) {
  .menu-close--photo { background-attachment: scroll; }
}
.menu-close--photo .display { color: var(--color-text-inverse); }

.menu-close__actions { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); justify-content: center; }


/* --- Back to top -----------------------------------------------------------
   Bottom right, out of the way until the first screen has scrolled past.
   ---------------------------------------------------------------------------- */

.to-top {
  position: fixed;
  right: calc(var(--spacing-md) + env(safe-area-inset-right, 0px));
  bottom: calc(var(--spacing-md) + env(safe-area-inset-bottom, 0px));
  z-index: 20;
  display: grid;
  place-items: center;
  width: var(--spacing-touch);
  height: var(--spacing-touch);
  border: 1px solid var(--color-line-inverse);
  border-radius: var(--radius-pill);
  background: var(--color-scrim-strong);
  color: var(--color-text-inverse);
  opacity: 0;
  visibility: hidden;
  translate: 0 8px;
  transition: opacity 0.25s ease, visibility 0.25s ease, translate 0.25s ease, background-color 0.18s ease;
}

.to-top.is-visible { opacity: 1; visibility: visible; translate: 0 0; }
.to-top:hover { background: var(--color-brand); border-color: var(--color-brand); }

/* --- 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%);
  /* The screen less the box's own padding. A plain 100% does not resolve
     inside the grid, which let tall and square photos run off the bottom. */
  max-height: calc(100svh - 2 * var(--spacing-3xl));
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-sm);
  transition: opacity 0.2s ease;
}

/* The instant a new photo is asked for, the old one goes. */
.lightbox__img.is-swapping { opacity: 0; transition: none; }

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

/* One photo: nothing to step through. */
.lightbox.is-single .chev,
.lightbox.is-single .lightbox__count { display: none; }

.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; }

/* A photo wrapped to open in the lightbox. The wrapper takes the size and
   the crop; the photo fills it. */
.zoom {
  position: relative;
  display: block;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  overflow: clip;
  background: none;
  cursor: zoom-in;
}

.zoom img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.zoom__icon {
  position: absolute;
  right: var(--spacing-xs);
  bottom: var(--spacing-xs);
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-line-inverse);   /* holds its edge on dark photos */
  background: var(--color-scrim-strong);
  color: var(--color-text-inverse);
  opacity: 0;
  translate: 0 4px;
  transition: opacity 0.2s ease, translate 0.2s ease;
}

.zoom:hover .zoom__icon,
.zoom:focus-visible .zoom__icon { opacity: 1; translate: 0 0; }

/* No hover on touch screens, so the icon simply stays. */
@media (hover: none) {
  .zoom__icon { opacity: 1; translate: 0 0; }
}

/* --- 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-content);
  margin: 0 auto;
}

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

/* Visit, Hours and Social always share one row on desktop. */
.footer__cols {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: space-between;
  column-gap: var(--spacing-xl);
  flex: 1 1 auto;
  max-width: 760px;
}

/* Below this the logo takes its own line so the three columns keep theirs. */
@media (max-width: 1100px) {
  .footer__inner { flex-direction: column; gap: var(--spacing-xl); }
  .footer__cols { width: 100%; }
}

.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__social { display: inline-flex; align-items: center; gap: var(--spacing-2xs); }
.footer__social svg { flex-shrink: 0; }
.footer__cols a:hover { text-decoration: underline; text-underline-offset: 3px; }

.footer__base {
  max-width: var(--container-content);
  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, designed at 390px wide.
   ========================================================================== */

@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(--spacing-3xl) var(--gutter) var(--spacing-2xl); }

  .about::before {
    width: 2310.94px;
    height: 733px;
    left: calc(50% + 86.47px);
    bottom: -124px;
  }

  .about::after {
    width: 2903.65px;
    height: 921px;
    left: calc(50% + 666.83px);
    bottom: 733px;
    rotate: none;
  }

  .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: 60px; }
  .about__col--offset { gap: 40px; }
  .about .display { font-size: var(--text-title); line-height: var(--leading-title); }
  .about__hero-img { height: 326px; }
  .about__pair > * { height: 155px; }
  /* A short step, not a whole section's worth. */
  .about__pair { gap: var(--spacing-sm); }
  .about__pair > :first-child { margin-top: 72px; }
  .about .prose .title { margin-bottom: var(--spacing-sm); }

  /* 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;
    touch-action: pan-y;            /* the page still scrolls; sideways is ours */
    -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-3xl) 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 {
    min-height: 472px;              /* the food menu's height, the taller of the two */
    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); }

  .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 { grid-template-columns: minmax(0, 1fr); row-gap: var(--spacing-xl); }
  .footer__base { margin-top: var(--spacing-xl); }

  .to-top { right: calc(var(--spacing-sm) + env(safe-area-inset-right, 0px)); bottom: calc(var(--spacing-sm) + env(safe-area-inset-bottom, 0px)); }
}

/* --- Loader ----------------------------------------------------------------
   The logo sits faint, then fills from the bottom with a slow wave. Only the
   first page of a visit shows it (see the inline script in <head>). Small
   enough that animating the mask costs next to nothing.
   ---------------------------------------------------------------------------- */

.loader { display: none; }

.is-loading { overflow: hidden; }

.is-loading .loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: var(--color-ink);
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

.loader.is-done { opacity: 0; visibility: hidden; }

.loader__mark { position: relative; width: 240px; }

.loader__mark img { display: block; width: 100%; height: auto; }

.loader__ghost { opacity: 0.12; filter: grayscale(1); }

/* The wave is a mask twice the logo's height: clear above the crest, solid
   below. Sliding it up fills the mark; sliding it sideways makes it a wave. */
.loader__fill {
  position: absolute;
  inset: 0;
  --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 400' preserveAspectRatio='none'%3E%3Cpath d='M0 200 Q40 184 80 200 T160 200 V400 H0Z'/%3E%3C/svg%3E");
  -webkit-mask: var(--wave) 0 0 / 160px 200% repeat-x;
  mask: var(--wave) 0 0 / 160px 200% repeat-x;
  animation: loader-fill 1.6s cubic-bezier(0.45, 0, 0.25, 1) 0.15s forwards;
}

@keyframes loader-fill {
  from { -webkit-mask-position: 0 0%; mask-position: 0 0%; }
  to   { -webkit-mask-position: -480px 100%; mask-position: -480px 100%; }
}

/* --- Reveal -----------------------------------------------------------------
   Content rises a few pixels and fades in as it enters the viewport, in a
   short stagger. Classes are set from site.js; without it nothing hides.
   ---------------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition: opacity 0.8s cubic-bezier(0.2, 0.6, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.reveal.is-in { opacity: 1; transform: none; }

/* --- 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; }
}