/* Palette & baseline variables */
:root{
  --ink: #09382f;        /* 墨绿 */
  --cream: #f7f3ea;      /* 米白 */
  --muted: #6b6b6b;
  --border: rgba(9,56,47,0.12);
  --radius: 2px;         /* 2px小圆角 */
  --max-frame: 1300px;   /* 在 1120-1440 之间 */
  --min-frame: 1120px;
  --content-gap: 28px;   /* 舒展密度 */
  --type-stack: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei", sans-serif;
}

/* Base */
html,body{height:100%;}
body{
  margin:0;
  font-family:var(--type-stack);
  background:var(--cream);
  color:#111;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.6;
}

a{color:var(--ink);text-decoration:none}

/* Header: 左右分置的编辑部报头，一行文字刊头 */
.site-header{
  background:transparent;
  border-bottom:1px solid var(--border);
}
.header-inner{
  max-width:var(--max-frame);
  min-width:var(--min-frame);
  margin:0 auto;
  padding:16px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.site-title{
  font-weight:700;
  color:var(--ink);
  font-size:18px;
}
.header-nav{color:var(--muted);font-size:14px}
.header-nav .sep{margin:0 8px;color:var(--border)}

/* Page frame: 外框式专题页，细边框总框架 */
.page-frame{padding:22px 0 40px}
.frame-inner{
  max-width:var(--max-frame);
  min-width:var(--min-frame);
  margin:0 auto;
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-sizing:border-box;
  overflow:hidden;
}

/* Top ad preserves separation */
.ad-slot{padding:12px 18px;font-size:14px;color:var(--muted)}
.ad-top,.ad-middle,.ad-bottom{border-top:1px solid var(--border); background:transparent}

/* Article head: 标题区通栏，超大但不超过两行并紧接正文 */
.article-head{padding:28px 36px 16px;border-bottom:1px solid var(--border)}
.article-title{
  margin:0 0 10px 0;
  color:var(--ink);
  font-size:32px; /* 超大但通常不超过两行 */
  line-height:1.08;
  font-weight:700;
  letter-spacing:-0.3px;
}
.article-meta{color:var(--muted);font-size:13px;margin-bottom:12px}
.article-summary{margin:0;color:#222;background:transparent;font-size:16px}

/* Grid: 12-column logical grid (8 content + 4 side) */
.grid-body{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;padding:24px 36px 36px}
.content-column{grid-column:span 8}
.side-column{grid-column:span 4}

/* Content surface: modules separated by borders, no shadow */
.content-surface, .side-surface{border:1px solid var(--border);border-radius:var(--radius);padding:18px}
.article-content{color:#222;font-size:16px}
.article-content :where(p,ul,ol){margin:0 0 12px 0}

/* FAQ pattern: 主题色顶部边线问答区 */
.faq-area{border-top:3px solid var(--ink);padding-top:14px;margin-top:18px}
.faq-area h2{margin:0 0 10px 0;font-size:18px;color:var(--ink)}
.faq-list{color:#222}

/* Related pattern: 底部三列短卡但不用阴影 */
.related-area{margin-top:20px}
.related-area h3{margin:0 0 10px 0;font-size:15px;color:var(--ink)}
.related-list{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.related-list > *{padding:10px;border:1px solid var(--border);border-radius:var(--radius);background:#fff;font-size:14px}

/* Side column */
.side-block{margin-bottom:12px}
.side-title{margin:0 0 8px 0;color:var(--ink);font-size:14px}
.side-note{margin:0;color:var(--muted);font-size:13px}

/* Footer: 页脚采用宽屏索引式排版 */
.site-footer{border-top:1px solid var(--border);padding:18px 36px;background:transparent}
.footer-index{display:flex;gap:20px;flex-wrap:wrap;justify-content:space-between;color:var(--muted);font-size:14px}
.footer-col{flex:1 1 220px;min-width:160px}
.site-footer small{display:block;margin-top:12px;color:var(--muted)}

/* Typography & density */
h1,h2,h3,h4{font-family:var(--type-stack);margin:0}
p{margin:0 0 12px}

/* Desktop specific rules (>=1024px) - must differ structurally */
@media (min-width: 1024px){
  /* Ensure frame uses centered fixed width within contract range */
  .frame-inner{max-width:1300px;min-width:1120px}

  /* Desktop presents non-symmetric grid: content 8/12, side 4/12 already set */
  .article-title{font-size:38px}
  .related-list{grid-template-columns:repeat(3,1fr)}

  /* Footer wide-screen index: distribute into more visible columns */
  .footer-index{flex-wrap:nowrap}
}

/* Mobile specific rules (<=767px) - independent reflow, remove outer vertical borders */
@media (max-width: 767px){
  body{padding:0 8px}
  .header-inner{min-width:unset;max-width:100%;padding:12px 6px}
  .frame-inner{border-left:none;border-right:none;border-radius:0;min-width:unset;max-width:100%;margin:0;padding:0}
  .article-head{padding:18px 12px 10px}
  .article-title{font-size:22px;line-height:1.15}
  .grid-body{display:block;padding:12px}
  .content-column{grid-column:auto}
  .side-column{grid-column:auto;margin-top:14px}
  .content-surface,.side-surface{padding:14px;border:0;border-top:1px solid var(--border);border-radius:0}
  .related-list{grid-template-columns:repeat(1,1fr)}
  .related-list > *{display:block}
  .footer-index{display:block}
  .footer-col{min-width:unset;margin-bottom:10px}

  /* Ensure no horizontal scroll at 320px */
  html,body{min-width:0}
}

/* Accessibility & minor helpers */
.article-meta .meta-sep{margin:0 8px;color:var(--border)}