:root{
  --bg:#ffffff;
  --charcoal:#111214; /* 炭黑 */
  --warm-gray:#9b958f; /* 暖灰 */
  --muted:#6f6b67;
  --line:#e6e3e0;
  --max-width-clamp: clamp(1120px, 80vw, 1440px);
  --gutter:24px;
  --content-gap:28px;
  --type-scale-1: clamp(20px, 2.4vw, 28px); /* title */
  --type-scale-2: clamp(14px, 1.6vw, 18px); /* body */
  --type-scale-3: 13px; /* meta */
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans SC', Arial, 'PingFang SC', 'Hiragino Sans GB', sans-serif;
  color-scheme: light;
}

/* 全局重置的轻量化 */
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--charcoal);}
img,svg,figure{max-width:100%;height:auto}

.page-root{display:flex;flex-direction:column;align-items:center;padding:36px 16px 80px;}
.container{width:var(--max-width-clamp)}

/* Header */
.site-header{width:100%;padding:18px 0 8px}
.header-inner{max-width:var(--max-width-clamp);margin:0 auto;padding:0 var(--gutter);text-align:center}
.site-title{font-weight:600;font-size:18px;color:var(--charcoal);text-decoration:none}
.header-rule{border:0;height:1px;background:var(--line);margin-top:12px;opacity:0.9}

/* Footer */
.site-footer{margin-top:48px;color:var(--muted);font-size:12px}
.footer-inner{max-width:var(--max-width-clamp);margin:18px auto;padding:0 var(--gutter);text-align:left}

/* Article ledger 栏位基础 */
.ledger{width:100%;max-width:var(--max-width-clamp);padding:0 var(--gutter);box-sizing:border-box}
.ledger-title{font-size:var(--type-scale-1);line-height:1.06;margin:8px 0 18px;text-align:center;font-weight:700;letter-spacing:-0.02em}

.ledger-grid{display:block}
.col{box-sizing:border-box}

.meta-row{display:flex;gap:12px;align-items:center;color:var(--muted);font-size:13px;margin-bottom:12px}
.published{color:var(--muted)}
.now{color:var(--muted)}

.description{margin:6px 0 20px;color:var(--muted);font-size:15px;text-align:left}
.article-body{font-size:var(--type-scale-2);line-height:1.75;color:var(--charcoal);max-width:85ch}
.article-body > *{margin:0 0 1.15em}

.ad-slot{margin:18px 0;padding:10px;border:1px dashed var(--line);background:transparent;color:var(--muted);font-size:13px}
.ad-slot:empty{display:none}

/* FAQ & related base */
.section-title{font-size:15px;margin:0 0 8px;color:var(--charcoal)}
.faq-list, .related-list, .faq-box-list{font-size:14px;color:var(--charcoal)}
.related-list > *{margin:0 0 10px}

/* 元信息盒 */
.meta-box{border-left:0;padding-left:0}
.meta-item{margin:0 0 10px;color:var(--muted);font-size:13px}
.meta-item.small{font-size:12px}

/* --- 桌面布局（必须在 min-width:1024px 下体现复杂网格） --- */
@media (min-width:1024px){
  .page-root{padding:56px 16px 120px}
  .ledger{padding:0}

  /* 使用 12 列细网格，标注区域 */
  .ledger-grid{display:grid;grid-template-columns:repeat(12, 1fr);grid-template-rows:auto 1fr;gap:24px;align-items:start}

  /* 标题横跨12列 */
  .ledger-title{grid-column:1 / -1;margin-bottom:18px}

  /* 正文占7列（1-8） */
  .content-col{grid-column:1 / span 7}

  /* FAQ 占3列（8-11）作为并列轨道 */
  .faq-col{grid-column:8 / span 3}
  .faq-box{border:0;padding:0}
  .faq-box-title{font-size:14px;margin:0 0 10px;color:var(--charcoal)}
  /* FAQ 桌面表格式：左问右答 */
  .faq-box-list > *{display:grid;grid-template-columns:1fr 2fr;gap:12px;padding:10px 6px;border-top:1px solid var(--line)}
  .faq-box-list > *:first-child{border-top:0}
  .faq-box-list .question{font-weight:600;color:var(--charcoal)}
  .faq-box-list .answer{color:var(--muted)}

  /* 元信息轨道（最后 2 列） */
  .meta-col{grid-column:11 / span 2}
  .meta-box{position:sticky;top:96px;padding-left:12px;border-left:2px solid var(--line)}

  /* 阅读与视觉节奏 */
  .article-body{font-size:17px}
  .description{font-size:15px}

  /* 相关阅读在正文下方作为独立区域，但在桌面上以两列摘要列表呈现 */
  .related-list{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:12px}
  .related-list > *{padding:8px 6px;border-top:1px solid transparent}

  /* 视觉识别：大面积留白配紧凑字阶 */
  .ledger{padding:12px 0 0}
}

/* --- 手机端布局（必须在 max-width:767px 下重排为另一套排版） --- */
@media (max-width:767px){
  :root{--gutter:16px;--content-gap:18px}
  body{font-size:15px}
  .page-root{padding:18px 12px 48px}
  .site-title{font-size:16px}
  .header-rule{margin-top:10px}

  .ledger{padding:0}
  .ledger-grid{display:block}
  .ledger-title{text-align:center;font-size:20px;margin-bottom:10px}

  /* 网格解除：各区块线框只保留为段落顶部细线 */
  .description, .article-body, .faq-section, .related-section, .meta-box{border-top:1px solid var(--line);padding-top:12px;margin-top:12px}
  .description{margin-top:6px}

  /* FAQ 与 Related 从并列轨道变为顺序下移 */
  .faq-col{display:none}
  .faq-section .faq-list > *{margin-bottom:12px}
  .faq-list .question{font-weight:600}
  .faq-list .answer{color:var(--muted)}

  .related-list{display:grid;grid-template-columns:repeat(2, 1fr);gap:10px}
  .related-list > *{padding:6px 0}

  /* 元信息轨道折叠到正文后方 */
  .meta-col{display:block}
  .meta-box{border-top:1px solid var(--line);padding-top:12px;margin-top:12px}

  .article-body{font-size:15px;line-height:1.7}
  .ad-slot{margin:16px 0}

  /* 保证最小视窗 320px 不横向滚动 */
  body, .page-root, .ledger{min-width:0;overflow-wrap:break-word}
}

/* 无障碍与可读性小调整 */
a,button{color:inherit}

/* 防止常见禁止样式：不使用圆角彩色胶囊等 */
/* visual_signature：保持大面积留白与紧凑字阶（通过间距与字号刻度实现） */