/* ==========================================================================
   SKEWRS GRILL — site.css
   Built from the shopfront at 26 Chiswick High Road: a gloss-black fascia with
   the name in gold. The site follows the sign's rules —
     · the page is black, the words are a warm off-white;
     · gold belongs to the brand and the one action that matters (ordering),
       and is always flat: no gradients, no glows, no gold rules;
     · colour comes from the food photography, not from decoration.
   Type has three voices from two families: Archivo condensed for headlines
   (the fascia lettering), Fraunces for dish names (the
   printed menu card), Archivo at normal width for everything else.
   Hand-written; no framework. Built into assets/css/site.<hash>.css by
   _source/build.py. CSP forbids inline styles, so every style lives here.
   ========================================================================== */

/* ---------- Font (self-hosted, SIL OFL) ---------------------------------- */
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  src: url("../fonts/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  src: url("../fonts/archivo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2113, U+A720-A7FF; }

@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 300 600; font-display: swap;
  src: url("../fonts/fraunces-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 300 600; font-display: swap;
  src: url("../fonts/fraunces-tr.woff2") format("woff2"); unicode-range: U+011E-011F, U+0130, U+015E-015F; }

/* ---------- Tokens ------------------------------------------------------- */
:root {
  --black:  #000000;   /* the fascia */
  --char:   #0e0c0a;   /* warm charcoal: the statement and ordering bands */
  --raise:  #161513;   /* filter panel, form, disclaimer */
  --raise-2:#1c1c1a;   /* checked chips, hover */
  --paper:  #f3efe7;   /* text */
  --stone:  #aaa59c;   /* secondary text — 8.6:1 on black */
  --dim:    #858178;   /* tertiary text — 5.3:1 on black */
  --rule:   rgba(243, 239, 231, .13);
  --rule-2: rgba(243, 239, 231, .3);
  --gold:   #ba9b49;   /* the logo's gold, exactly */
  --gold-2: #c9ac5f;   /* gold button hover */
  --alert:  #f0a58c;

  --f: "Archivo", "Helvetica Neue", Arial, system-ui, sans-serif;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --condensed: 74%;

  --wrap: 1240px;
  --gutter: clamp(20px, 4.4vw, 56px);
  --header-h: 72px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);      /* long, soft landing: reveals */
  --ease-io: cubic-bezier(.65, 0, .35, 1);      /* symmetrical: fills and wipes */
  --radius: 3px;
}
@media (max-width: 1079px) { :root { --header-h: 64px; } }

/* ---------- Reset / base ------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--black); color: var(--paper);
  font-family: var(--f); font-size: 1.0625rem; line-height: 1.6; font-weight: 400;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: lining-nums;
}
body.scroll-locked { overflow: hidden; }
img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; }
ul, ol { margin: 0; padding: 0; }
[role="list"] { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
abbr[title] { text-decoration: none; }
address { font-style: normal; }
figure { margin: 0; }
[hidden] { display: none !important; }
::selection { background: var(--gold); color: var(--black); }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
main:focus, section:focus, [tabindex="-1"]:focus { outline: none; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -80px; z-index: 200;
  background: var(--gold); color: var(--black); padding: 12px 18px; font-weight: 600; border-radius: var(--radius);
}
.skip-link:focus { top: 12px; }

/* ---------- Layout ------------------------------------------------------- */
.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.section { position: relative; padding-block: clamp(80px, 10vw, 152px); }
.section--tight { padding-block: clamp(56px, 6vw, 88px); }
.band { background: var(--char); }


/* ---------- Type --------------------------------------------------------- */
h1, h2 {
  font-stretch: var(--condensed); font-weight: 700; line-height: .95; letter-spacing: -.008em; word-spacing: .12em; color: var(--paper);
  text-wrap: balance;
}
h1 { font-size: clamp(3.1rem, 6.6vw, 6.4rem); line-height: .9; }
h2 { font-size: clamp(2.4rem, 4.6vw, 4rem); }
h3 { font-size: 1.3rem; line-height: 1.25; letter-spacing: -.005em; }
.lede { font-size: clamp(1.06rem, 1.3vw, 1.2rem); line-height: 1.55; color: var(--stone); max-width: 34rem; }
.lede strong, .hero-offer strong { color: var(--gold); font-weight: 600; }
.body-copy { color: var(--stone); max-width: 36rem; }
.body-copy p + p { margin-top: 1em; }
.small { font-size: .9rem; color: var(--stone); line-height: 1.55; }
.link { color: var(--paper); text-decoration: underline; text-decoration-color: var(--rule-2); text-underline-offset: 4px; text-decoration-thickness: 1px; transition: text-decoration-color .2s; }
.link:hover { text-decoration-color: var(--paper); }

.head { margin-bottom: clamp(36px, 4.5vw, 60px); }
.head p.lede { margin-top: 18px; }
.head--row { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 32px; }
.head--split { display: grid; gap: 18px; align-items: end; }
@media (min-width: 960px) { .head--split { grid-template-columns: 1fr auto; } .head--split .lede { margin-top: 0; text-align: right; } }

/* ---------- Buttons ------------------------------------------------------ */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 24px; border-radius: var(--radius);
  font-weight: 600; font-size: 1rem; line-height: 1; white-space: nowrap;
  border: 1px solid transparent;
  transition: background-color .35s var(--ease), color .45s var(--ease-io), border-color .45s var(--ease-io);
}
.btn svg { width: 18px; height: 18px; flex: none; transition: transform .45s var(--ease-out); }
.btn:hover svg { transform: translateY(-2px); }
.btn:active { transform: translateY(1px); }
.btn-line::before, .btn-ghost::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--paper);
  transform: scaleY(0); transform-origin: 50% 100%; transition: transform .5s var(--ease-io);
}
.btn-line:hover::before, .btn-ghost:hover::before { transform: scaleY(1); }
.btn-line:hover, .btn-ghost:hover { color: var(--black); border-color: var(--paper); }
.btn-gold { background: var(--gold); border-color: var(--gold); color: var(--black); }
.btn-gold:hover { background: var(--gold-2); border-color: var(--gold-2); }
.btn-gold svg [opacity] { opacity: .55; }
.btn-line { border-color: var(--rule-2); color: var(--paper); }
.btn-line:hover { border-color: var(--paper); }
.btn-ghost { color: var(--paper); border-color: rgba(243, 239, 231, .5); background: rgba(0, 0, 0, .4); }
.btn-quiet { min-height: 44px; padding-inline: 2px; color: var(--paper); text-decoration: underline; text-decoration-color: var(--rule-2); text-underline-offset: 5px; }
.btn-quiet:hover { text-decoration-color: var(--paper); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.btn-block { width: 100%; }

.arrow-link {
  display: inline-flex; align-items: center; gap: 8px; padding-bottom: 3px; font-weight: 600; font-size: .98rem; color: var(--paper);
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .5s var(--ease-out);
}
.arrow-link:hover { background-size: 100% 1px; }
.arrow-link svg { width: 17px; height: 17px; transition: transform .25s var(--ease); }
.arrow-link:hover svg { transform: translateX(3px); }

/* ---------- Header ------------------------------------------------------- */
.site-header { position: sticky; top: 0; z-index: 60; background: var(--black); border-bottom: 1px solid var(--rule); transition: background-color .4s var(--ease), border-color .4s var(--ease), transform .3s var(--ease); }
@media (min-width: 1080px) { html.hdr-hidden .site-header { transform: translateY(-100%); } }
/* Phones and tablets: the header stays pinned and never moves (see header() in site.js) */
@media (max-width: 1079px) { .site-header { transition: background-color .3s var(--ease), border-color .3s var(--ease); } }
.site-header[data-sticky] { background: linear-gradient(rgba(0, 0, 0, .55), transparent); border-bottom-color: transparent; }
.site-header[data-sticky].is-scrolled { background: var(--black); border-bottom-color: var(--rule); }
.header-inner { display: flex; align-items: center; gap: 24px; height: var(--header-h); }

.brand { display: inline-flex; align-items: center; gap: 12px; margin-right: auto; }
.brand img { width: 34px; height: 34px; }
.brand-text { display: flex; flex-direction: column; gap: 4px; line-height: 1; }
.brand-name { font-weight: 600; font-size: 1rem; letter-spacing: .3em; color: var(--gold); }
.brand-sub { font-weight: 500; font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--stone); }

.nav { display: none; align-items: center; gap: clamp(20px, 2.2vw, 32px); }
.nav a:not(.btn) { position: relative; padding-block: 8px; font-size: .97rem; color: var(--stone); transition: color .2s; }
.nav a:not(.btn):hover, .nav a[aria-current] { color: var(--paper); }
.nav a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--paper);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .5s var(--ease-out);
}
.nav a:not(.btn):hover::after, .nav a[aria-current]::after { transform: scaleX(1); }
.nav .nav-phone { display: inline-flex; align-items: center; gap: 8px; color: var(--paper); font-variant-numeric: tabular-nums; }
.nav .nav-phone svg { width: 14px; height: 14px; }
.nav .btn { min-height: 42px; padding-inline: 18px; font-size: .95rem; }
@media (min-width: 1080px) { .nav { display: flex; } }

.nav-toggle {
  display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 2px 8px 10px;
  background: none; border: 0; color: var(--paper); font-weight: 500; font-size: .95rem;
}
.nav-toggle .bars { position: relative; width: 22px; height: 12px; }
.nav-toggle .bars span { position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform .3s var(--ease), opacity .2s, top .3s var(--ease); }
.nav-toggle .bars span:nth-child(1) { top: 0; }
.nav-toggle .bars span:nth-child(2) { top: 5px; }
.nav-toggle .bars span:nth-child(3) { top: 10px; }
.nav-toggle[aria-expanded="true"] .bars span:nth-child(1) { top: 5px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .bars span:nth-child(3) { top: 5px; transform: rotate(-45deg); }
@media (max-width: 419px) { .nav-toggle-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
@media (min-width: 1080px) { .nav-toggle { display: none; } }

/* Mobile drawer */
.drawer {
  position: fixed; inset: 0; z-index: 55; padding: calc(var(--header-h) + 12px) var(--gutter) 32px;
  background: var(--black); display: flex; flex-direction: column; overflow-y: auto;
  opacity: 0; visibility: hidden; transition: opacity .25s var(--ease), visibility 0s linear .25s;
}
.drawer.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.drawer nav { display: flex; flex-direction: column; flex: 1; }
.drawer-link {
  display: block; padding: 14px 0; border-bottom: 1px solid var(--rule);
  font-stretch: var(--condensed); font-weight: 700; font-size: clamp(2rem, 9vw, 2.6rem); line-height: 1.05; word-spacing: .1em; color: var(--paper);
}
.drawer-link[aria-current] { color: var(--gold); }
.drawer-actions { display: grid; gap: 10px; margin-top: 28px; }
.drawer-address { margin-top: 24px; color: var(--stone); font-size: .95rem; }
@media (min-width: 1080px) { .drawer { display: none; } }

/* ---------- Hero --------------------------------------------------------- */
.hero { position: relative; margin-top: calc(-1 * var(--header-h)); min-height: min(940px, 100svh); display: flex; overflow: hidden; isolation: isolate; }
.hero-media { position: absolute; inset: 0; z-index: -1; background: var(--black); }
.hero-media picture, .hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-media img { object-position: 60% 50%; }
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .8) 34%, rgba(0, 0, 0, .38) 66%, rgba(0, 0, 0, .18) 100%),
    linear-gradient(0deg, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, 0) 40%);
}
.hero-body { display: flex; flex-direction: column; justify-content: flex-end; padding-top: calc(var(--header-h) + 96px); padding-bottom: 36px; }
.hero h1 { font-size: clamp(3.4rem, 8.4vw, 8.6rem); line-height: .86; letter-spacing: -.012em; max-width: 8.2em; }
.hero .lede { margin-top: 28px; color: rgba(243, 239, 231, .82); max-width: 30rem; }
.hero .btn-row { margin-top: 34px; }
.hero-facts { display: grid; margin: clamp(48px, 7vw, 96px) 0 0; border-top: 1px solid rgba(243, 239, 231, .22); }
.hero-facts div { padding: 16px 0 0; }
.hero-facts dt { font-size: .85rem; color: var(--dim); }
.hero-facts dd { margin: 2px 0 0; font-size: 1rem; }
.hero-facts strong { color: var(--gold); font-weight: 500; }
@media (min-width: 760px) {
  .hero-facts { grid-template-columns: repeat(3, 1fr); }
  .hero-facts div + div { padding-left: 24px; border-left: 1px solid rgba(243, 239, 231, .22); margin-top: 16px; padding-top: 0; }
}
/* Phones: the photo is its own band at the top, clear except a light shade under the header and a
   fade into black at the bottom. The headline sits on that fade; the rest of the copy is on black.
   (Before 15 Oct 2026 the copy filled the whole screen over the photo, which needed a 55-95 %
   black wash to stay readable, so the photo barely showed.) */
@media (max-width: 759px) {
  .hero, body.has-promo .hero { display: block; min-height: 0; }
  .hero-media { position: relative; inset: auto; z-index: 0; height: 340px; height: clamp(300px, 54svh, 540px); }
  .hero-media img { object-position: 50% 42%; }
  .hero-media::after { background: linear-gradient(180deg, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, 0) 24%, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, .72) 80%, var(--black) 100%); }
  .hero-body { position: relative; z-index: 1; margin-top: -92px; padding-top: 0; padding-bottom: 44px; }
  .hero h1 { text-shadow: 0 2px 28px rgba(0, 0, 0, .55); }
  .hero .lede { margin-top: 18px; }
  .hero .btn-row { margin-top: 24px; }
  .hero-facts { margin-top: 40px; }
  .hero-facts div + div { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(243, 239, 231, .14); }
}

/* ---------- Order -------------------------------------------------------- */
#order { background: var(--char); }
.order-grid { display: grid; gap: clamp(40px, 5vw, 96px); }
@media (min-width: 1000px) { .order-grid { grid-template-columns: .95fr 1.05fr; align-items: start; } }
.order-grid .head { margin-bottom: 0; }
.order-grid h2 { max-width: 7em; }
.order-actions { margin-top: 30px; }
.platforms { border-top: 1px solid var(--rule-2); }
.platform {
  display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 18px;
  padding: 22px 0; border-bottom: 1px solid var(--rule);
}
.platform-icon { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--rule-2); border-radius: 50%; color: var(--stone); }
.platform-icon svg { width: 19px; height: 19px; }
.platform-name { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.45rem; line-height: 1.15; }
.platform-meta { display: block; margin-top: 2px; font-size: .95rem; color: var(--stone); }
.status { font-size: .9rem; color: var(--dim); white-space: nowrap; }
.platform--direct { padding-block: 30px; }
.platform--direct .platform-name { font-size: 2rem; }
.platform--direct .platform-meta { color: var(--gold); font-weight: 500; }
.platform--direct .platform-icon { background: var(--gold); border-color: var(--gold); color: var(--black); }
.platform--direct .platform-icon svg [opacity] { opacity: .55; }
@media (max-width: 520px) {
  .platform { grid-template-columns: 40px 1fr; row-gap: 6px; }
  .platform .status { grid-column: 2; }
}
.order-note { margin-top: clamp(40px, 5vw, 64px); font-size: .95rem; color: var(--stone); }
.order-note span[aria-hidden] { margin: 0 10px; color: var(--dim); }

/* ---------- Dishes ------------------------------------------------------- */
#bestsellers .head { margin-bottom: clamp(32px, 4vw, 56px); }
.dish-grid { display: grid; gap: 48px 32px; }
.dish { display: flex; flex-direction: column; }
.dish-media { overflow: hidden; background: var(--raise); aspect-ratio: 4 / 3; }
.dish-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.dish:hover .dish-media img { transform: scale(1.03); }
.dish-text { padding-top: 20px; display: flex; flex-direction: column; flex: 1; }
.dish h3 { font-family: var(--serif); font-weight: 400; font-size: 1.75rem; line-height: 1.1; letter-spacing: -.01em; }
.dish p { margin-top: 10px; color: var(--stone); font-size: 1rem; max-width: 30rem; flex: 1; }
.dish-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--rule); }
.price { font-weight: 600; font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.dish--feature .dish-media { aspect-ratio: 4 / 5; }
.dish--feature h3 { font-size: clamp(2.2rem, 3.4vw, 3rem); }
.dish--feature p { font-size: 1.08rem; }
@media (min-width: 900px) {
  .dish-grid { grid-template-columns: 7fr 5fr; grid-template-rows: auto auto; column-gap: clamp(32px, 4vw, 64px); row-gap: 56px; }
  .dish--feature { grid-row: 1 / span 2; }
  .dish--feature .dish-text { padding-top: 26px; flex: none; }
}

/* ---------- Menu --------------------------------------------------------- */
.menu-layout { display: block; }
.menu-main { min-width: 0; }
.menu-aside { display: none; }

/* Category bar: sticky under the header at every width */
.menu-nav {
  position: sticky; top: calc(var(--header-h) - 1px); z-index: 20; margin-inline: calc(-1 * var(--gutter)); margin-bottom: 28px;
  transition: transform .3s var(--ease);
  background: var(--black); border-block: 1px solid var(--rule);
}
.menu-nav-inner { overflow-x: auto; scrollbar-width: none; }
.menu-nav-inner::-webkit-scrollbar { display: none; }
.menu-nav ul { display: flex; gap: 2px; padding-inline: calc(var(--gutter) - 10px); width: max-content; }
.menu-nav a { display: block; position: relative; padding: 15px 10px; white-space: nowrap; font-size: .95rem; color: var(--stone); transition: color .15s; }
.menu-nav a:hover { color: var(--paper); }
.menu-nav a[aria-current] { color: var(--paper); }
.menu-nav-inner { position: relative; }
.menu-nav-indicator {
  position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--gold); opacity: 0; pointer-events: none;
  transition: transform .55s var(--ease-out), width .55s var(--ease-out), opacity .3s;
}
/* only while the bar is actually stuck to the top (site.js adds .is-stuck) */
@media (min-width: 1080px) { html.hdr-hidden .menu-nav.is-stuck { transform: translateY(calc(1px - var(--header-h))); } }
/* without JavaScript (no indicator), fall back to a plain underline */
.menu-nav:not(.has-indicator) a[aria-current]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; background: var(--gold); }

/* Filter */
.filter { margin-bottom: clamp(40px, 5vw, 64px); background: var(--raise); }
.filter summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 16px 20px; min-height: 54px; font-weight: 600; }
.filter summary::-webkit-details-marker { display: none; }
.filter summary svg { width: 18px; height: 18px; }
.filter summary .chev { margin-left: auto; transition: transform .25s var(--ease); }
.filter[open] summary .chev { transform: rotate(180deg); }
.filter summary .hint { font-weight: 400; color: var(--stone); }
@media (max-width: 640px) { .filter summary .hint { display: none; } }
.filter form { padding: 0 20px 20px; }
.filter fieldset { border: 0; margin: 8px 0 0; padding: 0; }
.filter legend { padding: 0; margin-bottom: 10px; font-size: .9rem; color: var(--stone); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; min-height: 38px; padding: 6px 16px; border: 1px solid var(--rule-2); border-radius: 99px; font-size: .95rem; transition: background-color .15s, border-color .15s; }
.chip input:hover + span { border-color: var(--paper); }
.chip input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.chip input:checked + span { background: var(--paper); border-color: var(--paper); color: var(--black); font-weight: 600; }
.chips--allergen input:checked + span { background: var(--raise-2); color: var(--paper); text-decoration: line-through; }
.filter-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.filter-foot p { font-size: .95rem; color: var(--stone); }
.filter-foot button { background: none; border: 0; padding: 8px 0; min-height: 40px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--rule-2); }

/* Each category is a row: the name and its terms on the left, the dishes on the right */
.menu-category { display: grid; gap: 18px; padding-top: 28px; border-top: 1px solid var(--rule-2); scroll-margin-top: calc(var(--header-h) + 64px); }
.menu-category + .menu-category { margin-top: clamp(56px, 6vw, 88px); }
@media (min-width: 1000px) {
  .menu-category { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: clamp(40px, 5vw, 80px); }
  .cat-head { position: sticky; top: calc(var(--header-h) + 76px); align-self: start; }
}
/* Phones and tablets (< 1000 px): each category folds to a single row (site.js adds .is-folding and
   a button inside the h3). Without JavaScript, and on desktop, every dish shows as before. The folded
   body is hidden="until-found", so find-in-page still reaches a dish in browsers that support it. */
@media (max-width: 999px) {
  .menu-main.is-folding .menu-category { gap: 0; padding-top: 0; }
  .menu-main.is-folding .menu-category + .menu-category { margin-top: 0; }
  .menu-main.is-folding .menu-category:last-of-type { border-bottom: 1px solid var(--rule-2); }
  .menu-main.is-folding .cat-head h3 { font-size: clamp(1.7rem, 7.2vw, 2.3rem); }
  .menu-main.is-folding .cat-count { display: none; }
  .menu-main.is-folding .cat-intro { margin: 0 0 18px; }
  .menu-main.is-folding .is-folded .cat-intro { display: none; }
  .menu-main.is-folding .cat-body { padding-bottom: 32px; }
}
.cat-toggle {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 66px; padding: 16px 0; margin: 0; border: 0; background: none;
  color: inherit; font: inherit; text-transform: inherit; letter-spacing: inherit; word-spacing: inherit; line-height: inherit; text-align: left; cursor: pointer;
}
.cat-toggle .cat-name { flex: 1 1 auto; min-width: 0; }
.cat-toggle .cat-n { flex: none; font-family: var(--f); font-stretch: 100%; font-weight: 400; font-size: .9rem; line-height: 1.2; letter-spacing: 0; word-spacing: 0; text-transform: none; color: var(--dim); }
.cat-toggle svg { flex: none; width: 22px; height: 22px; color: var(--stone); transition: transform .3s var(--ease); }
.cat-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.cat-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
/* desktop: the heading looks and behaves as before */
@media (min-width: 1000px) { .cat-toggle { display: inline; min-height: 0; padding: 0; cursor: default; pointer-events: none; } .cat-toggle .cat-n, .cat-toggle svg { display: none; } }
.cat-head h3 { font-stretch: var(--condensed); font-weight: 700; font-size: clamp(2.3rem, 4vw, 3.6rem); line-height: .9; text-transform: uppercase; letter-spacing: -.005em; word-spacing: .1em; }
.cat-intro { margin-top: 16px; color: var(--stone); font-size: 1rem; max-width: 22rem; }
.cat-count { margin-top: 10px; font-size: .9rem; color: var(--dim); }
.menu-group { margin-top: 32px; font-size: .95rem; font-weight: 600; color: var(--stone); }
.cat-body > .menu-group:first-child { margin-top: 0; }
.menu-items { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 48px; }
@media (min-width: 1320px) { .menu-items { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.menu-item { padding: 16px 0 17px; border-bottom: 1px solid var(--rule); }
.cat-body > .menu-items:first-child .menu-item:first-child { padding-top: 0; }
@media (min-width: 1320px) { .cat-body > .menu-items:first-child .menu-item:nth-child(2) { padding-top: 0; } }
.item-line { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.item-name { font-family: var(--serif); font-weight: 400; font-size: 1.28rem; line-height: 1.2; letter-spacing: -.005em; }
.item-name .diets { display: inline-flex; gap: 4px; margin-left: 8px; vertical-align: 3px; font-family: var(--f); }
.diet { display: inline-grid; place-items: center; min-width: 24px; height: 19px; padding: 0 6px; border: 1px solid var(--rule-2); border-radius: 99px; font-size: .64rem; font-weight: 600; letter-spacing: .03em; color: var(--stone); }
.item-price { flex: none; font-weight: 500; font-size: 1.05rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.item-desc { margin-top: 5px; color: var(--stone); font-size: .97rem; line-height: 1.5; max-width: 34rem; }
.item-allergens { margin-top: 6px; font-size: .85rem; color: var(--dim); }
.item-allergens .lbl { font-weight: 600; color: var(--stone); margin-right: 6px; }
/* Dishes sold in more than one size: each price carries its own label, so the row reads
   correctly in one column, two columns, or a screen reader. */
.item-line--sized { align-items: flex-end; flex-wrap: wrap; row-gap: 6px; }
.item-prices { display: inline-flex; gap: clamp(16px, 2vw, 24px); flex-shrink: 0; margin-left: auto; }
.item-price--sized { display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.item-price--sized .size { margin-bottom: 2px; font-size: .78rem; font-weight: 500; color: var(--dim); }

.legend { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: clamp(48px, 6vw, 72px); padding-top: 24px; border-top: 1px solid var(--rule); font-size: .95rem; color: var(--stone); }
.legend li { display: inline-flex; align-items: center; gap: 8px; }
.menu-actions { margin-top: 28px; }
.menu-disclaimer { margin-top: 28px; padding: 20px 22px; background: var(--raise); font-size: .95rem; color: var(--stone); line-height: 1.6; max-width: 52rem; }
.menu-disclaimer strong { color: var(--paper); font-weight: 600; }

/* ---------- Statement ---------------------------------------------------- */
.statement { background: var(--char); text-align: center; }
.statement-mark { width: 56px; height: 56px; margin: 0 auto; }
.statement-text {
  margin: clamp(28px, 3vw, 40px) auto 0; max-width: 19em;
  font-stretch: var(--condensed); font-weight: 600; font-size: clamp(2.1rem, 4.6vw, 4.2rem); line-height: 1.04; letter-spacing: -.006em; word-spacing: .14em; color: var(--paper);
  text-wrap: balance;
}
.pillars { display: grid; gap: 22px; margin: clamp(48px, 6vw, 80px) auto 0; max-width: 980px; }
.pillars li { display: grid; gap: 4px; }
.pillars .k { font-stretch: var(--condensed); font-weight: 700; font-size: 1.5rem; text-transform: uppercase; line-height: 1; word-spacing: .1em; }
.pillars .v { font-size: .97rem; color: var(--stone); }
@media (min-width: 720px) {
  .pillars { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .pillars li { padding: 6px 24px; }
  .pillars li + li { border-left: 1px solid var(--rule-2); }
}

/* ---------- Gallery ------------------------------------------------------ */
/* The gallery is its own page (gallery/): one photo per row on phones, two on tablets, three on desktop */
.gallery-grid { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.gallery .page-actions { margin-top: clamp(36px, 5vw, 56px); }
.visit-photos { margin-left: 4px; }
.gallery-item { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--raise); border-radius: var(--radius); }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.gallery-item:hover img { transform: scale(1.03); }
.gallery-cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 48px 18px 16px;
  background: linear-gradient(transparent, rgba(0, 0, 0, .85)); font-size: .92rem; line-height: 1.4; color: var(--paper);
  opacity: 0; transition: opacity .25s var(--ease);
}
.gallery-item:hover .gallery-cap, .gallery-item:focus-visible .gallery-cap { opacity: 1; }
@media (hover: none) { .gallery-cap { display: none; } }

/* ---------- Catering ----------------------------------------------------- */
.catering-grid { display: grid; gap: clamp(40px, 5vw, 80px); align-items: start; }
@media (min-width: 980px) { .catering-grid { grid-template-columns: 1fr 1fr; } }
.catering-copy .body-copy { margin-top: 22px; }
.catering-copy .btn-row { margin-top: 28px; }
.form-card { position: relative; background: var(--raise); border-radius: var(--radius); padding: clamp(24px, 3.6vw, 44px); }
.form-title { font-family: var(--serif); font-weight: 400; font-size: 1.75rem; line-height: 1.15; }
.form-intro { margin-top: 6px; color: var(--stone); font-size: .97rem; }
.fields { display: grid; gap: 20px; margin-top: 26px; }
@media (min-width: 560px) { .fields { grid-template-columns: 1fr 1fr; } .field--wide { grid-column: 1 / -1; } }
.field { display: grid; gap: 6px; }
.field label { font-size: .95rem; font-weight: 500; }
.field label .req { color: var(--stone); }
.field-input {
  width: 100%; min-height: 50px; padding: 12px 14px; border-radius: var(--radius);
  background: var(--black); border: 1px solid var(--rule-2); color: var(--paper);
  transition: border-color .15s;
}
.field-input:hover { border-color: rgba(243, 239, 231, .5); }
.field-input:focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold); }
.field-input[aria-invalid="true"] { border-color: var(--alert); }
select.field-input { appearance: none; -webkit-appearance: none; padding-right: 40px;
  background-image: linear-gradient(45deg, transparent 50%, var(--stone) 50%), linear-gradient(135deg, var(--stone) 50%, transparent 50%);
  background-position: calc(100% - 20px) 52%, calc(100% - 15px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
input[type="date"].field-input { color-scheme: dark; }
textarea.field-input { min-height: 130px; resize: vertical; line-height: 1.55; }
.field-error { font-size: .9rem; color: var(--alert); }
.form-card .btn { margin-top: 26px; }
.form-status { margin-top: 16px; padding: 14px 16px; font-size: .95rem; border: 1px solid var(--rule-2); border-radius: var(--radius); color: var(--paper); }
.form-status[data-tone="error"] { border-color: var(--alert); color: var(--alert); }
.form-fine { margin-top: 16px; font-size: .88rem; color: var(--dim); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Visit -------------------------------------------------------- */
#visit { border-top: 1px solid var(--rule); }
.visit-head { margin-bottom: clamp(56px, 7vw, 96px); }
.visit-head h2 { font-size: clamp(3rem, 8.6vw, 8.4rem); line-height: .86; letter-spacing: -.012em; max-width: 9em; }
.visit-head .lede { margin-top: 24px; }
.visit-head .btn-row { margin-top: 30px; }
.sign-figure { margin: 0 0 clamp(48px, 6vw, 72px); max-width: 760px; }
.sign-photo { aspect-ratio: 900 / 334; overflow: hidden; }
.sign-photo img { width: 100%; height: 100%; object-fit: cover; }
.sign-figure figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; margin-top: 12px; font-size: .95rem; color: var(--stone); }
.sign-figure figcaption strong { color: var(--paper); font-weight: 600; }
.visit-grid { display: grid; gap: 48px; }
@media (min-width: 980px) { .visit-grid { grid-template-columns: 1.05fr 1fr 1fr; gap: clamp(40px, 4vw, 72px); } }
.visit-col h3 { font-family: var(--serif); font-weight: 400; font-size: 1.6rem; padding-bottom: 12px; border-bottom: 1px solid var(--rule-2); }
.visit-col > .small { margin-top: 12px; }
.hours { margin: 8px 0 0; }
.hours div { display: flex; align-items: baseline; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--rule); }
.hours dt { color: var(--stone); }
.hours dd { margin: 0 0 0 auto; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.contact-list > div { padding: 14px 0; border-bottom: 1px solid var(--rule); display: grid; gap: 2px; }
.contact-list .k { font-size: .9rem; color: var(--dim); }
.contact-list .v, .contact-list address { font-size: 1.05rem; }
.contact-list a { text-decoration: underline; text-decoration-color: var(--rule-2); text-underline-offset: 4px; }
.contact-list a:hover { text-decoration-color: var(--paper); }
.visit-line { margin-top: 14px; color: var(--stone); }

/* ---------- Footer ------------------------------------------------------- */
.footer { position: relative; background: var(--black); border-top: 1px solid var(--rule); padding-block: clamp(64px, 8vw, 104px) 28px; }
.footer-top { display: grid; gap: 44px; }
@media (min-width: 900px) { .footer-top { grid-template-columns: 1.3fr 1fr 1fr; } }
.footer-brand img { width: 112px; height: 112px; }
.footer-brand p { margin-top: 20px; max-width: 24rem; color: var(--stone); }
.footer h3 { font-size: 1rem; margin-bottom: 12px; }
.footer address, .footer p, .footer li { color: var(--stone); font-size: 1rem; line-height: 1.8; }
.footer li a:hover, .footer p a:hover, .footer address a:hover { color: var(--paper); }
.socials { display: flex; gap: 10px; margin-top: 22px; }
.socials a { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--rule-2); border-radius: 50%; color: var(--paper); transition: border-color .2s; }
.socials a:hover { border-color: var(--paper); }
.socials svg { width: 18px; height: 18px; }
.footer-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: clamp(56px, 7vw, 88px); padding-top: 22px; border-top: 1px solid var(--rule); font-size: .88rem; color: var(--dim); }
.footer-legal p { font-size: .88rem; color: var(--dim); line-height: 1.6; }
.footer-legal a:hover { color: var(--paper); }
.footer-studio { position: absolute; right: 14px; bottom: 8px; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); opacity: .32; text-decoration: none; transition: opacity .2s, color .2s; }
.footer-studio:hover, .footer-studio:focus-visible { opacity: 1; color: var(--paper); }
.footer--slim { padding-block: 32px; }
.footer--slim .footer-legal { margin-top: 0; border-top: 0; padding-top: 0; }

/* ---------- Order bar (mobile) ------------------------------------------ */
.order-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: grid; grid-template-columns: 1.5fr 1fr; gap: 8px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: var(--black); border-top: 1px solid var(--rule);
  transform: translateY(110%); transition: transform .35s var(--ease);
}
.order-bar.is-visible { transform: none; }
.order-bar .btn { min-height: 48px; padding-inline: 14px; }
@media (min-width: 1080px) { .order-bar { display: none; } }

/* ---------- Lightbox -----------------------------------------------------
   Native <dialog> in the top layer (js/site.js). The photos fill the whole screen in a swipeable
   scroll-snap track (object-fit: contain, so portrait and landscape both get the most space the
   screen allows); the count/close bar and the arrows/caption bar float over the top and bottom
   edges on a soft shade. On phones that lets a portrait photo run the full width of the screen.
   env(safe-area-*) keeps the controls clear of the notch and the home bar. */
.lightbox {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: var(--black); color: var(--paper); overflow: hidden;
}
.lightbox[open] { display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); animation: lightbox-in .22s var(--ease); }
.lightbox > * { grid-area: 1 / 1; }
@keyframes lightbox-in { from { opacity: 0; } to { opacity: 1; } }
.lightbox::backdrop { background: var(--black); }
html:has(.lightbox[open]) { overflow: hidden; }
.lightbox-top {
  position: relative; z-index: 1; align-self: start; pointer-events: none; background: linear-gradient(rgba(0, 0, 0, .62), rgba(0, 0, 0, 0));
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) 4px max(18px, env(safe-area-inset-left));
}
.lightbox-count { font-size: .9rem; color: var(--stone); font-variant-numeric: tabular-nums; }
.lightbox-track {
  display: flex; height: 100%; min-height: 0; overflow-x: auto; overflow-y: hidden; outline: none;
  scroll-snap-type: x mandatory; overscroll-behavior: contain; scrollbar-width: none;
}
.lightbox-track::-webkit-scrollbar { display: none; }
.lightbox-slide { flex: 0 0 100%; min-width: 0; height: 100%; margin: 0; scroll-snap-align: center; scroll-snap-stop: always; }
.lightbox-slide img { width: 100%; height: 100%; max-width: none; object-fit: contain; }
@media (min-width: 760px) { .lightbox-slide { padding: 68px clamp(16px, 4vw, 72px) 92px; } }
.lightbox-bottom {
  position: relative; z-index: 1; align-self: end; pointer-events: none; background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .72) 45%);
  display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; align-items: center; gap: 12px;
  padding: 28px max(10px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
}
.lightbox-caption { min-height: 2.8em; color: var(--paper); display: grid; place-items: center; text-align: center; font-size: .95rem; line-height: 1.4; }
.lightbox-btn {
  width: 48px; height: 48px; display: grid; place-items: center; padding: 0; cursor: pointer;
  border-radius: 50%; border: 1px solid var(--rule-2); background: rgba(0, 0, 0, .35); color: var(--paper);
  transition: border-color .2s, opacity .2s; pointer-events: auto;
}
.lightbox-btn:hover { border-color: var(--paper); }
.lightbox-btn:disabled { opacity: .25; cursor: default; border-color: var(--rule-2); pointer-events: none; }
.lightbox-btn svg { width: 20px; height: 20px; }
.lightbox-close { border-color: transparent; }

/* ---------- Limited-time offer (build.py PROMO_*) -----------------------
   A flat gold strip above the header on every page, plus a pop-up on the first page view of a
   visit (js/site.js). Gold is allowed here: it is the offer. The strip scrolls away with the page;
   the pop-up is a native <dialog> (focus trap, Esc to close). */
:root { --promo-h: 44px; }
@media (max-width: 759px) { :root { --promo-h: 40px; } }
.promo-strip { position: relative; z-index: 61; background: var(--gold); color: var(--black); }
.promo-strip-inner { display: flex; align-items: center; justify-content: center; gap: 18px; height: var(--promo-h); }
.promo-strip p { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 600; font-size: .97rem; line-height: 1.2; }
.promo-strip .promo-short { display: none; }
@media (max-width: 959px) {
  .promo-strip-inner { gap: 10px; }
  .promo-strip p { font-size: .9rem; }
  .promo-strip .promo-now { display: none; }
  .promo-strip .promo-long { display: none; }
  .promo-strip .promo-short { display: inline; }
}
.promo-strip-link { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; font-weight: 700; font-size: .95rem;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
@media (max-width: 959px) { .promo-strip-link { font-size: .9rem; } }
.promo-strip-link svg { width: 15px; height: 15px; transition: transform .25s var(--ease); }
.promo-strip-link:hover svg { transform: translateX(3px); }
.promo-strip-link:focus-visible { outline-color: var(--black); }
body.has-promo .hero { min-height: min(940px, calc(100svh - var(--promo-h))); }
body.has-promo .drawer { padding-top: calc(var(--header-h) + var(--promo-h) + 12px); }

.promo-dialog { width: min(560px, calc(100% - 32px)); max-width: none; max-height: calc(100% - 32px); margin: auto; padding: 0; border: 0; background: transparent; color: var(--paper); overflow: visible; }
.promo-dialog::backdrop { background: rgba(0, 0, 0, .78); }
html:has(.promo-dialog[open]) { overflow: hidden; }
.promo-card { position: relative; outline: none; max-height: calc(100svh - 32px); overflow-y: auto; padding: clamp(28px, 5vw, 48px); background: var(--char); border: 1px solid var(--rule-2); border-radius: var(--radius); }
.promo-close { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; background: none; border: 0; color: var(--stone); border-radius: 50%; transition: color .2s; }
.promo-close:hover { color: var(--paper); }
.promo-close svg { width: 22px; height: 22px; }
.promo-kicker { color: var(--stone); font-size: .97rem; }
.promo-title { margin-top: 8px; font-size: clamp(4rem, 15vw, 6.6rem); line-height: .86; letter-spacing: -.012em; color: var(--gold); }
.promo-lede { margin-top: 20px; font-size: clamp(1.06rem, 1.4vw, 1.2rem); line-height: 1.5; color: var(--paper); max-width: 28rem; }
.promo-card .btn-row { margin-top: 28px; }
.promo-terms { margin-top: 20px; font-size: .88rem; line-height: 1.5; color: var(--dim); }
@media (max-width: 420px) { .promo-card .btn-row .btn { flex: 1 1 100%; } }
@keyframes promo-in { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes promo-fade { from { opacity: 0; } to { opacity: 1; } }
.promo-dialog[open] { animation: promo-in .5s var(--ease-out) backwards; }
.promo-dialog[open]::backdrop { animation: promo-fade .35s var(--ease) backwards; }

/* ---------- Motion -------------------------------------------------------
   Three kinds, and nothing else:
   1. a short opening splash on the first page view of a visit (CSS only; js/splash.js skips repeats);
   2. reveals as things arrive on screen (site.js adds .is-revealed);
   3. responses to what you do (hovers, the drawer, the menu bar).
   Only opacity and transform are ever animated, so the graphics card does the work
   and scrolling never waits on layout or paint. All of it switches off under
   prefers-reduced-motion, and noscript.css shows everything if JavaScript never runs. */

/* 1. Opening splash. The hero underneath is static and loads at full speed behind it; the splash never
   takes clicks (pointer-events: none), and hides itself at 1.5 s even if JavaScript never runs. */
@keyframes fade-down { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes splash-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes splash-draw { to { transform: scaleX(1); } }
@keyframes splash-fade { to { opacity: 0; transform: scale(.98); } }
@keyframes splash-door-l { to { transform: translateX(-100%); } }
@keyframes splash-door-r { to { transform: translateX(100%); } }
@keyframes splash-gone { to { visibility: hidden; } }
.splash { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; pointer-events: none;
  animation: splash-gone 0s linear 1.5s forwards; }
.splash::before, .splash::after { content: ""; position: absolute; top: 0; bottom: 0; width: 50.5%; background: var(--black); }
.splash::before { left: 0; animation: splash-door-l .65s var(--ease-io) .85s forwards; }
.splash::after { right: 0; animation: splash-door-r .65s var(--ease-io) .85s forwards; }
.splash-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center;
  animation: splash-fade .3s var(--ease) .72s forwards; }
.splash-mark { width: clamp(76px, 8vw, 112px); height: clamp(76px, 8vw, 112px); opacity: 0; animation: splash-in .6s var(--ease-out) .05s forwards; }
.splash-word { margin-top: 22px; padding-left: .42em; font-weight: 600; font-size: clamp(1.1rem, 1.5vw, 1.4rem); letter-spacing: .42em; color: var(--gold);
  opacity: 0; animation: splash-in .6s var(--ease-out) .14s forwards; }
.splash-rule { display: block; width: clamp(120px, 12vw, 168px); height: 1px; margin-top: 18px; background: var(--gold); transform: scaleX(0);
  animation: splash-draw .55s var(--ease-io) .22s forwards; }
.splash-sub { margin-top: 16px; font-size: clamp(.82rem, 1vw, .95rem); color: var(--stone); opacity: 0; animation: splash-in .6s var(--ease-out) .3s forwards; }
html.no-splash .splash { display: none; }

/* 2. Reveals */
[data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity .9s var(--ease-out), transform 1.1s var(--ease-out); }
[data-reveal].is-revealed { opacity: 1; transform: none; }
[data-reveal][data-reveal-stagger] { opacity: 1; transform: none; }
[data-reveal-stagger] > * { opacity: 0; transform: translateY(20px); transition: opacity .9s var(--ease-out), transform 1.1s var(--ease-out); }
[data-reveal-stagger].is-revealed > * { opacity: 1; transform: none; }
[data-reveal-stagger].is-revealed > *:nth-child(2) { transition-delay: .12s; }
[data-reveal-stagger].is-revealed > *:nth-child(3) { transition-delay: .24s; }
[data-reveal-stagger].is-revealed > *:nth-child(4) { transition-delay: .36s; }
[data-reveal-stagger].is-revealed > *:nth-child(5) { transition-delay: .48s; }

/* Dish photographs fade up and settle out of a slight zoom (GPU-only properties) */
.dish-media img { opacity: 0; transform: scale(1.06); transition: opacity 1.1s var(--ease-out), transform 1.6s var(--ease-out); }
.dish-grid.is-revealed .dish-media img { opacity: 1; transform: none; }
.dish-grid.is-revealed > :nth-child(2) .dish-media img { transition-delay: .12s; }
.dish-grid.is-revealed > :nth-child(3) .dish-media img { transition-delay: .24s; }
.dish-grid.is-revealed .dish:hover .dish-media img { transform: scale(1.03); transition: transform 1.2s var(--ease-out); }

/* Menu: each section eases in as a whole */
.menu-category[data-reveal] { transform: translateY(24px); }

/* The statement lights up word by word as you scroll through it (site.js) */
.statement-text.is-scrub .sw { opacity: .2; transition: opacity .5s var(--ease); }
.statement-text.is-scrub .sw.on { opacity: 1; }

/* 3. Responses */
.drawer-link { opacity: 0; transform: translateY(16px); transition: opacity .5s var(--ease-out), transform .7s var(--ease-out); }
.drawer.is-open .drawer-link { opacity: 1; transform: none; }
.drawer.is-open .drawer-link:nth-child(2) { transition-delay: .05s; }
.drawer.is-open .drawer-link:nth-child(3) { transition-delay: .1s; }
.drawer.is-open .drawer-link:nth-child(4) { transition-delay: .15s; }
.drawer.is-open .drawer-link:nth-child(5) { transition-delay: .2s; }
.filter[open] form { animation: fade-down .45s var(--ease-out); }

/* Moving between pages: a quiet crossfade where the browser supports it */
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: reduce) {
  .splash { display: none !important; }
  [data-reveal], [data-reveal-stagger] > *, .drawer-link, .dish-media img { opacity: 1 !important; transform: none !important; }
  .statement-text .sw { opacity: 1 !important; }
  html.hdr-hidden .site-header, html.hdr-hidden .menu-nav { transform: none; }
  @view-transition { navigation: none; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- Information page -------------------------------------------- */
.page-hero { padding-block: clamp(56px, 8vw, 104px) clamp(40px, 5vw, 64px); border-bottom: 1px solid var(--rule); }
.page-hero .lede { margin-top: 22px; }
.info-layout { display: grid; gap: 40px; }
@media (min-width: 980px) { .info-layout { grid-template-columns: 220px minmax(0, 1fr); gap: 88px; } .toc { position: sticky; top: calc(var(--header-h) + 28px); align-self: start; } }
.toc a { display: block; padding: 6px 0; color: var(--stone); }
.toc a:hover { color: var(--paper); }
.prose { max-width: 42rem; color: var(--stone); }
.prose section + section { margin-top: clamp(56px, 6vw, 88px); }
.prose h2 { font-size: clamp(2rem, 3.4vw, 2.8rem); padding-bottom: 14px; border-bottom: 1px solid var(--rule-2); margin-bottom: 22px; }
.prose h3 { font-family: var(--serif); font-weight: 400; font-size: 1.45rem; color: var(--paper); margin: 32px 0 10px; }
.prose p + p { margin-top: 1em; }
.prose a { color: var(--paper); text-decoration: underline; text-decoration-color: var(--rule-2); text-underline-offset: 4px; }
.prose a:hover { text-decoration-color: var(--paper); }
.prose ul { padding-left: 1.1em; }
.prose li { padding: 4px 0; }
.prose li::marker { color: var(--dim); }
.prose strong { color: var(--paper); font-weight: 600; }
.callout { margin: 26px 0; padding: 22px 24px; background: var(--raise); border-radius: var(--radius); }
.callout p + p { margin-top: .8em; }
.placeholder-note { color: var(--alert); }
.company { margin: 0; }
.company div { display: grid; grid-template-columns: 1fr; gap: 2px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
@media (min-width: 560px) { .company div { grid-template-columns: 180px 1fr; gap: 20px; } }
.company dt { color: var(--dim); }
.company dd { margin: 0; color: var(--paper); }
.page-actions { margin-top: 56px; }
.nav--always { display: flex; }
@media (max-width: 640px) { .nav--always a:not(.btn) { display: none; } }

/* ---------- Thanks ------------------------------------------------------- */
.thanks { min-height: 100svh; display: grid; place-items: center; text-align: center; padding: 64px var(--gutter); }
.thanks img { width: 128px; height: 128px; margin: 0 auto 36px; }
.thanks h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); }
.thanks p { margin: 22px auto 0; max-width: 32rem; color: var(--stone); }
.thanks .btn-row { justify-content: center; margin-top: 36px; }

/* ---------- Mobile ------------------------------------------------------- */
@media (max-width: 1079px) {
  body { padding-bottom: 76px; }
}

/* ---------- Print -------------------------------------------------------- */
@media print {
  .splash, .site-header, .drawer, .order-bar, .gallery, .lightbox, .filter, .menu-nav, .menu-aside, .hero-media { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ---------- Book a table (Square) ----------------------------------------- */
#book { border-top: 1px solid var(--rule); }
.book-grid { display: grid; gap: clamp(40px, 5vw, 96px); align-items: start; }
@media (min-width: 980px) { .book-grid { grid-template-columns: 1fr 1fr; } }
.book-copy .lede { margin-top: 22px; }
.book-facts { margin: 36px 0 0; border-top: 1px solid var(--rule-2); }
.book-facts div { display: grid; gap: 2px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
@media (min-width: 560px) { .book-facts div { grid-template-columns: 170px 1fr; gap: 20px; } }
.book-facts dt { color: var(--dim); }
.book-facts dd { margin: 0; }
.book-card { display: grid; gap: 14px; padding: clamp(26px, 3.6vw, 44px); background: var(--raise); }
.book-title { font-family: var(--serif); font-weight: 400; font-size: 1.9rem; line-height: 1.1; }
.book-intro { color: var(--stone); margin-bottom: 10px; }
.book-fine { font-size: .92rem; color: var(--dim); }
.book-embed { min-height: 420px; }
.book-embed iframe { width: 100%; min-height: 600px; border: 0; }

/* ---------- Online offer ------------------------------------------------- */
/* Top of the menu: one line between hairlines. A fine gold line draws across as it arrives. */
.offer {
  position: relative; display: grid; grid-template-columns: auto 1fr; gap: 6px 20px; align-items: center;
  margin-bottom: clamp(28px, 3.5vw, 44px); padding: 22px 0; border-block: 1px solid var(--rule);
}
.offer::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.6s var(--ease-out) .2s;
}
.offer.is-revealed::before { transform: scaleX(1); }
.offer-figure {
  color: var(--gold); font-stretch: var(--condensed); font-weight: 600;
  font-size: clamp(2.2rem, 3.4vw, 2.9rem); line-height: .9; letter-spacing: -.01em;
}
.offer-line { font-family: var(--serif); font-weight: 350; font-size: clamp(1.15rem, 1.6vw, 1.4rem); line-height: 1.3; color: var(--paper); }
.offer-terms { display: block; margin-top: 3px; font-family: var(--f); font-size: .88rem; line-height: 1.45; color: var(--dim); }
.offer-link { grid-column: 1 / -1; justify-self: start; margin-top: 8px; color: var(--paper); }
@media (min-width: 900px) {
  .offer { grid-template-columns: auto 1fr auto; gap: 0 28px; }
  .offer-link { grid-column: auto; margin-top: 0; }
}
.offer-link svg { transition: transform .45s var(--ease-out); }
.offer-link:hover svg { transform: translateX(4px); }

/* End of the menu: a quiet note beside the button */
.offer-note { font-size: .95rem; color: var(--stone); }
.offer-note strong { color: var(--gold); font-weight: 600; }

/* Ordering rows that are live become links */
a.platform .platform-name { transition: transform .5s var(--ease-out); }
a.platform:hover .platform-name { transform: translateX(4px); }
a.platform .status { display: inline-flex; align-items: center; gap: 8px; color: var(--paper); font-weight: 500; }
a.platform .status svg { width: 16px; height: 16px; flex: none; transition: transform .45s var(--ease-out); }
a.platform:hover .status svg { transform: translateX(3px); }
.platform--direct.is-live .status { color: var(--gold); }

/* ---------- Booking preview (preview build only) -------------------------- */
.bp { display: grid; gap: 12px; }
.bp-tag {
  justify-self: start; padding: 5px 12px; border: 1px solid var(--gold); border-radius: 99px;
  font-size: .82rem; font-weight: 500; color: var(--gold);
}
.bp-label { margin-top: 6px; font-size: .9rem; color: var(--dim); }
.bp-guests { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 4px; padding: 10px 0; border-block: 1px solid var(--rule); }
.bp-guests .bp-label { margin-top: 0; }
.bp-stepper { display: inline-flex; align-items: center; gap: 4px; }
.bp-stepper button { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--rule-2); background: none; color: var(--paper); font-size: 1.2rem; line-height: 1; transition: border-color .2s; }
.bp-stepper button:hover { border-color: var(--paper); }
.bp-stepper output { min-width: 2.2em; text-align: center; font-weight: 600; font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.bp-dates { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.bp-date {
  display: grid; justify-items: center; gap: 2px; padding: 10px 0; border: 1px solid var(--rule-2); border-radius: var(--radius);
  background: none; color: var(--paper); transition: border-color .2s, background-color .2s, color .2s;
}
.bp-dow { font-size: .75rem; color: var(--stone); }
.bp-day { font-weight: 600; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.bp-times { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.bp-time {
  padding: 10px 0; border: 1px solid var(--rule-2); border-radius: var(--radius); background: none; color: var(--paper);
  font-weight: 500; font-variant-numeric: tabular-nums; transition: border-color .2s, background-color .2s, color .2s;
}
.bp-time:disabled { color: var(--dim); border-color: var(--rule); text-decoration: line-through; cursor: not-allowed; }
.bp-date:hover, .bp-time:not(:disabled):hover { border-color: var(--paper); }
.bp-date[aria-pressed="true"], .bp-time[aria-pressed="true"] { background: var(--paper); border-color: var(--paper); color: var(--black); }
.bp-date[aria-pressed="true"] .bp-dow { color: var(--black); }
.bp [data-bp-submit] { margin-top: 10px; }
.bp-status { padding: 12px 14px; border: 1px solid var(--rule-2); font-size: .95rem; color: var(--paper); }
@media (max-width: 420px) { .bp-dates { gap: 4px; } .bp-dow { font-size: .68rem; } .bp-times { grid-template-columns: repeat(3, minmax(0, 1fr)); } }