:root{
  --font:"SF Pro Text","SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-display:"SF Pro Display","SF Pro Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --page:#ECE7DF;--surface:#FAF8F5;--surface-strong:rgba(70,50,26,.08);--chip:#FAF8F5;--hairline:rgba(70,50,26,.14);
  --text:#18191A;--secondary:#67625B;--tertiary:#9A948C;
  --amber:#9A6A00;--amber-text:#7A5F06;--selected:#9A6A00;--on-selected:#FAF8F5;--amber-soft:rgba(154,106,0,.10);
  --green:#1F9D5C;--green-text:#17734A;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;
  --section:var(--s6);--pad:var(--s4);
  --r-card:20px;--r-photo:16px;--r-pill:999px;
  --w-page:1040px;--w-read:680px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --page:#0D0F12;--surface:rgba(255,255,255,.055);--surface-strong:rgba(255,255,255,.075);--chip:rgba(255,255,255,.075);--hairline:rgba(255,255,255,.10);
  --text:#F5F5F7;--secondary:#8E8E93;--tertiary:#636366;
  --amber:#F0B429;--amber-text:#F0B429;--selected:#F0B429;--on-selected:#1D1D1F;--amber-soft:rgba(240,180,41,.09);
  --green:#3DD68C;--green-text:#3DD68C;color-scheme:dark;
}}
:root[data-theme="dark"]{
  --page:#0D0F12;--surface:rgba(255,255,255,.055);--surface-strong:rgba(255,255,255,.075);--chip:rgba(255,255,255,.075);--hairline:rgba(255,255,255,.10);
  --text:#F5F5F7;--secondary:#8E8E93;--tertiary:#636366;
  --amber:#F0B429;--amber-text:#F0B429;--selected:#F0B429;--on-selected:#1D1D1F;--amber-soft:rgba(240,180,41,.09);
  --green:#3DD68C;--green-text:#3DD68C;color-scheme:dark;
}
@media (min-width:900px){:root{--section:var(--s7);--pad:var(--s5)}}
*{box-sizing:border-box}
html{background:var(--page);scroll-padding-top:calc(env(safe-area-inset-top,0px) + var(--s4))}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;font:400 17px/1.47 var(--font);color:var(--text);background:var(--page);-webkit-text-size-adjust:100%}
button,a,label,summary{touch-action:manipulation}
a{color:var(--amber-text)}
:focus-visible{outline:2px solid var(--amber);outline-offset:2px;border-radius:6px}
h1,h2,h3{margin:0;text-wrap:balance}
.wrap{max-width:var(--w-page);margin:0 auto;padding-block:0 var(--s7);
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
header.top{display:flex;align-items:center;justify-content:space-between;padding-block:var(--s4)}
header.top img{height:28px;width:auto}
header.top.end{justify-content:flex-end}
[hidden]{display:none!important}
.back{color:var(--secondary);text-decoration:none;font:500 15px var(--font);min-height:44px;display:inline-flex;align-items:center}
.back:hover{color:var(--text)}
.theme{background:var(--chip);color:var(--text);border:0;border-radius:var(--r-pill);min-width:44px;min-height:44px;font:600 17px var(--font);cursor:pointer}
.overview{--name:clamp(32px,2.4vw + 18px,44px);padding-block:var(--s5) var(--s2);display:flex;align-items:flex-start;gap:var(--s4)}
.overview .who{min-width:0}

/* ⚠ TOP TO THE CAPITALS, not to the line box: the name's line has half-leading and
   ascender room above its caps, about .14 of its size - so the photo drops by that. */
.lead{flex:none;margin-top:calc(var(--name) * .14);width:72px;height:72px;object-fit:cover;border-radius:var(--r-photo);background:var(--surface-strong)}
@media (min-width:900px){.lead{width:104px;height:104px;border-radius:var(--r-card)}.overview{gap:var(--s5)}}
.contact a.val{color:var(--text);text-decoration:none;font-weight:500;overflow-wrap:anywhere;white-space:normal}
.contact a.val:hover{color:var(--amber-text);text-decoration:underline}
h1{font:700 var(--name,clamp(32px,2.4vw + 18px,44px))/1.06 var(--font-display);letter-spacing:-.02em}
.kind{color:var(--secondary);margin:var(--s2) 0 0}
.actions{display:flex;flex-wrap:wrap;gap:var(--s2);margin:var(--s4) 0 0;padding:0;list-style:none}
.btn{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:var(--r-pill);background:var(--chip);color:var(--text);text-decoration:none;font:600 15px var(--font)}
.photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--s3)}
.photos figure{margin:0}
.photos img{width:100%;max-width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-photo);display:block;background:var(--surface-strong)}
.photos figcaption{font-size:13px;color:var(--secondary);margin-top:6px}
.chip{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:var(--r-pill);background:var(--chip);color:var(--text);text-decoration:none;font:500 15px var(--font)}
/* ⚠ TWO COLUMNS THAT DO NOT SHARE ROWS. On a desktop the main column (menu, photos,
   the invitation) and the side column (hours, holiday hours, location, contact)
   each stack on their own, so one column's height never opens a gap in the other.
   On a phone the columns dissolve (display:contents) and order sets the one list:
   hours first, then the menu, photos, location, contact. */
.layout{display:flex;flex-direction:column;gap:var(--section);margin-top:var(--section)}
.col{display:contents}
#hours{order:1}#holidays{order:2}#menu{order:3}#photos{order:4}#location{order:5}#contact{order:6}.invite{order:7}
@media (min-width:900px){
  .layout{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);column-gap:var(--s6);align-items:start}
  .layout:not(.has-menu){grid-template-columns:repeat(2,minmax(0,1fr))}
  .col{display:flex;flex-direction:column;gap:var(--s6);min-width:0}
}
section{min-width:0}
h2{font:700 24px/1.2 var(--font-display);letter-spacing:-.01em;margin:0 0 var(--s3)}
h3{font:600 19px/1.3 var(--font-display);margin:0 0 var(--s2)}
.card{background:var(--surface);border-radius:var(--r-card);padding:var(--pad)}
.empty-card{display:grid;justify-items:center;gap:var(--s2);text-align:center;padding-block:var(--s5)}
.empty-art svg{width:56px;height:56px;fill:none;stroke:var(--tertiary);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.empty-line{margin:0;color:var(--secondary);font-size:15px}
section:has(> .add-more){position:relative}
.add-more{position:absolute;top:0;right:0;border:0;background:none;padding:var(--s1) 0;color:var(--amber-text);font:600 15px var(--font);cursor:pointer;line-height:1.6}
.rows{list-style:none;margin:0;padding:0}
.rows li{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);padding:6px 0;font-size:16px;line-height:1.4}
.rows .val{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.rows .note{display:block;font-size:13px;color:var(--secondary)}
.src.after{margin:var(--s3) 0 0}
.src.end{margin:var(--s5) 0 0}
.src{font-size:13px;line-height:1.4;color:var(--secondary);margin:0 0 var(--s4)}
.menu-card{background:var(--surface);border-radius:var(--r-card);padding:var(--pad)}
.menu-card + .menu-card{margin-top:var(--s5)}
.menu-label{font:700 19px/1.3 var(--font-display);margin:0 0 var(--s2)}
/* The section chips: one row that scrolls sideways, the shown section in amber. */
.cats{position:relative;display:flex;flex-wrap:nowrap;gap:var(--s2);overflow-x:auto;scrollbar-width:none;margin:0 calc(-1 * var(--pad)) var(--s4);padding:0 var(--pad);list-style:none;scroll-padding-inline:var(--pad)}
.cats::-webkit-scrollbar{display:none}
.cats .chip{background:var(--surface-strong);min-height:36px;padding:0 14px;font-size:14px;white-space:nowrap}
/* Selected: the app icon's cocoa with bone text by day (11:1), brand amber at night. */
.cats .chip[aria-current="true"]{background:var(--selected);color:var(--on-selected);font-weight:600}
/* The sections: a strip of slides, one card wide; the card takes the shown one's height. */
.slides{position:relative;display:flex;align-items:flex-start;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.slides::-webkit-scrollbar{display:none}
/* ⚠ ONE HEIGHT FOR THE STRIP - its tallest section, capped at 70% of the screen; a
   longer section scrolls inside. Changing section never moves what is below. */
.slide{flex:0 0 100%;min-width:0;scroll-snap-align:start;scroll-snap-stop:always;max-height:100%;overflow-y:auto}
.slide h3{margin-bottom:var(--s2)}
@media (min-width:900px){.slide .rows{columns:2;column-gap:var(--s6)}.slide .rows li{break-inside:avoid}}
/* The menu's search: above the chips; while it has a query, the matches replace the strip. */
.menu-search{width:100%;min-height:44px;margin:0 0 var(--s3);padding:0 var(--s4);border:0;border-radius:var(--r-pill);background:var(--surface-strong);color:var(--text);font:400 16px var(--font);-webkit-appearance:none;appearance:none}
.menu-search::placeholder{color:var(--secondary)}
.found{margin:0 0 var(--s2);font-size:13px;color:var(--secondary)}
.menu-results a{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);color:var(--text);text-decoration:none;width:100%}
.menu-results a:hover .name{color:var(--amber-text)}
.menu-results .sec{display:block;font-size:13px;color:var(--secondary)}
/* The page control: dots, or "3 of 25" with arrows when dots would be too many. */
.pager{display:flex;justify-content:center;align-items:center;gap:2px;margin-top:var(--s4)}
.dot{width:22px;height:22px;border:0;padding:0;background:none;cursor:pointer;display:grid;place-items:center}
.dot::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--tertiary)}
.dot[aria-current="true"]::after{background:var(--text)}
.step{min-width:44px;min-height:36px;border:0;border-radius:var(--r-pill);background:var(--surface-strong);color:var(--text);font:600 18px var(--font);cursor:pointer}
.where{min-width:80px;text-align:center;font-size:14px;color:var(--secondary);font-variant-numeric:tabular-nums}
.loc{overflow:hidden}
.map{display:block;margin:calc(-1 * var(--pad)) calc(-1 * var(--pad)) var(--s4)}
.map img{width:100%;max-width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;background:var(--surface-strong)}
.loc address{font-style:normal}
.card .btn{background:var(--surface-strong)}
.loc .actions{margin-top:var(--s4)}
.only-dark{display:none}
.only-light,.mark img.only-light,.map img.only-light{display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .only-light{display:none}:root:not([data-theme="light"]) .only-dark{display:block}}
:root[data-theme="dark"] .only-light{display:none}
:root[data-theme="dark"] .only-dark{display:block}
.invite{color:var(--secondary);font-size:15px}
.invite p{margin:0}
.invite a{font-weight:600}
/* ⚠ THE ONE DIVIDER on a public page - the footer's hairline; no card has a border. */
footer.site{margin-top:var(--s7);padding-top:var(--s4);display:grid;gap:var(--s1)}
footer.site p{margin:0}
.legal{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);font-size:13px;color:var(--secondary)}
.legal a{color:var(--secondary);text-decoration:none}.legal a:hover{color:var(--text);text-decoration:underline}
.attrib{font-size:12px;color:var(--secondary)}
.attrib a{color:inherit}
/* No display here: .only-light/.only-dark decide which lettering shows. */
.lettered img{width:300px;max-width:100%;height:auto;vertical-align:top}
.gone{padding:var(--s7) 0;text-align:center}
/* ── /places/ - discover (src/site/discover.ts) ── */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.discover{max-width:var(--w-read);margin:0 auto}
.ask{padding-block:var(--s6) var(--s2)}
.ask h1{font:700 clamp(32px,2.4vw + 18px,44px)/1.06 var(--font-display);letter-spacing:-.02em}
.search{margin-top:var(--s5)}
.search input{width:100%;min-height:52px;padding:0 var(--s5);border:0;border-radius:var(--r-pill);background:var(--surface);color:var(--text);font:400 17px var(--font);-webkit-appearance:none;appearance:none}
.search input::placeholder{color:var(--secondary)}
.kinds{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4)}
.kinds .chip{border:0;cursor:pointer;min-height:40px}
.kinds .chip[aria-pressed="true"]{background:var(--selected);color:var(--on-selected);font-weight:600}
.results{margin-top:var(--section)}
.results-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3)}
.count{margin:0;color:var(--secondary);font-size:15px;font-variant-numeric:tabular-nums}
.places{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2)}
.place{display:flex;align-items:center;gap:var(--s4);padding:var(--s3) var(--s4);border-radius:var(--r-card);background:var(--surface);color:var(--text);text-decoration:none}
.place:hover .pname{color:var(--amber-text)}
.thumb{flex:none;width:72px;height:72px;border-radius:var(--r-photo);background:var(--surface-strong);color:var(--secondary);display:grid;place-items:center;overflow:hidden}
.place{min-height:96px}
.hit .val{color:var(--secondary)}
/* The dish a search opened on: marked once, with room around it. */
.rows li:target{background:var(--amber-soft);border-radius:10px;margin-inline:calc(-1 * var(--s2));padding-inline:var(--s2);scroll-margin-top:30vh}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb svg{width:26px;height:26px;fill:none;stroke:var(--amber);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.body{min-width:0;flex:1;display:grid;gap:2px}
.pname{font:600 17px/1.3 var(--font-display)}
.facts{font-size:14px;color:var(--secondary)}
.hits{display:grid;gap:2px;margin-top:var(--s2)}
.hits-label{font-size:12px;font-weight:600;color:var(--secondary)}
.hit{font-size:15px}
.hit .val{font-variant-numeric:tabular-nums;white-space:nowrap}
.more{font-size:13px;color:var(--secondary)}
.chev{flex:none;color:var(--tertiary);font-size:24px;line-height:1}
.empty{color:var(--secondary);margin:var(--s4) 0 0}
.scope{color:var(--secondary);font-size:13px;margin:var(--s5) 0 0}