/* 方案标识: newspaper-columns; 视觉签名: 正文首段轻量首字强调; 调色：深紫灰与象牙白; 系统字体栈; 无渐变、无玻璃拟态 */
:root{
  --bg: #fffaf0; /* 象牙白 */
  --ink: #2b2540; /* 深紫灰 */
  --muted: #6b6480;
  --accent: #5b4a88; /* 紫色调强调色 */
  --line: rgba(43,37,64,0.08);
  --max-width: 1280px; /* 桌面容器范围 1120-1440 */
  --gutter: 22px;
  --radius: 4px; /* 方角小圆 */
  font-size: 16px;
}

/* 基础重置与排版 */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.65;
}
.page-wrap{max-width:var(--max-width);margin:18px auto;padding:0 18px}

/* 报头：左右分置 */
.site-header{border-bottom:1px solid var(--line);background:transparent;padding:10px 0}
.header-inner{display:flex;align-items:center;justify-content:space-between}
.site-name{font-weight:700;color:var(--ink);text-decoration:none;font-size:1.125rem}
.home-link{color:var(--muted);text-decoration:none;font-size:0.95rem}

/* 文章头部：标题与窄元信息列：标题与摘要通栏 */
.article-head{padding:18px 0;border-bottom:1px solid var(--line);background:transparent}
.title-row{display:flex;align-items:flex-start;gap:16px}
.title{flex:1 1 auto;font-family: Georgia, "Times New Roman", Times, serif;font-size:1.875rem;color:var(--ink);margin:0 0 6px 0;line-height:1.12}
.meta-col{flex:0 0 180px;color:var(--muted);font-size:0.92rem;text-align:right}
.meta-item{margin-bottom:6px}
.summary{margin:0.6rem 0 0;padding-top:8px;color:var(--muted);font-size:1rem}

/* 内容区域：默认单列（移动优先），桌面将启用8/4分栏 */
.content-grid{display:block;padding:18px 0}
.article-body{margin-bottom:18px}
.content-body{color:var(--ink);font-size:1rem}

/* 推荐侧栏样式（在桌面为分栏） */
.recommend{margin-top:18px;border-top:1px solid var(--line);padding-top:12px}
.rec-title{font-size:1rem;margin:0 0 10px 0;color:var(--accent)}
.related-list{margin:0;padding-left:1.15rem;color:var(--muted)}
.related-list li{margin:6px 0}

/* FAQ */
.faq{margin-top:18px;padding-top:12px;border-top:1px solid var(--line)}
.faq-title{font-size:1rem;margin:0 0 10px 0;color:var(--accent)}
.faq-list{color:var(--muted);font-size:0.98rem}

/* 广告容器：独立、不悬浮 */
.ad{margin:10px 0;padding:10px;border:1px dashed var(--line);background:transparent}
.ad-top{margin-top:6px}
.ad-middle{margin:20px 0}
.ad-bottom{margin-top:18px}

/* 页脚 */
.site-footer{border-top:1px solid var(--line);padding:12px 0;margin-top:18px;color:var(--muted);font-size:0.95rem}
.footer-inner{text-align:center}

/* 视觉签名：正文首段首字轻量强调（仅样式，不改写内容） */
.content-body p:first-of-type::first-letter{color:var(--accent);font-size:1.6em;font-weight:600;float:left;margin-right:6px;line-height:1}

/* 禁止常见模板套路：去除大型阴影与渐变 */
*{box-shadow:none}

/* 响应式规则：桌面与手机必须为两套独立排版 */

/* 桌面端（min-width:1024px）：报刊式布局，容器宽度在1120-1440之间 */
@media (min-width:1024px){
  :root{--max-width:1280px}
  .page-wrap{padding:10px 24px}

  /* 标题元信息列位置保持，标题更大 */
  .title{font-size:2.25rem}
  .meta-col{flex:0 0 220px;text-align:right}

  /* 将内容区改为12列网格：8+4 分栏 */
  .content-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:start;padding-top:20px}
  .article-body{grid-column:1/9;padding-right:10px}
  .recommend{grid-column:9/13;padding-left:10px;border-left:1px solid var(--line);margin-top:0;border-top:none;padding-top:0}
  .recommend .rec-inner{position:sticky;top:84px}

  /* 推荐区采用编号列表风格（视觉） */
  .related-list{counter-reset:rel;list-style:none;padding-left:0;margin:0}
  .related-list li{counter-increment:rel;padding:8px 0;border-bottom:1px solid var(--line);display:flex;gap:8px}
  .related-list li::before{content:counters(rel,'.') '.';color:var(--muted);width:28px;flex:0 0 28px}

  /* FAQ 与正文间距调整 */
  .faq{grid-column:1/13}
  .ad-middle{grid-column:1/13}
}

/* 手机端（max-width:767px）：报头压缩为一行，所有栏目单列，保持横线节奏 */
@media (max-width:767px){
  :root{--max-width:680px}
  .page-wrap{margin:6px auto;padding:8px}

  .header-inner{flex-direction:row;align-items:center;gap:8px}
  .site-name{font-size:1rem}
  .home-link{font-size:0.9rem}

  /* 标题与元信息改为竖排：标题在上，元信息在下（窄元信息列下移） */
  .title-row{flex-direction:column;align-items:flex-start}
  .meta-col{text-align:left;flex:1 1 auto;margin-top:8px}
  .title{font-size:1.25rem}
  .summary{font-size:0.95rem}

  /* 单列流式布局，侧栏折叠到下方 */
  .content-grid{display:block}
  .article-body{padding:0}
  .recommend{margin-top:18px;border-left:none;padding-left:0}
  .recommend .rec-inner{position:static}

  /* 相关阅读以横向小节呈现（自然区块） */
  .related-list{list-style:decimal;padding-left:1.05rem}
  .related-list li{margin:8px 0}

  /* FAQ 列表风格保留编号 */
  .faq-list{padding-left:1.05rem}

  /* 广告占满容器宽度但不遮挡内容 */
  .ad{font-size:0.95rem}
}

/* 中间断点（768-1023）保持适中密度 */
@media (min-width:768px) and (max-width:1023px){
  :root{--max-width:980px}
  .title{font-size:1.6rem}
  .meta-col{flex:0 0 160px}
  .content-grid{display:block}
  .recommend{margin-top:18px}
}

/* 可访问性小优化：链接风格 */
a{color:var(--accent);text-decoration:underline}
a:focus{outline:2px dashed var(--accent);outline-offset:3px}