/* Tom Yum: the fascia as the page. Yellow and green from their sign and logo, thin geometric capitals like their lettering. */
:root{
  --yellow:#f4cb00;
  --green:#157a30;
  --green-dk:#0e5a23;
  --ink:#1b1f17;
  --muted:#474d40;
  --bg:#fafaf7;
  --surface:#ffffff;
  --chilli:#c4321c;
  --ease:cubic-bezier(.23,1,.32,1);
  --m:clamp(18px,2.4vw,32px);
  --step-small:clamp(.9375rem,.9rem + .1vw,1rem);
  --step-body:clamp(1.0625rem,1rem + .25vw,1.1875rem);
  --step-lead:clamp(1.25rem,1.1rem + .7vw,1.625rem);
  --step-head:clamp(2rem,1.3rem + 3.2vw,4rem);
  --font:"Jost",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scrollbar-color:var(--green) var(--bg);accent-color:var(--green)}
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:var(--step-body);line-height:1.55;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:.2em}
::selection{background:var(--green);color:#fff}
:focus-visible{outline:3px solid var(--green);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
h1,h2,h3{font-weight:300;line-height:1}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;background:var(--green);color:#fff;text-decoration:none;font-weight:500;font-size:var(--step-body);transition:background .2s,transform .16s var(--ease)}
.btn:active{transform:translateY(1px);transition-duration:60ms}
.btn.ghost{background:transparent;color:var(--ink);outline:2px solid var(--ink);outline-offset:-2px}
@media (hover:hover) and (pointer:fine){.btn:hover{background:var(--green-dk)}.btn.ghost:hover{background:var(--ink);color:var(--yellow)}}

/* top bar, part of the fascia */
.bar{display:flex;align-items:center;gap:24px;padding:12px var(--m);background:var(--yellow)}
.home{display:flex;align-items:center;gap:12px;text-decoration:none;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--green-dk);min-height:44px}
.home img{width:44px;height:44px}
.bar nav{display:flex;gap:26px;margin-left:auto;font-weight:500}
.bar nav a,.bar .call{text-decoration:none;display:inline-flex;align-items:center;min-height:44px;border-bottom:2px solid transparent;transition:border-color .2s}
.bar nav a[aria-current=page]{border-bottom-color:var(--ink)}
.bar .call{font-weight:600;font-variant-numeric:tabular-nums}
@media (hover:hover) and (pointer:fine){.bar nav a:hover{border-bottom-color:var(--ink)}}

/* the fascia */
.fascia{background:var(--yellow);display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(40px,7vh,84px) var(--m) 36px;overflow:hidden}
.mono{font-size:clamp(76px,19.5vw,380px);color:var(--green);text-transform:uppercase;letter-spacing:.01em;line-height:.8;white-space:nowrap;margin-left:-.04em}
.mono .w,.mono i{display:inline-block;font-style:normal}
.sub{align-self:flex-end;font-weight:500;font-size:clamp(1.25rem,1rem + 1.6vw,2.6rem);margin-top:.4em;margin-right:.2em;color:var(--ink)}
.fascia-foot{display:grid;grid-template-columns:1.2fr auto;align-items:end;gap:20px 40px;margin-top:clamp(28px,5vh,64px)}
.lead{font-size:var(--step-lead);line-height:1.3;max-width:24em}
.acts{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}
.today{grid-column:1/-1;font-weight:500}

.front img{width:100%;height:min(78svh,62vw);object-fit:cover;object-position:50% 40%}

/* intro: title, note, facts */
.intro{padding:clamp(80px,12vw,140px) var(--m) clamp(72px,10vw,120px)}
.intro-top{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:end}
.intro h2{grid-column:1/8;font-size:clamp(2.75rem,1.6rem + 3.6vw,4.75rem)}
.intro-top p{grid-column:9/13;color:var(--muted)}
.facts{display:flex;justify-content:space-between;gap:28px;flex-wrap:wrap;margin-top:clamp(64px,9vw,120px)}
.facts dt{font-size:clamp(1.75rem,1.2rem + 1.8vw,2.75rem);color:var(--green);line-height:1.05}
.facts dd{margin-top:8px;color:var(--muted);font-size:var(--step-small);max-width:15em}

/* poster: the menu as one-line posters, on the green */
.poster{background:var(--green);color:#fff;padding:clamp(56px,8vw,96px) var(--m)}
.poster ul{list-style:none}
.poster a{display:flex;justify-content:space-between;align-items:baseline;gap:20px;text-decoration:none}
.poster b{font-weight:300;text-transform:uppercase;font-size:clamp(3rem,1rem + 8vw,8.75rem);line-height:.98;color:var(--yellow);transition:color .2s}
.poster span{font-size:clamp(1rem,.9rem + .4vw,1.25rem);font-variant-numeric:tabular-nums;white-space:nowrap}
.poster-note{margin-top:40px;max-width:30em;color:#e6f2e9}
@media (hover:hover) and (pointer:fine){.poster a:hover b{color:#fff}}

/* lunch: square plate, spare text */
.lunch{display:grid;grid-template-columns:1fr 1fr;min-height:88svh}
.plate{padding:40px;display:flex;align-items:center}
.plate img{width:100%;aspect-ratio:1;object-fit:cover}
.lunch-side{display:flex;flex-direction:column;justify-content:space-between;gap:36px;padding:56px var(--m) 40px 16px}
.tabs{display:flex;flex-wrap:wrap;gap:6px 26px}
.tabs button{font:inherit;font-size:1.125rem;font-weight:500;background:none;border:0;color:var(--muted);cursor:pointer;min-height:44px;border-bottom:3px solid transparent;transition:color .2s,border-color .2s}
.tabs button[aria-selected=true]{color:var(--ink);border-bottom-color:var(--green)}
.tabs button:active{transform:translateY(1px)}
.lunch h2{font-size:clamp(2rem,1.4rem + 1.8vw,2.75rem);font-weight:400}
.when{margin-top:12px;font-weight:500;color:var(--green)}
.dishes{list-style:none;display:grid;gap:16px;margin-top:28px}
.dishes li{display:grid;grid-template-columns:1fr auto;column-gap:20px}
.dishes b{font-weight:500}
.dishes span{grid-column:1;color:var(--muted);font-size:var(--step-small);line-height:1.45}
.dishes em{grid-row:1;grid-column:2;font-style:normal;font-variant-numeric:tabular-nums;font-weight:500}
.choice{margin-top:20px;font-size:var(--step-small);font-weight:500}
[role=tabpanel].show{animation:fade .18s var(--ease)}
@keyframes fade{from{opacity:0}to{opacity:1}}
.cells{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cell{display:flex;align-items:center;justify-content:center;min-height:72px;background:#ecece4;text-decoration:none;font-weight:500;transition:background .2s}
.cell.dark{background:var(--ink);color:var(--yellow)}
@media (hover:hover) and (pointer:fine){.cell:hover{background:var(--yellow)}.cell.dark:hover{background:var(--green);color:#fff}}

/* quotation spread edge to edge, on the yellow */
.quote{background:var(--yellow);color:var(--green-dk);padding:clamp(96px,12vw,150px) var(--m)}
.spread{display:flex;justify-content:space-between;font-size:clamp(2.6rem,.8rem + 7.4vw,9rem);line-height:1;letter-spacing:-.01em}
.spread+.spread{margin-top:.25em}
.by{display:flex;justify-content:space-between;gap:16px;margin-top:56px;font-size:1.125rem;font-weight:500;color:var(--ink)}

/* inside */
.room{padding:clamp(72px,10vw,120px) var(--m)}
.room h2{font-size:var(--step-head)}
.room-row{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:12px;margin-top:36px}
.room-row img{width:100%;aspect-ratio:4/3;object-fit:cover;height:100%}

/* find us: address in display rows */
.visit{background:var(--green)}
.visit .row{display:flex;align-items:flex-end;min-height:clamp(96px,11vw,150px);padding:0 var(--m) 22px;font-size:clamp(2.25rem,1rem + 4.2vw,5.5rem);line-height:1;color:var(--yellow);text-decoration:none}
.visit .row:nth-child(even){background:var(--green-dk)}
.visit a.row{transition:color .2s}
@media (hover:hover) and (pointer:fine){.visit a.row:hover{color:#fff}}
.visit .hours{font-size:var(--step-lead);color:#fff;padding-top:28px;padding-bottom:28px}
.visit .hours dl{display:grid;gap:10px;width:100%}
.visit .hours div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 24px}
.visit .hours dd{font-variant-numeric:tabular-nums}
.visit .hours .today dt{color:var(--yellow);font-weight:500}
.visit .hours .today dt::after{content:", today"}
.visit .row.hello{background:var(--yellow);color:var(--green-dk);align-items:center;gap:.4em;padding-bottom:0}
.arrow{display:inline-flex;align-items:center;justify-content:center;width:.9em;height:.9em;border-radius:50%;background:var(--green-dk);color:var(--yellow)}
.arrow svg{width:.5em;height:.5em}

.foot{background:var(--green-dk);color:#fff;padding:40px var(--m) 28px;overflow:hidden}
.mono-foot{font-size:clamp(72px,19vw,370px);font-weight:300;line-height:.8;color:var(--yellow);white-space:nowrap;margin-left:-.04em}
.foot-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 28px;margin-top:28px;font-size:var(--step-small);color:#dbe9df}

/* menu page */
.menu-page .bar{position:relative}
.mhead{background:var(--yellow);padding:clamp(40px,7vw,90px) var(--m) 36px;display:grid;grid-template-columns:1fr minmax(260px,32%);column-gap:40px;align-items:end}
.mhead > *:not(.mhead-img){grid-column:1}
.mhead-img{grid-column:2;grid-row:1 / span 2;width:100%;aspect-ratio:4/3;object-fit:cover}
.mhead h1{font-size:clamp(3rem,1.4rem + 6vw,7rem);color:var(--green);text-transform:uppercase}
.mhead p{margin-top:18px;max-width:34em;font-size:var(--step-lead);line-height:1.35}
.mhead a{font-weight:600}
.tools{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:16px;background:var(--bg);box-shadow:0 8px 18px -16px rgba(0,0,0,.45);padding:6px var(--m)} /* taste-skill-ignore: sticky bar */
.cats{flex:1;min-width:0;display:flex;gap:4px 22px;overflow-x:auto;scrollbar-width:none;white-space:nowrap;font-weight:500}
.cats::-webkit-scrollbar{display:none}
.cats a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;color:var(--muted);border-bottom:3px solid transparent;transition:color .2s,border-color .2s}
.cats a.on{color:var(--ink);border-bottom-color:var(--green)}
.filters{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:14px var(--m) 0}
.tog{font:inherit;font-weight:500;min-height:44px;padding:0 16px;background:#ecece4;border:0;color:var(--ink);cursor:pointer;transition:background .2s,color .2s}
.tog[aria-pressed=true]{background:var(--green);color:#fff}
.spice{display:inline-flex;align-items:center;gap:8px;font-weight:500}
.spice select{font:inherit;min-height:44px;padding:0 10px;border:0;background:#ecece4;color:var(--ink)}
.allerg{position:relative}
.allerg summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;background:#ecece4;font-weight:500}
.allerg summary::-webkit-details-marker{display:none}
.allerg[open] summary,.allerg.active summary{background:var(--ink);color:var(--yellow)}
.allerg-box{position:absolute;left:0;top:calc(100% + 6px);width:min(92vw,520px);background:var(--surface);padding:20px;outline:2px solid var(--ink);z-index:30}
.allerg-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:4px 12px;margin:10px 0 14px}
.allerg-list label{display:flex;align-items:center;gap:10px;min-height:40px;cursor:pointer}
.allerg-list input{width:20px;height:20px}
.warn{font-size:var(--step-small);color:var(--muted)}
.order-jump{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;background:var(--yellow);text-decoration:none;font-weight:500}
.order-jump b{font-variant-numeric:tabular-nums}

.menu-wrap{display:grid;grid-template-columns:1fr minmax(300px,380px);gap:clamp(24px,4vw,64px);padding:24px var(--m) 80px;align-items:start}
.sec{padding-top:44px;scroll-margin-top:76px}
.sec h2{font-size:clamp(2rem,1.2rem + 2.6vw,3.25rem);text-transform:uppercase;color:var(--green)}
.sec .note{margin-top:12px;color:var(--muted);max-width:44em;font-size:var(--step-small)}
.dish{display:grid;grid-template-columns:2.6em 1fr auto;column-gap:14px;padding:16px 0 20px}
.dish .num{color:var(--muted);font-variant-numeric:tabular-nums;padding-top:2px}
.dish h3{font-size:1.1875rem;font-weight:500;line-height:1.3}
.dish h3 .heat{display:inline-flex;gap:1px;margin-left:8px;color:var(--chilli);vertical-align:-2px}
.dish h3 .heat svg{width:18px;height:18px}
.dish h3 .v{margin-left:8px;font-size:.8125rem;font-weight:600;color:var(--green);letter-spacing:.02em}
.dish p{color:var(--muted);font-size:1rem;line-height:1.45;margin-top:4px;max-width:40em}
.dish .al{font-size:1rem;margin-top:4px;color:var(--ink)}
.dish .buy{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.dish .price{font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}
.dish select{font:inherit;font-size:.9375rem;min-height:44px;padding:0 8px;border:0;background:#ecece4;max-width:190px}
.add{font:inherit;font-weight:500;min-height:44px;min-width:76px;padding:0 14px;background:var(--ink);color:var(--yellow);border:0;cursor:pointer;transition:background .2s,transform .16s var(--ease)}
.add:active{transform:translateY(1px);transition-duration:60ms}
.add.done{background:var(--green);color:#fff}
@media (hover:hover) and (pointer:fine){.add:hover{background:var(--green);color:#fff}}
.empty-filter{padding:40px 0;font-weight:500}

.order{position:sticky;top:76px;background:var(--surface);padding:24px;box-shadow:0 16px 36px -24px rgba(0,0,0,.35)} /* taste-skill-ignore: order panel */
.order h2{font-size:1.75rem;font-weight:400}
.order .empty{margin-top:12px;color:var(--muted)}
#order-lines{list-style:none;margin-top:14px;display:grid;gap:10px}
#order-lines li{display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:center}
#order-lines .nm{font-weight:500;line-height:1.3}
#order-lines .lp{font-variant-numeric:tabular-nums;text-align:right}
#order-lines .qty{grid-column:1/-1;display:flex;align-items:center;gap:6px;color:var(--muted);font-size:.9375rem}
#order-lines .qty button{font:inherit;width:44px;height:36px;border:0;background:#ecece4;cursor:pointer}
.sums{margin-top:18px;display:grid;gap:6px}
.sums div{display:flex;justify-content:space-between;gap:12px;font-variant-numeric:tabular-nums}
.sums .total{font-weight:600;font-size:1.25rem;padding-top:8px}
#o-disc-row{color:var(--green);font-weight:500}
.nudge{margin-top:10px;font-weight:500;color:var(--green);min-height:1.4em}
.order .btn{width:100%;margin-top:16px}
.order .small{margin-top:10px;font-size:var(--step-small);color:var(--muted)}
.key{padding:0 var(--m) 80px;max-width:60em}
.key h2{font-size:1.5rem;font-weight:500}
.key p{margin-top:10px;color:var(--muted);font-size:var(--step-small)}
.nojs{padding:40px 0;font-weight:600}

/* motion: slide-up and fade, stagger; never left hidden */
.motion [data-in]{opacity:0;transform:translateY(12px);transition:opacity .5s var(--ease),transform .5s var(--ease);transition-delay:calc(var(--i,0) * 60ms)}
.motion [data-in].in{opacity:1;transform:none}
.motion .mono i{opacity:0;transform:translateY(.18em);animation:rise .7s var(--ease) forwards;animation-delay:calc(var(--n,0) * 70ms + 80ms)}
@keyframes rise{to{opacity:1;transform:none}}
.settled [data-in],.settled .mono i{opacity:1!important;transform:none!important;animation:none!important}

@media (max-width:900px){
  .bar nav{display:none}
  .bar .call{margin-left:auto}
  .fascia{min-height:auto;padding-top:56px}
  .fascia-foot{grid-template-columns:1fr}
  .acts{justify-content:flex-start}
  .acts .btn{flex:1 1 auto}
  .intro-top{grid-template-columns:1fr}
  .intro h2,.intro-top p{grid-column:1}
  .facts{display:grid;grid-template-columns:1fr 1fr;row-gap:32px}
  .poster a{flex-direction:column;align-items:flex-start;gap:4px}
  .poster li+li{margin-top:18px}
  .lunch{grid-template-columns:1fr;min-height:0}
  .plate{padding:16px var(--m) 0}
  .lunch-side{padding:32px var(--m) 48px}
  .cells{grid-template-columns:1fr}
  .cell{min-height:60px}
  .spread{display:block;font-size:12.5vw}
  .spread span{display:inline}
  .spread span+span::before{content:" "}
  .by{flex-direction:column;gap:4px}
  .by span:nth-child(2){align-self:center}
  .by span:nth-child(3){align-self:flex-end}
  .room-row{grid-template-columns:1fr}
  .visit .row{font-size:9.4vw;min-height:84px}
  .visit .row.hours{font-size:var(--step-body);min-height:0}
  .mhead{grid-template-columns:1fr}
  .mhead-img{display:none}
  .order-jump span{display:none}
  .spice{gap:0}
  .spice > span{display:none}
  .menu-wrap{grid-template-columns:1fr}
  .order{position:static}
  .tools{padding-top:2px}
  .dish{grid-template-columns:2em 1fr;row-gap:10px}
  .dish .buy{grid-column:2;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* menu page: eat in */
.eatin{padding:20px var(--m) 72px}
.eatin-text{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:12px 40px}
.eatin h2{font-size:clamp(2rem,1.2rem + 2.6vw,3.25rem);color:var(--green);text-transform:uppercase}
.eatin p{max-width:30em}
.eatin a{font-weight:600}
.eatin-row{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:12px;margin-top:28px}
.eatin-row img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover}
@media (max-width:900px){.eatin-row{grid-template-columns:1fr 1fr}.eatin-row img:first-child{grid-column:1/-1}}