:root{
  --paper:#f7f4ee; /* 纸白 */
  --navy:#0a2a44; /* 藏蓝 */
  --muted:#6b6b6b;
  --accent:#14344f;
  --max-width:1200px; /* 在1120-1440之间，选择1200作为默认 */
  --gap:24px;
  --radius:6px;
}

/* 基础重置与排版 */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","PingFang SC","Hiragino Sans GB","Microsoft Yahei",sans-serif;
  background:var(--paper);
  color:var(--navy);
  line-height:1.56; /* 技术资讯紧凑型但舒展 */
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.wrap{max-width:var(--max-width);margin:28px auto;padding:0 16px}

/* Header */
.site-header{padding:10px 0 18px;border-bottom:1px solid rgba(10,42,68,0.06);background:transparent}
.brand-row{display:flex;align-items:flex-end;gap:18px}
.brand-link{color:var(--navy);font-weight:700;text-decoration:none;font-size:18px}
.index-bar ul{list-style:none;padding:0;margin:8px 0 0;display:flex;gap:12px;align-items:center}
.index-bar a{color:var(--navy);text-decoration:none;font-weight:600}
.index-bar span{color:var(--muted)}

/* 广告容器（不得悬浮、黏贴或覆盖） */
.ad{background:transparent;padding:10px 0;font-size:14px;color:var(--muted)}
.ad-top,.ad-middle,.ad-bottom{display:block}

/* 页面主网格 - 默认桌面样式由媒体查询控制 */
.page-grid{display:grid;gap:var(--gap);align-items:start}
.left-col{order:0}
.content-area{order:1}

/* 文章区 */
.article-header{padding:6px 0 12px}
.article-title{
  margin:0 0 8px 0;
  color:var(--navy);
  font-size:34px; /* 超大标题 */
  line-height:1.08;
  font-weight:700;
  display:-webkit-box;
  -webkit-line-clamp:2; /* 不超过两行 */
  -webkit-box-orient:vertical;
  overflow:hidden;
  text-overflow:ellipsis;
}
.meta-row{font-size:13px;color:var(--muted);display:flex;gap:12px;align-items:center;margin-bottom:8px}
.summary{margin:8px 0 14px;color:rgba(10,42,68,0.88);font-size:15px}
.article-body{color:rgba(10,42,68,0.92);font-size:15px}

/* 视觉签名：正文首段轻量首字强调（不改写内容） */
.article-body > p:first-of-type::first-letter{
  float:left;
  font-size:26px;
  line-height:1;
  margin-right:8px;
  color:var(--accent);
  font-weight:600;
}

.section-title{font-size:15px;margin:0 0 10px 0;color:var(--accent);font-weight:700}

/* FAQ */
.faq-grid{display:grid;gap:12px}
.faq-section{margin-top:22px}

/* 相关阅读：三列短卡但不用阴影 */
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.related{padding-right:4px}
.related .item{background:transparent;padding:8px 6px;border-left:3px solid rgba(10,42,68,0.06)}
.related .item a{color:var(--navy);text-decoration:none;font-size:14px}

/* 页脚 */
.page-footer{margin-top:28px;padding-top:18px;border-top:1px solid rgba(10,42,68,0.06);color:var(--muted);font-size:13px}

/* 桌面布局：1024px 及以上 */
@media (min-width: 1024px){
  .wrap{max-width:var(--max-width);padding:0}
  .page-grid{grid-template-columns:360px 1fr;gap:36px}

  /* 形成错位的对角视觉：左侧推荐偏左、正文整体偏右并下移少量 */
  .left-col{align-self:start}
  .content-area{padding-top:16px}

  /* 更稠密的标题样式 */
  .article-title{font-size:40px}

  /* FAQ 两列 */
  .faq-grid{grid-template-columns:1fr 1fr}

  /* 相关阅读内短卡样式（无阴影） */
  .related .item{border-left-color:transparent;border-top:1px solid rgba(10,42,68,0.04);padding-top:10px}
  .related .item p{margin:0;font-size:13px;color:var(--muted)}
}

/* 手机端规则：最多 767px */
@media (max-width: 767px){
  .wrap{margin:12px auto;padding:0 12px}
  .page-grid{display:flex;flex-direction:column}

  /* 恢复自然顺序：标题、摘要、正文、FAQ、推荐（related） */
  .left-col{order:5}
  .content-area{order:1}

  /* 相关阅读移动到底部并改为单列或简单两列以免横向滚动 */
  .related-grid{grid-template-columns:repeat(2,1fr);gap:10px}

  .article-title{font-size:22px}
  .summary{font-size:14px}
  .article-body{font-size:15px}

  /* FAQ 单列 */
  .faq-grid{grid-template-columns:1fr}

  /* 避免横向滚动 */
  img,table{max-width:100%;height:auto}
}

/* 中等屏（768-1023px）保持可读性 */
@media (min-width: 768px) and (max-width: 1023px){
  .wrap{max-width:960px}
  .page-grid{display:grid;grid-template-columns:1fr;gap:18px}
  .related-grid{grid-template-columns:repeat(3,1fr)}
  .article-title{font-size:28px}
  .faq-grid{grid-template-columns:1fr}
}