:root{
  --bg:#f5f5f5; /* 石墨灰浅 */
  --ink:#222222; /* 石墨灰深 */
  --muted:#6b6b6b;
  --accent:#c79f00; /* 芥末黄 */
  --line:#e3e3e3;
  --container-max:1280px;
  --container-min:1120px;
  --gap:20px;
  --mobile-gap:12px;
}

/* 基础重置与版式 */
*{box-sizing:border-box}
html,body{height:100%;background:var(--bg);color:var(--ink);margin:0;font-size:16px;line-height:1.65}
a{color:var(--accent);text-decoration:none}
.sr{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* 页面框架 */
.page{min-height:100vh;display:flex;flex-direction:column}
.site-header{border-bottom:1px solid var(--line);background:transparent}
.header-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;padding:18px 16px;gap:16px}
.vertical-mark{width:48px;flex:0 0 48px;display:flex;align-items:center;justify-content:center}
.vertical-mark .vtext{writing-mode:vertical-rl;transform:rotate(180deg);font-weight:600;color:var(--muted);font-family:serif;font-size:13px}
.title-band{flex:1;display:flex;flex-direction:column;align-items:center}
.site-title{font-family:Georgia, 'Times New Roman', serif;font-size:18px;color:var(--ink);font-weight:700}
.site-title a{color:var(--ink)}
.thin-nav{width:100%;height:6px;display:flex;align-items:center;justify-content:center}
.thin-nav .nav-line{width:60%;height:1px;background:var(--line);display:block}

/* 主体容器（mobile-first） */
.container{width:100%;padding:16px}
.grid{display:block;max-width:100%;margin:0 auto}
.article-title{font-family:Georgia, 'Times New Roman', serif;font-size:22px;line-height:1.2;text-align:center;margin:16px 0 10px;color:var(--ink)}
.meta{font-size:13px;color:var(--muted);display:flex;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.summary{font-size:15px;color:var(--muted);text-align:left;border-top:1px solid var(--line);padding-top:12px;margin-bottom:14px}
.article-body{background:transparent}
.content{color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;font-size:16px}
.content p{margin:0 0 1em}

.ad{border:1px solid var(--line);background:transparent;padding:10px;color:var(--muted);font-size:13px}
.ad-top{margin:8px 16px}
.ad-middle{margin:18px 0}
.ad-bottom{margin:22px 16px}

.faq{margin-top:14px}
.faq-list > * + *{border-top:1px solid var(--line);padding-top:12px;margin-top:12px}

.related{margin-top:18px}
.related-title{font-size:15px;margin-bottom:10px}
.related-grid{display:flex;flex-wrap:wrap;gap:10px}
.related-grid > *{flex:1 1 calc(50% - 10px)}

.right-rail{border-left:1px solid var(--line);margin-top:18px;padding-left:12px}
.rail-inner{font-size:14px;color:var(--muted)}
.rail-summary-heading{font-weight:700;margin-bottom:8px;color:var(--ink)}
.rail-summary{font-size:14px}

.site-footer{border-top:1px solid var(--line);margin-top:20px;background:transparent;padding:18px 16px}
.footer-index{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:12px;justify-content:space-between}
.footer-brand{font-weight:600;color:var(--muted)}
.footer-grid{display:none}
.footer-home a{color:var(--muted)}

/* 手机端规则（明确要求） */
@media (max-width:767px){
  :root{--gap:12px}
  .header-inner{padding:12px}
  .article-title{font-size:20px;margin:12px 0}
  .meta{font-size:12px}
  .summary{font-size:14px}
  .related-grid{flex-wrap:wrap}
  .related-grid > *{flex:1 1 calc(50% - 10px)} /* 横向分隔列表并换行，避免横向滚动 */
  .right-rail{border-left:none;padding-left:0;margin-top:12px;border-top:1px solid var(--line);padding-top:12px}
  /* 将侧栏逻辑上放在正文后（DOM 已保证），仅视觉上是下移 */
}

/* 桌面端规则（必须包含 min-width:1024px） */
@media (min-width:1024px){
  .container{max-width:var(--container-max);min-width:var(--container-min);padding:24px}
  .grid{display:grid;grid-template-columns:8fr 4fr;grid-template-rows:auto auto 1fr;gap:var(--gap);align-items:start}

  /* 标题横跨两列 */
  .article-title{grid-column:1 / -1;font-size:32px;margin:10px 0 6px}

  /* 元信息与摘要位于第一列（摘要在 metadata 之下） */
  .meta{grid-column:1 / 2;grid-row:2;align-self:center}
  .summary{grid-column:1 / 2;grid-row:2;margin:0;padding-top:0;border-top:0}

  /* 文章正文在左列的第三行 */
  .article-body{grid-column:1 / 2;grid-row:3;padding-right:24px}

  /* 侧栏从摘要下方开始（放在第3行的右列） */
  .right-rail{grid-column:2 / 3;grid-row:3;border-left:1px solid var(--line);padding-left:20px;margin-top:0}

  /* 相关推荐在桌面为四列紧凑网格 */
  .related-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
  .related-grid > *{margin:0}

  /* 页脚视觉索引风格 */
  .footer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;flex:1}
  .fi-cell{min-height:10px;border-top:1px solid var(--line);opacity:0.6}
}

/* 视觉与可读性限制：无圆角、无重阴影、细线分隔 */
*{border-radius:0}
button, input, textarea{font-family:inherit}