body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}

/* Layout: one restaurant's photo menu. Sticky section strip on top, photo grid per section, dishes open in a bottom sheet. */
:root{
  --paper:#ffffff; --ink:#17191b; --muted:#5d6267; --rule:#e4e5e2; --tile:#eff0ec;
  --sun:#f2b100; --on-sun:#17191b; --shade:rgba(10,11,12,.72);
  --display:"Archivo","Arial Narrow",Arial,sans-serif;
  --body:"Public Sans",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#111214; --ink:#f1f1ee; --muted:#a0a5a9; --rule:#2a2d30; --tile:#1c1f21;
    --sun:#f2b100; --on-sun:#17191b; --shade:rgba(0,0,0,.8); color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#111214; --ink:#f1f1ee; --muted:#a0a5a9; --rule:#2a2d30; --tile:#1c1f21;
  --sun:#f2b100; --on-sun:#17191b; --shade:rgba(0,0,0,.8); color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 112px)}
body{background:var(--paper); color:var(--ink); font-family:var(--body); font-size:16px; line-height:1.45; -webkit-text-size-adjust:100%}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:10; background:var(--paper)}
button,input{font:inherit; color:inherit}
:focus-visible{outline:3px solid var(--sun); outline-offset:2px}
.wrap{max-width:880px; margin:0 auto; padding-left:max(16px,env(safe-area-inset-left,0px)); padding-right:max(16px,env(safe-area-inset-right,0px)); padding-block:0 56px}

.bar{position:sticky; top:env(safe-area-inset-top,0px); z-index:5; background:var(--paper); border-bottom:1px solid var(--rule)}
.bar-in{max-width:880px; margin:0 auto; padding-left:max(16px,env(safe-area-inset-left,0px)); padding-right:max(16px,env(safe-area-inset-right,0px)); padding-block:12px 0; display:grid; gap:10px}
.mark{font-family:var(--display); font-weight:900; font-stretch:72%; font-size:20px; letter-spacing:.01em; text-transform:uppercase; line-height:1}
.mark span{background:var(--sun); color:var(--on-sun); padding:2px 5px 0}
.secs{display:flex; gap:6px; overflow-x:auto; padding-bottom:10px; scrollbar-width:none; margin-right:calc(-1 * max(16px,env(safe-area-inset-right,0px)))}
.secs::-webkit-scrollbar{display:none}
.secs button{flex:none; min-height:38px; padding:7px 14px; border-radius:999px; border:1.5px solid var(--rule); background:none; font-size:14px; font-weight:600; cursor:pointer; white-space:nowrap}
.secs button[aria-current="true"]{background:var(--ink); color:var(--paper); border-color:var(--ink)}

.top{display:flex; align-items:center; gap:10px; min-height:32px}
.back{display:flex; align-items:center; gap:2px; background:none; border:0; padding:6px 8px 6px 0; min-height:40px; cursor:pointer; font-weight:600; font-size:15px}
.back svg{width:20px; height:20px}
.top .mark{margin-left:auto}
.home .top .mark{margin-left:0}

.intro{padding-block:28px 20px; display:grid; gap:8px}
.intro h1{font-family:var(--display); font-weight:850; font-stretch:68%; font-size:clamp(44px,11vw,76px); line-height:.92; margin:0; text-transform:uppercase; text-wrap:balance}
.intro p{margin:0; color:var(--muted); max-width:40ch; font-size:17px}
.places{display:grid; border-top:1px solid var(--rule)}
.place{display:grid; grid-template-columns:84px 1fr auto; align-items:center; gap:16px; padding-block:16px; border:0; border-bottom:1px solid var(--rule); background:none; text-align:left; cursor:pointer; width:100%}
.logo{width:84px; aspect-ratio:1/1; max-width:100%; display:grid; place-items:center; border-radius:4px; border:1px solid var(--rule); overflow:hidden}
.logo img{width:100%; height:100%; object-fit:contain; display:block}
.logo.wide img{width:88%; height:88%}
.place .t{min-width:0; display:grid; gap:2px}
.place .n{font-family:var(--display); font-weight:800; font-stretch:82%; font-size:23px; line-height:1.1}
.place .k{color:var(--muted); font-size:15px}
.place .c{font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums}
.chev{width:22px; height:22px; color:var(--muted)}
.soon{margin-top:18px; font-size:14px; color:var(--muted)}

.head{padding-block:24px 14px; display:flex; align-items:center; gap:18px}
.head .logo{width:clamp(104px,30vw,140px); flex:none}
.head .t{display:grid; gap:4px; min-width:0}
.head h1{font-family:var(--display); font-weight:850; font-stretch:70%; font-size:clamp(34px,9vw,52px); line-height:.95; margin:0; text-transform:uppercase}
.head .k{color:var(--muted); margin:0; font-size:15px}
.find{position:relative; margin-block:8px 4px}
.find input{width:100%; min-height:48px; padding:10px 14px 10px 42px; border:1.5px solid var(--rule); border-radius:10px; background:var(--tile); font-size:16px}
.find input:focus{border-color:var(--ink); outline:none}
.find svg{position:absolute; left:13px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--muted)}

.sec{margin-top:30px}
.sec h2{font-family:var(--display); font-weight:850; font-stretch:72%; font-size:30px; line-height:1; text-transform:uppercase; margin:0 0 12px}
.sec .note{font-size:14px; color:var(--muted); margin:-4px 0 12px}
.grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 12px}
@media (min-width:640px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.dish{background:none; border:0; padding:0; text-align:left; cursor:pointer; display:grid; gap:8px; align-content:start; min-width:0}
.ph{aspect-ratio:1/1; max-width:100%; width:100%; border-radius:8px; overflow:hidden; background:var(--tile); position:relative; display:grid; place-items:center}
.ph img{width:100%; height:100%; object-fit:cover; display:block}
.none{display:grid; justify-items:center; gap:6px; color:var(--muted); font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; text-align:center; padding:8px}
.none svg{width:26px; height:26px}
.row{display:flex; justify-content:space-between; align-items:baseline; gap:8px}
.dn{font-weight:700; font-size:16px; line-height:1.25; min-width:0}
.pr{font-weight:600; font-size:15px; font-variant-numeric:tabular-nums; white-space:nowrap}
.dd{font-size:14px; color:var(--muted); line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.empty{padding:24px 0; color:var(--muted)}
.tags{display:flex; flex-wrap:wrap; gap:4px}
.tags span{font-size:11px; font-weight:700; letter-spacing:.04em; padding:2px 6px; border-radius:4px; border:1px solid var(--rule); color:var(--muted); line-height:1.3}
.key{font-size:13px; color:var(--muted); margin:10px 0 0}

.owner{margin-top:14px; padding:12px 14px; border:1.5px dashed var(--sun); border-radius:10px; font-size:14px}
.owner b{font-weight:700}
.foot{margin-top:44px; padding-top:16px; border-top:1px solid var(--rule); font-size:13px; color:var(--muted)}

.sheet-bg{position:fixed; inset:0; background:var(--shade); z-index:20; display:flex; align-items:flex-end; justify-content:center}
.sheet{background:var(--paper); width:100%; max-width:640px; max-height:92vh; overflow:auto; border-radius:16px 16px 0 0; padding-bottom:max(20px,env(safe-area-inset-bottom,0px))}
@media (min-width:700px){.sheet-bg{align-items:center}.sheet{border-radius:16px}}
.big{aspect-ratio:4/3; max-width:100%; background:var(--tile); display:grid; place-items:center; position:relative}
.big img{width:100%; height:100%; object-fit:cover; display:block}
.big .none{font-size:14px}
.big .none svg{width:34px; height:34px}
.close{position:absolute; top:10px; right:10px; width:40px; height:40px; border-radius:50%; border:0; background:var(--paper); color:var(--ink); display:grid; place-items:center; cursor:pointer}
.close svg{width:20px; height:20px}
.sheet .body{padding:18px max(18px,env(safe-area-inset-right,0px)) 0 max(18px,env(safe-area-inset-left,0px)); display:grid; gap:8px}
.sheet .row h3{font-family:var(--display); font-weight:800; font-stretch:80%; font-size:30px; line-height:1.05; margin:0; text-wrap:balance}
.sheet .row .pr{font-size:20px}
.sheet .where{font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.12em; font-weight:700}
.sheet p{margin:0}
.tools{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.btn{min-height:44px; padding:10px 16px; border-radius:10px; border:1.5px solid var(--ink); background:none; font-weight:700; cursor:pointer; display:inline-flex; align-items:center}
.btn.primary{background:var(--sun); color:var(--on-sun); border-color:var(--sun)}
.msg{font-size:14px; color:var(--muted); min-height:1.4em}
@media (prefers-reduced-motion:no-preference){.sheet{animation:up .18s ease-out}@keyframes up{from{transform:translateY(24px)}to{transform:none}}}