/* 样式变量与基础设置 */
:root{
  --paper:#f6f3ea; /* 米白 */
  --ink:#0b2f26;   /* 墨绿（近黑感）*/
  --muted:#6b6b6b;
  --line:rgba(11,47,38,0.12);
  --max-width:1280px; /* 在 1120-1440 范围内选择中位值 */
  --gap:28px;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei", sans-serif;
  --serif: Georgia, "Times New Roman", "Songti SC", serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}
a{color:var(--ink);text-decoration:none}
a:focus{outline:1px dashed var(--ink)}

/* 报头：双层报头，居中站名，左右文本链接（直角与细线） */
.site-header{border-bottom:1px solid var(--line);padding:10px 0 18px}
.header-row{display:flex;align-items:center;justify-content:space-between;max-width:var(--max-width);margin:0 auto;padding:0 20px}
.header-row--meta{font-size:13px;color:var(--muted);border-bottom:1px solid transparent}
.header-row--title{padding-top:10px}
.site-name{font-family:var(--serif);font-weight:700;font-size:26px;color:var(--ink);text-align:center;flex:1}
.nav-left,.nav-right{min-width:120px}
.nav-home{font-weight:600}
.nav-right{color:var(--muted);text-align:right}

/* 页面容器（桌面限制在1120-1440范围内） */
.container{width:calc(100% - 40px);margin:26px auto;padding:0}

/* 文章头部：标题居中，摘要左对齐 */
.article-title{font-family:var(--serif);font-size:36px;text-align:center;margin:6px 0 10px;color:var(--ink);line-height:1.08}
.meta-line{display:flex;gap:10px;align-items:center;justify-content:center;font-size:13px;color:var(--muted);margin-bottom:12px}
.summary{max-width:900px;margin:0 auto 18px;text-align:left;color:var(--muted)}

/* 内容网格：桌面 8/4 非对称；移动单列 */
.content-grid{display:grid;grid-template-columns:1fr;gap:24px}
.content-main{background:transparent}
.content-label{font-weight:600;color:var(--muted);margin-bottom:8px}
.content-body{white-space:normal;color:var(--ink)}
.content-aside{border-left:1px solid var(--line);padding-left:18px}
.aside-title{font-weight:700;margin-bottom:8px}
.aside-nav{font-size:14px;color:var(--muted)}

/* 广告槽：不固定、不覆盖正文、无悬浮 */
.ad-slot{max-width:var(--max-width);margin:18px auto;padding:8px 12px;border:1px dashed var(--line);background:transparent;color:var(--muted);font-size:13px}
.ad-top{margin-top:12px}

/* FAQ 使用 details 列表的视觉样式（无卡片） */
.faq-block{max-width:var(--max-width);margin:22px auto;padding:0 20px}
.faq-block .block-title{font-weight:700;margin:6px 0 10px}
.faq-area details{border-top:1px solid var(--line);padding:10px 0}
.faq-area summary{cursor:pointer;font-weight:600}
.faq-area p{margin:8px 0 0;color:var(--muted)}

/* 相关阅读底部三列短卡，无阴影无圆角 */
.related-block{max-width:var(--max-width);margin:22px auto;padding:0 20px}
.related-block .block-title{font-weight:700;margin:6px 0 12px}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.related-grid a{display:block;padding:10px;border:1px solid var(--line);color:var(--ink);text-decoration:none}
.related-grid a small{display:block;color:var(--muted);font-size:12px;margin-top:6px}

/* 页脚 */
.site-footer{border-top:1px solid var(--line);padding:16px 0;margin-top:28px;color:var(--muted);font-size:13px;text-align:center}

/* 桌面专属规则（>=1024px）——严格实现桌面排版差异与容器宽度要求 */
@media (min-width:1024px){
  .container{min-width:1120px;max-width:1440px;width:var(--max-width);padding:0 20px}
  .article-title{font-size:56px;margin-top:8px}
  /* 标题跨栏视觉：在网格上方展示，正文采用 8/4 分栏 */
  .content-grid{grid-template-columns:8fr 4fr;align-items:start;gap:36px}
  .content-main{padding-right:10px}
  .content-aside{padding-left:28px}
  .summary{margin-left:0;margin-right:auto}
  .related-grid{grid-template-columns:repeat(3,1fr)}
}

/* 手机专属规则（<=767px）——单列、缩小标题、保证 320px 无横向滚动 */
@media (max-width:767px){
  :root{--gap:16px}
  body{font-size:15px}
  .site-header{padding:8px 0}
  .header-row--meta{padding:0 12px}
  .site-name{font-size:18px}
  .container{width:100%;margin:14px auto;padding:0 12px}
  .article-title{font-size:22px;text-align:center;margin:6px 0}
  .meta-line{justify-content:flex-start;padding-left:2px}
  .summary{font-size:14px;margin:8px 0}
  .content-grid{grid-template-columns:1fr;gap:18px}
  .content-aside{border-left:none;padding-left:0}
  .related-grid{grid-template-columns:1fr;gap:10px}
  .ad-slot{margin:14px 12px}
  .faq-block,.related-block{padding:0 12px}
}

/* 中间区间（768-1023）保守处理，保持阅读密度 */
@media (min-width:768px) and (max-width:1023px){
  .container{max-width:960px;padding:0 18px}
  .article-title{font-size:34px}
  .content-grid{grid-template-columns:1fr;gap:22px}
  .related-grid{grid-template-columns:repeat(2,1fr)}
}

/* 可访问性与可读性微调 */
.block-title{font-size:16px}
.article-title, .aside-title{letter-spacing:0.2px}

/* 遵守视觉签名：只使用直角和细线；禁用圆角与重阴影 */
*{border-radius:0}
.box-shadow-none{box-shadow:none}