:root{
  --bg:#f7f4ea; /* 米白 */
  --ink:#0b2f28; /* 墨绿偏黑 */
  --muted:#6b6b6b;
  --accent:#0b3d2e; /* 墨绿 */
  --edge:#d6d0c2; /* 细边框 */
  --max-desktop-width:1280px;
  --content-width:820px; /* 约定正文宽度 */
  --track-width:72px;
  --meta-width:120px; /* 窄元信息列 */
  --radius:4px; /* 方角小圆 */
  --gap:24px;
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* Reset / base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font-sans);
  color:var(--ink);
  background:var(--bg);
  line-height:1.58;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent); text-decoration:none}

/* Header: 报刊双层报头 */
.site-header{border-bottom:1px solid var(--edge); background:transparent}
.header-top{display:flex;justify-content:space-between;align-items:center;padding:10px 20px;font-size:13px;color:var(--muted)}
.header-main{display:flex;justify-content:space-between;align-items:end;padding:10px 20px 18px 20px}
.masthead{font-weight:700;font-size:18px;letter-spacing:0.02em}
.text-nav{font-size:13px;color:var(--muted)}
.site-home{font-weight:700;color:var(--accent)}

/* ad slots minimal styling (non-floating) */
.ad-slot{padding:10px 20px;margin:12px 0;border-top:1px dashed var(--edge);border-bottom:1px dashed var(--edge);background:transparent}
.ad-top{border-top:0}

/* Page grid container */
.page-wrap{display:flex;justify-content:center;padding:18px}
.page-grid{display:grid;grid-template-columns:var(--track-width) 1fr 1fr;gap:24px;align-items:start;max-width:var(--max-desktop-width);width:100%;}

/* Left chapter track: 细窄章节轨道 */
.chapter-track{padding:6px 8px;border-right:1px solid var(--edge);color:var(--muted);font-size:13px}
.chapter-track ol{list-style:none;padding:0;margin:8px 0}
.chapter-track li{padding:6px 0}

/* Content area */
.content-area{grid-column:2 / span 1;padding:0}
.article{background:transparent;border-radius:var(--radius)}

/* Title composition: 大标题配窄元信息列 */
.title-row{display:grid;grid-template-columns:var(--meta-width) 1fr;gap:16px;align-items:start;padding:6px 0}
.meta-column{color:var(--muted);font-size:13px}
.meta-column .now{margin-top:8px}
.title-column h1{margin:0 0 10px 0;font-size:28px;line-height:1.15;color:var(--ink)}
.summary{margin:0;color:var(--muted);font-size:15px}

/* article-inner holds main text, constrained width for readability */
.article-inner{margin-top:18px;max-width:var(--content-width)}
.article-body{color:var(--ink);font-size:16px}
.article-body p{margin:0 0 14px 0}
.article-body h2{margin:18px 0 10px 0}

/* FAQ: 桌面左侧问题右侧答案表格式 */
.faq-block h2{margin-top:24px;font-size:18px}
.faq-content{margin-top:12px}
/* Prefer common semantic markup: support dl dt/dd */
.faq-content dl{display:block;margin:0}
.faq-content dt{font-weight:600;margin:12px 0;color:var(--accent)}
.faq-content dd{margin:6px 0 12px 0;padding-left:0}

/* Related two-column pattern */
.related-block{margin-top:20px}
.related-list{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px}
.related-list a{display:block;padding:10px;border:1px solid var(--edge);background:#fff;border-radius:var(--radius);color:var(--ink);font-size:14px}

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

/* Visual signature: 页头与正文采用明显不同的对齐基线 */
/* header is left aligned and compact; article title row uses grid with narrow meta column so baseline offset is visible */

/* 禁止玻璃拟态/模糊/悬浮卡片 by avoiding such effects */

/* Desktop specific rules */
@media (min-width:1024px){
  .page-grid{grid-template-columns:var(--track-width) minmax(var(--content-width), var(--content-width)) 1fr;}
  .chapter-track{position:static}
  .content-area{grid-column:2 / span 1}

  /* FAQ table-like: try to style dl as two-column rows */
  .faq-content dl{display:grid;grid-template-columns:200px 1fr;column-gap:20px}
  .faq-content dt{grid-column:1;align-self:start;padding-top:6px}
  .faq-content dd{grid-column:2}

  /* Related two-column already set; increase density space */
  .related-list{grid-template-columns:1fr 1fr}

  /* Ensure the title and meta columns appear biased to the right visual start */
  .title-row{padding-left:12px}
}

/* Mobile specific: 320px - 767px */
@media (max-width:767px){
  .page-wrap{padding:10px}
  .page-grid{display:block}
  .chapter-track{display:none}
  .content-area{padding:0}

  /* Chapter track becomes a thin horizontal separator under title (mobile_contract) */
  .title-row{display:block}
  .meta-column{display:flex;justify-content:flex-start;gap:12px;font-size:13px}
  .title-column h1{font-size:20px}
  .summary{font-size:14px}

  /* make article full width */
  .article-inner{max-width:100%}
  .article-body{font-size:16px}

  /* FAQ stack: question then answer */
  .faq-content dl{display:block}
  .faq-content dt{font-weight:600;margin-top:12px}
  .faq-content dd{margin-left:0;margin-bottom:12px}

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

  /* Ensure no horizontal scroll at 320px */
  body, .page-wrap, .article-inner{min-width:0;overflow-wrap:break-word}
}

/* Accessibility and density tweaks */
h1,h2{line-height:1.2}
button,input,a{outline-offset:2px}