@font-face{font-family:"Inter Display";font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/inter-display-400.woff2) format("woff2")}
@font-face{font-family:"Inter Display";font-weight:500;font-style:normal;font-display:swap;src:url(../fonts/inter-display-500.woff2) format("woff2")}
@font-face{font-family:"Inter Display";font-weight:600;font-style:normal;font-display:swap;src:url(../fonts/inter-display-600.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:500;font-style:normal;font-display:swap;src:url(../fonts/plexmono-500.woff2) format("woff2")}

:root{
  --bg:#fff; --ink:#111; --mute:#888; --panel:#111; --on-panel:rgba(255,255,255,.8);
  --pad:72px; --gap:10px; --radius:7px;
  --sans:"Inter Display","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:400;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
ul{list-style:none}

/* GL canvas sits under the content; content backgrounds are transparent where GL draws them */
#gl{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;pointer-events:none}
.page{position:relative;z-index:1;padding:0 var(--pad);overflow-x:clip}

/* typography */
.mono{font-family:var(--mono);font-weight:500;font-size:14px;line-height:22.4px;letter-spacing:.35px;text-transform:uppercase;color:var(--mute)}
.label{font-family:var(--mono);font-weight:500;font-size:14px;line-height:16.8px;letter-spacing:.35px;text-transform:uppercase;color:var(--mute)}
.body{font-size:21px;line-height:29.4px;letter-spacing:-.21px}
.lead{font-size:21px;line-height:28px;letter-spacing:-.21px;color:var(--mute)}
.lead b{font-weight:400;color:var(--ink)}

/* nav */
.nav{height:82px;padding-top:30px;display:flex;justify-content:space-between;align-items:flex-start;position:relative}
.nav .mid{position:absolute;left:50%;top:30px;transform:translateX(-50%);display:flex;gap:80px}
.nav .right{text-align:right}
.roll{display:inline-flex;white-space:pre;vertical-align:top}
.roll .ch{display:inline-block;height:22.4px;overflow:hidden;position:relative}
.roll .ch>span{display:flex;flex-direction:column;transition:transform .45s cubic-bezier(.6,0,.2,1);transition-delay:calc(var(--i)*18ms)}
.roll .ch>span>i{font-style:normal;display:block;height:22.4px;line-height:22.4px}
a:hover .roll .ch>span,a:focus-visible .roll .ch>span{transform:translateY(-22.4px)}
.roll.big .ch,.roll.big .ch>span>i{height:29.4px;line-height:29.4px}
.roll.big .ch>span>i{font-size:inherit}
a:hover .roll.big .ch>span{transform:translateY(-29.4px)}
.nav a.active{color:var(--ink)}

/* hero name */
.name{position:relative;aspect-ratio:1296/218;margin:41px 0 0}
.name img,.name canvas{position:absolute}
.name img{left:0;top:0;width:100%;height:100%;object-fit:fill}
.name canvas{left:-2.16%;top:-12.84%;width:104.32%;height:125.7%;pointer-events:auto}
.name.live img{visibility:hidden}
.intro{display:flex;justify-content:space-between;margin-top:60px}
.intro p{max-width:370px}
.intro p+p{max-width:336px;text-align:right}

/* generic GL block */
.gl{position:relative;border-radius:var(--radius);overflow:hidden;background-color:#e8e8e8;background-size:cover;background-position:center}
html.gl-on .gl.gl-live:not(.gl-fail){background-image:none!important;background-color:transparent}
html.gl-touch .gl:not(.nogl){overflow:visible;isolation:isolate;clip-path:inset(0 -16px)}
.glc{position:absolute;left:-16px;top:0;width:calc(100% + 32px);height:100%;z-index:-1;pointer-events:none}
html.gl-on .gl.panel.nogl{background-color:var(--panel)}
.name canvas{touch-action:pan-y}
.panel{background:var(--panel);color:var(--on-panel);padding:40px;position:relative;border-radius:var(--radius)}

/* grids */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.grid.mt{margin-top:61px}
.card{display:block;aspect-ratio:1/1;color:#fff}
.card h2{position:absolute;left:31px;top:31px;font-weight:500;font-size:24px;line-height:28.8px;letter-spacing:-.24px;color:#fff;overflow:hidden;height:28.8px}
.card h2 .roll .ch,.card h2 .roll .ch>span>i{height:28.8px;line-height:28.8px}
.card:hover h2 .roll .ch>span{transform:translateY(-28.8px)}
.card .go{position:absolute;right:30px;top:30px;width:34px;height:34px;border-radius:50%;background:rgba(0,0,0,.15);-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);overflow:hidden}
.card .go svg{position:absolute;left:5px;top:5px;width:24px;height:24px;transition:transform .45s cubic-bezier(.6,0,.2,1)}
.card .go svg+svg{transform:translate(-26px,26px)}
.card:hover .go svg:first-child{transform:translate(26px,-26px)}
.card:hover .go svg+svg{transform:translate(0,0)}
.card .tags{position:absolute;left:30px;bottom:30px;display:flex;gap:5px}
.card .tags span{font-family:var(--mono);font-weight:500;font-size:14px;line-height:16.8px;letter-spacing:.35px;text-transform:uppercase;color:#fff;padding:5px 10px;border-radius:100px;background:rgba(0,0,0,.15);-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px)}

/* sections */
.sec{margin-top:10px}
.about-panel{min-height:1084px}
.cols{display:flex;justify-content:space-between}
.cols .left{width:525px}
.cols .left p+p{margin-top:28px}
.cols .right{display:flex;gap:30px}
.cols .right>div{width:203px}
.cols .right ul li{white-space:nowrap}
.cols .label,.panel>.label{display:block;margin-bottom:23px}
.panel .link{position:absolute;left:40px;bottom:40px}
.ring3d{position:absolute;left:0;right:0;top:63%;height:0;display:flex;justify-content:center;pointer-events:none}
.ring3d .persp{position:absolute;width:1216px;height:572px;left:50%;top:0;margin:-286px 0 0 -608px;perspective:946px;perspective-origin:50% 50%}
.ring3d .tilt{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateZ(15deg) rotateX(-2deg) scale(1.18)}
.ring3d .spin{position:absolute;inset:0;transform-style:preserve-3d}
.ring3d .ch{position:absolute;left:50%;top:50%;margin-top:-12px;height:25px;transform-origin:0 50%;font-weight:500;font-size:25px;line-height:25px;text-transform:uppercase;color:#fff;white-space:pre;backface-visibility:visible}
.ring3d .strip{position:absolute;left:0;right:0;top:50%;margin-top:-12px;height:25px;text-align:center;font-weight:500;font-size:25px;line-height:25px;letter-spacing:-.5px;text-transform:uppercase;color:#fff;white-space:nowrap;backface-visibility:visible}

/* footer */
.footer{margin-top:144px;padding-bottom:61px}
.foot-cols{display:flex;justify-content:space-between}
.foot-cols .c{display:flex;flex-direction:column}
.foot-cols .c .label{margin-bottom:24px}
.foot-cols .c a{font-size:21px;line-height:29.4px;letter-spacing:-.21px;color:var(--ink);align-self:flex-start}
.foot-cols .c.contact a:first-of-type{font-size:20px;line-height:28px;letter-spacing:-.2px}
.foot-cols .c.contact{align-items:flex-start}
.foot-left{display:flex}
.foot-left .c:first-child{width:190px}
.foot-name{margin-top:61px}
.foot-bottom{position:relative;display:flex;justify-content:space-between;align-items:center;margin-top:43px;min-height:22.4px}
.foot-bottom .top{position:absolute;left:50%;transform:translateX(-50%)}
.foot-bottom .copy{margin-left:auto}

/* work page */
.work-hero{position:relative;height:447px}
.work-hero h1{font-weight:600;font-size:163px;line-height:142.4px;letter-spacing:-9.78px;color:var(--ink);padding-top:21px}
.work-hero p{position:absolute;left:0;top:331px;max-width:425px}
.ring-cards{position:absolute;right:10px;top:18px;width:536px;height:342px;perspective:2396px;perspective-origin:50% 50%;pointer-events:none}
.ring-cards .a{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateY(-30deg)}
.ring-cards .b{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(31deg)}
.ring-cards .spin{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d}
.ring-cards .slot{position:absolute;left:0;top:0;width:0;height:0;transform-style:preserve-3d}
.ring-cards .slot img{position:absolute;left:-76px;top:-178px;width:152px;height:178px;object-fit:cover;border-radius:12px;backface-visibility:visible;max-width:none}

/* project page */
.proj-title{font-weight:600;font-size:171px;line-height:149.4px;letter-spacing:-10.26px;text-align:center;color:var(--ink);padding-top:41px;white-space:nowrap}
.proj-hero{margin-top:61px;aspect-ratio:16/9}
.overview{display:grid;grid-template-columns:1fr 603px;margin-top:10px;padding-bottom:39px}
.overview .rt p+p{margin-top:27px}
.rows{margin-top:40px}
.row{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid rgba(255,255,255,.18);height:29.4px}
.row:last-child{border-bottom:1px solid rgba(255,255,255,.18);height:30.4px}
.row .k{font-size:21px;line-height:28.4px;letter-spacing:-.21px}
.row .v{position:relative;top:-3px;font-family:var(--mono);font-weight:500;font-size:14px;letter-spacing:.35px;text-transform:uppercase;color:var(--on-panel)}
.pill{display:inline-block;height:41px;line-height:17px;padding:12px 20px;border-radius:100px;background:#2a2a2a;color:var(--mute)}
.pill.mt{margin-top:40px}
.pair{margin-top:10px}
.wide{margin-top:10px;aspect-ratio:16/9}
.wide.t{aspect-ratio:1296/810}
.more-label{margin-top:144px;margin-bottom:32px}

/* about page */
.about-top{margin-top:60px}
.about-top .bio{aspect-ratio:auto;min-height:692px}
.about-top .photo{height:692px}
.about-top .bio p{max-width:563px}
.about-top .bio p+p{margin-top:28px}
.about-top .pill{position:absolute;left:40px;bottom:40px}
.desk{aspect-ratio:2/1;margin-top:10px}
.exp-panel{margin-top:10px;min-height:881px}
.exp li{min-height:29.5px;gap:12px;display:flex;justify-content:space-between;align-items:center;border-top:1px solid rgba(255,255,255,.18)}
.exp li:last-child{border-bottom:1px solid rgba(255,255,255,.18)}
.exp li span{font-size:21px;line-height:28.4px;letter-spacing:-.21px}
.exp li em{font-style:normal;font-family:var(--mono);font-weight:500;font-size:14px;letter-spacing:.35px;text-transform:uppercase}
.exp-panel .ring3d{top:62%}

/* reveal */
[data-appear]{opacity:.001}
html.noanim [data-appear]{opacity:1!important;transform:none!important}
@media (prefers-reduced-motion:reduce){[data-appear]{opacity:1!important;transform:none!important}}

/* tablet */
@media (max-width:1199.98px){
  :root{--pad:30px;--gap:5px}
  .nav .mid{gap:40px}
  .intro p{max-width:370px}
  .intro p+p{max-width:340px}
  .name{margin-top:26px}
  .intro{margin-top:42px}
  .grid.mt{margin-top:44px}
  .work-hero{height:420px}
  .work-hero h1{font-size:120px;line-height:105px;letter-spacing:-7.2px}
  .work-hero p{top:300px}
  .ring-cards{transform:scale(.8);transform-origin:100% 0;right:0}
  .proj-title{font-size:110px;line-height:96px;letter-spacing:-6.6px}
  .cols .right>div{width:150px}
  .cols .left{width:auto;flex:1;max-width:525px;padding-right:30px}
  .overview{grid-template-columns:1fr 1fr}
  .card h2{left:26px;top:26px}
  .card .go{right:25px;top:25px}
  .card .tags{left:25px;bottom:25px}
  .about-top .pill,.panel .link{left:40px}
  .panel{padding:30px}
  .panel .link{left:30px;bottom:30px}
  .about-top .pill{left:30px;bottom:30px}
}
/* phone */
@media (max-width:809.98px){
  :root{--pad:20px;--gap:10px}
  .nav{height:96px;padding-top:22px}
  .nav .mid{top:22px;flex-direction:column;gap:0;align-items:center;text-align:center}
  .nav .mid a{display:block}
  .name{margin-top:0}
  .intro{flex-direction:column;gap:14px;margin-top:40px}
  .intro p,.intro p+p{max-width:none;text-align:left}
  .grid{grid-template-columns:1fr}
  .grid.mt{margin-top:40px}
  .about-panel,.exp-panel{min-height:0;padding-bottom:70px}
  .cols{flex-direction:column;gap:40px}
  .cols .left{width:auto;max-width:none;padding:0}
  .cols .right{gap:20px}
  .cols .right>div{width:auto;flex:1}
  .ring3d{position:relative;top:auto;height:240px;margin:20px 0 20px}
  .ring3d .persp{transform:scale(.45);top:120px}
  .panel .link{position:absolute;left:30px;bottom:30px}
  .work-hero{height:auto;padding-bottom:30px}
  .work-hero h1{font-size:72px;line-height:64px;letter-spacing:-4.3px;padding-top:30px}
  .work-hero p{position:static;margin-top:20px}
  .ring-cards{position:relative;right:auto;top:auto;left:50%;margin:10px 0 -137px -268px;transform:scale(.6);transform-origin:50% 0}
  .proj-title{font-size:56px;line-height:52px;letter-spacing:-3.4px;white-space:normal;padding-top:30px}
  .proj-hero{margin-top:30px}
  .overview{grid-template-columns:1fr}
  .overview .label{margin-bottom:20px}
  .body{font-size:18px;line-height:26px;letter-spacing:-.18px}
  .cols .left p+p{margin-top:20px}
  .exp li{flex-direction:column;align-items:flex-start;gap:2px;padding:12px 0}
  .exp li span{font-size:17px;line-height:23px}
  .exp li em{font-size:12px;line-height:16px;color:var(--mute);white-space:nowrap}
  .cols .right ul li{white-space:normal;font-size:17px;line-height:25px}
  .cols .label,.panel>.label{margin-bottom:16px}
  .about-top .bio{min-height:0;padding-bottom:100px}
  .about-top .photo{height:auto;aspect-ratio:643/692}
  .foot-cols{flex-wrap:wrap;gap:30px 20px}
  .foot-left .c:first-child{width:120px}
  .foot-name{margin-top:40px}
  .footer{margin-top:100px}
  .card h2{left:21px;top:21px}
  .card .go{right:20px;top:20px}
  .card .tags{left:20px;bottom:20px}
  .proj-title{padding-top:20px}
}

.nf{padding:181px 0 104px;text-align:center}
.nf h1{font-weight:600;font-size:calc((100vw - 144px)*.1613);line-height:.9;letter-spacing:-.06em;color:var(--ink);white-space:nowrap}
.nf p{margin:73px auto 0;max-width:330px;text-align:center}
@media (max-width:1199.98px){.nf{padding:120px 0 140px}.nf h1{font-size:calc((100vw - 60px)*.1613)}}
@media (max-width:809.98px){.nf{padding:90px 0 100px}.nf h1{font-size:calc((100vw - 40px)*.1613);white-space:normal}.nf p{margin-top:40px}}