/* 山河图首页：高端东方长卷（淡青绿细金线）。月白素绢底、墨色字、大量留白。
   整页只有一种点缀色：朱砂，只用在小朱印上；画里窑口那点火光是画的一部分。动效很慢、很少 */
:root {
  --paper: #D5DFDA;       /* 月白素绢：和画的底色同值，画四周不会露边 */
  --paper-2: #C9D5D0;
  --paper-hi: rgba(226, 233, 229, .72);
  --ink-text: #26302E;    /* 墨，带一点黛青 */
  --ink-soft: #55625F;
  --ink-line: rgba(38, 48, 46, .3);
  --zhusha: #A9392A;      /* 朱砂：只给小印 */
  --song: "Taishou Song", "Songti SC", "STSong", "Noto Serif SC", "Source Han Serif SC", "Noto Serif CJK SC", "SimSun", "宋体", serif;
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

html:has(body.map-page), .map-page { height: 100%; overflow: hidden; background: var(--paper); }
.map-page { position: fixed; inset: 0; width: 100%; height: 100dvh; color: var(--ink-text); overscroll-behavior: none; }

.map-page .bar { position: absolute; top: 0; left: 0; right: 0; background: linear-gradient(180deg, rgba(213, 223, 218, .7), rgba(213, 223, 218, 0)); padding-bottom: 20px; pointer-events: none; color: var(--ink-text); transition: opacity 1.6s; }
.map-page .bar > * { pointer-events: auto; }
.map-page .bar-brand span { font-family: var(--song); }
.map-page .bar nav a, .map-page .bar nav button { font-family: var(--song); font-size: 15px; letter-spacing: .2em; color: var(--ink-soft); }
.map-page .bar nav a:hover, .map-page .bar nav button:hover { color: var(--ink-text); text-decoration-thickness: 1px; }
.map-page :focus-visible { outline-color: var(--ink-soft); }

#shanhe { position: absolute; inset: 0; overflow: hidden; }
.camera { position: absolute; inset: 0; background: var(--paper); }

.plane { position: absolute; inset: 0; overflow: hidden; pointer-events: none; transform-origin: var(--ox, 50%) var(--oy, 50%); }
.plane-back { z-index: 1; }
.plane-front { z-index: 3; }
.layer { position: absolute; left: 0; top: 0; max-width: none; pointer-events: none; }
.plane .layer { will-change: transform; }
.layer-img { display: block; max-width: none; opacity: 0; transition: opacity .8s; user-select: none; -webkit-user-drag: none; object-fit: cover; object-position: center bottom; }
.layer-img.loaded { opacity: 1; }
/* 云气：极慢地左右游移，一个来回三分钟 */
.layer.drift .layer-img { width: 100%; height: 100%; animation: drift 90s ease-in-out infinite alternate; }
@keyframes drift { from { transform: translate3d(-60px, 0, 0); } to { transform: translate3d(60px, 0, 0); } }
/* 河面本身不动，波光由 map.js 画在 .water 上；窑口一层极淡的暖晕，慢慢呼吸 */
.layer--river.loaded { opacity: .78; }
.layer--light.loaded { animation: glow 9s ease-in-out infinite; }
@keyframes glow { 0%, 100% { opacity: .45; } 50% { opacity: .85; } }

.scroller {
  position: absolute; inset: 0; z-index: 2;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain; touch-action: pan-x;
  cursor: grab; outline-offset: -4px;
  transform-origin: var(--ox, 50%) var(--oy, 50%);
}
.scroller::-webkit-scrollbar { display: none; }
.scroller.dragging { cursor: grabbing; user-select: none; }
.scroller.dragging a, .scroller.dragging button { cursor: grabbing; }
.world { position: relative; height: 100%; }

/* 路线：map-config.js 的 route.hidden 为 true 时不画。第二站开放后才显示，贴着河岸一串很细很淡的朱砂点 */
.route { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; transition: opacity 1.6s .4s; }
.route path { fill: none; stroke: none; }
.route circle { fill: var(--zhusha); }
.is-intro .route { opacity: 0; }

/* 河面波光：只盖住河谷的两张 canvas，锁在长卷上 */
.water { position: absolute; left: 0; top: 0; pointer-events: none; }

/* 远灯：这张画不用（map-config.js 的 lamps 为空），样式留着 */
.lamps { position: absolute; inset: 0; pointer-events: none; }
.lamps i { position: absolute; width: 2px; height: 2px; margin: -1px; border-radius: 50%; background: #E9B877; opacity: .4; }
.lamps.waiting i { opacity: 0; }

/* ---------- 站点：一方小朱印 + 一列竖排小字 ---------- */
.site {
  --pin: 44px;
  position: absolute; z-index: 2; display: block; width: var(--pin); height: var(--pin);
  margin: calc(var(--pin) / -2) 0 0 calc(var(--pin) / -2);
  padding: 0; border: 0; background: none; font: inherit; color: var(--ink-text);
  cursor: pointer; text-align: left; text-decoration: none;
  -webkit-user-drag: none; transition: opacity 1.6s .3s; -webkit-tap-highlight-color: transparent;
}
.is-intro .site { opacity: 0; pointer-events: none; }
.pin { display: block; position: relative; width: var(--pin); height: var(--pin); }

/* 太守形象：以后在 stations.js 填 taishou.mapImage 才显示；现在什么都不画 */
.taishou-marker-img { position: absolute; left: 50%; bottom: 50%; width: 72px; height: auto; max-width: none; transform: translateX(-50%); pointer-events: none; }

/* 题跋：竖排。右边是悬念，左边是站名和印，印挨着画里的窑。整组在站点右上方、贴着站点 */
.tag {
  position: absolute; left: calc(var(--pin) / 2 + var(--dx, 16px)); bottom: calc(var(--pin) / 2 + var(--dy, -6px));
  writing-mode: vertical-rl; width: max-content; height: max-content;
  font-family: var(--song); white-space: nowrap;
  text-shadow: 0 0 10px var(--paper), 0 0 4px var(--paper), 0 0 2px var(--paper);
}
.tag::before { /* 垫一层和绢同色的薄雾，字压在山上也读得清 */
  content: ""; position: absolute; inset: -22px -26px; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(218, 227, 222, .7) 0, rgba(218, 227, 222, .45) 55%, rgba(218, 227, 222, 0) 100%);
}
.tag-hook { display: block; font-size: clamp(13px, 1.9vh, 16px); line-height: 2; letter-spacing: .18em; color: var(--ink-soft); }
.tag-hook > span { display: block; }
.tag-name { display: block; text-align: end; font-size: clamp(16px, 2.3vh, 19px); line-height: 1.7; letter-spacing: .3em; color: var(--ink-text); }
.tag-name small { display: block; margin-block-start: .3em; font-size: 12px; letter-spacing: .24em; color: var(--ink-soft); }
.tag-seal {
  display: inline-grid; place-items: center; width: 1.45em; height: 1.45em; margin-inline-start: .5em; vertical-align: middle;
  font-size: 15px; line-height: 1; letter-spacing: 0; text-shadow: none;
  color: #F3EEE6; background: var(--zhusha); border-radius: 2px; transform: rotate(-2deg);
}
.site--open { --dx: 12px; --dy: 16px; } /* 印落在窑顶旁边，不压住窑右边那间小屋 */
.site--open:hover .tag-hook, .site--open:focus-visible .tag-hook { color: var(--ink-text); }
.site--open .tag-hook, .site--open .tag-seal { transition: color .8s, filter .8s; }
.site--open:hover .tag-seal { filter: saturate(1.15) brightness(.95); }
/* 下一站：印是淡的（白底淡朱字），字更淡 */
.site--next { --dx: 10px; --dy: 4px; }
.site--next .tag { opacity: .72; transition: opacity .8s; }
.site--next:hover .tag, .site--next:focus-visible .tag { opacity: 1; }
.site--next .tag-name { font-size: clamp(14px, 2vh, 17px); }
.site--next .tag-hook { font-size: clamp(12px, 1.7vh, 14px); }
.site--next .tag-seal { color: var(--zhusha); background: rgba(240, 238, 232, .6); box-shadow: inset 0 0 0 1px rgba(169, 57, 42, .55); font-size: 13px; }
.site:focus-visible { outline: 1px solid var(--ink-soft); outline-offset: 2px; }
/* 题跋写在左边（stations.js 的 tagSide: 'left'）：站名和印换到右边、挨着站点，整组往下放一点 */
.site--left .tag { left: auto; right: calc(var(--pin) / 2 + var(--dx, 16px)); bottom: calc(var(--pin) / 2 + var(--dy, -6px)); display: flex; flex-direction: column-reverse; }
.site--left.site--next { --dx: 8px; --dy: -34px; }

/* ---------- 题跋：留白天空里的竖排大字 ---------- */
.colophon {
  position: absolute; z-index: 6; top: clamp(78px, 11vh, 118px); right: clamp(28px, 10vw, 180px);
  writing-mode: vertical-rl; font-family: var(--song); color: var(--ink-text);
  pointer-events: none; transition: opacity 2.4s .2s;
}
.colophon-title { margin: 0; font-weight: 400; font-size: clamp(30px, 4.4vh, 42px); line-height: 1; letter-spacing: .34em; }
.colophon-motto { margin: 0 1.6em 0 0; padding-inline-start: 3.2em; font-size: clamp(13px, 1.65vh, 15px); line-height: 2.2; letter-spacing: .28em; color: var(--ink-soft); }
.colophon-motto > span { display: block; }
.colophon-motto .colophon-seal {
  display: inline-block; margin-inline-start: 1.2em; padding: 3px 2px; font-size: 10px; line-height: 1.15; letter-spacing: 0;
  color: #F3EEE6; background: var(--zhusha); border-radius: 1px; opacity: .92; transform: rotate(-1.5deg);
}
.is-intro .colophon, .is-intro .seek { opacity: 0; }

/* “寻非遗”入口：右下方雾里，一道细墨框。醒目靠位置和留白，不靠颜色 */
.seek {
  position: absolute; z-index: 6; right: clamp(20px, 10vw, 180px); bottom: clamp(76px, 12vh, 128px);
  display: inline-flex; align-items: center; gap: 16px; min-height: 52px; padding: 10px 20px 10px 24px;
  font-family: var(--song); color: var(--ink-text); text-decoration: none;
  background: rgba(222, 230, 226, .5); border: 1px solid var(--ink-line);
  transition: opacity 2.4s .6s, background .6s, border-color .6s;
}
.seek-name { font-size: 20px; letter-spacing: .34em; margin-right: -.34em; }
.seek-note { font-size: 13px; letter-spacing: .16em; color: var(--ink-soft); }
.seek-arrow { position: relative; width: 26px; height: 1px; background: currentColor; opacity: .7; transition: width .6s; }
.seek-arrow::after { content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform-origin: 100% 0; transform: rotate(45deg) translate(1px, 0); }
.seek:hover, .seek:focus-visible { background: rgba(232, 237, 234, .8); border-color: rgba(38, 48, 46, .55); }
.seek:hover .seek-arrow { width: 34px; }

/* 提示 */
.hint { position: absolute; z-index: 6; left: clamp(16px, 3vw, 36px); bottom: 62px; margin: 0; font-family: var(--song); font-size: 13px; letter-spacing: .2em; color: var(--ink-soft); transition: opacity 1.6s; pointer-events: none; }
.hint-touch { display: none; }
@media (pointer: coarse) { .hint-touch { display: inline; } .hint-mouse { display: none; } }
.is-intro .hint, .hint.gone { opacity: 0; }

.toast {
  position: absolute; z-index: 8; left: 50%; bottom: 150px; margin: 0; padding: 10px 20px;
  font-family: var(--song); font-size: 17px; letter-spacing: .24em; white-space: nowrap;
  color: var(--ink-text); background: rgba(228, 234, 231, .94); border: 1px solid var(--ink-line);
  transform: translate(-50%, 6px); opacity: 0; transition: opacity .6s, transform .6s; pointer-events: none;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

.grain { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: .22; background-size: 220px 220px; }
.vignette { position: absolute; inset: 0; z-index: 4; pointer-events: none; background: linear-gradient(0deg, rgba(213, 223, 218, .6) 0, rgba(213, 223, 218, 0) 12%), radial-gradient(120% 110% at 50% 45%, rgba(0, 0, 0, 0) 66%, rgba(60, 80, 78, .08) 100%); }

.foot--map { position: absolute; z-index: 7; left: 0; right: 0; bottom: 0; color: rgba(38, 48, 46, .62); padding-top: 6px; padding-bottom: 0; transition: opacity 1.6s; }

.noscript { position: absolute; z-index: 9; left: 16px; right: 16px; top: 45%; text-align: center; font-family: var(--song); }

/* 文牒：月白素笺、墨字、宋体，外面一道细墨线、里面再压一道淡线，像装裱过的一页；遮罩是浅的，不压成黑 */
.map-page .wendie {
  color: var(--ink-text); background: #E2E9E5;
  border: 1px solid var(--ink-line); border-radius: 0;
  box-shadow: inset 0 0 0 6px #E2E9E5, inset 0 0 0 7px rgba(38, 48, 46, .14), 0 24px 70px rgba(38, 48, 46, .18);
  font-family: var(--song);
}
.map-page .wendie::backdrop { background: rgba(60, 76, 74, .26); }
.map-page .wendie-inner { padding: 26px 30px 32px; }
.map-page .wendie-head { border-bottom-color: var(--ink-line); padding-bottom: 10px; }
.map-page .wendie-head h2 { font-family: var(--song); font-size: 24px; letter-spacing: .5em; margin-right: -.5em; color: var(--ink-text); }
.map-page .wendie-close { font-family: var(--song); font-size: 14px; letter-spacing: .3em; color: var(--ink-soft); }
.map-page .wendie-close:hover { color: var(--ink-text); }
.map-page .wendie-empty { margin: 34px 0 4px; font-family: var(--song); font-size: 21px; letter-spacing: .16em; color: var(--ink-text); }
.map-page .wendie-note { font-family: var(--song); font-size: 14px; line-height: 2; letter-spacing: .06em; color: var(--ink-soft); }
.map-page .wendie-go {
  gap: 14px; margin-top: 22px; padding: 0 18px 0 20px;
  font-family: var(--song); font-size: 15px; letter-spacing: .2em;
  color: var(--ink-text); background: transparent; border: 1px solid var(--ink-line);
  transition: background .6s, border-color .6s;
}
.map-page .wendie-go::after { content: ""; width: 22px; height: 1px; background: currentColor; opacity: .7; transition: width .6s; }
.map-page .wendie-go:hover, .map-page .wendie-go:focus-visible { background: rgba(240, 244, 242, .6); border-color: rgba(38, 48, 46, .55); }
.map-page .wendie-go:hover::after { width: 30px; }
.map-page .wendie-seals li { font-family: var(--song); letter-spacing: .08em; }
.map-page .wendie-seals .seal-svg { width: 84px; height: 84px; }
.map-page .wendie-seals a { color: var(--ink-soft); text-decoration-thickness: 1px; text-underline-offset: 5px; }
.map-page .wendie-seals a:hover { color: var(--ink-text); }
@media (max-width: 600px) { .map-page .wendie-inner { padding: 22px 22px 28px; } }

/* 镜头推进：三个平面用不同倍率，前景从眼前掠过 */
.camera.pushing .plane-back { transform: translate(calc(var(--tx, 0px) * .5), calc(var(--ty, 0px) * .5)) scale(var(--s-back, 1.7)); transition: transform 1.15s cubic-bezier(.62, .02, .86, .28); }
.camera.pushing .scroller { transform: translate(var(--tx, 0px), var(--ty, 0px)) scale(var(--s-mid, 3.6)); transition: transform 1.15s cubic-bezier(.62, .02, .86, .28); overflow: hidden; }
.camera.pushing .plane-front { transform: translate(var(--tx, 0px), var(--ty, 0px)) scale(var(--s-front, 6)); opacity: 0; transition: transform 1.15s cubic-bezier(.62, .02, .86, .28), opacity .7s .2s; }
.camera.pushing .site { outline: none; }
.camera.pushing .site:not(.target) { opacity: 0; transition: opacity .25s; }
.camera.pushing .tag { opacity: 0; transition: opacity .25s; }
.curtain { position: fixed; inset: 0; z-index: 40; background: var(--paper); opacity: 0; pointer-events: none; transition: opacity .55s .62s; }
.curtain.down { opacity: 1; }
.leaving .colophon, .leaving .seek, .leaving .hint, .leaving .bar, .leaving .foot { opacity: 0; transition: opacity .3s; }

/* 开场：素绢上墨色慢慢晕开（map.js 的 playIntro 在画布上画），点一下或按键跳过 */
.intro { position: fixed; inset: 0; z-index: 30; cursor: pointer; background: var(--paper); transition: opacity .9s; }
.intro.ending { opacity: 0; pointer-events: none; }
.intro-veil { position: absolute; inset: 0; width: 100%; height: 100%; }
.intro-skip { position: absolute; right: clamp(16px, 3vw, 36px); bottom: 24px; min-width: 64px; min-height: 44px; font-family: var(--song); font-size: 14px; letter-spacing: .3em; color: var(--ink-soft); background: none; border: 0; cursor: pointer; opacity: .8; }
.intro-skip:hover { color: var(--ink-text); opacity: 1; }

@media (max-width: 600px) {
  .colophon { top: 74px; right: 20px; }
  .colophon-title { font-size: 28px; letter-spacing: .3em; }
  .colophon-motto { margin-right: 1em; padding-inline-start: 2.6em; font-size: 12px; letter-spacing: .22em; line-height: 2.1; }
  .seek { left: 16px; right: 16px; bottom: 100px; justify-content: center; gap: 12px; padding: 10px 14px; }
  .seek-name { font-size: 18px; }
  .seek-note { font-size: 12px; letter-spacing: .1em; }
  .tag-hook { font-size: 13px; letter-spacing: .14em; line-height: 1.9; }
  .tag-name { font-size: 15px; }
  .site--next .tag-hook { display: none; } /* 手机上只留第二站的印和站名，不和第一站的题跋挤在一起 */
  .site--next .tag-name { font-size: 14px; }
  .hint { bottom: 168px; left: 0; right: 0; text-align: center; font-size: 12px; }
  .foot--map { gap: 0 12px; font-size: 11px; justify-content: center; }
  .foot--map a { min-height: 44px; }
  .map-page .bar { padding-left: 12px; padding-right: 6px; }
  .map-page .bar-brand span { font-size: 16px; letter-spacing: .1em; }
  .map-page .bar nav a, .map-page .bar nav button { padding: 0 7px; font-size: 14px; letter-spacing: .12em; }
  .toast { bottom: 220px; font-size: 15px; }
}
@media (max-width: 600px) and (max-height: 700px) and (min-height: 481px) {
  /* 小屏竖着拿（iPhone SE 一类）：题款收紧往上提，不和汝窑的悬念挤在一起 */
  .colophon { top: 66px; }
  .colophon-title { font-size: 25px; }
  .colophon-motto { padding-inline-start: .8em; margin-right: .7em; line-height: 1.9; }
}
@media (max-width: 360px) {
  /* 首页没有品牌图，品牌名不能藏，只缩小 */
  .map-page .bar-brand span { font-size: 15px; letter-spacing: .06em; }
  .map-page .bar nav a, .map-page .bar nav button { padding: 0 5px; letter-spacing: .08em; }
}
@media (max-height: 480px) {
  /* 横屏手机放不下竖排大字：题跋缩小，站点小字改横排 */
  .site { --pin: 40px; }
  .tag, .tag-hook, .tag-name { writing-mode: horizontal-tb; }
  .tag { display: flex; flex-direction: column-reverse; gap: 2px; }
  .tag-hook { padding: 0; font-size: 12px !important; line-height: 1.5; letter-spacing: .06em; }
  .tag-name { display: flex; align-items: center; gap: 6px; font-size: 14px !important; letter-spacing: .12em; }
  .tag-name small { margin: 0; }
  .tag-seal { margin: 0; }
  .site--next .tag-hook { display: none; } /* 横屏时两站挨得近，第二站只留站名和印，和竖屏手机一样 */
  /* 第一站的字从窑旁往下排，落在窑下方的河面和雾上；第二站在它右上方，两组字不会撞。左边是前景山，字不能往左 */
  .site--open .tag { top: calc(var(--pin) / 2 - 2px); bottom: auto; left: calc(var(--pin) / 2 + 4px); }
  .colophon { display: none; } /* 和顶栏的品牌名重复，横屏放不下就不写 */
  .seek { top: 58px; bottom: auto; left: auto; right: clamp(12px, 3vw, 36px); min-height: 40px; padding: 4px 14px; gap: 10px; } /* 挪到右上角的空天里，不压山和站点 */
  .seek-name { font-size: 16px; }
  .seek-note { font-size: 11px; letter-spacing: .1em; }
  .foot--map { padding-top: 2px; font-size: 11px; }
  .hint { display: none; }
}

@media (max-height: 320px) {
  /* 特别矮的横屏：两句悬念并成一行，省出一行高度 */
  .tag-hook > span { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
  .layer.drift .layer-img, .layer--light.loaded { animation: none !important; }
  .layer--light.loaded { opacity: .6; }
}