:root{
  --bg:#F7F6F2; /* 纸白 */
  --navy:#0F2B4C; /* 藏蓝 */
  --accent:#7A9CC6; /* 克制强调色（用于首字首词） */
  --muted:#6B6B6B;
  --line:#D6D6D0;
  --max-content-width:1280px; /* 在 1120-1440 范围内，选取中间值 */
  --gap:20px;
  --rail-width:280px;
  --font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-serif: Georgia, 'Times New Roman', serif;
}

/* 全局重置与版面 */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font-sans);
  background:var(--bg);
  color:#111;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

a{color:var(--navy);text-decoration:none}
a:focus{outline:2px solid var(--accent)}

.site-header{
  border-bottom:1px solid var(--line);
  background:transparent;
}
.header-inner{
  max-width:var(--max-content-width);
  margin:0 auto;
  padding:12px var(--gap);
  display:flex;
  align-items:center;
  gap:18px;
}
.brand{
  font-family:var(--font-serif);
  color:var(--navy);
  font-weight:700;
  font-size:18px;
}
.header-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:12px}
.header-nav a{color:var(--muted);font-size:14px}

.ad-container{max-width:var(--max-content-width);margin:16px auto;padding:8px var(--gap);color:var(--muted);font-size:14px}
.ad-top,.ad-middle,.ad-bottom{border:1px dashed var(--line);background:transparent}

.page-wrap{display:flex;justify-content:center}
.layout-grid{
  width:100%;
  max-width:var(--max-content-width);
  min-width:1120px; /* 遵守桌面容器最小约束 */
  padding:20px var(--gap);
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
}

/* 左侧栏与主栏基线样式（桌面规则在 media 查询中覆盖为 12 栏布局） */
.left-rail{order:1}
.main-rail{order:2}

.rail-title{font-family:var(--font-serif);font-size:18px;color:var(--navy);margin:0 0 12px}
.breadcrumbs{font-size:13px;color:var(--muted);display:flex;gap:6px;align-items:center}
.breadcrumbs a{color:var(--muted)}
.breadcrumbs .sep{color:var(--line)}

.meta-rail{margin-top:18px;border-top:1px solid var(--line);padding-top:12px}
.meta-row{font-size:13px;color:var(--muted);margin-bottom:8px}
.meta-label{display:inline-block;min-width:64px;color:var(--muted);font-weight:600}

.rail-related{margin-top:18px}
.rail-heading{font-size:14px;color:var(--navy);margin:0 0 8px}
.related-list{font-size:14px;color:var(--muted)}

.article{background:transparent}
.article-header{margin-bottom:12px}
.article-title{
  font-family:var(--font-serif);
  font-size:28px;
  margin:0 0 6px;
  color:#0b2338;
  text-align:left;
  line-height:1.15;
}
/* 视觉签名：标题首字母/首词用强调色，但保持克制 */
.article-title::first-letter{color:var(--accent);font-weight:700}

.title-decor{height:1px;background:var(--navy);width:80px;margin:8px 0}
.summary{font-size:15px;color:var(--muted);margin:8px 0 18px}

.content{font-size:16px;color:#111;font-family:var(--font-sans)}
.content p{margin:0 0 1em}

.faq{margin-top:26px}
.section-heading{font-size:16px;color:var(--navy);margin:0 0 12px}
.faq-grid{display:block}

.related-bottom{margin-top:28px}
.related-grid{display:block}

.site-footer{border-top:1px solid var(--line);padding:18px var(--gap);text-align:center;color:var(--muted);font-size:13px}

/* 手机可见/桌面隐藏类 */
.mobile-only{display:none}
.desktop-only{display:none}

/* ---- 桌面专属布局（至少在 1024px 以上发生明显结构变化） ---- */
@media (min-width:1024px){
  .layout-grid{
    grid-template-columns: 320px 1fr; /* 宽屏下采用左侧窄栏 + 右侧大栏的编辑部式网格 */
    gap:36px;
    min-width:1120px; /* 保证不被压缩到手机窄度 */
    padding:28px var(--gap);
  }

  .left-rail{
    grid-column:1 / 2;
    width:100%;
    border-right:1px solid var(--line);
    padding-right:20px;
    position:relative;
  }
  .main-rail{grid-column:2 / 3;padding-left:20px}

  /* 信息层级：左侧承载站名、面包屑、元信息与相关推荐，视觉重心与常规右侧栏相反（reverse-rail） */
  .meta-desktop{display:block}
  .meta-top{display:none}

  /* FAQ 表格式：左侧问题右侧答案 */
  .faq-grid{
    display:grid;
    grid-template-columns: 1fr 2fr;
    gap:12px 24px;
    align-items:start;
  }
  /* 适配常见输入：若编辑器以 <dl> 形式提供 faq，给 dl 子元素样式 */
  .faq-grid dl{margin:0}
  .faq-grid dt{font-weight:700;color:var(--navy);margin:0 0 8px}
  .faq-grid dd{margin:0;color:#222}

  /* 底部相关阅读：三列短卡（无阴影、无大圆角） */
  .related-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
  }
  .related-grid > *{border:1px solid var(--line);padding:12px;background:transparent}

  .rail-related .related-list{display:block}

  .desktop-only{display:block}
  .mobile-only{display:none}
}

/* ---- 手机端规则（小于等于 767px） ---- */
@media (max-width:767px){
  body{font-size:15px}
  .layout-grid{min-width:initial;grid-template-columns:1fr;padding:16px}

  .left-rail{order:2;border-right:none;padding:0}
  .main-rail{order:1}

  /* 将左侧信息拆分为标题前后的紧凑区块 */
  .meta-top{display:block;margin-bottom:10px;font-size:13px;color:var(--muted)}
  .meta-after-title{display:block;margin-top:8px;margin-bottom:8px}

  .meta-desktop{display:none}

  .article-title{font-size:20px}
  .title-decor{width:56px}
  .summary{font-size:14px}

  .faq-grid{display:block}
  .related-grid{display:block}

  .mobile-only{display:block}
  .desktop-only{display:none}

  /* 保证 320px 时无横向滚动 */
  .header-inner,.ad-container,.layout-grid{padding-left:12px;padding-right:12px}
  .article-title{word-break:break-word}
}

/* 可访问性与印刷式阅读的排版（人文杂志宽松型） */
h1,h2,h3{line-height:1.2}
p,li,dd{orphans:2;widows:2}

/* 表面风格：无圆角、细分隔线、无阴影，避免科技仪表盘深色风格 */
*{border-radius:0}