/* ==========================================================================
   城市深度介绍 · 长文阅读样式
   设计取向：杂志式排版，克制配色，大留白，正文优先
   ========================================================================== */

:root {
  /* 以江水青为主色，暖橙作点缀（对应武汉「江城」气质） */
  --river-50:#eef5f6;
  --river-100:#d6e6e9;
  --river-200:#a9cbd1;
  --river-400:#3d8a95;
  --river-500:#2b7680;
  --river-600:#1f5e67;
  --river-700:#184a51;

  --amber-100:#fdf1dc;
  --amber-400:#e39a2c;
  --amber-500:#cf8417;
  --amber-600:#a96a0e;

  --ink-900:#141b1d;
  --ink-800:#222e30;
  --ink-700:#3a4749;
  --ink-600:#546264;
  --ink-500:#6d7a7c;
  --ink-400:#94a0a2;
  --ink-300:#c0cacc;
  --ink-200:#dde4e5;
  --ink-100:#eef2f3;
  --ink-50:#f7f9fa;
  --white:#fff;

  --font-serif:"Songti SC","STSong","Source Han Serif SC","Noto Serif CJK SC",
              Georgia,"Times New Roman",serif;
  --font-sans:"PingFang SC","Microsoft YaHei","Hiragino Sans GB",
             -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  /* 中文正文排版：行高给足，字距略放 */
  /* 长文阅读需要更宽的行宽与更慢的节奏 */
  --lh-body:2.05;
  --fs-b1:1.0625rem;   /* 正文 */
  --fs-lead:1.25rem;  /* 导语 */

  --max-w:820px;        /* 正文栏宽，中文长文最佳阅读宽度 */
  --sp-1:.25rem;--sp-2:.5rem;--sp-3:.75rem;--sp-4:1rem;
  --sp-5:1.5rem;--sp-6:2rem;--sp-7:3rem;--sp-8:4rem;--sp-9:6rem;
  --r-sm:4px;--r-md:8px;--r-lg:14px;--r-full:999px;
  --shadow-sm:0 1px 2px rgba(20,27,29,.05);
  --shadow-md:0 4px 14px rgba(20,27,29,.08);
  --shadow-lg:0 16px 48px rgba(20,27,29,.14);
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;}
}
body{
  margin:0;background:var(--white);color:var(--ink-800);
  font-family:var(--font-sans);font-size:var(--fs-b1);line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{margin:0;font-weight:700;color:var(--ink-900);letter-spacing:-.015em;line-height:1.35;}
p{margin:0;}
ul,ol{margin:0;padding:0;list-style:none;}
a{color:var(--river-600);text-decoration:none;}
a:hover{text-decoration:underline;}
img{max-width:100%;height:auto;display:block;}

:focus-visible{outline:3px solid var(--river-500);outline-offset:3px;border-radius:2px;}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ===================== 顶部进度与导航 ===================== */
.progress-bar{
  position:fixed;top:0;left:0;right:0;height:3px;z-index:200;
  background:transparent;pointer-events:none;
}
.progress-bar i{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--river-500),var(--amber-400));
  transition:width .1s linear;
}
.top-nav{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--ink-200);
}
.top-nav .inner{
  max-width:1100px;margin:0 auto;padding:0 var(--sp-5);
  display:flex;align-items:center;gap:var(--sp-5);height:58px;
}
.nav-back{
  display:inline-flex;align-items:center;gap:6px;flex-shrink:0;
  font-size:.875rem;font-weight:600;color:var(--ink-600);
  padding:6px 12px;border-radius:var(--r-full);transition:all .15s;
}
.nav-back:hover{background:var(--river-50);color:var(--river-600);text-decoration:none;}
.nav-title{font-weight:700;font-size:.95rem;color:var(--ink-900);}
.nav-sections{display:flex;gap:2px;margin-left:auto;overflow-x:auto;scrollbar-width:none;}
.nav-sections::-webkit-scrollbar{display:none;}
.nav-sections a{
  padding:6px 11px;border-radius:var(--r-sm);white-space:nowrap;
  font-size:.8125rem;font-weight:500;color:var(--ink-500);transition:all .15s;
}
.nav-sections a:hover{background:var(--ink-100);color:var(--ink-900);text-decoration:none;}
.nav-sections a.is-active{background:var(--river-50);color:var(--river-700);font-weight:600;}

/* ===================== 封面 ===================== */
.hero{
  position:relative;overflow:hidden;
  padding:var(--sp-9) 0 var(--sp-8);
  background:
    radial-gradient(900px 420px at 15% -10%,var(--river-50),transparent 62%),
    radial-gradient(700px 340px at 88% 6%,var(--amber-100),transparent 60%),
    linear-gradient(180deg,#fbfdfd,var(--white));
  border-bottom:1px solid var(--ink-200);
}
/* 封面主视觉：城市全景置于内容后方，压低饱和度保证文字可读 */
.hero-visual{
  position:absolute;inset:0;z-index:0;overflow:hidden;
}
.hero-visual img{
  width:100%;height:100%;object-fit:cover;object-position:center 42%;
  opacity:.28;filter:saturate(.82);
}
.hero-visual::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,
    rgba(255,255,255,.96) 0%,
    rgba(255,255,255,.88) 38%,
    rgba(255,255,255,.55) 68%,
    rgba(255,255,255,.3) 100%);
}
.hero-inner{position:relative;z-index:1;}
.hero-inner{max-width:var(--max-w);margin:0 auto;padding:0 var(--sp-5);}
.hero-kicker{
  display:inline-flex;align-items:center;gap:var(--sp-2);
  font-size:.75rem;font-weight:600;letter-spacing:.16em;
  color:var(--river-600);text-transform:uppercase;margin-bottom:var(--sp-4);
}
.hero-kicker::before{content:"";width:24px;height:2px;background:var(--river-400);}
.hero h1{
  font-size:clamp(2.75rem,7vw,4.5rem);font-weight:800;
  letter-spacing:-.03em;line-height:1.08;margin-bottom:var(--sp-4);
}
.hero h1 small{
  display:block;font-size:clamp(.875rem,2vw,1rem);
  font-weight:500;color:var(--ink-400);letter-spacing:.24em;
  margin-bottom:var(--sp-3);text-transform:uppercase;
}
.hero-tagline{
  font-family:var(--font-serif);
  font-size:clamp(1.25rem,2.6vw,1.625rem);line-height:1.7;
  color:var(--ink-700);margin-bottom:var(--sp-5);
}
.hero-meta{
  display:flex;flex-wrap:wrap;gap:var(--sp-3) var(--sp-5);
  padding-top:var(--sp-5);border-top:1px solid var(--ink-200);
  font-size:.8125rem;color:var(--ink-500);
}
.hero-meta b{color:var(--ink-800);font-weight:600;}

/* 首屏数据条 */
.hero-facts{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:var(--sp-4);margin-top:var(--sp-6);
}
.fact{
  padding:var(--sp-4);background:var(--white);
  border:1px solid var(--ink-200);border-radius:var(--r-md);
  box-shadow:var(--shadow-sm);
}
.fact-num{
  display:block;font-size:1.75rem;font-weight:800;
  color:var(--river-600);line-height:1.1;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}
.fact-num small{font-size:.875rem;font-weight:700;color:var(--river-400);}
.fact-label{display:block;margin-top:2px;font-size:.8125rem;color:var(--ink-500);}

/* ===================== 正文骨架 ===================== */
.article{max-width:var(--max-w);margin:0 auto;padding:0 var(--sp-5) var(--sp-9);}
.section{padding-top:var(--sp-8);scroll-margin-top:76px;}
.section + .section{border-top:1px solid var(--ink-100);margin-top:var(--sp-7);}
.sec-head{margin-bottom:var(--sp-5);}
.sec-num{
  display:block;font-size:.75rem;font-weight:700;letter-spacing:.2em;
  color:var(--amber-500);margin-bottom:var(--sp-2);
}
.sec-title{
  font-size:clamp(1.625rem,3.4vw,2.125rem);font-weight:800;
  letter-spacing:-.02em;margin-bottom:var(--sp-3);
}
.sec-title em{font-style:normal;color:var(--river-600);}
.sec-intro{
  font-family:var(--font-serif);font-size:var(--fs-lead);
  line-height:1.85;color:var(--ink-600);
}

/* 正文排版 */
.prose p{margin-bottom:1.4em;}
.prose p:last-child{margin-bottom:0;}
/* 首段下沉首字，杂志感 */
.prose .dropcap::first-letter{
  float:left;font-family:var(--font-serif);font-size:3.4em;
  line-height:.92;font-weight:700;color:var(--river-600);
  margin:.06em .12em 0 0;
}
.prose strong{color:var(--ink-900);font-weight:700;}
.prose em{
  font-style:normal;background:linear-gradient(180deg,transparent 66%,var(--amber-100) 66%);
  padding:0 .1em;
}
/* 段落间的提要句 */
.prose .pull{
  margin:var(--sp-5) 0;padding:var(--sp-4) 0 var(--sp-4) var(--sp-5);
  border-left:3px solid var(--river-400);
  font-family:var(--font-serif);font-size:var(--fs-lead);
  line-height:1.8;color:var(--ink-700);
}

/* ===================== 数据卡与图表 ===================== */
.stat-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:var(--sp-3);margin:var(--sp-5) 0;
}
.stat{
  padding:var(--sp-4);background:var(--ink-50);
  border:1px solid var(--ink-200);border-radius:var(--r-md);
}
.stat-label{font-size:.75rem;color:var(--ink-500);margin-bottom:4px;}
.stat-value{
  font-size:1.5rem;font-weight:800;color:var(--ink-900);
  letter-spacing:-.02em;line-height:1.15;font-variant-numeric:tabular-nums;
}
.stat-value small{font-size:.8125rem;font-weight:600;color:var(--ink-500);margin-left:2px;}
.stat-note{font-size:.75rem;color:var(--ink-400);margin-top:4px;line-height:1.5;}

/* 横向条形图 */
.bar-chart{margin:var(--sp-5) 0;}
.bar-title{font-size:.875rem;font-weight:600;color:var(--ink-700);margin-bottom:var(--sp-3);}
.bar-row{display:grid;grid-template-columns:88px 1fr auto;gap:var(--sp-3);align-items:center;margin-bottom:10px;}
.bar-name{font-size:.8125rem;color:var(--ink-600);}
/* track 与 fill 用的是 <span>，属内联元素，必须转 block 后width/height 才生效 */
.bar-track{
  display:block;height:9px;background:var(--ink-100);
  border-radius:var(--r-full);overflow:hidden;
}
.bar-fill{
  display:block;height:100%;border-radius:var(--r-full);
  background:linear-gradient(90deg,var(--river-400),var(--river-600));
  width:0;transition:width .9s cubic-bezier(.4,0,.2,1);
}
.bar-val{
  font-size:.8125rem;font-weight:700;color:var(--ink-800);
  font-variant-numeric:tabular-nums;min-width:64px;text-align:right;
}
.bar-chart.is-amber .bar-fill{background:linear-gradient(90deg,var(--amber-400),var(--amber-600));}

/* 构成条（三次产业等占比） */
.stack-bar{
  display:flex;height:34px;margin:var(--sp-4) 0 var(--sp-3);
  border-radius:var(--r-md);overflow:hidden;
}
.stack-seg{display:flex;align-items:center;justify-content:center;
  font-size:.75rem;font-weight:700;color:var(--white);min-width:0;}
.stack-legend{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-4);font-size:.8125rem;color:var(--ink-600);}
.stack-legend li{display:flex;align-items:center;gap:6px;}
.dot{width:9px;height:9px;border-radius:2px;flex-shrink:0;}
/* legend 里的色块若被换成 span，需显式 block 才有尺寸 */
.stack-legend .dot{display:block;}

/* ===================== 列表卡片 ===================== */
.card-list{display:grid;gap:var(--sp-3);margin:var(--sp-5) 0;}
.info-card{
  padding:var(--sp-4) var(--sp-5);
  background:var(--white);border:1px solid var(--ink-200);
  border-left:3px solid var(--river-500);border-radius:var(--r-md);
  transition:box-shadow .18s,border-color .18s,transform .18s;
}
.info-card:hover{box-shadow:var(--shadow-md);transform:translateX(2px);}
.info-card.accent{border-left-color:var(--amber-400);}
.info-card-head{
  display:flex;align-items:baseline;gap:var(--sp-3);
  flex-wrap:wrap;margin-bottom:6px;
}
.info-card h4{font-size:1.0625rem;font-weight:700;}
.pill{
  padding:2px 10px;border-radius:var(--r-full);
  font-size:.6875rem;font-weight:700;letter-spacing:.02em;
}
.pill-river{background:var(--river-50);color:var(--river-600);}
.pill-amber{background:var(--amber-100);color:var(--amber-600);}
.pill-cost{background:var(--ink-100);color:var(--ink-600);}
.info-card p{font-size:.9375rem;color:var(--ink-600);line-height:1.8;}
.info-card p + p{margin-top:8px;}

/* 景点卡（网格） */
.spot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--sp-4);margin:var(--sp-5) 0;}
.spot{
  display:flex;flex-direction:column;
  background:var(--white);border:1px solid var(--ink-200);
  border-radius:var(--r-md);overflow:hidden;
  transition:box-shadow .18s,transform .18s,border-color .18s;
}
.spot:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);border-color:var(--river-200);}
.spot-emoji{
  height:88px;display:grid;place-items:center;font-size:2.25rem;
  background:linear-gradient(150deg,var(--river-50),var(--amber-100));
  border-bottom:1px solid var(--ink-200);
}
.spot-body{padding:var(--sp-4);flex:1;display:flex;flex-direction:column;}
.spot-head{display:flex;align-items:baseline;gap:var(--sp-2);flex-wrap:wrap;margin-bottom:6px;}
.spot-head h4{font-size:1rem;font-weight:700;}
.spot-cost{
  margin-left:auto;font-size:.75rem;font-weight:700;
  color:var(--amber-600);white-space:nowrap;
}
.spot-desc{font-size:.875rem;color:var(--ink-600);line-height:1.75;flex:1;}
.spot-tip{
  margin-top:var(--sp-3);padding-top:var(--sp-3);border-top:1px dashed var(--ink-200);
  font-size:.8125rem;color:var(--ink-500);line-height:1.7;
}

/* ===================== 图片 ===================== */
/* 正文插图：左右出血到栏宽外，形成杂志感 */
.photo{
  margin:var(--sp-5) calc(var(--sp-5) * -1) var(--sp-6);
}
.photo img{
  width:100%;height:auto;display:block;
  border-radius:var(--r-md);
  background:var(--ink-100);
  /* 竖版原图（如部分景点照）在正文栏里会过高，统一裁到合理比例 */
  max-height:520px;object-fit:cover;
}
.photo figcaption{
  margin-top:var(--sp-3);padding:0 var(--sp-5);
  font-size:.8125rem;color:var(--ink-500);line-height:1.7;
}
.photo figcaption b{color:var(--ink-700);font-weight:600;}

/* 大图（首屏或章节头图），限制高度避免喧宾夺主 */
.photo-lg{margin-top:var(--sp-6);}
.photo-lg img{max-height:400px;object-fit:cover;}

/* 竖构图原图：宽栏里会显得过窄，限制最大宽度并居中 */
.photo.is-portrait{max-width:520px;margin-left:auto;margin-right:auto;}
.photo.is-portrait img{max-height:none;}

/* 双图并排 */
.photo-pair{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);
  margin:var(--sp-5) 0;
}
.photo-pair figure{margin:0;}
.photo-pair img{
  width:100%;height:210px;object-fit:cover;display:block;
  border-radius:var(--r-md);background:var(--ink-100);
}
.photo-pair figcaption{
  margin-top:6px;font-size:.75rem;color:var(--ink-500);line-height:1.55;
}

/* 景点卡里的缩略图 */
.spot-thumb{
  height:132px;margin:0;overflow:hidden;
  border-bottom:1px solid var(--ink-200);
}
.spot-thumb img{
  width:100%;height:100%;object-fit:cover;display:block;
  background:var(--ink-100);transition:transform .3s;
}
/* 竖构图原图（如李子坝穿楼 1000×1500）在 132px 缩略图里
   object-fit:cover 会只截到中间一条，改用 contain 并加深色底衬 */
.spot-thumb img[style*="contain"],
.spot-thumb.is-portrait img{
  object-fit:contain;
  background:#e9eeef;
}
.spot:hover .spot-thumb img{transform:scale(1.03);}

/* 图片懒加载时的占位微调 */
img[loading="lazy"]{color:transparent;}

/* ===================== 文学叙事组件 ===================== */
/* 开篇引子：一段沉浸式场景，带行首竖线 */
.opening{
  position:relative;
  margin:0 0 var(--sp-6);
  padding:var(--sp-5) var(--sp-5) var(--sp-5) var(--sp-6);
  background:linear-gradient(135deg,var(--river-50),rgba(253,241,220,.35));
  border-left:3px solid var(--river-500);
  border-radius:0 var(--r-md) var(--r-md) 0;
  font-family:var(--font-serif);
  font-size:1.125rem;line-height:1.95;color:var(--ink-700);
}
.opening p + p{margin-top:1em;}

/* 场景特写：让人"看见"某个时刻 */
.scene{
  margin:var(--sp-5) 0;
  padding:var(--sp-5);
  background:var(--ink-50);
  border:1px solid var(--ink-200);
  border-radius:var(--r-md);
}
.scene-label{
  display:inline-block;margin-bottom:var(--sp-3);
  padding:2px 10px;background:var(--ink-800);color:var(--ink-50);
  border-radius:var(--r-sm);font-size:var(--fs-xs);font-weight:700;
  letter-spacing:.08em;
}
.scene p{
  font-family:var(--font-serif);
  font-size:1.0625rem;line-height:1.95;color:var(--ink-700);
}
.scene p + p{margin-top:1em;}

/* 人物：城市里的具体一个人 */
.figure{
  display:grid;grid-template-columns:auto 1fr;gap:var(--sp-4);
  margin:var(--sp-5) 0;padding:var(--sp-5);
  background:var(--white);border:1px solid var(--ink-200);
  border-radius:var(--r-md);
}
.figure-mark{
  width:40px;height:40px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--amber-400),var(--accent-600));
  color:var(--white);border-radius:50%;
  font-family:var(--font-serif);font-size:1.15rem;font-weight:700;flex-shrink:0;
}
.figure-body p{
  font-family:var(--font-serif);font-size:1.0625rem;
  line-height:1.9;color:var(--ink-700);
}
.figure-body cite{
  display:block;margin-top:var(--sp-2);
  font-style:normal;font-size:var(--fs-xs);color:var(--ink-400);
}

/* 历史叙事块：一个大事件讲透 */
.era{
  margin:var(--sp-6) 0;
  padding:var(--sp-5) 0;
  border-bottom:1px solid var(--ink-100);
}
.era:last-child{border-bottom:0;padding-bottom:0;}
.era-head{
  display:flex;align-items:baseline;gap:var(--sp-3);
  flex-wrap:wrap;margin-bottom:var(--sp-4);
}
.era-when{
  flex-shrink:0;padding:3px 12px;
  background:var(--ink-900);color:var(--ink-50);
  border-radius:var(--r-sm);
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.06em;
}
.era-title{
  font-size:var(--fs-md);font-weight:700;letter-spacing:-.01em;
}
.era p{
  font-family:var(--font-serif);
  font-size:1.0625rem;line-height:1.95;color:var(--ink-700);
}
.era p + p{margin-top:1em;}

/* 关键影响：这件事至今留下的痕迹 */
.legacy{
  margin-top:var(--sp-4);padding:var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-5);
  background:linear-gradient(90deg,var(--amber-100),transparent 70%);
  border-left:3px solid var(--amber-500);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  font-size:.9375rem;line-height:1.85;color:#7a5514;
}
.legacy b{color:#5c3f0e;}

/* 街巷条目：城市肌理用 */
.street{
  margin:var(--sp-4) 0;padding:var(--sp-5);
  background:var(--white);border:1px solid var(--ink-200);
  border-radius:var(--r-md);
}
.street-head{
  display:flex;align-items:baseline;gap:var(--sp-3);
  flex-wrap:wrap;margin-bottom:var(--sp-3);
}
.street-head h4{font-size:var(--fs-md);font-weight:700;}
.street-tag{
  padding:2px 10px;background:var(--river-50);color:var(--river-600);
  border-radius:var(--r-full);font-size:var(--fs-xs);font-weight:600;
}
.street p{
  font-family:var(--font-serif);font-size:1.0625rem;
  line-height:1.9;color:var(--ink-700);
}
.street p + p{margin-top:1em;}

/* 数据夹叙——在叙事中嵌入数字，避免打断阅读 */
.inline-data{
  display:inline-flex;align-items:baseline;gap:.35em;
  padding:0 .5em;background:var(--river-50);
  border-radius:var(--r-sm);
  font-family:var(--font-sans);
  font-size:.9em;font-weight:700;color:var(--river-700);
  white-space:nowrap;
}

/* 感官描写强调 */
.sensory{
  font-family:var(--font-serif);
  color:var(--ink-800);
}

/* 章节内的三级标题 */
.sub-head{
  margin:var(--sp-6) 0 var(--sp-3);
  font-family:var(--font-serif);
  font-size:var(--fs-md);font-weight:700;color:var(--ink-900);
}
.sub-head::before{
  content:"";display:inline-block;width:20px;height:1px;
  margin-right:.6em;vertical-align:middle;background:var(--river-400);
}

/* 阅读进度提示 */
.reading-note{
  margin:var(--sp-5) 0;padding:var(--sp-3) var(--sp-4);
  background:var(--ink-50);border-radius:var(--r-sm);
  font-size:var(--fs-sm);color:var(--ink-500);text-align:center;
}

/* ===================== 引文 / 名言 ===================== */
.quote{
  margin:var(--sp-6) 0;padding:var(--sp-5) var(--sp-6);
  background:linear-gradient(150deg,var(--river-50),var(--ink-50));
  border-radius:var(--r-lg);text-align:center;
}
.quote p{
  font-family:var(--font-serif);font-size:1.1875rem;line-height:1.9;
  color:var(--ink-700);margin-bottom:var(--sp-2);
}
.quote cite{font-style:normal;font-size:.8125rem;color:var(--ink-500);}

/* ===================== 时间轴 ===================== */
.timeline{margin:var(--sp-5) 0;padding-left:var(--sp-5);border-left:2px solid var(--river-100);}
.tl-item{position:relative;padding-bottom:var(--sp-5);}
.tl-item:last-child{padding-bottom:0;}
.tl-item::before{
  content:"";position:absolute;left:calc(-1 * var(--sp-5) - 5px);top:9px;
  width:8px;height:8px;border-radius:50%;
  background:var(--river-500);box-shadow:0 0 0 3px var(--river-50);
}
.tl-year{font-size:.8125rem;font-weight:800;color:var(--river-600);letter-spacing:.04em;}
.tl-text{font-size:.9375rem;color:var(--ink-600);line-height:1.8;margin-top:2px;}

/* ===================== 提示框 ===================== */
.note{
  display:flex;gap:var(--sp-3);align-items:flex-start;
  margin:var(--sp-5) 0;padding:var(--sp-4) var(--sp-5);
  background:var(--amber-100);border:1px solid #f2dfb9;
  border-radius:var(--r-md);font-size:.9375rem;color:#7a5514;line-height:1.8;
}
.note-cool{background:var(--river-50);border-color:var(--river-100);color:var(--river-700);}
.note .ico{flex-shrink:0;font-size:1.05rem;line-height:1.7;}
.note b{color:inherit;font-weight:700;}

/* 关键提示高亮 */
.keypoint{
  margin:var(--sp-6) 0;padding:var(--sp-5);
  background:var(--white);border:1px solid var(--ink-200);
  border-top:3px solid var(--river-500);border-radius:var(--r-md);
  box-shadow:var(--shadow-sm);
}
.keypoint h4{font-size:1rem;margin-bottom:var(--sp-3);}
.keypoint ul{display:grid;gap:var(--sp-2);}
.keypoint li{
  display:flex;gap:var(--sp-3);align-items:flex-start;
  font-size:.9375rem;color:var(--ink-700);line-height:1.75;
}
.keypoint li::before{
  content:"▍";color:var(--river-400);font-size:.75rem;
  line-height:1.9;flex-shrink:0;
}

/* ===================== 页脚 ===================== */
.site-footer{
  margin-top:var(--sp-8);padding:var(--sp-7) 0;
  background:var(--ink-50);border-top:1px solid var(--ink-200);
}
.footer-inner{max-width:760px;margin:0 auto;padding:0 var(--sp-5);}
.footer-inner h4{font-size:.875rem;margin-bottom:var(--sp-3);}
.footer-inner p,.footer-inner li{font-size:.8125rem;color:var(--ink-500);line-height:1.9;}
.source-list{display:grid;gap:6px;margin:var(--sp-5) 0;}
.source-list li{display:flex;gap:var(--sp-2);align-items:baseline;}
.source-list li::before{content:"·";color:var(--river-400);font-weight:700;}
.disclaimer{
  margin-top:var(--sp-5);padding:var(--sp-4);
  background:var(--white);border:1px solid var(--ink-200);border-radius:var(--r-md);
  font-size:.75rem;color:var(--ink-500);line-height:1.8;
}

/* 返回顶部 */
.to-top{
  position:fixed;right:24px;bottom:24px;z-index:150;
  width:44px;height:44px;display:grid;place-items:center;
  background:var(--white);border:1px solid var(--ink-300);
  border-radius:50%;box-shadow:var(--shadow-md);
  color:var(--ink-600);cursor:pointer;font-size:1rem;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:all .2s;
}
.to-top.is-show{opacity:1;visibility:visible;transform:translateY(0);}
.to-top:hover{border-color:var(--river-500);color:var(--river-600);}

/* ===================== 响应式 ===================== */
@media (max-width:820px){
  .nav-sections{display:none;}
  .bar-row{grid-template-columns:72px 1fr auto;gap:var(--sp-2);}
}
@media (max-width:640px){
  :root{--lh-body:1.85;}
  .hero{padding:var(--sp-7) 0 var(--sp-6);}
  .hero h1{font-size:2.25rem;}
  .hero-meta{gap:var(--sp-2) var(--sp-4);}
  .hero-facts{grid-template-columns:repeat(2,1fr);gap:var(--sp-3);}
  .fact-num{font-size:1.375rem;}
  .section{padding-top:var(--sp-6);}
  .section + .section{margin-top:var(--sp-6);}
  .article{padding-bottom:var(--sp-8);}
  .quote{padding:var(--sp-4);margin:var(--sp-5) 0;}
  .to-top{right:16px;bottom:16px;}
}
@media print{
  .top-nav,.progress-bar,.to-top{display:none !important;}
  body{font-size:11pt;}
  .section{page-break-inside:avoid;}
  .hero{padding-top:0;}
}