/* roulang page: index */
:root {
      --bg: #f4efe6;
      --bg-soft: #fbf8f2;
      --surface: #ffffff;
      --surface-2: #f7f2ea;
      --text: #171717;
      --muted: #626262;
      --line: #ded4c3;
      --line-strong: #cdbda3;
      --brand: #1f4d43;
      --brand-2: #9e7538;
      --brand-3: #d6b06e;
      --accent: #5e7f75;
      --shadow: 0 14px 40px rgba(32, 41, 37, 0.08);
      --shadow-soft: 0 8px 24px rgba(32, 41, 37, 0.06);
      --radius: 12px;
      --radius-sm: 8px;
      --container: 1180px;
      --gap: 24px;
      --transition: 180ms ease;
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      color: var(--text);
      background: linear-gradient(180deg, #efe7db 0%, #f8f4ed 220px, #f4efe6 100%);
      line-height: 1.7;
      letter-spacing: 0;
    }
    img { max-width: 100%; display: block; }
    a { color: inherit; text-decoration: none; }
    button, input, textarea, select { font: inherit; }
    button {
      border: 0;
      cursor: pointer;
      transition: transform var(--transition), box-shadow var(--transition), background-color var(--transition), border-color var(--transition), color var(--transition);
    }
    :focus-visible {
      outline: 3px solid rgba(158, 117, 56, 0.28);
      outline-offset: 2px;
    }
    .container {
      width: min(var(--container), calc(100% - 32px));
      margin: 0 auto;
    }
    .skip-link {
      position: absolute;
      left: -9999px;
      top: auto;
      width: 1px;
      height: 1px;
      overflow: hidden;
    }
    .skip-link:focus {
      left: 16px;
      top: 16px;
      width: auto;
      height: auto;
      z-index: 1000;
      padding: 10px 14px;
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: 10px;
    }
    .site-header {
      position: sticky;
      top: 0;
      z-index: 100;
      background: rgba(244, 239, 230, 0.92);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid rgba(205, 189, 163, 0.5);
    }
    .header-inner {
      min-height: 76px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
    }
    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
    }
    .brand-mark {
      width: 42px;
      height: 42px;
      border-radius: 12px;
      display: grid;
      place-items: center;
      background: linear-gradient(145deg, var(--brand), #274d57);
      color: #fff;
      box-shadow: var(--shadow-soft);
      flex: 0 0 auto;
      font-weight: 700;
      letter-spacing: 0;
    }
    .brand-text {
      min-width: 0;
    }
    .brand-text strong {
      display: block;
      font-size: 15px;
      line-height: 1.2;
      color: var(--text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .brand-text span {
      display: block;
      color: var(--muted);
      font-size: 12px;
    }
    .nav {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }
    .nav a {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 10px 14px;
      border-radius: 999px;
      color: var(--muted);
      border: 1px solid transparent;
      transition: all var(--transition);
    }
    .nav a:hover,
    .nav a:focus-visible,
    .nav a.active {
      color: var(--brand);
      background: rgba(31, 77, 67, 0.08);
      border-color: rgba(31, 77, 67, 0.15);
    }
    .menu-toggle {
      display: none;
      width: 42px;
      height: 42px;
      border-radius: 10px;
      background: var(--surface);
      border: 1px solid var(--line);
      align-items: center;
      justify-content: center;
    }
    .menu-toggle span,
    .menu-toggle span::before,
    .menu-toggle span::after {
      content: "";
      display: block;
      width: 18px;
      height: 2px;
      background: var(--brand);
      border-radius: 2px;
      position: relative;
    }
    .menu-toggle span::before { position: absolute; top: -6px; left: 0; }
    .menu-toggle span::after { position: absolute; top: 6px; left: 0; }
    .hero {
      position: relative;
      overflow: hidden;
      padding: 28px 0 22px;
    }
    .hero-panel {
      position: relative;
      min-height: 620px;
      border-radius: 24px;
      overflow: hidden;
      background:
        linear-gradient(90deg, rgba(18, 25, 23, 0.86) 0%, rgba(18, 25, 23, 0.72) 44%, rgba(18, 25, 23, 0.28) 100%),
        url('/assets/images/backpic/back-1.jpg') center/cover no-repeat;
      box-shadow: var(--shadow);
      display: grid;
      align-items: end;
    }
    .hero-inner {
      position: relative;
      z-index: 1;
      padding: 52px;
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
      gap: 28px;
      align-items: end;
    }
    .hero-copy {
      color: #f8f3ea;
      max-width: 720px;
    }
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.12);
      border: 1px solid rgba(255, 255, 255, 0.16);
      color: #f5ead7;
      font-size: 13px;
      letter-spacing: 0;
      margin-bottom: 18px;
    }
    h1 {
      margin: 0;
      font-size: clamp(34px, 5vw, 58px);
      line-height: 1.05;
      letter-spacing: 0;
      max-width: 11ch;
    }
    .hero-copy p {
      margin: 18px 0 0;
      font-size: 18px;
      color: rgba(248, 243, 234, 0.9);
      max-width: 58ch;
    }
    .hero-actions {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      margin-top: 28px;
    }
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 46px;
      padding: 0 18px;
      border-radius: 999px;
      border: 1px solid transparent;
      font-weight: 600;
      transition: all var(--transition);
    }
    .btn-primary {
      background: linear-gradient(135deg, var(--brand-3), var(--brand-2));
      color: #1f1406;
      box-shadow: 0 10px 24px rgba(158, 117, 56, 0.28);
    }
    .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(158, 117, 56, 0.32); }
    .btn-secondary {
      background: rgba(255, 255, 255, 0.08);
      border-color: rgba(255, 255, 255, 0.16);
      color: #fff;
    }
    .btn-secondary:hover { background: rgba(255, 255, 255, 0.14); transform: translateY(-1px); }
    .hero-highlights {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      align-self: stretch;
    }
    .highlight-card {
      padding: 18px;
      border-radius: 18px;
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.14);
      backdrop-filter: blur(10px);
      color: #f7f1e8;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 168px;
    }
    .highlight-card strong {
      font-size: 18px;
      margin-bottom: 10px;
    }
    .highlight-card p {
      margin: 0;
      color: rgba(247, 241, 232, 0.86);
      font-size: 14px;
    }
    .section {
      padding: 20px 0 0;
    }
    .section-head {
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 18px;
      margin: 0 0 18px;
    }
    .section-head h2 {
      margin: 0;
      font-size: clamp(24px, 2.6vw, 34px);
      line-height: 1.15;
      letter-spacing: 0;
    }
    .section-head p {
      margin: 0;
      color: var(--muted);
      max-width: 60ch;
    }
    .grid-3 {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: var(--gap);
    }
    .grid-2 {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--gap);
    }
    .card {
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow-soft);
      overflow: hidden;
    }
    .card-pad { padding: 22px; }
    .feature {
      display: grid;
      gap: 16px;
      min-height: 100%;
    }
    .feature .icon {
      width: 52px;
      height: 52px;
      border-radius: 14px;
      display: grid;
      place-items: center;
      color: var(--brand);
      background: linear-gradient(145deg, #ecf0eb, #f6f1e8);
      border: 1px solid rgba(31, 77, 67, 0.08);
      font-size: 20px;
    }
    .feature h3,
    .topic h3,
    .faq-item summary,
    .article-card h3 {
      margin: 0;
      font-size: 18px;
      line-height: 1.35;
    }
    .feature p,
    .topic p,
    .article-card p {
      margin: 0;
      color: var(--muted);
    }
    .stats {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
      margin-top: 18px;
    }
    .stat {
      border-radius: 16px;
      background: var(--surface-2);
      border: 1px solid rgba(205, 189, 163, 0.7);
      padding: 18px;
    }
    .stat strong {
      display: block;
      font-size: 24px;
      line-height: 1.1;
      color: var(--brand);
      margin-bottom: 6px;
    }
    .stat span { color: var(--muted); font-size: 14px; }
    .topic-card {
      overflow: hidden;
      display: grid;
      grid-template-columns: 1.08fr 0.92fr;
      min-height: 280px;
    }
    .topic-copy {
      padding: 28px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 14px;
    }
    .topic-visual {
      position: relative;
      min-height: 280px;
      background: linear-gradient(145deg, rgba(31, 77, 67, 0.08), rgba(158, 117, 56, 0.06)), url('/assets/images/coverpic/cover-1.webp') center/cover no-repeat;
    }
    .topic-visual::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(23, 23, 23, 0.1), rgba(23, 23, 23, 0.36));
    }
    .chips {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }
    .chip {
      display: inline-flex;
      align-items: center;
      min-height: 34px;
      padding: 0 12px;
      border-radius: 999px;
      background: #f0e7d8;
      color: #6a4c1f;
      border: 1px solid #e1d2bb;
      font-size: 13px;
    }
    .article-grid {
      display: grid;
      grid-template-columns: 1.2fr 0.8fr;
      gap: var(--gap);
      align-items: start;
    }
    .article-list {
      display: grid;
      gap: 14px;
    }
    .article-card {
      display: grid;
      grid-template-columns: 132px minmax(0, 1fr);
      gap: 16px;
      padding: 14px;
      border-radius: 16px;
      background: var(--surface);
      border: 1px solid var(--line);
      transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
    }
    .article-card:hover {
      transform: translateY(-2px);
      border-color: rgba(31, 77, 67, 0.18);
      box-shadow: 0 16px 30px rgba(32, 41, 37, 0.08);
    }
    .article-thumb {
      position: relative;
      border-radius: 12px;
      overflow: hidden;
      min-height: 102px;
      background: #ddd center/cover no-repeat;
    }
    .article-thumb.one { background-image: url('/assets/images/coverpic/cover-2.png'); }
    .article-thumb.two { background-image: url('/assets/images/coverpic/cover-3.png'); }
    .article-thumb.three { background-image: url('/assets/images/coverpic/cover-4.jpg'); }
    .article-thumb.four { background-image: url('/assets/images/coverpic/cover-5.png'); }
    .article-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 8px 12px;
      margin-top: 10px;
      color: var(--muted);
      font-size: 13px;
    }
    .tag {
      display: inline-flex;
      align-items: center;
      min-height: 28px;
      padding: 0 10px;
      border-radius: 999px;
      background: rgba(31, 77, 67, 0.08);
      color: var(--brand);
      border: 1px solid rgba(31, 77, 67, 0.14);
      font-size: 12px;
    }
    .side-panel {
      display: grid;
      gap: 14px;
    }
    .side-box {
      padding: 22px;
      border-radius: 18px;
      background: linear-gradient(180deg, #ffffff 0%, #fbf7f1 100%);
      border: 1px solid var(--line);
      box-shadow: var(--shadow-soft);
    }
    .side-box h3 { margin: 0 0 10px; font-size: 18px; }
    .side-box p { margin: 0 0 14px; color: var(--muted); }
    .list {
      margin: 0;
      padding: 0;
      list-style: none;
      display: grid;
      gap: 12px;
    }
    .list li {
      display: flex;
      align-items: start;
      gap: 10px;
      color: var(--text);
    }
    .list li::before {
      content: "";
      width: 8px;
      height: 8px;
      margin-top: 9px;
      border-radius: 999px;
      background: var(--brand-2);
      flex: 0 0 auto;
    }
    .faq {
      display: grid;
      gap: 12px;
    }
    .faq-item {
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: 14px;
      overflow: hidden;
      box-shadow: var(--shadow-soft);
    }
    .faq-item summary {
      list-style: none;
      cursor: pointer;
      padding: 18px 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      color: var(--text);
    }
    .faq-item summary::-webkit-details-marker { display: none; }
    .faq-item summary::after {
      content: "+";
      width: 28px;
      height: 28px;
      display: grid;
      place-items: center;
      border-radius: 999px;
      background: #f4efe6;
      color: var(--brand);
      flex: 0 0 auto;
      transition: transform var(--transition);
    }
    .faq-item[open] summary::after { content: "−"; }
    .faq-item .answer {
      padding: 0 20px 18px;
      color: var(--muted);
    }
    .cta {
      margin: 24px 0 0;
      padding: 28px;
      border-radius: 22px;
      background: linear-gradient(135deg, #163a33 0%, #284f48 50%, #8d6933 100%);
      color: #fff7e9;
      box-shadow: var(--shadow);
      display: grid;
      grid-template-columns: 1.1fr 0.9fr;
      gap: 20px;
      align-items: center;
    }
    .cta h2 {
      margin: 0 0 10px;
      font-size: clamp(24px, 3vw, 36px);
      line-height: 1.18;
    }
    .cta p {
      margin: 0;
      color: rgba(255, 247, 233, 0.9);
      max-width: 58ch;
    }
    .cta-form {
      display: grid;
      gap: 12px;
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 18px;
      padding: 18px;
    }
    .field-row {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }
    .input,
    .textarea,
    .select {
      width: 100%;
      min-height: 46px;
      border-radius: 12px;
      border: 1px solid rgba(255, 255, 255, 0.18);
      background: rgba(255, 255, 255, 0.96);
      color: var(--text);
      padding: 12px 14px;
      transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
    }
    .textarea {
      min-height: 110px;
      resize: vertical;
    }
    .input:focus,
    .textarea:focus,
    .select:focus {
      border-color: rgba(214, 176, 110, 0.95);
      box-shadow: 0 0 0 4px rgba(214, 176, 110, 0.18);
      outline: none;
    }
    .submit {
      justify-self: start;
      background: linear-gradient(135deg, #e3c07f, #c99345);
      color: #261507;
      min-height: 48px;
      padding: 0 20px;
      border-radius: 999px;
      font-weight: 700;
    }
    .submit:hover { transform: translateY(-1px); }
    .site-footer {
      margin-top: 26px;
      padding: 28px 0 34px;
      color: var(--muted);
    }
    .footer-top {
      display: grid;
      grid-template-columns: 1.1fr 0.9fr 0.8fr;
      gap: var(--gap);
      padding: 24px;
      border-radius: 20px;
      background: rgba(255, 255, 255, 0.66);
      border: 1px solid rgba(205, 189, 163, 0.75);
      box-shadow: var(--shadow-soft);
    }
    .footer-top h3 {
      margin: 0 0 12px;
      color: var(--text);
      font-size: 18px;
    }
    .footer-links {
      display: grid;
      gap: 10px;
    }
    .footer-links a {
      color: var(--muted);
    }
    .footer-links a:hover { color: var(--brand); }
    .footer-bottom {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 12px;
      padding: 16px 4px 0;
      font-size: 13px;
    }
    .mobile-hero-panel {
      display: none;
    }
    .notice {
      padding: 18px 20px;
      border-radius: 16px;
      background: #fff7e9;
      border: 1px solid #ead7b3;
      color: #75552c;
    }
    .update-list {
      display: grid;
      gap: 12px;
    }
    .update-item {
      display: grid;
      grid-template-columns: 110px minmax(0, 1fr);
      gap: 14px;
      padding: 16px;
      border-radius: 16px;
      background: var(--surface);
      border: 1px solid var(--line);
      transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
    }
    .update-item:hover {
      transform: translateY(-2px);
      border-color: rgba(31, 77, 67, 0.18);
      box-shadow: 0 14px 28px rgba(32, 41, 37, 0.08);
    }
    .update-item time {
      color: var(--brand);
      font-weight: 700;
      font-size: 14px;
    }
    .update-item h3 {
      margin: 6px 0 8px;
      font-size: 18px;
      line-height: 1.35;
    }
    .update-item p {
      margin: 0;
      color: var(--muted);
    }
    .update-head {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      align-items: center;
      margin-bottom: 8px;
    }
    .thin {
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(205, 189, 163, 0.9), transparent);
      margin: 18px 0;
    }
    @media (max-width: 1080px) {
      .hero-inner { grid-template-columns: 1fr; align-items: start; }
      .hero-panel { min-height: 0; }
      .hero-highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .article-grid,
      .cta,
      .footer-top,
      .topic-card {
        grid-template-columns: 1fr;
      }
      .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 820px) {
      .nav {
        display: none;
        position: absolute;
        top: 76px;
        left: 0;
        right: 0;
        padding: 12px 16px 16px;
        background: rgba(244, 239, 230, 0.98);
        border-bottom: 1px solid rgba(205, 189, 163, 0.6);
      }
      .nav.open { display: grid; grid-template-columns: 1fr; }
      .nav a { justify-content: center; }
      .menu-toggle { display: inline-flex; }
      .hero { padding-top: 18px; }
      .hero-panel { border-radius: 18px; }
      .hero-inner { padding: 26px; }
      .hero-highlights { grid-template-columns: 1fr; }
      .grid-3,
      .grid-2,
      .field-row,
      .update-item,
      .article-card,
      .stats {
        grid-template-columns: 1fr;
      }
      .section-head {
        flex-direction: column;
        align-items: start;
      }
      .card-pad,
      .topic-copy,
      .side-box,
      .cta,
      .footer-top,
      .update-item,
      .article-card { padding: 18px; }
      .article-thumb { min-height: 160px; }
    }
    @media (max-width: 520px) {
      .container { width: min(100% - 22px, var(--container)); }
      .header-inner { min-height: 68px; }
      .brand-mark { width: 38px; height: 38px; border-radius: 10px; }
      .brand-text strong { font-size: 14px; }
      h1 { max-width: none; font-size: 32px; }
      .hero-copy p { font-size: 16px; }
      .btn, .nav a { width: 100%; }
      .hero-actions { display: grid; }
      .hero-copy { max-width: none; }
      .stats { grid-template-columns: 1fr; }
      .article-card { gap: 12px; }
      .faq-item summary { padding: 16px; }
      .faq-item .answer { padding: 0 16px 16px; }
      .site-footer { padding-bottom: 24px; }
    }

/* roulang page: article */
:root {
      --bg:#f4efe6;
      --bg-soft:#fbf8f2;
      --surface:#fff;
      --surface-2:#f7f2ea;
      --text:#171717;
      --muted:#626262;
      --line:#ded4c3;
      --line-strong:#cdbda3;
      --brand:#1f4d43;
      --brand-dark:#163b34;
      --brand-2:#9e7538;
      --brand-3:#d6b06e;
      --accent:#5e7f75;
      --shadow:0 14px 40px rgba(32,41,37,.08);
      --shadow-soft:0 8px 24px rgba(32,41,37,.06);
      --radius:12px;
      --radius-sm:8px;
      --container:1180px;
      --transition:180ms ease;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      color:var(--text);
      background:linear-gradient(180deg,#efe7db 0,#f8f4ed 220px,var(--bg) 100%);
      font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
      line-height:1.75;
      letter-spacing:0;
    }
    img{display:block;max-width:100%}
    a{color:inherit;text-decoration:none}
    button,input,textarea,select{font:inherit}
    button{cursor:pointer}
    .container{width:min(var(--container),calc(100% - 32px));margin:0 auto}
    .site-header{
      position:sticky;top:0;z-index:20;
      background:rgba(244,239,230,.94);
      backdrop-filter:blur(12px);
      border-bottom:1px solid rgba(205,189,163,.55)
    }
    .header-inner{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px}
    .brand{display:flex;align-items:center;gap:12px;min-width:0}
    .brand-mark{
      width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
      background:linear-gradient(145deg,var(--brand),#274d57);color:#fff;
      box-shadow:var(--shadow-soft);font-weight:700;flex:0 0 auto
    }
    .brand-text{min-width:0}
    .brand-text strong{display:block;font-size:15px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .brand-text span{display:block;color:var(--muted);font-size:12px}
    .nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
    .nav a{
      display:inline-flex;align-items:center;padding:10px 14px;border-radius:999px;
      color:var(--muted);border:1px solid transparent;transition:all var(--transition)
    }
    .nav a:hover,.nav a:focus-visible,.nav a.active{
      color:var(--brand);background:rgba(31,77,67,.08);border-color:rgba(31,77,67,.15)
    }
    .menu-toggle{
      display:none;width:42px;height:42px;border-radius:10px;background:var(--surface);
      border:1px solid var(--line);align-items:center;justify-content:center
    }
    .menu-toggle span,.menu-toggle span:before,.menu-toggle span:after{
      content:"";display:block;width:18px;height:2px;background:var(--brand);border-radius:2px;position:relative
    }
    .menu-toggle span:before{position:absolute;top:-6px;left:0}
    .menu-toggle span:after{position:absolute;top:6px;left:0}
    .article-banner{padding:52px 0 34px}
    .banner-inner{
      position:relative;overflow:hidden;min-height:270px;border-radius:18px;
      background:linear-gradient(105deg,rgba(21,48,42,.94),rgba(31,77,67,.72)),url('/assets/images/backpic/back-2.webp') center/cover;
      color:#fff;display:flex;align-items:flex-end;padding:42px 52px;box-shadow:var(--shadow)
    }
    .banner-inner:after{
      content:"";position:absolute;right:7%;top:28%;width:150px;height:1px;background:rgba(214,176,110,.8);
      box-shadow:0 16px 0 rgba(214,176,110,.45),0 32px 0 rgba(214,176,110,.22)
    }
    .breadcrumbs{position:absolute;top:22px;left:52px;color:rgba(255,255,255,.72);font-size:13px}
    .breadcrumbs a:hover{color:#fff}
    .banner-copy{position:relative;z-index:1;max-width:820px}
    .eyebrow,.tag{
      display:inline-flex;align-items:center;padding:6px 11px;border-radius:999px;
      font-size:12px;line-height:1.4;background:rgba(214,176,110,.16);color:#f4d99e;
      border:1px solid rgba(214,176,110,.35)
    }
    .banner-copy h1{margin:14px 0 0;font-size:clamp(30px,4vw,50px);line-height:1.18;letter-spacing:0;font-weight:750}
    .banner-meta{display:flex;gap:16px;flex-wrap:wrap;margin-top:18px;color:rgba(255,255,255,.72);font-size:14px}
    .article-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;padding:28px 0 74px}
    .article-body{
      min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
      padding:clamp(24px,4vw,54px);box-shadow:var(--shadow-soft)
    }
    .article-body h2{font-size:28px;line-height:1.3;color:var(--brand);margin:32px 0 16px}
    .article-body h3{font-size:21px;line-height:1.4;color:var(--text);margin:26px 0 12px}
    .article-body p{margin:0 0 18px;color:#3f403d;font-size:16px}
    .article-body ul,.article-body ol{padding-left:24px;margin:12px 0 22px;color:#3f403d}
    .article-body li{margin:7px 0}
    .article-body blockquote{
      margin:26px 0;padding:18px 22px;border-left:4px solid var(--brand-2);
      background:var(--surface-2);color:var(--brand-dark);border-radius:0 var(--radius-sm) var(--radius-sm) 0
    }
    .article-body img{width:100%;height:auto;border-radius:var(--radius-sm);margin:24px 0}
    .article-body strong{color:var(--brand-dark)}
    .not-found{text-align:center;padding:70px 20px}
    .not-found h2{margin-top:0}
    .side-column{display:flex;flex-direction:column;gap:18px}
    .side-card{
      background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
      padding:23px;box-shadow:var(--shadow-soft)
    }
    .side-card h2{font-size:18px;margin:0 0 14px;color:var(--brand)}
    .side-card p{font-size:14px;color:var(--muted);margin:0 0 15px}
    .side-image{aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-sm);margin:-23px -23px 18px;width:calc(100% + 46px)}
    .side-links{display:grid;gap:3px}
    .side-links a{padding:9px 0;border-bottom:1px solid var(--line);font-size:14px;color:var(--muted)}
    .side-links a:last-child{border-bottom:0}
    .side-links a:hover{color:var(--brand);padding-left:4px}
    .btn{
      display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;
      padding:0 18px;border-radius:999px;border:1px solid transparent;font-weight:600;transition:all var(--transition)
    }
    .btn-primary{background:linear-gradient(135deg,var(--brand-3),var(--brand-2));color:#211606;box-shadow:0 10px 24px rgba(158,117,56,.2)}
    .btn-primary:hover{transform:translateY(-1px);box-shadow:0 14px 30px rgba(158,117,56,.3)}
    .btn-outline{border-color:var(--brand);color:var(--brand);background:transparent}
    .btn-outline:hover{background:var(--brand);color:#fff}
    .article-foot{margin-top:34px;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
    .article-foot a{color:var(--brand);font-weight:600}
    .article-foot a:hover{color:var(--brand-2)}
    .site-footer{background:#193d36;color:#e8eee8;padding:48px 0 22px}
    .footer-top{display:grid;grid-template-columns:1.4fr .8fr .9fr;gap:42px;padding-bottom:34px}
    .site-footer h3{font-size:16px;margin:0 0 14px;color:#f4d99e}
    .site-footer p{max-width:430px;margin:0;color:rgba(232,238,232,.72);font-size:14px}
    .footer-links{display:grid;gap:8px;color:rgba(232,238,232,.72);font-size:14px}
    .footer-links a:hover{color:#fff}
    .footer-bottom{border-top:1px solid rgba(255,255,255,.14);padding-top:18px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;color:rgba(232,238,232,.58);font-size:12px}
    :focus-visible{outline:3px solid rgba(214,176,110,.75);outline-offset:3px}
    @media (max-width:900px){
      .article-layout{grid-template-columns:1fr}
      .side-column{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
      .footer-top{grid-template-columns:1fr 1fr}
    }
    @media (max-width:768px){
      .header-inner{min-height:68px}
      .menu-toggle{display:flex}
      .nav{
        display:none;position:absolute;top:68px;left:16px;right:16px;padding:10px;
        background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius);
        box-shadow:var(--shadow);flex-direction:column;align-items:stretch
      }
      .nav.open{display:flex}
      .nav a{justify-content:flex-start}
      .banner-inner{min-height:300px;padding:34px 24px}
      .breadcrumbs{left:24px}
      .article-banner{padding-top:28px}
      .side-column{grid-template-columns:1fr}
      .footer-top{grid-template-columns:1fr;gap:26px}
    }
    @media (max-width:520px){
      .container{width:min(var(--container),calc(100% - 24px))}
      .brand-mark{width:38px;height:38px;border-radius:10px}
      .brand-text strong{font-size:13px;max-width:205px}
      .banner-copy h1{font-size:30px}
      .banner-meta{display:grid;gap:4px}
      .article-body{padding:22px 18px}
      .article-body h2{font-size:24px}
      .article-body p{font-size:15px}
      .article-foot{display:grid}
      .article-foot .btn{width:100%}
    }

/* roulang page: category1 */
:root {
      --bg:#f4efe6;
      --bg-soft:#fbf8f2;
      --surface:#fff;
      --surface-2:#f7f2ea;
      --text:#171717;
      --muted:#626262;
      --line:#ded4c3;
      --line-strong:#cdbda3;
      --brand:#1f4d43;
      --brand-deep:#16372f;
      --brand-2:#9e7538;
      --brand-3:#d6b06e;
      --accent:#5e7f75;
      --shadow:0 14px 40px rgba(32,41,37,.08);
      --shadow-soft:0 8px 24px rgba(32,41,37,.06);
      --radius:12px;
      --radius-sm:8px;
      --container:1180px;
      --transition:180ms ease;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      color:var(--text);
      background:linear-gradient(180deg,#efe7db 0,#f8f4ed 220px,var(--bg) 100%);
      font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
      line-height:1.7;
      letter-spacing:0;
    }
    img{display:block;max-width:100%}
    a{color:inherit;text-decoration:none}
    button,input,textarea,select{font:inherit}
    button{cursor:pointer}
    :focus-visible{outline:3px solid rgba(158,117,56,.45);outline-offset:3px}
    .container{width:min(var(--container),calc(100% - 32px));margin:0 auto}
    .site-header{position:sticky;top:0;z-index:20;background:rgba(244,239,230,.94);backdrop-filter:blur(12px);border-bottom:1px solid rgba(205,189,163,.55)}
    .header-inner{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px}
    .brand{display:flex;align-items:center;gap:12px;min-width:0}
    .brand-mark{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(145deg,var(--brand),#274d57);color:#fff;box-shadow:var(--shadow-soft);font-weight:700;flex:0 0 auto}
    .brand-text{min-width:0}
    .brand-text strong{display:block;max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px;line-height:1.25}
    .brand-text span{display:block;color:var(--muted);font-size:12px}
    .nav{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
    .nav a{display:inline-flex;align-items:center;padding:10px 14px;border:1px solid transparent;border-radius:999px;color:var(--muted);transition:all var(--transition)}
    .nav a:hover,.nav a.active{color:var(--brand);background:rgba(31,77,67,.08);border-color:rgba(31,77,67,.15)}
    .menu-toggle{display:none;width:42px;height:42px;border:1px solid var(--line);border-radius:10px;background:var(--surface);align-items:center;justify-content:center}
    .menu-toggle span,.menu-toggle span:before,.menu-toggle span:after{display:block;position:relative;width:18px;height:2px;background:var(--brand);border-radius:2px;content:""}
    .menu-toggle span:before{position:absolute;top:-6px}.menu-toggle span:after{position:absolute;top:6px}
    .page-banner{padding:58px 0 48px}
    .banner-panel{position:relative;overflow:hidden;min-height:350px;border-radius:22px;background:linear-gradient(90deg,rgba(18,25,23,.9),rgba(18,25,23,.58)),url('/assets/images/backpic/back-2.webp') center/cover no-repeat;display:flex;align-items:center;box-shadow:var(--shadow)}
    .banner-copy{position:relative;z-index:1;max-width:780px;padding:52px;color:#f8f3ea}
    .eyebrow{display:inline-flex;align-items:center;padding:7px 12px;border:1px solid rgba(255,255,255,.22);border-radius:999px;color:#f4dfb4;background:rgba(255,255,255,.1);font-size:13px;margin-bottom:16px}
    h1,h2,h3,p{margin-top:0}
    h1{font-size:clamp(34px,5vw,62px);line-height:1.15;letter-spacing:0;font-weight:700;margin-bottom:18px}
    .banner-copy p{max-width:650px;margin-bottom:0;color:rgba(248,243,234,.88);font-size:18px}
    .section{padding:76px 0}
    .section-head{display:flex;align-items:end;justify-content:space-between;gap:28px;margin-bottom:30px}
    .section-head h2{margin:0;font-size:32px;line-height:1.25}
    .section-head p{max-width:560px;margin:0;color:var(--muted)}
    .kicker{color:var(--brand-2);font-size:13px;font-weight:700;letter-spacing:.08em;margin-bottom:10px}
    .intro-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center}
    .intro-copy h2{font-size:36px;line-height:1.3;margin-bottom:18px}
    .intro-copy p{color:var(--muted);font-size:16px}
    .feature-image{overflow:hidden;border-radius:var(--radius);box-shadow:var(--shadow)}
    .feature-image img{width:100%;aspect-ratio:4/3;object-fit:cover}
    .feature-image figcaption{padding:13px 16px;background:var(--surface);color:var(--muted);font-size:13px}
    .topic-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
    .topic-card{padding:25px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);transition:all var(--transition)}
    .topic-card:hover{transform:translateY(-3px);border-color:var(--brand-2);box-shadow:var(--shadow-soft)}
    .topic-number{color:var(--brand-2);font-size:13px;font-weight:700}
    .topic-card h3{font-size:21px;margin:11px 0 8px}
    .topic-card p{color:var(--muted);margin:0}
    .topic-card a{display:inline-flex;margin-top:17px;color:var(--brand);font-weight:600}
    .topic-card a:after{content:" →";margin-left:5px}
    .scenes{background:var(--brand);color:#f9f4ea}
    .scene-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:18px}
    .scene-item{position:relative;min-height:250px;overflow:hidden;border-radius:var(--radius);border:1px solid rgba(255,255,255,.16)}
    .scene-item:first-child{min-height:360px}
    .scene-item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.62;transition:transform .4s ease}
    .scene-item:hover img{transform:scale(1.04)}
    .scene-item:after{position:absolute;inset:0;content:"";background:linear-gradient(0deg,rgba(7,23,19,.86),rgba(7,23,19,.05))}
    .scene-content{position:absolute;z-index:1;bottom:0;padding:26px}
    .scene-content h3{font-size:24px;margin-bottom:7px}
    .scene-content p{color:rgba(249,244,234,.78);margin:0}
    .process{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
    .process-step{padding:26px 22px;border-right:1px solid var(--line)}
    .process-step:last-child{border-right:0}
    .process-step strong{display:block;color:var(--brand-2);font-size:30px;line-height:1;margin-bottom:18px}
    .process-step h3{font-size:18px;margin-bottom:8px}
    .process-step p{color:var(--muted);font-size:14px;margin:0}
    .faq-wrap{max-width:850px;margin:0 auto}
    .faq-item{border-bottom:1px solid var(--line)}
    .faq-item summary{list-style:none;cursor:pointer;padding:21px 5px;font-size:18px;font-weight:600;display:flex;justify-content:space-between;gap:20px}
    .faq-item summary::-webkit-details-marker{display:none}
    .faq-item summary:after{content:"+";color:var(--brand-2);font-size:25px;font-weight:400;line-height:1}
    .faq-item[open] summary:after{content:"−"}
    .faq-answer{padding:0 45px 20px 5px;color:var(--muted)}
    .cta{padding:56px 0}
    .cta-panel{padding:42px 50px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line-strong);display:flex;align-items:center;justify-content:space-between;gap:28px;box-shadow:var(--shadow-soft)}
    .cta-panel h2{margin-bottom:8px;font-size:29px}
    .cta-panel p{margin:0;color:var(--muted)}
    .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 20px;border-radius:999px;border:1px solid transparent;font-weight:600;transition:all var(--transition);white-space:nowrap}
    .btn-primary{background:linear-gradient(135deg,var(--brand-3),var(--brand-2));color:#211707;box-shadow:0 10px 24px rgba(158,117,56,.25)}
    .btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(158,117,56,.33)}
    .btn-outline{border-color:var(--brand);color:var(--brand);background:transparent}
    .btn-outline:hover{background:var(--brand);color:#fff}
    .site-footer{padding:52px 0 22px;background:#172c27;color:#e9e1d3}
    .footer-top{display:grid;grid-template-columns:1.4fr .8fr .9fr;gap:48px;padding-bottom:38px;border-bottom:1px solid rgba(233,225,211,.2)}
    .site-footer h3{font-size:17px;margin-bottom:15px;color:#fff}
    .site-footer p{max-width:420px;color:rgba(233,225,211,.68);margin:0}
    .footer-links{display:grid;gap:8px;color:rgba(233,225,211,.68);font-size:14px}
    .footer-links a:hover{color:#f0c982}
    .footer-bottom{display:flex;justify-content:space-between;gap:20px;padding-top:20px;color:rgba(233,225,211,.5);font-size:13px}
    @media(max-width:1024px){
      .header-inner{min-height:70px}.intro-grid{gap:28px}.banner-copy{padding:42px}
      .process{grid-template-columns:repeat(2,1fr)}.process-step:nth-child(2){border-right:0}.process-step:nth-child(-n+2){border-bottom:1px solid var(--line)}
    }
    @media(max-width:768px){
      .menu-toggle{display:flex}.nav{display:none;position:absolute;top:70px;left:16px;right:16px;padding:10px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:var(--shadow);flex-direction:column;align-items:stretch}
      .nav.open{display:flex}.nav a{padding:12px 14px;border-radius:8px}.intro-grid,.scene-grid{grid-template-columns:1fr}.section{padding:58px 0}.section-head{display:block}.section-head p{margin-top:12px}.cta-panel{display:block;padding:34px 28px}.cta-panel .btn{margin-top:22px}
      .footer-top{grid-template-columns:1fr 1fr;gap:30px}.footer-top>div:first-child{grid-column:1/-1}
    }
    @media(max-width:520px){
      .container{width:min(var(--container),calc(100% - 24px))}.brand-text strong{max-width:190px;font-size:13px}.page-banner{padding:24px 0 20px}.banner-panel{min-height:420px;border-radius:16px}.banner-copy{padding:28px 22px}.banner-copy p{font-size:16px}h1{font-size:35px}.topic-grid,.process{grid-template-columns:1fr}.process-step{border-right:0;border-bottom:1px solid var(--line)}.process-step:last-child{border-bottom:0}.scene-item,.scene-item:first-child{min-height:270px}.footer-top{grid-template-columns:1fr}.footer-top>div:first-child{grid-column:auto}.footer-bottom{display:block}.footer-bottom span{display:block;margin-top:7px}
    }