:root{
  --bg: #fbfaf8; /* 轻纸张底色 */
  --text: #111111;
  --muted: #666666;
  --line: #111111;
  --accent: #C02828; /* 朱红强调 */
  --gap: 28px;
  --max-width-min: 1120px;
  --max-width-max: 1440px;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei", sans-serif;
}

/* Reset / base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;padding:36px 20px 60px;
  font-family:var(--font-sans);
  color:var(--text);
  background:var(--bg);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

a{color:inherit;text-decoration:none}
.sr{position:absolute!important;height:1px;width:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Toolbar / header */
.toolbar{max-width:1200px;margin:0 auto 22px; text-align:center}
.toolbar-inner{display:inline-flex;align-items:center;gap:10px;font-weight:600}
.toolbar .home{font-size:18px}
.toolbar .trail{color:var(--muted);font-size:13px}
.toolbar-line{border:none;border-top:1px solid var(--line);margin-top:12px;opacity:.9}

/* Ads - simple non-floating containers */
.ad{max-width:1200px;margin:18px auto;padding:8px 0;text-align:center}
.ad > *{display:inline-block}

/* Container and grid */
.container{margin:0 auto;padding:0;width:100%;}
.article-grid{position:relative;display:block;gap:var(--gap)}

/* Primary article */
.primary{background:transparent;padding:0;margin:0}
.article-header{display:block;margin-bottom:14px}
.article-header h1{margin:0 0 12px;font-weight:700;letter-spacing:-0.02em;color:var(--text);line-height:1.05}
.meta-line{display:flex;gap:16px;font-size:13px;color:var(--muted);flex-wrap:wrap}
.summary .desc{margin-top:6px;color:var(--muted);font-size:15px}
.content{margin-top:18px;color:var(--text);font-size:16px}
.content :where(p){margin:0 0 1em}

/* FAQ numbered style */
.faq h2,.related h2{margin-top:36px;margin-bottom:10px;font-size:18px;border-top:1px solid rgba(0,0,0,0.06);padding-top:12px}
.faq-list{counter-reset:faq}
.faq-list > *{display:block;margin:14px 0}
.faq-list > *:before{counter-increment:faq;content:counter(faq)".";font-weight:700;color:var(--accent);display:inline-block;width:2em}

/* Related list - two column summary list on desktop */
.related-list{display:grid;grid-template-columns:1fr;gap:12px}
.related-list > *{padding:8px 0;border-top:1px dashed rgba(0,0,0,0.04);font-size:15px}

/* Side column */
.side{padding-left:18px}
.side-block{margin-bottom:18px}
.side-block h3{margin:0 0 8px;font-size:13px;color:var(--muted);font-weight:600}
.side-block p, .side-block ul{margin:0;color:var(--muted);font-size:14px}

/* Footer */
.site-footer{max-width:1200px;margin:40px auto 0;padding-top:18px;border-top:1px solid rgba(0,0,0,0.06);color:var(--muted);text-align:center}

/* Visual signature: 1px vertical line between columns on desktop */
@media (min-width:1024px){
  body{padding:48px}
  .container{width:clamp(var(--max-width-min), 72vw, var(--max-width-max));}
  .article-grid{
    display:grid;
    grid-template-columns:8fr 4fr;
    gap:40px;
    align-items:start;
  }

  /* vertical accent line between columns */
  .article-grid::before{
    content:"";
    position:absolute;
    top:0;bottom:0;
    left:calc((8 / 12) * 100% + 20px); /* place slightly into gutter */
    width:1px;background:var(--accent);opacity:0.95;
  }

  /* Title composition: very large but not overwhelming */
  .article-header h1{font-size:clamp(36px,6.5vw,64px);margin-right:18px}
  .meta-line{flex-direction:column;align-items:flex-start}

  /* Make metadata column visually narrow by controlling side padding */
  .side{padding-left:0}

  /* Related two columns */
  .related-list{grid-template-columns:1fr 1fr}
}

/* Mobile: single column, title scaled down, side moves below */
@media (max-width:767px){
  body{padding:18px}
  .toolbar{margin-bottom:12px}
  .container{width:100%}
  .article-grid{display:block}
  .article-header h1{font-size:22px;margin-bottom:8px}
  .meta-line{font-size:12px;gap:8px}
  .summary .desc{font-size:14px}
  .content{font-size:15px}
  .side{padding-left:0;margin-top:20px}
  .related-list{grid-template-columns:1fr}
  /* remove visual vertical line on mobile */
  .article-grid::before{display:none}
  /* ensure no horizontal scrolling at 320px */
  body, .container, .article-grid, .primary, .side{min-width:0}
}

/* Prevent large radii or card-like boxed designs (forbidden) */
*{border-radius:0}

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