/* roulang page: index */
:root{
    --bg:#09090d;
    --bg-2:#111118;
    --bg-3:#17141d;
    --panel:rgba(23,20,29,.84);
    --panel-2:rgba(28,24,35,.94);
    --line:rgba(255,255,255,.10);
    --line-2:rgba(255,255,255,.16);
    --text:#f4ece7;
    --muted:#b9adb3;
    --muted-2:#8c8088;
    --primary:#c24f63;
    --primary-2:#8f3f57;
    --accent:#d5b07f;
    --accent-2:#f0d7b0;
    --success:#7cc9a7;
    --shadow:0 22px 60px rgba(0,0,0,.36);
    --shadow-soft:0 12px 30px rgba(0,0,0,.22);
    --radius-xl:28px;
    --radius-lg:20px;
    --radius-md:16px;
    --radius-sm:12px;
    --container:1280px;
    --space:clamp(16px,2vw,24px);
    --space-lg:clamp(24px,4vw,48px);
    --space-xl:clamp(40px,6vw,96px);
}
*,
*::before,
*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
    background:
        radial-gradient(circle at top left, rgba(194,79,99,.16), transparent 32%),
        radial-gradient(circle at 85% 15%, rgba(213,176,127,.11), transparent 28%),
        linear-gradient(180deg, #07070a 0%, #0b0b11 38%, #09090d 100%);
    color:var(--text);
    line-height:1.7;
    letter-spacing:.2px;
    overflow-x:hidden;
}
body.menu-open{overflow:hidden}
img{
    display:block;
    max-width:100%;
    height:auto;
}
a{
    color:inherit;
    text-decoration:none;
}
button,input,textarea,select{
    font:inherit;
    color:inherit;
}
button{
    border:0;
    background:none;
    cursor:pointer;
}
::selection{
    background:rgba(194,79,99,.28);
    color:#fff;
}
.skip-link{
    position:absolute;
    left:12px;
    top:-44px;
    z-index:9999;
    padding:10px 14px;
    border-radius:999px;
    background:var(--primary);
    color:#fff;
    transition:top .25s ease;
}
.skip-link:focus{top:12px}
.container{
    width:min(100% - 32px, var(--container));
    margin:0 auto;
}
.section{
    padding:var(--space-xl) 0;
    position:relative;
}
.section.alt{
    background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00));
}
.section-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:16px;
    margin-bottom:28px;
}
.section-head.center{
    flex-direction:column;
    align-items:flex-start;
}
.eyebrow{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:7px 12px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:999px;
    background:rgba(255,255,255,.03);
    color:var(--accent-2);
    font-size:12px;
    letter-spacing:1.2px;
    text-transform:uppercase;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.eyebrow::before{
    content:"";
    width:7px;
    height:7px;
    border-radius:999px;
    background:var(--primary);
    box-shadow:0 0 0 6px rgba(194,79,99,.12);
}
.section-title{
    margin:12px 0 0;
    font-size:clamp(26px, 3vw, 40px);
    line-height:1.15;
    letter-spacing:.2px;
}
.section-desc{
    margin:12px 0 0;
    max-width:720px;
    color:var(--muted);
    font-size:15px;
}
.badge-row{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:24px;
}
.badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:9px 14px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(255,255,255,.04);
    color:#f5e9e5;
    font-size:13px;
    line-height:1;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.badge--accent{
    background:linear-gradient(180deg, rgba(194,79,99,.22), rgba(194,79,99,.08));
    border-color:rgba(194,79,99,.35);
}
.badge--warm{
    background:linear-gradient(180deg, rgba(213,176,127,.18), rgba(213,176,127,.06));
    border-color:rgba(213,176,127,.30);
}
.badge-dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--accent);
    box-shadow:0 0 0 6px rgba(213,176,127,.10);
}
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    min-height:48px;
    padding:0 18px;
    border-radius:999px;
    border:1px solid transparent;
    transition:transform .22s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease, color .22s ease, opacity .22s ease;
    font-weight:700;
    letter-spacing:.2px;
    white-space:nowrap;
    outline:none;
}
.btn:hover{
    transform:translateY(-2px);
    box-shadow:var(--shadow-soft);
}
.btn:active{
    transform:translateY(0);
}
.btn:focus-visible{
    box-shadow:0 0 0 4px rgba(194,79,99,.18), var(--shadow-soft);
}
.btn-primary{
    background:linear-gradient(180deg, #d05a6b, #b84256);
    color:#fff;
    border-color:rgba(255,255,255,.06);
}
.btn-primary:hover{
    background:linear-gradient(180deg, #d56575, #bf4d60);
}
.btn-secondary{
    background:rgba(255,255,255,.03);
    color:var(--text);
    border-color:rgba(255,255,255,.12);
}
.btn-secondary:hover{
    border-color:rgba(213,176,127,.38);
    background:rgba(213,176,127,.08);
}
.btn-sm{
    min-height:40px;
    padding:0 14px;
    font-size:14px;
}
.btn-icon{
    width:18px;
    height:18px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:rgba(255,255,255,.10);
}
.card{
    background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
    border:1px solid rgba(255,255,255,.10);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-soft);
    overflow:hidden;
}
.card-panel{
    background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
    border:1px solid rgba(255,255,255,.10);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-soft);
}
.media{
    position:relative;
    overflow:hidden;
    background:#120f15;
}
.media img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .45s ease;
}
.card:hover .media img,
.featured-card:hover .media img,
.spotlight-card:hover .media img,
.update-item:hover .update-thumb img{
    transform:scale(1.04);
}
.clamp-2,
.clamp-3{
    display:-webkit-box;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
.clamp-2{-webkit-line-clamp:2}
.clamp-3{-webkit-line-clamp:3}
.kbd{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:28px;
    height:28px;
    padding:0 8px;
    border-radius:8px;
    background:rgba(255,255,255,.06);
    color:var(--accent-2);
    border:1px solid rgba(255,255,255,.10);
    font-size:12px;
}
.site-header{
    position:fixed;
    inset:0 0 auto 0;
    z-index:1000;
    padding:14px 0;
    background:rgba(9,9,13,.30);
    border-bottom:1px solid transparent;
    backdrop-filter:blur(14px);
    transition:background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.site-header.is-scrolled{
    background:rgba(9,9,13,.78);
    border-color:rgba(255,255,255,.10);
    box-shadow:0 10px 30px rgba(0,0,0,.22);
}
.nav-shell{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}
.brand{
    display:flex;
    align-items:center;
    gap:14px;
    min-width:0;
}
.brand-mark{
    width:44px;
    height:44px;
    flex:0 0 auto;
    border-radius:14px;
    background:
        linear-gradient(135deg, rgba(194,79,99,.96), rgba(213,176,127,.86));
    box-shadow:0 14px 30px rgba(194,79,99,.20);
    position:relative;
}
.brand-mark::before{
    content:"";
    position:absolute;
    inset:10px;
    border-radius:11px;
    border:1px solid rgba(255,255,255,.38);
}
.brand-text{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:2px;
}
.brand-name{
    font-size:16px;
    font-weight:800;
    line-height:1.2;
    letter-spacing:.3px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.brand-sub{
    font-size:12px;
    color:var(--muted);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.site-nav{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
}
.site-nav a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:42px;
    padding:0 14px;
    border-radius:999px;
    color:var(--muted);
    border:1px solid transparent;
    transition:background .22s ease, color .22s ease, border-color .22s ease, transform .22s ease;
    font-size:14px;
}
.site-nav a:hover,
.site-nav a:focus-visible,
.site-nav a[aria-current="page"]{
    background:rgba(255,255,255,.05);
    color:var(--text);
    border-color:rgba(255,255,255,.10);
    transform:translateY(-1px);
}
.header-actions{
    display:flex;
    align-items:center;
    gap:10px;
}
.nav-toggle{
    display:none;
    width:48px;
    height:48px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.04);
    align-items:center;
    justify-content:center;
    gap:4px;
    flex-direction:column;
}
.nav-toggle span{
    width:18px;
    height:2px;
    border-radius:999px;
    background:var(--text);
    opacity:.92;
}
.mobile-drawer{
    position:fixed;
    top:0;
    right:0;
    z-index:1200;
    width:min(88vw, 360px);
    height:100vh;
    padding:20px;
    transform:translateX(105%);
    transition:transform .28s ease;
    background:linear-gradient(180deg, rgba(17,17,24,.98), rgba(11,11,16,.98));
    border-left:1px solid rgba(255,255,255,.10);
    box-shadow:-18px 0 40px rgba(0,0,0,.30);
    display:flex;
    flex-direction:column;
    gap:18px;
}
.mobile-drawer.open{transform:translateX(0)}
.drawer-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}
.drawer-close{
    width:44px;
    height:44px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.04);
    color:var(--text);
}
.drawer-nav{
    display:flex;
    flex-direction:column;
    gap:10px;
}
.drawer-nav a{
    min-height:48px;
    padding:0 16px;
    border-radius:16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.03);
    color:var(--text);
}
.drawer-nav a span{
    color:var(--muted);
    font-size:13px;
}
.drawer-note{
    margin-top:auto;
    padding:16px;
    border-radius:var(--radius-md);
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.10);
    color:var(--muted);
    font-size:13px;
    line-height:1.6;
}
.drawer-backdrop{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.52);
    opacity:0;
    pointer-events:none;
    transition:opacity .25s ease;
    z-index:1100;
}
.drawer-backdrop.open{
    opacity:1;
    pointer-events:auto;
}
.hero{
    position:relative;
    padding:124px 0 var(--space-xl);
    background:
        linear-gradient(180deg, rgba(7,7,10,.15), rgba(7,7,10,.88)),
        url('/assets/images/backpic/back-1.webp') center/cover no-repeat;
    border-bottom:1px solid rgba(255,255,255,.08);
}
.hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 22% 24%, rgba(194,79,99,.18), transparent 34%),
        radial-gradient(circle at 82% 18%, rgba(213,176,127,.14), transparent 28%),
        linear-gradient(180deg, rgba(9,9,13,.34), rgba(9,9,13,.88));
    pointer-events:none;
}
.hero .container{
    position:relative;
    z-index:1;
}
.hero-grid{
    display:grid;
    grid-template-columns:1.02fr .98fr;
    gap:clamp(20px, 4vw, 40px);
    align-items:center;
}
.hero-copy{
    max-width:720px;
}
.hero-kicker{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:16px;
}
.hero-title{
    margin:0;
    font-size:clamp(40px, 5vw, 68px);
    line-height:1.02;
    letter-spacing:-.8px;
}
.hero-subtitle{
    margin:18px 0 0;
    max-width:620px;
    color:#e9dde1;
    font-size:17px;
    line-height:1.85;
}
.hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:28px;
}
.hero-stats{
    display:grid;
    grid-template-columns:repeat(4, minmax(0,1fr));
    gap:12px;
    margin-top:28px;
}
.stat{
    padding:14px 14px 16px;
    border-radius:16px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.10);
    backdrop-filter:blur(10px);
}
.stat strong{
    display:block;
    font-size:16px;
    line-height:1.2;
}
.stat span{
    display:block;
    margin-top:8px;
    color:var(--muted);
    font-size:12px;
}
.hero-visual{
    display:grid;
    gap:14px;
}
.hero-collage{
    position:relative;
    min-height:520px;
    border-radius:var(--radius-xl);
    padding:18px;
    background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
    border:1px solid rgba(255,255,255,.10);
    box-shadow:var(--shadow);
    overflow:hidden;
}
.hero-collage::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(135deg, rgba(194,79,99,.12), transparent 42%),
        linear-gradient(315deg, rgba(213,176,127,.12), transparent 42%);
    pointer-events:none;
}
.hero-card{
    position:absolute;
    border-radius:22px;
    overflow:hidden;
    box-shadow:0 18px 42px rgba(0,0,0,.28);
    border:1px solid rgba(255,255,255,.10);
    background:#140f15;
}
.hero-card img{
    width:100%;
    height:100%;
    object-fit:cover;
}
.hero-card.main{
    inset:18px 24px 94px 120px;
}
.hero-card.top{
    width:42%;
    height:42%;
    left:18px;
    top:18px;
}
.hero-card.bottom{
    width:36%;
    height:32%;
    right:18px;
    bottom:18px;
}
.hero-bubble{
    position:absolute;
    left:20px;
    bottom:18px;
    width:min(55%, 300px);
    padding:16px 16px 14px;
    border-radius:18px;
    background:rgba(13,12,18,.78);
    border:1px solid rgba(255,255,255,.12);
    backdrop-filter:blur(12px);
}
.hero-bubble h3{
    margin:0 0 8px;
    font-size:16px;
}
.hero-bubble p{
    margin:0;
    color:var(--muted);
    font-size:13px;
    line-height:1.6;
}
.search-card{
    padding:16px;
    border-radius:22px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.10);
    box-shadow:var(--shadow-soft);
}
.search-card h3{
    margin:0 0 10px;
    font-size:15px;
}
.search-form{
    display:flex;
    gap:10px;
}
.search-form input{
    flex:1;
    min-width:0;
    height:48px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.12);
    background:rgba(8,8,10,.55);
    padding:0 14px;
    color:var(--text);
    outline:none;
    transition:border-color .22s ease, box-shadow .22s ease, background .22s ease;
}
.search-form input::placeholder{color:#9e9198}
.search-form input:focus{
    border-color:rgba(213,176,127,.42);
    box-shadow:0 0 0 4px rgba(213,176,127,.10);
    background:rgba(8,8,10,.72);
}
.search-form button{
    min-width:96px;
}
.featured-layout{
    display:grid;
    grid-template-columns:1.25fr .75fr;
    gap:18px;
}
.featured-card,
.spotlight-card,
.update-item,
.guide-card,
.faq-item,
.cta-band,
.footer-card{
    position:relative;
    border-radius:var(--radius-lg);
    border:1px solid rgba(255,255,255,.10);
    background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
    box-shadow:var(--shadow-soft);
    overflow:hidden;
}
.featured-card{
    min-height:460px;
    display:flex;
    flex-direction:column;
}
.featured-card .media{
    height:290px;
}
.featured-card .content{
    padding:20px;
    display:flex;
    flex-direction:column;
    gap:12px;
}
.featured-card h3,
.spotlight-card h3,
.update-title,
.guide-card h3{
    margin:0;
    line-height:1.35;
}
.featured-card p,
.spotlight-card p,
.guide-card p,
.footer-card p{
    margin:0;
    color:var(--muted);
    font-size:14px;
}
.card-meta{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    align-items:center;
}
.meta-pill{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px 10px;
    border-radius:999px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.10);
    color:var(--muted);
    font-size:12px;
    line-height:1;
}
.meta-pill.hot{
    color:#fff;
    background:rgba(194,79,99,.18);
    border-color:rgba(194,79,99,.32);
}
.featured-stack{
    display:grid;
    gap:18px;
}
.featured-mini{
    display:grid;
    grid-template-columns:136px 1fr;
    gap:0;
    min-height:221px;
}
.featured-mini .media{
    min-height:100%;
}
.featured-mini .content{
    padding:18px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    gap:10px;
}
.featured-mini h3{
    font-size:18px;
}
.featured-mini .more{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:var(--accent-2);
    font-weight:700;
    font-size:13px;
}
.updates-grid{
    display:grid;
    grid-template-columns:1.2fr .8fr;
    gap:22px;
    align-items:start;
}
.updates-list{
    display:grid;
    gap:14px;
}
.update-item{
    display:grid;
    grid-template-columns:132px 1fr;
    gap:0;
    min-height:158px;
    transition:transform .22s ease, border-color .22s ease, background .22s ease;
}
.update-item:hover{
    transform:translateY(-3px);
    border-color:rgba(213,176,127,.22);
    background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
}
.update-thumb{
    position:relative;
    min-height:100%;
    overflow:hidden;
}
.update-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .45s ease;
}
.update-content{
    padding:16px 18px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    gap:12px;
}
.update-top{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    align-items:center;
}
.update-title{
    font-size:18px;
    line-height:1.4;
}
.update-summary{
    color:var(--muted);
    font-size:14px;
    line-height:1.8;
}
.update-link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    width:max-content;
    padding:0;
    color:var(--accent-2);
    font-weight:700;
    font-size:13px;
    transition:transform .22s ease, color .22s ease;
}
.update-item:hover .update-link{
    transform:translateX(2px);
    color:#fff;
}
.update-side{
    display:grid;
    gap:14px;
}
.side-panel{
    padding:20px;
}
.side-panel h3{
    margin:0 0 12px;
    font-size:18px;
}
.side-list{
    display:grid;
    gap:10px;
}
.side-list .line{
    padding:14px 14px 14px 16px;
    border-radius:16px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
}
.line strong{
    display:block;
    font-size:14px;
}
.line span{
    display:block;
    margin-top:6px;
    color:var(--muted);
    font-size:13px;
    line-height:1.65;
}
.empty-state{
    min-height:280px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:28px;
    border-radius:var(--radius-lg);
    border:1px dashed rgba(255,255,255,.16);
    background:rgba(255,255,255,.03);
    color:var(--muted);
}
.empty-state p{
    margin:0;
    font-size:15px;
    letter-spacing:.3px;
}
.spotlight-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:18px;
}
.spotlight-card{
    display:flex;
    flex-direction:column;
    min-height:100%;
}
.spotlight-card .media{
    height:220px;
}
.spotlight-card .content{
    padding:18px;
    display:grid;
    gap:10px;
}
.spotlight-card h3{font-size:18px}
.spotlight-card .link{
    margin-top:auto;
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:var(--accent-2);
    font-weight:700;
    font-size:13px;
}
.guide-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:18px;
}
.guide-card{
    padding:20px;
}
.guide-step{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    border-radius:14px;
    background:linear-gradient(180deg, rgba(194,79,99,.26), rgba(194,79,99,.12));
    border:1px solid rgba(194,79,99,.30);
    color:#fff;
    font-weight:800;
    margin-bottom:14px;
}
.guide-card h3{
    font-size:18px;
    margin-bottom:10px;
}
.guide-list{
    display:grid;
    gap:8px;
    margin-top:12px;
    color:var(--muted);
    font-size:14px;
}
.guide-list span{
    display:flex;
    gap:10px;
    align-items:flex-start;
}
.guide-list span::before{
    content:"";
    width:7px;
    height:7px;
    border-radius:50%;
    margin-top:.58em;
    background:var(--accent);
    box-shadow:0 0 0 4px rgba(213,176,127,.10);
    flex:0 0 auto;
}
.faq-grid{
    display:grid;
    gap:12px;
}
.faq-item{
    overflow:hidden;
}
.faq-q{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:18px 20px;
    background:none;
    color:var(--text);
    text-align:left;
    font-weight:700;
    outline:none;
}
.faq-q span{
    flex:1;
    min-width:0;
}
.faq-icon{
    flex:0 0 auto;
    width:32px;
    height:32px;
    border-radius:50%;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(255,255,255,.10);
    background:rgba(255,255,255,.04);
    transition:transform .22s ease, background .22s ease, border-color .22s ease;
}
.faq-item.open .faq-icon{
    transform:rotate(45deg);
    background:rgba(194,79,99,.18);
    border-color:rgba(194,79,99,.28);
}
.faq-a{
    max-height:0;
    overflow:hidden;
    transition:max-height .28s ease;
    border-top:1px solid rgba(255,255,255,.08);
}
.faq-a-inner{
    padding:0 20px 18px;
    color:var(--muted);
    font-size:14px;
    line-height:1.8;
}
.faq-item.open .faq-a{max-height:220px}
.cta-section{
    padding:0 0 var(--space-xl);
}
.cta-band{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:20px;
    padding:28px;
    background:
        linear-gradient(135deg, rgba(194,79,99,.28), rgba(139,62,85,.16)),
        linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
}
.cta-band h2{
    margin:0;
    font-size:clamp(28px, 3vw, 42px);
    line-height:1.12;
}
.cta-band p{
    margin:14px 0 0;
    color:#f5e9e5;
    max-width:700px;
    font-size:15px;
    line-height:1.8;
}
.cta-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    align-self:center;
    justify-content:flex-end;
}
.site-footer{
    padding:26px 0 38px;
    border-top:1px solid rgba(255,255,255,.08);
    background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00));
}
.footer-grid{
    display:grid;
    grid-template-columns:1.1fr .7fr .9fr;
    gap:18px;
}
.footer-card{
    padding:20px;
}
.footer-card h3{
    margin:0 0 12px;
    font-size:16px;
}
.footer-links{
    display:grid;
    gap:10px;
}
.footer-links a{
    color:var(--muted);
    transition:color .22s ease, transform .22s ease;
}
.footer-links a:hover,
.footer-links a:focus-visible{
    color:#fff;
    transform:translateX(2px);
}
.footer-note{
    margin-top:18px;
    color:var(--muted-2);
    font-size:13px;
    line-height:1.8;
}
.footer-bottom{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    margin-top:18px;
    padding-top:18px;
    border-top:1px solid rgba(255,255,255,.08);
    color:var(--muted-2);
    font-size:13px;
    flex-wrap:wrap;
}
.backtop{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:var(--accent-2);
    font-weight:700;
}
.backtop .btn-icon{background:rgba(213,176,127,.14)}
@media (max-width: 1200px){
    .hero-grid,
    .updates-grid,
    .cta-band,
    .footer-grid{
        grid-template-columns:1fr;
    }
    .featured-layout{
        grid-template-columns:1fr;
    }
    .featured-mini{
        grid-template-columns:160px 1fr;
    }
}
@media (max-width: 992px){
    .hero{
        padding-top:116px;
    }
    .hero-title{
        font-size:clamp(36px, 5.8vw, 56px);
    }
    .hero-stats{
        grid-template-columns:repeat(2, minmax(0,1fr));
    }
    .spotlight-grid,
    .guide-grid{
        grid-template-columns:repeat(2, minmax(0,1fr));
    }
    .site-nav,
    .header-actions .btn-secondary{
        display:none;
    }
    .nav-toggle{
        display:inline-flex;
    }
    .hero-collage{
        min-height:460px;
    }
}
@media (max-width: 768px){
    .section{
        padding:72px 0;
    }
    .section-head{
        flex-direction:column;
        align-items:flex-start;
    }
    .hero-grid{
        gap:18px;
    }
    .hero-collage{
        min-height:420px;
    }
    .hero-card.main{
        inset:18px 18px 92px 92px;
    }
    .hero-card.top{
        width:44%;
        height:40%;
    }
    .hero-card.bottom{
        width:38%;
        height:30%;
    }
    .hero-bubble{
        width:min(68%, 300px);
    }
    .featured-mini,
    .update-item{
        grid-template-columns:1fr;
    }
    .featured-card .media,
    .featured-mini .media,
    .spotlight-card .media{
        height:220px;
    }
    .spotlight-grid,
    .guide-grid{
        grid-template-columns:1fr;
    }
    .cta-actions{
        justify-content:flex-start;
    }
}
@media (max-width: 520px){
    .container{
        width:min(100% - 24px, var(--container));
    }
    .hero{
        padding:104px 0 64px;
    }
    .hero-title{
        font-size:clamp(32px, 10vw, 44px);
    }
    .hero-subtitle{
        font-size:15px;
    }
    .hero-stats{
        grid-template-columns:1fr 1fr;
    }
    .hero-collage{
        min-height:360px;
        padding:14px;
    }
    .hero-card.main{
        inset:14px 14px 74px 74px;
    }
    .hero-card.top{
        width:46%;
        height:38%;
        left:14px;
        top:14px;
    }
    .hero-card.bottom{
        width:40%;
        height:28%;
        right:14px;
        bottom:14px;
    }
    .hero-bubble{
        left:14px;
        bottom:14px;
        width:min(78%, 280px);
        padding:14px;
    }
    .search-form{
        flex-direction:column;
    }
    .search-form button{
        width:100%;
    }
    .featured-card .content,
    .spotlight-card .content,
    .guide-card,
    .side-panel,
    .faq-q,
    .faq-a-inner,
    .cta-band{
        padding-left:16px;
        padding-right:16px;
    }
    .faq-q{
        padding-top:16px;
        padding-bottom:16px;
    }
    .footer-grid{
        gap:14px;
    }
}

/* roulang page: article */
:root{
        --bg:#09090d;
        --bg-2:#111118;
        --bg-3:#17141d;
        --panel:rgba(23,20,29,.84);
        --panel-2:rgba(28,24,35,.94);
        --line:rgba(255,255,255,.10);
        --line-2:rgba(255,255,255,.16);
        --text:#f4ece7;
        --muted:#b9adb3;
        --muted-2:#8c8088;
        --primary:#c24f63;
        --primary-2:#8f3f57;
        --accent:#d5b07f;
        --accent-2:#f0d7b0;
        --success:#7cc9a7;
        --shadow:0 22px 60px rgba(0,0,0,.36);
        --shadow-soft:0 12px 30px rgba(0,0,0,.22);
        --radius-xl:28px;
        --radius-lg:20px;
        --radius-md:16px;
        --radius-sm:12px;
        --container:1280px;
        --space:clamp(16px,2vw,24px);
        --space-lg:clamp(24px,4vw,48px);
        --space-xl:clamp(40px,6vw,96px);
    }
    html{scroll-behavior:smooth}
    *{box-sizing:border-box}
    body{
        margin:0;
        font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
        background:
            radial-gradient(circle at top left, rgba(194,79,99,.16), transparent 32%),
            radial-gradient(circle at 85% 15%, rgba(213,176,127,.11), transparent 28%),
            linear-gradient(180deg, #07070a 0%, #0b0b11 38%, #09090d 100%);
        color:var(--text);
        line-height:1.7;
        letter-spacing:.2px;
        overflow-x:hidden;
        padding-top:92px;
    }
    body.menu-open{overflow:hidden}
    ::selection{background:rgba(194,79,99,.35);color:#fff}
    a{
        color:inherit;
        text-decoration:none;
    }
    a:hover{text-decoration:none}
    img{
        display:block;
        max-width:100%;
        height:auto;
    }
    button,input,textarea,select{
        font:inherit;
        color:inherit;
    }
    button{
        border:0;
        background:none;
        cursor:pointer;
    }
    .container{
        width:min(100% - 32px, var(--container));
        margin:0 auto;
    }
    .section{
        padding:var(--space-xl) 0;
        position:relative;
    }
    .section.alt{
        background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
    }
    .section-head{
        display:flex;
        align-items:flex-end;
        justify-content:space-between;
        gap:16px;
        margin-bottom:28px;
    }
    .section-head.center{
        flex-direction:column;
        align-items:flex-start;
    }
    .eyebrow{
        display:inline-flex;
        align-items:center;
        gap:10px;
        padding:7px 12px;
        border:1px solid rgba(255,255,255,.10);
        border-radius:999px;
        background:rgba(255,255,255,.03);
        color:var(--accent-2);
        font-size:12px;
        letter-spacing:1.2px;
        text-transform:uppercase;
        box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
    }
    .eyebrow::before{
        content:"";
        width:7px;
        height:7px;
        border-radius:999px;
        background:var(--primary);
        box-shadow:0 0 0 6px rgba(194,79,99,.12);
        flex:0 0 auto;
    }
    .section-title{
        margin:12px 0 0;
        font-size:clamp(26px, 3vw, 40px);
        line-height:1.15;
        letter-spacing:.2px;
    }
    .section-desc{
        margin:12px 0 0;
        max-width:720px;
        color:var(--muted);
        font-size:15px;
    }
    .badge-row{
        display:flex;
        flex-wrap:wrap;
        gap:10px;
        margin-top:24px;
    }
    .badge{
        display:inline-flex;
        align-items:center;
        gap:8px;
        padding:9px 14px;
        border-radius:999px;
        border:1px solid rgba(255,255,255,.10);
        background:rgba(255,255,255,.04);
        color:#f5e9e5;
        font-size:13px;
        line-height:1;
        box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
        white-space:nowrap;
    }
    .badge--accent{
        background:linear-gradient(180deg, rgba(194,79,99,.22), rgba(194,79,99,.08));
        border-color:rgba(194,79,99,.35);
    }
    .badge--warm{
        background:linear-gradient(180deg, rgba(213,176,127,.18), rgba(213,176,127,.06));
        border-color:rgba(213,176,127,.30);
    }
    .badge--success{
        background:linear-gradient(180deg, rgba(124,201,167,.18), rgba(124,201,167,.06));
        border-color:rgba(124,201,167,.26);
    }
    .btn{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        gap:10px;
        min-height:48px;
        padding:0 18px;
        border-radius:999px;
        border:1px solid transparent;
        transition:transform .22s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease, color .22s ease, opacity .22s ease;
        font-weight:700;
        letter-spacing:.2px;
        white-space:nowrap;
        outline:none;
    }
    .btn:hover{
        transform:translateY(-2px);
        box-shadow:var(--shadow-soft);
    }
    .btn:active{
        transform:translateY(0);
    }
    .btn:focus-visible{
        box-shadow:0 0 0 4px rgba(194,79,99,.18), var(--shadow-soft);
    }
    .btn-primary{
        background:linear-gradient(180deg, #d05a6b, #b84256);
        color:#fff;
        border-color:rgba(255,255,255,.06);
    }
    .btn-primary:hover{
        background:linear-gradient(180deg, #d56575, #bf4d60);
        color:#fff;
    }
    .btn-secondary{
        background:rgba(255,255,255,.03);
        color:var(--text);
        border-color:rgba(255,255,255,.12);
    }
    .btn-secondary:hover{
        border-color:rgba(213,176,127,.38);
        background:rgba(213,176,127,.08);
        color:var(--text);
    }
    .btn-sm{
        min-height:40px;
        padding:0 14px;
        font-size:14px;
    }
    .btn-icon{
        width:18px;
        height:18px;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        border-radius:50%;
        background:rgba(255,255,255,.10);
        font-size:12px;
        line-height:1;
    }
    .card{
        background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
        border:1px solid rgba(255,255,255,.10);
        border-radius:var(--radius-lg);
        box-shadow:var(--shadow-soft);
        overflow:hidden;
    }
    .card-panel{
        background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
        border:1px solid rgba(255,255,255,.10);
        border-radius:var(--radius-lg);
        box-shadow:var(--shadow-soft);
    }
    .media{
        position:relative;
        overflow:hidden;
        background:#120f15;
    }
    .media img{
        width:100%;
        height:100%;
        object-fit:cover;
        transition:transform .45s ease;
    }
    .card:hover .media img,
    .featured-card:hover .media img,
    .spotlight-card:hover .media img,
    .update-item:hover .update-thumb img,
    .related-card:hover .media img{
        transform:scale(1.04);
    }
    .site-header{
        position:fixed;
        inset:0 0 auto 0;
        z-index:1000;
        padding:14px 0;
        background:rgba(9,9,13,.30);
        border-bottom:1px solid transparent;
        backdrop-filter:blur(14px);
        transition:background .25s ease, border-color .25s ease, box-shadow .25s ease;
    }
    .site-header.is-scrolled{
        background:rgba(9,9,13,.78);
        border-color:rgba(255,255,255,.10);
        box-shadow:0 10px 30px rgba(0,0,0,.22);
    }
    .nav-shell{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:20px;
    }
    .brand{
        display:flex;
        align-items:center;
        gap:14px;
        min-width:0;
    }
    .brand-mark{
        width:48px;
        height:48px;
        border-radius:16px;
        background:
            radial-gradient(circle at 30% 30%, rgba(255,255,255,.16), transparent 25%),
            linear-gradient(180deg, rgba(194,79,99,.95), rgba(143,63,87,.98));
        display:grid;
        place-items:center;
        color:#fff;
        box-shadow:0 16px 35px rgba(194,79,99,.22), inset 0 1px 0 rgba(255,255,255,.12);
        flex:0 0 auto;
        font-weight:800;
        letter-spacing:.5px;
    }
    .brand-text{
        display:flex;
        flex-direction:column;
        min-width:0;
    }
    .brand-text strong{
        font-size:17px;
        line-height:1.15;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }
    .brand-text span{
        font-size:12px;
        color:var(--muted);
        margin-top:2px;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }
    .nav-actions{
        display:flex;
        align-items:center;
        gap:12px;
    }
    .nav-toggle{
        display:none;
        width:48px;
        height:48px;
        border-radius:14px;
        border:1px solid rgba(255,255,255,.10);
        background:rgba(255,255,255,.04);
        color:var(--text);
        box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
        align-items:center;
        justify-content:center;
        flex-direction:column;
        gap:4px;
    }
    .nav-toggle span{
        display:block;
        width:18px;
        height:2px;
        border-radius:999px;
        background:var(--text);
        transition:transform .22s ease, opacity .22s ease;
    }
    .nav-panel{
        display:flex;
        align-items:center;
        gap:16px;
    }
    .site-nav{
        display:flex;
        align-items:center;
        gap:8px;
        flex-wrap:wrap;
    }
    .site-nav a{
        position:relative;
        padding:11px 14px;
        border-radius:999px;
        color:#efe4df;
        font-weight:600;
        font-size:14px;
        transition:background .22s ease, color .22s ease, transform .22s ease, border-color .22s ease;
        border:1px solid transparent;
    }
    .site-nav a:hover{
        background:rgba(255,255,255,.05);
        border-color:rgba(255,255,255,.08);
        transform:translateY(-1px);
    }
    .site-nav a[aria-current="page"]{
        background:linear-gradient(180deg, rgba(194,79,99,.24), rgba(194,79,99,.10));
        border-color:rgba(194,79,99,.35);
        color:#fff;
        box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
    }
    .nav-backdrop{
        display:none;
    }
    .hero{
        position:relative;
        padding:20px 0 44px;
    }
    .hero-frame{
        position:relative;
        border:1px solid rgba(255,255,255,.08);
        border-radius:calc(var(--radius-xl) + 6px);
        overflow:hidden;
        background:
            linear-gradient(180deg, rgba(7,7,10,.10), rgba(7,7,10,.72)),
            url('/assets/images/backpic/back-2.webp') center/cover no-repeat;
        box-shadow:var(--shadow);
    }
    .hero-frame::before{
        content:"";
        position:absolute;
        inset:0;
        background:
            radial-gradient(circle at 20% 15%, rgba(194,79,99,.22), transparent 24%),
            radial-gradient(circle at 88% 20%, rgba(213,176,127,.14), transparent 22%),
            linear-gradient(90deg, rgba(7,7,10,.78) 0%, rgba(7,7,10,.40) 52%, rgba(7,7,10,.70) 100%);
        pointer-events:none;
    }
    .hero-grid{
        position:relative;
        z-index:1;
        display:grid;
        grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);
        gap:28px;
        padding:clamp(28px, 5vw, 56px);
        min-height:540px;
        align-items:center;
    }
    .hero-copy{
        max-width:760px;
    }
    .hero-title{
        margin:10px 0 0;
        font-size:clamp(34px, 4.8vw, 62px);
        line-height:1.03;
        letter-spacing:-.4px;
        text-wrap:balance;
    }
    .hero-lead{
        margin:18px 0 0;
        max-width:760px;
        color:#f0e5df;
        font-size:16px;
    }
    .hero-actions{
        display:flex;
        flex-wrap:wrap;
        gap:12px;
        margin-top:28px;
    }
    .hero-metrics{
        display:flex;
        flex-wrap:wrap;
        gap:10px;
        margin-top:26px;
    }
    .hero-metric{
        display:inline-flex;
        align-items:center;
        gap:10px;
        padding:11px 14px;
        border-radius:999px;
        border:1px solid rgba(255,255,255,.10);
        background:rgba(8,8,12,.42);
        color:#f7ece8;
        backdrop-filter:blur(8px);
        box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
        font-size:13px;
        white-space:nowrap;
    }
    .hero-metric strong{
        color:var(--accent-2);
        font-weight:700;
    }
    .hero-art{
        display:grid;
        gap:14px;
        align-self:stretch;
    }
    .hero-stack{
        display:grid;
        gap:14px;
        grid-template-columns:1fr 1fr;
    }
    .hero-poster{
        position:relative;
        min-height:260px;
        border-radius:24px;
        overflow:hidden;
        border:1px solid rgba(255,255,255,.10);
        box-shadow:var(--shadow-soft);
        background:#120f15;
    }
    .hero-poster img{
        width:100%;
        height:100%;
        object-fit:cover;
    }
    .hero-poster--tall{
        min-height:540px;
    }
    .hero-floating{
        display:flex;
        flex-direction:column;
        gap:12px;
    }
    .hero-mini{
        display:flex;
        gap:12px;
        padding:14px;
        border-radius:22px;
        background:rgba(23,20,29,.82);
        border:1px solid rgba(255,255,255,.10);
        box-shadow:var(--shadow-soft);
        backdrop-filter:blur(12px);
    }
    .hero-mini__media{
        width:84px;
        height:84px;
        flex:0 0 auto;
        border-radius:18px;
        overflow:hidden;
        background:#130f15;
    }
    .hero-mini__body{
        min-width:0;
        display:flex;
        flex-direction:column;
        justify-content:center;
    }
    .hero-mini__title{
        margin:0;
        font-size:16px;
        line-height:1.3;
        font-weight:700;
    }
    .hero-mini__text{
        margin:6px 0 0;
        color:var(--muted);
        font-size:13px;
        line-height:1.6;
    }
    .breadcrumb{
        display:flex;
        align-items:center;
        flex-wrap:wrap;
        gap:8px;
        color:var(--muted);
        font-size:13px;
        margin:8px 0 22px;
    }
    .breadcrumb a{
        color:#f0d7b0;
    }
    .breadcrumb span.sep{
        color:rgba(255,255,255,.24);
    }
    .article-shell{
        padding:0 0 var(--space-xl);
    }
    .article-grid{
        display:grid;
        grid-template-columns:minmax(0,1.55fr) minmax(300px,.80fr);
        gap:22px;
        align-items:start;
    }
    .article-card{
        border-radius:var(--radius-xl);
        background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
        border:1px solid rgba(255,255,255,.10);
        box-shadow:var(--shadow);
        overflow:hidden;
    }
    .article-head{
        padding:24px 24px 0;
    }
    .article-card .section-title{
        margin-top:10px;
    }
    .article-mini-meta{
        display:flex;
        flex-wrap:wrap;
        gap:10px;
        margin-top:16px;
    }
    .article-summary{
        margin:16px 0 0;
        color:var(--muted);
        max-width:860px;
        font-size:15px;
    }
    .article-body{
        padding:24px;
        font-size:16px;
        color:#f5ebe6;
    }
    .article-body h2,
    .article-body h3{
        line-height:1.35;
        margin:1.8em 0 .8em;
        color:#fff;
        text-wrap:balance;
    }
    .article-body h2{
        font-size:clamp(22px,2.2vw,30px);
    }
    .article-body h3{
        font-size:clamp(18px,1.8vw,24px);
    }
    .article-body p{
        margin:0 0 1.05em;
        color:#f2e7e1;
    }
    .article-body p:last-child{margin-bottom:0}
    .article-body a{
        color:var(--accent-2);
        text-decoration:none;
        border-bottom:1px solid rgba(240,215,176,.22);
        transition:border-color .2s ease, color .2s ease;
    }
    .article-body a:hover{
        color:#fff;
        border-bottom-color:rgba(255,255,255,.38);
    }
    .article-body img{
        width:100%;
        max-width:100%;
        height:auto;
        border-radius:20px;
        margin:1.3em 0;
        border:1px solid rgba(255,255,255,.10);
        box-shadow:var(--shadow-soft);
    }
    .article-body figure{
        margin:1.2em 0;
    }
    .article-body figcaption{
        margin-top:10px;
        color:var(--muted);
        font-size:13px;
        text-align:center;
    }
    .article-body ul,
    .article-body ol{
        padding-left:1.4em;
        margin:0 0 1.1em;
        color:#f5ebe6;
    }
    .article-body li{
        margin:.48em 0;
    }
    .article-body blockquote{
        margin:1.3em 0;
        padding:18px 20px;
        border-left:3px solid rgba(213,176,127,.8);
        background:rgba(213,176,127,.06);
        border-radius:16px;
        color:#f7efe9;
    }
    .article-body hr{
        border:0;
        height:1px;
        background:rgba(255,255,255,.10);
        margin:1.8em 0;
    }
    .article-body table{
        width:100%;
        border-collapse:collapse;
        margin:1.3em 0;
        overflow:hidden;
        display:block;
    }
    .article-body thead,
    .article-body tbody,
    .article-body tr{
        width:100%;
    }
    .article-body th,
    .article-body td{
        border:1px solid rgba(255,255,255,.10);
        padding:12px 14px;
        text-align:left;
        background:rgba(255,255,255,.02);
    }
    .article-body th{
        color:#fff;
        background:rgba(255,255,255,.04);
    }
    .article-body strong{
        color:#fff;
    }
    .article-footer{
        padding:0 24px 24px;
    }
    .article-tools{
        display:flex;
        flex-wrap:wrap;
        gap:10px;
        margin-top:18px;
    }
    .article-tools .btn{
        min-height:42px;
    }
    .article-aside{
        display:grid;
        gap:18px;
        position:sticky;
        top:112px;
    }
    .info-card{
        padding:22px;
        border-radius:var(--radius-xl);
        background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
        border:1px solid rgba(255,255,255,.10);
        box-shadow:var(--shadow-soft);
    }
    .info-card h3{
        margin:0;
        font-size:20px;
        line-height:1.25;
    }
    .info-card p{
        margin:10px 0 0;
        color:var(--muted);
        font-size:14px;
    }
    .info-list{
        list-style:none;
        padding:0;
        margin:16px 0 0;
        display:grid;
        gap:12px;
    }
    .info-item{
        display:flex;
        justify-content:space-between;
        gap:12px;
        padding:12px 14px;
        border-radius:16px;
        background:rgba(255,255,255,.03);
        border:1px solid rgba(255,255,255,.08);
        color:#f5ece7;
        font-size:14px;
    }
    .info-label{
        color:var(--muted);
        flex:0 0 auto;
    }
    .info-value{
        text-align:right;
        color:#fff;
        min-width:0;
    }
    .callout{
        margin-top:16px;
        padding:16px;
        border-radius:18px;
        background:linear-gradient(180deg, rgba(194,79,99,.16), rgba(194,79,99,.08));
        border:1px solid rgba(194,79,99,.25);
        color:#f9efeb;
        font-size:14px;
    }
    .related-section{
        padding:0 0 var(--space-xl);
    }
    .related-grid{
        display:grid;
        grid-template-columns:repeat(3, minmax(0,1fr));
        gap:18px;
    }
    .related-card{
        border-radius:var(--radius-lg);
        overflow:hidden;
        border:1px solid rgba(255,255,255,.10);
        background:rgba(255,255,255,.03);
        box-shadow:var(--shadow-soft);
        transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    }
    .related-card:hover{
        transform:translateY(-3px);
        box-shadow:var(--shadow);
        border-color:rgba(255,255,255,.18);
    }
    .related-card .media{
        aspect-ratio:16/10;
    }
    .related-card-body{
        padding:16px;
    }
    .related-card-title{
        margin:0;
        font-size:18px;
        line-height:1.35;
        font-weight:700;
        display:-webkit-box;
        -webkit-line-clamp:2;
        -webkit-box-orient:vertical;
        overflow:hidden;
    }
    .related-card-text{
        margin:10px 0 0;
        color:var(--muted);
        font-size:14px;
        line-height:1.7;
        display:-webkit-box;
        -webkit-line-clamp:3;
        -webkit-box-orient:vertical;
        overflow:hidden;
    }
    .article-nav{
        display:flex;
        flex-wrap:wrap;
        gap:12px;
        margin-top:16px;
    }
    .article-nav a{
        display:inline-flex;
        align-items:center;
        gap:8px;
        padding:10px 14px;
        border-radius:999px;
        border:1px solid rgba(255,255,255,.10);
        background:rgba(255,255,255,.03);
        color:#f7ede8;
        font-size:14px;
        transition:transform .22s ease, background .22s ease, border-color .22s ease;
    }
    .article-nav a:hover{
        transform:translateY(-2px);
        background:rgba(255,255,255,.06);
        border-color:rgba(213,176,127,.32);
    }
    .cta-strip{
        padding:0 0 var(--space-xl);
    }
    .cta-shell{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:20px;
        padding:26px;
        border-radius:calc(var(--radius-xl) + 2px);
        background:
            radial-gradient(circle at top right, rgba(213,176,127,.16), transparent 30%),
            linear-gradient(135deg, rgba(194,79,99,.20), rgba(23,20,29,.92));
        border:1px solid rgba(255,255,255,.10);
        box-shadow:var(--shadow);
    }
    .cta-copy h2{
        margin:0;
        font-size:clamp(24px, 2.7vw, 34px);
        line-height:1.15;
    }
    .cta-copy p{
        margin:10px 0 0;
        color:#f1e7e1;
        max-width:740px;
        font-size:15px;
    }
    .cta-buttons{
        display:flex;
        gap:12px;
        flex-wrap:wrap;
        flex:0 0 auto;
    }
    .empty-state{
        padding:34px 24px;
        text-align:center;
    }
    .empty-state h2{
        margin:0;
        font-size:28px;
        line-height:1.2;
    }
    .empty-state p{
        margin:12px auto 0;
        max-width:520px;
        color:var(--muted);
        font-size:15px;
    }
    .empty-state .empty-actions{
        margin-top:22px;
    }
    .site-footer{
        padding:28px 0 22px;
        border-top:1px solid rgba(255,255,255,.08);
        background:linear-gradient(180deg, rgba(255,255,255,.015), rgba(255,255,255,.02));
    }
    .footer-grid{
        display:grid;
        grid-template-columns:1.4fr 1fr 1fr;
        gap:18px;
    }
    .footer-card{
        padding:22px;
        border-radius:var(--radius-lg);
        background:rgba(255,255,255,.03);
        border:1px solid rgba(255,255,255,.08);
        box-shadow:var(--shadow-soft);
    }
    .footer-card h3{
        margin:0;
        font-size:18px;
        line-height:1.25;
    }
    .footer-card p{
        margin:10px 0 0;
        color:var(--muted);
        font-size:14px;
        line-height:1.8;
    }
    .footer-note{
        margin-top:14px;
        color:var(--muted-2);
        font-size:13px;
        line-height:1.8;
    }
    .footer-links{
        display:grid;
        gap:10px;
        margin-top:14px;
    }
    .footer-links a{
        display:inline-flex;
        align-items:center;
        width:fit-content;
        color:#f1e7e1;
        padding:4px 0;
        border-bottom:1px solid transparent;
        transition:color .2s ease, border-color .2s ease, transform .2s ease;
    }
    .footer-links a:hover{
        color:#fff;
        border-color:rgba(240,215,176,.36);
        transform:translateX(2px);
    }
    .footer-bottom{
        margin-top:18px;
        padding-top:18px;
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:12px;
        color:var(--muted);
        font-size:13px;
    }
    .backtop{
        display:inline-flex;
        align-items:center;
        gap:10px;
        color:#f0d7b0;
        transition:transform .22s ease, color .22s ease;
    }
    .backtop:hover{
        transform:translateY(-2px);
        color:#fff;
    }
    .backtop .btn-icon{
        background:rgba(255,255,255,.08);
    }
    @media (max-width: 1199.98px){
        .hero-grid{
            grid-template-columns:minmax(0,1fr) minmax(290px,.92fr);
        }
        .article-grid{
            grid-template-columns:minmax(0,1.2fr) minmax(290px,.8fr);
        }
        .related-grid{
            grid-template-columns:repeat(2, minmax(0,1fr));
        }
    }
    @media (max-width: 991.98px){
        body{padding-top:86px}
        .nav-toggle{display:inline-flex}
        .nav-panel{
            position:fixed;
            top:86px;
            left:16px;
            right:16px;
            display:flex;
            flex-direction:column;
            align-items:stretch;
            gap:14px;
            padding:16px;
            border-radius:24px;
            background:rgba(12,12,17,.94);
            border:1px solid rgba(255,255,255,.10);
            box-shadow:var(--shadow);
            backdrop-filter:blur(16px);
            opacity:0;
            transform:translateY(-10px);
            pointer-events:none;
            transition:opacity .22s ease, transform .22s ease;
        }
        .menu-open .nav-panel{
            opacity:1;
            transform:translateY(0);
            pointer-events:auto;
        }
        .nav-backdrop{
            position:fixed;
            inset:86px 0 0 0;
            display:block;
            background:rgba(0,0,0,.34);
            opacity:0;
            pointer-events:none;
            transition:opacity .22s ease;
            z-index:998;
        }
        .menu-open .nav-backdrop{
            opacity:1;
            pointer-events:auto;
        }
        .site-nav{
            flex-direction:column;
            align-items:stretch;
            gap:8px;
        }
        .site-nav a{
            width:100%;
            padding:13px 14px;
            border-radius:16px;
        }
        .hero-grid{
            grid-template-columns:1fr;
            min-height:auto;
        }
        .hero-poster--tall{
            min-height:360px;
        }
        .hero-stack{
            grid-template-columns:1fr 1fr;
        }
        .article-grid{
            grid-template-columns:1fr;
        }
        .article-aside{
            position:static;
        }
        .footer-grid{
            grid-template-columns:1fr;
        }
        .cta-shell{
            flex-direction:column;
            align-items:flex-start;
        }
    }
    @media (max-width: 767.98px){
        .section{
            padding:calc(var(--space-xl) * .72) 0;
        }
        .hero{
            padding:12px 0 34px;
        }
        .hero-frame{
            border-radius:24px;
        }
        .hero-grid{
            padding:22px;
            gap:18px;
        }
        .hero-title{
            font-size:clamp(30px, 10vw, 46px);
        }
        .hero-lead,
        .section-desc,
        .article-summary{
            font-size:14px;
        }
        .hero-poster--tall{
            min-height:300px;
        }
        .hero-stack{
            grid-template-columns:1fr;
        }
        .badge-row,
        .hero-metrics,
        .article-mini-meta,
        .article-tools,
        .cta-buttons{
            gap:8px;
        }
        .related-grid{
            grid-template-columns:1fr;
        }
        .article-body,
        .article-head,
        .article-footer,
        .info-card,
        .footer-card,
        .cta-shell{
            padding:18px;
        }
        .footer-bottom{
            flex-direction:column;
            align-items:flex-start;
        }
    }
    @media (max-width: 520px){
        .container{
            width:min(100% - 24px, var(--container));
        }
        .site-header{
            padding:10px 0;
        }
        .brand-mark{
            width:42px;
            height:42px;
            border-radius:14px;
        }
        .brand-text strong{
            font-size:15px;
        }
        .brand-text span{
            font-size:11px;
        }
        .nav-toggle{
            width:44px;
            height:44px;
        }
        .hero-grid{
            padding:18px;
        }
        .hero-title{
            font-size:clamp(28px, 12vw, 38px);
        }
        .btn{
            width:100%;
        }
        .hero-actions .btn,
        .article-tools .btn,
        .cta-buttons .btn{
            width:auto;
        }
        .hero-actions,
        .cta-buttons,
        .article-nav{
            width:100%;
        }
        .hero-mini{
            padding:12px;
        }
        .hero-mini__media{
            width:72px;
            height:72px;
        }
        .info-item{
            flex-direction:column;
        }
        .info-value{
            text-align:left;
        }
    }

/* roulang: framework shim */
/* 覆盖 Bootstrap 等对 a/btn 的全局默认，避免导航出现下划线/蓝链 */
.site-header a,.site-header a:hover,.navbar a,.navbar a:hover,.nav-links a,.nav-links a:hover,header nav a,header nav a:hover{text-decoration:none}
.site-header .btn,.navbar .btn,.nav-cta{text-decoration:none}