/* ==========================================================================
   Graze Anatomy ABQ — design system
   Palette locked from the logo (DESIGN-TOKENS-LOCKED.md). Food is the only
   saturated thing on the page; chrome stays burgundy / warm-neutral.
   `wood` (#C08858) on `paper` is ~2.6–3:1 — surfaces, rules and bands only,
   never text.
   ========================================================================== */

/* ---- Fonts (self-hosted, latin) ---- */
@font-face {
  font-family: "Young Serif";
  src: url("../fonts/young-serif-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Karla";
  src: url("../fonts/karla-var.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* ---- Tokens ---- */
:root {
  /* Declare the single scheme rather than leaving it unset.
     This palette is a deliberate one-way brand lock, so there is no dark theme
     to offer — but with color-scheme unset the UA is free to apply its own dark
     styling to native controls on a dark-OS device, and the newsletter form ships
     on every page. Stating "light" is not the same as having no opinion. */
  color-scheme: light;

  /* Locked palette */
  --gz-brand: #3D0E16;
  --gz-brand-deep: #400010;
  --gz-wood: #C08858;
  --gz-wood-tint: #EBD1AE;
  --gz-ink: #1A1210;
  --gz-paper: #FDFCFA;

  /* Derived ramp (ink/wood families only) */
  --gz-ink-soft: #463832;        /* 10.9:1 on paper, 7.6:1 on wood-tint */
  --gz-line: #E9DCCB;            /* hairlines on paper */
  --gz-line-strong: #D8BE97;     /* hairlines on wood-tint */
  /* Derived darker step of --gz-wood, for form-field boundaries only. NOT a new
     brand colour: --gz-line-strong measures 1.75:1 against paper, and WCAG
     1.4.11 requires 3:1 for a control's visual boundary. On /catering/inquiry/
     the field and page backgrounds are the same colour, so this border is the
     ONLY thing telling a user where the input is. Same hue, compliant value. */
  --gz-line-input: #A97341;
  --gz-paper-on-brand: #F7EFE9;  /* body text on burgundy bands */

  --gz-font-display: "Young Serif", "Iowan Old Style", Georgia, serif;
  --gz-font-body: Karla, "Segoe UI", -apple-system, sans-serif;

  /* Type scale — fluid, ~1.3 ratio */
  --gz-step--1: clamp(0.9375rem, 0.91rem + 0.15vw, 1rem);
  --gz-step-0: clamp(1.0625rem, 1rem + 0.35vw, 1.1875rem);
  --gz-step-1: clamp(1.35rem, 1.2rem + 0.75vw, 1.625rem);
  --gz-step-2: clamp(1.7rem, 1.45rem + 1.3vw, 2.2rem);
  --gz-step-3: clamp(2.125rem, 1.7rem + 2.2vw, 3rem);
  --gz-step-4: clamp(2.75rem, 2.05rem + 3.6vw, 4.25rem);

  /* Space */
  --gz-s-2xs: 0.5rem;
  --gz-s-xs: 0.75rem;
  --gz-s-s: 1rem;
  --gz-s-m: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --gz-s-l: clamp(2.25rem, 1.9rem + 1.8vw, 3.25rem);
  --gz-s-xl: clamp(3.5rem, 2.8rem + 3vw, 5.25rem);
  --gz-s-2xl: clamp(4.75rem, 3.6rem + 5vw, 7.5rem);

  --gz-radius: 14px;
  --gz-radius-s: 8px;
  --gz-ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* z scale */
  --gz-z-sticky: 100;
  --gz-z-drawer: 200;

  /* Kadence bridge — later declaration wins over the theme's inline vars */
  --global-body-font-family: var(--gz-font-body);
  --global-heading-font-family: var(--gz-font-display);
  --global-content-width: 1160px;
}

/* ---- Base ---- */
body {
  background: var(--gz-paper);
  color: var(--gz-ink);
  font-family: var(--gz-font-body);
  font-size: var(--gz-step-0);
  line-height: 1.62;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
  font-family: var(--gz-font-display);
  font-weight: 400;
  color: var(--gz-brand);
  text-wrap: balance;
  margin: 0 0 var(--gz-s-s);
}
h1 { font-size: var(--gz-step-4); line-height: 1.05; letter-spacing: -0.005em; }
h2 { font-size: var(--gz-step-3); line-height: 1.12; }
h3 { font-size: var(--gz-step-1); line-height: 1.25; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.entry-content a:not(.gz-btn),
.gz-prefooter a,
.site-footer a {
  color: var(--gz-brand-deep);
  text-decoration: underline;
  text-decoration-color: var(--gz-wood);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s var(--gz-ease);
}
.entry-content a:not(.gz-btn):hover { text-decoration-color: var(--gz-brand-deep); }

:where(a, button, input, textarea, select, summary):focus-visible {
  outline: 2px solid var(--gz-brand-deep);
  outline-offset: 3px;
  border-radius: 2px;
}
/* Kadence ships its own 3px light outline — repaint it on our components */
.gz-btn:focus-visible,
.entry-content .wp-block-button__link:focus-visible,
.main-navigation .primary-menu-container > ul > li.menu-item > a:focus-visible {
  outline: 2px solid var(--gz-brand-deep);
  outline-offset: 3px;
}
.gz-band-brand :where(a, button):focus-visible,
.gz-band-brand .gz-btn:focus-visible,
.gz-prefooter :where(a, button):focus-visible {
  outline-color: var(--gz-paper);
}

/* ---- Layout primitives ---- */
.gz-wrap { width: min(1160px, 92%); margin-inline: auto; }
.gz-wrap-narrow { width: min(760px, 92%); margin-inline: auto; }

.gz-section { padding-block: var(--gz-s-2xl); }
.gz-section--tight { padding-block: var(--gz-s-xl); }

.gz-band-tint { background: var(--gz-wood-tint); }
.gz-band-tint h2, .gz-band-tint h3 { color: var(--gz-brand); }
.gz-band-tint { color: var(--gz-ink); }

.gz-band-brand { background: var(--gz-brand); color: var(--gz-paper-on-brand); }
.gz-band-brand h2 { color: var(--gz-paper); }
.gz-band-brand h3 { color: var(--gz-wood-tint); }
.gz-band-brand a { color: var(--gz-paper); text-decoration-color: var(--gz-wood); }

.gz-lead {
  font-size: var(--gz-step-1);
  line-height: 1.45;
  color: var(--gz-ink-soft);
  max-width: 34ch;
}
.gz-prose { max-width: 66ch; }
.gz-prose p { text-wrap: pretty; }
.gz-meta { font-size: var(--gz-step--1); color: var(--gz-ink-soft); letter-spacing: 0.01em; }

.gz-rule {
  border: 0;
  border-top: 2px solid var(--gz-wood);
  width: 72px;
  margin: var(--gz-s-m) 0;
}

/* ---- Buttons ---- */
.gz-btn,
.entry-content .wp-block-button__link {
  display: inline-block;
  font-family: var(--gz-font-body);
  font-weight: 700;
  font-size: var(--gz-step-0);
  letter-spacing: 0.01em;
  line-height: 1.2;
  padding: 0.85em 1.5em;
  border-radius: var(--gz-radius-s);
  background: var(--gz-brand);
  color: var(--gz-paper);
  text-decoration: none;
  border: 1.5px solid var(--gz-brand);
  transition: background 0.22s var(--gz-ease), border-color 0.22s var(--gz-ease),
    color 0.22s var(--gz-ease), transform 0.22s var(--gz-ease);
}
.gz-btn:hover,
.entry-content .wp-block-button__link:hover {
  background: var(--gz-brand-deep);
  border-color: var(--gz-brand-deep);
  color: var(--gz-paper);
  transform: translateY(-1px);
}
.gz-btn:active { transform: translateY(0); }

.gz-btn--ghost {
  background: transparent;
  color: var(--gz-brand);
}
.gz-btn--ghost:hover {
  background: var(--gz-brand);
  color: var(--gz-paper);
  border-color: var(--gz-brand);
}

/* On burgundy bands the roles invert */
.gz-btn--tint {
  background: var(--gz-wood-tint);
  border-color: var(--gz-wood-tint);
  color: var(--gz-brand);
}
.gz-btn--tint:hover {
  background: var(--gz-paper);
  border-color: var(--gz-paper);
  color: var(--gz-brand);
}
/* .gz-band-brand a (0-1-1) must not repaint inverted buttons */
.gz-band-brand .gz-btn--tint,
.gz-band-brand .gz-btn--tint:hover {
  color: var(--gz-brand);
}
.gz-btn--ghost-light {
  background: transparent;
  border-color: var(--gz-wood-tint);
  color: var(--gz-paper);
}
.gz-btn--ghost-light:hover {
  background: var(--gz-wood-tint);
  border-color: var(--gz-wood-tint);
  color: var(--gz-brand);
}

.gz-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gz-s-xs);
  align-items: center;
  margin-top: var(--gz-s-m);
}
.gz-cta-row + .gz-meta,
.gz-hours + .gz-meta { margin-top: 1.25rem; }

/* ---- Photos & placeholders ---- */
.gz-photo {
  border-radius: var(--gz-radius);
  overflow: hidden;
  background: var(--gz-wood-tint);
}
.gz-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* one consistent treatment: slight shadow lift, warm — the three source
     photos are low-key and the page is light */
  filter: brightness(1.06) saturate(1.03);
}
.gz-photo--flat img { filter: none; }

/* ---- Hero art stack ----
   Food leads, brand mark follows. A deli's first screen has to carry appetite,
   so the photograph is the dominant object and the logo loop sits under it at
   roughly a third the width — present, but no longer the largest thing above
   the fold. (These rules replace the pre-video framed-image treatment, which
   had been dead since the loop shipped.) */
.gz-hero-art {
  display: grid;
  gap: var(--gz-s-s);
  justify-items: start;
}
.gz-hero-photo {
  aspect-ratio: 4 / 3;   /* the source is 1000x750 — no crop */
  width: 100%;
}
.gz-hero-art .gz-hero-loop {
  width: min(200px, 38%);
}

/* Corporate: a tall catered table, held to a calm banner height */
.gz-photo--board { aspect-ratio: 2 / 1; }
.gz-photo--board img { object-position: 50% 38%; }

/* Catering hero — portrait source; crop the empty foreground cloth, keep the
   table receding. Capped so the section doesn't tower over its own copy. */
.gz-photo--hero-tall { aspect-ratio: 4 / 5; max-height: 640px; margin-inline: auto; }
.gz-photo--hero-tall img { object-position: 50% 42%; }

.gz-photo--table { aspect-ratio: 4 / 3; }
.gz-photo--table img { object-position: 50% 42%; }

/* ---- Home: hero ---- */
.gz-hero { padding-block: var(--gz-s-xl) var(--gz-s-2xl); }
.gz-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  /* Three children, not two, so the photograph can drop BETWEEN the copy and
     the buttons when this collapses to one column. As a sibling of the whole
     text block it could only ever land after them, which is why the first food
     on the page used to sit below the fold on a phone. */
  grid-template-areas:
    "copy    art"
    "actions art";
  align-content: center;
}
.gz-hero-copy    { grid-area: copy; }
.gz-hero-art     { grid-area: art; align-self: center; }
.gz-hero-actions { grid-area: actions; align-self: start; }

/* Brand loop — matches the source 1168x784 so nothing crops or letterboxes. */
.gz-hero-loop {
  aspect-ratio: 1168 / 784;
  width: 100%;
  border: 1px solid var(--gz-line-strong);
  border-radius: var(--gz-radius);
  overflow: hidden;
  background: #F5E9D7; /* the loop's own cream, so the first paint doesn't flash */
}
.gz-hero-loop video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gz-hero h1 { margin-bottom: var(--gz-s-s); max-width: 12ch; }
.gz-hero .gz-lead { margin-bottom: 0; }
/* Kadence ships `.single-content p { margin-top: 0 }` at (0,1,1), which beat the
   single-class rule here and welded the opening date to the buttons. Scoping to
   .gz-hero takes this to (0,2,0) and wins without !important. */
.gz-hero .gz-hero-status {
  margin-top: var(--gz-s-m);
  font-size: var(--gz-step--1);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--gz-brand-deep);
}

@media (max-width: 880px) {
  .gz-hero-grid {
    grid-template-columns: 1fr;
    /* copy -> actions -> art, NOT copy -> art -> actions.
       Putting the art second got food above the fold but pushed both CTAs and
       the opening-date line out of the first screen, and made "Pause the loop"
       the first tappable thing on the page. With the buttons directly under a
       shortened copy block, the photo still clears the fold — this gets the
       calls to action AND the food into the first screen instead of trading
       one for the other. */
    grid-template-areas: "copy" "actions" "art";
  }
  .gz-hero-art { max-width: 620px; }
  /* The loop keeps its subordinate width when stacked; without this it would
     inherit the 620px cap and out-scale the photograph again. */
  .gz-hero-art .gz-hero-loop { width: min(170px, 40%); }
}

/* Entrance — content is visible by default; animation only decorates.
   That claim used to be false. The keyframe animated `opacity: 0 -> 1` with
   `animation-fill-mode: both`, and `both` back-fills the `from` state: every
   [data-rise] element sat at opacity 0 before the animation began, through the
   0.08/0.16/0.24s stagger, and indefinitely anywhere the animation never ran.
   The whole above-fold pitch — h1, lead, CTAs, opening date, photo — was gated
   on an animation completing, which is precisely the pattern the house rules
   name: a reveal must enhance an already-visible default, because animations do
   not complete in headless renderers, screenshot services or preview crawlers.
   Animating transform ONLY keeps the motion and makes visibility unconditional. */
@media (prefers-reduced-motion: no-preference) {
  .gz-hero [data-rise] {
    animation: gz-rise 0.7s var(--gz-ease) both;
  }
  .gz-hero [data-rise="2"] { animation-delay: 0.08s; }
  .gz-hero [data-rise="3"] { animation-delay: 0.16s; }
  .gz-hero [data-rise="4"] { animation-delay: 0.24s; }
  @keyframes gz-rise {
    from { transform: translateY(14px); }
    to { transform: none; }
  }
}

/* ---- Home: what-we-make strip ---- */
.gz-strip { padding-block: var(--gz-s-l); }
.gz-strip-line {
  font-family: var(--gz-font-display);
  font-size: var(--gz-step-2);
  line-height: 1.35;
  color: var(--gz-brand);
  text-wrap: balance;
  max-width: 30ch;
  margin: 0;
}
.gz-strip-line .sep { color: var(--gz-brand-deep); opacity: 0.45; padding-inline: 0.08em; }

/* ---- Two-column feature (positioning, shop) ---- */
.gz-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.gz-feature--flip > :first-child { order: 2; }
@media (max-width: 880px) {
  .gz-feature { grid-template-columns: 1fr; }
  .gz-feature--flip > :first-child { order: 0; }
}

/* ---- Occasion strip (burgundy, no images by design) ---- */
.gz-occasions h2 { max-width: 18ch; margin-bottom: var(--gz-s-l); }
.gz-occ-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--gz-s-l);
}
.gz-occ h3 { margin-bottom: var(--gz-s-2xs); }
.gz-occ p { color: var(--gz-paper-on-brand); max-width: 34ch; }
@media (min-width: 881px) {
  .gz-occ + .gz-occ { border-left: 1px solid rgba(235, 209, 174, 0.28); padding-left: var(--gz-s-l); }
}

/* ---- Ledger rows (catering tiers, menu categories) ---- */
.gz-ledger { list-style: none; margin: 0; padding: 0; }
.gz-ledger > li {
  padding-block: var(--gz-s-l);
  border-top: 1px solid var(--gz-line);
}
.gz-ledger > li:first-child { border-top: 0; padding-top: 0; }
.gz-ledger h2, .gz-ledger h3 { font-size: var(--gz-step-1); line-height: 1.25; margin-bottom: 0.35rem; }
.gz-ledger p { color: var(--gz-ink-soft); max-width: 58ch; margin: 0; }

.gz-tier {
  display: grid;
  grid-template-columns: minmax(240px, 380px) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
.gz-tier .gz-photo { aspect-ratio: 4 / 3; }
li:nth-child(even) .gz-tier { grid-template-columns: minmax(0, 1fr) minmax(240px, 380px); }
li:nth-child(even) .gz-tier .gz-photo { order: 2; }
@media (max-width: 760px) {
  .gz-tier, li:nth-child(even) .gz-tier { grid-template-columns: 1fr; }
  li:nth-child(even) .gz-tier .gz-photo { order: 0; }
  .gz-tier .gz-photo { max-width: 480px; aspect-ratio: 16 / 9; }
}

/* ---- Range grid (catering: what we cater) ----
   Photo-forward tiles on the page ground — deliberately not cards: no boxes,
   no borders, no nesting. The image carries it once photography lands. */
.gz-range {
  list-style: none;
  margin: var(--gz-s-l) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--gz-s-l) var(--gz-s-m);
}
.gz-range > li { margin: 0; }
.gz-range h3 { margin: var(--gz-s-s) 0 0.3rem; }
.gz-range p { color: var(--gz-ink-soft); margin: 0; max-width: 42ch; }
.gz-range .gz-photo { aspect-ratio: 4 / 3; }

/* Awaiting photography — say so, rather than let a flat fill read as broken */
.gz-photo--pending { position: relative; }
.gz-photo--pending figcaption {
  position: absolute;
  left: 0.75rem;
  bottom: 0.75rem;
  font-family: var(--gz-font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--gz-brand);
  background: var(--gz-paper);
  border: 1px solid var(--gz-line-strong);
  border-radius: 999px;
  padding: 0.3em 0.85em;
}

@media (max-width: 600px) {
  /* Six stacked 4:3 fills is a wall; shorten them until the photos land */
  .gz-range .gz-photo { aspect-ratio: 16 / 9; }
}

/* ---- Menu gallery — what actually comes out of the kitchen ---- */
.gz-gallery {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--gz-s-m);
}
.gz-gallery > li { margin: 0; }
.gz-gallery .gz-photo { aspect-ratio: 1 / 1; }
.gz-gallery p {
  margin: 0.6rem 0 0;
  font-family: var(--gz-font-body);
  font-weight: 600;
  font-size: var(--gz-step--1);
  color: var(--gz-ink);
}

/* ---- Square menu ---- */
.gz-menu-cat + .gz-menu-cat { margin-top: var(--gz-s-xl); }
.gz-menu-items { list-style: none; margin: var(--gz-s-m) 0 0; padding: 0; }

.gz-menu-item {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  gap: var(--gz-s-s) var(--gz-s-m);
  align-items: start;
  padding-block: var(--gz-s-s);
  border-top: 1px solid var(--gz-line);
}
.gz-menu-item:first-child { border-top: 0; }
/* No image is a normal state, not a gap — the copy just takes the space. */
.gz-menu-item--noimg { grid-template-columns: minmax(0, 1fr) auto; }

.gz-menu-item .gz-photo { aspect-ratio: 1 / 1; border-radius: var(--gz-radius-s); }
.gz-menu-item h3 { margin: 0 0 0.2rem; font-size: var(--gz-step-1); }
.gz-menu-copy p { margin: 0; color: var(--gz-ink-soft); max-width: 54ch; }

.gz-menu-price {
  margin: 0;
  font-family: var(--gz-font-display);
  font-size: var(--gz-step-1);
  color: var(--gz-brand);
  white-space: nowrap;
}

@media (max-width: 560px) {
  .gz-menu-item { grid-template-columns: 64px minmax(0, 1fr); }
  .gz-menu-item--noimg { grid-template-columns: minmax(0, 1fr); }
  .gz-menu-price { grid-column: 2; text-align: left; }
  .gz-menu-item--noimg .gz-menu-price { grid-column: 1; }
}

/* ---- Statement list (catering terms, visit hours) ---- */
.gz-statements { list-style: none; margin: 0; padding: 0; }
.gz-statements li {
  font-family: var(--gz-font-display);
  font-size: var(--gz-step-1);
  color: var(--gz-brand);
  padding-block: var(--gz-s-s);
  border-top: 1px solid var(--gz-line-strong);
}
.gz-statements li:first-child { border-top: 0; }
.gz-statements .note {
  display: block;
  font-family: var(--gz-font-body);
  font-size: var(--gz-step--1);
  color: var(--gz-ink-soft);
  margin-top: 0.2rem;
}

/* ---- Hours table ---- */
.gz-hours { width: 100%; max-width: 560px; border-collapse: collapse; }
.gz-hours th, .gz-hours td {
  text-align: left;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--gz-line);
  vertical-align: baseline;
}
.gz-hours th {
  font-family: var(--gz-font-body);
  font-weight: 700;
  font-size: var(--gz-step-0);
  color: var(--gz-ink);
  padding-right: 2rem;
  white-space: nowrap;
}
.gz-hours td {
  font-family: var(--gz-font-display);
  font-size: var(--gz-step-1);
  color: var(--gz-brand);
}
.gz-hours .closed td { font-family: var(--gz-font-body); font-size: var(--gz-step-0); color: var(--gz-ink-soft); }

/* ---- Allergen note ---- */
.gz-allergen {
  border: 1px solid var(--gz-line-strong);
  border-radius: var(--gz-radius-s);
  padding: var(--gz-s-m);
  max-width: 66ch;
}
.gz-allergen strong { color: var(--gz-brand); }

/* ---- About watermark moment ---- */
.gz-markline {
  display: flex;
  align-items: center;
  gap: var(--gz-s-m);
}
.gz-markline img { width: clamp(180px, 26vw, 300px); height: auto; opacity: 0.9; }

/* ---- Header ---- */
/* Kadence paints its page wrapper pure white; the ground must be paper */
.site.wp-site-blocks, .site, .site-header,
.site-header .site-header-row-container-inner { background: var(--gz-paper); }
/* The wordmark is the only route home — there is no "Home" nav item — and it
   rendered 216.7x23.1, under the 44px floor held everywhere else. */
.site-branding a { text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.site-branding .site-title {
  font-family: var(--gz-font-display);
  font-weight: 400;
  font-size: clamp(1.3rem, 1.1rem + 0.9vw, 1.6rem);
  color: var(--gz-brand);
  line-height: 1.1;
}
.site-branding .site-title:hover { color: var(--gz-brand-deep); }
.site-header .site-container { border-bottom: 1px solid var(--gz-line); }

.main-navigation .primary-menu-container > ul > li.menu-item > a {
  font-family: var(--gz-font-body);
  font-weight: 600;
  font-size: 1rem;
  color: var(--gz-ink);
}
.main-navigation .primary-menu-container > ul > li.menu-item > a:hover { color: var(--gz-brand-deep); }
.main-navigation .primary-menu-container > ul > li.menu-item.current-menu-item > a {
  color: var(--gz-brand-deep);
  text-decoration: underline;
  text-decoration-color: var(--gz-brand-deep);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
.main-navigation .primary-menu-container > ul > li.menu-item.gz-nav-cta.current-menu-item > a {
  text-decoration-color: var(--gz-paper);
  text-underline-offset: 4px;
}
/* Nav CTA — Visit */
.main-navigation .primary-menu-container > ul > li.menu-item.gz-nav-cta > a {
  background: var(--gz-brand);
  color: var(--gz-paper);
  border-radius: var(--gz-radius-s);
  padding: 0.55em 1.1em;
  margin-left: 0.4em;
  transition: background 0.22s var(--gz-ease);
}
.main-navigation .primary-menu-container > ul > li.menu-item.gz-nav-cta > a:hover { background: var(--gz-brand-deep); color: var(--gz-paper); }

/* Mobile drawer inherits the palette */
#mobile-drawer .drawer-inner { background: var(--gz-brand); }
#mobile-drawer .drawer-inner a { color: var(--gz-paper); font-family: var(--gz-font-body); font-weight: 600; }
#mobile-drawer .drawer-header .menu-toggle-icon { color: var(--gz-paper); }

/* ---- Newsletter band — one row on desktop, stacked on a phone ---- */
.gz-signup h2 { max-width: 20ch; }
.gz-signup .gz-prose { margin-bottom: var(--gz-s-m); }
.gz-signup .frm-fluent-form { max-width: none; }

@media (min-width: 720px) {
  /* Fluent Forms nests the fields in a fieldset — grid belongs there, not on the form */
  .gz-signup .frm-fluent-form > fieldset {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) auto;
    gap: var(--gz-s-s);
    align-items: end;
    border: 0;
    padding: 0;
    margin: 0;
    min-inline-size: 0;
  }
  .gz-signup .ff-el-group { margin-bottom: 0; }
  .gz-signup .ff-btn-submit { white-space: nowrap; }
}

/* The tint band already carries the section; inputs need the paper ground */
.gz-signup :is(input[type="text"], input[type="email"]) { background: var(--gz-paper); }

/* ---- Pre-footer band + footer ---- */
.gz-prefooter { background: var(--gz-brand); color: var(--gz-paper-on-brand); }
.gz-prefooter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--gz-s-l);
  padding-block: var(--gz-s-xl);
}
.gz-prefooter h2 {
  font-size: var(--gz-step-1);
  color: var(--gz-wood-tint);
  margin-bottom: var(--gz-s-xs);
}
.gz-prefooter p { margin-bottom: 0.4em; }
.gz-prefooter a { color: var(--gz-paper); text-decoration-color: var(--gz-wood); }
.gz-prefooter a:hover { text-decoration-color: var(--gz-paper); }
.gz-prefooter .gz-wordmark {
  font-family: var(--gz-font-display);
  font-size: var(--gz-step-2);
  color: var(--gz-paper);
  line-height: 1.15;
  margin-bottom: var(--gz-s-xs);
  text-wrap: balance;
}
.gz-prefooter-allergen {
  border-top: 1px solid rgba(235, 209, 174, 0.28);
  padding-block: var(--gz-s-m) var(--gz-s-l);
  font-size: var(--gz-step--1);
  color: var(--gz-paper-on-brand);
  max-width: 72ch;
}

.site-footer, .site-footer .site-footer-wrap { background: var(--gz-brand-deep); color: var(--gz-paper-on-brand); }
.site-footer .site-footer-row-container-inner { background: transparent; }
.site-footer * { color: var(--gz-paper-on-brand); font-size: var(--gz-step--1); }
.site-footer a:hover { color: var(--gz-paper); }

/* ---- Kadence frame adjustments ---- */
.content-area { padding: 0; margin: 0; }
.entry-content-wrap { padding: 0; }
.single-entry { border-radius: 0; box-shadow: none; }
.entry-content > *:first-child { margin-top: 0; }

/* Page content full-bleed sections manage their own width */
.gz-full { width: 100%; }

/* ---- Fluent Forms, wearing the Graze system ----
   Retokenise the plugin at its own variables rather than out-specifying
   every rule: its defaults (#1a7efb primary, #f56c6c danger) are off-palette.  */
.gz-formwrap .fluentform,
.gz-formwrap .frm-fluent-form {
  --fluentform-primary: var(--gz-brand);
  --fluentform-secondary: var(--gz-ink-soft);
  --fluentform-danger: var(--gz-brand-deep);
  --fluentform-border-color: var(--gz-line-input);
  --fluentform-border-radius: var(--gz-radius-s);
}

.gz-formwrap .frm-fluent-form { max-width: 34rem; }

.gz-formwrap .ff-el-group { margin-bottom: var(--gz-s-m); }

/* The form is the page's job here — don't make people scroll past a void */
.gz-section + .gz-section--tight > .gz-formwrap { margin-top: calc(-1 * var(--gz-s-l)); }

.gz-formwrap .ff-el-input--label label {
  font-family: var(--gz-font-body);
  font-weight: 700;
  font-size: var(--gz-step-0);
  color: var(--gz-ink);
  margin-bottom: 0.35rem;
}
/* Required asterisk — match the plugin's own specificity (0,4,1) */
.gz-formwrap .fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label::after,
.gz-formwrap .fluentform .ff-el-input--label.ff-el-is-required.asterisk-left label::before {
  color: var(--gz-brand);
}

/* Help text sits between label and input — the tax/gratuity line must be
   readable without hovering, and there is no hover on touch. */
.gz-formwrap .ff_ahm {
  display: block;
  font-style: italic;
  margin-bottom: 0.4rem;
}

.gz-formwrap .ff-el-help-message {
  font-size: var(--gz-step--1);
  color: var(--gz-ink-soft);
  line-height: 1.45;
  margin-top: 0.2rem;
  max-width: 52ch;
}

.gz-formwrap input[type="text"],
.gz-formwrap input[type="email"],
.gz-formwrap input[type="tel"],
.gz-formwrap input[type="number"],
.gz-formwrap textarea,
.gz-formwrap select {
  width: 100%;
  font-family: var(--gz-font-body);
  font-size: var(--gz-step-0);
  color: var(--gz-ink);
  background: var(--gz-paper);
  border: 1.5px solid var(--gz-line-input);
  border-radius: var(--gz-radius-s);
  padding: 0.7em 0.85em;
  line-height: 1.4;
  transition: border-color 0.2s var(--gz-ease), box-shadow 0.2s var(--gz-ease);
}
/* Selects render at 41.3px from FluentForm's own padding — under the 44px floor
   this project holds everywhere else. */
.gz-formwrap select { min-height: 44px; }
.gz-formwrap textarea { min-height: 7rem; resize: vertical; }

/* Placeholder must clear 4.5:1 too — ink-soft, not a light gray */
.gz-formwrap ::placeholder { color: var(--gz-ink-soft); opacity: 1; }

.gz-formwrap :is(input, textarea, select):hover { border-color: var(--gz-wood); }

/* `.ff-default .ff-el-form-control:focus` sets outline:none at (0,3,0) and
   would strip the keyboard ring — this is (0,3,1) so the ring survives. */
.gz-formwrap .fluentform :is(input, textarea, select):focus,
.gz-formwrap .fluentform :is(input, textarea, select):focus-visible,
.gz-formwrap .fluentform .ff-el-form-control:focus {
  outline: 2px solid var(--gz-brand-deep);
  outline-offset: 2px;
  border-color: var(--gz-brand-deep);
}

/* The `.ff-default` in these selectors is load-bearing, not decoration.
   `.gz-formwrap .ff-btn-submit` was (0,2,0) — the SAME weight as FluentForm's
   `.ff-default .ff_btn_style`, which loads at stylesheet index 9 against this
   file's 7 and therefore won every property it declared. The submit button was
   silently rendering at 7px radius, 16px/500 type and a 1px TRANSPARENT border
   instead of 8px, 19px/700 and 1.5px oxblood. Only background and color survived,
   because those are the two things the plugin does not declare.
   The doctrine was already written at the bottom of this file and applied to the
   placeholder and the focus ring; this block predated it and never got the same
   treatment. Adding `.ff-default` takes these to (0,3,0)/(0,4,0). */
.gz-formwrap .ff-default .ff-btn-submit {
  font-family: var(--gz-font-body);
  font-weight: 700;
  font-size: var(--gz-step-0);
  letter-spacing: 0.01em;
  padding: 0.85em 1.5em;
  border-radius: var(--gz-radius-s);
  background: var(--gz-brand);
  border: 1.5px solid var(--gz-brand);
  color: var(--gz-paper);
  cursor: pointer;
  transition: background 0.22s var(--gz-ease), transform 0.22s var(--gz-ease);
}
.gz-formwrap .ff-default .ff-btn-submit:hover {
  background: var(--gz-brand-deep);
  border-color: var(--gz-brand-deep);
  transform: translateY(-1px);
  /* The plugin also sets opacity:.8 on hover, which washed out the background
     change above. Not in the original report; same root cause. */
  opacity: 1;
}
.gz-formwrap .ff-default .ff-btn-submit:active { transform: translateY(0); }

/* Errors: burgundy, never a stoplight red that fights the palette */
.gz-formwrap .error.text-danger,
.gz-formwrap .ff-el-is-error .error {
  font-size: var(--gz-step--1);
  color: var(--gz-brand-deep);
  font-weight: 600;
  margin-top: 0.3rem;
}
.gz-formwrap .ff-el-is-error :is(input, textarea, select) {
  border-color: var(--gz-brand-deep);
}

/* The conditional "recommend a range" note */
.gz-form-note {
  background: var(--gz-wood-tint);
  border-radius: var(--gz-radius-s);
  padding: var(--gz-s-s) var(--gz-s-m);
  font-size: var(--gz-step--1);
  color: var(--gz-ink);
  margin: 0;
  max-width: 52ch;
}

.gz-formwrap .ff-message-success {
  border: 1px solid var(--gz-line-strong);
  border-radius: var(--gz-radius-s);
  padding: var(--gz-s-m);
  color: var(--gz-ink);
  background: var(--gz-paper);
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---- Third-party overrides ----------------------------------------------
   FluentForm loads at stylesheet index 9 and Kadence at 6; this file is 7. So
   an equal-specificity rule here LOSES to FluentForm and wins against Kadence.
   Every selector below is deliberately one class heavier than the rule it
   replaces, which is why none of this needs !important. Counts are noted so
   the next person can see the margin they have. */

/* FluentForm ships `.fluentform .ff-el-form-control::placeholder {color:#868e96}`
   (0,2,1). That measures 3.24:1 on paper — an AA failure, on the form Michelle's
   leads arrive through. --gz-ink-soft is 10.9:1. This is (0,3,1). */
.gz-formwrap .fluentform .ff-el-form-control::placeholder {
  color: var(--gz-ink-soft);
  opacity: 1;
}

/* FluentForm ships `.ff-default .ff_btn_style:focus {outline:0}` (0,3,0), which
   left the submit button as the one control on the site with no keyboard cue.
   This is (0,4,0) and matches the focus ring every other control already uses. */
.gz-formwrap .ff-default .ff_btn_style:focus-visible {
  outline: 2px solid var(--gz-brand-deep);
  outline-offset: 3px;
}
/* The newsletter form sits on the tint band; keep the ring readable there. */
.gz-band-tint .gz-formwrap .ff-default .ff_btn_style:focus-visible {
  outline-color: var(--gz-brand);
}

/* FluentForm's own padding lands the submit button at 42px — 2px under the tap
   minimum, on the newsletter form that appears on every page. (0,3,0) over the
   plugin's (0,2,0). */
.gz-formwrap .ff-default .ff_btn_style {
  min-height: 44px;
}

/* Kadence renders the mobile menu toggle at 36.8x31.2. It is the only
   navigation affordance on a phone and it is under the 44px minimum. */
button.menu-toggle-open,
button.menu-toggle-close {
  min-width: 44px;
  min-height: 44px;
}

/* The hero loop pause control was removed 2026-07-29 at Travis's call — it read
   as clutter above the fold. See DESIGN.md "Motion policy" for the accessibility
   position that decision accepts, and for the one-shot alternative if it needs
   revisiting. Rules deliberately deleted rather than left dead: unused CSS on
   this project has already caused one wasted debugging pass. */