/* Wall-to-wall motion, with large opaque photographic foregrounds. */
body,body.project-page,body.video-page,body.lab-body{background:#09090b;color:#fff;isolation:isolate}
.wall-video{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:#09090b}
.wall-video video{display:block;width:100%;height:100%;object-fit:cover;opacity:1;filter:none}
.wall-video:after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.16)}
.hero,.main-block,.work,.video-section,.project-page header,.lab-body header,.video-page header,.lab-main,.video-archive{background:transparent}
.hero>video,.hero-caption,.still-fragment{display:none!important}
.hero{height:100svh;min-height:700px}
.hero-shade{background:linear-gradient(#0004,transparent 45%,#0003)}
.hero-collage img{mask-image:none;-webkit-mask-image:none;opacity:1;object-fit:contain}
.hero-collage .piece-one{width:43%;height:58%;right:3%;top:15%;transform:none}
.hero-collage .piece-two{width:35%;height:48%;right:40%;top:28%;transform:none}
.hero-collage .piece-three{display:none}
.hero-title{z-index:1}.hero h1{font-size:max(20px, clamp(64px,10vw,160px));text-shadow:0 2px 20px #0008}
.collage-grid{display:flex;flex-direction:column;gap:110px;padding-top:35px}
.collage-grid .project,.collage-grid .project:nth-child(n){width:86%;margin:0!important;align-self:flex-start}
.collage-grid .project:nth-child(even){align-self:flex-end;width:80%}
.collage-grid .project .frame,.collage-grid .project:nth-child(n) .frame{height:auto;overflow:visible;aspect-ratio:auto;background:transparent}
.collage-grid .project img.still-main,.collage-grid .project:nth-child(n) img.still-main,.motion-paused .collage-grid .project img.still-main{display:block;position:static;width:100%;height:auto;max-width:100%;max-height:88svh;object-fit:contain;object-position:left center;opacity:1;mask-image:none;-webkit-mask-image:none;transform:none!important;filter:none}
.collage-grid .project:nth-child(even) img.still-main{object-position:right center}
.project-label,.doom-pop .project-label{padding:14px 0;background:transparent;text-shadow:0 2px 8px #000,0 0 18px #000}
.project h3{font-size:max(20px, clamp(25px,3vw,44px))}
.project-page main{padding:40px 4vw 65px}.project-page header{border:0}
.project-heading{margin-bottom:35px;text-shadow:0 2px 12px #000}.project-heading .back-link{margin-bottom:25px}
.project-documentation{display:flex;flex-direction:column;gap:20px}
.project-images{width:100%}.project-images figure{width:88%;margin:0 0 80px}
.project-images figure:nth-child(even){margin-left:auto}
.project-images img{width:100%;height:auto;max-height:92svh;object-fit:contain;object-position:left center}
.project-images figure:nth-child(even) img{object-position:right center}
.project-images figcaption{color:#fff;text-shadow:0 2px 6px #000}
.project-text{position:static;max-width:760px;padding:24px 28px;background:#0009;backdrop-filter:blur(8px)}
.related-projects,.project-pagination{border:0;text-shadow:0 2px 8px #000;background:#0006;padding:24px}
header,footer,.section-heading,.project-total,.back-link{ text-shadow:0 2px 8px #000}
.filters button{background:#0008}.filters button[aria-pressed=true]{background:#eee;color:#111}
.wall-motion{position:fixed;bottom:20px;right:20px;z-index:10;background:#0009;border:1px solid #ffffff66;color:#fff;padding:11px 15px;font:20px monospace;cursor:pointer}
.video-label,#video-name{display:none!important}.video-thumb{mask-image:none!important;-webkit-mask-image:none!important}
.video-dialog{background:#09090b}
@media(max-width:700px){.hero{min-height:700px}.hero-collage .piece-one{width:68%;height:47%;right:2%;top:21%}.hero-collage .piece-two{width:52%;height:41%;right:42%;top:35%}.hero-title{bottom:105px}.collage-grid{gap:65px}.collage-grid .project,.collage-grid .project:nth-child(n){width:100%;margin:0!important}.project-images figure{width:100%;margin-bottom:45px}.project-images img{max-height:85svh}.project-text{padding:20px}.wall-motion{bottom:12px;right:12px}.project-heading h1{font-size:max(20px, 12vw)}.project-pagination{gap:20px}.hero h1{font-size:max(20px, 12vw)}}

/* Avenir throughout; use installed Avenir faces, with platform fallbacks. */
:root{--site-font:"Avenir","Avenir Next","Segoe UI",sans-serif}
body,button,input,select,textarea,nav,a,p,span,h1,h2,h3,h4,summary,figcaption,.eyebrow,.project-meta,.project-total,.text-link,.project-label p,.wall-motion{font-family:var(--site-font)!important}
.wall-video{z-index:0}
body>:not(.wall-video):not(script){position:relative;z-index:1}
*{text-shadow:none!important;box-shadow:none!important}
.project img,.project video,.hero-collage img,.lab-link img,.video-thumb img,.video-thumb video{filter:none!important;mask-image:none!important;-webkit-mask-image:none!important}
.project-text{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
footer{flex-wrap:wrap;gap:16px}

/* Light, turquoise project page with the supplied film behind the stills. */
:root{--turquoise:#6ff4e3}
body:not(.lab-body):not(.video-page){background:#fff;color:#111}
body:not(.lab-body):not(.video-page) .wall-video{z-index:0;background:#fff}
body:not(.lab-body):not(.video-page) .wall-video:after{background:rgba(255,255,255,.68)}
body:not(.lab-body):not(.video-page)>header{position:relative;inset:auto;z-index:2;display:flex;align-items:center;justify-content:flex-end;padding:24px 5vw;color:#111;background:transparent;border:0}
body:not(.lab-body):not(.video-page)>header nav{max-width:100%;gap:clamp(18px,3.2vw,56px);font-size:max(20px, clamp(12px,1.15vw,17px));letter-spacing:0}
body:not(.lab-body):not(.video-page)>header nav a{color:#111}
body:not(.project-page):not(.lab-body):not(.video-page)>header .wordmark{display:none}
body.project-page>header{color:#111;border-bottom:1px solid #1113}
body.project-page>header nav a,body.project-page>header .wordmark{color:#111}
body:not(.project-page):not(.lab-body):not(.video-page) .hero{display:block!important;height:auto;min-height:0;overflow:visible;padding:5vw 4vw 1.5vw;background:transparent;color:#111}
body:not(.project-page):not(.lab-body):not(.video-page) .hero-title{position:relative;left:auto;right:auto;bottom:auto;z-index:2;display:block;padding:0;pointer-events:none}
body:not(.project-page):not(.lab-body):not(.video-page) .hero h1{margin:0;color:#111;font-size:max(20px, clamp(42px,9.2vw,158px));font-weight:400;letter-spacing:-.065em;line-height:.94;white-space:nowrap;text-shadow:none}
.hero-collage,.hero>video,.hero-shade,.hero-title .enter{display:none!important}
body:not(.lab-body):not(.video-page) .main-block,body:not(.lab-body):not(.video-page) .work,body:not(.lab-body):not(.video-page) .video-section,body:not(.lab-body):not(.video-page) .about-contact,body:not(.lab-body):not(.video-page) .lab-hub{background:transparent;color:#111}
body:not(.lab-body):not(.video-page) .buy-hire{background:var(--turquoise);color:#111}
body:not(.lab-body):not(.video-page) .lab-hub .lab-link{background:var(--turquoise);color:#111}
body:not(.lab-body):not(.video-page) .about-contact .about{background:transparent;color:#111}
body:not(.lab-body):not(.video-page) .section-heading{border:0;color:#111}
body:not(.lab-body):not(.video-page) .section-heading h2{color:#111}
body:not(.lab-body):not(.video-page) #projects-index{padding:0 0 60px}
body:not(.lab-body):not(.video-page) .projects-intro{margin:0 4vw 10px;padding:8px 0;align-items:center;justify-content:space-between}
body:not(.lab-body):not(.video-page) .projects-intro h2{font-size:max(20px, clamp(26px,4.2vw,64px))!important;letter-spacing:.01em;line-height:1}
body:not(.lab-body):not(.video-page) .projects-intro .down-arrow{font-size:max(20px, clamp(76px,11vw,150px));line-height:.72;color:#111}
body:not(.lab-body):not(.video-page) .collage-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:36px 0;padding:24px 4vw 56px}
body:not(.lab-body):not(.video-page) .collage-grid .project,body:not(.lab-body):not(.video-page) .collage-grid .project:nth-child(n){width:auto;margin:0!important;align-self:start}
body:not(.lab-body):not(.video-page) .collage-grid .project:nth-child(6n+1){grid-column:2/9}
body:not(.lab-body):not(.video-page) .collage-grid .project:nth-child(6n+2){grid-column:9/13;margin-top:95px!important}
body:not(.lab-body):not(.video-page) .collage-grid .project:nth-child(6n+3){grid-column:1/7;margin-top:-28px!important}
body:not(.lab-body):not(.video-page) .collage-grid .project:nth-child(6n+4){grid-column:7/13;margin-top:55px!important}
body:not(.lab-body):not(.video-page) .collage-grid .project:nth-child(6n+5){grid-column:2/8;margin-top:10px!important}
body:not(.lab-body):not(.video-page) .collage-grid .project:nth-child(6n){grid-column:8/13;margin-top:85px!important}
body:not(.lab-body):not(.video-page) .collage-grid .project .frame,body:not(.lab-body):not(.video-page) .collage-grid .project:nth-child(n) .frame{height:clamp(300px,48vw,660px);overflow:hidden;padding:clamp(12px,2vw,30px);background:var(--turquoise)}
body:not(.lab-body):not(.video-page) .collage-grid .project:nth-child(6n+2) .frame{height:clamp(260px,34vw,470px)}
body:not(.lab-body):not(.video-page) .collage-grid .project:nth-child(6n+3) .frame{height:clamp(300px,42vw,540px)}
body:not(.lab-body):not(.video-page) .collage-grid .project img.still-main{position:static;width:100%;height:100%;max-width:100%;max-height:none;object-fit:contain;object-position:center;opacity:1;transform:none!important;filter:none!important;mask-image:none!important;-webkit-mask-image:none!important}
body:not(.lab-body):not(.video-page) .project-label,body:not(.lab-body):not(.video-page) .doom-pop .project-label{padding:12px 0 0;color:#111;background:transparent;text-shadow:none}
body:not(.lab-body):not(.video-page) .project-label h3{font-size:max(20px, clamp(19px,2.4vw,36px));font-weight:400;line-height:1.12;color:#111}
body:not(.lab-body):not(.video-page) .project-label p{color:#333}
body:not(.lab-body):not(.video-page) .video-section{display:none}
body:not(.lab-body):not(.video-page) .statement-copy,body:not(.lab-body):not(.video-page) .bio-full{background:rgba(255,255,255,.45);color:#111;text-shadow:none}
body:not(.lab-body):not(.video-page) .enquiry-grid h3,body:not(.lab-body):not(.video-page) .about h3,body:not(.lab-body):not(.video-page) .about p,body:not(.lab-body):not(.video-page) footer{color:#111;text-shadow:none}
@media(max-width:700px){body:not(.lab-body):not(.video-page)>header{display:block;padding:20px 5vw}body:not(.lab-body):not(.video-page)>header nav{justify-content:flex-start;gap:12px 20px;max-width:100%;font-size:max(20px, 12px)}body:not(.project-page):not(.lab-body):not(.video-page) .hero{padding:12vw 5vw 5vw}body:not(.project-page):not(.lab-body):not(.video-page) .hero h1{font-size:max(20px, 11.5vw);letter-spacing:-.07em}body:not(.lab-body):not(.video-page) .projects-intro{margin:0 5vw 8px}body:not(.lab-body):not(.video-page) .collage-grid{display:flex;flex-direction:column;gap:45px;padding:16px 5vw 45px}body:not(.lab-body):not(.video-page) .collage-grid .project,body:not(.lab-body):not(.video-page) .collage-grid .project:nth-child(n){width:100%;margin:0!important;align-self:stretch}body:not(.lab-body):not(.video-page) .collage-grid .project .frame,body:not(.lab-body):not(.video-page) .collage-grid .project:nth-child(n) .frame{height:clamp(300px,86vw,480px);padding:14px}}
.wall-video>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wall-video>video{position:absolute;inset:0}
.wall-video>video[hidden]{display:none}
.wall-motion,.hero-motion,.play-mark,.video-label,.video-help,.part-controls{display:none!important}
video::-webkit-media-controls{display:none!important}
.video-thumb video{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.video-card{cursor:default}
.project[hidden]{display:none!important}
.projects-intro{display:flex;align-items:center;gap:.3em;margin:0 0 28px}
.projects-intro h2{font-size:max(20px, clamp(50px,11vw,150px))!important;line-height:.9;letter-spacing:-.045em}
.projects-intro .down-arrow{font-size:max(20px, clamp(70px,14vw,190px));line-height:.7;font-weight:300}
.collage-grid .project-label p,.collage-grid .project-label .arrow{display:none}
.collage-grid .project-label{padding:18px 0 0}

/* Projects opens the site. The provided video plays as the continuous background. */
.hero{display:none!important}
#projects-index{padding-top:24px}
.collage-grid .project-label h3{font-size:max(20px, clamp(22px,3vw,42px));font-weight:500;line-height:1.2;max-width:1000px;overflow-wrap:anywhere}
.collage-grid .project-label{padding:12px 0 0}

/* Turquoise in the reference marked image windows; it is not part of the finished palette. */
:root{--turquoise:transparent}
body:not(.lab-body):not(.video-page) .collage-grid .project .frame,
body:not(.lab-body):not(.video-page) .collage-grid .project:nth-child(n) .frame{background:transparent;padding:0}
body:not(.lab-body):not(.video-page) .buy-hire,
body:not(.lab-body):not(.video-page) .lab-hub .lab-link{background:transparent;color:#111}

/* Full color video and image layers: remove the white wash and translucent films. */
body:not(.lab-body):not(.video-page) .wall-video:after{background:transparent!important}
.wall-video video,video,.project img,.project .ambient-video,.hero-collage img,.lab-link img,.video-thumb img,.video-thumb video{opacity:1!important;filter:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
body:not(.lab-body):not(.video-page) .statement-copy,
body:not(.lab-body):not(.video-page) .bio-full{background:transparent!important}


/* Keep every title physically attached to its own still. */
body .collage-grid .project{position:relative;isolation:isolate}
body:not(.lab-body):not(.video-page) .collage-grid .project:nth-child(n) .frame{height:auto;overflow:visible;padding:0}
body:not(.lab-body):not(.video-page) .collage-grid .project:nth-child(n) img.still-main{display:block;width:100%;height:auto;max-height:none}
body:not(.lab-body):not(.video-page) .collage-grid .project .project-label{position:absolute;left:4%;bottom:8%;top:auto;width:92%;max-width:92%;margin:0;padding:0;background:transparent;z-index:4}
body .collage-grid .project .project-label h3{margin:0}

/* Long galleries load photographs as they approach the viewport. */
.project-images figure{content-visibility:auto;contain-intrinsic-size:auto 800px}
.project-images figure:first-child{content-visibility:visible}
.project-images img{display:block}
.wall-video:after{background:transparent!important}

.wall-video>img.project-wallpaper{transform:scale(1.5);transform-origin:center;opacity:1;filter:none}

/* Larger title for the long Dear Volunteers project name. */
body:not(.lab-body):not(.video-page) .collage-grid .project[data-project="dear-volunteers"] .project-label h3{font-size:max(20px, clamp(30px,4vw,58px));line-height:1.08}

/* Pale blue text backing, feathered into the artwork. */
:root{--text-backing:linear-gradient(to right,rgba(183,201,226,0),rgba(183,201,226,.62) 12px,rgba(183,201,226,.62) calc(100% - 12px),rgba(183,201,226,0))}
body .project-label h3,
body .project-heading h1,
body .projects-intro,
body header nav a,
body header .wordmark,
body .section-heading h2,
body .back-link,
body footer a,
body .project-meta,
body .enquiry-grid h3,
body .about h3{position:relative;isolation:isolate}
body .project-label h3::before,
body .project-heading h1::before,
body .projects-intro::before,
body header nav a::before,
body header .wordmark::before,
body .section-heading h2::before,
body .back-link::before,
body footer a::before,
body .project-meta::before,
body .enquiry-grid h3::before,
body .about h3::before{content:"";position:absolute;inset:-9px -16px;z-index:-1;background:var(--text-backing);mask-image:linear-gradient(to bottom,transparent,#000 8px,#000 calc(100% - 8px),transparent);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 8px,#000 calc(100% - 8px),transparent);pointer-events:none}
body:not(.lab-body):not(.video-page) .statement-copy,
body:not(.lab-body):not(.video-page) .bio-full{background:var(--text-backing)!important}

/* Inline links need one backing rectangle even when their labels wrap. */
body header nav a,body .back-link,body footer a{display:inline-block}

/* Separate navigation categories and give project prose a readable surface. */
body header nav{display:flex;flex-wrap:wrap;gap:20px 32px!important;align-items:center;max-width:100%}
body header nav a{display:block;padding:12px 18px!important;background:rgba(70,170,225,.5)!important;color:#111!important;border:1px solid #111!important;border-radius:0!important;line-height:1.35;white-space:normal;text-align:center}
body header nav a::before{display:none!important}
body header nav a:hover,body header nav a:focus-visible{background:rgba(105,190,235,.5)!important;color:#111!important}
body .project-text{background:#ededed!important;color:#111!important;padding:24px 28px;border-radius:0;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
body .project-text p,body .project-text a,body .project-text a:hover{color:#111!important}
@media(max-width:700px){body header nav{gap:14px 18px!important;justify-content:flex-start!important}body header nav a{padding:10px 14px!important}body .project-text{padding:20px}}

/* Keep the project sequence chronological without card collisions. */
body:not(.lab-body):not(.video-page) .collage-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-auto-flow:row!important;align-items:start;gap:56px 28px!important;padding:28px 4vw 64px!important}
body:not(.lab-body):not(.video-page) .collage-grid .project,body:not(.lab-body):not(.video-page) .collage-grid .project:nth-child(n){grid-column:auto!important;grid-row:auto!important;width:100%;margin:0!important;align-self:start}
body:not(.lab-body):not(.video-page) .collage-grid .project .frame,body:not(.lab-body):not(.video-page) .collage-grid .project:nth-child(n) .frame{height:clamp(360px,48vw,680px)!important;margin:0!important}
body:not(.lab-body):not(.video-page) .collage-grid .project .project-label{position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;width:100%!important;max-width:none!important;margin:12px 0 0!important;padding:0!important}
@media(max-width:700px){body:not(.lab-body):not(.video-page) .collage-grid{grid-template-columns:1fr!important;gap:42px!important;padding:20px 5vw 48px!important}body:not(.lab-body):not(.video-page) .collage-grid .project .frame{height:clamp(340px,86vw,520px)!important}}

/* Dedicated Doom Pop section and accessible Instagram links. */
body .doom-pop-section{padding:32px 0 60px}
body:not(.lab-body):not(.video-page) .doom-pop-grid{grid-template-columns:minmax(0,1fr)!important;max-width:1100px;margin:0 auto}
body header nav a.instagram-icon{display:flex;align-items:center;justify-content:center;min-width:48px;min-height:48px;padding:10px!important}
.instagram-icon svg,.instagram-link svg{display:block;width:24px;height:24px;flex-shrink:0}
.instagram-link{display:inline-flex;align-items:center;gap:9px}

/* Keep the Instagram label visible beside its orange-pink logo. */
body header nav a.instagram-icon{width:auto;min-width:0;min-height:48px;padding:12px 18px!important;gap:10px;flex-direction:row}
body header nav a.instagram-icon span{color:#111}