/* 设计变量（深棕与奶油白） */
:root{
  --bg:#f8f2e9;          /* 奶油白 */
  --paper:#fffaf4;       /* 内容浅底 */
  --accent:#4b2f26;      /* 深棕 */
  --muted:#6b5b50;
  --rule: #e6ddd4;
  --text:#2b1f1b;
  --max-width:1280px; /* 容器在 1120-1440 之间，采用 1280 作为基准 */
  --gutter:24px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei", sans-serif;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}

/* 全局基础 */
html,body{height:100%;background:var(--bg);color:var(--text);margin:0}
a{color:var(--accent);text-decoration:none}
.container{max-width:var(--max-width);margin:0 auto;padding:20px}
.page{padding-bottom:40px}
.masthead{padding:12px 0;background:transparent}
.masthead-inner{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{font-weight:700;color:var(--accent);font-size:1.125rem}
.site-nav{color:var(--muted);font-size:0.95rem}
.masthead-rule{border:0;border-top:1px solid var(--rule);margin-top:12px}

/* 布局容器和分栏：默认移动优先（单列），桌面再切到网格 */
.layout{display:block}
.article{background:transparent;padding:0;margin:0}
.title{font-size:2.25rem;line-height:1.05;margin:6px 0 8px;color:var(--accent);font-weight:800;letter-spacing:-0.02em}
/* 视觉要求：超大标题但不超过两行（仅视觉限制，DOM 保留完整文本） */
.title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.meta{color:var(--muted);font-size:0.9rem;display:flex;gap:12px;align-items:center;margin-bottom:10px}
.summary{background:var(--paper);padding:12px;border:1px solid var(--rule);margin:0 0 18px}
.content{color:var(--text);line-height:1.8;font-size:1rem}
.content p{margin:0 0 1em}

.section-title{font-size:1rem;color:var(--accent);margin:18px 0 10px}

/* FAQ：横线问答列表 */
.faq-list{border-top:1px solid var(--rule)}
.faq-list > *{padding:12px 0;border-bottom:1px solid var(--rule);margin:0;color:var(--muted)}

/* 相关阅读：底部三列短卡（无阴影） */
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.related-grid > *{background:var(--paper);padding:10px;border:1px solid var(--rule);border-radius:2px}
.related .section-title{margin-top:14px}

/* 侧栏：编辑部信息区（方角、线条、局部底色） */
.aside{margin-top:22px;background:transparent}
.aside-inner{border-left:1px solid var(--rule);padding-left:18px}
.aside-title{color:var(--accent);font-weight:700;margin:0 0 8px}
.meta-list{margin:0;padding:0;font-size:0.95rem;color:var(--muted)}
.meta-list dt{font-weight:600;color:var(--muted);margin-top:8px}
.meta-list dd{margin:4px 0 0 0;padding:0}

/* 广告容器样式（需独立、不可悬浮） */
.ad{padding:10px;margin:18px 0;border:1px dashed var(--rule);background:transparent;color:var(--muted);font-size:0.95rem}

/* 页脚：宽屏索引式排版 */
.site-footer{border-top:1px solid var(--rule);padding:20px 0;background:transparent}
.footer-inner{max-width:var(--max-width);margin:0 auto;display:flex;gap:18px;align-items:flex-start}
.footer-col{flex:1}
.brand-col .footer-brand{font-weight:700;color:var(--accent)}
.index-col .index-title{font-weight:700;color:var(--muted);margin-bottom:6px}
.index-list{color:var(--muted)}
.footer-note{color:var(--muted);font-size:0.95rem}

/* 小屏（手机）规则：单列、报头压缩为一行，侧栏下移，保留横线节奏 */
@media (max-width:767px){
  :root{font-size:15px}
  .container{padding:14px}
  .masthead-inner{flex-direction:row;gap:8px}
  .brand{font-size:1rem}
  .site-nav{display:none}
  .layout{display:block}
  .aside{order:3;margin-top:18px;padding-top:12px;border-top:1px solid var(--rule)}
  .aside-inner{border-left:0;padding-left:0}
  .article{order:1}
  .title{font-size:1.4rem}
  .summary{font-size:0.98rem}
  .content{font-size:1rem}
  .related-grid{grid-template-columns:1fr;gap:10px}
  .related-grid > *{padding:10px}
  .footer-inner{flex-direction:column;gap:10px}
  /* 确保 320px 下不横向滚动 */
  body{word-break:break-word;-webkit-text-size-adjust:100%}
}

/* 桌面（1024px 以上）规则：报刊式通栏报头；正文 8 列 + 4 列编辑推荐，使用分隔线 */
@media (min-width:1024px){
  .container{padding:28px}
  .masthead-inner{padding:6px 0}
  .site-nav{display:block}
  .layout{display:grid;grid-template-columns:repeat(12,1fr);gap:32px;align-items:start}
  .article{grid-column:1 / span 8}
  .aside{grid-column:9 / span 4}
  .aside-inner{padding-left:24px}
  .title{font-size:2.75rem}
  .related-grid{grid-template-columns:repeat(3,1fr)}
  .footer-inner{display:flex}
}

/* 可读性与密度控制 */
.summary, .content, .meta-list, .faq-list > *{line-height:1.6}

/* 禁止大圆角与复杂效果，保持方角与克制配色 */
*{box-sizing:border-box}