/* Palette & base */
:root{
  --bg: #fff8ee; /* ivory white */
  --ink: #2e2430; /* deep purple-gray */
  --muted: #6b6070;
  --accent: #443450; /* accent purple-gray */
  --line: rgba(68,52,80,0.12);
  --sig: #36283b; /* visual signature 1px */
  --max-width: 1300px;
  --min-width: 1120px;
  --main-width: 820px; /* target content width */
  --track-width: 120px; /* narrow chapter track */
  --gutter: 28px;
  --base-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--base-font);
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45; /* technical compact */
  font-size:16px;
}

a{color:var(--accent);text-decoration:none}

/* Header / toolbar (编辑部报头，左右分置) */
.editorial-header{
  padding:18px var(--gutter);
  border-bottom:1px solid var(--line);
  background:transparent;
}
.toolbar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.site-link{font-weight:700;color:var(--ink);font-size:18px}
.breadcrumb{color:var(--muted);font-size:13px}
.hdr-line{height:6px;opacity:0.03}

/* Page wrap grid */
.page-wrap{
  max-width:var(--max-width);
  min-width:var(--min-width);
  margin:28px auto;
  display:grid;
  grid-template-columns: var(--track-width) 1fr 1fr;
  gap:var(--gutter);
  align-items:start;
  padding:0 var(--gutter);
  position:relative;
}

/* Visual signature: 1px vertical line running through page */
.page-wrap::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:calc(var(--track-width) + 8px);
  width:1px;
  background:var(--sig);
  opacity:0.12;
  pointer-events:none;
}

/* Chapter track (左侧细窄章节轨道) */
.chap-track{grid-column:1/2;padding-top:6px}
.track-rail{width:2px;background:var(--line);height:100%;margin:0 auto;border-radius:1px}
.track-markers{list-style:none;padding:0;margin:12px 0 0;display:flex;flex-direction:column;gap:18px;align-items:center}
.track-markers li{width:8px;height:8px;border-radius:50%;background:transparent;border:2px solid var(--accent);opacity:0.18}

/* Main area: title composition with narrow meta column */
.main-area{grid-column:2/4}
.article{max-width:var(--main-width);margin:0 auto}
.article-header{display:grid;grid-template-columns:1fr 220px;gap:20px;align-items:start}
.title{font-size:28px;line-height:1.12;margin:6px 0 10px;color:var(--ink);font-weight:700}
.meta{font-size:13px;color:var(--muted)}
.meta .meta-row{margin-bottom:8px}
.meta .small{font-size:12px;color:var(--muted)}
.summary.intro{margin:0 0 18px;color:var(--muted);font-size:15px}

/* Ads containers (independent, non-floating) */
.ad-container{border-top:1px dashed var(--line);padding:14px 10px;margin:18px 0;color:var(--muted);font-size:13px}

/* Content styles */
.content{font-size:16px;color:var(--ink);line-height:1.7}
.content p{margin:0 0 1em}
.content h2, .content h3{margin:1.2em 0 0.6em;color:var(--accent)}

/* FAQ: 编号式问答但不虚构步骤 */
.faq{margin-top:26px}
.faq h2{font-size:18px;margin:0 0 10px;color:var(--ink)}
.faq-body{counter-reset:faq}
.faq-body > *{margin:0 0 14px}
.faq-body .question{display:block;counter-increment:faq;margin-bottom:6px;font-weight:600}
.faq-body .question:before{content:counter(faq) ". ";color:var(--accent)}
.faq-body .answer{color:var(--muted);font-size:15px}

/* Related pattern: 关键词索引式列表 */
.related{margin-top:22px}
.related h3{font-size:15px;margin:0 0 8px;color:var(--ink)}
.related-body{display:flex;flex-wrap:wrap;gap:8px}
.related-body a, .related-body span{padding:6px 10px;background:transparent;border:1px solid var(--line);color:var(--accent);font-size:13px;border-radius:2px}

/* Footer */
.site-footer{padding:18px;border-top:1px solid var(--line);text-align:center;color:var(--muted);font-size:13px}

/* Desktop specific rules (min-width:1024px) - ensure distinct desktop layout */
@media (min-width: 1024px){
  :root{--main-width:820px}
  .page-wrap{grid-template-columns: var(--track-width) calc(var(--main-width) + 40px) 1fr}
  .article{margin-left:0}
  .article-header{grid-template-columns:1fr 240px}
  /* FAQ & related span the main content width */
  .faq, .related{max-width:calc(var(--main-width));margin-left:0}
}

/* Mobile specific rules (max-width:767px) - independent reorder */
@media (max-width: 767px){
  :root{--gutter:16px}
  .page-wrap{display:block;padding:0 12px;margin:14px auto}
  .chap-track{order:2;display:block;padding:10px 0}
  .track-rail{display:none}
  .track-markers{display:flex;flex-direction:row;gap:8px;justify-content:flex-start;padding:6px 0}
  .track-markers li{width:6px;height:6px;border-width:1px}

  .main-area{order:3}
  .article{max-width:100%;margin:0}
  .article-header{display:block}
  .title{font-size:20px;margin:6px 0}
  .meta{display:block;margin-top:6px}
  .summary.intro{margin-top:10px}

  /* Remove the long vertical signature to avoid overflow; keep subtle marker */
  .page-wrap::before{left:12px;height:40px;opacity:0.06}

  /* FAQ & related become full width and stacked */
  .faq, .related{max-width:100%}
}

/* Accessibility and fine density tweaks */
@media (prefers-reduced-motion: reduce){
  *{transition:none!important}
}

/* Avoid common forbidden pattern: no dark dashboard look, no heavy shadows or glass */
/* Use only thin lines and modest contrast */