:root{
  --brown-900:#3b2f2a;
  --brown-700:#5a4139;
  --cream-100:#fff7eb;
  --cream-200:#fbf0e0;
  --muted:#7a6a63;
  --text:#2b221f;
  --content-max:760px; /* 正文舒适宽度 */
  --site-max:1280px; /* 桌面容器最大值，处于1120-1440之间 */
  --gap:24px;
  --line:#e6dcd6;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  box-sizing:border-box;
}
*,:before,:after{box-sizing:inherit}
html,body{height:100%;background:var(--cream-100);color:var(--text);margin:0}
.site-width{margin:0 auto;padding:20px;max-width:var(--site-max)}
/* Header 双层报头（第二层极窄） */
.site-header .header-top{display:flex;align-items:center;padding:12px 0}
.brand{font-weight:700;color:var(--brown-900);text-decoration:none;font-size:18px}
.site-header .header-sub{padding:6px 0;font-size:12px;color:var(--muted);border-top:1px solid var(--line)}
.site-header .sub-line{height:28px;display:flex;align-items:center}

/* 色带基础 */
.band{display:block;padding:20px 0}
.title-band{background:var(--cream-100);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.content-band{background:#fff;padding-top:28px;padding-bottom:28px;border-bottom:1px solid var(--line)}
.faq-band{background:var(--cream-200);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.related-band{background:var(--cream-100);padding-bottom:28px}

/* 标题构图：压左并用粗细横线 */
.title-wrap{display:flex;align-items:flex-start;gap:24px}
.title-main{flex:1}
.title-main h1{margin:0 0 12px 0;font-size:28px;line-height:1.18;color:var(--brown-900);font-weight:800;position:relative;padding-right:16px}
.title-main h1:before{content:"";display:block;height:4px;background:var(--brown-700);width:56px;margin-bottom:8px}
.title-main h1:after{content:"";display:block;height:1px;background:var(--line);margin-top:8px;width:100%}
.lead{margin-top:14px;color:var(--muted);font-size:14px}
.meta-inline{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:10px}
.meta-inline .spacer{opacity:.6}
.summary{margin:8px 0 0 0;color:var(--text)}

/* 元信息沿桌面端边缘纵向排列（视觉签名） */
.meta-rail{width:210px;flex:0 0 210px;border-left:1px solid var(--line);padding-left:18px}
.meta-stack{display:flex;flex-direction:column;gap:12px}
.meta-item{font-size:13px;color:var(--muted);display:flex;flex-direction:column}
.meta-item .label{font-weight:600;color:var(--brown-700);margin-bottom:6px}
.meta-item .value{color:var(--text)}

/* 正文：保持舒适阅读宽度 */
.content-wrap{display:flex;justify-content:center}
.article{max-width:var(--content-max);width:100%}
.article-body{font-size:16px;line-height:1.78;color:var(--text)}
.article-body p{margin:0 0 16px}

/* FAQ 横线问答列表 */
.faq-wrap .section-title,.related-wrap .section-title{margin:0 0 12px 0;font-size:16px;color:var(--brown-700)}
.faq-list > *{padding:12px 0;border-top:1px solid var(--line)}
.faq-list > *:first-child{border-top:0}

/* 相关阅读：编号样式 */
.related-list{margin:0;padding-left:20px}
.related-list > li{margin:8px 0;color:var(--brown-700)}
.related-list a{color:var(--brown-700);text-decoration:none}

/* 广告位样式（独立容器，不悬浮） */
.ad{padding:14px 20px;background:transparent;color:var(--muted);font-size:14px}
.ad-top,.ad-middle,.ad-bottom{border-top:1px dashed var(--line);border-bottom:1px dashed transparent}

/* Footer */
.site-footer{padding:18px 0;color:var(--muted);font-size:13px}

/* 桌面端规则（必须包含 @media (min-width: 1024px)） */
@media (min-width:1024px){
  :root{--gap:28px}
  .site-width{padding:28px;max-width:var(--site-max)}
  .title-wrap{align-items:flex-start}
  .title-main h1{font-size:36px}
  .meta-rail{display:block}
  /* 在桌面端使用非对称网格：标题与元信息并列，正文居中且保持舒适宽度 */
  .content-wrap{justify-content:flex-start}
  .article{margin-left:0}
}
/* 额外约束：当视口宽度足够大（>=1120px）时，确保容器在1120-1440区间体现稳定布局 */
@media (min-width:1120px){
  .site-width{max-width:1200px}
}

/* 手机端规则（必须包含 @media (max-width: 767px)） */
@media (max-width:767px){
  body{background:var(--cream-100)}
  .site-width{padding:12px}
  .title-wrap{flex-direction:column}
  .meta-rail{width:100%;border-left:0;padding-left:0;margin-top:12px}
  .meta-stack{flex-direction:row;gap:12px;flex-wrap:wrap}
  .meta-item{flex:0 0 auto}
  .title-main h1{font-size:20px}
  .title-main h1:before{width:40px;height:3px}
  .content-wrap{padding:0 6px}
  .article{max-width:100%}
  .faq-list > *{padding:10px 0}
  .ad{padding:10px}
  /* 移除过宽内边距，颜色仅作轻量区分 */
  .title-band,.faq-band,.related-band,.content-band{padding-left:8px;padding-right:8px}
  .header-sub{display:block}
}

/* 小屏 320px 兼容：禁止横向滚动 */
@media (max-width:320px){
  html,body{min-width:0}
  .site-width{padding:10px}
  .title-main h1{font-size:18px}
}

/* 无大圆角、无阴影、方角框线、局部底色 */
*{border-radius:0}

/* 可打印性与可访问性的小优化 */
a:focus{outline:2px solid var(--brown-700);outline-offset:2px}