@font-face{font-family:TimesPortfolio;src:url('assets/Times New Roman Italic.ttf');font-style:italic;font-weight:400;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}header{position:fixed;top:0;left:0;width:100%;z-index:20;pointer-events:none;background:linear-gradient(to bottom,#fff 0%,#fff 58%,#ffffffed 70%,#ffffff90 84%,#ffffff00 100%);height:10.2vw;min-height:100px}.nav-surface{display:flex;justify-content:space-between;align-items:flex-start;padding:5.05vw 3.8vw 0;font:clamp(10px,1.04vw,20px)/1.2 Diatype,monospace;text-transform:uppercase;color:#999;pointer-events:auto}nav{display:flex;justify-content:space-between;width:53.5%;gap:18px}a{color:inherit;text-decoration:none}a:hover,a:focus-visible{color:#ff633d}.current,.status{color:#ff633d}.status{display:grid;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}.project-layout{display:grid;grid-template-columns:32% 59.8%;justify-content:space-between;align-items:start;margin:10.2vw 3.8vw 5vw}.project-info{position:sticky;top:10.2vw}.project-info h1,.project-info h2{font:500 clamp(20px,1.72vw,34px)/1 Diatype,monospace;text-transform:uppercase;color:#808080;margin:0}.services{font:clamp(10px,1.05vw,20px)/1.3 Diatype,monospace;text-transform:uppercase;color:#ff633d;margin:.45vw 0 0;white-space:nowrap}.description,.role p,dt{font:400 italic clamp(15px,1.3vw,25px)/1.25 TimesPortfolio,'Times New Roman',serif}.description p{margin:0 0 1.6vw}.description p+p{text-indent:.3em}.role{margin-top:3.4vw}.role p{margin:.65vw 0 0}.credits{margin-top:2.9vw}.credits dl{margin:.6vw 0 0}.credits dl div{display:grid;grid-template-columns:10.5vw 1fr;align-items:baseline}.credits dd{font:clamp(9px,.8vw,15px)/1.3 Diatype,monospace;color:#ff633d;text-transform:uppercase;margin:0}.project-gallery{display:grid;grid-template-columns:1fr 1fr;gap:1.1vw 1.4vw}.project-gallery img{display:block;width:100%;height:auto}.wide,.back{grid-column:1/-1}.back{font:clamp(11px,1vw,18px)/1.3 Diatype,monospace;text-transform:uppercase;margin-top:1.5vw;color:#ff633d}#trail{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:30}@media(max-width:750px){header{height:110px}.nav-surface{padding:22px 20px 0;font-size:10px;gap:16px}nav{width:60%;gap:12px;flex-wrap:wrap}.status{font-size:9px}.project-layout{margin:110px 20px 30px;grid-template-columns:1fr;gap:30px}.project-info{position:relative;top:auto}.project-info h1{font-size:27px}.services{font-size:10px;margin:10px 0 6px;white-space:normal}.description{font-size:18px;max-width:520px}.description p{margin-bottom:20px}.role,.credits{margin-top:24px}.role p,dt{font-size:18px}.credits dl div{grid-template-columns:160px 1fr}.credits dd{font-size:10px}.project-gallery{gap:10px}.back{margin-top:16px}.desktop-break{display:none}}@media(prefers-reduced-motion:reduce){#trail{display:none}}

.project-gallery .artwork-animation{display:block;width:100%;aspect-ratio:1;object-fit:cover;background:#000}

/* V4 case-study layout: sticky copy beside the complete artwork sequence. */
.project-layout{margin:10.2vw 4.85vw 5vw;grid-template-columns:34% 59.8%}
.project-info h1{font-size:clamp(20px,1.72vw,34px)}
.project-info .services{font-size:clamp(10px,1.05vw,20px);white-space:normal;margin:.45vw 0 .15vw}
.project-info .description{max-width:100%}
.project-gallery{align-items:start;gap:1.1vw 1.4vw}
.project-gallery img{background:#f3f3f0}
.project-links{grid-column:1/-1;display:flex;justify-content:space-between;gap:20px;margin-top:1.5vw;font:clamp(10px,1vw,18px)/1.4 Diatype,monospace;text-transform:uppercase;color:#ff633d}
@media(min-width:751px) and (max-height:730px){.project-info{top:110px}.role{margin-top:2vw}.credits{margin-top:2vw}}
@media(max-width:750px){.project-layout{margin:125px 20px 30px;grid-template-columns:1fr}.project-info h1{font-size:27px}.project-info .services{margin:10px 0 8px}.project-gallery{gap:10px}.project-links{margin-top:20px;font-size:10px}}

/* Final supplied motion follows each frame's original proportions. */
.project-gallery video{display:block;width:100%;height:auto;object-fit:contain;background:#000}
.credits dl div{grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:12px}
.project-info{max-height:calc(100dvh - 11.5vw);overflow-y:auto;scrollbar-width:thin;padding-bottom:12px}
.project-sections>.project-layout:first-child{margin-bottom:1.1vw}
.project-sections>.moot-section{margin-top:0}
@media(max-width:750px){.project-info{max-height:none;overflow:visible;padding-bottom:0}.credits dl div{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.project-sections>.moot-section{margin-top:40px}}