/* ===========================================================================
   Juancito's Tacos — site/v2  ·  CONCEPT: "LA MESA FAMILIAR" (the family table)
   ---------------------------------------------------------------------------
   The site felt as a warm Mexican home kitchen where heirloom recipes are passed
   down — Juan & Valerie grew it from a Jensen-Beach food trailer into a family
   taquería, and the regulars say it "tastes like coming home and having a
   handmade meal." Grounded in the 140 real reviews: "like coming home and having
   a handmade meal" (Kristen G.), "been following Juan & Valerie since the food
   trailer… love these folks and their food" (Kurt M.), "family owned and
   operated… the staff went above and beyond" (Estela L.), "homemade tortillas…
   made to order" (Keth), "prepared with great care" (Adam K.).

   The concept is FELT, never labeled:
   - the SIGNATURE moment is each favorite dish presented as a handwritten RECIPE
     CARD from the family's recipe box (script name + "from the family kitchen"
     note + a torn-paper / tape detail) — an heirloom ficha de receta;
   - section dividers are a STITCHED textile seam (a Mexican mantel cross-stitch),
     a warm-home motif (NOT papel-picado — v1 owns that);
   - the page is a calm editorial story (story-first), warm clay & masa-cream
     tones, a soft heritage serif — a different PERSONALITY from v1's bright
     lime/orange lotería fiesta.

   Built WITHIN the frozen mechanics: nav.js / order.js / reviews.js / gallery.js
   / menu-nav.js copied VERBATIM; this is a bespoke skin over the same data-hooks.
   Palette sampled from their terracotta-walled room + warm plates; every
   load-bearing pair AA-verified (web-ui-kit/contrast.py).
   =========================================================================== */

:root{
  /* warm grounds */
  --masa:     #FBF3E6;   /* masa-cream page ground (warm, soft) */
  --masa-2:   #F4E7D2;   /* deeper card / panel mat */
  --clay:     #C2602E;   /* terracotta — warm bands (decorative) */
  --clay-d:   #8F3F1A;   /* deep clay */
  --cocoa:    #2A1B12;   /* dark cocoa depth bands (the night kitchen) */
  --cocoa-2:  #3A2417;   /* slightly lifted cocoa */
  --adobe:    #241007;   /* footer */
  /* brand-warm accents (from their food + room) */
  --brick:    #B23A1E;   /* salsa-brick — the CTA (white on it 5.46:1 on masa 4.92) */
  --brick-h:  #8F2C13;   /* CTA hover */
  --agave:    #4B6B36;   /* cooked-nopal green — links/heads accent on cream */
  --agave-d:  #3A5429;
  --marigold: #E2A12C;   /* sombrero/marigold — accents on DARK grounds only */
  --marigold-d:#C98A1C;  /* (decorative stitch only — fails AA as text) */
  --gold-ink: #8A5E0F;   /* deep gold — STARS on light grounds (AA 5.0–5.2:1 on masa) */
  --chili:    #A8331C;   /* deep chili — script accents, recipe-card rule */
  /* ink */
  --ink:      #2C1B10;   /* warm cocoa ink */
  --ink-soft: #4C3724;
  --muted:    #6E5238;   /* warm muted (AA on masa) */
  --line:     #E0CFB1;   /* hairline on cream */
  --line-d:   rgba(251,243,230,.18);  /* hairline on dark */
  /* type */
  --display: "Fraunces", Georgia, "Times New Roman", serif;  /* soft heritage serif */
  --script:  "Caveat", "Segoe Script", cursive;              /* handwritten recipe-card ink */
  --body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* metrics */
  --wrap: 1120px;
  --edge: clamp(1.25rem, 5vw, 3rem);   /* the consistent page edge margin — desktop AND mobile */
  --header-h: 70px;
  --r: 16px;
  --shadow:    0 10px 30px -18px rgba(42,27,18,.55);
  --shadow-lg: 0 26px 64px -30px rgba(42,27,18,.6);
  --shadow-card: 0 14px 34px -20px rgba(42,27,18,.5);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; background:var(--masa); color:var(--ink);
  font-family:var(--body); font-size:clamp(16px,1.01rem,17.5px); line-height:1.66;
  font-weight:400; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:var(--agave-d); text-underline-offset:2px; }
h1,h2,h3,h4{ margin:0; font-family:var(--display); font-weight:600; line-height:1.05;
  letter-spacing:-.012em; color:var(--cocoa); }
/* The single edge-margin contract: every wrap is centered with a CONSISTENT
   --edge gutter on both sides, desktop and mobile, so nothing kisses the
   viewport edge (full-bleed bands carry the same --edge internally). */
.wrap{ width:min(100% - (var(--edge) * 2), var(--wrap)); margin-inline:auto; }
.section{ padding:clamp(3.4rem,6vw,6.2rem) 0; position:relative; }

/* ---- buttons -------------------------------------------------------------- */
.btn{
  --bg:var(--brick); --fg:#fff;
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:var(--body); font-weight:700; letter-spacing:.005em;
  font-size:1rem; line-height:1; padding:.92rem 1.45rem; min-height:48px;
  background:var(--bg); color:var(--fg); border:0; border-radius:12px;
  cursor:pointer; text-decoration:none;
  transition:transform .12s, background .15s, box-shadow .15s;
  box-shadow:0 2px 0 rgba(0,0,0,.16), var(--shadow);
}
.btn:hover{ background:var(--brick-h); transform:translateY(-1px); }
.btn:active{ transform:translateY(1px); box-shadow:0 1px 0 rgba(0,0,0,.16); }
.btn:focus-visible{ outline:3px solid var(--marigold); outline-offset:2px; }
.btn .icon{ width:1.18em; height:1.18em; flex:0 0 auto; }
.btn--lg{ font-size:1.1rem; padding:1.06rem 1.7rem; min-height:54px; }
.btn--ghost{ --bg:transparent; --fg:var(--agave-d); border:2px solid var(--agave);
  box-shadow:none; }
.btn--ghost:hover{ background:var(--agave); --fg:#fff; }
.btn--marigold{ --bg:var(--marigold); --fg:#3A1F06; box-shadow:0 2px 0 rgba(0,0,0,.18); }
.btn--marigold:hover{ background:var(--marigold-d); }
.btn--ghost-light{ --bg:transparent; --fg:var(--masa); border:2px solid rgba(251,243,230,.55);
  box-shadow:none; }
.btn--ghost-light:hover{ background:rgba(251,243,230,.12); border-color:var(--masa); }

/* ---- THE concept motif: the STITCHED TEXTILE SEAM (a Mexican mantel
   cross-stitch). Pure-CSS warm-home divider used between EVERY panel instead of
   a plain <hr> — this is the through-line that ties the family-table concept
   across the whole page. A running row of X's (two crossing stitches per cell)
   sitting on a fine guide thread, flanked by a thin selvedge rule. ----------- */
.stitch{ height:30px; width:100%; position:relative; overflow:hidden;
  --x:18px;            /* one cross-stitch cell */
  --st:var(--chili);   /* stitch ink */
  --st2:var(--clay);   /* second thread */
}
.stitch::before{ /* the woven guide thread + a faint selvedge top & bottom */
  content:""; position:absolute; left:0; right:0; top:50%; height:14px;
  transform:translateY(-50%);
  background:
    linear-gradient(var(--clay), var(--clay)) center/100% 1.5px no-repeat,
    repeating-linear-gradient(90deg, color-mix(in srgb,var(--clay) 40%, transparent) 0 1px, transparent 1px 5px);
  opacity:.5;
}
.stitch::after{ /* the row of X cross-stitches */
  content:""; position:absolute; left:0; right:0; top:50%; height:15px;
  transform:translateY(-50%);
  background:
    repeating-linear-gradient(45deg,  var(--st)  0 2.4px, transparent 2.4px var(--x)),
    repeating-linear-gradient(-45deg, var(--st2) 0 2.4px, transparent 2.4px var(--x));
  background-size:var(--x) 15px, var(--x) 15px;
  -webkit-mask:repeating-linear-gradient(90deg,#000 0 calc(var(--x) - 4px), transparent calc(var(--x) - 4px) var(--x));
          mask:repeating-linear-gradient(90deg,#000 0 calc(var(--x) - 4px), transparent calc(var(--x) - 4px) var(--x));
}
.stitch--on-dark{ --st:var(--marigold); --st2:#D98A3A; }
.stitch--on-dark::before{ background:
    linear-gradient(var(--marigold), var(--marigold)) center/100% 1.5px no-repeat,
    repeating-linear-gradient(90deg, color-mix(in srgb,var(--marigold) 40%, transparent) 0 1px, transparent 1px 5px);
  opacity:.45; }

/* ===========================================================================
   HEADER  ·  rides nav.js verbatim ([data-nav]/[data-nav-toggle]/[data-nav-panel])
   =========================================================================== */
.site-header{
  position:sticky; top:0; z-index:60; background:var(--masa);
  border-bottom:1px solid var(--line);
  box-shadow:0 2px 0 rgba(194,96,46,.32), 0 8px 22px -16px rgba(42,27,18,.45);
}
.header__inner{ display:flex; align-items:center; gap:1rem;
  min-height:var(--header-h); padding-block:.5rem; }
.wordmark{ display:flex; align-items:center; gap:.6rem; text-decoration:none;
  color:var(--ink); margin-right:auto; }
.wordmark__logo{ height:48px; width:auto; flex:0 0 auto; }
.wordmark__text{ display:flex; flex-direction:column; line-height:1.05; }
.wordmark__name{ font-family:var(--display); font-weight:600; font-size:1.22rem;
  color:var(--clay-d); letter-spacing:-.01em; }
.wordmark__tag{ font-family:var(--script); font-size:1rem; color:var(--agave-d);
  margin-top:-2px; }

.nav-toggle{ display:none; }
.nav{ display:flex; align-items:center; gap:.2rem; }
.nav a{ font-family:var(--body); font-weight:600; font-size:.98rem; color:var(--ink-soft);
  text-decoration:none; padding:.5rem .72rem; border-radius:9px; }
.nav a:hover{ color:var(--brick); background:#fff; }
.nav .btn{ margin-left:.5rem; }

/* mobile nav: closed state keyed on the ALWAYS-PRESENT .site-header (NOT
   .nav-enhanced) so there is no flash-of-open-menu before JS runs. The OPEN
   menu is a full-viewport opaque cover (data-nav-lock locks body scroll) so no
   hero content shows through, with the wordmark pinned above the panel so it is
   never clipped at the top seam. */
@media (max-width:760px){
  .nav-toggle{
    display:inline-flex; align-items:center; justify-content:center;
    width:46px; height:46px; border:2px solid var(--clay); border-radius:11px;
    background:#fff; color:var(--clay-d); cursor:pointer; flex:0 0 auto;
    position:relative; z-index:90;   /* stay tappable ABOVE the open panel (z 80) */
  }
  .nav-toggle .icon{ width:24px; height:24px; }
  .nav-toggle__close{ display:none; }
  .site-header[data-open] .nav-toggle__open{ display:none; }
  .site-header[data-open] .nav-toggle__close{ display:inline-flex; }
  /* keep the brand + toggle visible and crisp above the open full-screen menu;
     drop the header seam so the cover reads as one clean masa field. */
  .site-header[data-open]{ box-shadow:none; border-bottom-color:transparent; }
  .site-header[data-open] .wordmark{ position:relative; z-index:90; }

  .nav{
    position:fixed; inset:0; z-index:80;
    flex-direction:column; align-items:stretch; justify-content:flex-start;
    gap:.1rem; padding:calc(var(--header-h) + 1rem) var(--edge) 2rem;
    background:var(--masa);
    background-image:radial-gradient(120% 60% at 50% 100%, rgba(194,96,46,.12), transparent 62%);
    border-bottom:none;
    /* CLOSED first-paint state (no .nav-enhanced needed) */
    visibility:hidden; opacity:0; transform:translateY(-10px);
    transition:opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
    overflow-y:auto;
  }
  .site-header[data-open] .nav{
    visibility:visible; opacity:1; transform:none;
    transition:opacity .22s ease, transform .22s ease, visibility 0s;
  }
  .nav a{ font-size:1.24rem; font-family:var(--display); font-weight:600;
    padding:.8rem .35rem; border-bottom:1px solid var(--line); border-radius:0; }
  .nav a:hover{ background:transparent; }
  .nav .btn{ margin:.8rem 0 0; width:100%; }
}
html.nav-locked{ overflow:hidden; }

/* ===========================================================================
   HERO  ·  SPLIT — the real logo wordmark + warm story copy on a masa panel
   (left), a framed plate photo (right). The warm home-kitchen opening, NOT a
   loud fiesta band. A stitched seam closes the section.
   =========================================================================== */
.hero{ position:relative; background:
    radial-gradient(140% 120% at 12% -10%, #FFFBF2 0%, var(--masa) 46%, var(--masa-2) 100%);
  overflow:hidden; }
.hero__inner{ display:grid; grid-template-columns:1.04fr .96fr;
  gap:clamp(1.6rem,4vw,3.4rem); align-items:center;
  padding:clamp(2rem,4.5vw,3.6rem) 0 clamp(2rem,4vw,3.2rem); }
.hero__copy{ max-width:33rem; }
/* The transparent logo includes the white "MEXICAN RESTAURANT" bar; on this
   light masa hero those white letters wash out, so a tight dark edge-shadow
   traces them off the ground (no box) while the soft depth shadow stays. */
.hero__logo{ width:min(78%,340px); height:auto; margin:0 0 1.1rem;
  filter:drop-shadow(0 10px 20px rgba(42,27,18,.18))
         drop-shadow(0 0 1px rgba(42,27,18,.85))
         drop-shadow(0 1px 2px rgba(42,27,18,.55)); }
.hero__eyebrow{ font-family:var(--script); color:var(--clay-d);
  font-size:clamp(1.25rem,3vw,1.6rem); margin:0 0 .2rem; }
.hero__title{ font-size:clamp(2.4rem,5.4vw,3.9rem); color:var(--cocoa);
  line-height:1.02; margin:.1rem 0 .2rem; letter-spacing:-.018em; }
.hero__title em{ font-style:italic; color:var(--brick); }
.hero__lede{ color:var(--ink-soft); font-size:clamp(1.04rem,2.2vw,1.18rem);
  line-height:1.6; margin:.9rem 0 1.4rem; max-width:38ch; }
.hero__cta{ display:flex; gap:.8rem; flex-wrap:wrap; }
.hero__called{
  display:inline-flex; flex-wrap:wrap; align-items:center; gap:.4rem .7rem;
  margin:1.5rem 0 0; max-width:100%;
  background:#fff; border:1px solid var(--line); border-left:5px solid var(--marigold);
  border-radius:12px; padding:.6rem 1rem; box-shadow:var(--shadow-card);
}
.hero__called .stars{ color:var(--gold-ink); font-size:1.05rem; letter-spacing:1px;
  flex:0 0 auto; }
.hero__called b{ color:var(--ink); font-family:var(--display); font-weight:600;
  font-size:1.16rem; flex:0 0 auto; }
.hero__called small{ color:var(--muted); font-weight:500; font-size:.86rem;
  white-space:nowrap; }
.hero__called .called__sep{ color:var(--line); flex:0 0 auto; }
.hero__called a{ color:var(--agave-d); font-weight:700; white-space:nowrap; flex:0 0 auto; }

/* the framed plate photo — a warm "framed photo on the kitchen wall" */
.hero__figure{ position:relative; margin:0; }
.hero__frame{ background:#fff; border:1px solid var(--line); border-radius:18px;
  padding:12px; box-shadow:var(--shadow-lg); transform:rotate(1.1deg); }
.hero__frame img{ width:100%; height:clamp(300px,40vw,460px); object-fit:cover;
  border-radius:10px; }
.hero__tag{ position:absolute; left:-10px; bottom:18px; transform:rotate(-3deg);
  background:var(--brick); color:#fff; font-family:var(--script); font-size:1.3rem;
  padding:.2rem 1rem; border-radius:9px; box-shadow:var(--shadow); }

/* ===========================================================================
   SECTION HEADS  ·  script eyebrow over a serif title; a stitch-tick rule
   =========================================================================== */
.section-head{ max-width:62ch; }
.section-head--center{ margin-inline:auto; text-align:center; }
.kicker{ font-family:var(--script); color:var(--clay-d);
  font-size:clamp(1.3rem,3vw,1.7rem); margin:0 0 .1rem; }
.kicker--on-dark{ color:var(--marigold); }
.section-head__title{ font-size:clamp(1.95rem,4.4vw,2.9rem); color:var(--cocoa); }
.section-head__title--light{ color:var(--masa); }
.section-head__lede{ color:var(--muted); font-size:1.06rem; margin:.7rem 0 0;
  max-width:56ch; line-height:1.6; }
.section-head--center .section-head__lede{ margin-inline:auto; }
.section-head--light .section-head__lede{ color:#E6D3B6; }
.tick{ display:flex; align-items:center; justify-content:center; gap:.45rem;
  margin:1rem auto 0; }
.tick span{ width:8px; height:8px; background:var(--clay); transform:rotate(45deg); }
.tick span:nth-child(2){ background:var(--marigold-d); }
.tick span:nth-child(3){ background:var(--agave); }

/* ===========================================================================
   STORY  ·  story-first — Juan & Valerie, the trailer → the family table.
   A two-column editorial spread: copy + a stacked pair of warm room photos.
   This is the heritage, told in COPY (no food-truck photo — now brick & mortar).
   =========================================================================== */
.story{ background:var(--masa); }
.story__inner{ display:grid; grid-template-columns:1.02fr .98fr;
  gap:clamp(1.8rem,4vw,3.6rem); align-items:center; }
.story__copy{ max-width:36rem; }
.story__title{ font-size:clamp(2rem,4.4vw,2.95rem); margin:.2rem 0 .2rem; }
.story__lede{ color:var(--ink-soft); font-size:1.1rem; line-height:1.68; margin:1rem 0; }
.story__lede strong{ color:var(--cocoa); font-weight:700; }
.story__pull{ font-family:var(--display); font-style:italic; font-weight:500;
  font-size:clamp(1.2rem,2.6vw,1.5rem); color:var(--clay-d); line-height:1.4;
  border-left:4px solid var(--marigold); padding:.1rem 0 .1rem 1.1rem;
  margin:1.4rem 0; }
.story__pull cite{ display:block; font-style:normal; font-family:var(--body);
  font-weight:600; font-size:.85rem; color:var(--muted); margin-top:.5rem; }
.story__signs{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.2rem; }
.story__chip{ font-family:var(--body); font-weight:600; font-size:.84rem;
  color:var(--agave-d); background:#fff; border:1px solid var(--line);
  border-radius:999px; padding:.42rem .9rem; }
/* the two warm room photos, stacked + overlapped like pinned snapshots */
.story__media{ position:relative; display:grid; gap:1rem; }
.story__shot{ margin:0; background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:10px; box-shadow:var(--shadow-card); }
.story__shot img{ width:100%; object-fit:cover; border-radius:8px; }
.story__shot--lg img{ height:clamp(230px,30vw,340px); }
.story__shot--sm{ width:64%; margin-left:auto; transform:rotate(1.5deg);
  margin-top:-2.2rem; position:relative; z-index:2; }
.story__shot--sm img{ height:clamp(150px,18vw,200px); }
.story__cap{ font-family:var(--script); color:var(--clay-d); font-size:1.05rem;
  text-align:center; margin:.4rem 0 .1rem; }

/* ===========================================================================
   SIGNATURES  ·  THE concept moment — each favorite as a handwritten RECIPE CARD
   from the family recipe box: script name, "from the family kitchen" note, the
   plate photo, a torn-edge header strip + a piece of tape. Pure markup + CSS;
   rides no JS. Stays multi-column on mobile.
   =========================================================================== */
.signatures{ background:
    linear-gradient(180deg, var(--masa) 0%, var(--masa-2) 100%); }
.recipe-box{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.3rem,2.6vw,2rem);
  margin-top:clamp(1.8rem,3.4vw,2.6rem);
}
.rcard{ position:relative; background:#FFFCF4;
  border:1px solid var(--line); border-radius:6px;
  box-shadow:var(--shadow-card);
  display:flex; flex-direction:column; padding:0 0 1.1rem;
  transition:transform .15s, box-shadow .15s;
}
.rcard:hover{ transform:translateY(-4px) rotate(-.4deg); box-shadow:var(--shadow-lg); }
/* the index-card ruled header strip */
.rcard__head{ position:relative; padding:1.5rem 1.1rem .7rem;
  border-bottom:2px solid var(--chili);
  background:
    repeating-linear-gradient(180deg, transparent 0 27px, rgba(168,51,28,.12) 27px 28px);
}
.rcard__no{ position:absolute; top:.7rem; right:.9rem; font-family:var(--body);
  font-weight:700; font-size:.72rem; letter-spacing:.12em; color:var(--muted);
  text-transform:uppercase; }
.rcard__name{ font-family:var(--script); font-size:clamp(1.7rem,2.6vw,2.05rem);
  color:var(--chili); line-height:1; }
.rcard__es{ display:block; font-family:var(--body); font-weight:600; font-size:.78rem;
  letter-spacing:.04em; text-transform:uppercase; color:var(--agave-d); margin-top:.2rem; }
/* a piece of tape holding the photo in place */
.rcard__media{ position:relative; margin:1rem 1rem 0; }
.rcard__media::before{ content:""; position:absolute; top:-12px; left:50%;
  transform:translateX(-50%) rotate(-2.5deg); width:74px; height:22px;
  background:rgba(226,161,44,.42); border:1px solid rgba(201,138,28,.4);
  box-shadow:0 1px 2px rgba(0,0,0,.12); z-index:3; }
.rcard__media img{ width:100%; aspect-ratio:5/4; object-fit:cover; border-radius:4px;
  border:1px solid var(--line); box-shadow:0 6px 16px -10px rgba(42,27,18,.5); }
.rcard__note{ font-family:var(--body); color:var(--ink-soft); font-weight:400;
  font-size:.95rem; line-height:1.5; margin:.9rem 1.1rem 0; }
.rcard__note b{ color:var(--cocoa); font-weight:700; }

/* ===========================================================================
   MENU TEASER  ·  "from the family table" — a warm hand-written ticket board on
   the dark cocoa kitchen. Prices single-sourced from menu.json via the teaser
   compose pipeline (render_featured_items + .compose/featured.refs.json).
   =========================================================================== */
.teaser{ background:var(--cocoa); color:var(--masa); overflow:hidden; }
.teaser__inner{ display:grid; grid-template-columns:1.02fr .98fr;
  gap:clamp(1.6rem,3.6vw,3.2rem); align-items:center;
  padding-top:clamp(1.6rem,3vw,2.2rem); }
.teaser__title{ font-size:clamp(2rem,4.4vw,3rem); color:var(--masa); margin:.1rem 0 .4rem; }
.teaser__title em{ font-style:italic; color:var(--marigold); }
.teaser__lede{ color:#E6D3B6; font-size:1.06rem; line-height:1.62; }
.teaser__note{ font-family:var(--script); color:var(--marigold);
  font-size:1.34rem; margin:.9rem 0 1.3rem; }
.teaser__cta{ display:flex; gap:.7rem; flex-wrap:wrap; }
/* the board — a recipe-ticket pinned on the kitchen wall, marigold prices */
.board{ background:#FFFCF4; color:var(--ink); border-radius:8px;
  padding:1.2rem 1.3rem 1.3rem; box-shadow:var(--shadow-lg); position:relative;
  border:1px solid var(--line); transform:rotate(-.7deg); }
.board::before{ /* tape at the top */
  content:""; position:absolute; top:-13px; left:50%; transform:translateX(-50%) rotate(2deg);
  width:96px; height:24px; background:rgba(226,161,44,.4);
  border:1px solid rgba(201,138,28,.4); box-shadow:0 1px 2px rgba(0,0,0,.12); }
.board__head{ font-family:var(--script); color:var(--chili); font-size:1.55rem;
  text-align:center; margin:0 0 .5rem; }
.board ul{ list-style:none; margin:0; padding:0; }
.board li{ display:flex; align-items:baseline; gap:.5rem; padding:.46rem 0;
  border-bottom:1px dashed rgba(168,51,28,.28); }
.board li:last-child{ border-bottom:0; }
.board__dish{ color:var(--ink); font-weight:600; font-family:var(--display); }
.board__dots{ flex:1 1 auto; border-bottom:1px dotted rgba(110,82,56,.55);
  transform:translateY(-3px); }
.board__price{ color:var(--clay-d); font-family:var(--display); font-weight:600;
  font-size:1.08rem; font-variant-numeric:tabular-nums; }

/* ===========================================================================
   GALLERY  ·  THE FAMILY ALBUM — a wall of snapshots PINNED up, the way you'd
   tape favourite plates to the kitchen wall. A real auto-fit grid underneath
   (no holes, stays ≥2-up on mobile); the polaroid mat, the pin, the small
   STATIC tilt and the handwritten caption are the concept. Each photo is a real
   button[data-ph] so gallery.js (loaded VERBATIM) drives the lightbox — no
   marquee here (v1 owns the marquee/tabla; v2's album is the wall).
   =========================================================================== */
.gallery{ background:
    linear-gradient(180deg, var(--masa-2) 0%, #EFE0C6 100%); }
/* a faint pinned-corkboard wash behind the snaps */
.album{ list-style:none; margin:clamp(1.6rem,3vw,2.4rem) 0 0; padding:.4rem 0 0;
  display:grid; gap:clamp(1.3rem,3vw,2.3rem);
  grid-template-columns:repeat(auto-fit, minmax(clamp(150px,23vw,224px), 1fr));
  align-items:start; }
/* phone: never collapse to one column (standing rule) — the min() floor caps a
   column at 46% of the wrap so TWO always fit, even at 360px. */
@media (max-width:640px){
  .album{ grid-template-columns:repeat(auto-fit, minmax(min(46%, 150px), 1fr));
    gap:clamp(.9rem,3.5vw,1.4rem); }
  .snap{ padding:8px 8px 2.1rem; }
  .snap__cap{ font-size:1.02rem; }
}
.snap{ position:relative; margin:0; background:#FFFCF4;
  padding:11px 11px 2.6rem; border-radius:3px;
  border:1px solid #EAD9BC;
  box-shadow:var(--shadow-card);
  transition:box-shadow .18s ease; }
/* small STATIC tilts by position — a pinned-wall feel; never animated to 0
   (a straightening tilt would swing corners over a neighbour). Generous gap
   above keeps tilted corners clear. */
.album > li:nth-child(4n+1) .snap{ transform:rotate(-2.4deg); }
.album > li:nth-child(4n+2) .snap{ transform:rotate(1.6deg); }
.album > li:nth-child(4n+3) .snap{ transform:rotate(-1deg); }
.album > li:nth-child(4n+4) .snap{ transform:rotate(2.2deg); }
.snap:hover{ box-shadow:var(--shadow-lg); }   /* lift the shadow, tilt stays put */
/* the push-pin holding each snapshot */
.snap__pin{ position:absolute; top:-7px; left:50%; transform:translateX(-50%);
  width:15px; height:15px; border-radius:50%; z-index:3;
  background:radial-gradient(circle at 38% 34%, #E86A4A 0 32%, var(--chili) 60%, #7C2010 100%);
  box-shadow:0 3px 5px -1px rgba(42,27,18,.5), inset 0 -1px 2px rgba(0,0,0,.35); }
.album > li:nth-child(3n+2) .snap__pin{ background:radial-gradient(circle at 38% 34%, #6FA64E 0 32%, var(--agave) 60%, #2C4A1C 100%); }
.album > li:nth-child(3n) .snap__pin{ background:radial-gradient(circle at 38% 34%, #F2C25A 0 32%, var(--marigold-d) 60%, #8A5E12 100%); }
.snap__btn{ display:block; width:100%; padding:0; border:0; background:none; cursor:zoom-in; }
.snap__btn img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:2px;
  box-shadow:inset 0 0 0 1px rgba(42,27,18,.08); }
.snap__btn:focus-visible{ outline:3px solid var(--marigold); outline-offset:4px; }
/* the handwritten caption on the bottom mat — the "album label" */
.snap__cap{ position:absolute; left:10px; right:10px; bottom:.5rem; text-align:center;
  font-family:var(--script); color:var(--clay-d); font-size:1.18rem; line-height:1.05; }
@media (prefers-reduced-motion: reduce){ .album .snap{ transform:none; } }

/* lightbox (gallery.js injects .ph-lightbox into <body>, opens it by setting
   aria-hidden="false"; CSS keys display on that attribute). */
.ph-lightbox{ position:fixed; inset:0; z-index:200; display:none;
  align-items:center; justify-content:center; }
.ph-lightbox[aria-hidden="false"]{ display:flex; }
.ph-lightbox__backdrop{ position:absolute; inset:0; background:rgba(26,12,6,.9); }
html.ph-lock{ overflow:hidden; }
.ph-lightbox__dialog{ position:relative; z-index:1; width:min(94vw,1000px); }
.ph-lightbox__figure{ margin:0; }
.ph-lightbox__img{ width:100%; max-height:82vh; object-fit:contain;
  border:3px solid var(--marigold); border-radius:8px; background:#140c06; }
.ph-lightbox__cap{ color:var(--masa); text-align:center; margin-top:.7rem;
  font-family:var(--script); font-size:1.1rem; }
.ph-lightbox__btn{ position:absolute; top:50%; transform:translateY(-50%);
  width:50px; height:50px; border-radius:50%; border:2px solid var(--marigold);
  background:rgba(26,12,6,.7); color:var(--masa); cursor:pointer;
  display:grid; place-items:center; }
.ph-lightbox__btn svg{ width:24px; height:24px; }
.ph-lightbox__prev{ left:-4px; } .ph-lightbox__next{ right:-4px; }
.ph-lightbox__close{ top:-54px; right:0; transform:none; }
.ph-lightbox__btn:hover{ background:var(--marigold); color:var(--cocoa); }
@media (max-width:560px){ .ph-lightbox__prev{ left:4px; } .ph-lightbox__next{ right:4px; } }

/* ===========================================================================
   REVIEWS  ·  "from our table to yours" — carousel on the warm clay band. Rides
   reviews.js VERBATIM ([data-reviews]/-track/-prev/-next/-dots). Cards are warm
   recipe-card slips with a stitched corner.
   =========================================================================== */
/* a deep clay band — darkened so marigold accents (kicker, arrows, dots) clear
   AA on it, and the cream review cards pop. */
.reviews{ background:
    linear-gradient(180deg, #6E2E12 0%, #5E2710 100%); color:var(--masa);
  overflow:hidden; }
.reviews__viewport{ overflow:hidden; margin-top:clamp(1.4rem,3vw,2.2rem); }
.reviews__track{ display:flex; align-items:stretch; gap:1.2rem; list-style:none;
  margin:0; padding:.4rem; overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.reviews__track::-webkit-scrollbar{ display:none; }
.review{ scroll-snap-align:start; flex:0 0 min(85vw,360px);
  background:#FFFCF4; color:var(--ink); border:1px solid var(--line);
  border-top:5px solid var(--marigold); border-radius:10px;
  padding:1.3rem 1.35rem 1.4rem; box-shadow:var(--shadow-lg);
  display:flex; flex-direction:column; position:relative; }
.review__stars{ color:var(--gold-ink); font-size:1.05rem; letter-spacing:1px;
  margin:0 0 .55rem; }
.review__text{ margin:0; font-size:1.04rem; line-height:1.6; font-weight:400;
  color:var(--ink-soft); quotes:"\201C""\201D";
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:6; overflow:hidden; }
.review__text::before{ content:open-quote; color:var(--chili); font-family:var(--display);
  font-weight:600; font-size:1.5rem; margin-right:.08rem; line-height:0; }
.review__author{ margin-top:auto; padding-top:.95rem; font-family:var(--display);
  font-weight:600; color:var(--clay-d); font-size:1.02rem; }
.reviews__controls{ display:flex; align-items:center; justify-content:center; gap:1rem;
  margin-top:1.4rem; }
.reviews__btn{ width:48px; height:48px; border-radius:50%;
  border:2px solid var(--marigold); background:transparent; color:var(--marigold);
  cursor:pointer; display:grid; place-items:center; }
.reviews__btn svg{ width:22px; height:22px; }
.reviews__btn:hover{ background:var(--marigold); color:var(--clay-d); }
.reviews__dots{ display:flex; gap:.5rem; }
.reviews__dots button{ width:11px; height:11px; padding:0; border-radius:50%;
  border:1.5px solid var(--marigold); background:transparent; cursor:pointer; }
.reviews__dots button[aria-current="true"]{ background:var(--marigold); }

/* ===========================================================================
   VISIT  ·  storefront (brick & mortar) + details, in a warm framed photo
   =========================================================================== */
.visit{ background:var(--masa); }
.visit__inner{ display:grid; grid-template-columns:1.06fr .94fr;
  gap:clamp(1.6rem,3.6vw,3.2rem); align-items:center; }
.visit__photo{ margin:0; background:#fff; border:1px solid var(--line); border-radius:16px;
  padding:11px; box-shadow:var(--shadow-lg); transform:rotate(-.8deg); }
.visit__photo img{ width:100%; height:clamp(240px,34vw,400px); object-fit:cover;
  border-radius:9px; }
.visit__title{ font-size:clamp(1.95rem,4.2vw,2.85rem); color:var(--cocoa); margin:.1rem 0 .3rem; }
.visit__lede{ color:var(--ink-soft); font-size:1.06rem; margin:.6rem 0 1.3rem; line-height:1.6; }
.visit__lines{ list-style:none; margin:0 0 1.4rem; padding:0; display:grid; gap:1rem; }
.visit__line{ display:flex; gap:.85rem; align-items:flex-start; }
.visit__ico{ flex:0 0 auto; width:44px; height:44px; border-radius:12px;
  background:var(--masa-2); border:1px solid var(--line); display:grid; place-items:center;
  color:var(--clay-d); }
.visit__ico svg{ width:21px; height:21px; }
.visit__line strong{ color:var(--ink); font-size:1.05rem; }
.visit__line a{ color:var(--agave-d); font-weight:700; }
.visit__line span small, .visit__sub{ color:var(--muted); }
.visit__cta{ display:flex; gap:.7rem; flex-wrap:wrap; }

/* ===========================================================================
   FOOTER
   =========================================================================== */
.footer{ background:var(--adobe); color:#E6D2B4; }
.footer__inner{ display:flex; flex-wrap:wrap; gap:2rem 3rem; align-items:flex-start;
  padding:clamp(2.2rem,4vw,3.2rem) 0 1.6rem; }
.footer__brand{ display:flex; align-items:center; gap:.8rem; text-decoration:none;
  color:#fff; margin-right:auto; max-width:330px; }
.footer__logo{ height:74px; width:auto; flex:0 0 auto; }
.footer__btext{ display:flex; flex-direction:column; }
.footer__name{ font-family:var(--display); font-weight:600; font-size:1.3rem;
  color:var(--marigold); line-height:1.05; }
.footer__name small{ display:block; font-family:var(--script); font-size:1rem;
  color:#C9B68F; font-weight:400; margin-top:1px; }
.footer__sign{ display:block; font-family:var(--script); color:#E6B85C;
  font-size:1.18rem; line-height:1.25; margin-top:.6rem; max-width:24ch; }
.footer__cols{ display:flex; flex-wrap:wrap; gap:1.6rem 2.6rem; }
.footer__col p{ margin:.2rem 0; font-weight:400; color:#E6D2B4; }
.footer__lbl{ font-family:var(--display); font-weight:600; color:var(--marigold);
  font-size:1rem; margin-bottom:.4rem !important; }
.footer__col a{ color:#E6D2B4; font-weight:600; }
.footer__col a:hover{ color:#fff; }
.footer__link{ background:none; border:0; color:#E6D2B4; font:inherit; font-weight:600;
  cursor:pointer; padding:.4rem 0; min-height:44px; display:inline-flex; align-items:center;
  text-align:left; text-decoration:underline; text-underline-offset:3px; }
.footer__legal{ border-top:1px solid var(--line-d); padding-top:1.1rem;
  font-size:.85rem; color:#B49E78; }

/* ===========================================================================
   ORDER SHEET  ·  rides order.js VERBATIM. App rows carry the REAL brand marks
   (web-ui-kit icons.md). Brand-tinted chips via --brand.
   =========================================================================== */
.order-sheet{ position:fixed; inset:0; z-index:120; display:none; }
.order-sheet[aria-hidden="false"], .order-sheet.is-open{ display:block; }
.order-sheet__scrim{ position:absolute; inset:0; background:rgba(26,12,6,.66); }
.order-sheet__panel{ position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:min(100%,520px); max-height:90dvh; overflow:auto;
  background:var(--masa); border:1px solid var(--line); border-bottom:0;
  border-radius:20px 20px 0 0; box-shadow:var(--shadow-lg); padding:1.1rem 1.1rem 1.4rem; }
@media (min-width:560px){
  .order-sheet__panel{ bottom:auto; top:50%; transform:translate(-50%,-50%);
    border:1px solid var(--line); border-radius:18px; }
}
.order-sheet__head{ display:flex; align-items:center; justify-content:space-between;
  margin-bottom:.4rem; }
.order-sheet__title{ font-family:var(--display); font-weight:600; font-size:1.5rem; color:var(--cocoa); }
.order-sheet__close{ width:42px; height:42px; border-radius:11px; border:1px solid var(--line);
  background:#fff; color:var(--ink); cursor:pointer; display:grid; place-items:center; }
.order-sheet__close svg{ width:20px; height:20px; }
.order-toggle{ display:flex; gap:.4rem; background:var(--masa-2); border:1px solid var(--line);
  border-radius:12px; padding:.3rem; margin:.6rem 0 1rem; }
.order-toggle__tab{ flex:1 1 0; min-height:44px; border:0; border-radius:9px; cursor:pointer;
  font-family:var(--body); font-weight:700; font-size:.98rem;
  background:transparent; color:var(--muted); }
.order-toggle__tab[aria-selected="true"]{ background:var(--brick); color:#fff;
  box-shadow:0 2px 0 rgba(0,0,0,.16); }
.order-list{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
.order-row__link{ display:flex; align-items:center; gap:.9rem; text-decoration:none;
  background:#fff; border:1px solid var(--line); border-radius:13px; padding:.8rem .9rem;
  min-height:64px; color:var(--ink); transition:transform .12s, box-shadow .12s; }
.order-row__link:hover{ transform:translateY(-1px); box-shadow:var(--shadow-card); }
.order-row__icon{ flex:0 0 auto; width:46px; height:46px; border-radius:12px;
  background:var(--masa-2); border:1px solid var(--line);
  display:grid; place-items:center; color:var(--brand,var(--ink)); }
.order-row__icon svg{ width:26px; height:26px; }
.order-row__body{ display:flex; flex-direction:column; line-height:1.2; }
.order-row__name{ font-family:var(--display); font-weight:600; font-size:1.1rem; color:var(--cocoa); }
.order-row__meta{ color:var(--muted); font-weight:400; font-size:.88rem; }

/* ===========================================================================
   MENU PAGE  ·  menu.html — chips ride menu-nav.js VERBATIM ([data-menu-nav]).
   Body is the STANDARD render_menu_body markup (menu-row / menu-section / .rule)
   so it stays single-sourced from menu.json + recomposable. Look = warm clay.
   =========================================================================== */
.menu-hero{ position:relative; background:var(--cocoa); overflow:hidden; }
.menu-hero__photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.4; }
.menu-hero__scrim{ position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(42,27,18,.55), rgba(42,27,18,.86)); }
.menu-hero__field{ position:relative; z-index:2; padding:clamp(1.8rem,4.5vw,3.2rem) 0; }
.menu-hero__kicker{ font-family:var(--script); color:var(--marigold);
  font-size:clamp(1.3rem,3vw,1.7rem); margin:0 0 .1rem; }
.menu-hero h1{ font-size:clamp(2.2rem,6vw,3.5rem); color:var(--masa); margin:0 0 .5rem; }
.menu-hero p{ color:#E6D3B6; max-width:60ch; margin:.3rem 0; line-height:1.6; }
.menu-hero__note{ font-size:.95rem; color:#C9B68F !important; }
.menu-hero__note a{ color:var(--marigold); font-weight:700; }

/* The sticky category bar. menu-nav.js injects flanking prev/next arrows as
   direct children of [data-menu-nav] when the strip overflows. */
.menu-nav{ position:sticky; top:var(--header-h); z-index:50; background:var(--masa);
  border-bottom:1px solid var(--line); box-shadow:0 2px 0 rgba(194,96,46,.32);
  display:flex; align-items:stretch; }
.menu-nav .wrap{ flex:1 1 auto; min-width:0; width:auto;
  display:flex; gap:.55rem; overflow-x:auto; padding:.7rem clamp(.9rem,3vw,1.2rem);
  scroll-padding-inline:1rem; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.menu-nav .wrap::-webkit-scrollbar{ display:none; }
.menu-nav a{ flex:0 0 auto; font-family:var(--body); font-weight:600;
  font-size:.92rem; line-height:1; color:var(--ink-soft);
  text-decoration:none; padding:0 .95rem; min-height:44px;
  display:inline-flex; align-items:center; background:#fff;
  border:1px solid var(--line); border-radius:999px; white-space:nowrap;
  transition:background-color .14s, color .14s, box-shadow .14s, transform .14s; }
.menu-nav a:hover{ background:var(--masa-2); }
.menu-nav a:focus-visible{ outline:3px solid var(--agave); outline-offset:2px; }
.menu-nav a[aria-current="true"], .menu-nav a.is-active{
  background:var(--brick); color:#fff; border-color:var(--brick);
  box-shadow:0 3px 0 var(--brick-h); transform:translateY(-1px); }

/* Injected scroll arrows — round warm buttons flanking the strip. */
.menu-nav__arrow{ flex:0 0 auto; display:none; align-items:center; justify-content:center;
  width:44px; min-height:44px; align-self:center; margin:0 .35rem; padding:0;
  color:var(--clay-d); background:var(--masa-2); border:1px solid var(--line);
  border-radius:50%; cursor:pointer; box-shadow:var(--shadow-card);
  transition:background-color .14s, color .14s, opacity .14s; }
.menu-nav__arrow svg{ width:22px; height:22px; }
.menu-nav__arrow:hover:not(:disabled){ background:var(--brick); color:#fff; }
.menu-nav__arrow:focus-visible{ outline:3px solid var(--agave); outline-offset:2px; }
.menu-nav__arrow:disabled{ opacity:.32; cursor:default; }
.menu-nav--scrollable .menu-nav__arrow{ display:inline-flex; }
.menu-nav--scrollable .wrap{
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%); }

/* the menu body (standard render_menu_body markup) */
.menu-body{ padding:clamp(2rem,4vw,3.4rem) 0 4rem; }
.menu-body > .wrap{ width:min(100% - 2.4rem, 880px); }
.menu-section{ scroll-margin-top:calc(var(--header-h) + var(--menu-nav-h,56px) + 14px);
  margin-bottom:clamp(2.2rem,4vw,3.2rem); }
.menu-section__head{ display:flex; align-items:baseline; gap:.9rem; margin:0 0 1.1rem;
  padding-bottom:.5rem; position:relative; }
.menu-section__head h2{ font-family:var(--display); font-weight:600;
  font-size:clamp(1.55rem,3.4vw,2.15rem); color:var(--cocoa); white-space:nowrap; margin:0; }
/* the section rule carries the cross-stitch motif (the family-table concept on
   the menu page) — a running row of tiny X's instead of a plain line. */
.menu-section__head .rule{ flex:1 1 auto; height:12px; align-self:center; position:relative;
  background:
    repeating-linear-gradient(45deg,  var(--chili) 0 2px, transparent 2px 14px),
    repeating-linear-gradient(-45deg, var(--clay)  0 2px, transparent 2px 14px);
  background-size:14px 12px, 14px 12px;
  -webkit-mask:repeating-linear-gradient(90deg,#000 0 10px, transparent 10px 14px);
          mask:repeating-linear-gradient(90deg,#000 0 10px, transparent 10px 14px);
  opacity:.7; }
.menu-list{ display:grid; grid-template-columns:1fr; gap:.1rem; }
.menu-row{ padding:.6rem 0; border-bottom:1px solid var(--line); }
.menu-row:last-child{ border-bottom:0; }
.menu-row__top{ display:flex; align-items:baseline; gap:.55rem; }
.menu-row__name{ font-family:var(--display); font-weight:600; color:var(--ink);
  font-size:1.06rem; }
.menu-row__dots{ flex:1 1 auto; border-bottom:1px dotted var(--muted);
  transform:translateY(-3px); min-width:1.5rem; opacity:.6; }
.menu-row__price{ font-family:var(--display); font-weight:600; color:var(--clay-d);
  font-size:1.06rem; white-space:nowrap; font-variant-numeric:tabular-nums; }
.menu-row__desc{ margin:.18rem 0 0; font-weight:400; color:var(--muted);
  font-size:.93rem; line-height:1.45; max-width:62ch; }
/* multi-price columns (per menu-page §7) — none in this menu, but keep the
   contract available so the page stays drop-in compatible. */
.menu-row__prices{ display:inline-grid; gap:0 .7rem; text-align:right;
  font-variant-numeric:tabular-nums; align-items:baseline; }
.menu-row__prices--2{ grid-template-columns:repeat(2,4rem); }
.menu-row__prices--3{ grid-template-columns:repeat(3,3.4rem); }
.menu-row__prices.single{ display:inline-block; }

.tag{ display:inline-block; font-family:var(--body); font-size:.6rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; vertical-align:middle;
  padding:.16em .5em; border-radius:4px; margin-left:.4em;
  background:var(--agave); color:#fff; }

/* ===========================================================================
   RESPONSIVE
   =========================================================================== */
@media (max-width:920px){
  .hero__inner, .story__inner, .teaser__inner, .visit__inner{ grid-template-columns:1fr; }
  .hero__copy, .story__copy, .teaser__copy{ order:1; }
  .hero__figure, .story__media, .board, .visit__photo{ order:2; }
  .hero__frame{ transform:rotate(0); }
  .story__shot--sm{ width:54%; }
}
@media (max-width:680px){
  /* THE STANDING RULE: image grids stay MULTI-COLUMN on mobile (never 1-up). */
  .recipe-box{ grid-template-columns:repeat(2,1fr); gap:1.1rem .9rem; }
  .rcard__name{ font-size:1.5rem; }
  .rcard__note{ font-size:.88rem; }
  .rcard__head{ padding:1.3rem .85rem .6rem; }
  .rcard__media{ margin:.85rem .75rem 0; }
  .rcard__note{ margin:.8rem .85rem 0; }
}
@media (max-width:430px){
  .hero__title{ font-size:2.15rem; }
  .order-row__meta{ font-size:.82rem; }
  .rcard__media::before{ width:60px; }
}