:root{
  --bg:#f7f7f6;
  --surface:#ffffff;
  --ink:#222226;
  --muted:#6b6b6f;
  --accent:#c8a600; /* 芥末黄 */
  --graphite:#2f3336; /* 石墨灰 */
  --max-width:1400px;
  --gutter:28px;
  --type-serif: "Georgia", "Times New Roman", Times, serif;
  --type-sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, "Noto Sans", "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

/* Reset-ish */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--type-sans);
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
.container{margin:0 auto;padding:20px;max-width:calc(var(--max-width));}

/* Toolbar / header */
.site-toolbar{background:transparent;border-bottom:1px solid rgba(47,51,54,0.06);}
.toolbar-grid{display:flex;align-items:center;gap:12px;justify-content:space-between;}
.site-name{font-weight:700;color:var(--graphite);text-decoration:none;font-family:var(--type-serif);font-size:20px}
.tool-crumb{font-size:13px;color:var(--muted)}
.ad-top{margin-left:20px}

/* Page grid base */
.page-grid{display:grid;grid-template-columns:1fr 320px;gap:40px;align-items:start;padding-top:20px;padding-bottom:20px}
.article-column{min-width:0}
.side-column{min-width:0}

/* Article header: title composition large title with narrow meta column */
.article-header{display:grid;grid-template-columns:1fr 180px;align-items:start;gap:20px;margin-bottom:18px}
.title{font-family:var(--type-serif);font-size:36px;line-height:1.05;margin:0;color:var(--graphite)}
.title-meta{font-size:13px;color:var(--muted);text-align:right}
.title-meta .meta-line{margin-bottom:6px}
.title-meta .current{font-weight:500;color:var(--muted)}

/* Visual signature: narrow colored band for summary */
.summary-band{display:block;padding:12px 14px;border-left:6px solid var(--accent);background:transparent;color:var(--graphite);margin-bottom:22px}

/* Content styling */
.content{background:transparent;color:var(--ink);line-height:1.75;font-size:16px}
.content p{margin:0 0 14px}
.content h2{font-family:var(--type-serif);font-size:20px;margin:30px 0 12px;position:relative}
.content h3{font-family:var(--type-serif);font-size:18px;margin:20px 0 10px}
.content ul, .content ol{margin:0 0 14px 1.2em}

/* Chapter numbering feel via CSS counter for h2 */
.article .content{counter-reset:section}
.article .content h2:before{counter-increment:section;content:counter(section,decimal) ". ";color:var(--muted);margin-right:8px;font-weight:600}

/* Ad middle */
.ad-middle{margin:28px 0}

/* FAQ pattern: details list without card */
.faq{margin-top:28px;padding-top:10px;border-top:1px solid rgba(47,51,54,0.06)}
.faq .section-title{font-family:var(--type-serif);font-size:18px;margin:0 0 12px}
.faq details{margin-bottom:8px}
.faq summary{cursor:pointer;font-weight:600;color:var(--graphite);list-style:none;outline:none}
.faq p{margin:8px 0 0;color:var(--muted)}

/* Side column panels */
.panel{background:rgba(255,255,255,0.02);padding:16px;border-left:2px solid rgba(47,51,54,0.03);margin-bottom:18px}
.panel-title{font-size:13px;color:var(--muted);margin:0 0 8px}
.meta-list{list-style:none;padding:0;margin:0;font-size:13px;color:var(--muted)}
.meta-list li{margin-bottom:6px}
.excerpt{margin:0;color:var(--muted);font-size:14px}

/* Bottom band: FAQ and related span full width across page bottom */
.bottom-band{grid-column:1 / -1;margin-top:28px}
.bottom-inner{display:grid;grid-template-columns:1fr;gap:20px}
.related .section-title{font-family:var(--type-serif);font-size:18px;margin:0 0 12px}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.related-grid > *{background:var(--surface);padding:12px;border:1px solid rgba(47,51,54,0.04);text-decoration:none;color:var(--graphite);font-size:14px}
.related-grid a{color:inherit;text-decoration:none}

/* Footer */
.site-footer{border-top:1px solid rgba(47,51,54,0.06);padding:18px 0;background:transparent;margin-top:24px}
.footer-inner{display:flex;justify-content:space-between;font-size:13px;color:var(--muted)}

/* Responsive rules */
@media (min-width:1024px){
  .container{padding:28px 36px}
  /* Ensure reading width behaves well on large screens; preferred range approximated via max-width */
  .container{max-width:1400px}
  .page-grid{grid-template-columns:1fr 320px;gap:48px}
  .title{font-size:42px}
  .summary-band{font-size:15px;padding:14px 16px}
  .related-grid{grid-template-columns:repeat(3,1fr)}
  /* Desktop-only structural difference: add more left whitespace and chapter feeling */
  .article{padding-right:10px}
}

@media (max-width:767px){
  .container{padding:14px}
  .page-grid{display:block}
  .article-header{display:block}
  .title{font-size:22px;margin-bottom:8px}
  .title-meta{text-align:left;font-size:13px;margin-bottom:6px}
  .summary-band{padding:10px;font-size:14px}
  .side-column{order:2}
  .article-column{order:1}
  .panel{padding:12px}
  /* Mobile: reduce chapter spacing but keep hierarchy */
  .content h2{margin:18px 0 8px}
  .content{font-size:15px;line-height:1.7}
  /* Bottom area becomes single column */
  .bottom-inner{grid-template-columns:1fr}
  .related-grid{grid-template-columns:1fr}
  .related-grid > *{display:block}
}

/* Accessibility focus styles */
a:focus, summary:focus{outline:2px solid var(--accent);outline-offset:2px}