/* 通用变量与基线，遵循“砖红与砂岩白” */
:root{
  --brick:#9b2e2e; /* 砖红 */
  --paper:#f5efe6; /* 砂岩白 */
  --text:#222222;
  --muted:#6b6b6b;
  --max-desktop:1280px; /* 介于1120-1440中间值，实际容器限制在媒体查询中 */
  --gap:20px;

  /* 字体族：标题衬线、正文无衬线（系统字体） */
  --serif: "Georgia", "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* 基础重置与可读性 */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font-family:var(--sans);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* 工具栏：左对齐紧凑品牌栏（弱化页头） */
.toolbar{
  padding:10px 16px;
  color:var(--muted);
  border-bottom:1px solid rgba(0,0,0,0.04);
  background:transparent; /* 无高频容器 */
}
.brand{display:flex;align-items:center;gap:10px;font-size:14px}
.brand .home{color:var(--brick);text-decoration:none;font-weight:600}
.brand .crumb{color:var(--muted);font-size:13px}

.stage{display:flex;justify-content:center;padding:18px 12px 40px}
.page-wrap{width:100%;max-width:var(--max-desktop);}

/* 广告容器为独立区块，禁用悬浮与覆盖 */
.ad-slot{margin:12px 0;padding:8px;border:1px dashed rgba(0,0,0,0.05);background:transparent;color:var(--muted);font-size:13px}
.ad-top{margin-bottom:18px}
.ad-middle{margin-top:22px;margin-bottom:22px}
.ad-bottom{margin-top:28px}

/* 文章总体 */
.article{background:transparent;padding:0 8px}
.title{
  font-family:var(--serif);
  color:var(--brick);
  margin:6px 0 6px 0;
  font-size:36px; /* 在移动上会缩小 */
  line-height:1.05;
  letter-spacing:-0.01em;
  max-height:calc(2.2em); /* 力求不超过两行（视觉约束） */
  overflow:hidden;
}

.meta{display:flex;flex-wrap:wrap;gap:12px;color:var(--muted);font-size:13px;margin-bottom:10px}
.meta time.now{margin-left:6px}
.meta-k{margin-left:auto;color:var(--muted);font-size:13px}

.summary{margin:8px 0 18px;color:var(--text);font-size:15px}

/* 布局：桌面为左右非对称栅格，手机为紧凑连续 */
.layout{display:block}
.content{min-width:0}
.side{display:none}

.article-body{font-size:16px;color:var(--text);word-wrap:break-word}
.article-body p{margin:0 0 1em}

/* FAQ 与相关阅读样式：遵循合同样式 */
.faq-section{margin-top:22px}
.faq-title{font-family:var(--serif);color:var(--brick);font-size:18px;margin:8px 0}
.faq-list{font-size:15px;color:var(--text)}
/* 期待的结构（如果系统输出合适标记，会生效）：
   .faq-item > .q (left) and .faq-item > .a (right)
   在桌面会横向表格式展示；在移动则自然堆叠。
*/
.faq-list .faq-item{margin-bottom:12px}
.faq-list .faq-item .q{font-weight:600;color:var(--brick)}

.related-box{margin:0;padding-left:0}
.related-title{font-family:var(--serif);color:var(--brick);font-size:16px;margin:0 0 8px}
.related-list{font-size:14px;color:var(--muted);display:block}
/* 相关列表期望由 {{related}} 提供带日期的条目；我们以分隔线样式呈现 */
.related-list > *{display:block;padding:8px 0;border-top:1px solid rgba(0,0,0,0.04)}

.site-footer{padding:22px 12px;color:var(--muted);font-size:13px;text-align:center;border-top:1px solid rgba(0,0,0,0.04);background:transparent}

/* ------------------ 桌面规则（≥1024px） ------------------ */
@media (min-width:1024px){
  :root{--max-desktop:1280px}
  .page-wrap{min-width:1120px;max-width:1280px}

  .stage{padding:28px 12px 56px}

  .title{font-size:48px;max-height:calc(2.2em);margin-bottom:6px}

  /* 非对称两栏：左宽右窄，形成编辑部式组合；侧栏显示并作为阅读辅助 */
  .layout{display:grid;grid-template-columns:2fr 1fr;grid-column-gap:36px;align-items:start}
  .content{order:1}
  .side{display:block;order:2}

  /* FAQ 桌面表格式：左问右答 */
  .faq-list{display:block}
  /* 兼容常见嵌入结构：若系统将 faq 输出为 .faq-item 结构，则实现两列 */
  .faq-list .faq-item{display:grid;grid-template-columns: 220px 1fr;column-gap:18px;padding:10px 0;border-top:1px solid rgba(0,0,0,0.03)}
  .faq-list .faq-item .q{align-self:start}
  .faq-list .faq-item .a{color:var(--text)}

  /* 相关阅读在侧栏为带日期的分隔线列表视觉 */
  .related-box{position:sticky;top:90px;padding-left:6px}
  .related-list{font-size:13px}
}

/* ------------------ 手机规则（≤767px） ------------------ */
@media (max-width:767px){
  :root{--max-desktop:100%}
  body{padding:0;margin:0}
  .stage{padding:12px 10px 30px}
  .page-wrap{max-width:100%;width:100%}

  /* 紧凑连续布局：站名、标题、摘要、正文首屏连贯，避免首屏空白 */
  .toolbar{padding:8px 10px}
  .brand{font-size:13px}
  .title{font-size:20px;line-height:1.08;margin-bottom:6px}
  .meta{font-size:12px;gap:8px}
  .summary{font-size:14px;margin-bottom:12px}

  .layout{display:block}
  .side{display:block;margin-top:18px}

  /* FAQ 在移动端改为垂直堆栈，问题在上方 */
  .faq-list .faq-item{display:block;padding:10px 0;border-top:1px solid rgba(0,0,0,0.04)}
  .faq-list .faq-item .q{display:block;margin-bottom:6px;font-weight:600;color:var(--brick)}

  /* 相关阅读改为横向小节或紧凑列表 */
  .related-list > *{padding:10px 0;border-top:1px solid rgba(0,0,0,0.04)}

  .ad-slot{font-size:13px;padding:8px}
}

/* 中间宽度（768-1023）保持可读性，但仍与手机布局接近 */
@media (min-width:768px) and (max-width:1023px){
  .title{font-size:28px}
  .layout{display:block}
  .side{display:block;margin-top:20px}
  .faq-list .faq-item{display:block}
}

/* 可访问性小调整 */
a{color:var(--brick)}
a:hover{text-decoration:underline}

/* 视觉签名：大面积留白配紧凑字阶（通过间距与字重控制） */
/* 明确禁止常见AI模板套路：无大圆角、无柔和阴影、无突出卡片 */