/* ============================================================
   恒信法律智库 · 文章详情页（article reader）
   檀褐古金 · 深底 hero → 浅底正文 → 墨绿垂询（明暗交替）
   复用 styles.css 的 :root 变量 + topbar / footer / grain / shell
   ============================================================ */

/* ---------- hero (dark) ---------- */
.article-hero{position:relative;overflow:hidden;background:var(--bark);color:var(--on-dark);
  padding:130px 0 74px}
.article-hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(72% 60% at 84% 0%,rgba(60,114,89,.16),transparent 60%),
    radial-gradient(60% 55% at -4% 100%,rgba(176,134,63,.13),transparent 58%)}
.article-hero::after{content:"";position:absolute;top:0;bottom:0;width:1px;
  left:max(26px,calc((100% - var(--shell))/2));
  background:linear-gradient(180deg,transparent,var(--line-g),transparent)}
.article-hero .shell{position:relative}
.article-back{display:inline-flex;align-items:center;gap:9px;margin-bottom:30px;
  font-family:var(--sans);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--on-dark-soft);transition:color .3s var(--ease)}
.article-back:hover{color:var(--gold-2)}
.article-hero .kicker{margin:0 0 24px}
.article-title{margin:0;max-width:22ch;font-family:var(--serif);font-weight:500;
  font-size:clamp(33px,4.6vw,58px);line-height:1.12;letter-spacing:.005em;color:var(--on-dark)}
.article-lead{max-width:62ch;margin:28px 0 0;font-size:18.5px;line-height:1.86;color:var(--on-dark-soft)}
.article-meta{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:36px;padding-top:24px;
  border-top:1px solid var(--line-d);font-family:var(--roman);font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold-2)}
.article-meta span{color:var(--on-dark-soft)}

/* ---------- body (light) ---------- */
.article-wrap{background:var(--cream);color:var(--ink);position:relative;z-index:1}
.article-body{max-width:768px;padding:96px 0 102px}
.article-body p{margin:0 0 26px;font-size:18px;line-height:1.92;color:var(--ink)}
.article-body h2{margin:56px 0 18px;font-family:var(--serif);font-weight:500;
  font-size:clamp(25px,3vw,33px);line-height:1.22;color:var(--ink)}
.article-body h2:first-child{margin-top:0}
.article-body h2::before{content:"";display:block;width:44px;height:2px;background:var(--gold);
  margin-bottom:20px}
.article-body blockquote{margin:46px 0;padding:4px 0 4px 32px;border-left:3px solid var(--gold);
  font-family:var(--serif);font-style:italic;font-size:clamp(21px,2.4vw,27px);line-height:1.5;
  color:var(--jade-deep)}
.article-notice{margin:54px 0 0;padding:20px 24px;background:rgba(43,86,69,.07);
  border:1px solid rgba(43,86,69,.2);border-left:3px solid var(--jade);
  font-size:14px;line-height:1.72;color:#4a4226}
.article-anchors{margin:48px 0 0;padding-top:32px;border-top:1px solid var(--line-l)}
.article-anchors h3{margin:0 0 16px;font-family:var(--roman);font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold)}
.article-anchors ul{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}
.article-anchors li{font-family:var(--roman);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--jade);border:1px solid var(--line-l);padding:7px 14px}

/* ---------- 垂询 cta (jade = 德恒联动强调) ---------- */
.article-cta{position:relative;overflow:hidden;color:var(--on-dark);padding:94px 0;text-align:center;
  background:radial-gradient(130% 130% at 78% 0%,var(--jade),var(--jade-deep) 72%)}
.article-cta::before{content:"";position:absolute;inset:0;opacity:.4;pointer-events:none;
  background:linear-gradient(90deg,rgba(239,229,207,.05) 1px,transparent 1px),
            linear-gradient(180deg,rgba(239,229,207,.05) 1px,transparent 1px);
  background-size:70px 70px;mask-image:radial-gradient(80% 80% at 50% 30%,#000,transparent 76%)}
.article-cta .shell{position:relative}
.article-cta .sec-kicker{color:var(--gold-2)}
.article-cta h2{margin:14px auto 32px;max-width:24ch;font-family:var(--serif);font-weight:500;
  font-size:clamp(27px,3.6vw,42px);line-height:1.26;color:#fff}
.cta-rows{display:grid;max-width:540px;margin:0 auto;border-top:1px solid rgba(239,229,207,.2)}
.cta-rows a{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  padding:21px 6px;border-bottom:1px solid rgba(239,229,207,.2);transition:.35s var(--ease)}
.cta-rows a:hover{padding-inline:16px;background:rgba(239,229,207,.05)}
.cta-rows .c-name{font-size:14px;color:var(--on-dark-soft)}
.cta-rows .c-mail{font-family:var(--serif);font-size:19px;color:var(--gold-2)}
.cta-rows a:hover .c-mail{color:#fff}

/* ---------- responsive ---------- */
@media (max-width:680px){
  .article-hero{padding:98px 0 56px}
  .article-body{padding:64px 0 74px}
  .article-body p{font-size:16.5px}
  .article-body h2{margin:44px 0 16px}
  .article-cta{padding:70px 0}
}