@font-face{font-family:'Zhi Mang Xing';src:url('./assets/title.woff2') format('woff2');font-display:swap}
:root{
  --bg:#f6f0e5;--paper:#fffcf6;--ink:#392f28;--ink2:#615347;--muted:#7a6d5e;--line:#e2d5c2;
  --green:#557b65;--green2:#436a55;--pink:#c59282;--brass:#b98d5a;
  --f-script:'Zhi Mang Xing',cursive;
  --f-serif:'Songti SC','SimSun',Georgia,serif;
  --f-sans:'PingFang SC','Microsoft YaHei','Hiragino Sans GB',system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:var(--f-sans);-webkit-font-smoothing:antialiased;
  background-image:radial-gradient(rgba(180,150,110,.05) 1px,transparent 1px);background-size:22px 22px}
button{font-family:inherit;color:inherit;border:0;background:none;cursor:pointer;padding:0}
a{color:var(--green2)}
.cap{font-family:Georgia,serif;font-size:11px;letter-spacing:.24em;color:var(--muted);text-transform:uppercase}

/* ---------- 顶栏 ---------- */
.top{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:14px clamp(16px,4vw,44px);background:linear-gradient(180deg,rgba(246,240,229,.99),rgba(246,240,229,.94));
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:12px}
.brand .logo{width:30px;height:36px}
.brand .t{display:block;font-family:var(--f-script);font-size:27px;line-height:1;letter-spacing:.04em}
.brand .s{display:block;margin-top:5px;font-family:Georgia,serif;font-size:10px;letter-spacing:.2em;color:var(--ink2)}
.nav{display:flex;gap:clamp(10px,2vw,26px)}
.nav button{font-size:13.5px;letter-spacing:.14em;color:var(--ink2);padding:6px 2px;border-bottom:2px solid transparent}
.nav button:hover{color:var(--ink);border-bottom-color:var(--line)}
.nav-drop{position:relative}
.nav-drop .caret{font-size:10px;margin-left:1px}
.nav-drop button.on{color:var(--ink);border-bottom-color:var(--line)}
.nav-menu{position:absolute;right:0;top:calc(100% + 12px);min-width:186px;padding:6px;border-radius:13px;
  background:var(--paper);border:1px solid var(--line);box-shadow:0 20px 44px -26px rgba(120,80,50,.95);
  display:flex;flex-direction:column;gap:2px;z-index:60}
.nav-menu[hidden]{display:none}
.nav-menu button{display:flex;flex-direction:column;gap:2px;text-align:left;padding:9px 11px;border-radius:9px;
  border-bottom:2px solid transparent;letter-spacing:.06em}
.nav-menu b{font-size:14px;font-weight:600}
.nav-menu span{font-size:11px;letter-spacing:.08em;color:var(--muted)}
.nav-menu button:hover{background:#f2ebdf;color:var(--ink);border-bottom-color:transparent}

/* ---------- 门厅 ---------- */
.hero{padding:0 0 8px}
.hero-copy{max-width:860px;padding:10px clamp(16px,4vw,44px) 4px}
.hero-copy h1{margin:4px 0 4px;font-family:var(--f-script);font-size:clamp(26px,2.7vw,34px);
  line-height:1.14;font-weight:400;letter-spacing:.01em}
.hero-copy h1 em{font-family:var(--f-serif);font-style:normal;font-weight:600;font-size:.86em;
  padding:0 .12em;color:var(--green2)}
.hero-copy p{margin:0;font-size:13.5px;line-height:1.6;color:var(--ink2);max-width:660px}
.hero-copy p b{color:var(--green2);font-weight:600}
.stage{position:relative;width:100%;height:min(58vh,540px);min-height:320px;overflow:hidden;
  background:linear-gradient(180deg,#fbf5ea 0%,#f4ead9 62%,#ece0cc 100%)}
.stage-hint{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);margin:0;
  padding:6px 14px;border-radius:20px;background:rgba(255,252,246,.82);border:1px solid var(--line);
  font-size:11.5px;letter-spacing:.1em;color:var(--muted);white-space:nowrap;pointer-events:none}
.stage canvas{display:block;width:100%;height:100%;touch-action:pan-y}
.stage canvas.pointing{cursor:pointer}
.tags{position:absolute;inset:0;pointer-events:none}
.housetag{position:absolute;left:0;top:0;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:7px 13px 8px;border-radius:12px;background:linear-gradient(180deg,#fffdf8,#f7f0e3);
  border:1px solid var(--line);box-shadow:0 10px 22px -16px rgba(120,80,50,.6);transition:opacity .25s,transform .12s;
  pointer-events:auto;white-space:nowrap}
.housetag .n{font-family:var(--f-serif);font-size:15px;letter-spacing:.04em}
.housetag .t{font-size:10.5px;letter-spacing:.1em;color:var(--muted)}
.housetag.hot{background:linear-gradient(180deg,#fffdf6,#f2f6ee);border-color:#bcd0be;box-shadow:0 14px 26px -14px rgba(70,100,80,.7)}
.housetag::before{content:'';position:absolute;left:50%;bottom:-9px;width:3px;height:10px;transform:translateX(-50%);
  background:var(--brass);border-radius:2px}

/* ---------- 区块 ---------- */
.sec{padding:clamp(34px,5vw,64px) clamp(16px,4vw,44px);scroll-margin-top:78px}
.sec.alt{background:rgba(255,252,246,.55);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec-head{max-width:820px;margin-bottom:26px}
.sec-head h2{margin:12px 0 12px;font-family:var(--f-serif);font-size:clamp(23px,3vw,31px);font-weight:600;letter-spacing:.02em}
.sec-head p{margin:0;font-size:14px;line-height:1.85;color:var(--ink2)}
.sec-note{margin:16px clamp(16px,4vw,44px) 0;max-width:820px;padding:12px 15px;border-left:3px solid var(--brass);
  background:rgba(255,252,246,.7);font-size:12.5px;line-height:1.8;color:var(--muted)}

/* ---------- 门厅 + 行业切换 ---------- */
.first{display:grid;grid-template-columns:minmax(0,1fr) minmax(392px,446px);gap:16px;
  padding:0 clamp(16px,4vw,44px);align-items:stretch}
.switcher{display:flex;flex-direction:column;gap:10px;min-width:0}
.sw-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding-top:2px}
.sw-tip{font-family:var(--f-serif);font-size:15px;color:var(--ink)}
.chips{display:grid;grid-template-columns:1fr;gap:8px}
.chip{display:flex;flex-direction:column;gap:2px;text-align:left;padding:9px 14px;border-radius:12px;
  background:linear-gradient(180deg,#fffdf9,#f8f2e8);border:1px solid var(--line);
  transition:transform .16s,border-color .16s,background .16s}
.chip:hover{transform:translateX(3px)}
.chip.on{background:linear-gradient(180deg,#fffdf6,#eef4ea);border-color:#9fb99f}
.chip .ct{font-family:Georgia,serif;font-size:10px;letter-spacing:.22em;color:var(--muted)}
.chip .cn{font-family:var(--f-serif);font-size:16px}
.chip .cd{font-size:11.5px;color:var(--ink2);letter-spacing:.04em}
.trade-panel{flex:1 1 auto;padding:14px 16px;border-radius:16px;background:var(--paper);border:1px solid var(--line);
  box-shadow:0 20px 44px -38px rgba(120,80,50,.9)}
.tp-head{padding-bottom:9px;border-bottom:1px dashed var(--line)}
.tp-name{font-family:var(--f-serif);font-size:18.5px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.tp-trade{font-size:11.5px;letter-spacing:.12em;color:var(--muted)}
.tp-line{margin-top:5px;font-family:var(--f-script);font-size:19px;color:var(--green2)}
.tp-list{margin:10px 0 0;display:grid;gap:6px}
.tp-list>div{display:grid;grid-template-columns:38px 1fr;gap:8px;align-items:start}
.tp-list dt{font-size:11px;letter-spacing:.12em;color:var(--muted);padding-top:1px}
.tp-list dd{margin:0;font-size:12.5px;line-height:1.55;color:var(--ink2)}
.tp-lead{margin:8px 0 0;font-size:13px;line-height:1.72;color:var(--ink2)}
.tp-tip{margin:13px 0 7px;font-size:10.5px;letter-spacing:.14em;color:var(--muted)}
.tp-quick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.tp-shot{padding:0;border-radius:11px;overflow:hidden;border:1px solid var(--line);background:#fffdf8;
  display:flex;flex-direction:column;text-align:left;
  transition:transform .16s,border-color .16s,box-shadow .16s}
.tp-shot img{width:100%;aspect-ratio:16/11;object-fit:cover;object-position:50% 34%;display:block}
.tp-shot .n{font-family:var(--f-serif);font-size:12.5px;padding:6px 8px 0;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tp-shot .c{font-size:10px;letter-spacing:.1em;color:var(--muted);padding:1px 8px 7px}
.tp-shot:hover{transform:translateY(-2px);border-color:#9fb99f;box-shadow:0 12px 22px -18px rgba(70,100,80,.9)}
.tp-shot.on{border-color:#9fb99f;background:#f2f7ef}
.trade-panel .btn-go{margin-top:13px}
.btn-go{margin-top:0;display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:11px;
  background:linear-gradient(180deg,#5c8470,#436a55);color:#fffdf6;font-size:13px;letter-spacing:.08em;
  box-shadow:0 12px 24px -16px rgba(60,95,75,.9)}
.btn-go .arw{font-size:14px}
.btn-go:hover{filter:brightness(1.06)}

/* ---------- 案例墙 ---------- */
.case-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(288px,1fr));gap:18px}
.case{display:flex;flex-direction:column;border-radius:16px;overflow:hidden;background:var(--paper);
  border:1px solid var(--line);box-shadow:0 22px 46px -40px rgba(120,80,50,.95);transition:transform .18s,border-color .18s}
.case.on{border-color:#9fb99f;box-shadow:0 22px 46px -34px rgba(70,100,80,.85)}
.case:hover{transform:translateY(-3px)}
.case-shot{aspect-ratio:16/10;background:#efe6d6;border-bottom:1px solid var(--line);overflow:hidden}
.case-shot img{width:100%;height:100%;object-fit:cover;display:block}
.case-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px}
.case-trade{font-family:Georgia,serif;font-size:10.5px;letter-spacing:.2em;color:var(--muted);text-transform:uppercase}
.case-body h3{margin:0;font-family:var(--f-serif);font-size:20px;font-weight:600}
.case-line{margin:0;font-family:var(--f-script);font-size:20px;color:var(--green2)}
.case-row{margin:0;font-size:12.5px;line-height:1.7;color:var(--ink2)}
.case-row b{display:inline-block;min-width:34px;margin-right:8px;font-weight:600;color:var(--muted);font-size:11.5px;letter-spacing:.1em}
.case-actions{display:flex;gap:10px;margin-top:6px;flex-wrap:wrap}
.btn-go.sm{margin-top:0;padding:9px 15px;font-size:12.5px}
.btn-focus{padding:9px 15px;border-radius:11px;border:1px solid var(--line);background:#fbf6ec;font-size:12.5px;letter-spacing:.06em;color:var(--ink2)}
.btn-focus.on{border-color:#9fb99f;background:#eef4ea;color:var(--green2)}
.sell{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;margin-top:26px}
.sell-item{padding:18px 20px;border-radius:14px;background:rgba(255,252,246,.8);border:1px solid var(--line)}
.sell-item h3{margin:0 0 9px;font-family:var(--f-serif);font-size:17px}
.sell-item p{margin:0;font-size:13px;line-height:1.8;color:var(--ink2)}

.foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:26px clamp(16px,4vw,44px) 34px;
  border-top:1px solid var(--line);font-size:12px;letter-spacing:.08em;color:var(--muted)}

/* ---------- 店铺预览 ---------- */
/* 关闭状态必须是 display:none，否则 flex 会把弹层撑在页尾显示出来 */
#viewer{display:none;border:0;padding:0;max-width:none;width:100vw;max-width:100vw;height:100vh;max-height:100vh;
  margin:0;background:#f6f0e5;overflow:hidden}
#viewer::backdrop{background:rgba(60,48,38,.62)}
#viewer[open]{display:flex;flex-direction:column}
.vbar{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 16px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#fffdf8,#f7f1e6)}
.vinfo{display:flex;align-items:baseline;gap:12px;min-width:0}
.vn{font-family:var(--f-serif);font-size:17px}
.vt{font-size:11.5px;letter-spacing:.1em;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vact{display:flex;align-items:center;gap:12px}
.vact a{font-size:12px;letter-spacing:.06em;color:var(--green2)}
#viewerClose{padding:7px 15px;border-radius:9px;background:#436a55;color:#fffdf6;font-size:12.5px;letter-spacing:.1em}
#viewerFrame{flex:1 1 auto;width:100%;border:0;background:#fff}

body.viewer-on{overflow:hidden}
body.scene-failed .stage{background:linear-gradient(180deg,#f6efe2,#ece0cc)}

/* ---------- 手机 ---------- */
body.is-mobile .stage{height:min(42vh,360px);min-height:280px}
body.is-mobile .hero{padding:0 0 4px}
body.is-mobile .hero-copy{max-width:none;padding:16px 16px 6px}
body.is-mobile .hero-copy h1{font-size:27px;line-height:1.28;margin:8px 0 10px}
body.is-mobile .hero-copy p{font-size:13px;line-height:1.75}
body.is-mobile .stage-hint{bottom:8px;font-size:10.5px;padding:5px 11px}
/* 手机一次只看得到一栋屋，三个浮标会叠在一起，改用下方的大卡片进店 */
body.is-mobile .tags{display:none}
body.is-mobile .first{grid-template-columns:1fr;gap:10px}
body.is-mobile .chips{display:grid;grid-template-columns:1fr;gap:6px;overflow:visible;padding-bottom:0}
body.is-mobile .chip{flex:none;max-width:none;flex-direction:row;align-items:baseline;gap:9px;padding:10px 12px}
body.is-mobile .chip .ct{font-size:9.5px}
body.is-mobile .chip .cn{font-size:15px}
body.is-mobile .chip .cd{display:none}
body.is-mobile .tp-quick{gap:6px}
body.is-mobile .tp-shot .n{font-size:11.5px;padding:5px 6px 0}
body.is-mobile .tp-shot .c{font-size:9.5px;padding:0 6px 6px}
body.is-mobile .housetag{padding:6px 10px 7px}
body.is-mobile .housetag .n{font-size:13.5px}
body.is-mobile .housetag .t{font-size:9.5px}
body.is-mobile .sec{padding:28px 16px}
body.is-mobile .foot{padding:20px 16px 28px}
body.is-mobile .top{padding:10px 14px;gap:10px;flex-wrap:nowrap}
body.is-mobile .brand{gap:8px;min-width:0}
body.is-mobile .brand .logo{width:20px;height:25px;flex:0 0 auto}
body.is-mobile .brand .t{font-size:20px;white-space:nowrap}
body.is-mobile .brand .s{display:none}
body.is-mobile .nav{gap:11px;overflow-x:auto;scrollbar-width:none;flex:0 0 auto}
/* 手机顶栏是横向滚动容器，absolute 菜单会被裁掉；手机入口已在首屏面板与案例墙里，这里直接隐藏。 */
body.is-mobile .nav-drop{display:none}
body.is-mobile .nav::-webkit-scrollbar{display:none}
body.is-mobile .nav button{font-size:12px;letter-spacing:.04em;white-space:nowrap;border-bottom-width:1px}
body.is-mobile .sec-head h2{font-size:22px}
@media (max-height:520px) and (orientation:landscape){
  .stage{height:70vh;min-height:260px}
  .hero-copy{display:none}
}