:root{
  --brand:#b43b31; /* 砖红 */
  --bg:#efe6db;   /* 砂岩白 */
  --muted:#6b5a53;
  --text:#222222;
  --accent:#8f6b61;
  --max-width:1300px; /* 在1120-1440间取中值 */
  --gap:20px;
  --ui-border:rgba(0,0,0,0.06);
}

/* 全局复位与版心 */
*{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 CJK SC", "Microsoft YaHei", sans-serif;
  color:var(--text);
  background:linear-gradient(180deg, var(--bg) 0%, var(--bg) 100%); /* 纯色表现 */
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
}
.page-root{display:flex;flex-direction:column;min-height:100vh}
.page-container{width:100%;margin:0 auto;padding:18px;max-width:var(--max-width)}
.ad-slot{padding:12px;border-top:1px solid var(--ui-border);border-bottom:1px solid var(--ui-border);background:transparent;font-size:14px;color:var(--muted)}
.ad-top{border-top:0;margin-bottom:8px}
.ad-middle{margin-top:18px}
.ad-bottom{margin-top:18px}

/* 报头：双层报头，第二层极窄 */
.site-header{padding:12px 18px 6px;border-bottom:1px solid var(--ui-border);background:transparent}
.header-row{display:flex;align-items:center;justify-content:space-between}
.header-row-main{padding:6px 0}
.brand{font-weight:700;color:var(--brand);text-decoration:none;font-size:20px}
.mast-info{font-size:12px;color:var(--muted)}
.header-row-sub{padding:6px 0 0;font-size:12px;color:var(--muted);border-top:1px solid rgba(0,0,0,0.03)}
.header-row-sub .subline{letter-spacing:0.02em}

/* 标题区：左右分置（桌面7/5） */
.title-area{display:grid;grid-template-columns:1fr;gap:12px;align-items:start;padding:18px 0;border-bottom:1px solid var(--ui-border)}
.article-title{margin:0;font-size:28px;line-height:1.08;letter-spacing:-0.01em}
.summary-block{padding:10px;border-left:3px solid rgba(180,59,49,0.06);background:rgba(180,59,49,0.02)}
.summary-label{font-size:12px;color:var(--accent);font-weight:600;margin-bottom:6px}
.summary-text{margin:0;color:var(--muted)}

/* 布局网格：左主列偏左，右侧信息栏 */
.layout-grid{display:block;margin-top:18px}
.article-column{padding-right:0}
.info-column{margin-top:18px}

.meta-row{display:flex;gap:12px;align-items:center;font-size:13px;color:var(--muted);margin-bottom:10px}
.meta-row time{color:var(--muted)}
.current-time{color:var(--muted)}

.article-body{font-size:16px;color:var(--text)}
.article-body :where(p){margin-top:0;margin-bottom:1em}

/* 视觉签名：正文首段轻量首字强调（不改写内容，仅样式） */
.article-body p:first-of-type::first-letter{color:var(--brand);font-weight:600;font-size:1.28em;float:left;margin-right:8px;line-height:1}

/* 右侧信息栏 */
.info-box{border:1px solid var(--ui-border);padding:12px;background:transparent}
.info-title{font-size:13px;color:var(--brand);font-weight:700;margin-bottom:8px}
.meta-item{font-size:13px;color:var(--muted);margin-bottom:6px}
.kw{color:var(--accent)}

/* FAQ 桌面表格式（左问题右答案） */
.faq-box{margin-top:14px}
.faq-heading{font-size:15px;margin:0 0 8px 0;color:var(--brand)}
.faq-content dl{margin:0;border-top:1px solid var(--ui-border)}
.faq-content dt{padding:10px 8px;background:transparent;border-bottom:1px solid var(--ui-border);font-weight:700;color:var(--muted)}
.faq-content dd{margin:0;padding:10px 8px;border-bottom:1px solid var(--ui-border);color:var(--text)}

/* 相关阅读 / 关键词索引 */
.related-block{margin-top:20px;padding:12px;border-top:1px solid var(--ui-border)}
.related-title{font-size:13px;color:var(--brand);font-weight:700;margin-bottom:8px}
.related-list{font-size:14px;color:var(--muted)}
.related-list a{color:var(--accent);text-decoration:underline}

/* 页脚 */
.site-footer{margin-top:28px;padding:14px 18px;border-top:1px solid var(--ui-border);font-size:13px;color:var(--muted)}

/* 桌面规则：充分利用宽屏，非对称杂志网格（1024px以上生效） */
@media (min-width:1024px){
  .page-container{display:block;max-width:var(--max-width);min-width:1120px;padding:28px}

  /* 标题区：7/5 分栏 */
  .title-area{grid-template-columns:repeat(12,1fr);align-items:start}
  .article-title{grid-column:1 / span 7;font-size:36px}
  .summary-block{grid-column:8 / span 5;padding:16px}

  /* 主体布局：左7列为正文，右5列为信息栏（错位排列） */
  .layout-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);align-items:start;margin-top:22px}
  .article-column{grid-column:1 / span 7;padding-right:24px}
  .info-column{grid-column:8 / span 5;padding-left:24px}

  /* 右侧信息栏错位：向下偏移以形成杂志感 */
  .info-column{transform:translateY(36px)}

  /* FAQ 表格式调整为两列（question/answer）外观 */
  .faq-content dl{display:grid;grid-template-columns:35% 65%}
  .faq-content dt{border-right:1px solid var(--ui-border);border-bottom:1px solid var(--ui-border);padding:12px}
  .faq-content dd{padding:12px;border-bottom:1px solid var(--ui-border)}

  /* 相关阅读在右侧信息内或独立条目（此处保持独立但视觉上更紧凑） */
  .related-block{margin-left:0;margin-top:28px}
}

/* 手机规则：恢复自然文档顺序（标题、元信息、摘要、正文、FAQ、推荐） */
@media (max-width:767px){
  .page-container{padding:14px}

  /* 标题区堆叠 */
  .title-area{grid-template-columns:1fr;gap:8px}
  .article-title{font-size:20px}
  .summary-block{order:2}

  /* 布局单栏：信息栏下移为正文之后 */
  .layout-grid{display:block}
  .article-column{grid-column:auto;padding-right:0}
  .info-column{grid-column:auto;padding-left:0;transform:none;margin-top:16px}

  /* FAQ 在正文之后、表格改为自然堆叠：左问右答改为问在上答在下 */
  .faq-content dl{display:block}
  .faq-content dt{border-right:0;padding:10px 6px}
  .faq-content dd{padding:10px 6px}

  /* 相关阅读保持在正文之后 */
  .related-block{margin-top:18px}

  /* 保证 320px 不横向滚动 */
  .article-body img, .article-body iframe, .article-body embed{max-width:100%;height:auto}
  .page-container{overflow-x:hidden}
}

/* 可访问性与微调 */
.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}