/* ===== 基础变量与排版：书法标题、黑体节点、无衬线正文 ===== */
:root{--ink:#172522;--muted:#6e7775;--jade:#476c68;--red:#783d3a;--paper:#edf1ee;--nav-h:76px;--content:1260px}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:var(--nav-h)}body{margin:0;color:var(--ink);font-family:"Microsoft YaHei","PingFang SC",sans-serif;background:#edf1ee;line-height:1.75;overflow-x:hidden}button,a{font:inherit}a{color:inherit}.site-header{position:fixed;inset:0 0 auto 0;height:var(--nav-h);z-index:100;display:grid;grid-template-columns:340px 1fr 260px;align-items:center;padding:0 42px;color:#f5f5ef;background:rgba(19,34,31,.68);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.12);transition:background .3s}.site-header.scrolled{background:rgba(14,29,27,.94)}.brand{text-decoration:none;font:700 25px/1 "STKaiti","KaiTi",serif;letter-spacing:.08em}.main-nav{display:flex;justify-content:center;gap:28px}.main-nav a,.nav-actions a{text-decoration:none;font-size:14px;letter-spacing:.08em}.nav-link{position:relative;padding:27px 0}.nav-link::after{content:"";position:absolute;left:50%;bottom:15px;width:0;height:2px;background:#d6c28d;transition:.25s}.nav-link.active::after,.nav-link:hover::after{left:0;width:100%}.nav-actions{display:flex;justify-content:flex-end;gap:12px}.nav-actions button,.nav-actions a{border:1px solid rgba(255,255,255,.35);padding:8px 14px;background:transparent;color:#fff;border-radius:4px;cursor:pointer}.hero{min-height:810px;display:grid;place-items:center;text-align:center;color:#fff;background:linear-gradient(rgba(8,25,24,.36),rgba(8,25,24,.7)),url("../images/ganjiang.jpg") center/cover}.hero-inner{padding-top:40px}.hero-seal{letter-spacing:.4em}.hero h1,.era-heading h2,.scenic-dock h2,.downloads h2,.sources h2{font-family:"STKaiti","KaiTi",serif}.hero h1{margin:.15em 0;font-size:76px;letter-spacing:.12em}.hero-link{display:inline-block;margin-top:32px;padding:10px 26px;border:1px solid rgba(255,255,255,.7);text-decoration:none}.river{position:absolute;top:780px;left:50%;transform:translateX(-50%);width:220px;height:calc(100% - 780px);z-index:1;pointer-events:none;opacity:.58}.river svg{width:100%;height:100%}.river-bank{fill:none;stroke:#c8dbd7;stroke-width:62;stroke-linecap:round}.river-flow{fill:none;stroke:#87aaa8;stroke-width:3;stroke-dasharray:10 18;animation:riverFlow 18s linear infinite}.flow-b{animation-duration:25s;opacity:.6}@keyframes riverFlow{to{stroke-dashoffset:-224}}
.era{position:relative;padding:120px max(8vw,120px) 150px;z-index:2}.era-gu{background:linear-gradient(90deg,rgba(224,231,228,.96),rgba(241,244,242,.9))}.era-red{color:#eadfda;background:linear-gradient(120deg,rgba(68,39,38,.97),rgba(102,51,47,.95))}.era-old{background:rgba(244,245,243,.96)}.era-now{background:linear-gradient(135deg,rgba(224,237,244,.97),rgba(241,247,249,.96))}.era-heading{text-align:center;margin:0 auto 100px;position:relative;z-index:3}.era-heading>span{font:100 72px/1 Georgia,serif;opacity:.16}.era-heading p{margin:-24px 0 0;letter-spacing:.32em;font-size:13px}.era-heading h2{margin:.15em 0;font-size:62px;letter-spacing:.18em}.era-heading small{color:var(--muted)}.era-red .era-heading small{color:#cbb7b1}.timeline{max-width:var(--content);margin:auto;display:flex;flex-direction:column;gap:86px}.timeline-node{width:47%;position:relative;display:grid;grid-template-columns:1.08fr .92fr;min-height:300px;background:rgba(255,255,255,.82);box-shadow:0 18px 50px rgba(23,37,34,.12);border-radius:5px;overflow:visible;transition:transform .3s,box-shadow .3s}.timeline-node.left{align-self:flex-start}.timeline-node.right{align-self:flex-end}.timeline-node::before{content:"";position:absolute;top:45px;width:28px;height:28px;border:7px solid rgba(255,255,255,.9);background:var(--jade);border-radius:50%;box-shadow:0 0 0 1px #8ca29e}.timeline-node.left::before{right:-48px}.timeline-node.right::before{left:-48px}.era-red .timeline-node{background:rgba(246,239,234,.93);color:#392827}.era-red .timeline-node::before{background:#8d413d}.timeline-node:hover,.timeline-node:focus-within{transform:translateY(-7px);box-shadow:0 25px 60px rgba(23,37,34,.2)}.timeline-node::after{content:attr(data-note);position:absolute;z-index:8;left:7%;right:7%;bottom:-48px;padding:9px 14px;border-radius:8px;background:rgba(24,32,31,.9);color:#cfd5d3;font-size:12px;letter-spacing:.03em;opacity:0;transform:translateY(-8px);pointer-events:none;transition:.22s}.timeline-node:hover::after,.timeline-node:focus-within::after{opacity:1;transform:none}.timeline-node figure{margin:0;position:relative;min-height:100%;overflow:hidden;border-radius:5px 0 0 5px}.timeline-node figure img,.photo-pair img{display:block;width:100%;height:100%;object-fit:cover;cursor:zoom-in;transition:transform .45s}.timeline-node figure:hover img,.photo-pair img:hover{transform:scale(1.035)}figcaption{position:absolute;left:10px;bottom:8px;color:#fff;font-size:11px;text-shadow:0 1px 4px #000}.node-copy{padding:30px 25px}.node-copy time{color:#8b5b43;font:700 12px/1.3 Georgia,serif;letter-spacing:.12em}.node-copy h3{font-size:23px;line-height:1.35;margin:12px 0;font-weight:800}.node-copy p{font-size:14px;line-height:1.85;margin:0}.node-copy small{display:block;margin-top:14px;color:#909694;font-size:11px}.photo-pair{display:grid;grid-template-columns:1fr 1fr;min-height:300px;overflow:hidden}.photo-pair.three{grid-template-columns:repeat(3,1fr)}.vintage img{filter:grayscale(.8) sepia(.2)}.scenic-anchor{position:relative;display:block;height:0;top:calc(-1 * var(--nav-h))}
.scenic-dock{position:fixed;right:34px;top:110px;z-index:50;width:265px;padding:21px;background:rgba(246,247,243,.93);backdrop-filter:blur(13px);box-shadow:0 12px 45px rgba(19,35,33,.18);border:1px solid rgba(71,108,104,.2)}.scenic-dock>p:first-child{margin:0;color:#8b5b43;font-size:11px;letter-spacing:.3em}.scenic-dock h2{font-size:28px;margin:0}.scenic-dock>p{font-size:12px;color:#68706e}.scenic-dock button{display:block;width:100%;text-align:left;border:0;border-top:1px solid #d9dfdc;padding:12px 0;background:transparent;cursor:pointer}.scenic-dock b,.scenic-dock span,.scenic-dock em{display:block}.scenic-dock span{font-size:11px;color:#747b79;line-height:1.6;margin:3px 0}.scenic-dock em{font-size:10px;color:#8b5b43;font-style:normal}.scroll-progress{position:fixed;right:10px;top:110px;bottom:55px;width:3px;z-index:80;background:rgba(36,56,53,.12)}.scroll-progress span{display:block;width:100%;height:0;background:#9e634d}.downloads,.sources{position:relative;z-index:3;text-align:center;padding:100px 20%;background:#18302c;color:#edf2ef}.downloads h2{font-size:50px;margin:.2em}.download-list{display:flex;justify-content:center;gap:24px;margin:35px}.download-list a{padding:15px 28px;border:1px solid #8aa19d;text-decoration:none}.fixed-download-copy{font-size:13px;color:#b7c5c2}.sources{padding-top:55px;background:#102420}.sources p{font-size:12px;margin:4px;color:#aebbb8}.sources h2{font-size:34px}.sources>a{display:inline-block;margin-top:24px}footer{position:relative;z-index:3;padding:24px;text-align:center;background:#0a1917;color:#9aaba7;font-size:12px}
.lightbox[hidden]{display:none}.lightbox{position:fixed;inset:0;z-index:200;display:grid;grid-template-columns:80px minmax(0,1fr) 80px;align-items:center;background:rgba(4,11,10,.94);padding:40px}.lightbox figure{margin:auto;max-width:1280px;text-align:center}.lightbox img{max-width:100%;max-height:82vh;object-fit:contain}.lightbox figcaption{position:static;margin-top:10px}.lightbox button{border:0;background:transparent;color:white;font-size:60px;cursor:pointer}.lightbox-close{position:absolute;right:28px;top:12px;font-size:42px!important}
@media(max-width:1500px){.site-header{grid-template-columns:280px 1fr 230px;padding:0 25px}.main-nav{gap:16px}.scenic-dock{width:225px;right:20px}.era{padding-left:65px;padding-right:270px}.timeline-node{width:48.5%;grid-template-columns:1fr}.timeline-node figure,.photo-pair{height:210px}.river{left:calc(50% - 100px)}}@media(max-width:1100px){.site-header{grid-template-columns:220px 1fr 150px}.brand{font-size:19px}.main-nav{gap:10px}.main-nav a{font-size:12px}.nav-actions button{display:none}.era{padding-left:35px;padding-right:215px}.scenic-dock{width:190px;right:12px;padding:14px}.timeline-node{width:47%}.node-copy{padding:20px}.node-copy h3{font-size:19px}.hero h1{font-size:58px}}@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.river-flow{animation:none!important}.timeline-node,.timeline-node img{transition:none!important}}

/* ===== 手机端：重排而非压缩桌面布局，避免侧栏侵占时间轴 ===== */
@media(max-width:767px){
  :root{--nav-h:112px}
  body{font-size:14px}
  .site-header{height:var(--nav-h);display:grid;grid-template-columns:1fr auto;grid-template-rows:58px 54px;padding:0 16px}
  .brand{font-size:18px;white-space:nowrap}
  .nav-actions{grid-column:2;grid-row:1}
  .nav-actions a{padding:6px 9px;font-size:11px}
  .main-nav{grid-column:1/-1;grid-row:2;justify-content:flex-start;gap:22px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
  .main-nav::-webkit-scrollbar{display:none}
  .main-nav a{flex:0 0 auto;padding:15px 0;font-size:12px;white-space:nowrap}
  .nav-link::after{bottom:8px}
  .hero{min-height:700px;padding:var(--nav-h) 20px 35px;background-position:center}
  .hero-inner{padding-top:0}
  .hero-seal{font-size:11px;letter-spacing:.22em}
  .hero h1{font-size:43px;line-height:1.35;letter-spacing:.08em}
  .hero-inner>p:not(.hero-seal){font-size:13px}
  .hero-link{margin-top:22px}
  .river{top:690px;left:34px;transform:none;width:58px;opacity:.42}
  .river-bank{stroke-width:38}
  .era{padding:82px 20px 100px 72px}
  .era-heading{text-align:left;margin-bottom:58px}
  .era-heading>span{font-size:54px}
  .era-heading h2{font-size:42px;letter-spacing:.12em}
  .timeline{gap:62px}
  .timeline-node{width:100%;min-height:0;grid-template-columns:1fr;border-radius:4px}
  .timeline-node.left,.timeline-node.right{align-self:stretch}
  .timeline-node figure,.photo-pair{height:210px;min-height:210px;border-radius:4px 4px 0 0}
  .photo-pair.three{grid-template-columns:repeat(3,1fr)}
  .timeline-node.left::before,.timeline-node.right::before{left:-56px;right:auto;top:35px;width:22px;height:22px;border-width:5px}
  .timeline-node::after{position:static;display:block;opacity:1;transform:none;border-radius:0 0 4px 4px;font-size:11px}
  .node-copy{padding:22px 20px}
  .node-copy h3{font-size:21px}
  .node-copy p{font-size:13px}
  .scenic-anchor{top:calc(-1 * var(--nav-h))}
  .scenic-dock{position:relative;inset:auto;width:auto;margin:0;padding:32px 24px;background:#f3f5f2;box-shadow:none;border:0;border-top:1px solid #cfd8d4;z-index:3}
  .scenic-dock h2{font-size:36px}
  .scenic-dock>p,.scenic-dock button span{font-size:12px}
  .scroll-progress{right:4px;top:var(--nav-h);bottom:8px}
  .downloads,.sources{padding:72px 24px}
  .downloads h2{font-size:40px}
  .download-list{flex-direction:column;margin:28px 0}
  .lightbox{grid-template-columns:42px minmax(0,1fr) 42px;padding:18px 4px}
  .lightbox button{font-size:44px}
  .lightbox-close{right:12px;top:4px}
  .lightbox img{max-height:72vh}
}

/* ===== XR 城市名片：360° 全景漫游 ===== */
.xr-hero{min-height:100vh;min-height:100svh;position:relative;overflow:hidden;color:#f2f0e8;display:block;padding:0;background:linear-gradient(rgba(5,10,12,.42),rgba(5,10,12,.66)),url("../images/panorama-wuzhifeng-night.jpg") center 40%/cover #050a0c}
.xr-hero--fallback [data-xr-canvas]{display:none}
.xr-hero--fallback .xr-hint{display:none}
.xr-scene{position:absolute;inset:0;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;outline:none}
.xr-scene:active{cursor:grabbing}
.xr-scene canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.xr-scene::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 38%,transparent 52%,rgba(2,6,8,.55) 100%);opacity:.9}
.xr-overlay{position:absolute;left:clamp(24px,6vw,88px);top:calc(var(--nav-h) + clamp(24px,6vh,72px));max-width:620px;pointer-events:none;z-index:2;text-shadow:0 2px 24px rgba(0,0,0,.55)}
.xr-brand{margin:0;color:#d6c28d;font:700 15px/1.4 "STKaiti","KaiTi",serif;letter-spacing:.28em;animation:xrFadeUp .9s .15s both}
.xr-eyebrow{margin:22px 0 0;color:#9fd0c3;font-size:13px;letter-spacing:.5em;animation:xrFadeUp .9s .25s both}
.xr-overlay h1{margin:.12em 0 0;font:700 clamp(40px,6vw,84px)/1.12 "STKaiti","KaiTi",serif;letter-spacing:.08em;color:#fff;animation:xrFadeUp .9s .35s both}
.xr-tags{display:flex;flex-wrap:wrap;gap:10px 14px;margin:26px 0 30px;animation:xrFadeUp .9s .45s both}
.xr-tags span{padding:7px 16px;border:1px solid rgba(214,194,141,.45);border-radius:999px;background:rgba(6,14,12,.42);backdrop-filter:blur(6px);color:#e8d9ae;font-size:13px;letter-spacing:.14em}
.xr-hero .hero-link{display:inline-block;margin:0;pointer-events:auto;animation:xrFadeUp .9s .55s both}
.xr-hero .hero-link:hover{background:rgba(214,194,141,.14);border-color:#e6d3a2;box-shadow:0 14px 40px rgba(0,0,0,.4);transition:.3s}
.xr-status{position:absolute;right:clamp(18px,4vw,56px);top:calc(var(--nav-h) + 22px);margin:0;padding:7px 14px;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(4,10,9,.5);backdrop-filter:blur(8px);color:#b9c7c3;font-size:12px;letter-spacing:.12em;z-index:2;transition:opacity .3s}
.xr-hint{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);margin:0;color:#9fb0ab;font-size:12px;letter-spacing:.2em;white-space:nowrap;text-shadow:0 1px 12px rgba(0,0,0,.9);pointer-events:none;z-index:2}
.xr-controls{position:absolute;right:clamp(18px,4vw,56px);bottom:22px;display:flex;gap:12px;z-index:2}
.xr-btn{padding:10px 20px;border:1px solid rgba(214,194,141,.5);border-radius:999px;background:rgba(6,14,12,.5);backdrop-filter:blur(8px);color:#e8d9ae;font-size:13px;letter-spacing:.12em;cursor:pointer;transition:.25s}
.xr-btn:hover{background:rgba(214,194,141,.16);border-color:#e6d3a2}
.xr-btn--vr{border-color:rgba(159,208,195,.55);color:#cdeee5}
.xr-btn--vr:hover{background:rgba(159,208,195,.14);border-color:#9fd0c3}
.xr-btn--active{background:rgba(159,208,195,.2);border-color:#9fd0c3;color:#e8faf3}
@keyframes xrFadeUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@media(max-width:767px){
  .xr-overlay{left:20px;right:20px;top:calc(var(--nav-h) + 18px);max-width:none}
  .xr-brand{font-size:13px}
  .xr-eyebrow{font-size:11px;letter-spacing:.34em}
  .xr-overlay h1{font-size:38px}
  .xr-tags{gap:8px 10px;margin:20px 0 24px}
  .xr-tags span{font-size:12px;padding:6px 12px}
  .xr-status{right:14px;top:calc(var(--nav-h) + 14px);font-size:10px;padding:5px 10px}
  .xr-hint{font-size:10px;bottom:18px;letter-spacing:.14em}
  .xr-controls{right:14px;bottom:14px;gap:8px}
  .xr-btn{padding:8px 14px;font-size:12px}
}

/* ===== 章节滚动显现与图片微 3D 悬停 ===== */
.js-anim .era-heading,.js-anim .timeline-node,.js-anim .downloads{opacity:0;transform:translateY(30px);transition:opacity .75s ease,transform .75s cubic-bezier(.22,.61,.36,1),box-shadow .3s ease}
.js-anim .era-heading.in-view,.js-anim .timeline-node.in-view,.js-anim .downloads.in-view{opacity:1;transform:none}
.js-anim .timeline-node.in-view:hover,.js-anim .timeline-node.in-view:focus-within{transform:translateY(-7px)}
.timeline-node figure,.photo-pair{transform-style:preserve-3d;will-change:transform}
.timeline-node figure img,.photo-pair img{backface-visibility:hidden}

@media(max-width:1200px){
  .city-card__frame{grid-template-columns:minmax(300px,.9fr) minmax(400px,1.1fr);gap:34px;padding-left:44px;padding-right:44px}
  .city-card__facts{flex-direction:column;gap:12px}
}
@media(max-width:900px){
  .city-card__frame{grid-template-columns:1fr;gap:24px;padding:calc(var(--nav-h) + 30px) 24px 60px}
  .city-card__scene{height:clamp(360px,54vh,480px);min-height:360px}
}
@media(max-width:767px){
  .city-card{min-height:auto;padding:0}
  .city-card__info{text-align:center}
  .city-card__facts{flex-direction:row;justify-content:center;gap:12px 18px;flex-wrap:wrap}
  .city-card__facts span{align-items:center;font-size:11px}
  .city-card h1{font-size:38px}
  .hero-sub{font-size:13px}
  .city-card__scene{height:360px;min-height:0}
  .city-card__hint{font-size:10px;bottom:14px}
  .city-card__controls{right:12px;bottom:10px}
  .city-card__view-name{top:12px;left:12px;font-size:14px;padding:6px 12px}
}
@media (prefers-reduced-motion:reduce){
  .xr-overlay *,.xr-status,.xr-hint,.xr-controls{animation:none!important;opacity:1!important}
  .js-anim .era-heading,.js-anim .timeline-node,.js-anim .downloads{opacity:1!important;transform:none!important;transition:none!important}
  .timeline-node figure,.photo-pair{transform:none!important}
}
.footer-icp{margin-left:14px;padding-left:14px;border-left:1px solid rgba(255,255,255,.18)}
.footer-icp a{color:#b9c7c3;text-decoration:none}
.footer-icp a:hover{color:#e6d3a2}
.footer-credit{margin-left:14px;padding-left:14px;border-left:1px solid rgba(255,255,255,.18);color:#8fa09b}
/* ---- 背景音乐悬浮按钮 ---- */
.music-fab{position:fixed;right:18px;bottom:18px;z-index:95;width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;line-height:1;color:#f5f5ef;background:rgba(19,34,31,.72);border:1px solid rgba(255,255,255,.22);box-shadow:0 4px 16px rgba(0,0,0,.28);backdrop-filter:blur(8px);cursor:pointer;transition:transform .2s,opacity .2s}
.music-fab:hover{transform:scale(1.08)}
.music-fab.xr-tool--muted{opacity:.45;color:rgba(255,255,255,.62)}