@font-face{font-family:TimesPortfolio;src:url('assets/Times New Roman Italic.ttf');font-style:italic;font-display:swap}@font-face{font-family:Diatype;src:url('assets/ABCDiatypeMono-Medium-Trial.otf');font-display:swap}*{box-sizing:border-box}html{background:#fff;color:#20201e}body{margin:0;padding:2.5vw 4.2vw 0;overflow-x:hidden}header{position:relative;z-index:3;display:flex;gap:3vw;width:72.5%;font:clamp(11px,1.04vw,20px)/1.2 Diatype,monospace;text-transform:uppercase;color:#999}nav{display:flex;align-items:flex-start;justify-content:space-between;flex:1;gap:18px}.current,.status{color:#ff633d}.status{text-align:right;white-space:nowrap;display:grid}main{position:relative;min-height:calc(100vh - 5vw)}.work{position:relative;z-index:2;width:61%}h1{font:500 clamp(44px,4.65vw,100px)/.93 Diatype,monospace;letter-spacing:-.065em;text-transform:uppercase;margin:1.2vw 0 1.1vw}h1 span{background:linear-gradient(#e8e8e8 5%,#c7c7c7 48%,#282826 98%);background-clip:text;color:transparent}#projects{display:flex;flex-direction:column;align-items:flex-start}.project{display:block;position:relative;border:0;background:none;padding:0;margin:0;font:italic clamp(43px,4.55vw,100px)/.92 TimesPortfolio,'Times New Roman',serif;letter-spacing:-.025em;color:#999;text-align:left;white-space:nowrap;cursor:pointer;transition:color 120ms}.project:hover,.project.active,.project:focus-visible{color:#ff633d}.project:focus-visible{outline:1px solid #ff633d;outline-offset:5px}.project.placeholder{cursor:default}.preview-area{position:fixed;right:4.7vw;top:21.1vh;width:33.4vw;aspect-ratio:1}.preview{width:100%;height:100%;position:relative;overflow:hidden;background:#eee}.preview img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:transform}.ghost{position:absolute;right:0;width:72%;height:100%;background-size:cover;background-position:center;z-index:-1}.ghost-top{bottom:100%;background-image:linear-gradient(#ffffffb5,transparent),url('assets/excess.png')}.ghost-bottom{top:100%;background-image:url('assets/hanrahan.png')}.caption{position:absolute;right:100%;bottom:-.3em;margin:0;white-space:nowrap;font:clamp(9px,1vw,20px)/1 Diatype,monospace;color:#ff633d}.announcement{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}#trail{position:fixed;inset:0;pointer-events:none;z-index:10;width:100%;height:100%}@media(min-width:1800px){.project{line-height:.92}}@media(max-width:750px){body{padding:22px 20px}header{width:100%;font-size:10px;gap:12px}nav{gap:12px;flex-wrap:wrap}.status{font-size:9px}main{display:flex;flex-direction:column;min-height:0}.work{width:100%}h1{font-size:52px;margin:32px 0 24px}.project{font-size:clamp(37px,8.7vw,65px);line-height:1.04}.preview-area{position:sticky;bottom:16px;top:auto;align-self:flex-end;right:auto;width:46vw;margin-top:24px;z-index:4;box-shadow:0 0 0 5px #fff}.ghost{display:none}.caption{position:static;white-space:normal;font-size:9px;line-height:1.4;margin-top:8px}.preview{aspect-ratio:1;height:auto}}@media(prefers-reduced-motion:reduce){*{transition:none!important}#trail{display:none}}

/* Stationary composition with an infinite scroll reel. */
body{height:500vh;padding:0}header{position:fixed;top:2.5vw;left:4.2vw;width:66.4%;z-index:5}main{position:fixed;inset:5vw 4.2vw 0;min-height:0}.work{height:100%;width:61%}h1{font-size:min(4.65vw,9vh);margin:0 0 1.3vw}.project{font-size:min(4.55vw,7.6vh);line-height:.98}.project:hover{color:#999}.project.active,.project.active:hover,.project:focus-visible{color:#ff633d}.preview-area{top:21.1vh}.preview-area .ghost{pointer-events:none}html{overscroll-behavior:none}body{overscroll-behavior:none}
@media(max-width:750px){header{top:20px;left:20px;width:calc(100% - 40px)}main{inset:85px 20px 20px;display:block}.work{width:100%;height:auto}h1{font-size:clamp(34px,6.2vh,52px);margin:0 0 20px}.project{font-size:min(8.7vw,4.7vh);line-height:1.04}.preview-area{position:fixed;right:20px;bottom:20px;top:auto;width:min(42vw,24vh);margin:0;box-shadow:none}.caption{font-size:8px}.preview{width:100%;height:auto;aspect-ratio:1}}

/* Continuous scroll reel: square images grow toward the viewport centre. */
.preview-area{position:fixed;top:50%;right:4.7vw;width:33.4vw;aspect-ratio:1;transform:translateY(-50%);pointer-events:none;box-shadow:none}.preview{position:relative;width:100%;height:100%;overflow:visible;background:none}.reel-card{position:absolute;inset:0;width:100%;height:100%;transform-origin:right center;will-change:transform;overflow:hidden;background:#eee}.preview .reel-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:auto}.ghost{display:none}.caption{bottom:0;right:100%;padding-right:8px}.preview-area .announcement{display:none}
@media(max-width:750px){.work{width:54%}h1{font-size:min(7.5vw,6vh)}.project{font-size:min(6vw,4.7vh)}.preview-area{top:50%;bottom:auto;right:20px;width:40vw;transform:translateY(-50%);margin:0}.preview{height:100%;aspect-ratio:1}.caption{position:absolute;right:0;bottom:-24px;font-size:7px;max-width:100%;text-align:right;padding:0}}

@media(max-width:750px){
 body.home{touch-action:pan-y}
 body.home main{inset:0;top:0;pointer-events:none}
 body.home .work{display:none}
 body.home .preview-area{top:52.2%;left:4.55vw;right:auto;bottom:auto;width:90.9vw;transform:translateY(-50%);margin:0}
 body.home .reel-card{transform-origin:center center}
 body.home .caption{display:none}
}

/* Native thumbnail links preserve touch scrolling and keyboard navigation. */
body.home .reel-card{display:block;pointer-events:auto;cursor:pointer;touch-action:pan-y;-webkit-user-drag:none}
body.home .reel-card:focus-visible{outline:2px solid #ff633d;outline-offset:4px}

.reel-card video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}.reel-card video[hidden],.reel-card picture[hidden]{display:none}