:root{
  --brand-brown:#4a2f24; /* 深棕 */
  --cream:#fbf6ef; /* 奶油白 */
  --accent:#8b5a3c;
  --muted:#8b7e78;
  --surface:#ffffff;
  --radius:2px;
  --max-desktop-width:1280px; /* 控制在1120-1440区间 */
  --sidebar-width:320px;
  --gap:24px;
  --mobile-tap:44px;
}

/* 全局基础 */
html,body{height:100%;}
body{
  margin:0;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
  background:var(--cream);
  color:#2b2b2b;
  line-height:1.58;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.container{max-width:var(--max-desktop-width);margin:0 auto;padding:20px;}

/* 报刊双层报头 */
.header-top{background:var(--brand-brown);color:var(--surface);}
.header-top-inner{max-width:var(--max-desktop-width);margin:0 auto;padding:6px 20px;font-size:14px;display:flex;justify-content:space-between;align-items:center;}
.header-toolbar{background:var(--surface);border-bottom:1px solid rgba(0,0,0,0.06);}
.toolbar-inner{max-width:var(--max-desktop-width);margin:0 auto;padding:12px 20px;display:flex;align-items:center;justify-content:flex-start;gap:16px;}
.home-link{font-weight:700;color:var(--brand-brown);text-decoration:none;font-size:20px;padding:6px 8px;border-radius:var(--radius);}
.breadcrumb{margin-left:12px;color:var(--muted);font-size:13px;display:flex;align-items:center;gap:6px;}
.breadcrumb .crumb-home{color:var(--accent);font-weight:600}

/* 广告容器（独立，不覆盖内容） */
.ad-container{margin:12px 0;padding:8px;border:1px dashed rgba(0,0,0,0.06);background:transparent;border-radius:var(--radius);color:var(--muted);font-size:13px}
.ad-top-area{margin-left:auto}

/* 网格布局：桌面为双栏非对称 */
.layout-grid{display:grid;grid-template-columns:1fr var(--sidebar-width);gap:var(--gap);align-items:start;padding:24px 20px;}
.article{background:transparent;border-radius:var(--radius);}
.sidebar{min-width:var(--sidebar-width);}

/* 标题与组成：标题居中，摘要左对齐 */
.article-header{padding:6px 0 18px 0;border-bottom:1px solid rgba(0,0,0,0.04);margin-bottom:16px}
.title{font-size:28px;line-height:1.24;text-align:center;margin:6px 0;color:var(--brand-brown);}
.meta-row{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:6px;color:var(--muted);font-size:13px}
.summary{margin:18px 0 8px 0;padding:12px;border-radius:var(--radius);background:var(--surface);border:1px solid rgba(0,0,0,0.04);color:#2c2c2c;text-align:left}

/* 正文：通栏、易读 */
.article-body{padding-top:8px}
.content{background:var(--surface);padding:18px;border-radius:var(--radius);border:1px solid rgba(0,0,0,0.04);color:#2b2b2b;font-size:16px;line-height:1.8}
.content p{margin:0 0 1em 0}

/* FAQ 区：主题色顶部边线问答区 */
.faq{margin-top:18px}
.faq h2{margin:0 0 12px 0;padding-top:8px;border-top:4px solid var(--brand-brown);color:var(--brand-brown);font-size:18px}
.faq-inner{background:var(--surface);padding:12px;border-radius:var(--radius);border:1px solid rgba(0,0,0,0.04)}

/* 相关阅读：编号列表 */
.related{margin-top:18px}
.related h2{font-size:16px;margin:0 0 8px 0;color:var(--brand-brown)}
.related-list{padding-left:22px;margin:0;background:transparent}
.related-list > *{margin:6px 0}

/* 侧边栏面板 */
.side-panel{background:var(--surface);padding:12px;border-radius:var(--radius);border:1px solid rgba(0,0,0,0.04);margin-bottom:16px}
.side-title{margin:0 0 8px 0;color:var(--brand-brown);font-size:15px}
.side-meta dt{font-size:12px;color:var(--muted);}
.side-meta dd{margin:4px 0 8px 0;font-size:13px}
.side-list{padding-left:18px;margin:0}

/* 页脚 */
.site-footer{padding:18px 20px;border-top:1px solid rgba(0,0,0,0.04);background:transparent}
.footer-inner{max-width:var(--max-desktop-width);margin:0 auto;display:flex;justify-content:space-between;color:var(--muted);font-size:13px}

/* 可点击区域在移动端不得小于44px */
.home-link, .toolbar-inner a, .side-title{min-height:var(--mobile-tap);display:inline-flex;align-items:center}

/* 视觉签名：大面积留白与紧凑字阶 */
.header-top-inner, .toolbar-inner, .container{padding-left:20px;padding-right:20px}

/* 禁止玻璃拟态、模糊背景、悬浮卡片等 */
*{box-sizing:border-box}

/* 桌面专属：1024px 及以上 */
@media (min-width:1024px){
  .container{padding:28px}
  .layout-grid{grid-template-columns:1fr var(--sidebar-width);gap:36px}
  .title{font-size:34px}
  .content{font-size:17px}
  /* 桌面端增加只在大屏成立的边注（视觉与结构差异） */
  .sidebar{position:static}
}

/* 手机端：最大宽度767px，独立重排 */
@media (max-width:767px){
  :root{--gap:14px}
  .container{padding:12px}
  .layout-grid{display:block}
  .article{order:0}
  .sidebar{order:1;margin-top:12px}
  .toolbar-inner{padding:10px}
  .header-top-inner{padding:6px 12px}
  .title{font-size:20px;text-align:left}
  .summary{text-align:left;font-size:14px}
  .content{font-size:16px;padding:14px}
  .ad-container{font-size:13px;padding:10px}
  /* 触控目标最小尺寸保证 */
  .home-link, .toolbar-inner a{min-height:var(--mobile-tap);padding:10px}
  /* 侧栏改到正文后，转为折叠块（运行时站点可决定展开） */
  .side-panel{padding:12px}
  /* 横向栏目条允许滚动或精简 */
  .breadcrumb{overflow:auto;white-space:nowrap}
  .breadcrumb::-webkit-scrollbar{display:none}
}

/* 避免横向滚动（320px） */
@media (max-width:320px){
  .container{padding-left:10px;padding-right:10px}
  .content{padding:10px}
}