/* 全局变量与基础版式 */
:root{
  --charcoal:#222222; /* 炭黑 */
  --warm-gray:#8a7f78; /* 暖灰 */
  --muted:#666055;
  --accent:#2f2f2f; /* 用于分隔线、细线 */
  --surface-border:rgba(0,0,0,0.06);
  --max-stage:1200px; /* 页面容器宽度（1120-1440 之间，取中） */
  --content-width:860px; /* 正文宽度 */
  --radius:2px; /* 依据surface要求的小圆角，极小 */
  --line:1px;
}

/* 系统无衬线现代风格 */
*{box-sizing:border-box}
html,body{height:100%;}
body{
  margin:0;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  color:var(--charcoal);
  background:#fff;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.65;
}
a{color:inherit;text-decoration:underline}
img{max-width:100%;height:auto;display:block}

.site-header{
  border-bottom:var(--line) solid var(--surface-border);
  padding:18px 16px 6px;
}
.masthead{max-width:var(--max-stage);margin:0 auto;text-align:center;font-weight:700;font-size:20px;color:var(--charcoal)}
.masthead .home-link{color:inherit;text-decoration:none}
.nav-slim{max-width:var(--max-stage);margin:8px auto 0}
.nav-line{height:28px;border-top:var(--line) solid var(--surface-border);display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:13px}

/* 页面主舞台，宽屏容器 */
.page{max-width:var(--max-stage);margin:28px auto;padding:0 18px}
.article{background:#fff;border:var(--line) solid var(--surface-border);border-radius:var(--radius);padding:20px}

/* 标题区：大标题配窄元信息列 */
.title-grid{display:grid;grid-template-columns:1fr 220px;gap:20px;align-items:start}
.title-col h1{margin:0;font-size:28px;letter-spacing:-0.01em;color:var(--charcoal)}
.meta-col{border-left:var(--line) solid var(--surface-border);padding-left:16px;color:var(--muted);font-size:13px}
.meta-block{display:flex;flex-direction:column;gap:8px}
.meta-row{white-space:normal}
.keywords span{color:var(--charcoal)}

.summary{margin:14px 0 20px;color:var(--muted);max-width:var(--content-width)}

/* 正文容器：居中且宽度约860px */
.article-body{display:flex;justify-content:center}
.content-wrap{width:100%;max-width:var(--content-width)}
.article-content{color:var(--charcoal)}
.article-content p{margin:0 0 1em}
.article-content h2{margin:1.2em 0 0.6em;font-size:18px}
.article-content ul, .article-content ol{margin:0 0 1em 1.2em}

/* 广告容器样式（独立，不遮挡内容，不悬浮） */
.ad-slot{max-width:var(--content-width);margin:22px auto;padding:8px;border:var(--line) dashed var(--surface-border);border-radius:var(--radius);color:var(--muted);font-size:13px}
.ad-top{max-width:var(--max-stage)}

/* FAQ 区：主题色顶部边线 */
.faq{max-width:var(--content-width);margin:28px auto;padding-top:14px;border-top:4px solid var(--warm-gray)}
.faq h2{margin:0 0 10px;font-size:16px}
.faq-body{color:var(--muted);font-size:14px}

/* 相关阅读：带日期的分隔线列表 */
.related{max-width:var(--content-width);margin:28px auto;padding-top:10px}
.related h3{margin:0 0 8px;font-size:15px}
.related-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.related-list li{padding:10px 0;border-top:var(--line) solid var(--surface-border);font-size:14px}
.related-list li time{display:block;color:var(--muted);font-size:12px;margin-top:6px}

/* 页脚 */
.site-footer{border-top:var(--line) solid var(--surface-border);padding:16px 18px;margin-top:28px}
.footer-inner{max-width:var(--max-stage);margin:0 auto;color:var(--muted);font-size:13px}

/* 视觉签名：全页只使用直角和细线（保留极小圆角以符合 surface 要求） */
*{border-radius:var(--radius)}

/* --------- 桌面规则（>=1024px） --------- */
@media (min-width:1024px){
  body{background:#fff}
  .page{padding:0}
  .article{padding:28px}
  .title-col h1{font-size:36px}
  .meta-col{position:static}
  /* 在桌面上形成明显的结构差异：标题与正文宽度不同，正文居中860px，页面容器宽度约1200px */
  .page{max-width:1200px}
  .article-body{margin-top:10px}
  .related-list{grid-template-columns:repeat(3,1fr)}
}

/* --------- 平板到窄屏中间断点（768-1023）保持适度布局 --------- */
@media (min-width:768px) and (max-width:1023px){
  .title-grid{grid-template-columns:1fr 180px}
  .title-col h1{font-size:26px}
  .related-list{grid-template-columns:repeat(2,1fr)}
  .page{padding:0 20px}
}

/* --------- 手机规则（<=767px）必须有独立重排，不是简单拉宽卡片 --------- */
@media (max-width:767px){
  :root{--content-width:calc(100% - 32px)}
  .site-header{padding:12px 12px 6px}
  .nav-line{height:22px;font-size:12px}
  .page{padding:10px}
  .article{border-radius:0;padding:14px}
  .title-grid{grid-template-columns:1fr;gap:8px}
  .meta-col{border-left:0;padding-left:0;border-top:var(--line) solid var(--surface-border);padding-top:10px}
  .title-col h1{font-size:20px}
  .summary{max-width:100%;margin-top:10px}
  .article-body{padding:0}
  .content-wrap{max-width:100%}
  .ad-slot{max-width:100%;margin:18px 0}
  .faq{padding-top:10px}
  /* 底部相关阅读从三列变单列 */
  .related-list{grid-template-columns:1fr}
  .related-list li{padding:12px 0}
  .footer-inner{padding:0 6px}
  /* 确保在320px无横向滚动 */
  html,body{overflow-x:hidden}
}

/* 无阴影、细线、直角与极小圆角符合视觉及surface约束 */