/* 全局变量与基础 */
:root{
  --bg: #FFF8EE; /* 奶油白 */
  --accent: #3b291f; /* 深棕 */
  --muted: #7a6a61;
  --surface: #fff; /* 局部底色 */
  --border: #e6ddd6;
  --max-width: 1280px; /* 在1120-1440范围内 */
  --gap: 20px;
  --radius: 4px; /* 方角框线 */
  --line-height: 1.65; /* 舒展密度 */
}

/* 重置与系统字体（技术资讯紧凑型） */
*{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", "Hiragino Sans GB", "Microsoft Yahei", sans-serif;
  color:var(--accent);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:var(--line-height);
  padding:24px 16px;
}

/* 顶部横向报头：左对齐紧凑品牌栏 */
.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  max-width:var(--max-width);
  margin:0 auto 18px;
  padding:8px 12px;
  background:transparent;
}
.brand{display:flex;align-items:baseline;gap:12px}
.brand-link{
  color:var(--accent);
  font-weight:700;
  text-decoration:none;
  font-size:18px;
}
.brand-tag{
  color:var(--muted);
  font-size:13px;
}
.top-meta{color:var(--muted);font-size:13px}

/* 广告槽（独立容器，禁止悬浮与覆盖） */
.ad-slot{max-width:var(--max-width);margin:12px auto;padding:8px;border:1px dashed var(--border);background:transparent;color:var(--muted);font-size:13px;border-radius:var(--radius)}

/* 主容器：桌面为12列网格，宽度在1120-1440中间 */
.site-wrap{max-width:var(--max-width);margin:0 auto;padding:0 8px}
.layout-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  grid-auto-rows:auto;
  gap:var(--gap);
  align-items:start;
}

/* 标题：超大但不超过两行并紧接正文 */
.article-title{
  grid-column:1 / span 8;
  margin:0 0 8px 0;
  font-size:28px;
  line-height:1.1;
  font-weight:800;
  color:var(--accent);
  letter-spacing:-0.02em;
  word-break:break-word;
}

/* 文章元信息与摘要在文章列 */
.article-meta{grid-column:1 / span 8;color:var(--muted);font-size:13px;margin-bottom:10px}
.summary{grid-column:1 / span 8;background:var(--surface);border:1px solid var(--border);padding:12px;border-radius:var(--radius);color:var(--accent);margin:0 0 12px;font-size:15px}

/* 文章体（左列） */
.article-body{grid-column:1 / span 8;background:transparent;padding:0}
.article-body .content{background:var(--surface);border:1px solid var(--border);padding:18px;border-radius:var(--radius);color:var(--accent);font-size:15px}
.article-body .content p{margin:0 0 14px}

/* FAQ 在正文之后（desktop two-column via grid inside, mobile single column handled in media query） */
.faq-block{margin-top:18px}
.faq-block .section-title{font-size:16px;margin:0 0 10px;color:var(--accent)}
.faq-inner{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.faq-inner > *{background:var(--surface);border:1px solid var(--border);padding:12px;border-radius:var(--radius);font-size:14px;color:var(--muted)}

/* 右侧信息栏（占4列） */
.right-rail{grid-column:9 / span 4;grid-row:4 / span 6;padding-left:12px}
.aside-panel{background:var(--surface);border:1px solid var(--border);padding:12px;margin-bottom:12px;border-radius:var(--radius)}
.as-related .related-head{background:var(--accent);color:var(--bg);padding:8px;font-weight:700;border-radius:2px;margin:-12px -12px 12px -12px;text-align:left}
.related-list{font-size:14px;color:var(--muted);display:flex;flex-direction:column;gap:8px}
.related-list > *{padding:6px 8px;border-left:3px solid transparent}
.related-list > *:hover{background:#faf6f2}

.meta-panel dl{margin:0;font-size:13px;color:var(--muted)}
.meta-panel dt{font-weight:700;color:var(--accent)}
.meta-panel dd{margin:4px 0 8px 0}

/* 底部 */
.site-foot{max-width:var(--max-width);margin:18px auto;padding:14px 8px;color:var(--muted);font-size:13px}

/* Accessibility & small touches */
.section-title,.panel-title{font-weight:700;color:var(--accent)}
.sep{color:var(--muted);margin:0 8px}

/* 桌面规则（>=1024px）：确保主区12列、文章占8列，侧栏4列；侧栏从摘要下方开始（通过DOM顺序和grid-row定位） */
@media (min-width:1024px){
  body{padding:28px}
  :root{--max-width:1280px}
  .article-title{font-size:36px;grid-column:1 / span 8}
  .article-meta,.summary{grid-column:1 / span 8}
  .article-body{grid-column:1 / span 8}
  .right-rail{grid-column:9 / span 4;align-self:start}
  /* FAQ 双栏保持 */
  .faq-inner{grid-template-columns:1fr 1fr}
  /* 桌面至少有一个大于1024px的结构差异（侧栏在右，仅在桌面成立）已实现 */
}

/* 手机规则（<=767px）：单列；侧栏移到正文、FAQ之后；RELATED 改为横向分隔列表；FAQ 单列 */
@media (max-width:767px){
  :root{--max-width:680px}
  body{padding:12px}
  .layout-grid{display:flex;flex-direction:column;gap:12px}
  .article-title{grid-column:auto;font-size:22px;margin-bottom:6px}
  .article-meta{grid-column:auto}
  .summary{grid-column:auto}
  .article-body{grid-column:auto}
  .article-body .content{padding:14px}
  .faq-inner{grid-template-columns:1fr;gap:10px}
  .right-rail{grid-column:auto;padding:0}
  /* 相关推荐改为横向分隔列表（视觉识别：反向色块标题仍保留） */
  .as-related .related-head{margin:-12px -12px 12px -12px}
  .related-list{flex-direction:row;flex-wrap:nowrap;overflow:auto;gap:8px}
  .related-list > *{white-space:nowrap;border-left:none;border-right:1px solid var(--border);padding:8px 12px;background:transparent}
  /* 禁止横向滚动页面宽度 */
  html,body{overflow-x:hidden}
}

/* 禁止使用渐变、发光或大型圆角：保持干净方角与细边框（按contract） */
/* Forbidden patterns intentionally not used: gradients, glow, heavy shadows */