/* 视觉与布局变量 */
:root{
  --bg:#f6efe6; /* 奶油白 */
  --surface:#fff; /* 局部表面 */
  --accent:#4a2f23; /* 深棕主色 */
  --muted:#777; /* 中性色 */
  --rule:#ddd; /* 细灰线 */
  --max-width-clamp: clamp(1120px, 80vw, 1280px);
  --gap:20px;
  --radius:4px; /* 方角 */
  --font-stack: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

/* 基础重置与排版 */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font-stack);
  background:var(--bg);
  color:#222;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.site-container{
  margin:0 auto;
  width:var(--max-width-clamp);
  padding:18px;
}

/* 头部 */
.site-header{
  border-bottom:1px solid var(--rule);
  background:transparent;
}
.header-row{
  display:flex;
  align-items:center;
  gap:12px;
}
.brand{flex:0 0 auto}
.brand-link{
  color:var(--accent);
  font-weight:700;
  text-decoration:none;
  font-size:18px;
}

/* 导航 栏目索引条 */
.index-bar{margin-left:16px;overflow:hidden}
.index-list{display:flex;gap:12px;margin:0;padding:0;list-style:none}
.index-list li{padding:6px 10px;border-radius:4px;min-height:44px;display:flex;align-items:center}
.index-list li span{color:var(--muted);font-size:14px}

/* 页面网格：主栏 + 侧栏（桌面） */
.page-grid{display:grid;grid-template-columns:1fr 320px;gap:var(--gap);align-items:start;margin-top:18px}
.article-main{background:transparent}
.side-column{background:transparent}

/* 文章头部：标题与窄元信息列 */
.title-area{display:flex;gap:18px;align-items:flex-start}
.title{font-size:34px;margin:0;color:#111;line-height:1.12;font-weight:700}
.meta-column{min-width:160px;max-width:220px;color:var(--muted);font-size:13px;display:flex;flex-direction:column;gap:6px}
.meta-column time{color:var(--muted)}
.current-time{font-size:13px}
.keywords{font-size:12px;color:var(--muted)}

/* 摘要区：视觉签名为窄色带 */
.summary-row{display:flex;align-items:flex-start;gap:12px;margin-top:12px}
.summary-band{width:6px;height:100%;background:var(--accent);border-radius:2px;margin-top:4px}
.summary{margin:0;color:#333;background:transparent;padding:6px 0;font-size:15px}

/* 正文 */
.article-body .content{margin-top:18px;color:#222}
.article-body .content :where(p,ul,ol){max-width:80ch}

/* 广告位样式（静态容器） */
.ad-slot{border:1px dashed var(--rule);background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.02) 100%);padding:10px;border-radius:var(--radius);color:var(--muted);font-size:13px;margin:18px 0}
.ad-top{margin:12px 0}

/* FAQ：主题色顶部边线 */
.faq-section{margin-top:18px;padding-top:12px;border-top:3px solid var(--accent)}
.faq-section h2{margin:0 0 8px 0;font-size:18px}
.faq-content{color:#333}

/* 相关阅读：编号列表风格 */
.related-section{margin-top:18px}
.related-list{padding-left:18px;margin:6px 0 0 0}
.related-list > *{margin:6px 0}

/* 侧栏块 */
.side-block{border:1px solid var(--rule);background:var(--surface);padding:12px;margin-bottom:12px;border-radius:var(--radius)}
.side-title{margin:0 0 8px 0;color:var(--accent);font-size:14px}
.side-list{list-style:none;padding:0;margin:0;color:var(--muted)}
.side-list li{padding:6px 0;border-top:1px solid transparent}
.side-list.compact li{padding:10px 0;min-height:44px}

/* 页脚 */
.site-footer{border-top:1px solid var(--rule);margin-top:28px;padding:14px 0;background:transparent}
.footer-row{display:flex;justify-content:space-between;font-size:13px;color:var(--muted)}

/* 边界与线条风格：方角、细灰线 */
*{border-radius:0}

/* 响应式：桌面（>=1024px）必须有专属布局规则 */
@media (min-width:1024px){
  .site-container{width:var(--max-width-clamp);padding:22px}
  .title{font-size:40px}
  .meta-column{font-size:13px}
  /* 桌面采用非对称网格：主栏更宽，侧栏固定窄栏 */
  .page-grid{grid-template-columns:1fr 320px}
  .side-column{position:relative}
  /* 在宽屏上增加信息密度和规则显示 */
  .index-list li span{font-size:15px;color:var(--muted)}
}

/* 移动端：<=767px，采用独立重排 */
@media (max-width:767px){
  .site-container{width:100%;padding:12px}
  .header-row{flex-direction:row;align-items:center}
  .index-bar{overflow:auto}
  .index-list{display:flex;gap:8px;padding:6px 0}
  .index-list li{min-width:64px;min-height:44px;padding:8px 10px}

  /* 单列流式布局：侧栏下移 */
  .page-grid{display:block}
  .article-main{order:0}
  .side-column{order:1}
  .side-column{margin-top:18px}

  /* 标题编排调整为竖排顺序：标题在上，元信息收起为行内 */
  .title-area{flex-direction:column;align-items:flex-start;gap:8px}
  .meta-column{display:flex;flex-direction:row;gap:10px;flex-wrap:wrap}
  .meta-column time,.current-time{font-size:13px}

  .title{font-size:22px;line-height:1.2}
  .summary-row{align-items:flex-start}
  .summary-band{width:5px}

  /* 确保交互触点不小于44px */
  a,button,.index-list li{min-height:44px}
}

/* 可访问性与印刷 */
@media print{
  .index-bar,.side-column,.ad-slot{display:none}
  .site-container{width:100%;padding:0}
}