/* Amarit Thai & Sushi — site/assets/styles.css
   Step 1 of the BRIEF build order. Tokens, reset, type scale, placeholders.
   No section styles yet. No desktop breakpoint yet. */

/* ═══════════════════════════════════════════════════════════════════════════
   1. TOKENS — copied verbatim from content/tokens.css. Do not edit here.
      Edit content/tokens.css and copy it across again.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* --- Grounds --- */
  --paper:     #FBF5EC;  /* default page background, warm cream */
  --tea-pale:  #F7EDE0;  /* Thai tea, milked out. Card and section surface */
  --tea:       #E8B97E;  /* Thai tea proper. SURFACE ONLY, never a text colour */

  /* --- Ink, soy sauce brown --- */
  --ink:       #241610;  /* body text, dark grounds, footer. 16.18:1 on paper */
  --ink-soft:  #4A3226;  /* secondary text. 10.91:1 on paper */
  --line:      #D9C9B8;  /* hairlines, card edges, dotted leaders */

  /* --- Salmon orange, action --- */
  --salmon:       #F2794C;  /* FIELD ONLY. Hero panel, large blocks. Fails as text on paper */
  --salmon-btn:   #C4472A;  /* button fill. White on it = 4.90:1 PASS */
  --salmon-text:  #A83A22;  /* salmon as small text or a link on paper = 5.88:1 PASS */
}

/*  MEASURED — do not violate
    ─────────────────────────────────────────────────────────────
    ink        on paper        16.18  PASS
    ink        on tea-pale     15.16  PASS
    ink        on tea           9.75  PASS
    ink-soft   on paper        10.91  PASS
    paper      on ink          16.18  PASS
    ink        on salmon        6.36  PASS   ← hero panel: dark type on salmon
    salmon     on ink           6.36  PASS   ← salmon type on a dark ground only
    white      on salmon-btn    4.90  PASS
    salmon-text on paper        5.88  PASS
    ─────────────────────────────────────────────────────────────
    salmon     on paper         2.54  FAIL   ← never salmon type on cream
    white      on salmon        2.76  FAIL   ← never white type on bright salmon
    tea        as text          2.42  FAIL   ← Thai tea is a surface, full stop
*/

/* THE RULE THAT KEEPS THIS PALETTE HONEST

   Bright salmon and white never touch. Bright salmon and cream never touch as
   type. If you want salmon to read as a button, it darkens to --salmon-btn.
   If you want it big and loud, it becomes a field with --ink type on top.

   Thai tea is never a text colour anywhere, at any size, on any ground.

   One action colour on screen at a time. If a section has two salmon buttons
   competing, one of them is the wrong element. */


/* ═══════════════════════════════════════════════════════════════════════════
   2. LAYOUT TOKENS — additive only. Nothing below redefines a colour above.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* --- Alias ---
     BRIEF.md section 13 calls the sticky bar's Order fill --accent. The palette
     has no such token. The only legal button fill is --salmon-btn, so --accent
     points at it. This is an alias, not a tenth colour. See ASSUMPTIONS.md #8. */
  --accent: var(--salmon-btn);

  /* --- Type ---
     Fallbacks are metric-matched so swapping the webfont in shifts nothing.
     Fraunces falls back to Georgia, Inter to Helvetica Neue / Arial. */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue",
    Arial, sans-serif;
  --font-num: "Inter", ui-monospace, "SF Mono", Menlo, monospace;

  /* --- Fluid type scale ---
     1.2 ratio at a 360px viewport, opening to 1.25 by 480px. clamp() does the
     work, so there is no breakpoint here and none is coming. */
  --step--1: clamp(0.80rem, 0.76rem + 0.19vw, 0.86rem);
  --step-0:  clamp(1.00rem, 0.95rem + 0.23vw, 1.07rem);
  --step-1:  clamp(1.20rem, 1.11rem + 0.40vw, 1.34rem);
  --step-2:  clamp(1.44rem, 1.30rem + 0.64vw, 1.67rem);
  --step-3:  clamp(1.73rem, 1.51rem + 0.97vw, 2.09rem);
  --step-4:  clamp(2.07rem, 1.75rem + 1.44vw, 2.62rem);
  --step-5:  clamp(2.49rem, 2.02rem + 2.08vw, 3.27rem);
  --step-6:  clamp(2.99rem, 2.32rem + 2.96vw, 4.09rem);

  --lh-tight: 1.08;
  --lh-head: 1.18;
  --lh-body: 1.55;
  --measure: 34ch;

  /* --- Space, 4px base --- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --gutter: 20px;

  /* --- Shape --- */
  --radius: 6px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --hairline: 1px solid var(--line);
  --shadow-card:
    0 1px 2px color-mix(in srgb, var(--ink) 6%, transparent),
    0 6px 18px color-mix(in srgb, var(--ink) 7%, transparent);

  /* --- Motion, per CLAUDE.md. Banned: parallax, scroll-jacking, carousels --- */
  --rise: 14px;
  --dur-rise: 500ms;
  --dur-hover: 180ms;
  --stagger: 60ms;
  --lift: 2px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* --- Sticky action bar reserve. Section 13 pads the body so it never
         covers the footer. Set here, consumed in step 2. --- */
  --bar-h: 64px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   3. RESET
   ═══════════════════════════════════════════════════════════════════════════ */

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

* {
  margin: 0;
}

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

body {
  min-height: 100svh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--lh-body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: var(--lh-head);
  font-weight: 600;
  text-wrap: balance;
}

h1 { font-size: var(--step-5); line-height: var(--lh-tight); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p, li, dd {
  text-wrap: pretty;
  max-width: var(--measure);
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  cursor: pointer;
}

a {
  color: var(--salmon-text);
  text-underline-offset: 0.18em;
}

ul, ol {
  padding-left: 1.1em;
}

/* Prices and phone numbers line up. Tabular figures, per the BRIEF menu spec. */
.num, td.price, .price {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

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

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

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   4. PLACEHOLDER DISCIPLINE — nothing unverified ships looking real.
      Do not remove these styles. See CLAUDE.md.
   ═══════════════════════════════════════════════════════════════════════════ */

/* .ph — any unconfirmed value in markup. Dotted underline, survives wrapping.
   --salmon-text is 5.88:1 on paper, so this is legal at any size. */
.ph {
  text-decoration: underline dotted var(--salmon-text);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

/* .ph-img — a labelled dashed box at a fixed aspect ratio, so layout does not
   shift when the real photo lands. Ratios come from assets/README.md.
   Markup: <div class="ph-img r-4x5" data-label="hero-mobile.jpg"></div> */
.ph-img {
  --ratio: 4 / 3;
  aspect-ratio: var(--ratio);
  display: grid;
  place-content: center;
  gap: var(--sp-1);
  padding: var(--sp-4);
  width: 100%;
  background: var(--tea-pale);
  border: 2px dashed var(--line);
  border-radius: var(--radius);
  color: var(--ink-soft);
  font-size: var(--step--1);
  line-height: 1.35;
  text-align: center;
  overflow: hidden;
}

.ph-img::before {
  content: attr(data-label);
  font-weight: 600;
  word-break: break-word;
}

.ph-img::after {
  content: attr(data-ratio);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.75;
}

/* Ratio modifiers, one per slot in assets/README.md */
.ph-img.r-4x5  { --ratio: 4 / 5; }      /* hero, mobile */
.ph-img.r-16x9 { --ratio: 16 / 9; }     /* hero desktop, order bg, story */
.ph-img.r-4x3  { --ratio: 4 / 3; }      /* signature dishes, catering */
.ph-img.r-3x2  { --ratio: 3 / 2; }      /* interior */
.ph-img.r-1x1  { --ratio: 1 / 1; }      /* gallery squares */
.ph-img.r-og   { --ratio: 1200 / 630; } /* open graph */

/* Logo slots have no fixed ratio. Box them to a known height instead. */
/* A real photo standing in a slot that used to hold a .ph-img box. Same
   ratios on purpose, so replacing a placeholder shifts nothing. */
.photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--ratio, 4 / 3);
  object-fit: cover;
}
.photo.r-16x9 { --ratio: 16 / 9; }
.photo.r-4x3  { --ratio: 4 / 3; }
.photo.r-3x2  { --ratio: 3 / 2; }
.photo.r-1x1  { --ratio: 1 / 1; }

.ph-img.r-logo {
  --ratio: auto;
  aspect-ratio: auto;
  min-height: 56px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   5. MOTION — fade-up on scroll, 14px, 500ms, 60ms stagger, fires once.
      Hidden only when scripting is on, so a no-JS visitor sees everything.
      app.js also drops a 3s failsafe class on <html>.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (scripting: enabled) {
  [data-reveal] {
    opacity: 0;
    transform: translateY(var(--rise));
    transition:
      opacity var(--dur-rise) var(--ease),
      transform var(--dur-rise) var(--ease);
    transition-delay: var(--reveal-delay, 0ms);
  }
  [data-reveal].is-revealed,
  .reveal-all [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   6. PRIMITIVES — buttons, section shell, skip link
   ═══════════════════════════════════════════════════════════════════════════ */

.skip-link {
  position: absolute;
  left: var(--sp-3);
  top: calc(var(--sp-3) * -10);
  z-index: 100;
  padding: var(--sp-3) var(--sp-4);
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--radius);
  text-decoration: none;
  transition: top var(--dur-hover) var(--ease);
}
.skip-link:focus-visible { top: var(--sp-3); }

.section {
  padding: var(--sp-8) var(--gutter);
}
.section--tight { padding-block: var(--sp-7); }
.section--surface { background: var(--tea-pale); }
.section--flush { padding-inline: 0; }

.section__head {
  text-align: center;
  margin-bottom: var(--sp-5);
}
.section__title {
  font-size: var(--step-4);
}
.section__lede {
  margin: var(--sp-3) auto 0;
  color: var(--ink-soft);
  max-width: 32ch;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 48px;
  padding: var(--sp-3) var(--sp-6);
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: var(--step-0);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition:
    transform var(--dur-hover) var(--ease),
    background-color var(--dur-hover) var(--ease);
}
.btn:hover { transform: translateY(calc(var(--lift) * -1)); }
.btn:active { transform: none; }

/* The one action colour. White on --salmon-btn is 4.90:1. */
.btn--primary {
  background: var(--accent);
  color: #fff;
}
.btn--outline {
  border: 1.5px solid var(--ink);
  color: var(--ink);
  background: transparent;
}
/* On a dark ground only. */
.btn--onDark {
  border: 1.5px solid var(--paper);
  color: var(--paper);
  background: transparent;
}
.btn--lg {
  min-height: 56px;
  font-size: var(--step-1);
  padding-inline: var(--sp-7);
  width: 100%;
  max-width: 22rem;
}

/* A CTA whose destination is not confirmed yet. Still visible, never silently
   dead: it cannot be clicked and it carries the .ph underline. */
.btn[aria-disabled="true"],
a[aria-disabled="true"] {
  pointer-events: none;
  opacity: 0.72;
}

.link-quiet {
  color: var(--salmon-text);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   7. SECTION 01 · HEADER
   ═══════════════════════════════════════════════════════════════════════════ */

:root { --header-h: 60px; }

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 40;
  background: transparent;
  transition:
    background-color var(--dur-hover) var(--ease),
    box-shadow var(--dur-hover) var(--ease);
}
/* Condenses past 24px scroll, per CLAUDE.md */
.site-header.is-solid {
  background: var(--paper);
  box-shadow: 0 1px 0 var(--line);
}

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  height: var(--header-h);
  padding-inline: var(--gutter);
}

/* Owner logo. Gold while the header is clear over the hero. Gold on paper is
   1.5:1 to 2.5:1, so once the header is solid the same PNG is used as a mask
   and filled with --ink instead. One file, no second asset. */
.wordmark {
  position: relative;
  display: block;
  line-height: 0;
  text-decoration: none;
}
.wordmark__logo {
  display: block;
  height: 44px;
  width: auto;
  transition: opacity var(--dur-hover) var(--ease);
}
.wordmark::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ink);
  -webkit-mask: url("img/logo.png") center / contain no-repeat;
          mask: url("img/logo.png") center / contain no-repeat;
  opacity: 0;
  transition: opacity var(--dur-hover) var(--ease);
}
.site-header.is-solid .wordmark__logo,
.site-header--solid .wordmark__logo { opacity: 0; }
.site-header.is-solid .wordmark::after,
.site-header--solid .wordmark::after { opacity: 1; }

.nav-toggle {
  display: grid;
  place-content: center;
  width: 48px;
  height: 48px;
  margin-right: calc(var(--sp-3) * -1);
  color: var(--paper);
  transition: color var(--dur-hover) var(--ease);
}
.site-header.is-solid .nav-toggle,
.site-header--solid .nav-toggle { color: var(--ink); }

.nav-toggle__box {
  display: grid;
  gap: 5px;
  width: 22px;
}
.nav-toggle__box span {
  display: block;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--dur-hover) var(--ease), opacity var(--dur-hover) var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__box span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__box span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__box span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.site-nav {
  background: var(--paper);
  border-top: var(--hairline);
  box-shadow: var(--shadow-card);
}
.site-nav__list {
  list-style: none;
  padding: var(--sp-2) var(--gutter) var(--sp-5);
  margin: 0;
}
.site-nav__list li + li { border-top: var(--hairline); }
.site-nav__list a {
  display: block;
  padding: var(--sp-4) 0;
  color: var(--ink);
  font-size: var(--step-1);
  font-family: var(--font-display);
  text-decoration: none;
}


/* ═══════════════════════════════════════════════════════════════════════════
   8. SECTION 02 · HERO
      .hero__media is a fixed-ratio frame. Dropping a <video> or <img> in place
      of the placeholder box changes nothing about the layout.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Phone: the hero fills the screen, less 3rem so the utility bar peeks in
   and says there is more below. svh, not vh, so iOS's collapsing toolbar
   never moves the page. Capped so a tall tablet does not get a wall. */
.hero {
  position: relative;
  height: calc(100vh - 3rem);
  height: calc(100svh - 3rem);
  min-height: 30rem;
  max-height: 56rem;
  display: grid;
  align-items: end;
  overflow: hidden;
  isolation: isolate;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__media > .ph-img,
.hero__media > picture,
.hero__media > picture > img,
.hero__media > img,
.hero__media > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  display: block;
}

/* Hero video. Sits over the still, which shows through until the first
   frame paints, so there is no blank flash and no layout change. */
.hero__media > .hero__video {
  position: absolute;
  inset: 0;
}

/* Pause control for the video. Ink and paper only, so the Order button keeps
   the one action colour. 44px tap target. Two bars when playing, a triangle
   when paused. */
.hero__pause {
  position: absolute;
  right: var(--sp-3);
  bottom: var(--sp-3);
  z-index: 1;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--paper) 60%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 55%, transparent);
  color: var(--paper);
  cursor: pointer;
}
.hero__pause[hidden] { display: none; }
.hero__pause::before {
  content: "";
  width: 12px;
  height: 14px;
  border-inline: 4px solid currentColor;
}
.hero__pause[aria-pressed="true"]::before {
  width: 0;
  height: 0;
  border-inline: 0;
  border-block: 7px solid transparent;
  border-left: 12px solid currentColor;
  margin-left: 3px;
}

/* Dark scrim. A transparency of --ink, not a new colour. The photo is unknown,
   so the scrim has to guarantee the contrast on its own. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--ink) 42%, transparent) 0%,
    color-mix(in srgb, var(--ink) 30%, transparent) 38%,
    color-mix(in srgb, var(--ink) 78%, transparent) 100%
  );
}

.hero__inner {
  position: relative;
  padding: var(--sp-6) var(--gutter) var(--sp-8);
  text-align: center;
  color: var(--paper);
}
.hero__inner > * { margin-inline: auto; }

/* The h1 is the owner logo. A sheer --ink glow sits behind it so the gold
   holds on any video frame. Transparency of an existing token, no new colour. */
.hero__name {
  position: relative;
  line-height: 0;
  width: min(52vw, 210px);
}
.hero__name::before {
  content: "";
  position: absolute;
  inset: -30% -25%;
  z-index: -1;
  background: radial-gradient(
    closest-side,
    color-mix(in srgb, var(--ink) 55%, transparent) 0%,
    color-mix(in srgb, var(--ink) 30%, transparent) 60%,
    transparent 100%
  );
  pointer-events: none;
}
.hero__logo {
  display: block;
  width: 100%;
  height: auto;
}

.hero__kicker {
  margin-top: var(--sp-4);
  max-width: 28ch;
  color: var(--paper);
  font-size: var(--step-0);
}

.hero__actions { margin-top: var(--sp-6); }
/* Full menu: the same outline button at every size. On phones it stacks
   under Order Online at the same width; on desktop they sit side by side. */
.hero__second { margin-top: var(--sp-3); }
.hero__second .btn { width: 100%; max-width: 22rem; }

/* .ph on a dark ground: --salmon-text is too dark to read there, so the dotted
   rule goes to paper. Still obviously a placeholder, still legible. */
.hero .ph,
.on-dark .ph {
  text-decoration-color: var(--paper);
}

.ph-img--fill {
  aspect-ratio: auto;
  height: 100%;
}


/* ═══════════════════════════════════════════════════════════════════════════
   9. SECTION 03 · UTILITY BAR
   ═══════════════════════════════════════════════════════════════════════════ */

.utility-bar {
  position: sticky;
  top: var(--header-h);
  z-index: 30;
  background: var(--tea-pale);
  border-block: var(--hairline);
}
.utility-bar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--gutter);
  font-size: var(--step--1);
  overflow-x: auto;
  scrollbar-width: none;
}
.utility-bar__inner::-webkit-scrollbar { display: none; }

.utility-bar__status {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  white-space: nowrap;
  max-width: none;
  margin: 0;
  color: var(--ink);
}
.utility-bar__status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink-soft);
}
/* Open is a filled ink dot, closed is a salmon-text ring. No third colour. */
.utility-bar__status.is-open::before { background: var(--ink); }
.utility-bar__status.is-closed::before {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--salmon-text);
}

.utility-bar__item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  white-space: nowrap;
  color: var(--ink);
  text-decoration: none;
}
.utility-bar__item + .utility-bar__item,
.utility-bar__status + .utility-bar__item {
  border-left: var(--hairline);
  padding-left: var(--sp-3);
}
.utility-bar__icon { color: var(--salmon-text); }
/* Phones get the Call button in the action bar, so the strip drops the
   number there: it ran off the edge at 390px. Desktop has no action bar,
   so the number stays. */
.utility-bar__item--phone { display: none; }
@media (min-width: 48rem) {
  .utility-bar__item--phone { display: inline-flex; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   10. SECTION 13 · STICKY ACTION BAR
       Order is the dominant action. The other two are outlines, by rule.
   ═══════════════════════════════════════════════════════════════════════════ */

.action-bar {
  position: fixed;
  inset: auto 0 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr 1fr 1.6fr;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--gutter) calc(var(--sp-3) + env(safe-area-inset-bottom));
  background: var(--paper);
  border-top: var(--hairline);
  transform: translateY(110%);
  transition: transform var(--dur-rise) var(--ease);
}
.action-bar.is-visible { transform: none; }

.action-bar__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  border-radius: var(--radius-pill);
  font-size: var(--step--1);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.action-bar__btn--quiet {
  border: 1.5px solid var(--ink);
  color: var(--ink);
}
.action-bar__btn--order {
  background: var(--accent);
  color: #fff;
  font-size: var(--step-0);
}

/* The body reserves the bar's height so it never covers the footer. */
body.has-action-bar { padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom)); }

/* Pages with a solid header and no hero clear the fixed header. */
body.has-solid-header { padding-top: var(--header-h); }

/* A .ph marker sitting on a filled button or a dark ground needs a rule the eye
   can actually see. Same dotted underline, inherited colour. */
.btn.ph,
.action-bar__btn.ph,
.on-dark .ph { text-decoration-color: currentColor; }


/* ═══════════════════════════════════════════════════════════════════════════
   11. FULL-BLEED BANDS · SECTION 04 ORDER, SECTION 06 CATERING
       .band is the shared treatment: photo, heavy scrim, centred words.
       Order is still the centre of gravity and the only --salmon-btn on the
       page. Catering shares the look but takes an outline button, so the two
       never read as equal calls to action.
   ═══════════════════════════════════════════════════════════════════════════ */

.band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: var(--sp-9) var(--gutter);
  text-align: center;
  color: var(--paper);
}

.band__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.band__media > .ph-img,
.band__media > picture,
.band__media > picture > img,
.band__media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  display: block;
}

/* Heavy scrim, per BRIEF p1.04. Same --ink transparency approach as the hero. */
.band__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in srgb, var(--ink) 82%, transparent);
}

.band__inner > * { margin-inline: auto; }

.band__title {
  font-size: var(--step-5);
  line-height: var(--lh-tight);
}

/* Body lines on a band. Catering uses these, order uses .order__modes. */
.band__lede {
  margin-top: var(--sp-3);
  max-width: 34rem;
  color: var(--paper);
  font-size: var(--step-1);
}
.band__lede + .band__lede { margin-top: var(--sp-2); }

.order__modes {
  margin-top: var(--sp-3);
  color: var(--paper);
  font-size: var(--step-1);
}

.order__platform {
  margin-top: var(--sp-2);
  color: var(--paper);
  font-size: var(--step--1);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.9;
}

.order__logo {
  width: min(12rem, 60%);
  margin: var(--sp-5) auto 0;
}
.order__logo .ph-img {
  background: color-mix(in srgb, var(--paper) 10%, transparent);
  border-color: color-mix(in srgb, var(--paper) 45%, transparent);
  color: var(--paper);
}

.band__cta { margin-top: var(--sp-6); }

.band__note {
  margin-top: var(--sp-3);
  font-size: var(--step--1);
  color: var(--paper);
  max-width: 30ch;
}

/* Third-party apps. Text links, never buttons. */
.order__third {
  margin-top: var(--sp-6);
  font-size: var(--step--1);
  color: var(--paper);
  max-width: none;
  opacity: 0.92;
}
.order__third a,
.order__third span[aria-disabled] {
  color: var(--paper);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.order__third .sep {
  padding-inline: var(--sp-2);
  text-decoration: none;
  opacity: 0.6;
}


/* ═══════════════════════════════════════════════════════════════════════════
   12. PAGE 2 · MENU
       Cards on a patterned ground. The pattern is --tea-pale hatched over
       --paper, so it introduces no colour that is not already in the palette.
   ═══════════════════════════════════════════════════════════════════════════ */

.page-head {
  padding: var(--sp-7) var(--gutter) var(--sp-5);
  text-align: center;
}
.page-head__title {
  font-size: var(--step-5);
}

.tabs {
  display: inline-flex;
  gap: var(--sp-1);
  margin-top: var(--sp-4);
  padding: var(--sp-1);
  background: var(--tea-pale);
  border: var(--hairline);
  border-radius: var(--radius-pill);
}
.tab {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 var(--sp-5);
  border-radius: var(--radius-pill);
  color: var(--ink);
  font-size: var(--step--1);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.tab.is-current {
  background: var(--ink);
  color: var(--paper);
}

.menu {
  padding: var(--sp-5) var(--gutter) var(--sp-7);
  background-color: var(--tea-pale);
  background-image: repeating-linear-gradient(
    -45deg,
    color-mix(in srgb, var(--line) 38%, transparent) 0 1px,
    transparent 1px 9px
  );
}

/* Section chips. Sticky under the header, scrolls sideways on phones. The
   active chip is ink, like .tab.is-current, so salmon stays with Order. */
:root { --menu-nav-h: 60px; }
html:has(.menu-nav:not([hidden])) {
  scroll-padding-top: calc(var(--header-h, 60px) + var(--menu-nav-h));
}
.menu-nav {
  position: sticky;
  top: var(--header-h);
  z-index: 30;
  background: var(--paper);
  border-block: var(--hairline);
}
.menu-nav__track {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  height: var(--menu-nav-h);
  padding-inline: var(--gutter);
  overflow-x: auto;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.menu-nav__track::-webkit-scrollbar { display: none; }
.menu-nav__chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 var(--sp-4);
  border: var(--hairline);
  border-radius: var(--radius-pill);
  background: var(--paper);
  color: var(--ink);
  font-size: var(--step--1);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.menu-nav__chip.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.menu__state {
  margin-inline: auto;
  padding-block: var(--sp-6);
  text-align: center;
  color: var(--ink-soft);
}

.menu-card {
  background: var(--paper);
  border: var(--hairline);
  border-radius: var(--radius-lg);
  padding: var(--sp-5) var(--sp-4) var(--sp-6);
  margin-bottom: var(--sp-5);
  box-shadow: var(--shadow-card);
  scroll-margin-top: var(--sp-4);   /* html scroll-padding already clears header and chips */
}

.menu-card__title {
  font-size: var(--step-3);
  text-align: center;
}
.menu-card__note {
  margin: var(--sp-2) auto 0;
  max-width: 34ch;
  text-align: center;
  color: var(--ink-soft);
  font-size: var(--step--1);
}
.menu-card__rows {
  list-style: none;
  padding: 0;
  margin-top: var(--sp-5);
}

.menu-row + .menu-row { margin-top: var(--sp-4); }

.menu-row__head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
}
.menu-row__name {
  font-weight: 600;
  font-family: var(--font-display);
  font-size: var(--step-0);
}
/* Dotted leader between name and price, per BRIEF page 2. */
.menu-row__leader {
  flex: 1 1 auto;
  min-width: var(--sp-5);
  border-bottom: 1px dotted var(--line);
  transform: translateY(-0.25em);
}
.menu-row__price {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  white-space: nowrap;
  text-align: right;
}
.menu-row__price .unit {
  font-size: var(--step--1);
  color: var(--ink-soft);
  padding-right: 2px;
}
.menu-row__price .pair + .pair { padding-left: var(--sp-3); }

.menu-row__desc {
  margin-top: var(--sp-1);
  max-width: 42ch;
  color: var(--ink-soft);
  font-size: var(--step--1);
}

/* Photo slots sit between rows, never inside them, so the column never turns
   into a photo grid. */
.menu-photo {
  margin: var(--sp-5) 0;
}
/* Real dish photos, all shown 3:2 so the cards line up whatever the source. */
.menu-photo__img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius);
}

.ready {
  padding: var(--sp-8) var(--gutter);
  text-align: center;
}
.ready > * { margin-inline: auto; }   /* capped-width paragraphs sit centred */
.ready__title { font-size: var(--step-4); }
.ready__cta { margin-top: var(--sp-5); }
.ready__cta .btn { margin-inline: auto; }
.ready .band__note {
  color: var(--ink);
  margin-inline: auto;
}

.footnote {
  padding: var(--sp-6) var(--gutter) var(--sp-8);
  background: var(--tea-pale);
  border-top: var(--hairline);
  text-align: center;
  font-size: var(--step--1);
  color: var(--ink-soft);
}
.footnote > * + * { margin-top: var(--sp-4); }
.footnote__spice {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2) var(--sp-4);
  list-style: none;
  padding: 0;
  margin-inline: auto;
}
.footnote__spice li {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  max-width: none;
}
.footnote__spice .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid var(--salmon-text);
}
.footnote__spice .dot.is-on { background: var(--salmon-text); }
.footnote p { margin-inline: auto; max-width: 40ch; }


/* ═══════════════════════════════════════════════════════════════════════════
   13. SECTION 05 · SIGNATURE DISHES
       Three cards, image on top, name and price, tight. Each one links into a
       menu section anchor, never a detail page.
   ═══════════════════════════════════════════════════════════════════════════ */

.signature__grid {
  display: grid;
  gap: var(--sp-4);
}

.dish-card {
  display: block;
  background: var(--paper);
  border: var(--hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
  color: var(--ink);
  text-decoration: none;
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-hover) var(--ease);
}
.dish-card:hover { transform: translateY(calc(var(--lift) * -1)); }

.dish-card__media .ph-img,
.dish-card__media img {
  border-radius: 0;
  border-inline: 0;
  border-top: 0;
  width: 100%;
}

.dish-card__body {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  padding: var(--sp-4);
}
.dish-card__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step-1);
}
.dish-card__leader {
  flex: 1 1 auto;
  min-width: var(--sp-5);
  border-bottom: 1px dotted var(--line);
  transform: translateY(-0.25em);
}
.dish-card__price {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  white-space: nowrap;
}
.dish-card__kitchen {
  display: block;
  padding: 0 var(--sp-4) var(--sp-4);
  margin: 0;
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.signature__more {
  margin: var(--sp-6) auto 0;
  text-align: center;
  max-width: none;
}


/* ═══════════════════════════════════════════════════════════════════════════
   14. FORM FIELDS — shared; the newsletter signup uses these
   ═══════════════════════════════════════════════════════════════════════════ */

.field { display: grid; gap: var(--sp-2); max-width: none; margin: 0; }
.field label {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--sp-3);
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
}
.field textarea { min-height: 7rem; resize: vertical; }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible { border-color: var(--salmon-text); }
.btn[disabled] { opacity: 0.55; pointer-events: none; }


/* ═══════════════════════════════════════════════════════════════════════════
   15. SECTIONS 06, 07 · SPLIT BLOCKS (catering teaser, reservations)
   ═══════════════════════════════════════════════════════════════════════════ */

.split { display: grid; gap: var(--sp-5); }
.split__body { text-align: center; }
.split__body > p { margin-inline: auto; margin-top: var(--sp-3); color: var(--ink-soft); }
.split__cta { margin-top: var(--sp-5) !important; }
.split__note { font-size: var(--step--1); }


/* ═══════════════════════════════════════════════════════════════════════════
   16. SECTION 08 · GALLERY
       Uneven two-column grid, one feature tile per block.
   ═══════════════════════════════════════════════════════════════════════════ */

.gallery__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2);
  padding-inline: var(--gutter);
}
.gallery__tile { margin: 0; }
.gallery__tile--feature { grid-column: 1 / -1; }
.gallery__grid .ph-img,
.gallery__grid .photo { border-radius: var(--radius); }
.gallery__more {
  margin: var(--sp-6) auto 0;
  text-align: center;
  max-width: none;
}


/* ═══════════════════════════════════════════════════════════════════════════
   17. SECTION 09 · OUR STORY
   ═══════════════════════════════════════════════════════════════════════════ */

.story {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: var(--sp-9) var(--gutter);
  text-align: center;
  color: var(--paper);
}
.story__media { position: absolute; inset: 0; z-index: -2; }
.story__media > .ph-img,
.story__media > picture,
.story__media > picture > img,
.story__media > img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; display: block; }
.story__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in srgb, var(--ink) 72%, transparent);
}
.story__inner > * { margin-inline: auto; }
.story__title { font-size: var(--step-4); }
.story__line { margin-top: var(--sp-4); color: var(--paper); max-width: 30ch; }
.story__cta { margin-top: var(--sp-6); }


/* ═══════════════════════════════════════════════════════════════════════════
   18. SECTION 10 · REVIEWS
       Text only. No star graphics, no imagery. Hidden while the array is empty.
   ═══════════════════════════════════════════════════════════════════════════ */

.reviews__track {
  display: flex;
  gap: var(--sp-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: var(--sp-3);
}
.reviews__track::-webkit-scrollbar { display: none; }

.review {
  flex: 0 0 100%;
  scroll-snap-align: center;
  text-align: center;
  padding: var(--sp-5) var(--sp-4);
  background: var(--tea-pale);
  border-radius: var(--radius-lg);
}
.review__quote {
  font-family: var(--font-display);
  font-size: var(--step-1);
  margin-inline: auto;
}
.review__source {
  margin-top: var(--sp-3);
  font-size: var(--step--1);
  color: var(--ink-soft);
  margin-inline: auto;
}

.reviews__dots {
  display: flex;
  justify-content: center;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}
.reviews__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--ink-soft);
}
.reviews__dot[aria-selected="true"] { background: var(--ink); border-color: var(--ink); }


/* ═══════════════════════════════════════════════════════════════════════════
   19. SECTION 11 · FIND US
   ═══════════════════════════════════════════════════════════════════════════ */

.find { text-align: center; }
.find__map { margin-bottom: var(--sp-5); }
.find__iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--tea-pale);
}
.find__area {
  margin: 0 auto var(--sp-2);
  font-size: var(--step--1);
  color: var(--ink-soft);
}
.find__address {
  font-style: normal;
  line-height: var(--lh-body);
}
.find__phone { margin-top: var(--sp-4); }
.find__cta { margin-top: var(--sp-5); }
.find__cta .btn { margin-inline: auto; }
.find__note { font-size: var(--step--1); margin-top: var(--sp-3); }
.find__address, .find__phone, .find__note, .find__cta { margin-inline: auto; }

.hours {
  width: 100%;
  max-width: 22rem;
  margin: var(--sp-5) auto 0;
  border-collapse: collapse;
  font-size: var(--step--1);
  text-align: left;
}
.hours th,
.hours td {
  padding: var(--sp-2) 0;
  border-bottom: var(--hairline);
  font-weight: 400;
}
.hours td {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.hours tr.is-today th,
.hours tr.is-today td { font-weight: 600; }


/* ═══════════════════════════════════════════════════════════════════════════
   19b. CONTACT AND FAQ PAGES
        Built from the Find us pieces above. No new colour, no new type size.
   ═══════════════════════════════════════════════════════════════════════════ */

.contact { text-align: center; }
.contact__list {
  list-style: none;
  padding: 0;
  margin: var(--sp-5) auto 0;
  display: grid;
  gap: var(--sp-5);
}
.contact__list li { margin-inline: auto; max-width: none; }
.contact__label {
  display: block;
  font-size: var(--step--1);
  color: var(--ink-soft);
  margin-bottom: var(--sp-1);
}
.contact__list .link-quiet { font-size: var(--step-1); overflow-wrap: anywhere; }
.contact__more {
  margin: var(--sp-5) auto 0;
  text-align: center;
}

.faq {
  max-width: 40rem;
  margin-inline: auto;
}
.faq__item {
  padding-block: var(--sp-5);
  border-bottom: var(--hairline);
}
.faq__item:first-child { padding-top: 0; }
.faq__q {
  font-size: var(--step-2);
  margin-bottom: var(--sp-3);
}
.faq__item > p { max-width: 60ch; }
.faq__item > p + p { margin-top: var(--sp-3); }
.faq__more { margin-top: var(--sp-6); max-width: 60ch; }

/* Privacy and Accessibility. Same measure and rhythm as the FAQ. */
.page-head__meta {
  margin: var(--sp-3) auto 0;
  font-size: var(--step--1);
  color: var(--ink-soft);
}
.legal {
  max-width: 40rem;
  margin-inline: auto;
}
.legal__item { padding-block: var(--sp-5); border-bottom: var(--hairline); }
.legal__item:first-child { padding-top: 0; }
.legal__item:last-child { border-bottom: 0; }
.legal__h { font-size: var(--step-2); margin-bottom: var(--sp-3); }
.legal__item > p,
.legal__item > ul { max-width: 60ch; }
.legal__item > * + * { margin-top: var(--sp-3); }
.legal__item ul { padding-left: 1.2em; }
.legal__item li + li { margin-top: var(--sp-2); }

.site-footer__legal a { text-decoration: underline; text-underline-offset: 0.2em; }
.site-footer__legal .sep { padding-inline: var(--sp-2); }

/* Focus on a dark ground. --salmon-text on --ink is under 3:1, so the ring
   turns --paper wherever the ground is ink or a photo under an ink scrim. */
.site-footer :focus-visible,
.hero :focus-visible,
.on-dark :focus-visible,
.site-header:not(.is-solid) .site-header__bar :focus-visible {
  outline-color: var(--paper);
}
@media (min-width: 48rem) {
  .site-header:not(.is-solid) .site-nav :focus-visible { outline-color: var(--paper); }
}


/* ═══════════════════════════════════════════════════════════════════════════
   20. SECTION 12 · FOOTER
   ═══════════════════════════════════════════════════════════════════════════ */

.site-footer {
  background: var(--ink);
  color: var(--paper);
  padding: var(--sp-7) var(--gutter) var(--sp-8);
}
.site-footer a { color: var(--paper); }
.site-footer .ph { text-decoration-color: var(--paper); }

.acc {
  border-bottom: 1px solid color-mix(in srgb, var(--paper) 22%, transparent);
}
.acc summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: var(--step-1);
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: "+"; font-family: var(--font-body); }
.acc[open] summary::after { content: "\2013"; }
.acc__list {
  list-style: none;
  padding: 0 0 var(--sp-4);
  margin: 0;
}
.acc__list li { padding-block: var(--sp-2); }
.acc .hours { margin-top: 0; padding-bottom: var(--sp-4); max-width: none; }
.acc .hours th,
.acc .hours td { border-bottom-color: color-mix(in srgb, var(--paper) 18%, transparent); }

.social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  list-style: none;
  padding: 0;
  margin-top: var(--sp-5);
}
.social a { font-size: var(--step--1); letter-spacing: 0.08em; text-transform: uppercase; }

.site-footer__legal {
  margin-top: var(--sp-6);
  font-size: var(--step--1);
  opacity: 0.8;
  max-width: none;
}


/* ═══════════════════════════════════════════════════════════════════════════
   21. DESKTOP — build order step 8, one pass, all of it below this line.
       Everything above is the mobile build and stays untouched.
       Two stops: 48rem when the columns can split, 64rem when the page can
       breathe. Widescreen behaviour only, per BRIEF.
   ═══════════════════════════════════════════════════════════════════════════ */

:root { --maxw: 72rem; }

/* Mobile-only pieces, switched off once there is room for the real nav. */
.site-header__cta { display: none; }

@media (min-width: 48rem) {

  :root {
    --gutter: 40px;
    --header-h: 76px;
  }

  /* ---- 01 header: real nav, no hamburger ---- */
  /* One row: logo left, links and the Order button together on the right,
     all centred on the same line. The bar steps aside (display: contents) so
     its logo and button sit in the same row as the nav without new markup. */
  .nav-toggle { display: none; }
  .site-header {
    display: flex;
    align-items: center;
    gap: var(--sp-6);
    height: var(--header-h);
    padding-inline: var(--gutter);
  }
  .site-header__bar { display: contents; }
  .wordmark { order: 0; margin-right: auto; }
  .site-nav { order: 1; }
  .site-header__cta { order: 2; }
  .site-nav,
  .site-nav[hidden] {
    display: block;
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  .site-nav__list { display: flex; align-items: center; gap: var(--sp-6); padding: 0; }
  .site-nav__list li + li { border-top: 0; }
  .site-nav__list a {
    display: inline-block;
    padding: var(--sp-2) 0;
    line-height: 1;
    font-family: var(--font-body);
    font-size: var(--step--1);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--paper);
  }
  .site-header.is-solid .site-nav__list a { color: var(--ink); }

  /* One action colour on screen at a time. Over the hero this is an outline,
     because the hero's own Order Online button owns the salmon. It only fills
     once the header is solid and the hero has gone. */
  .site-header__cta {
    display: inline-flex;
    min-height: 42px;
    padding-inline: var(--sp-5);
    font-size: var(--step--1);
    background: transparent;
    border: 1.5px solid var(--paper);
    color: var(--paper);
  }
  .site-header.is-solid .site-header__cta {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
  }

  /* ---- 02 hero: 16:9, two buttons side by side ---- */
  /* Desktop: 72% of the screen, so the utility bar and the top of the next
     section show without scrolling. Never shorter than 34rem, never taller
     than 16:9. */
  .hero { height: clamp(34rem, 72svh, 56.25vw); max-height: none; min-height: 0; place-items: center; }
  .hero__inner { padding-block: var(--sp-9); max-width: 46rem; }
  .hero__name { width: 280px; }
  .hero__kicker { font-size: var(--step-1); max-width: 40ch; }
  .hero__actions,
  .hero__second {
    display: inline-block;
    margin-top: var(--sp-6);
    margin-inline: var(--sp-2);
  }
  .hero__second .btn { width: auto; }
  .btn--lg { width: auto; }

  /* ---- shared measure ---- */
  .section,
  .page-head,
  .ready,
  .footnote,
  .band__inner,
  .story__inner,
  .site-footer__inner {
    max-width: var(--maxw);
    margin-inline: auto;
  }
  .section { padding-block: var(--sp-9); }

  /* ---- 06, 07 split blocks: photo one side, words the other ---- */
  .split {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--sp-8);
  }
  .split__body { text-align: left; }
  .split__body > p,
  .split__body > .section__lede { margin-inline: 0; }
  #reservations .split__media { order: 2; }

  /* ---- 05 signature: three across ---- */
  .signature__grid { grid-template-columns: repeat(3, 1fr); }

  /* ---- 08 gallery: the uneven grid the wireframe asks for ---- */
  .gallery__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-3);
  }
  .gallery__tile--feature { grid-column: span 2; grid-row: span 2; }
  .gallery__tile--feature .ph-img,
  .gallery__tile--feature .photo { height: 100%; aspect-ratio: auto; }

  /* ---- 11 find us: details beside the map ---- */
  .find {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-8);
    align-items: start;
    text-align: left;
  }
  .find .section__head { grid-column: 1 / -1; text-align: left; }
  .find__map { grid-column: 2; grid-row: 2 / span 5; margin-bottom: 0; }
  .find__address,
  .find__phone,
  .find__note,
  .find__cta { margin-inline: 0; }
  .find .hours { margin-inline: 0; }

  /* ---- 12 footer: four columns, accordions opened out ---- */
  .site-footer__inner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-6);
    align-items: start;
  }
  .acc { border-bottom: 0; }
  .acc summary { padding-top: 0; cursor: default; pointer-events: none; }
  .acc summary::after { content: none; }
  .acc__list,
  .acc .hours { display: block; padding-bottom: 0; }
  .social { grid-column: 1 / -1; margin-top: 0; }
  .site-footer__legal { grid-column: 1 / -1; }

  /* ---- 13 sticky bar: the header carries the order button up here ---- */
  .action-bar { display: none; }
  body.has-action-bar { padding-bottom: 0; }

  /* ---- page 2 menu: two columns of stacked cards ---- */
  .menu {
    columns: 2;
    column-gap: var(--sp-5);
    padding-inline: var(--gutter);
  }
  .menu-card { break-inside: avoid; }
}

@media (min-width: 64rem) {
  :root { --gutter: 56px; }

  .hero__name { width: clamp(280px, 14rem + 6vw, 340px); }
  .band { padding-block: calc(var(--sp-9) * 1.5); }
  .band__inner { max-width: 40rem; }
  .story__inner { max-width: 44rem; }

  .reviews__track { max-width: 48rem; margin-inline: auto; }

  /* The menu's two columns get their own measure rather than stretching. */
  .menu { max-width: var(--maxw); margin-inline: auto; }
}