/* roulang page: index */
:root {
    --bg-paper: #F7F4EE;
    --bg-dark: #141312;
    --bg-dark2: #1E1C19;
    --bg-dark3: #24211C;
    --ink: #1E1B16;
    --ink-soft: #6A625A;
    --ink-light: #8D857C;
    --warm-white: #F4EFE6;
    --warm-muted: #A49B92;
    --red: #C8402F;
    --red-dark: #8F2A1C;
    --gold: #B58A4B;
    --gold-light: #D1AD76;
    --line-light: #D9D2C5;
    --line-dark: rgba(181,138,75,.34);
    --radius-lg: 14px;
    --radius-md: 6px;
    --radius-sm: 3px;
    --shadow-card: 0 14px 34px rgba(30,24,14,.08);
    --maxw: 1320px;
    --font-sans: -apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:var(--font-sans); color:var(--ink); background:var(--bg-paper); font-size:16px; line-height:1.75; -webkit-font-smoothing:antialiased; }
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
button { font-family:inherit; cursor:pointer; }
ul,ol { list-style:none; }
.container { max-width:var(--maxw); margin:0 auto; padding-left:24px; padding-right:24px; width:100%; }
.text-gold { color:var(--gold); }
.text-red { color:var(--red); }

.topbar { background:#0B0A09; color:var(--warm-muted); font-size:13px; border-bottom:1px solid rgba(255,255,255,.04); }
.topbar .container { display:flex; align-items:center; justify-content:space-between; min-height:44px; gap:18px; }
.topbar .top-domain { font-family:"SF Mono",Consolas,"Liberation Mono",monospace; letter-spacing:.02em; color:#A49B92; }
.topbar .top-links { display:flex; align-items:center; gap:10px 24px; font-size:13px; }
.topbar .top-links a:hover { color:#fff; }
.topbar .top-cta { color:var(--gold-light); border-bottom:1px solid rgba(181,138,75,.5); }
.topbar .top-cta:hover { color:#fff; border-color:var(--gold); }

.site-header { position:sticky; top:0; z-index:100; background:rgba(20,19,18,.72); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); transition:background .3s,border-color .3s; border-bottom:1px solid rgba(255,255,255,.05); }
.site-header .header-inner { height:80px; display:flex; align-items:center; justify-content:space-between; gap:24px; max-width:var(--maxw); margin:0 auto; padding-left:24px; padding-right:24px; width:100%; }
.brand { display:flex; align-items:baseline; gap:8px; white-space:nowrap; line-height:1.1; }
.brand-name { font-size:24px; font-weight:900; letter-spacing:.02em; color:var(--warm-white); }
.brand-name span { font-weight:400; color:var(--gold); margin-left:2px; }
.brand-tag { font-size:12px; color:var(--warm-muted); border-left:1px solid rgba(181,138,75,.4); padding-left:10px; letter-spacing:.08em; text-transform:uppercase; display:none; }
.main-nav { display:flex; align-items:center; gap:34px; }
.main-nav a { position:relative; font-size:15px; color:var(--warm-muted); padding:6px 0; transition:color .25s; }
.main-nav a:after { content:""; position:absolute; left:0; bottom:0; width:0; height:2px; background:var(--gold); transition:width .25s; }
.main-nav a:hover { color:var(--warm-white); }
.main-nav a:hover:after { width:100%; }
.main-nav a.active { color:var(--warm-white); }
.main-nav a.active:after { width:100%; background:var(--red); }
.nav-enter { display:inline-flex; align-items:center; border:1px solid var(--gold); color:var(--gold-light); padding:8px 20px; border-radius:var(--radius-sm); font-size:14px; transition:background .25s,border-color .25s,color .25s,transform .2s; }
.nav-enter:hover { background:var(--red); border-color:var(--red); color:#fff; transform:translateY(-1px); }
.menu-toggle { display:none; flex-direction:column; justify-content:center; gap:5px; width:44px; height:44px; background:none; border:1px solid rgba(255,255,255,.2); border-radius:var(--radius-sm); padding:0 8px; }
.menu-toggle span { height:1.5px; width:100%; background:var(--warm-white); display:block; }

.hero { position:relative; min-height:calc(100vh - 42px); display:flex; align-items:center; overflow:hidden; background:var(--bg-dark); color:var(--warm-white); }
.hero-bg { position:absolute; inset:0; background:linear-gradient(90deg, rgba(10,8,7,.97) 0%, rgba(13,10,8,.84) 42%, rgba(20,18,17,.36) 100%), url("/assets/images/backpic/back-1.png") center 30%/cover no-repeat; }
.hero-bg:after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 60%, rgba(20,19,18,.94) 100%); }
.hero .main { position:relative; z-index:2; padding:120px 0 100px; width:100%; }
.hero-eyebrow { display:inline-flex; gap:10px; align-items:center; border:1px solid rgba(181,138,75,.42); color:var(--gold-light); padding:7px 16px; font-size:13px; letter-spacing:.06em; background:rgba(20,18,17,.25); border-radius:50px; margin-bottom:24px; }
.hero-eyebrow i { width:6px; height:6px; background:var(--red); border-radius:50%; display:inline-block; }
.hero h1 { font-size:clamp(40px,6vw,68px); font-weight:900; line-height:1.16; letter-spacing:0; margin-bottom:22px; white-space:normal; }
.hero h1 .brand-accent { color:var(--warm-white); }
.hero h1 .gold { color:var(--gold-light); }
.hero-lead { font-size:17px; line-height:1.9; color:#D8D0C6; max-width:620px; margin-bottom:28px; }
.hero-divider { width:72px; height:2px; background:linear-gradient(90deg,var(--gold),transparent); margin-bottom:24px; display:block; }
.hero-tags { display:flex; flex-wrap:wrap; gap:10px 18px; margin-bottom:32px; font-size:13px; color:var(--warm-muted); }
.hero-tags span { position:relative; padding-left:16px; }
.hero-tags span:before { content:""; position:absolute; left:0; top:50%; width:6px; height:6px; transform:translateY(-50%); background:var(--red); border-radius:1px; }
.hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:16px 18px; }
.btn { display:inline-flex; align-items:center; justify-content:center; border-radius:var(--radius-sm); font-weight:600; letter-spacing:.04em; border:1px solid transparent; transition:background .25s,color .25s,box-shadow .25s,transform .2s,border-color .25s; }
.btn-primary { background:var(--red); color:#fff; padding:15px 38px; font-size:16px; }
.btn-primary:hover { background:var(--red-dark); transform:translateY(-2px); box-shadow:0 12px 24px rgba(200,64,47,.22); }
.btn-outline { border-color:var(--gold); color:var(--gold-light); padding:14px 34px; font-size:15px; background:rgba(20,18,17,.25); }
.btn-outline:hover { background:var(--gold); color:var(--bg-dark); transform:translateY(-2px); box-shadow:0 12px 24px rgba(181,138,75,.20); }
.btn-plain { display:inline-flex; align-items:center; gap:8px; color:var(--warm-white); border-bottom:1px solid rgba(255,255,255,.3); padding:10px 2px; font-size:15px; }
.btn-plain:hover { border-color:var(--gold); color:var(--gold-light); }
.scroll-hint { position:absolute; bottom:32px; left:24px; z-index:3; display:flex; align-items:center; gap:12px; color:var(--warm-muted); font-size:13px; letter-spacing:.2em; }
.scroll-hint:before { content:""; width:48px; height:1px; background:var(--gold); opacity:.7; }

.section { padding:100px 0; }
.section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:30px; margin-bottom:44px; }
.section-head .title-wrap { max-width:680px; }
.section-kicker { font-size:13px; letter-spacing:.16em; color:var(--red); text-transform:uppercase; margin-bottom:12px; display:flex; align-items:center; gap:12px; }
.section-kicker:after { content:""; width:34px; height:1px; background:var(--gold); display:inline-block; }
.section-head h2 { font-size:clamp(30px,4vw,42px); font-weight:800; line-height:1.22; letter-spacing:-.01em; }
.section-head .sub { color:var(--ink-soft); font-size:15px; line-height:1.8; margin-top:12px; }

.slider-controls { display:flex; align-items:center; gap:10px; }
.icon-arrow { width:46px; height:46px; background:transparent; border:1px solid var(--gold); color:var(--ink); border-radius:50%; display:inline-flex; align-items:center; justify-content:center; transition:all .25s; font-size:20px; }
.icon-arrow:hover { background:var(--red); border-color:var(--red); color:#fff; transform:translateY(-2px); }
.slide-area { overflow:hidden; margin:0 -12px; }
.slide-track { display:flex; gap:22px; overflow-x:auto; scroll-behavior:smooth; padding:4px 12px 24px; scrollbar-width:none; }
.slide-track::-webkit-scrollbar { display:none; }
.mini-card { flex:0 0 310px; scroll-snap-align:start; background:#fff; border:1px solid var(--line-light); border-radius:var(--radius-md); overflow:hidden; transition:transform .25s, box-shadow .25s; }
.mini-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-card); }
.mini-card .cover { height:184px; overflow:hidden; position:relative; }
.mini-card .cover img { width:100%; height:100%; object-fit:cover; transition:transform .3s; }
.mini-card:hover .cover img { transform:scale(1.03); }
.mini-card .cover .badge { position:absolute; left:12px; top:12px; background:var(--bg-dark); color:var(--warm-white); font-size:12px; padding:3px 12px; letter-spacing:.08em; border-radius:var(--radius-sm); border-left:2px solid var(--red); }
.mini-card .info { padding:18px 18px 20px; }
.mini-card .info h3 { font-size:17px; font-weight:700; line-height:1.5; margin-bottom:8px; }
.mini-card .info .meta-row { display:flex; align-items:center; color:var(--ink-light); font-size:12px; gap:10px; justify-content:space-between; border-top:1px solid #F0EAE0; padding-top:13px; margin-top:15px; }
.mini-card .info .meta-row a { color:var(--red); }
.cover-wide { flex:0 0 410px !important; }
.cover-wide .cover { height:220px; }

.hot-section { background:#e9e4db; position:relative; overflow:hidden; }
.hot-section .section-kicker { color:var(--red); }
.hot-layout { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:22px; }
.heat-card { position:relative; overflow:hidden; border-radius:var(--radius-md); box-shadow:var(--shadow-card); border:1px solid var(--line-light); background:var(--bg-dark); color:var(--warm-white); }
.heat-card .cover { background:var(--bg-dark); min-height:100%; position:absolute; inset:0; }
.heat-card .cover img { width:100%; height:100%; object-fit:cover; opacity:.88; transition:transform .3s,opacity .3s; }
.heat-card:hover .cover img { transform:scale(1.02); opacity:1; }
.heat-card .dim { position:absolute; inset:0; background:linear-gradient(180deg,rgba(20,18,17,.10) 15%,rgba(20,18,17,.82) 86%); }
.heat-card .dec { position:absolute; font-family:"Songti SC",serif; right:16px; top:4px; color:var(--gold); font-size:clamp(40px,6vw,78px); z-index:2; opacity:.64; line-height:1; }
.heat-card .body { position:relative; z-index:2; padding:24px; display:flex; flex-direction:column; justify-content:flex-end; min-height:100%; }
.heat-card .body h3 { font-size:22px; font-weight:800; margin-bottom:10px; }
.heat-card .body p { color:#C7BEB2; font-size:14px; line-height:1.7; margin-bottom:14px; }
.heat-card .body .link-more { color:var(--gold-light); font-size:13px; border-bottom:1px solid rgba(181,138,75,.5); padding-bottom:3px; display:inline-flex; align-items:center; width:max-content; letter-spacing:.03em; }
.main-heat { grid-column:span 7; min-height:310px; position:relative; }
.aux-heat { grid-column:span 5; min-height:310px; position:relative; }
.heat-trio { grid-column:span 4; min-height:250px; position:relative; }
@media(min-width:769px) and (max-width:1180px) {
    .main-heat, .aux-heat, .heat-trio { grid-column:span 6; }
}
@media(max-width:768px) {
    .main-heat, .aux-heat, .heat-trio { grid-column:span 12; min-height:260px; }
}

.channel-section { background:var(--bg-dark); color:var(--warm-white); }
.channel-band { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:36px; align-items:stretch; border:1px solid rgba(255,255,255,.07); background:var(--bg-dark2); padding:34px; border-radius:var(--radius-lg); }
.channel-feature { overflow:hidden; border-radius:var(--radius-md); position:relative; min-height:320px; }
.channel-feature img { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.channel-feature .cf-dim { position:absolute; z-index:2; inset:0; background:linear-gradient(17deg,rgba(10,9,8,.92) 0%,rgba(10,9,8,.3) 90%); display:flex; align-items:flex-end; padding:28px; }
.channel-feature .cf-dim .text { color:#fff; }
.channel-feature .cf-dim .label { font-size:12px; color:var(--gold-light); letter-spacing:.14em; margin-bottom:10px; }
.channel-feature .cf-dim h3 { font-size:26px; font-weight:800; line-height:1.3; }
.channel-feature .cf-dim p { font-size:14px; color:#B9B0A5; margin-top:12px; max-width:300px; line-height:1.7; }
.channel-item-list { display:flex; flex-direction:column; }
.ch-item { display:grid; grid-template-columns:56px 1fr auto auto; align-items:center; gap:14px; border-bottom:1px solid rgba(255,255,255,.08); padding:18px 0; transition:background .2s; }
.ch-item:last-child { border-bottom:0; }
.ch-item .no { font-family:"Songti SC",serif; font-size:26px; font-weight:700; color:var(--gold); line-height:1; }
.ch-item .body-c .name { font-size:16px; font-weight:700; color:var(--warm-white); }
.ch-item .body-c .desc { font-size:13px; color:var(--warm-muted); margin-top:2px; }
.ch-item .time { font-size:12px; color:var(--warm-muted); border:1px solid rgba(255,255,255,.15); padding:3px 9px; border-radius:var(--radius-sm); white-space:nowrap; }
.ch-item:hover { background:rgba(255,255,255,.02); }

.news-section { background:var(--bg-paper); }
.news-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px; }
.news-card { display:flex; background:#fff; border:1px solid #E3DDD2; border-radius:var(--radius-sm); overflow:hidden; transition:transform .25s,box-shadow .25s; gap:0; }
.news-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-card); border-color:#CFC5B4; }
.news-card .img-box { flex:0 0 240px; min-height:178px; position:relative; overflow:hidden; background:var(--bg-dark3); }
.news-card .img-box img { width:100%; height:100%; object-fit:cover; transition:transform .3s; }
.news-card:hover .img-box img { transform:scale(1.03); }
.news-card .content { padding:20px 22px; display:flex; flex-direction:column; }
.news-card .meta { display:flex; align-items:center; gap:8px; margin-bottom:10px; font-size:12px; color:var(--ink-light); }
.news-card .meta .cat { color:var(--red); font-weight:600; }
.news-card h3 { font-size:18px; font-weight:800; line-height:1.55; margin-bottom:10px; color:var(--ink); }
.news-card .excerpt { color:var(--ink-soft); font-size:14px; line-height:1.75; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.news-card .foot { display:flex; justify-content:space-between; align-items:center; margin-top:auto; padding-top:14px; font-size:12px; color:var(--ink-light); border-top:1px solid #F0EAE0; margin-top:14px; }
.news-card .foot .enter { color:var(--red); }
.news-empty { grid-column:span 2; display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:250px; background:#fff; border:1px dashed #CFC5B4; color:var(--ink-soft); border-radius:var(--radius-md); text-align:center; gap:16px; }
.news-empty .empty-mark { width:46px; height:46px; border:1px solid var(--gold); border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--gold); font-size:22px; }
.news-empty p { font-size:15px; }

.section-cta { background:var(--bg-dark); color:var(--warm-white); position:relative; padding:110px 0; text-align:center; overflow:hidden; }
.section-cta .glow-line { position:absolute; width:460px; height:460px; background:radial-gradient(circle, rgba(181,138,75,.15), transparent 62%); left:10%; top:-260px; }
.section-cta .frame { position:relative; max-width:860px; margin:0 auto; border:1px solid rgba(181,138,75,.32); padding:66px 48px 60px; border-radius:var(--radius-lg); background:linear-gradient(145deg,rgba(30,28,25,.4),rgba(20,19,18,.9)); }
.section-cta .frame:before, .section-cta .frame:after { content:""; position:absolute; width:24px; height:24px; border-color:var(--red); border-style:solid; }
.section-cta .frame:before { left:-2px; top:-2px; border-width:2px 0 0 2px; }
.section-cta .frame:after { right:-2px; bottom:-2px; border-width:0 2px 2px 0; }
.section-cta h2 { font-size:clamp(30px,4vw,44px); font-weight:900; line-height:1.25; margin-bottom:14px; }
.section-cta h2 span { color:var(--gold-light); }
.section-cta p { color:#A8A098; max-width:620px; margin:0 auto 30px; line-height:1.9; }
.cta-buttons { display:inline-flex; flex-wrap:wrap; gap:16px; justify-content:center; }

.faq-section { background:#EFEBE2; }
.faq-wrap { display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:52px; align-items:start; }
.faq-intro .faq-kicker { font-size:13px; letter-spacing:.16em; color:var(--red); margin-bottom:14px; display:flex; align-items:center; gap:10px; }
.faq-intro h2 { font-size:clamp(30px,4vw,42px); font-weight:800; line-height:1.25; }
.faq-intro p { color:var(--ink-soft); margin:20px 0 28px; line-height:1.9; font-size:15px; }
.faq-intro .outline-link { color:var(--red); border-bottom:1px solid var(--red); padding-bottom:4px; font-weight:600; }
.faq-list { background:var(--bg-paper); border:1px solid var(--line-light); border-radius:var(--radius-md); }
.faq-item { border-bottom:1px solid var(--line-light); }
.faq-item:last-child { border-bottom:0; }
.faq-q { width:100%; display:flex; justify-content:space-between; align-items:center; gap:18px; background:transparent; border:0; padding:20px 22px; text-align:left; font-size:16px; font-weight:600; line-height:1.6; color:var(--ink); transition:background .2s; }
.faq-q:hover { background:rgba(181,138,75,.06); }
.faq-q .icon { flex:0 0 20px; height:20px; position:relative; }
.faq-q .icon:before, .faq-q .icon:after { content:""; position:absolute; background:var(--gold); border-radius:2px; transition:all .2s; }
.faq-q .icon:before { width:15px; height:1.5px; left:2px; top:9px; }
.faq-q .icon:after { height:15px; width:1.5px; left:9px; top:2px; }
.faq-item.open .faq-q .icon:after { transform:scaleY(0); }
.faq-a { max-height:0; overflow:hidden; padding:0 22px; transition:max-height .3s ease,padding .3s ease; color:var(--ink-soft); font-size:15px; line-height:1.85; background:transparent; }
.faq-item.open .faq-a { max-height:260px; padding:0 22px 22px; }
.side-note { border:1px solid var(--line-dark); background:var(--bg-dark); color:var(--warm-white); padding:28px; border-radius:var(--radius-md); }
.side-note h4 { font-size:18px; font-weight:800; margin-bottom:14px; display:flex; align-items:center; gap:10px; }
.side-note h4:before { content:""; width:4px; height:18px; background:var(--red); display:inline-block; }
.side-note p { font-size:14px; color:var(--warm-muted); line-height:1.8; }
.side-note .info-links { margin-top:18px; display:flex; flex-direction:column; gap:6px; }
.side-note .info-links a { color:var(--gold-light); font-size:14px; border-bottom:1px solid rgba(255,255,255,.12); padding:4px 0; }
.side-note .info-links a:hover { border-color:var(--gold); }

.site-footer { background:#15130F; color:#AEA496; }
.footer-main { display:grid; grid-template-columns:1.6fr 1fr 1fr 1.4fr; gap:50px; padding:74px 0 44px; }
.footer-brand .site-name { font-size:26px; font-weight:900; color:#fff; margin-bottom:12px; }
.footer-brand .site-name span { color:var(--gold); }
.footer-brand p { font-size:14px; line-height:1.9; color:#968D82; }
.footer-col .col-title { color:#E5DCCF; font-size:15px; margin-bottom:18px; }
.footer-col ul li { margin-bottom:10px; }
.footer-col a { font-size:14px; color:#968D82; transition:color .2s; }
.footer-col a:hover { color:var(--gold-light); }
.footer-contact .note { font-size:14px; line-height:1.8; color:#968D82; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.08); padding:18px 0; font-size:13px; color:#6B6156; }
.footer-bottom .container { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; }
.footer-bottom .fe-site { color:#C2B9AD; }
.footer-bottom a { color:#6B6156; }
.footer-bottom a:hover { color:var(--gold-light); }

@media(min-width:1200px) {
    .news-card .content { min-height:190px; }
}
@media(max-width:1024px) {
    .footer-main { grid-template-columns:1.4fr 1fr 1fr; row-gap:40px; }
    .footer-contact { grid-column:span 3; }
    .news-card .img-box { flex:0 0 190px; }
}
@media(max-width:820px) {
    .main-nav { gap:22px; }
    .ch-item { grid-template-columns:42px 1fr auto; }
    .ch-item .time { display:none; }
    .footer-main { grid-template-columns:1fr 1fr; }
    .footer-brand, .footer-contact { grid-column:span 2; }
}
@media(max-width:767px) {
    .section { padding:68px 0; }
    .menu-toggle { display:flex; }
    .main-nav { display:flex; flex-direction:column; align-items:flex-start; position:fixed; top:0; right:-340px; width:300px; max-width:86vw; height:100vh; background:var(--bg-dark); border-left:1px solid rgba(181,138,75,.25); padding:110px 32px 48px; gap:0; transition:right .3s; box-shadow:0 0 60px rgba(0,0,0,.4); z-index:1000; }
    .main-nav.open { right:0; }
    .main-nav a { width:100%; color:#BDB3A6; padding:16px 0; border-bottom:1px solid rgba(255,255,255,.08); }
    .main-nav a:after { display:none; }
    .main-nav .nav-enter { border:0; padding:0; width:100%; justify-content:flex-start; border-bottom:1px solid rgba(255,255,255,.08); border-radius:0; color:var(--gold-light); }
    .main-nav .nav-enter:hover { background:none; }
    .hero .main { padding:90px 0 70px; }
    .hero h1 { font-size:36px; }
    .topbar { font-size:12px; }
    .topbar .top-links { gap:6px 12px; flex-wrap:nowrap; }
    .section-head { flex-direction:column; align-items:flex-start; margin-bottom:30px; }
    .section-head .sub { font-size:14px; }
    .news-grid { grid-template-columns:1fr; }
    .channel-band { grid-template-columns:1fr; }
    .faq-wrap { grid-template-columns:1fr; }
    .cta-buttons .btn { padding-left:28px; padding-right:28px; }
    .news-card { flex-direction:column; }
    .news-card .img-box { flex:none; height:200px; }
    .scroll-hint { display:none; }
    .footer-main { grid-template-columns:1fr; gap:34px; }
    .footer-brand, .footer-contact { grid-column:span 1; }
    .footer-bottom .container { justify-content:center; text-align:center; }
    .hero h1 { white-space:normal; }
}
@media(max-width:520px) {
    .section-cta .frame { padding:44px 22px 40px; }
    .cover-wide { flex:0 0 270px !important; }
    .mini-card { flex:0 0 270px; }
    .news-card .img-box { height:170px; }
    .hero .main { padding:70px 0 54px; }
}

/* roulang page: category1 */
:root {
        --paper: #F7F4EE;
        --paper-deep: #EFEAE0;
        --screen: #141312;
        --screen-2: #1E1C19;
        --screen-3: #282420;
        --red: #C8402F;
        --red-deep: #A62E20;
        --gold: #B58A4B;
        --gold-soft: #D6B582;
        --ink: #221D17;
        --ink-2: #4A4238;
        --ink-3: #6A625A;
        --line: #E2D9CB;
        --line-dark: #3A332C;
        --white: #FFFDF8;
        --radius: 16px;
        --radius-sm: 8px;
        --shadow: 0 18px 50px rgba(30, 25, 16, 0.08);
        --maxw: 1240px;
        --ease: cubic-bezier(.22, .61, .36, 1);
    }
    *,
    *::before,
    *::after {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    html {
        scroll-behavior: smooth;
    }
    body {
        font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
        background: var(--paper);
        color: var(--ink);
        line-height: 1.7;
        font-size: 16px;
        -webkit-font-smoothing: antialiased;
    }
    a {
        color: inherit;
        text-decoration: none;
    }
    img {
        max-width: 100%;
        display: block;
    }
    button,
    input {
        font-family: inherit;
        font-size: inherit;
    }
    .container {
        max-width: var(--maxw);
        margin: 0 auto;
        padding: 0 24px;
    }
    .top-strip {
        background: #0F0D0C;
        color: #A49B92;
        font-size: 13px;
        padding: 11px 0;
        border-bottom: 1px solid #2B2621;
    }
    .top-strip .container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
    }
    .top-strip .domain-flag {
        letter-spacing: .05em;
        color: #CFC6B9;
    }
    .top-links {
        display: flex;
        gap: 22px;
        align-items: center;
    }
    .top-links a {
        color: #A49B92;
        transition: color .25s;
    }
    .top-links a:hover {
        color: var(--gold-soft);
    }
    .top-links .go-btn {
        color: var(--gold-soft);
        border: 1px solid #4B3D2B;
        border-radius: 999px;
        padding: 3px 18px;
        font-size: 13px;
        line-height: 1.6;
        transition: all .25s;
    }
    .top-links .go-btn:hover {
        background: var(--gold);
        color: #1A130B;
        border-color: var(--gold);
    }
    .site-header {
        background: rgba(20, 19, 18, .94);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        position: sticky;
        top: 0;
        z-index: 100;
        border-bottom: 1px solid rgba(181, 138, 75, .28);
        transition: background .3s;
    }
    .header-box {
        max-width: var(--maxw);
        margin: 0 auto;
        padding: 0 24px;
        height: 78px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 30px;
    }
    .brand {
        display: flex;
        align-items: baseline;
        font-size: 22px;
        letter-spacing: .02em;
        color: #F4EFE6;
        white-space: nowrap;
    }
    .brand strong {
        font-weight: 900;
        color: #F9E9D4;
    }
    .brand span {
        font-weight: 300;
        color: #C5A87A;
        margin-left: 3px;
        letter-spacing: .12em;
        font-size: .82em;
        border-left: 1px solid #5E4B33;
        padding-left: 9px;
    }
    .main-nav {
        display: flex;
        align-items: center;
        gap: 34px;
    }
    .main-nav a {
        color: #D5CEC4;
        font-size: 15px;
        font-weight: 500;
        position: relative;
        padding: 8px 0;
        white-space: nowrap;
        transition: color .25s;
    }
    .main-nav a::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 2px;
        background: var(--red);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform .3s var(--ease);
    }
    .main-nav a:hover::after,
    .main-nav a.active::after {
        transform: scaleX(1);
    }
    .main-nav a.active {
        color: #FFF;
    }
    .nav-enter {
        background: var(--red);
        border: 1px solid var(--red);
        color: #FFF !important;
        font-size: 14px;
        padding: 9px 24px !important;
        border-radius: 999px;
        transition: all .25s !important;
    }
    .nav-enter:hover {
        background: var(--red-deep);
        border-color: var(--red-deep);
        transform: translateY(-1px);
        box-shadow: 0 6px 18px rgba(200, 64, 47, .25);
    }
    .burger {
        display: none;
        width: 42px;
        height: 42px;
        border-radius: 10px;
        border: 1px solid #443A30;
        color: #E4D6C3;
        background: transparent;
        font-size: 19px;
        cursor: pointer;
        transition: all .2s;
    }
    .burger:hover {
        border-color: var(--gold);
        color: var(--gold-soft);
    }

    .page-hero {
        background: var(--white);
        padding: 82px 0 68px;
        border-bottom: 1px solid var(--line);
        overflow: hidden;
        position: relative;
    }
    .page-hero::before {
        content: "";
        position: absolute;
        right: -8%;
        top: -30%;
        width: 480px;
        height: 480px;
        background: radial-gradient(circle, rgba(181, 138, 75, .09) 0%, rgba(181, 138, 75, 0) 70%);
        pointer-events: none;
    }
    .hero-inner {
        display: grid;
        grid-template-columns: 58% 1fr;
        gap: 60px;
        align-items: center;
        position: relative;
        z-index: 2;
    }
    .hero-copy {
        padding-right: 10px;
    }
    .page-tag {
        display: inline-flex;
        align-items: center;
        font-size: 13px;
        color: var(--red);
        font-weight: 600;
        letter-spacing: .08em;
        border: 1px solid rgba(200, 64, 47, .35);
        border-radius: 999px;
        padding: 4px 15px;
        margin-bottom: 22px;
    }
    .page-tag i {
        margin-right: 7px;
        font-size: 12px;
    }
    h1.hero-title {
        font-size: 46px;
        line-height: 1.18;
        letter-spacing: -0.01em;
        font-weight: 900;
        color: var(--ink);
        margin-bottom: 20px;
    }
    h1 .goldaccent {
        color: var(--red);
    }
    .hero-lead {
        font-size: 16px;
        line-height: 1.9;
        color: var(--ink-3);
        max-width: 530px;
        margin-bottom: 34px;
    }
    .hero-actions {
        display: flex;
        gap: 16px;
        flex-wrap: wrap;
    }
    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        border-radius: 999px;
        font-size: 15px;
        font-weight: 600;
        padding: 14px 30px;
        cursor: pointer;
        border: 1px solid transparent;
        transition: all .28s var(--ease);
        line-height: 1.2;
        white-space: nowrap;
    }
    .btn-primary {
        background: var(--red);
        color: #fff;
        box-shadow: 0 8px 28px rgba(200, 64, 47, .22);
    }
    .btn-primary:hover {
        background: var(--red-deep);
        transform: translateY(-3px);
        box-shadow: 0 14px 30px rgba(200, 64, 47, .28);
    }
    .btn-outline {
        border-color: var(--gold);
        color: #8D6C36;
        background: transparent;
    }
    .btn-outline:hover {
        background: var(--gold);
        color: #1D160D;
        transform: translateY(-3px);
        box-shadow: 0 10px 26px rgba(181, 138, 75, .18);
    }
    .hero-visual {
        position: relative;
        border-radius: 18px;
        overflow: hidden;
        box-shadow: var(--shadow);
        aspect-ratio: 4/3.1;
        background: #D9CABC;
        border: 1px solid var(--line);
    }
    .hero-visual img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .8s var(--ease);
    }
    .hero-visual:hover img {
        transform: scale(1.04);
    }
    .hero-visual figcaption {
        position: absolute;
        left: 16px;
        right: 16px;
        bottom: 16px;
        background: linear-gradient(0deg, rgba(0, 0, 0, .72), transparent);
        color: #F4EADF;
        font-size: 14px;
        padding: 18px 14px 10px;
        border-radius: 8px;
        backdrop-filter: blur(4px);
    }

    .section {
        padding: 92px 0;
    }
    .section.paper {
        background: var(--paper);
    }
    .section.white {
        background: var(--white);
    }
    .section.midnight {
        background: #181714;
    }
    .section-head {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        gap: 30px;
        margin-bottom: 48px;
    }
    .section-head .subtitle {
        font-size: 14px;
        letter-spacing: .1em;
        color: var(--red);
        font-weight: 700;
        text-transform: uppercase;
        margin-bottom: 10px;
        display: block;
    }
    .section-head h2 {
        font-size: 38px;
        line-height: 1.25;
        font-weight: 900;
        color: var(--ink);
        letter-spacing: -0.01em;
    }
    .section-head .head-desc {
        max-width: 420px;
        color: var(--ink-3);
        font-size: 15px;
    }
    .intro-line {
        font-size: 16px;
        color: var(--ink-3);
        margin-bottom: 42px;
        max-width: 720px;
        line-height: 1.9;
    }

    .guide-rows {
        border-top: 1px solid var(--line);
    }
    .guide-row {
        display: grid;
        grid-template-columns: 80px 1fr 42%;
        gap: 36px;
        padding: 38px 4px;
        border-bottom: 1px solid var(--line);
        align-items: start;
        transition: background .3s;
    }
    .guide-row:hover {
        background: rgba(181, 138, 75, .04);
    }
    .guide-num {
        font-size: 46px;
        font-weight: 900;
        line-height: 1;
        color: var(--gold);
        opacity: .7;
        font-family: inherit;
        letter-spacing: .02em;
    }
    .guide-main h3 {
        font-size: 20px;
        font-weight: 800;
        color: var(--ink);
        margin-bottom: 8px;
    }
    .guide-main p {
        color: var(--ink-3);
        font-size: 15px;
        line-height: 1.8;
    }
    .guide-note {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        font-size: 14px;
        color: var(--ink-2);
        background: #FBF7F0;
        border: 1px solid var(--line);
        border-radius: 10px;
        padding: 14px 18px;
        line-height: 1.7;
    }
    .guide-note i {
        color: var(--gold);
        margin-top: 4px;
        font-size: 15px;
    }

    .feature-matrix {
        background: var(--paper);
    }
    .matrix-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
    }
    .matrix-item {
        background: var(--white);
        border: 1px solid var(--line);
        border-radius: var(--radius);
        padding: 36px 30px;
        transition: all .3s var(--ease);
        position: relative;
        overflow: hidden;
    }
    .matrix-item::before {
        content: "0" counter(matrix-idx);
        counter-increment: matrix-idx;
        position: absolute;
        top: 10px;
        right: 24px;
        font-size: 44px;
        font-weight: 900;
        color: rgba(181, 138, 75, .16);
        line-height: 1;
    }
    .matrix-item:hover {
        border-color: rgba(181, 138, 75, .6);
        transform: translateY(-4px);
        box-shadow: 0 18px 40px rgba(35, 27, 18, .06);
    }
    .matrix-icon {
        width: 52px;
        height: 52px;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 21px;
        background: #F5EFE4;
        color: var(--red);
        margin-bottom: 22px;
        border: 1px solid #E9DECB;
    }
    .matrix-item h3 {
        font-size: 18px;
        font-weight: 800;
        color: var(--ink);
        margin-bottom: 10px;
    }
    .matrix-item p {
        font-size: 14px;
        color: var(--ink-3);
        line-height: 1.8;
    }

    .feature-split {
        display: grid;
        grid-template-columns: 1.1fr .9fr;
        gap: 52px;
        align-items: center;
    }
    .split-media {
        border-radius: 16px;
        overflow: hidden;
        border: 1px solid var(--line);
        background: #E5DDD0;
        position: relative;
    }
    .split-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        min-height: 360px;
    }
    .split-content h2 {
        font-size: 32px;
        font-weight: 900;
        margin-bottom: 18px;
        line-height: 1.3;
    }
    .split-content .desc {
        color: var(--ink-3);
        font-size: 15.5px;
        margin-bottom: 28px;
        line-height: 1.9;
    }
    .check-list {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
    .check-item {
        display: flex;
        gap: 13px;
        align-items: flex-start;
        font-size: 15px;
    }
    .check-item i {
        color: var(--gold);
        font-size: 16px;
        margin-top: 5px;
        min-width: 20px;
    }
    .check-item strong {
        font-weight: 700;
        display: block;
        color: var(--ink);
    }
    .check-item span {
        color: var(--ink-3);
        font-size: 14px;
    }

    .access-steps {
        background: var(--screen);
        padding: 92px 0;
    }
    .access-steps .section-title {
        color: #F4EFE6;
    }
    .access-steps .section-title small {
        color: var(--gold-soft);
    }
    .access-steps .section-title .subtitle {
        color: var(--gold);
    }
    .steps-inner {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }
    .step-card {
        background: var(--screen-2);
        border: 1px solid rgba(181, 138, 75, .2);
        border-radius: 14px;
        padding: 34px 26px;
        transition: border-color .3s, transform .3s var(--ease);
    }
    .step-card:hover {
        border-color: rgba(181, 138, 75, .65);
        transform: translateY(-4px);
    }
    .step-count {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        border: 1px solid var(--gold);
        color: var(--gold-soft);
        font-size: 14px;
        font-weight: 700;
        margin-bottom: 20px;
    }
    .step-card h3 {
        color: #F4EFE6;
        font-size: 17px;
        font-weight: 700;
        margin-bottom: 12px;
    }
    .step-card p {
        color: #A49B92;
        font-size: 14px;
        line-height: 1.75;
    }

    .notice-band {
        background: #F0EBDF;
        border-bottom: 1px solid var(--line);
        padding: 20px 0;
    }
    .notice-band .container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        flex-wrap: wrap;
    }
    .notice-band .note-left {
        display: flex;
        align-items: center;
        gap: 12px;
        color: #5D4E38;
        font-size: 14.5px;
    }
    .notice-band i {
        color: var(--red);
        font-size: 17px;
    }

    .faq-section {
        padding: 92px 0;
    }
    .faq-layout {
        display: grid;
        grid-template-columns: .8fr 1.4fr;
        gap: 60px;
    }
    .faq-side h2 {
        font-size: 32px;
        font-weight: 900;
        line-height: 1.3;
        margin-bottom: 16px;
    }
    .faq-side p {
        color: var(--ink-3);
        font-size: 15px;
    }
    .faq-list {
        border-top: 1px solid var(--line);
    }
    .faq-qa {
        border-bottom: 1px solid var(--line);
        background: transparent;
        transition: background .3s;
    }
    .faq-qa details {
        width: 100%;
    }
    .faq-qa summary {
        list-style: none;
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
        font-size: 16px;
        font-weight: 700;
        padding: 22px 6px;
        color: var(--ink);
        transition: color .2s;
    }
    .faq-qa summary::-webkit-details-marker {
        display: none;
    }
    .faq-qa summary .fa-minus {
        display: none;
    }
    .faq-qa details[open] summary {
        color: var(--red);
    }
    .faq-qa details[open] summary .fa-plus {
        display: none;
    }
    .faq-qa details[open] summary .fa-minus {
        display: inline-block;
    }
    .faq-answer {
        padding: 0 6px 22px;
        color: var(--ink-3);
        font-size: 15px;
        line-height: 1.9;
        max-width: 620px;
    }
    .faq-answer a {
        color: var(--red);
    }
    .faq-answer a:hover {
        text-decoration: underline;
    }

    .cta-section {
        background: var(--screen);
        color: #F4EFE6;
        padding: 90px 0;
        position: relative;
        overflow: hidden;
    }
    .cta-inner {
        max-width: 640px;
        position: relative;
        z-index: 2;
    }
    .cta-section .gold-line {
        font-size: 13px;
        letter-spacing: .14em;
        color: var(--gold-soft);
        margin-bottom: 16px;
    }
    .cta-inner h2 {
        font-size: 38px;
        font-weight: 900;
        line-height: 1.4;
        margin-bottom: 18px;
        color: #F9F3EA;
    }
    .cta-inner p {
        color: #A49B92;
        font-size: 15.5px;
        line-height: 1.9;
        margin-bottom: 36px;
    }
    .cta-inner .btn {
        margin-right: 10px;
    }
    .btn-group {
        display: flex;
        gap: 16px;
        flex-wrap: wrap;
    }
    .cta-bg-txt {
        position: absolute;
        right: -20px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 220px;
        font-weight: 900;
        color: rgba(255, 255, 255, .018);
        white-space: nowrap;
        letter-spacing: -0.03em;
        pointer-events: none;
        user-select: none;
    }

    .site-footer {
        background: #0E0D0B;
        color: #CFC5B9;
        padding-top: 60px;
        border-top: 1px solid #3A3126;
    }
    .footer-main {
        display: grid;
        grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
        gap: 44px;
        padding-bottom: 52px;
    }
    .footer-brand .site-name {
        font-size: 22px;
        color: #F9E9D4;
        font-weight: 900;
        margin-bottom: 14px;
    }
    .footer-brand .site-name span {
        font-weight: 300;
        color: #C5A87A;
    }
    .footer-brand p {
        color: #A49B92;
        font-size: 14px;
        line-height: 1.8;
        max-width: 300px;
    }
    .footer-col .col-title {
        font-size: 14px;
        color: #E8DED1;
        letter-spacing: .1em;
        font-weight: 700;
        margin-bottom: 4px;
        padding-bottom: 16px;
        border-bottom: 1px solid #312A22;
    }
    .footer-col ul {
        margin-top: 18px;
        list-style: none;
    }
    .footer-col li {
        margin-bottom: 12px;
    }
    .footer-col a {
        color: #A49B92;
        font-size: 14px;
        transition: all .25s;
    }
    .footer-col a:hover {
        color: var(--gold-soft);
        padding-left: 4px;
    }
    .footer-col .note {
        color: #8C8377;
        font-size: 14px;
        line-height: 1.8;
        margin-top: 18px;
    }
    .footer-bottom {
        background: #090807;
        border-top: 1px solid #241F1A;
        padding: 18px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .footer-bottom .fe-site {
        color: #8C8377;
        font-size: 13px;
    }
    .footer-bottom span:last-child {
        color: #6F675D;
        font-size: 13px;
    }

    .matrix-grid {
        counter-reset: matrix-idx;
    }

    @media (max-width: 1024px) {
        .hero-inner {
            grid-template-columns: 1fr;
            gap: 36px;
        }
        .hero-visual {
            max-width: 100%;
            aspect-ratio: 16/10;
        }
        .guide-row {
            grid-template-columns: 56px 1fr;
            gap: 18px;
        }
        .guide-note {
            grid-column: 1 / -1;
        }
        .matrix-grid {
            grid-template-columns: repeat(2, 1fr);
        }
        .feature-split {
            grid-template-columns: 1fr;
        }
        .steps-inner {
            grid-template-columns: repeat(2, 1fr);
        }
        .faq-layout {
            grid-template-columns: 1fr;
        }
        .footer-main {
            grid-template-columns: 1fr 1fr;
            row-gap: 40px;
        }
        .main-nav {
            display: none;
            position: absolute;
            top: 78px;
            left: 0;
            width: 100%;
            background: #151310;
            border-bottom: 1px solid var(--gold);
            flex-direction: column;
            padding: 18px 30px 28px;
            gap: 8px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
        }
        .main-nav.open {
            display: flex;
        }
        .main-nav a {
            display: block;
            width: 100%;
            padding: 14px 0;
            border-bottom: 1px solid rgba(181, 138, 75, .15);
            font-size: 17px;
        }
        .main-nav a::after {
            content: none;
        }
        .main-nav .nav-enter {
            text-align: center;
            border-radius: 10px;
            margin-top: 10px;
        }
        .burger {
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
    }

    @media (max-width: 767px) {
        .top-strip .top-links a {
            display: none;
        }
        .top-strip .top-links .go-btn {
            display: inline-block;
        }
        h1.hero-title {
            font-size: 30px;
        }
        .section {
            padding: 60px 0;
        }
        .section-head {
            flex-direction: column;
            align-items: flex-start;
            margin-bottom: 30px;
        }
        .section-head h2 {
            font-size: 27px;
        }
        .matrix-grid {
            grid-template-columns: 1fr;
        }
        .faq-layout {
            gap: 30px;
        }
        .guide-row {
            grid-template-columns: 1fr;
            padding: 28px 0;
        }
        .guide-note {
            grid-column: auto;
        }
        .guide-num {
            font-size: 34px;
        }
        .footer-main {
            grid-template-columns: 1fr;
        }
        .cta-inner h2 {
            font-size: 28px;
        }
        .hero-actions .btn {
            width: 100%;
        }
        .btn-group {
            flex-direction: column;
            width: 100%;
        }
        .btn-group .btn {
            width: 100%;
        }
        .header-box {
            height: 66px;
        }
        .main-nav {
            top: 66px;
        }
        .brand {
            font-size: 18px;
        }
        .brand span {
            font-size: .76em;
        }
        .btn {
            padding: 13px 26px;
        }
        .footer-bottom {
            flex-direction: column;
            gap: 6px;
            text-align: center;
            line-height: 1.8;
        }
    }
    @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
            animation-duration: .01ms !important;
            transition-duration: .01ms !important;
        }
    }

/* roulang page: article */
:root {
        --paper: #F7F4EE;
        --paper-deep: #EFE8DC;
        --ink: #1E1B16;
        --ink-soft: #665F55;
        --night: #141312;
        --night-2: #1E1C19;
        --night-3: #28231E;
        --gold: #B58A4B;
        --gold-soft: #C9A76D;
        --red: #C8402F;
        --red-dark: #A93023;
        --warm-white: #F4EFE6;
        --gray-warm: #A49B92;
        --line-light: #E6DED2;
        --line-dark: rgba(181, 138, 75, .28);
        --radius-s: 2px;
        --radius-m: 4px;
        --radius-l: 14px;
        --shadow-soft: 0 18px 50px rgba(20, 18, 16, .07);
        --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
    }

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

    html {
        scroll-behavior: smooth;
        -webkit-text-size-adjust: 100%;
    }

    body {
        font-family: var(--font);
        font-size: 16px;
        line-height: 1.7;
        background: var(--paper);
        color: var(--ink);
        -webkit-font-smoothing: antialiased;
    }

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

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

    ul,
    ol {
        list-style: none;
    }

    button,
    input,
    textarea {
        font: inherit;
        color: inherit;
    }

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

    .container {
        width: min(1200px, 92%);
        margin-inline: auto;
    }

    .topbar {
        background: #0d0c0b;
        color: #9B938B;
        font-size: 12px;
        border-bottom: 1px solid rgba(181, 138, 75, .15);
    }

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

    .topbar-domain {
        letter-spacing: .06em;
        color: #BFB7AE;
    }

    .topbar-links {
        display: flex;
        gap: 18px;
    }

    .topbar-links a {
        color: #9B938B;
        transition: color .2s ease;
    }

    .topbar-links a:hover {
        color: var(--gold-soft);
    }

    .nav-wrap {
        position: sticky;
        top: 0;
        z-index: 120;
        background: rgba(16, 15, 14, .96);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border-bottom: 1px solid rgba(181, 138, 75, .14);
        transition: background .3s, border-color .3s;
    }

    .nav-wrap.is-scrolled {
        background: rgba(13, 12, 11, .98);
        box-shadow: 0 12px 34px rgba(0, 0, 0, .18);
        border-bottom-color: rgba(181, 138, 75, .32);
    }

    .nav-inner {
        position: relative;
        min-height: 78px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
    }

    .brand {
        display: inline-flex;
        align-items: baseline;
        gap: 3px;
        font-size: 25px;
        font-weight: 800;
        color: var(--warm-white);
        letter-spacing: -.02em;
        line-height: 1;
        white-space: nowrap;
    }

    .brand span {
        font-size: 16px;
        font-weight: 600;
        color: var(--gold-soft);
        letter-spacing: .08em;
        margin-left: 2px;
    }

    .brand:hover {
        color: #fff;
    }

    .main-nav {
        display: flex;
        align-items: center;
        gap: 34px;
    }

    .main-nav a {
        position: relative;
        display: inline-block;
        font-size: 15px;
        color: rgba(244, 239, 230, .82);
        padding: 10px 0;
        transition: color .2s;
    }

    .main-nav a::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 2px;
        width: 0;
        height: 2px;
        background: var(--red);
        transition: width .28s ease;
    }

    .main-nav a:hover {
        color: #fff;
    }

    .main-nav a:hover::after,
    .main-nav a.active::after {
        width: 100%;
    }

    .main-nav a.active {
        color: #fff;
    }

    .main-nav .nav-enter {
        background: var(--red);
        color: #fff;
        border-radius: var(--radius-s);
        padding: 9px 20px;
        line-height: 1.4;
        transition: background .2s, transform .2s;
    }

    .main-nav .nav-enter::after {
        display: none;
    }

    .main-nav .nav-enter:hover {
        background: var(--red-dark);
        transform: translateY(-2px);
        color: #fff;
    }

    .nav-toggle {
        display: none;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        width: 42px;
        height: 42px;
        padding: 8px;
        background: transparent;
        border: 1px solid rgba(244, 239, 230, .2);
        border-radius: var(--radius-m);
        cursor: pointer;
    }

    .nav-toggle span {
        display: block;
        height: 1.5px;
        width: 100%;
        background: var(--warm-white);
        transition: transform .25s, opacity .2s;
    }

    .nav-toggle.open span:nth-child(1) {
        transform: translateY(6.5px) rotate(45deg);
    }

    .nav-toggle.open span:nth-child(2) {
        opacity: 0;
    }

    .nav-toggle.open span:nth-child(3) {
        transform: translateY(-6.5px) rotate(-45deg);
    }

    .page-hero {
        position: relative;
        padding: 54px 0 62px;
        background: linear-gradient(103deg, rgba(13, 12, 11, .97) 12%, rgba(13, 12, 11, .86) 48%, rgba(24, 20, 16, .75) 100%), url("/assets/images/backpic/back-3.png") center / cover no-repeat;
        color: var(--warm-white);
        border-bottom: 1px solid rgba(181, 138, 75, .22);
    }

    .hero-inner {
        max-width: 920px;
    }

    .hero-kicker {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 13px;
        letter-spacing: .18em;
        color: var(--gold-soft);
        border: 1px solid rgba(181, 138, 75, .45);
        border-radius: 999px;
        padding: 5px 14px;
        margin-bottom: 22px;
    }

    .breadcrumb {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 7px;
        font-size: 13px;
        color: var(--gray-warm);
        margin-bottom: 24px;
    }

    .breadcrumb a {
        color: rgba(244, 239, 230, .72);
        transition: color .2s;
    }

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

    .breadcrumb i {
        font-style: normal;
        color: rgba(181, 138, 75, .55);
    }

    .breadcrumb span {
        color: var(--gray-warm);
    }

    .article-h1 {
        font-size: clamp(34px, 5vw, 52px);
        line-height: 1.16;
        margin-bottom: 20px;
        font-weight: 800;
        letter-spacing: -.02em;
        color: #fff;
    }

    .article-meta-line {
        display: flex;
        flex-wrap: wrap;
        gap: 10px 16px;
        align-items: center;
        font-size: 13px;
        color: var(--gray-warm);
    }

    .meta-pill {
        display: inline-flex;
        align-items: center;
        border: 1px solid rgba(181, 138, 75, .28);
        color: var(--gold-soft);
        padding: 3px 10px;
        border-radius: 999px;
        font-size: 12px;
    }

    .empty-hint {
        margin-top: 18px;
        font-size: 16px;
        line-height: 1.8;
        color: #b9b0a8;
        max-width: 680px;
    }

    .empty-link {
        display: inline-flex;
        margin-top: 22px;
        background: var(--red);
        color: #fff;
        border-radius: var(--radius-s);
        padding: 10px 22px;
        font-size: 14px;
        transition: background .2s, transform .2s;
    }

    .empty-link:hover {
        background: var(--red-dark);
        transform: translateY(-2px);
    }

    .article-main-area {
        background: var(--paper);
        padding: 70px 0 64px;
    }

    .article-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 300px;
        gap: 54px;
        align-items: start;
    }

    .article-column {
        min-width: 0;
    }

    .article-frame {
        background: #FFFDF9;
        border: 1px solid var(--line-light);
        border-radius: var(--radius-m);
        box-shadow: var(--shadow-soft);
        padding: 42px;
    }

    .article-cover {
        border-radius: 3px;
        overflow: hidden;
        margin-bottom: 38px;
        background: var(--night);
    }

    .article-cover img {
        width: 100%;
        max-height: 440px;
        object-fit: cover;
        aspect-ratio: 16 / 8;
    }

    .article-body {
        max-width: 780px;
    }

    .article-body p {
        font-size: 17px;
        line-height: 1.95;
        color: #373028;
        margin-bottom: 1.55em;
    }

    .article-body p:first-of-type {
        font-size: 19px;
        color: var(--ink);
        line-height: 1.8;
    }

    .article-body h2 {
        font-size: 26px;
        margin-top: 1.9em;
        margin-bottom: .65em;
        font-weight: 800;
        color: var(--ink);
        line-height: 1.4;
    }

    .article-body h3 {
        font-size: 21px;
        margin-top: 1.6em;
        margin-bottom: .5em;
        font-weight: 700;
        color: var(--ink);
    }

    .article-body ul,
    .article-body ol {
        padding-left: 1.45em;
        margin-bottom: 1.6em;
    }

    .article-body ul {
        list-style: disc;
    }

    .article-body ol {
        list-style: decimal;
    }

    .article-body li {
        margin-bottom: .4em;
        line-height: 1.9;
        color: #373028;
    }

    .article-body blockquote {
        margin: 2em 0;
        padding: 18px 24px;
        border-left: 3px solid var(--gold);
        background: #F6F0E6;
        color: #4A4139;
        border-radius: 0 3px 3px 0;
    }

    .article-body blockquote p {
        margin-bottom: .4em;
    }

    .article-body blockquote p:last-child {
        margin-bottom: 0;
    }

    .article-body img {
        border-radius: 3px;
        margin: 1.6em 0;
    }

    .article-body figcaption,
    .article-body .img-caption {
        font-size: 13px;
        text-align: center;
        color: var(--ink-soft);
        margin: -1em 0 1.8em;
    }

    .article-body a {
        color: var(--red);
        border-bottom: 1px solid rgba(200, 64, 47, .35);
        transition: color .2s, border-color .2s;
    }

    .article-body a:hover {
        color: var(--red-dark);
        border-color: var(--red-dark);
    }

    .article-body table {
        width: 100%;
        border-collapse: collapse;
        margin: 1.8em 0;
        font-size: 15px;
    }

    .article-body th,
    .article-body td {
        border: 1px solid var(--line-light);
        padding: 10px 12px;
        text-align: left;
    }

    .article-body th {
        background: #F6F0E6;
        font-weight: 700;
    }

    .article-bottom {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 14px;
        align-items: center;
        margin-top: 44px;
        padding-top: 24px;
        border-top: 1px solid var(--line-light);
    }

    .article-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
    }

    .tags-label {
        font-size: 12px;
        color: var(--ink-soft);
        letter-spacing: .1em;
    }

    .mini-tag {
        display: inline-block;
        background: #F4EDE2;
        border: 1px solid #E8DCC8;
        color: #574D43;
        font-size: 12px;
        padding: 3px 10px;
        border-radius: 999px;
    }

    .back-link {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 13px;
        color: var(--red);
        border-bottom: 1px solid transparent;
        transition: border-color .2s;
    }

    .back-link:hover {
        border-color: var(--red);
    }

    .article-aside {
        min-width: 0;
    }

    .side-card {
        background: #FFFDF9;
        border: 1px solid var(--line-light);
        border-radius: var(--radius-m);
        padding: 24px;
        margin-bottom: 24px;
    }

    .side-title {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 15px;
        font-weight: 700;
        margin-bottom: 10px;
        color: var(--ink);
    }

    .side-title::before {
        content: "";
        width: 3px;
        height: 15px;
        background: var(--gold);
        border-radius: 2px;
    }

    .side-card p {
        font-size: 13.5px;
        line-height: 1.8;
        color: var(--ink-soft);
    }

    .side-links a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 12px 0;
        border-bottom: 1px solid var(--line-light);
        font-size: 14px;
        color: var(--ink);
        transition: color .2s, padding-left .2s;
    }

    .side-links a:last-child {
        border-bottom: 0;
    }

    .side-links a:hover {
        color: var(--red);
        padding-left: 4px;
    }

    .side-links em {
        font-style: normal;
        color: var(--gold);
        font-size: 14px;
    }

    .related-strip {
        background: var(--paper-deep);
        padding: 68px 0 76px;
        border-top: 1px solid var(--line-light);
        border-bottom: 1px solid var(--line-light);
    }

    .section-head {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 20px;
        margin-bottom: 34px;
    }

    .section-eyebrow {
        display: block;
        font-size: 12px;
        letter-spacing: .2em;
        color: var(--gold);
        font-weight: 600;
        margin-bottom: 6px;
    }

    .section-title {
        font-size: clamp(26px, 3vw, 36px);
        font-weight: 800;
        line-height: 1.25;
        letter-spacing: -.01em;
        color: var(--ink);
    }

    .related-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 22px;
    }

    .related-card {
        display: block;
        background: #FFFDF9;
        border: 1px solid var(--line-light);
        border-radius: var(--radius-m);
        overflow: hidden;
        transition: transform .25s ease, box-shadow .25s ease;
    }

    .related-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 16px 40px rgba(20, 18, 16, .1);
    }

    .related-cover {
        overflow: hidden;
        aspect-ratio: 3 / 2;
        background: var(--night);
    }

    .related-cover img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .35s ease;
    }

    .related-card:hover .related-cover img {
        transform: scale(1.02);
    }

    .related-content {
        padding: 18px 20px 21px;
    }

    .related-content h3 {
        font-size: 17px;
        font-weight: 700;
        line-height: 1.5;
        margin-bottom: 7px;
        color: var(--ink);
    }

    .related-content p {
        font-size: 13.5px;
        color: var(--ink-soft);
        line-height: 1.7;
    }

    .related-more {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        margin-top: 10px;
        font-size: 13px;
        color: var(--red);
    }

    .cta-band {
        position: relative;
        background: linear-gradient(rgba(13, 12, 11, .94), rgba(13, 12, 11, .88)), url("/assets/images/backpic/back-1.png") center / cover no-repeat;
        color: var(--warm-white);
        padding: 78px 0;
        text-align: center;
        border-bottom: 1px solid var(--line-dark);
    }

    .cta-inner {
        max-width: 760px;
        margin-inline: auto;
    }

    .cta-title {
        font-size: clamp(28px, 3.6vw, 42px);
        font-weight: 800;
        line-height: 1.25;
        margin-bottom: 14px;
    }

    .cta-sub {
        font-size: 15px;
        color: var(--gray-warm);
        line-height: 1.8;
        margin-bottom: 26px;
    }

    .btn-group {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 14px;
    }

    .btn-red {
        display: inline-flex;
        align-items: center;
        background: var(--red);
        color: #fff;
        border: 1px solid var(--red);
        border-radius: var(--radius-s);
        padding: 11px 24px;
        font-size: 15px;
        font-weight: 600;
        transition: background .2s, transform .2s, box-shadow .2s;
    }

    .btn-red:hover {
        background: var(--red-dark);
        border-color: var(--red-dark);
        transform: translateY(-2px);
        box-shadow: 0 8px 22px rgba(200, 64, 47, .25);
    }

    .btn-outline {
        display: inline-flex;
        align-items: center;
        background: transparent;
        color: var(--gold-soft);
        border: 1px solid rgba(181, 138, 75, .75);
        border-radius: var(--radius-s);
        padding: 10px 22px;
        font-size: 15px;
        transition: background .2s, border-color .2s, color .2s, transform .2s;
    }

    .btn-outline:hover {
        background: rgba(181, 138, 75, .1);
        border-color: var(--gold);
        color: #fff;
        transform: translateY(-2px);
    }

    .faq-band {
        background: var(--paper);
        padding: 70px 0 88px;
    }

    .faq-layout {
        display: grid;
        grid-template-columns: 0.86fr 1.5fr;
        gap: 56px;
    }

    .faq-intro p {
        margin-top: 12px;
        font-size: 15px;
        color: var(--ink-soft);
        line-height: 1.8;
    }

    .faq-list {
        display: block;
    }

    .faq-item {
        background: #FFFDF9;
        border: 1px solid var(--line-light);
        border-radius: var(--radius-m);
        margin-bottom: 12px;
        overflow: hidden;
        transition: border-color .2s;
    }

    .faq-item[open] {
        border-color: rgba(181, 138, 75, .6);
    }

    .faq-item summary {
        cursor: pointer;
        list-style: none;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        padding: 17px 20px;
        font-size: 15px;
        font-weight: 700;
        color: var(--ink);
        transition: color .2s;
    }

    .faq-item summary::-webkit-details-marker {
        display: none;
    }

    .faq-item summary::after {
        content: "+";
        flex: 0 0 auto;
        font-size: 21px;
        font-weight: 400;
        width: 26px;
        height: 26px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--line-dark);
        color: var(--gold);
        border-radius: 50%;
        transition: transform .2s, color .2s, border-color .2s;
    }

    .faq-item[open] summary::after {
        content: "—";
        transform: rotate(90deg);
    }

    .faq-item .faq-answer {
        padding: 0 20px 20px;
        font-size: 14px;
        line-height: 1.85;
        color: var(--ink-soft);
        border-top: 1px solid var(--line-light);
        padding-top: 14px;
    }

    .faq-item .faq-answer a {
        color: var(--red);
    }

    .site-footer {
        background: #0D0C0B;
        color: var(--gray-warm);
        margin-top: 0;
    }

    .footer-main {
        padding: 62px 0 44px;
        display: grid;
        grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
        gap: 48px;
    }

    .footer-brand .site-name {
        display: flex;
        align-items: baseline;
        gap: 3px;
        font-size: 24px;
        font-weight: 800;
        color: var(--warm-white);
        margin-bottom: 12px;
    }

    .footer-brand .site-name span {
        color: var(--gold-soft);
        font-weight: 600;
        font-size: 16px;
        letter-spacing: .08em;
    }

    .footer-brand p {
        font-size: 13.5px;
        line-height: 1.9;
        color: #8D857D;
        max-width: 360px;
    }

    .col-title {
        font-size: 16px;
        font-weight: 700;
        color: var(--warm-white);
        margin-bottom: 16px;
        letter-spacing: .04em;
    }

    .footer-col ul li {
        margin-bottom: 9px;
    }

    .footer-col ul a {
        font-size: 14px;
        color: #8D857D;
        transition: color .2s;
        position: relative;
    }

    .footer-col ul a:hover {
        color: var(--gold-soft);
    }

    .footer-contact p {
        font-size: 13.5px;
        color: #8D857D;
    }

    .footer-contact p.note {
        line-height: 1.85;
    }

    .footer-bottom {
        border-top: 1px solid rgba(181, 138, 75, .14);
        padding: 18px 0;
    }

    .footer-bottom .container {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 8px 20px;
        font-size: 12.5px;
        color: #6F6861;
    }

    .footer-bottom .fe-site {
        color: #8D857D;
    }

    @media (max-width: 1024px) {
        .article-grid {
            grid-template-columns: minmax(0, 1fr) 280px;
            gap: 34px;
        }

        .related-grid {
            grid-template-columns: repeat(2, 1fr);
        }

        .footer-main {
            grid-template-columns: 1fr 1fr;
        }

        .faq-layout {
            grid-template-columns: 1fr;
            gap: 30px;
        }
    }

    @media (max-width: 920px) {
        .main-nav {
            display: none;
            position: absolute;
            top: calc(100% + 1px);
            left: 0;
            right: 0;
            flex-direction: column;
            align-items: stretch;
            gap: 0;
            background: #0F0E0D;
            border-bottom: 1px solid var(--line-dark);
            padding: 10px 20px 20px;
            max-height: calc(100vh - 120px);
            overflow-y: auto;
        }

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

        .main-nav a {
            padding: 14px 0;
            border-bottom: 1px solid rgba(181, 138, 75, .1);
        }

        .main-nav a:last-child {
            border-bottom: 0;
        }

        .main-nav a::after {
            display: none;
        }

        .main-nav .nav-enter {
            margin-top: 12px;
            text-align: center;
            padding: 11px 18px;
            border: 0;
        }

        .nav-toggle {
            display: flex;
        }
    }

    @media (max-width: 767px) {
        .topbar-links {
            display: none;
        }

        .brand {
            font-size: 22px;
        }

        .brand span {
            font-size: 15px;
        }

        .page-hero {
            padding: 36px 0 46px;
        }

        .article-h1 {
            font-size: clamp(28px, 7vw, 38px);
            line-height: 1.25;
        }

        .article-frame {
            padding: 0;
            background: transparent;
            border: 0;
            box-shadow: none;
        }

        .article-cover {
            margin-bottom: 28px;
            border-radius: 2px;
        }

        .article-cover img {
            aspect-ratio: 16 / 10;
        }

        .article-main-area {
            padding: 42px 0 30px;
        }

        .article-grid {
            grid-template-columns: 1fr;
        }

        .article-aside {
            display: none;
        }

        .article-body p {
            font-size: 16px;
        }

        .article-body p:first-of-type {
            font-size: 17.5px;
        }

        .article-body h2 {
            font-size: 22px;
        }

        .article-body h3 {
            font-size: 19px;
        }

        .related-grid {
            grid-template-columns: 1fr;
        }

        .related-strip {
            padding: 50px 0 56px;
        }

        .cta-band {
            padding: 58px 0;
        }

        .faq-band {
            padding: 42px 0 58px;
        }

        .footer-main {
            grid-template-columns: 1fr;
            gap: 32px;
            padding-top: 44px;
        }
    }

    @media (max-width: 520px) {
        .container {
            width: calc(100% - 32px);
        }

        .section-head {
            flex-direction: column;
            align-items: flex-start;
        }

        .btn-group {
            justify-content: stretch;
        }

        .btn-red,
        .btn-outline {
            justify-content: center;
            width: 100%;
        }

        .footer-bottom .container {
            flex-direction: column;
        }
    }

/* roulang page: category2 */
:root{
  --font-sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
  --serif:"Songti SC","Noto Serif CJK SC",Georgia,serif;
  --dark:#141312;
  --dark-2:#1e1c19;
  --paper:#f7f4ee;
  --paper-deep:#efe9df;
  --red:#c8402f;
  --red-deep:#9c3222;
  --gold:#b58a4b;
  --gold-2:#d9b173;
  --text-light:#f4efe6;
  --text-muted:#a49b92;
  --text-dark:#1e1b16;
  --muted-dark:#6a625a;
  --line-dark:rgba(181,138,75,.28);
  --line-gold:rgba(210,170,105,.55);
  --radius:4px;
  --screen:16px;
  --shadow:0 18px 50px rgba(20,19,18,.18);
  --shadow-soft:0 12px 30px rgba(20,19,18,.08);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{scroll-behavior:smooth}
body{
  font-family:var(--font-sans);
  font-size:var(--screen);
  line-height:1.72;
  color:var(--text-light);
  background:var(--dark);
  -webkit-font-smoothing:antialiased;
}
body.no-scroll{overflow:hidden}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
button{background:none;border:none;cursor:pointer}
ul,ol{list-style:none}
.container{width:min(1200px,calc(100% - 40px));margin-inline:auto}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:13px;letter-spacing:.08em;color:var(--gold-2);
  font-weight:600;text-transform:uppercase;
}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--gold)}
.sec-heading{
  margin-top:10px;color:var(--paper);font-size:clamp(28px,4vw,44px);
  line-height:1.25;font-weight:800;letter-spacing:-.02em;
}
.sec-heading em{
  font-style:normal;color:var(--red);
}
.sec-body{margin-top:14px;max-width:720px;color:var(--text-muted);font-size:16px}
/* ---------- top info bar ---------- */
.site-topbar{
  height:44px;background:var(--dark);
  border-bottom:1px solid rgba(255,255,255,.05);
}
.site-topbar .container{
  height:100%;display:flex;align-items:center;justify-content:space-between;
}
.topbar-text{
  font-size:13px;color:#766f68;letter-spacing:.02em;
}
.topbar-text strong{color:#a89c8b;font-weight:700}
.topbar-nav{
  display:flex;align-items:center;gap:20px;
}
.topbar-nav a{
  font-size:13px;color:#8c847b;transition:color .2s;
}
.topbar-nav a:hover{color:var(--gold-2)}
.topbar-nav .dot{
  width:3px;height:3px;border-radius:50%;background:#4b4641;
  display:inline-block;vertical-align:middle;margin-right:14px;
}
@media(max-width:700px){
  .topbar-text .desc-hide{display:none}
  .container{width:min(1200px,calc(100% - 32px))}
}
/* ---------- main nav ---------- */
.site-header{
  position:sticky;top:0;z-index:120;
  background:rgba(20,19,18,.88);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.nav-inner{
  height:78px;display:flex;align-items:center;justify-content:space-between;
}
.logo{
  display:flex;flex-direction:column;line-height:1.2;
}
.logo .chin{
  font-size:25px;font-weight:900;color:#fff;letter-spacing:.01em;
}
.logo .sub{
  font-size:11px;letter-spacing:.22em;color:var(--gold);text-transform:uppercase;margin-top:3px;
}
.logo kai{font-weight:200;color:#fff}
.main-nav-desktop{display:flex;align-items:center;gap:8px}
.main-nav-desktop a{
  position:relative;display:inline-flex;align-items:center;
  height:40px;padding:0 14px;font-size:15px;
  color:#bfb6ab;border-radius:var(--radius);
  transition:color .2s ease,background .2s ease;
}
.main-nav-desktop a:hover{color:#fff}
.main-nav-desktop a.active{color:#fff;font-weight:700}
.main-nav-desktop a.active::after{
  content:"";position:absolute;left:14px;right:14px;bottom:4px;
  height:2px;background:var(--red);
}
.nav-enter{
  margin-left:12px !important;padding:0 20px !important;
  background:var(--red);color:#fff !important;border-radius:2px;
  height:44px !important;font-weight:700;
  transition:background .2s ease !important;
}
.nav-enter:hover{background:var(--red-deep) !important}
.nav-hamburger{
  display:none;width:46px;height:46px;border:1px solid rgba(255,255,255,.12);
  border-radius:4px;align-items:center;justify-content:center;gap:5px;
  color:#fff;
}
.nav-hamburger::before,.nav-hamburger::after{
  content:"";width:20px;height:2px;background:currentColor;display:block;
}
.nav-hamburger{border:0;width:auto}
.nav-hamburger span{font-size:12px;letter-spacing:.1em}
.mobile-menu{
  position:fixed;inset:0;background:#151311;z-index:200;
  display:flex;flex-direction:column;justify-content:center;
  padding:24px 30px;opacity:0;visibility:hidden;
  transition:opacity .25s ease,visibility .25s ease;
}
.mobile-menu.open{opacity:1;visibility:visible}
.mobile-menu a{
  font-size:26px;font-weight:800;color:#e8e2d8;
  padding:18px 0;border-bottom:1px solid rgba(181,138,75,.18);
}
.mobile-menu a:hover,.mobile-menu a.active{color:var(--red)}
.mobile-menu .mm-close{
  position:absolute;top:22px;right:20px;color:#fff;font-size:28px;
  width:44px;height:44px;border:1px solid rgba(255,255,255,.2);
  border-radius:50%;line-height:36px;text-align:center;
}
.mm-title{margin-bottom:30px;color:var(--gold);font-size:14px;letter-spacing:.2em}
@media(max-width:900px){
  .main-nav-desktop{display:none}
  .nav-hamburger{display:inline-flex}
}
/* ---------- page hero ---------- */
.page-hero{
  position:relative;
  min-height:390px;
  display:flex;align-items:center;
  padding:82px 0 56px;
  background:
    linear-gradient(90deg,rgba(16,15,14,.97) 0%,rgba(16,15,14,.83) 55%,rgba(20,19,18,.5) 100%),
    url('/assets/images/backpic/back-2.webp') center/cover no-repeat,
    var(--dark);
  overflow:hidden;
  border-bottom:1px solid rgba(181,138,75,.2);
}
.page-hero::after{
  content:"OFFICIAL WEB PORTAL";
  position:absolute;right:-12px;bottom:-44px;z-index:0;
  font-size:180px;font-weight:900;letter-spacing:.05em;
  font-family:var(--font-sans);color:rgba(255,255,255,.018);
  white-space:nowrap;pointer-events:none;line-height:1;
}
.hero-inner{position:relative;z-index:2;max-width:680px}
.hero-tag{
  display:inline-flex;align-items:center;gap:10px;
  padding:4px 12px;border:1px solid rgba(181,138,75,.45);
  border-radius:20px;color:var(--gold-2);font-size:13px;letter-spacing:.05em;
}
.hero-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--red)}
.page-hero h1{
  margin-top:28px;color:#fff;font-size:clamp(38px,5.4vw,66px);
  line-height:1.15;letter-spacing:-.025em;font-weight:900;
}
.page-hero h1 span{color:var(--gold-2)}
.page-hero .lead{
  margin-top:22px;max-width:560px;color:#cfc5b8;font-size:17px;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.btn-primary,.btn-gold,.btn-line{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:50px;padding:0 30px;font-weight:700;font-size:15px;
  border-radius:2px;letter-spacing:.03em;white-space:nowrap;
  transition:all .25s ease;
}
.btn-primary{background:var(--red);color:#fff;position:relative;overflow:hidden}
.btn-primary:hover{background:var(--red-deep);transform:translateY(-2px)}
.btn-primary::after{
  content:"";position:absolute;bottom:0;left:0;width:0;height:2px;background:var(--gold-2);
  transition:width .3s ease;
}
.btn-primary:hover::after{width:100%}
.btn-outline{
  border:1px solid rgba(181,138,75,.65);color:#ebe3d8;height:50px;
  display:inline-flex;align-items:center;justify-content:center;
  padding:0 30px;font-weight:600;border-radius:2px;transition:all .25s ease;
}
.btn-outline:hover{border-color:var(--red);background:rgba(200,64,47,.1);color:#fff;transform:translateY(-2px)}
.btn-paper{background:var(--paper);color:var(--text-dark)}
.btn-paper:hover{background:#fff}
.hero-meta{
  display:flex;gap:28px;margin-top:30px;color:#7f776f;font-size:13px;
}
.hero-meta i{display:inline-block;width:4px;height:4px;background:var(--gold);border-radius:50%;vertical-align:middle;margin-right:8px}
/* ---------- intro split ---------- */
.channel-read{
  background:var(--dark-2);
  padding:90px 0 70px;
  border-bottom:1px solid rgba(255,255,255,.05);
}
.read-grid{
  display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:58px;
  align-items:start;
}
.read-copy h2{
  color:#f8f3eb;font-size:clamp(32px,4.4vw,48px);
  font-weight:900;line-height:1.2;letter-spacing:-.02em;
  margin-bottom:26px;
}
.read-copy h2 .ruby{color:var(--red)}
.read-copy p{color:#bdb3a8;font-size:17px;line-height:1.9;margin-bottom:20px}
.read-copy p:first-of-type::first-letter{
  font-family:var(--serif);font-weight:900;color:var(--gold-2);font-size:58px;
  float:left;line-height:.8;padding:10px 14px 0 0;
}
.read-copy strong{color:#eee6d8;font-weight:700}
.info-points{margin-top:28px;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,255,255,.07)}
.info-point{background:var(--dark-2);padding:18px 18px 16px}
.info-point small{color:var(--gold-2);font-size:12px;letter-spacing:.14em;display:block}
.info-point .fn{font-size:19px;color:#e8e0d4;font-weight:800;margin-top:8px;line-height:1.2}
.read-right{
  position:sticky;top:120px;
  border:1px solid var(--line-dark);
  background:linear-gradient(145deg,#211e1b,#181715);
  padding:34px 30px 30px;
}
.read-right::before{
  content:"推荐说明";position:absolute;top:-12px;left:24px;
  background:var(--gold);color:#141312;padding:2px 16px;
  font-size:12px;font-weight:700;letter-spacing:.2em;
}
.read-right blockquote{
  padding:0;margin:0;color:#ded5c8;
  font-size:20px;line-height:1.9;
  font-family:var(--serif);
}
.read-right .quote-mark{
  font-size:46px;color:var(--red);font-family:var(--serif);line-height:.8;display:block;
}
.read-right .later{
  margin-top:24px;padding-top:20px;border-top:1px solid rgba(181,138,75,.2);
  color:#847c73;font-size:13px;
}
@media(max-width:940px){
  .read-grid{grid-template-columns:1fr;gap:40px}
  .read-right{position:relative;top:auto}
  .info-points{grid-template-columns:1fr}
}
/* ---------- watch wall light ---------- */
.watch-wall{
  background:var(--paper);
  color:var(--text-dark);
  padding:96px 0;
}
.watch-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:30px;
  margin-bottom:18px;
}
.watch-head .sub{color:#5e554b}
.watch-head .act{margin-bottom:8px;font-size:14px;color:var(--muted-dark)}
.watch-head .eyebrow::before{background:var(--gold)}
.sec-heading-dark{
  color:#25211d;font-weight:900;
  font-size:clamp(28px,4vw,42px);line-height:1.25;letter-spacing:-.02em;
}
.sec-heading-dark em{color:var(--red);font-style:normal}
.watch-grid{
  margin-top:34px;display:grid;grid-template-columns:repeat(12,1fr);
  gap:22px;
}
.show-card{
  position:relative;overflow:hidden;border-radius:2px;
  min-height:240px;background:#201d18;
  display:flex;flex-direction:column;justify-content:flex-end;
  transition:transform .25s ease,box-shadow .25s ease;
}
.show-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.show-card .cover{position:absolute;inset:0;overflow:hidden}
.show-card .cover img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease,opacity .4s ease}
.show-card:hover .cover img{transform:scale(1.04)}
.show-card .cover::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(15,13,12,.15) 0%,rgba(15,13,12,.65) 60%,rgba(15,13,12,.95) 100%);
  transition:opacity .3s;
}
.show-card .body{position:relative;z-index:2;padding:20px 20px 16px}
.show-card .met{display:flex;align-items:center;gap:12px;font-size:12px;color:#d1c5b7}
.show-card .flag{color:var(--gold-2);border:1px solid rgba(210,170,105,.55);padding:0 8px;height:20px;border-radius:10px;font-size:11px;line-height:18px}
.show-card h3{color:#fff;font-size:20px;line-height:1.4;font-weight:800;margin-top:8px}
.show-card p{margin-top:8px;color:rgba(230,221,209,.75);font-size:14px;line-height:1.6}
.show-card.col-7{grid-column:span 7;min-height:360px}
.show-card.col-5{grid-column:span 5}
.show-card.col-12{grid-column:span 12}
.show-card.col-4{grid-column:span 4;min-height:250px}
.show-card.light-text .body h3{color:#fff}
.show-card .go{
  display:inline-flex;align-items:center;gap:6px;margin-top:12px;
  font-size:14px;color:var(--gold-2);
}
@media(max-width:980px){
  .show-card.col-7,.show-card.col-5,.show-card.col-4{grid-column:span 12;min-height:300px}
  .watch-grid{grid-template-columns:1fr}
}
/* ---------- update index black ---------- */
.update-index{
  background:#12110f;
  padding:90px 0 110px;
  border-top:1px solid rgba(255,255,255,.05);
}
.update-index .container{
  background:var(--dark-2);
  border:1px solid rgba(181,138,75,.16);
  padding:56px 40px 8px;
  position:relative;
  border-radius:2px;
}
.update-index::before{
  content:"更新索引";position:absolute;top:0;right:32px;
  background:transparent;border:1px solid rgba(255,255,255,.09);
  color:#4c4640;font-size:12px;letter-spacing:.2em;padding:4px 16px;
  border-top:none;border-radius:0 0 3px 3px;
}
.row-item{
  display:grid;grid-template-columns:120px 1fr auto;gap:24px;
  align-items:center;padding:20px 0 18px;
  border-bottom:1px solid rgba(255,255,255,.06);
  transition:background .2s;
}
.row-item:hover .row-name{color:#fff}
.row-year{
  font-family:var(--font-sans);font-size:13px;color:#756c62;
}
.row-name{
  color:#cbc1b5;font-size:17px;font-weight:600;transition:color .2s;
  display:flex;flex-direction:column;gap:8px;
}
.row-tag{
  display:inline-flex;align-items:center;gap:8px;color:#8e857c;font-size:13px;
}
.row-tag em{
  font-style:normal;background:rgba(181,138,75,.2);color:var(--gold-2);
  padding:1px 8px;border-radius:2px;font-size:11px;
}
.row-num{
  color:rgba(200,64,47,.8);font-family:var(--serif);
  font-size:34px;font-weight:900;
  letter-spacing:0;
  display:flex;align-items:center;gap:8px;
  color:var(--gold);
  opacity:.7;
}
.row-go{
  color:#7d746a;font-size:28px;transition:color .2s,transform .2s;
  padding:8px;transform:translateX(0)
}
.row-item:hover .row-go{color:var(--red);transform:translateX(4px)}
@media(max-width:700px){
  .update-index .container{padding-inline:20px}
  .row-item{grid-template-columns:70px 1fr;gap:12px}
  .row-go{display:none}
}
/* ---------- category gateway ---------- */
.gateway{
  padding:100px 0 30px;
  background:var(--dark);
}
.quick-cols{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
  margin-top:42px;
}
.quick-card{
  border:1px solid rgba(255,255,255,.08);
  background:#181615;
  padding:34px 24px; 
  position:relative;min-height:190px;
  transition:border-color .2s,transform .2s;
}
.quick-card:hover{border-color:var(--gold);transform:translateY(-4px)}
.quick-card .no{
  font-size:13px;letter-spacing:.2em;color:var(--gold);
  font-weight:700;
}
.quick-card h3{font-size:20px;color:#f4ece3;font-weight:800;margin-top:12px}
.quick-card p{color:#847c75;font-size:13px;margin-top:10px;line-height:1.7}
.quick-card a{
  position:absolute;right:14px;bottom:14px;color:var(--gold-2);font-size:22px;width:36px;height:36px;
  border:1px solid rgba(181,138,75,.3);border-radius:50%;
  display:flex;align-items:center;justify-content:center;transition:all .2s;
}
.quick-card a:hover{background:var(--red);border-color:var(--red);color:#fff;transform:rotate(-20deg)}
@media(max-width:960px){.quick-cols{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.quick-cols{grid-template-columns:1fr}}
/* ---------- steps ---------- */
.steps-band{
  background:var(--paper);
  color:var(--text-dark);
  padding:96px 0 90px;
  margin-top:76px;
}
.steps-band .eyebrow::before,.steps-band .sec-heading-dark{margin-left:0}
.steps-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:36px;margin-top:52px;counter-reset:step;
}
.step-item{
  border-top:3px solid #25211d;
  padding-top:30px;
  position:relative;
}
.step-item::after{
  counter-increment:step;content:"0" counter(step);
  position:absolute;top:12px;right:0;color:#d6cfc4;
  font-size:34px;font-weight:900;font-family:var(--serif);
}
.step-item i{
  display:block;font-size:12px;letter-spacing:.2em;color:var(--red);
  margin-bottom:12px;font-style:normal;
}
.step-item h3{font-size:21px;margin-bottom:10px;line-height:1.3}
.step-item p{color:var(--muted-dark);font-size:14px;line-height:1.75;padding-right:14px}
@media(max-width:940px){.steps-grid{grid-template-columns:1fr;gap:28px}}
/* ---------- CTA ---------- */
.cta-curtain{
  position:relative;
  padding:104px 0 98px;
  text-align:center;
  background:
   radial-gradient(circle at 50% 40%,rgba(200,64,47,.11),transparent 38%),
   linear-gradient(180deg,var(--dark),#0e0d0c 60%,#1a1815);
  color:#fff;overflow:hidden;
}
.cta-curtain::before,
.cta-curtain::after{
  content:"";position:absolute;width:130px;height:130px;
  border:1px solid rgba(181,138,75,.4);
  pointer-events:none;
}
.cta-curtain::before{top:24px;left:28px;border-right:none;border-bottom:none}
.cta-curtain::after{bottom:24px;right:28px;border-left:none;border-top:none}
.cta-kicker{color:var(--gold-2);font-size:12px;letter-spacing:.3em;display:block;margin-bottom:18px}
.cta-curtain h2{
  font-size:clamp(34px,5vw,56px);font-weight:900;line-height:1.25;
  letter-spacing:-.02em;
}
.cta-curtain h2 em{font-style:normal;color:var(--red)}
.cta-curtain p{margin:24px auto 34px;max-width:560px;color:#a49b92;font-size:16px}
.cta-group{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.cta-note{font-size:12px;color:#625b54;margin-top:24px;display:block}
/* ---------- FAQ ---------- */
.faq-section{
  background:#141312;padding:90px 0 54px;
  border-top:1px solid rgba(255,255,255,.05);
}
.faq-grid{
  display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:44px;
}
.faq-list .sec-name{color:var(--paper)}
.faq-item{
  border-bottom:1px solid rgba(255,255,255,.08);
  background:transparent;
}
.faq-item summary{
  position:relative;cursor:pointer;
  padding:22px 46px 22px 2px;
  color:#eee6da;font-size:17px;font-weight:700;line-height:1.55;
  list-style:none;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"+";position:absolute;right:4px;top:22px;width:28px;height:28px;
  color:var(--gold);font-size:24px;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(181,138,75,.35);border-radius:50%;
  transition:all .25s;
}
.faq-item[open] summary::after{
  content:"−";transform:rotate(180deg);background:var(--gold);color:#181510;
}
.faq-answer{
  padding:0 20px 26px 2px;color:#9c948b;font-size:15px;line-height:1.9;
  max-width:760px;
}
.faq-side{
  border:1px solid rgba(255,255,255,.1);
  background:#181614;
  padding:28px;
  align-self:start;
}
.faq-side h3{color:var(--paper);font-size:18px;margin-bottom:12px}
.faq-side p{color:#8b8379;font-size:14px;line-height:1.8;margin-bottom:16px}
.faq-side a{color:var(--red);font-weight:600}
@media(max-width:940px){
  .faq-grid{grid-template-columns:1fr}
  .faq-side{order:-1}
}
/* ---------- footer ---------- */
.site-footer{
  background:#0e0d0c;
  border-top:1px solid rgba(181,138,75,.28);
  padding-top:64px;
}
.footer-main{
  display:grid;grid-template-columns:minmax(280px,1.6fr) 1fr 1fr minmax(260px,1.3fr);
  gap:36px;
}
.footer-brand .site-name{
  font-size:26px;font-weight:900;color:#fff;letter-spacing:0;
  display:block;line-height:1.3;
}
.footer-brand .site-name span{color:var(--gold);font-weight:700}
.footer-brand p{
  margin-top:18px;color:#8a8178;font-size:14px;line-height:1.85;
  max-width:280px;
}
.col-title{
  color:var(--gold-2);font-size:14px;letter-spacing:.14em;font-weight:700;
  padding-bottom:12px;position:relative;margin-bottom:24px;
}
.col-title::after{
  content:"";position:absolute;bottom:0;left:0;width:24px;height:2px;background:var(--red);
}
.footer-col ul li{margin-bottom:14px}
.footer-col ul a{color:#888075;font-size:14px;transition:color .2s,padding-left .2s}
.footer-col ul a:hover{color:#f0e4d5;padding-left:6px}
.footer-col .note{color:#766f68;font-size:14px;line-height:1.8}
.footer-bottom{
  margin-top:58px;padding:20px 0 24px;
  border-top:1px solid rgba(255,255,255,.06);
  font-size:13px;color:#5e5852;
}
.footer-bottom .container{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 14px;
}
.footer-bottom .fe-site{color:#7b736a;font-weight:600}
@media(max-width:1040px){
  .footer-main{grid-template-columns:1fr 1fr;gap:30px}
}
@media(max-width:640px){
  .footer-main{grid-template-columns:1fr}
  .footer-bottom .fe-site{display:block;width:100%}
}
/* ---------- responsive ---------- */
@media(max-width:767px){
  .nav-inner{height:70px}
  .page-hero{min-height:460px;padding:50px 0 44px}
  .channel-read{padding:60px 0 44px}
  .watch-wall,.update-index,.faq-section{padding-top:56px;padding-bottom:50px}
  .cta-curtain{padding:70px 0}
  .hero-inner .lead{font-size:15px}
  .hero-actions .btn-primary,.hero-actions .btn-outline{width:auto}
  .btn-common{flex:1 1 100%}
  .update-index .container{padding:26px 18px 4px}
}