/* 变量与总体风格：石墨灰与芥末黄，系统字体 */
:root{
  --graphite:#2f2f2f;
  --muted:#6b6b6b;
  --mustard:#caa21a;
  --accent:#d4a917;
  --bg:#ffffff;
  --max-width:1280px;
  --gutter:24px;
  --baseline:20px; /* 基线单元 */
  --baseline-2:40px; /* 双层基线感 */
  --type-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", sans-serif;
}

/* 基本重置与可读性 */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--type-stack);
  color:var(--graphite);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
}
a{color:var(--mustard);text-decoration:none}
a:focus{outline:2px solid rgba(200,160,20,0.25)}

/* 广告容器样式（独立，不悬浮） */
.ad{width:100%;padding:12px 0;text-align:center;color:var(--muted);font-size:13px}
.ad-top{background:transparent}
.ad-middle{background:transparent;margin:18px 0}
.ad-bottom{background:transparent;margin:18px 0}

/* 报刊双层报头 */
.masthead{border-bottom:1px solid rgba(47,47,47,0.06);padding:10px 0}
.masthead-row{display:flex;align-items:center;justify-content:space-between;max-width:var(--max-width);margin:0 auto;padding:4px var(--gutter)}
.masthead-row--upper{font-weight:700;color:var(--graphite)}
.masthead-row--lower{font-size:13px;color:var(--muted);border-top:1px solid rgba(47,47,47,0.04);padding-top:8px}
.masthead .brand a{font-size:20px;letter-spacing:0.02em;color:var(--graphite)}
.masthead .side{color:var(--muted)}
.masthead .strapline{flex:1;text-align:left}
.masthead .now{flex:0 0 auto}

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

/* 标题与摘要通栏 */
.article-intro{margin-bottom:14px}
.article-intro h1{font-size:28px;margin:6px 0 8px;text-align:center;font-weight:700;color:var(--graphite);line-height:1.12}
.article-intro .meta{font-size:13px;color:var(--muted);text-align:center;margin-bottom:10px}
.article-intro .description{max-width:980px;margin:0 auto 12px;color:var(--graphite);text-align:left}
.section-sep{border:0;border-top:1px solid rgba(47,47,47,0.06);margin:18px 0}

/* 布局网格：desktop 12 列，article 8，side 4 */
.layout-grid{display:grid;grid-template-columns:1fr;gap:24px}
.content-column{order:1}
.side-column{order:2}

/* 正文视觉签名：双层基线网格感（两层细线为背景） */
.content{
  background:transparent;
  padding:8px 0;
}
.content-wrapper{
  /* 背景两层基线：细线间距与强化线，色彩极淡 */
  background-image:
    repeating-linear-gradient(to bottom, rgba(0,0,0,0.02) 0, rgba(0,0,0,0.02) 1px, transparent 1px, transparent calc(var(--baseline) - 1px)),
    repeating-linear-gradient(to bottom, rgba(0,0,0,0.01) 0, rgba(0,0,0,0.01) 1px, transparent 1px, transparent calc(var(--baseline-2) - 1px));
  background-repeat:repeat-x;
  background-position: left top;
  padding:14px 10px;
  line-height:1.65; /* 技术资讯紧凑型但舒展 */
}
.content-wrapper p{margin:0 0 calc(var(--baseline) / 1.4) 0}
.content-wrapper h2,h3{margin:18px 0 8px}

/* FAQ 编号样式：模板不制造条目内容，只规范外观 */
.faq .section-title{font-size:16px;color:var(--graphite);margin:10px 0}
.faq-list{counter-reset:faq-counter}
.faq-list > *{
  margin:10px 0;padding-left:34px;position:relative;
}
.faq-list > *:before{
  counter-increment:faq-counter;content:counter(faq-counter) ".";position:absolute;left:0;top:0;font-weight:700;color:var(--mustard)
}

/* 侧边栏风格：非卡片、分割线 */
.side-column{padding:4px 0}
.side-title{font-size:15px;color:var(--graphite);margin:6px 0}
.related-list{display:block;font-size:14px;line-height:1.6;color:var(--graphite)}
.related-list a{display:block;padding:6px 0;border-bottom:1px solid rgba(47,47,47,0.04);color:var(--graphite)}
.side-sep{border:0;border-top:1px solid rgba(47,47,47,0.04);margin:14px 0}

/* 页脚 */
.site-footer{border-top:1px solid rgba(47,47,47,0.06);padding:14px 0;margin-top:28px}
.footer-inner{max-width:var(--max-width);margin:0 auto;padding:0 var(--gutter);display:flex;justify-content:space-between;color:var(--muted);font-size:13px}
.footer-inner a{color:var(--graphite)}

/* 链接与强调色使用芥末黄，但避免大面积纯色 */
a.em{color:var(--mustard);font-weight:600}

/* 可访问性小屏优化 */
@media (max-width:767px){
  :root{--gutter:16px}
  .masthead-row{padding:6px var(--gutter)}
  /* 报头压缩为一行（mobile_contract） */
  .masthead-row--upper{display:flex;align-items:center;justify-content:center}
  .masthead-row--upper .side{display:none}
  .masthead-row--lower{display:none}

  .page{margin:12px auto;padding:0 var(--gutter)}
  .article-intro h1{font-size:20px;text-align:center;margin:2px 0}
  .article-intro .description{font-size:14px}

  /* 移动端全部单列，侧栏下移（mobile_contract） */
  .layout-grid{grid-template-columns:1fr}
  .content-column{order:1}
  .side-column{order:2}
  .content-wrapper{padding:10px 2px;background-image:none} /* 移动简化基线，保留节奏 */
  .ad{font-size:12px}
  .related-list a{display:inline-block;padding:6px 8px;border-bottom:none}
  .footer-inner{flex-direction:column;gap:6px}

  /* 保证在 320px 无横向滚动 */
  html,body{min-width:0}
}

/* 桌面专属规则（必须包含 @media (min-width:1024px)） */
@media (min-width:1024px){
  :root{--gutter:28px}
  .page{margin:28px auto;padding:0 var(--gutter)}
  .masthead-row{padding:8px var(--gutter)}
  .masthead-row--lower{display:flex}

  /* 布局：正文 8 栏，侧栏 4 栏（desktop_contract） */
  .layout-grid{grid-template-columns:2fr 1fr;gap:36px;align-items:start}
  .content-column{order:1}
  .side-column{order:2}

  /* 标题与摘要仍通栏：保持在网格之上 */
  .article-intro{max-width:var(--max-width);margin:0 auto 18px}
  .article-intro h1{font-size:34px}
  .article-intro .description{font-size:16px}

  /* 正文基线强化：显示双层基线感（visual_signature） */
  .content-wrapper{background-image:
    repeating-linear-gradient(to bottom, rgba(0,0,0,0.02) 0, rgba(0,0,0,0.02) 1px, transparent 1px, transparent calc(var(--baseline) - 1px)),
    repeating-linear-gradient(to bottom, rgba(0,0,0,0.01) 0, rgba(0,0,0,0.01) 1px, transparent 1px, transparent calc(var(--baseline-2) - 1px));
    padding:20px 18px}

  /* 侧栏使用分隔线而非卡片（family_contract + desktop_contract） */
  .editorial{padding:6px 0}
  .related-list a{padding:10px 0}
}

/* 小屏无重影；防止过大圆角/玻璃/阴影（forbidden_pattern） */
*{border-radius:0}