:root{--brown:#3b2720;--cream:#f6efe8;--muted:#7a6b61;--text:#2b2b2b;--accent:var(--brown);--line:rgba(59,39,32,0.12);--max-width:1280px;--min-width:1120px;}
/* Base reset and typography */
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--cream);color:var(--text);-webkit-font-smoothing:antialiased}
body{font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;font-size:15px;line-height:1.55}
.container{margin:0 auto;padding:28px 20px;max-width:var(--max-width)}
/* Header: centered masthead and narrow dual nav */
.site-header{padding:18px 0 10px;text-align:center;border-bottom:1px solid var(--line);background:linear-gradient(180deg, rgba(246,239,232,0.9), rgba(246,239,232,0.95))}
.masthead .site-title{font-family:Georgia, "Times New Roman", serif;font-size:20px;color:var(--brown);text-decoration:none}
.nav-top,.nav-sub{display:flex;justify-content:center;gap:18px;padding:6px 0;font-size:13px;color:var(--muted)}
.nav-sub{border-top:1px solid var(--line);border-bottom:1px solid transparent;margin-top:6px;padding-top:8px}
.nav-item,.nav-sub-item{white-space:nowrap}
.nav-item a{color:inherit;text-decoration:none}
/* Layout: desktop 9/3 grid, mobile single column */
.layout{display:block}
.article{margin-top:18px}
.title{font-family:Georgia, "Times New Roman", serif;font-size:28px;margin:6px 0 8px;text-align:center;color:var(--brown);line-height:1.18}
.meta{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;font-size:13px;color:var(--muted);margin-bottom:8px}
.meta .published{color:var(--muted)}
.meta .now{color:var(--muted);margin-left:6px}
.summary{max-width:900px;margin:0 auto 12px;text-align:left;color:var(--text);font-size:15px}
.content{color:var(--text);font-family:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "PingFang SC", "Hiragino Sans GB","Microsoft YaHei", sans-serif;font-size:15px;line-height:1.65}
.content p{margin:0 0 12px}
/* FAQ pattern: horizontal rule style list */
.faq{margin-top:20px}
.faq h2{font-family:Georgia, "Times New Roman", serif;font-size:16px;margin:12px 0;color:var(--brown)}
.faq-list dl{margin:0;padding:0}
.faq-list dt{padding:12px 0;border-bottom:1px solid var(--line);font-weight:600}
.faq-list dd{margin:8px 0 16px 0;color:var(--muted)}
/* Sidebar and related visual signature */
.sidebar{margin-top:26px}
.ad{color:var(--muted);font-size:13px;padding:10px;border:1px dashed var(--line);background:transparent}
.related{margin-top:18px}
.related-header{background:var(--brown);color:var(--cream);padding:8px 10px;font-weight:700;border-radius:2px;font-size:13px}
.related-list{list-style:none;padding:10px 6px;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.related-list li{font-size:14px;color:var(--text);border-bottom:1px solid transparent;padding-bottom:6px}
.meta-tags{margin-top:18px;font-size:13px;color:var(--muted)}
.meta-tags .tag-label{font-weight:600;margin-bottom:6px}
.tags{word-break:break-word}
.site-footer{padding:20px;border-top:1px solid var(--line);text-align:center;font-size:13px;color:var(--muted);margin-top:28px}
/* Density adjustments (tight) */
.title{margin-top:0}
.container{padding-top:22px;padding-bottom:28px}
/* Desktop specific layout >=1024px */
@media (min-width:1024px){
  .container{display:block;max-width:var(--max-width);min-width:var(--min-width)}
  .layout{display:grid;grid-template-columns:3fr 1fr;grid-column-gap:28px;align-items:start}
  .article{padding-right:6px}
  .sidebar{position:static;margin-top:0}
  .related-list{grid-template-columns:1fr 1fr}
  .title{font-size:34px}
  .summary{font-size:15px}
  /* navigation becomes compact double-row narrow */
  .nav-top,.nav-sub{gap:24px}
}
/* Mobile specific layout <=767px */
@media (max-width:767px){
  body{font-size:15px}
  .container{padding:14px}
  .layout{display:block}
  .article{order:1}
  .sidebar{order:2}
  .related-list{grid-template-columns:1fr;gap:10px;padding-left:0}
  .nav-sub{display:none} /* 取消第二层横排导航 */
  .title{text-align:center;font-size:22px}
  .summary{text-align:left;font-size:15px}
  .meta{justify-content:flex-start;padding-bottom:6px}
  .ad{font-size:13px;padding:8px}
  /* Ensure no horizontal scroll at 320px */
  html,body{min-width:0}
  .container{min-width:0}
}
/* Accessibility & small helpers */
a{color:inherit}
small{font-size:12px;color:var(--muted)}