/* 样式表：符合编辑专栏型、非对称杂志网格与移动重排要求 */
:root{
  --bg:#FFFDF8; /* 象牙白 */
  --surface: #F7F5F8;
  --text:#27232E; /* 深紫灰 */
  --muted:#6F6A72;
  --accent:#4B3E63; /* 较深紫灰 */
  --accent-soft:#6A5E7E;
  --related-bg:#27232E; /* 相关推荐反向色块 */
  --related-fore:#FFFDF8;
  --max-width:1320px; /* 在1120-1440之间选取 */
  --gap:28px;
  --radius:6px;
}

/* 基础排版 */
*{box-sizing:border-box}
html,body{height:100%;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans CJK SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;margin:0}
.container{max-width:var(--max-width);margin:24px auto;padding:0 20px}
.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* Header：左对齐紧凑品牌栏 + 栏目索引条 */
.site-header{background:transparent;padding:12px 0}
.brand-wrap{display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{font-weight:700;color:var(--accent);text-decoration:none;font-size:18px}
.index-bar ul{display:flex;gap:14px;list-style:none;margin:0;padding:0}
.index-bar li span{font-size:13px;color:var(--muted)}

/* 广告容器（独立且不覆盖正文） */
.ad-slot{max-width:var(--max-width);margin:10px auto;padding:8px 12px;color:var(--muted);font-size:13px}
.ad-top{margin-top:6px}
.ad-middle{margin:18px auto}
.ad-bottom{margin:22px auto}

/* 布局网格（桌面为非对称 7/5） */
.layout-grid{display:grid;grid-template-columns:1fr;grid-template-areas:"main";gap:var(--gap)}
.article{background:transparent}
.side-column{display:none}

/* 标题排版：压左并用粗细横线构图 */
.article-header h1{font-size:28px;margin:6px 0;color:var(--text);line-height:1.18;font-weight:800}
.title-rule{display:flex;align-items:center;gap:8px;margin-top:10px}
.rule-strong{display:block;height:6px;width:56px;background:var(--accent);border-radius:2px}
.rule-thin{display:block;height:2px;flex:1;background:var(--accent-soft)}
.meta-line{display:flex;flex-wrap:wrap;gap:12px;color:var(--muted);font-size:13px;margin-top:12px}
.summary{margin-top:14px;color:var(--muted);line-height:1.6}

.article-body{margin-top:18px;color:var(--text);line-height:1.8}
.article-body > *{max-width:100%}

/* FAQ：两列桌面、单列手机 */
.faq-grid{display:grid;grid-template-columns:1fr;gap:12px;margin-top:20px;color:var(--text)}
.faq h3,.faq p{margin:0}

/* 相关阅读：反向色块标题栏（视觉签名） */
.related{margin-top:20px}
.related-head{background:var(--related-bg);color:var(--related-fore);display:inline-block;padding:8px 12px;border-radius:4px;font-weight:700}
.related-list{margin-top:12px;color:var(--muted)}
.related-list a{color:var(--accent);text-decoration:none}

/* 侧栏小块 */
.side-column{padding-left:18px}
.side-info{background:transparent;padding:12px 0}
.side-meta-row{color:var(--muted);font-size:13px;margin-bottom:8px}
.side-faq-visual{margin-top:20px;color:var(--muted);font-size:13px}
.side-faq-title{font-weight:700;color:var(--accent)}

/* Footer */
.site-footer{padding:20px 0;color:var(--muted);font-size:13px;text-align:center}

/* 手机端特殊规则：宽度≤767px 恢复自然文档顺序 */
@media (max-width:767px){
  .container{padding:0 14px}
  .layout-grid{grid-template-columns:1fr}
  .title-rule .rule-strong{width:46px;height:5px}
  .article-header h1{font-size:20px}
  .meta-line{font-size:12px;gap:8px}
  .summary{font-size:14px}
  .article-body{font-size:15px}
  .side-column{display:none}
  .faq-grid{grid-template-columns:1fr}
  .related-head{display:block}
  /* 确保在320px不出现横向滚动 */
  body,html{overflow-x:hidden}
}

/* 桌面端：1024px 及以上，非对称杂志网格，标题区 7/5 分栏，正文主列偏左，右侧元信息和 FAQ 错位排列 */
@media (min-width:1024px){
  .container{padding:0}
  .layout-grid{grid-template-columns:7fr 5fr;align-items:start;gap:36px}
  .layout-grid{grid-auto-rows:min-content}
  .article{grid-column:1/2}
  .side-column{grid-column:2/3;display:block}

  /* 标题区 7/5 分栏实现 */
  .title-grid{display:grid;grid-template-columns:7fr 5fr;align-items:start;gap:20px}
  .title-block{grid-column:1/2}
  .title-side{grid-column:2/3}

  /* 正文与侧栏的错位：侧栏内容从标题下移一定距离，FAQ 在右侧视觉上错位 */
  .side-column{padding-left:12px;padding-top:40px}
  .faq{grid-column:1/2}

  /* 把 FAQ 在视觉上放到右侧：使用 transform 与 margin 做轻微错位，保留文档流顺序 */
  .faq{position:relative}
  .faq::before{content:"";display:block;height:0}
  .faq{margin-top:24px}
  .faq-grid{grid-template-columns:1fr 1fr;gap:14px}

  /* 相关阅读视觉签名更醒目 */
  .related-head{padding:10px 14px}
  .related-list{font-size:14px}
}

/* 可访问性与细节 */
a{color:var(--accent);}
button{font-family:inherit}