/* 样式说明：遵循“墨绿与米白”配色，使用系统字体，基于双层基线网格。*/
:root{
  --accent:#2bb286; /* 设计种子色 */
  --paper:#f7f3ea; /* 米白 */
  --header-bg:#0b3f33; /* 深色报头 */
  --text:#17221f;
  --muted:#6b6b66;
  --max-width:1280px; /* 桌面容器在1120-1440之间，取中间值1280 */
  --baseline:8px; /* 基线单位 */
  --gutter:24px;
  --info-bg:#ffffff;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font-family: "Noto Serif SC", Georgia, "Songti SC", serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:calc(var(--baseline) * 2.75 / var(--baseline)); /* 字高与基线挂钩 */
  font-size:16px;
}

a{color:var(--accent);text-decoration:none}
.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}

.ad-slot{width:100%;padding:12px 0;text-align:center;color:var(--muted);font-size:13px}
.ad-top{border-bottom:1px solid rgba(0,0,0,0.05)}
.ad-middle{margin:28px 0;border-top:1px dashed rgba(0,0,0,0.05);padding-top:18px}
.ad-bottom{margin-top:32px;border-top:1px solid rgba(0,0,0,0.06);padding-top:18px}

/* 报刊双层报头 */
.masthead{background:var(--header-bg);color:var(--paper);padding:12px 0 6px}
.masthead-row{max-width:var(--max-width);margin:0 auto;display:flex;align-items:center;gap:12px;padding:0 var(--gutter)}
.masthead-top{height:56px}
.brand{font-weight:700;font-size:20px;letter-spacing:0.6px;color:var(--paper)}
.masthead-meta{margin-left:auto;font-size:13px;color:rgba(255,255,255,0.85)}
.masthead-sub{height:10px;align-items:center}
.masthead-sub .edition{font-size:11px;color:rgba(255,255,255,0.85);opacity:0.9}

/* 页面容器 */
.page{padding:28px 0}
.page-inner{max-width:var(--max-width);margin:0 auto;padding:0 var(--gutter)}

/* 文章头部 */
.article-head{margin-bottom:18px}
.article-head h1{font-family: Georgia, 'Times New Roman', serif; font-size:30px;font-weight:700;margin:6px 0 10px;text-align:left}
.title-rulers{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.title-rulers .ruler{display:block;height:2px;background:var(--accent);width:70px}
.title-rulers .ruler.thin{height:1px;background:rgba(0,0,0,0.1);width:200px}

.meta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;font-size:13px;color:var(--muted)}
.summary{margin:6px 0 0;padding:0;max-width:80%}

/* 布局网格：桌面 10/2 非对称 */
.layout-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:20px;align-items:start}
.content-area{grid-column:1 / span 10;background:transparent}
.side-area{grid-column:11 / span 2;display:flex;flex-direction:column;gap:12px}

.content-inner{
  background:var(--info-bg);
  padding:22px 26px;
  color:var(--text);
  font-size:16px;
  line-height:1.9; /* 宽松行距以形成基线感 */
  hyphens:auto;
}

/* 视觉签名：双层基线网格感，通过段落间距与首行留白实现 */
.content-inner p{margin:0 0 calc(var(--baseline) * 3);} 
.content-inner > * {margin-top:0}

/* 方形信息块，方正边角，不使用阴影 */
.info-block{background:var(--info-bg);border:1px solid rgba(0,0,0,0.05);padding:14px 12px}
.info-title{font-size:12px;color:var(--muted);margin-bottom:8px}
.info-body{font-size:14px;color:var(--text);word-break:break-word}

/* FAQ 区：期待运行时包含 <details> 列表，样式为无卡片 */
.faq{margin-top:28px}
.faq .section-title{font-size:18px;margin:0 0 12px}
.faq-list details{border-top:1px solid rgba(0,0,0,0.04);padding:10px 0}
.faq-list summary{cursor:pointer;font-weight:600;list-style:none;font-size:15px}
.faq-list details[open] summary{color:var(--accent)}
.faq-list details p{margin:10px 0 0;font-size:14px;color:var(--text)}

/* 相关阅读：底部三列短卡，但不使用阴影 */
.related{margin-top:20px}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.related-grid > *{background:var(--info-bg);padding:12px;border:1px solid rgba(0,0,0,0.04);font-size:14px}
.related .section-title{font-size:18px;margin:0 0 12px}

/* 页脚 */
.site-footer{padding:18px 0;color:var(--muted);font-size:13px}
.footer-inner{max-width:var(--max-width);margin:0 auto;padding:0 var(--gutter)}

/* 较窄屏与手机独立重排 —— 必须包含@media (min-width:1024px) 与 @media (max-width:767px) */
@media (min-width:1024px){
  /* 桌面加强感：保持窄报头、宽标题、正文与边注10/2网格 */
  .masthead-top{height:68px}
  .article-head h1{font-size:36px}
  .content-inner{padding:28px 36px;font-size:17px}
  .related-grid{grid-template-columns:repeat(3,1fr)}
}

@media (max-width:767px){
  /* 手机端：边注并入标题下方，所有内容取消固定宽度 */
  :root{--gutter:14px}
  .masthead{padding:10px 0}
  .masthead-row{padding:0 12px}
  .page-inner{padding:0 12px;max-width:none}
  .layout-grid{display:block}
  .content-area{grid-column:auto;margin-bottom:12px}
  .side-area{grid-column:auto;display:block;margin-bottom:10px}
  .info-block{display:flex;justify-content:space-between;align-items:center;padding:10px}
  .article-head h1{font-size:20px;margin-bottom:6px}
  .title-rulers{margin-bottom:6px}
  .content-inner{padding:16px;font-size:15px}
  .related-grid{grid-template-columns:repeat(1,1fr)}
  .masthead-sub{display:none} /* 第二层极窄，可合并在移动端隐藏以节省空间 */
  /* 防止横向滚动 */
  html,body{overflow-x:hidden}
}

/* 防止在320px下文字截断或控件重叠 */
@media (max-width:320px){
  body{font-size:15px}
  .content-inner{padding:12px}
}