@font-face{font-family:"IT";src:url(/fonts/intertight.woff2) format("woff2-variations"),url(/fonts/intertight.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
:root{--size:390;--ease:cubic-bezier(.19,1,.22,1);--io:cubic-bezier(.77,0,.18,1)}
@media (min-width:650px){:root{--size:1500}}
*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}
html{font-size:calc(10 * 100vw / var(--size));-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:none;text-size-adjust:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#000;color:#fff}
html,body{position:fixed;inset:0;overflow:hidden;overscroll-behavior:none;width:100%;height:100%}
body{font-family:"IT",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:max(1.4rem,13px);line-height:1.4;letter-spacing:-.02em;touch-action:none;user-select:none;-webkit-user-select:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;letter-spacing:inherit}
ul{list-style:none}
img{display:block;max-width:100%}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0;margin:-1px}
.label{font-size:max(1rem,10px);font-weight:500;text-transform:uppercase;letter-spacing:0;line-height:1.2}
.dim{opacity:.6}
:focus{outline:none}
:focus-visible{outline:1px solid rgba(255,255,255,.8);outline-offset:4px;border-radius:2px}
html.grabbable{cursor:grab}
html.grabbing,html.grabbing *{cursor:grabbing!important}
html.pointer #strip{cursor:pointer}

/* canvas + strip */
#gl{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:1;opacity:0;transition:opacity .6s ease}
html.gl-on #gl{opacity:1}
#strip{position:fixed;inset:0;overflow:hidden;z-index:2}
.track{position:absolute;inset:0}
.card{position:absolute;left:0;top:0;display:block;border-radius:1.5rem;overflow:hidden;will-change:transform;background:#111;opacity:0;-webkit-user-drag:none}
@media (min-width:650px){.card{border-radius:2rem}}
.card img{width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
.card-meta{position:absolute;left:1.5rem;bottom:1.2rem;right:1.5rem;display:flex;justify-content:space-between;align-items:baseline;font-size:1.6rem;letter-spacing:-.05em;text-shadow:0 1px 12px rgba(0,0,0,.25)}
.card-k{font-size:max(1rem,10px);text-transform:uppercase;font-weight:500;letter-spacing:0;opacity:.8}
html.gl-on .card{opacity:0!important;pointer-events:none}
html.gl-on .card *{visibility:hidden}
html.no-gl .card{opacity:1;transition:opacity .8s ease}
html.no-gl .labels{display:none}
.labels{position:absolute;inset:0;pointer-events:none}
.clabel{position:absolute;left:0;top:0;display:flex;align-items:center;justify-content:space-between;gap:.8rem;transform-origin:0 100%;will-change:transform,opacity;opacity:0;white-space:nowrap}
.clabel-t{font-size:1.6rem;letter-spacing:-.05em;line-height:1;font-weight:450}
@media (min-width:650px){.clabel-t{font-size:1.8rem}}
.clabel-go{width:2.5rem;height:2.5rem;border-radius:50%;background:#000;color:#fff;display:grid;place-items:center;transform:scale(0);transition:transform .5s var(--ease)}
.clabel-go svg{width:.9rem;height:.9rem}
.clabel.on .clabel-go{transform:scale(1)}

/* corner ui */
.ui{position:fixed;inset:0;z-index:40;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between;padding:calc(2.5rem + env(safe-area-inset-top)) 2rem calc(2.5rem + env(safe-area-inset-bottom))}
@media (min-width:650px){.ui{padding:4rem 8rem}}
.ui-row{display:flex;justify-content:space-between;align-items:flex-start}
.ui-row.bottom{align-items:flex-end}
.hit{pointer-events:auto;position:relative}
.hit:before{content:"";position:absolute;inset:-1.8rem -1.5rem}
.fade{transition:opacity .3s ease-out}
@media (hover:hover) and (pointer:fine){.fade:hover{opacity:.6}}
.views{display:flex;gap:.5rem}
.views a{position:relative;opacity:.5;transition:opacity .5s ease-out}
.views a[aria-current]{opacity:1}
@media (hover:hover) and (pointer:fine){.views a:hover{opacity:1}}
.ui,.panel,#index{opacity:1}
html.loading .ui{opacity:0}
.ui{transition:opacity .8s ease .2s}

/* overlay panels */
.panel{position:fixed;left:50%;top:50%;z-index:30;width:42rem;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;text-align:center;pointer-events:none}
@media (min-width:650px){.panel{width:60rem}}
.panel[hidden]{display:flex!important;visibility:hidden}
.panel.open{visibility:visible}
.panel>*{opacity:0;transform:translateY(1.2rem);filter:blur(6px);transition:opacity .5s ease,transform .7s var(--ease),filter .6s ease}
.panel.open>*{opacity:1;transform:none;filter:none;pointer-events:auto}
.panel.open>*:nth-child(2){transition-delay:.08s}.panel.open>*:nth-child(3){transition-delay:.16s}.panel.open>*:nth-child(4){transition-delay:.24s}
.p-body{font-size:max(1.4rem,13px);line-height:1.4;letter-spacing:-.02em;max-width:35rem;user-select:text;-webkit-user-select:text}
@media (min-width:650px){.p-body{max-width:45rem}}
.p-body.narrow{max-width:30rem}
@media (min-width:650px){.p-body.narrow{max-width:32.5rem}}
.p-gap{margin-top:2.5rem}
@media (min-width:650px){.p-gap{margin-top:3rem}}
.p-links{display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem 2rem}
.p-links a{display:block;position:relative;transition:opacity .3s}
.p-links a:before{content:"";position:absolute;inset:-1rem}
@media (hover:hover) and (pointer:fine){.p-links a:hover{opacity:.6}}
.mailrow{display:flex;gap:.8rem;align-items:center;width:100%;max-width:26rem}
@media (min-width:650px){.mailrow{max-width:32rem}}
.mailpill{flex:1;min-width:0;height:4rem;border-radius:99px;background:#000;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);padding:0 2rem;text-align:left;font-size:max(1.4rem,14px);letter-spacing:-.02em;transition:box-shadow .3s}
.mailpill span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (hover:hover) and (pointer:fine){.mailpill:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}}
.mailgo{flex:none;width:4rem;height:4rem;border-radius:50%;background:#fff;color:#000;display:grid;place-items:center;transition:transform .5s var(--ease)}
.mailgo svg{width:1.1rem;height:1.1rem}
@media (hover:hover) and (pointer:fine){.mailgo:hover{transform:scale(1.08)}}
@media (min-width:650px){.mailpill,.mailgo{height:4.5rem}.mailgo{width:4.5rem}}
.status{margin-top:1.5rem;min-height:1.2em;opacity:.6}

/* index view */
#index{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;pointer-events:none}
#index[hidden]{display:flex!important;visibility:hidden}
#index.open{visibility:visible}
.ix{max-width:42rem;display:flex;flex-wrap:wrap;align-content:center;align-items:center;justify-content:center;gap:.6rem 2.4rem;padding:0 2rem}
@media (min-width:650px){.ix{max-width:90rem}}
.ix-item{position:relative;display:flex;opacity:0;transform:translateY(1.4rem);filter:blur(5px);transition:opacity .45s ease,transform .8s var(--ease),filter .5s ease;transition-delay:calc(var(--d) * 22ms)}
#index.open .ix-item{opacity:1;transform:none;filter:none}
.ix-item a{pointer-events:auto;white-space:nowrap;font-size:1.8rem;line-height:1.1;letter-spacing:-.05em;transition:opacity .35s}
@media (min-width:650px){.ix-item a{font-size:3rem}}
.ix-item i{position:absolute;left:100%;top:50%;margin-left:1.2rem;transform:translate(-50%,-50%);font-size:.8rem;font-style:normal;line-height:1}
.ix-item:last-child i{display:none}
@media (hover:hover) and (pointer:fine){.ix:hover .ix-item a{opacity:.35}.ix .ix-item a:hover{opacity:1}}
.ix-peek{position:fixed;left:0;top:0;width:22rem;aspect-ratio:3/2;border-radius:1.2rem;overflow:hidden;pointer-events:none;opacity:0;transform:translate3d(-50%,-50%,0) scale(.85);transition:opacity .35s ease,scale .5s var(--ease);z-index:-1}
.ix-peek img{width:100%;height:100%;object-fit:cover}
.ix-peek.on{opacity:1}
@media (hover:none),(pointer:coarse){.ix-peek{display:none}}

/* case sheet */
#case{position:fixed;inset:0;z-index:35;pointer-events:none}
#case[hidden]{display:block!important;visibility:hidden}
#case.open{visibility:visible}
.sheet{position:absolute;inset:1.5rem 2rem;background:#fff;color:#000;border-radius:1.5rem;overflow:hidden;display:flex;flex-direction:column;pointer-events:auto;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.sheet::-webkit-scrollbar{display:none}
@media (min-width:650px){.sheet{inset:2rem 5rem;border-radius:2rem;flex-direction:row;align-items:flex-start;gap:10rem;padding:4rem 12rem 0 4rem;overflow:hidden}}
.c-info{padding:4rem 2.5rem 0;display:flex;flex-direction:column;align-items:flex-start}
@media (min-width:650px){.c-info{flex:1;padding:0;position:sticky;top:0}}
.c-title{font-size:3.5rem;font-weight:400;line-height:1;letter-spacing:-.05em;white-space:nowrap}
@media (min-width:650px){.c-title{font-size:4.5rem}}
.c-desc{margin-top:1.5rem;max-width:40rem;font-size:max(1.4rem,14px);line-height:1.38;letter-spacing:-.035em;color:#111;user-select:text;-webkit-user-select:text}
@media (min-width:650px){.c-desc{margin-top:2rem;font-size:1.6rem}}
.c-pills{margin-top:3rem;display:flex;align-items:flex-start;gap:1.2rem}
@media (min-width:650px){.c-pills{margin-top:4.5rem}}
.c-tags{display:flex;flex-wrap:wrap;gap:.4rem}
.pill{display:inline-flex;align-items:center;justify-content:center;border-radius:99px;height:max(2.4rem,24px);padding:0 1.25em;background:#eee;color:#000;white-space:nowrap}
.pill.label{font-size:max(1rem,10px)}
a.pill.label{transition:background .3s}
@media (hover:hover) and (pointer:fine){a.pill.label:hover{background:#ddd}}
.pill.go{width:max(2.4rem,24px);padding:0;background:#000;color:#fff;transition:transform .5s var(--ease)}
.pill.go svg{width:.9rem;height:.9rem;min-width:9px;min-height:9px}
@media (hover:hover) and (pointer:fine){.pill.go:hover{transform:scale(1.12)}}
.c-media{display:flex;flex-direction:column;gap:3rem;padding:4rem 1rem 9rem;width:100%}
.c-media figure{flex:none;width:100%;border-radius:1rem;overflow:hidden;background:#f2f2f2}
.c-media img{width:100%;height:auto;transform:scale(1.06);transition:transform 1.4s var(--ease)}
#case.open .c-media img{transform:none}
@media (min-width:650px){.c-media{width:70rem;flex:none;gap:6rem;padding:0 0 4rem;height:100%;overflow-y:auto;scrollbar-width:none;overscroll-behavior:contain}.c-media::-webkit-scrollbar{display:none}.c-media figure{border-radius:1.2rem}}
.c-close{position:fixed;right:3.5rem;bottom:3rem;width:4rem;height:4rem;padding:0;background:#000;color:#fff;z-index:2}
.c-close svg{width:1.1rem;height:1.1rem}
@media (min-width:650px){.c-close{position:absolute;right:3rem;top:3rem;bottom:auto;width:4.5rem;height:4.5rem}}
.sheet>*{opacity:0;transition:opacity .5s ease}
#case.open.ready .sheet>*{opacity:1}
#case.open.ready .c-info{transition-delay:.05s}#case.open.ready .c-media{transition-delay:.15s}
.rel{position:absolute;top:10rem;bottom:10rem;width:2.5rem;background:#fff;opacity:0;pointer-events:none;transition:opacity .6s ease,transform .6s var(--ease)}
.rel.prev{left:-1rem;border-radius:0 2rem 2rem 0}.rel.next{right:-1rem;border-radius:2rem 0 0 2rem}
@media (min-width:650px){#case.open.ready .rel{opacity:.3;pointer-events:auto}#case.open.ready .rel:hover{opacity:.5}}

/* loader */
#loader{position:fixed;inset:0;z-index:99;background:#000;display:grid;place-items:center;transition:opacity .7s ease .1s}
#loader.done{opacity:0;pointer-events:none}
.bars{display:flex;gap:.8rem}
.bars i{display:block;width:5rem;height:max(.5rem,4px);border-radius:2rem;background:rgba(255,255,255,.18);position:relative;overflow:hidden;transition:transform .9s var(--io),opacity .5s}
.bars i:after{content:"";position:absolute;inset:0;background:#fff;border-radius:inherit;transform:scaleX(var(--p,0));transform-origin:0 50%;transition:transform .6s var(--ease)}
#loader.done .bars i{transform:scaleX(0)}

/* states */
html.dim-strip .clabel{opacity:0!important}
html.no-gl.dim-strip .card{opacity:.12!important}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important}}
html.case-open .ui{opacity:0;pointer-events:none;transition:opacity .4s ease}
html.case-open .ui *{pointer-events:none!important}
@media (max-width:649px){
 .ui:before,.ui:after{content:"";position:fixed;left:0;right:0;height:11rem;pointer-events:none;z-index:-1}
 .ui:before{top:0;background:linear-gradient(#000 0%,rgba(0,0,0,.82) 38%,rgba(0,0,0,0))}
 .ui:after{bottom:0;background:linear-gradient(0deg,#000 0%,rgba(0,0,0,.82) 38%,rgba(0,0,0,0))}
}
@media (hover:none),(pointer:coarse){.clabel-go{transform:scale(1)}}
.c-cover{position:absolute;inset:0;z-index:5;background:#000 center/cover no-repeat;pointer-events:none;opacity:1;transition:opacity .55s cubic-bezier(.4,0,.2,1)}
#case.open .sheet>.c-cover{opacity:1}
#case.open.ready .sheet>.c-cover{opacity:0}