/* Covers are a moment, not a permanent sidebar. Content gets the whole page. */
:root{--paper:#fcf8ef;--ink:#272347;--muted:#77717f;--gutter:clamp(24px,6vw,100px)}
body[data-mode=cover]{overflow:hidden;background:#131121;min-height:100svh}
#chapter-cover{position:fixed;inset:0;z-index:8;pointer-events:none;color:#fff9ee}
.cover-nav{position:absolute;inset:0 0 auto;display:flex;justify-content:space-between;padding:24px var(--gutter);font-size:13px;pointer-events:auto;background:linear-gradient(#13112150,transparent)}
.cover-nav a{padding:8px 0;min-width:44px;text-shadow:0 1px 10px #151027}
.cover-caption{position:absolute;left:0;right:0;bottom:26px;text-align:center;padding:62px 24px 22px;background:linear-gradient(transparent,#13112188);pointer-events:none}
.cover-caption h1{font-size:clamp(25px,3vw,38px);letter-spacing:.22em;margin:0 0 8px;text-shadow:0 2px 20px #131121}
.cover-enter{pointer-events:auto;color:#fff9ee;font-size:13px;letter-spacing:.2em;padding:10px 20px;min-height:44px}
.cover-enter span{display:inline-block;margin-left:12px}.cover-enter:hover{color:#ecc96e}.cover-caption h1:focus{outline:none}
#page-curtain{position:fixed;inset:0;width:100vw;height:100svh;z-index:100;pointer-events:auto}
.page-nav{height:94px;max-width:1600px;margin:auto;font-size:12px;letter-spacing:.05em}
.page-nav button{font-size:12px}.chapter{max-width:1600px;padding:0 var(--gutter) 70px}
.chapter .chapter-body{width:100%;padding:0;min-height:0;display:block}
.chapter-heading{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:end;padding:64px 0 66px;border-bottom:1px solid var(--line);margin-bottom:56px}
.chapter-heading h1,.lake .chapter-heading h1{font-size:clamp(40px,5.5vw,76px);letter-spacing:.06em;line-height:1.2;margin:0}
.chapter-heading .lead{font:clamp(17px,1.5vw,21px)/1.9 "Songti SC","SimSun",serif;max-width:25em;margin:0;color:#686173;justify-self:end}
.chapter-footer{padding-top:60px;border-top:1px solid var(--line);margin-top:70px}
.chapter .source-note{max-width:55em}
/* History: an illustrated spread with open typesetting, not boxed timeline cards. */
.history-spread{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(40px,8vw,140px);align-items:start}
.history-spread .timeline{margin:0;display:grid;grid-template-columns:1fr;gap:32px}
.timeline section{border:0;padding:0 0 26px;max-width:36em}.timeline section:before{display:none}
.timeline h2{font-size:29px;margin-bottom:15px}.timeline p{color:#696173;font-size:16px}
.history-spread .role-illustration{margin:0;max-width:none;position:sticky;top:40px}
/* Features: a quiet index. Open entries have room for a complete paragraph. */
.feature-list{max-width:960px;margin:0 auto}.feature-list details{padding:28px 0}
.feature-list>details>summary{font-size:32px;letter-spacing:.08em}
.feature-list .text{max-width:46em;margin:25px 0 12px 12%}
.feature-list .text p{font-size:16px;line-height:2.1}
.feature-list .manuscript{margin-left:12%}
.feature-list .manuscript>summary::after{content:none!important}
/* Music: the actual illustration is the hero, with a reading column beside it. */
.instrument-nav{justify-content:center;gap:clamp(18px,4vw,65px);border:0;margin:0 0 38px}
.instrument-nav button{font-size:15px}
#instrument-panel{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.8fr);gap:clamp(32px,6vw,90px);align-items:center}
.instrument-illustration{margin:0;background:transparent}.instrument-copy{max-width:34em}.instrument-copy h2{font-size:34px}
.instrument-copy p{font-size:16px;line-height:2}.instrument-copy .quiet{font-size:12px}
/* Works: oversized pictures and a single title, nothing over the paintings. */
.works-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:58px 32px;margin:0}
.play-card h2{font-size:25px;margin-top:19px;letter-spacing:.1em}
.play-card img{transition:opacity .25s ease}.works .source-note{margin-top:60px}
/* A writing desk for the dictionary, until verified entries arrive. */
.dictionary-search{max-width:940px;margin:0 auto 28px}.dictionary-layout{max-width:940px;margin:auto;grid-template-columns:minmax(0,1.5fr) minmax(0,.85fr);gap:60px}
.search-message{max-width:940px;margin:0 auto 28px}.character-grid{gap:12px}
.dictionary-detail{padding:26px 0 20px 38px}.dictionary-detail p{font-size:14px}
/* The interview itself is the main image. */
.dialogue .chapter-heading{border:0;margin-bottom:0;padding-bottom:46px}
.dialogue .video-shell{margin:0 0 18px;background:#231f42}
.interview-reveal>img{object-fit:cover}.pigment-layer{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
.interview-art{will-change:opacity}.interview-real{object-fit:contain!important}
.interview-start span:first-child{font-size:25px;background:#28234b70;border-color:#fff8;backdrop-filter:none}
.interview-start span:last-child{background:#28234b80;font-size:12px;padding:7px 13px}
.interview-caption{margin:0 0 35px}.dialogue .text{max-width:44em;margin-left:auto;margin-right:auto}
.dialogue .manuscript{max-width:44em;margin:20px auto}
/* The short lake prologue reads as a single open page. */
.lake .chapter-heading{display:block;border:0;text-align:center;margin-bottom:48px;padding-top:60px;padding-bottom:0}
.lake .chapter-heading h1{font-size:clamp(30px,3vw,42px);margin-bottom:34px}
.lake .chapter-heading .lead{max-width:29em;margin:auto;font-family:inherit;font-size:17px}
.lake .poem{font-size:clamp(42px,7vw,94px);text-align:center;line-height:1.6;letter-spacing:.14em;margin:42px 0;color:#353268}
.lake .chapter-body>.quiet{text-align:center}.lake .chapter-body{background:radial-gradient(ellipse at 50% 62%,#f4deb826,transparent 65%)}
.lake .chapter-footer{margin-top:60px}
.detail-layout{grid-template-columns:1fr 1fr;gap:50px}dialog{width:min(1100px,calc(100vw - 30px));padding:60px clamp(24px,5vw,75px)}
.gallery{max-width:1660px}.gallery-grid{gap:60px 36px}.gallery-card h2{font-size:14px}
@media(min-width:1800px){.gallery-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1000px){
 .chapter-heading{gap:30px;padding-top:44px}.history-spread{gap:45px}.works-grid{gap:42px 24px}
 #instrument-panel{gap:34px;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}.dictionary-layout{gap:30px}
}
@media(max-width:740px){
 .page-nav{height:72px}.chapter{padding-bottom:45px}.chapter-heading{display:block;padding:30px 0 34px;margin-bottom:32px}
 .chapter-heading h1{font-size:43px;margin-bottom:24px}.chapter-heading .lead{font-size:18px;max-width:29em}
 .history-spread{display:flex;flex-direction:column;gap:28px}.history-spread .role-illustration{position:static;width:100%;max-width:460px;margin:0 auto}
 .timeline section{padding-bottom:15px}.timeline h2{font-size:27px}.history-spread .timeline{gap:24px}
 .feature-list>details>summary{font-size:28px}.feature-list .text{margin-left:0}.feature-list .manuscript{margin-left:0}
 .feature-list details{padding:23px 0}.feature-list .text p{font-size:15px}
 #instrument-panel{display:block}.instrument-nav{justify-content:flex-start;gap:8px 24px;margin-bottom:25px}.instrument-nav button{font-size:14px}
 .instrument-illustration{margin-bottom:28px}.instrument-copy h2{font-size:29px}.instrument-copy p{font-size:15px}
 .works-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 18px}.play-card h2{font-size:21px;margin-top:15px}
 .dictionary-layout{display:block}.dictionary-detail{border:0;border-top:1px solid var(--line);padding:28px 0 0;margin-top:35px}.character-grid{gap:9px}
 .dialogue .chapter-heading{padding-bottom:30px}.dialogue .chapter-heading h1{font-size:39px}.dialogue .text{font-size:15px}
 .interview-start{gap:7px}.interview-start span:first-child{font-size:22px;padding:12px 13px 13px 17px}.interview-start span:last-child{font-size:11px}
 .chapter-footer{margin-top:45px;padding-top:26px;gap:18px}.continue{font-size:14px}.continue span{margin-left:12px}
 .cover-nav{padding-top:18px}.cover-caption{padding-bottom:16px}.cover-caption h1{font-size:29px}
 .detail-layout{display:block}.detail-layout figure{margin-bottom:32px}.detail-layout img{max-height:420px}
 .lake .chapter-heading{padding-top:35px}.lake .poem{font-size:clamp(39px,10vw,65px);margin:40px 0}
}
@media(max-width:370px){.works-grid{grid-template-columns:1fr}.chapter-heading h1{font-size:37px}.cover-caption h1{font-size:26px}.continue span{margin-left:7px}}
@media(max-height:520px) and (orientation:landscape){.cover-caption{left:auto;width:30%;bottom:24px;padding:20px;background:none}.cover-caption h1{font-size:23px}.cover-nav{padding-top:10px}}