:root{
  --bg:#f7f6f5; /* warm gray background */
  --paper:#ffffff;
  --text:#111111; /* charcoal */
  --muted:#6f6b67; /* warm gray text */
  --accent:#2a2a2a;
  --line:#d8d4d1; /* thin line */
  --max-desktop-width:1440px;
  --min-desktop-width:1120px;
  --content-width:860px;
  --radius:2px;
  --gap:20px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans CJK SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

/* Base layout */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.65;
  font-size:16px;
}
a{color:inherit;text-decoration:none}

/* Header: 双层报头，第二层极窄 */
.site-header{
  border-bottom:1px solid var(--line);
  background:transparent;
}
.header-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  max-width:var(--max-desktop-width);
  margin:0 auto;
  padding:12px calc(4% + 8px);
}
.brand .home-link{
  font-weight:700;
  letter-spacing:0.2px;
  color:var(--accent);
}
.main-nav{display:flex;gap:18px;align-items:center;color:var(--muted);font-size:14px}
.main-nav .nav-home{color:var(--muted)}
.header-slim{height:4px;background:linear-gradient(90deg,transparent,transparent);border-top:1px solid var(--line)}

/* Site container width rules (desktop constraint 1120-1440) */
.site-wrap{
  margin:18px auto;
  padding:0 18px 48px;
  min-width:0;
}

/* Article header: title + narrow meta column */
.article{
  background:transparent;
  border-radius:var(--radius);
}
.article-head{padding:18px}
.title-row{
  display:flex;
  gap:20px;
  align-items:flex-start;
  border-bottom:1px solid var(--line);
  padding-bottom:14px;
}
.title-row h1{
  margin:0;
  font-size:28px;
  line-height:1.12;
  font-weight:700;
  flex:1 1 auto;
}
.meta-col{
  min-width:155px;
  max-width:240px;
  color:var(--muted);
  font-size:13px;
  text-align:right;
}
.meta-col .meta-item{padding:4px 0}
.summary{
  margin:14px 0 0 0;
  color:var(--muted);
  padding:12px 0;
  border-bottom:1px solid var(--line);
}

/* Article body and content: content approx 860px centered on desktop */
.article-body{display:flex;justify-content:center;padding:22px 0}
.content{
  width:100%;
  max-width:var(--content-width);
  background:var(--paper);
  padding:18px 22px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  color:var(--text);
  font-size:16px;
}
.content :where(h1,h2,h3,h4,h5){margin-top:1.15em;margin-bottom:.5em}
.content p{margin:0 0 1em}
.content ul, .content ol{margin:0 0 1em 1.2em}

/* FAQ 横线问答列表 */
.faq{max-width:var(--content-width);margin:18px auto 0;padding:0 12px}
.faq h2{font-size:18px;margin:8px 0;color:var(--accent)}
.faq-list{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--paper)}
.faq-list > *{padding:14px 16px;border-bottom:1px solid var(--line);}
.faq-list > *:last-child{border-bottom:0}

/* Related: 底部三列（桌面），每项保持两列摘要样式 */
.related{max-width:var(--max-desktop-width);margin:22px auto 0;padding:0 12px}
.related h2{font-size:18px;margin:8px 0;color:var(--accent)}
.related-grid{
  display:grid;
  gap:14px;
  grid-template-columns:repeat(3,1fr);
}
.related-grid > *{
  background:var(--paper);
  border:1px solid var(--line);
  padding:12px;
  border-radius:var(--radius);
}
.related-grid .item-title{font-weight:600;margin-bottom:6px}
.related-grid .item-snippet{color:var(--muted);font-size:14px}

/* Ads: independent containers, non-fixed */
.ad{max-width:var(--max-desktop-width);margin:18px auto;padding:10px;border:1px solid var(--line);background:transparent;border-radius:var(--radius);text-align:center;color:var(--muted);font-size:14px}
.ad-top{margin-top:12px}

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

/* DESKTOP specific rules (>=1024px) */
@media (min-width:1024px){
  .site-wrap{min-width:var(--min-desktop-width);max-width:var(--max-desktop-width)}
  .header-top{padding:14px calc((100vw - var(--max-desktop-width))/2 + 20px)}
  .title-row h1{font-size:34px}
  .meta-col{font-size:13px}
  /* Ensure title area spans wider than content: title area uses site-wrap full width; content constrained to ~860px */
  .article-head{max-width:var(--max-desktop-width);margin:0 auto;padding:22px}
  .article-body{padding:28px 0}
  .faq{padding:0}
  .related{padding:0}
  /* related pattern: items themselves use two-line summary style but placed in 3 columns */
  .related-grid > *{display:flex;flex-direction:column;justify-content:flex-start}
}

/* MOBILE specific rules (<=767px) */
@media (max-width:767px){
  body{font-size:15px}
  .header-top{padding:10px 12px}
  .header-slim{height:3px}
  .title-row{flex-direction:column;align-items:flex-start}
  .meta-col{width:100%;text-align:left;margin-top:8px}
  .title-row h1{font-size:20px}
  .summary{font-size:14px}
  .article-body{padding:12px 0}
  .content{max-width:100%;width:100%;padding:12px}
  .faq, .related{max-width:100%;padding:0 12px}
  .related-grid{grid-template-columns:1fr}
  .related-grid > *{padding:10px}
  .ad{margin:12px}
  /* Ensure no horizontal scroll at 320px */
  html,body{overflow-x:hidden}
}

/* Accessibility: readable focus states (no JS required) */
a:focus{outline:2px dashed var(--accent);outline-offset:2px}