:root { --ink:#233232; --leaf:#4a7a70; --mint:#b9ddd4; --rice:#f7f4ec; --paper:#fffdf8; --coral:#ef785f; --sun:#f4c76a; --muted:#687572; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--rice); color:var(--ink); font-family:"Noto Sans SC","Microsoft YaHei",sans-serif; }
a { color:inherit; text-decoration:none; }
main { overflow:hidden; }
.hero { position:relative; min-height:680px; padding:27px max(7vw,28px) 68px; background:linear-gradient(125deg,#e5f0e8 0%,#f7f4ec 52%,#f2d2a2 100%); isolation:isolate; }
.hero::after { position:absolute; z-index:-1; right:-7vw; bottom:-14vw; width:46vw; height:46vw; border:1px solid rgba(74,122,112,.18); border-radius:50%; content:""; }
.nav { display:flex; align-items:center; justify-content:space-between; max-width:1180px; margin:auto; }
.brand { display:flex; align-items:center; gap:9px; font-family:Georgia,"STSong",serif; font-size:26px; font-weight:800; letter-spacing:-1px; }
.brand span { display:grid; width:42px; height:42px; place-items:center; border-radius:14px 14px 14px 4px; background:var(--coral); color:#fff; font-size:26px; transform:rotate(-4deg); }
.nav-link { padding:10px 0; border-bottom:1px solid var(--ink); font-size:14px; font-weight:700; }
.hero-copy { max-width:590px; margin:118px auto 0; transform:translateX(-23vw); }
.eyebrow,.section-title>p { margin:0 0 13px; color:var(--leaf); font-size:11px; font-weight:800; letter-spacing:2.3px; }
h1,h2,h3 { font-family:Georgia,"STSong","Songti SC",serif; }
h1 { margin:0; font-size:clamp(51px,7vw,86px); line-height:.98; letter-spacing:-4px; }
h1 em { color:var(--coral); font-style:normal; }
.intro { max-width:430px; margin:27px 0 0; color:#4f5c58; font-size:15px; line-height:1.9; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:29px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:15px; min-height:50px; padding:0 20px; border-radius:999px; font-size:14px; font-weight:800; transition:transform .2s ease,box-shadow .2s ease; }
.button:hover { transform:translateY(-2px); }
.primary { background:var(--ink); box-shadow:0 9px 20px rgba(35,50,50,.16); color:#fff; }
.primary span { font-size:20px; line-height:1; }
.quiet { border:1px solid rgba(35,50,50,.35); }
.dish-art { position:absolute; top:145px; left:calc(50% + 125px); width:300px; height:315px; text-align:center; }
.dish-art p { position:absolute; right:-2px; bottom:4px; color:var(--leaf); font-size:13px; line-height:1.45; text-align:left; }.dish-art p strong { color:var(--ink); font-size:20px; font-family:Georgia,"STSong",serif; }
.pot { position:absolute; bottom:50px; left:32px; width:220px; height:120px; border-radius:25% 25% 40% 40%; background:linear-gradient(145deg,#334845,#182827); box-shadow:inset 0 -17px 0 rgba(0,0,0,.19),0 24px 27px rgba(63,49,30,.18); }
.pot::before { position:absolute; top:-21px; left:22px; width:176px; height:66px; border:9px solid #334845; border-radius:50%; background:#e47a50; content:""; }.broth { position:absolute; top:-9px; left:40px; width:140px; height:42px; overflow:hidden; border-radius:50%; background:#c15b3c; }.broth i { position:absolute; display:block; width:26px; height:21px; border-radius:47% 53% 39% 61%; background:#f2c55d; }.broth i:nth-child(1){top:10px;left:18px}.broth i:nth-child(2){top:5px;left:68px;background:#e6edd7}.broth i:nth-child(3){top:18px;left:104px;background:#8abf75}.broth i:nth-child(4){top:25px;left:50px;background:#f6dfc3}.handle { position:absolute; top:35px; width:43px; height:29px; border:9px solid #263b39; border-radius:13px; }.handle.left{left:-38px}.handle.right{right:-38px}.steam { position:absolute; top:9px; width:18px; height:81px; border-left:5px solid rgba(255,255,255,.62); border-radius:50%; filter:blur(1px); }.steam.one{left:94px;transform:rotate(9deg)}.steam.two{left:149px;top:-12px;transform:rotate(-7deg)}.steam.three{left:201px;top:11px;transform:rotate(10deg)}
.promise { display:grid; grid-template-columns:repeat(3,1fr); max-width:1100px; margin:-31px auto 0; position:relative; border:1px solid rgba(35,50,50,.12); border-radius:18px; background:var(--paper); box-shadow:0 10px 30px rgba(35,50,50,.07); }.promise p { display:flex; flex-direction:column; gap:7px; margin:0; padding:24px 30px; border-right:1px solid rgba(35,50,50,.1); }.promise p:last-child{border:0}.promise b{font-size:15px}.promise span{color:var(--muted);font-size:12px}
.menu { max-width:1100px; padding:104px 0 89px; margin:auto; }.section-title { max-width:580px; }.section-title h2,.steps h2,.cta h2 { margin:0; font-size:clamp(32px,4vw,49px); letter-spacing:-2px; }.menu-grid { display:grid; grid-template-columns:1.25fr 1fr 1fr; gap:16px; margin-top:36px; }.menu-card { min-height:300px; padding:25px; border-radius:22px; background:var(--paper); box-shadow:0 9px 23px rgba(35,50,50,.06); }.menu-card.hotpot { background:#24433f; color:#fff; }.card-emoji { display:grid; width:62px; height:62px; place-items:center; border-radius:19px; background:rgba(255,255,255,.17); font-size:35px; }.menu-card:not(.hotpot) .card-emoji{background:#f4e8cd}.tag { margin:33px 0 8px; color:#d1e4dc; font-size:11px; font-weight:800; }.menu-card:not(.hotpot) .tag{color:#c67159}.menu-card h3 { margin:0; font-size:27px; }.menu-card>p:not(.tag) { min-height:62px; color:inherit; font-size:13px; line-height:1.75; opacity:.75; }.menu-card strong { display:block; margin-top:20px; color:var(--sun); font-family:Georgia,"STSong",serif; font-size:28px; }.menu-card:not(.hotpot) strong{color:var(--coral)}.menu-card small{font-family:"Microsoft YaHei",sans-serif;font-size:12px}
.steps { display:flex; gap:80px; align-items:flex-start; padding:86px max(7vw,28px); background:#d8e8df; }.steps>div { min-width:270px; }.steps ol { display:grid; flex:1; grid-template-columns:repeat(3,1fr); gap:25px; margin:0; padding:0; list-style:none; }.steps li span { color:var(--coral); font-family:Georgia,serif; font-size:19px; }.steps li b,.steps li p{display:block}.steps li b{margin-top:11px;font-size:16px}.steps li p{color:#536560;font-size:13px;line-height:1.65}
.cta { padding:98px 28px; background:#f1b27a; text-align:center; }.cta p { margin:0 0 13px; color:#77503d; font-size:13px; }.cta .button { margin-top:27px; }.cta h2 { font-size:clamp(35px,5vw,58px); }.cta .primary { background:#fffdf8; color:var(--ink); }.cta .primary span { color:var(--coral); }
footer { padding:20px; background:var(--ink); color:#c5d4ce; font-size:12px; text-align:center; } footer a { text-decoration:underline; text-underline-offset:3px; } footer span { margin:0 4px; opacity:.55; }
@media (max-width:850px) { .hero{min-height:710px}.hero-copy{margin-top:76px;transform:none}.dish-art{top:auto;bottom:-17px;left:auto;right:22px;transform:scale(.72);transform-origin:bottom right}.promise{margin:-18px 18px 0}.menu{padding:75px 20px}.menu-grid{grid-template-columns:1fr}.menu-card{min-height:230px}.steps{display:block}.steps ol{margin-top:36px}.cta{padding:78px 22px} }
@media (max-width:530px) { .hero{padding:21px 22px 190px;min-height:650px}.brand{font-size:23px}.brand span{width:37px;height:37px;font-size:23px}.nav-link{font-size:12px}.hero-copy{margin-top:70px}.intro{font-size:14px}.dish-art{right:0;bottom:-4px;transform:scale(.61)}.promise{grid-template-columns:1fr;margin:-18px 13px 0}.promise p{padding:18px 19px;border-right:0;border-bottom:1px solid rgba(35,50,50,.1)}.steps{padding:65px 22px}.steps ol{grid-template-columns:1fr;gap:12px}.steps li{padding-bottom:13px;border-bottom:1px solid rgba(35,50,50,.15)}.steps li p{margin:6px 0 0}.menu-card>p:not(.tag){min-height:0}.button{min-height:47px;padding:0 17px} }
@media (prefers-reduced-motion:reduce) { html{scroll-behavior:auto}.button{transition:none} }