/* 视觉与布局变量 */
:root{
  --bg: #F7F3EA; /* 象牙白基底 */
  --surface: #FFFFFF; /* 轻微分隔面 */
  --ink: #222222; /* 主文本 */
  --muted: #6D6A70; /* 次要文本 */
  --accent: #5A3D8A; /* 克制强调色（标题首字/眉题） */
  --band-border: #E6E2D8; /* 分隔线 */
  --max-width: 1200px; /* 桌面内容宽度，位于1120-1440区间 */
  --gutter: 28px; /* 基本间距 */
  --radius: 4px; /* 小方角 */
}

/* 基础重置与排版（人文杂志宽松型） */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family: Georgia, 'Times New Roman', Times, serif; /* 人文杂志风格 */
  line-height:1.65; /* 舒展密度 */
  -webkit-font-smoothing:antialiased;
}
.page-inner{margin:0 auto;padding:20px;max-width:calc(100% - 40px)}

/* 工具条：站名与面包屑合并为细导航 */
.toolbar{border-bottom:1px solid var(--band-border);background:transparent}
.toolbar-inner{display:flex;align-items:center;gap:12px;padding:12px 20px}
.site-name{font-weight:700;color:var(--ink);text-decoration:none}
.crumb{color:var(--muted);font-size:0.95rem}

/* 色带通用 */
.band{padding:18px 0;border-top:1px solid transparent}
.band-inner{padding:18px 20px;background:transparent}
.band-heading{margin:0 0 12px 0;font-family: Georgia, serif;font-size:1.05rem;color:var(--ink)}

/* 标题带：紧凑标题加关键词眉题；首字强调色 */
.band-title{background:var(--surface);border-top:1px solid var(--band-border);border-bottom:1px solid var(--band-border)}
.band-title .band-inner{display:flex;flex-direction:column;gap:6px;padding:18px}
.eyebrow{font-size:0.9rem;color:var(--accent);font-weight:600;letter-spacing:0.06em}
h1{margin:0;font-size:1.6rem;line-height:1.12;font-weight:700}
/* 视觉识别：标题首字使用克制强调色 */
h1::first-letter{color:var(--accent)}
.meta{margin-top:8px;color:var(--muted);font-size:0.92rem;display:flex;gap:12px;align-items:center}

/* 摘要带：窄幅阅读引导 */
.band-summary{background:transparent}
.summary-inner{max-width:900px;padding:16px;border-left:3px solid var(--band-border);background:rgba(90,61,138,0.03)}

/* 正文色带：编辑部式双栏（桌面）/单列（手机） */
.band-content{background:var(--surface);border-top:1px solid var(--band-border);border-bottom:1px solid var(--band-border)}
.content-grid{display:block;padding:20px}
.article{min-width:0}
.article-body{color:var(--ink);font-size:1rem}
.sidebox{margin-top:18px}
.side-inner{border:1px solid var(--band-border);padding:12px;background:#FFF;border-radius:var(--radius)}
.side-item{margin-bottom:10px;color:var(--muted);font-size:0.95rem}
.side-item .side-txt{color:var(--ink);margin-top:6px;font-size:0.98rem}

/* 广告占位样式：保证独立容器且不悬浮 */
.ad{padding:12px 20px;margin:12px 0;background:transparent;border:1px dashed var(--band-border);color:var(--muted);font-size:0.95rem}

/* FAQ 两列（桌面）/单列（手机） */
.faq-inner{padding:12px}
.faq-grid{display:block;gap:12px}

/* 相关阅读：底部三列短卡但不用阴影 */
.related-inner{padding:12px}
.related-grid{display:grid;gap:12px}
.related-grid > *{background:var(--surface);padding:12px;border:1px solid var(--band-border);border-radius:var(--radius);}

/* 页脚 */
.page-footer{border-top:1px solid var(--band-border);margin-top:18px;background:transparent}
.footer-inner{padding:12px;color:var(--muted);font-size:0.95rem}

/* 强制无圆角或过度装饰：遵守禁止玻璃拟态、模糊背景和悬浮卡片 */
*{box-shadow:none}

/* 桌面规则：至少在 min-width:1024px 生效的结构差异 */
@media (min-width:1024px){
  .page-inner{max-width:var(--max-width);padding:28px}
  .toolbar-inner{padding:18px 0}

  /* Title 带更紧凑的排版 */
  h1{font-size:2.1rem}
  .eyebrow{font-size:1rem}

  /* 正文采用非对称双栏网格：正文宽、边注窄（编辑部式组合） */
  .content-grid{display:grid;grid-template-columns:1fr 340px;gap:32px;align-items:start;padding:28px}
  .article-body{font-size:1.05rem}
  .sidebox{margin-top:0}

  /* FAQ 两列 */
  .faq-grid{display:grid;grid-template-columns:1fr 1fr}

  /* 相关阅读 三列 */
  .related-grid{grid-template-columns:repeat(3,1fr)}

  /* 摘要保持舒适阅读宽度 */
  .summary-inner{max-width:900px}
}

/* 手机规则：max-width:767px，色带取消过宽内边距并自然单列 */
@media (max-width:767px){
  :root{--gutter:14px}
  .page-inner{padding:12px}
  .toolbar-inner{padding:10px 0}
  h1{font-size:1.25rem}
  .eyebrow{font-size:0.85rem}

  /* 所有色带改为单列，去除过宽内边距 */
  .band-inner{padding:12px}
  .summary-inner{border-left:none;background:transparent;padding:10px}
  .content-grid{display:block;padding:12px}
  .sidebox{margin-top:12px}
  .side-inner{padding:10px}

  /* FAQ 单列 */
  .faq-grid{display:block}

  /* 相关阅读改为单列滚动流或两列紧凑排布（此处采用单列） */
  .related-grid{grid-template-columns:1fr}

  /* 防止横向滚动 */
  body,html{overflow-x:hidden}
}

/* 辅助可读性 */
.article-body p{margin:0 0 1em 0}
.band-heading{font-weight:600}