:root{color-scheme:light;--ink:#392f26;--paper:#eee2c8;--paper-edge:#c7b794}
@font-face{font-family:"Comic Ming";src:url("fonts/noto-serif-tc-subset.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Unified WenKai";src:url("fonts/chapter-perspectives.ttf") format("truetype");font-weight:400;font-style:normal;font-display:block}
*{box-sizing:border-box}html,body{min-height:100%}body{margin:0;overflow-x:hidden;color:var(--ink);background:#b1a58e;font-family:Georgia,"Times New Roman",serif}button{font:inherit}
.sr-only,.skip-link:not(:focus){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.skip-link{position:fixed;z-index:100;top:1rem;left:1rem;padding:.65rem 1rem;background:#fff;color:#000}
.reader{min-height:100vh;display:grid;place-content:center;padding:1rem 5rem}.book-stage{position:relative;display:grid;place-items:center;width:min(1120px,calc(100vw - 10rem));height:calc(100dvh - 2rem);min-height:320px;perspective:none}
#book.book{position:relative;width:min(1120px,calc(100vw - 160px),calc((100dvh - 32px)*1.5));height:min(747px,calc((100vw - 160px)*.666667),calc(100dvh - 32px));transform:translateX(var(--book-offset,0))!important;transition:transform 450ms ease;touch-action:none}
#book .stf__block{perspective:none}#book .stf__innerShadow{opacity:.65}
#book .page{display:block;overflow:hidden;padding:7% 7.5%;border:1px solid var(--paper-edge);border-radius:2px;background:var(--paper);backface-visibility:visible;box-shadow:none}#book .page.cover,#book .page.back-cover{color:#efe1bc}#book .illustrated-cover,#book .full-art-page{padding:0;border:0}#book .illustrated-cover{background:transparent}#book .back-cover{display:grid}
.cover-artwork,#book .page-artwork,.waterfall-artwork{display:block;width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none}.cover-artwork{object-fit:cover}#book .artwork-page{padding:0}
.folio{position:absolute;left:0;right:0;bottom:1.5%;margin:0;text-align:center;font:normal .75rem Georgia,serif;font-variant-numeric:lining-nums}
.interview-art{position:absolute;inset:9% 7% 5%;mix-blend-mode:multiply}.interview-heading{position:absolute;top:1.5%;left:5%;right:5%;margin:0;color:#713d31;text-align:center;font:normal clamp(.8rem,1.65vw,1.35rem)/1.25 "Comic Ming",serif;letter-spacing:.18em}.interview-translation{display:block;margin-top:.3em;font:normal .55em/1.3 Georgia,serif;letter-spacing:0}
.counterpart-panel{position:absolute;z-index:2;display:block;padding:0;border:0;border-radius:0;background-repeat:no-repeat;opacity:0;cursor:pointer;transition:opacity 140ms ease;touch-action:manipulation}.counterpart-panel[aria-pressed="true"],.counterpart-panel:focus-visible{opacity:1}.counterpart-panel:focus-visible{outline:3px solid #365c79;outline-offset:2px}@media(hover:hover){.counterpart-panel:hover{opacity:1}}html.turning-page .counterpart-panel{opacity:0;pointer-events:none}
.chapter-copy{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#493c31;text-align:center;transform:translateY(-3%)}.chapter-copy p{margin:0}.chapter-copy [lang="yue-Hant"]{font:400 clamp(1.2rem,3.4vw,2.8rem)/1.4 "Unified WenKai",serif;font-synthesis:none;letter-spacing:.04em;white-space:nowrap}.chapter-copy p:last-child{margin-top:.8rem;font:italic clamp(.8rem,1.4vw,1.05rem)/1.4 Georgia,serif;letter-spacing:.08em}
#book .waterfall-page{padding:4.5%}.waterfall-reveal{position:absolute;top:7%;left:7%;display:block;width:86%;aspect-ratio:3/4;padding:0;border:0;background:transparent;cursor:pointer;touch-action:manipulation}.waterfall-artwork{clip-path:inset(3.8% 5.2% 3.6%);filter:sepia(.35) saturate(.95) hue-rotate(8deg) brightness(.97);mix-blend-mode:multiply;transition:filter 700ms ease}.waterfall-reveal[aria-pressed="true"] .waterfall-artwork,.waterfall-reveal:focus-visible .waterfall-artwork{filter:none}.waterfall-reveal:focus-visible{outline:2px solid #713d31;outline-offset:2px}@media(hover:hover){.waterfall-reveal:hover .waterfall-artwork{filter:none}}.waterfall-caption{position:absolute;right:11.5%;bottom:6.5%;margin:0;text-align:right;font:italic clamp(.65rem,1.1vw,.85rem)/1.3 Georgia,serif}
.turn{position:absolute;z-index:50;top:50%;width:3.25rem;height:3.25rem;border:1px solid rgba(57,47,38,.3);border-radius:50%;background:rgba(238,226,200,.82);color:var(--ink);font:2rem/1 Arial,sans-serif;cursor:pointer;transform:translateY(-50%);transition:opacity .2s,transform .2s,background .2s}.turn:hover:not(:disabled){background:#fff;transform:translateY(-50%) scale(1.07)}.turn:focus-visible{outline:3px solid #26342f;outline-offset:3px}.turn:disabled{opacity:.22;cursor:default}.turn-prev{left:-64px}.turn-next{right:-64px}
html.turning-page,html.turning-page body{overflow:hidden;overscroll-behavior:none}
@media(max-width:860px){.reader{padding:1rem 0}.book-stage{width:100vw;min-height:0}#book.book{width:min(520px,calc(100vw - 88px),calc((100dvh - 32px)*.75));height:min(694px,calc((100vw - 88px)*1.333333),calc(100dvh - 32px));transform:none!important}.turn{width:2.7rem;height:2.7rem}.turn-prev{left:.65rem}.turn-next{right:.65rem}}
@media(max-height:600px){.book-stage{min-height:0}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}