/* =====================================================================
הַתַּפְרִיט · base.css — the shared design system (v2)
---------------------------------------------------------------------
Owner: the design-system agent. Every view module (directory / menu /
indices / trust) builds on the classes below and should never need to
restyle them. Class names are frozen — they match the v1 baseline.
Palette is fixed: paper / ink / soft / faint / faint2 + ONE accent
(--acc, swapped per restaurant by the menu view). Display serif =
Frank Ruhl Libre, UI sans = Heebo (both loaded in index.html).
No other fonts, no gradients-for-fun, hairlines everywhere.
Contents
0 tokens
1 reset · canvas · paper texture · selection · scrollbars · focus
2 masthead · footer
3 toast · meal-calc bar
4 shared controls (.btn · .fchip · .citychip · #q · .addbtn · .budgetrow)
5 source badges & small metadata (.src · .cnt · .diff · .kindtag)
6 restaurant card family (.cards · .rcard)
7 page headers (.dirhead · .hero · .dishhead · .rep intro)
8 stat bands (.statline · .numbers) · .typical
9 filters
10 filmstrip (.strip)
11 courses & dishes (the menu itself)
12 list rows (.drows · .drow · .trow · .tbar)
13 dish-index grid (.dixgrid · .dix)
14 report graphics (.bar · .plist)
15 provenance & footnotes (.srcline · .probbox · .caveat · .faqsec · .menuFooter)
16 ink illustrations & seals
17 motion · prefers-reduced-motion
18 mobile (≤760 / ≤640 / ≤480 — flawless at 390px)
19 print — a menu page becomes a real paper menu
===================================================================== */
/* ============================== 0 · tokens ========================== */
:root{
/* ===== 2026 REDESIGN — "modern Israeli food-market": crisp warm-white ground,
a disciplined appetizing spice palette, soft shadows, rounded, real colour. ===== */
--paper:#FBFAF7; /* crisp warm white (was aged cream) */
--ink:#221C17; /* warm near-black */
--soft:#5E5648; /* warm grey — body-secondary */
--faint:#ECE7DD; /* soft warm hairline */
--faint2:#F5F1E9; /* very soft warm fill */
--acc:#D8443A; /* default accent = vivid tomato (menu view still swaps per restaurant) */
/* identity + the shuk-spice accents (bright, appetizing — not muted ceramic) */
--brand:#7a1f2b; /* bole-red identity — wordmark/logo/og (kept for asset consistency) */
--primary:#D8443A; /* tomato/harissa — primary action, energy */
--primary-d:#B5342B;
--gold:#E7A11B; /* turmeric */
--herb:#3F925C; /* za'atar green */
--teal:#137E88;
--plum:#804673;
--acc2:#137E88; /* teal — secondary (icons, index numbers) */
--acc3:#E7A11B; /* turmeric gold — kickers/rules */
--acc4:#3F925C; /* herb green */
/* soft-tint zone grounds */
--blush:#FBEDE9; --cream:#FCF3E1; --mint:#EAF4EE; --sky:#E8F1F3;
--ok:#3F925C; /* official-source green */
--bad:#C0392B; /* no-menu red */
--card:#FFFFFF; /* card / plate surfaces */
--wash:#FBF7F0; /* row hover wash */
--mut:#7C7263; /* muted: "לא פורסם", empty states — AA on white */
--faint3:#D9D2C4;
--soft2:#948B7C;
--ph:#8A8072; /* input placeholder — AA */
--veil:rgba(251,250,247,.9);
/* type — serif reserved for DISPLAY; Heebo carries body (less "wall of serif") */
--serif:"Frank Ruhl Libre","David Libre","David","Times New Roman",serif;
--sans:"Heebo","Segoe UI",Arial,sans-serif;
--lh-display:1.08;
--hair:1px solid var(--faint);
--hair2:1px solid var(--faint2);
--rule:2px solid var(--ink);
/* soft, modern shadows (replace the hard letterpress offsets) */
--lift:0 4px 16px rgba(34,28,23,.07),0 1px 3px rgba(34,28,23,.05);
--lift2:0 16px 44px rgba(34,28,23,.14);
/* rounded corners */
--r:18px; --r-sm:11px; --r-pill:999px;
--maxw:1080px;
--z-calc:45;
--z-toast:70;
--noise:none; /* clean modern ground — dropped the aged paper grain */
}
/* ============ 1 · reset · canvas · texture · focus · selection ======= */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{
background:var(--paper);
-webkit-text-size-adjust:100%;
color-scheme:light;
}
@media (prefers-reduced-motion: no-preference){
html{scroll-behavior:smooth}
}
body{
background-color:var(--paper);
background-image:var(--noise);
color:var(--ink);
font-family:var(--serif);
line-height:1.6;
min-height:100vh;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}
.ui{font-family:var(--sans)}
.wrap{
max-width:var(--maxw);
margin:0 auto;
padding:0 26px calc(96px + env(safe-area-inset-bottom,0px));
position:relative;
}
a{color:inherit;text-underline-offset:3px}
img{max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
[hidden]{display:none !important}
[id]{scroll-margin-top:24px}
/* text selected in the accent — the one drop of colour on the page */
::selection{background:var(--acc);color:var(--paper)}
/* thin paper scrollbars */
*{scrollbar-width:thin;scrollbar-color:var(--faint) transparent}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{
background-color:var(--faint);
border:2px solid var(--paper);
border-radius:8px;
}
::-webkit-scrollbar-thumb:hover{background-color:var(--faint3)}
::-webkit-scrollbar-corner{background:transparent}
/* keyboard focus — visible on EVERY interactive element, in the accent */
:where(a,button,input,select,textarea,summary,[tabindex],[role="link"],[role="button"]):focus-visible{
outline:2px solid var(--acc);
outline-offset:3px;
}
:where(a,button,[tabindex],[role="link"],[role="button"]):focus:not(:focus-visible){outline:none}
/* the view fades in like a page laid on the desk. NOTE: opacity only — NO transform.
A transform (even a filled identity matrix from animation-fill-mode) turns #view into the
containing block for position:fixed children, which pinned the sticky .menu-quicknav to
#view instead of the viewport (it scrolled away). Opacity does not create a containing block. */
#view{animation:viewin .45s ease both;min-height:55vh}
@keyframes viewin{from{opacity:0}}
/* ======================= 2 · masthead · footer ======================= */
.mast{
display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;
padding:24px 0 12px;
border-bottom:var(--rule);
}
.mast .plat{font-size:17px;letter-spacing:3px;font-weight:900;cursor:pointer;line-height:1.4;color:var(--brand);text-decoration:none}
.mast .issue{font-size:12px;color:var(--soft);letter-spacing:.6px;font-weight:300}
.mast .spacer{flex:1}
.mast a.lnk{
font-size:13px;font-weight:400;letter-spacing:.5px;cursor:pointer;white-space:nowrap;
color:inherit;text-decoration:none;border-bottom:1px solid transparent;
transition:color .2s,border-color .2s;
}
.mast a.lnk:hover{border-color:var(--acc);color:var(--acc)}
/* a faint ceramic ribbon under the masthead — the one polychrome flourish of the chrome */
.thinrule{
height:2px;margin-top:3px;border:0;border-radius:2px;opacity:.5;
background:linear-gradient(90deg,var(--acc3),var(--acc2) 38%,var(--acc4) 66%,var(--brand));
}
footer{
margin-top:96px;padding-top:20px;border-top:var(--rule);
display:flex;justify-content:space-between;gap:8px 14px;flex-wrap:wrap;
font-size:11.5px;color:var(--soft);letter-spacing:.5px;font-weight:300;
}
footer a{cursor:pointer;color:inherit;text-decoration:none}
footer a:hover{color:var(--acc)}
/* ====================== 3 · toast · meal-calc bar ==================== */
#toast{
position:fixed;bottom:24px;right:50%;transform:translateX(50%);z-index:var(--z-toast);
background:var(--ink);color:var(--paper);font-family:var(--sans);
font-size:13px;line-height:1.5;padding:9px 22px;border-radius:3px;
border:1px solid rgba(253,252,248,.35);
box-shadow:0 4px 18px rgba(0,0,0,.18);
max-width:calc(100vw - 32px);text-align:center;
opacity:0;pointer-events:none;transition:opacity .3s;
}
#calcbar{
position:fixed;bottom:0;left:50%;transform:translate(-50%,110%);z-index:var(--z-calc);
background:var(--ink);color:var(--paper);padding:12px 24px;font-size:14px;
display:flex;align-items:center;gap:14px;white-space:nowrap;
transition:transform .3s cubic-bezier(.2,.9,.3,1);
box-shadow:0 -8px 30px rgba(0,0,0,.25);
}
#calcbar.show{transform:translate(-50%,0)}
#calcbar button{
background:transparent;border:1px solid rgba(255,255,255,.4);color:var(--paper);
width:24px;height:24px;border-radius:50%;font-size:14px;line-height:1;
display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
transition:border-color .15s;
}
#calcbar button:hover{border-color:#fff}
#calcbar button:focus-visible{outline-color:var(--paper)}
#calcbar .clr{width:auto;border-radius:2px;padding:0 10px;height:24px;font-size:11.5px;letter-spacing:1px}
#dinN{min-width:16px;text-align:center;font-variant-numeric:tabular-nums}
/* calorie estimate on the (dark) calc bar — warm ochre + a small "הערכה" chip */
#calcbar .calc-cal{color:#e8c98a;font-variant-numeric:tabular-nums}
#calcbar .calc-est{font-size:9px;letter-spacing:1px;opacity:.65;border:1px solid rgba(253,252,248,.3);border-radius:2px;padding:0 4px;margin-right:3px;vertical-align:1px}
/* ========================= 4 · shared controls ======================= */
/* the house button — hairline box, inverts to ink on hover */
.btn{
font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:.2px;
display:inline-block;cursor:pointer;text-decoration:none;text-align:center;
background:var(--primary);border:1px solid var(--primary);color:#fff;
padding:11px 24px;border-radius:var(--r-pill);line-height:1.3;
transition:background .18s,border-color .18s,transform .18s,box-shadow .18s;
}
.btn:hover{background:var(--primary-d);border-color:var(--primary-d);transform:translateY(-1px);box-shadow:0 6px 18px rgba(216,68,58,.26)}
.btn:active{transform:translateY(0)}
.btn.ghost{background:transparent;border-color:var(--faint);color:var(--ink)}
.btn.ghost:hover{background:var(--faint2);border-color:var(--faint);color:var(--ink);box-shadow:none}
/* filter chip — modern pill; active = filled primary */
.fchip{
font-family:var(--sans);font-size:13.5px;font-weight:600;line-height:1.2;
cursor:pointer;background:var(--card);border:1px solid var(--faint);color:var(--soft);
padding:9px 16px;border-radius:var(--r-pill);
transition:.15s;
}
.fchip:hover{border-color:var(--primary);color:var(--primary)}
.fchip.on{border-color:var(--primary);color:#fff;font-weight:700;background:var(--primary)}
/* search field — a real modern rounded search box with depth */
#q{
font-family:var(--sans);font-size:15px;
border:1px solid var(--faint);border-radius:var(--r-pill);
background:var(--card);color:var(--ink);
padding:12px 18px;outline:none;min-width:220px;box-shadow:var(--lift);
appearance:none;-webkit-appearance:none;
transition:border-color .15s,box-shadow .15s;
}
#q:focus,#q:focus-visible{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 18%,transparent)}
#q::placeholder{color:var(--ph)}
/* city links — modern pills */
.citychips{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:32px}
.citychip{
font-family:var(--sans);font-size:13px;font-weight:600;line-height:1.4;color:var(--ink);cursor:pointer;
border:1px solid var(--faint);background:var(--card);padding:7px 14px;border-radius:var(--r-pill);
text-decoration:none;transition:.15s;
}
.citychip:hover{color:var(--primary);border-color:var(--primary);transform:translateY(-1px)}
/* the little "+" that adds a dish to the meal calc */
.addbtn{
width:24px;height:24px;border-radius:50%;border:1px solid var(--faint);background:transparent;
color:var(--soft);font-size:15px;line-height:1;cursor:pointer;margin-right:8px;flex-shrink:0;
font-family:var(--sans);display:inline-flex;align-items:center;justify-content:center;
transition:border-color .15s,color .15s,transform .15s;
}
.addbtn:hover{border-color:var(--acc);color:var(--acc);transform:scale(1.15)}
/* budget row (menu page) */
.budgetrow{max-width:700px;margin:12px auto 0;text-align:center;font-size:14px;font-weight:300}
.budgetrow input{
font-family:var(--sans);width:88px;
border:none;border-bottom:var(--hair);border-radius:0;
background:transparent;color:var(--ink);
padding:6px;font-size:15px;text-align:center;outline:none;
appearance:textfield;-moz-appearance:textfield;-webkit-appearance:none;
}
.budgetrow input::-webkit-outer-spin-button,
.budgetrow input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.budgetrow input:focus{border-color:var(--ink)}
.budgetrow input:focus-visible{outline:none;border-color:var(--ink);box-shadow:0 1px 0 0 var(--ink)}
.budgetrow button{
font-family:var(--sans);font-size:12.5px;letter-spacing:1px;line-height:1.4;cursor:pointer;
background:transparent;border:1px solid var(--ink);color:var(--ink);
padding:7px 18px;margin-right:10px;border-radius:2px;
transition:background .2s,color .2s;
}
.budgetrow button:hover{background:var(--ink);color:var(--paper)}
#budgetOut{margin-top:12px;font-size:14.5px;line-height:2;color:var(--soft)}
#budgetOut b{color:var(--ink)}
/* ================ 5 · source badges & small metadata ================= */
.src{
font-size:10.5px;letter-spacing:.3px;line-height:1.4;color:#fff;
background:var(--soft);border:0;padding:4px 11px;border-radius:var(--r-pill);font-weight:600;white-space:nowrap;
}
.src.official{background:var(--ok)}
.src.nomenu{background:var(--bad)}
.cnt{font-size:12px;color:var(--soft);letter-spacing:.2px;font-weight:500}
.diff{margin-right:auto;font-size:10.5px;color:var(--acc);letter-spacing:2px}
.kindtag{
position:absolute;top:12px;inset-inline-start:12px;font-size:10px;letter-spacing:.4px;line-height:1.4;
color:var(--ink);font-weight:600;background:color-mix(in srgb,var(--card) 82%,transparent);
padding:4px 11px;border:0;border-radius:var(--r-pill);backdrop-filter:blur(6px);z-index:2;
}
/* ==================== 6 · restaurant card family ===================== */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:24px}
.rcard{
background:var(--card);border:1px solid var(--faint);cursor:pointer;position:relative;
display:flex;flex-direction:column;border-radius:var(--r);overflow:hidden;
box-shadow:var(--lift);
transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s;
text-decoration:none;color:inherit; /* cards are real links (crawlable) */
}
.rcard:hover,
.rcard:focus-visible{transform:translateY(-6px);box-shadow:var(--lift2)}
/* ---- EVERY tile is a vibrant cuisine COLOUR BLOCK by default ----
So a card is NEVER blank or grey while a photo lazy-loads (or if it fails). ~70 of 108
restaurants have no cover photo anyway; each gets a saturated accent ground + a big
clean white cuisine glyph — one colourful, intentional family (Wolt-style tiles). When
a real cover photo exists it loads ON TOP (.cover) and covers the block. --racc = the
restaurant's accent hue (varied, curated palette). */
.rcard .photo{height:158px;overflow:hidden;border-bottom:1px solid var(--faint);position:relative}
.rcard .photo.brand{
display:flex;align-items:center;justify-content:center;
background:
radial-gradient(125% 130% at 80% 6%, color-mix(in srgb,var(--racc) 60%, #fff) 0%, transparent 46%),
linear-gradient(153deg, color-mix(in srgb,var(--racc) 88%, #fff) 0%, var(--racc) 46%, color-mix(in srgb,var(--racc) 66%, #23140a) 100%);
}
.rcard .photo .cuismark{position:absolute;inset:0;z-index:0;display:flex;align-items:center;justify-content:center}
.rcard .photo.brand .cuismark svg{
width:78px;height:78px;color:rgba(255,255,255,.95);
filter:drop-shadow(0 3px 9px rgba(20,10,4,.24));
transition:transform .45s cubic-bezier(.2,.9,.3,1.4);
}
.rcard:hover .photo.brand .cuismark svg,
.rcard:focus-visible .photo.brand .cuismark svg{transform:scale(1.08) rotate(-3deg)}
/* the real cover photo — laid over the colour block, FULL COLOUR (no grayscale) */
.rcard .photo .cover{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.rcard:hover .photo .cover,
.rcard:focus-visible .photo .cover{transform:scale(1.06)}
/* set by coverFit(): the image is square or portrait, so filling a 2:1 tile would butcher it.
Shown whole on a plaque instead — same treatment as a brand mark, nothing cropped. */
.rcard .photo .cover.cover-contain{
inset:auto;inset-block-start:50%;inset-inline-start:50%;transform:translate(50%,-50%);
width:auto;height:auto;max-width:70%;max-height:74%;object-fit:contain;
background:#fff;border-radius:12px;padding:9px;box-sizing:border-box;
box-shadow:0 6px 20px rgba(20,10,4,.24),0 0 0 1px rgba(20,10,4,.05);
}
.rcard:hover .photo .cover.cover-contain,
.rcard:focus-visible .photo .cover.cover-contain{transform:translate(50%,-50%) scale(1.04)}
/* The restaurant's OWN logo is the subject of a photo-less tile — not a corner chip beside a
generic glyph. It sits on a white plaque because brand marks are drawn for white grounds:
a dark logo laid straight onto a saturated block would disappear. object-fit:contain so no
mark is ever cropped, and a generous min-height so wordmarks and round marks agree. */
.rcard .photo .logoplate{
position:absolute;z-index:2;inset-block-start:50%;inset-inline-start:50%;
transform:translate(50%,-50%); /* RTL-safe centring for an auto-width box */
width:auto;height:auto;max-width:74%;
display:inline-flex;align-items:center;justify-content:center;
background:#fff;border-radius:13px;padding:13px 16px;box-sizing:border-box;
box-shadow:0 6px 20px rgba(20,10,4,.24),0 0 0 1px rgba(20,10,4,.05);
transition:transform .45s cubic-bezier(.2,.9,.3,1.4);
}
/* The plaque HUGS the mark instead of being a fixed slab: a compact wordmark used to sit
marooned in the middle of a large white rectangle, which is what made these read as
cheap. Sizing the image (not the box) keeps every mark optically similar. */
.rcard .photo .logoplate img{width:auto;height:auto;max-width:186px;max-height:66px;object-fit:contain}
.rcard:hover .photo .logoplate,
.rcard:focus-visible .photo .logoplate{transform:translate(50%,-50%) scale(1.04)}
/* with a plaque present the cuisine glyph drops back to a watermark. If the logo 404s, the
script removes .has-logo and the glyph returns to full strength on its own. */
.rcard .photo.has-logo .cuismark svg{opacity:.2;filter:none}
.rcard:hover .photo.has-logo .cuismark svg,
.rcard:focus-visible .photo.has-logo .cuismark svg{transform:none}
@media(max-width:520px){ .rcard .photo .logoplate{padding:11px 14px} .rcard .photo .logoplate img{max-width:160px;max-height:58px} }
/* demoted by logoFit(): a favicon-sized mark, shown at a size it can actually carry */
.rcard .photo .logoplate.logochip{
inset:auto;margin:0;position:absolute;inset-block-end:10px;inset-inline-start:10px;
width:auto;height:auto;min-height:0;max-height:none;
border-radius:9px;padding:5px 7px;
box-shadow:0 3px 11px rgba(20,10,4,.22),0 0 0 1px rgba(20,10,4,.05);
}
.rcard .photo .logoplate.logochip img{max-width:38px;max-height:26px}
.rcard:hover .photo .logoplate.logochip{transform:none}
.rcard .body{padding:16px 18px 14px;display:flex;flex-direction:column;flex:1}
.rcard .top{display:flex;gap:11px;align-items:center}
.rcard .seal{width:40px;height:40px;flex-shrink:0;transition:transform .5s cubic-bezier(.2,.9,.3,1.4)}
.rcard:hover .seal{transform:rotate(15deg)}
/* Titles and subtitles are collected text of wildly different lengths ("תל אביב · בית קפה"
vs "תל אביב · בית קפה — אספרסו בר איטלקי"). Unclamped they wrapped to one line on some
cards and two on others, so no two cards in a row were the same height and their footers
sat at different heights. Both are clamped, and the subtitle RESERVES its two lines so
every card in a row lines up whether or not it needs them. */
.rcard h3{font-size:19.5px;font-weight:700;line-height:1.25;overflow-wrap:break-word;
display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rcard .cty{font-size:12.5px;color:var(--soft);margin-top:2px;font-weight:300;line-height:1.5;
display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
min-height:3em}
.rcard .foot{margin-top:auto;padding-top:12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* the item count always closes the row, so the foot reads the same way on every card */
.rcard .foot .cnt{margin-inline-start:auto;white-space:nowrap}
/* honest median-price chip — accent-tinted pill, real collected prices only */
.rcard .foot .pricechip{font-size:11.5px;font-weight:700;color:var(--brand);background:color-mix(in srgb,var(--racc,#7a1f2b) 12%,var(--paper));border:1px solid color-mix(in srgb,var(--racc,#7a1f2b) 32%,transparent);border-radius:3px;padding:1.5px 7px;white-space:nowrap;line-height:1.55}
.rcard .foot .pricechip .pc-k{font-weight:400;color:var(--soft);font-size:10px}
/* ========================= 7 · page headers ========================== */
/* directory head — a warm, appetizing HERO ZONE holding wordmark, title & search */
.dir-hero{
position:relative;overflow:hidden;margin:12px 0 0;
padding:52px clamp(20px,5vw,60px) 40px;border-radius:28px;
background:
radial-gradient(120% 150% at 88% -22%, color-mix(in srgb,var(--gold) 30%,transparent), transparent 50%),
radial-gradient(115% 135% at 4% 118%, color-mix(in srgb,var(--primary) 22%,transparent), transparent 52%),
linear-gradient(166deg, var(--blush) 0%, var(--cream) 60%, color-mix(in srgb,var(--mint) 45%,var(--cream)) 100%);
border:1px solid color-mix(in srgb,var(--primary) 13%,var(--faint));
box-shadow:var(--lift);
}
.dirhead{text-align:center;padding:0;position:relative;z-index:1}
/* colored-micrography wordmark — "תפריטיה" woven from real dish names */
.dir-wordmark{max-width:min(500px,84%);margin:0 auto 2px}
.micro-wm{width:100%;height:auto;display:block}
.dirhead .k{font-size:11px;letter-spacing:5px;color:var(--primary-d);font-weight:700;text-transform:uppercase}
.dirhead h1{
font-size:clamp(38px,6.2vw,64px);font-weight:900;margin-top:14px;color:var(--ink);
line-height:var(--lh-display);text-wrap:balance;
}
.dirhead .sub{
font-size:15.5px;color:var(--soft);margin-top:13px;max-width:520px;margin-inline:auto;
line-height:1.7;font-weight:400;text-wrap:pretty;
}
/* menu hero */
.hero{text-align:center;padding:48px 0 32px}
.hero .back{font-size:13px;color:var(--soft);cursor:pointer;text-decoration:none;font-weight:300}
.hero .back:hover{color:var(--acc)}
.hero .k{
font-size:11.5px;letter-spacing:5px;color:var(--soft);margin:24px 0 12px;font-weight:400;
display:flex;align-items:center;justify-content:center;gap:10px;
}
.hero .k img{width:22px;height:22px;border-radius:4px}
.hero h1{
font-size:clamp(40px,8vw,78px);font-weight:900;
line-height:var(--lh-display);text-wrap:balance;overflow-wrap:break-word;
}
.hero .meta{
margin-top:16px;font-size:12.5px;letter-spacing:1px;color:var(--soft);
display:flex;justify-content:center;gap:4px 8px;flex-wrap:wrap;font-weight:300;
}
.hero .meta .sep{color:var(--faint)}
/* dish / index / city head */
.dishhead{text-align:center;padding:56px 0 12px}
.dishhead h1{
font-size:clamp(32px,6vw,56px);font-weight:900;
line-height:var(--lh-display);text-wrap:balance;
}
.dishhead .sub2{
font-size:14.5px;color:var(--soft);margin-top:12px;letter-spacing:.3px;
line-height:2.1;font-weight:300;text-wrap:pretty;
}
.dishhead .sub2 b{color:var(--ink);font-size:18px;font-weight:700}
.dishhead .inkbig{color:var(--faint3);margin:0 auto 6px;width:64px;height:64px}
.dishhead .back{font-size:13px;color:var(--soft);text-decoration:none;font-weight:300}
.dishhead .back:hover{color:var(--acc)}
/* report intro (shared header of long-form pages) */
.rep{max-width:660px;margin:0 auto}
.rep h1{
font-size:clamp(34px,6vw,54px);text-align:center;padding:56px 0 12px;font-weight:900;
line-height:var(--lh-display);text-wrap:balance;
}
.rep .sub{text-align:center;font-size:15px;color:var(--soft);margin-bottom:40px;line-height:1.9;font-weight:300}
.rep h2{
font-size:13.5px;letter-spacing:4px;margin:48px 0 16px;font-weight:700;line-height:1.5;
display:flex;align-items:center;gap:16px;
}
.rep h2::after{content:'';flex:1;height:1px;background:var(--faint)}
/* ================= 8 · stat bands (.statline · .numbers) ============= */
/* hairline discipline: the 1px gaps ARE the dividers (container shows
through), so rows that wrap on mobile stay perfectly ruled. */
/* a rich colored stat band — its own zone, big serif numerals in warm ink-red */
.statline{
display:flex;flex-wrap:wrap;gap:0;
background:var(--brand);border:0;border-radius:var(--r);overflow:hidden;
margin:34px 0;box-shadow:var(--lift);
}
.stat{flex:1 1 120px;padding:26px 18px;text-align:center;background:transparent;color:#fff;cursor:default;min-width:0}
.stat + .stat{box-shadow:inset 1px 0 0 rgba(255,255,255,.14)}
.stat .n{font-family:var(--serif);font-size:clamp(30px,4.4vw,44px);font-weight:800;color:#fff;font-variant-numeric:tabular-nums;line-height:1}
.stat .l{font-size:11.5px;letter-spacing:.7px;color:rgba(255,255,255,.82);margin-top:6px;font-weight:500}
.numbers{
display:flex;flex-wrap:wrap;gap:1px;
background:var(--faint);
border-top:var(--hair);border-bottom:var(--hair);
margin:8px auto 0;max-width:700px;
}
.numbers .nb{flex:1 1 110px;padding:13px 16px;text-align:center;background:var(--paper);min-width:0}
.numbers .nv{font-size:21px;font-weight:900;font-variant-numeric:tabular-nums;white-space:nowrap;line-height:1.15}
.numbers .nl{font-size:10px;letter-spacing:1.8px;color:var(--soft);margin-top:3px;font-weight:400}
.typical{max-width:700px;margin:16px auto 0;text-align:center;font-size:14px;color:var(--soft);line-height:1.9;font-weight:300}
.typical b{color:var(--ink);font-weight:700}
/* ============================ 9 · filters ============================ */
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:center;margin:24px 0 12px}
/* ========================= 10 · filmstrip ============================ */
.strip{display:flex;gap:14px;margin:30px 0 4px;overflow:hidden;position:relative;padding:6px 2px 10px}
.strip .ph{
width:186px;height:130px;flex-shrink:0;border:0;padding:0;background:var(--faint2);
border-radius:var(--r-sm);overflow:hidden;box-shadow:var(--lift);
transform:none;transition:transform .3s,box-shadow .3s;position:relative;cursor:pointer;
}
.strip .ph:hover,
.strip .ph:focus-visible{transform:translateY(-5px) scale(1.03);box-shadow:var(--lift2);z-index:2}
.strip .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.strip .ph:hover img{transform:scale(1.06)}
.strip .ph .cap{
position:absolute;bottom:0;right:0;left:0;
background:linear-gradient(to top, rgba(24,18,14,.86), rgba(24,18,14,.30) 62%, transparent);
color:#fff;font-size:10.5px;line-height:1.4;letter-spacing:.2px;padding:18px 9px 6px;text-align:center;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* ================== 11 · courses & dishes (the menu) ================= */
.course{margin-top:56px;opacity:0;transform:translateY(16px);transition:opacity .8s,transform .8s}
.course.vis{opacity:1;transform:none}
.course .head{display:flex;align-items:center;gap:18px;margin-bottom:20px}
.course .head .rule{flex:1;height:1px;background:var(--faint)}
.course .head h2{font-size:15px;letter-spacing:6px;font-weight:700;white-space:nowrap;line-height:1.5}
.items{columns:2;column-gap:64px;column-rule:var(--hair2)}
.dish{break-inside:avoid;position:relative;padding:12px 6px 14px;border-radius:3px;transition:background .25s}
.dish:hover{background:rgba(0,0,0,.028)}
.dish .row1{display:flex;align-items:center;gap:12px}
.dish .seal{width:34px;height:34px;flex-shrink:0}
.dish .nm{font-size:17.5px;font-weight:700;min-width:0;line-height:1.35;overflow-wrap:break-word}
.dish .dots{flex:1;border-bottom:1.5px dotted var(--faint);margin:0 8px;min-width:16px;transform:translateY(-4px)}
.dish .pr{font-size:16px;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.dish .pr.na{color:var(--mut);font-weight:300;font-size:12.5px;letter-spacing:.5px}
.dish .ds{font-size:13px;color:var(--soft);line-height:1.65;margin:5px 46px 0 0;font-weight:300}
/* ================ 12 · list rows (.drow · .trow · .tbar) ============= */
.drows{max-width:660px;margin:36px auto 0}
.drow{
display:flex;align-items:baseline;gap:12px;padding:12px 6px;
border-bottom:var(--hair2);cursor:pointer;transition:background .2s;
text-decoration:none;color:inherit; /* rows are real links (crawlable) */
}
.drow:hover,
.drow:focus-visible{background:var(--wash)}
.drow .dp{font-size:19px;font-weight:900;min-width:64px;font-variant-numeric:tabular-nums;line-height:1.3}
.drow .dp.na{color:var(--mut);font-weight:300;font-size:12px}
.drow .dn{font-weight:700;font-size:16px;overflow-wrap:break-word}
.drow .dr2{color:var(--soft);font-size:13px;font-weight:300}
.drow .dcity{margin-right:auto;font-size:11.5px;color:var(--soft);letter-spacing:.5px;white-space:nowrap;font-weight:300}
.transtag{cursor:pointer}
.transtag:hover{color:var(--acc)}
.trow{
display:flex;align-items:baseline;gap:12px;padding:10px 6px;
border-bottom:var(--hair2);cursor:pointer;transition:background .2s;
}
.trow:hover,
.trow:focus-visible{background:var(--wash)}
.trow .tsc{font-size:18px;font-weight:900;min-width:74px;font-variant-numeric:tabular-nums;line-height:1.3}
.trow .tnm{font-weight:700}
.trow .tdet{margin-right:auto;font-size:11.5px;color:var(--soft);letter-spacing:.3px;text-align:left;font-weight:300}
.tbar{height:3px;background:var(--faint2);margin-top:4px;position:relative}
.tbar i{position:absolute;right:0;top:0;bottom:0;background:var(--acc)}
/* ================= 13 · dish-index grid (.dixgrid) =================== */
.dixgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin-top:36px}
.dix{
border:1px solid var(--ink);background:var(--card);padding:20px 18px 16px;
cursor:pointer;text-align:center;
box-shadow:var(--lift);
transition:transform .2s,box-shadow .2s;
display:block;text-decoration:none;color:inherit; /* cells are real links (crawlable) */
}
.dix:hover,
.dix:focus-visible{transform:translateY(-4px);box-shadow:var(--lift2)}
.dix .inkw{width:44px;height:44px;margin:0 auto 8px;color:var(--acc2)}
.dix .nm2{font-size:19px;font-weight:700;line-height:1.3}
.dix .med{font-size:24px;font-weight:900;margin-top:6px;font-variant-numeric:tabular-nums;line-height:1.15}
.dix .meta2{font-size:11.5px;color:var(--soft);margin-top:4px;font-weight:300}
.dix .rng{font-size:11px;color:var(--soft);font-weight:300}
/* ============== 14 · report graphics (.bar · .plist) ================= */
.bar{display:flex;align-items:center;gap:12px;margin-bottom:8px;font-size:13.5px}
.bar .bl{width:140px;flex-shrink:0;line-height:1.4}
.bar .bt{flex:1;height:16px;background:var(--faint2);position:relative}
.bar .bt i{position:absolute;right:0;top:0;bottom:0;background:var(--ink);opacity:.85}
.bar .bn{width:66px;text-align:left;font-variant-numeric:tabular-nums;color:var(--soft);font-size:12.5px}
.plist{list-style:none}
.plist li{
padding:10px 0;border-bottom:var(--hair2);font-size:13.5px;line-height:1.7;
display:flex;gap:12px;align-items:baseline;font-weight:300;
}
.plist li b{font-weight:700}
.plist li .pc{font-size:11.5px;color:var(--acc);font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:.5px}
/* ============ 15 · provenance & footnotes (honesty chrome) =========== */
.heroPhoto{
max-width:720px;margin:32px auto 0;border-radius:var(--r);overflow:hidden;
box-shadow:var(--lift);
}
.heroPhoto img{width:100%;height:300px;object-fit:cover;display:block;transition:transform .5s}
.heroPhoto:hover img{transform:scale(1.03)}
.heroPhoto .cap{font-size:10.5px;color:var(--soft);letter-spacing:.5px;line-height:1.6;padding:6px 4px 2px;font-weight:300}
.heroPhoto .cap a{color:var(--acc);text-decoration:none}
.heroPhoto .cap a:hover{text-decoration:underline}
.srcline{
margin:24px auto 0;max-width:600px;font-size:13px;color:var(--soft);
border:var(--hair);padding:12px 20px;line-height:1.8;background:var(--card);font-weight:300;
overflow-wrap:break-word;
}
.srcline b{color:var(--ink);font-weight:700}
.srcline a{color:var(--acc);text-decoration:none}
.srcline a:hover{text-decoration:underline}
.probbox{
margin:12px auto 0;max-width:600px;font-size:12.5px;color:var(--soft);text-align:right;
background:var(--faint2);padding:12px 20px;line-height:1.9;font-weight:300;
}
.probbox .pt{font-size:10.5px;letter-spacing:3px;color:var(--acc);margin-bottom:6px;text-align:center;font-weight:500}
.flourish{margin:32px auto 0;width:200px;display:block}
.caveat{
max-width:660px;margin:24px auto 0;text-align:center;
font-size:12.5px;color:var(--soft);font-style:normal;line-height:1.9;font-weight:300;
text-wrap:pretty;
}
.faqsec{max-width:660px;margin:64px auto 0}
.faqsec .qa{padding:14px 0;border-bottom:var(--hair2)}
.faqsec .q{font-weight:700;font-size:16px;line-height:1.5}
.faqsec .a{font-size:14px;color:var(--soft);margin-top:5px;line-height:1.8;font-weight:300}
.menuFooter{margin-top:64px;text-align:center;font-size:12.5px;color:var(--soft);line-height:2.3;font-weight:300}
.menuFooter a{color:var(--acc);cursor:pointer;text-decoration:none}
.menuFooter a:hover{text-decoration:underline}
/* ================= 16 · ink illustrations & seals ==================== */
.ink{stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.seal svg{display:block;width:100%;height:100%}
.inkw svg,.inkbig svg,.noimg svg{display:block}
/* drawn UI line-icons (never emoji) — sized in em, coloured by currentColor */
.ico{
width:1em;height:1em;display:inline-block;vertical-align:-.14em;flex-shrink:0;
fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}
/* ================ 17 · motion · prefers-reduced-motion =============== */
@media (prefers-reduced-motion: reduce){
*,*::before,*::after{
animation-duration:.01ms !important;
animation-iteration-count:1 !important;
transition-duration:.01ms !important;
}
html{scroll-behavior:auto}
#view{animation:none}
.course{opacity:1;transform:none}
.rcard:hover,.rcard:focus-visible,
.dix:hover,.dix:focus-visible,
.strip .ph:hover,.strip .ph:focus-visible{transform:none}
.rcard:hover .seal{transform:none}
.addbtn:hover{transform:none}
.btn:active{transform:none}
}
/* ==================== 18 · mobile — flawless at 390 ================== */
@media (max-width:760px){
.items{columns:1;column-rule:none}
}
@media (max-width:640px){
.wrap{padding:0 16px calc(76px + env(safe-area-inset-bottom,0px))}
/* masthead: brand row, nav row, dateline row */
.mast{gap:6px 14px;padding:16px 0 10px}
.mast .plat{font-size:16px}
.mast a.lnk{font-size:12.5px}
.mast .issue{flex-basis:100%;order:10;margin-top:2px}
/* headers */
.dirhead{padding:40px 0 8px}
.dirhead h1{font-size:clamp(34px,10.5vw,46px)}
.hero{padding:36px 0 24px}
.hero .k{margin:20px 0 10px}
.hero h1{font-size:clamp(34px,10vw,48px)}
.dishhead{padding:40px 0 12px}
.dishhead h1{font-size:clamp(28px,8.5vw,38px)}
.dishhead .inkbig{width:52px;height:52px}
.rep h1{font-size:clamp(28px,8.5vw,38px);padding:40px 0 10px}
/* photo & bands */
.heroPhoto{margin-top:24px;padding:5px}
.heroPhoto img{height:210px}
.numbers .nb{flex-basis:33%;padding:10px 8px}
.numbers .nv{font-size:18px}
.stat{flex-basis:33%;padding:12px 8px}
.stat .n{font-size:24px}
.stat .l{letter-spacing:1.5px}
/* controls — 16px inputs so iOS never zooms the page */
#q{flex:1 1 100%;min-width:0;font-size:16px}
.budgetrow input{font-size:16px}
/* filmstrip becomes a swipeable shelf */
.strip{overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;padding-bottom:8px;scrollbar-width:none}
.strip::-webkit-scrollbar{display:none}
.strip .ph{scroll-snap-align:center}
/* menu body */
.course{margin-top:44px}
.course .head{gap:12px}
.course .head h2{letter-spacing:4px}
/* rows */
.drow{flex-wrap:wrap;row-gap:2px}
.drow .dp{min-width:56px;font-size:17px}
.trow{flex-wrap:wrap;row-gap:2px}
.bar .bl{width:104px;font-size:12px}
.bar .bn{width:56px;font-size:11.5px}
/* provenance */
.srcline{padding:10px 14px}
.probbox{padding:12px 14px}
.menuFooter{margin-top:48px}
.faqsec{margin-top:48px}
/* calc bar spans the bottom, wraps politely, honours the home bar */
#calcbar{
left:8px;right:8px;transform:translateY(110%);
white-space:normal;flex-wrap:wrap;justify-content:center;text-align:center;
gap:8px 12px;font-size:13px;
padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));
border-radius:3px 3px 0 0;
}
#calcbar.show{transform:translateY(0)}
#toast{bottom:20px}
footer{flex-direction:column;align-items:center;text-align:center;gap:4px}
}
@media (max-width:480px){
.cards{gap:16px}
.dixgrid{grid-template-columns:repeat(2,1fr);gap:10px}
.dix{padding:14px 10px 12px}
.dix .inkw{width:36px;height:36px}
.dix .nm2{font-size:16px}
.dix .med{font-size:20px}
.dishhead .sub2{font-size:13.5px}
.filters{gap:6px}
.fchip{padding:6px 12px;font-size:12px}
}
/* ============ 19 · print — an honest paper menu, black on white ====== */
@page{margin:14mm}
@media print{
/* the whole palette collapses to ink on paper */
:root{
--paper:#fff;--ink:#000;--soft:#1a1a1a;
--faint:#999;--faint2:#ccc;--acc:#000;
--card:#fff;--wash:#fff;--mut:#777;--ph:#777;
}
html{background:#fff}
body{background:#fff;color:#000}
/* hide the chrome; keep the content and its provenance */
.mast,.thinrule,.filters,.citychips,.strip,.budgetrow,.addbtn,
#calcbar,.menuFooter,footer,#toast,.back,.heroPhoto,.faqsec{display:none !important}
.wrap{max-width:none;padding:0}
#view{animation:none;min-height:0}
/* everything is visible, nothing floats or lifts */
.course{opacity:1;transform:none;transition:none;margin-top:28px}
.rcard,.dix,.heroPhoto{box-shadow:none}
.rcard:hover,.dix:hover{transform:none}
/* tidy page breaks */
.course .head{break-after:avoid}
h1,h2{break-after:avoid}
.dish,.qa,.drow,.trow,.bar,.rcard,.dix,.plist li{break-inside:avoid}
/* tighter sheet */
.hero{padding:8px 0 16px}
.dirhead,.dishhead{padding:8px 0}
.rep h1{padding:8px 0 10px}
.dish{padding:6px 2px 8px}
.items{column-gap:44px;column-rule:1px solid #ccc}
/* provenance prints with its address, so the sheet stays verifiable */
.srcline{border-color:#000;background:#fff;margin-top:16px}
.srcline a[href]::after{content:" (" attr(href) ")";font-size:9px;color:#333;word-break:break-all}
.probbox{background:#fff;border:1px solid #ccc}
a{text-decoration:none}
/* data bars must survive the printer's background-stripping */
.bar .bt i,.tbar i{print-color-adjust:exact;-webkit-print-color-adjust:exact}
/* seals & flourishes print in pure ink */
#view svg *[stroke]{stroke:#000}
}
/* =====================================================
css/directory.css — home/directory view only.
Additive to base.css; every new class is dir- prefixed
and everything is scoped under the .dir-home wrapper,
so nothing leaks into other views.
===================================================== */
/* ---------- keyboard focus: visible, calm, on the paper ---------- */
.dir-home :is(.fchip, .citychip, .rcard, .ph, .stat, #q):focus-visible{
outline:2px solid var(--acc);
outline-offset:3px;
border-radius:2px;
}
/* ---------- filmstrip: real anchors, swipeable, edge-faded ----------
base.css draws the tilted paper frames (.strip .ph); dir-scroll only
turns the row into a horizontal scroller with a soft fade toward the
end, so the cut-off photos read as "there is more" instead of a crop. */
.dir-home .strip a.ph{display:block;color:inherit;text-decoration:none}
.dir-scroll{
overflow-x:auto;
scrollbar-width:none;
-ms-overflow-style:none;
-webkit-overflow-scrolling:touch;
scroll-snap-type:x proximity;
/* RTL: scroll starts at the right — keep the start crisp (14px)
and fade the far end (30px) where more photos wait. */
-webkit-mask-image:linear-gradient(to left, transparent 0, #000 14px, #000 calc(100% - 30px), transparent 100%);
mask-image:linear-gradient(to left, transparent 0, #000 14px, #000 calc(100% - 30px), transparent 100%);
}
.dir-scroll::-webkit-scrollbar{display:none}
.dir-scroll .ph{scroll-snap-align:center}
/* ---------- search: the "/" keyboard hint ---------- */
.dir-qwrap{position:relative;display:inline-flex;align-items:center}
.dir-qwrap #q{padding-left:28px}
.dir-kbd{
position:absolute;left:5px;top:50%;transform:translateY(-50%);
font-family:"Heebo","Segoe UI",Arial,sans-serif;font-size:10.5px;line-height:1;
color:#a8a294;border:1px solid var(--faint);border-radius:3px;padding:3px 6px;
pointer-events:none;transition:opacity .15s;
}
.dir-qwrap:focus-within .dir-kbd,
.dir-qwrap.dir-hasq .dir-kbd{opacity:0}
@media (hover:none){
.dir-kbd{display:none}
.dir-qwrap #q{padding-left:4px}
}
/* ---------- filters: group divider + quiet sort row ---------- */
.dir-sep{color:var(--faint)}
.dir-sortrow{margin-top:2px}
.dir-sortlbl{font-size:11px;letter-spacing:2px;color:var(--soft)}
/* ---------- live result count ---------- */
.dir-count{
text-align:center;font-size:12px;font-weight:300;color:var(--soft);
letter-spacing:.8px;margin:0 0 18px;font-variant-numeric:tabular-nums;
min-height:18px;
}
/* ---------- statline entries that double as links ---------- */
.dir-home a.stat{text-decoration:none;cursor:pointer}
.dir-home a.stat:hover .n,
.dir-home a.stat:hover .l{color:var(--acc)}
/* ---------- city chips as anchors + the expander ---------- */
.dir-home a.citychip{text-decoration:none}
.dir-home a.citychip[hidden]{display:none}
.dir-more{color:var(--acc);border-bottom-color:transparent;font-weight:500}
/* ---------- empty state: nothing under the cloche ---------- */
.dir-empty{text-align:center;padding:54px 0 28px}
.dir-empty[hidden]{display:none}
.dir-ink{width:64px;height:64px;margin:0 auto 16px;color:#c9c2b2}
.dir-et{font-size:clamp(22px,4vw,30px);font-weight:700;line-height:1.25}
.dir-ex{
font-family:"Heebo","Segoe UI",Arial,sans-serif;
font-size:13.5px;font-weight:300;color:var(--soft);line-height:2;
margin:10px auto 20px;max-width:430px;
}
/* ---------- calm for those who ask for it ---------- */
@media (prefers-reduced-motion:reduce){
.dir-scroll{scroll-snap-type:none}
.dir-home .strip .ph,
.dir-home .strip .ph img{transition:none}
}
/* ---------- the finder strip: dish search first — the hero's primary action ---------- */
.dir-home .dir-find{max-width:580px;margin:26px auto 0;position:relative;z-index:2}
.dir-home .dir-findbar{
display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;
border:1px solid color-mix(in srgb,var(--primary) 15%,var(--faint));
background:var(--card);border-radius:var(--r-pill);
padding:9px 9px 9px 22px;box-shadow:0 8px 24px rgba(34,28,23,.10),0 2px 6px rgba(34,28,23,.06);
transition:transform .18s,box-shadow .18s,border-color .18s;
}
.dir-home .dir-findbar:hover,
.dir-home .dir-findbar:focus-visible{transform:translateY(-2px);box-shadow:0 14px 34px rgba(34,28,23,.15),0 3px 8px rgba(34,28,23,.08);border-color:var(--primary)}
.dir-home .dir-findmag{width:20px;height:20px;stroke:var(--primary);stroke-width:1.9;fill:none;stroke-linecap:round;flex-shrink:0}
.dir-home .dir-findph{flex:1;min-width:0;font-size:15px;color:var(--soft);font-weight:400;letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:start}
.dir-home .dir-findgo{font-size:12px;color:#fff;background:var(--primary);font-weight:700;letter-spacing:.3px;white-space:nowrap;padding:9px 16px;border-radius:var(--r-pill);transition:background .18s}
.dir-home .dir-findbar:hover .dir-findgo{background:var(--primary-d)}
.dir-home .dir-findchips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:14px}
.dir-home .dir-findchip{
text-decoration:none;color:var(--ink);font-family:var(--sans);font-size:12px;letter-spacing:.2px;
border:1px solid var(--faint);border-radius:var(--r-pill);padding:6px 13px;background:var(--card);
display:inline-flex;align-items:center;gap:7px;transition:color .15s,border-color .15s,background .15s,transform .15s;
box-shadow:0 1px 2px rgba(34,28,23,.05);
}
.dir-home .dir-findchip:hover{color:var(--primary-d);border-color:var(--primary);background:var(--blush);transform:translateY(-1px)}
.dir-home .dir-findn{font-size:9.5px;color:var(--primary-d);background:var(--blush);border-radius:var(--r-pill);padding:1px 7px;font-weight:700}
@media (max-width:640px){
.dir-home .dir-find{margin-top:18px}
.dir-home .dir-findph{font-size:13.5px}
.dir-home .dir-findbar{padding-left:16px}
}
@media print{.dir-home .dir-find{display:none}}
/* ---------- "more than a menu list" — the original-value showcase, high on the home ---------- */
.dir-home .dir-value{max-width:var(--maxw);margin:34px auto 0}
.dir-home .dir-value-h{text-align:center;font-size:12px;letter-spacing:4px;color:var(--primary-d);font-weight:700;margin-bottom:16px}
.dir-home .dir-value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.dir-home .dir-vcard{
display:flex;flex-direction:column;text-decoration:none;color:inherit;
background:var(--card);border:1px solid var(--faint);border-top:3px solid var(--primary);
border-radius:var(--r);padding:18px 20px 16px;box-shadow:var(--lift);
transition:transform .18s,box-shadow .18s;
}
.dir-home .dir-vcard:hover,.dir-home .dir-vcard:focus-visible{transform:translateY(-4px);box-shadow:var(--lift2)}
.dir-home .dv-1{border-top-color:var(--teal)}
.dir-home .dv-2{border-top-color:var(--primary)}
.dir-home .dv-3{border-top-color:var(--gold)}
.dir-home .dir-vnum{font-family:var(--serif);font-size:31px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.dir-home .dv-1 .dir-vnum{color:var(--teal)}
.dir-home .dv-2 .dir-vnum{color:var(--primary-d)}
.dir-home .dv-3 .dir-vnum{color:#8a6a1e}
.dir-home .dir-vt{font-size:16px;font-weight:700;margin-top:8px}
.dir-home .dir-vd{font-size:12.5px;color:var(--soft);line-height:1.65;font-weight:300;margin-top:4px;flex:1}
.dir-home .dir-varr{font-size:11.5px;color:var(--primary-d);font-weight:600;margin-top:10px}
.dir-home .dir-vcard:hover .dir-varr{text-decoration:underline}
@media(max-width:760px){ .dir-home .dir-value-grid{grid-template-columns:1fr} }
/* =====================================================
menu.css — styles owned by the menu view (views/menu.js).
The baseline menu look (.hero .heroPhoto .srcline .probbox
.numbers .typical .budgetrow .course .dish .addbtn .faqsec
.menuFooter) lives in base.css and is NOT restyled here.
Every class below is menu- prefixed.
===================================================== */
/* ---------- sticky category-jumper: a dropdown, not an overflowing tab row ----------
A compact pill shows the current section + a "N קטגוריות" count; clicking opens a
scrollable multi-column panel of EVERY category (name · count) to jump to. Comfortable
for 2 categories or 42 — you can always see them all. */
.menu-qn2{
position:fixed;top:0;right:0;left:0;z-index:40;
background:color-mix(in srgb,var(--card) 90%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
border-bottom:1px solid var(--faint);box-shadow:0 4px 16px rgba(28,25,21,.06);
transform:translateY(-110%);visibility:hidden;transition:transform .28s ease, visibility .28s;
}
.menu-qn2.menu-qn-show{transform:translateY(0);visibility:visible}
.menu-qn2-in{max-width:980px;margin:0 auto;padding:8px 26px;position:relative}
.menu-qn2-toggle{
display:flex;align-items:center;gap:11px;width:100%;
background:var(--card);border:1px solid var(--faint);border-radius:var(--r-pill);
padding:8px 16px;cursor:pointer;font-family:var(--sans);text-align:start;
box-shadow:0 1px 3px rgba(34,28,23,.05);transition:border-color .15s,box-shadow .15s;
}
.menu-qn2-toggle:hover{border-color:var(--primary);box-shadow:var(--lift)}
.menu-qn2-burger{width:18px;height:18px;flex-shrink:0;stroke:var(--primary);stroke-width:2;fill:none;stroke-linecap:round}
.menu-qn2-cur{flex:1;min-width:0;font-size:14px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.menu-qn2-count{font-size:11px;font-weight:600;color:var(--primary-d);background:var(--blush);border-radius:var(--r-pill);padding:2px 10px;white-space:nowrap;flex-shrink:0}
.menu-qn2-chev{width:18px;height:18px;flex-shrink:0;stroke:var(--soft);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.menu-qn2-open .menu-qn2-chev{transform:rotate(180deg)}
.menu-qn2-panel{
position:absolute;top:calc(100% - 2px);right:26px;left:26px;z-index:2;
background:var(--card);border:1px solid var(--faint);border-radius:var(--r);
box-shadow:var(--lift2);padding:8px;margin-top:4px;
max-height:min(64vh,440px);overflow-y:auto;
display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:3px;
}
.menu-qn2-item{
display:flex;align-items:center;gap:9px;width:100%;text-align:start;
background:none;border:none;border-radius:var(--r-sm);padding:9px 12px;cursor:pointer;
font-family:var(--sans);font-size:13.5px;color:var(--soft);transition:background .12s,color .12s;
}
.menu-qn2-item:hover{background:var(--wash);color:var(--ink)}
.menu-qn2-ico{width:17px;height:17px;flex-shrink:0;color:var(--soft2);opacity:.85}
.menu-qn2-ico svg{width:100%;height:100%;display:block}
.menu-qn2-t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.menu-qn2-n{font-size:10px;font-weight:700;color:var(--soft);background:var(--faint2);border-radius:var(--r-pill);padding:1px 7px;flex-shrink:0;font-variant-numeric:tabular-nums}
.menu-qn2-item.menu-qn2-on{background:var(--blush);color:var(--primary-d);font-weight:700}
.menu-qn2-item.menu-qn2-on .menu-qn2-ico{color:var(--primary);opacity:1}
.menu-qn2-item.menu-qn2-on .menu-qn2-n{color:#fff;background:var(--primary)}
/* ---------- hero meta links (city / transparency) ---------- */
.menu-metalink{
text-decoration:none;cursor:pointer;
border-bottom:1px dotted var(--faint);
transition:color .15s, border-color .15s;
}
.menu-metalink:hover{color:var(--acc);border-color:var(--acc)}
/* ---------- "התפריט במספרים" kicker ---------- */
.menu-numtitle{
text-align:center;font-size:10.5px;letter-spacing:4px;
color:var(--soft);font-weight:400;margin:26px 0 6px;
}
/* ---------- per-category median whisper in the course head ---------- */
.menu-medwhisper{
font-size:10.5px;letter-spacing:1.5px;color:var(--soft);
font-weight:400;white-space:nowrap;cursor:default;
}
/* ---------- table total + diners stepper in the typical line ---------- */
.menu-tablerow{
display:inline-flex;align-items:center;gap:7px;
margin-top:6px;flex-wrap:wrap;justify-content:center;
}
.menu-din{
width:22px;height:22px;border-radius:50%;border:1px solid var(--faint);
background:transparent;color:var(--soft);
font-family:"Heebo",sans-serif;font-size:14px;line-height:1;cursor:pointer;
transition:all .15s;
}
.menu-din:hover{border-color:var(--acc);color:var(--acc);transform:scale(1.1)}
.menu-dinN{
min-width:18px;text-align:center;font-weight:700;color:var(--ink);
font-variant-numeric:tabular-nums;
}
/* ---------- budget checker: combo rows ---------- */
.menu-combos{
margin-top:12px;display:flex;flex-direction:column;gap:8px;align-items:center;
}
.menu-combo{
width:100%;max-width:560px;background:#fff;border:1px solid var(--faint);
padding:9px 16px;text-align:right;font-size:13.5px;line-height:1.9;color:var(--soft);
}
.menu-combo b{color:var(--ink)}
.menu-combo.menu-combo-best{border-color:var(--primary);box-shadow:var(--lift)}
.menu-combo-tag{
display:block;font-size:9.5px;letter-spacing:2.5px;color:var(--acc);margin-bottom:2px;
}
/* ---------- FAQ section head ---------- */
.menu-faqhead{display:flex;align-items:center;gap:18px;margin-bottom:10px}
.menu-faqhead h2{font-size:13.5px;letter-spacing:5px;font-weight:700;white-space:nowrap}
.menu-faqrule{flex:1;height:1px;background:var(--faint)}
/* ---------- footer action buttons styled like the footer links ---------- */
.menu-linkbtn{
background:none;border:none;padding:0;font:inherit;letter-spacing:inherit;
color:var(--acc);cursor:pointer;
}
.menu-linkbtn:hover{text-decoration:underline}
/* ---------- honest empty state ---------- */
.menu-empty{
text-align:center;padding:50px 0;color:var(--soft);
font-style:normal;font-size:17px;line-height:2.2;
}
.menu-empty-ink{width:70px;height:70px;margin:0 auto 14px;color:#c9c2b2}
/* ---------- keyboard focus ---------- */
.menu-qn2-toggle:focus-visible,
.menu-qn2-item:focus-visible,
.menu-din:focus-visible,
.menu-linkbtn:focus-visible,
.menu-metalink:focus-visible{
outline:2px solid var(--acc);outline-offset:2px;border-radius:2px;
}
/* ---------- print: the sheet stays a clean document ---------- */
@media print{
.menu-qn2,.menu-din,.menu-linkbtn{display:none !important}
.menu-combo.menu-combo-best{box-shadow:none}
}
/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
.menu-qn2{transition:none}
.menu-qn2-chev{transition:none}
.menu-din:hover{transform:none}
}
/* ---------- mobile (flawless at 390px) ---------- */
@media (max-width:640px){
.menu-qn2-in{padding:8px 16px}
.menu-qn2-panel{right:16px;left:16px;grid-template-columns:1fr}
.menu-combo{font-size:12.5px;padding:8px 12px}
}
/* (removed dead .menu-thumb rules — never emitted; dish media is .menu-photo / .menu-seal) */
/* ============================================================
Menu-page detail additions (national context, tags, strip,
corpus context, "לפני שיוצאים" panel)
============================================================ */
/* national price context per dish */
.menu-natl{font-size:12px;color:var(--soft);font-weight:300;margin:4px 46px 0 0;line-height:1.5}
.menu-natl b{color:var(--ink);font-weight:700}
.menu-natl a{color:var(--acc);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s;white-space:nowrap}
.menu-natl a:hover{border-color:var(--acc)}
/* dietary tags derived from published text */
.menu-tags{display:block;margin:5px 46px 0 0}
.menu-tag{
display:inline-block;font-size:10.5px;letter-spacing:.5px;padding:2px 9px;margin-left:6px;
border:1px solid var(--faint);border-radius:2px;color:var(--soft);background:#fff;
}
.menu-tag-vegan{border-color:#3d7a4f;color:#3d7a4f}
.menu-tag-veg{border-color:#3d7a4f;color:#3d7a4f}
.menu-tag-spicy{border-color:#9c3c30;color:#9c3c30}
.menu-tag-gf{border-color:#8a6a1e;color:#8a6a1e}
/* corpus context line */
.menu-context{
max-width:680px;margin:10px auto 0;text-align:center;font-size:13.5px;color:var(--soft);font-weight:300;line-height:1.7;
}
.menu-context b{color:var(--ink);font-weight:700}
.menu-context a{color:var(--acc);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s}
.menu-context a:hover{border-color:var(--acc)}
/* mini price-distribution strip */
.menu-ms{max-width:560px;margin:14px auto 0}
.menu-ms svg{display:block;width:100%;height:auto;overflow:visible}
.menu-ms-ax{stroke:var(--faint);stroke-width:1.4}
.menu-ms-dot{fill:var(--ink);opacity:.55}
.menu-ms-med{stroke:var(--acc);stroke-width:1.6}
.menu-ms-medlbl{font:700 11px "Heebo",sans-serif;fill:var(--acc)}
.menu-ms-end{font:400 10.5px "Heebo",sans-serif;fill:#8a8478;letter-spacing:.3px}
/* "לפני שיוצאים" panel */
.menu-beforego{
max-width:560px;margin:22px auto 0;padding:20px 24px;background:#fff;
border:1px solid var(--faint);border-radius:var(--r);box-shadow:var(--lift);
}
.menu-bg-title{font-size:13px;letter-spacing:5px;font-weight:700;text-align:center;margin-bottom:14px}
.menu-bg-row{display:flex;gap:11px;align-items:flex-start;padding:7px 0;border-top:1px solid var(--faint2);font-size:14.5px;line-height:1.6}
.menu-bg-row:first-of-type{border-top:none}
.menu-bg-ic{flex-shrink:0;width:20px;text-align:center;opacity:.85}
.menu-bg-row a{color:var(--acc);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s}
.menu-bg-row a:hover{border-color:var(--acc)}
.menu-bg-open{color:#3d7a4f;font-weight:700}
.menu-bg-closed{color:#9c3c30;font-weight:700}
.menu-bg-note{color:#8a6a1e;font-weight:700}
.menu-bg-hnote{display:block;margin-top:5px;font-size:12px;color:var(--soft);font-weight:300;line-height:1.6}
.menu-bg-sub{font-size:13px;color:var(--soft);font-weight:300}
.menu-bg-hours-t{
display:inline-block;margin-right:8px;font-family:"Heebo",sans-serif;font-size:12px;
background:none;border:none;color:var(--acc);cursor:pointer;padding:0;
}
.menu-bg-hours{margin-top:8px;border:1px solid var(--faint2);border-radius:3px;overflow:hidden}
.menu-bg-hrow{display:flex;justify-content:space-between;padding:5px 12px;font-size:13px;color:var(--soft);font-weight:300;border-top:1px solid var(--faint2)}
.menu-bg-hrow:first-child{border-top:none}
.menu-bg-hrow-today{background:var(--faint2);color:var(--ink);font-weight:700}
.menu-bg-stamp{margin-top:12px;font-size:11px;color:var(--soft);font-weight:300;line-height:1.6;text-align:center;font-style:normal}
@media(max-width:640px){
.menu-natl,.menu-tags{margin-right:0}
.menu-beforego{padding:16px 16px}
}
/* ============================================================
THE PRINTED-MENU CARD — the courses, framed like a real menu
Warm cream stock · double-rule frame in the restaurant accent ·
crest + fleuron masthead · centered menu-style section heads ·
refined serif dish setting · "בתאבון" footer.
============================================================ */
.menu-card{
position:relative;max-width:660px;margin:40px auto 0;
padding:46px 48px 40px;
background:#fdfaf2; /* the menu sheet: a shade brighter than the warm page, so it lifts */
background-image:
radial-gradient(rgba(120,100,60,.035) 1px, transparent 1px),
radial-gradient(rgba(120,100,60,.03) 1px, transparent 1px);
background-size:7px 7px, 11px 11px;
background-position:0 0, 3px 4px;
border:1px solid var(--ink);
box-shadow:0 22px 55px rgba(28,25,21,.16), 0 1px 0 rgba(28,25,21,.5);
}
.menu-card::before{ /* inner accent hairline — the classic double frame */
content:'';position:absolute;inset:8px;pointer-events:none;
border:1px solid color-mix(in srgb, var(--acc) 42%, transparent);
}
.menu-card::after{ /* faint corner flourishes */
content:'';position:absolute;inset:8px;pointer-events:none;
}
/* masthead */
.menu-card-head{text-align:center;margin-bottom:6px}
.menu-crest{width:50px;height:50px;margin:0 auto 12px;opacity:.9}
.menu-card-kicker{font-size:11.5px;letter-spacing:7px;color:var(--soft);font-weight:500;margin-right:-7px}
.menu-cardname{
font-family:"Frank Ruhl Libre","David Libre",serif;
font-size:clamp(28px,5.2vw,40px);font-weight:700;letter-spacing:.5px;line-height:1.12;margin-top:8px;
}
.menu-cuisine{font-size:12px;letter-spacing:3.5px;color:var(--soft);font-weight:400;margin-top:9px;margin-right:-3.5px}
.menu-head-stats{font-size:12px;letter-spacing:1px;color:var(--soft);font-weight:400;margin-top:12px;font-variant-numeric:tabular-nums}
.menu-fleuron{display:block;width:170px;height:20px;margin:16px auto 4px;stroke:var(--acc);fill:var(--acc)}
.menu-fleuron line{stroke:var(--acc);stroke-width:1}
.menu-fleuron path[fill="none"]{stroke:var(--acc);stroke-width:1}
/* section (course) headers, menu style: centered, letter-spaced, short accent rules */
.menu-card .course{margin-top:40px}
.menu-card .course:first-of-type{margin-top:30px}
.menu-card .course .head{justify-content:center;gap:16px;flex-wrap:wrap;margin-bottom:6px}
.menu-card .course .head h2{
font-size:16px;letter-spacing:6px;font-weight:700;margin-right:-6px;
}
.menu-card .course .head .rule{flex:0 1 66px;height:1px;background:var(--acc);opacity:.45}
.menu-card .menu-medwhisper{
flex-basis:100%;order:5;text-align:center;margin:2px 0 12px;
font-size:11.5px;letter-spacing:1px;color:var(--soft);font-weight:300;
}
/* the dishes, set like a menu — one elegant reading column so names
(including long English ones) sit on one baseline with a proper dotted leader */
.menu-card .items{columns:1;max-width:520px;margin:0 auto}
.menu-card .dish{padding:12px 2px 14px}
.menu-card .dish:hover{background:transparent} /* a printed menu doesn't light up */
.menu-card .dish .nm{font-size:18px;font-weight:600;letter-spacing:.15px;color:var(--ink);flex:0 1 auto}
.menu-card .dish:hover .nm{color:var(--ink)}
.menu-card .dish .pr{font-family:"Frank Ruhl Libre",serif;font-weight:600;font-size:17px}
.menu-card .dish .pr.na{font-family:"Heebo",sans-serif}
.menu-card .dish .dots{border-bottom:1px dotted color-mix(in srgb, var(--ink) 32%, transparent);transform:translateY(-5px)}
.menu-card .dish .ds{
font-family:"Frank Ruhl Libre",serif;font-size:14px;line-height:1.62;font-weight:300;
color:#6d6459;margin-top:5px;margin-right:46px;
}
.menu-card .dish .seal{opacity:.72}
.menu-card .dish .star{color:var(--acc)}
.menu-card .addbtn{opacity:.38;transition:opacity .18s, background .18s, transform .18s}
.menu-card .dish:hover .addbtn,.menu-card .addbtn:focus-visible{opacity:1}
/* footer */
.menu-card-foot{text-align:center;margin-top:38px}
.menu-foot-word{font-family:"Frank Ruhl Libre",serif;font-size:21px;letter-spacing:5px;color:var(--acc);margin-top:6px;margin-right:-5px}
.menu-foot-stamp{font-size:11px;letter-spacing:1.5px;color:var(--soft);font-weight:300;margin-top:9px}
@media(max-width:640px){
.menu-card{padding:32px 22px 30px;margin-top:28px}
.menu-card::before{inset:6px}
.menu-card .dish .ds{margin-right:0}
}
@media print{
.menu-card{box-shadow:none;background:#fff;border-color:#000}
.menu-card::before{border-color:#000}
.menu-card .addbtn{display:none}
}
/* ============================================================
MENU-AS-STAGE — the menu is the main act. Compact top bar for
orientation · cover photo · menu card centre-stage · practical
info to the side (sticky) · the archive dossier below.
============================================================ */
.menu-top{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;padding:8px 0 2px}
.menu-top .back{font-size:13px;color:var(--soft);text-decoration:none;font-weight:300;white-space:nowrap}
.menu-top .back:hover{color:var(--acc)}
.menu-topmeta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:13px;color:var(--soft);font-weight:300}
.menu-topmeta a{color:var(--soft);text-decoration:none;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.menu-topmeta a:hover{color:var(--acc);border-color:var(--acc)}
.menu-topmeta .transtag{color:var(--acc)}
.menu-topicon{width:18px;height:18px;border-radius:4px;vertical-align:middle;margin-left:2px}
/* cover photo — the source image, framed like a menu's cover PLATE. Centred and
capped to the menu-card width so it caps the menu instead of spanning full width
(heterogeneous source images: object-position centre keeps the subject in frame). */
.menu-cover{
max-width:660px;margin:22px auto 0;position:relative;
border-radius:var(--r);overflow:hidden;box-shadow:var(--lift);
}
.menu-cover img{
width:100%;height:260px;object-fit:cover;object-position:center;display:block;
transition:transform .6s; /* FULL COLOUR — appetizing, no grayscale */
}
.menu-cover:hover img{transform:scale(1.03)}
.menu-cover figcaption{
position:absolute;inset-inline:0;inset-block-end:0;
background:linear-gradient(to top, rgba(20,14,10,.84), rgba(20,14,10,.15) 66%, transparent);
color:rgba(255,255,255,.92);font-size:11px;letter-spacing:.3px;padding:26px 12px 10px;font-weight:300;text-align:center;
}
.menu-cover figcaption a{color:#fff;text-decoration:underline}
@media(max-width:640px){.menu-cover img{height:200px}}
/* the stage */
.menu-layout{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:38px;align-items:start;margin-top:26px}
.menu-main{min-width:0}
.menu-aside{position:sticky;top:16px}
.menu-aside .menu-beforego{margin-top:0;max-width:none}
@media(max-width:900px){
.menu-layout{grid-template-columns:1fr;gap:0}
.menu-aside{position:static;margin-top:24px}
}
/* the dossier, below the menu */
.menu-dossier{max-width:720px;margin:64px auto 0;border-top:1px solid var(--faint)}
.menu-dossier-head{display:flex;align-items:center;justify-content:center;gap:16px;margin:30px 0 20px}
.menu-dossier-head h2{font-size:14px;letter-spacing:6px;font-weight:700;color:var(--ink);white-space:nowrap;margin-right:-6px}
.menu-dossier-head .rule{flex:0 1 90px;height:1px;background:var(--faint)}
.menu-dossier .menu-numtitle{margin-top:20px}
.menu-dossier .srcline{margin-top:0}
/* wider single column now that dishes may carry media */
.menu-card .items{max-width:600px}
/* Dish rows are CLEAN TEXT — name · dotted leader · price, then description & calorie
estimate. 72% of dishes carry a real description, so the menu reads full and comfortable
with NO placeholder (the old abstract "seal" tiles read as weird — removed). The ~4% of
dishes with a real source photo show a small rounded thumbnail at the end of the row
(opens the lightbox on tap/click); every dish name stays aligned to the reading edge. */
.menu-card .dish{display:flex;gap:16px;align-items:flex-start}
.menu-card .dish-body{flex:1;min-width:0}
.menu-card .dish-photo{
flex-shrink:0;width:94px;height:94px;object-fit:cover;margin-top:3px;
border-radius:var(--r-sm);box-shadow:var(--lift);cursor:zoom-in;background:var(--faint2);
transition:transform .35s, box-shadow .35s;
}
.menu-card .dish:hover .dish-photo,
.menu-card .dish-photo:focus-visible{box-shadow:var(--lift2);transform:translateY(-2px)}
.menu-card .dish-photo:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.menu-card .dish .ds{margin-right:0}
@media(max-width:640px){ .menu-card .dish-photo{width:76px;height:76px} }
/* dish-body flush alignment (media column already provides the indent) */
.menu-card .menu-natl,.menu-card .menu-tags{margin-right:0}
/* ============================================================
Research-grounded craft (deep-research 2026-07-08):
· Hebrew has NO italic — quiet voice = tracking + soft ink
· tabular numerals in the price column (a typeset column)
· semantic fleuron ❦ dividing courses (hedera, historic use)
· colophon per issue (the archive-as-journal imprint)
============================================================ */
/* tabular price column — units line up vertically like a set menu */
.menu-card .dish .pr{font-variant-numeric:tabular-nums;letter-spacing:.3px}
/* fleuron between courses — a section mark with a job, not decoration */
.menu-card .course + .course::before{
content:"❦";display:block;text-align:center;color:var(--acc);
font-size:16px;line-height:1;opacity:.6;margin:6px 0 22px;
}
/* colophon */
.menu-colophon{
max-width:440px;margin:12px auto 0;text-align:center;
font-size:10.5px;letter-spacing:1px;line-height:1.75;color:var(--soft);font-weight:300;
}
/* the "quiet voice" that replaced italic: descriptions get gentle tracking + faded ink,
a genuinely lighter register than the dish name (research: two real forms, never a slant) */
.menu-card .dish .ds{letter-spacing:.15px;color:#6f665a}
/* ============================================================
Deep-research features (2026-07-08): micrography crest,
secondary Hebrew hand for descriptions, never-deleted
archive timeline, consumer-rights note.
============================================================ */
.menu-crest{width:68px;height:68px}
.menu-crest .micro{width:100%;height:100%;display:block}
/* masthead logo — the real brand mark in a circular ceramic medallion (accent-tinted
ground), replacing the woven seal when a logo exists. Circular so crestInscribe fits. */
.menu-crest.has-logo{width:84px;height:84px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 2px var(--brand),0 4px 15px rgba(28,25,21,.17)}
.menu-crest-logo{max-width:64%;max-height:64%;object-fit:contain}
/* provenance wax-seal — circular rubber-stamp corner ornament (real metadata only) */
.menu-card{position:relative}
.provseal{position:absolute;top:16px;left:16px;width:84px;height:84px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;transform:rotate(-6deg);color:var(--brand);pointer-events:none;opacity:.9;z-index:3;text-align:center}
.provseal .ps-ring{position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--brand);box-shadow:inset 0 0 0 3px rgba(122,31,43,.22)}
.provseal .ps-t1{font-size:8.5px;letter-spacing:2px;font-weight:600}
.provseal .ps-date{font-family:"Frank Ruhl Libre","David Libre",serif;font-weight:800;font-size:16px;line-height:1;margin:1px 0}
.provseal .ps-t2{font-size:7.5px;letter-spacing:1.5px;font-weight:600}
@media (max-width:600px){.provseal{width:64px;height:64px;top:10px;left:10px}.provseal .ps-date{font-size:12px}.provseal .ps-t1{font-size:7px}.provseal .ps-t2{font-size:6px}}
/* related-menus rail + record-completeness meter */
.menu-related{margin-top:36px}
.menu-related-rail{display:flex;gap:16px;overflow-x:auto;padding:6px 2px 14px;scroll-snap-type:x proximity}
.menu-related-rail .rcard{min-width:234px;max-width:250px;flex:0 0 auto;scroll-snap-align:start}
.menu-complete{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin:6px 0 14px}
.menu-complete .cm-k{font-weight:700;letter-spacing:1px;color:var(--soft);font-size:11px}
.menu-complete .cm-i{background:var(--faint2);border-radius:3px;padding:2px 9px;font-size:12px;color:var(--soft)}
.menu-complete .cm-i b{color:var(--ink)}
.menu-complete .cm-yes{color:var(--acc4,#2e6b45);background:color-mix(in srgb,var(--acc4,#2e6b45) 10%,var(--paper))}
/* original menu PDF card (self-hosted source artifact) */
.menu-pdf{display:flex;align-items:center;gap:14px;margin:8px 0 16px;padding:13px 16px;border:1px solid var(--ink);border-radius:10px;background:var(--paper);text-decoration:none;color:var(--ink);transition:transform .2s,box-shadow .2s,border-color .2s}
.menu-pdf:hover,.menu-pdf:focus-visible{transform:translateY(-2px);box-shadow:0 5px 16px rgba(28,25,21,.13);border-color:var(--brand)}
.menu-pdf-ic{position:relative;flex-shrink:0;width:40px;height:48px}
.menu-pdf-ic svg{width:40px;height:48px;fill:none;stroke:var(--brand);stroke-width:1.4;stroke-linejoin:round}
.menu-pdf-ic b{position:absolute;bottom:7px;left:50%;transform:translateX(-50%);font-size:7.5px;font-weight:800;letter-spacing:.5px;color:#fff;background:var(--brand);border-radius:2px;padding:0 3px;line-height:1.55}
.menu-pdf-h{font-family:"Frank Ruhl Libre","David Libre",serif;font-weight:700;font-size:17px;display:block}
.menu-pdf-sub{font-size:12.5px;color:var(--soft);display:block;margin-top:2px}
/* descriptions in the "quiet voice": the SAME serif at a light weight, with gentle
tracking and faded ink — a lighter register than the dish name, the way a printed
menu differentiates when the script (Hebrew) has no italic. Two fonts only. */
.menu-card .dish .ds{
font-family:var(--serif);font-weight:300;
font-size:15px;line-height:1.7;color:#6b6154;letter-spacing:.15px;
}
/* never-deleted dated archive — "התפריט לאורך השנים" */
.menu-timeline{max-width:600px;margin:16px auto 0;padding:13px 20px;border:1px solid var(--faint);background:var(--card);text-align:center}
.menu-tl-title{display:block;font-size:11px;letter-spacing:4px;color:var(--soft);margin-bottom:7px}
.menu-tl-pt{display:block;font-size:14px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.menu-tl-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--acc);margin-left:6px;vertical-align:middle}
.menu-tl-note{display:block;font-size:11.5px;color:var(--soft);font-weight:300;line-height:1.75;margin-top:7px}
/* consumer-rights note in the "before you go" panel */
.menu-bg-rights{margin-top:12px;padding-top:11px;border-top:1px solid var(--faint2);font-size:12px;line-height:1.75;color:var(--soft);font-weight:300}
.menu-bg-rights a{color:var(--acc);text-decoration:none;white-space:nowrap;border-bottom:1px solid transparent}
.menu-bg-rights a:hover{border-color:var(--acc)}
/* ============================================================
Per-restaurant typographic ENVELOPE + material craft
(blind emboss · tile corners · bound spine on the binding edge)
NOTE: no overflow:hidden on .menu-card — the dish hover-enlarge
must be free to overflow.
============================================================ */
.menu-card-head{position:relative}
.menu-cardname{text-shadow:0 1px 0 rgba(255,255,255,.6), 0 -1px 0 rgba(28,25,21,.05)} /* blind emboss */
.menu-foot-word{text-shadow:0 1px 0 rgba(255,255,255,.55)}
/* bound "spine" on the right (RTL binding) edge of the sheet */
.menu-card::after{
content:"";position:absolute;top:0;bottom:0;right:0;width:7px;pointer-events:none;
background:linear-gradient(90deg, color-mix(in srgb,var(--acc) 30%,transparent), color-mix(in srgb,var(--acc) 5%,transparent) 62%, transparent);
border-left:1px solid color-mix(in srgb,var(--acc) 20%,transparent);
}
/* Armenian-tile corner squares flanking the masthead */
.menu-card-head::before,.menu-card-head::after{
content:"";position:absolute;top:-30px;width:6px;height:6px;transform:rotate(45deg);
background:var(--acc);opacity:.45;
}
.menu-card-head::before{right:-30px}
.menu-card-head::after{left:-30px}
/* the three envelopes — same honest text, different stock & voice */
.menu-env-fine{background:#fdfaf2} /* chef / known: a bright fresh sheet */
.menu-env-market{ /* market / street-food: warm kraft stock */
background:#f4ebd6;
background-image:radial-gradient(rgba(120,90,40,.05) 1px,transparent 1px),radial-gradient(rgba(120,90,40,.038) 1px,transparent 1px);
}
.menu-env-market .menu-cardname{font-weight:900;letter-spacing:1px}
.menu-env-market .menu-card-kicker{color:color-mix(in srgb,var(--acc) 65%, var(--soft))}
.menu-env-chain{background:#fbf8f0;background-image:none} /* chain: cleaner, flatter, crisper */
.menu-env-chain .menu-cardname{letter-spacing:.5px}
@media print{.menu-card::after{display:none}.menu-cardname{text-shadow:none}}
/* inline semantic marks beside the dish name — drawn line-icons in natural colour
(chili red / sprout green / wheat ochre), a printed-menu symbol, not a UI pill */
.menu-mark{display:inline-flex;vertical-align:-.16em;margin-right:4px}
.menu-mark .ico{width:.92em;height:.92em;stroke-width:1.55}
.menu-mark-spicy{color:#b23a2c}
.menu-mark-vegan,.menu-mark-veg{color:#3d7a4f}
.menu-mark-gf{color:#8a6a1e}
/* keep prices/medians bidi-isolated so "₪48" never flips against Hebrew */
.pr,.dp,.idx-geo-med,.menu-ms-medlbl{unicode-bidi:isolate}
/* ============================================================
Drawn-icon integration for the practical panel + polychrome
ceramic touches (task: official icons + more colour)
============================================================ */
/* "לפני שיוצאים" lead icons carry the restaurant's ceramic accent */
.menu-bg-ic{opacity:1}
.menu-bg-ic .ico{width:18px;height:18px;stroke-width:1.55;color:var(--acc)}
/* social links: brand glyph + label, tidy separators */
.menu-bg-socs{display:inline-flex;align-items:center;flex-wrap:wrap;gap:2px}
.menu-bg-soc{display:inline-flex;align-items:center;gap:5px}
.menu-bg-soc .ico{width:15px;height:15px;color:var(--acc)}
.menu-bg-dot{margin:0 7px;color:var(--faint)}
/* consumer-rights scales */
.menu-rights-ico{width:15px;height:15px;color:var(--acc);vertical-align:-.22em;margin-left:3px}
/* footer action-button icons sit on the accent text */
.menuFooter .ico{width:1.05em;height:1.05em;vertical-align:-.16em;margin-right:2px}
/* two-tone Armenian-tile corners: restaurant accent + ceramic turquoise */
.menu-card-head::after{background:var(--acc2)}
/* ============================================================
MOTION + RICHNESS (2026-07-09) — the menu is never blank and
it comes alive: identity watermark, course emblems, staggered
dishes, self-inscribing crest, count-up stats, accession stamp,
ken-burns cover. ALL motion gated by prefers-reduced-motion.
============================================================ */
/* the sheet's own identity seal, watermarked huge and faint behind the courses —
fills what read as empty space, and it's generated from the real restaurant name.
z-index:-1 + isolation on the card keeps it above the paper, below every dish, and
does NOT trap the dish hover-zoom in a stacking context. */
.menu-card{isolation:isolate}
.menu-watermark{
position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
width:min(86%,520px);opacity:.08;pointer-events:none;z-index:-1;
}
.menu-watermark svg{width:100%;height:auto;display:block}
/* a small ink emblem in each course header, chosen from the category type */
.menu-course-ico{width:21px;height:21px;color:var(--acc);opacity:.66;flex-shrink:0}
.menu-course-ico svg{width:100%;height:100%;display:block}
@media(max-width:640px){.menu-course-ico{width:17px;height:17px}}
/* the whole course is always present; its DISHES write themselves in on load,
staggered — as a pure CSS animation. Crucially this does NOT depend on scroll or
an IntersectionObserver, so the menu is NEVER left blank: worst case (no animation
support) the dishes simply show at full opacity. This replaced an observer-gated
reveal that could leave the whole menu invisible if the observer was throttled. */
.menu-card .course{opacity:1;transform:none;transition:none}
.menu-card .dish{animation:dishIn .5s ease both;animation-delay:min(calc(var(--i,0) * 45ms), 480ms)}
@keyframes dishIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
/* dish-name ink underline, drawn on hover (RTL: grows from the right) */
.menu-card .dish .nm{position:relative}
.menu-card .dish .nm::after{
content:"";position:absolute;right:0;bottom:-2px;height:1px;width:0;
background:var(--acc);opacity:.6;transition:width .3s ease;
}
.menu-card .dish:hover .nm::after{width:100%}
/* accession rubber-stamp in the colophon — "presses in" when scrolled to */
.menu-stamp{
display:inline-block;margin-top:15px;padding:6px 15px 5px;transform:rotate(-6deg);
border:2px solid var(--acc);border-radius:5px;color:var(--acc);opacity:.58;
line-height:1.25;text-align:center;
box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--acc) 32%,transparent);
}
.menu-stamp span{display:block;font-size:8px;letter-spacing:3px}
.menu-stamp b{display:block;font-size:12px;letter-spacing:1.4px;font-weight:700;font-variant-numeric:tabular-nums}
.menu-stamp.stamped{animation:stampIn .52s cubic-bezier(.2,1.5,.4,1)}
@keyframes stampIn{0%{opacity:0;transform:rotate(-17deg) scale(1.55)}55%{opacity:.6}100%{opacity:.58;transform:rotate(-6deg) scale(1)}}
/* the crest inscribes itself — ink spreading from the centre — on load */
.menu-crest{animation:crestInscribe 1.15s cubic-bezier(.2,.75,.2,1) both}
@keyframes crestInscribe{
0%{opacity:0;clip-path:circle(0% at 50% 50%);transform:rotate(-22deg)}
60%{opacity:1}
100%{opacity:1;clip-path:circle(120% at 50% 50%);transform:rotate(0)}
}
/* the fleurons wipe open from the centre, like a rule being drawn */
.menu-fleuron{animation:fleuronWipe .9s .2s cubic-bezier(.4,0,.2,1) both}
@keyframes fleuronWipe{from{clip-path:inset(0 50% 0 50%);opacity:0}to{clip-path:inset(0 0 0 0);opacity:1}}
/* the cover settles from a gentle zoom (Ken Burns) */
.menu-cover img{animation:kenBurns 9s ease-out both}
@keyframes kenBurns{from{transform:scale(1.09)}to{transform:scale(1)}}
@media (prefers-reduced-motion: reduce){
.menu-card .dish{animation:none !important;opacity:1 !important;transform:none !important}
.menu-crest,.menu-fleuron,.menu-cover img,.menu-stamp{animation:none !important}
.menu-crest{clip-path:none}
.menu-fleuron{clip-path:none}
}
/* ============================================================
Wolt-informed VISUAL layer (2026-07-09): honest signature
strip, tap/click lightbox, sticky-nav scroll-margin. Nothing
here fabricates data — photos are real, captions are computed.
============================================================ */
/* "מן התפריט" — honest signature plates (photo-rich menus only) */
.menu-signature{margin:6px 0 30px;position:relative;z-index:1}
.menu-sig-head{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:5px}
.menu-sig-head h2{font-size:12px;letter-spacing:5px;font-weight:700;white-space:nowrap;margin-right:-5px}
.menu-sig-head .rule{flex:0 1 54px;height:1px;background:var(--acc);opacity:.45}
.menu-sig-sub{text-align:center;font-size:10.5px;letter-spacing:.3px;color:var(--soft);font-weight:300;margin-bottom:14px}
.menu-sig-rail{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x proximity;padding:2px 2px 10px;scrollbar-width:thin}
.menu-sig-rail::-webkit-scrollbar{height:7px}
.menu-sig-plate{flex:0 0 auto;width:150px;scroll-snap-align:start;text-align:center}
.menu-sig-plate img{
/* contain, not cover — these are the biggest photos on the page, so a crop shows most */
width:150px;height:112px;object-fit:contain;display:block;cursor:zoom-in;
background:color-mix(in srgb,var(--acc) 6%,#fffaf0);padding:3px;box-sizing:border-box;
border-radius:var(--r-sm);box-shadow:var(--lift);transition:transform .35s, box-shadow .35s; /* FULL COLOUR */
}
.menu-sig-plate img:hover,.menu-sig-plate img:focus-visible{box-shadow:var(--lift2);transform:translateY(-2px)}
.menu-sig-plate figcaption{margin-top:8px;display:flex;flex-direction:column;gap:1px;padding:0 2px}
.menu-sig-nm{font-family:var(--serif);font-size:13.5px;font-weight:600;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu-sig-pr{font-family:var(--serif);font-weight:700;font-size:14px;font-variant-numeric:tabular-nums}
.menu-sig-cap{font-size:10px;letter-spacing:.2px;color:var(--soft);font-weight:300}
@media(max-width:640px){.menu-sig-plate,.menu-sig-plate img{width:132px}.menu-sig-plate img{height:99px}}
/* lightbox — a photo enlarged as an archived exhibit (tap/click; Esc/backdrop to close) */
.menu-lightbox{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:24px}
.menu-lb-backdrop{position:absolute;inset:0;background:rgba(28,25,21,.82);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.menu-lb-fig{position:relative;z-index:1;max-width:min(92vw,900px);max-height:88vh;margin:0;text-align:center;cursor:zoom-out}
.menu-lb-fig img{max-width:100%;max-height:78vh;object-fit:contain;display:block;margin:0 auto;border:1px solid rgba(253,252,248,.5);background:#0e0d0b;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.menu-lb-fig figcaption{margin-top:12px;color:var(--paper);font-size:12px;letter-spacing:.5px;font-weight:300}
.menu-lb-close{position:absolute;top:16px;left:16px;z-index:2;width:40px;height:40px;border-radius:50%;border:1px solid rgba(253,252,248,.5);background:rgba(28,25,21,.45);color:var(--paper);font-size:17px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.menu-lb-close:hover{background:rgba(28,25,21,.75)}
@media (prefers-reduced-motion: no-preference){
.menu-lightbox:not([hidden]) .menu-lb-fig{animation:lbIn .3s ease both}
@keyframes lbIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
}
/* sticky quick-nav: don't let an anchored course hide under the bar */
.menu-card .course{scroll-margin-top:56px}
/* ============================================================
Calorie ESTIMATE (heuristic, NOT from source) — deliberately
styled APART from the real numbers: ochre + dashed + "הערכה"
tag, so the price stays the ink-solid truth and calories read
as the estimate they are. (Eden-approved, always ≈/הערכה.)
============================================================ */
/* the "הערכה" chip, shared by the summary + dish-page note */
.menu-cal-tag{font-size:9px;letter-spacing:1px;color:#8a6a1e;border:1px solid color-mix(in srgb,#8a6a1e 40%,transparent);border-radius:2px;padding:0 4px;margin-right:5px;vertical-align:1px;white-space:nowrap}
/* ---- per-dish NUTRITION estimate: a COMPACT soft-ochre card. Collapsed = one
tight line (kcal + composition bar + «הערכה» + «פירוט»); the P/C/F grams +
derivation open on demand, so the menu stays light. ---- */
.nutri{
display:flex;align-items:center;flex-wrap:wrap;gap:5px 9px;
margin-top:9px;padding:5px 10px 6px;
background:linear-gradient(180deg,color-mix(in srgb,#8a6a1e 5.5%,transparent),color-mix(in srgb,#8a6a1e 2.5%,transparent));
border:1px solid color-mix(in srgb,#8a6a1e 14%,transparent);
border-radius:8px;
}
.nutri-kcal{white-space:nowrap;display:inline-flex;align-items:baseline;gap:3px}
.nutri-kcal b{font-weight:800;font-size:14px;color:#8a6a1e;font-variant-numeric:tabular-nums;letter-spacing:.2px}
.nutri-kcal i{font-style:normal;font-size:9px;color:var(--soft);letter-spacing:.8px;font-weight:500}
.nutri-bar{display:inline-flex;width:56px;height:5px;border-radius:3px;overflow:hidden;background:color-mix(in srgb,#8a6a1e 12%,var(--card));flex-shrink:0;box-shadow:inset 0 0 0 1px rgba(28,25,21,.05)}
.nutri-bar i{height:100%;display:block}
.nutri-bar i+i{box-shadow:inset 1px 0 0 0 color-mix(in srgb,var(--card) 85%,transparent)}
.nb-p{background:#2e6b45}.nb-c{background:#c08a24}.nb-f{background:#a3532a}
.nutri-tag{font-size:7.5px;letter-spacing:1.5px;color:#8a6a1e;background:color-mix(in srgb,#8a6a1e 10%,transparent);border-radius:3px;padding:1px 5px;white-space:nowrap;font-weight:600}
.nutri-how{background:none;border:none;font:inherit;font-size:10px;color:var(--soft2);cursor:pointer;letter-spacing:.3px;position:relative;padding:0 0 0 12px}
.nutri-how::after{content:'▾';position:absolute;left:0;top:1px;font-size:8px;transition:transform .2s}
.nutri-how:hover{color:#8a6a1e}
.nutri-how-open::after{transform:rotate(180deg)}
.nutri-detail{flex-basis:100%;margin-top:4px;padding-top:7px;border-top:1px dashed color-mix(in srgb,#8a6a1e 28%,transparent)}
.nutri-detail .nutri-facts{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:7px}
.nf{font-size:11px;color:var(--soft);font-weight:400;white-space:nowrap;letter-spacing:.2px;display:inline-flex;align-items:center}
.nf::before{content:'';width:6px;height:6px;border-radius:50%;margin-left:5px;flex-shrink:0}
.nf-p::before{background:#2e6b45}.nf-c::before{background:#c08a24}.nf-f::before{background:#a3532a}
.nf b{font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;margin-left:3px;color:var(--ink)}
.nutri-expl{display:block;font-size:11.5px;line-height:1.75;color:var(--soft);font-weight:300}
.nutri-detail b{color:#8a6a1e;font-weight:700}
.nutri-detail a{color:var(--acc);text-decoration:none;white-space:nowrap}
@media(max-width:640px){.nutri{gap:5px 8px;padding:5px 9px}.nutri-detail .nutri-facts{gap:10px}}
/* calorie summary block (dossier) */
.menu-calsum{max-width:600px;margin:16px auto 0;padding:12px 18px;border:1px dashed color-mix(in srgb,#8a6a1e 40%,transparent);border-radius:3px;background:color-mix(in srgb,#8a6a1e 4%,var(--card));text-align:center}
.menu-calsum-h{font-size:11px;letter-spacing:3px;color:#8a6a1e;font-weight:500;margin-bottom:6px}
.menu-calsum-b{font-size:13px;color:var(--soft);font-weight:300;line-height:1.85}
.menu-calsum-b b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.menu-calsum-note{font-size:10.5px;color:var(--soft);font-weight:300;margin-top:7px;line-height:1.6}
.menu-calsum-note a{color:var(--acc);text-decoration:none}
/* budget-combo calorie tail */
.menu-combo-cal{color:#8a6a1e;font-weight:400;font-size:12px;font-variant-numeric:tabular-nums}
/* per-course contact sheet — a thin thumbnail rail + honest coverage caption */
.menu-contactsheet{margin:2px auto 18px;max-width:600px}
.menu-cs-rail{display:flex;gap:7px;overflow-x:auto;scroll-snap-type:x proximity;padding:2px 0 6px;scrollbar-width:thin}
.menu-cs-rail::-webkit-scrollbar{height:6px}
.menu-cs-thumb{
/* 4:3 + contain — the whole dish photo, never cropped (same rule as the dish cards) */
flex:0 0 auto;width:68px;height:51px;object-fit:contain;scroll-snap-align:start;cursor:zoom-in;
background:color-mix(in srgb,var(--acc) 6%,#fffaf0);padding:2px;box-sizing:border-box;
border-radius:var(--r-sm);box-shadow:0 2px 7px rgba(20,10,4,.16);transition:transform .2s, box-shadow .2s; /* FULL COLOUR */
}
.menu-cs-thumb:hover,.menu-cs-thumb:focus-visible{box-shadow:var(--lift);transform:translateY(-2px)}
.menu-cs-thumb:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
.menu-cs-cap{text-align:center;font-size:10px;letter-spacing:.4px;color:var(--soft);font-weight:300;margin-top:3px}
/* price-vs-national-median tick under natlLine (visual encoding of the same numbers) */
.menu-natl-tick{display:block;width:132px;height:16px;margin-top:5px;overflow:visible}
.nt-ax{stroke:var(--faint);stroke-width:1.4}
.nt-med{stroke:var(--soft);stroke-width:1.4}
.nt-dot{fill:var(--acc)}
/* wide-screen menu: a SINGLE reading column that fills a comfortable width. The old
2-column "spread" left a blank second column for any short course (the worst "empty
zone"), so it's gone — the full-width card + sticky aside carry the width instead. */
@media (min-width:1200px){
body.menu-route .wrap{max-width:1180px}
body.menu-route .menu-qn2-in{max-width:1180px}
.menu-card{max-width:790px}
.menu-card .items{max-width:none} /* the dish-card grid fills the sheet */
}
/* =========================================================================
SIDEBAR ("לפני שיוצאים") + DOSSIER ("על התפריט הזה") REDESIGN — Eden: the
side-of-menu & after-menu areas felt textual / messy / unpleasant to read.
→ each block a calm distinct card, colour on headers & status, and the legal
fine-print quieted so the useful info leads.
========================================================================= */
/* — the practical side panel — */
.menu-beforego{padding:22px 22px 20px}
.menu-bg-title{color:var(--primary-d);margin-bottom:16px}
.menu-bg-row{padding:11px 0;border-top:1px solid var(--faint);font-size:14px}
/* open-now → a filled status pill (was bold coloured text) */
.menu-bg-open,.menu-bg-closed,.menu-bg-note{
display:inline-block;font-size:11px;font-weight:700;letter-spacing:.2px;
padding:3px 11px;border-radius:var(--r-pill);line-height:1.55;
}
.menu-bg-open{color:#fff;background:var(--herb)}
.menu-bg-closed{color:#fff;background:var(--primary-d)}
.menu-bg-note{color:#fff;background:var(--gold)}
/* quiet the legal / provenance fine-print into a soft footnote box */
.menu-bg-rights{
margin-top:16px;padding:11px 13px;border-top:none;border-radius:var(--r-sm);
background:var(--wash);font-size:10.5px;line-height:1.65;color:var(--mut);font-weight:300;
}
.menu-bg-rights a{color:var(--primary-d)}
.menu-bg-stamp{margin-top:9px;font-size:10px;color:var(--mut);letter-spacing:.2px}
/* — the dossier: each block a calm, distinct card — */
.menu-dossier{border-top:none;padding-top:6px}
.menu-dossier-head{margin:40px 0 26px}
.menu-dossier .srcline{
max-width:600px;margin:0 auto;background:var(--wash);border:1px solid var(--faint);
border-radius:var(--r);padding:13px 20px;text-align:center;font-size:13px;color:var(--soft);
}
.menu-dossier .srcline b{color:var(--ink)}
.menu-dossier .menu-numtitle{margin-top:34px}
.menu-dossier .numbers{
max-width:600px;margin:8px auto 0;gap:1px;background:var(--faint);
border:1px solid var(--faint);border-radius:var(--r);overflow:hidden;box-shadow:var(--lift);
}
.menu-dossier .numbers .nb{background:var(--card);padding:16px 14px}
.menu-dossier .numbers .nv{color:var(--primary-d)}
.menu-timeline{
border:1px solid var(--faint);border-radius:var(--r);box-shadow:var(--lift);
background:var(--card);padding:16px 22px;
}
.menu-tl-title{color:var(--primary-d);letter-spacing:3px}
.menu-tl-dot{background:var(--herb)}
.menu-dossier .faqsec{max-width:640px;margin:46px auto 0}
.menu-dossier .faqsec .qa{
border-bottom:none;background:var(--card);border:1px solid var(--faint);border-radius:var(--r);
padding:15px 20px;margin-bottom:10px;box-shadow:0 1px 3px rgba(34,28,23,.05);
}
.menu-dossier .faqsec .q{font-size:15px;color:var(--ink)}
.menu-dossier .faqsec .a{font-size:13.5px;line-height:1.7}
.menu-combo,.menu-combo.menu-combo-best{border-radius:var(--r-sm)}
/* — dossier as clear TITLED blocks (numbers · planning · Q&A · source) instead of one
flowing wall; each block centred with a quiet kicker heading — */
.menu-dossier .dosblock{max-width:620px;margin:0 auto 36px}
.menu-dossier .dosblock:last-child{margin-bottom:6px}
.dosblock-h{text-align:center;font-size:12px;letter-spacing:4px;color:var(--primary-d);font-weight:700;margin:0 0 16px}
.menu-dossier .dosblock .numbers{margin-top:0}
.menu-dossier .dosblock-faq .qa{
background:var(--card);border:1px solid var(--faint);border-radius:var(--r);border-bottom:1px solid var(--faint);
padding:15px 20px;margin-bottom:10px;box-shadow:0 1px 3px rgba(34,28,23,.05);
}
.menu-dossier .dosblock-faq .qa:last-child{margin-bottom:0}
.menu-dossier .dosblock-faq .q{font-size:15px;color:var(--ink)}
.menu-dossier .dosblock-faq .a{font-size:13.5px;line-height:1.7}
.menu-dossier .dosblock-src .srcline{margin-bottom:10px}
/* =========================================================================
DATA AS DESIGNED COMPONENTS, NOT SENTENCES — Eden: "עדיין הרבה בלאגן של
טקסט לא מעוצב". The dossier's facts used to be prose lines ("הזול בתפריט:
X (₪28) · היקר: Y (₪345)"); they're now real UI: mini-cards, labelled
rows with totals, and a proper input card.
========================================================================= */
/* price extremes → two mini-cards (green = cheapest, red = dearest) */
.extremes{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0 0}
.extreme{
background:var(--card);border:1px solid var(--faint);border-top:3px solid var(--faint);
border-radius:var(--r);padding:13px 15px;display:flex;flex-direction:column;gap:3px;
box-shadow:0 1px 3px rgba(34,28,23,.05);min-width:0;
}
.extreme.ex-low{border-top-color:var(--herb)}
.extreme.ex-high{border-top-color:var(--primary)}
.ex-k{font-size:10.5px;letter-spacing:2px;color:var(--soft);font-weight:600}
.ex-p{font-family:var(--serif);font-size:23px;font-weight:800;line-height:1.15;font-variant-numeric:tabular-nums}
.ex-low .ex-p{color:var(--herb)}
.ex-high .ex-p{color:var(--primary-d)}
.ex-n{font-size:12.5px;color:var(--soft);line-height:1.45;overflow-wrap:break-word}
/* typical-meal → a cost card: labelled rows, a real total, a diners control */
.mealcard{
background:var(--card);border:1px solid var(--faint);border-radius:var(--r);
box-shadow:var(--lift);padding:16px 20px 14px;margin-top:2px;
}
.meal-h{font-size:11px;letter-spacing:2.5px;color:var(--primary-d);font-weight:700;text-align:center;margin-bottom:12px}
.meal-rows{display:flex;flex-direction:column}
.meal-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:7px 0;border-bottom:1px solid var(--faint2)}
.meal-rk{font-size:13.5px;color:var(--soft)}
.meal-rv{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink)}
.meal-row-tot{border-bottom:none;border-top:1.5px solid var(--faint);margin-top:3px;padding-top:10px}
.meal-row-tot .meal-rk{color:var(--ink);font-weight:700}
.meal-row-tot .meal-rv{font-family:var(--serif);font-size:21px;font-weight:800;color:var(--primary-d)}
.meal-diners{
display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;
margin-top:13px;padding-top:12px;border-top:1px solid var(--faint2);
}
.meal-dl{font-size:12.5px;color:var(--soft)}
.meal-dtot{font-size:16px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;margin-inline-start:4px}
.meal-note{font-size:10.5px;color:var(--mut);text-align:center;margin-top:10px;line-height:1.6}
/* budget checker → a card with a real labelled input row */
.budgetcard{
background:var(--wash);border:1px solid var(--faint);border-radius:var(--r);
padding:15px 20px;margin-top:14px;text-align:center;
}
.budget-h{font-size:11px;letter-spacing:2.5px;color:var(--primary-d);font-weight:700;margin-bottom:11px}
.budgetcard .budgetrow{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin:0}
.bud-l{font-size:13px;color:var(--soft)}
/* calorie summary → a 3-stat row, not a sentence */
.calgrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:11px}
.calcell{
background:var(--card);border:1px solid var(--faint);border-radius:var(--r-sm);
padding:10px 11px;display:flex;flex-direction:column;gap:2px;text-align:center;min-width:0;
}
.calcell-med{background:var(--wash);border-color:color-mix(in srgb,var(--gold) 35%,var(--faint))}
.cal-k{font-size:9.5px;letter-spacing:1.5px;color:var(--soft);font-weight:600}
.cal-v{font-size:15px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.3}
.calcell-med .cal-v{color:#8a6a1e}
.cal-n{
font-size:10.5px;color:var(--mut);line-height:1.4;overflow:hidden;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
/* the colophon is true fine print, not a body line */
.menu-colophon{font-size:9.5px;color:var(--mut);letter-spacing:.2px}
@media(max-width:640px){ .extremes,.calgrid{grid-template-columns:1fr} }
/* =========================================================================
WOLT-GRADE READABLE DISH CARDS — Eden: "התפריט של וולט הרבה יותר קריא ונוח".
The dotted-leader editorial rows made dishes blur into each other and forced
the eye to track a long leader to the price. Now every dish is a SELF-CONTAINED
CARD in a responsive grid: photo left (fixed square), name + description right,
price bold and adjacent. Sans-serif for the dish text (scannability); the serif
stays on category heads + the masthead, so the archive identity survives.
========================================================================= */
.menu-card .items{
display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
gap:12px;column-rule:none;
}
/* The card is OURS, not a delivery-app card: it sits on the cream sheet as a
slightly lighter warm block, hairline-ruled in warm ink, with a fine accent
edge in the restaurant's own colour — a printed menu block, not a shop tile. */
.menu-card .dish{
display:flex;gap:12px;align-items:center;break-inside:avoid;position:relative;
background:#fffdf7;border:1px solid color-mix(in srgb,var(--acc) 12%,var(--faint));
border-inline-start:3px solid color-mix(in srgb,var(--acc) 34%,transparent);
border-radius:var(--r);
padding:12px 15px;box-shadow:0 1px 3px rgba(28,25,21,.05);
transition:box-shadow .2s,transform .2s,border-color .2s;
}
.menu-card .dish:hover{
background:#fffdf7;border-color:color-mix(in srgb,var(--acc) 30%,var(--faint));
border-inline-start-color:var(--acc);
box-shadow:var(--lift);transform:translateY(-2px);
}
.menu-card .dish-body{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
/* name + price on ONE clean line — the dotted leader is gone */
.menu-card .dish .row1{display:flex;align-items:baseline;gap:10px}
.menu-card .dish .dots{display:none}
/* the dish name keeps our SERIF (editorial voice) — set big + bold enough to
out-read Wolt's sans; the description below stays sans for contrast. */
.menu-card .dish .nm{
font-family:var(--serif);font-size:16px;font-weight:700;line-height:1.35;
flex:1;min-width:0;color:var(--ink);letter-spacing:0;
}
/* price in the restaurant's own accent, in the serif — a menu price, not a shop tag */
.menu-card .dish .pr{
font-family:var(--serif);font-size:17px;font-weight:800;color:var(--acc);
white-space:nowrap;flex-shrink:0;font-variant-numeric:tabular-nums;
}
.menu-card .dish .pr.na{font-size:11px;font-weight:600;color:var(--mut);letter-spacing:.2px}
.menu-card .dish .ds{
font-family:var(--sans);font-size:12.5px;color:var(--soft);line-height:1.55;
margin:0;font-weight:400;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
/* photo: a fixed square opposite the text, exactly like Wolt */
/* the WHOLE photo, never cropped: a 4:3 box (the natural ratio of most food
photos) with object-fit:contain, on a warm ground so any letterbox reads as
intentional matting rather than a gap. */
.menu-card .dish-photo{
width:100px;height:75px;margin-top:0;align-self:center;border-radius:var(--r-sm);
object-fit:contain;background:color-mix(in srgb,var(--acc) 6%,#fffaf0);
padding:2px;box-sizing:border-box;
}
/* our extras are the differentiator, but they must never out-shout the dish:
both collapse into ONE compact meta row of small chips */
.menu-card .dish .dish-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:3px}
.menu-card .dish .natl-chip{
display:inline-flex;align-items:center;font-size:10px;font-weight:700;letter-spacing:.2px;
padding:2px 8px;border-radius:var(--r-pill);text-decoration:none;white-space:nowrap;
border:1px solid transparent;transition:filter .15s;
}
.menu-card .dish .natl-chip:hover{filter:brightness(.94)}
.menu-card .dish .nc-low{color:#2c6b45;background:color-mix(in srgb,var(--herb) 15%,transparent);border-color:color-mix(in srgb,var(--herb) 30%,transparent)}
.menu-card .dish .nc-high{color:var(--primary-d);background:var(--blush);border-color:color-mix(in srgb,var(--primary) 25%,transparent)}
.menu-card .dish .nc-mid{color:var(--soft);background:var(--faint2);border-color:var(--faint)}
.menu-card .dish .nutri{
display:inline-flex;align-items:center;gap:5px;margin:0;padding:2px 8px;
font-size:10px;background:var(--wash);border:1px solid var(--faint);border-radius:var(--r-pill);
}
.menu-card .dish .nutri .nutri-kcal{font-size:10px;white-space:nowrap}
.menu-card .dish .nutri .nutri-how{font-size:9px;padding:0 4px}
@media(max-width:640px){
.menu-card .items{grid-template-columns:1fr}
.menu-card .dish-photo{width:88px;height:66px}
}
/* =========================================================================
EVERYTHING AROUND THE MENU, on Wolt's principles — in our materials.
Eden: "כל העיצוב לא מתחבר לי, תשנה שם הכל חוץ מהתפריט". Wolt's laws applied:
key facts as chips (never prose), one strong heading per block, clear block
boundaries, generous air, no ceremony competing with the content.
========================================================================= */
/* --- venue header: name big, facts as one scannable chip row --- */
.menu-card-head{margin-bottom:14px}
.menu-cardname{font-size:clamp(27px,4.4vw,38px);line-height:1.1;margin-top:6px}
.venue-facts{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:13px}
.vf{
display:inline-flex;align-items:center;font-size:11.5px;font-weight:600;line-height:1.6;
padding:3px 11px;border-radius:var(--r-pill);white-space:nowrap;text-decoration:none;
background:color-mix(in srgb,var(--acc) 7%,#fffaf0);
border:1px solid color-mix(in srgb,var(--acc) 20%,var(--faint));
color:var(--soft);transition:border-color .15s,color .15s;
}
a.vf:hover{border-color:var(--acc);color:var(--acc)}
.vf-price{color:var(--acc);font-weight:700}
.vf-score{color:var(--acc)}
/* --- dossier blocks: each a real card with one strong heading (Wolt-clear) --- */
.menu-dossier .dosblock{
background:#fffdf7;border:1px solid color-mix(in srgb,var(--acc) 12%,var(--faint));
border-radius:var(--r);padding:20px 22px 18px;box-shadow:0 1px 3px rgba(28,25,21,.05);
}
.dosblock-h{
font-size:11px;letter-spacing:3px;color:var(--acc);font-weight:700;
margin:0 0 15px;padding-bottom:10px;border-bottom:1px solid color-mix(in srgb,var(--acc) 14%,var(--faint));
}
.menu-dossier .dosblock .numbers{border:0;box-shadow:none;background:transparent;gap:0}
.menu-dossier .dosblock .numbers .nb{background:transparent;border-inline-start:1px solid var(--faint2)}
.menu-dossier .dosblock .numbers .nb:last-child{border-inline-start:0}
/* FAQ cards inside the block shouldn't double-frame */
.menu-dossier .dosblock-faq .qa{background:var(--wash);border-color:transparent;box-shadow:none}
/* --- the sheet footer: quieter, so it closes the page instead of shouting --- */
.menu-foot-word{font-size:clamp(19px,3vw,26px)}
.menu-card-foot{margin-top:30px}
/* ownership + one-click takedown line in the menu footer (copyright good-faith on the page that displays the media) */
.menuFooter .menu-ip{display:inline-block;max-width:640px;margin:2px auto 8px;font-size:11px;line-height:1.6;color:var(--mut)}
.menuFooter .menu-ip a{color:var(--primary-d);white-space:nowrap}
/* =========================================================================
«הַזָּוִית שֶׁל תַּפְרִיטִיָּה» — the archive's own answer
Eden: "מה הייחודיות של האתר שלנו, מה הוא עושה שוולט לא עושה".
A shop cannot tell you its own prices are high; it has a sale to protect.
We hold all the menus at once and have nothing to sell — so this block
answers the one question every menu site refuses to: יקר או זול, ולעומת מי.
Semantic colour (dear/cheap) is kept OFF the per-restaurant accent on
purpose, so "expensive" never reads as "brand colour".
========================================================================= */
.vf-dear,.vf-cheap{font-weight:700}
.vf-dear{background:color-mix(in srgb,var(--primary) 10%,#fff);border-color:color-mix(in srgb,var(--primary) 30%,transparent);color:var(--primary-d)}
.vf-cheap{background:color-mix(in srgb,var(--herb) 10%,#fff);border-color:color-mix(in srgb,var(--herb) 30%,transparent);color:#2C6B43}
.vf-nodelivery{border-style:dashed;color:var(--soft)}
.menu-dossier .dosblock-angle{border-color:color-mix(in srgb,var(--acc) 26%,var(--faint))}
.angle-lead{font-size:12.5px;line-height:1.65;color:var(--mut);margin:-4px 0 16px;text-align:center}
.angle-item{padding:13px 0;border-top:1px solid var(--faint2)}
.angle-item:first-of-type{padding-top:2px;border-top:0}
.angle-k{font-size:10.5px;letter-spacing:2px;color:var(--soft);font-weight:600;margin-bottom:6px}
.angle-v{font-size:14px;line-height:1.7;color:var(--ink);font-variant-numeric:tabular-nums;text-wrap:pretty}
.ang-dear{color:var(--primary-d)}
.ang-cheap{color:#2C6B43}
/* the positioning scale: cheap → right, dear → left (same RTL convention as natlTick) */
.angle-scale{
position:relative;height:8px;margin:11px 0 2px;border-radius:99px;
background:linear-gradient(to left,color-mix(in srgb,var(--herb) 40%,#fff),var(--faint2),color-mix(in srgb,var(--primary) 40%,#fff));
}
.angle-mid{position:absolute;inset-block:-3px;inset-inline-start:50%;width:1px;background:var(--soft);opacity:.45}
/* the marker carries the VERDICT, so it takes the semantic colour — never
var(--acc). A green-accented restaurant must not show a green dot sitting
in the red "expensive" zone; the colour would argue with the position. */
.angle-dot{
position:absolute;inset-block-start:50%;width:13px;height:13px;margin-inline-start:-6.5px;
transform:translateY(-50%);border-radius:50%;background:var(--soft);border:2.5px solid #fff;
box-shadow:0 1px 4px rgba(28,25,21,.3);
}
.angle-dot.dot-dear{background:var(--primary-d)}
.angle-dot.dot-cheap{background:#2C6B43}
.angle-dot.dot-mid{background:var(--soft)}
.angle-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
.angle-chip{
display:inline-flex;align-items:baseline;gap:6px;background:var(--wash);
border:1px solid var(--faint);border-radius:99px;padding:6px 12px;
font-size:12.5px;color:var(--ink);text-decoration:none;max-width:100%;
}
a.angle-chip:hover{border-color:color-mix(in srgb,var(--acc) 40%,transparent);background:#fff}
.angle-chip b{font-family:var(--serif);font-size:13.5px;font-variant-numeric:tabular-nums}
.angle-chip span{font-size:11px;font-weight:700;color:#2C6B43}
.angle-chip-only b{color:var(--acc)}
@media(max-width:520px){ .angle-chip{font-size:12px;padding:5px 10px} }
.angle-legend{display:flex;justify-content:space-between;font-size:9.5px;letter-spacing:1px;color:var(--mut);margin-top:5px}
.angle-legend span:nth-child(2){opacity:.75}
/* =========================================================================
TWO THINGS THE PAGE OWED THE READER
1. Where the price came from. 43 of 118 menus were collected from a delivery
platform, where prices are set for delivery and commonly sit above the
counter price. That belongs next to the prices, not in a footnote.
2. A way to search a menu. 55 menus carry 40+ items, one carries 307 across
42 categories — jumping to a category does not answer "do they have X".
========================================================================= */
.deliv-note{
display:flex;align-items:flex-start;gap:8px;max-width:640px;margin:14px auto 0;
background:color-mix(in srgb,var(--gold) 11%,var(--card));
border:1px solid color-mix(in srgb,var(--gold) 34%,var(--faint));
border-radius:var(--r);padding:10px 14px;
font-size:12.5px;line-height:1.6;color:var(--soft);text-align:start;text-wrap:pretty;
}
.deliv-note b{color:var(--ink)}
.deliv-ico{width:16px;height:16px;flex:0 0 auto;margin-top:2px;color:color-mix(in srgb,var(--gold) 70%,var(--ink))}
/* find-in-menu, inside the sticky bar */
.menu-find{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:0 4px 2px}
.menu-find-box{
display:flex;align-items:center;gap:7px;flex:1 1 210px;min-width:0;
background:var(--card);border:1px solid var(--faint);border-radius:99px;padding:6px 12px;
}
.menu-find-box:focus-within{border-color:color-mix(in srgb,var(--acc) 45%,transparent);
box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 12%,transparent)}
.menu-find-ico{width:15px;height:15px;flex:0 0 auto;color:var(--mut)}
.menu-find-in{
flex:1 1 auto;min-width:0;border:0;background:transparent;font:inherit;font-size:13px;
color:var(--ink);outline:none;
}
.menu-find-in::placeholder{color:var(--mut)}
.menu-find-in::-webkit-search-cancel-button{display:none}
.menu-find-x{
flex:0 0 auto;border:0;background:transparent;cursor:pointer;color:var(--mut);
font-size:17px;line-height:1;padding:0 2px;
}
.menu-find-x:hover{color:var(--ink)}
.menu-find-tags{display:flex;flex-wrap:wrap;gap:6px}
.mf-tag{
display:inline-flex;align-items:center;gap:5px;cursor:pointer;
background:var(--card);border:1px solid var(--faint);border-radius:99px;
padding:5px 11px;font:inherit;font-size:11.5px;color:var(--soft);
}
.mf-tag:hover{border-color:color-mix(in srgb,var(--acc) 40%,transparent);color:var(--ink)}
.mf-tag[aria-pressed="true"]{
background:color-mix(in srgb,var(--acc) 12%,var(--card));
border-color:color-mix(in srgb,var(--acc) 46%,transparent);color:var(--acc);font-weight:700;
}
.mf-n{font-size:10px;color:var(--mut);font-variant-numeric:tabular-nums}
.mf-tag[aria-pressed="true"] .mf-n{color:inherit;opacity:.8}
.menu-find-out{flex:1 0 100%;font-size:11.5px;color:var(--mut);padding:1px 4px 0}
.menu-find-out.mf-empty{color:var(--primary-d)}
/* While a filter is on, the bar must STAY on screen — otherwise scrolling back to the top
hides it while the menu is still filtered, and the reader is left with a shortened menu
and no visible way to clear it. Must override the same two properties the hide uses
(transform + visibility); overriding transform alone left it laid out but invisible. */
.menu-qn2.mf-active{transform:translateY(0);visibility:visible}
@media(max-width:560px){
.menu-find{gap:6px}
.menu-find-box{flex:1 1 100%}
.mf-tag{font-size:11px;padding:4px 9px}
}
/* shortened kosher chip — full source wording is in the title tooltip */
.venue-facts .vf-more{color:var(--mut);font-size:10px}
/* price-coverage band — sits with the delivery note, same "know this before you read the
numbers" job. Quieter than the delivery note: a missing price is a gap, not a warning. */
.price-gap{
display:flex;align-items:flex-start;gap:8px;max-width:640px;margin:10px auto 0;
background:var(--wash);border:1px solid var(--faint);border-radius:var(--r);
padding:9px 14px;font-size:12px;line-height:1.6;color:var(--mut);
text-align:start;text-wrap:pretty;
}
.price-gap b{color:var(--soft)}
.pg-ico{width:15px;height:15px;flex:0 0 auto;margin-top:2px;color:var(--soft);opacity:.7}
/* «מה שכדאי לדעת» — collector caveats, verbatim. First block in the dossier because
knowing the source is three years old changes how you read everything after it. */
.dosblock-heads{border-color:color-mix(in srgb,var(--gold) 30%,var(--faint))}
.heads-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.heads-item{
position:relative;padding-inline-start:16px;font-size:13.5px;line-height:1.7;
color:var(--ink);text-wrap:pretty;
}
.heads-item::before{
content:'';position:absolute;inset-inline-start:0;inset-block-start:9px;
width:6px;height:6px;border-radius:50%;background:var(--gold);
}
.heads-foot{
margin-top:12px;padding-top:9px;border-top:1px solid var(--faint2);
font-size:11px;color:var(--mut);text-align:center;
}
/* «בקרבת מקום» — nearest archived menus, by real distance. No map tiles: distance and a
median price answer "what else is around here" without a single third-party request. */
.near-lead{font-size:12.5px;line-height:1.65;color:var(--mut);margin:-4px 0 14px;text-align:center;text-wrap:pretty}
.near-list{display:flex;flex-direction:column;gap:8px}
.near-row{
display:flex;align-items:center;gap:12px;text-decoration:none;
background:var(--wash);border:1px solid var(--faint);border-radius:var(--r);
padding:10px 13px;transition:border-color .18s,background .18s;
}
.near-row:hover{background:#fff;border-color:color-mix(in srgb,var(--acc) 38%,transparent)}
.near-km{
flex:0 0 auto;min-width:56px;text-align:center;font-family:var(--serif);font-size:13px;
font-weight:800;color:var(--acc);font-variant-numeric:tabular-nums;
}
.near-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px}
.near-nm{font-family:var(--serif);font-size:15px;font-weight:700;color:var(--ink);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.near-sub{font-size:11.5px;color:var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.near-med{
flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:1px;
font-family:var(--serif);font-size:15px;font-weight:800;color:var(--ink);
font-variant-numeric:tabular-nums;
}
.near-med-k{font-family:var(--sans,inherit);font-size:9.5px;font-weight:400;letter-spacing:1px;color:var(--mut)}
@media(max-width:520px){ .near-km{min-width:48px;font-size:12px} .near-nm{font-size:14px} }
/* price sort + per-dish permalink + cheapest meal */
.mf-sort{font-weight:600}
.mf-sort[aria-pressed="true"]{background:color-mix(in srgb,var(--acc) 14%,var(--card))}
/* the link button sits with the add button; it stays quiet until the row is hovered so it
never competes with the price, but is always focusable for keyboard users. */
.dish .dishlink{
border:0;background:transparent;cursor:pointer;padding:2px;line-height:0;
color:var(--mut);opacity:0;transition:opacity .15s,color .15s;flex:0 0 auto;
}
.dish:hover .dishlink,.dish:focus-within .dishlink{opacity:1}
.dish .dishlink:focus-visible{opacity:1;outline:2px solid var(--acc);outline-offset:2px;border-radius:4px}
.dish .dishlink .ico{width:13px;height:13px}
.dish .dishlink:hover{color:var(--acc)}
.dish .dishlink.copied{color:var(--herb);opacity:1}
.dish .dishlink.copyfail{color:var(--primary);opacity:1}
/* the dish a shared link points at */
.dish.dish-target{
border-color:color-mix(in srgb,var(--acc) 55%,transparent);
box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 14%,transparent);
}
.cheap-meal{display:flex;flex-direction:column;gap:2px}
.cm-row{display:flex;align-items:baseline;gap:10px;padding:8px 2px;border-bottom:1px solid var(--faint2)}
.cm-row:last-child{border-bottom:0}
.cm-k{flex:0 0 52px;font-size:10.5px;letter-spacing:1.5px;color:var(--soft)}
.cm-n{flex:1 1 auto;min-width:0;font-size:14px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-p{flex:0 0 auto;font-family:var(--serif);font-size:16px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.cm-total{border-top:2px solid color-mix(in srgb,var(--acc) 30%,var(--faint));margin-top:4px;padding-top:10px}
.cm-total .cm-p{font-size:21px;font-weight:800;color:var(--acc)}
.cm-foot{margin-top:10px;font-size:11px;line-height:1.6;color:var(--mut);text-align:center;text-wrap:pretty}
/* hours note: lead sentence visible, the rest behind a disclosure. The long ones are
collection forensics ("the site publishes three conflicting sets…") — real and worth
keeping, but not what someone deciding where to eat needs to read first. */
.menu-bg-hnote{margin-top:9px;padding-top:8px;border-top:1px solid var(--faint2);
font-size:11.5px;line-height:1.65;color:var(--mut);text-wrap:pretty}
.menu-bg-hnote-long{cursor:pointer}
.menu-bg-hnote-long > summary{list-style:none;display:block}
.menu-bg-hnote-long > summary::-webkit-details-marker{display:none}
.hnote-more{color:var(--primary-d);white-space:nowrap;font-weight:600}
.menu-bg-hnote-long[open] .hnote-more{display:none}
.hnote-full{margin-top:7px;padding-top:7px;border-top:1px dashed var(--faint2);color:var(--soft)}
/* ============================================================
indices.css — styles owned by the indices agent.
Only idx- prefixed classes are defined here; base classes
(.dix .drow .rng .cnt …) are used as-is from base.css.
============================================================ */
/* ---------- shared: back link + keyboard focus ---------- */
.idx-back{
font-size:13px;color:var(--soft);text-decoration:none;font-weight:300;
cursor:pointer;letter-spacing:.3px;
}
.idx-back:hover{color:var(--acc)}
.idx-back:focus-visible,
.idx-row:focus-visible,
.idx-cell:focus-visible{
outline:2px solid var(--acc);outline-offset:3px;border-radius:2px;
}
/* ---------- the price-distribution strip (dish page) ---------- */
.idx-strip{max-width:660px;margin:36px auto 0}
.idx-strip svg{display:block;width:100%;height:auto;overflow:visible}
.idx-strip figcaption{
margin-top:10px;text-align:center;font-size:11px;color:var(--soft);
letter-spacing:.4px;font-weight:300;line-height:1.8;
}
.idx-ax{stroke:var(--ink);stroke-width:1.4;opacity:.75}
.idx-tick{stroke:var(--ink);stroke-width:1.2;opacity:.6}
.idx-num{font:700 12.5px "Heebo",sans-serif;fill:var(--ink);font-variant-numeric:tabular-nums}
.idx-word{font:300 9.5px "Heebo",sans-serif;fill:var(--soft);letter-spacing:1.5px}
.idx-mednum{font:700 13.5px "Heebo",sans-serif;fill:var(--acc);font-variant-numeric:tabular-nums}
.idx-medword{fill:var(--acc);opacity:.85}
.idx-medline{stroke:var(--acc);stroke-width:1.5;opacity:.9}
.idx-dot{cursor:pointer}
.idx-hit{fill:transparent}
.idx-pt{
fill:var(--ink);stroke:var(--paper);stroke-width:1.6;
transition:transform .16s ease, fill .16s ease;
transform-box:fill-box;transform-origin:center;
}
.idx-dot:hover .idx-pt,
.idx-dot.idx-hot .idx-pt{fill:var(--acc);transform:scale(1.5)}
/* ---------- occurrence rows: dot⇄row highlight ---------- */
.idx-row.idx-hot{background:#f6f3ea}
.idx-row.idx-hot .dp{color:var(--acc)}
.idx-rmain{min-width:0}
.idx-rdesc{display:block;font-size:12px;margin-top:2px}
/* ---------- dishes grid extras ---------- */
.idx-mini{display:block;width:82%;max-width:150px;margin:10px auto 0;overflow:visible}
.idx-miniax{stroke:var(--ink);opacity:.3;stroke-width:1}
.idx-minipt{fill:var(--ink);opacity:.5}
.idx-minimed{stroke:var(--acc);stroke-width:1.6}
.idx-fact{
font-family:"Heebo",sans-serif;font-size:11px;color:var(--soft);
margin-top:7px;line-height:1.6;font-weight:300;
}
.idx-fact b{color:var(--ink);font-weight:700}
.idx-nomed{color:#b5afa2;font-weight:300}
/* ---------- city hub ---------- */
.idx-cityh1{margin-top:20px}
.idx-sub{
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
overflow:hidden;
}
.idx-kosher--none{font-style:normal;opacity:.75}
.idx-note{
max-width:760px;margin:18px auto 0;background:var(--faint2);
padding:12px 20px;font-size:12.5px;color:var(--soft);line-height:1.9;
text-align:center;font-weight:300;
}
.idx-note b{color:var(--ink);font-weight:700}
.idx-note--soft{background:transparent;border:1px dashed var(--faint)}
/* ---------- honest empty states ---------- */
.idx-empty{
text-align:center;padding:56px 0 20px;color:var(--soft);
font-style:normal;font-size:16.5px;line-height:2.1;font-weight:300;
}
.idx-emptyink{width:70px;height:70px;margin:0 auto 14px;color:#c9c2b2}
/* ---------- small screens ---------- */
@media (max-width:640px){
.idx-fact{font-size:10.5px}
.idx-strip{margin-top:28px}
.idx-note{padding:10px 14px}
}
/* ---------- print ---------- */
@media print{
.idx-strip{break-inside:avoid}
.idx-strip figcaption{display:none}
.idx-note{background:none;border:1px solid var(--faint)}
}
/* ---------- integrator: dish-row thumbnails on dish pages ---------- */
.idx-thumb{
width:34px;height:34px;object-fit:cover;flex-shrink:0;align-self:center;
border-radius:8px;background:#fff;box-shadow:0 1px 4px rgba(20,10,4,.14); /* FULL COLOUR */
}
/* restaurant logo as the row anchor when a dish has no photo — full colour, contained */
.idx-thumb-logo{object-fit:contain;padding:3px;filter:none !important;background:#fff}
/* cuisine hub + cuisine-index chips */
.idx-cuis-emblem{width:46px;height:46px;margin:2px auto 4px;color:var(--brand)}
.idx-cuis-emblem svg{width:100%;height:100%}
.idx-cuis-more{margin-top:28px;text-align:center;font-size:13px;color:var(--soft);line-height:2}
.idx-cuis-more a{color:var(--brand)}
.cuis-chips{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0}
.cuis-chip{display:flex;align-items:center;gap:9px;padding:12px 16px;border:1px solid var(--ink);border-radius:10px;background:var(--paper);color:var(--ink);text-decoration:none;font-weight:600;transition:transform .2s,box-shadow .2s,border-color .2s}
.cuis-chip:hover{transform:translateY(-2px);box-shadow:0 5px 16px rgba(28,25,21,.12);border-color:var(--brand)}
.cuis-chip-ic{width:24px;height:24px;color:var(--brand);flex-shrink:0}
.cuis-chip-ic svg{width:100%;height:100%}
.cuis-chip-n{background:var(--faint2);border-radius:20px;padding:1px 9px;font-size:12px;color:var(--soft);font-weight:400}
.dir-cuis{align-items:center}
.dir-cuis-lbl{font-weight:700;color:var(--soft);font-size:12.5px;margin-inline-end:4px;align-self:center}
/* «תערוכות» collections (reuses .menu-related-rail) */
.coll-sec{margin-top:30px}
.coll-note{font-size:13px;color:var(--soft);margin:-2px 0 10px}
.coll-more{margin-top:34px;text-align:center;font-size:13.5px;color:var(--soft);line-height:2.2}
.coll-more-h{font-weight:700;color:var(--ink)}
.coll-more a{color:var(--brand)}
.coll-super{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:10px 0 28px}
.coll-sup-i{display:flex;flex-direction:column;gap:3px;padding:15px 16px;border:1px solid var(--ink);border-radius:9px;background:var(--paper);text-decoration:none;color:var(--ink);transition:transform .2s,box-shadow .2s}
.coll-sup-i:hover{transform:translateY(-2px);box-shadow:0 5px 16px rgba(28,25,21,.12)}
.coll-sup-i .cs-k{font-size:11px;letter-spacing:1px;color:var(--soft);font-weight:600}
.coll-sup-i b{font-family:"Frank Ruhl Libre","David Libre",serif;font-size:21px;color:var(--brand);line-height:1.15}
.coll-sup-i .cs-s{font-size:12px;color:var(--soft)}
@media(max-width:860px){.coll-super{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.coll-super{grid-template-columns:1fr}}
/* deep-research: micrography portrait + canonical-dish transparency (dish page) */
.idx-portrait{width:138px;height:138px;margin:20px auto 6px}
.idx-portrait .micro{width:100%;height:100%;display:block}
.idx-canon{max-width:640px;margin:24px auto 0;text-align:center;font-size:12.5px;line-height:1.85;color:var(--soft);font-weight:300}
.idx-canon b{color:var(--ink);font-weight:700}
.idx-canon a{color:var(--acc);text-decoration:none;white-space:nowrap;border-bottom:1px solid transparent}
.idx-canon a:hover{border-color:var(--acc)}
/* מפת המנה — the geographic facet on a dish page */
.idx-geo{max-width:600px;margin:32px auto 0}
.idx-geo-head{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:6px}
.idx-geo-head h2{font-size:14px;letter-spacing:6px;font-weight:700;white-space:nowrap;margin-right:-6px}
.idx-geo-head .rule{flex:0 1 70px;height:1px;background:var(--faint)}
.idx-geo-sub{text-align:center;font-size:12.5px;color:var(--soft);font-weight:300;margin-bottom:16px;line-height:1.7}
.idx-geo-rows{max-width:560px;margin:0 auto}
.idx-geo-row{display:grid;grid-template-columns:92px 1fr 56px auto;align-items:center;gap:12px;padding:7px 2px;border-bottom:1px solid var(--faint2)}
.idx-geo-city a{color:var(--ink);text-decoration:none;font-weight:700;font-size:14.5px;border-bottom:1px solid transparent}
.idx-geo-city a:hover{color:var(--acc);border-color:var(--acc)}
.idx-geo-bar{height:9px;background:var(--faint2);position:relative;border-radius:2px}
.idx-geo-bar i{position:absolute;right:0;top:0;bottom:0;background:var(--acc);border-radius:2px;opacity:.82}
.idx-geo-med{font-size:15px;font-weight:900;font-variant-numeric:tabular-nums;text-align:left}
.idx-geo-n{font-size:11px;color:var(--soft);white-space:nowrap;font-weight:300}
@media(max-width:640px){.idx-geo-row{grid-template-columns:64px 1fr 48px}.idx-geo-n{display:none}}
/* signed index colophon */
.idx-colophon{max-width:600px;margin:22px auto 0;text-align:center;font-size:10.5px;letter-spacing:1px;line-height:1.7;color:var(--soft);font-weight:300}
/* dish-page calorie estimate note */
.idx-calnote{max-width:600px;margin:14px auto 0;text-align:center;font-size:12.5px;color:#8a6a1e;font-weight:300;line-height:1.7}
.idx-calnote b{color:#8a6a1e;font-weight:700;border-bottom:1px dashed color-mix(in srgb,#8a6a1e 45%,transparent);font-variant-numeric:tabular-nums}
.idx-calnote a{color:var(--acc);text-decoration:none}
/* מאגר הקלוריות — the food→kcal database page */
.cal-page{max-width:720px;margin:0 auto}
.cal-page .dishhead .k{color:var(--acc3)}
.cal-legend{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:7px 16px;max-width:640px;margin:16px auto 4px;padding:9px 16px;background:color-mix(in srgb,#8a6a1e 4%,transparent);border:1px solid var(--faint);border-radius:9px}
.cal-lg{font-size:11.5px;color:var(--ink);font-weight:500;display:inline-flex;align-items:center}
.cal-lg::before{content:'';width:9px;height:9px;border-radius:2px;margin-left:6px}
.cal-lg-p::before{background:#2e6b45}.cal-lg-c::before{background:#c08a24}.cal-lg-f::before{background:#a3532a}
.cal-lg-note{font-size:10.5px;color:var(--soft2);font-weight:300;flex-basis:100%;text-align:center;letter-spacing:.2px}
.cal-group{margin-top:34px}
.cal-gh{font-size:14px;letter-spacing:4px;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:12px;margin-bottom:4px}
.cal-gh::after{content:'';flex:1;height:1px;background:var(--faint)}
.cal-gn{font-size:11px;letter-spacing:1px;color:var(--soft);font-weight:400;background:var(--faint2);border-radius:8px;padding:1px 7px}
.cal-sub{font-size:13px;color:var(--soft);font-weight:300;margin:2px 0 10px;line-height:1.7}
.cal-table{border-top:1px solid var(--faint)}
.cal-row{display:grid;grid-template-columns:1fr auto 1.4fr;gap:14px;align-items:baseline;padding:9px 4px;border-bottom:1px solid var(--faint2)}
.cal-food{font-family:var(--serif);font-size:15.5px;font-weight:600;color:var(--ink)}
.cal-kcal{font-weight:700;color:#8a6a1e;white-space:nowrap;font-variant-numeric:tabular-nums;font-size:14px}
.cal-note{font-size:12px;color:var(--soft);font-weight:300;text-align:left}
@media(max-width:600px){.cal-row{grid-template-columns:1fr auto;gap:4px 12px}.cal-note{grid-column:1/-1;text-align:right}}
/* per-100g nutrition table (food · kcal · protein · carbs · fat · portion) */
.cal-ntable{border-top:1px solid var(--faint)}
.cal-nrow{display:grid;grid-template-columns:minmax(74px,1.05fr) minmax(64px,1.7fr) 48px 46px 44px 46px 56px;gap:10px;align-items:center;padding:8px 4px;border-bottom:1px solid var(--faint2);font-variant-numeric:tabular-nums;border-radius:5px;transition:background .12s}
.cal-nrow span{text-align:center}
.cal-nrow:not(.cal-nhead):hover{background:color-mix(in srgb,#8a6a1e 3.5%,transparent)}
.cal-nhead{border-bottom:1px solid var(--faint);color:var(--soft);font-size:10px;letter-spacing:.5px;font-weight:500;border-radius:0}
.cal-nhead:hover{background:none}
.cal-nfood{font-family:var(--serif);font-size:14.5px;font-weight:600;color:var(--ink);text-align:right !important}
.cal-nbarcell{display:flex;align-items:center;padding:0 4px}
.cal-nbarcell .nutri-bar{width:100%;height:7px}
.cal-nhead .cal-nbarcell{font-size:9px;letter-spacing:1px;justify-content:center;color:var(--soft)}
.cal-nrow .cal-nk{font-weight:700;color:#8a6a1e;font-size:14.5px}
.cal-nrow .cal-nm{font-size:13px;font-weight:700}
.cal-nrow .cal-np{color:#2e6b45}
.cal-nrow .cal-nc{color:#c08a24}
.cal-nrow .cal-nf{color:#a3532a}
.cal-nhead .cal-nm,.cal-nhead span{font-weight:500;color:var(--soft)}
.cal-nport{color:var(--soft);font-size:11px;font-weight:300;white-space:nowrap}
@media(max-width:600px){
.cal-nrow{grid-template-columns:1fr 38px 40px 38px 40px 48px;gap:3px 5px;font-size:12px}
.cal-nbarcell{display:none}
.cal-nfood{font-size:12.5px}
.cal-nhead{font-size:8.5px;letter-spacing:0}
}
/* A group of one or two cards must not reserve three columns and sit against the
inline-start edge with a void beside it. Fixed tracks + centring keeps the card
its normal size and puts the empty space on BOTH sides instead of all on one. */
.cards-few{grid-template-columns:repeat(2,minmax(272px,326px));justify-content:center}
@media(max-width:760px){ .cards-few{grid-template-columns:repeat(auto-fill,minmax(272px,1fr))} }
/* =========================================================================
DISH PAGE — numbers as components, not as sentences.
Both blocks below replaced dense inline prose ("≈350–550 קק״ל · חלבון ≈20 …"
and "בין הערים…: הזולה באר שבע (חציון ₪22 מ־3 מחירים), היקרה חיפה (…)").
========================================================================= */
.idx-nutri{max-width:620px;margin:22px auto 0;background:var(--card);
border:1px solid var(--faint);border-radius:var(--r);padding:16px 18px 13px;
box-shadow:0 1px 3px rgba(34,28,23,.05)}
.ncells{display:grid;grid-template-columns:repeat(auto-fit,minmax(84px,1fr));gap:4px}
.ncell{text-align:center;padding:4px 6px;border-inline-start:1px solid var(--faint2)}
.ncell:first-child{border-inline-start:0}
.ncell-n{font-family:var(--serif);font-size:19px;font-weight:800;color:var(--ink);
line-height:1.2;font-variant-numeric:tabular-nums;white-space:nowrap}
.ncell-u{font-size:10.5px;font-weight:600;color:var(--mut);margin-inline-start:3px}
.ncell-l{font-size:10.5px;letter-spacing:1px;color:var(--soft);margin-top:3px}
.idx-nutri-foot{margin-top:11px;padding-top:10px;border-top:1px solid var(--faint2);
font-size:11.5px;line-height:1.65;color:var(--mut);text-align:center;text-wrap:pretty}
.idx-nutri-foot a{color:var(--primary-d);white-space:nowrap}
/* cheapest / dearest city — a matched pair, colour-coded like the rest of the site */
.cityx-wrap{max-width:620px;margin:26px auto 0}
.cityx-lead{text-align:center;font-size:11px;letter-spacing:2px;color:var(--soft);margin-bottom:11px}
.cityx-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cityx{background:var(--card);border:1px solid var(--faint);border-top:3px solid var(--faint);
border-radius:var(--r);padding:13px 15px;box-shadow:0 1px 3px rgba(34,28,23,.05);text-align:center}
.cityx-low{border-top-color:var(--herb)}
.cityx-high{border-top-color:var(--primary)}
.cityx-k{font-size:10.5px;letter-spacing:2px;color:var(--soft);font-weight:600}
.cityx-city{font-family:var(--serif);font-size:17px;font-weight:700;color:var(--ink);margin:5px 0 2px;text-wrap:balance}
.cityx-p{font-family:var(--serif);font-size:25px;font-weight:800;line-height:1.15;font-variant-numeric:tabular-nums}
.cityx-low .cityx-p{color:#2C6B43}
.cityx-high .cityx-p{color:var(--primary-d)}
.cityx-n{font-size:10.5px;color:var(--mut);margin-top:3px}
@media(max-width:520px){ .cityx-pair{grid-template-columns:1fr} }
/* מאגר הערכים התזונתיים — the method is three steps (reference × portion = value),
so it is drawn as three steps instead of the four-line paragraph it used to be.
The middle step is where the only estimate lives, and it says so. */
.cal-how{max-width:720px;margin:22px auto 26px}
.cal-how-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-items:stretch}
.cal-step{background:var(--card);border:1px solid var(--faint);border-radius:var(--r);
padding:15px 14px 13px;text-align:center;box-shadow:0 1px 3px rgba(34,28,23,.05);
display:flex;flex-direction:column;gap:4px}
.cal-step-n{font-family:var(--serif);font-size:30px;font-weight:800;line-height:1.05;
color:var(--acc);font-variant-numeric:tabular-nums}
.cal-step-t{font-family:var(--serif);font-size:14.5px;font-weight:700;color:var(--ink)}
.cal-step-d{font-size:11.5px;line-height:1.55;color:var(--mut);text-wrap:pretty}
.cal-step:nth-child(2){border-color:color-mix(in srgb,var(--gold) 34%,var(--faint))}
.cal-how-foot{text-align:center;font-size:11px;letter-spacing:1px;color:var(--soft);margin-top:11px}
@media(max-width:640px){
.cal-how-steps{grid-template-columns:1fr;gap:9px}
.cal-step{flex-direction:row;align-items:baseline;gap:10px;text-align:start;padding:12px 15px;flex-wrap:wrap}
.cal-step-n{font-size:22px;min-width:34px}
.cal-step-d{flex:1 0 100%}
}
/* marks a shortened kosher note — the full source wording is in the title tooltip */
.idx-kmore{color:var(--mut);font-size:10px}
/* =========================================================================
מפת הארכיון — real coordinates, plotted as inline SVG.
No tile layer (no third-party requests) and no national outline drawn:
we plot points we can source, and borders are not ours to assert.
========================================================================= */
.map-wrap{max-width:820px;margin:26px auto 0;background:var(--card);border:1px solid var(--faint);
border-radius:var(--r);padding:10px;box-shadow:0 1px 3px rgba(34,28,23,.05);
display:flex;justify-content:center}
/* The plot keeps TRUE proportions — the archive spans ~184 km north-south against ~84 km
east-west, so the natural drawing is over twice as tall as it is wide. Rather than
distort the geography, bound the rendered height and let the viewBox scale it down, so
the whole country fits on one screen instead of scrolling through empty space. */
.map-svg{display:block;width:auto;height:auto;max-width:100%;max-height:min(76vh,780px)}
.map-grid line{stroke:var(--faint2);stroke-width:1}
.map-dot{cursor:pointer}
.map-halo{fill:color-mix(in srgb,var(--acc) 12%,transparent);opacity:0;transition:opacity .18s}
.map-dot:hover .map-halo,.map-dot:focus-visible .map-halo{opacity:1}
.map-c{fill:color-mix(in srgb,var(--acc) 78%,#fff);stroke:var(--acc);stroke-width:1.5;transition:fill .18s}
.map-dot:hover .map-c{fill:var(--acc)}
.map-num{fill:#fff;font-size:10px;font-weight:700;text-anchor:middle;font-family:var(--serif);pointer-events:none}
.map-lbl{fill:var(--soft);font-size:9px;text-anchor:middle;pointer-events:none}
.map-legend{max-width:640px;margin:12px auto 0;font-size:11.5px;line-height:1.65;color:var(--mut);
text-align:center;text-wrap:pretty}
.map-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px;
max-width:820px;margin:22px auto 0}
.mapl{display:flex;align-items:center;gap:9px;text-decoration:none;background:var(--wash);
border:1px solid var(--faint);border-radius:var(--r);padding:8px 12px;transition:border-color .18s,background .18s}
.mapl:hover{background:#fff;border-color:color-mix(in srgb,var(--acc) 38%,transparent)}
.mapl-n{flex:0 0 auto;min-width:24px;text-align:center;font-family:var(--serif);font-size:15px;
font-weight:800;color:var(--acc);font-variant-numeric:tabular-nums}
.mapl-c{flex:1 1 auto;min-width:0;font-size:13.5px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mapl-i{flex:0 0 auto;font-size:10.5px;color:var(--mut);white-space:nowrap}
@media(max-width:520px){ .map-lbl{font-size:9px} .map-list{grid-template-columns:1fr} }
/* =====================================================
trust.css — transparency · report · methodology
All classes prefixed tr- (module prefix). Relies on
base.css for .trow/.tbar/.rep/.bar/.plist/.caveat etc.
===================================================== */
/* ---------- shared: honest links ---------- */
.tr-a{text-decoration:none;color:inherit}
.tr-focus:focus-visible{outline:2px solid var(--acc);outline-offset:2px;background:#f6f3ea}
.tr-plink{color:var(--acc);cursor:pointer;border-bottom:1px dotted var(--acc);transition:border-color .15s}
.tr-plink:hover{border-bottom-style:solid}
.tr-mlink{color:var(--acc);text-decoration:none;cursor:pointer;font-style:normal}
.tr-mlink:hover{text-decoration:underline}
/* ---------- transparency: computed distribution ---------- */
.tr-dist{max-width:660px;margin:34px auto 0}
.tr-dlab{text-align:center;font-size:10.5px;letter-spacing:3px;color:var(--soft);margin-bottom:10px;font-weight:400}
.tr-band{display:flex;height:26px;border:1px solid var(--ink);background:#fff}
.tr-seg{min-width:0}
.tr-seg + .tr-seg{border-right:1px solid rgba(28,25,21,.35)}
.tr-legend{display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:center;margin-top:12px;font-size:12px;color:var(--soft);font-weight:300}
.tr-legend .tr-li{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.tr-legend .tr-sw{width:12px;height:12px;border:1px solid var(--ink);display:inline-block;flex-shrink:0}
.tr-legend b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
/* ---------- transparency: ranked rows ---------- */
.tr-rank{min-width:26px;text-align:center;font-size:11px;color:#b5afa2;font-variant-numeric:tabular-nums;letter-spacing:.5px;font-weight:300}
/* ---------- report: difficulty scale note ---------- */
.tr-dnote{font-size:11.5px;color:var(--soft);margin-top:10px;font-weight:300;letter-spacing:.3px}
/* ---------- report: "what it means for the engine" ---------- */
.tr-engine{
border:1px solid var(--ink);outline:1px solid var(--ink);outline-offset:3px;
background:#fff;padding:26px 26px 12px;margin:54px 4px 10px;
}
.tr-etitle{text-align:center;font-size:14px;letter-spacing:5px;font-weight:700}
.tr-esub{text-align:center;font-size:12.5px;color:var(--soft);margin:8px 0 16px;font-weight:300;line-height:1.8}
.tr-conc{display:flex;gap:16px;padding:14px 0;border-top:1px solid var(--faint2)}
.tr-cnum{
font-family:"Frank Ruhl Libre","David Libre",serif;font-size:26px;font-weight:900;
color:var(--acc);line-height:1;min-width:32px;text-align:center;
font-variant-numeric:tabular-nums;
}
.tr-ctxt{font-size:13.5px;line-height:1.9;font-weight:300}
.tr-ctxt b{font-weight:700}
/* ---------- methodology: the charter ---------- */
.tr-method{max-width:660px;margin:0 auto}
.tr-kick{font-size:11.5px;letter-spacing:5px;color:var(--soft);font-weight:400;margin-bottom:14px}
.tr-lede{
font-size:18.5px;line-height:2.05;text-align:center;font-weight:400;
max-width:600px;margin:26px auto 4px;
}
.tr-prins{margin-top:28px}
.tr-prin{display:flex;gap:26px;padding:36px 2px;border-bottom:1px solid var(--faint2)}
.tr-prin:last-child{border-bottom:none}
.tr-pnum{font-size:40px;font-weight:900;line-height:1.1;min-width:58px;text-align:center;flex-shrink:0}
.tr-pnum i{display:block;width:20px;height:3px;background:var(--acc);margin:12px auto 0}
.tr-pbody{min-width:0}
.tr-ptitle{font-size:20px;font-weight:700;letter-spacing:.3px;line-height:1.4}
.tr-ptext{font-size:15.5px;line-height:2.05;margin-top:10px;font-weight:300}
.tr-ptext b{font-weight:700}
.tr-pfacts{
font-size:12px;color:var(--soft);margin-top:14px;line-height:2;letter-spacing:.3px;font-weight:300;
border-top:1px dotted var(--faint);padding-top:10px;
}
.tr-pfacts b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.tr-endseal{text-align:center;margin:58px auto 0}
.tr-sealw{width:96px;height:96px;margin:0 auto}
.tr-sealw svg{width:100%;height:100%}
.tr-endword{margin-top:14px;font-size:12px;letter-spacing:4px;color:var(--soft);font-weight:300}
.tr-mlinks{display:flex;gap:28px;justify-content:center;flex-wrap:wrap;margin-top:32px;font-size:13px}
.tr-mlinks a{color:var(--acc);text-decoration:none;cursor:pointer}
.tr-mlinks a:hover{text-decoration:underline}
/* ---------- small screens ---------- */
@media(max-width:640px){
.tr-rank{display:none}
.tr-trows .trow{flex-wrap:wrap}
.tr-band{height:22px}
.tr-legend{gap:6px 14px;font-size:11px}
.tr-engine{padding:20px 16px 8px;margin:46px 4px 8px}
.tr-prin{gap:15px;padding:28px 0}
.tr-pnum{font-size:30px;min-width:40px}
.tr-ptitle{font-size:18px}
.tr-lede{font-size:16.5px;line-height:2}
}
/* ---------- print: the charter reads like a document ---------- */
@media print{
.tr-mlinks{display:none}
.tr-engine{outline-offset:3px}
.tr-focus:focus-visible{outline:none;background:none}
}
/* the three headline findings — the page's whole argument, so they read as figures
rather than as bold runs inside a paragraph. Colour is deliberately withheld here:
the distribution band and the score rows below already carry the semantic scale. */
.tr-figs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:720px;margin:24px auto 30px}
.tr-fig{background:var(--card);border:1px solid var(--faint);border-radius:var(--r);
padding:16px 14px 13px;text-align:center;box-shadow:0 1px 3px rgba(34,28,23,.05)}
.tr-fig-n{font-family:var(--serif);font-size:34px;font-weight:800;line-height:1.05;
color:var(--acc);font-variant-numeric:tabular-nums}
.tr-fig-u{font-size:15px;font-weight:700;margin-inline-start:1px}
.tr-fig-l{font-size:11.5px;line-height:1.55;color:var(--soft);margin-top:7px;text-wrap:pretty}
@media(max-width:640px){
.tr-figs{grid-template-columns:1fr;gap:10px;margin:18px auto 22px}
.tr-fig{display:flex;align-items:baseline;gap:10px;text-align:start;padding:12px 15px}
.tr-fig-n{font-size:26px}
.tr-fig-l{margin-top:0}
}
/* entity.css — about / restaurants / press (prefix: ent-) */
.ent-body{max-width:680px;margin:0 auto;padding-top:8px}
.ent-lead{font-size:19px;line-height:1.85;margin:0 0 8px;font-weight:400}
.ent-body p{font-size:16px;line-height:1.9;margin:0 0 6px;font-weight:300}
.ent-body p b, .ent-rule b{font-weight:700}
.ent-h{
font-size:14px;letter-spacing:4px;font-weight:700;margin:40px 0 14px;
display:flex;align-items:center;gap:14px;
}
.ent-h::after{content:'';flex:1;height:1px;background:var(--faint)}
.ent-band{margin:6px 0 18px}
.ent-rule{
font-size:16.5px;line-height:1.9;padding:18px 22px;background:var(--faint2);
border-right:2px solid var(--acc);font-weight:300;
}
.ent-list{list-style:none;padding:0;margin:6px 0}
.ent-list li{
font-size:15.5px;line-height:1.7;padding:8px 0 8px 0;padding-right:22px;position:relative;
border-bottom:1px solid var(--faint2);font-weight:300;
}
.ent-list li::before{content:'—';position:absolute;right:0;color:var(--acc)}
.ent-soon li{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.ent-tag{
font-family:"Heebo",sans-serif;font-size:10.5px;letter-spacing:1px;color:var(--soft);
border:1px solid var(--faint);border-radius:2px;padding:2px 8px;white-space:nowrap;
}
.ent-card{
background:#fff;border:1px solid var(--ink);box-shadow:3px 3px 0 var(--faint);
padding:18px 20px;margin:12px 0;
}
.ent-mono{font-family:Consolas,"Courier New",monospace;font-size:13.5px;line-height:1.9;color:var(--ink)}
.ent-quote{font-size:18px;line-height:1.7;font-style:normal;color:var(--ink)}
.ent-muted{color:var(--soft);font-size:13.5px;font-weight:300}
.ent-hero-stat{font-size:18px;line-height:1.8;padding:14px 0;border-top:1px solid var(--faint);border-bottom:1px solid var(--faint);margin:14px 0}
.ent-hero-stat b{font-weight:900}
.ent-hero-stat a, .ent-body a{color:var(--acc);cursor:pointer;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s}
.ent-body a:hover{border-color:var(--acc)}
.ent-sealrow{display:flex;gap:18px;justify-content:center;margin:16px 0}
.ent-sealbox{width:66px;height:66px;opacity:.9}
.ent-contact{
font-size:16px;line-height:1.9;padding:16px 20px;background:var(--faint2);margin-top:8px;
}
.ent-contact b{font-weight:700}
@media(max-width:640px){
.ent-lead{font-size:17px}
.ent-body{padding-inline:2px}
.ent-sealrow{gap:12px}
}
/* legal.css — accessibility / terms / 404 (prefix: lgl-) */
.lgl-body{max-width:680px;margin:0 auto}
.lgl-stamp{
display:inline-block;font-size:11px;letter-spacing:2px;color:var(--soft);
border:1px solid var(--faint);border-radius:2px;padding:4px 12px;margin-bottom:8px;
}
.lgl-body p{font-size:16px;line-height:1.9;margin:0 0 8px;font-weight:300}
.lgl-body p b{font-weight:700}
.lgl-h{
font-size:14px;letter-spacing:3px;font-weight:700;margin:34px 0 12px;
display:flex;align-items:center;gap:14px;
}
.lgl-h::after{content:'';flex:1;height:1px;background:var(--faint)}
.lgl-list{list-style:none;padding:0;margin:6px 0}
.lgl-list li{
font-size:15.5px;line-height:1.7;padding:8px 26px 8px 0;position:relative;
border-bottom:1px solid var(--faint2);font-weight:300;
}
.lgl-yes li::before{content:'✓';position:absolute;right:0;color:#3d7a4f;font-weight:700}
.lgl-no li::before{content:'○';position:absolute;right:0;color:#9c3c30}
.lgl-muted{color:var(--soft);font-size:13.5px;font-weight:300}
.lgl-body a{color:var(--acc);cursor:pointer;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s}
.lgl-body a:hover{border-color:var(--acc)}
/* 404 */
.lgl-404{text-align:center;max-width:520px;margin:0 auto;padding:70px 0 90px}
.lgl-404ink{width:88px;height:88px;margin:0 auto 20px;color:#c9c2b2}
.lgl-404 h1{font-size:clamp(30px,6vw,48px);font-weight:900;line-height:1.15}
.lgl-404sub{font-size:16px;color:var(--soft);margin-top:14px;font-weight:300}
.lgl-404links{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin-top:30px;font-size:15px}
.lgl-404links a{color:var(--acc);cursor:pointer;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s}
.lgl-404links a:hover{border-color:var(--acc)}
@media(max-width:640px){ .lgl-body{padding-inline:2px} }
/* hummus.css — מדד החומוס (prefix: hum-) */
.hum-ink{width:60px;height:60px;margin:0 auto 4px;color:var(--acc)}
.hum-hero{text-align:center;padding:20px 0 34px;border-bottom:1px solid var(--faint);max-width:680px;margin:0 auto}
.hum-heronum{font-size:clamp(72px,15vw,120px);font-weight:900;line-height:1;color:var(--acc);font-variant-numeric:tabular-nums}
.hum-herolbl{font-size:16px;letter-spacing:2px;color:var(--ink);margin-top:6px}
.hum-herosub{font-size:13.5px;color:var(--soft);margin-top:10px;font-weight:300}
.hum-herosub b{color:var(--ink);font-weight:700}
.hum-h{
font-size:14px;letter-spacing:4px;font-weight:700;margin:38px 0 8px;text-align:center;
}
.hum-sub{text-align:center;font-size:13px;color:var(--soft);font-weight:300;margin-bottom:18px}
.hum-cities{max-width:620px;margin:0 auto}
.hum-crow{display:grid;grid-template-columns:92px 1fr 62px auto;align-items:center;gap:12px;padding:9px 4px;border-bottom:1px solid var(--faint2)}
.hum-city{font-size:15.5px;font-weight:700}
.hum-bar{height:10px;background:var(--faint2);position:relative;border-radius:2px}
.hum-bar i{position:absolute;right:0;top:0;bottom:0;background:var(--acc);border-radius:2px;opacity:.85}
.hum-cmed{font-size:16px;font-weight:900;font-variant-numeric:tabular-nums;text-align:left}
.hum-cn{font-size:11.5px;color:var(--soft);white-space:nowrap;font-weight:300}
.hum-single{max-width:620px;margin:14px auto 0;text-align:center;font-size:12.5px;color:var(--soft);font-style:normal;font-weight:300;line-height:1.7}
.hum-plates{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:620px;margin:8px auto 0}
.hum-plate{
border:1px solid var(--ink);background:#fff;box-shadow:3px 3px 0 var(--faint);
padding:18px 20px;text-align:center;transition:transform .2s, box-shadow .2s;
}
.hum-plate:hover{transform:translate(-2px,-3px);box-shadow:6px 7px 0 var(--faint)}
.hum-ptag{font-size:11px;letter-spacing:3px;color:var(--soft)}
.hum-pprice{font-size:34px;font-weight:900;color:var(--acc);font-variant-numeric:tabular-nums;margin:4px 0}
.hum-pname{font-size:13.5px;line-height:1.6;color:var(--ink);font-weight:300}
.hum-pname b{font-weight:700}
.hum-src{font-size:11px;color:var(--soft)}
.hum-method{max-width:680px;margin:34px auto 0}
.hum-method p{font-size:15.5px;line-height:1.9;font-weight:300}
.hum-method p b{font-weight:700}
.hum-cite{
background:var(--faint2);padding:16px 20px;margin-top:14px;font-size:16px;line-height:1.7;
font-style:normal;border-right:2px solid var(--acc);
}
.hum-citetitle{font-style:normal;font-size:11px;letter-spacing:2px;color:var(--soft);margin-bottom:4px}
.hum-more{text-align:center;margin:30px auto 0;font-size:14px}
.hum-more a{color:var(--acc);cursor:pointer;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s}
.hum-more a:hover{border-color:var(--acc)}
@media(max-width:640px){
.hum-crow{grid-template-columns:70px 1fr 52px;gap:8px}
.hum-cn{display:none}
.hum-plates{grid-template-columns:1fr}
}
/* ============================================================
search.css — styles owned by the search agent (prefix: sr-).
#/search — cross-restaurant dish / ingredient search.
Builds on base.css tokens only (--paper/--ink/--acc/--soft/
--faint/--faint2/--card/--wash/--mut/--sans/--serif/--hair…).
Warm paper, hairlines, tabular price columns, centered
letter-spaced headers, NO italic on Hebrew.
============================================================ */
/* ---------- head ---------- */
.sr-head{padding-bottom:8px}
.sr-k{
font-size:11.5px;letter-spacing:5px;color:var(--soft);font-weight:400;
text-transform:none;margin-bottom:10px;
}
/* ---------- the search field: a bare ledger underline ---------- */
.sr-fieldwrap{max-width:560px;margin:8px auto 0}
.sr-srlabel{ /* visually hidden, still read by SR */
position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.sr-field{
display:flex;align-items:center;gap:10px;
border-bottom:2px solid var(--ink);
padding:8px 4px 10px;
transition:border-color .2s;
}
.sr-field:focus-within{border-color:var(--acc)}
.sr-mag{
width:20px;height:20px;flex-shrink:0;
fill:none;stroke:var(--soft);stroke-width:2;stroke-linecap:round;
transition:stroke .2s;
}
.sr-field:focus-within .sr-mag{stroke:var(--acc)}
.sr-field input{
flex:1;min-width:0;
font-family:var(--serif);font-size:24px;font-weight:400;
background:transparent;border:none;outline:none;color:var(--ink);
padding:2px 0;line-height:1.3;
appearance:none;-webkit-appearance:none;
}
.sr-field input::placeholder{color:var(--ph);font-weight:300}
.sr-field input::-webkit-search-decoration,
.sr-field input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.sr-clear{
flex-shrink:0;width:28px;height:28px;border-radius:50%;
border:1px solid var(--faint);background:transparent;color:var(--soft);
font-size:18px;line-height:1;font-family:var(--sans);
display:inline-flex;align-items:center;justify-content:center;
transition:border-color .15s,color .15s,transform .15s;
}
.sr-clear:hover{border-color:var(--acc);color:var(--acc);transform:rotate(90deg)}
.sr-clear:focus-visible{outline-color:var(--acc)}
/* ---------- craving chips ---------- */
.sr-chips{
display:flex;gap:7px 9px;flex-wrap:wrap;justify-content:center;
max-width:720px;margin:22px auto 4px;
}
.sr-chip{
font-family:var(--sans);font-size:13px;line-height:1.4;letter-spacing:.3px;
color:var(--ink);cursor:pointer;background:transparent;
border:none;border-bottom:1px dotted var(--faint);
padding:4px 3px;display:inline-flex;align-items:baseline;gap:4px;
transition:color .15s,border-color .15s;
}
.sr-chip:hover{color:var(--acc);border-bottom-color:var(--acc);border-bottom-style:solid}
.sr-chip .sr-chipn{
font-size:10px;color:var(--mut);font-variant-numeric:tabular-nums;
letter-spacing:0;transition:color .15s;
}
.sr-chip:hover .sr-chipn{color:var(--acc)}
.sr-chipon{color:var(--acc);border-bottom:1px solid var(--acc);font-weight:700}
.sr-chipon .sr-chipn{color:var(--acc)}
.sr-chip:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:2px}
/* ---------- the "מפת המנה" summary card ---------- */
.sr-card{
max-width:640px;margin:34px auto 8px;
background:var(--card);border:1px solid var(--ink);
box-shadow:var(--lift);
padding:22px 26px 20px;
}
.sr-cardhd{display:flex;align-items:center;gap:16px;margin-bottom:6px}
.sr-emblem{width:60px;height:60px;flex-shrink:0}
.sr-emblem svg{display:block;width:100%;height:100%}
.sr-cardttl{min-width:0}
.sr-cardk{
font-size:10px;letter-spacing:4px;color:var(--acc);font-weight:500;
margin-bottom:3px;
}
.sr-cardttl h2{
font-family:var(--serif);font-size:30px;font-weight:900;line-height:1.15;
overflow-wrap:break-word;
}
.sr-cardsub{font-size:12px;color:var(--soft);font-weight:300;margin-top:3px;letter-spacing:.3px}
.sr-cardstats{
display:flex;flex-wrap:wrap;gap:1px;background:var(--faint);
border-top:var(--hair);border-bottom:var(--hair);
margin:16px 0 0;
}
.sr-cs{
flex:1 1 90px;min-width:0;padding:12px 14px;text-align:center;background:var(--card);
}
.sr-csv{
display:block;font-family:var(--serif);font-size:22px;font-weight:900;
font-variant-numeric:tabular-nums;white-space:nowrap;line-height:1.15;
}
.sr-csl{display:block;font-family:var(--sans);font-size:10px;letter-spacing:1.5px;color:var(--soft);margin-top:3px;font-weight:400}
.sr-cardnote{margin-top:14px;font-size:12.5px;color:var(--soft);text-align:center;font-weight:300;line-height:1.8}
.sr-cardends{display:flex;gap:1px;background:var(--faint);margin-top:1px}
.sr-endcol{flex:1 1 0;min-width:0;background:var(--card);padding:12px 14px;text-align:center}
.sr-endtag{font-size:10px;letter-spacing:2.5px;color:var(--acc);font-weight:500;margin-bottom:6px}
.sr-occ{
display:block;text-decoration:none;color:inherit;
transition:transform .15s;
}
.sr-occ:hover{transform:translateY(-1px)}
.sr-occprice{
display:block;font-family:var(--serif);font-size:19px;font-weight:900;
font-variant-numeric:tabular-nums;line-height:1.2;
}
.sr-occ:hover .sr-occprice{color:var(--acc)}
.sr-occwhere{display:block;font-family:var(--sans);font-size:12px;color:var(--soft);font-weight:300;margin-top:3px;line-height:1.5}
.sr-occwhere b{color:var(--ink);font-weight:700}
.sr-occ:hover .sr-occwhere b{color:var(--acc)}
.sr-cardlink{
display:block;text-align:center;margin-top:18px;padding-top:14px;
border-top:var(--hair2);
font-size:13px;color:var(--acc);text-decoration:none;font-weight:400;letter-spacing:.3px;
}
.sr-cardlink:hover{text-decoration:underline}
/* ---------- result count line ---------- */
.sr-count{
max-width:660px;margin:30px auto 4px;text-align:center;
font-size:14px;color:var(--soft);font-weight:300;letter-spacing:.3px;line-height:1.8;
}
.sr-count b{color:var(--ink);font-weight:700;font-family:var(--serif);font-size:17px}
.sr-cap{color:var(--mut);font-size:12px}
/* ---------- result rows ---------- */
.sr-rows{max-width:660px;margin:10px auto 0}
.sr-row{
display:flex;align-items:baseline;gap:14px;padding:13px 6px;
border-bottom:var(--hair2);cursor:pointer;text-decoration:none;color:inherit;
transition:background .2s;
}
.sr-row:hover,
.sr-row:focus-visible{background:var(--wash)}
.sr-row:focus-visible{outline:2px solid var(--acc);outline-offset:-2px;border-radius:2px}
.sr-price{
font-family:var(--serif);font-size:19px;font-weight:900;
min-width:70px;font-variant-numeric:tabular-nums;line-height:1.3;flex-shrink:0;
}
.sr-price.sr-na{color:var(--mut);font-weight:300;font-size:12px;letter-spacing:.5px}
.sr-main{min-width:0;flex:1;display:flex;flex-direction:column}
.sr-name{font-family:var(--serif);font-weight:700;font-size:16.5px;line-height:1.4;overflow-wrap:break-word}
.sr-rest{font-size:13px;color:var(--soft);font-weight:300;display:inline}
.sr-desc{
font-size:12.5px;color:var(--soft);font-weight:300;line-height:1.6;margin-top:3px;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.sr-meta{
margin-right:auto;font-size:11.5px;color:var(--soft);letter-spacing:.4px;
white-space:nowrap;font-weight:300;align-self:center;text-align:left;
}
.sr-row:hover .sr-price{color:var(--acc)}
/* ---------- empty state (no query) ---------- */
.sr-invite{
max-width:560px;margin:26px auto 0;text-align:center;
font-size:14.5px;color:var(--soft);font-weight:300;line-height:1.9;letter-spacing:.3px;
}
.sr-topwrap{max-width:760px;margin:40px auto 0}
.sr-toptitle{
text-align:center;font-family:var(--serif);font-size:15px;font-weight:700;
letter-spacing:5px;color:var(--ink);margin-bottom:22px;
display:flex;align-items:center;gap:16px;justify-content:center;
}
.sr-toptitle::before,
.sr-toptitle::after{content:'';flex:1;max-width:80px;height:1px;background:var(--faint)}
.sr-top{
display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;
}
.sr-topcard{
border:1px solid var(--ink);background:var(--card);padding:16px 14px 14px;
text-align:center;text-decoration:none;color:inherit;
box-shadow:var(--lift);
display:flex;flex-direction:column;align-items:center;
transition:transform .2s,box-shadow .2s;
}
.sr-topcard:hover,
.sr-topcard:focus-visible{transform:translateY(-4px);box-shadow:var(--lift2)}
.sr-topink{width:40px;height:40px;color:var(--soft2);margin-bottom:8px}
.sr-topink svg{display:block;width:100%;height:100%}
.sr-topname{font-family:var(--serif);font-size:18px;font-weight:700;line-height:1.25}
.sr-topmeta{margin-top:8px;display:flex;flex-direction:column;align-items:center;min-height:34px;justify-content:center}
.sr-topmed{font-family:var(--serif);font-size:22px;font-weight:900;font-variant-numeric:tabular-nums;line-height:1.1}
.sr-topmedl{font-size:9.5px;letter-spacing:1px;color:var(--soft);margin-top:2px;font-weight:400}
.sr-topocc{font-size:10.5px;color:var(--mut);margin-top:8px;letter-spacing:.5px;font-weight:300}
/* ---------- empty results (query, no match) ---------- */
.sr-none{
text-align:center;padding:48px 0 20px;color:var(--soft);
font-size:16.5px;line-height:2;font-weight:300;
}
.sr-noneink{width:64px;height:64px;margin:0 auto 14px;color:var(--faint3)}
.sr-noneink svg{display:block;width:100%;height:100%}
.sr-nonehint{display:block;font-size:13px;color:var(--mut);margin-top:6px;font-weight:300}
/* ---------- small screens ---------- */
@media (max-width:640px){
.sr-field input{font-size:19px} /* still ≥16px: iOS won't zoom */
.sr-fieldwrap{max-width:none}
.sr-cardttl h2{font-size:25px}
.sr-emblem{width:50px;height:50px}
.sr-card{padding:18px 16px 16px}
.sr-csv{font-size:19px}
.sr-row{gap:10px;flex-wrap:wrap;row-gap:2px}
.sr-price{min-width:58px;font-size:17px}
.sr-meta{flex-basis:100%;text-align:right;margin-right:0;margin-top:2px;align-self:auto}
.sr-toptitle{letter-spacing:3px}
.sr-top{grid-template-columns:repeat(2,1fr);gap:10px}
}
@media (max-width:480px){
.sr-topcard{padding:12px 8px 10px}
.sr-topink{width:34px;height:34px}
.sr-topname{font-size:16px}
.sr-topmed{font-size:19px}
}
/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
.sr-clear:hover{transform:none}
.sr-topcard:hover,.sr-topcard:focus-visible,
.sr-occ:hover,.sr-row:hover{transform:none}
}
/* ---------- print ---------- */
@media print{
.sr-field,.sr-chips,.sr-clear,.sr-mag,.sr-invite{display:none !important}
.sr-card,.sr-topcard{box-shadow:none;break-inside:avoid}
.sr-row{break-inside:avoid}
.sr-count{margin-top:8px}
}
/* ============================================================
FINDER upgrade — filters, dish-first rows, compare, prepared
============================================================ */
/* row is now a div: checkbox · price · link(main) · meta */
.sr-row{align-items:flex-start}
.sr-main{flex-direction:row;gap:11px;align-items:flex-start;text-decoration:none;color:inherit;min-width:0}
.sr-maintxt{min-width:0;display:flex;flex-direction:column}
.sr-thumb{width:44px;height:44px;object-fit:cover;flex-shrink:0;border-radius:8px;background:#fff;box-shadow:0 1px 4px rgba(20,10,4,.14);margin-top:2px} /* FULL COLOUR */
.sr-price{align-self:flex-start;margin-top:1px}
/* compare pick */
.sr-pick{flex-shrink:0;align-self:center;cursor:pointer;padding:4px 0 4px 2px;display:inline-flex}
.sr-pick input{position:absolute;opacity:0;width:1px;height:1px}
.sr-pickbox{width:16px;height:16px;border:1.5px solid var(--soft2);border-radius:4px;display:inline-block;position:relative;transition:border-color .15s,background .15s;background:var(--card)}
.sr-pick:hover .sr-pickbox{border-color:var(--acc)}
.sr-pick input:checked + .sr-pickbox{background:var(--acc);border-color:var(--acc)}
.sr-pick input:checked + .sr-pickbox::after{content:'';position:absolute;inset:3px 4px 5px 4px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)}
.sr-pick input:focus-visible + .sr-pickbox{outline:2px solid var(--acc);outline-offset:2px}
/* dietary tag pills on the row */
.sr-tag{font-family:var(--sans);display:inline-block;font-size:9px;letter-spacing:.8px;font-weight:600;border-radius:3px;padding:1px 5px;vertical-align:2px;margin-right:4px;white-space:nowrap}
.sr-tag-vegan,.sr-tag-veg{color:#2e6b45;background:color-mix(in srgb,#2e6b45 10%,transparent)}
.sr-tag-gf{color:#8a6a1e;background:color-mix(in srgb,#8a6a1e 10%,transparent)}
.sr-tag-spicy{color:#a3532a;background:color-mix(in srgb,#a3532a 10%,transparent)}
.sr-kmark{color:#2e6b45;font-weight:600}
.sr-openmark{color:#2e6b45;font-weight:600}
/* ---------- filter bar ---------- */
.sr-filters{
max-width:660px;margin:14px auto 0;display:flex;flex-wrap:wrap;gap:7px 9px;align-items:center;justify-content:center;
padding:9px 12px;border:1px solid var(--faint);border-radius:10px;background:color-mix(in srgb,var(--ink) 2%,transparent);
}
.sr-fsel{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--soft);letter-spacing:.5px}
.sr-fsel select{
font:inherit;font-size:12.5px;color:var(--ink);background:var(--card);border:1px solid var(--faint);
border-radius:6px;padding:4px 8px;cursor:pointer;max-width:150px;
}
.sr-fsel select:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
.sr-ftgl{
font:inherit;font-size:12px;letter-spacing:.3px;color:var(--soft);background:var(--card);
border:1px solid var(--faint);border-radius:14px;padding:4px 11px;cursor:pointer;
transition:color .15s,border-color .15s,background .15s;
}
.sr-ftgl:hover{border-color:var(--acc);color:var(--acc)}
.sr-fon{background:var(--acc);border-color:var(--acc);color:#fff;font-weight:600}
.sr-fon:hover{color:#fff}
.sr-fclear{background:none;border:none;font:inherit;font-size:11px;color:var(--soft2);cursor:pointer;letter-spacing:.4px;text-decoration:underline dotted}
.sr-fclear:hover{color:var(--acc)}
/* ---------- prepared searches ---------- */
.sr-prepwrap{max-width:700px;margin:30px auto 0}
.sr-preptitle{
text-align:center;font-family:var(--serif);font-size:14px;font-weight:700;letter-spacing:5px;color:var(--ink);
margin-bottom:14px;display:flex;align-items:center;gap:16px;justify-content:center;
}
.sr-preptitle::before,.sr-preptitle::after{content:'';flex:1;max-width:70px;height:1px;background:var(--faint)}
.sr-preps{display:flex;flex-wrap:wrap;gap:9px;justify-content:center}
.sr-prep{
text-decoration:none;color:var(--ink);font-size:13px;font-weight:400;letter-spacing:.2px;
border:1px solid var(--faint);border-radius:var(--r-pill);padding:6px 13px;background:var(--card);
box-shadow:0 1px 3px rgba(34,28,23,.06);transition:transform .15s,box-shadow .15s,color .15s,border-color .15s;
display:inline-flex;align-items:center;gap:7px;
}
.sr-prep:hover{transform:translateY(-1px);box-shadow:var(--lift);color:var(--primary-d);border-color:var(--primary)}
.sr-prepn{font-size:10px;color:var(--soft);background:var(--faint2);border-radius:8px;padding:1px 6px;font-weight:600}
.sr-prepnote{margin-top:10px;text-align:center;font-size:10.5px;color:var(--mut);font-weight:300;letter-spacing:.3px}
/* ---------- compare tray (fixed bottom) ---------- */
.sr-tray{
position:fixed;bottom:14px;left:50%;transform:translateX(-50%);z-index:60;
display:flex;align-items:center;gap:12px;padding:9px 18px;
background:var(--ink);color:#f5f1e6;border-radius:24px;box-shadow:0 6px 22px rgba(28,25,21,.35);
}
.sr-trayn{font-size:12.5px;letter-spacing:.3px;font-weight:300}
.sr-traygo{
font:inherit;font-size:13px;font-weight:700;color:var(--ink);background:#f5f1e6;border:none;border-radius:14px;
padding:5px 14px;cursor:pointer;letter-spacing:.3px;
}
.sr-traygo:hover{background:#fff}
.sr-trayclear{background:none;border:none;font:inherit;font-size:11px;color:#cfc7b4;cursor:pointer;text-decoration:underline dotted}
.sr-trayclear:hover{color:#fff}
/* ---------- comparison table ---------- */
.sr-cmp{
max-width:820px;margin:26px auto 0;background:var(--card);border:1px solid var(--ink);
box-shadow:var(--lift);padding:18px 18px 14px;
}
.sr-cmphead{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.sr-cmphead h2{font-family:var(--serif);font-size:16px;font-weight:700;letter-spacing:4px}
.sr-cmpclose{background:none;border:none;font:inherit;font-size:11.5px;color:var(--soft2);cursor:pointer;letter-spacing:.5px}
.sr-cmpclose:hover{color:var(--acc)}
.sr-cmptbl{overflow-x:auto;border-top:1px solid var(--faint)}
.sr-cmprow{
display:grid;grid-template-columns:86px repeat(var(--cols,2),minmax(130px,1fr));gap:10px;
padding:9px 2px;border-bottom:1px solid var(--faint2);align-items:baseline;
}
.sr-cmplbl{font-size:10.5px;letter-spacing:1px;color:var(--soft);font-weight:500;align-self:start;padding-top:2px}
.sr-cmpcell{font-size:13px;line-height:1.65;font-weight:300;color:var(--ink);min-width:0;overflow-wrap:break-word}
.sr-cmpname .sr-cmpcell b{font-family:var(--serif);font-size:14.5px;font-weight:700}
.sr-cmpprice{font-family:var(--serif);font-size:18px;font-weight:900;font-variant-numeric:tabular-nums}
.sr-cmpcell a{color:var(--ink);text-decoration:none;font-weight:700;border-bottom:1px solid transparent}
.sr-cmpcell a:hover{color:var(--acc);border-color:var(--acc)}
.sr-cmpcity{display:block;font-size:11px;color:var(--soft)}
.sr-cmpna{color:var(--mut);font-weight:300;font-size:12px}
.sr-cmpest{font-style:normal;font-size:8px;letter-spacing:1.5px;color:#8a6a1e;border:1px solid color-mix(in srgb,#8a6a1e 40%,transparent);border-radius:2px;padding:0 4px;vertical-align:2px}
.sr-cmpsrc{font-size:11px;color:var(--soft)}
.sr-cmpnote{margin-top:10px;font-size:11px;color:var(--soft);font-weight:300;line-height:1.7;letter-spacing:.2px}
@media (max-width:640px){
.sr-filters{gap:6px 7px;padding:8px 9px}
.sr-fsel select{max-width:130px;font-size:16px;padding:3px 6px} /* ≥16px: iOS must not zoom on focus */
.sr-thumb{width:38px;height:38px}
.sr-tray{bottom:10px;max-width:94vw;padding:8px 14px;gap:9px}
.sr-cmprow{grid-template-columns:70px repeat(var(--cols,2),minmax(110px,1fr))}
}
@media print{
.sr-filters,.sr-tray,.sr-pick{display:none !important}
.sr-cmp{box-shadow:none;break-inside:avoid}
}
/* =====================================================================
language.css — מדד השפה של התפריט (prefix: lg-)
A bookish, editorial data page in the house style. Builds on base.css:
the word/lexicon boards reuse .bar/.bl/.bt/.bn, so only the deltas live
here. One accent (aubergine, set by the view). Hairlines, tabular price
columns, centered letter-spaced section headers, no italic on Hebrew.
===================================================================== */
/* the micrography emblem — sits like a printer's device above the title */
.lg-emblem{
width:112px;height:112px;margin:0 auto 10px;
opacity:.94;
}
.lg-emblem svg{display:block;width:100%;height:100%}
/* a book title, set apart by tracking + weight (never italic) */
.lg-book{font-weight:700;letter-spacing:.4px;white-space:nowrap}
/* ---- section header: centered, letter-spaced, hairline flanks ---- */
.lg-h{
font-size:14px;letter-spacing:5px;font-weight:700;line-height:1.5;
text-align:center;margin:56px 0 6px;
display:flex;align-items:center;gap:18px;justify-content:center;
}
.lg-h::before,.lg-h::after{content:'';height:1px;background:var(--faint);flex:1;max-width:120px}
.lg-hsub{
max-width:600px;margin:0 auto 22px;text-align:center;
font-size:13.5px;color:var(--soft);line-height:1.85;font-weight:300;text-wrap:pretty;
}
/* ---- headline stat band note ---- */
.lg-headline{margin-top:28px}
.lg-headline .nv{color:var(--acc)}
.lg-headnote{margin-top:14px}
/* ================= 1 · the words board ================= */
.lg-words{max-width:640px;margin:0 auto}
/* two-up on wide screens — a dense, ledger-like word list */
@media(min-width:721px){
.lg-words{
max-width:820px;
columns:2;column-gap:52px;column-rule:var(--hair2);
}
.lg-wbar{break-inside:avoid}
}
.lg-wbar{margin-bottom:9px}
.lg-wl{
display:flex;align-items:baseline;gap:8px;width:132px;
font-family:var(--serif);font-size:16px;font-weight:700;line-height:1.35;
}
.lg-rank{
font-size:11px;color:var(--mut);font-weight:400;min-width:20px;
font-variant-numeric:tabular-nums;letter-spacing:.5px;
}
/* the accent lives in this section's bars — it is the page's subject */
.lg-wbar .bt i{background:var(--acc);opacity:.9}
.lg-wbar .bn{font-weight:700;color:var(--ink)}
/* ============== 2 · 3 · lexicon boards ============== */
.lg-lex{max-width:560px;margin:0 auto}
.lg-lexbar{margin-bottom:9px}
.lg-lexl{
width:132px;font-family:var(--serif);font-size:16.5px;font-weight:700;line-height:1.35;
}
.lg-lexbar .bt i{background:var(--ink);opacity:.82}
.lg-lexbar .bn{font-weight:700;color:var(--ink)}
/* the "total N, across M restaurants" line under a lexicon board */
.lg-tally{
max-width:600px;margin:16px auto 0;text-align:center;
font-size:12.5px;color:var(--soft);line-height:1.9;font-weight:300;text-wrap:pretty;
}
.lg-tally b{color:var(--ink);font-weight:700}
/* an honest empty lexicon (e.g. origin words that never appeared) */
.lg-empty{
max-width:560px;margin:8px auto 0;text-align:center;
background:var(--faint2);padding:14px 20px;
font-size:13px;color:var(--soft);line-height:1.85;font-weight:300;
}
/* ================= 4 · length × price ================= */
.lg-lpwrap{
max-width:600px;margin:4px auto 0;
display:flex;flex-direction:column;gap:20px;
}
.lg-lp{width:100%}
.lg-lptop{
display:flex;align-items:baseline;gap:8px;justify-content:space-between;
font-size:14px;font-weight:700;color:var(--ink);letter-spacing:.3px;margin-bottom:7px;
font-family:var(--serif);
}
.lg-lpcut{font-family:var(--sans);font-size:12px;font-weight:400;color:var(--soft);letter-spacing:.5px;font-variant-numeric:tabular-nums}
.lg-lpbar{
position:relative;height:34px;background:var(--faint2);overflow:hidden;
border:var(--hair2);
}
.lg-lpbar i{position:absolute;right:0;top:0;bottom:0;background:var(--acc);opacity:.9}
.lg-lpnum{
position:absolute;right:12px;top:50%;transform:translateY(-50%);
font-family:var(--serif);font-size:19px;font-weight:900;color:var(--paper);
font-variant-numeric:tabular-nums;line-height:1;white-space:nowrap;
text-shadow:0 1px 2px rgba(0,0,0,.25);
}
.lg-lpunit{font-family:var(--sans);font-size:11px;font-weight:400;letter-spacing:1px;text-shadow:none}
.lg-lpbot{font-size:11.5px;color:var(--soft);letter-spacing:.5px;margin-top:6px;font-weight:300;font-variant-numeric:tabular-nums}
.lg-lpnote{margin-top:22px}
/* ================= methodology + citation ================= */
.lg-method{max-width:660px;margin:12px auto 0}
.lg-method p{font-size:15px;line-height:1.95;font-weight:300}
.lg-method p b{font-weight:700}
.lg-cite{
background:var(--faint2);padding:16px 20px;margin-top:14px;
font-size:14.5px;line-height:1.75;font-weight:300;
border-right:2px solid var(--acc);
}
.lg-cite .lg-book{font-weight:700}
.lg-citetitle{font-size:11px;letter-spacing:2px;color:var(--soft);margin-bottom:5px;font-weight:400}
/* cross-links, in the house "…more" idiom */
.lg-more{text-align:center;margin:30px auto 0;font-size:14px}
.lg-more a{
color:var(--acc);cursor:pointer;text-decoration:none;
border-bottom:1px solid transparent;transition:border-color .2s;
}
.lg-more a:hover{border-color:var(--acc)}
/* ============================ mobile ============================ */
@media(max-width:640px){
.lg-emblem{width:92px;height:92px}
.lg-h{letter-spacing:3px;gap:12px;margin-top:44px}
.lg-h::before,.lg-h::after{max-width:40px}
.lg-wl,.lg-lexl{width:110px;font-size:15px}
.lg-wbar .bn,.lg-lexbar .bn{width:44px;font-size:12px}
.lg-lptop{font-size:13px}
.lg-lpnum{font-size:17px}
.lg-method p{font-size:14px}
}
/* basket.css — מדד הצלחת הישראלית (prefix: bk-)
A fixed basket of real published dish-medians, summed into one plate
figure — in the spirit of The Economist's Big Mac Index. Warm paper,
one accent, hairlines. 100% computed live from DISH_IDX; nothing here
styles invented data — partial baskets are drawn as partial on purpose. */
/* ---- header emblem (micrography medallion) ---- */
.bk-emblem{width:96px;height:96px;margin:0 auto 6px}
.bk-emblem svg{display:block;width:100%;height:100%}
/* ---- the headline plate ---- */
.bk-hero{
text-align:center;padding:14px 0 30px;max-width:680px;margin:0 auto;
border-bottom:1px solid var(--faint);
}
.bk-heronum{
font-size:clamp(76px,16vw,132px);font-weight:900;line-height:1;color:var(--acc);
font-variant-numeric:tabular-nums;letter-spacing:-1px;
}
.bk-herolbl{font-size:16px;letter-spacing:2px;color:var(--ink);margin-top:8px}
.bk-herosub{font-size:13.5px;color:var(--soft);margin-top:10px;font-weight:300;line-height:1.8}
.bk-herosub b{color:var(--ink);font-weight:700}
/* ---- the basket breakdown: the plate, itemised ---- */
.bk-breakdown{max-width:560px;margin:26px auto 0}
.bk-brow{
display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:14px;
padding:12px 6px;border-bottom:var(--hair2);
cursor:pointer;text-decoration:none;color:inherit;
transition:background .2s;
}
.bk-brow:hover,
.bk-brow:focus-visible{background:var(--wash)}
.bk-bink{width:34px;height:34px;color:var(--soft2)}
.bk-bink svg{display:block;width:100%;height:100%}
.bk-bname{font-size:17px;font-weight:700;line-height:1.3}
.bk-bmeta{font-size:11.5px;color:var(--soft);font-weight:300;margin-top:1px;letter-spacing:.3px}
.bk-bprice{font-size:20px;font-weight:900;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink)}
.bk-btot{
display:grid;grid-template-columns:34px 1fr auto;align-items:baseline;gap:14px;
padding:16px 6px 4px;margin-top:2px;border-top:var(--rule);
}
.bk-btotlbl{grid-column:1 / 3;font-size:13px;letter-spacing:3px;font-weight:700}
.bk-btotnum{font-size:26px;font-weight:900;font-variant-numeric:tabular-nums;color:var(--acc)}
/* the dropped-dish footnote — honesty: what the basket WANTED but couldn't include */
.bk-dropped{
max-width:560px;margin:12px auto 0;font-size:12px;color:var(--soft);
font-weight:300;line-height:1.75;text-align:center;
border:var(--hair);border-style:dashed;padding:9px 16px;background:var(--faint2);
}
.bk-dropped b{color:var(--ink);font-weight:700}
/* ---- section headers (shared idiom with hummus) ---- */
.bk-h{font-size:14px;letter-spacing:4px;font-weight:700;margin:44px 0 8px;text-align:center;line-height:1.5}
.bk-sub{text-align:center;font-size:13px;color:var(--soft);font-weight:300;margin-bottom:20px;max-width:600px;margin-inline:auto;line-height:1.8}
/* ---- per-city ranked bars ---- */
.bk-cities{max-width:660px;margin:0 auto}
.bk-crow{
display:grid;grid-template-columns:104px 1fr 66px auto;align-items:center;gap:12px;
padding:11px 4px;border-bottom:1px solid var(--faint2);
cursor:pointer;text-decoration:none;color:inherit;transition:background .2s;
}
.bk-crow:hover,
.bk-crow:focus-visible{background:var(--wash)}
.bk-city{font-size:15.5px;font-weight:700;line-height:1.3;overflow-wrap:break-word}
.bk-bar{height:11px;background:var(--faint2);position:relative;border-radius:2px}
.bk-bar i{position:absolute;right:0;top:0;bottom:0;background:var(--acc);border-radius:2px;opacity:.85}
.bk-cval{font-size:16px;font-weight:900;font-variant-numeric:tabular-nums;text-align:left}
.bk-ccov{font-size:11px;color:var(--soft);white-space:nowrap;font-weight:300;letter-spacing:.3px}
/* partial baskets read as partial — muted bar + amber-honest coverage tag */
.bk-crow.bk-partial .bk-bar i{opacity:.4;background:var(--soft2)}
.bk-crow.bk-partial .bk-city{color:var(--soft)}
.bk-crow.bk-partial .bk-ccov{color:var(--bad)}
/* the sparse cities — named, but explicitly below the comparison line */
.bk-sparse{
max-width:660px;margin:16px auto 0;text-align:center;
font-size:12.5px;color:var(--soft);font-weight:300;line-height:1.85;
}
.bk-sparse b{color:var(--ink);font-weight:700}
.bk-sparse .bk-sparsehd{font-size:10.5px;letter-spacing:2px;color:var(--acc);margin-bottom:5px;font-weight:500}
/* ---- methodology + citation (shared idiom with hummus) ---- */
.bk-method{max-width:680px;margin:44px auto 0}
.bk-method p{font-size:15.5px;line-height:1.9;font-weight:300}
.bk-method p b{font-weight:700}
.bk-method p + p{margin-top:12px}
.bk-cite{
background:var(--faint2);padding:16px 20px;margin-top:16px;font-size:16px;line-height:1.7;
border-right:2px solid var(--acc);
}
.bk-citetitle{font-size:11px;letter-spacing:2px;color:var(--soft);margin-bottom:4px}
.bk-more{text-align:center;margin:30px auto 0;font-size:14px}
.bk-more a{color:var(--acc);cursor:pointer;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s}
.bk-more a:hover{border-color:var(--acc)}
/* ---- mobile ---- */
@media(max-width:640px){
.bk-crow{grid-template-columns:82px 1fr 56px;gap:9px}
.bk-ccov{display:none}
.bk-crow.bk-partial .bk-city::after{content:' ·';color:var(--bad)}
.bk-breakdown .bk-bmeta{letter-spacing:0}
}
@media(max-width:420px){
.bk-brow{grid-template-columns:28px 1fr auto;gap:10px}
.bk-bink{width:28px;height:28px}
.bk-btot{grid-template-columns:28px 1fr auto;gap:10px}
}
/* =====================================================
a11y.css — accessibility toolbar (js/a11y.js) + effect
classes + the skip-to-content link. תפריטיה palette.
===================================================== */
/* screen-reader-only text — visually hidden, read by AT (fixes heading outline
without altering the visual design) */
.sr-only{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* ---------- skip-to-content (first focusable in the body) ---------- */
.skip-link{
position:fixed;top:-100px;right:12px;z-index:200;
background:var(--brand,#7a1f2b);color:#fff;font-family:"Heebo",sans-serif;
font-size:14px;font-weight:700;padding:10px 18px;border-radius:0 0 8px 8px;
text-decoration:none;box-shadow:0 4px 14px rgba(28,25,21,.3);transition:top .15s;
}
.skip-link:focus{top:0;outline:3px solid #f8f4ea;outline-offset:-6px}
/* ---------- floating ♿ button ---------- */
.a11y-fab{
position:fixed;z-index:90;
bottom:max(16px,env(safe-area-inset-bottom));
right:max(16px,env(safe-area-inset-right));
width:52px;height:52px;border-radius:50%;
background:#7a1f2b;color:#fff;border:3px solid #fff;
display:grid;place-items:center;cursor:pointer;
box-shadow:3px 3px 0 rgba(28,25,21,.35);
transition:transform .18s;
}
.a11y-fab:hover{transform:scale(1.06)}
.a11y-fab:focus-visible{outline:3px solid #8a6a1e;outline-offset:3px}
.a11y-fab svg{display:block}
/* ---------- backdrop + panel ---------- */
.a11y-backdrop{position:fixed;inset:0;z-index:90}
.a11y-panel{
position:fixed;z-index:91;
bottom:max(78px,calc(env(safe-area-inset-bottom) + 62px));
right:max(16px,env(safe-area-inset-right));
width:300px;max-width:calc(100vw - 32px);max-height:80vh;overflow-y:auto;
background:#fdfaf2;color:#1c1915;border:2px solid #1c1915;border-radius:14px;
box-shadow:6px 6px 0 rgba(138,106,30,.5);
padding:16px;font-family:"Heebo",sans-serif;
}
.a11y-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.a11y-title{font-family:"Frank Ruhl Libre",serif;font-size:19px;font-weight:900;letter-spacing:2px;color:#1c1915}
.a11y-x{background:none;border:none;font-size:20px;line-height:1;color:#8a817333;color:#7a736a;cursor:pointer;padding:2px 4px}
.a11y-x:hover{color:#7a1f2b}
.a11y-x:focus-visible,.a11y-fsbtn:focus-visible,.a11y-opt:focus-visible,.a11y-reset:focus-visible,.a11y-stmt:focus-visible{outline:2px solid #7a1f2b;outline-offset:2px;border-radius:6px}
.a11y-fs{margin-bottom:12px}
.a11y-fslbl{display:block;font-size:13px;font-weight:700;margin-bottom:7px}
.a11y-fsrow{display:flex;align-items:center;gap:8px}
.a11y-fsbtn{flex:1;border:2px solid #1c1915;background:#fff;border-radius:9px;padding:7px 0;font:inherit;font-weight:900;font-size:15px;cursor:pointer}
.a11y-fsbtn:hover{background:#f3ede0}
.a11y-pct{width:52px;text-align:center;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
.a11y-opts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.a11y-opt{
border:2px solid #1c1915;background:#fff;border-radius:9px;
padding:9px 8px;font:inherit;font-size:12.5px;font-weight:700;color:#1c1915;
cursor:pointer;text-align:center;line-height:1.3;transition:background .12s,color .12s;
}
.a11y-opt:hover{background:#f3ede0}
.a11y-opt.a11y-on{background:#1c1915;color:#fff}
.a11y-reset{
width:100%;margin-top:12px;border:2px solid #1c1915;background:#fff;border-radius:9px;
padding:8px 0;font:inherit;font-weight:700;font-size:13px;cursor:pointer;
}
.a11y-reset:hover{background:#f6efe2}
.a11y-stmt{display:block;text-align:center;margin-top:12px;font-size:12px;color:#7a736a;text-decoration:none}
.a11y-stmt:hover{color:#7a1f2b;text-decoration:underline}
@media (max-width:480px){ .a11y-panel{width:calc(100vw - 24px);right:12px} }
/* =====================================================
EFFECT CLASSES — toggled on by js/a11y.js
===================================================== */
/* high contrast — retheme the CSS variables to max contrast on white */
html.a11y-contrast{
--paper:#fff;--card:#fff;--wash:#fff;
--ink:#000;--soft:#111;--soft2:#1a1a1a;--mut:#222;--ph:#333;
--faint:#000;--faint2:#e6e6e6;--faint3:#333;
--acc:#7a1f2b;--brand:#000;
}
html.a11y-contrast body{background:#fff}
html.a11y-contrast a{text-decoration:underline}
html.a11y-contrast .rcard,html.a11y-contrast .dix,html.a11y-contrast .menu-card,
html.a11y-contrast .sr-row,html.a11y-contrast .cal-nrow{border-color:#000 !important}
/* grayscale */
html.a11y-grayscale{filter:grayscale(1)}
/* highlight links — strong, unmissable */
html.a11y-links a:not(.a11y-fab):not(.skip-link){
text-decoration:underline !important;text-underline-offset:2px;
background:#fff3b0 !important;color:#1c1915 !important;
box-shadow:0 0 0 1px #8a6a1e;border-radius:2px;
}
/* readable font — drop the serif/spacing for a plain sans */
html.a11y-readable body,html.a11y-readable h1,html.a11y-readable h2,html.a11y-readable h3,
html.a11y-readable .dn,html.a11y-readable .sr-name,html.a11y-readable .cal-nfood,
html.a11y-readable [class*="ttl"],html.a11y-readable [class*="head"]{
font-family:Arial,"Segoe UI","Heebo",sans-serif !important;letter-spacing:normal !important;
}
/* stop motion (manual equivalent of prefers-reduced-motion) */
html.a11y-no-motion *,html.a11y-no-motion *::before,html.a11y-no-motion *::after{
animation-duration:.001ms !important;animation-iteration-count:1 !important;
transition-duration:.001ms !important;scroll-behavior:auto !important;
}
/* big cursor */
html.a11y-big-cursor,html.a11y-big-cursor *{
cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M6 4l30 16-13 3-3 13z' fill='%23fff' stroke='%231c1915' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") 6 4,auto !important;
}
@media print{ .a11y-fab,.a11y-panel,.a11y-backdrop,.skip-link{display:none !important} }