/* ==========================
   简讯资讯指南 - 通用内容详情页样式
   蓝图: offset-sheet
   视觉种子: 5bfd52f71ba4815b
   系统字体、双层基线网格、紧凑报刊式标题、朱红强调
   ========================== */
:root{
  --bg:#fafafa;
  --paper:#ffffff;
  --ink:#111111;
  --muted:#6b6b6b;
  --accent:#b22222; /* 朱红 */
  --border:rgba(17,17,17,0.08);
  --radius:2px; /* 2px小圆角 */
  --content-max:1240px;
  --gap:20px;
  --rail-width:300px; /* 右侧窄边注 */
  --baseline-1:24px; /* 主基线 */
  --baseline-2:12px; /* 次基线 */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,"Noto Sans SC",sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
  font-size:16px;
}

/* Masthead: 居中刊头 与 极窄第二行导航 */
.masthead{padding:28px 16px 6px;text-align:center}
.masthead-top .site-name{display:inline-block;color:var(--ink);text-decoration:none;font-weight:700;font-size:20px}
.masthead-nav{margin-top:6px}
.masthead-nav .nav-line{font-size:12px;color:var(--muted);border-top:1px solid var(--border);padding-top:8px;max-width:720px;margin:0 auto}

.page-shell{max-width:1600px;margin:0 auto;padding:12px}

/* 广告容器（独立、不可悬浮） */
.ad{max-width:var(--content-max);margin:18px auto;padding:10px;border:1px dashed var(--border);background:transparent;border-radius:var(--radius);text-align:center;color:var(--muted)}
.ad--top{margin-top:6px}
.ad--bottom{margin-bottom:18px}

/* 布局：桌面使用偏移纸张式双栏（主稿跨大列，右侧窄注） */
.layout{
  display:grid;
  grid-template-columns:1fr; /* mobile default single column */
  gap:var(--gap);
  align-items:start;
  max-width:var(--content-max);
  margin:0 auto;padding:12px;
}

/* 文章纸张样式 —— 无阴影，浅边框，2px圆角 */
.sheet{
  background:var(--paper);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:20px 22px;
  position:relative;
  overflow:visible;
}

/* 眉题/关键字在标题上方（紧凑） */
.eyebrow{font-size:12px;color:var(--accent);font-weight:600;margin-bottom:6px}
.title{font-size:28px;line-height:1.05;margin:0 0 8px 0;font-weight:800;letter-spacing:-0.02em}

/* 标题向左越出正文基线（桌面生效），右侧保留窄边注 */
.title{position:relative}

.meta{display:flex;flex-wrap:wrap;gap:12px;font-size:13px;color:var(--muted);margin-bottom:10px}
.summary{margin:6px 0 14px;color:var(--muted);font-size:15px}

/* 正文区：双层基线网格感，使用重复线性渐变营造基线线条 */
.article-body{padding:6px 2px 0 2px}
.content{
  font-size:16px;color:var(--ink);line-height:var(--baseline-1);
  background-image:
    repeating-linear-gradient(transparent 0 calc(var(--baseline-1) - 1px), rgba(0,0,0,0.02) calc(var(--baseline-1) - 1px) var(--baseline-1)),
    repeating-linear-gradient(transparent 0 calc(var(--baseline-2) - 0.6px), rgba(0,0,0,0.01) calc(var(--baseline-2) - 0.6px) var(--baseline-2));
  background-repeat:repeat;
  background-position:0 0,0 0;
  padding:12px 6px 6px 6px;
}
.content p{margin:0 0 12px}

/* 侧边注（右窄栏） */
.side-rail{display:none}
.rail-block{background:transparent;border:1px solid var(--border);border-radius:var(--radius);padding:12px}
.rail-title{font-weight:700;color:var(--accent);font-size:13px;margin-bottom:8px}
.rail-list{list-style:none;padding:0;margin:0;color:var(--muted)}
.rail-list li{font-size:13px;padding:6px 0}
.mono{font-family:monospace;font-size:13px;color:var(--ink)}

/* FAQ 与 相关阅读 */
.section-title{font-size:16px;margin:22px auto 10px;max-width:var(--content-max);color:var(--ink);font-weight:700}
.faq-block,.related-block{max-width:var(--content-max);margin:0 auto;padding:0 12px 12px}
.faq-wrap{display:block;color:var(--ink)}
.related-list{border-top:1px solid var(--border);padding-top:12px;color:var(--muted)}
.related-list a{color:var(--ink);text-decoration:none}

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

/* =========== 桌面规则 =========== */
@media (min-width:1024px){
  /* 内容容器尽量在 1120px—1440px 范围内（中间值控制，最大化利用宽屏） */
  .page-shell{padding:28px}
  .layout{
    grid-template-columns: 1fr var(--rail-width);
    gap:28px;
    align-items:start;
    max-width:1240px; /* 目标区间内宽度 */
    margin:0 auto;padding:18px;
  }

  .sheet{padding:28px 28px 26px 46px;border-radius:var(--radius)}

  /* 标题越界效果：向左延伸，制造偏移纸张感，但不使用阴影或大圆角 */
  .title{transform:translateX(-36px)}
  .eyebrow{transform:translateX(-36px)}

  /* 右侧注显现 */
  .side-rail{display:block}

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

  /* 相关阅读列表采用带日期的分隔线样式（视觉上由样式控制；具体项由{{related}}填充） */
  .related-list > * + *{border-top:1px solid var(--border);padding-top:12px;margin-top:12px}
}

/* =========== 手机规则 =========== */
@media (max-width:767px){
  body{font-size:15px}
  .masthead{padding:18px 12px}
  .masthead-top .site-name{font-size:18px}
  .masthead-nav .nav-line{font-size:11px}

  .page-shell{padding:8px}

  /* 取消偏移与越界，所有元素回到安全边距内 */
  .title{transform:none;font-size:20px}
  .eyebrow{transform:none}
  .sheet{padding:16px;border-radius:var(--radius)}

  .layout{grid-template-columns:1fr;gap:12px;padding:8px}
  .side-rail{display:none}

  /* FAQ 单列 */
  .faq-wrap{display:block}
  .faq-wrap > *{margin-bottom:12px}

  .related-list{padding:0 6px}

  /* 防止横向滚动 */
  .content, .sheet, .related-block, .faq-block{overflow-wrap:break-word;word-wrap:break-word}
}

/* 无特殊交互，确保文本可读性 */
@media (prefers-reduced-motion:reduce){*{transition:none!important}}