/* 全局变量与基础重置 */
:root{
  --bg: #ffffff; /* 白底为主 */
  --ink: #111111; /* 炭黑主色 */
  --muted: #6b645e; /* 暖灰作为强调色 */
  --rule: #e9e6e3; /* 细线颜色 */
  --max-width: 1320px; /* 桌面容器宽度（1120-1440 范围内） */
  --type-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  --baseline: 22px; /* 基线高度，用于双层基线表现 */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--type-stack);
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
  font-size:16px;
}

.page-root{display:flex;flex-direction:column;min-height:100vh}

a{color:inherit;text-decoration:none}

/* 顶部刊头（居中刊头与横线导航） */
.masthead{padding:20px 16px 8px;text-align:center}
.masthead-inner{max-width:var(--max-width);margin:0 auto}
.site-title{font-weight:700;letter-spacing:0.02em}
.site-nav{margin-top:8px;color:var(--muted);font-size:0.95rem}
.site-nav .nav-home{color:var(--ink);font-weight:600}
.masthead-rule{border:0;border-top:1px solid var(--rule);margin:18px auto 0;max-width:var(--max-width)}

/* 容器与网格基础 */
.page-container{flex:1;padding:18px 16px}
.layout-grid{max-width:var(--max-width);margin:0 auto;display:block}

/* Article 基础 */
.article{background:transparent;border:1px solid transparent}
.article-header{padding:6px 0 12px}
.article-title{font-size:28px;margin:6px 0 8px;font-weight:700;line-height:1.08;text-align:left}
.meta{color:var(--muted);font-size:0.92rem;margin-bottom:8px}
.meta .meta-sep{margin:0 8px;color:var(--rule)}
.summary{color:var(--muted);margin:6px 0 14px}

/* 正文区：双层基线网格感（视觉签名） */
.article-body{padding:6px 0}
.article-body .content{
  /* 主视觉：双层基线网格感，通过重复线条和行高实现 */
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(var(--baseline) - 1px),
    rgba(0,0,0,0.02) calc(var(--baseline) - 1px),
    rgba(0,0,0,0.02) calc(var(--baseline))
  );
  line-height:1.5;
  font-size:1rem;
  color:var(--ink);
  padding:12px;
  border:1px solid var(--rule);
  background-clip:padding-box;
}
.article-body .content p{margin:0 0 12px}
.article-body .content h2{margin:18px 0 8px}

/* 广告槽视觉中性、不可遮挡 */
.ad-slot{max-width:var(--max-width);margin:18px auto;padding:8px;border:1px dashed var(--rule);color:var(--muted);font-size:0.95rem;text-align:center}
.ad-top{margin-top:12px}

/* FAQ（顶部边线主题色） */
.faq{margin-top:18px;padding-top:12px;border-top:3px solid var(--muted)}
.faq-title{font-size:1.05rem;margin:0 0 8px}
.faq-list{color:var(--ink)}

/* 相关阅读：关键词索引式列表，简洁直列 */
.related{margin-top:16px}
.related-title{font-size:1.05rem;margin:0 0 8px}
.related-list{font-size:0.95rem;color:var(--muted)}

/* 侧栏（信息为辅助） */
.side{margin-top:18px}
.side-panel{border:1px solid var(--rule);padding:10px;margin-bottom:12px}
.side-heading{font-size:0.95rem;margin:0 0 8px;color:var(--ink)}
.keywords{color:var(--muted);margin:0}

/* 页脚 */
.site-footer{border-top:1px solid var(--rule);padding:12px 16px;text-align:center;color:var(--muted);font-size:0.92rem}

/* 桌面端规则：1024px 及以上生效，采用 8/4 分栏（非对称网格） */
@media (min-width: 1024px){
  .page-container{padding:28px}
  .layout-grid{display:grid;grid-template-columns:2fr 1fr;grid-column-gap:28px;align-items:start}
  .article{grid-column:1/2}
  .side{grid-column:2/3}
  .article-title{font-size:44px;letter-spacing:-0.01em}
  .article-body .content{padding:20px}
  /* 桌面加强行距以形成编辑部式阅读结构 */
  body{font-size:16px}
}

/* 手机端规则：最大宽度 767px，单列布局，标题比例缩小，保持清晰行距 */
@media (max-width: 767px){
  .masthead{padding:12px 12px 6px}
  .masthead-rule{margin-top:12px}
  .layout-grid{display:block}
  .article-title{font-size:20px}
  .article{padding:0}
  .site-nav{display:block}
  .article-body .content{font-size:15px;padding:10px}
  .side{margin-top:18px}
  /* 确保 320px 时不横向滚动 */
  .page-container{padding-left:12px;padding-right:12px}
  .ad-slot{margin-left:6px;margin-right:6px}
}

/* 中间尺寸（768-1023）保持可读性 */
@media (min-width:768px) and (max-width:1023px){
  .layout-grid{display:block}
  .article-title{font-size:28px}
  .article-body .content{padding:14px}
}

/* 无大圆角，无阴影，保持方角框线语言 */