:root{
  --brick:#a83f30; /* 砖红 */
  --sand:#f3ebe1; /* 砂岩白 */
  --text:#222;
  --muted:#6a6a6a;
  --max-width:1200px;
  --gutter:28px;
  --serif: Georgia, 'Times New Roman', serif;
  --sans: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans','PingFang SC','Hiragino Sans GB',sans-serif;
}
/* 基本重置与排版 */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--sand);color:var(--text);font-family:var(--sans);line-height:1.65;-webkit-font-smoothing:antialiased}
.wrap{margin:24px auto;padding:18px;max-width:calc(var(--max-width) + 2 * var(--gutter));}
.toolbar{background:var(--brick);color:#fff;padding:12px 0}
.toolbar-inner{max-width:var(--max-width);margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 16px}
.brand{font-weight:700;letter-spacing:0.6px}
.tooltrail{font-size:13px;opacity:0.95}

/* Article head: title 居中，摘要左对齐 */
.article{max-width:var(--max-width);margin:20px auto;background:transparent}
.article-head{padding:18px 20px 8px}
.article-head h1{font-family:var(--serif);font-size:34px;margin:0 auto 12px;text-align:center;color:var(--brick);line-height:1.15;max-width:1100px}
.meta-row{display:flex;gap:12px;justify-content:center;margin-bottom:12px}
.meta-block{display:flex;flex-direction:column;align-items:center;background:#fff;border:1px solid rgba(0,0,0,0.04);width:96px;height:96px;flex:0 0 96px;box-sizing:border-box}
.meta-label{font-size:12px;color:var(--muted);margin-top:10px}
.meta-block time,.meta-block .now{font-weight:600;margin-top:6px}
.summary{max-width:700px;margin:0 0 18px 0;padding:12px 0 0 0;color:var(--muted);font-size:15px}

/* 主体布局：桌面为非对称网格，正文偏右，推荐偏左，形成错位对角平衡 */
.layout{display:block}
.col{box-sizing:border-box}
.left-col{order:1}
.content-col{order:2}
.content-surface{background:#fff;padding:18px;border:1px solid rgba(0,0,0,0.04)}
.vline{position:absolute;width:1px;background:var(--brick);height:100%;left:calc(50% - 560px);top:0;opacity:0.85}
.body-text{position:relative}
.ad{margin:18px 0;padding:12px;background:rgba(0,0,0,0.03);color:var(--muted);font-size:14px}
.faq{margin-top:18px;border-top:4px solid var(--brick);padding-top:12px}
.faq h3{margin:0 0 8px 0}
.faq-body{color:var(--muted)}

.related-grid{display:flex;flex-direction:column;gap:12px}
.related-grid > *{background:#fff;padding:10px;border:1px solid rgba(0,0,0,0.06);font-size:14px;color:var(--text);}
.rail-title{font-size:15px;margin:0 0 10px 0;color:var(--brick)}

.site-footer{max-width:var(--max-width);margin:30px auto 0;text-align:center;color:var(--muted);font-size:13px;padding:18px 0}

/* --- Desktop 特定规则 (>=1024px) --- */
@media (min-width:1024px){
  .wrap{padding:32px}
  .article-head h1{font-size:44px}
  .article{margin-top:28px}
  .layout{display:grid;grid-template-columns:320px 1fr;gap:36px;align-items:start;position:relative}
  .left-col{order:1}
  .content-col{order:2}
  .content-surface{padding:28px}
  /* vline 贯穿页面的1px主题竖线，贯穿视觉轴线并响应容器宽度 */
  .vline{display:block}
  /* 将 related 在视觉上放到左侧（已在DOM靠后），满足蓝图要求但保留语义顺序） */
  .left-rail{position:sticky;top:24px}
  /* 确保正文为宽阔阅读栏，偏右显示以形成对角平衡 */
  .content-col .body-text{max-width:820px;margin-left:40px}
  .meta-row{justify-content:flex-start;margin-left:40px}
}

/* --- Mobile 特定规则 (<=767px) --- */
@media (max-width:767px){
  :root{--gutter:16px}
  .wrap{margin:0;padding:12px}
  .toolbar-inner{padding:0 12px}
  .article-head h1{font-size:20px;text-align:left}
  .meta-row{justify-content:flex-start}
  .meta-block{width:64px;height:64px}
  .summary{margin-top:8px}
  /* 取消错位：按标题、摘要、正文、FAQ、推荐顺序自然重排（DOM 已满足） */
  .layout{display:block}
  .left-col{order:3}
  .content-col{order:2}
  .left-rail{position:static}
  .content-surface{padding:14px}
  .vline{display:none}
  .related-grid{grid-template-columns:repeat(1,1fr)}
  .related-grid > *{display:block}
  .article{margin:10px 0}
}

/* 兼容中间断点 (768px - 1023px) 使用平衡密度 */
@media (min-width:768px) and (max-width:1023px){
  .wrap{padding:20px}
  .article-head h1{font-size:26px;text-align:left}
  .layout{display:block}
  .vline{display:none}
}

/* 无阴影、方形信息块、舒展的留白，避免常见大圆角+阴影卡片 */