:root{
  --charcoal:#1e1e1e;
  --warm-gray:#9a9189;
  --muted:#6f6a65;
  --line:#d7d2ce;
  --max-width:1280px; /* Desktop container constrained between 1120-1440 via media queries */
  --gap:20px;
  --text-size:16px;
}

/* 基础重置与排版 */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--charcoal);
  background:#ffffff;
  font-family: Georgia, "Times New Roman", serif; /* 人文杂志感 */
  font-size:var(--text-size);
  line-height:1.65; /* 宽松型文字舒适度，整体密度保持紧凑 */
}
a{color:var(--charcoal);text-decoration:none}

/* 直角与细线为视觉识别：无圆角、细边线 */
.header-inner, .page-wrap, .article-header, .content-area, .site-footer{border:none}

/* Header：左对齐紧凑品牌栏 */
.site-header{
  border-bottom:1px solid var(--line);
  background:transparent;
}
.header-inner{
  max-width:var(--max-width);
  margin:0 auto;
  display:flex;
  align-items:center;
  gap:16px;
  padding:12px 16px;
}
.brand{flex:0 0 auto}
.brand-link{font-weight:700; font-size:1rem; color:var(--charcoal)}
.index-bar{display:flex;gap:12px;margin-left:12px;color:var(--muted);font-family:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial}
.index-bar .nav-item{padding:4px 6px;border-left:1px solid var(--line);}
.index-bar .nav-item:first-child{border-left:none}

/* page container */
.page-wrap{padding:20px 16px}
.ad-slot{border:1px solid var(--line);padding:10px;color:var(--muted);font-family:system-ui;white-space:normal}
.ad-top,.ad-bottom{max-width:var(--max-width);margin:12px auto}

/* Article header: 标题与摘要左右分置（桌面），手机堆叠 */
.article{max-width:var(--max-width);margin:0 auto}
.article-header{padding:18px 0;border-bottom:1px solid var(--line)}
.title-row{display:grid;grid-template-columns:1fr 360px;gap:20px;align-items:start}
.title{margin:0;font-size:1.5rem;line-height:1.12;word-break:break-word}
.summary{margin:0;color:var(--muted);font-family:system-ui;font-size:0.98rem}
.meta{margin-top:10px;color:var(--muted);font-size:0.88rem;display:flex;gap:12px}

/* 内容区：中轴两侧形成主列与注释栏 */
.content-area{display:grid;grid-template-columns:1fr 820px 300px 1fr;gap:24px;padding:22px 0}
.main-column{grid-column:2 / 3}
.side-column{grid-column:3 / 4;border-left:1px solid var(--line);padding-left:18px}

.content{color:var(--charcoal);font-size:1rem}
.content p{margin:0 0 1em}

.ad-middle{margin:18px 0}

/* FAQ 两列（桌面）*/
.faq-block{margin-top:18px}
.section-title{font-family:system-ui;font-weight:600;margin:0 0 12px}
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.faq-grid > *{border-top:1px solid var(--line);padding-top:10px;color:var(--muted);font-family:system-ui}

/* 相关阅读：关键词索引式列表 */
.related-title{font-family:system-ui;font-weight:600;margin:0 0 10px}
.related-list{display:flex;flex-wrap:wrap;gap:8px;font-family:system-ui;color:var(--muted)}
.related-list > *{padding:6px 8px;border-right:1px solid var(--line)}
.related-list > *:last-child{border-right:none}

/* Footer */
.site-footer{border-top:1px solid var(--line);padding:14px 16px;margin-top:24px}
.footer-inner{max-width:var(--max-width);margin:0 auto;color:var(--muted);font-family:system-ui;font-size:0.95rem}

/* 强制桌面与手机两套不同排版（合同要求） */
@media (min-width:1024px){
  /* 确保容器在 1120-1440 之间 */
  :root{--max-width:1200px}

  .header-inner{justify-content:center}
  .brand-link{margin-right:18px}

  /* 标题窄且靠近中轴，摘要在右 */
  .title-row{grid-template-columns:520px 320px;justify-content:center}
  .title{font-size:2rem}
  .summary{font-size:1rem}

  /* 内容布局：主列与注释在中轴两侧，克制对称 */
  .content-area{grid-template-columns:1fr 720px 320px 1fr}
  .main-column{padding-right:12px}
  .side-column{padding-left:18px}

  /* FAQ 两列展示 */
  .faq-grid{grid-template-columns:1fr 1fr}

  /* 关键词索引更像索引条：紧凑横向排列 */
  .related-list{flex-direction:row}
}

@media (max-width:767px){
  :root{--max-width:720px}
  body{font-size:15px}

  /* 手机端：中轴布局解除，全部左对齐单列 */
  .header-inner{justify-content:flex-start;padding:12px}
  .index-bar{margin-left:8px;gap:8px}

  .article{padding:0}
  .article-header{padding:12px 0}

  /* 标题与摘要堆叠并左对齐，避免窄正文 */
  .title-row{display:block}
  .title{font-size:1.25rem;margin-bottom:8px}
  .summary{margin-bottom:10px}

  .meta{flex-direction:column;gap:6px}

  /* 单列内容，侧栏下移成区块 */
  .content-area{display:block}
  .main-column{width:auto}
  .side-column{border-left:none;padding-left:0;margin-top:18px}

  /* FAQ 单列 */
  .faq-grid{display:block}
  .faq-grid > *{padding:10px 0;border-top:1px solid var(--line)}

  /* 关键词索引改为竖向或折行 */
  .related-list{flex-direction:row;flex-wrap:wrap}
  .related-list > *{border-right:1px solid var(--line)}
}

/* Accessibility / readability tweaks */
h1,h2,h3{color:var(--charcoal);font-weight:600}

/* 禁止阴影与圆角（视觉签名与禁用项） */
*{box-shadow:none;border-radius:0}