/* Palette: 石墨灰与芥末黄 */
:root{
  --bg:#f7f7f7;
  --ink:#2b2b2b;
  --muted:#6b6b6b;
  --accent:#c6a900; /* 芥末黄 */
  --card:#ffffff;
  --line:rgba(43,43,43,0.08);
  --max-width-clamp:clamp(1120px,75vw,1320px);
  --site-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"PingFang SC","Hiragino Sans GB","Microsoft Yahei",sans-serif;
}

/* Base reset */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--site-font);
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.65; /* 人文杂志宽松型 */
  font-size:16px;
}
.wrap{margin:32px auto; width:var(--max-width-clamp);}

/* Header: 报刊双层报头 */
.site-header{background:transparent;padding:18px 0 6px;}
.header-top .header-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.header-top .nav-side{font-size:13px;color:var(--muted);letter-spacing:0.02em}
.site-title-wrap{flex:0 1 auto;text-align:center}
.site-title{font-weight:700;color:var(--ink);text-decoration:none;font-size:20px;padding:6px 12px}
.header-sub{border-top:1px solid var(--line);margin-top:10px;padding-top:8px}
.header-sub-inner{display:flex;justify-content:space-between;align-items:center}
.header-sub .keywords{font-size:13px;color:var(--muted)}
.header-sub .signature{font-size:12px;color:var(--muted);text-align:right}

/* Visual signature: 页头与正文采用明显不同的对齐基线 */
.site-header{display:block;text-align:center}
.content{background:transparent}

/* Layout: 主区 9/3 分栏（桌面） */
.layout{display:grid;grid-template-columns:3fr 1fr;gap:28px;align-items:start}
.content{background:transparent}
.article-head{border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:14px}
.title-row{display:grid;grid-template-columns:2fr 1fr;gap:18px;align-items:start}
.title-row h1{margin:0;font-size:26px;line-height:1.12;font-weight:700}
.title-row .summary{margin:0;color:var(--muted);font-size:14px}
.meta{display:flex;gap:12px;font-size:13px;color:var(--muted);margin-top:10px}
.meta time{display:inline-block}

.article-body{color:var(--ink);font-size:16px}
.article-body > *:first-child{margin-top:0}

/* Side */
.side{padding:6px 0}
.side-box{background:transparent;padding:6px 0}
.side-title{font-size:14px;margin:0 0 8px 0;color:var(--accent)}
.related-list{display:flex;flex-direction:column;gap:8px;font-size:14px}
.related-list a{color:var(--ink);text-decoration:none}
.site-note{font-size:13px;color:var(--muted)}

/* Ad containers: distinct, not overlapping content */
.ad-container{margin:18px auto;padding:10px;border-top:1px dashed var(--line);border-bottom:1px dashed var(--line);background:transparent;color:var(--muted);font-size:13px}
.ad-container *{max-width:100%}

/* FAQ: 桌面表格式，左问右答 */
.faq{margin-top:20px;padding-top:12px;border-top:1px solid var(--line)}
.faq h2{font-size:16px;margin:0 0 12px 0}
.faq-body{display:block}
/* Attempt to present children as question/answer pairs without enforcing markup */
.faq-body > *{
  padding:10px 0;border-bottom:1px solid var(--line);
}
/* If FAQ uses paired nodes (.faq-item>.q + .a) provide a two-column layout on desktop */
.faq-body .faq-item{display:block}
.faq-body .faq-item .q{font-weight:600;color:var(--ink);margin:0 0 6px}
.faq-body .faq-item .a{color:var(--muted);margin:0}

/* Footer */
.site-footer{margin-top:36px;padding:18px 0;border-top:1px solid var(--line)}
.footer-inner{display:flex;justify-content:space-between;align-items:center}
.footer-home{text-decoration:none;color:var(--muted);font-size:14px}
.footer-copy{color:var(--muted);font-size:13px}

/* Typography tweaks */
h1,h2,h3{font-family:var(--site-font);color:var(--ink)}

/* Desktop rules (>=1024px) - must exist */
@media (min-width:1024px){
  body{font-size:16px}
  .wrap{margin:40px auto}
  /* Enforce main container width between 1120px and 1320px via clamp already; ensure comfortable padding */
  .wrap{width:var(--max-width-clamp)}

  /* Maintain 9/3 like density: narrower side column */
  .layout{grid-template-columns:3fr 1fr;gap:28px}

  /* Title composition: 左标题右摘要 */
  .title-row{grid-template-columns:2fr 1fr;align-items:start}
  .title-row h1{font-size:30px}
  .title-row .summary{font-size:15px}

  /* FAQ: attempt to form two-column table-style if structured */
  .faq-body{display:grid;grid-template-columns:1fr 2fr;gap:8px}
  /* If content is simpler, the grid will place sequential children left->right. */
  .faq-body > *{padding:12px 8px;border-bottom:none;border-right:1px solid var(--line)}
  .faq-body > *:nth-child(2n){border-right:none}

  /* Side: keep compact small labels and denser info */
  .side-title{font-size:13px}
  .related-list{gap:6px}
}

/* Mobile rules (<=767px) - must exist */
@media (max-width:767px){
  :root{--accent:#c6a900}
  body{font-size:15px}
  .wrap{margin:16px; width:auto}
  .layout{display:block}
  .title-row{display:block}
  h1{font-size:20px}
  .title-row .summary{margin-top:8px;font-size:14px}
  .meta{flex-direction:column;gap:6px}
  .side{margin-top:18px}
  .related-list{flex-direction:row;flex-wrap:wrap;gap:8px}
  .related-list a{background:var(--card);padding:6px 8px;border-radius:2px;border:1px solid var(--line);font-size:13px}

  /* Header: cancel second layer visual density; allow keywords to wrap */
  .header-sub{display:none}

  /* FAQ: stack Q/A naturally */
  .faq-body{display:block}
  .faq-body > *{border-bottom:1px solid var(--line);padding:12px 0}

  /* Ad containers should remain block-level and non-intrusive */
  .ad-container{font-size:13px;padding:8px}
}

/* Accessibility and focus */
a:focus{outline:2px dashed var(--accent);outline-offset:3px}