/* Mi Tierra Bar & Kitchen -- CLONE DRAFT (site-clone)
   Replicates the measured design tokens from mitierramiami.com (CLONE-SPEC.md
   section 1): white ground, Inter throughout, uppercase-tracked small type,
   a huge light-weight tracked hero headline, and pill buttons. Draft A bans
   pills; this draft requires them, on purpose, because that is the live look.
   Class names intentionally mirror build/templates/site.css so the two
   generators stay easy to compare, but every value below was re-measured for
   this draft, not copied. */

:root {
  --white: #ffffff;
  --cream: #fdf9f5;          /* live section ground, measured 2026-09-22 */
  --cream-2: #f2e9dd;
  --line-warm: #e8ddd0;      /* live footer top rule */
  --stat: #8f7a66;           /* live stats are #c9b8a8 (1.9:1); this clears 3:1 at 48px */
  --taupe: #c9b8a8;          /* decorative fills only, never behind text */
  --taupe-deep: #b7a290;     /* decorative only: 2.34:1 as text on cream */
  --taupe-ink: #7a6857;      /* text-safe taupe: white on it is 5.32:1 */
  --taupe-text: #7a6550;     /* 5.52:1 white, 4.92:1 cream, 4.59:1 cream-2.
                                Was #8b7355: 4.49 / 4.00 / 3.73, under 4.5 on
                                all three grounds it is actually used on. */
  --espresso: #6b5d4f;
  --espresso-deep: #5a4c3f;
  --ink: #3c332b;
  --line: rgba(107, 93, 79, 0.18);
  --focus: #2f6fed;
  --gutter: 1.25rem;
  --container-max: 1240px;
  --container-wide: 1360px;
  --radius-pill: 9999px;
  --brand: #c9b8a8; /* krispy-widget accent token, house rule: must be defined or the widget renders its default navy */
}

@media (max-width: 560px) {
  :root { --gutter: 1.5rem; }
}

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

/* The `hidden` attribute is only a UA rule of `display: none`, so ANY class rule
   that sets display beats it. This bit twice: .dm-card and .lb are both
   `display: flex`, so the digital menu search filtered nothing and the lightbox
   X set hidden while the overlay stayed on screen. Keep this at the top with the
   reset, where a later section edit will not swallow it. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
button { font-family: inherit; }

h1, h2, h3 { margin: 0; font-weight: 300; color: var(--espresso); line-height: 1.05; }
h1 em, h2 em, h3 em, .photo-hero em { font-style: italic; font-weight: 300; }
p { margin: 0 0 1em; color: var(--espresso); }
p:last-child { margin-bottom: 0; }

.skip-link {
  position: absolute; left: -999px; top: 0; background: var(--ink); color: #fff;
  padding: 0.8em 1.2em; z-index: 1000; border-radius: 0 0 6px 0;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------------------------------------------------------------------- */
/* Small uppercase tracked type: the single treatment that carries most of */
/* the live look (nav, buttons, eyebrows, band text). Measured 12px / 300. */
/* ---------------------------------------------------------------------- */
.eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--taupe-text); /* live #c9b8a8 is 1.9:1; same weight and tracking, readable colour */
}
.eyebrow--pill {
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  border-radius: var(--radius-pill);
  padding: 0.5em 1.1em;
}
.eyebrow--center { display: block; text-align: center; }

/* Layout ------------------------------------------------------------- */
.container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--gutter); }
.container--wide { max-width: var(--container-wide); }
.container--narrow { max-width: 720px; }

section { padding: 6rem 0; }
@media (min-width: 1024px) { section { padding: 10rem 0; } .section--signature { padding: 6rem 0; } }
.section--tight { padding: 1.6rem 0; }
.section--alt { background: var(--cream); }
.section--dense { padding: 3rem 0; }

.hairline { border: none; border-top: 1px solid var(--line); margin: 0; }
.mt-lg { margin-top: 2.5rem; }
.center-text { text-align: center; }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.9rem; }
.btn-row--center { justify-content: center; }
.two-col { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center; }
@media (min-width: 760px) { .two-col { grid-template-columns: 1fr 1fr; gap: 3.5rem; } }

.section-head { margin-bottom: 3rem; }
@media (min-width: 1024px) { .section-head { margin-bottom: 4rem; } }
.section-head--center { text-align: center; max-width: 900px; margin-left: auto; margin-right: auto; }
.section-head h2 { font-size: clamp(1.875rem, 4vw, 3rem); line-height: 1; margin-top: 1rem; }
.section-head h1, .section-head h2 { text-wrap: balance; }
.section-head h1 { font-size: clamp(1.875rem, 4vw, 3rem); line-height: 1.05; margin-top: 1rem; }
.section-head p { margin-top: 0.9rem; font-size: 1.02rem; }

/* fade-up reveal, failsafe timer lives in site.js */
.fade-up { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
.fade-up.is-visible { opacity: 1; transform: none; }

/* ---------------------------------------------------------------------- */
/* Buttons -- pills. Draft A bans them; this draft requires them.         */
/* ---------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 14px 32px;
  border-radius: var(--radius-pill);
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.44px;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  border: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--taupe-ink); color: #fff; } /* was --taupe, 1.93:1 */
.btn--primary:hover { background: var(--espresso); }
/* On dark / photo backgrounds: translucent white, per the measured header CTA. */
.btn--outline-inverse {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  font-weight: 300;
  letter-spacing: 1.8px;
}
.btn--outline-inverse:hover { background: rgba(255, 255, 255, 0.3); }
/* On light / cream backgrounds. */
.btn--outline {
  background: transparent;
  border: 1px solid var(--taupe);
  color: var(--espresso);
  font-weight: 300;
  letter-spacing: 1.8px;
}
.btn--outline:hover { background: rgba(107, 93, 79, 0.06); }
.btn--lg { min-height: 54px; padding: 16px 40px; font-size: 14px; font-weight: 300; letter-spacing: 0.15em; }
/* Live secondary on the frosted closing card: white at 30%, espresso text. */
.btn--glass { background: rgba(255, 255, 255, 0.3); border: 1px solid rgba(255, 255, 255, 0.6); color: var(--espresso); font-weight: 300; }
.btn--glass:hover { background: rgba(255, 255, 255, 0.55); }
.btn--block { width: 100%; }
.btn--sm { min-height: 38px; padding: 10px 24px; }

.text-link {
  color: var(--espresso-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 400;
}

/* ---------------------------------------------------------------------- */
/* Header. Transparent over a hero photo, solid everywhere else. Measured: */
/* Live (re-measured 2026-09-22): the header is a floating capsule, not a  */
/* bar. 12px from the top, 48px side inset, 56px tall, radius 9999px.      */
/* Over the hero: rgba(139,115,85,0.3) + blur(12px). Scrolled: white at    */
/* 80% + blur(20px), 1px taupe hairline, shadow-lg.                        */
/* The outer <header> stays transparent and only positions the capsule.    */
/* ---------------------------------------------------------------------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 80px;
  z-index: 500;
  padding: 12px 12px 0;
  pointer-events: none;
}
.site-header__bar {
  pointer-events: auto;
  height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  transition: background-color 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}
/* LONGHAND on purpose: .site-header__bar also carries .container. */
@media (min-width: 961px) {
  .site-header { padding-left: 48px; padding-right: 48px; }
  .site-header__bar {
    max-width: 1184px; padding-left: 32px; padding-right: 32px;
    background: rgba(90, 72, 55, 0.42); /* live rgba(139,115,85,0.3): too pale for white text */
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  }
}

.brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; min-height: 44px; }
/* Rooster over the hero, script wordmark once solid: one grid cell, crossfaded. */
.brand__swap { display: grid; align-items: center; }
.brand__swap img { grid-area: 1 / 1; width: auto; transition: opacity 0.3s ease; }
.brand__rooster { height: 34px; opacity: 1; }
.brand__wordmark { height: 24px; opacity: 0; }
@media (min-width: 1024px) { .brand__wordmark { height: 32px; } }
.brand__mark-wrap { position: relative; width: 34px; height: 34px; flex: none; }
.brand__mark-wrap img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity 0.25s ease; }
.brand__mark--dark { opacity: 0; }
.brand__mark--white { opacity: 1; }
.brand__word { display: none; font-size: 1.2rem; font-style: italic; color: #fff; line-height: 1.1; transition: color 0.25s ease; }
.brand__word small { display: block; font-style: normal; font-size: 0.62rem; font-weight: 300; letter-spacing: 1.8px; text-transform: uppercase; color: inherit; opacity: 0.85; }
@media (min-width: 400px) { .brand__word { display: block; } }

.primary-nav { display: none; align-items: center; gap: 1.8rem; }
.primary-nav a {
  display: inline-flex; align-items: center; min-height: 44px; /* was 19 to 22px tall */
  color: #fff;
  text-decoration: none;
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 1.44px;
  text-transform: uppercase;
  transition: color 0.25s ease, opacity 0.2s ease;
  opacity: 0.9;
}
.primary-nav a:hover, .primary-nav a[aria-current="page"] { opacity: 1; }
.primary-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; }
@media (min-width: 961px) { .primary-nav { display: flex; } }

/* Nav sub-labels (CLONE-GAPS.md section 2): Menu carries "Menu Completo",
   Brunch carries "Domingos", Careers carries "Contratando". Live renders
   Brunch/Careers as an inline pill and Menu as a same-destination hover
   dropdown; all three read here as one inline badge so the pattern also
   works on touch, where a hover menu does not. */
.nav-badge {
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: 0.5rem; padding: 0.25em 0.65em;
  font-size: 9px; font-weight: 300; letter-spacing: 1px; text-transform: uppercase;
  border-radius: var(--radius-pill); white-space: nowrap;
  background: rgba(255, 255, 255, 0.22); color: #fff; border: 1px solid rgba(255, 255, 255, 0.4);
}
body:not([data-header="overlay"]) .nav-badge,
.site-header.is-scrolled .nav-badge {
  background: var(--cream); color: var(--espresso-deep); border-color: var(--line);
}
@media (max-width: 960px) {
  .nav-badge { background: var(--cream); color: var(--espresso-deep); border-color: var(--line); }
}
.nav-panel__list .nav-badge { background: var(--cream); color: var(--espresso-deep); border-color: var(--line); font-style: normal; }

.header-actions { display: flex; align-items: center; gap: 0.9rem; }
.header-actions__cta { display: none; align-items: center; gap: 0.9rem; }
@media (min-width: 961px) { .header-actions__cta { display: flex; } }
.header-actions .btn--primary { background: rgba(255, 255, 255, 0.3); border: 1px solid rgba(255, 255, 255, 0.5); min-height: 38px; padding: 10px 24px; }
.header-actions .btn--primary:hover { background: rgba(255, 255, 255, 0.45); }

/* Lang switch: two-state ES/EN, both always visible, active is a span. */
.lang-switch { display: flex; align-items: center; gap: 0.2rem; }
.lang-switch__opt {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; min-height: 34px; padding: 0 0.4em;
  font-size: 12px; font-weight: 300; letter-spacing: 1.2px;
  text-decoration: none; color: rgba(255, 255, 255, 0.95); border-radius: 6px;
  transition: color 0.25s ease;
}
.lang-switch__opt.is-active { color: #fff; font-weight: 500; }
.lang-switch__opt:not(.is-active):hover { color: #fff; }

.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex: 0 0 auto; background: none; border: none; cursor: pointer; padding: 0;
}
@media (min-width: 961px) { .nav-toggle { display: none; } }
.nav-toggle__bars { position: relative; width: 22px; height: 14px; }
.nav-toggle__bars span {
  position: absolute; left: 0; width: 100%; height: 2px; background: #fff;
  transition: top 0.2s ease, transform 0.2s ease, opacity 0.2s ease, background-color 0.25s ease;
}
.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { top: 6px; }
.nav-toggle__bars span:nth-child(3) { top: 12px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { top: 6px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

.nav-panel {
  position: fixed; inset: 76px 0 0 0; z-index: 480;
  background: var(--white);
  transform: translateY(-8px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  padding: 1.5rem var(--gutter) 2rem;
  overflow-y: auto;
}
.nav-panel[data-open="true"] { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
@media (min-width: 961px) { .nav-panel { display: none !important; } }
.nav-panel__list { display: flex; flex-direction: column; gap: 0.2rem; }
.nav-panel__list a {
  display: block; padding: 0.9rem 0.2rem; text-decoration: none; color: var(--ink);
  font-size: 1.3rem; font-style: italic; border-bottom: 1px solid var(--line);
}
.nav-panel__foot { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
.nav-panel__foot .lang-switch__opt { color: var(--espresso); min-width: 44px; min-height: 40px; font-size: 0.95rem; }
.nav-panel__foot .lang-switch__opt.is-active { color: var(--ink); }

/* ---- Header states ---------------------------------------------------- */
/* Default (no data-header="overlay" on body, or once scrolled): solid.   */
body:not([data-header="overlay"]) .site-header__bar,
.site-header.is-scrolled .site-header__bar {
  background: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border-color: rgba(201, 184, 168, 0.2);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}
body:not([data-header="overlay"]) .brand__rooster,
.site-header.is-scrolled .brand__rooster { opacity: 0; }
body:not([data-header="overlay"]) .brand__wordmark,
.site-header.is-scrolled .brand__wordmark { opacity: 1; }
body:not([data-header="overlay"]) .primary-nav a,
.site-header.is-scrolled .primary-nav a,
body:not([data-header="overlay"]) .brand__word,
.site-header.is-scrolled .brand__word,
body:not([data-header="overlay"]) .lang-switch__opt,
.site-header.is-scrolled .lang-switch__opt {
  color: var(--espresso);
}
body:not([data-header="overlay"]) .lang-switch__opt.is-active,
.site-header.is-scrolled .lang-switch__opt.is-active { color: var(--ink); }
body:not([data-header="overlay"]) .nav-toggle__bars span,
.site-header.is-scrolled .nav-toggle__bars span { background: var(--ink); }
body:not([data-header="overlay"]) .header-actions .btn--primary,
.site-header.is-scrolled .header-actions .btn--primary {
  background: var(--taupe-ink); border-color: var(--taupe-ink); color: #fff; /* live --taupe, 1.93:1 */
}
body:not([data-header="overlay"]) .brand__mark--dark,
.site-header.is-scrolled .brand__mark--dark { opacity: 1; }
body:not([data-header="overlay"]) .brand__mark--white,
.site-header.is-scrolled .brand__mark--white { opacity: 0; }
/* Never a backdrop filter under the mobile breakpoint (fleet gotcha): the */
/* header is always solid there regardless of overlay state or scroll.    */
@media (max-width: 960px) {
  .site-header__bar,
  body:not([data-header="overlay"]) .site-header__bar,
  .site-header.is-scrolled .site-header__bar {
    background: rgba(255, 255, 255, 0.97);
    -webkit-backdrop-filter: none; backdrop-filter: none;
    border-color: rgba(201, 184, 168, 0.35);
    box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.12);
    padding-left: 18px; padding-right: 6px;
  }
  .primary-nav a, .brand__word, .lang-switch__opt { color: var(--espresso-deep); }
  .lang-switch__opt.is-active { color: var(--ink); }
  .nav-toggle__bars span { background: var(--ink); }
  .header-actions .btn--primary { background: var(--taupe-ink); border-color: var(--taupe-ink); color: #fff; }
  .brand__rooster { opacity: 0; }
  .brand__wordmark { opacity: 1; }
}

/* ---------------------------------------------------------------------- */
/* Hero. Full bleed photograph, dark gradient scrim, type bottom left.    */
/* ---------------------------------------------------------------------- */
.photo-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  color: #fff;
}
.photo-hero--tall { min-height: 88vh; }
.photo-hero__media { position: absolute; inset: 0; }
.photo-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo-hero__media::after {
  content: "";
  position: absolute; inset: 0;
  /* Deepened past the live site's scrim: measured white-on-photo text at the
     live values did not clear 4.5:1 in the lighter areas. This stack holds a
     stronger base plus a bottom-weighted gradient under the type. */
  /* Closer to the live scrim (black 0.7 to 0.3 to 0, bottom up) so the photo
     reads bright up top, but still weighted under the type so white text
     clears 4.5:1 where it sits. Re-measured on composited pixels 2026-09-22. */
  background:
    /* Top band: keeps the white header nav readable over a bright photo.
       Measured 2026-09-23 on composited pixels: without it the nav read
       1.6 to 3.5:1 (the live site's own values fail the same way). */
    linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 26%),
    linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.62) 32%, rgba(0, 0, 0, 0.28) 62%, rgba(0, 0, 0, 0.08) 100%),
    linear-gradient(to right, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 60%);
}
/* LONGHAND, deliberately. This element also carries .container, which sets
   `padding: 0 var(--gutter)`. A `padding` shorthand here ties at 0,1,0,
   wins on source order and silently zeroes the horizontal gutter, which is
   how the hero headline and buttons sat at x=0 at 375px. Standing house
   rule: never write a padding shorthand on an element that has .container. */
.photo-hero__content { position: relative; z-index: 2; padding-top: 7rem; padding-bottom: 5.5rem; text-align: left; width: 100%; max-width: 1280px; }
@media (min-width: 1024px) { .photo-hero__content { padding-left: 80px; padding-right: 80px; } }
/* Live badge: solid pill, 10px / 500 / 3px tracking. Live fills it with
   #c9b8a8 (white on it is 2.0:1); same shape on the text-safe taupe. */
.hero-pill {
  display: inline-block; padding: 4px 12px; border-radius: var(--radius-pill);
  background: var(--taupe-ink); color: #fff;
  font-size: 10px; font-weight: 500; letter-spacing: 3px; text-transform: uppercase;
}
.photo-hero__content .eyebrow--pill { margin-bottom: 0; }
/* Offer-slide hero (CLONE-GAPS.md section 1): a badge pill beside a meta
   line, above the two-line headline. Mirrors the live site's lunch slide. */
.hero-meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-bottom: 1.5rem; }
.hero-meta-row__text {
  font-size: 12px; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase;
  /* Full white, not a dimmed variant: this sits in the same protected zone
     as the headline and the scrim was deepened specifically so white text
     clears 4.5:1 there (see .photo-hero__media::after above). A dimmed
     white would drop back under that measured floor. */
  color: #fff;
}
.photo-hero__content h1 {
  font-size: clamp(3rem, 7vw, 6rem);
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 0.95;
  margin: 0;
  /* The global `h1 { color: var(--ink) }` rule below otherwise wins over the
     inherited white from .photo-hero: inheritance has zero specificity and
     always loses to an explicit element rule, dark text always wins. */
  color: #fff;
}
.photo-hero__content h1 em { font-weight: 400; }
/* Live sub line: 18px / 300 at white 70%. Ours is 85% so it holds 4.5:1. */
.photo-hero__sub { color: rgba(255, 255, 255, 0.88); font-size: 1.125rem; font-weight: 300; margin: 0.6rem 0 2rem; max-width: 46ch; }
.photo-hero__lead { color: rgba(255, 255, 255, 0.92); font-size: 1.1rem; max-width: 46ch; margin: 1.1rem 0 1.8rem; }
.photo-hero__content .btn-row { margin-top: 0.4rem; }

/* Bottom CENTRE, not the live site's bottom right: the accessibility
   widget's trigger owns that corner on every page (house rule), and the hint
   sat underneath it. */
.hero-scroll-hint {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 1.5rem; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
  color: rgba(255, 255, 255, 0.85);
  font-size: 11px; letter-spacing: 1.8px; text-transform: uppercase;
}
.hero-scroll-hint svg { animation: hero-hint-bounce 1.8s ease-in-out infinite; }
@keyframes hero-hint-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* Interior "no photo" hero band: solid, cream, header renders solid immediately (no data-header=overlay). */
.page-header { padding: 9.5rem 0 3rem; background: var(--cream); }
.page-header h1 { font-size: clamp(2rem, 5vw, 3rem); margin-top: 0.6rem; }
.page-header p { max-width: 56ch; font-size: 1.02rem; margin-top: 0.9rem; }

/* ---------------------------------------------------------------------- */
/* Announcement band: dark, centred, tiny uppercase tracked text, one link */
/* ---------------------------------------------------------------------- */
.announce-band { background: var(--espresso-deep); color: #fff; padding: 0.9rem 0; }
.announce-band__row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 0.9rem; text-align: center;
}
.announce-band__badge {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 500; letter-spacing: 1.6px; text-transform: uppercase;
  background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-pill); padding: 0.3em 0.8em;
}
.announce-band__text { font-size: 12px; font-weight: 300; letter-spacing: 1.2px; text-transform: uppercase; }
.announce-band__link {
  font-size: 12px; font-weight: 500; letter-spacing: 1.44px; text-transform: uppercase;
  color: #fff; text-decoration: none; border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: var(--radius-pill); padding: 0.4em 1.1em; white-space: nowrap;
}
.announce-band__link:hover { background: rgba(255, 255, 255, 0.14); }

/* ---------------------------------------------------------------------- */
/* Happy hour band: same taupe colour and tiny tracked text as the live   */
/* site, repeated across the width. House rule bans marquees, so it is    */
/* shipped STATIC here, not scrolling. Deliberate difference from live.   */
/* ---------------------------------------------------------------------- */
.hh-band { background: var(--taupe-ink); overflow: hidden; padding: 0.65rem 0; } /* white text: --taupe was 1.93:1 */
.hh-band__row {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 0 1.6rem; row-gap: 0.35rem;
}
.hh-band__item {
  font-size: 11px; font-weight: 500; letter-spacing: 1.6px; text-transform: uppercase; color: #fff;
  white-space: nowrap;
}

/* ---------------------------------------------------------------------- */
/* Press line                                                             */
/* ---------------------------------------------------------------------- */
.press-block { background: var(--cream); text-align: center; padding: 3.5rem 0; border-bottom: 1px solid var(--line-warm); }
.press-block .eyebrow { display: block; }
.press-block h2 { font-size: clamp(1.875rem, 3.5vw, 2.25rem); line-height: 1.1; letter-spacing: -0.025em; margin-top: 1rem; }
.press-block__sub {
  margin-top: 0.9rem; display: flex; align-items: center; justify-content: center; gap: 0.9rem;
  color: var(--espresso); font-size: 1rem;
}
.press-block__sub::before, .press-block__sub::after { content: ""; width: 28px; height: 1px; background: var(--line); }
.press-line { display: flex; align-items: center; justify-content: center; gap: 0.6rem; flex-wrap: wrap; text-align: center; }
.press-line__label { font-size: 12px; font-weight: 500; letter-spacing: 1.44px; text-transform: uppercase; color: var(--taupe-deep); margin: 0; }

/* ---------------------------------------------------------------------- */
/* Signature dishes: photo with the name over it (scrim + white text).    */
/* ---------------------------------------------------------------------- */
.dish-list { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
@media (min-width: 720px) { .dish-list { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
.dish__media { position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 1 / 1; margin-bottom: 1rem; }
.dish__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.dish:hover .dish__media img { transform: scale(1.05); }
.dish__name { font-size: 1.125rem; line-height: 1.55; font-weight: 300; margin: 0 0 0.5rem; }
.dish__desc { margin: 0; color: var(--taupe-text); font-size: 0.875rem; line-height: 1.625; }

/* ---------------------------------------------------------------------- */
/* Story                                                                  */
/* ---------------------------------------------------------------------- */
.story-grid { display: grid; grid-template-columns: 1fr; gap: 4rem; align-items: center; }
@media (min-width: 800px) {
  .story-grid { grid-template-columns: 1fr 1fr; gap: 6rem; }
  /* Live site runs copy on the left, photo on the right. `order` swaps the
     visual position without moving the copy after the image in the DOM, so
     a screen reader still reaches the heading and paragraphs first. */
  .story-media { order: 2; }
  .story-copy { order: 1; }
}
.story-media { position: relative; }
.story-media__frame { border-radius: 16px; overflow: hidden; height: 400px; }
@media (min-width: 1024px) { .story-media__frame { height: 550px; } }
.story-media__frame img { width: 100%; height: 100%; object-fit: cover; }
.story-copy h2 { font-size: clamp(1.875rem, 4vw, 3rem); line-height: 1; margin-top: 1rem; margin-bottom: 2rem; }
.story-copy p { color: var(--taupe-text); line-height: 1.625; }
/* Live glass card: white 80%, blur 20px, 16px radius, 24px padding,
   shadow-lg, hanging 24px below and 48px left of the photo. Solid on small
   screens, no backdrop filter under the mobile breakpoint. */
.story-quote {
  position: absolute; left: -12px; bottom: -24px; max-width: 320px; margin: 0;
  padding: 24px; border-radius: 16px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(201, 184, 168, 0.2);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}
@media (min-width: 961px) {
  .story-quote { left: -48px; background: rgba(255, 255, 255, 0.8); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
}
.story-quote p { margin: 0; font-size: 0.875rem; line-height: 1.625; font-style: italic; color: var(--espresso); }
.story-quote footer { margin-top: 0.75rem; font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--taupe-text); }
/* Story stats: static "2021 / Founded" and "100% / Authentic" facts (never
   an animated counter onto a checked fact, house rule). */
.story-stats { display: flex; gap: 3rem; margin-top: 3rem; }
.story-stat__num { display: block; font-size: clamp(2.25rem, 4vw, 3rem); font-weight: 300; color: var(--stat); line-height: 1; }
.story-stat__label { display: block; margin-top: 0.5rem; font-size: 12px; font-weight: 300; letter-spacing: 0.05em; text-transform: uppercase; color: var(--taupe-text); }

/* ---------------------------------------------------------------------- */
/* Gallery                                                                */
/* ---------------------------------------------------------------------- */
.section--gallery { background: var(--white); }
.gallery-instagram-link { text-align: center; margin: -2rem 0 3rem; }
/* Live gallery is a bento of large rounded tiles (a 2x2 feature, tall
   columns, a wide tile). Same idea on a fixed row height, every tile
   object-fit: cover, so mixed source aspects still sit on one grid. */
.gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; gap: 12px; }
.gallery-item { margin: 0; min-width: 0; }
.gallery-item--feature { grid-column: span 2; grid-row: span 2; }
.gallery-item--wide { grid-column: span 2; }
@media (min-width: 800px) {
  .gallery-grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 360px; gap: 24px; }
  .gallery-item--tall { grid-row: span 2; }
}
.gallery-item__media { border-radius: 16px; overflow: hidden; height: 100%; }
.gallery-item__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; }
.gallery-item:hover .gallery-item__media img { transform: scale(1.06); }
.gallery-item figcaption {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
}

/* ---------------------------------------------------------------------- */
/* Closing CTA                                                            */
/* ---------------------------------------------------------------------- */
.closing-band { position: relative; overflow: hidden; }
.closing-band__media { position: absolute; inset: 0; }
.closing-band__media img { width: 100%; height: 100%; object-fit: cover; }
/* Live wash: cream 20% at the top to espresso 40% at the foot. */
.closing-band__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(253, 249, 245, 0.2), rgba(107, 93, 79, 0.4)); }
.closing-band__inner { position: relative; }
/* Live card: white 80% + blur 20px, 24px radius, 80px/64px padding, max 800px.
   Solid under the mobile breakpoint, no backdrop filter there. */
.closing {
  text-align: center; max-width: 800px; margin: 0 auto;
  padding: 4rem 1.5rem; border-radius: 24px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(201, 184, 168, 0.2);
}
@media (min-width: 961px) {
  .closing { padding: 5rem 4rem; background: rgba(255, 255, 255, 0.8); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
}
.closing .eyebrow { display: block; margin-bottom: 1rem; }
/* Two-line heading pattern (CLONE-GAPS.md section 2): first line plain,
   second line, wrapped in <em>, carries the italic emphasis. Font-style is
   no longer forced on the whole h2, only the global `h1/h2/h3 em` rule
   applies it to the second line, same mechanism as the hero and story. */
.closing h2 { font-size: clamp(1.875rem, 4vw, 3rem); line-height: 1.1; }
.closing p { color: var(--taupe-text); font-size: 1.125rem; line-height: 1.625; max-width: 52ch; margin: 1.5rem auto 2.5rem; }
.closing .btn-row { justify-content: center; gap: 1rem; }
.closing__meta {
  margin-top: 3rem; padding-top: 2rem; border-top: 1px solid rgba(201, 184, 168, 0.35);
  display: grid; grid-template-columns: 1fr; gap: 1.25rem;
  font-size: 0.875rem; line-height: 1.45; color: var(--taupe-text);
}
@media (min-width: 640px) { .closing__meta { grid-template-columns: 1fr 0.8fr 1.5fr; gap: 1.5rem; } }
.closing__meta-item { display: flex; flex-direction: column; gap: 0.2rem; }
.closing__meta a { color: var(--taupe-text); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; min-height: 24px; }
.closing__meta a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------------------------- */
/* Order page (rebuilt 2026-09-23)                                        */
/* ---------------------------------------------------------------------- */
/* Homepage hero carries no headline since 2026-09-22 (Andy), only the two
   buttons and the scroll hint, so it drops the heavy text scrim and shows the
   photograph. Top band stays for the header nav. Re-measured 2026-09-23. */
.photo-hero--home .photo-hero__media::after {
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 24%),
    linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.3) 30%, rgba(0, 0, 0, 0) 60%),
    linear-gradient(to right, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 45%);
}
/* With the light scrim the see-through secondary button measured 2.6:1 over
   bright food, so here it carries its own dark glass fill. */
.photo-hero--home .btn--outline-inverse { background: rgba(20, 15, 10, 0.55); border-color: rgba(255, 255, 255, 0.6); }
.photo-hero--home .btn--outline-inverse:hover { background: rgba(20, 15, 10, 0.7); }
.photo-hero--order { min-height: 78vh; }
/* Order and careers heroes sit on brighter photos (white tables) with type
   higher up the frame, so they take a deeper shade than the homepage.
   Measured on composited pixels 2026-09-23. */
.photo-hero--order .photo-hero__media::after {
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 26%),
    linear-gradient(to top, rgba(0, 0, 0, 0.86) 0%, rgba(0, 0, 0, 0.74) 40%, rgba(0, 0, 0, 0.5) 75%, rgba(0, 0, 0, 0.3) 100%),
    linear-gradient(to right, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 65%);
}
.photo-hero--order .hero-meta-row__text { display: block; margin-bottom: 1.25rem; }
.order-options { display: grid; grid-template-columns: 1fr; gap: 1.5rem; max-width: 960px; margin: 0 auto; }
@media (min-width: 800px) { .order-options { grid-template-columns: 1.15fr 1fr; gap: 2rem; } }
.order-option {
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 2.5rem 2rem; border-radius: 24px;
  background: var(--white); border: 1px solid rgba(201, 184, 168, 0.35);
}
.order-option--primary {
  border-color: var(--taupe);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.08);
}
.order-option h3 { font-size: 1.6rem; margin: 0 0 0.75rem; }
.order-option p { color: var(--taupe-text); line-height: 1.625; margin: 0 0 2rem; }
.order-option .btn { margin-top: auto; }
.order-badge {
  display: inline-block; margin-bottom: 1.25rem; padding: 4px 12px; border-radius: var(--radius-pill);
  background: var(--taupe-ink); color: #fff;
  font-size: 10px; font-weight: 500; letter-spacing: 0.25em; text-transform: uppercase;
}
.section--perks { padding: 4.5rem 0; }
.perks { display: grid; grid-template-columns: 1fr; gap: 2.5rem; text-align: center; }
@media (min-width: 720px) { .perks { grid-template-columns: repeat(3, 1fr); gap: 2rem; } }
.perk__icon { display: inline-flex; width: 52px; height: 52px; align-items: center; justify-content: center; border-radius: 50%; background: var(--cream); color: var(--taupe-ink); margin-bottom: 1rem; }
.perk__icon svg { width: 24px; height: 24px; }
.perk h3 { font-size: 1.125rem; margin: 0 0 0.4rem; }
.perk p { margin: 0 auto; max-width: 28ch; color: var(--taupe-text); font-size: 0.9375rem; }
.dish__media--wide { aspect-ratio: 3 / 2; }
.dish__media picture { display: block; width: 100%; height: 100%; }
.dish__top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.dish__price { color: var(--taupe-text); font-weight: 400; white-space: nowrap; }
.dish__order { display: inline-flex; align-items: center; min-height: 44px; margin-top: 0.5rem; font-size: 12px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; }

/* ---------------------------------------------------------------------- */
/* Footer                                                                 */
/* ---------------------------------------------------------------------- */
.site-footer { background: var(--cream); border-top: 1px solid var(--line-warm); padding: 4rem 0 1.5rem; }
@media (min-width: 1024px) { .site-footer { padding-top: 6rem; } }
.footer__grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
@media (min-width: 760px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1.5fr 0.8fr; gap: 2rem; } }
.footer__brand .brand { margin-bottom: 1rem; }
.brand__mark-solo { width: 34px; height: 34px; flex: none; display: flex; }
.brand__mark-solo img { width: 100%; height: 100%; object-fit: contain; }
.footer__brand .brand__word { display: block; color: var(--ink); }
.footer__brand p { max-width: 34ch; font-size: 0.92rem; }
.footer__social { display: flex; gap: 0.8rem; margin-top: 1rem; }
/* Labelled links, not icon-only (CLONE-GAPS.md section 2): the icon stays
   for recognition, the visible text carries the accessible name so it is
   never dependent on the aria-label alone. */
.footer__social a {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 36px; padding: 0 0.9rem;
  border-radius: var(--radius-pill); border: 1px solid var(--line); color: var(--espresso-deep);
  font-size: 0.85rem; text-decoration: none;
}
.footer__social a:hover { color: var(--ink); border-color: var(--espresso-deep); }
.footer__social svg { width: 16px; height: 16px; flex: none; }
.footer__heading { font-size: 12px; font-weight: 500; letter-spacing: 1.44px; text-transform: uppercase; color: var(--espresso-deep); margin-bottom: 0.9rem; }
.footer__list { display: flex; flex-direction: column; gap: 0.55rem; font-size: 0.92rem; }
.footer__list a { text-decoration: none; color: var(--espresso); display: inline-flex; align-items: center; min-height: 24px; }
.footer__list a:hover { color: var(--ink); }
.hours-row { display: flex; justify-content: space-between; gap: 1rem; }
.hours-row > :last-child { white-space: nowrap; }
.footer__bottom {
  margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; font-size: 0.82rem; color: var(--espresso);
}
.footer__legal-links { display: flex; gap: 1.1rem; flex-wrap: wrap; }
.footer__legal-links a { color: var(--espresso); text-decoration: none; }
.footer__legal-links a:hover { color: var(--ink); }

/* ---------------------------------------------------------------------- */
/* Menu page                                                              */
/* ---------------------------------------------------------------------- */

/* ---------------------------------------------------------------------- */
/* Brunch: flavor pills                                                   */
/* ---------------------------------------------------------------------- */
.flavor-row { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; }
.flavor-pill {
  font-size: 11px; font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase;
  border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 0.5em 1.1em; color: var(--espresso-deep);
}

/* ---------------------------------------------------------------------- */
/* Careers (rebuilt 2026-09-23). Perks reuse .perks from the order page.   */
/* ---------------------------------------------------------------------- */
.section--careers-why { padding: 6rem 0; }
@media (min-width: 900px) { .perks--4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 720px) and (max-width: 899px) { .perks--4 { grid-template-columns: repeat(2, 1fr); } }
.role-groups { max-width: 920px; margin: 0 auto; display: flex; flex-direction: column; gap: 3rem; }
.role-group__title {
  font-size: 12px; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--taupe-text); margin: 0 0 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--line-warm);
}
.role-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem;
  padding: 1.5rem 1.75rem; margin-bottom: 0.75rem; border-radius: 16px;
  background: var(--white); border: 1px solid rgba(201, 184, 168, 0.35);
}
.role-row__main { flex: 1 1 22rem; min-width: 0; }
.role-row__head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin-bottom: 0.4rem; }
.role-row h4 { margin: 0; font-size: 1.25rem; font-weight: 300; line-height: 1.3; color: var(--espresso); }
.role-row p { margin: 0; font-size: 0.9375rem; line-height: 1.6; color: var(--taupe-text); max-width: 56ch; }
.role-tag {
  font-size: 10px; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase;
  background: var(--cream); color: var(--espresso-deep); border-radius: var(--radius-pill); padding: 0.35em 0.9em;
}
.section--careers-cta { padding: 6rem 0; }
.careers-cta { max-width: 640px; margin: 0 auto; text-align: center; }
.careers-cta h2 { font-size: clamp(1.875rem, 4vw, 2.75rem); line-height: 1.1; }
.careers-cta p { color: var(--taupe-text); font-size: 1.0625rem; line-height: 1.625; margin: 1.25rem auto 2rem; }

/* ---------------------------------------------------------------------- */
/* Contact page                                                           */
/* ---------------------------------------------------------------------- */
/* Contact (rebuilt 2026-09-23) */
.page-header--contact { padding-bottom: 4rem; }
.page-header--contact h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); }
.page-header--contact .btn-row { margin-top: 2rem; }
.section--contact-cards { padding: 4rem 0; }
.section--contact-form { padding: 5rem 0; }
.contact-cards { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 640px) { .contact-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .contact-cards { grid-template-columns: 1fr 1fr 1fr 1.35fr; } }
.contact-card {
  padding: 1.75rem; border-radius: 16px;
  background: var(--white); border: 1px solid rgba(201, 184, 168, 0.35);
}
.contact-card h3 { font-size: 12px; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; color: var(--taupe-text); margin: 0 0 0.6rem; }
.contact-card p { margin: 0; color: var(--espresso); line-height: 1.6; }
.contact-card__value { color: var(--espresso); text-decoration: none; display: inline-flex; align-items: center; min-height: 24px; font-size: 1.05rem; }
.contact-card__value:hover { text-decoration: underline; text-underline-offset: 3px; }
.contact-card__link { display: inline-flex; align-items: center; min-height: 24px; margin-top: 0.6rem; }
.contact-card__hours .hours-row { font-size: 0.9375rem; padding: 0.15rem 0; color: var(--espresso); }
.contact-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: stretch; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1.1fr 1fr; gap: 2.5rem; } }
.contact-form-card { padding: 2.5rem 1.75rem; border-radius: 24px; background: var(--white); border: 1px solid rgba(201, 184, 168, 0.35); }
@media (min-width: 640px) { .contact-form-card { padding: 2.5rem; } }
.contact-form-card h2 { font-size: clamp(1.6rem, 3vw, 2rem); margin: 0 0 1.75rem; }
.field-row { display: grid; grid-template-columns: 1fr; gap: 0 1rem; }
@media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; } }
.field { margin-bottom: 1.1rem; }
.field label { display: block; font-size: 12px; font-weight: 500; letter-spacing: 1.2px; text-transform: uppercase; color: var(--espresso-deep); margin-bottom: 0.45rem; }
.field input, .field textarea {
  width: 100%; padding: 0.85em 1em; border: 1px solid rgba(201, 184, 168, 0.6); border-radius: 12px;
  font-family: inherit; font-size: 1rem; color: var(--ink); background: var(--cream);
}
.field input:focus, .field textarea:focus { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--focus); background: var(--white); }
.form-note { font-size: 0.82rem; color: var(--taupe-text); margin-top: 0.9rem; }
.form-status { font-size: 0.85rem; color: var(--espresso-deep); margin-top: 0.6rem; opacity: 0; height: 0; overflow: hidden; }
.form-status.is-visible { opacity: 1; height: auto; margin-top: 0.9rem; }
.contact-map { display: flex; flex-direction: column; }
.contact-map .map-wrap { flex: 1; min-height: 320px; aspect-ratio: auto; border-radius: 24px; }
.map-wrap { position: relative; aspect-ratio: 16 / 10; border-radius: 8px; overflow: hidden; border: 1px solid rgba(201, 184, 168, 0.35); background: var(--white); }
.map-wrap iframe { width: 100%; height: 100%; border: 0; position: relative; z-index: 1; }
.map-open-link { display: inline-flex; align-items: center; min-height: 24px; margin-top: 0.8rem; font-size: 0.88rem; align-self: flex-start; }

/* ---------------------------------------------------------------------- */
/* Prose (privacy / accessibility)                                        */
/* ---------------------------------------------------------------------- */
.prose { max-width: 68ch; }
.prose h2 { font-size: 1.3rem; font-style: italic; margin: 2rem 0 0.8rem; }
.prose p { font-size: 0.98rem; }

/* ---------------------------------------------------------------------- */
/* 404                                                                    */
/* ---------------------------------------------------------------------- */
.error-page { padding: 10rem 0 6rem; text-align: center; }
.error-page h1 { font-size: clamp(2rem, 5vw, 2.8rem); font-style: italic; margin: 0.6rem 0 1rem; }
.error-page p { max-width: 48ch; margin-left: auto; margin-right: auto; }
.error-page .btn-row { justify-content: center; margin-top: 1.4rem; }
.error-lang-block { margin-top: 3.5rem; padding-top: 3rem; border-top: 1px solid var(--line); }


/* ---------------------------------------------------------------------------
   MENU: live layout. A pill row filters to one category at a time over a
   three-up card grid, which is what mitierramiami.com/Menu does. Values were
   measured off the live page on 2026-09-07: card radius 16px, 256px photo,
   24px card padding, 32px grid gap, name #6b5d4f, price #c9b8a8.

   One departure: the live active pill puts white text on the taupe #c9b8a8,
   which measures 2.0:1. Ours fills with --taupe-ink for 5.32:1. Same shape,
   readable.
   --------------------------------------------------------------------------- */

.menu-intro { padding: 4.5rem 0 2rem; background: var(--white); }
@media (max-width: 700px) { .menu-intro { padding: 3rem 0 1.5rem; } }

.menu-toolbar {
  position: sticky; top: 72px; z-index: 90;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--line);
  padding: 0.9rem 0;
}
.menu-pills {
  display: flex; gap: 0.6rem; overflow-x: auto; scrollbar-width: none;
  padding-bottom: 2px; scroll-snap-type: x proximity;
}
.menu-pills::-webkit-scrollbar { display: none; }
.menu-pill {
  flex: 0 0 auto; scroll-snap-align: start;
  font: inherit; font-size: 12px; letter-spacing: 1.8px; text-transform: uppercase;
  padding: 12px 26px; min-height: 44px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.8);
  color: var(--espresso);
  cursor: pointer; white-space: nowrap;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.menu-pill:hover { border-color: var(--taupe-ink); }
.menu-pill.is-active {
  background: var(--taupe-ink); border-color: var(--taupe-ink); color: #fff;
}
.menu-pill:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.menu-body { background: var(--white); padding: 3rem 0 4.5rem; }
.menu-panel__heading {
  font-size: 12px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase;
  color: var(--taupe-text); margin: 0 0 1.6rem; text-align: center;
}
/* A group-level note (Entrees' side choice, Soups served with rice, Sides $6
   each, Kids served with fries), from menu-overrides.json group_notes. */
.menu-panel__note {
  font-size: 0.88rem; line-height: 1.6; color: var(--espresso);
  margin: -1rem auto 1.8rem; max-width: 640px; text-align: center;
}
/* Shown under the tabs too (it was display:none there, so guests never saw
   'served with your choice of one side' or 'Sides $6 each'). Fixed 2026-09-23. */
.js-filter .menu-panel__note { margin-top: 0; }
/* No JavaScript: every category stays in the flow, so the whole menu reads. */
.menu-panel + .menu-panel { margin-top: 3.5rem; }
/* With JavaScript: the script stamps this class on <html> and the pills take
   over, one panel at a time. Scoped so a script failure can never blank the
   menu, which is the failure this project has already shipped once. */
.js-filter .menu-panel { display: none; }
.js-filter .menu-panel.is-active { display: block; }
.js-filter .menu-panel + .menu-panel { margin-top: 0; }
.js-filter .menu-panel__heading { display: none; }
/* Sub-group headings inside a tab (Coffee / Tea, the three Happy hour groups).
   They had no rule at all and rendered as bare browser text above the cards. */
.menu-subhead {
  font-size: clamp(1.5rem, 2.6vw, 1.875rem); font-weight: 300; line-height: 1.2;
  color: var(--espresso); margin: 3rem 0 1.5rem; padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--line-warm);
}
.menu-panel__heading + .menu-subhead, .menu-panel__note + .menu-subhead { margin-top: 0.5rem; }

.dish-grid {
  display: grid; grid-template-columns: 1fr; gap: 2rem;
}
@media (min-width: 700px)  { .dish-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .dish-grid { grid-template-columns: repeat(3, 1fr); } }

.dish-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 1px 2px rgba(60, 51, 43, 0.05);
  transition: box-shadow 0.4s ease, transform 0.4s ease;
}
@media (hover: hover) {
  .dish-card:hover { box-shadow: 0 18px 40px rgba(60, 51, 43, 0.13); transform: translateY(-3px); }
  .dish-card:hover .dish-card__media img { transform: scale(1.06); }
}
.dish-card__media { position: relative; height: 256px; overflow: hidden; background: var(--cream-2); }
.dish-card__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.7s ease;
}
.dish-card__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.2), transparent 55%);
  pointer-events: none;
}
.dish-card__body { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; }
.dish-card__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 0.7rem; }
.dish-card__name { margin: 0; font-size: 1.25rem; font-weight: 300; line-height: 1.3; color: var(--espresso); flex: 1; }
.dish-card__price { font-size: 1.05rem; font-weight: 400; color: var(--taupe-text); white-space: nowrap; }
.dish-card__desc { margin: 0; font-size: 0.9rem; line-height: 1.65; color: var(--espresso); }
/* Paid add-ons and, for the wines, the glass/bottle prices. Both come straight
   from Toast's modifier groups, so the numbers are the ones a guest is charged. */
.dish-card__opts, .dm-card__opts {
  margin: 0.55rem 0 0; padding-top: 0.5rem; border-top: 1px dotted var(--line);
  font-size: 0.82rem; line-height: 1.5; color: var(--taupe-text);
}
.dish-card__opts-lead, .dm-card__opts-lead {
  font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase; margin-right: 0.35em;
}
.dm-card__opts { color: #e2d2bf; border-top-color: rgba(255,255,255,0.22); font-size: 0.88rem; }
/* Chef's pick / Recomendado del chef: same small tracked-caps treatment as an
   eyebrow, no new color. */
.dish-card__pick, .dm-card__pick {
  display: inline-block; font-size: 10px; font-weight: 500; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--taupe-text); margin: -0.35rem 0 0.55rem;
}
.dm-card__pick { color: #e2d2bf; }
.dish-card--nophoto .dish-card__body { padding-top: 1.75rem; }

.menu-closing { background: var(--cream); padding: 4rem 0; text-align: center; }
.menu-closing__text { margin: 0 0 1.75rem; color: var(--espresso); font-size: 1.02rem; }
.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: #241e19; }

/* No hero copy since 2026-09-23: a shorter band so the menu starts sooner. */
.photo-hero--menu { min-height: 62vh; }
.photo-hero--menu .photo-hero__sub {
  max-width: 34rem; margin: 0.9rem 0 1.6rem; color: #fff; font-size: 1rem; line-height: 1.7;
}


/* Prev / next category stepper under the grid. The pill row is sticky, but on a
   long category a diner is 3000px from it, so the walk forward lives here too. */
.menu-stepper {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid var(--line);
}
.stepper {
  display: flex; flex-direction: column; gap: 2px; min-height: 44px;
  padding: 8px 16px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--white); color: var(--espresso);
  font: inherit; text-align: left; cursor: pointer; text-decoration: none;
  max-width: 42%;
}
.stepper--next { text-align: right; align-items: flex-end; }
.stepper--top { align-items: center; justify-content: center; border: none; background: none; color: var(--taupe-text); font-size: 0.85rem; }
.stepper__dir { font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--taupe-text); }
.stepper__label { font-size: 0.95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.stepper:hover:not(:disabled) { border-color: var(--taupe-ink); }
.stepper:disabled { opacity: 0; pointer-events: none; }
.stepper:focus-visible, .menu-pill:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (max-width: 560px) { .stepper__label { font-size: 0.85rem; } }

/* The pill row scrolls horizontally and gave no sign there was more to the
   right. A fade on the trailing edge says "keep going" without a scrollbar. */
.menu-toolbar .container { position: relative; }
.menu-toolbar .container::after {
  content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 40px;
  background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0.96));
  pointer-events: none;
}


/* Card photo is a button now (lightbox trigger), so it must reset button chrome. */
.dish-card__media { display: block; width: 100%; padding: 0; border: 0; background: var(--cream-2); cursor: zoom-in; position: relative; height: 256px; overflow: hidden; }
.dish-card__zoom {
  position: absolute; right: 10px; bottom: 10px; z-index: 2;
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.92); color: var(--espresso);
  opacity: 0; transition: opacity 0.25s ease;
}
.dish-card__media:hover .dish-card__zoom, .dish-card__media:focus-visible .dish-card__zoom { opacity: 1; }
@media (hover: none) { .dish-card__zoom { opacity: 1; } }
.dish-card__media:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.menu-pill__n {
  /* No opacity. At 0.6 this measured 2.65:1 on the inactive pill. Opacity is
     invisible to a naive contrast check and this is what it costs. */
  margin-left: 0.5em; font-size: 10px; letter-spacing: 0.5px; color: var(--taupe-text);
}
/* Full white, not 0.85: at 85% over --taupe-ink this measured 4.36:1. */
.menu-pill.is-active .menu-pill__n { color: #fff; }

/* Lightbox */
.lb { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; }
.lb__backdrop { position: absolute; inset: 0; background: rgba(24, 20, 17, 0.92); }
.lb__inner { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; height: 100%; height: 100dvh; padding: 1rem; }
/* Capped and centred. It was running to the full viewport and, once the page was
   scrolled, reading as sitting too high. .lb is fixed, .lb__inner centres in it,
   and dvh keeps a phone's collapsing chrome from pushing the figure off. */
.lb__fig { margin: auto; max-width: min(760px, 88vw); display: flex; flex-direction: column; align-items: center; gap: 0.8rem; }
.lb__fig img { max-width: 100%; max-height: 56vh; max-height: 56dvh; border-radius: 10px; display: block; background: var(--espresso-deep); }
.lb__cap { color: #fff; text-align: center; display: flex; flex-direction: column; gap: 0.3rem; max-width: 52ch; }
.lb__name { font-size: 1.35rem; font-weight: 300; }
.lb__price { color: #e6d9c9; font-size: 1.05rem; }
.lb__desc { color: rgba(255, 255, 255, 0.86); font-size: 0.92rem; line-height: 1.6; }
.lb__btn {
  flex: 0 0 auto; width: 48px; height: 48px; min-width: 48px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.12);
  color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer;
}
.lb__btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.24); }
.lb__btn:disabled { opacity: 0.25; cursor: default; }
.lb__btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.lb__close { position: absolute; top: 1rem; right: 1rem; z-index: 2; }
@media (max-width: 640px) {
  .lb__inner { padding: 0.5rem; }
  .lb__btn { width: 44px; height: 44px; min-width: 44px; }
  .lb__fig img { max-height: 46vh; max-height: 46dvh; }
  .lb__prev { position: absolute; left: 0.5rem; top: 50%; }
  .lb__next { position: absolute; right: 0.5rem; top: 50%; }
}

/* ---------------------------------------------------------------------------
   DIGITAL MENU (/DigitalMenu) -- the QR menu on the tables.

   Andy 2026-09-07, final direction: "one dish per page card, with the black
   fade and text, copy live digital menu dynamics with our category upgrades",
   and "search, tiny icon top right next to language and click to open, not full
   time." So the photograph IS the page, one dish per screen, with a black fade
   carrying the type, which is what the live carousel does. The chrome stays
   light and small; the earlier complaint was a near black PAGE, not a scrim
   over a photo.

   Our upgrades on top of theirs: every item rather than eight, category filters,
   search, no dead end, and slides at about 78KB instead of megabyte originals.
   --------------------------------------------------------------------------- */
.dm-page { background: #14110f; color: #fff; min-height: 100vh; }

.dm-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30;
  background: linear-gradient(to bottom, rgba(12, 10, 9, 0.82), rgba(12, 10, 9, 0));
  padding-bottom: 0.6rem;
}
.dm-bar__top {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.7rem var(--gutter) 0.5rem;
}
.dm-brand { display: flex; align-items: center; gap: 0.5rem; text-decoration: none; color: #fff; min-height: 40px; }
.dm-brand img { height: 24px; width: auto; }
.dm-brand__word { font-size: 11px; letter-spacing: 2.4px; text-transform: uppercase; color: rgba(255,255,255,0.82); }
.dm-bar__tools { display: flex; align-items: center; gap: 0.5rem; }
.dm-searchbtn {
  width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; cursor: pointer; color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.12);
}
.dm-searchbtn[aria-expanded="true"], .dm-searchbtn:hover { background: rgba(255, 255, 255, 0.26); }
.dm-searchbtn:focus-visible, .dm-chip:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.dm-lang { display: flex; align-items: center; gap: 2px; border: 1px solid rgba(255,255,255,0.3); border-radius: var(--radius-pill); padding: 2px; }
.dm-lang__on, .dm-lang__off {
  min-width: 34px; min-height: 32px; display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill); font-size: 11px; letter-spacing: 1.4px;
  text-transform: uppercase; text-decoration: none;
}
.dm-lang__on { background: #fff; color: #2a231d; }
.dm-lang__off { color: rgba(255, 255, 255, 0.85); }
.dm-lang__off:hover { background: rgba(255, 255, 255, 0.18); }

.dm-bar__search { padding: 0 var(--gutter) 0.5rem; }
.dm-search input {
  width: 100%; min-height: 44px; padding: 10px 16px; font-size: 16px; font-family: inherit;
  border-radius: var(--radius-pill); border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(20, 17, 15, 0.72); color: #fff;
}
.dm-search input::placeholder { color: rgba(255, 255, 255, 0.6); }
.dm-search input:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }

.dm-chips { display: flex; gap: 0.4rem; overflow-x: auto; scrollbar-width: none; padding: 0 var(--gutter); }
.dm-chips::-webkit-scrollbar { display: none; }
.dm-chip {
  flex: 0 0 auto; font: inherit; font-size: 11px; letter-spacing: 1.3px; text-transform: uppercase;
  padding: 8px 14px; min-height: 36px; border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(20, 17, 15, 0.5);
  color: #fff; cursor: pointer; white-space: nowrap;
}
.dm-chip:hover { background: rgba(255, 255, 255, 0.2); }
.dm-chip.is-active { background: #fff; border-color: #fff; color: #2a231d; }

/* One dish per screen. svh, not vh, so a phone's collapsing browser chrome does
   not crop the type off the bottom. */
/* The scroller is the document, not .dm-deck, so scroll-snap-type has to live on
   the root or it does nothing at all, which is why it stopped halfway between
   dishes. scroll-padding-top keeps a snapped slide clear of the fixed header. */
html:has(.dm-page) { scroll-snap-type: y mandatory; scroll-padding-top: 0; }
.dm-deck { scroll-snap-type: none; }
.dm-group { display: contents; }
.dm-group__head { display: none; }
/* A group-level note (Entrees' side choice, Soups served with rice, Sides $6
   each, Kids served with fries), from menu-overrides.json group_notes. The
   heading above it stays hidden by design; this stays visible since it is
   information a diner needs, not a label the chips already give them. */
.dm-group__note {
  margin: 1.6rem auto 0.6rem; padding: 0 1.25rem; max-width: 46ch;
  font-size: 0.85rem; line-height: 1.55; text-align: center; color: rgba(255, 255, 255, 0.72);
}
.dm-grid { display: block; }
.dm-card {
  scroll-snap-align: start; scroll-snap-stop: always;
  position: relative; height: 100vh; height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  background: #14110f; overflow: hidden;
}
.dm-card__media { position: absolute; inset: 0; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.dm-card__media picture, .dm-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dm-card__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(8, 6, 5, 0.94) 0%, rgba(8, 6, 5, 0.72) 26%, rgba(8, 6, 5, 0.18) 54%, rgba(8, 6, 5, 0.05) 100%);
}
.dm-card__media:focus-visible { outline: 3px solid var(--focus); outline-offset: -4px; }
.dm-card__zoom {
  position: absolute; right: 14px; top: 96px; width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; z-index: 3;
  background: rgba(255, 255, 255, 0.9); color: #2a231d;
}
.dm-card--text { justify-content: center; height: auto; min-height: 56svh; padding: 3rem 0; }
.dm-card__body { position: relative; z-index: 2; padding: 0 var(--gutter) 3.2rem; }
.dm-card__cat { display: block; font-size: 11px; letter-spacing: 2.2px; text-transform: uppercase; color: #e2d2bf; margin-bottom: 0.5rem; }
.dm-card__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.dm-card__name { margin: 0; font-size: 1.75rem; font-weight: 300; line-height: 1.18; color: #fff; }
.dm-card__price { font-size: 1.2rem; color: #ecdcc9; white-space: nowrap; }
.dm-card__desc { margin: 0.6rem 0 0; font-size: 0.95rem; line-height: 1.62; color: rgba(255, 255, 255, 0.92); max-width: 46ch; }
@media (min-width: 900px) {
  .dm-card__body { max-width: 1100px; margin: 0 auto; width: 100%; }
  .dm-card__name { font-size: 2.1rem; }
}

.dm-empty { padding: 8rem var(--gutter) 4rem; text-align: center; color: rgba(255,255,255,0.88); }
.dm-end { padding: 4rem var(--gutter) 4.5rem; text-align: center; background: #1c1815; scroll-snap-align: start; }
.dm-end p { color: rgba(255, 255, 255, 0.9); margin: 0 0 1.4rem; }
.dm-end__row { display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center; }
.dm-end__top { display: inline-block; margin-top: 1.5rem; color: #e2d2bf; font-size: 0.9rem; min-height: 44px; line-height: 44px; }

/* Screen reader only. This class was used in the markup and never defined, so
   the digital menu rendered "Buscar en el menu" and "Categorias" as visible
   text on top of the search field (caught on the deployed page, 2026-09-07).
   Not `display: none`, which would take it out of the accessibility tree too. */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}


/* Tap targets. Measured at 375 on the deployed pages 2026-09-07: footer list and
   legal links were 23.5px tall, the inline text links 19px to 21px, and the
   contact map link 23px. WCAG 2.2 target size (minimum) is 24x24. Primary
   controls stay at 44. */
.footer__list a, .footer__legal-links a, .footer__hiring a {
  display: inline-flex; align-items: center; min-height: 24px;
}
.text-link, .map-open-link { display: inline-flex; align-items: center; min-height: 24px; }
.lang-switch__opt { min-height: 34px; }


/* Last of the 24x24 target sweep, measured 2026-09-07. The footer language
   links and the two-letter ES/EN switch were 16px to 18px WIDE (tall enough,
   too narrow), and links sitting inside prose on the legal pages were 19px to
   20px tall. */
/* Selectors verified against the rendered DOM rather than guessed: the ES/EN
   pair lives in .footer__legal-links (24px tall but only 16px and 18px WIDE),
   and the contact phone and email are display:inline inside .info-item, which
   is why a min-height did nothing to them. */
.footer__legal-links a { min-width: 24px; justify-content: center; }
.info-item a, .prose a, .footer__bottom a {
  display: inline-flex; align-items: center; min-height: 24px;
}

/* Wrapping (Andy 2026-09-23: "check word wraps"). Names break evenly instead of
   leaving "Hueso" or "Cerdo" alone on a second line; descriptions avoid a single
   stranded last word. Both degrade to normal wrapping where unsupported. */
.dish-card__name, .menu-panel__note, .menu-subhead { text-wrap: balance; }
.dish-card__desc { text-wrap: pretty; }
.section-head p { text-wrap: pretty; }
.stepper--top { white-space: nowrap; }
/* Phones: Previous and Next share the row, "All categories" gets its own line
   under them instead of wrapping or pushing Next past the gutter. */
@media (max-width: 559px) {
  .menu-stepper { flex-wrap: wrap; row-gap: 0.25rem; }
  .stepper--top { order: 3; flex-basis: 100%; max-width: none; }
}
/* Section header for a tab that carries a note (Andy 2026-09-23: "the fries comment
   above the kids menu is odd, rework how this looks"). The note used to float alone,
   small and centred, between the pills and the cards. Now the tab's own name shows
   as an eyebrow, the note reads under it as a lead line, both on the grid's left
   edge, the same eyebrow + line pattern as the page header. Tabs without a note
   keep the heading hidden, so Cocktails never prints "Cocktails" twice. */
.js-filter .menu-panel__heading:has(+ .menu-panel__note) { display: block; }
.menu-panel__heading:has(+ .menu-panel__note) { text-align: left; margin: 0 0 0.5rem; }
.menu-panel__heading + .menu-panel__note,
.js-filter .menu-panel__heading + .menu-panel__note {
  margin: 0 0 2.25rem; max-width: 46rem; text-align: left;
  font-size: clamp(1.1rem, 1.6vw, 1.3rem); font-weight: 300; line-height: 1.5;
}