:root{
  --bg:#ffffff;
  --ink:#141414; /* 炭黑 */
  --muted:#8a7f76; /* 暖灰 */
  --line: #d6d0c9; /* 细线 */
  --accent:#2b2b2b;
  --max-width:1280px;
  --gap:24px;
  --font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

/* 基础重置与排版 */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-stack);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-size:16px;
}

a{color:inherit;text-decoration:underline}
img{max-width:100%;height:auto}

/* 站头 */
.site-header{padding:20px 0 8px;text-align:center}
.masthead{display:inline-block}
.site-name{font-weight:700;color:var(--ink);font-size:20px;text-decoration:none}
.header-sep{border:0;border-top:1px solid var(--line);margin:12px 0}

/* 广告容器（独立块） */
.ad-container{border:1px solid var(--line);padding:10px;background:transparent;margin:12px 0}
.ad-container:empty{display:none}

.container{margin:0 auto;padding:28px;max-width:var(--max-width);width:calc(100% - 160px)}

/* 栅格基础 */
.layout-grid{display:grid;grid-template-columns:1fr;gap:var(--gap);align-items:start}
.col{border-left:0}

/* 文章区基础 */
.article-header h1{margin:0 0 8px;font-size:28px;line-height:1.15;font-weight:700;color:var(--accent)}
.article-desc{margin:0 0 16px;color:var(--muted);font-size:15px;padding:10px;border:1px solid var(--line);background:#fbf9f7}
.article-body{color:var(--ink);font-size:16px}
.article-body p{margin:0 0 14px}

/* meta narrow */
.meta-narrow{border-left:1px solid var(--line);padding-left:16px}
.meta-inner{font-size:13px;color:var(--muted)}
.meta-label{font-weight:600;color:var(--ink);margin-bottom:10px}
.meta-item{margin-bottom:8px}
.meta-item .keywords{word-break:break-all}

/* related list as 关键词索引式 */
.related-left{padding-right:12px;border-right:1px solid var(--line)}
.col-title{font-size:15px;margin:0 0 10px;color:var(--ink)}
.related-list{font-size:14px;color:var(--muted);display:flex;flex-direction:column;gap:8px}
.related-list a{color:var(--muted);text-decoration:none}
.related-list a:hover{color:var(--accent)}

/* FAQ 横线问答样式 */
.faq-section{margin-top:18px}
.faq-section h2{font-size:16px;margin:0 0 8px}
.faq-list > *{border-top:1px solid var(--line);padding:12px 0}
.faq-list > *:first-child{border-top:0}
.faq-list dt{font-weight:600;color:var(--ink)}
.faq-list dd{margin:8px 0 0;color:var(--muted)}

.site-footer{padding:18px 28px;color:var(--muted);font-size:13px;border-top:1px solid var(--line)}
.footer-meta{text-align:center;margin-top:8px}

/* --- 桌面规则：1024px 及以上必须存在 --- */
@media (min-width: 1024px){
  .container{width:clamp(1120px, calc(100vw - 160px), 1440px);max-width:1440px;padding:36px}

  /* 三列非对称网格：推荐（左）- 元信息（窄）- 正文（右偏重） */
  .layout-grid{grid-template-columns:320px 180px 1fr;gap:32px;align-items:start}

  .related-left{order:0}
  .meta-narrow{order:1}
  .content-right{order:2}

  /* 标题组合：大标题配窄元信息列（视觉上形成错位/对角平衡） */
  .article-header{grid-column:3; /* 确保标题偏右 */}
  .meta-narrow{border-left:1px solid var(--line);padding-left:20px}

  .article-header h1{font-size:40px}
  .article-desc{font-size:15px;max-width:68%}

  /* related 以索引列表形式紧凑显示 */
  .related-list{display:flex;flex-direction:column;gap:10px}
}

/* --- 手机规则：最大宽度 767px --- */
@media (max-width: 767px){
  body{font-size:15px}
  .container{width:100%;padding:16px}
  .layout-grid{display:block}

  /* 重排为：标题、摘要、正文、FAQ、推荐（取消桌面错位） */
  .related-left{order:5;border-right:0;padding:0;margin-top:18px}
  .meta-narrow{order:2;border-left:0;padding-left:0;margin:10px 0}
  .content-right{order:3}
  .article-header{order:1}

  .article-header h1{font-size:20px}
  .article-desc{font-size:14px;padding:10px}

  .related-list{flex-direction:row;flex-wrap:wrap;gap:8px}
  .related-list a{padding:6px 8px;border:1px solid var(--line);background:transparent}

  .faq-list > *{padding:10px 0}

  .ad-container{margin:10px 0}
}

/* 可访问性与打印友好 */
@media print{
  .ad-container{display:none}
  .header-sep,.site-footer{display:none}
}