:root{
  --brick:#9b2f2f; /* 砖红 */
  --sand:#f7efe6; /* 砂岩白 */
  --text:#222222;
  --muted:#6b6b6b;
  --accent:var(--brick);
  --max-width:1280px; /* 目标容器宽度（桌面优先） */
  --gap:20px;
  --ui-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}
/* 基础重置与排版 */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--sand);
  color:var(--text);
  font-family:var(--ui-font);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
.container{
  margin:0 auto;
  padding:24px;
  width:100%;
  max-width:var(--max-width);
}
.site-header{
  background:transparent;
  border-bottom:1px solid rgba(0,0,0,0.06);
}
.toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 24px;
}
.site-name{
  font-weight:700;
  color:var(--brick);
  font-size:18px;
}
.tool-right{color:var(--muted);font-size:13px}
.nav-secondary{
  padding:6px 24px 12px 24px;
  font-size:13px;
  color:var(--muted);
}
.ad{padding:12px 24px;margin:12px 0;background:transparent;border-top:1px dashed rgba(0,0,0,0.04);border-bottom:1px dashed rgba(0,0,0,0.04);font-size:13px;color:var(--muted)}
/* 布局网格：默认移动优先，桌面在 @media 覆盖 */
.layout-grid{display:block}
.article{padding:0}
.title{
  margin:8px 0 6px 0;
  color:var(--text);
  font-size:28px; /* 手机与平板较大阅读字号 */
  line-height:1.12;
  font-weight:700;
}
.meta-inline{display:flex;gap:12px;align-items:center;font-size:13px;color:var(--muted);margin-bottom:8px}
.summary{margin:8px 0 18px 0;color:var(--muted);font-size:15px}
.content{font-size:16px;color:var(--text)}
.content p{margin:0 0 12px}
/* FAQ 区域：桌面为表格式左问右答，移动端自然堆叠 */
.faq{margin-top:18px}
.faq-heading{font-size:15px;margin:0 0 8px 0;color:var(--brick)}
.faq-list{display:block}
/* 相关阅读三列短卡（无阴影） */
.related{margin-top:20px}
.related-title{font-size:14px;color:var(--muted);margin:0 0 8px 0}
.related-list{display:grid;grid-template-columns:1fr;gap:12px}
.related-list > *{background:transparent;border:1px solid rgba(0,0,0,0.06);padding:10px;border-radius:4px}
/* 右侧工具区基础 */
.side{margin-top:18px}
.side-card{border:1px solid rgba(0,0,0,0.06);padding:12px;border-radius:4px;background:transparent}
.side-title{font-size:13px;color:var(--muted);margin-bottom:8px}
.footer-inner{padding:18px 24px;text-align:center;color:var(--muted);font-size:13px}
/* 桌面规则：>=1024px 必须存在 */
@media (min-width:1024px){
  body{background:linear-gradient(180deg,var(--sand) 0%, #fbf8f6 100%)}
  .container{display:block;padding:32px;max-width:1280px}
  .layout-grid{
    display:grid;
    grid-template-columns:3fr 1fr; /* 主区 9 / 3 分栏表现 */
    gap:24px;
    align-items:start;
  }
  /* 视觉签名：沿左侧竖列显示（仅桌面） */
  .meta-vertical{position:relative;transform:none;order:-1;width:48px;margin-right:12px}
  .meta-vertical .meta-stack{writing-mode:vertical-rl;text-orientation:mixed;display:flex;gap:10px;align-items:center;justify-content:center;height:100%;color:var(--muted);font-size:13px}
  /* 将 meta-vertical 固定在容器左侧外沿视觉上，但不遮挡内容 */
  .meta-vertical{position:absolute;left:calc(50% - var(--max-width)/2 - 64px);top:48px}

  .article{padding:0 6px}
  .title{font-size:40px;line-height:1.06;max-height:3.0em;overflow:hidden;display:block}
  .summary{font-size:15px}
  .content{font-size:16px}

  /* FAQ 左右表格 */
  .faq-list{display:block}
  /* 假设内容提供者使用 <dl> 或 .faq-item 结构；尽量支持两列表格式展示 */
  .faq-list dl{display:grid;grid-template-columns:28% 1fr;gap:12px 20px}
  .faq-list .faq-item{display:grid;grid-template-columns:28% 1fr;gap:12px 20px;padding:8px 0;border-bottom:1px solid rgba(0,0,0,0.04)}

  /* 相关阅读三列短卡 */
  .related-list{grid-template-columns:repeat(3,1fr)}

  /* 右侧工具区固定样式 */
  .side{position:relative}
  .side-card{position:sticky;top:84px}

  /* 遵守密度契约：信息密集但有细线分隔、小字号标签 */
  .meta-inline{font-size:13px}
  .site-name{font-size:20px}
}

/* 手机规则：<=767px 单独重排 */
@media (max-width:767px){
  .container{padding:16px}
  .layout-grid{display:block}
  .meta-vertical{display:none}
  .title{font-size:22px;margin-top:8px}
  .meta-inline{flex-direction:row;gap:8px;font-size:12px}
  .summary{font-size:14px}
  .content{font-size:16px}
  .nav-secondary{display:block}
  .nav-secondary .crumbs{white-space:normal;word-break:break-word}
  /* FAQ 在移动端自然上下堆叠，问题可换行 */
  .faq-list{display:block}
  .faq-list dl{display:block}
  .related-list{grid-template-columns:repeat(1,1fr)}
  .side{order:3}
  .site-header{position:relative}
}

/* 可访问性与微交互（无动画） */
.title, .summary, .content{transition:none}
.sr{position:absolute;border:0;padding:0;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0)}