@font-face{font-family:"Outfit";src:url(fonts/outfit-thin.woff2) format("woff2");font-weight:400;font-display:swap}   /* the Thin cut, used as the regular weight */
@font-face{font-family:"Outfit";src:url(fonts/outfit-semibold.woff2) format("woff2");font-weight:600;font-display:swap}   /* the section you are in */
@font-face{font-family:"Outfit";src:url(fonts/outfit-extralight.woff2) format("woff2");font-weight:200;font-display:swap}   /* ExtraLight for the smallest sizes */
@font-face{font-family:"OutfitB";src:url(fonts/outfit-regular.woff2) format("woff2");font-weight:400;font-display:swap}   /* phones: a sturdier cut */
@font-face{font-family:"OutfitB";src:url(fonts/outfit-light.woff2) format("woff2");font-weight:200;font-display:swap}
@font-face{font-family:"OutfitB";src:url(fonts/outfit-semibold.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Apercu";src:url(fonts/apercu.woff2) format("woff2");font-weight:400;font-display:swap}
@property --bg{syntax:"<color>";inherits:true;initial-value:#0d0d0f}
@property --fg{syntax:"<color>";inherits:true;initial-value:#efece4}
:root{transition:--bg 5s linear,--fg 5s linear}
:root{--bg:#0d0d0f;--fg:#efece4;--pad:clamp(16px,3vw,40px);--plot:"Outfit","Helvetica Neue",Arial,sans-serif;--sans:Apercu,"Helvetica Neue",Helvetica,Arial,sans-serif;--mono:var(--plot)}
*{box-sizing:border-box;margin:0}
html{background:var(--bg);color:var(--fg);-webkit-text-size-adjust:100%}
body{font:16px/1.5 var(--sans);background:var(--bg);color:var(--fg);letter-spacing:-.01em}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:.2em}
img{display:block;max-width:100%}
.m{font:12px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.06em;opacity:.7}
.label{font:12px/1 var(--mono);text-transform:uppercase;letter-spacing:.08em;padding:0 var(--pad);margin:0 0 20px}

.top{position:fixed;inset:0 0 auto 0;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:var(--pad) var(--pad) calc(var(--pad)*1.8);color:var(--fg);background:linear-gradient(to bottom,var(--bg) 0%,color-mix(in srgb,var(--bg) 72%,transparent) 55%,transparent 100%)}
.arch .top{background:none;color:#fff}
.arch .mark{background:#fff}
.mark{display:block;line-height:0;height:clamp(25px,2.95vw,37px);aspect-ratio:655/120.3;background:var(--fg);-webkit-mask:url(logo.svg) left center/contain no-repeat;mask:url(logo.svg) left center/contain no-repeat}
.mark img{visibility:hidden;height:100%;width:100%}
.top nav{display:flex;gap:clamp(14px,2.2vw,32px);font:400 12px/1 var(--plot);letter-spacing:.14em;text-transform:uppercase}
@media (max-width:760px){body:not(.home) main{padding-top:calc(var(--pad)*3.2 + 64px)}.top{flex-wrap:wrap;row-gap:10px}.top nav{font-size:10px;gap:12px;flex-wrap:wrap}.mark{height:31px}}
main{min-height:60vh}
body:not(.home) main{padding-top:calc(var(--pad) * 3.2)}

/* landing */
.hero{position:relative;height:100svh;min-height:520px}
#ghost{position:absolute;inset:0;width:100%;height:100%;display:none}
.gl #ghost{display:block}
.intro{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:max(50vw,260px);margin:0;line-height:0;color:var(--fg);pointer-events:none}
.intro .title{display:block;width:100%;height:auto;overflow:visible}
.gl .intro .title{visibility:hidden}
.intro .title path{fill:none;stroke:currentColor;stroke-width:1px;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.now{position:absolute;left:var(--pad);bottom:var(--pad);font:400 clamp(20px,2.2vw,30px)/1.1 var(--plot)}

/* featured */
.feat{display:block;position:relative;margin:0 0 6px}
.full{width:100%;height:100svh;object-fit:cover;background:color-mix(in srgb,var(--fg) 8%,var(--bg))}
.ph{background:color-mix(in srgb,var(--fg) 8%,var(--bg))}
.cap{position:absolute;left:var(--pad);bottom:var(--pad);right:var(--pad);display:grid;gap:4px;color:var(--fg);text-shadow:0 0 14px var(--bg),0 0 30px var(--bg)}
.cap h2{font:400 clamp(22px,4.2vw,59px)/1.05 var(--plot);letter-spacing:.05em;text-transform:uppercase}
.project .full{height:auto;aspect-ratio:16/9;margin:6px 0}

/* installations index */
.installs,.archive{padding:0 0 clamp(48px,9vw,120px)}
.journal{padding:clamp(48px,9vw,120px) 0}
.filters{padding:0 var(--pad);display:grid;gap:8px;margin-bottom:24px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips button{font:12px var(--mono);text-transform:uppercase;letter-spacing:.05em;background:none;color:inherit;border:1px solid color-mix(in srgb,var(--fg) 35%,transparent);padding:5px 10px;border-radius:99px;cursor:pointer}
.chips button.on{background:var(--fg);color:var(--bg)}
.index{list-style:none;padding:0}
.index li{border-top:1px solid color-mix(in srgb,var(--fg) 25%,transparent);position:relative}
.index li:last-child{border-bottom:1px solid color-mix(in srgb,var(--fg) 25%,transparent)}
.index a,.index .row{display:grid;grid-template-columns:5em 1fr 1fr 8em;gap:16px;padding:14px var(--pad);font-size:clamp(15px,1.6vw,22px)}
.index .row a.ext{display:inline;padding:0;background:none;font-size:inherit}
.index .row a.ext:hover{text-decoration:underline;text-underline-offset:.2em;background:none}
.index a:hover{text-decoration:none;background:color-mix(in srgb,var(--fg) 6%,transparent)}
.index .t{font:400 clamp(14px,1.7vw,22px)/1.1 var(--plot);letter-spacing:.06em;text-transform:uppercase}
.index .hover{position:fixed;right:var(--pad);top:50%;width:auto;max-width:min(36vw,520px);max-height:78vh;transform:translateY(-50%);opacity:0;pointer-events:none;transition:opacity .15s;z-index:4}
.index li:hover .hover{opacity:1}

/* archive */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:0;padding:0}
.tile{position:relative;display:block;aspect-ratio:3/4;overflow:hidden}
.tile img,.tile .ph{width:100%;height:100%;object-fit:cover}
.tile .hov{position:absolute;left:50%;top:50%;width:88%;transform:translate(-50%,-50%);text-align:center;font:24px/1.25 var(--mono);text-transform:uppercase;letter-spacing:.05em;opacity:0;transition:opacity .15s;color:#fff}
.tile:hover .hov,.tile:focus-visible .hov{opacity:1}
.tile:hover{text-decoration:none}

/* journal, project, plain */
.journal,.plain,.project{max-width:46rem;margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.project{max-width:none}
.project>*:not(.full):not(.vimeo){max-width:46rem;margin-left:auto;margin-right:auto}
.entry{padding:28px 0;border-top:1px solid color-mix(in srgb,var(--fg) 25%,transparent)}
.entry h2,.project h1,.plain h1{font:400 clamp(25px,4.2vw,56px)/1.05 var(--plot);letter-spacing:.05em;text-transform:uppercase;margin:6px 0 14px}
.entry p+p,.body p+p,.plain p+p{margin-top:1em}
.specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:12px;margin:20px 0}
.specs dt{font:11px var(--mono);text-transform:uppercase;opacity:.6}
.body{margin-bottom:24px}

/* footer: hidden, pops up at the bottom edge */
.foot{display:grid;grid-template-columns:repeat(2,auto);justify-content:space-between;gap:var(--pad);padding:var(--pad);border-top:1px solid color-mix(in srgb,var(--fg) 25%,transparent);font-size:14px;background:var(--bg)}
.js .foot{position:fixed;left:0;right:0;bottom:0;z-index:6;transform:translateY(101%);transition:transform .25s ease;visibility:hidden}
.js .foot.open,.js .foot:focus-within{transform:none;visibility:visible}
.foot-tab{position:fixed;left:50%;bottom:6px;transform:translateX(-50%);z-index:5;background:none;border:0;color:var(--fg);font:16px/1 var(--mono);letter-spacing:.2em;padding:8px 14px;opacity:.5;cursor:pointer;color:var(--fg);text-shadow:0 0 14px var(--bg),0 0 30px var(--bg)}
.plain.legal{padding-bottom:calc(var(--pad)*6)}
.plain.legal h2{font-size:18px;letter-spacing:-.01em;margin:1.6em 0 .4em}
.plain.legal h1{margin-bottom:.6em}

@media (max-width:760px){
  .tiles{grid-template-columns:1fr 1fr}
  .index a,.index .row{grid-template-columns:1fr;row-gap:2px}
  .index a span:first-child,.index .row span:first-child{font-size:.78em;opacity:.7;letter-spacing:.06em}
  .index a span:nth-child(n+3),.index .row span:nth-child(n+3){font-size:.8em;opacity:.7}
  .index .hover{display:none}
  .foot{grid-template-columns:1fr 1fr}
}

.vimeo{display:block;width:100%;aspect-ratio:16/9;border:0;margin:6px 0;background:color-mix(in srgb,var(--fg) 10%,var(--bg));color:inherit;cursor:pointer;font:12px var(--mono);text-transform:uppercase;letter-spacing:.08em}
button.vimeo:hover{background:color-mix(in srgb,var(--fg) 16%,var(--bg))}

.sub{font:400 clamp(22px,2.6vw,34px)/1.15 var(--plot);letter-spacing:.02em;margin:-2px 0 14px}

.reel{position:relative;height:100svh;margin:0 0 6px;overflow:hidden}
.reel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:color-mix(in srgb,var(--fg) 8%,var(--bg))}
.reel .cap a,.reel a.cap{color:var(--fg)}

.prov{position:absolute;right:var(--pad);bottom:var(--pad);white-space:nowrap;text-align:right;font:400 11px/1.4 var(--plot);letter-spacing:.14em;text-transform:uppercase;opacity:.6}
@media (max-width:760px){.prov{left:var(--pad);right:auto;text-align:left;bottom:calc(var(--pad) + 2em)}.prov .pd{display:none}}
.gl #hero{cursor:grab;-webkit-user-select:none;user-select:none}
.gl #hero.dragging{cursor:grabbing}
.hint{position:absolute;left:50%;transform:translateX(-50%);bottom:var(--pad);font:400 11px/1.4 var(--plot);letter-spacing:.14em;text-transform:uppercase;opacity:.6;transition:opacity 1.2s;white-space:nowrap;pointer-events:none}
.hint.gone{opacity:0}
@media (max-width:760px){.hint{left:var(--pad);transform:none;bottom:var(--pad)}}
@media (prefers-reduced-motion:reduce){:root{transition:none}}
body.arch main{padding-top:0}
.arch .label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.top nav,.prov,.hint,.label,.foot-tab{font-weight:200}
.top{gap:clamp(16px,2vw,32px)}
.brand{display:flex;align-items:center;gap:clamp(14px,1.8vw,26px);min-width:0}
.top nav{flex:none}
.mark{flex:none}
.byline{font:200 12px/1.35 var(--plot);letter-spacing:.14em;text-transform:uppercase;min-width:0;text-wrap:balance}
@media (max-width:760px){.byline{font-size:9px;white-space:normal;max-width:16em}}
@media (max-width:760px){body:not(.home) main{padding-top:calc(var(--pad)*3.2 + 56px)}body.arch main{padding-top:0}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.top nav a[aria-current]{font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.45em}
@media (max-width:760px){:root{--plot:"OutfitB","Helvetica Neue",Arial,sans-serif}}
/* project pages: title on the left, small; pictures and films edge to edge, touching */
.project{padding-left:0;padding-right:0}
.project>*:not(.full):not(.vimeo){max-width:46rem;margin-left:0;margin-right:auto;padding-left:var(--pad);padding-right:var(--pad)}
.project h1{font-size:clamp(17px,2.8vw,37px);margin:0 auto .35em 0}
.project .sub{font-size:clamp(15px,1.73vw,23px)}
.project .body{margin-bottom:clamp(56px,8vw,130px)}
.project .full{display:block;width:100%;height:auto;aspect-ratio:auto;object-fit:initial;background:none;margin:0}
.project .vimeo{margin:0;border:0}
body.proj main{padding-top:calc(var(--pad)*3.2 + clamp(70px,9vw,150px))}
@media (max-width:760px){body.proj main{padding-top:calc(var(--pad)*3.2 + 130px)}}
/* journal and studio: the installations logic */
.index.prose .row{grid-template-columns:9em minmax(0,44rem)}
.index.prose .row>span:nth-child(2) p+p,.index.prose .row>span:nth-child(2) .t+p{margin-top:.8em}
.index.prose .row>span:nth-child(2) .t{display:block}
.index.prose .row>span:first-child{opacity:.7}
@media (max-width:760px){.index.prose .row{grid-template-columns:1fr}.index.prose .row>span:first-child:empty{display:none}}
/* landing: one full-screen still per page, a small title in the lower third */
.still{position:relative;height:100svh;overflow:hidden;background:#000}
.still img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.still .cap{position:absolute;left:var(--pad);right:auto;top:66%;bottom:auto;display:block;color:#fff;font:200 clamp(11px,1.15vw,15px)/1.3 var(--plot);letter-spacing:.14em;text-transform:uppercase;text-shadow:none}
.still a.cap:hover{text-decoration:underline;text-underline-offset:.4em;text-decoration-thickness:1px}

/* landing: each page snaps to the edge, no fade behind the header, pages fill the window even when the phone's address bar moves */
html:has(body.home){scroll-snap-type:y proximity}
body.home .hero,body.home .still{scroll-snap-align:start}
body.home .top{background:none}
.hero{height:100svh;height:100dvh;min-height:520px}
.still{height:100svh;height:100dvh}
.vimeo{position:relative;overflow:hidden;color:#fff}
.vimeo .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vimeo span{position:relative;font:200 clamp(11px,1.15vw,15px)/1 var(--plot);letter-spacing:.14em;text-transform:uppercase}
.project button.vimeo:hover span{text-decoration:underline;text-underline-offset:.4em;text-decoration-thickness:1px}