/* The chapter painting waits for an explicit invitation to enter. */
:root{--verse-space:100px}
#film-host{inset:0 0 100px}#film-host #stage{width:min(100vw,calc((100svh - 100px)*.75))}
.cover-caption{left:0;right:0;top:auto;bottom:8px;width:auto;padding:0;text-align:center;background:none}
.cover-caption h1{font-size:25px;line-height:1.3;letter-spacing:.18em;margin:0;text-shadow:none}
.cover-enter{padding:8px 22px;font-size:14px;letter-spacing:.15em}
.cover-nav{background:none}.cover-nav a{text-shadow:none}
body[data-mode=film],body[data-mode=cover]{background:#131121;overflow:hidden}
.slide-viewport{position:fixed;inset:0;z-index:95;overflow:hidden;pointer-events:none;isolation:isolate;will-change:transform}
/* A modest flower pin and a single thread. */
.history-jewelry .gold-stations,.history-jewelry .gold-pendant{display:none}
.history-jewelry .gold-guide{stroke:#d2c5ab;stroke-width:.65}
.history-jewelry .gold-read{stroke:#b49a6c;stroke-width:1}
/* Music has one quiet paper field, with color kept inside the illustration. */
.music .scenography,.music .string-lines{display:none}
.music .chapter-heading{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);grid-template-areas:'title art' 'lead art';grid-template-rows:auto 1fr;align-items:center;gap:35px 6%;min-height:0;padding:20px 0 25px}
.music .chapter-heading h1{grid-area:title;width:auto;font-size:clamp(70px,8.3vw,128px);line-height:1.16}
.music .chapter-heading .lead{grid-area:lead;align-self:start;position:static;margin:0 0 0 9%;max-width:18em;font-size:16px}
.music .instrument-reel{grid-area:art;position:relative;inset:auto;width:100%;height:auto;aspect-ratio:4/3;overflow:hidden;clip-path:ellipse(50% 50% at 50% 50%);border-radius:0;background:#fcf5e8}
.music .instrument-reel .instrument-illustration{border-radius:0;background:#fcf5e8}
.music .instrument-reel .instrument-illustration img{object-fit:contain;aspect-ratio:4/3}
.music .instrument-nav{width:100%;margin:40px 0 45px;padding:15px 0;justify-content:space-between;gap:12px;border-top:1px solid #b6a68966;border-bottom:1px solid #b6a68966}
.music .instrument-nav button{transform:none;background:none;border-radius:0;padding:7px 12px;min-width:0;font-size:22px;position:relative}
.music .instrument-nav button[aria-pressed=true]{color:#a44b39;background:none}
.music .instrument-nav button[aria-pressed=true]:after{content:'';display:block;position:absolute;left:12px;right:12px;bottom:0;height:1px;background:#b5634a}
#instrument-panel{position:relative;padding-top:0;min-height:240px}
.music .instrument-copy{max-width:1080px;margin:auto;padding:10px 0;column-gap:60px}
.music .instrument-copy h2{font-size:38px;margin-bottom:25px}
.music .instrument-copy p{font:16px/2.1 "Microsoft YaHei",sans-serif;color:#51495f}
.music .chapter-footer{margin-top:50px}
/* The selected painting travels into a compact, centered story spread. */
dialog#detail{padding:44px;width:min(1160px,calc(100vw - 48px));max-height:calc(100svh - 50px);margin:auto;overflow:auto;background:#fbf5e8;border:0;overscroll-behavior:contain;transition:background-color .4s}
dialog#detail::backdrop{background:#191238bd;backdrop-filter:blur(5px)}
dialog#detail[data-phase=opening]{background:transparent;overflow:hidden}
dialog#detail[data-phase=opening]::backdrop{animation:story-shade .5s both}
dialog#detail[data-phase=opening] #detail-body{opacity:0}
dialog#detail[data-phase=settling] #detail-body{opacity:0}
dialog#detail[data-phase=reading] #detail-body{opacity:1}
.story-layout{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:44px;align-items:start}
.story-art{position:sticky;top:0;margin:0;align-self:start}
.story-art img{display:block;width:100%;height:auto;max-height:none;aspect-ratio:3/4;object-fit:contain}
.story-copy{min-width:0;padding:3px 0 8px}
.story-copy h2{font:48px/1.2 "Songti SC","SimSun",serif;letter-spacing:.08em;margin:0 0 28px;color:#302879}
.story-copy p{font:18px/1.95 "Songti SC","SimSun",serif;letter-spacing:.015em;color:#4a4257;margin:0 0 20px;text-align:justify;text-wrap:pretty}
.story-background{padding-top:24px;margin-top:26px;border-top:1px solid #bbaa8e66}
.story-background h3{font:22px/1.5 "Songti SC","SimSun",serif;letter-spacing:.08em;margin:0 0 19px;color:#716046}
.story-background p{font-size:16px;line-height:2.05}
.story-letter{display:inline-block;white-space:pre}
.story-flying-art{position:fixed;z-index:10;max-width:none;object-fit:contain;margin:0;pointer-events:none}
#detail .close{position:fixed;right:var(--close-right,18px);top:var(--close-top,18px);z-index:15;color:#302879;background:#fbf5e8ed;border-radius:50%;font-size:28px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@keyframes story-shade{from{background:#19123800}to{background:#191238bd}}
@media(max-width:850px){
 .music .chapter-heading{gap:25px 4%}.music .chapter-heading h1{font-size:clamp(60px,9vw,80px)}.music .chapter-heading .lead{margin-left:0;font-size:15px}
 dialog#detail{padding:32px;width:calc(100vw - 32px)}.story-layout{gap:28px;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr)}.story-copy h2{font-size:38px}.story-copy p{font-size:17px}.story-background p{font-size:15px}
}
@media(max-width:650px){
 .cover-caption h1{font-size:23px}.cover-nav{font-size:12px;padding:15px 22px}
 .music .chapter-heading{grid-template-columns:1fr;grid-template-areas:'title' 'lead' 'art';gap:25px;padding:10px 0 0}
 .music .chapter-heading h1{font-size:clamp(65px,18vw,98px)}.music .chapter-heading .lead{font-size:15px;margin:0}
 .music .instrument-reel{width:100%;margin-top:5px;aspect-ratio:4/3}
 .music .instrument-nav{margin:30px 0;padding:10px 0;gap:0;flex-wrap:nowrap}.music .instrument-nav button{font-size:16px;padding:8px 3px}.music .instrument-nav button[aria-pressed=true]:after{left:3px;right:3px}
 .music .instrument-copy{columns:1;padding:5px 0}.music .instrument-copy h2{font-size:31px}.music .instrument-copy p{font-size:15px;line-height:2.05}
 dialog#detail{width:calc(100vw - 22px);max-height:calc(100svh - 22px);padding:34px 24px}
 .story-layout{display:block}.story-art{position:static;width:68%;max-width:280px;margin:0 auto 30px}.story-copy h2{text-align:center;font-size:37px;margin-bottom:25px}.story-copy p{font-size:17px;line-height:1.95}.story-background{margin-top:25px;padding-top:23px}.story-background p{font-size:15px}
 #detail .close{right:13px;top:13px;width:40px;min-height:40px}.story-flying-art{max-height:none}
}
@media(prefers-reduced-motion:reduce){.story-letter{opacity:1!important;transform:none!important}}