:root{
  --accent:#b31a14; /* 朱红强调 */
  --bg:#ffffff;
  --muted:#666666;
  --text:#111111;
  --panel-border:#e9e9e9;
  --radius:2px; /* surface: 2px 小圆角 */
  --max-desktop:1440px;
  --min-desktop:1120px;
}

/* 全局版式与排版（人文杂志宽松型） */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,"Noto Sans SC","Microsoft Yahei",sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

a{color:var(--accent);text-decoration:none}
.panel{border:1px solid var(--panel-border);border-radius:var(--radius);background:transparent}

/* header 极简细导航 */
.site-header{border-bottom:1px solid var(--panel-border);}
.site-header-inner{max-width:1200px;margin:0 auto;padding:12px 18px;display:flex;align-items:center;justify-content:space-between}
.site-name{font-weight:700;color:var(--text);font-family:Georgia, "Times New Roman", serif}
.mini-nav a{font-size:13px;color:var(--muted)}

/* 页面主容器 */
.page-wrap{margin:20px auto;position:relative;padding:0 18px}
.grid{display:grid;grid-template-columns:1fr;gap:20px}

/* 左侧栏（left-rail）视觉签名：1px 主题竖线在桌面通过边框实现 */
.left-rail{padding:14px;min-height:120px}
.left-rail .rail-heading{font-size:13px;margin:8px 0 10px;color:var(--muted)}
.rail-site{font-weight:700;margin-bottom:6px}
.rail-breadcrumb{font-size:13px;color:var(--muted)}

/* 文章区 */
.content-area{padding:18px;display:flex;flex-direction:column}
.article-header .title-row{display:flex;align-items:flex-start;gap:18px}
.title{font-family:Georgia, "Times New Roman", serif;font-size:22px;margin:0;color:var(--text);line-height:1.15}
.summary{margin:0;color:var(--muted);font-size:14px;max-width:44%;}

.article-meta-inline{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px;color:var(--muted);font-size:13px}
.article-body{margin-top:14px;color:var(--text);font-size:16px}

/* FAQ：主题色顶部边线 */
.faq{margin-top:20px;padding:12px;border-top:4px solid var(--accent)}
.faq h2{margin:0 0 10px;font-size:16px}

/* 相关阅读：编号列表 */
.related-list{padding-left:18px;margin:0;font-size:14px;color:var(--text)}
.related-list li{margin:6px 0}

/* 广告容器独立且不覆盖正文 */
.ad{max-width:1200px;margin:18px auto;padding:8px 12px;color:var(--muted);font-size:13px;border:1px dashed var(--panel-border);background:transparent}

/* footer */
.site-footer{border-top:1px solid var(--panel-border);padding:12px 18px;margin-top:24px}
.footer-inner{max-width:1200px;margin:0 auto;color:var(--muted);font-size:13px}

/* 密集信息呈现（density: 紧凑） */
.title, .article-body p, .article-body li{margin-bottom:10px}

/* 禁止常见被禁止的视觉套路：无阴影、无模糊、无浮动卡片 */

/* 桌面端：反向栏（reverse-rail）- 正文位于右侧8列，左侧4列承载站名、面包屑、元信息和相关推荐 */
@media (min-width:1024px){
  .page-wrap{min-width:var(--min-desktop);max-width:var(--max-desktop)}
  .page-wrap .grid{grid-template-columns:repeat(12,1fr);align-items:start}
  .left-rail{grid-column:span 4;padding:18px;border-right:1px solid var(--accent);/* 贯穿页面的1px主题竖线 */}
  .content-area{grid-column:span 8;padding:24px}

  /* 标题与摘要左右分置（title_composition） */
  .title{font-size:28px}
  .summary{font-size:15px;color:var(--muted);max-width:none;flex:0 0 38%}
  .title-row{align-items:flex-end}

  /* 左侧栏内相关推荐以编号列表展现（related_pattern） */
  .related-list{counter-reset:item}
  .related-list li{list-style:none;counter-increment:item;padding-left:26px;position:relative}
  .related-list li:before{content:counter(item)".";position:absolute;left:0;color:var(--accent);font-weight:700}
}

/* 手机端：宽度 320px 时无横向滚动，信息流重排，左侧信息拆为标题前后的紧凑区块 */
@media (max-width:767px){
  .page-wrap{padding:0 14px}
  .grid{grid-template-columns:1fr}
  .left-rail{order:0;padding:10px;border-right:none;border-bottom:1px solid var(--panel-border)}
  .content-area{order:1;padding:14px}

  /* 将左侧的部分元信息拆分为标题前后的紧凑区块 */
  .rail-meta.compact-meta{display:flex;flex-wrap:wrap;gap:8px;font-size:13px}

  /* 标题与摘要在手机端垂直堆叠，摘要置于标题下方 */
  .title-row{flex-direction:column}
  .title{font-size:20px}
  .summary{max-width:100%;margin-top:8px;color:var(--muted)}

  /* 相关阅读在文章之下（mobile_contract: 侧栏下移） */
  .rail-related{order:3;padding-top:12px}
  .related-list{padding-left:18px}

  /* 隐藏桌面专属竖线 */
  .left-rail{border-right:none}
}

/* 保证最小触控和可读性 */
@media (hover:hover){
  a:focus{outline:2px solid rgba(179,26,20,0.15)}
}