/* roulang page: index */
:root{
      --ink:#171815;
      --ink-soft:#252622;
      --paper:#e6e0d5;
      --paper-light:#f4f0e8;
      --stone:#c9c2b6;
      --muted:#8d877c;
      --teal:#326d67;
      --teal-dark:#245650;
      --clay:#ce8067;
      --clay-dark:#b86852;
      --line:rgba(70,67,60,.24);
      --shadow:0 12px 32px rgba(20,20,17,.14);
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;background:var(--paper-light);color:var(--ink);font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",Arial,sans-serif;line-height:1.75}
    a{color:inherit;text-decoration:none}
    button,input{font:inherit}
    button{cursor:pointer}
    ::selection{background:var(--clay);color:var(--ink)}
    .editorial{font-family:Georgia,"Songti SC","STSong",serif}
    .site-grid{background-image:linear-gradient(rgba(50,109,103,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(50,109,103,.055) 1px,transparent 1px);background-size:28px 28px}
    .grain:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.22;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(/%23n)' opacity='.45'/%3E%3C/svg%3E")}
    .film-edge{position:relative}
    .film-edge:after{content:"";position:absolute;left:0;right:0;bottom:0;height:12px;background:repeating-linear-gradient(90deg,transparent 0 19px,var(--paper-light) 19px 27px);opacity:.72}
    .focus-ring:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
    .nav-link{position:relative;color:#d8d2c8;font-size:14px;transition:.2s}
    .nav-link:hover,.nav-link.active{color:#fff}
    .nav-link.active:after{content:"";position:absolute;left:0;right:0;bottom:-9px;height:2px;background:var(--clay)}
    .logo-mark{width:31px;height:31px;border:1px solid rgba(244,240,232,.62);display:grid;place-items:center;position:relative}
    .logo-mark:before,.logo-mark:after{content:"";position:absolute;width:4px;height:4px;background:var(--clay);top:4px}
    .logo-mark:before{left:4px}.logo-mark:after{right:4px}
    .search-shell{border:1px solid rgba(230,224,213,.28);background:rgba(255,255,255,.05);transition:.2s}
    .search-shell:focus-within{border-color:var(--teal);box-shadow:0 0 0 3px rgba(50,109,103,.28)}
    .hero-search{box-shadow:0 16px 40px rgba(0,0,0,.23)}
    .btn-main{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;background:var(--clay);color:var(--ink);border:1px solid var(--clay);padding:.72rem 1.05rem;font-weight:700;font-size:14px;transition:transform .2s,background .2s,border-color .2s,box-shadow .2s}
    .btn-main:hover{background:var(--clay-dark);border-color:var(--clay-dark);transform:translateY(-2px);box-shadow:0 7px 14px rgba(0,0,0,.2)}
    .btn-outline{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;border:1px solid currentColor;padding:.7rem 1rem;font-size:14px;font-weight:600;transition:.2s}
    .btn-outline:hover{color:var(--teal);transform:translateY(-2px);box-shadow:0 6px 13px rgba(20,20,17,.1)}
    .archive-card{border:1px solid var(--line);background:var(--paper-light);transition:transform .25s,border-color .25s,box-shadow .25s}
    .archive-card:hover{border-color:var(--teal);transform:translateY(-3px);box-shadow:var(--shadow)}
    .archive-card:hover .arrow-shift{transform:translateX(5px)}
    .arrow-shift{transition:transform .2s}
    .cover{position:relative;overflow:hidden;background:#2a2a25}
    .cover:after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(0,0,0,.05),rgba(0,0,0,.48));pointer-events:none}
    .cover-a{background:linear-gradient(126deg,#326d67 0%,#28524d 39%,#1e201d 40%,#1e201d 100%)}
    .cover-b{background:linear-gradient(145deg,#7d554b 0%,#ce8067 34%,#32322e 35%,#171815 100%)}
    .cover-c{background:linear-gradient(130deg,#c9c2b6 0%,#a9a398 44%,#326d67 45%,#1e2421 100%)}
    .cover-d{background:linear-gradient(135deg,#2b2b27 0%,#2b2b27 48%,#826156 49%,#ce8067 100%)}
    .cover-e{background:linear-gradient(130deg,#d3ccbf 0%,#d3ccbf 42%,#4e5e57 43%,#1a1b18 100%)}
    .perforation{background:repeating-linear-gradient(90deg,transparent 0 13px,rgba(244,240,232,.58) 13px 20px)}
    .quote-card{border:1px solid var(--line);box-shadow:0 8px 20px rgba(20,20,17,.08)}
    .faq-item{border-top:1px solid var(--line)}
    .faq-answer{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .22s ease,opacity .2s ease}
    .faq-item.open .faq-answer{grid-template-rows:1fr;opacity:1}
    .faq-answer>div{overflow:hidden}
    .faq-plus{transition:transform .2s}
    .faq-item.open .faq-plus{transform:rotate(45deg);color:var(--clay)}
    .mobile-panel{display:none}
    @media(max-width:768px){
      .desktop-nav,.desktop-actions{display:none}
      .mobile-panel{display:block}
      .nav-link.active:after{bottom:-3px}
    }

/* roulang page: category1 */
:root{
 --ink:#171815;
 --ink-soft:#252622;
 --paper:#e6e0d5;
 --paper-light:#f4f0e8;
 --stone:#c9c2b6;
 --muted:#8d877c;
 --teal:#326d67;
 --teal-dark:#245650;
 --clay:#ce8067;
 --clay-dark:#b86852;
 --line:rgba(70,67,60,.24);
 --shadow:0 12px 32px rgba(20,20,17,.14);
}
html{scroll-behavior:smooth}
*{box-sizing:border-box}
body{margin:0;background:var(--paper-light);color:var(--ink);font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",Arial,sans-serif;line-height:1.75}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
button{cursor:pointer}
.site-grid{background-image:linear-gradient(rgba(50,109,103,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(50,109,103,.055) 1px,transparent 1px);background-size:28px 28px}
.nav-link{position:relative;color:#d8d2c8;font-size:14px;transition:.2s}
.nav-link:hover,.nav-link.active{color:#fff}
.nav-link.active:after{content:"";position:absolute;left:0;right:0;bottom:-9px;height:2px;background:var(--clay)}
.logo-mark{width:31px;height:31px;border:1px solid rgba(244,240,232,.62);display:grid;place-items:center;position:relative}
.logo-mark:before,.logo-mark:after{content:"";position:absolute;width:4px;height:4px;background:var(--clay);top:4px}
.logo-mark:before{left:4px}
.logo-mark:after{right:4px}
.search-shell{border:1px solid rgba(230,224,213,.28);background:rgba(255,255,255,.05);transition:.2s}
.search-shell:focus-within{border-color:var(--teal);box-shadow:0 0 0 3px rgba(50,109,103,.28)}
.btn-main{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;background:var(--clay);color:var(--ink);border:1px solid var(--clay);padding:.72rem 1.05rem;font-weight:700;font-size:14px;transition:transform .2s,background .2s,border-color .2s,box-shadow .2s}
.btn-main:hover{background:var(--clay-dark);border-color:var(--clay-dark);transform:translateY(-2px);box-shadow:0 7px 14px rgba(0,0,0,.2)}
.btn-outline{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;border:1px solid currentColor;padding:.7rem 1rem;font-size:14px;font-weight:600;transition:.2s}
.btn-outline:hover{color:var(--teal);transform:translateY(-2px);box-shadow:0 6px 13px rgba(20,20,17,.1)}
.archive-card{border:1px solid var(--line);background:var(--paper-light);transition:transform .25s,border-color .25s,box-shadow .25s}
.archive-card:hover{border-color:var(--teal);transform:translateY(-3px);box-shadow:var(--shadow)}
.archive-card:hover .arrow-shift{transform:translateX(5px)}
.arrow-shift{transition:transform .2s}
.cover-a{background:linear-gradient(126deg,#326d67 0%,#28524d 39%,#1e201d 40%,#1e201d 100%)}
.quote-card{border:1px solid var(--line);box-shadow:0 8px 20px rgba(20,20,17,.08)}
.faq-item{border-top:1px solid var(--line)}
.faq-answer{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .22s ease,opacity .2s ease}
.faq-item.open .faq-answer{grid-template-rows:1fr;opacity:1}
.faq-answer>div{overflow:hidden}
.faq-plus{transition:transform .2s}
.faq-item.open .faq-plus{transform:rotate(45deg);color:var(--clay)}
.mobile-panel{display:none}
.desktop-nav,.desktop-actions{display:none}
.mobile-panel{display:block}
.nav-link.active:after{bottom:-3px}
.focus-ring:focus-visible{outline:3px solid rgba(50,109,103,.72);outline-offset:3px}
.film-strip{position:relative;overflow:hidden}
.film-strip:before,.film-strip:after{content:"";position:absolute;left:0;right:0;height:10px;background:repeating-linear-gradient(90deg,#171815 0 18px,transparent 18px 27px);opacity:.7;z-index:2}
.film-strip:before{top:0}.film-strip:after{bottom:0}
.corner-cut{clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px))}
.filter-button{border:1px solid var(--line);background:var(--paper-light);padding:.62rem .8rem;font-size:.83rem;transition:.2s}
.filter-button:hover{border-color:var(--teal);transform:translateY(-1px)}
.filter-button.active{background:var(--teal);border-color:var(--teal);color:#f4f0e8}
.cover-noise{background-image:linear-gradient(135deg,rgba(244,240,232,.16),transparent 45%),repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 1px,transparent 1px 8px)}
.archive-cover{min-height:170px;position:relative;overflow:hidden}
.archive-cover:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(23,24,21,.75));pointer-events:none}
.control-label{font-size:11px;letter-spacing:.12em;color:var(--muted);font-weight:700}
@media(min-width:769px){
 .desktop-nav,.desktop-actions{display:flex}
 .mobile-panel{display:none}
 .nav-link.active:after{bottom:-9px}
}
@media(max-width:1024px){
 .archive-layout{grid-template-columns:210px minmax(0,1fr)!important}
}
@media(max-width:768px){
 .desktop-nav,.desktop-actions{display:none}
 .mobile-panel{display:flex}
 .nav-link.active:after{bottom:-3px}
 .archive-layout{display:block!important}
 .filter-rail{display:none}
 .archive-cover{min-height:155px}
}
@media(max-width:520px){
 .archive-cover{min-height:145px}
}