/* roulang page: index */
:root{
            --bg:#f6f1eb;
            --bg-soft:#fbf8f4;
            --card:#fffdfb;
            --card-2:#f4ebe2;
            --line:#e4d7cb;
            --line-2:#d5c3b6;
            --text:#22171a;
            --muted:#6e5b5f;
            --muted-2:#8b767b;
            --primary:#5b1d22;
            --primary-2:#7d2a2f;
            --primary-3:#a03f37;
            --accent:#c48a43;
            --accent-2:#e9c78b;
            --shadow:0 18px 40px rgba(65, 27, 31, .10);
            --shadow-2:0 10px 24px rgba(65, 27, 31, .08);
            --radius:20px;
            --radius-sm:14px;
            --radius-xs:10px;
            --container:1200px;
            --gap:24px;
            --gap-lg:34px;
            --gap-xl:48px;
            --ease:cubic-bezier(.2,.7,.2,1);
        }
        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{
            margin:0;
            font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",Segoe UI,Roboto,Helvetica,Arial,sans-serif;
            color:var(--text);
            background:
                radial-gradient(circle at top left, rgba(91,29,34,.08), transparent 30%),
                radial-gradient(circle at top right, rgba(196,138,67,.08), transparent 24%),
                linear-gradient(180deg, #fcfaf7 0%, var(--bg) 100%);
            line-height:1.72;
            text-rendering:optimizeLegibility;
            -webkit-font-smoothing:antialiased;
            overflow-x:hidden;
        }
        img{max-width:100%;display:block}
        a{color:inherit;text-decoration:none}
        button,input,textarea,select{font:inherit}
        button{cursor:pointer}
        ::selection{background:rgba(91,29,34,.16);color:var(--primary)}
        .container{
            width:min(var(--container), calc(100% - 32px));
            margin:0 auto;
        }
        .skip-link{
            position:absolute;
            left:-999px;
            top:auto;
            width:1px;height:1px;
            overflow:hidden;
        }
        .skip-link:focus{
            left:16px;
            top:16px;
            width:auto;height:auto;
            padding:10px 14px;
            background:var(--primary);
            color:#fff;
            border-radius:999px;
            z-index:9999;
        }
        .site-header{
            position:sticky;
            top:0;
            z-index:1000;
            backdrop-filter:saturate(180%) blur(14px);
            background:rgba(250,247,243,.84);
            border-bottom:1px solid rgba(228,215,203,.85);
        }
        .header-inner{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:18px;
            min-height:76px;
        }
        .brand{
            display:inline-flex;
            align-items:center;
            gap:12px;
            flex:0 0 auto;
            min-width:0;
        }
        .brand-mark{
            width:42px;height:42px;
            border-radius:14px;
            background:
                linear-gradient(135deg, rgba(91,29,34,1), rgba(125,42,47,1) 58%, rgba(196,138,67,1));
            box-shadow:0 12px 28px rgba(91,29,34,.22);
            position:relative;
            overflow:hidden;
        }
        .brand-mark::before,
        .brand-mark::after{
            content:"";
            position:absolute;
            inset:auto;
            background:rgba(255,255,255,.16);
            border-radius:999px;
        }
        .brand-mark::before{width:14px;height:14px;left:9px;top:9px}
        .brand-mark::after{width:24px;height:24px;right:6px;bottom:6px}
        .brand-text{
            display:flex;
            flex-direction:column;
            gap:2px;
            min-width:0;
        }
        .brand-text strong{
            font-size:16px;
            line-height:1.15;
            letter-spacing:.04em;
            color:var(--primary);
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;
        }
        .brand-text span{
            font-size:12px;
            color:var(--muted);
        }
        .site-nav{
            display:flex;
            align-items:center;
            gap:12px;
            flex:1 1 auto;
            justify-content:flex-end;
        }
        .nav-links{
            display:flex;
            align-items:center;
            gap:8px;
            padding:6px;
            border:1px solid rgba(228,215,203,.95);
            background:rgba(255,255,255,.72);
            border-radius:999px;
            box-shadow:0 8px 24px rgba(65, 27, 31, .04);
        }
        .nav-links a{
            position:relative;
            display:inline-flex;
            align-items:center;
            justify-content:center;
            padding:10px 16px;
            border-radius:999px;
            color:var(--muted);
            font-size:14px;
            font-weight:600;
            transition:transform .22s var(--ease), background .22s var(--ease), color .22s var(--ease), box-shadow .22s var(--ease);
        }
        .nav-links a:hover,
        .nav-links a:focus-visible{
            outline:none;
            color:var(--primary);
            background:rgba(91,29,34,.08);
            transform:translateY(-1px);
        }
        .nav-links a.active{
            color:#fff;
            background:linear-gradient(135deg, var(--primary), var(--primary-3));
            box-shadow:0 10px 22px rgba(91,29,34,.20);
        }
        .nav-actions{
            display:flex;
            align-items:center;
            gap:10px;
        }
        .search-box{
            display:flex;
            align-items:center;
            gap:10px;
            padding:8px 10px 8px 14px;
            border-radius:999px;
            background:rgba(255,255,255,.86);
            border:1px solid rgba(228,215,203,.95);
            box-shadow:0 8px 24px rgba(65, 27, 31, .04);
            min-width:min(340px, 38vw);
        }
        .search-box input{
            border:0;
            outline:none;
            background:transparent;
            width:100%;
            color:var(--text);
            min-width:0;
        }
        .search-box input::placeholder{color:var(--muted-2)}
        .search-btn,
        .ghost-btn,
        .primary-btn,
        .outline-btn{
            border:0;
            border-radius:999px;
            transition:transform .22s var(--ease), box-shadow .22s var(--ease), background .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease);
        }
        .search-btn{
            flex:0 0 auto;
            padding:10px 14px;
            background:var(--primary);
            color:#fff;
            font-weight:700;
            letter-spacing:.02em;
            box-shadow:0 10px 22px rgba(91,29,34,.18);
        }
        .search-btn:hover,
        .search-btn:focus-visible{
            outline:none;
            transform:translateY(-1px);
            background:var(--primary-2);
            box-shadow:0 14px 26px rgba(91,29,34,.22);
        }
        .nav-toggle{
            display:none;
            width:44px;
            height:44px;
            border-radius:14px;
            border:1px solid rgba(228,215,203,.95);
            background:#fff;
            color:var(--primary);
            align-items:center;
            justify-content:center;
            box-shadow:0 8px 18px rgba(65,27,31,.06);
        }
        .nav-toggle span,
        .nav-toggle span::before,
        .nav-toggle span::after{
            display:block;
            width:18px;
            height:2px;
            border-radius:999px;
            background:currentColor;
            position:relative;
        }
        .nav-toggle span::before,
        .nav-toggle span::after{
            content:"";
            position:absolute;
            left:0;
        }
        .nav-toggle span::before{top:-6px}
        .nav-toggle span::after{top:6px}
        .hero{
            position:relative;
            padding:34px 0 10px;
        }
        .hero-shell{
            position:relative;
            overflow:hidden;
            border-radius:28px;
            border:1px solid rgba(228,215,203,.9);
            background:
                linear-gradient(135deg, rgba(28,17,20,.55), rgba(70,22,27,.38)),
                url('/assets/images/backpic/back-2.jpg') center/cover no-repeat;
            box-shadow:var(--shadow);
        }
        .hero-shell::before{
            content:"";
            position:absolute;
            inset:0;
            background:
                radial-gradient(circle at 20% 10%, rgba(255,255,255,.18), transparent 18%),
                linear-gradient(180deg, rgba(20,10,12,.12), rgba(20,10,12,.24));
            pointer-events:none;
        }
        .hero-inner{
            position:relative;
            display:grid;
            grid-template-columns:1.14fr .86fr;
            gap:26px;
            padding:38px;
            color:#fff;
            align-items:stretch;
        }
        .eyebrow{
            display:inline-flex;
            align-items:center;
            gap:8px;
            width:fit-content;
            padding:8px 14px;
            border-radius:999px;
            background:rgba(255,255,255,.12);
            border:1px solid rgba(255,255,255,.18);
            color:#fff;
            font-size:13px;
            letter-spacing:.04em;
            backdrop-filter:blur(6px);
        }
        .eyebrow i{
            width:8px;
            height:8px;
            border-radius:999px;
            background:var(--accent-2);
            box-shadow:0 0 0 6px rgba(233,199,139,.12);
            display:inline-block;
        }
        h1{
            margin:16px 0 12px;
            font-size:clamp(34px, 4vw, 56px);
            line-height:1.06;
            letter-spacing:-.03em;
        }
        .hero-copy{
            max-width:54ch;
            color:rgba(255,255,255,.88);
            font-size:16px;
            margin:0;
        }
        .hero-actions{
            display:flex;
            flex-wrap:wrap;
            gap:12px;
            margin-top:24px;
        }
        .primary-btn,
        .outline-btn,
        .ghost-btn{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:8px;
            min-height:46px;
            padding:0 18px;
            font-weight:700;
            font-size:14px;
            letter-spacing:.02em;
        }
        .primary-btn{
            background:linear-gradient(135deg, var(--accent), #d7a55e);
            color:#fff;
            box-shadow:0 14px 30px rgba(196,138,67,.28);
        }
        .primary-btn:hover,
        .primary-btn:focus-visible{
            outline:none;
            transform:translateY(-1px);
            box-shadow:0 18px 34px rgba(196,138,67,.34);
        }
        .outline-btn{
            background:rgba(255,255,255,.08);
            border:1px solid rgba(255,255,255,.18);
            color:#fff;
            backdrop-filter:blur(6px);
        }
        .outline-btn:hover,
        .outline-btn:focus-visible{
            outline:none;
            transform:translateY(-1px);
            background:rgba(255,255,255,.14);
        }
        .ghost-btn{
            background:transparent;
            border:1px solid rgba(228,215,203,.95);
            color:var(--primary);
        }
        .ghost-btn:hover,
        .ghost-btn:focus-visible{
            outline:none;
            transform:translateY(-1px);
            border-color:rgba(91,29,34,.25);
            background:rgba(91,29,34,.05);
        }
        .hero-tags{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
            margin-top:22px;
        }
        .tag{
            display:inline-flex;
            align-items:center;
            gap:6px;
            padding:8px 12px;
            border-radius:999px;
            background:rgba(255,255,255,.10);
            border:1px solid rgba(255,255,255,.16);
            color:#fff;
            font-size:13px;
            white-space:nowrap;
        }
        .tag strong{
            font-weight:700;
            color:#fff;
        }
        .hero-aside{
            display:grid;
            gap:14px;
            align-content:start;
        }
        .hero-visual{
            position:relative;
            min-height:290px;
            border-radius:24px;
            overflow:hidden;
            border:1px solid rgba(255,255,255,.18);
            background:
                linear-gradient(180deg, rgba(18,12,15,.04), rgba(18,12,15,.32)),
                url('/assets/images/backpic/back-3.jpg') center/cover no-repeat;
            box-shadow:0 18px 34px rgba(10, 7, 8, .18);
        }
        .hero-visual::after{
            content:"";
            position:absolute;
            inset:0;
            background:linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.35));
        }
        .hero-visual-copy{
            position:absolute;
            left:18px;
            right:18px;
            bottom:18px;
            z-index:1;
            display:flex;
            flex-direction:column;
            gap:10px;
        }
        .hero-chip{
            width:fit-content;
            padding:8px 12px;
            border-radius:999px;
            background:rgba(255,255,255,.16);
            color:#fff;
            border:1px solid rgba(255,255,255,.18);
            backdrop-filter:blur(6px);
            font-size:13px;
            font-weight:600;
        }
        .hero-visual-copy strong{
            font-size:22px;
            line-height:1.15;
        }
        .hero-visual-copy p{
            margin:0;
            color:rgba(255,255,255,.82);
            font-size:14px;
            max-width:34ch;
        }
        .hero-mini-grid{
            display:grid;
            grid-template-columns:repeat(3,1fr);
            gap:12px;
        }
        .mini-card{
            padding:16px 14px;
            border-radius:20px;
            background:rgba(255,255,255,.88);
            border:1px solid rgba(228,215,203,.9);
            color:var(--text);
            box-shadow:var(--shadow-2);
        }
        .mini-card em{
            display:block;
            font-style:normal;
            color:var(--muted);
            font-size:12px;
            margin-bottom:6px;
        }
        .mini-card strong{
            display:block;
            font-size:15px;
            line-height:1.25;
        }
        .mini-card span{
            display:block;
            margin-top:6px;
            color:var(--muted);
            font-size:12px;
        }
        .meta-row{
            display:flex;
            flex-wrap:wrap;
            gap:12px;
            margin-top:18px;
        }
        .meta-pill{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:10px 14px;
            border-radius:999px;
            background:rgba(255,255,255,.1);
            border:1px solid rgba(255,255,255,.16);
            color:#fff;
            font-size:13px;
        }
        .meta-pill b{
            color:var(--accent-2);
            font-weight:700;
        }
        main{
            padding:28px 0 18px;
        }
        .section{
            margin-top:28px;
        }
        .section-head{
            display:flex;
            align-items:end;
            justify-content:space-between;
            gap:18px;
            margin-bottom:18px;
        }
        .section-title{
            margin:0;
            font-size:clamp(24px, 2.1vw, 34px);
            line-height:1.15;
            letter-spacing:-.02em;
            color:var(--primary);
        }
        .section-desc{
            margin:8px 0 0;
            color:var(--muted);
            max-width:62ch;
            font-size:15px;
        }
        .section-note{
            color:var(--muted);
            font-size:13px;
            white-space:nowrap;
        }
        .entry-grid{
            display:grid;
            grid-template-columns:1.18fr .82fr;
            gap:var(--gap);
        }
        .entry-feature{
            position:relative;
            overflow:hidden;
            border-radius:var(--radius);
            min-height:360px;
            background:
                linear-gradient(180deg, rgba(12,10,10,.10), rgba(12,10,10,.72)),
                url('/assets/images/coverpic/cover-1.webp') center/cover no-repeat;
            border:1px solid rgba(228,215,203,.9);
            box-shadow:var(--shadow-2);
        }
        .entry-feature::before{
            content:"";
            position:absolute;
            inset:0;
            background:linear-gradient(110deg, rgba(91,29,34,.18), transparent 46%);
        }
        .entry-feature-content{
            position:absolute;
            inset:auto 22px 22px 22px;
            z-index:1;
            color:#fff;
            max-width:42ch;
        }
        .entry-feature-content .tag{
            margin-bottom:12px;
            background:rgba(0,0,0,.20);
            border-color:rgba(255,255,255,.12);
        }
        .entry-feature-content h3{
            margin:0 0 8px;
            font-size:28px;
            line-height:1.12;
        }
        .entry-feature-content p{
            margin:0 0 14px;
            color:rgba(255,255,255,.86);
        }
        .entry-cards{
            display:grid;
            grid-template-columns:repeat(2,1fr);
            gap:14px;
        }
        .entry-card{
            padding:18px;
            border-radius:var(--radius);
            background:var(--card);
            border:1px solid rgba(228,215,203,.92);
            box-shadow:var(--shadow-2);
            display:flex;
            flex-direction:column;
            gap:14px;
            min-height:173px;
            position:relative;
            overflow:hidden;
            transition:transform .24s var(--ease), box-shadow .24s var(--ease), border-color .24s var(--ease);
        }
        .entry-card:hover{
            transform:translateY(-3px);
            border-color:rgba(125,42,47,.24);
            box-shadow:0 18px 34px rgba(65,27,31,.11);
        }
        .entry-card .icon{
            width:42px;
            height:42px;
            border-radius:14px;
            display:grid;
            place-items:center;
            color:#fff;
            background:linear-gradient(135deg, var(--primary), var(--primary-3));
            box-shadow:0 10px 20px rgba(91,29,34,.18);
            font-size:18px;
        }
        .entry-card h3{
            margin:0;
            font-size:18px;
            line-height:1.25;
            color:var(--primary);
        }
        .entry-card p{
            margin:0;
            color:var(--muted);
            font-size:14px;
        }
        .entry-card .more{
            margin-top:auto;
            color:var(--primary-2);
            font-weight:700;
            font-size:13px;
        }
        .rhythm-grid{
            display:grid;
            grid-template-columns:.92fr 1.08fr;
            gap:var(--gap);
            align-items:stretch;
        }
        .rhythm-panel,
        .proof-panel{
            border-radius:var(--radius);
            background:linear-gradient(180deg, var(--card), var(--bg-soft));
            border:1px solid rgba(228,215,203,.92);
            box-shadow:var(--shadow-2);
            overflow:hidden;
        }
        .rhythm-panel{
            padding:24px;
        }
        .rhythm-panel h3{
            margin:0 0 10px;
            font-size:24px;
            color:var(--primary);
        }
        .rhythm-panel p{
            margin:0 0 18px;
            color:var(--muted);
        }
        .timeline{
            display:grid;
            gap:12px;
        }
        .timeline-item{
            display:grid;
            grid-template-columns:76px 1fr;
            gap:14px;
            align-items:start;
            padding:14px;
            border-radius:18px;
            background:#fff;
            border:1px solid rgba(228,215,203,.8);
        }
        .timeline-time{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            min-height:34px;
            padding:0 12px;
            border-radius:999px;
            background:rgba(91,29,34,.08);
            color:var(--primary);
            font-size:13px;
            font-weight:700;
        }
        .timeline-item strong{
            display:block;
            color:var(--text);
            margin-bottom:4px;
            font-size:15px;
        }
        .timeline-item span{
            display:block;
            color:var(--muted);
            font-size:13px;
        }
        .proof-panel{
            padding:24px;
            display:grid;
            gap:16px;
            align-content:start;
        }
        .proof-head{
            display:flex;
            align-items:flex-start;
            justify-content:space-between;
            gap:16px;
        }
        .proof-head h3{
            margin:0;
            font-size:24px;
            color:var(--primary);
        }
        .proof-head p{
            margin:8px 0 0;
            color:var(--muted);
        }
        .stat-grid{
            display:grid;
            grid-template-columns:repeat(3,1fr);
            gap:12px;
        }
        .stat{
            padding:16px;
            border-radius:18px;
            background:#fff;
            border:1px solid rgba(228,215,203,.8);
        }
        .stat b{
            display:block;
            font-size:24px;
            line-height:1;
            color:var(--primary);
            margin-bottom:8px;
        }
        .stat span{
            color:var(--muted);
            font-size:13px;
        }
        .pill-list{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
        }
        .pill-list .badge{
            padding:8px 12px;
            border-radius:999px;
            background:rgba(196,138,67,.12);
            color:#87531a;
            border:1px solid rgba(196,138,67,.20);
            font-size:13px;
            font-weight:600;
        }
        .featured-grid{
            display:grid;
            grid-template-columns:repeat(4,1fr);
            gap:16px;
        }
        .feature-card{
            overflow:hidden;
            border-radius:var(--radius);
            background:var(--card);
            border:1px solid rgba(228,215,203,.92);
            box-shadow:var(--shadow-2);
            transition:transform .24s var(--ease), box-shadow .24s var(--ease), border-color .24s var(--ease);
            display:flex;
            flex-direction:column;
            min-height:100%;
        }
        .feature-card:hover{
            transform:translateY(-4px);
            border-color:rgba(125,42,47,.24);
            box-shadow:0 18px 34px rgba(65,27,31,.11);
        }
        .feature-media{
            aspect-ratio:16/10;
            position:relative;
            overflow:hidden;
        }
        .feature-media img{
            width:100%;
            height:100%;
            object-fit:cover;
            transition:transform .4s var(--ease);
        }
        .feature-card:hover .feature-media img{transform:scale(1.03)}
        .feature-overlay{
            position:absolute;
            inset:auto 14px 14px 14px;
            display:flex;
            gap:8px;
            flex-wrap:wrap;
        }
        .feature-body{
            padding:18px;
            display:flex;
            flex-direction:column;
            gap:10px;
            flex:1 1 auto;
        }
        .feature-body h3{
            margin:0;
            font-size:18px;
            line-height:1.28;
            color:var(--primary);
        }
        .feature-body p{
            margin:0;
            color:var(--muted);
            font-size:14px;
        }
        .meta{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
            align-items:center;
            margin-top:auto;
            padding-top:8px;
            color:var(--muted-2);
            font-size:12px;
        }
        .meta .dot{
            width:4px;
            height:4px;
            border-radius:999px;
            background:var(--line-2);
        }
        .meta a{
            color:var(--primary-2);
            font-weight:700;
        }
        .latest-wrap{
            display:grid;
            gap:16px;
        }
        .latest-grid{
            display:grid;
            grid-template-columns:repeat(2,1fr);
            gap:16px;
        }
        .article-card{
            display:grid;
            grid-template-columns:180px 1fr;
            gap:0;
            overflow:hidden;
            border-radius:var(--radius);
            background:var(--card);
            border:1px solid rgba(228,215,203,.92);
            box-shadow:var(--shadow-2);
            transition:transform .24s var(--ease), box-shadow .24s var(--ease), border-color .24s var(--ease);
        }
        .article-card:hover{
            transform:translateY(-4px);
            border-color:rgba(125,42,47,.24);
            box-shadow:0 20px 36px rgba(65,27,31,.12);
        }
        .article-card .thumb{
            position:relative;
            min-height:100%;
            background:#f2ede7;
        }
        .article-card .thumb img{
            width:100%;
            height:100%;
            object-fit:cover;
        }
        .article-body{
            padding:18px;
            display:flex;
            flex-direction:column;
            gap:10px;
        }
        .article-body .kicker{
            display:flex;
            flex-wrap:wrap;
            gap:8px;
            align-items:center;
        }
        .badge{
            display:inline-flex;
            align-items:center;
            gap:6px;
            padding:6px 10px;
            border-radius:999px;
            background:rgba(91,29,34,.08);
            color:var(--primary);
            border:1px solid rgba(91,29,34,.12);
            font-size:12px;
            font-weight:700;
        }
        .badge.soft{
            background:rgba(196,138,67,.10);
            color:#87531a;
            border-color:rgba(196,138,67,.15);
        }
        .article-body h3{
            margin:0;
            font-size:19px;
            line-height:1.32;
            color:var(--text);
        }
        .article-body p{
            margin:0;
            color:var(--muted);
            font-size:14px;
        }
        .article-card .meta{
            padding-top:0;
        }
        .empty-state{
            padding:28px;
            border-radius:var(--        .empty-state{
            padding:28px;
            border-radius:var(--radius);
            border:1px dashed rgba(196,138,67,.34);
            background:linear-gradient(180deg, rgba(255,255,255,.86), rgba(244,235,226,.9));
            color:var(--muted);
            text-align:center;
            box-shadow:var(--shadow-2);
            font-size:15px;
        }
        .faq-grid{
            display:grid;
            grid-template-columns:repeat(2,1fr);
            gap:14px;
        }
        details.faq-item{
            border-radius:18px;
            background:var(--card);
            border:1px solid rgba(228,215,203,.92);
            box-shadow:var(--shadow-2);
            overflow:hidden;
        }
        details.faq-item 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(--primary);
        }
        details.faq-item summary::-webkit-details-marker{display:none}
        details.faq-item summary::after{
            content:"+";
            width:30px;
            height:30px;
            border-radius:999px;
            display:grid;
            place-items:center;
            flex:0 0 auto;
            background:rgba(91,29,34,.08);
            color:var(--primary);
            transition:transform .22s var(--ease), background .22s var(--ease);
        }
        details.faq-item[open] summary{
            border-bottom:1px solid rgba(228,215,203,.82);
            background:linear-gradient(180deg, rgba(91,29,34,.04), rgba(255,255,255,.96));
        }
        details.faq-item[open] summary::after{
            content:"−";
            background:rgba(196,138,67,.12);
        }
        .faq-content{
            padding:0 20px 18px;
            color:var(--muted);
            font-size:14px;
        }
        .cta-box{
            position:relative;
            overflow:hidden;
            border-radius:28px;
            padding:28px;
            background:
                linear-gradient(135deg, rgba(91,29,34,.96), rgba(125,42,47,.92) 56%, rgba(196,138,67,.86));
            color:#fff;
            box-shadow:0 24px 48px rgba(91,29,34,.18);
            border:1px solid rgba(255,255,255,.12);
        }
        .cta-box::before{
            content:"";
            position:absolute;
            inset:-20% auto auto -8%;
            width:260px;
            height:260px;
            border-radius:50%;
            background:rgba(255,255,255,.08);
            filter:blur(2px);
        }
        .cta-grid{
            position:relative;
            display:grid;
            grid-template-columns:1.1fr .9fr;
            gap:22px;
            align-items:center;
        }
        .cta-box h2{
            margin:0 0 10px;
            font-size:clamp(26px, 3vw, 40px);
            line-height:1.12;
        }
        .cta-box p{
            margin:0;
            color:rgba(255,255,255,.86);
            max-width:62ch;
        }
        .cta-actions{
            display:flex;
            flex-wrap:wrap;
            gap:12px;
            justify-content:flex-end;
        }
        .cta-actions .outline-btn,
        .cta-actions .primary-btn{
            min-width:148px;
        }
        .footer{
            margin-top:28px;
            padding:28px 0 34px;
            background:linear-gradient(180deg, rgba(35,23,25,.04), rgba(35,23,25,.08));
            border-top:1px solid rgba(228,215,203,.9);
        }
        .footer-inner{
            display:grid;
            grid-template-columns:1.1fr .9fr .8fr;
            gap:24px;
            padding-top:4px;
        }
        .footer-brand{
            display:flex;
            flex-direction:column;
            gap:12px;
        }
        .footer-brand .brand-text strong{font-size:18px}
        .footer-brand p{
            margin:0;
            color:var(--muted);
            font-size:14px;
            max-width:42ch;
        }
        .footer-links{
            display:grid;
            gap:10px;
            align-content:start;
        }
        .footer-links h3{
            margin:0 0 8px;
            font-size:16px;
            color:var(--primary);
        }
        .footer-links a{
            color:var(--muted);
            font-size:14px;
            padding:4px 0;
            transition:color .22s var(--ease), transform .22s var(--ease);
        }
        .footer-links a:hover,
        .footer-links a:focus-visible{
            color:var(--primary);
            transform:translateX(2px);
            outline:none;
        }
        .footer-note{
            color:var(--muted);
            font-size:14px;
            line-height:1.8;
        }
        .footer-bottom{
            margin-top:24px;
            padding-top:18px;
            border-top:1px solid rgba(228,215,203,.85);
            display:flex;
            flex-wrap:wrap;
            gap:12px;
            align-items:center;
            justify-content:space-between;
            color:var(--muted-2);
            font-size:13px;
        }
        .footer-bottom a{color:var(--primary-2);font-weight:700}
        .back-top{
            position:fixed;
            right:18px;
            bottom:18px;
            width:48px;
            height:48px;
            border-radius:16px;
            border:1px solid rgba(228,215,203,.95);
            background:rgba(255,255,255,.92);
            color:var(--primary);
            display:grid;
            place-items:center;
            box-shadow:var(--shadow-2);
            opacity:0;
            visibility:hidden;
            transform:translateY(10px);
            transition:opacity .22s var(--ease), visibility .22s var(--ease), transform .22s var(--ease), background .22s var(--ease);
            z-index:900;
        }
        .back-top.show{
            opacity:1;
            visibility:visible;
            transform:translateY(0);
        }
        .back-top:hover,
        .back-top:focus-visible{
            outline:none;
            background:#fff;
            transform:translateY(-2px);
        }
        :focus-visible{
            outline:3px solid rgba(196,138,67,.28);
            outline-offset:3px;
        }
        .screen-reader-text{
            position:absolute!important;
            width:1px;height:1px;
            padding:0;margin:-1px;
            overflow:hidden;
            clip:rect(0,0,0,0);
            white-space:nowrap;
            border:0;
        }
        @media (max-width: 1080px){
            .hero-inner,
            .entry-grid,
            .rhythm-grid,
            .cta-grid,
            .footer-inner{
                grid-template-columns:1fr;
            }
            .featured-grid{
                grid-template-columns:repeat(2,1fr);
            }
            .latest-grid{
                grid-template-columns:1fr;
            }
            .search-box{
                min-width:280px;
            }
        }
        @media (max-width: 860px){
            .site-nav{
                flex-wrap:wrap;
                justify-content:flex-end;
            }
            .nav-toggle{
                display:inline-flex;
            }
            .nav-panel{
                position:fixed;
                inset:76px 0 auto 0;
                background:rgba(250,247,243,.96);
                border-bottom:1px solid rgba(228,215,203,.9);
                box-shadow:0 18px 34px rgba(65,27,31,.10);
                padding:14px 16px 18px;
                transform:translateY(-12px);
                opacity:0;
                pointer-events:none;
                transition:transform .24s var(--ease), opacity .24s var(--ease);
            }
            .site-header.is-open .nav-panel{
                transform:translateY(0);
                opacity:1;
                pointer-events:auto;
            }
            .nav-links{
                width:100%;
                border-radius:20px;
                justify-content:space-between;
                overflow:auto;
                padding:8px;
            }
            .nav-actions{
                margin-top:12px;
                width:100%;
            }
            .search-box{
                width:100%;
                min-width:0;
            }
            .header-inner{
                gap:12px;
            }
            .hero-inner{
                padding:26px;
            }
            .hero-mini-grid,
            .stat-grid,
            .faq-grid{
                grid-template-columns:1fr;
            }
            .featured-grid{
                grid-template-columns:1fr;
            }
            .article-card{
                grid-template-columns:1fr;
            }
            .article-card .thumb{
                aspect-ratio:16/9;
            }
            .cta-actions{
                justify-content:flex-start;
            }
        }
        @media (max-width: 560px){
            .container{
                width:min(calc(100% - 20px), var(--container));
            }
            .header-inner{
                min-height:70px;
            }
            .brand-mark{
                width:38px;height:38px;border-radius:12px;
            }
            .brand-text strong{
                font-size:15px;
            }
            .nav-links a{
                padding:9px 12px;
                font-size:13px;
            }
            .hero{
                padding-top:18px;
            }
            .hero-shell{
                border-radius:22px;
            }
            .hero-inner{
                padding:20px;
                gap:18px;
            }
            h1{
                font-size:clamp(30px, 8vw, 42px);
            }
            .hero-copy,
            .section-desc,
            .section-note,
            .footer-note{
                font-size:14px;
            }
            .hero-actions,
            .cta-actions{
                flex-direction:column;
            }
            .primary-btn,
            .outline-btn,
            .ghost-btn,
            .search-btn{
                width:100%;
            }
            .hero-visual{
                min-height:230px;
            }
            .hero-visual-copy strong{
                font-size:18px;
            }
            .entry-card,
            .rhythm-panel,
            .proof-panel,
            .cta-box{
                border-radius:22px;
            }
            .section{
                margin-top:22px;
            }
            .section-head{
                flex-direction:column;
                align-items:flex-start;
            }
            .timeline-item{
                grid-template-columns:1fr;
            }
            .footer-bottom{
                flex-direction:column;
                align-items:flex-start;
            }
            .back-top{
                right:14px;
                bottom:14px;
            }
        }

/* roulang page: article */
:root{
            --bg:#f6f1eb;
            --bg-soft:#fbf8f4;
            --card:#fffdfb;
            --card-2:#f4ebe2;
            --line:#e4d7cb;
            --line-2:#d5c3b6;
            --text:#22171a;
            --muted:#6e5b5f;
            --muted-2:#8b767b;
            --primary:#5b1d22;
            --primary-2:#7d2a2f;
            --primary-3:#a03f37;
            --accent:#c48a43;
            --accent-2:#e9c78b;
            --shadow:0 18px 40px rgba(65, 27, 31, .10);
            --shadow-2:0 10px 24px rgba(65, 27, 31, .08);
            --radius:20px;
            --radius-sm:14px;
            --radius-xs:10px;
            --container:1200px;
            --gap:24px;
            --gap-lg:34px;
            --gap-xl:48px;
            --ease:cubic-bezier(.2,.7,.2,1);
        }

        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{
            margin:0;
            font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",Segoe UI,Roboto,Helvetica,Arial,sans-serif;
            color:var(--text);
            background:
                radial-gradient(circle at top left, rgba(91,29,34,.08), transparent 30%),
                radial-gradient(circle at top right, rgba(196,138,67,.08), transparent 24%),
                linear-gradient(180deg, #fcfaf7 0%, var(--bg) 100%);
            line-height:1.72;
            text-rendering:optimizeLegibility;
            -webkit-font-smoothing:antialiased;
            overflow-x:hidden;
        }
        img{max-width:100%;display:block}
        a{color:inherit;text-decoration:none}
        a:hover{text-decoration:none}
        button,input,textarea,select{font:inherit}
        button{cursor:pointer}
        ::selection{background:rgba(91,29,34,.18);color:var(--primary)}

        .screen-reader-text{
            position:absolute!important;
            width:1px;height:1px;
            padding:0;margin:-1px;
            overflow:hidden;clip:rect(0,0,0,0);
            white-space:nowrap;border:0;
        }

        .container{
            width:min(var(--container), calc(100% - 32px));
            margin:0 auto;
        }

        .site-header{
            position:sticky;
            top:0;
            z-index:1000;
            backdrop-filter:saturate(180%) blur(14px);
            background:rgba(250,247,243,.84);
            border-bottom:1px solid rgba(228,215,203,.85);
        }
        .header-inner{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:18px;
            min-height:76px;
        }
        .brand{
            display:inline-flex;
            align-items:center;
            gap:12px;
            flex:0 0 auto;
            min-width:0;
        }
        .brand-mark{
            width:42px;height:42px;
            border-radius:14px;
            background:
                linear-gradient(135deg, rgba(91,29,34,1), rgba(125,42,47,1) 58%, rgba(196,138,67,1));
            box-shadow:0 12px 28px rgba(91,29,34,.22);
            position:relative;
            overflow:hidden;
        }
        .brand-mark::before,
        .brand-mark::after{
            content:"";
            position:absolute;
            inset:auto;
            background:rgba(255,255,255,.16);
            border-radius:999px;
        }
        .brand-mark::before{width:14px;height:14px;left:9px;top:9px}
        .brand-mark::after{width:24px;height:24px;right:6px;bottom:6px}
        .brand-text{
            display:flex;
            flex-direction:column;
            gap:2px;
            min-width:0;
        }
        .brand-text strong{
            font-size:16px;
            line-height:1.15;
            letter-spacing:.04em;
            color:var(--primary);
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;
        }
        .brand-text span{
            font-size:12px;
            color:var(--muted);
        }

        .site-nav{
            display:flex;
            align-items:center;
            gap:12px;
            flex:1 1 auto;
            justify-content:flex-end;
        }
        .nav-links{
            display:flex;
            align-items:center;
            gap:8px;
            padding:6px;
            border:1px solid rgba(228,215,203,.95);
            background:rgba(255,255,255,.72);
            border-radius:999px;
            box-shadow:0 8px 24px rgba(65, 27, 31, .04);
        }
        .nav-links a{
            position:relative;
            display:inline-flex;
            align-items:center;
            justify-content:center;
            padding:10px 16px;
            border-radius:999px;
            color:var(--muted);
            font-size:14px;
            font-weight:600;
            transition:transform .22s var(--ease), background .22s var(--ease), color .22s var(--ease), box-shadow .22s var(--ease);
        }
        .nav-links a:hover,
        .nav-links a:focus-visible{
            outline:none;
            color:var(--primary);
            background:rgba(91,29,34,.08);
            transform:translateY(-1px);
        }
        .nav-links a.active{
            color:#fff;
            background:linear-gradient(135deg, var(--primary), var(--primary-3));
            box-shadow:0 10px 22px rgba(91,29,34,.20);
        }

        .nav-actions{
            display:flex;
            align-items:center;
            gap:10px;
        }
        .search-box{
            display:flex;
            align-items:center;
            gap:10px;
            padding:8px 10px 8px 14px;
            border-radius:999px;
            background:rgba(255,255,255,.86);
            border:1px solid rgba(228,215,203,.95);
            box-shadow:0 8px 24px rgba(65, 27, 31, .04);
            min-width:min(340px, 38vw);
        }
        .search-box input{
            border:0;
            outline:none;
            background:transparent;
            width:100%;
            color:var(--text);
            min-width:0;
        }
        .search-box input::placeholder{color:var(--muted-2)}
        .search-btn,
        .ghost-btn,
        .primary-btn,
        .outline-btn,
        .mini-btn{
            border:0;
            border-radius:999px;
            transition:transform .22s var(--ease), box-shadow .22s var(--ease), background .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease), opacity .22s var(--ease);
        }
        .search-btn{
            flex:0 0 auto;
            padding:10px 14px;
            background:var(--primary);
            color:#fff;
            font-weight:700;
            letter-spacing:.02em;
            box-shadow:0 10px 22px rgba(91,29,34,.18);
        }
        .search-btn:hover,
        .search-btn:focus-visible{
            outline:none;
            transform:translateY(-1px);
            box-shadow:0 14px 26px rgba(91,29,34,.22);
        }

        .nav-toggle{
            display:none;
            width:46px;
            height:46px;
            border:1px solid rgba(228,215,203,.95);
            border-radius:14px;
            background:rgba(255,255,255,.86);
            padding:0;
            align-items:center;
            justify-content:center;
            box-shadow:0 8px 22px rgba(65,27,31,.04);
        }
        .nav-toggle span,
        .nav-toggle span::before,
        .nav-toggle span::after{
            content:"";
            display:block;
            width:18px;height:2px;
            background:var(--primary);
            border-radius:99px;
            position:relative;
            transition:transform .22s var(--ease), top .22s var(--ease), opacity .22s var(--ease), background .22s var(--ease);
        }
        .nav-toggle span::before{position:absolute;left:0;top:-6px}
        .nav-toggle span::after{position:absolute;left:0;top:6px}

        .site-main{
            padding:24px 0 40px;
        }

        .article-banner{
            position:relative;
            margin-top:14px;
            margin-bottom:28px;
            overflow:hidden;
            border:1px solid rgba(228,215,203,.95);
            border-radius:28px;
            background:
                linear-gradient(135deg, rgba(91,29,34,.92), rgba(91,29,34,.72)),
                url('/assets/images/backpic/back-3.jpg') center/cover no-repeat;
            box-shadow:var(--shadow);
        }
        .article-banner::before{
            content:"";
            position:absolute;
            inset:0;
            background:
                radial-gradient(circle at top right, rgba(233,199,139,.24), transparent 28%),
                radial-gradient(circle at bottom left, rgba(255,255,255,.12), transparent 26%);
            pointer-events:none;
        }
        .article-banner-inner{
            position:relative;
            display:grid;
            grid-template-columns: minmax(0, 1.45fr) minmax(280px, .85fr);
            gap:28px;
            padding:34px;
            align-items:center;
        }
        .banner-copy{
            color:#fff;
        }
        .banner-kicker{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:7px 12px;
            border-radius:999px;
            background:rgba(255,255,255,.12);
            border:1px solid rgba(255,255,255,.14);
            color:#fff3df;
            font-size:13px;
            letter-spacing:.04em;
            margin-bottom:16px;
        }
        .banner-kicker::before{
            content:"";
            width:8px;height:8px;border-radius:50%;
            background:var(--accent-2);
            box-shadow:0 0 0 6px rgba(233,199,139,.14);
        }
        .banner-copy h1{
            margin:0 0 16px;
            font-size:clamp(30px, 4vw, 52px);
            line-height:1.12;
            letter-spacing:.01em;
            max-width:16em;
        }
        .banner-copy p{
            margin:0 0 18px;
            color:rgba(255,255,255,.84);
            max-width:64ch;
            font-size:16px;
        }
        .banner-meta{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
            margin-top:18px;
        }
        .meta-pill{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:9px 12px;
            border-radius:999px;
            background:rgba(255,255,255,.10);
            border:1px solid rgba(255,255,255,.12);
            color:#fff;
            font-size:13px;
            box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
        }
        .meta-pill b{font-weight:700;color:#fff6e2}

        .banner-side{
            background:rgba(255,253,251,.96);
            border:1px solid rgba(255,255,255,.5);
            border-radius:24px;
            padding:16px;
            box-shadow:0 20px 40px rgba(45, 14, 18, .18);
            position:relative;
            overflow:hidden;
        }
        .banner-side::before{
            content:"";
            position:absolute;
            inset:auto -30% -32% auto;
            width:160px;height:160px;
            border-radius:50%;
            background:radial-gradient(circle, rgba(196,138,67,.22), transparent 68%);
            pointer-events:none;
        }
        .banner-cover{
            border-radius:18px;
            overflow:hidden;
            aspect-ratio: 16 / 10;
            background:linear-gradient(135deg, #f2e5d8, #e7d6c8);
            margin-bottom:14px;
            border:1px solid rgba(228,215,203,.95);
        }
        .banner-cover img{
            width:100%;
            height:100%;
            object-fit:cover;
        }
        .banner-side h2{
            font-size:18px;
            margin:0 0 8px;
            color:var(--primary);
        }
        .banner-side p{
            margin:0 0 12px;
            color:var(--muted);
            font-size:14px;
        }
        .banner-mini-grid{
            display:grid;
            grid-template-columns:repeat(2, minmax(0, 1fr));
            gap:10px;
        }
        .mini-stat{
            padding:12px 12px 11px;
            border-radius:16px;
            background:linear-gradient(180deg, #fff, #fbf6f1);
            border:1px solid rgba(228,215,203,.92);
        }
        .mini-stat strong{
            display:block;
            font-size:16px;
            color:var(--primary);
            line-height:1.15;
            margin-bottom:4px;
        }
        .mini-stat span{
            display:block;
            color:var(--muted);
            font-size:12px;
        }

        .article-surface{
            display:grid;
            grid-template-columns:minmax(0, 1fr) 320px;
            gap:var(--gap-lg);
            align-items:start;
            margin-bottom:var(--gap-xl);
        }

        .surface-main{
            min-width:0;
        }
        .surface-panel{
            background:rgba(255,253,251,.95);
            border:1px solid rgba(228,215,203,.95);
            border-radius:26px;
            box-shadow:var(--shadow);
            overflow:hidden;
        }
        .surface-panel-head{
            padding:22px 24px 18px;
            border-bottom:1px solid rgba(228,215,203,.8);
            background:linear-gradient(180deg, rgba(244,235,226,.42), rgba(255,255,255,.28));
        }
        .breadcrumb{
            display:flex;
            flex-wrap:wrap;
            align-items:center;
            gap:8px;
            margin-bottom:12px;
            font-size:13px;
            color:var(--muted);
        }
        .breadcrumb a{
            color:var(--muted);
            transition:color .2s var(--ease);
        }
        .breadcrumb a:hover,
        .breadcrumb a:focus-visible{
            color:var(--primary);
            outline:none;
        }
        .breadcrumb .sep{
            color:var(--line-2);
        }
        .section-label{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:7px 12px;
            border-radius:999px;
            background:rgba(91,29,34,.08);
            color:var(--primary);
            font-size:13px;
            font-weight:700;
        }
        .section-label::before{
            content:"";
            width:8px;height:8px;border-radius:50%;
            background:var(--accent);
        }
        .article-title{
            margin:16px 0 14px;
            font-size:clamp(28px, 3vw, 42px);
            line-height:1.22;
            color:var(--text);
            letter-spacing:.01em;
        }
        .article-lead{
            margin:0;
            color:var(--muted);
            font-size:16px;
            max-width:76ch;
        }
        .article-meta{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
            margin-top:16px;
        }
        .meta-chip{
            display:inline-flex;
            align-items:center;
            gap:7px;
            padding:9px 12px;
            border-radius:999px;
            background:var(--card);
            border:1px solid rgba(228,215,203,.95);
            color:var(--muted);
            font-size:13px;
            box-shadow:0 8px 18px rgba(65,27,31,.04);
        }
        .meta-chip b{
            color:var(--primary);
            font-weight:700;
        }

        .article-body{
            padding:24px;
        }
        .article-content{
            font-size:17px;
            line-height:1.9;
            color:var(--text);
            max-width:100%;
        }
        .article-content > *:first-child{margin-top:0}
        .article-content > *:last-child{margin-bottom:0}
        .article-content h2,
        .article-content h3,
        .article-content h4{
            color:var(--text);
            line-height:1.35;
            margin:1.7em 0 .8em;
            letter-spacing:.01em;
        }
        .article-content h2{
            font-size:24px;
            padding-left:12px;
            border-left:4px solid var(--primary);
        }
        .article-content h3{font-size:20px}
        .article-content h4{font-size:18px}
        .article-content p{
            margin:0 0 1em;
            color:#33262a;
        }
        .article-content a{
            color:var(--primary-2);
            text-decoration:underline;
            text-underline-offset:3px;
        }
        .article-content a:hover{color:var(--primary)}
        .article-content ul,
        .article-content ol{
            padding-left:1.25em;
            margin:0 0 1.15em;
        }
        .article-content li{margin:.45em 0}
        .article-content blockquote{
            margin:1.4em 0;
            padding:18px 18px 18px 20px;
            border-left:4px solid var(--accent);
            background:linear-gradient(180deg, rgba(244,235,226,.55), rgba(255,255,255,.95));
            border-radius:0 18px 18px 0;
            color:#4a373b;
            box-shadow:0 10px 22px rgba(65,27,31,.05);
        }
        .article-content img{
            width:100%;
            border-radius:18px;
            margin:1.4em 0;
            border:1px solid rgba(228,215,203,.95);
            box-shadow:var(--shadow-2);
        }
        .article-content figure{
            margin:1.4em 0;
        }
        .article-content figcaption{
            margin-top:8px;
            color:var(--muted);
            font-size:13px;
            text-align:center;
        }
        .article-content code{
            padding:.18rem .42rem;
            border-radius:8px;
            background:#f4ebe2;
            color:#7a1f25;
            font-size:.95em;
        }
        .article-content pre{
            margin:1.4em 0;
            padding:18px;
            overflow:auto;
            border-radius:18px;
            background:#1f1819;
            color:#f2eae4;
            border:1px solid rgba(228,215,203,.18);
            box-shadow:0 14px 28px rgba(33, 22, 24, .16);
        }
        .article-content pre code{
            padding:0;
            background:transparent;
            color:inherit;
        }
        .article-content table{
            width:100%;
            border-collapse:collapse;
            margin:1.4em 0;
            background:var(--card);
            border-radius:16px;
            overflow:hidden;
            border:1px solid rgba(228,215,203,.95);
        }
        .article-content th,
        .article-content td{
            padding:12px 14px;
            border-bottom:1px solid rgba(228,215,203,.8);
            text-align:left;
            vertical-align:top;
        }
        .article-content th{
            background:rgba(244,235,226,.62);
            color:var(--primary);
            font-weight:700;
        }
        .article-content tr:last-child td{border-bottom:0}
        .article-content hr{
            border:0;
            height:1px;
            background:linear-gradient(90deg, transparent, rgba(212,195,182,.98), transparent);
            margin:1.6em 0;
        }
        .article-content .tip-box,
        .article-content .note-box{
            margin:1.2em 0;
            padding:16px 18px;
            border-radius:18px;
            border:1px solid rgba(228,215,203,.96);
            background:linear-gradient(180deg, #fff, #fbf7f2);
        }
        .article-content .tip-box{
            border-left:4px solid var(--accent);
        }
        .article-content .note-box{
            border-left:4px solid var(--primary-2);
        }

        .article-side{
            display:grid;
            gap:18px;
            position:sticky;
            top:96px;
        }
        .side-card{
            background:rgba(255,253,251,.96);
            border:1px solid rgba(228,215,203,.95);
            border-radius:24px;
            box-shadow:var(--shadow-2);
            overflow:hidden;
        }
        .side-card-head{
            padding:18px 18px 14px;
            border-bottom:1px solid rgba(228,215,203,.8);
            background:linear-gradient(180deg, rgba(244,235,226,.42), rgba(255,255,255,.28));
        }
        .side-card-head h3{
            margin:0;
            font-size:17px;
            color:var(--primary);
        }
        .side-card-body{
            padding:18px;
        }
        .side-list{
            display:grid;
            gap:10px;
        }
        .side-list a{
            display:flex;
            align-items:flex-start;
            gap:10px;
            padding:12px 12px;
            border-radius:16px;
            background:linear-gradient(180deg, #fff, #fcf8f4);
            border:1px solid rgba(228,215,203,.9);
            color:var(--text);
            transition:transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
        }
        .side-list a:hover,
        .side-list a:focus-visible{
            outline:none;
            transform:translateY(-2px);
            box-shadow:0 14px 24px rgba(65,27,31,.08);
            border-color:rgba(125,42,47,.18);
        }
        .side-dot{
            width:10px;height:10px;
            border-radius:50%;
            background:linear-gradient(135deg, var(--primary), var(--accent));
            box-shadow:0 0 0 5px rgba(91,29,34,.08);
            margin-top:6px;
            flex:0 0 auto;
        }
        .side-link-text{
            min-width:0;
        }
        .side-link-text strong{
            display:block;
            font-size:14px;
            line-height:1.45;
            margin-bottom:4px;
        }
        .side-link-text span{
            display:block;
            color:var(--muted);
            font-size:12px;
        }
        .side-media{
            padding:14px;
        }
        .side-media .thumb{
            border-radius:18px;
            overflow:hidden;
            aspect-ratio: 5 / 4;
            border:1px solid rgba(228,215,203,.95);
            margin-bottom:12px;
            background:linear-gradient(135deg, #f0e2d4, #e7d7ca);
        }
        .side-media .thumb img{
            width:100%;
            height:100%;
            object-fit:cover;
        }
        .side-media p{
            margin:0;
            color:var(--muted);
            font-size:14px;
        }

        .empty-state{
            margin:24px;
            padding:22px;
            border-radius:22px;
            border:1px dashed rgba(196,138,67,.35);
            background:linear-gradient(180deg, rgba(244,235,226,.50), rgba(255,255,255,.95));
            text-align:center;
        }
        .empty-state h2{
            margin:0 0 10px;
            color:var(--primary);
            font-size:24px;
        }
        .empty-state p{
            margin:0 0 16px;
            color:var(--muted);
        }

        .section{
            margin-bottom:var(--gap-xl);
        }
        .section-head{
            display:flex;
            align-items:end;
            justify-content:space-between;
            gap:14px;
            margin-bottom:18px;
        }
        .section-head h2{
            margin:0;
            font-size:26px;
            line-height:1.2;
            color:var(--text);
        }
        .section-head p{
            margin:0;
            color:var(--muted);
            font-size:14px;
            max-width:60ch;
        }

        .related-grid{
            display:grid;
            grid-template-columns:repeat(3, minmax(0, 1fr));
            gap:18px;
        }
        .story-card{
            background:rgba(255,253,251,.96);
            border:1px solid rgba(228,215,203,.95);
            border-radius:24px;
            overflow:hidden;
            box-shadow:var(--shadow-2);
            transition:transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
            min-width:0;
        }
        .story-card:hover,
        .story-card:focus-within{
            transform:translateY(-3px);
            box-shadow:0 18px 32px rgba(65,27,31,.10);
            border-color:rgba(125,42,47,.18);
        }
        .story-card .cover{
            aspect-ratio: 16 / 10;
            overflow:hidden;
            background:linear-gradient(135deg, #f0e2d4, #e7d7ca);
            border-bottom:1px solid rgba(228,215,203,.9);
        }
        .story-card .cover img{
            width:100%;
            height:100%;
            object-fit:cover;
            transition:transform .4s var(--ease);
        }
        .story-card:hover .cover img{transform:scale(1.03)}
        .story-body{
            padding:18px;
        }
        .story-kicker{
            display:flex;
            align-items:center;
            gap:8px;
            margin-bottom:10px;
            color:var(--muted);
            font-size:12px;
        }
        .story-kicker .dot{
            width:8px;height:8px;border-radius:50%;
            background:var(--accent);
        }
        .story-body h3{
            margin:0 0 10px;
            font-size:18px;
            line-height:1.42;
            color:var(--text);
        }
        .story-body p{
            margin:0 0 14px;
            color:var(--muted);
            font-size:14px;
        }
        .story-footer{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:12px;
        }
        .story-time{
            color:var(--muted-2);
            font-size:12px;
        }
        .mini-btn{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            padding:9px 14px;
            background:rgba(91,29,34,.08);
            color:var(--primary);
            font-weight:700;
            font-size:13px;
            border:1px solid rgba(91,29,34,.10);
        }
        .mini-btn:hover,
        .mini-btn:focus-visible{
            outline:none;
            transform:translateY(-1px);
            background:rgba(91,29,34,.12);
        }

        .cta-block{
            margin-bottom:var(--gap-xl);
        }
        .cta-panel{
            position:relative;
            overflow:hidden;
            padding:28px;
            border-radius:28px;
            background:
                linear-gradient(135deg, rgba(91,29,34,.96), rgba(125,42,47,.92)),
                url('/assets/images/backpic/back-1.jpg') center/cover no-repeat;
            border:1px solid rgba(91,29,34,.20);
            box-shadow:var(--shadow);
        }
        .cta-panel::before{
            content:"";
            position:absolute;
            inset:0;
            background:
                radial-gradient(circle at right center, rgba(233,199,139,.18), transparent 26%),
                radial-gradient(circle at left top, rgba(255,255,255,.12), transparent 30%);
            pointer-events:none;
        }
        .cta-inner{
            position:relative;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:20px;
        }
        .cta-copy{
            color:#fff;
            max-width:64ch;
        }
        .cta-copy h2{
            margin:0 0 10px;
            font-size:clamp(24px, 3vw, 34px);
            line-height:1.22;
        }
        .cta-copy p{
            margin:0;
            color:rgba(255,255,255,.84);
        }
        .cta-actions{
            display:flex;
            flex-wrap:wrap;
            gap:12px;
            flex:0 0 auto;
        }
        .primary-btn,
        .outline-btn{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:8px;
            min-height:46px;
            padding:0 18px;
            font-weight:700;
            letter-spacing:.02em;
            border:1px solid transparent;
        }
        .primary-btn{
            background:#fff;
            color:var(--primary);
            box-shadow:0 12px 24px rgba(33, 14, 17, .18);
        }
        .primary-btn:hover,
        .primary-btn:focus-visible{
            outline:none;
            transform:translateY(-1px);
            box-shadow:0 16px 30px rgba(33, 14, 17, .22);
        }
        .outline-btn{
            background:transparent;
            border-color:rgba(255,255,255,.32);
            color:#fff;
        }
        .outline-btn:hover,
        .outline-btn:focus-visible{
            outline:none;
            transform:translateY(-1px);
            background:rgba(255,255,255,.10);
        }

        .footer{
            padding:34px 0 20px;
            border-top:1px solid rgba(228,215,203,.9);
            background:linear-gradient(180deg, rgba(250,247,243,.72), rgba(244,235,226,.66));
        }
        .footer-inner{
            display:grid;
            grid-template-columns:1.35fr .7fr 1fr;
            gap:24px;
            padding-bottom:18px;
        }
        .footer-brand p{
            margin:14px 0 0;
            color:var(--muted);
            max-width:40ch;
        }
        .footer-links h3,
        .footer-note h3{
            margin:0 0 12px;
            font-size:16px;
            color:var(--primary);
        }
        .footer-links{
            display:flex;
            flex-direction:column;
        }
        .footer-links a{
            display:inline-flex;
            width:fit-content;
            color:var(--muted);
            margin-bottom:10px;
            transition:color .2s var(--ease), transform .2s var(--ease);
        }
        .footer-links a:hover,
        .footer-links a:focus-visible{
            color:var(--primary);
            transform:translateX(2px);
            outline:none;
        }
        .footer-note{
            color:var(--muted);
        }
        .footer-note div{
            margin-bottom:8px;
        }
        .footer-bottom{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:14px;
            padding-top:18px;
            border-top:1px solid rgba(228,215,203,.95);
            color:var(--muted);
            font-size:13px;
            flex-wrap:wrap;
        }
        .footer-bottom a{
            color:var(--primary);
            text-decoration:underline;
            text-underline-offset:3px;
        }

        .focus-ring:focus-visible,
        a:focus-visible,
        button:focus-visible,
        input:focus-visible{
            outline:3px solid rgba(196,138,67,.35);
            outline-offset:3px;
        }

        .badge-soft{
            display:inline-flex;
            align-items:center;
            gap:7px;
            padding:6px 10px;
            border-radius:999px;
            background:rgba(196,138,67,.12);
            color:#7c5320;
            font-size:12px;
            font-weight:700;
        }
        .badge-soft i{
            width:7px;height:7px;border-radius:50%;
            background:var(--accent);
            display:inline-block;
        }

        @media (max-width: 1024px){
            .article-banner-inner{
                grid-template-columns:1fr;
            }
            .article-surface{
                grid-template-columns:1fr;
            }
            .article-side{
                position:static;
            }
            .related-grid{
                grid-template-columns:repeat(2, minmax(0, 1fr));
            }
            .footer-inner{
                grid-template-columns:1fr 1fr;
            }
            .footer-note{
                grid-column:1 / -1;
            }
        }

        @media (max-width: 768px){
            .header-inner{
                min-height:68px;
            }
            .nav-toggle{
                display:inline-flex;
            }
            .site-nav{
                gap:10px;
            }
            .nav-panel{
                position:absolute;
                left:16px;
                right:16px;
                top:calc(100% + 10px);
                background:rgba(255,253,251,.98);
                border:1px solid rgba(228,215,203,.95);
                border-radius:22px;
                padding:14px;
                box-shadow:var(--shadow);
                display:none;
            }
            .nav-panel.is-open{
                display:block;
            }
            .nav-links{
                justify-content:flex-start;
                padding:0;
                border:0;
                background:transparent;
                box-shadow:none;
                flex-direction:column;
                align-items:stretch;
                gap:8px;
            }
            .nav-links a{
                justify-content:flex-start;
                padding:12px 14px;
                border-radius:14px;
                background:rgba(244,235,226,.48);
            }
            .nav-links a.active{
                background:linear-gradient(135deg, var(--primary), var(--primary-3));
            }
            .nav-actions{
                margin-top:12px;
            }
            .search-box{
                min-width:0;
                width:100%;
            }
            .article-banner-inner{
                padding:22px;
            }
            .article-title{
                font-size:clamp(24px, 8vw, 34px);
            }
            .article-body,
            .surface-panel-head{
                padding-left:18px;
                padding-right:18px;
            }
            .related-grid{
                grid-template-columns:1fr;
            }
            .section-head{
                flex-direction:column;
                align-items:flex-start;
            }
            .cta-inner{
                flex-direction:column;
                align-items:flex-start;
            }
            .footer-inner{
                grid-template-columns:1fr;
            }
        }

        @media (max-width: 520px){
            .container{width:min(var(--container), calc(100% - 22px))}
            .article-banner{
                border-radius:22px;
            }
            .article-banner-inner{
                padding:18px;
                gap:18px;
            }
            .banner-copy h1{
                max-width:none;
            }
            .banner-mini-grid{
                grid-template-columns:1fr 1fr;
            }
            .surface-panel,
            .side-card,
            .story-card,
            .cta-panel{
                border-radius:22px;
            }
            .article-body{
                padding:16px;
            }
            .article-content{
                font-size:16px;
                line-height:1.88;
            }
            .cta-panel{
                padding:22px 18px;
            }
            .primary-btn,
            .outline-btn{
                width:100%;
            }
            .cta-actions{
                width:100%;
            }
            .cta-actions > *{
                width:100%;
            }
        }

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