:root {
  color-scheme: light;
  --desk: #ede7db;
  --paper: #fffaf0;
  --ink: #3e3a31;
  --muted: #70685b;
  --accent: #85533b;
  --line: #c9bdab;
  --serif: "Songti SC", "Noto Serif CJK SC", "STSong", "SimSun", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}
* { box-sizing: border-box; }
html { min-width: 280px; }
body { margin: 0; color: var(--ink); background: var(--desk); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
button { font: inherit; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
.skip-link { position: absolute; top: 12px; left: 12px; transform: translateY(-200%); z-index: 10; padding: 12px; background: var(--paper); }
.skip-link:focus { transform: none; }
.masthead { height: 72px; max-width: 1400px; margin: auto; padding: 0 56px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgb(112 104 91 / 16%); }
.wordmark { text-decoration: none; font-family: var(--serif); font-size: 20px; letter-spacing: .16em; font-weight: 600; }
.wordmark small { font-family: var(--sans); font-size: 11px; font-weight: 400; letter-spacing: .15em; }
.header-note { color: var(--muted); font-size: 12px; letter-spacing: .16em; }
.reader { padding: 24px 24px 20px; --sheet-size: min(560px, calc((100vw - 64px) / 2), calc(100dvh - 268px)); }
.book-stage { display: flex; align-items: center; justify-content: center; }
.book { touch-action: pan-y pinch-zoom; width: var(--sheet-size); display: flex; position: relative; filter: drop-shadow(0 19px 23px rgb(78 62 38 / 15%)); }
.book::after { content: ""; position: absolute; inset: 5px -5px -5px 5px; background: #e2d8c7; border: 1px solid #d5c9b5; z-index: -1; }
.book.is-spread { width: calc(var(--sheet-size) * 2); }
.album-page { flex: 0 0 var(--sheet-size); width: var(--sheet-size); container-type: inline-size; aspect-ratio: 1; position: relative; background: var(--paper); border: 1px solid rgb(151 130 99 / 17%); box-shadow: inset 8px 0 16px -12px rgb(69 48 21 / 30%); overflow: hidden; }
.page-content { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6.5cqw 7.5cqw 8cqw; text-align: center; }
.eyebrow { font-size: clamp(11px, 2.2cqw, 13px); color: var(--muted); letter-spacing: .22em; margin: 0 0 3cqw; }
h1, h2 { font-family: var(--serif); font-weight: 500; white-space: pre-line; }
h1 { font-size: clamp(23px, 6cqw, 36px); letter-spacing: .13em; margin: 0 0 4cqw; line-height: 1.5; }
h2 { font-size: clamp(22px, 5cqw, 29px); letter-spacing: .1em; line-height: 1.9; margin: 1cqw 0 4cqw; }
.photo-gallery { width: 100%; min-height: 0; display: flex; justify-content: center; align-items: center; gap: 12px; }
.photo-gallery img { display: block; width: 100%; height: 100%; min-width: 0; object-fit: contain; }
.page-cover .photo-gallery { flex: 1; min-height: 0; }
.page-cover .photo-gallery img { object-fit: contain; }
.caption { font-family: var(--serif); color: var(--muted); font-size: 14px; letter-spacing: .04em; line-height: 1.8; white-space: pre-line; margin: 3cqw 0 0; }
.folio { position: absolute; bottom: 17px; right: 26px; color: var(--muted); font-size: 10px; letter-spacing: .15em; }
.page-photo .page-content { padding-top: 6cqw; }
.page-photo .photo-gallery { flex: 1; }
.page-photo .eyebrow { align-self: flex-start; margin-bottom: 3cqw; }
.page-photo .caption { font-size: 14px; align-self: flex-start; text-align: left; margin-top: 3cqw; }
.layout-portrait .photo-gallery img { width: auto; max-width: 100%; max-height: 100%; }
.page-text .page-content, .page-back .page-content { padding: 9cqw; }
.page-text .eyebrow::after, .page-back .eyebrow::after { content: ""; width: 24px; height: 1px; display: block; margin: 24px auto 0; background: var(--accent); }
.page-back h2 { font-size: 25px; }
.reader-controls { max-width: 610px; display: flex; justify-content: space-between; align-items: center; margin: 24px auto 0; gap: 20px; }
.page-control { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 0 17px; border: 1px solid var(--line); border-radius: 3px; color: var(--ink); background: transparent; font-size: 14px; letter-spacing: .04em; cursor: pointer; transition: background 180ms ease, border-color 180ms ease; touch-action: manipulation; }
.page-control svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.3; }
.page-control:hover:enabled { background: var(--paper); border-color: var(--muted); }
.page-control:active:enabled { background: #e1d6c4; }
.page-control:disabled { opacity: .35; cursor: default; }
.reading-position { width: 150px; text-align: center; flex-shrink: 0; }
#page-status { margin: 0 0 10px; font-size: 13px; color: var(--muted); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.progress-track { width: 90px; height: 2px; margin: auto; background: #d9cebb; }
.progress-track span { display: block; height: 100%; background: var(--accent); }
.reading-hint { text-align: center; color: var(--muted); font-size: 12px; margin: 18px 0 0; letter-spacing: .15em; }
.site-footer { display: flex; justify-content: space-between; max-width: 1400px; margin: auto; padding: 24px 56px 28px; color: var(--muted); font-size: 10px; letter-spacing: .14em; }
.loading, .error { padding: 60px 30px; text-align: center; }
@media (max-width: 759px), (max-height: 499px) {
  .masthead { height: 72px; padding: 0 24px; }
  .wordmark { font-size: 18px; }
  .header-note { display: none; }
  .reader { padding: 24px 16px 20px; --sheet-size: min(560px, calc(100vw - 32px)); }
  .book-stage { min-height: 0; }
  .page-content { padding: 6cqw 6.5cqw 9cqw; }
  .eyebrow { margin-bottom: 3cqw; font-size: 11px; }
  h1 { font-size: clamp(22px, 6cqw, 34px); margin-bottom: 3cqw; }
  h2 { font-size: 22px; }
  .page-cover .photo-gallery { flex: 1; }
  .caption { font-size: 14px; margin-top: 3cqw; line-height: 1.6; }
  .folio { bottom: 10px; right: 14px; }
  .page-photo .page-content { padding-top: 6cqw; }
  .page-photo .eyebrow { margin-bottom: 3cqw; }
  .page-photo .caption { font-size: 14px; margin-top: 3cqw; }
  .layout-portrait .photo-gallery img { max-height: 100%; }
  .page-text .page-content, .page-back .page-content { padding: 8cqw 7cqw; }
  .reader-controls { gap: 8px; margin-top: 26px; }
  .page-control { min-width: 76px; padding: 0 8px; font-size: 13px; gap: 3px; }
  .reading-position { width: 120px; flex: 1; min-width: 0; }
  .site-footer { padding: 16px 24px max(28px, env(safe-area-inset-bottom)); font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

.photo-button { display: flex; align-items: center; justify-content: center; flex: 1; min-width: 44px; min-height: 44px; height: 100%; max-width: 100%; padding: 0; border: 0; background: transparent; cursor: zoom-in; }
.photo-button:hover { opacity: .93; }
.photo-button:active { opacity: .82; }
.photo-button:focus-visible { outline-offset: 3px; }
.photo-dialog { width: min(1400px, calc(100vw - 40px)); max-width: none; max-height: calc(100dvh - 32px); padding: 16px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); overflow: auto; }
.photo-dialog::backdrop { background: rgb(35 31 24 / 85%); }
.zoom-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.zoom-toolbar p { font-size: 14px; margin: 0; line-height: 1.6; }
#zoom-photo { display: block; width: 100%; max-height: calc(100dvh - 142px); object-fit: contain; touch-action: pan-x pan-y pinch-zoom; }
.is-zoomed { overflow: hidden; }
@media (max-width: 759px), (max-height: 499px) {
  .photo-dialog { width: calc(100vw - 16px); padding: 12px; max-height: calc(100dvh - 16px); }
  .zoom-toolbar { gap: 8px; }
  .zoom-toolbar p { font-size: 13px; }
  .zoom-toolbar button { flex-shrink: 0; letter-spacing: 0; padding: 0 10px; }
  #zoom-photo { max-height: calc(100dvh - 118px); }
}

.book-mode { text-align:center; font-size:12px; color:var(--muted); margin:0 0 8px; letter-spacing:.08em; }
#book3d-stage { width:100%; height:clamp(380px, calc(100dvh - 255px), 730px); touch-action:pan-y pinch-zoom; }
#book3d-stage canvas { display:block; width:100%; height:100%; cursor:pointer; }
.is-3d .page-companion .book { display:block; width:auto; filter:none; }
.is-3d .page-companion .book::after { display:none; }
.is-3d .page-companion .album-page { display:none; }
.reader-page-summary { display:none; }
.is-3d .reader-page-summary { display:block; text-align:center; max-width:820px; margin:0 auto; font-size:14px; line-height:1.6; }
.reader-page-summary .page-title { font-family:var(--serif); font-size:18px; font-weight:500; margin:4px 0; }
.reader-page-summary .page-caption { margin:4px 0 8px; color:var(--muted); }
.reader-page-summary .photo-actions { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.photo-action { min-height:44px; padding:8px 14px; font:inherit; border:1px solid var(--line); background:rgb(255 250 240 / 50%); color:var(--ink); cursor:pointer; border-radius:3px; }
.is-turning #book3d-stage canvas { cursor:wait; }
.is-turning .photo-action { opacity:.5; }
.is-fallback #book3d-stage { display:none; }
.is-3d .reader-controls { margin-top:16px; }
@media(max-width:759px), (max-height:499px) {
  .reader { padding:16px 10px 20px; }
  #book3d-stage { height:min(470px, max(340px, calc(100dvh - 340px))); }
  .reader-page-summary .page-caption { font-size:14px; }
  .photo-action { font-size:13px; }
}

.is-3d .reader-page-summary .page-title, .is-3d .reader-page-summary .page-caption { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.is-3d .reader-page-summary { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:4px; }


/* Reference edition: a quiet gallery stage, with all type carried by the book. */
:root { --desk:#e3e4e2; --paper:#f6f1e6; --ink:#33382f; --muted:#62675f; --accent:#8a3f2e; --line:#bcc0b7; }
.masthead { height:64px; padding:0 36px; border:0; max-width:none; }
.wordmark { font-size:16px; letter-spacing:.12em; font-weight:400; }
.wordmark small { font-size:10px; }
.header-note { font-size:11px; letter-spacing:.12em; }
.reader { padding:0 28px 12px; --sheet-size:min(510px, calc((100vw - 64px) / 2), calc((100dvh - 240px) * .8)); }
#book3d-stage { height:max(320px, calc(100dvh - 260px)); max-height:none; touch-action:pan-y pinch-zoom; }
.book-mode { min-height:18px; margin:0; font-size:11px; }
.album-page { aspect-ratio:4/5; }
.page-artwork { display:block; width:100%; height:100%; object-fit:contain; }
.artwork-button { display:block; height:100%; width:100%; }
.is-3d .reader-controls { margin-top:14px; }
.reader-controls { max-width:320px; gap:12px; }
.reader-controls .page-control { width:48px; min-width:48px; height:48px; padding:0; border-radius:50%; border:1px solid #c5c8c1; background:#f8f9f6; }
.reader-controls .control-label { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
.reader-controls .reading-position { width:170px; flex:1; }
#page-status { font-size:11px; margin:0 0 8px; }
.progress-track { height:1px; background:#bcc0b7; }
.reading-hint { font-size:11px; letter-spacing:.06em; margin-top:16px; }
.photo-action { min-height:44px; padding:8px 12px; border:0; border-bottom:1px solid #b9bcb3; border-radius:0; background:transparent; font-size:12px; }
.photo-action:hover:enabled { background:#f6f1e6; }
.site-footer { padding:12px 36px 20px; max-width:none; font-size:10px; }
@media(max-width:759px), (max-height:499px) {
  .masthead { height:54px; padding:0 20px; }
  .wordmark { font-size:16px; }
  .reader { padding:0 10px 12px; }
  #book3d-stage { height:max(320px, calc(100dvh - 265px)); }
  .site-footer { padding:12px 20px max(16px, env(safe-area-inset-bottom)); }
  .reading-hint { line-height:1.6; max-width:330px; margin:14px auto 0; }
  .photo-action { max-width:100%; font-size:11px; }
  .reader-controls { max-width:300px; }
}

.is-fallback .page-companion { display:flex; justify-content:center; }
.is-fallback .reading-hint { visibility:hidden; }

/* V3 uses the reference's full-window gallery, paper and shadow composition. */
html, body { min-height:100%; background:#e2e2e2; }
.is-3d { overflow:hidden; }
.is-3d .masthead, .is-3d .site-footer, .is-3d .reading-hint { display:none; }
.is-3d .reader { position:fixed; inset:0; padding:0; }
.is-3d #book3d-stage { position:absolute; inset:0; width:100%; height:100%; max-height:none; touch-action:pan-y pinch-zoom; }
.is-3d .book-mode, .is-3d .reading-position { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.is-3d .reader-controls { position:absolute; z-index:2; bottom:22px; left:50%; transform:translateX(-50%); width:auto; max-width:none; margin:0; gap:8px; }
.is-3d .reader-controls .page-control { width:44px; min-width:44px; height:44px; min-height:44px; border:1px solid rgb(0 0 0 / 12%); background:rgb(255 255 255 / 84%); color:rgb(0 0 0 / 38%); }
.is-3d .reader-controls .page-control:hover:enabled { color:#000; border-color:rgb(0 0 0 / 48%); }
.is-3d .reader-controls .page-control:disabled { opacity:.16; }
.is-3d .page-companion { position:absolute; z-index:2; bottom:22px; right:24px; }
.is-3d .reader-page-summary { margin:0; gap:8px; }
.is-3d .photo-action { border:0; min-width:44px; height:44px; padding:8px; color:#555; font-size:11px; background:transparent; }
.is-3d .photo-action:hover:enabled { color:#111; background:rgb(255 255 255 / 60%); }
@media(max-width:620px) { .is-3d .reader-controls { bottom:max(20px,env(safe-area-inset-bottom)); } .is-3d .page-companion { right:14px; bottom:max(20px,env(safe-area-inset-bottom)); } }

/* The reading surface stays landscape; portrait phones rotate the whole UI. */
:root { --reader-width:100vw; --reader-height:100dvh; }
.is-3d #book3d-stage { height:calc(100% - 76px); touch-action:pinch-zoom; }
.is-sideways { overflow:hidden; }
.is-sideways .reader {
  position:fixed; inset:auto; top:0; left:100%;
  width:var(--reader-width); height:var(--reader-height);
  transform:rotate(90deg); transform-origin:top left;
}
.is-sideways .reader-controls { bottom:max(20px,env(safe-area-inset-left)); }
.is-sideways .page-companion { right:max(14px,env(safe-area-inset-bottom)); bottom:max(20px,env(safe-area-inset-left)); }
.is-sideways .photo-dialog {
  position:fixed; inset:auto; left:50%; top:50%; margin:0;
  transform:translate(-50%,-50%) rotate(90deg);
  width:calc(var(--reader-width) - 24px); max-width:none;
  max-height:calc(var(--reader-height) - 24px); padding:12px;
}
.is-sideways #zoom-photo { max-height:calc(var(--reader-height) - 104px); }
.is-fallback .masthead, .is-fallback .site-footer { display:none; }
.is-fallback .reader {
  position:fixed; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:12px 16px; overflow:auto;
  --sheet-size:min(510px, calc((var(--reader-width) - 32px) / 2), calc((var(--reader-height) - 140px) * .75));
}
.is-fallback.is-sideways .reader { inset:auto; top:0; left:100%; }
.is-fallback .album-page { aspect-ratio:3/4; }
.is-fallback .reader-controls { flex-shrink:0; margin-top:12px; }
.is-fallback .reading-hint { display:none; }