:root{
  --bg:#f7f7f8;
  --paper:#ffffff;
  --text:#222222;
  --muted:#6a6a6a;
  --accent:#caa200; /* 芥末黄 */
  --graphite:#2f2f30; /* 石墨灰 */
  --radius:2px;
  --gap:28px;
}
/* 基础排版：人文杂志宽松型 */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Georgia, "Times New Roman", serif;
  color:var(--text);
  background:linear-gradient(180deg,var(--bg),#ffffff 1600px);
  -webkit-font-smoothing:antialiased;
  line-height:1.7; /* 舒展密度 */
}
.page-root{display:flex;justify-content:center}
.page-wrap{width:100%;max-width:1280px;padding:28px 20px}
.masthead{border-bottom:1px solid rgba(47,47,48,0.08);}
.masthead-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.site-home{font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; text-decoration:none;color:var(--graphite);font-weight:600;letter-spacing:0.6px}
.mini-nav{font-size:13px;color:var(--muted)}
.ad-holder{max-width:1280px;margin:8px auto;padding:6px 10px;border-radius:var(--radius);border:1px solid rgba(47,47,48,0.06);background:transparent;color:var(--muted);font-size:13px}
/* 标题区：标题居中，摘要左对齐 */
.title-block{padding:24px 8px 18px}
.title-block h1{margin:0;text-align:center;font-size:30px;color:var(--graphite);letter-spacing:0.2px}
.title-block .meta-row{display:flex;gap:12px;justify-content:center;color:var(--muted);font-size:13px;margin-top:10px}
.title-block .summary{margin:14px 0 0;max-width:100%;text-align:left;color:var(--muted);padding-right:6px;font-size:16px}
/* 内容网格：使用 12 列概念：文章 8，侧注 4；使用分隔线而非卡片 */
.content-grid{display:grid;grid-template-columns:1fr;gap:20px;margin-top:22px}
.article{background:var(--paper);padding:18px;border-radius:var(--radius);border:1px solid rgba(47,47,48,0.06)}
.article-inner{color:var(--text);font-size:17px}
.editorial{background:transparent}
.aside-inner{padding:12px;border-radius:var(--radius);border:1px solid rgba(47,47,48,0.06);background:rgba(255,255,255,0.98)}
.aside-title{margin:0 0 8px;font-size:15px;color:var(--graphite);font-weight:600}
.kw{color:var(--muted);font-size:14px}
.related-list{padding-left:20px;margin:0;color:var(--muted);font-size:14px}
.sep{border:0;border-top:1px solid rgba(47,47,48,0.06);margin:12px 0}
.faq-section{margin-top:26px}
.faq-title{font-size:18px;margin:0 0 8px;color:var(--graphite)}
.faq-list{border-top:1px solid rgba(47,47,48,0.06);}
/* faq_pattern: 横线问答列表 ，假定 {{faq}} 输出若干 <div class="q">...</div> 元素 */
.faq-list > *{padding:14px 8px;border-bottom:1px solid rgba(47,47,48,0.04)}
.faq-list .question{font-weight:600;color:var(--graphite);margin-bottom:6px}
.faq-list .answer{color:var(--muted)}
.site-footer{padding:22px 0;color:var(--muted);font-size:13px;text-align:center;border-top:1px solid rgba(47,47,48,0.04);margin-top:34px}
/* 贯穿页面的1px主题竖线（视觉识别）——在大屏可见 */
.vline{display:none}

/* ====== 桌面端 (>=1024px) ====== */
@media (min-width:1024px){
  .page-wrap{padding:36px;position:relative;/* 基准容器 */
    width:clamp(1120px,90vw,1400px);max-width:1400px}

  /* 形成 8/4 非对称网格；使用边线分隔而非卡片 */
  .content-grid{grid-template-columns:2fr 1fr;align-items:start;gap:32px}
  .article{border-right:0;padding-right:36px}
  .editorial{align-self:start}

  /* 在文章和侧注之间使用 1px 主题竖线贯穿（从标题区下方穿过整个主区） */
  .page-wrap::before{content:"";position:absolute;top:140px;bottom:120px;left:calc(50% + 160px);width:1px;background:var(--accent);opacity:0.95}

  /* 标题与摘要：标题居中、摘要通栏左对齐（摘要已在 .title-block） */
  .title-block{padding:30px 8px 16px}
  .title-block h1{font-size:36px}
  .title-block .summary{font-size:17px}

  /* 侧注内部使用线条分隔而非卡片 */
  .aside-inner{border-radius:var(--radius);padding:18px}
  .aside-section{margin-bottom:10px}

  .ad-holder{margin-left:auto;margin-right:auto}
}

/* ====== 手机端 (<=767px) ====== */
@media (max-width:767px){
  body{font-size:15px;line-height:1.6}
  .page-wrap{padding:16px}
  .masthead-inner{padding:8px 0}
  .site-home{font-size:16px}

  /* 报头压缩为一行 */
  .title-block h1{text-align:left;font-size:20px}
  .title-block .meta-row{justify-content:flex-start;gap:10px;font-size:12px}
  .title-block .summary{font-size:15px;margin-top:8px}

  /* 所有栏目单列，保留横线节奏 */
  .content-grid{grid-template-columns:1fr;gap:14px}
  .article{padding:14px;border-radius:var(--radius)}
  .editorial{order:3}
  .aside-inner{padding:12px}

  /* 侧栏变为顺序下移的区块，不做黏附或固定 */
  .related-list{padding-left:16px}

  /* FAQ 横线样式保持 */
  .faq-list > *{padding:12px}
  .page-wrap::before{display:none}
}

/* 中间尺寸（768px - 1023px）采用折中布局，仍为单列以保障可读性 */
@media (min-width:768px) and (max-width:1023px){
  .page-wrap{padding:20px}
  .title-block h1{font-size:24px;text-align:left}
  .content-grid{grid-template-columns:1fr;gap:18px}
  .page-wrap::before{display:none}
}

/* 表面语言：2px 小圆角、浅边框、无阴影 */
.surface{border-radius:var(--radius);border:1px solid rgba(47,47,48,0.06);background:var(--paper)}

/* 可读性微调 */
.article-inner p{margin:0 0 14px}
.article-inner h2{margin:18px 0 8px;font-size:20px}
.article-inner h3{margin:14px 0 6px;font-size:18px}

/* 禁止视觉套路：不使用三列等宽营销卡片等 */
/*（仅样式约束，模板结构未产生等宽三列营销卡片）*/

/* 无链接占位符：仅允许首页为真实链接 */