/* Coordinates are measured against the supplied 1536 × 1024 photograph. */
#scene{aspect-ratio:3/2}
#scene .type-hot{left:5%;top:54%;width:30%;height:40%}
#scene .ink-hot{left:81%;right:auto;top:51%;width:12%;height:24%;min-width:44px;min-height:44px}
#scene .candle{left:33.5%;top:41%;width:7%;height:27%;min-width:0;min-height:44px}
#scene .flame{left:47%;top:4%;width:7%;height:12%;min-width:2px;border-radius:80% 15% 65% 35%}
.candle-clean-plate{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;clip-path:inset(40% 61.5% 52% 35.5%)}
#scene .quill-lifted-plate{clip-path:polygon(84% 52%,94% 50%,94% 68%,88% 75%,80% 75%,80% 68%)}
/* A live paper surface covers the photograph's sample lettering. Reuse a blank
   area of the photographed parchment for its grain, keeping the original edges. */
#scene::before{content:'';position:absolute;left:10.5%;top:56.5%;width:13%;height:7.3%;transform:matrix(1,-.216,.36,.95,0,0);background:url('assets/wide-desk-title.png') 80.59% 79.25% / 1097% 1575%;mask-image:linear-gradient(to right,transparent,#000 3% 97%,transparent),linear-gradient(to bottom,transparent,#000 5% 95%,transparent);mask-composite:intersect;pointer-events:none;z-index:1}
#scene #typed{left:10.9%;top:57%;width:12%;height:6%;font-size:clamp(2px,.65vw,10px);transform:matrix(1,-.216,.36,.95,0,0);z-index:2}
#scene #drawing,#scene .paper-open{left:69.4%;top:67%;width:15.8%;height:17.3%;transform:matrix(1,-.12,.65,1,0,0);transform-origin:center;min-width:0;min-height:0}
#scene .photographic-book{left:39.3%;top:63%;width:28%;height:32.5%;transform:none;filter:none;clip-path:polygon(51% 0,100% 23%,100% 50%,61% 100%,0 74%,0 51%)}
#scene .photographic-book:hover,#scene .photographic-book:focus-visible{transform:none;filter:brightness(1.04)}
#scene .book-photo,#scene .living-border{inset:auto;left:-140.357%;top:-193.846%;width:357.143%;height:307.692%;max-width:none;object-fit:fill;mask-image:none}
#scene .living-border{clip-path:polygon(evenodd,54% 64%,66.5% 71%,56% 90%,40% 82%,54% 64%,54% 65.4%,41.5% 81.5%,55.8% 88.5%,65% 71.5%,54% 65.4%)}
#scene .photographic-book .border-glint{background:none;clip-path:none}
#scene .photographic-book:focus-visible{outline:0}
#scene .photographic-book:focus-visible::after{content:'';display:block;position:absolute;inset:2%;border:3px solid #ffe0a0;pointer-events:none}
@media(max-width:650px){#scene .candle{width:11.3%;left:31.5%}#scene .flame{left:49%;width:5%}#scene .paper-open{min-height:44px}#scene .ink-hot{min-height:44px}}
@media(forced-colors:active){#scene .hotspot,#scene .photographic-book{outline:2px solid ButtonText}}
.globe-hot{left:87.3%;top:1%;width:11%;height:17%;min-width:44px;min-height:44px;border-radius:50%}
.globe-surface{position:absolute;left:88.48%;top:2.34%;width:8.203%;height:12.305%;z-index:2;pointer-events:none;border-radius:50%;opacity:0}
.globe-status,.hourglass-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* Only the central leather/title area comes from the corrected supplied photo. */
#scene .book-title-correction{position:absolute;left:-140.357%;top:-193.846%;width:357.143%;height:307.692%;max-width:none;object-fit:fill;pointer-events:none;clip-path:polygon(54% 67.1%,64.2% 73.2%,56% 82.9%,46.6% 77.2%)}
@media(max-width:400px){.globe-hot{left:auto;right:1%;width:44px}}
.hourglass-clean{position:absolute;inset:0;width:100%;height:100%;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1536 1024'%3E%3Cdefs%3E%3Cfilter id='soft'%3E%3CfeGaussianBlur stdDeviation='3'/%3E%3C/filter%3E%3C/defs%3E%3Crect x='928' y='53' width='80' height='151' fill='white' filter='url(%23soft)'/%3E%3C/svg%3E");mask-size:100% 100%;pointer-events:none;z-index:1;visibility:hidden}
.hourglass-art{position:absolute;left:60.8073%;top:5.957%;width:4.362%;height:13.3796%;overflow:visible;pointer-events:none;z-index:2;visibility:hidden}
.hourglass-active .hourglass-clean,.hourglass-active .hourglass-art{visibility:visible}
.hourglass-hot{left:59.5%;top:5%;width:7%;height:15%;min-width:44px;min-height:44px;border-radius:15%}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 #scene .photographic-book .living-border{transform:translate(var(--ornament-x,0px),var(--ornament-y,0px));transition:transform .4s ease-out,opacity .5s;animation:none;filter:brightness(1.06)}
 #scene .photographic-book .book-title-correction{transform:translate(var(--title-x,0px),var(--title-y,0px));transition:transform .5s ease-out}
}
@media(prefers-reduced-motion:reduce){#scene .photographic-book :is(.living-border,.book-title-correction){transform:none;transition:none}}
/* Use available height on laptops; retain the full photograph and normal zoom reflow. */
@media(min-width:701px) and (min-height:480px){
 body:has(.desk-sound-control){height:100dvh}
 body:has(.desk-sound-control)>header{min-height:84px;height:auto;padding:8px 5%;gap:3px}
 header .wordmark{font-size:clamp(38px,3.5vw,52px);line-height:1}
 header .site-tagline{font-size:10px;line-height:1.4}
 header>.profile-trigger{width:58px;height:58px;top:12px}
 body:has(.desk-sound-control)>main{display:flex;flex-direction:column;flex:1;min-height:0}
 main>.intro{padding:6px 14px 10px;flex:none}
 .intro .site-declaration{font-size:16px;line-height:1.45;max-width:980px;margin:6px auto 8px}
 main .intro-divider{margin:8px auto 0}
 main>.desk-end-divider{padding:0 14px;flex:none}
 main>.viewport{display:flex;align-items:center;justify-content:center;flex:1;min-height:260px}
 #scene{width:min(100%,var(--fit-desk-width,1600px));flex:none;margin:0 auto}
 body>.desk-sound-control{flex:none;margin:0 auto;padding:4px 16px;min-height:56px}
}

#scene .desk-breeze{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
#scene .desk-breeze[hidden]{display:none}
@media(prefers-reduced-motion:reduce){#scene .desk-breeze{display:none}}