/* roulang page: index */
:root{
    --bg:#f5efe9;
    --bg-soft:#fbf7f2;
    --panel:#fffaf6;
    --panel-strong:#ffffff;
    --text:#23181a;
    --muted:#6e5c60;
    --faint:#a28e92;
    --line:rgba(108,67,75,.16);
    --line-strong:rgba(108,67,75,.28);
    --brand:#7b2033;
    --brand-2:#9c3047;
    --brand-deep:#51121f;
    --gold:#b8863b;
    --gold-soft:#e0bf82;
    --shadow:0 16px 40px rgba(72, 27, 37, .09);
    --shadow-strong:0 22px 50px rgba(72, 27, 37, .15);
    --radius-sm:12px;
    --radius-md:18px;
    --radius-lg:24px;
    --radius-xl:30px;
    --container:1180px;
    --header-h:82px;
    --transition:.22s cubic-bezier(.2,.7,.2,1);
}

*,
*::before,
*::after{box-sizing:border-box}
html{
    scroll-behavior:smooth;
    scroll-padding-top:96px;
}
body{
    margin:0;
    min-height:100vh;
    color:var(--text);
    font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
    line-height:1.7;
    background:
        radial-gradient(1000px 500px at 8% -8%, rgba(123,32,51,.12), transparent 60%),
        radial-gradient(900px 420px at 95% 4%, rgba(184,134,59,.12), transparent 58%),
        linear-gradient(180deg, #fbf7f2 0%, #f4ece6 100%);
    text-rendering:optimizeLegibility;
    -webkit-font-smoothing:antialiased;
}
body::selection{background:rgba(123,32,51,.18);color:var(--brand-deep)}
a{
    color:inherit;
    text-decoration:none;
    transition:color var(--transition),opacity var(--transition),transform var(--transition);
}
img{
    display:block;
    max-width:100%;
}
button,input,textarea,select{
    font:inherit;
}
button{
    border:0;
    background:none;
    padding:0;
}
:focus{outline:none}
:focus-visible{
    outline:3px solid rgba(184,134,59,.34);
    outline-offset:3px;
}
.container{
    width:min(var(--container), calc(100% - 32px));
    margin:0 auto;
}
.site-shell{
    position:relative;
    overflow:hidden;
}

.site-header{
    position:sticky;
    top:0;
    z-index:50;
    background:rgba(28, 16, 20, .94);
    border-bottom:1px solid rgba(255,255,255,.06);
    box-shadow:0 10px 30px rgba(19, 8, 11, .16);
}
.header-inner{
    min-height:var(--header-h);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}
.brand{
    display:inline-flex;
    align-items:center;
    gap:12px;
    color:#fff;
    font-weight:800;
    letter-spacing:.02em;
    flex:0 0 auto;
}
.brand-mark{
    width:38px;
    height:38px;
    border-radius:13px;
    display:grid;
    place-items:center;
    color:#fff;
    background:linear-gradient(145deg, var(--brand), var(--brand-2));
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.08), 0 10px 24px rgba(123,32,51,.26);
    font-size:.95rem;
}
.brand-text{
    font-size:1.02rem;
    line-height:1.1;
    white-space:nowrap;
}
.site-nav{
    display:flex;
    align-items:center;
    gap:10px;
}
.site-nav a{
    position:relative;
    color:rgba(255,255,255,.86);
    padding:11px 14px;
    border-radius:999px;
    font-weight:600;
    line-height:1;
    letter-spacing:.01em;
}
.site-nav a::after{
    content:"";
    position:absolute;
    left:14px;
    right:14px;
    bottom:7px;
    height:2px;
    border-radius:999px;
    background:linear-gradient(90deg, transparent, rgba(224,191,130,.9), transparent);
    transform:scaleX(0);
    transform-origin:center;
    transition:transform var(--transition);
}
.site-nav a:hover{
    color:#fff;
    background:rgba(255,255,255,.05);
}
.site-nav a:hover::after,
.site-nav a.active::after{
    transform:scaleX(1);
}
.site-nav a.active{
    color:#fff;
    background:rgba(184,134,59,.16);
}
.nav-toggle{
    display:none;
    align-items:center;
    gap:10px;
    color:#fff;
    border:1px solid rgba(255,255,255,.14);
    border-radius:999px;
    padding:10px 14px;
    background:rgba(255,255,255,.05);
    transition:transform var(--transition), background var(--transition), border-color var(--transition);
}
.nav-toggle:hover{
    transform:translateY(-1px);
    background:rgba(255,255,255,.09);
    border-color:rgba(224,191,130,.28);
}
.nav-toggle:active{
    transform:translateY(1px);
}
.nav-toggle-lines{
    display:grid;
    gap:4px;
    width:18px;
}
.nav-toggle-lines i{
    display:block;
    height:2px;
    border-radius:999px;
    background:#fff;
    opacity:.92;
}
.nav-toggle span:last-child{
    font-size:.94rem;
    font-weight:700;
}

main{
    position:relative;
}
.section{
    padding:72px 0;
}
.section.alt{
    background:
        linear-gradient(180deg, rgba(255,255,255,.52), rgba(255,255,255,.82)),
        linear-gradient(180deg, rgba(123,32,51,.03), rgba(123,32,51,0));
    border-top:1px solid rgba(123,32,51,.07);
    border-bottom:1px solid rgba(123,32,51,.05);
}
.section-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:18px;
    margin-bottom:24px;
}
.section-label{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:var(--brand);
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
    font-size:.78rem;
}
.section-label::before{
    content:"";
    width:22px;
    height:2px;
    border-radius:999px;
    background:linear-gradient(90deg, var(--brand), var(--gold));
}
.section-head h2{
    margin:8px 0 0;
    font-size:clamp(1.45rem, 1rem + 1.6vw, 2.15rem);
    line-height:1.16;
    letter-spacing:-.02em;
}
.section-head p{
    margin:8px 0 0;
    color:var(--muted);
    max-width:64ch;
}
.section-head .text-link{
    margin-bottom:4px;
    flex:0 0 auto;
}

.hero{
    position:relative;
    padding:38px 0 30px;
    color:#fff;
    background:
        linear-gradient(180deg, rgba(25,10,14,.78), rgba(25,10,14,.72)),
        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:
        linear-gradient(135deg, rgba(123,32,51,.18), rgba(0,0,0,0) 40%),
        radial-gradient(900px 380px at 86% 18%, rgba(184,134,59,.22), transparent 55%);
    pointer-events:none;
}
.hero-grid{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr);
    gap:28px;
    align-items:stretch;
}
.hero-copy{
    padding:34px 0 26px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}
.eyebrow{
    display:inline-flex;
    align-items:center;
    gap:10px;
    width:fit-content;
    color:rgba(255,255,255,.9);
    font-size:.93rem;
    font-weight:700;
    letter-spacing:.02em;
    padding:8px 12px;
    border-radius:999px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.12);
    margin-bottom:18px;
}
.eyebrow-line{
    width:26px;
    height:2px;
    border-radius:999px;
    background:linear-gradient(90deg, var(--gold-soft), rgba(255,255,255,.2));
}
.hero h1{
    margin:0;
    max-width:12ch;
    font-size:clamp(2.6rem, 1.3rem + 4.5vw, 5.2rem);
    line-height:.96;
    letter-spacing:-.05em;
}
.hero-desc{
    margin:18px 0 0;
    max-width:63ch;
    color:rgba(255,255,255,.82);
    font-size:1.02rem;
}
.hero-tags{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:22px;
}
.badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 12px;
    border-radius:999px;
    font-size:.88rem;
    font-weight:700;
    line-height:1;
    white-space:nowrap;
}
.badge-soft{
    color:#f8ecd1;
    background:rgba(184,134,59,.16);
    border:1px solid rgba(224,191,130,.24);
}
.badge-strong{
    color:#fff;
    background:linear-gradient(145deg, var(--brand), var(--brand-2));
    border:1px solid rgba(255,255,255,.08);
}
.badge-outline{
    color:var(--brand);
    background:rgba(123,32,51,.06);
    border:1px solid rgba(123,32,51,.14);
}
.hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:28px;
}
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:48px;
    padding:0 20px;
    border-radius:999px;
    font-weight:800;
    letter-spacing:.01em;
    transition:transform var(--transition), background var(--transition), border-color var(--transition), box-shadow var(--transition), color var(--transition);
    cursor:pointer;
}
.btn-primary{
    color:#fff;
    background:linear-gradient(145deg, var(--brand), var(--brand-2));
    box-shadow:0 14px 28px rgba(123,32,51,.24);
    border:1px solid rgba(255,255,255,.06);
}
.btn-primary:hover{
    transform:translateY(-2px);
    box-shadow:0 20px 38px rgba(123,32,51,.28);
}
.btn-primary:active{
    transform:translateY(1px) scale(.99);
}
.btn-secondary{
    color:#f8ecd1;
    background:transparent;
    border:1px solid rgba(224,191,130,.46);
}
.btn-secondary:hover{
    transform:translateY(-2px);
    background:rgba(184,134,59,.12);
    border-color:rgba(224,191,130,.7);
}
.btn-secondary:active{
    transform:translateY(1px) scale(.99);
}
.btn-ghost{
    color:#fff;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.16);
}
.btn-ghost:hover{
    transform:translateY(-2px);
    background:rgba(255,255,255,.08);
    border-color:rgba(255,255,255,.24);
}
.btn:disabled{
    opacity:.58;
    cursor:not-allowed;
    transform:none;
}
.hero-note{
    margin-top:16px;
    color:rgba(255,255,255,.74);
    font-size:.94rem;
}

.hero-visual{
    display:grid;
    grid-template-rows:minmax(320px,1fr) auto;
    gap:16px;
    align-content:stretch;
}
.visual-card{
    position:relative;
    overflow:hidden;
    border-radius:var(--radius-xl);
    border:1px solid rgba(255,255,255,.12);
    box-shadow:var(--shadow-strong);
    background:rgba(255,255,255,.04);
}
.visual-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    transform:scale(1.02);
    filter:saturate(1.02) contrast(1.02);
}
.visual-card-main::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(180deg, rgba(12,7,9,.02) 0%, rgba(12,7,9,.35) 100%),
        linear-gradient(135deg, rgba(123,32,51,.18), rgba(0,0,0,0) 52%);
}
.visual-overlay{
    position:absolute;
    left:18px;
    right:18px;
    bottom:18px;
    z-index:1;
    padding:18px 18px 16px;
    border-radius:20px;
    background:linear-gradient(180deg, rgba(22, 12, 14, .22), rgba(22, 12, 14, .52));
    border:1px solid rgba(255,255,255,.12);
    backdrop-filter:none;
}
.visual-overlay h2{
    margin:12px 0 6px;
    font-size:1.42rem;
    line-height:1.16;
}
.visual-overlay p{
    margin:0;
    color:rgba(255,255,255,.82);
}
.visual-stack{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:14px;
}
.mini-card{
    display:grid;
    grid-template-columns:88px 1fr;
    gap:12px;
    align-items:center;
    padding:12px;
    border-radius:20px;
    background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.1);
    box-shadow:0 12px 22px rgba(17, 8, 10, .13);
}
.mini-card img{
    width:88px;
    height:96px;
    border-radius:14px;
    object-fit:cover;
}
.mini-kicker{
    display:inline-flex;
    margin-bottom:7px;
    color:#f2d7b5;
    font-size:.8rem;
    font-weight:700;
}
.mini-card strong{
    display:block;
    color:#fff;
    font-size:.97rem;
    line-height:1.45;
}

.strip{
    padding:0 0 16px;
    margin-top:-4px;
}
.strip-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:12px;
}
.strip-item{
    position:relative;
    overflow:hidden;
    padding:16px 18px;
    border-radius:20px;
    background:linear-gradient(180deg, rgba(255,255,255,.76), rgba(255,255,255,.92));
    border:1px solid rgba(123,32,51,.08);
    box-shadow:var(--shadow);
}
.strip-item::before{
    content:"";
    position:absolute;
    inset:auto auto -14px -12px;
    width:58px;
    height:58px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(184,134,59,.18), rgba(184,134,59,0) 68%);
    pointer-events:none;
}
.strip-item span{
    display:block;
    color:var(--brand);
    font-size:.82rem;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
}
.strip-item strong{
    display:block;
    margin-top:6px;
    font-size:1rem;
    line-height:1.55;
}

.featured-grid{
    display:grid;
    grid-template-columns:minmax(0,1.06fr) minmax(320px,.94fr);
    gap:18px;
}
.feature-card{
    overflow:hidden;
    border-radius:var(--radius-lg);
    border:1px solid var(--line);
    background:var(--panel-strong);
    box-shadow:var(--shadow);
    transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.feature-card:hover{
    transform:translateY(-3px);
    box-shadow:var(--shadow-strong);
    border-color:var(--line-strong);
}
.feature-media{
    position:relative;
    overflow:hidden;
}
.feature-media img{
    width:100%;
    height:100%;
    object-fit:cover;
}
.feature-media::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(0,0,0,0) 34%, rgba(14,7,8,.55) 100%);
}
.feature-card-large .feature-media{
    aspect-ratio:16/10;
}
.feature-card-small .feature-media{
    aspect-ratio:16/9;
}
.feature-body{
    padding:18px 18px 20px;
}
.feature-body h3{
    margin:12px 0 8px;
    font-size:1.26rem;
    line-height:1.25;
}
.feature-body p{
    margin:0;
    color:var(--muted);
}
.feature-body .text-link{
    margin-top:14px;
}
.feature-stack{
    display:grid;
    gap:14px;
}
.feature-card-small{
    display:grid;
    grid-template-columns:124px 1fr;
    align-items:stretch;
}
.feature-card-small .feature-media{
    min-height:168px;
}
.feature-card-small .feature-body{
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:18px;
}
.feature-card-small .feature-body h3{
    font-size:1.08rem;
}

.text-link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:var(--brand);
    font-weight:800;
    padding-bottom:2px;
    border-bottom:1px solid rgba(123,32,51,.18);
}
.text-link:hover{
    color:var(--gold);
    border-bottom-color:rgba(184,134,59,.42);
}
.text-link::after{
    content:"→";
    font-weight:700;
}

.latest-layout{
    display:grid;
    grid-template-columns:minmax(0,1.18fr) 320px;
    gap:18px;
    align-items:start;
}
.latest-list{
    display:grid;
    gap:14px;
}
.post-row{
    display:grid;
    grid-template-columns:156px minmax(0,1fr);
    gap:16px;
    padding:14px;
    border-radius:24px;
    background:var(--panel-strong);
    border:1px solid var(--line);
    box-shadow:var(--shadow);
    transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.post-row:hover{
    transform:translateY(-2px);
    box-shadow:var(--shadow-strong);
    border-color:var(--line-strong);
}
.post-thumb{
    position:relative;
    overflow:hidden;
    border-radius:18px;
    background:linear-gradient(180deg, rgba(123,32,51,.08), rgba(184,134,59,.08));
}
.post-thumb img{
    width:100%;
    height:100%;
    min-height:120px;
    object-fit:cover;
    transition:transform var(--transition);
}
.post-row:hover .post-thumb img{
    transform:scale(1.03);
}
.post-body{
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-width:0;
}
.post-meta{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:center;
    color:var(--faint);
    font-size:.88rem;
}
.post-meta time{
    display:inline-flex;
    align-items:center;
    gap:6px;
}
.post-meta time::before{
    content:"•";
    color:rgba(123,32,51,.45);
}
.post-body h3{
    margin:10px 0 8px;
    font-size:1.16rem;
    line-height:1.35;
}
.post-body h3 a{
    color:var(--text);
}
.post-body h3 a:hover{
    color:var(--brand);
}
.post-body p{
    margin:0;
    color:var(--muted);
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
.post-actions{
    margin-top:12px;
}
.latest-aside{
    display:grid;
    gap:14px;
    position:sticky;
    top:100px;
}
.aside-card{
    padding:18px;
    border-radius:22px;
    background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,251,247,.98));
    border:1px solid var(--line);
    box-shadow:var(--shadow);
}
.aside-card h3{
    margin:0 0 10px;
    font-size:1.05rem;
}
.aside-card p{
    margin:0;
    color:var(--muted);
}
.aside-list{
    margin:14px 0 0;
    padding:0;
    list-style:none;
    display:grid;
    gap:10px;
}
.aside-list li{
    display:flex;
    align-items:flex-start;
    gap:10px;
    color:var(--text);
}
.aside-list li::before{
    content:"";
    width:8px;
    height:8px;
    margin-top:10px;
    border-radius:50%;
    background:linear-gradient(145deg, var(--brand), var(--gold));
    box-shadow:0 0 0 4px rgba(123,32,51,.08);
    flex:0 0 auto;
}
.aside-links{
    display:grid;
    gap:10px;
    margin-top:14px;
}
.aside-links .btn{
    width:100%;
}

.empty-state{
    padding:26px 20px;
    border-radius:22px;
    background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(252,247,243,.96));
    border:1px dashed rgba(123,32,51,.22);
    text-align:center;
    box-shadow:var(--shadow);
}
.empty-state p{
    margin:0;
    color:var(--muted);
    font-weight:700;
}

.guide-grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:14px;
}
.info-card{
    padding:18px;
    border-radius:22px;
    background:var(--panel-strong);
    border:1px solid var(--line);
    box-shadow:var(--shadow);
    transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.info-card:hover{
    transform:translateY(-3px);
    box-shadow:var(--shadow-strong);
    border-color:var(--line-strong);
}
.info-icon{
    width:44px;
    height:44px;
    border-radius:15px;
    display:grid;
    place-items:center;
    font-size:.95rem;
    font-weight:800;
    color:#fff;
    background:linear-gradient(145deg, var(--brand), var(--brand-2));
    box-shadow:0 12px 24px rgba(123,32,51,.18);
}
.info-card h3{
    margin:14px 0 8px;
    font-size:1.05rem;
}
.info-card p{
    margin:0;
    color:var(--muted);
}

.faq-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:14px;
}
.faq-item{
    overflow:hidden;
    border-radius:22px;
    background:var(--panel-strong);
    border:1px solid var(--line);
    box-shadow:var(--shadow);
    transition:border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.faq-item[open]{
    border-color:var(--line-strong);
    box-shadow:var(--shadow-strong);
}
.faq-item:hover{
    transform:translateY(-2px);
}
.faq-item summary{
    list-style:none;
    cursor:pointer;
    padding:18px 18px 17px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    font-weight:800;
    color:var(--text);
}
.faq-item summary::-webkit-details-marker{
    display:none;
}
.faq-item summary::after{
    content:"+";
    width:28px;
    height:28px;
    border-radius:50%;
    display:grid;
    place-items:center;
    color:var(--brand);
    background:rgba(123,32,51,.07);
    border:1px solid rgba(123,32,51,.12);
    flex:0 0 auto;
    transition:transform var(--transition), background var(--transition);
}
.faq-item[open] summary::after{
    content:"–";
    background:rgba(184,134,59,.12);
    color:var(--brand-deep);
}
.faq-item .faq-content{
    padding:0 18px 18px;
    color:var(--muted);
}
.faq-item .faq-content p{
    margin:0;
}
.faq-item .faq-content p + p{
    margin-top:10px;
}

.cta-panel{
    display:grid;
    grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr);
    gap:16px;
    padding:24px;
    border-radius:30px;
    background:
        linear-gradient(145deg, rgba(123,32,51,.95), rgba(81,18,31,.96)),
        linear-gradient(180deg, rgba(184,134,59,.18), rgba(184,134,59,0));
    color:#fff;
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 20px 50px rgba(46, 13, 21, .16);
}
.cta-copy{
    padding:8px 4px 8px 8px;
}
.cta-copy .section-label{
    color:#f6dfbf;
}
.cta-copy .section-label::before{
    background:linear-gradient(90deg, #f6dfbf, rgba(255,255,255,.2));
}
.cta-copy h2{
    margin:12px 0 10px;
    font-size:clamp(1.55rem, 1rem + 2vw, 2.2rem);
    line-height:1.18;
}
.cta-copy p{
    margin:0;
    max-width:60ch;
    color:rgba(255,255,255,.82);
}
.cta-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:22px;
}

.feedback-form{
    padding:18px;
    border-radius:24px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.12);
}
.field-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:12px;
}
.field{
    display:grid;
    gap:8px;
    margin-bottom:12px;
}
.field label,
.feedback-form > label{
    color:#f8ead5;
    font-size:.92rem;
    font-weight:700;
}
.input,
.textarea{
    width:100%;
    border-radius:16px;
    border:1px solid rgba(255,255,255,.16);
    background:rgba(255,255,255,.95);
    color:var(--text);
    padding:13px 14px;
    transition:border-color var(--transition), box-shadow var(--transition), transform var(--transition), background var(--transition);
}
.input::placeholder,
.textarea::placeholder{
    color:#9c8b8e;
}
.input:focus,
.textarea:focus{
    border-color:rgba(184,134,59,.72);
    box-shadow:0 0 0 4px rgba(184,134,59,.16);
}
.textarea{
    min-height:120px;
    resize:vertical;
}
.feedback-actions{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-top:10px;
}
.feedback-note{
    margin:0;
    color:rgba(255,255,255,.72);
    font-size:.9rem;
}

.site-footer{
    padding:32px 0 42px;
    background:linear-gradient(180deg, rgba(18,9,11,.97), rgba(28,16,20,.98));
    color:#f5e8df;
    border-top:1px solid rgba(255,255,255,.08);
}
.footer-grid{
    display:grid;
    grid-template-columns:minmax(0,1.25fr) auto minmax(280px,.95fr);
    gap:24px;
    align-items:start;
}
.footer-brand{
    color:#fff;
    font-size:1.02rem;
}
.footer-brand + p{
    margin:14px 0 0;
    color:rgba(255,255,255,.74);
    max-width:56ch;
}
.footer-links{
    display:grid;
    gap:10px;
}
.footer-links a{
    color:rgba(255,255,255,.82);
    width:fit-content;
    padding-bottom:2px;
    border-bottom:1px solid transparent;
}
.footer-links a:hover{
    color:#fff;
    border-bottom-color:rgba(224,191,130,.5);
}
.footer-note{
    display:grid;
    gap:10px;
    justify-items:end;
    text-align:right;
}
.footer-note p{
    margin:0;
    color:rgba(255,255,255,.74);
}
.footer-note strong{
    color:#fff;
}

.card,
.feature-card,
.post-row,
.info-card,
.faq-item,
.aside-card,
.strip-item,
.empty-state,
.feedback-form,
.visual-card,
.mini-card{
    position:relative;
}
.card:active,
.feature-card:active,
.post-row:active,
.info-card:active,
.faq-item:active{
    transform:translateY(1px);
}
.hero a,
.site-footer a{
    transition:color var(--transition), border-color var(--transition), background var(--transition), transform var(--transition);
}

@media (max-width: 1100px){
    .hero-grid,
    .featured-grid,
    .latest-layout,
    .cta-panel,
    .footer-grid{
        grid-template-columns:1fr;
    }
    .latest-aside{
        position:static;
    }
    .guide-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 820px){
    .site-header{
        position:sticky;
    }
    .nav-toggle{
        display:inline-flex;
    }
    .site-nav{
        display:none;
        position:absolute;
        top:100%;
        left:0;
        right:0;
        padding:10px 16px 18px;
        flex-direction:column;
        align-items:stretch;
        gap:6px;
        background:rgba(28,16,20,.98);
        border-bottom:1px solid rgba(255,255,255,.08);
        box-shadow:0 16px 30px rgba(19,8,11,.18);
    }
    .site-header.is-open .site-nav{
        display:flex;
    }
    .site-nav a{
        padding:13px 14px;
        border-radius:16px;
        background:rgba(255,255,255,.03);
    }
    .site-nav a::after{
        display:none;
    }
    .section{
        padding:56px 0;
    }
    .section-head{
        align-items:flex-start;
        flex-direction:column;
    }
    .strip-grid,
    .guide-grid,
    .faq-grid{
        grid-template-columns:1fr;
    }
    .feature-card-small{
        grid-template-columns:1fr;
    }
    .feature-card-small .feature-media{
        min-height:220px;
    }
    .post-row{
        grid-template-columns:1fr;
    }
    .post-thumb img{
        min-height:210px;
    }
    .field-grid{
        grid-template-columns:1fr;
    }
    .footer-note{
        justify-items:start;
        text-align:left;
    }
}

@media (max-width: 560px){
    :root{
        --header-h:76px;
    }
    .container{
        width:min(var(--container), calc(100% - 22px));
    }
    .header-inner{
        gap:12px;
    }
    .brand-text{
        max-width:13ch;
        white-space:normal;
        line-height:1.08;
    }
    .hero{
        padding:28px 0 24px;
    }
    .hero-copy{
        padding:18px 0 6px;
    }
    .hero h1{
        max-width:none;
        font-size:clamp(2.25rem, 10vw, 3.2rem);
    }
    .hero-desc{
        font-size:.98rem;
    }
    .hero-actions,
    .cta-actions{
        flex-direction:column;
    }
    .btn{
        width:100%;
    }
    .visual-stack{
        grid-template-columns:1fr;
    }
    .mini-card{
        grid-template-columns:76px 1fr;
    }
    .mini-card img{
        width:76px;
        height:86px;
    }
    .visual-overlay{
        left:12px;
        right:12px;
        bottom:12px;
        padding:14px;
    }
    .visual-overlay h2{
        font-size:1.16rem;
    }
    .post-row{
        padding:12px;
    }
    .feature-body,
    .aside-card,
    .info-card,
    .empty-state,
    .feedback-form{
        padding:16px;
    }
    .cta-panel{
        padding:16px;
        border-radius:24px;
    }
    .feedback-actions{
        flex-direction:column;
        align-items:stretch;
    }
    .feedback-actions .btn{
        width:100%;
    }
}

/* roulang page: article */
:root{
            --bg:#f5efe9;
            --bg-soft:#fbf7f2;
            --panel:#fffaf6;
            --panel-strong:#ffffff;
            --text:#23181a;
            --muted:#6e5c60;
            --faint:#a28e92;
            --line:rgba(108,67,75,.16);
            --line-strong:rgba(108,67,75,.28);
            --brand:#7b2033;
            --brand-2:#9c3047;
            --brand-deep:#51121f;
            --gold:#b8863b;
            --gold-soft:#e0bf82;
            --shadow:0 16px 40px rgba(72, 27, 37, .09);
            --shadow-strong:0 22px 50px rgba(72, 27, 37, .15);
            --radius-sm:12px;
            --radius-md:18px;
            --radius-lg:24px;
            --radius-xl:30px;
            --container:1180px;
            --header-h:82px;
            --transition:.22s cubic-bezier(.2,.7,.2,1);
        }
        html{
            scroll-behavior:smooth;
            scroll-padding-top:96px;
        }
        body{
            margin:0;
            min-height:100vh;
            color:var(--text);
            font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
            line-height:1.7;
            background:
                radial-gradient(1000px 500px at 8% -8%, rgba(123,32,51,.12), transparent 60%),
                radial-gradient(900px 420px at 95% 4%, rgba(184,134,59,.12), transparent 58%),
                linear-gradient(180deg, #fbf7f2 0%, #f4ece6 100%);
            text-rendering:optimizeLegibility;
            -webkit-font-smoothing:antialiased;
        }
        body::selection{
            background:rgba(123,32,51,.18);
            color:var(--brand-deep);
        }
        a{
            color:inherit;
            text-decoration:none;
            transition:color var(--transition),opacity var(--transition),transform var(--transition),background var(--transition),border-color var(--transition),box-shadow var(--transition);
        }
        img{
            display:block;
            max-width:100%;
        }
        button,
        input,
        textarea,
        select{
            font:inherit;
        }
        button{
            border:0;
            background:none;
            padding:0;
        }
        .container{
            width:min(var(--container), calc(100% - 32px));
            margin:0 auto;
        }
        .site-header{
            position:sticky;
            top:0;
            z-index:50;
            background:rgba(28, 16, 20, .94);
            border-bottom:1px solid rgba(255,255,255,.06);
            box-shadow:0 10px 30px rgba(19, 8, 11, .16);
            backdrop-filter:saturate(120%);
        }
        .header-inner{
            min-height:var(--header-h);
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:20px;
        }
        .brand{
            display:inline-flex;
            align-items:center;
            gap:12px;
            color:#fff;
            font-weight:800;
            letter-spacing:.02em;
            flex:0 0 auto;
        }
        .brand:hover{
            color:#fff;
            transform:translateY(-1px);
        }
        .brand-mark{
            width:38px;
            height:38px;
            border-radius:13px;
            display:grid;
            place-items:center;
            color:#fff;
            background:linear-gradient(145deg, var(--brand), var(--brand-2));
            box-shadow:inset 0 0 0 1px rgba(255,255,255,.08), 0 10px 24px rgba(123,32,51,.26);
            font-size:.95rem;
            line-height:1;
        }
        .brand-text{
            font-size:1.02rem;
            line-height:1.1;
            white-space:nowrap;
        }
        .site-nav{
            display:flex;
            align-items:center;
            gap:10px;
        }
        .site-nav a{
            position:relative;
            color:rgba(255,255,255,.86);
            padding:11px 14px;
            border-radius:999px;
            font-weight:600;
            line-height:1;
            letter-spacing:.01em;
        }
        .site-nav a::after{
            content:"";
            position:absolute;
            left:14px;
            right:14px;
            bottom:7px;
            height:2px;
            border-radius:999px;
            background:linear-gradient(90deg, transparent, rgba(224,191,130,.9), transparent);
            transform:scaleX(0);
            transform-origin:center;
            transition:transform var(--transition);
        }
        .site-nav a:hover{
            color:#fff;
            background:rgba(255,255,255,.05);
        }
        .site-nav a:hover::after,
        .site-nav a.active::after{
            transform:scaleX(1);
        }
        .site-nav a.active{
            color:#fff;
            background:rgba(184,134,59,.16);
        }
        .nav-toggle{
            display:none;
            align-items:center;
            gap:10px;
            color:#fff;
            border:1px solid rgba(255,255,255,.14);
            border-radius:999px;
            padding:10px 14px;
            background:rgba(255,255,255,.05);
            transition:transform var(--transition), background var(--transition), border-color var(--transition), opacity var(--transition);
        }
        .nav-toggle:hover{
            transform:translateY(-1px);
            background:rgba(255,255,255,.09);
            border-color:rgba(224,191,130,.28);
        }
        .nav-toggle:active{
            transform:translateY(1px);
        }
        .nav-toggle:focus-visible,
        .site-nav a:focus-visible,
        .brand:focus-visible,
        .btn:focus-visible,
        .text-link:focus-visible,
        .footer-links a:focus-visible,
        .faq summary:focus-visible,
        .form-control:focus-visible,
        .form-button:focus-visible{
            outline:2px solid rgba(224,191,130,.9);
            outline-offset:3px;
        }
        .nav-toggle-lines{
            display:grid;
            gap:4px;
            width:18px;
        }
        .nav-toggle-lines i{
            display:block;
            height:2px;
            border-radius:999px;
            background:#fff;
            opacity:.92;
        }
        .nav-toggle span:last-child{
            font-size:.94rem;
            font-weight:700;
        }
        main{
            position:relative;
        }
        .section{
            padding:72px 0;
        }
        .section.tight{
            padding:54px 0;
        }
        .section.alt{
            background:
                linear-gradient(180deg, rgba(255,255,255,.52), rgba(255,255,255,.82)),
                linear-gradient(180deg, rgba(123,32,51,.03), rgba(123,32,51,0));
            border-top:1px solid rgba(123,32,51,.07);
            border-bottom:1px solid rgba(123,32,51,.05);
        }
        .section-head{
            display:flex;
            align-items:flex-end;
            justify-content:space-between;
            gap:18px;
            margin-bottom:24px;
        }
        .section-label{
            display:inline-flex;
            align-items:center;
            gap:8px;
            color:var(--brand);
            font-weight:800;
            letter-spacing:.08em;
            font-size:.78rem;
            text-transform:uppercase;
        }
        .section-label::before{
            content:"";
            width:22px;
            height:2px;
            border-radius:999px;
            background:linear-gradient(90deg, var(--brand), var(--gold));
        }
        .section-head h2{
            margin:8px 0 0;
            font-size:clamp(1.45rem, 1rem + 1.6vw, 2.15rem);
            line-height:1.16;
            letter-spacing:-.02em;
        }
        .section-head p{
            margin:8px 0 0;
            color:var(--muted);
            max-width:64ch;
        }
        .section-head .text-link{
            margin-bottom:4px;
            flex:0 0 auto;
        }
        .text-link{
            display:inline-flex;
            align-items:center;
            gap:8px;
            color:var(--brand);
            font-weight:700;
        }
        .text-link:hover{
            color:var(--brand-deep);
            transform:translateX(2px);
        }
        .text-link .arrow{
            width:18px;
            height:18px;
            border-radius:50%;
            display:inline-grid;
            place-items:center;
            border:1px solid rgba(123,32,51,.18);
            background:rgba(123,32,51,.06);
            font-size:.8rem;
        }
        .btn{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:10px;
            min-height:48px;
            padding:0 18px;
            border-radius:999px;
            font-weight:700;
            letter-spacing:.01em;
            border:1px solid transparent;
            cursor:pointer;
            transition:transform var(--transition), background var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition), opacity var(--transition);
            user-select:none;
            white-space:nowrap;
        }
        .btn:hover{
            transform:translateY(-1px);
            box-shadow:0 14px 28px rgba(72,27,37,.12);
        }
        .btn:active{
            transform:translateY(1px) scale(.99);
        }
        .btn-primary{
            color:#fff;
            background:linear-gradient(145deg, var(--brand), var(--brand-2));
            box-shadow:inset 0 0 0 1px rgba(255,255,255,.06), 0 14px 26px rgba(123,32,51,.18);
        }
        .btn-primary:hover{
            color:#fff;
            background:linear-gradient(145deg, var(--brand-deep), var(--brand));
        }
        .btn-outline{
            color:var(--gold);
            border-color:rgba(184,134,59,.42);
            background:rgba(255,248,238,.58);
        }
        .btn-outline:hover{
            color:var(--brand);
            border-color:rgba(123,32,51,.26);
            background:rgba(123,32,51,.06);
        }
        .btn-ghost{
            color:var(--brand);
            border-color:var(--line);
            background:rgba(255,255,255,.58);
        }
        .btn-ghost:hover{
            background:rgba(123,32,51,.06);
            border-color:rgba(123,32,51,.22);
        }
        .btn-block{
            width:100%;
        }
        .badge{
            display:inline-flex;
            align-items:center;
            gap:6px;
            padding:7px 12px;
            border-radius:999px;
            border:1px solid rgba(123,32,51,.12);
            background:rgba(123,32,51,.06);
            color:var(--brand);
            font-size:.86rem;
            font-weight:700;
        }
        .badge.gold{
            color:#8e6422;
            border-color:rgba(184,134,59,.18);
            background:rgba(184,134,59,.1);
        }
        .badge.dark{
            color:#f7ede3;
            border-color:rgba(255,255,255,.08);
            background:rgba(255,255,255,.08);
        }
        .muted{
            color:var(--muted);
        }
        .panel{
            background:var(--panel-strong);
            border:1px solid var(--line);
            border-radius:var(--radius-lg);
            box-shadow:var(--shadow);
        }
        .panel-soft{
            background:rgba(255,251,247,.7);
            border:1px solid rgba(108,67,75,.12);
            border-radius:var(--radius-lg);
        }
        .hero{
            position:relative;
            padding:36px 0 28px;
            color:#fff;
            background:
                linear-gradient(180deg, rgba(25,10,14,.78), rgba(25,10,14,.72)),
                url('/assets/images/backpic/back-1.webp') center/cover no-repeat;
            border-bottom:1px solid rgba(255,255,255,.08);
            overflow:hidden;
        }
        .hero::before{
            content:"";
            position:absolute;
            inset:0;
            background:
                linear-gradient(135deg, rgba(123,32,51,.18), rgba(0,0,0,0) 40%),
                radial-gradient(900px 380px at 86% 18%, rgba(184,134,59,.22), transparent 55%);
            pointer-events:none;
        }
        .hero-grid{
            position:relative;
            z-index:1;
            display:grid;
            grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr);
            gap:28px;
            align-items:stretch;
        }
        .hero-copy{
            padding:34px 0 26px;
            display:flex;
            flex-direction:column;
            justify-content:center;
        }
        .eyebrow{
            display:inline-flex;
            align-items:center;
            gap:10px;
            width:fit-content;
            color:rgba(255,255,255,.9);
            font-size:.93rem;
            font-weight:700;
            letter-spacing:.08em;
            text-transform:uppercase;
        }
        .eyebrow::before{
            content:"";
            width:26px;
            height:2px;
            border-radius:999px;
            background:linear-gradient(90deg, rgba(224,191,130,.95), rgba(255,255,255,.2));
        }
        .hero h1{
            margin:14px 0 16px;
            font-size:clamp(2rem, 1.3rem + 3.2vw, 4.35rem);
            line-height:1.02;
            letter-spacing:-.04em;
            max-width:12ch;
        }
        .hero-summary{
            margin:0;
            max-width:60ch;
            font-size:1.02rem;
            color:rgba(255,255,255,.84);
        }
        .hero-meta{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
            margin-top:22px;
        }
        .meta-chip{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:8px 12px;
            border-radius:999px;
            border:1px solid rgba(255,255,255,.14);
            background:rgba(255,255,255,.08);
            color:rgba(255,255,255,.9);
            font-size:.9rem;
            font-weight:600;
        }
        .hero-actions{
            display:flex;
            flex-wrap:wrap;
            gap:12px;
            margin-top:26px;
        }
        .hero-visual{
            position:relative;
            padding:18px;
            min-height:420px;
            display:flex;
            align-items:stretch;
        }
        .visual-card{
            position:relative;
            width:100%;
            border-radius:var(--radius-xl);
            overflow:hidden;
            border:1px solid rgba(255,255,255,.12);
            box-shadow:0 24px 48px rgba(18, 8, 12, .26);
            background:rgba(255,255,255,.06);
        }
        .visual-card img{
            width:100%;
            height:100%;
            object-fit:cover;
            min-height:420px;
            filter:saturate(1.05) contrast(1.05);
        }
        .visual-overlay{
            position:absolute;
            inset:0;
            background:
                linear-gradient(180deg, rgba(8, 4, 7, .08), rgba(8, 4, 7, .68)),
                radial-gradient(480px 220px at 20% 18%, rgba(123,32,51,.22), transparent 56%);
            display:flex;
            flex-direction:column;
            justify-content:flex-end;
            padding:24px;
        }
        .visual-note{
            display:grid;
            gap:10px;
            max-width:280px;
        }
        .visual-note strong{
            font-size:1.15rem;
            line-height:1.22;
        }
        .visual-note span{
            color:rgba(255,255,255,.84);
            font-size:.94rem;
        }
        .hero-strip{
            position:relative;
            z-index:1;
            margin-top:26px;
            display:grid;
            grid-template-columns:repeat(3, minmax(0,1fr));
            gap:12px;
        }
        .strip-item{
            padding:14px 16px;
            border-radius:var(--radius-md);
            background:rgba(255,255,255,.09);
            border:1px solid rgba(255,255,255,.1);
            color:#fff;
            display:flex;
            flex-direction:column;
            gap:4px;
            min-height:76px;
        }
        .strip-item b{
            font-size:1rem;
        }
        .strip-item span{
            color:rgba(255,255,255,.76);
            font-size:.9rem;
        }
        .article-wrap{
            margin-top:-10px;
        }
        .crumb{
            display:flex;
            flex-wrap:wrap;
            align-items:center;
            gap:8px;
            margin-bottom:18px;
            color:var(--muted);
            font-size:.92rem;
        }
        .crumb a{
            color:var(--brand);
            font-weight:700;
        }
        .crumb span.sep{
            color:var(--faint);
        }
        .top-info{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
            margin-bottom:18px;
        }
        .top-info .meta-chip{
            color:var(--brand-deep);
            background:rgba(255,248,240,.92);
            border-color:rgba(123,32,51,.12);
        }
        .layout{
            display:grid;
            grid-template-columns:minmax(0,1.58fr) minmax(320px,.84fr);
            gap:24px;
            align-items:start;
        }
        .article-card,
        .sidebar-card,
        .feature-card,
        .related-card,
        .cta-card,
        .info-card{
            background:var(--panel-strong);
            border:1px solid var(--line);
            border-radius:var(--radius-lg);
            box-shadow:var(--shadow);
        }
        .article-card{
            overflow:hidden;
        }
        .article-head{
            padding:24px 24px 16px;
            border-bottom:1px solid rgba(108,67,75,.1);
            background:
                linear-gradient(180deg, rgba(123,32,51,.03), rgba(255,255,255,.02));
        }
        .article-head h1{
            margin:0 0 14px;
            font-size:clamp(1.78rem, 1.05rem + 2vw, 3rem);
            line-height:1.12;
            letter-spacing:-.03em;
        }
        .article-summary{
            margin:0;
            color:var(--muted);
            max-width:72ch;
        }
        .article-metas{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
            margin-top:18px;
        }
        .article-metas .meta-chip{
            color:var(--muted);
            background:rgba(123,32,51,.04);
            border-color:rgba(123,32,51,.11);
        }
        .article-body{
            padding:24px;
            font-size:1.03rem;
            line-height:1.92;
            color:var(--text);
        }
        .article-body > :first-child{
            margin-top:0;
        }
        .article-body > :last-child{
            margin-bottom:0;
        }
        .article-body h2,
        .article-body h3,
        .article-body h4{
            margin:1.8em 0 .8em;
            line-height:1.22;
            letter-spacing:-.02em;
            color:var(--brand-deep);
        }
        .article-body h2{
            font-size:1.48rem;
        }
        .article-body h3{
            font-size:1.18rem;
        }
        .article-body p{
            margin:0 0 1.1em;
            color:var(--text);
        }
        .article-body a{
            color:var(--brand);
            text-decoration:underline;
            text-underline-offset:3px;
        }
        .article-body a:hover{
            color:var(--brand-deep);
        }
        .article-body ul,
        .article-body ol{
            margin:0 0 1.1em 1.2em;
            padding:0;
        }
        .article-body li{
            margin:.45em 0;
        }
        .article-body blockquote{
            margin:1.35em 0;
            padding:18px 18px 18px 20px;
            border-left:4px solid var(--gold);
            background:linear-gradient(180deg, rgba(184,134,59,.08), rgba(123,32,51,.04));
            border-radius:0 var(--radius-md) var(--radius-md) 0;
            color:#4f3a3f;
        }
        .article-body hr{
            border:0;
            height:1px;
            margin:1.6em 0;
            background:linear-gradient(90deg, transparent, rgba(108,67,75,.22), transparent);
        }
        .article-body figure{
            margin:1.35em 0;
        }
        .article-body figcaption{
            margin-top:8px;
            color:var(--faint);
            font-size:.92rem;
        }
        .article-body img{
            border-radius:var(--radius-md);
            border:1px solid rgba(108,67,75,.12);
            box-shadow:0 12px 24px rgba(72,27,37,.08);
        }
        .article-body table{
            width:100%;
            border-collapse:collapse;
            margin:1.25em 0;
            background:var(--panel);
            border:1px solid rgba(108,67,75,.12);
            border-radius:var(--radius-md);
            overflow:hidden;
            display:block;
        }
        .article-body thead,
        .article-body tbody,
        .article-body tr{
            display:table;
            width:100%;
            table-layout:fixed;
        }
        .article-body th,
        .article-body td{
            padding:12px 14px;
            border-bottom:1px solid rgba(108,67,75,.1);
            text-align:left;
            vertical-align:top;
        }
        .article-body th{
            background:rgba(123,32,51,.05);
            color:var(--brand-deep);
        }
        .article-body td{
            color:var(--text);
        }
        .empty-state{
            padding:34px 18px;
            text-align:center;
            display:grid;
            gap:14px;
            justify-items:center;
        }
        .empty-state strong{
            font-size:1.22rem;
            color:var(--brand-deep);
        }
        .empty-state p{
            margin:0;
            color:var(--muted);
        }
        .side-stack{
            display:grid;
            gap:18px;
        }
        .sidebar-card{
            padding:20px;
        }
        .sidebar-title{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:16px;
            margin-bottom:14px;
        }
        .sidebar-title h3,
        .sidebar-title h4{
            margin:0;
            font-size:1.06rem;
            color:var(--brand-deep);
        }
        .sidebar-title .small{
            color:var(--faint);
            font-size:.88rem;
        }
        .info-list{
            display:grid;
            gap:12px;
        }
        .info-item{
            display:grid;
            grid-template-columns:auto 1fr;
            gap:12px;
            align-items:flex-start;
            padding:13px 14px;
            border-radius:var(--radius-md);
            background:rgba(123,32,51,.04);
            border:1px solid rgba(123,32,51,.08);
        }
        .info-icon{
            width:34px;
            height:34px;
            border-radius:12px;
            display:grid;
            place-items:center;
            color:var(--brand);
            background:rgba(123,32,51,.08);
            flex:0 0 auto;
            font-size:1rem;
        }
        .info-item strong{
            display:block;
            margin-bottom:2px;
            color:var(--brand-deep);
        }
        .info-item span{
            display:block;
            color:var(--muted);
            font-size:.94rem;
        }
        .cover-spot{
            position:relative;
            overflow:hidden;
            min-height:220px;
            padding:0;
        }
        .cover-spot img{
            width:100%;
            height:100%;
            min-height:220px;
            object-fit:cover;
        }
        .cover-spot::after{
            content:"";
            position:absolute;
            inset:0;
            background:
                linear-gradient(180deg, rgba(15, 9, 11, .08), rgba(15, 9, 11, .58)),
                radial-gradient(320px 180px at 15% 20%, rgba(123,32,51,.2), transparent 55%);
        }
        .cover-spot-note{
            position:absolute;
            left:0;
            right:0;
            bottom:0;
            z-index:1;
            padding:18px;
            color:#fff;
        }
        .cover-spot-note strong{
            display:block;
            font-size:1.08rem;
            margin-bottom:6px;
        }
        .cover-spot-note span{
            color:rgba(255,255,255,.84);
            font-size:.94rem;
        }
        .tags{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
        }
        .tag-pill{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            padding:8px 12px;
            border-radius:999px;
            border:1px solid rgba(123,32,51,.12);
            background:rgba(255,250,246,.92);
            color:var(--brand);
            font-size:.92rem;
            font-weight:700;
        }
        .tag-pill:hover{
            color:#fff;
            background:linear-gradient(145deg, var(--brand), var(--brand-2));
            border-color:transparent;
            transform:translateY(-1px);
        }
        .form-wrap{
            display:grid;
            gap:12px;
        }
        .field{
            display:grid;
            gap:8px;
        }
        .field label{
            color:var(--brand-deep);
            font-weight:700;
            font-size:.93rem;
        }
        .form-control{
            width:100%;
            min-height:46px;
            padding:12px 14px;
            border-radius:14px;
            border:1px solid rgba(108,67,75,.16);
            background:#fffdfb;
            color:var(--text);
            box-shadow:none;
            transition:border-color var(--transition), box-shadow var(--transition), background var(--transition), transform var(--transition);
        }
        .form-control:focus{
            border-color:rgba(123,32,51,.54);
            background:#fff;
            box-shadow:0 0 0 4px rgba(123,32,51,.08);
            outline:none;
        }
        textarea.form-control{
            min-height:118px;
            resize:vertical;
        }
        .form-help{
            color:var(--faint);
            font-size:.88rem;
            margin-top:-2px;
        }
        .features-grid{
            display:grid;
            grid-template-columns:1.1fr .9fr;
            gap:18px;
        }
        .feature-card{
            overflow:hidden;
        }
        .feature-main{
            padding:24px;
            display:grid;
            gap:14px;
            min-height:100%;
        }
        .feature-main p{
            margin:0;
            color:var(--muted);
        }
        .feature-head{
            display:flex;
            align-items:flex-start;
            justify-content:space-between;
            gap:14px;
        }
        .feature-head h3{
            margin:0;
            font-size:1.24rem;
            line-height:1.2;
            color:var(--brand-deep);
        }
        .feature-index{
            color:rgba(123,32,51,.18);
            font-weight:900;
            font-size:2.2rem;
            line-height:1;
            letter-spacing:-.05em;
        }
        .feature-list{
            display:grid;
            gap:12px;
        }
        .feature-row{
            display:grid;
            grid-template-columns:auto 1fr;
            gap:12px;
            align-items:flex-start;
            padding:14px;
            border-radius:var(--radius-md);
            border:1px solid rgba(108,67,75,.1);
            background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(123,32,51,.03));
        }
        .feature-row strong{
            display:block;
            color:var(--brand-deep);
            margin-bottom:2px;
        }
        .feature-row span{
            color:var(--muted);
            font-size:.94rem;
        }
        .feature-row i{
            width:34px;
            height:34px;
            border-radius:12px;
            display:grid;
            place-items:center;
            background:rgba(184,134,59,.1);
            color:#9a6b22;
            font-style:normal;
            font-weight:800;
        }
        .related-grid{
            display:grid;
            grid-template-columns:repeat(3, minmax(0, 1fr));
            gap:18px;
        }
        .related-card{
            overflow:hidden;
            display:flex;
            flex-direction:column;
            min-height:100%;
        }
        .related-card .thumb{
            position:relative;
            aspect-ratio:16/10;
            overflow:hidden;
        }
        .related-card .thumb img{
            width:100%;
            height:100%;
            object-fit:cover;
            transition:transform var(--transition), filter var(--transition);
        }
        .related-card:hover .thumb img{
            transform:scale(1.03);
            filter:saturate(1.08);
        }
        .related-card .thumb::after{
            content:"";
            position:absolute;
            inset:0;
            background:linear-gradient(180deg, rgba(8,4,7,0), rgba(8,4,7,.18));
        }
        .related-card .content{
            padding:18px 18px 20px;
            display:grid;
            gap:10px;
        }
        .related-card h3{
            margin:0;
            font-size:1.02rem;
            line-height:1.36;
            color:var(--brand-deep);
        }
        .related-card p{
            margin:0;
            color:var(--muted);
            font-size:.94rem;
        }
        .meta-line{
            display:flex;
            flex-wrap:wrap;
            gap:8px;
            color:var(--faint);
            font-size:.88rem;
        }
        .faq-grid{
            display:grid;
            grid-template-columns:1fr;
            gap:12px;
        }
        .faq{
            border:1px solid rgba(108,67,75,.12);
            border-radius:var(--radius-md);
            background:rgba(255,251,247,.94);
            overflow:hidden;
            box-shadow:0 10px 24px rgba(72,27,37,.06);
        }
        .faq summary{
            list-style:none;
            cursor:pointer;
            padding:18px 20px;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:16px;
            font-weight:700;
            color:var(--brand-deep);
        }
        .faq summary::-webkit-details-marker{
            display:none;
        }
        .faq summary::after{
            content:"+";
            width:28px;
            height:28px;
            border-radius:50%;
            display:grid;
            place-items:center;
            border:1px solid rgba(123,32,51,.16);
            color:var(--brand);
            background:rgba(123,32,51,.05);
            flex:0 0 auto;
            transition:transform var(--transition), background var(--transition);
        }
        .faq[open] summary{
            background:rgba(123,32,51,.04);
        }
        .faq[open] summary::after{
            content:"–";
            transform:rotate(0deg);
            background:rgba(123,32,51,.09);
        }
        .faq .answer{
            padding:0 20px 18px;
            color:var(--muted);
        }
        .cta-card{
            position:relative;
            overflow:hidden;
            background:
                linear-gradient(135deg, rgba(28,12,16,.96), rgba(72,18,31,.94)),
                url('/assets/images/backpic/back-2.webp') center/cover no-repeat;
            color:#fff;
        }
        .cta-card::before{
            content:"";
            position:absolute;
            inset:0;
            background:
                radial-gradient(500px 180px at 80% 20%, rgba(224,191,130,.24), transparent 55%),
                linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,.18));
            pointer-events:none;
        }
        .cta-inner{
            position:relative;
            z-index:1;
            padding:30px 24px;
            display:grid;
            grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr);
            gap:22px;
            align-items:center;
        }
        .cta-inner h2{
            margin:0 0 12px;
            font-size:clamp(1.5rem, 1.05rem + 1.7vw, 2.3rem);
            line-height:1.16;
            letter-spacing:-.03em;
        }
        .cta-inner p{
            margin:0;
            color:rgba(255,255,255,.84);
            max-width:58ch;
        }
        .cta-actions{
            display:flex;
            flex-wrap:wrap;
            justify-content:flex-end;
            gap:12px;
        }
        .cta-actions .btn{
            min-width:160px;
        }
        .site-footer{
            padding:38px 0 30px;
            background:#1b1014;
            color:rgba(255,255,255,.84);
            border-top:1px solid rgba(255,255,255,.08);
        }
        .footer-grid{
            display:grid;
            grid-template-columns:1.2fr .9fr 1fr;
            gap:24px;
            align-items:start;
        }
        .footer-brand{
            margin-bottom:10px;
        }
        .site-footer p{
            margin:0;
            color:rgba(255,255,255,.72);
        }
        .footer-links{
            display:flex;
            flex-wrap:wrap;
            gap:10px 14px;
            align-content:flex-start;
        }
        .footer-links a{
            color:rgba(255,255,255,.78);
            padding:8px 0;
            position:relative;
        }
        .footer-links a::after{
            content:"";
            position:absolute;
            left:0;
            right:0;
            bottom:4px;
            height:1px;
            background:linear-gradient(90deg, transparent, rgba(224,191,130,.9), transparent);
            transform:scaleX(0);
            transform-origin:center;
            transition:transform var(--transition);
        }
        .footer-links a:hover{
            color:#fff;
        }
        .footer-links a:hover::after{
            transform:scaleX(1);
        }
        .footer-note{
            display:grid;
            gap:8px;
            justify-items:start;
        }
        .footer-note p{
            color:rgba(255,255,255,.66);
            font-size:.95rem;
        }
        .divider{
            height:1px;
            background:linear-gradient(90deg, transparent, rgba(108,67,75,.18), transparent);
            margin:0;
            border:0;
        }
        .spotlight{
            display:grid;
            gap:10px;
            padding:20px;
        }
        .spotlight h3{
            margin:0;
            font-size:1.12rem;
            color:var(--brand-deep);
        }
        .spotlight p{
            margin:0;
            color:var(--muted);
        }
        .spotlight .btn{
            width:fit-content;
        }
        .breadcrumb-card{
            padding:16px 20px;
            display:flex;
            flex-wrap:wrap;
            align-items:center;
            gap:12px;
            justify-content:space-between;
        }
        .breadcrumb-card .crumb{
            margin:0;
        }
        .breadcrumb-card .small{
            color:var(--faint);
            font-size:.9rem;
        }
        @media (max-width: 1024px){
            .hero-grid,
            .layout,
            .cta-inner,
            .features-grid,
            .footer-grid{
                grid-template-columns:1fr;
            }
            .hero-visual{
                min-height:auto;
                padding:0;
            }
            .visual-card img{
                min-height:340px;
            }
            .hero h1{
                max-width:16ch;
            }
            .related-grid{
                grid-template-columns:repeat(2, minmax(0, 1fr));
            }
            .cta-actions{
                justify-content:flex-start;
            }
        }
        @media (max-width: 768px){
            :root{
                --header-h:76px;
            }
            .section{
                padding:58px 0;
            }
            .section-head{
                flex-direction:column;
                align-items:flex-start;
            }
            .hero{
                padding-top:28px;
            }
            .hero-grid{
                gap:18px;
            }
            .hero h1{
                max-width:100%;
            }
            .hero-strip{
                grid-template-columns:1fr;
            }
            .article-head,
            .article-body,
            .sidebar-card,
            .feature-main,
            .related-card .content,
            .breadcrumb-card{
                padding-left:18px;
                padding-right:18px;
            }
            .related-grid{
                grid-template-columns:1fr;
            }
            .nav-toggle{
                display:inline-flex;
            }
            .site-nav{
                position:absolute;
                left:16px;
                right:16px;
                top:calc(var(--header-h) - 6px);
                display:none;
                flex-direction:column;
                align-items:stretch;
                gap:6px;
                padding:12px;
                border-radius:20px;
                background:rgba(28,16,20,.98);
                border:1px solid rgba(255,255,255,.08);
                box-shadow:0 20px 46px rgba(19,8,11,.28);
            }
            .site-nav.is-open{
                display:flex;
            }
            .site-nav a{
                width:100%;
                padding:13px 14px;
            }
            .site-nav a::after{
                left:14px;
                right:14px;
                bottom:8px;
            }
            .footer-grid{
                gap:18px;
            }
        }
        @media (max-width: 520px){
            .container{
                width:min(var(--container), calc(100% - 20px));
            }
            .brand-text{
                font-size:.98rem;
            }
            .brand-mark{
                width:36px;
                height:36px;
                border-radius:12px;
            }
            .site-header{
                border-bottom-color:rgba(255,255,255,.07);
            }
            .hero-copy{
                padding:18px 0 14px;
            }
            .hero h1{
                font-size:2.05rem;
            }
            .hero-summary{
                font-size:.98rem;
            }
            .hero-actions,
            .cta-actions{
                flex-direction:column;
            }
            .hero-actions .btn,
            .cta-actions .btn,
            .btn-block{
                width:100%;
            }
            .article-metas,
            .hero-meta{
                gap:8px;
            }
            .meta-chip{
                width:100%;
                justify-content:center;
            }
            .breadcrumb-card{
                align-items:flex-start;
            }
            .breadcrumb-card .small{
                width:100%;
            }
            .sidebar-card{
                padding:18px;
            }
            .faq summary{
                padding:16px 16px;
            }
            .faq .answer{
                padding:0 16px 16px;
            }
        }

/* 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}