:root{
  --brand-brown:#3f2e2b; /* 深棕 */
  --cream:#fff7ee;      /* 奶油白 */
  --paper:#ffffff;      /* 正文白 */
  --text:#212121;
  --muted:#6b6b6b;
  --accent:#8b5e4b;
  --gap:18px;
  --max-desktop:1320px;
  --min-desktop:1120px;
  --font-stack:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Microsoft YaHei",sans-serif;
}

/* Reset-ish, compact */
*{box-sizing:border-box}
html,body{height:100%;}
body{
  margin:0;
  font-family:var(--font-stack);
  color:var(--text);
  background:linear-gradient(180deg,var(--cream) 0%,var(--cream) 100%);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent);text-decoration:none}
a:focus{outline:2px solid rgba(139,94,75,0.18);outline-offset:2px}

.page{padding:20px 12px 48px}
.page-inner{max-width:1200px;margin:0 auto}

/* Header: 报刊式通栏报头；左对齐紧凑品牌栏；双层报头第二层极窄 */
.site-header{background:var(--brand-brown);color:var(--paper)}
.header-top{display:flex;align-items:center;justify-content:space-between;padding:10px 18px}
.brand-wrap{display:flex;align-items:center}
.brand{font-weight:700;color:var(--paper);font-size:18px}
.mini-nav a{color:var(--paper);font-size:13px;margin-left:12px}
.header-slim{height:8px;background:#2f2321}

/* Title composition: 标题居中摘要左对齐 */
.title-block{padding:22px 18px 8px;background:transparent}
.article-title{margin:0 0 8px;text-align:center;font-size:28px;line-height:1.15}
.meta-row{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:var(--muted);margin-bottom:10px}
.summary{margin:0;color:var(--text);background:transparent;max-width:100%;text-align:left}

/* Grid: desktop 12 col -> article 8 col, aside 4 col; 使用分隔线而非卡片 */
.content-grid{display:block;margin-top:18px}
.article{background:var(--paper);padding:20px;border-top:1px solid #eee}
.article-body{color:var(--text)}
.faq-section{margin-top:22px;border-top:1px solid #eee;padding-top:14px}
.section-title{font-size:16px;margin:0 0 12px}
.footer-meta{padding:18px;color:var(--muted);font-size:13px;text-align:center}

/* Ad slots non-floating */
.ad{padding:12px;background:transparent;text-align:center;border-top:1px dashed #e9e2db}
.ad-top{margin-bottom:8px}
.ad-middle{margin:16px 0}
.ad-bottom{margin-top:12px}

/* Editorial aside */
.aside{margin-top:18px}
.aside-title{font-size:15px;margin:0 0 10px;color:var(--brand-brown)}
.editorial-list{display:block}
.related-grid{display:block}

/* Accessibility helper */
.sr{position:absolute !important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* Desktop specific layout (>=1024px) */
@media (min-width:1024px){
  .page-inner{max-width:var(--max-desktop);min-width:var(--min-desktop);}
  .title-block{padding:26px 28px}
  .article-title{font-size:34px}

  /* content grid 12-column */
  .content-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:start}
  .article{grid-column:1 / span 8;border-right:1px solid #ece4dd;padding-right:28px}
  .aside{grid-column:9 / span 4;padding-left:28px;border-left:0}

  /* FAQ: 左侧问题右侧答案的桌面表格式 */
  .faq{display:grid;grid-auto-rows:minmax(40px,auto);grid-template-columns:33% 67%;gap:12px 18px}
  .faq .question{font-weight:600;color:var(--brand-brown)}
  .faq .answer{color:var(--text)}

  /* Related pattern: 四列紧凑标题网格 */
  .related-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
  .related-grid a{display:block;padding:6px 8px;background:var(--paper);border:1px solid #f0e9e4;font-size:13px;color:var(--text)}

  /* Visual signature: 页头与正文采用明显不同的对齐基线 */
  .site-header .brand{display:block;text-align:left}
  .article-title{text-align:center}

  /* Tight density */
  .article, .aside{padding-top:18px;padding-bottom:18px}
}

/* Mobile layout (<=767px): 报头压缩为一行，所有栏目单列，保留清晰横线节奏 */
@media (max-width:767px){
  body{font-size:15px}
  .site-header{padding:8px 10px}
  .header-top{padding:8px 10px}
  .brand{font-size:16px}
  .mini-nav{display:none}
  .header-slim{height:6px}

  .page-inner{max-width:100%;padding:0 8px}
  .title-block{text-align:left;padding:12px 6px}
  .article-title{text-align:center;font-size:20px;margin-bottom:8px}
  .meta-row{flex-direction:column;align-items:flex-start}
  .meta-right{margin-top:6px}
  .summary{font-size:14px}

  /* Single column flow */
  .content-grid{display:block}
  .article{border:none;padding:12px;background:var(--paper)}
  .aside{padding:12px 6px}

  /* FAQ stacked */
  .faq{display:block}
  .faq > *{margin-bottom:12px}

  /* Related one column */
  .related-grid{display:grid;grid-template-columns:1fr;gap:8px}
  .related-grid a{padding:10px;border:1px solid #f0e9e4;background:transparent}

  /* Ads inline but non-sticky */
  .ad{font-size:13px}
}

/* Prevent horizontal scroll at min widths via overflow rules */
@media (min-width:1024px){
  html,body{overflow-x:hidden}
}