/* 设计整体说明：砖红与砂岩白配色，轻纸张底色、模块无容器，系统字体，使用 Grid/Flex，避免深色科技风格。 */
:root{
  --brick:#8b3a2c; /* 砖红 */
  --sand:#f5efe6;  /* 砂岩白 */
  --muted:#6b6b6b;
  --text:#222220;
  --max-width:1280px; /* 桌面容器在 1120-1440 区间内，取中位 */
  --gap:24px;
  --rhythm:1.65;
  --serif: Georgia, "Times New Roman", serif;
  --ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--sand);
  color:var(--text);
  font-family:var(--ui);
  line-height:var(--rhythm);
  -webkit-font-smoothing:antialiased;
}
a{color:var(--brick);text-decoration:none}

/* Header: 报刊双层报头 */
.site-header{padding:18px 16px 8px 16px;border-bottom:1px solid rgba(0,0,0,0.04);background:linear-gradient(180deg, rgba(0,0,0,0.02), transparent)}
.masthead{display:flex;justify-content:space-between;align-items:center;gap:12px}
.masthead .brand a{font-weight:700;color:var(--brick);font-family:var(--serif);font-size:1.15rem}
.masthead .meta-inline{color:var(--muted);font-size:0.9rem}
.index-bar{margin-top:10px}
.index-bar ul{display:flex;gap:14px;list-style:none;padding:0;margin:0;color:var(--muted);font-size:0.95rem}
.index-bar li{padding:4px 0}

/* 广告槽外观，独立容器，不悬浮 */
.ad-slot{max-width:100%;padding:12px 16px;margin:12px auto;color:var(--muted);font-size:0.95rem;border-top:1px dashed rgba(0,0,0,0.04);border-bottom:1px dashed rgba(0,0,0,0.04);background:transparent}

/* 主区容器 */
.page{padding:18px 0}
.container{margin:0 auto;padding:0 20px;display:grid;gap:var(--gap)}

/* 左侧窄轨与文章区域的默认（移动优先） */
.rail{order:2}
.article{order:1}

.rail .rail-brand a{font-weight:600;color:var(--brick);font-family:var(--serif)}
.breadcrumb{color:var(--muted);font-size:0.88rem;margin:6px 0}
.rail-meta{color:var(--muted);font-size:0.9rem;margin:8px 0}
.rail-meta .meta-item{margin:6px 0}

.related-rail h3{margin:12px 0 8px 0;font-size:0.98rem;color:var(--brick)}
.related-list{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.related-list > *{font-size:0.95rem;color:var(--muted)}

/* Article header：大标题配窄元信息列 */
.article-header{display:grid;grid-template-columns:1fr;gap:12px;margin-bottom:8px}
.title{margin:0;padding:0;font-family:var(--serif);font-size:1.9rem;line-height:1.08;color:var(--text)}
.summary{margin:8px 0 0 0;color:var(--muted);font-size:1rem}
.small-meta{font-size:0.9rem;color:var(--muted)}

.article-body{margin-top:18px;font-size:1rem;color:var(--text)}
.article-body p{margin:0 0 1rem 0}

/* FAQ 列表编号式 */
.faq{margin-top:22px;border-top:1px solid rgba(0,0,0,0.03);padding-top:14px}
.faq h2{margin:0 0 10px 0;font-size:1.05rem;color:var(--brick)}
.faq-list{padding-left:18px;color:var(--muted)}
.faq-list > *{margin:0 0 12px 0}

/* Footer：宽屏索引式排版 */
.site-footer{margin-top:34px;padding:22px 16px;background:transparent;border-top:1px solid rgba(0,0,0,0.04)}
.footer-index{display:flex;gap:40px;flex-wrap:wrap}
.footer-index .col{min-width:140px}
.footer-index h4{margin:0 0 8px 0;color:var(--brick);font-size:0.98rem}
.footer-index ul{list-style:none;padding:0;margin:0;color:var(--muted)}
.footer-note{margin-top:18px;color:var(--muted);font-size:0.92rem}

/* 桌面布局（min-width:1024px）——严格实现 12 栏网格：左 4 列，右 8 列 */
@media (min-width:1024px){
  .container{max-width:var(--max-width);display:grid;grid-template-columns:repeat(12,1fr);gap:28px}
  .rail{grid-column:1 / span 4;order:1;padding-right:8px;border-right:1px solid rgba(0,0,0,0.03)}
  .article{grid-column:5 / span 8;order:2;padding-left:24px}

  /* Title composition：元信息窄列左侧，标题在右侧大区 */
  .article-header{display:grid;grid-template-columns:120px 1fr 120px;align-items:start}
  .meta-pre{grid-column:1}
  .title-wrap{grid-column:2}
  .meta-post{grid-column:3;text-align:right}

  .title{font-size:2.25rem}
  .article-body{font-size:1.03rem}

  /* 左侧相关阅读采用两列摘要列表样式 */
  .related-list{display:grid;grid-template-columns:1fr;gap:10px}
  .related-list > *{display:block;padding:6px 0;border-bottom:1px dotted rgba(0,0,0,0.03)}
}

/* 手机端规则（max-width:767px）——左侧信息拆为标题前后的紧凑区块，正文为第一主体 */
@media (max-width:767px){
  .container{display:block;padding:0 12px}
  .rail{order:1;padding:0;margin-bottom:8px;border-bottom:1px solid rgba(0,0,0,0.04)}
  .article{order:2;padding:0}

  /* 在手机上将元信息分为标题前/后：meta-pre 上置，meta-post 下置 */
  .article-header{display:flex;flex-direction:column;gap:8px}
  .meta-pre{order:1}
  .title-wrap{order:2}
  .meta-post{order:3}

  .title{font-size:1.35rem}
  .summary{font-size:0.98rem}

  /* 相关阅读在上方变为单列简介 */
  .related-list{grid-template-columns:1fr}
  .related-list > *{padding:8px 0;border-bottom:1px dashed rgba(0,0,0,0.04)}

  /* 防止横向滚动 */
  body,html{overflow-x:hidden}
}

/* 中等屏幕（768px - 1023px）保持舒适阅读节奏 */
@media (min-width:768px) and (max-width:1023px){
  .container{max-width:960px;margin:0 auto}
  .rail{border-right:1px solid rgba(0,0,0,0.03);padding-right:12px}
  .article{padding-left:12px}
  .article-header{grid-template-columns:1fr;gap:10px}
}

/* 视觉约束：避免深色科技仪表盘风格（forbidden_pattern） */
/* 无阴影、大圆角、玻璃拟态或强烈滤镜 */

/* 可访问性提示：链接与按钮保持足够对比 */
a:focus{outline:2px solid rgba(139,58,44,0.18);outline-offset:2px}