/* ═══════════════════════════════════════════════════════════════════════════
   SEASONED BY P — site.css
   Seasoned by P's visual system (color, type, texture, ornament) applied to
   the Amazing Grace home-page structure and JS contract.

   Contents
     01  Fonts (self-hosted — no external font CDN, the CSP forbids it)
     02  Tokens
     03  Reset + base
     04  Accessibility primitives
     05  Textures + ornaments
     06  Buttons
     07  Section furniture (label / title / script / rule)
     08  Page chrome (loader, scroll progress, nav, back-to-top, float button)
     09  Hero
     10  Trust strip
     11  Ways to order
     12  Gallery
     13  Order section  (incl. everything order.js / bulk-packs.js generate)
     14  Menu strip
     15  Catering
     16  Testimonials
     17  Photo wall
     18  About
     19  Find us
     20  Footer
     21  Lightbox
     22  Motion (reveal / stagger / keyframes)
     23  Responsive
     24  prefers-reduced-motion

   Sections 01-24 are the home page. 25-38 were added for the twelve inner
   pages; see the banner above section 25 for the light-first / dark-band
   convention they follow.

     25  Inner-page shell (extra tokens, section padding, .subnote, .section-alt)
     26  Dish cards          (menu.html .mi-* · calendar.html .mr-* · .addon-list)
     27  Pickup directions   (.pk-*)
     28  Request forms       (.cat-form family — catering.html + contact.html)
     29  Contact cards       (.contact-grid / .contact-card)
     30  Catering presets    (.cat-preset-*)
     31  Calendar day grid   (.day-*)
     32  FAQ accordion       (.faq-group / details.faq)
     33  Dark-band overrides for 26-32
     34  Legal prose         (.legal-body / .updated / .back)
     35  Confirmation pages  (success.html + cancel.html)
     36  404
     37  Manage — back of house (.mg-* · print ticket)
     38  prefers-reduced-motion for 25-37
   ═══════════════════════════════════════════════════════════════════════════ */


/* ══ 01 · FONTS ═══════════════════════════════════════════════════════════
   Self-hosted from /fonts/. The stylesheet only has Regular + SemiBold for
   the text faces, so Cormorant's light (300) maps to Regular and its italics
   are synthesised by the browser. Every stack carries real fallbacks so the
   page is legible before (or without) the woff2 files.                      */

@font-face {
  font-family: 'Great Vibes';
  src: url('/fonts/GreatVibes-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('/fonts/CormorantGaramond-Regular.woff2') format('woff2');
  font-weight: 300 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('/fonts/CormorantGaramond-SemiBold.woff2') format('woff2');
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/Montserrat-Regular.woff2') format('woff2');
  font-weight: 300 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/Montserrat-SemiBold.woff2') format('woff2');
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}


/* ══ 02 · TOKENS ══════════════════════════════════════════════════════════ */

:root {
  /* Darks — warm-shifted, never flat black, never a cool gray */
  --espresso:      #0C0600;
  --deep-brown:    #0C0600;
  --leather:       #111008;
  --leather-raw:   #0e0b06;
  --rich-brown:    #1A0F00;
  --footer-black:  #060300;
  --card-void:     #1a1200;

  /* Metals */
  --copper:        #B87333;
  /* Copper only reaches 3.6:1 on the light creams, which fails AA for the
     0.58-0.6rem uppercase labels the brand sets in it. --copper-ink is the
     same hue darkened to clear 5:1; it is used for SMALL TEXT ON LIGHT only.
     Rules, ornaments, icons and hover states keep the real --copper. */
  --copper-ink:    #9A5E24;
  --gold:          #C49830;
  --gold-light:    #D4A853;
  --gold-bright:   #FFE49A;
  --gold-deep:     #8B5E1A;
  --rust:          #8B4513;

  /* Lights */
  --cream:         #FAF6EE;
  --warm-white:    #FFF8F0;
  --on-dark:       #F3ECD8;
  --on-dark-soft:  rgba(243,236,216,0.62);
  --on-dark-faint: rgba(243,236,216,0.40);

  /* Supporting */
  --sage:          #5C6B4F;
  --sage-deep:     #48553E;
  --charcoal:      #2C2C2C;
  --text-muted:    #7A6A5A;

  /* Status */
  --spicy:         #FF6B35;
  --dairy:         #B8D4E8;
  --seafood:       #7EC8C8;
  --veg:           #90C67C;
  --stars:         #FFD700;
  --error:         #C0492B;

  /* Lines */
  --border:          rgba(196,152,48,0.22);
  --border-faint:    rgba(196,152,48,0.12);
  --border-hairline: rgba(196,152,48,0.10);
  --border-strong:   rgba(196,152,48,0.45);
  --border-cream:    rgba(243,236,216,0.30);

  /* Type */
  --font-script: 'Great Vibes', 'Segoe Script', 'Brush Script MT', cursive;
  --font-serif:  'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-sans:   'Montserrat', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* Space */
  --page-pad:    4rem;
  --section-gap: 7rem;
  --content-max: 1180px;

  /* Radius — 2px on controls, 4px on panels. CTAs are never pill-shaped. */
  --radius:      2px;
  --radius-card: 4px;
  --radius-tag:  12px;
}

@media (max-width: 960px) {
  :root { --page-pad: 1.5rem; --section-gap: 5rem; }
}
@media (max-width: 520px) {
  :root { --page-pad: 1.15rem; --section-gap: 4rem; }
}


/* ══ 03 · RESET + BASE ════════════════════════════════════════════════════ */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  background: var(--cream);
  color: var(--deep-brown);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; }
img { display: block; height: auto; }

a { color: inherit; }

button, input, select, textarea { font: inherit; color: inherit; }

/* The `hidden` attribute is part of the order.js contract. This keeps any
   later display: rule from resurrecting a panel that must stay closed. */
[hidden] { display: none !important; }

.section-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  width: 100%;
}


/* ══ 04 · ACCESSIBILITY PRIMITIVES ════════════════════════════════════════ */

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: -100px;
  left: 1rem;
  z-index: 100000;
  background: var(--gold-light);
  color: var(--deep-brown);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.8rem 1.4rem;
  border-radius: var(--radius);
  transition: top 0.2s ease;
}
.skip-link:focus { top: 1rem; }

:focus-visible {
  outline: 2px solid var(--gold-light);
  outline-offset: 3px;
  border-radius: 1px;
}
/* On dark bands the gold ring can sit on gold — add a dark halo. */
.leather-bg :focus-visible,
.menu-strip :focus-visible,
.catering :focus-visible,
footer :focus-visible,
.lightbox :focus-visible {
  outline-color: var(--gold-bright);
  box-shadow: 0 0 0 5px rgba(12,6,0,0.75);
}


/* ══ 05 · TEXTURES + ORNAMENTS ════════════════════════════════════════════ */

/* Leather: desaturated fractal noise + a 135° hairline weave. Dark bands. */
.leather-bg {
  position: relative;
  background-color: var(--leather-raw);
  overflow: hidden;
}
.leather-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)' opacity='0.09'/%3E%3C/svg%3E"),
    repeating-linear-gradient(135deg,
      rgba(255,255,255,0.012) 0px,
      rgba(255,255,255,0.012) 1px,
      transparent 1px,
      transparent 8px);
  pointer-events: none;
  z-index: 0;
}
.leather-bg > * { position: relative; z-index: 1; }

/* Grain: a whisper of noise for light bands. Uses ::after so a node can carry
   both textures if it ever needs to. */
.grain { position: relative; overflow: hidden; }
.grain::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}
.grain > * { position: relative; z-index: 1; }

/* Ornament row — dot · line · diamond · line · dot. A diamond is always a
   rotated square, never a glyph. */
.logo-orn-top {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; margin-bottom: 1.4rem;
}
.logo-orn-line { flex: 1; max-width: 90px; height: 1px; background: rgba(196,152,48,0.55); }
.logo-orn-diamond { width: 8px; height: 8px; background: var(--gold); transform: rotate(45deg); }
.logo-orn-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--gold); opacity: 0.6; }

.orn-row { display: flex; align-items: center; justify-content: center; gap: 10px; }
.orn-line { flex: 1; max-width: 70px; height: 1px; background: rgba(196,152,48,0.5); }
.orn-diamond { width: 6px; height: 6px; background: var(--gold); transform: rotate(45deg); }
.orn-row-sm .orn-line { max-width: 60px; background: rgba(196,152,48,0.32); }
.orn-row-sm .orn-diamond { width: 5px; height: 5px; opacity: 0.55; }


/* ══ 06 · BUTTONS ═════════════════════════════════════════════════════════ */

.btn {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0.85rem 2rem;
  border-radius: var(--radius);
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  border: 1px solid transparent;
  transition: background 0.3s, color 0.3s, border-color 0.3s, transform 0.3s;
  will-change: transform;
}

.btn-primary {
  background: var(--gold-light);
  color: var(--deep-brown);
  font-weight: 600;
}
.btn-primary:hover,
.btn-primary:focus-visible {
  background: var(--copper);
  color: #fff;
  transform: translateY(-2px);
}

.btn-outline {
  background: transparent;
  color: var(--on-dark);
  font-weight: 500;
  border-color: var(--border-cream);
}
.btn-outline:hover,
.btn-outline:focus-visible {
  border-color: var(--gold-light);
  color: var(--gold-light);
  transform: translateY(-2px);
}
/* On light bands an outline button needs a dark ink. */
.grain .btn-outline,
.order-section .btn-outline {
  color: var(--deep-brown);
  border-color: var(--border);
}
.grain .btn-outline:hover,
.order-section .btn-outline:hover {
  color: var(--rust);
  border-color: var(--copper);
}

/* Click ripple, spawned by home.js */
.btn-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.22);
  transform: scale(0);
  pointer-events: none;
  animation: rippleOut 0.55s ease-out forwards;
}


/* ══ 07 · SECTION FURNITURE ═══════════════════════════════════════════════ */

.section-label {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--copper-ink);
  margin-bottom: 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.section-label::after {
  content: '';
  flex: 1; max-width: 52px; height: 1px;
  background: currentColor;
  opacity: 0.5;
}
/* Dark bands flip the label to gold. */
.leather-bg .section-label,
.menu-strip .section-label { color: var(--gold-light); }
.catering .section-label { color: rgba(243,236,216,0.85); }

.section-label-center { justify-content: center; }
.section-label-center::before {
  content: '';
  flex: 1; max-width: 52px; height: 1px;
  background: currentColor;
  opacity: 0.5;
}

.section-title {
  font-family: var(--font-serif);
  font-size: clamp(1.9rem, 3.8vw, 3rem);
  font-weight: 400;
  line-height: 1.15;
  color: var(--deep-brown);
  letter-spacing: 0.005em;
}
/* An em inside a title is a colour swap, not just a slant. */
.section-title em { font-style: italic; color: var(--rust); }
.leather-bg .section-title,
.menu-strip .section-title,
.catering .section-title { color: var(--on-dark); }
.leather-bg .section-title em,
.menu-strip .section-title em,
.catering .section-title em { color: var(--gold-light); }

/* 1.5rem (24px) is deliberate: it puts the script line into the WCAG
   "large text" bracket, where copper-on-cream clears the 3:1 threshold. */
.section-script {
  font-family: var(--font-script);
  font-size: 1.5rem;
  color: var(--copper);
  margin-top: 0.5rem;
  line-height: 1.2;
}
.leather-bg .section-script,
.menu-strip .section-script { color: var(--gold-light); }

.section-lede {
  font-family: var(--font-serif);
  font-size: 1.08rem;
  font-style: italic;
  line-height: 1.85;
  color: var(--text-muted);
  max-width: 46ch;
  margin-top: 1rem;
}
.leather-bg .section-lede,
.menu-strip .section-lede,
.catering .section-lede { color: var(--on-dark-soft); }
.leather-bg .section-lede strong,
.menu-strip .section-lede strong { color: var(--gold-light); font-weight: 400; }

.rule {
  display: flex; align-items: center; gap: 0.8rem;
  margin-top: 1.1rem;
}
.rule-line { flex: 0 1 64px; height: 1px; background: var(--gold); opacity: 0.45; }
.rule-diamond { width: 6px; height: 6px; background: var(--gold); transform: rotate(45deg); opacity: 0.75; }

.section-head { margin-bottom: 2.6rem; }
.section-head-center { text-align: center; }
.section-head-center .rule { justify-content: center; }
.section-head-center .section-lede { margin-left: auto; margin-right: auto; }


/* ══ 08 · PAGE CHROME ═════════════════════════════════════════════════════ */

/* ── Loader ── */
#page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--espresso);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}
#page-loader.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-logo { display: flex; flex-direction: column; align-items: center; }
.loader-hat { animation: loaderPulse 1.2s ease-in-out infinite; }
.loader-word {
  font-family: var(--font-script);
  color: var(--on-dark);
  line-height: 1.05;
  opacity: 0;
  transform: translateY(12px);
  animation: loaderWordIn 0.5s ease forwards;
}
.loader-word.w1 { font-size: 3.2rem; animation-delay: 0.1s; }
.loader-word.w2 { font-size: 2rem;   animation-delay: 0.4s; }
.loader-word.w3 { font-size: 4.2rem; animation-delay: 0.7s; }
.loader-bar-wrap {
  width: 160px; height: 2px;
  background: rgba(196,152,48,0.2);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 0.5rem;
}
.loader-bar {
  height: 100%;
  background: var(--gold-light);
  border-radius: 2px;
  animation: loaderBarFill 1.4s ease forwards;
}
.loader-tagline {
  font-family: var(--font-sans);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: rgba(196,152,48,0.85);
  opacity: 0;
  animation: loaderWordIn 0.5s 1s ease forwards;
}

/* ── Scroll progress ──
   width stays 0% here; home.js switches it to 100% + scaleX() so the rAF
   drives a GPU transform instead of a layout width. No transition on
   purpose — the rAF supplies the smoothness. */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(to right, #8B5E1A, #C49830, #D4A853, #FFE49A, #D4A853, #C49830, #B87333);
  background-size: 200% 100%;
  z-index: 999999;
  box-shadow: 0 0 12px rgba(212,168,83,0.8), 0 0 4px rgba(196,152,48,0.6);
  pointer-events: none;
  transform-origin: left center;
  will-change: transform;
}

/* ── Nav ── */
nav#nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  background: rgba(10,6,0,0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(196,152,48,0.2);
  transition: padding 0.3s ease;
  padding: 0.85rem var(--page-pad);
}
nav#nav.scrolled { padding-top: 0.6rem; padding-bottom: 0.6rem; }

.nav-inner {
  max-width: 1320px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.nav-logo { text-decoration: none; line-height: 1; flex-shrink: 0; }
.nav-logo-text {
  display: inline-block;
  font-family: var(--font-script);
  font-size: 1.75rem;
  line-height: 1;
  color: var(--on-dark);
  background: linear-gradient(105deg,
    #F3ECD8 0%, #F3ECD8 38%, #FFE49A 45%, #D4A853 50%,
    #FFE49A 55%, #F3ECD8 62%, #F3ECD8 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: navShimmer 4s ease-in-out infinite;
}

.nav-links {
  display: flex;
  gap: 2rem;
  list-style: none;
}
.nav-links a {
  position: relative;
  display: inline-block;
  padding-bottom: 2px;
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(243,236,216,0.68);
  text-decoration: none;
  transition: color 0.3s;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0;
  width: 0%; height: 1.5px;
  background: var(--gold-light);
  transition: width 0.3s ease;
}
.nav-links a:hover { color: var(--gold-light); }
.nav-links a:hover::after { width: 100%; }
.nav-links a.nav-active { color: var(--gold-light); }
.nav-links a.nav-active::after { width: 100%; }

.nav-right { display: flex; align-items: center; gap: 1rem; }

.nav-cta {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--deep-brown);
  background: var(--gold-light);
  padding: 0.5rem 1.2rem;
  border-radius: var(--radius);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.3s, color 0.3s;
}
.nav-cta:hover { background: var(--copper); color: #fff; }

/* Hamburger — three cream bars that morph to an X */
.mobile-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 6px 4px;
}
.mobile-toggle span {
  display: block;
  width: 22px; height: 1.5px;
  background: var(--on-dark);
  transition: transform 0.3s, opacity 0.3s;
}
.mobile-toggle.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.mobile-toggle.open span:nth-child(2) { opacity: 0; }
.mobile-toggle.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ── Back to top ── */
#back-to-top {
  position: fixed;
  bottom: 5.6rem; right: 2rem;
  z-index: 140;
  width: 44px; height: 44px;
  background: rgba(12,6,0,0.92);
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: opacity 0.35s, transform 0.35s, background 0.25s, border-color 0.25s;
}
#back-to-top.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
#back-to-top:hover { background: var(--gold-light); border-color: var(--gold-light); }
#back-to-top svg { width: 18px; height: 18px; }
#back-to-top svg path { stroke: var(--gold); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.25s; }
#back-to-top:hover svg path { stroke: var(--deep-brown); }

/* ── Floating message button ── */
.float-btn {
  position: fixed;
  bottom: 2rem; right: 2rem;
  z-index: 150;
  background: var(--gold-light);
  color: var(--deep-brown);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.8rem 1.3rem;
  border-radius: 30px;
  display: flex; align-items: center; gap: 0.5rem;
  box-shadow: 0 4px 20px rgba(196,152,48,0.35);
  transition: background 0.3s, color 0.3s, transform 0.3s;
  animation: fadeUp 1s 1s ease both;
}
.float-btn:hover { background: var(--copper); color: #fff; transform: translateY(-3px); }


/* ══ 09 · HERO ════════════════════════════════════════════════════════════ */

.hero {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8rem var(--page-pad) 6rem;
}

.hero-frame {
  position: absolute; inset: 32px;
  border: 1px solid rgba(196,152,48,0.55);
  pointer-events: none; z-index: 2;
}
.hero-frame-inner {
  position: absolute; inset: 40px;
  border: 0.4px solid rgba(196,152,48,0.2);
  pointer-events: none; z-index: 2;
}
.hero-corner { position: absolute; width: 28px; height: 28px; z-index: 3; }
.hero-corner svg { width: 28px; height: 28px; }
.hc-tl { top: 28px; left: 28px; }
.hc-tr { top: 28px; right: 28px; transform: scaleX(-1); }
.hc-bl { bottom: 28px; left: 28px; transform: scaleY(-1); }
.hc-br { bottom: 28px; right: 28px; transform: scale(-1,-1); }

.hero-inner {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 720px;
  animation: fadeUp 1s ease both;
}

.hero-hat { margin-bottom: 0.4rem; will-change: transform; }
.hero-hat svg { display: block; }

.hero-title { margin: 0; font-weight: 400; }
.hero-logo-svg {
  display: block;
  width: 480px;
  max-width: 88vw;
  height: auto;
  margin: 0 auto;
  will-change: transform;
}
.hero-logo-type { font-family: var(--font-script); }
.hero-logo-shimmer { mix-blend-mode: screen; }

.hero-place {
  margin-top: 1.4rem;
  display: flex; flex-direction: column; align-items: center;
  gap: 0.45rem;
}
.hero-location {
  font-family: var(--font-script);
  font-size: 1.5rem;
  color: var(--gold);
  letter-spacing: 0.04em;
  line-height: 1.2;
}
.hero-overline {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: rgba(196,152,48,0.85);
}
.hero-place .orn-row-sm { margin-top: 0.15rem; }

.hero-essence {
  font-family: var(--font-serif);
  font-size: 1.12rem;
  font-style: italic;
  line-height: 1.8;
  color: rgba(243,236,216,0.72);
  max-width: 40ch;
  margin: 1.8rem auto 0;
}
.hero-essence strong { color: var(--gold-light); font-weight: 400; font-style: normal; }

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  justify-content: center;
  margin-top: 2rem;
}

.hero-scroll {
  position: absolute;
  bottom: 2rem; left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(196,152,48,0.55);
  animation: bounce 2.2s ease-in-out infinite;
}
.scroll-line {
  width: 1px; height: 34px;
  background: linear-gradient(to bottom, rgba(196,152,48,0.5), transparent);
}

/* Announcement injected into #agBanner by order.js */
#agBanner:empty { display: none; }
#agBanner { width: 100%; margin-bottom: 1.6rem; }
.ag-banner {
  font-family: var(--font-serif);
  font-size: 1.02rem;
  font-style: italic;
  line-height: 1.6;
  color: var(--gold-light);
  background: rgba(196,152,48,0.09);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 0.85rem 1.2rem;
  text-align: center;
}


/* ══ 10 · TRUST STRIP ═════════════════════════════════════════════════════ */

.trust {
  background: var(--cream);
  border-top: 1px solid var(--border-faint);
  border-bottom: 1px solid var(--border-faint);
  padding: 1.5rem var(--page-pad);
}
.trust-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.6rem 1.9rem;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
.chip .ic { font-size: 0.95rem; letter-spacing: 0; }


/* ══ 11 · WAYS TO ORDER ═══════════════════════════════════════════════════ */

.ways {
  background: var(--warm-white);
  padding: var(--section-gap) var(--page-pad);
}
.ways-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}
.way-card {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 2.4rem 1.9rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}
.way-card:hover {
  border-color: rgba(196,152,48,0.5);
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(196,152,48,0.12);
}
.cc-icon { font-size: 1.8rem; line-height: 1; margin-bottom: 1rem; }
.way-card h3 {
  font-family: var(--font-serif);
  font-size: 1.45rem;
  font-weight: 400;
  color: var(--deep-brown);
  margin-bottom: 0.5rem;
}
.way-card p {
  font-family: var(--font-serif);
  font-size: 1.02rem;
  font-style: italic;
  line-height: 1.75;
  color: var(--text-muted);
  margin-bottom: 1.6rem;
}
.way-card .btn { margin-top: auto; }


/* ══ 12 · GALLERY ═════════════════════════════════════════════════════════ */

.gallery { padding: var(--section-gap) var(--page-pad); }

.gallery-header,
.photo-wall-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 2.6rem;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.gallery-card {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  aspect-ratio: 1;
  background: var(--card-void);
  border: 1px solid var(--border-faint);
  border-radius: 3px;
  overflow: hidden;
  cursor: zoom-in;
  transition: border-color 0.3s, transform 0.3s;
}
.gallery-card:hover { border-color: var(--border-strong); transform: scale(1.01); }
.gallery-card.wide { grid-column: span 2; aspect-ratio: 2 / 1; }
.gallery-card.tall { grid-row: span 2; aspect-ratio: 1 / 2; }
.gallery-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.gallery-card:hover img { transform: scale(1.06); }
.gallery-label {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 1.6rem 0.9rem 0.7rem;
  font-family: var(--font-serif);
  font-size: 0.9rem;
  font-style: italic;
  letter-spacing: 0.05em;
  color: rgba(243,236,216,0.82);
  text-align: left;
  background: linear-gradient(to top, rgba(12,6,0,0.82), rgba(12,6,0,0));
  transition: color 0.3s;
}
.gallery-card:hover .gallery-label { color: var(--gold-light); }


/* ══ 13 · ORDER SECTION ═══════════════════════════════════════════════════
   Everything from .order-mains down is generated at runtime by order.js and
   bulk-packs.js — those class names are a contract, not decoration. */

.order-section {
  background: var(--cream);
  padding: var(--section-gap) var(--page-pad);
}

/* countdown.js rows */
#agCountdown:empty { display: none; }
#agCountdown {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin-bottom: 2rem;
}
.ag-count {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rust);
  background: rgba(196,152,48,0.1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.5rem 0.95rem;
}
.ag-count strong {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--deep-brown);
  margin-left: 0.35rem;
}

/* ── Two-column day grid. STRUCTURAL: order.js overwrites gridTemplateColumns,
   maxWidth and margin inline on deep links, and hides column 2 via
   closest('.today-col'). Do not rename, do not use !important here. ── */
.today-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6rem;
  align-items: start;
}
.today-col {
  background: var(--warm-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 1.9rem;
}
.today-col-label {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--copper-ink);
  padding-bottom: 0.85rem;
  margin-bottom: 1.2rem;
  border-bottom: 1px solid var(--border-faint);
}

.state-msg {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-style: italic;
  line-height: 1.7;
  color: var(--text-muted);
  padding: 1.5rem 0;
}

.order-day {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  color: var(--deep-brown);
  margin-bottom: 1.1rem;
}

/* ── Mains ── */
.order-mains {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin: 0.6rem 0 1.2rem;
}
.order-main-card {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.order-main-card.is-out { opacity: 0.55; }
.order-main-photo {
  aspect-ratio: 4 / 5;
  background: var(--card-void);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.order-main-photo img { width: 100%; height: 100%; object-fit: cover; }
.order-main-photo-placeholder {
  font-family: var(--font-script);
  font-size: 1.15rem;
  color: var(--on-dark-faint);
  text-align: center;
  padding: 0.6rem;
}
.order-main-body { padding: 0.9rem 1rem 1.1rem; }
.order-main-name {
  font-family: var(--font-serif);
  font-size: 1.12rem;
  line-height: 1.2;
  color: var(--deep-brown);
}
.order-main-portion {
  font-family: var(--font-serif);
  font-size: 0.92rem;
  font-style: italic;
  color: var(--text-muted);
  margin-top: 0.15rem;
}
.order-main-price {
  font-family: var(--font-serif);
  font-size: 1rem;
  color: var(--rust);
  margin-top: 0.4rem;
}
.order-main-stock {
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 0.35rem;
}
.order-main-stock.low { color: var(--copper-ink); }
.order-main-stock.out { color: var(--error); }

.order-main-qty { display: flex; align-items: center; gap: 0.65rem; margin-top: 0.9rem; }
.qty-btn {
  width: 30px; height: 30px;
  background: var(--warm-white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--deep-brown);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.qty-btn:hover:not(:disabled) { background: var(--deep-brown); color: var(--gold-light); border-color: var(--deep-brown); }
.qty-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.qty-num {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  min-width: 1.4rem;
  text-align: center;
  color: var(--deep-brown);
}

.order-main-ingredients { margin-top: 0.7rem; }
.order-main-ingredients summary {
  cursor: pointer;
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--copper-ink);
}
.order-main-ingredients label {
  display: block;
  margin-top: 0.4rem;
  font-family: var(--font-serif);
  font-size: 0.98rem;
  color: var(--charcoal);
}
.main-ing-check, .dish-check input[type=checkbox] { accent-color: var(--copper); width: 14px; height: 14px; }

/* ── Add-ons ── */
.order-addons { margin-bottom: 1.1rem; }
.order-addons-label {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.6rem;
}
.order-addon-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--border-hairline);
}
.order-addon-row.is-closed { opacity: 0.5; }
.order-addon-info {
  font-family: var(--font-serif);
  font-size: 1.02rem;
  color: var(--deep-brown);
}
.addon-price { color: var(--rust); margin-left: 0.4rem; }
.order-addon-sold {
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--error);
}
.qty-stepper { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.order-addon-nudge {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-style: italic;
  color: var(--rust);
  background: rgba(196,152,48,0.1);
  border-radius: var(--radius);
  padding: 0.5rem 0.75rem;
  margin: 0.4rem 0 0.7rem;
}

/* ── Tip ── */
.order-tip {
  border-top: 1px solid var(--border-faint);
  padding-top: 1.1rem;
  margin-bottom: 1.1rem;
}
.order-tip-label {
  display: block;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.7rem;
}
.order-tip-note {
  display: block;
  font-family: var(--font-serif);
  font-size: 0.95rem;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-muted);
  margin-top: 0.25rem;
}
.order-tip-btns { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.order-tip-btn {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.45rem 0.9rem;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.order-tip-btn:hover,
.order-tip-btn.active {
  background: var(--deep-brown);
  color: var(--gold-light);
  border-color: var(--deep-brown);
}
.order-tip-custom {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.7rem;
  font-family: var(--font-serif);
  color: var(--deep-brown);
}
.order-tip-custom input {
  width: 7rem;
  padding: 0.5rem 0.7rem;
  background: var(--cream);
  border: 1px solid rgba(196,152,48,0.25);
  border-radius: var(--radius);
  font-family: var(--font-serif);
  font-size: 1rem;
  color: var(--deep-brown);
  outline: none;
  transition: border-color 0.3s;
}
.order-tip-custom input:focus { border-color: var(--copper); }

/* ── Total, time, pickup ── */
.order-total {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  color: var(--deep-brown);
  padding: 0.9rem 0;
  border-top: 1px solid var(--border-faint);
  border-bottom: 1px solid var(--border-faint);
  margin-bottom: 1.1rem;
}
.order-time { margin-bottom: 1rem; }
.order-time label {
  display: block;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.35rem;
}
.order-time select {
  width: 100%;
  padding: 0.72rem 0.9rem;
  background: var(--cream);
  border: 1px solid rgba(196,152,48,0.25);
  border-radius: var(--radius);
  font-family: var(--font-serif);
  font-size: 1rem;
  color: var(--deep-brown);
  outline: none;
  transition: border-color 0.3s;
  -webkit-appearance: none;
  appearance: none;
}
.order-time select:focus { border-color: var(--copper); }
.order-pickup {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-style: italic;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

/* ── Turnstile, errors, submit ── */
#ag-turnstile, #ag-turnstile2 { margin-bottom: 0.9rem; }
#ag-turnstile.hidden, #ag-turnstile2.hidden { display: none; }

#ag-order-error, #ag-order-error2 {
  display: none;
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--error);
  background: rgba(192,73,43,0.07);
  border: 1px solid rgba(192,73,43,0.28);
  border-radius: var(--radius);
  padding: 0.7rem 0.9rem;
  margin-bottom: 0.9rem;
}
#ag-order-error.shown, #ag-order-error2.shown { display: block; }

#ag-order-btn, #ag-order-btn2 {
  width: 100%;
  background: var(--gold-light);
  color: var(--deep-brown);
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0.95rem 1.5rem;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.3s, color 0.3s, transform 0.3s;
}
#ag-order-btn:hover:not(:disabled), #ag-order-btn2:hover:not(:disabled) {
  background: var(--copper); color: #fff; transform: translateY(-2px);
}
#ag-order-btn:disabled, #ag-order-btn2:disabled {
  opacity: 0.55; cursor: not-allowed; transform: none;
}

.sms-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin-top: 1rem;
  font-family: var(--font-serif);
  /* Cormorant runs small on the x-height, and this is the 10DLC consent
     paragraph — it has to stay comfortably readable, not shrink to fine print. */
  font-size: 1rem;
  line-height: 1.72;
  color: var(--text-muted);
  cursor: pointer;
}
.sms-consent input[type=checkbox] {
  accent-color: var(--copper);
  width: 15px; height: 15px;
  margin-top: 0.25rem;
  flex-shrink: 0;
}
.sms-consent strong { color: var(--deep-brown); font-weight: 600; }
.sms-consent a { color: var(--rust); }

/* ── Waitlist (built by order.js on sold-out days) ── */
.wl { margin-bottom: 1rem; }
.wl-open {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.6rem 1.1rem;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rust);
  cursor: pointer;
  transition: border-color 0.25s, background 0.25s;
}
.wl-open:hover { border-color: var(--copper); background: rgba(196,152,48,0.08); }
.wl-form { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.7rem; }
.wl-email {
  flex: 1 1 12rem;
  padding: 0.65rem 0.85rem;
  background: var(--cream);
  border: 1px solid rgba(196,152,48,0.25);
  border-radius: var(--radius);
  font-family: var(--font-serif);
  font-size: 1rem;
  outline: none;
}
.wl-email:focus { border-color: var(--copper); }
.wl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.wl-submit { padding: 0.65rem 1.2rem; border: none; }
.wl-msg, .wl-done {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-style: italic;
  color: var(--text-muted);
  margin-top: 0.5rem;
  flex-basis: 100%;
}
.wl-done { color: var(--sage); }

/* ── Bulk 6-pack band (bulk-packs.js) ── */
.bulk-packs {
  max-width: 1000px;
  margin: 3rem auto 0;
  background: rgba(196,152,48,0.05);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 2.2rem 1.8rem;
}
.bp-head { text-align: center; margin-bottom: 1.6rem; }
.bp-kicker {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--copper-ink);
}
.bp-title {
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-weight: 400;
  color: var(--deep-brown);
  margin: 0.5rem 0 0.4rem;
}
.bp-title em { font-style: italic; color: var(--rust); }
.bp-note, .bp-scope {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-style: italic;
  color: var(--text-muted);
}
.bp-scope { font-size: 0.94rem; margin-top: 0.35rem; }
.bp-scope strong { color: var(--deep-brown); font-style: normal; }
.bp-countdown {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rust);
  margin-top: 0.5rem;
}
.bp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.bp-card {
  display: block;
  text-decoration: none;
  background: var(--warm-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: border-color 0.25s, transform 0.25s;
}
.bp-card:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.bp-photo { aspect-ratio: 1; background: var(--card-void); }
.bp-photo img { width: 100%; height: 100%; object-fit: cover; }
.bp-body { padding: 0.7rem 0.85rem 0.9rem; }
.bp-name {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  line-height: 1.2;
  color: var(--deep-brown);
}
.bp-qty {
  font-size: 0.56rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0.3rem 0 0.4rem;
}
.bp-price { font-family: var(--font-serif); font-size: 1.1rem; color: var(--rust); }
.bp-save {
  display: inline-block;
  vertical-align: 2px;
  margin-left: 0.35rem;
  background: var(--gold-light);
  color: var(--deep-brown);
  font-family: var(--font-sans);
  font-size: 0.54rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  border-radius: var(--radius-tag);
  padding: 0.15rem 0.5rem;
}
.bp-cta { text-align: center; margin-top: 1.6rem; }

/* Upsell injected into an order card when qty hits 3 */
.bp-upsell {
  display: block;
  margin-top: 0.7rem;
  padding: 0.6rem 0.75rem;
  background: rgba(196,152,48,0.12);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font-serif);
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--charcoal);
  text-decoration: none;
  transition: background 0.25s;
}
.bp-upsell:hover { background: rgba(196,152,48,0.2); }
.bp-upsell strong { color: var(--rust); }
.bp-upsell-go {
  display: block;
  margin-top: 0.2rem;
  font-family: var(--font-sans);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--copper-ink);
}

.order-foot-ctas { margin-top: 3rem; }


/* ══ 14 · MENU STRIP ══════════════════════════════════════════════════════ */

.menu-strip {
  position: relative;
  overflow: hidden;
  background: var(--leather);
  color: var(--on-dark);
  padding: var(--section-gap) var(--page-pad);
}
.menu-strip::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E");
  pointer-events: none;
}
.menu-inner {
  position: relative;
  z-index: 1;
  max-width: var(--content-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 4rem;
  align-items: start;
}
.menu-intro-cta { margin-top: 1.6rem; }
.menu-lists { min-width: 0; }

.menu-group-title {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 400;
  font-style: italic;
  color: var(--gold-light);
  margin: 0 0 0.4rem;
}
.menu-group-title + .menu-list { margin-bottom: 2.4rem; }

.menu-list { display: grid; grid-template-columns: 1fr 1fr; }
.menu-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1.2rem 0;
  border-bottom: 1px solid rgba(196,152,48,0.13);
}
.menu-item:nth-child(odd) { padding-right: 2rem; border-right: 1px solid rgba(196,152,48,0.13); }
.menu-item:nth-child(even) { padding-left: 2rem; }

.menu-dish { font-family: var(--font-serif); font-size: 1rem; color: var(--on-dark); min-width: 0; }
.menu-dish-name { position: relative; display: inline-block; }
.menu-dish-name::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0%; height: 1px;
  background: var(--gold-light);
  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.menu-item:hover .menu-dish-name::after { width: 100%; }
.menu-dish small {
  display: block;
  font-size: 0.87rem;
  font-style: italic;
  color: rgba(243,236,216,0.58);
  margin-top: 0.12rem;
}
.menu-price {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--gold-light);
  white-space: nowrap;
  opacity: 0.5;
}
.menu-foot-note {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  font-style: italic;
  color: rgba(243,236,216,0.58);
  margin-top: 0.4rem;
}

.diet-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.4rem; }
.diet-tag {
  font-family: var(--font-sans);
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 0.15rem 0.5rem;
  border-radius: 10px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(243,236,216,0.55);
  white-space: nowrap;
}
.diet-tag.spicy   { color: var(--spicy);   border-color: rgba(255,107,53,0.35); }
.diet-tag.dairy   { color: var(--dairy);   border-color: rgba(184,212,232,0.3); }
.diet-tag.seafood { color: var(--seafood); border-color: rgba(126,200,200,0.3); }
.diet-tag.veg     { color: var(--veg);     border-color: rgba(144,198,124,0.3); }
.diet-tag.popular { color: var(--gold-light); border-color: rgba(196,152,48,0.4); }


/* ══ 15 · CATERING ════════════════════════════════════════════════════════ */

/* The band uses --sage-deep rather than the brand's --sage: cream body copy on
   #5C6B4F lands at ~4.4:1, just short of AA, and the small uppercase label is
   worse. The deeper sage keeps the hue and clears 5:1 across the whole band.
   The max() padding is the full-bleed / max-width trick — the colour spans the
   viewport while the two columns stay inside --content-max. */
.catering {
  background: var(--sage-deep);
  color: var(--on-dark);
  padding: var(--section-gap) max(var(--page-pad), calc((100% - var(--content-max)) / 2));
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.catering .section-label::after { background: rgba(243,236,216,0.6); }
.catering .section-lede { color: rgba(243,236,216,0.9); }

.cat-features { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.8rem; }
.cat-chip {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--radius);
  padding: 0.6rem 1rem;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-dark);
}

.cat-panel {
  background: var(--warm-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 2.4rem;
  color: var(--charcoal);
}
.cat-panel h3 {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--deep-brown);
  margin-bottom: 0.4rem;
}
.cat-panel-lede {
  font-family: var(--font-serif);
  font-size: 1.02rem;
  font-style: italic;
  color: var(--text-muted);
  margin-bottom: 1.4rem;
}
.cat-steps { list-style: none; display: flex; flex-direction: column; gap: 0.85rem; }
.cat-steps li {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--charcoal);
}
.cat-steps strong { color: var(--deep-brown); font-weight: 600; }
.cat-step-num {
  flex-shrink: 0;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(196,152,48,0.14);
  border: 1px solid var(--border);
  border-radius: 50%;
  font-family: var(--font-serif);
  font-size: 0.95rem;
  color: var(--rust);
}
.cat-cta { width: 100%; margin-top: 1.7rem; }
.cat-note {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  font-style: italic;
  color: var(--text-muted);
  margin-top: 1rem;
}


/* ══ 16 · TESTIMONIALS ════════════════════════════════════════════════════ */

.testimonials {
  background: var(--warm-white);
  padding: var(--section-gap) var(--page-pad);
}
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.3rem;
  max-width: 1060px;
  margin: 0 auto;
}
.review-card {
  position: relative;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 2rem;
  text-align: left;
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}
.review-card:hover {
  border-color: rgba(196,152,48,0.5);
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(196,152,48,0.12);
}
.review-card::before {
  content: '\201C';
  position: absolute;
  top: 0.3rem; left: 1.3rem;
  font-family: var(--font-serif);
  font-size: 3.6rem;
  line-height: 1;
  color: var(--gold-light);
  opacity: 0.22;
}
.review-header { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 1rem; }
.review-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif);
  font-size: 1.1rem;
  color: #fff;
  flex-shrink: 0;
}
.av-gold   { background: linear-gradient(135deg, #C49830, #8B5E1A); }
.av-copper { background: linear-gradient(135deg, #B87333, #6B3A1F); }
.av-sage   { background: linear-gradient(135deg, #5C6B4F, #2E3B25); }
.review-name {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--deep-brown);
}
.review-source {
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 0.1rem;
}
.review-stars { color: var(--stars); font-size: 0.78rem; letter-spacing: 0.08em; margin-bottom: 0.75rem; }
.review-text {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-style: italic;
  line-height: 1.78;
  color: var(--charcoal);
}
.review-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 1rem;
  background: rgba(196,152,48,0.08);
  border: 1px solid rgba(196,152,48,0.2);
  border-radius: 20px;
  padding: 0.25rem 0.7rem;
  font-family: var(--font-sans);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--copper-ink);
}


/* ══ 17 · PHOTO WALL ══════════════════════════════════════════════════════ */

.photo-wall { padding: var(--section-gap) var(--page-pad); }
.photo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  gap: 8px;
}
.photo-cell {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  background: var(--card-void);
  border: 1px solid var(--border-faint);
  border-radius: 3px;
  overflow: hidden;
  cursor: zoom-in;
  transition: border-color 0.3s, transform 0.3s;
}
.photo-cell:hover { border-color: var(--border-strong); transform: scale(1.01); }
.photo-cell.large { grid-column: span 2; grid-row: span 2; }
.photo-cell.wide  { grid-column: span 2; }
.photo-cell img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.photo-cell:hover img { transform: scale(1.05); }
.photo-overlay {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(196,152,48,0.08);
  opacity: 0;
  transition: opacity 0.3s;
}
.photo-cell:hover .photo-overlay,
.photo-cell:focus-visible .photo-overlay { opacity: 1; }
.photo-overlay-icon {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: rgba(12,6,0,0.55);
  font-size: 0.95rem;
}


/* ══ 18 · ABOUT ═══════════════════════════════════════════════════════════ */

.about-section {
  background: var(--cream);
  padding: var(--section-gap) var(--page-pad);
}
.about-inner {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: 4rem;
  align-items: start;
}
.about-media { position: relative; }
.about-frame {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 14px;
  background: var(--warm-white);
}
.about-frame img { border-radius: 2px; width: 100%; }
.af-script {
  font-family: var(--font-script);
  font-size: 1.9rem;
  color: var(--copper);
  text-align: center;
  margin-top: 0.7rem;
  line-height: 1.2;
}
.about-seal {
  position: absolute;
  right: -18px; bottom: -18px;
  width: 96px; height: 96px;
  background: var(--warm-white);
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  padding: 12px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 22px rgba(12,6,0,0.12);
}
.about-seal img { width: 100%; height: auto; mix-blend-mode: multiply; }

.about-content p {
  font-family: var(--font-serif);
  font-size: 1.14rem;
  line-height: 1.88;
  color: var(--charcoal);
  margin-top: 1.1rem;
}
.about-quote {
  font-family: var(--font-serif);
  font-size: 1.45rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--rust);
  border-left: 2px solid var(--gold-light);
  padding-left: 1.2rem;
  margin: 1.8rem 0 0.4rem;
}

.about-card {
  position: relative;
  overflow: hidden;
  background: var(--deep-brown);
  color: var(--on-dark);
  border-radius: var(--radius-card);
  padding: 2.4rem;
  margin-top: 2.4rem;
}
.about-card::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 140px; height: 140px;
  background: var(--copper);
  opacity: 0.08;
  border-radius: 50%;
  transform: translate(40%, -40%);
}
.ac-label {
  position: relative;
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 1.4rem;
}
.ac-stat { position: relative; display: flex; align-items: baseline; gap: 0.9rem; flex-wrap: wrap; }
.ac-num {
  font-family: var(--font-serif);
  font-size: 2.4rem;
  line-height: 1;
  color: var(--gold-light);
}
.ac-desc {
  font-family: var(--font-serif);
  font-size: 0.98rem;
  font-style: italic;
  color: rgba(243,236,216,0.55);
}
.ac-divider { position: relative; width: 42px; height: 2px; background: var(--gold-light); margin: 1.4rem 0; }


/* ══ 19 · FIND US ═════════════════════════════════════════════════════════ */

.findus {
  padding: var(--section-gap) max(var(--page-pad), calc((100% - var(--content-max)) / 2));
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}
.info-block { margin-top: 2rem; display: flex; flex-direction: column; gap: 1.3rem; }
.info-row { display: flex; align-items: flex-start; gap: 1rem; }
.info-icon {
  flex-shrink: 0;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(196,152,48,0.1);
  border: 1px solid var(--border);
  border-radius: 50%;
  font-size: 1rem;
}
.info-label {
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 0.2rem;
}
.info-value {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  line-height: 1.6;
  color: rgba(243,236,216,0.75);
}
.info-value a { color: var(--gold-light); text-decoration: none; }
.info-value a:hover { text-decoration: underline; }

.social-row { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 2rem; }
.social-btn {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-dark);
  text-decoration: none;
  border: 1px solid var(--border-cream);
  border-radius: var(--radius);
  padding: 0.7rem 1.2rem;
  transition: border-color 0.3s, color 0.3s, transform 0.3s;
}
.social-btn:hover { border-color: var(--gold-light); color: var(--gold-light); transform: translateY(-2px); }

.findus-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 2.4rem;
}
.findus-card-label {
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 1.4rem;
}
.findus-list { list-style: none; display: flex; flex-direction: column; gap: 1rem; }
.findus-list li {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  line-height: 1.7;
  color: rgba(243,236,216,0.7);
  padding-left: 1.2rem;
  position: relative;
}
.findus-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.62em;
  width: 5px; height: 5px;
  background: var(--gold);
  transform: rotate(45deg);
}
.findus-list strong { color: var(--on-dark); font-weight: 400; }
.findus-card .orn-row { margin: 1.8rem 0 1rem; }
.findus-card-quote {
  font-family: var(--font-script);
  font-size: 1.5rem;
  text-align: center;
  color: var(--gold-light);
  line-height: 1.3;
}


/* ══ 20 · FOOTER ══════════════════════════════════════════════════════════ */

footer#site-footer {
  background: var(--footer-black);
  border-top: 1px solid var(--border-hairline);
  padding: 3.2rem var(--page-pad) 1.8rem;
  color: rgba(243,236,216,0.5);
}
.footer-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 2.5rem;
}
.footer-logo {
  font-family: var(--font-script);
  font-size: 1.8rem;
  color: rgba(243,236,216,0.75);
  line-height: 1.2;
}
.footer-tagline {
  font-family: var(--font-serif);
  font-size: 1rem;
  font-style: italic;
  line-height: 1.7;
  color: rgba(243,236,216,0.58);
  margin-top: 0.7rem;
  max-width: 34ch;
}
.footer-col h2 {
  font-family: var(--font-sans);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 1rem;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.55rem; }
.footer-col li {
  font-family: var(--font-serif);
  font-size: 1rem;
  color: rgba(243,236,216,0.62);
}
.footer-col a { color: rgba(243,236,216,0.78); text-decoration: none; transition: color 0.3s; }
.footer-col a:hover { color: var(--gold-light); }

.footer-bottom {
  max-width: var(--content-max);
  margin: 2.6rem auto 0;
  padding-top: 1.4rem;
  border-top: 1px solid var(--border-hairline);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem 1.5rem;
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  line-height: 1.7;
  color: rgba(243,236,216,0.58);
}
.footer-bottom a { color: rgba(243,236,216,0.78); text-decoration: none; transition: color 0.3s; }
.footer-bottom a:hover { color: var(--gold-light); }


/* ══ 21 · LIGHTBOX ════════════════════════════════════════════════════════ */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(6,3,0,0.94);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 3.5rem 1rem;
}
.lightbox-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  max-width: min(900px, 92vw);
  max-height: 100%;
  min-width: 0;
}
.lightbox-figure img {
  max-width: 100%;
  max-height: calc(100vh - 11rem);
  width: auto; height: auto;
  object-fit: contain;
  border: 1px solid var(--border);
  border-radius: 3px;
}
.lightbox-caption {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-style: italic;
  color: rgba(243,236,216,0.75);
  text-align: center;
}
.lightbox-close, .lightbox-nav {
  background: rgba(12,6,0,0.7);
  border: 1px solid var(--border);
  color: var(--on-dark);
  border-radius: 50%;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.25s, border-color 0.25s, color 0.25s;
  flex-shrink: 0;
}
.lightbox-close:hover, .lightbox-nav:hover {
  background: var(--gold-light);
  border-color: var(--gold-light);
  color: var(--deep-brown);
}
.lightbox-close {
  position: absolute;
  top: 1rem; right: 1rem;
  width: 42px; height: 42px;
  font-size: 1.6rem; line-height: 1;
}
.lightbox-nav { width: 46px; height: 46px; font-size: 1.9rem; line-height: 1; }


/* ══ 22 · MOTION ══════════════════════════════════════════════════════════ */

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal.visible { opacity: 1; transform: translateY(0); }

.stagger-item {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.stagger-item.visible { opacity: 1; transform: translateY(0); }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(7px); }
}
@keyframes rippleOut { to { transform: scale(4); opacity: 0; } }
@keyframes navShimmer {
  0%   { background-position: 200% center; }
  50%  { background-position: -100% center; }
  100% { background-position: 200% center; }
}
@keyframes loaderPulse {
  0%, 100% { transform: scale(1);    opacity: 0.9; }
  50%      { transform: scale(1.06); opacity: 1; }
}
@keyframes loaderWordIn { to { opacity: 1; transform: translateY(0); } }
@keyframes loaderBarFill { from { width: 0%; } to { width: 100%; } }


/* ══ 23 · RESPONSIVE ══════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
  .footer-inner { grid-template-columns: 1fr 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 960px) {
  html { scroll-padding-top: 72px; }

  /* backdrop-filter makes an element the containing block for its
     position:fixed descendants, which would shrink the drawer to the nav bar.
     Drop the blur here — the bar is opaque enough on its own, and skipping a
     full-width blur on phones is a win anyway. */
  nav#nav {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(10,6,0,0.99);
  }

  /* Nav collapses into a full-screen drawer. #navLinks keeps its id and its
     .open class so the amazing-grace nav contract still holds.
     visibility (not just opacity) is what keeps the closed drawer's links out
     of the tab order and out of the accessibility tree. */
  .nav-links {
    position: fixed;
    inset: 0;
    z-index: 150;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.6rem;
    background: rgba(10,6,0,0.98);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }
  .nav-links.open { opacity: 1; visibility: visible; pointer-events: auto; }
  .nav-links a {
    font-family: var(--font-script);
    font-size: 2.4rem;
    font-weight: 400;
    letter-spacing: 0.01em;
    text-transform: none;
    color: var(--on-dark);
  }
  .nav-links a::after { display: none; }
  .nav-cta { display: none; }
  .mobile-toggle { display: flex; position: relative; z-index: 160; }

  .hero { padding-top: 6.5rem; }
  .hero-frame, .hero-frame-inner, .hero-corner { display: none; }
  .hero-logo-svg { width: 400px; }

  .ways-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-card.wide { grid-column: span 2; }
  .gallery-card.tall { grid-row: span 1; aspect-ratio: 1; }
  .gallery-header, .photo-wall-header { flex-direction: column; align-items: flex-start; gap: 1.4rem; }

  .today-grid { grid-template-columns: 1fr; gap: 1.4rem; }
  .bp-grid { grid-template-columns: repeat(2, 1fr); }

  .menu-inner { grid-template-columns: 1fr; gap: 3rem; }
  .menu-list { grid-template-columns: 1fr; }
  .menu-item:nth-child(odd) { padding-right: 0; border-right: none; }
  .menu-item:nth-child(even) { padding-left: 0; }

  .catering { grid-template-columns: 1fr; gap: 3rem; }
  .reviews-grid { grid-template-columns: 1fr; }
  .photo-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 190px; }
  .photo-cell.large, .photo-cell.wide { grid-column: span 2; }
  .photo-cell.large { grid-row: span 1; }

  .about-inner { grid-template-columns: 1fr; gap: 3rem; }
  .about-media { max-width: 420px; }
  .findus { grid-template-columns: 1fr; gap: 3rem; }

  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }
}

@media (max-width: 640px) {
  .trust-inner { gap: 0.55rem 1.2rem; }
  .chip { font-size: 0.56rem; letter-spacing: 0.1em; }

  .hero-logo-svg { width: 320px; }
  .hero-essence { font-size: 1.05rem; }
  .hero-ctas .btn { flex: 1 1 100%; }

  .today-col, .cat-panel, .findus-card, .about-card, .bulk-packs { padding: 1.5rem 1.2rem; }
  .way-card, .review-card { padding: 1.7rem 1.4rem; }

  .order-mains { grid-template-columns: 1fr; }
  .order-main-photo { aspect-ratio: 1; }
  .bp-grid { grid-template-columns: 1fr; }

  .photo-grid { grid-auto-rows: 150px; }
  .footer-inner { grid-template-columns: 1fr; gap: 2rem; }

  .float-btn { bottom: 1rem; right: 1rem; padding: 0.7rem 1rem; }
  #back-to-top { bottom: 4.6rem; right: 1rem; }

  .lightbox { padding: 3.5rem 0.5rem; gap: 0.4rem; }
  .lightbox-nav { width: 38px; height: 38px; font-size: 1.5rem; }
}

@media (max-width: 380px) {
  .nav-logo-text { font-size: 1.45rem; }
  .nav-links a { font-size: 2rem; }
  .hero-logo-svg { width: 270px; }
  .loader-word.w1 { font-size: 2.6rem; }
  .loader-word.w3 { font-size: 3.4rem; }
  .ac-num { font-size: 2rem; }
  .about-seal { width: 74px; height: 74px; right: -10px; bottom: -10px; padding: 9px; }
}


/* ══ 24 · REDUCED MOTION ══════════════════════════════════════════════════
   Everything decorative stops. Reveals resolve to their finished state so no
   content is left invisible, and home.js additionally removes the SVG shimmer
   sweep and skips parallax, magnetic hover and ripples.                     */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }

  .reveal, .stagger-item { opacity: 1 !important; transform: none !important; }
  .loader-word, .loader-tagline { opacity: 1; transform: none; }
  .loader-bar { width: 100%; }
  .hero-inner, .float-btn { animation: none; opacity: 1; transform: none; }
  .hero-scroll { animation: none; }
  .nav-logo-text {
    animation: none;
    background: none;
    -webkit-text-fill-color: var(--on-dark);
    color: var(--on-dark);
  }
  .btn:hover, .way-card:hover, .review-card:hover,
  .gallery-card:hover, .photo-cell:hover, .social-btn:hover,
  #ag-order-btn:hover, .bp-card:hover, .float-btn:hover { transform: none; }
  .gallery-card:hover img, .photo-cell:hover img { transform: none; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   INNER PAGES — sections 25-37
   Everything below was added for the twelve ported pages (menu, pickup,
   catering, calendar, contact, faq, privacy, terms, success, cancel, 404,
   manage). Nothing above this line was altered.

   GROUND RULE FOR THIS HALF OF THE FILE
   The home page alternates light bands (.grain / plain cream) with dark ones
   (.leather-bg, .menu-strip, .catering). An inner-page <section> that carries
   no band class therefore sits on the cream <body>. So every component here is
   authored LIGHT-FIRST — cream/warm-white panels, deep-brown ink, --copper-ink
   for small uppercase, --rust for prices — and section 32 re-tints the whole
   set for the dark bands, exactly the way sections 07 and 15 already do for
   .section-label / .section-title / .section-lede. Both grounds clear AA.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ══ 25 · INNER-PAGE SHELL ════════════════════════════════════════════════ */

/* Tokens the inner pages need. Appended, not edited — everything in section 02
   keeps its value. --error only reaches 3.0:1 on espresso, so dark bands get a
   lightened tint of the same hue instead of the raw token. */
:root {
  --error-on-dark: #E89A88;
  /* Same precedent as --copper-ink: --error clears AA on plain cream but only
     reaches 4.1:1 once it sits on its own red wash (the .mg-chip pills).
     --error-ink is the same hue darkened to clear 5:1 there. */
  --error-ink:     #A33A20;
  --error-wash:    rgba(192,73,43,0.08);
  --ok:            #48553E;   /* = --sage-deep, renamed for status use on light */
  --ok-on-dark:    #9BC98A;
  --panel:         var(--warm-white);
  --panel-sunk:    rgba(196,152,48,0.045);
  --shadow-card:   0 8px 30px rgba(12,6,0,0.10);
  --shadow-deep:   0 20px 50px rgba(12,6,0,0.42);
  --nav-height:    5.5rem;
  --foil:          linear-gradient(105deg, #8B5E1A 0%, #C49830 28%, #FFE49A 50%, #C49830 72%, #B87333 100%);
}

/* AG gave every <section> 96px of padding and pushed the first one to 150px to
   clear its fixed nav. SBP's nav is fixed too, so inner pages need the same
   thing on the brand's own scale. This is element-qualified on purpose: every
   home-page section carries a class that sets its own padding, and a class
   always beats a bare element selector, so index.html is untouched. */
section {
  position: relative;
  padding: var(--section-gap) var(--page-pad);
}
/* `section#top` and NOT `#top` — index.html's hero is <header id="top"> and
   keeps its own 8rem padding. */
section#top,
.page-top { padding-top: calc(var(--nav-height) + var(--section-gap)); }

/* The third band treatment, alongside .grain and .leather-bg. Used by
   calendar.html for the "What is in each dish" reference. */
.section-alt {
  background: var(--warm-white);
  border-top: 1px solid var(--border-faint);
  border-bottom: 1px solid var(--border-faint);
}

/* A small qualifier line under a .section-lede. */
.subnote {
  text-align: center;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--copper-ink);
  margin-top: 0.9rem;
}

/* .state-msg already exists (section 13). Inside a grid host it has to span all
   the columns or the loading line sits in a one-column-wide sliver. */
.day-grid > .state-msg,
.menu-ref > .state-msg,
.cat-preset-grid > .state-msg,
#calGrid > .state-msg,
#calMenu > .state-msg { grid-column: 1 / -1; text-align: center; }

/* Turnstile mounts. All three are centred and collapse when the widget never
   renders — SBP_TURNSTILE_SITEKEY is '' pre-launch, so an empty div is the
   normal state and must not leave a gap. */
#cat-turnstile,
#ct-turnstile,
#cat-preset-turnstile {
  display: flex;
  justify-content: center;
  margin-top: 1.1rem;
}
#cat-turnstile:empty,
#ct-turnstile:empty,
#cat-preset-turnstile:empty { display: none; }


/* ══ 26 · DISH CARDS ══════════════════════════════════════════════════════
   menu.html's .mi-* family and calendar.html's .mr-* family are the same card
   drawn twice, so they are styled together — that is what keeps the two pages
   looking like one site.

   🔴 .menu-list COLLISION: site.css:1526 already owns .menu-list as the home
   page's two-column price list. AG's menu.html reuses the name for the card
   grid. The card grid is therefore scoped to `#entrees .menu-list`, and
   `.mi-grid` is offered as an unambiguous alias. The bare .menu-list rule is
   NOT touched. */

#entrees .menu-list,
.mi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  max-width: 1080px;
  margin: 0 auto;
}
.menu-ref {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.5rem;
  max-width: 1080px;
  margin: 0 auto;
}

.mi-card,
.mr-card {
  background: var(--warm-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 1.15rem;
  text-align: left;
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}
.mi-card:hover,
.mr-card:hover {
  border-color: rgba(196,152,48,0.5);
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
}

/* object-fit:contain over a dark plate: the food photos are tall phone shots,
   and letterboxing beats cropping the dish out of frame. */
.mi-photo,
.mr-photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: var(--card-void);
  border: 1px solid var(--border-faint);
  border-radius: var(--radius);
}
.mr-photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  padding: 0.6rem;
  background: var(--card-void);
  border: 1px solid var(--border-faint);
  border-radius: var(--radius);
  font-family: var(--font-script);
  font-size: 1.25rem;
  line-height: 1.2;
  /* --on-dark-soft, not --on-dark-faint: this well carries the dish name when
     no photo exists, so it is content, not ornament. */
  color: var(--on-dark-soft);
  text-align: center;
}

/* flex-wrap matters: menu.js leaves the fallback string ("See calendar for
   pricing") in place for any key D1 does not return, and a nowrap price that
   long would otherwise crush the dish name. It drops to its own line instead. */
.mi-head,
.mr-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.6rem;
  margin: 0.9rem 0 0.15rem;
}
.mi-name,
.mr-name {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: var(--deep-brown);
}
.mi-price,
.mr-price {
  flex: 0 1 auto;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--rust);
  white-space: nowrap;
  text-align: right;
}
.mi-portion,
.mr-portion {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  font-style: italic;
  color: var(--text-muted);
  margin: 0.35rem 0 0.1rem;
}
.mi-note {
  font-size: 0.72rem;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0.45rem 0 0;
}
.mi-bulk { font-size: 0.72rem; margin: 0.6rem 0 0; }
.mi-bulk a {
  color: var(--copper-ink);
  font-weight: 600;
  text-decoration: none;
}
.mi-bulk a:hover { text-decoration: underline; }

.mi-label,
.mr-label {
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--copper-ink);
  margin: 0.85rem 0 0.5rem;
}
.mi-ings,
.mr-ings {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1.1rem;
}
.mi-ings li,
.mr-ings li {
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--charcoal);
  padding: 0.32rem 0;
  border-bottom: 1px solid var(--border-hairline);
}

/* Add-ons list (menu.html #addons). #addons sits outside the #entrees scope
   above, so the .menu-list collision cannot reach it. */
.addon-list {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 460px;
  text-align: left;
}
.addon-list li {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  color: var(--charcoal);
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--border-hairline);
}
.addon-list .mi-price { font-size: 1.05rem; }

@media (max-width: 820px) {
  #entrees .menu-list,
  .mi-grid { grid-template-columns: 1fr; max-width: 460px; }
  .menu-ref { grid-template-columns: 1fr; max-width: 440px; }
}
@media (max-width: 460px) {
  .mi-ings,
  .mr-ings { grid-template-columns: 1fr; }
}


/* ══ 27 · PICKUP DIRECTIONS ═══════════════════════════════════════════════
   pickup.html ships as a shell until the client supplies an address, but the
   step / map / callout furniture is styled now so the page only needs copy. */

.pk-steps { max-width: 640px; margin: 2.1rem auto 0; }
.pk-step {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--border-hairline);
}
.pk-step:last-child { border-bottom: none; }
.pk-step p {
  margin-top: 0.3rem;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--charcoal);
}
.pk-step strong { color: var(--deep-brown); font-weight: 600; }
.pk-num {
  flex: 0 0 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: rgba(196,152,48,0.1);
  font-family: var(--font-serif);
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--rust);
}

.pk-map-wrap {
  max-width: 640px;
  margin: 2.4rem auto 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--card-void);
  box-shadow: var(--shadow-card);
}
.pk-map-wrap svg { display: block; width: 100%; height: auto; }

.pk-note {
  max-width: 640px;
  margin: 1.6rem auto 0;
  padding: 1rem 1.15rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: rgba(196,152,48,0.07);
  font-family: var(--font-serif);
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--charcoal);
}
.pk-note strong { color: var(--deep-brown); font-weight: 600; }
.pk-note a { color: var(--rust); }


/* ══ 28 · REQUEST FORMS ═══════════════════════════════════════════════════
   Shared by catering.html (#catForm) and contact.html (#ctForm) — contact.html
   deliberately reuses the .cat-* class names, so this is styled once.

   🔴 form-action is 'none' in _headers. These forms never submit natively;
   catering.js / contact.js preventDefault and fetch. Nothing here should ever
   suggest otherwise. */

.cat-form { max-width: 720px; margin: 2.4rem auto 0; }
.cat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.9rem;
}

.cat-field { display: flex; flex-direction: column; gap: 0.45rem; }
.cat-field > span {
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--copper-ink);
}
.cat-field > span .req { color: var(--error); }
.cat-field input,
.cat-field select,
.cat-field textarea {
  width: 100%;
  padding: 0.72rem 0.85rem;
  background: var(--cream);
  border: 1px solid rgba(196,152,48,0.28);
  border-radius: var(--radius);
  font-family: var(--font-serif);
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--deep-brown);
  /* Native date / time / number pickers follow the field, not the OS. */
  color-scheme: light;
  outline: none;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.cat-field textarea { min-height: 130px; resize: vertical; }
.cat-field input::placeholder,
.cat-field textarea::placeholder { color: var(--text-muted); opacity: 0.75; }
.cat-field input:hover,
.cat-field select:hover,
.cat-field textarea:hover { border-color: var(--border-strong); }
.cat-field input:focus,
.cat-field select:focus,
.cat-field textarea:focus {
  border-color: var(--copper);
  box-shadow: 0 0 0 3px rgba(196,152,48,0.18);
}
/* Full-bleed field (the big textarea). */
.cat-field.cat-details { grid-column: 1 / -1; }

.cat-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin-top: 1rem;
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1.72;
  color: var(--text-muted);
  cursor: pointer;
}
.cat-consent input[type=checkbox] {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  margin-top: 0.25rem;
  accent-color: var(--copper);
  cursor: pointer;
}
.cat-consent span { flex: 1 1 auto; }
.cat-consent a { color: var(--rust); }

.cat-paynote {
  margin-top: 0.9rem;
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text-muted);
}
.cat-paynote strong { color: var(--deep-brown); font-weight: 600; }

/* Zero height until catering.js / contact.js adds .shown — the region must not
   reserve space while it is empty. */
.cat-error {
  display: none;
  margin-top: 0.9rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid rgba(192,73,43,0.28);
  border-radius: var(--radius);
  background: var(--error-wash);
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1.6;
  /* --error-ink, not --error: this text sits on its own red wash. */
  color: var(--error-ink);
  text-align: center;
}
.cat-error.shown { display: block; }

.cat-done {
  max-width: 560px;
  margin: 2.6rem auto 0;
  padding: 1.6rem 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--warm-white);
  text-align: center;
}
.cat-done h3 {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--deep-brown);
  margin-bottom: 0.5rem;
}
.cat-done p {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--text-muted);
}
.cat-done a { color: var(--rust); }

.cat-terms {
  list-style: none;
  max-width: 46ch;
  margin: 1.4rem 0 1.6rem;
  padding: 0.9rem 1.05rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--panel-sunk);
  display: grid;
  gap: 0.4rem;
}
.cat-terms li {
  position: relative;
  padding-left: 1.15rem;
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-muted);
}
.cat-terms li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 5px;
  height: 5px;
  background: var(--gold);
  transform: rotate(45deg);
}
.cat-terms strong { color: var(--deep-brown); font-weight: 600; }

.cat-form .hero-ctas { margin-top: 1.4rem; }

@media (max-width: 640px) {
  .cat-grid { grid-template-columns: 1fr; }
}


/* ══ 29 · CONTACT CARDS ═══════════════════════════════════════════════════ */

.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
  max-width: 1000px;
  margin: 2.7rem auto 0;
}
.contact-card {
  background: var(--warm-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 2rem 1.6rem;
  text-align: center;
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}
.contact-card:hover {
  border-color: rgba(196,152,48,0.5);
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
}
/* .cc-icon is already styled (section 11); it only needs re-centring here. */
.contact-card .cc-icon { margin: 0 auto 0.8rem; }
.contact-card h3 {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-weight: 400;
  color: var(--deep-brown);
  margin-bottom: 0.6rem;
}
.contact-card p,
.contact-card a:not(.btn) {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--text-muted);
}
.contact-card a:not(.btn) { color: var(--rust); text-decoration: none; }
.contact-card a:not(.btn):hover { text-decoration: underline; }

@media (max-width: 960px) {
  .contact-grid { grid-template-columns: 1fr; max-width: 420px; }
}


/* ══ 30 · CATERING PRESET BUILDER ═════════════════════════════════════════
   Everything below .cat-preset-grid is generated by catering-preset.js. The
   class names and the data-* hooks are a contract — rename nothing.
   catering-preset.js also clones the home page's tip widget into each card;
   .order-tip / .order-tip-btn / .order-tip-custom are already styled in
   section 13 for a light ground, so they need nothing here. */

.cat-preset-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.9rem;
  margin: 1.4rem 0 0.6rem;
}
.cat-preset-card {
  display: flex;
  flex-direction: column;
  background: var(--warm-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.cat-preset-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-card); }

.cat-preset-photo {
  aspect-ratio: 1 / 1;
  background: var(--cream);
  border-bottom: 1px solid var(--border-faint);
  overflow: hidden;
}
.cat-preset-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.cat-preset-photo-caveat {
  font-family: var(--font-serif);
  font-size: 0.85rem;
  font-style: italic;
  color: var(--text-muted);
  margin-top: 0.25rem;
}

.cat-preset-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 0.65rem 0.75rem 0.75rem;
}
.cat-preset-name {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--deep-brown);
}
/* In the markup but never shown — the description rides in the card's title
   attribute. Keep it hidden. */
.cat-preset-desc,
.cat-preset-note { display: none; }

.cat-preset-sizes { display: flex; gap: 0.3rem; margin-top: 0.5rem; }
.cat-preset-size-btn {
  flex: 1;
  padding: 0.38rem 0.2rem;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font-serif);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.cat-preset-size-btn:hover { border-color: var(--copper); color: var(--rust); }
/* `is-active` here, `active` on the tip buttons — catering-preset.js toggles
   two different words on two different controls. Both have to exist. */
.cat-preset-size-btn.is-active {
  border-color: var(--copper);
  background: rgba(196,152,48,0.14);
  color: var(--rust);
}

.cat-preset-price {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--rust);
  margin-top: 0.5rem;
}
.cat-preset-serves {
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.cat-preset-date-row { margin-top: 0.5rem; }
.cat-preset-date-row label {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--copper-ink);
}
.cat-preset-date-row select,
.cat-preset-date-row input {
  width: 100%;
  padding: 0.35rem 0.4rem;
  background: var(--cream);
  border: 1px solid rgba(196,152,48,0.28);
  border-radius: var(--radius);
  font-family: var(--font-serif);
  font-size: 0.92rem;
  color: var(--deep-brown);
  color-scheme: light;
  outline: none;
}
.cat-preset-date-row select:focus,
.cat-preset-date-row input:focus {
  border-color: var(--copper);
  box-shadow: 0 0 0 2px rgba(196,152,48,0.18);
}

/* Reused for the customisation progress line, the step summary and the
   "made to order" note, so it has to read well at one to three lines. */
.cat-preset-hint {
  font-size: 0.66rem;
  line-height: 1.55;
  color: var(--text-muted);
  margin-top: 0.4rem;
}
.cat-preset-total {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--rust);
  margin-top: 0.6rem;
}
.cat-preset-err {
  font-size: 0.66rem;
  line-height: 1.5;
  color: var(--error);
  margin-top: 0.35rem;
}

.cat-preset-btn {
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.55rem 0.5rem;
  background: var(--gold-light);
  color: var(--deep-brown);
  border: none;
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.25s, color 0.25s;
}
.cat-preset-btn:hover:not(:disabled) { background: var(--copper); color: #fff; }
.cat-preset-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* "Coming soon" placeholder card. */
.cat-preset-soon {
  border-style: dashed;
  border-color: var(--border);
  opacity: 0.6;
  pointer-events: none;
}
.cat-preset-soon:hover { box-shadow: none; }
.cat-preset-soon-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel-sunk) !important;
}
.soon-mark {
  font-family: var(--font-script);
  font-size: 1.4rem;
  color: var(--copper-ink);
}
.cat-preset-soon .cat-preset-name {
  margin-top: auto;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.cat-preset-disclosure {
  max-width: 640px;
  margin: 1rem auto 0;
  text-align: center;
  font-size: 0.68rem;
  line-height: 1.7;
  color: var(--text-muted);
}
.cat-preset-disclosure a { color: var(--copper-ink); }

@media (max-width: 760px) {
  .cat-preset-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}


/* ══ 31 · CALENDAR DAY GRID ═══════════════════════════════════════════════
   Injected wholesale by calendar.js into #calGrid. The waitlist block inside a
   sold-out card (.wl / .wl-open / .wl-form / .wl-email / .wl-msg / .wl-done) is
   already styled in section 13 and is reused verbatim. */

.day-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.4rem;
  max-width: var(--content-max);
  margin: 0 auto;
}
.day-card {
  display: flex;
  flex-direction: column;
  text-align: center;
  background: var(--warm-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 1.3rem 1.15rem;
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}
.day-card:hover {
  border-color: rgba(196,152,48,0.5);
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
}
.day-card.is-closed {
  opacity: 0.72;
  border-color: var(--border-faint);
  background: var(--cream);
}
.day-card.is-closed:hover { transform: none; box-shadow: none; border-color: var(--border-faint); }

.day-photo {
  position: relative;
  margin: -0.3rem -0.3rem 0.75rem;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--card-void);
}
.day-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: var(--card-void);
}
.is-closed .day-photo img { filter: grayscale(0.6) brightness(0.75); }
.day-photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  background: var(--card-void);
  font-family: var(--font-script);
  font-size: 1.15rem;
  color: var(--on-dark-soft);
  text-align: center;
  padding: 0.5rem;
}
.day-soldout {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(-12deg);
  padding: 0.4rem 1.1rem;
  background: rgba(140,26,16,0.92);
  border: 2px solid rgba(250,246,238,0.9);
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
  box-shadow: 0 8px 26px rgba(12,6,0,0.45);
}
.day-soldout.inline {
  position: static;
  display: inline-block;
  transform: rotate(-4deg);
  margin-bottom: 0.6rem;
  font-size: 0.62rem;
}

.day-weekday {
  font-family: var(--font-serif);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--copper-ink);
}
.day-date {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  color: var(--deep-brown);
  letter-spacing: 0.02em;
  margin-top: 0.15rem;
}
/* Legacy single-item fallback — only rendered when /availability returns no
   `mains` array. */
.day-item {
  font-family: var(--font-script);
  font-size: 1.7rem;
  line-height: 1.1;
  color: var(--copper);
  margin: 0.7rem 0 0.2rem;
}
.day-price {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--rust);
  margin-bottom: 0.8rem;
}

.day-mains-list {
  list-style: none;
  margin: 0.4rem 0;
  padding: 0;
  text-align: left;
}
.day-mains-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.2rem 0;
  font-family: var(--font-serif);
  font-size: 1rem;
  color: var(--charcoal);
}
.day-mains-price { color: var(--rust); white-space: nowrap; }
.day-mains-tag {
  font-family: var(--font-sans);
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius-tag);
  white-space: nowrap;
}
.day-mains-tag.low { background: rgba(196,152,48,0.2);  color: var(--gold-deep); }
.day-mains-tag.out { background: rgba(192,73,43,0.14); color: var(--error); }

.day-status {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0.8rem 0;
}
.day-status.ok    { color: var(--ok); }
.day-status.low   { color: var(--copper-ink); }
.day-status.muted { color: var(--text-muted); }
.day-status.sold  { color: var(--error); }

.day-addon-note {
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-top: -0.3rem;
  margin-bottom: 0.7rem;
}

.day-closed-label {
  margin-top: auto;
  padding-top: 0.9rem;
  border-top: 1px solid var(--border-hairline);
  font-family: var(--font-serif);
  font-size: 1rem;
  font-style: italic;
  color: var(--text-muted);
}
.day-closed-label.sold { color: var(--error); font-style: normal; font-weight: 600; }

.day-card .btn { margin-top: auto; width: 100%; }
.day-card .wl { margin-top: 0.8rem; margin-bottom: 0; }

@media (max-width: 520px) {
  .day-grid { grid-template-columns: 1fr; }
}


/* ══ 32 · FAQ ACCORDION ═══════════════════════════════════════════════════
   Native <details>; there is no page script. */

.faq-group { max-width: 720px; margin: 0 auto; }
.faq-cat {
  font-family: var(--font-serif);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--copper-ink);
  margin: 2.6rem 0 0.65rem;
}
.faq-cat:first-child { margin-top: 0; }

details.faq {
  margin: 0 0 0.6rem;
  border: 1px solid var(--border-faint);
  border-radius: var(--radius-card);
  background: var(--warm-white);
  transition: border-color 0.25s;
}
details.faq[open] { border-color: var(--border-strong); }
details.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.1rem;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--deep-brown);
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after {
  content: '+';
  flex: 0 0 auto;
  font-family: var(--font-serif);
  font-size: 1.35rem;
  line-height: 1;
  color: var(--copper);
}
details.faq[open] summary::after { content: '–'; }
details.faq .faq-a {
  padding: 0 1.1rem 1.1rem;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--text-muted);
}
details.faq .faq-a p + p { margin-top: 0.7rem; }
details.faq .faq-a a { color: var(--rust); }
details.faq .faq-a strong { color: var(--deep-brown); font-weight: 600; }
details.faq .faq-a ul { margin: 0.5rem 0 0 1.2rem; }
details.faq .faq-a li { margin-bottom: 0.4rem; }
details.faq .faq-a .btn { margin-top: 0.9rem; }


/* ══ 33 · DARK-BAND OVERRIDES (sections 26-32) ════════════════════════════
   Sections 26-32 are authored for the cream ground. When a ported page wraps
   one of those components in one of SBP's dark bands, only the colours change
   — geometry, spacing and type sizes are inherited untouched. This mirrors what
   sections 07 and 15 already do for .section-label / .section-title.

   :is() keeps the selector lists readable; it is the only place in this file
   that uses it. Specificity is (0,2,0), so these always beat the light
   defaults above regardless of source order. */

:is(.leather-bg, .menu-strip, .catering) :is(
  .mi-card, .mr-card, .contact-card, .day-card, .cat-preset-card,
  .cat-done, .cat-terms, details.faq
) {
  background: rgba(255,255,255,0.035);
  border-color: var(--border-faint);
}
:is(.leather-bg, .menu-strip, .catering) :is(.mi-card, .mr-card, .contact-card, .day-card):hover {
  border-color: var(--border-strong);
  box-shadow: 0 10px 34px rgba(0,0,0,0.45);
}
:is(.leather-bg, .menu-strip, .catering) .day-card.is-closed { background: rgba(255,255,255,0.02); }

/* Headings and names lift to gold-light; body copy to the cream ramp. */
:is(.leather-bg, .menu-strip, .catering) :is(
  .mi-name, .mr-name, .day-date, .contact-card h3, .cat-done h3,
  .cat-preset-name, details.faq summary
) { color: var(--gold-light); }

:is(.leather-bg, .menu-strip, .catering) :is(
  .mi-price, .mr-price, .day-price, .day-mains-price, .day-item,
  .cat-preset-price, .cat-preset-total, .pk-num, .cat-preset-size-btn.is-active
) { color: var(--gold-light); }

:is(.leather-bg, .menu-strip, .catering) :is(
  .mi-ings li, .mr-ings li, .addon-list li, .day-mains-list li,
  .pk-step p, .pk-note
) { color: var(--on-dark); }

/* ⚠️ SPECIFICITY: an :is() list weighs as much as its HEAVIEST argument. Keep
   this list free of compound and element-qualified selectors — `details.faq
   .faq-a` in here once made the whole rule (0,3,1) and silently outranked the
   .day-status.ok / .sold status colours further down. Anything heavier than a
   single class gets its own rule below. */
:is(.leather-bg, .menu-strip, .catering) :is(
  .mi-portion, .mr-portion, .mi-note, .cat-preset-serves, .cat-preset-hint,
  .cat-preset-disclosure, .cat-preset-photo-caveat,
  .cat-done p, .cat-terms li, .cat-paynote, .cat-consent,
  .day-addon-note, .cat-preset-size-btn
) { color: var(--on-dark-soft); }
:is(.leather-bg, .menu-strip, .catering) .contact-card p { color: var(--on-dark-soft); }
:is(.leather-bg, .menu-strip, .catering) details.faq .faq-a { color: var(--on-dark-soft); }
:is(.leather-bg, .menu-strip, .catering) .cat-preset-soon .cat-preset-name { color: var(--on-dark-soft); }
/* Kept apart from the block above so the .ok / .low / .sold modifiers that
   follow can still win on source order. */
:is(.leather-bg, .menu-strip, .catering) :is(.day-status, .day-status.muted, .day-closed-label) { color: var(--on-dark-soft); }

:is(.leather-bg, .menu-strip, .catering) :is(
  .subnote, .mi-label, .mr-label, .day-weekday, .faq-cat, .cat-field > span,
  .cat-preset-date-row label, .mi-bulk a, .cat-preset-disclosure a
) { color: var(--gold-light); }

:is(.leather-bg, .menu-strip, .catering) :is(
  .pk-note strong, .pk-step strong, .cat-terms strong, .cat-paynote strong,
  details.faq .faq-a strong, .day-mains-list li
) { color: var(--on-dark); }

:is(.leather-bg, .menu-strip, .catering) :is(
  .contact-card a:not(.btn), .cat-done a, .pk-note a, details.faq .faq-a a
) { color: var(--gold-light); }

:is(.leather-bg, .menu-strip, .catering) :is(
  .mi-ings li, .mr-ings li, .addon-list li, .pk-step, .day-closed-label,
  .mi-photo, .mr-photo, .mr-photo-placeholder
) { border-color: rgba(196,152,48,0.16); }

/* Status colours: --error is only 3.0:1 on espresso, so the dark bands use the
   lightened tint declared in section 25 instead. */
:is(.leather-bg, .menu-strip, .catering) :is(.day-status.sold, .day-closed-label.sold, .cat-preset-err, .cat-error) { color: var(--error-on-dark); }
:is(.leather-bg, .menu-strip, .catering) .day-mains-tag.out { color: var(--error-on-dark); background: rgba(232,154,136,0.15); }
:is(.leather-bg, .menu-strip, .catering) .day-mains-tag.low { color: var(--gold-light); background: rgba(196,152,48,0.18); }
:is(.leather-bg, .menu-strip, .catering) .day-status.ok { color: var(--ok-on-dark); }
:is(.leather-bg, .menu-strip, .catering) .day-status.low { color: var(--gold-light); }

/* Form fields invert to a sunken dark well. color-scheme has to flip too or the
   native date/time picker paints light-on-light. */
:is(.leather-bg, .menu-strip, .catering) :is(.cat-field input, .cat-field select, .cat-field textarea,
  .cat-preset-date-row select, .cat-preset-date-row input) {
  background: rgba(6,3,0,0.5);
  border-color: rgba(196,152,48,0.25);
  color: var(--on-dark);
  color-scheme: dark;
}
:is(.leather-bg, .menu-strip, .catering) :is(.cat-field input, .cat-field textarea)::placeholder { color: var(--on-dark-faint); }
:is(.leather-bg, .menu-strip, .catering) :is(.cat-field input:focus, .cat-field select:focus, .cat-field textarea:focus) {
  border-color: var(--gold-light);
  box-shadow: 0 0 0 3px rgba(196,152,48,0.22);
}

/* Panels that carry their own fill need a darker one, not a lighter one. */
:is(.leather-bg, .menu-strip, .catering) :is(.cat-terms, .cat-preset-photo, .cat-preset-soon-photo) { background: rgba(0,0,0,0.25); }
:is(.leather-bg, .menu-strip, .catering) .pk-note { background: rgba(196,152,48,0.09); border-color: var(--border-strong); }
:is(.leather-bg, .menu-strip, .catering) .pk-num { border-color: var(--border-strong); background: rgba(196,152,48,0.12); }
:is(.leather-bg, .menu-strip, .catering) .cat-preset-btn:hover:not(:disabled) { background: var(--gold-bright); color: var(--deep-brown); }
:is(.leather-bg, .menu-strip, .catering) details.faq summary::after { color: var(--gold-light); }

/* ── Carry-over from sections 09 and 13 ───────────────────────────────────
   Four families that already existed for the home page are reused verbatim by
   the inner pages, but on the opposite ground from the one they were written
   for. Contrast, not taste:

   · .wl-* (waitlist) and .state-msg were written for the light order section.
     calendar.js injects both into #calGrid, which on a dark band renders --rust
     at 2.0:1 and --text-muted at 2.4:1. Both fail AA badly.
   · .order-tip-* is cloned into every catering preset card by
     catering-preset.js — same problem.
   · .ag-banner is the mirror image: it was written for the dark hero, and
     menu.html / calendar.html host #agBanner on a cream #top where gold-light
     on a gold wash is 2.2:1.
   · .ag-count was written for the light order section and needs the dark case.

   Neither original rule is edited; these are ordinary later declarations. */

:is(.leather-bg, .menu-strip, .catering) :is(.state-msg, .wl-msg, .order-tip-label, .order-tip-note) { color: var(--on-dark-soft); }
:is(.leather-bg, .menu-strip, .catering) .wl-open { color: var(--gold-light); border-color: var(--border-strong); }
:is(.leather-bg, .menu-strip, .catering) .wl-open:hover { background: rgba(196,152,48,0.14); border-color: var(--gold-light); }
:is(.leather-bg, .menu-strip, .catering) .wl-done { color: var(--ok-on-dark); }
:is(.leather-bg, .menu-strip, .catering) :is(.wl-email, .order-tip-custom input) {
  background: rgba(6,3,0,0.5);
  border-color: rgba(196,152,48,0.25);
  color: var(--on-dark);
  color-scheme: dark;
}
:is(.leather-bg, .menu-strip, .catering) .order-tip-custom { color: var(--on-dark); }
:is(.leather-bg, .menu-strip, .catering) .order-tip-btn {
  background: transparent;
  border-color: var(--border);
  color: var(--on-dark-soft);
}
:is(.leather-bg, .menu-strip, .catering) :is(.order-tip-btn:hover, .order-tip-btn.active) {
  background: var(--gold-light);
  border-color: var(--gold-light);
  color: var(--deep-brown);
}
:is(.leather-bg, .menu-strip, .catering) .ag-count { color: var(--gold-light); background: rgba(196,152,48,0.12); }
:is(.leather-bg, .menu-strip, .catering) .ag-count strong { color: var(--on-dark); }

/* One pre-existing repair, found while auditing contrast across the file and
   fixed the same way — by a later declaration, not by editing section 18.
   .ac-label is written as color:var(--gold-light) at (0,1,0), but it is a <p>
   inside .about-content, and `.about-content p{color:var(--charcoal)}` is
   (0,1,1) and wins. The result on the home page today is charcoal on
   --deep-brown at 1.44:1 — the label "Why We Cook" is effectively invisible.
   The author's intent is unambiguous, so it is restored here. */
.about-card .ac-label { color: var(--gold-light); }

/* .ag-banner inverted: light is now the default, and the hero / dark bands put
   the original treatment back. */
.ag-banner { color: var(--rust); background: rgba(196,152,48,0.14); }
:is(.hero, .leather-bg, .menu-strip, .catering) .ag-banner { color: var(--gold-light); background: rgba(196,152,48,0.09); }


/* ══ 34 · LEGAL PROSE (privacy.html · terms.html) ═════════════════════════
   AG styled these two pages with a standalone inline stylesheet and no nav or
   footer. SBP puts them on site.css with the shared chrome, which means the
   bare <h2>/<p>/<ul>/<li> inside them had nothing at all to style them — this
   file has no generic prose rules. .legal-body is that container: it is the one
   new class name in this half of the file that AG does not have. */

.legal-body {
  max-width: 760px;
  margin: 0 auto;
  font-family: var(--font-serif);
}
.legal-body h1 {
  font-family: var(--font-serif);
  font-size: clamp(1.9rem, 5vw, 2.8rem);
  font-weight: 400;
  line-height: 1.15;
  color: var(--deep-brown);
  margin-bottom: 0.4rem;
}
.legal-body h2 {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--rust);
  margin: 2rem 0 0.6rem;
}
.legal-body h3 {
  font-family: var(--font-serif);
  font-size: 1.12rem;
  font-weight: 600;
  color: var(--deep-brown);
  margin: 1.4rem 0 0.4rem;
}
.legal-body p {
  font-size: 1.08rem;
  line-height: 1.85;
  color: var(--charcoal);
  margin-bottom: 0.9rem;
}
.legal-body ul,
.legal-body ol { margin: 0 0 0.9rem 1.4rem; }
.legal-body li {
  font-size: 1.08rem;
  line-height: 1.8;
  color: var(--charcoal);
  margin-bottom: 0.5rem;
}
.legal-body a { color: var(--rust); }
.legal-body strong { color: var(--deep-brown); font-weight: 600; }
/* Deep-link targets: /terms#sms and /privacy#cookies are linked from
   index.html's two SMS consent labels and from the footer. scroll-margin keeps
   the heading clear of the fixed nav when the anchor is followed. */
.legal-body [id] { scroll-margin-top: calc(var(--nav-height) + 1.5rem); }

.updated {
  font-family: var(--font-sans);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 2.2rem;
}
.back {
  display: inline-block;
  margin-top: 2.5rem;
  font-family: var(--font-sans);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--copper-ink);
  text-decoration: none;
}
.back:hover { color: var(--rust); text-decoration: underline; }

:is(.leather-bg, .menu-strip) .legal-body :is(p, li) { color: var(--on-dark); }
:is(.leather-bg, .menu-strip) .legal-body :is(h1, h3, strong) { color: var(--on-dark); }
:is(.leather-bg, .menu-strip) .legal-body :is(h2, a) { color: var(--gold-light); }
:is(.leather-bg, .menu-strip) :is(.updated, .back) { color: var(--gold-light); }


/* ══ 35 · CONFIRMATION PAGES (success.html · cancel.html) ═════════════════
   One centred card, no nav, no footer, noindex. AG painted the whole page dark;
   SBP keeps the cream ground and lets the card itself be the dark object — an
   espresso plaque with a gold foil edge, which is the same move the home page
   makes with .about-card. Everything inside the card is therefore on dark.

   🔴 .rule COLLISION: AG writes <div class="rule"></div> with no children, but
   SBP's .rule (section 07) is a flex CONTAINER that renders nothing when empty.
   The correct markup is index.html's three-span form. The :empty rule below is
   a SAFETY NET for a page that copies AG's childless div — it cannot match the
   three-span version, so it changes nothing for correct markup. */
.rule:empty {
  display: block;
  width: 64px;
  height: 2px;
  margin: 0 auto;
  background: var(--foil);
}

.brand {
  text-align: center;
  margin: 0 auto 1.9rem;
  animation: confRise 0.8s cubic-bezier(0.2,0.7,0.2,1) both;
}
.brand .badge {
  position: relative;
  width: 96px;
  aspect-ratio: 1;
  margin: 0 auto 1rem;
}
.brand .badge::before {
  content: '';
  position: absolute;
  inset: -8%;
  border: 1px solid var(--border);
  border-radius: 50%;
}
.brand .mark {
  width: 100%;
  height: 100%;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 50%;
  filter: drop-shadow(0 14px 34px rgba(12,6,0,0.35));
}
/* AG's .b-amaze / .b-grace are deliberately not ported — the lockup is SBP's
   own script wordmark, reusing .nav-logo-text / .loader-word from sections 08
   and 09. Both of those are coloured for the dark nav and the dark loader: the
   shimmer gradient is cream-to-gold and .loader-word is --on-dark, so on this
   page's cream ground the wordmark would render invisible. Repainted here, and
   restored to cream if the page is ever wrapped in a dark band. */
.brand .nav-logo-text {
  font-size: 2.1rem;
  background: none;
  color: var(--rust);
  -webkit-text-fill-color: var(--rust);
  animation: none;
}
.brand .loader-word { color: var(--rust); opacity: 1; transform: none; animation: none; }
:is(.leather-bg, .menu-strip) .brand .nav-logo-text {
  color: var(--gold-light);
  -webkit-text-fill-color: var(--gold-light);
}
:is(.leather-bg, .menu-strip) .brand .loader-word { color: var(--on-dark); }

.card {
  position: relative;
  max-width: 560px;
  width: 100%;
  margin: 0 auto;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-card);
  overflow: hidden;
  /* Colour and image declared separately so the card still paints espresso if
     the gradient is ever dropped — everything inside it is light-on-dark. */
  background-color: var(--espresso);
  background-image: linear-gradient(180deg, var(--rich-brown) 0%, var(--espresso) 100%);
  box-shadow: var(--shadow-deep);
  animation: confCardIn 0.6s cubic-bezier(0.2,0.7,0.2,1) both;
}
.card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--foil);
}
.card-inner { padding: 3.2rem 2.75rem 2.75rem; text-align: center; }

.seal-badge {
  position: relative;
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  margin: 0 auto 1.9rem;
  border-radius: 50%;
  background: var(--footer-black);
  box-shadow: 0 0 0 1px var(--border) inset;
  font-size: 2rem;
  line-height: 1;
}
.seal-badge::before {
  content: '';
  position: absolute;
  inset: 12%;
  border: 1px solid var(--border);
  border-radius: 50%;
}
.seal-badge .g { position: relative; z-index: 2; color: var(--gold-light); }

.eyebrow {
  font-family: var(--font-sans);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 1rem;
}
.headline {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 6vw, 3.1rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.06;
  text-transform: uppercase;
  color: var(--on-dark);
  margin-bottom: 0.6rem;
}
.subhead {
  font-family: var(--font-script);
  font-size: 1.75rem;
  line-height: 1.2;
  color: var(--gold-light);
  margin-bottom: 1.9rem;
}
.card .rule,
.card .rule:empty { margin-bottom: 1.9rem; }
.card .rule { justify-content: center; }

.message {
  font-family: var(--font-serif);
  font-size: 1.08rem;
  line-height: 1.85;
  color: var(--on-dark-soft);
  margin-bottom: 2rem;
}
.message strong { color: var(--gold-light); font-weight: 400; }

/* Scoped to the card: section 19 already owns a bare .info-row for the home
   page's Find Us block, and an unscoped rule here would change its gap. */
.card-inner .info-row {
  display: flex;
  gap: 0.85rem;
  margin-bottom: 1.9rem;
}
.info-box {
  flex: 1;
  padding: 1.1rem 0.85rem;
  background: rgba(6,3,0,0.5);
  border: 1px solid var(--border-faint);
  border-radius: var(--radius);
}
.info-box-icon { font-size: 1.35rem; line-height: 1; margin-bottom: 0.5rem; }
.info-box-label {
  font-family: var(--font-sans);
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 0.35rem;
}
.info-box-value {
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1.45;
  color: var(--on-dark);
}

.cta-row {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
}
.cta-row .btn { flex: 1; }

.session-note {
  margin-top: 1.4rem;
  font-family: var(--font-sans);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  /* --on-dark-faint is a 3.3:1 decorative tint; this line carries the order
     reference, so it uses the readable step. */
  color: var(--on-dark-soft);
}

@keyframes confRise   { from { opacity: 0; transform: translateY(22px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes confCardIn { from { opacity: 0; transform: translateY(30px); }            to { opacity: 1; transform: none; } }

@media (max-width: 480px) {
  .card-inner { padding: 2.5rem 1.5rem 2rem; }
  .card-inner .info-row,
  .cta-row { flex-direction: column; }
}


/* ══ 36 · 404 ═════════════════════════════════════════════════════════════
   Port of AG's standalone not-found page onto site.css plus the shared nav and
   footer. AG's "AGE" monogram .seal is dropped (rule: no AG brand chrome) —
   the page uses index.html's chef-hat SVG instead, which needs no CSS.

   The <main> needs id="not-found" for the centring and the giant numeral. If it
   is missing the page still reads, it just loses the display treatment. */

#not-found {
  display: grid;
  place-items: center;
  min-height: 60vh;
  padding: calc(var(--nav-height) + 3.5rem) var(--page-pad) 4rem;
  text-align: center;
}
.wrap { max-width: 560px; }
#not-found h1,
.wrap h1 {
  font-family: var(--font-serif);
  font-size: clamp(4.5rem, 18vw, 7.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--rust);
  margin-bottom: 0.3rem;
}
.lead {
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 4vw, 1.6rem);
  font-weight: 600;
  color: var(--deep-brown);
  margin-bottom: 0.9rem;
}
#not-found p,
.wrap > p {
  font-family: var(--font-serif);
  font-size: 1.08rem;
  line-height: 1.8;
  color: var(--text-muted);
  max-width: 440px;
  margin: 0 auto 1.9rem;
}

:is(.leather-bg, .menu-strip) :is(#not-found h1, .wrap h1) { color: var(--gold-light); }
:is(.leather-bg, .menu-strip) .lead { color: var(--on-dark); }
:is(.leather-bg, .menu-strip) :is(#not-found p, .wrap > p) { color: var(--on-dark-soft); }


/* ══ 37 · MANAGE — BACK OF HOUSE ══════════════════════════════════════════
   The owner dashboard (noindex, behind Cloudflare Access in production). AG
   carried this as a ~285-line inline <style>; it lives here now.

   It is a working tool used on a phone in a kitchen, so this is the one surface
   in the file where density and contrast beat decoration: light ground, dark
   ink, hairline ledger ruling, 44px touch targets, and status colours that are
   readable at arm's length rather than atmospheric. The brand still shows up —
   serif small-caps headings, a gold foil edge on each card, the script subtitle
   — but never at the cost of legibility.

   Every id and functional class manage.js queries is preserved verbatim. */

/* ── Shell ── */
.mg-wrap {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 6rem;
}
/* Section 25 gives every bare <section> the marketing page's 7rem padding.
   #gate and #panel are <section> elements; inside the dashboard that padding is
   wrong, so it is reset here. */
.mg-wrap section { padding: 0; }

.mg-head {
  text-align: center;
  margin-bottom: 1.9rem;
  animation: mgFadeDown 0.7s cubic-bezier(0.2,0.7,0.2,1) both;
}
.mg-overline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  font-family: var(--font-serif);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--copper-ink);
  margin-bottom: 0.75rem;
}
.mg-overline::before,
.mg-overline::after {
  content: '';
  width: 44px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-strong));
}
.mg-overline::after { background: linear-gradient(90deg, var(--border-strong), transparent); }
/* Gold-gradient text is AG's move and it fails AA on a cream ground, so the
   title is set in deep brown and the gold stays in the ornament. */
.mg-title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(2.1rem, 6vw, 3.25rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--deep-brown);
}
/* Scoped: manage.js also emits a bare .mg-sub as a small muted note inside
   order rows, and in AG the two definitions collided. */
.mg-head .mg-sub {
  font-family: var(--font-script);
  font-size: 1.75rem;
  line-height: 1.2;
  color: var(--copper);
  margin-top: 0.15rem;
}
.mg-sub { font-size: 0.68rem; color: var(--text-muted); margin-top: 0.15rem; }
.mg-foot { text-align: center; margin-top: 2rem; }

@keyframes mgFadeDown { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
@keyframes mgFadeUp   { from { opacity: 0; transform: translateY(16px);  } to { opacity: 1; transform: none; } }

/* ── Environment switch ── */
.mg-env {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin: 0 0 1rem;
}
/* A disabled button in this row means "this is the environment you are in". */
.mg-env .mg-btn:disabled {
  opacity: 1;
  background: var(--gold-light);
  color: var(--deep-brown);
  border-color: transparent;
  cursor: default;
  box-shadow: 0 3px 14px rgba(196,152,48,0.3);
}
/* Demo mode: manage.js stamps body.mg-demo, and every refund / financial /
   customer-export control carrying .mg-demo-hide disappears. Their handlers
   no-op as a second layer — this is the visual half of that pair. */
body.mg-demo .mg-demo-hide { display: none !important; }

/* ── Sticky tab bar ── */
.mg-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  margin: 0 -1.25rem 1.9rem;
  padding: 0.6rem 1.25rem;
  background: rgba(250,246,238,0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-faint);
  box-shadow: 0 14px 30px -22px rgba(12,6,0,0.55);
}
/* manage.html has no site nav today (AG's did not either). If one is ever added
   the tab bar has to clear it, or the first tab row hides underneath. */
body:has(nav#nav) .mg-nav { top: var(--nav-height); }
.mg-nav::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 4%, var(--border-strong) 50%, transparent 96%);
}
.mg-nav-inner {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.mg-nav-inner::-webkit-scrollbar { height: 4px; }
.mg-nav-inner::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

.mg-tab {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: inline-flex;
  align-items: center;
  padding: 0.6rem 1.25rem;
  background: rgba(196,152,48,0.05);
  border: 1px solid var(--border-faint);
  border-radius: 999px;
  font-family: var(--font-serif);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.18s, border-color 0.18s, background 0.18s, box-shadow 0.18s;
}
.mg-tab:hover { color: var(--rust); border-color: var(--border); background: rgba(196,152,48,0.1); }
.mg-tab.active {
  color: var(--deep-brown);
  background: var(--gold-light);
  border-color: transparent;
  box-shadow: 0 3px 14px rgba(196,152,48,0.32);
}

.mg-tab-panel { display: none; }
.mg-tab-panel.active { display: block; animation: mgFadeUp 0.45s cubic-bezier(0.2,0.7,0.2,1) both; }
.mg-today-main { display: flex; flex-direction: column; gap: 1.1rem; }

@media (min-width: 900px) {
  #tab-setup.active {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.4rem;
    align-items: start;
  }
}

/* ── Cards ── */
.mg-card {
  position: relative;
  overflow: hidden;
  scroll-margin-top: 5.25rem;
  background: var(--warm-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 1.5rem 1.35rem;
  margin-bottom: 1.4rem;
  box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset, 0 10px 30px -22px rgba(12,6,0,0.5);
  transition: border-color 0.25s;
}
.mg-card:hover { border-color: var(--border-strong); }
.mg-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--foil);
  opacity: 0.85;
}
.mg-card::after {
  content: '';
  position: absolute;
  top: 2px; right: 0;
  width: 190px; height: 120px;
  pointer-events: none;
  background: radial-gradient(120% 100% at 100% 0%, rgba(196,152,48,0.1) 0%, rgba(0,0,0,0) 70%);
}
#panel .mg-card { animation: mgFadeUp 0.6s cubic-bezier(0.2,0.7,0.2,1) both; }
#panel .mg-card:nth-of-type(1) { animation-delay: 0.04s; }
#panel .mg-card:nth-of-type(2) { animation-delay: 0.09s; }
#panel .mg-card:nth-of-type(3) { animation-delay: 0.14s; }
#panel .mg-card:nth-of-type(4) { animation-delay: 0.19s; }
#panel .mg-card:nth-of-type(n+5) { animation-delay: 0.24s; }

/* Today is the hero band — the card the owner actually looks at all morning. */
#sec-today {
  border-color: var(--border-strong);
  background: linear-gradient(168deg, rgba(196,152,48,0.1) 0%, var(--warm-white) 55%);
  box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset, 0 14px 40px -26px rgba(196,152,48,0.6);
}
#sec-today::before { height: 3px; opacity: 1; }
#sec-today h2 { font-size: 0.95rem; letter-spacing: 0.22em; color: var(--rust); }
#sec-today .mg-stats { grid-template-columns: repeat(4, 1fr); }

.mg-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1.1rem;
}
.mg-card h2 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  font-family: var(--font-serif);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--copper-ink);
}
.mg-card h2::before {
  content: '◆';
  font-size: 0.5rem;
  color: var(--gold);
  transform: translateY(-1px);
}
.mg-card-hint { font-size: 0.68rem; line-height: 1.55; color: var(--text-muted); }

/* ── Rows and fields ── */
.mg-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--border-hairline);
}
.mg-row:first-of-type { border-top: none; }
.mg-row .lbl {
  min-width: 120px;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--deep-brown);
}
.mg-row .meta { font-size: 0.72rem; color: var(--text-muted); }
.mg-row.low .meta { color: var(--copper-ink); font-weight: 600; }
.mg-row.out .meta { color: var(--error); font-weight: 600; }
.meta-other { font-size: 0.68rem; color: var(--text-muted); opacity: 0.85; margin-top: 2px; }

.mg-field { display: flex; flex-direction: column; gap: 0.3rem; }
.mg-field > span {
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--copper-ink);
}
.mg-field.mg-grow { flex: 1 1 240px; }
label.mg-check {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  color: var(--charcoal);
  cursor: pointer;
}
label.mg-check input[type=checkbox] { accent-color: var(--copper); width: 15px; height: 15px; }

input.mg-num,
input.mg-text,
select.mg-sel,
textarea.mg-textarea,
input.fi-date {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--deep-brown);
  font-family: var(--font-sans);
  color-scheme: light;
  outline: none;
  transition: border-color 0.18s, box-shadow 0.18s;
}
input.mg-num  { width: 76px;  padding: 0.6rem; font-size: 0.92rem; text-align: center; }
input.mg-text { width: 164px; padding: 0.6rem 0.65rem; font-size: 0.85rem; text-align: left; }
select.mg-sel { padding: 0.6rem 0.65rem; font-size: 0.85rem; }
textarea.mg-textarea {
  width: 100%;
  min-height: 70px;
  padding: 0.55rem 0.6rem;
  font-size: 0.85rem;
  line-height: 1.6;
  resize: vertical;
}
input.mg-num:hover, input.mg-text:hover, select.mg-sel:hover, textarea.mg-textarea:hover { border-color: var(--border-strong); }
input.mg-num:focus, input.mg-text:focus, select.mg-sel:focus, textarea.mg-textarea:focus {
  border-color: var(--copper);
  box-shadow: 0 0 0 3px rgba(196,152,48,0.2);
}

/* ── Buttons ── */
.mg-btn {
  position: relative;
  overflow: hidden;
  min-height: 44px;              /* kitchen phone: thumb-sized targets */
  padding: 0.65rem 1.1rem;
  background: var(--gold-light);
  color: var(--deep-brown);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.16s, color 0.16s, border-color 0.16s, transform 0.14s, box-shadow 0.2s;
}
.mg-btn:hover:not(:disabled) { background: var(--copper); color: #fff; transform: translateY(-1px); }
.mg-btn:active { transform: translateY(0); }
.mg-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.mg-btn.ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--copper-ink);
}
.mg-btn.ghost:hover:not(:disabled) { background: rgba(196,152,48,0.1); border-color: var(--copper); color: var(--rust); }
.mg-btn.small { min-height: 36px; padding: 0.4rem 0.7rem; font-size: 0.58rem; }
.mg-btn.on { background: var(--copper); color: #fff; }

.mg-presets { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: flex-end; }
.mg-preset {
  min-height: 36px;
  padding: 0.45rem 0.9rem;
  background: rgba(196,152,48,0.05);
  border: 1px solid var(--border-faint);
  border-radius: 999px;
  font-family: var(--font-serif);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color 0.18s, color 0.18s, background 0.18s, box-shadow 0.18s;
}
.mg-preset:hover { border-color: var(--copper); color: var(--rust); }
.mg-preset.active {
  background: var(--gold-light);
  color: var(--deep-brown);
  border-color: transparent;
  box-shadow: 0 3px 12px rgba(196,152,48,0.28);
}

/* ── Messages and states ── */
.mg-msg {
  min-height: 16px;
  margin-top: 0.4rem;
  font-family: var(--font-sans);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.mg-msg.ok,   .mg-wrap .ok   { color: var(--ok); }
.mg-msg.err,  .mg-wrap .err  { color: var(--error); }
.mg-msg.warn, .mg-wrap .warn { color: var(--copper-ink); }

.mg-note {
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-muted);
  margin-bottom: 0.8rem;
}
details.mg-note > summary {
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--copper-ink);
}
pre.mg-note {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.72rem;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 420px;
  overflow: auto;
  padding: 0.9rem 1rem;
  background: var(--cream);
  border: 1px solid var(--border-faint);
  border-radius: var(--radius);
  color: var(--charcoal);
}
/* manage.js emits several one-letter helper classes (.k .v .sub .line .num
   .money .small) as bare spans. They are scoped to .mg-wrap so they can never
   leak onto the marketing pages; the more specific table rules above still win
   inside a .mg-table. */
.mg-wrap .small { font-size: 0.68rem; }
.mg-wrap .num   { font-variant-numeric: tabular-nums; }
.mg-wrap .money { color: var(--rust); font-weight: 600; font-variant-numeric: tabular-nums; }
.mg-wrap .k     { font-size: 0.55rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--copper-ink); }
.mg-wrap .sub   { font-size: 0.62rem; color: var(--text-muted); }
.mg-wrap .line  { font-size: 0.75rem; color: var(--charcoal); }

.mg-loading {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 0;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.mg-loading .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gold);
  animation: mgPulse 1s ease-in-out infinite;
}
@keyframes mgPulse { 0%,100% { opacity: 0.25; transform: scale(0.8); } 50% { opacity: 0.9; transform: scale(1); } }

.mg-skel {
  height: 14px;
  border-radius: 4px;
  margin: 0.6rem 0;
  background: linear-gradient(90deg, rgba(196,152,48,0.08) 0%, rgba(196,152,48,0.2) 50%, rgba(196,152,48,0.08) 100%);
  background-size: 200% 100%;
  animation: mgShimmer 1.3s linear infinite;
}
@keyframes mgShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.mg-empty {
  text-align: center;
  padding: 1.6rem 0.6rem;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-style: italic;
  color: var(--text-muted);
}
.mg-empty .em-mark {
  display: block;
  margin-bottom: 0.35rem;
  font-family: var(--font-script);
  font-size: 1.75rem;
  font-style: normal;
  color: var(--copper);
  opacity: 0.8;
}

/* ── Stat tiles ── */
.mg-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-bottom: 0.4rem;
}
.mg-stat,
.mg-panel {
  position: relative;
  overflow: hidden;
  background: var(--cream);
  border: 1px solid var(--border-faint);
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
  box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset;
}
.mg-stat { transition: border-color 0.2s, transform 0.2s; }
.mg-stat:hover { border-color: var(--border); transform: translateY(-1px); }
.mg-stat::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 38px; height: 2px;
  background: var(--foil);
}
.mg-stat .k,
.mg-panel .k {
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--copper-ink);
}
.mg-stat .v {
  margin-top: 0.25rem;
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--deep-brown);
  font-variant-numeric: tabular-nums;
}
.mg-stat .v.money { color: var(--rust); }
.mg-stat .v.warn  { color: var(--error); }
.mg-stat .sub { margin-top: 0.25rem; font-size: 0.62rem; color: var(--text-muted); }

.mg-progress {
  margin-top: 0.5rem;
  height: 7px;
  border-radius: 999px;
  background: rgba(196,152,48,0.14);
  border: 1px solid var(--border-faint);
  overflow: hidden;
}
.mg-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--foil);
  transition: width 0.5s cubic-bezier(0.2,0.7,0.2,1);
}

.mg-panel .headline {
  margin-top: 0.2rem;
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0;
  text-transform: none;
  color: var(--deep-brown);
}
.mg-panel .line { margin-top: 0.35rem; font-size: 0.75rem; color: var(--charcoal); }
.mg-panel .line .money { color: var(--rust); font-weight: 600; }

.mg-today-row2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; margin-top: 0.75rem; }
.mg-today-links { margin-top: 0.9rem; }
.mg-today-links a {
  font-family: var(--font-sans);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--copper-ink);
  text-decoration: none;
}
.mg-today-links a:hover { color: var(--rust); text-decoration: underline; }

.mg-fut-list { margin-top: 0.5rem; border-top: 1px solid var(--border-hairline); }
.mg-fut-item {
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--border-hairline);
  font-size: 0.78rem;
  color: var(--charcoal);
}
.mg-fut-item:last-child { border-bottom: none; }
.mg-fut-item .fi-date { color: var(--text-muted); }

/* ── Tables ── */
.mg-tablewrap {
  margin-top: 0.25rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border-faint);
  border-radius: var(--radius);
}
table.mg-table {
  width: 100%;
  min-width: 360px;
  border-collapse: collapse;
  font-size: 0.82rem;
}
table.mg-table th {
  padding: 0.65rem 0.8rem;
  background: rgba(196,152,48,0.08);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-sans);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--copper-ink);
  text-align: left;
  white-space: nowrap;
}
table.mg-table td {
  padding: 0.65rem 0.8rem;
  border-bottom: 1px solid var(--border-hairline);
  color: var(--charcoal);
  white-space: nowrap;
}
table.mg-table tbody tr:nth-child(even) td { background: rgba(196,152,48,0.035); }
table.mg-table tbody tr:hover td { background: rgba(196,152,48,0.09); }
table.mg-table tr:last-child td { border-bottom: none; }
table.mg-table td.num, table.mg-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.mg-table td.money { color: var(--rust); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ── Status chips ── */
.mg-chip {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--border-faint);
  border-radius: 999px;
  background: rgba(196,152,48,0.06);
  font-family: var(--font-sans);
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
.mg-chip.paid      { color: var(--gold-deep);  border-color: rgba(196,152,48,0.5);  background: rgba(196,152,48,0.14); }
.mg-chip.picked_up { color: var(--ok);         border-color: rgba(92,107,79,0.45);  background: rgba(92,107,79,0.14); }
.mg-chip.arrived   { color: var(--ok);         border-color: rgba(92,107,79,0.6);   background: rgba(92,107,79,0.2); animation: mgArrived 1.6s ease-in-out infinite; }
/* --error-ink / --rust rather than --error / --copper-ink: on their own tinted
   wash the lighter pair lands at 4.1:1 and 4.4:1. */
.mg-chip.refunded,
.mg-chip.out       { color: var(--error-ink);  border-color: rgba(192,73,43,0.5);   background: rgba(192,73,43,0.1); }
.mg-chip.manual    { color: var(--rust);       border-color: rgba(184,115,51,0.45); background: rgba(184,115,51,0.12); }
.mg-chip.no-show,
.mg-chip.no_show   { color: var(--text-muted); border-color: var(--border-faint);   background: rgba(122,106,90,0.08); }
@keyframes mgArrived {
  0%, 100% { box-shadow: 0 0 0 0 rgba(92,107,79,0.3); }
  50%      { box-shadow: 0 0 10px 1px rgba(92,107,79,0.28); }
}

/* ── Order rows ── */
.mg-order {
  margin: 0 -0.6rem;
  padding: 0.9rem 0.6rem;
  border-top: 1px solid var(--border-hairline);
  border-radius: var(--radius);
  transition: background 0.18s;
}
.mg-order:first-of-type { border-top: none; }
.mg-order:hover { background: rgba(196,152,48,0.05); }
.mg-order.refunded { opacity: 0.6; text-decoration: line-through; }
.mg-order.no-show  { opacity: 0.75; }
.mg-order .oc-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.35rem;
}
.mg-order .oc-name {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--deep-brown);
}
.mg-order .oc-phone { font-size: 0.75rem; color: var(--text-muted); }
.mg-order .oc-pickup { font-size: 0.75rem; font-weight: 700; color: var(--rust); letter-spacing: 0.02em; }
.mg-order .oc-total {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--rust);
  font-variant-numeric: tabular-nums;
}
.mg-order .oc-lines {
  margin: 0.25rem 0;
  font-family: var(--font-serif);
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--charcoal);
}
/* The line the kitchen must not miss. Loud on purpose. */
.mg-order .oc-removal { color: var(--error); font-weight: 700; text-decoration: underline; }
.mg-order .oc-refund-reason {
  margin-top: 0.25rem;
  font-size: 0.68rem;
  font-style: italic;
  color: var(--text-muted);
  text-decoration: none;
}
.mg-order .oc-reason {
  flex: 1 1 150px;
  min-width: 110px;
  padding: 0.5rem 0.6rem;
  background: var(--cream);
  border: 1px solid var(--border-faint);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 0.78rem;
  color: var(--deep-brown);
}
.mg-order .oc-reason::placeholder { color: var(--text-muted); }
.mg-order .oc-reason:focus { outline: none; border-color: var(--copper); }
.mg-order .oc-settime,
.mg-order .oc-movedate {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.4rem;
  font-size: 0.72rem;
  color: var(--text-muted);
}
.mg-order .mg-thumb,
.mg-thumb {
  width: 44px; height: 44px;
  object-fit: cover;
  border: 1px solid var(--border-faint);
  border-radius: var(--radius);
  background: var(--card-void);
}
.mg-thumb-empty {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  font-size: 0.6rem;
  color: var(--text-muted);
}

.mg-date-heading {
  margin-top: 1.1rem;
  font-family: var(--font-serif);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--deep-brown);
}
.mg-date-heading:first-child { margin-top: 0; }
.mg-prep {
  margin: 0.6rem 0 0.4rem;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(196,152,48,0.08);
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--rust);
}

/* ── Store credit + quick quote ── */
.mg-credit-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}
.cat-estimate-panel {
  margin-top: 0.9rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--cream);
}
.cat-est-tier {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--border-hairline);
  font-family: var(--font-serif);
  font-size: 1.05rem;
  color: var(--charcoal);
}
.cat-est-tier:last-child { border-bottom: none; }
.cat-est-tier strong { color: var(--rust); font-weight: 700; }
input.mg-num.cat-est-margin { width: 68px; }

/* ── Gate ── */
#gate {
  max-width: 380px;
  margin: 3.5rem auto;
  text-align: center;
  animation: mgFadeUp 0.7s cubic-bezier(0.2,0.7,0.2,1) both;
}
#gate .mg-card { padding: 1.9rem 1.6rem; }
#gate .mg-card h2 { justify-content: center; }
#gate input {
  width: 100%;
  margin-bottom: 0.75rem;
  padding: 0.9rem;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 1rem;
  letter-spacing: 0.35em;
  text-align: center;
  color: var(--deep-brown);
  color-scheme: light;
  outline: none;
  transition: border-color 0.18s, box-shadow 0.18s;
}
#gate input::placeholder { letter-spacing: 0.1em; color: var(--text-muted); }
#gate input:focus { border-color: var(--copper); box-shadow: 0 0 0 3px rgba(196,152,48,0.2); }
#gate .mg-btn { width: 100%; }

@media (max-width: 720px) {
  #sec-today .mg-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 720px) {
  .mg-stats { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 560px) {
  .mg-stats { grid-template-columns: repeat(2, 1fr); }
  .mg-today-row2 { grid-template-columns: 1fr; }
  .mg-row .lbl { min-width: 100%; }
  .mg-wrap { padding: 1.6rem 0.9rem 4rem; }
  .mg-nav { margin-left: -0.9rem; margin-right: -0.9rem; padding-left: 0.9rem; padding-right: 0.9rem; }
  input.mg-text { width: 100%; }
}

/* ── Kitchen ticket (print) ─────────────────────────────────────────────────
   manage.js adds body.mg-printing-orders, prints, then removes it. This
   reformats the already-rendered Orders card as plain black-on-white; it is the
   sheet that goes on the pass, so it is behaviour-identical to AG's. */
@media print {
  body.mg-printing-orders { background: #fff !important; color: #000 !important; }
  body.mg-printing-orders nav#nav,
  body.mg-printing-orders footer#site-footer,
  body.mg-printing-orders .mg-head,
  body.mg-printing-orders .mg-env,
  body.mg-printing-orders .mg-nav,
  body.mg-printing-orders #gate,
  body.mg-printing-orders #back-to-top,
  body.mg-printing-orders .float-btn,
  body.mg-printing-orders .mg-foot { display: none !important; }
  body.mg-printing-orders .mg-tab-panel { display: none !important; }
  body.mg-printing-orders #tab-today { display: block !important; }
  body.mg-printing-orders #sec-today,
  body.mg-printing-orders #ordersMsg { display: none !important; }
  body.mg-printing-orders #sec-orders > .mg-card-head,
  body.mg-printing-orders #sec-orders > .mg-row,
  body.mg-printing-orders #ordersCsv,
  body.mg-printing-orders .mg-order .mg-row,
  body.mg-printing-orders .mg-chip.arrived { display: none !important; }
  body.mg-printing-orders #sec-orders {
    display: block !important;
    border: none !important;
    background: #fff !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  body.mg-printing-orders #sec-orders::before,
  body.mg-printing-orders #sec-orders::after { display: none !important; }
  body.mg-printing-orders #orders { color: #000 !important; font-size: 13px; }
  body.mg-printing-orders .mg-date-heading {
    color: #000 !important; font-size: 18px;
    border-bottom: 2px solid #000; padding-bottom: 4px; margin: 0 0 8px;
    page-break-after: avoid;
  }
  body.mg-printing-orders .mg-prep {
    color: #000 !important; background: none !important; font-size: 15px; font-weight: 700;
    border: 1px solid #000; padding: 6px 8px; margin: 0 0 10px;
  }
  body.mg-printing-orders .mg-order {
    color: #000 !important;
    border: none !important;
    border-top: 1px dashed #000 !important;
    padding: 8px 0 !important;
    margin: 0 !important;
    opacity: 1 !important;
    text-decoration: none !important;
    page-break-inside: avoid;
  }
  body.mg-printing-orders .mg-order .oc-name { color: #000 !important; font-size: 15px; }
  body.mg-printing-orders .mg-order .oc-phone,
  body.mg-printing-orders .mg-order .oc-total,
  body.mg-printing-orders .mg-order .oc-lines { color: #000 !important; font-size: 14px; }
  body.mg-printing-orders .mg-order .oc-pickup { color: #000 !important; font-weight: 700; }
  body.mg-printing-orders .mg-order .oc-removal { color: #000 !important; font-weight: 700; text-decoration: underline; }
  body.mg-printing-orders .mg-chip { color: #000 !important; background: none !important; border: 1px solid #000 !important; }
}


/* ══ 38 · REDUCED MOTION (sections 25-37) ═════════════════════════════════
   Section 24 already zeroes every animation and transition globally with
   !important, so this block only has to stop the things that would otherwise
   be left mid-state or looping — same approach, applied to the new surfaces. */

@media (prefers-reduced-motion: reduce) {
  .brand,
  .card,
  .mg-head,
  #gate,
  #panel .mg-card,
  .mg-tab-panel.active,
  .mg-chip.arrived,
  .mg-loading .dot,
  .mg-skel { animation: none !important; opacity: 1; transform: none; }

  .mg-skel { background: rgba(196,152,48,0.14); }

  .mi-card:hover, .mr-card:hover, .contact-card:hover, .day-card:hover,
  .cat-preset-card:hover, .mg-stat:hover, .mg-btn:hover { transform: none; }
}

/* ══ 39 · GAP-FILL (post-verification) ════════════════════════════════════
   Classes shipped in the markup that sections 25-38 did not define. Found by
   diffing every class used across the 13 pages against this stylesheet, so
   these are real gaps rather than speculative additions.
   Appended rather than merged into 34/37 so the audit trail stays readable. */

/* ── .legal-pending — draft markers on privacy.html / terms.html ──────────
   These paragraphs read "[PENDING CLIENT/LEGAL REVIEW: ...]" and sit inline in
   the policy body. Unstyled they are indistinguishable from settled policy
   text, which is exactly the wrong impression for an unreviewed legal page.
   Deliberately loud: nobody should be able to mistake one for a real clause. */
.legal-pending {
  display: block;
  margin: 1.25rem 0;
  padding: 0.85rem 1rem 0.85rem 1.1rem;
  border-left: 4px solid var(--copper);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: rgba(184,115,51,0.09);
  color: var(--copper-ink);
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-style: normal;
  line-height: 1.65;
  letter-spacing: 0.01em;
}
.legal-pending::before {
  content: "Editorial note — not yet reviewed";
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--copper);
}

/* ── manage.html shell ────────────────────────────────────────────────────
   .mg-page is on <body>. Without it the admin portal has no page ground at
   all and .mg-wrap floats on the cream storefront body. */
body.mg-page {
  background: var(--warm-white);
  min-height: 100vh;
}

/* Full-width button inside a .mg-row / toolbar. */
.mg-btn.mg-block {
  display: block;
  width: 100%;
  text-align: center;
}

/* Opt-in wide variant for panels that hold tables. */
.mg-wide { grid-column: 1 / -1; width: 100%; }

/* A .mg-row with its own padding suppressed — used where the row sits flush
   inside an already-padded panel. */
.mg-row-flush { padding-left: 0; padding-right: 0; }

/* Raw command/JSON output inside a .mg-note. Monospace and scrollable so a
   long line cannot stretch the panel. */
.mg-pre-out {
  max-height: 18rem;
  overflow: auto;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--border-faint);
  border-radius: var(--radius);
  background: rgba(12,6,0,0.05);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.72rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Agency credit in the portal footer. */
.mg-powered {
  margin-top: 2rem;
  text-align: center;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.mg-powered a { color: var(--copper-ink); }

/* Photo-confirm modal built by manage.js. Without position:fixed this renders
   inline in document flow, part-way down the page, instead of as an overlay. */
.mg-photo-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(12,6,0,0.62);
}

/* Signed-in identity chip, injected by manage.js once Access resolves. */
.mg-signed-in {
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

/* 404 chef-hat mark. */
.nf-hat {
  display: block;
  margin: 0 auto 1.1rem;
  width: 72px;
  height: auto;
  opacity: 0.9;
}

/* FAQ footer promo + CTA row. */
.faq-promo {
  margin-top: 2.5rem;
  padding: 1.4rem 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(196,152,48,0.07);
  text-align: center;
}
.faq-foot-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 1.1rem;
}

/* ══ 40 · REAL LOGO ═══════════════════════════════════════════════════════
   The client's actual mark (script wordmark under a chef's toque formed from a
   spoon and spatula) replaces the hand-built SVG wordmark and the separate
   .hero-hat toque. Source art is black-on-white; site/images/logo-*.png are
   transparent recolourings of it — cream for dark grounds, espresso for light.

   .hero-logo-svg keeps its name and id even though the element is now an <img>,
   because home.js's parallax queries #hero-logo-svg. The width/max-width rules
   above at section 08 still apply; only the shimmer is gone (it was an SVG-only
   SMIL effect, and home.js null-guards its absence). */

/* Nav mark. Sized by height so it optically matches the old script text. */
.nav-logo-img {
  display: block;
  height: 42px;
  width: auto;
  transition: opacity 0.3s ease;
}
.nav-logo:hover .nav-logo-img,
.nav-logo:focus-visible .nav-logo-img { opacity: 0.82; }

@media (max-width: 720px) {
  .nav-logo-img { height: 34px; }
}

/* Footer mark. Dimmed to match the muted footer treatment the script text had. */
.footer-logo-img {
  display: block;
  height: 58px;
  width: auto;
  opacity: 0.75;
}
.footer-logo { font-size: 0; line-height: 0; }   /* the div is now a pure wrapper */

/* About-section seal: the espresso mark on the cream card. */
.about-seal img,
.ac-seal img { max-width: 100%; height: auto; }

@media (prefers-reduced-motion: reduce) {
  .nav-logo-img { transition: none; }
}