/* Design tokens */
:root{
  --bg: #f7f5f3; /* warm light surface */
  --surface: #fff; /* card/background where needed */
  --text: #222; /* charcoal */
  --muted: #7a6f69; /* warm gray */
  --accent: #4a4a4a;
  --max-desktop: 1440px;
  --min-desktop: 1120px;
  --gutter: 28px;
  --narrow: 300px;
  --baseline: 24px; /* primary baseline */
  --sub-baseline: 12px; /* secondary baseline */
  --content-width: 820px; /* target readable measure */
}

/* Base reset and typography: 使用系统字体 */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
  line-height:1.5;
  font-size:16px;
}

.wrap{
  margin:24px auto;
  padding:0 20px 48px;
}

/* Header: 极简细导航 */
.site-header{padding:10px 0 6px; color:var(--muted)}
.header-inner{max-width:100%; display:flex; align-items:center; gap:12px}
.site-name{font-weight:600; color:var(--accent); text-decoration:none}
.header-spacer{font-size:13px; color:var(--muted)}

/* Page top ad reserved but non-intrusive */
.page-top-ad, .ad-middle, .footer-ad{max-width:100%; margin:8px 0;}

/* Article grid base for desktop - will adapt in media queries */
.article-grid{display:grid; gap:18px; align-items:start}
.title-row{display:grid; grid-template-columns: 1fr var(--narrow); gap:20px; align-items:start}
.title-row h1{margin:0; font-size:28px; line-height:1.08; font-weight:700; letter-spacing: -0.02em}
.meta-narrow{font-size:13px; color:var(--muted)}
.meta-item{margin-bottom:8px}
.description{margin:0; color:var(--muted); font-size:15px; padding-top:6px}

/* Content area with double baseline visual signature */
.content-area{background:transparent;}
.article-content{
  margin-top:8px;
  color:var(--text);
  font-size:16px;
  line-height:calc(var(--baseline) / 16);
  max-width:var(--content-width);
  /* 双层基线网格：细微横向参照线，节奏感但不抢眼 */
  background-image:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent calc(var(--sub-baseline) - 0.5px),
      rgba(0,0,0,0.02) calc(var(--sub-baseline) - 0.5px),
      rgba(0,0,0,0.02) calc(var(--sub-baseline))
    ),
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent calc(var(--baseline) - 0.5px),
      rgba(0,0,0,0.03) calc(var(--baseline) - 0.5px),
      rgba(0,0,0,0.03) calc(var(--baseline))
    );
  background-repeat:repeat;
  background-position: left top;
  padding:18px 0 32px 0;
}
.article-content :where(p, ul, ol){margin:0 0 14px 0}
.article-content ul, .article-content ol{padding-left:22px}

/* FAQ：横线问答列表 */
.faq{padding-top:6px}
.faq > *{border-top:1px solid rgba(0,0,0,0.06); padding:14px 0}
.faq h4, .faq p{margin:0}

/* Related pattern: 底部三列短卡但不用阴影 */
.related{margin-top:22px}
.related-title{font-size:15px; color:var(--muted); margin:0 0 12px}
.related-grid{display:grid; gap:12px}
.related-grid > *{background:var(--surface); padding:12px; border-radius:2px; border:1px solid rgba(0,0,0,0.04); color:var(--accent); text-decoration:none}
.related-grid > *:hover{background:#fcfcfc}

/* Footer */
.site-footer{padding:18px 20px 40px; color:var(--muted); font-size:13px}
.foot-note{margin-top:10px}

/* Accessibility: visually hidden for decorative headings */
.sr-only{position:absolute !important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* Desktop rules: 明确的桌面布局（>=1024px） */
@media (min-width:1024px){
  .wrap{max-width:var(--max-desktop); margin-left:auto; margin-right:auto; padding-left:40px; padding-right:40px}
  /* 强制容器最小宽度以利用横向空间（合同要求1120-1440之间） */
  .wrap{min-width:var(--min-desktop);}

  /* 双列非对称网格（主宽列 + 窄信息列） */
  .article-grid{grid-template-columns: 1fr var(--narrow);}
  .title-row{grid-column:1 / -1; display:grid; grid-template-columns: 1fr var(--narrow); align-items:start}
  .description{grid-column:1 / -1; max-width:1200px}

  /* 正文占主列（宽），FAQ占窄列（交替布局） */
  .content-area{grid-column:1 / 2}
  .faq{grid-column:2 / 3}

  /* Related 跨栏展示在底部 */
  .related{grid-column:1 / -1}
  .related-grid{grid-template-columns: repeat(3, 1fr);}

  /* 放大标题 */
  .title-row h1{font-size:40px}
  .article-content{font-size:17px; line-height:1.65}
}

/* Mobile rules: <=767px，独立重排，紧凑连续 */
@media (max-width:767px){
  body{font-size:15px}
  .wrap{margin:12px auto; padding:12px}
  .article-grid{display:block}
  .title-row{display:block}
  .title-row h1{font-size:20px; margin-bottom:6px}
  .meta-narrow{font-size:13px; color:var(--muted); margin-bottom:8px}
  .description{margin-top:0}
  .content-area{margin-top:6px}
  .article-content{padding:6px 0 18px; background:none; max-width:100%}
  .faq{border-top:1px solid rgba(0,0,0,0.04); padding-top:12px}
  /* FAQ 和正文顺序恢复自然堆叠（侧栏下移为区块） */
  .faq{grid-column:auto}
  .related-grid{grid-template-columns:repeat(1, 1fr);}
  .related-grid > *{display:block}
  /* 广告和页脚保持流式不固定 */
  .page-top-ad, .ad-middle, .footer-ad {margin:10px 0}
}

/* Prevent horizontal scroll at narrowest sizes */
@media (max-width:320px){
  .wrap{padding-left:10px; padding-right:10px}
  .site-name{font-size:15px}
  .title-row h1{font-size:18px}
}