:root{
  --bg: #F7F4EF;            /* 象牙白 */
  --ink: #2B2A3A;           /* 深紫灰 */
  --muted: #6F6E7A;
  --surface-border: rgba(43,42,58,0.08);
  --surface-bg: #FFFFFF;
  --radius: 2px;           /* surface 小圆角 */
  --content-max: 1320px;   /* 目标区间内取值 */
  --gutter: 24px;
  --tight-line: 1.45;
  --font-stack: system-ui, -apple-system, "Helvetica Neue", "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
}

/* 基本重置与版心 */
*{box-sizing:border-box}
html,body{height:100%;background:var(--bg);color:var(--ink);font-family:var(--font-stack);line-height:var(--tight-line);margin:0}
.page{min-height:100%;display:flex;flex-direction:column}
.site-inner{width:100%;margin:0 auto;padding:12px 20px}

/* header */
.site-header{border-bottom:1px solid var(--surface-border);background:transparent}
.masthead{max-width:var(--content-max);margin:10px auto 0;display:flex;flex-direction:column;align-items:center;gap:8px}
.site-title{font-weight:700;color:var(--ink);letter-spacing:0.01em}
.site-nav ul{display:flex;gap:14px;padding:0;margin:0;list-style:none}
.site-nav a, .site-nav span{font-size:13px;color:var(--muted);text-decoration:none}
.site-nav a{color:var(--ink)}

/* page-inner: central container - responsive */
.page-inner{flex:1;width:100%;padding:28px 20px}

/* Article meta & title composition */
.article{max-width:var(--content-max);margin:0 auto}
.article-meta{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--muted);margin-bottom:12px}
.title-row{display:block;margin-bottom:18px}
.title-row .title{font-size:26px;margin:0;color:var(--ink);font-weight:700;line-height:1.12}
.title-row .summary{margin-top:8px;color:var(--muted);font-size:14px}

/* Layout grid: desktop will override to 10/2 grid */
.layout-grid{display:block}
.content-col{background:var(--surface-bg);border:1px solid var(--surface-border);border-radius:var(--radius);padding:18px}
.side-note{display:none} /* side-note hidden by default on small screens */

/* Content body */
.content-body{color:var(--ink);font-size:15px}
.content-body p{margin:0 0 12px}
.section-heading{font-size:16px;margin:18px 0 10px;color:var(--ink);font-weight:600}

/* FAQ & related baseline */
.faq-grid,.related-grid{display:block;gap:12px}
.faq .faq-item{margin-bottom:12px}
.related-grid a{display:block;padding:10px;border-radius:var(--radius);border:1px solid var(--surface-border);background:transparent;color:var(--ink);text-decoration:none;font-size:14px}

/* Ad containers - non-intrusive blocks */
.ad{margin:16px 0;padding:8px;border:1px dashed var(--surface-border);background:transparent;border-radius:var(--radius);color:var(--muted);font-size:13px}
.ad-top{margin-bottom:20px}

/* Footer */
.site-footer{border-top:1px solid var(--surface-border);padding:14px 0;background:transparent}
.foot-line{max-width:var(--content-max);margin:0 auto;color:var(--muted);font-size:13px}

/* VISUAL SIGNATURE: 大面积留白配紧凑字阶 */
/* 密集型、紧凑型排版 */

/* 手机端规则（必须包含） */
@media (max-width:767px){
  .site-inner{padding:10px}
  .title-row .title{font-size:20px}
  .title-row .summary{margin-top:8px;font-size:14px}
  .layout-grid{display:block}
  .content-col{padding:14px}
  .side-note{display:block;margin-top:12px}
  .side-note .side-surface{border:1px solid var(--surface-border);border-radius:var(--radius);padding:12px;background:var(--surface-bg)}
  /* 边注并入标题下方（已在 DOM 中并在视觉上转为下方） */
  .title-row + .layout-grid .side-note{order:2}
  /* FAQ 单列 */
  .faq-grid{display:block}
  /* 相关阅读单列 */
  .related-grid{display:grid;grid-template-columns:1fr;gap:10px}
  /* 320px 时确保无横向滚动 */
  body,html{overflow-x:hidden}
}

/* 桌面端规则（必须包含） */
@media (min-width:1024px){
  .page-inner{padding:40px 20px}
  .masthead{flex-direction:row;justify-content:space-between;align-items:center}
  .site-nav ul{gap:18px}
  .article{margin-top:6px}

  /* 标题与摘要左右分置：标题占主区，摘要为右侧窄栏 */
  .title-row{display:grid;grid-template-columns:1fr 320px;align-items:start;gap:20px}
  .title-row .title{font-size:32px}
  .title-row .summary{font-size:15px;background:transparent}

  /* 主体为 10/2 网格 */
  .layout-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:20px}
  .content-col{grid-column:1 / span 10;padding:22px}
  .side-note{display:block;grid-column:11 / span 2}
  .side-surface{position:sticky;top:90px;border:1px solid var(--surface-border);border-radius:var(--radius);padding:14px;background:var(--surface-bg)}

  /* FAQ 两列 */
  .faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}

  /* 相关阅读 底部三列短卡但不用阴影 */
  .related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}

  /* 内容容器宽度控制：在 >=1120 时固定在 1120-1440 区间 */
  @media (min-width:1120px){
    .article{max-width:1200px}
  }
}

/* 中间尺寸（768-1023）保持阅读优先的窄版布局 */
@media (min-width:768px) and (max-width:1023px){
  .title-row{display:block}
  .title-row .title{font-size:28px}
  .content-col{padding:18px}
  .side-note{display:none}
  .related-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
}