/* ============================================================
   SALT & ROOST — Design System v3
   Goal: help someone decide, right now, to walk in.

   The photography is documentary, not food-hero: cooks at the pass,
   flame off the pan, the sign, the pavement tables. So the design
   treats *craft and place* as the appetite cue, unifies every frame
   with one grade + one grain layer, and lets captions do the work
   that a plated hero shot would otherwise do.
   See DESIGN_SYSTEM.md.
   ============================================================ */

:root {
  /* --- COLOUR: two neutrals + ONE accent -------------------
     Warm near-black grounds the photography; a single flame accent
     is reserved for the action we want (Get Directions). Text is
     off-white on warm charcoal — never #FFF on #000, which halates. */
  --ink:        #14100E;   /* near-black warm — primary dark ground */
  --ink-2:      #1E1812;   /* raised dark surface / cards            */
  --ink-3:      #2A211A;   /* hover / borders on dark                */
  --paper:      #F4EBDB;   /* warm "printed menu" light ground       */
  --paper-2:    #EBDFCB;   /* secondary paper                        */
  --cream:      #F7EFE3;   /* text on dark                           */
  --cream-dim:  rgba(247, 239, 227, 0.66);
  --cream-faint:rgba(247, 239, 227, 0.14);
  --ink-dim:    rgba(20, 16, 14, 0.70);
  --ink-faint:  rgba(20, 16, 14, 0.12);

  /* ONE accent, two cuts. --flame is the display cut: eyebrows, rules,
     italics on dark grounds, where 5.2:1 against ink clears WCAG.
     --flame-deep is the working cut for interactive surfaces and any
     flame-coloured TEXT on paper: white sits on it at 6.1:1, and it sits
     on the paper tones at 4.6–5.2:1. Bright #E4591B fails both (3.7 and
     3.1) — one orange everywhere would mean an inaccessible one. */
  --flame:      #E4591B;   /* display accent on dark grounds            */
  --flame-deep: #AD3D0B;   /* buttons, strip, chips, orange-on-paper    */
  --flame-2:    #96350A;   /* pressed/hover state of --flame-deep       */
  --ember:      #E9A23B;   /* gold micro-accent: open-now, focus rings  */
  --herb:       #6E8B4E;

  /* --- TYPE -------------------------------------------------
     Fraunces (warm display serif, variable optical size) for
     headlines, Oswald (condensed) for labels/prices, Inter body. */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-label:   "Oswald", "Arial Narrow", sans-serif;
  --font-body:    "Inter", system-ui, sans-serif;

  /* Fluid modular scale (Perfect Fourth ~1.333 anchors, clamped) */
  --fs-eyebrow: 0.78rem;
  --fs-sm:      0.9rem;
  --fs-base:    1.05rem;
  --fs-md:      clamp(1.15rem, 1.6vw, 1.33rem);
  --fs-lg:      clamp(1.4rem, 2.4vw, 1.85rem);
  --fs-xl:      clamp(1.9rem, 4vw, 2.7rem);
  --fs-2xl:     clamp(2.4rem, 6vw, 4rem);
  --fs-hero:    clamp(2.7rem, 6.4vw, 4.7rem);

  --lh-tight: 1.02;
  --lh-snug:  1.18;
  --lh-body:  1.7;
  --tracking-label: 0.22em;

  /* --- SPACING: 8px grid ----------------------------------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 16px; --s-4: 24px; --s-5: 32px;
  --s-6: 48px; --s-7: 64px; --s-8: 96px; --s-9: 128px; --s-10: 168px;

  /* --- RADIUS / SHADOW / MOTION ----------------------------- */
  --r-sm: 4px; --r-md: 10px; --r-lg: 18px; --r-pill: 100px;
  --shadow-md: 0 12px 30px rgba(0,0,0,0.28);
  --shadow-lg: 0 30px 80px rgba(0,0,0,0.45);
  --t-fast: 140ms; --t-base: 260ms; --t-slow: 400ms;   /* nothing exceeds 400ms */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  --maxw: 1240px;
  --gutter: clamp(20px, 5vw, 64px);
  --golden-major: 61.8%;
  --golden-minor: 38.2%;

  /* One grade for every photograph on the page. Documentary frames
     shot under different light are pulled into a single look here. */
  --photo-grade: saturate(0.9) contrast(1.06) brightness(1.02);
}

/* ============================================================ RESET */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; color-scheme: dark; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--cream);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }
button { font: inherit; color: inherit; cursor: pointer; border: none; background: none; }
svg { display: block; }
p { text-wrap: pretty; }
.icon { width: 1.25em; height: 1.25em; stroke: currentColor; stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.icon--fill { fill: currentColor; stroke: none; }

/* Keyboard focus is visible everywhere, in the gold micro-accent so it
   never competes with the flame call-to-action. */
:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; border-radius: var(--r-sm); }

/* Selection in the brand's working orange — white on it is 6.1:1 */
::selection { background: var(--flame-deep); color: #fff; }

/* Anchor targets clear the fixed header when scrolling up to them */
section[id] { scroll-margin-top: 84px; }

.skip-link {
  position: absolute; left: var(--s-3); top: -100px; z-index: 300;
  background: var(--flame); color: #fff; padding: 12px 20px; border-radius: var(--r-pill);
  font-family: var(--font-label); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.8rem;
  transition: top var(--t-base) var(--ease);
}
.skip-link:focus { top: var(--s-3); }

/* Film grain: ONE fixed layer for the whole page, not one per image.
   Adds tactility to candid frames and hides compression mush. */
.grain {
  position: fixed; inset: 0; z-index: 200; pointer-events: none;
  opacity: 0.04; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================ LAYOUT */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--s-9); position: relative; }
.section--dark  { background: var(--ink);   color: var(--cream); }
.section--ink2  { background: var(--ink-2);  color: var(--cream); }
.section--paper { background: var(--paper); color: var(--ink); }
/* the menu sheet sits on a slightly deeper paper so the card reads as a card */
#menu { background: var(--paper-2); }
.menu-page .menu-page__section { padding-top: calc(var(--s-9) + 84px); min-height: 100svh; }

.eyebrow {
  font-family: var(--font-label);
  font-weight: 500;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--flame);
  display: inline-flex; align-items: center; gap: var(--s-2);
}
.eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--flame); display: inline-block; }
.eyebrow.center { justify-content: center; }
.eyebrow.center::after { content: ""; width: 28px; height: 1px; background: currentColor; display: inline-block; }
/* on paper grounds the bright cut reads 3.1:1 — swap to the deep cut */
.section--paper .eyebrow { color: var(--flame-deep); }
.section--paper .eyebrow::before { background: var(--flame-deep); }

h1, h2, h3 {
  font-family: var(--font-display); font-weight: 550;
  line-height: var(--lh-tight); letter-spacing: -0.015em;
  font-optical-sizing: auto;
  text-wrap: balance;
}
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-lg); }
.section-head { max-width: 620px; margin-bottom: var(--s-7); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head h2 { margin-top: var(--s-3); }
.section-head .lede { margin-top: var(--s-4); font-size: var(--fs-md); color: var(--cream-dim); }
.section--paper .section-head .lede { color: var(--ink-dim); }

/* ============================================================ BUTTONS
   The single most important action wears the lone flame accent. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 56px; padding: 0 var(--s-5);
  font-family: var(--font-label); font-weight: 500; font-size: 1rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  border-radius: var(--r-pill);
  transition: transform var(--t-fast) var(--ease), background var(--t-base) var(--ease),
              color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.btn .icon { width: 1.15em; height: 1.15em; stroke-width: 1.8; }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--flame-deep); color: #fff; box-shadow: 0 10px 30px rgba(173,61,11,0.36); }
.btn--primary:hover { background: var(--flame-2); box-shadow: 0 14px 38px rgba(173,61,11,0.48); transform: translateY(-2px); }
.btn--ghost { background: transparent; color: var(--cream); border: 1.5px solid var(--cream-faint); }
.btn--ghost:hover { border-color: var(--cream); background: color-mix(in oklab, var(--cream) 6%, transparent); }
.section--paper .btn--ghost { color: var(--ink); border-color: var(--ink-faint); }
.section--paper .btn--ghost:hover { border-color: var(--ink); background: color-mix(in oklab, var(--ink) 4%, transparent); }
.btn--solid-cream { background: var(--cream); color: var(--ink); }
.btn--solid-cream:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn--lg { min-height: 64px; padding-inline: var(--s-6); font-size: 1.05rem; }

.link-arrow {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-label); text-transform: uppercase; letter-spacing: 0.1em;
  font-size: var(--fs-sm); color: var(--flame);
}
.link-arrow .icon { transition: transform var(--t-base) var(--ease); }
.link-arrow:hover .icon { transform: translateX(5px); }

/* ============================================================ LIVE STATUS PILL
   Three states only: open / opening soon / closed. There is no
   "closing soon", because the shop has never published a closing time. */
.status {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-label); font-size: var(--fs-sm); letter-spacing: 0.08em; text-transform: uppercase;
  padding: 8px 16px; border-radius: var(--r-pill);
  border: 1px solid var(--cream-faint); background: rgba(0,0,0,0.48); backdrop-filter: blur(6px);
  color: var(--cream);
}
.status__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ember); flex: 0 0 9px; }
.status--open .status__dot { background: #5FBF6A; animation: pulse 2.2s infinite; }
.status--soon .status__dot { background: var(--ember); }
.status--closed .status__dot { background: #C76B54; }
.status b { font-weight: 500; color: #fff; }
.section--paper .status { background: color-mix(in oklab, var(--ink) 4%, transparent); border-color: var(--ink-faint); color: var(--ink); }
.section--paper .status b { color: var(--ink); }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(95,191,106,0.55)} 70%{box-shadow:0 0 0 9px rgba(95,191,106,0)} 100%{box-shadow:0 0 0 0 rgba(95,191,106,0)} }

/* ============================================================ NAV
   Sticky, but it retreats on scroll-down so the header and the sticky
   mobile action bar never eat the viewport at the same time. */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s-4) var(--gutter);
  transition: background var(--t-base) var(--ease), padding var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.nav--scrolled { background: rgba(20,16,14,0.86); backdrop-filter: blur(14px); padding-block: var(--s-3); box-shadow: 0 1px 0 var(--cream-faint); }
.nav--hidden { transform: translateY(-115%); }
.brand { display: flex; align-items: center; gap: var(--s-3); }
.brand img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px var(--cream-faint); }
.brand__name { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; letter-spacing: -0.01em; color: var(--cream); line-height: 1; }
.brand__tag { display: block; font-family: var(--font-label); font-size: 0.62rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ember); margin-top: 3px; }
.nav__links { display: flex; align-items: center; gap: var(--s-5); }
.nav__links a { font-family: var(--font-label); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.85rem; color: var(--cream); position: relative; padding-block: 4px; }
.nav__links a::after { content:""; position:absolute; left:0; bottom:0; width:0; height:1.5px; background: var(--flame); transition: width var(--t-base) var(--ease); }
.nav__links a:hover::after { width: 100%; }
.nav__right { display: flex; align-items: center; gap: var(--s-4); }
/* position + z-index: the open drawer (.nav__links, position:fixed) otherwise
   paints over the static toggle and eats its taps — an X you can't press. */
.nav__toggle { display: none; width: 48px; height: 48px; flex-direction: column; align-items: center; justify-content: center; gap: 6px; position: relative; z-index: 2; }
.nav__toggle span { width: 26px; height: 2px; background: var(--cream); transition: transform var(--t-base) var(--ease), opacity var(--t-base) var(--ease); }
.menu-page .nav:not(.nav--scrolled) .brand__name,
.menu-page .nav:not(.nav--scrolled) .nav__links a { color: var(--ink); }
.menu-page .nav:not(.nav--scrolled) .nav__toggle span { background: var(--ink); }

/* ============================================================ HERO
   Full-bleed flame, with a bottom scrim so the headline always clears
   WCAG contrast regardless of what the photograph is doing behind it. */
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; }
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media picture { display: block; width: 100%; height: 100%; }
.hero__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 52%;
  filter: saturate(0.95) contrast(1.06) brightness(1.06);
  transform: scale(1.05); animation: heroZoom 18s ease-out forwards;
}
@keyframes heroZoom { to { transform: scale(1); } }
.hero__media::after {
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(20,16,14,0.60) 0%, rgba(20,16,14,0.22) 30%, rgba(20,16,14,0.58) 66%, rgba(20,16,14,0.96) 100%),
    radial-gradient(110% 80% at 8% 108%, rgba(20,16,14,0.45), transparent 62%);
}
.hero__inner { width: 100%; padding-bottom: var(--s-7); padding-top: var(--s-9); }
.hero__content { max-width: min(640px, 100%); }
.hero .eyebrow { color: var(--ember); }
.hero .eyebrow::before { background: var(--ember); }
.hero h1 { font-size: var(--fs-hero); font-weight: 550; margin: var(--s-3) 0 var(--s-4); }
.hero h1 em { font-style: italic; color: var(--flame); }
.hero__sub { font-size: var(--fs-md); color: rgba(247,239,227,0.92); max-width: 44ch; margin-bottom: var(--s-5); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.hero__statusline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--cream-faint); }
.hero__fact { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--fs-sm); color: var(--cream-dim); }
.hero__fact .icon { color: var(--ember); width: 18px; height: 18px; }
.hero__fact a:hover { color: var(--cream); }
.scroll-cue { position: absolute; left: 50%; bottom: var(--s-5); transform: translateX(-50%); color: var(--cream-dim); display: grid; place-items: center; gap: 6px; font-family: var(--font-label); font-size: 0.65rem; letter-spacing: 0.25em; text-transform: uppercase; }
.scroll-cue .icon { animation: bob 2s var(--ease) infinite; }
@keyframes bob { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(6px);} }

/* ============================================================ VISIT STRIP
   Deep cut of the accent: small labels need 4.5:1, and white on bright
   flame is only 3.7. */
.visit-strip { background: var(--flame-deep); color: #fff; }
.visit-strip__grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.visit-cell {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-5);
  border-right: 1px solid rgba(255,255,255,0.18);
  transition: background var(--t-base) var(--ease);
}
.visit-cell:last-child { border-right: none; }
.visit-cell:hover { background: rgba(0,0,0,0.08); }
.visit-cell .icon { width: 28px; height: 28px; flex: 0 0 28px; stroke-width: 1.5; }
.visit-cell .k { display: block; font-family: var(--font-label); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.7rem; opacity: 0.92; }
.visit-cell .v { display: block; font-size: var(--fs-base); font-weight: 500; line-height: 1.25; }

/* ============================================================ ABOUT */
.about__grid { display: grid; grid-template-columns: var(--golden-major) var(--golden-minor); gap: var(--s-8); align-items: center; }
.about__body p { color: var(--cream-dim); font-size: var(--fs-md); margin-top: var(--s-4); max-width: 56ch; }
.about__body p.first { color: var(--cream); font-size: var(--fs-lg); font-family: var(--font-display); line-height: 1.35; }
.about__rubs-title { font-size: var(--fs-sm); font-family: var(--font-label); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--ember); margin-top: var(--s-6); font-weight: 500; }
.about__media picture { display: block; }
.about__media img { width: 100%; border-radius: var(--r-lg); aspect-ratio: 4/5; object-fit: cover; object-position: 50% 48%; box-shadow: var(--shadow-lg); filter: var(--photo-grade); }
.about__rubs { margin-top: var(--s-3); display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip { display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px; border: 1px solid var(--cream-faint); border-radius: var(--r-pill); font-family: var(--font-label); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.72rem; color: var(--cream-dim); }
.chip .icon { width: 14px; height: 14px; color: var(--flame); }

/* ============================================================ CAPTIONS
   Documentary photography earns captions. They carry the appetite and
   the credibility that a plated hero shot would otherwise carry.
   Scoped to the About figure — the photo essay has its own caption system
   below, and a bare `figcaption b` rule here would override it. */
.about__media figcaption {
  margin-top: var(--s-3);
  margin-inline: var(--s-2);
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--cream-dim);
  max-width: 60ch;
  text-wrap: pretty;
}

/* ============================================================ SIGNATURE */
.signature { background: var(--ink-2); }
.sig-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: var(--s-5); }
.sig-card { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--ink); aspect-ratio: 3/4; box-shadow: var(--shadow-md); }
.sig-card picture { display: block; position: absolute; inset: 0; }
.sig-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: var(--photo-grade); transition: transform var(--t-slow) var(--ease); }
.sig-card::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(20,16,14,0) 30%, rgba(20,16,14,0.92) 100%); }
.sig-card:hover img { transform: scale(1.06); }
.sig-card__body { position: absolute; inset: auto 0 0 0; z-index: 2; padding: var(--s-5); }
.sig-card__tag { font-family: var(--font-label); text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.68rem; color: var(--ember); }
.sig-card h3 { font-size: var(--fs-lg); margin: var(--s-2) 0; color: #fff; }
.sig-card p { font-size: var(--fs-sm); color: rgba(247,239,227,0.82); margin-bottom: var(--s-3); }
.sig-card--text {
  background:
    radial-gradient(circle at 78% 18%, rgba(240,82,35,0.22), transparent 32%),
    linear-gradient(145deg, #231915 0%, #14100e 72%);
  border: 1px solid rgba(247,239,227,0.10);
}
.sig-card--text::after { background: linear-gradient(180deg, rgba(20,16,14,0.08), rgba(20,16,14,0.72)); }
.sig-card__texture { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0.10; }
.sig-card__texture .icon { width: 58%; height: 58%; color: var(--flame); }

/* ============================================================ MENU
   A printed menu sheet, not an accordion. Someone scanning for the price of
   a half chicken should not have to open seven drawers to find it — so
   everything is on the page, laid out in columns the way the card in store
   is laid out: masthead, ruled category headings, dotted leaders, and the
   bastes boxed at the end. */
.menu-card {
  max-width: 1060px; margin-inline: auto;
  background: var(--paper);
  border: 1px solid var(--ink-faint);
  box-shadow: 0 24px 60px rgba(20,16,14,0.10);
  padding: clamp(24px, 4vw, 64px);
  position: relative;
}
/* the inner keyline a printed card always has */
.menu-card::after {
  content: ""; position: absolute; inset: 10px; pointer-events: none;
  border: 1px solid color-mix(in oklab, var(--ink) 9%, transparent);
}

.menu-card__head { text-align: center; padding-bottom: var(--s-6); border-bottom: 2px solid var(--ink); }
.menu-card__mark { width: 66px; height: 66px; border-radius: 50%; object-fit: cover; margin: 0 auto var(--s-3); }
.menu-card__title { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: clamp(2.4rem, 5vw, 3.4rem); line-height: 1; color: var(--ink); letter-spacing: -0.02em; }
.menu-card__sub { font-family: var(--font-label); text-transform: uppercase; letter-spacing: var(--tracking-label); font-size: 0.72rem; color: var(--flame-deep); margin-top: var(--s-3); }
.menu-card__note { font-size: var(--fs-sm); color: var(--ink-dim); max-width: 62ch; margin: var(--s-4) auto 0; text-wrap: pretty; }

/* Printed columns. `break-inside: avoid` keeps a category whole; a heading
   stranded at the foot of a column is what makes a menu look homemade. */
.menu-sheet { columns: 2; column-gap: var(--s-8); margin-top: var(--s-7); }
.menu-cat { break-inside: avoid; margin-bottom: var(--s-7); }
.menu-cat__name {
  font-family: var(--font-label); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.14em; font-size: 0.95rem; color: var(--flame-deep);
  padding-bottom: var(--s-2); border-bottom: 1px solid var(--ink-faint);
}
.menu-cat__blurb { font-family: var(--font-display); font-style: italic; font-size: 0.95rem; line-height: 1.5; color: var(--ink-dim); margin-top: var(--s-3); text-wrap: pretty; }
.menu-items { margin-top: var(--s-4); }
.menu-item + .menu-item { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px dotted var(--ink-faint); }

/* name ···· price on one line, description beneath it at full width */
.menu-item__row { display: flex; align-items: baseline; gap: var(--s-2); line-height: 1.3; }
.menu-item__name { font-family: var(--font-label); font-weight: 500; text-transform: uppercase; letter-spacing: 0.02em; font-size: 1rem; color: var(--ink); }
.menu-item__lead { flex: 1 1 auto; min-width: 14px; border-bottom: 1px dotted color-mix(in oklab, var(--ink) 28%, transparent); transform: translateY(-4px); }
.menu-item__price { font-family: var(--font-label); font-weight: 500; font-size: 1.05rem; color: var(--ink); white-space: nowrap; }
.menu-item__price--none { font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-dim); }
.menu-item__desc { font-size: 0.84rem; line-height: 1.55; color: var(--ink-dim); margin-top: 4px; max-width: 46ch; text-wrap: pretty; }

.menu-item.is-featured { background: color-mix(in oklab, var(--flame) 7%, transparent); border-radius: var(--r-sm); padding: var(--s-3); margin-inline: calc(-1 * var(--s-3)); }
.menu-item.is-featured + .menu-item { border-top: none; }
.menu-item.is-featured .menu-item__price { color: var(--flame-deep); }
.pick { font-family: var(--font-label); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; background: var(--flame-deep); padding: 3px 8px; border-radius: var(--r-pill); white-space: nowrap; margin-left: 6px; }

/* The bastes are part of the menu in store, so they're part of it here. */
.menu-bastes { border: 1px solid var(--ink-faint); background: color-mix(in oklab, var(--ink) 3%, transparent); padding: var(--s-5); }
.menu-bastes .menu-cat__name { border-bottom: none; padding-bottom: 0; }
.baste-list { margin-top: var(--s-3); }
.baste { display: grid; grid-template-columns: auto 1fr; gap: var(--s-2); align-items: baseline; padding-block: 6px; }
.baste + .baste { border-top: 1px dotted var(--ink-faint); }
.baste dt { font-family: var(--font-label); font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.9rem; color: var(--ink); white-space: nowrap; }
.baste dd { font-size: 0.82rem; color: var(--ink-dim); }
.baste dd::before { content: "— "; }

/* A jump link from a signature card lands here; a brief tint says "arrived". */
.menu-cat.is-flash { animation: menuFlash 1.4s var(--ease); }
@keyframes menuFlash {
  0%, 40% { background: color-mix(in oklab, var(--flame) 10%, transparent); }
  100% { background: transparent; }
}

.menu-card__foot {
  margin-top: var(--s-6); padding-top: var(--s-5); border-top: 2px solid var(--ink);
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-3);
  font-size: var(--fs-sm); color: var(--ink-dim);
}
.menu-card__hours { display: inline-flex; align-items: center; gap: var(--s-2); font-family: var(--font-label); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.72rem; color: var(--ink); }
.menu-card__hours .icon { width: 16px; height: 16px; color: var(--flame); }
.menu-card__allergen { font-family: var(--font-label); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.72rem; color: var(--flame-deep); }
.menu-card__tel a { font-family: var(--font-label); letter-spacing: 0.06em; color: var(--ink); }
.menu-card__tel a:hover { color: var(--flame-deep); }

.menu__error { color: var(--ink-dim); font-size: var(--fs-md); text-align: center; padding-block: var(--s-6); column-span: all; }
.menu__error a { color: var(--flame-deep); text-decoration: underline; }
.menu__foot { text-align: center; margin-top: var(--s-7); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); }

/* ============================================================ MENU PHOTO RAILS
   The kitchen's photographs flank the printed sheet in two vertical
   rails, distributed down the sheet's full height, so a plate of food
   is in view at every scroll position while a diner scans prices.
   Below 1180px there is no room at the sides: the rails become
   horizontal strips — the savoury rail ABOVE the sheet (food first),
   the sweet rail below — and main.js sets them slowly drifting. */
.menu-layout {
  display: grid;
  grid-template-columns: minmax(170px, 250px) minmax(0, 1060px) minmax(170px, 250px);
  justify-content: center;
  align-items: stretch;
  gap: var(--s-5);
  max-width: 1720px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.menu-layout__main { min-width: 0; }
.menu-rail { min-width: 0; display: flex; }
.menu-rail__track {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s-4);
}
.menu-photo-card {
  overflow: hidden;
  border-radius: var(--r-md);
  background: #fffaf0;
  box-shadow: 0 6px 18px rgba(20, 16, 14, 0.08);
  border: 1px solid color-mix(in oklab, var(--ink) 8%, transparent);
}
.menu-photo-card picture { display: block; }
.menu-photo-card img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: saturate(0.94) contrast(1.04) brightness(1.02);
  transition: transform var(--t-slow) var(--ease);
}
.menu-photo-card:hover img { transform: scale(1.035); }
.menu-photo-card figcaption {
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.68rem;
  color: var(--ink);
  padding: 11px 12px 12px;
}

/* ============================================================ BREAKFAST & SWEETS CAROUSEL */
.food-showcase {
  background:
    radial-gradient(circle at 18% 12%, rgba(213, 82, 27, 0.14), transparent 34%),
    linear-gradient(180deg, var(--ink), var(--ink-2));
  overflow: hidden;
}
.food-showcase__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--s-6);
  margin-bottom: var(--s-6);
}
.food-showcase__head h2 { margin-top: var(--s-3); max-width: 760px; }
.food-showcase__lede {
  max-width: 34ch;
  color: var(--cream-dim);
  font-size: var(--fs-md);
  text-wrap: pretty;
}
.food-carousel {
  width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter)));
  padding: 0 max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter))) var(--s-4);
  /* No scrollbar: the strip drifts on its own (see setupMarquees in
     main.js) and reads as an endless band, not a scrolled widget. */
  scrollbar-width: none;
}
.food-carousel::-webkit-scrollbar { display: none; }
/* While the drift runs, snap would fight the frame-by-frame scroll. */
.is-marquee { scroll-snap-type: none; }
.food-carousel__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(230px, 28vw, 360px);
  gap: var(--s-4);
  list-style: none;
  padding: 0;
}
.food-card {
  position: relative;
  scroll-snap-align: start;
  overflow: hidden;
  border-radius: var(--r-md);
  border: 1px solid var(--cream-faint);
  background: var(--ink-2);
  box-shadow: var(--shadow-md);
}
.food-card picture { display: block; }
.food-card img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  filter: var(--photo-grade);
  transition: transform var(--t-slow) var(--ease);
}
.food-card::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 42%;
  background: linear-gradient(180deg, transparent, rgba(20,16,14,0.82));
  pointer-events: none;
}
.food-card span {
  position: absolute;
  inset: auto var(--s-4) var(--s-4);
  z-index: 1;
  font-family: var(--font-label);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.72rem;
  color: var(--cream);
}
.food-card:hover img { transform: scale(1.035); }

/* ============================================================ THE PLACE — photo essay
   An asymmetric editorial spread. Two full-bleed frames anchor the section;
   between them, frames are staggered off a 12-column grid at different sizes
   and ratios so the eye travels diagonally rather than down a ladder.
   Every frame is numbered — the section reads as a contact sheet with a
   point of view, which is what documentary photography needs to look
   deliberate rather than incidental. */
.place { background: var(--ink); padding-bottom: var(--s-9); }

.place__head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-6); margin-bottom: var(--s-8); }
.place__head h2 { margin-top: var(--s-3); }
.place__meta {
  font-family: var(--font-label); text-transform: uppercase; letter-spacing: 0.16em;
  font-size: 0.72rem; line-height: 2; color: var(--cream-dim); text-align: right;
  padding-bottom: 6px; white-space: nowrap;
}

/* --- the frame itself --- */
.frame { position: relative; }
.frame__img { overflow: hidden; border-radius: var(--r-md); background: var(--ink-2); }
.frame picture { display: block; width: 100%; height: 100%; }
.frame img { width: 100%; object-fit: cover; filter: var(--photo-grade); transition: transform var(--t-slow) var(--ease); }
.frame:hover .frame__img img { transform: scale(1.035); }
/* The two interior frames were shot in low light; lift them so they sit in
   the same tonal family as the rest of the set. */
.frame.is-dim img { filter: saturate(0.92) contrast(1.09) brightness(1.16); }

/* --- caption: number, rule, serif lead-in, body --- */
.frame__cap { display: grid; grid-template-columns: auto 1fr; gap: var(--s-4); align-items: start; margin-top: var(--s-4); }
.frame__no {
  font-family: var(--font-label); font-size: 0.95rem; font-weight: 500; letter-spacing: 0.18em;
  color: var(--flame); padding-top: 10px; line-height: 1;
  transition: color var(--t-base) var(--ease);
}
.frame__text { border-top: 1px solid var(--cream-faint); padding-top: var(--s-3); max-width: 46ch; }
.frame__lead { display: block; font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: var(--fs-md); color: var(--cream); letter-spacing: -0.01em; }
.frame__body { display: block; font-size: var(--fs-sm); color: var(--cream-dim); margin-top: 5px; text-wrap: pretty; }
.frame:hover .frame__no { color: var(--ember); }

/* --- full-bleed frames: the caption is a placard laid on the photograph.
   A gradient scrim alone can't be trusted here — one frame is a bright
   white menu board, the next is a black sign, and a single overlay reads
   as a smear on one and vanishes on the other. A solid, blurred card is
   legible on both and looks deliberate. --- */
.frame--bleed { margin-block: var(--s-9); }
.frame--bleed img { border-radius: 0; display: block; }
.frame--lead img { aspect-ratio: 2/1; object-position: 50% 58%; }
.frame--sign img { aspect-ratio: 2/1; object-position: 50% 44%; }
.frame__cap--over {
  position: absolute; inset: auto 0 0 0; display: block; margin: 0;
  padding-block: var(--s-9) var(--s-5);
  background: linear-gradient(180deg, transparent, rgba(20,16,14,0.55));
}
.frame__card {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s-4); align-items: start;
  max-width: 560px;
  padding: var(--s-4) var(--s-5);
  background: rgba(20,16,14,0.86);
  backdrop-filter: blur(10px);
  border-left: 3px solid var(--flame);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.frame__card .frame__no { color: var(--ember); padding-top: 4px; }
.frame__card .frame__text { border-top: none; padding-top: 0; }
.frame__card .frame__lead { color: #fff; }
.frame__card .frame__body { color: rgba(247,239,227,0.82); }

/* --- the staggered grid --- */
.essay { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--s-5); align-items: start; }
.f-flame  { grid-column: 1 / 7;  }
.f-plate  { grid-column: 2 / 9;  margin-top: var(--s-7); }
.f-sweet  { grid-column: 9 / 13; margin-top: var(--s-9); }
.f-menu   { grid-column: 1 / 8;  }
.f-inside { grid-column: 8 / 13; margin-top: var(--s-8); }
.f-grill  { grid-column: 1 / 7;  margin-top: var(--s-7); }
.f-bread  { grid-column: 7 / 13; margin-top: var(--s-9); }
.f-bakes  { grid-column: 4 / 10; margin-top: var(--s-6); }

.f-flame .frame__img  { aspect-ratio: 4/5; }
.f-flame img          { aspect-ratio: 4/5; object-position: 50% 50%; }
.f-plate .frame__img  { aspect-ratio: 3/4; }
.f-plate img          { aspect-ratio: 3/4; object-position: 55% 45%; }
.f-sweet .frame__img  { aspect-ratio: 3/4; }
.f-sweet img          { aspect-ratio: 3/4; object-position: 50% 45%; }
.f-menu .frame__img   { aspect-ratio: 3/2; }
.f-menu img           { aspect-ratio: 3/2; }
.f-inside .frame__img { aspect-ratio: 1/1; }
.f-inside img         { aspect-ratio: 1/1; object-position: 50% 55%; }
.f-grill .frame__img  { aspect-ratio: 4/3; }
.f-grill img          { aspect-ratio: 4/3; object-position: 45% 50%; }
.f-bread .frame__img  { aspect-ratio: 3/2; }
.f-bread img          { aspect-ratio: 3/2; }
.f-bakes .frame__img  { aspect-ratio: 4/3; }
.f-bakes img          { aspect-ratio: 4/3; object-position: 50% 40%; }

/* A held statement between the frames — it gives the spread a voice and
   stops two photographs from sitting shoulder to shoulder. */
.essay__note {
  grid-column: 7 / 13; align-self: center;
  font-family: var(--font-display); font-size: var(--fs-lg);
  line-height: 1.32; color: var(--cream); text-wrap: balance;
  padding-left: var(--s-5); border-left: 2px solid var(--flame);
}
.essay__note em { font-style: italic; color: var(--flame); }
.essay--close { margin-top: var(--s-7); }

/* ============================================================ VISIT (full) */
.visit { background: var(--ink-2); }
.visit__grid { display: grid; grid-template-columns: var(--golden-minor) var(--golden-major); gap: var(--s-7); align-items: stretch; }
.visit__panel { display: flex; flex-direction: column; gap: var(--s-5); }
.visit__status { align-self: flex-start; }
.hours { border: 1px solid var(--cream-faint); border-radius: var(--r-lg); overflow: hidden; }
.hours__row { display: flex; justify-content: space-between; padding: 13px var(--s-4); font-size: var(--fs-sm); }
.hours__row + .hours__row { border-top: 1px solid var(--cream-faint); }
.hours__row .d { font-family: var(--font-label); text-transform: uppercase; letter-spacing: 0.08em; color: var(--cream-dim); }
.hours__row .h { color: var(--cream-dim); }
.hours__row.today { background: color-mix(in oklab, var(--flame) 12%, transparent); }
.hours__row.today .d { color: var(--ember); }
.hours__row.today .h { color: var(--cream); }
.hours__note { font-size: var(--fs-sm); color: var(--cream-dim); margin-top: calc(-1 * var(--s-2)); max-width: 46ch; }
.visit-detail { display: flex; gap: var(--s-3); align-items: flex-start; }
.visit-detail .icon { color: var(--flame); width: 22px; height: 22px; flex: 0 0 22px; margin-top: 2px; }
.visit-detail .k { font-family: var(--font-label); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.72rem; color: var(--cream-dim); }
.visit-detail .v { font-size: var(--fs-base); color: var(--cream); }
.visit-detail a:hover { color: var(--ember); }
.visit__map { border-radius: var(--r-lg); overflow: hidden; min-height: 440px; border: 1px solid var(--cream-faint); }
.visit__map iframe { width: 100%; height: 100%; min-height: 440px; border: 0; filter: grayscale(0.2) contrast(1.05); }

/* ============================================================ FINAL CTA */
.finalcta { position: relative; min-height: 70vh; display: flex; align-items: center; text-align: center; overflow: hidden; }
.finalcta__media { position: absolute; inset: 0; z-index: -2; }
.finalcta__media picture { display: block; width: 100%; height: 100%; }
.finalcta__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; filter: saturate(0.82) contrast(1.04) brightness(0.92); }
.finalcta__media::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(20,16,14,0.84), rgba(20,16,14,0.80)); }
.finalcta__inner { width: 100%; max-width: 760px; margin-inline: auto; }
.finalcta h2 { font-size: var(--fs-2xl); margin: var(--s-4) 0 var(--s-3); }
.finalcta h2 em { font-style: italic; color: var(--flame); }
.finalcta p { color: rgba(247,239,227,0.82); font-size: var(--fs-md); margin-bottom: var(--s-6); }
.finalcta__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; }

/* ============================================================ FOOTER */
.footer { background: #0E0B09; color: var(--cream); padding-block: var(--s-8) var(--s-6); content-visibility: auto; contain-intrinsic-size: auto 460px; }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: var(--s-6); }
.footer__brand .brand { margin-bottom: var(--s-4); }
.footer__brand p { color: var(--cream-dim); font-size: var(--fs-sm); max-width: 34ch; }
.footer h4 { font-family: var(--font-label); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.78rem; color: var(--ember); margin-bottom: var(--s-4); }
.footer li, .footer a { color: var(--cream-dim); font-size: var(--fs-sm); line-height: 2.1; }
.footer a:hover { color: var(--cream); }
.footer__social { display: flex; gap: var(--s-2); margin-top: var(--s-3); }
.footer__social a { width: 44px; height: 44px; border: 1px solid var(--cream-faint); border-radius: 50%; display: grid; place-items: center; transition: border-color var(--t-base) var(--ease), color var(--t-base) var(--ease); }
.footer__social a:hover { border-color: var(--flame); color: var(--flame); }
.footer__bottom { border-top: 1px solid var(--cream-faint); margin-top: var(--s-7); padding-top: var(--s-4); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s-2); font-size: 0.78rem; color: rgba(247,239,227,0.60); }

/* ============================================================ STICKY MOBILE ACTION BAR */
.action-bar {
  position: fixed; inset: auto 0 0 0; z-index: 95; display: none;
  grid-template-columns: repeat(4, 1fr);
  background: rgba(20,16,14,0.92); backdrop-filter: blur(14px);
  border-top: 1px solid var(--cream-faint);
  padding-bottom: env(safe-area-inset-bottom);
}
.action-bar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 60px; color: var(--cream-dim); font-family: var(--font-label); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; }
.action-bar a .icon { width: 21px; height: 21px; }
.action-bar a.primary { color: var(--flame); }

/* ============================================================ REVEAL
   Content is VISIBLE BY DEFAULT. The hidden-then-revealed treatment is
   opt-in: main.js adds .js-anim to <html> only when JS is running and
   the visitor has not asked for reduced motion. A section can never
   be left blank by a failed script or a fast scroll. */
.js-anim .reveal { opacity: 0; transform: translateY(26px); transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); }
.js-anim .reveal.is-visible { opacity: 1; transform: none; }

/* ============================================================ RESPONSIVE */
/* Below this the side rails don't fit: they become horizontal strips,
   savoury above the sheet, sweet below. main.js drifts them slowly. */
@media (max-width: 1180px) {
  .menu-layout { display: block; }
  .menu-rail {
    display: block;
    margin-block: var(--s-5);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .menu-rail::-webkit-scrollbar { display: none; }
  .menu-rail__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: min(56vw, 250px);
    gap: var(--s-3);
  }
}
@media (max-width: 980px) {
  .about__grid { grid-template-columns: 1fr; gap: var(--s-6); }
  .about__media { max-width: 440px; }
  .food-showcase__head { align-items: flex-start; flex-direction: column; }
  .food-showcase__lede { max-width: 48ch; }
  .visit__grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--s-6); }
  /* Keep the stagger, lose the extremes: frames go half-width, note full. */
  .f-flame  { grid-column: 1 / 7; }
  .f-plate  { grid-column: 7 / 13; margin-top: var(--s-7); }
  .f-sweet  { grid-column: 1 / 7; margin-top: var(--s-6); }
  .f-menu   { grid-column: 1 / 8; }
  .f-inside { grid-column: 8 / 13; margin-top: var(--s-6); }
  .f-grill  { grid-column: 1 / 7; margin-top: var(--s-6); }
  .f-bread  { grid-column: 7 / 13; margin-top: var(--s-7); }
  .f-bakes  { grid-column: 3 / 11; margin-top: var(--s-6); }
  .essay__note { grid-column: 7 / 13; align-self: start; margin-top: var(--s-6); }
  .frame--lead img { aspect-ratio: 16/9; }
  .frame--sign img { aspect-ratio: 2/1; }
}
@media (max-width: 760px) {
  .section { padding-block: var(--s-8); }
  .nav__links {
    position: fixed; inset: 0 0 0 auto; width: min(80vw, 340px);
    flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--s-5);
    background: var(--ink-2); padding: var(--s-8) var(--s-6);
    transform: translateX(100%); transition: transform var(--t-base) var(--ease); box-shadow: var(--shadow-lg);
  }
  .nav__links.is-open { transform: none; }
  .nav__links a { font-size: 1.1rem; }
  .menu-page .nav:not(.nav--scrolled) .nav__links a { color: var(--cream); }
  /* The open drawer is always the dark panel, so the X must be cream even
     on the menu page's paper header — the ink spans were invisible on it. */
  .nav.is-menu-open .nav__toggle span,
  .menu-page .nav:not(.nav--scrolled).is-menu-open .nav__toggle span { background: var(--cream); }
  .nav__cta-desktop { display: none; }
  .nav__toggle { display: flex; }
  .nav.is-menu-open .nav__toggle span:nth-child(1){ transform: translateY(8px) rotate(45deg); }
  .nav.is-menu-open .nav__toggle span:nth-child(2){ opacity: 0; }
  .nav.is-menu-open .nav__toggle span:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }
  .visit-strip__grid { grid-template-columns: 1fr; }
  .visit-cell { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.18); padding: var(--s-4) var(--s-5); }
  .visit-cell:last-child { border-bottom: none; }
  .menu-photo-card figcaption { font-size: 0.62rem; }
  .food-carousel__track { grid-auto-columns: min(76vw, 300px); }
  /* decorative; on a phone it crowds the status line and the fold is obvious */
  .scroll-cue { display: none; }
  /* Single column: no stagger, no negative space games. */
  .essay { grid-template-columns: 1fr; gap: var(--s-7); }
  .f-flame, .f-plate, .f-sweet, .f-menu, .f-inside, .f-grill, .f-bread, .f-bakes, .essay__note { grid-column: 1 / -1; margin-top: 0; }
  .f-inside .frame__img, .f-inside img { aspect-ratio: 4/3; }
  .essay__note { font-size: var(--fs-md); padding-left: var(--s-4); }
  .place__head { flex-direction: column; align-items: flex-start; gap: var(--s-4); }
  .place__meta { text-align: left; white-space: normal; }
  .place__meta br { display: none; }
  .frame--bleed { margin-block: var(--s-8); }
  .frame--lead img, .frame--sign img { aspect-ratio: 4/3; }
  .frame__cap--over { padding-block: var(--s-7) var(--s-4); }
  .frame__card { max-width: none; padding: var(--s-3) var(--s-4); gap: var(--s-3); }
  .footer__grid { grid-template-columns: 1fr; }
  .action-bar { display: grid; }
  body { padding-bottom: 64px; }
  .menu-card__foot { flex-direction: column; align-items: flex-start; text-align: left; }
}
/* Two printed columns need real width; below that a menu is a single list. */
@media (max-width: 960px) {
  .menu-sheet { columns: 1; }
  .menu-card::after { inset: 6px; }
}
@media (max-width: 460px) {
  .hero__actions { flex-direction: column; align-items: stretch; width: 100%; }
  .hero__actions .btn { width: 100%; }
  .finalcta__actions { flex-direction: column; }
  .finalcta__actions .btn { width: 100%; }
}

/* QA-only: ?reveal=all caps the tall sections so one screenshot catches the page */
body.qa-shot .hero, body.qa-shot .finalcta { min-height: 640px; }
body.qa-shot .hero__media img { animation: none; transform: none; }