/* ink.css —— 水墨视觉原子组件：宣纸底纹、题签、印章、墨晕、卡片 */

/* ① 宣纸底纹：两层质感
      .paper-photo —— 真实宣纸照片纹理（大尺度纤维与帘纹）
      #paper-grain —— value noise 细颗粒（小尺度粗糙感）
   照片层缺图时自动失效（div 无背景），页面仍可用 */
.paper-photo{
  position:fixed; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:0; opacity:.4;
  mix-blend-mode:multiply;
  background-image:url("../img/paper-texture.jpg");
  background-size:520px; background-repeat:repeat;
}
.grain-tile,
#paper-grain{
  position:fixed; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:0; opacity:.22;
  mix-blend-mode:multiply;
  background-repeat:repeat;
}

/* ② 题签：章节头的竖排标签 */
.tag-vert{
  writing-mode:vertical-rl;
  letter-spacing:.34em;
  font-size:var(--fs-sm);
  color:var(--tan);
}

/* ③ 印章 */
.seal{
  display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px;
  color:#fff; background:var(--seal);
  font-size:19px; letter-spacing:0; line-height:1;
  border-radius:3px;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.22);
  flex:0 0 auto;
}
.seal--outline{
  background:transparent; color:var(--seal);
  box-shadow:inset 0 0 0 2px var(--seal);
}

/* ④ 墨晕分隔线 */
.rule-ink{
  border:0; height:1px; margin:34px 0;
  background:linear-gradient(90deg,
    transparent, var(--line) 12%, var(--tan) 50%, var(--line) 88%, transparent);
  opacity:.7;
}

/* ⑤ 卡片 */
.card{
  background:#fffdf7;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:22px 24px;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.card:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 28px rgba(36,42,46,.09);
}
.card--flat{ background:transparent; border-style:dashed; }
.card--flat:hover{ transform:none; box-shadow:none; }
.card__label{
  font-size:var(--fs-xs); letter-spacing:.26em; color:var(--tan);
  margin:0 0 10px; text-transform:uppercase;
  display:flex; align-items:center; gap:10px;
}
.card__label::before{
  content:""; width:18px; height:1px; background:var(--seal-soft); flex:0 0 auto;
}

/* ⑤′ 媒体卡：顶部纪实照片 + 正文（原料 / 图文卡） */
.media-card{ padding:0; overflow:hidden; }
.media-card > img{
  width:100%; height:170px; object-fit:cover; display:block;
  filter:saturate(.82) contrast(.98);
  transition:transform .6s var(--ease);
}
.media-card:hover > img{ transform:scale(1.035); }
.media-card__body{ padding:18px 22px 22px; }

/* ⑥ 引文块（古籍 / 口述史专用） */
.quote{
  position:relative;
  margin:0; padding:24px 28px 20px 30px;
  background:var(--paper-2);
  border-left:3px solid var(--tan);
  font-size:var(--fs-lg); line-height:1.9;
}
.quote::before{
  content:"「";
  position:absolute; left:10px; top:-14px;
  font-size:44px; color:var(--tan); opacity:.28;
  font-family:var(--font-serif); line-height:1;
}
.quote--classic{ border-left-color:var(--seal); background:rgba(156,74,60,.055); }
.quote--classic::before{ color:var(--seal); opacity:.3; }
.quote cite{
  display:block; margin-top:10px;
  font-size:var(--fs-sm); font-style:normal; color:var(--ink-soft);
  letter-spacing:.1em;
}
.quote--classic cite{ color:var(--seal); }

/* ⑦ 数据块：大数字 + 单位 + 说明 */
.stat{
  display:flex; flex-direction:column; gap:2px;
}
.stat__val{
  font-family:var(--font-num);
  font-size:var(--fs-2xl); line-height:1.1; color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.stat__val small{ font-size:.5em; color:var(--ink-soft); margin-left:.25em; letter-spacing:.05em; }
.stat__key{ font-size:var(--fs-sm); color:var(--tan); letter-spacing:.12em; }
.stat__note{ font-size:var(--fs-xs); color:var(--ink-faint); line-height:1.6; }

/* ⑧ 出处标记：所有数据的必备后缀 */
.src{
  display:inline-block; margin-top:6px;
  font-size:11px; letter-spacing:.06em; color:var(--ink-faint);
  border-bottom:1px dotted var(--line);
  cursor:help;
}
.src::before{ content:"出处·"; }
html[lang="en"] .src::before{ content:"Source · "; }

/* ⑨ 数据可信度徽标 */
.badge{
  display:inline-block; padding:1px 8px; border-radius:2px;
  font-family:var(--font-sans); font-size:11px; letter-spacing:.1em;
  vertical-align:2px;
}
.badge--verified{ background:rgba(109,122,112,.14); color:var(--tan); }
.badge--disclose{ background:rgba(156,74,60,.13);  color:var(--seal); }
.badge--caution{  background:rgba(139,141,132,.16); color:var(--ink-soft); }

/* ⑩ 图表容器 */
.chart{
  background:#fffdf7;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px 18px 8px;
}
.chart svg{ width:100%; height:auto; display:block; }
.chart__cap{
  font-size:var(--fs-xs); color:var(--ink-faint);
  padding:10px 2px 4px; border-top:1px dashed var(--line); margin-top:8px;
}

/* ⑪ 交互区的"宣纸面"容器 */
.sheet-frame{
  background:#ddd6c4;
  border:1px solid var(--line);
  padding:10px;
  border-radius:var(--radius);
  box-shadow:0 2px 14px rgba(36,42,46,.07);
}
.sheet-frame canvas{ width:100%; height:auto; }

/* ⑫ 提示 / 引导条 */
.cue{
  min-height:46px; margin-top:12px;
  font-size:var(--fs-sm); color:var(--ink-soft);
  border-left:2px solid var(--line); padding-left:14px;
}
.cue b{ color:var(--seal); }

@media (max-width:720px){
  .card{ padding:16px 16px; }
  .quote{ padding:16px 16px; font-size:var(--fs-md); }
}