@font-face{font-family:Instrument;src:url('assets/InstrumentSans.ttf') format('truetype');font-weight:400 700;font-display:swap}
:root{--paper:#fff;--ink:#000;--gutter:25px;--radius:15px;--ease:cubic-bezier(.16,1,.3,1);--grain-opacity:.16}
*{box-sizing:border-box}
html{background:var(--ink);scrollbar-width:thin;scrollbar-color:#777 var(--ink);overflow-anchor:none}
body{position:relative;margin:0;background:var(--ink);color:var(--paper);font-family:Instrument,Arial,sans-serif;font-size:14px;font-weight:600;line-height:1.35;-webkit-font-smoothing:antialiased}
::selection{background:var(--paper);color:var(--ink)}
a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}img{display:block;width:100%;height:100%;object-fit:cover}
button,a{-webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible{outline:2px solid var(--paper);outline-offset:6px}main:focus{outline:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;top:-80px;left:24px;padding:12px 20px;background:var(--paper);color:var(--ink);z-index:120}.skip-link:focus{top:15px}
.site-header{position:fixed;inset:0 0 auto;z-index:60;min-height:84px;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.72),rgba(0,0,0,.55) 48px,transparent)}
.site-header a{pointer-events:auto}
.desktop-nav{display:grid;grid-template-columns:5fr 9fr 6fr 4fr;padding:15px var(--gutter);text-transform:uppercase;line-height:20px}
.desktop-nav a{width:fit-content;position:relative}.desktop-nav a:nth-child(n+3){justify-self:end}
.desktop-nav span:after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.desktop-nav a:hover span:after,.desktop-nav a[aria-current=page] span:after{transform:scaleX(1)}
.compact-mark{position:absolute;top:12px;left:50%;transform:translateX(-50%);font-size:22px;font-weight:500;line-height:1;letter-spacing:-.04em;opacity:0;visibility:hidden;transition:opacity .2s;white-space:nowrap}
.compact-mark.visible{opacity:1;visibility:visible}
/* The track spans the whole document so the sticky mark scrolls with the page, on the
   compositor, until it pins near the top; app.js only sets its scale. */
.mark-track{position:absolute;inset:0;z-index:70;overflow:clip;pointer-events:none}
.viewport-probe{position:fixed;top:0;left:0;width:0;height:100svh;visibility:hidden;pointer-events:none}
.wordmark{position:sticky;top:var(--mark-stick,10px);display:block;width:var(--mark-width,76vw);margin:var(--mark-start,40svh) auto 0;transform-origin:50% 0;color:var(--paper);pointer-events:none;will-change:transform}
.wordmark[hidden]{display:none}.wordmark svg{display:block;width:100%;height:auto;overflow:visible;fill:currentColor}
.wordmark text{font-family:Instrument,Arial,sans-serif;font-size:350px;font-weight:500;letter-spacing:-.04em}
.logo-caption{display:block;opacity:0;text-align:center;font-size:12px;line-height:15px;padding-top:8px;transform:scale(var(--caption-scale,1));transform-origin:50% 0;transition:opacity .3s}
/* Hero motion over the first 500px of scroll, run by the browser in step with the
   scroll (keyframes for the mark and the rise are written by app.js measureHero). */
@keyframes hero-zoom{to{transform:scale(1.2)}}
@keyframes hero-fade{to{opacity:0}}
@supports (animation-timeline: scroll()){
 .collection-view .wordmark,.hero-media,.hero-media img{animation-timing-function:linear;animation-fill-mode:both;animation-duration:auto;animation-timeline:scroll(root);animation-range:0px 500px}
 .collection-view .wordmark{animation-name:mark-shrink}
 .hero-media{animation-name:hero-fade}
 .hero-media img{animation-name:hero-zoom}
}
/* Desktop only: the collection rises to meet the mark (phones keep it still). */
@supports (animation-timeline: scroll()){
 @media(min-width:1025px){
  .project-list,.collection-end{animation:collection-rise linear both;animation-timeline:scroll(root);animation-range:0px 500px}
 }
}
.wordmark.settled{pointer-events:auto}.wordmark.settled .logo-caption{opacity:1}
.hero{position:relative;z-index:0;height:100svh;isolation:isolate}
.hero-media{position:fixed;inset:0;overflow:hidden;isolation:isolate;pointer-events:none}
.hero-media img{filter:grayscale(1);object-position:50% 45%;transform:scale(1);will-change:transform}
.hero-media:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.15) 0%,rgba(0,0,0,.03) 40%,rgba(0,0,0,.68) 100%);pointer-events:none}
.hero-media:before,.project-images figure:after,.detail-media:after,.detail-lead:after,.contact-portrait:after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background-image:var(--film-grain);background-repeat:repeat;background-size:192px 192px;mix-blend-mode:soft-light;opacity:var(--grain-opacity)}
.project-list{position:relative;z-index:1;padding-top:60px;background:var(--ink)}
.project{position:relative;width:var(--dw);margin:0 auto 40px;isolation:isolate;border-radius:15px}
.project:first-child{margin-bottom:20px}
.project-link{display:block;position:relative;isolation:isolate;border-radius:inherit}
.project-frame{position:relative;transform:scale(1);clip-path:inset(0 round 15px);transition:transform 1.6s var(--ease),clip-path 1.6s var(--ease)}
.project-images{display:flex;justify-content:center;gap:20px}
.project-images figure{position:relative;isolation:isolate;flex:var(--df);min-width:0;height:var(--dh);aspect-ratio:var(--dr);margin:0;overflow:hidden;border-radius:15px;background:#171717}
.project.d-single figure+figure{display:none}
.project-images img{transition:transform 1s var(--ease)}
@media(min-width:1025px) and (hover:hover){
 .project-link:hover .project-frame,.project-link:focus-visible .project-frame{transform:scale(.95);clip-path:inset(0 round 80px)}
 .project-link:hover .project-images img,.project-link:focus-visible .project-images img{transform:scale(1.1)}
}
.project.mono img{filter:grayscale(1)}
/* Captions follow the viewport centre inside their own frame with position: sticky,
   so the browser moves them with the scroll; they stay --safe px inside the frame. */
.project{--safe:26px;view-timeline:--frame block}
.project.has-statement{--safe:65px}
.project-caption{position:absolute;inset:0;padding:var(--safe) 0;z-index:3;pointer-events:none;color:var(--paper);text-shadow:0 1px 3px #000,0 2px 8px rgba(0,0,0,.7)}
.caption-inner{position:sticky;top:50svh;transform:translateY(-50%);display:grid;grid-template-columns:1fr 1fr;align-items:center;column-gap:24px;padding:0 var(--gutter)}
.has-statement .caption-inner{grid-template-columns:1fr var(--statement-width,50%) 1fr}
.has-statement.small-statement .caption-inner{--statement-width:45%}
.project-caption h2,.project-caption h3{font:inherit;font-size:14px;line-height:1.25;text-transform:uppercase;margin:0;min-width:0;overflow-wrap:anywhere}
.project-caption h3{justify-self:end;text-align:right}
.project-statement{font-weight:500;text-align:center;line-height:.96;font-size:clamp(38px,6vw,85px);letter-spacing:-.04em;text-transform:uppercase;pointer-events:none}
.project-statement.small{font-size:clamp(14px,1.4vw,22px);font-weight:500;text-transform:none;line-height:1.2;letter-spacing:0}
/* Fade in as the viewport centre enters the frame's safe area and out as it leaves. */
@keyframes caption-in{from{opacity:0}to{opacity:1}}
@keyframes caption-out{from{opacity:1}to{opacity:0}}
@supports (animation-timeline: view()){
 .project-caption{animation:caption-in linear both;animation-timeline:--frame;animation-range:cover calc(50svh + var(--safe)) cover calc(50svh + var(--safe) + 18px)}
 .caption-inner{animation:caption-out linear both;animation-timeline:--frame;animation-range:cover calc(100% - 50svh - var(--safe) - 18px) cover calc(100% - 50svh - var(--safe))}
}
.open-project{position:absolute;bottom:25px;left:50%;transform:translate(-50%,12px);opacity:0;font-size:12px;text-transform:uppercase;transition:transform .3s var(--ease),opacity .3s;text-shadow:0 1px 8px #000;z-index:4}
.has-statement .open-project{bottom:70px}
.project-link:hover .open-project,.project-link:focus-visible .open-project{opacity:1;transform:translate(-50%,0)}
.collection-end{padding:170px 25px 55px;text-align:center;position:relative;background:var(--ink)}
.collection-end>a{font-size:clamp(60px,12vw,180px);font-weight:500;letter-spacing:-.04em;line-height:1}.collection-end>a:hover{opacity:.6}
.footer-line{display:flex;justify-content:space-between;text-transform:uppercase;font-size:11px;font-weight:500;margin-top:100px;gap:20px}.footer-line a{text-decoration:underline;text-underline-offset:3px}
.standalone-signature{padding:30px var(--gutter) 80px;margin-top:60px}
.contact-info a{overflow-wrap:anywhere}
.detail{padding-top:95px}
.detail-heading{display:flex;justify-content:space-between;align-items:end;padding:0 var(--gutter) 30px;gap:30px}
.detail h1{font-weight:500;font-size:clamp(60px,10vw,160px);letter-spacing:-.04em;line-height:1;margin:0;max-width:80%;overflow-wrap:anywhere}
.detail-heading p{margin:0;text-align:right;text-transform:uppercase}
.detail-lead{position:relative;isolation:isolate;height:88svh;border-radius:var(--radius);overflow:hidden}
.detail-intro{padding:80px var(--gutter);display:grid;grid-template-columns:1fr 1fr;gap:30px}
.detail-intro p{margin:0;max-width:530px;font-size:clamp(23px,3vw,42px);font-weight:500;line-height:1.15;letter-spacing:-.02em}.detail-intro span{align-self:start;text-transform:uppercase}
.detail-gallery{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:0 8%}
.detail-media{position:relative;isolation:isolate;overflow:hidden;margin:0;height:85svh;border-radius:var(--radius)}
.detail-media:nth-child(3n){grid-column:1 / -1;height:90svh}
.next-project{display:block;font-size:clamp(50px,10vw,150px);font-weight:500;letter-spacing:-.04em;line-height:1;padding:120px 25px 70px;text-align:center;overflow-wrap:anywhere}
.next-project span{display:block;font-size:13px;font-weight:600;letter-spacing:0;text-transform:uppercase;margin-bottom:25px}.next-project:hover{opacity:.6}
.contact{position:relative;padding:110px 25px 25px;min-height:100svh}
.contact-visual{display:grid;align-items:center;justify-items:center}
.contact-portrait{grid-area:1 / 1;position:relative;isolation:isolate;overflow:hidden;height:54svh;width:34%;min-height:360px;filter:grayscale(1)}
.contact-portrait:before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:rgba(0,0,0,.56)}
.contact-message{grid-area:1 / 1;z-index:2;min-width:0;width:100%;padding:48px 0;text-align:center}
.contact-heading{font-size:clamp(64px,11vw,170px);font-weight:500;letter-spacing:-.04em;line-height:.95;margin:0}
.contact-tag{text-align:center;margin:30px 0 0;text-transform:uppercase}
.contact-info{display:grid;grid-template-columns:1fr 1fr 2fr;gap:40px;padding-top:80px;align-items:start}
.contact-info h2{font-size:14px;text-transform:uppercase;margin:0 0 20px}.contact-info p{margin:0 0 20px;max-width:58ch}.contact-info a{text-decoration:underline;text-underline-offset:4px}
.contact-info .statement{font-size:clamp(24px,3vw,40px);line-height:1.15;letter-spacing:-.02em;font-weight:500}.contact-demo{font-weight:400;opacity:.75;font-size:12px}
.back-link{display:inline-block;margin-top:15px;text-decoration:underline;text-underline-offset:4px}
.mobile-menu-button,.mobile-nav{display:none}.no-js{position:relative;margin:100px 25px}
@media(max-width:1024px){
 :root{--gutter:10px;--radius:15px}
 .desktop-nav{display:none}.compact-mark{font-size:20px;top:14px}
 .collection-view .site-header{display:none}
 .logo-caption{font-size:11px;line-height:14px;padding-top:7px}
 .project-list{padding-top:60px}
 .project{width:var(--mw)}
 .project-images figure{flex:var(--mf);height:var(--mh);aspect-ratio:var(--mr)}
 .project.d-single figure+figure{display:block}
 .project.m-single figure+figure{display:none}
 .caption-inner{padding:0 10px;column-gap:20px}
 .project-caption h2,.project-caption h3{font-size:12px}
 .project-statement{font-size:60px}.project-statement.small{font-size:14px}
 .has-statement.small-statement .caption-inner{--statement-width:46%}
 .open-project{display:none}
 .mobile-menu-button{display:flex;position:fixed;bottom:max(18px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);z-index:100;width:66px;height:58px;border:0;background:transparent;align-items:center;justify-content:center;flex-direction:column;gap:7px;filter:drop-shadow(0 1px 2px #000)}
 .collection-view:not(.past-hero) .mobile-menu-button{opacity:0;visibility:hidden;pointer-events:none}
 .mobile-menu-button span{height:2px;width:35px;background:var(--paper);transition:transform .3s var(--ease),opacity .3s}
 .mobile-menu-button[aria-expanded=true] span:first-child{transform:translateY(9px) rotate(45deg)}.mobile-menu-button[aria-expanded=true] span:nth-child(2){opacity:0}.mobile-menu-button[aria-expanded=true] span:last-child{transform:translateY(-9px) rotate(-45deg)}
 .mobile-nav:not([hidden]){position:fixed;inset:0;z-index:80;display:flex;flex-direction:column;justify-content:center;align-items:center;background:var(--ink);padding:60px 16px 100px;gap:0}
 .mobile-nav>a{font-size:clamp(40px,13vw,100px);letter-spacing:-.04em;font-weight:500;line-height:1.12}.mobile-nav>a[aria-current=page]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:7px}
 .mobile-nav p{position:absolute;bottom:100px;font-size:11px;text-align:center}.menu-is-open{overflow:hidden}
 .collection-end{padding:100px 16px 110px}.footer-line{flex-direction:column;gap:12px;margin-top:70px}
 .detail{padding-top:65px}.detail-heading{padding-bottom:25px;display:block}.detail h1{font-size:17vw;max-width:100%}.detail-heading p{text-align:left;font-size:12px;margin-top:20px}
 .detail-lead{height:75svh}.detail-intro{padding:50px 16px;grid-template-columns:1fr;gap:25px}
 .detail-gallery{grid-template-columns:1fr;gap:12px;padding:0 16px}.detail-media,.detail-media:nth-child(3n){height:80svh;grid-column:auto}
 .next-project{padding:80px 16px 140px}
 .contact{padding:60px 16px 120px}.contact-portrait{width:80%;height:52svh;min-height:0}.contact-heading{font-size:16vw}.contact-message{padding:32px 0}.contact-tag{font-size:11px;margin-top:24px}
 .contact-info{padding-top:55px;grid-template-columns:1fr 1fr;gap:35px 20px}.contact-info>div:last-child{grid-column:1 / -1}.contact-info .statement{font-size:30px}
}
@media(prefers-reduced-motion:reduce){
 *,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
 .hero-media img{will-change:auto}
 .project-link:hover .project-frame,.project-link:focus-visible .project-frame,.project-link:hover .project-images img,.project-link:focus-visible .project-images img{transform:none;clip-path:inset(0 round 15px)}
}