*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#fff;color:#111;font-family:Arial,Helvetica,sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{border:0;padding:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}a{color:inherit;text-decoration:none}button:hover,a:hover{opacity:.65}button:focus-visible,a:focus-visible{outline:2px solid #A56996;outline-offset:5px}header,footer{position:fixed;left:0;right:0;z-index:30;padding:12px 16px;display:flex;justify-content:space-between;align-items:flex-start;font-size:clamp(14px,1.85vw,22px);font-weight:700;pointer-events:none}header>* ,footer>*{pointer-events:auto}header{top:0}h1{position:fixed;z-index:31;mix-blend-mode:difference;color:#fff;white-space:nowrap;pointer-events:none;left:39%;top:12px;font-size:clamp(14px,1.85vw,22px);line-height:1.02;margin:0;font-weight:700;letter-spacing:-.055em}footer{bottom:0;align-items:end}.bottom-left{display:flex;gap:clamp(35px,10.4vw,160px)}#columns{position:absolute;left:39%;top:0;width:22%;height:100%;display:flex;gap:3px}.column{width:calc(50% - 1.5px);height:100%;position:relative}.track{will-change:transform;display:flex;flex-direction:column;gap:3px}.photo{display:block;width:100%;flex:none;position:relative;line-height:0;background:#f4f4f1}.photo:hover{opacity:1}.photo img{display:block;width:100%;height:auto;min-height:35px}.photo:focus-visible{outline-offset:-3px}.photo.selected{background:transparent}.photo.selected img{visibility:hidden}:is(#selection,.photo-selection){position:fixed;z-index:21;top:0;left:0;max-width:28vw;font-size:14px;line-height:1.25}.photo-caption h2{font-size:clamp(15px,1.4vw,21px);margin:0 0 7px;line-height:1.1;letter-spacing:-.035em}.photo-caption p{margin:0 0 8px}.photo-caption .watch{display:inline-block;margin-top:15px;text-decoration:underline;font-size:12px}.swatch{display:inline-block;width:.8em;height:.8em;margin-right:.4em;background:var(--color);flex:none}.panel{position:fixed;z-index:40;background:rgba(255,255,255,.97);padding:22px;box-shadow:0 0 45px 20px rgba(255,255,255,.75);max-height:calc(100dvh - 110px);overflow:auto}.close-panel{display:block;font-size:12px;margin-bottom:25px}.text-panel{left:16px;bottom:65px;width:min(380px,calc(100% - 32px));font-size:18px;line-height:1.25;letter-spacing:-.035em}.text-panel p{margin:0 0 20px}.text-panel a{text-decoration:underline;text-underline-offset:3px}.text-panel p:last-child{margin-bottom:0;margin-top:20px}.index-panel{right:16px;bottom:58px;width:min(330px,calc(100% - 32px));padding-right:0}.category{margin-bottom:15px}.category-toggle{font-size:21px;display:flex;align-items:center;gap:10px;letter-spacing:-.04em}.category-toggle .swatch{margin:0}.project-list{padding:12px 0 0;list-style:none;margin:0}.project-list button{font-size:13px;display:flex;gap:14px;line-height:1.3;padding:6px 0;width:100%}.project-list .num{color:var(--color);min-width:22px}.project-list small{display:block;font-size:11px;color:#555;margin-top:2px}#loading{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:12px;background:#fff;padding:10px}#motion{position:fixed;bottom:12px;left:33%;z-index:31;font-size:13px;opacity:.45;padding:4px}#cursor,.trail{position:fixed;pointer-events:none;width:9px;height:9px;z-index:100;left:0;top:0}#cursor{display:none;background:#E1471C}.trail{display:block;opacity:1}@keyframes fade{0%,45%{opacity:1}100%{opacity:0}}@media(hover:hover) and (pointer:fine){body.custom-cursor,body.custom-cursor button,body.custom-cursor a{cursor:none}body.custom-cursor #cursor{display:block}}[hidden]{display:none!important}@media(max-width:650px){header,footer{padding:12px;font-size:14px}h1{left:29%;top:12px}#columns{left:29%;width:42%;gap:2px}.track{gap:2px}.bottom-left{gap:25px}#motion{left:31%;bottom:10px}.photo.selected img{visibility:hidden}:is(#selection,.photo-selection){max-width:43vw;font-size:12px;background:rgba(255,255,255,.97);padding:9px}.photo-caption h2{font-size:14px}.text-panel{font-size:16px}.index-panel{bottom:55px}.panel{padding:16px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

body.custom-cursor #cursor{display:block}

/* Keep the native cursor hidden on every element and interaction state. */
html,body,body *,body *::before,body *::after{cursor:none!important}
.photo,.photo img{-webkit-user-drag:none;user-select:none;-webkit-user-select:none}

.column{touch-action:none;overscroll-behavior:contain}


.photo-caption{overflow-wrap:anywhere}.project-list button[aria-current="true"]{text-decoration:underline;text-underline-offset:3px}.index-project :is(#selection,.photo-selection){z-index:45;background:#fff}.index-project #index{box-shadow:none;width:min(340px,42vw)}
@media(max-width:650px){.index-project #index{width:46vw;padding:10px}.index-project .category-toggle{font-size:16px}.index-project .project-list button{font-size:11px}}

/* Expanded image is independent of the rail: opening never changes its geometry. */
.photo-stage{position:fixed;z-index:25;background:#fff;line-height:0;overflow:hidden}
.photo-stage:hover{opacity:1}
.photo-stage img{display:block;width:100%;height:100%;object-fit:contain;-webkit-user-drag:none}
.close-photo{position:fixed;z-index:32;font-size:12px;line-height:20px;padding:2px 0}
:is(#selection,.photo-selection){overflow:auto;scrollbar-width:thin;padding:0 2px 4px 0}
.photo-caption h2{line-height:1.12;font-weight:600;margin:0 0 12px}
.photo-caption .client{font-size:13px;margin-bottom:18px}
.photo-caption .description{font-size:14px;line-height:1.5;white-space:pre-line}
#motion{font-size:11px;font-weight:400;letter-spacing:.02em;opacity:.7;bottom:13px}
.index-panel{scrollbar-width:thin}
.index-project :is(#selection,.photo-selection){padding-bottom:14px}
.photo.selected img{visibility:hidden}

.category-word{background:var(--category-inverse);padding:0;box-decoration-break:clone;-webkit-box-decoration-break:clone}.category-word>span{color:var(--category-color);mix-blend-mode:normal}

.category-word:hover{background:var(--category-color)}.category-word:hover>span{color:var(--category-inverse);mix-blend-mode:normal}

.project-block{flex:none;width:100%}.project-gallery{display:flex;flex-direction:column;gap:3px;margin-top:3px}.photo.image-error{min-height:80px;background:#f4f4f1}

.project-gallery .photo img{height:var(--gallery-height);object-fit:contain;background:#fff}

.cover-media{position:relative}.video-cover{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none}.cover-media:has(>.photo.selected)>.video-cover{visibility:hidden}.category-word{display:inline;font:inherit;letter-spacing:inherit;line-height:inherit;text-align:inherit}.category-word:hover{opacity:1}

.track,.project-gallery{gap:1px}.project-gallery{margin-top:1px}.project-gallery .photo img{height:auto;object-fit:contain}.cover-media{overflow:hidden}.video-cover{inset:50% auto auto 50%;width:180%;height:180%;transform:translate(-50%,-50%)}.cover-media:has(>.inline-open)>.video-cover{visibility:visible}

.project-expanded .project-gallery{gap:1px;margin-top:1px}.photo.inline-open img{visibility:visible;height:auto;min-height:0;object-fit:cover}.project-gallery .photo{flex:none}.project-gallery .photo img{display:block;height:auto;background:transparent}

.photo.gallery-video{overflow:hidden;aspect-ratio:16/9}.photo.gallery-video img{width:100%;height:100%;aspect-ratio:16/9;object-fit:cover}.photo.gallery-video .video-cover{inset:0;transform:none;width:100%;height:100%;visibility:visible}

.project-block.project-active{position:relative;z-index:22}.column,.track,.project-block{overflow:visible}

/* Text floats directly over the page and reverses against its backdrop. */
.panel,.photo-selection,#selection,#loading{background:transparent!important;box-shadow:none!important;color:#fff;mix-blend-mode:difference}
.project-list small{color:inherit}
.photo-selection,#selection{z-index:45}

/* Index sits beside the photographs; category colours must remain exact. */
#index{mix-blend-mode:normal;color:#111}
#index .category-toggle:hover{opacity:1}
#index .swatch{mix-blend-mode:normal;opacity:1;background:var(--color)}

/* Keep category markers in a separate, unblended paint layer. */
.swatch,#index .swatch{opacity:0!important}
#category-markers{position:fixed;inset:0;pointer-events:none;overflow:hidden}
#category-markers{z-index:60;mix-blend-mode:normal}
#category-markers i{position:absolute;display:block}
#index{mix-blend-mode:difference;color:#fff}
:is(#photo-selection-right,#selection) .photo-caption h2{display:flex;flex-direction:row-reverse;align-items:baseline;text-align:right}
:is(#photo-selection-right,#selection) .swatch{margin-right:0;margin-left:.4em}

@media(max-width:650px){
 html,body{height:100dvh}
 #columns{height:100dvh}
 header{padding-top:max(12px,env(safe-area-inset-top));z-index:50;color:#fff;mix-blend-mode:difference}
 h1{top:max(12px,env(safe-area-inset-top));font-size:clamp(12px,3.5vw,16px);z-index:51}
 footer{bottom:env(safe-area-inset-bottom,0px);padding:4px 12px;z-index:50;color:#fff;mix-blend-mode:difference}
 footer button{min-height:44px;display:flex;align-items:center}
 .bottom-left{gap:16px}
 
 #motion{left:50%;transform:translateX(-50%);bottom:calc(4px + env(safe-area-inset-bottom,0px));min-height:44px;z-index:51;color:#fff;mix-blend-mode:difference;opacity:1}
 .panel,.photo-selection,#selection{background:transparent!important;box-shadow:none!important}
 .panel{bottom:calc(96px + env(safe-area-inset-bottom,0px));max-height:calc(100dvh - 170px);padding:12px}
 .close-panel{min-height:44px;display:flex;align-items:center;margin-bottom:12px}
 .text-panel{left:12px;width:calc(100% - 24px);font-size:16px}
 .index-panel,.index-project #index{right:12px;width:46vw;padding:10px;max-height:calc(100dvh - 190px)}
 .category-toggle,.index-project .category-toggle{min-height:44px;font-size:18px}
 .category{margin-bottom:6px}
 .project-list button{min-height:44px}
 #index .project-list{max-height:max(44px,calc(100dvh - 530px));overflow-y:auto;overscroll-behavior:contain}
 .photo-selection,#selection{padding:0 2px 4px;max-width:43vw}
 .close-photo{min-height:32px;color:#fff;mix-blend-mode:difference;z-index:51}
}

#motion{display:flex;align-items:center;justify-content:center;color:#fff;mix-blend-mode:difference}
#motion svg{display:block;flex:none}
@media(max-width:650px) and (max-height:600px){
 .index-panel,.index-project #index{bottom:calc(76px + env(safe-area-inset-bottom,0px));padding:8px}
 #index .category-toggle{min-height:26px;font-size:16px}
 #index .category{margin-bottom:4px}
 #index .close-panel{min-height:26px;margin-bottom:8px}
 #index .project-list{max-height:44px;padding-top:4px}
}