/* Wah Hong demo. Colours from their shop sign: yellow board, red letters. */
:root{
  --yellow:#f5c73c; --pale:#fff6d6; --white:#fffdf5; --red:#b8141c; --red-deep:#8f0d14; --ink:#26100e; --soft:#5b4340; --green:#1c6e30;
  --display:"Alfa Slab One","Rockwell","Georgia",serif; --cjk:"Noto Serif TC","PMingLiU","Songti TC",serif; --text:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --t-body:clamp(1.0625rem,.98rem + .3vw,1.1875rem); --t-small:clamp(.9688rem,.9rem + .24vw,1.125rem);
  --t-h3:clamp(1.25rem,1.1rem + .6vw,1.625rem); --t-h2:clamp(2rem,1.3rem + 3vw,4rem);
  --pad:clamp(18px,4vw,64px); --sec:clamp(56px,7vw,120px); --gap:clamp(18px,2.4vw,40px); --max:1440px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--pale);color:var(--ink);font:400 var(--t-body)/1.5 var(--text);overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
button,input{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.on-red :focus-visible{outline-color:var(--yellow)}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
h2{font:400 var(--t-h2)/1.02 var(--display);color:var(--red);letter-spacing:-.01em;text-transform:uppercase}
h3{font:400 var(--t-h3)/1.15 var(--display)}

.brand,.sign h1,.foot .big p{text-transform:uppercase}

/* buttons: plain rectangles */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:52px;padding:.7em 1.3em;background:var(--red);color:#fff;font-weight:700;font-size:var(--t-body);text-decoration:none;border:0;border-radius:0;cursor:pointer;transition:background .18s ease,transform .18s ease}
.btn:hover{background:var(--red-deep)}
.btn:active{transform:translateY(1px)}
.btn.dark{background:var(--ink)}
.btn.dark:hover{background:#000}
.btn.yellow{background:var(--yellow);color:var(--ink)}
.btn.yellow:hover{background:#ffd85a}

/* header */
.top{background:var(--yellow)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px}
.brand{display:inline-flex;align-items:baseline;gap:.45em;font:400 clamp(1.25rem,1.1rem + .7vw,1.75rem)/1 var(--display);color:var(--red);text-decoration:none;min-height:44px;align-items:center}
.brand span{font-family:var(--cjk);font-weight:900}
.nav{display:flex;align-items:center;gap:clamp(6px,1.6vw,28px)}
.nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 6px;font-weight:600;font-size:var(--t-small);text-decoration:none}
.nav a:hover{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px}
.nav a.btn{padding:0 1em;color:#fff;min-height:44px;font-size:var(--t-small)}
.nav a.btn:hover{text-decoration:none}
@media (max-width:760px){.nav .opt{display:none}}

/* hero */
.hero{background:var(--yellow);padding-block:clamp(20px,3vw,48px) clamp(28px,4.5vw,80px)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,5vw,88px);align-items:center}
.sign{container-type:inline-size}
.sign .cjk{display:block;font:900 clamp(2.75rem,13cqi,9rem)/1 var(--cjk);color:var(--red);letter-spacing:.08em}
.sign h1{font:400 clamp(2.5rem,15.4cqi,13.5rem)/.92 var(--display);color:var(--red);letter-spacing:-.01em;margin-top:.08em;white-space:nowrap}
.sign .what{font:400 clamp(1.375rem,4.4cqi,2.75rem)/1.1 var(--display);margin-top:.55em;text-transform:uppercase}
.sign .where{margin-top:.6em;font-size:clamp(1.125rem,1rem + .6vw,1.5rem);font-weight:600}
.sign .when{margin-top:.25em;color:var(--ink)}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(22px,2.4vw,36px)}

.finder{background:var(--white);padding:clamp(12px,1.4vw,20px);max-width:560px;width:100%;justify-self:end}
.finder h2{font:400 var(--t-h3)/1.15 var(--display);text-transform:none;color:var(--ink);margin-bottom:12px}
.finder form{display:flex;gap:8px;margin-bottom:14px}
.finder input{flex:1;min-width:0;min-height:52px;padding:0 14px;border:2px solid var(--ink);border-radius:0;background:#fff;font-weight:600;font-size:1.125rem}
.finder input::placeholder{color:var(--soft);font-weight:400}
.finder .shot{position:relative;aspect-ratio:3/2;background:var(--pale)}
.finder .shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .35s ease}
.finder .shot img.out{opacity:0}
.finder .shot.none{aspect-ratio:auto;height:0}
.finder .dish{display:grid;grid-template-columns:auto 1fr auto;gap:4px 14px;align-items:baseline;padding-top:14px}
.finder .num{font:400 clamp(2rem,1.6rem + 1.6vw,3rem)/1 var(--display);color:var(--red)}
.finder .name{font-weight:700;font-size:clamp(1.125rem,1rem + .4vw,1.3125rem);line-height:1.25}
.finder .price{font:400 var(--t-h3)/1 var(--display);white-space:nowrap}
.finder .more{grid-column:1/-1;color:var(--soft);font-size:var(--t-small)}
.finder .miss{padding:10px 0 2px;font-weight:600;color:var(--red)}
@media (max-width:900px){
  .hero .wrap{grid-template-columns:1fr}
  .finder{justify-self:stretch;max-width:none}
  .cta .btn{flex:1 1 150px}
}

/* taste of the menu */
.sec{padding-block:var(--sec)}
.head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px var(--gap);margin-bottom:clamp(24px,3vw,48px)}
.head p{max-width:34ch;font-size:clamp(1.0625rem,1rem + .4vw,1.3125rem)}
.taste{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.taste figure{background:var(--white)}
.taste img{width:100%;aspect-ratio:3/2;object-fit:cover}
.taste figcaption{display:grid;grid-template-columns:auto 1fr auto;gap:0 12px;align-items:baseline;padding:12px 14px 16px}
.taste .num{font:400 var(--t-h3)/1 var(--display);color:var(--red)}
.taste .name{font-weight:600;line-height:1.25}
.taste .price{font-weight:700;white-space:nowrap}
@media (max-width:900px){.taste{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .taste figcaption{grid-template-columns:auto 1fr;padding:10px 10px 12px}.taste .name{grid-column:1/-1;order:3;margin-top:4px}.taste .price{justify-self:end}}

.cats{margin-top:var(--sec);display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,2fr);gap:var(--gap);align-items:start}
.cats ul{columns:3;column-gap:var(--gap)}
.cats li{break-inside:avoid}
.cats li a{display:flex;justify-content:space-between;gap:12px;align-items:center;min-height:48px;padding:6px 0;text-decoration:none;font-weight:600;font-size:clamp(1.0625rem,1rem + .35vw,1.25rem)}
.cats li a:hover{color:var(--red)}
.cats li a b{font:400 1em/1 var(--display);color:var(--red)}
.cats .btn{margin-top:22px}
@media (max-width:1100px){.cats ul{columns:2}}
@media (max-width:900px){.cats{grid-template-columns:1fr}}
@media (max-width:520px){.cats ul{columns:1}}

/* set dinners */
.sets{background:var(--red);color:#fff}
.sets h2{color:var(--yellow)}
.sets .head p{color:#fff}
.setgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(28px,3.4vw,56px) var(--gap)}
.set .letter{font:400 clamp(3rem,2rem + 3.4vw,5.5rem)/.9 var(--display);color:var(--yellow)}
.set h3{margin-top:10px;text-transform:uppercase;color:#fff}
.set .cost{font:400 var(--t-h3)/1 var(--display);color:var(--yellow);margin-top:6px}
.set ul{margin-top:14px}
.set li{padding:3px 0;line-height:1.35}
.set li small{font-size:.9em;opacity:.9}
.setnote{grid-column:span 1;align-self:end;background:var(--red-deep);padding:clamp(16px,1.8vw,26px)}
.setnote strong{display:block;font:400 var(--t-h3)/1.15 var(--display);color:var(--yellow);margin-bottom:8px;text-transform:uppercase}
@media (max-width:1200px){.setgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.setnote{grid-column:span 1}}
@media (max-width:620px){.setgrid{grid-template-columns:1fr}
  .set{display:grid;grid-template-columns:auto 1fr;gap:0 16px;align-items:start}.set .letter{grid-row:1/4;font-size:3.5rem;min-width:1.1ch}.set h3{margin-top:2px}.set ul{grid-column:2}}

/* hours + find us */
.visit .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,88px);align-items:start}
.hours{margin-top:clamp(18px,2vw,30px);width:100%;border-collapse:collapse;font-size:clamp(1.0625rem,1rem + .4vw,1.3125rem)}
.hours th{text-align:left;font-weight:700;padding:11px 12px 11px 0;vertical-align:top}
.hours td{padding:11px 0 11px 12px;white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums}
.hours tr:nth-child(odd){background:var(--white)}
.hours th{padding-left:12px}.hours td:last-child{padding-right:12px}
.notice{margin-top:clamp(22px,2.4vw,36px);background:var(--yellow);padding:clamp(16px,1.8vw,26px)}
.notice p{font:400 clamp(1.25rem,1.05rem + .9vw,1.875rem)/1.2 var(--display)}
.allergy{margin-top:16px}
.allergy strong{display:block}
.find address{font-style:normal;margin-top:clamp(18px,2vw,30px);font-size:clamp(1.25rem,1.1rem + .7vw,1.75rem);font-weight:600;line-height:1.3}
.find .cta{margin-top:20px}
.map{margin-top:clamp(20px,2.2vw,32px);aspect-ratio:16/10;width:100%;border:0;display:block;background:var(--white)}
@media (max-width:900px){.visit .wrap{grid-template-columns:1fr}.map{aspect-ratio:4/3}}

/* footer */
.foot{background:var(--red);color:#fff;padding-block:clamp(40px,5vw,80px) clamp(28px,3vw,44px)}
.foot .big{container-type:inline-size}
.foot .big p{font:400 clamp(2.5rem,11.6cqi,13rem)/.95 var(--display);color:var(--yellow);white-space:nowrap}
.foot .big span{font-family:var(--cjk);font-weight:900;margin-right:.12em}
.foot .cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);margin-top:clamp(24px,3vw,44px)}
.foot a{display:inline-flex;align-items:center;min-height:44px;font-weight:700;text-underline-offset:4px}
.foot .tel{font:400 var(--t-h3)/1 var(--display);color:var(--yellow);text-decoration:none}
@media (max-width:760px){.foot .cols{grid-template-columns:1fr;gap:14px}}

/* reveals: slide-up + fade only, with a settled fallback */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0)*70ms)}
.js .rv.in,.js.settled .rv{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}.finder .shot img{transition:none}}

/* phone fixes */
.brand,.btn,.nav a{white-space:nowrap}
@media (max-width:520px){
  .top .wrap{gap:8px}
  .brand{font-size:1.125rem;gap:.35em}
  .nav{gap:2px}
  .nav a.btn{padding:0 .7em}
  .cta .btn{flex:1 1 100%}
  .hours{font-size:1rem}
  .hours th{padding:10px 6px 10px 10px}
  .hours td{padding:10px 0 10px 6px}
  .hours td:last-child{padding-right:10px}
}

/* keep the finder the same height while it changes dish */
.finder .dish{min-height:5.4em;align-content:start}
@media (max-width:900px){.finder .dish{min-height:7.6em}}