/* 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: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: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:11px 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:12vw}.project-pagination{gap:20px}.hero h1{font-size: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}
.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:clamp(50px,11vw,150px)!important;line-height:.9;letter-spacing:-.045em}
.projects-intro .down-arrow{font-size: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: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}