:root{
  --navy:#0b2b4a; /* 海军蓝 */
  --mist:#f5f7f8; /* 浅雾灰 */
  --text:#111213;
  --muted:#6b7378;
  --max-width:1200px; /* 桌面容器宽度（1120-1440 范围内） */
  --gutter:28px;
  --title-font: Georgia, "Times New Roman", serif;
  --body-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Microsoft YaHei", sans-serif;
}

/* 基础版式 */
*{box-sizing:border-box}
html,body{height:100%;background:#fff;color:var(--text);font-family:var(--body-font);margin:0}
.page-wrap{display:flex;justify-content:center;padding:24px}
.page-grid{width:100%;max-width:var(--max-width);display:block}
.site-header{padding:18px 24px;border-bottom:1px solid rgba(11,43,74,0.06);background:linear-gradient(90deg, rgba(11,43,74,0.02), rgba(245,247,248,0));}
.brand{display:flex;align-items:center;gap:12px}
.brand .home{font-weight:700;color:var(--navy);text-decoration:none;font-size:18px}
.brand .seed{font-size:12px;color:var(--muted)}
.index-bar{display:flex;gap:14px;margin-top:10px;color:var(--muted);font-size:13px}
.index-bar a{color:var(--navy);text-decoration:none}
.index-bar span{opacity:0.95}
.ad-container{margin:18px 24px;min-height:0}
.ad-container > *{display:block}

/* 文章基础 */
.content{background:transparent;padding:18px 0}
.title{font-family:var(--title-font);font-size:34px;line-height:1.12;margin:6px 0 12px;color:var(--navy);font-weight:600}
.meta{color:var(--muted);font-size:13px;display:flex;gap:18px;align-items:center;margin-bottom:14px}
.meta time{display:inline-block}
.meta .keywords{opacity:0.95}

/* 摘要（视觉签名：窄色带） */
.summary{display:flex;align-items:flex-start;gap:12px;margin:8px 0 20px;padding-left:8px}
.summary .accent-band{width:6px;height:36px;background:var(--navy);border-radius:2px;margin-top:6px;flex:0 0 6px}
.summary .summary-text{margin:0;color:var(--muted);background:transparent}

.article-body{color:var(--text);line-height:1.78;font-size:16px}
.article-body p{margin:0 0 1.1em}

/* 右侧信息区 */
.side{margin-top:22px}
.side section{padding:10px 0}
.meta-card dl{margin:0;font-size:14px;color:var(--muted)}
.meta-card dt{font-weight:600;color:var(--navy);margin-top:8px}
.meta-card dd{margin:2px 0 6px}
.faq h3,.related h3{margin:0 0 8px;color:var(--navy);font-size:16px}
.faq-list{border-top:1px solid rgba(11,43,74,0.06)}
.faq-list > *{padding:12px 0;border-bottom:1px solid rgba(11,43,74,0.06);color:var(--muted)}
.related-list{display:flex;flex-wrap:wrap;gap:8px}
.related-list > *{font-size:13px;color:var(--navy);padding-right:8px}

.site-footer{border-top:1px solid rgba(11,43,74,0.06);padding:18px 24px;margin-top:28px;color:var(--muted);font-size:13px}
.sr{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* 桌面布局（>=1024px）——非对称杂志网格：标题区 7/5 分栏，正文主列偏左，右侧元信息和FAQ错位排列 */
@media (min-width:1024px){
  .page-grid{display:grid;grid-template-columns:7fr 5fr;gap:var(--gutter);align-items:start}
  .content{grid-column:1 / 2;padding-right:12px}
  .side{grid-column:2 / 3;padding-left:12px}
  /* 让侧栏内信息错位：元信息靠上，FAQ 推下留白 */
  .meta-card{margin-top:6px}
  .faq{margin-top:40px}
  .related{margin-top:28px}
  /* 提升标题尺寸但保持不超过两行的视觉策略：大字号和紧凑行距 */
  .title{font-size:44px;line-height:1.08}
  .article-body{font-size:17px}
}

/* 手机端重排（<=767px）：恢复自然文档顺序：标题、元信息、摘要、正文、FAQ、推荐 */
@media (max-width:767px){
  .page-wrap{padding:12px}
  .page-grid{display:block;max-width:100%;width:100%}
  .site-header{padding:12px}
  .brand .home{font-size:16px}
  .index-bar{gap:10px;flex-wrap:wrap}
  .content{padding:0}
  .title{font-size:22px;line-height:1.16;margin-bottom:8px}
  .meta{flex-direction:column;align-items:flex-start;gap:6px;font-size:13px}
  .summary{padding-left:0}
  .summary .accent-band{display:none}
  .article-body{font-size:15px;line-height:1.8}
  .side{margin-top:18px}
  .faq{margin-top:8px}
  .related-list{gap:10px}
  .ad-container{margin:12px 0}
  /* 确保在最窄 320px 不横向滚动 */
  body,html{overflow-x:hidden}
  .page-wrap{padding-left:12px;padding-right:12px}
}

/* 中间宽度屏幕（768-1023）调整 */
@media (min-width:768px) and (max-width:1023px){
  .page-grid{max-width:960px;margin:0 auto}
  .title{font-size:28px}
}

/* 可访问性与可读性增强 */
a{color:var(--navy)}
small{color:var(--muted)}