/* Palette and basic system typography */
:root{
  --bg-ivory: #f7f5ee;
  --deep-purple-gray: #2b2130; /* 近深紫灰 */
  --muted: #6b6470;
  --accent: #4b3760;
  --max-width: 1280px; /* 在1120-1440范围内选择中值 */
  --gutter: 28px;
  --ff-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
}

/* Reset-ish minimal */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--ff-sans);
  background:var(--bg-ivory);
  color:var(--deep-purple-gray);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.6;
}
a{color:inherit;text-decoration:none}

/* Header: 左右分置的编辑部报头（深色报头，视觉签名：页头与正文采用不同对齐基线） */
.site-header{
  background:linear-gradient(180deg, var(--deep-purple-gray) 0%, #241a24 100%);
  color:var(--bg-ivory);
  padding:18px 0;
}
.header-inner{
  max-width:var(--max-width);
  margin:0 auto;
  padding:0 var(--gutter);
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.brand a{font-weight:700;font-size:20px;letter-spacing:0.4px;color:var(--bg-ivory)}
.header-meta{display:flex;align-items:center;gap:18px}
.top-nav span{margin-left:12px;opacity:0.95}
.edition-note{font-size:13px;color:var(--bg-ivory);opacity:0.9}

/* Page frame and grid */
.site-frame{padding:28px 0 40px}
.container{
  max-width:var(--max-width);
  margin:0 auto;
  padding:0 var(--gutter);
  display:grid;
  grid-template-columns: 200px 1fr 300px; /* 左侧纵向刊头、正文主列、右侧编辑栏（非对称） */
  gap:32px;
  align-items:start;
}

/* 左侧刊头 */
.v-nav{padding-top:8px}
.v-nav-inner{position:sticky;top:24px}
.vtitle{font-size:13px;color:var(--muted);margin:0 0 12px}
.vlist{list-style:none;padding:0;margin:0;color:var(--muted);font-size:14px}
.vlist li{padding:6px 0}

/* 右侧编辑栏 */
.right-rail .slot{background:white;border:1px solid #efe9df;padding:14px;margin-bottom:14px;font-size:13px}

/* Main article area */
.main-area{min-width:0}
.article{background:white;border:1px solid #eee;padding:36px}
.article-head{margin-bottom:18px}
.article-head h1{font-size:28px;line-height:1.15;margin:0 0 10px;text-align:center;color:var(--deep-purple-gray);font-weight:800}
.meta-row{display:flex;gap:10px;align-items:center;justify-content:center;font-size:13px;color:var(--muted);margin-bottom:12px}
.summary{margin:0 0 18px;padding-left:0;text-align:left;color:var(--muted);max-width:70%;margin-left:0}

/* Article layout: editorial with side-note */
.article-body-wrap{display:grid;grid-template-columns:1fr 260px;gap:28px;align-items:start}
.article-body{background:white}
.side-note .info-box{border:1px solid #efe9df;padding:12px;background:var(--bg-ivory);font-size:13px}
.side-note .label{font-size:12px;color:var(--muted);margin-bottom:6px}

/* Content readability */
.article-body .content{color:var(--deep-purple-gray);font-size:16px;line-height:1.78}
.article-body .content p{margin:0 0 16px}
.article-body .content h2{font-size:18px;margin:28px 0 12px;padding-left:0}

/* Visual chapter-numbering feel for headings (purely visual, no added text content) */
.article-body .content h2{counter-increment:chapter}
.article-body .content{counter-reset:chapter}
.article-body .content h2::before{
  content:counter(chapter) " ";
  color:var(--accent);
  font-weight:700;margin-right:8px
}

/* FAQ pattern: 主题色顶部边线问答区 */
.faq{margin-top:28px;padding:18px;background:white;border-top:4px solid var(--accent)}
.faq h3{margin:0 0 12px;font-size:16px}
.faq-inner{color:var(--muted);font-size:15px}

/* Related pattern: 编号列表 */
.related{margin-top:22px}
.related h3{font-size:15px;margin:0 0 10px}
.related-list{counter-reset:rel;list-style:none;padding:0;margin:0}
.related-list li{counter-increment:rel;padding:8px 0;border-top:1px dashed #f0ebe4}
.related-list li::before{content:counter(rel) ". ";color:var(--accent);font-weight:700;margin-right:8px}

/* Ads: independent containers, not overlaying */
.ad{background:transparent;color:var(--muted);padding:12px 0;text-align:center}
.ad-top{margin-bottom:18px}
.ad-middle{margin:20px 0}
.ad-bottom{margin-top:24px}

/* Footer */
.site-footer{padding:18px 0;background:transparent;color:var(--muted);font-size:13px}
.foot-inner{max-width:var(--max-width);margin:0 auto;padding:0 var(--gutter)}

/* Typography density: 舒展 */
@media (min-width:1024px){
  /* Desktop-specific structural differences (only active >=1024px) */
  .container{grid-template-columns:200px minmax(620px,1fr) 260px}
  .article{padding:48px}
  .article-head h1{font-size:34px}
  .summary{max-width:none}
  /* Ensure the left vertical nav is visible and sticky on desktop */
  .v-nav-inner{position:sticky;top:88px}
  /* Ensure FAQ and related span across the page bottom */
  .faq, .related{grid-column:1/-1}
  .article-body-wrap{grid-template-columns:1fr 260px}
}

/* Mobile: 独立重排，章节间距缩小，底部区域改为单列 */
@media (max-width:767px){
  body{padding:0}
  .header-inner{padding:0 16px}
  .container{display:block;padding:0 12px}
  .site-header{padding:12px 0}
  .v-nav{display:block;margin-bottom:12px}
  .v-nav-inner{position:static}
  .vlist{display:flex;gap:12px;overflow:auto;font-size:13px}
  .main-area{margin:0}
  .article{border:none;padding:18px;background:transparent}
  .article-head h1{text-align:center;font-size:20px}
  .meta-row{justify-content:flex-start;font-size:12px}
  .summary{margin-bottom:12px;font-size:14px}

  /* Collapse editorial two-column into single column */
  .article-body-wrap{display:block}
  .article-body{background:white;padding:14px;border:1px solid #f0ebe6}
  .side-note{margin-top:12px}
  .article-body .content{font-size:15px;line-height:1.6}
  .article-body .content h2{margin:18px 0 8px}

  /* FAQ and related become single column stacked */
  .faq,.related{background:white;padding:12px;border:1px solid #efe9df;margin-top:12px}
  .related-list li{padding:10px 0}

  /* Ads: keep inline but non-intrusive */
  .ad{padding:10px 0}

  /* Right rail moves below main and becomes simple blocks */
  .right-rail{margin-top:14px}
  .right-rail .slot{background:white;border:1px solid #efe9df;padding:10px;margin-bottom:10px}

  /* Prevent horizontal scroll at 320px */
  html,body{min-width:0}
}

/* Accessibility/contrast helpers */
h1,h2,h3{color:var(--deep-purple-gray)}

/* Forbidden: no shadows used to indicate hierarchy (explicitly avoid box-shadow) */