/* Palette: 藏蓝与纸白；视觉签名：1px 主题竖线；表面：2px 小圆角、浅边框、无阴影 */
:root{
  --bg:#fbf8f2; /* 纸白 */
  --ink:#0f2740; /* 藏蓝 */
  --muted:#5b6b76;
  --accent: #0f2740;
  --surface-border: rgba(15,39,64,0.08);
  --radius: 2px;
  --gap:18px;
  --max-wrap:1280px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei", Arial, sans-serif;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}

a{color:var(--accent); text-decoration:none}
.wrap{margin:28px auto; padding:20px; width:calc(100% - 40px);}

/* Header: 报刊双层报头，第二层极窄 */
.site-header{border-bottom:1px solid var(--surface-border); background:transparent}
.header-top{display:flex; justify-content:space-between; align-items:center; padding:6px 0}
.header-top .brand a{font-weight:700; color:var(--ink); font-size:18px}
.top-nav{font-size:13px; color:var(--muted); display:flex; gap:8px; align-items:center}
.header-sub{border-top:1px solid var(--surface-border); padding:6px 0; font-size:12px; color:var(--muted)}

/* Article header: 标题与窄元信息列 */
.article-header{margin:18px 0 10px}
.title-row{display:grid; grid-template-columns:1fr 180px; gap:12px; align-items:start}
.title-row h1{font-size:28px; line-height:1.06; margin:0; font-weight:700; letter-spacing:-0.02em}
.meta-col{font-size:13px; color:var(--muted); text-align:right}
.summary{margin:12px 0 0; color:var(--muted); line-height:1.6}

/* Grid: 左侧推荐、1px 竖线、右侧正文；正文偏右，推荐偏左 */
.article-grid{display:grid; grid-template-columns: 320px 12px 1fr; gap:var(--gap); align-items:start}

/* 视觉签名：贯穿页面的1px主题竖线 */
.sig-line{width:1px; background:var(--accent); opacity:0.12; border-radius:1px}

/* 相关推荐：编号列表风格 */
.related{padding:12px; border:1px solid var(--surface-border); border-radius:var(--radius); background:transparent}
.related-title{font-size:14px; margin:0 0 8px; color:var(--ink)}
.related-list{margin:0; padding:0 0 0 18px; counter-reset:rl;}
.related-list li{margin:8px 0; list-style:none; counter-increment:rl; position:relative; padding-left:28px}
.related-list li::before{content:counter(rl); position:absolute; left:0; top:0; font-size:12px; color:var(--accent); background:transparent}

/* 正文面板 */
.content-column{min-width:0}
.content-surface{padding:10px 14px; border:1px solid var(--surface-border); border-radius:var(--radius); background:transparent; line-height:1.9; font-size:16px}
.content-surface p{margin:0 0 1em}

/* 广告占位：独立容器，不遮挡、非浮动 */
.ad-slot{margin:18px 0; padding:8px; border:1px dashed rgba(15,39,64,0.06); border-radius:var(--radius); background:transparent; color:var(--muted); font-size:13px}
.ad-top{margin-top:12px}

/* FAQ：桌面左问右答表格式（依赖 faq 内容用 .qa .q/.a；若结构不同则以流式显示） */
.faq-section{margin-top:18px}
.faq-section h3{margin:0 0 8px; font-size:15px}
.faq{display:block}
.faq .qa{display:grid; grid-template-columns: 1fr 2fr; gap:12px; padding:10px 0; border-top:1px solid var(--surface-border)}
.faq .q{font-weight:600}
.faq .a{color:var(--muted)}

/* Footer */
.site-footer{padding:18px 20px; border-top:1px solid var(--surface-border); color:var(--muted); font-size:13px; text-align:center}

/* 密度与排版微调（报刊式标题紧凑、正文舒展） */
h1{line-height:1.02}
.content-surface{letter-spacing:0.01em}

/* 禁止深色科技仪表盘风格（确保浅色纸白背景） */

/* 桌面端规则（min-width:1024px）：使用非对称网格，正文偏右，推荐偏左；容器充分利用宽屏 */
@media (min-width: 1024px){
  .wrap{width:clamp(1120px, 88vw, 1280px);}
  .title-row h1{font-size:34px}
  .title-row{grid-template-columns: 1fr 200px}
  .article-grid{grid-template-columns: 360px 12px 1fr}
  .related{position:relative}
  /* FAQ 桌面表格式：确保常见的 .qa 元素按两栏布局 */
  .faq .qa{grid-template-columns: 1fr 2fr}
}

/* 手机端规则（max-width:767px）：取消错位，按标题、摘要、正文、FAQ、推荐顺序排列 */
@media (max-width: 767px){
  .wrap{width:calc(100% - 24px); padding:12px}
  .title-row{grid-template-columns: 1fr;}
  .meta-col{order:2; text-align:left; margin-top:8px}
  .article-grid{display:block}
  .related{margin-top:18px; border-radius:var(--radius)}
  .sig-line{display:none}
  .content-surface{font-size:15px}
  /* 将 related 移到正文之后：在移动端把相关内容展示为横向压缩的编号列表 */
  .related-list{padding-left:18px}
  .related-list li{padding-left:26px}
  /* FAQ 在手机端按块显示：问题在上，答案在下 */
  .faq .qa{display:block; padding:10px 0; border-top:1px solid var(--surface-border)}
  .faq .q{font-weight:600; margin-bottom:6px}
  .faq .a{color:var(--muted)}
}

/* 保持可读性在中等视口 */
@media (min-width: 768px) and (max-width: 1023px){
  .wrap{width:calc(100% - 40px)}
  .article-grid{grid-template-columns: 280px 12px 1fr}
  .title-row h1{font-size:26px}
}