/* 设计说明中指定的系统字体、变量和布局规则；方角框线、单一强调色：墨绿，主调黑白+米白背景 */
:root{
  --bg: #f6f4ec; /* 米白 */
  --surface: #ffffff; /* 内容块背景 */
  --text: #111111; /* 主文本色 */
  --muted: #5a5a5a;
  --line: #e6e3da; /* 细线 */
  --accent: #0b3d2e; /* 墨绿，单一强调色 */
  --container-min: 1120px;
  --container-max: 1280px; /* 在 1120-1440 范围内选用 */
  --gap: 28px;
  --radius: 2px; /* 方角，几乎无圆角 */
  --font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

/* 全局基底 */
html,body{
  height:100%;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-stack);
  margin:0;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.7; /* 舒展密度 */
}

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

.container{
  display:grid;
  grid-template-columns: 220px 1fr 360px; /* 默认桌面三列：左刊头、主区、侧栏 */
  gap:var(--gap);
  align-items:start;
  max-width:var(--container-max);
  min-width:var(--container-min);
  margin:32px auto;
  padding:0 22px;
  box-sizing:border-box;
}

/* 侧边纵向刊头 */
.site-nav{
  border-right:1px solid var(--line);
  padding-right:18px;
  display:flex;
  flex-direction:column;
  gap:18px;
}
.site-nav .brand{font-weight:700;color:var(--text);}
.site-nav .home{font-size:18px}
.nav-list{display:flex;flex-direction:column;gap:10px;color:var(--muted);font-size:14px}
.nav-item{padding:6px 0}

/* 主区域 */
.content-area{grid-column:2;}
.article{background:transparent;border:0;padding:0}
.article-header{border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:18px}
.title{font-size:48px;line-height:1.05;margin:0;text-align:center;font-weight:700;color:var(--text);letter-spacing:-0.01em}

/* 元信息与摘要 */
.meta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:12px;color:var(--muted);font-size:13px}
.meta .keywords{width:100%;text-align:center;color:var(--muted)}
.summary{max-width:880px;margin:18px 0 0 0;padding:10px 0 0 0;border-top:0;color:var(--muted);text-align:left}

/* 文章正文：桌面为 8/4 栏主区宽度控制，不将正文限制为窄手机宽度 */
.article-body{padding:6px 0}
.body-inner{background:var(--surface);border:1px solid var(--line);padding:28px;border-radius:var(--radius);box-sizing:border-box;color:var(--text);font-size:16px}

/* 广告插槽样式，独立容器，不悬浮 */
.ad-slot{max-width:100%;background:transparent;margin:18px auto;padding:10px 0;text-align:center;color:var(--muted);font-size:13px}
.ad-slot > *{display:inline-block}

/* 常见问题 横线问答列表 */
.faq{margin-top:22px}
.faq .section-title{font-size:18px;margin:0 0 8px 0;color:var(--text)}
.faq-list{background:var(--surface);border:1px solid var(--line);padding:14px;border-radius:var(--radius)}
.faq-list > * + *{border-top:1px solid var(--line);padding-top:12px;margin-top:12px}

/* 相关阅读 列表样式为分隔线条，期望内容自带日期或描述 */
.related{margin-top:22px}
.related .section-title{font-size:18px;margin:0 0 8px 0}
.related-list{background:var(--surface);border:1px solid var(--line);padding:8px;border-radius:var(--radius)}
.related-list > * + *{border-top:1px solid var(--line);padding:12px 8px;margin-top:12px}

/* 侧栏：仅桌面显示，非对称网格右侧 */
.side-column{grid-column:3;display:flex;flex-direction:column;gap:18px}
.side-box{background:var(--surface);border:1px solid var(--line);padding:12px;border-radius:var(--radius)}
.side-title{font-size:13px;font-weight:600;color:var(--accent);margin-bottom:8px}
.side-note{color:var(--muted);font-size:13px}
.side-list{color:var(--muted);font-size:14px}
.ad-holder .ad-inner{min-height:60px}

/* 页脚视觉签名：宽屏索引式排版 */
.site-footer{border-top:1px solid var(--line);background:var(--surface);padding:22px 0;margin-top:28px}
.footer-grid{max-width:var(--container-max);min-width:var(--container-min);margin:0 auto;display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;padding:0 22px}
.col-title{font-weight:700;color:var(--text);margin-bottom:6px}
.col-item{color:var(--muted);font-size:13px}

/* 桌面专属增强（必须包含 @media (min-width: 1024px)） */
@media (min-width: 1024px){
  /* 调整容器在允许范围内更宽或更窄 */
  .container{max-width:1280px;min-width:1120px}

  /* 强调标题占比，超大但不遮挡首屏 */
  .title{font-size:56px}

  /* 主体采用 8/4 分栏：正文在左，占主导 */
  .container{grid-template-columns:220px 1fr 360px}
  .content-area{grid-column:2}

  /* 在桌面显示侧边纵向刊头与右侧信息栏 */
  .site-nav{display:flex}
  .side-column{display:flex}

  /* 为桌面增加非对称视觉细线网格 */
  .container::before{
    content:"";position:absolute;left:50%;transform:translateX(-50%);width:1px;background:var(--line);height:100%;opacity:0.6;pointer-events:none
  }
}

/* 手机端独立重排（必须包含 @media (max-width: 767px)） */
@media (max-width: 767px){
  /* 单列布局，避免横向滚动和文字截断 */
  .container{display:block;max-width:100%;min-width:0;margin:16px;padding:0 12px}

  /* 将左侧刊头收缩为顶部细导航 */
  .site-nav{display:flex;flex-direction:row;gap:12px;align-items:center;border-right:0;border-bottom:1px solid var(--line);padding:10px 6px;margin-bottom:10px}
  .nav-list{flex-direction:row;gap:8px;font-size:13px;overflow:auto}

  /* 主区与侧栏合并为单列，侧栏下移 */
  .content-area{grid-column:auto}
  .side-column{grid-column:auto;display:block;margin-top:18px}
  .side-column .side-box{margin-bottom:12px}

  /* 缩小标题比例并改为单列，保持黑白层次 */
  .title{font-size:24px;text-align:center;margin-bottom:6px}
  .meta{justify-content:flex-start;gap:8px;font-size:12px}
  .meta .keywords{text-align:left}
  .summary{text-align:left;font-size:14px}

  /* 正文适配移动端宽度 */
  .body-inner{padding:18px;font-size:15px}

  /* 广告和块级元素顺序自然流动，避免重叠 */
  .ad-slot{margin:14px 0}

  /* 页脚变为纵向小格 */
  .footer-grid{display:block;padding:10px}
  .footer-grid .col{margin-bottom:12px}
}

/* 无动画、无阴影、无模糊：禁止玻璃拟态和悬浮卡片 */
*{box-sizing:border-box}