:root{
  --bg-ivory: #f7f4ef;
  --deep-purple-gray: #2e2834; /* 主色调 */
  --text: #222;
  --muted: #6b6b6b;
  --accent: #6a5f7a;
  --gap: 20px;
  --content-width-desktop: 1200px; /* 在允许的桌面区间内 */
  --rail-width: 140px;
  --baseline: 20px; /* 基线单位 */
}
/* 全局重置与排版 */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  color:var(--text);
  background:var(--bg-ivory);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
  font-size:16px;
}
.page-root{display:flex;min-height:100vh}
/* 左侧纵向刊头 */
.site-rail{
  width:var(--rail-width);
  background:var(--deep-purple-gray);
  color: #fff;
  padding:24px 12px;
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:flex-start;
}
.site-rail .brand{color:#fff;text-decoration:none;font-weight:700;font-size:15px}
.site-rail .rail-nav{display:flex;flex-direction:column;gap:6px;font-size:13px;opacity:0.9}
.site-rail .nav-item{display:inline-block}
.site-rail .rail-note{font-size:12px;opacity:0.8;margin-top:auto}

/* 内容区 */
.content-wrap{flex:1;display:flex;flex-direction:column}
.page-header{background:var(--deep-purple-gray);color:#fff;padding:10px 20px}
.header-top{display:flex;align-items:center;gap:20px}
.header-top .kicker{font-weight:600}
.ad{background:#fff;color:var(--muted);padding:8px;border-radius:2px;border:1px solid rgba(0,0,0,0.06);font-size:13px}
.ad-top{background:#efecef;color:var(--muted)}

/* 主容器：在桌面宽屏下限定宽度 */
.container{
  margin:24px auto;
  width:calc(100% - 40px);
  max-width:var(--content-width-desktop);
  background:transparent;
}

/* 标题带：跨栏，标题居中，摘要左对齐 */
.title-band{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:8px}
.page-title{font-family: Georgia, 'Times New Roman', 'Songti SC', serif; font-size:28px;margin:6px 0;color:var(--deep-purple-gray);line-height:1.15}
.meta-row{font-size:13px;color:var(--muted);display:flex;gap:12px}

.summary-band{border-top:2px solid rgba(0,0,0,0.03);padding:12px 0;margin-bottom:18px}
.summary{max-width:960px;margin:0 auto;text-align:left;font-size:15px;color:var(--muted)}

/* 编辑部堆叠结构 */
.editorial-grid{display:grid;grid-template-columns:1fr;gap:18px}
.article-main{background:#fff;padding:20px;border:1px solid rgba(0,0,0,0.04)}
.article-body{color:var(--text);font-size:16px;line-height:1.65;padding:0;/* 正文区视觉签名：双层基线网格感 */
  background-image:
    repeating-linear-gradient(to bottom, rgba(0,0,0,0.02) 0px, rgba(0,0,0,0.02) 1px, transparent 1px, transparent calc(var(--baseline)/2 - 1px)),
    repeating-linear-gradient(to bottom, rgba(0,0,0,0.01) 0px, rgba(0,0,0,0.01) 1px, transparent 1px, transparent var(--baseline));
  background-position: left top;
  background-size: 100% var(--baseline);
}

.side-note{background:#fff;padding:16px;border:1px solid rgba(0,0,0,0.04);display:flex;flex-direction:column;gap:12px}
.info-block{padding:10px;border:1px solid rgba(0,0,0,0.04);background:#fff}
.block-title{font-size:13px;margin:0 0 6px 0;color:var(--accent)}
.keywords,.brief{font-size:14px;color:var(--muted)}

/* 底部信息带：FAQ 与 相关阅读 */
.info-bands{display:flex;flex-direction:column;gap:18px;margin-top:22px}
.section-title{font-size:16px;margin:0 0 10px 0;color:var(--deep-purple-gray)}
.faq-list{background:#fff;padding:12px;border:1px solid rgba(0,0,0,0.04)}
.related-list{background:#fff;padding:12px;border:1px solid rgba(0,0,0,0.04)}

.page-footer{padding:18px 24px;font-size:13px;color:var(--muted)}

/* --- 桌面规则：1024px 以上需要非对称网格与 10/2 边注，容器在 1120-1440 范围内生效差异 --- */
@media (min-width: 1024px){
  :root{--baseline:22px}
  .container{width:var(--content-width-desktop);margin-top:32px}
  .title-band{align-items:center}
  .page-title{font-size:36px}
  /* 编辑部网格 10/2（比例） => 使用 12 列网格：10fr / 2fr */
  .editorial-grid{grid-template-columns:10fr 2fr;align-items:start;gap:20px}
  /* 使标题跨栏视觉更突出（跨栏效果仅在桌面） */
  .title-band,.summary-band{grid-column:1 / -1}
  .article-main{order:1}
  .side-note{order:2}
  /* FAQ 与相关阅读不同宽度并错位排列：related 更窄并右移 */
  .info-bands{display:grid;grid-template-columns:2fr 1fr;grid-auto-rows:minmax(120px,auto);gap:20px}
  .faq-block{grid-column:1 / 2}
  .related-block{grid-column:2 / 3}
  /* FAQ 两列显示 */
  .faq-list{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  /* 相关阅读两列摘要列表（visual pattern） */
  .related-list{display:grid;grid-template-columns:1fr 1fr;gap:12px}
}

/* 宽屏进一步限制容器在 1120-1440 之间（当屏幕宽度允许时） */
@media (min-width: 1200px){
  .container{width:1200px}
}
@media (min-width: 1440px){
  .container{max-width:1440px}
}

/* --- 手机规则：最大宽度 767px，单列顺序，取消错位与跨栏 --- */
@media (max-width: 767px){
  body{font-size:15px}
  .page-root{flex-direction:column}
  .site-rail{width:100%;display:flex;flex-direction:row;align-items:center;gap:12px;padding:10px}
  .site-rail .rail-nav{display:none}
  .content-wrap{padding:0}
  .container{width:100%;margin:12px;padding:0 12px}
  .page-title{font-size:20px;text-align:center}
  .summary{font-size:14px}
  .editorial-grid{grid-template-columns:1fr}
  .side-note{order:2}
  .article-main{order:1}
  .info-bands{display:block}
  /* FAQ 单列 */
  .faq-list{display:block}
  .related-list{display:block}
  /* 移除正文背景网格密度（保持轻微视觉） */
  .article-body{background-image:repeating-linear-gradient(to bottom, rgba(0,0,0,0.01) 0px, rgba(0,0,0,0.01) 1px, transparent 1px, transparent calc(var(--baseline) - 1px));background-size:100% var(--baseline)}
  /* 广告不悬浮，按文档流排列 */
  .ad{width:100%}
}

/* 可访问性与小细节 */
.page-title{margin:8px 0}
.section-title{margin-bottom:8px}
a{color:inherit}