:root{
  --bg: #ffffff;
  --text: #111111;
  --muted: #666666;
  --line: #dddddd;
  --accent: #b30000; /* 朱红强调色 */
  --max-width: 1280px; /* 在1120-1440范围内 */
  --gutter: 24px;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}
/* 基本重置与排版 */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--sans);
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.6;
  font-size:16px;
}
.sr{position:absolute!important;height:1px;width:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
/* 窄报头（极简细导航） */
.site-header{
  border-bottom:1px solid var(--line);
  padding:10px calc(var(--gutter));
}
.header-inner{
  max-width:var(--max-width);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.site-id{display:flex;align-items:center;gap:8px;font-weight:600}
.site-id .home-link{color:var(--text);text-decoration:none}
.header-note{color:var(--muted);font-size:13px}
.ad{max-width:var(--max-width);margin:10px auto;padding:8px 0;text-align:center;border-top:1px dashed var(--line);border-bottom:1px dashed var(--line);}
/* 页面主区 */
.page{padding:20px calc(var(--gutter));}
.article{max-width:var(--max-width);margin:0 auto}
.article-head{padding:18px 0;border-bottom:1px solid var(--line)}
.title{
  margin:0 0 8px 0;
  color:var(--text);
  font-weight:700;
  font-size:28px; /* base size for mobile */
  line-height:1.08;
  letter-spacing:-0.01em;
  margin-bottom:6px;
}
.meta{color:var(--muted);font-size:13px;margin-bottom:10px}
.meta .published,.meta .now{display:inline-block}
.summary{color:var(--muted);border-top:1px solid transparent;padding-top:12px}
/* 布局：内容区与侧注基础（mobile-first 单列） */
.layout{display:block}
.content-area{margin-bottom:24px}
.content{color:var(--text)}
.content > *:not(:last-child){margin-bottom:1em}
.side-note{margin-top:18px}
.side-panel{border-top:1px solid var(--line);padding:12px 0}
.side-title{margin:0 0 8px 0;font-size:13px;color:var(--muted);font-weight:600}
.kw{color:var(--text);font-size:14px}
.note-body{color:var(--muted);font-size:14px}
/* FAQ 横线问答列表 */
.faq-list{border-top:1px solid var(--line);margin-top:12px}
.faq-list > *{padding:12px 0;border-bottom:1px solid var(--line);}
.faq-list > *:last-child{border-bottom:0}
/* 相关阅读（mobile 单列，desktop 两列） */
.related-heading{margin:18px 0 8px 0;font-size:15px;color:var(--muted);font-weight:700}
.related-list{display:block}
.related-list > *{padding:10px 0;border-top:1px solid var(--line)}
.related-list > *:first-child{border-top:0}
/* 页脚 */
.site-footer{border-top:1px solid var(--line);padding:14px 0;margin-top:24px}
.footer-inner{max-width:var(--max-width);margin:0 auto;display:flex;justify-content:space-between;align-items:center;padding:0 calc(var(--gutter)/2)}
.footer-inner a{color:var(--text);text-decoration:none}

/* 手机端规则（max-width:767px） */
@media (max-width:767px){
  :root{--gutter:16px}
  .title{font-size:24px}
  .article-head{padding:12px 0}
  .page{padding:12px var(--gutter)}
  .ad{margin:8px var(--gutter)}
  .content{font-size:16px}
  .side-note{border-top:1px solid var(--line);padding-top:12px}
  .related-list > *{padding:12px 0}
  .faq-list > *{padding:10px 0}
  /* 手机端：各层按语义顺序单列，取消错位和跨栏 */
  .layout{display:block}
  .content-area{width:100%}
  .side-note{width:100%}
}

/* 桌面端规则（min-width:1024px） - 明确不同于手机的双栏非对称网格 */
@media (min-width:1024px){
  .page{padding:28px calc(var(--gutter)*1.5)}
  .title{font-size:44px; /* 超大标题但控制视觉节奏 */
    max-height:5.6rem; /* 约两行高度 (44px*1.08*2 ≈ 95px) */
    line-height:1.08;
    margin-bottom:8px;
  }
  .article-head{padding:22px 0 18px 0}

  /* 编辑部堆叠结构：正文 10 / 侧注 2 列（12栅格思想） */
  .layout{display:grid;grid-template-columns:repeat(12,1fr);grid-column-gap:24px;align-items:start;margin-top:18px}
  .content-area{grid-column:1/span 10}
  .side-note{grid-column:11/span 2;border-left:1px solid var(--line);padding-left:18px}

  /* 底部 FAQ 与推荐不同宽度错位排列 */
  .faq{margin-top:18px}
  .faq{grid-column:1/span 7}
  .related{grid-column:8/span 5}

  .content{font-size:18px}
  .side-panel{padding:14px 0}

  /* 相关阅读两列摘要列表 */
  .related-list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
  .related-list > *{border-top:0;padding:10px;border:1px solid var(--line)}

  /* 视觉签名：只使用直角和细线，禁止圆角与阴影 */
  *{border-radius:0}
  /* 避免深色科技风格：保持白底黑字与朱红强调 */
  body{background:var(--bg);color:var(--text)}
  a{color:var(--accent)}
}