/* DESIGN VARS */
:root{
  --bg:#ffffff;
  --muted:#2e2e2e; /* 石墨灰 */
  --accent:#c9a500; /* 芥末黄 */
  --accent-strong:#b38f00;
  --surface-dark:#111214;
  --text:#222222;
  --max-width:1320px;
  --container-min:1120px;
  --gutter:36px;
  --serif: Georgia, 'Times New Roman', Times, serif;
  --ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

/* Reset & base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--ui);
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}

a{color:inherit;text-decoration:none}

/* Header (深色报头) */
.site-header{
  background:linear-gradient(180deg,var(--surface-dark),#0e0f10);
  color:#fff;
  padding:18px calc(var(--gutter)/2);
  border-bottom:4px solid var(--accent-strong);
}
.header-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand .site-name{
  font-family:var(--serif);
  font-size:20px;
  font-weight:700;
  color:#fff;
  display:inline-block;
}
.top-index ul{list-style:none;margin:0;padding:0;display:flex;gap:18px;color:rgba(255,255,255,0.9);font-size:13px}
.top-index li{opacity:0.95}

.masthead{display:flex;justify-content:space-between;align-items:center;padding-top:12px}
.issue-head{color:var(--accent);font-weight:700;font-family:var(--serif);letter-spacing:1px}
.meta-square{background:#fff;color:#111;padding:8px 10px;margin-left:8px;border-radius:4px;font-size:12px;display:inline-block}
.masthead-right{display:flex;gap:8px}

.ad-container{margin-top:14px;padding:12px;background:rgba(0,0,0,0.04);color:var(--muted);font-size:14px}
.ad-top{border-left:4px solid var(--accent);}

/* Site main container, desktop constrained 1120-1440 */
.site-main{padding:28px calc(var(--gutter)/2);max-width:100%;margin:0 auto}
.layout-grid{display:grid;grid-template-columns:1fr;gap:24px}

/* Content area */
.content-area{min-width:0}
.article{background:var(--bg);padding:28px;border-radius:2px}
.eyebrow{color:var(--accent-strong);font-weight:600;font-size:13px;margin:0 0 8px;font-family:var(--serif)}
.title{font-family:var(--serif);font-size:28px;margin:0 0 12px;line-height:1.15;color:var(--muted)}

.article-meta{display:flex;gap:18px;flex-wrap:wrap;font-size:13px;color:#666;margin-bottom:12px}
.published,.now{background:#f6f6f6;padding:6px 8px;border-radius:2px;border-left:4px solid var(--accent-strong)}

.summary{background:#fff;padding:12px;border:1px solid #efefef;margin-bottom:18px;font-size:15px}

.article-body{color:var(--text);font-size:16px;line-height:1.8;font-family:var(--serif);}
.article-body h2{margin-top:28px;margin-bottom:10px;position:relative;padding-left:40px;font-size:20px}
.article-body h2::before{counter-increment:sec;content:counter(sec,decimal-leading-zero) ".";position:absolute;left:0;top:0;color:var(--accent);font-weight:700}
article{counter-reset:sec}

/* FAQ (无卡片的details折叠列表) */
.faq h2{margin-top:26px;font-size:18px}
.faq-list details{border-top:1px solid #eee;padding:10px 0}
.faq-list details[open]{background:rgba(201,165,0,0.03)}
.faq-list summary{cursor:pointer;padding:6px 0;font-weight:600}

/* Side rail (右侧栏目索引) */
.side-rail{display:none}
.side-block{background:#fff;padding:12px;border:1px solid #ececec;margin-bottom:12px}
.side-block h3{margin:0 0 8px;color:var(--muted);font-size:14px}
.side-block ul, .side-block ol{margin:0;padding-left:18px;color:#555;font-size:14px}

/* Related (两列摘要列表) */
.related{margin-top:28px;padding-top:18px;border-top:1px dashed #eee}
.related h2{margin:0 0 12px}
.related-list{display:grid;grid-template-columns:1fr;gap:12px}
.related-list > *{padding:12px;border:1px solid #f0f0f0}

.site-footer{padding:18px calc(var(--gutter)/2);font-size:13px;color:#666}
.footer-meta{margin-top:8px}

/* VISUAL SIGNATURE: header vs content baseline differentiation */
.site-header{align-items:flex-end}
.content-area{padding-top:18px}

/* TYPOGRAPHY & DENSITY: 紧凑 */
h1,h2,h3{margin-top:0}
p{margin:0 0 12px}

/* DESKTOP LAYOUT */
@media (min-width: 1024px){
  .site-main{width:clamp(var(--container-min),85vw,var(--max-width));margin-left:auto;margin-right:auto}
  .layout-grid{grid-template-columns: 1fr 320px;gap:40px;align-items:start}
  .side-rail{display:block}
  /* Make right column behave as '栏目置右' while brand on header remains visible */
  .site-header .header-top{justify-content:space-between}
  .brand{order:0}
  .top-index{order:2}
  /* Article becomes wider and gets chapter margin*/
  .article{padding:48px 44px}
  .title{font-size:40px}
  .eyebrow{font-size:14px}
  .article-body{font-size:18px;line-height:1.9}
  /* Related becomes two-column */
  .related-list{grid-template-columns:1fr 1fr}
  /* Right rail squares are square-ish info blocks */
  .meta-square{min-width:56px;text-align:center}
}

/* MOBILE LAYOUT */
@media (max-width: 767px){
  .site-header{padding:12px}
  /* navigation_mode: 居中站名加左右文本链接 (applies on mobile) */
  .header-top{display:flex;justify-content:center;align-items:center;gap:14px}
  .top-index{position:static;order:1}
  .brand{order:0}
  .top-index ul{gap:10px;font-size:12px}
  .masthead{flex-direction:row;justify-content:space-between}

  .layout-grid{grid-template-columns:1fr;gap:12px}
  .side-rail{display:none}
  .article{padding:16px}
  .title{font-size:20px}
  .eyebrow{font-size:12px}
  .article-body{font-size:15px;line-height:1.7}
  .article-body h2{padding-left:28px}

  /* Reduce chapter spacing but keep hierarchy */
  .article-body h2{margin-top:18px}

  /* Related becomes single column */
  .related-list{grid-template-columns:1fr}

  /* Bottom ad and footer compact */
  .ad-container{padding:10px;font-size:13px}
}

/* Accessibility & readable line-length control in large screens */
@media (min-width: 1200px){
  .article-body{max-width:900px}
}