*{margin:0;padding:0;box-sizing:border-box}html,body{font-family:Archivo,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif}img{width:100%;height:100%;object-fit:cover}.work{position:relative;width:100vw;height:100vh;background:#131313;padding:7em 4em 3em;transition:background-color .5s ease;overflow:hidden}.site-header{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:baseline;padding:2em 4em;z-index:3;font-family:DM Mono,ui-monospace,SF Mono,Consolas,monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#ffffffd9;transition:color .5s}.wordmark{font-weight:500}.site-header-note{color:#fff6;transition:color .5s}.site-header-mail{color:inherit;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px}.work.hovered .site-header{color:#14232c}.work.hovered .site-header-note{color:#14232c8c}.overlay{position:absolute;top:0%;left:13.25%;width:100%;height:100%;pointer-events:none;z-index:0;display:flex;justify-content:center;align-items:center;gap:10em;transition:1s;opacity:.45}.work.hovered .overlay{opacity:.9}.prev{position:relative;width:460px;height:560px;background:#1d1d1d;transform:rotate(10deg) scale(1);transition:transform .5s ease;box-shadow:0 30px 80px #0000004d}.prev.active{transform:rotate(12.5deg) scale(1)}#prev-1{top:-500px}#prev-2{top:0}#prev-3{top:500px}p{position:relative;display:inline-block;align-self:flex-start;color:#fff9;font-family:DM Mono,ui-monospace,SF Mono,Consolas,monospace;font-size:13px;letter-spacing:.18em;text-transform:uppercase;margin:0 0 2.35em -.8em;padding:.4em .8em;background:#13131399;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);border-radius:2px;transition:.5s;z-index:2}h1{color:#fff;opacity:.5;font-size:clamp(3rem,6.5vw,5.5rem);font-weight:500;letter-spacing:-.03em;line-height:1;transition:.5s}.work-item{position:relative;width:100%;padding:1.6em 0;display:flex;align-items:center;gap:2em;border-bottom:1px solid rgba(255,255,255,.25);cursor:pointer;transition:.5s;z-index:2}.work-item#w-3{border-bottom:none}.work-item-name{display:flex;flex-direction:column;gap:.9em}.work-item-meta{font-family:DM Mono,ui-monospace,SF Mono,Consolas,monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#fff6;transition:.5s}.work-item-icon{position:relative;flex:none;width:70px;height:70px;border-radius:100%;background:#14232c;color:#fff;overflow:hidden;left:-20px;opacity:0;transition:.2s}.icon-holder{position:absolute;width:70px;height:70px;border-radius:100%;display:flex;justify-content:center;align-items:center;transition:.5s}.i-1{transition-delay:.2s;left:-70px}.i-2{left:0}button{position:relative;background:#fff;color:#14232c;transition:.5s;border:none;cursor:pointer;padding:1.5em 2.8em;margin:2.5em 0 0;font-family:Archivo,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:15px;letter-spacing:.01em;font-variant-ligatures:none;text-rendering:geometricPrecision;border-radius:100px;font-weight:500;z-index:2}button:focus-visible{outline:2px solid currentColor;outline-offset:3px}.work.hovered button{background:#14232c;color:#fff}.work.hovered h1{color:#14232c;opacity:1}.work.hovered p{color:#14232cd9;background:#ffffff9e}.work.hovered .work-item-meta{color:#14232c99}.work.hovered .work-item{border-bottom:1px solid rgba(20,35,44,.4)}.work.hovered .work-item#w-3{border-bottom:none}.work-item:hover .work-item-icon{opacity:1;left:0}.work-item:hover .icon-holder.i-1{left:0}.work-item:hover .icon-holder.i-2{left:70px}.bg-color-red{background-color:#dccbe6}.bg-color-blue{background-color:#c2d9e4}.bg-color-green{background-color:#eccdb4}@media(max-width:768px){.work{padding:6em 1.5em 3em;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}.overlay{opacity:.22}.work.hovered .overlay{opacity:.28}.site-header{padding:1.5em;font-size:10px;letter-spacing:.1em}.site-header-note{display:none}p{font-size:11px;margin-bottom:2em}h1{font-size:2.5rem;letter-spacing:-.02em}.work-item{gap:1em;padding:1.4em 0}.work-item-name{gap:.6em}.work-item-meta{font-size:10px}.work-item-icon{transform:scale(.65)}.overlay{gap:4em}.prev{width:230px;height:280px}#prev-1{top:-320px}#prev-3{top:320px}button{padding:1.2em 2.2em;font-size:13px;letter-spacing:0;margin-top:2em}}@media(prefers-reduced-motion:reduce){.work,.overlay,.prev,.site-header,.site-header-note,p,h1,.work-item,.work-item-meta,.work-item-icon,.icon-holder,button{transition:none!important}}