/* Light belongs to the room. It never turns the folded sheets glossy. */
.echo-space{background:radial-gradient(ellipse at 31% 18%,#f3edd9 0%,#e8e0cb 43%,transparent 76%),linear-gradient(112deg,#d0d0b9,#e7dfc9 48%,#d3cfbb)}
.echo-space:before{background:linear-gradient(180deg,transparent 69%,#89886c09 87%,#535b4322 100%);opacity:1}
.echo-space:after{opacity:.12;background-size:1500px}
.room-environment{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden;isolation:isolate}
.window-cast{position:absolute;inset:-9% -6%;background:url('../images/window-cast.svg') 42% 40%/100% 100% no-repeat;animation:window-afternoon 19s ease-in-out infinite alternate;transform-origin:22% 0;opacity:.9}
.linen-curtain{position:absolute;left:-4vw;top:-6%;height:115%;width:clamp(210px,23vw,430px);background:url('../images/linen-curtain.svg') left top/100% 100% no-repeat;transform-origin:10% 0;animation:curtain-breath 11s ease-in-out infinite alternate;opacity:.8}
.room-environment:after{content:'';position:absolute;left:-4%;bottom:-12%;width:112%;height:23%;background:linear-gradient(176deg,transparent 35%,#75694c18 66%,#f3ead485 67%,#b5aa8c11 69%,transparent 71%);transform:rotate(-1.2deg);filter:blur(1px)}
@keyframes window-afternoon{from{transform:translate3d(-4px,-2px,0);opacity:.83}to{transform:translate3d(9px,5px,0);opacity:1}}
@keyframes curtain-breath{0%{transform:translate3d(-5px,-3px,0) skewX(-1deg)}55%{transform:translate3d(8px,0,0) skewX(1.6deg)}100%{transform:translate3d(3px,3px,0) skewX(.5deg)}}
#room-shadows{z-index:2;opacity:.96;mix-blend-mode:multiply;animation:canopy-breeze 13s ease-in-out infinite alternate;transform-origin:85% 12%}
@keyframes canopy-breeze{0%{transform:translate3d(-7px,-5px,0) rotate(-.65deg) scale(1.04)}55%{transform:translate3d(9px,7px,0) rotate(.65deg) scale(1.04)}100%{transform:translate3d(-2px,11px,0) rotate(.1deg) scale(1.04)}}
#room-air{opacity:.88}

/* Keep the open box, reduce it to lid, barrel, comb and crank. */
.listening-room{gap:10px}
.listening-room .listen-toggle{width:70px;min-width:70px;height:53px;min-height:53px}
.listening-room .line-music-box{width:70px;height:53px;filter:none}
.line-music-box .mechanism-outline{stroke:#58694b;stroke-width:1.15}
.line-music-box .mechanism-detail{stroke:#9a875c;stroke-width:.8}
.listen-toggle:hover .line-music-box{filter:drop-shadow(0 2px 1px #665b4420);transform:translateY(-1px)}
.line-music-box .box-play,.line-music-box .box-pause{fill:#3f5839}

/* Bring the poem towards the left book edge without disturbing the closing note. */
.cat-finale .finale-poem{transform:none}
.cat-finale .poem-columns{justify-content:center;padding-right:0}
/* The poem title reads vertically beside the three verse columns. */
.cat-finale .finale-poem{padding-bottom:34px}
.cat-finale .finale-poem .poem-title{position:absolute;left:0;top:calc((100% - 34px)/2);transform:translateY(-50%);display:block;writing-mode:vertical-rl;text-orientation:mixed;white-space:nowrap;width:auto;min-width:24px;min-height:0;margin:0;padding:2px 0;font:400 calc(var(--font)*.66)/1.65 var(--song);letter-spacing:.14em;color:#7b7256}
.cat-finale .finale-poem .poem-title:focus-visible{outline:1px solid currentColor;outline-offset:4px}

body.ambient-paused .window-cast,body.ambient-paused .linen-curtain{animation-play-state:paused}
@media(max-height:570px){.listening-room .listen-toggle,.listening-room .line-music-box{width:62px;min-width:62px;height:47px;min-height:47px}}
@media(prefers-reduced-motion:reduce){.window-cast,.linen-curtain,#room-shadows{animation:none!important;transform:none;will-change:auto}}