:root{
  --brick:#9b2f2a; /* 砖红 */
  --sand:#f5efe6;  /* 砂岩白 */
  --text:#222;
  --muted:#6b6b6b;
  --paper-width:1280px; /* 桌面容器宽度（在1120-1440区间） */
  --max-content-width:840px;
  --gutter:28px;
  --radius:4px;
  --line:rgba(0,0,0,0.06);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans CJK SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

/* 全局布局 */
html,body{height:100%;}
body{
  margin:0;
  background:linear-gradient(180deg,var(--sand) 0%, #f8f6f2 100%);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.site-header{
  background:var(--brick);
  color:var(--sand);
  padding:10px 0;
}
.toolbar{
  max-width:var(--paper-width);
  margin:0 auto;
  padding:6px var(--gutter);
  display:flex;
  align-items:center;
  gap:12px;
  font-size:14px;
}
.site-name{color:var(--sand);text-decoration:none;font-weight:600;}
.breadcrumb{color:rgba(245,239,230,0.95);font-size:13px;margin-left:auto;opacity:0.95}

.page-bg{padding:22px 0 60px;}
.container{
  display:grid;
  gap:36px;
  align-items:start;
  margin:0 auto;
  padding:0 var(--gutter);
  box-sizing:border-box;
}

/* Article sheet（纸张样式） */
.sheet{
  background:#fff;
  padding:28px 36px 36px 56px;
  box-sizing:border-box;
  border-left:6px solid rgba(155,47,42,0.08); /* 轻微边线，作为纸张感 */
  border-radius:var(--radius);
}
.eyebrow{color:var(--muted);font-size:13px;margin-bottom:6px;letter-spacing:0.4px}
h1{font-size:26px;margin:0 0 8px 0;line-height:1.12;font-weight:700}
.meta{color:var(--muted);font-size:13px;margin-bottom:12px}
.meta .sep{margin:0 8px;color:var(--line)}
.summary{background:transparent;padding:8px 0;margin:0 0 18px 0;color:var(--muted);font-size:15px}

.content{font-size:16px;line-height:1.65;color:var(--text);max-width:var(--max-content-width)}
.content p{margin:0 0 14px}

/* 视觉识别：正文首段首字轻量强调（不改写内容） */
.content > :first-child:first-letter{
  color:var(--brick);
  font-weight:700;
  float:left;
  font-size:1.6em;
  line-height:1;
  padding-right:8px;
}

/* FAQ 栏目：横线问答列表 (样式化接收 {{faq}} 中的问答) */
.faq{margin-top:22px}
.faq h2{font-size:16px;margin:0 0 10px 0;color:var(--text)}
.faq-list{border-top:1px solid var(--line);}
.faq-list > *{padding:12px 0;border-bottom:1px solid var(--line)}
.faq-list > *:first-child{border-top:none}
.faq-list .question{font-weight:600;color:var(--text);margin-bottom:6px}
.faq-list .answer{color:var(--muted);font-size:15px}

/* 侧边栏 */
.side{padding-top:8px}
.related h3{font-size:15px;margin:0 0 10px 0}
.related-grid{display:grid;gap:12px}
.related-grid > *{padding:10px;border:1px solid var(--line);background:#fff;border-radius:2px}

/* 广告容器：独立，不覆盖正文 */
.ad{max-width:var(--paper-width);margin:16px auto;color:var(--muted);font-size:14px}
.ad-top, .ad-middle, .ad-bottom{padding:10px;border:1px dashed rgba(0,0,0,0.04);background:transparent}

.site-footer{max-width:var(--paper-width);margin:30px auto;padding:16px var(--gutter);color:var(--muted);font-size:13px}

/* 桌面规则：1024px 以上采用偏移纸张与窄边注 */
@media (min-width:1024px){
  .container{grid-template-columns: 1fr 320px;max-width:var(--paper-width)}
  .sheet{order:0;padding:36px 48px 48px 84px; /* 更强的左内边距以配合标题越界 */}

  /* 标题向左越出正文基线（仅桌面生效） */
  h1{margin-left:-52px;padding-left:0}

  /* 相关阅读使用两列摘要列表 */
  .related-grid{grid-template-columns:1fr 1fr}

  /* 侧栏放在右侧，样式方正，窄边注 */
  .side{position:relative}
  .related-grid > *{background:var(--sand);border-left:4px solid var(--brick);}
}

/* 手机端规则：最大 767px，取消偏移与越界，所有元素回到安全边距内 */
@media (max-width:767px){
  .container{display:block;padding:0 16px;}
  .sheet{padding:18px;border-left:4px solid rgba(155,47,42,0.06);border-radius:2px}
  h1{font-size:20px;margin-left:0}
  .eyebrow{display:block}
  .content{font-size:15px}

  /* 侧栏下移，变为页面区块（自然重排） */
  .side{margin-top:22px}
  .related-grid{grid-template-columns:1fr;}

  /* 广告在移动端为块级，不悬浮 */
  .ad{margin:14px 16px}
}

/* 中间屏（768 - 1023px）：采用紧凑阅读布局 */
@media (min-width:768px) and (max-width:1023px){
  .container{max-width:960px;margin:0 auto}
  .sheet{padding:22px 28px}
  h1{font-size:22px;margin-left:0}
  .related-grid{grid-template-columns:1fr}
}

/* 可访问性和小调整 */
h1,h2,h3{color:var(--text)}
a{color:inherit}
.sr{position:absolute;border:0;padding:0;margin:-1px;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}