:root{--paper:#f7f6ef;--ink:#244536;--muted:#767c70;--line:#dedfd4;--yellow:#e8ef98;--radius:22px}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;font-size:15px}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #bc6b35;outline-offset:4px}header{height:92px;max-width:1100px;margin:auto;padding:0 40px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;text-decoration:none;color:var(--ink);font-size:31px;font-weight:800;letter-spacing:-1.6px}.brand-dot{color:#a8b24e}.brandmark{display:flex;align-items:center;justify-content:center;background:var(--ink);color:var(--yellow);border-radius:13px;width:38px;height:38px;margin-right:12px;font:italic bold 31px Georgia;letter-spacing:-5px;padding-right:6px}.brandmark span{font-size:20px;align-self:flex-start;line-height:29px}.menu-button{border:1px solid #c7cbbb;background:transparent;border-radius:30px;min-height:44px;padding:0 18px;display:flex;align-items:center;gap:14px;font-weight:600}.sliders{font-size:24px;line-height:1}.menu-button b{font-size:11px;background:var(--ink);color:white;border-radius:50%;padding:4px 6px}main{max-width:760px;margin:auto;padding:48px 28px 0}.eyebrow{font-size:10px;letter-spacing:1.7px;font-weight:700;display:flex;align-items:center;gap:8px}.location-dot{width:7px;height:7px;background:#91a059;border-radius:50%}.divider{color:#a2a88f;margin:0 5px}h1{font-size:76px;line-height:1.02;font-weight:500;letter-spacing:-4px;margin:24px 0 20px;position:relative}h1 span{font-family:Georgia,serif;font-style:italic}h1 svg{position:absolute;width:98px;right:35px;top:35px;stroke:#86994c;stroke-width:2.5;fill:none;stroke-linecap:round;transform:rotate(18deg)}.intro>p{font-size:16px;color:var(--muted);margin-bottom:32px}.demo-note{display:flex;gap:13px;align-items:center;background:#ecefdc;border:1px solid #e0e5c9;border-radius:14px;padding:14px 17px}.demo-note>span{font-size:27px;color:#6c7d37}.demo-note p{margin:0;line-height:1.7;font-size:12px;color:#697251}.demo-note strong{color:var(--ink);font-weight:600}.list-heading{display:flex;align-items:center;justify-content:space-between;margin:34px 0 12px}.list-heading h2{font-size:19px;font-weight:600;letter-spacing:-.6px}.list-heading>span{font-size:12px;color:var(--muted)}#active-filters{display:flex;gap:6px;flex-wrap:wrap}#active-filters:not(:empty){margin-bottom:16px}.active-chip{border:1px solid #cbd3bc;background:#eaf0df;border-radius:20px;padding:7px 12px;font-size:11px}.meal{width:100%;display:grid;grid-template-columns:1fr auto 18px;gap:20px;align-items:center;text-align:left;padding:25px 2px;border:0;border-top:1px solid var(--line);background:transparent;transition:background .15s,padding .15s}.meal:hover{background:#edf0e3;padding-left:12px;padding-right:10px}.meal-name{font-size:16px;line-height:1.5;font-weight:500;max-width:470px}.meal-price{font-size:16px;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}.meal-arrow{font-size:23px;color:#879377}.sample-badge{display:block;font-size:9px;text-transform:uppercase;letter-spacing:1.3px;color:#858b7d;margin-top:7px}.meal:first-child .sample-badge{color:#78874a}footer{border-top:1px solid var(--line);margin-top:18px;padding:28px 0 30px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;color:var(--muted);font-size:11px}.mini-brand{font-size:19px;font-weight:bold;color:var(--ink);letter-spacing:-1px}footer small{flex-basis:100%;font-size:10px}dialog{color:var(--ink);border:0;padding:30px;background:var(--paper);max-height:100dvh}dialog::backdrop{background:#182d2360;backdrop-filter:blur(3px)}dialog[open]{animation:appear .22s ease-out}dialog.drawer{margin:0 0 0 auto;width:min(440px,100%);height:100dvh;max-width:100%;border-radius:24px 0 0 24px;position:fixed;overflow:auto;display:none}dialog.drawer[open]{display:flex;flex-direction:column;animation:slide .25s ease-out}.drawer-top{display:flex;justify-content:space-between;align-items:center}.icon-button{border:1px solid var(--line);background:transparent;border-radius:50%;width:44px;height:44px;flex-shrink:0;font-size:26px}.drawer h2{font-size:32px;font-weight:500;letter-spacing:-1px;margin:28px 0 4px}.muted{color:var(--muted);font-size:13px;line-height:1.6}.drawer section{margin-top:28px}.section-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.section-title h3{font-size:15px;margin:0}.section-title>span{font-size:9px;letter-spacing:1.5px;color:var(--muted)}.chips{display:flex;flex-wrap:wrap;gap:10px}.chip{border:2px solid transparent;border-radius:24px;padding:12px 15px;font-size:13px;min-height:44px;background:var(--chip);display:inline-flex;align-items:center;gap:7px}.chip[aria-pressed=true]{border-color:var(--ink);box-shadow:0 0 0 2px var(--paper) inset}.chip .check{width:12px;display:inline-block;opacity:.35}.chip[aria-pressed=true] .check{opacity:1}.filter-tip{font-size:12px;color:var(--muted);line-height:1.8;margin:26px 0}.drawer-bottom{margin-top:auto;padding-top:24px;display:grid;gap:16px}.text-button{border:0;background:transparent;text-decoration:underline;text-underline-offset:4px;min-height:44px;font-size:12px}.primary{background:var(--ink);color:var(--paper);border:0;border-radius:16px;min-height:54px;padding:16px;font-weight:600}.detail{width:min(560px,100%);border-radius:26px;overflow:auto}.detail>.close{float:right;margin:0 0 15px 10px}.detail h2{clear:both;font-size:29px;font-weight:500;letter-spacing:-.7px;line-height:1.23;margin:22px 0}.detail-labels{display:flex;gap:8px;flex-wrap:wrap}.detail-labels span{padding:8px 13px;border-radius:20px;background:#e5eccf;font-size:12px}.detail .price-line{display:flex;justify-content:space-between;align-items:center;padding:22px 0;border-bottom:1px solid var(--line)}.price-line strong{font-size:28px}.price-line span{font-size:13px;color:var(--muted)}.restaurant-block{padding:22px 0;border-bottom:1px solid var(--line)}.restaurant-block h3{margin:0 0 6px;font-size:17px}.restaurant-block p{margin:0;font-size:13px;color:var(--muted)}.detail h4{font-size:14px}.soup{background:#ecefdc;border-radius:14px;padding:16px;margin:10px 0;font-size:14px;line-height:1.5}.soup div{display:flex;justify-content:space-between;font-size:12px;margin-top:10px;color:#6a754e}.source-link{display:block;text-align:center;margin-top:22px;text-decoration:none}.source-note{font-size:12px;color:var(--muted);line-height:1.6;margin-top:24px}#empty{text-align:center;padding:35px 15px}#empty>span{font:48px Georgia}#empty h3{font-size:18px}#empty p{font-size:13px;color:var(--muted)}@keyframes slide{from{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes appear{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media(min-width:900px){main{padding-top:55px}h1 br{display:none}h1 svg{right:0;top:-12px;width:90px}.intro{padding-bottom:5px}}@media(max-width:600px){header{height:78px;padding:0 22px}.brand{font-size:28px}.brandmark{width:34px;height:34px;font-size:29px}main{padding:32px 22px 0}h1{font-size:68px;margin-top:25px}h1 svg{right:30px;top:35px;width:92px}.intro>p{font-size:14px;margin-bottom:26px}.meal{gap:12px;padding:22px 0}.meal-name{font-size:15px}.meal-price{font-size:15px}.list-heading{margin-top:26px}.detail{margin:auto 0 0;max-width:100%;max-height:92dvh;border-radius:26px 26px 0 0;padding:26px}.detail h2{font-size:27px}.drawer{padding:25px}.demo-note{padding:12px}.demo-note p{font-size:11px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* Compact meal-first layout. */
main{padding-top:16px}.results-bar{display:flex;justify-content:flex-end;align-items:center;min-height:28px;margin-bottom:12px;color:var(--muted);font-size:12px}

/* Dropdown stops at the viewport midpoint; only the chip area scrolls. */
.filter-dropdown{--dropdown-top:92px;position:fixed;inset:var(--dropdown-top) max(22px,calc((100vw - 1020px)/2)) auto auto;margin:0;width:min(440px,calc(100vw - 44px));max-height:max(100px,calc(50dvh - var(--dropdown-top)));padding:0;border:1px solid var(--line);border-radius:0 0 20px 20px;background:var(--paper);color:var(--ink);box-shadow:0 14px 32px #24453622;overflow:hidden}
.filter-dropdown:popover-open{display:flex;flex-direction:column;animation:appear .16s ease-out}
.dropdown-heading{display:flex;align-items:center;justify-content:space-between;padding:10px 18px;flex-shrink:0;border-bottom:1px solid var(--line)}
.dropdown-heading h2{margin:0;font-size:16px;font-weight:600}.dropdown-heading .icon-button{width:36px;height:36px;font-size:23px}
.filter-scroll{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:16px 18px;scrollbar-gutter:stable}
.filter-scroll section+section{margin-top:22px}.filter-scroll .section-title{margin-bottom:10px}.filter-scroll .chips{gap:8px}
.dropdown-footer{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 18px;border-top:1px solid var(--line);background:var(--paper)}
.dropdown-footer .primary{min-height:44px;padding:10px 14px;border-radius:12px;font-size:12px}.dropdown-footer .text-button{font-size:11px}
@media(max-width:600px){.filter-dropdown{--dropdown-top:78px;left:22px;right:22px;width:auto}}
@media(max-height:500px){.dropdown-heading{display:none}.dropdown-footer{padding:4px 12px}.filter-scroll{padding:10px 12px}}

/* In-flow filters replace the header and leave the first meal below them. */
header[hidden],.filter-dropdown[hidden]{display:none!important}
.filter-dropdown{position:relative;inset:auto;margin:0 auto;width:100%;max-width:1100px;max-height:50dvh;border:0;border-bottom:1px solid var(--line);border-radius:0;background:var(--paper);box-shadow:none;overflow:hidden}
.filter-dropdown:not([hidden]){display:flex;flex-direction:column}
.filter-dropdown .dropdown-heading{display:flex;padding:12px 22px}
.filter-scroll{padding:16px 22px}
.dropdown-footer{padding:10px 22px}
@media(min-width:760px){.filter-scroll{display:grid;grid-template-columns:1fr 1fr;gap:28px}.filter-scroll section+section{margin-top:0}.filter-dropdown .dropdown-heading,.filter-scroll,.dropdown-footer{padding-left:40px;padding-right:40px}}
@media(max-height:500px){.filter-dropdown .dropdown-heading{padding-top:4px;padding-bottom:4px}.dropdown-footer{padding-top:4px;padding-bottom:4px}}

/* One stable header and toggle for both filter states. */
.menu-button{position:relative;width:156px;height:44px;flex-shrink:0;justify-content:center;gap:9px;padding:0 12px;font-size:13px;white-space:nowrap}
.menu-button b{position:absolute;right:-5px;top:-5px}
.filter-dropdown{max-height:max(100px,calc(50dvh - 92px))}
@media(max-width:600px){.filter-dropdown{max-height:max(100px,calc(50dvh - 78px))}}
@media(max-width:380px){header{padding-left:14px;padding-right:14px}.brand{font-size:24px}.brandmark{width:28px;height:28px;font-size:25px;margin-right:8px}.menu-button{width:150px}}

/* Compact zebra rows keep long, unfiltered menus easy to scan. */
.meal{padding:14px 12px;min-height:52px;gap:12px;background:#fff;transition:background .15s;border-top-color:#e4e7df}
.meal:nth-child(even){background:rgba(111,139,85,.08)}
.meal:hover{padding:14px 12px;background:#e8eddf}
.meal-name{line-height:1.4}
.meal:focus-visible{outline-offset:-3px}
@media(max-width:600px){.meal,.meal:hover{padding:12px 10px;gap:10px}}

/* Clear hover feedback on both zebra row colors. */
@media(hover:hover){.meal:hover{background:#d5e2c5;box-shadow:inset 3px 0 0 #6c854c}}

/* The whole row is the detail trigger; reserve only name and price columns. */
.meal{grid-template-columns:minmax(0,1fr) auto}

/* A typographic wordmark with a fork-shaped lowercase l. */
.brand{letter-spacing:0}
.wordmark{display:inline-flex;align-items:baseline;font-family:Georgia,'Times New Roman',serif;font-size:38px;font-weight:700;letter-spacing:-2px;line-height:1;color:var(--ink)}
.fork-letter{height:.87em;width:.41em;align-self:center;margin:0 1px 0 2px;color:#83964c;overflow:visible;transform:translateY(-1px)}
.wordmark-dot{color:#83964c;margin-left:1px}
@media(max-width:600px){.wordmark{font-size:35px}}
@media(max-width:380px){.wordmark{font-size:31px}}

/* Plain lettering, with a compact, gently slanted character. */
.logo-text{display:inline-block;font-family:'Arial Rounded MT Bold','Trebuchet MS',Arial,sans-serif;font-size:38px;font-weight:800;font-style:italic;letter-spacing:-2px;line-height:1;color:var(--ink)}
@media(max-width:600px){.logo-text{font-size:35px}}
@media(max-width:380px){.logo-text{font-size:31px}}