/* 设计变量与基线 */
:root{
  --brick:#8f2b26; /* 砖红 */
  --sand:#f5efe3;  /* 砂岩白 */
  --text:#222222;
  --muted:#6b6b6b;
  --max-width:1200px; /* 基准，会被媒体查询约束到1120-1440 */
  --container-min:1120px;
  --container-max:1440px;
  --gap:20px;
  --radius:4px; /* 方角小圆 */
  --scale-title: clamp(24px, 4.2vw, 40px);
}

/* 基本重置 */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue","PingFang SC","Hiragino Sans GB", "Microsoft Yahei",Arial,sans-serif;
  color:var(--text);
  background:var(--sand);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}
.container{margin:0 auto;padding:24px;max-width:var(--max-width)}

/* 顶部（左对齐紧凑品牌栏） */
.site-header{background:transparent;padding:12px 24px;border-bottom:1px solid rgba(0,0,0,0.06)}
.header-inner{max-width:var(--max-width);margin:0 auto;display:flex;align-items:center;gap:24px}
.brand{font-weight:700;color:var(--brick);font-size:18px}
.nav-index{display:flex;gap:12px;align-items:center;font-size:13px;color:var(--muted)}
.nav-index a{color:var(--muted);text-decoration:none}
.nav-index .nav-item{padding:2px 6px;border-radius:2px}

/* 广告容器样式（独立、非覆盖） */
.ad{background:transparent;padding:12px 24px;color:var(--muted);font-size:14px}
.ad-top{border-bottom:1px solid rgba(0,0,0,0.04)}
.ad-middle{margin:18px 0;border-top:1px dashed rgba(0,0,0,0.04);padding-top:18px}
.ad-bottom{border-top:1px solid rgba(0,0,0,0.04);margin-top:22px;padding-top:16px}

/* 文章头部（跨栏） */
.article-head{padding:18px 0}
.article-title{
  margin:0 0 8px 0;
  font-weight:800;
  color:var(--text);
  font-size:var(--scale-title);
  line-height:1.12;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.meta-row{font-size:13px;color:var(--muted);display:flex;gap:12px;align-items:center;margin-bottom:8px}
.summary{margin:0;background:transparent;padding:8px 0;color:var(--muted);border-left:3px solid rgba(0,0,0,0.04);padding-left:12px}

/* 编辑部堆叠结构：editor-grid 为两栏，标题与摘要跨栏 */
.editor-grid{display:grid;grid-template-columns:1fr;gap:16px}
.article-body{background:transparent}
.side-notes{background:transparent}

/* 内容标签 */
.content-label{font-size:13px;color:var(--brick);font-weight:700;margin-bottom:6px}
.content-body{color:var(--text);font-size:16px;line-height:1.75}
.section-title{font-size:16px;margin:18px 0 8px 0;color:var(--text);font-weight:700}

/* FAQ 与相关阅读默认堆栈：内容由 {{faq}} 与 {{related}} 提供 */
.faq-block .faq-grid{display:block;border-top:1px solid rgba(0,0,0,0.04);padding-top:12px}
.related-grid{display:grid;grid-template-columns:repeat(1,1fr);gap:10px;margin-top:8px}
.related-grid > *{background:transparent;padding:8px;border:1px solid rgba(0,0,0,0.04);border-radius:var(--radius);}

/* 侧边区域风格（桌面将成为 10/2 的窄边注） */
.side-inner{position:sticky;top:28px}
.side-box{background:rgba(255,255,255,0.6);border:1px solid rgba(0,0,0,0.04);padding:10px;margin-bottom:10px;border-radius:var(--radius);font-size:14px;color:var(--muted)}
.side-box.small-note{font-size:12px;color:var(--muted)}

/* 页脚 */
.site-footer{padding:18px 24px;border-top:1px solid rgba(0,0,0,0.04);color:var(--muted);font-size:13px}

/* 桌面端规则：利用宽屏，容器限制在1120-1440；10/2 边注；FAQ 左问右答表格式 */
@media (min-width:1024px){
  :root{--max-width: clamp(var(--container-min), 75vw, var(--container-max));}
  .container{padding:28px}

  .editor-grid{
    display:grid;
    grid-template-columns: 10fr 2fr; /* 正文10/边注2 */
    gap:28px;
    align-items:start;
  }

  /* 使标题与摘要跨两栏 */
  .article-head{grid-column:1 / -1;padding-bottom:6px}

  .article-body{grid-column:1 / 2}
  .side-notes{grid-column:2 / 3}

  /* FAQ 左问题右答案的桌面表格式：假设 {{faq}} 输出为若干条 .faq-item */
  .faq-grid{display:block}
  .faq-grid .faq-item{display:grid;grid-template-columns:1fr 2fr;padding:10px 0;border-bottom:1px solid rgba(0,0,0,0.04)}
  .faq-grid .faq-item .q{font-weight:700;color:var(--brick);padding-right:12px}
  .faq-grid .faq-item .a{color:var(--text)}

  /* 相关阅读三列短卡但不用阴影 */
  .related-grid{grid-template-columns:repeat(3,1fr);gap:12px}
  .related-grid > *{padding:12px;border:1px solid rgba(0,0,0,0.04);background:transparent}

  /* 视觉识别：大面积留白配紧凑字阶（通过较大间距与紧凑文字层级实现） */
  .article-title{letter-spacing:-0.5px}
}

/* 手机端规则：单列、语义顺序重排，取消错位和跨栏 */
@media (max-width:767px){
  :root{--max-width:100%;}
  .container{padding:16px}
  .header-inner{padding:6px 0}
  .brand{font-size:16px}

  .editor-grid{grid-template-columns:1fr;gap:12px}
  .article-head{padding-bottom:8px}
  .article-title{font-size:20px}

  /* 侧栏下移：变为页内块并在正文之后自然排列 */
  .side-notes{order:3}
  .article-body{order:1}

  /* FAQ 手机端恢复单栏：问题在上方，答案在下方（堆叠） */
  .faq-grid .faq-item{display:block;padding:10px 0;border-bottom:1px solid rgba(0,0,0,0.04)}
  .faq-grid .faq-item .q{display:block;color:var(--brick);font-weight:700;margin-bottom:6px}
  .faq-grid .faq-item .a{display:block}

  .related-grid{grid-template-columns:repeat(1,1fr)}

  /* 防止横向滚动 */
  .article-title,.content-body{word-break:break-word}
}

/* 可读性增强（所有视口） */
.content-body p{margin:12px 0}
.content-body h2{margin:18px 0 8px 0}

/* 禁用常见禁止模式：无作者头像、无社交卡片 */
.author-card{display:none}