:root {
  --site-primary: #174b83;
  --site-on-primary: #ffffff;
  --site-secondary: #eaf3f8;
  --site-on-secondary: #183b5c;
  --site-background: #f5f8fa;
  --site-on-background: #182b3b;
  --site-font-body: Montserrat, sans-serif;
  --site-font-heading: Montserrat, sans-serif;
  --site-heading-scale: 1;
  --site-spacing-scale: 1;
  --site-radius-scale: 1;
  --site-decoration-opacity: 1;
  color-scheme: light dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: light-dark(#f5f8fa, #101a24); color: light-dark(#243647, #e5edf4); font-family: var(--site-font-body); font-size: 14px; line-height: 1.75; }
.site-root { min-height: 100vh; width: 100%; border-radius: 0; background-color: var(--site-background); color: var(--site-on-background); }

/* 不再使用负偏移！蓝色块和正文同宽，彻底消除抬头白色条 */
.site-header {
  background: var(--site-primary);
  color: var(--site-on-primary);
  max-width: 1160px;
  margin: 0px auto 0 auto; /* margin‑top：系统标题 ↔ 蓝色块之间的距离，可修改：32/40/56 */
  border-radius:0;
}

.topbar { max-width: 1160px; margin: auto; padding: 18px 28px; display:flex; justify-content:space-between; align-items:center; gap:16px; }
.brand { font-weight:800; letter-spacing:.08em; font-size:13px; }
.top-label { font-size:11px; letter-spacing:.13em; text-transform:uppercase; opacity:.82; }
.hero { max-width:1160px; margin:auto; padding:62px 28px 64px; display:grid; grid-template-columns:1.05fr .95fr; gap:42px; align-items:center; }
.eyebrow { color:#70d6b3; text-transform:uppercase; font-size:11px; font-weight:800; letter-spacing:.16em; }
h1,h2,h3 { font-family:var(--site-font-heading); line-height:1.22; letter-spacing:-.035em; }
h1 { font-size:clamp(34px,4.4vw,54px); margin:13px 0 20px; max-width:650px; }
.hero p { color:#e2edf6; max-width:620px; margin:0 0 13px; }
.hero-image { position:relative; }
.hero-image img { display:block; width:100%; aspect-ratio:1.35; object-fit:cover; border-radius:calc(18px * var(--site-radius-scale)); box-shadow:0 22px 55px #071e333d; }
.hero-chip { position:absolute; bottom:-18px; left:-18px; background:#e5f5ef; color:#145a48; border-radius:12px; padding:12px 16px; box-shadow:0 8px 24px #061d2b25; font-size:12px; font-weight:700; }
.hero-chip span { display:block; font-weight:500; color:#416b61; }
main { max-width:1100px; margin:auto; padding:42px 28px 76px; }
.intro { font-size:16px; line-height:1.8; max-width:850px; color:light-dark(#3e5263,#c3d2df); margin:0 auto 44px; }
.intro strong { color:light-dark(#174b83,#9bc9f1); }
.article-layout { display:grid; grid-template-columns:220px minmax(0,1fr); gap:42px; align-items:start; }
.toc { position:sticky; top:20px; border:1px solid light-dark(#dce6ed,#304354); border-radius:14px; padding:18px; background:light-dark(#fff,#172533); }
.toc-title { font-size:11px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; margin-bottom:12px; color:light-dark(#174b83,#9bc9f1); }
.toc a { display:block; color:inherit; text-decoration:none; font-size:12px; line-height:1.5; padding:7px 0; border-bottom:1px solid light-dark(#edf1f4,#293b4a); }
.toc a:last-child { border:0; }
.toc a:hover { color:#178a72; }
.content { min-width:0; }
.section { scroll-margin-top:24px; padding:0 0 38px; margin:0 0 38px; border-bottom:1px solid light-dark(#dce6ed,#304354); }
.section:last-child { border:0; }
.section-head { display:flex; align-items:flex-start; gap:14px; margin-bottom:18px; }
.num { flex:0 0 36px; height:36px; border-radius:50%; display:grid; place-items:center; color:white; background:#1678b8; font-weight:800; font-size:15px; }
h2 { margin:2px 0 0; font-size:clamp(21px,2.5vw,27px); color:light-dark(#174b83,#a9d2f5); }
h3 { font-size:17px; margin:22px 0 9px; color:light-dark(#174b83,#a9d2f5); }
p { margin:0 0 13px; }
ul,ol { padding-left:21px; margin:8px 0 16px; }
li { padding:2px 0; }
.split { display:grid; grid-template-columns:1.1fr .9fr; gap:24px; align-items:center; }
.photo { width:100%; display:block; border-radius:13px; object-fit:cover; max-height:270px; }
.photo.tall { max-height:310px; }
.note { background:light-dark(#eaf3f8,#1b3041); border-left:3px solid #1c9b7a; border-radius:0 12px 12px 0; padding:16px 18px; margin:18px 0; color:light-dark(#29475d,#d2e2ee); }
.note strong { color:light-dark(#145b51,#8fe0c7); }
.question-list { display:grid; grid-template-columns:1fr 1fr; gap:8px 18px; margin:14px 0 18px; }
.question { display:flex; gap:9px; align-items:flex-start; padding:9px 11px; border-radius:9px; background:light-dark(#f0f5f8,#1a2b39); }
.check { color:#159b79; font-weight:900; }
.material-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:16px 0; }
.material { background:light-dark(#f0f5f8,#1a2b39); border:1px solid light-dark(#e1e9ee,#304354); border-radius:10px; padding:13px; text-align:center; }
.material b { display:block; color:light-dark(#174b83,#a9d2f5); font-size:15px; }
.material span { font-size:11px; color:light-dark(#64798a,#a6b8c7); }
.timeline { list-style:none; padding:0; margin:18px 0; counter-reset:step; }
.timeline li { counter-increment:step; display:flex; align-items:flex-start; gap:12px; margin:0 0 12px; }
.timeline li::before { content:counter(step); flex:0 0 26px; height:26px; display:grid; place-items:center; border-radius:50%; background:light-dark(#dceefa,#284b66); color:light-dark(#174b83,#d5ecff); font-weight:800; font-size:12px; }
.checklist { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.check-card { background:light-dark(#fff,#172533); border:1px solid light-dark(#dce6ed,#304354); border-radius:13px; padding:18px; }
.check-card h3 { margin:0 0 8px; font-size:15px; }
.check-card ul { margin:0; font-size:13px; }
.support { background:linear-gradient(135deg,light-dark(#e9f3f8,#1b3041),light-dark(#f7fbfd,#172533)); border:1px solid light-dark(#dbe8ef,#304354); border-radius:18px; padding:24px; display:grid; grid-template-columns:1fr 190px; gap:24px; align-items:center; }
.support img { width:100%; height:150px; object-fit:cover; border-radius:12px; }
.contact { display:inline-flex; align-items:center; gap:9px; background:#1678b8; color:white; text-decoration:none; padding:11px 16px; border-radius:8px; font-weight:700; margin-top:8px; }
.conclusion { margin-top:34px; padding:24px; background:light-dark(#174b83,#102e4b); color:white; border-radius:16px; }
.conclusion h2 { color:white; }
.footer-muted { opacity:.72; }
@media(max-width:800px) {
  .hero { grid-template-columns:1fr; padding-top:42px; gap:28px; }
  .hero-image { max-width:620px; }
  .article-layout { grid-template-columns:1fr; gap:24px; }
  .toc { position:static; display:grid; grid-template-columns:repeat(2,1fr); gap:0 14px; }
  .toc-title { grid-column:1/-1; }
  .split { grid-template-columns:1fr; }
  .split .photo { max-height:280px; }
  .site-header{margin-left:auto;margin-right:auto;}
}
@media(max-width:540px) {
  .topbar,main { padding-left:18px; padding-right:18px; }
  .hero { padding-left:18px; padding-right:18px; }
  .hero-chip { left:8px; bottom:-14px; }
  .question-list,.checklist,.support { grid-template-columns:1fr; }
  .material-grid { grid-template-columns:repeat(2,1fr); }
  .support img { height:180px; }
  h1 { font-size:35px; }
}