:root{--ink:#242424;--paper:#f5f3ef;--lime:#d6fb64;--gutter:clamp(20px,5vw,84px);--line:#f5f3ef40;color-scheme:dark}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:28px}body{margin:0;background:var(--ink);color:var(--paper);font:16px/1.55 Arial,Helvetica,sans-serif}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid #7983db;outline-offset:6px}figure,h1,h2,h3,p{margin:0}.wrap{width:min(100%,1660px);margin:auto;padding-inline:var(--gutter)}.mono{font:11px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.11em;text-transform:uppercase}.symbols{position:absolute;width:0;height:0;overflow:hidden}.skip{position:absolute;left:20px;top:-60px;background:var(--lime);color:var(--ink);padding:7px;z-index:5}.skip:focus{top:8px}
.nav{height:78px;display:flex;justify-content:space-between;align-items:center;gap:20px}.nav nav{display:flex;gap:clamp(15px,3vw,43px);font-size:13px}.nav nav a:hover{color:var(--lime)}.signature{width:clamp(116px,15vw,202px);flex:none}.signature img{width:100%;height:auto;display:block}a svg{display:inline-block;width:1em;height:1em;vertical-align:-.08em}
.hero{padding-bottom:clamp(55px,8vw,112px)}.hero-intro{padding-block:clamp(36px,6vw,90px) clamp(30px,5vw,66px)}.role{color:#d3d0ca;margin-bottom:21px}.hero h1,h2{font-size:clamp(53px,8.2vw,128px);font-weight:500;line-height:.91;letter-spacing:-.085em}.hero h1 em{font-family:Georgia,serif;font-weight:400;letter-spacing:-.085em}.feature-media{position:relative;aspect-ratio:2.12;overflow:hidden;background:#171717}.feature video{display:block;width:100%;height:100%;object-fit:cover}.motion-toggle{position:absolute;bottom:14px;right:14px;border:1px solid #f5f3ef65;border-radius:24px;background:#242424e0;color:var(--paper);padding:8px 13px}.motion-toggle:hover{background:var(--paper);color:var(--ink)}.caption{display:flex;justify-content:space-between;gap:10px;padding-top:12px;color:#ddd9d2}.caption i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--lime);margin-right:7px}.caption a:hover{color:var(--lime)}
.work{background:var(--paper);color:var(--ink);padding-block:clamp(46px,8vw,110px)}.section-line{border-top:1px solid currentColor;padding-top:12px;display:flex;justify-content:space-between;align-items:center;min-height:37px}.spark{width:26px;height:26px;background:var(--lime);border-radius:50%;padding:5px;transform:rotate(var(--spark-turn,0deg))}.work h2,.about h2{margin:28px 0 35px}.lead-project{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(22px,5vw,80px);align-items:center}.cover{display:block;aspect-ratio:1.62;position:relative;background:#161b22;overflow:hidden}.cover img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .55s ease}.cover:hover img{transform:scale(1.04)}.cover-link{position:absolute;bottom:15px;right:15px;width:42px;height:42px;display:grid;place-items:center;background:var(--lime);border-radius:50%}.cover-link svg{width:18px;height:18px}.project-copy h3{font-size:clamp(31px,4.2vw,68px);letter-spacing:-.072em;line-height:.96;font-weight:500;margin:9px 0 15px}.project-copy>p:not(.mono),.project>p{max-width:42ch}.credit{font-size:12px;display:block;margin-top:15px;color:#585650}.project-index{margin-top:clamp(34px,7vw,95px);border-bottom:1px solid #24242442}.project{border-top:1px solid #24242442}.project summary{display:grid;grid-template-columns:clamp(120px,17vw,245px) minmax(0,1fr) minmax(80px,23%) 20px;align-items:center;gap:14px;list-style:none;cursor:pointer;padding:19px 0}.project summary::-webkit-details-marker{display:none}.project strong{font-size:clamp(24px,3vw,45px);font-weight:500;line-height:1;letter-spacing:-.065em}.project>p{margin:0 0 20px calc(clamp(120px,17vw,245px) + 14px)}.plus{width:19px;height:19px;background:linear-gradient(currentColor,currentColor) center/11px 1px no-repeat,linear-gradient(currentColor,currentColor) center/1px 11px no-repeat}.project[open] .plus{background-size:11px 1px,0 0}.project summary:hover .plus{background-color:var(--lime);border-radius:50%}
.about{padding-block:clamp(50px,8vw,115px)}.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(25px,8vw,125px);align-items:center;margin-top:34px}.about-copy p{max-width:38ch;font-size:clamp(17px,1.7vw,23px);margin-bottom:16px}.portrait img{display:block;width:100%;height:auto}.portrait figcaption{margin-top:8px;color:#d3d0ca}.perforation{height:12px;margin-bottom:8px;background:radial-gradient(ellipse,#f5f3ef66 0 45%,transparent 49%) var(--film-shift,0px) center/22px 10px repeat-x}
footer{background:var(--paper);color:var(--ink);padding-block:35px 24px}footer h2{margin:35px 0 19px}.email{display:inline-block;border-bottom:1px solid;font-size:clamp(17px,2.65vw,34px);overflow-wrap:anywhere}.footer-bottom{border-top:1px solid #24242455;margin-top:50px;padding-top:16px;display:flex;align-items:center;gap:14px}.footer-bottom img{width:33px;height:auto}.footer-bottom a{margin-left:auto}
.motion .reveal{opacity:0;transform:translateY(15px);transition:opacity .55s ease,transform .55s ease}.motion .reveal.visible,.motion .reveal:focus-within{opacity:1;transform:none}
@media(max-width:680px){.nav{height:62px}.nav nav{font-size:12px}.hero h1,h2{font-size:clamp(42px,10.1vw,70px)}.feature-media{aspect-ratio:1.35}.lead-project,.about-grid{grid-template-columns:1fr}.project summary{grid-template-columns:1fr 20px;gap:7px;padding:14px 0}.project summary>*{grid-column:1}.project summary .plus{grid-column:2;grid-row:2}.project>p{margin-left:0}.motion-toggle{bottom:8px;right:8px}.caption,.footer-bottom{font-size:9px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}.motion .reveal{opacity:1;transform:none}.spark,.cover:hover img{transform:none}}
/* One continuous sequence, with typography laid over the film stills. */
body{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.hero h1,h2,.shot h3{font-family:Arial,Helvetica,sans-serif}
.hero h1{font-weight:750}.hero h1 em{font-weight:400}
.hero{padding-bottom:0}.feature-media{aspect-ratio:2.25}
.caption{padding-bottom:18px}
.work,footer{background:var(--ink);color:var(--paper)}
.work{padding:0}.work-intro{padding-top:clamp(28px,5vw,64px);padding-bottom:clamp(22px,4vw,52px)}
.work-intro h2{margin:16px 0 10px;font-size:clamp(42px,6vw,91px)}
.work-intro p{color:#c4c1ba;font-size:14px;letter-spacing:.01em}
.spark{color:var(--ink)}
.shot{position:relative;isolation:isolate;overflow:hidden;min-height:clamp(420px,67vw,850px);display:flex;align-items:end;background:#171717}
.shot + .shot{margin-top:-1px}
.shot img,.shot::after{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.shot img{object-fit:cover;transform:scale(1.08) translateY(var(--shot-drift,0px))}
.shot::after{content:"";background:linear-gradient(0deg,#0c0c0cf0 0%,#0c0c0c65 33%,transparent 68%)}
.shot figcaption{margin:0 auto;padding-block:65px clamp(38px,7vw,108px)}
.shot h3{font-size:clamp(48px,10vw,155px);font-weight:600;letter-spacing:-.085em;line-height:.9;margin:10px 0 15px}
.shot figcaption p{max-width:38ch;font-size:clamp(15px,1.5vw,20px);line-height:1.45;color:#f5f3efdf}
.shot .mono{color:var(--lime)}
.about{padding-block:clamp(32px,7vw,94px)}.about-grid{align-items:start}.about h2{margin:0}.about-copy{padding-top:5px}
footer{padding-top:0}.footer-bottom{border-color:var(--line)}
@media(max-width:680px){.feature-media{aspect-ratio:1.35}.shot{min-height:clamp(385px,116vw,620px)}.shot figcaption{padding-bottom:34px}.about-grid{gap:18px}.about-copy{padding-top:0}}
@media(prefers-reduced-motion:reduce){.shot img{transform:none}}
.caption{align-items:center}.playhead{position:relative;flex:1;max-width:140px;height:1px;background:var(--line);margin-inline:12px}.caption .playhead i{position:absolute;inset:0;width:100%;height:1px;border-radius:0;transform-origin:left;transform:scaleX(var(--reel-progress,0));transition:transform .24s linear}
.sequence{background:#171717}.shot + .shot{margin-top:clamp(-70px,-5vw,-20px);mask-image:linear-gradient(transparent,#000 clamp(20px,5vw,70px))}
.shot figcaption{position:relative}.shot figcaption::before{content:"";display:block;width:23px;height:1px;background:var(--lime);margin-bottom:14px}
.about-copy p{font-size:clamp(16px,1.65vw,22px);max-width:34ch}

/* Full-screen opening and compact work selection. */
.nav{position:absolute;z-index:5;inset:0 0 auto}
.hero{width:100%;max-width:none;position:relative;isolation:isolate;min-height:100svh;display:grid;align-items:center;padding-block:96px 72px}
.hero-intro{position:relative;z-index:1;padding:0;pointer-events:none}
.hero h1{font-size:clamp(62px,11vw,166px)}
.hero .feature{position:absolute;inset:0}
.hero .feature-media{width:100%;height:100%;aspect-ratio:auto}
.hero .feature-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#151515ba,#15151528 95%),linear-gradient(0deg,#151515e6,transparent 35%,#15151572);pointer-events:none}
.hero .motion-toggle{z-index:1;bottom:70px;right:var(--gutter)}
.hero .caption{position:absolute;bottom:0;left:var(--gutter);right:var(--gutter);border-top:1px solid var(--line);padding-block:15px 18px}
.sequence{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-inline:auto;padding-inline:var(--gutter);width:min(100%,1660px);background:none}
.shot,.shot + .shot{min-height:clamp(230px,35vw,520px);margin:0;mask-image:none}
.shot:first-child{grid-column:1/-1;min-height:clamp(280px,46vw,640px)}
.shot figcaption{padding:clamp(20px,4vw,55px)}
.shot h3{font-size:clamp(34px,6.7vw,100px)}
@media(max-width:680px){.hero h1{font-size:clamp(53px,13vw,91px)}.sequence{grid-template-columns:1fr;gap:8px}.shot,.shot:first-child{min-height:260px}}

/* A slower rhythm after the opening film. */
.work.wrap{padding-inline:var(--gutter);padding-block:clamp(58px,9vw,130px) clamp(40px,7vw,95px)}
.work-intro{padding:0;margin-bottom:clamp(32px,6vw,82px)}
.work-intro h2{margin-top:24px}
.case-list{display:grid;gap:clamp(46px,10vw,146px)}
.case-copy{max-width:780px}
.case-copy .mono{color:var(--lime)}
.case-copy h3{font:600 clamp(37px,6vw,100px)/.94 Arial,Helvetica,sans-serif;letter-spacing:-.085em;margin:12px 0 20px}
.case-copy p{color:#d1cec8;max-width:36ch}
.reel-links{display:flex;gap:6px 14px;flex-wrap:wrap;margin-top:20px}
.reel-link{font-size:13px;padding-block:3px;border-bottom:1px solid var(--line)}
.reel-link:hover{color:var(--lime);border-color:var(--lime)}
.archive{margin-top:clamp(65px,11vw,150px)}
.archive-row{display:grid;grid-template-columns:minmax(125px,1fr) 2fr;align-items:baseline;gap:16px;border-bottom:1px solid var(--line);padding-block:12px}
.archive-row h3{font-size:16px;font-weight:500}.archive-row .reel-links{margin:0}
@media(max-width:680px){.archive-row{grid-template-columns:minmax(108px,1fr) 1.5fr}}

.section-line,.hero .caption,.footer-bottom,.archive-row,.reel-link,.email{border:0}
.archive-row{padding-block:15px}
.reel-links{column-gap:18px}
.reel-link{color:#ddd9d2}
.reel-link:hover,.nav a[aria-current=page]{color:var(--lime)}
.bio-page{padding-block:clamp(135px,17vw,250px) clamp(65px,10vw,150px)}
.bio-page>.mono{color:var(--lime);margin-bottom:18px}
.bio-page h1{font:700 clamp(48px,9vw,142px)/.91 Arial,Helvetica,sans-serif;letter-spacing:-.085em}
.bio-body{margin:clamp(35px,7vw,90px) 0 0 auto;width:min(100%,670px);color:#d9d5cd}
.bio-body p{margin-bottom:20px;font-size:clamp(16px,1.8vw,23px)}
.bio-body .bio-lead{color:var(--paper);font-size:clamp(24px,3.2vw,43px);line-height:1.15;letter-spacing:-.04em}