/* Layered notebook trial — two spreads, one stationary desk. */
.nb-scene{isolation:isolate;background:#b69f86}
.nb-desk{position:absolute;inset:0;width:1728px;height:1117px;pointer-events:none}
.nb-book{position:absolute;left:250px;top:48px;width:1330px;height:1047px;pointer-events:none;z-index:1}
.nb-note,.nb-photo,.nb-clip{position:absolute;transform:rotate(var(--rest-rotation));filter:drop-shadow(1px 3px 2px #0003);will-change:transform,opacity}
.nb-note{z-index:3;pointer-events:none}
.nb-photo{z-index:4;cursor:zoom-in;overflow:visible;outline-offset:4px;transition:filter .2s}
.nb-photo:hover{filter:drop-shadow(2px 8px 5px #0004)}
.nb-photo:focus-visible,.nb-nav:focus-visible,.nb-home:focus-visible{outline:3px solid #2681bc}
.nb-art{position:absolute;left:50%;top:50%;width:var(--source-width);aspect-ratio:3/2;transform:translate(-50%,-50%) rotate(var(--source-angle));pointer-events:none}
.nb-photo-source{width:100%;height:100%;clip-path:polygon(18.9% 20.2%,72.7% 11.5%,77% 73%,23.9% 81.8%);pointer-events:none}
.nb-caption{position:absolute;left:26.7%;top:50%;width:37%;transform:translate(-50%,-50%) rotate(83.6deg);font: bold calc(var(--source-width)*.016)/1.2 'Courier New',monospace;text-align:center;white-space:pre-line;color:#24211e;pointer-events:none}
.photo-detail .nb-art{pointer-events:none}
.photo-detail .nb-photo-source,.photo-detail .nb-caption{pointer-events:auto}

.nb-clip{z-index:6;pointer-events:none}
.nb-prop{position:absolute;z-index:8;transform:rotate(var(--rest-rotation));pointer-events:none}
.nb-home{position:absolute;z-index:8;cursor:pointer}
.nb-nav{position:absolute;z-index:0;filter:drop-shadow(0 3px 2px #0003);cursor:pointer;transition:translate .2s}
.nb-nav:hover{translate:6px 0}
.nb-nav img{width:100%;height:100%;object-fit:contain;pointer-events:none}
.nb-waiting .nb-loose{opacity:0}
.nb-turn{position:absolute;top:48px;width:665px;height:1047px;z-index:25;pointer-events:none;transform-style:preserve-3d;filter:none}
.nb-turn-face{position:absolute;inset:0;overflow:hidden;backface-visibility:hidden;background:transparent;clip-path:inset(17px 26px 27px 0 round 0 23px 23px 0);-webkit-backface-visibility:hidden;}
.nb-turn-face img{position:absolute;top:0;width:1330px;height:1047px;max-width:none}
.nb-turn-back{transform:rotateY(180deg)}
@media(prefers-reduced-motion:reduce){.nb-nav,.nb-photo{transition:none}.nb-loose{will-change:auto}}

.nb-turn[data-direction="backward"] .nb-turn-face{clip-path:inset(17px 0 27px 27px round 23px 0 0 23px)}
.nb-turn .nb-turn-back{clip-path:inset(17px 0 27px 27px round 23px 0 0 23px)}
.nb-turn[data-direction="backward"] .nb-turn-back{clip-path:inset(17px 26px 27px 0 round 0 23px 23px 0)}
.puppet-motion{object-fit:contain;transform-origin:50% 5%;animation:puppet-sway 3.4s ease-in-out infinite}
[data-puppet]:hover .puppet-motion{animation:puppet-pull .75s ease-in-out infinite alternate}
@keyframes puppet-sway{0%,100%{rotate:-2deg;translate:0 0}50%{rotate:2deg;translate:0 4px}}
@keyframes puppet-pull{0%{rotate:-5deg;translate:0 0}100%{rotate:5deg;translate:0 12px}}
@media(prefers-reduced-motion:reduce){.puppet-motion,[data-puppet]:hover .puppet-motion{animation:none}}

/* Rounded leaf contours, inset from the book cover and its exported shadow. */
.nb-turn .nb-turn-face,.nb-turn[data-direction="backward"] .nb-turn-back{clip-path:path('M 0 25 L 590 25 Q 620 25 620 55 L 620 988 Q 620 1018 590 1018 L 0 1018 Z')}
.nb-turn .nb-turn-back,.nb-turn[data-direction="backward"] .nb-turn-face{clip-path:path('M 45 65 Q 45 35 75 35 L 665 25 L 665 1018 L 75 1018 Q 45 1018 45 988 Z')}
.nb-turn[data-direction="backward"] .nb-turn-back{clip-path:path('M 0 25 L 590 25 Q 620 25 620 55 L 620 988 Q 620 1018 590 1018 L 0 1018 Z')}
.nb-object{position:absolute;z-index:5;transform:rotate(var(--rest-rotation));filter:drop-shadow(1px 3px 2px #0003)}
.nb-object img{width:100%;height:100%;object-fit:contain;pointer-events:none}
button.nb-object{cursor:pointer}
.nb-map-entry{z-index:2}
.puppet-motion{animation:none;object-fit:contain;transition:opacity .18s;scale:1.08}
.puppet-open{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;scale:1.08;pointer-events:none;transform-origin:50% 5%;transition:opacity .18s}
[data-puppet]:hover .puppet-motion,[data-puppet]:focus-visible .puppet-motion{opacity:0;animation:none}
[data-puppet]:hover .puppet-open,[data-puppet]:focus-visible .puppet-open{opacity:1;animation:puppet-pull .8s ease-in-out infinite alternate}
/* A fixed design canvas must never scroll when a photo receives keyboard focus. */
#viewport,.screen{overflow:clip}

/* Static page and turning leaf use exactly the same common paper contour. */
.nb-turn .nb-turn-face,.nb-turn[data-direction="backward"] .nb-turn-back{clip-path:path('M 0 17 L 601 17 Q 639 17 639 55 L 639 972 Q 639 1010 601 1010 L 0 1010 Z')}
.nb-turn .nb-turn-back,.nb-turn[data-direction="backward"] .nb-turn-face{clip-path:path('M 665 17 L 66 17 Q 28 17 28 55 L 28 972 Q 28 1010 66 1010 L 665 1010 Z')}
.nb-turn[data-direction="backward"] .nb-turn-back{clip-path:path('M 0 17 L 601 17 Q 639 17 639 55 L 639 972 Q 639 1010 601 1010 L 0 1010 Z')}
.puppet-motion{object-fit:contain!important;scale:1.08 .93}

/* Preserve source proportions; both poses share the same continuous sway. */
.puppet-motion,.puppet-open{scale:1!important;object-fit:contain!important;object-position:50% 0!important;transform-origin:50% 0;animation:puppet-sway 4s ease-in-out infinite!important}
[data-puppet]:hover .puppet-motion,[data-puppet]:hover .puppet-open,[data-puppet]:focus-visible .puppet-open{animation:puppet-sway 4s ease-in-out infinite!important}
@keyframes puppet-sway{0%,100%{rotate:-1.5deg}50%{rotate:1.5deg}}
@media(prefers-reduced-motion:reduce){.puppet-motion,.puppet-open{animation:none!important}}

.nb-turn .nb-turn-face,.nb-turn .nb-turn-back,.nb-turn[data-direction="backward"] .nb-turn-face,.nb-turn[data-direction="backward"] .nb-turn-back{clip-path:none;background:transparent}
