:root{
  --navy: #0b2b4a; /* 海军蓝 */
  --mist: #f4f6f7; /* 浅雾灰 */
  --text: #0f1720;
  --muted: #667085;
  --max-width: 1280px; /* 容器在1120-1440之间，取中间值 */
  --gutter: 28px;
  --radius: 4px;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;color:var(--text);background:#fff}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
/* Header: 左对齐紧凑品牌栏，站名与导航纵向排列 */
.site-header{padding:18px var(--gutter);border-bottom:1px solid rgba(11,43,74,0.06);background:linear-gradient(180deg,transparent,transparent)}
.brand-nav{display:flex;flex-direction:column;gap:10px;max-width:var(--max-width);margin:0 auto}
.brand-link{font-weight:700;color:var(--navy);font-size:20px}
.site-nav ul{display:flex;flex-direction:column;gap:6px;color:var(--muted);font-size:14px}
.site-nav span{padding:2px 0}

/* 页面容器：桌面使用3:9网格 */
.page-wrap{padding:28px var(--gutter)}
.container{display:grid;grid-template-columns:1fr;gap:24px;max-width:calc(var(--max-width) + 2*var(--gutter));margin:0 auto}
.left-rail{order:0}
.article-col{order:1}

/* left-rail 元信息沿桌面边缘纵向排列 */
.left-rail{display:flex;flex-direction:column;gap:18px}
.left-top .ad{background:var(--mist);color:var(--muted);padding:10px;font-size:14px}
.meta-vertical{display:flex;flex-direction:column;gap:14px;color:var(--muted);font-size:13px}
.meta-vertical label{display:block;font-size:11px;color:var(--muted);margin-bottom:4px}
.meta-item time{display:block;color:var(--text)}
.keywords{white-space:normal}
.index-list{padding-top:6px}
.index-title{font-size:13px;color:var(--navy);margin:0 0 8px 0}
.index-list ul{display:flex;flex-direction:column;gap:6px}
.index-list span{color:var(--muted);font-size:14px}

/* 文章列 */
.article-header h1{font-size:28px;line-height:1.18;margin:6px 0 12px 0;color:var(--text)}
.article-summary .description{color:var(--muted);margin:0;font-size:15px}
.section-sep{border:0;border-top:1px solid rgba(11,43,74,0.06);margin:22px 0}
.article-body{color:var(--text);font-size:16px;line-height:1.78}
.article-body p{margin:0 0 16px 0}
.ad{background:var(--mist);padding:12px;color:var(--muted);font-size:14px;margin:18px 0}
.faq-section h2,.related-section h2{font-size:16px;margin:0 0 10px 0;color:var(--navy)}
.faq-list{border-top:0}
/* 横线问答列表风格 */
.faq-list > *{padding:12px 0;border-top:1px solid rgba(11,43,74,0.06)}
.faq-list > *:first-child{border-top:0}
.related-list{font-size:14px;color:var(--muted)}
.related-list ul{display:block}
.related-list li{padding:6px 0;border-bottom:0}

.site-footer{padding:22px var(--gutter);color:var(--muted);font-size:13px;border-top:1px solid rgba(11,43,74,0.04);margin-top:36px}
.footer-inner{max-width:var(--max-width);margin:0 auto}

/* 手机端规则：左栏变成标题下方的紧凑信息带，正文随后完整显示。必须在max-width:767px生效。 */
@media (max-width: 767px){
  :root{--gutter:16px}
  .page-wrap{padding:18px var(--gutter)}
  .container{grid-template-columns:1fr;max-width:100%;gap:12px}
  .brand-link{font-size:18px}
  .site-nav ul{flex-direction:row;gap:12px;overflow:auto}
  .left-rail{order:1;background:transparent;gap:10px;padding:0}
  /* 在手机上把元信息带变成紧凑信息带，位于标题下方 */
  .article-col{order:0}
  .article-header h1{font-size:20px}
  .article-summary .description{font-size:14px}
  .meta-vertical{flex-direction:row;gap:12px;font-size:12px}
  .meta-item{display:flex;flex-direction:column}
  .meta-item label{display:none}
  .index-list{display:none}
  .left-top .ad{display:block}
  .article-body{font-size:15px}
  .ad{margin:14px 0}
  .faq-list > *{padding:10px 0}
  .related-list{font-size:14px}
  .site-footer{padding:18px var(--gutter)}
  /* 确保在320px无横向滚动 */
  html,body{overflow-x:hidden}
}

/* 桌面端规则：至少在1024px及以上形成左窄右宽的非对称网格，元信息沿边缘纵向排列并可使用黏性布局。 */
@media (min-width: 1024px){
  .container{grid-template-columns:3fr 9fr;max-width:var(--max-width);align-items:start}
  .left-rail{padding-right:10px;min-width:220px}
  .meta-vertical{position:sticky;top:24px}
  .article-col{padding-left:24px}
  .article-header h1{font-size:34px}
  .article-body{font-size:17px;max-width:900px}
  .left-top .ad{max-width:300px}
}

/* 可访问性与细节 */
label{font-weight:600}
[role="main"]:focus{outline:2px solid rgba(11,43,74,0.12)}