:root{--ink:#1d2a33;--muted:#5d6a63;--paper:#f4f1ea;--sage:#7e8f74;--sage-d:#3f5445;--navy:#1b2b3b;--clay:#a35f43;--line:#d9d5c8;--glass:rgba(247,244,237,.86);--hh:72px}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:var(--hh)}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.7 "PingFang SC","Microsoft YaHei","Noto Sans CJK SC",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
body.lock{overflow:hidden}
a{color:inherit;text-decoration:none}ul{margin:0;padding:0;list-style:none}h1,h2{font-family:"Songti SC","Noto Serif CJK SC",Georgia,serif;font-weight:500;margin:0}
.wrap{max-width:1240px;margin:auto;padding:0 clamp(18px,4vw,48px)}
/* 底层背景 */
.stage{position:fixed;inset:0;z-index:-1;background:var(--paper)}
.layer{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.1s ease;will-change:opacity;transform:scale(1.04)}
.layer.on{opacity:1}
.veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(244,241,234,.88) 0%,rgba(244,241,234,.55) 45%,rgba(244,241,234,.12) 100%)}
body:has(.dark:is(:hover)) .veil{}
/* 顶栏 */
.top{position:fixed;inset:0 0 auto 0;height:var(--hh);z-index:50;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(18px,4vw,48px);transition:background .3s,box-shadow .3s,backdrop-filter .3s}
.top.stuck{background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
.brand{display:flex;align-items:center;gap:10px}
.mark{width:38px;height:38px;border-radius:11px;background:var(--navy);color:#f4f1ea;display:grid;place-items:center;font:500 20px/1 "Songti SC","Noto Serif CJK SC",serif}
.name{font:600 18px/1.1 "Songti SC","Noto Serif CJK SC",serif;letter-spacing:2px}.name small{display:block;font:500 9px/1 Arial,sans-serif;letter-spacing:3px;color:var(--muted);margin-top:5px}
.menu>ul{display:flex;gap:6px;align-items:center}
.menu>ul>li{position:relative}
.menu>ul>li>a{display:block;padding:24px 14px;font-size:15px;letter-spacing:.5px;position:relative}
.menu>ul>li>a::after{content:"";position:absolute;left:14px;right:14px;bottom:18px;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.menu>ul>li:hover>a::after{transform:scaleX(1)}
.sub-toggle{display:none}
.sub{position:absolute;top:calc(100% - 8px);left:50%;min-width:200px;background:var(--glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--line);border-radius:14px;padding:8px;box-shadow:0 18px 50px rgba(27,43,59,.16);opacity:0;visibility:hidden;transform:translate(-50%,8px);transition:.25s}
.has-sub:hover>.sub,.has-sub:focus-within>.sub{opacity:1;visibility:visible;transform:translate(-50%,0)}
.sub a{display:flex;justify-content:space-between;gap:14px;padding:10px 14px;border-radius:9px;font-size:14px;white-space:nowrap}
.sub a em{font:italic 12px Georgia,serif;color:var(--muted)}.sub a:hover{background:rgba(126,143,116,.18)}
.burger{display:none}
/* 通用 */
.sec{padding:clamp(72px,11vw,140px) 0;position:relative}
.eyebrow{font:500 12px/1 Arial,sans-serif;letter-spacing:3px;color:var(--sage-d);margin:0 0 16px}
.sh h2{font-size:clamp(28px,4vw,44px);line-height:1.25;margin-bottom:16px}
.sh p{color:var(--muted);max-width:520px}.note{font-size:13px;color:var(--clay)!important}.note strong{font-weight:600}
.btn{display:inline-block;padding:13px 28px;border-radius:999px;font-size:15px;transition:.25s;border:1px solid var(--ink)}
.btn.solid{background:var(--navy);border-color:var(--navy);color:#f4f1ea}.btn.solid:hover{background:var(--sage-d);border-color:var(--sage-d);transform:translateY(-2px)}
.btn.ghost:hover{background:var(--ink);color:#f4f1ea}.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
/* hero */
.hero{min-height:100svh;display:flex;align-items:center;padding-top:var(--hh)}
.hero h1{font-size:clamp(38px,7vw,84px);line-height:1.15;letter-spacing:2px}.hero h1 span{color:var(--sage-d)}
.lead{max-width:480px;font-size:17px;color:#33403a;margin:22px 0 0}
.scroll{position:absolute;bottom:26px;left:50%;width:22px;height:36px;border:1px solid var(--ink);border-radius:12px;transform:translateX(-50%)}
.scroll span{position:absolute;left:50%;top:7px;width:3px;height:7px;margin-left:-1.5px;border-radius:2px;background:var(--ink);animation:dot 1.8s infinite}
@keyframes dot{60%{transform:translateY(12px);opacity:0}}
/* 品类 */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:40px}
.tile{display:flex;flex-direction:column;justify-content:flex-end;min-height:260px;padding:24px;background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.6);border-radius:20px;transition:.3s}
.tile:hover{transform:translateY(-6px);box-shadow:0 20px 40px rgba(27,43,59,.14)}
.tile .n{font:12px Arial;letter-spacing:2px;color:var(--sage-d);margin-bottom:auto}.tile b{font:500 28px "Songti SC","Noto Serif CJK SC",serif}.tile small{color:var(--muted);font-size:13px}
/* 商品 */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin:30px 0 28px}
.filters button{font:inherit;font-size:14px;padding:8px 20px;border:1px solid var(--ink);background:transparent;border-radius:999px;cursor:pointer;transition:.2s}
.filters button.on,.filters button:hover{background:var(--navy);color:#f4f1ea;border-color:var(--navy)}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px 18px}
.item[hidden]{display:none}
.item{background:var(--glass);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:16px;overflow:hidden;transition:.3s}
.item:hover{transform:translateY(-5px);box-shadow:0 18px 36px rgba(27,43,59,.15)}
.ph{aspect-ratio:3/4;background-size:cover;position:relative;transition:transform .6s}.item:hover .ph{transform:scale(1.04)}.item{overflow:hidden}
.tag{position:absolute;left:10px;top:10px;background:var(--clay);color:#fff;font-size:11px;padding:2px 9px;border-radius:999px}
.meta{padding:14px 16px 18px;position:relative;background:var(--glass)}.meta small{color:var(--muted);font-size:12px}.meta b{display:block;font-weight:500;margin:2px 0 6px}.meta i{font-style:normal;font-family:Georgia,serif}.meta u{text-decoration:none;font:11px "PingFang SC",sans-serif;color:var(--clay);margin-left:4px}
/* 深色章节 */
.dark .sh h2,.dark .sh p,.dark .eyebrow,.dark .ticks{color:#f4f1ea}.dark .sh p{opacity:.85}.dark .note{color:#f0c9b6!important}
#show .veil,#star .veil{}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,72px);align-items:center}.split.rev .sh{order:2}
.dark{background:linear-gradient(90deg,rgba(20,32,44,.82),rgba(20,32,44,.55))}
.ticks{margin:20px 0 26px}.ticks li{padding-left:20px;position:relative;margin:6px 0;font-size:15px}.ticks li::before{content:"";position:absolute;left:0;top:.8em;width:10px;height:1px;background:currentColor}
.btn.light{border-color:#f4f1ea;color:#f4f1ea}.btn.light:hover{background:#f4f1ea;color:var(--navy)}
.cards{display:grid;gap:14px}.card{background:rgba(247,244,237,.14);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.28);border-radius:16px;padding:20px 22px;color:#f4f1ea;transition:.3s}
.card:hover{background:rgba(247,244,237,.24);transform:translateX(6px)}.card span{font-size:11px;background:var(--clay);padding:2px 9px;border-radius:999px}.card b{display:block;font:500 20px "Songti SC","Noto Serif CJK SC",serif;margin:10px 0 2px}.card small{opacity:.8}
/* 面料 / 手记 / 联系 */
.fab{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:38px}.fab div{padding:28px 22px;background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:18px;border-top:3px solid var(--sage)}
.fab b{font:500 24px "Songti SC","Noto Serif CJK SC",serif;display:block}.fab small{color:var(--muted)}
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:38px}.post{padding:28px;background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:18px;transition:.3s}.post:hover{transform:translateY(-5px)}
.post span{font-size:11px;color:var(--clay);letter-spacing:1px}.post b{display:block;font:500 21px/1.45 "Songti SC","Noto Serif CJK SC",serif;margin:10px 0 6px}.post small{color:var(--muted)}
.faq{background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:20px;padding:10px 28px}.faq li{display:flex;gap:20px;padding:18px 0;border-bottom:1px solid var(--line)}.faq li:last-child{border:0}.faq b{width:48px;flex:none}.faq span{color:var(--muted)}
.foot{background:var(--navy);color:#cfd3cc;font-size:13px;padding:24px 0}.foot .wrap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.reveal{opacity:0;transform:translateY(20px);transition:.8s}.reveal.in{opacity:1;transform:none}
/* 平板 */
@media(max-width:1020px){.tiles,.fab{grid-template-columns:repeat(2,1fr)}.grid{grid-template-columns:repeat(3,1fr)}.posts{grid-template-columns:1fr}.menu>ul>li>a{padding:24px 8px;font-size:14px}}
/* 手机：抽屉菜单 + 二级手风琴 */
@media(max-width:760px){
  :root{--hh:60px}
  .top.stuck{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(244,241,234,.97)}
  .veil{background:linear-gradient(180deg,rgba(244,241,234,.9) 0%,rgba(244,241,234,.7) 55%,rgba(244,241,234,.35) 100%)}
  .burger{display:block;width:42px;height:42px;border:0;background:transparent;position:relative;z-index:70;cursor:pointer}
  .burger span{position:absolute;left:10px;right:10px;height:1.5px;background:var(--ink);transition:.3s}.burger span:first-child{top:16px}.burger span:last-child{top:25px}
  .burger[aria-expanded=true] span:first-child{top:20px;transform:rotate(45deg)}.burger[aria-expanded=true] span:last-child{top:20px;transform:rotate(-45deg)}
  .menu{position:fixed;inset:0;background:var(--paper);padding:calc(var(--hh) + 16px) 22px 40px;overflow:auto;transform:translateX(100%);transition:transform .4s cubic-bezier(.2,.8,.2,1);z-index:60;visibility:hidden}
  .menu.open{transform:none;visibility:visible}
  .menu>ul{flex-direction:column;align-items:stretch;gap:0}
  .menu>ul>li{display:flex;flex-wrap:wrap;align-items:center;border-bottom:1px solid var(--line)}
  .menu>ul>li>a{flex:1;padding:18px 0;font:500 20px "Songti SC","Noto Serif CJK SC",serif}.menu>ul>li>a::after{display:none}
  .sub-toggle{display:block;width:44px;height:44px;border:0;background:transparent;position:relative;cursor:pointer}
  .sub-toggle::before,.sub-toggle::after{content:"";position:absolute;left:14px;right:14px;top:21px;height:1.5px;background:var(--ink);transition:.3s}.sub-toggle::after{transform:rotate(90deg)}
  .expand>.sub-toggle::after{transform:none}
  .sub{position:static;flex-basis:100%;min-width:0;opacity:1;visibility:visible;transform:none;background:transparent;border:0;box-shadow:none;backdrop-filter:none;padding:0 0 0 4px;max-height:0;overflow:hidden;transition:max-height .35s}
  .has-sub:hover>.sub{transform:none}.expand>.sub{max-height:300px;padding-bottom:10px}
  .sub a{padding:12px 4px;font-size:16px;align-items:center}
  .hero{align-items:flex-end;padding-bottom:90px}.hero h1{letter-spacing:1px}
  .tiles{grid-template-columns:repeat(2,1fr);gap:10px}.tile{min-height:170px;padding:16px}.tile b{font-size:22px}
  .grid{grid-template-columns:repeat(2,1fr);gap:12px}.meta{padding:10px 12px 14px}.meta b{font-size:14px}
  .split{grid-template-columns:1fr}.split.rev .sh{order:0}.fab{grid-template-columns:1fr 1fr;gap:10px}.fab div{padding:20px 16px}
  .dark{background:linear-gradient(180deg,rgba(20,32,44,.78),rgba(20,32,44,.6))}
  .filters{flex-wrap:nowrap;overflow-x:auto;margin-right:-18px;padding-right:18px;scrollbar-width:none}.filters button{flex:none}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto}}