/* AQ Bistro public site. Tokens mirror app/lib/theme (Flutter) and
   admin-web/src/index.css; button rules follow docs/26. Mobile-first. */

/* Two typefaces, self-hosted (latin subsets, from Google Fonts) and preloaded
   by the pages. Cormorant Garamond is the brand and the voice; Inter is
   everything else. The generic keyword on each stack is the last resort if the
   woff2 fails to load, not a third and fourth face. */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../assets/fonts/cormorant-garamond-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/inter-latin.woff2") format("woff2");
}

/* AQ Bistro: restaurant signage, curved colour bands and full photography. */
:root {
  --green: #0b3d2e;
  --green-deep: #07291f;
  --green-soft: #14543f;
  --cream: #fbfaf6;
  --sand: #f1ede2;
  --gold: #e3a21a;
  --gold-text: #7a5208;
  --gold-deep: #c5870e;
  --mint: #9bcbae;
  --ink: #1a1c1a;
  --muted: #5c665f;
  --line: rgba(11, 61, 46, 0.2);
  --line-on-dark: rgba(251, 250, 246, 0.25);
  --serif: "Cormorant Garamond", serif;
  --sans: "Inter", sans-serif;
  /* Type scale. One ~1.25x step ladder and three Inter weights, so a block
     never invents its own size. New work uses these tokens; the older
     declarations below migrate onto them section by section. Cormorant keeps
     two roles only: the display italic line and the brand wordmark. */
  --text-2xs: 11px;
  --text-xs: 13px;
  --text-sm: 15px;
  --text-md: 18px;
  --text-lg: 22px;
  --text-xl: 28px;
  --text-2xl: 36px;
  --text-3xl: 48px;
  --text-4xl: 64px;
  --text-display: clamp(42px, 5.4vw, 78px);
  --weight-regular: 400;
  --weight-medium: 600;
  --weight-bold: 800;
  --weight-display: 900;
  --gutter: clamp(22px, 5vw, 80px);
  --wrap: 1240px;
  --radius: 18px;
  --radius-lg: 28px;
  --shadow: 0 18px 50px rgba(7, 41, 31, 0.16);
  --fast: 200ms ease;
  --base: 350ms ease;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 110px;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font: var(--weight-regular) var(--text-sm)/1.7 var(--sans);
}
body.menu-open {
  overflow: hidden;
}
img {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
}
button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}
button,
a {
  -webkit-tap-highlight-color: transparent;
}
h1,
h2,
h3,
p,
figure {
  margin: 0;
}
h1,
h2,
h3 {
  font: var(--weight-bold) 1em/1.05 var(--sans);
  letter-spacing: 0;
}
[hidden] {
  display: none !important;
}
:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 5px;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.skip-link {
  position: fixed;
  top: 8px;
  left: 12px;
  z-index: 100;
  padding: 12px 20px;
  background: var(--cream);
  color: var(--green);
  transform: translateY(-150%);
}
.skip-link:focus {
  transform: none;
}
.wrap {
  width: min(100% - 2 * var(--gutter), var(--wrap));
  margin-inline: auto;
}
.section {
  padding: clamp(72px, 9vw, 130px) 0;
}
.section__title {
  font-size: clamp(42px, 5.4vw, 78px);
  line-height: 1.04;
  max-width: 19ch;
  color: var(--green);
  text-wrap: balance;
}
.type-outline {
  display: block;
  -webkit-text-stroke: 1.5px currentColor;
  -webkit-text-fill-color: transparent;
  letter-spacing: 0;
}
.type-soft {
  display: block;
  font: italic var(--weight-medium) 1.2em/1 var(--serif);
  letter-spacing: 0;
  text-transform: none;
}
.eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  letter-spacing: 0.06em;
  color: var(--gold-text);
  margin-bottom: 24px;
}
.eyebrow::before {
  content: "";
  width: 30px;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}
.lede {
  font-size: var(--text-md);
  line-height: 1.85;
  color: var(--muted);
  max-width: 54ch;
  margin-top: 26px;
}
.section__head {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: end;
  gap: 60px;
  margin-bottom: 48px;
}
.section__head > div:last-child {
  max-width: 440px;
}
/* A head with nothing in the second column keeps the full measure: the
   440px cap above is meant for the supporting column, not for a title. */
.section__head--single {
  grid-template-columns: 1fr;
}
.section__head--single > div:last-child {
  max-width: none;
}
.section__head .lede {
  margin-top: 0;
}
.on-dark {
  color: var(--cream);
}
.on-dark .section__title {
  color: var(--cream);
}
.on-dark .eyebrow {
  color: var(--gold);
}
.on-dark .lede {
  color: #e0e9e2;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 15px 27px;
  border: 1px solid transparent;
  border-radius: 100px;
  background: var(--gold);
  color: var(--green-deep);
  text-decoration: none;
  font: var(--weight-medium) var(--text-xs)/1.35 var(--sans);
  transition:
    background var(--fast),
    color var(--fast),
    transform var(--fast),
    box-shadow var(--fast);
  white-space: nowrap;
}
.btn:hover {
  background: #efb43b;
  transform: translateY(-3px);
  box-shadow: 0 7px 20px #07291f18;
}
.btn:active {
  transform: none;
}
.btn--ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--green);
}
.btn--ghost:hover {
  background: var(--green);
  color: var(--cream);
}
.on-dark .btn--ghost {
  color: var(--cream);
  border-color: #91a99a;
}
.on-dark .btn--ghost:hover {
  background: var(--cream);
  color: var(--green);
}
.btn--green {
  background: var(--green);
  color: var(--cream);
}
.btn--green:hover {
  background: var(--green-soft);
}
.btn--compact {
  min-height: 44px;
  padding: 12px 23px;
}
.btn--block {
  width: 100%;
}
.text-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: underline;
  text-underline-offset: 6px;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  flex-shrink: 0;
}
.brand img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
}
.brand span {
  font: var(--weight-medium) var(--text-xl)/1 var(--serif);
  color: var(--green);
  letter-spacing: -0.02em;
}
.brand small {
  display: block;
  font: var(--weight-regular) var(--text-2xs)/1.5 var(--sans);
  letter-spacing: 0.02em;
  margin-top: 5px;
}
.topline {
  display: flex;
  justify-content: space-between;
  padding: 12px var(--gutter);
  background: var(--green-deep);
  color: var(--cream);
  font-size: var(--text-2xs);
}
.topline a {
  text-decoration: none;
}
.nav {
  position: fixed;
  --nav-rest-top: 34px;
  top: calc(var(--nav-rest-top) - var(--nav-dock-offset, 0px));
  left: 4.5vw;
  right: 4.5vw;
  bottom: auto;
  z-index: 30;
  color: var(--cream);
  /* The dark fill stops at the padding box so the hairline — and the docked
     bar's transparent border — keep sitting on cream, the way they did when
     cream was the header's background. */
  background:
    linear-gradient(var(--green-deep), var(--green-deep)) padding-box,
    var(--cream) border-box;
  border: 1px solid var(--cream);
  box-shadow: 0 22px 60px rgba(7, 41, 31, 0.13);
  border-radius: 100px 84px 100px 78px;
  overflow: hidden;
  backdrop-filter: blur(18px) saturate(1.08);
  animation: nav-settle 700ms ease both;
  will-change: transform;
  transition:
    border-radius 680ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 680ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 680ms cubic-bezier(0.16, 1, 0.3, 1),
    left 680ms cubic-bezier(0.16, 1, 0.3, 1),
    right 680ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 680ms cubic-bezier(0.16, 1, 0.3, 1),
    background-color 680ms cubic-bezier(0.16, 1, 0.3, 1);
}
/* Reading progress: a gold hairline along the bottom edge of the widened
   header. --progress is set from scroll.mjs; nothing shows in the pill. */
.nav::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-deep));
  transform: scaleX(var(--progress, 0));
  transform-origin: left;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--base);
}
/* Scrolled: the pill lets go of its corners and spans the full width, with
   the links aligned to the page grid. */
.nav.nav--expanded {
  top: 0;
  left: 0;
  right: 0;
  bottom: auto;
  border-radius: 0;
  border-color: transparent;
  box-shadow:
    0 1px 0 rgba(11, 61, 46, 0.08),
    0 18px 44px rgba(7, 41, 31, 0.1);
}
.nav.nav--expanded:hover,
.nav.nav--expanded:has(:focus-visible) {
  border-radius: 0;
}
.nav.nav--expanded::after {
  opacity: 1;
}
.nav--expanded .nav__inner {
  height: 62px;
  max-width: calc(var(--wrap) + 2 * var(--gutter));
  margin-inline: auto;
  padding: 0 var(--gutter);
}
.nav::before,
.nav__light::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(
      circle at 12% 24%,
      rgba(255, 255, 255, 0.62),
      transparent 26%
    ),
    linear-gradient(
      120deg,
      rgba(255, 255, 255, 0.34),
      transparent 42% 72%,
      rgba(227, 162, 26, 0.13)
    );
  mix-blend-mode: soft-light;
}
.nav__inner {
  width: 100%;
  height: 68px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  transition:
    height 420ms cubic-bezier(0.2, 0.7, 0.2, 1),
    padding 420ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.nav .brand span {
  color: inherit;
}
.nav .brand small {
  color: inherit;
}
.nav__light {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  color: var(--green);
  background: var(--cream);
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
  clip-path: inset(100%);
}
.nav:hover .nav__light,
.nav:has(:focus-visible) .nav__light {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
}
.nav--expanded .nav__light {
  box-shadow: none;
}
.nav__light .nav__inner {
  height: 100%;
}
.nav__light a,
.nav__light button {
  pointer-events: none;
}
.nav__light .nav__actions .btn--ghost {
  color: var(--green);
}
.nav__light .nav__toggle {
  background: var(--green);
  color: var(--cream);
}
.nav__inner {
  border-radius: inherit;
}
.nav:has(:focus-visible) {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
.nav:hover,
.nav:has(:focus-visible) {
  border-radius: 84px 100px 82px 100px;
  box-shadow: 0 26px 70px rgba(7, 41, 31, 0.16);
}
.nav__links {
  display: flex;
  gap: 24px;
}
.nav__links a {
  text-decoration: none;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  position: relative;
}
.nav__links a::after {
  content: "";
  position: absolute;
  inset: auto 0 -6px;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 200ms ease;
}
.nav__links a:hover::after,
.nav__links a[aria-current]::after {
  transform: scaleX(1);
}
.nav__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.nav__actions .btn--ghost {
  color: var(--cream);
  border-color: transparent;
}
/* One social band, in the header, so no section has to carry its own follow
   button. It sits behind a hairline from the two page actions and hides with
   them under 900px, where the mobile panel takes over. */
.nav__social {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  margin-right: 6px;
  padding-right: 12px;
}
/* The divider and the hover wash both ride on currentColor so they hold up on
   the dark bar and on the light layer over the cream sections. */
.nav__social::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 1px;
  height: 22px;
  transform: translateY(-50%);
  background: currentColor;
  opacity: 0.22;
}
.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 100px;
  color: inherit;
  transition:
    background-color var(--fast),
    border-color var(--fast);
}
.social-link svg {
  width: 19px;
  height: 19px;
}
@media (hover: hover) and (pointer: fine) {
  .social-link:hover {
    background: color-mix(in srgb, currentColor 10%, transparent);
  }
}
.nav__toggle {
  display: none;
  background: var(--cream);
  color: var(--green);
  border: 0;
  border-radius: 100px;
  min-height: 44px;
  padding: 12px 22px;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}
.mobile-panel {
  position: fixed;
  inset: 12px;
  margin: 0;
  width: calc(100% - 24px);
  max-width: none;
  height: calc(100dvh - 24px);
  max-height: none;
  padding: 30px;
  border: 1px solid var(--line-on-dark);
  border-radius: 24px;
  background: var(--green-deep);
  color: var(--cream);
}
.mobile-panel[open] {
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: menu-open 300ms ease both;
}
.mobile-panel::backdrop {
  background: rgba(7, 41, 31, 0.8);
  backdrop-filter: blur(8px);
}
.mobile-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 42px;
  font: var(--weight-medium) var(--text-2xl) var(--serif);
}
.mobile-panel__head button {
  background: var(--cream);
  color: var(--green);
  border: 0;
  border-radius: 100px;
  min-height: 44px;
  padding: 12px 20px;
  font: var(--weight-medium) var(--text-xs) var(--sans);
}
.mobile-panel > a {
  padding: 10px 0;
  font: var(--weight-bold) 40px/1.1 var(--sans);
  letter-spacing: -0.04em;
  text-decoration: none;
}
/* Links step in one after another when the panel opens. */
.mobile-panel[open] > a {
  animation: panel-link 520ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
  animation-delay: calc(80ms + var(--i, 0) * 55ms);
}
.mobile-panel > a:nth-child(3) {
  --i: 1;
}
.mobile-panel > a:nth-child(4) {
  --i: 2;
}
.mobile-panel > a:nth-child(5) {
  --i: 3;
}
.mobile-panel > a:nth-child(6) {
  --i: 4;
}
.mobile-panel > a:nth-child(7) {
  --i: 5;
}
.mobile-panel > a.btn {
  font: var(--weight-medium) var(--text-xs) var(--sans);
  letter-spacing: 0;
  margin-top: 12px;
  padding: 16px;
}
.mobile-panel .btn--ghost {
  color: var(--cream);
  border-color: #7a9c8d;
}
.mobile-panel__social {
  display: flex;
  gap: 12px;
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid var(--line-on-dark);
}
.mobile-panel__social .social-link {
  width: 54px;
  height: 54px;
  border: 1px solid var(--line-on-dark);
}
.mobile-panel__social .social-link svg {
  width: 22px;
  height: 22px;
}
@media (hover: hover) and (pointer: fine) {
  .mobile-panel__social .social-link:hover {
    background: transparent;
    border-color: var(--gold);
  }
}
/* Two layers: the photograph is fixed to the viewport and clipped by the
   rounded section, so the welcome copy scrolls over a still picture. The
   same recipe frames the catering photograph further down. */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  margin: 20px;
  border-radius: 30px;
  background: var(--green-deep);
  overflow: hidden;
  clip-path: inset(0 round 30px);
  min-height: max(880px, calc(118svh - 40px));
  color: var(--cream);
}
/* Shop light: a warm glow over the top of the photograph, so the opening
   reads as a lit room rather than a flat green wash. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    70% 44% at 76% 6%,
    rgba(227, 162, 26, 0.18),
    rgba(227, 162, 26, 0.05) 46%,
    transparent 72%
  );
}
.hero__feature {
  display: contents;
}
.hero__stage {
  position: absolute;
  inset: 0;
  z-index: -1;
  isolation: isolate;
}
.hero__media {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: var(--green-deep);
}
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  /* The photograph is busy where the welcome sits, so the tint carries an
     extra wash under the copy. It lives on this layer, inside the stage, so
     it never falls across the photo controls: .hero__welcome paints above
     them, and a wash on the copy itself dimmed the arrows. */
  background:
    radial-gradient(
      92% 72% at 17% 52%,
      rgba(3, 22, 16, 0.74),
      rgba(3, 22, 16, 0.34) 46%,
      transparent 72%
    ),
    linear-gradient(90deg, rgba(7, 41, 31, 0.86), rgba(7, 41, 31, 0.22) 78%),
    linear-gradient(0deg, rgba(7, 41, 31, 0.9), transparent 65%);
}
.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 700ms ease,
    visibility 700ms;
  overflow: hidden;
}
.hero__slide.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 1;
}
.hero__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.72) contrast(0.88) brightness(0.95);
}
.hero__slide.is-active img {
  transform: scale(1.015);
}
.hero__welcome {
  position: relative;
  z-index: 1;
  padding: clamp(200px, 27svh, 300px) clamp(32px, 4.5vw, 80px) 150px;
  pointer-events: none;
  max-width: 1250px;
  /* --hero-out (0 → 1, from scroll.mjs) lets the copy drift and fade as the
     visitor leaves the opening, slower than the page itself. */
  opacity: calc(1 - var(--hero-out, 0) * 1.15);
  transform: translateY(calc(var(--hero-out, 0) * 90px));
}
.hero__welcome a {
  pointer-events: auto;
}
/* A small enamel plate, the way a shop states its trade above the door. */
.hero__location {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 13px;
  border: 1px solid rgba(251, 250, 246, 0.3);
  border-radius: 100px;
  background: rgba(4, 27, 20, 0.62);
  backdrop-filter: blur(10px) saturate(1.1);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  line-height: 1.45;
  letter-spacing: 0.05em;
  color: #f4f8f3;
  margin-bottom: 26px;
}
.hero__location::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(227, 162, 26, 0.2);
}
.hero__headline {
  font-size: clamp(64px, 7.4vw, 112px);
  font-weight: var(--weight-display);
  line-height: 1.01;
  letter-spacing: 0;
  max-width: 17ch;
  color: var(--cream);
  text-shadow: 0 3px 26px rgba(3, 22, 16, 0.6);
}
.hero__headline > span {
  display: block;
}
/* Hollow lettering has almost nothing to read against over a photograph, so
   the outlined line keeps a faint fill and a heavier stroke. */
.hero__headline .type-outline {
  letter-spacing: 0;
  -webkit-text-stroke-width: 2px;
  -webkit-text-fill-color: rgba(251, 250, 246, 0.16);
}
.hero__invitation {
  font-size: var(--text-sm);
  line-height: 1.8;
  color: #f2f6f1;
  max-width: 50ch;
  margin-top: 28px;
  text-shadow: 0 2px 14px rgba(3, 22, 16, 0.75);
}
.hero__actions {
  display: flex;
  gap: 28px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 32px;
}
.hero__navigation {
  position: absolute;
  right: 32px;
  top: calc(100svh - 86px);
  bottom: auto;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 20px;
  color: var(--cream);
}
.hero__count {
  font-size: var(--text-2xs);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
}
.hero__controls {
  display: flex;
  gap: 8px;
}
.hero__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 12px 20px;
  border: 1px solid rgba(251, 250, 246, 0.7);
  border-radius: 100px;
  background: var(--green-deep);
  color: var(--cream);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  transition:
    background 200ms ease,
    color 200ms ease;
}
.hero__arrow--next {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--green-deep);
}
.hero__arrow:hover {
  background: var(--cream);
  color: var(--green-deep);
}
.hero__arrow span {
  transition: transform 220ms ease;
}
.hero__arrow:hover span {
  transform: translateX(-3px);
}
.hero__arrow--next:hover span {
  transform: translateX(3px);
}
.hero__dots {
  display: none;
}
.welcome-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin: 0 var(--gutter);
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
  color: var(--green);
}
.welcome-strip > p {
  font: italic var(--weight-medium) var(--text-xl) var(--serif);
}
.welcome-strip > div {
  display: flex;
  gap: 28px;
  font-size: var(--text-2xs);
}
.welcome-strip a {
  text-underline-offset: 5px;
}
#story {
  padding-bottom: 0;
}
.story {
  display: block;
}
.story__copy {
  max-width: 850px;
  margin: auto;
  text-align: center;
}
.story__copy .eyebrow {
  justify-content: center;
}
.story__copy .eyebrow::after {
  content: "";
  width: 30px;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}
.story__copy .section__title {
  max-width: none;
}
.story__copy .type-soft {
  margin-top: 10px;
}
.story__copy .lede {
  margin-inline: auto;
  max-width: 65ch;
}
.poster-band {
  position: relative;
  background: var(--green);
  margin-top: 76px;
  padding: 108px 0 120px;
}
.section-wave {
  position: absolute;
  left: 0;
  top: -1px;
  width: 100%;
  height: 70px;
  fill: var(--cream);
  pointer-events: none;
}
.section-wave--bottom {
  top: auto;
  bottom: -1px;
  transform: rotate(180deg);
}
/* A wall of pinned prints: three to a row, the last row centred, each one
   tilted a little and straightening under the pointer. The tilt uses the
   `rotate` property so it survives the entrance, which animates transform. */
.poster-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(20px, 2.6vw, 38px);
  /* Three to a row at the widest: 3 × 340 + 2 × 38 fits, 4 does not. The
     posters carry prices and dish names, and this is now the only place
     they are read on the page, so they take the room they can. */
  max-width: 1180px;
}
.poster-grid .story-photo {
  flex: 0 0 clamp(230px, 30%, 340px);
  rotate: -1.1deg;
}
.poster-grid .story-photo:nth-child(even) {
  rotate: 1.1deg;
  margin-top: clamp(14px, 3vw, 40px);
}
.poster-grid .story-photo:hover,
.poster-grid .story-photo:focus-visible {
  rotate: 0deg;
}
.story-photo {
  display: block;
  position: relative;
  min-width: 0;
  background: var(--cream);
  color: var(--green);
  text-decoration: none;
  border: 7px solid var(--cream);
  border-radius: 12px;
  box-shadow: 0 20px 40px -15px #0007;
  transition:
    opacity 650ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 350ms cubic-bezier(0.2, 0.7, 0.2, 1),
    rotate 350ms cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 350ms ease;
}
.poster-grid img {
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 5px;
  transition: opacity 650ms cubic-bezier(0.16, 1, 0.3, 1);
}
html.js .story-photo.is-in img {
  transition-delay: calc(var(--poster-delay, 0) * 140ms);
}
.story-photo__caption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 5px 12px;
  padding: 14px 4px 6px;
  font: var(--weight-medium) var(--text-lg) var(--serif);
}
.story-photo__caption span {
  font: var(--weight-medium) var(--text-2xs)/1.6 var(--sans);
  color: var(--muted);
}
.story-photo:focus-visible {
  z-index: 2;
  outline-offset: 8px;
}
@media (hover: hover) and (pointer: fine) {
  .story-photo:hover {
    z-index: 1;
    transform: translateY(-10px) scale(1.025);
    box-shadow: 0 30px 55px -15px #0008;
  }
}
.menu .section__head {
  margin-bottom: 36px;
}
.menu .section__head .lede {
  border-left: 2px solid var(--gold);
  padding-left: 24px;
}
.menu .section__head .btn {
  margin-top: 20px;
}
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 8px 0 25px;
  border-bottom: 1px solid var(--line);
}
.tab {
  min-height: 44px;
  padding: 10px 23px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: transparent;
  color: var(--green);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}
.tab[aria-selected="true"] {
  background: var(--green);
  color: var(--cream);
  border-color: var(--green);
}
.menu-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 45px;
  margin-top: 20px;
}
/* One panel per category; the tabs choose which one shows. `display: grid`
   above would otherwise override the hidden attribute. */
.menu-grid[hidden] {
  display: none;
}
.dish {
  min-width: 0;
  display: flex;
  gap: 22px;
  align-items: center;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
}
.dish__media {
  width: 128px;
  aspect-ratio: 1;
  flex-shrink: 0;
  border-radius: 18px;
  overflow: hidden;
  background: var(--sand);
}
.dish__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms ease;
}
.dish:hover img {
  transform: scale(1.04);
}
.dish__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  flex: 1;
}
.dish__meta {
  display: flex;
  gap: 15px;
  align-items: center;
  justify-content: space-between;
}
.dish__tag {
  font-size: var(--text-2xs);
  color: var(--gold-text);
}
.dish__tag:empty {
  display: none;
}
.dish__price {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--green);
  white-space: nowrap;
}
.dish h3 {
  font-size: var(--text-lg);
  color: var(--green);
  line-height: 1.15;
}
.dish p {
  font-size: var(--text-xs);
  color: var(--muted);
  line-height: 1.75;
}
.dish:only-child {
  grid-column: 1/-1;
  max-width: 950px;
  width: 100%;
  margin-inline: auto;
  gap: 42px;
}
.dish:only-child .dish__media {
  width: 240px;
}
.dish:only-child h3 {
  font-size: 40px;
}
.dish:only-child p {
  font-size: var(--text-sm);
}
.dish:only-child .dish__meta {
  justify-content: flex-start;
}
.menu__status {
  margin-top: 25px;
  color: var(--muted);
}
#catering {
  position: relative;
  margin: 0 20px;
  padding: 100px 0;
  border-radius: 30px;
  overflow: hidden;
  clip-path: inset(0 round 30px);
  isolation: isolate;
  background: var(--green-deep);
}
.catering {
  display: block;
  text-align: center;
  min-height: 520px;
  align-content: center;
}
.catering > div:last-child {
  max-width: 900px;
  margin: auto;
  position: relative;
  z-index: 1;
}
.catering__media {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}
.catering__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.65);
}
.catering__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(7, 41, 31, 0.77);
}
.catering .eyebrow {
  justify-content: center;
}
.catering .section__title {
  max-width: 17ch;
  margin: auto;
  text-transform: uppercase;
  font-size: clamp(46px, 6.1vw, 88px);
}
.catering .lede {
  max-width: 65ch;
  margin-inline: auto;
}
.feature-list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 24px;
  list-style: none;
  padding: 0;
  margin: 30px 0 36px;
  color: #e0e9e2;
  font-size: var(--text-xs);
}
.feature-list__index {
  display: none;
}
/* Kitchen strip. Native horizontal scrolling with a gold rail in place of
   the browser scrollbar; each photograph pans and tilts inside its frame as
   the strip moves, so the row has depth instead of sliding flat.
   The pan uses `translate`/`rotate`, never `transform`, so it composes with
   the hover zoom and the once-only entrance rather than overriding them. */
.gallery {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  /* Room for the hover lift and the shadows: a horizontal scroller clips
     vertical overflow. */
  padding: 16px 0 24px;
}
.gallery::-webkit-scrollbar {
  display: none;
}
.gallery__tile {
  flex: 0 0 27%;
  aspect-ratio: 4/5;
  overflow: hidden;
  border-radius: 20px;
  scroll-snap-align: center;
  box-shadow: 0 18px 38px -24px rgba(7, 41, 31, 0.6);
  transition:
    translate 480ms cubic-bezier(0.2, 0.7, 0.2, 1),
    box-shadow 480ms ease;
}
.gallery__tile:nth-child(even) {
  margin-top: 36px;
}
.gallery__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Overscan, so the photograph can pan without showing its edges. */
  scale: 1.18;
  transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}
@media (hover: hover) and (pointer: fine) {
  .gallery__tile:hover {
    translate: 0 -10px;
    box-shadow: 0 30px 50px -22px rgba(7, 41, 31, 0.65);
  }
  .gallery__tile:hover img {
    transform: scale(1.05);
  }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* The timeline is named on the tile, not on the photograph: the tile
       clips its overflow, so `view()` on the image would measure the image
       against the tile, which it never moves relative to. */
    .gallery__tile {
      view-timeline-name: --gallery-tile;
      view-timeline-axis: inline;
    }
    .gallery__tile img {
      animation: gallery-pan linear both;
      animation-timeline: --gallery-tile;
      animation-range: cover 0% cover 100%;
    }
  }
}
.gallery__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 14px;
  color: var(--muted);
  font-size: var(--text-2xs);
}
/* Reading position in the strip: width shows how much is on screen. */
.gallery__progress {
  position: relative;
  flex: 1 1 auto;
  max-width: 420px;
  height: 3px;
  border-radius: 100px;
  background: var(--line);
}
.gallery__progress > span {
  position: absolute;
  top: 0;
  bottom: 0;
  width: calc(var(--gallery-thumb, 0.3) * 100%);
  left: calc(var(--gallery-progress, 0) * (100% - var(--gallery-thumb, 0.3) * 100%));
  border-radius: inherit;
  background: linear-gradient(90deg, var(--gold), var(--gold-deep));
  transition: left 220ms ease-out;
}
.gallery__note {
  margin-top: 12px;
  text-align: center;
  color: var(--muted);
  font-size: var(--text-2xs);
}
.gallery__arrow {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--cream);
  color: var(--green);
  font-size: var(--text-md);
}
.gallery__arrow:hover:not(:disabled) {
  background: var(--green);
  color: var(--cream);
}
.gallery__arrow:disabled {
  opacity: 0.35;
  cursor: default;
}
.gallery__arrow[hidden] {
  display: none;
}
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 35px;
  margin-top: 40px;
}
/* The map and the review invitation close the Visit section. The section head
   above them already names the place and links to Maps, so neither carries its
   own heading or a second Maps link. */
.visit__map {
  border: 1px solid var(--line);
  border-radius: 24px;
  overflow: hidden;
  background: var(--sand);
}
.visit__map iframe {
  display: block;
  width: 100%;
  height: 420px;
  border: 0;
}
.visit__review {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding-top: 28px;
}
.visit__review h3 {
  color: var(--green);
  font-size: var(--text-lg);
  margin-bottom: 8px;
}
.visit__review p {
  color: var(--muted);
}
.visit__review .text-link {
  flex-shrink: 0;
}
@media (max-width: 600px) {
  .visit__review {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
  .visit__map iframe {
    height: 340px;
  }
}
.review {
  border-top: 1px solid var(--line);
  padding-top: 24px;
  display: grid;
  gap: 20px;
}
.review__stars {
  color: var(--gold-text);
  letter-spacing: 3px;
}
.review blockquote {
  margin: 0;
  font: var(--weight-medium) var(--text-xl)/1.35 var(--serif);
  color: var(--green);
}
.review cite {
  font-size: var(--text-xs);
  font-style: normal;
  color: var(--muted);
}
.app {
  margin: 0 20px;
  background: var(--green);
  border-radius: 30px;
  position: relative;
}
.app__grid {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 80px;
}
.app .section__title {
  max-width: 16ch;
}
.app__actions {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  margin-top: 30px;
}
.app__meta {
  font-size: var(--text-xs);
  color: #e0e9e2;
  margin-top: 20px;
}
.qr-card {
  width: 245px;
  padding: 25px;
  border-radius: 20px;
  background: var(--cream);
  text-align: center;
  color: var(--green);
  transform: rotate(3deg);
  box-shadow: 0 20px 30px -15px #0005;
}
.qr-card img {
  width: 180px;
  height: 180px;
  margin: auto;
}
.qr-card p {
  font-size: var(--text-2xs);
  line-height: 1.6;
  margin-top: 16px;
}
.visit__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(280px, 0.8fr);
  gap: clamp(24px, 3vw, 40px);
}
/* The card is the shorter of the two, so it stretches to the map's height and
   centres its own content rather than sitting at the top of a tall box. */
.visit__card {
  padding: 38px;
  background: var(--sand);
  border-radius: 26px;
  display: grid;
  align-content: center;
  gap: 24px;
}
.visit__card h3 {
  font-size: var(--text-xl);
  color: var(--green);
}
.visit__card p {
  font-size: var(--text-sm);
  color: var(--muted);
}
.faq {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 80px;
  padding-top: 70px;
  border-top: 1px solid var(--line);
}
.faq .section__title {
  font-size: clamp(40px, 4.5vw, 62px);
}
.faq__item {
  border-bottom: 1px solid var(--line);
}
.faq__item summary {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
  list-style: none;
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--green);
}
.faq__item summary::-webkit-details-marker {
  display: none;
}
.faq__item summary::after {
  content: "+";
  font-size: var(--text-md);
  color: var(--gold-text);
}
.faq__item[open] summary::after {
  content: "−";
}
.faq__item p {
  padding: 0 28px 24px 0;
  font-size: var(--text-sm);
  color: var(--muted);
}
.faq__item[open] p {
  animation: faq-open 340ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.faq__item summary::after {
  transition: transform 260ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.faq__item[open] summary::after {
  transform: rotate(180deg);
}
.footer {
  margin: 0 20px 20px;
  background: var(--green-deep);
  border-radius: 30px;
  color: #c5d8cc;
  padding: 60px 0 28px;
  overflow: hidden;
}
.footer__wordmark {
  font: var(--weight-display) clamp(70px, 14.5vw, 220px) / 1 var(--sans);
  letter-spacing: -0.07em;
  color: var(--cream);
  padding-bottom: 45px;
  border-bottom: 1px solid var(--line-on-dark);
  margin-bottom: 45px;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}
/* The window the lettering rises into. Its own padding gives the Q tail
   room, and the negative margin keeps that room out of the layout. */
.footer__wordmark-mask {
  display: block;
  overflow: hidden;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}
.footer__wordmark-aq {
  color: var(--gold);
}
.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 38px;
}
.footer h4 {
  font: var(--weight-medium) var(--text-sm) var(--sans);
  margin: 0 0 16px;
  color: var(--cream);
}
.footer a {
  display: block;
  text-decoration: none;
  font-size: var(--text-xs);
  line-height: 2.6;
}
.footer a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.footer__about {
  font-size: var(--text-xs);
  max-width: 34ch;
}
.footer__bottom {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 42px;
  padding-top: 22px;
  border-top: 1px solid var(--line-on-dark);
  font-size: var(--text-2xs);
}
.footer__bottom a {
  font-size: var(--text-2xs);
  line-height: inherit;
}
/* ---- Scroll reveals ----------------------------------------------------
   scroll.mjs adds html.js on boot and .is-in to each .reveal block the
   first time it enters the viewport, with --delay staggering blocks that
   arrive together. Without JavaScript nothing is hidden. */
.reveal {
  opacity: 1;
}
html.js .reveal {
  --reveal-ease: cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 900ms var(--reveal-ease) var(--delay, 0ms),
    transform 900ms var(--reveal-ease) var(--delay, 0ms),
    clip-path 1100ms var(--reveal-ease) var(--delay, 0ms);
}
html.js .reveal.is-in {
  opacity: 1;
  transform: none;
}
/* The eyebrow rule draws itself once its block has settled. */
html.js .reveal .eyebrow::before,
html.js .reveal .eyebrow::after {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 700ms var(--reveal-ease) calc(var(--delay, 0ms) + 260ms);
}
html.js .reveal .eyebrow::after {
  transform-origin: right;
}
html.js .reveal.is-in .eyebrow::before,
html.js .reveal.is-in .eyebrow::after {
  transform: none;
}
/* Outlined title lines slide in a beat after the block. */
html.js .reveal .section__title .type-outline {
  opacity: 0;
  transform: translateX(-18px);
  transition:
    opacity 800ms var(--reveal-ease) calc(var(--delay, 0ms) + 140ms),
    transform 800ms var(--reveal-ease) calc(var(--delay, 0ms) + 140ms);
}
html.js .reveal.is-in .section__title .type-outline {
  opacity: 1;
  transform: none;
}
html.js .dish.reveal {
  transform: translateY(18px);
}
/* The gallery photographs get their movement from the scroll-driven pan and
   the hover zoom, so the tile's own fade-up is the whole entrance here. */
html.js .qr-card.reveal {
  transform: translateY(28px) rotate(3deg);
}
html.js .qr-card.reveal.is-in {
  transform: rotate(3deg);
}
/* The footer wordmark rises into a fixed window (the observer must still see
   the block, so the window itself never closes). */
/* The mask is an element that wraps only the lettering, so the window can
   never reach into the glyphs or the rule below them at any font size. A
   fixed-pixel clip on the block itself cut the letters on phones. */
html.js .reveal--rise {
  opacity: 1;
  transform: none;
}
html.js .reveal--rise > span > span {
  display: block;
  transform: translateY(115%);
  transition: transform 1200ms var(--reveal-ease) var(--delay, 0ms);
}
html.js .reveal--rise.is-in > span > span {
  transform: none;
}
.no-script-nav {
  position: relative;
  z-index: 31;
  padding: 125px 20px 20px;
}
.icon-btn {
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--cream);
}
@keyframes menu-open {
  from {
    opacity: 0;
    transform: translateY(-16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes gallery-pan {
  from {
    translate: 5% 0;
    rotate: 0.7deg;
  }
  to {
    translate: -5% 0;
    rotate: -0.7deg;
  }
}
@keyframes panel-link {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes faq-open {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes nav-settle {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.985);
    border-radius: 78px 100px 82px 100px;
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (max-width: 1100px) {
  .nav__links {
    gap: 16px;
  }
  .nav__actions .btn--ghost {
    display: none;
  }
  .nav .brand small {
    display: none;
  }
  .hero__welcome {
    padding-top: 210px;
    padding-bottom: 150px;
  }
  .hero__headline {
    font-size: clamp(68px, 8vw, 90px);
  }
  .section__head {
    gap: 35px;
  }
  .dish__media {
    width: 105px;
  }
  .dish {
    gap: 18px;
  }
  .visit__grid {
    gap: 30px;
  }
  .visit__card {
    padding: 28px;
  }
}
@media (max-width: 899px) {
  .nav {
    --nav-rest-top: 18px;
    top: calc(var(--nav-rest-top) - var(--nav-dock-offset, 0px));
    left: 28px;
    right: 28px;
    bottom: auto;
  }
  .nav__inner {
    height: 60px;
    padding: 0 12px;
  }
  .nav__links,
  .nav__actions {
    display: none;
  }
  .nav__toggle {
    display: block;
  }
  .hero {
    margin: 12px;
    border-radius: 24px;
    clip-path: inset(0 round 24px);
    min-height: max(780px, calc(100svh - 24px));
  }
  .hero__welcome {
    padding: 185px 38px 150px;
    max-width: 100%;
  }
  .hero__headline {
    font-size: clamp(55px, 8.3vw, 76px);
  }
  .hero__navigation {
    top: auto;
    right: 38px;
    bottom: 28px;
  }
  .hero__invitation br {
    display: none;
  }
  .section__title {
    font-size: 56px;
  }
  .section__head {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }
  .section__head--single {
    grid-template-columns: 1fr;
  }
  .dish {
    align-items: start;
  }
  .dish__media {
    width: 90px;
  }
  .dish h3 {
    font-size: var(--text-lg);
  }
  .menu-grid {
    gap: 5px 28px;
  }
  .dish:only-child .dish__media {
    width: 200px;
  }
  .app__grid {
    gap: 35px;
  }
  .visit__grid {
    grid-template-columns: 1fr;
  }
  .visit__card {
    max-width: 650px;
  }
  .faq {
    gap: 35px;
  }
  .gallery__tile {
    flex-basis: 38%;
  }
  .footer__grid {
    gap: 24px;
  }
}
@media (max-width: 600px) {
  html {
    scroll-padding-top: 92px;
  }
  .nav {
    --nav-rest-top: 12px;
    top: calc(var(--nav-rest-top) - var(--nav-dock-offset, 0px));
    left: 14px;
    right: 14px;
    bottom: auto;
    border-radius: 34px 28px 34px 30px;
  }
  .nav__inner {
    padding: 0 9px;
    height: 54px;
    gap: 10px;
  }
  .nav .brand img {
    width: 34px;
    height: 34px;
  }
  .nav .brand span {
    font-size: var(--text-lg);
    line-height: 1;
  }
  .nav__toggle {
    min-height: 38px;
    padding: 9px 14px;
    font-size: var(--text-2xs);
  }
  /* Phone opening: one full-height photograph with the welcome, the dish
     caption and the photo controls stacked over its lower half.

       [ floating pill header ]
       photograph (fixed behind, clipped by the rounded hero)
         Your neighbourhood bistro · Kota Damansara
         Local soul.  /  Malaysian heart.
         invitation · [Explore the menu] Order in the app
         ┌ caption: eyebrow / dish title / text ┐   (scrolls inside if long)
         01 / 03              [← Previous] [Next →]
  */
  .hero {
    margin: 8px;
    border-radius: 22px;
    clip-path: inset(0 round 22px);
    min-height: max(660px, calc(100svh - 16px));
    justify-content: flex-end;
  }
  .hero__welcome {
    flex: none;
    max-width: 100%;
    /* Only the photo controls sit below the copy now. */
    padding: 120px 22px 104px;
    transform: translateY(calc(var(--hero-out, 0) * 48px));
  }
  .hero__location {
    font-size: var(--text-2xs);
    padding: 7px 13px 7px 11px;
    letter-spacing: 0.04em;
    margin-bottom: 16px;
  }
  .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.55;
    background-image:
      repeating-linear-gradient(
        45deg,
        rgba(251, 250, 246, 0.055) 0 1px,
        transparent 1px 15px
      ),
      repeating-linear-gradient(
        -45deg,
        rgba(251, 250, 246, 0.055) 0 1px,
        transparent 1px 15px
      );
    -webkit-mask-image: linear-gradient(180deg, transparent 54%, #000 74%);
    mask-image: linear-gradient(180deg, transparent 54%, #000 74%);
  }
  .hero__headline {
    font-size: clamp(40px, 12.5vw, 50px);
    line-height: 1.02;
    letter-spacing: 0;
    max-width: 100%;
  }
  .hero__headline .type-outline {
    letter-spacing: 0;
    -webkit-text-stroke-width: 1.6px;
  }
  .hero__invitation {
    font-size: var(--text-xs);
    line-height: 1.7;
    margin-top: 18px;
    max-width: 34ch;
  }
  .hero__invitation br {
    display: none;
  }
  .hero__actions {
    gap: 16px;
    margin-top: 22px;
  }
  .hero__actions .btn {
    font-size: var(--text-2xs);
    padding: 14px 20px;
  }
  .hero__actions .text-link {
    font-size: var(--text-2xs);
  }
  .hero__navigation {
    top: auto;
    left: 22px;
    right: 22px;
    bottom: 22px;
    justify-content: space-between;
    gap: 10px;
    margin: 0;
  }
  .hero__count {
    font-size: var(--text-2xs);
  }
  .hero__arrow {
    font-size: var(--text-2xs);
    min-height: 46px;
    gap: 7px;
    padding: 11px 15px;
  }
  /* The landscape photograph (1200 × 675) would need almost four times its
     width to cover a phone screen, so it keeps its natural crop as a band
     across the top and dissolves into green where the copy and controls
     sit. The headline still overlaps the picture. */
  .hero__slide img {
    height: 56svh;
    min-height: 320px;
    object-position: center 42%;
  }
  .hero__media::after {
    background: linear-gradient(
      180deg,
      rgba(3, 22, 16, 0.22) 0%,
      rgba(3, 22, 16, 0.36) 26%,
      rgba(3, 22, 16, 0.8) 41%,
      rgba(4, 28, 21, 0.95) 49%,
      var(--green-deep) 55%
    );
  }
  .welcome-strip {
    display: block;
    padding: 23px 0;
  }
  .welcome-strip > p {
    font-size: var(--text-lg);
  }
  .welcome-strip > div {
    margin-top: 10px;
    gap: 12px;
    justify-content: space-between;
    font-size: var(--text-2xs);
  }
  .section {
    padding: 76px 0;
  }
  .section__title {
    font-size: 42px;
  }
  .type-outline {
    -webkit-text-stroke-width: 1.2px;
  }
  .eyebrow {
    font-size: var(--text-2xs);
    margin-bottom: 20px;
  }
  .lede {
    font-size: var(--text-sm);
    line-height: 1.85;
    margin-top: 24px;
  }
  .story__copy .lede {
    max-width: 40ch;
  }
  .poster-band {
    margin-top: 50px;
    padding: 75px 0 90px;
  }
  .section-wave {
    height: 42px;
  }
  /* Phones swipe through the wall instead of shrinking it: at two to a row
     the prices and dish names on these posters stop being readable. The
     next poster peeks in, so the row reads as something to swipe. */
  .poster-grid {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    gap: 14px;
    padding-bottom: 6px;
  }
  .poster-grid::-webkit-scrollbar {
    display: none;
  }
  .poster-grid .story-photo,
  .poster-grid .story-photo:nth-child(even) {
    flex: 0 0 78%;
    /* Start, not centre: each poster lands on the page's own left edge. */
    scroll-snap-align: start;
    rotate: none;
    margin-top: 0;
  }
  .story-photo {
    border-width: 5px;
    border-radius: 8px;
  }
  .story-photo__caption {
    font-size: var(--text-md);
    padding-top: 10px;
  }
  .story-photo__caption span {
    font-size: var(--text-2xs);
  }
  .section__head {
    display: block;
    margin-bottom: 28px;
  }
  .section__head > div:last-child {
    margin-top: 24px;
  }
  .section__head .lede {
    padding-left: 18px;
  }
  .tabs {
    gap: 8px;
    padding-bottom: 22px;
  }
  .tab {
    font-size: var(--text-2xs);
    padding: 10px 17px;
  }
  .menu-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .dish {
    align-items: center;
    gap: 18px;
    padding: 22px 0;
  }
  .dish__media {
    width: 108px;
    border-radius: 14px;
  }
  .dish h3 {
    font-size: var(--text-lg);
  }
  .dish p {
    font-size: var(--text-2xs);
  }
  .dish__meta {
    gap: 7px;
    flex-wrap: wrap;
  }
  .dish__tag {
    font-size: var(--text-2xs);
  }
  .dish__price {
    font-size: var(--text-xs);
  }
  .dish:only-child {
    display: block;
  }
  .dish:only-child .dish__media {
    width: 100%;
    aspect-ratio: 4/3;
    margin-bottom: 24px;
  }
  .dish:only-child h3 {
    font-size: var(--text-2xl);
  }
  .dish:only-child p {
    font-size: var(--text-xs);
  }
  #catering {
    margin: 0 8px;
    padding: 75px 0;
    border-radius: 22px;
    clip-path: inset(0 round 22px);
  }
  .catering {
    min-height: 0;
    width: calc(100% - 42px);
  }
  .catering .lede {
    font-size: var(--text-sm);
  }
  .feature-list {
    font-size: var(--text-2xs);
    display: grid;
    gap: 10px;
    margin: 25px 0 30px;
  }
  .gallery {
    gap: 16px;
  }
  .gallery__tile {
    flex-basis: 72%;
    border-radius: 16px;
  }
  .gallery__tile:nth-child(even) {
    margin-top: 22px;
  }
  .gallery__controls {
    gap: 20px;
  }
  .gallery__note {
    font-size: var(--text-2xs);
  }
  .gallery__progress {
    max-width: none;
  }
  .reviews-grid {
    grid-template-columns: 1fr;
  }
  .app {
    margin: 0 8px;
    border-radius: 22px;
  }
  .app__grid {
    grid-template-columns: 1fr;
    gap: 30px;
    width: calc(100% - 44px);
  }
  .qr-card {
    display: none;
  }
  .app__actions {
    gap: 10px;
  }
  .visit__grid {
    gap: 24px;
  }
  .visit__card {
    padding: 30px;
  }
  .visit__card h3 {
    font-size: var(--text-xl);
  }
  .faq {
    grid-template-columns: 1fr;
    gap: 35px;
    padding-top: 50px;
  }
  .faq__item summary {
    font-size: var(--text-xs);
  }
  .footer {
    margin: 0 8px 8px;
    border-radius: 22px;
    padding-top: 42px;
  }
  .footer__wordmark {
    font-size: clamp(56px, 15vw, 85px);
    padding-bottom: 30px;
    margin-bottom: 34px;
  }
  .footer__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 28px 14px;
  }
  .footer__grid > div:first-child {
    grid-column: 1/-1;
  }
  .footer__about {
    max-width: 38ch;
  }
  .footer h4 {
    font-size: var(--text-xs);
  }
  .footer a {
    font-size: var(--text-2xs);
  }
  .footer__bottom {
    font-size: var(--text-2xs);
  }
  .footer__bottom span:first-child {
    max-width: 25ch;
  }
  .footer__bottom a {
    font-size: var(--text-2xs);
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  .hero__slide.is-active img {
    transform: none;
  }
  /* Photographs scroll with their sections; nothing is hidden for a reveal. */
  .hero__media,
  .catering__media {
    position: absolute;
  }
  .hero__welcome {
    opacity: 1;
    transform: none;
  }
  html.js .reveal,
  html.js .reveal .eyebrow::before,
  html.js .reveal .eyebrow::after,
  html.js .reveal .section__title .type-outline,
  html.js .reveal--rise > span > span {
    opacity: 1;
    transform: none;
    clip-path: none;
  }
  .gallery__tile img {
    translate: none;
    rotate: none;
  }
  html.js .qr-card.reveal {
    transform: rotate(3deg);
  }
}
/* Browsers that cannot clip a fixed layer with clip-path keep the
   photographs inside their sections. */
@supports not (clip-path: inset(0 round 30px)) {
  .hero__media,
  .catering__media {
    position: absolute;
  }
}


/* ---- Download page ---- */
.download {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--green);
  color: var(--cream);
}
.download__main {
  display: grid;
  place-items: center;
  padding: 40px var(--gutter) 64px;
}
.download__card {
  width: 100%;
  max-width: 460px;
  text-align: center;
  display: grid;
  gap: 18px;
  justify-items: center;
}
.download__card .brand img {
  width: 112px;
  height: 112px;
  border-radius: 28px;
  box-shadow: var(--shadow);
}
.download__card h1 {
  font-size: clamp(34px, 7vw, 46px);
}
.download__card .lede {
  color: var(--mint);
  margin-inline: auto;
}
.download__meta {
  color: var(--mint);
  font-size: var(--text-sm);
}
.download__hint {
  color: var(--mint);
  font-size: var(--text-sm);
  opacity: 0.8;
}
.download__links {
  display: flex;
  gap: 20px;
  font-size: var(--text-sm);
}
.download__links a {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.download__footer {
  padding: 20px var(--gutter);
  text-align: center;
  color: var(--mint);
  font-size: var(--text-xs);
}
.download__footer a {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.chooser {
  width: min(100% - 2 * var(--gutter), 520px);
  padding: 0;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--cream);
  color: var(--ink);
  box-shadow: var(--shadow);
}
.chooser::backdrop {
  background: rgba(7, 41, 31, 0.7);
  backdrop-filter: blur(4px);
}
.chooser__inner {
  padding: 28px 24px 24px;
  display: grid;
  gap: 18px;
}
.chooser__head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}
.chooser__head h2 {
  font-size: var(--text-xl);
}
.chooser__head .download__meta {
  color: var(--muted);
  margin-top: 4px;
}
.chooser__close {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border: 0;
  border-radius: 50%;
  background: var(--sand);
  cursor: pointer;
  font-size: var(--text-md);
}
.platform-cards {
  display: grid;
  gap: 12px;
}
.platform-card {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  align-items: center;
  gap: 14px;
  text-align: left;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  cursor: pointer;
  transition:
    border-color var(--fast),
    transform var(--fast),
    box-shadow var(--fast);
}
.platform-card:hover {
  border-color: var(--green);
}
.platform-card:active {
  transform: scale(0.98);
}
.platform-card.is-suggested {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(227, 162, 26, 0.25);
}
.platform-card__icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--green);
  color: var(--gold);
}
.platform-card__icon svg {
  width: 28px;
  height: 28px;
}
.platform-card strong {
  display: block;
  font-size: var(--text-md);
}
.platform-card__text span {
  color: var(--muted);
  font-size: var(--text-sm);
}
.platform-card .chip {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--sand);
  color: var(--green);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}
.platform-card.is-suggested .chip {
  background: var(--gold);
  color: var(--ink);
}
.panel {
  display: grid;
  gap: 16px;
}
.steps {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: var(--text-sm);
}
.steps strong {
  color: var(--ink);
}
.panel__soon {
  padding: 22px;
  border-radius: var(--radius);
  background: var(--green-deep);
  color: var(--cream);
  display: grid;
  gap: 10px;
  justify-items: start;
}
.panel__soon strong {
  font: var(--weight-bold) var(--text-lg) var(--sans);
  color: var(--gold);
}
.panel__soon p {
  color: var(--mint);
  font-size: var(--text-sm);
}
.chooser__back {
  justify-self: start;
  background: none;
  border: 0;
  color: var(--green);
  font-weight: var(--weight-medium);
  cursor: pointer;
  padding: 6px 0;
}

.no-script-nav {
  display: flex;
  justify-content: center;
  gap: 28px;
  color: var(--green);
}

@media (max-width: 600px) {
  .chooser__inner {
    padding: 24px 18px;
  }
  .platform-card {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 5px 12px;
    padding: 14px;
  }
  .platform-card__icon {
    width: 40px;
    height: 40px;
    grid-row: span 2;
  }
  .platform-card .chip {
    grid-column: 2;
    justify-self: start;
    font-size: var(--text-2xs);
  }
  .platform-card__text span {
    font-size: var(--text-xs);
  }
  .chooser .btn {
    white-space: normal;
    max-width: 100%;
  }
}