/* ════════════════════════════════════════════════════════════
   火光 · 清晨美术馆（浅色版）
   概念：深山里的美术馆，山间清晨。清水混凝土的暖浅灰墙面，
   柔和天窗光从上方洒下，作品被晨光照亮，周围是明亮的留白。
   色调：米白 / 浅灰 / 雾灰蓝，强调色是清晨第一缕阳光的暖橙。
   ════════════════════════════════════════════════════════════ */

:root {
  /* 本站自行管理昼夜主题，阻止 Android WebView 对清晨模式自动反色 */
  color-scheme: only light;

  /* 材质色 */
  --paper:      #F6F3EC;   /* 米白 · 晨雾里的墙面 */
  --paper-2:    #EFEBE1;   /* 稍深的米 · 背光处 */
  --concrete:   #E7E2D6;   /* 清水混凝土 · 暖浅灰 */
  --kraft:      #E9DFC9;   /* 牛皮纸 · 留言簿 */
  --kraft-line: rgba(122, 102, 72, .28);

  /* 墨色（不纯黑，带体温） */
  --ink:        #34312A;
  --ink-soft:   #4F4A40;
  --ink-faint:  #746C5E;

  /* 氛围色 */
  --fog-blue:   #8C99A4;   /* 雾灰蓝 */
  --ember:      #C4703B;   /* 暖橙 · 清晨第一缕阳光 */
  --ember-soft: rgba(196, 112, 59, .12);
  --pencil:     #76705F;   /* 铅笔灰 · 手写批注 */

  --hairline:   rgba(52, 49, 42, .14);
  --hairline-2: rgba(52, 49, 42, .07);

  /* 字体 */
  --serif: 'Noto Serif SC', 'Songti SC', serif;
  --latin: 'Bodoni Moda', 'Noto Serif SC', serif;
  --mono:  'IBM Plex Mono', 'SF Mono', monospace;
  --brush: 'Ma Shan Zheng', 'Kaiti SC', var(--serif);        /* 毛笔 · 馆名 / 大标题 / 署名 */
  --hand:  'LXGW WenKai', 'Kaiti SC', 'STKaiti', 'KaiTi', 'Kaiti TC', 'DFKai-SB', var(--serif);  /* 手写 · 铅笔批注 / 留言簿 */

  /* 版式 */
  --sidebar: 16.5rem;
  --measure: 46rem;

  /* 光 */
  --skylight: radial-gradient(ellipse 90% 55% at 50% -8%, rgba(255, 253, 246, .95), rgba(255, 253, 246, 0) 70%);
}

/* ════════════════════════════════════════════════════════════
   深夜美术馆（深色模式）
   深夜场的墙面沉入墨蓝黑，作品由一盏暖灯照亮，
   强调色仍是暖橙，像深夜展厅里唯一亮着的一盏射灯。
   ════════════════════════════════════════════════════════════ */
:root[data-theme="dark"] {
  color-scheme: dark;

  /* 材质色 —— 深夜的墙面 */
  --paper:      #18150F;   /* 墨褐 · 深夜墙面 */
  --paper-2:    #211D15;   /* 稍亮的墨褐 · 灯光正下方 */
  --concrete:   #14110C;   /* 深灰墙角 */
  --kraft:      #2A2419;   /* 牛皮纸 · 深夜留言簿 */
  --kraft-line: rgba(196, 148, 92, .32);

  /* 墨色（深夜里反转为浅色字） */
  --ink:        #E9E2D2;
  --ink-soft:   #B7AD97;
  --ink-faint:  #837B66;

  /* 氛围色 */
  --fog-blue:   #6E7A85;   /* 深夜雾蓝 */
  --ember:      #D9804A;   /* 暖橙 · 展厅唯一亮着的灯 */
  --ember-soft: rgba(217, 128, 74, .16);
  --pencil:     #9A917C;   /* 铅笔灰 · 手写批注 */

  --hairline:   rgba(233, 226, 210, .16);
  --hairline-2: rgba(233, 226, 210, .08);

  /* 光 —— 深夜只有一盏顶灯 */
  --skylight: radial-gradient(ellipse 90% 55% at 50% -8%, rgba(255, 236, 200, .08), rgba(255, 236, 200, 0) 70%);
}

/* ── 基础 ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background-color: var(--paper);
  background-image: url("/assets/page-bg-light.webp");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* 深色模式：换用深夜背景图 */
:root[data-theme="dark"] body {
  background-image: url("/assets/page-bg-dark.webp");
  background-color: #18150F;
}
/* 天窗光：全页面顶部一层柔和的晨光 */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: var(--skylight);
  pointer-events: none;
  z-index: 0;
}
::selection { background: var(--ember-soft); color: var(--ink); }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--ember); }

h1, h2, h3, h4 { font-weight: 700; line-height: 1.4; margin: 0; }
p { margin: 0; }

.meta {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .14em;
  color: var(--ink-faint);
  text-transform: uppercase;
}
.wrap { max-width: 88rem; margin: 0 auto; padding: 0 clamp(1.6rem, 4vw, 3.5rem); position: relative; z-index: 1; }

/* ── 入场：像晨光慢慢漫进来 ──────────────────────────── */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .9s ease var(--d, 0s), transform .9s cubic-bezier(.22, .8, .3, 1) var(--d, 0s); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ══════════════════════════════════════════════════════
   侧栏 · 美术馆的门牌与导览
   ══════════════════════════════════════════════════════ */
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar);
  padding: 2.6rem 2.2rem;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--hairline-2);
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
  z-index: 20;
}
.sidebar__brand { display: block; }
.sidebar__brand .name {
  font-family: var(--brush);
  font-weight: 400;
  font-size: 1.8rem;
  letter-spacing: .1em;
  color: var(--ink);
}
.sidebar__brand .latin {
  display: block;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .3em;
  color: var(--ink-faint);
  margin-top: .35rem;
}
.sidebar__motto {
  margin-top: 1.1rem;
  font-size: .78rem;
  color: var(--ink-soft);
  letter-spacing: .12em;
  writing-mode: horizontal-tb;
}
.sidebar__nav { margin-top: 3.2rem; display: flex; flex-direction: column; gap: .1rem; }
.sidebar__nav a {
  display: flex;
  align-items: baseline;
  gap: .8rem;
  padding: .55rem 0;
  font-size: .95rem;
  letter-spacing: .28em;
  color: var(--ink-soft);
  border-bottom: 1px solid transparent;
  transition: color .3s, letter-spacing .3s;
}
.sidebar__nav a .n {
  font-family: var(--latin);
  font-size: .68rem;
  letter-spacing: .08em;
  color: var(--ink-faint);
}
.sidebar__nav a:hover { color: var(--ember); letter-spacing: .34em; }
.sidebar__nav a.is-active { color: var(--ink); }
.sidebar__nav a.is-active .n { color: var(--ember); }
.sidebar__nav a.is-active::after {
  content: '';
  width: 1.6rem;
  height: 1px;
  background: var(--ember);
  align-self: center;
  margin-left: auto;
}
.sidebar__foot {
  margin-top: auto;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .18em;
  color: var(--ink-faint);
  line-height: 2.2;
}

/* 主区让出侧栏；短页面的页脚也始终停在视窗底部 */
.main {
  margin-left: var(--sidebar);
  position: relative;
  z-index: 1;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}
.main__content { flex: 1 0 auto; }

/* 移动端：侧栏变顶栏 */
.topbar { display: none; }
@media (max-width: 56rem) {
  .sidebar { display: none; }
  .main { margin-left: 0; }
  .topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.4rem;
    border-bottom: 1px solid var(--hairline-2);
    background: rgba(246, 243, 236, .92);
    backdrop-filter: blur(8px);
    position: sticky;
    top: 0;
    z-index: 30;
  }
  .topbar .name { font-family: var(--brush); font-weight: 400; letter-spacing: .12em; font-size: 1.15rem; }
  .topbar nav { display: flex; gap: 1.1rem; }
  .topbar nav a { font-size: .85rem; letter-spacing: .18em; color: var(--ink-soft); }
  .topbar nav a.is-active { color: var(--ember); }
}
@media (max-width: 40rem) {
  .topbar { flex-wrap: wrap; gap: .65rem 1rem; padding: .85rem 1.15rem; }
  .topbar > a { order: 1; }
  .topbar .theme-toggle { order: 2; margin-left: auto; }
  .topbar nav {
    order: 3;
    width: 100%;
    gap: 1rem;
    padding-top: .65rem;
    border-top: 1px solid var(--hairline-2);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .topbar nav::-webkit-scrollbar { display: none; }
  .topbar nav a { flex: 0 0 auto; font-size: .78rem; letter-spacing: .14em; }
}

/* ══════════════════════════════════════════════════════
   首页 · 入口：门缝里透出的一线晨光
   ══════════════════════════════════════════════════════ */
.entrance {
  position: relative;
  height: 100vh;
  min-height: 34rem;
  overflow: hidden;
  background: var(--concrete);
}
.entrance__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* 晨雾：让底图更柔、更不刺眼 */
.entrance::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(246, 243, 236, .18) 0%, rgba(246, 243, 236, 0) 30%, rgba(246, 243, 236, .08) 72%, rgba(246, 243, 236, .62) 100%);
  pointer-events: none;
}
.entrance__caption {
  position: absolute;
  left: calc(50% + 60px);
  bottom: 48%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 2;
  width: max-content;
  max-width: 88vw;
}
/* 保留标题自身的水平定位，避免通用 reveal 动画结束后覆盖 translateX。 */
.entrance__caption.reveal { transform: translate(-50%, 14px); }
.entrance__caption.reveal.is-in { transform: translateX(-50%); }
/* 引导竖线：位于「向下走进展厅」上方，垂下一条细线 */
.entrance__scroll .line {
  display: block;
  width: 1.5px;
  height: 2.8rem;
  margin: 0 auto .9rem;
  /* 浅色：线条更粗、更实、更明显 */
  background: linear-gradient(180deg, transparent, rgba(52, 49, 42, .72) 36%, #34312A 100%);
}
/* 深色：保持柔和，浅米色淡入 */
:root[data-theme="dark"] .entrance__scroll .line {
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--ink-soft) 60%, var(--ink) 100%);
}
.entrance__caption h1 {
  font-size: .92rem;
  font-weight: 400;
  letter-spacing: .5em;
  text-indent: .5em;
  color: #3E3A2E;
  white-space: nowrap;
}
.entrance__caption .sub {
  margin-top: .7rem;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .32em;
  color: #5B5644;
  white-space: nowrap;
}
/* 副标题：清晨 / 深夜 随主题切换 */
.sub-word--night { display: none; }
:root[data-theme="dark"] .sub-word--day { display: none; }
:root[data-theme="dark"] .sub-word--night { display: inline; }

/* 通用：白天 / 深夜文案随主题切换 */
.t-night { display: none; }
:root[data-theme="dark"] .t-day { display: none; }
:root[data-theme="dark"] .t-night { display: inline; }
@media (max-width: 40rem) {
  /* 两行移动导航约占 7rem，入口只使用其下方真实可见的安全视口。 */
  .entrance {
    height: calc(100vh - 7rem);
    height: calc(100svh - 7rem);
    min-height: 0;
  }
  /* 竖屏裁切时把原图向右推，让门体与门缝都进入画面。 */
  .entrance__img { object-position: 42% center; }
  .entrance__caption {
    left: 66%;
    bottom: 11.5rem;
    max-width: calc(100vw - 2rem);
  }
  .entrance__caption h1 { font-size: .8rem; letter-spacing: .34em; text-indent: .34em; }
  .entrance__caption .sub {
    max-width: calc(100vw - 2rem);
    font-size: .5rem;
    line-height: 1.8;
    letter-spacing: .12em;
    white-space: normal;
  }
  .entrance__scroll {
    bottom: max(1.2rem, env(safe-area-inset-bottom));
    font-size: .6rem;
    letter-spacing: .24em;
    white-space: nowrap;
  }
}
.entrance__scroll {
  position: absolute;
  left: 50%;
  bottom: 2.2rem;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .3em;
  color: var(--ink);
  z-index: 2;
  animation: breathe 3.2s ease-in-out infinite;
}
/* 深色下：滚动提示保持柔和淡色 */
:root[data-theme="dark"] .entrance__scroll {
  color: var(--ink-faint);
}
@keyframes breathe { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .entrance__caption.reveal { transform: translateX(-50%); }
}

/* 入口下方的导览语 */
.intro {
  padding: clamp(4rem, 9vw, 7rem) 0 clamp(3rem, 6vw, 5rem);
  text-align: center;
}
.intro__tagline {
  font-size: clamp(1.25rem, 2.6vw, 1.7rem);
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 2.1;
  max-width: 26em;
  margin: 0 auto;
}
.intro__tagline em { font-style: normal; color: var(--ember); }
.intro__note {
  margin: 1.6rem auto 0;
  max-width: 34em;
  font-size: .88rem;
  color: var(--ink-soft);
  line-height: 2.2;
}
.intro__actions { padding: 1.7rem 0 0; }

/* ══════════════════════════════════════════════════════
   展区通用 · 章节头
   ══════════════════════════════════════════════════════ */
.hall { padding: clamp(3rem, 7vw, 5.5rem) 0; border-top: 1px solid var(--hairline-2); }
.hall-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: clamp(2.2rem, 5vw, 3.6rem);
}
.hall-head h2 {
  font-size: clamp(1.35rem, 2.6vw, 1.8rem);
  font-weight: 900;
  letter-spacing: .22em;
}
.hall-head h2 .no {
  font-family: var(--latin);
  font-weight: 400;
  font-size: .8em;
  color: var(--ember);
  margin-right: .9rem;
  letter-spacing: .05em;
}
.hall-head .meta { flex-shrink: 0; }
.hall-head__sub {
  margin-top: .8rem;
  font-size: .85rem;
  color: var(--ink-soft);
  letter-spacing: .06em;
}

/* ══════════════════════════════════════════════════════
   三宫格展厅 · 作品
   ══════════════════════════════════════════════════════ */
.rooms {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2.6rem, 5vw, 4.2rem);
}
@media (max-width: 62rem) { .rooms { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 40rem) { .rooms { grid-template-columns: 1fr; } }

.room { display: block; }
.room__frame {
  --spot-x: 50%;
  --spot-y: 42%;
  position: relative;
  overflow: hidden;
  width: 78%;
  margin: 0 auto;
  background: #1d1b16;
  border-radius: 6px;
  box-shadow:
    0 1px 2px rgba(28, 24, 16, .5),
    0 4px 8px -1px rgba(28, 24, 16, .36),
    0 10px 18px -4px rgba(28, 24, 16, .4),
    0 28px 52px -16px rgba(28, 24, 16, .58),
    0 44px 80px -22px rgba(28, 24, 16, .5),
    0 66px 120px -30px rgba(28, 24, 16, .4),
    0 8px 14px rgba(28, 24, 16, .24);
}
.room__frame::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    circle at var(--spot-x) var(--spot-y),
    rgba(255, 226, 171, .18) 0,
    rgba(230, 179, 105, .07) 26%,
    transparent 60%
  );
  mix-blend-mode: screen;
  transition: opacity .4s ease;
}
.room__frame img {
  width: 100%;
  aspect-ratio: 9 / 11;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(.22, .8, .3, 1);
}
.room:hover .room__frame img { transform: scale(1.025); }

/* 展签牌 · 羊皮纸（浅色微颗粒 · 粗糙纸面） · 与图片同宽 · 高度统一 */
.room .label {
  position: relative;
  margin: 0 auto;
  width: 82%;
  height: 13rem;
  padding: 1.05rem 1.1rem 1.1rem;
  display: flex;
  flex-direction: column;
  /* 固定从同一条顶部基线排版，避免批注换行数不同导致整组文字上下漂移 */
  justify-content: flex-start;
  background-color: #FCF9F0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 60% 46% at 20% 24%, rgba(168, 142, 100, .05), transparent 62%),
    radial-gradient(ellipse 52% 40% at 84% 14%, rgba(168, 142, 100, .04), transparent 62%),
    radial-gradient(ellipse 64% 38% at 66% 86%, rgba(150, 122, 80, .05), transparent 64%),
    linear-gradient(115deg, #FCFAF1 0%, #FAF6E9 50%, #FCF9F0 100%);
  border: 1px solid rgba(122, 100, 66, .18);
  border-top: 0;
  border-radius: 0 0 6px 6px;
  box-shadow:
    inset 0 0 24px rgba(122, 98, 60, .08),
    0 8px 16px -12px rgba(28, 24, 16, .22);
}
.room .label::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 55% at 50% -4%, rgba(255, 253, 244, .5), transparent 58%),
    radial-gradient(ellipse 84% 58% at 50% 114%, rgba(126, 98, 58, .12), transparent 58%);
}
/* 展签 */
.label {
  padding: 1.15rem .2rem 0;
}
.label__no {
  font-family: var(--latin);
  font-size: .78rem;
  letter-spacing: .12em;
  color: var(--ink-faint);
}
.label__title {
  margin-top: .4rem;
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: .05em;
  line-height: 1.45;
  color: var(--ink);
}
.label__year {
  font-family: var(--latin);
  font-size: .75rem;
  color: var(--ink-faint);
  margin-top: .35rem;
  letter-spacing: .1em;
}
/* 手写铅笔批注 */
.label__note {
  margin-top: .8rem;
  font-family: var(--hand);
  font-size: .9rem;
  line-height: 1.75;
  color: var(--pencil);
  transform: rotate(-.5deg);
  max-width: 92%;
}

/* ══════════════════════════════════════════════════════
   画册 · 文章目录与内页
   ══════════════════════════════════════════════════════ */
.toc { border-top: 1px solid var(--hairline); }
.toc a {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 1.05rem .2rem;
  border-bottom: 1px solid var(--hairline-2);
  transition: padding-left .35s ease;
}
.toc a:hover { padding-left: .8rem; }
.toc .t {
  font-size: 1.02rem;
  letter-spacing: .05em;
  color: var(--ink);
}
.toc .dots {
  flex: 1;
  border-bottom: 1px dotted var(--ink-faint);
  transform: translateY(-4px);
  opacity: .7;
}
.toc .p {
  font-family: var(--latin);
  font-size: .8rem;
  color: var(--ink-faint);
  letter-spacing: .06em;
}
.toc .date {
  font-family: var(--mono);
  font-size: .68rem;
  color: var(--ink-faint);
  letter-spacing: .1em;
}

/* 画册内页（文章正文） */
.album-page { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.prose {
  max-width: var(--measure);
  margin: 0 auto;
  font-size: .98rem;
  line-height: 2.25;
  color: var(--ink);
  letter-spacing: .02em;
}
.prose > p:first-child::first-letter {
  font-size: 2.6em;
  font-weight: 900;
  float: left;
  line-height: 1.05;
  padding: .08em .18em 0 0;
  color: var(--ember);
}
.prose h2 {
  font-size: 1.2rem;
  letter-spacing: .12em;
  margin: 2.6em 0 1em;
  padding-left: .9rem;
  border-left: 2px solid var(--ember);
}
.prose h3 { font-size: 1.05rem; margin: 2.2em 0 .8em; letter-spacing: .08em; }
.prose p { margin: 1.2em 0; }
.prose a { color: var(--ember); border-bottom: 1px solid var(--ember-soft); }
.prose a:hover { border-bottom-color: var(--ember); }
.prose blockquote {
  margin: 2em 0;
  padding: .2rem 0 .2rem 1.4rem;
  border-left: 2px solid var(--fog-blue);
  color: var(--ink-soft);
  font-size: .94rem;
}
.prose img { margin: 2rem auto; box-shadow: 0 20px 44px -24px rgba(52, 49, 42, .3); }
.prose ul, .prose ol { padding-left: 1.4em; margin: 1.2em 0; }
.prose li { margin: .4em 0; }
.prose hr { border: 0; border-top: 1px solid var(--hairline); margin: 3em auto; width: 4rem; }
.prose strong { font-weight: 700; }
.prose code {
  font-family: var(--mono);
  font-size: .85em;
  background: var(--paper-2);
  padding: .12em .4em;
  border-radius: 2px;
}

/* ══════════════════════════════════════════════════════
   放映厅 · 亮着的屏幕
   ══════════════════════════════════════════════════════ */
.screens {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(2.2rem, 4.5vw, 3.5rem);
}
@media (max-width: 46rem) { .screens { grid-template-columns: 1fr; } }
.screen { display: block; }
.screen__frame {
  position: relative;
  background: #2E2B25;
  padding: .55rem;
  box-shadow:
    0 0 0 1px rgba(52, 49, 42, .18),
    0 24px 48px -20px rgba(52, 49, 42, .35),
    0 0 60px -18px rgba(255, 250, 236, .5); /* 屏幕发出的柔光 */
}
.screen__frame img, .screen__frame video {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}
.screen .label__note { max-width: 100%; }

/* 单支影片 · 展厅中央的大屏幕 */
.cinema {
  padding: clamp(2rem, 5vw, 3.5rem) 0 0;
}
.cinema__frame {
  max-width: 56rem;
  margin: 0 auto;
  background: #2E2B25;
  padding: .7rem;
  box-shadow:
    0 0 0 1px rgba(52, 49, 42, .2),
    0 30px 60px -24px rgba(52, 49, 42, .4),
    0 0 90px -20px rgba(255, 250, 236, .55);
}
.cinema__frame video { width: 100%; aspect-ratio: 16 / 9; display: block; background: #1d1b16; }
.player-frame__placeholder {
  aspect-ratio: 16 / 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  text-align: center;
  padding: 2rem;
}

/* ══════════════════════════════════════════════════════
   页面头 · 展厅入口的铭牌
   ══════════════════════════════════════════════════════ */
.page-head { padding: clamp(3.5rem, 8vw, 6rem) 0 clamp(1.5rem, 3vw, 2.5rem); }
.page-head__crumb {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .2em;
  color: var(--ink-faint);
  text-transform: uppercase;
}
.page-head__crumb a { color: var(--ink-soft); }
.page-head__crumb a:hover { color: var(--ember); }
.page-head__title {
  margin-top: 1.1rem;
  font-family: var(--brush);
  font-weight: 400;
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  letter-spacing: .1em;
}
.page-head__sub {
  margin-top: 1.1rem;
  max-width: 36em;
  font-size: .9rem;
  color: var(--ink-soft);
  line-height: 2.1;
  letter-spacing: .04em;
}

/* ══════════════════════════════════════════════════════
   作品详情 · 展墙 + 展签 + 策展人手记
   ══════════════════════════════════════════════════════ */
.exhibit {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
  padding-bottom: clamp(2rem, 4vw, 3rem);
}
@media (max-width: 52rem) { .exhibit { grid-template-columns: 1fr; } }
.exhibit__art {
  position: relative;
  max-width: 24rem;
  margin-left: 5rem;
  background: #1d1b16;
  border-radius: 6px;
  box-shadow:
    0 22px 40px -20px rgba(28, 24, 16, .4),
    0 6px 12px -7px rgba(28, 24, 16, .2);
  overflow: hidden;
}
.exhibit__art img {
  width: 100%;
  height: auto;
  display: block;
}
.exhibit__label {
  position: sticky;
  top: 2rem;
}
.exhibit__label .label__no { font-size: .9rem; }
.exhibit__label h1 {
  margin-top: .5rem;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 900;
  letter-spacing: .1em;
}
.exhibit__label .label__year { font-size: .85rem; margin-top: .4rem; }
.exhibit__dl {
  margin: 1.6rem 0 0;
  padding: 1.2rem 0 0;
  border-top: 1px solid var(--hairline);
  display: grid;
  gap: .55rem;
}
.exhibit__dl div { display: flex; gap: 1rem; font-size: .82rem; }
.exhibit__dl dt {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .16em;
  color: var(--ink-faint);
  width: 3.6em;
  flex-shrink: 0;
  padding-top: .25em;
  text-transform: uppercase;
}
.exhibit__dl dd { margin: 0; color: var(--ink-soft); letter-spacing: .04em; }
.exhibit__dl a { color: var(--ember); border-bottom: 1px solid var(--ember-soft); }
/* 策展人手记：铅笔字 */
.curator {
  margin-top: 1.8rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--hairline);
}
.curator h3 {
  font-size: .8rem;
  font-family: var(--mono);
  font-weight: 400;
  letter-spacing: .24em;
  color: var(--ink-faint);
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.curator .note {
  font-family: var(--hand);
  font-size: 1.05rem;
  line-height: 2.15;
  color: var(--pencil);
  transform: rotate(-.4deg);
}

/* ══════════════════════════════════════════════════════
   图集 · 墙上的小稿
   ══════════════════════════════════════════════════════ */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 3.2rem);
}
@media (max-width: 46rem) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
.gallery-item { margin: 0; }
.gallery-item img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--concrete);
  box-shadow: 0 14px 30px -18px rgba(52, 49, 42, .3);
}
.gallery-item figcaption {
  margin-top: .7rem;
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .16em;
  color: var(--ink-faint);
}

/* ══════════════════════════════════════════════════════
   简历 · 美术馆里的创作者档案
   ══════════════════════════════════════════════════════ */
.resume-hero {
  padding: clamp(3.5rem, 8vw, 6.5rem) 0 clamp(2.8rem, 6vw, 4.8rem);
  border-bottom: 1px solid var(--hairline-2);
}
.resume-hero__grid {
  margin-top: clamp(2rem, 5vw, 3.8rem);
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(18rem, 5fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: end;
}
.resume-kicker {
  display: block;
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .22em;
  color: var(--ember);
}
.resume-identity h1 {
  margin-top: .9rem;
  font-family: var(--brush);
  font-size: clamp(3rem, 8vw, 6.4rem);
  font-weight: 400;
  letter-spacing: .08em;
  line-height: 1;
}
.resume-identity h1 small {
  font-family: var(--serif);
  font-size: .24em;
  font-weight: 400;
  color: var(--ink-faint);
  letter-spacing: .18em;
}
.resume-role {
  margin-top: 1.5rem;
  font-size: clamp(1.2rem, 2.4vw, 1.65rem);
  line-height: 1.7;
  font-weight: 700;
  letter-spacing: .06em;
  max-width: 27em;
  word-break: keep-all;
}
.resume-summary {
  margin-top: 1.1rem;
  max-width: 45em;
  color: var(--ink-soft);
  font-size: .95rem;
  line-height: 2.05;
}
.resume-brief {
  position: relative;
  padding: clamp(1.5rem, 3vw, 2.2rem);
  background: var(--kraft);
  border: 1px solid var(--kraft-line);
  box-shadow: 0 22px 48px -34px rgba(72, 57, 34, .48);
}
.resume-brief::before {
  content: '';
  position: absolute;
  top: 0;
  left: 1.5rem;
  width: 3rem;
  height: 3px;
  background: var(--ember);
}
.resume-targets { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.1rem; }
.resume-targets span {
  padding: .42rem .7rem;
  border: 1px solid var(--kraft-line);
  font-size: .78rem;
  letter-spacing: .08em;
  color: var(--ink);
}
.resume-brief > p { margin-top: 1.2rem; color: var(--ink-soft); font-size: .82rem; letter-spacing: .08em; }
.resume-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.resume-button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.7rem;
  padding: .65rem 1rem;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .14em;
  cursor: pointer;
  transition: color .3s, background .3s, border-color .3s;
}
.resume-button:hover { color: var(--ember); border-color: var(--ember); }
.resume-button--primary { background: var(--ink); color: var(--paper); }
.resume-button--primary:hover { background: var(--ember); color: #FFF9EE; }
.resume-stats {
  margin-top: clamp(2.4rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.resume-stats div { padding: 1.4rem 1.2rem; border-right: 1px solid var(--hairline); }
.resume-stats div:last-child { border-right: 0; }
.resume-stats strong {
  display: block;
  font-family: var(--latin);
  font-size: clamp(1.45rem, 3vw, 2.15rem);
  font-weight: 400;
  line-height: 1.2;
  color: var(--ember);
}
.resume-stats span { display: block; margin-top: .4rem; font-size: .76rem; color: var(--ink-soft); letter-spacing: .08em; }
.resume-body { padding-top: clamp(3.2rem, 7vw, 5.5rem); }
.resume-layout {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(17rem, 4fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
.resume-main { min-width: 0; }
.resume-section + .resume-section { margin-top: clamp(3.5rem, 7vw, 5.8rem); }
.resume-section__head {
  display: grid;
  grid-template-columns: 2.5rem auto 1fr;
  align-items: baseline;
  gap: .8rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--ink);
}
.resume-section__head > span { font-family: var(--latin); color: var(--ember); font-size: 1.1rem; }
.resume-section__head h2 { font-size: 1.35rem; letter-spacing: .18em; }
.resume-section__head em {
  justify-self: end;
  font-family: var(--mono);
  font-size: .62rem;
  font-style: normal;
  letter-spacing: .18em;
  color: var(--ink-faint);
}
.resume-job { padding: 1.8rem 0; border-bottom: 1px solid var(--hairline-2); }
.resume-job header { display: grid; grid-template-columns: 2.5rem 1fr; gap: .8rem; }
.resume-job__index { font-family: var(--latin); color: var(--ink-faint); }
.resume-job h3 { font-size: 1.05rem; letter-spacing: .05em; }
.resume-job header p { margin-top: .25rem; font-family: var(--mono); font-size: .64rem; color: var(--ink-faint); letter-spacing: .12em; }
.resume-job ul { margin: 1.1rem 0 0 3.3rem; padding: 0; list-style: none; }
.resume-job li { position: relative; padding-left: 1rem; margin-top: .65rem; color: var(--ink-soft); font-size: .9rem; line-height: 1.9; }
.resume-job li::before { content: '·'; position: absolute; left: 0; color: var(--ember); }
.resume-projects { display: grid; grid-template-columns: repeat(2, 1fr); border-left: 1px solid var(--hairline-2); }
.resume-project {
  min-width: 0;
  padding: 1.7rem;
  border-right: 1px solid var(--hairline-2);
  border-bottom: 1px solid var(--hairline-2);
}
.resume-project:last-child { grid-column: 1 / -1; }
.resume-project__meta { display: flex; justify-content: space-between; gap: 1rem; font-family: var(--mono); font-size: .6rem; color: var(--ink-faint); letter-spacing: .1em; }
.resume-project h3 { margin-top: .8rem; font-size: 1.08rem; letter-spacing: .04em; }
.resume-project p { margin-top: .9rem; color: var(--ink-soft); font-size: .84rem; line-height: 1.85; }
.resume-project p b { display: block; margin-bottom: .2rem; font-family: var(--mono); font-size: .62rem; font-weight: 400; color: var(--ember); letter-spacing: .16em; }
.resume-project > a { display: inline-block; margin-top: 1.1rem; font-family: var(--mono); font-size: .65rem; color: var(--ink); letter-spacing: .13em; border-bottom: 1px solid var(--ember-soft); }
.resume-project > a:hover { color: var(--ember); }
.resume-achievements { margin: 0; padding: 0; list-style: none; }
.resume-achievements li { display: grid; grid-template-columns: 2.5rem 1fr; gap: .8rem; padding: 1.25rem 0; border-bottom: 1px solid var(--hairline-2); }
.resume-achievements span { font-family: var(--latin); color: var(--ember); }
.resume-achievements p { color: var(--ink-soft); font-size: .9rem; line-height: 1.9; }
.resume-side { display: grid; gap: 1.3rem; }
.resume-sidecard { padding: 1.5rem; border: 1px solid var(--hairline); background: var(--paper-2); }
.resume-capabilities { margin-top: 1rem; }
.resume-capabilities article { display: grid; grid-template-columns: 2rem 1fr; column-gap: .65rem; padding: 1.05rem 0; border-bottom: 1px solid var(--hairline-2); }
.resume-capabilities article:last-child { border-bottom: 0; padding-bottom: 0; }
.resume-capabilities article > span { grid-row: 1 / 3; font-family: var(--latin); color: var(--ember); }
.resume-capabilities h3 { font-size: .9rem; letter-spacing: .06em; }
.resume-capabilities p { margin-top: .35rem; color: var(--ink-soft); font-size: .78rem; line-height: 1.8; }
.resume-skills, .resume-info { margin: 1rem 0 0; }
.resume-skills > div, .resume-info > div { padding: .8rem 0; border-bottom: 1px solid var(--hairline-2); }
.resume-skills > div:last-child, .resume-info > div:last-child { border-bottom: 0; }
.resume-skills dt, .resume-info dt { font-family: var(--mono); font-size: .62rem; letter-spacing: .15em; color: var(--ember); }
.resume-skills dd, .resume-info dd { margin: .35rem 0 0; color: var(--ink-soft); font-size: .8rem; line-height: 1.75; word-break: break-word; }
.resume-info a { color: var(--ink); border-bottom: 1px solid var(--hairline); }
.resume-info a:hover { color: var(--ember); border-bottom-color: var(--ember); }
.resume-contact { padding: clamp(3rem, 7vw, 5rem) 0; border-top: 1px solid var(--hairline-2); text-align: center; }

/* 首页 · 简历一览 */
.resume-note {
  max-width: 40em;
  font-size: .95rem;
  color: var(--ink-soft);
  line-height: 2.15;
  letter-spacing: .04em;
}
.resume-contact h2 { max-width: 26em; margin: 1rem auto 0; font-size: clamp(1.25rem, 2.5vw, 1.7rem); line-height: 1.8; letter-spacing: .06em; }
.resume-contact .resume-actions { justify-content: center; }

@media (max-width: 68rem) {
  .resume-layout { grid-template-columns: 1fr; }
  .resume-side { grid-template-columns: repeat(2, 1fr); }
  .resume-sidecard:first-child { grid-column: 1 / -1; }
  .resume-capabilities { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 1.5rem; }
}
@media (max-width: 48rem) {
  .resume-hero__grid { grid-template-columns: 1fr; align-items: start; }
  .resume-stats { grid-template-columns: repeat(2, 1fr); }
  .resume-stats div:nth-child(2) { border-right: 0; }
  .resume-stats div:nth-child(-n+2) { border-bottom: 1px solid var(--hairline); }
  .resume-projects { grid-template-columns: 1fr; }
  .resume-project:last-child { grid-column: auto; }
  .resume-side { grid-template-columns: 1fr; }
  .resume-sidecard:first-child { grid-column: auto; }
  .resume-capabilities { grid-template-columns: 1fr; }
}
@media (max-width: 34rem) {
  .resume-identity h1 small { display: block; margin-top: .7rem; font-size: .3em; }
  .resume-section__head { grid-template-columns: 2rem auto; }
  .resume-section__head em { display: none; }
  .resume-job header, .resume-achievements li { grid-template-columns: 2rem 1fr; }
  .resume-job ul { margin-left: 2.8rem; }
  .resume-actions { flex-direction: column; }
  .resume-button { width: 100%; }
}

@media print {
  @page { size: A4; margin: 12mm; }
  :root, :root[data-theme="dark"] {
    --paper: #fff;
    --paper-2: #f5f3ed;
    --kraft: #f4efe4;
    --ink: #171612;
    --ink-soft: #454138;
    --ink-faint: #6d6659;
    --hairline: rgba(23, 22, 18, .22);
    --hairline-2: rgba(23, 22, 18, .12);
  }
  body { background: #fff !important; font-size: 11px; }
  body::before, .sidebar, .topbar, .colophon, .no-print { display: none !important; }
  .main { margin-left: 0; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .resume-hero { padding: 0 0 1.2rem; }
  .resume-hero__grid { margin-top: 1rem; grid-template-columns: 7fr 5fr; gap: 1.5rem; }
  .resume-identity h1 { font-size: 3rem; }
  .resume-role { margin-top: .8rem; font-size: 1.05rem; }
  .resume-summary { margin-top: .5rem; line-height: 1.6; }
  .resume-brief { padding: 1rem; box-shadow: none; }
  .resume-stats { margin-top: 1rem; }
  .resume-stats div { padding: .65rem; }
  .resume-stats strong { font-size: 1.2rem; }
  .resume-body { padding: 1.2rem 0 0; border-top: 0; }
  .resume-layout { grid-template-columns: 8fr 4fr; gap: 1.3rem; }
  .resume-section + .resume-section { margin-top: 1.5rem; }
  .resume-job { padding: .75rem 0; break-inside: avoid; }
  .resume-job li { margin-top: .25rem; line-height: 1.5; }
  .resume-project { padding: .8rem; break-inside: avoid; }
  .resume-project p { margin-top: .45rem; line-height: 1.5; }
  .resume-achievements li { padding: .6rem 0; }
  .resume-side { grid-template-columns: 1fr; gap: .7rem; }
  .resume-sidecard, .resume-sidecard:first-child { padding: .8rem; grid-column: auto; break-inside: avoid; }
  .resume-capabilities { display: block; }
  .resume-capabilities article { padding: .5rem 0; }
}

/* ══════════════════════════════════════════════════════
   联系 · 摊开的访客留言簿（牛皮纸 + 晨光）
   ══════════════════════════════════════════════════════ */
.guestbook {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (max-width: 52rem) { .guestbook { grid-template-columns: 1fr; } }
.guestbook__paper {
  background: var(--kraft);
  padding: clamp(1.8rem, 4vw, 2.8rem);
  box-shadow: 0 24px 50px -26px rgba(94, 78, 52, .45);
  transform: rotate(-.35deg);
  position: relative;
}
.guestbook__paper h2 {
  font-size: 1.15rem;
  letter-spacing: .2em;
  font-weight: 900;
}
.guestbook__paper .meta { display: block; margin-top: .4rem; }
.guest-lines { margin-top: 1.6rem; display: grid; gap: 1.15rem; position: relative; z-index: 1; }
.guest-line {
  display: flex;
  gap: 1rem;
  align-items: baseline;
  padding-bottom: .8rem;
  border-bottom: 1px solid var(--kraft-line);
}
.guest-line .label {
  padding: 0;
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .16em;
  color: rgba(94, 78, 52, .65);
  width: 3.4em;
  flex-shrink: 0;
  text-transform: uppercase;
}
.guest-line .value {
  font-family: var(--hand);
  font-size: 1.02rem;
  color: #5C5240;
  letter-spacing: .03em;
  word-break: break-all;
}
.guest-line a.value:hover { color: var(--ember); }
.guestbook__qr {
  margin-top: 1.8rem;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  position: relative;
  z-index: 1;
}
.guestbook__qr img {
  width: 6.2rem;
  height: 6.2rem;
  object-fit: cover;
  box-shadow: 0 8px 20px -10px rgba(94, 78, 52, .5);
}
.guestbook__qr span {
  font-family: var(--hand);
  font-size: .92rem;
  color: #5C5240;
  line-height: 1.9;
  transform: rotate(-.6deg);
  /* 深色下：牛皮纸加深，文字反转为浅暖色，保证可读性 */
}
:root[data-theme="dark"] .guest-line .label {
  color: rgba(214, 196, 164, .75);
}
:root[data-theme="dark"] .guest-line .value {
  color: #D8C5A4;
}
:root[data-theme="dark"] .guestbook__qr span {
  color: #D8C5A4;
}
}

/* 留言表单 · 一支笔的位置 */
.guest-form h2 { font-size: 1.15rem; letter-spacing: .2em; font-weight: 900; }
.guest-form .hint { margin-top: .7rem; font-size: .85rem; color: var(--ink-soft); line-height: 2; }
.guest-form form { margin-top: 1.8rem; display: grid; gap: 1.3rem; }
.field label {
  display: block;
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .2em;
  color: var(--ink-faint);
  text-transform: uppercase;
  margin-bottom: .45rem;
}
.field input, .field textarea {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  background: transparent;
  padding: .5rem .1rem;
  font-family: var(--hand);
  font-size: 1rem;
  color: var(--ink);
  outline: none;
  transition: border-color .3s;
  resize: vertical;
}
.field input:focus, .field textarea:focus { border-bottom-color: var(--ember); }
.guest-form button {
  justify-self: start;
  margin-top: .4rem;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font-family: var(--serif);
  font-size: .85rem;
  letter-spacing: .3em;
  text-indent: .3em;
  padding: .75rem 2.2rem;
  cursor: pointer;
  transition: background .3s, color .3s, border-color .3s;
}
.guest-form button:hover { background: var(--ember); border-color: var(--ember); color: #FFF9EE; }
.guest-form .sent-tip { font-family: var(--hand); color: var(--pencil); font-size: .92rem; }

/* 关于本站 */
.about-block { margin-top: clamp(3rem, 6vw, 4.5rem); }
.about-block .prose { max-width: 38rem; margin: 0; font-size: .92rem; }

/* ══════════════════════════════════════════════════════
   相邻导航 · 展厅之间的走廊
   ══════════════════════════════════════════════════════ */
.pagination {
  max-width: var(--measure);
  margin: clamp(2.5rem, 6vw, 4rem) auto 0;
  padding: 1.6rem clamp(1.4rem, 4vw, 3rem) 0;
  border-top: 1px solid var(--hairline-2);
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
}
.pagination a { display: grid; gap: .3rem; max-width: 46%; }
.pagination a:last-child { text-align: right; justify-self: end; }
.pagination .dir {
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .2em;
  color: var(--ink-faint);
  text-transform: uppercase;
}
.pagination .t { font-size: .9rem; color: var(--ink-soft); letter-spacing: .04em; }
.pagination a:hover .t { color: var(--ember); }

/* ══════════════════════════════════════════════════════
   页脚 · 出口处的铭牌
   ══════════════════════════════════════════════════════ */
.colophon {
  margin-top: auto;
  border-top: 1px solid var(--hairline-2);
  padding: clamp(2.5rem, 5vw, 3.5rem) 0 2rem;
  position: relative;
  z-index: 1;
}
.colophon__inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: clamp(1.6rem, 4vw, 3rem);
}
@media (max-width: 46rem) { .colophon__inner { grid-template-columns: 1fr; } }
.colophon h4 {
  font-family: var(--mono);
  font-weight: 400;
  font-size: .66rem;
  letter-spacing: .24em;
  color: var(--ink-faint);
  text-transform: uppercase;
  margin-bottom: 1.1rem;
}
.colophon ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.colophon li a, .colophon li span { font-size: .85rem; color: var(--ink-soft); letter-spacing: .08em; }
.colophon li a:hover { color: var(--ember); }
.colophon__brand .name { font-family: var(--brush); font-weight: 400; font-size: 1.4rem; letter-spacing: .1em; }
.colophon__brand .meta { display: block; margin-top: .5rem; line-height: 2; text-transform: none; letter-spacing: .1em; }
.colophon__fineprint {
  margin-top: 2.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--hairline-2);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .16em;
  color: var(--ink-faint);
}

/* ══════════════════════════════════════════════════════
   404
   ══════════════════════════════════════════════════════ */
.notfound {
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1.4rem;
  padding: 4rem 1.5rem;
}
.notfound .big {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 900;
  letter-spacing: .2em;
}
.notfound .big span { color: var(--ember); }
.notfound .meta { line-height: 2.2; text-transform: none; letter-spacing: .12em; }
.notfound a { color: var(--ember); border-bottom: 1px solid var(--ember-soft); }

/* 首页的栏目直达条 */
.home-links {
  display: flex;
  gap: 2rem;
  justify-content: center;
  flex-wrap: wrap;
  padding: 0 0 clamp(3.5rem, 7vw, 5.5rem);
}
.home-links a {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .26em;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--hairline);
  padding-bottom: .35rem;
  text-transform: uppercase;
}
.home-links a:hover { color: var(--ember); border-bottom-color: var(--ember); }

/* ════════════════════════════════════════════════════════════
   深夜模式 · 附加覆盖（硬编码浅色值的夜间反转与新组件）
   ════════════════════════════════════════════════════════════ */

/* 切换开关：日 / 夜 */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .2em;
  color: var(--ink-faint);
  background: transparent;
  border: 1px solid var(--hairline-2);
  border-radius: 999px;
  padding: .4rem .85rem;
  cursor: pointer;
  transition: color .3s, border-color .3s, background .3s;
}
.theme-toggle:hover { color: var(--ember); border-color: var(--ember-soft); }
.theme-toggle .dot {
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: var(--ember);
  box-shadow: 0 0 0 3px var(--ember-soft);
  transition: transform .4s cubic-bezier(.22,.8,.3,1);
}
:root[data-theme="dark"] .theme-toggle .dot { transform: translateX(-.2rem); }
.sidebar .theme-toggle { margin-top: 1.2rem; align-self: flex-start; }
.topbar .theme-toggle { flex-shrink: 0; }

/* 深色下：顶栏背景沉入夜色 */
:root[data-theme="dark"] .topbar {
  background: rgba(24, 21, 15, .92);
}

/* 深色下：入口文字更深、更暖，像展厅里暖灯映出的琥珀色调 */
:root[data-theme="dark"] .entrance__caption h1 {
  color: #E0C894;
}
:root[data-theme="dark"] .entrance__caption .sub {
  color: #C3A372;
}
:root[data-theme="dark"] .entrance::after {
  background:
    linear-gradient(180deg, rgba(12, 10, 6, .22) 0%, rgba(12, 10, 6, 0) 30%, rgba(12, 10, 6, .12) 72%, rgba(12, 10, 6, .62) 100%);
}

/* 深色下：低亮度暖灰羊皮纸，保留实体展签质感，但不与作品争夺亮度 */
:root[data-theme="dark"] .room .label {
  background-color: #B8AE9A;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 60% 46% at 20% 24%, rgba(246, 226, 188, .1), transparent 62%),
    linear-gradient(115deg, #C2B8A3 0%, #B4AA96 50%, #BAAF9B 100%);
  border-color: rgba(224, 202, 162, .16);
  box-shadow:
    inset 0 0 26px rgba(57, 42, 24, .12),
    0 8px 16px -12px rgba(12, 10, 6, .4);
  transition: filter .35s ease;
}
:root[data-theme="dark"] .room .label::after {
  background:
    radial-gradient(ellipse 70% 55% at 50% -4%, rgba(255, 240, 205, .12), transparent 58%),
    radial-gradient(ellipse 84% 58% at 50% 114%, rgba(45, 31, 16, .18), transparent 58%);
}
:root[data-theme="dark"] .room .label .label__no,
:root[data-theme="dark"] .room .label .label__year {
  color: #474137;
}
:root[data-theme="dark"] .room .label .label__title { color: #2C2821; }
:root[data-theme="dark"] .room .label .label__note { color: #464037; }

/* 深色下：详情页图框与展厅图框边角保持一致 */
:root[data-theme="dark"] .exhibit__art,
:root[data-theme="dark"] .room__frame {
  background: #0E0C08;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, .72),
    0 4px 8px -1px rgba(0, 0, 0, .6),
    0 10px 18px -4px rgba(0, 0, 0, .6),
    0 28px 52px -16px rgba(0, 0, 0, .72),
    0 44px 80px -22px rgba(0, 0, 0, .62),
    0 66px 120px -30px rgba(0, 0, 0, .52),
    0 8px 14px rgba(0, 0, 0, .36);
}

/* 深色下：展厅熄灯，画作降低亮度；卡纸本身使用独立的低亮度配色 */
:root[data-theme="dark"] .room__frame img {
  filter: brightness(.78);
  transition: transform 1.2s cubic-bezier(.22, .8, .3, 1), filter .35s ease;
}
:root[data-theme="dark"] .room:hover .room__frame img {
  filter: brightness(.85);
}
:root[data-theme="dark"] .room:hover .room__frame::after { opacity: 1; }
:root[data-theme="dark"] .room:hover .label { filter: brightness(1.05); }

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .room__frame::after { display: none; }
}

/* 页面切换过渡 */
body { transition: background .35s ease, color .35s ease; }
.main, .sidebar, .colophon, section { transition: background .35s ease, border-color .35s ease; }