/* roulang page: index */
:root{
      --ink:#20231F;--paper:#F2F0E8;--cream:#FBFAF5;--sage:#77806B;
      --clay:#A85E46;--mist:#A5A69E;--line:rgba(32,35,31,.22);
      --softline:rgba(32,35,31,.12);--shadow:0 8px 24px rgba(32,35,31,.08);
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;background:var(--paper);color:var(--ink);
      font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",Arial,sans-serif;
      line-height:1.75;letter-spacing:.01em;
      background-image:radial-gradient(rgba(32,35,31,.045) .65px,transparent .7px);
      background-size:8px 8px;
    }
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    button,input{font:inherit}
    button{cursor:pointer}
    :focus-visible{outline:3px solid rgba(119,128,107,.72);outline-offset:3px}
    .container{width:min(1280px,calc(100% - 48px));margin-inline:auto}
    .eyebrow{
      display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;
      letter-spacing:.15em;color:var(--sage);text-transform:uppercase;
    }
    .eyebrow::before{content:"";display:block;width:24px;height:1px;background:currentColor}
    .section{padding:104px 0}
    .section-rule{border-top:1px solid var(--line)}
    .paper-card{background:var(--cream);border:1px solid var(--softline);box-shadow:var(--shadow)}
    .btn-main,.btn-ghost{
      min-height:46px;display:inline-flex;align-items:center;justify-content:center;gap:10px;
      border-radius:4px;padding:11px 18px;font-size:15px;font-weight:700;
      transition:transform .2s ease,background .2s ease,border-color .2s ease,color .2s ease;
    }
    .btn-main{background:var(--ink);border:1px solid var(--ink);color:var(--paper)}
    .btn-main:hover{background:var(--sage);border-color:var(--sage);transform:translateY(-2px);box-shadow:inset 0 -3px 0 var(--clay)}
    .btn-main:active,.btn-ghost:active{transform:translateY(0)}
    .btn-ghost{background:transparent;border:1px solid var(--ink);color:var(--ink)}
    .btn-ghost:hover{background:rgba(119,128,107,.12);border-color:var(--sage);transform:translateY(-1px)}
    .tag{
      display:inline-flex;align-items:center;min-height:26px;padding:3px 9px;
      border:1px solid rgba(32,35,31,.22);font-size:12px;line-height:1.2;color:#4d524a;background:rgba(251,250,245,.56)
    }
    .image-block{
      position:relative;overflow:hidden;background:#bec1b5;
      background-image:linear-gradient(135deg,rgba(32,35,31,.32),rgba(119,128,107,.12)),
        radial-gradient(circle at 20% 22%,rgba(251,250,245,.5) 0 2%,transparent 2.3%),
        linear-gradient(115deg,#939a8a 0%,#d3d0c4 48%,#777c70 48%,#a9aa9e 100%);
    }
    .image-block::after{
      content:"";position:absolute;inset:0;opacity:.26;pointer-events:none;
      background-image:radial-gradient(rgba(32,35,31,.8) .55px,transparent .7px);
      background-size:5px 5px;mix-blend-mode:multiply;
    }
    .image-label{
      position:absolute;z-index:1;bottom:14px;left:14px;background:var(--cream);padding:5px 9px;
      font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:11px;letter-spacing:.08em
    }
    .nav-link{position:relative;padding:8px 0;font-size:14px;transition:color .2s ease}
    .nav-link:hover{color:var(--clay)}
    .nav-link.active{color:var(--clay);font-weight:700}
    .nav-link.active::after{content:"";position:absolute;left:0;right:0;bottom:-14px;height:3px;background:var(--clay)}
    .mobile-link{display:block;padding:16px 0;border-bottom:1px solid var(--softline);font-size:19px;font-weight:700}
    .mobile-link::before{display:inline-block;width:30px;color:var(--clay);font:12px ui-monospace,SFMono-Regular,monospace}
    .mobile-link:nth-child(1)::before{content:"01"}
    .mobile-link:nth-child(2)::before{content:"02"}
    .faq-item summary{list-style:none}
    .faq-item summary::-webkit-details-marker{display:none}
    .faq-item[open] summary .faq-sign::after{transform:rotate(0)}
    .faq-sign{position:relative;width:20px;height:20px;flex:0 0 20px}
    .faq-sign::before,.faq-sign::after{content:"";position:absolute;left:2px;right:2px;top:9px;height:1px;background:var(--ink)}
    .faq-sign::after{transform:rotate(90deg);transition:transform .2s ease}
    .progress-bar{height:7px;background:rgba(32,35,31,.12);overflow:hidden}
    .progress-bar span{display:block;height:100%;background:var(--clay)}
    @media (max-width:1024px){
      .section{padding:76px 0}
      .container{width:min(100% - 40px,1280px)}
    }
    @media (max-width:768px){
      .container{width:min(100% - 32px,1280px)}
      .section{padding:62px 0}
      .nav-link.active::after{bottom:-7px}
    }
    @media (max-width:520px){
      .container{width:calc(100% - 32px)}
      .btn-main,.btn-ghost{width:100%}
    }

/* roulang page: category1 */
:root{
 --ink:#20231F;--paper:#F2F0E8;--cream:#FBFAF5;--sage:#77806B;
 --clay:#A85E46;--mist:#A5A69E;--line:rgba(32,35,31,.22);
 --softline:rgba(32,35,31,.12);--shadow:0 8px 24px rgba(32,35,31,.08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
 margin:0;background:var(--paper);color:var(--ink);
 font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",Arial,sans-serif;
 line-height:1.75;letter-spacing:.01em;
 background-image:radial-gradient(rgba(32,35,31,.045) .65px,transparent .7px);
 background-size:8px 8px;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input{font:inherit}
button{cursor:pointer}
.container{width:min(100% - 40px,1280px);margin-inline:auto}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.15em;color:var(--sage)}
.eyebrow::before{content:"";display:block;width:24px;height:1px;background:currentColor}
.section{padding:76px 0}
.section-rule{border-top:1px solid var(--line)}
.paper-card{background:var(--cream);border:1px solid var(--softline);box-shadow:var(--shadow)}
.btn-main,.btn-ghost{
 min-height:46px;display:inline-flex;align-items:center;justify-content:center;gap:10px;
 border-radius:4px;padding:11px 18px;font-size:15px;font-weight:700;
 transition:transform .2s ease,background .2s ease,border-color .2s ease,color .2s ease;
}
.btn-main{background:var(--ink);border:1px solid var(--ink);color:var(--paper)}
.btn-main:hover{background:var(--sage);border-color:var(--sage);transform:translateY(-2px);box-shadow:inset 0 -3px 0 var(--clay)}
.btn-main:active,.btn-ghost:active{transform:translateY(0)}
.btn-ghost{background:transparent;border:1px solid var(--ink);color:var(--ink)}
.btn-ghost:hover{background:rgba(119,128,107,.12);border-color:var(--sage);transform:translateY(-1px)}
.btn-main:focus-visible,.btn-ghost:focus-visible,.nav-link:focus-visible,.mobile-link:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid rgba(119,128,107,.55);outline-offset:3px}
.tag{display:inline-flex;align-items:center;min-height:26px;padding:3px 9px;border:1px solid rgba(32,35,31,.22);font-size:12px;line-height:1.2;color:#4d524a;background:rgba(251,250,245,.56)}
.nav-link{position:relative;padding:8px 0;font-size:14px;transition:color .2s ease}
.nav-link:hover{color:var(--clay)}
.nav-link.active{color:var(--clay);font-weight:700}
.nav-link.active::after{content:"";position:absolute;left:0;right:0;bottom:-14px;height:3px;background:var(--clay)}
.mobile-link{display:block;padding:16px 0;border-bottom:1px solid var(--softline);font-size:19px;font-weight:700}
.mobile-link::before{display:inline-block;width:30px;color:var(--clay);font:12px ui-monospace,SFMono-Regular,monospace}
.mobile-link:nth-child(1)::before{content:"01"}
.mobile-link:nth-child(2)::before{content:"02"}
.faq-item summary{list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item[open] summary .faq-sign::after{transform:rotate(0)}
.faq-sign{position:relative;width:20px;height:20px;flex:0 0 20px}
.faq-sign::before,.faq-sign::after{content:"";position:absolute;left:2px;right:2px;top:9px;height:1px;background:var(--ink)}
.faq-sign::after{transform:rotate(90deg);transition:transform .2s ease}
.masthead{border-bottom:1px solid var(--ink);background:rgba(242,240,232,.93);backdrop-filter:blur(8px)}
.topline{border-bottom:1px solid var(--softline);font-size:11px;letter-spacing:.08em;color:rgba(32,35,31,.62)}
.brand{font-size:clamp(25px,3vw,38px);font-weight:800;line-height:1;letter-spacing:-.075em}
.archive-no{font:12px ui-monospace,SFMono-Regular,monospace;letter-spacing:.08em;color:var(--clay)}
.filter-bar{display:grid;grid-template-columns:1.2fr .85fr minmax(240px,1.4fr) auto;gap:10px;padding:14px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.filter-control{min-height:46px;border:1px solid var(--line);background:rgba(251,250,245,.68);padding:0 13px;color:var(--ink);font-size:14px}
select.filter-control{appearance:auto}
.filter-control:focus{outline:2px solid var(--sage);outline-offset:1px}
.feature-image,.thumb-image,.case-image{position:relative;overflow:hidden;background:linear-gradient(135deg,#8e9685,#4f554c)}
.feature-image::after,.thumb-image::after,.case-image::after{content:"";position:absolute;inset:0;background:linear-gradient(145deg,rgba(32,35,31,.1),rgba(168,94,70,.22));mix-blend-mode:multiply}
.feature-image{min-height:300px}
.feature-image::before{content:"分区档案 · 01";position:absolute;z-index:1;left:20px;bottom:18px;background:var(--paper);padding:5px 10px;color:var(--ink);font:11px ui-monospace,SFMono-Regular,monospace;letter-spacing:.08em}
.thumb-image{height:148px}
.case-image{height:190px}
.list-row{border-top:1px solid var(--line);padding:26px 0;transition:background .2s ease,padding .2s ease}
.list-row:hover{background:rgba(251,250,245,.52);padding-inline:14px}
.list-row:hover .row-arrow{color:var(--clay);transform:translateX(4px)}
.row-arrow{transition:transform .2s ease,color .2s ease;font-size:20px}
.sidebar{position:sticky;top:28px}
.side-link{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid var(--softline);padding:12px 0;font-size:14px;transition:color .2s ease}
.side-link:hover{color:var(--clay)}
.page-current{display:inline-flex;width:32px;height:32px;align-items:center;justify-content:center;background:var(--ink);color:var(--paper);font-size:13px}
.page-num{display:inline-flex;width:32px;height:32px;align-items:center;justify-content:center;border:1px solid var(--line);font-size:13px;transition:all .2s}
.page-num:hover{border-color:var(--clay);background:var(--clay);color:var(--paper)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{display:flex;min-height:62px;align-items:center;justify-content:space-between;gap:18px;cursor:pointer;font-weight:700}
.faq-answer{padding:0 0 20px;color:rgba(32,35,31,.72);font-size:15px}
@media(max-width:1024px){
 .sidebar{position:static}
 .feature-image{min-height:240px}
}
@media(max-width:768px){
 .container{width:min(100% - 32px,1280px)}
 .section{padding:62px 0}
 .nav-link.active::after{bottom:-7px}
 .filter-bar{grid-template-columns:1fr;padding:12px}
 .list-row:hover{padding-inline:0;background:transparent}
}
@media(max-width:520px){
 .container{width:calc(100% - 32px)}
 .btn-main,.btn-ghost{width:100%}
 .thumb-image{height:120px}
 .brand{font-size:25px}
}