/* ============================================================
   Boka — Korean Fried Chicken
   Design system: phone-width centered column on any viewport.
   Reference pattern from thestampa.com (full-bleed sections,
   narrow inner container), adapted for a restaurant.
   ============================================================ */

/* -------------------- TOKENS -------------------- */
:root {
  /* Page palette — Hermès-orange page with brown card accents.
     Section separation is by hairline rules, not by color blocks.
     NOTE: --brown-deep was #3D2817 (dark brown) historically; now repurposed
     to the page color so every section flips in one place. The name is kept
     to avoid renaming dozens of usages. --brown-mid/-soft are still actually
     brown — they're used for raised cards/menus on the orange page to give
     visual separation. */
  --brown-deep: #FF6900;     /* primary site background (pure Hermès orange / Pantone 1505 C) */
  --brown-mid:  #4A3022;     /* nav background, raised cards on brown */
  --brown-soft: #5A3A28;     /* hover states */
  --hairline:   var(--brown-mid);  /* divider between sections — matches footer brown */

  /* Cream palette (alternating section bg) */
  --cream:   #FAF6EE;
  --cream-2: #F2EAD9;        /* slightly warmer for menu */
  --cream-3: #EFE4CE;        /* contrast inside cream sections */

  /* Brand-derived accents (from the chicken SVG) */
  --red:    #E9423E;         /* chicken comb */
  --red-d:  #C73329;         /* hover */
  --yellow: #F6DC02;         /* chicken beak */
  --seal-gold: #D4AF37;      /* notary-stamp gold for the footer seal */

  /* Hermès-orange page accent — pure Pantone 1505 C, no black mix */
  --terracotta:   #FF6900;   /* pure Hermès orange */
  --terracotta-d: #D95900;   /* ~15% darker than --terracotta for hover/active */

  /* Text */
  --ink:        #1F1612;     /* on cream */
  --ink-muted:  #6E5A4A;
  --paper:      #FAF6EE;     /* on brown */
  --paper-muted:#C9B8A5;

  /* Layout */
  --col-max: 520px;          /* desktop column — matches thestampa.com max-w-lg (512px). Mobile shrinks to viewport automatically. */
  --wide-max: 1024px;        /* nav + footer (matches thestampa.com max-w-5xl) */
  --col-pad: 24px;
  --section-pad: 88px;
  --section-pad-sm: 64px;

  /* Type */
  /* Apple-native typographic system — same approach as thestampa.com.
     `system-ui` resolves to SF Pro on iOS/macOS, Segoe UI on Windows, Roboto on Android.
     Display = SF Pro Display (optical for ≥20px); Body = SF Pro Text (optical for <20px). */
  --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, 'Segoe UI', Roboto, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, 'Segoe UI', Roboto, sans-serif;
  --font-script: 'Bradley Hand', 'Snell Roundhand', cursive;  /* Apple-native handwritten — ships with iOS/macOS */
  --font-polaroid: 'Bradley Hand', 'Snell Roundhand', cursive; /* default: no webfont download */
  --font-nunito: system-ui, -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;

  /* Motion */
  --t-fast: 160ms;
  --t-mid: 300ms;
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* Theme-bound colors — palette owns background, while data-theme="dark"
     switches the page/title text to white. Chickens, yellow bubble, and
     flavor effects stay anchored to literal brand colors. */
  --page-bg: var(--terracotta);
  --page-text: var(--ink);
  --page-text-muted: var(--ink-muted);
  --nav-bg: var(--terracotta);
  /* --btn-bg is kept as a solid for borders/fallback contexts; actual
     button backgrounds use --gold-grad below for the metallic treatment. */
  --btn-bg: var(--brown-mid);
  --btn-text: var(--terracotta);    /* "accent orange" — used for hover text,
                                       footer link hovers, etc. NOT used for
                                       text on gold buttons (that's --ink). */
  /* MARINE token — replaces the page bg in marine mode. Hermès Bleu Saint-Cyr
     family: deep slate, sophisticated, dim-restaurant matching. */
  --marine: #364F75;
  --palette-black: #0B0908;
  --palette-white: #FAF6EE;

  /* GOLD as TRIM only — solid antique gold for thin button borders, focus
     rings, accent hairlines. NEVER used as a fill/background. Treated like
     gold tooling on Hermès leather, not like a gold bar. */
  --gold:        #B8860B;       /* antique gold trim */
  --gold-hover:  #DAA520;       /* slightly brighter on hover */

  /* Theme-aware line color for SVG strokes + decorative borders. */
  --line: var(--ink);
  --stamp-border: var(--ink);
  --divider-soft: rgba(31, 22, 18, 0.22);
  --divider-strong: rgba(31, 22, 18, 0.72);
  --nav-control-bg: var(--ink);
  --nav-control-fg: var(--paper);
  --nav-control-option-hover: rgba(250, 246, 238, 0.10);
  --nav-control-option-active: rgba(250, 246, 238, 0.12);
  --nav-control-divider: rgba(250, 246, 238, 0.18);
  --nav-control-swatch-border: rgba(250, 246, 238, 0.58);
  --nav-control-focus: var(--gold-hover);
}
/* DARK mode — controls text + non-art line color only. Chicken artwork stays
   on fixed brand colors below. */
[data-theme="dark"] {
  --page-text: var(--paper);
  --page-text-muted: var(--paper-muted);
  --line: var(--paper);
  --stamp-border: var(--paper);
  --divider-soft: rgba(250, 246, 238, 0.28);
  --divider-strong: rgba(250, 246, 238, 0.72);
  --nav-control-bg: var(--paper);
  --nav-control-fg: var(--ink);
  --nav-control-option-hover: rgba(31, 22, 18, 0.08);
  --nav-control-option-active: rgba(31, 22, 18, 0.11);
  --nav-control-divider: rgba(31, 22, 18, 0.16);
  --nav-control-swatch-border: rgba(31, 22, 18, 0.36);
}
/* Palette swatches set the page/nav background. JS keeps text tone separate
   and prevents white-on-white / dark-on-black combinations. */
[data-bg="marine"] {
  --page-bg: var(--marine);
  --nav-bg: var(--marine);
}
[data-bg="black"] {
  --page-bg: var(--palette-black);
  --nav-bg: var(--palette-black);
}
[data-bg="white"] {
  --page-bg: var(--palette-white);
  --nav-bg: var(--palette-white);
}
/* Chicken artwork is fixed brand art. Only title/wordmark paths should inherit
   theme color; chicken bodies, pupils, beaks, combs, and outlines stay literal. */
#order-chicken,
#hint-chicken,
#wuz-chicken,
.flavor-buddy__chicken,
.chicken-car__svg,
.photobomb__frame svg,
.wuzhere__chicken-peek svg {
  color: var(--ink);
}
/* Dark-mode text overrides — flip every element that hard-codes `var(--ink)`
   to use `var(--paper)` so headlines, menu rows, and footer indices read
   white on orange. Cream form bodies (catering, share) stay light because
   their cream bg keeps their black text legible regardless of theme. */
[data-theme="dark"] .display,
[data-theme="dark"] .display-sub,
[data-theme="dark"] .lede,
[data-theme="dark"] .ayce-stage__subhead,
[data-theme="dark"] .menu-cat__head,
[data-theme="dark"] .menu-item__name,
[data-theme="dark"] .menu-item__price,
[data-theme="dark"] .menu-cat__note,
[data-theme="dark"] .footer-index__heading,
[data-theme="dark"] .footer-index__line,
[data-theme="dark"] .footer-index__list a,
[data-theme="dark"] .visit__info dt,
[data-theme="dark"] .visit__info dd,
[data-theme="dark"] .flavor-panel strong,
[data-theme="dark"] .flavor-pill {
  color: var(--paper);
}
/* Menu dividers + flavor pill borders follow the active text tone. */
[data-theme="dark"] .menu-cat,
[data-theme="dark"] .menu-cat:last-child {
  border-color: var(--line);
}
[data-theme="dark"] .menu-item {
  border-color: rgba(255, 255, 255, 0.18);
}

/* -------------------- RESET -------------------- */
*, *::before, *::after { box-sizing: border-box; }
/* Kill horizontal page pan on mobile while preserving pinch-zoom and full-bleed
   sections (e.g. polaroid carousel, hero, footer). `overflow-x: clip` is the
   modern equivalent of `hidden` that doesn't establish a scroll container, so
   it doesn't break `position: sticky`. We declare `hidden` first as a fallback
   for older browsers that don't support `clip`. Reference: thestampa.com. */
html, body { overflow-x: hidden; overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--page-text);
  background: var(--page-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background 380ms ease-out, color 380ms ease-out;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
button, a { color: inherit; }
a { text-decoration: none; }
ul { list-style: none; padding: 0; margin: 0; }
table { border-collapse: collapse; }
address { font-style: normal; }

/* -------------------- LAYOUT PRIMITIVES -------------------- */
.container {
  width: 100%;
  max-width: var(--col-max);
  margin: 0 auto;
  padding: 0 var(--col-pad);
  text-align: center;     /* Stampa-style — all body content centered */
}

.section {
  padding: var(--section-pad) 0;
  position: relative;
  scroll-margin-top: 72px;
  background: var(--page-bg);
  color: var(--page-text);
  transition: background 380ms ease-out, color 380ms ease-out;
}
/* Legacy color-variant classes are now no-ops (kept so HTML doesn't change) */
.section--hero, .section--brown,
.section--cream, .section--menu {
  background: var(--page-bg);
  color: var(--page-text);
}

/* -------------------- TYPOGRAPHY -------------------- */
/* Universal "single-word title" treatment — Nunito wordmark, lowercase, ink.
   Mirrors the now-serving "food" / cover boka logo proportions across the
   whole site. Cover (SVG logo) opts out via .cover__title rules below. */
.display {
  font-family: var(--font-nunito);
  font-size: clamp(4.2rem, 14vw, 7.7rem);   /* wordmark scale — matches the AYCE treatment */
  font-weight: 300;                          /* lighter — matches the boka logo's thin stroke */
  line-height: 1;
  letter-spacing: 0.4em;                     /* wide spread to roughly match the boka logo width */
  margin: 0 0 12px;
  text-transform: none;                      /* lowercase as requested */
  color: var(--ink);
}
.display span {
  display: block;
}

/* Hero/now-serving sections inherit the global .display + .display-sub
   treatment (single-word lowercase Nunito wordmark, Kalam handwritten subhead).
   No section-specific overrides needed for headline typography. */

/* Hero lede styled like the cover address line — small uppercase tracked SF Pro */
.section--hero .lede {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.7;
  max-width: none;
  line-height: 1.6;
  color: var(--ink);
}
/* Now-serving lede is a longer descriptive paragraph — drop the address-line
   uppercase styling and use a readable body voice. */
.section--now-serving .lede {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.5;
  color: var(--ink);
  opacity: 1;
  max-width: none;
  margin-bottom: 24px;
}
/* Bump the cover address line to match this lede size for visual consistency */
.cover__locator {
  font-size: 1rem;
}

/* -------------------- COVER (magazine-style landing) --------------------
   First section above the NOW SERVING hero. The single word "BOKA" is the
   primary visual anchor — extra-large wordmark like a magazine cover.
   Locator line below the photo is a small uppercase address tag. */
.section--cover {
  padding-top: calc(var(--section-pad) + 104px);   /* extra breathing room above the wordmark after the nav */
}
.section--cover .cover__stamp {
  --cover-stamp-size: clamp(86px, 20vw, 112px);
  position: absolute;
  left: 50%;
  bottom: calc(var(--cover-stamp-size) * -0.58);
  z-index: 3;
  width: var(--cover-stamp-size);
  height: var(--cover-stamp-size);
  margin: 0;
  color: var(--ink);
  transform: translateX(-50%) rotate(15deg);
  filter:
    drop-shadow(0 12px 16px rgba(31, 22, 18, 0.24))
    drop-shadow(0 2px 0 rgba(250, 246, 238, 0.22));
  transition: none;
}
/* Gold cover stamp with dark ink, separate from the darker footer seal. */
.section--cover .cover__stamp .hero__seal-serrated {
  fill: var(--seal-gold);
  stroke: rgba(31, 22, 18, 0.55);
  stroke-width: 2;
}
.section--cover .cover__stamp .hero__seal-paper {
  fill: var(--seal-gold);
  stroke: none;
}
.section--cover .cover__stamp .hero__seal-ring,
.section--cover .cover__stamp .hero__seal-rule {
  stroke: var(--ink);
}
.section--cover .cover__stamp .hero__seal-arc,
.section--cover .cover__stamp .hero__seal-small,
.section--cover .cover__stamp .hero__seal-year {
  fill: var(--ink);
}
.section--cover .cover__stamp .hero__seal-year {
  display: none;
}
.section--cover .cover__stamp:hover {
  transform: translateX(-50%) rotate(15deg);
  filter:
    drop-shadow(0 12px 16px rgba(31, 22, 18, 0.24))
    drop-shadow(0 2px 0 rgba(250, 246, 238, 0.22));
}
/* Cover hero text follows the global theme — dark in light theme (matching
   the dark boka logo + stamp body), white in dark theme (matching the white
   logo). The gold seal stamp keeps its own dark ink because it's a fixed
   brand element with embossed-text styling. */
.section--cover .display-sub,
.section--cover .cover__locator {
  color: var(--page-text);
  opacity: 1;
}
/* Remove the hairline divider between cover and hero — the cover should breathe
   directly into the next section without a visible line */
.section--cover + .section { border-top: 0; }
.section--cover .container {
  text-align: center;
}
.section--cover .cover__title {
  text-align: center;
  margin: 0 0 10px;
  line-height: 1;
}
:root[data-font="decorative"] {
  --font-polaroid: 'Kalam', 'Bradley Hand', cursive;
  --font-nunito: 'Nunito', system-ui, -apple-system, sans-serif;
}
.cover__logo {
  width: 100%;
  max-width: clamp(220px, 50vw, 420px);   /* scales with viewport, capped at column-friendly size */
  height: auto;
  display: inline-block;
}
/* AYCE wordmark image — mirrors the cover logo treatment but for the AYCE.svg */
.ayce-stage__title {
  text-align: center;
  margin: 0 0 10px;
  line-height: 1;
}
.ayce-stage__logo {
  width: 100%;
  max-width: clamp(220px, 50vw, 420px);
  height: auto;
  display: inline-block;
}

/* Section title SVGs — wordmark headings for each section (AYCE, menu, Cater,
   Follow us, Share, Order, Visit). All inline so CSS can reach them; letter
   paths use fill="currentColor" so they inherit --page-text and flip with
   the global theme toggle. Decorative chicken parts (red comb, yellow beak,
   white "A"-shape interior, white eye whites, black pupils) keep literal
   fills so they stay on-brand in both themes. */
.section-title-svg__wrap {
  text-align: center;
  margin: 0 0 10px;     /* mirrors .ayce-stage__title — gives the tagline some breathing room */
  line-height: 1;
}
.section-title-svg {
  width: 100%;
  max-width: clamp(280px, 60vw, 560px);
  height: auto;
  display: inline-block;
  /* SVG path eyes use CSS transform for tracking; keep the layout stable */
  overflow: visible;
}

/* Tiny section loader: front-facing Boka chicken, with pupils ticking like
   clock hands in opposite directions. Pure inline SVG + CSS: no asset fetch. */
.chicken-loader {
  --loader-size: 44px;
  display: grid;
  justify-items: center;
  gap: 4px;
  color: var(--page-text);
  pointer-events: none;
  transition: opacity 180ms ease-out, visibility 180ms ease-out;
}
.chicken-loader__svg {
  width: var(--loader-size);
  height: auto;
  display: block;
  overflow: visible;
}
.chicken-loader__eye {
  transform-box: view-box;
  will-change: transform;
}
.chicken-loader__eye--left {
  transform-origin: 321.76px 343.44px;
  animation: chicken-loader-eye-cw 1.2s steps(12, end) infinite;
}
.chicken-loader__eye--right {
  transform-origin: 478.72px 343.44px;
  animation: chicken-loader-eye-ccw 1.2s steps(12, end) infinite;
}
.chicken-loader__label {
  font-family: var(--font-body);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  color: currentColor;
  opacity: 0.72;
}
@keyframes chicken-loader-eye-cw {
  from { transform: rotate(0deg) translateY(-25px); }
  to   { transform: rotate(360deg) translateY(-25px); }
}
@keyframes chicken-loader-eye-ccw {
  from { transform: rotate(0deg) translateY(25px); }
  to   { transform: rotate(-360deg) translateY(25px); }
}
@media (prefers-reduced-motion: reduce) {
  .chicken-loader__eye--left,
  .chicken-loader__eye--right {
    animation: none;
  }
  .chicken-loader__eye--left { transform: translateY(-25px); }
  .chicken-loader__eye--right { transform: translateY(25px); }
}

/* Cover subhead uses the polaroid script (Kalam) — same handwritten voice
   as the polaroid captions, more brand-personal than the SF Pro semibold default. */
.section--cover .display-sub {
  font-family: var(--font-polaroid);
  font-weight: 550;                        /* between Kalam's 400 and 700 — browser may round to nearest available */
  text-transform: none;                    /* script fonts don't read uppercase */
  letter-spacing: 0;
  font-size: clamp(1.6rem, 4vw, 2.25rem);
}
.cover__photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 32px 0 72px;
  width: 100%;
  max-width: 100%;
  position: relative;
  isolation: isolate;
}
.cover__photos::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 18px;
  box-shadow:
    0 1px 2px rgba(31, 22, 18, 0.12),
    0 14px 34px -18px rgba(31, 22, 18, 0.48);
  pointer-events: none;
  z-index: 0;
}
.cover__photos img {
  width: 100%;
  aspect-ratio: 4 / 5;             /* portrait — feels editorial side-by-side */
  object-fit: cover;
  border-radius: 16px;
  box-shadow:
    0 1px 2px rgba(31, 22, 18, 0.14),
    0 10px 24px -10px rgba(31, 22, 18, 0.36);
  display: block;
  position: relative;
  z-index: 1;
}
.cover__locator {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: 0;
}
.cover__hours {
  margin-top: 0;
  margin-bottom: 0;
}

/* -------------------- BUTTONS --------------------
   Rounded-rectangle pill (~14px radius) with soft, layered drop shadow.
   Inspired by thestampa.com's "Download" button: softer, more substantial
   feel than a sharp pill. Three variants reuse the shape; only colors
   and shadow tone change. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 28px;
  border-radius: 14px;
  border: 1px solid rgba(31, 22, 18, 0.06);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: 0.005em;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  background: #fff;
  color: var(--ink);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.06),
    0 8px 24px -10px rgba(0, 0, 0, 0.20);
  transition: transform var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
  margin: 0 8px 12px 0;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.08),
    0 14px 32px -10px rgba(0, 0, 0, 0.24);
}
.btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.10);
}

/* Primary CTA — Send Photos / Catering submit. Ink with gold trim. */
.btn--accent {
  background: var(--ink);
  color: var(--paper);
  border: 1.5px solid var(--gold);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.22),
    0 8px 18px -8px rgba(0, 0, 0, 0.40);
}
.btn--accent:hover {
  border-color: var(--gold-hover);
  filter: brightness(1.08);
}

/* Dark — for cream sections where white-on-cream wouldn't pop */
.btn--ink {
  background: var(--ink);
  color: var(--cream);
  border-color: transparent;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.22),
    0 10px 26px -8px rgba(0, 0, 0, 0.40);
}
.btn--ink:hover { background: #000; }

/* Ghost — transparent w/ border, adapts to ink on cream / paper on dark */
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border: 2px solid currentColor;
  box-shadow: none;
}
.btn--ghost:hover {
  background: var(--ink);
  color: var(--cream);
  transform: translateY(-1px);
}
.section--hero .btn--ghost,
.section--brown .btn--ghost,
.visit .btn--ghost {
  color: var(--paper);
}
.section--hero .btn--ghost:hover,
.section--brown .btn--ghost:hover,
.visit .btn--ghost:hover {
  background: var(--paper);
  color: var(--ink);
}

/* -------------------- NAV -------------------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: var(--nav-bg);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  transition: background 380ms ease-out;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);   /* thin white separator */
}
[data-bg="white"] .nav {
  border-bottom-color: rgba(31, 22, 18, 0.18);
}
.nav__inner {
  width: 100%;
  max-width: var(--wide-max);
  margin: 0 auto;
  padding: 12px var(--col-pad);
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;   /* palette | logo | order | language */
  align-items: end;
  gap: 14px;
}
.nav__inner .nav__palette { justify-self: start; }
.nav__inner .nav__logo-stack { justify-self: start; }
.nav__inner .nav__order-wrap,
.nav__inner .nav__lang { justify-self: end; }
.nav__logo-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

/* (No CSS color override needed for SVGs — chicken parts have hardcoded
   #231f20 strokes/fills in markup and stay dark in both themes; section
   title letters use currentColor and inherit theme-aware color from their
   parent section's natural cascade. This is the original Codex pattern.) */
.nav__logo {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.nav__logo img {
  height: 32px;
  width: auto;
  display: block;
}
.nav__palette,
.nav__lang {
  position: relative;
  height: 32px;
  border-radius: 10px;
  background: var(--nav-control-bg);
  border: 1.5px solid var(--gold);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.12),
    0 6px 16px -6px rgba(0, 0, 0, 0.20);
}
.nav__palette-trigger,
.nav__lang-trigger {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background: transparent;
  border: 0;
  color: var(--nav-control-fg);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.nav__palette-trigger {
  gap: 5px;
  width: 44px;
  padding: 0 7px;
}
.nav__lang-trigger {
  gap: 7px;
  width: 58px;
  padding: 0 9px;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.nav__palette-current,
.nav__palette-swatch {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  border: 1px solid var(--nav-control-swatch-border);
  border-radius: 4px;
  background: var(--swatch);
  box-shadow: inset 0 0 0 1px rgba(31, 22, 18, 0.16);
}
.nav__palette-current[data-palette="orange"],
.nav__palette-option--orange { --swatch: var(--terracotta); }
.nav__palette-current[data-palette="marine"],
.nav__palette-option--marine { --swatch: var(--marine); }
.nav__palette-current[data-palette="black"],
.nav__palette-option--black { --swatch: var(--palette-black); }
.nav__palette-current[data-palette="white"],
.nav__palette-option--white { --swatch: var(--palette-white); }
.nav__palette-trigger:hover,
.nav__lang-trigger:hover {
  filter: brightness(1.06);
}
.nav__palette-trigger:focus-visible,
.nav__palette-option:focus-visible,
.nav__text-option:focus-visible,
.nav__font-option:focus-visible,
.nav__lang-trigger:focus-visible,
.nav__lang-btn:focus-visible {
  outline: 2px solid var(--nav-control-focus);
  outline-offset: 2px;
}
.nav__lang-current {
  line-height: 1;
}
.nav__palette-caret,
.nav__lang-caret {
  width: 11px;
  height: 11px;
  flex: 0 0 auto;
  transition: transform var(--t-mid) var(--ease);
}
.nav__palette-trigger[aria-expanded="true"] .nav__palette-caret,
.nav__lang-trigger[aria-expanded="true"] .nav__lang-caret {
  transform: rotate(180deg);
}
.nav__palette-menu,
.nav__lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  margin: 0;
  padding: 5px;
  background: var(--nav-control-bg);
  border: 1px solid var(--gold);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.38);
  z-index: 110;
  animation: nav-menu-in 180ms cubic-bezier(.2, .7, .2, 1);
}
.nav__palette-menu {
  left: 0;
  width: 44px;
  display: grid;
  gap: 4px;
}
.nav__lang-menu {
  right: 0;
  min-width: 58px;
}
.nav__palette-menu[hidden],
.nav__lang-menu[hidden] {
  display: none;
}
.nav__palette-option,
.nav__text-option,
.nav__font-option {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 30px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 7px;
  color: var(--nav-control-fg);
  cursor: pointer;
  opacity: 0.72;
  transition: opacity var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.nav__palette-option:hover,
.nav__text-option:hover,
.nav__font-option:hover {
  opacity: 1;
  background: var(--nav-control-option-hover);
}
.nav__palette-option.is-active,
.nav__palette-option[aria-pressed="true"],
.nav__text-option.is-active,
.nav__text-option[aria-pressed="true"],
.nav__font-option.is-active,
.nav__font-option[aria-pressed="true"] {
  opacity: 1;
  background: var(--nav-control-option-active);
}
.nav__palette-option.is-active .nav__palette-swatch,
.nav__palette-option[aria-pressed="true"] .nav__palette-swatch {
  border-color: var(--gold-hover);
  box-shadow:
    0 0 0 2px var(--nav-control-fg),
    0 0 0 4px rgba(184, 134, 11, 0.82),
    inset 0 0 0 1px rgba(31, 22, 18, 0.22);
}
.nav__palette-divider {
  display: block;
  width: 100%;
  height: 1px;
  margin: 2px 0;
  background: var(--nav-control-divider);
}
.nav__text-chip {
  display: grid;
  place-items: center;
  width: 22px;
  height: 20px;
  border: 1px solid var(--nav-control-swatch-border);
  border-radius: 5px;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
}
.nav__font-chip {
  display: grid;
  place-items: center;
  width: 24px;
  height: 20px;
  border: 1px solid var(--nav-control-swatch-border);
  border-radius: 5px;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Bradley Hand', 'Snell Roundhand', cursive;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
}
:root[data-font="decorative"] .nav__font-chip {
  font-family: 'Kalam', 'Bradley Hand', cursive;
}
.nav__text-option--dark .nav__text-chip {
  background: var(--ink);
  color: var(--paper);
}
.nav__text-option--white .nav__text-chip {
  background: var(--paper);
  color: var(--ink);
}
.nav__text-option.is-active .nav__text-chip,
.nav__text-option[aria-pressed="true"] .nav__text-chip {
  border-color: var(--gold-hover);
  box-shadow: 0 0 0 2px rgba(184, 134, 11, 0.78);
}
.nav__font-option.is-active .nav__font-chip,
.nav__font-option[aria-pressed="true"] .nav__font-chip {
  border-color: var(--gold-hover);
  box-shadow: 0 0 0 2px rgba(184, 134, 11, 0.78);
}
.nav__text-option:disabled,
.nav__text-option[aria-disabled="true"] {
  opacity: 0.26;
  cursor: not-allowed;
}

/* ============================================================
   FLUORESCENT LOGO GLOW — boka-logo.svg ships with dark fills, so
   it shows naturally dark in the default (light) theme, matching the
   black body copy. In dark theme the wordmark flips to white via an
   invert filter and pulses with a soft brightness/drop-shadow glow,
   like a fluorescent sign tube. Cover logo gets the static flip too;
   nav and footer additionally pulse.
   ============================================================ */
[data-theme="dark"] .cover__logo {
  filter: invert(1) brightness(2);
}
[data-theme="dark"] .nav__logo img {
  animation: boka-fluoro-bright 3.4s ease-in-out infinite;
}
[data-theme="dark"] .footer-hero__brand img {
  animation: boka-fluoro 3.4s ease-in-out infinite;
}
@keyframes boka-fluoro {
  0%, 100% {
    filter: invert(1) brightness(2) drop-shadow(0 0 6px rgba(246, 220, 2, 0.4));
  }
  50% {
    filter: invert(1) brightness(2.15) drop-shadow(0 0 16px rgba(246, 220, 2, 0.65));
  }
}
@keyframes boka-fluoro-bright {
  0%, 100% {
    filter: invert(1) brightness(2.1)
            drop-shadow(0 0 8px rgba(255, 248, 200, 0.6))
            drop-shadow(0 0 16px rgba(255, 220, 100, 0.35));
  }
  50% {
    filter: invert(1) brightness(2.35)
            drop-shadow(0 0 14px rgba(255, 248, 200, 0.85))
            drop-shadow(0 0 28px rgba(255, 220, 100, 0.55));
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-theme="dark"] .nav__logo img,
  [data-theme="dark"] .footer-hero__brand img {
    animation: none;
    filter: invert(1) brightness(2);
  }
}

/* ============================================================
   FLUORO GLOW — extended to section-title SVGs and Kalam subheaders.
   Light theme: soft yellow drop-shadow pulse only (no invert — titles
   keep their dark fills on hot orange so color stays correct).
   Dark theme: SVG titles get the full boka-fluoro-bright treatment
   (invert + brightness + drop-shadow) since their fills are dark and
   need the color flip; Kalam subheaders ride the page-text color so
   they only need the drop-shadow pulse.
   Period is 4s (vs the nav logo's 3.4s) so the page doesn't pulse in
   lockstep with the wordmark in the corner.

   IMPORTANT: filter is applied to the H2 *wrapper* (.ayce-stage__title,
   .section-title-svg__wrap) for inline SVG titles, not the <svg> itself.
   Applying CSS filter directly to an inline <svg> breaks viewBox
   clipping in some browsers (child elements render outside the cropped
   viewBox window at the wrong scale). The .cover__logo is an <img>, so
   filter works cleanly on it directly. */
.cover__logo,
.ayce-stage__title,
.section-title-svg__wrap {
  animation: title-glow 4s ease-in-out infinite;
}
.display-sub,
.ayce-stage__subhead,
.footer-hero__tagline {
  animation: text-glow 4s ease-in-out infinite;
}
/* Only the cover wordmark gets the dark-theme invert+brightness treatment —
   it's the boka logotype with dark fills that need flipping to white in
   dark mode. The section-title chickens (AYCE, menu, order, etc.) have
   literal color fills (red comb, yellow beak) that should NEVER invert,
   so they fall through to the light-theme `title-glow` (drop-shadow only)
   in dark mode too. */
[data-theme="dark"] .cover__logo {
  animation: title-glow-dark 4s ease-in-out infinite;
}
[data-bg="black"][data-theme="dark"] #share .section-title-svg__wrap {
  animation: share-title-glow-dark 4s ease-in-out infinite;
}
@keyframes title-glow {
  0%, 100% {
    filter: drop-shadow(0 0 4px rgba(246, 220, 2, 0.30));
  }
  50% {
    filter: drop-shadow(0 0 12px rgba(246, 220, 2, 0.55));
  }
}
@keyframes title-glow-dark {
  0%, 100% {
    filter: invert(1) brightness(2.05)
            drop-shadow(0 0 6px rgba(255, 248, 200, 0.5))
            drop-shadow(0 0 14px rgba(255, 220, 100, 0.30));
  }
  50% {
    filter: invert(1) brightness(2.25)
            drop-shadow(0 0 12px rgba(255, 248, 200, 0.75))
            drop-shadow(0 0 24px rgba(255, 220, 100, 0.50));
  }
}
@keyframes share-title-glow-dark {
  0%, 100% {
    filter:
      drop-shadow(0 0 7px rgba(255, 248, 200, 0.58))
      drop-shadow(0 0 18px rgba(255, 220, 100, 0.34));
  }
  50% {
    filter:
      drop-shadow(0 0 12px rgba(255, 248, 200, 0.78))
      drop-shadow(0 0 28px rgba(255, 220, 100, 0.48));
  }
}
@keyframes text-glow {
  0%, 100% {
    text-shadow: 0 0 6px rgba(246, 220, 2, 0.25);
  }
  50% {
    text-shadow: 0 0 14px rgba(246, 220, 2, 0.55);
  }
}
@media (prefers-reduced-motion: reduce) {
  .cover__logo,
  .ayce-stage__title,
  .section-title-svg__wrap,
  .display-sub,
  .ayce-stage__subhead,
  .footer-hero__tagline {
    animation: none;
  }
  .cover__logo,
  .ayce-stage__title,
  .section-title-svg__wrap {
    filter: drop-shadow(0 0 8px rgba(246, 220, 2, 0.40));
  }
  [data-theme="dark"] .cover__logo {
    filter: invert(1) brightness(2.1)
            drop-shadow(0 0 10px rgba(255, 248, 200, 0.6));
  }
  [data-bg="black"][data-theme="dark"] #share .section-title-svg__wrap {
    filter:
      drop-shadow(0 0 10px rgba(255, 248, 200, 0.62))
      drop-shadow(0 0 22px rgba(255, 220, 100, 0.36));
  }
  .display-sub,
  .ayce-stage__subhead,
  .footer-hero__tagline {
    text-shadow: 0 0 10px rgba(246, 220, 2, 0.40);
  }
}

/* ============================================================
   LIFTED-CARD DROP SHADOW — same elevation as .nav__order so the
   visual language of "this thing rises off the page" is consistent
   across the site: language pill, IG button, map badges, form cards.
   ============================================================ */
.map-link,
.map-link__badge,
.hero__phone-ig,
.nav__palette,
.nav__lang,
.catering-form-wrap,
.share-form-wrap {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.12),
    0 6px 16px -6px rgba(0, 0, 0, 0.20);
}
.map-link__badge:hover,
.hero__phone-ig:hover {
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.14),
    0 10px 22px -8px rgba(0, 0, 0, 0.24);
}

/* Order button — follows the selected text panel so white-text pages get a
   lighter shell instead of a heavy black block. The label is forced to one
   line because CJK text can otherwise wrap between every character on narrow
   iPhone widths. */
.nav__order-wrap {
  position: relative;
  display: flex;
  align-items: flex-end;
}
.nav__order {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  height: 32px;             /* match .nav__logo img height */
  background: var(--nav-control-bg);
  color: var(--nav-control-fg);
  padding: 0 18px 0 14px;
  border: 1.5px solid var(--gold);
  border-radius: 10px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.22),
    0 6px 16px -6px rgba(0, 0, 0, 0.30);
  transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), filter var(--t-fast) var(--ease);
}
.nav__order:hover {
  transform: translateY(-1px);
  border-color: var(--gold-hover);
}
.nav__order:active { transform: translateY(0); }
.nav__order[aria-expanded="true"] { border-color: var(--gold-hover); }
.nav__order-text {
  display: inline-block;
  flex: 0 0 auto;
  min-width: max-content;
  white-space: nowrap;
  word-break: keep-all;
  line-break: strict;
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  line-height: 1;
}
.nav__chicken {
  display: inline-grid;
  place-items: center;
  width: 40px;              /* taller chicken — nearly fills the 32px pill height */
  height: auto;
  background: transparent;
  flex-shrink: 0;
}
.nav__chicken svg { width: 40px; height: auto; }
.nav__caret {
  width: 11px;
  height: 11px;
  display: block;
  transition: transform var(--t-mid) var(--ease);
  margin-left: 2px;
}
.nav__order[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }

/* Dropdown menu — appears below the Order button */
.nav__menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 200px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--nav-control-bg);
  border: 1px solid var(--gold);
  border-radius: 14px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
  z-index: 100;
  animation: nav-menu-in 180ms cubic-bezier(.2, .7, .2, 1);
}
.nav__menu[hidden] { display: none; }
@keyframes nav-menu-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.nav__menu li { margin: 0; }
.nav__menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  color: var(--nav-control-fg);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.nav__menu a:hover { background: var(--nav-control-option-hover); color: var(--btn-text); filter: brightness(1.1); }
/* Brand icons rendered via CSS mask-image so they inherit color from the link
   (white by default, yellow on hover) without us editing each SVG. The SVGs
   themselves come from SimpleIcons via Iconify, with fill="currentColor" baked
   in (irrelevant under mask — only the alpha channel of the mask matters).
   Seamless has no SimpleIcons entry, so it uses a Material Symbols
   "restaurant" glyph as a fallback. */
.nav__menu-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
}
.nav__menu-icon--grubhub  { -webkit-mask-image: url('assets/icons/grubhub.svg');  mask-image: url('assets/icons/grubhub.svg');  }
.nav__menu-icon--doordash { -webkit-mask-image: url('assets/icons/doordash.svg'); mask-image: url('assets/icons/doordash.svg'); }
.nav__menu-icon--ubereats { -webkit-mask-image: url('assets/icons/ubereats.svg'); mask-image: url('assets/icons/ubereats.svg'); }
.nav__menu-icon--seamless { -webkit-mask-image: url('assets/icons/seamless.svg'); mask-image: url('assets/icons/seamless.svg'); }
.nav__menu-arrow {
  font-family: var(--font-display);
  color: var(--btn-text);
  margin-left: auto;
}
.nav__lang-btn {
  appearance: none;
  display: block;
  width: 100%;
  background: transparent;
  border: 0;
  color: var(--nav-control-fg);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  padding: 0 9px;
  height: 28px;
  line-height: 1;
  cursor: pointer;
  border-radius: 6px;
  opacity: 0.72;
  text-align: center;
  transition: opacity var(--t-fast) var(--ease), color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.nav__lang-btn:hover {
  opacity: 1;
  background: var(--nav-control-option-hover);
}
.nav__lang-btn.is-active,
.nav__lang-btn[aria-pressed="true"] {
  opacity: 1;
  color: var(--gold);
  font-weight: 800;
  background: var(--nav-control-option-active);
}
@media (max-width: 480px) {
  .nav__inner {
    padding: 8px;
    gap: 6px;
  }
  .nav__logo img {
    height: 22px;
  }
  .nav__palette,
  .nav__lang,
  .nav__order {
    height: 28px;
  }
  .nav__palette-trigger {
    width: 34px;
    padding: 0 5px;
    gap: 3px;
  }
  .nav__palette-current,
  .nav__palette-swatch {
    width: 13px;
    height: 13px;
    border-radius: 3px;
  }
  .nav__palette-option.is-active .nav__palette-swatch,
  .nav__palette-option[aria-pressed="true"] .nav__palette-swatch {
    box-shadow:
      0 0 0 1.5px var(--nav-control-fg),
      0 0 0 3px rgba(184, 134, 11, 0.82),
      inset 0 0 0 1px rgba(31, 22, 18, 0.22);
  }
  .nav__palette-caret {
    width: 8px;
    height: 8px;
  }
  .nav__palette-menu {
    width: 38px;
    padding: 4px;
    gap: 3px;
  }
  .nav__palette-option,
  .nav__text-option {
    height: 24px;
    border-radius: 5px;
  }
  .nav__text-chip {
    width: 18px;
    height: 17px;
    border-radius: 4px;
    font-size: 0.62rem;
  }
  .nav__lang-trigger {
    width: 38px;
    padding: 0 5px;
    gap: 3px;
    font-size: 0.7rem;
  }
  .nav__lang-caret {
    width: 8px;
    height: 8px;
  }
  .nav__lang-menu {
    min-width: 50px;
  }
  .nav__order {
    gap: 4px;
    padding: 0 7px 0 4px;
    font-size: 0.72rem;
    letter-spacing: 0.01em;
  }
  .nav__chicken {
    width: 28px;
  }
  .nav__chicken svg {
    width: 28px;
  }
  .nav__caret {
    width: 8px;
    height: 8px;
    margin-left: 0;
  }
}

/* push body so content isn't under the fixed nav */
main > .section:first-of-type { padding-top: calc(var(--section-pad) + 104px); }

/* Global headline color — ink everywhere now (single-word lowercase Nunito
   wordmark treatment). --display-fill kept as a variable so legacy refs
   continue to resolve, but always points at ink. */
.display {
  color: var(--ink);
  --display-fill: var(--ink);
}
[data-theme="dark"] .display {
  --display-fill: var(--ink);
}
.display span:first-child,
.display span:nth-child(2) {
  color: var(--ink);
  -webkit-text-stroke: 0;
          text-stroke: 0;
}

/* Subhead beneath the big headline — Kalam handwritten, mirrors the cover's
   "AYCE and more!" tagline voice. Universal across all sections. */
.display-sub {
  font-family: var(--font-polaroid);          /* Kalam — handwritten */
  font-size: clamp(1.6rem, 4vw, 2.25rem);
  font-weight: 550;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  text-align: center;
  line-height: 1.2;
  margin: 0 0 14px;
}
/* Cheeky taglines under each headline — script font for the friendly voice. */
.lede {
  font-family: var(--font-body);          /* SF Pro — matches thestampa tagline style */
  font-weight: 400;
  font-size: 1rem;                         /* 16px — same as thestampa body */
  color: var(--paper);
  opacity: 0.92;
  line-height: 1.5;
  max-width: none;                         /* fill the column edge-to-edge */
  margin: 0 auto 24px;
  text-align: center;
}

/* Eyebrow line directly above the polaroid carousel — small, uppercase, muted */
.hero-kicker {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--btn-text);
  opacity: 0.85;
  margin: -8px 0 4px;
  text-align: center;
}

/* Notary-style Boka seal. Kept as real SVG/text so it stays crisp and avoids
   generated-image lettering artifacts. */
.hero__stamp {
  position: relative;
  display: grid;
  place-items: center;
  width: 156px;
  height: 156px;
  margin: 30px auto 0;
  padding: 0;
  border-radius: 50%;
  color: var(--paper);
  text-decoration: none;
  transform: rotate(30deg);
  transition: transform var(--t-mid) var(--ease), filter var(--t-fast) var(--ease);
  cursor: pointer;
  filter: drop-shadow(0 10px 16px rgba(31, 22, 18, 0.16));
}
.hero__stamp::before {
  content: none;
}
.hero__stamp:hover {
  transform: rotate(26deg) scale(1.035);
  filter: drop-shadow(0 14px 22px rgba(31, 22, 18, 0.2));
}
.hero__seal {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.hero__seal-paper {
  fill: rgba(255, 105, 0, 0.08);
  stroke: rgba(250, 246, 238, 0.34);
  stroke-width: 1;
}
.hero__seal-ink {
  opacity: 0.94;
}
.hero__seal-ring {
  fill: none;
  stroke: var(--seal-gold);
}
.hero__seal-ring--outer {
  stroke-width: 2.1;
}
.hero__seal-ring--dots {
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 0.1 6.1;
  opacity: 0.72;
}
.hero__seal-ring--inner {
  stroke-width: 1.6;
}
.hero__seal-arc {
  font-family: var(--font-display);
  font-size: 8.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  fill: var(--seal-gold);
}
/* (Top text uses the smaller 8.5px now too — no more crowding the inner ring.) */
.hero__seal-rule {
  stroke: var(--seal-gold);
  stroke-width: 1.55;
  opacity: 0.86;
}
.hero__seal-small {
  font-family: var(--font-body);
  font-size: 7.8px;
  font-weight: 800;
  letter-spacing: 0.18em;
  fill: var(--seal-gold);
  opacity: 0.9;
}
.hero__seal-year {
  font-family: var(--font-display);
  font-size: 24px;
  letter-spacing: 0.02em;
  fill: var(--seal-gold);
}
/* iPhone frame around the hero video — pure CSS shell, no PNG.
   Adapted from thestampa.com pattern (rounded shell + dark border + drop shadow). */
.hero__iphone {
  position: relative;
  margin: 36px auto 0;
  width: 100%;
  max-width: 280px;
  aspect-ratio: 9 / 19.5;        /* iPhone 14 Pro-ish */
  border-radius: 42px;
  border: 4px solid #0e0e0e;     /* slimmer bezel — less old-iPhone */
  background: #0e0e0e;
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.55),
              0 10px 20px rgba(0, 0, 0, 0.4),
              inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
[data-bg="black"][data-theme="dark"] #follow .hero__iphone {
  border-color: rgba(250, 246, 238, 0.32);
  box-shadow:
    0 0 0 1px rgba(250, 246, 238, 0.20),
    0 0 20px rgba(255, 248, 200, 0.34),
    0 0 52px rgba(255, 220, 100, 0.22),
    0 28px 70px rgba(0, 0, 0, 0.66),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.hero__iphone-screen {
  position: absolute;
  inset: 0;
  background: #000;
  border-radius: 38px;
  overflow: hidden;
}
/* Ambient backdrop video — same source, blurred + scaled + brightened.
   Acts as a soft "reflection" of the foreground video so the screen
   never looks like a flat iPhone bezel even when the video letterboxes. */
.hero__iphone-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(36px) brightness(1.15) saturate(1.5);
  transform: scale(1.4);
  pointer-events: none;
  z-index: 0;
}
/* Foreground video — full content visible, centered */
.hero__iphone-fg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  z-index: 1;
}
/* Dynamic island — black pill at the top center */
.hero__iphone-island {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 28%;
  max-width: 96px;
  min-width: 72px;
  height: 22px;
  background: #000;
  border-radius: 999px;
  z-index: 5;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
/* Mute toggle — sits INSIDE the screen, top-right corner like a video player overlay */
/* Phone overlay buttons — mute (bottom-left) and Instagram (bottom-right).
   Both use the same pill shape with backdrop blur so they read as part of
   the phone UI. The Instagram pill has the brand gradient as background
   so it pops against the dark video. */
.hero__mute,
.hero__phone-ig {
  position: absolute;
  bottom: 12px;
  z-index: 6;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
  text-decoration: none;
}
.hero__mute   { left:  12px; background: rgba(0, 0, 0, 0.5); }
.hero__phone-ig {
  right: 12px;
  /* Instagram brand gradient — recognizable + high-contrast on the video */
  background: radial-gradient(circle at 28% 105%, #fdc468 0%, #fa7e1e 18%, #d62976 42%, #962fbf 70%, #4f5bd5 100%);
}
.hero__mute:hover, .hero__phone-ig:hover { transform: scale(1.06); }
.hero__mute:hover   { background: rgba(0, 0, 0, 0.78); }
.hero__mute:active, .hero__phone-ig:active { transform: scale(0.94); }
.hero__mute-icon, .hero__phone-ig svg { width: 16px; height: 16px; display: block; }
/* Show muted icon by default; swap when video is unmuted */
.hero__mute .hero__mute-icon--on  { display: none; }
.hero__mute[aria-pressed="true"] .hero__mute-icon--off { display: none; }
.hero__mute[aria-pressed="true"] .hero__mute-icon--on  { display: block; }

/* -------------------- AYCE - cover-style feature -------------------- */
.section--ayce {
  background: var(--page-bg);     /* follows the selected palette swatch */
  color: var(--page-text);
  padding: clamp(78px, 10vw, 132px) 0 clamp(74px, 9vw, 120px);
  position: relative;
  overflow: hidden;
}

.ayce-stage {
  position: relative;
  z-index: 1;
}
.ayce-stage__head {
  text-align: center;
  margin-bottom: 30px;
}
.section--ayce .display {
  font-family: var(--font-polaroid);
  font-size: clamp(2.35rem, 7.5vw, 3.65rem);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.05;
  text-transform: none;
  color: var(--ink);
  margin-bottom: 10px;
}
.section--ayce .display span,
.section--ayce .display span:first-child,
.section--ayce .display span:nth-child(2) {
  color: var(--ink);
}
.ayce-stage__subhead {
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1.6vw, 1.05rem);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.5;
  text-transform: none;
  color: var(--ink);
  max-width: 38em;
  margin: 0 auto;
  margin: 0;
}
.ayce-stage__photos {
  --ayce-price-stamp-width: clamp(134px, 32vw, 182px);
  --ayce-price-stamp-height: clamp(82px, 18vw, 106px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: 100%;
  max-width: var(--col-max);
  margin: 0 auto clamp(78px, 17vw, 94px);
  position: relative;
  isolation: isolate;
}
.ayce-stage__photos::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 18px;
  box-shadow:
    0 1px 2px rgba(31, 22, 18, 0.12),
    0 14px 34px -18px rgba(31, 22, 18, 0.48);
  pointer-events: none;
  z-index: 0;
}
.ayce-stage__photos img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 16px;
  box-shadow:
    0 1px 2px rgba(31, 22, 18, 0.14),
    0 10px 24px -10px rgba(31, 22, 18, 0.36);
  display: block;
  position: relative;
  z-index: 1;
}
.ayce-price-stamp {
  position: absolute;
  left: 50%;
  bottom: calc(var(--ayce-price-stamp-height) * -0.56);
  z-index: 3;
  width: var(--ayce-price-stamp-width);
  min-height: var(--ayce-price-stamp-height);
  padding: clamp(10px, 2.6vw, 14px) clamp(14px, 3vw, 18px) clamp(12px, 2.9vw, 16px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--cream);
  text-align: center;
  background: var(--red);                  /* flat red — no gradient */
  border: 3px solid var(--stamp-border);   /* black in light, white in dark */
  border-radius: 8px;
  box-shadow:
    0 2px 0 rgba(250, 246, 238, 0.34) inset,
    0 0 0 2px rgba(31, 22, 18, 0.55),
    0 15px 24px -12px rgba(31, 22, 18, 0.62);
  transform: translateX(-50%) rotate(-4deg);
}
.ayce-price-stamp::after {
  content: '';
  position: absolute;
  inset: 7px;
  border: 1px dashed rgba(250, 246, 238, 0.52);
  border-radius: 5px;
  pointer-events: none;
}

[data-bg="black"][data-theme="dark"] .cover__photos::before,
[data-bg="black"][data-theme="dark"] .ayce-stage__photos::before {
  box-shadow:
    0 0 0 1px rgba(250, 246, 238, 0.24),
    0 0 14px rgba(255, 248, 200, 0.14),
    0 20px 42px -24px rgba(0, 0, 0, 0.82);
}
[data-bg="black"][data-theme="dark"] .cover__photos img,
[data-bg="black"][data-theme="dark"] .ayce-stage__photos img {
  box-shadow:
    0 14px 28px -20px rgba(0, 0, 0, 0.82);
}
[data-bg="black"][data-theme="dark"] .section--cover .cover__stamp,
[data-bg="black"][data-theme="dark"] .section--cover .cover__stamp:hover {
  filter:
    drop-shadow(0 0 8px rgba(255, 248, 200, 0.58))
    drop-shadow(0 0 22px rgba(255, 220, 100, 0.38))
    drop-shadow(0 14px 18px rgba(0, 0, 0, 0.50));
}
[data-bg="black"][data-theme="dark"] .ayce-price-stamp {
  box-shadow:
    0 2px 0 rgba(250, 246, 238, 0.50) inset,
    0 0 0 2px rgba(250, 246, 238, 0.68),
    0 0 18px rgba(255, 248, 200, 0.38),
    0 0 34px rgba(255, 220, 100, 0.22),
    0 18px 28px -14px rgba(0, 0, 0, 0.84);
  filter:
    drop-shadow(0 0 8px rgba(255, 248, 200, 0.36))
    drop-shadow(0 0 18px rgba(255, 220, 100, 0.24));
}
.ayce-price-stamp__eyebrow {
  font-family: var(--font-display);
  font-size: clamp(0.5rem, 1.5vw, 0.62rem);
  font-weight: 900;
  letter-spacing: 0.18em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--page-text);
  text-shadow: 0 1px 0 rgba(31, 22, 18, 0.18);
  white-space: nowrap;
}
.ayce-price-stamp__amount {
  position: relative;
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(3.1rem, 11.8vw, 4.3rem);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 0.84;
  color: var(--page-text);
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.22);
  font-kerning: normal;
  font-variant-numeric: tabular-nums;
}
.ayce-price-stamp__currency {
  position: absolute;
  right: calc(100% + 0.04em);
  top: 0.13em;
  font-size: 0.5em;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
}
.ayce-price-stamp__unit {
  font-family: var(--font-body);
  font-size: clamp(0.55rem, 1.65vw, 0.68rem);
  font-weight: 900;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--page-text);
  text-shadow: 0 1px 0 rgba(31, 22, 18, 0.18);
}
.ayce-stage__choice {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 1.45;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 auto 12px;
  text-align: center;
}
.ayce-stage__fineprint {
  text-align: center;
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--page-text);
  opacity: 0.72;
}

.ayce-coupon {
  --ticket-paper: #FBF1DD;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 420px;
  margin: 20px auto 30px;
}

/* Yellow display headline that sits between the "Choose" lede and the
   tickets. Brand yellow with dark stroke for legibility on the cream
   AYCE section background. */
.ayce-headline {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--btn-text);
  -webkit-text-stroke: 1.5px var(--ink);
  font-size: clamp(1.6rem, 4.5vw, 2.4rem);
  letter-spacing: 0.02em;
  text-align: center;
  margin: 0 0 24px;
  line-height: 1.1;
}

/* Two-ticket layout: stacked column on mobile (each ticket gets full width
   inside the .ayce-coupon constraint), switches to side-by-side row on
   desktop where #ayce .container has room (820px). */
.ayce-tickets {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  width: 100%;
  margin-bottom: 18px;
}
@media (min-width: 720px) {
  .ayce-coupon { max-width: var(--col-max); }   /* was 720px — conforms to iPhone column */
  .ayce-tickets {
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: 32px;
  }
}

/* Each ticket sits inside a card with a yellow display label above. */
.ayce-ticket-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  flex: 1 1 0;
  min-width: 0;
}
.ayce-ticket-card__label {
  font-family: var(--font-display);
  color: var(--btn-text);
  -webkit-text-stroke: 1.25px var(--ink);
  font-size: clamp(1.25rem, 3.4vw, 1.7rem);
  letter-spacing: 0.04em;
  text-align: center;
  margin: 0;
  line-height: 1.1;
}

/* Caveat-script hint that sits BELOW the price/sub line — reads like a
   handwritten note on the ticket ("8 flavors — pick 1 or 2"). */
.ayce-ticket__hint {
  font-family: var(--font-script);
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.2;
  margin: 6px 0 0;
  color: var(--ink-muted, #6E5A4A);
}

.ayce-ticket {
  position: relative;
  width: min(100%, 310px);
  min-height: 420px;                  /* was 520px — shorter now that chicken moved into bubble */
  margin: 0;
  padding: 24px 58px 28px;
  color: var(--ink);
  text-align: center;
  overflow: hidden;
  /* Layered: subtle "boka boka boka" watermark UNDER the cream gradient.
     The gradient stays primary; the SVG text peeks through where the
     gradient is lightest (top-left) and is barely visible elsewhere —
     reads like a banknote watermark. */
  background:
    linear-gradient(145deg, rgba(255, 253, 246, 0.92) 0%, rgba(251, 241, 221, 0.93) 46%, rgba(242, 234, 217, 0.94) 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 30'><text x='6' y='22' fill='%23c9b8a5' font-family='Archivo Black, Inter, sans-serif' font-size='11' font-weight='900' opacity='0.14' letter-spacing='1'>boka boka boka boka</text></svg>");
  background-repeat: repeat, repeat;
  background-size: auto, 200px 30px;

  /* Real perforations: cut circular holes at both edges so the page's orange
     shows directly through. Each mask layer spans the FULL width (100%) so
     it's solid black everywhere except one transparent circle at one edge.
     Intersecting both layers = ticket visible everywhere except where either
     mask has its cutout circle. */
  -webkit-mask:
    radial-gradient(circle at 0% 24px, transparent 0 11px, #000 11.5px) 0 0 / 100% 48px repeat-y,
    radial-gradient(circle at 100% 24px, transparent 0 11px, #000 11.5px) 0 0 / 100% 48px repeat-y;
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(circle at 0% 24px, transparent 0 11px, #000 11.5px) 0 0 / 100% 48px repeat-y,
    radial-gradient(circle at 100% 24px, transparent 0 11px, #000 11.5px) 0 0 / 100% 48px repeat-y;
  mask-composite: intersect;

  /* Drop shadow matching the order button on top. On mobile (<480px),
     Safari renders drop-shadow inconsistently with mask-composite — the
     shadow leaks past the cutout edges and looks like a stroke artifact.
     Disable below 480px; keep the soft shadow on tablet+desktop where it
     renders correctly. */
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.18))
          drop-shadow(0 8px 18px rgba(0, 0, 0, 0.28));
}
@media (max-width: 480px) {
  .ayce-ticket {
    filter: none;
  }
}

.ayce-ticket__serial {
  position: absolute;
  top: 24px;
  bottom: 24px;
  width: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 0.58rem;
  letter-spacing: 0.34em;
  color: rgba(31, 22, 18, 0.72);
  white-space: nowrap;
  writing-mode: vertical-rl;
  text-transform: uppercase;
  z-index: 3;
}
.ayce-ticket__serial--left  { left: 8px;  transform: rotate(180deg); }
.ayce-ticket__serial--right { right: 8px; }

.ayce-ticket__inner {
  position: relative;
  z-index: 2;
}

.ayce-ticket__kicker {
  margin: 0 0 14px;
  padding: 0 0 12px;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 4.4vw, 1.3rem);
  letter-spacing: 0.18em;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--red-d);
  border-bottom: 2px dashed var(--divider-strong);
  white-space: nowrap;
}

.ayce-ticket__stamp {
  font-family: var(--font-display);
  font-size: clamp(1.18rem, 4vw, 1.42rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 10px;
  line-height: 1;
}
/* Mirrored bottom block — wrapped and rotated 180° so the entire ticket
   reads as a true mirror end-to-end. */
.ayce-ticket__footer {
  transform: rotate(180deg);
}
.ayce-ticket__stamp--mirror {
  margin: 0 0 10px;
}
/* Bottom kicker inherits the base 14px margin / 12px padding so the rotated
   "A.Y.C.E." sits at the same distance from the dashed line as on the top —
   pushing the entire upside-down block down to mirror the top exactly. */

/* Boka wordmark image — small black "boka" lockup framing the ticket, mirrored
   automatically at the bottom by the .ayce-ticket__footer's rotate(180deg). */
.ayce-ticket__brand {
  display: block;
  width: clamp(72px, 30%, 96px);
  height: auto;
  margin: 0 auto 8px;
}
.ayce-ticket__name {
  font-family: var(--font-display);
  font-size: clamp(1.06rem, 3.5vw, 1.32rem);
  text-transform: lowercase;
  color: var(--ink);
  margin: 0 0 10px;
  line-height: 1.15;
}
.ayce-ticket__price {
  font-family: var(--font-display);
  font-size: clamp(5.8rem, 18vw, 7.2rem);
  line-height: 0.88;
  margin: 4px 0 8px;
  color: var(--ink);
  letter-spacing: 0.01em;
  font-feature-settings: "kern" 1, "tnum" 1;
  font-kerning: normal;
}
/* Make the leading "$" smaller than the digits, top-aligned with the digit caps
   so it reads as a superscript-style currency mark rather than mid-height. */
.ayce-ticket__price::first-letter {
  font-size: 0.5em;
  vertical-align: 0.85em;
  line-height: 1;
  margin-right: 0.04em;
}
.ayce-ticket__sub {
  font-size: 0.7rem;
  color: rgba(0, 0, 0, 0.72);
  margin: 0;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

@media (max-width: 380px) {
  .ayce-ticket {
    padding-inline: 54px;
  }
}

/* ORDER GRID — 4 separate delivery-app buttons in the final CTA */
.order-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 320px;
}
@media (min-width: 540px) {
  .order-grid { grid-template-columns: 1fr 1fr; max-width: 520px; }
}
.order-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 22px;
  background: var(--ink);
  color: var(--paper);
  border: 1.5px solid var(--gold);
  border-radius: 14px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.02em;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.32),
    0 8px 18px -8px rgba(0, 0, 0, 0.45);
  transition: transform var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}
.order-btn:hover {
  transform: translateY(-2px);
  border-color: var(--gold-hover);
}
.order-btn:active { transform: translateY(0); }
.order-btn__icon {
  display: inline-block;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
}
.order-btn__icon--grubhub  { -webkit-mask-image: url('assets/icons/grubhub.svg');  mask-image: url('assets/icons/grubhub.svg');  }
.order-btn__icon--doordash { -webkit-mask-image: url('assets/icons/doordash.svg'); mask-image: url('assets/icons/doordash.svg'); }
.order-btn__icon--ubereats { -webkit-mask-image: url('assets/icons/ubereats.svg'); mask-image: url('assets/icons/ubereats.svg'); }
.order-btn__icon--seamless { -webkit-mask-image: url('assets/icons/seamless.svg'); mask-image: url('assets/icons/seamless.svg'); }
.order-btn__name { flex: 1; min-width: 0; text-align: left; }
.order-btn__arrow {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--btn-text);
  line-height: 1;
}

/* -------------------- MENU (on brown bg) -------------------- */
.menu { margin-top: 0; text-align: left; }  /* re-anchor menu rows to left */
.menu-cat {
  border-top: 1px solid var(--line);
  position: relative;
}
.menu-cat:last-child { border-bottom: 1px solid var(--line); }

.menu-cat__head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: 0;
  padding: 22px 4px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.75rem;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  line-height: 1.05;
}
.menu-cat__head .chev {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--line);
  line-height: 1;
  transition: opacity var(--t-fast) var(--ease);
}
.menu-cat__head .chev::after { content: '+'; }
.menu-cat[data-open="true"] .menu-cat__head .chev::after { content: '\2212'; }

.menu-cat__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-mid) var(--ease);
}
.menu-cat[data-open="true"] .menu-cat__body { grid-template-rows: 1fr; }
.menu-cat__body > div { overflow: hidden; }

.menu-cat__note {
  font-size: 0.85rem;
  color: rgba(31, 22, 18, 0.7);
  padding: 0 4px 12px;
}

.menu-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  padding: 12px 4px;
  border-top: 1px dashed var(--divider-soft);
  align-items: baseline;
}
.menu-item:first-child { border-top: 0; }
.menu-item__name {
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
}
.menu-item__name.hot::after {
  content: ' 🌶';
}
.menu-item__desc {
  font-size: 0.85rem;
  color: var(--page-text);
  opacity: 0.7;
  margin-top: 3px;
  line-height: 1.4;
}
.menu-item__price {
  font-family: var(--font-display);
  font-size: 1rem;
  white-space: nowrap;
  color: var(--ink);
}

/* Fried chicken flavors — clickable pills in a 4x2 grid below the FRIED
   CHICKEN header. Click a pill to play its signature animation in the
   .flavor-strip above the section divider. Single-select toggle. */
.flavor-panel {
  padding: 4px 0 14px;
  margin: 4px 0 8px;
  color: var(--page-text);
}
.flavor-panel__head {
  margin: 0 0 8px;
  display: flex;
  align-items: baseline;
  gap: 0.35em;
  flex-wrap: wrap;
  font-size: 1rem;
  line-height: 1.3;
  color: var(--page-text);
}
.flavor-panel__label {
  font-weight: 700;
  margin-right: 0.35em;
}
.flavor-panel__note {
  font-weight: 500;
  color: var(--page-text-muted);
}
.flavor-panel__sample {
  margin-left: auto;
  padding: 4px 9px;
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--btn-text);
  background: rgba(31, 22, 18, 0.88);
  border-radius: 999px;
  white-space: nowrap;
}
.flavor-panel__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
@media (max-width: 480px) {
  .flavor-panel__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.flavor-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 6px 6px;
  border: 1.5px solid var(--gold);
  border-radius: 999px;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--paper);
  background: var(--ink);
  cursor: pointer;
  transition: background 180ms ease-out,
              color 180ms ease-out,
              border-color 180ms ease-out,
              transform 180ms ease-out;
}
.flavor-pill:hover {
  border-color: var(--gold-hover);
}
.flavor-pill:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 2px;
}
/* .hot kept as a subtle red border accent; brown bg + orange text base
   stays unified with all other pills per user direction. */
.flavor-pill.hot {
  border-color: var(--red);
}
.flavor-pill[aria-pressed="true"] {
  font-weight: 700;
  transform: scale(1.02);
}
/* Per-flavor pill backgrounds — match the flavor's visual identity. */
.flavor-pill[data-flavor="soy-garlic"][aria-pressed="true"] {
  background: #5a3320; color: #fff; border-color: #5a3320;
}
.flavor-pill[data-flavor="hot-spicy"][aria-pressed="true"],
.flavor-pill.hot[aria-pressed="true"] {
  background: #ff2a00; color: #fff; border-color: #ff2a00;
}
.flavor-pill[data-flavor="og-crispy"][aria-pressed="true"] {
  background: #cd853f; color: #fff; border-color: #cd853f;
}
.flavor-pill[data-flavor="buffalo"][aria-pressed="true"] {
  background: #ff9e46; color: var(--ink); border-color: #ff9e46;
}
.flavor-pill[data-flavor="sweet-chili"][aria-pressed="true"] {
  background: #ff6fa8; color: var(--ink); border-color: #ff6fa8;
}
.flavor-pill[data-flavor="garlic-parmesan"][aria-pressed="true"] {
  background: #f1d27a; color: var(--ink); border-color: #f1d27a;
}
.flavor-pill[data-flavor="crispy-cajun"][aria-pressed="true"] {
  background: #cc4422; color: #fff; border-color: #cc4422;
}
.flavor-pill[data-flavor="lemon-pepper"][aria-pressed="true"] {
  background: #ffd400; color: var(--ink); border-color: #ffd400;
}

/* Flavor strip — split into [buddy zone | stage zone].
   Buddy zone: side-facing chicken with cycling speech bubble (decorative).
   Stage zone: hosts FlavorAnimator's per-flavor canvas effects, anchored
   on the FRIED CHICKEN section's top border so the divider line acts as the
   visual ground for the animations, and rising particles (flames, etc.)
   extend up into the description area above. Stays empty on idle. */
.flavor-strip {
  position: relative;
  height: clamp(104px, 15vw, 124px);
  /* Top margin reserves room for the bubble that now overflows above the
     strip into the description area. Bottom margin holds space for the
     heat indicator that hangs below into the FRIED CHICKEN header zone. */
  margin: 28px 0 0;
  display: grid;
  grid-template-columns: clamp(88px, 17vw, 112px) minmax(0, 1fr);
  align-items: end;
  overflow: visible;
  pointer-events: none;
}
.flavor-buddy {
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: flex-end;
  pointer-events: none;
  z-index: 4;
}
.flavor-buddy__chicken {
  display: block;
  width: clamp(70px, 10vw, 90px);
  height: auto;
  margin-left: 0;
  margin-bottom: -1px;        /* feet sit on the divider, like canvas items do */
  position: relative;
  z-index: 3;
  transform-origin: 52% 88%;
}
.flavor-buddy__chicken #buddy-eye-inside {
  animation: buddy-eye-blink 5.6s steps(1, end) infinite;
  transform-origin: center;
  will-change: opacity, transform;
}
.flavor-buddy__chicken #buddy-head-red {
  transform-box: fill-box;
  transform-origin: 50% 86%;
}
@keyframes buddy-eye-blink {
  0%, 91%, 100% { opacity: 1; }
  93%, 95% { opacity: 0.08; }
}
@keyframes buddy-hot-hat {
  0%, 100% { transform: rotate(0deg) scaleY(1); }
  35% { transform: rotate(-12deg) scaleY(0.82); }
  62% { transform: rotate(10deg) scaleY(1.08); }
}
@keyframes buddy-small-bounce {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-4px) rotate(-1.5deg); }
}
@keyframes buddy-laugh {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-3px) rotate(-2deg); }
  50% { transform: translateY(1px) rotate(2deg); }
  75% { transform: translateY(-2px) rotate(-1deg); }
}
.flavor-strip[data-flavor="hot-spicy"] .flavor-buddy__chicken {
  animation: buddy-small-bounce 520ms ease-in-out infinite;
}
.flavor-strip[data-flavor="hot-spicy"] .flavor-buddy__chicken #buddy-head-red {
  animation: buddy-hot-hat 760ms ease-in-out infinite;
}
.flavor-strip[data-flavor="sweet-chili"] .flavor-buddy__chicken #buddy-eye-inside {
  fill: #ff6fa8;
  animation-duration: 3.8s;
}
.flavor-strip[data-flavor="lemon-pepper"] .flavor-buddy__chicken #buddy-head-red {
  fill: var(--yellow);
}
.flavor-strip[data-flavor="lemon-pepper"] .flavor-buddy__chicken {
  animation: buddy-small-bounce 1100ms ease-in-out infinite;
}
.flavor-strip[data-flavor="buffalo"] .flavor-buddy__chicken {
  animation: buddy-laugh 460ms ease-in-out infinite;
}
.flavor-strip[data-flavor="buffalo"] .flavor-buddy #buddy-mouth-closed {
  animation: buddy-mouth-closed-cycle 0.26s linear infinite;
}
.flavor-strip[data-flavor="buffalo"] .flavor-buddy #buddy-mouth-top,
.flavor-strip[data-flavor="buffalo"] .flavor-buddy #buddy-mouth-bottom {
  animation: buddy-mouth-open-cycle 0.26s linear infinite;
}
.flavor-strip[data-flavor="og-crispy"] .flavor-buddy__chicken {
  animation: buddy-small-bounce 900ms ease-in-out infinite;
}
.flavor-strip[data-flavor="garlic-parmesan"] .flavor-buddy__chicken #buddy-head-red {
  fill: #f1d27a;
}
.flavor-strip[data-flavor="crispy-cajun"] .flavor-buddy__chicken {
  animation: buddy-laugh 680ms ease-in-out infinite;
}

/* Side chicken: only the closed-beak polygon shows by default. The other
   two mouth polygons (`top` + `bottom`) layer together to form the OPEN
   beak — they alternate with the closed beak under `.is-talking` to create
   the speech motion. The original SVG ships with all three on, which reads
   as a confused beak; we suppress two and orchestrate them via animation. */
.flavor-buddy__chicken #buddy-mouth-top,
.flavor-buddy__chicken #buddy-mouth-bottom {
  opacity: 0;
}
@keyframes buddy-mouth-closed-cycle {
  0%, 49.99% { opacity: 1; }
  50%, 100%  { opacity: 0; }
}
@keyframes buddy-mouth-open-cycle {
  0%, 49.99% { opacity: 0; }
  50%, 100%  { opacity: 1; }
}
.flavor-buddy.is-talking #buddy-mouth-closed {
  animation: buddy-mouth-closed-cycle 0.4s linear infinite;
}
.flavor-buddy.is-talking #buddy-mouth-top,
.flavor-buddy.is-talking #buddy-mouth-bottom {
  animation: buddy-mouth-open-cycle 0.4s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .flavor-buddy.is-talking #buddy-mouth-closed,
  .flavor-buddy.is-talking #buddy-mouth-top,
  .flavor-buddy.is-talking #buddy-mouth-bottom {
    animation: none;
  }
  .flavor-svg-chicken,
  .flavor-svg-chicken .part-eye-inside,
  .flavor-svg-chicken .part-head-red,
  .flavor-svg-chicken .part-cowboy-hat,
  .flavor-svg-chicken.is-talking .part-mouth-closed,
  .flavor-svg-chicken.is-talking .part-mouth-top,
  .flavor-svg-chicken.is-talking .part-mouth-bottom {
    animation: none;
  }
}

.flavor-buddy__bubble {
  position: absolute;
  /* Sit above the chicken's head, slightly left-shifted so the bubble's
     bottom-right corner aligns with the chicken's red comb. Bubble overflows
     above the strip into the description area above. */
  left: clamp(-12px, -1.2vw, -2px);
  bottom: clamp(58px, 9vw, 78px);
  width: max-content;
  max-width: clamp(138px, 23vw, 168px);
  padding: 6px 9px 7px;
  background: #fffdf7;
  color: var(--ink);
  font-family: var(--font-polaroid);
  font-size: clamp(0.66rem, 1.6vw, 0.78rem);
  font-weight: 700;
  line-height: 1.14;
  text-align: left;
  border: 3px solid var(--ink);
  /* Tail-corner flipped: bottom-right is the small radius, pointing
     down-right toward the chicken below-right. */
  border-radius: 19px 19px 9px 19px;
  box-shadow:
    0 2px 0 rgba(250, 246, 238, 0.75) inset,
    0 5px 0 rgba(31, 22, 18, 0.18);
  opacity: 0;
  transform: translateY(-4px) rotate(-1.2deg);
  transition: opacity 240ms ease-out, transform 240ms ease-out;
  pointer-events: none;
  z-index: 6;
}
.flavor-buddy__bubble[data-state="show"] {
  opacity: 1;
  transform: translateY(0) rotate(-1.2deg);
}
.flavor-strip__stage {
  grid-column: 2;
  position: relative;
  height: 100%;
  min-width: 0;                /* allow flex item to shrink below content width */
}
.flavor-strip__stage .chicken-loader {
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  --loader-size: clamp(38px, 7vw, 48px);
  z-index: 1;
}
.flavor-strip[data-ready="true"] .chicken-loader {
  opacity: 0;
  visibility: hidden;
}
.flavor-strip__canvas {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 180px;
  opacity: 0;
  transition: opacity 220ms ease-out;
  pointer-events: none;
  z-index: 2;            /* render above .menu-cat border-top so items sit ON the line */
}
.flavor-strip__canvas.is-on { opacity: 1; }

.flavor-svg-flock {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 180px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease-out;
  z-index: 3;
}
.flavor-svg-flock.is-on { opacity: 1; }
.flavor-svg-chicken {
  position: absolute;
  bottom: 4px;
  width: clamp(40px, 16%, 54px);
  transform-origin: 50% 92%;
  animation: cajun-svg-step 840ms ease-in-out infinite;
  animation-delay: var(--step-delay, 0s);
  will-change: transform;
}
.flavor-svg-chicken__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 6px 5px rgba(35, 31, 32, 0.22));
}
.flavor-svg-chicken[data-facing="-1"] .flavor-svg-chicken__svg {
  transform: scaleX(-1);
}
.flavor-svg-chicken .part-mouth-top,
.flavor-svg-chicken .part-mouth-bottom {
  opacity: 0;
}
.flavor-svg-chicken .part-eye-inside {
  transform-box: fill-box;
  transform-origin: center;
  animation: cajun-eye-blink 4.8s steps(1, end) infinite;
}
.flavor-svg-chicken .part-head-red {
  transform-box: fill-box;
  transform-origin: 50% 86%;
  animation: cajun-comb-under-hat 720ms ease-in-out infinite;
}
.flavor-svg-chicken .part-cowboy-hat {
  transform-box: fill-box;
  transform-origin: 44% 76%;
  animation: cajun-hat-tip 1.18s ease-in-out infinite;
  animation-delay: var(--hat-delay, 0s);
}
.flavor-svg-chicken.is-talking .part-mouth-closed {
  animation: cajun-mouth-closed-cycle 2.05s steps(1, end) infinite;
}
.flavor-svg-chicken.is-talking .part-mouth-top,
.flavor-svg-chicken.is-talking .part-mouth-bottom {
  animation: cajun-mouth-open-cycle 2.05s steps(1, end) infinite;
}

@keyframes cajun-svg-step {
  0%, 100% { transform: translateX(-50%) translateY(0) scale(var(--chicken-scale, 1)) rotate(-1.2deg); }
  46% { transform: translateX(-50%) translateY(-5px) scale(var(--chicken-scale, 1)) rotate(1.8deg); }
  66% { transform: translateX(-50%) translateY(-2px) scale(var(--chicken-scale, 1)) rotate(-0.8deg); }
}
@keyframes cajun-comb-under-hat {
  0%, 100% { transform: rotate(0deg) scaleY(1); }
  38% { transform: rotate(-7deg) scaleY(0.9); }
  64% { transform: rotate(5deg) scaleY(1.04); }
}
@keyframes cajun-hat-tip {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  34% { transform: translate(-1px, 2px) rotate(-6deg); }
  58% { transform: translate(1px, -2px) rotate(4deg); }
}
@keyframes cajun-eye-blink {
  0%, 88%, 100% { transform: scaleY(1); }
  90%, 92% { transform: scaleY(0.08); }
}
@keyframes cajun-mouth-closed-cycle {
  0%, 9%, 27%, 43%, 100% { opacity: 1; }
  10%, 26%, 44%, 56% { opacity: 0; }
}
@keyframes cajun-mouth-open-cycle {
  0%, 9%, 27%, 43%, 100% { opacity: 0; }
  10%, 26%, 44%, 56% { opacity: 1; }
}

/* Heat indicator: tucked just below the white divider line, in the upper
   slice of the FRIED CHICKEN section header area. Right-aligned so it
   doesn't overlap the section title text. Compact emoji-based labels keep
   it tiny enough that the flame animation in the strip above has full
   clearance. */
.flavor-heat {
  position: absolute;
  right: 6px;
  bottom: -26px;          /* overflow below strip into FRIED CHICKEN header zone */
  z-index: 7;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: rgba(31, 22, 18, 0.88);
  border: 1px solid rgba(250, 246, 238, 0.28);
  border-radius: 999px;
  box-shadow: 0 6px 14px -10px rgba(31, 22, 18, 0.55);
  pointer-events: auto;
  font-size: 0.66rem;     /* drives emoji size */
  line-height: 1;
}
.flavor-heat[hidden] {
  display: none;
}
.flavor-heat__sep {
  color: rgba(250, 246, 238, 0.32);
  font-size: 0.62rem;
  font-weight: 400;
  user-select: none;
}
.flavor-heat__btn {
  min-height: 0;
  padding: 2px 3px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--cream);
  font-family: var(--font-body);
  font-size: inherit;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  filter: grayscale(0.6) brightness(0.9);
  transition: filter 160ms ease-out, transform 160ms ease-out;
}
.flavor-heat__btn:hover { filter: grayscale(0); transform: scale(1.08); }
.flavor-heat__btn[aria-pressed="true"] {
  filter: grayscale(0) brightness(1);
  transform: scale(1.1);
}
@media (max-width: 480px) {
  .flavor-panel__sample { flex-basis: 100%; margin-left: 0; }
  .flavor-strip { grid-template-columns: 82px minmax(0, 1fr); }
  .flavor-buddy__bubble {
    left: -6px;
    bottom: 56px;
    max-width: 144px;
    font-size: 0.66rem;
    padding: 6px 8px 7px;
  }
  .flavor-heat {
    right: 4px;
    bottom: -24px;
    gap: 3px;
    padding: 2px 6px;
    font-size: 0.6rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .flavor-strip { display: none; }
}

.menu__footnote {
  margin-top: 24px;
  font-size: 0.75rem;
  color: var(--page-text);
  opacity: 0.72;
  text-align: center;
  letter-spacing: 0.04em;
}

/* -------------------- POLAROID CAROUSEL -------------------- */
.polaroid-section { padding-bottom: var(--section-pad-sm); }
/* Carousel sits inside the same narrow column as the rest of the hero
   (matches thestampa.com's max-w-lg / iPhone-mockup width).
   JS auto-pans the track slowly leftward; touch/wheel pauses for ~5s.
   Edge fade is masked so polaroids gracefully enter/exit the column. */
.polaroids {
  display: flex;
  gap: 16px;
  padding: 24px var(--col-pad) 32px;
  width: 100vw;                  /* full viewport width on every screen */
  max-width: none;
  margin-left: calc(50% - 50vw); /* escape parent column constraint */
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-snap-type: none;        /* JS pans freely; snap would fight it */
  scroll-behavior: auto;         /* not 'smooth' — would compete with RAF */
}
.polaroids::-webkit-scrollbar { display: none; }

.chicken-loader--share {
  margin: 10px auto -4px;
  --loader-size: 42px;
}
#share[data-photos-ready="true"] .chicken-loader--share {
  opacity: 0;
  visibility: hidden;
}


.polaroid {
  flex: 0 0 110px;                         /* was 220px — half-size to match thestampa stamp scale */
  margin: 10px 0;
  background: #fff;
  padding: 8px 8px 0;                      /* tighter inner padding for the smaller card */
  border-radius: 3px;
  box-shadow: 0 10px 18px -12px rgba(0, 0, 0, 0.7),
              0 0 0 1px rgba(0, 0, 0, 0.04);
  transform: rotate(var(--rot, 0deg));
  transition: transform var(--t-mid) var(--ease);
}
.polaroid:hover { transform: rotate(0deg) translateY(-4px); }
[data-bg="black"][data-theme="dark"] #share .polaroid {
  box-shadow:
    0 0 0 1px rgba(250, 246, 238, 0.14),
    0 0 14px rgba(255, 248, 200, 0.18),
    0 0 26px rgba(255, 220, 100, 0.10),
    0 12px 24px -14px rgba(0, 0, 0, 0.84);
}
.polaroid__photo {
  aspect-ratio: 1 / 1;
  border-radius: 2px;
  background: linear-gradient(135deg, var(--cream-3), var(--brown-soft));
  background-size: cover;
  background-position: center;
}
/* GPT-generated food photos are attached by JS when the share section is
   close to view, so first paint doesn't pull a below-fold image carousel. */
.polaroid__photo.is-loaded {
  background-image: var(--polaroid-bg);
}

/* CSS-only placeholders for foods that don't have a real photo yet. Each card
   gets a food-appropriate background color, a centered script label, and a
   "PLACEHOLDER" tag at the top. To swap in a real image: drop the .jpg into
   assets/polaroids/, add a `.polaroid__photo--<slug> { background-image: ... }`
   rule above, and remove the `polaroid__photo--placeholder` + ph-<slug> classes
   from the polaroid in index.html. */
.polaroid__photo--placeholder {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-image: none;
}
.polaroid__photo--placeholder::before {
  content: 'PLACEHOLDER';
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display, 'Archivo Black', sans-serif);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.78);
  background: rgba(0, 0, 0, 0.32);
  padding: 3px 8px;
  border-radius: 2px;
  z-index: 1;
}
.polaroid__photo--placeholder::after {
  content: attr(data-ph-label);
  font-family: var(--font-polaroid, 'Kalam', cursive);
  font-weight: 700;
  font-size: 1.55rem;
  line-height: 1.1;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  padding: 0 14px;
  z-index: 1;
}

.polaroid figcaption {
  font-family: var(--font-polaroid);
  font-weight: 700;
  font-size: 0.72rem;          /* ~11.5px — proportional to the smaller polaroid */
  color: var(--ink);
  text-align: center;
  padding: 6px 4px 8px;        /* tighter padding for the smaller card */
  line-height: 1.15;
}
/* Swipe hint — interactive arrow buttons + front-facing chicken on white */
.polaroid-controls { padding-top: 8px; }
.polaroid__hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0;
  user-select: none;
}
.hint-arrow {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: var(--page-text);
  opacity: 0.72;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.hint-arrow:hover {
  color: var(--btn-text);
  background: rgba(255, 255, 255, 0.06);
  transform: scale(1.08);
}
.hint-arrow:active { transform: scale(0.96); }
.hint-arrow svg { width: 22px; height: 22px; display: block; }

.hint-chicken {
  display: inline-grid;
  place-items: center;
  width: 56px;
  height: 56px;
  background: #fff;
  border: none;                  /* button reset */
  padding: 0;                    /* button reset */
  cursor: pointer;               /* clickable affordance */
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35),
              0 0 0 1px rgba(0, 0, 0, 0.05);
  transition: transform var(--t-mid) var(--ease);
}
.hint-chicken:hover { transform: scale(1.04); }
.hint-chicken:active { transform: scale(0.96); }
.hint-chicken img,
.hint-chicken svg { width: 38px; height: auto; display: block; overflow: visible; }
#hint-chicken #h-eye-left,
#hint-chicken #h-eye-right { will-change: transform; }

.hint-label {
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.74rem;
  letter-spacing: 0.32em;
  color: var(--page-text);
  opacity: 0.92;
  text-transform: uppercase;
  margin: 14px 0 0;
}

/* -------------------- DELIVERY LIST -------------------- */
.delivery-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}
.delivery-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  background: var(--brown-mid);
  border-radius: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.delivery-list a:hover { background: var(--brown-soft); transform: translateY(-1px); }
.delivery-arrow {
  font-family: var(--font-display);
  color: var(--btn-text);
}

/* -------------------- CATERING FORM -------------------- */
/* Posts to /api/catering (Pages Function), which sends via MailChannels
   and redirects back to /?sent=catering#catering for the thanks banner. */
/* Catering bullets — three short claims under the lede, before the form */
.catering-bullets {
  list-style: none;
  margin: 0 auto 26px;
  padding: 0;
  max-width: 36ch;
  text-align: left;
  display: grid;
  gap: 10px;
}
.catering-bullets li {
  position: relative;
  padding-left: 20px;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--ink);
}
.catering-bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 8px;
  height: 8px;
  background: var(--brown-mid);
  border-radius: 50%;
}

.catering-thanks {
  background: #1f4d2a;
  color: #f5fff5;
  padding: 14px 18px;
  border-radius: 12px;
  font-size: 0.95rem;
  margin: 0 0 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.catering-thanks strong { font-weight: 700; }

.catering-error {
  background: var(--red, #E9423E);
  color: #fff;
  padding: 14px 18px;
  border-radius: 12px;
  font-size: 0.95rem;
  margin: 0 0 18px;
  border: 1px solid rgba(0, 0, 0, 0.08);
}
.catering-error strong { font-weight: 700; }
.catering-error a { color: #fff; text-decoration: underline; }

.catering-form.is-sending button[type="submit"] {
  opacity: 0.6;
  pointer-events: none;
}

/* Honeypot — invisible to humans, irresistible to bots */
.catering-form .hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.catering-form-wrap {
  position: relative;
  background: var(--cream-2);
  border: 1px solid rgba(31, 22, 18, 0.18);
  border-radius: 18px;
  padding: clamp(20px, 4vw, 28px);
  margin: 8px 0 16px;
}
.catering-form__heading { margin: 0 0 18px; }
.catering-form__heading h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.4rem, 3vw, 1.7rem);
  text-transform: lowercase;
  margin: 0 0 6px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.catering-form__heading p {
  font-size: 0.85rem;
  color: var(--ink-muted);
  margin: 0;
}

.catering-form { display: grid; gap: 14px; }
.catering-form[hidden] { display: none; }
.catering-form__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 540px) {
  .catering-form__row { grid-template-columns: 1fr 1fr; }
}

.catering-form label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 600;
}
.catering-form input,
.catering-form select,
.catering-form textarea {
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  font-size: 0.95rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid rgba(31, 22, 18, 0.22);
  border-radius: 10px;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.catering-form select {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink-muted) 50%),
    linear-gradient(135deg, var(--ink-muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) center, calc(100% - 12px) center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 32px;
}
.catering-form textarea {
  min-height: 110px;
  resize: vertical;
  font-family: var(--font-body);
}
.catering-form input:focus,
.catering-form select:focus,
.catering-form textarea:focus {
  outline: none;
  border-color: var(--red);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(233, 66, 62, 0.15);
}
.catering-form input::placeholder,
.catering-form textarea::placeholder {
  color: rgba(31, 22, 18, 0.38);
  font-style: italic;
}
.turnstile-widget {
  min-height: 0;
}
.turnstile-widget iframe {
  max-width: 100%;
}
.turnstile-widget:has(iframe) {
  margin: 2px 0 4px;
}
.human-check {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 12px 14px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(31, 22, 18, 0.2);
  border-radius: 10px;
  text-align: left;
  cursor: pointer;
}
.catering-form .human-check,
.share-form .human-check {
  margin-bottom: 0;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.3;
  text-transform: none;
  color: var(--ink);
}
.catering-form .human-check input[type="checkbox"],
.share-form .human-check input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
  accent-color: var(--red);
  appearance: auto;
  -webkit-appearance: checkbox;
}
.human-check:focus-within {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(233, 66, 62, 0.15);
}
.catering-form__submit {
  margin-top: 4px;
}
.catering-form__submit .btn {
  width: 100%;
  margin: 0;
}
.catering-form__hint {
  font-size: 0.82rem;
  color: var(--ink-muted);
  margin: 8px 0 0;
  text-align: center;
}
.catering-form__hint a {
  color: var(--ink);
  border-bottom: 1px solid var(--red);
  padding-bottom: 1px;
}
.catering-form__hint a:hover { color: var(--red); }

/* ============================================================
   SHARE HEADER CHICKEN — single side-eye chicken inside the SVG
   wordmark (between "h" and "r"). Mouth flaps + pupil tracks the
   cursor (via ChickenEyes class in script.js). Same talk-burst
   pattern as the engagement chicken — JS toggles .is-talking.
   ============================================================ */
#share-header {
  --shh-mouth-rate: 700ms;
  --shh-hair-x: 0px;
  --shh-hair-y: 0px;
  --shh-hair-rot: 0deg;
  --shh-hair-scale-x: 1;
  --shh-hair-scale-y: 1;
  --shh-eye-physics-x: 0px;
  --shh-eye-physics-y: 0px;
  --shh-eye-physics-scale-x: 1;
  --shh-eye-physics-scale-y: 1;
}
#share-header #shh-mouth-top,
#share-header #shh-mouth-bottom { opacity: 0; }
#share-header #shh-mouth-closed { opacity: 1; }
#share-header.is-talking #shh-mouth-closed {
  animation: shh-mouth-close var(--shh-mouth-rate, 700ms) steps(1, end) infinite;
}
#share-header.is-talking #shh-mouth-top,
#share-header.is-talking #shh-mouth-bottom {
  animation: shh-mouth-open var(--shh-mouth-rate, 700ms) steps(1, end) infinite;
}
@keyframes shh-mouth-close { 0%,49.99%{opacity:1} 50%,100%{opacity:0} }
@keyframes shh-mouth-open  { 0%,49.99%{opacity:0} 50%,100%{opacity:1} }
#share-header #shh-head-red,
.chicken-scroll-hair {
  transform-box: fill-box;
  transform-origin: var(--chicken-scroll-hair-origin, 50% 82%);
  transform:
    translate(var(--shh-hair-x, 0px), var(--shh-hair-y, 0px))
    rotate(var(--shh-hair-rot, 0deg))
    scale(var(--shh-hair-scale-x, 1), var(--shh-hair-scale-y, 1));
  will-change: transform;
}
#share-header.is-scroll-physics #shh-head-red,
.is-scroll-physics .chicken-scroll-hair {
  filter: drop-shadow(0 1px 0 rgba(35, 31, 32, .2));
}
#share-header #shh-eye-inside {
  will-change: transform;
  transform-box: fill-box;
  transform-origin: center;
}
#order-chicken [data-shock-blink],
.flavor-buddy__chicken [data-shock-blink],
.section-title-svg [data-shock-blink],
#hint-chicken [data-shock-blink],
#wuz-chicken [data-shock-blink] {
  transition: opacity 90ms ease-out;
}
#order-chicken [data-shock-blink="1"],
.flavor-buddy__chicken [data-shock-blink="1"],
.section-title-svg [data-shock-blink="1"],
#hint-chicken [data-shock-blink="1"],
#wuz-chicken [data-shock-blink="1"] {
  opacity: 0.08 !important;
}
@media (prefers-reduced-motion: reduce) {
  #share-header.is-talking #shh-mouth-closed,
  #share-header.is-talking #shh-mouth-top,
  #share-header.is-talking #shh-mouth-bottom { animation: none; }
  #share-header.is-talking #shh-mouth-closed { opacity: 1; }
  #share-header.is-talking #shh-mouth-top,
  #share-header.is-talking #shh-mouth-bottom { opacity: 0; }
  #share-header #shh-head-red,
  .chicken-scroll-hair {
    transform: none !important;
    filter: none !important;
  }
}

/* ============================================================
   SHARE POLAROID EXAMPLES — 4 small tilted polaroids showing
   sample food photos between the intro copy and the form.
   Reuses the main carousel's polaroid styling at smaller scale.
   ============================================================ */
#follow.section {
  padding-bottom: clamp(20px, 4vw, 32px);
}

#share.section {
  padding-top: clamp(24px, 4vw, 36px);
  padding-bottom: clamp(28px, 5vw, 44px);
}

#share .polaroids {
  padding-top: 14px;
  padding-bottom: 20px;
}

.share-examples {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(8px, 2vw, 18px);
  margin: 28px 0 24px;
  padding: 8px 0;
}
.polaroid--share {
  flex: 0 0 auto;
  width: clamp(110px, 22vw, 140px);
  padding: 8px 8px 18px;
  background: var(--cream);
  border-radius: 4px;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.18),
    0 8px 18px -4px rgba(0, 0, 0, 0.32);
  transform: rotate(var(--rot, 0deg));
  transition: transform 380ms cubic-bezier(.34, 1.56, .64, 1);
}
.polaroid--share:hover {
  transform: rotate(0deg) translateY(-4px) scale(1.04);
}
.polaroid--share .polaroid__photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 2px;
}
.polaroid--share figcaption {
  font-family: var(--font-polaroid);
  font-weight: 550;
  font-size: 0.78rem;
  text-align: center;
  margin-top: 8px;
  color: var(--ink);
}

/* ============================================================
   SHARE / SUBMIT PHOTOS — guest photo upload form
   Mirrors the catering form pattern but without the bullet list;
   focuses on the upload + a few contact fields.
   ============================================================ */
.share-form-wrap {
  position: relative;
  background: var(--cream-2);
  border: 1px solid rgba(31, 22, 18, 0.18);
  border-radius: 18px;
  padding: clamp(20px, 4vw, 28px);
  margin: 16px auto 0;
  max-width: var(--col-max);
  text-align: left;
}
.share-form__heading { margin: 0 0 18px; }
.share-form__heading h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.4rem, 3vw, 1.7rem);
  text-transform: lowercase;
  margin: 0 0 6px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.share-form__heading p {
  font-size: 0.85rem;
  color: var(--ink-muted);
  margin: 0;
}
.share-thanks {
  background: #1f4d2a;
  color: #f5fff5;
  padding: 14px 18px;
  border-radius: 12px;
  font-size: 0.95rem;
  margin: 0 0 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.share-thanks strong { font-weight: 700; }

.share-error {
  background: var(--red, #E9423E);
  color: #fff;
  padding: 14px 18px;
  border-radius: 12px;
  font-size: 0.95rem;
  margin: 0 0 18px;
  border: 1px solid rgba(0, 0, 0, 0.08);
}
.share-error strong { font-weight: 700; }
.share-error a { color: #fff; text-decoration: underline; }

.share-form { display: grid; gap: 14px; }
.share-form[hidden] { display: none; }
.share-form__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 540px) {
  .share-form__row { grid-template-columns: 1fr 1fr; }
}
.share-form label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 600;
}
.share-form input[type="text"],
.share-form input[type="email"],
.share-form input[type="tel"],
.share-form textarea {
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  font-size: 0.95rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid rgba(31, 22, 18, 0.22);
  border-radius: 10px;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.share-form textarea {
  min-height: 96px;
  resize: vertical;
  font-family: var(--font-body);
}
.share-form input:focus,
.share-form textarea:focus {
  outline: none;
  border-color: var(--brown-mid);
  box-shadow: 0 0 0 3px rgba(74, 48, 34, 0.18);
}
.share-form input::placeholder,
.share-form textarea::placeholder {
  color: rgba(31, 22, 18, 0.38);
  font-style: italic;
}
.share-photo-input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}
.share-photo-picker {
  display: grid;
  gap: 10px;
}
.share-photo-dropzone {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  min-height: 112px;
  padding: 16px;
  background: #fff;
  border: 1px dashed rgba(74, 48, 34, 0.38);
  border-radius: 12px;
  cursor: pointer;
  transition:
    border-color var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease),
    background var(--t-fast) var(--ease);
}
.share-photo-dropzone:hover,
.share-photo-dropzone.is-dragover {
  background: #fffaf1;
  border-color: var(--brown-mid);
  box-shadow: 0 10px 24px rgba(31, 22, 18, 0.1);
  transform: translateY(-1px);
}
.share-photo-dropzone__mark {
  position: relative;
  inline-size: 42px;
  block-size: 42px;
  border-radius: 50%;
  background: var(--brown-mid);
  box-shadow: 0 4px 0 rgba(31, 22, 18, 0.16);
}
.share-photo-dropzone__mark::before,
.share-photo-dropzone__mark::after {
  content: '';
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
}
.share-photo-dropzone__mark::before {
  inline-size: 19px;
  block-size: 3px;
  border-radius: 999px;
}
.share-photo-dropzone__mark::after {
  inline-size: 3px;
  block-size: 19px;
  border-radius: 999px;
}
.share-photo-dropzone__copy {
  min-width: 0;
}
.share-photo-dropzone__copy strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.02rem;
  line-height: 1.05;
  color: var(--ink);
  text-transform: lowercase;
}
.share-photo-dropzone__copy span {
  display: block;
  margin-top: 4px;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--ink-muted);
}
.share-photo-add {
  grid-column: 1 / -1;
  justify-self: stretch;
  min-height: 42px;
  padding: 10px 14px;
  border: 0;
  border-radius: 8px;
  background: var(--ink);
  color: #fff;
  font: 800 0.82rem/1 var(--font-body);
  cursor: pointer;
  transition:
    background var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease);
}
.share-photo-add:hover {
  background: var(--brown-mid);
  transform: translateY(-1px);
}
.share-photo-add:focus-visible,
.share-photo-remove:focus-visible {
  outline: 3px solid rgba(255, 105, 0, 0.38);
  outline-offset: 2px;
}
.share-photo-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.76rem;
  color: var(--ink-muted);
}
.share-photo-error {
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(233, 66, 62, 0.1);
  border: 1px solid rgba(233, 66, 62, 0.34);
  color: var(--red);
  font-size: 0.78rem;
  font-weight: 700;
}
.share-photo-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.share-photo-item {
  position: relative;
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 10px;
  min-width: 0;
  padding: 8px;
  background: #fff;
  border: 1px solid rgba(31, 22, 18, 0.14);
  border-radius: 10px;
  box-shadow: 0 6px 14px rgba(31, 22, 18, 0.06);
}
.share-photo-thumb {
  position: relative;
  overflow: hidden;
  inline-size: 62px;
  aspect-ratio: 1;
  border-radius: 8px;
  background: #f3eadc;
  border: 1px solid rgba(31, 22, 18, 0.1);
}
.share-photo-thumb img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}
.share-photo-thumb__fallback {
  display: grid;
  place-items: center;
  inline-size: 100%;
  block-size: 100%;
  color: var(--brown-mid);
  font: 900 0.64rem/1 var(--font-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.share-photo-item__body {
  min-width: 0;
  padding-inline-end: 24px;
}
.share-photo-item__name {
  display: block;
  overflow: hidden;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.share-photo-item__meta {
  display: block;
  margin-top: 4px;
  color: var(--ink-muted);
  font-size: 0.7rem;
  line-height: 1.25;
}
.share-photo-remove {
  position: absolute;
  inset-block-start: 6px;
  inset-inline-end: 6px;
  display: grid;
  place-items: center;
  inline-size: 24px;
  block-size: 24px;
  border: 0;
  border-radius: 50%;
  background: rgba(31, 22, 18, 0.82);
  color: #fff;
  font: 900 1rem/1 var(--font-body);
  cursor: pointer;
  transition:
    background var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease);
}
.share-photo-remove:hover {
  background: var(--red);
  transform: scale(1.04);
}
@media (min-width: 620px) {
  .share-photo-dropzone {
    grid-template-columns: auto 1fr auto;
  }
  .share-photo-add {
    grid-column: auto;
    justify-self: end;
    min-width: 128px;
  }
}
.share-form__hint {
  font-size: 0.82rem;
  color: var(--ink-muted);
  margin: 6px 0 0;
}
.share-form__submit {
  margin-top: 4px;
}
.share-form__submit .btn {
  width: 100%;
  margin: 0;
}
.share-form__legal {
  font-size: 0.75rem;
  color: var(--ink-muted);
  margin: 4px 0 0;
  line-height: 1.4;
}
.share-form .hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.share-form.is-sending button[type="submit"] {
  opacity: 0.6;
  pointer-events: none;
}

/* ============================================================
   VISIT STRIP — info column + embedded Google Map + map badges
   Pattern adapted from sister project shirokuronyc.com
   ============================================================ */
.visit {
  background: var(--page-bg);
  color: var(--page-text);
  padding: clamp(4rem, 8vw, 6rem) 0;
  scroll-margin-top: 72px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  transition: background 380ms ease-out, color 380ms ease-out;
}
.visit__container {
  width: 100%;
  max-width: var(--col-max);
  margin: 0 auto;
  padding: 0 var(--col-pad);
  text-align: center;
}
.visit__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}
/* Single column always — keep the iPhone-width feel even on desktop */
.visit .display { margin-bottom: 24px; }

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--paper-muted);
  margin: 0 0 12px;
}

.visit__info { margin: 8px 0 24px; }
.visit__info dt {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--page-text);
  opacity: 0.72;
  margin-top: 18px;
}
.visit__info dt:first-child { margin-top: 0; }
.visit__info dd {
  margin: 6px 0 0;
  font-size: 1.05rem;
  line-height: 1.45;
  color: var(--page-text);
}
.visit__info dd a {
  color: var(--btn-text);
  border-bottom: 1px solid rgba(246, 220, 2, 0.4);
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.visit__info dd a:hover { color: #fff; border-bottom-color: #fff; }
.visit__info dd strong { color: var(--page-text); font-weight: 700; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
}

/* Map iframe + badges */
.map-link {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--brown-mid);
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.map-link iframe { width: 100%; height: 100%; display: block; filter: saturate(0.85) brightness(0.97); }
.map-link__badges {
  position: absolute;
  bottom: 12px;
  left: 12px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  z-index: 2;
}
.map-link__badge {
  background: var(--cream);
  color: var(--ink);
  padding: 7px 12px;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid var(--ink);
  white-space: nowrap;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.map-link__badge:hover {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
  transform: translateY(-1px);
}

/* ============================================================
   EDITORIAL FOOTER — closing brand mark, follow card, 4-col index
   ============================================================ */
.site-footer {
  position: relative;
  background: var(--page-bg);     /* blends with the selected palette */
  color: var(--page-text);        /* inherits theme text color */
  padding: clamp(1rem, 2vw, 1.4rem) var(--col-pad) clamp(0.6rem, 1.2vw, 1rem);
  border-top: 1px dashed var(--divider-strong);
}
.site-footer a { color: var(--page-text); }
.site-footer > * {
  max-width: var(--wide-max);
  margin-left: auto;
  margin-right: auto;
}

/* Closing brand mark + tagline */
.footer-hero {
  text-align: center;
  margin-bottom: clamp(0.6rem, 1.2vw, 1rem);
}
.footer-hero__brand {
  display: inline-block;
  line-height: 0;
  transition: transform .5s cubic-bezier(.22,1,.36,1);
}
.footer-hero__brand:hover { transform: rotate(-4deg); }
.footer-hero__brand img {
  width: clamp(140px, 16vw, 200px);
  height: auto;
  display: block;
}
.footer-hero__tagline {
  font-family: var(--font-script);
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1;
  color: var(--btn-text);
  margin: clamp(1rem, 2vw, 1.5rem) 0 0.4rem;
}
.footer-hero__sub {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--page-text-muted);
  margin: 0;
}

/* Hand-drawn divider rule */
.footer-rule {
  max-width: 760px;
  margin: clamp(0.5rem, 1vw, 0.8rem) auto;
  opacity: 0.35;
}
.footer-rule svg { width: 100%; height: 8px; display: block; }
.footer-rule path {
  fill: none;
  stroke: var(--page-text-muted);
  stroke-width: 1.4;
  stroke-linecap: round;
}

/* Prominent FOLLOW section */
.footer-follow {
  max-width: 720px;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  text-align: center;
}
.footer-follow__eyebrow {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--paper-muted);
  margin: 0 0 clamp(1rem, 2vw, 1.6rem);
}
.footer-follow__eyebrow em { font-style: italic; }
.footer-follow__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.follow-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.4rem);
  padding: clamp(1.2rem, 2.4vw, 1.8rem) clamp(1.4rem, 3vw, 2rem);
  background: var(--brown-deep);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  text-decoration: none;
  overflow: hidden;
  transition: border-color .35s ease, transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease;
}
.follow-card:hover {
  border-color: var(--btn-text);
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
}
.follow-card__icon {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: clamp(56px, 6vw, 72px);
  height: clamp(56px, 6vw, 72px);
  border-radius: 50%;
  color: #fff;
  transition: transform .35s ease, box-shadow .35s ease;
}
.follow-card__icon svg { width: 56%; height: 56%; }
.follow-card:hover .follow-card__icon {
  transform: rotate(-8deg) scale(1.06);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}
.follow-card--ig .follow-card__icon {
  background: radial-gradient(circle at 28% 105%, #fdc468 0%, #fa7e1e 18%, #d62976 42%, #962fbf 70%, #4f5bd5 100%);
}
.follow-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  text-align: left;
}
.follow-card__platform {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
  letter-spacing: -0.01em;
  color: var(--paper);
  text-transform: lowercase;
}
.follow-card__handle {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--paper-muted);
}
.follow-card__arrow {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 1.8rem;
  color: var(--paper-muted);
  transition: color .3s ease, transform .3s ease;
}
.follow-card:hover .follow-card__arrow {
  color: var(--btn-text);
  transform: translate(3px, -3px);
}

/* Large follow card variant — final eye-catcher near the bottom of the footer.
   Bigger padding, raised silhouette, IG gradient bleeds into the card border. */
.footer-follow--large { max-width: 720px; margin: clamp(20px, 4vw, 32px) 0 0; }

/* Compact variant — used after the iPhone mockup. Smaller text, tighter
   padding, no eyebrow, with breathing room above so the iPhone has space. */
.follow-card--compact {
  margin-top: clamp(28px, 5vw, 44px);            /* gap between iPhone and IG button */
  padding: clamp(0.85rem, 2vw, 1.15rem) clamp(1.1rem, 2.4vw, 1.5rem);
  gap: clamp(0.9rem, 2vw, 1.2rem);
}
.follow-card--compact .follow-card__icon {
  width: clamp(44px, 5vw, 56px);
  height: clamp(44px, 5vw, 56px);
}
.follow-card--compact .follow-card__body { gap: 2px; }
.follow-card--compact .follow-card__platform {
  font-size: clamp(1rem, 2vw, 1.2rem);
}
.follow-card--compact .follow-card__handle {
  font-size: 0.78rem;
}
.follow-card--compact .follow-card__arrow {
  font-size: 1.2rem;
}

.follow-card--xl {
  padding: clamp(1.6rem, 3vw, 2.4rem) clamp(1.6rem, 3vw, 2.4rem);
  border-radius: 22px;
  /* Dark brown — contrasts strongly with the orange page so the card pops
     instead of disappearing into the background. The IG gradient halo on
     ::after keeps the brand pop. */
  background: var(--brown-mid);
  gap: clamp(1.2rem, 2.4vw, 1.8rem);
  position: relative;
}
.follow-card--xl::after {
  /* Soft IG-gradient halo */
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, #fdc468 0%, #fa7e1e 22%, #d62976 50%, #962fbf 78%, #4f5bd5 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: 0.65;
  transition: opacity .35s ease;
}
.follow-card--xl:hover::after { opacity: 1; }
.follow-card--xl .follow-card__icon {
  width: clamp(72px, 8vw, 96px);
  height: clamp(72px, 8vw, 96px);
}
.follow-card--xl .follow-card__body { gap: 4px; }
.follow-card--xl .follow-card__eyebrow {
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--paper-muted);
}
.follow-card--xl .follow-card__platform {
  font-size: clamp(1.7rem, 3vw, 2.2rem);
}
.follow-card--xl .follow-card__handle {
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
}
.follow-card--xl .follow-card__arrow {
  font-size: clamp(2rem, 3.2vw, 2.6rem);
}

/* Practical index — 2 cols on narrow, 4 cols on wide (matches stampa-style footer width) */
.footer-index {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem 1.5rem;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  padding-top: clamp(0.5rem, 1vw, 1rem);
  text-align: center;
}
.footer-index__col { display: flex; flex-direction: column; align-items: center; }
.footer-index__list { align-items: center; justify-items: center; text-align: center; }
@media (min-width: 720px) {
  .footer-index--four { grid-template-columns: repeat(4, 1fr); gap: 1.5rem 2rem; }
}
.footer-index__heading {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--page-text);
  margin: 0 0 clamp(0.8rem, 1.5vw, 1.2rem);
}
.footer-index__line {
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--page-text);
  margin: 0 0 0.3rem;
}
.footer-index__line--hours {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.45em;
  white-space: nowrap;
}
.footer-index__line--hours [data-i18n="footer_hours_days"] { white-space: nowrap; }
.footer-index__line strong { color: var(--page-text); font-weight: 700; }
.footer-index__line a {
  color: var(--page-text);
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  opacity: 0.7;
  transition: color .25s ease, border-color .25s ease, opacity .25s ease;
}
.footer-index__line a:hover { color: var(--btn-text); border-bottom-color: var(--btn-text); opacity: 1; }
.footer-index__list {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: 0.5rem;
}
.footer-index__list a {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--page-text);
  transition: color .25s ease;
}
.footer-index__list a:hover { color: var(--btn-text); filter: brightness(1.15); }

/* Closing meta line */
.footer-meta {
  margin: clamp(1.5rem, 3vw, 2rem) auto 0;
  padding-top: clamp(1rem, 2vw, 1.4rem);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(0.65rem, 3vw, 1.5rem);
  flex-wrap: nowrap;
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--page-text);
  text-align: center;
}
@media (min-width: 720px) {
  .footer-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1.5rem;
    text-align: left;
  }
  .footer-meta__tagline { flex: 1; text-align: center; }
}
.footer-meta p { margin: 0; }
.footer-meta > p:first-child { white-space: nowrap; }
.footer-meta__tagline {
  font-family: var(--font-script);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--page-text);
}
.footer-meta__brand {
  /* Match the © Boka line on the left — same text color, same body font.
     Anthropic + OpenAI icons are inline SVGs; emojis carry the personality. */
  font-family: var(--font-body);
  color: var(--page-text);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-wrap: nowrap;
  justify-content: flex-end;
  white-space: nowrap;
}
.footer-meta__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: var(--paper-muted);
  transition: color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.footer-meta__icon:hover {
  color: var(--btn-text);
  transform: translateY(-1px);
}
.footer-meta__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.footer-meta__made-by { letter-spacing: 0.02em; }

/* ============================================================
   ENGAGEMENT TRACKER — CRT MONITOR + PEEKING CHICKEN
   A single front-facing chicken sits BEHIND a beige-bezel CRT
   monitor and rises higher with every rank-up. At the top tier
   ("Interactive Genius") the chicken's head clears the bezel and
   confetti shoots from its beak. Live readout (TIME + CLICKS +
   rank label) glows phosphor-yellow on the screen.
   ============================================================ */
.wuzhere {
  margin: clamp(0.4rem, 0.8vw, 0.6rem) auto 0;  /* zero bottom margin — panel
                                                   sits directly on the engage rule */
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Stage = absolute-positioning anchor for the chicken (peeking behind) plus
   the monitor (foreground). Top padding leaves room for the peek chicken to
   show above the bezel; reduced from 130px now that click 0 already starts
   the chicken at peek-rise: 90px (eyes visible) and click 10 caps at 120px. */
.wuzhere__monitor-stage {
  position: relative;
  display: inline-block;
  padding-top: 70px;
}

/* Peek chicken — positioned with --peek-rise (a px value above the bottom of
   the stage). Higher value = more chicken visible above the monitor's top.
   Below 130px (the monitor height + chicken bottom), the chicken sits behind
   the monitor. Above 130px, the head clears the bezel. */
.wuzhere__chicken-peek {
  position: absolute;
  bottom: var(--peek-rise, -10px);
  left: 50%;
  transform: translateX(-50%);
  width: clamp(90px, 13vw, 120px);
  height: auto;
  z-index: 0;
  pointer-events: none;
  transition: bottom 1400ms cubic-bezier(.34, 1.2, .64, 1);
}
.wuzhere__chicken-peek svg {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
  transform-origin: center bottom;
}

/* Click-driven rise — JS writes --peek-rise on .engage based on click count.
   Range is 90px (click 0 — eyes already peeking above the bezel) to 120px
   (click 10 — chicken at its highest, just shy of resting on the panel
   top). Compressed range so each click feels small but noticeable. The CSS
   default below is the no-JS fallback / pre-init value. */
.engage { --peek-rise: 90px; }

/* CRT monitor — beige plastic bezel + dark phosphor screen with scan lines. */
.wuzhere__monitor {
  position: relative;
  z-index: 1;
  display: inline-block;
}
.wuzhere__monitor-screen {
  position: relative;
  background:
    repeating-linear-gradient(0deg,
      rgba(255, 255, 255, 0.04) 0px, rgba(255, 255, 255, 0.04) 1px,
      transparent 1px, transparent 3px),
    radial-gradient(ellipse at center, #2a1c12 0%, #150b06 100%);
  border-radius: 14px;
  padding: 14px 18px;
  border: 5px solid #c5b482;
  box-shadow:
    inset 0 0 30px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 6px 18px rgba(0, 0, 0, 0.5);
  min-width: clamp(260px, 46vw, 340px);
}
/* Bezel highlight + bottom shadow for depth. */
.wuzhere__monitor-screen::before {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 14px;
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.18) 0%,
      transparent 30%,
      transparent 70%,
      rgba(0, 0, 0, 0.22) 100%);
  pointer-events: none;
  mix-blend-mode: overlay;
}
/* Monitor base — small trapezoidal stand below the bezel. */
.wuzhere__monitor-base {
  width: 50%;
  height: 12px;
  margin: 4px auto 0;
  background: linear-gradient(180deg, #c5b482 0%, #8a7553 100%);
  border-radius: 0 0 8px 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.35);
  clip-path: polygon(8% 0, 92% 0, 100% 100%, 0% 100%);
}

.engage__readout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  position: relative;
  z-index: 2;
}
.engage__stats {
  display: flex;
  align-items: center;
  gap: 10px;
}
.engage__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 56px;
}
.engage__stat-label {
  font-family: var(--font-body);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: rgba(246, 220, 2, 0.7);
  text-transform: uppercase;
}
.engage__stat-value {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 3vw, 1.45rem);
  line-height: 1;
  color: var(--btn-text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  text-shadow: 0 0 6px rgba(246, 220, 2, 0.45);
}
.engage__stat-divider {
  width: 1px;
  align-self: stretch;
  background: rgba(246, 220, 2, 0.25);
}
.engage__rank {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--btn-text);
  text-transform: uppercase;
  text-shadow: 0 0 6px rgba(246, 220, 2, 0.45);
  transition: color 320ms var(--ease);
  margin-top: 4px;
}
.engage__rank.is-rank-genius {
  color: #fff;
  text-shadow: 0 0 14px rgba(246, 220, 2, 0.85);
}
/* Hint — fades in only when a milestone has copy. Italic, dim phosphor;
   intentionally short and vague (never a give-away of a specific egg). */
.engage__hint {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.66rem;
  letter-spacing: 0.02em;
  color: rgba(246, 220, 2, 0.55);
  text-shadow: 0 0 4px rgba(246, 220, 2, 0.3);
  min-height: 1em;
  margin-top: 2px;
  opacity: 0;
  transition: opacity 480ms var(--ease);
  text-align: center;
  max-width: 240px;
}
.engage__hint.is-visible { opacity: 1; }
.engage__caption {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.92rem;
  color: var(--page-text-muted);
  margin: 0.3rem auto clamp(0.4rem, 0.8vw, 0.6rem);
  text-align: center;
  max-width: var(--wide-max);
}
/* Engage rule — the line the panel rests on. Tighter top margin so it hugs
   the bottom of the monitor base, and reduced bottom margin since the
   caption sits right below it. */
.footer-rule--engage {
  margin-top: 0;
  margin-bottom: 0;
  opacity: 0.5;
}

/* Click choreography — comb pulse, eye spin, blink. */
.wuzhere__chicken-peek .wuz-pupil {
  transform-origin: center;
  transform-box: fill-box;
}
.wuzhere--reacting #wz-red-head {
  animation: wuz-comb-pulse 240ms cubic-bezier(.4, 0, .2, 1);
  transform-origin: center;
  transform-box: fill-box;
}
/* Per-click hat shake — quick rotational wobble of the red comb on every
   counted click. Lighter than the full --reacting choreography (no eye
   spin / blink), so it can fire on each click without feeling spammy. */
.wuzhere--hat-shake #wz-red-head {
  animation: wuz-hat-shake 320ms ease-out;
  transform-origin: center bottom;
  transform-box: fill-box;
}
@keyframes wuz-hat-shake {
  0%   { transform: rotate(0deg); }
  20%  { transform: rotate(-9deg); }
  40%  { transform: rotate(7deg); }
  60%  { transform: rotate(-5deg); }
  80%  { transform: rotate(3deg); }
  100% { transform: rotate(0deg); }
}
.wuzhere--reacting .wuz-pupil {
  animation:
    wuz-eye-spin 600ms cubic-bezier(.6, .2, .2, 1),
    wuz-eye-blink 280ms ease-in-out 900ms;
}
.engage[data-rank="genius"]:not(.wuzhere--reacting) .wuz-pupil {
  animation: wuz-eye-spin 1200ms linear infinite;
}
@keyframes wuz-comb-pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}
@keyframes wuz-eye-spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes wuz-eye-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; }
}

/* Beak "talking" — open/close via vertical scale. JS toggles .is-talking. */
#wuz-chicken { --wuz-mouth-rate: 700ms; }
#wuz-chicken #wz-beak {
  transform-origin: top center;
  transform-box: fill-box;
}
#wuz-chicken.is-talking #wz-beak {
  animation: wuz-beak-talk var(--wuz-mouth-rate, 700ms) ease-in-out infinite;
}
@keyframes wuz-beak-talk {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(0.55); }
}

/* Confetti canvas — anchored inside the chicken-peek wrapper so it follows
   the chicken's rise. Sized to extend above the head with arc headroom. */
.engage__confetti {
  position: absolute;
  top: -180px;
  left: 50%;
  transform: translateX(-50%);
  width: 400px;
  height: 420px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 320ms var(--ease);
  z-index: 5;
}
.engage[data-rank="genius"] .engage__confetti { opacity: 1; }
.engage__confetti-fallback {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 28px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .wuzhere__chicken-peek { transition: none; }
  .engage[data-rank="genius"] .engage__confetti { display: none; }
  .engage[data-rank="genius"] .engage__confetti-fallback { opacity: 1; }
  .wuzhere--reacting .wuz-pupil { animation: wuz-eye-blink 280ms ease-in-out; }
  #wuz-chicken.is-talking #wz-beak { animation: none; transform: scaleY(1); }
}

/* -------------------- ORDER BUTTON CHICKEN EYES -------------------- */
#order-chicken { width: 100%; height: 100%; }
#order-chicken #eye-left,
#order-chicken #eye-right {
  transform-origin: center;
  will-change: transform;
}

/* -------------------- DESKTOP — keep the phone-width feel -------------------- */
@media (min-width: 720px) {
  :root { --section-pad: 112px; }
  .display { font-size: clamp(3.4rem, 9vw, 4.5rem); }   /* match base — 54-72px, thestampa BUILD scale */
  .hero__iphone { max-width: 320px; }
  /* Polaroids stay constrained to the same iPhone column on desktop */
}

/* -------------------- PHOTOBOMB CHICKENS (carousel) --------------------
   One chicken per data-food polaroid. 8 compass directions (N/NE/E/SE/S/SW/
   W/NW); each direction defines a start (off-frame) and end (anchored at the
   compass edge with ~50% visible) plus a rotation that points the chicken's
   head toward the photo center. Single parameterized keyframe; per-direction
   values come from CSS custom properties set by JS. */
.polaroid[data-food] {
  position: relative;
  cursor: pointer;
  isolation: isolate;
}
.polaroid[data-food] .polaroid__photo { position: relative; overflow: hidden; }
.photobomb-chicken {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
.photobomb-chicken svg {
  position: absolute;
  width: 55%;
  height: auto;
  left: 50%;
  top: 50%;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.28));
  transform-origin: center center;
  opacity: 0;
  /* Custom properties drive the parameterized entry/exit keyframe.
     JS sets them per direction before triggering the animation. */
  --start-x: 0%;
  --start-y: 0%;
  --start-rotate: 0deg;
  --end-x: 0%;
  --end-y: 0%;
  --end-rotate: 0deg;
  will-change: transform, opacity;
}
.photobomb-chicken[data-state="1"] svg,
.photobomb-chicken[data-state="2"] svg {
  animation: pb-enter 650ms cubic-bezier(.4, 0, .2, 1) forwards;
}
.photobomb-chicken[data-exiting] svg {
  animation: pb-exit 450ms cubic-bezier(.4, 0, .2, 1) forwards;
}

/* Single parameterized entry keyframe — translate is composed of a -50%/-50%
   centering offset plus the per-direction end offset, so percentages in JS are
   relative to the photo size with the chicken's geometric center at origin.
   Rotation is pre-applied at 0% and held constant — the chicken slides in
   already pointed at the photo (no spin during entry/exit). */
@keyframes pb-enter {
  0%   { opacity: 0; transform: translate(calc(-50% + var(--start-x)), calc(-50% + var(--start-y))) rotate(var(--end-rotate)); }
  100% { opacity: 1; transform: translate(calc(-50% + var(--end-x)), calc(-50% + var(--end-y))) rotate(var(--end-rotate)); }
}
@keyframes pb-exit {
  0%   { opacity: 1; transform: translate(calc(-50% + var(--end-x)), calc(-50% + var(--end-y))) rotate(var(--end-rotate)); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--start-x)), calc(-50% + var(--start-y))) rotate(var(--end-rotate)); }
}

/* Eye pupils — JS sets `transform` on these directly per frame during the
   gravity-roll loop, then CSS smooths look-around / crossed / exit glances. */
.photobomb-chicken .pb-eye {
  transition: transform 240ms cubic-bezier(.4, 0, .2, 1);
  transform-origin: center;
}
.photobomb-chicken[data-eye-state="asleep"] .pb-eye { transition: none; }
.photobomb-chicken[data-eye-state="mouse-track"] .pb-eye { transition: none; }
.photobomb-chicken.pb-blinking .pb-eye {
  transform: scaleY(.05) !important;
  transition: transform 100ms ease-in;
}

/* Caption swap — fades between food label and pun. JS toggles .pb-caption-fade
   on the figcaption to dip opacity during the swap. */
.polaroid[data-food] figcaption {
  transition: opacity 160ms ease-out;
}
.polaroid[data-food] figcaption.pb-caption-fade { opacity: 0; }

/* Reduced motion — chicken just appears/disappears, eyes stay center */
@media (prefers-reduced-motion: reduce) {
  .photobomb-chicken[data-state="1"] svg,
  .photobomb-chicken[data-state="2"] svg { animation: none; opacity: 1; transform: translate(-50%, -50%); }
  .photobomb-chicken[data-state="0"] svg { animation: none; opacity: 0; }
  .photobomb-chicken[data-exiting] svg { animation: none; opacity: 0; }
  .photobomb-chicken .pb-eye { transition: none; }
}

/* ==================== chicken-car ====================
   Layered character system in the Ready To Order section.
   Layer 1 (body): entrance from off-frame left, idle bounce, engine jitter.
   Layer 2 (eyes): all 5 pupils track cursor; staggered blinks.
   Layer 3 (mouth): CALM/TALKING/MAD state machine on left chicken.
   Layer 4 (hover/click): tilt, jiggle, grill flash, BEEP bubble. */

.chicken-car {
  position: relative;
  display: block;
  width: clamp(94px, 31vw, 144px);
  margin: 2.5rem auto 2rem;
  overflow: visible;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  /* Scroll-driven scale only — wobble removed per user request. JS writes
     --cc-scroll-scale (continuous from MIN→MAX based on section progress)
     and the wrapper applies it directly. Smooth 80ms transition keeps
     trackpad scrolls from feeling chunky. */
  transform-origin: center;
  transform: scale(var(--cc-scroll-scale, 1));
  transition: transform 80ms linear;
}
.chicken-car__stage {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 792 / 612;
  transform-origin: 50% 60%;
  will-change: transform;
}
.chicken-car__stage .chicken-loader {
  position: absolute;
  inset: 0;
  align-content: center;
  justify-content: center;
  --loader-size: 58px;
  z-index: 1;
}
.chicken-car.cc-svg-ready .chicken-loader,
.chicken-car.cc-svg-fallback .chicken-loader {
  opacity: 0;
  visibility: hidden;
}
.chicken-car__svg,
.chicken-car__fallback {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: 50% 60%;
  will-change: transform;
}
.chicken-car__shadow {
  position: absolute;
  left: 50%;
  bottom: -3%;
  width: 78%;
  height: 9%;
  border-radius: 999px;
  background: rgba(41, 24, 17, .2);
  filter: blur(3px);
  transform: translateX(-50%) scaleX(.92);
  transform-origin: center;
  pointer-events: none;
  opacity: .78;
  animation: cc-shadow-breathe 1700ms ease-in-out infinite alternate;
}
.chicken-car.cc-idle .chicken-car__stage {
  /* Idle bounce runs on the stage so scroll scale stays on the wrapper. */
  animation: cc-idle-bounce 1700ms ease-in-out infinite alternate;
  opacity: 1;
}
.chicken-car.cc-idle .chicken-car__svg,
.chicken-car.cc-idle .chicken-car__fallback {
  /* Engine jitter lives one layer deeper so it can stack with the body bob. */
  animation: cc-engine-jitter 95ms steps(2, end) infinite;
  opacity: 1;
}
.chicken-car.cc-driving .chicken-car__stage {
  animation-duration: 720ms;
}
.chicken-car.cc-driving .chicken-car__shadow,
.chicken-car.cc-honk .chicken-car__shadow {
  opacity: .92;
  transform: translateX(-50%) scaleX(1.08);
}

/* Hover: subtle tilt + scale; only on hover-capable input. The wobble
   keyframe is paused on hover so the static hover transform composes
   cleanly with the scroll scale. */
@media (hover: hover) and (pointer: fine) {
  .chicken-car:hover .chicken-car__stage {
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .18));
  }
  .chicken-car:hover {
    /* No rotate on hover — David wants the engine shake (cc-engine-jitter
       on the inner SVG) to play without an additional tilt being added. */
    transform: scale(calc(var(--cc-scroll-scale, 1) * 1.02));
  }
}

[data-bg="black"][data-theme="dark"] .chicken-car__svg,
[data-bg="black"][data-theme="dark"] .chicken-car__fallback {
  filter:
    drop-shadow(0 0 7px rgba(255, 248, 200, 0.62))
    drop-shadow(0 0 18px rgba(249, 237, 50, 0.42))
    drop-shadow(0 0 34px rgba(255, 220, 100, 0.20));
}
[data-bg="black"][data-theme="dark"] .chicken-car__shadow {
  background: rgba(255, 248, 200, 0.22);
  filter: blur(6px);
  opacity: 0.9;
}
@media (hover: hover) and (pointer: fine) {
  [data-bg="black"][data-theme="dark"] .chicken-car:hover .chicken-car__svg,
  [data-bg="black"][data-theme="dark"] .chicken-car:hover .chicken-car__fallback {
    filter:
      drop-shadow(0 0 8px rgba(255, 248, 200, 0.64))
      drop-shadow(0 0 20px rgba(249, 237, 50, 0.46))
      drop-shadow(0 0 36px rgba(255, 248, 200, 0.20));
  }
}

/* Click jiggle — JS toggles .cc-jiggle class for 200ms. */
.chicken-car.cc-jiggle .chicken-car__stage {
  animation: cc-click-jiggle 200ms ease-in-out 1;
}

/* Mad mode — body trembles harder; JS adds .cc-mad. */
.chicken-car.cc-mad .chicken-car__stage {
  animation: cc-mad-tremble 80ms steps(2, end) infinite;
}

/* Honk — grill mouth flashes opacity 0.5 -> 1 twice over ~250ms */
.chicken-car.cc-honk #cc-car-mouth {
  animation: cc-honk 250ms ease-in-out 1;
}

/* Grill smile — continuous ±6° tilt, like the smile is breathing.
   transform-box: fill-box anchors the rotation around the grill's local
   bounding box rather than the SVG origin. The cc-honk one-shot above
   briefly overrides this when triggered, then the wiggle resumes. */
#cc-car-mouth {
  transform-box: fill-box;
  transform-origin: center;
  animation: cc-grill-wiggle 2s ease-in-out infinite;
  will-change: transform;
}
@keyframes cc-grill-wiggle {
  0%   { transform: rotate(-6deg); }
  50%  { transform: rotate(6deg); }
  100% { transform: rotate(-6deg); }
}

#cc-car-emblem,
.cc-chicken-passenger,
.cc-chicken-comb,
.cc-chicken-beak,
.cc-car-mirror,
.cc-car-wheels,
#cc-car-body-middle {
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform;
}
#cc-car-emblem {
  animation: cc-emblem-cruise 2100ms ease-in-out infinite;
}
.chicken-car.cc-honk #cc-car-emblem,
.chicken-car:hover #cc-car-emblem {
  animation: cc-emblem-pop 620ms cubic-bezier(.34, 1.56, .64, 1) 1;
}
.cc-chicken-passenger {
  animation: cc-passenger-bop 960ms ease-in-out infinite;
}
#cc-chicken-right-passenger {
  animation-delay: -420ms;
}
.chicken-car.cc-driving .cc-chicken-passenger {
  animation-duration: 620ms;
}
.cc-chicken-comb {
  transform-origin: 50% 80%;
  animation: cc-comb-cruise 780ms ease-in-out infinite;
}
#cc-chicken-right-head-red {
  animation-delay: -230ms;
}
.cc-chicken-beak {
  transform-origin: 50% 20%;
}
.chicken-car[data-emotion="talking"] .cc-chicken-beak,
.chicken-car.cc-driving .cc-chicken-beak {
  animation: cc-beak-peep 420ms steps(2, end) infinite;
}
.cc-car-mirror {
  transform-origin: 50% 50%;
  animation: cc-mirror-wiggle 1250ms ease-in-out infinite;
}
#cc-car-right-mirror {
  animation-delay: -510ms;
}
.cc-car-wheels {
  transform-origin: 50% 100%;
  animation: cc-wheel-squish 380ms ease-in-out infinite;
}
#cc-car-body-middle {
  transform-origin: 50% 68%;
  animation: cc-hood-breathe 1500ms ease-in-out infinite alternate;
}
.chicken-car.cc-honk #cc-car-body-middle {
  animation: cc-body-honk 360ms cubic-bezier(.34, 1.56, .64, 1) 1;
}

/* Mouth states. Same 2-phase cycle as the AYCE chicken (#ayce-chicken):
   keyframes flip closed/open every half-period. JS toggles
   data-emotion=talking|mad to start the cycle and sets --cc-mouth-rate. */
.chicken-car { --cc-mouth-rate: 350ms; }
.chicken-car #cc-chicken-left-mouth-closed { opacity: 1; }
.chicken-car #cc-chicken-left-mouth-lower,
.chicken-car #cc-chicken-left-mouth-upper { opacity: 0; }

.chicken-car[data-emotion="talking"] #cc-chicken-left-mouth-closed,
.chicken-car[data-emotion="mad"]     #cc-chicken-left-mouth-closed {
  animation: cc-mouth-close var(--cc-mouth-rate, 350ms) steps(1, end) infinite;
}
.chicken-car[data-emotion="talking"] #cc-chicken-left-mouth-lower,
.chicken-car[data-emotion="talking"] #cc-chicken-left-mouth-upper,
.chicken-car[data-emotion="mad"]     #cc-chicken-left-mouth-lower,
.chicken-car[data-emotion="mad"]     #cc-chicken-left-mouth-upper {
  animation: cc-mouth-open var(--cc-mouth-rate, 350ms) steps(1, end) infinite;
}
@keyframes cc-mouth-close { 0%,49.99%{opacity:1} 50%,100%{opacity:0} }
@keyframes cc-mouth-open  { 0%,49.99%{opacity:0} 50%,100%{opacity:1} }

/* Mad: both combs pulse + red glow filter. SVG transform-origin via CSS. */
.chicken-car[data-emotion="mad"] .cc-chicken-comb {
  transform-origin: 50% 50%;
  animation: cc-comb-pulse 200ms ease-in-out infinite;
  filter: drop-shadow(0 0 3px rgba(233, 66, 62, .65));
}

/* Pupil cursor tracking — JS sets per-pupil --cc-tx / --cc-ty in SVG units.
   transform-box: fill-box ensures translate is in shape-local coords. */
.cc-pupil {
  transform-box: fill-box;
  transform-origin: center;
  transform: translate(var(--cc-tx, 0px), var(--cc-ty, 0px));
  transition: transform 60ms linear, opacity 100ms ease-in;
}
.chicken-car .cc-pupil[data-blinking="1"] { opacity: 0; }

/* BEEP! bubble — fixed pixel size and absolute positioning above the car. */
.chicken-car__beep {
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translate(-50%, -100%) scale(.85);
  background: var(--c-yellow, #f9ed32);
  color: var(--c-black, #111);
  font-family: inherit;
  font-weight: 800;
  font-size: 0.6rem;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: 9px;
  border: 1.5px solid var(--c-black, #111);
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms ease-out, transform 200ms cubic-bezier(.34, 1.56, .64, 1);
  white-space: nowrap;
}
.chicken-car__beep::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--c-black, #111);
}
.chicken-car.cc-honk .chicken-car__beep {
  opacity: 1;
  transform: translate(-50%, -100%) scale(1);
}

/* Keyframes */
@keyframes cc-idle-bounce {
  0% { transform: translateY(0) rotate(calc(var(--cc-drive-lean, 0deg) - .35deg)); }
  100% { transform: translateY(-2px) rotate(calc(var(--cc-drive-lean, 0deg) + .35deg)); }
}
@keyframes cc-engine-jitter {
  0% { transform: translate(0, 0); }
  100% { transform: translate(.5px, 0); }
}
@keyframes cc-mad-tremble {
  0% { transform: translate(-1.5px, 0) rotate(-1.2deg); }
  50% { transform: translate(1.5px, 0) rotate(1.2deg); }
  100% { transform: translate(-1.5px, 0) rotate(-1.2deg); }
}
@keyframes cc-click-jiggle {
  0% { transform: translateX(-3px) rotate(-2deg) scaleX(1.03); }
  25% { transform: translateX(3px) rotate(2deg) scaleY(.98); }
  50% { transform: translateX(-2px) rotate(-1deg) scaleX(1.02); }
  75% { transform: translateX(2px) rotate(1deg); }
  100% { transform: translateX(0) rotate(var(--cc-drive-lean, 0deg)); }
}
@keyframes cc-honk {
  0% { opacity: .5; }
  20% { opacity: 1; }
  50% { opacity: .5; }
  80% { opacity: 1; }
  100% { opacity: 1; }
}
@keyframes cc-shadow-breathe {
  0% { transform: translateX(-50%) scaleX(.88); opacity: .68; }
  100% { transform: translateX(-50%) scaleX(1.04); opacity: .86; }
}
@keyframes cc-emblem-cruise {
  0%, 100% { transform: rotate(-5deg) scale(1); }
  50% { transform: rotate(5deg) scale(1.08); }
}
@keyframes cc-emblem-pop {
  0% { transform: rotate(-10deg) scale(.96); }
  45% { transform: rotate(14deg) scale(1.28); }
  72% { transform: rotate(-6deg) scale(1.08); }
  100% { transform: rotate(0) scale(1); }
}
@keyframes cc-passenger-bop {
  0%, 100% { transform: translateY(0) rotate(-.7deg); }
  50% { transform: translateY(-3px) rotate(.9deg); }
}
@keyframes cc-comb-cruise {
  0%, 100% { transform: rotate(-4deg) scaleY(1); }
  48% { transform: rotate(5deg) scaleY(1.08); }
}
@keyframes cc-beak-peep {
  0%, 49.99% { transform: rotate(0) scaleY(1); }
  50%, 100% { transform: rotate(8deg) scaleY(1.18); }
}
@keyframes cc-mirror-wiggle {
  0%, 100% { transform: rotate(-3deg) translateY(0); }
  50% { transform: rotate(4deg) translateY(-1px); }
}
@keyframes cc-wheel-squish {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(.96); }
}
@keyframes cc-hood-breathe {
  0% { transform: scaleY(1); }
  100% { transform: scaleY(1.01); }
}
@keyframes cc-body-honk {
  0% { transform: scaleX(1) scaleY(1); }
  45% { transform: scaleX(1.035) scaleY(.98); }
  100% { transform: scaleX(1) scaleY(1); }
}
@keyframes cc-comb-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* Reduced-motion: lock the wrapper scale to 1, kill wobble + grill wiggle. */
@media (prefers-reduced-motion: reduce) {
  .chicken-car {
    --cc-scroll-scale: 1;
    --cc-scroll-wobble-amp: 0px;
    animation: none;
    transform: none;
    transition: none;
  }
  #cc-car-mouth {
    animation: none !important;
    transform: none !important;
  }
}

/* Reduced motion — static car, but cursor tracking pupils still work. */
@media (prefers-reduced-motion: reduce) {
  .chicken-car__stage,
  .chicken-car__svg,
  .chicken-car__fallback,
  .chicken-car.cc-active .chicken-car__svg,
  .chicken-car.cc-active.cc-idle .chicken-car__svg,
  .chicken-car.cc-jiggle .chicken-car__svg,
  .chicken-car.cc-mad .chicken-car__svg,
  #cc-car-emblem,
  .cc-chicken-passenger,
  .cc-chicken-comb,
  .cc-chicken-beak,
  .cc-car-mirror,
  .cc-car-wheels,
  #cc-car-body-middle {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .chicken-car .cc-chicken-comb {
    animation: none !important;
    filter: none !important;
  }
  .chicken-car #cc-chicken-left-mouth-closed { opacity: 1 !important; }
  .chicken-car #cc-chicken-left-mouth-lower,
  .chicken-car #cc-chicken-left-mouth-upper { opacity: 0 !important; }
  .chicken-car .cc-pupil { transition: transform 0ms linear; }
  .chicken-car__shadow,
  .chicken-car__beep { display: none; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}