/* Hand-drawn pixel props and room choreography. Photographs stay clear when open. */
:root{--pixel-light:#d3af6f;--pixel-mid:#846137;--pixel-dark:#30271b;--travel-duration:1380ms}
.camera-sprite{width:192px;height:123px;background:url('pixel-art/camera.svg') center bottom / contain no-repeat;image-rendering:pixelated;filter:drop-shadow(3px 3px 0 #080d0b)}
.machine-sprite{width:192px;height:125px;background:url('pixel-art/sequencer.svg') center bottom / contain no-repeat;image-rendering:pixelated;filter:drop-shadow(3px 3px 0 #080d0b)}
.wood-frame{border:14px solid transparent;border-image:url('pixel-art/frame.svg?v=2') 12 / 14px / 0 stretch;padding:4px;background:#c5b894;box-shadow:4px 4px 0 #090d09;image-rendering:pixelated}
.wood-frame img{border:3px solid #ded2ad;filter:saturate(.55) sepia(.12);image-rendering:auto}
.paper-frame{transform:none;border:10px solid transparent;border-image:url('pixel-art/frame.svg?v=2') 12 / 10px / 0 stretch;padding:6px;background:#c7bd9f;box-shadow:4px 4px 0 #090d09;width:138px}
.paper-frame img{height:130px;image-rendering:auto}
.paper-frame>span{margin-top:7px;font-size:7px}
.ticket{transform:none;background:#c3ad79;box-shadow:4px 4px 0 #080d09;border:0;clip-path:polygon(4px 0,calc(100% - 4px) 0,calc(100% - 4px) 4px,100% 4px,100% 30%,calc(100% - 4px) 30%,calc(100% - 4px) 38%,100% 38%,100% 62%,calc(100% - 4px) 62%,calc(100% - 4px) 70%,100% 70%,100% calc(100% - 4px),calc(100% - 4px) calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 4px),0 calc(100% - 4px),0 70%,4px 70%,4px 62%,0 62%,0 38%,4px 38%,4px 30%,0 30%,0 4px,4px 4px)}
.wood-plank{transform:none;height:19px;border-top:3px solid #b38a4e;border-bottom:4px solid #282519;background:repeating-linear-gradient(90deg,transparent 0 28px,#bc8c4555 28px 36px,transparent 36px 67px,#38281e99 67px 87px) 0 2px / 140px 3px repeat-x,linear-gradient(#856238 0 3px,#554329 3px 8px,#685032 8px 11px,#382e20 11px);box-shadow:0 4px 0 #0a0e0b,0 8px 0 #0c100b99}
.wood-plank:after{top:16px;height:13px;clip-path:polygon(0 0,100% 0,100% 100%,calc(100% - 10px) 100%,calc(100% - 10px) 5px,10px 5px,10px 100%,0 100%)}
.shelf-object{transition:transform .18s steps(3,end),filter .18s steps(3,end)}
.shelf-object:hover,.shelf-object:focus-visible{transform:translateY(-8px);filter:brightness(1.09)}
.shelf-object::before{content:'';position:absolute;inset:-10px -8px;pointer-events:none;opacity:0;transition:opacity .12s steps(2,end);background:linear-gradient(var(--gold),var(--gold)) left top/10px 2px no-repeat,linear-gradient(var(--gold),var(--gold)) left top/2px 10px no-repeat,linear-gradient(var(--gold),var(--gold)) right top/10px 2px no-repeat,linear-gradient(var(--gold),var(--gold)) right top/2px 10px no-repeat,linear-gradient(var(--gold),var(--gold)) left bottom/10px 2px no-repeat,linear-gradient(var(--gold),var(--gold)) left bottom/2px 10px no-repeat,linear-gradient(var(--gold),var(--gold)) right bottom/10px 2px no-repeat,linear-gradient(var(--gold),var(--gold)) right bottom/2px 10px no-repeat}
.shelf-object:hover::before,.shelf-object:focus-visible::before,.shelf-object.is-activated::before{opacity:1}
.shelf-object.is-activated .object-label{color:#f0dca0}.shelf-object.is-activated{filter:brightness(1.2)}
.record-cover{border:3px solid #a5966d;outline:1px solid #24291c;box-shadow:3px 0 0 #282b21,6px 2px 0 #6f6549,9px 4px 0 #191e17}
.record:hover .record-cover,.record:focus-visible .record-cover{transform:translateY(-11px);box-shadow:0 0 0 2px var(--gold),6px 4px 0 #6b5937}
.record-date{bottom:0}.sidebar nav a.active:before{height:12px;width:4px;box-shadow:4px 4px 0 #73653f}
.sidebar nav a{transition:color .12s steps(2,end)}.sidebar nav a.active b{display:inline-block;transform:translateX(2px)}
.about-photo{transform:none}.about-photo img{filter:none}.story-dialog>img{border:14px solid transparent;border-image:url('pixel-art/frame.svg?v=2') 12 / 14px / 0 stretch;padding:4px;background:#c8bc9a}
/* The camera back and instrument cases belong to the same pixel world. */
.camera-back{border-radius:0;border:5px solid #8e9278;background:repeating-linear-gradient(0deg,#303b30 0 2px,#293329 2px 4px);box-shadow:5px 0 #18251c,-5px 0 #18251c,0 5px #18251c,0 -5px #18251c,9px 5px #101c13,-9px 5px #101c13,5px 9px #101c13,-5px -9px #101c13,inset 0 4px #b1b397,inset 4px 0 #768569,inset 0 -5px #192b20,inset -4px 0 #192b20}
.camera-front{border-radius:0;background:transparent}.camera-front .camera-sprite{background-size:contain;filter:none}
.camera-controls button,.dpad{border-radius:0;box-shadow:2px 2px 0 #102016;border:2px solid #829271;background:#394d39}
.dpad{clip-path:polygon(25% 0,75% 0,75% 8%,92% 8%,92% 25%,100% 25%,100% 75%,92% 75%,92% 92%,75% 92%,75% 100%,25% 100%,25% 92%,8% 92%,8% 75%,0 75%,0 25%,8% 25%,8% 8%,25% 8%);background:#45543d;border:0}
.dpad span{border-radius:0;background:#283c2a;border:2px solid #768666}.dpad button{border:0;box-shadow:none;background:none}
.camera-screen{border-radius:0;border-color:#132117;outline:2px solid #74816b}.viewfinder{border:4px solid #7c8b70;box-shadow:2px 2px 0 #112218;background:#182e25}.camera-led{border-radius:0;box-shadow:2px 0 #4e714b;background:#bbcc88}
.sequencer-workstation{background:#253126!important}.sequencer-workstation::before{border:2px solid #526548;background:repeating-linear-gradient(0deg,transparent 0 38px,#91a27b11 38px 40px),repeating-linear-gradient(90deg,transparent 0 38px,#91a27b11 38px 40px)}
.compact-sequencer,.bass-machine,.chord-synth,.mix-desk,.cassette-deck{border-radius:0!important;border:4px solid #8b8053!important;box-shadow:5px 5px 0 #101e15,inset 3px 3px 0 #b5a16a!important}
.sequencer-workstation button,.sequencer-workstation select,.sequencer-workstation input[type=number]{border-radius:0!important}.cassette-window{border-radius:0!important}.sequencer-dialog-close{border:2px solid #af9c63!important;box-shadow:3px 3px #142018}
/* 140 ms anticipation + 1100 ms travel + the last 140 ms to settle. */
.deck{transition:transform 1100ms cubic-bezier(.72,0,.16,1) 140ms}
.deck.jump-cut{transition:none!important}
.deck.in-transit .area{animation:room-speed var(--travel-duration) linear both}
.deck.in-transit .area-inner{animation:room-kick var(--travel-duration) ease both;transform-origin:center center}
.area-photos.is-active .camera-rig{animation:none}
.area.is-arriving .room-header{animation:room-land 720ms cubic-bezier(.14,.75,.25,1) both}
.area-photos.is-arriving .camera-rig{animation:camera-unpack 1000ms cubic-bezier(.16,.7,.2,1) both}
.room-transit{position:fixed;left:var(--sidebar);right:0;top:0;bottom:0;overflow:hidden;pointer-events:none;z-index:5;visibility:hidden}
.is-travelling .room-transit{visibility:visible}
.room-transit::before,.room-transit::after{content:'';position:absolute;left:0;right:0;height:20%;background:#0e1510;z-index:1;opacity:0}
.room-transit::before{top:0;border-bottom:2px solid #96845b}.room-transit::after{bottom:0;border-top:2px solid #96845b}
.is-travelling .room-transit::before{animation:shutter-top var(--travel-duration) ease both}.is-travelling .room-transit::after{animation:shutter-bottom var(--travel-duration) ease both}
.transit-lines{position:absolute;inset:-100% 0;background:repeating-linear-gradient(0deg,transparent 0 90px,#ccb57113 90px 92px,transparent 92px 126px,#a6956524 126px 130px,transparent 130px 300px);mask-image:linear-gradient(90deg,#000,transparent 25%,transparent 75%,#000);opacity:0}
.is-travelling .transit-lines{animation:travel-streaks var(--travel-duration) ease both}
.transit-label{position:absolute;left:50%;top:47%;transform:translate(-50%,-50%);background:#111a13ed;padding:18px 25px;border:2px solid #ac975e;box-shadow:5px 0 #111a13,-5px 0 #111a13,0 5px #111a13,0 -5px #111a13;color:#d8c286;text-align:center;opacity:0;min-width:210px}
.transit-label small{font-size:8px;letter-spacing:3px;display:block;margin-bottom:6px;color:#9d9c7d}.transit-label>span{font-size:15px;text-transform:uppercase;letter-spacing:2px;white-space:nowrap}.transit-label i{display:block;width:36px;height:3px;margin:15px auto 0;background:repeating-linear-gradient(90deg,#d2bb7b 0 6px,transparent 6px 10px)}
.is-travelling .transit-label{animation:room-title var(--travel-duration) linear both}
.is-travelling .sidebar nav a.active{animation:menu-trigger 350ms steps(3,end) both}
@keyframes room-speed{0%,9%{filter:blur(0);opacity:1}23%{filter:blur(5px);opacity:.82}42%,61%{filter:blur(15px);opacity:.55}79%{filter:blur(7px);opacity:.8}94%,100%{filter:blur(0);opacity:1}}
@keyframes room-kick{0%{transform:translateY(0) scale(1)}10%{transform:translateY(calc(var(--travel-direction) * 7px)) scale(.99)}30%,64%{transform:translateY(0) scale(.965)}88%{transform:translateY(calc(var(--travel-direction) * -4px)) scale(1.006)}100%{transform:translateY(0) scale(1)}}
@keyframes room-land{from{transform:translateY(calc(var(--travel-direction) * 9px));opacity:.65}to{transform:translateY(0);opacity:1}}
@keyframes camera-unpack{0%{transform:translateY(15px) scale(.91) rotateY(-180deg)}24%{transform:translateY(-10px) scale(.96) rotateY(-155deg)}76%{transform:translateY(-4px) scale(1.01) rotateY(8deg)}100%{transform:none}}
@keyframes shutter-top{0%{transform:translateY(-100%);opacity:0}10%{transform:translateY(-68%);opacity:.95}28%{transform:translateY(-100%);opacity:.8}100%{transform:translateY(-100%);opacity:0}}
@keyframes shutter-bottom{0%{transform:translateY(100%);opacity:0}10%{transform:translateY(68%);opacity:.95}28%{transform:translateY(100%);opacity:.8}100%{transform:translateY(100%);opacity:0}}
@keyframes travel-streaks{0%,12%{opacity:0;transform:translateY(calc(var(--travel-direction) * 12%))}36%,62%{opacity:1}92%,100%{opacity:0;transform:translateY(calc(var(--travel-direction) * -20%))}}
@keyframes room-title{0%,19%{opacity:0;translate:0 8px}31%,62%{opacity:1;translate:0 0}78%,100%{opacity:0;translate:0 -8px}}
@keyframes menu-trigger{0%{transform:translateX(0);color:#e5ce89}38%{transform:translateX(7px);color:#fff0b6}100%{transform:translateX(0);color:var(--gold)}}
@media(min-width:1600px){.camera-sprite{width:240px;height:154px}.machine-sprite{width:230px;height:150px}.paper-frame{width:166px}.paper-frame img{height:161px}}
@media(max-width:1320px){.note-object{display:none}}
@media(max-width:1180px){.camera-sprite{width:164px;height:106px}.machine-sprite{width:160px;height:105px}.paper-frame{width:115px}.paper-frame img{height:110px}.wood-frame{border-width:10px;border-image-width:10px}}
@media(max-width:760px){.camera-sprite{width:112px;height:73px}.machine-sprite{width:102px;height:67px}.shelf-items{gap:12px}.memory-object .wood-frame{border-width:8px;border-image-width:8px;padding:4px}.memory-object .wood-frame img{width:76px;height:86px;border-width:2px}.wood-plank{height:16px;border-bottom-width:3px}.wood-plank:after{top:13px}.object-label{font-size:7px}.camera-back{border-width:3px;box-shadow:3px 0 #172a1c,-3px 0 #172a1c,0 3px #172a1c,0 -3px #172a1c,5px 3px #101c13,-5px 3px #101c13,3px 5px #101c13,-3px -5px #101c13,inset 0 3px #a0aa89,inset 3px 0 #71836b,inset 0 -3px #192b20}.room-transit{top:103px}.transit-label{min-width:185px;padding:15px 19px}.transit-label>span{font-size:12px}.camera-front .camera-sprite{width:100%;height:100%}}
@media(prefers-reduced-motion:reduce){body:not(.motion-enabled) .deck{transition:none!important}body:not(.motion-enabled) .deck.in-transit .area,body:not(.motion-enabled) .deck.in-transit .area-inner,body:not(.motion-enabled) .area.is-arriving .room-header,body:not(.motion-enabled) .area-photos.is-arriving .camera-rig{animation:none!important;filter:none!important}body:not(.motion-enabled) .room-transit{display:none!important}body:not(.motion-enabled) .shelf-object{transition:none!important}}
/* Keep the playable keys legible against the dark pixel cases. */
.chord-keyboard button{color:#d7d9b9!important}.chord-keyboard button strong{color:#d7d9b9}.chord-keyboard button small{color:#bfad75}.chord-keyboard button.is-held{color:#20301e!important}.chord-keyboard button.is-held strong{color:#20301e}.sequencer-workstation .synth-note{color:#334032}
/* Dark pixel keys: the light key text above needs a dark key body. */
.chord-keyboard button:not(.is-held){background:linear-gradient(#34403a,#1b221e);border-color:#0b0f0d;box-shadow:inset 0 1px #6f7c7277,inset 0 -4px #111713,0 2px #050706}
.chord-keyboard button:nth-child(2)::before,.chord-keyboard button:nth-child(3)::before,.chord-keyboard button:nth-child(5)::before{background:#0b0f0d}

/* Give the nine-slice frame its own silhouette, without matting under its corners. */
.wood-frame,.paper-frame,.story-dialog>img{background-clip:padding-box}

/* An explicit site preference can override the OS setting, in either direction. */
body.motion-disabled *,body.motion-disabled *::before,body.motion-disabled *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
body.motion-disabled .room-transit{display:none!important}
.area-controls [data-motion-toggle]{width:auto;min-width:53px;padding:0 7px;font-size:9px;letter-spacing:.5px}
.area-controls [data-motion-toggle][aria-pressed="true"]{color:#e7ce8a;border-color:#998350;background:#292b1b}

/* Personal collectible: transparent sprite, feet aligned with the shelf. */
.figure-sprite{display:block;width:100px;height:185px;object-fit:contain;object-position:center bottom;image-rendering:pixelated;filter:drop-shadow(3px 2px 0 #080d0b);pointer-events:none}
@media(min-width:1600px){.figure-sprite{width:120px;height:222px}}
@media(max-width:1180px){.figure-sprite{width:86px;height:166px}}
@media(max-width:760px){.figure-sprite{width:70px;height:132px}}

/* Each shelf prop responds locally; only the picture frame lifts. */
.shelf-object:is(.figure-object,.camera-object,.machine-object,.note-object):is(:hover,:focus-visible){transform:none;filter:none}
.figure-sprite{position:relative;filter:none}
.figure-body,.figure-head{position:absolute;inset:0;background:url('pixel-art/sebastian-bobblehead-v2-cutout.webp') center bottom/auto 100% no-repeat;image-rendering:pixelated}
.figure-head{clip-path:polygon(0 0,100% 0,100% 48%,86% 50%,81% 54%,68% 57%,50% 58%,32% 57%,19% 54%,14% 50%,0 48%);transform-origin:50% 57%;will-change:transform}
.figure-body{clip-path:polygon(0 48%,14% 50%,19% 54%,32% 57%,50% 58%,68% 57%,81% 54%,86% 50%,100% 48%,100% 100%,0 100%)}
/* The camera's built-in flash fires the first time the mouse comes over it
   (room.js): its window lights up and a short flash crosses the whole page.
   Every other time the window only glows a little, to show where you are. */
.camera-object .camera-flash{position:absolute;left:59.375%;top:19.51%;width:11.72%;height:8.54%;background:#fffdf2;opacity:0;box-shadow:0 0 10px 4px #fffae0;transition:opacity .16s steps(2,end)}
.camera-object:is(:hover,:focus-visible) .camera-flash{opacity:.38}
.camera-object.is-flashing .camera-flash{animation:camera-flash-window 500ms steps(5,end)}
@keyframes camera-flash-window{0%{opacity:1}100%{opacity:0}}
.page-flash{position:fixed;inset:0;z-index:60;background:#fffdf6;pointer-events:none;opacity:0}
/* On the shelf the camera stands a little smaller than elsewhere, so the
   picture frame next to it can be the bigger thing. */
.camera-object .camera-sprite{width:164px;height:105px}
@media(min-width:1600px){.camera-object .camera-sprite{width:204px;height:131px}}
@media(max-width:1180px){.camera-object .camera-sprite{width:140px;height:90px}}
@media(max-width:760px){.camera-object .camera-sprite{width:96px;height:61px}}
/* With the bigger frame the row only just fits on a normal desktop; slightly
   tighter gaps keep it on the plank. */
@media(min-width:1181px) and (max-width:1599px){.shelf-items{gap:8px;padding:0 8px}}
.machine-object .machine-sprite{position:relative;display:block}
.step-lights{position:absolute;left:11.875%;top:62.5%;width:67.5%;height:2.4%;display:grid;grid-template-columns:repeat(16,1fr);gap:3.7%}
.step-lights i{background:#52643d;min-width:0}
.motion-enabled .machine-object:is(:hover,:focus-visible,.is-activated) .step-lights i{animation:step-chase 1600ms steps(1,end) infinite;animation-delay:calc(var(--step) * 100ms)}
@keyframes step-chase{0%,6.24%{background:#fff0a0;box-shadow:0 0 5px #efb84e}6.25%,100%{background:#52643d;box-shadow:none}}
.notebook{position:relative;display:block;width:105px;height:148px;perspective:650px;margin-right:9px;isolation:isolate}
.book-pages{position:absolute;inset:4px 0 3px 4px;background:repeating-linear-gradient(0deg,#d7cba5 0 3px,#aa9d7e 3px 4px);border:3px solid #494432;box-shadow:3px 3px #101710}
.book-pages:before{content:'';position:absolute;inset:6px 5px;background:repeating-linear-gradient(0deg,transparent 0 12px,#a299793f 12px 13px),#ded4b5;border-left:1px solid #ac795b}
.book-pages i{position:absolute;width:13px;height:7px;right:-7px;top:20%;background:#af7754;border:2px solid #6a4a32}.book-pages i:nth-child(2){top:40%;background:#8e9f78}.book-pages i:nth-child(3){top:60%;background:#c7b262}
.book-ribbon{position:absolute;bottom:-8px;right:25px;width:7px;height:34px;background:#af5b40;clip-path:polygon(0 0,100% 0,100% 100%,50% 86%,0 100%)}
.book-cover{position:absolute;inset:0 5px 0 0;background:repeating-linear-gradient(90deg,transparent 0 5px,#d3bd7520 5px 6px),#4a5940;border:3px solid #a7a078;border-left:7px solid #283e2d;box-shadow:3px 3px #16241b;transform-origin:left center;transition:transform 550ms cubic-bezier(.2,.7,.2,1);transition-delay:0ms;backface-visibility:visible;text-align:left;padding:21px 9px;color:#e1c98c}
.book-cover>span{font-size:13px;line-height:1.5;letter-spacing:2px}.book-cover small{display:block;font-size:5px;line-height:1.8;margin-top:19px;max-width:55px}
.book-band{position:absolute;top:0;bottom:0;right:17px;width:7px;background:#202a20;border-left:2px solid #69705a;box-shadow:2px 0 #131d15;transition:transform 200ms steps(5,end),opacity 200ms;transition-delay:400ms}
.note-object:is(:hover,:focus-visible,.is-activated) .book-band{transform:translateX(35px) rotate(9deg);opacity:0;transition-delay:0ms}
.note-object:is(:hover,:focus-visible,.is-activated) .book-cover{transform:rotateY(-112deg);transition-delay:210ms}
@media(min-width:1600px){.notebook{width:119px;height:170px}}
body.motion-disabled .figure-head{transform:none!important}
body.motion-disabled .note-object:is(:hover,:focus-visible) .book-cover{transform:none}
body.motion-disabled .note-object:is(:hover,:focus-visible) .book-band{opacity:1;transform:none}
/* Hide exterior lettering once the inside of the cover faces the visitor. */
.book-cover>span,.book-cover>small{transition:opacity 180ms}
.note-object:is(:hover,:focus-visible,.is-activated) .book-cover>span,.note-object:is(:hover,:focus-visible,.is-activated) .book-cover>small{opacity:0}
body.motion-disabled .note-object:is(:hover,:focus-visible) .book-cover>span,body.motion-disabled .note-object:is(:hover,:focus-visible) .book-cover>small{opacity:1}