:root{
  --bg-cream:#fff8ef; /* 奶油白 */
  --deep-brown:#3f2a23; /* 深棕 */
  --accent:#b45a2a; /* 克制强调色 */
  --text:#222222;
  --muted:#6b6160;
  --max-width:1280px; /* 桌面容器在1120-1440之间，取中间1280 */
  --gap:20px;
  --dense-gap:12px;
  --radius:0; /* 方形信息块，禁止圆角 */
  --header-height:92px;
  --article-line-height:1.65;
}

/* 基础重置与排版 */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg-cream);
  color:var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "PingFang SC", "Hiragino Sans GB";
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:var(--article-line-height);
  font-size:16px;
}

a{color:inherit; text-decoration:none}

/* Header: 报刊双层报头，深色 */
.site-header{
  background:var(--deep-brown);
  color:var(--bg-cream);
  padding:12px 16px;
}
.header-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.brand .home-link{
  font-weight:700;
  font-size:1.05rem;
  color:var(--bg-cream);
}
.top-actions .ad-top{font-size:0.9rem; color:var(--bg-cream)}

.nav-index{
  display:flex;
  gap:18px;
  align-items:center;
  padding:10px 0 0 0;
  font-size:0.95rem;
}
.nav-index .nav-item{opacity:0.95}
.nav-index a.nav-home{font-weight:600}

/* 页面容器：满足桌面宽度约束 */
.page-container{
  max-width:var(--max-width);
  margin:20px auto;
  padding:0 18px 48px;
}

/* 分割式标题：左右各半（桌面） */
.split-headline{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--gap);
  align-items:start;
  margin-bottom:18px;
}
.head-left{order:1}
.head-right{order:2}

.article-title{
  margin:0 0 8px 0;
  font-size:1.65rem;
  font-weight:800;
  line-height:1.12;
  text-align:left; /* 标题压左 */
  position:relative;
  padding-left:2px;
}
/* 标题构图：细粗横线 --- 使用伪元素在标题左侧和底部营造横线构图 */
.article-title::before{
  content:"";
  position:absolute;
  left:0; right:0; top:-8px;
  height:2px; background:var(--muted); opacity:0.12;
}
.article-title::after{
  content:"";
  position:absolute;
  left:0; right:30%; bottom:-10px;
  height:4px; background:var(--muted); opacity:0.14;
}
/* 视觉识别：标题首字母或首字使用强调色 */
.article-title::first-letter{ color:var(--accent); }

.meta{font-size:0.88rem; color:var(--muted); margin-top:6px; display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.keywords{font-size:0.86rem; color:var(--muted)}

.head-right .summary{
  background:#ffffff; /* 正文纯白的方形信息块感觉 */
  color:var(--text);
  padding:14px;
  border:1px solid rgba(0,0,0,0.04);
  border-radius:var(--radius);
  box-shadow:none;
  font-size:0.98rem;
  line-height:1.5;
}

/* 内容区：桌面7/5两栏 */
.content-area{margin-top:6px}
.content-grid{display:block}
.main-article{background:#ffffff; padding:18px; border:1px solid rgba(0,0,0,0.04); border-radius:var(--radius)}
.article-surface{background:#ffffff}
.article-surface .content{color:var(--text); font-size:1rem}

.ad-slot{background:transparent; color:var(--muted); padding:8px; border-radius:var(--radius); border:1px dashed rgba(0,0,0,0.06); margin-top:14px}
.ad-slot *{color:inherit}

.side-rail{margin-top:0}
.side-title{font-size:0.95rem; color:var(--muted); margin:0 0 10px 0}

.faq{background:#fff; padding:12px; display:block; border:1px solid rgba(0,0,0,0.04);}
.faq > *{margin:8px 0}

.related{background:#fff; padding:12px; border:1px solid rgba(0,0,0,0.04); margin-top:14px}
.related-title{font-size:0.95rem; margin:0 0 10px 0}
.related-list{display:block}

.site-footer{padding:18px; text-align:center; color:var(--muted); font-size:0.92rem}

/* 密集感：减小段落间距 */
.main-article p{margin:10px 0}

/* 桌面规则：至少在1024px以上成立的结构差异（7/5两栏、标题左右各半已体现） */
@media (min-width:1024px){
  .page-container{padding:0 24px 56px}
  .split-headline{grid-template-columns:1fr 1fr; align-items:start}

  .content-grid{
    display:grid;
    grid-template-columns: 7fr 5fr; /* 7/5 两栏 */
    gap:28px;
    align-items:start;
    margin-top:12px;
  }
  .main-article{order:1}
  .side-rail{order:2}

  /* FAQ 两列 */
  .faq{display:grid; grid-template-columns:1fr 1fr; gap:12px}

  /* 相关阅读两列摘要列表视觉承载 */
  .related-list{display:grid; grid-template-columns:1fr 1fr; gap:12px}

  /* 更强调页头深色风格，去掉圆角 */
  .head-right .summary, .main-article, .faq, .related{border-radius:0}
}

/* 手机规则：320-767px 最大为767 */
@media (max-width:767px){
  :root{--gap:12px; --max-width:100%;}
  .page-container{margin:0; padding:10px}
  .site-header{padding:10px}
  .nav-index{gap:12px; overflow:auto}

  /* 标题与摘要上下排列（mobile_contract） */
  .split-headline{display:block;}
  .head-left, .head-right{padding:6px 0}
  .article-title{font-size:1.2rem}
  .article-title::before, .article-title::after{display:none}

  /* 内容单栏流式 */
  .content-grid{display:block}
  .main-article{padding:12px}
  .side-rail{margin-top:14px}

  /* FAQ 手机端单列（faq_pattern） */
  .faq{display:block}
  .faq > *{margin:8px 0}

  /* 相关阅读改成一列或压缩的两列视觉上转为单列 */
  .related-list{display:block}

  /* 广告位置不固定悬浮，遵守不可覆盖正文 */
  .ad-slot{font-size:0.92rem}

  /* 防止横向滚动 */
  img, iframe, video{max-width:100%; height:auto}
  body{word-break:break-word}
}

/* 中等平板区间确保不出现大卡片样式 */
@media (min-width:768px) and (max-width:1023px){
  .split-headline{grid-template-columns:1fr;}
  .content-grid{display:block}
  .faq{display:grid; grid-template-columns:1fr 1fr; gap:10px}
}

/* 可读性微调 */
.article-title, .head-right .summary, .main-article{box-shadow:none}