/* roulang page: index */
:root{
  --ink:#202522;
  --muted:#69716b;
  --paper:#f4f6f2;
  --white:#fff;
  --yellow:#e8cf38;
  --yellow-dark:#c4aa18;
  --green:#39735a;
  --green-deep:#214936;
  --coral:#e47a5d;
  --line:#dce3dc;
  --soft:#e9eee8;
  --radius:8px;
  --shadow:0 12px 32px rgba(32,37,34,.08);
  --container:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",Arial,sans-serif;color:var(--ink);background:var(--paper);line-height:1.7;font-size:15px}
img{display:block;width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
button{cursor:pointer}
.container{width:min(var(--container),calc(100% - 48px));margin:0 auto}
.site-header{position:sticky;top:0;z-index:20;background:rgba(244,246,242,.96);border-bottom:1px solid var(--line);backdrop-filter:blur(12px)}
.navbar{height:76px;display:flex;align-items:center;justify-content:space-between;gap:28px}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:19px;letter-spacing:.02em;white-space:nowrap}
.logo-mark{width:38px;height:38px;border-radius:9px;background:var(--yellow);display:grid;place-items:center;font-size:14px;font-weight:900;color:var(--ink);box-shadow:4px 4px 0 var(--green)}
.nav-links{display:flex;align-items:center;gap:7px}
.nav-links a{padding:10px 15px;border-radius:6px;color:#4c554f;transition:.2s}
.nav-links a:hover,.nav-links a.active{background:var(--yellow);color:var(--ink)}
.menu-toggle{display:none;border:1px solid var(--line);background:var(--white);border-radius:6px;width:42px;height:40px;color:var(--ink)}
.menu-toggle span{display:block;width:19px;height:2px;background:currentColor;margin:4px auto}
.hero{position:relative;min-height:600px;display:flex;align-items:center;overflow:hidden;background:var(--green-deep) url('/assets/images/0788062e409517dc.jpg') center/cover no-repeat}
.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,39,29,.94) 0%,rgba(20,39,29,.76) 47%,rgba(20,39,29,.2) 100%)}
.hero-inner{position:relative;z-index:1;color:#fff;padding:90px 0 100px}
.hero-copy{max-width:700px}
.kicker{display:inline-flex;align-items:center;gap:8px;color:var(--yellow);font-weight:700;font-size:13px;letter-spacing:.1em;margin-bottom:20px}
.kicker:before{content:"";width:24px;height:2px;background:var(--yellow)}
.hero h1{font-size:clamp(38px,5vw,68px);line-height:1.12;letter-spacing:-.03em;margin-bottom:20px}
.hero h1 em{font-style:normal;color:var(--yellow)}
.hero-sub{font-size:22px;font-weight:600;margin-bottom:18px;color:#f8f9f4}
.hero-text{max-width:650px;color:#dce7dd;font-size:16px;line-height:2}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 20px;border-radius:6px;border:1px solid transparent;font-weight:700;transition:.2s;gap:8px}
.btn-primary{background:var(--yellow);color:var(--ink)}
.btn-primary:hover{background:#f4db43;transform:translateY(-2px)}
.btn-secondary{border-color:rgba(255,255,255,.55);color:#fff;background:rgba(255,255,255,.08)}
.btn-secondary:hover{background:#fff;color:var(--ink)}
.btn-outline{border-color:var(--green);color:var(--green);background:transparent}
.btn-outline:hover{background:var(--green);color:#fff}
.btn:focus-visible,.nav-links a:focus-visible,.menu-toggle:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--coral);outline-offset:3px}
.section{padding:88px 0}
.section-alt{background:#eaf0e9}
.section-white{background:#fff}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:34px}
.section-head > div{max-width:700px}
.eyebrow{color:var(--green);font-weight:800;font-size:12px;letter-spacing:.13em;text-transform:uppercase;margin-bottom:8px}
.section h2{font-size:clamp(27px,3.3vw,42px);line-height:1.2;letter-spacing:-.02em}
.section-lead{color:var(--muted);margin-top:12px;max-width:720px}
.text-link{color:var(--green);font-weight:700;border-bottom:1px solid var(--green);padding-bottom:2px}
.media-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.media-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:.25s}
.media-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:#c5d3c6}
.media-cover{aspect-ratio:3/4;position:relative;overflow:hidden;background:var(--soft)}
.media-cover img{height:100%;object-fit:cover;transition:.35s}
.media-card:hover .media-cover img{transform:scale(1.04)}
.badge{position:absolute;top:10px;left:10px;background:var(--yellow);color:var(--ink);padding:3px 8px;border-radius:4px;font-size:11px;font-weight:800}
.card-body{padding:13px 13px 15px}
.card-title{font-size:16px;font-weight:800;line-height:1.4;min-height:45px}
.card-meta{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:12px;margin-top:8px}
.score{color:var(--coral);font-weight:800}
.feature-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:20px}
.feature-main{position:relative;min-height:410px;border-radius:var(--radius);overflow:hidden;color:#fff;background:var(--green-deep)}
.feature-main img{height:100%;object-fit:cover;opacity:.78}
.feature-overlay{position:absolute;inset:0;padding:30px;display:flex;flex-direction:column;justify-content:end;background:linear-gradient(0deg,rgba(20,39,29,.9),transparent 70%)}
.feature-overlay h3{font-size:31px;margin:7px 0}
.feature-overlay p{color:#dbe9dd;max-width:520px}
.feature-side{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.mini-feature{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.mini-feature img{aspect-ratio:1.25;object-fit:cover}
.mini-feature div{padding:14px}
.mini-feature h3{font-size:17px;line-height:1.4}
.mini-feature p{font-size:13px;color:var(--muted);margin-top:5px}
.channel-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.channel{padding:24px;background:var(--white);border-left:5px solid var(--green);border-radius:var(--radius);transition:.2s}
.channel:nth-child(2){border-color:var(--yellow)}
.channel:nth-child(3){border-color:var(--coral)}
.channel:nth-child(4){border-color:#879e5d}
.channel:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.channel-icon{font-size:25px;margin-bottom:12px}
.channel h3{font-size:19px;margin-bottom:7px}
.channel p{font-size:13px;color:var(--muted);line-height:1.75}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative}
.steps:before{content:"";position:absolute;top:24px;left:10%;right:10%;height:2px;background:#cbd9cd}
.step{position:relative;text-align:center;padding:0 16px}
.step-no{position:relative;z-index:1;margin:0 auto 18px;width:50px;height:50px;border-radius:50%;display:grid;place-items:center;background:var(--yellow);font-size:18px;font-weight:900;border:6px solid var(--paper)}
.step h3{font-size:17px;margin-bottom:6px}
.step p{color:var(--muted);font-size:13px}
.rank-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.rank-list{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:8px 20px}
.rank-item{display:grid;grid-template-columns:36px 1fr auto auto;gap:13px;align-items:center;padding:15px 0;border-bottom:1px solid var(--line)}
.rank-item:last-child{border-bottom:0}
.rank-num{font-size:22px;font-weight:900;color:#a7b1a8}
.rank-item:nth-child(-n+3) .rank-num{color:var(--coral)}
.rank-name{font-weight:700}
.rank-tag{font-size:11px;color:var(--green);background:#e8f0e9;padding:3px 7px;border-radius:4px}
.rank-score{font-weight:800;color:var(--coral);font-size:13px}
.topic-wall{display:grid;grid-template-columns:1.1fr .9fr .9fr;grid-template-rows:190px 190px;gap:14px}
.topic{position:relative;overflow:hidden;border-radius:var(--radius);color:#fff;background:var(--green)}
.topic:first-child{grid-row:span 2}
.topic img{height:100%;object-fit:cover;opacity:.72;transition:.3s}
.topic:hover img{transform:scale(1.05)}
.topic:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(20,39,29,.8),transparent 70%)}
.topic-text{position:absolute;z-index:1;left:20px;right:20px;bottom:18px}
.topic-text h3{font-size:21px}
.topic-text p{font-size:12px;color:#e6eee7}
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.news-item{display:grid;grid-template-columns:120px 1fr;gap:14px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.news-item img{height:92px;object-fit:cover;border-radius:6px}
.news-item time{color:var(--coral);font-size:12px}
.news-item h3{font-size:16px;line-height:1.5;margin:4px 0}
.news-item p{font-size:12px;color:var(--muted)}
.info-band{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center;background:var(--green-deep);color:#fff;border-radius:var(--radius);padding:36px 42px}
.info-band h2{font-size:30px;line-height:1.3}
.info-band p{color:#d7e5d9;margin-top:10px}
.info-points{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.info-point{padding:17px;border:1px solid rgba(255,255,255,.18);border-radius:6px}
.info-point strong{display:block;color:var(--yellow);font-size:18px}
.info-point span{display:block;color:#dce7dd;font-size:13px;margin-top:3px}
.faq-list{max-width:900px;border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line);padding:20px 0}
summary{cursor:pointer;font-size:17px;font-weight:800;list-style:none;display:flex;justify-content:space-between;gap:20px}
summary::-webkit-details-marker{display:none}
summary:after{content:"+";font-size:23px;color:var(--green);line-height:1}
details[open] summary:after{content:"−"}
details p{color:var(--muted);padding:12px 34px 0 0;max-width:760px}
.notice{background:var(--yellow);padding:19px 24px;border-radius:var(--radius);display:flex;justify-content:space-between;align-items:center;gap:20px}
.notice strong{font-size:17px}
.notice span{display:block;font-size:13px;margin-top:3px}
.cta-section{background:#dfe9df}
.cta-box{display:grid;grid-template-columns:1fr auto;align-items:center;gap:30px;background:#fff;padding:36px 42px;border-radius:var(--radius);border:1px solid var(--line)}
.cta-box h2{font-size:32px;line-height:1.3}
.cta-box p{color:var(--muted);margin-top:8px}
.search-form{display:flex;gap:9px;margin-top:20px;max-width:610px}
.search-form input{height:46px;flex:1;border:1px solid var(--line);border-radius:6px;padding:0 14px;background:var(--paper);color:var(--ink)}
.search-form input::placeholder{color:#929b94}
.site-footer{background:#202d25;color:#dce6dd;padding:58px 0 22px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px;padding-bottom:40px}
.footer-brand{font-size:20px;font-weight:800;color:#fff;margin-bottom:12px}
.footer-desc{font-size:13px;color:#aebdb1;max-width:300px}
.footer-col h3{color:var(--yellow);font-size:14px;margin-bottom:14px}
.footer-col a,.footer-col span{display:block;color:#b8c7bb;font-size:13px;margin:7px 0;transition:.2s}
.footer-col a:hover{color:#fff;padding-left:3px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.14);padding-top:18px;color:#98aa9c;font-size:12px}
@media(max-width:1024px){
  .media-grid{grid-template-columns:repeat(4,1fr)}
  .channel-grid{grid-template-columns:repeat(2,1fr)}
  .topic-wall{grid-template-columns:1fr 1fr;grid-template-rows:220px 180px}
  .topic:first-child{grid-row:span 2}
}
@media(max-width:768px){
  .container{width:min(var(--container),calc(100% - 32px))}
  .navbar{height:68px}
  .menu-toggle{display:block}
  .nav-links{display:none;position:absolute;left:16px;right:16px;top:76px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:8px;box-shadow:var(--shadow);flex-direction:column;align-items:stretch}
  .nav-links.open{display:flex}
  .nav-links a{padding:12px 14px}
  .hero{min-height:590px}
  .hero-inner{padding:72px 0}
  .section{padding:64px 0}
  .section-head{display:block}
  .section-head .text-link{display:inline-block;margin-top:15px}
  .feature-grid,.rank-grid,.info-band,.cta-box{grid-template-columns:1fr}
  .feature-side{grid-template-columns:1fr 1fr}
  .news-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr;gap:28px 0}
  .steps:before{display:none}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:520px){
  .brand{font-size:16px}
  .logo-mark{width:34px;height:34px;font-size:12px}
  .hero h1{font-size:39px}
  .hero-sub{font-size:18px}
  .hero-text{font-size:14px}
  .hero-actions{display:grid}
  .hero-actions .btn{width:100%}
  .media-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .card-body{padding:10px}
  .card-title{font-size:14px;min-height:40px}
  .feature-side{grid-template-columns:1fr}
  .topic-wall{display:block}
  .topic{height:210px;margin-bottom:12px}
  .channel-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .rank-item{grid-template-columns:29px 1fr auto}
  .rank-tag{display:none}
  .info-band,.cta-box{padding:26px 22px}
  .info-points{grid-template-columns:1fr}
  .notice{display:block}
  .notice .btn{margin-top:14px}
  .search-form{display:grid}
  .search-form .btn{width:100%}
  .footer-grid{grid-template-columns:1fr}
}

/* roulang page: category1 */
:root {
      --ink: #202522;
      --muted: #69716b;
      --paper: #f4f6f2;
      --white: #fff;
      --yellow: #e8cf38;
      --yellow-dark: #c4aa18;
      --green: #39735a;
      --green-deep: #214936;
      --coral: #e47a5d;
      --line: #dce3dc;
      --soft: #e9eee8;
      --radius: 8px;
      --shadow: 0 12px 32px rgba(32, 37, 34, .08);
      --container: 1180px;
      --space-section: 74px;
    }

    *, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; scroll-padding-top: 92px; }
    body {
      margin: 0;
      color: var(--ink);
      background: var(--paper);
      font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", Arial, sans-serif;
      font-size: 15px;
      line-height: 1.7;
      -webkit-font-smoothing: antialiased;
    }
    img { display: block; width: 100%; height: auto; }
    a { color: inherit; text-decoration: none; }
    button, input { font: inherit; }
    button { cursor: pointer; }
    button:disabled { cursor: not-allowed; opacity: .55; }
    :focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; }
    ::selection { color: var(--ink); background: var(--yellow); }

    .container { width: min(var(--container), calc(100% - 48px)); margin: 0 auto; }
    .site-header {
      position: sticky;
      top: 0;
      z-index: 30;
      background: rgba(244, 246, 242, .96);
      border-bottom: 1px solid var(--line);
      backdrop-filter: blur(12px);
    }
    .navbar {
      min-height: 76px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 28px;
    }
    .brand {
      display: inline-flex;
      align-items: center;
      gap: 11px;
      color: var(--ink);
      font-size: 19px;
      font-weight: 800;
      white-space: nowrap;
    }
    .logo-mark {
      width: 38px;
      height: 38px;
      display: grid;
      place-items: center;
      border-radius: 9px;
      background: var(--yellow);
      color: var(--ink);
      font-size: 14px;
      font-weight: 900;
      box-shadow: 4px 4px 0 var(--green);
    }
    .nav-links { display: flex; align-items: center; gap: 7px; }
    .nav-links a {
      padding: 10px 15px;
      border-radius: 6px;
      color: #4c554f;
      transition: background .2s ease, color .2s ease;
    }
    .nav-links a:hover, .nav-links a.active { background: var(--yellow); color: var(--ink); }
    .menu-toggle {
      display: none;
      width: 44px;
      height: 42px;
      padding: 8px;
      border: 1px solid var(--line);
      border-radius: 6px;
      background: var(--white);
      color: var(--ink);
    }
    .menu-toggle span {
      display: block;
      width: 19px;
      height: 2px;
      margin: 4px auto;
      background: currentColor;
      transition: transform .2s ease, opacity .2s ease;
    }
    .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(6px) rotate(45deg); }
    .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
    .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-6px) rotate(-45deg); }

    main { min-height: 60vh; }
    .page-heading {
      padding: 34px 0 31px;
      border-bottom: 1px solid var(--line);
      background: var(--paper);
    }
    .breadcrumb {
      display: flex;
      align-items: center;
      gap: 9px;
      margin: 0 0 19px;
      color: var(--muted);
      font-size: 13px;
    }
    .breadcrumb a { transition: color .2s ease; }
    .breadcrumb a:hover { color: var(--green); }
    .breadcrumb .separator { color: #9ca69e; }
    .heading-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(250px, 340px);
      align-items: end;
      gap: 34px;
    }
    .eyebrow {
      margin: 0 0 7px;
      color: var(--green);
      font-size: 12px;
      font-weight: 800;
    }
    h1, h2, h3, p { margin-top: 0; }
    h1 {
      max-width: 760px;
      margin-bottom: 10px;
      font-size: 43px;
      line-height: 1.2;
      font-weight: 850;
    }
    .heading-subtitle { margin: 0; color: var(--muted); font-size: 16px; }
    .heading-art {
      position: relative;
      min-height: 144px;
      overflow: hidden;
      border-radius: var(--radius);
      background: var(--green-deep);
    }
    .heading-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
    .heading-art::after {
      position: absolute;
      inset: 0;
      content: "";
      background: linear-gradient(90deg, rgba(22, 48, 34, .66), rgba(22, 48, 34, .04));
    }
    .art-note {
      position: absolute;
      z-index: 1;
      left: 18px;
      bottom: 15px;
      color: #fff;
      font-size: 13px;
      font-weight: 700;
    }

    .section { padding: var(--space-section) 0; }
    .section-white { background: var(--white); }
    .section-alt { background: #eaf0e9; }
    .section-line { border-top: 1px solid var(--line); }
    .section-head {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 24px;
      margin-bottom: 28px;
    }
    .section-head > div { max-width: 760px; }
    .section h2 {
      margin: 0;
      font-size: 31px;
      line-height: 1.28;
      font-weight: 820;
    }
    .section-lead { margin: 10px 0 0; color: var(--muted); max-width: 720px; }
    .section-kicker {
      display: inline-block;
      margin-bottom: 8px;
      color: var(--green);
      font-size: 12px;
      font-weight: 800;
    }
    .intro-layout {
      display: grid;
      grid-template-columns: minmax(0, 1.12fr) minmax(280px, .88fr);
      gap: 42px;
      align-items: start;
    }
    .intro-copy { max-width: 740px; }
    .intro-copy p { margin: 0 0 14px; color: #4c554f; }
    .intro-aside {
      padding: 21px 23px;
      border-left: 4px solid var(--yellow);
      background: #fff;
    }
    .intro-aside strong { display: block; margin-bottom: 5px; font-size: 16px; }
    .intro-aside p { margin: 0; color: var(--muted); font-size: 14px; }

    .category-list { display: flex; flex-wrap: wrap; gap: 10px; }
    .category-chip {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      min-height: 46px;
      padding: 0 16px;
      border: 1px solid #cbd6cb;
      border-radius: 6px;
      background: rgba(255, 255, 255, .72);
      color: var(--ink);
      font-weight: 700;
      transition: background .2s ease, border-color .2s ease, transform .2s ease;
    }
    .category-chip::before {
      width: 8px;
      height: 8px;
      border-radius: 2px;
      background: var(--green);
      content: "";
    }
    .category-chip:hover { transform: translateY(-2px); border-color: var(--green); background: #fff; }
    .category-chip[aria-pressed="true"] { border-color: var(--green); background: var(--green); color: #fff; }
    .category-chip[aria-pressed="true"]::before { background: var(--yellow); }
    .category-note { margin: 16px 0 0; color: var(--muted); font-size: 13px; }

    .content-list {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
    }
    .content-item {
      display: grid;
      grid-template-columns: 142px minmax(0, 1fr);
      min-height: 168px;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--white);
      transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    }
    .content-item:hover { transform: translateY(-3px); border-color: #c5d3c6; box-shadow: var(--shadow); }
    .content-image { min-height: 168px; overflow: hidden; background: var(--soft); }
    .content-image img { height: 100%; object-fit: cover; transition: transform .3s ease; }
    .content-item:hover .content-image img { transform: scale(1.04); }
    .content-copy { align-self: center; padding: 16px 18px; }
    .content-tag, .status-tag {
      display: inline-flex;
      align-items: center;
      min-height: 23px;
      padding: 2px 8px;
      border-radius: 4px;
      background: #e8f0e9;
      color: var(--green);
      font-size: 11px;
      font-weight: 800;
    }
    .content-copy h3 { margin: 9px 0 5px; font-size: 17px; line-height: 1.4; }
    .content-copy p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
    .list-footer { display: flex; justify-content: center; margin-top: 25px; }
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 46px;
      padding: 0 20px;
      border: 1px solid transparent;
      border-radius: 6px;
      font-weight: 750;
      transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
    }
    .btn-primary { background: var(--yellow); color: var(--ink); }
    .btn-primary:hover { transform: translateY(-2px); background: #f4db43; }
    .btn-outline { border-color: var(--green); background: transparent; color: var(--green); }
    .btn-outline:hover { background: var(--green); color: #fff; }
    .btn:active { transform: translateY(1px); }

    .timeline {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      border-top: 1px solid #cbd6cb;
    }
    .timeline-item {
      position: relative;
      min-height: 144px;
      padding: 23px 22px 8px 0;
      border-right: 1px solid #cbd6cb;
    }
    .timeline-item:not(:first-child) { padding-left: 22px; }
    .timeline-item:last-child { border-right: 0; }
    .timeline-item::before {
      position: absolute;
      top: -5px;
      left: 0;
      width: 9px;
      height: 9px;
      border: 2px solid #eaf0e9;
      border-radius: 50%;
      background: var(--coral);
      content: "";
    }
    .timeline-item:not(:first-child)::before { left: 22px; }
    .timeline-item h3 { margin: 0 0 7px; font-size: 16px; line-height: 1.45; }
    .timeline-item p { margin: 0; color: var(--muted); font-size: 13px; }

    .editorial-layout {
      display: grid;
      grid-template-columns: minmax(240px, .7fr) minmax(0, 1.3fr);
      gap: 42px;
      align-items: start;
    }
    .editorial-aside { position: sticky; top: 105px; }
    .editorial-aside h2 { max-width: 360px; }
    .editorial-aside p { margin: 12px 0 0; color: var(--muted); }
    .editorial-note {
      display: inline-flex;
      margin-top: 17px;
      padding: 5px 9px;
      border-radius: 4px;
      background: #fff1e9;
      color: #9a4b35;
      font-size: 12px;
      font-weight: 700;
    }
    .editorial-list { margin: 0; padding: 0; list-style: none; }
    .editorial-list li {
      display: grid;
      grid-template-columns: 42px minmax(0, 1fr) auto;
      align-items: center;
      gap: 15px;
      min-height: 67px;
      border-bottom: 1px solid var(--line);
    }
    .editorial-list li:first-child { border-top: 1px solid var(--line); }
    .editorial-number { color: var(--coral); font-size: 18px; font-weight: 850; }
    .editorial-title { font-weight: 750; }
    .editorial-type { color: var(--muted); font-size: 12px; }

    .faq-list { max-width: 900px; border-top: 1px solid var(--line); }
    .faq-list details { border-bottom: 1px solid var(--line); }
    .faq-list summary {
      position: relative;
      padding: 19px 42px 19px 0;
      color: var(--ink);
      font-weight: 750;
      cursor: pointer;
      list-style: none;
    }
    .faq-list summary::-webkit-details-marker { display: none; }
    .faq-list summary::after {
      position: absolute;
      top: 50%;
      right: 7px;
      color: var(--green);
      font-size: 22px;
      font-weight: 500;
      content: "+";
      transform: translateY(-50%);
    }
    .faq-list details[open] summary::after { content: "−"; }
    .faq-answer { max-width: 780px; padding: 0 0 18px; color: var(--muted); }
    .faq-answer p { margin: 0; }

    .reading-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 32px;
      padding: 28px 0;
      border-top: 1px solid #cbd6cb;
      border-bottom: 1px solid #cbd6cb;
    }
    .reading-layout h2 { margin: 0 0 7px; font-size: 25px; }
    .reading-layout p { max-width: 730px; margin: 0; color: var(--muted); }
    .reading-links { display: flex; flex-wrap: wrap; gap: 10px; }

    .site-footer { padding: 56px 0 18px; background: #202923; color: #f4f6f2; }
    .footer-grid {
      display: grid;
      grid-template-columns: 1.4fr 1fr 1fr 1fr;
      gap: 32px;
      padding-bottom: 37px;
    }
    .footer-brand { margin-bottom: 11px; font-size: 19px; font-weight: 850; }
    .footer-desc { max-width: 300px; margin: 0; color: #b9c4ba; font-size: 13px; }
    .footer-col { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
    .footer-col h3 { margin: 0 0 6px; font-size: 14px; }
    .footer-col a, .footer-col span { color: #b9c4ba; font-size: 13px; transition: color .2s ease; }
    .footer-col a:hover { color: var(--yellow); }
    .footer-bottom {
      padding-top: 16px;
      border-top: 1px solid rgba(255, 255, 255, .15);
      color: #aeb8af;
      font-size: 12px;
    }

    @media (max-width: 1024px) {
      :root { --space-section: 62px; }
      .heading-layout { grid-template-columns: minmax(0, 1fr) 280px; gap: 24px; }
      h1 { font-size: 38px; }
      .content-item { grid-template-columns: 122px minmax(0, 1fr); }
      .timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 8px; }
      .timeline-item:nth-child(2) { border-right: 0; }
      .timeline-item:nth-child(3) { padding-left: 0; }
      .timeline-item:nth-child(3)::before { left: 0; }
      .editorial-layout { gap: 28px; }
      .footer-grid { gap: 22px; }
    }
    @media (max-width: 768px) {
      .container { width: min(var(--container), calc(100% - 36px)); }
      .navbar { min-height: 68px; }
      .menu-toggle { display: block; }
      .nav-links {
        position: absolute;
        top: calc(100% + 1px);
        right: 18px;
        left: 18px;
        display: none;
        align-items: stretch;
        flex-direction: column;
        gap: 4px;
        padding: 10px;
        border: 1px solid var(--line);
        border-radius: 6px;
        background: var(--paper);
        box-shadow: var(--shadow);
      }
      .nav-links.is-open { display: flex; }
      .nav-links a { padding: 12px 14px; }
      .page-heading { padding: 26px 0; }
      .heading-layout { grid-template-columns: 1fr; gap: 20px; }
      .heading-art { min-height: 130px; }
      h1 { font-size: 34px; }
      .intro-layout, .editorial-layout { grid-template-columns: 1fr; gap: 25px; }
      .content-list { grid-template-columns: 1fr; }
      .editorial-aside { position: static; }
      .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .reading-layout { grid-template-columns: 1fr; align-items: start; gap: 20px; }
    }
    @media (max-width: 520px) {
      :root { --space-section: 50px; }
      .container { width: calc(100% - 32px); }
      .brand { gap: 9px; font-size: 17px; }
      .logo-mark { width: 35px; height: 35px; }
      .breadcrumb { margin-bottom: 14px; }
      h1 { font-size: 30px; }
      .heading-subtitle { font-size: 14px; }
      .section-head { align-items: flex-start; flex-direction: column; gap: 12px; margin-bottom: 22px; }
      .section h2 { font-size: 26px; }
      .content-item { grid-template-columns: 104px minmax(0, 1fr); min-height: 150px; }
      .content-image { min-height: 150px; }
      .content-copy { padding: 12px; }
      .content-copy h3 { font-size: 15px; }
      .content-copy p { font-size: 12px; }
      .timeline { grid-template-columns: 1fr; }
      .timeline-item, .timeline-item:not(:first-child) {
        min-height: 0;
        padding: 17px 0 18px 19px;
        border-right: 0;
        border-bottom: 1px solid #cbd6cb;
      }
      .timeline-item::before, .timeline-item:not(:first-child)::before { top: 23px; left: 0; }
      .timeline-item:last-child { border-bottom: 0; }
      .editorial-list li { grid-template-columns: 30px minmax(0, 1fr); gap: 10px; padding: 12px 0; }
      .editorial-type { grid-column: 2; margin-top: -8px; }
      .footer-grid { grid-template-columns: 1fr 1fr; gap: 25px 18px; }
      .footer-grid > div:first-child { grid-column: 1 / -1; }
      .site-footer { padding-top: 42px; }
      .footer-bottom { line-height: 1.8; }
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
    }