/* 通用变量与重置 */
:root{
  --bg:#f8f7f3; /* 纸白 */
  --ink:#122233; /* 藏蓝近似深色文字 */
  --muted:#6b7280;
  --accent:#0f3b66; /* 藏蓝 */
  --surface:#ffffff;
  --border:rgba(18,34,51,0.08);
  --radius:2px; /* surface 小圆角 */
  --max-desktop:1440px;
  --min-desktop:1120px;
  --gap:20px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei", "WenQuanYi Micro Hei", sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%;background:var(--bg);color:var(--ink);margin:0}
a{color:var(--accent);text-decoration:none}
.page-root{display:flex;flex-direction:column;min-height:100vh}
.site-toolbar{background:var(--surface);border-bottom:1px solid var(--border)}
.toolbar-inner{max-width:1200px;margin:0 auto;padding:12px 16px;display:flex;align-items:center;gap:12px}
.site-name{font-weight:700;font-size:1rem;color:var(--accent)}
.toolbar-breadcrumb{color:var(--muted);font-size:0.9rem;margin-left:auto}
.ad-block{max-width:1200px;margin:12px auto;padding:8px 12px;border:1px dashed var(--border);background:transparent;border-radius:var(--radius)}
.site-inner{display:grid;grid-template-columns:220px 1fr 300px;gap:var(--gap);align-items:start;max-width:1280px;margin:0 auto;padding:20px;width:100%}
.masthead{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:12px;height:fit-content}
.masthead-stick{position:sticky;top:20px}
.masthead-title a{font-weight:700;color:var(--accent);display:block;margin-bottom:8px}
.masthead-nav .nav-note{font-size:0.85rem;color:var(--muted);margin-bottom:6px}
.masthead-nav .nav-list{list-style:none;padding:0;margin:0;color:var(--muted);font-size:0.92rem}
.masthead-year{margin-top:12px;color:var(--muted);font-size:0.85rem}
.main-area{background:transparent}
.side-column{background:transparent}
.side-inner{position:sticky;top:24px;padding:12px;border-radius:var(--radius);border:1px solid var(--border);background:var(--surface)}
.side-note{font-weight:600;color:var(--accent);margin-bottom:8px}
/* Title composition: 左右分置 */
.title-row{display:flex;gap:20px;align-items:flex-start;margin-bottom:12px}
.page-title{font-family: Georgia, "Times New Roman", serif;font-size:1.6rem;line-height:1.15;margin:0;flex:1 1 60%}
.summary-band{flex:0 0 340px;align-self:flex-start}
.summary-band .summary-inner{border-left:6px solid var(--accent);padding:8px 12px;background:var(--surface);border-radius:var(--radius);border:1px solid var(--border);color:var(--muted);font-size:0.95rem}
.meta-row{display:flex;gap:12px;color:var(--muted);font-size:0.9rem;margin-bottom:18px}
.article-frame{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px}
.article-body{font-size:1rem;line-height:1.85;color:var(--ink)}
.faq-section{margin-top:20px}
.faq-section h2{font-size:1.05rem;margin:0 0 8px 0}
.faq-list{padding-left:1.1rem;margin:0;color:var(--muted)}
.related-section{margin-top:20px}
.related-section h2{font-size:1.05rem;margin:0 0 8px 0}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.related-grid > *{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:10px;font-size:0.95rem}
.site-footer{margin-top:auto;padding:18px 20px;border-top:1px solid var(--border);background:transparent;color:var(--muted);font-size:0.9rem}
/* Surface style: 小圆角、浅边框、无阴影 已体现在上面 */

/* 可访问性与可读性调整（人文杂志，宽松型，舒展） */
.page-title{letter-spacing:0.2px}
.article-body p{margin:0 0 1.1rem}
.article-body h2{margin:1.1rem 0 0.5rem;font-size:1.05rem}
.article-body blockquote{margin:0 0 1rem;padding:8px 12px;border-left:3px solid var(--accent);background:linear-gradient(transparent, transparent)}

/* Desktop 专属规则（>=1024px）- 必须存在 */
@media (min-width:1024px){
  /* 强化桌面容器宽度契约：在桌面尺度下内容容器处于1120—1440区间 */
  .site-inner{max-width:var(--max-desktop);min-width:var(--min-desktop);grid-template-columns:220px 1fr 300px}
  /* 主区以 9/3 网格呈现：文章主列占9份，边注占3份（通过宽度比模拟） */
  .main-area{grid-column:2 / span 1}
  .article-frame{grid-column:1 / span 1}
  /* Title 跨主区：在视觉上让标题横跨主区与边注上方 */
  .title-row{grid-column:2 / span 2}
  .page-title{font-size:2rem}
  .summary-band{flex:0 0 420px}
  .related-grid{grid-template-columns:repeat(3,1fr)}
}

/* Mobile 专属规则（<=767px）- 必须存在 */
@media (max-width:767px){
  .site-inner{display:block;padding:12px}
  .masthead{border:0;padding:8px 0;background:transparent}
  .masthead-stick{position:static}
  /* Masthead 改为顶部横条（在模板中变为首部） */
  .site-toolbar{display:flex;justify-content:space-between;align-items:center;padding:10px 12px}
  .toolbar-breadcrumb{display:none}
  .title-row{flex-direction:column;gap:10px}
  .page-title{font-size:1.2rem}
  .summary-band{flex:auto}
  .summary-band .summary-inner{border-left:4px solid var(--accent);padding:8px}
  .meta-row{flex-direction:row;gap:10px;flex-wrap:wrap}
  .article-frame{padding:14px}
  .related-grid{display:block}
  .related-grid > *{margin-bottom:10px}
  .side-column{display:block;margin-top:12px}
  .side-inner{position:static}
  /* 保证 320px 时不横向滚动 */
  html,body{overflow-x:hidden}
}

/* 1024px 到 1439px 的中间规则，确保桌面样式差异 */
@media (min-width:768px) and (max-width:1023px){
  .site-inner{display:grid;grid-template-columns:72px 1fr;gap:12px;padding:16px}
  .masthead{border-radius:var(--radius);padding:8px}
  .side-column{display:none}
  .title-row{flex-direction:column}
  .summary-band{align-self:flex-start}
  .related-grid{grid-template-columns:repeat(2,1fr)}
}