/* ══════════════════════════════════════════════════════════
   沈绍安漆艺博物馆 · 全站共用样式
   配色纪律(策划案第一章):漆黑 / 朱砂 / 鎏金 / 米白 / 螺钿青
   禁止渐变紫与玻璃拟态
   ══════════════════════════════════════════════════════════ */

:root {
  --lacquer:  #16120E;  /* 漆黑 */
  --cinnabar: #A03428;  /* 朱砂 */
  --gold:     #B8933E;  /* 鎏金 */
  --rice:     #EFE9DD;  /* 米白 */
  --nacre:    #6E8B8F;  /* 螺钿青 */

  --pad: clamp(1.5rem, 3vw, 3rem);
  /* 顶部导航占位高度，页面内容从它下面开始，避免和站名压在一起 */
  --nav-h: calc(var(--pad) * 2 + 1.4rem);
  /* 全站主字体：思源宋体，和 logo 上那款宋体同属明朝体一脉。
     自托管在 assets/fonts/,不引任何外链。备选留系统宋体兜底。 */
  --serif: "Noto Serif SC", "Songti SC", "Source Han Serif SC", Georgia, serif;
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--lacquer);
  color: var(--rice);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
}
/* 注：首页用 GSAP 钉住第三屏，和 CSS scroll-snap 会打架，所以不用吸附 */

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* ── 一屏一节 ───────────────────────────────────────────── */
.screen {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: var(--nav-h) var(--pad) var(--pad);
}
.screen--light { background: var(--rice); color: var(--lacquer); }
.screen--dark  { background: var(--lacquer); color: var(--rice); }

/* 嵌板块用 iframe 隔离，各自的样式和拖拽互不干扰 */
.screen--embed { padding: 0; display: block; }
.screen--embed iframe { display: block; width: 100%; height: 100vh; border: 0; }

/* 叠在画面之上的文字层 */
.overlay {
  position: absolute;
  inset: 0;
  padding: var(--nav-h) var(--pad) var(--pad);
  pointer-events: none;
  display: grid;
  grid-template-rows: auto 1fr auto;
}
.overlay a, .overlay button { pointer-events: auto; }

/* 压一层暗角，保证叠字任何时候都读得清 */
.scrim-dark::before, .scrim-light::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
}
.scrim-dark::before {
  background:
    linear-gradient(100deg, rgba(22,18,14,.72) 0%, rgba(22,18,14,.34) 36%, transparent 62%),
    linear-gradient(to bottom, rgba(22,18,14,.55) 0%, transparent 18%),
    linear-gradient(to top, rgba(22,18,14,.5) 0%, transparent 16%);
}
.scrim-light::before {
  background: linear-gradient(100deg, rgba(239,233,221,.94) 0%, rgba(239,233,221,.6) 26%, transparent 46%);
}

/* ── 排版 ──────────────────────────────────────────────── */
.eyebrow {
  font-size: clamp(0.72rem, 0.9vw, 0.88rem);
  letter-spacing: 0.35em;
  color: var(--gold);
}

.display {
  font-size: clamp(2.4rem, 6vw, 6rem);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: 0.08em;
  max-width: 11em;
}
.display--vertical { width: 1em; line-height: 1.06; }

.lede {
  margin-top: 1.6em;
  max-width: 18em;
  font-size: clamp(0.9rem, 1.1vw, 1.08rem);
  line-height: 2.1;
  letter-spacing: 0.13em;
  opacity: .78;
}

.body-copy {
  max-width: 30em;
  font-size: clamp(0.88rem, 1vw, 1rem);
  line-height: 2.2;
  letter-spacing: 0.08em;
  opacity: .8;
}

.quote {
  font-size: clamp(1.1rem, 1.8vw, 1.6rem);
  line-height: 2.2;
  letter-spacing: 0.16em;
  color: var(--gold);
}
/* 竖排引文 */
.quote--vertical {
  writing-mode: vertical-rl;
  max-height: 60vh;
}

.screen-body { align-self: center; }
/* 大标题下面直接跟内容块时留出呼吸，避免压字 */
.screen-body > .acts,
.screen-body > .cols,
.screen-body > .timeline,
.screen-body > .placeholder,
.screen-body > .quote,
.screen-body > .body-copy { margin-top: 2.4rem; }
.screen-foot {
  align-self: end;
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 2rem;
  font-size: clamp(0.7rem, 0.85vw, 0.84rem);
  letter-spacing: 0.2em;
  opacity: .55;
}

/* ── 占位：结构已就位，素材待接入 ────────────────────────── */
.placeholder {
  position: relative;
  border: 1px solid currentColor;
  border-radius: 2px;
  opacity: .22;
  display: grid;
  place-items: center;
  min-height: 12rem;
  font-size: 0.8rem;
  letter-spacing: 0.25em;
}
.todo {
  display: inline-block;
  margin-top: 2.4em;
  padding: .5em 1.1em;
  border: 1px solid var(--gold);
  border-radius: 2px;
  color: var(--gold);
  font-size: clamp(0.66rem, 0.78vw, 0.76rem);
  letter-spacing: 0.28em;
  opacity: .85;
}

/* 幕/章的横向排布 */
.acts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: clamp(1rem, 2.5vw, 2.5rem);
  width: 100%;
}
.act { display: grid; gap: 1rem; align-content: start; }
.act__char {
  font-size: clamp(3rem, 7vw, 6.5rem);
  line-height: 1;
  color: var(--gold);
}
.act__name { font-size: .95rem; letter-spacing: .3em; opacity: .85; }
.act__note { font-size: .82rem; line-height: 2; letter-spacing: .08em; opacity: .55; }

/* 三栏/三章 */
.cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1.5rem, 3vw, 3.5rem);
  width: 100%;
}
.col h3 {
  font-size: clamp(1.2rem, 1.8vw, 1.7rem);
  font-weight: 400;
  letter-spacing: .12em;
  margin-bottom: .9em;
}
.col p { font-size: .86rem; line-height: 2.1; letter-spacing: .08em; opacity: .65; }

/* 时间轴 */
.timeline { display: grid; gap: 2.2rem; width: 100%; max-width: 46em; }
.tl-item { display: grid; grid-template-columns: 5.5em 1fr; gap: 1.6rem; align-items: baseline; }
.tl-year { color: var(--gold); font-size: 1.05rem; letter-spacing: .1em; }
.tl-text { font-size: .88rem; line-height: 2.1; letter-spacing: .06em; opacity: .75; }

/* ── 顶部导航 ──────────────────────────────────────────── */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem;
  padding: var(--pad);
  color: var(--rice);
  pointer-events: none;
  transition: color .6s ease;
  /* 顶部压一层极淡的渐变，任何底图上导航都读得清 */
  background: linear-gradient(to bottom, rgba(22,18,14,.6), transparent);
}
.nav--on-light {
  color: var(--lacquer);
  background: linear-gradient(to bottom, rgba(239,233,221,.75), transparent);
}
.nav a { pointer-events: auto; }
.nav__brand { font-size: clamp(.8rem, .95vw, .95rem); letter-spacing: .38em; }
.nav__links { display: flex; gap: clamp(.9rem, 1.8vw, 2rem); flex-wrap: wrap; }
.nav__links a {
  /* 对齐 logo 里中文那一行的字高。logo 是 clamp(190px,17vw,280px),
     中文行占其高度 39.9%,CJK 字面约为字号 0.87,换算出下面这三个界，这样任何视口宽度下导航字号都和 logo 上的中文一样大。 */
  font-size: clamp(.76rem, 1.086vw, 1.12rem);
  letter-spacing: .18em;
  opacity: .62;
  transition: opacity .5s ease;
}
.nav__links a:hover, .nav__links a[aria-current] { opacity: 1; }

/* ── 页脚：照 Stuflesser 版式复刻 ───────────────────────── */
.footer {
  background: var(--lacquer);
  color: var(--rice);
  padding: clamp(3.5rem, 7vw, 7rem) var(--pad) 1.6rem;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(2rem, 4vw, 5rem);
  max-width: 1400px;
  margin-inline: auto;
}
.footer h4 {
  font-size: clamp(1.05rem, 1.4vw, 1.45rem);
  font-weight: 400;
  letter-spacing: .12em;
  margin: 0 0 1.1em;
}
.footer__h4-gap { margin-top: 2.2em; }
.footer p { margin: 0 0 1.4em; font-size: .9rem; line-height: 2.05; letter-spacing: .06em; opacity: .82; }
.footer a { opacity: .82; transition: opacity .4s ease; }
.footer a:hover { opacity: 1; color: var(--gold); }
.footer__mail { color: var(--gold); }
.footer__socials { display: flex; gap: 1.2rem; }
.footer__socials a { border: 1px solid rgba(239,233,221,.35); border-radius: 50%;
  width: 2.6rem; height: 2.6rem; display: grid; place-items: center; font-size: .72rem; opacity: .85; }
.footer__socials a:hover { border-color: var(--gold); }

.footer__brandrow {
  display: flex; align-items: center; gap: 2rem;
  max-width: 1400px;
  margin: clamp(2.5rem, 5vw, 4.5rem) auto 3rem;
}
.footer__logo {
  display: block;
  width: clamp(210px, 19vw, 300px);
  aspect-ratio: 1386 / 193;
  background-color: currentColor;
  -webkit-mask: url("brand/logo-full.png") no-repeat left center / contain;
  mask: url("brand/logo-full.png") no-repeat left center / contain;
}
.footer__brand-divider { width: 1px; height: 3.4rem; background: rgba(239,233,221,.35); }
.footer__brand-text { font-size: .84rem; line-height: 1.9; letter-spacing: .14em; opacity: .75; }

.footer__rule { border-top: 1px solid rgba(239,233,221,.22); max-width: 1400px; margin-inline: auto; }
.footer__bar {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
  padding-top: 1.4rem; max-width: 1400px; margin-inline: auto;
  font-size: .78rem; letter-spacing: .1em; opacity: .55;
}
.footer__bar-links { display: flex; gap: 2rem; }
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr; } }

/* 一滴漆落下的向下提示 */
.scroll-cue {
  width: 1px; height: 3.5rem;
  background: linear-gradient(to bottom, transparent, var(--gold));
  transform-origin: top;
  animation: drip 2.6s ease-in-out infinite;
}
@keyframes drip {
  0%, 100% { transform: scaleY(.4); opacity: .35; }
  50%      { transform: scaleY(1);  opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scroll-cue { animation: none; }
}

@media (max-width: 720px) {
  .nav__links { display: none; }
  .display { max-width: 100%; }
}


/* ══ 首屏视频 ══════════════════════════════════════════════
   #video-frame 是那块会被滚动"收"起来的框，视频本身不动 */
#video-frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--lacquer);
  z-index: 0;
}
/* A/B 两层视频叠在一起，靠 class 决定谁铺满、谁是中间小窗 */
.hero-layer {
  position: absolute;
  object-fit: cover;
  /* 画面比视口宽,cover 会裁掉两侧。片中的竖排人物介绍烧在右边缘，所以把取景往右偏，别把它裁没了 */
  object-position: 78% center;
  display: block;
  transition: left .95s cubic-bezier(.65,0,.35,1),
              top .95s cubic-bezier(.65,0,.35,1),
              width .95s cubic-bezier(.65,0,.35,1),
              height .95s cubic-bezier(.65,0,.35,1),
              border-radius .95s ease,
              opacity .6s ease,
              box-shadow .8s ease;
}
/* 铺满整屏的那一层 */
.hero-layer.is-main {
  left: 0; top: 0; width: 100%; height: 100%;
  border-radius: 0;
  opacity: 1;
  z-index: 1;
  box-shadow: none;
  transition: opacity .95s ease;   /* 换片：柔和淡入，不做缩放位移 */
}
/* 淡入起点：已铺满但全透明 */
.hero-layer.is-main.is-fading { opacity: 0; transition: none; }
/* 中间的小窗那一层：默认隐身，鼠标挪到中间才亮出来 */
.hero-layer.is-mini {
  left: calc(50% - clamp(90px, 8.5vw, 130px));
  top: calc(50% - clamp(90px, 8.5vw, 130px));
  width: clamp(180px, 17vw, 260px);
  height: clamp(180px, 17vw, 260px);
  border-radius: 3px;
  opacity: 0;
  z-index: 3;
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
}
#video-frame:has(#hero-mini-hit:hover) .hero-layer.is-mini { opacity: 1; }

/* 小窗的点击热区 + 描边 */
#hero-mini-hit {
  position: absolute;
  left: calc(50% - clamp(90px, 8.5vw, 130px));
  top: calc(50% - clamp(90px, 8.5vw, 130px));
  width: clamp(180px, 17vw, 260px);
  height: clamp(180px, 17vw, 260px);
  z-index: 4;
  padding: 0;
  background: none;
  border: 1px solid transparent;
  border-radius: 3px;
  color: inherit;
  cursor: pointer;
  transition: border-color .5s ease, transform .5s cubic-bezier(.22,1,.36,1);
}
#hero-mini-hit:hover { border-color: rgba(239,233,221,.45); transform: scale(1.05); }
/* 换片过程中别让人连点 */
#video-frame.is-swapping #hero-mini-hit { pointer-events: none; opacity: 0; }

@media (max-width: 720px) {
  #hero-mini-hit, .hero-layer.is-mini { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-layer { transition: none; }
}
#screen-hero .overlay { z-index: 2; }

/* 钉住的轮播屏：第几张的指示点 */
.slide-dots { display: flex; gap: .7rem; align-items: center; }
.slide-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; opacity: .25;
  transition: opacity .5s ease, transform .5s ease;
}
.slide-dot.is-on { opacity: 1; transform: scale(1.6); background: var(--gold); }

/* 省流量/省电模式下不自动播视频 */
@media (prefers-reduced-motion: reduce) {
  #video-frame video { display: none; }
  #video-frame { background: var(--lacquer) center/cover no-repeat url("video/hero-poster.jpg"); }
}

/* ══ 衔接屏：文字在上，中间一张图随滚动展开成满屏 ═══════════ */
.clip-intro {
  min-height: 62vh;
  padding: var(--nav-h) var(--pad) 0;
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
}
.clip-intro .eyebrow { margin-bottom: 1.6em; }
.clip-intro .display { max-width: 100%; }
.clip-intro .lede { max-width: 28em; }

/* 用 CSS sticky 钉住，不用 GSAP pin —— pin 会搬动 DOM,里面的 iframe 会重载 */
.clip-track { height: 200vh; }
.clip-stage {
  position: sticky; top: 0;
  height: 100vh; width: 100%;
  display: grid; place-items: center;
}
.clip-mask {
  width: min(38vw, 460px);
  height: min(46vh, 520px);
  border-radius: 4px;
  overflow: hidden;
  will-change: width, height, border-radius;
}
.clip-mask img { width: 100%; height: 100%; object-fit: cover; }


/* ══ 钉住式板块：外层给滚动行程，内层 sticky 停住 ══════════════ */
.sticky-section { position: relative; }
.sticky-stage {
  position: sticky; top: 0;
  height: 100vh; width: 100%;
  overflow: hidden;
}
.sticky-stage > iframe {
  display: block; width: 100%; height: 100%; border: 0;
}

/* ══ 背景音乐开关：四根跳动的竖条 ═══════════════════════════ */
.audio-toggle {
  pointer-events: auto;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 16px;
  margin-left: .6rem;
  padding: 0;
  background: none;
  border: 0;
  color: inherit;   /* button 不会自动继承父级颜色，必须显式声明 */
  cursor: pointer;
  opacity: .62;
  transition: opacity .5s ease;
}
.audio-toggle:hover { opacity: 1; }
.audio-toggle .bar {
  width: 2px;
  height: 4px;
  background: currentColor;
  transform-origin: bottom;
}
/* 播放时四根条错开跳动；暂停时全部落回一条静止的短线 */
.audio-toggle.is-playing { opacity: 1; }
.audio-toggle.is-playing .bar { animation: bgm-bar 1.1s ease-in-out infinite; }
.audio-toggle.is-playing .bar:nth-child(2) { animation-delay: .18s; }
.audio-toggle.is-playing .bar:nth-child(3) { animation-delay: .36s; }
.audio-toggle.is-playing .bar:nth-child(4) { animation-delay: .54s; }
@keyframes bgm-bar {
  0%, 100% { height: 4px; }
  50%      { height: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .audio-toggle.is-playing .bar { animation: none; height: 10px; }
}

/* ══ 品牌标识 ═══════════════════════════════════════════════
   logo 是一张纯 alpha 的遮罩图，用 currentColor 上色，所以它会跟着导航自动在米白/漆黑之间切换，任何底色上都清晰。 */
.nav__brand { display: block; line-height: 0; }
.nav__logo {
  display: block;
  width: clamp(190px, 17vw, 280px);
  aspect-ratio: 1386 / 193;
  background-color: currentColor;
  -webkit-mask: url("brand/logo-full.png") no-repeat left center / contain;
  mask: url("brand/logo-full.png") no-repeat left center / contain;
}
/* 窄屏只留印章，不挤 */
@media (max-width: 720px) {
  .nav__logo {
    width: 40px;
    aspect-ratio: 1 / 1;
    -webkit-mask-image: url("brand/logo-seal.png");
    mask-image: url("brand/logo-seal.png");
  }
}


/* ══ 全屏栏目菜单(参照 Stuflesser) ═══════════════════════════ */
.nav__menu-btn {
  pointer-events: auto;
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 26px; height: 16px;
  margin-left: .9rem; padding: 0;
  background: none; border: 0; color: inherit; cursor: pointer;
  opacity: .62; transition: opacity .5s ease;
}
.nav__menu-btn:hover { opacity: 1; }
.nav__menu-btn span { display: block; height: 1px; background: currentColor; }

.menu {
  position: fixed; inset: 0; z-index: 200;
  background: var(--lacquer);
  color: var(--rice);
  display: grid;
  grid-template-rows: 1fr auto;
  place-items: center;
  padding: var(--pad);
  opacity: 0;
  transition: opacity .7s ease;
}
.menu[hidden] { display: none; }
.menu.is-open { opacity: 1; }

.menu__close {
  position: absolute; top: var(--pad); right: var(--pad);
  width: 2.4rem; height: 2.4rem;
  font-size: 1.9rem; line-height: 1;
  background: none; border: 0; color: var(--rice);
  opacity: .6; cursor: pointer;
  transition: opacity .4s ease;
}
.menu__close:hover { opacity: 1; }

.menu__links {
  display: grid; justify-items: center; gap: clamp(.5rem, 1.4vh, 1.1rem);
  text-align: center;
}
.menu__links a {
  font-size: clamp(1.7rem, 4.2vw, 3.4rem);
  letter-spacing: .14em;
  line-height: 1.35;
  opacity: .78;
  transition: opacity .4s ease, color .4s ease;
}
.menu__links a:hover { opacity: 1; color: var(--gold); }
.menu__links a[aria-current] { color: var(--gold); opacity: 1; }

.menu__foot {
  align-self: end;
  font-size: .74rem; letter-spacing: .28em; opacity: .4;
}
/* 中英切换(英文版待做，先立样式) */
.lang-switch { display: flex; align-items: center; gap: .9rem; opacity: 1; }
.lang {
  background: none; border: 0; color: var(--rice); cursor: pointer;
  font: inherit; font-size: .84rem; letter-spacing: .22em;
  opacity: .45; transition: opacity .4s ease, color .4s ease;
}
.lang:hover { opacity: .85; }
.lang.is-on { opacity: 1; color: var(--gold); }
.lang-dot { opacity: .35; }

@media (max-width: 720px) { .nav__links a { display: none; } }

/* ══ 全屏菜单：毛笔字 + 悬停浮现预览图 ═══════════════════════ */
.menu__links a {
  font-family: "MaShanZheng Menu", var(--serif);
  letter-spacing: .1em;
  position: relative;
  z-index: 2;
  /* 静止时完全居中；悬停的那个由 JS 往外弹 30px */
}
/* 毛笔字体缺「·」字形，分隔符退回宋体 */
.menu__links a .sep {
  font-family: var(--serif);
  margin: 0 .34em;
  opacity: .5;
  font-size: .62em;
  vertical-align: .12em;
}
/* 悬停某项时，其余项压暗，焦点更清楚 */
.menu__links:hover a { opacity: .3; }
.menu__links:hover a:hover { opacity: 1; color: var(--gold); }

/* 预览图层：散落瓷砖(移植自炫酷站合集「瓷砖拼图菜单」codrops/ImageTilesMenu)。
   全局固定层：顶栏悬停和全屏菜单悬停共用，盖在一切之上、不吃鼠标。 */
.menu__previews { position: fixed; inset: 0; z-index: 210; pointer-events: none; overflow: hidden; }
.mp { position: absolute; inset: 0; opacity: 0; }
.mp.is-on { opacity: 1; }

/* 每块瓷砖用 --gr/--gc(占屏百分比)定位,--gw 定宽，竖构图 3:4 */
.mp__tile {
  position: absolute;
  top: calc(var(--gr) * 1%);
  left: calc(var(--gc) * 1%);
  width: clamp(90px, var(--gw), 300px);
  aspect-ratio: 3 / 4;
  background-size: cover;
  background-position: 50% 50%;
  opacity: 0;
  will-change: transform, opacity;
  box-shadow: 0 18px 50px rgba(0,0,0,.5);
}

.mp__cap {
  position: absolute;
  left: 50%; bottom: 6%;
  transform: translateX(-50%);
  text-align: center;
  max-width: 40vw;
  font-family: var(--serif);
  font-size: clamp(.72rem, .88vw, .88rem);
  letter-spacing: .26em;
  color: var(--gold);
  opacity: .8;
}

@media (max-width: 900px) {
  .menu__previews { display: none; }
  .menu__links:hover a { opacity: .78; }
}

/* ══ 首屏白漆底 + 毛笔引导 ═══════════════════════════════════ */
/* 视频框透明，滚动收框时露出的是白漆肌理，不再是黑底 */
#screen-hero #video-frame { background: transparent; }

.brush-cue {
  opacity: 0;               /* 初始藏着，滚动收框时由 home.js 淡入 */
  height: clamp(110px, 15vh, 180px);
  width: auto;
  margin-right: -0.6rem;
  transform-origin: top center;
  animation: brush-dip 3.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes brush-dip {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(12px); }
}
@media (prefers-reduced-motion: reduce) { .brush-cue { animation: none; } }

/* 首屏视频底部 → 第二板块：一层渐变虚影，柔和地融进漆黑 */
#screen-hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 24vh;
  background: linear-gradient(to bottom, rgba(22,18,14,0), rgba(22,18,14,.55) 55%, var(--lacquer));
  pointer-events: none;
  z-index: 2;
}

/* ══ 板块间渐变衔接带：暗↔亮不生硬 ═══════════════════════════ */
.blend { height: 18vh; pointer-events: none; }
.blend--dark-to-light { background: linear-gradient(to bottom, var(--lacquer), #EFE9DD); }
.blend--light-to-dark { background: linear-gradient(to bottom, #EFE9DD, var(--lacquer)); }

/* 博物馆三图排 */
.photo-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(.8rem, 1.6vw, 1.6rem);
  margin-top: 2.4rem;
  width: 100%;
}
.photo-row img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
/* 起点工程大图 */
.feature-img {
  width: min(58vw, 900px);
  margin-top: 2.4rem;
  display: block;
}
@media (max-width: 720px) { .photo-row { grid-template-columns: 1fr; } .feature-img { width: 100%; } }

/* ══ 关键修复：滚动驱动的两个 iframe 对鼠标"隐形" ═══════════════
   有头浏览器里，滚轮悬在全屏 iframe 上会被 iframe 吞掉，页面滚不动
   (无头环境不吞，所以此前测不出来)。这两屏不需要任何页内交互,
   pointer-events:none 让滚轮直达父页,scrub 正常跟手。 */
#slider2-frame, #carousel-frame { pointer-events: none; }

/* ══ 板块衔接柔化：轮播画面从漆黑里浮现，再沉回漆黑 ═══════════ */
#screen-carousel .sticky-stage::before,
#screen-carousel .sticky-stage::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 18vh;
  pointer-events: none;
  z-index: 3;
}
#screen-carousel .sticky-stage::before {
  top: 0;
  background: linear-gradient(to bottom, var(--lacquer), rgba(22,18,14,0));
}
#screen-carousel .sticky-stage::after {
  bottom: 0;
  background: linear-gradient(to top, var(--lacquer), rgba(22,18,14,0));
}

/* ══ 博物馆：参观信息行 + 馆舍/地图切换 ═══════════════════════ */
.visit-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 1.4rem;
  margin-top: 2.2rem;
  font-size: .88rem; letter-spacing: .1em;
}
.visit-badge {
  background: var(--rice);
  color: var(--lacquer);
  border: 0;
  padding: .42em 1.1em;
  border-radius: 2px;              /* 方形，非胶囊 */
  letter-spacing: .3em;
}
.visit-hours { opacity: .75; }
.visit-tabs { display: flex; gap: .8rem; margin-left: auto; }
.visit-tab {
  background: none; border: 1px solid rgba(239,233,221,.35);
  color: inherit;                 /* button 不继承色，显式声明 */
  padding: .5em 1.6em; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: .85rem; letter-spacing: .18em;
  transition: color .35s ease, border-color .35s ease;
}
.visit-tab:hover, .visit-tab.is-on { color: var(--gold); border-color: var(--gold); }

.visit-panels { position: relative; margin-top: 1.6rem; width: 100%; }
.visit-panel { display: none; }
.visit-panel.is-on { display: grid; }
.visit-panels .photo-row { margin-top: 0; }
.map-panel iframe {
  width: 100%; height: 52vh; border: 0; display: block;
  filter: saturate(.9);
}


/* 藏品画布底部渐入漆黑，柔和接博物馆板块 */
#screen-works { position: relative; }
#screen-works::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 16vh;
  background: linear-gradient(to top, var(--lacquer), rgba(22,18,14,0));
  pointer-events: none;
}

/* ══ 工艺板块文字：羽化磨砂——毛玻璃垫底，边缘用遮罩晕开，无硬边 ══ */
.craft-caps { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.craft-cap {
  position: absolute;
  left: 4vw; bottom: 9vh;
  max-width: 36em;
  padding: 2.2rem 3.4rem 2.4rem 2.6rem;
  color: var(--rice);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s ease, transform .7s ease;
}
.craft-cap.is-on { opacity: 1; transform: none; }
.craft-cap h3 {
  margin: 0 0 .7em;
  font-size: clamp(1.4rem, 2vw, 2rem);
  font-weight: 400; letter-spacing: .16em;
  text-shadow: 0 1px 3px rgba(0,0,0,.85), 0 4px 22px rgba(0,0,0,.6);
}
.craft-cap p {
  margin: 0;
  font-size: clamp(.88rem, 1.02vw, 1.02rem);
  line-height: 2.1; letter-spacing: .1em;
  opacity: .95;
  text-shadow: 0 1px 2px rgba(0,0,0,.85), 0 3px 16px rgba(0,0,0,.6);
}

/* ══ 博物馆：馆门实拍为底(已暗化),内容待定 ═══════════════════ */
.museum-hero {
  background: var(--lacquer) url("img/museum-gate.jpg") center / cover no-repeat;
  min-height: 100vh;
  padding: 0;
}

/* ══ 博物馆：左文右图两栏，顶底对齐 ═════════════════════════ */
#screen-museum {
  display: grid;
  place-items: center;
  padding: var(--nav-h) var(--pad) var(--pad);
}
.museum-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(2.5rem, 5vw, 6rem);
  align-items: stretch;          /* 两栏等高 */
  width: 100%;
  max-width: 1500px;
}
/* 左栏：整块垂直居中，标题控制在两行 */
.museum-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2.2rem;
  padding: .2rem 0;
}
.museum-left .display {
  margin: 0;
  max-width: 100%;
  font-size: clamp(1.9rem, 3.4vw, 3.5rem);   /* 收小一档，两行放得下 */
  line-height: 1.3;
}
.museum-sub {
  margin: 0;
  font-size: clamp(.9rem, 1.1vw, 1.06rem);
  letter-spacing: .16em;
  opacity: .62;
}
.museum-left .lede { margin-top: 1.6rem; }
.museum-meta { display: grid; gap: 1.4rem; }
.museum-meta .visit-bar { margin-top: 0; }
.museum-left .visit-tabs { margin-left: 0; }
/* 两个面板同高：切换时右侧不跳动 */
.museum-right .visit-panel { min-height: var(--gal-h, 0px); }
.museum-right .map-panel { display: none; }
.museum-right .map-panel.is-on { display: block; }
.museum-right .map-panel iframe {
  width: 100%;
  height: var(--gal-h, 54vh);
  border-radius: 14px;
  display: block;
}

/* 馆舍图廊：大图 + 下方缩略图，全圆弧 */
.gal { display: grid; gap: 1rem; }
.gal-main { position: relative; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; }
.gal-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .8s ease;
}
.gal-img.is-on { opacity: 1; }
.gal-thumbs { display: grid; grid-template-columns: repeat(6, 1fr); gap: .6rem; }
.gal-dot {
  padding: 0; border: 0; background: none; cursor: pointer;
  aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden;
  opacity: .42; transition: opacity .4s ease, outline-color .4s ease;
  outline: 1px solid transparent; outline-offset: 2px;
}
.gal-dot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gal-dot:hover { opacity: .8; }
.gal-dot.is-on { opacity: 1; outline-color: var(--gold); }
@media (max-width: 900px) { .museum-grid { grid-template-columns: 1fr; } }

/* 藏品画布上缘也加渐纱，双向都柔 */
#screen-works::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  height: 12vh;
  background: linear-gradient(to bottom, var(--lacquer), rgba(22,18,14,0));
  pointer-events: none;
  z-index: 1;
}

/* 永恒中轴：视频收成居中画框，四周留白给内容 */
#screen-zz {
  position: relative;
  display: grid;
  place-items: center;
  background: var(--lacquer);
  padding: var(--nav-h) var(--pad) var(--pad);
}
.zz-frame {
  width: min(60vw, 1000px);
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 30px 90px rgba(0,0,0,.55);
}
.zz-video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ══ 永恒中轴：金光底图(压暗) + 画框 + 可点标题 ═══════════════ */
#screen-zz {
  position: relative;
  display: grid; place-items: center;
  padding: var(--nav-h) var(--pad) var(--pad);
  background: var(--lacquer) url("img/zz-bg.jpg") center / cover no-repeat;
  overflow: hidden;
}
/* 上下渐入漆黑，和前后板块无缝衔接 */
#screen-zz::before, #screen-zz::after {
  content: ""; position: absolute; left: 0; right: 0; height: 22vh;
  pointer-events: none; z-index: 1;
}
#screen-zz::before { top: 0; background: linear-gradient(to bottom, var(--lacquer), rgba(22,18,14,0)); }
#screen-zz::after { bottom: 0; background: linear-gradient(to top, var(--lacquer), rgba(22,18,14,0)); }

.zz-inner { position: relative; z-index: 2; display: grid; justify-items: center; gap: 2.6rem; }
.zz-frame {
  width: min(56vw, 940px);
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 30px 90px rgba(0,0,0,.6);
}
.zz-video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 标题：点击进专题 */
.zz-title { display: block; line-height: 0; transition: transform .6s ease, filter .6s ease; }
.zz-title img { width: min(34vw, 460px); height: auto; display: block; }
.zz-title:hover { transform: translateY(-4px); filter: brightness(1.2); }