:root{
  --bg:#ffffff;
  --paper:#ffffff;
  --mast:#222428; /* 石墨灰 */
  --accent:#c8a600; /* 芥末黄 */
  --muted:#6b6f73;
  --text:#111214;
  --max-width:1200px; /* 保持在 1120-1440 之间，1200 是安全值 */
  --masthead-w:220px;
  --gutter:22px;
  --radius:6px;
}
/* 基础重置与排版 */
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--text);font-family: "Georgia", "Times New Roman", serif;font-size:16px;line-height:1.55}
.page-outer{display:flex;justify-content:center;padding:18px}
.page-inner{display:grid;grid-template-columns:var(--masthead-w) 1fr;gap:28px;width:var(--max-width);max-width:calc(100% - 36px);align-items:start}
/* 刊头：深色报头，纵向贯穿 */
.masthead{background:var(--mast);color:var(--paper);padding:18px;display:flex;flex-direction:column;gap:12px;border-radius:4px}
.masthead-top{display:flex;align-items:center;justify-content:space-between}
.site-link{color:var(--paper);text-decoration:none;font-weight:700;font-size:18px}
.masthead-year{font-size:12px;color:rgba(255,255,255,0.65)}
.masthead-line{height:2px;background:var(--accent);width:100%;border-radius:1px}
.masthead-info{font-size:13px;color:rgba(255,255,255,0.9)}
/* 主区 */
.main-area{min-width:0}
.ad-slot{background:linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.01));padding:12px;border:1px solid rgba(0,0,0,0.04);border-radius:4px;margin:10px 0;font-size:13px;color:var(--muted)}
.article-root{background:var(--paper);padding:6px}
.article-header{padding:6px 6px 12px}
.title{margin:8px 0 6px;color:var(--text);font-size:clamp(22px, 3.4vw, 36px);line-height:1.05;font-weight:700;letter-spacing:0.2px;display:block}
/* 视觉签名：标题首字强调色 */
.title::first-letter{color:var(--accent);font-weight:800}
.meta{display:flex;flex-wrap:wrap;gap:8px;font-size:13px;color:var(--muted);align-items:center}
.summary{margin:10px 0 12px;color:var(--muted);font-size:15px}
/* 内容与边注 - 9/3 网格表现为 3fr/1fr */
.article-grid{display:grid;grid-template-columns:3fr 1fr;gap:20px;align-items:start;padding:6px}
.content-col{min-width:0}
.article-content{color:var(--text);font-size:16px;line-height:1.65}
.article-content p{margin:0 0 12px}
.side-col{background:transparent}
.side-block{background:#f7f7f7;border:1px solid #efefef;padding:12px;margin-bottom:12px;border-radius:2px}
.side-title{margin:0 0 8px;font-size:14px;color:var(--mast)}
.side-body{font-size:13px;color:var(--muted)}
/* FAQ 横线问答 */
.faq{margin-top:18px;padding-top:6px}
.faq .section-title{margin:6px 0 8px;font-size:16px;color:var(--mast)}
.faq-list > *{padding:12px 0;border-top:1px solid #eee}
.faq-list > *:first-child{border-top:0}
/* 相关阅读 编号列表 */
.related{margin-top:12px}
.related .section-title{margin:6px 0 8px;font-size:16px;color:var(--mast)}
.related-list{padding-left:22px;color:var(--muted);font-size:14px}
.related-list li{margin:8px 0}
/* 页脚 */
.page-footer{margin-top:18px;padding:12px 6px;color:var(--muted);font-size:13px}
/* 响应：桌面 1024px+ 为左侧纵向刊头 + 文章主区，标题跨主区，正文与边注 9/3 网格成立 */
@media (min-width:1024px){
  :root{--max-width:1200px; --masthead-w:220px}
  .page-inner{grid-template-columns:var(--masthead-w) 1fr}
  .title{font-size:34px}
  .article-grid{grid-template-columns:3fr 1fr}
  .masthead{position:relative;min-height:160px}
}
/* 手机端 320px-767px：顶部横条刊头，单列顺序：刊头、标题、meta、摘要、正文、边注下移、FAQ、相关阅读 */
@media (max-width:767px){
  html,body{font-size:15px}
  .page-inner{display:block;width:100%;max-width:100%;padding:0}
  .masthead{display:flex;flex-direction:row;align-items:center;padding:10px 12px;border-radius:0}
  .masthead-top{display:flex;align-items:center;gap:12px}
  .site-link{font-size:16px}
  .masthead-info{display:none}
  .main-area{padding:12px}
  .ad-slot{margin:8px 0}
  .article-header{padding:0}
  .title{font-size:20px;line-height:1.12;margin-bottom:6px}
  .article-grid{display:block}
  .side-col{margin-top:14px}
  .side-block{padding:10px}
  .faq-list > *{padding:10px 0;border-top:1px solid #eee}
  .related-list{padding-left:18px}
  /* 确保 320px 时不出现横向滚动 */
  body{overflow-x:hidden}
}
/* 小细节：紧凑但不拥挤 */
h1,h2,h3,h4{margin:0}
a{color:var(--accent)}
/* 禁止常见被禁样式（禁止发光与蓝紫渐变） */
button,input{outline:none}