/* roulang page: index */
:root{
  --ink:#191B19;
  --paper:#F6F4EF;
  --paper-2:#EBE7DF;
  --gold:#B18C5E;
  --text:#2A2A28;
  --muted:#6B665E;
  --white:#F4F1EA;
  --night-muted:#A9A297;
  --line:rgba(25,27,25,.14);
  --line-dark:rgba(244,241,234,.18);
  --error:#B34734;
  --success:#2E6B4F;
  --sold:#99918A;
  --radius:2px;
  --shadow:0 10px 30px rgba(0,0,0,.06);
  --font:"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font-family:var(--font);
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
}
body.no-scroll{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea,select{font-family:inherit;font-size:100%;line-height:1.5;margin:0}
a,button{transition:all .25s ease-out;outline:none}
a:focus-visible,button:focus-visible{
  outline:2px dashed var(--gold);
  outline-offset:4px;
}
section{scroll-margin-top:84px}
.container{
  width:100%;
  max-width:1200px;
  margin-left:auto;
  margin-right:auto;
  padding-left:16px;
  padding-right:16px;
}
@media(min-width:640px){.container{padding-left:24px;padding-right:24px}}
@media(min-width:1024px){.container{padding-left:32px;padding-right:32px}}
.section-pad{padding-top:clamp(4rem,9vw,7rem);padding-bottom:clamp(4rem,9vw,7rem)}
.bg-ink{background:var(--ink)}
.bg-paper{background:var(--paper)}
.bg-paper2{background:var(--paper-2)}
.text-ink{color:var(--ink)}
.text-gold{color:var(--gold)}
.text-muted{color:var(--muted)}
.text-night{color:var(--white)}
h1,h2,h3,h4{color:var(--ink);line-height:1.2;margin-top:0}
.font-h1{font-size:clamp(2.75rem,6vw,4.5rem);font-weight:800;line-height:1.05;letter-spacing:-.01em}
.font-h2{font-size:clamp(2rem,4vw,3.25rem);font-weight:800;line-height:1.15}
.font-h3{font-size:1.4rem;font-weight:700}
.font-note{font-size:.93rem;color:var(--muted)}
.tabular{font-variant-numeric:tabular-nums}

/* Site Header */
.site-header{
  position:fixed;
  top:0;left:0;right:0;z-index:60;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .3s ease-out,border-color .3s ease-out,color .3s ease-out;
}
.site-header .site-head-link,
.site-header .brand-name,
.site-header .nav-drop-btn{color:#F4F1EA}
.site-header.scrolled{
  background:rgba(246,244,239,.92);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.site-header.scrolled .site-head-link,
.site-header.scrolled .brand-name,
.site-header.scrolled .nav-drop-btn{color:var(--ink)}
.brand-mark{flex:0 0 auto;width:40px;height:40px;border:1px solid currentColor;color:var(--gold);display:inline-flex;align-items:center;justify-content:center;margin-right:10px;position:relative}
.brand-mark::before{content:"";width:18px;height:18px;border:1px solid currentColor;transform:rotate(45deg);display:block;background:transparent}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:76px}
.brand-logo{display:flex;align-items:center;gap:0;letter-spacing:.05em;font-weight:800;font-size:20px;white-space:nowrap}
.site-nav{display:flex;align-items:center;gap:6px;margin-left:18px}
.site-head-link{font-size:15px;padding:10px 13px;font-weight:500;letter-spacing:.02em;line-height:1;position:relative}
.site-head-link::after{content:"";position:absolute;left:13px;right:13px;bottom:4px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right center;transition:transform .3s ease-out}
.site-head-link:hover::after{a.true}
.site-head-link:hover::after,.site-head-link.active::after{transform:scaleX(1);transform-origin:left center}
.nav-drop{position:relative}
.nav-drop-btn{display:inline-flex;align-items:center;gap:6px;background:transparent;border:1px solid rgba(244,241,234,.4);border-radius:2px;padding:9px 13px;font-size:15px;letter-spacing:.02em;cursor:pointer;color:var(--white);width:auto}
.site-header.scrolled .nav-drop-btn{border-color:rgba(25,27,25,.2);color:var(--ink)}
.nav-drop-btn svg{transition:transform .25s ease-out}
.nav-drop.open .nav-drop-btn svg,.nav-drop:hover .nav-drop-btn svg{transform:rotate(180deg)}
.drop-panel{
  position:absolute;top:calc(100% + 9px);right:0;min-width:220px;padding:10px;
  background:#fff;border:1px solid var(--line);border-radius:2px;box-shadow:var(--shadow);
  opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .25s ease-out,transform .25s ease-out,visibility .25s;
  z-index:80;
}
.nav-drop:hover .drop-panel,.nav-drop.open .drop-panel{opacity:1;visibility:visible;transform:translateY(0)}
.drop-panel a{display:block;padding:10px 12px;color:var(--ink);font-size:14px;border-bottom:1px solid rgba(25,27,25,.06)}
.drop-panel a:last-child{border-bottom:0}
.drop-panel a:hover{background:var(--paper);color:var(--gold)}
.btn-cta{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 22px;background:var(--ink);color:var(--white);font-size:15px;font-weight:600;border:1px solid var(--ink);border-radius:2px;letter-spacing:.04em;white-space:nowrap;line-height:1}
.site-header:not(.scrolled) .btn-cta{border-color:#F4F1EA;color:#F4F1EA;background:transparent}
.site-header.scrolled .btn-cta{background:var(--ink);color:var(--white);border-color:var(--ink)}
.btn-cta:hover{background:#2C2F2C;border-color:#2C2F2C;transform:translateY(-1px)}
.header-actions{display:flex;align-items:center;gap:8px}
.burger-btn{display:none;width:44px;height:44px;align-items:center;justify-content:center;color:currentColor;background:transparent;border:1px solid rgba(244,241,234,.4);border-radius:2px;cursor:pointer}
.site-header.scrolled .burger-btn{border-color:var(--line);color:var(--ink)}
.burger-btn svg{width:20px;height:20px}
.mobile-nav{display:none;position:fixed;top:76px;left:0;right:0;bottom:0;z-index:55;background:rgba(246,244,239,.98);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding:24px 16px 48px;overflow-y:auto}
.mobile-nav.open{display:block}
.mobile-nav a.site-head-link{display:block;color:var(--ink);font-size:18px;padding:15px 8px;border-bottom:1px solid var(--line);border-radius:0}
.mobile-nav a.site-head-link::after{display:none}
.mobile-cat-title{font-size:13px;letter-spacing:.15em;color:var(--muted);margin:26px 8px 8px}
.mobile-cat-list a{display:block;padding:11px 8px;border-left:2px solid var(--gold);margin:8px 0;color:var(--text);font-size:15px;background:rgba(255,255,255,.4)}

/* Buttons */
.btn-main{
  display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 28px;border-radius:2px;
  background:var(--ink);color:var(--white);font-size:16px;font-weight:600;letter-spacing:.04em;border:1px solid var(--ink);
  gap:8px;cursor:pointer;
}
.btn-main:hover{background:#2C2F2C;border-color:#2C2F2C}
.btn-main svg{transition:transform .25s ease-out}
.btn-main:hover svg{transform:translateX(4px)}
.btn-line{
  display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 28px;border-radius:2px;
  background:transparent;color:var(--ink);font-size:16px;font-weight:600;border:1px solid var(--ink);letter-spacing:.04em;gap:8px;cursor:pointer;
}
.btn-line:hover{background:rgba(25,27,25,.06)}
.btn-hero-main{height:56px;padding:0 32px;background:var(--white);color:var(--ink);border:1px solid var(--white)}
.btn-hero-main:hover{background:#fff;border-color:#fff}
.btn-hero-line{height:56px;padding:0 32px;color:var(--white);border:1px solid rgba(244,241,234,.7)}
.btn-hero-line:hover{background:rgba(244,241,234,.1);border-color:var(--white)}
.btn-disabled,.soldout-btn{background:var(--sold)!important;color:#EDEAE5!important;border-color:var(--sold)!important;cursor:not-allowed!important;pointer-events:none}

/* Hero */
.hero-kv{
  background:#161816;
  position:relative;
  padding-top:clamp(120px,18vh,180px);
  padding-bottom:clamp(90px,15vh,140px);
  color:var(--white);
  background-image:linear-gradient(90deg,rgba(20,21,19,.82) 0%,rgba(20,21,19,.62) 50%,rgba(20,21,19,.46) 100%),url('/assets/images/backpic/back-1.png');
  background-size:cover;background-position:center;
}
@media(max-width:768px){
  .hero-kv{background-image:linear-gradient(180deg,rgba(20,21,19,.84) 0%,rgba(20,21,19,.72) 100%),url('/assets/images/backpic/back-1.png');}
}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,.65fr);gap:56px;align-items:end}
@media(max-width:960px){.hero-grid{grid-template-columns:1fr}}
.hero-eyebrow{display:inline-flex;align-items:center;gap:10px;border:1px solid rgba(244,241,234,.32);color:var(--white);font-size:13px;letter-spacing:.2em;padding:7px 14px;border-radius:9999px;margin-bottom:22px}
.hero-eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--gold);display:inline-block}
.hero-kv h1{color:var(--white);max-width:800px}
.hero-lead{color:var(--night-muted);font-size:18px;line-height:1.9;margin:24px 0 34px;max-width:620px}
.hero-ctas{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.hero-note-right{display:flex;flex-direction:column;gap:14px;padding:30px 28px;border:1px solid rgba(244,241,234,.16);border-top:2px solid var(--gold);background:rgba(244,241,234,.05);border-radius:2px;position:relative}
.hero-note-right .small-line{font-size:13px;color:var(--night-muted);letter-spacing:.12em}
.hero-note-right .time-number{font-size:3.2rem;color:var(--white);font-weight:800;line-height:1.05;font-variant-numeric:tabular-nums}
.hero-note-right .tip{font-size:15px}
.hero-note-right .btn-round{height:48px;padding:0 22px;background:transparent;border:1px solid rgba(244,241,234,.5);color:var(--white);display:flex;justify-content:space-between;align-items:center;border-radius:2px;margin-top:4px;font-size:15px}
.hero-note-right .btn-round:hover{background:rgba(244,241,234,.1)}
.hero-info{display:grid;grid-template-columns:repeat(3,1fr);max-width:760px;color:var(--white);margin-top:64px;gap:0}
.hero-info .mini{padding:0 24px;border-left:1px solid rgba(244,241,234,.2);font-size:14px;color:var(--night-muted)}
.hero-info .mini:first-child{padding-left:0;border-left:0}
.hero-info .mini b,.hero-info .mini strong{color:var(--white);font-weight:600;display:block;font-size:16px;letter-spacing:.02em}
@media(max-width:640px){.hero-info{grid-template-columns:1fr;gap:14px}.hero-info .mini{border-left:0;padding-left:0;border-top:1px solid rgba(244,241,234,.14);padding-top:12px}}

/* reveal */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease-out,transform .7s ease-out;will-change:opacity,transform}
.reveal.is-visible{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto}.reveal{opacity:1;transform:none}}

/* stats band */
.stats-band{border-bottom:1px solid var(--line);background:#FDFCFA}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:58px 0}
.stats-grid .stat{position:relative;padding-left:26px}
.stats-grid .stat::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;background:var(--gold)}
.stats-grid .stat b{display:block;font-size:clamp(2rem,3vw,2.8rem);font-weight:800;color:var(--ink);line-height:1.1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stats-grid .stat span{color:var(--muted);font-size:.95rem}
@media(max-width:920px){.stats-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.stats-grid{grid-template-columns:1fr}}

/* section heading */
.sec-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:clamp(36px,6vw,60px)}
.sec-kicker{display:flex;align-items:center;gap:14px;color:var(--gold);font-size:13px;letter-spacing:.16em;margin:0 0 16px}
.sec-kicker::before{content:"";width:34px;height:1px;background:var(--gold);display:inline-block}
.sec-heading h2{margin:0 0 8px}
.sec-heading-note{max-width:380px;color:var(--muted);font-size:15px;border-left:1px solid var(--line);padding-left:22px;margin:0;align-self:center}
@media(max-width:880px){.sec-heading{flex-direction:column;align-items:flex-start}.sec-heading-note{border-left:0;padding-left:0;max-width:520px}}

/* agenda */
.agenda-wrap{display:grid;grid-template-columns:1fr 1.9fr;gap:40px}
@media(max-width:980px){.agenda-wrap{grid-template-columns:1fr}}
.day-tabs{display:flex;gap:14px;margin-bottom:24px;border-bottom:1px solid var(--line)}
.day-tab{appearance:none;background:transparent;border:0;font-size:15px;color:var(--muted);padding:12px 2px;margin-right:22px;border-bottom:2px solid transparent;cursor:pointer;display:flex;align-items:center;gap:8px;letter-spacing:.02em}
.day-tab:hover{color:var(--ink)}
.day-tab.active{color:var(--ink);font-weight:700;border-bottom-color:var(--gold)}
.timeline-panel{display:none}
.timeline-panel.active{display:block}
.timeline-row{display:grid;grid-template-columns:140px 1fr auto;gap:24px;padding:26px 14px;border-bottom:1px solid var(--line);transition:background .25s ease-out;align-items:start;border-left:2px solid transparent}
.timeline-row:hover{background:rgba(235,231,223,.4);border-left-color:var(--gold)}
.timeline-row:first-child{border-top:1px solid var(--line)}
.timeline-time{font-weight:700;font-size:16px;color:var(--text);font-variant-numeric:tabular-nums;line-height:1.4}
.timeline-title{font-size:17px;color:var(--ink);font-weight:700;line-height:1.5;margin:0 0 4px}
.timeline-place{font-size:.88rem;color:var(--muted);line-height:1.7}
.timeline-tag{display:inline-flex;align-items:center;justify-content:center;height:24px;padding:0 12px;border:1px solid rgba(25,27,25,.2);font-size:12px;color:var(--muted);border-radius:9999px;white-space:nowrap}
.remind-link{position:relative;margin-top:12px;color:var(--ink);font-size:13px;display:grid;grid-template-columns:auto auto;gap:4px;align-items:center;width:max-content;background:none;border:0;padding:6px 0;cursor:pointer}
@media(max-width:700px){.timeline-row{grid-template-columns:1fr}.timeline-time{font-size:14px;margin-bottom:2px}.timeline-tag{grid-column:1}}

/* guest cards & highlights */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:960px){.card-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.card-grid{grid-template-columns:1fr}}
.guest-card{border:1px solid var(--line);background:rgba(255,255,255,.55);border-radius:2px;overflow:hidden;display:flex;flex-direction:column;transition:border-color .25s ease-out,box-shadow .25s ease-out,transform .25s}
.guest-card:hover{border-color:rgba(25,27,25,.28);box-shadow:var(--shadow);transform:translateY(-2px)}
.card-img-wrap{aspect-ratio:4/3;overflow:hidden;background:var(--paper-2);position:relative}
.card-img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease-out}
.guest-card:hover .card-img{transform:scale(1.05)}
.img-comp{position:relative;display:flex;align-items:center;justify-content:center}
.img-comp span{position:absolute;left:14px;bottom:12px;color:rgba(255,255,255,.92);font-size:14px;font-weight:600;letter-spacing:.06em;background:rgba(0,0,0,.35);padding:5px 10px;border:1px solid rgba(255,255,255,.3);border-radius:2px;line-height:1.4;z-index:2}
.card-body{padding:22px}
.card-tag{display:inline-flex;font-size:12px;color:var(--gold);border:1px solid rgba(177,140,94,.5);padding:3px 10px;border-radius:9999px;letter-spacing:.1em;margin-bottom:12px;background:transparent}
.card-body h3{margin:0 0 10px;font-size:19px;font-weight:800}
.card-body p{font-size:14px;color:var(--muted);line-height:1.8;margin:0}

.bullets-point{display:grid;grid-template-columns:auto max-content;gap:18px;padding:18px 0;border-bottom:1px solid var(--line)}
.bullets-point:first-child{border-top:1px solid var(--line)}
.bullets-point .num{font-size:15px;color:var(--gold);font-weight:800;font-variant-numeric:tabular-nums}
.bullets-point .text{font-size:16px;line-height:1.7;color:var(--text)}

/* tickets */
.ticket-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;align-items:stretch}
@media(max-width:980px){.ticket-grid{grid-template-columns:1fr}}
.ticket-card{display:flex;flex-direction:column;padding:34px 30px 30px;background:rgba(255,255,255,.62);border:1px solid var(--line);border-radius:2px;position:relative;transition:box-shadow .25s,border-color .25s}
.ticket-card:hover{border-color:rgba(25,27,25,.25);box-shadow:var(--shadow)}
.ticket-ribbon{position:absolute;top:-10px;left:24px;background:var(--gold);color:#fff;font-size:12px;letter-spacing:.14em;padding:5px 12px;border-radius:9999px;font-weight:600}
.ticket-name{font-size:15px;color:var(--muted);font-weight:500;letter-spacing:.1em;margin-bottom:8px}
.ticket-price{display:flex;align-items:baseline;gap:4px}
.ticket-price .symbol{font-size:20px;color:var(--gold);font-weight:700}
.ticket-price .num{font-size:3.4rem;font-weight:800;color:var(--ink);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.ticket-price .unit{margin-left:6px;font-size:14px;color:var(--muted)}
.ticket-des{font-size:14px;color:var(--muted);line-height:1.7;margin:16px 0 22px}
.ticket-list{margin:0 0 30px;padding:0;list-style:none}
.ticket-list li{position:relative;padding-left:20px;font-size:15px;line-height:1.75;color:var(--text);border-bottom:1px dashed rgba(25,27,25,.1);padding-top:8px;padding-bottom:8px}
.ticket-list li::before{content:"✓";position:absolute;left:0;color:var(--gold);font-weight:700}
.ticket-list li.sold::before{content:"—";color:var(--sold)}
.ticket-card.special{background:var(--ink);border-color:var(--ink);color:var(--white)}
.ticket-card.special .ticket-name{color:var(--night-muted)}
.ticket-card.special .ticket-price .num,.ticket-card.special h3{color:var(--white)}
.ticket-card.special .ticket-des,.ticket-card.special .ticket-list li{color:var(--white);border-bottom-color:rgba(244,241,234,.18)}
.ticket-card.special .btn-main{background:var(--white);color:var(--ink);border-color:var(--white)}
.ticket-card.special .btn-main:hover{background:#e6dfd3}

/* faq */
.faq-layout{display:grid;grid-template-columns:.75fr 1.25fr;gap:56px}
@media(max-width:980px){.faq-layout{grid-template-columns:1fr}}
.faq-list{border-top:1px solid var(--line)}
.faq-item{position:relative}
.faq-item::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--gold);opacity:0;transition:opacity .25s}
.faq-item.open::before{opacity:1}
.faq-q{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;background:none;border:0;padding:18px 8px;min-height:54px;font-size:17px;font-weight:600;text-align:left;color:var(--ink);cursor:pointer;border-bottom:1px solid var(--line)}
.faq-icon{flex:0 0 auto;width:24px;height:24px;position:relative;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(25,27,25,.25);border-radius:50%;transition:transform .25s ease-out,border-color .25s}
.faq-icon::before{content:"";width:10px;height:1px;background:var(--gold)}
.faq-icon::after{content:"";width:1px;height:10px;background:var(--gold);position:absolute;transition:opacity .2s}
.faq-item.open .faq-icon::after{opacity:0}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease-out,padding .3s ease-out;padding:0 8px;border-bottom:1px solid transparent;line-height:1.9;color:var(--muted);font-size:15px}
.faq-item.open .faq-a{max-height:620px;padding:0 8px 22px;border-bottom-color:var(--line)}

/* bookmark CTA */
.book-section{background:var(--paper-2);position:relative;overflow:hidden}
.book-section::before{content:"尊龙官方";position:absolute;right:14px;bottom:10px;font-size:clamp(80px,14vw,130px);font-weight:800;color:rgba(25,27,25,.045);line-height:1;pointer-events:none;letter-spacing:-.05em;white-space:nowrap}
.book-layout{display:grid;grid-template-columns:1.15fr .85fr;gap:38px;position:relative;z-index:2}
@media(max-width:980px){.book-layout{grid-template-columns:1fr}}
.form-panel{background:#fff;border:1px solid var(--line);border-radius:2px;padding:28px 24px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px}
@media(max-width:640px){.form-grid{grid-template-columns:1fr}}
.form-group{display:flex;flex-direction:column;gap:6px}
.form-group.full{grid-column:1/-1}
.form-label{font-size:14px;color:var(--ink);font-weight:600}
.form-control{height:48px;background:#F1EEE8;border:1px solid transparent;padding:0 14px;font-size:15px;border-radius:2px;color:var(--ink);width:100%;transition:background .2s,border-color .2s}
.form-control:focus{background:#fff;border-color:var(--ink);outline:none}
.form-control.error{border-color:var(--error);background:#FBF4F1}
.form-help{font-size:13px;color:var(--muted);line-height:1.6}
.form-help.error-text{display:none;color:var(--error)}
.form-btns{text-align:right;padding-top:18px}
.success-block{display:none;text-align:center;padding:28px 10px;border:1px dashed var(--success);background:#F0F5F0;border-radius:2px}
.success-block.show{display:block}
.success-block i{display:block;width:44px;height:44px;border:2px solid var(--success);border-radius:50%;margin:0 auto 14px;position:relative}
.success-block i::after{content:"✓";color:var(--success);font-size:24px;position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:800}
.side-note{background:#fff;border:1px solid var(--line);border-top:3px solid var(--gold);padding:26px 24px;margin-bottom:18px}
.side-note h4{margin:0 0 10px;font-size:18px}
.side-note p{margin:0;font-size:14px;color:var(--muted);line-height:1.8}
.side-list{list-style:none;padding:0;margin:0}
.side-list li{font-size:14px;color:var(--text);padding:11px 0;border-bottom:1px dashed rgba(25,27,25,.14);line-height:1.7;padding-left:20px;position:relative}
.side-list li:last-child{border-bottom:0}
.side-list li::before{content:"";position:absolute;left:0;top:20px;width:7px;height:7px;border-radius:50%;background:var(--gold)}

/* news list */
.news-list{border-top:1px solid var(--line)}
.news-row{display:grid;grid-template-columns:150px 130px 1fr 40px;align-items:center;gap:18px;padding:20px 10px;border-bottom:1px solid var(--line);background:transparent;transition:background .25s,padding-left .25s;border-left:2px solid transparent;color:var(--text)}
.news-row:hover{background:#fff;border-left-color:var(--gold);padding-left:18px}
.news-date{color:var(--muted);font-size:14px;font-variant-numeric:tabular-nums}
.news-tag{display:inline-flex;width:auto;color:var(--gold);border:1px solid rgba(177,140,94,.45);font-size:12px;padding:4px 10px;border-radius:9999px;justify-self:start;letter-spacing:.04em}
.news-title{font-size:16px;font-weight:600;line-height:1.6;overflow:hidden}
.news-arrow{color:var(--ink);font-size:20px;text-align:right;justify-self:end;transition:transform .25s ease-out}
.news-row:hover .news-arrow{transform:translateX(6px)}
@media(max-width:760px){.news-row{grid-template-columns:1fr auto;gap:8px 14px}.news-date{grid-column:1}.news-arrow{grid-column:2;grid-row:1/3}.news-tag{grid-row:2;grid-column:1}.news-title{grid-column:1/-1;grid-row:auto;font-size:16px}}
.news-empty{border:1px dashed rgba(25,27,25,.2);padding:40px 20px;text-align:center;color:var(--muted);font-size:15px;border-radius:2px;background:rgba(255,255,255,.3);margin-top:20px}

/* Footer */
.site-footer{background:var(--ink);color:var(--night-muted);padding-top:60px;border-top:2px solid var(--gold);margin-top:0}
.footer-grid{display:grid;grid-template-columns:1.2fr .8fr .8fr 1fr;gap:36px;padding-bottom:42px}
@media(max-width:960px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.footer-grid{grid-template-columns:1fr}}
.site-footer .brand-logo{color:var(--white);margin-bottom:16px}
.site-footer p{font-size:14px;line-height:1.9;margin:0 0 12px}
.footer-title{color:var(--white);font-size:15px;letter-spacing:.12em;margin:0 0 20px;display:flex;align-items:center;gap:8px}
.footer-title::after{content:"";width:22px;height:1px;background:var(--gold)}
.footer-links{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:0}
.footer-links a{color:var(--night-muted);font-size:14px;padding:5px 0;display:inline-block;position:relative}
.footer-links a:hover{color:var(--white)}
.footer-links a::after{content:"";position:absolute;left:0;bottom:1px;height:1px;width:100%;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .25s}
.footer-links a:hover::after{transform:scaleX(1);transform-origin:left}
.footer-bottom{border-top:1px solid rgba(244,241,234,.16);padding:20px 0;display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;font-size:13px;color:var(--night-muted)}
@media(max-width:640px){.footer-bottom{flex-direction:column;align-items:flex-start}}

/* Section visual framing */
.block-wrap{background:#FDFCFA;border-bottom:1px solid var(--line)}
.soft-band{background:var(--paper);border-bottom:1px solid var(--line)}
.copy-title h2{margin-bottom:18px}
.copy-title p{color:var(--muted);font-size:16px;line-height:1.9}
.side-callout{border-left:3px solid var(--gold);padding-left:20px;color:var(--text);max-width:520px}

/* roulang page: article */
:root {
            --ink: #191B19;
            --ink-soft: #2A2D2A;
            --paper: #F6F4EF;
            --mist: #EBE7DF;
            --gold: #B18C5E;
            --text: #2A2A28;
            --muted: #6B665E;
            --line: rgba(25, 27, 25, .14);
            --line-dark: rgba(244, 241, 234, .18);
            --dark-paper: #F4F1EA;
            --dark-muted: #A9A297;
            --error: #B34734;
            --success: #2E6B4F;
            --disabled: #99918A;
            --radius-md: 2px;
            --shadow-card: 0 10px 30px rgba(0, 0, 0, .06);
        }

        *,
        *::before,
        *::after {
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
            scroll-padding-top: 96px;
        }

        body {
            background: var(--paper);
            color: var(--text);
            font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
            line-height: 1.7;
            margin: 0;
            padding-top: 76px;
            font-size: 16px;
            -webkit-font-smoothing: antialiased;
            text-rendering: optimizeLegibility;
        }

        img {
            display: block;
            max-width: 100%;
            border: 0;
        }

        a {
            text-decoration: none;
            color: inherit;
        }

        button,
        input,
        select,
        textarea {
            font-family: inherit;
            font-size: inherit;
            border: 0;
            background: none;
            color: inherit;
        }

        button {
            cursor: pointer;
        }

        button:focus-visible,
        a:focus-visible,
        input:focus-visible {
            outline: 2px dashed var(--gold);
            outline-offset: 3px;
        }

        ::selection {
            background: rgba(177, 140, 94, .22);
        }

        .container {
            width: 100%;
            max-width: 1200px;
            margin-left: auto;
            margin-right: auto;
            padding-left: clamp(1rem, 4vw, 2rem);
            padding-right: clamp(1rem, 4vw, 2rem);
        }

        .site-header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 80;
            height: 76px;
            background: rgba(246, 244, 239, .92);
            -webkit-backdrop-filter: blur(14px);
            backdrop-filter: blur(14px);
            border-bottom: 1px solid var(--line);
            transition: background .25s ease-out, border-color .25s ease-out;
        }

        .site-header .header-inner {
            height: 76px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 1rem;
        }

        .brand-logo {
            display: inline-flex;
            align-items: center;
            gap: .65rem;
            transition: opacity .2s ease-out;
        }

        .brand-logo:hover {
            opacity: .85;
        }

        .brand-mark {
            width: 38px;
            height: 38px;
            background: var(--ink);
            border: 1px solid rgba(244, 241, 234, .34);
            position: relative;
            display: inline-block;
            flex: none;
            overflow: hidden;
            border-radius: 2px;
        }

        .brand-mark::before {
            content: "";
            position: absolute;
            inset: 7px;
            border: 1px solid var(--gold);
            border-radius: 1px;
            transform: skewY(-6deg);
            opacity: .9;
        }

        .brand-mark::after {
            content: "";
            position: absolute;
            right: 5px;
            bottom: 5px;
            width: 10px;
            height: 10px;
            background: var(--gold);
            clip-path: polygon(100% 0, 100% 100%, 0 100%);
            opacity: .8;
        }

        .brand-name {
            font-size: 1.24rem;
            font-weight: 800;
            color: var(--ink);
            letter-spacing: .04em;
            white-space: nowrap;
        }

        .site-nav {
            display: flex;
            align-items: center;
            gap: 1.75rem;
            position: relative;
        }

        .site-head-link {
            position: relative;
            font-size: .95rem;
            color: var(--text);
            transition: color .2s ease-out;
            padding: .3rem 0;
        }

        .site-head-link::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: -2px;
            width: 0;
            height: 1px;
            background: var(--gold);
            transition: width .25s ease-out;
        }

        .site-head-link:hover::after,
        .site-head-link.active::after {
            width: 100%;
        }

        .site-head-link.active {
            color: var(--ink);
            font-weight: 600;
        }

        .nav-drop {
            position: relative;
        }

        .nav-drop-btn {
            display: inline-flex;
            align-items: center;
            gap: .35rem;
            padding: .3rem .8rem;
            border: 1px solid var(--line);
            background: rgba(25, 27, 25, .04);
            border-radius: var(--radius-md);
            cursor: pointer;
            transition: border-color .2s ease-out, background .2s ease-out;
            white-space: nowrap;
        }

        .nav-drop-btn:hover,
        .nav-drop.open .nav-drop-btn {
            border-color: rgba(25, 27, 25, .4);
            background: rgba(25, 27, 25, .06);
        }

        .nav-drop-btn svg {
            transition: transform .22s ease-out;
        }

        .nav-drop.open .nav-drop-btn svg {
            transform: rotate(180deg);
        }

        .drop-panel {
            position: absolute;
            top: calc(100% + 8px);
            right: 0;
            width: 188px;
            background: var(--paper);
            border: 1px solid var(--line);
            box-shadow: var(--shadow-card);
            opacity: 0;
            transform: translateY(-8px);
            pointer-events: none;
            transition: opacity .22s ease-out, transform .22s ease-out;
            z-index: 5;
        }

        .nav-drop.open .drop-panel {
            opacity: 1;
            transform: translateY(0);
            pointer-events: auto;
        }

        .drop-panel a {
            display: flex;
            align-items: center;
            padding: .85rem 1rem .85rem 1rem;
            border-bottom: 1px solid var(--line);
            font-size: .9rem;
            color: var(--text);
            line-height: 1.4;
            transition: background .16s ease-out, padding-left .16s ease-out;
        }

        .drop-panel a:last-child {
            border-bottom: 0;
        }

        .drop-panel a::before {
            content: "";
            width: 4px;
            height: 4px;
            background: var(--gold);
            margin-right: .55rem;
            flex: none;
            border-radius: 50%;
        }

        .drop-panel a:hover {
            background: var(--mist);
            padding-left: 1.3rem;
        }

        .header-actions {
            display: flex;
            align-items: center;
            gap: .65rem;
        }

        .btn-cta {
            height: 44px;
            padding: 0 1.5rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: .45rem;
            background: var(--ink);
            color: var(--paper);
            font-size: .95rem;
            font-weight: 600;
            border-radius: var(--radius-md);
            transition: background .22s ease-out, transform .22s ease-out;
            white-space: nowrap;
        }

        .btn-cta:hover {
            background: var(--ink-soft);
        }

        .btn-cta svg {
            width: 15px;
            height: 15px;
            transition: transform .22s ease-out;
        }

        .btn-cta:hover svg {
            transform: translateX(3px);
        }

        .burger-btn {
            display: none;
            width: 44px;
            height: 44px;
            align-items: center;
            justify-content: center;
            border: 1px solid var(--line);
            background: var(--paper);
            color: var(--ink);
            border-radius: var(--radius-md);
        }

        .burger-btn svg {
            width: 22px;
            height: 22px;
            pointer-events: none;
        }

        .page-head {
            background: var(--mist);
            border-bottom: 1px solid var(--line);
            padding-top: clamp(2.2rem, 5vw, 3.4rem);
            padding-bottom: clamp(1.4rem, 3vw, 2.2rem);
            min-height: 0;
        }

        .breadcrumbs {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: .5rem;
            font-size: .82rem;
            color: var(--muted);
            letter-spacing: .02em;
        }

        .breadcrumbs a {
            transition: color .18s ease-out;
        }

        .breadcrumbs a:hover {
            color: var(--gold);
        }

        .breadcrumbs span {
            color: rgba(25, 27, 25, .24);
        }

        .page-kicker {
            margin-top: 1.1rem;
            font-size: .82rem;
            color: var(--gold);
            letter-spacing: .18em;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: .45rem;
        }

        .page-kicker::before {
            content: "";
            width: 22px;
            height: 1px;
            background: var(--gold);
        }

        .article-hero {
            padding-top: clamp(2.4rem, 5vw, 4rem);
            padding-bottom: clamp(1.8rem, 4vw, 3rem);
        }

        .article-hero .article-title {
            font-size: clamp(1.95rem, 4.6vw, 3.15rem);
            line-height: 1.28;
            font-weight: 800;
            letter-spacing: -0.01em;
            color: var(--ink);
            max-width: 960px;
            margin: .35rem 0 1.1rem 0;
        }

        .article-meta {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: .9rem 1.4rem;
            font-size: .84rem;
            color: var(--muted);
            font-variant-numeric: tabular-nums;
        }

        .article-meta .cat-chip {
            display: inline-flex;
            align-items: center;
            padding: .25rem .65rem;
            border: 1px solid var(--line);
            border-radius: 999px;
            transition: border-color .18s ease-out, color .18s ease-out;
        }

        .article-meta .cat-chip:hover {
            border-color: var(--gold);
            color: var(--ink);
        }

        .article-meta-left,
        .article-meta-right {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: .8rem;
        }

        .dot-sep {
            width: 3px;
            height: 3px;
            background: rgba(25, 27, 25, .28);
            border-radius: 50%;
            flex: none;
        }

        .article-main {
            padding: clamp(2rem, 4vw, 3.4rem) 0 clamp(2.6rem, 6vw, 5rem);
        }

        .article-sheet {
            max-width: 760px;
            margin-left: auto;
            margin-right: auto;
        }

        .post-intro {
            font-size: 1.12rem;
            line-height: 1.9;
            color: var(--text);
            border-left: 2px solid var(--gold);
            padding-left: 1.2rem;
            margin-bottom: 2rem;
        }

        .post-content {
            color: #32322F;
            font-size: 16.5px;
            line-height: 1.95;
            word-break: break-word;
            overflow-wrap: anywhere;
        }

        .post-content p {
            margin: 0 0 1.35rem;
        }

        .post-content h2,
        .post-content h3 {
            color: var(--ink);
            font-weight: 800;
            line-height: 1.4;
            letter-spacing: -0.01em;
            margin: 2.25rem 0 1rem;
        }

        .post-content h2 {
            font-size: 1.65rem;
        }

        .post-content h3 {
            font-size: 1.22rem;
        }

        .post-content img,
        .post-content figure img {
            max-width: 100%;
            height: auto;
            border-radius: 2px;
            margin: 1.8rem auto;
            box-shadow: 0 6px 18px rgba(0, 0, 0, .06);
        }

        .post-content figure {
            margin: 1.8rem auto;
        }

        .post-content figcaption {
            text-align: center;
            font-size: .78rem;
            color: var(--muted);
            margin-top: -1rem;
            margin-bottom: 1.5rem;
        }

        .post-content ul,
        .post-content ol {
            margin: 1rem 0 1.5rem;
            padding: 0;
            list-style: none;
        }

        .post-content ul li {
            position: relative;
            padding-left: 1.45rem;
            margin: .5rem 0;
        }

        .post-content ul li::before {
            content: "";
            position: absolute;
            left: .15rem;
            top: .85em;
            width: 7px;
            height: 1px;
            background: var(--gold);
        }

        .post-content ol {
            counter-reset: numbered;
        }

        .post-content ol li {
            counter-increment: numbered;
            margin: .5rem 0;
            padding-left: 2.2rem;
            position: relative;
        }

        .post-content ol li::before {
            content: counter(numbered) ".";
            position: absolute;
            left: .2rem;
            color: var(--gold);
            font-weight: 700;
            font-variant-numeric: tabular-nums;
        }

        .post-content blockquote {
            margin: 1.8rem 0;
            padding: 1.1rem 1.4rem;
            background: var(--mist);
            border-left: 2px solid var(--gold);
            color: #41413D;
            font-size: 1rem;
            border-radius: 0 2px 2px 0;
        }

        .post-content blockquote p:last-child {
            margin-bottom: 0;
        }

        .post-content a {
            color: #8A6A42;
            border-bottom: 1px solid rgba(177, 140, 94, .45);
            transition: border-color .18s ease-out, color .18s ease-out;
        }

        .post-content a:hover {
            color: var(--gold);
            border-color: var(--gold);
        }

        .post-content hr {
            border: 0;
            border-top: 1px solid var(--line);
            margin: 2.4rem 0;
        }

        .post-content table {
            width: 100%;
            border-collapse: collapse;
            margin: 1.6rem 0;
            font-size: .92rem;
        }

        .post-content th,
        .post-content td {
            border: 1px solid var(--line);
            padding: .75rem .9rem;
            text-align: left;
            vertical-align: top;
        }

        .post-content th {
            background: var(--mist);
            font-weight: 600;
            color: var(--ink);
        }

        .post-tags {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            margin-top: 2.6rem;
            gap: .6rem;
            padding-top: 1.7rem;
            border-top: 1px solid var(--line);
        }

        .post-tags b {
            font-size: .82rem;
            color: var(--muted);
            font-weight: 600;
            letter-spacing: .08em;
        }

        .post-tags span {
            display: inline-flex;
            align-items: center;
            padding: .25rem .8rem;
            border: 1px solid var(--line);
            font-size: .82rem;
            color: var(--muted);
            border-radius: 999px;
        }

        .post-bottom-rail {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: .8rem 1rem;
            margin-top: 2.1rem;
        }

        .back-link {
            display: inline-flex;
            align-items: center;
            gap: .5rem;
            font-size: .9rem;
            color: var(--ink);
            font-weight: 500;
            transition: gap .22s ease-out;
        }

        .back-link:hover {
            gap: .7rem;
        }

        .back-link svg {
            flex: none;
        }

        .cta-band {
            background: var(--ink);
            color: var(--dark-paper);
            padding-top: clamp(3rem, 7vw, 5.5rem);
            padding-bottom: clamp(3rem, 7vw, 5.5rem);
            position: relative;
            overflow: hidden;
        }

        .cta-band::before {
            content: "";
            position: absolute;
            top: -120px;
            right: -60px;
            width: 340px;
            height: 340px;
            border: 1px solid rgba(177, 140, 94, .28);
            transform: rotate(36deg);
            pointer-events: none;
        }

        .cta-band::after {
            content: "";
            position: absolute;
            bottom: -160px;
            left: -80px;
            width: 320px;
            height: 320px;
            border: 1px solid rgba(244, 241, 234, .1);
            transform: rotate(20deg);
            pointer-events: none;
        }

        .cta-band .cta-inner {
            position: relative;
            z-index: 2;
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            gap: 2rem;
            flex-wrap: wrap;
        }

        .cta-eyebrow {
            display: flex;
            align-items: center;
            gap: .6rem;
            font-size: .82rem;
            color: var(--gold);
            letter-spacing: .18em;
            text-transform: uppercase;
        }

        .cta-eyebrow::before {
            content: "";
            width: 26px;
            height: 1px;
            background: var(--gold);
        }

        .cta-title {
            font-size: clamp(1.8rem, 4vw, 2.7rem);
            font-weight: 800;
            line-height: 1.25;
            letter-spacing: -0.01em;
            margin: .6rem 0 .6rem 0;
            max-width: 650px;
        }

        .cta-band p {
            color: var(--dark-muted);
            max-width: 560px;
            font-size: .98rem;
            line-height: 1.8;
            margin: 0;
        }

        .btn-light,
        .btn-dark {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            height: 52px;
            padding: 0 1.8rem;
            font-size: .98rem;
            font-weight: 600;
            border-radius: var(--radius-md);
            transition: background .2s ease-out, color .2s ease-out, transform .2s ease-out;
            white-space: nowrap;
        }

        .btn-light {
            background: var(--paper);
            color: var(--ink);
        }

        .btn-light:hover {
            background: #fff;
            transform: translateY(-1px);
        }

        .btn-light svg,
        .btn-dark svg {
            margin-left: .35rem;
            transition: transform .22s ease-out;
        }

        .btn-light:hover svg {
            transform: translateX(3px);
        }

        .btn-dark {
            background: var(--ink);
            color: var(--paper);
        }

        .btn-dark:hover {
            background: var(--ink-soft);
            transform: translateY(-1px);
        }

        .not-found-wrap {
            padding: 4rem 0 5rem;
        }

        .not-found-box {
            text-align: center;
            max-width: 640px;
            margin: 0 auto;
            padding: clamp(2rem, 5vw, 4rem);
            border: 1px dashed rgba(25, 27, 25, .32);
            background: rgba(255, 255, 255, .35);
        }

        .not-found-box .nf-code {
            color: var(--gold);
            font-size: .86rem;
            letter-spacing: .22em;
            font-weight: 700;
            display: block;
        }

        .not-found-box h1 {
            font-size: clamp(2rem, 5vw, 3rem);
            font-weight: 800;
            margin: .7rem 0;
            color: var(--ink);
        }

        .not-found-box p {
            color: var(--muted);
            margin: 0 0 1.6rem;
        }

        .not-found-actions {
            display: flex;
            justify-content: center;
            gap: .8rem;
            flex-wrap: wrap;
        }

        .site-footer {
            background: var(--ink);
            color: var(--dark-paper);
            padding-top: 3.4rem;
            padding-bottom: 1.6rem;
        }

        .site-footer .footer-grid {
            display: grid;
            grid-template-columns: 1.3fr 1fr 1fr 1.35fr;
            gap: 2.5rem;
            padding-bottom: 2.4rem;
            border-bottom: 1px solid var(--line-dark);
        }

        .site-footer p {
            font-size: .92rem;
            color: var(--dark-muted);
            line-height: 1.85;
            margin: 0;
            max-width: 300px;
        }

        .footer-title {
            font-size: .82rem;
            color: var(--gold);
            font-weight: 600;
            letter-spacing: .16em;
            margin-bottom: 1.1rem;
        }

        .footer-links {
            list-style: none;
            padding: 0;
            margin: 0;
            display: grid;
            gap: .1rem;
        }

        .footer-links a {
            display: inline-flex;
            align-items: center;
            color: var(--dark-muted);
            font-size: .92rem;
            padding: .35rem 0;
            position: relative;
            transition: color .18s ease-out;
        }

        .footer-links a:hover {
            color: var(--dark-paper);
            text-decoration: underline;
            text-underline-offset: 4px;
            text-decoration-color: rgba(244, 241, 234, .38);
        }

        .site-footer .brand-name {
            color: var(--dark-paper);
        }

        .site-footer .footer-grid .brand-logo {
            margin-bottom: .3rem;
        }

        .footer-bottom {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: .6rem;
            padding-top: 1.5rem;
            color: var(--dark-muted);
            font-size: .8rem;
        }

        .footer-bottom span {
            display: inline-flex;
            align-items: center;
        }

        .footer-bottom span:last-child::before {
            content: "";
            width: 3px;
            height: 3px;
            background: var(--gold);
            border-radius: 50%;
            margin-right: .6rem;
        }

        @media (prefers-reduced-motion: reduce) {
            *,
            *::before,
            *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                scroll-behavior: auto !important;
                transition-duration: 0.01ms !important;
            }
        }

        @media (max-width: 1024px) {
            .site-nav {
                gap: .9rem;
            }
            .site-footer .footer-grid {
                grid-template-columns: 1fr 1fr;
                gap: 2rem;
            }
        }

        @media (max-width: 860px) {
            body {
                padding-top: 64px;
            }

            .site-header,
            .site-header .header-inner {
                height: 64px;
            }

            .site-header .header-inner {
                gap: .6rem;
            }

            .brand-mark {
                width: 30px;
                height: 30px;
            }

            .brand-mark::before {
                inset: 5px;
            }

            .brand-name {
                font-size: 1.08rem;
            }

            .site-nav {
                position: fixed;
                top: 64px;
                left: 0;
                right: 0;
                display: flex;
                align-items: stretch;
                align-content: flex-start;
                flex-wrap: wrap;
                gap: .2rem;
                flex-direction: row;
                background: rgba(246, 244, 239, .98);
                border-bottom: 1px solid var(--line);
                padding: .65rem 1rem 1rem;
                z-index: 90;
                transform: translateY(-10px);
                opacity: 0;
                pointer-events: none;
                transition: transform .22s ease-out, opacity .22s ease-out;
            }

            .site-nav.open {
                transform: translateY(0);
                opacity: 1;
                pointer-events: auto;
            }

            .site-head-link {
                flex: 1 1 28%;
                font-size: .9rem;
                padding: .6rem .2rem;
                text-align: center;
                border-radius: 2px;
                border: 1px solid transparent;
            }

            .site-head-link:hover {
                background: var(--mist);
            }

            .site-head-link::after {
                display: none;
            }

            .nav-drop {
                flex: 0 0 100%;
                margin-top: .55rem;
            }

            .nav-drop-btn {
                width: 100%;
                justify-content: space-between;
                padding: .65rem .9rem;
                background: transparent;
                border-color: var(--line);
            }

            .drop-panel {
                position: static;
                opacity: 1;
                transform: none;
                pointer-events: auto;
                box-shadow: none;
                width: 100%;
                display: none;
                border: 1px solid var(--line);
                margin-top: .5rem;
            }

            .nav-drop.open .drop-panel {
                display: block;
            }

            .drop-panel a {
                border-bottom: 1px solid var(--line);
            }

            .burger-btn {
                display: flex;
            }
        }

        @media (max-width: 640px) {
            .article-hero .article-title {
                line-height: 1.33;
            }

            .article-meta {
                display: block;
            }

            .article-meta-left,
            .article-meta-right {
                margin-bottom: .2rem;
            }

            .article-meta-left {
                margin-bottom: .75rem;
            }

            .site-footer .footer-grid {
                grid-template-columns: 1fr;
                gap: 2rem;
            }

            .cta-inner {
                align-items: flex-start;
                flex-direction: column;
            }

            .not-found-actions {
                flex-direction: column;
            }

            .not-found-actions .btn-dark,
            .not-found-actions .btn-light {
                width: 100%;
            }
        }

        @media (max-width: 460px) {
            .btn-cta {
                padding: 0 1.15rem;
                height: 44px;
                font-size: .9rem;
            }

            .btn-cta svg {
                display: none;
            }

            .brand-name {
                letter-spacing: .02em;
            }

            .post-content {
                font-size: 1rem;
                line-height: 1.9;
            }
        }

/* roulang page: category1 */
:root{
            --ink:#191B19;
            --paper:#F6F4EF;
            --sand:#EBE7DF;
            --gold:#B18C5E;
            --text:#2A2A28;
            --text-soft:#6B665E;
            --line:rgba(25,27,25,.14);
            --line-light:rgba(244,241,234,.18);
            --ok:#2E6B4F;
            --error:#B34734;
        }
        *,*::before,*::after{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{
            margin:0;
            background:var(--paper);
            color:var(--text);
            font-family:"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
            line-height:1.8;
            -webkit-font-smoothing:antialiased;
            font-size:16px;
        }
        h1,h2,h3,h4,p,ul,ol,figure{margin:0}
        img{max-width:100%;display:block;border:0}
        a{color:inherit;text-decoration:none}
        button,input,select{font:inherit;color:inherit}
        ul,ol{list-style:none;padding:0}
        .container{width:100%;max-width:1200px !important;margin-inline:auto;padding-inline:clamp(16px,4vw,32px)}
        .gold{color:var(--gold)}
        .section{padding-block:clamp(52px,7.5vw,104px)}
        .section-tint{background:linear-gradient(180deg,var(--sand),#E3DED4)}
        .section-head{margin-bottom:clamp(36px,5vw,58px)}
        .section-index{display:inline-flex;align-items:center;gap:8px;color:var(--gold);font-size:13px;font-weight:600;letter-spacing:.16em;margin-bottom:12px}
        .section-index::after{content:"";width:38px;height:1px;background:rgba(177,140,94,.55)}
        .section-head-inner{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;flex-wrap:wrap}
        .section-head-inner h2{font-size:clamp(1.8rem,3.6vw,2.9rem);line-height:1.18;color:var(--ink);font-weight:800;letter-spacing:-.01em;max-width:720px}
        .section-note{flex:0 0 360px;max-width:100%;padding-left:18px;border-left:1px solid rgba(177,140,94,.7);color:var(--text-soft);font-size:15px;line-height:1.8}
        /* 按钮 */
        .btn-primary,.btn-ghost,.btn-cta{
            display:inline-flex;align-items:center;justify-content:center;gap:9px;
            min-height:48px;padding:0 26px;border:1px solid transparent;border-radius:2px;
            font-weight:600;font-size:15px;line-height:1;cursor:pointer;
            transition:background .22s ease,color .22s ease,border-color .22s ease,transform .22s ease,box-shadow .22s ease;
        }
        .btn-primary{background:var(--ink);color:#F4F1EA}
        .btn-primary:hover{background:#2A2D2A}
        .btn-primary .arrow{display:inline-block;transition:transform .22s ease}
        .btn-primary:hover .arrow{transform:translateX(4px)}
        .btn-ghost{background:transparent;border-color:var(--line);color:var(--ink)}
        .btn-ghost:hover{border-color:var(--ink);background:rgba(25,27,25,.04)}
        .btn-primary:focus-visible,.btn-ghost:focus-visible,.btn-cta:focus-visible,button:focus-visible,a:focus-visible{
            outline:2px dotted var(--gold);outline-offset:3px;
        }
        .btn-cta{background:var(--ink);color:#F4F1EA;min-height:48px;padding:0 24px;border-radius:2px}
        .btn-cta:hover{background:#2A2D2A}
        /* Header */
        .site-header{position:sticky;top:0;z-index:100;background:rgba(246,244,239,.92);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
        .header-inner{display:flex;height:72px;align-items:center;justify-content:space-between;gap:18px}
        .brand-logo{display:inline-flex;align-items:center;gap:11px;flex-shrink:0}
        .brand-mark{position:relative;width:30px;height:30px;border:1px solid var(--gold);border-radius:2px;overflow:hidden}
        .brand-mark::before{content:"";position:absolute;left:6px;top:4px;width:16px;height:20px;background:
                linear-gradient(135deg,transparent 0 32%,var(--gold) 32% 42%,transparent 42% 58%,var(--gold) 58% 68%,transparent 68%);
            opacity:.9}
        .brand-mark::after{content:"";position:absolute;right:4px;bottom:4px;width:7px;height:7px;border:1px solid var(--gold)}
        .brand-name{font-size:20px;font-weight:800;letter-spacing:.03em;color:var(--ink)}
        .site-nav{display:flex;align-items:center;gap:30px}
        .site-head-link{font-size:15px;font-weight:500;color:var(--text);padding:6px 0;border-bottom:2px solid transparent;opacity:.88;transition:opacity .2s,border-color .2s}
        .site-head-link:hover{opacity:1;border-color:rgba(25,27,25,.45)}
        .site-head-link.active{opacity:1;border-color:var(--ink)}
        .nav-drop{position:relative}
        .nav-drop-btn{display:inline-flex;align-items:center;gap:8px;background:rgba(235,231,223,.8);border:1px solid var(--line);height:42px;padding:0 16px;border-radius:999px;cursor:pointer;font-size:15px;font-weight:500;transition:background .2s,border-color .2s}
        .nav-drop-btn:hover,.nav-drop.open .nav-drop-btn{background:#E3DED4;border-color:rgba(25,27,25,.35)}
        .drop-panel{
            position:absolute;top:calc(100% + 14px);left:-20px;min-width:196px;
            background:#FDFCFA;border:1px solid var(--line);border-radius:2px;
            padding:8px;box-shadow:0 18px 46px rgba(0,0,0,.08);
            display:grid;gap:2px;opacity:0;visibility:hidden;transform:translateY(8px);
            transition:opacity .22s,transform .22s,visibility .22s;
        }
        .nav-drop:hover .drop-panel,.nav-drop.open .drop-panel{opacity:1;visibility:visible;transform:translateY(0)}
        .drop-panel a{display:flex;align-items:center;min-height:44px;padding:0 14px;border-radius:2px;color:var(--text);font-size:15px;white-space:nowrap}
        .drop-panel a:hover{background:var(--sand);color:var(--ink)}
        .drop-panel a.current{background:var(--sand);font-weight:600;box-shadow:inset 2px 0 0 var(--gold)}
        .header-actions{display:flex;align-items:center;gap:12px}
        .burger-btn{display:none;width:44px;height:44px;align-items:center;justify-content:center;border:1px solid var(--line);background:var(--paper);border-radius:2px;cursor:pointer}
        .mobile-menu{
            position:fixed;inset:72px 0 auto 0;background:var(--paper);
            border-bottom:1px solid var(--line);box-shadow:0 30px 50px rgba(0,0,0,.08);
            padding:20px clamp(16px,4vw,32px) 30px;display:flex;flex-direction:column;gap:4px;
            opacity:0;visibility:hidden;transform:translateY(-6px);transition:.24s ease;overflow-y:auto;max-height:calc(100vh - 72px);
        }
        .mobile-menu.open{opacity:1;visibility:visible;transform:translateY(0)}
        .mobile-menu a{min-height:46px;display:flex;align-items:center;font-size:16px;color:var(--text);border-bottom:1px solid rgba(25,27,25,.08)}
        .mobile-menu a:hover{color:var(--ink);font-weight:600}
        .mobile-menu .mobile-label{color:var(--gold);font-size:13px;letter-spacing:.14em;margin:12px 0 0}
        /* 分类 Hero */
        .cat-hero{padding-block:clamp(44px,6vw,90px);background:var(--paper)}
        .breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14px;color:var(--text-soft);margin-bottom:26px}
        .breadcrumb a{color:var(--text);opacity:.75}
        .breadcrumb a:hover{opacity:1;text-decoration:underline;text-underline-offset:4px}
        .breadcrumb .sep{opacity:.4}
        .breadcrumb .cur{color:var(--gold);font-weight:600}
        .cat-hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);align-items:center;gap:clamp(28px,5vw,56px)}
        .eyebrow{font-size:14px;letter-spacing:.2em;color:var(--gold);font-weight:600;margin-bottom:14px}
        .cat-hero h1{font-size:clamp(2.7rem,5.4vw,4.4rem);font-weight:800;line-height:1.05;letter-spacing:-.01em;color:var(--ink);margin-bottom:22px}
        .cat-hero .lead{font-size:clamp(16px,1.5vw,19px);line-height:1.9;color:var(--text-soft);max-width:620px;margin-bottom:34px}
        .hero-actions{display:flex;gap:14px;flex-wrap:wrap}
        .cat-hero-media{position:relative}
        .cat-hero-media img{aspect-ratio:4/3;object-fit:cover;border-radius:2px;border:1px solid rgba(255,255,255,.2);box-shadow:22px 22px 0 rgba(177,140,94,.16)}
        .img-note{position:absolute;left:-12px;bottom:28px;background:var(--ink);color:#F4F1EA;padding:12px 18px;font-size:13px;letter-spacing:.08em;display:flex;align-items:center;gap:10px;border-radius:2px}
        .img-note svg{width:15px;height:15px;color:var(--gold)}
        /* 数据栏 */
        .stats-strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:linear-gradient(180deg,#FCFBF8,var(--paper))}
        .stat-grid{display:grid;grid-template-columns:repeat(4,1fr)}
        .stat-item{padding:26px 26px 26px 0;border-right:1px solid var(--line)}
        .stat-item:last-child{border-right:0}
        .stat-item .number{font-size:clamp(2.1rem,4vw,3rem);font-weight:800;color:var(--ink);line-height:1.2;font-variant-numeric:tabular-nums;margin-bottom:2px}
        .stat-item .number small{font-size:.58em;color:var(--gold);font-weight:700}
        .stat-item p{color:var(--text-soft);font-size:14px;line-height:1.7}
        /* 内容组成 */
        .facet-list{border-top:1px solid var(--line)}
        .facet-item{display:grid;grid-template-columns:94px minmax(0,.72fr) minmax(220px,.5fr);gap:26px;align-items:center;padding:30px 0;border-bottom:1px solid var(--line);position:relative;transition:background .2s,padding-left .2s}
        .facet-item:hover{background:rgba(177,140,94,.045);padding-left:12px;box-shadow:inset 3px 0 0 var(--gold)}
        .facet-num{color:var(--gold);font-size:13px;font-weight:700;letter-spacing:.12em;display:flex;align-items:center;gap:10px}
        .facet-num::before{content:"";width:26px;height:1px;background:rgba(177,140,94,.4)}
        .facet-main h3{font-size:1.4rem;font-weight:700;color:var(--ink);margin-bottom:8px;letter-spacing:.01em}
        .facet-main p{color:var(--text-soft);font-size:15px;line-height:1.85;max-width:560px}
        .facet-media img{aspect-ratio:3/2;object-fit:cover;border:1px solid rgba(25,27,25,.08);border-radius:2px}
        /* 时间轴 split */
        .timeline-split{display:grid;grid-template-columns:.86fr 1.14fr;gap:clamp(32px,5vw,72px)}
        .split-intro h2{font-size:clamp(2rem,3.8vw,3rem);font-weight:800;color:var(--ink);line-height:1.2;margin:14px 0 20px}
        .split-intro p{color:var(--text-soft);font-size:16px;line-height:1.9;margin-bottom:30px}
        .timeline{border-left:1px solid rgba(177,140,94,.6);margin-left:8px}
        .tl-item{position:relative;padding:0 0 34px 30px;margin-left:-1px;clear:both}
        .tl-item::before{content:"";position:absolute;left:-6px;top:6px;width:11px;height:11px;border-radius:50%;background:var(--paper);border:2px solid var(--gold);box-shadow:0 0 0 4px rgba(177,140,94,.12)}
        .tl-time{font-size:13px;color:var(--gold);font-weight:700;letter-spacing:.05em;font-variant-numeric:tabular-nums}
        .tl-title{font-size:1.35rem;font-weight:700;color:var(--ink);margin:3px 0 6px}
        .tl-text{font-size:14px;color:var(--text-soft);line-height:1.75;max-width:480px}
        /* 受众 */
        .audience-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
        .audience-card{position:relative;border:1px solid var(--line);background:rgba(255,255,255,.32);border-radius:2px;padding:28px 22px 24px;transition:border-color .2s,transform .2s,box-shadow .2s}
        .audience-card:hover{border-color:rgba(25,27,25,.3);transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,.06)}
        .audience-card .ic{width:42px;height:42px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(177,140,94,.55);color:var(--gold);border-radius:50%;margin-bottom:18px}
        .audience-card h3{font-size:1.18rem;font-weight:700;color:var(--ink);margin-bottom:4px}
        .audience-card .sub{font-size:13px;color:var(--gold);margin-bottom:12px;font-weight:600}
        .audience-card p{font-size:14px;color:var(--text-soft);line-height:1.8}
        /* 深色步骤 */
        .section-ink{background:var(--ink);color:#F4F1EA;position:relative}
        .section-ink h2{color:#F4F1EA}
        .section-ink .section-index{color:var(--gold)}
        .section-ink .section-note{color:#A9A297;border-left-color:rgba(177,140,94,.55)}
        .section-ink .btn-ghost{border-color:rgba(244,241,234,.32);color:#F4F1EA}
        .section-ink .btn-ghost:hover{background:rgba(255,255,255,.06);border-color:rgba(244,241,234,.8)}
        .steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,34px);margin-top:44px}
        .step-card{position:relative;border-top:1px solid rgba(244,241,234,.34);padding:30px 4px 0}
        .step-card .step-no{color:var(--gold);font-weight:800;font-size:15px;letter-spacing:.16em;display:flex;align-items:center;gap:8px;margin-bottom:16px}
        .step-card .step-no::before{content:"";width:20px;height:1px;background:var(--gold)}
        .step-card h3{font-size:1.2rem;color:#F4F1EA;font-weight:700;margin-bottom:10px}
        .step-card p{color:#A9A297;font-size:14px;line-height:1.85}
        /* FAQ */
        .faq-frame{display:grid;grid-template-columns:.78fr 1.22fr;gap:clamp(28px,5vw,64px);align-items:start}
        .faq-list{max-width:760px}
        .faq-item{border-bottom:1px solid var(--line);position:relative}
        .faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;text-align:left;background:transparent;border:0;min-height:64px;padding:12px 4px 12px 0;cursor:pointer;font-size:17px;font-weight:600;color:var(--text);line-height:1.5}
        .faq-q:hover{color:var(--ink)}
        .faq-q .plus{width:18px;height:18px;position:relative;flex-shrink:0}
        .faq-q .plus::before,.faq-q .plus::after{content:"";position:absolute;inset:0;margin:auto;background:var(--gold);transition:transform .24s ease}
        .faq-q .plus::before{width:2px;height:16px}
        .faq-q .plus::after{width:16px;height:2px}
        .faq-item.open .faq-q .plus::before{transform:rotate(90deg)}
        .faq-item.open .faq-q .plus::after{transform:rotate(180deg)}
        .faq-a{max-height:0;overflow:hidden;opacity:0;transition:max-height .3s ease,opacity .22s ease,margin .22s}
        .faq-item.open .faq-a{opacity:1;max-height:320px;margin-bottom:14px}
        .faq-a-inner{padding:0 28px 4px 0;color:var(--text-soft);font-size:15px;line-height:1.9}
        /* CTA + form */
        .cta-band{background:var(--sand);border-top:1px solid rgba(25,27,25,.12)}
        .cta-card{background:#FDFCFA;border:1px solid var(--line);border-radius:2px;box-shadow:0 30px 80px rgba(0,0,0,.06)}
        .cta-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,5vw,64px);padding:clamp(24px,5vw,52px)}
        .cta-copy h2{font-size:clamp(1.9rem,3.5vw,2.8rem);font-weight:800;line-height:1.2;color:var(--ink);margin:14px 0 18px}
        .cta-copy>p{color:var(--text-soft);font-size:16px;line-height:1.9}
        .contact-line{display:flex;gap:12px;align-items:flex-start;margin-top:18px;font-size:15px;color:var(--text)}
        .contact-line svg{width:20px;height:20px;color:var(--gold);flex-shrink:0;margin-top:3px}
        .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
        .form-item.full{grid-column:1/-1}
        .form-item label{display:block;font-size:13px;color:var(--text);font-weight:600;margin-bottom:7px;letter-spacing:.02em}
        .form-item label em{color:var(--error);font-style:normal}
        .field-input,.field-select{
            height:48px;background:#F6F4EF;border:1px solid transparent;border-radius:2px;box-shadow:inset 0 0 0 1px rgba(25,27,25,.1);
            width:100%;padding:0 14px;outline:none;color:var(--text);transition:border .2s,background .2s,box-shadow .2s;
        }
        .field-input:hover,.field-select:hover{background:#FCFBF8;box-shadow:inset 0 0 0 1px rgba(25,27,25,.22)}
        .field-input:focus,.field-select:focus{background:#fff;border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
        .field-input::placeholder{color:#9A9288;font-style:normal}
        select.field-select{cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23191B19' stroke-width='1.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
        .form-error{display:none;color:var(--error);font-size:13px;margin-top:4px}
        .form-item.error .form-error{display:block}
        .form-item.error .field-input,.form-item.error .field-select{box-shadow:inset 0 0 0 1px var(--error);background:#FFF9F7}
        .submit-row{display:flex;justify-content:flex-end;margin-top:16px}
        .success-note{display:none;background:#F0F5F0;border:1px solid rgba(46,107,79,.24);color:#23453;padding:22px;border-radius:2px;margin-bottom:14px;font-size:15px}
        .success-note.show{display:block}
        .notice-list{margin-top:22px;border-top:1px solid var(--line);padding-top:8px;color:var(--text-soft);font-size:13px;line-height:1.7}
        .notice-list li{display:flex;gap:8px;padding:6px 0}
        .notice-list li::before{content:"·";color:var(--gold);font-weight:700}
        /* footer */
        .site-footer{background:var(--ink);color:#C9C2B8;padding:56px 0 30px;margin-top:0}
        .site-footer .footer-grid{display:grid;grid-template-columns:1.45fr .8fr .9fr 1.2fr;gap:26px;padding-bottom:30px;border-bottom:1px solid rgba(244,241,234,.14)}
        .site-footer p{font-size:14px;color:#A9A297;line-height:1.8}
        .footer-title{font-size:15px;font-weight:700;color:#F4F1EA;margin:8px 0 14px;letter-spacing:.05em}
        .footer-links{display:grid;gap:6px}
        .footer-links a{color:#B9B2A7;font-size:14px;display:inline-flex;width:fit-content;position:relative;transition:color .2s}
        .footer-links a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:#F4F1EA;transform:scaleX(0);transform-origin:left;transition:transform .24s}
        .footer-links a:hover{color:#F4F1EA}
        .footer-links a:hover::after{transform:scaleX(1)}
        .footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding-top:26px;font-size:13px;color:#8F887E}
        /* reveal */
        .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
        .reveal.visible{opacity:1;transform:none}
        @media(prefers-reduced-motion:reduce){
            html{scroll-behavior:auto}
            *,*::before,*::after{transition:none!important;animation:none!important}
            .reveal{opacity:1;transform:none}
        }
        /* responsive */
        @media(max-width:1100px){
            .site-nav{display:none}
            .burger-btn{display:inline-flex}
        }
        @media(max-width:1024px){
            .cat-hero-grid{grid-template-columns:1fr;gap:36px}
            .cat-hero-media{max-width:620px}
            .stat-grid{grid-template-columns:repeat(2,1fr)}
            .stat-item:nth-child(2){border-right:0}
            .stat-item:nth-child(1),.stat-item:nth-child(2){border-bottom:1px solid var(--line)}
            .facet-item{grid-template-columns:70px minmax(0,1fr);gap:20px}
            .facet-media{display:none}
            .audience-grid{grid-template-columns:repeat(2,1fr)}
            .steps-grid{grid-template-columns:1fr;gap:14px}
            .timeline-split{grid-template-columns:1fr}
            .faq-frame{grid-template-columns:1fr}
            .cta-grid{grid-template-columns:1fr;padding:28px}
            .site-footer .footer-grid{grid-template-columns:1fr 1fr}
        }
        @media(max-width:640px){
            body{font-size:15px}
            .section{padding-block:50px}
            .section-head-inner{display:block}
            .section-note{padding-left:14px;margin-top:16px}
            .stat-grid{grid-template-columns:1fr 1fr}
            .stat-item{padding:18px 16px 18px 0}
            .stat-item p{font-size:12px}
            .facet-item{grid-template-columns:1fr;gap:12px;padding:24px 0}
            .facet-main h3{font-size:1.25rem}
            .audience-grid{grid-template-columns:1fr}
            .form-grid{grid-template-columns:1fr}
            .hero-actions .btn-primary,.hero-actions .btn-ghost{width:100%}
            .footer-grid{padding-top:6px}
            .footer-bottom{display:block;text-align:center;line-height:2}
            .header-inner{height:64px}
            .mobile-menu{inset:64px 0 auto 0}
            .header-actions .btn-cta{min-height:42px;padding:0 15px;font-size:14px}
            .brand-name{font-size:18px}
            .btn-cta{margin-left:auto}
        }

/* roulang page: category2 */
:root{
  --ink:#191B19;
  --ink-2:#2A2D2A;
  --paper:#F6F4EF;
  --paper-2:#EBE7DF;
  --accent:#B18C5E;
  --text:#2A2A28;
  --muted:#6B665E;
  --line:rgba(25,27,25,.14);
  --line-strong:rgba(25,27,25,.24);
  --dark-paper:#F4F1EA;
  --dark-muted:#A9A297;
  --dark-line:rgba(244,241,234,.18);
  --danger:#B34734;
  --success:#2E6B4F;
  --radius:2px;
  --shadow-card:0 10px 30px rgba(0,0,0,.06);
  --font-family:"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:100px;}
body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font-family:var(--font-family);
  font-size:16px;
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button,input,select,textarea{font:inherit;}
ul,ol{margin:0;padding:0;}
section[id]{scroll-margin-top:96px;}
:focus-visible{
  outline:2px dashed var(--accent);
  outline-offset:3px;
}
.container{
  max-width:1200px;
  margin:0 auto;
  padding-left:20px;
  padding-right:20px;
}
@media(min-width:640px){
  .container{padding-left:24px;padding-right:24px;}
}
@media(min-width:1200px){
  .container{padding-left:32px;padding-right:32px;}
}
.section{
  padding:72px 0;
}
@media(min-width:768px){
  .section{padding:96px 0;}
}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  font-weight:700;
  letter-spacing:.16em;
  color:var(--accent);
  margin-bottom:14px;
}
.eyebrow-dot{
  width:6px;
  height:6px;
  border-radius:999px;
  background:var(--accent);
}
h2.section-title,
h2.main-h2{
  font-size:clamp(1.75rem,3vw,2.35rem);
  font-weight:800;
  line-height:1.2;
  letter-spacing:-.02em;
  margin:0 0 14px;
  color:var(--ink);
}
.lead-para{
  font-size:clamp(1.05rem,1.6vw,1.25rem);
  line-height:1.85;
  color:var(--text);
}
.muted-text{
  color:var(--muted);
  font-size:15px;
}

/* ===== Header ===== */
.site-header{
  position:sticky;
  top:0;
  z-index:120;
  background:rgba(246,244,239,.86);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid transparent;
  transition:background .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.site-header.scrolled{
  background:rgba(246,244,239,.92);
  border-bottom:1px solid var(--line);
  box-shadow:0 8px 28px rgba(25,27,25,.05);
}
.site-header.menu-open{
  background:var(--paper);
  border-bottom-color:var(--line);
}
.header-inner{
  min-height:80px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.brand-logo{
  display:inline-flex;
  align-items:center;
  gap:12px;
  flex-shrink:0;
}
.brand-mark{
  position:relative;
  width:34px;
  height:34px;
  background:var(--ink);
  border-radius:4px;
  overflow:hidden;
  flex-shrink:0;
  display:inline-block;
}
.brand-mark::before{
  content:"";
  position:absolute;
  inset:5px;
  background:var(--paper);
  border-radius:2px;
}
.brand-mark::after{
  content:"";
  position:absolute;
  left:4px;
  bottom:3px;
  width:8px;
  height:8px;
  background:var(--accent);
  border-radius:1px;
}
.brand-name{
  font-size:21px;
  font-weight:800;
  color:var(--ink);
  letter-spacing:.02em;
  white-space:nowrap;
}
.site-nav{
  display:flex;
  align-items:center;
  gap:6px;
}
.site-head-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:0 14px;
  font-weight:600;
  color:var(--text);
  position:relative;
  transition:color .18s ease;
  white-space:nowrap;
}
.site-head-link:hover{
  color:var(--ink);
}
.site-head-link::after{
  content:"";
  position:absolute;
  left:14px;
  right:14px;
  bottom:7px;
  height:2px;
  background:var(--accent);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .22s ease;
}
.site-head-link:hover::after{
  transform:scaleX(1);
}
.site-head-link.active{
  color:var(--ink);
  font-weight:700;
}
.site-head-link.active::after{
  transform:scaleX(1);
}
.nav-drop{
  position:relative;
  margin-left:6px;
}
.nav-drop-btn{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:44px;
  padding:0 15px;
  border:1px solid var(--line-strong);
  border-radius:var(--radius);
  background:var(--paper-2);
  color:var(--ink);
  font-weight:700;
  cursor:pointer;
  transition:background .18s ease,border-color .18s ease;
}
.nav-drop-btn:hover{
  background:#e4dfd5;
}
.nav-drop-btn svg{
  transition:transform .2s ease;
}
.drop-panel{
  position:absolute;
  left:0;
  top:calc(100% + 12px);
  min-width:230px;
  background:#FFFCF7;
  border:1px solid var(--line);
  border-top:2px solid var(--accent);
  border-radius:4px;
  box-shadow:0 18px 50px rgba(25,27,25,.1);
  padding:10px;
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  transition:opacity .2s ease,visibility .2s ease,transform .2s ease;
  z-index:80;
}
.drop-panel a{
  display:flex;
  align-items:center;
  padding:11px 14px;
  border-radius:var(--radius);
  color:var(--text);
  font-weight:600;
  font-size:15px;
  transition:background .15s ease,color .15s ease;
}
.drop-panel a:hover{
  background:var(--paper-2);
  color:var(--ink);
}
.drop-panel a.active{
  color:var(--ink);
  background:var(--paper-2);
  box-shadow:inset 2px 0 0 var(--accent);
}
.nav-drop.open .drop-panel{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.nav-drop.open .nav-drop-btn svg{
  transform:rotate(180deg);
}
.header-actions{
  display:flex;
  align-items:center;
  gap:10px;
}
.btn-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:0 24px;
  background:var(--ink);
  border-radius:var(--radius);
  color:var(--dark-paper);
  font-weight:700;
  letter-spacing:.02em;
  white-space:nowrap;
  transition:background .2s ease,transform .2s ease;
}
.btn-cta:hover{
  background:var(--ink-2);
  transform:translateY(-1px);
}
.btn-cta:active{
  transform:translateY(0);
}
.burger-btn{
  display:none;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:transparent;
  color:var(--ink);
  cursor:pointer;
}
.burger-btn:hover{
  background:var(--paper-2);
}
.burger-btn svg{
  width:20px;
  height:20px;
}

/* ===== Page KV / Breadcrumb ===== */
.page-kv{
  background:
    linear-gradient(100deg,rgba(246,244,239,.96) 0%,rgba(246,244,239,.9) 46%,rgba(224,219,209,.78) 100%),
    url('/assets/images/backpic/back-3.webp') center/cover no-repeat;
  border-bottom:1px solid var(--line);
  padding:46px 0 56px;
}
.breadcrumb-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 12px;
  font-size:13px;
  color:var(--muted);
  margin-bottom:24px;
}
.breadcrumb-row a{
  color:var(--muted);
  transition:color .15s ease;
}
.breadcrumb-row a:hover{
  color:var(--ink);
}
.breadcrumb-row .crumb-sep{
  color:var(--line-strong);
}
.breadcrumb-row .crumb-current{
  color:var(--text);
  font-weight:600;
}
.kv-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:34px;
  align-items:end;
}
.kv-left{
  max-width:860px;
}
.kv-right{
  border-left:1px solid var(--line);
  padding-left:28px;
}
.kv-right dl{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin:0;
}
.kv-right dt{
  font-size:12px;
  letter-spacing:.12em;
  color:var(--accent);
  font-weight:700;
}
.kv-right dd{
  margin:0;
  font-size:16px;
  font-weight:700;
  color:var(--ink);
}
@media(min-width:900px){
  .page-kv{
    padding:66px 0 80px;
  }
  .kv-grid{
    grid-template-columns:1fr 300px;
  }
}
.kv-tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:rgba(177,140,94,.12);
  border:1px solid rgba(177,140,94,.4);
  padding:5px 14px;
  border-radius:999px;
  font-size:13px;
  font-weight:700;
  color:#7e5e35;
  margin-bottom:22px;
  letter-spacing:.04em;
}
.kv-title{
  margin:0 0 18px;
  font-size:clamp(2.85rem,7vw,4.4rem);
  font-weight:800;
  line-height:1.08;
  letter-spacing:-.03em;
  color:var(--ink);
}
.kv-lead{
  font-size:clamp(1.02rem,1.8vw,1.2rem);
  line-height:1.95;
  color:#4F4C45;
  max-width:70ch;
  margin:0;
}

/* ===== Side layout ===== */
.side-layout{
  display:grid;
  grid-template-columns:1fr;
  gap:52px;
  align-items:start;
}
@media(min-width:992px){
  .side-layout{
    grid-template-columns:230px minmax(0,1fr);
    gap:72px;
  }
}
.aside-block{
  border-left:1px solid var(--line);
  padding-left:22px;
}
.anchor-caption{
  font-size:12px;
  color:var(--accent);
  letter-spacing:.14em;
  font-weight:700;
  margin:0 0 18px;
}
.anchor-nav{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.anchor-nav a{
  display:block;
  padding:8px 0;
  border-left:2px solid transparent;
  margin-left:-23px;
  padding-left:21px;
  color:var(--muted);
  font-size:15px;
  font-weight:600;
  transition:color .16s ease,border-color .16s ease;
}
.anchor-nav a:hover{
  color:var(--ink);
  border-left-color:rgba(177,140,94,.5);
}
.anchor-nav a.active-anchor{
  color:var(--ink);
  border-left-color:var(--accent);
}
.aside-contact{
  border-top:1px solid var(--line);
  margin-top:24px;
  padding-top:20px;
}
.aside-contact p{
  margin:0 0 16px;
  color:var(--muted);
  font-size:14px;
  line-height:1.7;
}
.aside-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:0 20px;
  background:var(--paper-2);
  border:1px solid var(--line-strong);
  border-radius:var(--radius);
  color:var(--ink);
  font-weight:700;
  font-size:14px;
  transition:background .16s ease,border-color .16s ease;
}
.aside-btn:hover{
  background:#e2ddd2;
  border-color:var(--line-strong);
}

/* ===== Content modules ===== */
.content-body{
  display:flex;
  flex-direction:column;
  gap:72px;
  min-width:0;
}
.module-block{
  scroll-margin-top:110px;
}
.text-para{
  font-size:16px;
  line-height:1.95;
  color:#3D3B36;
  margin:0;
}
.paragraph-lead{
  font-size:17px;
  line-height:1.95;
  color:#3D3B36;
  background:rgba(255,255,255,.45);
  border:1px solid var(--line);
  border-left:2px solid var(--accent);
  padding:20px 22px;
  border-radius:2px;
  margin:0 0 20px;
}
.dual-list{
  display:grid;
  grid-template-columns:1fr;
  gap:14px 24px;
  margin-top:20px;
}
@media(min-width:700px){
  .dual-list{grid-template-columns:1fr 1fr;}
}
.point-row{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:10px 0;
  border-bottom:1px solid rgba(25,27,25,.08);
}
.point-row .point-num{
  font-weight:800;
  font-size:14px;
  color:var(--accent);
  flex-shrink:0;
}
.point-row p{
  margin:0;
  font-size:15px;
  color:#4A4842;
}
.stat-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  border:1px solid var(--line);
  border-radius:2px;
  margin-top:30px;
  background:rgba(255,255,255,.28);
}
@media(min-width:700px){
  .stat-grid{grid-template-columns:repeat(4,1fr);}
}
.stat-cell{
  padding:24px 18px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.stat-cell:nth-child(2n){border-right:none;}
.stat-cell:nth-last-child(-n+2){border-bottom:none;}
@media(min-width:700px){
  .stat-cell:nth-child(2n){border-right:1px solid var(--line);}
  .stat-cell:nth-child(4n){border-right:none;}
  .stat-cell:nth-last-child(-n+2){border-bottom:none;}
  .stat-cell:nth-last-child(-n+1){border-bottom:none;}
}
.stat-number{
  font-size:clamp(1.8rem,3vw,2.6rem);
  font-weight:800;
  line-height:1.1;
  color:var(--accent);
  letter-spacing:.02em;
}
.stat-number small{
  font-size:1rem;
  font-weight:800;
  color:var(--muted);
}
.stat-label{
  margin-top:10px;
  font-weight:700;
  color:var(--ink);
  font-size:15px;
}
.stat-desc{
  margin-top:5px;
  font-size:13px;
  color:var(--muted);
  line-height:1.6;
}

/* ===== Guest card grid ===== */
.card-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:20px;
  margin-top:24px;
}
@media(min-width:640px){
  .card-grid{grid-template-columns:repeat(2,1fr);}
}
@media(min-width:1024px){
  .card-grid{grid-template-columns:repeat(3,1fr);}
}
.content-card{
  display:flex;
  flex-direction:column;
  background:rgba(255,255,255,.34);
  border:1px solid var(--line);
  border-radius:2px;
  overflow:hidden;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.content-card:hover{
  transform:translateY(-2px);
  border-color:rgba(25,27,25,.22);
  box-shadow:var(--shadow-card);
}
.card-media{
  aspect-ratio:16/10;
  background:var(--paper-2);
  overflow:hidden;
  position:relative;
}
.card-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .4s ease;
}
.content-card:hover .card-media img{
  transform:scale(1.04);
}
.card-media::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(25,27,25,.05),transparent 50%);
  pointer-events:none;
}
.card-pill{
  display:inline-flex;
  align-items:center;
  min-height:26px;
  padding:0 10px;
  border:1px solid var(--line-strong);
  border-radius:999px;
  color:#5e5447;
  font-size:12px;
  font-weight:700;
  background:rgba(246,244,239,.78);
  align-self:flex-start;
  margin:20px 20px 0;
}
.card-body{
  padding:18px 20px 24px;
}
.card-body h3{
  font-size:1.32rem;
  font-weight:800;
  line-height:1.35;
  color:var(--ink);
  margin:10px 0 10px;
}
.card-body p{
  margin:0;
  font-size:14.5px;
  line-height:1.85;
  color:#555047;
}

/* ===== update process ===== */
.process-list{
  margin-top:30px;
  border-top:1px solid var(--line);
}
.process-row{
  display:grid;
  grid-template-columns:48px minmax(0,1fr);
  gap:22px;
  padding:28px 0;
  border-bottom:1px solid var(--line);
  transition:background .18s ease;
}
.process-row:hover{
  background:rgba(235,231,223,.4);
}
@media(min-width:760px){
  .process-row{
    grid-template-columns:80px 1fr 220px;
    gap:28px;
    align-items:start;
  }
}
.step-number{
  font-size:1.25rem;
  font-weight:800;
  color:var(--accent);
  line-height:1.6;
  letter-spacing:.02em;
}
.step-main h3{
  margin:0 0 7px;
  font-size:1.2rem;
  font-weight:800;
  color:var(--ink);
}
.step-main p{
  margin:0;
  color:var(--muted);
  font-size:15px;
  line-height:1.9;
}
.step-flag{
  font-size:13px;
  color:var(--ink);
  background:var(--paper-2);
  border:1px solid var(--line);
  text-align:left;
  padding:12px;
  margin-top:10px;
  border-radius:2px;
}
@media(min-width:760px){
  .step-flag{
    margin-top:0;
    text-align:center;
  }
}

/* ===== light tip strip ===== */
.tip-block{
  display:flex;
  flex-direction:column;
  gap:16px;
  background:linear-gradient(115deg,var(--paper-2),#f0ece4);
  border:1px solid var(--line);
  border-radius:2px;
  padding:24px 26px;
  margin-top:28px;
}
@media(min-width:700px){
  .tip-block{flex-direction:row;align-items:center;justify-content:space-between;}
}
.tip-block h3{
  margin:0 0 6px;
  font-size:1.12rem;
  font-weight:800;
}
.tip-block p{
  margin:0;
  color:var(--muted);
  font-size:14px;
}
.tip-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
  font-weight:700;
  color:var(--ink);
  padding:10px 4px;
}
.tip-link svg{
  transition:transform .2s ease;
}
.tip-link:hover svg{
  transform:translateX(4px);
}

/* ===== FAQ ===== */
.faq-section{
  background:#F1EEE7;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.faq-wrap{
  display:grid;
  grid-template-columns:1fr;
  gap:40px;
}
@media(min-width:992px){
  .faq-wrap{
    grid-template-columns:300px 1fr;
    align-items:start;
  }
}
.faq-fixed{
  position:relative;
}
@media(min-width:992px){
  .faq-fixed{
    position:sticky;
    top:110px;
  }
}
.faq-fixed p{
  color:var(--muted);
  font-size:15px;
}
.faq-list{
  border-bottom:1px solid var(--line-strong);
}
.faq-item{
  border-top:1px solid var(--line);
  border-left:2px solid transparent;
  transition:border-color .18s ease,background .18s ease;
}
.faq-item.open{
  background:rgba(255,255,255,.28);
  border-left-color:var(--accent);
}
.faq-q{
  position:relative;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  text-align:left;
  background:none;
  border:none;
  color:var(--text);
  font-weight:700;
  font-size:16px;
  line-height:1.6;
  padding:17px 20px 17px 24px;
  cursor:pointer;
  min-height:60px;
}
.faq-q:hover{
  color:var(--ink);
}
.faq-btn-icon{
  position:relative;
  width:18px;
  height:18px;
  flex-shrink:0;
}
.faq-btn-icon::before,
.faq-btn-icon::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:14px;
  height:1.5px;
  background:var(--accent);
  transform:translate(-50%,-50%);
  transition:transform .25s ease,opacity .25s ease;
}
.faq-btn-icon::after{
  transform:translate(-50%,-50%) rotate(90deg);
}
.faq-item.open .faq-btn-icon::after{
  transform:translate(-50%,-50%) rotate(0deg);
  opacity:0;
}
.faq-a{
  max-height:0;
  overflow:hidden;
  padding:0 24px 0 24px;
  margin:0;
  transition:max-height .28s ease,padding .28s ease;
}
.faq-a p{
  color:var(--muted);
  font-size:15px;
  line-height:1.9;
  padding-bottom:20px;
  margin:0;
}
.faq-item.open .faq-a{
  max-height:360px;
}

/* ===== Dark CTA ===== */
.cta-banner{
  position:relative;
  background-color:#1B1D1B;
  background-image:linear-gradient(100deg,rgba(25,27,25,.94),rgba(25,27,25,.82)),url('/assets/images/backpic/back-1.png');
  background-size:cover;
  background-position:center;
  color:var(--dark-paper);
  padding:70px 0;
}
.cta-inner{
  display:grid;
  grid-template-columns:1fr;
  gap:30px;
  align-items:center;
}
@media(min-width:900px){
  .cta-inner{
    grid-template-columns:1fr auto;
    gap:60px;
  }
}
.cta-banner h2{
  font-size:clamp(1.7rem,3vw,2.5rem);
  line-height:1.3;
  font-weight:800;
  letter-spacing:-.02em;
  margin:0 0 11px;
  color:var(--dark-paper);
}
.cta-banner .cta-desc{
  font-size:16px;
  color:var(--dark-muted);
  max-width:580px;
  margin:0;
}
.cta-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:16px;
}
.btn-light{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:50px;
  padding:0 30px;
  background:var(--dark-paper);
  color:#151713;
  border-radius:2px;
  font-weight:700;
  transition:background .2s ease,transform .2s ease;
}
.btn-light svg{
  transition:transform .2s ease;
}
.btn-light:hover{
  background:#FFF8EB;
  transform:translateY(-1px);
}
.btn-light:hover svg{
  transform:translateX(4px);
}
.cta-phone{
  display:inline-flex;
  align-items:center;
  min-height:50px;
  padding:0 18px;
  border:1px solid var(--dark-line);
  border-radius:2px;
  color:var(--dark-paper);
  font-weight:700;
  transition:background .2s ease,border-color .2s ease;
}
.cta-phone:hover{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.28);
}

/* ===== Footer ===== */
.site-footer{
  background:#151715;
  color:#B9B2A6;
  padding:54px 0 30px;
}
.site-footer .container{
  position:relative;
}
.site-footer .container::before{
  content:"";
  display:block;
  height:1px;
  background:var(--accent);
  margin-bottom:42px;
}
.footer-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:30px;
}
@media(min-width:600px){
  .footer-grid{grid-template-columns:repeat(2,1fr);}
}
@media(min-width:992px){
  .footer-grid{grid-template-columns:1.35fr 1fr 1fr 1.2fr;gap:40px;}
}
.site-footer .brand-name{
  color:var(--dark-paper);
}
.footer-grid>div p{
  margin-top:0;
  color:#A9A297;
  font-size:14px;
  line-height:1.9;
}
.footer-title{
  font-size:14px;
  font-weight:800;
  letter-spacing:.08em;
  color:var(--dark-paper);
  margin-bottom:16px;
}
.footer-links{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.footer-links a{
  display:inline-block;
  color:#B9B2A6;
  font-size:14px;
  line-height:1.8;
  transition:color .15s ease;
}
.footer-links a:hover{
  color:#F4F1EA;
  text-decoration:underline;
  text-decoration-color:var(--accent);
  text-underline-offset:5px;
}
.footer-bottom{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:8px 24px;
  border-top:1px solid rgba(244,241,234,.14);
  margin-top:48px;
  padding-top:24px;
  font-size:13px;
  color:rgba(169,162,151,.7);
}

/* ===== responsive header ===== */
@media(max-width:1023px){
  .site-nav{
    position:absolute;
    top:calc(100% + 8px);
    left:16px;
    right:16px;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:4px;
    background:var(--paper);
    border:1px solid var(--line);
    border-top:2px solid var(--accent);
    border-radius:4px;
    box-shadow:0 24px 60px rgba(25,27,25,.12);
    padding:16px;
    opacity:0;
    visibility:hidden;
    transform:translateY(-10px) scale(.99);
    transition:opacity .2s ease,transform .2s ease,visibility .2s ease;
    z-index:90;
  }
  .site-header.menu-open .site-nav{
    opacity:1;
    visibility:visible;
    transform:translateY(0) scale(1);
  }
  .site-nav .site-head-link{
    min-height:48px;
    justify-content:flex-start;
    border-bottom:1px solid rgba(25,27,25,.08);
    white-space:normal;
  }
  .nav-drop{
    margin-left:0;
    margin-top:4px;
  }
  .nav-drop-btn{
    width:100%;
    justify-content:space-between;
    border-color:transparent;
    background:transparent;
    padding-left:14px;
    border-bottom:1px solid rgba(25,27,25,.08);
    border-radius:0;
  }
  .drop-panel{
    position:static;
    opacity:1;
    visibility:visible;
    transform:none;
    box-shadow:none;
    border:0;
    border-left:1px solid var(--line);
    margin:2px 0 4px 18px;
    padding:4px 0 4px 6px;
    min-width:0;
    background:transparent;
    display:none;
  }
  .nav-drop.open .drop-panel{
    display:block;
    animation:none;
  }
  .drop-panel a.active{
    background:transparent;
    box-shadow:none;
    color:var(--accent);
  }
  .burger-btn{
    display:inline-flex;
  }
  .btn-cta{
    min-height:44px;
    padding:0 18px;
    font-size:15px;
  }
  .header-inner{
    min-height:72px;
  }
}

/* ===== reduced motion ===== */
@media(prefers-reduced-motion:reduce){
  *{
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important;
  }
}

/* roulang page: category3 */
:root {
    --ink: #191B19;
    --ink-2: #2A2D2A;
    --text: #2A2A28;
    --muted: #6B665E;
    --paper: #F6F4EF;
    --paper-deep: #EBE7DF;
    --paper-light: #F4F1EA;
    --accent: #B18C5E;
    --line: rgba(25, 27, 25, .14);
    --line-soft: rgba(25, 27, 25, .07);
    --line-dark: rgba(244, 241, 234, .18);
    --shadow: 0 10px 30px rgba(0, 0, 0, .06);
    --radius: 2px;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body {
    font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
    background: var(--paper);
    color: var(--text);
    line-height: 1.8;
    -webkit-font-smoothing: antialiased;
  }
  a { color: inherit; text-decoration: none; }
  button { background: none; border: none; color: inherit; font: inherit; }
  img { display: block; max-width: 100%; }
  ul { list-style: none; }
  .container {
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: 20px;
  }
  @media (min-width: 640px) {
    .container { padding-inline: 28px; }
  }
  @media (min-width: 1024px) {
    .container { padding-inline: 32px; }
  }
  section { scroll-margin-top: 80px; }

  .site-header {
    position: sticky;
    top: 0;
    z-index: 80;
    background: rgba(246, 244, 239, .94);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line-soft);
    transition: background .25s ease-out, border-color .25s ease-out;
  }
  .site-header.is-scrolled { background: rgba(246, 244, 239, .92); border-bottom-color: var(--line); }
  .header-inner { display: flex; align-items: center; gap: 24px; min-height: 76px; }
  .brand-logo { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); flex-shrink: 0; }
  .brand-mark { position: relative; width: 28px; height: 28px; display: inline-block; flex: none; }
  .brand-mark::before { content: ""; position: absolute; inset: 2px; border: 2px solid var(--ink); transform: rotate(45deg); transition: border-color .24s ease-out; }
  .brand-mark::after { content: ""; position: absolute; inset: 8px; border: 1px solid var(--accent); transform: rotate(45deg); }
  .brand-logo:hover .brand-mark::before { border-color: var(--accent); }
  .brand-name { font-size: 19px; font-weight: 800; letter-spacing: .08em; white-space: nowrap; }
  .site-nav { display: flex; align-items: center; margin-left: 22px; gap: 2px; }
  .site-head-link {
    position: relative;
    display: inline-block;
    padding: 8px 3px;
    margin: 0 12px;
    font-size: 14px;
    color: var(--text);
    letter-spacing: .04em;
    white-space: nowrap;
    font-weight: 500;
  }
  .site-head-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 1px;
    width: 100%;
    background: var(--ink);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .28s ease-out;
  }
  .site-head-link:hover::after { transform: scaleX(1); transform-origin: left; }
  .site-head-link.active { font-weight: 700; }
  .site-head-link.active::after { transform: scaleX(1); }
  .nav-drop { position: relative; margin-left: 8px; }
  .nav-drop-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    color: var(--text);
    padding: 9px 12px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, .34);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color .24s ease-out, background-color .24s ease-out;
    white-space: nowrap;
    font-weight: 500;
  }
  .nav-drop-btn:hover { border-color: var(--ink); }
  .nav-drop.is-open .nav-drop-btn { border-color: var(--ink); background: #FFFFFF; }
  .nav-drop-btn svg { transition: transform .28s ease-out; }
  .nav-drop.is-open .nav-drop-btn svg { transform: rotate(180deg); }
  .drop-panel {
    position: absolute;
    left: 0;
    top: calc(100% + 16px);
    min-width: 218px;
    padding: 8px;
    background: #FFFFFF;
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    display: grid;
    gap: 2px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-5px);
    transition: opacity .24s ease-out, transform .24s ease-out, visibility .24s;
  }
  .nav-drop.is-open .drop-panel { opacity: 1; visibility: visible; transform: translateY(0); }
  .drop-panel a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    font-size: 14px;
    color: var(--text);
    font-weight: 500;
    border-left: 2px solid transparent;
    transition: background-color .2s ease-out, border-color .2s ease-out, padding-left .2s ease-out;
  }
  .drop-panel a::after { content: "→"; color: var(--accent); font-size: 13px; opacity: 0; transform: translateX(-4px); transition: opacity .2s, transform .2s; }
  .drop-panel a:hover { background: var(--paper); border-left-color: var(--accent); padding-left: 16px; }
  .drop-panel a:hover::after { opacity: 1; transform: translateX(0); }
  .drop-panel a.drop-link-current { background: var(--paper); border-left-color: var(--accent); font-weight: 700; }
  .drop-panel a.drop-link-current::after { opacity: 1; transform: none; }
  .header-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }
  .btn-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 20px;
    background: var(--ink);
    color: var(--paper-light);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .04em;
    border-radius: var(--radius);
    transition: background-color .24s ease-out;
  }
  .btn-cta svg { transition: transform .24s ease-out; }
  .btn-cta:hover { background: var(--ink-2); }
  .btn-cta:hover svg { transform: translateX(4px); }
  .burger-btn { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); cursor: pointer; background: rgba(255,255,255,.3); transition: border-color .2s ease-out; }
  .burger-btn:hover { border-color: var(--ink); }

  .page-hero {
    position: relative;
    overflow: hidden;
    background-color: var(--paper-deep);
    background-image: linear-gradient(100deg, rgba(246,244,239,.98) 0%, rgba(246,244,239,.9) 42%, rgba(246,244,239,.5) 88%), url('/assets/images/backpic/back-1.png');
    background-size: cover;
    background-position: center right;
    border-bottom: 1px solid var(--line);
  }
  .page-hero-inner { padding-top: 58px; padding-bottom: 46px; position: relative; z-index: 2; }
  .breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--muted); margin-bottom: 22px; }
  .breadcrumb a { color: var(--muted); transition: color .2s ease-out; }
  .breadcrumb a:hover { color: var(--ink); }
  .breadcrumb .crumbs-sep { color: var(--accent); }
  .breadcrumb .text-current { color: var(--text); font-weight: 700; }
  .page-kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; letter-spacing: .15em; color: var(--accent); font-weight: 600; margin-bottom: 16px; }
  .page-kicker::before { content: ""; display: inline-block; width: 24px; height: 1px; background: var(--accent); }
  .page-title {
    font-size: clamp(2.6rem, 5.2vw, 4.2rem);
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--ink);
    margin-bottom: 22px;
  }
  .page-lead { max-width: 760px; font-size: 17px; color: #56524c; line-height: 1.85; }
  .hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
  .btn-dark, .btn-ghost, .btn-light, .btn-outline-light {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 24px;
    border-radius: var(--radius);
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .04em;
    transition: background-color .24s ease-out, border-color .24s ease-out, color .24s ease-out, transform .24s ease-out;
  }
  .btn-dark { background: var(--ink); color: var(--paper-light); }
  .btn-dark:hover { background: var(--ink-2); }
  .btn-ghost { border: 1px solid rgba(25, 27, 25, .35); color: var(--ink); background: rgba(255,255,255,.25); }
  .btn-ghost:hover { border-color: var(--ink); background: rgba(255,255,255,.6); }
  .btn-dark svg, .btn-ghost svg { transition: transform .24s ease-out; }
  .btn-dark:hover svg, .btn-ghost:hover svg { transform: translateX(4px); }
  .hero-note { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
  .hero-note span { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
  .hero-note span svg { stroke: var(--accent); flex: none; }

  .facts-strip { border-bottom: 1px solid var(--line); background: #FFFFFF; }
  .facts-grid { display: grid; grid-template-columns: repeat(2, 1fr); }
  .fact-item { padding: 22px 20px; border-left: 1px solid var(--line-soft); }
  .fact-item:first-child { border-left: 0; padding-left: 0; }
  .fact-item strong { display: block; font-size: 18px; color: var(--ink); letter-spacing: .02em; font-weight: 800; }
  .fact-item span { display: block; margin-top: 4px; font-size: 13px; color: var(--muted); line-height: 1.6; }
  @media (min-width: 768px) {
    .facts-grid { grid-template-columns: repeat(4, 1fr); }
    .fact-item { padding: 22px 24px; }
  }

  .section-block { padding: 72px 0; }
  @media (min-width: 768px) { .section-block { padding: 92px 0; } }
  .section-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; margin-bottom: 40px; }
  .section-index { display: flex; align-items: center; gap: 10px; font-size: 13px; letter-spacing: .18em; font-weight: 700; color: var(--accent); margin-bottom: 12px; }
  .section-index::after { content: ""; width: 32px; height: 1px; background: var(--accent); }
  .section-title-row h2 { font-size: clamp(1.8rem, 3vw, 2.7rem); line-height: 1.2; font-weight: 800; color: var(--ink); letter-spacing: -.01em; max-width: 760px; }
  .section-guide-note { max-width: 320px; text-align: left; color: var(--muted); font-size: 14px; }

  .ticket-type-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
  @media (min-width: 640px) { .ticket-type-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1024px) { .ticket-type-grid { grid-template-columns: repeat(4, 1fr); } }
  .ticket-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, .52);
    border: 1px solid var(--line);
    border-radius: 2px;
    padding: 28px 22px;
    transition: border-color .26s ease-out, background-color .26s ease-out, box-shadow .26s ease-out;
  }
  .ticket-card:hover { border-color: rgba(25,27,25,.28); background: #FFFFFF; box-shadow: var(--shadow); }
  .ticket-code { font-size: 12px; font-weight: 700; color: var(--accent); letter-spacing: .18em; }
  .ticket-card h3 { font-size: 20px; font-weight: 800; color: var(--ink); margin-top: 8px; }
  .ticket-desc { font-size: 14px; color: var(--muted); line-height: 1.7; margin-top: 8px; padding-bottom: 16px; border-bottom: 1px solid var(--line-soft); }
  .ticket-feature-list { padding: 14px 0 0; display: grid; gap: 8px; }
  .ticket-feature-list li { display: flex; gap: 8px; font-size: 13px; line-height: 1.6; color: #45423e; }
  .ticket-feature-list li::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 999px; background: var(--accent); margin-top: 9px; }
  .card-footnote { margin-top: auto; padding-top: 18px; font-size: 12px; color: var(--muted); }

  .flow-panel { background: var(--ink); color: var(--paper-light); padding: 54px 0; }
  @media (min-width: 768px) { .flow-panel { padding: 84px 0; } }
  .flow-panel .section-index { color: var(--accent); }
  .flow-panel h2 { color: var(--paper-light); }
  .flow-grid { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 16px; }
  @media (min-width: 768px) { .flow-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1100px) { .flow-grid { grid-template-columns: repeat(4, 1fr); } }
  .flow-step {
    position: relative;
    border: 1px solid var(--line-dark);
    padding: 26px 22px;
    background: rgba(244, 241, 234, .03);
    border-radius: 2px;
    min-height: 210px;
    transition: border-color .24s ease-out, background-color .24s ease-out;
  }
  .flow-step:hover { border-color: rgba(244,241,234,.34); background: rgba(244, 241, 234, .06); }
  .flow-step .flow-num { display: block; font-size: 13px; color: var(--accent); font-weight: 700; letter-spacing: .16em; }
  .flow-step h3 { margin-top: 14px; font-size: 20px; font-weight: 800; color: var(--paper-light); }
  .flow-step p { margin-top: 10px; font-size: 14px; color: #B8B2A5; line-height: 1.75; }
  .flow-step::after { content: "→"; position: absolute; right: 18px; bottom: 16px; font-size: 22px; color: var(--accent); opacity: 0; transform: translateX(-6px); transition: opacity .24s ease-out, transform .24s ease-out; }
  @media (min-width: 1100px) { .flow-step::after { opacity: .5; } }
  .flow-step:hover::after { opacity: 1; transform: translateX(0); }

  .guide-two-col { display: grid; grid-template-columns: 1fr; gap: 36px; align-items: center; }
  @media (min-width: 1024px) { .guide-two-col { grid-template-columns: 1fr .9fr; gap: 64px; } }
  .guide-copy h3 { font-size: 24px; line-height: 1.35; font-weight: 800; color: var(--ink); margin-top: 6px; }
  .guide-copy p { margin-top: 14px; color: var(--muted); font-size: 15px; }
  .mini-tip-list { margin-top: 24px; border-top: 1px solid var(--line-soft); }
  .mini-tip-list li { display: grid; grid-template-columns: 58px 1fr; gap: 14px; align-items: center; padding: 16px 2px; border-bottom: 1px solid var(--line-soft); }
  .mini-tip-list li strong { font-size: 13px; color: var(--accent); font-weight: 700; letter-spacing: .1em; }
  .mini-tip-list li span { font-size: 15px; color: var(--text); }
  .guide-visual { position: relative; }
  .guide-visual img { width: 100%; border-radius: 2px; object-fit: cover; aspect-ratio: 5 / 4; box-shadow: var(--shadow); border: 1px solid var(--line-soft); }

  .faq-area { background: #FCFAF6; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .faq-layout { display: grid; grid-template-columns: 1fr; gap: 32px; }
  @media (min-width: 1024px) { .faq-layout { grid-template-columns: .7fr 1.3fr; gap: 72px; } }
  .faq-aside { padding-right: 12px; }
  .faq-aside p { margin-top: 16px; color: var(--muted); font-size: 15px; }
  .faq-list { border-top: 1px solid var(--line); }
  .faq-item { border-bottom: 1px solid var(--line); position: relative; }
  .faq-item::before { content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 2px; background: var(--accent); transform: scaleY(0); transform-origin: bottom; transition: transform .3s ease-out; }
  .faq-item.open::before { transform: scaleY(1); transform-origin: top; }
  .faq-q { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; width: 100%; min-height: 54px; padding: 18px 0 14px; text-align: left; font-size: 16px; font-weight: 700; color: var(--ink); cursor: pointer; }
  .faq-q:hover span { color: var(--ink-2); }
  .faq-icon { flex: none; display: block; width: 20px; height: 20px; margin-top: 5px; }
  .faq-icon .vline { stroke: var(--ink); transition: transform .28s ease-out, opacity .28s ease-out; transform-origin: center; }
  .faq-icon .hline { stroke: var(--ink); }
  .faq-item.open .faq-icon .vline { transform: rotate(90deg); opacity: 0; }
  .faq-a { max-height: 0; overflow: hidden; opacity: 0; transition: max-height .3s ease-out, opacity .3s ease-out; }
  .faq-item.open .faq-a { max-height: 520px; opacity: 1; }
  .faq-answer-inner { padding: 0 34px 22px 2px; font-size: 15px; color: var(--muted); line-height: 1.85; }
  .faq-answer-inner p + p { margin-top: 10px; }

  .safe-note { padding: 0 0 80px; background: #FCFAF6; }
  @media (min-width: 768px) { .safe-note { padding-bottom: 96px; } }
  .safe-box { background: var(--ink); color: var(--paper-light); border-radius: 2px; padding: 38px 30px; position: relative; overflow: hidden; }
  @media (min-width: 768px) { .safe-box { padding: 58px 60px; } }
  .safe-box::after { content: "购票攻略"; position: absolute; writing-mode: vertical-rl; right: 24px; bottom: 16px; color: rgba(244,241,234,.1); font-size: 58px; font-weight: 800; letter-spacing: .18em; line-height: 1; pointer-events: none; }
  .safe-kicker { font-size: 13px; letter-spacing: .18em; font-weight: 700; color: var(--accent); display: flex; align-items: center; gap: 10px; }
  .safe-box h2 { max-width: 600px; font-size: clamp(1.7rem, 3vw, 2.5rem); line-height: 1.25; font-weight: 800; color: var(--paper-light); margin: 14px 0 16px; }
  .safe-box p { max-width: 660px; color: #B8B2A5; font-size: 15px; }
  .safe-cta-row { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; margin-top: 32px; }
  .btn-light { background: var(--paper-light); color: var(--ink); }
  .btn-light:hover { background: #FFFFFF; }
  .btn-light svg { transition: transform .24s ease-out; }
  .btn-light:hover svg { transform: translateX(4px); }
  .btn-outline-light { border: 1px solid rgba(244,241,234,.5); color: var(--paper-light); }
  .btn-outline-light:hover { border-color: #FFFFFF; background: rgba(244,241,234,.08); }
  .help-phone { color: #EDE8DF; font-size: 15px; }
  .help-phone strong { font-weight: 800; margin-left: 4px; }

  .site-footer { background: var(--ink); color: #A9A297; padding-top: 72px; }
  .footer-grid { display: grid; gap: 38px; grid-template-columns: 1fr; }
  .site-footer .brand-name { color: var(--paper-light); }
  .site-footer .brand-mark::before { border-color: var(--paper-light); }
  .site-footer p { font-size: 14px; line-height: 1.8; }
  .footer-title { font-size: 14px; font-weight: 700; color: var(--paper-light); letter-spacing: .08em; margin-bottom: 14px; }
  .footer-links li + li { margin-top: 8px; }
  .footer-links a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #B8B2A5;
    transition: color .22s ease-out, padding-left .22s ease-out;
    position: relative;
  }
  .footer-links a::before { content: "—"; color: var(--accent); font-size: 12px; opacity: 0; transition: opacity .22s ease-out; }
  .footer-links a:hover { color: var(--paper-light); padding-left: 10px; }
  .footer-links a:hover::before { opacity: 1; }
  .footer-bottom { border-top: 1px solid var(--line-dark); margin-top: 52px; padding: 20px 0 26px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font-size: 13px; color: #8F8980; }
  @media (min-width: 900px) {
    .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: 24px; }
  }

  .reveal { opacity: 1; transform: none; transition: opacity .5s ease-out, transform .5s ease-out; }
  body.js .reveal { opacity: 0; transform: translateY(16px); }
  body.js .reveal.is-visible { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
    body.js .reveal { opacity: 1; transform: none; }
  }

  @media (max-width: 1023px) {
    .site-nav {
      display: none;
      position: absolute;
      top: calc(100% + 8px);
      left: 16px;
      right: 16px;
      z-index: 90;
      flex-direction: column;
      align-items: stretch;
      background: #FCFAF6;
      border: 1px solid var(--line);
      border-radius: 2px;
      box-shadow: var(--shadow);
      padding: 16px;
      margin: 0;
      gap: 2px;
    }
    .site-nav.is-open { display: flex; }
    .site-head-link { display: block; padding: 12px 6px; margin: 0; border-bottom: 1px solid var(--line-soft); font-size: 15px; }
    .site-head-link::after { display: none; }
    .site-head-link.active { background: rgba(25,27,25,.02); }
    .nav-drop { width: 100%; margin-left: 0; margin-top: 8px; }
    .nav-drop-btn { width: 100%; justify-content: space-between; padding: 13px 11px; }
    .drop-panel { position: static; transform: none; opacity: 1; visibility: hidden; max-height: 0; overflow: hidden; width: 100%; box-shadow: none; padding: 0; border: 0; transition: max-height .28s ease-out, visibility .18s, opacity .18s ease-out; }
    .nav-drop.is-open .drop-panel { visibility: visible; opacity: 1; max-height: 360px; }
    .drop-panel a { padding: 10px 12px; border-bottom: 1px solid var(--line-soft); }
    .drop-panel a:hover { padding-left: 14px; }
    .burger-btn { display: inline-flex; }
  }
  @media (max-width: 640px) {
    .brand-name { font-size: 17px; letter-spacing: .04em; }
    .header-inner { gap: 10px; }
    .site-nav { left: 10px; right: 10px; }
    .btn-cta { padding: 0 14px; height: 42px; font-size: 13px; }
    .brand-mark { width: 24px; height: 24px; }
    .brand-mark::before { inset: 1px; }
    .brand-mark::after { inset: 6px; }
    .page-hero-inner { padding-top: 42px; padding-bottom: 38px; }
  }

/* roulang page: category4 */
:root{
    --ink:#191B19;
    --ink-2:#2A2D2A;
    --paper:#F6F4EF;
    --paper-2:#EBE7DF;
    --accent:#B18C5E;
    --body:#2A2A28;
    --muted:#6B665E;
    --cream:#F4F1EA;
    --dark-weak:#A9A297;
    --line:rgba(25,27,25,.14);
    --dark-line:rgba(244,241,234,.18);
    --error:#B34734;
    --success:#2E6B4F;
    --disabled:#99918A;
    --radius:2px;
  }

  html{
    scroll-behavior:smooth;
    scroll-padding-top:96px;
  }

  *{
    box-sizing:border-box;
  }

  body{
    margin:0;
    font-family:"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
    background:var(--paper);
    color:var(--body);
    line-height:1.75;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }

  h1,h2,h3,h4,p,ol,ul,figure{
    margin:0;
  }

  img{
    max-width:100%;
    display:block;
  }

  a{
    color:inherit;
    text-decoration:none;
  }

  button,input,select,textarea{
    font:inherit;
    color:inherit;
    border:none;
    background:none;
  }

  .container{
    width:100%;
    max-width:1200px;
    margin-inline:auto;
    padding-inline:24px;
  }

  @media (min-width:640px){
    .container{
      padding-inline:32px;
    }
  }

  @media (min-width:1200px){
    .container{
      padding-inline:32px;
    }
  }

  .reveal{
    opacity:1;
    transform:none;
    transition:opacity .5s ease-out, transform .5s ease-out;
  }

  html.js .reveal{
    opacity:0;
    transform:translateY(18px);
  }

  html.js .reveal.revealed{
    opacity:1;
    transform:none;
  }

  @media (prefers-reduced-motion: reduce){
    html{
      scroll-behavior:auto;
    }
    html.js .reveal{
      opacity:1;
      transform:none;
      transition:none;
    }
    *{
      transition-duration:.01ms !important;
    }
  }

  /* ---------- Header ---------- */
  .site-header{
    position:fixed;
    inset:0 0 auto 0;
    z-index:90;
    background:rgba(246,244,239,.9);
    -webkit-backdrop-filter:blur(16px);
    backdrop-filter:blur(16px);
    border-bottom:1px solid rgba(25,27,25,.08);
  }

  .header-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    height:72px;
  }

  .brand-logo{
    display:inline-flex;
    align-items:center;
    gap:10px;
    flex:0 0 auto;
  }

  .brand-mark{
    position:relative;
    width:28px;
    height:28px;
    border:1px solid var(--ink);
    background:linear-gradient(135deg, transparent 45%, var(--ink) 45% 52%, transparent 52%),
      linear-gradient(45deg, var(--accent) 0 20%, transparent 20%);
  }

  .brand-mark::before{
    content:"";
    position:absolute;
    left:4px;
    top:4px;
    width:18px;
    height:18px;
    border-top:2px solid var(--accent);
    border-right:2px solid var(--accent);
  }

  .brand-name{
    font-size:19px;
    font-weight:800;
    letter-spacing:.05em;
    color:var(--ink);
    white-space:nowrap;
  }

  .site-nav{
    display:flex;
    align-items:center;
    gap:30px;
  }

  .site-head-link{
    font-size:14px;
    font-weight:600;
    letter-spacing:.02em;
    color:var(--body);
    opacity:.72;
    padding:8px 0;
    border-bottom:2px solid transparent;
    transition:color .2s ease,opacity .2s ease,border-color .2s ease;
  }

  .site-head-link:hover{
    color:var(--ink);
    opacity:1;
    border-color:var(--accent);
  }

  .site-head-link.active{
    color:var(--ink);
    opacity:1;
    border-color:var(--accent);
  }

  .nav-drop{
    position:relative;
  }

  .nav-drop-btn{
    display:inline-flex;
    align-items:center;
    gap:6px;
    min-height:40px;
    padding:0 14px;
    background:rgba(255,255,255,.45);
    border:1px solid var(--line);
    border-radius:var(--radius);
    font-size:14px;
    font-weight:600;
    color:var(--body);
    cursor:pointer;
    transition:border-color .2s ease,background .2s ease;
  }

  .nav-drop-btn:hover{
    border-color:var(--accent);
    background:rgba(255,255,255,.75);
  }

  .nav-drop-btn svg{
    transition:transform .2s ease;
  }

  .nav-drop.open .nav-drop-btn svg{
    transform:rotate(180deg);
  }

  .drop-panel{
    position:absolute;
    top:calc(100% + 10px);
    left:50%;
    width:236px;
    transform:translateX(-50%);
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:2px;
    box-shadow:0 18px 44px rgba(25,27,25,.12);
    padding:8px;
    opacity:0;
    visibility:hidden;
    transform:translateX(-50%) translateY(8px);
    transition:opacity .22s ease,visibility .22s ease,transform .22s ease;
  }

  .nav-drop.open .drop-panel{
    opacity:1;
    visibility:visible;
    transform:translateX(-50%) translateY(0);
  }

  .drop-panel a{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    min-height:44px;
    padding:8px 12px;
    border-radius:2px;
    font-size:14px;
    font-weight:500;
    color:var(--body);
    transition:background .2s ease;
  }

  .drop-panel a::after{
    content:"";
    width:14px;
    height:14px;
    opacity:0;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B18C5E' stroke-width='1.5'%3E%3Cpath d='M5 12h14m-6-6 6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
    transition:opacity .2s ease,transform .2s ease;
  }

  .drop-panel a:hover{
    background:var(--paper-2);
  }

  .drop-panel a:hover::after{
    opacity:1;
    transform:translateX(2px);
  }

  .drop-panel a.drop-active{
    background:var(--paper-2);
    font-weight:800;
    color:var(--ink);
    position:relative;
  }

  .drop-panel a.drop-active::before{
    content:"";
    width:2px;
    height:18px;
    background:var(--accent);
    position:absolute;
    left:0;
    top:50%;
    transform:translateY(-50%);
  }

  .header-actions{
    display:flex;
    align-items:center;
    gap:10px;
  }

  .btn-cta{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    height:44px;
    padding:0 22px;
    background:var(--ink);
    color:var(--paper);
    border-radius:var(--radius);
    font-size:14px;
    font-weight:700;
    letter-spacing:.03em;
    cursor:pointer;
    transition:background .2s ease,color .2s ease;
  }

  .btn-cta:hover{
    background:var(--ink-2);
    color:#fff;
  }

  .btn-cta svg{
    transition:transform .2s ease;
  }

  .btn-cta:hover svg{
    transform:translateX(3px);
  }

  .burger-btn{
    display:none;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    border:1px solid var(--line);
    border-radius:var(--radius);
    cursor:pointer;
    color:var(--ink);
    transition:border-color .2s ease;
  }

  .burger-btn:hover{
    border-color:var(--accent);
  }

  @media (max-width:1023px){
    .site-nav{
      position:fixed;
      top:72px;
      left:0;
      right:0;
      bottom:0;
      z-index:88;
      display:none;
      background:var(--paper);
      padding:30px 24px 40px;
      flex-direction:column;
      align-items:flex-start;
      gap:6px;
      overflow-y:auto;
      border-top:1px solid var(--line);
    }

    .site-nav.open{
      display:flex;
    }

    .site-head-link{
      display:block;
      width:100%;
      min-height:48px;
      padding:12px 4px;
      font-size:16px;
      border-bottom:1px solid transparent;
    }

    .nav-drop{
      width:100%;
      margin-top:10px;
    }

    .nav-drop-btn{
      width:100%;
      justify-content:space-between;
      padding:0 12px;
      min-height:48px;
    }

    .drop-panel,
    .nav-drop.open .drop-panel{
      position:static;
      transform:none;
      opacity:1;
      visibility:visible;
      width:100%;
      margin-top:8px;
      box-shadow:none;
      background:rgba(255,255,255,.42);
    }

    .drop-panel a{
      min-height:46px;
    }

    .burger-btn{
      display:inline-flex;
    }
  }

  @media (max-width:520px){
    .cta-label{
      display:none;
    }
    .btn-cta{
      width:44px;
      padding:0;
    }
    .btn-cta svg{
      display:block;
    }
  }

  /* ---------- page hero ---------- */
  .category-hero{
    position:relative;
    padding:152px 0 64px;
    border-bottom:1px solid var(--line);
    background:
      linear-gradient(90deg, rgba(246,244,239,.98) 0%, rgba(246,244,239,.95) 48%, rgba(246,244,239,.72) 100%),
      url('/assets/images/backpic/back-2.png') no-repeat right center / cover;
  }

  .breadcrumb{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:28px;
    font-size:13px;
    letter-spacing:.02em;
    color:var(--muted);
  }

  .breadcrumb a{
    transition:color .2s ease;
  }

  .breadcrumb a:hover{
    color:var(--ink);
  }

  .eyebrow{
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-size:13px;
    font-weight:700;
    letter-spacing:.18em;
    color:var(--accent);
    margin-bottom:16px;
  }

  .eyebrow::before{
    content:"";
    width:24px;
    height:1px;
    background:var(--accent);
  }

  .category-hero h1{
    font-size:clamp(2.75rem,6vw,4.25rem);
    font-weight:800;
    line-height:1.06;
    letter-spacing:-.01em;
    color:var(--ink);
  }

  .hero-lead{
    max-width:560px;
    margin-top:20px;
    font-size:17px;
    line-height:1.85;
    color:var(--muted);
  }

  .hero-note{
    margin-top:18px;
    max-width:620px;
    font-size:14px;
    color:var(--muted);
    border-left:2px solid var(--accent);
    padding-left:14px;
  }

  .hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:30px;
  }

  .btn-primary{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    height:48px;
    padding:0 24px;
    background:var(--ink);
    color:var(--paper);
    border-radius:2px;
    font-size:14px;
    font-weight:700;
    letter-spacing:.03em;
    transition:background .2s ease,transform .2s ease;
  }

  .btn-primary:hover{
    background:var(--ink-2);
  }

  .btn-primary svg{
    transition:transform .2s ease;
  }

  .btn-primary:hover svg{
    transform:translateX(3px);
  }

  .btn-ghost{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:48px;
    padding:0 24px;
    border:1px solid var(--line);
    border-radius:2px;
    font-size:14px;
    font-weight:600;
    color:var(--body);
    background:transparent;
    transition:border-color .2s ease,background .2s ease;
  }

  .btn-ghost:hover{
    border-color:var(--accent);
    background:rgba(177,140,94,.06);
  }

  /* ---------- metric band ---------- */
  .metric-band{
    background:var(--paper);
    border-bottom:1px solid var(--line);
  }

  .metric-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    padding:34px 0;
  }

  .metric-item{
    padding:6px 24px;
    border-left:1px solid var(--line);
  }

  .metric-item:first-child{
    border-left:0;
    padding-left:0;
  }

  .metric-item strong{
    display:block;
    font-size:clamp(1.6rem,3vw,2.35rem);
    font-weight:800;
    line-height:1.2;
    font-variant-numeric:tabular-nums;
    color:var(--ink);
    letter-spacing:-.02em;
  }

  .metric-item small{
    display:block;
    margin-top:6px;
    font-size:13px;
    color:var(--muted);
    letter-spacing:.04em;
  }

  @media (max-width:900px){
    .metric-grid{
      grid-template-columns:1fr 1fr;
      row-gap:26px;
    }
    .metric-item:nth-child(3){
      border-left:0;
      padding-left:0;
    }
    .metric-item:nth-child(n+3){
      padding-left:0;
    }
  }

  /* ---------- layout guide ---------- */
  .guide-layout{
    display:grid;
    grid-template-columns:252px minmax(0,1fr);
    gap:60px;
    padding-block:72px 84px;
  }

  .toc-box{
    align-self:start;
    position:sticky;
    top:100px;
  }

  .toc-label{
    font-size:12px;
    font-weight:700;
    letter-spacing:.16em;
    color:var(--accent);
    margin-bottom:16px;
  }

  .toc-box nav{
    border-top:1px solid var(--line);
  }

  .toc-box nav a{
    display:block;
    padding:12px 2px;
    font-size:14px;
    font-weight:500;
    color:var(--muted);
    border-bottom:1px solid var(--line);
    transition:color .2s ease,padding-left .2s ease;
  }

  .toc-box nav a:hover{
    color:var(--ink);
    padding-left:6px;
  }

  .guide-main{
    min-width:0;
  }

  .guide-section{
    scroll-margin-top:96px;
    padding-bottom:46px;
    margin-bottom:46px;
    border-bottom:1px solid var(--line);
  }

  .guide-kicker{
    display:flex;
    align-items:baseline;
    gap:14px;
    margin-bottom:12px;
  }

  .guide-kicker span{
    font-size:14px;
    font-weight:800;
    font-variant-numeric:tabular-nums;
    color:var(--accent);
    letter-spacing:.04em;
  }

  .guide-kicker small{
    font-size:13px;
    font-weight:600;
    letter-spacing:.14em;
    color:var(--muted);
  }

  .guide-section h2{
    font-size:clamp(1.55rem,2.8vw,2rem);
    font-weight:800;
    line-height:1.25;
    color:var(--ink);
    letter-spacing:-.01em;
    margin-bottom:14px;
  }

  .guide-section .guide-intro{
    max-width:700px;
    font-size:15px;
    color:var(--muted);
    margin-bottom:22px;
  }

  .guide-text{
    max-width:720px;
    font-size:15px;
    line-height:1.8;
    color:var(--body);
  }

  .guide-text p + p{
    margin-top:14px;
  }

  .info-list{
    border-top:1px solid var(--line);
    margin-top:24px;
  }

  .info-row{
    display:grid;
    grid-template-columns:112px minmax(0,1fr);
    gap:18px;
    padding:18px 0;
    border-bottom:1px solid var(--line);
    transition:background .2s ease;
  }

  .info-row:hover{
    background:rgba(255,255,255,.38);
  }

  .info-row strong{
    font-size:14px;
    font-weight:800;
    color:var(--ink);
    letter-spacing:.02em;
    padding-top:2px;
  }

  .info-row p{
    font-size:14px;
    line-height:1.8;
    color:var(--muted);
  }

  @media (max-width:700px){
    .info-row{
      grid-template-columns:1fr;
      gap:6px;
      padding:16px 2px;
    }
  }

  .guide-image{
    margin-top:28px;
    border-radius:2px;
    overflow:hidden;
    border:1px solid var(--line);
    position:relative;
  }

  .guide-image img{
    width:100%;
    height:auto;
    object-fit:cover;
    aspect-ratio:16/8;
  }

  .guide-image figcaption{
    position:absolute;
    left:12px;
    bottom:12px;
    font-size:12px;
    font-weight:600;
    color:var(--paper);
    background:rgba(25,27,25,.72);
    padding:6px 12px;
    border-radius:2px;
    letter-spacing:.02em;
  }

  /* ---------- FAQ ---------- */
  .faq-wrap{
    background:#EFECE5;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    padding:88px 0;
  }

  .faq-layout{
    display:grid;
    grid-template-columns:minmax(0,330px) minmax(0,760px);
    gap:64px;
    align-items:start;
  }

  .faq-title-area h2{
    font-size:clamp(1.75rem,3vw,2.5rem);
    font-weight:800;
    color:var(--ink);
    line-height:1.2;
    letter-spacing:-.01em;
  }

  .faq-title-area p{
    margin-top:14px;
    font-size:14px;
    color:var(--muted);
    line-height:1.8;
  }

  .faq-list{
    border-top:1px solid var(--line);
  }

  .faq-item{
    border-bottom:1px solid var(--line);
    position:relative;
  }

  .faq-item.active{
    background:rgba(255,255,255,.28);
  }

  .faq-item.active::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    height:100%;
    width:2px;
    background:var(--accent);
  }

  .faq-question{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    width:100%;
    min-height:60px;
    padding:14px 14px 14px 4px;
    text-align:left;
    cursor:pointer;
    color:var(--ink);
    font-size:16px;
    font-weight:700;
    line-height:1.5;
    transition:color .2s ease;
  }

  .faq-question:hover{
    color:var(--accent);
  }

  .faq-icon{
    flex:0 0 auto;
    width:22px;
    height:22px;
    position:relative;
    border:1px solid var(--line);
    border-radius:50%;
    transition:border-color .2s ease,background .2s ease;
  }

  .faq-icon::before,
  .faq-icon::after{
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    width:10px;
    height:1.5px;
    background:var(--ink);
    transform:translate(-50%,-50%);
    transition:transform .25s ease,background .25s ease;
  }

  .faq-icon::after{
    transform:translate(-50%,-50%) rotate(90deg);
  }

  .faq-item.active .faq-icon::after{
    transform:translate(-50%,-50%) rotate(0deg);
  }

  .faq-answer{
    overflow:hidden;
    max-height:0;
    transition:max-height .28s ease;
  }

  .faq-answer-inner{
    padding:0 34px 22px 4px;
    font-size:15px;
    line-height:1.85;
    color:var(--muted);
  }

  /* ---------- CTA ---------- */
  .cta-section{
    background:
      linear-gradient(to top, rgba(25,27,25,.08), rgba(25,27,25,.08)),
      url('/assets/images/backpic/back-3.webp') center/cover no-repeat;
    padding:98px 0;
    position:relative;
  }

  .cta-inner{
    max-width:760px;
    margin:0 auto;
    text-align:center;
    background:rgba(246,244,239,.92);
    border:1px solid rgba(25,27,25,.1);
    border-radius:2px;
    padding:56px 44px;
  }

  .cta-inner h2{
    font-size:clamp(1.8rem,3.2vw,2.5rem);
    font-weight:800;
    color:var(--ink);
    line-height:1.2;
  }

  .cta-inner .cta-note{
    margin-top:14px;
    font-size:15px;
    color:var(--muted);
    line-height:1.8;
  }

  .cta-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    justify-content:center;
    margin-top:28px;
  }

  /* ---------- footer ---------- */
  .site-footer{
    background:var(--ink);
    color:#BDB7AE;
    font-size:14px;
    line-height:1.75;
  }

  .site-footer::before{
    content:"";
    display:block;
    height:2px;
    background:var(--accent);
  }

  .footer-grid{
    display:grid;
    grid-template-columns:1.35fr 1fr 1fr 1.2fr;
    gap:44px;
    padding-block:56px 42px;
    color:#BDB7AE;
  }

  .footer-grid a{
    color:#BDB7AE;
  }

  .footer-grid p{
    color:#BDB7AE;
    font-size:14px;
    line-height:1.8;
  }

  .footer-title{
    font-size:13px;
    font-weight:700;
    letter-spacing:.1em;
    color:#D6D0C6;
    margin-bottom:14px;
  }

  .footer-links{
    list-style:none;
    padding:0;
    margin:0;
    display:grid;
    gap:6px;
  }

  .footer-links a{
    color:#A9A297;
    font-size:14px;
    transition:color .2s ease;
    position:relative;
  }

  .footer-links a:hover{
    color:#F4F1EA;
  }

  .footer-bottom{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:10px;
    padding:22px 0 26px;
    border-top:1px solid rgba(244,241,234,.14);
    color:#8D877C;
    font-size:13px;
    letter-spacing:.02em;
  }

  @media (max-width:900px){
    .footer-grid{
      grid-template-columns:1fr 1fr;
    }
    .guide-layout{
      grid-template-columns:1fr;
      gap:40px;
      padding-top:56px;
    }
    .toc-box{
      position:static;
    }
    .faq-layout{
      grid-template-columns:1fr;
      gap:32px;
    }
    .faq-title-area p{
      max-width:600px;
    }
  }

  @media (max-width:600px){
    .footer-grid{
      grid-template-columns:1fr;
      gap:32px;
      padding-top:44px;
    }
    .footer-bottom{
      flex-direction:column;
      align-items:flex-start;
    }
    .category-hero{
      padding:126px 0 50px;
    }
    .cta-inner{
      padding:42px 22px;
    }
    .metric-grid{
      grid-template-columns:1fr;
      row-gap:20px;
    }
    .metric-item,
    .metric-item:nth-child(3),
    .metric-item:first-child{
      border-left:1px solid var(--line);
      padding-left:18px;
    }
    .metric-item{
      border-left:1px solid var(--line);
      padding-left:18px;
    }
  }

  a:focus-visible,button:focus-visible{
    outline:2px dashed var(--accent);
    outline-offset:3px;
  }

  .btn-primary:focus-visible,.btn-ghost:focus-visible,.btn-cta:focus-visible{
    outline:2px dashed var(--accent);
    outline-offset:3px;
  }

  .notice-placeholder{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:140px;
    border:1px dashed var(--line);
    border-radius:2px;
    color:var(--muted);
    font-size:14px;
    background:rgba(255,255,255,.3);
    margin-top:18px;
  }