:root{
  --brown:#3b2b22; /* 深棕 */
  --cream:#f5efe6; /* 奶油白 */
  --white:#ffffff;
  --muted:#6b5b50;
  --accent:#8a6f5a;
  --content-max:760px;
  --site-max:1280px;
  --site-min:1120px;
  --gap:24px;
  --rhythm:1.8;
}
/* 基础重置与排版（人文杂志宽松型） */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Noto Sans","PingFang SC","Hiragino Sans GB",STHeiti,SimSun,Georgia,Times,serif;
  color:var(--muted);
  background:var(--cream);
  line-height:var(--rhythm);
  -webkit-font-smoothing:antialiased;
}
.site-wrap{max-width:var(--site-max);margin:0 auto;padding:20px;display:flex;align-items:center;gap:var(--gap)}
/* 报刊双层报头 */
.masthead-top{background:var(--brown);color:var(--white)}
.masthead-top .site-wrap{padding:18px 28px;justify-content:space-between}
.brand .home{color:var(--white);text-decoration:none;font-weight:700;font-size:1.1rem}
.meta-sq{display:flex;gap:12px;align-items:center;font-size:0.9rem}
.meta-sq time{color:var(--cream)}
.masthead-slim{background:var(--cream);color:var(--brown);border-top:4px solid rgba(0,0,0,0.03)}
.masthead-slim .site-wrap.slim{padding:6px 28px;justify-content:space-between;font-size:0.85rem}
.masthead-slim .slim-right{opacity:0.8}
/* 广告占位 */
.ad-container{padding:12px 20px;text-align:center;color:var(--muted);font-size:0.95rem}
.ad-top,.ad-middle,.ad-bottom{background:transparent}
/* 横向色带基础 */
.band{padding:18px 0;border-bottom:1px solid rgba(0,0,0,0.04)}
.band-title{background:linear-gradient(180deg, rgba(59,43,34,0.04), transparent 60%);}
.band-content{background:var(--white)}
.band-faq{background:var(--cream)}
.band-related{background:transparent}
.band .band-title-text{margin:0 0 12px 0;font-size:1.05rem;color:var(--brown)}
/* 标题与摘要左右分置（桌面） */
.title-wrap{display:flex;gap:28px;align-items:flex-start;padding:22px}
.title-column{flex:1;min-width:0}
.title-column h1{margin:0 0 14px 0;font-size:2rem;line-height:1.12;color:var(--brown);font-weight:700}
.article-meta{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.meta-square{background:var(--white);padding:8px 10px;border:1px solid rgba(0,0,0,0.04);font-size:0.92rem;color:var(--muted)}
.meta-keys{font-size:0.9rem;color:var(--accent);padding-left:6px}
.summary-column{width:420px;flex-shrink:0}
.summary-strip{background:var(--brown);color:var(--cream);padding:16px;border-left:6px solid var(--accent);height:100%;box-sizing:border-box}
.summary-strip p{margin:0;font-size:0.95rem;line-height:1.5}
/* 正文样式（舒适阅读宽度） */
.content-wrap{display:flex;justify-content:center;padding:40px 20px}
.article{width:100%;max-width:var(--content-max)}
.article-body{color:#222;font-size:1rem;line-height:1.9}
.article-body p{margin:0 0 1.1em}
.article-body h2{margin:1.4em 0 0.6em;font-size:1.15rem;color:var(--brown)}
.article-body ul, .article-body ol{margin:0 0 1.1em 1.4em}
/* FAQ: 以 details 列表风格呈现（无卡片） */
.faq-list details{background:transparent;border-top:1px solid rgba(0,0,0,0.04);padding:10px 0}
.faq-list summary{cursor:pointer;font-weight:600;color:var(--brown);list-style:none;outline:none}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list p{margin:8px 0 0;color:#333}
/* 相关阅读：两列摘要列表 */
.related-list{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.related-list a{display:block;padding:10px;background:var(--white);color:var(--brown);text-decoration:none;border:1px solid rgba(0,0,0,0.04)}
.related-list a .r-title{font-weight:600}
.related-list a .r-excerpt{display:block;color:var(--muted);font-size:0.92rem;margin-top:6px}
/* Footer */
.site-footer{padding:18px 0;background:transparent}
.footer-wrap{justify-content:space-between;padding:14px 28px;font-size:0.9rem;color:var(--muted)}
.sr-only{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* 桌面端规则（必须包含 min-width:1024px） */
@media (min-width:1024px){
  /* 强化宽屏容器规则：页面主容器在 1120px—1440px 之间 */
  .site-wrap{max-width:var(--site-max);padding:28px;}
  /* 尝试保证在典型桌面视口时容器宽度在 1120px—1440px 之间 */
  .site-wrap{width: min(max(var(--site-min), 80vw), 1280px)}

  /* 标题与摘要左右并列视觉差异成立于桌面 */
  .title-wrap{align-items:flex-start}
  .title-column h1{font-size:2.4rem}
  .summary-column{width:380px}

  /* 正文保持窄列，但页面充分利用宽屏（两侧留白） */
  .content-wrap{padding:56px 20px}
  .article{max-width:760px}

  /* 相关阅读为两列卡片式摘要（但保持方形信息块语言，不使用圆角） */
  .related-list a{padding:12px;border-radius:2px}
}

/* 手机端规则（必须包含 max-width:767px） */
@media (max-width:767px){
  body{background:var(--cream)}
  .site-wrap{padding:12px}
  .masthead-top .site-wrap{padding:12px}
  .masthead-slim .site-wrap.slim{padding:6px}
  /* 所有色带取消过宽内边距并自然单列，颜色只作轻量区分 */
  .title-wrap{flex-direction:column;padding:12px}
  .summary-column{width:100%;order:2}
  .summary-strip{margin-top:12px;padding:12px}
  .title-column h1{font-size:1.4rem}
  .article{max-width:100%}
  .content-wrap{padding:18px}
  .article-body{font-size:0.98rem;line-height:1.9}
  .faq-list details{padding:8px 0}
  /* 相关阅读改为单列，避免侧栏 */
  .related-list{grid-template-columns:1fr}
  .related-list a{display:block}
  /* 取消所有悬浮或固定元素，侧栏下移成自然区块 */
  .masthead-slim{font-size:0.85rem}
}

/* 可调整的可访问性和微交互（仅 CSS，无动画复杂性） */
.faq-list summary:focus{outline:2px dashed var(--accent);outline-offset:4px}
a:focus{outline:2px dashed rgba(138,111,90,0.6);outline-offset:3px}