/* 通用变量与视觉基准 */
:root{
  --charcoal:#1f2221; /* 炭黑 */
  --warm-gray:#a7a29a; /* 暖灰 */
  --surface-bg:#fff; /* 背景保持简洁 */
  --muted:#6b6b66;
  --accent:var(--charcoal);
  --radius:2px; /* surface 小圆角 */
  --border:rgba(31,34,33,0.08);
  --gap:20px;
  --container-min:1120px; /* 桌面容器下限 */
}

/* 基础重置，使用系统字体 */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans CJK SC","PingFang SC","Microsoft YaHei",sans-serif;
  color:var(--charcoal);
  background:var(--surface-bg);
  -webkit-font-smoothing:antialiased;
  line-height:1.65; /* 舒展阅读密度 */
  padding:24px 12px;
}

/* 页面根框架 */
.page-root{max-width:1600px;margin:0 auto}
.header-inner, .footer-inner{max-width:1280px;margin:0 auto;padding:8px 12px;display:flex;align-items:center;justify-content:space-between}

/* HEADER: 索引式导航，桌面为横向索引，移动压缩为一行 */
.site-header{border-bottom:1px solid var(--border);background:linear-gradient(180deg, rgba(255,255,255,0.0), rgba(255,255,255,0.0));}
.brand{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--charcoal)}
.brand-home{color:var(--charcoal);text-decoration:none;font-weight:700}
.brand-note{color:var(--muted);font-size:13px}
.nav-index{display:flex;gap:14px;align-items:center;color:var(--muted);font-size:14px}
.nav-index a{color:var(--charcoal);text-decoration:none}

/* 主体容器：在桌面端限定宽度区间，按合同使用报刊式通栏报头；标题与摘要通栏 */
.layout-container{margin:20px auto;display:block}
.title-block{max-width:1280px;margin:0 auto 18px;padding:12px;border:1px solid var(--border);border-radius:var(--radius);}
.article-title{font-size:28px;margin:6px 0 8px;font-weight:700;line-height:1.15}
.title-meta{color:var(--muted);font-size:13px;margin-bottom:10px}
.summary{margin:0;color:var(--muted);font-size:15px}

/* 12列网格，文章8列+编辑推荐4列；使用分隔线而非卡片 */
.grid-12{display:grid;grid-template-columns:1fr;gap:20px;max-width:1280px;margin:18px auto}
.article-col{background:transparent;padding:12px;border-radius:var(--radius);border:1px solid transparent}
.aside-col{background:transparent;padding:12px;border-left:1px solid var(--border);border-radius:var(--radius)}
.aside-list{display:flex;flex-direction:column;gap:12px}
.aside-list > *{padding:8px 0;border-bottom:1px solid var(--border);color:var(--muted)}

/* 文章内容区，正文应完整可见 */
.article-content{font-size:16px;color:var(--charcoal)}
.article-content p{margin:0 0 1em}

/* 广告容器独立且非覆盖、不悬浮 */
.ad-container{padding:12px;margin:18px 0;border:1px dashed var(--border);border-radius:var(--radius);background:transparent;color:var(--muted);font-size:14px}
.ad-top,.ad-middle,.ad-bottom{display:block}

/* FAQ - 支持 details 折叠风格；若 {{faq}} 未使用 details 也能展示 */
.faq .section-title{margin:6px 0 10px;font-size:15px}
.faq-list details{border-top:1px solid var(--border);padding:10px 0}
.faq-list details summary{cursor:pointer;font-weight:600;margin:0}

/* related-bottom 底部三列短卡但不用阴影 */
.related-bottom{max-width:1280px;margin:20px auto}
.related-heading{font-size:15px;margin:10px 0}
.related-grid{display:grid;grid-template-columns:1fr;gap:12px}
.related-grid > *{padding:10px;border:1px solid var(--border);border-radius:var(--radius);background:transparent}

/* 视觉签名：章节标题带短编号线但不自动生成编号（不显示数字，仅短线徽记） */
.section-title{display:inline-block;position:relative;padding-left:18px;font-weight:700}
.section-title::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:10px;height:2px;background:var(--accent);border-radius:2px}

/* Footer */
.site-footer{border-top:1px solid var(--border);margin-top:36px;padding:12px}
.footer-inner{display:flex;justify-content:center;color:var(--muted)}

/* small屏默认样式结束 */

/* ---- 桌面专属规则 (蓝图要求) ---- */
@media (min-width:1024px){
  body{padding:28px}
  .header-inner, .footer-inner{max-width:none;min-width:0}
  .title-block{width:clamp(1120px,90vw,1320px);padding:16px}
  .grid-12{width:clamp(1120px,90vw,1320px);display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
  .article-col{grid-column:1 / span 8;padding:18px;border-right:1px solid var(--border)}
  .aside-col{grid-column:9 / span 4;padding:18px}

  /* related 底部呈现三列短卡但不用阴影 */
  .related-grid{grid-template-columns:repeat(3,1fr)}

  /* 标题组合：紧凑标题加关键词眉题（关键词以小字形式出现在标题上方） */
  .title-block::before{content:attr(data-keywords);display:block;color:var(--warm-gray);font-size:13px;margin-bottom:6px}

  /* 视觉密度：报刊式更紧凑的标题与舒展正文 */
  .article-title{font-size:32px}
  .article-content{font-size:17px}
}

/* ---- 手机端专属规则 ---- */
@media (max-width:767px){
  body{padding:12px}
  .header-inner{padding:8px 0;gap:8px;align-items:center}
  .brand-home{font-size:16px}
  .nav-index{gap:8px;font-size:13px;flex-wrap:nowrap;overflow:auto}

  /* 报头压缩为一行，所有栏目单列，保留清晰横线节奏 */
  .title-block{border:0;padding:8px}
  .article-title{font-size:20px;margin-top:6px}
  .title-meta{font-size:12px}
  .summary{font-size:14px}

  /* 单列自然重排：侧栏下移为单列块 */
  .grid-12{display:block;width:100%;gap:12px}
  .article-col{grid-column:auto;padding:10px;border:0}
  .aside-col{border-top:1px solid var(--border);padding:12px;margin-top:12px}

  /* related 改为单列，短卡不使用阴影 */
  .related-grid{grid-template-columns:1fr}

  /* FAQ 折叠体验优化 */
  .faq-list details{padding:8px 0}
}

/* Accessibility tidbits */
a{word-break:break-word}
img{max-width:100%;height:auto}