.journal-scene{width:84%;height:96%;position:relative;display:grid;place-items:center;perspective:2000px}.journal-book{width:100%;height:89%;position:relative;transform:rotateX(7deg) rotateZ(-1.2deg);transform-style:preserve-3d;background:#c9bfac;box-shadow:0 2px #d8d0bf,0 4px #bcb29e,0 6px #e1dbcf,0 8px #bcb5a7,0 11px #e6e0d5,0 20px 32px #5e482c24,3px 28px 54px #5e482c18}.journal-page{position:absolute;top:0;width:50%;height:100%;background:#efebdf url(../_shared/paper.webp) center/cover;backface-visibility:hidden;overflow:hidden;container-type:inline-size}.journal-page[hidden]{display:none}.side-left{left:0}.side-right{left:50%}.journal-page:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent 85%,#75624714 99%,#fff4)}.side-right:after{background:linear-gradient(90deg,#66513228,#fff3 8%,transparent 20%)}.journal-content{position:absolute;inset:0;padding:9% 10%;color:#38352d}.journal-text .edition{font:1.8cqw/1.5 Arial,sans-serif;letter-spacing:.14em;color:#7f735f}.journal-text h2{font:400 10cqw/.97 Georgia,serif;letter-spacing:-.045em;margin:8% 0 5%}.vessel-study{width:65%;height:31%;color:#9c7053}.vessel-study svg{width:100%;height:88%}.vessel-study span{display:block;font:1.5cqw Arial;letter-spacing:.1em;text-align:center}.journal-text h3{font:italic 3cqw Georgia;margin:6% 0 3%}.journal-text p{font:2.6cqw/1.9 Georgia,serif;margin:0;color:#74664f}.journal-content .folio{position:absolute;left:10%;bottom:6%;font:1.65cqw Arial,sans-serif;letter-spacing:.08em;color:#8a7b62}.journal-photo img{display:block;width:100%;height:81%;object-fit:cover;object-position:center 59%;background:#c0b7a7}.journal-photo p{font:2cqw/1.7 Arial,sans-serif;letter-spacing:.06em;margin:5% 0 0}.journal-photo small{font:italic 2.1cqw/1.4 Georgia;letter-spacing:0;color:#7d705c}.journal-tabs{position:absolute;top:102%;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:1.6cqw}.journal-tabs button{min-width:34px;min-height:36px;font:1cqw Georgia;border-bottom:1px solid transparent}.journal-tabs [aria-current=true]{border-color:#71583e}.journal-counter{position:absolute;right:0;top:104%;font:.65cqw Arial;color:#91836b}.journal-turn{position:absolute;inset:0 0 0 50%;transform-style:preserve-3d;z-index:10;pointer-events:none}.turn-forward{transform-origin:left center}.turn-backward{inset:0 50% 0 0;transform-origin:right center}.journal-turn .journal-page{left:0;width:100%;box-shadow:0 0 16px #55442b22}.turn-reverse{transform:rotateY(180deg)}
@media(max-width:600px) and (orientation:portrait){.journal-scene{width:100%;height:91%}.journal-book{height:94%;transform:rotateZ(-.6deg)}.journal-page{width:100%;left:0}.journal-turn,.turn-backward{inset:0}.journal-tabs{top:103%;gap:16px}.journal-tabs button{font-size:14px;min-height:44px}.journal-counter{font-size:9px;top:101%;right:3%}.journal-text h2{font-size:12cqw}.journal-text .edition{font-size:2.6cqw}.journal-text p{font-size:3.7cqw}.journal-text h3{font-size:4cqw}.vessel-study{height:33%}.vessel-study span{font-size:2cqw}.journal-photo p{font-size:2.6cqw}.journal-photo small{font-size:2.8cqw}.journal-content .folio{font-size:2.2cqw}.journal-photo img{height:79%}}

/* The reading room belongs to the composition; pages remain interactive DOM. */
body[data-work="07"] .art{inset:12% 3.2% 12%;background:#715038 url(reading-desk.webp) center/cover;overflow:hidden;isolation:isolate;border-radius:3px;box-shadow:inset 0 0 70px #27180c23}
.journal-scene{width:79%;height:83%;margin-top:-2%;perspective:2400px}
.journal-book{height:92%;transform:rotateX(8deg) rotateZ(3deg);background:#5a402b;box-shadow:0 2px #d1c2a3,0 4px #9e8b6e,0 6px #d8cbb0,0 8px #a89576,0 10px #dbceb3,0 12px #594331,2px 15px 6px #1f130854,10px 25px 25px #29160863,12px 44px 50px #25170745}
.journal-book:before{content:'';position:absolute;inset:-1px -2px -5px;background:#655344;transform:translateZ(-2px);pointer-events:none}
.journal-page{background-color:#f2ecdf;background-blend-mode:multiply}
.journal-page:after{background:linear-gradient(90deg,#fff8db0a,transparent 35%,#88683e05 75%,#53381838 98%,#fff5e3a6)}
.side-right:after{background:linear-gradient(90deg,#3e2c194a,#fff4d826 8%,transparent 21%,#76532809)}
.journal-book:after{content:'';position:absolute;inset:0;pointer-events:none;z-index:12;mix-blend-mode:multiply;background:linear-gradient(125deg,#78644b12 0%,transparent 19%,#7b684e11 24%,transparent 30%,transparent 65%,#70583714 100%)}
.journal-content{padding:8% 9.5%}
.journal-text h2{font-size:10.4cqw;margin:8% 0 5%}
.journal-photo img{height:79%;filter:sepia(.08) saturate(.86)}
.journal-tabs{top:103%;left:50%;right:auto;transform:translateX(-50%);gap:8px;background:#faf3e2ed;border:1px solid #fff6df91;box-shadow:0 4px 18px #25140625;border-radius:3px;padding:1px 7px;white-space:nowrap}
.journal-tabs button{font-size:12px;min-height:34px;min-width:34px;color:#403222}
.journal-tabs button:hover{background:#76634612}
.journal-tabs button[aria-current=true]{border-color:#71583e}
.journal-tabs button:disabled{opacity:.32;cursor:default}
.journal-counter{top:106%;font-size:9px;letter-spacing:.09em;color:#f5eedc;text-shadow:0 1px 3px #261b11}
@media(max-width:600px) and (orientation:portrait){
 body[data-work="07"] .art{inset:12% 0 14%;border-radius:0;background-position:58% center}
 .journal-scene{width:84%;height:77%;margin-top:-8%}
 .journal-book{height:96%;transform:rotateZ(1.8deg);box-shadow:0 2px #d1c2a3,0 4px #9e8b6e,0 6px #d8cbb0,0 8px #594331,3px 11px 8px #20130557,9px 21px 28px #25160865}
 .journal-content{padding:9% 10%}
 .journal-tabs{top:105%;gap:5px;padding:0 4px}
 .journal-tabs button{font-size:13px;min-width:35px;min-height:44px}
 .journal-counter{top:auto;bottom:101%;right:0;font-size:9px;color:#fff4df}
 .journal-text h2{font-size:13cqw;margin:10% 0 7%}
 .journal-text p{font-size:3.9cqw;line-height:1.85}
 .journal-text h3{font-size:4.3cqw}
 .journal-text .edition{font-size:2.4cqw}
 .vessel-study{height:30%;width:76%}
 .journal-photo img{height:78%}
 .journal-photo p{font-size:2.9cqw}
 .journal-photo small{font-size:3cqw}
}
@media(max-height:550px) and (min-width:601px){.journal-scene{height:77%}.journal-tabs{top:103%;padding:0}.journal-tabs button{min-height:25px;font-size:10px}.journal-counter{display:none}}
/* Window foliage lightly crosses the paper as well as the desk. */
.journal-book:after{background:url(window-shadow.svg) left top/100% 100% no-repeat,linear-gradient(125deg,#78644b0a,transparent 30%,transparent 65%,#7058370a);opacity:.22}

/* Carry window light on every sheet, including both rotating faces.
   A book-level 3D overlay was occluded until the turning sheet was removed. */
.journal-book:after{display:none}
.journal-page:before{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;background-image:url(window-shadow.svg);background-repeat:no-repeat;background-size:200% 100%;background-position:left top;mix-blend-mode:multiply;opacity:.22}
.journal-page.side-right:before{background-position:right top}
.journal-turn .journal-page{box-shadow:none}
@media(max-width:600px) and (orientation:portrait){.journal-page:before,.journal-page.side-right:before{background-size:100% 100%;background-position:left top}}

/* Fixed-light projection is redrawn in paper coordinates each animation frame. */
.journal-turn .journal-page:before{display:none}
.projected-foliage{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;mix-blend-mode:multiply}

.page-cast-shadow{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0}
.page-cast-shadow>i{position:absolute;inset:0;background:#342616}

/* Contain each sheet's blend layers: underlying foliage must never darken another sheet. */
.journal-page{isolation:isolate}