:root{
  --bg:#f6faf9; /* 淡青灰背景 */
  --paper:#ffffff;
  --ink:#1b2b2b;
  --muted:#6b7a79;
  --accent:#3aa0a6; /* 湖蓝 */
  --line:rgba(27,43,43,0.08);
  --max-w:1280px;
  --site-font: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
}

/* 基础重置与排版 */
*{box-sizing:border-box}
html,body{height:100%;background:var(--bg);color:var(--ink);font-family:var(--site-font);line-height:1.65;margin:0}
.container{margin:0 auto;padding:28px 20px}
a{color:inherit;text-decoration:none}

/* 报刊双层报头：两层不同对齐基线（视觉签名） */
.site-header{background:transparent;padding:10px 0 0;border-bottom:1px solid var(--line)}
.header-row{max-width:var(--max-w);margin:0 auto;padding:0 20px}
.header-top{display:flex;justify-content:center;align-items:center;padding:6px 0;font-weight:600;color:var(--muted)}
.header-top .site-name{font-size:15px}
.header-main{display:flex;justify-content:center;padding:14px 0 18px;border-top:1px solid transparent}
.masthead{display:flex;flex-direction:column;align-items:center}
.masthead-line1{font-weight:700;color:var(--ink);letter-spacing:0.4px}
.masthead-line2{font-size:13px;color:var(--muted);margin-top:4px}

/* 标题区：标题居中，摘要左对齐 */
.title-block{max-width:var(--max-w);margin:20px auto 28px;padding:0 20px}
.title{margin:0;text-align:center;font-size:28px;font-weight:800;line-height:1.12;letter-spacing:-0.5px}
.meta{display:flex;gap:12px;justify-content:center;margin-top:8px;color:var(--muted);font-size:13px}
.summary{margin:14px 0 0;text-align:left;color:var(--muted);font-size:15px;max-width:980px}

/* 布局栅格：desktop 合并为主8列 + 右4列 */
.layout-grid{display:block}
.article{background:transparent}
.article-content{color:var(--ink);font-size:16px;line-height:1.9;word-wrap:break-word}

.side{display:none}
.side-block{border-top:1px solid var(--line);padding:14px 12px;color:var(--muted);font-size:14px}
.side-title{margin:0 0 8px 0;color:var(--accent);font-weight:700;font-size:14px}

/* 广告占位样式（不悬浮、不覆盖） */
.ad{max-width:var(--max-w);margin:12px auto;padding:10px 20px;border:1px dashed var(--line);color:var(--muted);background:transparent}

/* FAQ 区（顶部边线主题色） */
.faq{max-width:var(--max-w);margin:18px auto;padding:16px 20px;border-top:4px solid var(--accent);background:var(--paper)}
.faq-heading{margin:0 0 8px 0;font-size:16px;color:var(--ink)}
.faq-body{color:var(--muted);font-size:15px}

/* 相关阅读：关键词索引式列表 */
.related{max-width:var(--max-w);margin:18px auto;padding:12px 20px;border-top:1px solid var(--line);background:var(--paper)}
.related-heading{margin:0 0 8px 0;font-size:15px;color:var(--ink)}
.related-list{color:var(--muted);font-size:14px}
.related-list a{color:var(--accent);margin-right:10px}

.site-footer{border-top:1px solid var(--line);padding:18px 20px;color:var(--muted);font-size:13px}
.footer-inner{max-width:var(--max-w);margin:0 auto}

/* 桌面布局：1024px 及以上必须存在（含容器宽度约束与非对称右栏） */
@media (min-width:1024px){
  .container{width:clamp(1120px,90vw,1440px);padding:36px}
  .header-row, .title-block, .ad, .faq, .related, .footer-inner{max-width:none}

  /* 使用 CSS Grid 构建 12 列系统：正文占8列，侧栏占4列 */
  .layout-grid{display:grid;grid-template-columns:repeat(12,1fr);grid-column-gap:28px;align-items:start}
  .article{grid-column:1 / span 8}
  .side{grid-column:9 / span 4;display:block}

  /* 侧栏由两个不同高度的信息区组成：通过 min-height 区分视觉高度 */
  .side-top{min-height:220px;border-left:1px solid var(--line);padding-left:18px}
  .side-bottom{min-height:120px;border-left:1px solid var(--line);padding-left:18px;margin-top:18px}

  /* 底部相关阅读：四列显示（在 .related-list 内，如果站点注入链接，会自然分栏） */
  .related-list{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
  .related-list > *{padding:8px 6px;border-bottom:1px solid var(--line);background:transparent}

  /* 标题和正文版心差异：页头居中，正文左基线对齐（视觉签名） */
  .title{font-size:36px}
  .summary{font-size:16px}
}

/* 手机端（最大宽度 767px）：重排为单列，侧栏下移变为两段列表；相关阅读单列 */
@media (max-width:767px){
  body{font-size:16px}
  .container{padding:16px}
  .header-top{font-size:14px}
  .masthead-line1{font-size:18px}
  .masthead-line2{font-size:12px}

  .title{font-size:20px}
  .meta{flex-direction:column;align-items:flex-start;justify-content:flex-start}
  .summary{font-size:14px}

  /* 将主布局改成流式：侧栏下移为两个区块（列表形式）并在正文之后显示 */
  .layout-grid{display:block}
  .article{width:100%}
  .side{display:block;margin-top:18px}
  .side-block{border-top:1px solid var(--line);padding:12px 10px}

  /* 相关阅读改为单列列表，密度稍大以适应移动阅读 */
  .related-list{display:block}
  .related-list > *{display:block;padding:10px 0;border-bottom:1px solid var(--line)}

  /* 广告与区块垂直堆叠，避免横向滚动 */
  .ad{padding:10px}
}

/* 中等屏（768-1023）采用介于两种布局的过渡风格，保持可读性 */
@media (min-width:768px) and (max-width:1023px){
  .container{padding:20px}
  .layout-grid{display:block}
  .side{display:block;margin-top:18px}
  .related-list{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
}

/* 可访问性与可读性小调整 */
.title, .faq-heading, .related-heading{letter-spacing:0.2px}
.article-content p{margin:0 0 12px}
.article-content h2, .article-content h3{margin:18px 0 8px;color:var(--ink)}

/* 禁止常见的模板套路（通过样式体现）：无圆角、无阴影、大量细分隔线 */
*{border-radius:0}