/* ==========================================================================
   רמוֹתה — V2, mobile-first
   Built min-width up: base rules target a 320–430px phone, larger screens
   are additive media queries, never overrides that fight the base layer.
   ========================================================================== */

/* Client-supplied Asimon, self-hosted — replaces the former Google Fonts
   Secular One + Rubik pair. One family covers both --display and --body
   (see :root below), the same way the Desktop implementation already uses
   Asimon everywhere. Six weights are registered under one font-family name
   so `font-weight` picks the right file; only the weights this stylesheet
   actually calls for (400/500/600/700) are used by today's rules, but
   800/900 are registered too since the client supplied them — an unused
   @font-face costs nothing until something actually computes to that
   weight. Light and Stencil were not added: no Light file was supplied for
   this task, and nothing on this site has the kind of decorative/display
   treatment Stencil is meant for. */
@font-face{
  font-family:"Asimon";
  src:url("../assets/fonts/asimon-regular-aaa.otf") format("opentype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Asimon";
  src:url("../assets/fonts/asimon-medium-aaa.otf") format("opentype");
  font-weight:500;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Asimon";
  src:url("../assets/fonts/asimon-demibold-aaa.otf") format("opentype");
  font-weight:600;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Asimon";
  src:url("../assets/fonts/asimon-bold-aaa.otf") format("opentype");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Asimon";
  src:url("../assets/fonts/asimon-ultrabold-aaa.otf") format("opentype");
  font-weight:800;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Asimon";
  src:url("../assets/fonts/asimon-black-aaa.otf") format("opentype");
  font-weight:900;
  font-style:normal;
  font-display:swap;
}

:root{
  --canvas:#F4EFE1;
  --canvas-deep:#E7DDC7;
  --panel:#FFFCF4;
  --ink:#14241A;
  --forest:#1C3826;
  --forest-soft:#3C6047;
  --forest-deep:#122A1C;
  --accent:#D98324;
  --accent-hover:#B56612;
  --accent-muted:#F0D3A2;
  --text-primary:#14241A;
  --text-secondary:#4F6656;
  --line:rgba(28,56,38,.15);
  --line-strong:rgba(28,56,38,.4);
  --on-accent:#211404;
  --on-forest:#F4EFE1;

  --display:"Asimon","Segoe UI",system-ui,sans-serif;
  --body:"Asimon","Segoe UI",system-ui,sans-serif;

  --ease:cubic-bezier(.22,.61,.36,1);

  /* mobile-first fluid spacing: comfortable at 320, breathes by 1280 */
  --pad:clamp(18px,5.5vw,56px);
  --gap:clamp(14px,3.4vw,28px);
  --maxw:1180px;
  --radius:16px;
  --radius-sm:10px;

  --shadow-1:0 6px 20px rgba(20,34,24,.10);
  --shadow-2:0 14px 34px rgba(20,34,24,.16);
}

*,*::before,*::after{box-sizing:border-box}
/* The accessibility panel's text-size control scales the ROOT, so every
   rem-based size on the page follows it. A percentage keeps the visitor's
   own browser font-size preference as the baseline instead of overwriting
   it with a hardcoded pixel value. */
html{
  -webkit-text-size-adjust:100%;scroll-behavior:smooth;
  font-size:calc(100% * var(--a11y-fs,1));
  /* A little air above whatever an anchor lands on, so a section heading is
     never flush against the top edge. Deliberately small: the header is
     declared sticky but does not actually stick, because html/body carry
     overflow-x:hidden — that makes the root the sticky containing block and
     the bar scrolls away with the content. (Pre-existing behaviour, left as
     it is; reserving a full header's height here would only open a gap
     nothing ever fills.) */
  scroll-padding-block-start:clamp(14px,3vw,26px);
}
html,body{overflow-x:hidden}
body{
  margin:0;background:var(--canvas);color:var(--text-primary);
  font-family:var(--body);font-weight:400;
  font-size:clamp(1rem,3.6vw,1.0625rem);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--display);font-weight:400;line-height:1.12;margin:0;letter-spacing:-.01em;text-wrap:balance}
h1{letter-spacing:-.02em}
p{margin:0}
a{color:inherit}
ul{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{max-width:100%;display:block}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}

/* Latin uppercase wants more breathing room than Hebrew does at the same
   tracking value — English mode gets it a touch wider, never narrower. */
html[dir="ltr"] .label,html[dir="ltr"] .hero__kicker,
html[dir="ltr"] footer h4,html[dir="ltr"] .menu-item__tag{letter-spacing:.09em}

.wrap{width:min(100% - var(--pad)*2,var(--maxw));margin-inline:auto}
.label{
  font-family:var(--body);font-weight:700;font-size:.78rem;letter-spacing:.05em;
  text-transform:uppercase;color:var(--forest-soft);
}

.skip{position:absolute;inset-inline-start:-9999px;top:0;z-index:300;background:var(--forest);color:var(--canvas);padding:14px 20px;border-radius:0 0 10px 10px}
.skip:focus{inset-inline-start:16px}

.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ==========================================================================
   BUTTONS — every tap target is >= 48px tall on touch
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:48px;padding:13px 22px;border-radius:999px;text-decoration:none;
  font-weight:600;font-size:.98rem;letter-spacing:.01em;
  background:var(--accent);color:var(--on-accent);
  transition:transform .25s var(--ease),background .25s var(--ease),box-shadow .25s var(--ease);
  box-shadow:0 4px 14px rgba(28,40,26,.16);
  white-space:nowrap;
}
.btn:hover{background:var(--accent-hover);box-shadow:0 10px 22px rgba(28,40,26,.22)}
.btn svg{width:19px;height:19px;flex:none}
.btn--ghost{background:transparent;color:inherit;border:1.5px solid var(--line-strong);box-shadow:none}
.btn--ghost:hover{background:rgba(28,56,38,.06);box-shadow:none}
/* On the photograph a hairline of translucent cream all but disappeared —
   it read as a text label, not a control. A thicker, genuinely dark edge plus
   a light dark wash gives it a definite button silhouette against any part of
   the image, while staying plainly secondary to the filled orange primary:
   the eye still sorts by colour first, and only one of the two has any. */
.btn--on-dark{
  border:2px solid rgba(6,11,7,.72);
  background:rgba(6,11,7,.42);
  color:#FFFAEE;
  /* A dark edge alone solves only half the problem: it reads beautifully
     against the sky and the pale canopy, and vanishes completely where the
     button happens to fall on the cart or the crowd. The hairline of cream
     just outside it is what makes the silhouette survive BOTH — dark edge for
     light ground, light edge for dark ground, so the shape is always there
     no matter which part of the photograph ends up behind it. */
  box-shadow:0 0 0 1.5px rgba(250,246,235,.5),0 2px 12px rgba(5,9,6,.34);
  text-shadow:0 1px 2px rgba(4,7,5,.55);
}
.btn--on-dark:hover{background:rgba(6,11,7,.58);border-color:rgba(6,11,7,.85)}
.btn--dark{background:var(--forest);color:var(--on-forest)}
.btn--dark:hover{background:#243c2a}
.btn--sm{min-height:40px;padding:9px 16px;font-size:.88rem}
.btn--block{width:100%}
.btn[disabled],.btn.is-soon{background:var(--panel);color:var(--text-secondary);border:1.5px dashed var(--line-strong);box-shadow:none;cursor:default}
.btn[disabled]:hover,.btn.is-soon:hover{background:var(--panel);transform:none}

.btnrow{display:flex;gap:10px;flex-wrap:wrap}

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header{
  position:sticky;top:0;z-index:120;
  display:flex;align-items:center;gap:8px;
  padding:12px var(--pad);
  background:rgba(244,239,225,.92);
  border-block-end:1px solid transparent;
  backdrop-filter:none;
}
.site-header.solid{border-block-end-color:var(--line);box-shadow:0 2px 14px rgba(20,30,22,.06)}
@media(min-width:400px){.site-header{gap:14px}}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--forest);font-family:var(--display);font-size:1.42rem;letter-spacing:-.01em}
.brand svg{width:26px;height:26px;flex:none}
/* the real logo — its round cream badge — is the header's home link */
.brand--logo{flex:none;border-radius:50%}
.brand__logo{display:block;width:50px;height:50px;margin-block:-6px;border-radius:50%;
  box-shadow:0 3px 12px rgba(20,14,8,.28),0 0 0 1px rgba(120,82,40,.16)}
html.a11y-contrast .brand__logo{box-shadow:0 0 0 2px #000}
.header__spacer{flex:1}
.nav-links{display:none}
.nav-toggle{display:none}
@media(min-width:1024px){
  /* Tight by default the moment the full nav appears — nav links, phone,
     Waze, Instagram and the language switch all in one row leaves little
     room at 1024–1199px; a 1200px+ rule below loosens it back up once
     there's actually space to spare. Below 1024px the compact mobile-style
     header (brand + Waze icon + language switch) carries on instead —
     measured to comfortably fit content down to 860px and below, where
     squeezing the full nav in only produced diminishing returns. This also
     lines the header switch up with the hero's own 1024px split point. */
  .site-header{gap:10px}
  .nav-links{display:flex;gap:16px;align-items:center}
  .nav-links a{text-decoration:none;font-size:.92rem;color:var(--text-secondary);transition:color .25s var(--ease)}
  .nav-links a:hover{color:var(--forest)}
  .header-cta{display:flex;gap:8px}
}
.header-cta{display:none}
@media(min-width:1024px){.header-cta{display:flex}}
@media(min-width:1200px){
  .site-header{gap:14px}
  .nav-links{gap:26px}
  .nav-links a{font-size:.95rem}
  .header-cta{gap:10px}
}

/* mobile: header keeps brand + a single compact Waze icon; full nav
   lives in the bottom action bar, so nothing here needs a hamburger. */
.header-mobile-cta{display:flex;gap:8px}
@media(min-width:1024px){.header-mobile-cta{display:none}}

/* a round icon-only action (Instagram in the header) — same 44px+ touch
   target as every other control, without competing with the text buttons */
.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:50%;flex:none;
  color:inherit;transition:background .2s var(--ease),color .2s var(--ease);
}
.icon-btn svg{width:20px;height:20px}
.site-header .icon-btn{color:var(--forest)}
.site-header .icon-btn:hover{background:rgba(28,56,38,.08)}
@media(pointer:coarse){.icon-btn{width:44px;height:44px}}

/* language switcher — sits last in the header's DOM order, which in the
   default RTL layout makes it the leftmost control: the corner asked for,
   without pulling it out of normal flex flow with absolute positioning.
   A small globe glyph front-loads what the control does at a glance, so
   two-letter labels ("EN") read as a language toggle and not a stray pair
   of buttons. */
.langswitch{
  display:flex;align-items:center;gap:6px;flex:none;
  padding-inline-start:10px;
  border:1.5px solid var(--line-strong);border-radius:999px;overflow:hidden;
  background:var(--panel);
}
.langswitch__icon{width:15px;height:15px;flex:none;color:var(--forest-soft)}
.langswitch button{
  padding:8px 11px;font-size:.76rem;font-weight:700;letter-spacing:.02em;
  color:var(--text-secondary);min-height:40px;border-radius:999px;
  transition:background .25s var(--ease),color .25s var(--ease);
}
@media(min-width:400px){.langswitch button{padding:8px 13px;font-size:.8rem}}
.langswitch button[aria-pressed="true"]{background:var(--forest);color:var(--on-forest)}
.langswitch button:not([aria-pressed="true"]):hover{color:var(--forest)}
@media(pointer:coarse){.langswitch button{min-height:44px}}
/* phones: header controls ~20% smaller, the wordmark larger and in gold */
@media(max-width:1023px){
  .langswitch{gap:5px;padding-inline-start:8px}
  .langswitch__icon{width:12px;height:12px}
  .langswitch button,.langswitch button[aria-pressed]{padding:6px 9px;font-size:.66rem;min-height:35px}
  .header-mobile-cta .icon-btn{width:35px;height:35px}
  .header-mobile-cta .icon-btn svg{width:16px;height:16px}
  .brand{font-size:1.66rem;font-weight:700;color:var(--accent-hover)}
}

/* ==========================================================================
   STICKY MOBILE ACTION BAR — the three things a visitor needs at a thumb's
   reach: menu, directions, call. Hidden on pointer:fine / wide screens where
   the header nav already does this job.
   ========================================================================== */
.actionbar{
  position:fixed;inset-inline:0;inset-block-end:0;z-index:150;
  display:grid;grid-template-columns:repeat(3,1fr);
  background:var(--panel);border-block-start:1px solid var(--line);
  box-shadow:0 -6px 20px rgba(20,30,22,.10);
  padding-block:6px;padding-inline:6px;
  padding-block-end:calc(6px + env(safe-area-inset-bottom));
}
.actionbar a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  min-height:52px;border-radius:12px;text-decoration:none;color:var(--forest);
  font-size:.72rem;font-weight:600;letter-spacing:.01em;
  transition:background .2s var(--ease);
}
.actionbar a:active,.actionbar a:hover{background:rgba(28,56,38,.07)}
.actionbar svg{width:22px;height:22px}
.actionbar .is-primary{color:var(--accent-hover)}
@media(min-width:1024px){.actionbar{display:none}}
/* keep the last section clear of the fixed bar on phones */
.has-actionbar-space{padding-block-end:74px}
@media(min-width:1024px){.has-actionbar-space{padding-block-end:0}}

/* ==========================================================================
   HERO — one real photograph, no scroll animation, understood in one glance
   ========================================================================== */
/* max() with a fixed floor, not just 100svh: on a short viewport (an old
   small phone, any phone in landscape) the identity and action groups sit
   near the top and bottom edges regardless of how little room there is
   between them — 100svh alone would let them close in on the cart's sign
   and on faces at the tables. The floor guarantees breathing room; on any
   normal-height screen svh already clears it and this changes nothing. */
.hero{position:relative;min-height:max(100svh,600px);display:flex;flex-direction:column;color:#FFFAEE}
.hero__media{position:absolute;inset:0;z-index:0}
/* This source is a 941×1672 portrait photo. Portrait content and a phone's
   own portrait viewport are close enough in shape that a full-bleed cover
   crops gently (mostly shaving the left/right margins, not the subject) —
   see the per-breakpoint object-position tuning below. */
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
/* A light overall vignette for edge depth only — the real contrast work is
   now done locally by .hero__top and .hero__bottom (below), each shaped
   to its own content instead of one band guessed to line up with text that
   moves depending on how much the two groups actually contain. That keeps
   the cart, its sign and the counter — the whole middle of the frame —
   completely clear of any darkening, on every screen. */
.hero__scrim{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,
    rgba(7,12,8,.62) 0%,rgba(7,12,8,.52) 12%,rgba(7,12,8,.36) 24%,
    rgba(7,12,8,.16) 36%,rgba(7,12,8,0) 46%,
    rgba(7,12,8,0) 62%,rgba(7,12,8,.03) 72%,rgba(7,12,8,.1) 83%,
    rgba(7,12,8,.19) 92%,rgba(7,12,8,.28) 100%);
}
/* Art-directed, not centred: identity high against the canopy, actions low
   against the yard — the cart, its sign and the counter in between stay
   completely uncovered. Each group carries its own contrast patch sized to
   its own content, so it holds together regardless of exact text length or
   hero height, instead of chasing a percentage-based band that would drift
   out of alignment the moment either group's height changes. */
.hero__body{
  position:relative;z-index:2;flex:1;display:flex;flex-direction:column;
  align-items:center;justify-content:space-between;text-align:center;
  /* The bottom of the viewport is not free space on a phone: the action bar
     owns the last ~64px and the accessibility button stands 48px above that,
     in the left corner. The hero's action group has to clear BOTH or it ends
     up sharing pixels with a fixed control — at 320×568 the "לתפריט" button
     and the accessibility button were overlapping outright. This padding is
     that whole lane, measured, so the group still anchors low against the
     yard without ever landing under something fixed. */
  padding:calc(var(--pad) + 46px) var(--pad) 112px;
}

.hero__top,.hero__bottom{position:relative;display:flex;flex-direction:column;align-items:center;max-width:42ch}
/* The darkening lives on a pseudo-element that is deliberately much LARGER
   than the text box it serves, with the gradient reaching full transparency
   well inside its own edges. That is the whole trick: painted on the box
   itself, an ellipse wider than 100% gets sliced off at the box boundary
   while it is still partly opaque — and a sliced gradient is exactly the
   hard-edged rectangle this replaces. Spilling the paint outward instead
   means every edge of the darkening falls at alpha 0, so the overlay has no
   perceptible boundary at all: it reads as light falling off inside the
   photograph rather than as a panel laid on top of it. */
.hero__top::before,.hero__bottom::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  inset:-36% -42%;
  background:radial-gradient(ellipse 46% 44% at 50% 50%,
    rgba(6,11,7,.60) 0%,
    rgba(6,11,7,.53) 28%,
    rgba(6,11,7,.38) 48%,
    rgba(6,11,7,.20) 65%,
    rgba(6,11,7,.08) 80%,
    rgba(6,11,7,.02) 89%,
    rgba(6,11,7,0) 96%);
}
.hero__top{padding:20px clamp(20px,6vw,40px) 24px}
.hero__bottom{gap:14px;padding:16px clamp(20px,6vw,40px) 20px}
/* the lower group carries buttons that supply their own contrast, so its
   wash can sit lighter than the one holding the wordmark */
.hero__bottom::before{
  inset:-42% -44%;
  background:radial-gradient(ellipse 46% 44% at 50% 50%,
    rgba(6,11,7,.46) 0%,
    rgba(6,11,7,.40) 30%,
    rgba(6,11,7,.28) 50%,
    rgba(6,11,7,.14) 67%,
    rgba(6,11,7,.05) 82%,
    rgba(6,11,7,0) 95%);
}
.hero__kicker{font-weight:700;font-size:.86rem;letter-spacing:.16em;color:var(--accent-muted);margin-block-end:14px;text-shadow:0 1px 2px rgba(5,9,6,.9),0 2px 10px rgba(5,9,6,.75)}
.hero h1{
  font-size:clamp(2.7rem,13vw,5.4rem);
  letter-spacing:-.02em;
  text-shadow:0 2px 4px rgba(4,7,5,.5),0 10px 28px rgba(4,7,5,.55);
}
/* the opening name is the real logo, white line work with its yellow sun,
   straight on the photograph — sized so it leads without crowding the page */
.hero h1.hero__logo-h{font-size:0;line-height:0;text-shadow:none;display:flex;justify-content:center}
.hero__logo{display:block;height:clamp(118px,36vw,170px);width:auto;
  filter:drop-shadow(0 2px 6px rgba(4,7,5,.45)) drop-shadow(0 8px 22px rgba(4,7,5,.35))}
.hero__sub{
  margin-block-start:16px;font-size:clamp(1rem,3.8vw,1.28rem);font-weight:500;
  line-height:1.5;max-width:30ch;color:#FFFDF6;font-weight:600;text-shadow:0 1px 2px rgba(4,7,5,.85),0 2px 8px rgba(4,7,5,.7),0 6px 22px rgba(4,7,5,.5);
}
.hero__ctas{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.hero__status{
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 18px;border-radius:999px;background:rgba(6,11,7,.55);
  border:1px solid rgba(240,211,162,.38);font-size:1rem;font-weight:700;
  color:var(--accent-muted);text-shadow:0 1px 3px rgba(4,7,5,.6);
}
.hero__status .dot{width:10px;height:10px}

/* call + Instagram, pinned to the photo's lower-left above the centred
   action group and clear of the fixed accessibility button below it */
.hero-social{
  position:absolute;z-index:3;left:0;right:0;
  bottom:calc(76px + env(safe-area-inset-bottom));
  display:flex;flex-direction:row-reverse;justify-content:center;gap:9px;direction:ltr;
}
.hero-social__btn{
  display:flex;align-items:center;justify-content:center;
  width:39px;height:39px;border-radius:50%;color:#fff;
  box-shadow:0 6px 18px rgba(5,9,6,.45);border:2px solid rgba(255,255,255,.85);
  transition:transform .2s var(--ease);
}
.hero-social__btn:active{transform:scale(.94)}
.hero-social__btn svg{width:20px;height:20px}
.hero-social__btn--tel{background:var(--accent)}
.hero-social__btn--ig{background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%)}
@media(min-width:1024px){.hero-social{left:auto;inset-inline-start:calc(50% + 24px);bottom:28px;flex-direction:row}}
html.a11y-contrast .hero-social__btn{background:#000;border-color:#fff}
@media(max-width:359px){.hero-social{gap:8px}.hero-social__btn{width:36px;height:36px}.hero-social__btn svg{width:18px;height:18px}.hero__ctas{gap:8px}.hero__ctas .btn{padding-inline:15px}}
/* homepage on phones: the header floats over the opening photo until the
   visitor scrolls, and the photo fills exactly one screen above the bar */
@media(max-width:1023px){
  .site-header{transition:background-color .3s var(--ease),box-shadow .3s var(--ease)}
  body:has(.hero) .site-header:not(.solid){background:transparent}
  body:has(.hero) .site-header:not(.solid) .brand{color:var(--accent-muted);text-shadow:0 1px 3px rgba(4,7,5,.6),0 4px 14px rgba(4,7,5,.45)}
  body:has(.hero) .site-header:not(.solid) .icon-btn{color:#FFFAEE;filter:drop-shadow(0 1px 3px rgba(4,7,5,.6))}
  .hero{
    margin-block-start:calc(-1 * var(--hdr-h,72px));
    height:auto;min-height:calc(100svh - 64px - env(safe-area-inset-bottom));
  }
  .hero__body{padding-block:calc(var(--hdr-h,72px) + 14px) 48px}
  .hero-social{bottom:12px}
}
.hero__status .dot{width:8px;height:8px;border-radius:50%;flex:none}
/* 320–359px: the open/closed pill is the widest thing in the hero's lower
   group, and at these widths its rounded end reaches into the corner the
   accessibility button occupies. Narrow the pill, narrow the button, and the
   two sit side by side instead of on top of each other. */
@media(max-width:359px){
  .hero__status{font-size:.86rem;padding:7px 12px}
}
@media(min-width:480px){.hero__media img{object-position:center 46%}}
@media(min-width:640px){.hero{min-height:max(88svh,600px)}.hero__media img{object-position:center 48%}}
/* short landscape phones: the two groups can end up close enough together
   that their local contrast patches start to overlap the cart between them
   — ease off the top group's padding so there's daylight between them */
@media(min-width:640px) and (max-height:520px){.hero__top{padding-bottom:14px}}

/* ---- ≥1024px: an editorial split, not a wider crop of the same photo ----
   Full-bleed cover of a PORTRAIT source in a WIDE short box is a losing
   trade at this aspect: the math only keeps the cart and the crowd both in
   frame if the box is taller than it is wide — impossible for a hero that
   spans the viewport width without becoming absurdly tall. Past 1024px the
   photo instead sits in its own framed column at close to its natural
   proportions — genuinely designed for a portrait source, not a landscape
   crop stretched to fit one. The text column has no photo behind it here,
   so the top/bottom split (and its local contrast patches) stand down in
   favour of one centred group again — there is nothing to art-direct
   around once the words aren't sitting on the picture any more. */
@media(min-width:1024px){
  .hero{
    display:grid;grid-template-columns:.92fr 1.08fr;align-items:stretch;
    min-height:0;height:min(86vh,880px);
    background:var(--forest);
  }
  .hero__media{position:relative;inset:auto;order:2;overflow:hidden}
  .hero__media img{position:absolute;inset:0;object-position:center 40%}
  .hero__scrim{display:none}
  .hero__media::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(0deg,rgba(7,12,8,.32),rgba(7,12,8,0) 34%);
  }
  .hero__body{justify-content:center;gap:30px;padding:calc(var(--pad) + 20px) clamp(40px,4.5vw,72px)}
  .hero__top,.hero__bottom{max-width:38ch;background:none;padding:0}
  .hero__top::before,.hero__bottom::before{display:none}
  .hero__bottom{gap:18px}
  .hero h1{font-size:clamp(3.4rem,5.4vw,4.6rem)}
}
@media(min-width:1024px) and (max-height:760px){.hero{height:min(90vh,820px)}}

/* ==========================================================================
   QUICK-FACTS STRIP — the answer to "is it open, where is it" in one row,
   right under the fold, before any scrolling story begins.
   ========================================================================== */
.quickfacts{background:var(--forest);color:var(--on-forest)}
.quickfacts .wrap{
  display:grid;grid-template-columns:1fr;gap:12px;
  padding-block:15px;
}
/* Column first: at 320–360px "closed now · opens tomorrow at 08:00" plus the
   full address is more text than one row can hold even with wrapping — a
   flex row with space-between sizes to its children's min-content first,
   which can exceed the viewport before wrap ever kicks in. Stacked avoids
   that entirely and reads better at this width regardless. */
.qf-row{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.qf-status{display:flex;align-items:center;gap:9px;font-size:.92rem;font-weight:600}
.qf-status .dot{width:9px;height:9px;border-radius:50%;flex:none}
.dot.open{background:#5CB86E;box-shadow:0 0 0 4px rgba(92,184,110,.22)}
.dot.closed{background:#D98866;box-shadow:0 0 0 4px rgba(217,136,102,.2)}
.qf-addr{display:flex;align-items:center;gap:8px;text-decoration:none;color:rgba(244,239,226,.86);font-size:.88rem;transition:color .2s var(--ease)}
.qf-addr:hover{color:#FFFAEE}
.qf-addr svg{width:16px;height:16px;flex:none}
/* One clear action, not three equal ones: Waze grows to own the row: it's
   the thing worth a full button here. Call and Instagram ride along as
   small icon-only utilities — reachable, legible, but plainly secondary,
   the hierarchy the eye should actually see reflected in the layout. */
.qf-actions{display:flex;align-items:center;gap:10px}
.qf-primary{flex:1;min-width:0}
.qf-secondary{display:flex;gap:8px;flex:none}
.icon-btn--on-dark{color:#FFFAEE;border:1.5px solid rgba(244,239,226,.38)}
.icon-btn--on-dark:hover{background:rgba(244,239,226,.14)}
@media(min-width:560px){
  .qf-row{flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap}
}
@media(min-width:640px){
  .quickfacts .wrap{grid-template-columns:1fr auto;align-items:center;padding-block:16px}
  .qf-actions{flex:none}
  .qf-primary{flex:none}
}

/* ==========================================================================
   SECTION SHELL
   ========================================================================== */
/* Sections lean on their own background change for separation — that is what
   makes one chapter end and the next begin — so the padding only has to give
   the content air, not carry the separation on its own. Trimmed at the phone
   end of the clamp, where a 96px gap is most of a thumb-scroll of nothing. */
section{padding-block:clamp(38px,7.2vw,88px)}
.section--deep{background:var(--canvas-deep)}
.section--dark{background:var(--forest);color:var(--on-forest)}
.section--dark .text-secondary{color:rgba(244,239,226,.72)}
.section-head{margin-block-end:clamp(18px,3.6vw,34px)}
.section-head h2{font-size:clamp(1.7rem,6.4vw,2.7rem);margin-block-start:6px}
.section-head p{margin-block-start:9px;color:var(--text-secondary);max-width:52ch}
.section--dark .section-head p{color:rgba(244,239,226,.78)}
.eyebrow-row{display:flex;align-items:center;gap:10px}
.eyebrow-row::after{content:"";height:1px;flex:1;background:var(--line);max-width:70px}
.section--dark .eyebrow-row::after{background:rgba(244,239,226,.2)}
.section--dark .label{color:var(--accent-muted)}

/* The hidden start state is gated on `html.js`, which the inline script in
   <head> sets. Ungated, `opacity:0` is a promise that JavaScript will arrive
   to undo it — and if the bundle fails to parse, is blocked, or simply has
   not run yet, that promise leaves real content permanently invisible. Gated,
   no-JS renders the page fully readable and the reveal is purely additive.
   The finished state is stated explicitly and completely, so nothing readable
   ever depends on an animation landing. */
html.js .rise{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
html.js .rise.in{opacity:1;transform:none;visibility:visible}
.rise.in{opacity:1;transform:none;visibility:visible}
@media(prefers-reduced-motion:reduce){html.js .rise{opacity:1;transform:none;transition:none}}

/* ==========================================================================
   WHY RAMOTA — asymmetric photo + copy, not a card grid
   ========================================================================== */
.why__grid{display:grid;gap:clamp(22px,4.6vw,40px)}
.why__photos img{border-radius:var(--radius);width:100%;height:100%;object-fit:cover;display:block}
.why__photo{aspect-ratio:4/3}
.why__pillars{display:grid;gap:15px;margin-block-start:6px}
@media(min-width:560px){.why__pillars{grid-template-columns:repeat(3,1fr)}}
.pillar{padding-block-start:16px;border-block-start:2px solid var(--accent-muted)}
.pillar h3{font-size:1.3rem;color:var(--forest)}
.pillar p{margin-block-start:6px;color:var(--text-secondary);font-size:.96rem}
@media(min-width:860px){
  .why__grid{grid-template-columns:1fr 1fr;align-items:center}
  .why__copy-col{order:2}
  .why__photos{order:1}
}

/* ==========================================================================
   MENU — real, scannable, category-tabbed
   ========================================================================== */
.menu-cats{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-block:4px 4px;margin-block-start:14px;scrollbar-width:none}
.menu-cats::-webkit-scrollbar{display:none}
.menu-cats button{
  flex:none;padding:9px 16px;border-radius:999px;border:1.5px solid var(--line-strong);
  font-size:.86rem;font-weight:600;color:var(--text-secondary);white-space:nowrap;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
  min-height:40px;
}
.menu-cats button[aria-pressed="true"]{background:var(--forest);border-color:var(--forest);color:var(--on-forest)}

.menu-grid{display:grid;grid-template-columns:1fr;gap:12px;margin-block-start:16px}
@media(min-width:560px){.menu-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.menu-grid{grid-template-columns:repeat(3,1fr)}}
.menu-item{
  display:grid;grid-template-columns:92px 1fr;gap:13px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:11px;box-shadow:var(--shadow-1);
}
/* the category filter toggles this attribute; without an explicit rule the
   browser's own low-priority [hidden] default loses to .menu-item's own
   `display:grid` and the "hidden" item keeps rendering anyway */
.menu-item[hidden]{display:none}
.menu-item__img{width:92px;height:92px;border-radius:12px;overflow:hidden;flex:none}
.menu-item__img img{width:100%;height:100%;object-fit:cover}
.menu-item__body{display:flex;flex-direction:column;justify-content:center;min-width:0}
.menu-item__tag{font-size:.7rem;font-weight:700;letter-spacing:.06em;color:var(--accent-hover);text-transform:uppercase}
.menu-item h3{font-size:1.08rem;margin-block-start:3px;color:var(--forest)}
.menu-item p{margin-block-start:4px;font-size:.88rem;color:var(--text-secondary)}
/* the CTA that replaces the long textual list in the normal page flow —
   opens #fullMenuDialog; see js/main.js "FULL MENU DIALOG" */
.menu-cta{display:flex;justify-content:center;margin-block-start:22px}

/* "a peek inside" — photo tiles with the dish name laid over the image,
   mirroring Desktop's gallery, sized for a phone */
#menu .section-head h2{color:var(--accent-hover);font-weight:700;font-size:clamp(2.1rem,8.4vw,2.9rem)}
html.a11y-contrast #menu .section-head h2{color:#000}
#menu .menu-grid{grid-template-columns:1fr 1fr;gap:10px}
#menu .menu-item{position:relative;display:block;padding:0;overflow:hidden;border:0;border-radius:16px;aspect-ratio:1/1;box-shadow:0 10px 26px rgba(30,42,33,.14);background:#3d5a44}
#menu .menu-item:first-child{grid-column:1 / -1;aspect-ratio:16/10}
#menu .menu-item[hidden]{display:none}
#menu .menu-item__img{position:absolute;inset:0;width:100%;height:100%;margin:0;border-radius:0}
#menu .menu-item__img img{width:100%;height:100%;object-fit:cover}
#menu .menu-item__body{position:absolute;inset:auto 0 0;padding:34px 14px 12px;background:linear-gradient(0deg,rgba(8,14,10,.72),rgba(8,14,10,0));display:block}
#menu .menu-item h3{margin:0;color:#FFFAEE;font-size:clamp(1.02rem,4.4vw,1.25rem);font-weight:700;text-shadow:0 1px 6px rgba(0,0,0,.45)}
#menu .menu-item:first-child h3{font-size:clamp(1.25rem,5.6vw,1.6rem)}
@media(min-width:1024px){#menu .menu-grid{grid-template-columns:repeat(3,1fr)}#menu .menu-item:first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}}

@media(min-width:560px){
  .menu-item{grid-template-columns:1fr;grid-template-rows:auto auto}
  .menu-item__img{width:100%;height:150px;border-radius:var(--radius) var(--radius) 0 0;margin:-11px -11px 0}
  .menu-item__body{padding-block-start:12px}
}

/* Full menu, grouped by section — a handful of highlight items above have
   real photography (.menu-item); everything else is a plain readable list,
   grouped the same way the physical board groups it. No prices anywhere:
   only names and, where the board spelled them out, real ingredients. */
.menu-groups{margin-block-start:28px;display:flex;flex-direction:column;gap:26px}
.menu-group__h{font-size:1.24rem;color:var(--forest);padding-block-end:8px;border-block-end:1px solid var(--line)}
.menu-group__emoji{margin-inline-end:8px;font-size:.9em}
.menu-rows{margin-block-start:12px;display:grid;gap:14px}
@media(min-width:560px){.menu-rows{grid-template-columns:1fr 1fr;column-gap:24px}}
.menu-row[hidden]{display:none}
.menu-row h4{font-size:.98rem;color:var(--forest);font-weight:600}
.menu-row p{margin-block-start:2px;font-size:.86rem;color:var(--text-secondary);line-height:1.5}

/* ==========================================================================
   FULL MENU DIALOG — a dedicated full-screen menu view, not a small
   browser popup or a bottom sheet. Built on the native <dialog> element:
   showModal()/close() (js/main.js) already give it top-layer stacking
   (above the header, action bar and a11y panel — no z-index needed here),
   an inert background, focus trapping and Escape-to-close. This stylesheet
   makes it occupy the full Mobile viewport edge to edge — 100dvh with a
   100vh fallback for browsers that do not yet resolve dvh — and look like
   the rest of Ramota rather than a generic browser dialog.
   No open/close animation on purpose — instant and predictable reads
   calmer than a transition here, and it needs no reduced-motion branch.
   ========================================================================== */
.menu-dialog{
  position:fixed;inset:0;margin:0;
  width:100%;height:100vh;height:100dvh;
  max-width:none;max-height:none;
  padding:0;border:0;border-radius:0;
  background:var(--panel);color:var(--text-primary);
  box-shadow:none;
}
.menu-dialog[open]{display:flex;flex-direction:column}
/* a same-colour fallback, not a dimmed scrim — the dialog itself already
   fills the viewport, so nothing of the page behind should ever show */
.menu-dialog::backdrop{background:var(--panel)}
.menu-dialog{background:var(--canvas);transition:background-color .35s var(--ease)}
.menu-dialog__leaves{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;color:#2F4A35;opacity:.08;transition:opacity .35s var(--ease)}
.menu-dialog__head,.menu-dialog__cats,.menu-dialog__scroll{position:relative;z-index:1}
.menu-dialog.is-solid{background:var(--canvas-deep)}
.menu-dialog.is-solid .menu-dialog__leaves{opacity:0}
html.a11y-contrast .menu-dialog__leaves{display:none}

/* head: close row, then "חזרה לאתר" — both reachable before the visitor
   scrolls a single row of the menu, never buried under it */
.menu-dialog__head{
  flex:none;padding:calc(14px + env(safe-area-inset-top)) var(--pad) 14px;
  border-block-end:1px solid var(--line);
}
.menu-dialog__headrow{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-block-end:14px;
}
.menu-dialog__headrow h2{font-size:1.55rem;font-weight:700;color:var(--accent-hover)}
html.a11y-contrast .menu-dialog__headrow h2{color:#000}
.menu-dialog__x{
  display:flex;align-items:center;justify-content:center;flex:none;
  width:44px;height:44px;border-radius:50%;color:var(--forest);
  transition:background .2s var(--ease);
}
.menu-dialog__x:hover{background:rgba(28,56,38,.08)}
.menu-dialog__x svg{width:22px;height:22px}

.menu-dialog__back{
  display:flex;align-items:center;justify-content:center;width:100%;
  min-height:48px;border-radius:999px;border:1.5px solid var(--line-strong);
  font-weight:600;font-size:.96rem;color:var(--forest);
  transition:background .2s var(--ease);
}
.menu-dialog__back:hover{background:rgba(28,56,38,.06)}

.menu-dialog__cats{
  flex:none;display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;
  padding:12px var(--pad) 0;scrollbar-width:none;
}
.menu-dialog__cats::-webkit-scrollbar{display:none}
.menu-dialog__cats button{
  flex:none;min-height:40px;padding:9px 16px;border-radius:999px;
  border:1.5px solid var(--line-strong);font-size:.86rem;font-weight:600;
  color:var(--text-secondary);
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
}
.menu-dialog__cats button[aria-pressed="true"]{background:var(--forest);border-color:var(--forest);color:var(--on-forest)}

.menu-dialog__scroll{
  flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:0 var(--pad) calc(20px + env(safe-area-inset-bottom));
}
.menu-dialog__scroll .menu-groups{margin-block-start:20px;padding-block-end:8px}

/* the same lock class also drives the body-position freeze js/main.js
   applies while the dialog is open, so the page underneath cannot scroll
   or rubber-band on touch devices */
html.menu-dialog-open,html.menu-dialog-open body{overflow:hidden}
html.menu-dialog-open body{position:fixed;left:0;right:0;width:100%}

/* ==========================================================================
   HOURS + LOCATION
   ========================================================================== */
/* The two used to share one .hl-grid row. They are separate sections now —
   location right where "איך מגיעים" lands, hours further down past the
   reviews — so each gets a readable measure of its own rather than a column
   width borrowed from the other. */
.loc-solo,.hours-solo{max-width:min(100%,680px)}
/* The explicit `color` is load-bearing, not decoration. A .card is a CREAM
   surface, and it can sit inside a section that has set a light foreground for
   itself — .section--dark paints forest green and sets color:var(--on-forest),
   which a card inside it would otherwise inherit. That is cream text on a
   cream card: invisible. Anything in the card that names its own colour
   (.hrow.shut, .hours-note) stayed readable, which is why the failure looked
   like a half-finished animation rather than a colour bug. Declaring the
   card's own foreground here fixes it for every card on every surface, now
   and for any dark section added later. */
.card{background:var(--panel);color:var(--text-primary);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-1)}
.card__head{padding:18px 20px 4px}
.card__head h3{font-size:1.2rem;color:var(--forest)}
.hours-now{display:flex;align-items:center;gap:9px;padding:14px 18px;font-weight:600;font-size:.9rem;border-block-end:1px solid var(--line)}
.hrow{display:flex;justify-content:space-between;gap:16px;padding:9px 18px;border-block-start:1px solid var(--line);font-size:.94rem}
.hrow.today{background:rgba(232,201,160,.24)}
.hrow.shut{color:var(--text-secondary)}
.hrow b{font-weight:600;font-variant-numeric:tabular-nums}
.hours-note{padding:13px 18px 16px;font-size:.84rem;color:var(--text-secondary);border-block-start:1px solid var(--line)}

.loc-card{padding:18px}
.loc-addr{display:flex;align-items:flex-start;gap:10px;text-decoration:none;color:var(--forest)}
.loc-addr svg{width:22px;height:22px;flex:none;margin-block-start:2px;color:var(--accent)}
.loc-addr__lines strong{display:block;font-size:1.12rem;font-family:var(--display);font-weight:400}
.loc-addr__lines span{display:block;margin-block-start:2px;font-size:.86rem;color:var(--text-secondary)}
.loc-card .btnrow{margin-block-start:14px}
.loc-facts{margin-block-start:15px;display:grid;gap:9px}
.loc-fact{display:flex;gap:10px;font-size:.92rem;color:var(--text-secondary)}
.loc-fact svg{width:18px;height:18px;flex:none;margin-block-start:2px;color:var(--forest-soft)}

/* ==========================================================================
   REVIEWS
   ========================================================================== */
.rating-line{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
/* font-weight made explicit here (was implicit via the browser's own <b>
   default): Secular One only ever shipped one real weight, so "bolder" was
   quietly rendering as browser-synthesized fake bold. Asimon has a real
   Bold face, so the same bold intent now needs an explicit weight to land
   on it instead of on whatever the browser's own default step resolves to. */
.rating-line b{font-family:var(--display);font-weight:700;font-size:clamp(1.8rem,6vw,2.3rem);color:var(--forest)}
.rating-line .stars{color:var(--accent);letter-spacing:.06em;direction:ltr}
.rating-line span{color:var(--text-secondary);font-size:.9rem}
/* the sign's own three words, sitting directly under the heading that
   introduces them — display face, quiet weight, one accent rule beneath */
.rev-lede{
  margin-block-start:10px;font-family:var(--display);font-weight:400;
  font-size:clamp(1.08rem,4.4vw,1.5rem);line-height:1.3;
  color:var(--forest);max-width:22ch;
}
.rev-lede::after{content:"";display:block;width:58px;height:3px;border-radius:2px;background:var(--accent);margin-block-start:10px}
.rating-line{margin-block-start:clamp(14px,2.6vw,20px)}
/* Sighted, motion-OK visitors get the tilted wall below; everyone else —
   screen readers (the wall is aria-hidden, since a scrolling loop is not
   something most assistive tech copes with well) and prefers-reduced-motion
   — gets this exact same three-quote content as a plain static grid. Default
   state keeps it in the accessibility tree but visually hidden (the .sr
   clip technique, not display:none, which would remove it from screen
   readers too); the reduced-motion query below restores it to a normal
   visible grid and switches the wall off. */
.review-grid{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.review-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow-1)}
.review-card p{font-size:.92rem;color:var(--ink);line-height:1.58}
.review-card .rc{display:block;margin-block-start:10px;font-size:.76rem;color:var(--text-secondary)}

/* ---- the tilted review wall ---- */
.revwrap{position:relative;margin-block-start:clamp(16px,2.8vw,32px)}
.revmarquee{
  position:relative;width:100%;height:clamp(292px,36vw,420px);
  overflow:hidden;border-radius:var(--radius);
  background:var(--canvas-deep);
}
.revmarquee__stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;perspective:700px}
/* Three columns from 320px up, not two. Two columns left the wall reading as
   a pair of lists with air around them; three is what makes it read as a wall
   — cards at three different depths, the outer pair running off the edges of
   the frame the way the reference does. The scale backs off on phones (1.2 →
   1.04) to buy that third column its room instead of magnifying two; past
   760px, where there is width to spend, it goes back up. Card width is
   deliberately allowed to get narrow at 320: a clipped outer column still
   reads as depth, whereas dropping to two columns loses the effect entirely. */
.revmarquee__cols{
  display:flex;align-items:center;justify-content:center;gap:clamp(8px,2.2vw,18px);
  transform:rotateX(14deg) rotateY(-14deg) rotateZ(9deg) scale(1.04);
  transform-style:preserve-3d;
}
html[dir="rtl"] .revmarquee__cols{transform:rotateX(14deg) rotateY(14deg) rotateZ(-9deg) scale(1.04)}
.revmarquee__col{overflow:hidden;height:clamp(276px,34vw,380px);width:clamp(112px,28vw,192px);flex:none}
@media(min-width:760px){
  .revmarquee__cols{transform:rotateX(14deg) rotateY(-14deg) rotateZ(9deg) scale(1.2)}
  html[dir="rtl"] .revmarquee__cols{transform:rotateX(14deg) rotateY(14deg) rotateZ(-9deg) scale(1.2)}
  .revmarquee__col{width:clamp(150px,17vw,192px)}
}
.revmarquee__track{
  /* the gap is a variable because the loop distance below is computed from it */
  --rm-gap:clamp(10px,1.6vw,18px);
  display:flex;flex-direction:column;gap:var(--rm-gap);
  /* 42s -> 28s: the requested 50% quicker. Duration and delay are stated on
     the shared rule and never overridden per column, so all three tracks are
     driven by one identical timeline — same start, same period, no stagger.
     Only direction differs (below), which is the depth effect, not a delay. */
  animation:revmarquee-scroll var(--rm-duration,28s) linear infinite;
  animation-delay:0s;
}
.revmarquee__col[data-dir="up"] .revmarquee__track{animation-direction:reverse}
/* Pause the WHOLE wall, not the column under the cursor. Pausing one track
   while its neighbours keep running is the one thing here that can actually
   knock the columns out of phase with each other — and unlike a delay it is
   permanent, since the offset it introduces never resolves. */
.revmarquee:hover .revmarquee__track,.revmarquee.is-idle .revmarquee__track{animation-play-state:paused}
/* Half the track is three cards and TWO-AND-A-HALF gaps; a seamless loop has
   to travel three cards and THREE gaps. Plain -50% is short by half a gap, so
   every cycle ended in a small backwards jump — about 4.5px here, and more
   often now that the loop is 28s instead of 42s. Adding the missing half gap
   makes the wrap land exactly on the repeat. */
@keyframes revmarquee-scroll{
  from{transform:translateY(0)}
  to{transform:translateY(calc(-50% - var(--rm-gap) / 2))}
}
.revmarquee__card{
  position:relative;flex:none;
  background:var(--panel);border:1px solid var(--line);
  box-shadow:0 14px 34px rgba(20,34,24,.16);
  border-radius:13px;padding:clamp(11px,3vw,22px);text-align:start;
}
.revmarquee__quote{position:absolute;top:1px;inset-inline-start:10px;font-family:var(--display);font-size:2em;line-height:1;color:var(--accent);opacity:.34}
.revmarquee__card p{font-size:clamp(.74rem,2.3vw,.86rem);line-height:1.5;color:var(--ink)}
.revmarquee__card .rc{margin-block-start:8px;font-size:clamp(.64rem,1.9vw,.72rem);color:var(--text-secondary);display:block}
a.revmarquee__card{display:block;text-decoration:none;color:inherit}
.revmarquee__card p{display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical;overflow:hidden}
.revmarquee__card .rc,.review-card .rc{font-weight:700;color:var(--forest);text-decoration:none}

/* reviews intro — mirrors the Desktop "three words" block, sized for phones */
#reviews .section-head{text-align:center}
#reviews .eyebrow-row{justify-content:center}
#reviews .eyebrow-row::after{display:none}
.rev-h{max-width:18ch;margin-inline:auto}
.rev-uw{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:3px;text-underline-offset:.22em}
.rev-words{display:flex;justify-content:center;align-items:center;gap:10px;margin-block:4px 16px;font-family:var(--display);font-size:clamp(1.3rem,5.6vw,1.6rem);color:var(--forest)}
.rev-words__dot{color:var(--accent);opacity:.7}
.rev-words__air{color:var(--accent-hover)}
/* phones: the wall takes whatever height is left so the whole section fills one screen */
@media(max-width:759px){
  #reviews{min-height:calc(100svh - 136px);display:flex;flex-direction:column;justify-content:center;scroll-margin-top:72px}
  .revmarquee{height:clamp(220px,calc(100svh - 452px),640px)}
  .revmarquee__col{height:clamp(204px,calc(100svh - 468px),624px)}
}
.rev-rating{justify-content:center;text-align:center}
.rev-rating span{font-family:var(--display);font-weight:700;font-size:clamp(1.12rem,4.6vw,1.35rem);color:var(--accent-hover)}
html.a11y-contrast .rev-rating span,html.a11y-contrast .rev-words__air{color:#000}
.revmarquee__fade{position:absolute;inset-inline:0;pointer-events:none;z-index:2}
.revmarquee__fade--t{inset-block-start:0;height:26%;background:linear-gradient(to bottom,var(--canvas-deep),transparent)}
.revmarquee__fade--b{inset-block-end:0;height:26%;background:linear-gradient(to top,var(--canvas-deep),transparent)}

@media(prefers-reduced-motion:reduce){
  .revmarquee{display:none}
  .review-grid{position:static;width:auto;height:auto;padding:0;margin-block-start:24px;overflow:visible;clip:auto;white-space:normal;display:grid;gap:14px}
  @media(min-width:760px){.review-grid{grid-template-columns:repeat(3,1fr)}}
}
.review-link{margin-block-start:18px}
.review-link a{display:inline-flex;align-items:center;gap:8px;font-size:.9rem;color:var(--forest);text-decoration:none;border-block-end:1px solid var(--line-strong);padding-block-end:2px}
.review-link a:hover{color:var(--accent-hover);border-color:var(--accent)}
.review-link svg{width:16px;height:16px}

/* ==========================================================================
   PRACTICAL — compact factual chips, not marketing cards
   ========================================================================== */
.chips-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-block-start:16px}
@media(min-width:560px){.chips-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1024px){.chips-grid{grid-template-columns:repeat(4,1fr)}}
/* Icon beside the words rather than stacked above them: the same eight facts
   in roughly two-thirds the height, and easier to scan as a list because the
   label and its value now sit on consecutive lines instead of being pushed
   apart by the glyph. Four rows of these was the single tallest block of pure
   whitespace left on the phone layout. */
.chip-fact{
  display:grid;grid-template-columns:auto 1fr;align-items:center;
  column-gap:10px;row-gap:1px;padding:11px 12px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);
}
.chip-fact svg{width:20px;height:20px;color:var(--accent-hover);grid-row:1/3;align-self:center}
.chip-fact b{font-size:.86rem;font-weight:600;color:var(--forest);line-height:1.35}
.chip-fact span{font-size:.76rem;color:var(--text-secondary);line-height:1.35}

/* ==========================================================================
   FAQ — native <details>, zero JS
   ========================================================================== */
.faq-list{display:grid;gap:10px;margin-block-start:16px}
.faq-item{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden}
.faq-item summary{
  list-style:none;cursor:pointer;padding:16px 46px 16px 18px;position:relative;
  font-weight:600;font-size:.98rem;color:var(--forest);
  min-height:48px;display:flex;align-items:center;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"";position:absolute;inset-inline-end:18px;top:50%;translate:0 -50%;
  width:11px;height:11px;border-inline-end:2px solid var(--forest-soft);border-block-end:2px solid var(--forest-soft);
  transform:rotate(45deg);transition:transform .25s var(--ease);
}
.faq-item[open] summary::after{transform:rotate(-135deg)}
.faq-item p{padding:0 18px 16px;font-size:.92rem;color:var(--text-secondary)}

/* ==========================================================================
   FINAL CTA
   ========================================================================== */
.final-cta{position:relative;color:var(--text-primary);overflow:hidden;background:var(--canvas-deep);display:flex;flex-direction:column;padding-block-end:0}
.final-cta .wrap{order:1;padding-block-end:clamp(22px,5vw,34px)}
.final-cta__media{position:relative;order:2;z-index:0;aspect-ratio:16/9;width:100%}
.final-cta__media img{display:block;width:100%;height:100%;object-fit:cover}
.final-cta__scrim{position:absolute;inset:auto 0 0;order:2;z-index:1;height:0}
.final-cta__media::before{
  content:"";position:absolute;inset:0 0 auto;height:38%;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,var(--canvas-deep),rgba(231,221,199,0));
}
.final-cta .wrap{position:relative;z-index:2;text-align:center}
.final-cta h2{font-size:clamp(1.9rem,7vw,2.9rem);max-width:18ch;margin-inline:auto;text-shadow:0 2px 14px rgba(6,10,7,.5)}
.final-cta h2{color:var(--accent-hover);text-shadow:none;font-weight:700}
#hours .section-head h2{color:var(--accent-muted)}

html.a11y-lightbg #hours .section-head h2{color:var(--accent-hover)}
.final-cta p{margin-block-start:14px;color:var(--text-secondary);max-width:38ch;margin-inline:auto}
.final-cta .btnrow{margin-block-start:26px;justify-content:center}

/* ==========================================================================
   FOOTER
   ========================================================================== */
footer{background:var(--forest-deep);color:rgba(244,239,226,.8);padding-block:clamp(32px,5.6vw,60px) 24px;font-size:.92rem}
.foot-grid{display:grid;gap:30px}
@media(min-width:640px){.foot-grid{grid-template-columns:1.3fr 1fr}}
footer h4{font-family:var(--body);font-weight:700;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-muted);margin:0 0 10px}
footer a{color:rgba(244,239,226,.82);text-decoration:none}
footer a:hover{color:var(--accent-muted)}
footer p+p{margin-block-start:4px}
.foot-mark{display:flex;align-items:center;gap:10px;font-family:var(--display);font-size:1.25rem;color:#FFFAEE}
.foot-mark svg{width:28px;height:28px}
.foot-tag{margin-block-start:8px;font-size:.82rem;color:var(--accent-muted);letter-spacing:.04em}
.foot-addr-line{margin-block-start:14px;color:rgba(244,239,226,.78)}
.foot-brand p{font-size:.9rem}

/* the legal row: present, tappable, never louder than the real content
   above it — its own hairline, quiet type, generous tap targets */
.foot-legal{
  margin-block-start:28px;padding-block-start:18px;border-block-start:1px solid rgba(244,239,226,.14);
  display:flex;flex-wrap:wrap;gap:6px 20px;
}
.foot-legal a{font-size:.82rem;color:rgba(244,239,226,.6);padding-block:6px}
.foot-legal a:hover{color:var(--accent-muted)}
@media(pointer:coarse){.foot-legal a{min-height:44px;display:inline-flex;align-items:center}}

.foot-bar{margin-block-start:14px;padding-block-start:18px;border-block-start:1px solid rgba(244,239,226,.16);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.8rem;color:rgba(244,239,226,.56)}
/* DOR-B credit — silver frame on the footer's own green, the whole frame one link. The logo's
   black ground disappears with mix-blend-mode:screen; never put opacity,
   transform or filter on the link itself (it would isolate the blend and a
   black box would appear around the logo). The footer height is measured
   live (--foot-h), so the last page still fits one screen. */
.foot__creditrow{display:flex;justify-content:center;margin-block-start:6px}
footer .foot__credit{display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border-radius:5px;background:var(--forest-deep);border:1px solid #b9bdc3;text-decoration:none}
.foot__credit span{font-size:.56rem;font-weight:700;letter-spacing:.03em;white-space:nowrap;color:#c9ccd1;background:linear-gradient(180deg,#f2f3f5,#b9bdc3 55%,#9ea2a8);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.foot__credit img{height:17px;width:auto;mix-blend-mode:screen}

/* ==========================================================================
   DIVIDER — small hand mark between chapters, replaces heavy scroll cues
   ========================================================================== */
.divider{display:flex;align-items:center;justify-content:center;padding-block:4px}
.divider svg{width:64px;height:20px;color:var(--line-strong)}
.section--dark + .divider svg,.divider--on-dark svg{color:rgba(244,239,226,.24)}

/* ==========================================================================
   LEGAL PAGES — a plain, readable prose column; the same shell (header,
   footer, tokens) as the rest of the site, none of the editorial layout.
   ========================================================================== */
.legal{padding-block:clamp(40px,8vw,80px)}
.legal .wrap{max-width:74ch}
.legal__updated{margin-block-end:8px}
.legal h1{font-size:clamp(2rem,6vw,2.8rem)}
.legal__lede{margin-block-start:14px;color:var(--text-secondary);font-size:1.05rem;max-width:62ch}
.legal__notice{
  margin-block-start:26px;padding:16px 18px;border-radius:var(--radius-sm);
  background:var(--canvas-deep);border:1px solid var(--line);
  font-size:.9rem;color:var(--text-secondary);
}
.legal__body{margin-block-start:clamp(32px,6vw,48px)}
.legal__body h2{font-size:clamp(1.25rem,3.6vw,1.5rem);color:var(--forest);margin-block-start:clamp(30px,5vw,42px)}
.legal__body h2:first-child{margin-block-start:0}
.legal__body p{margin-block-start:12px;color:var(--text-primary);font-size:.98rem;line-height:1.72;max-width:66ch}
.legal__body ul{margin-block-start:12px;display:grid;gap:8px}
.legal__body li{position:relative;padding-inline-start:20px;color:var(--text-primary);font-size:.98rem;line-height:1.6;max-width:64ch}
.legal__body li::before{content:"";position:absolute;inset-inline-start:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.legal__body strong{font-weight:600;color:var(--forest)}
.legal__back{margin-block-start:clamp(36px,6vw,56px)}


/* ==========================================================================
   ACCESSIBILITY TOOLBAR — first-party, no external widget, no subscription.
   The button and panel are built by js/a11y.js; everything a control does is
   expressed here as plain CSS on <html>, so the whole feature is inspectable
   and nothing about the site changes when the script is absent.
   ========================================================================== */
:root{--a11y-fs:1}

/* ---- the floating button ---- */
/* Physically bottom-LEFT in both language directions (not inline-start), so
   it lives in the same corner whichever way the page reads — and clear of the
   fixed action bar, which owns the bottom edge on phones. */
.a11y-fab{
  position:fixed;right:14px;z-index:160;
  bottom:calc(76px + env(safe-area-inset-bottom));
  width:48px;height:48px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--forest);color:var(--canvas);
  border:2px solid rgba(244,239,226,.55);
  box-shadow:0 6px 18px rgba(20,30,22,.34);
  transition:transform .2s var(--ease),background .2s var(--ease);
}
.a11y-fab svg{width:26px;height:26px}
.a11y-fab:hover{background:var(--forest-soft);transform:translateY(-1px)}
.a11y-fab:active{transform:translateY(0)}
@media(min-width:1024px){.a11y-fab{bottom:20px;right:20px}}

/* ---- the panel ---- */
.a11y-panel{
  position:fixed;right:14px;z-index:161;
  bottom:calc(76px + 48px + 10px + env(safe-area-inset-bottom));
  width:min(320px,calc(100vw - 28px));
  max-height:min(72svh,560px);overflow-y:auto;overscroll-behavior:contain;
  background:var(--panel);color:var(--text-primary);
  border:1px solid var(--line);border-radius:18px;
  box-shadow:0 18px 44px rgba(20,34,24,.26);
  padding:8px;
  text-align:start;
}
@media(min-width:1024px){.a11y-panel{bottom:calc(20px + 48px + 10px);right:20px}}
/* the legal pages carry no action bar, so nothing needs reserving under the
   button there — drop it to the corner instead of leaving it hovering over
   an empty lane */
html:not(:has(.actionbar)) .a11y-fab{bottom:calc(18px + env(safe-area-inset-bottom))}
html:not(:has(.actionbar)) .a11y-panel{bottom:calc(18px + 48px + 10px + env(safe-area-inset-bottom))}
/* 320–359px: hug the corner harder so the hero's open/closed pill, which is
   the widest thing in the lower group, has room to sit beside the button
   rather than under it. (Paired with the .hero__status rule further up.) */
@media(max-width:359px){
  .a11y-fab{width:42px;height:42px;right:6px}
  .a11y-fab svg{width:23px;height:23px}
  .a11y-panel{right:6px;bottom:calc(76px + 42px + 10px + env(safe-area-inset-bottom))}
}
.a11y-panel__head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 12px 10px;
}
.a11y-panel__head h2{font-family:var(--body);font-weight:700;font-size:1rem;color:var(--forest)}
.a11y-panel__mark{width:22px;height:22px;color:var(--forest);flex:none}
.a11y-panel__close{flex:none;display:flex;align-items:center;justify-content:center;width:40px;height:40px;margin-block:-9px;margin-inline-end:-9px;border:0;border-radius:50%;background:none;color:var(--forest);cursor:pointer;-webkit-tap-highlight-color:transparent}
.a11y-panel__close:hover,.a11y-panel__close:focus-visible{background:rgba(31,58,46,.08)}
.a11y-list{display:grid}
.a11y-row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:100%;min-height:48px;padding:10px 12px;border-radius:12px;
  font-size:.95rem;color:var(--text-primary);text-align:start;
  transition:background .18s var(--ease),color .18s var(--ease);
}
.a11y-row svg{width:21px;height:21px;flex:none;color:var(--forest-soft)}
.a11y-row__label{flex:1;min-width:0}
.a11y-row:hover:not([disabled]){background:rgba(28,56,38,.07)}
.a11y-row[aria-pressed="true"]{background:var(--forest);color:var(--on-forest);font-weight:600}
.a11y-row[aria-pressed="true"] svg{color:var(--accent-muted)}
.a11y-row[disabled]{opacity:.42;cursor:default}
.a11y-reset{
  margin-block-start:6px;padding-block-start:14px;
  border-block-start:1px solid var(--line);border-radius:0 0 12px 12px;
  font-weight:700;color:var(--forest);
}
.a11y-statement{
  display:block;padding:10px 12px 8px;font-size:.8rem;
  color:var(--text-secondary);text-decoration:underline;text-underline-offset:3px;
}
.a11y-statement:hover{color:var(--forest)}

/* ---- what the controls actually do ---- */

/* whole-page filters. Applied to the root element, which keeps the fixed
   action bar, the floating button and the panel itself inside the filtered
   canvas rather than orphaning them out of it. */
html.a11y-grayscale{filter:grayscale(1)}
html.a11y-invert{filter:invert(1) hue-rotate(180deg)}
/* photographs would otherwise come back as negatives — invert them a second
   time so the page flips but the pictures stay themselves */
html.a11y-invert img,html.a11y-invert video{filter:invert(1) hue-rotate(180deg)}

/* high contrast — a real palette rewrite through the same tokens the rest of
   the stylesheet already reads, not a filter laid over the top */
html.a11y-contrast{
  --canvas:#fff;--canvas-deep:#fff;--panel:#fff;
  --ink:#000;--text-primary:#000;--text-secondary:#111;
  --forest:#000;--forest-soft:#000;--forest-deep:#000;
  --accent:#8A3B00;--accent-hover:#6D2E00;--accent-muted:#FFDCA8;
  --line:#000;--line-strong:#000;--on-accent:#fff;--on-forest:#fff;
  --shadow-1:none;--shadow-2:none;
}
html.a11y-contrast body{background:#fff;color:#000}
html.a11y-contrast .section--deep{background:#fff}
html.a11y-contrast .card,html.a11y-contrast .chip-fact,html.a11y-contrast .faq-item,
html.a11y-contrast .menu-item,html.a11y-contrast .revmarquee__card,
html.a11y-contrast .a11y-panel,html.a11y-contrast .menu-dialog{border:2px solid #000}
html.a11y-contrast .btn{background:#000;color:#fff;border:2px solid #000;box-shadow:none}
html.a11y-contrast .btn--ghost,html.a11y-contrast .btn--on-dark{background:#fff;color:#000;border:2px solid #000;text-shadow:none}
html.a11y-contrast .hero__scrim{background:rgba(0,0,0,.55)}
html.a11y-contrast .hero__top::before,html.a11y-contrast .hero__bottom::before{
  inset:-20% -24%;background:rgba(0,0,0,.76);
}
html.a11y-contrast .hero h1,html.a11y-contrast .hero__sub,html.a11y-contrast .hero__kicker{text-shadow:none;color:#fff}
html.a11y-contrast .hero__status{background:#000;border-color:#fff;color:#fff;text-shadow:none}
html.a11y-contrast .icon-btn--on-dark{border-color:#fff;color:#fff}
html.a11y-contrast .revmarquee,html.a11y-contrast .revmarquee__fade--t,html.a11y-contrast .revmarquee__fade--b{background:#fff}
html.a11y-contrast .revmarquee__fade--t{background:linear-gradient(to bottom,#fff,transparent)}
html.a11y-contrast .revmarquee__fade--b{background:linear-gradient(to top,#fff,transparent)}
html.a11y-contrast .a11y-row[aria-pressed="true"]{background:#000;color:#fff}
html.a11y-contrast .a11y-row[aria-pressed="true"] svg{color:#fff}

/* light background — flattens every dark chapter and the two photographic
   ones to plain light surfaces, for visitors who find dark blocks hard work */
html.a11y-lightbg{--canvas:#fff;--canvas-deep:#F6F3EB;--panel:#fff}
html.a11y-lightbg body{background:#fff}
html.a11y-lightbg .section--dark,html.a11y-lightbg .quickfacts,
html.a11y-lightbg footer,html.a11y-lightbg .final-cta,html.a11y-lightbg .hero{
  background:#fff;color:var(--text-primary);
}
html.a11y-lightbg .hero__media,html.a11y-lightbg .hero__scrim,
html.a11y-lightbg .final-cta__media,html.a11y-lightbg .final-cta__scrim,
html.a11y-lightbg .hero__top::before,html.a11y-lightbg .hero__bottom::before{display:none}
html.a11y-lightbg .hero{min-height:0}
html.a11y-lightbg .hero h1,html.a11y-lightbg .hero__sub,
html.a11y-lightbg .final-cta h2,html.a11y-lightbg .final-cta p{text-shadow:none;color:var(--forest)}
html.a11y-lightbg .hero__kicker{color:var(--accent-hover);text-shadow:none}
html.a11y-lightbg .hero__status{background:var(--canvas-deep);border-color:var(--line);color:var(--text-primary);text-shadow:none}
html.a11y-lightbg .btn--on-dark{background:transparent;color:var(--forest);border-color:var(--forest);text-shadow:none;box-shadow:none}
html.a11y-lightbg .icon-btn--on-dark{color:var(--forest);border-color:var(--line-strong)}
html.a11y-lightbg .qf-status,html.a11y-lightbg .qf-addr{color:var(--text-primary)}
html.a11y-lightbg .section--dark .label,html.a11y-lightbg footer h4{color:var(--accent-hover)}
html.a11y-lightbg .section--dark .eyebrow-row::after{background:var(--line)}
html.a11y-lightbg footer,html.a11y-lightbg footer a{color:var(--text-primary)}
html.a11y-lightbg .foot-legal,html.a11y-lightbg .foot-bar{border-block-start-color:var(--line)}
html.a11y-lightbg .foot-legal a,html.a11y-lightbg .foot-bar{color:var(--text-secondary)}
html.a11y-lightbg .revmarquee,html.a11y-lightbg .revmarquee__fade--t,html.a11y-lightbg .revmarquee__fade--b{background:#F6F3EB}
html.a11y-lightbg .revmarquee__fade--t{background:linear-gradient(to bottom,#F6F3EB,transparent)}
html.a11y-lightbg .revmarquee__fade--b{background:linear-gradient(to top,#F6F3EB,transparent)}

/* highlight links — every real link gets an underline and an outline, while
   the things that are styled as buttons keep their button shape */
html.a11y-links a:not(.btn):not(.icon-btn){
  text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;
  outline:2px dashed currentColor;outline-offset:2px;border-radius:3px;
}
html.a11y-links a.btn,html.a11y-links a.icon-btn{outline:2px dashed currentColor;outline-offset:3px}

/* readable font — a plain, widely-installed sans for both Hebrew and Latin,
   with looser lines and a heavier heading weight than the display face has */
html.a11y-font{
  --display:Arial,"Helvetica Neue",Helvetica,system-ui,sans-serif;
  --body:Arial,"Helvetica Neue",Helvetica,system-ui,sans-serif;
}
html.a11y-font body{line-height:1.75;letter-spacing:.012em}
html.a11y-font h1,html.a11y-font h2,html.a11y-font h3,html.a11y-font h4{font-weight:700;line-height:1.24;letter-spacing:0}
html.a11y-font .label,html.a11y-font .hero__kicker{letter-spacing:.06em}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .a11y-fab,.a11y-row{transition:none}
  .a11y-fab:hover{transform:none}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ==========================================================================
   LOADING SCREEN — a cup of coffee being poured, isolated and inert.

   Every element here is position:fixed or inside it, so the whole thing takes
   part in no layout anywhere on the page: it cannot shift content, cannot
   change document height and therefore cannot move the scroll position. It
   sets no overflow on <html> or <body>, contains nothing focusable and is
   aria-hidden, so the scroll policy in js/main.js, the anchor navigation, the
   bottom bar and the accessibility panel all behave exactly as they do
   without it. Its artwork is the photographed cup twice — empty with its
   ice, and full — plus a small strip of the real stream (~290 KB together,
   preloaded in <head>); until both cups arrive the green screen shows alone.

   --p is the single source of truth for progress, 0 to 1. The coffee level,
   the surface and where the stream ends all read it, which keeps them in
   step by construction rather than by animations that happen to agree.
   ========================================================================== */
.loader{
  --p:0;
  position:fixed;inset:0;z-index:500;
  display:grid;place-items:center;
  /* one flat, dark green — the cup's clear plastic shows it through */
  background:#0F2B1B;
  /* Failsafe for scripting that is ON but never runs — a blocked or broken
     bundle. The controller cancels this the instant it takes over, so it can
     never cut a genuine slow load short; from then on the JS owns its own cap. */
  animation:loader-failsafe 0s linear 4s forwards;
}
@keyframes loader-failsafe{to{opacity:0;visibility:hidden;pointer-events:none}}

.loader__stage{display:grid;justify-items:center;gap:14px;transform:translateY(-2vh)}

/* ---- the cup ----
   The photographed cup, on its own: the plastic, the ice and the print are
   in both images, and everything that is see-through is transparent, so the
   green of the loader shows through the cup exactly as it would through
   real plastic. Same place and size on the screen as before (~37% of the
   width). Nothing shows until both copies of the cup have arrived. */
.loader__cup{
  position:relative;isolation:isolate;
  width:min(41vw,180px,calc((100svh - 160px) * 635 / 840 * .55));
  aspect-ratio:635 / 840;
  /* how high the coffee stands, in % of the picture from its bottom edge:
     the coffee's base (6.55%) at --p 0, just under the rim (89.05%) at 1 —
     the page opens on a cup filled to the top */
  --lvl:calc(6.55% + var(--p) * 82.5%);
  opacity:0;transition:opacity .35s var(--ease);
}
.loader__cup.is-in{opacity:1}
/* a soft shadow on the green under the cup */
.loader__cup::after{
  content:"";position:absolute;z-index:-2;left:50%;bottom:-1.5%;
  width:78%;height:7%;transform:translateX(-50%);
  background:radial-gradient(closest-side,rgba(0,0,0,.5),rgba(0,0,0,.22) 55%,transparent);
}
.loader__img{position:absolute;inset:0;width:100%;height:100%;display:block}
.loader__img--empty{z-index:1}

/* ---- the coffee ----
   The full cup over its empty copy, shown from the base of the coffee up to
   --lvl — the ice is in both, so the coffee rises around it. The edge is the
   surface: soft, and gently moving. */
.loader__img--coffee{
  z-index:2;
  -webkit-mask-image:linear-gradient(0deg,#000 0,#000 var(--lvl),transparent calc(var(--lvl) + .9%));
          mask-image:linear-gradient(0deg,#000 0,#000 var(--lvl),transparent calc(var(--lvl) + .9%));
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  animation:loader-surface 1.1s ease-in-out infinite;
}
@keyframes loader-surface{
  0%,100%{-webkit-mask-position:0 0;mask-position:0 0}
  50%{-webkit-mask-position:0 1.5px;mask-position:0 1.5px}
}
/* the surface itself: a creamy, slightly lighter band across the cup's
   inside at the level, as wide as the cup is at that height */
.loader__surface{
  position:absolute;z-index:3;left:50%;
  bottom:calc(var(--lvl) - 1.4%);height:2.8%;
  width:calc(54% + var(--p) * 23%);transform:translateX(-50%);
  background:radial-gradient(closest-side,rgba(236,208,168,.55),rgba(214,170,120,.28) 60%,transparent);
  animation:loader-foam .9s ease-in-out infinite alternate;
}
@keyframes loader-foam{from{opacity:.75;transform:translateX(-50%) scaleX(.985)}to{opacity:1;transform:translateX(-50%) scaleX(1.01)}}

/* No falling stream (owner request, the same cup motion as the sister
   site's): the coffee simply rises inside the cup, around the ice, as the
   page gets ready; at .is-full the surface settles, then the page opens. */
.loader.is-full .loader__img--coffee,.loader.is-full .loader__surface{animation:none}
.loader.is-full .loader__surface{opacity:.7;transition:opacity .4s}

/* ---- dismissal ---- */
.loader.is-done{
  opacity:0;pointer-events:none;
  transition:opacity .4s var(--ease);
}

/* Reduced motion: no flowing stream and no churn. The coffee still rises —
   it is the progress itself — and the controller drops its pacing floor, so
   it is over as soon as the page is genuinely ready. */
@media(prefers-reduced-motion:reduce){
  .loader__cup{transition:none}
  .loader__img--coffee,.loader__surface{animation:none}
}

/* ==========================================================================
   PHONES — one section per screen. The visible area is the viewport minus
   the header (measured into --hdr-h by js/main.js) and the 64px action bar.
   Each section below fills exactly that, so scrolling moves screen by screen.
   ========================================================================== */
@media(max-width:759px){
  :root{--vis:calc(100svh - var(--hdr-h,72px) - 64px - env(safe-area-inset-bottom))}
  #menu,#reviews,#hours,.final-cta{scroll-margin-top:var(--hdr-h,72px)}
  main > .divider{display:none}

  /* menu: heading + pills + tiles + button; the tiles take whatever is left */
  #menu{height:var(--vis);min-height:420px;display:flex;flex-direction:column;padding-block:18px 18px}
  #menu > .wrap{flex:1;min-height:0;display:flex;flex-direction:column}
  #menu .section-head{margin-block-end:8px}
  #menu .menu-cats{flex:none;margin-block-start:6px}
  #menu .menu-grid{flex:1;min-height:0;margin-block-start:12px;grid-auto-rows:1fr}
  #menu .menu-item,#menu .menu-item:first-child{aspect-ratio:auto;min-height:0}
  #menu .menu-cta{flex:none;margin-block-start:14px}

  /* useful info + opening hours: centred in their screen */
  #hours{min-height:var(--vis);display:flex;flex-direction:column;justify-content:center}

  /* closing: heading on top, the photo fills the rest of the screen */
  .final-cta{height:var(--vis);min-height:380px}
  .final-cta__media{flex:1;min-height:0;aspect-ratio:auto}
}
/* short phones (SE-size): tighten the hours table so the section still fits one screen */
@media(max-width:759px) and (max-height:740px){
  #hours{padding-block:14px}
  #hours .section-head{margin-block-end:10px}
  #hours .hours-now{padding-block:10px}
  #hours .hrow{padding-block:6px}
  #hours .hours-note{padding-block:9px 11px;font-size:.8rem}
}

/* ---- phones: every section fills its screen ---- */
@media(max-width:759px){
  /* reviews: the wall takes all the height left under the heading */
  #reviews > .wrap{flex:1;min-height:0;display:flex;flex-direction:column}
  #reviews .revwrap{flex:1;min-height:0;display:flex;flex-direction:column}
  #reviews .revmarquee{flex:1;height:auto;min-height:220px}
  #reviews .revmarquee__col{height:96%}
  #reviews .review-link{flex:none;margin-block-start:12px}

  /* useful info: larger, well-spaced cards filling the screen */

  /* opening hours: the card stretches and its rows share the height */
  #hours{justify-content:flex-start;padding-block:22px}
  #hours > .wrap{flex:1;min-height:0;display:flex;flex-direction:column}
  #hours .hours-solo{flex:1;min-height:0;display:flex;flex-direction:column;max-width:none}
  #hours .hours-solo > .card{flex:1;display:flex;flex-direction:column}
  #hours #hoursList{flex:1;display:flex;flex-direction:column}
  #hours .hrow{flex:1;align-items:center;font-size:1.02rem}

  /* ---- story scroll: each screen pins, the next one slides over it ---- */
  html,body{overflow-x:clip}
  #top{background:var(--forest)}
  #menu{background:var(--canvas)}
  main > section{position:sticky;top:var(--hdr-h,72px);transform-origin:bottom left;box-shadow:0 -14px 30px rgba(20,30,22,.12)}
  html[dir="rtl"] main > section{transform-origin:bottom right}
  main > #top{position:sticky;top:0;box-shadow:none}
  main > section:last-of-type{position:relative;top:auto}
}
@media(max-width:759px) and (max-height:740px){
  #reviews .revmarquee{min-height:200px}
}

/* phones: the menu's photo tiles get the room the removed pills left —
   the sinabon row taller than the two below it */
@media(max-width:759px){
  #menu .menu-grid{grid-template-rows:1.6fr 1fr 1fr;grid-auto-rows:1fr}

  /* the closing screen: the photo section plus a compact footer together
     fill exactly one screen (footer height measured into --foot-h) */
  body:has(.hero) footer{padding-block:18px 0}
  body:has(.hero) footer.has-actionbar-space{padding-block-end:74px}
  body:has(.hero) .foot-grid{gap:0}
  body:has(.hero) .foot-brand{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:14px;row-gap:4px}
  body:has(.hero) .foot-brand .foot-mark{flex-basis:100%}
  body:has(.hero) .foot-brand p,body:has(.hero) .foot-addr-line{margin:0;font-size:.86rem}
  body:has(.hero) .foot-legal{margin-block-start:12px;padding-block-start:10px;column-gap:14px;row-gap:0}
  body:has(.hero) .foot-legal a{font-size:.8rem;padding-block:4px}
  body:has(.hero) .foot-bar{margin-block-start:8px;padding-block:10px 0;font-size:.76rem;row-gap:2px}
  .final-cta{height:calc(100svh - var(--hdr-h,72px) - var(--foot-h,260px));min-height:200px}
  body:has(.hero) .foot-bar > span:first-child{display:none}
}

/* ==========================================================================
   LEGAL PAGES — restrained, readable document layout
   ========================================================================== */
.legal{padding-block:clamp(28px,7vw,64px) clamp(36px,8vw,72px)}
.legal .wrap{max-width:70ch}
.legal h1{font-size:clamp(1.9rem,7.4vw,2.6rem);font-weight:700;color:var(--accent-hover);line-height:1.2}
.legal__updated{margin-block:6px 0;color:var(--text-secondary)}
.legal__lede{margin-block-start:16px;padding-block-end:20px;border-block-end:2px solid var(--accent-muted);font-size:1.05rem;line-height:1.7;color:var(--text-primary);max-width:none}
.legal__body{margin-block-start:8px}
.legal__sec{padding-block:22px;border-block-end:1px solid var(--line)}
.legal__sec:last-child{border-block-end:0}
.legal__body h2{margin-block-start:0;font-size:clamp(1.18rem,4.8vw,1.4rem);font-weight:700;color:var(--forest);line-height:1.35}
.legal__body p{font-size:1rem;line-height:1.75;max-width:none}
.legal__body p + p{margin-block-start:10px}
.legal__body ul{margin-block-start:12px;gap:9px}
.legal__body li{font-size:1rem;line-height:1.65;max-width:none;padding-inline-start:22px}
.legal__others{margin-block-start:24px;padding:18px;border-radius:var(--radius);background:var(--canvas-deep)}
.legal__others h2{font-size:1rem;font-weight:700;color:var(--forest);margin:0 0 12px}
.legal__others ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.legal__others a{display:inline-flex;align-items:center;min-height:40px;padding:8px 14px;border-radius:999px;border:1.5px solid var(--line-strong);font-size:.88rem;font-weight:600;color:var(--forest);text-decoration:none}
.legal__others a[aria-current="page"]{background:var(--forest);border-color:var(--forest);color:var(--on-forest)}
.legal__back{margin-block-start:20px}
.legal__back a{font-weight:600;color:var(--forest)}
html.a11y-contrast .legal h1{color:#000}
html.a11y-contrast .legal__others{background:#fff;border:2px solid #000}

/* phones: a tighter last screen so the closing photo gets more of it */
@media(max-width:759px){
  .final-cta{padding-block-start:22px}
  .final-cta .wrap{padding-block-end:16px}
  .final-cta p{margin-block-start:8px;font-size:.94rem}
  body:has(.hero) footer{padding-block-start:14px}
  body:has(.hero) footer.has-actionbar-space{padding-block-end:70px}
  body:has(.hero) .foot-brand{column-gap:12px;row-gap:2px}
  body:has(.hero) .foot-brand .foot-mark{flex-basis:auto;font-size:1.08rem}
  body:has(.hero) .foot-brand p,body:has(.hero) .foot-addr-line{font-size:.82rem}
  body:has(.hero) .foot-legal{flex-wrap:wrap;justify-content:space-between;column-gap:8px;row-gap:0;margin-block-start:10px;padding-block-start:8px}
  body:has(.hero) .foot-legal a{font-size:.72rem;white-space:nowrap;padding-block:3px}
  body:has(.hero) .foot-bar{margin-block-start:4px;padding-block:6px 0;font-size:.7rem}
}
@media(max-width:359px){
  body:has(.hero) .foot-legal{flex-wrap:wrap;justify-content:flex-start;row-gap:0}
}

/* ==========================================================================
   PHONES — scrolled header in green, app-style icons, last-screen fix
   ========================================================================== */
@media(max-width:1023px){
  /* homepage: once scrolled the header turns solid green; the wordmark keeps
     the same light gold it has over the photo, icons turn light */
  body:has(.hero) .site-header.solid{background:var(--forest);border-block-end-color:rgba(244,239,226,.12);box-shadow:0 2px 14px rgba(8,14,10,.28)}
  body:has(.hero) .site-header .brand{color:var(--accent-muted)}
  body:has(.hero) .site-header.solid .icon-btn{color:#FFFAEE}
  html.a11y-lightbg body:has(.hero) .site-header.solid{background:var(--canvas)}
  html.a11y-lightbg body:has(.hero) .site-header .brand{color:var(--accent-hover)}
}
/* Waze-style icon (header + bottom bar) */
.waze-logo{display:block;border-radius:6px}
.header-mobile-cta .icon-btn .waze-logo{width:26px;height:26px}
.actionbar .waze-logo{width:24px;height:24px}
/* app-style icons on the opening photo: phone in green, Instagram in its gradient */
.hero-social__btn{border-radius:10px;border:0;box-shadow:0 6px 16px rgba(5,9,6,.45)}
.hero-social__btn--tel{background:linear-gradient(180deg,#5BF675 0%,#0CBD2A 100%)}
.hero-social__btn--tel svg{fill:#fff;stroke:#fff}
/* Facebook, beside Instagram, in the same app-icon shape */
.hero-social__btn--fb{overflow:hidden;background:linear-gradient(180deg,#1F8BFF 0%,#0866FF 100%)}
/* the app's own mark: a bold white "f" whose stem runs off the bottom edge */
.hero-social__btn--fb svg{width:100%;height:100%;display:block}
/* TikTok, beside Facebook, in the same app-icon shape: the app's black tile
   with its note in cyan, red and white */
.hero-social__btn--tt{background:linear-gradient(180deg,#1b1b1b 0%,#000 100%)}
.hero-social__btn--tt svg{width:21px;height:21px}
@media(max-width:759px){
  /* last screen: sized to the LARGEST viewport, so when Safari's toolbars
     collapse the pinned section behind it can never peek out above it */
  .final-cta{height:calc(100lvh - var(--hdr-h,72px) - var(--foot-h,260px))}
  body:has(.hero) .foot-brand .foot-mark{font-size:1.2rem}
  body:has(.hero) .foot-brand p,body:has(.hero) .foot-addr-line{font-size:.9rem}
  body:has(.hero) .foot-bar{font-size:.76rem}
  body:has(.hero) footer{padding-block-start:18px}
}

/* ==========================================================================
   PHONES — story scroll geometry (no scroll snapping: it fought iOS's own
   momentum and re-snapped whenever the layout moved). Every height here is
   STATIC for the life of the page — nothing resizes while the visitor
   scrolls — so the pinned pages never shift under the finger.
   ========================================================================== */
@media(max-width:759px){
  /* pages size to the large viewport (toolbars hidden — the state while
     scrolling down), so the next page never peeks in at the bottom */
  :root{--vis:calc(100lvh - var(--hdr-h,72px) - 64px - env(safe-area-inset-bottom))}
  main > section{will-change:transform;backface-visibility:hidden}
  /* the last page sizes to the SMALL viewport, so with the toolbar showing
     it ends exactly at the bottom; when the toolbar hides and the screen
     grows, a same-colour band above it (a box-shadow, so it adds no height)
     covers the gap instead of revealing the page behind */
  .final-cta{
    height:calc(100svh - var(--hdr-h,72px) - var(--foot-h,260px));
    box-shadow:0 calc(-1 * (100lvh - 100svh)) 0 0 var(--canvas-deep),0 -14px 30px rgba(20,30,22,.12);
  }
}

/* ==========================================================================
   PHONES — page heights from the real visible height (--app-h, measured by
   js/main.js as window.innerHeight and updated on every resize), so each
   page is exactly one screen and the pager always lands flush.
   ========================================================================== */
@media(max-width:759px){
  :root{--vis:calc(var(--app-h,100svh) - var(--hdr-h,72px) - 64px - env(safe-area-inset-bottom))}
  .hero{min-height:calc(var(--app-h,100svh) - 64px - env(safe-area-inset-bottom))}
  #reviews{min-height:var(--vis)}
  .final-cta{
    height:calc(var(--app-h,100svh) - var(--hdr-h,72px) - var(--foot-h,260px));
    box-shadow:0 -14px 30px rgba(20,30,22,.12);
  }
}

/* ==========================================================================
   STACKED PAGES (phones)
   Each sticky section is covered by the next one sliding up over it — square
   top edge, so a page at rest fills the screen under the header with none of
   the previous page showing. The page-to-page move itself is the browser's
   own smooth scroll (js/main.js), so nothing animates per frame and no layer
   promotion is needed.
   ========================================================================== */
@media(max-width:759px){
  main > section{will-change:auto;backface-visibility:visible}
}

/* ==========================================================================
   ACCESSIBILITY BUTTON IN THE HEADER (every page)
   The one place the button appears: the header slot where the Waze icon
   used to sit (js/a11y.js mounts it there). Colours inverted from the old
   floating button — green figure on a white circle — so it reads on the
   transparent header over the hero and on the solid green one alike. The
   panel drops down from just under the header, on the same side as the
   button in either reading direction (its top is set when it opens).
   ========================================================================== */
.header-a11y{display:flex;flex:none}
.a11y-fab.a11y-fab--bar{
  position:static;width:35px;height:35px;
  background:#fff;color:var(--forest);
  border:1.5px solid rgba(28,56,38,.22);
  box-shadow:0 2px 8px rgba(20,30,22,.18);
}
.a11y-fab.a11y-fab--bar svg{width:21px;height:21px}
.a11y-fab.a11y-fab--bar:hover{background:#fff;transform:none}
@media(min-width:1024px){.a11y-fab.a11y-fab--bar{width:40px;height:40px}.a11y-fab.a11y-fab--bar svg{width:24px;height:24px}}
@media(max-width:359px){.a11y-fab.a11y-fab--bar{width:32px;height:32px}.a11y-fab.a11y-fab--bar svg{width:19px;height:19px}}
html body .a11y-panel.a11y-panel--bar{bottom:auto;right:auto;left:auto;inset-inline-end:14px}
@media(max-width:359px){html body .a11y-panel.a11y-panel--bar{inset-inline-end:6px}}

/* ==========================================================================
   LAST PAGE — WHITE ARROW TO WAZE (phones; drawn by js/main.js)
   A fixed, full-screen overlay that never takes a tap. It draws itself in
   once the visitor lands on the closing page, then the head appears; it
   fades straight out when they move on. Below the header (120) and the
   action bar (150), so it can never cover either.
   ========================================================================== */
.waze-arrow{
  position:fixed;inset:0;width:100%;height:100%;z-index:110;
  pointer-events:none;overflow:visible;
  opacity:0;visibility:hidden;transition:opacity .1s linear,visibility 0s linear .1s;
  contain:strict;will-change:opacity;
}
.waze-arrow path{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.waze-arrow path.is-shade{stroke:rgba(0,0,0,.28);stroke-width:6;transform:translateY(1px)}
.waze-arrow__curve{stroke-dasharray:1 1;stroke-dashoffset:1}
.waze-arrow__head{opacity:0}
.waze-arrow.is-on{opacity:1;visibility:visible;transition:opacity .2s ease}
/* one cycle: draw in from the edge → hold, pointing → the line slides on
   into the button and is gone → a short pause → again */
.waze-arrow.is-on .waze-arrow__curve{animation:waze-arrow-line 4.6s cubic-bezier(.45,0,.25,1) infinite}
.waze-arrow.is-on .waze-arrow__head{animation:waze-arrow-head 4.6s linear infinite}
@keyframes waze-arrow-line{
  0%{stroke-dashoffset:1}
  30%{stroke-dashoffset:0}
  58%{stroke-dashoffset:0}
  82%{stroke-dashoffset:-1}
  100%{stroke-dashoffset:-1}
}
@keyframes waze-arrow-head{
  0%,27%{opacity:0}
  32%,76%{opacity:1}
  82%,100%{opacity:0}
}
@media(prefers-reduced-motion:reduce){
  .waze-arrow.is-on .waze-arrow__curve{animation:none;stroke-dashoffset:0}
  .waze-arrow.is-on .waze-arrow__head{animation:none;opacity:1}
}
@media(min-width:760px){.waze-arrow{display:none}}
html.a11y-contrast .waze-arrow path{stroke:#fff}
html.a11y-contrast .waze-arrow path.is-shade{stroke:rgba(0,0,0,.5)}

/* ==========================================================================
   "FULL MENU" BUTTON UNDER THE PREVIEW CARDS
   The cards above it are only a peek inside, so this is the one real way
   into the menu and has to read that way: a deeper, warmer caramel than the
   site's regular orange buttons, cream text, a warm glow, and a touch more
   size. Same pill, same icon, same place. (#FFFAEE text stays above 4.5:1
   across the whole gradient.)
   ========================================================================== */
#menu .menu-cta .btn{
  min-height:52px;padding:13px 27px;gap:10px;
  font-size:1.04rem;font-weight:700;letter-spacing:.015em;
  background:linear-gradient(180deg,#A85D0E 0%,#8F4E09 100%);
  color:#FFFAEE;
  border:1px solid rgba(120,62,8,.55);
  box-shadow:0 8px 20px rgba(150,80,10,.34),0 2px 5px rgba(60,30,6,.18),inset 0 1px 0 rgba(255,236,205,.28);
}
#menu .menu-cta .btn svg{width:21px;height:21px}
#menu .menu-cta .btn:hover{background:linear-gradient(180deg,#98530B 0%,#824607 100%);box-shadow:0 10px 24px rgba(165,89,14,.4),0 2px 5px rgba(60,30,6,.2),inset 0 1px 0 rgba(255,236,205,.28)}
#menu .menu-cta .btn:active{transform:translateY(1px)}
html.a11y-contrast #menu .menu-cta .btn{background:#000;color:#fff;border:2px solid #000;box-shadow:none}

/* ==========================================================================
   OUR STORY (Mobile) — one screen, an editorial page: the photo band with
   the title; the partners — their chapter on a cream panel beside their
   photograph; and the courtyard photo with the closing quote as one warm,
   rounded card. On phones the three share the visible height exactly, and
   the type follows that height (--fs), so the page always fits.
   ========================================================================== */
.story-m{--st-gold:#A9844E;--st-olive:#2F4A35;--st-sand:#EFE7D6;--fs:15px;
  display:flex;flex-direction:column;padding:0;background:var(--panel);overflow:hidden}
.story-m__ph{position:relative;margin:0;overflow:hidden;background:var(--canvas-deep)}
.story-m__ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* band */
.story-m__band{position:relative;flex:0 0 auto;height:clamp(180px,48vw,300px);overflow:hidden;background:#1E2E22}
.story-m__band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.story-m__band::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(14,22,16,.42) 0%,rgba(14,22,16,.22) 42%,rgba(14,22,16,0) 62%,rgba(14,22,16,.32) 100%)}
/* the title sits high: under the top edge of the menu board, above the
   guests' heads */
.story-m__title{position:absolute;z-index:1;inset-inline:0;top:18%;padding:0 20px}
.story-m__title h2{margin:0;font-size:calc(var(--fs) * 3);font-weight:700;line-height:1;color:#FFFAEE;text-shadow:0 2px 16px rgba(8,14,10,.5)}

/* partners: words beside the photograph (photo on the reading-start side) */
.story-m__partners{flex:1 1 auto;min-height:0;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr);grid-template-areas:"ph txt"}
.story-m__team{grid-area:ph}
.story-m__team img{object-position:50% 40%}
.story-m__roots{grid-area:txt;position:relative;z-index:1;display:flex;flex-direction:column;justify-content:center;
  margin-inline-start:-14px;padding:calc(var(--fs) * .9) calc(var(--fs) * 1);background:var(--panel);
  border-start-start-radius:18px;min-width:0}
.story-m__roots h3{margin:0;font-family:var(--display);font-weight:700;font-size:calc(var(--fs) * 1.62);line-height:1.12;color:var(--forest)}
.story-m__roots h3::before{content:"";display:block;width:34px;height:2px;border-radius:2px;margin-block-end:calc(var(--fs) * .75);background:var(--st-gold)}
.story-m__roots p{margin:calc(var(--fs) * .7) 0 0;font-size:var(--fs);line-height:1.5;color:var(--st-olive)}

/* courtyard + quote: one rounded card */
.story-m__place{flex:0 0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"q ph";
  margin:10px 12px 12px;border-radius:20px;overflow:hidden;background:radial-gradient(120% 100% at 40% 100%,rgba(169,132,78,.16),transparent 62%),var(--st-sand);
  box-shadow:0 8px 22px rgba(30,42,33,.12)}
.story-m__placeph{grid-area:ph;border-start-start-radius:44% 100%;min-height:calc(var(--fs) * 10)}
.story-m__placeph img{object-position:45% 50%}
.story-m__quote{grid-area:q;margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  gap:calc(var(--fs) * .4);padding:calc(var(--fs) * .75) 10px}
.story-m__cup{width:calc(var(--fs) * 1.7);height:calc(var(--fs) * 1.7);color:var(--st-gold)}
.story-m__quote p{margin:0;color:var(--forest)}
.story-m__quote strong{display:block;font-family:var(--display);font-weight:700;font-size:calc(var(--fs) * 1.2);line-height:1.25}
.story-m__quote span{display:block;margin-block-start:calc(var(--fs) * .35);font-size:calc(var(--fs) * .95);line-height:1.4;color:var(--st-olive)}
.story-m__swash{display:block;width:calc(var(--fs) * 5);height:10px;color:var(--st-gold)}
.story-m__swash path{fill:none;stroke:currentColor;stroke-width:3.4;stroke-linecap:round}

html.a11y-contrast .story-m,html.a11y-contrast .story-m__roots,html.a11y-contrast .story-m__place{background:#fff}
html.a11y-contrast .story-m__roots h3,html.a11y-contrast .story-m__roots p,html.a11y-contrast .story-m__quote p,html.a11y-contrast .story-m__quote span{color:#000}

@media(min-width:760px){
  .story-m{width:min(100% - 48px,760px);margin:clamp(20px,4vw,40px) auto;border-radius:22px;box-shadow:0 12px 32px rgba(30,42,33,.14)}
  .story-m__partners{min-height:420px}
}
/* phones: exactly one page */
@media(max-width:759px){
  #story{scroll-margin-top:var(--hdr-h,72px);height:var(--vis);min-height:480px;
    --fs:clamp(12px,calc(var(--vis) * .0212),15.2px)}
  #story .story-m__band{height:24%;min-height:120px}
}
/* English is set in a wider face — a touch smaller, so it fits the same page */
html[dir="ltr"] #story .story-m__roots h3{font-size:calc(var(--fs) * 1.38)}
html[dir="ltr"] #story .story-m__roots p{font-size:calc(var(--fs) * .9)}

/* "לסיפור המלא" — under the partners' chapter; opens the full story */
.story-m__more{display:inline-flex;align-items:center;gap:4px;align-self:flex-start;margin-block-start:calc(var(--fs) * .7);
  padding-block:6px;font-size:calc(var(--fs) * .98);font-weight:700;color:var(--accent-hover);text-decoration:none;
  border-block-end:1.5px solid rgba(169,132,78,.55)}
.story-m__more svg{width:1.05em;height:1.05em;flex:none;transition:transform .2s var(--ease)}
.story-m__more:active svg{transform:translateX(-3px)}
html[dir="ltr"] .story-m__more svg{transform:scaleX(-1)}
html[dir="ltr"] .story-m__more:active svg{transform:scaleX(-1) translateX(-3px)}
html.a11y-contrast .story-m__more{color:#000;border-color:#000}

/* ==========================================================================
   THE FULL STORY — the dialog opened from "לסיפור המלא" (same shell as the
   full menu), set as a short editorial article: the counter photograph,
   the title with its gold swash, the story in a comfortable reading size,
   the partners and the courtyard as photographs between the chapters, and
   the closing line as a warm card.
   ========================================================================== */
.story-read{--st-gold:#A9844E;--st-olive:#2F4A35;max-width:640px;margin-inline:auto;padding-block:18px 8px}
.story-read figure{margin:0;overflow:hidden;background:var(--canvas-deep)}
.story-read figure img{display:block;width:100%;height:100%;object-fit:cover}
.story-read__hero{aspect-ratio:16 / 9;border-radius:18px;box-shadow:0 10px 26px rgba(30,42,33,.16)}
.story-read__hero img{object-position:50% 30%}
.story-read__head{margin-block:24px 6px}
.story-read__head h3{margin:0;font-family:var(--display);font-weight:700;font-size:clamp(1.75rem,7.6vw,2.2rem);line-height:1.12;color:var(--forest)}
.story-read__swash{display:block;width:120px;height:12px;margin-block-start:10px;color:var(--st-gold)}
.story-read__swash path,.story-read__cup{fill:none;stroke:currentColor;stroke-width:3.2;stroke-linecap:round}
.story-read p{margin:16px 0 0;font-size:clamp(1.04rem,4.5vw,1.14rem);line-height:1.8;color:var(--st-olive)}
.story-read .story-read__lead{font-size:clamp(1.1rem,4.8vw,1.22rem);line-height:1.75;color:var(--forest)}
.story-read__lead::first-letter{float:inline-start;font-family:var(--display);font-weight:700;font-size:3.3em;line-height:.9;
  margin-inline-end:8px;margin-block-start:4px;color:var(--st-gold)}
.story-read__name{font-family:var(--display);font-weight:700;font-size:1.12em;color:var(--accent-hover)}
.story-read__ph{position:relative;margin-block:26px 6px !important;border-radius:18px;box-shadow:0 8px 22px rgba(30,42,33,.14)}
.story-read__ph--team{aspect-ratio:5 / 4}
.story-read__ph--team img{object-position:50% 34%}
.story-read__ph--place{aspect-ratio:16 / 10;border-start-end-radius:70px}
.story-read__ph--place img{object-position:42% 50%}
.story-read__close{margin:30px 0 0;padding:26px 22px 24px;border-radius:20px;text-align:center;
  background:radial-gradient(120% 100% at 50% 100%,rgba(169,132,78,.18),transparent 62%),#EFE7D6;
  box-shadow:inset 0 0 0 1px rgba(169,132,78,.28)}
.story-read__cup{display:block;width:34px;height:34px;margin:0 auto 10px;color:var(--st-gold);stroke-width:2}
.story-read .story-read__close p{margin:0;font-family:var(--display);font-weight:700;font-size:clamp(1.18rem,5.2vw,1.36rem);line-height:1.5;color:var(--forest)}
.story-read__done{display:flex;align-items:center;justify-content:center;width:100%;min-height:50px;margin-block-start:26px;
  border-radius:999px;background:var(--forest);color:var(--on-forest);font-weight:700;font-size:1rem}
html.a11y-contrast .story-read p,html.a11y-contrast .story-read__head h3,html.a11y-contrast .story-read .story-read__close p{color:#000}
html.a11y-contrast .story-read__close{background:#fff;box-shadow:0 0 0 2px #000}

/* closing page: the daytime courtyard — framed on the cart and its sign */
.final-cta__media img{object-position:64% 50%}


/* ==========================================================================
   MOTION LAYER (js/motion.js) — Lenis's own required rules. The page's
   CSS smooth-scroll must be off while Lenis drives the scroll, or every
   frame Lenis sets would be animated a second time by the browser.
   ========================================================================== */
html.lenis,html.lenis body{height:auto}
html.lenis{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent],.lenis dialog,.lenis .a11y-panel{overscroll-behavior:contain}