@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Inter:wght@300;400;500&display=swap');

:root{
  --black:#0a0a0a;
  --graphite:#141314;
  --paper:#dedbd8;
  --muted:#8b8789;
  --wine:#744955;
  --wine-light:#9c6c79;
  --line:rgba(255,255,255,.11);
  --ease:cubic-bezier(.22,.75,.22,1);
  color-scheme:dark;
  font-size:16px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--black)}
body{margin:0;background:var(--black);color:var(--paper);font-family:Inter,Arial,sans-serif;font-weight:300;line-height:1.4;overflow-x:hidden}
body.is-dialog-open,body.is-nav-open{overflow:hidden}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
button{color:inherit}
img{max-width:100%}

body::before,body::after{content:"";position:fixed;z-index:3;pointer-events:none;opacity:.6;will-change:transform}
body::before{top:0;bottom:0;left:31vw;width:1px;background:rgba(255,255,255,.085);transform:translateY(var(--line-y,0))}
body::after{left:0;right:0;top:68vh;height:1px;background:rgba(255,255,255,.07);transform:translateX(var(--line-x,0))}

.ambient{position:fixed;z-index:0;inset:0;background:#0c0c0c;overflow:hidden}
.ambient__image{position:absolute;inset:12vh 3vw auto auto;width:min(50vw,52rem);height:min(52vh,28rem);background-position:center;background-size:contain;background-repeat:no-repeat;filter:grayscale(.3) sepia(.05) saturate(.82) contrast(1.02) brightness(.88);opacity:.36;transform:scale(1.015);-webkit-mask-image:radial-gradient(ellipse 82% 76% at 56% 50%,#000 20%,rgba(0,0,0,.84) 42%,rgba(0,0,0,.34) 65%,transparent 91%);mask-image:radial-gradient(ellipse 82% 76% at 56% 50%,#000 20%,rgba(0,0,0,.84) 42%,rgba(0,0,0,.34) 65%,transparent 91%);transition:opacity 1.2s ease,background-image 1.2s ease,filter .8s ease,transform 7s linear}
.ambient__image.is-changing{opacity:0}
.ambient__image.is-trailer{inset:-3%;width:auto;height:auto;background-size:cover;opacity:.54;filter:grayscale(.52) contrast(1.1) brightness(.5);transform:scale(1.06);-webkit-mask-image:linear-gradient(#000,#000);mask-image:linear-gradient(#000,#000)}
.ambient__veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,8,8,.37),rgba(10,9,10,.31) 40%,rgba(10,10,10,.56)),radial-gradient(circle at 85% 22%,rgba(95,50,65,.11),transparent 42%),linear-gradient(105deg,rgba(9,9,9,.2),transparent 48%,rgba(9,9,9,.15))}

.header{position:fixed;z-index:30;inset:0 0 auto;height:104px;display:flex;align-items:flex-start;justify-content:space-between;padding:14px 2vw;background:linear-gradient(180deg,rgba(10,10,10,.93),rgba(10,10,10,.38) 66%,transparent)}
.header--solid{background:rgba(10,10,10,.96);border-bottom:1px solid var(--line)}
.corner-mark{display:block;width:clamp(14.4rem,18vw,18rem);line-height:0;flex:none}
.corner-mark--esther{width:clamp(5rem,6vw,5.9rem)}
.corner-mark--stephan{width:clamp(6.2rem,7vw,6.8rem)}
.corner-mark img,.corner-mark svg{display:block;width:100%;height:auto}.corner-mark svg{overflow:visible}
.corner-mark .mark-stroke{stroke-dasharray:1;stroke-dashoffset:0}
.corner-mark .mark-complete{opacity:1}
.corner-mark.is-drawing .mark-stroke{animation:draw 1.5s var(--ease) calc(var(--i)*60ms) both}
.corner-mark.is-drawing .mark-type,.corner-mark.is-drawing .mark-tagline{animation:type-in .65s ease 1.25s both}
.corner-mark.is-drawing .mark-complete{animation:mark-complete .14s ease 1.82s both}
@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes type-in{from{opacity:0}to{opacity:1}}
@keyframes mark-complete{from{opacity:0}to{opacity:1}}
.primary-nav{display:flex;align-items:center;gap:clamp(1.15rem,2.4vw,2.9rem);padding-top:.5rem;margin-left:auto;margin-right:4.5rem}
.primary-nav a,.nav-toggle,.quiet-link{font:400 .68rem/1 DM Mono,monospace;text-transform:uppercase;letter-spacing:.16em;color:#918d8f;transition:color .25s ease}
.primary-nav a:hover,.primary-nav a:focus-visible,.primary-nav a.is-current,.quiet-link:hover{color:var(--wine-light)}
.nav-toggle{display:none;border:0;background:none;padding:.55rem 0;cursor:pointer}
.quiet-link{margin-top:.5rem}
.mobile-nav{position:fixed;z-index:25;inset:0;background:#090909;padding:120px 1rem 2rem;display:flex;flex-direction:column;justify-content:center;transform:translateY(-102%);transition:transform .65s var(--ease)}
.mobile-nav.is-open{transform:none}
.mobile-nav a{font-size:clamp(2rem,11vw,4rem);font-weight:300;line-height:1.1;letter-spacing:.01em;text-transform:uppercase;color:#807b7e;border-bottom:1px solid var(--line);padding:.35rem 0}

main{position:relative;z-index:5}
.together{min-height:100svh;padding:132px 2vw 5rem}
.together__head{min-height:42svh;display:flex;align-items:end;justify-content:space-between;gap:2rem;margin-bottom:1.4rem}
.together__head h1{margin:0;font:300 clamp(1.5rem,3.2vw,3.6rem)/1 Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#837e80}
.together__head p,.profile__title p{margin:0;font:400 .62rem/1.4 DM Mono,monospace;text-transform:uppercase;letter-spacing:.14em;color:#777275}

.trailer-grid{display:grid;gap:1px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.1)}
.trailer-grid--together{grid-template-columns:repeat(3,minmax(0,1fr))}
.trailer-grid--profile{grid-template-columns:repeat(3,minmax(0,1fr))}
.home-project-group+.home-project-group{margin-top:5rem}
.home-project-group>h2{margin:0 0 1rem;font:400 .68rem/1 DM Mono,monospace;text-transform:uppercase;letter-spacing:.2em;color:#817b7e}
.trailer-card{position:relative;aspect-ratio:16/9;overflow:hidden;background:#111;border:0;padding:0;color:var(--paper);cursor:pointer;text-align:left;isolation:isolate}
.trailer-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(.72) contrast(1.08) brightness(.55);transform:scale(1.015);transition:filter .45s ease,transform .65s var(--ease),opacity .35s ease}
.trailer-card::before{content:"";position:absolute;z-index:1;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.12) 25%,rgba(0,0,0,.82) 100%);transition:background .35s ease}
.trailer-card::after{content:"↗";position:absolute;z-index:2;right:.75rem;top:.65rem;font:400 .62rem/1 DM Mono,monospace;color:rgba(255,255,255,.5)}
.trailer-card:hover img,.trailer-card:focus-visible img{filter:grayscale(.25) contrast(1.05) brightness(.72);transform:scale(1.04)}
.trailer-card:hover::before,.trailer-card:focus-visible::before{background:linear-gradient(180deg,rgba(70,35,48,.08),rgba(18,8,12,.76))}
.trailer-card:focus-visible{outline:1px solid var(--wine-light);outline-offset:-1px}
.trailer-card__meta{position:absolute;z-index:2;left:.78rem;right:2.2rem;bottom:.68rem}
.trailer-card__meta strong{display:block;font:400 clamp(.72rem,.9vw,.88rem)/1.2 DM Mono,monospace;text-transform:uppercase;letter-spacing:.08em}
.trailer-card__meta small{display:block;margin-top:.32rem;font:300 .58rem/1.25 DM Mono,monospace;text-transform:uppercase;letter-spacing:.08em;color:#a29da0}
.trailer-card--empty{cursor:default;background:linear-gradient(145deg,#0c0c0c,#1a1718)}
.trailer-card--empty::after{content:"—"}
.trailer-card--empty::before{background:radial-gradient(circle at 70% 25%,rgba(105,65,77,.18),transparent 45%)}
.trailer-card--empty .trailer-card__meta{bottom:auto;top:50%;transform:translateY(-50%)}
.trailer-card--still{cursor:default}
.trailer-card--still::after{content:""}
.trailer-card--still img{object-fit:cover;filter:grayscale(.42) contrast(1.05) brightness(.62)}
.trailer-card--portrait img{object-fit:contain;background:#0b0b0b;transform:none}
.trailer-card--portrait:hover img{transform:none}
.trailer-card--vimeo{background:radial-gradient(circle at 78% 22%,#4f3540,transparent 42%),linear-gradient(145deg,#111,#211b1d)}

.people-index{min-height:84svh;padding:9rem 2vw 4rem;display:flex;flex-direction:column;justify-content:center;background:transparent}
.people-index a{display:flex;align-items:end;justify-content:space-between;padding:1rem 0;border-bottom:1px solid rgba(255,255,255,.075);color:#4f4c4e;transition:color .35s ease,padding .35s var(--ease),background .35s ease}
.people-index a:first-child{border-top:1px solid rgba(255,255,255,.075)}
.people-index a:hover,.people-index a:focus-visible{color:#8c5f6c;padding-inline:.55rem;background:linear-gradient(90deg,rgba(91,43,57,.12),transparent 72%)}
.people-index span{font-size:clamp(2.2rem,6.1vw,7rem);font-weight:300;line-height:.9;letter-spacing:.025em;text-transform:uppercase}
.people-index small{font:400 .61rem/1.3 DM Mono,monospace;text-transform:uppercase;letter-spacing:.14em;color:#5f5a5d}
.people-index__beyond span{font-size:clamp(1.35rem,3vw,3.25rem);color:#454043}

.profile{padding:122px 2vw 6rem}
.profile__title{min-height:34svh;display:flex;flex-direction:column;justify-content:end;border-bottom:1px solid var(--line);padding-bottom:1.6rem;margin-bottom:2rem}
.profile__title h1{margin:1.2rem 0 0;font-size:clamp(3.3rem,8.8vw,9rem);font-weight:300;line-height:.84;letter-spacing:.035em;text-transform:uppercase;color:#555153}
.project-group+.project-group{margin-top:7rem}
.project-group>h2{margin:0 0 1rem;font:400 .68rem/1 DM Mono,monospace;text-transform:uppercase;letter-spacing:.18em;color:#807a7d}
.private-entry{margin-top:8rem;padding:2rem 0 1rem;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:2rem;color:#8a8588}
.private-entry p{margin:0;font-size:.88rem;letter-spacing:.04em}
.private-entry a{font:400 .7rem/1.2 DM Mono,monospace;text-transform:uppercase;letter-spacing:.13em;color:var(--wine-light);border-bottom:1px solid currentColor;padding-bottom:.35rem}
.private-entry p a{font:inherit;text-transform:none;letter-spacing:inherit;padding-bottom:.18rem}

.footer{position:relative;z-index:5;min-height:104px;padding:2rem;display:grid;grid-template-columns:1fr minmax(18rem,2fr) 1fr;align-items:center;gap:2rem;border-top:1px solid var(--line);background:#0a0a0a;font:400 .61rem/1.55 DM Mono,monospace;text-transform:uppercase;letter-spacing:.09em;color:#6f6a6d}
.footer>p{margin:0;text-align:center;text-transform:none;letter-spacing:.05em}
.footer>p a{color:#8f5f6d;border-bottom:1px solid currentColor}
.footer>a:last-child{text-align:right}

.trailer-dialog{width:min(74vw,1180px);max-width:none;padding:0;border:1px solid rgba(255,255,255,.2);background:#050505;color:var(--paper);box-shadow:0 30px 120px rgba(0,0,0,.75)}
.trailer-dialog::backdrop{background:rgba(4,4,4,.38);backdrop-filter:blur(2px)}
.trailer-dialog__bar{height:44px;display:flex;align-items:center;justify-content:space-between;padding:0 .85rem;border-bottom:1px solid var(--line)}
.trailer-dialog__bar p,.trailer-dialog__bar button,.trailer-dialog__bar a{margin:0;font:400 .62rem/1 DM Mono,monospace;text-transform:uppercase;letter-spacing:.13em}
.trailer-dialog__bar p{color:#8c8689}
.trailer-dialog__bar button{border:0;background:none;cursor:pointer;color:#a76f7e}
.trailer-dialog__bar>div{display:flex;align-items:center;gap:1.2rem}
.trailer-dialog__bar a{color:#777174;transition:color .25s ease}.trailer-dialog__bar a:hover{color:#b17a89}
.trailer-player{aspect-ratio:16/9;background:#000}
.trailer-player iframe{display:block;width:100%;height:100%;border:0}

.private-archive{min-height:100svh;padding:140px 2vw 0;display:block}
.private-archive>header{margin:0 0 clamp(6rem,11vw,11rem)}
.private-archive>header>p{margin:0;font:400 .65rem/1.3 DM Mono,monospace;text-transform:uppercase;letter-spacing:.14em;color:#726d70}
.private-archive h1{margin:1rem 0 0;font-size:clamp(3rem,7vw,7rem);font-weight:300;line-height:.88;letter-spacing:.035em;text-transform:uppercase;color:#565153}
.archive-access-note{display:inline-block;margin-top:2rem;max-width:35rem;font:400 .7rem/1.6 DM Mono,monospace;text-transform:uppercase;letter-spacing:.11em;color:var(--wine-light);border-bottom:1px solid currentColor;padding-bottom:.2rem}
.archive-section{border-top:1px solid var(--line);padding-top:1rem;margin-top:8rem}
.archive-section:first-of-type{margin-top:0}
.archive-section__head{display:grid;grid-template-columns:4rem 1fr auto;align-items:baseline;gap:1rem;margin-bottom:3rem}
.archive-section__head p,.archive-section__head h2{margin:0;font:400 .67rem/1.4 DM Mono,monospace;text-transform:uppercase;letter-spacing:.16em}
.archive-section__head p{color:#595558}.archive-section__head h2{color:#8c8789}
.archive-section__head a{font:400 .63rem/1.4 DM Mono,monospace;text-transform:uppercase;letter-spacing:.11em;color:var(--wine-light);border-bottom:1px solid currentColor;padding-bottom:.2rem}
.vita-list{max-width:76rem;margin-left:auto}
.vita-entry{display:grid;grid-template-columns:minmax(6rem,10vw) 1fr;gap:clamp(1rem,4vw,5rem);padding:1.8rem 0 2rem;border-top:1px solid rgba(255,255,255,.075)}
.vita-entry:last-child{border-bottom:1px solid rgba(255,255,255,.075)}
.vita-entry>time{font:400 .7rem/1.35 DM Mono,monospace;letter-spacing:.09em;color:#696467}
.vita-entry>time small{display:block;margin-top:.35rem;font-size:.62rem;color:#4f4b4d;text-transform:uppercase}
.vita-entry__body>p{margin:0 0 .4rem;font:400 .62rem/1.4 DM Mono,monospace;text-transform:uppercase;letter-spacing:.13em;color:#706b6e}
.vita-entry h3{margin:0;font:300 clamp(.96rem,1.45vw,1.28rem)/1.3 Inter,sans-serif;letter-spacing:.025em;text-transform:uppercase;color:#a09b9d}
.vita-entry dl{margin:.8rem 0 0;display:grid;gap:.24rem;font-size:.78rem;line-height:1.5;color:#7a7578}
.vita-entry dl div{display:grid;grid-template-columns:9rem 1fr;gap:1rem}.vita-entry dt{font:400 .65rem/1.55 DM Mono,monospace;text-transform:uppercase;letter-spacing:.08em;color:#545053}.vita-entry dd{margin:0}
.archive-section--concepts{margin-top:clamp(9rem,15vw,15rem)}
.concept-archive-grid{display:block;width:100vw;margin-left:calc(50% - 50vw);background:#080808;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.concept-archive-grid figure{position:relative;margin:0;width:100%;height:100svh;min-height:36rem;display:grid;place-items:center;background:#080808;border-top:1px solid rgba(255,255,255,.055);overflow:hidden}
.concept-archive-grid figure::after{content:"";position:absolute;z-index:1;inset:0;background:linear-gradient(180deg,rgba(8,8,8,.2),rgba(8,8,8,.08) 48%,rgba(8,8,8,.36)),radial-gradient(circle at 82% 24%,rgba(93,48,62,.07),transparent 48%);pointer-events:none}
.concept-archive-grid img{position:relative;z-index:0;display:block;width:min(92vw,100rem);height:min(86svh,62rem);object-fit:contain;opacity:.34;filter:grayscale(.3) sepia(.05) saturate(.82) contrast(1.02) brightness(.82);transform:scale(1.015);pointer-events:none;-webkit-user-drag:none;-webkit-mask-image:radial-gradient(ellipse 83% 78% at 53% 50%,#000 20%,rgba(0,0,0,.84) 43%,rgba(0,0,0,.34) 68%,transparent 94%);mask-image:radial-gradient(ellipse 83% 78% at 53% 50%,#000 20%,rgba(0,0,0,.84) 43%,rgba(0,0,0,.34) 68%,transparent 94%);transition:opacity .8s ease,filter .8s ease,transform 8s linear}
.concept-archive-grid figure:hover img{opacity:.39;filter:grayscale(.2) sepia(.03) saturate(.88) contrast(1.02) brightness(.86);transform:scale(1.022)}
.concept-archive-grid figcaption{position:absolute;z-index:2;left:2vw;right:2vw;bottom:1.25rem;display:flex;justify-content:space-between;font:400 .62rem/1 DM Mono,monospace;text-transform:uppercase;letter-spacing:.12em;color:rgba(255,255,255,.34)}
.archive-contact{display:flex;justify-content:space-between;align-items:center;gap:2rem;margin-top:7rem;padding-top:1.5rem;border-top:1px solid var(--line);font:300 .78rem/1.5 Inter,sans-serif;color:#7f7a7d}
.archive-contact a{font:400 .65rem/1.4 DM Mono,monospace;text-transform:uppercase;letter-spacing:.1em;color:var(--wine-light);border-bottom:1px solid currentColor;padding-bottom:.2rem}

@media(max-width:1050px){.trailer-grid--together,.trailer-grid--profile{grid-template-columns:repeat(3,minmax(0,1fr))}.primary-nav{gap:1.1rem;margin-right:2rem}.primary-nav a{letter-spacing:.1em}}
@media(max-width:760px){
  body::before{left:72vw}body::after{top:74vh}
  .ambient__image{inset:14vh 1rem auto auto;width:74vw;height:31vh;opacity:.31;-webkit-mask-image:radial-gradient(ellipse 88% 78% at 58% 50%,#000 20%,rgba(0,0,0,.8) 42%,rgba(0,0,0,.28) 66%,transparent 92%);mask-image:radial-gradient(ellipse 88% 78% at 58% 50%,#000 20%,rgba(0,0,0,.8) 42%,rgba(0,0,0,.28) 66%,transparent 92%)}
  .header{height:88px;padding:10px 1rem}.corner-mark{width:13.67rem}.corner-mark--esther{width:5rem}.corner-mark--stephan{width:6.2rem}.primary-nav{display:none}.nav-toggle{display:block}
  .together{padding:108px 1rem 4rem}.together__head{min-height:32svh;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end}.together__head p{margin-top:.75rem}.home-project-group+.home-project-group{margin-top:3.5rem}
  .trailer-grid--together{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;background:none;border:0;gap:.5rem;margin-inline:-1rem;padding-inline:1rem;scrollbar-width:none}
  .trailer-grid--together .trailer-card{min-width:82vw;scroll-snap-align:start;border:1px solid var(--line)}
  .profile{padding:108px 1rem 4rem}.profile__title{min-height:28svh}.profile__title h1{font-size:clamp(2.45rem,14vw,5rem);letter-spacing:.02em}.project-group+.project-group{margin-top:5rem}
  .trailer-grid--profile{grid-template-columns:repeat(2,minmax(0,1fr))}.trailer-card__meta strong{font-size:.66rem}.trailer-card__meta small{display:none}
  .people-index{padding:6rem 1rem 3rem;min-height:65svh}.people-index span{font-size:clamp(1.75rem,10vw,4rem)}.people-index small{display:none}
  .private-entry{display:block;margin-top:5rem}.private-entry a{display:inline-block;margin-top:1.4rem}.private-entry p a{margin-top:0}
  .footer{padding:1.5rem 1rem;grid-template-columns:1fr auto}.footer>p{grid-column:1/-1;grid-row:1;text-align:left}.footer>a{grid-row:2}.footer>a:last-child{text-align:right}
  .trailer-dialog{width:calc(100vw - 1rem)}
  .private-archive{padding:118px 1rem 0}.private-archive>header{margin-bottom:6rem}.archive-section{margin-top:5rem}.archive-section__head{grid-template-columns:2.5rem 1fr;gap:.6rem}.archive-section__head a{grid-column:2;margin-top:.5rem;justify-self:start}.vita-entry{grid-template-columns:4.2rem 1fr;gap:1rem;padding-block:1.5rem}.vita-entry h3{font-size:.94rem}.vita-entry dl{font-size:.76rem}.vita-entry dl div{grid-template-columns:6.5rem 1fr;gap:.7rem}.concept-archive-grid figure{height:100svh;min-height:32rem}.concept-archive-grid img{width:94vw;height:82svh;opacity:.31}.concept-archive-grid figcaption{left:1rem;right:1rem;bottom:1rem}.archive-contact{display:block;margin-top:5rem;padding-bottom:3rem}.archive-contact a{display:inline-block;margin-top:1.2rem}
}
@media(max-width:430px){.trailer-grid--profile{grid-template-columns:1fr}.trailer-card__meta small{display:block}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.ambient__image,.corner-mark .mark-stroke,.corner-mark .mark-type,.corner-mark .mark-tagline,.corner-mark .mark-complete,.trailer-card img,.mobile-nav{transition:none!important;animation:none!important}}