/* UzEats restaurant landing — base component system.
   Brand-agnostic. Reads every colour, font and measure from tokens.css.
   Nothing restaurant-specific belongs in this file. */

/* ---------------------------------------------------------------- reset */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.7;
  color: var(--fg-on-light-1);
  background: var(--bone-50);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

/* Must outrank the display rules above, or `hidden` silently stops working
   on images and embeds. */
[hidden] {
  display: none !important;
}

img {
  height: auto;
}

ul,
ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

p {
  margin: 0 0 var(--space-sm);
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-variation-settings: "wdth" var(--display-width);
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-wrap: balance;
}

a {
  color: inherit;
}

button {
  font: inherit;
  color: inherit;
}

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

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

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-sm);
  z-index: 2000;
  padding: 0.75rem 1.25rem;
  background: var(--ink-900);
  color: var(--bone-50);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius);
}

.skip-link:focus {
  top: var(--space-sm);
}

/* ------------------------------------------------------------- surfaces */
/* A section declares its surface; every component inside reads --fg-1,
   --fg-2, --accent and --line from it. This makes it structurally
   impossible to place a component on a background it cannot be read on. */

.surface--bone {
  --surface: var(--bone-50);
  --surface-raised: var(--white);
  --surface-sunken: var(--bone-100);
  --line: var(--bone-200);
  --line-strong: var(--bone-300);
  --fg-1: var(--fg-on-light-1);
  --fg-2: var(--fg-on-light-2);
  --accent: var(--accent-on-light);
  --accent-contrast: var(--bone-50);
  background: var(--surface);
  color: var(--fg-1);
}

.surface--bone-sunken {
  --surface: var(--bone-100);
  --surface-raised: var(--white);
  --surface-sunken: var(--bone-200);
  --line: var(--bone-300);
  --line-strong: var(--bone-300);
  --fg-1: var(--fg-on-light-1);
  --fg-2: var(--fg-on-light-2);
  --accent: var(--accent-on-light);
  --accent-contrast: var(--bone-50);
  background: var(--surface);
  color: var(--fg-1);
}

.surface--ink {
  --surface: var(--ink-900);
  --surface-raised: var(--ink-800);
  --surface-sunken: #060607;
  --line: rgba(250, 248, 244, 0.14);
  --line-strong: rgba(250, 248, 244, 0.28);
  --fg-1: var(--fg-on-dark-1);
  --fg-2: var(--fg-on-dark-2);
  --accent: var(--accent-on-dark);
  --accent-contrast: var(--ink-900);
  background: var(--surface);
  color: var(--fg-1);
}

/* --------------------------------------------------------------- layout */

.container {
  width: min(100% - 2.5rem, var(--container));
  margin-inline: auto;
}

.section {
  padding-block: var(--section-y);
}

.section--tight {
  padding-block: clamp(2.5rem, 5vw, 4rem);
}

.section__head {
  max-width: var(--container-narrow);
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.section__head--center {
  margin-inline: auto;
  text-align: center;
}

.eyebrow {
  display: block;
  margin: 0 0 var(--space-sm);
  font-family: var(--font-accent);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

.section__title {
  font-size: var(--step-4);
  color: var(--fg-1);
}

.section__lead {
  margin: var(--space-md) 0 0;
  max-width: 58ch;
  font-size: var(--step-1);
  line-height: 1.6;
  color: var(--fg-2);
}

.section__head--center .section__lead {
  margin-inline: auto;
}

/* Thin ruled label used to separate blocks without adding a heavy divider */
.rule-label {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-accent);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-2);
}

.rule-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* -------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 50px;
  padding: 0.8rem 1.6rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-accent);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background var(--dur) var(--ease),
    color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    transform var(--dur-fast) var(--ease);
}

.btn:hover {
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(0);
}

.btn--primary {
  background: var(--accent);
  color: var(--accent-contrast);
  border-color: var(--accent);
}

.btn--primary:hover {
  background: var(--fg-1);
  border-color: var(--fg-1);
  color: var(--surface);
}

.btn--secondary {
  background: var(--fg-1);
  color: var(--surface);
  border-color: var(--fg-1);
}

.btn--secondary:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
}

.btn--ghost {
  background: transparent;
  color: var(--fg-1);
  border-color: var(--line-strong);
}

.btn--ghost:hover {
  border-color: var(--fg-1);
  background: var(--fg-1);
  color: var(--surface);
}

.btn--sm {
  min-height: 42px;
  padding: 0.55rem 1.1rem;
  font-size: 0.74rem;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.btn-row--center {
  justify-content: center;
}

/* Link that reads as a link on any surface */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-accent);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--accent);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: gap var(--dur) var(--ease), color var(--dur) var(--ease);
}

.link-arrow:hover {
  gap: 0.9rem;
  color: var(--fg-1);
}

/* --------------------------------------------------------------- header */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 900;
  border-bottom: 1px solid transparent;
  transition:
    background var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    backdrop-filter var(--dur) var(--ease);
}

.site-header.is-scrolled,
.site-header.is-solid {
  background: rgba(11, 11, 12, 0.92);
  backdrop-filter: blur(14px);
  border-bottom-color: rgba(250, 248, 244, 0.12);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  min-height: var(--header-h);
}

.logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}

.logo__mark {
  width: auto;
  height: 34px;
}

/* The wordmark is live text rather than an image so it renders in the brand
   display face, stays crisp at any density, and remains selectable. */
.logo__word {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4em;
  font-family: var(--font-display);
  font-weight: 800;
  font-variation-settings: "wdth" 116;
  font-size: 1.02rem;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--bone-50);
}

.logo__word em {
  font-style: normal;
  color: var(--accent-on-dark);
}

.nav {
  margin-left: auto;
}

.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 2rem);
}

.nav__list a {
  position: relative;
  font-family: var(--font-accent);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--fg-on-dark-2);
  transition: color var(--dur) var(--ease);
}

.nav__list a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 1px;
  background: var(--accent-on-dark);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}

.nav__list a:hover,
.nav__list a[aria-current="page"],
.nav__list a.is-active {
  color: var(--fg-on-dark-1);
}

.nav__list a:hover::after,
.nav__list a[aria-current="page"]::after,
.nav__list a.is-active::after {
  transform: scaleX(1);
}

.nav__list .btn {
  color: var(--ink-900);
}

.header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-shrink: 0;
}

.header__actions .btn {
  --accent: var(--accent-on-dark);
  --accent-contrast: var(--ink-900);
  --fg-1: var(--fg-on-dark-1);
  --surface: var(--ink-900);
  --line-strong: rgba(250, 248, 244, 0.32);
}

.nav-toggle {
  display: none;
  order: 3;
  margin-left: auto;
  width: 46px;
  height: 46px;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(250, 248, 244, 0.28);
  border-radius: var(--radius);
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 20px;
  height: 1.5px;
  margin: 4px auto;
  background: var(--bone-50);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(5.5px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-5.5px) rotate(-45deg);
}

/* ----------------------------------------------------------------- hero */

.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  background: var(--ink-900);
  color: var(--fg-on-dark-1);
  --accent: var(--accent-on-dark);
  --accent-contrast: var(--ink-900);
  --fg-1: var(--fg-on-dark-1);
  --fg-2: var(--fg-on-dark-2);
  --surface: var(--ink-900);
  --line: rgba(250, 248, 244, 0.14);
  --line-strong: rgba(250, 248, 244, 0.3);
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
  /* Pulls the daylight sky in this particular kind of shot back toward
     neutral so it does not fight an ink palette. */
  filter: saturate(0.7) contrast(1.04);
}

/* Graded hard, for two reasons: the facade should read as the near-black it
   actually is, and overlaid type must clear AA whatever the photo does
   underneath it. Anything already printed on the building drops back to
   texture rather than competing with the headline. */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to top,
      var(--ink-900) 0%,
      rgba(11, 11, 12, 0.95) 30%,
      rgba(11, 11, 12, 0.84) 66%,
      rgba(11, 11, 12, 0.8) 100%
    ),
    linear-gradient(
      to right,
      rgba(11, 11, 12, 0.55) 0%,
      rgba(11, 11, 12, 0.1) 60%,
      transparent 100%
    );
}

.hero__inner {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(4rem, 12vw, 9rem));
  padding-bottom: clamp(2rem, 4vw, 3rem);
}

.hero__eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 var(--space-md);
  font-family: var(--font-accent);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-on-dark-2);
}

.hero__eyebrow-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent-on-dark);
}

.hero__title {
  margin: 0;
  font-size: var(--step-5);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--fg-on-dark-1);
}

.hero__title-line {
  display: block;
}

.hero__title-line--accent {
  color: var(--accent-on-dark);
}

.hero__lead {
  margin: var(--space-md) 0 0;
  max-width: 48ch;
  font-size: var(--step-1);
  line-height: 1.6;
  color: var(--fg-on-dark-1);
}

.hero__cta {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

/* Facts rail pinned to the base of the hero — replaces the old circular
   dish collage, and needs no photography at all. */
.hero__rail {
  position: relative;
  border-top: 1px solid rgba(250, 248, 244, 0.16);
  background: rgba(11, 11, 12, 0.55);
  backdrop-filter: blur(6px);
}

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

.hero__rail-item {
  padding: clamp(1rem, 2vw, 1.5rem) 0;
  padding-right: var(--space-md);
}

.hero__rail-item + .hero__rail-item {
  padding-left: var(--space-md);
  border-left: 1px solid rgba(250, 248, 244, 0.16);
}

.hero__rail-term {
  display: block;
  margin-bottom: 0.3rem;
  font-family: var(--font-accent);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-on-dark);
}

.hero__rail-desc {
  margin: 0;
  font-size: var(--step-0);
  font-weight: 500;
  line-height: 1.4;
  color: var(--fg-on-dark-1);
}

.hero__rail-desc a {
  text-decoration: none;
  border-bottom: 1px solid rgba(250, 248, 244, 0.35);
}

.hero__rail-desc a:hover {
  border-bottom-color: var(--accent-on-dark);
  color: var(--accent-on-dark);
}

.hero__scroll {
  position: absolute;
  right: 0;
  bottom: calc(100% + 1.5rem);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-accent);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-on-dark-2);
  text-decoration: none;
}

.hero__scroll-line {
  display: block;
  width: 1px;
  height: 34px;
  background: linear-gradient(to bottom, transparent, var(--accent-on-dark));
  animation: scroll-cue 2.4s var(--ease) infinite;
}

@keyframes scroll-cue {
  0%,
  100% {
    transform: scaleY(0.4);
    transform-origin: top;
  }
  50% {
    transform: scaleY(1);
    transform-origin: top;
  }
}

/* Hero variant: cinematic — one landscape photo, full bleed */
.hero--cinematic {
  min-height: min(94vh, 900px);
}

.hero--cinematic .hero__inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* Hero variant: editorial — type block beside a single tall photo.
   For restaurants with a portrait shot but no usable wide one. */
.hero--editorial {
  min-height: min(90vh, 860px);
}

.hero--editorial .hero__media {
  inset: 0 0 0 auto;
  width: 42%;
  z-index: -1;
}

.hero--editorial .hero__media::after {
  background: linear-gradient(
    to right,
    var(--ink-900) 0%,
    rgba(11, 11, 12, 0.55) 35%,
    rgba(11, 11, 12, 0.25) 100%
  );
}

.hero--editorial .hero__inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero--editorial .hero__title,
.hero--editorial .hero__lead {
  max-width: 18ch;
}

.hero--editorial .hero__lead {
  max-width: 40ch;
}

/* Hero variant: typographic — no photograph required anywhere.
   For restaurants where no usable imagery exists. */
.hero--typographic {
  min-height: min(86vh, 800px);
  background:
    radial-gradient(
      ellipse 70% 55% at 50% 15%,
      rgba(225, 116, 58, 0.22) 0%,
      transparent 70%
    ),
    var(--ink-900);
}

.hero--typographic .hero__media {
  display: none;
}

/* Charcoal grain, drawn in CSS so it costs no image request */
.hero--typographic::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.5;
  background-image:
    repeating-linear-gradient(
      115deg,
      rgba(250, 248, 244, 0.035) 0 1px,
      transparent 1px 4px
    ),
    repeating-linear-gradient(
      -25deg,
      rgba(250, 248, 244, 0.025) 0 1px,
      transparent 1px 7px
    );
}

.hero--typographic .hero__inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.hero--typographic .hero__eyebrow {
  justify-content: center;
}

.hero--typographic .hero__title {
  font-size: clamp(3.2rem, 12vw, 9rem);
}

.hero--typographic .hero__lead {
  margin-inline: auto;
  text-align: center;
}

.hero--typographic .hero__cta {
  justify-content: center;
  display: flex;
}

.hero--typographic .hero__scroll {
  display: none;
}

/* -------------------------------------------------------------- marquee */

.marquee {
  overflow: hidden;
  padding: 0.9rem 0;
  background: var(--accent-on-light);
  color: var(--bone-50); /* 5.96:1 */
  border-block: 1px solid rgba(11, 11, 12, 0.18);
  user-select: none;
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 42s linear infinite;
}

.marquee:hover .marquee__track {
  animation-play-state: paused;
}

.marquee__group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 2.5rem;
  padding-right: 2.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-variation-settings: "wdth" var(--display-width);
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.marquee__item::after {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.7;
}

@keyframes marquee-scroll {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

/* ---------------------------------------------------------------- story */

.story__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.story__body .section__title {
  margin-bottom: var(--space-md);
}

.story__body p {
  font-size: var(--step-1);
  line-height: 1.65;
  color: var(--fg-2);
}

.story__lead {
  font-size: var(--step-2);
  line-height: 1.45;
  color: var(--fg-1);
}

.story__body strong {
  color: var(--fg-1);
  font-weight: 600;
}

.story__figure {
  position: relative;
  margin: 0;
}

.story__figure img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
}

/* For a source image that is square — a round platter shot from above loses
   its rim if it is cropped to the portrait default. */
.story__figure--square img {
  aspect-ratio: 1 / 1;
}

.story__caption {
  margin-top: var(--space-xs);
  font-family: var(--font-accent);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-2);
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--line);
}

.stat__value {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-variation-settings: "wdth" var(--display-width);
  font-size: var(--step-3);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--accent);
}

.stat__label {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--font-accent);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-2);
}

/* --------------------------------------------------------------- dishes */

.dishes__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-sm);
}

.dish-card {
  position: relative;
  grid-column: span 2;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--surface-sunken);
  border: 1px solid var(--line);
}

/* Feature tiles are wider, so they are only ever given images proven large
   enough for them. See the image audit note in README. */
.dish-card--feature {
  grid-column: span 3;
}

.dish-card__link {
  display: block;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.dish-card__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);
}

.dish-card--feature .dish-card__img {
  aspect-ratio: 16 / 10;
}

.dish-card__link:hover .dish-card__img {
  transform: scale(1.04);
}

.dish-card__body {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: 1rem 1.1rem 1.15rem;
}

.dish-card__name {
  font-size: var(--step-1);
  letter-spacing: -0.01em;
  color: var(--fg-1);
}

.dish-card__price {
  flex-shrink: 0;
  font-family: var(--font-accent);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--accent);
}

.dish-card__note {
  margin: 0;
  padding: 0 1.1rem 1.15rem;
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--fg-2);
}

/* No-photo variant. Used wherever a real photograph does not exist, so the
   page never ships a placeholder or a stretched thumbnail. */
.dish-card--typographic {
  background: var(--ink-900);
  border-color: var(--ink-700);
  --fg-1: var(--fg-on-dark-1);
  --fg-2: var(--fg-on-dark-2);
  --accent: var(--accent-on-dark);
}

.dish-card--typographic .dish-card__link {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100%;
  padding: 1.25rem 1.1rem 1.15rem;
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(225, 116, 58, 0.07) 0 1px,
    transparent 1px 9px
  );
}

.dish-card--typographic .dish-card__body {
  padding: 0;
  margin-top: auto;
}

.dish-card--typographic .dish-card__note {
  padding: 0.5rem 0 0;
}

.dish-card__kicker {
  font-family: var(--font-accent);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

.dish-card--typographic .dish-card__name {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  font-size: var(--step-2);
}

/* View-all tile */
.dish-card--all {
  background: var(--fg-1);
  border-color: var(--fg-1);
}

.dish-card--all .dish-card__link {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100%;
  padding: 1.25rem 1.1rem;
  color: var(--surface);
}

.dish-card--all .dish-card__name {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  color: var(--surface);
}

.dish-card--all .dish-card__kicker {
  color: var(--surface);
  opacity: 0.7;
}

.dish-card--all .dish-card__link:hover {
  background: var(--accent);
  color: var(--accent-contrast);
}

/* ----------------------------------------------------------------- band */
/* Full-bleed statement over a photograph. Only fed images verified large
   enough to fill a viewport without upscaling. */

.band {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: min(72vh, 680px);
  padding-block: var(--section-y);
  overflow: hidden;
  text-align: center;
  --accent: var(--accent-on-dark);
  --accent-contrast: var(--ink-900);
  --fg-1: var(--fg-on-dark-1);
  --fg-2: var(--fg-on-dark-2);
  --surface: var(--ink-900);
  --line-strong: rgba(250, 248, 244, 0.3);
  color: var(--fg-on-dark-1);
  background: var(--ink-900);
}

.band__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.band__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The room has white walls and ceiling. Pulling the highlights down keeps
     the small eyebrow above the title legible without burying the photo. */
  filter: brightness(0.82) saturate(0.9);
}

.band__media::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Weighted to the top, where the eyebrow sits over the brightest part of
     the ceiling. Verified against the photo, not assumed. */
  background: linear-gradient(
    to bottom,
    rgba(11, 11, 12, 0.92) 0%,
    rgba(11, 11, 12, 0.88) 36%,
    rgba(11, 11, 12, 0.76) 66%,
    rgba(11, 11, 12, 0.9) 100%
  );
}

.band__inner {
  max-width: 62ch;
}

.band__title {
  font-size: var(--step-4);
  color: var(--fg-on-dark-1);
}

.band__text {
  margin: var(--space-md) auto 0;
  max-width: 52ch;
  font-size: var(--step-1);
  line-height: 1.65;
  color: var(--fg-on-dark-1);
}

.band__cta {
  display: flex;
  justify-content: center;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

/* ---------------------------------------------------------- room figure */
/* A supporting interior shot under the room band, on the same ink surface
   so the two read as one chapter. */
.room-figure {
  max-width: 46rem;
  margin: 0 auto;
}

/* Matches the source ratio so the chapan at the top of the frame is not
   cropped away. */
.room-figure img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
}

.room-figure__caption {
  margin-top: var(--space-xs);
  font-family: var(--font-accent);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-on-dark-2);
}

/* --------------------------------------------------------------- values */
/* Text-first, so it needs no photography. */

.values__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-sm);
}

.value-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.value-card:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
}

.value-card__num {
  font-family: var(--font-accent);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--accent);
}

.value-card__icon {
  width: 30px;
  height: 30px;
  margin-bottom: var(--space-xs);
  color: var(--accent);
}

.value-card__title {
  font-size: var(--step-2);
  color: var(--fg-1);
}

.value-card__text {
  margin: 0;
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--fg-2);
}

/* ------------------------------------------------------------ locations */

.locations__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-sm);
}

.location-card {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.location-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
}

.location-card__hood {
  margin: 0 0 0.35rem;
  font-family: var(--font-accent);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

.location-card__name {
  font-size: var(--step-2);
  color: var(--fg-1);
}

.location-card__address {
  margin: var(--space-xs) 0 0;
  font-style: normal;
  line-height: 1.6;
  color: var(--fg-2);
}

.location-card__meta {
  display: grid;
  gap: 0.35rem;
  margin: var(--space-sm) 0 var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--line);
}

.location-card__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  font-size: var(--step--1);
}

.location-card__row dt {
  font-family: var(--font-accent);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-2);
}

.location-card__row dd {
  margin: 0;
  font-weight: 600;
  text-align: right;
  color: var(--fg-1);
}

.location-card__row a {
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
}

.location-card__row a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.location-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: auto;
}

.location-card__actions .btn {
  flex: 1 1 auto;
}

/* Map */

.map {
  position: relative;
  margin-top: clamp(2rem, 4vw, 3rem);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-sunken);
}

.map iframe {
  width: 100%;
  height: clamp(320px, 42vw, 460px);
  border: 0;
  filter: grayscale(1) contrast(1.05);
  transition: filter var(--dur-slow) var(--ease);
}

.map:hover iframe {
  filter: grayscale(0);
}

/* ------------------------------------------------------------------ faq */

.faq__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.faq__list {
  border-top: 1px solid var(--line);
}

.faq__item {
  border-bottom: 1px solid var(--line);
}

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: 1.35rem 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-variation-settings: "wdth" var(--display-width);
  font-size: var(--step-1);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--fg-1);
  cursor: pointer;
  list-style: none;
  transition: color var(--dur) var(--ease);
}

.faq__q::-webkit-details-marker {
  display: none;
}

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

.faq__icon {
  position: relative;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--dur) var(--ease);
}

.faq__icon::after {
  transform: rotate(90deg);
}

.faq__item[open] .faq__icon::after {
  transform: rotate(0deg);
}

.faq__item[open] .faq__q {
  color: var(--accent);
}

.faq__a {
  margin: 0;
  padding: 0 0 1.5rem;
  max-width: 62ch;
  color: var(--fg-2);
}

/* -------------------------------------------------------------- contact */

.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.contact__facts {
  display: grid;
  gap: 0;
  margin: 0;
  border-top: 1px solid var(--line);
}

.contact__fact {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  gap: var(--space-sm);
  align-items: baseline;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--line);
}

.contact__fact dt {
  font-family: var(--font-accent);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-2);
}

.contact__fact dd {
  margin: 0;
  font-size: var(--step-0);
  line-height: 1.55;
  color: var(--fg-1);
}

.contact__fact a {
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.contact__fact a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.contact__status {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: var(--space-md) 0 0;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  font-family: var(--font-accent);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-1);
}

.contact__status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--positive-on-dark);
}

/* Form */

.form {
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.form__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm);
}

.field {
  display: grid;
  gap: 0.4rem;
}

.field--full {
  grid-column: 1 / -1;
}

.field__label {
  font-family: var(--font-accent);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-1);
}

.field__input,
.field__textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  font: inherit;
  font-size: var(--step-0);
  color: var(--fg-1);
  background: var(--surface-sunken);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.field__input::placeholder,
.field__textarea::placeholder {
  color: var(--fg-2); /* explicit token, not an opacity guess */
  opacity: 1;
}

.field__input:focus,
.field__textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(225, 116, 58, 0.25);
}

.field__textarea {
  min-height: 8.5rem;
  resize: vertical;
}

.form__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.form__note {
  margin: 0;
  font-size: var(--step--1);
  color: var(--fg-2);
}

/* --------------------------------------------------------------- footer */

.site-footer {
  padding-top: clamp(3rem, 6vw, 5rem);
}

.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

.footer__brand p {
  margin: var(--space-sm) 0 0;
  max-width: 34ch;
  color: var(--fg-2);
}

.footer__col h2 {
  margin: 0 0 var(--space-sm);
  font-size: 0.72rem;
  font-family: var(--font-accent);
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--fg-2);
}

.footer__col li + li {
  margin-top: 0.5rem;
}

.footer__col a {
  font-size: var(--step--1);
  text-decoration: none;
  color: var(--fg-1);
  transition: color var(--dur) var(--ease);
}

.footer__col a:hover {
  color: var(--accent);
}

.footer__bar {
  padding: var(--space-sm) 0;
  border-top: 1px solid var(--line);
}

.footer__bar-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-xs);
}

.footer__bar p {
  margin: 0;
  font-size: var(--step--1);
  color: var(--fg-2);
}

.footer__bar a {
  color: var(--fg-1);
}

/* ----------------------------------------------------------- menu page */

.menu-page {
  padding-top: calc(var(--header-h) + clamp(2.5rem, 5vw, 4rem));
  padding-bottom: var(--section-y);
}

.menu__tabs {
  display: flex;
  gap: 0.5rem;
  padding-bottom: 0.75rem;
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.menu__tabs-sticky {
  position: sticky;
  top: var(--header-h);
  z-index: 500;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
  padding-top: 0.75rem;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.menu__tab {
  flex-shrink: 0;
  padding: 0.6rem 1.1rem;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  font-family: var(--font-accent);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-2);
  white-space: nowrap;
  cursor: pointer;
  transition:
    background var(--dur) var(--ease),
    color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.menu__tab:hover {
  color: var(--fg-1);
  border-color: var(--fg-1);
}

.menu__tab.is-active {
  background: var(--fg-1);
  border-color: var(--fg-1);
  color: var(--surface);
}

.menu__panel[hidden] {
  display: none;
}

.menu__section-title {
  margin: clamp(2rem, 4vw, 3rem) 0 var(--space-md);
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--line);
  font-size: var(--step-2);
  color: var(--fg-1);
}

.menu__panel:first-child .menu__section-title:first-child {
  margin-top: 0;
}

.menu__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-sm);
}

.menu-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.menu-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.menu-card__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--surface-sunken);
}

/* Menu items with no photograph get the same honest typographic treatment
   as the landing, rather than a stretched or placeholder image. */
.menu-card__noimg {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  background: var(--ink-900);
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(225, 116, 58, 0.08) 0 1px,
    transparent 1px 9px
  );
  color: var(--accent-on-dark);
  font-family: var(--font-accent);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.menu-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.35rem;
  padding: 0.95rem 1rem 1.1rem;
}

.menu-card__title {
  font-size: var(--step-1);
  letter-spacing: -0.01em;
  color: var(--fg-1);
}

/* Two lines on the card, full text in the item modal. Source descriptions
   run from a few words to a full paragraph, so clamping is what keeps a row
   of cards the same height. Clamping is visual only — the element still holds
   the whole string, which is what the modal and screen readers read. */
.menu-card__desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  margin: 0;
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--fg-2);
}

.menu-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  margin-top: auto;
  padding-top: 0.75rem;
}

.menu-card__price {
  font-family: var(--font-accent);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--accent);
}

.menu-card__add {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  background: var(--fg-1);
  color: var(--surface);
  border-radius: var(--radius);
  font-size: 1.1rem;
  line-height: 1;
  text-decoration: none;
  transition: background var(--dur) var(--ease);
}

.menu-card__add:hover {
  background: var(--accent);
  color: var(--accent-contrast);
}

.menu__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--line);
}

/* Menu modal */

.menu-modal {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: grid;
  place-items: center;
  padding: var(--space-sm);
}

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

.menu-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 11, 12, 0.82);
  backdrop-filter: blur(6px);
  border: 0;
  cursor: pointer;
}

.menu-modal__dialog {
  position: relative;
  width: min(100%, 480px);
  max-height: 90vh;
  overflow-y: auto;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.menu-modal__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  /* Opaque, because this button sits over both photographs and plain white
     depending on whether the item has an image. */
  background: var(--ink-900);
  color: var(--bone-50);
  border: 0;
  border-radius: 50%;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}

.menu-modal__close:hover {
  background: var(--accent-on-light);
}

.menu-modal__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.menu-modal__body {
  padding: clamp(1.25rem, 3vw, 1.75rem);
}

.menu-modal__title {
  font-size: var(--step-2);
  color: var(--fg-on-light-1);
}

/* With no photo above it the title sits level with the close button. */
.menu-modal__img[hidden] + .menu-modal__body .menu-modal__title {
  padding-right: 2.75rem;
}

.menu-modal__desc {
  margin: var(--space-xs) 0 0;
  color: var(--fg-on-light-2);
}

.menu-modal__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.menu-modal__price {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-variation-settings: "wdth" var(--display-width);
  font-size: var(--step-2);
  color: var(--accent-on-light);
}

/* ---------------------------------------------------------- thank you */

.thanks {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: calc(var(--header-h) + var(--space-xl)) 0 var(--space-xl);
  text-align: center;
}

.thanks__title {
  font-size: var(--step-4);
}

.thanks__text {
  margin: var(--space-md) auto var(--space-lg);
  max-width: 46ch;
  color: var(--fg-2);
}

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

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}

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

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }

  .marquee__track {
    animation: none;
    transform: none;
  }

  .hero__scroll-line {
    animation: none;
  }
}

/* ----------------------------------------------------------- responsive */

@media (max-width: 1080px) {
  .footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 960px) {
  :root {
    --header-h: 66px;
  }

  .nav-toggle {
    display: block;
  }

  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto;
    margin: 0;
    padding: var(--space-sm) 1.25rem var(--space-md);
    background: rgba(11, 11, 12, 0.97);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(250, 248, 244, 0.14);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition:
      opacity var(--dur) var(--ease),
      transform var(--dur) var(--ease),
      visibility var(--dur) var(--ease);
  }

  .nav.is-open {
    transform: none;
    opacity: 1;
    visibility: visible;
  }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav__list li {
    border-bottom: 1px solid rgba(250, 248, 244, 0.1);
  }

  .nav__list li:last-child {
    border-bottom: 0;
  }

  .nav__list a {
    display: block;
    padding: 0.95rem 0;
    font-size: 0.95rem;
  }

  .nav__list a::after {
    display: none;
  }

  .nav__list .btn {
    margin-top: var(--space-sm);
    width: 100%;
  }

  .header__actions {
    display: none;
  }

  .story__grid,
  .faq__grid,
  .contact__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .story__figure {
    order: -1;
  }

  .story__figure img {
    aspect-ratio: 16 / 10;
  }

  /* Must follow the rule above — same specificity, so order decides. */
  .story__figure--square img {
    aspect-ratio: 1 / 1;
  }

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

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

  .dish-card--feature {
    grid-column: span 4;
  }

  .hero--editorial .hero__media {
    inset: 0;
    width: 100%;
  }

  .hero--editorial .hero__media::after {
    background: linear-gradient(
      to top,
      var(--ink-900) 0%,
      rgba(11, 11, 12, 0.9) 30%,
      rgba(11, 11, 12, 0.6) 100%
    );
  }
}

@media (max-width: 720px) {
  .hero--cinematic,
  .hero--editorial,
  .hero--typographic {
    min-height: auto;
  }

  .hero__inner {
    padding-top: calc(var(--header-h) + 5.5rem);
    padding-bottom: 2.5rem;
  }

  .hero__rail-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero__rail-item {
    padding: 0.85rem 0;
    border-top: 1px solid rgba(250, 248, 244, 0.14);
  }

  .hero__rail-item + .hero__rail-item {
    padding-left: 0;
    border-left: 0;
  }

  .hero__rail-item:first-child {
    border-top: 0;
  }

  .hero__scroll {
    display: none;
  }

  /* The separator dot strands itself at the end of a wrapped line. */
  .hero__eyebrow-dot {
    display: none;
  }

  .hero__eyebrow {
    gap: 0.15rem 0.75rem;
  }

  .stats {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-sm);
  }

  .dishes__grid,
  .values__grid,
  .locations__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .dish-card,
  .dish-card--feature {
    grid-column: span 1;
  }

  .dish-card--typographic .dish-card__name,
  .dish-card--all .dish-card__name {
    margin-top: 2.5rem;
  }

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

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

  .contact__fact {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.25rem;
  }

  .btn {
    width: 100%;
  }

  .btn-row .btn {
    width: auto;
    flex: 1 1 auto;
  }
}