/* 研究院文章（公众号镜像）页面样式 */
.article{max-width:820px;margin:0 auto;padding:40px 20px 64px}
.article-eyebrow{color:#1557B0;font-weight:600;letter-spacing:.08em;font-size:13px;text-transform:uppercase;margin-bottom:10px}
.article-title{font-size:30px;line-height:1.35;margin:0 0 14px;color:#102a43}
.article-meta{color:#5b6b7b;font-size:14px;margin:0 0 24px;border-bottom:1px solid #eef2f7;padding-bottom:16px}
.article-meta a{color:#1557B0;text-decoration:none}
/* 转载稿的角标。只在后台「来源」填了本院以外的东西时出现，
   目的不是装饰，是让读者两秒内分清「本院原创」和「转来的」——
   这直接关系到稿子被质疑时能不能说清出处。 */
.article-meta__reprint{display:inline-block;margin-left:8px;padding:1px 7px;border-radius:4px;background:#eef4fb;color:#1557B0;font-size:12px;line-height:1.7;letter-spacing:.5px;vertical-align:1px}
.article-cover{margin:0 0 28px;aspect-ratio:16/9;overflow:hidden;background:#eef2f7}
.article-cover img{width:100%;height:100%;object-fit:cover;border-radius:10px;display:block}
.article-body{font-size:17px;line-height:1.9;color:#1f2d3d;text-indent:2em}
.article-body img{max-width:100%;height:auto;display:block;margin:18px auto;border-radius:6px}
.article-body p{margin:0 0 1.1em}
/* 首行缩进 2em（正好两个字）挂在外层，p / section / 裸文本都能吃到——老站稿子
   有 24 篇用 <section> 当段落容器，只给 <p> 设会漏一半。下面这些不是成段叙述，
   缩进会把它们推歪，逐个取消。 */
.article-body h1,.article-body h2,.article-body h3,.article-body h4,
.article-body ul,.article-body ol,.article-body li,
.article-body figure,.article-body figcaption,
.article-body table,.article-body th,.article-body td,
.article-body p.figcap{text-indent:0}
.article-body p:has(img){text-indent:0}
/* 图注：比正文小一号的灰字，紧贴图片居中。老站这批稿子的图注就是普通 <p>，
   构建时按位置识别后加 .figcap（见 build_articles.mark_figcaps）。 */
.article-body p.figcap{text-align:center;font-size:14px;line-height:1.65;color:#64748b;margin:-6px 0 1.5em}
/* 小节标题：旧编辑器里用「加粗一小截字」当标题，构建时识别成 .subhead。
   顶格 + 左侧主色竖线，跟缩进 2 字的正文拉开层级。 */
.article-body p.subhead{text-indent:0;font-size:18px;font-weight:700;color:#102a43;line-height:1.5;margin:1.5em 0 .7em;padding-left:11px;border-left:3px solid #1557B0}
.article-body p.subhead:first-child{margin-top:.3em}
/* 「二、」下面紧跟「（一）」时，两级标题之间的留白会叠成一大块 */
.article-body p.subhead:has(+ p.subhead){margin-bottom:0}
.article-body p.subhead strong{font-weight:inherit}
.article-body h1,.article-body h2,.article-body h3{margin:1.4em 0 .6em;color:#102a43;line-height:1.4}
/* 公众号导入的稿子带真 <h2>，跟 .subhead 是同一层意思，样式对齐——否则同一个
   站里两种「小标题」，一个 25px 无竖线、一个 18px 带竖线，翻两篇就觉得是两个站。 */
.article-body h1,.article-body h2{font-size:19px;font-weight:700;line-height:1.5;padding-left:11px;border-left:3px solid #1557B0}
.article-body h3{font-size:17px;font-weight:700}
/* site.css 把 ul/ol 的 list-style 全局清掉了（导航、卡片列表用），正文里的
   有序/无序列表要单独恢复，否则四条并列的内容会连成一片段落，读起来分不清。 */
.article-body ul,.article-body ol{margin:0 0 1.1em;padding-left:1.5em}
.article-body ul{list-style:disc}
.article-body ol{list-style:decimal}
.article-body li{margin:.3em 0}
.article-body figure{margin:18px 0}
.article-body figure img{margin:0 auto}
.article-body figcaption{font-size:14px;color:#64748b;text-align:center;margin-top:10px;line-height:1.65}
.article-body video{max-width:100%;height:auto;display:block;margin:18px auto}
.article-body a{color:#1557B0}
.article-foot{margin-top:36px;padding-top:18px;border-top:1px solid #eef2f7;color:#8492a6;font-size:13.5px;line-height:1.7}
.art-grid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px}
.art-card{background:#fff;border:1px solid #eef2f7;border-radius:12px;overflow:hidden;transition:transform .15s,box-shadow .15s}
.art-card:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(21,87,176,.12)}
.art-card a{color:inherit;text-decoration:none}
.art-card__media{aspect-ratio:16/9;overflow:hidden;background:#eef2f7}
.art-card__media img{width:100%;height:100%;object-fit:cover;display:block}
/* 无封面时的中性占位块（官网迁移文章，区别于绿色微信卡） */
.art-card__media--plain{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1557B0,#0e3f86);color:#fff;font-size:14px;letter-spacing:.06em;text-align:center;padding:0 12px}
/* 无可用配图时的分类占位卡：纯 CSS 生成，不请求图片。
   旧站大量文章配图抓取失败，直接留白或套同一张 logo 海报都会让列表像复制粘贴；
   这里按分类换色系，渐变角度、字标、圆环、斜线都由构建端按 slug 散列写入内联变量。 */
.art-gen{position:relative;overflow:hidden;isolation:isolate;background:linear-gradient(rgba(0,0,0,var(--bk,0)),rgba(0,0,0,var(--bk,0))),radial-gradient(115% 90% at 100% 0%,rgba(255,255,255,.16),transparent 62%),linear-gradient(var(--ga,135deg),var(--gen-a,#1557B0),var(--gen-b,#0C2E63))}
.art-gen[data-tone="1"]{--bk:.12}
.art-gen[data-tone="2"]{--bk:.24}
.art-gen::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:26px 26px;-webkit-mask-image:linear-gradient(150deg,#000,transparent 72%);mask-image:linear-gradient(150deg,#000,transparent 72%)}
.art-gen::after{content:"";position:absolute;left:50%;top:50%;width:130%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);transform:translate(-50%,-50%) rotate(var(--la,18deg))}
/* 四种底纹按 hash 轮换，避免同一分类下的占位卡彼此雷同 */
.art-gen[data-pat="1"]::before{background-image:repeating-linear-gradient(-52deg,rgba(255,255,255,.09) 0 1px,transparent 1px 22px);-webkit-mask-image:none;mask-image:none}
.art-gen[data-pat="1"]::after{height:auto;width:auto;inset:0;transform:none;background:radial-gradient(60% 80% at 16% 100%,rgba(255,255,255,.1),transparent 70%)}
.art-gen[data-pat="2"]::before{background-image:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1px);background-size:15px 15px;-webkit-mask-image:linear-gradient(200deg,#000,transparent 78%);mask-image:linear-gradient(200deg,#000,transparent 78%)}
.art-gen[data-pat="2"]::after{display:none}
.art-gen[data-pat="3"]::before{background-image:none}
.art-gen[data-pat="3"]::after{inset:auto -10% -55% auto;left:auto;top:auto;width:120%;height:120%;transform:none;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:radial-gradient(circle at 50% 20%,rgba(255,255,255,.09),transparent 62%)}
.art-gen__ring{position:absolute;left:var(--r1x,72%);top:var(--r1y,-10%);width:var(--r1s,48%);aspect-ratio:1;border-radius:50%;border:1px solid rgba(255,255,255,.17);transform:translate(-50%,-50%)}
.art-gen[data-pat="2"] .art-gen__ring,.art-gen[data-pat="3"] .art-gen__ring{display:none}
.art-gen__ring::after{content:"";position:absolute;left:var(--r2x,30%);top:var(--r2y,120%);width:calc(var(--r2s,24%) * 2.6);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.09),transparent 70%)}
.art-gen__title{position:absolute;left:16px;right:16px;top:15px;font-size:16px;line-height:1.48;font-weight:600;color:rgba(255,255,255,.97);letter-spacing:.01em;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-shadow:0 1px 12px rgba(0,0,0,.18)}
.art-gen__tag{position:absolute;left:15px;bottom:34px;font-size:11.5px;letter-spacing:.1em;padding:3px 8px;border:1px solid rgba(255,255,255,.36);border-radius:3px;color:rgba(255,255,255,.94);background:rgba(255,255,255,.06)}
.art-gen__ym{position:absolute;left:15px;bottom:14px;font-size:11px;letter-spacing:.1em;color:rgba(255,255,255,.58)}
.art-gen[data-cat="news"]{--gen-a:#1B5FBF;--gen-b:#0B2B5E}
.art-gen[data-cat="event"]{--gen-a:#0E7490;--gen-b:#062E3A}
.art-gen[data-cat="meeting"]{--gen-a:#4338CA;--gen-b:#1A1746}
.art-gen[data-cat="talent"]{--gen-a:#0F766E;--gen-b:#042B29}
.art-gen[data-cat="research"]{--gen-a:#1E40AF;--gen-b:#0A1B45}
.art-gen[data-cat="media"]{--gen-a:#475569;--gen-b:#1B2432}
.art-gen[data-cat="notice"]{--gen-a:#B45309;--gen-b:#3D1804}
.art-gen[data-cat="digest"]{--gen-a:#6D28D9;--gen-b:#2A0F5C}
/* Route A：跳转微信原文的卡片用品牌占位块，避免微信图床裂图 */
.art-card__media--wechat{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:linear-gradient(135deg,#1aad19,#0b8e0b);color:#fff;text-decoration:none}
.art-card__wechat{font-size:19px;font-weight:700;letter-spacing:.04em}
.art-card__wechat-sub{font-size:13px;opacity:.92}
.art-card h3{font-size:17px;line-height:1.5;margin:14px 16px 8px;color:#102a43}
.art-card__meta{margin:0 16px 16px;color:#8492a6;font-size:13px}
@media(max-width:600px){.article-title{font-size:24px}.article-body{font-size:16px}}

/* ---------- 正文收尾：相关阅读 + 合作入口 ----------
   原来文章读完就是页脚，从搜索进来的人没有下一篇、也没有谈合作的地方。 */
.article-related{margin-top:42px;padding-top:26px;border-top:1px solid #eef2f7}
.article-related__head{font-size:16px;color:#0b2038;margin:0 0 14px;letter-spacing:.02em}
.arel{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.arel a{display:grid;grid-template-columns:92px minmax(0,1fr);gap:14px;align-items:baseline;padding:11px 2px;border-bottom:1px solid #f4f7fb;color:#0b2038;text-decoration:none}
.arel a:hover .arel__title{color:#1557b0}
.arel__date{font-size:12.5px;color:#8492a6;font-variant-numeric:tabular-nums}
.arel__title{font-size:14.5px;line-height:1.6;transition:color .15s}

.article-cta{margin-top:34px;display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between;padding:26px 28px;border-radius:14px;background:linear-gradient(135deg,#f3f8ff,#eaf1fb);border:1px solid #dfeaf8}
.article-cta__text{min-width:0;max-width:640px}
.article-cta__text h2{margin:0 0 8px;font-size:17px;color:#0b2038}
.article-cta__text p{margin:0;font-size:13.5px;line-height:1.8;color:#4a5a6e}
.article-cta__btn{flex:none;display:inline-flex;align-items:center;gap:6px;padding:11px 22px;border-radius:9px;background:#1557b0;color:#fff;text-decoration:none;font-size:14px;transition:background .15s}
.article-cta__btn:hover{background:#10458f}

@media (max-width:640px){
  .article-cta{padding:20px;gap:14px}
  .article-cta__btn{width:100%;justify-content:center}
  .arel a{grid-template-columns:1fr;gap:2px}
}

/* ---------- 标签与系列（2026-10-24） ---------- */
.article-tags{display:flex;flex-wrap:wrap;gap:8px;margin:-8px 0 24px}
.tag-chip{display:inline-block;padding:3px 11px;border:1px solid #d8e4f2;border-radius:999px;background:#f4f8fd;color:#1557B0;font-size:13px;line-height:1.7;text-decoration:none;transition:background .18s,color .18s}
.tag-chip:hover{background:#1557B0;color:#fff;border-color:#1557B0}

.series-nav{margin:36px 0 0;border:1px solid #e4ebf4;border-radius:10px;overflow:hidden}
.series-nav__head{display:flex;justify-content:space-between;gap:12px;align-items:baseline;background:#f4f8fd;padding:11px 18px;font-size:13.5px;color:#1557B0;font-weight:600}
.series-nav__idx{color:#7b8b9c;font-weight:400}
.series-nav__body{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#e4ebf4}
.series-nav__item{display:flex;flex-direction:column;gap:4px;padding:14px 18px;background:#fff;text-decoration:none;transition:background .18s}
.series-nav__item:hover{background:#f9fbfe}
.series-nav__item--next{text-align:right}
.series-nav__label{font-size:12.5px;color:#7b8b9c}
.series-nav__title{font-size:14.5px;color:#102a43;line-height:1.5}
.series-nav__item:hover .series-nav__title{color:#1557B0}

/* ---------- 标签索引页 ---------- */
.tags-page{max-width:820px;margin:0 auto;padding:28px 20px 64px}
.tags-crumb{font-size:13.5px;color:#7b8b9c;margin-bottom:22px}
.tags-crumb a{color:#7b8b9c;text-decoration:none}
.tags-crumb a:hover{color:#1557B0}
.tags-crumb span{margin:0 7px;color:#c3cdd9}
.tags-head{margin-bottom:22px}
.tags-head h1{font-size:28px;line-height:1.35;margin:0 0 8px;color:#102a43}
.tags-head p{color:#5b6b7b;font-size:14.5px;margin:0}
.tag-cloud{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.tag-cloud__item{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border:1px solid #dce4ee;border-radius:999px;background:#fff;color:#33475b;font-size:13.5px;text-decoration:none;transition:all .18s}
.tag-cloud__item:hover{border-color:#1557B0;color:#1557B0}
.tag-cloud__item.is-active{background:#1557B0;border-color:#1557B0;color:#fff}
.tag-cloud__n{font-size:12px;opacity:.65}
/* ---------- 分类导航（列表页 / 分类页共用）----------
   视觉上跟 .tag-cloud 是一回事（一排胶囊 + 当前项反白），但不复用那个类名：
   标签页以后调样式不该顺带改掉分类入口，两者只是碰巧都长成胶囊。 */
.catnav{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px}
.catnav__item{display:inline-flex;align-items:center;gap:6px;padding:5px 13px;border:1px solid #dce4ee;border-radius:999px;background:#fff;color:#33475b;font-size:13.5px;text-decoration:none;transition:border-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease),background var(--t-fast) var(--ease)}
.catnav__item:hover{border-color:#1557B0;color:#1557B0}
.catnav__item.is-active{background:#1557B0;border-color:#1557B0;color:#fff}
.catnav__n{font-size:12px;opacity:.65;font-variant-numeric:tabular-nums}
/* 分类页面包屑。不用 .tags-crumb —— 那个是标签页专用的窄栏布局，这里是常规内容宽 */
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:7px;font-size:13px;color:#7b8b9c;margin:0 0 16px}
.crumb a{color:#7b8b9c;text-decoration:none}
.crumb a:hover{color:#1557B0}
.crumb [aria-current]{color:#33475b}
.tags-status{font-size:13.5px;color:#7b8b9c;margin:0 0 6px;padding-bottom:10px;border-bottom:1px solid #eef2f7}
.tag-list{display:flex;flex-direction:column}
.tag-item{display:grid;grid-template-columns:104px 1fr;gap:2px 16px;padding:13px 2px;border-bottom:1px solid #eef2f7;text-decoration:none}
.tag-item time{grid-row:span 2;font-size:13.5px;color:#7b8b9c;font-variant-numeric:tabular-nums}
.tag-item__title{font-size:15.5px;color:#102a43;line-height:1.55}
.tag-item:hover .tag-item__title{color:#1557B0}
.tag-item__tags{font-size:12.5px;color:#8b98a8}
.tags-empty{margin-top:24px;color:#7b8b9c;font-size:14px}

@media (max-width:640px){
  .series-nav__body{grid-template-columns:1fr}
  .series-nav__item--next{text-align:left}
  .tag-item{grid-template-columns:1fr;gap:2px}
  .tag-item time{grid-row:auto}
  .tags-page{padding:20px 16px 48px}
  .tags-head h1{font-size:23px}
}

/* 文章附件下载卡片（正文末尾）
   只放真正要下载的文件：文件名 + 类型角标 + 「下载」。不做整块深色按钮，
   因为一篇文章可能挂三四个附件，太重的样式会把正文压住。 */
.article-files {
  margin: 30px 0 0;
  padding: 18px 20px;
  border: 1px solid #e3e9f2;
  border-radius: 10px;
  background: #fbfcfe;
}

.article-files__title {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
  color: #0b2038;
}

.article-files__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.filecard {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid #e3e9f2;
  border-radius: 8px;
  background: #fff;
  text-decoration: none;
  transition: border-color .18s ease, background .18s ease;
}

.filecard:hover {
  border-color: #1557B0;
  background: #f7faff;
}

.filecard__ext {
  flex: 0 0 auto;
  min-width: 42px;
  padding: 3px 6px;
  border-radius: 5px;
  background: #eef3fb;
  color: #1557B0;
  font-size: 11.5px;
  font-weight: 600;
  text-align: center;
  letter-spacing: .3px;
}

.filecard__name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  color: #1b2c42;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.filecard__go {
  flex: 0 0 auto;
  font-size: 12.5px;
  color: #1557B0;
}

@media (max-width: 620px) {
  .article-files { padding: 14px; }
  .filecard__go { display: none; }
}
