:root{font-family:'DM Sans',Arial,sans-serif;color:#242722;background:#f3f3ef;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-height:100svh;display:flex;flex-direction:column}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}a{color:inherit;text-decoration:none}[hidden]{display:none!important}
header{height:104px;flex-shrink:0;margin:0 4%;display:flex;align-items:center;border-bottom:1px solid #d5d6cf}.brand{font-size:36px;font-weight:700;letter-spacing:-2.6px}.brand span{font-size:12px;vertical-align:top;letter-spacing:0;margin-left:5px}.header-links{margin-left:auto;display:flex;gap:30px;align-items:center}.header-links a,header button,.toolbar,footer,.caption,.project-top,.project-summary,.detail-label{font-size:10px;font-weight:500;letter-spacing:.08em}header button span{margin-left:24px;font-size:16px}
main{flex:1;display:flex;flex-direction:column;padding:26px 4% 20px}.toolbar{display:flex;align-items:center;justify-content:space-between;color:#7b7e74}.toolbar nav{display:flex;gap:21px}.toolbar button{padding:6px 0;position:relative;color:#828579;font-size:10px;letter-spacing:.04em}.toolbar button.active{color:#252920}.toolbar button.active:after{content:'';position:absolute;height:3px;width:3px;background:currentColor;border-radius:50%;bottom:-4px;left:50%}
#stage{flex:1;min-height:370px;display:flex;align-items:center;justify-content:center;padding:38px 0}#mosaic{width:min(100%,1100px);aspect-ratio:1000/470;position:relative}.tile{position:absolute;padding:0;left:calc(var(--x)*.1%);top:calc(var(--y)*100%/470);width:calc(var(--w)*.1%);aspect-ratio:var(--ratio);background:transparent;text-align:left;transform-origin:0 0;isolation:isolate;transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .4s}.tile img,.tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}.tile video{opacity:0;transition:opacity .25s}.tile:hover,.tile:focus-visible{z-index:30;transform:translate(-5%,-5%) scale(1.18);box-shadow:0 14px 36px #25251b30}.tile.playing video{opacity:1}.tile:focus-visible{outline:2px solid #252920;outline-offset:3px}.tile-label{display:none}.caption{display:flex;justify-content:space-between;min-height:28px;align-items:center}.caption #project-title{font-size:12px;letter-spacing:0}.caption #project-category{color:#8b8e82}
footer{height:64px;flex-shrink:0;margin:0 4%;border-top:1px solid #d5d6cf;display:flex;justify-content:space-between;align-items:center;color:#7a7e71}#replay{font-size:17px;display:flex;align-items:center;gap:8px}#replay span{font-size:9px;letter-spacing:.08em}header,.toolbar,.caption,footer{transition:opacity .65s ease}body.intro header,body.intro .toolbar,body.intro .caption,body.intro footer{opacity:0;pointer-events:none}body.intro .tile{pointer-events:none;transition:none}
body.project-open{overflow:hidden}dialog{border:0;background:#f3f3ef;color:#242722;padding:0;width:100vw;max-width:none;height:100svh;max-height:none;margin:0;overflow:auto}dialog::backdrop{background:#f3f3ef}.project-top{position:sticky;top:0;z-index:5;background:#f3f3efef;backdrop-filter:blur(10px);margin:0 4%;height:78px;border-bottom:1px solid #d5d6cf;display:flex;align-items:center;justify-content:space-between}.project-top form{margin:0}.close{font-size:10px;letter-spacing:.06em;padding:14px 0}.project-top>div{display:flex;gap:18px}.project-top>div button{font-size:22px;padding:8px}.project-content{width:min(1180px,92%);margin:0 auto;padding:40px 0 60px}.viewer-heading{margin-bottom:26px}.viewer-heading>p{font-size:10px;letter-spacing:.1em;color:#858879;margin:0 0 14px}h1{font-size:clamp(28px,4vw,60px);font-weight:500;letter-spacing:-.04em;line-height:1.1;margin:0}.project-summary{display:flex;gap:22px;color:#858879;margin-top:17px}.player-wrap{background:#131610;position:relative;display:flex;justify-content:center}#film{width:100%;max-height:68svh;display:block;object-fit:contain}#video-error{position:absolute;inset:40% 20px auto;color:white;text-align:center;font-size:13px}.project-info{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:40px;padding-top:32px}.detail-label{color:#858879}.project-info p{font-size:14px;line-height:1.8;white-space:pre-line;margin:12px 0 0}
#mosaic.list{display:grid;grid-template-columns:repeat(4,1fr);gap:35px 20px;aspect-ratio:auto;align-items:start}#mosaic.list .tile{position:relative;inset:auto;width:100%;height:auto;transform:none}#mosaic.list .tile:hover{transform:scale(1.03)}#mosaic.list .tile-label{display:flex;position:absolute;top:calc(100% + 7px);font-size:9px;justify-content:space-between;width:100%;white-space:nowrap;gap:8px}#mosaic.list .tile-label span:first-child{overflow:hidden;text-overflow:ellipsis}button:focus-visible,a:focus-visible{outline:1px solid #515a40;outline-offset:5px}
@media(min-width:1600px){#mosaic{width:1250px}}@media(max-width:700px){header{height:88px}.brand{font-size:30px}.header-links{gap:20px}.header-links a{font-size:9px}header button span{margin-left:10px}.toolbar{align-items:flex-start;gap:15px;flex-direction:column}.toolbar nav{gap:18px;width:100%;justify-content:space-between}main{padding-top:18px}#stage{min-height:360px;padding:28px 0}.tile:hover,.tile:focus-visible{transform:translate(-5%,-5%) scale(1.16)}footer{font-size:8px;gap:12px}footer>span:first-child{max-width:120px;line-height:1.7}.caption #project-category{font-size:8px}#mosaic.list{grid-template-columns:repeat(2,1fr);gap:35px 12px}.project-top>span{display:none}.project-content{padding-top:28px}.project-info{grid-template-columns:1fr;gap:24px}.project-info p{font-size:13px}.project-top{height:65px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}.tile{opacity:1;transform:none}}
/* A moving camera, on a fixed world of photographs. */
#mosaic{transform-origin:0 0;will-change:transform}body.intro{overflow:hidden}body.intro #mosaic{z-index:50}#skip-intro{display:none;position:fixed;bottom:28px;right:4%;z-index:80;font-size:10px;letter-spacing:.1em;color:#777e6e;background:#f3f3efc9;padding:12px}body.intro #skip-intro{display:block}
/* Project typography and the digital-tape player. */
.project-top{height:66px}.project-top>span{font-family:'Courier New',monospace;color:#8c9182;font-size:9px}.project-content{padding-top:32px;max-width:1120px}.artist-line{display:flex;align-items:center;gap:18px;margin-bottom:12px}.artist-line p{font-size:14px;margin:0;letter-spacing:.04em}.artist-line>span{font-size:9px;color:#8b907f;letter-spacing:.12em}.viewer-heading{margin-bottom:24px}.viewer-heading h1{font-size:clamp(34px,5.4vw,76px);letter-spacing:-.055em;font-weight:500;text-transform:uppercase}.project-summary{margin-top:14px;font-family:'Courier New',monospace;font-size:10px;gap:18px}.project-info{display:flex;justify-content:space-between;gap:32px;border-top:1px solid #d5d6cf;margin-top:28px;padding-top:25px;flex-wrap:wrap}.project-info>div{flex:1;min-width:200px}.project-info>div[hidden]{display:none}.project-info p{font-size:12px;line-height:1.8;margin:8px 0 0}.role-chips{display:flex;flex-wrap:wrap;gap:8px 20px}.role-chips span{font-size:11px;line-height:1.9}.role-chips span:before{content:'↳';font-size:10px;color:#939a86;margin-right:7px}.detail-label{font-size:9px}
.camcorder{--lcd:#d4ecb6;--muted-lcd:#859673;background:#252a22;border:1px solid #3b4332;border-radius:7px;padding:0 6px 5px;color:var(--lcd);box-shadow:0 20px 45px #2d332d15;overflow:hidden;font-family:'Courier New',monospace;outline-offset:5px;position:relative}.deck-label{display:flex;justify-content:space-between;align-items:center;padding:10px 8px;font-size:8px;letter-spacing:.12em;color:#a2ab95}.deck-label span:last-child{font-size:7px;color:#75816a}.camcorder .player-wrap{background:#050704;overflow:hidden}.camcorder #film{max-height:62svh;min-height:200px;width:100%;outline:0}.viewfinder{position:absolute;inset:0;pointer-events:none;color:var(--lcd);text-shadow:1px 1px 2px #0009;font-size:clamp(9px,1.2vw,13px);letter-spacing:.04em;transition:opacity .5s}.hud-top,.hud-bottom{position:absolute;left:6%;right:6%;display:flex;align-items:center;justify-content:space-between}.hud-top{top:8%}.hud-top>span:last-child{display:flex;align-items:center;gap:10px}.hud-top small{font-size:8px;border:1px solid #d4ecb677;padding:2px 3px}.hud-top b{font-weight:400;font-variant-numeric:tabular-nums;letter-spacing:.07em}.hud-bottom{bottom:8%;font-size:9px;color:#d4ecb6b0}.tape-icon{font-size:7px;letter-spacing:.15em}.corner{position:absolute;width:17px;height:17px;border-color:#d4ecb680;border-style:solid}.corner.tl{left:3%;top:4%;border-width:1px 0 0 1px}.corner.tr{right:3%;top:4%;border-width:1px 1px 0 0}.corner.bl{left:3%;bottom:4%;border-width:0 0 1px 1px}.corner.br{right:3%;bottom:4%;border-width:0 1px 1px 0}.viewfinder:after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 3px,#d4ecb603 3px,#d4ecb603 4px);opacity:.6}#screen-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(1);width:72px;height:64px;border:1px solid #d4ecb66b;background:#17201466;backdrop-filter:blur(3px);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;color:var(--lcd);transition:opacity .3s,transform .45s}#screen-play>span{font-size:20px;padding-left:3px}#screen-play small{font-size:8px;letter-spacing:.18em}.is-playing #screen-play{opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(1.12)}#buffering{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);margin:0;font-size:9px;letter-spacing:.15em;background:#11190ccc;padding:10px}#buffering span{animation:pulse 1s ease-in-out infinite alternate}.transport{padding:15px 12px 4px}.transport input[type=range]{appearance:none;-webkit-appearance:none;display:block;border:0;padding:0;background:linear-gradient(to right,var(--lcd) var(--progress,0%),#556247 var(--progress,0%));height:2px;cursor:pointer;width:100%;border-radius:0;accent-color:var(--lcd)}.transport input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:5px;height:9px;border:0;background:var(--lcd)}.transport input[type=range]::-moz-range-thumb{width:5px;height:9px;background:var(--lcd);border:0;border-radius:0}.transport-row{display:flex;align-items:center;gap:18px;padding-top:11px;min-height:43px}.transport-buttons{display:flex;align-items:center;gap:15px}.transport button{color:var(--lcd);padding:7px 1px;min-width:20px;font-family:inherit}.transport-buttons button{font-size:16px;position:relative}.transport-buttons small{font-size:6px;position:absolute;top:12px;left:5px}.transport-buttons #play-pause{font-size:15px;min-width:22px}.deck-counter{display:flex;gap:9px;font-size:9px;font-variant-numeric:tabular-nums}.deck-counter>span:not(:first-child){color:var(--muted-lcd)}.audio-controls{margin-left:auto;display:flex;align-items:center;gap:13px}#mute{font-size:8px;letter-spacing:.05em;min-width:62px}.transport #volume{width:48px;background:#556247}.transport #volume::-webkit-slider-thumb{height:6px;width:4px}#fullscreen{font-size:20px;padding:5px 2px}.quiet.is-playing .viewfinder{opacity:.3}.camcorder:focus-within .viewfinder{opacity:1}.camcorder:fullscreen{border:0;border-radius:0;width:100%;height:100%;display:flex;flex-direction:column;padding:0 12px 8px;background:#050704}.camcorder:fullscreen .player-wrap{flex:1;min-height:0}.camcorder:fullscreen #film{height:100%;max-height:none;min-height:0}.camcorder button:focus-visible,.camcorder input:focus-visible{outline:1px solid var(--lcd);outline-offset:5px}
@keyframes pulse{to{opacity:.3}}
@media(max-width:700px){.project-content{padding-top:25px}.artist-line p{font-size:12px}.viewer-heading h1{font-size:clamp(32px,7vw,52px)}.camcorder{padding:0 4px 3px;border-radius:5px}.deck-label{padding:8px 6px;font-size:7px}.deck-label span:last-child{font-size:6px}.camcorder #film{min-height:160px;max-height:60svh}.hud-top{font-size:9px}.hud-bottom{font-size:7px}.hud-top small{font-size:6px}.transport{padding:13px 8px 1px}.transport-row{gap:12px}.transport-buttons{gap:10px}.deck-counter{font-size:8px;gap:5px}.audio-controls{gap:5px}#mute{font-size:7px;min-width:53px}#volume{display:none!important}.hud-bottom .tape-icon{display:none}.project-info{gap:18px;margin-top:23px;padding-top:18px}.role-chips{gap:4px 17px}#screen-play{width:58px;height:52px}.project-top>span{display:block;font-size:8px}.project-top>div{gap:12px}}
@media(prefers-reduced-motion:reduce){#buffering span{animation:none}}
.camcorder #film{min-height:160px;max-height:clamp(160px,calc(100svh - 350px),62svh)}.camcorder:fullscreen #film{min-height:0;max-height:none}
/* More canvas, less chrome. The final photographs occupy the available viewport. */
body{height:100svh;min-height:0}body>header{height:58px;margin:0 2.5%}.brand{font-size:27px;letter-spacing:-1.9px}.brand span{font-size:9px}body>main{padding:10px 2.5% 5px;min-height:0}.toolbar{min-height:25px}.toolbar nav{gap:20px}.toolbar,.toolbar button{font-size:9px}.section-label{font-size:9px}#stage{min-height:0;padding:10px 0 6px}#mosaic{width:100%;height:100%;max-width:none;aspect-ratio:auto;min-height:0}.tile{left:calc(var(--x)*1px);top:calc(var(--y)*1px);width:calc(var(--w)*1px);aspect-ratio:var(--ratio)}.tile img,.tile video{object-fit:contain;max-width:100%;max-height:100%}.caption{min-height:22px}.caption #project-title{font-size:10px}.caption #project-category{font-size:8px}body>footer{height:32px;margin:0 2.5%;font-size:8px}#replay{font-size:14px}#replay span{font-size:8px}.header-links a,header button{font-size:9px}.header-links{gap:22px}
body:has(#mosaic.list){height:auto;min-height:100svh}#mosaic.list{height:auto;min-height:350px}body:has(#mosaic.list) #stage{flex:none;padding:25px 0 30px}body:has(#mosaic.list)>main{flex:1}
.intro-status{display:none;position:fixed;left:2.5%;bottom:25px;z-index:80;width:190px;font:8px 'Courier New',monospace;letter-spacing:.08em;color:#666f5c;gap:12px;align-items:center}.intro-status>span:nth-child(2){margin-left:auto}.intro-status>div{width:100%;height:1px;background:#cdd1c4}.intro-status i{display:block;height:1px;width:0;background:#68725c}body.intro .intro-status{display:flex;flex-wrap:wrap}#skip-intro{bottom:18px;right:2.5%;font-size:8px;padding:8px}
@media(max-width:700px){body>header{height:52px}.brand{font-size:25px}.header-links{gap:16px}.header-links a,header button{font-size:8px}.toolbar{gap:6px;min-height:41px}.toolbar nav{gap:14px}.toolbar button{font-size:8px}.toolbar{align-items:stretch}body>main{padding-top:7px}.caption{min-height:20px}.caption #project-title{font-size:9px}.caption #project-category{font-size:7px}body>footer{height:28px;font-size:7px}footer>span:first-child{max-width:none;line-height:1}#replay span{font-size:7px}#stage{min-height:0;padding:9px 0 5px}.intro-status{bottom:21px;width:160px;font-size:7px}body:has(#mosaic.list)>main{min-height:0}}
/* Small images form a strip leading into the existing grid. */
.intro-strip{position:absolute;inset:0;overflow:visible;pointer-events:none}.path-frame{position:absolute;transform:none;pointer-events:none}.path-frame img{display:block;width:100%;height:100%;object-fit:contain;max-width:none}body.intro .intro-status{display:none}

/* Identical modules on the snake and in the grid; crop without distorting images. */
#mosaic:not(.list) .tile{aspect-ratio:1}#mosaic:not(.list) .tile img,#mosaic:not(.list) .tile video,.path-frame img{object-fit:cover}.path-frame{aspect-ratio:1;background:#e5e7df}body.intro .tile,body.intro .path-frame{box-shadow:none}
/* Restore the source format in both the snake and the destination. */
#mosaic:not(.list) .tile{aspect-ratio:var(--ratio)}#mosaic:not(.list) .tile img,#mosaic:not(.list) .tile video,.path-frame img{object-fit:contain}.path-frame{aspect-ratio:auto;background:transparent}
/* Crop portrait imagery to the horizontal reference height; never stretch the source. */
#mosaic:not(.list) .tile[data-portrait="true"] img,#mosaic:not(.list) .tile[data-portrait="true"] video,.path-frame[data-portrait="true"] img{object-fit:cover;object-position:50% 50%}
body{font-variant-emoji:text}