/* 金坤妍 · 个人网站 — 正式版骨架
   纸 #F0E8D6 / 深一档 #E9DCC4 / 墨 #1F2A24 / 墨软 #4A554E / 墨淡 #9A9584 / 专色钢笔蓝黑 #2F4D68 */

:root {
  --paper: #F0E8D6;
  --paper2: #E9DCC4;
  --ink: #1F2A24;
  --ink-soft: #4A554E;
  --faint: #9A9584;
  --pen: #2F4D68;
  --warm: #E8C87E;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: auto; overscroll-behavior-x: none; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: "Huiwen Fangsong", "Noto Serif SC", serif;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
body.lang-en { font-family: "Bodoni Moda", "Noto Serif SC", serif; }

/* 纸噪点 */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 900; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}

::selection { background: var(--pen); color: var(--paper); }

/* ═══ 滚动骨架 ═══ */
.scroller { height: 1050vh; }
.stage { position: fixed; inset: 0; overflow: hidden; z-index: 10; }
.world-svg { width: 100%; height: 100%; display: block; }

/* ═══ 顶栏 ═══ */
#siteHeader {
  position: fixed; top: 0; left: 0; right: 0; z-index: 400;
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 1.2rem 2rem;
  font-family: "Hanken Grotesk", "Huiwen Fangsong", serif;
  font-size: .72rem; letter-spacing: .18em;
  color: var(--ink-soft);
  background: transparent;
  transition: background-color .55s ease, box-shadow .55s ease, padding .55s ease;
}
#siteHeader.archive-mode {
  background: var(--paper);
  box-shadow: 0 1px 0 rgba(31, 42, 36, .08);
  padding: .28rem 2rem;
}
#siteHeader nav { display: flex; gap: 1.8rem; }
#siteHeader a, #siteHeader button {
  color: var(--ink-soft); text-decoration: none; background: none; border: none;
  font: inherit; letter-spacing: inherit; cursor: pointer; padding: 0;
}
#siteHeader a:hover, #siteHeader button:hover { color: var(--pen); }
#siteHeader .hd-right { display: flex; gap: 1.8rem; align-items: baseline; }
#siteHeader .fr { font-family: "Bodoni Moda", serif; font-style: italic; font-size: .85rem; letter-spacing: .04em; }
#siteHeader .ghost { color: var(--faint); cursor: default; }
#siteHeader .ghost:hover { color: var(--faint); }
#siteHeader .lang-switch .active {
  color: var(--ink);
  border-bottom: 1px solid rgba(31, 42, 36, .32);
}
#siteHeader .sound-toggle[aria-pressed="true"] {
  color: var(--ink);
  border-bottom: 1px solid rgba(31, 42, 36, .32);
}

/* ═══ 序厅封面 ═══ */
.cover {
  position: fixed; inset: 0; z-index: 200;
  background: var(--paper);
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 9vw;
}
.cover-inner { display: flex; align-items: center; gap: 6vw; }
.cover-name {
  font-family: "Noto Serif SC", serif;
  font-size: clamp(3.2rem, 7.4vw, 6rem); font-weight: 600; letter-spacing: .05em; line-height: 1.1;
}
.cover-latin {
  font-family: "Hanken Grotesk", "Huiwen Fangsong", serif;
  font-size: .78rem; letter-spacing: .5em; color: var(--ink-soft); margin-top: 1.2rem;
}
.cover-line { font-size: clamp(1.05rem, 1.8vw, 1.4rem); color: var(--ink-soft); margin-top: 2.6rem; }
.cover-fr {
  font-family: "Bodoni Moda", serif; font-style: italic;
  font-size: clamp(.95rem, 1.6vw, 1.3rem); color: var(--faint); margin-top: 2.2rem; line-height: 1.8;
  white-space: pre-line;
}
.cover-photo {
  position: relative; flex: 0 0 auto;
  width: clamp(150px, 17vw, 240px);
  transform: rotate(1.2deg);
  background: #FBF6E9; padding: 10px 10px 34px;
  box-shadow: 0 18px 40px -18px rgba(31, 42, 36, .45);
  opacity: 0; transition: opacity 1.2s ease .15s;
}
.cover-photo.ready { opacity: 1; }
.cover-photo img {
  display: block; width: 100%; height: auto;
  filter: grayscale(.45) sepia(.34) brightness(1.04) contrast(.95);
}
.cover-actions {
  position: absolute; left: 9vw; bottom: 6vh;
  display: flex; align-items: center; gap: 1.1rem;
}
.cover-hint {
  font-size: .8rem; letter-spacing: .3em; color: var(--faint);
  display: flex; align-items: center; gap: .8rem;
}
.cover-hint::after {
  content: ""; width: clamp(2.4rem, 6vw, 4.6rem); height: 1rem;
  flex: 0 0 auto;
  background: center / 100% 100% no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 92 20'%3E%3Cpath d='M2 13 C20 3 34 18 51 9 S76 5 88 10' fill='none' stroke='%239A9584' stroke-width='1.3' stroke-linecap='round' stroke-dasharray='1.5 5'/%3E%3Ccircle cx='89' cy='10' r='2.2' fill='%239A9584'/%3E%3C/svg%3E");
  animation: route-breathe 2.8s ease-in-out infinite; transform-origin: left center;
}
.cover-overview {
  font-family: "Hanken Grotesk", "Huiwen Fangsong", serif;
  font-size: .72rem; letter-spacing: .22em; color: var(--ink-soft);
  background: none; border: none; cursor: pointer; padding: 0 0 2px;
  border-bottom: 1px solid rgba(74, 85, 78, .35); flex: 0 0 auto;
}
.cover-overview:hover { color: var(--ink); border-bottom-color: var(--ink); }
@keyframes breathe { 0%,100% { transform: scaleX(.4); opacity: .4 } 50% { transform: scaleX(1); opacity: 1 } }
@keyframes route-breathe { 0%,100% { transform: translateX(0); opacity: .42 } 50% { transform: translateX(.35rem); opacity: .9 } }

/* 档案胶带 */
.tape {
  position: absolute; width: 44px; height: 18px;
  background: rgba(233, 220, 196, .85);
  border-left: 1px dashed rgba(31, 42, 36, .18);
  border-right: 1px dashed rgba(31, 42, 36, .18);
  box-shadow: 0 1px 2px rgba(31, 42, 36, .12);
  z-index: 2; pointer-events: none;
}
.tape.tl { top: -8px; left: -14px; transform: rotate(-38deg); }
.tape.tr { top: -8px; right: -14px; transform: rotate(38deg); }
.tape.bl { bottom: -8px; left: -14px; transform: rotate(38deg); }
.tape.br { bottom: -8px; right: -14px; transform: rotate(-38deg); }

/* ═══ 撕边纸框 ═══ */
.deckle { position: fixed; inset: 0; z-index: 350; pointer-events: none; }
.deckle svg { width: 100%; height: 100%; }

/* ═══ 小地图 ═══ */
.minimap { position: fixed; right: 1.6rem; bottom: 1.6rem; z-index: 320; width: 150px;
  background: transparent; border: 0; box-shadow: none; padding: 0; }
.minimap svg { width: 100%; display: block; }

/* ═══ 地图内文字 ═══ */
.svg-mashan { font-family: "Ma Shan Zheng", "Noto Serif SC", serif; }
.svg-bodoni { font-family: "Bodoni Moda", serif; }
.svg-hanken { font-family: "Hanken Grotesk", "Huiwen Fangsong", serif; }
.svg-huiwen { font-family: "Huiwen Fangsong", "Noto Serif SC", serif; }

/* 潜入时城市名：SVG 原文自身过渡，左移并退灰（DESIGN_SPEC §15.1 / §16.5/14） */
.island .isle-label {
  transition: transform .9s cubic-bezier(.25,.8,.2,1), fill .9s, opacity .6s ease;
  transform-box: fill-box;
}
.island.dive-open .isle-label { transform: translateX(-46px); fill: #b5ad99; }

/* 潜入时顶栏中间导航淡出（避免与退灰城市名相邻干扰） */
#siteHeader nav, #siteHeader .hd-right { transition: opacity .6s; }
#siteHeader.diving nav { opacity: 0; pointer-events: none; }

/* 街区插画：悬停整张浮起 + 软投影，不变色 */
.illo-zone { cursor: pointer; }
.illo-zone .illo {
  transition: transform .55s cubic-bezier(.2,.8,.2,1), filter .55s cubic-bezier(.2,.8,.2,1);
  transform-box: fill-box;
}
.illo-zone .illo image { pointer-events: none; }
.illo-zone:hover .illo {
  transform: translateY(-8px);
  filter: drop-shadow(0 20px 28px rgba(31,42,36,.22));
}

/* 潜入卡片：简历字段行版式（对齐 comp/beijing-v5.html） */
.dive-layer { position: fixed; inset: 0; z-index: 380; pointer-events: none; }
.dive-layer .slip {
  position: absolute; background: var(--paper2); border: 1px solid rgba(31,42,36,.25);
  box-shadow: 0 16px 40px -18px rgba(31,42,36,.35); padding: 1.4rem 1.5rem 1.2rem;
  opacity: 0; transform: translateY(26px) rotate(2.5deg); pointer-events: none;
  transition: opacity .55s cubic-bezier(.2,.8,.2,1), transform .6s cubic-bezier(.2,.8,.2,1);
}
.dive-layer.open .slip { opacity: 1; pointer-events: auto; }
.dive-layer .slip-a { right: 6%; top: 12%; width: 330px; }
.dive-layer .slip-b { right: 9%; top: 54%; width: 310px; }
.dive-layer .slip-b.slip-wide { width: 430px; top: 50%; }
@media (min-width: 761px) {
  /* 上海单卡：与北京扬州同一版式，单卡放宽到宽卡规格 */
  #dive-shanghai .slip-a { width: 430px; }
  /* 巴黎单卡：与上海同款宽卡 */
  #dive-paris .slip-a { width: 430px; }
  /* 深圳：腾讯卡四条字段行且标签长，a 卡放宽到宽卡规格；b 卡固定左下（右侧纵列放不下两卡） */
  #dive-shenzhen .slip-a { width: 430px; }
  #dive-shenzhen .slip-b { left: 5%; right: auto; top: auto; bottom: 7%; }
  /* 深圳 b 卡的桌面端 demo 截图是横幅，三张一排放宽（项目资产，无边框无滤镜） */
  #dive-shenzhen .slip-shots img { width: 31%; }
}
@media (max-height: 900px) and (min-width: 761px) {
  /* 短视口下宽卡层的小卡移到左下，避免两卡相叠（高度随内容） */
  #dive-yangzhou .slip-a { left: 5%; right: auto; top: auto; bottom: 6%; }
  #dive-yangzhou .slip-b.slip-wide { top: 10%; }
  #dive-singapore .slip-a { left: 5%; right: auto; top: auto; bottom: 6%; }
  #dive-singapore .slip-b.slip-wide { top: 8%; }
  body.lang-en #dive-beijing .slip-a { left: 5%; right: auto; top: auto; bottom: 6%; }
}
@media (min-width: 901px) and (min-height: 901px) and (max-height: 1150px) {
  /* 英文宽卡比中文高：中等高度桌面也改为左右分列 */
  body.lang-en #dive-yangzhou .slip-a,
  body.lang-en #dive-singapore .slip-a { left: 5%; right: auto; top: auto; bottom: 6%; }
  body.lang-en #dive-yangzhou .slip-b.slip-wide { top: 10%; }
  body.lang-en #dive-singapore .slip-b.slip-wide { top: 8%; }
}
.dive-layer.open .slip-a { transform: translateY(0) rotate(-.7deg); transition-delay: .3s; }
.dive-layer.open .slip-b { transform: translateY(0) rotate(.8deg); transition-delay: .42s; }
.slip-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.slip-no { font-family: "Hanken Grotesk", "Huiwen Fangsong", serif; font-size: .66rem; letter-spacing: .2em; color: var(--pen); }
.slip-date { font-family: "Hanken Grotesk", "Huiwen Fangsong", serif; font-size: .66rem; letter-spacing: .12em; color: var(--faint); }
.slip-title { font-family: "Noto Serif SC", serif; font-size: 1.25rem; font-weight: 600; margin: .5rem 0 .7rem; }
.slip-rows { border-top: 1px solid rgba(31,42,36,.3); }
.slip-row { display: flex; align-items: baseline; gap: .9rem; padding: .45rem 0; border-bottom: 1px solid rgba(31,42,36,.12); }
.slip-row:last-child { border-bottom: none; }
.slip-label { font-family: "Hanken Grotesk", "Huiwen Fangsong", serif; font-size: .62rem; letter-spacing: .18em; color: var(--faint); white-space: nowrap; }
.slip-leader { flex: 1; border-bottom: 1px dotted rgba(31,42,36,.35); transform: translateY(-3px); }
.slip-value { font-size: .86rem; line-height: 1.75; color: var(--ink); max-width: 16em; }
.slip-wide .slip-value { max-width: 22em; }
.slip-pending {
  margin-top: .9rem;
  font-family: "Hanken Grotesk", "Huiwen Fangsong", serif; font-size: .62rem; letter-spacing: .18em;
  color: var(--faint);
}
.slip-shots { display: flex; gap: .55rem; margin-top: 1rem; }
.slip-shots img {
  width: 18.5%; height: auto; display: block;
}
.slip-link {
  display: inline-block; margin-top: .9rem;
  font-family: "Hanken Grotesk", "Huiwen Fangsong", serif; font-size: .68rem; letter-spacing: .16em;
  color: var(--pen); text-decoration: none; border-bottom: 1px solid rgba(47,77,104,.35);
}
.slip-link:hover { border-bottom-color: var(--pen); }
/* 状态标注（如 building now）：与档案区 .arch-tag 同一版式 */
.slip-headtag {
  font-family: "Hanken Grotesk", "Huiwen Fangsong", serif; font-size: .62rem; letter-spacing: .2em;
  color: var(--pen); border: 1px solid rgba(47, 77, 104, .5);
  padding: .1rem .45rem; margin-left: .5rem; vertical-align: .18em; font-weight: 400;
}

/* 岔路口的过日子小铺路牌：橱窗插画缩微暗态（与巷内同一画面语言） */
.vig-illo { filter: brightness(.5) saturate(.8); transition: filter .8s ease; }
/* 追问巷/语言角路牌：暗态常驻，悬停点亮（可点性提示）；追问巷点开过巷子后常亮（与小铺灯绳同语义） */
#vigLang:hover .vig-illo, #vigQuest:hover .vig-illo, #vigQuest.lit .vig-illo { filter: brightness(1) saturate(1); }

.hotspot { cursor: pointer; }
.hotspot .hs-glow { opacity: 0; transition: opacity .4s; }
.hotspot:hover .hs-glow { opacity: .35; }

.map-photo { cursor: pointer; }
.map-photo image { filter: grayscale(.6) sepia(.3) brightness(1.03) contrast(.96); }
.map-photo.project image { filter: none; }
.map-slip { cursor: pointer; }
.map-slip .slip-paper { fill: #F5EEDD; stroke: #1F2A24; stroke-opacity: .45; stroke-width: 1.2; }
.map-slip text { fill: var(--ink-soft); }
.map-slip .slip-tag { fill: var(--pen); }
.map-slip.pending .slip-note { fill: var(--faint); }

text { user-select: none; }

/* ═══ 引导提示 ═══ */
#guide {
  position: fixed; left: 50%; bottom: 4.5vh; transform: translateX(-50%);
  z-index: 320; font-size: .8rem; letter-spacing: .3em; color: var(--faint);
  display: flex; align-items: center; gap: .8rem; transition: opacity .5s;
  pointer-events: none; white-space: nowrap;
}
#guide::after {
  content: ""; width: 2.6rem; height: 1px; background: var(--faint);
  animation: breathe 2.6s ease-in-out infinite; transform-origin: left;
}

/* ═══ 展签 ═══ */
#exhibit {
  position: fixed; z-index: 380; width: min(400px, 86vw);
  visibility: hidden; opacity: 0;
  transform: rotate(-1.2deg) translateY(8px);
  transition: opacity .55s ease, transform .55s ease, visibility 0s linear .55s;
}
#exhibit.open {
  visibility: visible; opacity: 1;
  transform: rotate(-1.2deg) translateY(0);
  transition: opacity .55s ease, transform .55s ease;
}
.ex-paper {
  position: relative;
  background: var(--paper2);
  padding: 1.9rem 1.7rem 1.6rem;
  box-shadow: 0 24px 50px -20px rgba(31, 42, 36, .5);
  max-height: 72vh; overflow-y: auto;
}
.ex-meta {
  font-family: "Hanken Grotesk", "Huiwen Fangsong", serif; font-size: .66rem;
  letter-spacing: .16em; color: var(--pen); margin-bottom: .7rem;
}
#exhibit h3 { font-size: 1.35rem; font-weight: 600; margin-bottom: 1rem; letter-spacing: .03em; }
.ex-media { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1rem; }
.ex-media:empty { display: none; }
.ex-media img {
  display: block; max-width: 100%; height: auto;
  filter: grayscale(.5) sepia(.3) brightness(1.03) contrast(.96);
  background: #FBF6E9; padding: 5px;
  box-shadow: 0 6px 16px -8px rgba(31, 42, 36, .4);
}
.ex-media img.shot { filter: none; max-width: 31%; }
.ex-media img.tall { max-height: 200px; width: auto; }
.ex-body { font-size: .92rem; line-height: 2; color: var(--ink-soft); white-space: pre-line; }
.ex-body:empty { display: none; }
.ex-pending {
  font-family: "Hanken Grotesk", "Huiwen Fangsong", serif; font-size: .66rem; letter-spacing: .16em;
  color: var(--faint); margin-top: .9rem;
}
.ex-pending:empty { display: none; }
.ex-link {
  display: inline-block; margin-top: 1rem;
  font-family: "Hanken Grotesk", "Huiwen Fangsong", serif; font-size: .72rem; letter-spacing: .14em;
  color: var(--pen); text-decoration: none; border-bottom: 1px solid rgba(47, 77, 104, .4);
}
.ex-link:empty { display: none; }
.ex-link:hover { border-bottom-color: var(--pen); }

/* ═══ 岔路浮层 ═══ */
.lane-overlay {
  position: fixed; inset: 0; z-index: 390;
  display: flex; align-items: center; justify-content: center;
  visibility: hidden; opacity: 0;
  transition: opacity .5s ease, visibility 0s linear .5s;
}
.lane-overlay.open {
  visibility: visible; opacity: 1;
  transition: opacity .5s ease;
}
.lane-backdrop { position: absolute; inset: 0; background: rgba(31, 42, 36, .18); }
.lane-paper {
  position: relative;
  background: var(--paper2);
  padding: 3rem 2.6rem 2.4rem;
  max-width: min(720px, 92vw); max-height: 80vh; overflow-y: auto;
  transform: rotate(-.8deg);
  box-shadow: 0 30px 60px -24px rgba(31, 42, 36, .55);
}

/* 语言角：巷内即窗台实景（与路牌同一画面语言）；悬停窗户，三门语言的你好在窗洞里随机点亮（10-09 她定） */
/* 巷子打开时城市名退到极淡：避免文字透过插画半透明 wash 与巷内画面相叠 */
body.lane-open .isle-label { opacity: .14; }
.lang-scene { position: relative; transform: rotate(-.6deg); }
.lang-window { position: relative; width: min(560px, 86vw); }
.lang-window::before {
  /* 纸色光晕：挡住后景透过插画半透明 wash 的干扰 */
  content: ""; position: absolute; inset: -9% -11%; z-index: -1;
  background: radial-gradient(ellipse at 50% 48%, rgba(240, 232, 214, .88), rgba(240, 232, 214, .5) 55%, transparent 72%);
}
.lang-window img {
  display: block; width: 100%; height: auto;
  filter: drop-shadow(0 30px 34px rgba(31, 42, 36, .22));
}
.lang-hello {
  position: absolute; z-index: 2; transform: translate(-50%, calc(-50% + 8px));
  display: flex; flex-direction: column; align-items: center; gap: .15rem;
  opacity: 0; filter: blur(3px); pointer-events: none; white-space: nowrap;
  transition: opacity .9s ease, transform .9s ease, filter .9s ease;
}
.lang-window.greet .lang-hello { opacity: 1; transform: translate(-50%, -50%); filter: blur(0); }
.lang-hello-word {
  font-family: "Bodoni Moda", serif; font-style: italic;
  font-size: 1.65rem; color: #F0E8D6;
  text-shadow: 0 0 14px rgba(31, 42, 36, .6), 0 0 3px rgba(31, 42, 36, .5);
}
.lang-hello.tibetan .lang-hello-word {
  font-family: "Kailasa", "Noto Serif Tibetan", "Microsoft Himalaya", serif;
  font-style: normal; font-size: 1.5rem;
}
.lang-name {
  font-size: .68rem; letter-spacing: .18em; color: rgba(240, 232, 214, .85);
  text-shadow: 0 0 10px rgba(31, 42, 36, .6);
}

/* 追问巷：三段窄栏 + 铅笔下划线 */
.quest-paper { max-width: min(920px, 94vw); }
.quest-intro { font-size: 1.02rem; margin-bottom: 1.6rem; color: var(--ink); }
.quest-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4rem; }
.quest-col { font-size: .9rem; line-height: 2.05; color: var(--ink-soft); }
.quest-col .under {
  border-bottom: 2px solid rgba(47, 77, 104, .55);
  border-radius: 40% 60% 55% 45% / 100% 100% 90% 90%;
  padding-bottom: 1px;
}

/* 过日子小铺：暗橱窗 + 灯绳（橱窗插画进场，画里灯绳拉环即开关；暖光是全站唯一例外色，只在巷内） */
.shop-window {
  position: relative; width: min(520px, 92vw);
  transform: rotate(-.6deg);
  box-shadow: 0 30px 60px -24px rgba(31, 42, 36, .6);
}
.shop-dark {
  position: relative; background: #232B25;
  border: 10px solid #DFD2B4;
  padding: 7% 8% 5%;
  transition: background 1.2s ease;
}
.shop-window.lit .shop-dark { background: #3A3A2C; }
.shop-img-wrap { position: relative; }
.shop-img-wrap img {
  display: block; width: 100%; height: auto;
  filter: brightness(.42) saturate(.75);
  transition: filter 1.2s ease;
}
.shop-window.lit .shop-img-wrap img { filter: brightness(1) saturate(1); }
.shop-glow {
  position: absolute; inset: -14%;
  background: radial-gradient(ellipse at 64.3% 39%, rgba(232, 200, 126, .38), transparent 55%);
  mix-blend-mode: screen; opacity: 0; pointer-events: none;
  transition: opacity 1.4s ease;
}
.shop-window.lit .shop-glow { opacity: 1; }
.shop-cord {
  position: absolute; left: 64.2%; top: 50.8%;
  width: 36px; height: 36px; transform: translate(-50%, -50%);
  background: none; border: none; cursor: pointer; border-radius: 50%; padding: 0;
}
.shop-cord::after {
  content: ""; position: absolute; inset: 10px; border-radius: 50%;
  border: 1.5px solid rgba(201, 189, 159, .5);
  box-shadow: 0 0 10px 2px rgba(201, 189, 159, .2);
  transition: border-color .5s ease, background .6s ease, box-shadow .6s ease;
}
.shop-cord:hover::after { border-color: rgba(201, 189, 159, .95); box-shadow: 0 0 16px 4px rgba(201, 189, 159, .3); }
.shop-window.lit .shop-cord::after {
  background: var(--warm); border-color: var(--warm);
  box-shadow: 0 0 32px 10px rgba(232, 200, 126, .5);
}

/* ═══ 档案区 ═══ */
.overview-hold {
  position: relative; z-index: 20; height: 72vh;
  pointer-events: none;
}
#archive {
  position: relative; z-index: 300;
  background: linear-gradient(to bottom,
    rgba(240, 232, 214, 0) 0,
    rgba(240, 232, 214, .55) 7vh,
    rgba(240, 232, 214, .9) 14vh,
    var(--paper) 21vh);
  padding: 21vh 0 12vh;
}
.arch-section {
  max-width: 1020px; margin: 0 auto;
  padding: 9vh 2rem 6vh;
  scroll-margin-top: 2.5rem;
}
.arch-section:first-child { border-top: none; }
.arch-rh {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: "Hanken Grotesk", "Huiwen Fangsong", serif; font-size: .66rem; letter-spacing: .22em;
  color: var(--faint);
  border-bottom: 1px solid rgba(31, 42, 36, .25);
  padding-bottom: .55rem; margin-bottom: 3.2rem;
}
.arch-rh .rh-left { font-family: "Bodoni Moda", serif; font-style: italic; font-size: .8rem; letter-spacing: .06em; }
.arch-head { display: flex; align-items: baseline; gap: 1.35rem; margin-bottom: 4rem; }
.arch-num {
  font-family: "Hanken Grotesk", "Huiwen Fangsong", serif; font-size: 1.2rem;
  letter-spacing: .3em; color: var(--pen);
}
.arch-fr {
  font-family: "Bodoni Moda", serif; font-style: italic;
  font-size: clamp(1.7rem, 3vw, 2.2rem); color: var(--ink);
}
.arch-title { font-size: 1.08rem; letter-spacing: .35em; color: var(--ink-soft); }
.arch-fleuron-img { margin-left: auto; align-self: center; height: 68px; width: auto; }
.ft-plant { display: block; height: 108px; width: auto; margin: 0 auto 3.4rem; }
.cover-deco { position: absolute; right: 7vw; bottom: 8vh; width: 118px; height: auto; opacity: .92; }

.arch-group-label {
  font-family: "Hanken Grotesk", "Huiwen Fangsong", serif; font-size: 1rem; letter-spacing: .22em;
  color: var(--faint); margin: 2.6rem 0 .4rem;
}
.arch-group:first-of-type .arch-group-label { margin-top: 0; }
.arch-group-label:empty { display: none; }

.arch-rows { display: block; }
.arch-row { display: grid; grid-template-columns: 9.5rem 1fr; }
.arch-year {
  border-right: 1px solid rgba(31, 42, 36, .28);
  padding: 1.6rem 1.2rem 1.6rem 0; text-align: right;
  font-family: "Hanken Grotesk", "Huiwen Fangsong", serif; font-size: .7rem; letter-spacing: .12em;
  color: var(--faint); line-height: 1.7; white-space: nowrap;
}
.arch-entry { padding: 1.6rem 0 1.8rem 2.2rem; border-top: 1px dotted rgba(31, 42, 36, .14); position: relative; }
.arch-row:first-child .arch-entry { border-top: none; }
.arch-no {
  font-family: "Hanken Grotesk", "Huiwen Fangsong", serif; font-size: .68rem; letter-spacing: .2em;
  color: var(--pen); display: block; margin-bottom: .5rem;
}
.arch-entry-title { font-size: 1.08rem; font-weight: 600; letter-spacing: .02em; }
.arch-entry-title:empty { display: none; }
.arch-tag {
  font-family: "Hanken Grotesk", "Huiwen Fangsong", serif; font-size: .62rem; letter-spacing: .2em;
  color: var(--pen); border: 1px solid rgba(47, 77, 104, .5);
  padding: .1rem .45rem; margin-left: .7rem; vertical-align: .18em;
}
.arch-body { font-size: .9rem; line-height: 2.05; color: var(--ink-soft); margin-top: .5rem; white-space: pre-line; max-width: 44em; }
body.lang-en .arch-title { letter-spacing: .16em; }
body.lang-en .arch-group-label { letter-spacing: .14em; }
body.lang-en .arch-body { line-height: 1.85; }
.arch-body-list { display: grid; gap: .58rem; max-width: 48em; }
.arch-body-line {
  display: grid; grid-template-columns: 7.8rem minmax(0, 1fr); gap: .9rem;
  margin: 0; line-height: 1.65;
}
.arch-body-label {
  padding-top: .16rem; font-family: "Hanken Grotesk", sans-serif; font-size: .58rem;
  line-height: 1.4; letter-spacing: .14em; color: var(--faint);
}
body.lang-en .slip-title { font-family: "Bodoni Moda", serif; }
body.lang-en .slip-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: .28rem;
  align-items: start;
}
body.lang-en .slip-label { white-space: normal; }
body.lang-en .slip-leader { display: none; }
body.lang-en .slip-value,
body.lang-en .slip-wide .slip-value { max-width: none; }

/* 平板竖屏及窄窗口：英文卡片改为内部可滚动纵列，避免固定坐标相叠 */
@media (max-width: 900px) {
  .dive-layer.open { pointer-events: auto; overflow-y: auto; }
  .dive-layer .slip, .dive-layer .slip-a, .dive-layer .slip-b, .dive-layer .slip-b.slip-wide {
    position: relative; left: auto; right: auto; top: auto; bottom: auto;
    width: min(88%, 560px); margin: 10vh auto 2rem;
  }
  .dive-layer .slip-b, .dive-layer .slip-b.slip-wide { margin: 1.5rem auto 10vh; }
  /* 覆盖桌面端各街区的 ID 定位规则 */
  body.lang-en #dive-beijing .slip-a,
  #dive-yangzhou .slip-a, #dive-yangzhou .slip-b.slip-wide,
  #dive-singapore .slip-a, #dive-singapore .slip-b.slip-wide,
  #dive-shenzhen .slip-a, #dive-shenzhen .slip-b {
    position: relative; left: auto; right: auto; top: auto; bottom: auto;
    width: min(88%, 560px);
  }
}
/* 拉丁句条目（如开普敦 To Be Continued）：Bodoni italic */
.arch-body-en { font-family: "Bodoni Moda", serif; font-style: italic; font-size: .98rem; }
.arch-links { margin-top: .8rem; display: flex; gap: 1.6rem; align-items: baseline; }
.arch-link {
  font-family: "Hanken Grotesk", "Huiwen Fangsong", serif; font-size: .7rem; letter-spacing: .14em;
  color: var(--pen); text-decoration: none; border-bottom: 1px solid rgba(47, 77, 104, .35);
}
.arch-link:hover { border-bottom-color: var(--pen); }
.arch-gallery { display: flex; gap: .8rem; margin-top: 1.1rem; flex-wrap: wrap; }
.arch-gallery img {
  width: 96px; height: auto; display: block;
}
.arch-gallery-landscape img { width: 160px; }
.arch-gallery img,
.slip-shots img { cursor: zoom-in; transition: opacity .5s ease, transform .5s cubic-bezier(.2,.8,.2,1); }
.arch-gallery img:hover,
.arch-gallery img:focus-visible,
.slip-shots img:hover,
.slip-shots img:focus-visible { opacity: .86; transform: translateY(-3px); outline: none; }

/* 项目证据图大图层：直接放图，不加白框或卡片装裱 */
.image-viewer {
  position: fixed; inset: 0; z-index: 900; display: grid; place-items: center;
  padding: clamp(1.1rem, 4vw, 3rem); opacity: 0; visibility: hidden;
  transition: opacity .5s ease, visibility .5s ease;
}
.image-viewer.open { opacity: 1; visibility: visible; }
.image-viewer-backdrop { position: absolute; inset: 0; background: rgba(31,42,36,.82); }
.image-viewer-figure {
  position: relative; z-index: 1; display: grid; justify-items: center; gap: .8rem;
  max-width: 94vw; max-height: 92vh; margin: 0;
}
.image-viewer-figure img {
  display: block; max-width: 92vw; max-height: 84vh; width: auto; height: auto;
  object-fit: contain; box-shadow: 0 24px 70px rgba(14,20,17,.38);
}
.image-viewer-figure figcaption {
  font-family: "Hanken Grotesk", sans-serif; font-size: .65rem; letter-spacing: .16em;
  color: rgba(240,232,214,.72); text-align: center;
}
body.image-viewer-open { overflow: hidden; }

/* 档案区与地图的衔接：虚线延伸 */
.arch-join {
  max-width: 1020px; margin: 0 auto; padding: 0 2rem;
  border-top: 2px dashed rgba(31, 42, 36, .3);
}

/* ═══ 页脚 ═══ */
#siteFooter {
  position: relative; z-index: 300;
  background: var(--paper);
  text-align: center;
  padding: 5.5vh 2rem 6.5vh;
  border-top: 1px solid rgba(31, 42, 36, .15);
}
#siteFooter p { width: min(27rem, 88vw); margin-left: auto; margin-right: auto; }
.ft-quote-fr {
  font-family: "Bodoni Moda", serif; font-style: italic;
  font-size: clamp(1.15rem, 2.4vw, 1.7rem); color: var(--ink); line-height: 1.7;
}
.ft-quote-zh { font-size: 1rem; color: var(--ink-soft); margin-top: 1.1rem; letter-spacing: .08em; }
.ft-contact {
  margin-top: 2.2rem;
  font-family: "Hanken Grotesk", "Huiwen Fangsong", serif; font-size: .72rem; letter-spacing: .2em;
  color: var(--faint);
}
.ft-contact a { color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid rgba(31, 42, 36, .25); }
.ft-contact a:hover { color: var(--pen); border-bottom-color: var(--pen); }
.ft-fr {
  margin-top: 2.5rem;
  font-family: "Bodoni Moda", serif; font-style: italic;
  font-size: .92rem; color: var(--faint);
}

/* ═══ 移动端基础可用 ═══ */
@media (max-width: 760px) {
  .cover-deco { display: none; }
  .arch-fleuron-img { height: 52px; }
  #siteHeader { padding: .9rem 1.1rem; font-size: .62rem; }
  #siteHeader.archive-mode { padding: .25rem 1.1rem; }
  #siteHeader nav { gap: 1rem; }
  #siteHeader .hd-right { gap: 1rem; }
  #siteHeader .fr { display: none; }
  body.lang-en #siteHeader {
    padding: .8rem .8rem;
    font-size: .52rem;
    letter-spacing: .1em;
  }
  body.lang-en #siteHeader.archive-mode { padding: .25rem .8rem; }
  body.lang-en #siteHeader nav { gap: .6rem; }
  body.lang-en #siteHeader .hd-right { gap: .55rem; }
  body.lang-en #siteHeader .ghost { display: none; }
  .cover { padding: 0 8vw; }
  .cover-inner { flex-direction: column; align-items: flex-start; gap: 6vh; }
  .cover-photo { width: 130px; }
  .minimap { display: none; }
  #guide { font-size: .68rem; letter-spacing: .2em; }
  .lang-hello-word { font-size: 1.25rem; }
  .lang-hello.tibetan .lang-hello-word { font-size: 1.15rem; }
  .arch-row { grid-template-columns: 4.6rem 1fr; }
  .arch-entry { padding-left: 1.1rem; }
  .arch-year { padding-right: .7rem; font-size: .6rem; white-space: normal; }
  .arch-body-list { gap: .72rem; }
  .arch-body-line { grid-template-columns: 1fr; gap: .1rem; }
  .arch-body-label { padding-top: 0; }
  .arch-gallery-landscape img { width: 132px; }
  .quest-cols { grid-template-columns: 1fr; }
  .arch-section { padding: 8vh 1.2rem 5vh; }
  /* 潜入卡层：移动端改为内部可滚动纵列，点卡间空白合上 */
  .dive-layer.open { pointer-events: auto; overflow-y: auto; }
  .dive-layer .slip, .dive-layer .slip-a, .dive-layer .slip-b, .dive-layer .slip-b.slip-wide {
    position: relative; left: auto; right: auto; top: auto; bottom: auto;
    width: 88%; margin: 13vh auto 2rem;
  }
  .dive-layer .slip-b, .dive-layer .slip-b.slip-wide { margin: 1.5rem auto 12vh; }
}

/* ═══ 减少动态 ═══ */
@media (prefers-reduced-motion: reduce) {
  .cover-hint::after, #guide::after { animation: none; }
  #exhibit, .lane-overlay, .shop-dark, .shop-img-wrap img, .shop-glow, .shop-cord::after, .dive-layer .slip, .illo-zone .illo, .isle-label, .vig-illo, .lang-hello, .cover-photo, .image-viewer, .arch-gallery img, .slip-shots img { transition: none; }
}