/* 视界资讯看点 — 通用内容详情页模板 样式表
   视觉种子：89cd74587f591729
   设计要点：墨绿与米白；左侧纵向刊头；标题首字克制强调；桌面非对称双栏（推荐左、正文右）；手机线性重排
*/
:root{
  --bg: #f6f3ea; /* 米白 */
  --surface: #ffffff;
  --ink: #0f1a17; /* 深色文本 */
  --muted: #55615b;
  --accent: #0b5a40; /* 墨绿 */
  --sep: rgba(15,26,23,0.06);
  --max-width: 1280px; /* 页面最大宽度，1120-1440区间内 */
  --nav-width: 112px;
  --related-width: 300px;
  --gutter: 28px;
  --radius: 6px;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  --compact-line-height: 1.45;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--sans);
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:var(--compact-line-height);
  font-size:15px;
}
.page{
  max-width:var(--max-width);
  margin:28px auto;
  padding:0 18px;
}

/* 广告统一风格：独立容器，不遮盖、不浮动 */
.ad{background:transparent;color:var(--muted);font-size:13px;padding:10px 0;text-align:center}
.ad-top{margin-bottom:8px}
.ad-middle{margin:18px 0}
.ad-bottom{margin-top:18px}

/* 左侧纵向刊头 */
.side-nav{
  display:none; /* 默认移动端隐藏，桌面显示 */
}
.side-nav .nav-home{display:block;text-decoration:none;color:var(--accent);font-weight:600;margin-bottom:14px}
.side-nav .nav-list{display:flex;flex-direction:column;gap:8px}
.side-nav .nav-item{color:var(--muted);font-size:13px}

/* 主体网格：related (左)、content (右) 在同一排 */
.main-grid{
  display:block;
}
.related-column{
  display:block;
  margin-bottom:18px;
}
.related-wrap{background:transparent}
.related-title{font-size:14px;color:var(--accent);margin:0 0 8px 0}
.related-list{padding-left:18px;margin:0;color:var(--muted);font-size:14px}
.related-list > *{margin:6px 0}

/* 正文区 */
.content{background:transparent}
.article{background:var(--surface);padding:18px;border-radius:0}
.article-header{padding:0 0 12px 0}
.title-block{
  display:flex;align-items:flex-start;gap:16px;flex-wrap:nowrap;
}
.title{
  margin:0;color:var(--ink);font-size:26px;line-height:1.1;font-weight:700;
  /* 视觉识别：标题首字克制强调 */
}
.title::first-letter{color:var(--accent);font-weight:700}
.title-meta{color:var(--muted);font-size:13px;margin-left:auto;min-width:160px;display:flex;flex-direction:column;gap:6px;text-align:right}
.summary{margin:12px 0 6px 0;color:var(--muted);font-size:15px}
.sep{border:none;border-top:1px solid var(--sep);margin:8px 0}

.article-body{color:var(--ink);font-size:15px}
.article-body p{margin:0 0 12px 0}

.faq{margin-top:20px;padding-top:12px;border-top:3px solid var(--accent);background:transparent}
.faq-title{margin:0 0 10px 0;font-size:16px;color:var(--ink)}
.faq-list{color:var(--muted);font-size:14px}

.site-footer{margin-top:22px;padding-top:12px;border-top:1px solid var(--sep);color:var(--muted);font-size:13px;display:flex;justify-content:space-between;align-items:center}

/* 桌面规则：1024px 以上形成非对称三段式布局，正文偏右，推荐偏左，左侧纵向刊头显著 */
@media (min-width:1024px){
  .page{display:grid;grid-template-columns:var(--nav-width) 1fr;gap:20px;padding:0 20px}
  .side-nav{display:flex;flex-direction:column;align-items:flex-start;padding-top:6px}
  .main-grid{grid-column:2 / -1;display:grid;grid-template-columns:var(--related-width) 1fr;gap:28px;align-items:start}

  .related-column{order:1}
  .content{order:2}

  /* 内容容器在宽屏中更宽，正文偏右（占更多比例） */
  .article{padding:22px 26px}
  .title{font-size:34px}
  .title-meta{min-width:180px;font-size:13px}
  .summary{font-size:16px}

  /* 标题区、摘要区与正文区的错位：使用内边距与负边距制造细微错位对角感 */
  .title-block{transform:translateY(0);}
  .article-header{padding-left:6px}
  .related-wrap{padding-top:8px;padding-left:6px}
}

/* 手机规则：max-width:767px，取消错位，线性顺序，侧栏下移为顶部或折叠 */
@media (max-width:767px){
  .page{margin:12px auto;padding:0 14px}
  .side-nav{display:flex;flex-direction:row;gap:10px;align-items:center;margin-bottom:8px}
  .side-nav .nav-list{flex-direction:row;gap:8px;overflow:auto}
  .nav-item{font-size:13px;color:var(--muted)}

  .main-grid{display:block}
  .related-column{order:4;margin-top:18px}
  .content{order:3}

  .article{padding:14px;background:transparent}
  .title{font-size:20px}
  .title-meta{min-width:auto;margin-top:8px;text-align:left}
  .summary{margin-top:10px}

  /* 移动端避免横向滚动、文字截断、重叠 */
  body,html{overflow-x:hidden}
  .related-list{padding-left:18px}
}

/* 中间与底部小屏增强可读性 */
@media (min-width:768px) and (max-width:1023px){
  .page{max-width:920px}
  .title{font-size:26px}
  .article{padding:18px}
}

/* 可访问性与印刷友好 */
a{color:var(--accent);text-decoration:none}
a:focus{outline:2px dashed var(--accent);outline-offset:3px}