/* 风格变量与全局 */
:root{
  --bg:#f7f5ef; /* 纸白 */
  --ink:#0b2b4a; /* 藏蓝 */
  --muted:#465e73;
  --accent: #0b2b4a; /* 主题色用于1px竖线 */
  --surface-border: rgba(11,43,74,0.12);
  --radius: 2px; /* surface 小圆角 */
  --gap: 20px;
  --max-width: clamp(1120px, 88vw, 1440px);
  --ui-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", "Microsoft YaHei", sans-serif;
}
html,body{height:100%;margin:0;background:var(--bg);color:var(--ink);font-family:var(--ui-font);-webkit-font-smoothing:antialiased;}
a{color:var(--ink);text-decoration:none}
img{max-width:100%;height:auto}

/* 页眉与左侧刊头 */
.site-header{display:flex;align-items:flex-start;padding:12px 16px;border-bottom:1px solid var(--surface-border);background:transparent}
.site-nav{display:flex;align-items:flex-start;gap:18px}
.brand{font-weight:700;color:var(--ink);padding:4px 6px}
.nav-list{list-style:none;margin:0;padding:0;display:flex;gap:12px}
.nav-list li{font-size:13px;color:var(--muted)}
.top-ad{margin-left:auto;align-self:center}

.canvas{display:flex;justify-content:center;padding:18px}
.ledger-wrap{display:flex;gap:18px;width:100%;max-width:var(--max-width);}

/* 左侧竖刊头 */
.left-rail{width:160px;flex:0 0 160px;color:var(--muted);border-right:1px solid var(--surface-border);padding-right:14px}
.rail-mark{font-weight:600;color:var(--ink);margin-bottom:10px}
.rail-index{list-style:none;padding:0;margin:0;color:var(--muted)}
.rail-index li{padding:6px 0;font-size:13px}

/* Ledger 12 列网格区域 */
.ledger-grid{display:grid;gap:18px;flex:1;align-content:start;position:relative;padding-left:18px}
/* 视觉签名：贯穿页面的1px主题竖线（左侧在内容区内） */
.ledger-grid::before{content:"";position:absolute;left:8px;top:0;bottom:0;width:1px;background:var(--accent);opacity:0.9}

/* 默认（移动优先）12列样式在桌面覆盖 */
.article-header h1{margin:0 0 8px 0;font-size:20px;line-height:1.15;font-weight:700;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-height:2.4em}
.lead-meta{font-size:13px;color:var(--muted);margin-bottom:8px}
.excerpt{margin:0 0 12px 0;color:var(--muted)}

.content{order:0}
.content .body-text{background:transparent;border:1px solid var(--surface-border);border-radius:var(--radius);padding:16px;font-size:15px;line-height:1.7;color:var(--ink)}
.ad-middle{margin-top:14px}

.faq{margin-top:18px}
.faq-title{font-size:16px;margin:0 0 8px 0}
.faq-list{border-top:1px solid var(--surface-border);padding-top:8px}
.faq-list > *{display:block;padding:10px 0;border-bottom:1px solid var(--surface-border);}

.meta-track{margin-top:18px}
.meta-block{border:1px solid var(--surface-border);border-radius:var(--radius);padding:10px;margin-bottom:10px;background:transparent}
.meta-block h3{margin:0 0 6px 0;font-size:13px;color:var(--muted)}
.meta-block p{margin:0;font-size:13px;color:var(--ink)}

.related{margin-top:18px}
.related h2{margin:0 0 10px 0;font-size:15px}
.related-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.related-grid > *{font-size:14px;padding:8px;border:1px solid var(--surface-border);border-radius:var(--radius);background:transparent}

.site-footer{padding:18px; border-top:1px solid var(--surface-border);text-align:center;color:var(--muted)}
.bottom-ad{margin-bottom:12px}

/* -------- 桌面规则（min-width:1024px） -------- */
@media (min-width:1024px){
  .site-header{padding:18px 24px}
  .canvas{padding:28px}
  .left-rail{width:200px;flex:0 0 200px;padding-right:22px}
  .ledger-grid{padding-left:28px;display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:min-content;gap:20px}

  /* 标题横跨12列 */
  .article-header{grid-column:1 / -1;padding-bottom:6px}
  .article-header h1{font-size:34px;line-height:1.05;max-height:3.05em;-webkit-line-clamp:2}
  .lead-meta{font-size:14px}
  .excerpt{font-size:15px}

  /* 正文占7列（columns 1-7） */
  .content{grid-column:1 / span 7}
  .content .body-text{font-size:16px;padding:20px}

  /* FAQ 占3列（columns 8-10）且在 DOM 中位于正文之后 */
  .faq{grid-column:8 / span 3}
  .faq-list > *{padding:12px 0}

  /* 元信息轨道占2列（columns 11-12） */
  .meta-track{grid-column:11 / span 2}

  /* 相关阅读 通栏展示但内部为4列紧凑网格 */
  .related{grid-column:1 / -1}
  .related-grid{grid-template-columns:repeat(4,1fr);gap:12px}
  .related-grid > *{padding:12px;font-size:14px}

  /* 更宽松的排版（density:舒展） */
  .content .body-text{line-height:1.9}
}

/* -------- 手机规则（max-width:767px） -------- */
@media (max-width:767px){
  /* 左侧刊头折叠为顶部窄横向（navigation_mode） */
  .ledger-wrap{flex-direction:column;padding:0 12px}
  .left-rail{display:flex;width:100%;border-right:none;border-bottom:1px solid var(--surface-border);padding:10px 0 12px;gap:12px}
  .rail-index{display:flex;gap:10px}

  /* 网格解除，线框仅保留为段落顶部细线 */
  .ledger-grid{padding-left:0;display:block}
  .article-header h1{font-size:20px}
  .content .body-text{border-radius:var(--radius);padding:14px}
  .faq{margin-top:12px}
  .faq-list{border-top:1px solid var(--surface-border)}
  .faq-list > *{border-bottom:1px solid transparent;padding:10px 0}

  /* 相关阅读收窄为2列 */
  .related-grid{grid-template-columns:repeat(2,1fr)}

  /* 底部留白适应小屏 */
  .site-footer{padding:14px}
}

/* 可访问性与细节 */
h1,h2,h3{color:var(--ink);margin:0}
p,li{word-break:break-word}
/* 禁止动画/阴影等重视觉效果以保持轻量 */
*{transition:none}