:root{
  --brown-900:#3b2a21; /* 深棕 */
  --cream-50:#fbf6ef; /* 奶油白 */
  --cream-100:#f7efe3;
  --paper-white:#ffffff;
  --text-900:#222222;
  --muted-600:#6b5b52;
  --container-max:1280px;
  --container-min:1120px;
  --band-padding:28px;
  --band-padding-mobile:14px;
}
*{box-sizing:border-box}
html,body{height:100%;background:var(--cream-50);color:var(--text-900);font-family:system-ui,-apple-system,"Helvetica Neue",Segoe UI,Roboto,"PingFang SC",Arial,"Noto Sans SC";margin:0;line-height:1.6}
.container{margin:0 auto;padding:0 20px;max-width:var(--container-max);width:calc(100% - 40px)}
.band{padding:var(--band-padding) 0}
.band--masthead{background:var(--brown-900);color:var(--paper-white);padding-top:18px;padding-bottom:18px}
.masthead-inner{display:flex;align-items:center;justify-content:space-between}
.site-name{font-family:Georgia, 'Times New Roman', serif;color:var(--paper-white);text-decoration:none;font-weight:700;font-size:20px}
.masthead-line{height:8px;background:var(--cream-100);width:220px;border-radius:0}
.band--ad{background:transparent}
.ad-wrap{background:transparent;padding:8px 0;text-align:center;color:var(--muted-600);font-size:14px}
.band--summary{background:var(--cream-50);border-bottom:1px solid rgba(0,0,0,0.04)}
.summary-grid{position:relative;display:grid;grid-template-columns:1fr auto;gap:20px;align-items:start}
.summary-main{padding:8px 0}
.article-title{font-family:Georgia, 'Times New Roman', serif;font-size:28px;line-height:1.15;margin:6px 0 12px;text-align:center;color:var(--brown-900)}
.article-description{max-width:920px;margin:0 auto;color:var(--muted-600);text-align:left}
.meta-inline{display:none}
.meta-vertical{display:none}

.band--content{background:var(--paper-white);}
.content-band{padding-top:32px;padding-bottom:32px}
.article-body{max-width:900px;margin:0 auto}
.article-top-meta{display:flex;gap:16px;align-items:center;color:var(--muted-600);font-size:13px;margin-bottom:18px}
.content-surface{background:var(--paper-white);color:var(--text-900);font-size:16px;line-height:1.9}
.content-surface p{margin:0 0 1em}

.band--faq{background:var(--cream-100);border-top:1px solid rgba(0,0,0,0.03)}
.section-heading{font-family:Georgia, 'Times New Roman', serif;font-size:18px;color:var(--brown-900);margin:0 0 14px}
.faq-list{margin:0;padding:0 0 0 18px;color:var(--muted-600)}
.faq-list li{margin:0 0 12px}

.band--related{background:var(--cream-50);padding-top:22px;padding-bottom:22px}
.related-grid{display:grid;grid-template-columns:1fr;gap:12px}
.related-grid > *{background:var(--paper-white);padding:12px;border:1px solid rgba(0,0,0,0.04);box-sizing:border-box;border-radius:4px}

.band--footer{background:var(--brown-900);color:var(--paper-white);padding-top:18px;padding-bottom:18px}
.footer-inner{display:flex;justify-content:space-between;align-items:center;font-size:13px}

/* Mobile rules - explicit */
@media (max-width:767px){
  :root{--band-padding:14px}
  .container{padding:0 12px;width:100%;max-width:100%}
  .band{padding:var(--band-padding) 0}
  .article-title{font-size:22px}
  .article-description{text-align:left;margin-top:8px}
  .summary-grid{display:block}
  .meta-inline{display:block;margin-top:12px;color:var(--muted-600);font-size:13px}
  .meta-vertical{display:none}
  .content-band{padding-top:18px;padding-bottom:18px}
  .content-surface{font-size:15px;padding:0}
  .related-grid{grid-template-columns:1fr}
  .related-grid > *{border-radius:2px}
  .masthead-line{width:120px;height:6px}
}

/* Desktop rules - 强制桌面独立布局 */
@media (min-width:1024px){
  :root{--band-padding:32px}
  .container{width:1200px;max-width:1200px;padding:0}
  .summary-grid{grid-template-columns:1fr 220px;align-items:start;padding:18px 24px}
  .article-title{font-size:36px}
  .article-description{margin:0;padding-right:20px}
  .meta-inline{display:none}
  /* 元信息沿桌面端边缘纵向排列 - visual signature */
  .meta-vertical{display:flex;align-items:center;position:absolute;right:calc((100% - 1200px)/2 + 8px);top:18px;height:calc(100% - 36px);pointer-events:none}
  .meta-vertical-inner{writing-mode:vertical-rl;transform:translateY(0);color:var(--muted-600);font-size:13px;display:flex;flex-direction:column;gap:8px}

  /* 内容带：文章保持舒适阅读宽度，居中 */
  .content-band{display:grid;grid-template-columns:1fr 320px;gap:36px;align-items:start;padding:36px 0}
  .article-body{grid-column:1/2;max-width:900px}
  /* 右侧保留空白或用于页内工具（此模板不生成内容） */
  .content-band::after{content:'';grid-column:2/3}

  /* FAQ 与相关阅读分别为通栏色带 */
  .band--faq .container{padding:18px 24px}
  .band--related .container{padding:18px 24px}

  /* Related 三列短卡 */
  .related-grid{grid-template-columns:repeat(3,1fr);gap:14px}
  .related-grid > *{padding:14px;border-radius:2px}
}

/* Accessibility small helpers */
a{color:inherit}
