/* Palette and core tokens */
:root{
  --paper:#faf7f2; /* 轻纸张底色 */
  --graphite:#2e2e2e; /* 石墨灰 */
  --muted:#6b6b6b;
  --mustard:#caa800; /* 芥末黄 */
  --accent:var(--mustard);
  --container-min:1120px;
  --container-max:1360px;
  --max-width:1200px;
  --flow:1.25rem;
  --lh:1.8;
  --content-font: "Georgia", "Times New Roman", serif;
  --ui-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Reset-ish */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--graphite);
  font-family:var(--ui-font);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:var(--lh);
  -webkit-text-size-adjust:100%;
}

/* Header: 报刊式通栏报头；栏目索引式导航，居中站名 */
.site-header{
  border-bottom:1px solid rgba(46,46,46,0.08);
  background:transparent;
}
.header-inner{
  max-width:var(--container-max);
  min-width:var(--container-min);
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:1rem;
  padding:0.8rem 1rem;
}
.nav-left,.nav-right{display:flex;gap:0.8rem;align-items:center;color:var(--muted);font-size:0.95rem}
.sitebrand{justify-self:center}
.site-name{font-weight:700;color:var(--graphite);text-decoration:none;font-family:var(--content-font);font-size:1.15rem}
.nav-item{opacity:0.95}

/* Container */
.container{
  max-width:var(--container-max);
  min-width:var(--container-min);
  margin:0 auto;
  padding:1.25rem 1rem 3rem;
}

/* Article header: title + meta + summary in full width */
.article-header{padding:0 0 0.75rem 0}
.title{
  margin:0 0 0.5rem 0;
  font-family:var(--content-font);
  color:var(--graphite);
  line-height:1.06;
  letter-spacing:-0.02em;
  /* 超大标题但不超过两行：使用可响应字体尺寸 */
  font-size:clamp(1.6rem, 3.6vw, 2.4rem);
  font-weight:700;
}
.meta{font-size:0.9rem;color:var(--muted);display:flex;gap:0.6rem;align-items:center;margin-bottom:0.6rem}
.summary{margin:0 0 1rem 0;color:var(--muted);font-size:1rem}

/* Layout grid: desktop 8:4 columns */
.layout{display:block}
.col-article{background:transparent}
.col-aside{background:transparent}

/* Content typography: 人文杂志宽松型，舒展 */
.content{
  font-family:var(--content-font);
  color:var(--graphite);
  font-size:1.05rem;
  line-height:1.9;
  letter-spacing:0.0025em;
}
.content p{margin:0 0 1.05rem 0}
.content h2, .content h3{margin:1.2rem 0 0.6rem 0;font-family:var(--ui-font)}
.content ul{margin:0 0 1rem 1.25rem}

/* Visual signature: 正文首段首字强调（轻量） */
.content p:first-of-type::first-letter{
  color:var(--accent);
  font-size:1.6em;
  font-weight:600;
  float:left;
  line-height:1;
  padding-right:0.18em;
  padding-top:0.05em;
}

/* Divider rhythm instead of cards */
.article .faq, .aside-section, .related-bottom{border-top:1px solid rgba(46,46,46,0.06);padding-top:0.9rem;margin-top:0.9rem}
.section-title{font-size:1rem;color:var(--graphite);margin:0 0 0.6rem 0;font-weight:700}
.aside-title{font-size:0.95rem;margin:0 0 0.6rem 0}

/* Ad blocks: independent containers, non-intrusive */
.ad-block{background:transparent;padding:0.6rem 0;text-align:center;color:var(--muted);font-size:0.95rem}
.ad-bottom{margin-top:1.1rem}
.ad-middle-inline{margin:1.2rem 0}

/* Aside styling: 以分隔线区分非卡片 */
.col-aside{border-left:1px solid rgba(46,46,46,0.06);padding-left:1rem}
.aside-inner{padding-left:0.8rem}
.recs-list{display:flex;flex-direction:column;gap:0.6rem}
.recs-list > *{padding:0.45rem 0;border-bottom:1px dashed rgba(46,46,46,0.04);color:var(--muted)}

/* Related bottom: 三列短卡但不用阴影 */
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0.9rem;margin-top:0.6rem}
.related-grid > *{background:transparent;padding:0.6rem;border:1px solid rgba(46,46,46,0.04);}

/* FAQ grid: desktop two-column */
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:0.8rem}
.faq-grid > *{padding:0.5rem 0;border-bottom:1px solid rgba(46,46,46,0.04)}

/* Footer */
.site-footer{border-top:1px solid rgba(46,46,46,0.06);padding:1rem 0;margin-top:2rem}
.footer-inner{max-width:var(--container-max);min-width:var(--container-min);margin:0 auto;display:flex;justify-content:space-between;align-items:center;padding:0 1rem;color:var(--muted);font-size:0.95rem}

/* Desktop specific grid (min-width:1024px) */
@media (min-width:1024px){
  .container{padding-top:1.6rem}
  .layout{display:grid;grid-template-columns:2fr 1fr;gap:1.6rem;align-items:start}
  .col-article{grid-column:1/2}
  .col-aside{grid-column:2/3}
  .col-article .faq{max-width:100%}
  .title{font-size:2.25rem}
  .related-grid{grid-template-columns:repeat(3,1fr)}
  /* Ensure aside is visually distinct via separator line, not shadow */
  .col-aside{padding-left:1.4rem}
}

/* Mobile rules (max-width:767px): 报头压缩为一行，所有栏目单列，清晰横线节奏 */
@media (max-width:767px){
  :root{--container-min:320px}
  .header-inner{grid-template-columns:1fr;justify-items:center;padding:0.6rem 0.8rem}
  .nav-left{display:none}
  .nav-right{display:none}
  .site-name{font-size:1rem}

  .container{padding:0.8rem}
  .layout{display:block}
  .col-aside{border-left:none;padding-left:0;margin-top:0.8rem}
  .aside-inner{padding:0}
  .recs-list{display:grid;grid-template-columns:1fr;gap:0.6rem}

  /* FAQ single column on mobile */
  .faq-grid{grid-template-columns:1fr}

  /* Related stacked: three columns -> single column */
  .related-grid{grid-template-columns:1fr}

  /* Make sure no horizontal scroll at 320px */
  html,body{overflow-x:hidden}
}

/* Prevent large radii, blur, heavy shadows */
*{box-shadow:none}

/* Accessibility tweaks */
.title, .section-title, .aside-title{word-break:break-word}
.content img{max-width:100%;height:auto}