/* roulang page: index */
:root{
            --paper:#f6f3ed;
            --paper-deep:#ece8df;
            --ink:#202522;
            --muted:#68716d;
            --line:#d9d5cc;
            --orange:#c85b3c;
            --orange-dark:#a9442d;
            --green:#52716b;
            --green-dark:#365851;
            --white:#fffdf9;
            --radius:8px;
            --shadow:0 12px 30px rgba(32,37,34,.08);
            --container:1200px;
        }
        *,*::before,*::after{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{
            margin:0;
            color:var(--ink);
            background:var(--paper);
            font-family:"Noto Sans SC","PingFang SC","Microsoft YaHei",Arial,sans-serif;
            font-size:16px;
            line-height:1.75;
            -webkit-font-smoothing:antialiased;
        }
        a{color:inherit;text-decoration:none;transition:color .2s ease,background .2s ease,border-color .2s ease,transform .2s ease}
        img{display:block;max-width:100%;height:auto}
        button,input,textarea{font:inherit}
        button{cursor:pointer}
        .container{width:min(var(--container),calc(100% - 48px));margin:0 auto}
        .site-header{
            height:76px;
            border-bottom:1px solid var(--line);
            background:rgba(246,243,237,.96);
            position:sticky;
            top:0;
            z-index:20;
        }
        .nav-wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:28px}
        .brand{display:flex;align-items:center;gap:12px;min-width:230px}
        .brand-mark{
            width:35px;height:35px;border:2px solid var(--orange);color:var(--orange);
            display:grid;place-items:center;font-size:13px;font-weight:800;line-height:1;
            transform:rotate(-4deg)
        }
        .brand-name{font-size:17px;font-weight:800;line-height:1.25}
        .brand-name small{display:block;color:var(--muted);font-size:10px;letter-spacing:0;line-height:1.3;font-weight:600}
        .nav{display:flex;align-items:center;gap:30px}
        .nav a{height:76px;display:flex;align-items:center;font-size:14px;font-weight:700;position:relative}
        .nav a::after{content:"";position:absolute;bottom:0;left:0;width:0;height:3px;background:var(--orange);transition:width .2s ease}
        .nav a:hover,.nav a.active{color:var(--orange-dark)}
        .nav a:hover::after,.nav a.active::after{width:100%}
        .nav-cta{padding:9px 16px;border:1px solid var(--ink);font-size:13px!important;height:auto!important}
        .nav-cta::after{display:none}
        .nav-cta:hover{background:var(--ink);color:var(--white)!important}
        .menu-toggle{display:none;border:1px solid var(--line);background:transparent;width:44px;height:44px;color:var(--ink);font-size:20px}
        .hero{min-height:650px;display:flex;align-items:center;position:relative;overflow:hidden;background:var(--paper-deep)}
        .hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(246,243,237,.98) 0%,rgba(246,243,237,.88) 45%,rgba(246,243,237,.28) 100%);z-index:1}
        .hero-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:.82}
        .hero-content{position:relative;z-index:2;width:58%;padding:92px 0 110px}
        .eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--orange-dark);font-size:13px;font-weight:800;letter-spacing:0;margin-bottom:20px}
        .eyebrow::before{content:"";width:28px;height:2px;background:var(--orange)}
        h1,h2,h3,p{margin-top:0}
        h1{font-size:clamp(42px,5.6vw,76px);line-height:1.16;letter-spacing:0;font-weight:900;margin-bottom:24px;max-width:720px}
        .hero-copy{max-width:610px;color:#4f5a55;font-size:18px;line-height:1.9;margin-bottom:34px}
        .actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
        .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:46px;padding:10px 20px;border-radius:6px;border:1px solid transparent;font-weight:800;font-size:14px}
        .btn-primary{background:var(--orange);color:#fff}
        .btn-primary:hover{background:var(--orange-dark);transform:translateY(-2px);box-shadow:0 8px 16px rgba(200,91,60,.2)}
        .btn-secondary{border-color:var(--green);color:var(--green-dark);background:transparent}
        .btn-secondary:hover{background:var(--green);color:#fff}
        .btn:focus,.nav a:focus,.menu-toggle:focus,summary:focus,input:focus,textarea:focus{outline:3px solid rgba(200,91,60,.3);outline-offset:3px}
        .hero-note{position:absolute;bottom:30px;right:0;z-index:2;color:var(--green-dark);font-size:12px;font-weight:800;writing-mode:vertical-rl;letter-spacing:0}
        .index-strip{border-bottom:1px solid var(--line);background:var(--white)}
        .index-inner{min-height:100px;display:flex;align-items:center;justify-content:space-between;gap:30px}
        .index-title{font-size:13px;font-weight:900;color:var(--orange-dark);white-space:nowrap}
        .index-items{display:flex;justify-content:flex-end;gap:38px;flex-wrap:wrap}
        .index-item{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13px}
        .index-item b{color:var(--ink);font-size:17px}
        .section{padding:104px 0}
        .section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:48px}
        .section-kicker{font-size:12px;color:var(--orange-dark);font-weight:900;letter-spacing:0;margin-bottom:10px}
        h2{font-size:clamp(30px,4vw,48px);line-height:1.28;margin-bottom:0;font-weight:900}
        .section-intro{max-width:470px;color:var(--muted);margin-bottom:3px}
        .story-grid{display:grid;grid-template-columns:4fr 7fr;gap:76px}
        .story-label{border-left:4px solid var(--orange);padding-left:20px;font-size:20px;font-weight:900;line-height:1.5}
        .story-label span{display:block;font-size:13px;color:var(--muted);font-weight:500;margin-top:14px}
        .number-list{border-top:1px solid var(--line)}
        .number-item{display:grid;grid-template-columns:55px 1fr auto;gap:20px;align-items:start;padding:24px 0;border-bottom:1px solid var(--line)}
        .number{font-size:13px;color:var(--orange);font-weight:900}
        .number-item h3{font-size:20px;margin-bottom:4px}
        .number-item p{color:var(--muted);font-size:14px;margin-bottom:0}
        .text-link{color:var(--green-dark);font-weight:800;font-size:13px;white-space:nowrap;padding-top:4px}
        .text-link:hover{color:var(--orange-dark)}
        .feature-band{background:var(--green-dark);color:#f8f5ee;padding:96px 0}
        .feature-layout{display:grid;grid-template-columns:1.5fr 1fr;gap:42px;align-items:stretch}
        .feature-main{min-height:390px;position:relative;overflow:hidden;background:#294740}
        .feature-main img{width:100%;height:100%;object-fit:cover;opacity:.58}
        .feature-main-content{position:absolute;left:34px;right:34px;bottom:30px}
        .feature-main h3{font-size:32px;line-height:1.35;margin:10px 0}
        .feature-main p{color:#d7e0db;max-width:560px}
        .tag{display:inline-block;padding:4px 9px;border:1px solid currentColor;border-radius:4px;font-size:11px;font-weight:800;line-height:1.4}
        .feature-side{display:flex;flex-direction:column;border-top:1px solid rgba(255,255,255,.3)}
        .side-link{display:grid;grid-template-columns:1fr 25px;gap:18px;padding:22px 0;border-bottom:1px solid rgba(255,255,255,.3)}
        .side-link h3{font-size:18px;margin:0 0 5px}
        .side-link p{font-size:13px;color:#b9c9c2;margin:0}
        .side-arrow{font-size:22px;color:#e5aa87}
        .side-link:hover h3{color:#e5aa87}
        .latest-section{background:var(--white)}
        .latest-layout{display:grid;grid-template-columns:2fr 7fr;gap:78px}
        .latest-aside{border-top:3px solid var(--orange);padding-top:16px}
        .latest-aside h2{font-size:32px}
        .latest-aside p{font-size:14px;color:var(--muted);margin-top:18px}
        .latest-list{border-top:1px solid var(--line)}
        .latest-item{display:grid;grid-template-columns:92px 1fr auto;gap:25px;padding:23px 0;border-bottom:1px solid var(--line);align-items:start}
        .latest-date{font-size:12px;color:var(--green);font-weight:800;padding-top:5px}
        .latest-content h3{font-size:19px;margin-bottom:5px;line-height:1.5}
        .latest-content p{font-size:14px;color:var(--muted);margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
        .latest-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px}
        .latest-meta .tag{color:var(--orange-dark);border-color:var(--line)}
        .latest-item:hover .latest-content h3{color:var(--orange-dark)}
        .empty-state{padding:28px 0;border-bottom:1px solid var(--line);color:var(--muted)}
        .faq-wrap{max-width:900px;margin:0 auto;border-top:1px solid var(--line)}
        details{border-bottom:1px solid var(--line)}
        summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:23px 0;font-size:17px;font-weight:800}
        summary::-webkit-details-marker{display:none}
        summary::after{content:"+";font-size:24px;color:var(--orange);font-weight:400}
        details[open] summary::after{content:"−"}
        details p{max-width:760px;color:var(--muted);font-size:14px;padding:0 45px 24px 0;margin:0}
        .cta-band{background:var(--orange);color:#fff;padding:68px 0}
        .cta-inner{display:flex;align-items:center;justify-content:space-between;gap:35px}
        .cta-inner h2{font-size:36px;max-width:640px}
        .cta-inner p{color:#f8ded5;margin:9px 0 0;max-width:600px}
        .cta-band .btn-primary{background:#fff;color:var(--orange-dark)}
        .cta-band .btn-primary:hover{background:#fff4ee}
        .site-footer{background:#202522;color:#e9e7df;padding:58px 0 25px}
        .footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:50px;padding-bottom:48px}
        .footer-brand{font-size:20px;font-weight:900;margin-bottom:12px}
        .footer-copy{color:#aeb7b1;font-size:13px;max-width:310px}
        .footer-title{font-size:13px;color:#e4a488;margin-bottom:15px;font-weight:900}
        .footer-links{display:flex;flex-direction:column;gap:8px}
        .footer-links a{color:#b5bdb8;font-size:13px}
        .footer-links a:hover{color:#fff}
        .copyright{border-top:1px solid #3b433f;padding-top:20px;color:#89938d;font-size:12px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
        @media(max-width:992px){
            .nav{gap:18px}.brand{min-width:210px}
            .hero-content{width:70%}
            .story-grid,.latest-layout{grid-template-columns:1fr;gap:35px}
            .latest-aside{max-width:500px}
            .feature-layout{grid-template-columns:1fr}
            .feature-main{min-height:350px}
            .footer-grid{grid-template-columns:2fr 1fr 1fr}
        }
        @media(max-width:768px){
            .container{width:min(100% - 36px,var(--container))}
            .site-header{height:68px}
            .nav{display:none;position:absolute;top:68px;left:0;right:0;padding:10px 18px 18px;background:var(--paper);border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:0}
            .nav.open{display:flex}
            .nav a{height:48px;border-bottom:1px solid var(--line)}
            .nav a::after{display:none}.nav-cta{margin-top:10px;text-align:center;justify-content:center}
            .menu-toggle{display:block}
            .brand{min-width:0}.brand-name{font-size:15px}
            .hero{min-height:610px;align-items:flex-end}
            .hero::before{background:linear-gradient(0deg,rgba(246,243,237,.98) 5%,rgba(246,243,237,.7) 58%,rgba(246,243,237,.15) 100%)}
            .hero-content{width:100%;padding:100px 0 80px}
            h1{font-size:clamp(38px,11vw,58px)}
            .hero-copy{font-size:16px}
            .hero-note{display:none}
            .index-inner{display:block;padding:22px 0}
            .index-items{justify-content:flex-start;gap:12px 24px;margin-top:12px}
            .section{padding:68px 0}
            .section-head{display:block;margin-bottom:32px}
            .section-intro{margin-top:16px}
            .number-item{grid-template-columns:38px 1fr;gap:12px}
            .number-item .text-link{grid-column:2}
            .latest-item{grid-template-columns:1fr;gap:4px}
            .latest-date{padding:0}
            .cta-inner{display:block}
            .cta-inner .actions{margin-top:26px}
            .footer-grid{grid-template-columns:1fr 1fr;gap:35px}
            .footer-grid>div:first-child{grid-column:1/-1}
        }
        @media(max-width:480px){
            .container{width:calc(100% - 30px)}
            .brand-mark{width:31px;height:31px;font-size:11px}
            .hero-content{padding-bottom:62px}
            .actions .btn{width:100%}
            .feature-band{padding:68px 0}
            .feature-main{min-height:390px}
            .feature-main-content{left:22px;right:22px}
            .feature-main h3{font-size:25px}
            .footer-grid{grid-template-columns:1fr}
            .footer-grid>div:first-child{grid-column:auto}
            .copyright{display:block}.copyright span{display:block;margin-top:6px}
        }

/* roulang page: category1 */
:root{
            --paper:#f6f3ed;
            --paper-deep:#ece8df;
            --ink:#202522;
            --muted:#68716d;
            --line:#d9d5cc;
            --orange:#c85b3c;
            --orange-dark:#a9442d;
            --green:#52716b;
            --green-dark:#365851;
            --white:#fffdf9;
            --soft-green:#e4ebe6;
            --soft-orange:#f2ded5;
            --radius:8px;
            --shadow:0 12px 30px rgba(32,37,34,.08);
            --container:1200px;
        }

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

        html{
            scroll-behavior:smooth;
        }

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

        body.nav-open{
            overflow:hidden;
        }

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

        h1,
        h2,
        h3,
        h4{
            color:var(--ink);
            font-weight:850;
            line-height:1.3;
        }

        h1{
            font-size:clamp(42px,5vw,72px);
            letter-spacing:0;
        }

        h2{
            font-size:clamp(30px,3.4vw,48px);
        }

        h3{
            font-size:22px;
        }

        p{
            color:var(--muted);
        }

        a{
            color:inherit;
            text-decoration:none;
            transition:color .2s ease,background .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease;
        }

        a:hover{
            color:var(--orange-dark);
        }

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

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

        button{
            cursor:pointer;
        }

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

        .site-header{
            height:76px;
            border-bottom:1px solid var(--line);
            background:rgba(246,243,237,.96);
            position:sticky;
            top:0;
            z-index:20;
        }

        .nav-wrap{
            height:100%;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:28px;
        }

        .brand{
            display:flex;
            align-items:center;
            gap:12px;
            min-width:230px;
        }

        .brand-mark{
            width:35px;
            height:35px;
            border:2px solid var(--orange);
            color:var(--orange);
            display:grid;
            place-items:center;
            font-size:13px;
            font-weight:800;
            line-height:1;
            transform:rotate(-4deg);
            flex:0 0 auto;
        }

        .brand-name{
            font-size:17px;
            font-weight:800;
            line-height:1.25;
            white-space:nowrap;
        }

        .brand-name small{
            display:block;
            color:var(--muted);
            font-size:10px;
            letter-spacing:0;
            line-height:1.3;
            font-weight:600;
        }

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

        .nav a{
            height:76px;
            display:flex;
            align-items:center;
            font-size:14px;
            font-weight:700;
            position:relative;
            white-space:nowrap;
        }

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

        .nav a:hover,
        .nav a.active{
            color:var(--orange-dark);
        }

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

        .nav .nav-cta{
            padding:9px 16px;
            border:1px solid var(--ink);
            font-size:13px!important;
            height:auto!important;
        }

        .nav .nav-cta::after{
            display:none;
        }

        .nav .nav-cta:hover{
            background:var(--ink);
            color:var(--white)!important;
        }

        .menu-toggle{
            display:none;
            border:1px solid var(--line);
            background:transparent;
            width:44px;
            height:44px;
            color:var(--ink);
            font-size:20px;
            line-height:1;
        }

        .menu-toggle:hover{
            border-color:var(--orange);
            color:var(--orange-dark);
        }

        .menu-icon{
            display:block;
            width:19px;
            height:14px;
            margin:auto;
            position:relative;
            border-top:2px solid currentColor;
            border-bottom:2px solid currentColor;
        }

        .menu-icon::after{
            content:"";
            position:absolute;
            top:4px;
            left:0;
            width:100%;
            height:2px;
            background:currentColor;
        }

        .category-hero{
            min-height:510px;
            position:relative;
            overflow:hidden;
            background:var(--paper-deep);
            display:flex;
            align-items:center;
        }

        .category-hero::before{
            content:"";
            position:absolute;
            inset:0 auto 0 0;
            width:62%;
            background:rgba(246,243,237,.94);
            z-index:1;
        }

        .category-hero-image{
            position:absolute;
            inset:0;
            width:100%;
            height:100%;
            object-fit:cover;
            object-position:center;
            opacity:.86;
        }

        .category-hero-inner{
            position:relative;
            z-index:2;
            width:100%;
            padding:68px 0 72px;
        }

        .category-hero-grid{
            display:grid;
            grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);
            align-items:center;
            gap:70px;
        }

        .breadcrumb{
            display:flex;
            align-items:center;
            flex-wrap:wrap;
            gap:9px;
            margin-bottom:26px;
            color:var(--muted);
            font-size:13px;
        }

        .breadcrumb a{
            color:var(--green-dark);
            font-weight:750;
        }

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

        .breadcrumb-separator{
            color:#9ba39d;
        }

        .eyebrow,
        .section-kicker{
            display:inline-flex;
            align-items:center;
            gap:10px;
            color:var(--orange-dark);
            font-size:13px;
            font-weight:850;
            line-height:1.4;
        }

        .eyebrow{
            margin-bottom:18px;
        }

        .eyebrow::before,
        .section-kicker::before{
            content:"";
            width:28px;
            height:2px;
            flex:0 0 auto;
            background:var(--orange);
        }

        .category-hero h1{
            max-width:660px;
            margin-bottom:22px;
        }

        .category-hero-copy{
            max-width:600px;
            color:#4f5a55;
            font-size:18px;
            line-height:1.9;
            margin-bottom:30px;
        }

        .hero-actions{
            display:flex;
            align-items:center;
            flex-wrap:wrap;
            gap:12px;
        }

        .btn{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:9px;
            min-height:46px;
            padding:10px 20px;
            border-radius:6px;
            border:1px solid transparent;
            font-weight:800;
            font-size:14px;
            line-height:1.4;
        }

        .btn-primary{
            background:var(--orange);
            color:#fff;
        }

        .btn-primary:hover{
            background:var(--orange-dark);
            color:#fff;
            transform:translateY(-2px);
            box-shadow:0 8px 16px rgba(200,91,60,.2);
        }

        .btn-secondary{
            border-color:var(--green);
            color:var(--green-dark);
            background:transparent;
        }

        .btn-secondary:hover{
            background:var(--green);
            color:#fff;
            transform:translateY(-2px);
        }

        .btn-arrow{
            font-size:18px;
            line-height:1;
        }

        .btn:focus,
        .nav a:focus,
        .menu-toggle:focus,
        summary:focus,
        input:focus,
        textarea:focus,
        select:focus{
            outline:3px solid rgba(200,91,60,.3);
            outline-offset:3px;
        }

        .category-hero-visual{
            min-height:315px;
            position:relative;
            overflow:hidden;
            border:1px solid rgba(255,253,249,.65);
            background:var(--green-dark);
            box-shadow:var(--shadow);
        }

        .category-hero-visual img{
            width:100%;
            height:100%;
            min-height:315px;
            object-fit:cover;
            opacity:.78;
        }

        .visual-caption{
            position:absolute;
            left:22px;
            right:22px;
            bottom:20px;
            display:flex;
            align-items:flex-end;
            justify-content:space-between;
            gap:20px;
            color:var(--white);
        }

        .visual-caption strong{
            display:block;
            font-size:18px;
            line-height:1.4;
        }

        .visual-caption span{
            color:#dce6df;
            font-size:12px;
            white-space:nowrap;
        }

        .index-band{
            padding:22px 0;
            background:var(--white);
            border-bottom:1px solid var(--line);
        }

        .index-layout{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:30px;
        }

        .index-title{
            color:var(--orange-dark);
            font-size:13px;
            font-weight:900;
            white-space:nowrap;
        }

        .index-items{
            display:flex;
            justify-content:flex-end;
            gap:38px;
            flex-wrap:wrap;
        }

        .index-item{
            display:flex;
            align-items:center;
            gap:10px;
            color:var(--muted);
            font-size:13px;
        }

        .index-item b{
            color:var(--ink);
            font-size:17px;
        }

        .section{
            padding:104px 0;
        }

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

        .section-head h2{
            margin-top:10px;
        }

        .section-intro{
            max-width:470px;
            color:var(--muted);
            margin-bottom:3px;
        }

        .intro-layout{
            display:grid;
            grid-template-columns:minmax(0,7fr) minmax(280px,4fr);
            gap:90px;
            align-items:start;
        }

        .intro-copy{
            max-width:760px;
        }

        .intro-copy > p{
            font-size:18px;
            line-height:1.95;
            margin-bottom:20px;
        }

        .intro-copy > p:last-child{
            margin-bottom:0;
        }

        .quote-panel{
            padding:28px 28px 30px;
            background:var(--soft-green);
            border-left:4px solid var(--green);
        }

        .quote-panel .quote-label{
            display:block;
            margin-bottom:18px;
            color:var(--green-dark);
            font-size:12px;
            font-weight:850;
        }

        .quote-panel blockquote{
            color:var(--ink);
            font-size:24px;
            font-weight:800;
            line-height:1.55;
        }

        .quote-panel p{
            margin-top:18px;
            font-size:13px;
            line-height:1.75;
        }

        .topic-section{
            background:var(--paper-deep);
        }

        .topic-index{
            border-top:1px solid var(--line);
        }

        .topic-row{
            display:grid;
            grid-template-columns:74px minmax(190px,2fr) minmax(260px,4fr) auto;
            gap:24px;
            align-items:center;
            padding:27px 0;
            border-bottom:1px solid var(--line);
        }

        .topic-number{
            color:var(--orange);
            font-size:16px;
            font-weight:900;
        }

        .topic-row h3{
            font-size:21px;
            margin:0;
        }

        .topic-row p{
            font-size:14px;
            line-height:1.8;
            margin:0;
        }

        .topic-row .text-link{
            justify-self:end;
        }

        .text-link{
            display:inline-flex;
            align-items:center;
            gap:8px;
            color:var(--green-dark);
            font-weight:850;
            font-size:13px;
            white-space:nowrap;
            padding-top:4px;
        }

        .text-link::after{
            content:"↗";
            font-size:16px;
            transition:transform .2s ease;
        }

        .text-link:hover{
            color:var(--orange-dark);
        }

        .text-link:hover::after{
            transform:translate(2px,-2px);
        }

        .reading-section{
            background:var(--white);
        }

        .reading-layout{
            display:grid;
            grid-template-columns:minmax(0,1.4fr) minmax(290px,.8fr);
            gap:45px;
            align-items:stretch;
        }

        .reading-feature{
            min-height:385px;
            position:relative;
            overflow:hidden;
            background:var(--green-dark);
        }

        .reading-feature img{
            width:100%;
            height:100%;
            min-height:385px;
            object-fit:cover;
            opacity:.64;
            transition:transform .45s ease,opacity .45s ease;
        }

        .reading-feature:hover img{
            transform:scale(1.03);
            opacity:.76;
        }

        .reading-feature-content{
            position:absolute;
            left:32px;
            right:32px;
            bottom:28px;
            color:var(--white);
        }

        .tag{
            display:inline-block;
            padding:4px 9px;
            border:1px solid currentColor;
            border-radius:4px;
            font-size:11px;
            font-weight:800;
            line-height:1.4;
        }

        .reading-feature .tag{
            color:#f2c3af;
        }

        .reading-feature h3{
            max-width:560px;
            color:var(--white);
            font-size:31px;
            line-height:1.4;
            margin:12px 0 10px;
        }

        .reading-feature p{
            max-width:570px;
            color:#d7e0db;
            font-size:14px;
            line-height:1.8;
        }

        .reading-side{
            display:flex;
            flex-direction:column;
            border-top:1px solid var(--line);
        }

        .reading-item{
            display:block;
            flex:1;
            padding:24px 0 22px;
            border-bottom:1px solid var(--line);
        }

        .reading-item-top{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:16px;
            margin-bottom:10px;
        }

        .reading-item .tag{
            color:var(--orange-dark);
            border-color:var(--line);
        }

        .reading-item time{
            color:var(--muted);
            font-size:12px;
            white-space:nowrap;
        }

        .reading-item h3{
            font-size:20px;
            line-height:1.5;
            margin-bottom:7px;
        }

        .reading-item p{
            font-size:14px;
            line-height:1.75;
        }

        .reading-item:hover h3{
            color:var(--orange-dark);
        }

        .reading-item:hover .side-arrow{
            color:var(--orange);
            transform:translateX(3px);
        }

        .side-arrow{
            display:inline-block;
            color:var(--green);
            font-size:22px;
            line-height:1;
            transition:transform .2s ease,color .2s ease;
        }

        .latest-section{
            background:var(--paper);
        }

        .latest-layout{
            display:grid;
            grid-template-columns:minmax(210px,2.4fr) minmax(0,7fr);
            gap:78px;
        }

        .latest-aside p{
            max-width:250px;
            font-size:14px;
            margin-top:16px;
        }

        .latest-aside .tagline{
            display:inline-block;
            color:var(--green-dark);
            font-size:12px;
            font-weight:850;
            margin-top:34px;
            padding-top:12px;
            border-top:2px solid var(--orange);
        }

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

        .latest-item{
            display:grid;
            grid-template-columns:92px minmax(0,1fr) auto;
            gap:25px;
            padding:23px 0;
            border-bottom:1px solid var(--line);
            align-items:start;
        }

        .latest-date{
            color:var(--orange-dark);
            font-size:13px;
            font-weight:800;
            line-height:1.5;
        }

        .latest-content h3{
            font-size:19px;
            line-height:1.5;
            margin-bottom:5px;
            transition:color .2s ease;
        }

        .latest-content p{
            font-size:14px;
            line-height:1.75;
            margin:0;
        }

        .latest-meta{
            display:flex;
            gap:8px;
            align-items:center;
            flex-wrap:wrap;
            margin-top:10px;
        }

        .latest-meta .tag{
            color:var(--orange-dark);
            border-color:var(--line);
        }

        .latest-item:hover .latest-content h3{
            color:var(--orange-dark);
        }

        .latest-item .text-link{
            align-self:center;
        }

        .faq-section{
            background:var(--paper-deep);
        }

        .faq-wrap{
            max-width:900px;
            margin:0 auto;
            border-top:1px solid var(--line);
        }

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

        .faq-item summary{
            list-style:none;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:26px;
            padding:23px 0;
            color:var(--ink);
            font-size:18px;
            font-weight:800;
            cursor:pointer;
        }

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

        .faq-question{
            display:flex;
            align-items:flex-start;
            gap:16px;
        }

        .faq-question em{
            color:var(--orange);
            font-size:13px;
            font-style:normal;
            font-weight:900;
            padding-top:4px;
        }

        .faq-icon{
            position:relative;
            width:25px;
            height:25px;
            flex:0 0 25px;
            border:1px solid var(--green);
            border-radius:50%;
        }

        .faq-icon::before,
        .faq-icon::after{
            content:"";
            position:absolute;
            left:6px;
            top:11px;
            width:11px;
            height:1px;
            background:var(--green-dark);
            transition:transform .2s ease;
        }

        .faq-icon::after{
            transform:rotate(90deg);
        }

        .faq-item[open] .faq-icon{
            background:var(--green);
        }

        .faq-item[open] .faq-icon::before,
        .faq-item[open] .faq-icon::after{
            background:var(--white);
        }

        .faq-item[open] .faq-icon::after{
            transform:rotate(0deg);
        }

        .faq-answer{
            max-width:740px;
            padding:0 55px 25px 42px;
            color:var(--muted);
            font-size:15px;
            line-height:1.9;
        }

        .cta-section{
            padding:76px 0;
            background:var(--orange);
            color:#fff9f3;
        }

        .cta-layout{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:40px;
        }

        .cta-section h2{
            max-width:650px;
            color:#fff9f3;
            font-size:clamp(29px,3.5vw,46px);
        }

        .cta-section p{
            max-width:600px;
            margin-top:12px;
            color:#fbe4d9;
            font-size:15px;
        }

        .cta-actions{
            display:flex;
            align-items:center;
            flex-wrap:wrap;
            gap:12px;
            flex:0 0 auto;
        }

        .cta-section .btn-primary{
            color:var(--orange-dark);
            background:var(--white);
        }

        .cta-section .btn-primary:hover{
            background:#fff;
            color:var(--orange-dark);
            box-shadow:0 8px 16px rgba(81,35,24,.18);
        }

        .cta-section .btn-secondary{
            border-color:#f7d8c9;
            color:var(--white);
        }

        .cta-section .btn-secondary:hover{
            background:var(--white);
            color:var(--orange-dark);
        }

        .site-footer{
            padding:68px 0 24px;
            background:var(--ink);
            color:#e9e4da;
        }

        .footer-grid{
            display:grid;
            grid-template-columns:2.1fr 1fr 1.25fr 1.1fr;
            gap:40px;
            padding-bottom:53px;
        }

        .footer-brand{
            color:#fffdf9;
            font-size:19px;
            font-weight:850;
            line-height:1.45;
        }

        .footer-copy{
            max-width:330px;
            margin-top:15px;
            color:#aeb8b1;
            font-size:13px;
            line-height:1.8;
        }

        .footer-title{
            margin-bottom:13px;
            color:#f5eee4;
            font-size:13px;
            font-weight:850;
        }

        .footer-links{
            display:flex;
            flex-direction:column;
            align-items:flex-start;
            gap:7px;
        }

        .footer-links a{
            color:#aeb8b1;
            font-size:13px;
            line-height:1.7;
        }

        .footer-links a:hover{
            color:#f2b49c;
            transform:translateX(2px);
        }

        .copyright{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:24px;
            padding-top:20px;
            border-top:1px solid rgba(255,255,255,.15);
            color:#8e9a93;
            font-size:12px;
        }

        .back-to-top{
            position:fixed;
            right:24px;
            bottom:24px;
            width:42px;
            height:42px;
            display:grid;
            place-items:center;
            border:1px solid var(--line);
            border-radius:50%;
            background:var(--white);
            color:var(--green-dark);
            font-size:18px;
            opacity:0;
            visibility:hidden;
            transform:translateY(8px);
            transition:opacity .2s ease,visibility .2s ease,transform .2s ease,background .2s ease;
            z-index:12;
        }

        .back-to-top.visible{
            opacity:1;
            visibility:visible;
            transform:translateY(0);
        }

        .back-to-top:hover{
            background:var(--green);
            color:var(--white);
            border-color:var(--green);
        }

        .sr-only{
            position:absolute;
            width:1px;
            height:1px;
            padding:0;
            margin:-1px;
            overflow:hidden;
            clip:rect(0,0,0,0);
            white-space:nowrap;
            border:0;
        }

        @media (max-width:1200px){
            .category-hero-grid{
                gap:46px;
            }

            .intro-layout{
                gap:55px;
            }

            .latest-layout{
                gap:48px;
            }
        }

        @media (max-width:992px){
            .container{
                width:min(var(--container),calc(100% - 40px));
            }

            .site-header,
            .nav a{
                height:70px;
            }

            .brand{
                min-width:0;
            }

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

            .nav{
                gap:17px;
            }

            .nav a{
                font-size:13px;
            }

            .category-hero{
                min-height:470px;
            }

            .category-hero::before{
                width:70%;
            }

            .category-hero-grid{
                grid-template-columns:minmax(0,1.1fr) minmax(270px,.9fr);
                gap:32px;
            }

            .category-hero-copy{
                font-size:16px;
            }

            .section{
                padding:82px 0;
            }

            .intro-layout{
                grid-template-columns:1fr;
                gap:35px;
            }

            .quote-panel{
                max-width:520px;
            }

            .topic-row{
                grid-template-columns:58px minmax(170px,2fr) minmax(220px,3fr) auto;
                gap:17px;
            }

            .reading-layout{
                gap:30px;
            }

            .latest-layout{
                grid-template-columns:1fr;
                gap:35px;
            }

            .latest-aside p{
                max-width:520px;
            }

            .latest-aside .tagline{
                margin-top:20px;
            }

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

            .footer-grid > div:first-child{
                grid-column:1 / -1;
            }
        }

        @media (max-width:768px){
            .container{
                width:min(var(--container),calc(100% - 32px));
            }

            .site-header{
                height:68px;
            }

            .nav-wrap{
                position:relative;
            }

            .menu-toggle{
                display:block;
                flex:0 0 44px;
            }

            .nav{
                display:none;
                position:fixed;
                top:68px;
                left:0;
                right:0;
                bottom:0;
                height:auto;
                padding:14px 16px 28px;
                align-items:stretch;
                flex-direction:column;
                gap:0;
                background:var(--paper);
                border-top:1px solid var(--line);
                overflow:auto;
            }

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

            .nav a{
                height:auto;
                min-height:52px;
                padding:13px 8px;
                border-bottom:1px solid var(--line);
                font-size:15px;
            }

            .nav a::after{
                bottom:0;
                height:2px;
            }

            .nav .nav-cta{
                justify-content:center;
                margin-top:16px;
                border-color:var(--ink);
                min-height:46px;
            }

            .category-hero{
                min-height:0;
            }

            .category-hero::before{
                width:100%;
                background:rgba(246,243,237,.9);
            }

            .category-hero-image{
                opacity:.52;
            }

            .category-hero-inner{
                padding:48px 0 56px;
            }

            .category-hero-grid{
                display:block;
            }

            .category-hero h1{
                max-width:640px;
                font-size:clamp(38px,9vw,56px);
            }

            .category-hero-copy{
                max-width:660px;
                font-size:16px;
                line-height:1.85;
            }

            .category-hero-visual{
                max-width:570px;
                min-height:240px;
                margin-top:42px;
            }

            .category-hero-visual img{
                min-height:240px;
            }

            .index-layout{
                display:block;
            }

            .index-items{
                justify-content:flex-start;
                gap:12px 25px;
                margin-top:12px;
            }

            .section{
                padding:66px 0;
            }

            .section-head{
                display:block;
                margin-bottom:32px;
            }

            .section-intro{
                max-width:620px;
                margin-top:15px;
            }

            .topic-row{
                grid-template-columns:44px 1fr auto;
                gap:14px;
            }

            .topic-row p{
                grid-column:2 / -1;
                grid-row:2;
            }

            .topic-row .text-link{
                grid-column:3;
                grid-row:1;
            }

            .reading-layout{
                display:block;
            }

            .reading-feature{
                min-height:330px;
            }

            .reading-feature img{
                min-height:330px;
            }

            .reading-side{
                margin-top:25px;
            }

            .reading-item{
                padding:21px 0;
            }

            .latest-item{
                grid-template-columns:78px minmax(0,1fr);
                gap:16px;
            }

            .latest-item .text-link{
                grid-column:2;
                justify-self:start;
                padding-top:5px;
            }

            .faq-item summary{
                font-size:16px;
                gap:15px;
            }

            .faq-answer{
                padding:0 40px 22px 35px;
                font-size:14px;
            }

            .cta-layout{
                display:block;
            }

            .cta-actions{
                margin-top:26px;
            }

            .footer-grid{
                grid-template-columns:1fr 1fr;
                gap:32px 25px;
            }

            .footer-grid > div:first-child{
                grid-column:1 / -1;
            }

            .copyright{
                display:block;
            }

            .copyright span{
                display:block;
                margin-bottom:6px;
            }
        }

        @media (max-width:520px){
            h2{
                font-size:31px;
            }

            .brand-name{
                font-size:14px;
            }

            .brand-name small{
                font-size:9px;
            }

            .category-hero-inner{
                padding:38px 0 44px;
            }

            .breadcrumb{
                margin-bottom:19px;
                font-size:12px;
            }

            .category-hero h1{
                font-size:37px;
                line-height:1.35;
            }

            .category-hero-copy{
                font-size:15px;
                line-height:1.8;
                margin-bottom:24px;
            }

            .hero-actions{
                align-items:stretch;
                flex-direction:column;
                max-width:270px;
            }

            .hero-actions .btn{
                width:100%;
            }

            .category-hero-visual{
                min-height:190px;
                margin-top:32px;
            }

            .category-hero-visual img{
                min-height:190px;
            }

            .visual-caption{
                left:16px;
                right:16px;
                bottom:15px;
            }

            .visual-caption strong{
                font-size:16px;
            }

            .visual-caption span{
                font-size:11px;
            }

            .section{
                padding:54px 0;
            }

            .intro-copy > p{
                font-size:16px;
                line-height:1.85;
            }

            .quote-panel{
                padding:22px 20px 24px;
            }

            .quote-panel blockquote{
                font-size:21px;
            }

            .topic-row{
                grid-template-columns:36px 1fr;
                gap:7px 12px;
                padding:22px 0;
            }

            .topic-row h3{
                font-size:18px;
            }

            .topic-row p{
                grid-column:2;
                font-size:13px;
                line-height:1.7;
            }

            .topic-row .text-link{
                grid-column:2;
                grid-row:3;
                justify-self:start;
                padding-top:2px;
            }

            .reading-feature,
            .reading-feature img{
                min-height:290px;
            }

            .reading-feature-content{
                left:20px;
                right:20px;
                bottom:20px;
            }

            .reading-feature h3{
                font-size:24px;
            }

            .reading-feature p{
                font-size:13px;
            }

            .latest-item{
                display:block;
                padding:21px 0;
            }

            .latest-date{
                display:block;
                margin-bottom:7px;
            }

            .latest-content h3{
                font-size:18px;
            }

            .latest-item .text-link{
                margin-top:7px;
            }

            .faq-question{
                gap:10px;
            }

            .faq-question em{
                font-size:12px;
            }

            .faq-answer{
                padding:0 0 20px 29px;
            }

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

            .cta-section h2{
                font-size:30px;
            }

            .cta-actions{
                align-items:stretch;
                flex-direction:column;
                max-width:270px;
            }

            .cta-actions .btn{
                width:100%;
            }

            .site-footer{
                padding-top:52px;
            }

            .footer-grid{
                grid-template-columns:1fr;
                gap:27px;
            }

            .footer-grid > div:first-child{
                grid-column:auto;
            }

            .back-to-top{
                right:16px;
                bottom:16px;
            }
        }

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

            .brand{
                gap:9px;
            }

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

            .brand-name{
                max-width:205px;
                overflow:hidden;
                text-overflow:ellipsis;
            }

            .index-items{
                gap:9px 18px;
            }

            .index-item{
                font-size:12px;
            }
        }

        @media (prefers-reduced-motion:reduce){
            html{
                scroll-behavior:auto;
            }

            *,
            *::before,
            *::after{
                transition-duration:.01ms!important;
                animation-duration:.01ms!important;
            }
        }

/* roulang page: article */
:root {
            --paper: #f6f3ed;
            --paper-deep: #ece8df;
            --ink: #202522;
            --muted: #68716d;
            --muted-deep: #4f5a55;
            --line: #d9d5cc;
            --orange: #c85b3c;
            --orange-dark: #a9442d;
            --orange-soft: #f3ddd3;
            --green: #52716b;
            --green-dark: #365851;
            --green-soft: #dfe8e3;
            --white: #fffdf9;
            --radius: 8px;
            --shadow: 0 12px 30px rgba(32, 37, 34, .08);
            --shadow-small: 0 6px 18px rgba(32, 37, 34, .06);
            --container: 1200px;
        }

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

        html {
            scroll-behavior: smooth;
        }

        body {
            margin: 0;
            min-width: 320px;
            color: var(--ink);
            background: var(--paper);
            font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
            font-size: 16px;
            line-height: 1.75;
            -webkit-font-smoothing: antialiased;
            text-rendering: optimizeLegibility;
        }

        ::selection {
            color: #fff;
            background: var(--orange);
        }

        a {
            color: inherit;
            text-decoration: none;
            transition: color .2s ease, background-color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
        }

        a:hover {
            color: var(--orange-dark);
        }

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

        button,
        input,
        textarea {
            font: inherit;
        }

        button {
            cursor: pointer;
        }

        button:disabled {
            cursor: not-allowed;
            opacity: .55;
        }

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

        .site-header {
            position: sticky;
            top: 0;
            z-index: 20;
            height: 76px;
            border-bottom: 1px solid var(--line);
            background: rgba(246, 243, 237, .97);
        }

        .nav-wrap {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 28px;
            height: 100%;
        }

        .brand {
            display: flex;
            align-items: center;
            flex: 0 0 auto;
            gap: 12px;
            min-width: 230px;
        }

        .brand-mark {
            display: grid;
            place-items: center;
            width: 35px;
            height: 35px;
            border: 2px solid var(--orange);
            color: var(--orange);
            font-size: 13px;
            font-weight: 800;
            line-height: 1;
            transform: rotate(-4deg);
        }

        .brand-name {
            font-size: 17px;
            font-weight: 800;
            line-height: 1.25;
        }

        .brand-name small {
            display: block;
            color: var(--muted);
            font-size: 10px;
            font-weight: 600;
            line-height: 1.3;
        }

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

        .nav a {
            position: relative;
            display: flex;
            align-items: center;
            height: 76px;
            color: var(--ink);
            font-size: 14px;
            font-weight: 700;
            white-space: nowrap;
        }

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

        .nav a:hover,
        .nav a.active {
            color: var(--orange-dark);
        }

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

        .nav .nav-cta {
            height: auto;
            padding: 9px 16px;
            border: 1px solid var(--ink);
            font-size: 13px;
        }

        .nav .nav-cta::after {
            display: none;
        }

        .nav .nav-cta:hover {
            color: var(--white);
            background: var(--ink);
        }

        .menu-toggle {
            display: none;
            width: 44px;
            height: 44px;
            border: 1px solid var(--line);
            color: var(--ink);
            background: transparent;
            font-size: 20px;
            line-height: 1;
        }

        .menu-toggle:hover {
            border-color: var(--orange);
            color: var(--orange-dark);
            background: var(--white);
        }

        .menu-toggle span,
        .menu-toggle span::before,
        .menu-toggle span::after {
            display: block;
            width: 18px;
            height: 2px;
            margin: 0 auto;
            background: currentColor;
            content: "";
            transition: transform .2s ease, opacity .2s ease;
        }

        .menu-toggle span::before {
            transform: translateY(-6px);
        }

        .menu-toggle span::after {
            transform: translateY(4px);
        }

        .site-header.is-open .menu-toggle span {
            background: transparent;
        }

        .site-header.is-open .menu-toggle span::before {
            transform: translateY(1px) rotate(45deg);
        }

        .site-header.is-open .menu-toggle span::after {
            transform: translateY(-1px) rotate(-45deg);
        }

        .breadcrumb-bar {
            border-bottom: 1px solid var(--line);
            background: var(--paper);
        }

        .breadcrumb {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 10px;
            min-height: 54px;
            color: var(--muted);
            font-size: 13px;
        }

        .breadcrumb a {
            color: var(--green-dark);
            font-weight: 700;
        }

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

        .breadcrumb-current {
            max-width: 520px;
            overflow: hidden;
            color: var(--ink);
            font-weight: 700;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .breadcrumb-separator {
            color: var(--line);
            font-weight: 700;
        }

        .article-headband {
            padding: 72px 0 64px;
            background: var(--white);
        }

        .article-intro {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(360px, 470px);
            align-items: end;
            gap: 70px;
        }

        .article-kicker {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 22px;
            color: var(--orange-dark);
            font-size: 13px;
            font-weight: 900;
        }

        .article-kicker::before {
            width: 28px;
            height: 2px;
            background: var(--orange);
            content: "";
        }

        .article-title {
            max-width: 780px;
            margin: 0 0 22px;
            color: var(--ink);
            font-size: 52px;
            font-weight: 900;
            line-height: 1.25;
            overflow-wrap: anywhere;
        }

        .article-deck {
            max-width: 720px;
            margin: 0;
            color: var(--muted-deep);
            font-size: 18px;
            line-height: 1.9;
        }

        .article-meta {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 12px 22px;
            margin-top: 30px;
            color: var(--muted);
            font-size: 13px;
        }

        .article-meta-item {
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .meta-label {
            color: var(--orange-dark);
            font-size: 11px;
            font-weight: 900;
        }

        .article-meta strong {
            color: var(--ink);
            font-weight: 800;
        }

        .article-cover {
            position: relative;
            overflow: hidden;
            aspect-ratio: 4 / 3;
            margin: 0;
            border-radius: var(--radius);
            background: var(--paper-deep);
            box-shadow: var(--shadow);
        }

        .article-cover::after {
            position: absolute;
            inset: 0;
            border: 1px solid rgba(255, 255, 255, .35);
            border-radius: inherit;
            content: "";
            pointer-events: none;
        }

        .article-cover img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .cover-caption {
            position: absolute;
            right: 18px;
            bottom: 15px;
            left: 18px;
            color: #fffdf9;
            font-size: 12px;
            font-weight: 700;
            text-shadow: 0 1px 5px rgba(0, 0, 0, .35);
        }

        .article-signal {
            border-top: 1px solid var(--line);
            border-bottom: 1px solid var(--line);
            background: var(--paper);
        }

        .signal-inner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 25px;
            min-height: 68px;
        }

        .signal-label {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            color: var(--orange-dark);
            font-size: 12px;
            font-weight: 900;
            white-space: nowrap;
        }

        .signal-label::before {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--orange);
            content: "";
        }

        .signal-tags {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-end;
            gap: 8px;
        }

        .tag {
            display: inline-block;
            padding: 4px 9px;
            border: 1px solid currentColor;
            border-radius: 4px;
            font-size: 11px;
            font-weight: 800;
            line-height: 1.4;
        }

        .signal-tags .tag {
            color: var(--green-dark);
            border-color: var(--line);
            background: var(--white);
        }

        .article-reading {
            padding: 88px 0 96px;
            background: var(--paper);
        }

        .article-layout {
            display: grid;
            grid-template-columns: minmax(0, 810px) 250px;
            align-items: start;
            justify-content: space-between;
            gap: 70px;
        }

        .article-body {
            min-width: 0;
            color: #303834;
            font-size: 17px;
            line-height: 2;
            overflow-wrap: anywhere;
        }

        .article-body > :first-child {
            margin-top: 0;
        }

        .article-body h2 {
            margin: 48px 0 18px;
            color: var(--ink);
            font-size: 30px;
            font-weight: 900;
            line-height: 1.4;
        }

        .article-body h3 {
            margin: 34px 0 12px;
            color: var(--ink);
            font-size: 22px;
            font-weight: 900;
            line-height: 1.5;
        }

        .article-body p {
            margin: 0 0 22px;
        }

        .article-body strong {
            color: var(--ink);
            font-weight: 900;
        }

        .article-body a {
            color: var(--green-dark);
            text-decoration: underline;
            text-decoration-color: rgba(82, 113, 107, .45);
            text-underline-offset: 4px;
        }

        .article-body a:hover {
            color: var(--orange-dark);
            text-decoration-color: var(--orange);
        }

        .article-body ul,
        .article-body ol {
            margin: 20px 0 26px;
            padding-left: 25px;
        }

        .article-body li {
            margin: 7px 0;
            padding-left: 5px;
        }

        .article-body li::marker {
            color: var(--orange);
            font-weight: 900;
        }

        .article-body blockquote {
            margin: 32px 0;
            padding: 20px 25px;
            border-left: 4px solid var(--orange);
            color: var(--green-dark);
            background: var(--paper-deep);
            font-size: 19px;
            font-weight: 700;
            line-height: 1.8;
        }

        .article-body figure {
            margin: 35px 0;
        }

        .article-body figure img {
            width: 100%;
            border-radius: 6px;
            background: var(--paper-deep);
        }

        .article-body figcaption {
            margin-top: 10px;
            color: var(--muted);
            font-size: 13px;
            line-height: 1.6;
            text-align: center;
        }

        .article-body img {
            border-radius: 6px;
            background: var(--paper-deep);
        }

        .article-body table {
            width: 100%;
            margin: 30px 0;
            border-collapse: collapse;
            overflow: hidden;
            background: var(--white);
            font-size: 15px;
        }

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

        .article-body th {
            color: var(--ink);
            background: var(--paper-deep);
            font-weight: 900;
        }

        .article-body hr {
            margin: 40px 0;
            border: 0;
            border-top: 1px solid var(--line);
        }

        .article-body code {
            padding: 2px 6px;
            border-radius: 4px;
            color: var(--orange-dark);
            background: var(--orange-soft);
            font-size: .9em;
        }

        .article-body pre {
            max-width: 100%;
            margin: 28px 0;
            padding: 18px;
            overflow-x: auto;
            border-radius: 6px;
            color: #f8f5ee;
            background: var(--ink);
            font-size: 14px;
            line-height: 1.7;
        }

        .article-body pre code {
            padding: 0;
            color: inherit;
            background: transparent;
        }

        .article-aside {
            position: sticky;
            top: 102px;
        }

        .aside-panel {
            padding-top: 4px;
            border-top: 2px solid var(--green);
        }

        .aside-title {
            margin: 16px 0 15px;
            color: var(--ink);
            font-size: 16px;
            font-weight: 900;
        }

        .article-index {
            margin: 0;
            padding: 0;
            list-style: none;
            border-top: 1px solid var(--line);
        }

        .article-index li {
            border-bottom: 1px solid var(--line);
        }

        .article-index a {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 13px 0;
            color: var(--muted-deep);
            font-size: 13px;
            font-weight: 700;
        }

        .article-index a span {
            color: var(--orange);
            font-size: 11px;
            font-weight: 900;
        }

        .article-index a:hover {
            padding-left: 5px;
            color: var(--orange-dark);
        }

        .aside-box {
            margin-top: 32px;
            padding: 18px;
            border: 1px solid var(--line);
            border-radius: var(--radius);
            background: var(--white);
        }

        .aside-box-title {
            margin: 0 0 12px;
            color: var(--ink);
            font-size: 13px;
            font-weight: 900;
        }

        .aside-keywords {
            display: flex;
            flex-wrap: wrap;
            gap: 7px;
        }

        .aside-keywords .tag {
            color: var(--green-dark);
            border-color: var(--green-soft);
            background: var(--green-soft);
        }

        .aside-link {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin-top: 18px;
            color: var(--orange-dark);
            font-size: 13px;
            font-weight: 900;
        }

        .aside-link::after {
            content: "→";
            transition: transform .2s ease;
        }

        .aside-link:hover::after {
            transform: translateX(4px);
        }

        .article-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 48px;
            padding-top: 22px;
            border-top: 1px solid var(--line);
        }

        .action-button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            min-height: 40px;
            padding: 8px 14px;
            border: 1px solid var(--line);
            border-radius: 5px;
            color: var(--green-dark);
            background: transparent;
            font-size: 13px;
            font-weight: 800;
        }

        .action-button:hover {
            border-color: var(--green);
            color: var(--white);
            background: var(--green);
        }

        .action-button:focus-visible,
        .btn:focus-visible,
        .nav a:focus-visible,
        .menu-toggle:focus-visible,
        summary:focus-visible {
            outline: 3px solid rgba(200, 91, 60, .3);
            outline-offset: 3px;
        }

        .related-section {
            padding: 90px 0 100px;
            border-top: 1px solid var(--line);
            background: var(--white);
        }

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

        .section-kicker {
            margin-bottom: 9px;
            color: var(--orange-dark);
            font-size: 12px;
            font-weight: 900;
        }

        .section-title {
            margin: 0;
            color: var(--ink);
            font-size: 36px;
            font-weight: 900;
            line-height: 1.35;
        }

        .section-intro {
            max-width: 430px;
            margin: 0;
            color: var(--muted);
            font-size: 15px;
        }

        .text-link {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: var(--green-dark);
            font-size: 13px;
            font-weight: 900;
            white-space: nowrap;
        }

        .text-link::after {
            content: "→";
            transition: transform .2s ease;
        }

        .text-link:hover {
            color: var(--orange-dark);
        }

        .text-link:hover::after {
            transform: translateX(4px);
        }

        .related-grid {
            display: grid;
            grid-template-columns: 1.25fr 1fr 1fr;
            gap: 20px;
        }

        .related-card {
            display: flex;
            flex-direction: column;
            min-width: 0;
            border: 1px solid var(--line);
            border-radius: var(--radius);
            overflow: hidden;
            background: var(--white);
        }

        .related-card:hover {
            border-color: var(--green);
            box-shadow: var(--shadow-small);
            transform: translateY(-3px);
        }

        .related-card-image {
            aspect-ratio: 16 / 9;
            overflow: hidden;
            background: var(--paper-deep);
        }

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

        .related-card:hover .related-card-image img {
            transform: scale(1.035);
        }

        .related-card-body {
            display: flex;
            flex: 1;
            flex-direction: column;
            align-items: flex-start;
            padding: 22px 22px 24px;
        }

        .related-card .tag {
            margin-bottom: 13px;
            color: var(--orange-dark);
            border-color: var(--line);
        }

        .related-card h3 {
            margin: 0 0 9px;
            color: var(--ink);
            font-size: 20px;
            font-weight: 900;
            line-height: 1.45;
            overflow-wrap: anywhere;
        }

        .related-card p {
            margin: 0 0 18px;
            color: var(--muted);
            font-size: 14px;
            line-height: 1.75;
        }

        .related-card .text-link {
            margin-top: auto;
        }

        .faq-section {
            padding: 90px 0 96px;
            background: var(--paper);
        }

        .faq-layout {
            display: grid;
            grid-template-columns: 1fr 2fr;
            gap: 75px;
        }

        .faq-heading {
            max-width: 330px;
        }

        .faq-heading p {
            margin: 18px 0 0;
            color: var(--muted);
            font-size: 15px;
        }

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

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

        .faq-list summary {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 22px;
            padding: 21px 0;
            color: var(--ink);
            font-size: 16px;
            font-weight: 900;
            list-style: none;
            cursor: pointer;
        }

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

        .faq-list summary::after {
            flex: 0 0 auto;
            color: var(--orange);
            content: "+";
            font-size: 24px;
            font-weight: 400;
            line-height: 1;
            transition: transform .2s ease;
        }

        .faq-list details[open] summary::after {
            transform: rotate(45deg);
        }

        .faq-answer {
            max-width: 700px;
            padding: 0 45px 22px 0;
            color: var(--muted-deep);
            font-size: 14px;
            line-height: 1.85;
        }

        .contact-band {
            padding: 74px 0;
            color: #f8f5ee;
            background: var(--green-dark);
        }

        .contact-inner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 45px;
        }

        .contact-kicker {
            margin-bottom: 10px;
            color: #e5aa87;
            font-size: 12px;
            font-weight: 900;
        }

        .contact-title {
            margin: 0;
            color: #fffdf9;
            font-size: 32px;
            font-weight: 900;
            line-height: 1.4;
        }

        .contact-copy {
            max-width: 590px;
            margin: 13px 0 0;
            color: #d7e0db;
            font-size: 15px;
        }

        .contact-actions {
            display: flex;
            flex: 0 0 auto;
            flex-wrap: wrap;
            gap: 10px;
        }

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 9px;
            min-height: 46px;
            padding: 10px 20px;
            border: 1px solid transparent;
            border-radius: 6px;
            font-size: 14px;
            font-weight: 800;
        }

        .btn-primary {
            color: #fff;
            background: var(--orange);
        }

        .btn-primary:hover {
            color: #fff;
            background: var(--orange-dark);
            box-shadow: 0 8px 16px rgba(200, 91, 60, .2);
            transform: translateY(-2px);
        }

        .btn-secondary {
            color: var(--green-dark);
            border-color: var(--green);
            background: transparent;
        }

        .btn-secondary:hover {
            color: #fff;
            background: var(--green);
        }

        .contact-band .btn-secondary {
            color: #fffdf9;
            border-color: rgba(255, 253, 249, .55);
        }

        .contact-band .btn-secondary:hover {
            color: var(--green-dark);
            border-color: #fffdf9;
            background: #fffdf9;
        }

        .empty-state {
            display: grid;
            place-items: center;
            min-height: 560px;
            padding: 80px 24px;
            text-align: center;
            background: var(--paper);
        }

        .empty-state-inner {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .empty-mark {
            display: grid;
            place-items: center;
            width: 58px;
            height: 58px;
            margin-bottom: 22px;
            border: 1px solid var(--line);
            border-radius: 50%;
            color: var(--orange);
            background: var(--white);
            font-size: 24px;
        }

        .empty-state h1 {
            margin: 0 0 23px;
            color: var(--ink);
            font-size: 34px;
            font-weight: 900;
        }

        .site-footer {
            padding: 62px 0 25px;
            border-top: 1px solid rgba(217, 213, 204, .9);
            color: var(--ink);
            background: var(--paper-deep);
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 1.7fr 1fr 1fr 1fr;
            gap: 40px;
            padding-bottom: 48px;
        }

        .footer-brand {
            margin-bottom: 13px;
            font-size: 18px;
            font-weight: 900;
        }

        .footer-copy {
            max-width: 330px;
            margin: 0;
            color: var(--muted);
            font-size: 13px;
            line-height: 1.8;
        }

        .footer-title {
            margin-bottom: 13px;
            color: var(--orange-dark);
            font-size: 12px;
            font-weight: 900;
        }

        .footer-links {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 8px;
        }

        .footer-links a {
            color: var(--muted-deep);
            font-size: 13px;
        }

        .footer-links a:hover {
            color: var(--orange-dark);
            transform: translateX(3px);
        }

        .copyright {
            display: flex;
            justify-content: space-between;
            gap: 20px;
            padding-top: 20px;
            border-top: 1px solid var(--line);
            color: var(--muted);
            font-size: 12px;
        }

        @media (max-width: 1200px) {
            .article-layout {
                grid-template-columns: minmax(0, 1fr) 230px;
                gap: 48px;
            }

            .article-intro {
                grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
                gap: 48px;
            }

            .nav {
                gap: 22px;
            }
        }

        @media (max-width: 992px) {
            .brand {
                min-width: 210px;
            }

            .nav {
                gap: 16px;
            }

            .nav a {
                font-size: 13px;
            }

            .article-title {
                font-size: 44px;
            }

            .article-intro {
                grid-template-columns: minmax(0, 1fr) 330px;
                gap: 35px;
            }

            .article-layout {
                grid-template-columns: minmax(0, 1fr) 210px;
                gap: 38px;
            }

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

            .related-card-body {
                padding: 18px;
            }

            .related-card h3 {
                font-size: 18px;
            }

            .faq-layout {
                gap: 45px;
            }

            .footer-grid {
                gap: 25px;
            }
        }

        @media (max-width: 768px) {
            .container {
                width: min(var(--container), calc(100% - 36px));
            }

            .site-header {
                height: 68px;
            }

            .nav-wrap {
                position: relative;
            }

            .brand {
                min-width: 0;
            }

            .brand-mark {
                width: 32px;
                height: 32px;
                font-size: 12px;
            }

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

            .brand-name small {
                font-size: 9px;
            }

            .menu-toggle {
                display: block;
                flex: 0 0 44px;
            }

            .nav {
                position: absolute;
                top: 68px;
                right: 0;
                left: 0;
                display: none;
                flex-direction: column;
                align-items: stretch;
                gap: 0;
                padding: 8px 18px 18px;
                border-right: 1px solid var(--line);
                border-bottom: 1px solid var(--line);
                border-left: 1px solid var(--line);
                background: var(--paper);
                box-shadow: var(--shadow-small);
            }

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

            .nav a,
            .nav .nav-cta {
                justify-content: space-between;
                height: auto;
                min-height: 48px;
                padding: 12px 4px;
                border: 0;
                border-bottom: 1px solid var(--line);
                font-size: 14px;
            }

            .nav a:last-child {
                margin-top: 10px;
                border: 1px solid var(--ink);
                justify-content: center;
            }

            .nav a::after {
                bottom: -1px;
                left: 4px;
                height: 2px;
            }

            .nav .nav-cta::after {
                display: none;
            }

            .breadcrumb {
                min-height: 50px;
                font-size: 12px;
            }

            .breadcrumb-current {
                max-width: 220px;
            }

            .article-headband {
                padding: 52px 0 48px;
            }

            .article-intro {
                display: flex;
                flex-direction: column;
                align-items: stretch;
                gap: 34px;
            }

            .article-title {
                font-size: 38px;
                line-height: 1.35;
            }

            .article-deck {
                font-size: 16px;
                line-height: 1.85;
            }

            .article-cover {
                width: min(100%, 500px);
                aspect-ratio: 16 / 10;
            }

            .signal-inner {
                display: block;
                padding: 18px 0;
            }

            .signal-tags {
                justify-content: flex-start;
                margin-top: 12px;
            }

            .article-reading {
                padding: 60px 0 66px;
            }

            .article-layout {
                display: flex;
                flex-direction: column;
                gap: 45px;
            }

            .article-body {
                font-size: 16px;
                line-height: 1.9;
            }

            .article-body h2 {
                margin-top: 38px;
                font-size: 27px;
            }

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

            .article-aside {
                position: static;
                width: 100%;
            }

            .aside-panel {
                max-width: 500px;
            }

            .related-section,
            .faq-section {
                padding: 64px 0 70px;
            }

            .section-head {
                display: block;
                margin-bottom: 30px;
            }

            .section-title {
                font-size: 30px;
            }

            .section-intro {
                margin-top: 12px;
            }

            .section-head > .text-link {
                margin-top: 16px;
            }

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

            .related-card {
                display: grid;
                grid-template-columns: 35% 1fr;
            }

            .related-card-image {
                height: 100%;
                min-height: 170px;
                aspect-ratio: auto;
            }

            .related-card-body {
                padding: 20px;
            }

            .faq-layout {
                display: block;
            }

            .faq-heading {
                max-width: 600px;
                margin-bottom: 30px;
            }

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

            .contact-inner {
                display: block;
            }

            .contact-actions {
                margin-top: 26px;
            }

            .footer-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 34px 24px;
            }

            .footer-grid > div:first-child {
                grid-column: 1 / -1;
            }

            .copyright {
                display: block;
            }

            .copyright span {
                display: block;
            }

            .copyright span + span {
                margin-top: 7px;
            }
        }

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

            .article-headband {
                padding: 40px 0 38px;
            }

            .article-kicker {
                margin-bottom: 17px;
                font-size: 12px;
            }

            .article-title {
                font-size: 31px;
            }

            .article-meta {
                display: grid;
                gap: 8px;
                margin-top: 23px;
            }

            .article-cover {
                aspect-ratio: 4 / 3;
            }

            .article-reading {
                padding: 48px 0 55px;
            }

            .article-body blockquote {
                margin-right: 0;
                margin-left: 0;
                padding: 16px 17px;
                font-size: 17px;
            }

            .article-body table {
                display: block;
                overflow-x: auto;
                white-space: nowrap;
            }

            .article-actions {
                margin-top: 34px;
            }

            .action-button {
                flex: 1 1 auto;
            }

            .section-title {
                font-size: 27px;
            }

            .related-card {
                display: block;
            }

            .related-card-image {
                height: auto;
                min-height: 0;
                aspect-ratio: 16 / 9;
            }

            .faq-list summary {
                padding: 18px 0;
                font-size: 15px;
            }

            .faq-answer {
                padding-right: 24px;
            }

            .contact-title {
                font-size: 27px;
            }

            .contact-actions {
                display: grid;
                grid-template-columns: 1fr;
            }

            .contact-actions .btn {
                width: 100%;
            }

            .footer-grid {
                grid-template-columns: 1fr 1fr;
                gap: 30px 18px;
            }

            .footer-brand {
                font-size: 16px;
            }

            .footer-copy {
                font-size: 12px;
            }

            .empty-state {
                min-height: 440px;
            }

            .empty-state h1 {
                font-size: 29px;
            }
        }