/* Palette & visual signature */
:root{
  --bg:#F6F3EA; /* 象牙白 */
  --ink:#2E2A37; /* 深紫灰 */
  --muted:#6B6670;
  --accent:#332E3B; /* 主题色，细线和边线 */
  --line: rgba(46,42,55,0.12);
  --max-container:1280px; /* 在 1120-1440 范围内选择中间值 */
  --content-width:780px; /* 桌面主栏宽度合同要求 */
  --gap:28px;
  --radius:0; /* 直角 */
}

/* Base reset */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45; /* 紧凑型技术资讯 */
  font-size:16px;
}
.sr{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* Header: 左右分置的一行文字刊头 */
.site-header{border-bottom:1px solid var(--line);background:transparent}
.site-header .header-inner{max-width:var(--max-container);margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:18px 20px}
.brand{font-weight:700;color:var(--accent);text-decoration:none;font-size:14px}
.site-header .header-right{color:var(--muted);font-size:13px}

/* Ad containers are independent, non-floating, non-sticky */
.ad-container{max-width:var(--max-container);margin:18px auto;padding:6px 12px;color:var(--muted);font-size:13px;border-top:1px solid transparent}
.ad-top{margin-top:12px}
.ad-middle{margin-top:22px;margin-bottom:22px}
.ad-bottom{margin-top:26px;margin-bottom:36px}

/* Page wrapper and three-track grid for desktop */
.page-wrapper{padding:18px 12px}
.container{display:grid;gap:var(--gap);align-items:start;margin:0 auto;width:100%;max-width:var(--max-container);grid-template-columns: 1fr var(--content-width) 320px}

/* Left meta strip */
.meta-left{color:var(--muted);font-size:13px;padding:6px 4px}
.meta-left .meta-block{padding:6px 0;border-top:1px solid transparent}
.now{color:var(--ink)}

/* Main content */
.content{background:transparent;padding:6px 10px}
.article-header h1{margin:0 0 8px 0;font-size:30px;line-height:1.12;font-weight:700;color:var(--accent);letter-spacing:-0.3px}
.article-header .summary{margin:0 0 14px 0;color:var(--muted);font-size:15px}

.article-body{color:var(--ink);font-size:15px}
.article-body p{margin:0 0 12px 0}
.article-body h2, .article-body h3{border-top:1px solid var(--line);padding-top:10px;margin-top:18px}
.article-body pre, .article-body code{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", "Noto Sans Mono", monospace;background:transparent;border:1px solid var(--line);padding:8px;border-radius:0;font-size:13px}

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

/* Related：编号列表样式 */
.related{margin-top:18px}
.related > h2{font-size:15px;color:var(--accent);margin:0 0 8px 0}
.related-list{margin:0;padding-left:22px;color:var(--muted)}
.related-list > li{margin:6px 0}

/* Right meta / index */
.meta-right{padding:6px 4px;color:var(--muted);font-size:14px}
.meta-right h3{margin:0 0 8px 0;font-size:13px;color:var(--accent)}
.index-list{padding-left:18px;margin:0}

/* Footer */
.site-footer{max-width:var(--max-container);margin:26px auto 40px auto;padding:8px 12px;color:var(--muted);font-size:13px}

/* Desktop-specific rules (>=1024px) - 必须存在，并体现桌面端差异 */
@media (min-width:1024px){
  /* 容器在 1120px—1440px 之间，这里用中间值并在更大屏幕扩大 */
  .container{max-width:var(--max-container);grid-template-columns:220px var(--content-width) 1fr}
  @media (min-width:1280px){
    .container{max-width:1280px}
  }
  @media (min-width:1440px){
    .container{max-width:1360px}
  }

  /* 桌面主栏样式：明显的居中主阅读栏并保留两侧轻信息轨 */
  .article-header h1{font-size:36px}
  .article-body{font-size:15px}
  .meta-left{position:relative}
  .meta-right{position:relative}
}

/* Mobile-specific rules (<=767px) - 必须存在，且侧边信息下移，正文占满安全区 */
@media (max-width:767px){
  :root{--gap:16px}
  .site-header .header-inner{padding:12px}
  .container{display:block;padding:0 12px}
  .meta-left, .meta-right{order:2}
  .content{order:1;padding:0}
  .article-header h1{font-size:20px;margin-bottom:8px}
  .article-header .summary{font-size:14px}
  .article-body{font-size:15px}
  .related-list, .index-list{padding-left:18px}
  .meta-left, .meta-right{padding:10px 0;color:var(--muted);font-size:13px;border-top:1px solid var(--line)}
  .ad-container{padding:8px 0}
  /* 保证在 320px 下无横向滚动 */
  html,body{overflow-x:hidden}
}

/* Fine tuning: ensure straight corners and thin lines only, avoid rounded cards and colorful capsules */
a{color:var(--accent);text-decoration:none}
button,input,textarea{border-radius:0}