/* roulang page: index */
:root{
      --bg: #f5f0e8;
      --bg-2: #efe7db;
      --surface: #fffdf8;
      --surface-2: #f8f3ea;
      --surface-dark: #151515;
      --surface-dark-2: #1d1d1d;
      --text: #222222;
      --text-2: #5f5a52;
      --text-invert: #f9f6ef;
      --line: rgba(34,34,34,.10);
      --line-strong: rgba(34,34,34,.18);
      --accent: #cf9a1a;
      --accent-2: #e56f2b;
      --accent-soft: rgba(207,154,26,.14);
      --shadow: 0 14px 35px rgba(27, 24, 20, .10);
      --shadow-2: 0 20px 50px rgba(27, 24, 20, .14);
      --radius: 22px;
      --radius-sm: 14px;
      --radius-lg: 30px;
      --container: 1180px;
      --gap: 24px;
      --gap-lg: 32px;
      --ease: 180ms ease;
      --header-h: 82px;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      color:var(--text);
      background:
        radial-gradient(1200px 500px at 50% -120px, rgba(207,154,26,.12), transparent 58%),
        linear-gradient(180deg, var(--bg) 0%, #f7f2ea 100%);
      font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
      line-height:1.7;
      text-rendering:optimizeLegibility;
      -webkit-font-smoothing:antialiased;
      padding-top:var(--header-h);
    }
    a{color:inherit;text-decoration:none}
    img{display:block;max-width:100%}
    button,input,textarea{font:inherit}
    button{cursor:pointer}
    ::selection{background:rgba(207,154,26,.26);color:#1b1b1b}
    :focus-visible{outline:3px solid rgba(207,154,26,.55);outline-offset:3px}

    .skip-link{
      position:absolute;
      left:-999px;
      top:10px;
      z-index:9999;
      background:var(--surface-dark);
      color:var(--text-invert);
      padding:10px 14px;
      border-radius:999px;
    }
    .skip-link:focus{left:16px}

    .container{
      width:min(var(--container), calc(100% - 32px));
      margin:0 auto;
    }

    .site-header{
      position:fixed;
      inset:0 0 auto 0;
      z-index:1000;
      height:var(--header-h);
      background:rgba(19,19,19,.97);
      color:var(--text-invert);
      border-bottom:1px solid rgba(255,255,255,.08);
    }
    .header-inner{
      height:100%;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:20px;
    }

    .brand{
      display:inline-flex;
      align-items:center;
      gap:12px;
      min-width:0;
      font-weight:800;
      letter-spacing:.02em;
      color:var(--text-invert);
    }
    .brand-mark{
      width:42px;
      height:42px;
      border-radius:14px;
      background:
        linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.04)),
        linear-gradient(135deg, var(--accent), var(--accent-2));
      box-shadow:0 10px 24px rgba(207,154,26,.24);
      position:relative;
      flex:0 0 auto;
    }
    .brand-mark::before,
    .brand-mark::after{
      content:"";
      position:absolute;
      inset:auto;
      background:rgba(255,255,255,.86);
      border-radius:999px;
    }
    .brand-mark::before{
      width:14px;height:14px;left:12px;top:8px;
      box-shadow:13px 7px 0 rgba(255,255,255,.86), 6px 16px 0 rgba(255,255,255,.74);
      transform:rotate(12deg);
    }
    .brand-mark::after{
      width:18px;height:4px;left:12px;bottom:9px;opacity:.88;
    }
    .brand-text{
      font-size:1.02rem;
      white-space:nowrap;
    }

    .site-nav{
      display:flex;
      align-items:center;
      gap:10px;
    }
    .nav-links{
      display:flex;
      align-items:center;
      gap:8px;
    }
    .nav-links a{
      color:rgba(255,255,255,.82);
      padding:10px 14px;
      border-radius:999px;
      transition:transform var(--ease), background var(--ease), color var(--ease), box-shadow var(--ease);
      font-size:.98rem;
      font-weight:600;
    }
    .nav-links a:hover,
    .nav-links a:focus-visible{
      background:rgba(255,255,255,.08);
      color:#fff;
      transform:translateY(-1px);
    }
    .nav-links a.active{
      background:linear-gradient(135deg, rgba(207,154,26,.22), rgba(229,111,43,.18));
      color:#fff;
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
    }

    .nav-toggle{
      display:none;
      align-items:center;
      justify-content:center;
      width:46px;height:46px;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(255,255,255,.03);
      color:#fff;
      border-radius:14px;
      transition:background var(--ease), transform var(--ease), border-color var(--ease);
    }
    .nav-toggle:hover{background:rgba(255,255,255,.08);transform:translateY(-1px)}
    .nav-toggle svg{width:22px;height:22px}

    main{display:block}

    .hero{
      position:relative;
      overflow:hidden;
      margin-top:22px;
    }
    .hero-shell{
      position:relative;
      border-radius:var(--radius-lg);
      background:
        linear-gradient(115deg, rgba(18,18,18,.88) 0%, rgba(25,25,25,.84) 54%, rgba(16,16,16,.76) 100%),
        url('/assets/images/backpic/back-1.webp') center/cover no-repeat;
      box-shadow:var(--shadow-2);
      color:var(--text-invert);
      border:1px solid rgba(255,255,255,.06);
      overflow:hidden;
    }
    .hero-shell::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.26)),
        radial-gradient(750px 300px at 82% 18%, rgba(207,154,26,.20), transparent 62%);
      pointer-events:none;
    }
    .hero-inner{
      position:relative;
      display:grid;
      grid-template-columns: minmax(0, 1.05fr) minmax(340px, .95fr);
      gap:var(--gap-lg);
      align-items:center;
      padding:42px;
      min-height:540px;
    }

    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:7px 12px;
      border-radius:999px;
      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.10);
      color:rgba(255,255,255,.86);
      font-size:.92rem;
      letter-spacing:.02em;
    }
    .eyebrow::before{
      content:"";
      width:8px;height:8px;
      border-radius:999px;
      background:linear-gradient(135deg, var(--accent), var(--accent-2));
      box-shadow:0 0 0 4px rgba(207,154,26,.14);
    }

    h1{
      margin:18px 0 16px;
      font-size:clamp(2.2rem, 5vw, 4.4rem);
      line-height:1.08;
      letter-spacing:-.03em;
    }
    .hero-lead{
      margin:0;
      max-width:640px;
      color:rgba(249,246,239,.84);
      font-size:1.05rem;
      line-height:1.9;
    }
    .hero-points{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin:24px 0 0;
      padding:0;
      list-style:none;
    }
    .hero-points li,
    .tag{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:9px 12px;
      border-radius:999px;
      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.10);
      color:rgba(255,255,255,.92);
      font-size:.92rem;
      font-weight:600;
    }
    .hero-points li::before,
    .tag::before{
      content:"";
      width:7px;height:7px;
      border-radius:50%;
      background:linear-gradient(135deg, var(--accent), var(--accent-2));
      flex:0 0 auto;
    }
    .hero-actions{
      display:flex;
      gap:12px;
      flex-wrap:wrap;
      margin-top:30px;
    }
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      min-height:48px;
      padding:0 18px;
      border-radius:999px;
      border:1px solid transparent;
      transition:transform var(--ease), box-shadow var(--ease), background var(--ease), border-color var(--ease), color var(--ease);
      font-weight:700;
      letter-spacing:.01em;
      user-select:none;
    }
    .btn:hover,
    .btn:focus-visible{transform:translateY(-2px)}
    .btn-primary{
      background:linear-gradient(135deg, var(--accent), var(--accent-2));
      color:#241900;
      box-shadow:0 14px 24px rgba(207,154,26,.20);
    }
    .btn-primary:hover,
    .btn-primary:focus-visible{
      box-shadow:0 18px 32px rgba(207,154,26,.26);
    }
    .btn-secondary{
      background:transparent;
      color:#fff;
      border-color:rgba(255,255,255,.18);
    }
    .btn-secondary:hover,
    .btn-secondary:focus-visible{
      background:rgba(255,255,255,.08);
      border-color:rgba(255,255,255,.28);
    }

    .hero-media{
      position:relative;
      display:grid;
      gap:14px;
      grid-template-columns: 1.05fr .85fr;
      align-items:stretch;
    }
    .hero-card,
    .feature-card,
    .update-card,
    .faq-item,
    .contact-card,
    .info-strip,
    .metric-card{
      background:var(--surface);
      border:1px solid var(--line);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
    }
    .hero-card{
      overflow:hidden;
      min-height:260px;
      position:relative;
    }
    .hero-card img{
      width:100%;
      height:100%;
      object-fit:cover;
      aspect-ratio: 4 / 5;
    }
    .hero-card::after{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.36));
      pointer-events:none;
    }
    .hero-card.card-main{
      grid-row:span 2;
      min-height:428px;
    }

    .hero-stat{
      align-self:end;
      background:linear-gradient(180deg, rgba(247,241,230,.98), rgba(255,250,242,.98));
      color:var(--text);
      padding:20px;
      border-radius:var(--radius);
      border:1px solid rgba(255,255,255,.12);
      box-shadow:0 14px 34px rgba(17,17,17,.16);
    }
    .hero-stat strong{
      display:block;
      font-size:1.4rem;
      line-height:1.1;
      margin-bottom:6px;
      color:#131313;
    }
    .hero-stat p{
      margin:0;
      color:var(--text-2);
      font-size:.96rem;
    }
    .hero-stat-list{
      display:grid;
      gap:10px;
      margin-top:16px;
    }
    .hero-stat-row{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
      font-size:.95rem;
      color:#3d372f;
      padding:10px 12px;
      border-radius:14px;
      background:var(--surface-2);
      border:1px solid rgba(34,34,34,.06);
    }
    .hero-stat-row b{color:#171717}

    .section{
      padding:28px 0;
    }
    .section-heading{
      display:flex;
      align-items:end;
      justify-content:space-between;
      gap:18px;
      margin-bottom:18px;
    }
    .section-title{
      margin:0;
      font-size:clamp(1.45rem, 2.4vw, 2.1rem);
      line-height:1.2;
      letter-spacing:-.02em;
      color:#171717;
    }
    .section-desc{
      margin:0;
      color:var(--text-2);
      max-width:680px;
      font-size:1rem;
      line-height:1.8;
    }

    .info-strip{
      display:grid;
      grid-template-columns:repeat(3, minmax(0, 1fr));
      gap:14px;
      padding:18px;
      margin-top:22px;
    }
    .strip-item{
      background:linear-gradient(180deg, rgba(255,255,255,.72), rgba(246,240,231,.82));
      border:1px solid rgba(34,34,34,.08);
      border-radius:18px;
      padding:18px;
      min-height:110px;
      transition:transform var(--ease), box-shadow var(--ease), border-color var(--ease);
    }
    .strip-item:hover{
      transform:translateY(-2px);
      border-color:rgba(207,154,26,.24);
      box-shadow:0 16px 28px rgba(17,17,17,.08);
    }
    .strip-item .label{
      display:inline-flex;
      align-items:center;
      gap:8px;
      color:#5d513d;
      font-size:.92rem;
      font-weight:700;
      margin-bottom:10px;
    }
    .strip-item .label::before{
      content:"";
      width:8px;height:8px;border-radius:50%;
      background:linear-gradient(135deg, var(--accent), var(--accent-2));
    }
    .strip-item h3{
      margin:0 0 8px;
      font-size:1.06rem;
      color:#1b1b1b;
      line-height:1.35;
    }
    .strip-item p{
      margin:0;
      color:var(--text-2);
      font-size:.95rem;
      line-height:1.75;
    }

    .feature-grid{
      display:grid;
      grid-template-columns: 1.15fr .85fr;
      gap:var(--gap);
      align-items:stretch;
    }
    .feature-card{
      overflow:hidden;
      position:relative;
      transition:transform var(--ease), box-shadow var(--ease), border-color var(--ease);
    }
    .feature-card:hover{
      transform:translateY(-3px);
      box-shadow:var(--shadow-2);
      border-color:rgba(207,154,26,.24);
    }
    .feature-card__media{
      position:relative;
      overflow:hidden;
      border-bottom:1px solid var(--line);
      background:#ddd;
    }
    .feature-card__media img{
      width:100%;
      height:100%;
      object-fit:cover;
      aspect-ratio: 16 / 9;
      transition:transform .35s ease;
    }
    .feature-card:hover .feature-card__media img{transform:scale(1.03)}
    .feature-card__body{
      padding:22px;
    }
    .card-kicker{
      display:inline-flex;
      align-items:center;
      gap:8px;
      color:#8b6412;
      background:var(--accent-soft);
      border:1px solid rgba(207,154,26,.18);
      padding:7px 11px;
      border-radius:999px;
      font-size:.88rem;
      font-weight:700;
      margin-bottom:12px;
    }
    .feature-card h3,
    .mini-card h3,
    .update-card h3{
      margin:0 0 10px;
      color:#1a1a1a;
      line-height:1.32;
      letter-spacing:-.01em;
    }
    .feature-card h3{font-size:1.3rem}
    .feature-card p,
    .mini-card p,
    .update-card p{
      margin:0;
      color:var(--text-2);
      line-height:1.8;
      font-size:.97rem;
    }
    .feature-list{
      margin:18px 0 0;
      padding:0;
      list-style:none;
      display:grid;
      gap:11px;
    }
    .feature-list li{
      display:flex;
      gap:10px;
      align-items:flex-start;
      color:#35302a;
      font-size:.96rem;
      line-height:1.75;
    }
    .feature-list li::before{
      content:"";
      width:8px;height:8px;
      border-radius:50%;
      margin-top:.55em;
      background:linear-gradient(135deg, var(--accent), var(--accent-2));
      flex:0 0 auto;
      box-shadow:0 0 0 4px rgba(207,154,26,.10);
    }

    .mini-stack{
      display:grid;
      gap:var(--gap);
    }
    .mini-card{
      position:relative;
      overflow:hidden;
      background:linear-gradient(180deg, #fffdf7, #f8f1e7);
      padding:18px;
      min-height:calc((100% - var(--gap)) / 2);
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      transition:transform var(--ease), box-shadow var(--ease), border-color var(--ease);
    }
    .mini-card:hover{
      transform:translateY(-3px);
      box-shadow:0 18px 32px rgba(17,17,17,.10);
      border-color:rgba(207,154,26,.22);
    }
    .mini-card__top{
      display:flex;
      align-items:center;
      gap:12px;
      margin-bottom:12px;
    }
    .mini-thumb{
      width:72px;height:72px;
      border-radius:18px;
      overflow:hidden;
      border:1px solid rgba(34,34,34,.08);
      flex:0 0 auto;
      box-shadow:0 12px 24px rgba(17,17,17,.08);
    }
    .mini-thumb img{
      width:100%;
      height:100%;
      object-fit:cover;
    }
    .mini-card .meta{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      align-items:center;
      margin-bottom:10px;
      color:var(--text-2);
      font-size:.88rem;
    }
    .mini-card .meta .tag{
      color:#5f460c;
      background:rgba(207,154,26,.12);
      border-color:rgba(207,154,26,.18);
    }
    .mini-card .meta .tag::before{background:linear-gradient(135deg, var(--accent), var(--accent-2))}
    .mini-card__foot{
      margin-top:14px;
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:12px;
    }

    .updates{
      position:relative;
    }
    .updates-grid{
      display:grid;
      grid-template-columns:repeat(2, minmax(0, 1fr));
      gap:var(--gap);
    }
    .update-card{
      display:grid;
      grid-template-columns:170px minmax(0, 1fr);
      overflow:hidden;
      transition:transform var(--ease), box-shadow var(--ease), border-color var(--ease);
      background:linear-gradient(180deg, #fffdf9, #f9f3eb);
    }
    .update-card:hover{
      transform:translateY(-3px);
      box-shadow:var(--shadow-2);
      border-color:rgba(207,154,26,.22);
    }
    .update-thumb{
      position:relative;
      min-height:100%;
      overflow:hidden;
      background:#ddd;
      border-right:1px solid var(--line);
    }
    .update-thumb img{
      width:100%;
      height:100%;
      object-fit:cover;
      aspect-ratio: 4 / 3;
      transition:transform .35s ease;
    }
    .update-card:hover .update-thumb img{transform:scale(1.04)}
    .update-body{
      padding:18px 18px 18px 18px;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      min-width:0;
    }
    .update-meta{
      display:flex;
      align-items:center;
      gap:10px;
      flex-wrap:wrap;
      margin-bottom:10px;
      color:var(--text-2);
      font-size:.88rem;
    }
    .meta-pill{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:6px 10px;
      border-radius:999px;
      background:var(--surface-2);
      border:1px solid var(--line);
      color:#5c5347;
      font-weight:700;
      flex:0 0 auto;
    }
    .meta-pill::before{
      content:"";
      width:7px;height:7px;
      border-radius:50%;
      background:linear-gradient(135deg, var(--accent), var(--accent-2));
    }
    .update-meta time{
      color:var(--text-2);
      font-weight:600;
    }
    .update-card h3{
      font-size:1.08rem;
    }
    .update-card p{
      display:-webkit-box;
      -webkit-line-clamp:3;
      -webkit-box-orient:vertical;
      overflow:hidden;
      min-height:5.4em;
    }
    .text-link{
      display:inline-flex;
      align-items:center;
      gap:8px;
      color:#8a620c;
      font-weight:700;
      margin-top:12px;
      transition:transform var(--ease), color var(--ease);
    }
    .text-link::after{
      content:"→";
      transition:transform var(--ease);
    }
    .text-link:hover,
    .text-link:focus-visible{
      color:#6d4d08;
      transform:translateX(1px);
    }
    .text-link:hover::after,
    .text-link:focus-visible::after{transform:translateX(3px)}

    .empty-state{
      padding:28px;
      border-radius:var(--radius);
      background:linear-gradient(180deg, #fffdf8, #f9f1e6);
      border:1px dashed rgba(34,34,34,.18);
      color:var(--text-2);
      text-align:center;
      box-shadow:var(--shadow);
    }

    .gallery-grid{
      display:grid;
      grid-template-columns:repeat(3, minmax(0, 1fr));
      gap:var(--gap);
    }
    .gallery-card{
      overflow:hidden;
      background:var(--surface);
      border-radius:var(--radius);
      border:1px solid var(--line);
      box-shadow:var(--shadow);
      transition:transform var(--ease), box-shadow var(--ease), border-color var(--ease);
    }
    .gallery-card:hover{
      transform:translateY(-3px);
      box-shadow:var(--shadow-2);
      border-color:rgba(207,154,26,.22);
    }
    .gallery-media{
      aspect-ratio: 16 / 10;
      overflow:hidden;
      background:#ddd;
    }
    .gallery-media img{
      width:100%;
      height:100%;
      object-fit:cover;
      transition:transform .35s ease;
    }
    .gallery-card:hover .gallery-media img{transform:scale(1.04)}
    .gallery-body{
      padding:18px;
    }
    .gallery-body .badge{
      display:inline-flex;
      align-items:center;
      gap:8px;
      background:rgba(229,111,43,.10);
      color:#8d4418;
      border:1px solid rgba(229,111,43,.16);
      border-radius:999px;
      padding:6px 10px;
      font-size:.86rem;
      font-weight:700;
      margin-bottom:10px;
    }
    .gallery-body .badge::before{
      content:"";
      width:7px;height:7px;
      border-radius:50%;
      background:linear-gradient(135deg, var(--accent), var(--accent-2));
    }
    .gallery-body h3{
      margin:0 0 8px;
      font-size:1.06rem;
      line-height:1.35;
    }
    .gallery-body p{
      margin:0;
      color:var(--text-2);
      line-height:1.75;
      font-size:.96rem;
    }

    .stats-row{
      display:grid;
      grid-template-columns:repeat(3, minmax(0, 1fr));
      gap:var(--gap);
    }
    .metric-card{
      padding:20px;
      display:flex;
      gap:14px;
      align-items:flex-start;
      transition:transform var(--ease), box-shadow var(--ease), border-color var(--ease);
    }
    .metric-card:hover{
      transform:translateY(-2px);
      box-shadow:0 18px 32px rgba(17,17,17,.10);
      border-color:rgba(207,154,26,.22);
    }
    .metric-num{
      width:54px;height:54px;
      border-radius:18px;
      background:linear-gradient(135deg, rgba(207,154,26,.16), rgba(229,111,43,.14));
      color:#7d5707;
      display:flex;
      align-items:center;
      justify-content:center;
      font-weight:800;
      font-size:1.1rem;
      flex:0 0 auto;
      border:1px solid rgba(207,154,26,.16);
    }
    .metric-body h3{
      margin:2px 0 6px;
      font-size:1.02rem;
      line-height:1.35;
    }
    .metric-body p{
      margin:0;
      color:var(--text-2);
      line-height:1.75;
      font-size:.95rem;
    }

    .faq{
      display:grid;
      grid-template-columns:1fr;
      gap:12px;
    }
    .faq-item{
      overflow:hidden;
      background:linear-gradient(180deg, #fffdf9, #f8f1e7);
      transition:border-color var(--ease), box-shadow var(--ease), transform var(--ease);
    }
    .faq-item[open]{
      border-color:rgba(207,154,26,.22);
      box-shadow:var(--shadow-2);
    }
    .faq-item summary{
      list-style:none;
      cursor:pointer;
      padding:20px 22px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      font-weight:800;
      color:#1a1a1a;
    }
    .faq-item summary::-webkit-details-marker{display:none}
    .faq-item summary::after{
      content:"+";
      width:32px;height:32px;
      border-radius:999px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      background:rgba(207,154,26,.12);
      color:#865f0c;
      border:1px solid rgba(207,154,26,.16);
      flex:0 0 auto;
      transition:transform var(--ease), background var(--ease);
    }
    .faq-item[open] summary::after{
      content:"–";
      background:rgba(207,154,26,.18);
      transform:rotate(0deg);
    }
    .faq-answer{
      padding:0 22px 20px;
      color:var(--text-2);
      line-height:1.8;
      border-top:1px solid rgba(34,34,34,.06);
      margin-top:-2px;
    }

    .cta-panel{
      background:
        linear-gradient(145deg, rgba(19,19,19,.98), rgba(27,27,27,.96)),
        url('/assets/images/backpic/back-2.webp') center/cover no-repeat;
      color:var(--text-invert);
      border-radius:var(--radius-lg);
      border:1px solid rgba(255,255,255,.08);
      overflow:hidden;
      box-shadow:var(--shadow-2);
      position:relative;
    }
    .cta-panel::before{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(90deg, rgba(0,0,0,.14), rgba(0,0,0,.32));
      pointer-events:none;
    }
    .cta-inner{
      position:relative;
      display:grid;
      grid-template-columns: 1fr 1.1fr;
      gap:var(--gap-lg);
      padding:34px;
      align-items:center;
    }
    .cta-copy h2{
      margin:0 0 12px;
      font-size:clamp(1.6rem, 3vw, 2.5rem);
      line-height:1.15;
    }
    .cta-copy p{
      margin:0;
      color:rgba(249,246,239,.84);
      line-height:1.85;
      max-width:620px;
    }
    .cta-actions{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      margin-top:20px;
    }
    .btn-dark{
      background:linear-gradient(135deg, var(--accent), var(--accent-2));
      color:#231900;
    }
    .btn-dark:hover,
    .btn-dark:focus-visible{box-shadow:0 18px 32px rgba(207,154,26,.22)}
    .btn-outline-light{
      background:transparent;
      border-color:rgba(255,255,255,.18);
      color:#fff;
    }
    .btn-outline-light:hover,
    .btn-outline-light:focus-visible{
      background:rgba(255,255,255,.08);
      border-color:rgba(255,255,255,.30);
    }

    .contact-card{
      background:linear-gradient(180deg, rgba(255,252,246,.98), rgba(247,240,229,.98));
      padding:22px;
      color:var(--text);
      border-color:rgba(255,255,255,.18);
    }
    .contact-card h3{
      margin:0 0 10px;
      font-size:1.08rem;
    }
    .contact-card p{
      margin:0 0 16px;
      color:var(--text-2);
      line-height:1.75;
      font-size:.95rem;
    }
    .contact-form{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:12px;
    }
    .field{
      display:flex;
      flex-direction:column;
      gap:8px;
    }
    .field.full{grid-column:1 / -1}
    .field label{
      font-size:.9rem;
      font-weight:700;
      color:#4d463d;
    }
    .field input,
    .field textarea{
      width:100%;
      border:1px solid rgba(34,34,34,.12);
      background:#fff;
      border-radius:16px;
      padding:12px 14px;
      color:var(--text);
      transition:border-color var(--ease), box-shadow var(--ease), background var(--ease);
    }
    .field textarea{
      min-height:100px;
      resize:vertical;
    }
    .field input::placeholder,
    .field textarea::placeholder{color:#9b9183}
    .field input:focus,
    .field textarea:focus{
      border-color:rgba(207,154,26,.45);
      box-shadow:0 0 0 4px rgba(207,154,26,.12);
      outline:none;
    }
    .form-actions{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      margin-top:6px;
      grid-column:1 / -1;
    }
    .btn-form{
      min-width:132px;
      border:none;
    }

    .site-footer{
      margin-top:30px;
      background:var(--surface-dark);
      color:rgba(249,246,239,.82);
      border-top:1px solid rgba(255,255,255,.06);
    }
    .footer-inner{
      padding:34px 0 24px;
    }
    .footer-grid{
      display:grid;
      grid-template-columns:1.2fr .8fr .9fr;
      gap:var(--gap-lg);
      padding-bottom:22px;
      border-bottom:1px solid rgba(255,255,255,.08);
    }
    .footer-brand{
      display:flex;
      flex-direction:column;
      gap:12px;
    }
    .footer-brand .brand{
      color:#fff;
    }
    .footer-brand p{
      margin:0;
      max-width:420px;
      color:rgba(249,246,239,.72);
      line-height:1.8;
    }
    .footer-col h3{
      margin:0 0 12px;
      color:#fff;
      font-size:1rem;
    }
    .footer-links{
      display:grid;
      gap:10px;
    }
    .footer-links a{
      color:rgba(249,246,239,.74);
      transition:color var(--ease), transform var(--ease);
      width:max-content;
    }
    .footer-links a:hover,
    .footer-links a:focus-visible{
      color:#fff;
      transform:translateX(2px);
    }
    .footer-note{
      padding-top:18px;
      display:flex;
      flex-wrap:wrap;
      justify-content:space-between;
      gap:12px;
      color:rgba(249,246,239,.64);
      font-size:.95rem;
    }

    .inline-badges{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-top:16px;
    }
    .inline-badges span{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 11px;
      border-radius:999px;
      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.10);
      color:rgba(255,255,255,.9);
      font-size:.9rem;
      font-weight:700;
    }
    .inline-badges span::before{
      content:"";
      width:7px;height:7px;border-radius:50%;
      background:linear-gradient(135deg, var(--accent), var(--accent-2));
    }

    .sr-only{
      position:absolute;
      width:1px;height:1px;
      padding:0;margin:-1px;
      overflow:hidden;clip:rect(0,0,0,0);
      white-space:nowrap;border:0;
    }

    @media (max-width: 1120px){
      .hero-inner{grid-template-columns:1fr;min-height:auto}
      .hero-media{grid-template-columns:1fr 1fr}
      .hero-card.card-main{grid-row:auto;min-height:auto}
      .feature-grid,
      .cta-inner{grid-template-columns:1fr}
      .gallery-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
      .updates-grid{grid-template-columns:1fr}
      .stats-row{grid-template-columns:1fr}
      .footer-grid{grid-template-columns:1fr 1fr}
    }

    @media (max-width: 768px){
      :root{--header-h:72px}
      .container{width:min(var(--container), calc(100% - 22px))}
      .site-header{height:var(--header-h)}
      .nav-toggle{display:inline-flex}
      .nav-links{
        position:absolute;
        top:calc(var(--header-h) - 2px);
        right:12px;
        left:12px;
        display:none;
        flex-direction:column;
        align-items:stretch;
        gap:6px;
        background:#171717;
        border:1px solid rgba(255,255,255,.08);
        border-radius:18px;
        padding:10px;
        box-shadow:var(--shadow-2);
      }
      .nav-links.open{display:flex}
      .nav-links a{padding:12px 14px;border-radius:14px}
      body{padding-top:var(--header-h)}
      .hero-inner{padding:24px}
      .hero-media{grid-template-columns:1fr}
      .info-strip{grid-template-columns:1fr}
      .gallery-grid{grid-template-columns:1fr}
      .footer-grid{grid-template-columns:1fr}
      .contact-form{grid-template-columns:1fr}
      .update-card{grid-template-columns:1fr}
      .update-thumb{border-right:none;border-bottom:1px solid var(--line)}
      .hero-actions,
      .cta-actions{flex-direction:column}
      .btn{width:100%}
      .section-heading{flex-direction:column;align-items:flex-start}
    }

    @media (max-width: 520px){
      h1{font-size:clamp(2rem, 11vw, 3rem)}
      .hero-inner{padding:18px}
      .hero-lead,
      .section-desc,
      .cta-copy p,
      .footer-brand p{font-size:.95rem}
      .feature-card__body,
      .update-body,
      .gallery-body,
      .contact-card{padding:16px}
      .faq-item summary,
      .faq-answer{padding-left:16px;padding-right:16px}
      .mini-card{padding:16px}
      .mini-thumb{width:64px;height:64px}
      .brand-text{font-size:.96rem}
      .brand-mark{width:38px;height:38px;border-radius:12px}
    }

    @media (prefers-reduced-motion: reduce){
      html{scroll-behavior:auto}
      *,
      *::before,
      *::after{
        animation:none !important;
        transition:none !important;
      }
    }

/* roulang page: article */
:root{
      --bg:#f5f0e8;
      --bg-2:#efe7db;
      --surface:#fffdf8;
      --surface-2:#f8f3ea;
      --surface-dark:#151515;
      --surface-dark-2:#1d1d1d;
      --text:#222222;
      --text-2:#5f5a52;
      --text-invert:#f9f6ef;
      --line:rgba(34,34,34,.10);
      --line-strong:rgba(34,34,34,.18);
      --accent:#cf9a1a;
      --accent-2:#e56f2b;
      --accent-soft:rgba(207,154,26,.14);
      --shadow:0 14px 35px rgba(27, 24, 20, .10);
      --shadow-2:0 20px 50px rgba(27, 24, 20, .14);
      --radius:22px;
      --radius-sm:14px;
      --radius-lg:30px;
      --container:1180px;
      --gap:24px;
      --gap-lg:32px;
      --ease:180ms ease;
      --header-h:72px;
    }
    html{scroll-behavior:smooth}
    *{box-sizing:border-box}
    body{
      margin:0;
      color:var(--text);
      background:
        radial-gradient(1200px 500px at 50% -120px, rgba(207,154,26,.12), transparent 58%),
        linear-gradient(180deg, var(--bg) 0%, #f7f2ea 100%);
      font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
      line-height:1.7;
      text-rendering:optimizeLegibility;
      -webkit-font-smoothing:antialiased;
      padding-top:var(--header-h);
      overflow-x:hidden;
    }
    a{color:inherit;text-decoration:none}
    img{display:block;max-width:100%}
    button,input,textarea,select{font:inherit}
    button{cursor:pointer}
    ::selection{background:rgba(207,154,26,.24);color:var(--text)}
    .container{
      width:min(var(--container), calc(100% - 32px));
      margin:0 auto;
    }
    .section{
      padding:28px 0 0;
    }

    .site-header{
      position:fixed;
      inset:0 0 auto 0;
      z-index:1000;
      height:var(--header-h);
      background:rgba(19,19,19,.97);
      color:var(--text-invert);
      border-bottom:1px solid rgba(255,255,255,.08);
      backdrop-filter:saturate(140%);
    }
    .header-inner{
      height:100%;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:20px;
    }
    .brand{
      display:inline-flex;
      align-items:center;
      gap:12px;
      min-width:0;
      font-weight:800;
      letter-spacing:.02em;
      color:var(--text-invert);
    }
    .brand:focus-visible,
    .site-nav a:focus-visible,
    .site-btn:focus-visible,
    summary:focus-visible,
    .footer-links a:focus-visible{
      outline:2px solid rgba(207,154,26,.60);
      outline-offset:3px;
    }
    .brand-mark{
      width:42px;
      height:42px;
      border-radius:14px;
      background:
        linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.04)),
        linear-gradient(135deg, var(--accent), var(--accent-2));
      box-shadow:0 10px 24px rgba(207,154,26,.24);
      position:relative;
      flex:0 0 auto;
    }
    .brand-mark::before,
    .brand-mark::after{
      content:"";
      position:absolute;
      inset:auto;
      background:rgba(255,255,255,.88);
      border-radius:999px;
    }
    .brand-mark::before{
      width:14px;height:14px;left:12px;top:8px;
      box-shadow:13px 7px 0 rgba(255,255,255,.86), 6px 16px 0 rgba(255,255,255,.74);
      transform:rotate(12deg);
    }
    .brand-mark::after{
      width:18px;height:4px;left:12px;bottom:9px;opacity:.88;
    }
    .brand-text{
      font-size:1.02rem;
      white-space:nowrap;
    }
    .site-nav{
      display:flex;
      align-items:center;
      gap:10px;
      position:relative;
    }
    .nav-links{
      display:flex;
      align-items:center;
      gap:8px;
    }
    .nav-links a{
      color:rgba(255,255,255,.82);
      padding:10px 14px;
      border-radius:999px;
      transition:transform var(--ease), background var(--ease), color var(--ease), box-shadow var(--ease);
      font-size:.98rem;
      font-weight:600;
      line-height:1;
    }
    .nav-links a:hover,
    .nav-links a:focus-visible{
      background:rgba(255,255,255,.08);
      color:#fff;
      transform:translateY(-1px);
    }
    .nav-links a.active{
      background:linear-gradient(135deg, rgba(207,154,26,.22), rgba(229,111,43,.18));
      color:#fff;
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
    }
    .nav-toggle{
      display:none;
      align-items:center;
      justify-content:center;
      width:46px;height:46px;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(255,255,255,.03);
      color:#fff;
      border-radius:14px;
      transition:background var(--ease), transform var(--ease), border-color var(--ease);
    }
    .nav-toggle:hover{
      background:rgba(255,255,255,.08);
      transform:translateY(-1px);
    }
    .nav-toggle svg{width:22px;height:22px}

    .article-hero{
      margin-top:22px;
      border-radius:var(--radius-lg);
      overflow:hidden;
      border:1px solid var(--line);
      background:
        linear-gradient(110deg, rgba(21,21,21,.96) 0%, rgba(25,25,25,.92) 55%, rgba(24,24,24,.84) 100%),
        url('<?php echo cms_e($pageBack); ?>') center/cover no-repeat;
      box-shadow:var(--shadow-2);
      color:var(--text-invert);
      position:relative;
    }
    .article-hero::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        radial-gradient(700px 280px at 86% 18%, rgba(207,154,26,.20), transparent 60%),
        linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.24));
      pointer-events:none;
    }
    .article-hero-inner{
      position:relative;
      display:grid;
      grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);
      gap:var(--gap-lg);
      padding:42px;
      align-items:center;
      min-height:420px;
    }
    .crumbs{
      display:flex;
      flex-wrap:wrap;
      align-items:center;
      gap:8px;
      color:rgba(249,246,239,.78);
      font-size:.94rem;
      margin-bottom:14px;
    }
    .crumbs a{
      color:rgba(249,246,239,.88);
      transition:color var(--ease);
    }
    .crumbs a:hover{color:#fff}
    .crumbs span.sep{
      opacity:.55;
    }
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:7px 12px;
      border-radius:999px;
      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.10);
      color:rgba(255,255,255,.86);
      font-size:.92rem;
      letter-spacing:.02em;
      margin-bottom:16px;
    }
    .eyebrow::before{
      content:"";
      width:8px;height:8px;
      border-radius:999px;
      background:linear-gradient(135deg, var(--accent), var(--accent-2));
      box-shadow:0 0 0 4px rgba(207,154,26,.14);
      flex:0 0 auto;
    }
    .article-title{
      margin:0;
      font-size:clamp(2rem, 3.2vw, 3.3rem);
      line-height:1.16;
      letter-spacing:-.02em;
      font-weight:800;
      max-width:13em;
    }
    .article-summary{
      margin:18px 0 0;
      max-width:38rem;
      color:rgba(249,246,239,.84);
      font-size:1.04rem;
      line-height:1.9;
    }
    .article-meta-row{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin:22px 0 0;
    }
    .meta-chip,
    .tag-chip{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 12px;
      border-radius:999px;
      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.10);
      color:rgba(255,255,255,.90);
      font-size:.92rem;
      line-height:1;
    }
    .article-hero-actions{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      margin-top:28px;
    }

    .site-btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      padding:13px 18px;
      border-radius:999px;
      border:1px solid transparent;
      transition:transform var(--ease), box-shadow var(--ease), border-color var(--ease), background var(--ease), color var(--ease);
      font-weight:700;
      letter-spacing:.01em;
      line-height:1;
      user-select:none;
    }
    .site-btn:hover{
      transform:translateY(-1px);
    }
    .site-btn:active{
      transform:translateY(0);
    }
    .site-btn-primary{
      background:linear-gradient(135deg, var(--accent), var(--accent-2));
      color:#fff;
      box-shadow:0 12px 26px rgba(207,154,26,.22);
    }
    .site-btn-primary:hover{
      box-shadow:0 16px 32px rgba(207,154,26,.28);
      color:#fff;
    }
    .site-btn-ghost{
      background:rgba(255,255,255,.04);
      border-color:rgba(255,255,255,.16);
      color:#fff;
    }
    .site-btn-ghost:hover{
      background:rgba(255,255,255,.08);
      color:#fff;
      border-color:rgba(255,255,255,.24);
    }
    .site-btn-outline{
      background:transparent;
      border-color:var(--line-strong);
      color:var(--text);
    }
    .site-btn-outline:hover{
      background:#fff;
      border-color:rgba(207,154,26,.35);
      box-shadow:0 10px 22px rgba(27,24,20,.08);
      color:var(--text);
    }
    .site-btn-small{
      padding:11px 14px;
      font-size:.95rem;
    }

    .hero-visual{
      background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
      border:1px solid rgba(255,255,255,.10);
      border-radius:26px;
      padding:14px;
      box-shadow:0 16px 34px rgba(0,0,0,.16);
    }
    .hero-visual img{
      width:100%;
      aspect-ratio:4/3;
      object-fit:cover;
      border-radius:18px;
      border:1px solid rgba(255,255,255,.10);
    }
    .hero-visual-note{
      margin-top:12px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      color:rgba(249,246,239,.84);
      font-size:.95rem;
    }
    .hero-visual-note strong{
      color:#fff;
      font-weight:700;
    }

    .quick-strip{
      margin-top:18px;
      background:var(--surface);
      border:1px solid var(--line);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      overflow:hidden;
    }
    .quick-strip-inner{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:0;
    }
    .quick-strip-item{
      padding:18px 20px;
      position:relative;
    }
    .quick-strip-item + .quick-strip-item::before{
      content:"";
      position:absolute;
      left:0;
      top:18px;
      bottom:18px;
      width:1px;
      background:var(--line);
    }
    .quick-strip-item h3{
      margin:0 0 6px;
      font-size:1.02rem;
      font-weight:800;
      color:var(--text);
    }
    .quick-strip-item p{
      margin:0;
      color:var(--text-2);
      font-size:.98rem;
      line-height:1.75;
    }

    .content-grid{
      display:grid;
      grid-template-columns:minmax(0,1.6fr) minmax(290px,.9fr);
      gap:var(--gap-lg);
      align-items:start;
      margin-top:22px;
    }
    .content-card,
    .side-card,
    .update-card,
    .faq-card,
    .cta-panel{
      background:var(--surface);
      border:1px solid var(--line);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
    }

    .article-card{
      padding:28px;
    }
    .article-section-head{
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:18px;
      margin-bottom:20px;
    }
    .section-label{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:7px 12px;
      border-radius:999px;
      background:var(--accent-soft);
      color:#8a6310;
      font-size:.88rem;
      font-weight:700;
      letter-spacing:.02em;
    }
    .article-section-head h2,
    .side-card h3,
    .updates-head h2,
    .faq-head h2,
    .cta-head h2{
      margin:0;
      font-size:1.26rem;
      line-height:1.25;
      font-weight:800;
      letter-spacing:-.01em;
      color:var(--text);
    }
    .section-note,
    .updates-head p,
    .faq-head p,
    .cta-head p{
      margin:0;
      color:var(--text-2);
      font-size:.98rem;
      line-height:1.8;
      max-width:58rem;
    }
    .article-body{
      min-width:0;
    }
    .cms-content{
      color:var(--text);
      font-size:1.02rem;
      line-height:1.95;
      overflow:hidden;
    }
    .cms-content > *:first-child{margin-top:0}
    .cms-content > *:last-child{margin-bottom:0}
    .cms-content h2,
    .cms-content h3,
    .cms-content h4{
      margin:1.8em 0 .7em;
      line-height:1.32;
      letter-spacing:-.01em;
      font-weight:800;
      color:var(--text);
    }
    .cms-content h2{font-size:1.56rem}
    .cms-content h3{font-size:1.28rem}
    .cms-content h4{font-size:1.12rem}
    .cms-content p{
      margin:0 0 1em;
      color:var(--text);
    }
    .cms-content a{
      color:#9a6c0c;
      text-decoration:underline;
      text-decoration-color:rgba(207,154,26,.32);
      text-underline-offset:3px;
      transition:color var(--ease), text-decoration-color var(--ease);
    }
    .cms-content a:hover{
      color:#704a06;
      text-decoration-color:rgba(112,74,6,.42);
    }
    .cms-content ul,
    .cms-content ol{
      padding-left:1.2em;
      margin:0 0 1.1em;
    }
    .cms-content li{
      margin:.35em 0;
    }
    .cms-content blockquote{
      margin:1.2em 0;
      padding:18px 20px;
      border-left:4px solid var(--accent);
      background:linear-gradient(180deg, rgba(207,154,26,.08), rgba(207,154,26,.04));
      border-radius:0 var(--radius-sm) var(--radius-sm) 0;
      color:#4d4333;
    }
    .cms-content img{
      width:100%;
      height:auto;
      margin:1.2em 0;
      border-radius:18px;
      border:1px solid var(--line);
      box-shadow:0 12px 24px rgba(27,24,20,.08);
      object-fit:cover;
    }
    .cms-content figure{
      margin:1.2em 0;
    }
    .cms-content figcaption{
      margin-top:8px;
      color:var(--text-2);
      font-size:.92rem;
      text-align:center;
    }
    .cms-content table{
      width:100%;
      border-collapse:collapse;
      margin:1.1em 0;
      display:block;
      overflow-x:auto;
      background:#fff;
      border:1px solid var(--line);
      border-radius:16px;
    }
    .cms-content th,
    .cms-content td{
      padding:12px 14px;
      border-bottom:1px solid var(--line);
      text-align:left;
      white-space:nowrap;
    }
    .cms-content th{
      background:var(--surface-2);
      font-weight:800;
    }
    .cms-content tr:last-child td{border-bottom:none}
    .cms-content hr{
      border:none;
      height:1px;
      background:var(--line);
      margin:1.4em 0;
    }

    .side-panel{
      display:grid;
      gap:18px;
      position:sticky;
      top:calc(var(--header-h) + 18px);
    }
    .side-card{
      padding:22px;
    }
    .side-card h3{
      font-size:1.08rem;
      margin-bottom:14px;
    }
    .info-list{
      display:grid;
      gap:10px;
      margin:0;
    }
    .info-row{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:14px;
      padding:12px 14px;
      border:1px solid var(--line);
      border-radius:16px;
      background:linear-gradient(180deg, #fff, #fcfaf4);
    }
    .info-row span{
      color:var(--text-2);
      font-size:.92rem;
      flex:0 0 auto;
    }
    .info-row strong{
      color:var(--text);
      font-weight:700;
      text-align:right;
      word-break:break-all;
    }
    .mini-links{
      display:grid;
      gap:10px;
    }
    .mini-link{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      padding:14px 15px;
      border-radius:16px;
      border:1px solid var(--line);
      background:linear-gradient(180deg, #fff, #fcfaf4);
      transition:transform var(--ease), box-shadow var(--ease), border-color var(--ease);
    }
    .mini-link:hover{
      transform:translateY(-2px);
      box-shadow:0 12px 24px rgba(27,24,20,.08);
      border-color:rgba(207,154,26,.28);
    }
    .mini-link strong{
      font-size:.98rem;
    }
    .mini-link span{
      color:var(--text-2);
      font-size:.9rem;
    }
    .check-list{
      list-style:none;
      padding:0;
      margin:0;
      display:grid;
      gap:10px;
    }
    .check-list li{
      position:relative;
      padding-left:22px;
      color:var(--text-2);
      line-height:1.75;
    }
    .check-list li::before{
      content:"";
      position:absolute;
      left:0;
      top:.65em;
      width:10px;
      height:10px;
      border-radius:50%;
      background:linear-gradient(135deg, var(--accent), var(--accent-2));
      box-shadow:0 0 0 4px rgba(207,154,26,.12);
    }

    .updates-head,
    .faq-head,
    .cta-head{
      margin-bottom:20px;
    }

    .updates-grid{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:20px;
    }
    .update-card{
      display:flex;
      flex-direction:column;
      overflow:hidden;
      transition:transform var(--ease), box-shadow var(--ease), border-color var(--ease);
      min-width:0;
    }
    .update-card:hover{
      transform:translateY(-3px);
      box-shadow:var(--shadow-2);
      border-color:rgba(207,154,26,.26);
    }
    .update-card .thumb{
      aspect-ratio:16/10;
      overflow:hidden;
      background:#e8dfd1;
      position:relative;
    }
    .update-card .thumb img{
      width:100%;
      height:100%;
      object-fit:cover;
      transition:transform 260ms ease;
    }
    .update-card:hover .thumb img{
      transform:scale(1.03);
    }
    .update-body{
      padding:18px;
      display:grid;
      gap:12px;
    }
    .update-tags{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      align-items:center;
    }
    .tag-soft{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:6px 10px;
      border-radius:999px;
      background:var(--accent-soft);
      color:#89620f;
      font-size:.84rem;
      font-weight:700;
    }
    .update-body h3{
      margin:0;
      font-size:1.05rem;
      line-height:1.45;
      font-weight:800;
      color:var(--text);
    }
    .update-body p{
      margin:0;
      color:var(--text-2);
      font-size:.96rem;
      line-height:1.8;
    }
    .update-meta{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      align-items:center;
      color:var(--text-2);
      font-size:.88rem;
      margin-top:auto;
    }
    .update-link{
      display:inline-flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      margin-top:4px;
      padding-top:12px;
      border-top:1px solid var(--line);
      color:#8a6310;
      font-weight:700;
      transition:color var(--ease);
    }
    .update-link:hover{color:#6c4a08}

    .faq-grid{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:18px;
    }
    .faq-card{
      overflow:hidden;
    }
    .faq-item{
      border-bottom:1px solid var(--line);
    }
    .faq-item:last-child{border-bottom:none}
    summary{
      list-style:none;
      cursor:pointer;
      padding:18px 20px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      font-weight:700;
      color:var(--text);
    }
    summary::-webkit-details-marker{display:none}
    summary::after{
      content:"+";
      width:28px;height:28px;
      display:grid;
      place-items:center;
      border-radius:999px;
      background:var(--accent-soft);
      color:#855d0c;
      flex:0 0 auto;
      transition:transform var(--ease), background var(--ease);
    }
    details[open] summary::after{
      content:"−";
      background:rgba(229,111,43,.12);
      color:#a34e18;
    }
    .faq-content{
      padding:0 20px 18px;
      color:var(--text-2);
      line-height:1.85;
    }

    .cta-panel{
      margin-top:22px;
      padding:28px;
      background:
        linear-gradient(135deg, rgba(21,21,21,.98), rgba(28,28,28,.94)),
        url('<?php echo cms_e($pageBack); ?>') center/cover no-repeat;
      color:var(--text-invert);
      position:relative;
      overflow:hidden;
    }
    .cta-panel::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        radial-gradient(700px 260px at 80% 10%, rgba(207,154,26,.18), transparent 60%),
        linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.22));
      pointer-events:none;
    }
    .cta-inner{
      position:relative;
      display:grid;
      grid-template-columns:minmax(0,1fr) auto;
      gap:20px;
      align-items:center;
    }
    .cta-head h2{
      color:#fff;
      margin-bottom:8px;
    }
    .cta-head p{
      color:rgba(249,246,239,.82);
      max-width:46rem;
    }
    .cta-actions{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      justify-content:flex-end;
    }
    .site-btn-light{
      background:rgba(255,255,255,.08);
      border-color:rgba(255,255,255,.14);
      color:#fff;
    }
    .site-btn-light:hover{
      background:rgba(255,255,255,.14);
      color:#fff;
      border-color:rgba(255,255,255,.24);
    }

    .empty-state{
      border:1px dashed var(--line-strong);
      border-radius:22px;
      padding:26px;
      background:linear-gradient(180deg, #fff, #fcfaf4);
      text-align:center;
    }
    .empty-state h3{
      margin:0 0 10px;
      font-size:1.18rem;
      font-weight:800;
    }
    .empty-state p{
      margin:0 0 18px;
      color:var(--text-2);
      line-height:1.8;
    }

    .site-footer{
      margin-top:28px;
      padding:28px 0 18px;
      background:linear-gradient(180deg, #171717, #101010);
      color:rgba(249,246,239,.84);
      border-top:1px solid rgba(255,255,255,.08);
    }
    .footer-inner{
      display:grid;
      gap:18px;
    }
    .footer-grid{
      display:grid;
      grid-template-columns:1.3fr .8fr 1fr;
      gap:24px;
      align-items:start;
    }
    .footer-brand p{
      margin:14px 0 0;
      color:rgba(249,246,239,.72);
      line-height:1.85;
      max-width:34rem;
    }
    .footer-col h3{
      margin:0 0 12px;
      font-size:1rem;
      color:#fff;
      font-weight:800;
    }
    .footer-links{
      display:grid;
      gap:10px;
    }
    .footer-links a,
    .footer-links span{
      color:rgba(249,246,239,.76);
      transition:color var(--ease), transform var(--ease);
    }
    .footer-links a:hover{
      color:#fff;
      transform:translateX(2px);
    }
    .footer-note{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      padding-top:16px;
      border-top:1px solid rgba(255,255,255,.10);
      color:rgba(249,246,239,.62);
      font-size:.94rem;
    }

    @media (max-width: 1200px){
      .article-hero-inner{
        grid-template-columns:1.05fr .95fr;
      }
      .updates-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
      }
    }
    @media (max-width: 1024px){
      .content-grid{
        grid-template-columns:1fr;
      }
      .side-panel{
        position:static;
      }
      .faq-grid{
        grid-template-columns:1fr;
      }
      .footer-grid{
        grid-template-columns:1fr 1fr;
      }
      .footer-brand{
        grid-column:1 / -1;
      }
    }
    @media (max-width: 860px){
      .article-hero-inner{
        grid-template-columns:1fr;
        min-height:auto;
      }
      .quick-strip-inner{
        grid-template-columns:1fr;
      }
      .quick-strip-item + .quick-strip-item::before{
        display:none;
      }
      .updates-grid{
        grid-template-columns:1fr;
      }
      .cta-inner{
        grid-template-columns:1fr;
      }
      .cta-actions{
        justify-content:flex-start;
      }
    }
    @media (max-width: 768px){
      .nav-toggle{display:inline-flex}
      .nav-links{
        position:absolute;
        right:0;
        top:calc(100% + 12px);
        display:none;
        flex-direction:column;
        align-items:stretch;
        min-width:220px;
        padding:10px;
        border-radius:18px;
        border:1px solid rgba(255,255,255,.12);
        background:rgba(20,20,20,.98);
        box-shadow:0 20px 40px rgba(0,0,0,.22);
      }
      .site-nav.open .nav-links{display:flex}
      .nav-links a{
        width:100%;
        padding:13px 14px;
        border-radius:14px;
      }
      .article-hero-inner,
      .article-card,
      .side-card,
      .cta-panel{
        padding:22px;
      }
      .site-header{
        height:var(--header-h);
      }
      .hero-actions,
      .article-hero-actions{
        gap:10px;
      }
      .site-btn{
        width:auto;
      }
      .site-btn.site-btn-full-mobile{
        width:100%;
      }
      .footer-grid{
        grid-template-columns:1fr;
      }
      .footer-note{
        flex-direction:column;
        align-items:flex-start;
      }
    }
    @media (max-width: 520px){
      .container{
        width:min(var(--container), calc(100% - 24px));
      }
      .article-title{
        font-size:1.9rem;
      }
      .article-summary{
        font-size:1rem;
      }
      .article-hero,
      .content-card,
      .side-card,
      .update-card,
      .faq-card,
      .cta-panel{
        border-radius:20px;
      }
      .article-card,
      .side-card,
      .cta-panel{
        padding:18px;
      }
      .article-section-head{
        flex-direction:column;
        align-items:flex-start;
      }
      .site-btn{
        width:100%;
      }
      .hero-visual-note{
        flex-direction:column;
        align-items:flex-start;
      }
      .info-row{
        flex-direction:column;
        align-items:flex-start;
      }
      .info-row strong{
        text-align:left;
      }
      summary{
        padding:16px 16px;
      }
      .faq-content{
        padding:0 16px 16px;
      }
    }

/* roulang: framework shim */
/* 覆盖 Bootstrap 等对 a/btn 的全局默认，避免导航出现下划线/蓝链 */
.site-header a,.site-header a:hover,.navbar a,.navbar a:hover,.nav-links a,.nav-links a:hover,header nav a,header nav a:hover{text-decoration:none}
.site-header .btn,.navbar .btn,.nav-cta{text-decoration:none}