:root{
  --brick:#b14336; /* 砖红 */
  --sand:#f5efe6; /* 砂岩白 */
  --text:#222;
  --muted:#666;
  --accent:var(--brick);
  --surface:#ffffff;
  --gap:24px;
  --max-desktop:1280px;
}
/* 基础排版——人文杂志宽松型 */
*{box-sizing:border-box}
html,body{height:100%;background:var(--sand);color:var(--text);font-family:Georgia, 'Songti SC', 'Hiragino Mincho ProN', 'Times New Roman', serif;line-height:1.65;margin:0}
a{color:inherit;text-decoration:none}
.site-header{background:var(--brick);color:var(--sand);padding:18px 24px}
.site-header .brand{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand-left{display:flex;flex-direction:column}
.site-name{font-weight:700;letter-spacing:0.6px}
.site-sub{font-size:13px;opacity:.95}
.top-nav{display:flex;gap:14px;align-items:center}
.top-nav .nav-home{font-weight:600;color:var(--sand)}
.top-nav .nav-item{opacity:.9}
.header-ad{margin-top:12px;color:var(--brick);background:rgba(255,255,255,0.06);padding:8px;border-radius:2px;font-size:13px}

.page-wrap{padding:28px 18px}
.content-grid{display:grid;gap:var(--gap)}

/* ARTICLE */
.article{background:var(--surface);padding:28px;border-radius:2px;box-shadow:none}
.article-head{margin-bottom:18px}
.title{font-size:28px;margin:0 0 8px 0;line-height:1.1;position:relative;padding-right:6px;font-weight:700;text-align:left}
/* 设计签名：标题首字克制强调色 */
.title::first-letter{color:var(--accent);font-weight:800}
/* 横向粗细线构图 */
.title::before,.title::after{content:"";position:absolute;height:2px;background:var(--muted);left: -120px;right: -10px;top:50%;transform:translateY(-50%)}
.title::before{height:1px;opacity:.18;left:auto;right:100%}
.title::after{height:1px;opacity:.08}

.meta{font-size:13px;color:var(--muted);margin-bottom:10px}
.summary{background:var(--sand);padding:14px;border-left:4px solid var(--accent);margin:0 0 18px 0}

.article-body .content{color:var(--text);font-size:17px}
.mid-ad{margin:20px 0;padding:12px;background:#fff7f5;border:1px solid rgba(177,67,54,0.06);color:var(--brick)}

/* FAQ 按照 design_profile 的问答边线 */
.faq{margin-top:18px;padding:16px;background:var(--surface);border-top:4px solid var(--accent)}
.faq h2{margin:0 0 10px 0;font-size:18px}
.faq-content{color:var(--muted)}

.article-footer{margin-top:18px}
.bottom-ad{padding:12px;background:transparent;border:1px dashed rgba(0,0,0,0.05);color:var(--muted)}

/* related 列表（编号列表） */
.related{background:var(--surface);padding:18px;border-radius:2px;border:1px solid rgba(0,0,0,0.03)}
.related h2{margin-top:0}
.related-list{padding-left:18px;margin:0}
.related-list ol, .related-list ul{margin:0}

/* footer */
.site-footer{padding:20px;background:transparent;color:var(--muted)}
.footer-inner{max-width:1000px;margin:0 auto;display:flex;justify-content:space-between;gap:12px}

/* 响应层级：默认（中等） */
@media (max-width:1023px){
  .content-grid{grid-template-columns:1fr;max-width:900px;margin:0 auto}
  .article{padding:20px}
  .title{font-size:24px}
  .summary{font-size:15px}
}

/* 手机端：单列自然重排（严格执行 mobile_contract） */
@media (max-width:767px){
  body{font-size:16px}
  .page-wrap{padding:14px}
  .content-grid{grid-template-columns:1fr;gap:16px}
  /* DOM 顺序已为：article -> related，手机端将保持标题、摘要、正文、FAQ、推荐的自然顺序 */
  .article{border-radius:0;padding:16px}
  .related{order:3;margin-top:6px}
  .header-ad{font-size:13px}
  .title{font-size:20px}
  .title::before,.title::after{display:none}
  .faq{border-top-width:3px}
  .footer-inner{flex-direction:column;align-items:flex-start}
  /* 保证最小屏宽 320px 时没有横向滚动 */
  html,body{overflow-x:hidden}
}

/* 桌面端规则（明确存在并采用非对称网格与错位宽度以形成对角平衡） */
@media (min-width:1024px){
  .page-wrap{padding:36px}
  /* 容器宽度控制（在桌面端落在 1120px—1440px 范围） */
  .content-grid{width:clamp(1120px,80vw,1400px);max-width:var(--max-desktop);margin:0 auto;display:grid;grid-template-columns:360px 1fr;grid-template-areas:"aside article";gap:36px;align-items:start}

  /* 右侧正文偏右（占据更大空间），左侧推荐偏左且下移以形成对角线平衡 */
  .related{grid-area:aside;padding-top:80px;border-left:3px solid rgba(177,67,54,0.06)}
  .article{grid-area:article;padding:36px}
  .article-head{margin-top:0}

  /* 标题构成：压左并用粗细横线构图 */
  .title{font-size:36px;padding-right:12px}
  .title::before{left:-140px}

  /* 视觉节奏与密度：舒展 */
  .article-body .content{font-size:18px}
  .summary{font-size:16px}

  /* related 列表视觉 */
  .related-list{counter-reset:item;list-style:none;padding-left:0}
  .related-list > li{counter-increment:item;padding:10px 8px;margin-bottom:8px;border-radius:2px;background:var(--sand);display:flex;gap:8px}
  .related-list > li::before{content:counter(item)".";font-weight:700;color:var(--accent);width:30px}
}

/* 无大圆角、无重阴影、无浮动广告，遵守可访问性与轻量原则 */