/* Minh Mat: built by Last Page Studio engine 2.0.0. Tokens and fonts from site/design.py. */
@font-face{font-family:"Josefin Sans";font-weight:300;font-style:normal;font-display:swap;src:url(../fonts/josefin-sans-latin-300-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Josefin Sans";font-weight:300;font-style:normal;font-display:swap;src:url(../fonts/josefin-sans-vietnamese-300-normal.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Josefin Sans";font-weight:600;font-style:normal;font-display:swap;src:url(../fonts/josefin-sans-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Josefin Sans";font-weight:600;font-style:normal;font-display:swap;src:url(../fonts/josefin-sans-vietnamese-600-normal.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Source Serif 4";font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/source-serif-4-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Source Serif 4";font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/source-serif-4-vietnamese-400-normal.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Source Serif 4";font-weight:400;font-style:italic;font-display:swap;src:url(../fonts/source-serif-4-latin-400-italic.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Source Serif 4";font-weight:400;font-style:italic;font-display:swap;src:url(../fonts/source-serif-4-vietnamese-400-italic.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
:root{--c-paper:#f3f0e5;--c-ink:#11160f;--c-soft:#3b4538;--c-rule:#c9c6b6;--c-rule-strong:rgba(17,22,15,.35);--c-dark:#11160f;--c-on-dark:#f3f0e5;--c-on-dark-soft:#b9c4b8;--c-rule-dark:#3a463b;--c-accent:#8db39c;--c-accent-ink:#2f5a45;--c-focus:#11160f;--c-focus-dark:#8db39c;--c-btn:#11160f;--c-btn-fg:#f3f0e5;--c-btn-hover:#2f5a45;--c-btn-line:#11160f;--c-btn-dark:#8db39c;--c-btn-dark-fg:#11160f;--c-btn-dark-hover:#f3f0e5;--f-display:"Josefin Sans","Century Gothic","Avenir Next",system-ui,sans-serif;--f-text:"Source Serif 4",Georgia,"Times New Roman",serif;--f-hero:var(--f-text);--t-body:400 18px/1.5 var(--f-text);--h-weight:300;--t-k:600 12px/1.3 var(--f-display);--k-track:.18em;--k-gap:14px;--t-tl:400 16px/1.5 var(--f-text);--t-btn:600 13px/1 var(--f-display);--btn-track:.16em;--btn-bw:1.5px;--btn-h:50px;--btn-px:24px;--btn-ws:nowrap;--gut:20px;--hero-shade:14,17,12;--hero-sub:#e4e0d2;--hero-week:#d8d4c6;--hero-y:44%;--table-glow:#273021;--table-mid:#161c13}
@media (min-width:700px){:root{--gut:40px}}
@media (min-width:1100px){:root{--gut:64px;--t-body:400 20px/1.5 var(--f-text);--t-k:600 13px/1.3 var(--f-display);--t-tl:400 18px/1.5 var(--f-text);--btn-flex:0 0 auto;--btn-min-w:176px}}
/* ---- engine base: the same on every site, every value that gives a site its look comes from the tokens ---- */
*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--c-paper);color:var(--c-ink);font:var(--t-body);-webkit-font-smoothing:antialiased;font-variant-numeric:var(--num,lining-nums)}
a{color:inherit;text-underline-offset:4px;text-decoration-thickness:var(--u-thick,auto)}
a:hover{color:var(--c-link-hover,inherit)}
img{display:block;max-width:100%;height:auto}
h1,h2,h3{font-weight:var(--h-weight,400);text-wrap:balance}
em{font-style:italic}
:focus-visible{outline:var(--focus-w,2px) solid var(--c-focus);outline-offset:3px}
.on-dark :focus-visible{outline-color:var(--c-focus-dark,var(--c-accent))}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip:focus{position:fixed!important;top:8px;left:8px;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal;background:var(--c-ink);color:var(--c-paper);padding:12px 16px;z-index:20}
.wrap{max-width:var(--max,1440px);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
.nb{white-space:nowrap}
.today[hidden]{display:none}

/* labels, text links, buttons */
.k{font:var(--t-k);letter-spacing:var(--k-track,.18em);text-transform:uppercase;color:var(--c-k,inherit);margin:0 0 var(--k-gap,12px)}
.k--mark{color:var(--c-mark)}
.tl{display:inline-flex;align-items:center;min-height:44px;font:var(--t-tl);letter-spacing:var(--tl-track,normal);text-transform:var(--tl-case,none);color:var(--c-tl,inherit);text-decoration:underline;text-underline-offset:var(--tl-offset,4px)}
.tl:hover{color:var(--c-tl-hover,inherit)}
.cta{display:flex;flex-wrap:wrap;gap:10px}
.btn{display:inline-flex;align-items:center;justify-content:center;text-align:center;flex:var(--btn-flex,1 1 auto);min-width:var(--btn-min-w,0);min-height:var(--btn-h,50px);padding:0 var(--btn-px,24px);
 font:var(--t-btn);letter-spacing:var(--btn-track,.14em);text-transform:uppercase;text-decoration:none;white-space:var(--btn-ws,normal);
 border:var(--btn-bw,1.5px) solid var(--c-btn);transition:background-color .2s,color .2s,border-color .2s}
.btn--fill{background:var(--c-btn);color:var(--c-btn-fg)}
.btn--fill:hover{background:var(--c-btn-hover);border-color:var(--c-btn-hover);color:var(--c-btn-fg)}
.btn--line{color:var(--c-btn-line,var(--c-btn))}
.btn--line:hover{background:var(--c-btn);color:var(--c-btn-fg)}
/* a dark section turns the buttons round */
.on-dark{--c-btn:var(--c-btn-dark);--c-btn-fg:var(--c-btn-dark-fg);--c-btn-hover:var(--c-btn-dark-hover);--c-btn-line:var(--c-on-dark)}

/* a typed white card with a thin rim line (a menu sheet, a sign, an hours card): rim colour from the tokens */
.card{background:var(--c-card,#fff);color:var(--c-ink);position:relative;box-shadow:0 30px 60px -28px rgba(0,0,0,.45),0 0 0 1px rgba(0,0,0,.06)}
.card::before{content:"";position:absolute;inset:8px;border:1.5px solid var(--c-mark);pointer-events:none}

/* phone folds: <details class="fold" data-open-from="960"> opens and stops folding from that width (core.js) */
.fold>summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:12px 16px;cursor:pointer;list-style:none;border:2px solid currentColor;font:var(--t-fold,inherit);letter-spacing:.08em;text-transform:uppercase}
.fold>summary::-webkit-details-marker{display:none}
.fold>summary::after{content:"+";flex:0 0 auto;font-size:1.6em;line-height:1;transition:transform .25s ease}
.fold[open]>summary::after{transform:rotate(45deg)}
.fs-t{flex:1 1 auto}
.fs-n{flex:0 0 auto;letter-spacing:.06em}
@supports selector(::details-content){
 :root{interpolate-size:allow-keywords}
 details.fold::details-content{block-size:0;overflow-y:clip;transition:block-size .3s ease,content-visibility .3s allow-discrete}
 details.fold[open]::details-content{block-size:auto}
}
html.fold-fixed details.fold>summary{display:none}

@keyframes lp-in{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* ---- pattern header.bar ---- */
.hdr{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 var(--gut);height:64px;max-width:1440px;margin:0 auto}
.brand{font:600 16px/1 var(--f-display);letter-spacing:.2em;text-transform:uppercase;text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.nav{display:flex;align-items:center}
.nav a{font:600 12px/1 var(--f-display);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;min-height:44px;display:inline-flex;align-items:center;padding:0 9px}
.nav a:hover{text-decoration:underline;text-underline-offset:6px}
.nav .hbook{display:none}
.hdr--over{position:absolute;top:0;left:0;right:0;z-index:5;color:var(--c-on-dark)}
.hdr--over :focus-visible{outline-color:var(--c-focus-dark,var(--c-accent))}
@media (min-width:1100px){
 .hdr{height:88px}
 .brand{font-size:18px}
 .nav a{font-size:13px;padding:0 14px}
 .nav .hbook{display:inline-flex;border:1.5px solid var(--c-ink);margin-left:10px;padding:0 20px;min-height:46px}
 .nav .hbook:hover{background:var(--c-ink);color:var(--c-paper);text-decoration:none}
 .hdr--over .hbook{border-color:var(--c-on-dark)}
 .hdr--over .hbook:hover{background:var(--c-on-dark);color:var(--c-ink)}
}
@media (min-width:900px) and (max-height:940px){.hdr--over{height:72px}}
@media (max-width:380px){.brand{font-size:14px;letter-spacing:.16em}.nav a{font-size:11px;padding:0 7px;letter-spacing:.12em}}
@media print{.hdr{display:none}}

/* ---- pattern footer.wordmark ---- */
.ftr{background:var(--c-dark);color:var(--c-on-dark);padding:40px var(--gut) 28px}
.ftr-in{max-width:1312px;margin:0 auto}
.ftr .wm{display:block;min-height:0;font:600 clamp(36px,12.4vw,60px)/1 var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:var(--c-accent);text-decoration:none;margin-bottom:22px;white-space:nowrap}
.ftr ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:0 18px}
.ftr a{display:inline-flex;align-items:center;min-height:44px;text-underline-offset:4px;font-size:16px}
.ftr .meta{font-size:16px;color:var(--c-on-dark-soft);margin-bottom:6px}
@media (min-width:1100px){
 .ftr{padding:56px var(--gut) 32px}
 .ftr-in{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;align-items:end}
 .ftr .wm{grid-column:1/8;font-size:clamp(64px,7.2vw,104px);margin:0}
 .ftr-r{grid-column:8/13;justify-self:end;text-align:right}
 .ftr ul{justify-content:flex-end}
 .ftr .meta,.ftr a{font-size:18px}
}
@media print{.ftr{display:none}}

/* ---- pattern hero.minhmat ---- */
/* three rows: their sentence / the photo / hours + button. The photo stops where the bottom row starts and starts under the
   headline, so no word and no button sits on the food at any size (L24). */
.hero--mm{position:relative;min-height:100vh;min-height:100svh;display:grid;grid-template-rows:auto minmax(220px,1fr) auto;color:var(--c-on-dark);background:rgb(var(--hero-shade));overflow:hidden}
.hero--mm .hero__ph{position:relative;grid-row:2;grid-column:1}
.hero--mm .hero__ph picture{position:absolute;inset:0}
.hero--mm .hero__ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.hero--mm .hero__ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgb(var(--hero-shade)) 0,rgba(var(--hero-shade),.5) 9%,rgba(var(--hero-shade),0) 20%,rgba(var(--hero-shade),0) 76%,rgb(var(--hero-shade)) 100%)}
.hero--mm .hero__top,.hero--mm .hero__bot{position:relative;z-index:2;grid-column:1;width:100%;max-width:1440px;margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
.hero--mm .hero__top{grid-row:1;padding-top:84px;padding-bottom:20px}
.hero--mm h1{font:400 clamp(36px,10vw,44px)/.96 var(--f-hero,var(--f-display));letter-spacing:-.025em;text-wrap:balance;max-width:14em}
.hero--mm h1 em{font-style:italic}
.hero--mm .hero__bot{grid-row:3;padding-top:16px;padding-bottom:24px;display:grid;gap:6px}
.hero--mm .hero__hrs{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:12px}
.hero--mm .today,.hero--mm .week{font:400 16px/1.5 var(--f-text);color:var(--hero-week,var(--c-on-dark))}
.hero--mm .today{font-weight:400}
.hero--mm .today:not([hidden])~.week{display:none}
.hero--mm .today::after,.hero--mm .week::after{content:"\00b7";margin-left:12px;color:var(--c-accent)}
.hero--mm .hero__hrs .tl{min-height:36px;font-size:16px;color:var(--hero-sub,var(--c-on-dark))}
.hero--mm .cta{flex-wrap:nowrap;align-items:center;gap:20px}
.hero--mm .cta .btn{flex:0 1 auto;min-width:164px}
.hero--mm .cta .tl{white-space:nowrap}
@media (prefers-reduced-motion:no-preference){
 .hero--mm h1{animation:mm-rise 1.1s var(--ease-out,cubic-bezier(.22,1,.36,1)) both}
}
@keyframes mm-rise{from{opacity:0;transform:translate3d(0,14px,0)}}
@media (min-width:700px){
 .hero--mm{min-height:min(100svh,1200px)}
 .hero--mm .hero__top{padding-top:104px;padding-bottom:28px}
 .hero--mm h1{font-size:clamp(52px,6.6vw,68px);max-width:15em}
 .hero--mm .hero__bot{grid-template-columns:1fr auto;align-items:center;padding-top:20px;padding-bottom:32px;column-gap:32px}
 .hero--mm .hero__hrs .tl{min-height:44px}
}
@media (min-width:1100px){
 .hero--mm .hero__top{padding-top:124px;padding-bottom:36px}
 .hero--mm h1{font-size:clamp(68px,5.8vw,96px)}
 .hero--mm .hero__ph img{object-position:50% var(--hero-y,44%)}
 .hero--mm .today,.hero--mm .week,.hero--mm .hero__hrs .tl{font-size:18px}
 .hero--mm .hero__bot{padding-bottom:40px}
}
/* a short screen (1280 x 720, a phone on its side): a slimmer headline band so the photo keeps its height */
@media (min-width:700px) and (max-height:800px){
 .hero--mm .hero__top{padding-top:80px;padding-bottom:16px}
 .hero--mm h1{font-size:clamp(44px,4.6vw,60px)}
 .hero--mm .hero__bot{padding-top:12px;padding-bottom:20px}
}
@media (max-width:480px) and (max-height:780px){
 .hero--mm .hero__top{padding-top:68px;padding-bottom:12px}
 .hero--mm h1{font-size:clamp(32px,8.6vw,36px)}
 .hero--mm .hero__bot{padding-top:10px;padding-bottom:14px}
 .hero--mm .hero__hrs .tl{display:none}
 .hero--mm .today::after,.hero--mm .week::after{display:none}
}
@media (max-width:380px){.hero--mm .cta{gap:12px}.hero--mm .cta .btn{min-width:140px;padding:0 12px;letter-spacing:.1em}}

/* ---- pattern story.minhmat ---- */
.story{background:var(--c-dark);color:var(--c-on-dark)}
.story .band{background:var(--c-dark);overflow:hidden}
.story .band img{width:100%;height:auto}
.story .st-in{padding:72px var(--gut) 88px;max-width:1440px;margin:0 auto}
.story h2{font:300 clamp(40px,11vw,48px)/1 var(--f-display);letter-spacing:-.025em;margin-bottom:32px;text-wrap:balance}
.story .st-lede{font:400 24px/1.3 var(--f-text);letter-spacing:-.01em;color:var(--c-on-dark);margin-bottom:28px;max-width:20em;text-wrap:balance}
.story .st-tx p{margin-bottom:18px;max-width:34em}
.story .st-tx .st-lede{margin-bottom:28px}
.story .mich{margin-top:32px;padding-top:24px;border-top:1px solid var(--c-rule-dark);max-width:34em}
.story .mich p{margin:0 0 2px;font-size:17px}
.story .mich .tl{color:var(--c-accent)}
@media (min-width:1100px){
 .story .band img{max-width:1920px;margin:0 auto}
 .story .st-in{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;padding:176px var(--gut) 184px;align-items:start}
 .story h2{grid-column:1/6;font-size:64px;margin:0;position:sticky;top:48px}
 .story .st-tx{grid-column:7/13}
 .story .st-lede{font-size:28px}
 .story .mich p{font-size:18px}
}
/* wider than the photo (1920 px): it stays at its size and its edges melt into the dark */
@media (min-width:1921px){.story .band img{-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}}

/* ---- pattern menu.minhmat ---- */
/* overflow:clip, not hidden: a scroll container here would stop the scroll timeline */
.table{background:radial-gradient(120% 70% at 50% 46%,var(--table-glow) 0,var(--table-mid) 58%,var(--c-dark) 100%);color:var(--c-on-dark);padding:72px var(--gut) 40px;overflow:clip}
.tb-in{max-width:1440px;margin:0 auto}
.table h2{font:300 clamp(40px,11vw,48px)/1 var(--f-display);letter-spacing:-.025em;margin-bottom:16px;text-wrap:balance}
.table .lede{max-width:34ch;color:var(--hero-week,var(--c-on-dark))}
.stage{position:relative;aspect-ratio:1/1.02;margin:32px calc(var(--gut) * -1) 16px}
.td{position:absolute;margin:0;z-index:var(--z,1)}
.td img{display:block;width:100%;height:auto;transition:transform var(--d-base,.55s) var(--ease-out,cubic-bezier(.22,1,.36,1)),filter var(--d-base,.55s) var(--ease-out,cubic-bezier(.22,1,.36,1));filter:drop-shadow(0 18px 18px rgba(0,0,0,.55))}
.td:hover img{transform:translateY(-8px);filter:drop-shadow(0 30px 26px rgba(0,0,0,.6))}
@media (prefers-reduced-motion:no-preference){
 @supports (animation-timeline:view()){
  .td{animation:lp-set-down linear both;animation-timeline:view();animation-range:entry calc(var(--i) * 8%) cover calc(22% + var(--i) * 5%)}
 }
}
/* no fade from nothing: a page captured without scrolling still shows every dish, just not yet set down */
@keyframes lp-set-down{
 0%{opacity:.35;transform:translateY(90px) rotate(-7deg) scale(.92)}
 45%{opacity:1}
 78%{transform:translateY(-10px) rotate(1.2deg) scale(1.01)}
 100%{opacity:1;transform:none}
}
/* the ledger: one row per size, different heights, nothing boxed */
.idx{list-style:none;padding:0;margin-top:24px;border-top:1px solid var(--c-rule-dark)}
.idx li{border-bottom:1px solid var(--c-rule-dark)}
.idx a{display:grid;grid-template-columns:64px 1fr;column-gap:16px;align-items:baseline;padding:24px 0 26px;text-decoration:none}
.idx .c{grid-row:1/4;font:300 56px/.9 var(--f-display);color:var(--c-accent);font-variant-numeric:lining-nums}
.idx .n{font:300 28px/1.1 var(--f-display);letter-spacing:-.01em;transition:color var(--d-base,.55s) var(--ease-out,cubic-bezier(.22,1,.36,1))}
.idx .d{font-size:17px;margin-top:6px}
.idx .nm{font-size:17px;color:var(--c-on-dark-soft);line-height:1.45;margin-top:6px}
.idx a:hover .n{color:var(--c-accent)}
@media (min-width:700px){.stage{aspect-ratio:1000/560;margin-left:0;margin-right:0}}
@media (min-width:1100px){
 .table{padding:160px var(--gut) 96px}
 .tb-hd{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;align-items:end}
 .table h2{grid-column:1/7;font-size:64px;margin:0}
 .table .lede{grid-column:8/13;margin:0;max-width:none;font-size:20px}
 .stage{margin:56px 0 40px}
 .idx{margin-top:32px}
 .idx a{grid-template-columns:132px minmax(0,4fr) minmax(0,6fr);column-gap:32px;align-items:start;padding:36px 0 40px}
 .idx .c{grid-row:1/3;font-size:96px}
 .idx .n{grid-column:2;font-size:40px;line-height:1}
 .idx .d{grid-column:2;grid-row:2;font-size:18px;margin-top:14px;max-width:22em}
 .idx .nm{grid-column:3;grid-row:1/3;font-size:18px;line-height:1.55;margin-top:8px}
}

/* ---- pattern visit.minhmat ---- */
/* the home visit block and the typeset hours that the visit page reuses */
.vm{background:var(--c-paper);padding:72px var(--gut) 72px}
.vm-in{max-width:1440px;margin:0 auto}
.vm h2{font:300 clamp(48px,13vw,56px)/.96 var(--f-display);letter-spacing:-.025em;margin-bottom:28px}
.vm-addr{font:400 20px/1.4 var(--f-text);font-style:normal;margin-bottom:36px}
.vm-addr b{display:block;font:600 12px/1.3 var(--f-display);letter-spacing:.18em;text-transform:uppercase;color:var(--c-accent-ink);margin-bottom:6px}
.vm-hrs{list-style:none;padding:0;margin:0 0 32px;border-top:2px solid var(--c-ink)}
.vm-hrs li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:16px 0;border-bottom:1px solid var(--c-rule-strong,var(--c-rule))}
.vm-hrs b{font:600 12px/1.4 var(--f-display);letter-spacing:.18em;text-transform:uppercase}
.vm-hrs span{font:300 28px/1.1 var(--f-display);font-variant-numeric:lining-nums tabular-nums;text-align:right}
.vm-cta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;margin-bottom:18px}
.vm-cta .btn{flex:0 1 auto;min-width:176px}
.vm-note{font-size:17px;margin:0}
.vm-note .tl{display:inline-flex;margin-left:4px}
@media (min-width:1100px){
 .vm{padding:176px var(--gut) 168px}
 .vm-in{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;align-items:start}
 .vm-hd{grid-column:1/6}
 .vm-tx{grid-column:7/13}
 .vm h2{font-size:96px;margin-bottom:48px}
 .vm-addr{font-size:28px;line-height:1.3}
 .vm-hrs li{padding:22px 0}
 .vm-hrs span{font-size:40px}
 .vm-note{font-size:18px}
}

/* ---- pattern menupage.minhmat ---- */
.mhead{padding:32px var(--gut) 24px;max-width:1440px;margin:0 auto}
.mhead h1{font:300 clamp(48px,13.4vw,56px)/.94 var(--f-display);letter-spacing:-.025em;margin-bottom:28px;text-wrap:balance}
.mhead .lede{max-width:34em;margin-bottom:28px}
/* the index: ruled rows, number / name / count, nothing boxed */
.mp-idx{list-style:none;padding:0;border-top:2px solid var(--c-ink)}
.mp-idx li{border-bottom:1px solid var(--c-rule-strong,var(--c-rule))}
.mp-idx a{display:grid;grid-template-columns:44px 1fr auto;align-items:baseline;column-gap:12px;min-height:56px;padding:12px 0;text-decoration:none}
.mp-idx .no{font:600 12px/1 var(--f-display);letter-spacing:.18em;color:var(--c-accent-ink)}
.mp-idx .nm{font:300 28px/1.1 var(--f-display);letter-spacing:-.01em;transition:transform var(--d-base,.55s) var(--ease-out,cubic-bezier(.22,1,.36,1))}
.mp-idx .ct{font:300 28px/1.1 var(--f-display);font-variant-numeric:lining-nums tabular-nums}
.mp-idx a:hover .nm{transform:translateX(8px)}
.msec{padding:64px var(--gut) 8px;max-width:1440px;margin:0 auto;scroll-margin-top:8px}
.msec-hd .no{font:600 12px/1 var(--f-display);letter-spacing:.18em;color:var(--c-accent-ink);margin-bottom:14px}
.msec-hd h2{font:300 clamp(40px,11vw,48px)/1 var(--f-display);letter-spacing:-.025em;margin-bottom:12px}
.msec-hd .how{font-size:17px;margin-bottom:28px;color:var(--c-soft);max-width:22em}
.dishes{border-top:2px solid var(--c-ink);padding-top:12px}
.dish{display:grid;grid-template-columns:1fr auto;column-gap:16px;padding:20px 0}
.dn{grid-column:1;font:600 22px/1.2 var(--f-display)}
.gl{grid-column:1;font:italic 400 17px/1.4 var(--f-text);margin-top:3px}
.dd{grid-column:1/3;font-size:17px;line-height:1.5;color:var(--c-soft);margin-top:6px;max-width:60ch}
.price{grid-column:2;grid-row:1;align-self:start;font:300 22px/1.2 var(--f-display);font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}
.mfoot{background:var(--c-dark);color:var(--c-on-dark);margin-top:72px;padding:56px var(--gut) 64px}
.mf-in{max-width:1440px;margin:0 auto}
.mfoot p{margin-bottom:14px;max-width:36em}
.mfoot .small{font-size:17px;color:var(--c-on-dark-soft)}
.mfoot .links{display:flex;flex-wrap:wrap;gap:0 28px;margin:8px 0 22px}
.mfoot .links .tl{color:var(--c-accent)}
.mfoot .cta{align-items:center;gap:8px 28px}
.mfoot .cta .btn{flex:0 1 auto;min-width:176px}
@media (min-width:1100px){
 .mhead{padding:72px var(--gut) 40px;display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;align-items:end}
 .mhead h1{grid-column:1/8;font-size:clamp(96px,9vw,144px);margin:0}
 .mh-r{grid-column:8/13}
 .mhead .lede{font-size:20px;margin-bottom:32px}
 .mp-idx a{grid-template-columns:56px 1fr auto;min-height:64px}
 .mp-idx .no{font-size:13px}
 .msec{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;padding:136px var(--gut) 8px;align-items:start}
 .msec-hd{grid-column:1/5;position:sticky;top:40px}
 .msec-hd h2{font-size:64px}
 .msec-hd .how{font-size:20px;max-width:15em}
 .dishes{grid-column:5/13}
 .dish{padding:28px 0;column-gap:32px}
 .dn{font-size:28px}
 .gl{font-size:20px;margin-top:4px}
 .dd{font-size:18px;line-height:1.55;margin-top:8px}
 .price{font-size:28px}
 .mfoot{margin-top:136px;padding:96px var(--gut) 104px}
 .mf-in{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px}
 .mf-l{grid-column:1/7}
 .mf-r{grid-column:8/13}
 .mfoot p{font-size:20px}
 .mfoot .small{font-size:18px}
}
@media print{.mp-idx{display:none}}

/* ---- pattern visitpage.minhmat ---- */
/* dark first band: a strip of their room under the header, the heading and the address set big */
.vp{position:relative;background:rgb(var(--hero-shade));color:var(--c-on-dark);overflow:hidden}
.vp-ph{position:relative;height:clamp(200px,34vw,340px)}
.vp-ph picture{position:absolute;inset:0}
.vp-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.vp-ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(var(--hero-shade),.8) 0,rgba(var(--hero-shade),.2) 38%,rgba(var(--hero-shade),.55) 74%,rgb(var(--hero-shade)) 100%)}
.vp-in{max-width:1440px;margin:0 auto;padding:12px var(--gut) 64px}
.vp h1{font:300 clamp(56px,16vw,72px)/.94 var(--f-display);letter-spacing:-.025em;margin-bottom:28px}
.vp .vm-addr{font-size:24px;color:var(--c-on-dark);margin-bottom:12px}
.vp-contact{display:flex;flex-wrap:wrap;gap:0 24px;margin:0 0 20px}
.vp .vm-cta{margin-bottom:0}
.vp .vm-cta .tl{color:var(--c-on-dark)}
/* light body: hours as typeset rows, the rules in their own voice */
.vpb{background:var(--c-paper);padding:64px var(--gut) 80px}
.vpb-in{max-width:1440px;margin:0 auto}
.vpb h2{font:300 clamp(32px,9vw,40px)/1.05 var(--f-display);letter-spacing:-.02em;margin:48px 0 20px;text-wrap:balance}
.vpb-l .vm-hrs{margin-bottom:20px}
.rules{margin:0 0 28px;border-top:2px solid var(--c-ink)}
.rules div{padding:20px 0;border-bottom:1px solid var(--c-rule-strong,var(--c-rule))}
.rules dt{font:300 28px/1.1 var(--f-display);margin-bottom:8px}
.rules dd{margin:0;font-size:18px;max-width:38em}
.more-links{list-style:none;padding:0;margin:8px 0 0}
.vpb .vm-note{margin-bottom:6px}
@media (min-width:1100px){
 .vp-ph{height:clamp(200px,13.6vw,348px)}
 .vp-in{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;align-items:end;padding:24px var(--gut) 112px}
 .vp h1{grid-column:1/7;font-size:clamp(96px,9vw,144px);margin:0}
 .vp-r{grid-column:8/13}
 .vp .vm-addr{font-size:32px;margin-bottom:20px}
 .vpb{padding:144px var(--gut) 160px}
 .vpb-in{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;align-items:start}
 .vpb-l{grid-column:1/5;position:sticky;top:48px}
 .vpb-r{grid-column:6/13}
 .vpb h2{font-size:40px;margin:0 0 28px}
 .rules div{display:grid;grid-template-columns:repeat(7,1fr);column-gap:24px;padding:28px 0;align-items:baseline}
 .rules dt{grid-column:1/3;margin:0;font-size:28px}
 .rules dd{grid-column:3/8;font-size:20px}
 .vpb .vm-note{font-size:18px}
 .vm-hrs span{font-size:34px}
}

/* ---- pattern notfound.figure ---- */
.nf{padding:72px var(--gut) 96px;max-width:1440px;margin:0 auto}
.nf h1{font:300 clamp(40px,11vw,64px)/1.05 var(--f-display);margin-bottom:20px}
.nf p{margin-bottom:12px}
.nf-dish{margin:32px 0 0;max-width:420px}
.nf-dish img{filter:drop-shadow(0 18px 18px rgba(0,0,0,.35))}
@media (min-width:1100px){
 .nf{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;align-items:center;padding:64px var(--gut) 96px;min-height:70vh}
 .nf-t{grid-column:1/7}
 .nf-dish{grid-column:8/13;width:min(100%,520px);margin:0 0 0 auto}
 .nf p{font-size:20px}
}

/* ---- motion: calm ---- */
:root{--lp-reveal-dur-block:1s;--lp-reveal-dur-image:1.1s;--rv-dist:14px;--rv-stagger:.09s;--rv-ease:cubic-bezier(.22,.61,.36,1)}
/* ---- engine motion kit (Rasmus 3 Nov: the restaurangag.se feeling, blocks arrive as you scroll) ----
   .rv       a block fades up into place when it scrolls into view; style="--rv-i:n" staggers it inside its group
   .rv-img   a picture fades in and settles from a slight zoom
   .px       a photo band that moves slower than the page (parallax; CSS scroll-driven, no script)
   Hidden only when the script runs (html.js, set in <head>, taken back after 2.5 s if site.js never loads) and only when
   the visitor has not asked for less motion. Never put .rv on an element that has its own transform: wrap it. */
@media (prefers-reduced-motion:no-preference){
 html.js .rv{opacity:0;transform:translate3d(0,var(--rv-dist,14px),0);
  transition:opacity var(--lp-reveal-dur-block) var(--rv-ease),transform var(--lp-reveal-dur-block) var(--rv-ease);
  transition-delay:calc(var(--rv-i,0) * var(--rv-stagger,.08s))}
 html.js .rv.in{opacity:1;transform:none}
 html.js .rv-img img{opacity:0;transform:scale(1.04);
  transition:opacity var(--lp-reveal-dur-image) var(--rv-ease),transform calc(var(--lp-reveal-dur-image) * 1.6) var(--rv-ease)}
 html.js .rv-img.in img{opacity:1;transform:none}
 @supports (animation-timeline:view()){
  .px{overflow:clip}
  .px img{animation:lp-px linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
 }
}
@keyframes lp-px{from{transform:translate3d(0,calc(var(--px,5%) * -1),0) scale(var(--px-scale,1.12))}to{transform:translate3d(0,var(--px,5%),0) scale(var(--px-scale,1.12))}}
@media print{html.js .rv,html.js .rv-img img{opacity:1!important;transform:none!important}}

/* ---- engine feel kit (5 Nov 2026, from runs/2026-11-05-quality-bar.md: the "smoother" layer) ----
   On when site/design.py says FEEL = True (default from the engine version that turns it on for all).
   - expo easing tokens for every state change (no plain "ease", no .2 s colour flips)
   - page transitions between our own pages (cross-document View Transitions; browsers without them just navigate)
   - text links draw their underline away and back; buttons fill on the same slow curve
   - the glide on wheel scroll lives in feel.js; this file only hands scroll-behavior over to it
   Patterns may read html.lp-scrolled (page moved past 80 px) and html.lp-down (scrolling down) for a header that behaves. */
:root{--ease-out:cubic-bezier(.22,1,.36,1);--ease-io:cubic-bezier(.625,.05,0,1);--d-fast:.25s;--d-base:.55s;--d-slow:1.1s;
 --rv-ease:var(--ease-out)}
html.lp-smooth{scroll-behavior:auto}
@media (prefers-reduced-motion:no-preference){
 @view-transition{navigation:auto}
 ::view-transition-old(root){animation:lp-vt-out .32s var(--ease-io) both}
 ::view-transition-new(root){animation:lp-vt-in .6s var(--ease-out) both}
 .btn{transition:background-color var(--d-base) var(--ease-out),color var(--d-base) var(--ease-out),border-color var(--d-base) var(--ease-out)}
 .tl{text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 calc(100% - 10px)/100% 1px no-repeat;
  transition:background-size var(--d-base) var(--ease-io),color var(--d-base) var(--ease-out)}
 .tl:hover{background-size:0 1px;background-position:100% calc(100% - 10px)}
 .fold>summary::after{transition:transform var(--d-base) var(--ease-out)}
}
@keyframes lp-vt-out{to{opacity:0;transform:translate3d(0,-10px,0)}}
@keyframes lp-vt-in{from{opacity:0;transform:translate3d(0,18px,0)}}

/* ---- this site only (site/extra.css) ---- */
/* Minh Mat only: geometry that belongs to these photos */
body.home{background:var(--c-dark)}
/* where each cut-out dish stands on the table (menu.minhmat): % of the stage, one composition per breakpoint.
   The stage's aspect ratio is set in the pattern (phone 1 : 1.02, from 700 px 1000 : 560) */
.td--pot{width:50%;left:0;top:3%;--z:2}
.td--noodle{width:52%;left:48%;top:0;--z:1}
.td--bowl{width:76%;left:12%;top:45%;--z:3}
.td--leaf{width:30%;left:70%;top:55%;--z:2}
@media (min-width:700px){
 .td--pot{width:33%;left:0;top:12%}
 .td--noodle{width:36%;left:58%;top:0}
 .td--bowl{width:46%;left:27%;top:41%}
 .td--leaf{width:19%;left:81%;top:51%}
}
@media print{body,.mpage{background:#fff}}