/* The Issue: a magazine cover, then one spread per project. Four accent colours. */
:root{--bg:#fbfbf8;--ink:#0e0e0c;--soft:#55554e;--rule:#0e0e0c;--hair:#c9c8c2;--logo:brightness(0);--ph:#ddd;
--serif:"Fraunces",Georgia,"Times New Roman",serif;--sans:"Geist","Helvetica Neue",Arial,sans-serif;--mono:"Geist Mono",ui-monospace,Menlo,monospace;--g:clamp(20px,4.6vw,76px);color-scheme:light}
@property --a{syntax:"<color>";inherits:true;initial-value:#f4f421}
:root{--yel:#f4f421;--mint:#03efc8;--pur:#b04df2;--org:#ff7f15}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.5 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit}h1,h2,h3,p,ul,figure{margin:0;font-weight:400}ul{padding:0;list-style:none}img{display:block;max-width:100%}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}[id]{scroll-margin-top:20px}
.tag{display:block;font:400 12px/1.4 var(--mono)}
.wrap{padding-inline:var(--g)}
.g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(12px,1.7vw,24px)}
.nav{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:12px;border-bottom:1px solid var(--rule)}.nav.wrap{padding-inline:0;margin-inline:var(--g)}
.lm img{width:38px;height:37px;filter:var(--logo)}
.nav ul{display:flex;flex-wrap:wrap;gap:4px clamp(12px,2vw,28px);font:400 13px/1.4 var(--mono)}.nav li a{text-decoration:none;display:inline-block;padding-block:4px}.nav li a:hover,.nav li a[aria-current]{background:var(--yel)}
.s{font-family:var(--serif);font-weight:300;letter-spacing:-.025em;text-wrap:balance}
em{font-style:italic}.hi{transition:--a .7s;background:linear-gradient(transparent 60%,var(--a) 60%,var(--a) 94%,transparent 94%);padding-inline:.04em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.hero-top{align-items:end;padding-block:clamp(36px,5.4vw,88px) clamp(28px,3.6vw,56px)}.hero-top h1{grid-column:1/9}.hero-top .side{grid-column:9/13}
h1.s{font-size:clamp(38px,6.3vw,112px);line-height:1.02;letter-spacing:-.03em}
.stack{height:min(72vh,50vw);position:relative;background:var(--ph);overflow:hidden;min-height:0}.stack img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s ease}.stack img.on{opacity:1}
.lede{font-family:var(--serif);font-size:clamp(18px,1.35vw,22px);line-height:1.3;text-wrap:balance}
.start{display:inline-block;margin-top:12px;font:400 13px/1.4 var(--mono)}
.now{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 18px;padding-top:12px}.now b{font-family:var(--serif);font-weight:400;font-style:italic;font-size:clamp(16px,1.2vw,19px);line-height:1.2}
.pause{margin-left:auto;background:none;border:0;padding:0;color:inherit;cursor:pointer;font:400 12px/1.4 var(--mono);text-decoration:underline;text-underline-offset:3px}
.who{padding-block:clamp(72px,11vw,176px)}.who h2{grid-column:1/5}.who p{grid-column:5/12;font-family:var(--serif);font-weight:300;font-size:clamp(23px,2.25vw,36px);line-height:1.24;letter-spacing:-.012em}
.wh{display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--rule);padding-top:10px}
.sp{border-top:1px solid var(--rule);margin-top:clamp(64px,8.6vw,136px);padding-top:12px}.wh+.sp{border-top:0;margin-top:clamp(16px,2vw,28px)}
.fol{display:flex;justify-content:space-between;gap:16px;margin-bottom:clamp(20px,2.8vw,44px)}
.t{font-size:clamp(30px,3.6vw,58px);line-height:1.05;letter-spacing:-.022em}.t2{font-size:clamp(30px,3.6vw,58px);line-height:1.05;letter-spacing:-.022em}
.hook{font-family:var(--serif);font-style:italic;font-size:clamp(17px,1.35vw,21px);line-height:1.3;text-wrap:balance}
.sp img{width:100%;object-fit:cover;background:var(--ph)}.r32{aspect-ratio:3/2}.r45{aspect-ratio:4/5}
.s1a{grid-column:1/9}.s1b{grid-column:10/13;display:flex;flex-direction:column;justify-content:space-between;gap:24px}.s1t{margin-bottom:clamp(20px,2.6vw,40px)}
.s2a{grid-column:1/6}.s2b{grid-column:7/13;display:flex;flex-direction:column;gap:clamp(24px,3vw,44px);justify-content:space-between}
.bleed img{height:min(70vh,46vw)}
.s3t{margin-top:clamp(18px,2.2vw,32px);align-items:end}.s3t h3{grid-column:1/8}.s3t>div{grid-column:8/13}
.s4a{grid-column:1/7;display:flex;flex-direction:column;justify-content:space-between;gap:32px}.s4b{grid-column:8/13}.s4b img{max-height:80vh}.s4s{width:70%!important}
.sec{border-top:1px solid var(--rule);margin-top:clamp(72px,10vw,160px);padding-top:12px}
.dot{font-family:var(--serif);font-weight:300;font-style:italic;font-size:clamp(32px,4.3vw,72px);line-height:1.1;letter-spacing:-.025em;margin-block:clamp(24px,3.4vw,56px) clamp(36px,5vw,80px)}
.note{grid-column:1/5;font-size:15px;max-width:26ch}.types{grid-column:5/13;font-family:var(--serif);font-size:clamp(18px,1.45vw,23px);line-height:1.25;border-bottom:1px solid var(--hair)}.types li{padding-block:13px;border-top:1px solid var(--hair)}
.caph{margin-top:clamp(56px,7.5vw,120px);padding-bottom:14px}
.acc{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(8px,1vw,16px);align-items:start}
.ac{background:var(--a)}
.ac summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:flex-start;gap:10px;min-height:clamp(64px,5vw,80px);padding:clamp(10px,.9vw,14px)}.ac summary::-webkit-details-marker{display:none}
.ac h3{font-family:var(--serif);font-weight:400;font-size:clamp(16px,1.2vw,19px);line-height:1.18;letter-spacing:-.008em}.ac[open] h3{font-style:italic}
.pm{position:relative;flex:none;width:12px;height:12px;margin-top:4px}.pm::before,.pm::after{content:"";position:absolute;background:currentColor;left:0;right:0;top:50%;height:1.5px;margin-top:-.75px;transition:transform .25s}.pm::after{transform:rotate(90deg)}.ac[open] .pm::after{transform:rotate(0)}
.ac[open] summary{min-height:0}
.ac ul{padding:0 clamp(10px,.9vw,14px) clamp(12px,1vw,16px)}.ac li{font-size:13.5px;line-height:1.3;padding-block:4px;color:var(--ink)}
.logos{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));align-items:center;gap:clamp(36px,4.4vw,72px) clamp(28px,4vw,64px);margin-top:clamp(28px,3.6vw,56px)}.logos li{display:flex;align-items:center;min-width:0}.logos img{height:auto;max-width:100%;width:calc(var(--k)*clamp(60px,5.6vw,92px));filter:var(--logo)}
.tr{grid-column:5/13}.tr p:first-child{font-family:var(--serif);font-weight:300;font-size:clamp(20px,1.8vw,29px);line-height:1.3;letter-spacing:-.01em}.tr p+p{margin-top:12px}.sec>.g>h2{grid-column:1/5}
.cl{font-size:clamp(36px,5.6vw,96px);line-height:1.04;letter-spacing:-.03em;margin-block:0 clamp(24px,3vw,48px)}
.email{font-family:var(--serif);font-style:italic;font-size:clamp(22px,1.9vw,30px);overflow-wrap:anywhere;text-underline-offset:.15em;text-decoration-thickness:1px}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding-block:14px;font:400 12px/1.4 var(--mono);color:var(--soft)}.privacy+.foot{border-top:1px solid var(--rule)}
.tag i{font-style:normal}
.fol span:first-child{background:var(--a);padding-inline:6px}
.h-link,.pic{text-decoration:none;color:inherit}.pic{display:block}
.vp{display:inline-block;margin-top:10px;font-size:13px}.vp:hover,.wh a:hover,.start:hover{background:var(--yel)}
#talk{margin-inline:calc(var(--g)*-1);margin-top:clamp(72px,10vw,160px);padding:clamp(56px,8vw,128px) var(--g);background:var(--yel);border-top:0}#talk .hi{background:none}
.talk-alt{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px}.copy{background:none;border:0;padding:0;color:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
/* Our work */
.work-top{padding-block:clamp(36px,5.4vw,88px) clamp(36px,5vw,80px)}.work-top h1{--a:var(--mint)}.work-top .lede{margin-top:clamp(12px,1.4vw,22px)}
.jobs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-flow:dense;gap:clamp(48px,5.6vw,92px) clamp(20px,3vw,48px);border-top:1px solid var(--rule);padding-top:clamp(20px,2.6vw,40px)}
.job{min-width:0}.job:nth-child(4n+1){--a:var(--pur)}.job:nth-child(4n+2){--a:var(--org)}.job:nth-child(4n+3){--a:var(--mint)}.job:nth-child(4n){--a:var(--yel)}
.job[open]{grid-column:1/-1}
.job summary{list-style:none;cursor:pointer;display:block}.job summary::-webkit-details-marker{display:none}
.job-thumb{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;background:var(--ph)}
.job-info{display:block;min-width:0;margin-top:12px}.job-info>span{display:block}
.job-name{margin-top:6px;font-family:var(--serif);font-weight:400;font-size:clamp(18px,1.45vw,23px);line-height:1.18;letter-spacing:-.008em;text-wrap:balance}
.job-hook{margin-top:6px;font-size:14px;line-height:1.35;color:var(--soft)}
.job-info>.job-mark{display:inline-block;margin-top:10px;padding-inline:6px;background:var(--a)}.job-mark::after{content:"View project +"}.job[open] .job-mark::after{content:"Close –"}
.job[open] summary{background:var(--a);padding:clamp(12px,1.3vw,20px)}.job[open] .job-thumb{display:none}.job[open] .job-info{margin-top:0}.job[open] .job-hook{color:var(--ink)}.job[open] .job-name{font-style:italic;font-size:clamp(26px,2.9vw,46px);line-height:1.08}.job[open] .job-info>.job-mark{background:none;padding-inline:0;text-decoration:underline;text-underline-offset:3px}
.job-body{padding-block:clamp(12px,1.2vw,18px) clamp(24px,3vw,48px)}
.shots{display:flex;gap:clamp(8px,1vw,16px)}.shot{position:relative;margin:0;min-width:0;overflow:hidden;background:var(--ph)}.shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.job-copy{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(24px,4vw,72px);margin-top:clamp(20px,2.4vw,36px)}.job-copy h2{font-family:var(--serif);font-size:clamp(18px,1.45vw,23px);line-height:1.22;margin-bottom:10px;text-wrap:balance}.job-copy p{max-width:58ch;font-size:15px}.built{color:var(--soft)}.built .tag{margin-bottom:4px;color:var(--ink)}
.job-next{display:inline-block;margin-top:clamp(20px,2.4vw,36px);font-size:13px}.job-next:hover{background:var(--a)}
.next{display:block;margin-top:clamp(72px,10vw,160px);padding-block:clamp(56px,8vw,128px);background:var(--yel);font-family:var(--serif);font-weight:300;font-size:clamp(36px,5.6vw,96px);line-height:1.04;letter-spacing:-.03em;text-decoration:none}.next span{display:block;margin-top:14px;font-size:clamp(20px,1.9vw,30px);font-style:italic;letter-spacing:-.015em}
/* Privacy */
.privacy{padding-block:clamp(20px,3vw,48px) clamp(56px,7vw,112px)}.privacy>*{max-width:68ch}.privacy h1{max-width:none;font-family:var(--serif);font-weight:300;font-size:clamp(30px,3.6vw,58px);line-height:1.06;letter-spacing:-.03em;text-wrap:balance}.privacy h1+p{margin-top:14px;color:var(--soft)}.privacy h2{margin-top:clamp(36px,3.6vw,56px);font-family:var(--serif);font-size:clamp(19px,1.5vw,24px);line-height:1.15;letter-spacing:-.015em}.privacy h2+p{margin-top:10px}.privacy p+p{margin-top:14px}.privacy a{overflow-wrap:anywhere}.privacy ul{list-style:disc;padding-left:1.2em;margin-top:10px}.privacy li{margin-top:6px}
/* 404 */
.missing{padding-block:clamp(48px,8vw,130px)}.missing h1{font-family:var(--serif);font-weight:300;font-size:clamp(36px,5.6vw,96px);line-height:1.04;letter-spacing:-.03em}.missing p{margin-top:clamp(24px,3vw,44px);display:flex;flex-wrap:wrap;gap:8px 28px;font-family:var(--serif);font-style:italic;font-size:clamp(20px,1.9vw,30px)}
@media (max-width:820px){.jobs{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 16px}.job:not([open]) .job-hook{display:none}.job-name{font-size:17px;line-height:1.16}.job-copy{grid-template-columns:minmax(0,1fr);row-gap:14px}.shots{flex-direction:column}.shot{flex:none!important;width:100%}h1.s{font-size:10.8vw}h1 .hi{display:inline-block}.hero-top{padding-block:32px 24px}.hero-top h1,.hero-top .side{grid-column:1/-1}.hero-top .side{margin-top:18px}.stack{height:auto;aspect-ratio:3/2}.pause{margin-left:0}.who h2,.who p,.s1a,.s1b,.s2a,.s2b,.s3t h3,.s3t>div,.s4a,.s4b,.note,.types,.tr,.sec>.g>h2{grid-column:1/-1}.who p,.s1b,.s2b,.s3t>div,.s4b,.types,.tr{margin-top:16px}.s1b img,.s4s{display:none}.bleed img{height:auto;aspect-ratio:4/3}.acc{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:dense}.ac:last-child,.ac[open]{grid-column:1/-1}.ac summary{min-height:64px}.ac:last-child summary{min-height:48px}.logos{grid-template-columns:repeat(4,minmax(0,1fr));gap:32px 20px}.logos img{width:calc(var(--k)*62px)}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}