@import url('https://fonts.googleapis.com/css2?family=DM+Mono&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--bg:#050505;--white:#f5f5f5;--grey:#777;--dim:#3f3f3f}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--white);font-family:Manrope,Arial,sans-serif;font-weight:600}main{min-height:100vh;padding:36px 4vw}.header{position:sticky;top:0;z-index:5;background:var(--bg);display:grid;grid-template-columns:auto 1fr;gap:42px;align-items:start;padding-bottom:35px}.brand-row{display:flex;gap:14px;align-items:center}.brand{font-size:clamp(25px,2.7vw,46px);font-weight:700;letter-spacing:-.08em;line-height:.9;color:white;text-decoration:none}.socials{display:flex;gap:7px}.socials a{width:39px;height:39px;border:1px solid #454545;display:grid;place-items:center;color:#aaa;text-decoration:none;font-size:14px;transition:.25s}.socials a:hover{border-color:white;color:white}.top-nav{justify-self:end;width:min(52vw,660px);display:grid;grid-template-columns:repeat(3,1fr);justify-items:end}.top-nav a{font-size:clamp(25px,2.7vw,46px);font-weight:600;letter-spacing:-.08em;line-height:.9;padding-bottom:7px;text-decoration:none;color:white;border-bottom:3px solid transparent}.top-nav .current{border-color:white}.layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,27vw);gap:4.5vw;padding-top:46px}.archive{min-width:0}.archive h1{margin:0 0 77px;font-size:clamp(55px,7.3vw,130px);font-weight:700;letter-spacing:-.08em;line-height:.86}.projects{margin:0;padding:0;list-style:none}.project{display:grid;grid-template-columns:minmax(50px,6vw) minmax(0,1fr);gap:19px;margin-bottom:110px;scroll-margin-top:130px}.project-no{font-size:clamp(54px,6.3vw,100px);line-height:.78;color:#505050;font-weight:500}.project-content{min-width:0}.project-title{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:13px;align-items:start}.project-title i{font-style:normal;color:#ddd;font-size:clamp(43px,4.1vw,70px);line-height:.76}.project-title h2{margin:0;font-size:clamp(23px,2.1vw,40px);line-height:1.08;letter-spacing:.2em;font-weight:800}.project-title time{color:#777;font-size:clamp(14px,1.25vw,20px);font-weight:600}.credits{margin:39px 0 0;font-size:15px;line-height:1.5;color:#777}.credits strong{color:#ddd;font-weight:600}.media-grid{max-width:1080px;display:grid;grid-template-columns:1fr 1fr;gap:38px 28px;margin-top:52px}.description{grid-column:1/-1;margin:0;max-width:700px;color:#777;font-size:15px;line-height:1.47}.image{margin:0;aspect-ratio:16/9;background-color:#111;background-position:center;background-size:cover;overflow:hidden}.image.wide{grid-column:1/-1}.particle{background-image:url('https://images.unsplash.com/photo-1614730321146-b6fa6a46bcb4?auto=format&fit=crop&w=1600&q=90')}.macro{background-image:url('https://images.unsplash.com/photo-1534791547702-9bbde136ca31?auto=format&fit=crop&w=800&q=85')}.particles{background-image:url('https://images.unsplash.com/photo-1462331940025-496dfbfc7564?auto=format&fit=crop&w=800&q=85')}.woven{background-image:url('https://images.unsplash.com/photo-1550614000-4895a10e1bfd?auto=format&fit=crop&w=1600&q=85')}.desert{background-image:url('https://images.unsplash.com/photo-1500534623283-312aade485b7?auto=format&fit=crop&w=1600&q=85')}.orange{background-image:url('https://images.unsplash.com/photo-1519608487953-e999c86e7454?auto=format&fit=crop&w=800&q=85')}.dust{background-image:url('https://images.unsplash.com/photo-1534796636912-3b95b3ab5986?auto=format&fit=crop&w=800&q=85')}.fluid{background-image:url('https://images.unsplash.com/photo-1559827260-dc66d52bef19?auto=format&fit=crop&w=1600&q=85')}.energy{background-image:url('https://images.unsplash.com/photo-1519608487953-e999c86e7454?auto=format&fit=crop&w=1600&q=85')}.lace{background-image:url('https://images.unsplash.com/photo-1552346154-21d32810aba3?auto=format&fit=crop&w=1600&q=85')}.index-panel{position:sticky;top:125px;height:calc(100vh - 150px);display:grid;grid-template-columns:1fr;gap:35px;overflow:auto;align-self:start;color:#777}.index-panel h3{margin:0 0 13px;font-size:clamp(20px,1.6vw,31px);line-height:1.3;font-weight:600}.filter-list{display:flex;flex-direction:column}.filter-list button{border:0;background:transparent;color:#777;font:600 clamp(19px,1.55vw,29px)/1.3 Manrope;text-align:left;padding:0;cursor:pointer;display:grid;grid-template-columns:18px 1fr;gap:8px;align-items:center;transition:.2s}.filter-list button b{display:block;width:8px;height:8px;border-radius:50%;background:currentColor}.filter-list button:hover,.filter-list button.active{color:white}.filter-list .all{margin-top:25px}.jump-list{border-top:1px solid #444;padding-top:28px}.jump-list a{display:grid;grid-template-columns:44px 1fr;gap:3px;text-decoration:none;color:#555;font-size:clamp(17px,1.4vw,26px);line-height:1.3;transition:.2s}.jump-list a:hover{color:#ddd}.project.filtered{display:none}.drag-tip{position:fixed;left:17px;top:17px;z-index:20;color:rgba(255,255,255,.55);font-size:13px;line-height:1.28;opacity:0;pointer-events:none;transition:.25s}.drag-tip.show{opacity:1}.cursor-dot{pointer-events:none;position:fixed;z-index:20;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.55);left:0;top:0;opacity:0;transform:translate(-50%,-50%);transition:opacity .15s}.cursor-dot.show{opacity:1}
@media(max-width:900px){main{padding:26px 24px}.header{gap:28px;padding-bottom:25px}.layout{grid-template-columns:1fr;padding-top:34px}.index-panel{order:-1;position:static;height:auto;display:grid;grid-template-columns:1fr 1fr}.jump-list{border-top:0;border-left:1px solid #444;padding:0 0 0 22px}.archive h1{margin-bottom:54px}.project{margin-bottom:76px}.drag-tip{display:none}}@media(max-width:560px){main{padding:20px}.header{grid-template-columns:1fr;gap:20px}.brand-row{justify-content:space-between}.socials a{width:31px;height:31px;font-size:11px}.top-nav{width:100%;justify-self:start}.top-nav a{font-size:30px}.layout{padding-top:26px}.index-panel{grid-template-columns:1fr;gap:30px}.jump-list{border-left:0;border-top:1px solid #444;padding:21px 0 0}.archive h1{font-size:61px}.project{grid-template-columns:42px minmax(0,1fr);gap:10px}.project-no{font-size:48px}.project-title{grid-template-columns:auto 1fr;gap:9px}.project-title h2{font-size:20px;letter-spacing:.11em}.project-title time{grid-column:2;font-size:13px}.credits{font-size:13px;margin-top:27px}.media-grid{margin-top:34px;gap:19px}.description{font-size:13px}.image:not(.wide){grid-column:1/-1}.project{margin-bottom:62px}}