/* 样式变量与基线 */
:root{
  --accent: #A63A2A; /* 砖红 */
  --surface: #F5EDE6; /* 砂岩白 */
  --muted: #6b6b6b;
  --text: #1a1a1a;
  --max-width: 1280px; /* 在1120-1440区间内取中值 */
  --gap: 20px;
  --radius: 4px; /* 方形信息块，轻微圆角 */
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",Arial,Helvetica,sans-serif;color:var(--text);background:linear-gradient(#fff,#fff)}
a{color:inherit;text-decoration:none}
.topbar{background:var(--accent);color:#fff}
.topbar-inner{max-width:var(--max-width);margin:0 auto;display:flex;align-items:flex-start;justify-content:space-between;padding:12px 18px}
.masthead{display:flex;align-items:flex-start;gap:18px}
.site{font-weight:700;padding:6px 10px;background:transparent;color:#fff;border:1px solid rgba(255,255,255,0.08)}
/* 左侧纵向刊头：在报头内部以纵向栏目列表呈现 */
.nav-vertical ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.nav-vertical li{font-size:13px;padding:4px 6px;background:transparent;border-left:3px solid rgba(255,255,255,0.06)}
.header-tools{display:flex;align-items:center}
.search-placeholder{font-size:13px;color:rgba(255,255,255,0.85)}
.ad{max-width:var(--max-width);margin:14px auto;padding:10px;border:1px dashed rgba(0,0,0,0.06);background:transparent;color:var(--muted)}
.container{max-width:var(--max-width);margin:0 auto;padding:18px;display:block}
/* 标题行：大标题配窄元信息列 */
.title-row{padding:6px 0}
.title-wrap{display:flex;align-items:flex-start;gap:18px}
.article-title{font-family: Georgia, 'Times New Roman', '宋体', serif; font-size:28px;line-height:1.08;margin:0;color:var(--text);letter-spacing:-0.02em}
.article-title::first-letter{color:var(--accent)} /* 视觉识别：标题首字首字着色 */
.meta-narrow{margin-left:auto;text-align:right;font-size:13px;color:var(--muted);min-width:120px}
.summary-row{background:var(--surface);padding:12px;border-radius:4px;margin:12px 0}
.summary{margin:0;color:var(--text)}
.content-grid{display:block}
.article{background:#fff;padding:18px;border:1px solid rgba(0,0,0,0.04);border-radius:4px}
.content-body{color:var(--text);line-height:1.8}
.faq{border-top:4px solid var(--accent);padding-top:12px;margin-top:18px}
.faq h2{margin:0 0 10px 0;font-size:16px}
.related{margin-top:18px}
.related h2{font-size:16px;margin:0 0 10px}
.related-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.related-grid > *{background:transparent;padding:6px;font-size:14px;border-bottom:1px solid rgba(0,0,0,0.04)}
.sidebar{margin-top:18px}
.info-block{background:rgba(0,0,0,0.02);padding:12px;border-radius:4px;margin-bottom:12px}
.info-title{margin:0 0 8px 0;font-size:13px;color:var(--muted)}
.info-body{font-size:14px;color:var(--text)}
.site-footer{background:#fafafa;border-top:1px solid rgba(0,0,0,0.04);padding:14px 0;margin-top:18px}
.footer-inner{max-width:var(--max-width);margin:0 auto;padding:0 18px;color:var(--muted);font-size:13px}
/* 手机规则：单列；侧栏移到正文、FAQ之后，相关推荐改为横向分隔列表 */
@media (max-width:767px){
  .topbar-inner{padding:10px}
  .nav-vertical ul{flex-direction:row}
  .nav-vertical li{font-size:12px;padding:6px 8px;border-left:none;border-bottom:2px solid rgba(255,255,255,0.06)}
  .container{padding:12px}
  .title-wrap{flex-direction:column;align-items:stretch}
  .article-title{font-size:20px}
  .meta-narrow{text-align:left;margin-top:8px}
  .summary-row{margin:8px 0}
  .content-grid{display:block}
  /* 单列流式展示：文章先行，侧栏移至正文、FAQ之后 */
  .article{order:0}
  .sidebar{order:2;margin-top:18px}
  .ad-top,.ad-middle,.ad-bottom{margin:10px 0}
  .related-grid{display:flex;gap:10px;overflow:auto;padding-bottom:6px}
  .related-grid > *{min-width:64%;flex:0 0 auto;border-bottom:none;background:transparent}
}
/* 桌面规则：主区12列网格，文章占8列，右侧信息栏占4列；标题横跨文章列，侧栏从摘要下方开始。 */
@media (min-width:1024px){
  .container{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:auto;gap:var(--gap);align-items:start;padding:30px}
  .title-row{grid-column:1 / 13;padding:0}
  .summary-row{grid-column:1 / 13}
  .content-grid{grid-column:1 / 13;display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:auto 1fr;gap:24px}
  /* 文章主体在第1-8列，侧栏在9-12列；侧栏从摘要下方开始 */
  .article{grid-column:1 / 9;grid-row:2 / 3;padding:22px}
  .sidebar{grid-column:9 / 13;grid-row:2 / 3}
  /* 相关列表四列紧凑标题网格 */
  .related-grid{grid-template-columns:repeat(4,1fr);gap:12px}
  .related-grid > *{padding:8px;font-size:13px;border:1px solid rgba(0,0,0,0.04);border-radius:2px}
  .article-title{font-size:34px}
}
