/* Source-matched photographic scene. The image is never cover-cropped:
   all interaction zones use the same proportional coordinate system. */
.desk-scene{height:auto!important;aspect-ratio:3/2;container-type:inline-size;background:#160f0b;border-color:#58432e;overflow:hidden;box-shadow:0 24px 65px #0009}
.desk-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;pointer-events:none}
.desk-scene .desk-hotspot{position:absolute;background:transparent;border:0;box-shadow:none;transform:none;padding:0;border-radius:3px;min-width:44px;min-height:44px;cursor:pointer;transition:outline-color .2s}
.desk-scene .desk-hotspot:before,.desk-scene .desk-hotspot:after{display:none}
.desk-scene .desk-hotspot:hover{outline:1px solid #b39a5d80;outline-offset:2px}
.desk-scene .desk-hotspot:focus-visible{outline:3px solid #f8d375;outline-offset:3px}
.desk-scene .paperwork{left:1%;top:1%;width:25%;height:31%;opacity:1}
.desk-scene .coffee-cup{left:3%;right:auto;top:32%;width:20%;height:30%}
.desk-scene .clipboard-hotspot{left:73%;top:3%;width:26%;height:47%}
.desk-scene .ashtray-hotspot{left:1%;top:63%;width:24%;height:34%}
.desk-scene .brass-nameplate{left:46%;top:75%;bottom:auto;width:41%;height:19%}
.desk-scene .desk-note{left:79.5%;right:auto;top:54.5%;width:12%;height:15%;z-index:1;display:flex;align-items:center;justify-content:center;transform:rotate(2deg)}
.desk-scene .desk-note p{font:italic bold 1.6cqw/1.4 Georgia,serif;color:#383124;margin:0;padding:5%;text-align:center}
.desk-scene .closed-book{left:34%;top:13%;width:35%;height:56%;padding:5% 4%;display:flex;align-items:center;justify-content:center;color:#c9b78c;text-align:center;transform:rotate(-2deg);text-shadow:0 1px 2px #000c}
.desk-scene .closed-book:hover{transform:rotate(-2deg);box-shadow:none}
.closed-book .cover-small{font-size:1cqw;letter-spacing:.18em;margin:0 0 6%}
.closed-book .cover-title{font-size:2.45cqw;line-height:1.15;letter-spacing:0}
.closed-book .cover-title em{font-size:4.1cqw}
.closed-book .cover-owner{font-size:1.05cqw;margin-top:9%;letter-spacing:.18em}
.closed-book .book-instruction{font-size:.85cqw;letter-spacing:.09em;margin-top:10%;line-height:1.5}
.desk-shortcuts{max-width:1230px;margin:14px auto 24px;padding:0 20px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.desk-shortcuts>span{font:11px/1.5 'Courier New',monospace;color:#b9b19f}
.drawer-front{background:linear-gradient(#130d0875,#090604a8),url('assets/wood-detail.webp');background-size:auto,420px 340px;border-color:#4b3728;color:#c5b28d}
.drawer-interior{background:linear-gradient(#160f099a,#09060495),url('assets/wood-detail.webp');background-size:auto,420px 340px;border-color:#332116}
.drawer-handle{border-color:#847248;box-shadow:0 5px 7px #000b,inset 0 1px 2px #d1ba7d66}
.open-book{border-color:#292b1d;background:#ada184;box-shadow:5px 6px 0 #8f8163,8px 9px 0 #171b15}
.book-left{background:linear-gradient(90deg,#c9bfa4e8 85%,#635744e8),url('assets/cloth-detail.webp')}
.article-byline{font:italic 12px/1.6 Georgia,serif;margin:12px 0 0;color:#393c31}
.binder-sections{display:flex;gap:12px;margin:10px 0 18px;flex-wrap:wrap}
.binder-sections .quiet-button{min-height:44px;flex:1;text-align:left;border-color:#9c8760;background:#5c4b2525}
.binder-sections .quiet-button[aria-pressed=true]{border-bottom:4px solid #b19b5c;color:#edd9aa;background:#9a7b3328}
.index-section{font:10px/1.5 'Courier New',monospace;letter-spacing:1px;margin:20px 0 6px;border-bottom:3px double #867858;padding-bottom:8px}
.clip-columns{align-items:start}
@media(min-width:741px){.sticky-note{font-size:17px}.sticky-note.aggressive{font-size:18px}.clip-column .clip-text{padding:15px 15px 12px;border-bottom:0;box-shadow:3px 0 5px #0002}.clip-column .clip-text:first-letter{font-size:inherit;float:none;line-height:inherit;margin:0}.clip-column:first-child .clip-text:first-child:first-letter{font-size:39px;float:left;line-height:1;margin:6px 6px 0 0}.clip-column .clip-text:after{display:none}.clip-column .clip-text:last-of-type{padding-bottom:28px;box-shadow:3px 4px 5px #0002}.clip-column .clip-text:last-of-type:after{display:block}}
@media(max-width:740px){.desk-shortcuts{margin:12px 14px 20px;padding:0;flex-direction:column;align-items:stretch}.desk-shortcuts>span{text-align:center;font-size:10px}.desk-shortcuts button{font-size:12px}.closed-book .cover-small{display:none}.closed-book .cover-title{font-size:2.7cqw}.closed-book .cover-title em{font-size:4.4cqw}.closed-book .cover-owner{font-size:1.6cqw;margin-top:5%}.closed-book .book-instruction{display:none}.desk-scene .desk-note p{font-size:1.65cqw}.clip-columns{display:flex;flex-direction:column}.clip-column{width:100%}.clip-columns>.sticky-note{align-self:flex-start}.clip-columns>.secondary-note{align-self:flex-end}.book-left{display:none}.book-right{padding:22px 14px}.desk-scene{margin:0 14px}}
@media(prefers-reduced-motion:reduce){.desk-hotspot{transition:none}}
/* Only the opening paragraph gets a drop cap, not every paragraph. */
.clip-column:first-child .clip-text:not(:first-child):first-letter{font-size:inherit;float:none;line-height:inherit;margin:0}
@media(min-width:741px){.clip-columns .sticky-note{width:calc(100% - 32px);margin:26px 16px 18px;transform:rotate(-2deg)}.clip-columns .sticky-note.aggressive{transform:rotate(2deg)}}
@media(max-width:740px){.clip-column{display:contents}.clip-columns .clip-text{width:100%;order:0;padding:12px 17px;margin:0;box-shadow:none}.clip-columns .clip-text:after{display:none}.clip-columns .clip-text:first-letter{font-size:inherit;float:none;line-height:inherit;margin:0}.clip-column:first-child .clip-text:first-child:first-letter{font-size:40px;float:left;line-height:1;margin:6px 6px 0 0}.clip-columns .sticky-note{order:1;align-self:flex-start;margin-top:28px}.clip-columns .secondary-note{order:2;align-self:flex-end}.binder-sections .quiet-button{font-size:11px;padding:10px;flex-basis:45%;white-space:normal}}
