/* 设计配色与系统变量（palette: 石墨灰 与 芥末黄） */
:root{
  --bg:#ffffff;
  --ink:#2b2b2b; /* 石墨灰 */
  --muted:#6b6b6b;
  --accent:#cfa400; /* 芥末黄 */
  --rule:rgba(43,43,43,0.08);
  --max-width:1280px;
  --gutter:24px;
  --content-width:780px; /* 桌面正文宽度要求 */
  --rail-left:180px;
  --rail-right:220px;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

/* 全局基础 */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-sans);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}

/* 报刊双层报头（无高空白、无大Logo） */
.site-header{
  border-bottom:1px solid var(--rule);
  padding:10px 0 6px;
}
.masthead-row{display:flex;align-items:center;justify-content:space-between;padding:2px var(--gutter);}
.masthead-top .site-name{font-weight:700;color:var(--ink);letter-spacing:0.02em}
.masthead-bottom{font-size:14px;color:var(--muted)}
.tagline{font-weight:600}
.year{color:var(--muted)}

/* 页面容器：桌面端宽度在合理范围内（遵守 1120-1440 的合同意向，max-width 设为 1280） */
.page-container{display:flex;justify-content:center;padding:18px;}
.layout-grid{width:100%;max-width:var(--max-width);display:grid;grid-template-columns:1fr;gap:20px}

/* 左侧元信息与右侧相关推荐的基础样式 */
.meta-rail, .related-rail{font-size:13px;color:var(--muted);padding:4px 8px}
.meta-rail .meta-item{display:block;padding:6px 0;border-left:2px solid transparent}
.meta-rail .meta-item strong{color:var(--ink);font-weight:600}
.meta-rail .note{font-size:12px;color:var(--muted)}

/* 主体列 */
.main-column{padding:0 16px}
.article-header{display:flex;flex-direction:column;gap:10px;padding:6px 0;border-bottom:1px solid var(--rule);margin-bottom:12px}
.article-title{font-size:26px;margin:0;line-height:1.15;font-weight:800;color:var(--ink)}
.article-summary{margin:0;color:var(--muted);font-size:15px}
.article-meta-inline{margin:10px 0;color:var(--muted);font-size:13px}
.article-content{color:var(--ink);font-size:16px}
.article-content p{margin:1em 0}

/* FAQ 样式：鼓励使用原生 details，样式简洁无卡片 */
.faq .section-title{font-size:16px;margin:18px 0 8px}
.faq details{border-top:1px solid var(--rule);padding:10px 0}
.faq summary{cursor:pointer;list-style:none;outline:none;font-weight:600}
.faq summary::-webkit-details-marker{display:none}

/* 相关条目网格（related_pattern: 四列紧凑标题网格） */
.related-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.related-grid a{color:var(--ink);text-decoration:none;font-size:14px}
.related-grid .item{padding:6px 4px;border-top:1px solid var(--rule)}

/* 广告占位样式（独立容器，不悬浮、不可遮挡） */
.ad-slot{padding:12px;margin:14px 0;border:1px dashed var(--rule);color:var(--muted);font-size:13px}
.ad-slot:empty{display:none}

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

/* 桌面端布局规则（必须包含 @media (min-width: 1024px)） */
@media (min-width:1024px){
  .layout-grid{
    display:grid;
    grid-template-columns: var(--rail-left) var(--content-width) var(--rail-right);
    gap:28px;
    align-items:start;
    padding:18px 24px;
  }
  .meta-rail{align-self:start;border-right:1px solid var(--rule);padding-right:18px}
  .main-column{max-width:var(--content-width)}
  .related-rail{align-self:start;border-left:1px solid var(--rule);padding-left:18px}

  /* 标题与摘要左右分置（desktop 实现） */
  .article-header{flex-direction:row;align-items:flex-start;gap:20px}
  .article-title{width:calc(var(--content-width) - 260px);font-size:32px}
  .article-summary{width:240px;color:var(--muted);font-size:15px}

  /* 相关网格四列 */
  .related-grid{grid-template-columns:repeat(4,1fr);gap:8px}
  .related-grid .item{padding:8px 6px;border-top:0;border-left:1px solid var(--rule)}

  /* 元信息沿桌面端边缘纵向排列（visual_signature） */
  .meta-rail{display:flex;flex-direction:column;gap:12px}
}

/* 手机端规则（必须包含 @media (max-width: 767px)） */
@media (max-width:767px){
  body{font-size:16px}
  .page-container{padding:8px}
  .layout-grid{grid-template-columns:1fr;gap:12px}

  /* 标题与摘要垂直堆叠以适配窄屏 */
  .article-header{flex-direction:column}
  .article-title{font-size:20px}
  .article-summary{font-size:14px}

  /* 将两侧信息全部移到正文之后（mobile_contract） */
  .meta-rail{display:none}
  .related-rail{display:none}
  .mobile-followups{display:block;padding-top:12px}
  .mobile-meta{font-size:14px;color:var(--muted);border-top:1px solid var(--rule);padding-top:10px;margin-top:12px}
  .mobile-related .related-grid{grid-template-columns:repeat(2,1fr);gap:8px}

  /* 使正文占满安全区域 */
  .main-column{padding:0}
  .article-content{font-size:16px}
}

/* 中等屏到桌面之间的适配（1024px - 1279px）确保不横向滚动 */
@media (min-width:768px) and (max-width:1023px){
  .layout-grid{padding:12px;grid-template-columns:1fr}
  .meta-rail,.related-rail{display:none}
  .main-column{max-width:760px;margin:0 auto}
  .article-header{flex-direction:column}
}

/* 无圆角、细分隔线、无阴影（surface: 无圆角、细分隔线、无阴影） */
*{border-radius:0}

/* 交互提示色（谨慎使用芥末黄） */
a{color:var(--accent)}
a:focus{outline:2px solid rgba(207,164,0,0.15)}