:root{--paper:#e5eff2;--ink:#191919;--sub:#596367;--line:#c1ced3;--pad:clamp(20px,3.3vw,64px);--gap:16px;color-scheme:light}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}a,button{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--ink);outline-offset:6px}::selection{background:var(--ink);color:var(--paper)}img,video{display:block;width:100%;height:100%;object-fit:cover}button{cursor:pointer}p,h1,h2,h3,figure{margin:0}.wrap{padding-inline:var(--pad)}.skip{position:absolute;top:-80px;background:var(--ink);color:white;padding:16px;z-index:100}.skip:focus{top:0}.nav{display:flex;align-items:center;justify-content:space-between;padding-block:26px;font-size:15px;line-height:1.3}.monogram{font-size:25px;font-weight:700;letter-spacing:-1.5px}.navlinks{display:flex;gap:32px}.navlinks a{position:relative;padding-block:4px}.navlinks a:after,.text-link:after{content:'';display:block;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .22s}.navlinks a:hover:after,.navlinks a[aria-current=page]:after,.text-link:hover:after{transform:scaleX(1)}.text-link{display:inline-block}.hero{padding-top:42px}.hero h1{font-size:clamp(70px,18.5vw,370px);font-weight:400;letter-spacing:-.083em;line-height:1;white-space:nowrap;margin-left:-.065em}.hero-bottom{display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:40px;margin-top:34px;padding-bottom:75px}.hero h2{font-size:clamp(27px,3.3vw,56px);font-weight:400;line-height:1.06;letter-spacing:-.05em}.meta{font-size:14px;line-height:1.45}.hero-meta{display:grid;grid-template-columns:1fr 1fr;gap:20px}.muted{color:var(--sub)}.section-head{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:18px 0;border-top:1px solid var(--ink);font-size:14px}.section-head h2{font:inherit}.view-controls{display:flex;gap:16px}.view-controls button{border:0;background:none;padding:5px 0;color:var(--sub);font-size:14px}.view-controls button[aria-pressed=true]{color:var(--ink);text-decoration:underline;text-underline-offset:5px}.projects{display:grid;grid-template-columns:1fr 1fr;column-gap:20px;row-gap:62px}.project{min-width:0}.project:first-child{grid-column:1/-1}.project-media{display:grid;grid-template-columns:1fr;overflow:hidden;background:#d8e4e9;position:relative;aspect-ratio:1.48}.project:first-child .project-media{grid-template-columns:1.75fr 1fr;gap:2px;aspect-ratio:2.8}.project-media img{transition:transform .65s cubic-bezier(.2,.65,.2,1)}.project:hover .project-media img{transform:scale(1.025)}.project-media .secondary{display:none}.project:first-child .project-media .secondary{display:block}.project-label{display:grid;grid-template-columns:1fr auto;gap:16px;padding:15px 0 0}.project-name{font-size:25px;letter-spacing:-.035em;font-weight:400}.project-num{font-size:12px;vertical-align:top;display:inline-block;letter-spacing:0;margin-left:6px;padding-top:3px}.project-disc{font-size:14px;margin-top:5px;color:var(--sub)}.project-year{font-size:14px;padding-top:5px}.project:nth-child(4){grid-column:1/-1}.project:nth-child(4) .project-media{aspect-ratio:2.15;grid-template-columns:1.4fr 1fr;gap:2px}.project:nth-child(4) .project-media .secondary{display:block}.projects[data-view=index]{display:block}.projects[data-view=index] .project{display:grid;grid-template-columns:180px 1fr;gap:30px;align-items:center;padding:22px 0;border-bottom:1px solid var(--line)}.projects[data-view=index] .project-media{aspect-ratio:1.6;grid-template-columns:1fr}.projects[data-view=index] .secondary{display:none}.projects[data-view=index] .project-label{padding:0}.projects[data-view=index] .project-name{font-size:clamp(30px,4vw,66px)}.independent{padding-top:120px;padding-bottom:110px}.film-teaser{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:start}.film-teaser h2{font-size:clamp(45px,6.2vw,100px);font-weight:400;letter-spacing:-.065em;line-height:.99;max-width:700px}.film-teaser p{font-size:22px;line-height:1.3;letter-spacing:-.025em;max-width:390px;margin:25px 0}.film-teaser figure{aspect-ratio:4/3;overflow:hidden}.inline-link{display:inline-block;border-bottom:1px solid currentColor;font-size:15px;padding-bottom:4px}.footer{background:var(--paper);color:var(--ink);padding:48px var(--pad) 24px}.footer-top{display:flex;justify-content:space-between;align-items:start;gap:32px;font-size:14px}.contact-big{display:block;font-size:clamp(45px,8.5vw,145px);letter-spacing:-.065em;line-height:1.1;margin:42px 0 58px;width:fit-content}.footer-bottom{display:flex;justify-content:space-between;gap:20px;font-size:13px;border-top:1px solid var(--line);padding-top:20px}.footer-bottom>div{display:flex;gap:24px}.page-title{font-size:clamp(58px,10.2vw,170px);letter-spacing:-.075em;font-weight:400;line-height:1.03;margin:38px 0 32px}.case-meta{display:grid;grid-template-columns:1fr 1fr 1fr;gap:25px;padding:20px 0 36px;border-top:1px solid var(--ink);font-size:14px;line-height:1.5}.eyebrow{font-size:13px;color:var(--sub);margin-bottom:10px}.case-cover{aspect-ratio:1.95;background:#d8e4e9;overflow:hidden}.case-intro{display:grid;grid-template-columns:1fr 2fr;gap:40px;padding:74px 0 60px}.case-intro h2{font-size:clamp(30px,3.65vw,58px);font-weight:400;letter-spacing:-.045em;line-height:1.1;max-width:950px}.chapter-label{font-size:14px;padding-top:8px}.case-copy{display:grid;grid-template-columns:1fr 2fr;gap:40px;padding-bottom:80px}.case-questions{display:grid;grid-template-columns:1fr 1fr;gap:40px 50px}.case-questions h3{font-size:14px;font-weight:400;margin-bottom:12px}.case-questions p{font-size:18px;line-height:1.48;letter-spacing:-.018em;max-width:38em}.case-gallery{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:0 0 80px}.case-gallery figure{aspect-ratio:1.55;background:#d8e4e9}.case-gallery figure.wide{grid-column:1/-1;aspect-ratio:1.9}.media-caption{font-size:13px;padding:12px 0;display:flex;justify-content:space-between;gap:20px;color:var(--sub)}.film-player{background:#050505}.film-player video{max-height:78vh;aspect-ratio:16/9;object-fit:contain}.film-player.portrait video{aspect-ratio:4/3}.next-project{border-top:1px solid var(--ink);padding:30px 0 70px;display:block}.next-project span{font-size:14px}.next-project h2{font-size:clamp(45px,7vw,115px);font-weight:400;letter-spacing:-.06em;line-height:1.1;margin-top:15px}.next-project:hover h2{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:8px}.profile-lead{font-size:clamp(32px,4.65vw,76px);letter-spacing:-.045em;line-height:1.13;margin:48px 0 90px;max-width:1500px}.profile-lead a{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}.profile-details{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:40px;border-top:1px solid var(--ink);padding:25px 0 100px}.profile-details h2{font-size:13px;font-weight:400;margin-bottom:25px}.profile-details p,.profile-details li{font-size:17px;line-height:1.5}.profile-details ul{list-style:none;padding:0;margin:0}.profile-photo{display:grid;grid-template-columns:2fr 1fr;gap:50px;align-items:end;padding-bottom:100px}.profile-photo figure{aspect-ratio:1.5}.profile-photo p{font-size:clamp(25px,3vw,42px);letter-spacing:-.04em;line-height:1.16}.film-heading{display:flex;justify-content:space-between;gap:30px;align-items:end;margin-bottom:30px}.film-heading h2{font-size:clamp(32px,4.5vw,65px);font-weight:400;letter-spacing:-.045em}.film-note{max-width:850px;font-size:clamp(25px,3.3vw,50px);letter-spacing:-.04em;line-height:1.2;padding:55px 0 70px}.film-actions{display:flex;gap:28px;flex-wrap:wrap;padding:20px 0 80px}.back-link{font-size:14px;display:inline-block;margin-top:30px;border-bottom:1px solid var(--ink);padding-bottom:3px}.video-note{padding-bottom:60px}.reveal{animation:appear .7s ease both}@keyframes appear{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(min-width:1800px){.hero h1{font-size:18.5vw}.wrap{max-width:2200px;margin:auto}}
@media(max-width:900px){.hero{padding-top:35px}.hero-bottom{padding-bottom:60px}.hero-meta{grid-template-columns:1fr;gap:12px}.project:first-child .project-media{aspect-ratio:1.65;grid-template-columns:1.4fr 1fr}.case-intro,.case-copy{grid-template-columns:1fr 2fr;gap:25px}.case-questions{grid-template-columns:1fr;gap:28px}.profile-details{grid-template-columns:1fr 1fr}.profile-photo{gap:25px}.film-teaser{gap:30px}.project-name{font-size:22px}}
@media(max-width:600px){:root{--pad:20px}.nav{padding-block:20px}.navlinks{gap:20px;font-size:14px}.monogram{font-size:23px}.hero{padding-top:50px}.hero h1{font-size:18.2vw;letter-spacing:-.075em}.hero-bottom{grid-template-columns:1fr;gap:30px;margin-top:25px;padding-bottom:55px}.hero h2{font-size:35px;line-height:1.08}.hero-meta{grid-template-columns:1fr 1fr;font-size:13px;gap:18px}.projects{grid-template-columns:1fr;row-gap:40px}.project:first-child,.project:nth-child(4){grid-column:auto}.project:first-child .project-media{aspect-ratio:1.25;grid-template-columns:1fr}.project:first-child .secondary{display:none}.project:nth-child(4) .project-media{grid-template-columns:1fr;aspect-ratio:1.48}.project:nth-child(4) .secondary{display:none}.project-name{font-size:25px}.project-disc{font-size:13px}.project-year{font-size:13px}.project-label{gap:10px}.projects[data-view=index] .project{grid-template-columns:95px 1fr;gap:20px}.projects[data-view=index] .project-name{font-size:28px}.projects[data-view=index] .project-year{display:none}.projects[data-view=index] .project-disc{font-size:12px}.independent{padding:70px 0}.film-teaser{grid-template-columns:1fr;gap:35px}.film-teaser h2{font-size:48px;max-width:350px}.film-teaser p{font-size:20px}.film-teaser figure{order:-1}.footer{padding-top:30px}.footer-top{font-size:13px;gap:15px}.contact-big{font-size:12.8vw;margin:40px 0}.footer-bottom{font-size:12px;flex-wrap:wrap}.footer-bottom>div{gap:20px}.page-title{margin-top:45px;font-size:16vw;overflow-wrap:normal}.case-meta{grid-template-columns:1fr 1fr;font-size:13px;gap:24px}.case-meta>div:last-child{grid-column:1/-1}.case-cover{aspect-ratio:1.35}.case-intro{display:block;padding:42px 0 30px}.chapter-label{margin-bottom:22px}.case-intro h2{font-size:34px}.case-copy{display:block;padding-bottom:45px}.case-copy>.chapter-label{display:none}.case-questions{gap:28px}.case-questions p{font-size:17px}.case-gallery{grid-template-columns:1fr;gap:12px;margin-bottom:50px}.case-gallery figure.wide{grid-column:auto;aspect-ratio:1.5}.next-project{padding-bottom:50px}.next-project h2{font-size:45px}.profile-lead{font-size:34px;margin:38px 0 60px;letter-spacing:-.045em}.profile-details{grid-template-columns:1fr 1fr;gap:35px 22px;padding-bottom:60px}.profile-details p,.profile-details li{font-size:15px}.profile-details h2{margin-bottom:15px}.profile-photo{grid-template-columns:1fr;gap:25px;padding-bottom:60px}.profile-photo p{font-size:28px;max-width:330px}.film-heading{display:block}.film-heading .meta{margin-top:15px}.film-note{font-size:30px;padding:38px 0}.film-actions{padding-bottom:50px;gap:20px}.media-caption{font-size:12px}.section-head{font-size:13px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}

@media(min-width:901px){.project:first-child .secondary{object-fit:contain;background:#d5e2e7}}

.case-gallery{align-items:start}.case-gallery figure,.case-gallery figure.wide{aspect-ratio:auto}.case-gallery img{height:auto;object-fit:contain}

/* The portfolio is a single, consistent project index. */
#work{padding-bottom:100px}.projects[data-view=index] .project-name{overflow-wrap:normal}.projects[data-view=index] .project-media{background:transparent}.projects[data-view=index] .project:hover .project-name{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:7px}@media(max-width:600px){#work{padding-bottom:60px}.projects[data-view=index] .project-name{font-size:clamp(23px,6.5vw,30px);line-height:1.06}.projects[data-view=index] .project-num{font-size:11px}.projects[data-view=index] .project{grid-template-columns:85px minmax(0,1fr);gap:18px}.projects[data-view=index] .project-label{min-width:0}.projects[data-view=index] .project-disc{line-height:1.4}}

.video-project-title{font-size:clamp(50px,7.4vw,116px);letter-spacing:-.065em;line-height:1.02;font-weight:400;margin:48px 0 32px;max-width:1400px}.video-project-subtitle{font-size:clamp(22px,3.2vw,45px);letter-spacing:-.035em;font-weight:400;line-height:1.15;margin-bottom:35px}.film-player[data-stream-player]{position:relative}.film-start{position:absolute;inset:0;border:0;background:rgba(0,0,0,.08);display:flex;align-items:center;justify-content:center;cursor:pointer}.film-start span{display:block;padding:16px 26px;background:var(--paper);color:var(--ink);font-size:16px;border:1px solid var(--paper)}.film-start:hover span{background:var(--ink);color:var(--paper)}.film-start:focus-visible{outline-offset:-6px;outline-color:white}.film-start[hidden],.player-error[hidden]{display:none}.player-error{position:absolute;inset:auto 15px 55px;background:var(--paper);color:var(--ink);font-size:16px;padding:20px;line-height:1.5}.player-error a{text-decoration:underline}.video-description{font-size:24px;line-height:1.35;letter-spacing:-.025em;max-width:850px;margin:35px 0}.video-source{display:flex;justify-content:space-between;gap:20px;margin:18px 0 70px;font-size:14px}.additional-film{margin-bottom:55px}.video-index-title{font-size:clamp(25px,3.3vw,52px)!important}.video-embed{width:100%;aspect-ratio:16/9;border:0;display:block;background:#111}
@media(max-width:600px){.video-project-title{font-size:clamp(40px,11.7vw,65px);margin-top:38px;overflow-wrap:break-word}.video-project-subtitle{font-size:26px}.film-start span{font-size:14px;padding:13px 20px}.video-source{font-size:13px;margin-bottom:45px;flex-wrap:wrap}.video-description{font-size:20px}.video-index-title{font-size:clamp(23px,6.5vw,30px)!important}}

.film-player[data-stream-player] video{height:auto;width:100%;object-fit:contain}

/* An editorial introduction, followed directly by the project index. */
.nav{position:relative}.nav:after{content:'';position:absolute;bottom:0;left:var(--pad);right:var(--pad);height:1px;background:var(--ink)}
.intro-editorial{padding-top:clamp(12px,1.6vw,26px);padding-bottom:64px}
.intro-statement{font-size:clamp(1.75rem,3.5vw,4.75rem);line-height:1.08;letter-spacing:-.048em;font-weight:400;max-width:100%}
.intro-statement h1,.intro-statement p{display:inline;font:inherit;letter-spacing:inherit}
.intro-details{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;margin:clamp(65px,7.5vw,135px) 0 0;font-size:.875rem;line-height:1.45}
.intro-details dt{font-size:.75rem;text-transform:uppercase;margin-bottom:22px}.intro-details dd{margin:0}.intro-details a{display:inline-block;overflow-wrap:anywhere;text-decoration-thickness:1px;text-underline-offset:4px}.intro-details a:hover{text-decoration:underline}
@media(max-width:900px){.intro-statement{font-size:clamp(1.75rem,4.4vw,2.5rem)}.intro-details{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}.intro-editorial{padding-bottom:48px}}
@media(max-width:600px){.intro-editorial{padding-top:20px;padding-bottom:40px}.intro-statement{font-size:clamp(1.65rem,6.8vw,2.1rem);line-height:1.12;letter-spacing:-.04em}.intro-details{margin-top:44px;gap:28px 20px}.intro-details dt{margin-bottom:12px}.intro-details a{padding-block:3px}}

.profile-page .profile-lead{font-size:clamp(1.75rem,3.5vw,4.75rem);line-height:1.08;letter-spacing:-.048em;max-width:none;margin:40px 0 64px}
.profile-approach{display:grid;grid-template-columns:1fr 2fr;gap:40px;padding-bottom:72px}.profile-approach h2{font-size:.875rem;font-weight:400;line-height:1.5}.profile-approach p{font-size:clamp(1.125rem,1.6vw,1.5rem);line-height:1.45;letter-spacing:-.02em;max-width:48em}.profile-approach p+p{margin-top:24px}
.profile-page .profile-details{padding-bottom:70px}.profile-page .profile-details p+p{margin-top:22px}.profile-page .profile-details>section{min-width:0}.profile-page .profile-details a{overflow-wrap:anywhere;text-underline-offset:4px}.profile-page .profile-details a:hover{text-decoration:underline}
.profile-film{border-top:1px solid var(--ink);margin-bottom:90px}.profile-film summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:25px 0;font-size:1rem;cursor:pointer}.profile-film summary::-webkit-details-marker{display:none}.film-toggle:before{content:'+';font-size:1.5rem}.profile-film[open] .film-toggle:before{content:'−'}.profile-film-content{padding:20px 0 15px}.profile-film-intro{font-size:1.125rem;line-height:1.5;max-width:48em;margin-bottom:44px}.profile-film-lists{display:grid;grid-template-columns:1fr 1fr;gap:48px}.profile-film-lists h2{font-size:.875rem;font-weight:400;margin-bottom:24px}.profile-film-lists ul{list-style:none;margin:0;padding:0}.profile-film-lists li{display:flex;flex-direction:column;gap:4px;font-size:1rem;line-height:1.4;border-top:1px solid var(--line);padding:14px 0}.profile-film-lists li .muted{font-size:.875rem}
@media(max-width:900px){.profile-page .profile-lead{font-size:clamp(1.75rem,4.4vw,2.5rem)}.profile-approach{grid-template-columns:1fr 2fr;gap:25px}.profile-film-lists{gap:30px}}
@media(max-width:600px){.profile-page .profile-lead{font-size:clamp(1.65rem,6.8vw,2.1rem);line-height:1.12;letter-spacing:-.04em;margin:30px 0 40px}.profile-approach{grid-template-columns:1fr;gap:20px;padding-bottom:45px}.profile-approach p{font-size:1.125rem}.profile-page .profile-details{padding-bottom:45px}.profile-film{margin-bottom:50px}.profile-film-lists{grid-template-columns:1fr;gap:36px}}

/* Pixel details: a shared utility typeface and 24px icon grid. */
@font-face{font-family:Silkscreen;src:url('/assets/fonts/silkscreen-regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
:root{--pixel:Silkscreen,monospace}
.pixel-icon{display:inline-block;flex:0 0 auto;width:24px;height:24px;fill:currentColor;vertical-align:middle;shape-rendering:crispEdges}
.monogram{font-family:var(--pixel);font-size:32px;font-weight:400;letter-spacing:-.075em;line-height:1}
.navlinks{gap:30px}.navlinks a{display:flex;align-items:center;gap:9px;font-family:var(--pixel);font-size:16px;line-height:1.4}.navlinks a:after{position:absolute;bottom:0;left:0;right:0}
.intro-details dt,.section-head,.eyebrow,.chapter-label,.project-num,.project-year,.profile-details h2,.profile-approach h2,.profile-film summary,.profile-film-lists h2,.case-questions h3,.back-link,.next-label,.film-start span{font-family:var(--pixel);font-weight:400;letter-spacing:0}
.intro-details dt{display:flex;align-items:center;gap:9px;font-size:14px;line-height:1.4}.intro-details dd{line-height:1.5}
.section-head{font-size:14px;line-height:1.5}.section-head h2,.index-label{display:flex;align-items:center;gap:10px}.section-head h2{flex-wrap:wrap;column-gap:10px;row-gap:0}
.project-end{display:flex;align-items:center;gap:28px;padding-top:4px}.project-end .project-year{padding-top:0;font-size:12px}.project-end>.pixel-icon{width:24px;height:24px;opacity:.65}.project:hover .project-end>.pixel-icon{opacity:1}
.project-num{font-size:12px;letter-spacing:-.04em;margin-left:10px}.project-disc{line-height:1.4}
.profile-details h2,.profile-approach h2{display:flex;align-items:flex-start;gap:10px;font-size:14px;line-height:1.45}.profile-approach h2{align-items:center}.profile-details h2 .pixel-icon{margin-top:-2px}.profile-film summary{font-size:14px;line-height:1.5}.profile-film-lists h2{font-size:14px}
.pixel-link,.next-label{display:inline-flex;align-items:center;gap:9px}.back-link{display:inline-flex;align-items:center;gap:9px;font-size:14px}.next-label{font-size:14px}.film-start span{display:flex;align-items:center;gap:12px;font-size:16px}
.eyebrow,.chapter-label,.case-questions h3{font-size:13px;line-height:1.5}.film-toggle:before{content:none}.film-toggle .when-open{display:none}.profile-film[open] .film-toggle:before{content:none}.profile-film[open] .film-toggle .when-closed{display:none}.profile-film[open] .film-toggle .when-open{display:inline-block}
.contact-big{display:flex;align-items:center;gap:30px}.contact-big>.pixel-icon{width:72px;height:72px}.footer-top>p:first-child{font-family:var(--pixel);font-size:14px;line-height:1.5}.footer-bottom .pixel-icon{width:24px;height:24px}.footer-bottom>div{align-items:center}
@media(max-width:900px){.project-end{gap:16px}.contact-big>.pixel-icon{width:48px;height:48px}}
@media(max-width:600px){.monogram{font-size:28px}.navlinks{gap:18px}.navlinks a{gap:7px;font-size:14px}.intro-details dt{gap:7px;font-size:13px}.section-head{font-size:13px}.section-head h2,.index-label{gap:7px}.section-head h2 .muted{margin-left:0}.index-label>.pixel-icon{display:none}.project-end{padding-top:0}.project-end .pixel-icon{width:24px;height:24px}.project-label{align-items:center;grid-template-columns:minmax(0,1fr) 24px;gap:12px}.projects[data-view=index] .project-num{font-size:12px}.profile-details h2{font-size:13px;gap:7px}.contact-big{gap:20px}.contact-big>.pixel-icon{width:36px;height:36px}.footer-bottom{row-gap:20px}.footer-bottom>div{flex-wrap:wrap;gap:18px}.film-start span{font-size:14px}.profile-film summary{font-size:13px}}

/* Profile begins with the introduction itself. */
.profile-page .profile-lead h1,.profile-page .profile-lead>p{display:inline;font:inherit;letter-spacing:inherit}

/* Pixel grotesk body, Space Mono details and Silkscreen labels. */
@font-face{font-family:'Space Mono';src:url('/assets/fonts/space-mono-regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
:root{--sans:'Calvin Pixel Grotesk',sans-serif;--mono:'Space Mono',monospace}
body{font-family:var(--sans);font-weight:400}
.intro-statement,.profile-page .profile-lead,.page-title,.project-name,.video-project-title,.video-project-subtitle,.case-intro h2,.next-project h2,.contact-big{font-family:var(--sans);font-weight:400}
.project-disc,.project-year,.intro-details dd,.case-meta,.profile-details p,.profile-details li,.profile-film-lists li,.media-caption,.video-source,.footer-bottom,.footer-top>p:last-child{font-family:var(--mono);font-weight:400;letter-spacing:-.02em;line-height:1.6}
.project-disc{font-size:.8125rem}.project-year{font-variant-numeric:tabular-nums}.intro-details dd,.case-meta,.profile-details p,.profile-details li{font-size:.875rem}.profile-film-lists li{font-size:.875rem}.profile-film-lists li .muted{font-size:.8125rem}.footer-bottom{font-size:.8125rem}.profile-details a,.intro-details a{overflow-wrap:anywhere}
@media(max-width:600px){.projects[data-view=index] .project-disc{font-size:.75rem;line-height:1.55}.intro-details dd{font-size:.8125rem}.profile-details p,.profile-details li,.case-meta{font-size:.8125rem}.footer-top>p:last-child{font-size:.75rem}}
@media(max-width:360px){.intro-details>div:last-child{grid-column:1/-1}}

/* A Times-style pixel italic, reserved for key phrases in the introductions. */
.intro-statement .pixel-accent,.profile-page .profile-lead .pixel-accent{font-family:var(--sans);font-style:normal;font-weight:400;font-size:1.065em;letter-spacing:-.025em;line-height:inherit;font-synthesis:none}

/* Regular pixel grotesk for display text. */
@font-face{font-family:'Calvin Pixel Grotesk';src:url('/assets/fonts/calvin-pixel-grotesk-regular.woff') format('woff');font-style:normal;font-weight:400;font-display:swap}
:root{--display:'Calvin Pixel Grotesk',var(--sans)}
.intro-statement,.profile-page .profile-lead,.page-title,.project-name,.video-project-title,.video-project-subtitle,.case-intro h2,.next-project h2,.contact-big{font-family:var(--display);font-weight:400;letter-spacing:-.025em;font-synthesis:none}

/* Pixel sans introductions and keywords. */
.intro-statement,.profile-page .profile-lead{font-family:var(--sans);font-style:normal;font-weight:400;letter-spacing:-.02em;line-height:1.15}
.intro-statement .pixel-accent,.profile-page .profile-lead .pixel-accent{font:inherit;font-style:normal;letter-spacing:inherit}

/* Consistent pixel sans for the Profile body. */
.profile-approach p,.profile-details p,.profile-details li,.profile-film-lists li{font-family:var(--display);font-style:normal;font-weight:400;letter-spacing:0;line-height:1.5}
/* All projects are contained in three expandable index groups. */
.work-group{border-top:1px solid var(--ink)}
.work-group:last-child{border-bottom:1px solid var(--ink)}
.work-group>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:28px 0;cursor:pointer}
.work-group>summary::-webkit-details-marker{display:none}
.work-group-heading{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 16px;min-width:0}
.work-group-name{font-family:var(--display);font-size:clamp(30px,4vw,60px);font-weight:400;line-height:1.1;letter-spacing:-.025em}
.work-group-count{font-family:var(--pixel);font-size:13px;line-height:1.4;color:var(--sub)}
.work-group-description{flex-basis:100%;font-family:var(--mono);font-size:13px;line-height:1.5;color:var(--sub)}
.work-group-toggle{flex:0 0 28px}.work-group-toggle .pixel-icon{width:28px;height:28px}
.work-group .when-open{display:none}.work-group[open] .when-closed{display:none}.work-group[open] .when-open{display:inline-block}
.work-group>summary:hover .work-group-name{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
.work-group .projects{padding-bottom:28px}.work-group .project:first-child{border-top:1px solid var(--line)}.work-group .project:last-child{border-bottom:0}
@media(max-width:600px){.work-group>summary{padding:24px 0;gap:16px}.work-group-heading{column-gap:10px}.work-group-name{font-size:clamp(27px,7.3vw,36px)}.work-group-count{font-size:11px}.work-group-description{font-size:11px}.work-group-toggle,.work-group-toggle .pixel-icon{width:24px;height:24px;flex-basis:24px}.work-group .projects{padding-bottom:15px}.profile-details p,.profile-details li{font-size:15px}}

.profile-film-heading{display:flex;align-items:center;gap:10px;font-family:var(--pixel);font-size:14px;font-weight:400;line-height:1.5;padding:25px 0 0}
.short-screenings{margin:0 0 60px}.short-screenings h2{font-family:var(--pixel);font-size:13px;font-weight:400;margin-bottom:16px}.short-screenings ul{list-style:none;padding:0;margin:0;font-family:var(--display);font-size:18px;line-height:1.5}
.client-strip{padding:0 0 42px}.client-strip>h2{font-family:var(--pixel);font-size:13px;font-weight:400;line-height:1.5;margin-bottom:24px}.client-logos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:24px;align-items:center}.client-logos li{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px}.client-logos img{display:block;width:auto;height:36px;max-width:125px;object-fit:contain}.client-logos li>span{font-family:var(--mono);font-size:10px;line-height:1.3;color:var(--sub)}
@media(max-width:600px){.client-strip{padding-bottom:34px}.client-strip>h2{font-size:12px;margin-bottom:22px}.client-logos{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 16px}.client-logos img{height:30px;max-width:90px}.client-logos li{gap:9px}.short-screenings{margin-bottom:40px}}

/* Short pixel reveals and stepped feedback, with native content underneath. */
.pixel-reveal-host{position:relative}
.pixel-reveal-canvas{position:absolute;display:block;z-index:1;pointer-events:none;image-rendering:pixelated}
@media(prefers-reduced-motion:no-preference){
 .navlinks a>.pixel-icon,.back-link>.pixel-icon,.pixel-link>.pixel-icon,.project-end>.pixel-icon,.contact-big>.pixel-icon,.work-group-toggle{transition:transform 160ms steps(2,end)}
 .navlinks a:focus-visible>.pixel-icon,.back-link:focus-visible>.pixel-icon,.pixel-link:focus-visible>.pixel-icon{transform:translateY(-2px)}
 .project:focus-visible .project-end>.pixel-icon{transform:translate(3px,-2px)}
 .work-group>summary:focus-visible .work-group-toggle{transform:translateY(-2px)}
 .contact-big:focus-visible>.pixel-icon{transform:translate(4px,-4px)}
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 .navlinks a:hover>.pixel-icon,.back-link:hover>.pixel-icon,.pixel-link:hover>.pixel-icon{transform:translateY(-2px)}
 .project:hover .project-end>.pixel-icon{transform:translate(3px,-2px)}
 .work-group>summary:hover .work-group-toggle{transform:translateY(-2px)}
 .contact-big:hover>.pixel-icon{transform:translate(4px,-4px)}
 .project-media img,.pixel-reveal-canvas{transition:transform 160ms steps(2,end)}
 .project:hover .project-media img,.project:hover .pixel-reveal-canvas{transform:scale(1.025)}
}
@media(prefers-reduced-motion:reduce){.pixel-reveal-canvas{display:none}.project:hover .project-media img{transform:none}}

/* A small, dismissible hello, with touch-friendly controls. */
.portrait-window{position:fixed;z-index:90;width:224px;right:20px;bottom:max(20px,env(safe-area-inset-bottom));background:var(--paper);border:1px solid var(--ink);box-shadow:4px 4px 0 var(--ink)}
.portrait-window[hidden]{display:none}
.portrait-window.is-bouncing{top:0;left:0;right:auto;bottom:auto;will-change:transform}
.portrait-title{display:flex;align-items:center;justify-content:space-between;min-height:38px;padding-left:10px;border-bottom:1px solid var(--ink);font-family:var(--pixel);font-size:10px;line-height:1.2;gap:4px}
.portrait-title>span{max-width:150px;padding-block:8px;line-height:1.5}
.portrait-title button{display:grid;place-items:center;flex:0 0 38px;align-self:stretch;min-height:38px;padding:10px;border:0;border-left:1px solid var(--ink);background:transparent}
.portrait-title button svg{width:13px;height:13px;fill:currentColor;shape-rendering:crispEdges}
.portrait-title button:hover,.portrait-title button:focus-visible{background:var(--ink);color:var(--paper);outline-offset:-3px}
.portrait-photo{position:relative;aspect-ratio:1;overflow:hidden}
.portrait-photo img{width:100%;height:100%;object-fit:cover}
@media(max-width:767px),(pointer:coarse){.portrait-window{width:180px;right:16px;bottom:max(16px,env(safe-area-inset-bottom))}.portrait-title{font-size:9px;padding-left:7px}.portrait-title button{min-height:44px;flex-basis:44px}}
@media(prefers-reduced-motion:reduce){.portrait-window{will-change:auto}}

/* Quiet, opt-out interface audio. */
.sound-toggle{display:flex;align-items:center;gap:7px;padding:4px 0;border:0;background:transparent;font-family:var(--pixel);font-size:11px;line-height:1.3;white-space:nowrap}
.sound-toggle svg{width:16px;height:16px;fill:currentColor;shape-rendering:crispEdges}
.sound-toggle[aria-pressed=false]{color:var(--sub)}
.sound-toggle:hover span{text-decoration:underline;text-underline-offset:5px}
@media(max-width:600px){.navlinks{gap:12px}.sound-toggle{font-size:9px;gap:5px;min-height:44px}.sound-toggle svg{width:14px;height:14px}}
@media(max-width:360px){.navlinks{gap:9px}.navlinks a{font-size:12px}.navlinks a>.pixel-icon{width:18px;height:18px}}

.case-questions .evidence-sources{font-family:var(--mono);font-size:11px;line-height:1.7;color:var(--sub);margin-top:14px}
.evidence-sources a{text-decoration:underline;text-underline-offset:3px}

/* Studio Great case-study compositions; original media order and widths. */
.brand-overview{display:grid;grid-template-columns:1fr 1fr;gap:8%;padding:15px 0 75px;align-items:start}
.brand-story h2{font-family:var(--sans);font-size:clamp(28px,3.3vw,48px);font-weight:400;line-height:1.12;margin-bottom:36px}
.brand-questions{display:grid;gap:26px}.brand-questions h3{font-family:var(--mono);font-size:12px;font-weight:400;text-transform:uppercase;margin-bottom:8px}.brand-questions p{font-size:18px;line-height:1.5}.brand-questions .evidence-sources{font-size:12px;margin-top:12px}
.brand-facts{display:grid;grid-template-columns:1fr 1fr;gap:35px 24px;font-family:var(--mono);font-size:13px;line-height:1.65}.brand-facts>div:last-child{grid-column:1/-1}.brand-facts .eyebrow{margin-bottom:10px}
.brand-media{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));gap:12px;margin-bottom:65px;align-items:start}.brand-panel{grid-column:var(--column);order:var(--desktop-order);min-width:0}.brand-panel>img{width:100%;height:auto;object-fit:contain}.brand-panel .film-player{margin:0}.brand-panel .video-source{margin:10px 0 12px;font-size:11px}.brand-panel .video-source a{font-size:11px}
@media(max-width:700px){.brand-overview{grid-template-columns:1fr;gap:35px;padding-bottom:40px}.brand-facts{grid-row:1}.brand-story h2{font-size:30px}.brand-questions p{font-size:17px}.brand-media{display:flex;flex-direction:column;gap:10px}.brand-panel{width:100%;order:var(--mobile-order)}}

/* Preserve complete artwork and film frames across thumbnail and project views. */
.projects[data-view=index] .project-media img{object-fit:contain}
.projects[data-view=index] [data-project="outer-heavens"] .project-media{background:#242424}
main[data-project="outer-heavens"] .case-cover{aspect-ratio:auto}
main[data-project="outer-heavens"] .case-cover img{height:auto;object-fit:contain}
main[data-project="outer-heavens"] .case-gallery figure:has(img[src*="outer-original-03"]){max-width:520px;justify-self:center}
@media(max-width:600px){main[data-project="outer-heavens"] .case-gallery figure:has(img[src*="outer-original-03"]){max-width:340px}}
/* Match the Studio Great index covers and preserve the supplied film artwork. */
.projects[data-view=index] [data-project="ors"] .project-media,.projects[data-view=index] [data-project="omearas"] .project-media{aspect-ratio:3/2}
.projects[data-view=index] [data-project="ors"] .project-media img,.projects[data-view=index] [data-project="omearas"] .project-media img{object-fit:cover;object-position:50% 50%}
.projects[data-view=index] [data-project="outer-heavens"] .project-media{aspect-ratio:4/3}

/* Source-selected covers, matching the Studio Great 3:2 index framing. */
.projects[data-view=index] .project[data-studio-cover="true"] .project-media{aspect-ratio:3/2}
.projects[data-view=index] .project[data-studio-cover="true"] .project-media img{object-fit:cover;object-position:50% 50%}

/* YouTube 4:3 preview files contain a centred 16:9 thumbnail plus padding. */
#independent-work .projects[data-view=index] .project:not([data-project="outer-heavens"]) .project-media{aspect-ratio:16/9}
#independent-work .projects[data-view=index] .project:not([data-project="outer-heavens"]) .project-media img{object-fit:cover;object-position:50% 50%}
#independent-work .projects[data-view=index] .project[data-project="the-man-with-dyed-hair"] .project-media,#independent-work .projects[data-view=index] .project[data-project="live-psychic"] .project-media{aspect-ratio:2.39}

/* Contact form shared by every page. */
.contact-form{max-width:1100px;margin:0 0 64px}.contact-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 32px}.contact-field{display:flex;flex-direction:column;gap:12px;min-width:0}.contact-field label,.contact-submit{font-family:var(--pixel);font-size:12px;line-height:1.5}.contact-field input,.contact-field textarea{width:100%;border:1px solid var(--ink);border-radius:0;padding:15px;background:transparent;color:var(--ink);font-family:var(--mono);font-size:16px;line-height:1.5}.contact-field textarea{resize:vertical;min-height:150px}.contact-field input:focus-visible,.contact-field textarea:focus-visible{outline:2px solid var(--ink);outline-offset:3px}.contact-message{grid-column:1/-1}.contact-form-bottom{display:flex;align-items:center;gap:25px;justify-content:space-between;margin-top:24px}.contact-submit{display:flex;align-items:center;justify-content:center;gap:14px;min-height:50px;padding:14px 22px;background:var(--ink);color:var(--paper);border:1px solid var(--ink)}.contact-submit:hover{background:var(--paper);color:var(--ink)}.contact-form-bottom p{font-family:var(--mono);font-size:11px;line-height:1.6;max-width:370px}.contact-form-bottom p a{text-decoration:underline;text-underline-offset:3px}@media(max-width:600px){.contact-fields{grid-template-columns:1fr;gap:22px}.contact-form-bottom{align-items:stretch;flex-direction:column;gap:18px}.contact-form{margin-bottom:42px}}

/* Lock film thumbnails to the artwork frame, independent of intrinsic image size. */
#independent-work .projects[data-view=index] .project .project-media{display:block;position:relative;width:100%;min-width:0;min-height:0;align-self:center;aspect-ratio:16/9}
#independent-work .projects[data-view=index] .project .project-media img{position:absolute;inset:0;display:block;width:100%;height:100%;min-width:0;min-height:0;object-fit:cover;object-position:center;transform:none}
#independent-work .projects[data-view=index] .project[data-project="outer-heavens"] .project-media{aspect-ratio:4/3}
#independent-work .projects[data-view=index] .project[data-project="outer-heavens"] .project-media img{object-fit:contain}
#independent-work .projects[data-view=index] .project[data-project="the-man-with-dyed-hair"] .project-media{aspect-ratio:1280/466}
#independent-work .projects[data-view=index] .project[data-project="live-psychic"] .project-media{aspect-ratio:480/188}
