:root{--paper:#d9d9d9;--ink:#171716;--white:#fff;--serif:"ivypresto-display",Georgia,"Times New Roman",serif;--body:"ivypresto-text",Georgia,"Times New Roman",serif;--gutter:4vw}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:72px}body{margin:0;background:var(--ink);color:#fff;font-family:var(--body);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit}img{display:block;width:100%;height:100%;object-fit:cover}h1,h2,h3,p{margin:0}a:focus-visible,button:focus-visible{outline:2px solid currentColor;outline-offset:6px}.skip-link{position:fixed;top:12px;left:12px;z-index:100;padding:12px;background:#fff;color:#111;transform:translateY(-180%)}.skip-link:focus{transform:none}.site-header{position:absolute;z-index:4;top:0;left:0;width:100%;display:flex;align-items:center;justify-content:space-between;padding:30px var(--gutter)}.brand{display:block;width:150px}.brand img{height:34px;object-fit:contain;object-position:left center}.site-header nav{display:flex;gap:30px;font:11px Arial,sans-serif;letter-spacing:3px;text-transform:uppercase}.site-header nav a{opacity:.8}.site-header nav a:hover{opacity:1}.hero{height:83svh;min-height:580px;position:relative;isolation:isolate;overflow:hidden;background:#171716}.hero-poster,.hero-film{position:absolute;inset:0;z-index:-2}.hero-poster:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.2),transparent 50%,rgba(0,0,0,.42))}.hero-film{overflow:hidden}.hero-film iframe{position:absolute;top:50%;left:50%;width:max(100vw,147.56svh);height:max(56.25vw,83svh);transform:translate(-50%,-50%);border:0;pointer-events:none}.intro{position:absolute;bottom:90px;left:var(--gutter);max-width:410px}.intro h1{font:600 clamp(26px,2.1vw,36px)/1.2 var(--serif);letter-spacing:.5px;margin-bottom:20px}.intro p{font-size:16px;line-height:1.5}.motion-toggle{position:absolute;right:var(--gutter);bottom:34px;color:#fff;background:rgba(0,0,0,.3);border:1px solid #ffffff60;padding:10px 14px;cursor:pointer;font:10px Arial,sans-serif;text-transform:uppercase;letter-spacing:1.5px}.motion-toggle span{margin-left:14px}.eyebrow{font-size:10px;line-height:1.5;letter-spacing:2.6px;text-transform:uppercase}.project{display:grid;grid-template-columns:1fr 1fr;border-top:10px solid #fff;background:var(--paper);color:#000;min-height:58vw}.project-copy{display:flex;flex-direction:column;position:relative;padding:32px 20px 34px;min-width:0}.project-center{margin:auto;text-align:center;width:100%;padding:70px 11%}.project-center h2{font:600 clamp(48px,6vw,120px)/1.03 var(--serif);letter-spacing:3px;text-transform:uppercase;overflow-wrap:normal}.project-center h2 a{transition:color .2s}.project-center h2 a:hover{color:#fff}.project-center p{font-size:12px;line-height:1.45;max-width:540px;margin:42px auto 0}.project-meta{display:flex;justify-content:space-between;gap:20px}.image-link{display:block;overflow:hidden}.image-link img{transition:transform .6s}.image-link:hover img{transform:scale(1.025)}.project-wide{display:block;min-height:34vw}.project-wide .project-copy{min-height:34vw}.project-wide .project-center{padding:55px 16%}.project-wide .project-center p{max-width:540px}.panorama{display:block;position:relative;height:43.5vw;overflow:hidden}.chapters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;background:#444442;padding:4.4vw 4.7vw 5.8vw}.chapters article{min-width:0}.chapters img{aspect-ratio:3/4;height:auto;object-fit:cover}.chapters h3{font:600 clamp(18px,1.4vw,26px)/1.3 var(--serif);letter-spacing:.5px;margin-top:18px;margin-bottom:10px}.chapters p{font-size:12px;line-height:1.5}.feature{padding:4vw;background:var(--ink)}.feature-image{display:block;position:relative;aspect-ratio:2/1;outline:0 solid white;transition:outline-width .2s}.feature-image h2{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:20px;font:600 clamp(25px,2.1vw,38px)/1.2 var(--serif);text-shadow:0 1px 16px #0008}.feature-details{display:grid;grid-template-columns:1.65fr 1fr .6fr;gap:4vw;padding-top:30px;padding-bottom:42px}.feature-details p{font-size:12px;line-height:1.5}.feature-label{text-align:right}.paired{display:grid;grid-template-columns:1fr 1fr}.media-tile{position:relative;overflow:hidden}.paired .media-tile{height:42vw}.media-tile h3{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;font:600 clamp(25px,2.1vw,38px)/1.2 var(--serif);text-align:center}.media-tile:after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 0 white;transition:box-shadow .2s;pointer-events:none}.media-tile:hover:after{box-shadow:inset 0 0 0 10px white}.site-footer{padding:35px 4vw;background:#000;display:flex;justify-content:space-between;gap:24px}.site-footer a:hover{opacity:.65}.site-footer span{padding:0 10px}
@media(min-width:1800px){.project-center p,.chapters p,.feature-details p{font-size:14px}.eyebrow{font-size:11px}}
@media(max-width:900px){.project-center{padding:60px 7%}.project-center h2{font-size:5.8vw;letter-spacing:1px}.project-center p{margin-top:28px}.eyebrow{letter-spacing:1.6px}.project-meta{flex-direction:column;gap:4px}.feature-details{grid-template-columns:1fr 1fr}.feature-label{grid-column:2;text-align:left}.chapters{gap:15px}.hero{min-height:520px}}
@media(max-width:700px){:root{--gutter:6vw}.site-header{padding:25px var(--gutter)}.brand{width:120px}.site-header nav{gap:20px;font-size:10px;letter-spacing:2px}.hero{height:83svh;min-height:530px;max-height:900px}.hero-film iframe{width:177.78svh;height:100svh}.intro{bottom:70px;max-width:320px;right:6vw}.intro h1{font-size:28px}.intro p{font-size:15px}.motion-toggle{bottom:20px}.project{grid-template-columns:1fr;min-height:0}.project-copy{min-height:510px;padding:24px 6vw}.project-center{padding:65px 0}.project-center h2{font-size:clamp(46px,12vw,80px);letter-spacing:2px}.project-center p{font-size:13px;max-width:440px;margin-top:28px}.project-meta{flex-direction:row;align-items:end}.project-meta span:last-child{text-align:right}.image-link{height:112vw;max-height:750px}.project-wide .project-copy{min-height:510px}.project-wide .project-center{padding:55px 0}.panorama{height:65vw;min-height:230px}.chapters{grid-template-columns:1fr;padding:9vw 6vw 12vw;gap:42px}.chapters img{aspect-ratio:4/5}.chapters h3{font-size:23px}.chapters p{font-size:13px;line-height:1.55}.feature{padding:8vw 6vw}.feature-image{aspect-ratio:4/5}.feature-image h2{font-size:28px}.feature-details{grid-template-columns:1fr;gap:22px;padding:25px 0 12px}.feature-details p{font-size:13px}.feature-label{grid-column:auto;text-align:left}.paired{grid-template-columns:1fr}.paired .media-tile{height:100vw}.media-tile h3{font-size:27px}.site-footer{padding:30px 6vw;flex-wrap:wrap;font-size:9px;letter-spacing:1.5px}.site-footer span{padding:0 5px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}

#interstellar .project-center h2,#battlefield .project-center h2{font-size:clamp(36px,4.6vw,100px)}
@media(max-width:700px){#interstellar .project-center h2,#battlefield .project-center h2{font-size:clamp(36px,10vw,70px)}}


/* Whole-card links: white surround, black supporting text, no layout shift. */
.portfolio-card{display:block;position:relative;isolation:isolate;height:100%;background:var(--card-rest,transparent);box-shadow:0 0 0 10px var(--card-rest,transparent);transition:color .25s ease}
.chapter-card{padding-bottom:20px}
.portfolio-card:focus-visible{outline:none;color:#000}
.feature-card .feature-image h2{color:#fff}
@media(any-hover:hover){
 .portfolio-card:hover{color:#000}
}
@media(prefers-reduced-motion:reduce){.portfolio-card{transition:none}}

/* Supporting typography from the original site. */
body{font-weight:300}
.eyebrow{font-family:"Montserrat",Arial,sans-serif;font-weight:400}
.feature-details .project-role,.feature-details .feature-label{font-family:var(--serif);font-weight:400}
.project-date{font-family:"Montserrat",Arial,sans-serif}
.site-header nav{font-family:"Montserrat",Arial,sans-serif;font-weight:700}
.site-footer{font-family:"Montserrat",Arial,sans-serif}
.site-footer>a{font-weight:700;letter-spacing:1px}
.site-footer>div{font-weight:400;letter-spacing:3px}

/* Project labels retain the original editorial serif treatment. */
.project-copy .eyebrow{font-family:var(--serif);font-weight:400}
#dataland .project-center h2{font-size:clamp(48px,6.5vw,130px)}
#interstellar .project-center h2,#battlefield .project-center h2{font-size:clamp(48px,6.5vw,130px);hyphens:manual;overflow-wrap:normal}
.video-panorama>img,.video-panorama>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.artwork-video{opacity:0}
.artwork-video.is-playing{opacity:1}
@media(max-width:700px){#dataland .project-center h2{font-size:clamp(44px,12.5vw,88px)}#interstellar .project-center h2,#battlefield .project-center h2{font-size:clamp(48px,14vw,96px)}}
/* Independent banner clips retain native aspect ratio; crop settings are per clip. */
.hero-film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none}
.hero-film video.is-current{opacity:1}
.hero-film:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.2),transparent 50%,rgba(0,0,0,.42));pointer-events:none}
.hero-film video{background:#171716}

/* Homepage project loops overlay the original image fallbacks. */
.image-link,.chapter-media{position:relative}.chapter-media{display:block;overflow:hidden}
.image-link>.artwork-video,.chapter-media>.artwork-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}

.feature-image>.artwork-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}

::selection{background:#000;color:#fff;text-shadow:none}

/* The mobile landing banner shares the project hero viewport. */
@media(max-width:767px){#home-hero{height:100svh;min-height:0;max-height:none}#home-hero .intro{bottom:max(32px,env(safe-area-inset-bottom))}}

.portfolio-card.is-pressed,.portfolio-card:active{color:#000;transition:none}
.media-tile.is-pressed:after,.media-tile:active:after{box-shadow:inset 0 0 0 10px white;transition:none}
.image-link.is-pressed img,.image-link:active img{transform:scale(1.025)}
.project-center h2 a.is-pressed,.project-center h2 a:active{color:#fff}

/* The shared logo fades from white to light grey for pointer, touch, and keyboard input. */
.brand img{transition:filter .25s ease}
@media(any-hover:hover){.brand:hover img{filter:brightness(.85)}}
.brand:focus-visible img,.brand:active img,.brand.is-pressed img{filter:brightness(.85)}
@media(prefers-reduced-motion:reduce){.brand img{transition:none}}

/* Full-bleed banners extend beneath the iPhone notch; controls remain in the safe area. */
.site-header{padding-top:calc(30px + env(safe-area-inset-top,0px));padding-left:max(var(--gutter),env(safe-area-inset-left,0px));padding-right:max(var(--gutter),env(safe-area-inset-right,0px))}
.site-footer{padding-bottom:max(35px,env(safe-area-inset-bottom,0px));padding-left:max(4vw,env(safe-area-inset-left,0px));padding-right:max(4vw,env(safe-area-inset-right,0px))}
@media(max-width:700px){
 .site-header{padding-top:calc(25px + env(safe-area-inset-top,0px))}
 .site-footer{padding-bottom:max(30px,env(safe-area-inset-bottom,0px));padding-left:max(6vw,env(safe-area-inset-left,0px));padding-right:max(6vw,env(safe-area-inset-right,0px))}
}
@media(max-width:767px){#home-hero .intro{left:max(6vw,env(safe-area-inset-left,0px));right:max(6vw,env(safe-area-inset-right,0px))}}

/* Each mobile project panel keeps the same portrait canvas. */
@media(max-width:700px){
 .project>.project-copy,.project>.image-link{aspect-ratio:2/3;height:auto;min-height:0;max-height:none}
 .project>.image-link>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
 .project-center,.project-wide .project-center{padding:clamp(24px,8vw,56px) 0}
}

/* Evening design pass: Info's light serif on the homepage banner. */
.hero .intro{max-width:660px;width:51vw;bottom:64px}
.hero .intro h1{font:300 clamp(25.6px,2.72vw,46.4px)/1.35 var(--serif);letter-spacing:.01em;margin:0;text-wrap:pretty}
.hero-poster:after{background:linear-gradient(180deg,#0002,transparent 30%,#0009)}
.project-cta,.mobile-project-mark{display:none}
@media(max-width:700px){
 .hero .intro{width:auto;max-width:560px;bottom:max(32px,env(safe-area-inset-bottom));left:6vw;right:6vw}
 .hero .intro h1{font-size:clamp(23.2px,5.84vw,32px)}
 .project-center,.project-wide .project-center{padding:20px 0}
 .project-center p{margin-top:24px}
 .project-cta{display:inline-flex;align-items:center;gap:18px;min-height:44px;margin-top:18px;font:500 10px/1.5 "Montserrat",Arial,sans-serif;letter-spacing:1.5px;text-transform:uppercase}
 .project-cta span{font:300 26px/1 Arial,sans-serif}
 .portfolio-card,.media-tile{position:relative}
 .mobile-project-mark{display:flex;align-items:center;justify-content:center;width:44px;height:44px;font:300 28px/1 Arial,sans-serif}
 .chapter-card .mobile-project-mark,.feature-card .mobile-project-mark{margin-top:12px}
 .media-tile .mobile-project-mark{position:absolute;bottom:14px;right:14px;background:#171716a6}
}

/* Alternating desktop pairs, image-first mobile reading order, and shared media feedback. */
@media(min-width:701px){#interstellar>.image-link{order:-1}}
.image-link:after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;box-shadow:inset 0 0 0 0 var(--paper);transition:box-shadow .2s ease}
.image-link:focus-visible:after,.image-link.is-pressed:after,.image-link:active:after{box-shadow:inset 0 0 0 10px var(--paper)}
.media-tile:focus-visible:after{box-shadow:inset 0 0 0 10px #fff}
.feature-image{overflow:hidden}
.feature-image>img,.feature-image>video,.media-tile>img,.media-tile>video,.image-link>video{transition:transform .6s ease}
.feature-card:focus-visible .feature-image>img,.feature-card:focus-visible .feature-image>video,
.feature-card.is-pressed .feature-image>img,.feature-card.is-pressed .feature-image>video,
.feature-card:active .feature-image>img,.feature-card:active .feature-image>video,
.media-tile:focus-visible>img,.media-tile:focus-visible>video,.media-tile.is-pressed>img,.media-tile.is-pressed>video,.media-tile:active>img,.media-tile:active>video,
.image-link:focus-visible>img,.image-link:focus-visible>video,.image-link.is-pressed>video,.image-link:active>video{transform:scale(1.025)}
@media(any-hover:hover){
 .image-link:hover:after{box-shadow:inset 0 0 0 10px var(--paper)}
 .image-link:hover>video,.feature-card:hover .feature-image>img,.feature-card:hover .feature-image>video,.media-tile:hover>img,.media-tile:hover>video{transform:scale(1.025)}
}
@media(max-width:700px){
 .project>.image-link{order:-1}
 .project-cta{flex-direction:column;gap:6px}
 .chapters{padding-inline:6vw}
 .chapter-card .mobile-project-mark{width:24px;height:24px;font-size:16px}
 #dataland-2,#interstellar-3{height:auto;aspect-ratio:1;min-height:0}
}

/* Mobile cards retain their original artwork width with a darker resting surround. */
@media(max-width:700px){
 .chapters .portfolio-card,.feature .portfolio-card{--card-rest:#383838}
 .feature{background:#444442}
}

/* The surround grows and fades behind stationary card content. */
.portfolio-card:before{content:"";position:absolute;inset:-10px;z-index:-1;pointer-events:none;background:#fff;opacity:0;transform:scale(.97);transition:transform .3s ease,opacity .3s ease}
.portfolio-card:focus-visible:before,.portfolio-card.is-pressed:before,.portfolio-card:active:before{opacity:1;transform:scale(1)}
@media(any-hover:hover){.portfolio-card:hover:before{opacity:1;transform:scale(1)}}
.project-cta{transition:color .2s ease}
.project-cta:focus-visible,.project-cta.is-pressed,.project-cta:active{color:#fff}
@media(any-hover:hover){.project-cta:hover{color:#fff}}

/* Align the mobile plus glyph with the card's text edge. */
@media(max-width:700px){
 .chapter-card .mobile-project-mark,.feature-card .mobile-project-mark{justify-content:flex-start}
}


/* Dolby tile loops retain the still beneath them until playback starts. */
.paired .media-tile>.artwork-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
/* Explicit layers avoid negative-z video surfaces disappearing on mobile. */
.hero-poster{z-index:0}.hero-film{z-index:1}.hero .intro{z-index:2}

/* Keep the independent still over unconfirmed, paused or buffering video surfaces. */
.hero-poster{z-index:2;opacity:1;visibility:visible;pointer-events:none}
.hero.has-video-frame .hero-poster{opacity:0;visibility:hidden}
.hero .intro{z-index:3}

/* Pin every home loading layer to the banner, including before video metadata arrives. */
#home-hero>.hero-poster,#home-hero>.hero-film{width:100%;height:100%}
#home-hero>.hero-poster>img{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;object-fit:cover}