/* Palette: 石墨灰与芥末黄 */
:root{
  --bg:#ffffff;
  --text:#222428; /* 石墨灰 */
  --muted:#6a6d70;
  --accent:#caa300; /* 芥末黄 */
  --rule:rgba(34,36,40,0.08);
  --max-width:1320px; /* 在1120-1440之间，选择1320为中间值 */
  --gap:28px;
  --mobile-gap:16px;
  --baseline:22px; /* 不同基线用于视觉签名 */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* 全局重置与基本节奏 */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  background:var(--bg);
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-size:15px; /* 技术资讯紧凑型 */
}
.container{max-width:var(--max-width);margin:0 auto;padding:20px}

/* Header: 窄报头，视觉签名为与正文不同的对齐基线 */
.site-header{border-bottom:1px solid var(--rule);background:transparent}
.header-inner{max-width:var(--max-width);margin:0 auto;padding:10px 20px;display:flex;align-items:center;justify-content:space-between}
.brand .home-link{font-weight:700;color:var(--text);text-decoration:none;font-size:18px;letter-spacing:0.2px}
.header-index{color:var(--muted);font-size:13px}

/* Article head */
.article{padding:18px 20px 36px}
.article-head{border-bottom:1px solid var(--rule);padding-bottom:14px;margin-bottom:18px}
.article-title{
  margin:4px 0 12px 0;
  font-size:28px;
  line-height:1.08;
  font-weight:700;
  text-align:left; /* 标题压左 */
  position:relative;
  padding-bottom:8px;
}
/* 横线构图：粗细并置 */
.article-title::after{
  content:"";
  display:block;
  height:2px;
  width:56px;
  background:var(--accent);
  margin-top:8px;
}
.article-title::before{
  content:"";
  display:block;
  height:1px;
  width:100px;
  background:var(--rule);
  margin-top:4px;
  opacity:0.9;
}

.meta-row{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--muted);gap:12px}
.meta-left{display:flex;align-items:center;gap:8px}
.meta-right{display:flex;align-items:center}
.summary{margin-top:14px;padding:12px 14px;border-left:3px solid var(--accent);background:transparent;color:var(--text);font-weight:500}

/* Layout grid: desktop will override to 10/2 */
.layout-grid{display:block;margin-top:22px}
.content{margin-bottom:24px}
.body-content{white-space:normal;word-break:break-word}

/* Ads: independent containers, no floating/overlay */
.ad{border:1px solid var(--rule);padding:12px;color:var(--muted);font-size:13px;background:transparent}
.ad-top{margin:8px 0}
.ad-middle{margin:20px 0}
.ad-bottom{margin-top:18px}

/* FAQ and related */
.faq-section{margin-top:18px}
.faq-section .section-title{font-size:16px;margin:0 0 10px 0}
.faq-container{display:block}

.related-finish{display:flex;flex-direction:column;gap:12px;margin-top:22px}
.related-list .section-title{font-size:16px;margin:0 0 8px 0}
.related-ol{padding-left:22px;margin:0;color:var(--text)}

/* Aside */
.aside{margin-top:18px}
.aside-block{border-top:1px solid var(--rule);padding-top:12px}
.aside-title{font-size:13px;margin:0 0 8px 0;color:var(--muted)}
.aside-body{font-size:13px;color:var(--muted)}

/* Footer */
.site-footer{border-top:1px solid var(--rule);padding:14px 0;margin-top:28px;background:transparent}
.footer-inner{max-width:var(--max-width);margin:0 auto;padding:0 20px;color:var(--muted);font-size:13px}

/* -- Desktop (>=1024px) : 编辑部堆叠结构，跨栏标题，正文10/2边注，底部FAQ与推荐不同宽度错位排列 -- */
@media (min-width:1024px){
  .container{padding:28px}
  .article{padding:26px}
  .article-title{font-size:34px}
  .layout-grid{
    display:grid;
    grid-template-columns:10fr 2fr; /* 10/2 边注 */
    gap:var(--gap);
    align-items:start;
  }
  .content{grid-column:1/2}
  .aside{grid-column:2/3;position:relative}

  /* FAQ: 左侧问题右侧答案表格式：假设 {{faq}} 输出结构为多个 .faq-item .q/.a */
  .faq-container{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
  /* If faq is plain HTML, authors should output .faq-item wrappers; otherwise fallback shows block */
  .faq-container .faq-item{display:contents}
  .faq-container .q{font-weight:600;color:var(--text);padding-right:12px;border-right:1px solid var(--rule)}
  .faq-container .a{padding-left:12px;color:var(--muted)}

  /* related + ad-bottom 错位排列：related 占较宽列，ad_bottom 占较窄列并右移错位 */
  .related-finish{display:grid;grid-template-columns:3fr 1fr;gap:18px;align-items:start}
  .related-list{grid-column:1/2}
  .ad-bottom{grid-column:2/3;align-self:start}

  /* Visual signature: 页头与正文采用不同对齐基线 */
  .header-inner{align-items:flex-end}
  .article-head{padding-top:8px}
}

/* -- Mobile (<=767px) : 各层按语义顺序单列，取消错位与跨栏 -- */
@media (max-width:767px){
  :root{--gap:14px}
  .container{padding:14px}
  .article{padding:14px}
  .article-title{font-size:20px;margin-bottom:8px}
  .meta-row{flex-direction:column;align-items:flex-start;gap:6px}
  .summary{font-size:14px}

  /* Single column flow */
  .layout-grid{display:block}
  .aside{margin-top:18px}

  /* FAQ mobile: 单列，问题在上答案在下（自然语义顺序） */
  .faq-container{display:block}
  .faq-container .q{font-weight:600;padding:8px 0}
  .faq-container .a{padding:6px 0;color:var(--muted)}

  /* related simple vertical list */
  .related-finish{display:block}
  .ad-bottom{margin-top:10px}

  /* Ensure no horizontal scroll at 320px */
  html,body{min-width:0}
  .body-content{word-break:break-word;overflow-wrap:break-word}
}

/* Accessibility hints */
a{color:inherit}
button{font:inherit}

/* Prohibitions enforced by style choices: no large radii, no shadows */
*{border-radius:0}

/* Small helpers to keep density 舒展 */
.section-title{font-weight:600}
.klist{color:var(--muted)}

/* Ensure no placeholder dead links generated by template */
.home-link{text-decoration:none}