/* 云端街坊 · 数字博物馆 — 品牌色系：宣纸 #FBF7F0 / 茶褐 #5D4037 / 赭金 #C09A5E / 墨 #3E2723 */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { min-height: 100%; }
body {
  font-family: "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
  background: #FBF7F0; color: #3E2723;
  -webkit-font-smoothing: antialiased;
}
button { font-family: inherit; cursor: pointer; }

/* ---------- 开场黑场 ---------- */
#intro {
  position: fixed; inset: 0; z-index: 100; background: #141010;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 1.1s ease; color: #F3EBDD;
}
#intro.leaving { opacity: 0; pointer-events: none; }
.intro-inner { text-align: center; padding: 0 24px; max-width: 640px; }
.intro-kicker { font-size: 14px; letter-spacing: .5em; color: #C09A5E; margin-bottom: 28px; }
.intro-hook { font-size: clamp(26px, 5.2vw, 44px); line-height: 1.6; font-weight: 600; letter-spacing: .08em; }
.intro-sub { margin-top: 22px; font-size: 14px; color: #A1887F; letter-spacing: .15em; }
#enter-btn {
  margin-top: 44px; padding: 14px 44px; font-size: 17px; letter-spacing: .3em;
  color: #F3EBDD; background: transparent; border: 1px solid #C09A5E; border-radius: 2px;
  transition: background .35s, color .35s;
}
#enter-btn:hover { background: #C09A5E; color: #141010; }
.enter-arrow { margin-left: 10px; letter-spacing: 0; }
.intro-note { margin-top: 30px; font-size: 12px; color: #6D5B52; letter-spacing: .1em; }

/* ---------- 顶栏 ---------- */
#topbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 40;
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 16px; pointer-events: none;
}
#topbar > * { pointer-events: auto; }
.tb-title {
  display: flex; align-items: center; gap: 10px;
  background: rgba(20,15,11,.58); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: 7px 16px;
  box-shadow: 0 4px 18px rgba(20,15,11,.18);
}
.tb-logo { font-weight: 700; font-size: 13.5px; letter-spacing: .2em; color: #F3EDE2; }
.tb-divider { width: 1px; height: 13px; background: rgba(255,255,255,.2); }
#hall-indicator { font-size: 12.5px; color: rgba(243,237,226,.78); letter-spacing: .12em; white-space: nowrap; }
@media (max-width: 640px) {
  .tb-title { padding: 5px 12px; gap: 6px; }
  .tb-logo { font-size: 12px; letter-spacing: .1em; }
  #hall-indicator { font-size: 11px; }
}
.tb-actions { display: flex; gap: 8px; }
.tb-btn {
  background: rgba(20,15,11,.58); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: 7px 14px;
  font-size: 12px; color: rgba(243,237,226,.88); letter-spacing: .08em;
  box-shadow: 0 4px 18px rgba(20,15,11,.18);
  transition: border-color .2s, color .2s, background .2s;
}
.tb-btn:hover { border-color: rgba(232,207,143,.55); color: #F2D98B; }

/* ---------- 冬夏滑杆 ---------- */
#season-ctrl {
  display: flex; align-items: center; gap: 8px;
  background: rgba(20,15,11,.58); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: 6px 14px;
  box-shadow: 0 4px 18px rgba(20,15,11,.18);
}
.seas-ic { font-size: 12px; letter-spacing: .05em; font-weight: 700; }
.seas-w { color: #A8C6D4; }
.seas-s { color: #E4B96A; }
#season-slider {
  -webkit-appearance: none; appearance: none;
  width: 130px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, #7E97A5, rgba(255,255,255,.28) 45%, #D8B56B);
  outline: none; cursor: ew-resize; margin: 0;
}
#season-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 15px; height: 15px; border-radius: 50%;
  background: #241C15; border: 1.5px solid #E4C87E;
  box-shadow: 0 1px 6px rgba(0,0,0,.45); cursor: ew-resize;
}
#season-slider::-moz-range-thumb {
  width: 13px; height: 13px; border-radius: 50%;
  background: #241C15; border: 1.5px solid #E4C87E;
  box-shadow: 0 1px 6px rgba(0,0,0,.45); cursor: ew-resize;
}
/* 夏季模式的整体色调微调 */
body.summer .tb-logo { color: #D9E8D2; }
body.summer #hall-indicator { color: rgba(222,238,214,.85); }
@media (max-width: 640px) {
  #season-slider { width: 72px; }
  #season-ctrl { padding: 4px 8px; gap: 6px; }
  .seas-ic { font-size: 12px; }
}

/* ---------- 长卷画布 ---------- */
#viewer { position: absolute; inset: 0; background: #EFE7D8; }

/* ---------- 热点 ---------- */
.hs-dot {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: #FBF7F0; border: 1.5px solid rgba(251,247,240,.9);
  box-shadow: 0 2px 8px rgba(62,39,35,.45); position: relative; cursor: pointer;
  transition: transform .25s;
}
.hs-dot:hover { transform: scale(1.18); }
.hs-dot::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 1.5px solid var(--hc, #C09A5E); opacity: .55;
  animation: hs-breathe 2.6s ease-in-out infinite;
}
@keyframes hs-breathe {
  0%, 100% { transform: scale(.82); opacity: .55; }
  50% { transform: scale(1.12); opacity: .12; }
}
.hs-label {
  background: rgba(251,247,240,.94); border: 1px solid #C09A5E; border-radius: 2px;
  color: #4E342E; font-size: 14px; letter-spacing: .12em; padding: 4px 10px;
  box-shadow: 0 2px 8px rgba(62,39,35,.28); cursor: pointer; white-space: nowrap;
  transition: transform .25s, background .25s;
}
.hs-label::after { content: " ⓘ"; color: #C09A5E; font-size: 11px; }
.hs-label:hover { transform: scale(1.08); background: #F3EBDD; }

/* ---------- 街头张贴（彩蛋 + 装饰） ---------- */
.street-paste {
  position: relative; white-space: nowrap; cursor: pointer;
  font-size: calc(15px * var(--pscale, 1)); letter-spacing: .14em;
  padding: calc(5px * var(--pscale, 1)) calc(14px * var(--pscale, 1));
  box-shadow: 0 3px 10px rgba(62,39,35,.30);
  transition: transform .25s, filter .25s;
  font-family: "Noto Serif SC","Songti SC","STSong","SimSun",serif;
}
.street-paste:hover { transform: scale(1.07) rotate(0deg) !important; filter: brightness(1.06); }
.street-paste.paste-deco { cursor: default; pointer-events: none; }
.street-paste::after { content: ""; }
.street-paste.clickable::after {
  content: "彩"; position: absolute; top: calc(-9px * var(--pscale, 1)); right: calc(-9px * var(--pscale, 1));
  width: calc(17px * var(--pscale, 1)); height: calc(17px * var(--pscale, 1));
  border-radius: 50%; background: #C09A5E; color: #FBF7F0;
  font-size: calc(10px * var(--pscale, 1));
  display: flex; align-items: center; justify-content: center; letter-spacing: 0;
  box-shadow: 0 1px 4px rgba(62,39,35,.4); animation: hs-breathe 2.6s ease-in-out infinite;
}
/* 红底横幅 */
.paste-banner {
  background: linear-gradient(180deg, #A93828, #8C2F22); color: #F8E9C8;
  border: 1px solid #7A271C; border-radius: 2px;
}
/* 牛皮癣小广告：白纸黑字虚线边 */
.paste-ad {
  background: rgba(252,250,244,.96); color: #3E2723;
  border: 1px dashed #8D6E63; border-radius: 1px; font-size: 13px;
}
/* 路牌：绿底白字 */
.paste-road {
  background: linear-gradient(180deg, #1F5C46, #17493A); color: #F3F0E4;
  border: 2px solid #E9E4D2; border-radius: 4px; padding: 6px 16px;
}
/* 小狗名牌：木牌 */
.paste-tag {
  background: linear-gradient(180deg, #C8A15C, #B08A48); color: #3E2723;
  border: 1px solid #8D6E3C; border-radius: 9px; font-size: 12px; padding: 3px 10px;
}
/* 数据卡里的数字阵列 */
.snums { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; margin: 10px 0 12px; }
.snum {
  background: #F3EBDD; border: 1px solid #D7CCC8; border-radius: 3px;
  padding: 8px 10px; display: flex; flex-direction: column; gap: 3px;
}
.snum b { font-size: 17px; color: #5D4037; letter-spacing: .02em; }
.snum span { font-size: 11px; line-height: 1.55; color: #6D4C41; }

/* ---------- 底部迷你长卷 ---------- */
#minimap-wrap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 40;
  padding: 8px 14px 12px; pointer-events: none;
}
#minimap {
  position: relative; pointer-events: auto;
  border: 1px solid rgba(255,255,255,.16); border-radius: 8px; overflow: hidden;
  box-shadow: 0 6px 22px rgba(20,15,11,.28); background: rgba(20,15,11,.6);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  height: 44px; cursor: pointer;
}
#minimap img { width: 100%; height: 100%; object-fit: fill; display: block; opacity: .88; user-select: none; }
#minimap-segments { position: absolute; inset: 0; display: flex; }
.seg { position: relative; border-right: 1px dashed rgba(255,255,255,.22); }
.seg:last-child { border-right: none; }
.seg span {
  position: absolute; left: 6px; top: 50%; transform: translateY(-50%);
  font-size: 10px; letter-spacing: .18em; color: rgba(243,237,226,.85);
  background: rgba(20,15,11,.62); padding: 1px 5px; border-radius: 3px;
  pointer-events: none;
}
#minimap-viewport {
  position: absolute; top: 0; bottom: 0; border: 1.5px solid #E4C87E;
  background: rgba(228,200,126,.14); border-radius: 3px; pointer-events: none;
  transition: left .12s linear, width .12s linear;
}

/* ---------- 手势提示 ---------- */
#hint {
  position: absolute; bottom: 72px; left: 50%; transform: translateX(-50%);
  background: rgba(20,15,11,.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(243,237,226,.92); font-size: 12.5px; letter-spacing: .12em;
  padding: 9px 20px; border-radius: 999px; z-index: 45; opacity: 0;
  transition: opacity .6s; pointer-events: none; white-space: nowrap;
}
#hint.show { opacity: 1; }

/* ---------- L2 数据卡 ---------- */
#card-mask {
  position: fixed; inset: 0; z-index: 50; background: rgba(20,16,16,.28);
  opacity: 0; pointer-events: none; transition: opacity .35s;
}
#card-mask.open { opacity: 1; pointer-events: auto; }
#card {
  position: fixed; z-index: 55; left: 50%; bottom: 0;
  width: min(560px, 100%); max-height: 72vh; overflow-y: auto;
  transform: translate(-50%, 105%); transition: transform .45s cubic-bezier(.22,.9,.3,1);
  background: #FCFAF5; border: 1px solid rgba(62,39,35,.12); border-bottom: none;
  border-radius: 18px 18px 0 0; box-shadow: 0 -12px 48px rgba(30,20,14,.28);
  padding: 10px 24px 22px;
}
#card.open { transform: translate(-50%, 0); }
.card-handle { width: 36px; height: 3px; border-radius: 2px; background: rgba(62,39,35,.2); margin: 2px auto 12px; }
.card-head { display: flex; align-items: center; gap: 8px; }
.card-type { font-size: 10.5px; letter-spacing: .18em; color: #8D6E63; background: none; border: 1px solid rgba(141,110,99,.45); padding: 3px 10px; border-radius: 999px; }
.card-hall { font-size: 11px; letter-spacing: .15em; color: #A1887F; }
.card-close { margin-left: auto; border: none; background: none; font-size: 24px; color: #A1887F; line-height: 1; }
.card-close:hover { color: #3E2723; }
#card h2 { font-size: 21px; margin-top: 12px; letter-spacing: .04em; color: #3E2723; }
.card-subtitle { font-size: 12.5px; color: #A1887F; margin-top: 4px; letter-spacing: .08em; }
.card-body { font-size: 14.5px; line-height: 1.9; margin-top: 12px; color: #4E342E; }
.card-body p + p { margin-top: 8px; }
.card-body .lead { font-size: 15.5px; color: #3E2723; }
#card-media { margin-top: 14px; }
#card-media img { width: 100%; border: 1px solid #D7CCC8; border-radius: 3px; display: block; }
.audio-btn {
  display: inline-flex; align-items: center; gap: 10px; width: 100%;
  background: none; border: 1px solid rgba(93,64,55,.5); border-radius: 999px;
  padding: 11px 18px; font-size: 13.5px; color: #5D4037; letter-spacing: .1em;
  transition: background .3s, color .3s, border-color .3s;
}
.audio-btn:hover { border-color: #5D4037; background: rgba(93,64,55,.06); }
.audio-btn .a-icon { font-size: 17px; }
.audio-btn.playing { background: #241C15; border-color: #241C15; color: #F3EDE2; }
.vote-wrap { display: flex; flex-direction: column; gap: 10px; }
.vote-btns { display: flex; gap: 10px; }
.vote-btn {
  flex: 1; padding: 12px 8px; font-size: 14px; letter-spacing: .06em;
  border: 1px solid rgba(93,64,55,.55); border-radius: 999px; background: none; color: #5D4037;
  transition: background .25s, color .25s, border-color .25s;
}
.vote-btn:hover { border-color: #3E2723; background: rgba(93,64,55,.07); }
.vote-btn.voted { background: #241C15; border-color: #241C15; color: #F3EDE2; }
.vote-bar { height: 30px; display: flex; border-radius: 3px; overflow: hidden; border: 1px solid #D7CCC8; font-size: 12px; }
.vote-bar > div { display: flex; align-items: center; padding: 0 8px; transition: width .6s ease; white-space: nowrap; overflow: hidden; }
.vb-a { background: #5D4037; color: #F3EBDD; }
.vb-b { background: #D7CCC8; color: #4E342E; }
.vote-meta { font-size: 11.5px; color: #A1887F; letter-spacing: .06em; }
.note-slip {
  background: #FFF8E1; border-left: 4px solid #C09A5E; padding: 14px 16px;
  font-size: 15px; line-height: 1.9; color: #4E342E; border-radius: 0 4px 4px 0;
  box-shadow: 0 2px 6px rgba(62,39,35,.12); transform: rotate(-.4deg);
}
.card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 18px; }
.card-badge { font-size: 10.5px; color: #8D6E63; border: 1px dashed #C09A5E; border-radius: 2px; padding: 4px 8px; letter-spacing: .05em; }
#card-expand {
  border: none; background: #241C15; color: #F3EDE2; font-size: 13px;
  letter-spacing: .12em; padding: 10px 20px; border-radius: 999px; transition: background .3s;
  white-space: nowrap;
}
#card-expand:hover { background: #3A2C20; }

/* ---------- L3 详情面板 ---------- */
#detail {
  position: fixed; inset: 0; z-index: 70; background: rgba(20,16,16,.5);
  opacity: 0; pointer-events: none; transition: opacity .4s;
}
#detail.open { opacity: 1; pointer-events: auto; }
.detail-panel {
  position: absolute; inset: 0; margin: auto;
  width: min(720px, 94%); height: min(86vh, 100%);
  background: #FCFAF5; border-radius: 16px; border: 1px solid rgba(62,39,35,.12);
  box-shadow: 0 24px 90px rgba(0,0,0,.42); display: flex; flex-direction: column;
  transform: translateY(24px); transition: transform .4s cubic-bezier(.22,.9,.3,1);
}
#detail.open .detail-panel { transform: translateY(0); }
.detail-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; border-bottom: 1px solid #E7DDD2;
}
#detail-back { border: 1px solid rgba(93,64,55,.5); background: none; color: #5D4037; font-size: 12.5px; padding: 8px 16px; border-radius: 999px; letter-spacing: .1em; }
#detail-back:hover { background: #241C15; border-color: #241C15; color: #F3EDE2; }
#detail-hall { font-size: 12px; color: #A1887F; letter-spacing: .15em; }
.detail-content { padding: 24px 28px 36px; overflow-y: auto; font-size: 14.5px; line-height: 2; color: #4E342E; }
.detail-content h2 { font-size: 24px; color: #3E2723; letter-spacing: .05em; margin-bottom: 4px; }
.detail-content .d-sub { font-size: 12.5px; color: #A1887F; letter-spacing: .1em; margin-bottom: 18px; }
.detail-content h4 {
  font-size: 15px; color: #5D4037; margin: 22px 0 8px; letter-spacing: .1em;
  padding-left: 10px; border-left: 3px solid #C09A5E;
}
.detail-content p { margin-bottom: 8px; }
.detail-content img { width: 100%; border: 1px solid #D7CCC8; border-radius: 3px; margin: 10px 0; }
.detail-content .d-badge {
  display: inline-block; font-size: 11px; color: #8D6E63; border: 1px dashed #C09A5E;
  border-radius: 2px; padding: 4px 10px; margin-top: 14px; letter-spacing: .06em;
}
.detail-content table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 13.5px; }
.detail-content th, .detail-content td { border: 1px solid #D7CCC8; padding: 8px 10px; text-align: left; }
.detail-content th { background: #F3EBDD; color: #5D4037; letter-spacing: .08em; }
.detail-content ul { padding-left: 22px; }
.detail-content li { margin-bottom: 6px; }

/* ---------- 响应式 ---------- */
@media (max-width: 640px) {
  .tb-logo { display: none; }
  .tb-divider { display: none; }
  #minimap-wrap { padding: 6px 8px 10px; }
  #minimap { height: 36px; }
  .seg span { font-size: 9px; left: 3px; letter-spacing: .05em; }
  #card { max-height: 78vh; }
  .detail-content { padding: 18px 18px 30px; }
}

/* ================= 街道牌匾层（v1.3 实测对齐版） ================= */
/* 对齐原理：--pz = 屏幕像素/画卷像素（app.js 随 zoom/pan 实时更新），
   字号 = --pz × --f（板宽÷字数推得的画卷像素字高），padding/边框/圆角全用 em ——
   整块牌匾与画面同比例缩放，任何缩放级别都严丝合缝贴在画中招牌上。
   季节明暗：body 上的 --sv（0=冬 → 1=夏）连续驱动
   东北系冬天鲜亮、夏天灰暗歇业；海南系相反；其他四季常在 */
.plaque {
  white-space: nowrap; cursor: default; pointer-events: none; position: relative;
  font-family: "Noto Serif SC","Songti SC","STSong","SimSun",serif;
  font-size: calc(var(--pz, .85) * var(--f, 28) * 1px);
  font-weight: 700; letter-spacing: .08em; line-height: 1.3;
  padding: .16em .42em; border-radius: .1em;
  border: .07em solid transparent;
  box-shadow: 0 .1em .3em rgba(25,15,10,.36), inset 0 0 0 .04em rgba(255,235,200,.12);
  transform: rotate(calc(var(--rot, 0deg) + var(--rotj, 0deg)));
  transition: opacity .5s, filter .5s;
}
/* 文字层：深底匾额走「贴金」渐变字；浅底招牌继承牌面实色 */
.plaque .pt { position: relative; }
/* 两行匾：长店名折行，更贴宽短画板 */
.plaque.two { padding: .1em .34em; }
.plaque.two .pt { display: block; text-align: center; line-height: 1.28; }
.sty-wood .pt, .sty-red .pt, .sty-gold .pt, .sty-paifang .pt, .sty-band .pt, .sty-vert .pt {
  background-image: linear-gradient(168deg, #F0DFA4 0%, #E3C477 30%, #B8934A 50%, #EAD28E 64%, #CDB067 82%, #A5833F 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 .05em .025em rgba(0,0,0,.5));
}
/* 传统匾额（木/黑/石/楣/竖）用楷体，现代灯箱布幅用黑体 */
.sty-wood, .sty-gold, .sty-paifang, .sty-band, .sty-vert {
  font-family: "KaiTi","STKaiti","Kaiti SC","TW-Kai","Noto Serif SC","Songti SC",serif; }
.sty-light, .sty-busad, .sty-aframe {
  font-family: "Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif; }
.sty-tent { font-family: "Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif; font-weight: 900; }

/* 匾式（牌面 = 材质纹理(可平铺 PNG, overlay 混合) + 漆色渐变） */
/* 深色木匾·金字 */
.sty-wood   { background-image: url("../assets/tex-wood.png"), linear-gradient(180deg,#6b4a33,#503422 55%,#402818);
              background-size: 9em 9em, 100% 100%; background-blend-mode: overlay, normal;
              color: #EAC97E; border-color: #2a1a10;
              text-shadow: 0 -.06em 0 rgba(20,10,5,.75), 0 .04em .06em rgba(255,230,170,.3);
              box-shadow: 0 .12em .34em rgba(25,15,10,.5), inset 0 0 0 .07em rgba(232,201,126,.38), inset 0 .12em .28em rgba(0,0,0,.35); }
/* 红漆匾·金字 */
.sty-red    { background-image: url("../assets/tex-lacq.png"), linear-gradient(180deg,#a63a2a,#822315 60%,#6e1c10);
              background-size: 8em 8em, 100% 100%; background-blend-mode: overlay, normal;
              color: #F5DA8C; border-color: #551209;
              text-shadow: 0 -.05em 0 rgba(60,10,5,.7), 0 .03em .05em rgba(255,225,160,.3);
              box-shadow: 0 .12em .34em rgba(25,15,10,.48), inset 0 0 0 .06em rgba(245,218,140,.42), inset 0 .1em .24em rgba(0,0,0,.3); }
/* 黑底金字框匾（老号/集市口）：漆面板＋内描金框 */
.sty-gold   { background-image: url("../assets/tex-lacq.png"), linear-gradient(180deg,#2b2016,#1c130c);
              background-size: 8em 8em, 100% 100%; background-blend-mode: overlay, normal;
              color: #E8C87E; border-color: #0f0a06;
              text-shadow: 0 -.05em 0 rgba(0,0,0,.8), 0 .03em .06em rgba(255,230,170,.28); }
.sty-gold::before { content: ""; position: absolute; inset: .13em; pointer-events: none;
              border: .05em solid rgba(232,200,126,.6); border-radius: .05em; }
/* 牌坊匾·青石底金字 */
.sty-paifang{ background-image: url("../assets/tex-stone.png"), linear-gradient(180deg,#2a5468,#1d3d4d);
              background-size: 9em 9em, 100% 100%; background-blend-mode: overlay, normal;
              color: #F0D189; border-color: #12242e;
              text-shadow: 0 -.05em 0 rgba(8,18,24,.85), 0 .03em .06em rgba(255,235,180,.3); }
.sty-paifang::before { content: ""; position: absolute; inset: .13em; pointer-events: none;
              border: .05em solid rgba(240,209,137,.5); border-radius: .05em; }
/* 灯箱招牌：做旧亚克力＋弱透光 */
.sty-light  { background: linear-gradient(180deg,#F0E7D2,#E3D5B6 62%,#D6C5A0);
              color: #3B4750; border-color: #A2926F; font-weight: 800;
              box-shadow: inset 0 0 .18em rgba(255,250,235,.8), inset 0 -.14em .3em rgba(180,158,110,.4),
                          0 0 .3em rgba(255,244,200,.28), 0 .1em .28em rgba(30,20,15,.3); }
/* 门楣长条 */
.sty-band   { background-image: url("../assets/tex-wood.png"), linear-gradient(180deg,rgba(72,50,34,.97),rgba(56,38,26,.97));
              background-size: 9em 9em, 100% 100%; background-blend-mode: overlay, normal;
              color: #EFD9A0; border-color: #2c1c12; letter-spacing: .12em;
              text-shadow: 0 -.05em 0 rgba(20,10,5,.7), 0 .03em .05em rgba(255,230,170,.25); }
/* 白底红字（招租/告示）：纸纹 */
.sty-banner { background-image: url("../assets/tex-noise.png"), linear-gradient(180deg,#f7f2e6,#e9dfcb);
              background-size: 7em 7em, 100% 100%; background-blend-mode: overlay, normal;
              color: #B3341F; border-color: #B3341F;
              font-weight: 800; box-shadow: 0 .08em .24em rgba(30,20,15,.3); }
/* 竖匾：木牌＋上下冒头 */
.sty-vert   { background-image: url("../assets/tex-wood.png"), linear-gradient(90deg,#4c382a,#33241a);
              background-size: 9em 9em, 100% 100%; background-blend-mode: overlay, normal;
              color: #E8C97E; border-color: #241a12;
              writing-mode: vertical-rl; padding: .42em .16em; letter-spacing: .16em;
              text-shadow: 0 -.05em 0 rgba(15,8,4,.7); }
.sty-vert::before, .sty-vert::after {
              content: ""; position: absolute; left: -.16em; right: -.16em; height: .2em;
              background: linear-gradient(180deg,#5a4232,#2e2016); border-radius: .06em;
              box-shadow: 0 .05em .12em rgba(0,0,0,.4); pointer-events: none; }
.sty-vert::before { top: -.18em; }
.sty-vert::after  { bottom: -.18em; }
/* 帐篷布幅·褪红布米白字＋缝线 */
.sty-tent   { background-image: url("../assets/tex-fabric.png"), linear-gradient(180deg,#A05A48,#86483A);
              background-size: 6em 6em, 100% 100%; background-blend-mode: overlay, normal;
              color: #F2E8D6; border-color: #6B352B; border-radius: .04em;
              letter-spacing: .1em; text-shadow: 0 .04em .06em rgba(80,25,15,.45);
              box-shadow: 0 .08em .24em rgba(25,15,10,.34); }
.sty-tent::before { content: ""; position: absolute; inset: .14em; pointer-events: none;
              border: .05em dashed rgba(242,232,214,.4); border-radius: .03em; }
/* A字立牌 */
.sty-aframe { background-image: url("../assets/tex-noise.png"), linear-gradient(180deg,#f8f3e6,#ece1c8);
              background-size: 7em 7em, 100% 100%; background-blend-mode: overlay, normal;
              color: #8C2F22; border-color: #8a6f4d;
              font-weight: 800; box-shadow: .12em .14em .3em rgba(30,20,15,.4); }
/* 公交站广告灯箱 */
.sty-busad  { background: linear-gradient(180deg,#fdf9ee,#efe3c8); color: #20506e; border-color: #9db2bc;
              box-shadow: inset 0 0 .18em rgba(255,255,250,.9),
                          0 0 .34em rgba(230,244,252,.5), 0 .1em .3em rgba(30,20,15,.3); }
/* 宣传栏（可点）：木框告示板 */
.sty-board  { background-image: url("../assets/tex-wood.png"), linear-gradient(180deg,#f4ecd8,#e6d9ba);
              background-size: 9em 9em, 100% 100%; background-blend-mode: soft-light, normal;
              color: #4E342E; border-color: #6d4c33; border-width: .1em;
              box-shadow: 0 .1em .32em rgba(25,15,10,.42), inset 0 0 0 .07em rgba(109,76,51,.35); }

/* 阵营季节明暗（--bri 为每块匾的个体差异亮度，来自名字散列） */
.camp-ne    { opacity: calc(1 - var(--sv, 0) * .58);
              filter: grayscale(calc(var(--sv, 0) * .8)) brightness(calc((1 - var(--sv, 0) * .12) * var(--bri, 1))); }
.camp-local { opacity: calc(.82 + var(--sv, 0) * .18);
              filter: grayscale(calc(.3 - var(--sv, 0) * .3)) brightness(calc((.95 + var(--sv, 0) * .05) * var(--bri, 1))); }
.camp-mid   { opacity: .92; filter: grayscale(calc(var(--sv, 0) * .18)) brightness(var(--bri, 1)); }

/* 可点击招牌＝牌匾＋金色信息角标 */
.hs-plaque { pointer-events: auto; cursor: pointer; position: relative;
             transition: opacity .5s, filter .5s, transform .2s; }
.hs-plaque::after {
  content: "ⓘ"; position: absolute; top: -.62em; right: -.5em;
  font-size: .42em; width: 1.7em; height: 1.7em; border-radius: 50%;
  background: #C09A5E; color: #FBF7F0; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 .1em .3em rgba(62,39,35,.5); animation: hs-breathe 2.6s ease-in-out infinite;
}
.hs-plaque:hover { filter: brightness(1.16); z-index: 5; }

/* ---------- 人物志：圆形姓氏徽章（固定屏幕尺寸，标注画中人） ---------- */
.hs-folk {
  width: 36px; height: 36px; border-radius: 50%; position: relative; cursor: pointer;
  background: rgba(251,247,240,.95); color: #5D4037; border: 2px solid #C09A5E;
  font-family: "Noto Serif SC","Songti SC","STSong","SimSun",serif;
  font-size: 16px; font-weight: 800; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 9px rgba(62,39,35,.45); transition: transform .25s, opacity .5s, filter .5s;
}
.hs-folk::after {
  content: ""; position: absolute; inset: -7px; border-radius: 50%;
  border: 1.5px solid #C09A5E; opacity: .55; pointer-events: none;
  animation: hs-breathe 2.6s ease-in-out infinite;
}
.hs-folk i {
  position: absolute; top: 40px; left: 50%; transform: translateX(-50%);
  font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .08em; white-space: nowrap;
  background: rgba(62,39,35,.88); color: #F2D98B; padding: 2px 8px; border-radius: 8px;
  pointer-events: none;
}
.hs-folk:hover { transform: scale(1.16); }

/* ---------- 方言词卡：词钉（东北系朱红、海南系青绿，随 --pz 与画面同步缩放） ---------- */
.hs-word {
  position: relative; cursor: pointer; pointer-events: auto; white-space: nowrap;
  font-family: "Noto Serif SC","Songti SC","STSong","SimSun",serif;
  font-size: calc(var(--pz, .85) * var(--f, 28) * 1px);
  font-weight: 800; letter-spacing: .1em; line-height: 1.25;
  padding: .14em .5em .18em; border-radius: .55em; color: #FBF7F0;
  border: .055em solid rgba(251,247,240,.65);
  box-shadow: 0 .1em .34em rgba(25,15,10,.45), inset 0 0 0 .035em rgba(255,240,215,.14);
  transform: rotate(var(--rotj, 0deg));
  transition: opacity .5s, filter .5s;
}
.hs-word.lang-ne { background-image: url("../assets/tex-fabric.png"), linear-gradient(180deg,#A05A44 0%,#8A4A38 60%,#77402F 100%);
  background-size: 5em 5em, 100% 100%; background-blend-mode: overlay, normal; }
.hs-word.lang-hn { background-image: url("../assets/tex-fabric.png"), linear-gradient(180deg,#54705F 0%,#435E4E 60%,#395043 100%);
  background-size: 5em 5em, 100% 100%; background-blend-mode: overlay, normal; }
.hs-word::after {
  content: ""; position: absolute; inset: -.16em; border-radius: .75em; pointer-events: none;
  border: .045em solid rgba(251,247,240,.55); opacity: .5;
  animation: hs-breathe 2.6s ease-in-out infinite;
}
.hs-word i {
  position: absolute; top: calc(100% + .22em); left: 50%; transform: translateX(-50%);
  font-style: normal; font-size: .38em; font-weight: 700; letter-spacing: .05em; white-space: nowrap;
  background: rgba(62,39,35,.88); color: #F2D98B; padding: .18em .7em; border-radius: .6em;
  pointer-events: none;
}
.hs-word:hover { filter: brightness(1.16); z-index: 5; }

/* ---------- 详情组件：日程时间轴 / 忧愁清单 ---------- */
.day-tl { margin: 10px 0 4px; border-left: 3px solid #C09A5E; padding-left: 0; }
.day-tl .dt-i { position: relative; padding: 0 0 12px 18px; }
.day-tl .dt-i::before {
  content: ""; position: absolute; left: -7.5px; top: 5px; width: 12px; height: 12px;
  border-radius: 50%; background: #C09A5E; border: 2px solid #FBF7F0;
  box-shadow: 0 0 0 1.5px #C09A5E;
}
.day-tl b { color: #5D4037; font-size: 15px; letter-spacing: .06em; }
.day-tl p { margin: 3px 0 0; font-size: 13.5px; line-height: 1.75; color: #5a4a42; }
.worry-li .w-i {
  margin: 0 0 12px; padding: 10px 14px; background: rgba(192,154,94,.1);
  border: 1px solid rgba(192,154,94,.4); border-radius: 6px;
}
.worry-li b { color: #5D4037; font-size: 14.5px; }
.worry-li p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.75; color: #5a4a42; }
.worry-li .w-sol { color: #4E6E5D; font-weight: 600; }

/* ================= 首屏长卷段（100vh，下面接竖向内容） ================= */
#hero { position: relative; height: 100vh; height: 100dvh; overflow: hidden; background: #EFE7D8; }

/* 继续下滑按钮 */
#down-btn {
  position: absolute; bottom: 118px; left: 50%; transform: translateX(-50%);
  z-index: 45; border: 1px solid rgba(255,255,255,.16); border-radius: 999px;
  background: rgba(20,15,11,.6); color: rgba(243,237,226,.85); font-size: 12px; letter-spacing: .14em;
  padding: 9px 22px; cursor: pointer; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  animation: downBob 2.2s ease-in-out infinite; white-space: nowrap;
  transition: border-color .2s, color .2s;
}
#down-btn:hover { border-color: rgba(232,207,143,.55); color: #F2D98B; }
@keyframes downBob { 0%,100% { transform: translate(-50%,0); } 50% { transform: translate(-50%,7px); } }
@media (prefers-reduced-motion: reduce) { #down-btn { animation: none; } }

/* ================= 竖向段落通用 ================= */
#below { position: relative; z-index: 10; background: #FBF7F0; }
.section { max-width: 1080px; margin: 0 auto; padding: 72px 22px 40px; }
.sec-kicker { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.sec-kicker::after { content: ""; height: 2px; width: 54px; background: #C09A5E; }
.sec-kicker span { color: #C09A5E; font-size: 13px; letter-spacing: .3em; font-weight: 700; }
.sec-title { font-size: 30px; color: #3E2723; margin: 0 0 14px; font-weight: 700;
             font-family: "Noto Serif SC","Songti SC","STSong","SimSun",serif; }
.sec-lead { font-size: 15.5px; line-height: 2; color: #4E342E; max-width: 46em; }

/* v2.1 策展人的话：中英双栏自述卡 */
.story-card { background: #fff; border: 1px solid #D7CCC8; border-radius: 14px;
              padding: 30px 30px 22px; margin-top: 26px; position: relative; }
.story-card::before { content: ""; position: absolute; left: 0; top: 24px; bottom: 24px;
                      width: 4px; border-radius: 2px; background: #C09A5E; }
.story-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 28px; }
.story-cn p, .story-en p { font-size: 14.5px; line-height: 2; color: #4E342E; margin: 0 0 14px; }
.story-cn p:first-child::first-letter { font-size: 26px; color: #8D6E63; font-weight: 700; }
.story-en { border-left: 1px dashed #D7CCC8; padding-left: 28px; }
.story-en p { font-size: 13px; color: #6D5C50; font-style: italic; }
.story-lang { font-size: 11.5px; letter-spacing: .2em; color: #C09A5E; font-weight: 700; margin-bottom: 10px; }
.story-sign { margin-top: 8px; padding-top: 14px; border-top: 1px solid #EFEBE0;
              font-size: 13px; color: #8D6E63; }
.story-sign b { color: #3E2723; }
@media (max-width: 760px) {
  .story-grid { grid-template-columns: 1fr; }
  .story-en { border-left: none; border-top: 1px dashed #D7CCC8; padding-left: 0; padding-top: 20px; }
}

/* 研究三步法 */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 30px 0 8px; }
.step { background: #F3EBDD; border: 1px solid #D7CCC8; border-radius: 12px; padding: 20px 18px; }
.step b { display: block; color: #5D4037; font-size: 16px; margin-bottom: 8px; }
.step p { font-size: 13.5px; line-height: 1.85; color: #4E342E; margin: 0; }
.step .step-out { margin-top: 10px; font-size: 12px; color: #8D6E63; }

/* 五步论点链 */
.chain { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 6px; }
.chain span { background: #fff; border: 1px solid #D7CCC8; border-radius: 20px; padding: 8px 16px;
              font-size: 13.5px; color: #5D4037; font-weight: 600; }
.chain i { color: #C09A5E; font-style: normal; align-self: center; }

/* 数据图陈列块 */
.chartblock { background: #fff; border: 1px solid #D7CCC8; border-radius: 14px;
              padding: 26px 26px 18px; margin: 26px 0; }
.chartblock h3 { margin: 0 0 4px; font-size: 19px; color: #3E2723;
                 font-family: "Noto Serif SC","Songti SC","STSong","SimSun",serif; }
.chartblock .cb-thesis { font-size: 13px; color: #8D6E63; margin-bottom: 14px; }
.chartblock img { width: 100%; max-width: 760px; display: block; margin: 0 auto;
                  border: 1px solid #E4D8C8; border-radius: 8px; }
.chartblock .cb-src { font-size: 12px; color: #8D6E63; margin-top: 12px; line-height: 1.8; }
.cb-todo { border: 1.5px dashed #C09A5E; border-radius: 10px; padding: 26px 22px; background: #FDF9F1;
           font-size: 13.5px; line-height: 1.9; color: #5D4037; }
.cb-todo b { color: #3E2723; }

/* 数据说明折叠区 */
details.datanote { background: #F3EBDD; border: 1px solid #D7CCC8; border-radius: 12px;
                   padding: 14px 20px; margin: 26px 0 10px; font-size: 13px; color: #4E342E; }
details.datanote summary { cursor: pointer; font-weight: 700; color: #5D4037; font-size: 14px; }
details.datanote ul { margin: 10px 0 4px; padding-left: 20px; line-height: 2; }

/* 旅居手册 */
.guide-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 26px; }
.gcard { background: #F3EBDD; border: 1px solid #D7CCC8; border-radius: 12px; padding: 20px 18px;
         font-size: 13.5px; line-height: 1.9; color: #4E342E; }
.gcard h4 { margin: 0 0 8px; font-size: 16px; color: #3E2723;
            font-family: "Noto Serif SC","Songti SC","STSong","SimSun",serif; }
.gcard .g-need { color: #8D6E63; font-size: 12.5px; display: block; margin-bottom: 8px; }
.gcard b { color: #5D4037; }

/* 三条建议 */
.advice { counter-reset: adv; margin-top: 10px; }
.advice li { list-style: none; margin: 14px 0; padding: 16px 18px 16px 58px; position: relative;
             background: #fff; border: 1px solid #D7CCC8; border-radius: 12px;
             font-size: 14px; line-height: 1.9; color: #4E342E; }
.advice li::before { counter-increment: adv; content: counter(adv);
  position: absolute; left: 16px; top: 16px; width: 28px; height: 28px; border-radius: 50%;
  background: #5D4037; color: #F2D98B; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px; }

/* 宣言收尾 */
.manifesto { text-align: center; padding: 80px 22px 90px; background: #3E2723; color: #F3EBDD; }
.manifesto .m-line { font-size: 24px; font-weight: 700; letter-spacing: .1em; margin-bottom: 14px;
                     font-family: "Noto Serif SC","Songti SC","STSong","SimSun",serif; }
.manifesto .m-sub { font-size: 13.5px; color: #C09A5E; letter-spacing: .2em; margin-bottom: 30px; }
.manifesto button { background: transparent; border: 1px solid #C09A5E; color: #F2D98B;
                    border-radius: 22px; padding: 10px 26px; font-size: 14px; letter-spacing: .14em;
                    cursor: pointer; margin: 0 6px; }
.manifesto button:hover { background: rgba(192,154,94,.15); }

/* 滚入浮现 */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

@media (max-width: 760px) {
  .steps, .guide-grid { grid-template-columns: 1fr; }
  .sec-title { font-size: 24px; }
  .section { padding: 52px 16px 28px; }
  .chartblock { padding: 16px 14px 12px; }
  #down-btn { bottom: 108px; font-size: 12px; padding: 8px 16px; }
}

/* ============ v1.2 全景版新增组件 ============ */

/* 语言景观学五动作 */
.ll-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin:26px 0 8px; }
.ll-card { background:#fff; border:1px solid #D7CCC8; border-radius:12px; padding:18px 16px; position:relative; }
.ll-card .ll-no { display:inline-block; font-size:12px; letter-spacing:1px; color:#C09A5E; border:1px solid #C09A5E; border-radius:999px; padding:2px 9px; margin-bottom:10px; }
.ll-card b { display:block; font-size:16px; color:#4E342E; margin-bottom:8px; }
.ll-card p { margin:0; font-size:13.5px; line-height:1.7; color:#6D4C41; }

/* 语言接触引语卡 */
.quoteblock { background:#fff; border-left:4px solid #C09A5E; border-radius:0 12px 12px 0; padding:20px 24px; margin:16px 0; box-shadow:0 2px 10px rgba(78,52,46,.06); }
.quoteblock .q-big { margin:0 0 8px; font-size:19px; line-height:1.6; color:#3E2723; font-weight:700; }
.quoteblock .q-sub { margin:0; font-size:13.5px; line-height:1.7; color:#795548; }
.ll-note { margin:18px 0 4px; font-size:13.5px; line-height:1.8; color:#795548; background:#F5EFE6; border:1px dashed #C09A5E; border-radius:10px; padding:12px 16px; }

/* 方言词表 */
.wordgrid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:14px; }
.wchip { background:#fff; border:1px solid #D7CCC8; border-radius:10px; padding:10px 12px; display:flex; flex-direction:column; gap:3px; }
.wchip b { font-size:16px; color:#4E342E; }
.wchip i { font-style:normal; font-size:12px; color:#8D6E63; }

/* 时间轴（简史 / 医保） */
.tl { margin:22px 0 6px; border-left:2px solid #D7CCC8; padding-left:0; }
.tl-item { display:flex; gap:18px; padding:0 0 26px 0; position:relative; }
.tl-item::before { content:""; position:absolute; left:-6px; top:6px; width:10px; height:10px; border-radius:50%; background:#C09A5E; border:2px solid #FBF7F0; }
.tl-year { flex:0 0 74px; text-align:right; font-weight:700; color:#5D4037; font-size:14px; padding-top:2px; margin-left:14px; }
.tl-item > div { flex:1; background:#fff; border:1px solid #D7CCC8; border-radius:10px; padding:12px 16px; }
.tl-item b { display:block; font-size:15px; color:#4E342E; margin-bottom:5px; }
.tl-item p { margin:0; font-size:13.5px; line-height:1.7; color:#6D4C41; }

/* 候鸟面孔 */
.face-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:16px; }
.face { background:#fff; border:1px solid #D7CCC8; border-radius:12px; padding:18px 16px; }
.face .f-ava { display:flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:50%; background:#5D4037; color:#FBF7F0; font-size:22px; font-weight:700; margin-bottom:12px; }
.face b { display:block; font-size:15px; color:#4E342E; margin-bottom:8px; }
.face p { margin:0 0 10px; font-size:13px; line-height:1.7; color:#6D4C41; }
.face .f-src { font-size:11.5px; color:#A1887F; }

/* 方言测试 */
.quiz { background:#fff; border:1px solid #D7CCC8; border-radius:14px; padding:22px 22px 14px; }
.q { padding:14px 0; border-bottom:1px dashed #E0D6CE; }
.q:last-of-type { border-bottom:none; }
.q-t { margin:0 0 10px; font-size:15px; color:#3E2723; }
.q-t b { display:inline-block; background:#5D4037; color:#FBF7F0; border-radius:6px; padding:1px 8px; font-size:12.5px; margin-right:10px; }
.q-opts { display:flex; flex-wrap:wrap; gap:8px; }
.q-opt { border:1px solid #D7CCC8; background:#FBF7F0; color:#4E342E; border-radius:999px; padding:7px 16px; font-size:13.5px; cursor:pointer; transition:all .18s; }
.q-opt:hover { border-color:#C09A5E; }
.q-opt.right { background:#4E6E5D; border-color:#4E6E5D; color:#fff; }
.q-opt.wrong { background:#B0563E; border-color:#B0563E; color:#fff; opacity:.85; }
.q-opt:disabled { cursor:default; }
.q-fb { margin:8px 0 0; font-size:13px; line-height:1.7; color:#795548; min-height:0; }
.q-score { margin:14px 0 4px; font-size:15px; font-weight:700; color:#5D4037; }

/* 温差计算器 */
.calc { background:#fff; border:1px solid #D7CCC8; border-radius:14px; padding:22px; margin-top:18px; }
.calc-q { margin:0 0 12px; font-size:17px; font-weight:700; color:#3E2723; }
.calc-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.calc-row label { font-size:13.5px; color:#795548; }
.calc-row select { border:1px solid #D7CCC8; border-radius:8px; background:#FBF7F0; color:#4E342E; font-size:14px; padding:8px 12px; }
.calc-out { margin:14px 0 6px; font-size:15.5px; line-height:1.7; color:#4E342E; font-weight:700; }
.calc-note { margin:0; font-size:12px; color:#A1887F; }

/* 研究阐述预告 */
.rblock { margin-top:34px; background:#3E2723; color:#F5EFE6; border-radius:14px; padding:26px 28px; }
.rblock .rb-kicker { margin:0 0 6px; font-size:12px; letter-spacing:2px; color:#C09A5E; }
.rblock h3 { margin:0 0 10px; font-size:19px; color:#FBF7F0; }
.rblock p { margin:0; font-size:14px; line-height:1.85; color:#E8DED2; }

@media (max-width:960px) {
  .ll-grid { grid-template-columns:repeat(2,1fr); }
  .face-grid { grid-template-columns:repeat(2,1fr); }
  .wordgrid { grid-template-columns:repeat(3,1fr); }
}
@media (max-width:760px) {
  .ll-grid { grid-template-columns:1fr; }
  .face-grid { grid-template-columns:1fr; }
  .wordgrid { grid-template-columns:repeat(2,1fr); }
  .tl-year { flex-basis:56px; font-size:12.5px; }
  .quoteblock .q-big { font-size:16.5px; }
}


/* ============ 双语层（v1.7）：EN 模式排印 + 中英对照块 ============ */
html[lang="en"] .tb-logo { letter-spacing: .06em; font-size: 13px; }
html[lang="en"] .tb-btn { font-size: 11px; letter-spacing: .04em; }
html[lang="en"] .seas-ic { font-size: 10px; letter-spacing: .02em; font-weight: 600; }
html[lang="en"] #hall-indicator { letter-spacing: .04em; }
html[lang="en"] .intro-hook { font-size: clamp(23px, 4.4vw, 38px); letter-spacing: .03em; }
html[lang="en"] .intro-kicker { letter-spacing: .18em; }
html[lang="en"] #minimap-segments .seg span { letter-spacing: 0; }
#lang-toggle { min-width: 44px; text-align: center; }

/* 卡片内：英文摘要在上，中文原文 dim 于下方（证据保持原貌） */
.cn-orig { margin-top: 14px; padding-top: 10px; border-top: 1px dashed rgba(120, 90, 60, .45); opacity: .78; font-size: 13px; }
.cn-orig > i { display: block; font-style: normal; font-size: 11px; letter-spacing: .1em; color: #8D6E63; margin-bottom: 5px; }
.cn-orig .lead { font-size: 13.5px; }
.cn-orig .note-slip { font-size: 13px; }

/* 详情面板内：中文原文区块 */
.d-cn { margin-top: 22px; padding-top: 14px; border-top: 1px dashed rgba(120, 90, 60, .45); opacity: .85; }
.d-cn > i { display: block; font-style: normal; font-size: 11.5px; letter-spacing: .12em; color: #8D6E63; margin-bottom: 8px; }
.d-cn h3 { font-size: 18px; color: #4E342E; margin: 0 0 4px; letter-spacing: .04em; }

/* ---------- T1 展品展签行：拼音 · 英文 gloss · 阵营 ----------
   EN 模式常显；CN 模式仅可点元素 hover/touch 显现（装饰牌匾中文可读，不打扰）。
   ≤11px 等效、低对比，悬于招牌/词钉下缘，不遮画面主体。 */
.plaque-gloss, .word-gloss {
  position: absolute; top: calc(100% + .3em); left: 50%; transform: translateX(-50%);
  white-space: nowrap; pointer-events: none; z-index: 4;
  font-family: "Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  font-weight: 400; font-style: normal; letter-spacing: .02em; line-height: 1.5;
  font-size: calc(var(--pz, .85) * 12.5px);
  color: rgba(242,232,214,.95); background: rgba(28,20,14,.68);
  padding: .08em .55em; border-radius: .3em;
  opacity: 0; transition: opacity .25s;
}
.word-gloss { top: calc(100% + 1.9em); background: rgba(28,20,14,.6); }
html[lang="en"] .plaque-gloss, html[lang="en"] .word-gloss { opacity: .94; }
.hs-plaque:hover .plaque-gloss, .hs-word:hover .word-gloss { opacity: .96; }

/* ---------- T3 纸片解说贴：做旧便签 + 胶带贴角，随 --pz 缩放 ---------- */
.street-paper {
  position: relative; pointer-events: none;
  font-size: calc(var(--pz, .85) * 13.5px);
  padding: .95em 1em .8em; border-radius: .12em;
  background: linear-gradient(174deg, #F6EED6 0%, #F0E3BF 55%, #E9D8AF 100%);
  color: #4A3A26; font-family: "Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  line-height: 1.55; letter-spacing: .02em; text-align: left;
  box-shadow: 0 .28em .7em rgba(25,15,10,.42), inset 0 0 1.2em rgba(160,125,70,.14);
  transform: rotate(var(--rotj, 0deg));
}
.street-paper .tape {
  position: absolute; top: -.6em; left: 50%; transform: translateX(-50%) rotate(-2.5deg);
  width: 4.4em; height: 1.2em;
  background: linear-gradient(180deg, rgba(216,196,152,.6), rgba(200,178,132,.5));
  box-shadow: 0 .06em .18em rgba(0,0,0,.18); border-radius: .08em;
}
.street-paper .paper-tag {
  display: block; font-size: .78em; font-weight: 700; letter-spacing: .12em;
  color: #8A6B3F; margin-bottom: .35em;
}
.street-paper p { margin: 0; }
html[lang="en"] .street-paper p { font-size: .92em; line-height: 1.45; }

/* ---------- S9 融合导览：引线 + 深色磨砂导览卡（画面不压暗，长卷全程可见） ---------- */
#tour-ui { position: fixed; inset: 0; z-index: 60; pointer-events: none; display: none; }
#tour-ui.show { display: block; }
#tour-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#tour-leader { stroke: rgba(242,217,139,.85); stroke-width: 1.2; stroke-dasharray: 1 0; }
#tour-anchor { fill: #F2D98B; stroke: rgba(24,17,12,.9); stroke-width: 1.5; }
#tour-card {
  position: absolute; left: clamp(12px, 1.6vw, 32px); bottom: clamp(60px, 7vh, 110px); pointer-events: auto;
  width: clamp(320px, 34vw, 680px);
  background: rgba(20,15,11,.78); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.14); border-radius: clamp(12px, 1.2vw, 20px);
  box-shadow: 0 14px 44px rgba(15,10,7,.4);
  padding: clamp(14px, 1.6vw, 28px) clamp(16px, 1.8vw, 32px) clamp(12px, 1.4vw, 24px);
  color: #EFE8DA; font-family: "Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
}
.tc-segs { display: flex; gap: clamp(3px, .4vw, 6px); margin-bottom: clamp(8px, 1.1vw, 18px); }
.tc-segs i { flex: 1; height: clamp(2px, .25vw, 4px); border-radius: 1px; background: rgba(255,255,255,.16); transition: background .4s; }
.tc-segs i.on { background: #E4C87E; }
.tc-kicker { font-size: clamp(10px, .9vw, 14px); letter-spacing: .22em; color: rgba(228,200,126,.9); margin-bottom: clamp(5px, .7vw, 12px); }
.tc-title { font-size: clamp(17px, 2vw, 30px); letter-spacing: .04em; font-weight: 600; color: #F6EFDF; margin: 0 0 clamp(5px, .8vw, 14px);
  font-family: "Noto Serif SC","Songti SC","STSong","SimSun",serif; }
html[lang="en"] .tc-title { font-family: Georgia,"Times New Roman",serif; font-size: clamp(16px, 1.8vw, 28px); }
.tc-text { font-size: clamp(12.5px, 1.35vw, 18px); line-height: 1.75; color: rgba(239,232,218,.86); margin: 0 0 clamp(10px, 1.4vw, 22px); }
.tc-ctrl { display: flex; align-items: center; gap: clamp(5px, .6vw, 10px); flex-wrap: wrap; }
.tc-btn {
  font: inherit; font-size: clamp(11px, 1.1vw, 15px); letter-spacing: .06em; padding: clamp(5px, .7vw, 10px) clamp(11px, 1.4vw, 20px); border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.2); background: none; color: rgba(243,237,226,.9);
  transition: border-color .2s, color .2s, background .2s;
}
.tc-btn:hover { border-color: rgba(228,200,126,.65); color: #F2D98B; }
.tc-btn:disabled { opacity: .35; cursor: default; }
.tc-btn.tc-auto { margin-left: auto; }
.tc-btn.tc-skip { border-color: transparent; color: rgba(243,237,226,.55); }
.tc-btn.tc-skip:hover { color: #F2D98B; }
#tour-resume {
  position: absolute; left: 50%; bottom: clamp(60px, 7vh, 110px); transform: translateX(-50%);
  pointer-events: auto; z-index: 61;
  border: 1px solid rgba(228,200,126,.55); border-radius: 999px;
  background: rgba(20,15,11,.78); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  color: #F2D98B; font-size: clamp(12px, 1.2vw, 17px); letter-spacing: .12em;
  padding: clamp(8px, .9vw, 14px) clamp(18px, 2vw, 32px); cursor: pointer;
  box-shadow: 0 8px 26px rgba(15,10,7,.4);
}
#tour-resume:hover { background: rgba(35,26,18,.85); }
#tour-resume[hidden] { display: none; }
#tour-btn.on { border-color: rgba(228,200,126,.7); color: #F2D98B; }
@media (max-width: 640px) {
  #tour-card { left: 10px; right: 10px; bottom: 66px; width: auto; padding: 13px 16px 11px; }
}

/* ---------- T4 可点性：脉冲角标 + hover 扫光（仅可点牌匾，装饰牌匾无） ---------- */
.hs-plaque::before {
  content: ""; position: absolute; right: -.32em; bottom: -.32em; z-index: 3;
  width: .46em; height: .46em; border-radius: 50%;
  background: #F2D98B; box-shadow: 0 0 .32em .08em rgba(242,217,139,.8);
  animation: hs-ping 2.2s ease-out infinite; pointer-events: none;
}
@keyframes hs-ping {
  0%   { transform: scale(.55); opacity: 1; }
  70%  { transform: scale(1.6); opacity: 0; }
  100% { transform: scale(1.6); opacity: 0; }
}
.hs-plaque .sheen {
  position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none;
}
.hs-plaque .sheen::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -55%; width: 42%;
  background: linear-gradient(100deg, transparent, rgba(255,246,220,.4), transparent);
  transform: skewX(-18deg);
}
.hs-plaque:hover .sheen::before { left: 115%; transition: left .7s ease; }

/* ---------- T4 六厅竖匾门牌（可点） ---------- */
.hall-plaque {
  pointer-events: auto; cursor: pointer; position: relative;
  writing-mode: vertical-rl; letter-spacing: .16em;
  font-family: "KaiTi","STKaiti","Kaiti SC","Noto Serif SC",serif; font-weight: 700;
  font-size: calc(var(--pz, .85) * 30px); line-height: 1.1;
  color: #F0DFA4; text-shadow: 0 .04em .06em rgba(0,0,0,.55);
  padding: .55em .34em; border-radius: .1em;
  background: linear-gradient(180deg, #4A3428 0%, #38281D 60%, #2E2016 100%);
  border: .07em solid rgba(240,223,164,.55);
  box-shadow: 0 .16em .45em rgba(25,15,10,.5), inset 0 0 0 .04em rgba(255,235,200,.12);
  transform: rotate(var(--rotj, 0deg));
  transition: filter .2s;
}
.hall-plaque:hover { filter: brightness(1.22); }
html[lang="en"] .hall-plaque {
  writing-mode: horizontal-tb; letter-spacing: .05em;
  font-size: calc(var(--pz, .85) * 19px);
  font-family: "Noto Serif SC",serif;
}

/* ---------- T4 迷你长卷当前厅高亮 ---------- */
#minimap-segments .seg { transition: background .3s; }
#minimap-segments .seg.on { background: rgba(242,217,139,.16); }
#minimap-segments .seg.on span { opacity: 1; font-weight: 700; }

/* 展签位置覆盖：拥挤招牌的展签改悬于上缘（避免压邻匾） */
.plaque-gloss.gloss-top { top: auto; bottom: calc(100% + .3em); }

/* ==================== v1.9：入口、叙事与可感知密度 ==================== */

/* ---------- S1 封面（展览封面，非网页首页） ---------- */
#intro .cover-bg {
  position: absolute; inset: 0;
  background: url("../assets/scroll_mini.jpg") center 38% / cover no-repeat;
  opacity: .18; filter: blur(3px) saturate(.75) brightness(.9);
}
#intro .cover-bg::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 42% 46%, rgba(20,16,16,.25) 0%, rgba(20,16,16,.88) 78%);
}
.cover-lang {
  position: absolute; top: 22px; right: 26px; z-index: 2;
  background: none; border: 1px solid rgba(228,200,126,.4); border-radius: 999px;
  color: rgba(243,237,226,.8); font-size: 12px; letter-spacing: .12em; padding: 7px 16px; cursor: pointer;
  transition: border-color .25s, color .25s;
}
.cover-lang:hover { border-color: rgba(228,200,126,.8); color: #F2D98B; }
.cover-inner { position: relative; z-index: 1; max-width: 620px; padding: 0 36px; text-align: left; }
.cover-kicker { font-size: 12px; letter-spacing: .46em; color: rgba(228,200,126,.85); margin: 0 0 24px; text-transform: uppercase; }
.cover-title {
  font-family: "KaiTi","STKaiti","Kaiti SC","Noto Serif SC",serif;
  font-size: clamp(36px, 5.6vw, 56px); font-weight: 700; letter-spacing: .1em;
  color: #F6EFDF; margin: 0 0 22px; line-height: 1.25;
}
html[lang="en"] .cover-title { font-family: Georgia,"Times New Roman",serif; letter-spacing: .015em; }
.cover-lead { font-size: 14.5px; line-height: 2.0; color: rgba(243,237,226,.78); margin: 0 0 14px; }
.cover-claim { font-size: 15px; line-height: 1.8; color: #F2D98B; font-weight: 500; margin: 0 0 36px; }
.cover-actions { display: flex; gap: 12px; flex-wrap: wrap; }
#cover-tour {
  padding: 15px 36px; font-size: 15.5px; letter-spacing: .1em; cursor: pointer;
  color: #1D1712; background: #E4C87E;
  border: 1px solid #E4C87E; border-radius: 999px;
  transition: background .25s, transform .25s;
}
#cover-tour:hover { background: #F2D98B; transform: translateY(-1px); }
#cover-tour .cover-arrow { margin-left: 10px; }
#cover-explore {
  padding: 15px 30px; font-size: 14px; letter-spacing: .1em; cursor: pointer;
  color: rgba(243,237,226,.85); background: transparent; border: 1px solid rgba(243,237,226,.4); border-radius: 999px;
  transition: border-color .25s, color .25s;
}
#cover-explore:hover { border-color: rgba(243,237,226,.85); color: #FFF; }
#cover-research {
  display: inline-block; margin-top: 22px; font-size: 13.5px; letter-spacing: .08em;
  color: rgba(243,233,210,.68); text-decoration: none; border-bottom: 1px solid rgba(243,233,210,.3);
  padding-bottom: 2px; cursor: pointer;
}
#cover-research:hover { color: #F2D98B; border-color: #F2D98B; }
.cover-credit { margin-top: 40px; font-size: 12px; letter-spacing: .18em; color: rgba(243,233,210,.42); }

/* ---------- S3 新手三提示 ---------- */
#onboard {
  position: fixed; inset: 0; z-index: 90; background: rgba(14,10,8,.55);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
}
#onboard[hidden] { display: none; }
.ob-card {
  position: relative; width: min(400px, calc(100vw - 56px));
  background: rgba(20,15,11,.78); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,.14); border-radius: 18px;
  color: #EFE8DA; padding: 28px 30px 24px;
  box-shadow: 0 18px 60px rgba(0,0,0,.5);
  font-family: "Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
}
.ob-title { font-size: 13px; font-weight: 600; letter-spacing: .22em; color: rgba(228,200,126,.9); margin: 0 0 16px; }
.ob-card ul { list-style: none; margin: 0 0 20px; padding: 0; }
.ob-card li { display: flex; align-items: center; gap: 14px; padding: 9px 0; font-size: 14px; color: rgba(239,232,218,.9); }
.ob-ic {
  flex: 0 0 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(228,200,126,.55); color: #F2D98B; font-size: 12.5px; font-weight: 600;
  font-style: normal; letter-spacing: 0;
}
#ob-start {
  width: 100%; padding: 12px 0; font-size: 13.5px; letter-spacing: .14em; cursor: pointer;
  color: #1D1712; background: #E4C87E; border: none; border-radius: 999px;
  transition: background .25s;
}
#ob-start:hover { background: #F2D98B; }

/* ---------- S4 必看数字牌 ---------- */
.ms-num {
  position: absolute; top: -1.05em; left: -1.05em; z-index: 4;
  width: 1.75em; height: 1.75em; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-style: normal; font-weight: 700; font-size: .42em; letter-spacing: 0;
  text-decoration: none;
  color: #1D1712; background: #E4C87E;
  border: .1em solid rgba(29,23,18,.9);
  box-shadow: 0 .1em .35em rgba(0,0,0,.45), 0 0 .5em rgba(228,200,126,.45);
  pointer-events: none;
  animation: hs-breathe 2.6s ease-in-out infinite;
}
.hs-dot .ms-num, .hs-folk .ms-num, .hs-data .ms-num { font-size: 11px; width: 22px; height: 22px; }
.must.seen .ms-num { animation: none; opacity: .55; box-shadow: 0 .1em .3em rgba(0,0,0,.4); }
#mustsee-chip { color: #F2D98B; border-color: rgba(228,200,126,.45); letter-spacing: .04em; }
#mustsee-chip:hover { border-color: rgba(228,200,126,.8); background: rgba(228,200,126,.1); }

/* ---------- v2.0 数据浮标（S11）：深色底 + 金色细环的小钉 ---------- */
.hs-data {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600; color: #E4C87E;
  background: rgba(24,18,12,.82); border: 1.5px solid rgba(228,200,126,.75);
  box-shadow: 0 2px 10px rgba(20,14,9,.5); position: relative; cursor: pointer;
  transition: transform .25s, opacity .4s;
}
.hs-data::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%;
  border: 1px dashed rgba(228,200,126,.5); opacity: .7;
  animation: hs-breathe 3s ease-in-out infinite;
}
.hs-data:hover { transform: scale(1.16); }

/* ---------- v2.1 微问题点：与数据浮标同族，青绿调的「？」钉 ---------- */
.hs-quiz {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700; color: #A8DEC9;
  background: rgba(14,26,22,.82); border: 1.5px solid rgba(122,200,168,.75);
  box-shadow: 0 2px 10px rgba(10,20,16,.5); position: relative; cursor: pointer;
  transition: transform .25s, opacity .4s;
}
.hs-quiz::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%;
  border: 1px dashed rgba(122,200,168,.55); opacity: .7;
  animation: hs-breathe 3s ease-in-out infinite;
}
.hs-quiz:hover { transform: scale(1.16); }

/* ---------- S5 缩放层级 LOD：远景只留必看与牌匾层 ---------- */
.hs-dot, .hs-folk { transition: opacity .4s, filter .2s; }
body.zoom-far .hs-dot:not(.must),
body.zoom-far .hs-folk:not(.must),
body.zoom-far .hs-data:not(.must),
body.zoom-far .hs-quiz:not(.must) { opacity: 0; pointer-events: none; }

/* ---------- S5 目录抽屉 ---------- */
#drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 70;
  width: min(360px, 88vw);
  background: rgba(18,13,10,.82);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-left: 1px solid rgba(255,255,255,.1);
  box-shadow: -16px 0 50px rgba(0,0,0,.4);
  transform: translateX(102%); transition: transform .28s ease;
  display: flex; flex-direction: column;
  font-family: "Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
}
#drawer[hidden] { display: none; }
#drawer.open { transform: translateX(0); }
.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 22px 15px; border-bottom: 1px solid rgba(255,255,255,.1);
}
.drawer-title { font-size: 12.5px; letter-spacing: .28em; color: rgba(228,200,126,.9); font-weight: 600; }
#drawer-close {
  background: none; border: none; color: rgba(243,237,226,.6); font-size: 22px; cursor: pointer; line-height: 1;
}
#drawer-close:hover { color: #F2D98B; }
#drawer-body { flex: 1; overflow-y: auto; padding: 12px 14px 26px; }
.drawer-sec { margin-top: 14px; }
.drawer-hall {
  display: block; font-size: 11px; letter-spacing: .2em; color: rgba(228,200,126,.75);
  padding: 4px 8px 8px; border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: 6px;
}
.drawer-item {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 9px 8px; margin: 2px 0; background: none; border: none; border-radius: 8px;
  color: rgba(243,237,226,.88); font-size: 13.5px; text-align: left; cursor: pointer;
  transition: background .2s;
}
.drawer-item:hover { background: rgba(255,255,255,.07); }
.drawer-item i {
  flex: 0 0 22px; height: 22px; border-radius: 50%; font-style: normal; font-size: 11px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  color: #E4C87E; border: 1px solid rgba(228,200,126,.6); background: none;
}
.drawer-item.seen span { opacity: .45; text-decoration: line-through; text-decoration-color: rgba(228,200,126,.4); }

/* ---------- S9 导览不再压暗长卷；「展签灯」仍只压暗画面 ---------- */
body.reading #viewer canvas { filter: brightness(.78) saturate(.92); }
#viewer canvas { transition: filter .6s ease; }
.tour-ring {
  width: calc(var(--pz, .85) * 300px); height: calc(var(--pz, .85) * 300px);
  border-radius: 50%; pointer-events: none;
  border: calc(var(--pz, .85) * 2px) solid rgba(242,217,139,.85);
  box-shadow: 0 0 calc(var(--pz, .85) * 26px) rgba(242,217,139,.28);
  animation: tour-ring-pulse 2s ease-out infinite;
}
@keyframes tour-ring-pulse {
  0%   { transform: scale(.94); opacity: .9; }
  60%  { transform: scale(1.04); opacity: .5; }
  100% { transform: scale(.94); opacity: .9; }
}

/* ---------- S6 英文展签提亮（EN 模式下展签是正文） ---------- */
html[lang="en"] .plaque-gloss, html[lang="en"] .word-gloss {
  font-size: calc(var(--pz, .85) * 14.5px);
  font-weight: 500; background: rgba(24,17,12,.86); color: #F6EDD8;
}
html[lang="en"] .street-paper { font-size: calc(var(--pz, .85) * 14.5px); }

/* ---------- S7 常驻署名条 ---------- */
#credit {
  position: fixed; left: 14px; bottom: 64px; z-index: 55;
  background: rgba(20,15,11,.55); border: 1px solid rgba(255,255,255,.14); border-radius: 999px;
  color: rgba(243,237,226,.7); font-size: 10.5px; letter-spacing: .12em;
  padding: 6px 14px; cursor: pointer; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: color .2s, border-color .2s;
}
#credit:hover { color: #F2D98B; border-color: rgba(228,200,126,.55); }

/* ---------- 顶栏开关态 ---------- */
#read-toggle.on, #index-btn.on { border-color: rgba(228,200,126,.7); color: #F2D98B; }

/* ================= v2.2 质感精修（装裱与层级，不动任何画卷坐标） ================= */
/* 设计纪律（来自设计先例检索）：宣纸底＋墨字＋赭金点缀的单色纪律；
   图表一律「装裱」；卡片靠留白与发丝线分层，不堆圆角边框；数字统一表格字距 */

/* 封面入口宣言 */
.cover-note { margin-top: 14px; font-size: 13px; letter-spacing: .12em; color: rgba(243,235,221,.62); max-width: 40em; }
.cover-note::before { content: "—— "; color: rgba(192,154,94,.75); }

/* 图表装裱：白卡 → 卡纸衬底 → 发丝线内框 */
.chartblock { background: linear-gradient(180deg, #FFFFFF 0%, #FDFBF5 100%);
              border: 1px solid #DED2C0; box-shadow: 0 1px 0 rgba(62,39,35,.04), 0 10px 28px rgba(62,39,35,.05); }
.chartblock img { background: #FFFFFF; padding: 16px 18px 10px;
                  border: 1px solid #D8CBB4; outline: 1px solid #EFE7D6; outline-offset: 3px;
                  border-radius: 3px; box-shadow: 0 2px 10px rgba(62,39,35,.06); }
.chartblock .cb-thesis { letter-spacing: .04em; }
.chartblock .cb-src { margin-top: 14px; padding-top: 10px; border-top: 1px solid #EFE7D6;
                      font-variant-numeric: tabular-nums; letter-spacing: .01em; }

/* 数字阵列：表格字距＋层级 */
.snum b { font-variant-numeric: tabular-nums; font-size: 18px; }
.snum { background: #FDFAF3; }

/* 段落标题：衬线层级收紧 */
.sec-title { letter-spacing: .03em; }
.sec-kicker span { font-variant-numeric: tabular-nums; }

/* 卡片分层：统一 10px 半径＋暖发丝线，可点卡给轻微浮起 */
.ll-card, .gcard, .step, .face, .wchip, .quiz, .calc, .story-card { border-color: #DED2C0; }
.ll-card, .face, .gcard, .step { transition: transform .22s ease, box-shadow .22s ease; }
.ll-card:hover, .face:hover, .gcard:hover, .step:hover {
  transform: translateY(-2px); box-shadow: 0 8px 20px rgba(62,39,35,.07); }
.ll-card .ll-no { font-variant-numeric: tabular-nums; }

/* 数据说明折叠区：明显的可点暗示 */
details.datanote summary { list-style: none; display: flex; align-items: center; gap: 8px; }
details.datanote summary::before { content: "＋"; color: #C09A5E; font-weight: 700;
  display: inline-block; transition: transform .2s ease; }
details.datanote[open] summary::before { transform: rotate(45deg); }
details.datanote summary::-webkit-details-marker { display: none; }
details.datanote summary:hover { color: #3E2723; }

/* 引语卡：去掉投影，靠左边条与留白 */
.quoteblock { box-shadow: none; border-top: 1px solid #EDE3D2; border-right: 1px solid #EDE3D2; border-bottom: 1px solid #EDE3D2; }

/* 选中文本与焦点：招生官可及性 */
::selection { background: rgba(192,154,94,.32); color: #3E2723; }
button:focus-visible, a:focus-visible, summary:focus-visible, select:focus-visible {
  outline: 2px solid #C09A5E; outline-offset: 2px; border-radius: 4px; }

/* 投票条：字距统一 */
.vote-bar .vb-a, .vote-bar .vb-b { font-variant-numeric: tabular-nums; letter-spacing: .02em; }

@media (max-width: 760px) {
  .chartblock img { padding: 10px 10px 6px; }
  .cover-note { font-size: 12px; }
}

/* ================= v2.3 牌匾入画（招牌层与画卷同风格同色调，只亮一点儿） =================
   原则：色板取自画卷本身（中调 155,126,98／浅 199,171,142／纸 237,224,203／深 95,74,53）；
   摄影材质纹理（木/漆/石/布照片）全部替换为程序化水墨晕染纹理；
   朱砂、青石、亚克力全部降饱和进宣纸色系；金字渐变降低对比；阴影改暖调。
   坐标、字号、缩放机制（--pz/--f/em 体系）一律不动。 */

/* 牌面基底：阴影去冷、收硬边 */
.plaque { box-shadow: 0 .08em .26em rgba(40,28,18,.34), 0 0 .16em rgba(255,238,200,.07),
          inset 0 0 0 .04em rgba(255,240,214,.10); }

/* 金字：降低对比的「泥金」，不再珠光 */
.sty-wood .pt, .sty-red .pt, .sty-gold .pt, .sty-paifang .pt, .sty-band .pt, .sty-vert .pt {
  background-image: linear-gradient(168deg, #E9D6A4 0%, #D6BC84 30%, #B99B62 50%, #DFC794 64%, #C8AC72 82%, #AD9057 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 .04em .02em rgba(15,10,6,.42));
}

/* 深木匾 */
.sty-wood   { background-image: url("../assets/tex-ink-dark.png"), linear-gradient(180deg,#5A4130,#463122 55%,#38271B);
              background-blend-mode: overlay, normal; color: #E3CD9A; border-color: #2C1E14;
              text-shadow: 0 -.05em 0 rgba(24,14,8,.7), 0 .03em .05em rgba(240,220,160,.22);
              box-shadow: 0 .1em .3em rgba(40,28,18,.44), inset 0 0 0 .06em rgba(227,205,154,.28), inset 0 .1em .24em rgba(0,0,0,.3); }
/* 褪朱砂匾 */
.sty-red    { background-image: url("../assets/tex-ink-red.png"), linear-gradient(180deg,#8E4E3A,#7A4232 60%,#6B382B);
              background-blend-mode: overlay, normal; color: #E9D2A0; border-color: #5A2E22;
              text-shadow: 0 -.05em 0 rgba(52,22,14,.65), 0 .03em .05em rgba(240,218,155,.22);
              box-shadow: 0 .1em .3em rgba(40,28,18,.42), inset 0 0 0 .055em rgba(233,210,160,.3), inset 0 .1em .22em rgba(0,0,0,.26); }
/* 墨底金字框匾 */
.sty-gold   { background-image: url("../assets/tex-ink-dark.png"), linear-gradient(180deg,#2A2016,#1D150E);
              background-blend-mode: overlay, normal; color: #E2CB96; border-color: #140D08;
              text-shadow: 0 -.05em 0 rgba(0,0,0,.75), 0 .03em .05em rgba(240,222,160,.2); }
.sty-gold::before { border-color: rgba(222,194,134,.42); }
/* 牌坊·暖青石 */
.sty-paifang{ background-image: url("../assets/tex-ink-stone.png"), linear-gradient(180deg,#55605A,#424E48);
              background-blend-mode: overlay, normal; color: #E6D3A0; border-color: #2E3A35;
              text-shadow: 0 -.05em 0 rgba(20,26,22,.8), 0 .03em .05em rgba(238,226,170,.22); }
.sty-paifang::before { border-color: rgba(230,211,160,.36); }
/* 灯箱：旧亚克力入宣纸 */
.sty-light  { background-image: url("../assets/tex-ink-paper.png"), linear-gradient(180deg,#EADFC6,#DFCFAC 62%,#D2BF97);
              background-blend-mode: soft-light, normal; color: #46413A; border-color: #A08E6C;
              box-shadow: inset 0 0 .16em rgba(255,250,235,.55), inset 0 -.12em .26em rgba(172,150,105,.35),
                          0 0 .26em rgba(255,240,200,.16), 0 .08em .24em rgba(40,28,18,.3); }
/* 门楣长条 */
.sty-band   { background-image: url("../assets/tex-ink-dark.png"), linear-gradient(180deg,rgba(88,62,42,.97),rgba(70,48,32,.97));
              background-blend-mode: overlay, normal; color: #E7D3A0; border-color: #2E2014;
              text-shadow: 0 -.05em 0 rgba(24,14,8,.65), 0 .03em .05em rgba(240,222,160,.18); }
/* 白底红字（招租/告示）：旧纸＋褪朱 */
.sty-banner { background-image: url("../assets/tex-ink-paper.png"), linear-gradient(180deg,#F0E5CC,#E4D5B2);
              background-blend-mode: soft-light, normal; color: #99462F; border-color: #99462F;
              box-shadow: 0 .07em .2em rgba(40,28,18,.28); }
/* 竖匾 */
.sty-vert   { background-image: url("../assets/tex-ink-dark.png"), linear-gradient(90deg,#4A382A,#34251A);
              background-blend-mode: overlay, normal; color: #E3CD9A; border-color: #241A10;
              text-shadow: 0 -.05em 0 rgba(18,10,5,.65); }
.sty-vert::before, .sty-vert::after {
              background: linear-gradient(180deg,#52402F,#33241A);
              box-shadow: 0 .04em .1em rgba(20,12,8,.35); }
/* 帐篷布幅 */
.sty-tent   { background-image: url("../assets/tex-ink-red.png"), linear-gradient(180deg,#96604C,#7E5140);
              background-blend-mode: overlay, normal; color: #EDDFC4; border-color: #654236;
              text-shadow: 0 .04em .05em rgba(66,30,20,.4);
              box-shadow: 0 .07em .2em rgba(40,28,18,.3); }
.sty-tent::before { border-color: rgba(237,223,196,.3); }
/* A字立牌 */
.sty-aframe { background-image: url("../assets/tex-ink-paper.png"), linear-gradient(180deg,#EFE4C9,#E2D2B0);
              background-blend-mode: soft-light, normal; color: #8E4534; border-color: #8A6F4D;
              box-shadow: .1em .12em .26em rgba(40,28,18,.36); }
/* 公交站广告灯箱 */
.sty-busad  { background-image: url("../assets/tex-ink-paper.png"), linear-gradient(180deg,#F0E6CE,#E2D3B0);
              background-blend-mode: soft-light, normal; color: #47616B; border-color: #A79A80;
              box-shadow: inset 0 0 .16em rgba(255,252,240,.6),
                          0 0 .3em rgba(255,244,214,.22), 0 .08em .26em rgba(40,28,18,.3); }
/* 宣传栏 */
.sty-board  { background-image: url("../assets/tex-ink-paper.png"), linear-gradient(180deg,#EFE4C8,#E2D3B0);
              background-blend-mode: soft-light, normal; color: #4E3A30; border-color: #654731;
              box-shadow: 0 .09em .28em rgba(40,28,18,.38), inset 0 0 0 .06em rgba(101,71,49,.3); }

/* 街头张贴：同入画 */
.paste-banner { background-image: url("../assets/tex-ink-red.png"), linear-gradient(180deg,#8E4E3A,#7A4232);
                background-size: 260px 260px, 100% 100%; background-blend-mode: overlay, normal;
                color: #EFDFBA; border-color: #6B3626;
                box-shadow: 0 2px 8px rgba(62,39,35,.26); }
.paste-ad     { background: rgba(240,229,205,.96); color: #463228; border-color: #8D7A66;
                box-shadow: 0 2px 8px rgba(62,39,35,.24); }
.paste-road   { background-image: url("../assets/tex-ink-stone.png"), linear-gradient(180deg,#35604E,#2B5243);
                background-size: 260px 260px, 100% 100%; background-blend-mode: overlay, normal;
                color: #EAE3CC; border-color: #DED5BC;
                box-shadow: 0 2px 9px rgba(62,39,35,.28); }
.paste-tag    { background: linear-gradient(180deg,#B9945A,#A88450); color: #46311F; border-color: #8D6E3C;
                box-shadow: 0 2px 7px rgba(62,39,35,.26); }

/* 词钉：朱红/青绿再降半格饱和 */
.hs-word.lang-ne { background-image: url("../assets/tex-ink-red.png"), linear-gradient(180deg,#976049 0%,#85513D 60%,#744635 100%);
  background-blend-mode: overlay, normal; }
.hs-word.lang-hn { background-image: url("../assets/tex-ink-stone.png"), linear-gradient(180deg,#5E7364 0%,#4E6355 60%,#425649 100%);
  background-blend-mode: overlay, normal; }

/* v2.3b 统一罩一层「画感」：微量暖褐 + 对比轻收（季节明暗逻辑原样保留） */
.camp-ne    { filter: grayscale(calc(var(--sv, 0) * .8)) brightness(calc((1 - var(--sv, 0) * .12) * var(--bri, 1))) sepia(.07) contrast(.975); }
.camp-local { filter: grayscale(calc(.3 - var(--sv, 0) * .3)) brightness(calc((.95 + var(--sv, 0) * .05) * var(--bri, 1))) sepia(.07) contrast(.975); }
.camp-mid   { filter: grayscale(calc(var(--sv, 0) * .18)) brightness(var(--bri, 1)) sepia(.07) contrast(.975); }
.street-paste { filter: sepia(.07) contrast(.975); }
.hs-word    { filter: sepia(.07) contrast(.975); }
/* hover 提亮叠在画感之上 */
.hs-plaque:hover, .hs-word:hover { filter: sepia(.07) contrast(.975) brightness(1.14); }
.street-paste:hover { filter: sepia(.07) contrast(.975) brightness(1.05); }

/* ================= v2.4 牌匾三沉入画：软边、透光、去数码感 =================
   画卷里的物件没有硬边：牌匾边缘做 2.5% 水墨羽化（遮罩只碰留白边，不碰字），
   圆角改不规则手绘感，牌面降 4-6% 不透明让纸纹隐约透出，灯箱再压暗半格 */
.plaque {
  border-radius: .14em .22em .12em .2em / .2em .12em .22em .14em;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 2.2%, #000 97.8%, transparent),
                      linear-gradient(180deg, transparent, #000 4%, #000 96%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 2.2%, #000 97.8%, transparent),
              linear-gradient(180deg, transparent, #000 4%, #000 96%, transparent);
  mask-composite: intersect;
}
/* 牌面透光：渐变止点带 alpha，画卷纸纹隐约透进牌面 */
.sty-wood   { background-image: url("../assets/tex-ink-dark.png"), linear-gradient(180deg,rgba(90,65,48,.94),rgba(70,49,34,.94) 55%,rgba(56,39,27,.94)); }
.sty-red    { background-image: url("../assets/tex-ink-red.png"),  linear-gradient(180deg,rgba(142,78,58,.94),rgba(122,66,50,.94) 60%,rgba(107,56,43,.94)); }
.sty-gold   { background-image: url("../assets/tex-ink-dark.png"), linear-gradient(180deg,rgba(42,32,22,.95),rgba(29,21,14,.95)); }
.sty-paifang{ background-image: url("../assets/tex-ink-stone.png"),linear-gradient(180deg,rgba(85,96,90,.94),rgba(66,78,72,.94)); }
.sty-band   { background-image: url("../assets/tex-ink-dark.png"), linear-gradient(180deg,rgba(88,62,42,.92),rgba(70,48,32,.92)); }
.sty-vert   { background-image: url("../assets/tex-ink-dark.png"), linear-gradient(90deg,rgba(74,56,42,.94),rgba(52,37,26,.94)); }
.sty-tent   { background-image: url("../assets/tex-ink-red.png"),  linear-gradient(180deg,rgba(150,96,76,.93),rgba(126,81,64,.93)); }
/* 灯箱再压暗半格：旧纸色向画卷浅调（199,171,142）靠拢 */
.sty-light  { background-image: url("../assets/tex-ink-paper.png"), linear-gradient(180deg,rgba(228,214,184,.94),rgba(216,198,162,.94) 62%,rgba(205,186,146,.94));
              background-blend-mode: soft-light, normal; color: #4C463E;
              box-shadow: inset 0 0 .14em rgba(255,248,230,.4), inset 0 -.12em .24em rgba(168,146,102,.32),
                          0 0 .2em rgba(255,240,200,.10), 0 .08em .22em rgba(40,28,18,.3); }
.sty-busad  { background-image: url("../assets/tex-ink-paper.png"), linear-gradient(180deg,rgba(230,216,186,.94),rgba(216,199,162,.94));
              background-blend-mode: soft-light, normal; color: #4E6169; border-color: #A2957E;
              box-shadow: inset 0 0 .14em rgba(255,250,236,.42), 0 0 .24em rgba(255,244,214,.14), 0 .08em .24em rgba(40,28,18,.3); }
.sty-banner { background-image: url("../assets/tex-ink-paper.png"), linear-gradient(180deg,rgba(232,220,192,.95),rgba(220,205,168,.95)); }
.sty-aframe { background-image: url("../assets/tex-ink-paper.png"), linear-gradient(180deg,rgba(231,218,189,.95),rgba(218,202,164,.95)); }
.sty-board  { background-image: url("../assets/tex-ink-paper.png"), linear-gradient(180deg,rgba(231,219,190,.95),rgba(218,203,166,.95)); }
/* 金字再柔一档：更像手写泥金 */
.sty-wood .pt, .sty-red .pt, .sty-gold .pt, .sty-paifang .pt, .sty-band .pt, .sty-vert .pt {
  filter: drop-shadow(0 .035em .02em rgba(15,10,6,.36)) sepia(.12); }
/* 张贴纸片边缘同样软化 */
.street-paste {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent),
                      linear-gradient(180deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent),
              linear-gradient(180deg, transparent, #000 6%, #000 94%, transparent);
  mask-composite: intersect;
}
/* 词钉保持可读：仅边缘微羽化 */
.hs-word {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3.5%, #000 96.5%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 3.5%, #000 96.5%, transparent);
}

/* ---------- v2.4 扉页：封面三段导览（为什么做 · 研究什么 · 怎么逛） ---------- */
#intro { overflow-y: auto; }
.cover-inner { margin: auto; max-width: 1000px; padding: 60px 36px 44px; }
.preface {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;
  margin: 34px 0 24px; padding-top: 26px;
  border-top: 1px solid rgba(192,154,94,.30);
}
.pf-block h3 {
  margin: 0 0 12px; font-size: 13px; font-weight: 600;
  letter-spacing: .3em; color: #E9C88F;
  display: flex; align-items: baseline; gap: 10px;
}
html[lang="en"] .pf-block h3 { letter-spacing: .18em; text-transform: uppercase; }
.pf-num { font-family: Georgia,"Times New Roman",serif; font-size: 11px; letter-spacing: .08em; color: rgba(192,154,94,.85); }
.pf-block p { margin: 0; font-size: 13px; line-height: 1.95; color: rgba(243,237,226,.74); }
.pf-halls {
  display: flex; flex-wrap: wrap; gap: 9px 24px;
  margin: 0 0 30px; padding-top: 15px;
  border-top: 1px dashed rgba(192,154,94,.22);
}
.pf-hall b { margin-right: 7px; font-size: 12.5px; font-weight: 600; letter-spacing: .06em; color: rgba(242,217,139,.92); }
.pf-hall i { font-style: normal; font-size: 11.5px; letter-spacing: .04em; color: rgba(243,235,221,.52); }
@media (max-width: 860px) {
  .preface { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-height: 800px) {
  .cover-inner { padding-top: 38px; padding-bottom: 26px; }
  .preface { margin: 22px 0 16px; padding-top: 18px; gap: 22px; }
  .pf-halls { margin-bottom: 20px; }
  .cover-credit { margin-top: 22px; }
}