/* ==========================================================================
   Pack River Store — design system
   Palette pulled from the store itself: pine-green metal roof, weathered
   cedar sign, cream butcher paper, rust-red menu board.
   ========================================================================== */

:root {
  /* Color */
  --pine-900: #12241C;
  --pine-800: #1B3629;
  --pine-700: #234534;
  --pine-500: #35664E;
  --pine-300: #6E9C82;

  --rust-700: #8E3A22;
  --rust-600: #A6462B;
  --rust-500: #BE5637;

  --gold-600: #B5822A;
  --gold-500: #C79A3E;

  --ink: #1A1815;
  --ink-70: #4A453D;
  --muted: #6E6759;
  --line: #E2D9C9;
  --line-soft: #EFE9DD;

  --cream: #FBF7F0;
  --cream-2: #F5EEE1;
  --paper: #FFFFFF;

  /* Type */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Space + shape */
  --wrap: 1180px;
  --wrap-narrow: 760px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 20px;

  --shadow-sm: 0 1px 2px rgba(26, 24, 21, .06), 0 2px 8px rgba(26, 24, 21, .04);
  --shadow: 0 4px 12px rgba(26, 24, 21, .08), 0 16px 40px rgba(26, 24, 21, .07);
  --shadow-lg: 0 8px 24px rgba(26, 24, 21, .1), 0 32px 64px rgba(26, 24, 21, .12);

  --header-h: 72px;
}

/* --------------------------------------------------------------- Reset --- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchor jumps must clear the whole sticky stack, not just the header. */
  scroll-padding-top: calc(var(--promo-h) + var(--header-h) + 1rem);
}

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

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 .5em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.25rem, 5.5vw, 3.9rem); }
h2 { font-size: clamp(1.75rem, 3.6vw, 2.6rem); }
h3 { font-size: clamp(1.15rem, 1.8vw, 1.4rem); }

p { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--pine-700); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--rust-600); }

:focus-visible {
  outline: 3px solid var(--gold-500);
  outline-offset: 3px;
  border-radius: 3px;
}

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 2.5rem 0;
}

/* ------------------------------------------------------------- Utility --- */

.wrap { width: min(100% - (var(--gutter) * 2), var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - (var(--gutter) * 2), var(--wrap-narrow)); margin-inline: auto; }

.section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section--cream2 { background: var(--cream-2); }
.section--paper { background: var(--paper); }
.section--pine { background: var(--pine-800); color: var(--cream); }
.section--pine h1, .section--pine h2, .section--pine h3 { color: #fff; }
.section--pine a { color: var(--gold-500); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--pine-800);
  color: #fff;
  padding: .75rem 1.25rem;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

.eyebrow {
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rust-600);
  margin: 0 0 .9rem;
}
.section--pine .eyebrow { color: var(--gold-500); }

.lede {
  font-size: clamp(1.075rem, 1.6vw, 1.25rem);
  color: var(--ink-70);
  line-height: 1.6;
}
.section--pine .lede { color: rgba(251, 247, 240, .82); }

.rule {
  width: 64px;
  height: 3px;
  background: var(--rust-600);
  border-radius: 2px;
  margin: 0 0 1.5rem;
}
.rule--center { margin-inline: auto; }

.center { text-align: center; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* -------------------------------------------------------------- Button --- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .8rem 1.5rem;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--rust-600); border-color: var(--rust-600); color: #fff; box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--rust-700); border-color: var(--rust-700); color: #fff; }

.btn--pine { background: var(--pine-700); border-color: var(--pine-700); color: #fff; box-shadow: var(--shadow-sm); }
.btn--pine:hover { background: var(--pine-800); border-color: var(--pine-800); color: #fff; }

.btn--ghost { background: transparent; border-color: var(--line); color: var(--ink); }
.btn--ghost:hover { border-color: var(--pine-700); color: var(--pine-700); background: rgba(35, 69, 52, .04); }

.btn--light { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .45); color: #fff; backdrop-filter: blur(6px); }
.btn--light:hover { background: #fff; color: var(--pine-800); border-color: #fff; }

.btn--lg { padding: 1rem 1.9rem; font-size: 1.02rem; }
.btn--block { display: flex; width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }
.btn-row--center { justify-content: center; }

/* ----------------------------------------------------------- Promo bar ---
   Whitney Solutions sales banner. Deliberately near-black with gold links so
   it reads as an overlay on top of the site rather than part of the Pack
   River palette.

   It is the first of three stacked sticky bars: promo, then header, then (on
   the menu pages) the search toolbar. Each one pins below the one above it,
   so the offsets are chained through --promo-h. That variable is measured by
   main.js because the bar wraps to two lines on a phone; the value below is
   only a sensible fallback for the moment before JS runs, and for no-JS.

   Delete this block, and the markup in each page, at handover.
   -------------------------------------------------------------------------- */

:root { --promo-h: 42px; }

.promo-bar {
  position: sticky;
  top: 0;
  z-index: 120;
  background: var(--ink);
  border-bottom: 2px solid var(--gold-600);
  color: rgba(255, 255, 255, .9);
  font-size: .9rem;
  line-height: 1.45;
  text-align: center;
  padding: .7rem 0;
}
/* `margin: 0` here would beat .wrap's `margin-inline: auto` on specificity and
   pin the paragraph flush left — the text then centres inside an off-centre
   box. Keep the auto inline margins. */
.promo-bar p {
  margin: 0 auto;
  text-wrap: balance;
}
.promo-bar a {
  color: var(--gold-500);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.promo-bar a:hover { color: #fff; }

/* Tighter on a phone: three stacked sticky bars is a lot of a 667px screen,
   so claw back what we can without making it hard to read. */
@media (max-width: 620px) {
  .promo-bar {
    font-size: .8rem;
    line-height: 1.35;
    padding: .5rem 0;
  }
}

/* -------------------------------------------------------------- Header --- */

.site-header {
  position: sticky;
  top: var(--promo-h);   /* pins directly under the promo bar */
  z-index: 100;
  background: rgba(251, 247, 240, .92);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--line-soft);
}

.site-header__bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
  color: var(--ink);
  margin-right: auto;
  flex-shrink: 0;
}
.brand img { width: 42px; height: 42px; object-fit: contain; }
.brand__name {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.brand__sub {
  display: block;
  font-family: var(--font-body);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--muted);
}

.nav { display: flex; align-items: center; gap: .15rem; }
.nav a {
  padding: .5rem .8rem;
  border-radius: var(--radius-sm);
  font-size: .93rem;
  font-weight: 500;
  color: var(--ink-70);
  text-decoration: none;
  transition: color .15s ease, background-color .15s ease;
}
.nav a:hover { color: var(--pine-700); background: rgba(35, 69, 52, .06); }
.nav a[aria-current="page"] { color: var(--pine-800); font-weight: 600; }

.header-cta { display: inline-flex; gap: .5rem; margin-left: .5rem; }

.nav-toggle {
  display: none;
  align-items: center;
  gap: .5rem;
  background: transparent;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: .5rem .9rem;
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
}
.nav-toggle__bars { display: grid; gap: 3px; }
.nav-toggle__bars span { display: block; width: 16px; height: 2px; background: var(--ink); border-radius: 2px; }

/* On the narrowest phones the brand plus the toggle are a few pixels wider
   than the bar, which wraps the toggle onto a row of its own inside a sticky
   header. Trim both sides so they stay on one line.
   These must sit after the base .brand/.nav-toggle rules — a media query adds
   no specificity, so an earlier block would simply lose on source order. */
@media (max-width: 420px) {
  .brand { gap: .55rem; }
  .brand img { width: 34px; height: 34px; }
  .brand__name { font-size: 1rem; }
  .brand__sub { font-size: .6rem; letter-spacing: .1em; }
  .nav-toggle { padding: .5rem .75rem; font-size: .84rem; }
}

/* 320px (an original SE) needs a little more from both sides again. */
@media (max-width: 380px) {
  .brand img { width: 30px; height: 30px; }
  .brand__name { font-size: .92rem; }
  .brand__sub { font-size: .56rem; letter-spacing: .08em; }
  .nav-toggle { padding: .45rem .6rem; font-size: .8rem; gap: .4rem; }
}

@media (max-width: 940px) {
  /* The bar is one flex row. The open panel has to wrap onto its own full
     width lines underneath — otherwise the links and buttons squeeze in
     beside the brand and shove the toggle past the right edge, which leaves
     no way to close the menu again. */
  .site-header__bar { flex-wrap: wrap; }

  .nav, .header-cta { display: none; }
  .nav-toggle { display: inline-flex; flex-shrink: 0; }

  .site-header[data-open="true"] .nav,
  .site-header[data-open="true"] .header-cta {
    flex: 0 0 100%;
    width: 100%;
  }

  /* Two columns rather than a stacked list: four links in two rows instead of
     four halves the panel, and the tinted tiles keep each tap target obvious. */
  .site-header[data-open="true"] .nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .3rem .4rem;
    order: 1;
    padding: .55rem 0;
    border-top: 1px solid var(--line-soft);
  }
  .site-header[data-open="true"] .nav a {
    padding: .6rem .6rem;
    font-size: .97rem;
    border-radius: 8px;
    background: var(--cream-2);
  }
  .site-header[data-open="true"] .nav a[aria-current="page"] {
    background: rgba(35, 69, 52, .12);
  }

  /* Side by side, wrapping to two rows only if they genuinely do not fit. */
  .site-header[data-open="true"] .header-cta {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    order: 2;
    margin: 0 0 .7rem;
  }
  .site-header[data-open="true"] .header-cta .btn {
    flex: 1 1 auto;
    width: auto;
    padding: .58rem 1rem;
    font-size: .88rem;
  }

  /* Landscape phones are barely taller than the open panel — let it scroll
     rather than run off the bottom of the screen. */
  .site-header[data-open="true"] .site-header__bar {
    max-height: calc(100vh - var(--promo-h));
    max-height: calc(100dvh - var(--promo-h));
    overflow-y: auto;
  }
}

/* ---------------------------------------------------------------- Hero --- */

.hero {
  position: relative;
  min-height: min(84vh, 720px);
  display: grid;
  align-items: end;
  background: var(--pine-900);
  overflow: hidden;
}
.hero__media {
  position: absolute;
  inset: 0;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 60%;
}
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(12, 26, 20, .92) 0%, rgba(12, 26, 20, .55) 42%, rgba(12, 26, 20, .2) 75%);
}
.hero__body {
  position: relative;
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  color: #fff;
  max-width: 44rem;
}
.hero h1 { color: #fff; margin-bottom: .35em; }
.hero__tagline {
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  color: rgba(255, 255, 255, .88);
  margin-bottom: 1.75rem;
  max-width: 34rem;
}
.hero .btn-row { margin-bottom: 1.5rem; }

.hero__est {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-500);
  margin-bottom: 1.1rem;
}
.hero__est::after {
  content: "";
  width: 42px;
  height: 1px;
  background: rgba(199, 154, 62, .5);
}

/* ----------------------------------------------------------- Open pill --- */

.status {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .45rem .95rem .45rem .8rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .28);
  backdrop-filter: blur(8px);
  font-size: .88rem;
  font-weight: 500;
  color: #fff;
}
.status__dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--muted);
  flex-shrink: 0;
}
.status[data-state="open"] .status__dot { background: #59C08A; box-shadow: 0 0 0 4px rgba(89, 192, 138, .22); }
.status[data-state="closed"] .status__dot { background: #E0836A; box-shadow: 0 0 0 4px rgba(224, 131, 106, .2); }

.status--inline {
  background: rgba(35, 69, 52, .07);
  border-color: rgba(35, 69, 52, .15);
  color: var(--ink);
}

/* ------------------------------------------------------------ Page top --- */

.page-head {
  background: var(--pine-800);
  color: #fff;
  padding-block: clamp(3rem, 7vw, 5rem);
  position: relative;
  overflow: hidden;
}
.page-head::after {
  content: "";
  position: absolute;
  right: -8%;
  top: -40%;
  width: 46%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(110, 156, 130, .22), transparent 68%);
  pointer-events: none;
}
.page-head h1 { color: #fff; margin-bottom: .3em; }
.page-head .lede { color: rgba(251, 247, 240, .8); max-width: 40rem; }
.page-head .eyebrow { color: var(--gold-500); }

/* --------------------------------------------------------------- Cards --- */

.grid { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }

.card {
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 2.5vw, 2rem);
  box-shadow: var(--shadow-sm);
}
.card h3 { margin-bottom: .5rem; }
.card p { color: var(--ink-70); font-size: .98rem; }

.card__icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: var(--cream-2);
  color: var(--pine-700);
  margin-bottom: 1.1rem;
}
.card__icon svg { width: 22px; height: 22px; }

/* ------------------------------------------------------------ Split row -- */

.split {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
}
.split--reverse > :first-child { order: 2; }
@media (max-width: 780px) {
  .split--reverse > :first-child { order: 0; }
}

.frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--cream-2);
}
.frame img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.frame--tall img { aspect-ratio: 3 / 4; }
.frame--square img { aspect-ratio: 1; }

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

.menu-toolbar {
  position: sticky;
  top: calc(var(--promo-h) + var(--header-h));   /* under promo + header */
  z-index: 60;
  background: rgba(251, 247, 240, .95);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--line-soft);
  padding-block: .85rem;
}
.menu-toolbar__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.search {
  position: relative;
  flex: 1 1 260px;
  max-width: 380px;
}
.search input {
  width: 100%;
  padding: .65rem 2.4rem .65rem 2.5rem;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  font-size: .95rem;
}
.search input::placeholder { color: var(--muted); }
.search input:focus { border-color: var(--pine-500); outline-offset: 1px; }
.search__icon {
  position: absolute;
  left: .9rem; top: 50%;
  transform: translateY(-50%);
  width: 17px; height: 17px;
  color: var(--muted);
  pointer-events: none;
}
.search__clear {
  position: absolute;
  right: .5rem; top: 50%;
  transform: translateY(-50%);
  width: 26px; height: 26px;
  display: none;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--cream-2);
  color: var(--ink-70);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}
.search[data-filled="true"] .search__clear { display: grid; }

.chips {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  padding: .45rem .9rem;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  font-size: .85rem;
  font-weight: 500;
  color: var(--ink-70);
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s ease;
}
.chip:hover { border-color: var(--pine-500); color: var(--pine-700); }
.chip[aria-pressed="true"] {
  background: var(--pine-700);
  border-color: var(--pine-700);
  color: #fff;
}

.menu-count {
  font-size: .85rem;
  color: var(--muted);
  margin-left: auto;
}

.menu-section { padding-block: clamp(2rem, 4vw, 3.25rem); border-bottom: 1px solid var(--line-soft); }
.menu-section:last-of-type { border-bottom: 0; }
.menu-section[hidden] { display: none; }

.menu-section__head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.75rem;
  padding-bottom: .75rem;
  border-bottom: 2.5px solid var(--rust-600);
}
.menu-section__head h2 {
  margin: 0;
  font-size: clamp(1.6rem, 3vw, 2.15rem);
  text-transform: uppercase;
  letter-spacing: .01em;
}
.menu-section__note {
  font-size: .9rem;
  color: var(--muted);
  margin: 0;
}

/* Live "is this being served right now" badge on time-limited sections.
   The section itself is always readable — this only answers "can I order it". */
.service-badge {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .3rem .75rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--muted);
}
.service-badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.service-badge:empty { display: none; }

.service-badge[data-state="now"] {
  background: rgba(53, 102, 78, .1);
  border-color: rgba(53, 102, 78, .25);
  color: var(--pine-700);
}
.service-badge[data-state="soon"] {
  background: rgba(181, 130, 42, .12);
  border-color: rgba(181, 130, 42, .3);
  color: var(--gold-600);
}

/* Multi-column rather than grid: items pack tightly the way a printed menu
   does, instead of every row stretching to its tallest card. */
.menu-items {
  columns: 3 300px;
  column-gap: clamp(1.5rem, 4vw, 3.25rem);
}

.menu-item {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin-bottom: clamp(1.25rem, 2.5vw, 1.9rem);
}
.menu-item[hidden] { display: none; }

.menu-item__head {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  margin-bottom: .3rem;
}
.menu-item__name {
  font-family: var(--font-display);
  font-size: 1.075rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
}
.menu-item__dots {
  flex: 1;
  border-bottom: 1px dotted var(--line);
  transform: translateY(-4px);
  min-width: 1rem;
}
.menu-item__price {
  font-family: var(--font-body);
  font-size: .98rem;
  font-weight: 600;
  color: var(--rust-600);
  white-space: nowrap;
}

/* Two-part prices like "Side $5 / Basket $10" are ~150px unbroken, which is
   wider than a column on a 320px phone and pushes the page sideways. Let them
   wrap down there. */
@media (max-width: 420px) {
  .menu-item__price { white-space: normal; text-align: right; }
}
.menu-item__desc {
  margin: 0;
  font-size: .93rem;
  line-height: 1.55;
  color: var(--ink-70);
}
.menu-item__meta {
  margin: .45rem 0 0;
  font-size: .82rem;
  color: var(--muted);
}

.tag {
  display: inline-block;
  padding: .15rem .5rem;
  border-radius: 4px;
  background: rgba(53, 102, 78, .1);
  color: var(--pine-700);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  vertical-align: 2px;
  margin-left: .35rem;
}

/* A named group inside a section — Kids Breakfast under Breakfast. Reads as
   subordinate to the section head: no rule, smaller, letterspaced. */
.menu-subsection { margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.menu-subsection[hidden] { display: none; }

.menu-subhead {
  font-family: var(--font-body);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--rust-600);
  margin: 0 0 .35rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--line);
}
.menu-subhead__note {
  font-size: .86rem;
  color: var(--muted);
  margin: 0 0 1rem;
}
.menu-subhead + .menu-items { margin-top: 1.25rem; }

/* House small print from the foot of the printed boards. */
.menu-footnotes {
  padding: 2rem 0 3rem;
  border-top: 1px solid var(--line-soft);
  max-width: 46rem;
}
.menu-footnotes p {
  margin: 0 0 .6rem;
  font-size: .84rem;
  line-height: 1.55;
  color: var(--muted);
}
.menu-footnotes p:last-child { margin-bottom: 0; }

.no-results {
  padding: 3.5rem 1rem;
  text-align: center;
  color: var(--muted);
}
.no-results strong { color: var(--ink); }

/* Build-your-own / option columns */
.options {
  display: grid;
  gap: 1.5rem 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: clamp(1.35rem, 2.5vw, 1.85rem);
  box-shadow: var(--shadow-sm);
}
.options h4 {
  font-family: var(--font-body);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--rust-600);
  margin: 0 0 .5rem;
}
.options p { font-size: .9rem; color: var(--ink-70); margin: 0; }

/* ------------------------------------------------------------- Feature --- */

.feature {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--pine-800);
  color: #fff;
  isolation: isolate;
}
.feature__media { position: absolute; inset: 0; z-index: -1; }
.feature__media img { width: 100%; height: 100%; object-fit: cover; }
.feature__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(18, 36, 28, .95) 12%, rgba(18, 36, 28, .78) 48%, rgba(18, 36, 28, .35) 100%);
}
.feature__body {
  padding: clamp(2.25rem, 5vw, 4rem);
  max-width: 34rem;
}
.feature h2 { color: #fff; }
.feature p { color: rgba(251, 247, 240, .85); }

/* ---------------------------------------------------------------- Info --- */

.info-grid {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

.hours-list { list-style: none; margin: 0; padding: 0; }
.hours-list li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .6rem 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: .97rem;
}
.hours-list li:last-child { border-bottom: 0; }
.hours-list dt, .hours-list .day { color: var(--ink-70); }
.hours-list .time { font-weight: 600; font-variant-numeric: tabular-nums; }
.hours-list li[data-today="true"] { color: var(--pine-700); }
.hours-list li[data-today="true"] .day::after {
  content: "Today";
  margin-left: .5rem;
  padding: .1rem .4rem;
  border-radius: 4px;
  background: rgba(53, 102, 78, .12);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.contact-list li { display: flex; gap: .85rem; align-items: flex-start; }
.contact-list svg { width: 19px; height: 19px; flex-shrink: 0; color: var(--pine-500); margin-top: .25rem; }
.contact-list a { font-weight: 500; }
.contact-list .label {
  display: block;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .1rem;
}

.map-frame {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  background: var(--cream-2);
  min-height: 320px;
}
.map-frame iframe { display: block; width: 100%; height: 100%; min-height: 320px; border: 0; }

/* ---------------------------------------------------------------- Form --- */

.form { display: grid; gap: 1.1rem; }
.form__row { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

.field { display: grid; gap: .4rem; }
.field label {
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--ink-70);
}
.field .req { color: var(--rust-600); }
.field input, .field select, .field textarea {
  width: 100%;
  padding: .75rem .9rem;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  font-size: .97rem;
  transition: border-color .15s ease;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--pine-500); }
.field input:user-invalid, .field textarea:user-invalid { border-color: var(--rust-500); }
.field__hint { font-size: .82rem; color: var(--muted); }

.form__note { font-size: .85rem; color: var(--muted); }

/* ------------------------------------------------------------- Footer ---- */

.site-footer {
  background: var(--pine-900);
  color: rgba(251, 247, 240, .72);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
  font-size: .93rem;
}
.site-footer a { color: rgba(251, 247, 240, .82); text-decoration: none; }
.site-footer a:hover { color: var(--gold-500); text-decoration: underline; }

.footer-grid {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(251, 247, 240, .13);
}
.footer-grid h4 {
  font-family: var(--font-body);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-500);
  margin: 0 0 1rem;
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }

.footer-brand img { width: 68px; margin-bottom: 1rem; filter: invert(1) brightness(1.6); }
.footer-brand p { font-size: .9rem; line-height: 1.6; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.5rem;
  justify-content: space-between;
  padding-top: 1.75rem;
  font-size: .84rem;
  color: rgba(251, 247, 240, .55);
}

.social { display: flex; gap: .6rem; }
.social a {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid rgba(251, 247, 240, .22);
  border-radius: 50%;
  transition: all .15s ease;
}
.social a:hover { background: var(--gold-500); border-color: var(--gold-500); color: var(--pine-900); }
.social svg { width: 17px; height: 17px; }

/* ------------------------------------------------------- Sticky mobile --- */

.callbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: none;
  gap: .5rem;
  padding: .6rem .75rem calc(.6rem + env(safe-area-inset-bottom));
  background: rgba(251, 247, 240, .96);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
}
.callbar .btn { flex: 1; padding: .7rem 1rem; font-size: .9rem; }

@media (max-width: 700px) {
  /* A shorter bar on phones. The sticky offsets below are all derived from
     this, so they follow automatically. */
  :root { --header-h: 62px; }

  .callbar { display: flex; }
  body { padding-bottom: 4.25rem; }
  .menu-toolbar { top: calc(var(--promo-h) + var(--header-h)); }

  /* One scrolling row of chips instead of a wrapped block. With twelve
     sections, wrapping made the sticky toolbar taller than the content it was
     sitting above. */
  .search { max-width: none; }
  .chips {
    flex-wrap: nowrap;
    width: 100%;
    min-width: 0;
    padding-bottom: 2px;
    -webkit-overflow-scrolling: touch;
  }
  .menu-count { display: none; }
}

/* --------------------------------------------------------------- Print --- */

@media print {
  /* The service badge is a live clock readout — meaningless once printed. */
  .site-header, .site-footer, .callbar, .menu-toolbar, .hero, .btn,
  .page-head::after, .service-badge, .promo-bar { display: none !important; }
  body { background: #fff; padding: 0; font-size: 10.5pt; }
  .page-head { background: #fff; color: #000; padding: 0 0 1rem; }
  .page-head h1, .page-head .lede, .page-head .eyebrow { color: #000; }
  .menu-items { grid-template-columns: 1fr 1fr; gap: .75rem 2rem; }
  .menu-section { padding-block: .75rem; break-inside: avoid; }
  .menu-item__price { color: #000; }
  .options { box-shadow: none; }
  a { text-decoration: none; color: #000; }
}