:root{
  --navy:#082a4f; /* 海军蓝 */
  --mist:#f3f6f8; /* 浅雾灰 */
  --text:#0b1220;
  --muted:#6b7280;
  --accent-border:rgba(8,42,79,0.08);
  --max-width:1280px; /* 在1120-1440区间内 */
  --gutter:20px;
  --radius:4px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Reset-ish */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;color:var(--text);background:#ffffff;font-size:16px;line-height:1.6}
.page-root{min-height:100vh;display:flex;flex-direction:column}

/* Header: 窄报头（toolbar 合并站名与面包屑） */
.site-header{border-bottom:1px solid var(--accent-border);background:transparent;padding:12px var(--gutter)}
.toolbar{display:flex;align-items:center;gap:12px}
.brand{font-weight:700;color:var(--navy);text-decoration:none;margin-right:6px}
.breadcrumb{color:var(--muted);font-size:13px}
.breadcrumb .sep{color:var(--muted);margin:0 6px}
.index-nav{margin-top:8px;padding:6px 0}
.index-nav ul{display:flex;gap:12px;list-style:none;padding:0;margin:0;color:var(--muted);font-size:13px}
.index-nav li{padding:4px 6px;border-radius:3px}

/* Container constrains width between 1120 - 1440; chosen 1280 max */
.container{width:100%;max-width:var(--max-width);min-width:720px;margin:18px auto;padding:0 var(--gutter)}
.briefing{display:block}
.article-meta{margin-bottom:12px}
.eyebrow{display:inline-block;color:var(--navy);font-size:13px;font-weight:600;text-transform:none;margin-bottom:6px}
.title{font-size:28px;line-height:1.18;margin:6px 0;color:var(--text)}
.meta-row{display:flex;gap:12px;color:var(--muted);font-size:13px;margin-bottom:8px}
.summary{background:var(--mist);padding:10px;border-left:4px solid var(--navy);margin:6px 0;border-radius:2px}

/* Grid: 10/2 layout on desktop via CSS grid of 12 tracks */
.layout-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:20px;align-items:start}
.main-column{grid-column:1 / span 10}
.side-column{grid-column:11 / span 2}

.content{color:var(--text);font-size:15px;line-height:1.75}
.content p{margin:0 0 1em}

/* FAQ: 横线问答列表 - the data in {{faq}} expected to be structured; we add visual separators */
.faq{margin-top:20px}
.faq-title{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.faq-list > * + *{border-top:1px solid var(--accent-border);padding-top:12px;margin-top:12px}
.faq-list dt{font-weight:700;color:var(--navy)}
.faq-list dd{margin:6px 0 0 0;color:var(--text)}

/* Ads are neutral containers; never fixed or overlay */
.ad-container{margin:14px 0;padding:8px;border:1px dashed var(--accent-border);background:transparent;color:var(--muted);font-size:13px}

/* Side note styling: 方角框线、局部底色、无渐变 */
.side-frame{border:1px solid var(--accent-border);background:transparent;padding:12px;border-radius:var(--radius)}
.side-head{font-size:13px;color:var(--navy);font-weight:700;border-bottom:1px solid var(--accent-border);padding-bottom:8px;margin-bottom:8px}
.side-note{margin:0;color:var(--muted);font-size:13px}
.side-key{margin-top:8px;color:var(--muted);font-size:13px}
.side-key span{color:var(--text);font-weight:600}

/* Related: 底部三列短卡但不用阴影；视觉签名：反向色块标题栏 */
.related{margin-top:22px}
.related-head{background:var(--navy);color:#fff;padding:8px 10px;font-weight:700;border-radius:2px 2px 0 0}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:12px;border:1px solid var(--accent-border);border-top:none}
.related-grid > *{padding:10px;background:var(--mist);border-radius:2px;color:var(--text);font-size:14px;line-height:1.4}
.related-grid a{color:inherit;text-decoration:none}

.site-footer{margin-top:auto;border-top:1px solid var(--accent-border);padding:12px var(--gutter);color:var(--muted);font-size:13px}

/* Desktop-specific rules: must exist for min-width:1024 */
@media (min-width:1024px){
  :root{font-size:16px}
  .container{padding:0 28px}
  .title{font-size:34px}
  .layout-grid{gap:28px}
  .main-column{grid-column:1 / span 10}
  .side-column{grid-column:11 / span 2}
  .related-grid{grid-template-columns:repeat(3,1fr)}
  /* header density tighter */
  .index-nav ul{gap:18px}
}

/* Mobile-specific rules: max-width:767 手机端独立重排 */
@media (max-width:767px){
  :root{font-size:15px}
  .container{min-width:0;padding:12px}
  .index-nav{display:none} /* 较窄时隐藏索引导航，保持工具栏简洁 */
  .title{font-size:20px}
  .eyebrow{font-size:12px}
  .layout-grid{display:block}
  .main-column{width:100%;grid-column:auto}
  /* 边注并入标题下方 */
  .side-column{grid-column:auto;margin-top:12px}
  .side-frame{background:var(--mist);border:1px solid var(--accent-border)}
  .related-grid{grid-template-columns:repeat(1,1fr)}
  .ad-container{font-size:13px}
  .summary{font-size:14px}
  /* 确保无横向滚动 */
  body,html{overflow-x:hidden}
}

/* Accessibility helpers */
.sr{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}