:root {
  color-scheme: light;
  --ink: #171713;
  --muted: #6f6b62;
  --ground: #eeeae1;
  --paper: #f8f6f0;
  --line: rgba(23, 23, 19, .17);
  --shadow: 0 1.5rem 4rem rgba(38, 33, 23, .13);
}
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; overflow: hidden; background: var(--ground); color: var(--ink); font: 1rem/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, select { color: inherit; font: inherit; }
button { cursor: pointer; }
img { -webkit-user-drag: none; -webkit-touch-callout: none; user-select: none; }
button:focus-visible, select:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.book-header {
  position: fixed; z-index: 20; inset: 0 0 auto;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem;
  height: 4.75rem; padding: 0 clamp(1rem, 2.5vw, 2.6rem); border-bottom: 1px solid var(--line);
  background: rgba(238, 234, 225, .92); backdrop-filter: blur(18px);
}
.book-identity { display: grid; line-height: 1.12; }
.book-identity span { color: var(--muted); font: .72rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .11em; text-transform: uppercase; }
.book-identity strong { font: 400 1.08rem Georgia, serif; }
.reader-context { display: grid; justify-items: center; gap: .28rem; }
.view-switch { display: flex; align-items: center; gap: .2rem; padding: .2rem; border: 1px solid var(--line); border-radius: 999px; }
.view-tab { min-height: 2rem; padding: .42rem .72rem; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font-size: .82rem; }
.view-tab.active { background: var(--ink); color: var(--paper); }
#relation-label { display: none; }

.reader { height: 100svh; min-height: 100svh; overflow-y: auto; scrollbar-gutter: stable both-edges; padding: 6rem clamp(1rem, 3vw, 3.5rem) 4.5rem; }
.mode-view { display: none; }
.mode-view.active { display: block; }
.book-view { height: max(32rem, calc(100svh - 10.5rem)); }
.spread-stage { width: min(88rem, 100%); height: 100%; margin: auto; }
.cover, .back-cover, .spread {
  display: none; width: min(88rem, 100%); height: 100%; margin: auto;
}
.spread { width: 100%; margin: 0; }
.cover.active, .back-cover.active, .spread.active { display: grid; animation: turn-in .34s ease both; }
.cover, .back-cover {
  position: relative; width: 50%; max-width: 44rem; height: 100%; max-height: 100%; padding: clamp(1.35rem, 3vw, 2.7rem); overflow: hidden;
  background: var(--cover-background, #e9e3d7);
  color: #28251e; box-shadow: var(--shadow);
}
.cover { grid-template-rows: auto auto; place-items: center; align-content: center; gap: clamp(1.2rem, 3vh, 2.4rem); text-align: center; }
.cover h1 { display: grid; justify-items: center; gap: clamp(.45rem, 1vw, .8rem); margin: 0; }
/* One line of CJK: sized off the viewport so it never wraps, and with a line
   height that suits full-em glyphs rather than the tight Latin display setting. */
.cover-zh { font: 300 clamp(.72rem, 1.15vw, .92rem)/1.3 "Songti SC", STSong, "Noto Serif CJK SC", serif; letter-spacing: .04em; white-space: nowrap; }
.cover-zh i { font-style: normal; color: #8b816f; }
.cover-en { color: #756d5f; font: 400 clamp(.58rem, 1vw, .76rem)/1.4 Helvetica, Arial, sans-serif; letter-spacing: .17em; text-transform: uppercase; }
.cover-year { position: absolute; bottom: clamp(.8rem, 2vw, 1.55rem); color: #9e998f; font: 400 clamp(.42rem, .58vw, .54rem)/1 Helvetica, Arial, sans-serif; letter-spacing: .08em; }
.cover-art { align-self: center; display: flex; align-items: center; justify-content: center; gap: clamp(.55rem, 1.2vw, 1rem); width: min(94%, 63rem); height: min(51vh, 21rem); }
.cover-photo, .back-cover-photo { display: grid; place-items: center; width: 100%; height: 100%; margin: 0; min-width: 0; min-height: 0; transform: translate(var(--photo-x, 0), var(--photo-y, 0)) scale(var(--photo-scale, 1)); transform-origin: center; }
.cover-photo { flex: 0 1 auto; width: auto; aspect-ratio: var(--cover-photo-ratio); }
.back-cover-photo { width: auto; aspect-ratio: var(--cover-photo-ratio); }
.cover-photo .photo-open, .back-cover-photo .photo-open { display: grid; place-items: center; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: zoom-in; }
.cover-photo img, .back-cover-photo img { display: block; width: 100%; height: 100%; object-fit: contain; opacity: 0; transform: rotate(var(--photo-rotation, 0deg)); transition: opacity .25s; }
.cover-photo img.loaded, .back-cover-photo img.loaded { opacity: 1; }
.back-cover { grid-template-rows: minmax(0, 1fr); place-items: center; }
.back-cover-art { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 78%; height: 64%; transform: translate(-50%, -50%); }
.back-cover small { position: absolute; bottom: clamp(1rem, 2.4vw, 2rem); color: #756d5f; font-size: .7rem; letter-spacing: .08em; }

.spread { grid-template-columns: repeat(2, minmax(0, 1fr)); background: var(--spread-background, var(--paper)); box-shadow: var(--shadow); }
.book-page { position: relative; display: grid; place-items: center; min-width: 0; min-height: 0; padding: clamp(1.1rem, 2.6vw, 3.2rem); overflow: hidden; }
.book-page:first-child { border-right: 1px solid rgba(23,23,19,.11); box-shadow: inset -1.4rem 0 2rem -2rem rgba(0,0,0,.28); }
.book-page:last-child { box-shadow: inset 1.4rem 0 2rem -2rem rgba(0,0,0,.22); }
.book-photo { position: relative; display: grid; place-items: center; width: auto; height: var(--spread-photo-height, 100%); max-width: 100%; margin: 0; aspect-ratio: var(--photo-ratio) / 1; min-width: 0; min-height: 0; transform: translate(var(--photo-x, 0), var(--photo-y, 0)) scale(var(--photo-scale, 1)); transform-origin: center; }
.spread[data-layout="independent"] .book-photo { width: 100%; height: 100%; aspect-ratio: auto; }
.book-photo .photo-open { display: grid; place-items: center; width: 100%; height: 100%; min-width: 0; min-height: 0; padding: 0; border: 0; background: transparent; cursor: zoom-in; }
.book-photo img { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; object-position: center; opacity: 0; transform: rotate(var(--photo-rotation, 0deg)); transition: opacity .25s; }
.book-photo img.loaded { opacity: 1; }
.page-number { position: absolute; bottom: .7rem; color: #99948a; font: .68rem ui-monospace, SFMono-Regular, Menlo, monospace; }
.book-page:first-child .page-number { left: 1rem; }
.book-page:last-child .page-number { right: 1rem; }

.reader-nav { position: fixed; z-index: 15; inset: auto 0 0; display: grid; grid-template-columns: 4rem minmax(10rem, auto) 4rem; justify-content: center; gap: .5rem; padding: .65rem; background: linear-gradient(transparent, rgba(238,234,225,.94) 40%); }
.reader-nav button, #page-status { display: grid; place-items: center; min-height: 2.8rem; border: 1px solid var(--line); border-radius: 999px; background: rgba(248,246,240,.9); }
#page-status { padding-inline: 1.3rem; color: var(--muted); font-size: .82rem; }

.beian { position: fixed; z-index: 16; inset: auto auto .95rem clamp(1rem, 2.5vw, 2.6rem); display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; }
.beian a { color: var(--muted); font: .68rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; text-decoration: none; }
.beian a:hover { text-decoration: underline; }
@media (max-width: 760px) { .beian { inset: auto auto .5rem .75rem; font-size: .64rem; } }

body.exhibition-mode { overflow-y: auto; }
body.exhibition-mode .reader { height: auto; min-height: 100svh; overflow: visible; scrollbar-gutter: auto; padding-right: clamp(1rem, 2vw, 2.25rem); padding-bottom: 2rem; padding-left: clamp(1rem, 2vw, 2.25rem); }
body.exhibition-mode .reader-nav { display: none; }
.exhibition-view { width: 100%; }
.exhibition-intro { padding: clamp(2rem, 5vw, 4rem) 0; border-bottom: 1px solid var(--line); }
.exhibition-intro span { color: var(--muted); font: .74rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .1em; text-transform: uppercase; }
.exhibition-block { display: grid; grid-template-columns: clamp(9rem, 14vw, 14rem) 1fr; align-items: center; gap: clamp(1rem, 2.5vw, 2.75rem); min-height: calc(100svh - 4.75rem); padding: clamp(2rem, 4vh, 3.5rem) 0; border-bottom: 1px solid var(--line); scroll-margin-top: 4.75rem; }
.exhibition-rail { align-self: center; display: grid; gap: .7rem; }
.exhibition-number { color: var(--muted); font: .72rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; }
.exhibition-rail h2 { margin: 0; font: 400 clamp(1.7rem, 2.6vw, 2.6rem)/1.05 Georgia, serif; }
.exhibition-rail p { margin: 0; color: var(--muted); font: .82rem/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.exhibition-palette { display: flex; width: 5rem; height: .32rem; overflow: hidden; }
.exhibition-palette i { flex: 1; }
.exhibition-frames { display: flex; align-items: flex-start; width: 100%; gap: clamp(.35rem, .65vw, .8rem); }
.exhibition-photo { position: relative; display: grid; flex: var(--photo-ratio) 1 0; gap: .55rem; min-width: 0; min-height: 0; margin: 0; }
.exhibition-image { position: relative; aspect-ratio: var(--photo-ratio) / 1; min-width: 0; min-height: 0; overflow: hidden; background: #e2ded5; }
.exhibition-photo .photo-open { position: absolute; inset: 0; display: grid; place-items: center; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: zoom-in; }
.exhibition-photo img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; opacity: 0; transform: rotate(var(--photo-rotation, 0deg)); transition: opacity .25s; }
.exhibition-photo img.loaded { opacity: 1; }
.exhibition-empty .exhibition-image { display: grid; place-items: center; border: 1px dashed var(--line); background: transparent; }
.exhibition-empty .exhibition-image span { color: var(--muted); font: .7rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; }
.exhibition-role { display: flex; align-items: baseline; gap: .38rem; min-width: 0; color: var(--muted); font: .68rem ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .045em; text-transform: uppercase; }
.exhibition-role span { opacity: .62; }
.exhibition-role strong { overflow: hidden; color: var(--ink); font: inherit; text-overflow: ellipsis; white-space: nowrap; }

.photo-viewer { width: 100vw; max-width: none; height: 100vh; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(5,5,5,.97); color: #f3f0e8; }
.photo-viewer::backdrop { background: #000; }
.photo-viewer[open] { display: grid; grid-template-columns: 4rem 1fr 4rem; align-items: center; }
.photo-viewer figure { display: grid; grid-template-rows: minmax(0, 1fr) auto; place-items: center; gap: 1rem; min-width: 0; height: 100vh; margin: 0; padding: 3.8rem 0 5.2rem; }
.viewer-image-stage { display: grid; place-items: center; width: 100%; height: 100%; min-width: 0; min-height: 0; overflow: auto; }
.photo-viewer img { max-width: 100%; max-height: 100%; object-fit: contain; transform: rotate(var(--photo-rotation, 0deg)) scale(var(--viewer-zoom, 1)); transition: transform .18s ease; }
.photo-viewer figcaption { display: flex; gap: 1rem; color: #aaa79f; text-align: center; }
.viewer-close { position: fixed; z-index: 2; top: 1rem; right: 1rem; padding: .65rem .9rem; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; background: #181818; color: white; }
.viewer-nav { align-self: stretch; border: 0; background: transparent; color: #aaa79f; font: 300 3rem Georgia, serif; }
.viewer-controls { position: fixed; z-index: 2; inset: auto 50% 1rem auto; display: flex; align-items: center; gap: .35rem; transform: translateX(50%); }
.viewer-controls button, .viewer-controls output { display: grid; place-items: center; min-width: 2.7rem; min-height: 2.7rem; padding: .45rem .7rem; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; background: #181818; color: white; }
.viewer-controls output { min-width: 4.25rem; color: #aaa79f; font-size: .78rem; }
.viewer-controls button:disabled { cursor: default; opacity: .38; }

@keyframes turn-in { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
@media (max-width: 760px) {
  .book-header { grid-template-columns: 1fr auto; height: auto; min-height: 6.9rem; padding: .65rem .8rem .55rem; }
  .book-identity span { display: none; }
  .book-identity strong { font-size: .96rem; }
  .reader-context { grid-column: 1 / -1; grid-row: 2; }
  .view-tab { min-height: 2.25rem; padding: .45rem .8rem; }
  .reader { padding: 7.55rem .55rem 4.4rem; }
  .book-view { height: calc(100svh - 12rem); min-height: 36rem; }
  .cover, .back-cover { width: 100%; max-width: 100%; height: 50%; max-height: 50%; padding: 1.35rem; }
  .cover-art { position: absolute; top: 43%; left: 50%; width: min(96%, 51rem); height: 58%; max-height: none; transform: translate(-50%, -50%); }
  .cover h1 { position: absolute; top: 76%; right: 5%; left: 5%; }
  .back-cover-art { width: 84%; height: 60%; }
  .spread { grid-template-columns: 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); }
  .book-page { display: grid; padding: .45rem .7rem 1.15rem; }
  .book-page:first-child { border: 0; box-shadow: none; }
  .book-page:first-child { border-bottom: 1px solid rgba(23,23,19,.11); }
  .reader-nav { grid-template-columns: 3rem minmax(8rem, auto) 3rem; padding: .55rem; }
  .reader-nav button, #page-status { min-height: 2.55rem; }
  .photo-viewer[open] { grid-template-columns: 2.5rem 1fr 2.5rem; }
  body.exhibition-mode .reader { padding: 7rem .8rem 1.5rem; }
  .exhibition-intro { padding: 1.5rem 0; }
  .exhibition-block { grid-template-columns: 1fr; align-content: center; gap: 1.2rem; min-height: auto; padding: 3rem 0; }
  .exhibition-rail { grid-template-columns: auto 1fr; align-items: start; }
  .exhibition-rail h2, .exhibition-rail p, .exhibition-palette { grid-column: 2; }
  .exhibition-rail h2 { font-size: 1.65rem; }
  .exhibition-frames { overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-inline: contain; padding: 0 10vw .75rem 0; }
  .exhibition-photo { flex: 0 0 min(78vw, 26rem); scroll-snap-align: center; }
  .exhibition-role { font-size: .72rem; }
}

@media (max-width: 420px) {
  .book-identity strong { max-width: 13rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cover-zh { font-size: .9rem; }
  .cover-en { font-size: .55rem; }
  .reader-nav { grid-template-columns: 2.8rem minmax(7.4rem, auto) 2.8rem; }
  #page-status { padding-inline: .85rem; }
}