*{box-sizing:border-box}html{height:100%;overflow:hidden}body{height:100%;overflow:hidden;margin:0;background:#151711;color:#eee7d3;font-family:Georgia,serif}/* Fill the viewport without a scroll container; native pinch zoom stays enabled. */
main{position:relative;height:100svh;height:100dvh;overflow:hidden}.desk{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:max(100vw,150.0587svh);width:max(100vw,150.0587dvh);aspect-ratio:1280/853;isolation:isolate}.scene{display:block;width:100%;height:100%;object-fit:contain}.object-layer{position:absolute;inset:0;pointer-events:none;transform-origin:0 0}.object-layer img{position:absolute;display:block;pointer-events:none}.grain{position:absolute;inset:0;background:url('assets/grain.png') center/100% 100%;mix-blend-mode:soft-light;opacity:.12;pointer-events:none;z-index:20}.hotspot{position:absolute;inset:0;border:0;cursor:pointer;background:transparent;outline:none;z-index:25;touch-action:pan-x pan-y pinch-zoom}.hotspot,.hotspot:hover,.hotspot:focus,.hotspot:focus-visible,.hotspot:active{appearance:none;-webkit-appearance:none;background:transparent;outline:none;border:0;box-shadow:none;-webkit-tap-highlight-color:transparent}.keyboard-navigation~.caption{text-decoration:underline;text-underline-offset:4px;color:#fff5d7}.caption{position:fixed;z-index:30;bottom:22px;left:50%;transform:translateX(-50%);font:14px ui-monospace,monospace;letter-spacing:.06em;background:#131810c9;border:1px solid #ece0be28;border-radius:30px;padding:10px 17px;pointer-events:none;max-width:calc(100vw - 24px);text-align:center}.name{position:fixed;top:20px;left:22px;z-index:30;font-size:17px;text-shadow:0 1px 9px #000;pointer-events:none}dialog{border:none;padding:0;margin:0;background:transparent;color:#eee7d3;width:100vw;height:100svh;max-width:none;max-height:none;overflow:auto;overscroll-behavior:contain}dialog::backdrop{background:#080c0ae0;backdrop-filter:blur(2px);animation:shade-in .55s both}dialog.closing::backdrop{animation:shade-out .55s both}.detail{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:70px;width:min(1000px,88vw);min-height:100%;margin:auto;padding:76px 0}.hero-slot{height:min(68svh,620px)}.copy{opacity:0;transform:translateY(12px);transition:opacity .32s,transform .45s;max-width:430px}.revealed .copy{opacity:1;transform:none}.closing .copy{opacity:0;transform:translateY(8px);transition-duration:.18s}p{font-size:20px;line-height:1.65;color:#d7d5c6}.eyebrow{font:12px/1.5 ui-monospace,monospace;text-transform:uppercase;letter-spacing:.12em;color:#b3b8a4}.note{font:14px/1.65 ui-monospace,monospace;color:#aeb39f;margin-top:24px}.links{display:flex;flex-wrap:wrap;gap:20px;margin-top:25px}.links a{color:#e3dcc5;font:14px ui-monospace,monospace;text-decoration:underline;text-underline-offset:5px}.return{margin-top:32px;padding:0 0 6px;border:0;border-bottom:1px solid #d4d8c444;color:#d4d8c4;background:none;font:14px ui-monospace,monospace;cursor:pointer}.return span{margin-left:17px}.lifted{position:fixed;transform-origin:0 0;pointer-events:none;z-index:2;will-change:transform}.lifted .object-layer{transition:none!important}.lifted img{filter:drop-shadow(0 10px 12px #0004)}@keyframes shade-in{from{background:#080c0a00;backdrop-filter:blur(0)}to{background:#080c0ae0;backdrop-filter:blur(2px)}}@keyframes shade-out{from{background:#080c0ae0;backdrop-filter:blur(2px)}to{background:#080c0a00;backdrop-filter:blur(0)}}
@media(max-width:650px){.detail{grid-template-columns:1fr;gap:28px;padding:68px 0 36px;width:84vw;align-content:start;min-height:100%}.hero-slot{height:36svh}.copy{max-width:none}.name{top:12px;left:12px}.caption{bottom:12px;font-size:12px}p{font-size:18px}.eyebrow{font-size:11px}.note{font-size:13px}.links{gap:15px}.return{margin-top:23px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Keep the supplied photograph untouched at rest. Only the selected cover copy renders in the dialog. */
.desk>.object-layer{display:none}.lifted>.object-layer{display:block}

/* Sharp from pickup through landing; the desk photo appears only after return. */
.hero-cover{position:absolute;left:0;top:0;display:block;transform-origin:0 0;opacity:0;pointer-events:none;transition:none!important}
.lifted img{filter:none!important}
.lifted .hero-cover.visible{opacity:1}
.hero-slot{position:relative;overflow:hidden;isolation:isolate}
.lifted.in-slot{position:absolute}
.lifted.reading-sharp>.object-layer{display:none}
.detail:focus{outline:none}

/* Hover feedback is separate from focus, so returning focus cannot leave a glow. */
@media (hover:hover) and (pointer:fine){.hotspot:hover{background:#fff2c708}}

/* Narrow screens look across the desk instead of losing its outer books. */
@media (max-aspect-ratio:3/2){
 main{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
 main::-webkit-scrollbar{display:none}
 .desk{left:0;transform:translateY(-50%)}
 .scene{user-select:none;-webkit-user-drag:none}
 .caption{width:max-content;max-width:calc(100vw - 36px);font-size:12px;bottom:calc(78px + env(safe-area-inset-bottom,0px))}
}
@media (pointer:coarse){
 .links a,.return{min-height:44px;display:inline-flex;align-items:center}
 .name{top:max(12px,env(safe-area-inset-top,0px));left:max(12px,env(safe-area-inset-left,0px))}
}