/* 基础变量与版式 */
:root{
  --bg: #f7f8f6; /* 轻纸张底色 */
  --panel: #ffffff;
  --ink: #142029; /* 深青灰 */
  --muted: #5f6b6d; /* 青灰 */
  --accent: #4aa3c6; /* 湖蓝 */
  --rule: rgba(20,32,41,0.06);
  --maxwide: 1360px; /* 在 1120-1440 范围内生效 */
  --baseline: 1.5rem; /* 视觉基线高度，视觉签名双层基线网格会参照 */
  --radius: 6px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  color-scheme: light;
}

/* 全局重置与布局节奏 */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-size:16px;
}

.page{display:flex;justify-content:center;padding:28px 20px 48px}

/* 顶部 masthead */
.site-header{padding:18px 0 8px}
.masthead{max-width:var(--maxwide);margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:6px}
.brand{font-weight:700;color:var(--ink);text-decoration:none;font-size:1.05rem}
.top-nav{font-size:0.95rem;color:var(--muted);display:flex;gap:14px}
.header-rule{border:none;border-top:1px solid var(--rule);margin:12px 0 0;max-width:var(--maxwide)}

/* Article 容器 */
.article{max-width:var(--maxwide);width:100%;display:block}
.article-header{padding:18px 8px 12px}
.article-header h1{margin:0;color:var(--ink);font-size:1.6rem;line-height:1.2}
.headline-summary{margin-top:8px;color:var(--muted);font-size:1rem}
.meta{margin-top:10px;color:var(--muted);font-size:0.9rem;display:flex;gap:12px;align-items:center}
.meta time{color:var(--muted)}

/* 广告容器样式（独立、无悬浮） */
.ad{max-width:var(--maxwide);margin:14px auto;padding:6px 0;text-align:center;color:var(--muted);font-size:0.95rem}
.ad-top{margin-top:6px}

/* 文章网格：在不同断点以不同编排呈现 */
.article-grid{display:block;margin-top:18px}

/* 正文与侧栏基础 */
.content{background:transparent}
.content-inner{background:linear-gradient(transparent 0, transparent calc(var(--baseline) - 1px), rgba(74,163,198,0.02) calc(var(--baseline) - 1px), rgba(74,163,198,0.02) var(--baseline));
  /* 双层基线：再加一层更细的线 */
  background-image:
    repeating-linear-gradient(0deg, rgba(74,163,198,0.02) 0px, rgba(74,163,198,0.02) 1px, transparent 1px, transparent var(--baseline)),
    repeating-linear-gradient(0deg, rgba(20,32,41,0.01) 0px, rgba(20,32,41,0.01) 0.5px, transparent 0.5px, transparent calc(var(--baseline)/2));
  padding:14px 10px 18px; border-radius:0; color:var(--ink);
}
.content p{margin:0 0 1rem}
.content h2{margin:1.2rem 0 0.6rem;color:var(--accent)}
.content ul, .content ol{margin:0 0 1rem 1.25rem}

/* 侧栏 */
.side{margin-top:18px}
.faq details{border-top:1px dashed var(--rule);padding-top:10px}
.faq summary{cursor:pointer;font-weight:600;color:var(--ink);list-style:none;outline:none}
.faq-items{margin-top:8px;color:var(--muted)}
.related-title{font-size:0.95rem;color:var(--muted);margin:14px 0 6px}
.related-list{list-style:none;padding:0;margin:0;color:var(--muted);display:flex;flex-direction:column;gap:8px}
.related-list li{font-size:0.95rem}
.related-list a{color:var(--accent);text-decoration:none}

/* Footer */
.site-footer{padding:18px 0;border-top:1px solid var(--rule);margin-top:26px}
.footer-inner{max-width:var(--maxwide);margin:0 auto;color:var(--muted);font-size:0.9rem;text-align:center}

/* 小屏（手机）布局：320px 也不能横向滚动 */
@media (max-width: 767px){
  :root{font-size:15px}
  .page{padding:18px 12px 32px}
  .masthead{align-items:center}
  .header-rule{margin-top:10px}

  /* 标题与摘要上下排列（移动合同） */
  .article-header{padding:12px 0 6px}
  .article-header h1{font-size:1.2rem}
  .headline-summary{font-size:0.98rem}

  /* 单列流式：正文、FAQ、相关阅读依序显示（移动级联） */
  .article-grid{display:block}
  .content{order:0}
  .side{order:1;margin-top:18px}
  .ad{margin-left:0;margin-right:0}

  /* 内容内边距以确保无横向滚动 */
  .content-inner{padding:12px}
  .faq details{padding-top:8px}
  .related-list{gap:6px}
}

/* 大屏（桌面）布局：>=1024px，满足双栏、非对称 7/5 网格；标题与摘要左右各半 */
@media (min-width: 1024px){
  :root{font-size:16px}
  .page{padding:34px 20px 60px}
  .article{width:clamp(1120px, 92vw, 1440px)}

  /* 标题与摘要左右分置（各半） */
  .article-header{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start;padding:24px 0}
  .article-header h1{font-size:2rem;grid-column:1}
  .headline-summary{font-size:1.05rem;color:var(--muted);grid-column:2;padding-top:4px}
  .meta{grid-column:1 / span 2;margin-top:12px}

  /* 主体进入 7/5 两栏布局（非对称网格） */
  .article-grid{display:grid;grid-template-columns:7fr 5fr;gap:28px;align-items:start}
  .content{order:0}
  .side{order:1}
  .content-inner{padding:18px}
  .side{padding:6px 0 0}

  /* 侧栏内部密度较紧但不拥挤 */
  .faq summary{font-size:1rem}
  .related-title{font-size:1rem}
}

/* 中等宽度过渡样式（768-1023）保持舒展感 */
@media (min-width: 768px) and (max-width:1023px){
  .article{max-width:960px}
  .article-header{display:block}
  .headline-summary{margin-top:8px}
  .article-grid{display:block}
  .content-inner{padding:16px}
}

/* 可访问性与微交互（纯 CSS，平滑展开） */
details[open] .faq-items{animation:fadeIn 180ms ease-out}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* 防止常见的禁止样式（如深色仪表盘风） */
html[lang]{background:var(--bg)}

/* 辅助：隐藏但供屏幕阅读器用 */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}