/* AFTERIMAGE — type, ink, registration. Motion is progressive enhancement. */
:root{--motion-ease:cubic-bezier(.2,.8,.2,1);--motion-ink:#243df4}
html{overflow-x:clip}
.header nav a,.masthead nav a{position:relative;display:inline-block;overflow:hidden;vertical-align:middle;line-height:1.5}
.nav-ink,.nav-after{display:block;transition:transform .5s var(--motion-ease)}
.nav-after{position:absolute;inset:0;transform:translateY(110%);color:inherit}
nav a:hover .nav-ink,nav a:focus-visible .nav-ink{transform:translateY(-110%)}
nav a:hover .nav-after,nav a:focus-visible .nav-after{transform:translateY(0)}
.route-curtain{position:fixed;inset:0;z-index:100;pointer-events:none;visibility:hidden;color:#f3f1ec;contain:paint}
.route-slat{position:absolute;left:0;right:0;top:calc(var(--slat)*100%/6);height:calc(100%/6 + 1px);background:var(--motion-ink);transform:scaleX(0)}
.route-meta{position:absolute;top:clamp(1.2rem,3.5vw,4rem);left:clamp(1.2rem,3.5vw,4rem);right:clamp(1.2rem,3.5vw,4rem);display:flex;justify-content:space-between;font:400 .75rem var(--mono,monospace);letter-spacing:.08em}
.route-word{position:absolute;bottom:14%;left:clamp(1.2rem,3.5vw,4rem);font-family:Space,Arial,sans-serif;font-size:clamp(4rem,21vw,26rem);line-height:.78;letter-spacing:-.085em;font-weight:700;white-space:nowrap;margin-left:-.04em}
.hero-type{position:relative;display:inline-block;appearance:none;background:none;border:0;padding:0;margin:0;color:inherit;font:inherit;letter-spacing:inherit;line-height:inherit;text-align:left;white-space:nowrap;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.hero-type:focus-visible{outline:0}.hero-type:focus-visible .type-ink{color:var(--blue)}
.hero-name h1 .hero-period{position:relative;left:.025em;width:.15em;height:.15em;margin-left:-.08em;background:var(--blue);border-radius:50%;color:transparent;animation:cursor-blink 1.05s steps(1,end) infinite;display:inline-block;line-height:0}
.hero-enter{position:relative}.hero-enter:after{content:'';position:absolute;bottom:-.65rem;left:0;width:100%;height:2px;background:currentColor;transform:scaleX(.12);transform-origin:left;transition:transform .6s var(--motion-ease)}
.hero-enter:hover:after,.hero-enter:focus-visible:after{transform:scaleX(1)}
.project-link:hover .project-media{transform:none}
.project-band{position:relative;isolation:isolate;transform-origin:left center}
.project-copy h2{transition:transform .35s var(--motion-ease)}
.project-link:hover .project-copy h2{transform:translate3d(0,-2px,0)}
.project-media{transition:none;perspective:none}.project-media>div{transform-origin:50% 75%}.work-page .header{position:sticky;top:0;z-index:30}
.project-media>div{position:relative}
.article{position:relative;isolation:isolate;transition:color .4s;padding-left:0!important;background:transparent!important}
.article:before{content:'';position:absolute;inset:0;z-index:-1;background:#283ce7;transform:scaleX(0);transform-origin:left center;transition:transform .36s var(--motion-ease)}
.article[data-ink-side=right]:before{transform-origin:right center}
.article:hover:before,.article:focus-visible:before{transform:scaleX(1)}
.article strong{transition:transform .6s var(--motion-ease),color .4s}
.article:hover strong,.article:focus-visible strong{transform:translateX(.15em)}
.article-number{transition:transform .6s var(--motion-ease),color .4s}
.article:hover .article-number,.article:focus-visible .article-number{transform:translateX(.7rem)}
.article.is-in-frame{color:#c4c3bf}
.article:hover,.article:focus-visible,#latest-article{color:#f3f1ec}
.future-mark{transform-origin:50% 65%;backface-visibility:hidden}
.future-finale{font-size:clamp(4rem,12vw,12rem)}
.contact-channel{overflow:hidden}.wechat-channel{overflow:visible}
.x-channel .channel-title{position:relative;transition:transform .4s var(--motion-ease);transform-origin:center}
.x-channel:hover .channel-title{color:#243df4;transform:scale(.985) rotate(-3deg)}
.x-channel .channel-bottom{transition:transform .6s var(--motion-ease)}
.x-channel:hover .channel-bottom{transform:translateY(-.25rem)}
.wechat-inner{transition:transform .68s cubic-bezier(.2,.8,.2,1)}
.wechat-channel[aria-pressed=true] .wechat-inner{transform:rotateY(180deg)}
.wechat-front .channel-title{transition:transform .35s var(--motion-ease)}
.wechat-channel:hover .wechat-front .channel-title{transform:translate3d(0,-3px,0)}
body.motion-sleep *,body.motion-sleep *:before,body.motion-sleep *:after{animation-play-state:paused!important}
@media(max-width:650px){.route-word{font-size:22vw}.article:hover strong,.article:focus-visible strong{transform:translateX(.05em)}.future-finale{font-size:18vw}}
@media(prefers-reduced-motion:reduce){
 .nav-ink,.nav-after,.project-copy h2,.article,.article:before,.article strong,.article-number,.hero-enter:after,.channel-title,.channel-bottom,.wechat-inner{transition:none!important}
 .route-curtain{display:none!important}
 .hero-name h1 .hero-period{animation:none}
}

/* Pause, rather than recreate, offscreen interface timelines. */
.project-media{mix-blend-mode:normal!important}
.project-media>div{contain:layout style}
.project:not(.is-active) *,.project:not(.is-active) *:before,.project:not(.is-active) *:after,body.is-navigating *{animation-play-state:paused!important}
.route-curtain.is-moving .route-slat{will-change:transform}
.article-list{contain:layout style}