:root{
  --bg:#F7F4EE; /* 纸白 */
  --ink:#0B2540; /* 藏蓝 */
  --muted:#6B7280;
  --line:rgba(11,37,64,0.08);
  --max-width:1280px; /* 在1120-1440之间，取中间值 */
  --gutter:28px;
  --serif: "Lucida Bright", "Times New Roman", Times, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* 基础重置与排版 */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.container{max-width:var(--max-width);margin:0 auto;padding:18px}
.masthead{border-bottom:1px solid var(--line);background:transparent}
.masthead-inner{display:flex;align-items:center;justify-content:space-between;padding:10px 0}
.site-link{font-weight:700;color:var(--ink);text-decoration:none;letter-spacing:0.02em}
.masthead-right{color:var(--muted);font-size:0.9rem}

/* 页面网格与文章 */
.grid{display:grid;gap:24px}
.article{background:transparent;border-top:1px solid transparent}
.title{font-family:var(--serif);font-size:2.4rem;margin:18px 0 8px;text-align:center;line-height:1.05;color:var(--ink)}
.meta-summary{display:flex;flex-direction:column;gap:6px;padding:6px 0 14px}
.summary-label{font-size:0.85rem;color:var(--muted);font-weight:600}
.summary{margin:0;font-size:1rem;color:var(--ink);text-align:left}
.article-meta{display:flex;gap:18px;align-items:center;font-size:0.9rem;color:var(--muted);margin:8px 0 12px}
.article-meta .published{font-weight:600;color:var(--ink)}
.content{font-size:1.05rem;color:var(--ink);font-family:Georgia, "Times New Roman", serif}
.content p{margin:0 0 1em}
.content h2{margin:1.2em 0 0.6em;font-size:1.15rem}
.content ul, .content ol{margin:0 0 1em 1.2em}

/* 分隔与视觉节奏（无圆角、无阴影） */
.ad-container{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 0;background:transparent;color:var(--muted);text-align:center;font-size:0.95rem}
.ad-top{margin-bottom:8px}
.ad-middle{margin:18px 0}
.ad-bottom{margin-top:20px}

.section-heading{font-size:1rem;color:var(--ink);margin:18px 0 8px;padding-bottom:6px;border-bottom:1px solid var(--line);font-weight:700}
.faq-list{display:block}
/* FAQ 横线问答列表：假定 {{faq}} 输出由后端提供条目，CSS 支持横线风格 */
.faq-list > * + *{border-top:1px solid var(--line);padding-top:12px;margin-top:12px}

.related-list{display:block;gap:6px}
/* 相关阅读：关键词索引式列表，呈现为紧凑行式索引 */
.related-list > *{display:inline-block;margin:6px 10px 6px 0;color:var(--ink)}

.side-meta{display:none} /* 默认不显示，桌面显示为视觉签名 */

.site-footer{border-top:1px solid var(--line);padding:14px 0;margin-top:22px;color:var(--muted);font-size:0.9rem}

/* 桌面布局（1024px 及以上）——非对称网格、元信息沿边缘纵向排列 */
@media (min-width:1024px){
  :root{--max-width:1280px}
  .container{padding:28px}
  .grid{grid-template-columns: 1fr 220px;align-items:start;gap:36px}

  /* 文章主区最大宽度保证正文不被限制在窄列 */
  .article{min-width:720px}

  /* 元信息沿桌面端边缘纵向排列（视觉签名） */
  .side-meta{display:block;position:relative}
  .side-meta-inner{display:flex;flex-direction:column;align-items:flex-start;gap:12px;border-left:1px solid var(--line);padding-left:18px;margin-left:6px;font-size:0.88rem;color:var(--muted)}
  .side-item{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);white-space:nowrap}

  /* 标题更具报刊感：紧凑 */
  .title{font-size:3rem;margin-top:6px;margin-bottom:8px}
  .summary{max-width:840px}

  /* 在大屏上，把 article-meta 放在标题下方但不遮挡主流阅读 */
  .article-meta{margin-top:6px}

  /* 相关阅读显示为索引式竖向或多行 */
  .related-list{display:flex;flex-direction:column;gap:8px}
  .related-list > *{display:block}
}

/* 手机端布局（767px 及以下）——紧凑连续、避免首屏空白 */
@media (max-width:767px){
  :root{--max-width:720px}
  body{font-size:15px}
  .container{padding:12px}
  .masthead-inner{padding:6px 0}
  .masthead-right{display:none}

  /* 单栏自然流重排：站名、标题、摘要、正文紧凑连续 */
  .grid{grid-template-columns:1fr}
  .side-meta{display:none}
  .title{font-size:1.4rem;margin:8px 0}
  .summary-label{display:none}
  .summary{font-size:0.98rem;margin-bottom:8px}
  .article-meta{flex-direction:row;gap:12px;font-size:0.85rem}

  /* FAQ 与相关阅读以块级连续排列，侧栏下移为页面区块 */
  .faq, .related{margin-top:12px}
  .related-list > *{display:block}

  /* 广告区块仍然为独立容器，勿黏底或覆盖内容 */
  .ad-container{font-size:0.95rem;padding:10px 0}

  /* 防止横向滚动 */
  img, iframe, table{max-width:100%;height:auto}
}

/* 可访问性与小尺寸适配 */
a{color:var(--ink)}
h1,h2,h3{margin:0}

/* 禁止圆角、阴影等被禁止的视觉风格 */
*{border-radius:0 !important;box-shadow:none !important}