/* 通用变量与重置 */
:root{
  --bg:#f6f8f8; /* 轻青灰背景 */
  --text:#22343b; /* 深青灰 */
  --muted:#6e8b8f; /* 青灰 */
  --accent:#2b6f80; /* 湖蓝 */
  --accent-strong:#1f5b67;
  --divider:#dfe8e9;
  --container-min:1120px; /* 桌面容器最小 */
  --container-max:1440px; /* 桌面容器最大 */
  --max-read-width:740px;
  --gap:18px; /* 紧凑密度 */
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  color-scheme: light;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  line-height:1.58;
  -webkit-font-smoothing:antialiased;
  font-size:16px;
}
a{color:var(--accent);text-decoration:none}
a:visited{color:var(--accent-strong)}
/* No large radii, no shadows */
.container, .site-wrap, .article, .related {border-radius:0}

/* Header */
.site-header{padding:18px 16px 6px;background:transparent}
.masthead{max-width:1200px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:8px}
.site-title{font-weight:700;font-size:20px;color:var(--text)}
.top-nav ul{display:flex;gap:14px;padding:0;margin:0;list-style:none;font-size:14px;color:var(--muted)}
.top-nav span{display:inline-block;padding:6px 8px}
.divider{border:none;border-top:1px solid var(--divider);margin:12px 0}

/* 左侧纵向刊头（desktop only visible） */
.vertical-rail{display:none}
.vertical-rail .rail-title{font-weight:700;padding:18px 12px;color:var(--accent)}
.vertical-rail .rail-nav ul{list-style:none;padding:0;margin:0}
.vertical-rail .rail-nav li{padding:8px 12px;color:var(--muted)}
.vertical-rail .rail-nav a{color:var(--accent)}

/* 主体容器（mobile 基本流式） */
.site-wrap{display:block;padding:18px 16px;max-width:100%;margin:0 auto}
.article{max-width:100%;margin:0 auto}
.article-header h1{font-size:28px;margin:0 0 12px;text-align:center;font-weight:800}
.meta{display:block;color:var(--muted);font-size:13px;margin-bottom:12px}
.meta .published{margin-right:12px}
.meta .now{color:var(--muted)}
.description{margin:10px 0 0;text-align:left;color:var(--text);max-width:var(--max-read-width)}

.content-block{margin-top:8px}
.content{color:var(--text);font-size:16px}
.content :where(p){margin:0 0 12px}

.faq{margin-top:22px}
.faq h2{font-size:16px;margin:0 0 8px}
.faq-list{padding-left:18px;margin:0;color:var(--muted)}

.related{margin-top:22px;padding:6px 0}
.related-heading{background:var(--accent);color:#fff;padding:8px 12px;font-weight:700}
.related-list{margin:0;padding:12px 18px 18px 20px;color:var(--muted)}
.related-list li{margin:6px 0}

.ad-slot{background:transparent;padding:10px 16px;margin:16px 0;border-top:1px solid var(--divider);border-bottom:1px solid var(--divider)}
.ad-slot[role="complementary"]{font-size:13px;color:var(--muted)}

.site-foot{padding:14px 16px;border-top:1px solid var(--divider);text-align:center;color:var(--muted);font-size:13px}

/* 桌面布局：至少1024px 生效，容器在1120-1440之间 */
@media (min-width:1024px){
  .vertical-rail{display:block;position:fixed;left:20px;top:28px;width:160px}
  .site-wrap{display:grid;grid-template-columns:360px 1fr;gap:28px;align-items:start; /* 非对称网格 */
            width:clamp(var(--container-min),90vw,var(--container-max));margin:40px auto;padding:0 24px}

  .article{grid-column:2;}
  .related{grid-column:1;position:relative;align-self:start}

  /* 标题区、摘要区和正文区的错位宽度形成对角视觉平衡；正文偏右，推荐偏左。 */
  .article-header{margin-left:40px;margin-right:0}
  .article-header h1{font-size:34px;margin-bottom:10px}
  .meta .description{max-width:600px;text-align:left;margin-left:0}
  .content-block{max-width:var(--max-read-width);margin-left:auto} /* 将正文偏右 */

  /* 相关栏反向色块标题栏作为视觉识别 */
  .related-heading{border-left:6px solid var(--accent-strong);}
  .related-list{counter-reset:item; padding-left:0}
  .related-list > *{display:block;padding:8px 12px;border-top:1px solid var(--divider);list-style:none}
  .related-list > *::before{counter-increment:item;content:counter(item)".";display:inline-block;width:28px;color:var(--accent);font-weight:700}

  /* 更紧凑的密度 */
  .site-header{padding:10px 16px 6px}
  .masthead{align-items:center}
}

/* 手机规则：320px 时无横向滚动，顺序为 标题、摘要、正文、FAQ、推荐 */
@media (max-width:767px){
  .vertical-rail{display:none}
  .site-wrap{display:block;padding:14px 12px}
  .article-header h1{font-size:20px}
  .meta .description{font-size:15px}
  .content{font-size:15px}
  .related{order:5;margin-top:18px}
  .faq{order:4}
  /* 确保无横向滚动 */
  html,body{overflow-x:hidden}
  .site-wrap, .article, .related{width:100%}
  .related-heading{padding:10px}
  .related-list > *{padding:8px 0}
}

/* 可访问性提示 */
a:focus{outline:2px solid var(--accent-strong);outline-offset:2px}

/* 避免常见禁止样式：无渐变、无发光按钮、无圆角大阴影 */
/* end of stylesheet */