/* Hand-painted mounting, with readable and operable real era labels. */
.story .era-nav { gap:8px; padding-top:7px; border-top:0; }
.story .era-nav button { position:relative; padding:12px 5px 15px; min-height:64px; border:0; color:#edd4a6; background:url('assets/era-ornament-v21.png') center/100% 100% no-repeat; transition:filter .25s,color .25s; }
.story .era-nav button:hover { filter:brightness(1.2); color:#fff3cf; }
.story .era-nav [aria-current=true] { border:0; background:url('assets/era-ornament-v21.png') center/100% 100% no-repeat,radial-gradient(ellipse,#9e773f66,transparent 68%); color:#fff0c7; filter:brightness(1.17); text-shadow:0 0 12px #e8b56c88; }
.story .era-nav button:focus-visible { outline:2px solid #f1c97b; outline-offset:2px; }
.story .scroll-footer { height:164px; grid-template-rows:37px 1fr; padding-top:12px; }
.story .scroll-rail { height:calc(100% - 341px); }
.story .scroll-side-title { isolation:isolate; letter-spacing:.16em; font-size:31px; }
.story .scroll-side-title:before { content:'QIONGHUA CHRONICLE'; font-size:8px; top:28px; }
.story .scroll-side-title:after { content:''; position:absolute; width:280px; height:78px; top:50%; left:50%; right:auto; bottom:auto; background:url('assets/era-ornament-v21.png') center/100% 100% no-repeat; transform:translate(-50%,-50%) rotate(90deg); opacity:.84; z-index:-1; }
.story .scroll-side-title:after { mask-image:radial-gradient(ellipse 16% 23% at 50% 73%,transparent 94%,#000 100%); }
.sound-control { border-top:1px solid #b99a683b; padding:5px 0; margin:7px 0; }
.music-credit summary { cursor:pointer; font:9px/1.8 var(--serif); color:#8c7254; }
#performance-music { width:100%; text-align:left; min-height:40px; font:12px var(--serif); color:#7e5539; }
#performance-music[aria-pressed=true] { color:#983f2d; }
.sound-control small { display:block; font:9px/1.75 var(--serif); color:#907a5a; }
.sound-control a { text-underline-offset:3px; }
@media(min-width:1001px) {
 .theatre .mechanism-stage { left:9%; right:24%; top:0; bottom:157px; }
 .theatre .room-heading { left:4%; top:6%; width:21%; pointer-events:none; }
 .theatre .room-heading h1 { font-size:clamp(28px,3vw,43px); }
 .theatre .mechanism-copy { right:2.7%; width:24%; top:7%; max-height:calc(100% - 202px); padding:22px 24px; }
 .theatre-tools { left:16%; right:28%; bottom:149px; padding:7px 10px; gap:4px 13px; }
}
@media(max-width:1000px) {
 .story .scroll-footer { height:211px; grid-template-rows:27px 31px 1fr; }
 .story .scroll-rail { height:calc(100% - 426px); }
 .story .era-nav { gap:2px 7px; }
 .story .era-nav button { min-height:62px; padding:13px 3px 15px; font-size:11px; }
 .theatre .mechanism-stage { height:620px; margin:0 3%; width:94%; }
 .theatre .mechanism-copy { padding:23px; }
}
@media(max-width:600px) {
 .theatre .mechanism-stage { height:555px; }
 .story .era-nav { gap:3px 6px; }
.story .era-nav button { font-size:10px; line-height:1.7; padding:10px 4px; }
 .story .scroll-side-title { font-size:20px; }
}
@media(prefers-reduced-motion:reduce) { .story .era-nav button { transition:none; } }