/* 主题变量（炭黑与暖灰） */
:root{
  --bg:#ffffff;
  --charcoal:#111213;
  --warm-gray:#7a746f;
  --muted:#9b958f;
  --accent:#222; /* 保守使用 */
  --max-width:1280px; /* 在 1120px—1440px 之间，契约要求 */
  --gutter:28px;
  --type-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* 全局基线 */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--type-sans);
  color:var(--charcoal);
  background:var(--bg);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Masthead: 双层报头 */
.masthead{border-bottom:1px solid var(--muted)}
.masthead-top{padding:18px 0; text-align:center}
.masthead-top .pubtitle{font-weight:700; letter-spacing:0.02em; color:var(--charcoal)}
.mastline{height:1px; background:linear-gradient(to right, transparent, var(--muted), transparent); margin-top:10px}

.masthead-bar{display:flex;justify-content:space-between;align-items:center;padding:6px 6px;border-top:1px solid rgba(0,0,0,0.03);font-size:13px}
.masthead-bar .bar-left a{color:var(--charcoal); text-decoration:none; font-weight:600}
.masthead-bar .bar-right ul{display:flex;gap:18px;list-style:none;margin:0;padding:0;color:var(--warm-gray)}
.masthead-bar .bar-right li{padding:2px 0}

/* 页面容器 */
.page-wrap{display:flex;justify-content:center;padding:32px 12px}
.page-grid{display:grid;gap:32px; width:100%; max-width:var(--max-width); grid-template-columns: 1fr 320px; align-items:start}

/* Article 主体 */
.article{background:transparent}
.article-head{display:grid;grid-template-columns: 1fr 240px; gap:24px; align-items:start; padding-bottom:14px; border-bottom:1px solid #eee}
.article h1{margin:0; font-size:36px; line-height:1.08; font-weight:700; color:var(--charcoal); text-align:left}

.meta-narrow{font-size:13px; color:var(--warm-gray); border-left:1px solid #f0f0f0; padding-left:16px}
.meta-narrow .meta-row{margin-bottom:8px}
.meta-narrow .current-time{color:var(--muted)}

.summary{margin-top:20px; padding:0 2px}
.summary p{margin:0;color:var(--muted);font-size:15px}

/* 内容区：直接可见 */
.content{margin-top:22px}
.content :where(h2){margin-top:28px;margin-bottom:8px;color:var(--charcoal);font-size:18px}
.content p{margin:0 0 14px 0; font-size:15px; color:#222}

/* 章节编号感：为 h2 自动编号（学刊式感觉） */
.content{counter-reset:section}
.content h2{counter-increment:section; position:relative; padding-left:48px; font-weight:700}
.content h2::before{content:counter(section) "."; position:absolute; left:0; top:0; color:var(--warm-gray); font-weight:600}

/* 广告容器（不得悬浮或覆盖正文） */
.ad{margin:28px 0; padding:10px; border:1px dashed #eee; color:var(--muted); font-size:13px}
.ad-top, .ad-middle, .ad-bottom{background:transparent}

/* FAQ：无卡片的 details 折叠列表，容纳原始 HTML */
.faq-section{margin-top:28px;padding-top:10px;border-top:1px solid #f1f1f1}
.faq-section .section-title{font-size:16px;margin:0 0 12px 0;color:var(--charcoal)}
.faq-list details{margin-bottom:8px}
.faq-list summary{cursor:pointer; list-style:none; font-weight:600}
.faq-list details[open] summary{color:var(--charcoal)}

/* 相关阅读：四列紧凑标题网格（桌面） */
.related-section{margin-top:24px;padding-top:12px;border-top:1px solid #f3f3f3}
.related-grid{display:grid;gap:12px; grid-template-columns:repeat(4,1fr)}
.related-grid a{display:block;color:var(--charcoal); text-decoration:none; font-size:14px}
.related-grid a:hover{text-decoration:underline}

/* 侧边信息：无头像、无作者卡 */
.side-info{padding:6px 12px;border-left:1px solid #f3f3f3}
.side-block{margin-bottom:18px}
.side-block h3{margin:0 0 6px 0;font-size:13px;color:var(--warm-gray)}
.side-block p{margin:0;color:var(--muted);font-size:14px}

/* Footer */
.site-footer{border-top:1px solid #eee;padding:18px 12px;text-align:center;color:var(--muted);font-size:13px}

/* 响应式规则：桌面必须在 min-width:1024px 下有专属布局 */
@media (min-width:1024px){
  /* 强化学刊式布局：容器更舒展，标题与窄元信息并列 */
  :root{--gutter:36px}
  .page-wrap{padding:48px 24px}
  .article h1{font-size:44px}
  .page-grid{grid-template-columns: 1fr 320px; gap:40px}
  .article-head{grid-template-columns: 1fr 280px}
  .related-grid{grid-template-columns:repeat(4,1fr)}
  /* masthead-bar 在桌面显示左右对齐 */
  .masthead-top{display:block}
  .masthead-bar{padding:8px 0}
}

/* 手机端规则：max-width:767px，独立重排，章节间距缩小且底部改为单列 */
@media (max-width:767px){
  body{font-size:15px}
  .masthead-top .pubtitle{font-size:16px}
  .masthead-bar{display:none} /* 简化为单层居中刊头 */
  .page-wrap{padding:18px 12px}
  .page-grid{display:block; max-width:100%;}
  .article-head{display:block;border-bottom:none;padding-bottom:8px}
  .article h1{font-size:20px}
  .meta-narrow{border-left:none;padding-left:0;margin-top:8px;font-size:13px}
  .summary p{font-size:14px}
  .content p{font-size:15px}
  .content h2{padding-left:36px}
  .ad{margin:18px 0}
  .side-info{border-left:none;padding:12px 0}
  .related-grid{display:grid;grid-template-columns:1fr;gap:10px}
  .faq-section{padding-top:10px}
}

/* 中等宽度（768-1023）确保平滑过渡 */
@media (min-width:768px) and (max-width:1023px){
  .page-grid{grid-template-columns:1fr;}
  .side-info{order:2}
  .article{order:1}
  .related-grid{grid-template-columns:repeat(2,1fr)}
}

/* 可访问性与微调 */
a{color:var(--accent)}
h1,h2,h3{color:var(--charcoal)}

/* 禁止圆角与阴影以符合 surface 合同 */
*{border-radius:0}