/* ============================================================
   Cleveland-Heath · styles.css
   Brand: Gourmet Comfort · Edwardsville, IL · Since 2011
   Palette: warm pumpkin orange + black + cream, drawn from the logo
   ============================================================ */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html:focus-within { scroll-behavior: smooth; }
body { line-height: 1.55; -webkit-font-smoothing: antialiased; }
img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; padding: 0; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }

/* ---------- Tokens ---------- */
:root {
  /* Core warm palette */
  --ink: #1A0F08;
  --ink-soft: #2B1B12;
  --paper: #F8EFDF;
  --bone: #FCF6E8;
  --rule: rgba(26, 15, 8, 0.14);

  /* Brand orange, drawn directly from the wordmark */
  --orange: #E07A2A;
  --orange-deep: #B85820;
  --orange-light: #F2A458;
  --orange-glow: rgba(224, 122, 42, 0.18);

  /* Olive — secondary palette nodding toward the Market & Main brand */
  --olive: #5C6E37;
  --olive-deep: #3F4A24;
  --olive-light: #9EAB6F;

  /* Bronze — warm metallic for delicate dividers and accents */
  --bronze: #7A5828;
  --bronze-soft: #B8884A;

  /* Callout orange — same pumpkin orange as the trust strip, used as a callout
     background to draw attention to feature sections (Behind the Bar, Era 3, etc.). */
  --burnt: #E07A2A;
  --burnt-deep: #8C4818;
  --burnt-light: #F5A828;
  --burnt-cream: #FFE0A0;

  /* Neutrals */
  --smoke: #6E5840;
  --smoke-soft: #9C8467;
  --linen: #ECDFC2;
  --shadow: rgba(26, 15, 8, 0.08);
  --shadow-lift: rgba(26, 15, 8, 0.16);

  /* Aliases */
  --bg: var(--paper);
  --bg-elevated: var(--bone);
  --text: var(--ink);
  --text-muted: var(--smoke);
  --accent: var(--orange);
  --accent-hover: var(--orange-deep);
  --divider: var(--rule);

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

  /* Type scale (fluid) */
  --fs-eyebrow: 0.75rem;
  --fs-small: 0.875rem;
  --fs-body: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --fs-lead: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  --fs-h4: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --fs-h3: clamp(1.5rem, 1.3rem + 0.9vw, 2rem);
  --fs-h2: clamp(2rem, 1.6rem + 1.8vw, 3.25rem);
  --fs-h1: clamp(2.5rem, 1.8rem + 3.2vw, 4.25rem);
  --fs-display: clamp(3.25rem, 2.2rem + 4.8vw, 6rem);

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;
  --space-section: clamp(4rem, 6vw + 1rem, 8rem);

  /* Layout */
  --max-w: 1240px;
  --max-w-reading: 65ch;
  --gutter: clamp(1.25rem, 4vw, 3rem);

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 200ms;
  --dur: 360ms;
  --dur-slow: 700ms;
}

/* Sections that always render dark regardless */
.section--dark {
  background: var(--ink);
  color: var(--paper);
  --text: var(--paper);
  --text-muted: rgba(248, 239, 223, 0.7);
  --divider: rgba(248, 239, 223, 0.14);
  --bg: var(--ink);
  --bg-elevated: var(--ink-soft);
}

/* Warm bronze section — softer than pure ink, holds dark-mode treatment without feeling stark */
.section--bronze {
  background: #2E1F12;
  color: var(--paper);
  --text: var(--paper);
  --text-muted: rgba(248, 239, 223, 0.78);
  --divider: rgba(248, 239, 223, 0.14);
  --bg: #2E1F12;
  --bg-elevated: #3A2918;
}

/* Burnt orange callout — drawn from the exterior mural. Used to draw attention
   to feature sections (Behind the Bar, Era 3, etc.). Inverts the accent tokens
   so existing inline color refs (var(--orange-light) on italics) get a warm
   cream-yellow that pops against the burnt orange background. */
.section--burnt {
  background: var(--burnt);
  color: var(--paper);
  --text: var(--paper);
  --text-muted: rgba(255, 240, 220, 0.88);
  --divider: rgba(255, 240, 220, 0.22);
  --bg: var(--burnt);
  --bg-elevated: var(--burnt-deep);
  --orange: var(--burnt-cream);
  --orange-light: var(--burnt-cream);
  --orange-deep: var(--burnt-deep);
  position: relative;
}

.section--burnt > .container { position: relative; z-index: 1; }

/* Optional menu-only dark mode (kept for readability in bright/dim rooms) */
:root[data-theme="dark"] body.menu-page {
  background: var(--ink);
  color: var(--paper);
  --bg: var(--ink);
  --bg-elevated: var(--ink-soft);
  --text: var(--paper);
  --text-muted: rgba(248, 239, 223, 0.7);
  --divider: rgba(248, 239, 223, 0.14);
  --accent: var(--orange-light);
}

/* ---------- Base ---------- */
html { background: var(--bg); color: var(--text); }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  letter-spacing: -0.011em;
  min-height: 100dvh;
  overflow-x: hidden;
}

::selection { background: var(--orange); color: var(--paper); }

input, textarea, select { font-size: max(16px, 1rem); }

/* ---------- Typography ---------- */
.display, h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-variation-settings: "opsz" 96, "SOFT" 50;
  line-height: 1.04;
  letter-spacing: -0.022em;
}
h3 { font-weight: 500; }

.display { font-size: var(--fs-display); line-height: 0.94; letter-spacing: -0.03em; }
h1, .h1 { font-size: var(--fs-h1); line-height: 1.0; }
h2, .h2 { font-size: var(--fs-h2); line-height: 1.06; }
h3, .h3 { font-size: var(--fs-h3); line-height: 1.15; letter-spacing: -0.015em; }
h4, .h4 { font-family: var(--font-body); font-size: var(--fs-h4); font-weight: 600; letter-spacing: -0.014em; line-height: 1.25; }

.lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--text-muted); max-width: 60ch; }

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--orange);
}
.eyebrow--muted { color: var(--text-muted); }

.italic-display { font-family: var(--font-display); font-style: italic; font-weight: 400; }

p { max-width: 65ch; }
.prose p + p { margin-top: 1.25em; }
.prose a { color: var(--orange); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Layout helpers ---------- */
.container { width: 100%; max-width: var(--max-w); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: 880px; }
.container--reading { max-width: 720px; }

.section { padding-block: var(--space-section); position: relative; }
.section--tight { padding-block: clamp(3rem, 4vw + 1rem, 5rem); }

/* Anchor targets land below the sticky nav */
:target,
section[id],
div[id],
article[id] { scroll-margin-top: 96px; }

/* On the menu page, account for both the main nav and the sticky subnav */
body.menu-page :target,
body.menu-page section[id],
body.menu-page div[id],
body.menu-page article[id] { scroll-margin-top: 150px; }

.divider-rule { border: 0; border-top: 1px solid var(--divider); margin: 0; }

/* Delicate bronze ornament — small centered flourish between editorial sections */
.divider-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.875rem;
  padding-block: var(--space-6);
  color: var(--bronze);
}

.divider-ornament__line {
  width: 56px;
  height: 1px;
  background: linear-gradient(90deg, transparent, currentColor, transparent);
}

.divider-ornament__mark {
  width: 12px;
  height: 12px;
  color: var(--bronze);
}

/* ---------- Navigation (transparent over hero, solid on scroll) ---------- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding-top: env(safe-area-inset-top);
  background: transparent;
  transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), padding var(--dur) var(--ease);
}

.nav.is-scrolled,
.nav--solid {
  background: var(--paper);
  box-shadow: 0 4px 20px rgba(26, 15, 8, 0.06);
  border-bottom: 1px solid var(--divider);
}

/* When no dark hero, nav text starts in ink (used on pages without a hero) */
.nav--solid .nav__brand,
.nav--solid .nav__links a,
.nav--solid .nav__menu-btn { color: var(--ink); text-shadow: none; }

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding-block: 0.875rem;
  min-height: 72px;
  transition: min-height var(--dur) var(--ease);
}

.nav.is-scrolled .nav__inner { min-height: 64px; }

.nav__brand {
  display: flex;
  align-items: center;
  color: var(--paper);
  transition: color var(--dur) var(--ease);
}

.nav__brand img { height: 44px; width: auto; transition: height var(--dur) var(--ease), filter var(--dur) var(--ease); }
.nav.is-scrolled .nav__brand img { height: 36px; }

/* Logo filter: keep its original orange color, but the orange is already in the PNG so no filter needed */

.nav__links {
  display: none;
  align-items: center;
  gap: clamp(1rem, 2vw, 2rem);
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav__links a {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--paper);
  position: relative;
  padding: 0.25rem 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  transition: color var(--dur-fast) var(--ease), text-shadow var(--dur) var(--ease);
}

.nav.is-scrolled .nav__links a { color: var(--ink); text-shadow: none; }

.nav__links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur) var(--ease);
}

.nav__links a:hover::after { transform: scaleX(1); }
.nav__links a[aria-current="page"]::after { transform: scaleX(1); }
.nav__links a:hover { color: var(--orange-light); }
.nav.is-scrolled .nav__links a:hover { color: var(--orange); }

.nav__actions { display: flex; align-items: center; gap: 0.625rem; }

.nav__cta {
  display: inline-flex;
  align-items: center;
  padding: 0.625rem 1.25rem;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--orange);
  color: var(--paper);
  border-radius: 2px;
  border: 1.5px solid var(--orange);
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  touch-action: manipulation;
}

.nav__cta:hover { background: var(--orange-deep); border-color: var(--orange-deep); }

.nav__menu-btn {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: var(--paper);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.nav.is-scrolled .nav__menu-btn { color: var(--ink); text-shadow: none; }

.nav__menu-btn svg { width: 24px; height: 24px; }

/* Mobile drawer */
.nav__drawer {
  position: fixed;
  inset: 0;
  background: var(--ink);
  z-index: 60;
  display: flex;
  flex-direction: column;
  padding: calc(var(--space-5) + env(safe-area-inset-top)) calc(var(--space-5) + env(safe-area-inset-right)) calc(var(--space-5) + env(safe-area-inset-bottom)) calc(var(--space-5) + env(safe-area-inset-left));
  transform: translateX(100%);
  transition: transform var(--dur) var(--ease);
  visibility: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  color: var(--paper);
}

.nav__drawer[data-open="true"] { transform: translateX(0); visibility: visible; }

.nav__drawer-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-7); }
.nav__drawer-head img { height: 36px; width: auto; }
.nav__drawer-head .nav__menu-btn { color: var(--paper); text-shadow: none; }

.nav__drawer-links { display: flex; flex-direction: column; gap: var(--space-3); list-style: none; padding: 0; margin: 0; }
.nav__drawer-links a { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 2rem; letter-spacing: -0.015em; color: var(--paper); }
.nav__drawer-links a[aria-current="page"] { color: var(--orange-light); }

.nav__drawer-foot { margin-top: auto; padding-top: var(--space-6); border-top: 1px solid rgba(248, 239, 223, 0.12); display: flex; flex-direction: column; gap: var(--space-3); font-size: 0.875rem; color: rgba(248, 239, 223, 0.65); }
.nav__drawer-foot a { color: var(--orange-light); }

@media (min-width: 900px) {
  .nav__links { display: flex; }
  .nav__menu-btn { display: none; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.75rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 2px;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  white-space: nowrap;
  border: 1.5px solid transparent;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.btn--primary { background: var(--orange); color: var(--paper); border-color: var(--orange); }
.btn--primary:hover { background: var(--orange-deep); border-color: var(--orange-deep); }

.btn--ink { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn--ink:hover { background: var(--orange); border-color: var(--orange); }

.btn--secondary { background: transparent; color: var(--text); border-color: var(--text); }
.btn--secondary:hover { background: var(--text); color: var(--bg); }

.btn--outline-light { background: transparent; color: var(--paper); border-color: var(--paper); }
.btn--outline-light:hover { background: var(--paper); color: var(--ink); }

.btn--ghost { background: transparent; color: var(--text); border-color: transparent; padding-inline: 0; letter-spacing: 0.08em; }
.btn--ghost::after { content: "→"; margin-left: 0.5rem; transition: transform var(--dur-fast) var(--ease); }
.btn--ghost:hover { color: var(--orange); }
.btn--ghost:hover::after { transform: translateX(3px); }

.btn--lg { padding: 1.125rem 2rem; font-size: 0.9375rem; }

.btn-row { display: flex; gap: var(--space-3); flex-wrap: wrap; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: clamp(620px, 92vh, 880px);
  min-height: clamp(620px, 92svh, 880px);
  min-height: clamp(620px, 92dvh, 880px);
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
  color: var(--paper);
  padding-top: env(safe-area-inset-top);
}

.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(26, 15, 8, 0.5) 0%, rgba(26, 15, 8, 0.4) 40%, rgba(26, 15, 8, 0.78) 100%);
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-5);
  justify-items: center;
  padding-block: clamp(6rem, 10vh, 8rem) clamp(4rem, 8vh, 6rem);
}

.hero__logo {
  width: min(540px, 80vw);
  height: auto;
  filter: drop-shadow(0 4px 24px rgba(0, 0, 0, 0.45));
  margin-bottom: var(--space-3);
}

.hero__tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.5rem, 1rem + 1.4vw, 2.25rem);
  color: var(--paper);
  letter-spacing: -0.01em;
  line-height: 1.1;
  max-width: 24ch;
}

.hero__sub {
  color: rgba(248, 239, 223, 0.86);
  font-size: var(--fs-lead);
  max-width: 48ch;
  font-weight: 400;
  margin: 0 auto;
}

.hero__cta { margin-top: var(--space-4); }

.hero--page {
  min-height: clamp(440px, 60dvh, 560px);
}

/* Page hero variation with logo flourish */
.hero--page .hero__logo { width: min(360px, 64vw); }

.hero__page-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.5rem, 1.6rem + 3.2vw, 4.5rem);
  color: var(--paper);
  line-height: 1;
  letter-spacing: -0.025em;
}

.hero__page-subtitle {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.25rem, 1rem + 0.6vw, 1.625rem);
  color: var(--orange-light);
  letter-spacing: -0.01em;
  margin-top: 0.5rem;
}

/* ---------- Trust strip ---------- */
.trust-strip {
  background: var(--orange);
  color: var(--paper);
  padding-block: clamp(1.25rem, 2.5vw, 1.75rem);
}

.trust-strip__grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
  align-items: center;
  text-align: center;
}

.trust-strip__item {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: center;
  gap: 0.625rem;
  padding-block: 0.25rem;
  white-space: nowrap;
}

.trust-strip__num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  color: var(--paper);
  font-size: clamp(1.125rem, 0.95rem + 0.6vw, 1.5rem);
  line-height: 1;
}

.trust-strip__label {
  font-size: clamp(0.6875rem, 0.625rem + 0.15vw, 0.8125rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(248, 239, 223, 0.92);
}

@media (min-width: 720px) {
  .trust-strip__grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
  .trust-strip__item:not(:first-child) { border-left: 1px solid rgba(248, 239, 223, 0.22); }
}

/* ---------- Section header ---------- */
.section-head {
  display: grid;
  gap: var(--space-3);
  margin-bottom: clamp(2.5rem, 4vw, 4rem);
  max-width: 60ch;
}

.section-head--center { margin-inline: auto; text-align: center; align-items: center; }

.section-head__flourish {
  width: 56px;
  height: 16px;
  display: block;
  color: var(--orange);
  margin-bottom: var(--space-2);
}

.section-head--center .section-head__flourish { margin-inline: auto; }

/* ---------- Split layout ---------- */
.split { display: grid; gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.split--text-first .split__media { order: 1; }

@media (min-width: 880px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--wide-text { grid-template-columns: 1.1fr 1fr; }
  .split--wide-media { grid-template-columns: 1fr 1.2fr; }
}

.split__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 4px; }
.split__media--wide { aspect-ratio: 3 / 2; }
.split__media img { width: 100%; height: 100%; object-fit: cover; }

.split__media-cap {
  position: absolute;
  bottom: var(--space-3);
  left: var(--space-3);
  background: var(--orange);
  color: var(--paper);
  font-family: var(--font-display);
  font-style: italic;
  padding: 0.375rem 0.875rem;
  font-size: 0.875rem;
  border-radius: 2px;
}

.split__body { display: grid; gap: var(--space-4); }
.split__body p { color: var(--text-muted); font-size: var(--fs-body); line-height: 1.7; }

/* ---------- Dish cards ---------- */
.dish-reel { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }

.dish-card {
  display: flex;
  flex-direction: column;
  background: var(--bone);
  border: 1px solid var(--divider);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.dish-card__media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
.dish-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }

.dish-card__body { display: grid; gap: var(--space-2); padding: var(--space-5); }

.dish-card__tag {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--orange);
}

.dish-card__name {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.1;
  letter-spacing: -0.012em;
  color: var(--text);
}

.dish-card__desc {
  color: var(--text-muted);
  font-size: 0.9375rem;
  line-height: 1.55;
}

@media (min-width: 640px) { .dish-reel { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .dish-reel { grid-template-columns: repeat(3, 1fr); } }

@media (hover: hover) and (pointer: fine) {
  .dish-card:hover { border-color: var(--orange); box-shadow: 0 14px 36px var(--shadow); }
  .dish-card:hover .dish-card__media img { transform: scale(1.04); }
}

/* ---------- Retro stacked wordmark (secondary brand mark) ---------- */
/* Used for the 80s-vibe Cleveland-Heath treatment on menus, callouts,
   and seasonal moments. Pairs with the primary saloon-serif logo. */
.retro-wordmark {
  font-family: "Lalezar", "Bagel Fat One", "Bowlby One", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(2.5rem, 1.8rem + 3vw, 4.5rem);
  line-height: 0.9;
  letter-spacing: 0.005em;
  color: var(--orange-deep);
  text-shadow: 0.08em 0.08em 0 var(--orange-light);
  display: inline-block;
  text-transform: none;
}

.retro-wordmark--sm { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.retro-wordmark--lg { font-size: clamp(3.5rem, 2.4rem + 4vw, 6rem); }

.retro-wordmark--stacked {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.retro-wordmark--stacked > span:nth-child(2) { margin-left: 0.6em; }

/* On dark backgrounds, swap so the back layer reads */
.section--dark .retro-wordmark,
.cta-banner .retro-wordmark,
.footer .retro-wordmark,
.prefooter .retro-wordmark,
[data-dark] .retro-wordmark {
  color: var(--orange);
  text-shadow: 0.08em 0.08em 0 var(--ember);
}

/* ---------- Menu list ---------- */
/* All menu-sections sit at the same nesting level (siblings) — this rule
   guarantees consistent spacing even when sections are inside anchor wrappers. */
.menu-section { margin-top: var(--space-8); }
.menu-section:first-child,
[id] > .menu-section:first-child { margin-top: 0; }

/* Display + tagline header pattern — uses Fraunces in two distinct treatments
   (heavy uppercase + italic) so we don't need additional font families. */
.menu-section__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem var(--space-4);
  padding-block: var(--space-3);
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--divider);
  margin-bottom: var(--space-5);
  color: var(--ink);
}

.menu-section__title-stack {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 0.375rem;
  flex-wrap: wrap;
}

.menu-section__title-display {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.625rem, 1.3rem + 1vw, 2.25rem);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1;
  color: var(--ink);
}

.menu-section__title-script {
  font-family: var(--font-display);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem);
  color: var(--orange);
  line-height: 1;
  letter-spacing: -0.005em;
}

.menu-section__title-meta {
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-muted);
  white-space: nowrap;
}

:root[data-theme="dark"] .menu-section__title { border-top-color: var(--paper); }
:root[data-theme="dark"] .menu-section__title-display { color: var(--paper); }
:root[data-theme="dark"] .menu-section__title-script { color: var(--orange-light); }

/* Cinematic section-title reveal — applied ONLY to the first menu section
   (the "hero" section, e.g. Starters). Subsequent sections render normally,
   so scrolling through the menu doesn't trigger a reveal per section. */
.menu-section--intro .menu-section__title {
  position: relative;
  overflow: visible;
  border-top: 2px solid transparent;
  background-image: linear-gradient(to right, var(--ink) 0%, var(--ink) 100%);
  background-repeat: no-repeat;
  background-position: top left;
  background-size: 0% 2px;
  transition: background-size 1100ms cubic-bezier(.22,1,.36,1);
}
.menu-section--intro.is-visible .menu-section__title { background-size: 100% 2px; }
.menu-section--intro .menu-section__title-display {
  display: inline-block;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 900ms cubic-bezier(.22,1,.36,1) 150ms, transform 900ms cubic-bezier(.22,1,.36,1) 150ms;
}
.menu-section--intro .menu-section__title-script {
  display: inline-block;
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 900ms cubic-bezier(.22,1,.36,1) 400ms, transform 900ms cubic-bezier(.22,1,.36,1) 400ms;
}
.menu-section--intro .menu-section__title-meta {
  opacity: 0;
  transition: opacity 700ms ease 650ms;
}
.menu-section--intro.is-visible .menu-section__title-display,
.menu-section--intro.is-visible .menu-section__title-script { opacity: 1; transform: none; }
.menu-section--intro.is-visible .menu-section__title-meta { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .menu-section--intro .menu-section__title { background-size: 100% 2px; transition: none; }
  .menu-section--intro .menu-section__title-display,
  .menu-section--intro .menu-section__title-script,
  .menu-section--intro .menu-section__title-meta { opacity: 1; transform: none; transition: none; }
}

.menu-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-5); }
@media (min-width: 720px) { .menu-list--two-col { grid-template-columns: repeat(2, 1fr); gap: var(--space-6) var(--space-8); } }

.menu-item__head { display: flex; align-items: baseline; gap: var(--space-3); justify-content: space-between; margin-bottom: 0.25rem; }
.menu-item__name { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 1.25rem; letter-spacing: -0.005em; flex: 1; }
.menu-item__price { font-family: var(--font-body); font-weight: 700; font-feature-settings: "tnum"; font-size: 0.9375rem; color: var(--orange); white-space: nowrap; }
.menu-item__desc { font-size: 0.9375rem; color: var(--text-muted); line-height: 1.55; }
.menu-item__by { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; margin-bottom: 0.25rem; }
.menu-item__nut { display: inline-block; margin-left: 0.25rem; color: var(--orange); font-size: 0.875em; }

/* Two-column glass/bottle table for wines */
.wine-table { width: 100%; border-collapse: collapse; }
.wine-table th, .wine-table td { padding: 0.625rem 0; text-align: left; vertical-align: baseline; border-bottom: 1px solid var(--divider); }
.wine-table th { font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--orange); border-bottom-color: var(--orange); padding-bottom: 0.75rem; }
.wine-table .wine-style { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 1.0625rem; color: var(--ink); }
.wine-table .wine-name { font-size: 0.9375rem; color: var(--text-muted); }
.wine-table .wine-price { font-family: var(--font-body); font-weight: 700; font-feature-settings: "tnum"; color: var(--orange); white-space: nowrap; text-align: right; }
:root[data-theme="dark"] .wine-table .wine-style { color: var(--paper); }

/* ---------- Menu two-column layout (desktop) ---------- */
.menu-layout {
  display: grid;
  gap: clamp(2rem, 3vw, 3rem);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 960px) {
  .menu-layout { grid-template-columns: minmax(320px, 1fr) minmax(0, 2.1fr); }
  /* Aside flows naturally — specials sits at the top and scrolls away with the page.
     The gallery wrap inside becomes sticky once it reaches the sticky offset, then
     fills the viewport height alongside the menu as the user reads.
     align-self: stretch overrides the grid's align-items: start so the aside fills
     the row height — giving the sticky gallery enough vertical space to stay
     pinned for the entire menu scroll. */
  .menu-layout__aside {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    align-self: stretch;
    height: 100%;
  }
  .menu-layout__aside .menu-mini-gallery-wrap {
    position: sticky;
    top: 152px;
    height: calc(100dvh - 172px);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  .menu-layout__aside .menu-mini-gallery {
    flex: 1;
    min-height: 0;
    grid-auto-rows: 1fr;
    margin-top: 0;
  }
  .menu-layout__aside .menu-mini-gallery__more {
    /* natural button height — no longer stretched by the grid */
    margin-top: 0;
    flex-shrink: 0;
  }
}

/* ---------- Compact specials block (sidebar) ---------- */
.specials-card {
  background: var(--ink);
  color: var(--paper);
  padding: var(--space-5);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}
.specials-card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: var(--orange); }
.specials-card__eyebrow { font-size: 0.6875rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700; color: var(--orange-light); }
.specials-card__title { font-family: var(--font-display); font-weight: 700; font-size: 1.375rem; line-height: 1.05; letter-spacing: -0.015em; color: var(--paper); margin-top: 0.5rem; }
.specials-card__row { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin-top: 0.625rem; font-size: 0.8125rem; color: rgba(248, 239, 223, 0.86); }
.specials-card__row strong { color: var(--orange); font-weight: 700; }
.specials-card__note { font-size: 0.75rem; color: rgba(248, 239, 223, 0.6); margin-top: var(--space-3); line-height: 1.4; }
.specials-card hr { border: 0; border-top: 1px dashed rgba(248, 239, 223, 0.18); margin: var(--space-4) 0; }
.specials-card__weekly { display: grid; gap: var(--space-3); }
.specials-card__day { display: grid; gap: 0.125rem; }
.specials-card__day-label { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 0.9375rem; color: var(--orange-light); line-height: 1; }
.specials-card__day-title { font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--paper); line-height: 1.1; }
.specials-card__day-meta { font-size: 0.75rem; color: rgba(248, 239, 223, 0.65); line-height: 1.35; }

/* ---------- Sidebar mini gallery ---------- */
.menu-mini-gallery {
  margin-top: var(--space-5);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

@media (max-width: 959px) {
  .menu-mini-gallery { grid-template-columns: repeat(3, 1fr); }
  .menu-mini-gallery__item { aspect-ratio: 1; }
}

.menu-mini-gallery__item {
  display: block;
  overflow: hidden;
  border-radius: 2px;
  background: var(--bg-elevated);
  transition: transform var(--dur) var(--ease);
  cursor: zoom-in;
  min-height: 0;
}

.menu-mini-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }

@media (hover: hover) and (pointer: fine) {
  .menu-mini-gallery__item:hover img { transform: scale(1.06); }
}

.menu-mini-gallery__more {
  grid-column: 1 / -1;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  padding: 0.75rem;
  border: 1.5px solid var(--orange);
  color: var(--orange);
  border-radius: 2px;
  cursor: pointer;
  background: transparent;
  margin-top: 0.5rem;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.menu-mini-gallery__more:hover { background: var(--orange); color: var(--paper); }

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(14, 10, 6, 0.92);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 3vw, 3rem);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
  padding-bottom: calc(clamp(1rem, 3vw, 3rem) + env(safe-area-inset-bottom));
}

.lightbox[data-open="true"] { opacity: 1; visibility: visible; }

.lightbox__figure {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.lightbox__img {
  max-width: 100%;
  max-height: calc(100dvh - 8rem);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 2px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
}

.lightbox__cap {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--paper);
  font-size: 1rem;
  text-align: center;
  max-width: 60ch;
}

.lightbox__counter {
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--orange-light);
}

.lightbox__btn {
  position: absolute;
  background: rgba(248, 239, 223, 0.08);
  color: var(--paper);
  width: 48px;
  height: 48px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  border: 0;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease);
}
.lightbox__btn:hover { background: var(--orange); color: var(--ink); }
.lightbox__btn svg { width: 22px; height: 22px; }

.lightbox__close { top: calc(1rem + env(safe-area-inset-top)); right: 1rem; }
.lightbox__prev { left: clamp(0.5rem, 2vw, 2rem); top: 50%; transform: translateY(-50%); }
.lightbox__next { right: clamp(0.5rem, 2vw, 2rem); top: 50%; transform: translateY(-50%); }

@media (max-width: 640px) {
  .lightbox__prev, .lightbox__next { top: auto; bottom: calc(1.5rem + env(safe-area-inset-bottom)); transform: none; }
  .lightbox__prev { left: 1rem; }
  .lightbox__next { right: 1rem; }
}

/* ---------- Press cards ---------- */
.press-strip { display: grid; gap: var(--space-5); grid-template-columns: 1fr; align-items: stretch; }

@media (min-width: 720px) { .press-strip { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .press-strip { grid-template-columns: repeat(4, 1fr); } }

.press-card {
  padding: var(--space-5);
  border: 1px solid var(--divider);
  background: var(--bone);
  display: grid;
  gap: var(--space-3);
  min-height: 220px;
  position: relative;
}

.press-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 40%;
  height: 3px;
  background: var(--orange);
}

.press-card__pub { font-family: var(--font-body); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--orange); padding-top: var(--space-2); }
.press-card__quote { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 1.125rem; line-height: 1.4; color: var(--text); }
.press-card__cite { font-size: 0.8125rem; color: var(--text-muted); margin-top: auto; }

/* ---------- Pull quote ---------- */
.pull-quote { display: grid; gap: var(--space-5); border-block: 1px solid var(--orange); padding-block: clamp(3rem, 5vw, 5rem); margin-block: clamp(2rem, 4vw, 4rem); }
.pull-quote__text { font-family: var(--font-display); font-weight: 400; font-style: italic; font-size: clamp(1.5rem, 1rem + 1.8vw, 2.5rem); line-height: 1.18; letter-spacing: -0.018em; max-width: 22ch; color: var(--text); }
.pull-quote__cite { font-size: 0.875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--orange); font-weight: 700; }

/* ---------- CTA Banner ---------- */
.cta-banner { background: var(--ink); color: var(--paper); padding-block: var(--space-section); position: relative; overflow: hidden; }
.cta-banner__inner { display: grid; gap: var(--space-5); align-items: center; position: relative; z-index: 1; }
.cta-banner h2 { color: var(--paper); }
.cta-banner .lead { color: rgba(248, 239, 223, 0.78); }

@media (min-width: 880px) {
  .cta-banner__inner { grid-template-columns: 1.4fr 1fr; gap: var(--space-8); }
  .cta-banner__inner .btn-row { justify-content: flex-end; }
}

/* ---------- Info cards ---------- */
.info-grid { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }

@media (min-width: 720px) { .info-grid--two { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .info-grid--three { grid-template-columns: repeat(3, 1fr); } }

.info-card {
  padding: var(--space-6);
  border: 1px solid var(--divider);
  background: var(--bone);
  display: grid;
  gap: var(--space-3);
  transition: transform 600ms cubic-bezier(.22,1,.36,1), box-shadow 600ms cubic-bezier(.22,1,.36,1), border-color 400ms ease;
  position: relative;
  overflow: hidden;
}

.info-card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: var(--orange); transform: scaleX(0); transform-origin: left center; transition: transform 700ms cubic-bezier(.22,1,.36,1); }
.info-card.is-visible::before,
.is-visible .info-card::before { transform: scaleX(1); }
/* Stagger-friendly default for info-cards inside non-revealing parents */
.info-grid:not(.reveal):not([data-stagger]) .info-card::before { transform: scaleX(1); }

@media (hover: hover) and (pointer: fine) {
  .info-card:hover { transform: translateY(-6px); border-color: var(--orange); box-shadow: 0 28px 60px -20px color-mix(in srgb, var(--orange-deep) 30%, var(--shadow)); }
  .info-card:hover .btn--ghost { color: var(--orange-deep); }
}

.info-card__icon { width: 36px; height: 36px; color: var(--orange); margin-top: var(--space-2); }
.info-card h3 { font-size: 1.5rem; letter-spacing: -0.012em; }

.info-card ul { list-style: none; padding: 0; margin: 0; }
.info-card li { padding-block: 0.5rem; border-bottom: 1px solid var(--divider); font-size: 0.9375rem; color: var(--text-muted); display: flex; justify-content: space-between; gap: var(--space-3); }
.info-card li:last-child { border-bottom: 0; }

/* ---------- Forms ---------- */
.form { display: grid; gap: var(--space-4); }
.form-field { display: grid; gap: 0.375rem; position: relative; }
.form-field label {
  font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-muted);
  transition: color 300ms ease, letter-spacing 400ms cubic-bezier(.22,1,.36,1);
}
.form-field:focus-within label { color: var(--orange); letter-spacing: 0.18em; }

.form-field input, .form-field textarea, .form-field select {
  background: transparent;
  color: var(--text);
  border: 0;
  border-bottom: 1px solid var(--divider);
  padding: 0.75rem 0;
  font-size: 1rem;
  font-family: var(--font-body);
  transition: border-color 350ms ease;
  position: relative;
  z-index: 1;
}
.form-field::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--orange);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 500ms cubic-bezier(.22,1,.36,1);
  pointer-events: none;
}
.form-field:focus-within::after { transform: scaleX(1); }
.form-field input:focus, .form-field textarea:focus, .form-field select:focus { outline: none; border-bottom-color: transparent; }
.form-field textarea { resize: vertical; min-height: 140px; }

.form-row { display: grid; gap: var(--space-4); }
@media (min-width: 640px) { .form-row { grid-template-columns: 1fr 1fr; } }

/* ---------- Newsletter signup ---------- */
.newsletter {
  background: var(--bg-elevated);
  border-top: 1px solid var(--divider);
  border-bottom: 1px solid var(--divider);
  padding-block: clamp(2.5rem, 5vw, 4rem);
}

.newsletter__inner {
  display: grid;
  gap: var(--space-5);
  align-items: center;
  text-align: center;
}

.newsletter__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.5rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text);
}

.newsletter__sub {
  color: var(--text-muted);
  font-size: 1rem;
  max-width: 52ch;
  margin: 0 auto;
}

.newsletter__form {
  display: flex;
  gap: var(--space-3);
  max-width: 520px;
  margin: 0 auto;
  width: 100%;
}

.newsletter__form input[type="email"] {
  flex: 1;
  background: var(--bg);
  color: var(--text);
  border: 1.5px solid var(--divider);
  border-radius: 2px;
  padding: 0.875rem 1rem;
  font-size: 1rem;
  font-family: var(--font-body);
  transition: border-color var(--dur-fast) var(--ease);
}

.newsletter__form input[type="email"]:focus { outline: none; border-color: var(--orange); }
.newsletter__form button { white-space: nowrap; }

.newsletter__note {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-top: 0.5rem;
}

@media (min-width: 720px) {
  .newsletter__inner { grid-template-columns: 1.1fr 1fr; gap: var(--space-7); text-align: left; }
  .newsletter__sub { margin: 0; }
  .newsletter__form { margin: 0; max-width: none; }
}

/* ---------- Pup Kitchen mini-block ---------- */
.pup {
  background: var(--ink);
  color: var(--paper);
  padding-block: clamp(2.5rem, 5vw, 4rem);
}

.pup__grid {
  display: grid;
  gap: var(--space-5);
  align-items: center;
}

.pup__media { overflow: hidden; border-radius: 4px; aspect-ratio: 1; background: var(--ink-soft); }
.pup__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pup__head { display: grid; gap: var(--space-3); align-content: start; }
.pup__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.5rem);
  line-height: 1.05;
  letter-spacing: -0.018em;
  color: var(--paper);
}

.pup__sub { color: rgba(248, 239, 223, 0.78); font-size: 1rem; max-width: 48ch; }
.pup__cta { margin-top: var(--space-3); }

.pup__meals { display: grid; gap: var(--space-3); }
.pup__meal {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: 0.625rem;
  border-bottom: 1px dashed rgba(248, 239, 223, 0.18);
}
.pup__meal:last-child { border-bottom: 0; }
.pup__meal-name { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 1.0625rem; color: var(--orange-light); flex: 1; }
.pup__meal-price { font-family: var(--font-body); font-weight: 700; font-size: 0.9375rem; color: var(--paper); }
.pup__meal-desc { font-size: 0.8125rem; color: rgba(248, 239, 223, 0.6); width: 100%; margin-top: 0.25rem; line-height: 1.4; }

@media (min-width: 720px) {
  .pup__grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); }
}

.pup__paw {
  display: inline-flex;
  width: 36px; height: 36px;
  align-items: center; justify-content: center;
  color: var(--orange);
}

/* ---------- Pre-footer banner (Market & Main coming soon) ---------- */
.prefooter {
  background: var(--olive);
  color: var(--paper);
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.prefooter__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: center;
  text-align: center;
}

.prefooter__eyebrow {
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--olive-light);
}

.prefooter__title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--paper);
}

.prefooter__sub {
  font-size: 0.9375rem;
  color: rgba(248, 239, 223, 0.82);
  max-width: 60ch;
}

.prefooter .btn {
  background: var(--paper);
  color: var(--olive-deep);
  border-color: var(--paper);
}

.prefooter .btn:hover { background: var(--olive-deep); color: var(--paper); border-color: var(--olive-deep); }

@media (min-width: 720px) {
  .prefooter__inner { flex-direction: row; justify-content: space-between; text-align: left; gap: var(--space-6); }
  .prefooter__copy { display: flex; align-items: baseline; gap: var(--space-4); flex-wrap: wrap; }
}

/* ---------- Footer ---------- */
.footer { background: var(--ink); color: var(--paper); padding-block: var(--space-8) var(--space-6); margin-top: 0; }

.footer__top {
  display: grid;
  gap: var(--space-7);
  grid-template-columns: 1fr;
  padding-bottom: var(--space-6);
  border-bottom: 1px solid rgba(248, 239, 223, 0.1);
}

@media (min-width: 720px) { .footer__top { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }

.footer__brand { display: grid; gap: var(--space-3); }
.footer__brand img { width: min(260px, 80%); height: auto; }
.footer__tag { font-family: var(--font-display); font-style: italic; font-size: 1.125rem; color: var(--orange-light); letter-spacing: -0.01em; }
.footer__addr { font-size: 0.9375rem; color: rgba(248, 239, 223, 0.72); line-height: 1.6; }
.footer__addr a { color: var(--orange-light); }

.footer h4 { font-family: var(--font-body); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--orange); margin-bottom: var(--space-3); }
.footer__col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.625rem; }
.footer__col a { color: rgba(248, 239, 223, 0.85); font-size: 0.9375rem; transition: color var(--dur-fast) var(--ease); }
.footer__col a:hover { color: var(--orange-light); }

.footer__bottom { display: grid; gap: var(--space-3); padding-top: var(--space-6); font-size: 0.8125rem; color: rgba(248, 239, 223, 0.55); }
@media (min-width: 720px) { .footer__bottom { grid-template-columns: 1fr auto; align-items: center; } }

.footer__social { display: flex; gap: var(--space-3); list-style: none; padding: 0; margin: 0; }
.footer__social a { width: 38px; height: 38px; border-radius: 999px; display: grid; place-items: center; background: rgba(248, 239, 223, 0.08); color: var(--paper); transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.footer__social svg { width: 16px; height: 16px; }

@media (hover: hover) and (pointer: fine) { .footer__social a:hover { background: var(--orange); color: var(--paper); } }

/* ---------- Menu sticky secondary nav ---------- */
.menu-subnav {
  position: sticky;
  top: 72px;
  z-index: 20;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--divider);
  margin-bottom: var(--space-7);
}

.menu-subnav__inner {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}

.menu-subnav a {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 0.5rem 0.875rem;
  border-radius: 2px;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  touch-action: manipulation;
}

.menu-subnav a:hover,
.menu-subnav a.is-active { background: var(--orange); color: var(--paper); }

.menu-subnav__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
  padding: 0.5rem 0.875rem;
  border: 1.5px solid var(--orange);
  border-radius: 2px;
  background: transparent;
  margin-left: var(--space-2);
  touch-action: manipulation;
}

.menu-subnav__toggle:hover { background: var(--orange); color: var(--paper); }

:root[data-theme="dark"] .menu-subnav { background: color-mix(in srgb, var(--ink) 92%, transparent); }
:root[data-theme="dark"] .menu-subnav a { color: var(--paper); }
:root[data-theme="dark"] .menu-subnav__toggle { color: var(--orange-light); border-color: var(--orange-light); }

/* ---------- Reveal animations (cinematic) ---------- */
.reveal { opacity: 0; transform: translateY(32px); transition: opacity 1100ms cubic-bezier(.22,1,.36,1), transform 1100ms cubic-bezier(.22,1,.36,1); will-change: opacity, transform; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal--up   { transform: translateY(48px); }
.reveal--left { transform: translateX(-32px); }
.reveal--right{ transform: translateX(32px); }
.reveal--scale{ transform: scale(.96); }
.reveal.is-visible.reveal--left,
.reveal.is-visible.reveal--right,
.reveal.is-visible.reveal--scale { transform: none; }

/* Stagger children when parent has data-stagger */
[data-stagger] > * { opacity: 0; transform: translateY(28px); transition: opacity 900ms cubic-bezier(.22,1,.36,1), transform 900ms cubic-bezier(.22,1,.36,1); }
[data-stagger].is-visible > * { opacity: 1; transform: translateY(0); }
[data-stagger].is-visible > *:nth-child(1) { transition-delay: 0ms; }
[data-stagger].is-visible > *:nth-child(2) { transition-delay: 120ms; }
[data-stagger].is-visible > *:nth-child(3) { transition-delay: 240ms; }
[data-stagger].is-visible > *:nth-child(4) { transition-delay: 360ms; }
[data-stagger].is-visible > *:nth-child(5) { transition-delay: 480ms; }
[data-stagger].is-visible > *:nth-child(6) { transition-delay: 600ms; }

/* ---------- Hero load choreography ---------- */
.hero__bg img { animation: heroKenBurns 18s ease-out forwards; transform-origin: center 60%; }
@keyframes heroKenBurns {
  0%   { transform: scale(1.08); }
  100% { transform: scale(1.0); }
}
.hero__logo { animation: heroFadeUp 1400ms cubic-bezier(.22,1,.36,1) 200ms both; }
.hero__tagline { animation: heroFadeUp 1400ms cubic-bezier(.22,1,.36,1) 500ms both; }
.hero__sub { animation: heroFadeUp 1200ms cubic-bezier(.22,1,.36,1) 800ms both; }
.hero__cta, .hero .btn-row { animation: heroFadeUp 1100ms cubic-bezier(.22,1,.36,1) 1100ms both; }
.hero--page .eyebrow,
.hero--page .hero__page-title,
.hero--page .hero__page-subtitle { animation: heroFadeUp 1200ms cubic-bezier(.22,1,.36,1) 200ms both; }
.hero--page .hero__page-title { animation-delay: 350ms; }
.hero--page .hero__page-subtitle { animation-delay: 600ms; }
@keyframes heroFadeUp {
  0%   { opacity: 0; transform: translateY(28px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ---------- Accolade marquee (editorial) ---------- */
.marquee {
  background: var(--ink);
  color: var(--paper);
  overflow: hidden;
  padding-block: 1.5rem;
  border-block: 1px solid color-mix(in srgb, var(--orange) 22%, transparent);
  position: relative;
}
.marquee::before, .marquee::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: clamp(40px, 8vw, 120px); z-index: 2; pointer-events: none;
}
.marquee::before { left: 0; background: linear-gradient(to right, var(--ink), transparent); }
.marquee::after  { right: 0; background: linear-gradient(to left, var(--ink), transparent); }
.marquee__track {
  display: flex;
  width: max-content;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  animation: marqueeSlide 42s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__group {
  display: flex;
  align-items: center;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  white-space: nowrap;
}
.marquee__item {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.0625rem, 0.9rem + 0.5vw, 1.375rem);
  letter-spacing: 0.01em;
  color: var(--paper);
  display: inline-flex; align-items: center; gap: 0.625rem;
}
.marquee__star {
  color: var(--orange);
  font-size: 0.875rem;
  letter-spacing: 0;
  display: inline-block;
  transform: translateY(-1px);
}
@keyframes marqueeSlide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- Premium dish card hover ---------- */
.dish-card { position: relative; transition: transform 700ms cubic-bezier(.22,1,.36,1); }
.dish-card__media { overflow: hidden; }
.dish-card__media img { transition: transform 1400ms cubic-bezier(.22,1,.36,1), filter 800ms ease; will-change: transform; }
@media (hover: hover) {
  .dish-card:hover .dish-card__media img { transform: scale(1.06); filter: brightness(1.04); }
  .dish-card:hover .dish-card__name { color: var(--orange-deep); }
}
.dish-card__name { position: relative; transition: color 500ms ease; display: inline-block; }
.dish-card__name::after {
  content: ""; position: absolute; left: 0; bottom: -4px; height: 2px; width: 100%;
  background: var(--orange);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 700ms cubic-bezier(.22,1,.36,1);
}
@media (hover: hover) {
  .dish-card:hover .dish-card__name::after { transform: scaleX(1); }
}

/* ---------- Editorial pull quote (oversized hanging marks) ---------- */
.pull-quote--editorial {
  position: relative;
  padding-block: clamp(3rem, 6vw, 6rem) clamp(3rem, 5vw, 5rem);
  padding-inline: clamp(2rem, 6vw, 5rem);
  text-align: center;
  max-width: 64ch;
  margin-inline: auto;
  border: 0;
}
.pull-quote--editorial .pull-quote__text {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 3rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
  max-width: none;
  position: relative;
  z-index: 1;
}
.pull-quote--editorial .pull-quote__mark {
  position: absolute;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(8rem, 18vw, 16rem);
  line-height: 0.75;
  color: var(--orange);
  opacity: 0.18;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.pull-quote--editorial .pull-quote__mark--open  { top: -0.1em; left: 0; }
.pull-quote--editorial .pull-quote__mark--close { bottom: -0.35em; right: 0; }
.pull-quote--editorial .pull-quote__cite {
  display: inline-block; margin-top: var(--space-4);
  font-family: var(--font-body); font-style: normal; font-size: 0.8125rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted);
}
.pull-quote--editorial .pull-quote__cite::before { content: "— "; }

/* ---------- Era numerals (About backdrops) ---------- */
.era { position: relative; overflow: hidden; }
.era__numeral {
  position: absolute;
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: clamp(14rem, 36vw, 38rem);
  line-height: 0.78;
  color: var(--orange);
  opacity: 0.07;
  pointer-events: none;
  user-select: none;
  letter-spacing: -0.04em;
  z-index: 0;
}
.era__numeral--right { top: -2vh; right: clamp(0.5rem, 1vw, 1.5rem); }
.era__numeral--left  { top: 8vh; left: clamp(0.5rem, 1vw, 1.5rem); }
.era > .container { position: relative; z-index: 1; }

/* ---------- Press / publication marquee ---------- */
.press-marquee {
  overflow: hidden;
  padding-block: clamp(2rem, 4vw, 3rem);
  border-block: 1px solid var(--divider);
  background: color-mix(in srgb, var(--paper) 96%, var(--orange) 4%);
  position: relative;
}
.press-marquee::before, .press-marquee::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: clamp(40px, 8vw, 100px); z-index: 2; pointer-events: none;
}
.press-marquee::before { left: 0; background: linear-gradient(to right, var(--paper), transparent); }
.press-marquee::after  { right: 0; background: linear-gradient(to left, var(--paper), transparent); }
.press-marquee__track {
  display: flex;
  width: max-content;
  gap: clamp(3rem, 6vw, 5rem);
  animation: marqueeSlide 55s linear infinite;
  align-items: center;
}
.press-marquee__group { display: flex; gap: clamp(3rem, 6vw, 5rem); align-items: center; white-space: nowrap; }
.press-marquee__item {
  font-family: var(--font-display);
  font-weight: 700;
  font-style: normal;
  font-size: clamp(1.125rem, 0.95rem + 0.8vw, 1.625rem);
  color: var(--ink);
  letter-spacing: 0.02em;
  display: inline-flex; align-items: center; gap: 0.875rem;
  opacity: 0.7;
  transition: opacity 400ms ease;
}
.press-marquee__item:hover { opacity: 1; }
.press-marquee__item--italic { font-style: italic; font-weight: 500; color: var(--orange-deep); }
.press-marquee__divider { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); display: inline-block; opacity: 0.55; }

/* ---------- Section head flourish draw ---------- */
.section-head__flourish { display: inline-block; }
.section-head__flourish path {
  stroke-dasharray: 80;
  stroke-dashoffset: 80;
  transition: stroke-dashoffset 1400ms cubic-bezier(.22,1,.36,1) 200ms;
}
.reveal.is-visible .section-head__flourish path,
.is-visible .section-head__flourish path { stroke-dashoffset: 0; }

/* ---------- Gift card art ---------- */
.gift-card-art {
  background: linear-gradient(135deg, var(--ink) 0%, var(--ink-soft) 100%);
  padding: clamp(2rem, 4vw, 3rem);
  aspect-ratio: 4 / 5;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: var(--paper);
  border-radius: 4px;
  box-shadow: 0 30px 60px var(--shadow-lift);
  position: relative;
  border-top: 4px solid var(--orange);
}
.gift-card-art__head, .gift-card-art__foot { position: relative; z-index: 1; }
.gift-card-art__logo {
  height: 60px; width: auto; filter: brightness(1.4); margin-bottom: var(--space-3);
}
.gift-card-art__line {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-top: var(--space-3);
  max-width: 12ch;
  color: var(--paper);
}
.gift-card-art__meta {
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(248, 239, 223, 0.62);
  font-weight: 700;
}

/* ---------- 3D tilt card (gift cards) ---------- */
.tilt-card { perspective: 1200px; transform-style: preserve-3d; }
.tilt-card__inner {
  transition: transform 500ms cubic-bezier(.22,1,.36,1), box-shadow 500ms cubic-bezier(.22,1,.36,1);
  transform-style: preserve-3d;
  will-change: transform;
}
.tilt-card.is-tilting .tilt-card__inner { transition: transform 80ms linear, box-shadow 400ms ease; }
@media (hover: hover) {
  .tilt-card:hover .tilt-card__inner {
    box-shadow: 0 50px 90px -25px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.06);
  }
}
.tilt-card__shine {
  position: absolute; inset: 0;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 45%);
  opacity: 0; transition: opacity 400ms ease;
  pointer-events: none; z-index: 0;
  mix-blend-mode: screen;
}
.tilt-card:hover .tilt-card__shine { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .tilt-card__inner { transition: none; transform: none !important; }
  .tilt-card__shine { display: none; }
}

/* ---------- Refined link underline ---------- */
.link-draw {
  position: relative;
  display: inline-block;
  text-decoration: none;
  color: inherit;
}
.link-draw::after {
  content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0); transform-origin: right center;
  transition: transform 600ms cubic-bezier(.22,1,.36,1);
}
.link-draw:hover::after { transform: scaleX(1); transform-origin: left center; }

/* ---------- "By the numbers" — editorial stats strip ---------- */
.stats {
  background: var(--ink);
  color: var(--paper);
  padding-block: clamp(3.5rem, 7vw, 6rem);
  position: relative;
  overflow: hidden;
}
.stats::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 15% 50%, color-mix(in srgb, var(--orange) 18%, transparent) 0%, transparent 50%),
    radial-gradient(circle at 85% 50%, color-mix(in srgb, var(--orange-deep) 12%, transparent) 0%, transparent 55%);
  pointer-events: none;
}
.stats__inner {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
  text-align: center;
}
.stat { display: grid; gap: 0.625rem; padding-block: 0.5rem; position: relative; }
.stat:not(:last-child)::after {
  content: ""; position: absolute; right: calc(-1 * clamp(1rem, 2vw, 1.75rem)); top: 20%; bottom: 20%; width: 1px;
  background: color-mix(in srgb, var(--orange) 30%, transparent);
}
.stat__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-style: italic;
  font-size: clamp(3.5rem, 4rem + 4vw, 7rem);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--orange-light);
  font-variant-numeric: tabular-nums;
}
.stat__label {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 700;
  color: color-mix(in srgb, var(--paper) 75%, transparent);
  line-height: 1.4;
}
@media (max-width: 720px) {
  .stat:not(:last-child)::after { display: none; }
  .stats__inner { gap: 2.5rem; }
}

/* ---------- Premium link-draw on footer + body links ---------- */
.footer__col a, .footer__bottom a {
  position: relative;
  display: inline-block;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size 500ms cubic-bezier(.22,1,.36,1), color 300ms ease;
}
@media (hover: hover) {
  .footer__col a:hover, .footer__bottom a:hover {
    background-size: 100% 1px;
    color: var(--orange-light);
  }
}

/* ---------- Live hours status (Contact) ---------- */
.info-card--hours { position: relative; }
.hours-status {
  display: inline-flex; align-items: center; gap: 0.625rem;
  padding: 0.5rem 0.875rem;
  font-family: var(--font-body); font-size: 0.6875rem;
  letter-spacing: 0.2em; text-transform: uppercase; font-weight: 700;
  border-radius: 999px;
  background: color-mix(in srgb, var(--paper) 60%, transparent);
  border: 1px solid var(--divider);
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}
.hours-status__dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--text-muted);
  box-shadow: 0 0 0 0 currentColor;
  flex-shrink: 0;
}
.hours-status.is-open .hours-status__dot {
  background: #4a9d4f;
  box-shadow: 0 0 0 4px color-mix(in srgb, #4a9d4f 24%, transparent);
  animation: hoursPulse 2.2s ease-in-out infinite;
}
.hours-status.is-open { color: #2d6a30; border-color: color-mix(in srgb, #4a9d4f 40%, var(--divider)); background: color-mix(in srgb, #4a9d4f 8%, var(--paper)); }
.hours-status.is-closed .hours-status__dot { background: var(--orange-deep); }
.hours-status.is-closed { color: var(--orange-deep); border-color: color-mix(in srgb, var(--orange-deep) 30%, var(--divider)); background: color-mix(in srgb, var(--orange) 6%, var(--paper)); }
@keyframes hoursPulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, #4a9d4f 35%, transparent); }
  50%      { box-shadow: 0 0 0 8px color-mix(in srgb, #4a9d4f 0%, transparent); }
}
.hours-list { list-style: none; padding: 0; margin: 0; }
.hours-list li {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-block: 0.625rem;
  border-bottom: 1px dashed color-mix(in srgb, var(--divider) 70%, transparent);
  transition: background-color 400ms ease, padding-inline 300ms ease;
}
.hours-list li:last-child { border-bottom: 0; }
.hours-list li.is-today {
  background: color-mix(in srgb, var(--orange) 9%, transparent);
  padding-inline: 0.875rem;
  border-radius: 4px;
  border-bottom-color: transparent;
  position: relative;
}
.hours-list li.is-today::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 60%;
  background: var(--orange);
  border-radius: 2px;
}
.hours-list li.is-today span:first-child {
  font-weight: 700; color: var(--ink);
}
.hours-list li.is-today span:last-child {
  color: var(--orange-deep); font-weight: 600;
}
@media (prefers-reduced-motion: reduce) {
  .hours-status__dot, .hours-status.is-open .hours-status__dot { animation: none; }
}

/* ---------- Premium button shadow / lift ---------- */
.btn { transition: transform 400ms cubic-bezier(.22,1,.36,1), box-shadow 400ms cubic-bezier(.22,1,.36,1), background-color 300ms ease, color 300ms ease, border-color 300ms ease; }
@media (hover: hover) {
  .btn--primary:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -12px color-mix(in srgb, var(--orange-deep) 65%, transparent); }
  .btn--secondary:hover { transform: translateY(-1px); }
}

/* ---------- Utility ---------- */
.text-orange { color: var(--orange); }
.text-muted { color: var(--text-muted); }
.italic { font-style: italic; }
.serif { font-family: var(--font-display); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.no-scroll { overflow: hidden; }

/* ---------- Reduce motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
  [data-stagger] > * { opacity: 1; transform: none; }
  .marquee__track, .press-marquee__track { animation: none; }
  .hero__bg img { animation: none; transform: none; }
  .hero__logo, .hero__tagline, .hero__sub, .hero__cta, .hero .btn-row,
  .hero--page .eyebrow, .hero--page .hero__page-title, .hero--page .hero__page-subtitle { animation: none; }
  .section-head__flourish path { stroke-dashoffset: 0; }
}

/* ---------- Focus states ---------- */
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 2px; }

/* ---------- Print ---------- */
@media print { .nav, .footer, .cta-banner { display: none !important; } body { background: white; color: black; } }

/* ============================================================
   Mobile refinements — designed for 430px-class viewports first
   ============================================================ */

@media (max-width: 719px) {
  /* Tighter side gutters so content uses the available width */
  .container { padding-inline: 1.25rem; }

  /* Nav — shrink the chrome */
  .nav__inner { min-height: 64px; padding-block: 0.625rem; }
  .nav.is-scrolled .nav__inner { min-height: 56px; }
  .nav__brand img { height: 32px; }
  .nav__cta { padding: 0.5rem 0.875rem; font-size: 0.75rem; }
  .nav__drawer-links a { font-size: 1.625rem; }

  /* Hero — shorter, tighter, buttons stack */
  .hero { min-height: clamp(540px, 78svh, 720px); }
  .hero__inner { padding-block: clamp(5rem, 12vh, 6rem) clamp(2.5rem, 5vh, 4rem); gap: var(--space-4); }
  .hero__logo { width: min(300px, 72vw); }
  .hero__tagline { font-size: clamp(1.125rem, 0.95rem + 1.4vw, 1.5rem); }
  .hero__sub { font-size: 0.9375rem; line-height: 1.5; max-width: 36ch; }
  .hero__cta.btn-row,
  .hero .btn-row { flex-direction: column; align-items: stretch; width: 100%; max-width: 320px; margin-inline: auto; }
  .hero__cta .btn,
  .hero .btn { justify-content: center; width: 100%; }

  /* Page heroes (about, reservations, contact, etc.) */
  .hero--page { min-height: clamp(320px, 50svh, 400px); }
  .hero__page-title { font-size: clamp(2rem, 1.5rem + 3vw, 2.75rem); }
  .hero__page-subtitle { font-size: 1.125rem; }

  /* Trust strip — 2×2 grid instead of 4 separate stacked items */
  .trust-strip { padding-block: 1rem; }
  .trust-strip__grid { grid-template-columns: 1fr 1fr; gap: 0.75rem 1rem; }
  .trust-strip__item { flex-direction: column !important; gap: 0.125rem; align-items: center; text-align: center; border-left: 0 !important; padding: 0 !important; white-space: normal; }
  .trust-strip__num { font-size: 1rem; }
  .trust-strip__label { font-size: 0.625rem; letter-spacing: 0.08em; }

  /* Section padding tighter on mobile */
  .section { padding-block: clamp(2.5rem, 7vw, 3.5rem); }
  .section--tight { padding-block: clamp(2rem, 5vw, 2.75rem); }
  .section--burnt { padding-block: clamp(2.5rem, 7vw, 3.5rem); }

  /* Headings on mobile */
  h1, .h1 { font-size: clamp(2rem, 1.6rem + 2vw, 2.75rem); }
  h2, .h2 { font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.25rem); line-height: 1.1; }
  h3, .h3 { font-size: clamp(1.25rem, 1.1rem + 0.8vw, 1.625rem); }
  .lead { font-size: 1rem; line-height: 1.55; }
  .display, .italic-display { font-size: inherit; }

  /* Split layouts gap */
  .split { gap: var(--space-5); }
  .split__body { gap: var(--space-3); }
  .split__media { aspect-ratio: 4/3; }
  .split__media--wide { aspect-ratio: 16/10; }

  /* Section heads — left aligned on mobile, less max-width */
  .section-head { margin-bottom: var(--space-5); }
  .section-head--center { text-align: left; align-items: flex-start; margin-inline: 0; }
  .section-head--center .section-head__flourish { margin-inline: 0; }

  /* Dish cards — gap tighter */
  .dish-reel { gap: var(--space-4); }
  .dish-card__body { padding: var(--space-4); gap: 0.5rem; }
  .dish-card__name { font-size: 1.25rem; }

  /* Info cards — pad less */
  .info-card { padding: var(--space-5); }
  .info-card h3 { font-size: 1.25rem; }
  .info-grid { gap: var(--space-3); }

  /* Pull quote tighter */
  .pull-quote { padding-block: var(--space-6); margin-block: var(--space-5); gap: var(--space-3); }
  .pull-quote__text { font-size: 1.375rem; line-height: 1.25; max-width: none; }

  /* CTA banner buttons stack */
  .cta-banner { padding-block: var(--space-7); }
  .cta-banner h2 { font-size: clamp(1.75rem, 1.4rem + 1.8vw, 2.25rem); }
  .cta-banner__inner { gap: var(--space-4); }
  .cta-banner__inner .btn-row { flex-direction: column; width: 100%; }
  .cta-banner__inner .btn { justify-content: center; width: 100%; }

  /* Buttons */
  .btn--lg { padding: 0.875rem 1.5rem; font-size: 0.875rem; }
  .btn-row { gap: 0.625rem; }

  /* Pup Kitchen on mobile */
  .pup { padding-block: var(--space-7); }
  .pup__media { aspect-ratio: 16/10; }
  .pup__title { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem); }
  .pup__meal-desc { font-size: 0.75rem; }

  /* Newsletter stacks */
  .newsletter__form { flex-direction: column; gap: 0.625rem; }
  .newsletter__form .btn { width: 100%; justify-content: center; }
  .newsletter__title { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem); }
  .newsletter__inner { gap: var(--space-4); }

  /* Pre-footer (Market & Main coming soon) */
  .prefooter { padding-block: 1.25rem; }
  .prefooter__inner { flex-direction: column; gap: var(--space-3); text-align: center; align-items: center; }
  .prefooter__copy { flex-direction: column; align-items: center; gap: var(--space-2); }
  .prefooter__title { font-size: 1.25rem; }

  /* Footer compact */
  .footer { padding-block: var(--space-7) var(--space-5); margin-top: 0; }
  .footer__top { gap: var(--space-5); padding-bottom: var(--space-5); }
  .footer__brand img { height: auto; width: min(180px, 60%); }
  .footer__tag { font-size: 1rem; }
  .footer__bottom { gap: var(--space-3); }

  /* Sister banner */
  .sister-banner__inner { flex-direction: column; text-align: center; align-items: center; gap: var(--space-3); }

  /* Menu page mobile */
  body.menu-page .menu-subnav { padding-block: 0.5rem; top: 64px; }
  body.menu-page .menu-subnav__inner { gap: 0.25rem; }
  body.menu-page .menu-subnav a { padding: 0.375rem 0.625rem; font-size: 0.6875rem; }
  body.menu-page .menu-subnav__toggle { margin-left: 0; padding: 0.375rem 0.625rem; font-size: 0.6875rem; }
  body.menu-page :target, body.menu-page section[id], body.menu-page div[id] { scroll-margin-top: 130px; }
  .specials-card { padding: var(--space-4); }
  .specials-card__title { font-size: 1.125rem; }
  .menu-section__title { padding-block: var(--space-2); margin-bottom: var(--space-4); }
  .menu-section__title-display { font-size: 1.5rem; letter-spacing: 0.03em; }
  .menu-section__title-script { font-size: 1rem; }
  .menu-item__name { font-size: 1.125rem; }
  .wine-table .wine-style { font-size: 0.9375rem; }
  .wine-table .wine-name { font-size: 0.8125rem; }

  /* Hero CTA tweaks for page heroes too */
  .hero--page .hero__inner { padding-block: clamp(4rem, 10vh, 5rem) clamp(2rem, 4vh, 3rem); }

  /* About page drop cap — smaller so it doesn't overpower */
  .prose [style*="float: left"] { font-size: 3.25rem !important; padding-right: 0.5rem !important; }

  /* Press feature cards padding */
  article[style*="background: var(--bg-elevated)"][style*="padding: var(--space-6)"] { padding: var(--space-5) !important; }

  /* Press page intro section — the clamp(7rem,…) inline padding-top
     creates a big empty gap above the eyebrow on mobile. Tighten it. */
  .press-intro { padding-top: 2.5rem !important; padding-bottom: 1.5rem !important; }
  .press-intro .section-head__flourish { margin-bottom: var(--space-3); }
  .press-intro + .section--tight { padding-top: 1.5rem; }
}

/* Press page intro section — tighten the empty space below the
   intro headline on desktop too. The hero-flavored padding-top is fine,
   but the section-section gap before Awards reads as a layout bug. */
@media (min-width: 720px) {
  .press-intro { padding-bottom: clamp(2rem, 3vw, 3rem); }
  .press-intro + .section--tight { padding-top: clamp(2rem, 3vw, 3rem); }
}

/* Very small screens — one more pass */
@media (max-width: 420px) {
  .container { padding-inline: 1rem; }
  .nav__brand img { height: 28px; }
  .nav__cta { padding: 0.5rem 0.75rem; }
  .hero__logo { width: min(260px, 80vw); }
  .hero__tagline { font-size: 1.0625rem; }
  .hero__sub { font-size: 0.875rem; }
  .trust-strip__num { font-size: 0.9375rem; }
  .pull-quote__text { font-size: 1.25rem; }
}