:root{--cream:#FBF0DF;--paper:#FAEEDF;--green:#1B5233;--green2:#2F6B45;--gold:#D4B03F;--ink:#17402A;--line:#d9c9a6;--card:#FFF8EC;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--cream:#10261a;--paper:#12291c;--green:#E9D58A;--green2:#cdbb74;--gold:#D4B03F;--ink:#F3E8CF;--line:#2d4a38;--card:#17321F;color-scheme:dark}}
html{scroll-padding-top:70px;scroll-behavior:smooth}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--cream);color:var(--ink);font:400 16px/1.65 'Be Vietnam Pro',system-ui,sans-serif}
h1,h2,h3{font-family:'Fraunces',Georgia,serif;color:var(--green);margin:0;line-height:1.1}
a{color:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px}
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--cream);border-bottom:1px solid var(--line)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:var(--cream);z-index:10}
nav{display:flex;align-items:center;justify-content:space-between;height:60px}
.brand{font:700 22px 'Fraunces',serif;color:var(--green);text-decoration:none}
nav ul{display:flex;gap:26px;list-style:none;margin:0;padding:0;font-weight:500;font-size:15px}
nav ul a{text-decoration:none;padding:6px 0;border-bottom:2px solid transparent}
nav ul a:hover{border-color:var(--gold)}
.btn{display:inline-block;background:var(--green);color:var(--cream);padding:12px 24px;border-radius:999px;text-decoration:none;font-weight:600;font-size:15px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn{color:#10261a}}
.btn.ghost{background:none;color:var(--green);border:2px solid var(--green)}
@media(max-width:700px){nav ul{display:none}}
/* hero */
.hero{padding:56px 0 72px}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.hero h1{font-size:clamp(52px,9vw,104px);letter-spacing:-.02em}
.hero p.sub{font:500 clamp(18px,2.4vw,24px)/1.4 'Fraunces',serif;color:var(--green2);margin:14px 0 18px}
.hero p.lead{max-width:44ch;margin:0 0 28px;font-size:clamp(20px,2.8vw,26px);line-height:1.4;padding:12px 0 12px 18px;border-left:5px solid var(--gold)}
.hero p.lead strong{font-weight:700;color:var(--green)}
.hero p.lead a{color:var(--green);text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:3px;text-underline-offset:5px}
.hero .ctas{display:flex;gap:12px;flex-wrap:wrap}
.emblem{display:block;border-radius:50%;height:auto;width:100%;max-width:420px;justify-self:center;animation:rise .9s ease both}
@keyframes rise{from{opacity:0;transform:translateY(14px) rotate(-3deg)}to{opacity:1;transform:none}}
@media(max-width:800px){.hero .wrap{grid-template-columns:1fr}.emblem{max-width:280px;order:-1}}
/* bamboo divider */
.bamboo{height:14px;background:repeating-linear-gradient(90deg,var(--green) 0 120px,transparent 120px 126px);border-radius:7px;opacity:.9}
section{padding:76px 0}
.head{margin-bottom:30px}
.head h2{font-size:clamp(34px,5vw,52px)}
.head p{margin:10px 0 0;color:var(--green2);max-width:56ch}
/* signature */
.sig{background:var(--green);color:var(--cream)}
.sig h2,.sig h3{color:var(--gold)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .sig{background:#1B5233;color:#FBF0DF}}
.sig .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.sig h3{font-size:24px;margin-bottom:6px}
.sig .vi{font-size:14px;opacity:.8;margin-bottom:10px}
.sig p{margin:0;font-size:15px;opacity:.95}
.sig .price{display:block;margin-top:12px;font:700 20px 'Fraunces',serif;color:var(--gold)}
@media(max-width:800px){.sig .grid{grid-template-columns:1fr;gap:28px}}
/* menu */
.tabs{display:flex;gap:8px;overflow-x:auto;padding:4px 0 14px;margin-bottom:12px;scrollbar-width:thin}
.tabs button{flex:none;font:600 14px 'Be Vietnam Pro',sans-serif;color:var(--green);background:none;border:1.5px solid var(--green);border-radius:999px;padding:9px 18px;cursor:pointer}
.tabs button[aria-selected="true"]{background:var(--green);color:var(--cream)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tabs button[aria-selected="true"]{color:#10261a}}
.note{font-size:14px;color:var(--green2);margin:0 0 20px;font-style:italic}
.items{display:grid;grid-template-columns:1fr 1fr;gap:0 56px}
.item{display:grid;grid-template-columns:auto 1fr auto;gap:0 14px;padding:15px 0;border-bottom:1px dotted var(--line)}
.code{font:700 15px 'Fraunces',serif;color:var(--gold);min-width:34px;padding-top:1px}
.name{font-weight:600;line-height:1.35}
.vi{font-size:13.5px;color:var(--green2)}
.pr{font:700 16px 'Fraunces',serif;color:var(--green);white-space:nowrap;text-align:right}
.pr small{display:block;font:500 12px 'Be Vietnam Pro',sans-serif;color:var(--green2)}
.tag{display:inline-block;font-size:11px;font-weight:600;border-radius:99px;padding:1px 8px;margin-left:6px;vertical-align:1px}
.t-s{background:#B3371F;color:#fff}.t-p{background:var(--gold);color:#17402A}
.legend{margin-top:26px;font-size:14px;display:flex;gap:16px;flex-wrap:wrap;align-items:center}
@media(max-width:800px){.items{grid-template-columns:1fr}}
.story{max-width:760px}
.story h2{font-size:clamp(34px,5vw,52px);margin-bottom:22px}
.story p{font-size:18px;line-height:1.75;margin:0 0 18px}
.story p.big{font:500 clamp(22px,3vw,28px)/1.4 'Fraunces',serif;color:var(--green)}
.sig .story p{font-size:18px;opacity:1;color:#FBF0DF}
.sig .story p.big{font-size:clamp(22px,3vw,28px);color:#FBF0DF}
/* visit */
.visit{background:var(--paper);border-top:1px solid var(--line)}
.visit .grid{display:grid;grid-template-columns:minmax(0,520px);justify-content:center;gap:44px;align-items:center}
.card{background:var(--card);border:2px solid var(--green);outline:1px solid var(--gold);outline-offset:-8px;padding:38px 34px;text-align:center}
.card h3{font-size:38px}
.card .tg{color:var(--gold);font-weight:600;letter-spacing:.06em;margin:6px 0 18px}
.card address{font-style:normal;font-size:18px;margin-bottom:6px}
.card .tel{font:700 28px 'Fraunces',serif;color:var(--green);text-decoration:none;display:block;margin:12px 0 20px}
.visit ul{padding-left:20px;margin:14px 0 0}
@media(max-width:800px){.visit .grid{grid-template-columns:1fr}}
.allergy{font-size:clamp(20px,2.6vw,24px);line-height:1.45;max-width:36ch;margin:0;padding-left:18px;border-left:5px solid var(--gold)}
.allergy strong{font-weight:700;color:var(--green)}
#menu .allergy{margin:0 0 26px;max-width:62ch}
footer{padding:28px 0;text-align:center;font-size:14px;color:var(--green2)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}}