/* =========================================================================
   Uncle Giuseppe's Lil Bit A Brooklyn — site/v4
   "Tavola / old-world arches" (carried from v3, with corrections):
   warm plaster · basil green · tomato CTA · Cormorant Garamond + Work Sans.
   v4 adds: generalized multi-price menu columns (sizes / cup-bowl / half-full),
   an animated photo marquee + lightbox, six service menus, accurate captions.
   ========================================================================= */

:root {
  --paper:      #F6EDDE;
  --paper-2:    #EFE3CF;
  --ink:        #23201A;
  --ink-soft:   #574E41;
  --ink-faint:  #6B6253;

  --accent:     #2F6B34;
  --accent-deep:#244F28;
  --gold-ink:   #6E531F;   /* gold/bronze TEXT — 6.19:1 paper, 5.67:1 paper-2 */
  --gold-line:  #C9A875;   /* gold hairlines / non-text only */

  --cta:        #C8341C;   /* tomato — the single primary action */
  --cta-ink:    #ffffff;
  --cta-hover:  #A02713;

  --line:       rgba(35,32,26,.14);
  --line-soft:  rgba(35,32,26,.07);
  --shadow:     0 18px 40px -24px rgba(35,32,26,.45);

  --display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:    "Work Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  --fs-hero: clamp(2.8rem, 8vw, 5.4rem);
  --fs-h2:   clamp(2rem, 4.6vw, 3.1rem);
  --fs-h3:   clamp(1.3rem, 2.6vw, 1.6rem);
  --fs-lede: clamp(1.08rem, 2vw, 1.35rem);
  --fs-body: 1.06rem;

  --section-y: clamp(3.5rem, 8vw, 6.5rem);
  --gap:       clamp(1rem, 3vw, 1.5rem);
  --gutter:    1.25rem;

  --header-h: 72px;
  --switch-h: 58px;
  --chips-h:  56px;
  --marquee-speed: 70s;

  /* menu measure + price-column widths — single source of truth so a section's
     column header and its rows ALWAYS share one right edge (no drifting magic
     numbers). Change once here; head and rows follow. */
  --menu-measure: 100%;    /* width of a single-column menu (head + rows) — full
                              width; head + rows share this token so they stay aligned */
  --price-col:    4rem;    /* a 2-up price cell: half/full, cup/bowl, chicken/veal */
  --price-col-3:  3.4rem;  /* a 3-up price cell: pizza 12" / 14" / 18" */
  --price-col-1:  2.8rem;  /* minimum single price cell */
}

* { 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(--paper); color: var(--ink); font-family: var(--sans);
  font-size: var(--fs-body); line-height: 1.65; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; line-height: 1.06; margin: 0; }
a { color: var(--accent); }
.wrap { width: min(1160px, 100% - 2.5rem); margin-inline: auto; }
.eyebrow { font-family: var(--sans); text-transform: uppercase; letter-spacing: .3em; font-size: .72rem; font-weight: 600; color: var(--gold-ink); }
.section { padding: var(--section-y) 0; }
.section--alt { background: var(--paper-2); }
.section-head { max-width: 62ch; margin-bottom: 2.6rem; }
.section-head h2 { font-size: var(--fs-h2); margin: .35rem 0 0; color: var(--ink); }
.section-head p { font-size: var(--fs-lede); color: var(--ink-soft); margin: .8rem 0 0; }
:where(section[id]) { scroll-margin-top: calc(var(--header-h) + 14px); }

.icon { width: 1em; height: 1em; flex: 0 0 auto; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: .55em; font-family: var(--sans); font-weight: 600;
  font-size: .96rem; line-height: 1; padding: .9em 1.7em; border-radius: 999px; text-decoration: none;
  border: 1.6px solid transparent; cursor: pointer; transition: transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease; }
.btn:hover { transform: translateY(-2px); }
.btn .icon { width: 1.15em; height: 1.15em; }
.btn--primary { background: var(--cta); color: var(--cta-ink); box-shadow: 0 10px 22px -12px rgba(200,52,28,.7); }
.btn--primary:hover { background: var(--cta-hover); color: var(--cta-ink); }
.btn--ghost { border-color: var(--accent); color: var(--accent); background: transparent; }
.btn--ghost:hover { background: var(--accent); color: #fff; }
.btn--on-dark { border-color: rgba(255,255,255,.6); color: #fff; background: transparent; }
.btn--on-dark:hover { background: rgba(255,255,255,.14); color: #fff; }
.btn--lg { padding: 1.05em 2.1em; font-size: 1.02rem; }

/* ---------- header / nav (site-nav contract) ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--paper); border-bottom: 1px solid var(--line); }
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: var(--header-h); }
.wordmark { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; }
.wordmark__img { height: 50px; width: auto; }
.wordmark__text { display: flex; flex-direction: column; line-height: 1; }
.wordmark__name { font-family: var(--display); font-weight: 700; font-size: 1.34rem; color: var(--ink); letter-spacing: .005em; }
.wordmark__tag { font-family: var(--display); font-style: italic; font-weight: 600; font-size: 1.02rem; color: var(--accent); margin-top: .14em; }
@media (max-width: 480px) {
  .wordmark__img { height: 44px; }
  .wordmark__name { font-size: 1.16rem; }
  .wordmark__tag { font-size: .9rem; }
}
.nav-toggle { display: none; appearance: none; background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink); line-height: 0; }
.nav-toggle .icon { width: 1.7rem; height: 1.7rem; }
.nav-toggle__close { display: none; }
.nav-close { display: none; }
.site-header[data-open] .nav-toggle__open { display: none; }
.site-header[data-open] .nav-toggle__close { display: inline-block; }
.nav a:not(.btn) { color: var(--ink); text-decoration: none; font-family: var(--sans); font-weight: 500; font-size: .98rem; letter-spacing: .01em; }
.nav a:not(.btn):hover { color: var(--accent); }
.nav a.btn--primary { color: var(--cta-ink); }
html.nav-locked, html.nav-locked body { overflow: hidden; }
/* The panel takes programmatic focus on open (nav.js) so AT lands inside — it's
   a container, so no visible ring. Also kill the iOS tap-highlight box. */
[data-nav-panel]:focus { outline: none; }
.nav a, .nav-toggle, .nav .btn { -webkit-tap-highlight-color: transparent; }
/* Touch/mouse focus must not leave a stray ring on a nav item — some mobile
   browsers focus or highlight the first link when the menu opens (a blue box
   on "Home"). Keyboard users still get a ring via :focus-visible. */
.nav a:focus:not(:focus-visible),
.nav .btn:focus:not(:focus-visible),
.nav-toggle:focus:not(:focus-visible) { outline: none; }
@media (min-width: 721px) { .nav { display: flex; align-items: center; gap: 1.7rem; } }
@media (max-width: 720px) {
  .nav-enhanced .nav-toggle { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
  .nav-enhanced .nav a { display: flex; align-items: center; min-height: 44px; width: 100%; }
}
@media (max-width: 720px) {
  .site-header[data-nav-anim="curtain"] .nav { display: flex; position: fixed; inset: 0; z-index: 60; flex-direction: column;
    align-items: center; justify-content: center; gap: .5rem; padding: 2rem; background: var(--paper);
    transform: translateY(-100%); visibility: hidden; transition: transform .26s cubic-bezier(.4,0,.2,1), visibility 0s linear .26s; }
  .site-header[data-nav-anim="curtain"][data-open] .nav { transform: translateY(0); visibility: visible; transition: transform .26s cubic-bezier(.4,0,.2,1); }
  .site-header[data-nav-anim="curtain"] .nav a:not(.btn) { justify-content: center; font-size: 1.5rem; font-family: var(--display); padding: .55rem 0; color: var(--ink); }
  .site-header[data-nav-anim="curtain"] .nav .btn { margin-top: .6rem; }
  /* Bulletproof close: the X lives INSIDE the curtain panel, so it shares the
     panel's layer and can never be hidden behind it (the old approach floated
     the toggle above the curtain via z-index, which mobile Safari ignores once
     the transformed curtain becomes its own GPU layer). When the curtain is
     open we hide the floating toggle and show the in-panel close instead. */
  .site-header[data-nav-anim="curtain"][data-open] .nav-toggle { display: none; }
  .site-header[data-nav-anim="curtain"] .nav-close {
    position: absolute; top: 14px; right: 1.25rem; width: 44px; height: 44px;
    align-items: center; justify-content: center; z-index: 2;
    appearance: none; background: none; border: 0; padding: 0; cursor: pointer;
    color: var(--ink); line-height: 0; }
  .site-header[data-nav-anim="curtain"][data-open] .nav-close { display: inline-flex; }
  .nav-close .icon { width: 1.7rem; height: 1.7rem; }
}
@media (prefers-reduced-motion: reduce) { .site-header[data-nav-anim="curtain"] .nav { transition: none; } }

/* ---------- hero ---------- */
.hero { padding: clamp(2.5rem, 6vw, 4.5rem) 0 0; text-align: center; overflow: hidden; }
.hero__inner { max-width: 820px; margin-inline: auto; }
.hero h1 { font-size: var(--fs-hero); margin: .5rem 0 0; color: var(--ink); }
.hero h1 .script { display: block; font-style: italic; font-weight: 600; color: var(--accent); font-size: .52em; letter-spacing: .01em; margin-top: .1em; }
.hero__lede { font-size: var(--fs-lede); color: var(--ink-soft); max-width: 52ch; margin: 1.1rem auto 1.7rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; }
.arch-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.8rem, 2.5vw, 1.6rem); align-items: end; margin-top: clamp(2.2rem, 5vw, 3.6rem); }
.arch { margin: 0; position: relative; }
.arch img { width: 100%; object-fit: cover; aspect-ratio: 3 / 4.1; border-radius: 1000px 1000px 16px 16px; box-shadow: var(--shadow); border: 1px solid var(--line); }
.arch--center img { aspect-ratio: 3 / 4.7; }
.arch__cap { margin-top: .7rem; font-family: var(--sans); font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
/* Keep the triptych side-by-side at every width — stacking it made the page
   feel long. On phones the arches just get narrower, with a tighter gap and
   smaller caption so all three stay on one row. */
@media (max-width: 520px) {
  .arch-trio { gap: .45rem; }
  .arch img { aspect-ratio: 3 / 4.4; border-radius: 900px 900px 10px 10px; }
  .arch--center img { aspect-ratio: 3 / 5; }
  .arch__cap { margin-top: .45rem; font-size: .58rem; letter-spacing: .05em; }
}

/* ---------- story ---------- */
.story { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.story__media { position: relative; margin: 0; }
.story__media img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 1000px 1000px 16px 16px; box-shadow: var(--shadow); }
.story__media .cap { position: absolute; bottom: -14px; left: 50%; transform: translateX(-50%); background: var(--accent); color: #fff;
  font-family: var(--sans); font-weight: 600; font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; padding: .6em 1.2em; border-radius: 999px; white-space: nowrap; }
.story__body h2 { font-size: var(--fs-h2); margin: .4rem 0 1rem; }
.story__body p { font-size: 1.12rem; color: var(--ink-soft); margin: 0 0 1.1rem; }
.story__quote { font-family: var(--display); font-style: italic; font-size: 1.5rem; line-height: 1.3; color: var(--accent); border-left: 3px solid var(--gold-line); padding-left: 1.1rem; margin: 1.4rem 0; }
.story__sign { font-family: var(--display); font-style: italic; font-size: 1.3rem; color: var(--ink-faint); }
@media (max-width: 860px) { .story { grid-template-columns: 1fr; } .story__media { max-width: 380px; margin-inline: auto; } }

/* ---------- highlights ---------- */
.highlights { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.h-card { position: relative; border-radius: 16px; overflow: hidden; min-height: 320px; display: flex; align-items: flex-end; color: #fff; box-shadow: var(--shadow); }
.h-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.h-card:hover img { transform: scale(1.06); }
.h-card__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 38%, rgba(0,0,0,.86) 100%); }
.h-card__label { position: relative; padding: 1.3rem 1.4rem; }
.h-card__label h3 { font-size: var(--fs-h3); }
.h-card__label p { margin: .25rem 0 0; font-size: .9rem; color: rgba(255,255,255,.86); font-family: var(--sans); }
@media (max-width: 860px) { .highlights { grid-template-columns: 1fr 1fr; } }
/* Stay 2-up on phones (inherits the 2-col grid above) rather than one tall
   stack — shorter page, same four cards. Just shrink the cards to suit. */
@media (max-width: 520px) { .h-card { min-height: 200px; } .h-card__label { padding: .9rem 1rem; } }

/* ---------- reviews (reviews skill: static grid — no JS, robust) ---------- */
.reviews { --star: #C8911F; }
.reviews__track { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--gap); margin: 0; padding: 0; list-style: none; }
.review { background: var(--paper); border: 1px solid var(--line); border-radius: 16px;
  padding: clamp(1.4rem, 3vw, 1.9rem); box-shadow: var(--shadow);
  display: flex; flex-direction: column; }
.review__stars { color: var(--star); display: inline-flex; gap: .15em; }
.review__star { width: 1.05em; height: 1.05em; }
.review__quote { font-family: var(--display); font-size: 1.28rem; line-height: 1.4; color: var(--ink); margin: .9rem 0 1.1rem; }
.review__by { font-family: var(--sans); font-size: .85rem; color: var(--ink-faint); display: flex; gap: .5rem; align-items: baseline; margin: auto 0 0; }
.review__author { font-weight: 600; color: var(--ink); }
.review__src { letter-spacing: .04em; }

/* ---------- order band ---------- */
.order-band { background: var(--accent-deep); color: #fff; text-align: center; }
.order-band .wrap { padding: clamp(2.6rem, 6vw, 4rem) 0; }
.order-band .eyebrow { color: var(--gold-line); }
.order-band h2 { font-size: var(--fs-h2); color: #fff; margin: .4rem 0 .6rem; }
.order-band p { color: rgba(255,255,255,.85); max-width: 50ch; margin: 0 auto 1.6rem; }
.order-band__cta { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; align-items: center; }
.order-band--inset { border-radius: 16px; overflow: hidden; margin-top: 1rem; }

/* ---------- photo marquee + lightbox (photo-gallery skill) ---------- */
.marquee { position: relative; overflow: hidden; }
.marquee::before, .marquee::after { content: ""; position: absolute; top: 0; bottom: 0; width: 8%; z-index: 2; pointer-events: none; }
.marquee::before { left: 0; background: linear-gradient(90deg, var(--paper-2), transparent); }
.marquee::after { right: 0; background: linear-gradient(270deg, var(--paper-2), transparent); }
.marquee--static { overflow-x: auto; scrollbar-width: thin; }
.marquee__track { display: flex; gap: var(--gap); margin: 0; padding: 0; list-style: none; width: max-content; }
.marquee--animated .marquee__track { animation: ph-marquee var(--marquee-speed) linear infinite; }
.marquee--animated:hover .marquee__track, .marquee--animated:focus-within .marquee__track { animation-play-state: paused; }
.marquee__item { flex: 0 0 auto; }
.ph-btn { display: block; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 14px; }
.ph-btn img { width: clamp(220px, 28vw, 320px); aspect-ratio: 4/3; object-fit: cover; border-radius: 14px; box-shadow: var(--shadow); border: 1px solid var(--line); transition: transform .4s ease; }
.ph-btn:hover img { transform: scale(1.03); }
.ph-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
@keyframes ph-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee--animated .marquee__track { animation: none; } }

html.ph-lock, html.ph-lock body { overflow: hidden; }
.ph-lightbox[aria-hidden="true"] { display: none; }
.ph-lightbox { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; }
.ph-lightbox__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.88); }
.ph-lightbox__dialog { position: relative; display: flex; align-items: center; justify-content: center; gap: .5rem; max-width: min(94vw, 1100px); }
.ph-lightbox__figure { margin: 0; }
/* Arrows overlay the image edges (out of flow) so the figure stays centered in
   the dialog — keeping them in the flex row pushes the image off-center and the
   right arrow off-screen on narrow viewports. */
.ph-lightbox__prev, .ph-lightbox__next { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; }
.ph-lightbox__prev { left: .5rem; }
.ph-lightbox__next { right: .5rem; }
.ph-lightbox__img { max-width: 84vw; max-height: 80vh; width: auto; height: auto; border-radius: 10px; display: block; }
.ph-lightbox__cap { color: #fff; font-family: var(--sans); font-size: .9rem; text-align: center; margin-top: .7rem; opacity: .9; }
.ph-lightbox__btn { background: rgba(255,255,255,.14); color: #fff; border: 0; cursor: pointer; width: 44px; height: 44px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; }
.ph-lightbox__btn:hover { background: rgba(255,255,255,.26); }
.ph-lightbox__btn svg { width: 1.4rem; height: 1.4rem; }
.ph-lightbox__close { position: absolute; top: -3.2rem; right: 0; }
@media (max-width: 600px) { .ph-lightbox__close { top: -2.8rem; } .ph-lightbox__img { max-width: 92vw; } .ph-lightbox__dialog { gap: .15rem; } }

/* ---------- visit / location ---------- */
.visit__photo { margin: 0 0 clamp(1.4rem, 3vw, 2.2rem); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); }
.visit__photo img { width: 100%; aspect-ratio: 16/6; object-fit: cover; }
.visit { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: stretch; }
.visit > * { min-width: 0; }
.loc-card { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: clamp(1.5rem, 3vw, 2.2rem); box-shadow: var(--shadow); }
.loc-card h3 { font-size: var(--fs-h3); margin-bottom: .2rem; }
.loc-card .neighborhood { font-family: var(--sans); color: var(--gold-ink); font-weight: 600; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; }
.loc-lines { list-style: none; padding: 0; margin: 1.3rem 0; }
.loc-lines li { display: flex; gap: .8rem; align-items: flex-start; padding: .55rem 0; border-bottom: 1px solid var(--line-soft); }
.loc-lines .icon { color: var(--accent); width: 1.2em; height: 1.2em; margin-top: .15em; }
.loc-lines a { color: var(--ink); text-decoration: none; }
.loc-lines li, .loc-lines span, .loc-lines a { overflow-wrap: anywhere; }
.loc-lines a:hover { color: var(--accent); text-decoration: underline; }
.loc-lines .k { display: block; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); font-family: var(--sans); }
.hours-table { width: 100%; border-collapse: collapse; font-size: 1rem; margin: .4rem 0 1.4rem; }
.hours-table td { padding: .5rem 0; border-bottom: 1px solid var(--line-soft); }
.hours-table td:first-child { font-family: var(--sans); font-weight: 500; }
.hours-table td:last-child { text-align: right; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.hours-table tr.today td { color: var(--accent); font-weight: 700; }
.hours-table tr.today td:first-child::after { content: " · today"; font-size: .68rem; letter-spacing: .08em; color: var(--accent); }
.visit__map { position: relative; border-radius: 16px; overflow: hidden; min-height: 320px; background: var(--paper-2); border: 1px solid var(--line); box-shadow: var(--shadow); display: flex; align-items: center; justify-content: center; }
.visit__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.visit__map .map-fallback { position: relative; text-align: center; color: var(--ink-faint); font-family: var(--sans); font-size: .9rem; padding: 1.5rem; z-index: 0; }
.visit__map .map-fallback .icon { width: 1.8rem; height: 1.8rem; color: var(--accent); margin: 0 auto .6rem; }
@media (max-width: 860px) { .visit { grid-template-columns: 1fr; } .visit__map { min-height: 260px; } .visit__photo img { aspect-ratio: 16/9; } }

/* ---------- footer ---------- */
.site-footer { background: var(--ink); color: rgba(255,255,255,.78); padding: 3.6rem 0 2rem; }
.site-footer .wrap { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 2rem; }
.f-brand { display: flex; align-items: center; gap: .8rem; margin-bottom: .8rem; }
.f-brand img { height: 54px; width: auto; }
.site-footer p { margin: .3rem 0; font-size: .95rem; }
.site-footer h4 { font-family: var(--sans); text-transform: uppercase; letter-spacing: .16em; font-size: .72rem; color: var(--gold-line); margin: 0 0 1rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { padding: .25rem 0; }
.site-footer a { color: rgba(255,255,255,.78); text-decoration: none; }
.site-footer a:hover { color: #fff; }
.f-social { display: flex; gap: .7rem; margin-top: 1rem; }
.f-social a { display: inline-flex; align-items: center; justify-content: center; width: 2.5em; height: 2.5em; border-radius: 999px; border: 1px solid rgba(255,255,255,.3); color: #fff; }
.f-social a:hover { background: rgba(255,255,255,.14); }
.f-social .icon { width: 1.1em; height: 1.1em; }
.f-bottom { border-top: 1px solid rgba(255,255,255,.14); margin-top: 2.6rem; padding-top: 1.4rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; font-size: .78rem; color: rgba(255,255,255,.5); }
@media (max-width: 860px) { .site-footer .wrap { grid-template-columns: 1fr; } }

/* ---------- menu pages ---------- */
.menu-hero { text-align: center; padding: clamp(2.2rem, 5vw, 3.4rem) 0 clamp(1.4rem, 3vw, 2rem); }
.menu-hero .eyebrow { color: var(--gold-ink); }
.menu-hero h1 { font-size: clamp(2.4rem, 6vw, 4rem); margin: .4rem 0 .4rem; }
.menu-hero p { color: var(--ink-soft); max-width: 56ch; margin: 0 auto; font-size: var(--fs-lede); }

.menu-switch { position: sticky; top: var(--header-h); z-index: 45; background: color-mix(in srgb, var(--paper) 94%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.menu-switch .wrap { display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; min-height: var(--switch-h); align-items: center; }
.menu-switch .wrap::-webkit-scrollbar { display: none; }
.menu-switch a, .menu-switch .menu-switch__order { flex: 0 0 auto; white-space: nowrap; text-decoration: none; font-family: var(--sans); font-weight: 600; font-size: .86rem; letter-spacing: .02em; color: var(--ink-soft); padding: .5em 1.05em; border-radius: 999px; min-height: 40px; display: inline-flex; align-items: center; gap: .45em; border: 0; background: none; cursor: pointer; }
@media (hover: hover) { .menu-switch a:hover { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); } }
.menu-switch a[aria-current="page"] { background: var(--accent); color: #fff; }
/* Order CTA in the switcher: shares the chip shaping above, then overrides the
   color so it reads as the tomato CTA (white text, not ink-soft). Same (0,2,0)
   specificity as the shaping rule but later in source, so the CTA color wins. */
.menu-switch .menu-switch__order { margin-left: auto; background: var(--cta); color: var(--cta-ink); }
.menu-switch .menu-switch__order:hover { background: var(--cta-hover); color: var(--cta-ink); }
@media (max-width: 720px) { .menu-switch__order { display: none; } }

.menu-nav { position: sticky; top: calc(var(--header-h) + var(--switch-h)); z-index: 40; background: color-mix(in srgb, var(--paper) 94%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); padding: .55rem 0; }
.menu-nav .wrap { display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; }
.menu-nav .wrap::-webkit-scrollbar { display: none; }
.menu-nav a { flex: 0 0 auto; white-space: nowrap; padding: .4em .9em; border-radius: 999px; text-decoration: none; font-family: var(--sans); font-size: .8rem; font-weight: 500; color: var(--ink-faint); min-height: 44px; display: inline-flex; align-items: center; }
@media (hover: hover) { .menu-nav a:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); } }
.menu-nav a.is-active { background: var(--accent); color: #fff; }

.menu-body { padding: clamp(1.8rem, 4vw, 3rem) 0 var(--section-y); }
.menu-section { margin-bottom: clamp(2.6rem, 5vw, 3.6rem); scroll-margin-top: calc(var(--header-h) + var(--switch-h) + var(--chips-h) + 8px); }
.menu-section__head { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 1.3rem; }
.menu-section__head h2 { font-size: var(--fs-h2); color: var(--accent); white-space: nowrap; min-width: 0; }
/* On a phone the big nowrap title + the price-column labels (e.g. Chicken/Veal)
   can't both fit, so the header overflowed off-screen and the labels stopped
   lining up with the price columns. Shrink the title and let it wrap if needed
   so the header always fits the page (no horizontal scroll) and stays aligned. */
@media (max-width: 640px) {
  .menu-section__head { gap: .6rem; }
  .menu-section__head h2 { font-size: clamp(1.35rem, 5.2vw, 1.9rem); white-space: normal; }
}
.menu-section__head .rule { flex: 1; height: 1px; background: var(--gold-line); opacity: .6; }
.menu-section__note { font-family: var(--sans); font-size: .85rem; color: var(--ink-faint); margin: -.6rem 0 1.2rem; font-style: italic; max-width: 72ch; }
.menu-subhead { font-family: var(--display); font-style: italic; font-size: 1.45rem; color: var(--gold-ink); margin: 1.4rem 0 .7rem; grid-column: 1 / -1; }

.menu-list { display: grid; grid-template-columns: 1fr 1fr; gap: .2rem 3rem; }
.menu-list--single { grid-template-columns: 1fr; max-width: var(--menu-measure); }
/* A section head carrying column labels (Half/Full, 12"/14"/18", Chicken/Veal)
   shares the single list's measure via the SAME token, so right edges — and thus
   every price column — always align. No second magic number to drift. */
.menu-section__head--cols,
.menu-section__head:has(.menu-cols) { max-width: var(--menu-measure); }

.menu-row { padding: .75rem 0; border-bottom: 1px dotted var(--line); }
.menu-row__top { display: flex; align-items: baseline; gap: .6rem; }
.menu-row__name { font-family: var(--display); font-weight: 700; font-size: 1.22rem; color: var(--ink); }
.menu-row__dots { flex: 1; border-bottom: 1px dotted var(--ink-faint); transform: translateY(-3px); opacity: .55; min-width: 1.5rem; }
.menu-row__desc { margin: .25rem 0 0; font-size: .96rem; color: var(--ink-soft); max-width: 62ch; }

/* multi-price columns (menu-page §6) */
.menu-row__prices { display: inline-grid; gap: 0 .7rem; text-align: right; font-variant-numeric: tabular-nums; align-items: baseline; }
.menu-row__prices--1 { grid-template-columns: minmax(var(--price-col-1), auto); }
.menu-row__prices--2 { grid-template-columns: repeat(2, var(--price-col)); }
.menu-row__prices--3 { grid-template-columns: repeat(3, var(--price-col-3)); }
.menu-row__prices.single { display: inline-block; }
.menu-row__price { font-family: var(--sans); font-weight: 600; color: var(--accent); white-space: nowrap; font-variant-numeric: tabular-nums; }
.menu-cols { font-family: var(--sans); font-size: .64rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.menu-cols span, .menu-cols .menu-row__price { color: var(--ink-faint); font-weight: 700; }

.tag { display: inline-block; font-family: var(--sans); font-size: .58rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; vertical-align: middle; padding: .2em .5em; border-radius: 4px; margin-left: .45em; }
.tag-veg { background: rgba(47,107,52,.14); color: var(--accent); }
.tag-gf  { background: rgba(110,83,31,.16); color: var(--gold-ink); }

.menu-disclaimer { font-family: var(--sans); font-size: .78rem; color: var(--ink-faint); margin-top: 2.4rem; padding-top: 1.4rem; border-top: 1px solid var(--line); max-width: 80ch; }

.cat-info { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: clamp(1.5rem, 3vw, 2.4rem); box-shadow: var(--shadow); margin-bottom: clamp(2rem,4vw,3rem); }
.cat-info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem 2.4rem; margin-top: 1.4rem; }
.cat-info-grid h4 { font-family: var(--sans); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-ink); margin: 0 0 .35rem; }
.cat-info-grid p { margin: 0; color: var(--ink-soft); font-size: .98rem; }
.cat-trays { display: flex; gap: 1rem; flex-wrap: wrap; }
.cat-tray { flex: 1 1 180px; background: var(--accent-deep); color: #fff; border-radius: 12px; padding: 1rem 1.2rem; }
.cat-tray strong { font-family: var(--display); font-size: 1.5rem; display: block; }
.cat-tray span { font-family: var(--sans); font-size: .82rem; color: rgba(255,255,255,.85); }
.cat-download { display: inline-flex; align-items: center; gap: .55em; margin-top: 1.4rem; font-family: var(--sans); font-weight: 600; color: var(--accent); text-decoration: none; border: 1.6px solid var(--accent); border-radius: 999px; padding: .7em 1.3em; }
.cat-download:hover { background: var(--accent); color: #fff; }
@media (max-width: 620px) { .cat-info-grid { grid-template-columns: 1fr; } }

@media (max-width: 860px) { .menu-list { grid-template-columns: 1fr; gap: 0; } }

/* ============================================================
   Ordering, menu picker & community  (skills: ordering-options,
   menu-picker, connect). Mechanics live in the skills; these are
   this build's tokens/look.
   ============================================================ */

/* --- order sheet (ordering-options: sheet pattern) --- */
html.order-locked { overflow: hidden; }
.order-sheet { position: fixed; inset: 0; z-index: 80; display: flex; align-items: flex-end; justify-content: center; visibility: hidden; }
.order-sheet[data-open] { visibility: visible; }
.order-sheet__scrim { position: absolute; inset: 0; background: rgba(35,32,26,.55); opacity: 0; transition: opacity .22s ease; }
.order-sheet[data-open] .order-sheet__scrim { opacity: 1; }
.order-sheet__panel { position: relative; width: min(34rem, 100%); max-height: 86vh;
  display: flex; flex-direction: column; overflow: hidden; background: var(--paper); color: var(--ink);
  border-radius: 22px 22px 0 0;
  transform: translateY(100%); transition: transform .24s cubic-bezier(.4,0,.2,1); box-shadow: var(--shadow); }
/* head + toggle are pinned (outside the scroll area); only .order-list scrolls */
.order-sheet[data-open] .order-sheet__panel { transform: translateY(0); }
@media (min-width: 640px) {
  .order-sheet { align-items: center; }
  .order-sheet__panel { border-radius: 20px; transform: translateY(12px) scale(.98); opacity: 0;
    transition: transform .2s ease, opacity .2s ease; }
  .order-sheet[data-open] .order-sheet__panel { transform: none; opacity: 1; }
}
.order-sheet__head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: clamp(1.1rem, 4vw, 1.6rem) clamp(1.1rem, 4vw, 1.6rem) .8rem; }
.order-sheet__title { font-family: var(--display); font-size: 1.5rem; color: var(--ink); margin: 0; }
.order-sheet__close { width: 40px; height: 40px; border: 0; border-radius: 999px; background: transparent;
  color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.order-sheet__close:hover { background: var(--line-soft); }
.order-toggle { flex: 0 0 auto; display: flex; gap: .25rem; padding: .25rem; margin: 0 clamp(1.1rem, 4vw, 1.6rem) .9rem; background: var(--line-soft); border-radius: 999px; }
.order-toggle__tab { flex: 1; padding: .6rem 1rem; border: 0; border-radius: 999px; cursor: pointer; background: transparent;
  color: var(--ink-faint); font-family: var(--sans); font-weight: 700; font-size: .92rem; }
.order-toggle__tab[aria-selected="true"] { background: var(--paper); color: var(--ink); box-shadow: 0 2px 8px -4px rgba(35,32,26,.5); }
.order-list { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; list-style: none; margin: 0;
  padding: .25rem clamp(1.1rem, 4vw, 1.6rem) calc(1.4rem + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: .5rem; }
.order-row__link { display: flex; flex-direction: row; align-items: center; gap: .85rem; padding: .7rem .85rem; border: 1px solid var(--line);
  border-radius: 13px; text-decoration: none; color: var(--ink); transition: border-color .15s ease, background .15s ease; }
.order-row__link:hover { border-color: var(--cta); background: color-mix(in srgb, var(--cta) 6%, transparent); }
.order-row__link--direct { border-color: var(--cta); background: color-mix(in srgb, var(--cta) 9%, transparent); }
.order-row__icon { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 11px; background: #fff; color: var(--brand, #555);
  border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; overflow: hidden; }
/* monochrome marks (fill:currentColor) take the brand tint; width:auto+max keeps each logo's aspect ratio */
.order-row__icon svg { width: auto; height: auto; max-width: 64%; max-height: 64%; }
.order-row__icon--full svg { max-width: 82%; max-height: 82%; }
.order-row__body { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.order-row__name { font-family: var(--sans); font-weight: 700; }
.order-row__meta { font-family: var(--sans); font-size: .84rem; color: var(--ink-faint); }

/* --- delivery-app strip (ordering-options: strip pattern, home order band) ---
   Auto-scrolling carousel running OPPOSITE the photo marquee. data-marquee +
   .marquee__track means gallery.js clones the items and adds .marquee--animated;
   we reuse the ph-marquee keyframe but reverse it so the apps travel rightward
   while the photo strip above travels leftward. No-JS / reduced-motion falls
   back to the manual horizontal scroll below. */
.order-strip { display: flex; align-items: center; gap: .9rem; margin-top: 1.6rem; }
.order-strip__track { display: flex; gap: .55rem; margin: 0; padding: .15rem; list-style: none; overflow-x: auto;
  scroll-snap-type: x proximity; scrollbar-width: none; }
.order-strip__track::-webkit-scrollbar { display: none; }
.order-strip__item { scroll-snap-align: start; flex: 0 0 auto; }
.order-strip__track a { display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; padding: .35rem .85rem .35rem .4rem; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.4); text-decoration: none; color: #fff; font-family: var(--sans); font-size: .86rem; font-weight: 600; }
.order-strip__track a:hover { background: rgba(255,255,255,.14); border-color: #fff; }
/* brand mark in a white chip; monochrome marks (fill/stroke currentColor) take the brand tint */
.order-strip__icon { flex: 0 0 auto; width: 1.55rem; height: 1.55rem; border-radius: 8px; background: #fff; color: var(--brand, #555);
  display: inline-flex; align-items: center; justify-content: center; overflow: hidden; }
.order-strip__icon svg { width: auto; height: auto; max-width: 66%; max-height: 66%; }
.order-strip__icon--full svg { max-width: 90%; max-height: 90%; }
/* animated state (gallery.js): clip the band, run the loop in reverse of the photo marquee */
.order-strip.marquee--animated { overflow: hidden; position: relative; }
.order-strip.marquee--animated .order-strip__track { overflow: visible; scroll-snap-type: none;
  animation: ph-marquee var(--marquee-speed) linear infinite reverse; }
.order-strip.marquee--animated:hover .order-strip__track,
.order-strip.marquee--animated:focus-within .order-strip__track { animation-play-state: paused; }
.order-strip.marquee--animated::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 2.5rem; z-index: 2;
  pointer-events: none; background: linear-gradient(270deg, var(--accent-deep), transparent); }
@media (prefers-reduced-motion: reduce) { .order-strip.marquee--animated .order-strip__track { animation: none; } }

/* --- community (connect skill) --- */
.connect__inner { display: flex; flex-wrap: wrap; gap: clamp(1.2rem, 4vw, 2.5rem); align-items: center; justify-content: space-between; }
.connect__copy { max-width: 34rem; }
.connect__copy h2 { font-family: var(--display); font-size: var(--fs-h2); color: var(--ink); margin: .2rem 0 .5rem; }
.connect__copy p { color: var(--ink-soft); }
.connect__actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.connect__btn { display: inline-flex; align-items: center; gap: .5rem; padding: .75rem 1.15rem; border: 1.6px solid var(--line);
  border-radius: 999px; background: var(--paper); color: var(--ink); font-family: var(--sans); font-weight: 600; text-decoration: none; cursor: pointer; }
.connect__btn:hover { border-color: var(--cta); color: var(--cta); }
.connect__btn .icon { width: 1.2em; height: 1.2em; }

/* footer "Order Online" rendered as a link-styled button */
.f-link-btn { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.f-link-btn:hover { color: var(--accent); }

/* --- sticky mobile order dock (menu pages) --- */
.order-dock { display: none; }
@media (max-width: 720px) {
  .order-dock { display: flex; gap: .6rem; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    padding: .6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(10px);
    border-top: 1px solid var(--line); }
  .order-dock .btn { flex: 1; justify-content: center; padding: .85em 1em; }
  .order-dock .btn--ghost { flex: 0 0 38%; }
  .order-dock ~ .site-footer { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
}