/* Palette and design variables */
:root{
  --brick:#a33b2a; /* 砖红 */
  --sand:#f5efe7; /* 砂岩白 */
  --text:#222;
  --muted:#6b6b6b;
  --max-width:1280px; /* between 1120 and 1440 */
  --gutter:24px;
  --rail-width:24%; /* will be adjusted in grid */
  --transition:200ms ease;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--sand);color:var(--text);font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans CJK SC', sans-serif;}
a{color:inherit;text-decoration:none}
.sr{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* Masthead: 左右分置编辑部报头，站名与导航纵向排列 */
.masthead{background:transparent;padding:18px var(--gutter);border-bottom:1px solid rgba(0,0,0,0.04)}
.masthead-inner{max-width:var(--max-width);margin:0 auto;display:flex;gap:20px;align-items:flex-start}
.brand{display:flex;flex-direction:column;gap:6px}
.site-name{font-weight:700;color:var(--brick);font-size:18px}
.site-tag{font-size:12px;color:var(--muted)}
.vertical-nav ul{list-style:none;margin:0;padding:0;color:var(--muted);font-size:13px}
.vertical-nav li{padding:6px 0}

/* Page frame grid */
.page-frame{padding:28px var(--gutter) 60px}
.container{max-width:var(--max-width);margin:0 auto;display:grid;grid-template-columns:1fr;gap:32px}

/* Left rail and article base styles */
.left-rail{order:1}
.left-rail .rail-inner{background:transparent;padding:6px 0}
.rail-title{font-weight:700;color:var(--brick);margin-bottom:8px}
.rail-list{list-style:none;padding:0;margin:0;font-size:14px;color:var(--muted)}
.rail-list li{padding:8px 0;border-top:1px solid rgba(0,0,0,0.04)}

.article{background:transparent;padding:0 6px;order:2}
.article-header{padding-bottom:8px;border-bottom:1px solid rgba(0,0,0,0.06);margin-bottom:18px}

/* Title composition: 压左并用粗细横线构图 */
.title{font-size:28px;line-height:1.12;margin:12px 0 10px 0;letter-spacing:-0.01em;font-weight:800;max-width:100%;text-align:left;position:relative}
.title::before{content:"";display:block;height:3px;background:var(--brick);width:40px;position:absolute;left:0;top:-10px}
.title::after{content:"";display:block;height:1px;background:rgba(0,0,0,0.08);width:100%;position:absolute;left:0;bottom:-10px}

.meta-row{display:flex;gap:12px;font-size:13px;color:var(--muted);align-items:center;margin-top:2px}
.summary{margin:14px 0 0;color:var(--muted);line-height:1.5}

/* Visual signature: 双层基线网格感（正文区） */
.content-body{
  background-image:
    repeating-linear-gradient(to bottom, rgba(0,0,0,0.02) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(to bottom, rgba(0,0,0,0.012) 12px 13px, transparent 13px 36px);
  padding:18px 10px 10px 10px;
  line-height:1.9; /* 舒展正文 */
  color:var(--text);
}
.content-body p{margin:0 0 16px 0}
.content-body h2, .content-body h3{margin:18px 0 8px 0}

/* FAQ pattern: 横线问答列表 */
.faq{margin-top:20px;padding-top:12px;border-top:1px solid rgba(0,0,0,0.06)}
.faq > *{font-size:15px}
.faq ul{list-style:none;padding:0;margin:0}
.faq li{padding:12px 0;border-bottom:1px solid rgba(0,0,0,0.04)}

/* Related pattern: 带日期的分隔线列表 */
.related{margin-top:20px;padding-top:12px}
.related-title{font-size:15px;color:var(--brick);margin-bottom:8px}
.related > *{font-size:14px}
.related ul{list-style:none;padding:0;margin:0}
.related li{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid rgba(0,0,0,0.04);font-size:14px;color:var(--muted)}

/* Ads: 独立容器且不得覆盖内容 */
.ad{max-width:var(--max-width);margin:18px auto;padding:6px 12px;background:transparent;color:var(--muted);text-align:center}
.ad-top{margin-top:8px}

/* Footer */
.site-footer{padding:20px var(--gutter);text-align:center;color:var(--muted);font-size:13px}

/* Desktop: 1024px及以上 使用左3列 右9列 非对称网格 */
@media (min-width:1024px){
  .container{grid-template-columns:320px 1fr;align-items:start;gap:36px}
  .left-rail{grid-column:1;position:relative}
  .article{grid-column:2}
  /* Ensure container width range */
  @supports (max-width:100%){}
}

/* Mobile: 最大767px - 左栏变成标题下方紧凑信息带，正文随后显示 */
@media (max-width:767px){
  body{font-size:15px}
  .masthead-inner{flex-direction:row;justify-content:space-between;align-items:center}
  .vertical-nav{display:none}
  .container{display:block;padding:0}
  .left-rail{order:2}
  .article{order:1;padding:12px}
  /* Mobile-rail-band: compact info band under title (mirrors left-rail content) */
  .mobile-rail-band{display:block;padding:10px 0;margin-top:12px;border-top:1px solid rgba(0,0,0,0.04)}
  .mobile-rail-band::before{content:"栏目：";color:var(--muted);font-weight:600;margin-right:6px}
  .mobile-rail-band{color:var(--muted);font-size:13px}
  .mobile-rail-band{white-space:nowrap;overflow:auto}
  .mobile-rail-band::-webkit-scrollbar{display:none}
  .left-rail{display:none}
  .title{font-size:20px}
  .content-body{padding:12px 0 0 0;line-height:1.8}
  .ad{margin-left:12px;margin-right:12px}
  /* Ensure no horizontal scrolling at 320px */
  html,body{min-width:0}
}

/* Mid-range between mobile and desktop: maintain readable density */
@media (min-width:768px) and (max-width:1023px){
  .container{max-width:960px;margin:0 auto}
  .left-rail{display:block}
  .container{display:grid;grid-template-columns:220px 1fr;gap:24px}
}

/* Minor accessibility and density tweaks */
.title, .summary, .content-body{word-break:break-word}