/* ============================================================
   观澜 · 站点样式
   设计基调：杂志级瑞士排版（黑白纸感 + 一抹朱砂）
   适老要求：正文字号 ≥18px、高对比、大点击区、无花哨动画
   ============================================================ */
:root {
  --bg: #F4EFE6;            /* 仿古熟宣纸色（温润纸韵） */
  --surface: #FAF7F0;
  --ink: #1C1917;           /* 徽墨焦墨色 */
  --ink-2: #2E2822;         /* 浓墨 */
  --muted: #6C6356;         /* 灰褐 */
  --rule: #E2DACB;          /* 古雅细线 */
  --rule-strong: #1C1917;
  --accent: #9E2B25;        /* 朱砂红（印章与点缀） */
  --accent-deep: #7D1D18;
  --card-bg: #FCF9F2;       /* 绢帛底色 */
  --silk-mount: #EDE6D6;    /* 绫绢装裱底色 */
  --gold-line: rgba(194, 155, 93, 0.45); /* 泥金微线 */
  --ok: #1F6B3A;
  --danger: #A3311F;
  --serif: "Noto Serif SC","Source Han Serif SC","Songti SC","STSong","SimSun",serif;
  --sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", Arial, sans-serif;
  --kaiti: "Kaiti SC", "STKaiti", "KaiTi", "SimKai", serif;
  --active-font: var(--serif);
  --body-size: 18px;        /* 正文基准字号 */
  --body-line-height: 1.9;  /* 正文行距（舒展透气） */
  --body-letter-spacing: 0.8px; /* 正文字距 */
  --text-indent: 0;         /* 首行缩进 */
  --text-align: justify;    /* 两端对齐 */
  --img-radius: 2px;        /* 图片微圆角 */
  --read-max: 680px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}
img { max-width: 100%; }
a { color: var(--ink); text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.wrap { max-width: 720px; margin: 0 auto; }

/* ---------- 报头（Masthead） ---------- */
.masthead {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 12px; padding: 22px 20px 14px;
  border-bottom: 2px solid var(--ink);
}
.masthead .brand-name { font-family: var(--serif); font-size: 34px; font-weight: 600; letter-spacing: .05em; line-height: 1.1; }
.masthead .brand-en { font-size: 10px; letter-spacing: .38em; color: var(--muted); margin-top: 4px; }
.masthead .date { font-size: 12px; color: var(--muted); letter-spacing: .04em; text-align: right; line-height: 1.7; flex: none; }
.masthead-sub { border-bottom: 1px solid var(--rule); padding: 10px 20px; display: flex; justify-content: space-between; gap: 8px; }
.masthead-sub .slogan { font-size: 13px; letter-spacing: .1em; color: var(--ink-2); }
.masthead-sub .today { font-size: 12px; color: var(--muted); }

/* ---------- 头条 ---------- */
.feature { padding: 28px 20px 4px; }
.feature .kicker {
  font-size: 12px; letter-spacing: .3em; color: var(--accent); font-weight: 600;
  margin-bottom: 14px; display: flex; align-items: center; gap: 10px;
}
.feature .kicker::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.feature .cover {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  background: #E9E2D3;
}
.feature h2 { font-family: var(--serif); font-size: 27px; line-height: 1.45; font-weight: 600; margin: 18px 0 10px; }
.feature .deck { font-size: 16px; line-height: 1.75; color: var(--ink-2); margin-bottom: 12px; }
.feature .meta { font-size: 13px; color: var(--muted); letter-spacing: .03em; }

/* ---------- 文章列表 ---------- */
.list-head {
  margin: 30px 20px 0; display: flex; align-items: center; gap: 12px;
  font-size: 12px; letter-spacing: .3em; color: var(--muted); font-weight: 600;
}
.list-head::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.article-list { padding: 0 20px 8px; }
.row {
  display: flex; gap: 16px; padding: 24px 0;
  border-bottom: 1px solid var(--rule); min-height: 96px;
}
.row:first-child { padding-top: 20px; }
.row .idx { font-family: var(--serif); font-size: 15px; color: var(--ink-2); width: 36px; flex: none; padding-top: 3px; }
.row .body { flex: 1; min-width: 0; }
.row h3 { font-family: var(--serif); font-size: 20px; line-height: 1.5; font-weight: 600; margin-bottom: 7px; }
.row p {
  font-size: 14px; line-height: 1.7; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-bottom: 8px;
}
.row .meta { font-size: 12px; color: var(--muted); letter-spacing: .03em; }
.row .thumb { width: 92px; flex: none; }
.row .thumb img { width: 92px; height: 92px; object-fit: cover; display: block; background: #E9E2D3; }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 28px;
  background: var(--ink); color: var(--bg);
  border: 1px solid var(--ink); border-radius: 0;
  font-size: 16px; letter-spacing: .08em; text-align: center;
  transition: background .15s ease, color .15s ease;
}
.btn:hover { background: var(--ink-2); }
.btn:active { transform: translateY(1px); }
.btn.secondary { background: transparent; color: var(--ink); }
.btn.secondary:hover { background: var(--ink); color: var(--bg); }
.btn.small { min-height: 44px; padding: 0 18px; font-size: 15px; }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn-row { display: flex; gap: 12px; justify-content: center; margin: 28px 0; }

/* ---------- 状态 ---------- */
.skel { background: linear-gradient(90deg, #E9E2D3 25%, #F2ECDE 50%, #E9E2D3 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; }
/* 骨架尺寸工具类（CSP 禁内联样式，统一走类名） */
.w100 { width: 100%; } .w90 { width: 90%; } .w88 { width: 88%; } .w72 { width: 72%; } .w62 { width: 62%; } .w46 { width: 46%; } .w120 { width: 120px; } .w20 { width: 20px; }
.h30 { height: 30px; } .h22 { height: 22px; } .h16 { height: 16px; } .h14 { height: 14px; } .h12 { height: 12px; }
.ar43 { aspect-ratio: 4 / 3; } .sq92 { width: 92px; height: 92px; }
.mb8 { margin-bottom: 8px; } .mt8 { margin-top: 8px; } .mt10 { margin-top: 10px; } .mt14 { margin-top: 14px; } .mt18 { margin-top: 18px; }
@keyframes shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skel { animation: none; } }
.state-box { text-align: center; padding: 56px 24px; }
.state-box .state-title { font-family: var(--serif); font-size: 22px; margin-bottom: 10px; }
.state-box .state-text { font-size: 15px; color: var(--muted); margin-bottom: 22px; }

/* ---------- 页脚与文章底栏 ---------- */
.site-footer {
  --ft-bg: var(--footer-bg, #1E1B18);
  --ft-color: var(--footer-color, #F4EFE6);
  --ft-muted: var(--footer-muted, #A8A090);
  --ft-divider: rgba(128, 128, 128, 0.25);
  background: var(--ft-bg);
  color: var(--ft-color);
  margin-top: 28px;
  transition: all .2s ease;
  box-sizing: border-box;
}
.site-footer .inner {
  max-width: 680px;
  margin: 0 auto;
  box-sizing: border-box;
}
.site-footer .f-name {
  font-family: var(--serif);
  letter-spacing: .08em;
  font-weight: 600;
  line-height: 1.2;
}
.site-footer .f-tag {
  color: var(--ft-muted);
  letter-spacing: .1em;
  line-height: 1.5;
}
.site-footer .f-line {
  border-top: 1px solid var(--ft-divider);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.site-footer .f-copy {
  font-size: 12px;
  color: var(--ft-muted);
  letter-spacing: .04em;
  line-height: 1.5;
}

/* 风格形态 (Style) */
.site-footer.style-card {
  max-width: 680px;
  margin: 24px auto 36px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}
@media (max-width: 720px) {
  .site-footer.style-card {
    margin: 20px 14px 28px;
    border-radius: 6px;
  }
}
.site-footer.style-bar {
  width: 100%;
  margin: 32px 0 0;
  border-radius: 0;
}
.site-footer.style-minimal {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  margin-top: 24px;
}
.site-footer.style-minimal .inner {
  padding-top: 10px !important;
}

/* 尺寸规格 (Size) - 默认紧凑精炼，大幅缩减原先的过大黑框 */
.site-footer.size-compact .inner {
  padding: 18px 20px;
}
.site-footer.size-compact .f-name {
  font-size: 18px;
}
.site-footer.size-compact .f-tag {
  font-size: 12px;
  margin-top: 4px;
}
.site-footer.size-compact .f-line {
  margin-top: 12px;
  padding-top: 10px;
}

.site-footer.size-standard .inner {
  padding: 26px 22px;
}
.site-footer.size-standard .f-name {
  font-size: 22px;
}
.site-footer.size-standard .f-tag {
  font-size: 13px;
  margin-top: 6px;
}
.site-footer.size-standard .f-line {
  margin-top: 16px;
  padding-top: 12px;
}

.site-footer.size-spacious .inner {
  padding: 36px 24px;
}
.site-footer.size-spacious .f-name {
  font-size: 25px;
}
.site-footer.size-spacious .f-tag {
  font-size: 14px;
  margin-top: 8px;
}
.site-footer.size-spacious .f-line {
  margin-top: 22px;
  padding-top: 14px;
}

/* 布局对齐 (Layout / Alignment) */
.site-footer.align-center {
  text-align: center;
}
.site-footer.align-center .f-line {
  justify-content: center;
}

.site-footer.align-left {
  text-align: left;
}
.site-footer.align-left .f-line {
  justify-content: flex-start;
}

.site-footer.align-split {
  text-align: left;
}
.site-footer.align-split .f-line {
  justify-content: space-between;
}


/* ============================================================
   文章详情页
   ============================================================ */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: var(--bg); border-bottom: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 14px;
}
.topbar .tb-group { display: flex; gap: 8px; align-items: center; }
.tb-btn {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 48px; padding: 0 14px;
  background: transparent; border: 1px solid var(--rule-strong); border-radius: 0;
  font-size: 15px; color: var(--ink);
}
.tb-btn:hover { background: var(--ink); color: var(--bg); }
.tb-btn svg { width: 18px; height: 18px; }
.progress { position: fixed; top: 0; left: 0; height: 3px; background: var(--accent); width: 0; z-index: 999; }

.article-head { padding: 34px 22px 6px; }
.article-head .kicker { font-size: 12px; letter-spacing: .3em; color: var(--accent); font-weight: 600; margin-bottom: 16px; }
.article-head h1 { font-family: var(--serif); font-size: 30px; line-height: 1.4; font-weight: 600; letter-spacing: .01em; }
.article-head .deck { font-size: 17px; line-height: 1.8; color: var(--ink-2); margin-top: 16px; }
.article-head .meta {
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  font-size: 13px; color: var(--muted); letter-spacing: .03em;
}
.art-info {
  margin-top: 18px;
  background: var(--card-bg);
  border-radius: 8px;
  padding: 14px 18px;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 22px;
  border: 1px solid var(--rule);
}
.art-info .ai-item { display: flex; gap: 10px; font-size: 14px; align-items: baseline; }
.art-info .ai-item b { font-size: 12px; letter-spacing: .12em; color: var(--muted); font-weight: 600; flex: none; min-width: 36px; }
.art-info .ai-item span { color: var(--ink); }
@media (min-width: 480px) { .art-info { grid-template-columns: repeat(4, 1fr); } }

.article-cover { margin: 26px 0 0; }
.article-cover img { width: 100%; display: block; background: #E9E2D3; border-radius: var(--img-radius); }
.article-cover figcaption { font-size: 13px; color: var(--muted); padding: 10px 22px 0; letter-spacing: .02em; }

.article-body { padding: 10px 22px 0; }
.article-body p {
  font-family: var(--active-font);
  font-size: var(--body-size);
  line-height: var(--body-line-height);
  letter-spacing: var(--body-letter-spacing);
  text-indent: var(--text-indent);
  text-align: var(--text-align);
  text-justify: inter-ideograph;
  color: var(--ink-2);
  margin-bottom: 24px;
  max-width: var(--read-max);
}
.article-body h2 {
  font-family: var(--active-font);
  font-size: 20px;
  line-height: 1.5;
  font-weight: 600;
  margin: 38px 0 16px;
  max-width: var(--read-max);
  color: var(--ink);
}

/* H2 风格系统（公众号左竖条 / 底边线 / 居中修饰 / 纯加粗） */
.h2-style-bar .article-body h2, .article-body h2.h2-bar {
  display: flex;
  align-items: center;
  border-left: 4px solid var(--accent);
  padding-left: 10px;
  margin-left: -2px;
}
.h2-style-underline .article-body h2, .article-body h2.h2-underline {
  display: inline-block;
  border-bottom: 3px solid var(--accent);
  padding-bottom: 3px;
}
.h2-style-center .article-body h2, .article-body h2.h2-center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.h2-style-center .article-body h2::before, .h2-style-center .article-body h2::after {
  content: "♦";
  color: var(--accent);
  font-size: 12px;
  margin: 0 8px;
  vertical-align: middle;
}
.h2-style-simple .article-body h2, .article-body h2.h2-simple {
  font-weight: 700;
}

/* 引用块风格系统（浅灰圆角卡片 / 左侧粗线 / 上下双线） */
.article-body .quote {
  font-family: var(--active-font);
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: var(--body-letter-spacing);
  margin: 32px 0;
  max-width: var(--read-max);
}
.quote-style-card .article-body .quote, .article-body .quote.quote-card {
  background: var(--card-bg);
  border-radius: 8px;
  padding: 16px 20px;
  color: var(--ink-2);
  border: 1px solid var(--rule);
}
.quote-style-border .article-body .quote, .article-body .quote.quote-border {
  border-left: 4px solid var(--accent);
  background: var(--card-bg);
  padding: 14px 18px;
  border-radius: 0 8px 8px 0;
  color: var(--ink-2);
  border-top: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.quote-style-quotation .article-body .quote, .article-body .quote.quote-quotation {
  border-top: 1px dashed var(--rule);
  border-bottom: 1px dashed var(--rule);
  padding: 18px 12px;
  text-align: center;
  font-size: 17px;
  color: var(--ink);
}

/* ---------- 中国传统装裱式作品画框 (Scroll / Brocade Mounting) ---------- */
.art-mounting {
  margin: 36px auto;
  position: relative;
  background: var(--silk-mount, #EDE6D6);
  padding: 12px;
  border-radius: var(--img-radius, 2px);
  box-shadow: 0 8px 24px rgba(28, 24, 20, 0.08), 0 0 0 1px var(--gold-line, rgba(194, 155, 93, 0.4));
  max-width: 100%;
}
.art-mounting::before {
  content: "";
  position: absolute;
  top: 5px; left: 5px; right: 5px; bottom: 5px;
  border: 1px solid rgba(180, 140, 80, 0.35);
  pointer-events: none;
}
.art-inner {
  position: relative;
  background: #FFF;
  overflow: hidden;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.06);
  cursor: zoom-in;
}
.art-inner img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform .25s ease;
  background: #EAE3D4;
}
.art-inner:hover img {
  transform: scale(1.015);
}
.art-seal-corner {
  position: absolute;
  right: 10px;
  bottom: 10px;
  pointer-events: none;
  z-index: 2;
}
.art-zoom-tag {
  position: absolute;
  left: 8px;
  bottom: 8px;
  background: rgba(28, 25, 23, 0.76);
  color: #F8F4EB;
  font-size: 11px;
  letter-spacing: .08em;
  padding: 3px 8px;
  border-radius: 2px;
  backdrop-filter: blur(4px);
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  z-index: 2;
}
.art-colophon {
  margin-top: 10px;
  padding: 8px 12px;
  background: var(--card-bg, #FCF9F2);
  border-left: 3px solid var(--accent, #9E2B25);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--ink-2);
}
.art-colophon .caption-text {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: .04em;
}
.art-colophon .caption-tag {
  font-size: 11px;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 1px 6px;
  border-radius: 2px;
  white-space: nowrap;
}

/* ---------- 国风画屏视频展播框架 ---------- */
.art-video-box {
  margin: 36px auto;
  background: #1C1917;
  padding: 10px;
  border-radius: var(--img-radius, 2px);
  box-shadow: 0 8px 26px rgba(28, 25, 23, 0.16);
  border: 1px solid rgba(194, 155, 93, 0.45);
  position: relative;
}
.art-video-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 4px 8px;
  color: #D4C9B5;
  font-size: 12px;
  letter-spacing: .1em;
  font-family: var(--serif);
}
.art-video-header .v-title {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #EDE4D4;
}
.art-video-header .v-badge {
  color: #E29F9B;
  border: 1px solid #8B261E;
  padding: 1px 6px;
  font-size: 10px;
  border-radius: 2px;
}
.video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #0D0C0A;
  overflow: hidden;
  border: 1px solid #383228;
}
.video-frame video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #0D0C0A;
}

/* ---------- 朱砂方印 (阳刻 / 阴刻) ---------- */
.seal-stamp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 6px;
  font-family: var(--serif);
  font-size: 11px;
  letter-spacing: .14em;
  line-height: 1.2;
  border-radius: 2px;
  vertical-align: middle;
  box-shadow: inset 0 0 2px rgba(0,0,0,0.15);
}
.seal-stamp.yang {
  background: var(--accent, #9E2B25);
  color: #F8F4EB;
  border: 1px solid #7D1D18;
}
.seal-stamp.yin {
  background: transparent;
  color: var(--accent, #9E2B25);
  border: 1.5px solid var(--accent, #9E2B25);
  font-weight: 600;
}

/* ---------- 全屏水墨画作高清品鉴层 (Lightbox) ---------- */
.art-lightbox {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(16, 14, 12, 0.96);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.art-lightbox-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  color: #D6CCBA;
  font-size: 13px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.art-lightbox-title {
  font-family: var(--serif);
  letter-spacing: .06em;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #EDE4D4;
}
.art-lightbox-close {
  background: transparent;
  border: 1px solid rgba(214, 204, 186, 0.35);
  color: #EDE4D4;
  padding: 6px 14px;
  font-size: 13px;
  border-radius: 2px;
  letter-spacing: .05em;
  cursor: pointer;
}
.art-lightbox-close:hover {
  background: rgba(255,255,255,0.1);
}
.art-lightbox-view {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  padding: 16px;
  touch-action: pan-x pan-y pinch-zoom;
}
.art-lightbox-view img {
  max-width: 95%;
  max-height: 82vh;
  object-fit: contain;
  box-shadow: 0 10px 40px rgba(0,0,0,0.6), 0 0 0 1px rgba(194, 155, 93, 0.4);
  border: 6px solid #EDE6D6;
  transition: transform .2s ease;
}
.art-lightbox-footer {
  padding: 10px 20px;
  text-align: center;
  font-size: 12px;
  color: #9C9182;
  letter-spacing: .08em;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.article-body figure { margin: 34px 0; }
.article-body figure img { width: 100%; height: auto; display: block; background: #E9E2D3; border-radius: var(--img-radius); box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
.article-body figure figcaption { font-size: 13px; color: var(--muted); margin-top: 10px; letter-spacing: .02em; text-align: center; }

.article-end { text-align: center; margin: 44px 0 10px; }
.article-end .end-mark { font-family: var(--serif); font-size: 14px; letter-spacing: .5em; color: var(--muted); }

/* 公众号底部名片式二维码卡片 */
.wechat-qr-card {
  margin: 32px auto 8px;
  max-width: 440px;
  background: var(--card-bg);
  border-radius: 12px;
  padding: 24px 20px;
  border: 1px solid var(--rule);
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
  text-align: center;
}
.wechat-qr-card .wq-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 16px;
}
.wechat-qr-card .wq-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 19px;
  font-family: var(--serif);
  flex: none;
}
.wechat-qr-card .wq-meta {
  text-align: left;
}
.wechat-qr-card .wq-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}
.wechat-qr-card .wq-desc {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}
.wechat-qr-card .wq-qr-wrap {
  display: inline-block;
  padding: 10px;
  background: #FFFFFF;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.06);
}
.wechat-qr-card .wq-qr-wrap img {
  display: block;
  width: 160px;
  height: 160px;
}
.wechat-qr-card .wq-tip {
  margin-top: 14px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
}
.wechat-qr-card .wq-tip .wq-main {
  font-weight: 600;
  color: var(--ink);
  display: block;
  margin-bottom: 2px;
}
.wechat-qr-card .wq-tip .wq-sub {
  color: var(--muted);
}

.qr-share { margin: 30px auto 0; max-width: 340px; padding: 24px 18px; border: 1px solid var(--rule); background: var(--surface); }
.qr-share img { display: block; margin: 0 auto; width: 168px; height: 168px; border: 1px solid var(--rule); }
.qr-share .qr-text { font-size: 13px; color: var(--muted); letter-spacing: .06em; margin-top: 12px; line-height: 1.7; }

.pager { border-top: 1px solid var(--rule); margin: 34px 22px 0; }
.pager .p-item { display: flex; align-items: flex-start; gap: 14px; padding: 20px 0; border-bottom: 1px solid var(--rule); }
.pager .p-item .dir { flex: none; width: 64px; font-size: 12px; letter-spacing: .2em; color: var(--muted); padding-top: 3px; }
.pager .p-item .t { font-family: var(--serif); font-size: 17px; line-height: 1.5; font-weight: 600; }
.pager .p-empty { font-size: 14px; color: var(--muted); padding: 20px 0; border-bottom: 1px solid var(--rule); }

/* ---------- 桌面适配 ---------- */
@media (min-width: 768px) {
  .masthead { padding: 30px 32px 16px; }
  .masthead .brand-name { font-size: 40px; }
  .article-head h1 { font-size: 36px; }
  .article-head, .article-body, .pager { padding-left: 32px; padding-right: 32px; }
  .article-cover figcaption { padding-left: 32px; }
  .article-body p { font-size: calc(var(--body-size) + 1px); }
  .feature h2 { font-size: 30px; }
}
@media (min-width: 1080px) {
  .article-head, .article-body { max-width: 760px; margin-left: auto; margin-right: auto; }
  .article-cover { max-width: 860px; margin-left: auto; margin-right: auto; }
  .pager { max-width: 760px; margin-left: auto; margin-right: auto; }
}