/* ============================================================
   汉唐序 · 官网 — 玄香（方向二）生产样式
   设计来源：hantangxu-design/design-demos-v2/方向二-玄香.html（用户选定）
   色彩推导：墨色 #26221D 加深为夜场底；琥珀鎏金 #A8813F 作主 accent；
   胭脂印章红仅作点睛。宋体 display × 无衬线 body。
   ============================================================ */

:root{
  --void:#0B0908;            /* 最深底（页脚内阴影层次用） */
  --site:#14110D;            /* 页面底 */
  --panel:#1B1712;
  --panel2:#221C14;
  --ink:#F5F0E6;             /* 暖白 */
  --body-c:rgba(245,240,230,.82);
  --dim:rgba(245,240,230,.62);
  --gold:#A8813F;            /* 琥珀鎏金（采样） */
  --gold-bright:#C9A55C;     /* 鎏金亮调（小字用，保对比度） */
  --line:rgba(168,129,63,.34);
  --line-soft:rgba(245,240,230,.13);
  --serif:"Noto Serif SC","Songti SC","STSong",serif;
  --sans:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  --nav-h:92px;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{
  background:var(--site);
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 18px);
  overflow-x:clip; /* 兜底：任何意外横向溢出不再产生横向滚动 */
}
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  font-family:var(--sans); font-weight:300; color:var(--body-c);
  background:
    radial-gradient(1100px 520px at 70% -8%, rgba(168,129,63,.07), transparent 62%),
    radial-gradient(900px 600px at 8% 30%, rgba(38,34,29,.55), transparent 60%),
    var(--site);
  font-size:15px; line-height:1.8;
  -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
figure{ margin:0; }
::selection{ background:var(--gold); color:#171310; }
:focus-visible{ outline:1.5px solid var(--gold-bright); outline-offset:3px; }

.en{ font-family:var(--sans); font-weight:400; letter-spacing:.34em; text-transform:uppercase; color:var(--dim); }

/* 布局容器：内容最大 1440，两侧留白随视口收缩 */
.wrap{ max-width:1440px; margin:0 auto; padding-left:clamp(20px, 6.6vw, 96px); padding-right:clamp(20px, 6.6vw, 96px); }

/* 无障碍跳转 */
.skip{
  position:fixed; left:16px; top:-60px; z-index:99;
  background:var(--gold); color:#171310; font-size:13px; letter-spacing:.2em;
  padding:10px 16px; transition:top .25s;
}
.skip:focus{ top:14px; }

/* ============ 顶部导航（固定，滚动后加墨底） ============ */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:50;
  border-bottom:1px solid transparent;
  transition:background .35s, border-color .35s;
}
.topbar.scrolled{
  background:rgba(11,9,8,.9);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-bottom-color:var(--line-soft);
}
.nav{ display:flex; align-items:center; height:var(--nav-h); position:relative; z-index:5; }
.nav .logo{ font-family:var(--serif); font-weight:700; font-size:24px; letter-spacing:.34em; color:var(--ink); }
.nav .logo small{ display:block; font-family:var(--sans); font-weight:400; font-size:12px; letter-spacing:.42em; color:var(--dim); margin-top:2px; }
.nav .menu{ display:flex; align-items:center; gap:44px; margin-left:96px; }
.nav .menu a{ font-size:15px; letter-spacing:.2em; color:var(--body-c); transition:color .3s; }
.nav .menu a:hover{ color:var(--gold-bright); }
.nav .ops{ margin-left:auto; display:flex; align-items:center; gap:26px; }

.btn{
  display:inline-block; font-size:14px; letter-spacing:.3em; padding:13px 34px 13px 38px;
  border:1px solid var(--gold); color:var(--gold-bright); cursor:pointer; text-align:center;
  transition:background .3s, color .3s, border-color .3s;
}
.btn:hover{ background:var(--gold); color:#171310; }
.btn.solid{ background:var(--gold); color:#171310; border-color:var(--gold); }
.btn.solid:hover{ background:var(--gold-bright); border-color:var(--gold-bright); }
.m-only{ display:none; }

/* 移动端菜单按钮 */
.burger{
  display:none; width:44px; height:44px; margin-right:-10px;
  background:none; border:none; cursor:pointer; position:relative;
}
.burger span{
  position:absolute; left:10px; width:24px; height:1.6px;
  background:var(--ink); transition:transform .3s, opacity .3s, top .3s;
}
.burger span:nth-child(1){ top:15px; }
.burger span:nth-child(2){ top:21px; }
.burger span:nth-child(3){ top:27px; }
.burger.open span:nth-child(1){ top:21px; transform:rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; }
.burger.open span:nth-child(3){ top:21px; transform:rotate(-45deg); }

/* ============ 竖排注 / 烟纹 ============ */
.vt{
  writing-mode:vertical-rl; font-family:var(--serif);
  letter-spacing:.5em; color:var(--dim); font-size:14px;
}
.smoke{ position:absolute; pointer-events:none; }

/* ============ Hero ============ */
.hero{
  position:relative; display:grid; grid-template-columns:1fr 560px; gap:72px;
  padding-top:calc(var(--nav-h) + clamp(40px, 8vw, 118px)); padding-bottom:clamp(56px, 7vw, 104px);
  /* 灯下光域：用背景渐变表达（伪元素负偏移会把页面撑出横向滚动） */
  background:radial-gradient(circle 520px at calc(100% - 220px) 180px, rgba(168,129,63,.13), transparent 72%);
}
.hero .vt-side{ position:absolute; left:38px; top:calc(var(--nav-h) + 130px); }
.hero .kick{ font-size:13px; letter-spacing:.5em; color:var(--gold-bright); margin-bottom:34px; }
.hero h1{
  font-family:var(--serif); font-weight:900; color:var(--ink);
  font-size:clamp(46px, 6.4vw, 92px); line-height:1.22; letter-spacing:.06em;
}
.hero h1 em{ font-style:normal; color:var(--gold-bright); }
.hero .sub{ margin-top:34px; font-size:17px; letter-spacing:.3em; color:var(--body-c); }
.hero .promise-s{ margin-top:16px; font-family:var(--serif); font-size:15px; letter-spacing:.14em; color:var(--dim); }
.hero .ctas{ margin-top:56px; display:flex; flex-wrap:wrap; gap:20px; }
.hero .meta-line{ margin-top:64px; padding-top:22px; border-top:1px solid var(--line-soft);
  display:flex; flex-wrap:wrap; gap:14px 38px; font-size:12px; letter-spacing:.2em; color:var(--dim); }

/* 暗场融合图：产品如灯下香器 */
.ph{ position:relative; overflow:hidden; background:var(--site); }
.ph img{ width:100%; height:100%; object-fit:cover; filter:brightness(.86) contrast(1.07) saturate(.9); }
.ph::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(115% 92% at 50% 44%, rgba(20,17,13,0) 40%, rgba(20,17,13,.62) 76%, var(--site) 99%),
    linear-gradient(to top, rgba(20,17,13,.5), rgba(20,17,13,0) 34%);
}
.ph-frame{ position:relative; }
.ph-frame::before{ /* 金线错位框 */
  content:""; position:absolute; inset:-14px 14px 14px -14px;
  border:1px solid var(--line); pointer-events:none; z-index:2;
}
.hero .ph{ height:clamp(360px, 44vw, 640px); }
.hero-visual{ min-width:0; }
.hero .ph-cap{
  margin-top:20px; display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  font-size:12px; letter-spacing:.22em; color:var(--dim);
}
.hero .ph-cap b{ font-family:var(--serif); font-weight:600; font-size:15px; color:var(--body-c); letter-spacing:.14em; }

/* ============ 品牌承诺条 ============ */
.promise{
  position:relative; border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);
  padding:clamp(64px, 9vw, 96px) 24px; text-align:center; overflow:hidden;
  background:linear-gradient(180deg, rgba(34,28,20,.5), rgba(20,17,13,0) 70%);
}
.promise h2{
  font-family:var(--serif); font-weight:700; font-size:clamp(28px, 4.2vw, 52px);
  letter-spacing:.14em; color:var(--ink); position:relative; z-index:2;
}
.promise .who{ margin-top:22px; font-size:13px; letter-spacing:.5em; color:var(--gold-bright); position:relative; z-index:2; }

/* ============ 章节通用 ============ */
.chap{ position:relative; border-top:1px solid var(--line-soft); padding-top:clamp(64px, 8.4vw, 104px); padding-bottom:clamp(72px, 9vw, 116px); }
.chap-head{ display:flex; align-items:flex-end; gap:34px; margin-bottom:clamp(40px, 6vw, 74px); flex-wrap:wrap; }
.chap-no{
  font-family:var(--serif); font-weight:900; font-size:clamp(72px, 9vw, 118px); line-height:.9;
  color:rgba(168,129,63,.42);
}
@supports (-webkit-text-stroke:1px #000){
  .chap-no{ color:transparent; -webkit-text-stroke:1px rgba(168,129,63,.55); }
}
.chap-head h2{ font-family:var(--serif); font-weight:700; font-size:clamp(30px, 3.6vw, 46px); letter-spacing:.2em; color:var(--ink); }
.chap-head .en{ font-size:12px; margin-bottom:10px; display:block; }
.chap-head .note{ margin-left:auto; font-family:var(--serif); font-size:15px; letter-spacing:.16em; color:var(--dim); padding-bottom:8px; }
.chap-head .note i{ font-style:normal; color:var(--gold-bright); }

/* ---- 壹 · 色名图谱 ---- */
.hues-intro{ display:flex; align-items:baseline; gap:28px; margin-bottom:clamp(32px, 4.6vw, 56px); flex-wrap:wrap; }
.hues-intro .big{ font-family:var(--serif); font-size:22px; color:var(--body-c); letter-spacing:.12em; }
.hues-intro .big i{ font-style:normal; color:var(--gold-bright); font-size:30px; font-family:var(--serif); }
.hue-wall{ display:grid; grid-template-columns:repeat(6,1fr); gap:26px; }
.hue .sw{ height:158px; border:1px solid var(--line-soft); position:relative; }
.hue .sw::after{ content:""; position:absolute; inset:0; box-shadow:inset 0 0 42px rgba(11,9,8,.32); }
.hue h3{ margin-top:16px; font-family:var(--serif); font-weight:600; font-size:20px; letter-spacing:.24em; color:var(--ink); }
.hue p{ margin-top:4px; font-size:12px; letter-spacing:.18em; color:var(--dim); }
.hue-foot{ margin-top:clamp(32px, 4.6vw, 52px); padding-top:20px; border-top:1px solid var(--line-soft);
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; font-size:12px; letter-spacing:.2em; color:var(--dim); }
.hue-foot i{ font-style:normal; color:var(--gold-bright); }

/* ---- 贰 · 三席香事 ---- */
.cats{ display:grid; grid-template-columns:repeat(3,1fr); gap:34px; }
.cat .ph{ height:400px; }
.cat .cbody{ padding:28px 2px 0; }
.cat .tier{ font-size:12px; letter-spacing:.4em; color:var(--gold-bright); }
.cat h3{ margin-top:12px; font-family:var(--serif); font-weight:700; font-size:34px; letter-spacing:.22em; color:var(--ink); }
.cat .qi{ margin-top:10px; font-size:14px; letter-spacing:.16em; color:var(--dim); }
.cat .go{ display:inline-block; margin-top:20px; font-size:13px; letter-spacing:.3em; color:var(--gold-bright);
  border-bottom:1px solid var(--line); padding-bottom:6px; transition:border-color .3s, color .3s; }
.cat .go:hover{ color:var(--ink); border-bottom-color:var(--gold-bright); }

/* 香调之序 */
.notes-strip{ margin-top:clamp(56px, 7vw, 88px); display:grid; grid-template-columns:300px 1fr; gap:clamp(36px, 5vw, 64px); align-items:center; }
.notes-strip .ph{ height:400px; }
.notes-strip h3{ font-family:var(--serif); font-weight:700; font-size:30px; letter-spacing:.24em; color:var(--ink); }
.notes-strip .cap{ margin-top:12px; font-size:13px; letter-spacing:.24em; color:var(--gold-bright); }
.notes-strip ol{ margin-top:34px; list-style:none; }
.notes-strip ol li{ display:flex; gap:24px; padding:20px 0; border-top:1px solid var(--line-soft); align-items:baseline; }
.notes-strip ol li:last-child{ border-bottom:1px solid var(--line-soft); }
.notes-strip .t{ font-family:var(--serif); font-size:17px; color:var(--gold-bright); letter-spacing:.2em; flex:none; width:64px; }
.notes-strip .d{ font-size:15px; letter-spacing:.1em; color:var(--body-c); }

/* ---- 叁 · 三席价序 ---- */
.pricing{ display:grid; grid-template-columns:1.25fr 420px; gap:clamp(40px, 6vw, 72px); align-items:stretch; }
.tiers{ display:grid; grid-template-rows:repeat(3,1fr); border-top:1px solid var(--line); }
.tier-row{ display:grid; grid-template-columns:150px 1fr auto; gap:28px; align-items:center;
  padding:30px 6px; border-bottom:1px solid var(--line-soft); }
.tier-row .nm{ font-family:var(--serif); font-weight:700; font-size:30px; letter-spacing:.24em; color:var(--ink); }
.tier-row .lv{ font-size:13px; letter-spacing:.3em; color:var(--dim); margin-top:4px; }
.tier-row .pr{ font-family:var(--serif); font-size:24px; color:var(--gold-bright); letter-spacing:.06em; white-space:nowrap; }
.tier-row .pr small{ font-size:13px; color:var(--dim); letter-spacing:.2em; font-family:var(--sans); }
.tiers-cta{ margin-top:40px; }
.pricing .ph.tall{ height:100%; min-height:420px; }
.aside-note{ margin-top:18px; font-size:12px; letter-spacing:.2em; color:var(--dim); display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; }

/* ---- 肆 · 五维之序 ---- */
.five{ display:grid; grid-template-columns:repeat(5,1fr); gap:0; border-top:1px solid var(--line); }
.five .f{ padding:44px 26px 10px; border-right:1px solid var(--line-soft); position:relative; }
.five .f:last-child{ border-right:none; }
.five .f::before{ content:""; position:absolute; top:-1px; left:0; width:34px; height:1px; background:var(--gold); }
.five .z{ font-family:var(--serif); font-weight:900; font-size:76px; line-height:1; color:var(--ink); }
.five .z i{ font-style:normal; color:var(--gold-bright); }
.five h3{ margin-top:26px; font-family:var(--serif); font-weight:600; font-size:20px; letter-spacing:.2em; color:var(--ink); }
.five .ord{ font-size:12px; letter-spacing:.34em; color:var(--gold-bright); margin-top:8px; }
.five p{ margin-top:16px; font-size:13px; color:var(--dim); letter-spacing:.06em; line-height:2; }

/* ---- 伍 · 数字香印 ---- */
.nfc{ display:grid; grid-template-columns:1fr 470px; gap:clamp(40px, 6.4vw, 80px); align-items:center; }
.nfc-list{ border-top:1px solid var(--line); }
.nfc-item{ display:grid; grid-template-columns:74px 240px 1fr; gap:24px; align-items:baseline;
  padding:26px 4px; border-bottom:1px solid var(--line-soft); }
.nfc-item .no{ font-family:var(--serif); font-size:19px; color:var(--gold-bright); letter-spacing:.1em; }
.nfc-item h3{ font-family:var(--serif); font-weight:600; font-size:22px; letter-spacing:.16em; color:var(--ink); }
.nfc-item p{ font-size:14px; color:var(--dim); letter-spacing:.08em; }
.nfc-visual{ position:relative; }
.nfc-visual .ph{ height:520px; }
.nfc-visual .vt{ position:absolute; right:-56px; top:24px; z-index:3; color:var(--gold-bright); font-size:15px; }
.nfc-tag{ margin-top:20px; display:flex; align-items:center; gap:14px; font-size:12px; letter-spacing:.26em; color:var(--dim); }
.waves{ width:26px; height:26px; position:relative; flex:none; display:inline-block; }
.waves::before,.waves::after,.waves i{ content:""; position:absolute; border:1.4px solid var(--gold); border-radius:50%; }
.waves::before{ inset:9px; border-color:var(--gold-bright); }
.waves::after{ inset:3px; border-left-color:transparent; border-bottom-color:transparent; transform:rotate(45deg); }
.waves i{ inset:-3px; border-right-color:transparent; border-bottom-color:transparent; transform:rotate(45deg); opacity:.55; }

/* ---- 陆 · 香境 · 节气荐香 ---- */
.jing{ display:grid; grid-template-columns:500px 1fr; gap:clamp(40px, 6.4vw, 80px); align-items:center; }
.jing .ph{ height:480px; }
.jing .cap{ font-size:12px; letter-spacing:.4em; color:var(--gold-bright); }
.jing h3{ margin-top:20px; font-family:var(--serif); font-weight:700; font-size:clamp(30px, 3.6vw, 44px); letter-spacing:.1em; color:var(--ink); line-height:1.4; }
.jing h3 span{ color:var(--gold-bright); }
.jing .sub{ margin-top:18px; font-size:15px; letter-spacing:.18em; color:var(--dim); }
.jing ul{ margin-top:44px; list-style:none; border-top:1px solid var(--line-soft); }
.jing li{ display:grid; grid-template-columns:130px 1fr; gap:24px; padding:20px 2px; border-bottom:1px solid var(--line-soft); }
.jing li b{ font-family:var(--serif); font-weight:600; font-size:17px; letter-spacing:.24em; color:var(--gold-bright); }
.jing li p{ font-size:14px; color:var(--body-c); letter-spacing:.06em; }

/* ---- 柒 · 典籍为凭 ---- */
.classic{ display:grid; grid-template-columns:1fr 430px; gap:clamp(40px, 6.4vw, 84px); align-items:center; }
.classic .q-big{ font-family:var(--serif); font-weight:700; font-size:clamp(34px, 4.6vw, 58px); letter-spacing:.1em; color:var(--ink); line-height:1.55; }
.classic .q-src{ margin-top:30px; font-size:13px; letter-spacing:.4em; color:var(--gold-bright); }
.classic .q-rest{ margin-top:56px; padding-top:30px; border-top:1px solid var(--line-soft);
  font-size:15px; line-height:2.3; color:var(--body-c); letter-spacing:.1em; max-width:620px; }
.classic .q-rest i{ font-style:normal; color:var(--gold-bright); font-family:var(--serif); }
.classic .ph{ height:560px; }
.classic .ph-cap{ margin-top:18px; font-size:12px; letter-spacing:.26em; color:var(--dim); display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; }

/* ============ Footer ============ */
.footer{ border-top:1px solid var(--line); padding:clamp(60px, 8vw, 88px) 0 46px; position:relative; background:linear-gradient(180deg, rgba(11,9,8,.4), rgba(11,9,8,0) 60%); }
.footer .vt{ position:absolute; right:clamp(20px, 6.6vw, 96px); top:clamp(60px, 8vw, 88px); color:var(--gold-bright); font-size:15px; }
.footer .fs{ font-family:var(--serif); font-weight:900; font-size:clamp(28px, 3.6vw, 44px); letter-spacing:.16em; color:var(--ink); }
.footer .cols{ margin-top:clamp(40px, 5vw, 64px); display:flex; flex-wrap:wrap; gap:20px 76px; font-size:14px; letter-spacing:.22em; color:var(--body-c); }
.footer .cols a:hover{ color:var(--gold-bright); }
.footer .cols span{ color:var(--dim); font-size:12px; letter-spacing:.3em; margin-right:14px; }
.footer .legal{ margin-top:clamp(40px, 5vw, 64px); padding-top:24px; border-top:1px solid var(--line-soft);
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:12px; letter-spacing:.2em; color:var(--dim); }

/* ============================================================
   响应式
   ============================================================ */

@media (max-width:1280px){
  .hue-wall{ grid-template-columns:repeat(4,1fr); }
  .nav .menu{ margin-left:48px; gap:30px; }
}

@media (max-width:1180px){
  .hero{ grid-template-columns:1fr 440px; gap:48px; }
  .five{ grid-template-columns:repeat(3,1fr); }
  .five .f:nth-child(3n){ border-right:none; }
  .five .f:nth-child(4), .five .f:nth-child(5){ border-top:1px solid var(--line-soft); }
}

@media (max-width:1080px){
  .hero{ grid-template-columns:1fr; gap:56px; }
  .hero .vt-side, .hero .smoke{ display:none; }
  .hero-visual{ max-width:640px; }
  .pricing, .nfc, .jing, .classic{ grid-template-columns:1fr; }
  .nfc-visual{ max-width:520px; }
  .nfc-visual .vt{ right:10px; }
  .jing .ph{ max-width:560px; }
  .classic > div:last-child{ max-width:520px; }
  .classic .ph{ height:auto; aspect-ratio:3/4; }
  .notes-strip{ grid-template-columns:1fr; }
  .notes-strip .ph{ height:340px; max-width:480px; }
}

@media (max-width:980px){
  .cats{ grid-template-columns:1fr; gap:52px; }
  .cat .ph{ height:340px; }
}

/* 移动端导航 */
@media (max-width:920px){
  .hide-m{ display:none; }
  .burger{ display:block; }
  .nav .menu{
    position:fixed; inset:0; z-index:-1;
    margin:0; flex-direction:column; justify-content:center; align-items:center; gap:38px;
    background:rgba(11,9,8,.97);
    opacity:0; visibility:hidden; transform:translateY(-14px);
    transition:opacity .35s, transform .35s, visibility .35s;
  }
  .nav .menu.open{ opacity:1; visibility:visible; transform:none; z-index:-1; }
  .nav .menu a{ font-family:var(--serif); font-size:24px; letter-spacing:.3em; }
  .m-only{ display:inline-block; margin-top:10px; }
  body.menu-open{ overflow:hidden; }
}

@media (max-width:880px){
  .hue-wall{ grid-template-columns:repeat(3,1fr); }
}

@media (max-width:640px){
  .five{ grid-template-columns:1fr; }
  .five .f{ border-right:none; border-top:1px solid var(--line-soft); padding:34px 6px 26px; }
  .five .f:first-child{ border-top:none; }
  .nfc-item{ grid-template-columns:52px 1fr; }
  .nfc-item p{ grid-column:2; }
  .tier-row{ grid-template-columns:1fr auto; }
  .tier-row > div:empty{ display:none; }
  .jing li{ grid-template-columns:1fr; gap:6px; }
  .hero .ctas .btn{ flex:1 1 auto; }
}

@media (max-width:560px){
  .hue-wall{ grid-template-columns:repeat(2,1fr); gap:18px; }
  .hue .sw{ height:110px; }
  .chap-head .note{ margin-left:0; width:100%; padding-bottom:0; }
  .footer .cols{ flex-direction:column; gap:18px; }
}