/* =====================================================================
   הַתַּפְרִיט · 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{
  /* core palette — warm menu stock, so the whole site reads like paper a menu is printed on */
  --paper:#f8f4ea;
  --ink:#1c1915;
  --soft:#6f6a61;
  --faint:#ddd8cd;
  --faint2:#f0ede5;
  --acc:#7a1f2b;

  /* ceramic accents (Armenian-Jerusalem tilework) — a small deliberate palette,
     not one lone accent. --acc swaps per restaurant; these stay stable for chrome. */
  --brand:#7a1f2b;       /* the wordmark / identity ceramic (bole red) — never swapped */
  --acc2:#12697a;        /* ceramic turquoise — secondary accent (icons, index numbers) */
  --acc3:#a3532a;        /* terracotta — tertiary accent (kickers, rules)               */
  --acc4:#2e6b45;        /* ceramic green                                               */

  /* derived tints (all hexes already present in v1) */
  --ok:#3d7a4f;          /* "official source" green            */
  --bad:#9c3c30;         /* "no menu found" red                */
  --card:#fff;           /* card / plate surfaces              */
  --wash:#f6f3ea;        /* row hover wash                     */
  --mut:#736d60;         /* muted: "לא פורסם", empty states — 4.7:1 on paper (WCAG AA) */
  --faint3:#c9c2b2;      /* big ghost illustrations, scrollbar */
  --soft2:#8a8478;       /* dish-index icons                   */
  --ph:#736d60;          /* input placeholder — 4.7:1 on paper (WCAG AA) */
  --veil:rgba(248,244,234,.94); /* translucent paper overlays  */

  /* type */
  --serif:"Frank Ruhl Libre","David Libre","David","Times New Roman",serif;
  --sans:"Heebo","Segoe UI",Arial,sans-serif;
  --lh-display:1.17;     /* niqqud-safe: marks never collide across lines */

  /* hairline discipline */
  --hair:1px solid var(--faint);
  --hair2:1px solid var(--faint2);
  --rule:2px solid var(--ink);

  /* paper-lift shadows (hard offsets, never blurs) */
  --lift:3px 3px 0 var(--faint);
  --lift2:7px 9px 0 var(--faint);

  /* layout & layers */
  --maxw:980px;
  --z-calc:45;
  --z-toast:70;

  /* a whisper of paper grain — ink-toned fractal noise, ≈4.5% alpha */
  --noise:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='280'%20height='280'%3E%3Cfilter%20id='n'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='.8'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20values='0,0,0,0,.11,0,0,0,0,.098,0,0,0,0,.082,0,0,0,.045,0'/%3E%3C/filter%3E%3Crect%20width='280'%20height='280'%20filter='url(%23n)'/%3E%3C/svg%3E");
}


/* ============ 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:12.5px;font-weight:400;letter-spacing:1px;
  display:inline-block;cursor:pointer;text-decoration:none;text-align:center;
  background:transparent;border:1px solid var(--ink);color:var(--ink);
  padding:8px 20px;border-radius:2px;line-height:1.4;
  transition:background .2s,color .2s,border-color .2s;
}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn:active{transform:translateY(1px)}
.btn.ghost{border-color:var(--faint);color:var(--soft)}
.btn.ghost:hover{background:transparent;border-color:var(--ink);color:var(--ink)}

/* filter chip */
.fchip{
  font-family:var(--sans);font-size:12.5px;font-weight:400;letter-spacing:.5px;line-height:1.2;
  cursor:pointer;background:transparent;border:1px solid var(--faint);color:var(--soft);
  padding:7px 16px;border-radius:2px;
  transition:border-color .15s,color .15s,background .15s;
}
.fchip:hover{border-color:var(--ink)}
.fchip.on{border-color:var(--ink);color:var(--ink);font-weight:700;background:var(--card)}

/* search field — a bare underline, like a ledger */
#q{
  font-family:var(--sans);font-size:13.5px;
  border:none;border-bottom:var(--hair);border-radius:0;
  background:transparent;color:var(--ink);
  padding:8px 4px;outline:none;min-width:200px;
  appearance:none;-webkit-appearance:none;
}
#q:focus{border-color:var(--ink)}
#q::placeholder{color:var(--ph)}
#q:focus-visible{outline:none;border-color:var(--ink);box-shadow:0 1px 0 0 var(--ink)}

/* city links */
.citychips{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-bottom:32px}
.citychip{
  font-family:var(--sans);font-size:11.5px;line-height:1.4;color:var(--soft);cursor:pointer;
  border:none;background:none;padding:4px 8px;letter-spacing:.5px;
  border-bottom:1px dotted var(--faint);
  transition:color .15s,border-color .15s;
}
.citychip:hover{color:var(--acc);border-color:var(--acc)}

/* 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:10px;letter-spacing:1.2px;line-height:1.4;color:var(--soft);
  border:var(--hair);padding:3px 9px;border-radius:2px;font-weight:400;white-space:nowrap;
}
.src.official{border-color:var(--ok);color:var(--ok)}
.src.nomenu{border-color:var(--bad);color:var(--bad)}
.cnt{font-size:11px;color:var(--soft);letter-spacing:.5px}
.diff{margin-right:auto;font-size:10.5px;color:var(--acc);letter-spacing:2px}
.kindtag{
  position:absolute;top:10px;left:10px;font-size:9.5px;letter-spacing:2px;line-height:1.4;
  color:var(--soft);font-weight:400;background:var(--veil);
  padding:3px 9px;border:var(--hair);
}


/* ==================== 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(--ink);cursor:pointer;position:relative;
  display:flex;flex-direction:column;
  box-shadow:var(--lift);
  transition:transform .22s,box-shadow .22s;
  text-decoration:none;color:inherit;   /* cards are real <a> links (crawlable) */
}
.rcard:hover,
.rcard:focus-visible{transform:translate(-2px,-4px);box-shadow:var(--lift2)}
.rcard .photo{height:150px;overflow:hidden;border-bottom:1px solid var(--ink);position:relative;background:var(--faint2)}
.rcard .photo img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(.85) sepia(.12) contrast(1.04);
  transition:filter .35s,transform .35s;
}
.rcard:hover .photo img,
.rcard:focus-visible .photo img{filter:none;transform:scale(1.04)}
.rcard .photo .noimg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--mut)}
.rcard .photo .noimg svg{width:56px;height:56px}
/* logo tile — the restaurant's own brand mark on an accent-tinted ground (a branded
   card for the ~70 restaurants with no cover photo). Full colour (no grayscale), faint
   ceramic ring, gentle lift on hover. --racc = the restaurant's ceramic accent. */
.rcard .photo.brand{background:var(--paper);background:radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--racc) 15%,var(--paper)),var(--paper) 74%);display:flex;align-items:center;justify-content:center}
/* every logo on a uniform white rounded "chip" (business-card mark) so white-bg,
   transparent and colour-bg logos all read as one intentional mark on the cream ground */
.rcard .photo.islogo .blogo{width:auto;height:auto;max-width:72%;max-height:86px;object-fit:contain;position:relative;background:#fff;border-radius:13px;padding:12px 15px;box-sizing:border-box;box-shadow:0 4px 15px rgba(28,25,21,.17),0 0 0 1px rgba(28,25,21,.06);transition:transform .5s cubic-bezier(.2,.9,.3,1.4)}
.rcard:hover .photo.islogo .blogo,.rcard:focus-visible .photo.islogo .blogo{transform:translateY(-2px) scale(1.05);box-shadow:0 7px 20px rgba(28,25,21,.22),0 0 0 1px rgba(28,25,21,.06)}
/* generative seal, big on the tinted ground — the never-empty fallback (no logo / logo failed) */
.rcard .photo .bandseal{width:106px;height:106px;opacity:.9;position:relative;align-items:center;justify-content:center;transition:transform .55s cubic-bezier(.2,.9,.3,1.4)}
.rcard .photo .bandseal svg{width:100%;height:100%;display:block}
.rcard:hover .photo .bandseal,.rcard:focus-visible .photo .bandseal{transform:rotate(7deg) scale(1.05)}
.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)}
.rcard h3{font-size:19.5px;font-weight:700;line-height:1.25;overflow-wrap:break-word}
.rcard .cty{font-size:12.5px;color:var(--soft);margin-top:2px;font-weight:300;line-height:1.5}
.rcard .foot{margin-top:auto;padding-top:12px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
/* 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 */
.dirhead{text-align:center;padding:56px 0 8px}
.dirhead .k{font-size:11.5px;letter-spacing:5px;color:var(--acc3);font-weight:500}
.dirhead h1{
  font-size:clamp(40px,7vw,72px);font-weight:900;margin-top:16px;
  line-height:var(--lh-display);text-wrap:balance;
}
.dirhead .sub{
  font-size:16px;color:var(--soft);margin-top:12px;max-width:600px;margin-inline:auto;
  line-height:1.85;font-weight:300;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. */
.statline{
  display:flex;flex-wrap:wrap;gap:1px;
  background:var(--faint);
  border-top:var(--hair);border-bottom:var(--hair);
  margin:32px 0 8px;
}
.stat{flex:1 1 120px;padding:16px 20px;text-align:center;background:var(--paper);cursor:default;min-width:0}
.stat .n{font-size:30px;font-weight:900;font-variant-numeric:tabular-nums;line-height:1.1}
.stat .l{font-size:10.5px;letter-spacing:2px;color:var(--soft);margin-top:2px;font-weight:400}

.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:10px;margin:36px 0 4px;overflow:hidden;position:relative;padding:4px 2px}
.strip .ph{
  width:150px;height:100px;flex-shrink:0;border:1px solid var(--ink);padding:4px;background:var(--card);
  transform:rotate(var(--rot));transition:transform .3s;position:relative;cursor:pointer;
}
.strip .ph:hover,
.strip .ph:focus-visible{transform:rotate(0) scale(1.06);z-index:2}
.strip .ph img{width:100%;height:100%;object-fit:cover;filter:grayscale(.85) sepia(.12) contrast(1.04);transition:filter .3s}
.strip .ph:hover img{filter:none}
.strip .ph .cap{
  position:absolute;bottom:-1px;right:-1px;left:-1px;background:var(--veil);
  font-size:9.5px;line-height:1.5;letter-spacing:.5px;padding:2px 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 <a> 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 <a> links (crawlable) */
}
.dix:hover,
.dix:focus-visible{transform:translate(-2px,-3px);box-shadow:6px 7px 0 var(--faint)}
.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:1px solid var(--ink);padding:6px;background:var(--card);
  box-shadow:4px 4px 0 var(--faint);
}
.heroPhoto img{width:100%;height:300px;object-fit:cover;display:block;filter:grayscale(.75) sepia(.1) contrast(1.03);transition:filter .5s}
.heroPhoto:hover img{filter:none}
.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}
}