:root{
      --gold:#d39a45;
      --gold-2:#f1c372;
      --muted:rgba(255,255,255,.72);
      --muted-2:rgba(255,255,255,.48);
      --line:rgba(255,255,255,.08);
      --line-gold:rgba(211,154,69,.28);
      --page-x:clamp(18px,2vw,36px);
      --gap:clamp(14px,1.25vw,22px);
      --shadow:0 18px 42px rgba(0,0,0,.22);
    }

    /* ===== 顶部标题区 ===== */
    .hero{
      position:relative;
      width:100%;
      min-height:clamp(360px,34vw,480px);
      overflow:hidden;
      background:
        linear-gradient(90deg,rgba(0,0,0,.66) 0%,rgba(0,0,0,.56) 38%,rgba(0,0,0,.18) 70%,rgba(0,0,0,.10) 100%),
        linear-gradient(180deg,#111820 0%,#060a0e 100%);
      border-bottom:1px solid rgba(255,255,255,.05);
    }
    .hero::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(180deg,rgba(255,255,255,.03),transparent 16%),
        linear-gradient(180deg,transparent 64%,rgba(0,0,0,.36) 100%);
      pointer-events:none;
    }
    .hero-visual{position:absolute;inset:0;overflow:hidden}
    .hero-bg{
      position:absolute;inset:0;
      background:
        radial-gradient(circle at 62% 20%,rgba(255,255,255,.06),transparent 18%),
        linear-gradient(180deg,#0c1722 0%,#07111a 46%,#040a10 100%);
    }
    .hero-line,
    .hero-col,
    .hero-platform,
    .hero-light{position:absolute}
    .hero-col{
      top:0;bottom:0;width:12px;
      background:linear-gradient(180deg,#263646 0%,#17222c 50%,#0e151c 100%);
    }
    .hc1{left:48%}.hc2{left:61%}.hc3{left:74%}.hc4{left:87%}
    .hero-line{
      height:9px;
      background:linear-gradient(90deg,#8e6323 0%,#d39a45 30%,#8e6323 100%);
      opacity:.84;
    }
    .hl1{left:44%;right:4%;top:44%;transform:rotate(-18deg);transform-origin:left center}
    .hl2{left:53%;right:18%;top:54%;transform:rotate(16deg);transform-origin:left center}
    .hl3{left:34%;right:40%;top:64%;transform:rotate(24deg);transform-origin:left center}
    .hero-platform{
      width:150px;height:88px;
      border:1px solid rgba(255,255,255,.08);
      background:linear-gradient(180deg,#2b3540 0%,#172029 100%);
      box-shadow:0 12px 24px rgba(0,0,0,.22);
    }
    .hp1{left:58%;top:46%}.hp2{left:76%;top:57%;width:126px;height:70px}
    .hero-light{
      width:5px;height:5px;border-radius:50%;background:#fff;
      box-shadow:0 0 10px rgba(255,255,255,.75),0 0 24px rgba(211,154,69,.36);
    }
    .ht1{left:52%;top:18%}.ht2{left:60%;top:24%}.ht3{left:70%;top:16%}.ht4{left:82%;top:24%}.ht5{left:90%;top:16%}
    .hero-inner{
      position:relative;z-index:2;
      width:100%;min-height:inherit;
      display:flex;
      align-items:center;
      padding:0 var(--page-x);
    }
    .hero-copy{position:relative;top:auto;left:auto;width:100%;opacity:1;pointer-events:auto;max-width:980px;padding:48px 0}
    .breadcrumb{
      display:flex;align-items:center;gap:10px;flex-wrap:wrap;
      margin-bottom:24px;color:rgba(255,255,255,.50);font-size:13px;
    }
    .breadcrumb span:last-child{color:var(--gold-2)}
    .hero-tag{
      margin:0 0 12px;
      color:var(--gold-2);
      font-size:clamp(15px,1vw,18px);
      font-weight:700;
      letter-spacing:.18em;
      text-transform:uppercase;
    }
    .hero-title{
      margin:0;
      color:#fff;
      font-size:clamp(38px,3.6vw,66px);
      line-height:1.25;
      font-weight:900;
      letter-spacing:.015em;
      text-shadow:0 10px 28px rgba(0,0,0,.26);
    }
    .hero-meta{
      display:flex;align-items:center;gap:18px;flex-wrap:wrap;
      margin-top:20px;color:rgba(255,255,255,.56);font-size:14px;
    }
    .hero-meta .category{color:var(--gold-2);font-weight:700}

    /* ===== 正文主体 ===== */
    .article-wrap{
      width:100%;
      display:grid;
      grid-template-columns:1fr;
      gap:var(--gap);
      padding:28px var(--page-x) 42px;
      background:linear-gradient(180deg,#04111b 0%,#030a11 100%);
    }
    .article{
      min-width:0;
      border:1px solid var(--line);
      background:linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,.008));
      padding:clamp(22px,2.2vw,38px);
    }
    .article-lead{
      margin:0 0 26px;
      padding:18px 20px;
      border-left:3px solid var(--gold);
      background:rgba(211,154,69,.06);
      color:rgba(255,255,255,.82);
      font-size:18px;
      line-height:1.9;
    }
    .article p{
      margin:0 0 22px;
      color:var(--muted);
      font-size:16px;
      line-height:2;
      text-align:justify;
    }
    .article h2{
      margin:34px 0 16px;
      color:#fff;
      font-size:28px;
      line-height:1.4;
      font-weight:800;
    }
    .article h2::after{
      content:"";
      display:block;
      width:48px;height:3px;margin-top:10px;
      background:linear-gradient(90deg,var(--gold),var(--gold-2));
    }
    .article-image{
      position:relative;
      width:100%;
      aspect-ratio:1.76 / 1;
      margin:26px 0;
      overflow:hidden;
      border:1px solid rgba(255,255,255,.08);
      background:linear-gradient(180deg,#7c8791 0%,#4a535b 36%,#171b1f 100%);
    }
    .article-image::before{
      content:"";
      position:absolute;
      inset:12px;
      border:1px dashed rgba(255,255,255,.15);
    }
    .article-image::after{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(180deg,rgba(255,255,255,.10),transparent 20%),linear-gradient(180deg,transparent 68%,rgba(0,0,0,.28) 100%);
    }
    .image-shape-a,
    .image-shape-b,
    .image-shape-c{position:absolute}
    .image-shape-a{
      left:8%;bottom:12%;width:56%;height:23%;
      background:linear-gradient(135deg,#dce0e3 0%,#f4f5f6 48%,#c9d0d6 100%);
      clip-path:polygon(0 70%,15% 54%,28% 48%,46% 34%,65% 36%,100% 52%,88% 66%,72% 74%,20% 74%,8% 72%);
    }
    .image-shape-b{
      right:12%;top:18%;width:34%;height:40%;
      background:rgba(211,154,69,.28);
      clip-path:polygon(0 100%,12% 0,100% 12%,88% 100%);
    }
    .image-shape-c{
      left:0;right:0;bottom:0;height:30%;
      background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.28) 100%);
    }
    .article-quote{
      margin:28px 0;
      padding:24px 28px;
      border:1px solid var(--line-gold);
      background:linear-gradient(180deg,rgba(211,154,69,.06),rgba(211,154,69,.025));
      color:#fff;
      font-size:20px;
      line-height:1.8;
      font-weight:600;
    }
    .article-footer{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:18px;
      flex-wrap:wrap;
      padding-top:24px;
      margin-top:26px;
      border-top:1px solid var(--line);
    }
    .tags{display:flex;gap:10px;flex-wrap:wrap}
    .tag-pill{
      padding:7px 12px;
      border:1px solid var(--line-gold);
      background:rgba(211,154,69,.04);
      color:var(--gold-2);
      font-size:12px;
    }
    .share{
      display:flex;align-items:center;gap:8px;color:var(--muted-2);font-size:13px;
    }
    .share-dot{
      width:28px;height:28px;border:1px solid var(--line);border-radius:50%;
      display:grid;place-items:center;background:rgba(255,255,255,.02);
    }

    /* ===== 上下篇 ===== */
    .article-nav{
      width:100%;
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:var(--gap);
      padding:0 var(--page-x) 34px;
      background:linear-gradient(180deg,#030a11 0%,#02070c 100%);
    }
    .nav-article{
      min-width:0;
      display:flex;
      align-items:center;
      gap:16px;
      padding:20px;
      border:1px solid var(--line);
      background:rgba(255,255,255,.015);
      transition:.22s ease;
    }
    .nav-article:hover{border-color:var(--line-gold);transform:translateY(-2px)}
    .nav-arrow{font-size:30px;color:var(--gold-2)}
    .nav-article small{display:block;margin-bottom:6px;color:var(--muted-2);font-size:12px}
    .nav-article strong{display:block;color:#fff;font-size:16px;line-height:1.5}
    .nav-article.next{justify-content:flex-end;text-align:right}

    /* ===== 推荐阅读 ===== */
    .recommend{
      width:100%;
      padding:0 var(--page-x) 42px;
      background:linear-gradient(180deg,#02070c 0%,#010407 100%);
    }
    .recommend-head{
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:18px;
      margin-bottom:18px;
    }
    .recommend-head h2{margin:0;color:#fff;font-size:30px}
    .recommend-head p{margin:0;color:var(--muted-2);font-size:13px;letter-spacing:.08em}
    .recommend-grid{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:var(--gap);
    }
    .recommend-card{
      min-width:0;
      overflow:hidden;
      border:1px solid var(--line);
      background:linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,.008));
      transition:.22s ease;
    }
    .recommend-card:hover{transform:translateY(-3px);border-color:var(--line-gold);box-shadow:var(--shadow)}
    .recommend-thumb{
      position:relative;
      width:100%;aspect-ratio:1.72/1;
      overflow:hidden;
      background:linear-gradient(180deg,#87939d 0%,#535d66 36%,#171b1f 100%);
    }
    .recommend-thumb::before{content:"";position:absolute;inset:10px;border:1px dashed rgba(255,255,255,.12)}
    .recommend-body{padding:16px}
    .recommend-meta{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:8px;color:var(--muted-2);font-size:12px}
    .recommend-meta span:first-child{color:var(--gold-2)}
    .recommend-title{margin:0;color:#fff;font-size:18px;line-height:1.55}

    /* ===== 响应式 ===== */
    @media (max-width:1100px){
      .recommend-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    }

    @media (max-width:980px){
      .hero{min-height:340px}
      .hero-inner{padding:0 18px}
      .article-nav{grid-template-columns:1fr}
    }

    @media (max-width:720px){
      .recommend-grid{grid-template-columns:1fr}
      .article{padding:18px}
      .article h2{font-size:24px}
      .article p{font-size:15px}
      .article-lead{font-size:16px;padding:16px}
      .article-quote{font-size:17px;padding:20px}
    }

    @media (max-width:640px){
      .hero{min-height:320px}
      .hero-inner{padding:0 14px}
      .hero-copy{padding:38px 0}
      .breadcrumb{font-size:12px;margin-bottom:18px}
      .hero-title{font-size:32px}
      .hero-meta{gap:10px;font-size:12px}
      .article-wrap{padding:18px 14px 28px}
      .article-footer{align-items:flex-start}
      .recommend{padding:0 14px 30px}
      .article-nav{padding:0 14px 28px}
      .recommend-head{align-items:flex-start;flex-direction:column}
    }