/* ============================================================
   Hadar Geulah — 5914 18th Ave, Brooklyn NY 11204
   Warm cream ground · Zilla Slab + Inter · everything rounded
   ============================================================ */

@font-face{font-family:'Zilla';src:url('../fonts/ZillaSlab-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Zilla';src:url('../fonts/ZillaSlab-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Zilla';src:url('../fonts/ZillaSlab-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Zilla';src:url('../fonts/ZillaSlab-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'InterVar';src:url('../fonts/Inter-400.woff2') format('woff2');font-weight:100 900;font-display:swap}

:root{
  /* ground — warm cream */
  --paper:#F7F3EA;
  --paper-2:#EFE9DC;      /* raised / image placeholder */
  --rule:#E2DCCD;

  /* ink — sampled from the logo artwork */
  --ink:#2C2E35;
  --ink-soft:#66625A;   /* clears 4.5:1 on the raised card, not just on --paper */
  --ink-faint:#9A9488;

  /* green — sampled from the logo artwork */
  --green:#004C26;
  --green-lift:#0A6E39;   /* hover / interactive */
  --green-pale:#EAF1EC;
  --green-text:#004C26;   /* green used as TEXT — must clear 4.5:1 on --paper */


  /* rounding — nothing square */
  --r-xl:30px;
  --r-lg:22px;
  --r-md:16px;
  --r-sm:10px;

  /* footer is dark in both themes */
  --bar-bg:rgba(247,243,234,.95);
  --foot-bg:#24262C;
  --foot-ink:#CFCAC0;

  --gut:clamp(1.15rem,3.6vw,3rem);
  --shell:min(1360px, 100% - (2 * var(--gut)));

  --s--1:clamp(.76rem,.74rem + .1vw,.83rem);
  --s-0:clamp(1rem,.97rem + .15vw,1.08rem);
  --s-1:clamp(1.2rem,1.1rem + .45vw,1.5rem);
  --s-2:clamp(1.7rem,1.4rem + 1.3vw,2.6rem);
  --s-3:clamp(2.1rem,1.6rem + 2.2vw,3.6rem);
}

/* ---- dark theme: charcoal ground, lifted green so contrast still passes ---- */
[data-theme="dark"]{
  --paper:#1A1C21;
  --paper-2:#24272E;
  --rule:#343841;
  --ink:#F3F0E9;
  --ink-soft:#A8A49A;
  --ink-faint:#7C7970;
  --green:#0A7A3E;
  --green-lift:#12A24C;
  --green-pale:#16281D;
  --green-text:#3FBE79;   /* 7.1:1 on charcoal — the forest green is unreadable here */
  --bar-bg:rgba(26,28,33,.95);
  --foot-bg:#121419;
  --foot-ink:#A8A49A;
}
/* the emblem is two-colour art, so swap the file rather than recolour it */
.mark--dark{display:none}
[data-theme="dark"] .mark--light{display:none}
[data-theme="dark"] .mark--dark{display:block}

*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:'InterVar',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:var(--s-0);line-height:1.62;-webkit-font-smoothing:antialiased;
}
img,video{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:'Zilla',Georgia,serif;color:var(--ink);margin:0;line-height:1.04;font-weight:700;letter-spacing:-.03em}
:focus-visible{outline:2px solid var(--green-lift);outline-offset:3px;border-radius:6px}
.shell{width:var(--shell);margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- buttons ---------- */
.pill{
  display:inline-flex;align-items:center;gap:.55rem;
  background:var(--green);color:#fff;text-decoration:none;border:0;cursor:pointer;
  font-family:'InterVar',sans-serif;font-weight:600;font-size:var(--s-0);
  padding:1rem 2.4rem;border-radius:999px;
  transition:background .18s ease,transform .18s ease;
}
.pill:hover{background:var(--green-lift);transform:translateY(-2px)}
.pill:active{transform:translateY(0)}
.pill--sm{padding:.6rem 1.35rem;font-size:var(--s--1);letter-spacing:.06em}
.pill--ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--rule)}
.pill--ghost:hover{background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--green)}

/* ---------- masthead: Info/Contact left · lockup centre · Menu/Order right ---------- */
.masthead{padding:1.5rem 0 1.2rem}
.masthead__in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem}
.nav{display:flex;align-items:center;gap:1.6rem}
.nav--right{justify-content:flex-end}
.nav a{font-size:var(--s--1);font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;color:var(--ink-soft);transition:color .15s}
.nav a:hover{color:var(--green-text)}
.nav a.pill{color:#fff;letter-spacing:.12em}
.nav a.pill:hover{color:#fff}

/* Lockup — the real wordmark outlines from the logo artwork, with the emblem
   between the two words like the storefront sign. The words are SVG masks filled
   with currentColor, so one file works on any background. */
.lockup{display:flex;align-items:center;justify-content:center;
  gap:clamp(.45rem,1.3vw,1rem);text-decoration:none;color:var(--ink);
  --lockup-h:clamp(19px,3.1vw,32px)}
.lockup__w{display:block;height:var(--lockup-h);background:currentColor;flex:0 0 auto;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-position:center;mask-position:center}
.lockup__w--hadar{aspect-ratio:3.395;
  -webkit-mask-image:url(../img/word-hadar.svg);mask-image:url(../img/word-hadar.svg)}
.lockup__w--geulah{aspect-ratio:3.917;
  -webkit-mask-image:url(../img/word-geulah.svg);mask-image:url(../img/word-geulah.svg)}
.lockup__mark{width:calc(var(--lockup-h) * 2.1);height:auto;flex:0 0 auto}

/* ============ HERO — fills the screen under the header ============ */
.hero{position:relative;overflow:hidden;background:var(--paper-2);touch-action:pan-y;
  border-radius:var(--r-xl);min-height:420px;
  height:calc(100svh - var(--head-h, 108px) - 1rem)}
.hero__fig{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1.2s ease}
.hero__fig.on{opacity:1}
.hero__fig img{width:100%;height:100%;object-fit:cover}
.hero__veil{position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,rgba(0,0,0,.34) 0%,rgba(0,0,0,.14) 42%,rgba(0,0,0,.66) 100%)}
.hero__mid{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:clamp(1.3rem,3vw,2.2rem);text-align:center;padding:1.5rem}
.hero__line{margin:0;color:#fff;max-width:15ch;line-height:1.02;
  font-size:clamp(2rem,6.2vw,4.6rem);text-shadow:0 2px 30px rgba(0,0,0,.55);
  opacity:1;transition:opacity .3s ease}
.hero__line.is-out{opacity:0}
.hero .pill{box-shadow:0 10px 34px rgba(0,0,0,.35)}
.hero__ctrl{position:absolute;bottom:clamp(1rem,2.4vw,1.7rem);left:50%;transform:translateX(-50%);
  z-index:4;display:flex;align-items:center;gap:clamp(.55rem,1.4vw,1rem)}
.hero__ctrl[hidden]{display:none}
.hero__dots{display:flex;gap:.45rem}
.hero__dots button{width:26px;height:3px;border:0;padding:0;border-radius:99px;cursor:pointer;
  background:rgba(255,255,255,.42);transition:background .2s}
.hero__dots button[aria-current="true"]{background:#fff}
/* arrows sit with the dots; on touch they go away and you swipe instead */
.hero__nav{width:34px;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
  cursor:pointer;color:#fff;border:1px solid rgba(255,255,255,.3);background:rgba(0,0,0,.32);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:.7;transition:opacity .2s ease,background .2s ease}
.hero__nav svg{width:17px;height:17px}
.hero:hover .hero__nav{opacity:1}
.hero__nav:hover{background:rgba(0,0,0,.62)}
.hero__nav:focus-visible{opacity:1;outline:2px solid #fff;outline-offset:3px}
@media (hover:none) and (pointer:coarse){.hero__nav{display:none}}

/* ============ CATEGORIES — photo one side, name the other ============ */
.cats{padding:clamp(3rem,7vw,6rem) 0 0}
.cats__rows{display:flex;flex-direction:column;gap:clamp(1.8rem,4.5vw,3.6rem)}
.crow{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(1.4rem,4vw,3.5rem)}
.crow__shot{grid-column:1;grid-row:1;position:relative;overflow:hidden;
  border-radius:var(--r-xl);aspect-ratio:4/3;background:var(--paper-2)}
.crow__body{grid-column:2;grid-row:1}
.crow:nth-child(even) .crow__shot{grid-column:2}
.crow:nth-child(even) .crow__body{grid-column:1}
.crow__shot img{width:100%;height:100%;object-fit:cover;
  transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.crow:hover .crow__shot img{transform:scale(1.04)}
.crow__ph{position:absolute;inset:0;display:grid;place-items:center}
.crow__ph::after{content:"";width:34%;aspect-ratio:1;background:var(--ink-faint);opacity:.3;
  -webkit-mask:url(../img/emblem.svg) no-repeat center/contain;
  mask:url(../img/emblem.svg) no-repeat center/contain}
.crow__name{font-size:clamp(1.7rem,4.2vw,3.1rem);letter-spacing:-.03em}
.crow__meta{margin:.7rem 0 0;color:var(--ink-soft);font-size:var(--s--1);
  letter-spacing:.16em;text-transform:uppercase}
.crow__link{margin-top:1.5rem}
@media (max-width:820px){
  .crow,.crow:nth-child(even){grid-template-columns:1fr}
  .crow .crow__shot,.crow:nth-child(even) .crow__shot{grid-column:1;grid-row:1}
  .crow .crow__body,.crow:nth-child(even) .crow__body{grid-column:1;grid-row:2}
}

/* ============ PLATTERS ============ */
.platters{padding:clamp(3.5rem,7vw,6rem) 0 0;scroll-margin-top:1.5rem}
.platters__head{display:flex;flex-direction:column;align-items:flex-start;
  gap:1rem;margin-bottom:clamp(1.6rem,3vw,2.4rem);max-width:56ch}
.platters__head h2{font-size:var(--s-3)}
.platters__head p{margin:0;color:var(--ink-soft);font-size:var(--s-1);line-height:1.5}
.platters__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(.9rem,2vw,1.6rem)}
.ptile{display:flex;flex-direction:column}
.ptile__shot{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:var(--r-xl);
  background:var(--paper-2)}
.ptile__shot img{width:100%;height:100%;object-fit:cover;
  transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.ptile:hover .ptile__shot img{transform:scale(1.04)}
.ptile__ph{position:absolute;inset:0;display:grid;place-items:center}
.ptile__ph::after{content:"";width:34%;aspect-ratio:1;background:var(--ink-faint);opacity:.3;
  -webkit-mask:url(../img/emblem.svg) no-repeat center/contain;
  mask:url(../img/emblem.svg) no-repeat center/contain}
.ptile__name{margin:.9rem 0 0;font-size:clamp(1.15rem,2.2vw,1.6rem);letter-spacing:-.02em}
@media (max-width:640px){.platters__grid{grid-template-columns:1fr}}

/* ============ MENU GRID ============ */
.filters{position:sticky;top:0;z-index:20;background:var(--bar-bg);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--rule);margin-top:clamp(2rem,4vw,3rem)}
.filters__in{display:flex;gap:.85rem;align-items:center;padding:.8rem 0}
/* each category is its own block, with room to breathe between them */
.mcat{padding-top:clamp(2.8rem,6vw,5rem);scroll-margin-top:5.5rem}
.mcat:first-child{padding-top:clamp(1.6rem,3vw,2.6rem)}
.mcat__head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding-bottom:.9rem;border-bottom:1px solid var(--rule)}
.mcat__note{margin:.8rem 0 0;color:var(--ink-soft);max-width:62ch;
  font:400 var(--s--1)/1.55 'InterVar',sans-serif}
.mcat__name{font-size:var(--s-2);letter-spacing:-.03em}
.mcat__count{font-size:var(--s--1);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);white-space:nowrap}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.8rem,1.6vw,1.5rem);
  padding:clamp(1.2rem,2.4vw,1.8rem) 0 0;list-style:none;margin:0}
.tile{display:flex;flex-direction:column;text-decoration:none;color:inherit;height:100%}
.tile__shot{position:relative;aspect-ratio:1/1;overflow:hidden;border-radius:var(--r-lg);
  background:var(--paper-2);flex:0 0 auto}
.tile__shot img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.tile:hover .tile__shot img{transform:scale(1.055)}
/* no photo yet — show the emblem as a watermark, masked so it takes the theme's colour */
.tile__ph{position:absolute;inset:0;display:grid;place-items:center;background:var(--paper-2)}
.tile__ph::after{content:"";width:44%;aspect-ratio:1;background:var(--ink-faint);opacity:.34;
  -webkit-mask:url(../img/emblem.svg) no-repeat center/contain;
  mask:url(../img/emblem.svg) no-repeat center/contain}
.tile__badge{position:absolute;top:.7rem;left:.7rem;background:var(--green);color:#fff;
  font-size:.55rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:.28rem .6rem;border-radius:999px}
.tile__badge--out{background:#fff;color:#8A6A1F}
.tile__badge--week{background:var(--paper-2);color:var(--ink);border:1px solid var(--rule)}
.tile__body{padding:.75rem .2rem 0;display:flex;flex-direction:column;flex:1 1 auto}
.tile__name{font-family:'Zilla',serif;font-weight:600;font-size:1.02rem;line-height:1.22;margin:0}
.tile__desc{margin:.3rem 0 0;font-size:.83rem;line-height:1.45;color:var(--ink-soft);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tile__price{margin-top:auto;padding-top:.6rem;font-family:'Zilla',serif;font-weight:700;
  font-size:1rem;color:var(--green-text);font-variant-numeric:tabular-nums}
/* Sold out is said in words, not by draining the photo. A greyed-out picture
   makes good food look spoiled, and the badge already carries the message. */
.grid__none{grid-column:1/-1;text-align:center;padding:3rem 0;color:var(--ink-faint)}
@media (max-width:1080px){.grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:720px){.grid{grid-template-columns:repeat(2,1fr)}.stage{aspect-ratio:4/3}}

/* ---------- centred CTA ---------- */
.midcta{text-align:center;padding:clamp(3rem,6vw,4.8rem) 0 0}
.midcta h2{font-size:var(--s-2);margin-bottom:1.4rem}

/* ---------- info page ---------- */
.page-head{padding:clamp(2.4rem,5vw,4rem) 0 clamp(1.6rem,3vw,2.4rem)}
.page-head h1{font-size:var(--s-3)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(.9rem,1.8vw,1.4rem)}
/* --paper-2, not #fff — a literal here leaves light text on a white card in dark mode */
.card{background:var(--paper-2);border-radius:var(--r-lg);
  padding:clamp(1.5rem,3vw,2.2rem);border:1px solid var(--rule)}
.card h2{font-size:1.35rem;margin-bottom:.9rem;color:var(--ink)}
.card p{margin:0 0 .5rem;color:var(--ink-soft)}
.card a{color:var(--green-text);text-decoration:none;font-weight:600}
.card a:hover{text-decoration:underline}
.hours{display:grid;grid-template-columns:auto 1fr;gap:.45rem 1.4rem;margin:0}
.hours dt{color:var(--ink-soft)}
.hours dd{margin:0;text-align:right;font-variant-numeric:tabular-nums;font-weight:500;color:var(--ink)}
.hours .is-closed dd{color:var(--green-text);font-weight:600}
.mapwrap{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--rule);margin-top:clamp(1rem,2vw,1.4rem)}
.mapwrap iframe{display:block;width:100%;height:min(46vh,420px);border:0}

/* ---------- menu page ---------- */
.menubar{position:sticky;top:0;z-index:20;background:var(--bar-bg);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--rule)}
.menubar__in{display:flex;align-items:center;gap:.9rem;padding:.8rem 0}
/* The 14 categories are wider than the bar, so the strip scrolls. On a phone you
   swipe it; on a computer there is nothing to grab, hence these arrows. */
.chipbar{position:relative;flex:1;min-width:0;display:flex;align-items:center;gap:.15rem}
.chipnav{flex:0 0 auto;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  cursor:pointer;background:var(--paper-2);border:1px solid var(--rule);color:var(--ink-soft);
  transition:color .2s,border-color .2s,background .2s}
.chipnav svg{width:15px;height:15px}
.chipnav:hover{color:var(--ink);border-color:var(--green-text)}
.chipnav:focus-visible{outline:2px solid var(--green-text);outline-offset:2px}
.chipnav[hidden]{display:none}
/* on touch the strip is swipeable, so the arrows are just clutter */
@media (hover:none) and (pointer:coarse){.chipnav{display:none}}
.chips{display:flex;gap:.4rem;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0;scroll-behavior:smooth}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;background:transparent;border:1px solid var(--rule);color:var(--ink-soft);
  font:600 var(--s--1)/1 'InterVar',sans-serif;letter-spacing:.05em;
  padding:.58rem 1.05rem;border-radius:999px;cursor:pointer;white-space:nowrap;transition:.15s}
.chip:hover{color:var(--ink);border-color:var(--green-text)}
.chip[aria-current="true"]{background:var(--green);border-color:var(--green);color:#fff}
.search{position:relative;flex:0 0 auto}
.search input{background:var(--paper-2);border:1px solid var(--rule);color:var(--ink);border-radius:999px;
  font:400 var(--s--1)/1 'InterVar',sans-serif;padding:.66rem 1rem .66rem 2.15rem;width:190px;transition:.15s}
.search input::placeholder{color:var(--ink-faint)}
.search input:focus{outline:none;border-color:var(--green);width:230px}
.search svg{position:absolute;left:.8rem;top:50%;transform:translateY(-50%);color:var(--ink-faint);pointer-events:none}

.cat{padding:clamp(2.6rem,5vw,4rem) 0 0;scroll-margin-top:5.5rem}
.cat__head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding-bottom:1rem;border-bottom:1px solid var(--rule);margin-bottom:.4rem}
.cat__head h2{font-size:var(--s-2)}
.cat__n{font-size:var(--s--1);color:var(--ink-faint);letter-spacing:.13em;text-transform:uppercase;white-space:nowrap}
.items{list-style:none;margin:0;padding:0}
.item{display:grid;grid-template-columns:104px 1fr auto;gap:1.4rem;align-items:center;
  padding:1.1rem .8rem;border-radius:var(--r-md);text-decoration:none;color:inherit;transition:background .16s}
.item + .item{border-top:1px solid var(--rule)}
.item:hover{background:var(--paper-2)}
.item--noimg{grid-template-columns:1fr auto}
.item__thumb{width:104px;height:104px;border-radius:var(--r-md);object-fit:cover;background:var(--paper-2)}
.item__name{font-family:'Zilla',serif;font-size:1.12rem;font-weight:600;margin:0;line-height:1.24}
.item__desc{margin:.3rem 0 0;font-size:.9rem;line-height:1.5;color:var(--ink-soft);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.item__new{display:inline-block;margin-right:.5rem;vertical-align:.1em;background:var(--green);color:#fff;
  font-family:'InterVar',sans-serif;font-size:.58rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;padding:.2rem .5rem;border-radius:999px}
.item__oos{display:inline-block;margin-top:.4rem;font-size:.62rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:#8A6A1F;background:#F6EDD8;padding:.22rem .55rem;border-radius:999px}
/* same here: the "Sold out" label does the work, the photo stays appetising */
.ladder{display:inline-grid;font-variant-numeric:tabular-nums;min-width:5.4rem}
.ladder__row{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.24rem 0}
.ladder__row + .ladder__row{border-top:1px solid var(--rule)}
.ladder__size{font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-faint);font-weight:700}
.ladder__amt{font-family:'Zilla',serif;font-weight:600;font-size:1.02rem;line-height:1}
.ladder--single .ladder__row{justify-content:flex-end;padding:0}
.ladder--single .ladder__size{display:none}
.ladder__choose{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--green-text);font-weight:700;white-space:nowrap}
.empty{padding:3.5rem 0;text-align:center;color:var(--ink-faint)}

/* ---------- footer ---------- */
.foot{background:var(--foot-bg);color:var(--foot-ink);margin-top:clamp(3.5rem,7vw,6rem);
  border-radius:var(--r-xl) var(--r-xl) 0 0;padding:clamp(2.8rem,5.5vw,4.4rem) 0 2.2rem}
.foot__top{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1.1rem}
.foot .lockup__word{color:#F7F3EA;font-size:clamp(1.5rem,3.4vw,2.2rem)}
.foot .lockup__mark{width:clamp(34px,4.4vw,48px)}
.foot__links{display:flex;gap:1.7rem;flex-wrap:wrap;justify-content:center;margin-top:.4rem}
.foot__links a{font-size:var(--s--1);letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;color:var(--foot-ink);text-decoration:none}
.foot__links a:hover{color:#fff}
.kosher{display:inline-flex;align-items:center;gap:.5rem;border:1px solid rgba(255,255,255,.18);
  padding:.55rem 1.1rem;border-radius:999px;font-size:.78rem;letter-spacing:.05em}
.kosher b{color:#5FD08F;font-weight:600}
.foot__legal{margin-top:2.4rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.12);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.78rem;color:color-mix(in srgb, var(--foot-ink) 62%, transparent)}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
.reveal.is-in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width:860px){
  .masthead__in{grid-template-columns:1fr;justify-items:center;gap:1.1rem}
  .nav--left,.nav--right{justify-content:center}
  .nav{gap:1.2rem;flex-wrap:wrap}
  .masthead__in > .nav--left{order:2}
  .masthead__in > .lockup{order:1}
  .masthead__in > .nav--right{order:3}
  .hero{border-radius:var(--r-lg)}   /* no aspect-ratio: height is set, so it would force the width */
}
@media (max-width:560px){
  .item{grid-template-columns:76px 1fr;grid-template-areas:"t m" "l l";gap:.85rem 1rem}
  .item__thumb{grid-area:t;width:76px;height:76px}
  .item__main{grid-area:m}
  .ladder{grid-area:l;justify-self:start;min-width:0}
  .item--noimg{grid-template-columns:1fr;grid-template-areas:"m" "l"}
  .search input,.search input:focus{width:120px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
  .strip{scroll-behavior:auto}
}

/* ============ CATERING ============ */
/* The catering catchphrase. Zilla (the display face) at --s-2 puts it clearly
   below the h1 but well above body copy, and the narrow measure forces it onto
   two lines so it reads as a statement rather than a sentence. */
.page-head__lead{margin:.8rem 0 0;max-width:22ch;
  font:500 var(--s-2)/1.15 'Zilla',Georgia,serif;
  letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.page-head__sub{margin:.9rem 0 1.6rem;max-width:52ch;color:var(--ink-soft);
  font:400 var(--s-0)/1.6 'InterVar',sans-serif}
.csec{padding-top:clamp(2.4rem,5vw,4rem)}
/* masonry-ish gallery: photos keep their own shape instead of being cropped square */
/* Catering photos — a rail that slides sideways rather than a static grid.
   Native scroll-snap does the swiping on touch, so nothing JS-driven sits in the
   scrolling path; the arrows are for pointer users and hide themselves when the
   rail isn't actually overflowing. Cards are sized so a partial one always peeks
   in from the right — that peek is what tells you there is more to see. */
.strip{position:relative}
.strip__rail{display:grid;grid-auto-flow:column;
  grid-auto-columns:calc((100% - 2*clamp(.8rem,1.6vw,1.4rem))/3);
  gap:clamp(.8rem,1.6vw,1.4rem);overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  margin-top:clamp(1.2rem,2.4vw,1.8rem);padding-bottom:.3rem;
  scrollbar-width:none;-ms-overflow-style:none}
.strip__rail::-webkit-scrollbar{display:none}
.shot{margin:0;scroll-snap-align:start;border-radius:var(--r-lg);
  overflow:hidden;background:var(--paper-2)}
.shot img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}
.strip__nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:38px;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
  cursor:pointer;color:#fff;border:1px solid rgba(255,255,255,.3);
  background:rgba(0,0,0,.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:.85;transition:opacity .2s ease,background .2s ease}
.strip__nav:hover{opacity:1;background:rgba(0,0,0,.72)}
.strip__nav[hidden]{display:none}
.strip__nav svg{width:18px;height:18px}
.strip__nav--prev{left:.6rem}
.strip__nav--next{right:.6rem}
.gallery__empty{margin:1.4rem 0 0;color:var(--ink-faint)}
@media (prefers-reduced-motion:reduce){.strip__rail{scroll-behavior:auto}}
@media (max-width:900px){
  .strip__rail{grid-auto-columns:calc((100% - clamp(.8rem,1.6vw,1.4rem))/2)}
}
@media (max-width:560px){
  .strip__rail{grid-auto-columns:84%}
  .strip__nav{display:none}          /* swipe instead, same as the hero */
}
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.8rem,1.6vw,1.5rem);
  list-style:none;margin:clamp(1.2rem,2.4vw,1.8rem) 0 0;padding:0}
@media (max-width:900px){.pgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.pgrid{grid-template-columns:1fr}
}
/* phone + WhatsApp side by side; they wrap on a narrow screen rather than squash */
.ctarow{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem}
.pill--wa{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--rule)}
.pill--wa:hover{background:var(--paper-2);box-shadow:inset 0 0 0 1px #25D366}
.pill--wa .wa{width:19px;height:19px;color:#25D366;flex:0 0 auto}
.midcta .pill--wa{color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.32)}
.midcta .pill--wa:hover{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px #25D366}
/* a button that isn't available yet — reads as inert, not broken */
.pill--off{opacity:.55;cursor:default;pointer-events:none}

/* ============ MENU GROUPS ============ */
/* A group is the top level (Takeout); the categories inside it are subsections,
   so their headings step down a size and the group heading carries the weight. */
.mgroup{padding-top:clamp(2.4rem,5vw,4rem);scroll-margin-top:5.5rem}
.mgroup:first-child{padding-top:clamp(1.4rem,2.6vw,2.2rem)}
.mgroup__head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding-bottom:1rem;border-bottom:2px solid var(--ink)}
.mgroup__name{font-size:var(--s-3);letter-spacing:-.035em}
.mgroup__count{font-size:var(--s--1);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);white-space:nowrap}
.mgroup__note{margin:.9rem 0 0;color:var(--ink-soft);max-width:62ch;
  font:400 var(--s-0)/1.55 'InterVar',sans-serif}
/* subsections sit inside a group, so they lighten off */
.mgroup .mcat__head{border-bottom:1px solid var(--rule)}
.mgroup .mcat__name{font-size:var(--s-1)}

/* ---------- back to top ---------- */
/* The menu is 130 items on one page, so getting back to the filters means a long
   scroll. Appears once you are well past the hero and stays clear of the corner
   on mobile. Hidden entirely for anyone who asked for reduced motion to be
   respected? No - it is a jump, not an animation, so it stays; only the scroll
   behaviour softens. */
.totop{
  position:fixed;right:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);z-index:60;
  width:46px;height:46px;border-radius:50%;border:1px solid var(--rule);
  background:var(--bar-bg);color:var(--ink);cursor:pointer;
  display:grid;place-items:center;padding:0;
  box-shadow:0 6px 22px rgba(0,0,0,.28);
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .25s ease,transform .25s ease,visibility .25s
}
.totop.on{opacity:1;visibility:visible;transform:none}
.totop:hover{background:var(--green);border-color:var(--green);color:#fff}
.totop svg{width:18px;height:18px}
@media (prefers-reduced-motion:reduce){.totop{transition:none}}
/* ---- Yom Tov / seasonal promo band -------------------------------------
   Sits between the header and the hero. Deliberately loud: it is the first
   thing on the page and has to be seen before the photo. index.html removes
   it after the date in data-until. */
.promo{background:linear-gradient(180deg,#0A7A3E 0%,#004C26 100%);color:#F7F3EA;
  padding:clamp(1.6rem,4vw,2.6rem) 1.2rem;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:.85rem}
.promo__eyebrow{margin:0;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;opacity:.85}
.promo__t{margin:0;max-width:20ch;font-family:'Zilla',Georgia,serif;font-weight:700;
  line-height:1.05;font-size:clamp(1.9rem,5.2vw,3.2rem)}
.promo__b{display:inline-flex;align-items:center;gap:.55rem;background:#F7F3EA;color:#00381C;
  border-radius:999px;padding:.8rem 1.6rem;font-weight:700;font-size:clamp(1rem,2.2vw,1.12rem);
  text-decoration:none;box-shadow:0 6px 22px rgba(0,0,0,.35)}
.promo__b:hover{background:#fff}
.promo__b:focus-visible{outline:3px solid #F7F3EA;outline-offset:3px}