:root{
  --bg:#ffffff;
  --text:#111111;
  --muted:#666666;
  --accent:#b22222; /* 朱红强调 */
  --rule:#e6e6e6;
  --max-container:1280px;
  --min-container:1120px;
  --gap:20px;
  --compact-leading:1.25;
  font-synthesis: none;
}
/* 基础重置 */
*{box-sizing:border-box}
html,body{height:100%;background:var(--bg);color:var(--text);font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", "Noto Sans CJK SC", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;margin:0}
a{color:inherit;text-decoration:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* 顶部广告 */
.ad{width:100%;padding:10px 12px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);background:transparent;color:var(--muted);font-size:13px}
.ad-top{border-top:0}

/* 头部：左右分置编辑部报头，站名居中 */
.site-header{padding:12px 0 6px}
.site-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 16px}
.site-nav .nav-left,.site-nav .nav-right{min-width:80px}
.site-nav .nav-link{font-size:13px;color:var(--muted)}
.site-nav .brand{font-weight:700;font-size:18px;color:var(--text);letter-spacing:0.02em}
.hdr-rule{height:1px;background:var(--rule);margin-top:12px}

/* 页面主容器与 10/2 网格（桌面规则将启用） */
.page-wrap{display:block;padding:20px 12px}
.layout-grid{display:block}
.article{max-width:100%;margin:0 auto}

/* 标题与构图：左压并用横线构图 */
.title{margin:6px 0 6px 0;font-weight:800;font-size:28px;line-height:1.08;letter-spacing:0.01em;text-align:left;padding-left:0;position:relative}
.title::after{content:"";display:block;height:3px;background:var(--accent);width:60px;margin-top:8px}
.title::before{content:"";display:block;height:1px;background:var(--rule);width:100%;position:relative;margin-top:8px}

/* 元信息 */
.meta{display:flex;flex-wrap:wrap;gap:12px;color:var(--muted);font-size:13px;margin:8px 0}
.meta .published{font-variant-numeric:tabular-nums}
.meta .current{margin-left:auto}
.meta .keywords{width:100%;color:var(--muted)}

/* 摘要区：使用窄色带而非卡片 */
.abstract{display:flex;align-items:flex-start;gap:12px;padding:10px 0;border-top:1px solid transparent}
.abstract .accent-band{width:4px;height:100%;background:var(--accent);display:block;margin-right:8px}
.abstract-text{margin:0;color:var(--text);font-size:15px;line-height:1.45}

/* side-note: 桌面为右侧窄栏（表现为边注），手机并入标题下方 */
.side-note{display:block;font-size:13px;color:var(--muted);padding:6px 0}

/* 正文样式：舒展正文，紧凑密度 */
.content{margin-top:10px;font-size:16px;line-height:var(--compact-leading);color:var(--text)}
.content p{margin:0 0 12px 0}
.content h2, .content h3{margin:18px 0 8px 0}

/* FAQ 与 相关阅读 */
.faq{margin-top:18px;padding-top:12px;border-top:1px solid var(--rule)}
.faq-list{display:block;gap:12px}
.related{margin-top:18px;padding-top:12px;border-top:1px solid var(--rule)}
.related-title{margin:0 0 8px 0;font-size:14px;color:var(--muted)}
.related-list{display:grid;gap:10px}
.related-list a{display:block;color:var(--text);text-decoration:none;font-size:14px}

/* 右侧 rail（桌面显示） */
.rail{display:none}
.rail-inner{font-size:13px;color:var(--muted);padding:8px}

/* 底部 */
.site-footer{border-top:1px solid var(--rule);padding:12px 16px;color:var(--muted);font-size:13px}

/* 响应与断点：必须同时包含桌面与手机专属规则 */
/* 桌面规则：1024px 及以上，使用 10/2 非对称网格，容器宽度 1120px—1440px 的约束（使用 clamp 实现） */
@media (min-width:1024px){
  .page-wrap{padding:28px calc((100vw - clamp(1120px,80vw,1440px))/2)}
  .layout-grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gap);align-items:start;max-width:clamp(1120px,80vw,1440px);margin:0 auto}
  .article{grid-column:1 / span 10;padding-right:24px}
  .rail{display:block;grid-column:11 / span 2;border-left:1px solid var(--rule);padding-left:18px}

  /* 摘要窄色带保持细长比例 */
  .abstract .accent-band{width:4px;margin-top:6px}
  .title{font-size:34px}

  /* FAQ 两列 */
  .faq-list{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:14px}

  /* 相关阅读两列摘要列表 */
  .related-list{grid-template-columns:repeat(2,1fr);display:grid}

  /* 元信息当前时间靠右 */
  .meta{align-items:center}
}

/* 手机规则：最大宽度 767px，取消固定宽度，边注并入标题下方，FAQ 单列 */
@media (max-width:767px){
  body{font-size:15px}
  .page-wrap{padding:14px}
  .layout-grid{display:block}
  .article{width:100%}
  .rail{display:none}
  .title{font-size:20px}
  .meta{flex-direction:column;gap:6px}
  /* 将 side-note 视觉上并入标题下方 */
  .side-note{order:2;margin-top:6px}
  .abstract{margin-top:8px}
  .content{font-size:15px}
  .faq-list{display:block}
  .related-list{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
  /* 防止横向滚动 */
  html,body{overflow-x:hidden}
}

/* 中间断点样式（768-1023）保持流式布局但不启用桌面非对称网格 */
@media (min-width:768px) and (max-width:1023px){
  .page-wrap{padding:18px}
  .layout-grid{display:block}
  .article{max-width:880px;margin:0 auto}
  .title{font-size:26px}
  .related-list{display:grid;grid-template-columns:repeat(2,1fr)}
}

/* 小幅界面调整：密集感与排版 */
.content strong{font-weight:700}
.content em{font-style:italic}

/* 禁止圆角与阴影以符合 surface 规范 */
*{border-radius:0;box-shadow:none}

/* 链接可见性 */
a.nav-link{border-bottom:1px solid transparent;padding-bottom:2px}
a.nav-link:hover{border-bottom-color:var(--rule)}