/* ── בורגרס בר · "ארבעים וחמישה אורות" ──────────────────────────────────────
   Tokens are copied verbatim from docs/BRAND-DIRECTION.md §9. Every value there
   is derived — one hue, zero radius, zero shadows, three sizes, two weights —
   and none of it is a preference, so none of it is adjusted here.            */

@font-face{
  font-family:"Pauza";
  src:url("fonts/heebo.ttf") format("truetype");
  font-weight:100 900;
  font-display:block;              /* never FOUT into a Latin fallback on a Hebrew page */
}

:root{
  --ink:#F1F4F6;                   /* L* 96.0 — the only ink allowed on the photograph */
  --ink-dim:#CFD2D4;
  --hairline:#686E72;
  --ground-2:#172025;
  --ground:#051319;
  --accent:#6FA6F4;                /* their own blue, h207 = complement of the food band */
  --accent-hi:#8BB4F5;

  --font:"Pauza",system-ui,sans-serif;
  --t-display:clamp(4rem,4.5vw,5.5rem);
  --t-h2:clamp(2rem,2.4vw,2.75rem);
  --t-body:1.125rem;
  --t-meta:0.875rem;
  --w-text:350;
  --w-strong:600;
  --lh-display:1.02;
  --lh-body:1.55;                  /* 1.5–1.65 for Hebrew. NOT 1.7 */
  --lh-meta:1.45;

  --radius:0;
  --rail-w:min(28%,46rem);
  --rail-gap:4%;

  --ease:cubic-bezier(.32,.68,.12,1);
  --dur-micro:240ms;
  --dur:400ms;
  --dur-light:1200ms;
}

*,*::before,*::after{ margin:0; padding:0; box-sizing:border-box; border-radius:var(--radius); box-shadow:none; }

html{ background:var(--ground); color-scheme:dark; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  font-family:var(--font); font-size:var(--t-body); font-weight:var(--w-text);
  line-height:var(--lh-body); letter-spacing:0; font-synthesis:none;
  font-variant-numeric:tabular-nums; color:var(--ink); background:var(--ground);
  -webkit-font-smoothing:antialiased;
}

/* ── the one surface ───────────────────────────────────────────────────────
   Fixed, full-bleed, opaque, and never unmounted. The document scrolls over it
   natively — no pinning, no scroll-jack, so IS 5568 keeps a real DOM underneath
   and the page stays keyboard-navigable.                                    */
#stage,#fallback{
  position:fixed; inset:0; inline-size:100%; block-size:100%;
  object-fit:cover; z-index:0; background:var(--ground);
}
#stage{ display:none; }
#stage.on{ display:block; }
#stage.on + #fallback{ display:none; }

/* ── chrome ─────────────────────────────────────────────────────────────── */
.chrome{
  position:fixed; inset-block-start:0; inset-inline:0; z-index:3;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.4rem clamp(1rem,4vw,3rem); font-size:var(--t-meta);
}
.chrome__mark{ font-weight:var(--w-strong); color:var(--ink); text-decoration:none; letter-spacing:0; }
.chrome__right{ display:flex; align-items:center; gap:1.25rem; }
.chrome__toggle{ background:none; border:0; color:var(--ink-dim); font:inherit; cursor:pointer; padding:.25rem 0; }
.chrome__toggle[aria-pressed="true"]{ color:var(--accent); }
.chrome__cta{ color:var(--accent); text-decoration:none; font-weight:var(--w-strong); }
.chrome__cta:hover,.chrome__cta:focus-visible{ color:var(--accent-hi); }

/* ── acts ───────────────────────────────────────────────────────────────────
   Heights are the measured page architecture: 9.2vh total, inside the flagship
   range of 7.33–12.59. Nothing is pinned; an ordinary section is ~1.0vh.    */
main{ position:relative; z-index:2; }
.act{ position:relative; display:block; }
.act--hero    { min-block-size:150vh; }
.act--silence { min-block-size:70vh; }     /* held silence — zero DOM */
.act--meat    { min-block-size:110vh; }
.act--branches{ min-block-size:140vh; }
.act--order   { min-block-size:120vh; }
.act--club    { min-block-size:60vh; }

/* ── the rail ───────────────────────────────────────────────────────────────
   PHYSICAL right, deliberately. In RTL `inset-inline-end` resolves to the LEFT
   edge, which puts the whole rail on top of the lit burger — the one zone the
   plate measurement forbids. Logical properties are correct for text flow; a
   position against a photograph is physical. Measured: the text zone sits at
   L* 1.2–3.9 against a 17.8 ceiling, so there is no scrim, blur or gradient.  */
.rail{
  position:sticky; top:32vh;
  inline-size:var(--rail-w);
  /* PHYSICAL, for the second time and for the same reason: in RTL
     `margin-inline-start:auto` pushes the block LEFT, which put the rail back on
     the lit bun. Anything positioned against the photograph is physical. */
  margin-left:auto; margin-right:var(--rail-gap);
  display:flex; flex-direction:column; gap:1.1rem; align-items:flex-start;
  padding-block:2rem;
}

h1{ font-size:var(--t-display); font-weight:var(--w-strong); line-height:var(--lh-display); }
h2{ font-size:var(--t-h2); font-weight:var(--w-strong); line-height:1.1; }
.meta{ font-size:var(--t-meta); line-height:var(--lh-meta); }
.dim{ font-size:var(--t-meta); line-height:var(--lh-meta); color:var(--ink-dim); }
.tiny{ font-size:.75rem; }
.rule{ inline-size:2.5rem; block-size:1px; background:var(--hairline); }
.ltr{ direction:ltr; unicode-bidi:isolate; display:inline-block; }

a{ color:var(--accent); }
a:hover,a:focus-visible{ color:var(--accent-hi); }
.cta{ font-size:var(--t-body); font-weight:var(--w-strong); text-decoration:none; }
.tel{ text-decoration:none; }

/* ── lists ──────────────────────────────────────────────────────────────── */
.patties,.branches,.order{ list-style:none; display:flex; flex-direction:column; gap:.55rem; }
.patties li,.branches li{ font-size:var(--t-meta); color:var(--ink-dim); cursor:default; transition:color var(--dur-micro) var(--ease); }
.patties li:hover,.patties li:focus-within,
.branches li:hover,.branches li:focus-within{ color:var(--ink); }
.patties li b{ color:var(--ink); font-weight:var(--w-strong); }
.branches button{
  background:none; border:0; color:inherit; font:inherit; text-align:start;
  cursor:pointer; padding:0; display:block; inline-size:100%;
}
.branches .b-sub{ display:block; font-size:.75rem; color:var(--hairline); }
.order a{ text-decoration:none; }
.sauces{ max-inline-size:34ch; }

.search input{
  background:transparent; border:0; border-block-end:1px solid var(--hairline);
  color:var(--ink); font:inherit; font-size:var(--t-meta); padding:.4rem 0;
  inline-size:100%; outline-offset:3px;
}
.search input::placeholder{ color:var(--hairline); }

/* ── footer ─────────────────────────────────────────────────────────────── */
.foot{ position:relative; z-index:2; min-block-size:70vh; padding-block:14vh 6vh; }
.foot .rail{ position:static; gap:.8rem; }
.allergens{ max-inline-size:46ch; line-height:1.5; }

/* ── a11y ───────────────────────────────────────────────────────────────────
   IS 5568 requires a real stop-all-motion control, and it has to stop the rAF
   loop too — a widget that only halts CSS animations while the canvas keeps
   drawing is the exact failure the legal skill names.                       */
.skip{ position:absolute; inset-block-start:-999px; inset-inline-start:0; z-index:9;
       background:var(--ground); color:var(--ink); padding:.75rem 1rem; }
.skip:focus{ inset-block-start:0; }
.vh{ position:absolute; inline-size:1px; block-size:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

.motion-kill{
  position:fixed; inset-block-end:1rem; inset-inline-start:1rem; z-index:4;
  background:var(--ground-2); color:var(--ink-dim); border:1px solid var(--hairline);
  font:inherit; font-size:.75rem; padding:.45rem .9rem; cursor:pointer;
}
.motion-kill[aria-pressed="true"]{ color:var(--accent); border-color:var(--accent); }

/* ── responsive ─────────────────────────────────────────────────────────────
   The rail is a CHARACTER COUNT, not a percentage: 28% holds ~38 CPL down to
   1152px, and drops to 31 at 1024 — under the 35 floor. Measured, not guessed. */
@media (max-width:1151px){ :root{ --rail-w:34%; } }
@media (max-width:899px){
  :root{ --rail-w:84%; --t-body:1.0625rem; --rail-gap:8%; }
  .rail{ margin-inline:auto; inset-block-start:auto; position:relative; }
  .act--hero{ min-block-size:150vh; }
  .act--branches,.act--order{ min-block-size:120vh; }
  /* On a phone the subject fills the frame, so there is no dark column to sit
     on. This is remedy 4 from BRAND-DIRECTION §7: a hard-edged opaque plate,
     chosen here by viewport rather than at runtime so it can never flicker.
     Not a scrim, not glass, not a gradient — a printed panel. */
  .rail{ background:var(--ground); padding:1.5rem; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ transition-duration:1ms !important; animation-duration:1ms !important; }
}

/* ── 23.8: the journey corrections ─────────────────────────────────────────
   הבשר shrank from a ten-item list to one line of fact, so it needs a lede
   rather than a list; ההזמנה merged into the branch box, so the order list now
   sits inside a section that already has a primary CTA and needs a quiet one. */
.lede{ font-size:clamp(19px,2.1vw,26px); line-height:1.45; color:var(--ink);
       max-width:22ch; margin:0 0 22px; }
.cta--quiet{ font-size:15px; opacity:.62; }
.cta--quiet:hover,.cta--quiet:focus-visible{ opacity:1; }
.act--branches .order{ list-style:none; margin:26px 0 14px; padding:0;
       display:flex; flex-direction:column; gap:9px; }
.act--branches .order li{ margin:0; }

/* ── the responsive layer ──────────────────────────────────────────────────
   Sits on the same plane as the film canvas and cross-fades in as the film
   reaches its end. --film-p is written by lib/film.js on every scroll frame,
   so the fade is driven by the film's own progress rather than by a second
   scroll listener that could disagree with it. */
#relit{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:clamp(0, (var(--film-p, 0) - 0.82) * 5.5, 1);
  transition:opacity .18s linear;
}
#relit canvas{ position:absolute; inset:0; width:100%; height:100%; }
@media (prefers-reduced-motion: reduce){ #relit{ display:none; } }

/* ── the Shabbat wave ──────────────────────────────────────────────────────
   16 · 23 · 1 · 4. Not a chart and not a map — the chain switching back on in
   its own published rhythm. The dots are branches, ordered by when they reopen. */
.wave{ margin:30px 0 26px; }
.wave__lede{ font-size:17px; line-height:1.5; color:var(--ink); margin:0 0 16px; max-width:30ch; }
.wave__grid{ display:flex; flex-wrap:wrap; gap:7px; max-width:30ch; margin:0 0 14px; }
.wave__dot{
  inline-size:11px; block-size:11px; border-radius:0;      /* square corners: 100% of the field */
  background:#241d18; display:block;
  box-shadow:none; transition:background .45s ease, box-shadow .45s ease;
}
.wave__dot.on{ background:#E8A33D; box-shadow:0 0 10px 1px rgba(232,163,61,.45); }
.wave__dot--closed{ background:#241d18; outline:1px solid #3a2f26; outline-offset:-1px; }
.wave__read{ font-size:15px; color:var(--dim); margin:0 0 4px; font-variant-numeric:tabular-nums; }
.wave__count{ color:var(--ink); font-weight:700; }
.wave__note{ font-size:13px; color:var(--dim); opacity:.72; margin:0; }
@media (prefers-reduced-motion: reduce){ .wave__dot{ transition:none; } }