:root{
  /* 视觉与排版变量（青灰与湖蓝） */
  --bg:#f7f9fa;
  --paper:#ffffff;
  --accent:#4ba3c7; /* 湖蓝 */
  --muted:#6b7a80; /* 青灰 */
  --line:#e6eef2;
  --border: rgba(27,38,44,0.08);
  --radius:2px;
  --max-desktop-width:1200px; /* 桌面容器在1120-1440间，实际采用1200作为中间值 */

  --base-font: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,"Noto Sans CJK SC",sans-serif;
  --title-font-weight:700;
  --body-font-weight:400;
  --lead-line-height:1.55; /* 舒展正文 */
  --tight-line-height:1.18; /* 报刊式标题 */

  --baseline-gap:24px; /* 基线网格间距 */
  --baseline-subgap:6px; /* 双层基线次要线 */
}

/* 全局重置与轻量布局 */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:#092026;
  font-family:var(--base-font);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:var(--lead-line-height);
  font-size:16px;
}

a{color:var(--accent);text-decoration:none}

.site-header{padding:10px 16px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,0.6),transparent)}
.top-nav{display:flex;align-items:center;justify-content:space-between;max-width:var(--max-desktop-width);margin:0 auto}
.nav-side{color:var(--muted);font-size:14px}
.nav-center{position:relative;text-align:center}
.site-name{font-weight:700;color:var(--accent);font-size:18px}

.container{margin:20px auto;padding:18px;width:calc(92vw);max-width:var(--max-desktop-width);border-radius:var(--radius)}

/* Headline 区：左右各半（桌面） */
.headline{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:center;margin-bottom:18px}
.headline-col{background:var(--paper);border:1px solid var(--border);padding:18px;border-radius:var(--radius)}
.summary-col .summary{margin:0;color:var(--muted);text-align:left;font-size:15px}
.summary-col .meta{margin-top:12px;font-size:13px;color:var(--muted);display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.summary-col .keywords{margin-left:6px;display:block}

.title-col{display:flex;align-items:center;justify-content:center;padding-top:6px;padding-bottom:6px}
.title{margin:0;font-size:26px;line-height:var(--tight-line-height);font-weight:var(--title-font-weight);text-align:center}

/* 文章网格：桌面7/5 非对称 */
.article-grid{display:block}
.col{margin-bottom:18px}
.main-col{background:var(--paper);border:1px solid var(--border);padding:18px;border-radius:var(--radius)}
.side-col{background:transparent;padding-left:0}

.content-block{border-radius:var(--radius)}
.article-content{
  color:#0b2b2f;
  font-size:16px;
  line-height:var(--lead-line-height);
  /* 视觉签名：正文区双层基线网格感（细线+次线） */
  background-image:repeating-linear-gradient(transparent,transparent calc(var(--baseline-subgap)),rgba(11,43,47,0.015) calc(var(--baseline-subgap)), rgba(11,43,47,0.015) calc(var(--baseline-subgap) + 1px)),
                    repeating-linear-gradient(transparent,transparent calc(var(--baseline-gap) - 1px), rgba(11,43,47,0.02) calc(var(--baseline-gap) - 1px), rgba(11,43,47,0.02) calc(var(--baseline-gap)));
  background-size:100% auto;
  background-repeat:repeat-y;
  padding:6px 8px;
}
.article-content p{margin:0 0 12px 0}
.article-content h2, .article-content h3{margin:16px 0 8px 0}

/* 侧栏模块 */
.faq-block, .related-block{background:var(--paper);border:1px solid var(--border);padding:12px;border-radius:var(--radius);margin-bottom:12px}
.block-title{margin:0 0 10px 0;font-size:15px;color:var(--muted)}

.faq{font-size:14px;color:#123435}
.faq > *{margin:0}

.related{font-size:14px;color:#123435}
.related > *{margin:0}

/* 广告容器样式（独立且不覆盖正文） */
.ad{max-width:var(--max-desktop-width);margin:14px auto;padding:8px;border:1px dashed var(--line);border-radius:var(--radius);background:transparent;color:var(--muted);font-size:14px}
.ad-top{margin-top:12px}
.ad-bottom{margin-bottom:24px}

.site-footer{padding:14px 16px;text-align:center;color:var(--muted);font-size:13px}

/* 小屏与大屏必须区分的规则 */
@media (min-width:1024px){
  /* 容器在桌面端强约束在1120-1440范围内 */
  .container{width:var(--max-desktop-width);min-width:1120px;max-width:1440px;padding:22px}

  /* Headline 保持左右各半 */
  .headline{grid-template-columns:1fr 1fr}

  /* 文章区域使用 7 / 5 网格，右栏承载 FAQ 与 推荐 */
  .article-grid{display:grid;grid-template-columns:7fr 5fr;gap:24px;align-items:start}
  .side-col{padding-left:0}

  /* FAQ 两列（桌面） */
  .faq{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}

  /* 相关阅读以带日期分隔线的列表样式（期待外部 {{related}} 提供条目） */
  .related > *{padding:8px 0;border-bottom:1px solid var(--line)}
}

@media (max-width:767px){
  /* 手机端：导航紧凑，站名仍居中 */
  .top-nav{padding:8px 12px}
  .nav-side{display:none}
  .site-name{font-size:16px}

  /* Headline 上下排列：标题在上，摘要在下（contract 要求标题与摘要上下排列） */
  .headline{display:block}
  .headline-col{background:var(--paper);border:1px solid var(--border);padding:12px;margin-bottom:8px}
  .title-col{display:block}
  .title{font-size:20px;text-align:left}
  .summary{font-size:15px}

  /* 文章区单列流式，侧边栏内容顺序下移（正文、FAQ、推荐依序显示） */
  .container{padding:12px;width:100%;max-width:100%}
  .article-grid{display:block}
  .main-col,.side-col{background:transparent;padding:0;border:0}

  /* FAQ 单列（手机） */
  .faq{display:block}
  .faq > *{margin-bottom:10px}

  .related > *{padding:8px 0;border-bottom:1px solid var(--line)}

  .ad{margin:12px 12px}
}

/* 无阴影、无浮动卡片，遵守 forbidden_pattern */