:root{
  --bg:#f7f3ea; /* 米白 */
  --ink:#10221b; /* 深墨绿近黑 */
  --accent:#0b3d2e; /* 墨绿 */
  --muted:#7a7a72;
  --line:rgba(16,34,27,0.12);
  --max-width:1280px; /* 在 1120—1440 之间，满足合同 */
  --gutter:24px;
  --col-gap:28px;
  --serif: Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

/* 基础重置与布局 */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

a{color:var(--accent);text-decoration:none}
a:focus{outline:2px solid rgba(11,61,46,0.12)}

/* 头部：极简细导航，居中站名加左右文本链接 */
.site-header{padding:12px var(--gutter);}
.nav-bar{display:flex;align-items:center;justify-content:space-between;max-width:var(--max-width);margin:0 auto;gap:12px}
.nav-left,.nav-center,.nav-right{flex:1 1 auto;text-align:center}
.nav-left{text-align:left}
.nav-right{text-align:right}
.site-title{font-weight:700;color:var(--accent);font-family:var(--serif);font-size:18px}
.nav-link{color:var(--muted);font-size:13px}
.header-rule{height:1px;background:var(--line);margin-top:12px}

/* 主容器，满足桌面宽度约束 */
.layout{max-width:var(--max-width);margin:20px auto;padding:0 var(--gutter)}

/* 标题区：大标题配窄元信息列；标题与摘要通栏（视觉上为通栏） */
.article-header{padding:18px 0;border-bottom:1px solid var(--line);}
.title{font-family:var(--serif);font-size:32px;margin:0 0 10px 0;color:var(--ink);line-height:1.12}
.title-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13px;color:var(--muted);margin-bottom:12px}
.meta-item{padding:4px 0}
.summary{margin:0;color:var(--muted);font-size:15px}

/* 内容区：使用 12 列网格，细分隔线，无圆角 */
.content-area{padding:18px 0}
.content-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--col-gap);align-items:start}
.col-main{grid-column:1/13}
.col-aside{grid-column:1/13}

.article-content{color:var(--ink);font-size:16px;font-family:var(--sans)}
.article-content p{margin:0 0 1em}
.section-title{font-size:16px;margin:10px 0 8px 0;color:var(--accent);font-weight:600}

/* 侧栏与区块 */
.col-aside .aside-block{border-top:1px solid var(--line);padding-top:12px;margin-top:12px}
.aside-title{font-size:14px;margin:0 0 8px 0;color:var(--ink)}
.keywords{font-size:14px;color:var(--muted)}
.keyword-list{white-space:pre-wrap}
.recommend-list{font-size:14px;color:var(--muted)}
.related-list{font-size:14px;color:var(--muted)}

/* 广告容器：独立，不悬浮、无动画 */
.ad{border:1px solid var(--line);padding:12px;margin:18px 0;background:transparent;color:var(--muted);font-size:13px}
.ad-top,.ad-middle,.ad-bottom{background:transparent}

/* 常见问题：期待内部为 <details>，样式微调，保持无卡片感 */
.faq-list details{border-top:1px solid var(--line);padding:10px 0}
.faq-list summary{cursor:pointer;font-weight:600;color:var(--accent);list-style:none}
.faq-list details p{margin:8px 0 0 0;color:var(--muted)}

/* 页脚 */
.site-footer{padding:18px 0;text-align:center;color:var(--muted);font-size:13px}
.footer-line{height:1px;background:var(--line);margin-bottom:12px}

/* 强制视觉签名：全页直角与细线 */
*{border-radius:0}

/* 桌面端布局（1024px 及以上）——实现报刊式 8:4 分栏，标题与摘要通栏 */
@media (min-width:1024px){
  .layout{padding:0 40px}
  .title{font-size:40px}
  .content-grid{grid-template-columns:repeat(12,1fr);gap:32px}
  .col-main{grid-column:1 / span 8}
  .col-aside{grid-column:9 / span 4}
  .col-aside .aside-block{border-left:1px solid var(--line);padding-left:20px}
  /* 标题与摘要视觉上为通栏：保持 H1 宽度但同时配窄元信息列 */
  .article-header{display:block}
  .title-meta{justify-content:flex-end}
  .summary{max-width:100%}
}

/* 手机端规则（最大 767px）——报头压缩为一行，所有栏目单列，保留清晰横线节奏 */
@media (max-width:767px){
  body{font-size:15px}
  .nav-bar{padding:0 6px}
  .nav-left,.nav-center,.nav-right{flex:0 0 auto}
  .site-title{font-size:16px}
  .layout{padding:0 12px}
  .title{font-size:20px;margin-bottom:6px}
  .title-meta{font-size:12px;gap:6px}
  .content-grid{display:block}
  .col-main{grid-column:auto;padding:0}
  .col-aside{grid-column:auto;padding-top:12px;border-top:1px solid var(--line)}
  .col-aside .aside-block{border-left:0;padding-left:0}
  .aside-title{margin-top:8px}
  /* 确保宽度 320px 时无横向滚动 */
  html,body{overflow-x:hidden}
}

/* 中间断点（768–1023px）采用接近移动端的单列布局但留更大间距 */
@media (min-width:768px) and (max-width:1023px){
  .layout{padding:0 20px}
  .content-grid{display:block}
  .col-aside{border-top:1px solid var(--line);padding-top:14px}
}