:root{
  --bg:#faf7f5; /* warm light */
  --ink:#111111; /* 炭黑 */
  --muted:#7b6f66; /* 暖灰 */
  --accent:#2b2b2b;
  --line:rgba(0,0,0,0.04);
  --gap:28px;
  --max-desktop:1400px;
  --min-desktop:1120px;
  --font-sans:system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue","Noto Sans",Arial,"Hiragino Sans GB","Microsoft YaHei",sans-serif;
}

/* 全局重置与排版 */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font-sans);
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.4;
  font-size:16px;
}
.wrap{margin:0 auto;padding:20px;max-width:1200px}

/* 头部 */
.site-header{border-bottom:1px solid rgba(0,0,0,0.06);background:transparent}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand .home-link{font-weight:700;color:var(--accent);text-decoration:none;font-size:1.05rem}
.index-nav{display:flex;gap:18px;align-items:center;font-size:0.95rem;color:var(--muted)}
.index-nav a{color:var(--accent);text-decoration:none}
.index-nav .nav-item{opacity:0.9}
.ad-region{padding-top:12px;padding-bottom:12px}
.ad{background:transparent;color:var(--muted);font-size:0.95rem;padding:10px 12px;border-radius:4px}

/* 页面主格局 */
.page-grid{padding-top:22px;padding-bottom:22px}
.article{background:transparent}
.article-head{margin-bottom:18px}

/* 标题与窄元信息列 */
.title-row{display:flex;align-items:start;gap:18px;justify-content:center}
.title{font-size:1.9rem;margin:0;font-weight:700;line-height:1.05;text-align:center}
.meta-narrow{min-width:180px;max-width:260px;color:var(--muted);font-size:0.92rem;margin-left:12px}
.meta-item{margin-bottom:6px}
.summary{margin-top:12px;color:var(--muted);font-size:1rem}

/* 内容与边注列 */
.content-and-rail{display:flex;gap:32px;align-items:flex-start}
.article-main{flex:1 1 0}
.article-rail{width:300px;flex:0 0 300px}
.rail-box{background:transparent;padding:12px 10px;border-radius:4px}
.rail-heading{font-weight:700;color:var(--accent);margin-bottom:8px}
.rail-index ul{padding-left:18px;margin:0;color:var(--muted)}

/* 正文区：双层基线网格感 */
.content{
  color:var(--ink);
  font-size:1rem;
  line-height:1.65;
  background-image:
    repeating-linear-gradient(transparent, transparent 22px, rgba(0,0,0,0.02) 22px, rgba(0,0,0,0.02) 23px),
    repeating-linear-gradient(transparent, transparent 11px, rgba(0,0,0,0.01) 11px, rgba(0,0,0,0.01) 11.5px);
  background-position: left top;
  background-size:100% 44px,100% 22px;
  padding:8px 6px;
}
.content p{margin:0 0 12px}
.content h2, .section-title{font-size:1.05rem;margin:20px 0 12px;color:var(--accent)}

/* 广告盒在正文之后但独立 */
.ad-middle{margin:18px 0;padding:12px;border-top:1px dashed var(--line);color:var(--muted)}

/* FAQ 两列（桌面） */
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.faq-grid > *{background:transparent;padding:8px;border-top:1px solid var(--line)}

/* 相关阅读 两列摘要 */
.related-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.related-grid > *{padding:8px;border-top:1px solid var(--line);color:var(--muted)}

/* 页脚 */
.site-footer{border-top:1px solid rgba(0,0,0,0.06);padding-top:18px;padding-bottom:18px}
.footer-inner{display:flex;justify-content:space-between;color:var(--muted);font-size:0.92rem}

/* Accessibility helpers */
.title, .section-title{word-break:break-word}

/* 强制桌面规则：1024px 以上建立中心线与非对称主列与注栏，容器在 1120px—1440px 之间 */
@media (min-width:1024px){
  .wrap{padding:32px;}
  /* 容器宽度在大屏下约束为 1120-1400 区间（在非常窄的桌面上仍响应窗口） */
  .wrap{max-width:var(--max-desktop);}
  .page-grid{display:block}

  /* 中心线编辑式布局：主列+注栏，整体围绕中轴展开 */
  .content-and-rail{display:grid;grid-template-columns:1fr 340px;gap:40px;align-items:start}
  .article-rail{position:static}

  /* 标题组合：大标题配窄元信息列，居中但元信息为窄列右侧 */
  .title-row{display:grid;grid-template-columns:1fr 220px;align-items:start;gap:18px}
  .title{font-size:2.3rem;text-align:left}
  .meta-narrow{text-align:right}

  /* FAQ 与相关阅读两列保持 */
  .faq-grid{grid-template-columns:1fr 1fr}
  .related-grid{grid-template-columns:1fr 1fr}

  /* 细节密度控制 */
  body{font-size:17px}
}

/* 手机端规则：全部左对齐单列，侧栏下移为自然区块，FAQ 单列 */
@media (max-width:767px){
  .wrap{padding:14px;max-width:100%}
  .header-inner{flex-direction:row;gap:8px}
  .index-nav{display:flex;gap:10px;font-size:0.9rem}

  /* 标题恢复为左对齐、窄元信息列下移并以行内展示 */
  .title-row{display:block}
  .title{font-size:1.3rem;text-align:left}
  .meta-narrow{display:block;min-width:auto;max-width:none;text-align:left;margin-top:8px}

  /* 单列主流与注栏下移变为顺序区块 */
  .content-and-rail{display:block}
  .article-rail{width:100%;margin-top:18px}
  .rail-box{padding:10px 6px}

  /* 字体与间距调整，避免横向滚动 */
  body{font-size:15px}
  .content{background-image:none;padding:0}

  /* FAQ 单列 */
  .faq-grid{grid-template-columns:1fr;gap:10px}
  .related-grid{grid-template-columns:1fr;gap:10px}

  /* 广告样式移动为块级自然序列 */
  .ad{font-size:0.95rem;padding:10px}
}