/* Shared look for every restaurant. Per-restaurant colors come from --accent and --ink set in each page. */
:root{--bg:#ffffff;--soft:#f6f4f1;--line:#e4e0da;--muted:#6b645c;--display:"Fraunces",Georgia,serif;--body:"Karla",system-ui,sans-serif;color-scheme:light}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.6 var(--body)}
a{color:inherit}
img{max-width:100%;display:block}
main{max-width:1120px;margin:0 auto;padding:0 max(16px,env(safe-area-inset-left,0px)) 48px max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--display);line-height:1.1;text-wrap:balance;margin:0 0 .4em}
h1{font-size:clamp(34px,6vw,60px);font-weight:800}
h2{font-size:clamp(24px,3.4vw,32px);font-weight:600}
h3{font-size:20px;font-weight:600}
.top{position:sticky;top:0;z-index:5;background:var(--bg);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:20px;padding:12px max(16px,env(safe-area-inset-right,0px)) 12px max(16px,env(safe-area-inset-left,0px));flex-wrap:wrap}
.brand{font:800 26px var(--display);text-decoration:none;display:flex;align-items:baseline;gap:8px}
.brand small{font:600 12px var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.top nav{display:flex;gap:18px;flex-wrap:wrap;margin-left:auto}
.top nav a{text-decoration:none;font-weight:600;font-size:15px;padding:4px 0;border-bottom:2px solid transparent}
.top nav a[aria-current]{border-color:var(--accent)}
.btn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;font-weight:600;padding:10px 18px;border-radius:999px;border:2px solid var(--accent)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:32px;align-items:center;padding:32px 0}
.hero-copy{min-width:0}
.eyebrow{font-weight:600;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:0 0 10px}
.ctas{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0 10px}
.byob{font-weight:600;color:var(--muted)}
.photo{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px;background:var(--soft)}
.hero-img{aspect-ratio:1/1;order:2}
.ph{display:grid;place-items:center;background:repeating-linear-gradient(135deg,var(--soft) 0 14px,#efece7 14px 28px);color:var(--muted);font-size:14px;text-align:center;padding:12px}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:24px 0}
.tile{text-decoration:none;display:grid;gap:10px}
.tile p{margin:0;color:var(--muted)}
.reviews{padding:32px 0;border-top:1px solid var(--line)}
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
blockquote{margin:0;padding:20px;background:var(--soft);border-radius:14px}
blockquote p{margin:0 0 10px}
cite{font-style:normal;font-weight:600;color:var(--muted);font-size:14px}
.pagehead{padding:36px 0 8px;border-bottom:1px solid var(--line);margin-bottom:24px}
.pagehead p{color:var(--muted);margin:0}
.menu{margin-bottom:36px}
.menu>h2{color:var(--accent)}
.note{color:var(--muted);font-size:15px;max-width:70ch}
.msec{break-inside:avoid;margin-bottom:24px}
.msec h3{border-bottom:2px solid var(--ink);padding-bottom:6px}
.items{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:4px 32px}
.items li{padding:8px 0;border-bottom:1px dashed var(--line)}
.row{display:flex;justify-content:space-between;gap:12px;font-weight:600}
.price{white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--accent)}
.idesc{margin:2px 0 0;font-size:15px;color:var(--muted)}
.split{display:grid;grid-template-columns:1fr 360px;gap:36px;align-items:start}
.split>*{min-width:0}
.inquiry{background:var(--soft);border-radius:14px;padding:20px;display:grid;gap:8px;position:sticky;top:90px}
.inquiry label{font-weight:600;font-size:14px}
.inquiry input,.inquiry textarea{font:inherit;padding:10px;border:1px solid var(--line);border-radius:8px;background:#fff;width:100%}
.inquiry button{font:inherit;font-weight:600;background:var(--accent);color:#fff;border:0;border-radius:999px;padding:12px;cursor:pointer;margin-top:6px}
.status{margin:0;font-size:15px}
.hp{position:absolute;left:-9999px}
main>.inquiry{max-width:520px;position:static}
.prose{max-width:68ch}
.prose .photo{margin-bottom:20px}
.foot{background:var(--ink);color:#f3f1ee;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:36px max(16px,env(safe-area-inset-right,0px)) calc(36px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.foot h4{font:600 13px var(--body);letter-spacing:.12em;text-transform:uppercase;margin:0 0 8px;color:#bdb6ad}
.foot p{margin:0 0 8px}
.hours{list-style:none;margin:0;padding:0}
.hours li{display:flex;justify-content:space-between;gap:12px;max-width:280px;font-variant-numeric:tabular-nums}
@media (max-width:820px){
  .hero,.split{grid-template-columns:1fr}.hero-img{order:0}
  .tiles,.quotes,.foot{grid-template-columns:1fr}
  .top nav{order:3;width:100%;margin:0;overflow-x:auto}
  .top .btn{margin-left:auto}
  .inquiry{position:static}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

/* ---- Menu jump bar (Uber Eats style): sticks under the header, tabs scroll sideways ---- */
.menubar{position:sticky;top:var(--head-h,64px);z-index:4;background:var(--bg);padding:10px 0 8px;margin:0 0 16px;border-bottom:1px solid var(--line);display:grid;gap:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.search input{width:100%;font:inherit;font-size:16px;padding:10px 14px;border:1px solid var(--line);border-radius:999px;background:var(--soft)}
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;scroll-snap-align:start;text-decoration:none;font-weight:600;font-size:15px;padding:8px 14px;border-radius:999px;border:1px solid var(--line);white-space:nowrap}
.chip.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.menu,.msec{scroll-margin-top:calc(var(--head-h,64px) + var(--bar-h,110px) + 8px)}
.nomatch{color:var(--muted);font-weight:600}

/* ---- Sticky Call / Reserve / Order bar: phones only ---- */
.actionbar{display:none}
@media (max-width:820px){
  .actionbar{display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:6;background:var(--bg);border-top:1px solid var(--line);
    padding:8px max(12px,env(safe-area-inset-right,0px)) calc(8px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px));box-shadow:0 -6px 18px rgb(0 0 0 / .06)}
  .actionbar a{display:flex;flex-direction:column;align-items:center;gap:2px;text-decoration:none;font-weight:600;font-size:14px;padding:8px 4px;border-radius:12px;border:1px solid var(--line);min-height:52px;justify-content:center}
  .actionbar a span{font-size:18px;line-height:1}
  .actionbar a.main{background:var(--accent);border-color:var(--accent);color:#fff}
  body{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  .top .btn{display:none}
}
/* Phones: header scrolls away (the bottom bar keeps Call/Reserve/Order in reach); its links stay on one swipeable line */
@media (max-width:820px){
  .top{position:static}
  .top nav{flex-wrap:nowrap;gap:16px;scrollbar-width:none}
  .top nav::-webkit-scrollbar{display:none}
  .top nav a{flex:none}
}

/* ---- Desktop menu: printed-menu feel. Quiet section list on the left, menu in two columns on the right. ---- */
@media (min-width:821px){
  .menuwrap{display:grid;grid-template-columns:210px minmax(0,1fr);gap:48px;align-items:start}
  .menuwrap>*{min-width:0}
  .menubar{top:calc(var(--head-h,64px) + 24px);border:0;padding:0;margin:0;gap:14px;max-height:calc(100vh - var(--head-h,64px) - 48px);overflow-y:auto}
  .search input{font-size:15px;padding:9px 12px;border-radius:8px}
  .chips{flex-direction:column;gap:2px;overflow:visible}
  .chip{border:0;border-radius:6px;padding:7px 12px;font-weight:500;color:var(--muted);white-space:normal}
  .chip:hover{color:var(--ink);background:var(--soft)}
  .chip.on{background:var(--soft);color:var(--ink);font-weight:600;box-shadow:inset 3px 0 0 var(--accent)}
  .msec h3{border-bottom:0;font-size:24px;letter-spacing:.01em;padding-bottom:0}
  .msec h3::after{content:"";display:block;width:40px;height:2px;background:var(--accent);margin-top:8px}
  .items{column-gap:48px}
  .items li{border-bottom:0;padding:10px 0}
  .menuwrap .split{grid-template-columns:minmax(0,1fr) 320px}
}