/* Base variables and reset */
:root{
  --bg: #f6f3ef; /* 象牙白 */
  --paper: #fff; /* 内容纸张 */
  --ink: #222; /* 主文字 */
  --muted: #666;
  --accent: #2d1f36; /* 深紫灰 */
  --line: rgba(45,31,54,0.08);
  --max-gap: 48px;
  --gutter: 28px;
  --container-min: 1120px;
  --container-max: 1440px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans CJK SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.6;
  padding-bottom:40px;
  position:relative;
}
/* Visual signature: 1px vertical theme line贯穿页面 */
.vline{
  position:fixed;
  top:0;
  bottom:0;
  width:1px;
  background:var(--accent);
  opacity:0.12;
  pointer-events:none;
  z-index:0;
  right:calc(50% - 600px); /* will be overridden in media rules */
}
/* Toolbar */
.toolbar{
  border-bottom:1px solid var(--line);
  background:transparent;
}
.toolbar-inner{
  max-width:1200px;
  margin:0 auto;
  padding:12px 20px;
  display:flex;
  gap:12px;
  align-items:center;
}
.site{font-weight:700;color:var(--accent);text-decoration:none}
.breadcrumb{color:var(--muted);font-size:14px;margin-left:auto}
/* Ad zones (non-floating, non-sticky) */
.ad-zone{max-width:1280px;margin:18px auto;padding:6px 12px;color:var(--muted);font-size:14px}
.ad-top{margin-top:18px}
.ad-middle{margin:20px 0}
.ad-bottom{margin-top:28px}
/* Page layout */
.page-wrap{display:flex;justify-content:center;padding:28px 20px}
.content-grid{width:100%;display:grid;gap:28px;align-items:start}

/* Desktop styles (min-width:1024) - must include distinct desktop structure */
@media (min-width:1024px){
  .vline{display:block; /* place to the right of main sheet to read as side accent */
    right:calc(50% - clamp(560px, 35vw, 640px));
    opacity:0.16;
  }

  .page-wrap{padding:48px 40px}
  .content-grid{
    grid-template-columns: 1fr 260px; /* main + narrow side note */
    gap:36px;
    max-width: clamp(var(--container-min), 70vw, var(--container-max));
  }

  .sheet{background:var(--paper);padding:48px 56px 40px 72px;position:relative;z-index:1;border-radius:0;box-shadow:none}
  /* Title composition: 大标题配窄元信息列。标题向左越出正文基线 */
  .article-head{margin-bottom:18px}
  h1{font-size:36px;line-height:1.08;margin:0 0 8px -36px;color:var(--accent);letter-spacing:-0.02em}
  .meta-row{display:flex;gap:18px;color:var(--muted);font-size:13px;margin-bottom:14px}
  .summary{border-top:1px solid var(--line);padding-top:14px;margin:0;color:var(--muted)}

  .article-body{margin-top:20px;color:var(--ink);font-size:16px;line-height:1.75}

  .side{position:relative;align-self:start}
  .side-panel{background:transparent;padding:14px 10px;border-left:1px solid transparent}
  .side-title{font-size:13px;color:var(--muted);margin-bottom:8px}
  .side-content{font-size:14px;color:var(--muted);white-space:pre-wrap}

  /* FAQ horizontal rule style */
  .faq-block h2,.related-block h2{font-size:16px;margin:28px 0 12px;color:var(--accent)}
  .faq-list > * + *{border-top:1px solid var(--line);padding-top:12px;margin-top:12px}

  .related-list{counter-reset:item;padding-left:18px;margin:8px 0 0}
  .related-list > *{margin:10px 0;padding-left:10px}
  .related-list > *::before{counter-increment:item;content:counter(item)".";color:var(--muted);display:inline-block;width:28px;margin-left:-28px}

  .site-footer{margin-top:40px;padding:18px 0;color:var(--muted);text-align:center}
}

/* Mobile styles (max-width:767px) - must be independent layout; cancel offset and overflow */
@media (max-width:767px){
  .vline{display:none}
  .toolbar-inner{padding:10px}
  .page-wrap{padding:12px}
  .content-grid{display:block;max-width:680px;margin:0 auto}
  .sheet{background:var(--paper);padding:18px;border-radius:4px}
  h1{font-size:20px;line-height:1.15;margin:0 0 8px 0}
  .meta-row{display:flex;flex-wrap:wrap;gap:12px;color:var(--muted);font-size:12px;margin-bottom:10px}
  .summary{margin:0 0 10px 0;border-top:none;padding-top:0;color:var(--muted)}
  .article-body{font-size:15px;line-height:1.7}
  /* side becomes inline block below sheet */
  .side{margin-top:14px}
  .side-panel{background:transparent;padding:10px}
  .faq-block h2,.related-block h2{font-size:15px;margin:18px 0 8px}
  .faq-list > * + *{border-top:1px solid var(--line);padding-top:10px;margin-top:10px}
  .related-list{padding-left:18px}
  .ad-zone{margin:14px auto;padding:8px}
  .site-footer{padding:12px;font-size:13px}
}

/* Mid-range (tablet) adjust */
@media (min-width:768px) and (max-width:1023px){
  .vline{display:none}
  .page-wrap{padding:24px}
  .content-grid{max-width:900px;margin:0 auto}
  .sheet{padding:28px}
  h1{font-size:26px;margin-left:0}
}

/* Accessibility & micro adjustments */
h1,h2{color:var(--accent)}
.article-body img{max-width:100%;height:auto}
.article-body p{margin:0 0 14px}
.side-title{font-weight:600}