/* roulang page: index */
:root{
  --ink:#24231f;
  --muted:#706b62;
  --paper:#f5f1e9;
  --paper-deep:#ebe4d7;
  --white:#fffdf9;
  --red:#a84936;
  --red-dark:#803828;
  --sage:#68766a;
  --line:#d9d0c2;
  --dark:#292a25;
  --radius:16px;
  --shadow:0 12px 30px rgba(57,43,28,.08);
  --container:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Noto Sans SC","Microsoft YaHei",Arial,sans-serif;line-height:1.7}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,textarea{font:inherit}
button{cursor:pointer}
.container{width:min(var(--container),calc(100% - 48px));margin:auto}
.topline{background:var(--dark);color:#e8e0d4;font-size:13px;letter-spacing:.04em}
.topline .container{height:36px;display:flex;align-items:center;justify-content:space-between}
.topline a{color:#f0b49d}
.site-header{position:sticky;top:0;z-index:20;background:rgba(245,241,233,.96);border-bottom:1px solid var(--line);backdrop-filter:blur(10px)}
.navbar{height:78px;display:flex;align-items:center;gap:36px}
.logo{display:flex;align-items:center;gap:12px;min-width:245px}
.logo-mark{width:38px;height:38px;border:2px solid var(--red);border-radius:9px;display:grid;place-items:center;color:var(--red);font-size:17px;font-weight:800;position:relative}
.logo-mark:after{content:"";position:absolute;inset:5px;border:1px solid var(--red);border-radius:4px}
.logo-text strong{display:block;font-size:18px;line-height:1.15;letter-spacing:.04em}
.logo-text small{display:block;color:var(--muted);font:11px Arial,sans-serif;letter-spacing:.14em;margin-top:3px}
.nav-links{display:flex;align-items:center;gap:25px;margin-left:auto}
.nav-links a{font-size:14px;color:#5d584f;position:relative;padding:25px 0}
.nav-links a:after{content:"";position:absolute;bottom:16px;left:0;width:0;height:2px;background:var(--red);transition:.25s}
.nav-links a:hover,.nav-links a.active{color:var(--red-dark)}
.nav-links a:hover:after,.nav-links a.active:after{width:100%}
.nav-action,.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 20px;border-radius:9px;border:1px solid transparent;transition:.25s}
.nav-action,.btn-primary{background:var(--red);color:#fffaf4;box-shadow:0 6px 14px rgba(168,73,54,.18)}
.nav-action:hover,.btn-primary:hover{background:var(--red-dark);transform:translateY(-2px)}
.nav-action:focus,.btn:focus,.faq-q:focus{outline:3px solid rgba(168,73,54,.28);outline-offset:3px}
.menu-toggle{display:none;background:none;border:0;color:var(--ink);font-size:25px}
.hero{padding:76px 0 64px;background:linear-gradient(100deg,#f5f1e9 45%,rgba(245,241,233,.2)),url('/assets/images/backpic/back-1.webp') center/cover}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:center}
.eyebrow{display:flex;align-items:center;gap:10px;color:var(--red);font:600 13px Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase}
.eyebrow:before{content:"";width:30px;height:1px;background:var(--red)}
h1,h2,h3,p{margin-top:0}
h1{font-size:clamp(38px,5vw,68px);line-height:1.16;letter-spacing:-.055em;margin:20px 0 24px;max-width:680px}
.hero-copy{font-size:17px;color:var(--muted);max-width:590px}
.hero-buttons{display:flex;gap:12px;margin:32px 0}
.btn-outline{border-color:#a99d8c;background:rgba(255,253,249,.35);color:var(--ink)}
.btn-outline:hover{border-color:var(--red);color:var(--red);transform:translateY(-2px)}
.hero-note{display:flex;gap:24px;border-top:1px solid var(--line);padding-top:18px;color:var(--muted);font-size:13px}
.hero-note b{display:block;color:var(--ink);font-size:20px;line-height:1.2}
.hero-visual{position:relative}
.hero-image{width:100%;aspect-ratio:1.12/1;object-fit:cover;border-radius:20px;box-shadow:var(--shadow);filter:saturate(.78)}
.seal{position:absolute;right:-18px;top:28px;width:88px;height:88px;border:1px solid #e6b3a4;border-radius:50%;background:var(--red);color:#fff5ed;display:grid;place-items:center;text-align:center;font-size:13px;line-height:1.3;transform:rotate(8deg)}
.seal span{display:block;font:11px Arial,sans-serif;letter-spacing:.08em}
.index-strip{padding:20px 0;border-bottom:1px solid var(--line);background:var(--white)}
.index-items{display:flex;gap:12px;overflow:auto}
.index-item{white-space:nowrap;border:1px solid var(--line);padding:8px 15px;border-radius:30px;color:var(--muted);font-size:13px;transition:.2s}
.index-item:hover{border-color:var(--red);color:var(--red);background:#fff5ef}
.section{padding:92px 0}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:30px}
.section-kicker{color:var(--red);font-size:13px;letter-spacing:.1em;font-weight:700}
.section h2{font-size:clamp(28px,3.5vw,44px);line-height:1.25;letter-spacing:-.04em;margin:8px 0 0}
.section-intro{max-width:470px;color:var(--muted);margin:0}
.theme-layout{display:grid;grid-template-columns:1.25fr .75fr;gap:20px}
.feature-card,.mini-card{background:var(--white);border:1px solid var(--line);border-radius:20px;overflow:hidden;transition:.25s}
.feature-card:hover,.mini-card:hover,.post-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.feature-card{display:grid;grid-template-columns:1fr 1fr}
.feature-card img{height:100%;min-height:310px;object-fit:cover}
.card-body{padding:30px}
.badge{display:inline-flex;color:var(--red-dark);background:#f5ded5;border:1px solid #e6bbae;border-radius:20px;padding:3px 10px;font-size:12px}
.feature-card h3{font-size:29px;line-height:1.3;margin:18px 0 12px}
.card-body p{color:var(--muted);font-size:14px}
.read-link{color:var(--red);font-size:14px;font-weight:700}
.mini-stack{display:grid;gap:20px}
.mini-card{padding:24px;position:relative}
.mini-card h3{font-size:21px;margin:10px 0 7px}
.mini-card p{font-size:14px;color:var(--muted);margin-bottom:12px}
.mini-card .number{position:absolute;right:22px;top:19px;color:#c5b8a5;font:700 28px Georgia,serif}
.timeline{background:var(--dark);color:#f7f0e7;padding:75px 0}
.timeline .section-kicker{color:#e7a28d}
.timeline .section-intro{color:#bcb7ae}
.timeline-list{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid #5d5b52;margin-top:45px}
.timeline-item{padding:25px 22px 10px 0;border-right:1px solid #5d5b52;margin-right:22px;position:relative}
.timeline-item:last-child{border:0}
.timeline-item:before{content:"";width:10px;height:10px;border-radius:50%;background:#d8755d;position:absolute;top:-6px;left:0}
.timeline-date{color:#d9a18d;font-size:13px}
.timeline-item h3{font-size:19px;margin:15px 0 8px}
.timeline-item p{color:#bdb9b1;font-size:13px}
.updates{background:#eee8dc}
.post-list{display:grid;gap:12px}
.post-card{display:grid;grid-template-columns:75px 1fr auto;gap:22px;align-items:center;background:var(--white);border:1px solid var(--line);border-radius:13px;padding:20px 24px;transition:.25s}
.post-no{font:700 26px Georgia,serif;color:var(--red)}
.post-meta{color:var(--red);font-size:12px}
.post-card h3{font-size:18px;margin:3px 0 4px}
.post-card p{font-size:13px;color:var(--muted);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:650px}
.post-time{font-size:12px;color:var(--muted);white-space:nowrap}
.empty-state{padding:35px;text-align:center;background:var(--white);border:1px dashed var(--line);border-radius:14px;color:var(--muted)}
.interpret{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:start}
.word-display{font:700 clamp(38px,6vw,76px)/1 Arial,sans-serif;letter-spacing:-.08em;color:var(--red)}
.word-display small{display:block;font:14px "Microsoft YaHei",sans-serif;letter-spacing:.08em;color:var(--muted);margin-top:15px}
.explain-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.explain{border-left:3px solid var(--red);padding:5px 0 5px 20px}
.explain h3{margin-bottom:8px;font-size:18px}
.explain p{color:var(--muted);font-size:14px;margin:0}
.faq-list{max-width:850px;margin:auto;border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;text-align:left;background:none;border:0;padding:20px 0;color:var(--ink);font-weight:700;font-size:16px}
.faq-q span{font-size:24px;color:var(--red);font-weight:400;transition:.2s}
.faq-a{display:none;color:var(--muted);font-size:14px;padding:0 45px 20px 0}
.faq-item.open .faq-a{display:block}
.faq-item.open .faq-q span{transform:rotate(45deg)}
.cta{padding:45px 0;background:var(--red);color:#fff8ef}
.cta-inner{display:flex;justify-content:space-between;align-items:center;gap:30px}
.cta h2{font-size:30px;margin:0 0 8px}
.cta p{margin:0;color:#f4d7ca}
.cta .btn-outline{border-color:#e9b5a5;color:#fff8ef}
.cta .btn-outline:hover{background:#fff8ef;color:var(--red)}
.cta-actions{display:flex;gap:10px;flex-shrink:0}
.footer{background:var(--dark);color:#eee5d9;padding:54px 0 25px}
.footer-grid{display:grid;grid-template-columns:1.4fr .7fr .7fr;gap:50px;padding-bottom:40px}
.footer .logo-text small{color:#aaa59c}
.footer h3{font-size:14px;color:#d5a08e;margin-bottom:15px}
.footer p,.footer a{font-size:13px;color:#aaa79f}
.footer a{display:block;margin:7px 0}
.footer a:hover{color:#fff}
.copyright{border-top:1px solid #4e4d47;padding-top:18px;display:flex;justify-content:space-between;color:#8f8c85;font-size:12px}
@media(max-width:1024px){
  .navbar{gap:18px}.logo{min-width:210px}.nav-links{gap:15px}
  .hero-grid{gap:38px}.feature-card{grid-template-columns:1fr}
  .feature-card img{height:220px;min-height:0}
}
@media(max-width:768px){
  .container{width:min(100% - 32px,var(--container))}
  .topline .container{height:34px}.topline span{display:none}
  .navbar{height:68px}.menu-toggle{display:block;margin-left:auto}
  .nav-links{display:none;position:absolute;left:16px;right:16px;top:76px;background:var(--white);border:1px solid var(--line);border-radius:14px;padding:12px;box-shadow:var(--shadow);flex-direction:column;align-items:stretch;gap:0}
  .nav-links.show{display:flex}.nav-links a{padding:12px 14px}.nav-links a:after{display:none}.nav-action{display:none}
  .hero{padding:52px 0}.hero-grid,.theme-layout,.interpret{grid-template-columns:1fr}
  .hero-visual{order:2}.hero-note{gap:15px}.section{padding:65px 0}
  .section-head{display:block}.section-intro{margin-top:15px}.timeline-list{grid-template-columns:1fr;margin-top:30px}
  .timeline-item{border-right:0;border-bottom:1px solid #5d5b52;margin:0;padding:22px 0 22px 22px}
  .timeline-item:before{left:0;top:28px}.explain-grid{grid-template-columns:1fr}
  .post-card{grid-template-columns:42px 1fr;padding:17px}.post-time{grid-column:2}.post-card p{max-width:100%}
  .cta-inner{display:block}.cta-actions{margin-top:22px}.footer-grid{grid-template-columns:1fr 1fr;gap:28px}.footer-brand{grid-column:1/-1}
}
@media(max-width:480px){
  h1{font-size:39px}.hero-buttons,.cta-actions{flex-direction:column}.btn{width:100%}
  .seal{right:5px;top:15px;width:70px;height:70px;font-size:11px}
  .feature-card h3{font-size:24px}.card-body{padding:22px}.footer-grid{grid-template-columns:1fr}
  .copyright{display:block}.copyright span{display:block;margin-top:7px}
}

/* roulang page: article */
:root{
      --ink:#24231f;--muted:#706b62;--paper:#f5f1e9;--paper-deep:#ebe4d7;
      --white:#fffdf9;--red:#a84936;--red-dark:#803828;--sage:#68766a;
      --line:#d9d0c2;--dark:#292a25;--radius:16px;
      --shadow:0 12px 30px rgba(57,43,28,.08);--container:1200px
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;background:var(--paper);color:var(--ink);font-family:"Noto Sans SC","Microsoft YaHei",Arial,sans-serif;line-height:1.75}
    a{color:inherit;text-decoration:none}
    img{display:block;max-width:100%}
    button,input,textarea{font:inherit}
    button{cursor:pointer}
    .container{width:min(var(--container),calc(100% - 48px));margin:auto}
    .topline{height:36px;background:var(--dark);color:#d9d0c2;font-size:12px}
    .topline .container{height:36px;display:flex;align-items:center;justify-content:space-between}
    .topline a{color:#f0b49d}
    .site-header{position:sticky;top:0;z-index:20;background:rgba(245,241,233,.96);border-bottom:1px solid var(--line);backdrop-filter:blur(10px)}
    .navbar{height:78px;display:flex;align-items:center;gap:36px}
    .logo{display:flex;align-items:center;gap:12px;min-width:245px}
    .logo-mark{width:38px;height:38px;border:2px solid var(--red);border-radius:9px;display:grid;place-items:center;color:var(--red);font-size:17px;font-weight:800;position:relative}
    .logo-mark:after{content:"";position:absolute;inset:5px;border:1px solid var(--red);border-radius:4px}
    .logo-text strong{display:block;font-size:18px;line-height:1.15;letter-spacing:.04em}
    .logo-text small{display:block;color:var(--muted);font:11px Arial,sans-serif;letter-spacing:.14em;margin-top:3px}
    .nav-links{display:flex;align-items:center;gap:25px;margin-left:auto}
    .nav-links a{font-size:14px;color:#5d584f;position:relative;padding:25px 0}
    .nav-links a:after{content:"";position:absolute;bottom:16px;left:0;width:0;height:2px;background:var(--red);transition:.25s}
    .nav-links a:hover,.nav-links a.active{color:var(--red-dark)}
    .nav-links a:hover:after,.nav-links a.active:after{width:100%}
    .nav-action,.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 20px;border-radius:9px;border:1px solid transparent;transition:.25s}
    .nav-action,.btn-primary{background:var(--red);color:#fffaf4;box-shadow:0 6px 14px rgba(168,73,54,.18)}
    .nav-action:hover,.btn-primary:hover{background:var(--red-dark);transform:translateY(-2px);color:#fff}
    .btn-outline{border-color:#a99d8c;background:transparent;color:var(--ink)}
    .btn-outline:hover{border-color:var(--red);color:var(--red);transform:translateY(-2px)}
    .nav-action:focus,.btn:focus,.toc-toggle:focus{outline:3px solid rgba(168,73,54,.28);outline-offset:3px}
    .menu-toggle{display:none;background:none;border:0;color:var(--ink);font-size:25px}
    .article-banner{padding:58px 0 52px;background:linear-gradient(100deg,#f5f1e9 35%,rgba(245,241,233,.2)),url('/assets/images/backpic/back-2.png') center/cover}
    .crumbs{font-size:13px;color:var(--muted);display:flex;gap:10px;align-items:center;margin-bottom:25px}
    .crumbs a:hover{color:var(--red)}
    .crumbs i{font-style:normal;color:#b1a595}
    .banner-label{display:inline-flex;padding:5px 12px;border-radius:20px;background:#f5ded5;border:1px solid #e6bbae;color:var(--red-dark);font-size:12px}
    .article-banner h1{max-width:850px;font-size:clamp(32px,5vw,58px);line-height:1.22;letter-spacing:-.045em;margin:17px 0 15px}
    .banner-info{display:flex;flex-wrap:wrap;gap:18px;color:var(--muted);font-size:13px}
    .article-layout{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:58px;padding:70px 0 90px;align-items:start}
    .article-main{min-width:0}
    .cover-frame{border-radius:20px;overflow:hidden;background:var(--paper-deep);margin-bottom:30px}
    .cover-frame img{width:100%;aspect-ratio:16/8;object-fit:cover}
    .article-intro{font-size:18px;color:#555047;border-left:3px solid var(--red);padding:8px 0 8px 22px;margin:0 0 35px}
    .article-content{font-size:16px;line-height:1.95;color:#3d3933}
    .article-content h2{font-size:30px;line-height:1.35;margin:42px 0 16px;color:var(--ink)}
    .article-content h3{font-size:22px;line-height:1.45;margin:30px 0 12px;color:var(--ink)}
    .article-content p{margin:0 0 20px}
    .article-content ul,.article-content ol{padding-left:25px;margin:14px 0 25px}
    .article-content li{margin:7px 0}
    .article-content blockquote{margin:28px 0;padding:20px 24px;background:var(--paper-deep);border-left:3px solid var(--sage);color:#5e584e}
    .article-content img{border-radius:14px;margin:28px auto}
    .article-content a{color:var(--red-dark);text-decoration:underline;text-underline-offset:3px}
    .article-content table{width:100%;border-collapse:collapse;margin:25px 0;background:var(--white)}
    .article-content th,.article-content td{padding:12px;border:1px solid var(--line);text-align:left}
    .side-panel{position:sticky;top:140px}
    .side-box{background:var(--dark);color:#f7f0e6;border-radius:18px;padding:25px;margin-bottom:18px}
    .side-box h2{font-size:18px;margin:0 0 17px}
    .toc{border-top:1px solid #5b5b53}
    .toc a{display:block;padding:11px 0;border-bottom:1px solid #5b5b53;color:#c8c2b8;font-size:14px}
    .toc a:hover{color:#f0b49d}
    .side-light{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:24px}
    .side-light h2{font-size:18px;margin:0 0 12px}
    .tag-list{display:flex;gap:8px;flex-wrap:wrap}
    .tag{font-size:12px;color:var(--red-dark);border:1px solid #e0b9ac;background:#fff6f1;border-radius:20px;padding:4px 10px}
    .empty-state{padding:70px 25px;text-align:center;background:var(--white);border:1px solid var(--line);border-radius:18px}
    .empty-state h1{font-size:30px;margin:0 0 12px}
    .empty-state p{color:var(--muted);margin-bottom:23px}
    .article-end{border-top:1px solid var(--line);margin-top:48px;padding-top:25px;display:flex;justify-content:space-between;gap:15px;color:var(--muted);font-size:14px}
    .article-end a{color:var(--red-dark)}
    .cta{background:var(--red);color:#fff8ef;padding:36px 0}
    .cta-inner{display:flex;align-items:center;justify-content:space-between;gap:25px}
    .cta h2{font-size:28px;line-height:1.3;margin:0 0 5px}
    .cta p{margin:0;color:#f2d8cc;font-size:14px}
    .cta .btn{background:#fff8ef;color:var(--red-dark)}
    .footer{background:var(--dark);color:#f5eee4;padding:55px 0 0}
    .footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px;padding-bottom:45px}
    .footer-brand p{color:#bcb6ac;font-size:14px}
    .footer h3{font-size:15px;margin:4px 0 16px}
    .footer-grid>div:not(.footer-brand) a{display:block;color:#bcb6ac;font-size:14px;margin:9px 0}
    .footer-grid a:hover{color:#f0b49d}
    .copyright{border-top:1px solid #4d4d47;padding:18px 0;display:flex;justify-content:space-between;color:#918d85;font-size:12px}
    @media(max-width:1024px){.navbar{gap:18px}.logo{min-width:220px}.nav-links{gap:15px}.article-layout{gap:30px}}
    @media(max-width:768px){
      .container{width:min(100% - 32px,var(--container))}
      .topline .container span{display:none}
      .navbar{height:68px}.nav-links{display:none}.nav-action{margin-left:auto}.menu-toggle{display:block;order:3}
      .article-banner{padding:42px 0}.article-layout{display:block;padding:45px 0 60px}.side-panel{position:static;margin-top:40px}
      .article-banner h1{font-size:36px}.article-content h2{font-size:26px}
      .cta-inner{align-items:flex-start;flex-direction:column}.cta .btn{width:100%}
      .footer-grid{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}
    }
    @media(max-width:520px){
      .logo{min-width:0}.logo-text strong{font-size:15px}.logo-text small{font-size:9px}
      .nav-action{font-size:12px;padding:0 12px}.article-banner h1{font-size:29px}
      .banner-info{gap:8px 14px}.article-intro{font-size:16px}.article-content{font-size:15px}
      .article-end{display:block}.article-end a{display:block;margin:8px 0}
      .footer-grid{grid-template-columns:1fr}.copyright{display:block}.copyright span{display:block;margin:4px 0}
    }

/* roulang page: category1 */
:root{
      --ink:#24231f;
      --muted:#706b62;
      --paper:#f5f1e9;
      --paper-deep:#ebe4d7;
      --white:#fffdf9;
      --red:#a84936;
      --red-dark:#803828;
      --sage:#68766a;
      --line:#d9d0c2;
      --dark:#292a25;
      --radius:16px;
      --shadow:0 12px 30px rgba(57,43,28,.08);
      --container:1200px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;background:var(--paper);color:var(--ink);font-family:"Noto Sans SC","Microsoft YaHei",Arial,sans-serif;line-height:1.7}
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    button,input,textarea{font:inherit}
    button{cursor:pointer}
    .container{width:min(var(--container),calc(100% - 48px));margin:auto}
    .topline{background:var(--dark);color:#d5cec1;font-size:12px}
    .topline .container{height:36px;display:flex;align-items:center;justify-content:space-between}
    .topline a{color:#f0b49d}
    .site-header{position:sticky;top:0;z-index:20;background:rgba(245,241,233,.96);border-bottom:1px solid var(--line);backdrop-filter:blur(10px)}
    .navbar{height:78px;display:flex;align-items:center;gap:36px}
    .logo{display:flex;align-items:center;gap:12px;min-width:245px}
    .logo-mark{width:38px;height:38px;border:2px solid var(--red);border-radius:9px;display:grid;place-items:center;color:var(--red);font-size:17px;font-weight:800;position:relative}
    .logo-mark:after{content:"";position:absolute;inset:5px;border:1px solid var(--red);border-radius:4px}
    .logo-text strong{display:block;font-size:18px;line-height:1.15;letter-spacing:.04em}
    .logo-text small{display:block;color:var(--muted);font:11px Arial,sans-serif;letter-spacing:.14em;margin-top:3px}
    .nav-links{display:flex;align-items:center;gap:25px;margin-left:auto}
    .nav-links a{font-size:14px;color:#5d584f;position:relative;padding:25px 0}
    .nav-links a:after{content:"";position:absolute;bottom:16px;left:0;width:0;height:2px;background:var(--red);transition:.25s}
    .nav-links a:hover,.nav-links a.active{color:var(--red-dark)}
    .nav-links a:hover:after,.nav-links a.active:after{width:100%}
    .nav-action,.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 20px;border-radius:9px;border:1px solid transparent;transition:.25s}
    .nav-action,.btn-primary{background:var(--red);color:#fffaf4;box-shadow:0 6px 14px rgba(168,73,54,.18)}
    .nav-action:hover,.btn-primary:hover{background:var(--red-dark);transform:translateY(-2px);color:#fffaf4}
    .btn-outline{border-color:#a99d8c;background:rgba(255,253,249,.35);color:var(--ink)}
    .btn-outline:hover{border-color:var(--red);color:var(--red);transform:translateY(-2px)}
    .nav-action:focus,.btn:focus,.faq-q:focus,.menu-toggle:focus{outline:3px solid rgba(168,73,54,.28);outline-offset:3px}
    .menu-toggle{display:none;background:none;border:0;color:var(--ink);font-size:25px}
    .crumbbar{padding:24px 0 0;color:var(--muted);font-size:13px}
    .crumbbar a:hover{color:var(--red)}
    .crumbbar span{padding:0 9px;color:#b2a797}
    .category-hero{padding:42px 0 76px}
    .category-hero-grid{display:grid;grid-template-columns:1fr .88fr;gap:74px;align-items:center}
    .eyebrow{display:flex;align-items:center;gap:10px;color:var(--red);font:600 13px Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase}
    .eyebrow:before{content:"";width:30px;height:1px;background:var(--red)}
    h1{font-size:clamp(38px,5.2vw,68px);line-height:1.16;letter-spacing:-.055em;margin:18px 0 22px;max-width:700px}
    .hero-copy{font-size:17px;color:var(--muted);max-width:650px}
    .hero-tags{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}
    .badge{display:inline-flex;color:var(--red-dark);background:#f5ded5;border:1px solid #e6bbae;border-radius:20px;padding:3px 10px;font-size:12px}
    .hero-visual{position:relative}
    .hero-visual img{width:100%;aspect-ratio:1.2/1;object-fit:cover;border-radius:20px;box-shadow:var(--shadow);filter:saturate(.78)}
    .seal{position:absolute;right:-18px;bottom:24px;width:88px;height:88px;border:1px solid #d99a86;border-radius:50%;background:#f3d9cf;color:var(--red-dark);display:grid;place-items:center;text-align:center;font-size:13px;line-height:1.25;transform:rotate(9deg)}
    .section{padding:82px 0}
    .section-soft{background:var(--paper-deep)}
    .section-dark{background:var(--dark);color:#f8f1e6}
    .section-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:32px}
    .section-kicker{color:var(--red);font-size:13px;letter-spacing:.1em;font-weight:700}
    .section h2{font-size:clamp(28px,3.5vw,44px);line-height:1.25;letter-spacing:-.04em;margin:8px 0 0}
    .section-intro{max-width:490px;color:var(--muted);margin:0}
    .section-dark .section-kicker{color:#e7a28d}
    .section-dark .section-intro{color:#c0bbb1}
    .guide-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:20px}
    .feature-card,.mini-card{background:var(--white);border:1px solid var(--line);border-radius:20px;overflow:hidden;transition:.25s}
    .feature-card:hover,.mini-card:hover,.index-row:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
    .feature-card{display:grid;grid-template-columns:.95fr 1.05fr}
    .feature-card img{height:100%;min-height:320px;object-fit:cover}
    .card-body{padding:32px}
    .card-body h3{font-size:29px;line-height:1.3;margin:18px 0 12px}
    .card-body p,.mini-card p{color:var(--muted);font-size:14px}
    .card-link{display:inline-flex;margin-top:16px;color:var(--red-dark);font-weight:700;font-size:14px}
    .card-link:after{content:"→";margin-left:8px;transition:.2s}
    .card-link:hover:after{margin-left:13px}
    .side-cards{display:grid;gap:20px}
    .mini-card{padding:25px;position:relative}
    .mini-card h3{font-size:21px;margin:10px 0 7px}
    .mini-card .number{position:absolute;right:22px;top:18px;color:#c5b8a5;font:700 28px Georgia,serif}
    .index-list{display:grid;gap:12px;max-width:940px}
    .index-row{display:grid;grid-template-columns:70px 1fr auto;align-items:center;gap:22px;background:var(--white);border:1px solid var(--line);border-radius:13px;padding:19px 23px;transition:.25s}
    .index-row .num{font:700 23px Georgia,serif;color:var(--red)}
    .index-row h3{font-size:18px;margin:0 0 3px}
    .index-row p{margin:0;color:var(--muted);font-size:13px}
    .index-row time{font-size:12px;color:var(--muted);white-space:nowrap}
    .split-reading{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:start}
    .keyword-stack{border-left:2px solid var(--red);padding-left:24px}
    .keyword-stack strong{display:block;font-size:clamp(28px,4vw,48px);line-height:1.15;letter-spacing:-.05em;margin-bottom:12px}
    .keyword-stack em{font:normal 15px Arial,sans-serif;color:var(--red)}
    .reading-copy p{color:#c0bbb1;margin:0 0 18px;font-size:16px}
    .reading-points{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:25px}
    .reading-point{border-top:1px solid #5d5b52;padding-top:13px;color:#e9e0d2;font-size:14px}
    .faq-list{max-width:870px;margin:auto;border-top:1px solid var(--line)}
    .faq-item{border-bottom:1px solid var(--line)}
    .faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;text-align:left;background:none;border:0;padding:20px 0;color:var(--ink);font-weight:700;font-size:16px}
    .faq-q span{font-size:24px;color:var(--red);font-weight:400;transition:.2s}
    .faq-item.open .faq-q span{transform:rotate(45deg)}
    .faq-a{display:none;color:var(--muted);font-size:14px;padding:0 45px 20px 0}
    .faq-item.open .faq-a{display:block}
    .cta{padding:38px 0;background:#ead5ca}
    .cta-inner{display:flex;align-items:center;justify-content:space-between;gap:30px}
    .cta h2{font-size:30px;margin:0 0 5px}
    .cta p{margin:0;color:var(--muted);font-size:14px}
    .cta-actions{display:flex;gap:12px;flex-shrink:0}
    .footer{background:var(--dark);color:#e9e1d4;padding:64px 0 20px}
    .footer-grid{display:grid;grid-template-columns:1.6fr .7fr .8fr;gap:50px;padding-bottom:45px}
    .footer .logo-text strong{color:#f8f1e6}
    .footer .logo-text small{color:#aaa399}
    .footer p{color:#bdb7ac;font-size:14px}
    .footer h3{font-size:14px;margin:4px 0 15px;color:#f1e7d9}
    .footer-grid>div:not(:first-child) a{display:block;color:#bdb7ac;font-size:13px;margin:8px 0}
    .footer-grid>div:not(:first-child) a:hover{color:#f0b49d}
    .copyright{border-top:1px solid #4c4c45;padding-top:18px;display:flex;justify-content:space-between;color:#96938a;font-size:12px}
    @media(max-width:1024px){
      .navbar{gap:18px}.logo{min-width:210px}.nav-links{gap:15px}
      .category-hero-grid{gap:40px}.feature-card{grid-template-columns:1fr}
      .feature-card img{min-height:230px;height:230px}
    }
    @media(max-width:768px){
      .container{width:min(var(--container),calc(100% - 34px))}
      .topline .container{height:34px}
      .navbar{height:68px;justify-content:space-between}
      .menu-toggle{display:block}
      .nav-links{display:none;position:absolute;top:68px;left:0;right:0;background:var(--paper);border-bottom:1px solid var(--line);padding:12px 18px 20px;flex-direction:column;align-items:stretch;gap:0}
      .nav-links.show{display:flex}
      .nav-links a{padding:13px 0;border-bottom:1px solid var(--line)}
      .nav-links a:after{bottom:0}.nav-action{display:none}
      .category-hero{padding:28px 0 58px}.category-hero-grid{grid-template-columns:1fr;gap:32px}
      h1{font-size:clamp(36px,11vw,54px)}
      .hero-visual img{aspect-ratio:1.4/1}.seal{right:10px}
      .section{padding:62px 0}.section-head,.cta-inner{display:block}
      .section-intro{margin-top:16px}.guide-grid,.split-reading{grid-template-columns:1fr;gap:18px}
      .index-row{grid-template-columns:45px 1fr;gap:14px;padding:16px}
      .index-row time{grid-column:2}.reading-points{grid-template-columns:1fr}
      .cta-actions{margin-top:22px}.footer-grid{grid-template-columns:1fr 1fr;gap:30px}
      .footer-brand{grid-column:1/-1}.copyright{display:block}.copyright span{display:block;margin-top:5px}
    }
    @media(max-width:520px){
      .logo{min-width:0}.logo-text strong{font-size:15px}.logo-mark{width:34px;height:34px}
      .topline .container span{max-width:230px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
      .hero-buttons,.cta-actions{display:grid;grid-template-columns:1fr}.btn{width:100%}
      .card-body{padding:24px}.card-body h3{font-size:25px}
      .footer-grid{grid-template-columns:1fr}.footer-brand{grid-column:auto}
    }