/* article.css —— zigrow 站内文章（快照页）的**站点框架层**
 * ------------------------------------------------------------------
 * 骨架（自上而下，顺序即视觉顺序）：
 *   .snap-crumb  [通栏]  面包屑        ┐
 *   .snap-bar    [通栏]  吸顶条        │ 通栏负责底色与分割线，
 *   .snap-main   [内容列]              │ 内层 .snap-wrap 负责与正文同轴
 *     .snap-body   正文（源稿作用域）  │
 *     .snap-note   来源 / 风险注记     │
 *     .snap-gzh    公众号关注卡        ┘
 *   .snap-foot   [通栏]  站点页脚
 *   .snap-related[通栏]  相关阅读
 *
 * 三条铁律：
 *   1. 本文件只写**站点自有 class**（.snap-main / .snap-wrap / .snap-note / .snap-body …）。
 *      源稿样式被作用域化到 .snap-body 上，只能管到正文；框架层永远不会被它带跑偏。
 *   2. 正文的几何（宽度 / 居中 / 内边距）由**站点**决定，源稿只能决定主题（底色 / 字体 / 配色）。
 *      这一条是「有的文章整体偏到左边、有的铺满全宽」的正面修复：源稿的 `body{margin:0}`
 *      被作用域成 `.snap-body{margin:0}`，会把居中用的 `margin:0 auto` 干掉，页面就贴左了。
 *   3. 网格与站点其它页面同轴（等价于 site.css 的 --wrap-max / --wrap-pad），
 *      导航、正文、页脚、相关阅读共用一条竖线，宽屏下不会各停各的位置。
 * ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ */
/* 站点网格 + 主题令牌                                                 */
/* ------------------------------------------------------------------ */
/* ------------------------------------------------------------------ */
/* R5 设计令牌（design-spec §2.1 + §2.2）                              */
/* 快照页不加载 site.css，故把站点令牌**集中定义在这里**（二选一的地点）。   */
/* 作用域取 html.snap（而非 :root）：源稿主题变量既挂在 <html> 又被作用域化  */
/* 到 .snap-body 自身，因此——                                          */
/*   · 壳层（吸顶条 / 面包屑 / 注记 / 关注卡 / 页脚 / 相关阅读）从 <html> 继承 → 吃 R5 令牌；*/
/*   · 正文子树被 `.snap-body{--accent…}` 直接改写 → 保留每篇文章的主题色。  */
/* 一箭双雕：站点壳统一成 R5 配色，正文视觉零改动（正文 HTML 亦逐字节不变）。*/
html.snap {
  /* 与 site.css 的 --wrap-max / --wrap-pad 保持一致：1120px + clamp(20px, 5vw, 48px) */
  --site-col: 1120px;
  --site-pad: clamp(20px, 5vw, 48px);

  /* 字体（零外部字体，系统栈）*/
  --font-serif: "Iowan Old Style", Palatino, Georgia,
    "Noto Serif CJK SC", "Songti SC", "STSong", SimSun, serif;
  --font-sans: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
    "Source Han Sans SC", "Noto Sans CJK SC",
    -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", "Courier New", monospace;

  /* 浅色（默认） */
  --bg:            #FAF7F2;
  --surface:       #FFFFFF;
  --surface-alt:   #F1EBE1;
  --border:        #E5DED1;
  --border-strong: #CFC5B3;
  --control-line:  #8B8274;
  --text:  #201C17;  --muted: #5C554C;  --faint: #655E52;
  --accent: #2E6C8E; --accent-ink: #1D4A66; --accent-wash: #E8F0F4;
  --mark:   #B4442E; --mark-ink:   #9A3623; --mark-wash:   #F7E9E3;
  --tone-works: #7A6B4E; --tone-works-ink: #655840; --tone-works-wash: #EDE7DA;
  --ok: #2F6E4F; --ok-wash: #E4EFE7;
  --warn: #8A5A12; --warn-wash: #F5EAD5;
  --danger: #A32B2B; --danger-wash: #F7E3E1;
  --info: #1D4A66; --info-wash: #E8F0F4;
  --shadow:      0 1px 2px rgba(32, 28, 23, .05);
  --shadow-lift: 0 6px 20px rgba(32, 28, 23, .08);

  /* 字阶（流体 clamp，design-spec §2.1 整块） */
  --type-display: clamp(2.25rem, 1.60rem + 3.20vw, 3.75rem);
  --type-h1:      clamp(1.875rem, 1.35rem + 2.20vw, 2.875rem);
  --type-h2:      clamp(1.375rem, 1.20rem + 0.80vw, 1.875rem);
  --type-h3:      clamp(1.125rem, 1.05rem + 0.40vw, 1.375rem);
  --type-h4:      clamp(1.000rem, 0.98rem + 0.15vw, 1.0625rem);
  --type-body:    clamp(0.9375rem, 0.92rem + 0.10vw, 1.0625rem);
  --type-meta:    0.875rem;  --type-micro: 0.75rem;
  --type-num:     clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);

  /* 行高 / 字重 / 字距 */
  --leading-display: 1.06; --leading-tight: 1.22; --leading-snug: 1.40;
  --leading-body: 1.75; --leading-relaxed: 1.85;
  --w-regular: 400; --w-medium: 500; --w-semibold: 600; --w-bold: 700;
  --track-display: -0.02em; --track-h: -0.015em; --track-caps: 0.14em;

  /* 间距 / 容器 / 圆角 / 过渡 */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: 96px; --sp-10: 128px;
  --block-y: clamp(56px, 8vw, 112px); --block-y-tight: clamp(40px, 6vw, 72px);
  --wrap-max: 1120px; --wrap-pad: clamp(20px, 5vw, 48px);
  --measure: 42rem; --cols: 12; --gutter: var(--sp-5);
  --radius-xs: 4px; --radius-sm: 8px; --radius: 12px;
  --radius-lg: 18px; --radius-pill: 999px;
  --ease: cubic-bezier(.4, 0, .2, 1);
  --dur-1: 120ms; --dur-2: 180ms; --dur-3: 280ms;
  --transition: 180ms cubic-bezier(.4, 0, .2, 1);

  /* 快照壳别名（design-spec §2.1 末尾 / §2.6 映射，读取入口保留不改名） */
  --line: var(--border);  --line2: var(--border-strong);  --card: var(--surface);
  --tx: var(--text);  --tx2: var(--muted);  --tx3: var(--faint);
  --gold: var(--mark-ink);  --snap-link: var(--accent-ink);

  background: var(--bg);
  color: var(--tx);
}

/* 深色令牌（design-spec §2.2 两处写法必须同时存在）。
   快照页无主题切换脚本，故仅在系统偏好 / 显式 data-theme 命中时生效。 */
@media (prefers-color-scheme: dark) {
  html.snap:not([data-theme="light"]) {
    --bg: #1A1713; --surface: #221F19; --surface-alt: #2A2620;
    --border: #332E26; --border-strong: #423C31; --control-line: #7E7563;
    --text: #EDE7DC; --muted: #B4AC9E; --faint: #A79E8E;
    --accent: #7FB0CE; --accent-ink: #9CC4DC; --accent-wash: #22323C;
    --mark: #E08A6E; --mark-ink: #E89B80; --mark-wash: #3A2620;
    --tone-works: #A08B63; --tone-works-ink: #C9B79A; --tone-works-wash: #2E2820;
    --ok: #7FC79A; --ok-wash: #1E2E24; --warn: #E0B15F; --warn-wash: #322718;
    --danger: #E88C84; --danger-wash: #33201F;
    --info: #9CC4DC; --info-wash: #22323C;
    --shadow: 0 1px 2px rgba(0,0,0,.35);
    --shadow-lift: 0 8px 26px rgba(0,0,0,.42);
  }
}
html.snap[data-theme="dark"] {
  --bg: #1A1713; --surface: #221F19; --surface-alt: #2A2620;
  --border: #332E26; --border-strong: #423C31; --control-line: #7E7563;
  --text: #EDE7DC; --muted: #B4AC9E; --faint: #A79E8E;
  --accent: #7FB0CE; --accent-ink: #9CC4DC; --accent-wash: #22323C;
  --mark: #E08A6E; --mark-ink: #E89B80; --mark-wash: #3A2620;
  --tone-works: #A08B63; --tone-works-ink: #C9B79A; --tone-works-wash: #2E2820;
  --ok: #7FC79A; --ok-wash: #1E2E24; --warn: #E0B15F; --warn-wash: #322718;
  --danger: #E88C84; --danger-wash: #33201F;
  --info: #9CC4DC; --info-wash: #22323C;
  --shadow: 0 1px 2px rgba(0,0,0,.35);
  --shadow-lift: 0 8px 26px rgba(0,0,0,.42);
}

/* 整页底色跟随正文主题：正文容器之外也要有底色，
   否则宽屏上会出现「中间一条暖纸、两边纯白」的色带 */
body { background: transparent; }

/* ------------------------------------------------------------------ */
/* 站点内容列                                                          */
/* ------------------------------------------------------------------ */
/* 正文 / 注记 / 关注卡 三者同宽同轴 */
.snap-main {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--site-col);
  margin: 0 auto;
  padding: 0 var(--site-pad) 8px;
}

/* 通栏壳块的内层：与 .snap-main 完全同一条竖线 */
.snap-wrap {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--site-col);
  margin: 0 auto;
  padding-inline: var(--site-pad);
}

/* ------------------------------------------------------------------ */
/* 正文容器                                                            */
/* ------------------------------------------------------------------ */
/* 几何由站点框架掌管。选择器写成 `.snap-main > .snap-body` 是为了提高特异性，
   压过源稿那条 `.snap-body{margin:0;padding:0;max-width:100%}`（它排在本文件之后）。
   注意：这里**不能**写 `background: transparent`——
   少数快照自带深色主题（如 20260917-u1yivl / 601318-eocdua），源稿
   `.snap-body{background:…}` 是深底近白字；本条特异性 (0,2,0) 高于源稿 (0,1,0)，
   一旦强制透明，深底被抹掉 → 近白文字坐在米白页面上不可读（2026-10-02 线上事故）。
   不声明 background 时：源稿有背景则用源稿的（仅 6 篇自定义，其余 61 篇本来透明，
   自然落到页面米白底），两全。 */
.snap-main > .snap-body {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
}

/* 源稿没有自己定义排版时的底座。
   R5 纪律（design-spec §4.19 / §10）：**正文用黑体**，衬线只留给 h1–h4 标题。
   历史上这里把整块设成衬线，67 篇快照于是长成「宋体正文」，与站点正文（黑体）割裂。*/
.snap-body {
  color: var(--tx, #201C17);
  font-family: var(--font-sans, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
    -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif);
  font-size: 16px;
  line-height: 1.85;
  text-align: left;
  overflow-wrap: break-word;
}

.snap-body h1,
.snap-body h2,
.snap-body h3,
.snap-body h4 {
  font-family: var(--font-serif, "Iowan Old Style", Palatino, Georgia,
    "Noto Serif CJK SC", "Songti SC", "STSong", SimSun, serif);
  line-height: 1.45;
  margin: 30px 0 12px;
  font-weight: 700;
}

.snap-body h1 { font-size: 26px; }
.snap-body h2 { font-size: 20px; }
.snap-body h3 { font-size: 17px; }
.snap-body h4 { font-size: 15.5px; }
/* 无障碍：消除标题跳级（h2→h4）时把整段同级标题降到 h3，用 lv-h{原级} 保留原字号，视觉不变 */
.snap-body .lv-h4 { font-size: 15.5px; }
.snap-body .lv-h5 { font-size: .83em; }

/* 站点统一标题头（源稿正文里没有 h1 时由脚本补上） */
.snap-body .snap-head {
  margin: 26px 0 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line, #E4DCCF);
}

.snap-body .snap-head h1 {
  margin: 0 0 8px;
  font-size: 27px;
  line-height: 1.4;
  font-weight: 700;
  color: inherit;
}

.snap-body p {
  margin: 0 0 15px;
  line-height: 1.9;
}

.snap-body p:last-child { margin-bottom: 0; }

.snap-body strong { font-weight: 600; color: inherit; }

.snap-body a {
  color: var(--gold, #8F3B22);
  text-decoration: none;
}

.snap-body ul,
.snap-body ol {
  margin: 0 0 15px;
  padding-left: 22px;
  line-height: 1.9;
}

.snap-body ul { list-style: disc; }
.snap-body ol { list-style: decimal; }
.snap-body li { margin-bottom: 6px; }

.snap-body blockquote {
  margin: 18px 0;
  padding: 12px 16px;
  border-left: 3px solid var(--gold, #B45309);
  background: rgba(180, 83, 9, .06);
  color: inherit;
}

.snap-body hr {
  margin: 26px 0;
  border: 0;
  border-top: 1px solid var(--line, #E4DCCF);
}

/* 表格：窄屏横向滚动，绝不撑破页面 */
.snap-body table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin: 16px 0;
  font-size: 13.5px;
}

.snap-body th,
.snap-body td {
  padding: 7px 9px;
  border-bottom: 1px solid var(--line, #E4DCCF);
  text-align: left;
  vertical-align: top;
}

.snap-body th {
  background: rgba(127, 111, 90, .08);
  font-weight: 600;
}

.snap-body img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 16px auto;
}

.snap-body figure { margin: 16px 0; }

.snap-body figcaption {
  margin-top: 7px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--tx3, #8C8275);
  text-align: center;
}

/* ------------------------------------------------------------------ */
/* 文末注记（数据来源 / 风险提示，由源稿 footer 汇聚而来）                */
/* ------------------------------------------------------------------ */
/* 注意：它挂在 .snap-body **之外**。源稿的 `*{margin:0;padding:0}` 被作用域化成
   `.snap-body *`；注记留在里面时，内边距与上外边距会被整条抹掉，文字直接顶到边框线上
   —— 就是「底部风险提示显示混乱」的直接原因。 */
.snap-note {
  box-sizing: border-box;
  margin: 22px 0 0;
  padding: 15px 19px;
  border: 1px solid var(--line, #E4DCCF);
  border-left: 3px solid var(--line2, #C9BFB0);
  border-radius: 11px;
  background: var(--card, rgba(255, 255, 255, .6));
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-size: 12.5px;
  line-height: 1.85;
  color: var(--tx3, #8C8275);
}

/* 注记的小标题（「⚠ 风险提示」「数据来源」）与正文分两段排。
   整段塞一个 <p> 时标签会淹在正文里，68 篇看下来就是一团灰字，
   与上面的关注卡 / 下面的相关阅读不成套；拆开后三张卡共用一套视觉节奏。 */
.snap-note-h {
  margin: 0 0 6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.5;
  color: var(--tx2, #6F665B);
}

.snap-note-b {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.9;
  color: var(--tx3, #8C8275);
}

.snap-note b { color: var(--tx2, #6F665B); font-weight: 600; }
.snap-note a { color: inherit; }

/* ------------------------------------------------------------------ */
/* 窄屏                                                                */
/* ------------------------------------------------------------------ */
@media (max-width: 640px) {
  .snap-body { font-size: 15px; }
  .snap-body h1 { font-size: 22px; }
  .snap-body h2 { font-size: 18px; }
  .snap-body h3 { font-size: 16px; }
  .snap-body .lv-h4 { font-size: 15.5px; }
}