:root{
  --bg:#f5efe8; /* 砂岩白 */
  --ink:#2b2b2b;
  --muted:#6d6d6d;
  --accent:#b44b3b; /* 砖红 */
  --line:rgba(43,43,43,0.08);
  --max-width-clamp: clamp(1120px, 85vw, 1440px);
  --gap:16px;
  --reading-width: 70ch;
  --ui-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}
/* 基础布局 */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--ui-font);line-height:1.45;-webkit-font-smoothing:antialiased}
.site-shell{display:flex;flex-direction:column;align-items:center;padding:20px}
.container{width:var(--max-width-clamp);}

/* Header：居中站名 + 左右文本链接 */
.site-header{width:100%;max-width:var(--max-width-clamp);border-bottom:1px solid var(--line);padding:12px 0 8px}
.header-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.header-row .nav-left,.header-row .nav-right{flex:1;color:var(--muted);font-size:13px}
.header-row .brand{flex:0 0 auto;text-align:center;font-weight:600;color:var(--accent);font-size:18px}
.home-link{color:var(--muted);text-decoration:none}
.header-row .nav-item{margin-left:12px}

/* 第二层索引式导航（桌面可见，移动取消） */
.second-nav{margin-top:10px}
.second-nav ul{display:flex;gap:12px;flex-wrap:wrap;list-style:none;padding:0;margin:0;font-size:13px;color:var(--muted)}
.second-nav li{padding:6px 0;border-bottom:1px solid transparent}

/* 主体网格：9/3 分栏 */
.grid{display:grid;grid-template-columns:3fr 1fr;gap:24px;align-items:start;width:100%;}
.main-article{background:transparent}
.side-col{padding-left:12px;border-left:1px solid var(--line)}

/* 标题区（标题与摘要左右分置） */
.article-head{display:flex;gap:20px;align-items:flex-start;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:12px}
.title-area{flex:2}
.summary-area{flex:1}
h1{font-size:22px;margin:0;color:var(--ink);font-weight:700}
.meta-row{margin-top:8px;font-size:12px;color:var(--muted);display:flex;gap:8px;align-items:center}
.summary{margin:0;color:var(--muted);font-size:15px}

/* 正文 */
.article-body{font-size:15px;color:var(--ink);line-height:1.7;max-width:var(--reading-width)}
.article-body p{margin:0 0 12px}
.article-body h2,.article-body h3{margin:18px 0 8px;color:var(--accent);font-weight:600}
.article-body ul{margin:0 0 12px 20px}

/* 广告容器：独立、不覆盖、不浮动 */
.ad{width:100%;background:transparent;border:1px dashed var(--line);padding:10px 12px;margin:18px 0;font-size:13px;color:var(--muted)}
.ad-top{max-width:var(--max-width-clamp);}

/* FAQ：主题色顶部边线 */
.faq{border-top:4px solid var(--accent);padding-top:12px;margin-top:18px}
.faq h2{font-size:16px;margin:0 0 8px}
.faq-list{font-size:14px;color:var(--muted)}

/* 相关阅读：关键词索引式列表 */
.related{margin-top:14px}
.related h3{font-size:14px;margin:0 0 8px}
.related-list{font-size:13px;display:flex;flex-wrap:wrap;gap:8px;color:var(--muted)}
.related-list a{color:var(--accent);text-decoration:none}

/* 侧栏元信息纵向排列（视觉签名） */
.meta-vertical{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.meta-item{font-size:13px;color:var(--muted)}
.meta-label{font-weight:600;color:var(--accent);font-size:12px}
.meta-value{margin-top:6px;color:var(--ink);font-size:13px}

/* Footer */
.site-footer{width:100%;max-width:var(--max-width-clamp);padding:18px 0;margin-top:18px;color:var(--muted);font-size:13px;border-top:1px solid var(--line)}

/* 细节：边框、无圆角、无阴影，紧凑型排版 */
*{border-radius:0}

/* 响应式：桌面规则（>=1024px）- 确保容器在 1120-1440 之间，并展示桌面专属布局 */
@media (min-width:1024px){
  .container{width:var(--max-width-clamp)}
  .header-row .brand{font-size:20px}
  h1{font-size:28px}
  .article-head{align-items:flex-start}
  .summary{font-size:15px}
  .second-nav{display:block}
  /* 桌面端侧栏保持竖向元信息靠近边缘视觉 */
  .side-col{padding-left:24px}
}

/* 平板中间断点（768-1023）：微调，保持两栏但更紧凑 */
@media (min-width:768px) and (max-width:1023px){
  .grid{grid-template-columns:2.5fr 1fr;gap:18px}
  h1{font-size:22px}
  .second-nav{display:none}
}

/* 手机端规则（<=767px）- 取消第二层横排导航，标签可换行，正文舒适字号，侧栏下移 */
@media (max-width:767px){
  .site-shell{padding:12px}
  .container{width:100%}
  .second-nav{display:none}
  .grid{display:block}
  .main-article{width:100%}
  .side-col{border-left:0;padding-left:0;margin-top:16px}
  .article-head{flex-direction:column;gap:8px}
  h1{font-size:20px}
  .summary{font-size:15px}
  .article-body{font-size:16px}
  .meta-row{font-size:13px}
  .related-list{gap:10px}
  .ad{font-size:13px}
  /* 确保在最小320px下无横向滚动 */
  html,body{overflow-x:hidden}
}
