:root{
  /* 配色与基准 */
  --bg:#f7faf9; /* 青灰底感 */
  --surface:#ffffff; /* 局部底色，方角 */
  --muted:#6b7b81; /* 文本次色 */
  --accent:#2f90a8; /* 湖蓝 */
  --border:rgba(47,144,168,0.12);
  --line:rgba(47,144,168,0.06);

  --max-desktop:1320px; /* 中心容器最大值，在 1120-1440 区间内取值 */

  --font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei", Arial, sans-serif;
  --type-scale: 16px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font-stack);
  font-size:var(--type-scale);
  color:#0f2226;
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  line-height:1.5; /* 紧凑型阅读 */
}

.page-root{display:flex;flex-direction:column;min-height:100vh}

/* 广告容器样式（独立，不悬浮、不覆盖） */
.ad-slot{background:transparent;padding:10px 16px;border-top:1px solid transparent;border-bottom:1px dashed var(--border);color:var(--muted);font-size:0.95rem}
.ad-top,.ad-middle,.ad-bottom{margin:8px 0}

/* 站点头部与导航 */
.site-header{
  display:flex;align-items:center;gap:18px;padding:14px 20px;border-bottom:1px solid var(--border);background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 100%); /* 透明，仅占位 */
}
.brand{font-weight:600;color:var(--accent);font-size:1.05rem}
.site-nav ul{display:flex;gap:12px;list-style:none;padding:0;margin:0}
.site-nav a{color:var(--muted);text-decoration:none;font-size:0.94rem}
.site-nav a:hover{color:var(--accent)}

/* 页面总布局：左刊头 + 中心容器 */
.page-main{display:flex;gap:24px;padding:18px 20px}

/* 左侧纵向刊头（桌面为列，移动为行或折叠） */
.nav-left{min-width:180px}
.nav-left nav ol{list-style:none;padding:8px 0;margin:0;border-left:1px solid var(--border)}
.nav-left li{padding:8px 12px}
.nav-left a{color:var(--muted);text-decoration:none}

/* 中心容器：承载主文与注释栏 */
.container{flex:1;display:grid;gap:28px;align-items:start;justify-items:center}

/* 中心版式：编辑部式双栏（正文主列 + 注释栏） */
.edition{width:100%;max-width:var(--max-desktop);display:grid;grid-template-columns:1fr 320px;gap:28px;align-items:start}

.article{background:var(--surface);border:1px solid var(--border);padding:18px;border-radius:6px}
.article-head{padding-bottom:8px;border-bottom:1px solid rgba(0,0,0,0.03);margin-bottom:12px}

/* 标题：单一 H1，居中 */
.title{margin:8px 0 10px 0;font-size:1.6rem;line-height:1.25;text-align:center;color:#072b31;font-weight:700}

/* 元信息与摘要：元信息并列显示，摘要左对齐 */
.meta{display:flex;gap:12px;align-items:center;justify-content:center;color:var(--muted);font-size:0.92rem}
.meta .now{opacity:0.95}
.summary{margin:12px 0 0 0;color:#0f2226;max-width:880px;text-align:left}

/* 正文区视觉签名：双层基线网格感（细节线条，轻度视觉提示，不作为渐变面） */
.article-body{padding-top:12px}
.content{
  color:#182627;
  font-size:0.98rem;
  line-height:1.65; /* 基线密集感 */
  hyphens:auto;
  word-break:break-word;
  background-color:transparent;
  /* 双层基线：主线与次线，极淡 */
  background-image:repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,0) calc(1.65rem - 1px), rgba(47,144,168,0.02) calc(1.65rem - 1px), rgba(47,144,168,0.02) 1.65rem),
                    repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,0) calc(0.825rem - 0.5px), rgba(47,144,168,0.01) calc(0.825rem - 0.5px), rgba(47,144,168,0.01) 0.825rem);
  background-repeat:repeat;
  padding:6px 4px;
}
.content p{margin:0 0 0.9rem 0}
.content h2, .content h3{margin:1.1rem 0 0.45rem 0;color:#0b2d31}

/* FAQ 风格：编号式问答（不虚构步骤） */
.faq{margin-top:18px;padding-top:12px;border-top:1px dashed var(--border)}
.faq h2{font-size:1.05rem;margin:0 0 8px 0}
.faq-list{counter-reset:faq;list-style:none;padding:0;margin:0}
.faq-list > li{counter-increment:faq;padding:10px 0;border-bottom:1px solid rgba(0,0,0,0.03)}
.faq-list > li:before{content:counter(faq) ".";color:var(--accent);font-weight:600;margin-right:10px}

/* 相关阅读：编号列表样式 */
.related{margin-top:18px}
.related h3{font-size:0.98rem;margin:0 0 8px 0}
.related-list{list-style:none;padding:0;margin:0;counter-reset:rel}
.related-list > li{counter-increment:rel;padding:6px 0;border-bottom:1px dashed rgba(0,0,0,0.03)}
.related-list > li:before{content:counter(rel) ".";color:var(--accent);display:inline-block;width:30px}

/* 侧栏样式 */
.article-aside{background:var(--surface);border:1px solid var(--border);padding:14px;border-radius:6px}
.aside-block h4,.meta-block h4{margin:0 0 8px 0;font-size:0.95rem;color:#0b2d31}
.aside-block p{margin:0 0 8px 0;color:var(--muted);font-size:0.93rem}

/* 页脚 */
.site-footer{padding:12px 20px;color:var(--muted);font-size:0.9rem;border-top:1px solid var(--border);background:transparent}

/* 可读性与密度控制：紧凑 */
.article, .article-aside{line-height:1.45}

/* --- 响应式规则 --- */
/* 明确要求的桌面规则 (min-width:1024px) */
@media (min-width:1024px){
  .site-header{padding:16px 40px}
  .page-main{padding:20px 40px}
  .nav-left{display:block}
  .site-nav ul{gap:18px}
}

/* 更明确的桌面容器区间，确保容器在 1120px—1440px 之间（当视口允许时） */
@media (min-width:1120px){
  .container{max-width:var(--max-desktop);width:clamp(1120px,72vw,1320px)}
  .edition{grid-template-columns:1fr 320px}
}

/* 手机规则 (max-width:767px)：中轴布局解除，全左对齐单列，侧栏下移，避免窄正文 */
@media (max-width:767px){
  body{font-size:15px}
  .page-main{flex-direction:column;padding:10px}
  .nav-left{order:0;min-width:0}
  .site-nav ul{flex-wrap:wrap}
  .container{width:100%}
  .edition{grid-template-columns:1fr;gap:12px}
  .article{padding:14px}
  .title{text-align:center;font-size:1.25rem}
  .summary{text-align:left}
  .meta{justify-content:flex-start}
  .article-aside{order:2}
  .related{order:3}
  .faq{order:4}
  /* 避免横向滚动 */
  .site-nav ul{gap:8px}
  .nav-left ol{border-left:none;padding-left:0}
}

/* 可访问性小调整 */
a:focus{outline:2px dashed rgba(47,144,168,0.25);outline-offset:2px}

/* 禁止的视觉套路（确保无蓝紫渐变/发光按钮） */
button, .btn{background:none;border:1px solid var(--accent);color:var(--accent);box-shadow:none}