:root{color-scheme:dark;--ink:#fff;--muted:#bababa}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#111;color:white;font:400 16px/1.4 'Helvetica Neue',Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}a:focus-visible,button:focus-visible{outline:2px solid white;outline-offset:5px}.skip{position:absolute;top:-100px;z-index:10;background:#111;padding:14px}.skip:focus{top:0}header{position:absolute;inset:0 0 auto;display:flex;align-items:start;gap:28px;z-index:3;padding:32px 40px;pointer-events:none}header>*{pointer-events:auto}.wordmark{font-family:Didot,'Bodoni MT','Times New Roman',serif;font-size:clamp(32px,3.6vw,58px);font-weight:400;line-height:.88;letter-spacing:-.055em}.profession{font-size:12px;line-height:1.5;max-width:140px;margin-top:7px;color:#eee}nav{margin-left:auto;display:flex;gap:32px;padding-top:5px;font-size:14px}nav a,nav button{padding:6px 0}nav a:hover,nav button:hover{border-bottom:1px solid white}.opening{position:relative;height:100svh;min-height:620px}.hero{position:absolute;inset:0;background:#171717;overflow:hidden}.hero>img{width:100%;height:100%;display:block;object-fit:cover}.hero:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.34),transparent 27%,rgba(0,0,0,.12) 58%,rgba(0,0,0,.65))}.hero>button{position:absolute;inset:0;width:100%;height:100%;z-index:2}.hero>button span{position:absolute;left:50%;top:calc(54% + 55px);transform:translateX(-50%);border-bottom:1px solid rgba(255,255,255,.6);padding:8px 0;font-size:13px;white-space:nowrap}.hero>button:hover span{border-color:white}.hero>button:focus-visible{outline-offset:-8px}.caption{position:absolute;z-index:2;top:46%;left:15%;right:15%;text-align:center;pointer-events:none;text-shadow:0 2px 15px rgba(0,0,0,.6)}#hero-client{font-size:12px;letter-spacing:.16em;text-transform:uppercase}.caption h1{font-size:clamp(23px,2.8vw,40px);line-height:1.15;letter-spacing:-.035em;font-weight:400;margin:11px 0;text-transform:none}.caption #hero-role{font-size:12px;color:#eee}.selection-bar{position:absolute;bottom:32px;left:40px;right:40px;display:flex;align-items:center;justify-content:center;z-index:3;padding:0 80px}#categories{display:flex;gap:35px;overflow-x:auto;scrollbar-width:none}#categories button{font-size:14px;white-space:nowrap;color:#dadada;padding:9px 0;border-bottom:1px solid transparent}#categories button[aria-selected=true]{color:white;border-color:white}.arrows{position:absolute;right:0;display:flex;gap:22px}.arrows button{font-size:21px;min-width:30px;min-height:40px}.filmstrip{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:3px;padding:3px 0 10px;scrollbar-width:thin;scrollbar-color:#555 #111}.thumbnail{flex:0 0 calc((100% - 15px)/6);min-width:165px;scroll-snap-align:start;opacity:.55;transition:opacity .2s}.thumbnail:hover,.thumbnail[aria-pressed=true]{opacity:1}.thumbnail img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}.thumbnail[aria-pressed=true]{box-shadow:inset 0 -2px white;padding-bottom:3px}footer{display:flex;gap:25px;justify-content:flex-end;padding:22px 40px 30px;font-size:12px;color:var(--muted)}
dialog{width:min(1200px,94vw);max-height:94dvh;border:0;background:white;color:var(--ink);padding:35px;overflow-y:auto}dialog::backdrop{background:rgba(0,0,0,.75)}.close{display:block;margin-left:auto;font-size:14px;padding:5px 0 22px}.detail-heading{padding:10px 0 30px}.detail-heading>p{font-size:14px;color:var(--muted);margin:0 0 12px}h2{font-size:28px;line-height:1.2;letter-spacing:-.03em;font-weight:400;margin:0}.detail-heading pre{font:14px/1.7 'Helvetica Neue',Helvetica,Arial,sans-serif;white-space:pre-wrap;color:var(--muted);margin-top:25px}#detail-gallery{display:grid;grid-template-columns:1fr 1fr;gap:14px}#detail-gallery img{width:100%;height:auto;display:block}#detail-gallery img:first-child{grid-column:1/-1}.source-link{display:inline-block;margin:30px 0 5px;font-size:14px;color:var(--muted)}#about-dialog{width:min(620px,94vw);padding:40px}#about-dialog h2{font-size:28px;margin:15px 0 35px}#about-dialog>p{font-size:16px;line-height:1.7;color:#555}#about-dialog>a{display:inline-block;font-size:14px;margin:22px 0}
dialog{color:#151515;--muted:#656565;color-scheme:light}dialog button:focus-visible,dialog a:focus-visible{outline-color:#151515}.source-link{color:#656565}@media(max-width:760px){header{padding:23px 22px;gap:15px}.wordmark{font-size:36px}.profession{display:none}nav{gap:22px;font-size:14px}.opening{height:90svh;min-height:590px}.caption{left:8%;right:8%;top:43%}.caption h1{font-size:27px;max-width:320px;margin:12px auto}.hero>button span{top:calc(53% + 65px)}.selection-bar{left:22px;right:22px;bottom:22px;padding:0;justify-content:start}#categories{gap:23px}#categories button{font-size:14px}.arrows{display:none}.filmstrip{gap:3px}.thumbnail{flex-basis:43%;min-width:145px}footer{padding:20px 22px 28px;justify-content:flex-start}dialog{padding:20px}#detail-gallery{grid-template-columns:1fr;gap:8px}#about-dialog{padding:25px}}@media(max-height:500px) and (min-width:761px){.opening{min-height:560px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* Supplied identity, displayed directly from the original artwork. */
header .wordmark{display:block;width:clamp(250px,32vw,430px);font-family:inherit;line-height:1;letter-spacing:normal;flex-shrink:0}header .brand-name{display:block;width:100%;height:auto;mix-blend-mode:screen}header .profession{display:block;font:400 12px/1.5 'Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#f6f5ec;max-width:none;margin:9px 0 0 3px}footer{align-items:center}.brand-symbol{display:block;width:52px;height:auto;margin-right:auto;mix-blend-mode:screen}#categories button[aria-selected=true]{border-color:#f2ec97}@media(max-width:760px){header{gap:10px}header .wordmark{width:59vw;max-width:270px}header .profession{font-size:12px;letter-spacing:.08em;margin-top:8px}header nav{gap:14px;font-size:12px;padding-top:0}.brand-symbol{width:40px}footer{gap:18px}}

header .brand-name,.brand-symbol{mix-blend-mode:normal}header .profession{text-transform:none;letter-spacing:.025em;font-size:12px;line-height:1.5}@media(max-width:760px){header .profession{max-width:220px;font-size:12px;letter-spacing:0}}

footer{flex-wrap:wrap}


#mobile-menu-open{display:none}
#mobile-menu{background:#111;color:#fff;max-width:380px;padding:24px}
#mobile-menu .close{color:#ddd}
#mobile-categories{display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin:0;padding:0}
#mobile-categories button{font-size:20px;font-weight:400;line-height:1.4;padding:8px 0;text-align:left;border:0}
#mobile-categories button[aria-pressed=true]{color:#f2ec97}
#mobile-projects{display:flex;flex-direction:column;gap:4px;border-top:1px solid #454545;margin-top:22px;padding-top:18px}
#mobile-projects button{font-size:14px;line-height:1.5;text-align:left;padding:9px 0;color:#ccc}
@media(max-width:760px){
 body{position:relative}
 header{position:absolute;inset:0 0 auto;display:flex;align-items:flex-start;padding:calc(25px + env(safe-area-inset-top)) 22px 20px;gap:16px;z-index:4}
 header .wordmark{width:auto;max-width:250px;min-width:0;flex:1}
 header .profession{max-width:190px;margin:9px 0 0;font-size:11px;line-height:1.5}
 header nav{display:flex;flex-direction:column;align-items:flex-end;gap:4px;margin:0 0 0 auto;padding:0;flex-shrink:0;font-size:12px}
 header nav a,header nav button{padding:5px 0}
 .opening{height:100svh;min-height:560px;display:block;position:relative}
 .hero{position:absolute;inset:0;overflow:hidden;background:#111}
 .hero>img{width:100%;height:100%;aspect-ratio:9/16;object-fit:cover;object-position:center}
 .hero:after{display:block;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.55),transparent 30%,rgba(0,0,0,.10) 55%,rgba(0,0,0,.72))}
 .hero>button{position:absolute;inset:0;width:100%;height:100%;z-index:2}
 .hero>button span{display:none}
 .caption{position:absolute;top:auto;left:94px;right:22px;bottom:calc(102px + env(safe-area-inset-bottom));margin:0;padding:0;display:block;text-align:right;text-shadow:0 1px 12px rgba(0,0,0,.7);z-index:3}
 .caption #hero-client{display:none}
 .caption h1{font-size:clamp(23px,6vw,31px);line-height:1.1;max-width:300px;margin:0 0 9px auto;overflow-wrap:anywhere}
 .caption #hero-role{font-size:12px}
 .selection-bar,.filmstrip{display:none}
 #mobile-menu-open{position:absolute;display:flex;flex-direction:column;justify-content:center;gap:5px;left:16px;top:calc(max(100svh,560px) - 150px - env(safe-area-inset-bottom));width:44px;height:44px;padding:10px 7px;z-index:5}
 #mobile-menu-open span{height:1px;width:27px;background:#fff;display:block}
 footer{position:absolute;top:calc(max(100svh,560px) - 60px - env(safe-area-inset-bottom));left:0;right:0;min-height:44px;padding:12px 22px 16px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:11px;color:#eee;z-index:4}
 footer .brand-symbol{display:none}
 #mobile-menu{width:calc(100% - 32px);max-height:calc(100svh - 48px);margin:auto auto 24px 16px}
}

/* Shared editorial typography and the supplied signature. */
body,button,.detail-heading pre{font-family:'Avenir Next',Avenir,'Helvetica Neue',Arial,sans-serif}
h1,h2,#mobile-categories button{font-family:Montserrat,'Avenir Next',sans-serif;font-weight:300}
.caption h1{font-weight:700}
#hero-client{font-family:Montserrat,'Avenir Next',sans-serif;font-weight:300}
#hero-role,.detail-heading>p,.detail-heading pre,#about-dialog>p,.source-link{font-family:'Avenir Next',Avenir,'Helvetica Neue',Arial,sans-serif}
header .brand-signature{width:100%;height:auto}
.contact-icon{display:none}
@media(max-width:760px){
 .caption{bottom:calc(78px + env(safe-area-inset-bottom));left:90px;right:22px}
 .caption #hero-client{display:block;font-size:11px;line-height:1.5;letter-spacing:.09em;font-weight:300}
 .caption h1{font-size:clamp(15px,4.2vw,19px);line-height:1.25;font-weight:700;margin:4px 0 5px auto;max-width:275px}
 .caption #hero-role{display:block;font-size:11px;line-height:1.5;font-weight:400}
 #mobile-menu-open{top:calc(max(100svh,560px) - 120px - env(safe-area-inset-bottom))}
 footer{justify-content:center;gap:20px;top:calc(max(100svh,560px) - 58px - env(safe-area-inset-bottom));padding:0 22px;min-height:44px}
 footer a{display:flex;align-items:center;justify-content:center;width:44px;height:44px;color:#fff}
 footer .contact-label{display:none}
 footer .contact-icon{display:block;width:25px;height:25px}
 #mobile-categories button{font-weight:300;font-size:20px}
}

/* Mobile navigation: categories followed by the about page. */
@media(max-width:760px){
 header .desktop-navigation{display:none!important}
 #mobile-categories .mobile-about{align-self:stretch;margin-top:14px;padding-top:22px;border-top:1px solid #454545;color:#f2ec97}
 #mobile-menu button:focus-visible{outline-color:#f2ec97}
}

/* October reference: gold signature, editorial titles and restrained details. */
:root{--gold:#e5c773;--silver:#c1c3c6}
body{background:#05080c}
header{padding:42px 48px}
header .wordmark{width:clamp(280px,32vw,460px)}
header nav{font-size:12px;letter-spacing:.09em;color:var(--silver)}
.caption{top:auto;left:48px;right:48px;bottom:135px;text-align:left;text-shadow:0 2px 16px #0008}
.caption #hero-client{display:block;font:300 11px/1.5 Montserrat,sans-serif;letter-spacing:.16em;color:var(--silver)}
.caption h1{font-family:Italiana,Didot,'Bodoni MT',serif;font-size:clamp(40px,4.7vw,72px);font-weight:400;line-height:1.08;letter-spacing:-.025em;color:var(--gold);margin:7px 0 0;max-width:80%;text-transform:uppercase}
.caption #hero-role{display:block;font-size:12px;letter-spacing:.14em;color:var(--silver);line-height:1.5}
.caption #hero-role:before{content:'';display:block;width:28px;height:1px;background:var(--gold);margin:19px 0 16px}
.hero:after{background:linear-gradient(180deg,#0004,transparent 32%,#0002 55%,#020509dd)}
.hero>button span{top:auto;bottom:90px;left:48px;transform:none;font-size:11px;color:var(--silver);letter-spacing:.08em;border-color:#e5c77366}
.selection-bar{left:48px;right:48px;bottom:28px;padding:0 85px 0 0;justify-content:flex-start}
#categories{gap:30px}
#categories button{font-size:12px;letter-spacing:.035em;color:var(--silver)}
#categories button[aria-selected=true]{color:var(--gold);border-color:var(--gold)}
.arrows{color:var(--gold)}
footer{padding:20px 48px 28px;gap:18px;color:var(--silver);font-size:11px;letter-spacing:.07em}
footer a{transition:color .2s}
footer a:hover{color:var(--gold)}
#mobile-menu{background:#090d12;color:var(--silver)}
#mobile-categories button{font-size:17px;letter-spacing:.02em}
#mobile-categories button[aria-pressed=true],#mobile-categories .mobile-about{color:var(--gold)}
h2{font-family:Italiana,Didot,serif;font-weight:400;font-size:36px}
#about-dialog h2{font-size:36px}
@media(max-width:760px){
 header{padding:calc(7svh + env(safe-area-inset-top)) 6.5vw 0;gap:0}
 header .wordmark{width:65vw;max-width:360px;flex:none}
 header .desktop-navigation{display:none!important}
 #mobile-menu-open{top:calc(7svh + env(safe-area-inset-top));left:auto;right:calc(6.5vw - 7px);width:44px;height:44px;gap:4px;padding:10px}
 #mobile-menu-open span{width:23px;height:1px;background:var(--gold)}
 .hero:after{background:linear-gradient(180deg,#0002,transparent 33%,#00000008 54%,#020509c9 81%,#020509f5)}
 .caption{top:auto;left:6.5vw;right:6.5vw;bottom:calc(13svh + env(safe-area-inset-bottom));text-align:left}
 .caption #hero-client{font:300 clamp(9px,2vw,11px)/1.5 Montserrat,sans-serif;letter-spacing:.14em;color:var(--silver)}
 .caption h1{font-family:Italiana,Didot,'Bodoni MT',serif;font-size:clamp(32px,8.4vw,54px);font-weight:400;line-height:1.1;letter-spacing:-.025em;color:var(--gold);margin:5px 0 0;max-width:100%;overflow-wrap:normal}
 .caption #hero-role{font-size:clamp(10px,2.15vw,12px);line-height:1.6;letter-spacing:.15em;color:var(--silver)}
 .caption #hero-role:before{width:23px;margin:13px 0 12px}
 footer{top:calc(max(100svh,560px) - 7svh - 44px - env(safe-area-inset-bottom));left:calc(6.5vw - 12px);right:auto;padding:0;gap:8px;justify-content:flex-start;flex-wrap:nowrap;height:44px}
 footer a{width:44px;height:44px;position:relative;color:var(--silver)}
 footer a+a:before{content:'';position:absolute;left:-4px;height:11px;width:1px;background:#c1c3c64d}
 footer .contact-icon{width:16px;height:16px}
 #mobile-menu{margin:auto 16px 24px;width:calc(100% - 32px)}
 #mobile-categories .mobile-about{border-top-color:#c1c3c640;color:var(--gold)}
}
@media(max-width:760px) and (max-height:620px){
 .caption{bottom:104px}
 footer{top:calc(max(100svh,560px) - 64px - env(safe-area-inset-bottom))}
 header{padding-top:30px}
 #mobile-menu-open{top:30px}
}

@media(min-width:761px){
 footer{justify-content:flex-start;gap:8px;padding:10px 36px 22px}
 footer .brand-symbol,footer .contact-label{display:none}
 footer a{display:flex;align-items:center;justify-content:center;position:relative;width:44px;height:44px;color:var(--silver)}
 footer .contact-icon{display:block;width:16px;height:16px}
 footer a+a:before{content:'';position:absolute;left:-4px;width:1px;height:11px;background:#c1c3c64d}
}

/* Full galleries and a bottom-anchored mobile project carousel. */
header:before{content:'';position:absolute;inset:0 0 -65px;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.48),rgba(0,0,0,.22) 55%,transparent)}
#swipe-next{display:none}
@media(max-width:760px){
 .opening{height:100svh;min-height:560px}
 .caption{bottom:calc(116px + env(safe-area-inset-bottom));left:6.5vw;right:6.5vw}
 .caption h1{font-size:clamp(28px,7.5vw,44px);line-height:1.06;margin-top:3px}
 .caption #hero-role:before{margin:9px 0 8px;width:22px}
 .caption #hero-client{font-size:9px}
 .caption #hero-role{font-size:10px}
 footer{top:calc(max(100svh,560px) - 102px - env(safe-area-inset-bottom));left:calc(6.5vw - 12px);right:auto;height:44px;min-height:44px;padding:0;gap:8px}
 .filmstrip{position:absolute;display:flex;top:calc(max(100svh,560px) - 54px - env(safe-area-inset-bottom));left:0;right:0;height:46px;gap:6px;padding:3px calc(50% - 32px);z-index:4;scrollbar-width:none;scroll-snap-type:x proximity;align-items:center;overflow-x:auto;overscroll-behavior-x:contain}
 .filmstrip::-webkit-scrollbar{display:none}
 .filmstrip .thumbnail{flex:0 0 64px;min-width:64px;height:40px;padding:2px;border:1px solid transparent;opacity:.36;scroll-snap-align:center;transition:opacity .2s,border-color .2s}
 .filmstrip .thumbnail img{width:100%;height:100%;object-fit:cover}
 .filmstrip .thumbnail[aria-pressed=true]{opacity:1;border-color:var(--gold);box-shadow:none;padding:2px}
 .filmstrip .thumbnail:hover,.filmstrip .thumbnail:focus-visible{opacity:1}
 #swipe-next{display:flex;align-items:center;justify-content:center;position:absolute;right:calc(6.5vw - 10px);top:calc(50% - 22px);width:44px;height:44px;z-index:3;color:#fff;opacity:.7;filter:drop-shadow(0 1px 3px #000)}
 #swipe-next svg{width:27px;height:18px}
 #swipe-next[hidden]{display:none}
}

/* White typography, restrained gold details and a quieter mobile footer. */
:root{--silver:#fff}
header:before{inset:0 0 -80px;background:linear-gradient(180deg,rgba(0,0,0,.68),rgba(0,0,0,.5) 48%,rgba(0,0,0,.24) 72%,transparent)}
header .brand-signature{filter:drop-shadow(0 1px 2px rgba(0,0,0,.3))}
.caption h1{color:#fff;-webkit-text-stroke:.25px currentColor}
.caption #hero-client,.caption #hero-role,header nav,.hero>button span{color:#fff}
#categories button,#categories button[aria-selected=true],#mobile-categories button,#mobile-categories button[aria-pressed=true],#mobile-categories .mobile-about,#mobile-menu .close{color:#fff}
#mobile-categories .mobile-about{border-top-color:#e5c77366}
#categories button[aria-selected=true]{border-color:var(--gold)}
#swipe-next{color:var(--gold)}
footer a,footer a:hover{color:#fff}
dialog{background:#0d1014;color:#fff;--muted:#fff;color-scheme:dark}
.detail-heading>p,.detail-heading pre,#about-dialog>p,#about-dialog>a{color:#fff}
dialog button:focus-visible,dialog a:focus-visible{outline-color:var(--gold)}
#mobile-project-link{display:none}
@media(max-width:760px){
 .caption{bottom:calc(114px + env(safe-area-inset-bottom))}
 .caption h1{color:#fff;margin-top:3px;line-height:1.04;-webkit-text-stroke:.2px currentColor}
 .caption #hero-role:before{margin:5px 0;width:19px}
 .caption #hero-role{line-height:1.25}
 #mobile-project-link{display:block;pointer-events:auto;color:#fff;font-size:10px;line-height:1.4;letter-spacing:.07em;margin:5px 0 0;padding:6px 0;min-height:28px;border-bottom:1px solid #e5c77370}
 .filmstrip{top:calc(max(100svh,560px) - 94px - env(safe-area-inset-bottom));height:40px;padding:2px 6.5vw;gap:7px;scroll-padding-inline:6.5vw}
 .filmstrip .thumbnail{flex-basis:60px;min-width:60px;height:36px;padding:1px;opacity:.72;scroll-snap-align:start}
 .filmstrip .thumbnail[aria-pressed=true]{opacity:1;border-color:#e5c77366;padding:1px;box-shadow:none}
 footer{top:calc(max(100svh,560px) - 48px - env(safe-area-inset-bottom));left:0;right:0;justify-content:center;gap:8px;padding:0;height:44px}
 footer a+a:before{display:none}
 #swipe-next{color:var(--gold)}
}

/* Contact page, unified footer and high-contrast type. */
:root{--muted:#fff}
body,header nav,.caption #hero-client,.caption #hero-role,.detail-heading>p,.detail-heading pre,#about-dialog>p,.source-link,dialog .close{color:#fff}
header nav,.caption,.hero>button span,footer a,#mobile-categories,dialog{ text-shadow:0 1px 4px rgba(0,0,0,.45)}
footer{justify-content:center}
footer a+a:before{display:none}
#mobile-categories .mobile-contact{color:#fff;font-family:Montserrat,'Avenir Next',sans-serif;font-weight:300;font-size:17px;line-height:1.4;letter-spacing:.02em;padding:8px 0;border:0}
.contact-page{min-height:100svh;display:flex;flex-direction:column;background:#080b10;color:#fff}
.contact-page header{position:relative;inset:auto;flex-shrink:0}
.contact-back{margin-left:auto;font-size:12px;padding:10px 0;color:#fff;text-shadow:0 1px 4px #0008}
.contact-content{flex:1;width:min(760px,100%);margin:50px auto 60px;padding:0 48px;color:#fff;text-shadow:0 1px 4px #0008}
.contact-content h1{font-family:Italiana,Didot,serif;font-size:clamp(40px,6vw,64px);font-weight:400;-webkit-text-stroke:.2px currentColor;margin:0 0 36px;line-height:1.1}
.contact-list{display:flex;flex-direction:column}
.contact-list>a{display:grid;grid-template-columns:120px 1fr;gap:20px;padding:19px 0;border-bottom:1px solid #e5c77330;color:#fff}
.contact-list span{font-size:12px;letter-spacing:.06em}
.contact-list strong{font-weight:400;font-size:16px;overflow-wrap:anywhere}
.contact-list>a:hover{border-bottom-color:#e5c77399}
.contact-page footer{position:static;inset:auto;justify-content:center;margin-top:auto;flex-shrink:0;padding:10px 24px calc(20px + env(safe-area-inset-bottom));height:auto}
@media(max-width:760px){
 footer{justify-content:center}
 #mobile-categories .mobile-contact{font-size:20px}
 .contact-page header{padding:calc(30px + env(safe-area-inset-top)) 6.5vw 0;flex-wrap:wrap;gap:24px}
 .contact-page .contact-back{width:100%;margin:0;font-size:11px}
 .contact-content{margin:45px auto;padding:0 6.5vw}
 .contact-content h1{margin-bottom:25px}
 .contact-list>a{grid-template-columns:1fr;gap:7px;padding:15px 0}
 .contact-list strong{font-size:15px}
 .contact-page footer{padding-bottom:calc(12px + env(safe-area-inset-bottom))}
}

/* Filter context and static, crawlable project pages. */
.project-actions{display:none}
#about-dialog .about-phone{margin-top:0}
#detail-description{font-size:14px;line-height:1.65;color:#fff;max-width:760px;margin-top:20px}
.static-project{width:min(1200px,100%);margin:45px auto;padding:0 40px;color:#fff}
.static-project h1{font:400 clamp(32px,5vw,64px)/1.12 Italiana,serif;margin:12px 0 25px}
.static-project>p{font-size:14px;line-height:1.7;max-width:760px}
.static-project pre{font:14px/1.7 'Avenir Next',Avenir,Arial,sans-serif;white-space:pre-wrap;margin:25px 0 40px}
.static-gallery{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.static-gallery img{width:100%;height:auto;display:block}
.static-gallery img:first-child{grid-column:1/-1}
@media(max-width:760px){
 .project-actions{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:5px}
 .project-actions #mobile-project-link{margin:0;flex-shrink:0}
 #active-category{font-size:9px;line-height:1.4;letter-spacing:.05em;text-align:right;color:#fff}
 #active-category:empty{display:none}
 .filmstrip.single-project{display:none}
 .single-project-view .caption{bottom:calc(68px + env(safe-area-inset-bottom))}
 .static-project{padding:0 6.5vw;margin:30px auto}
 .static-gallery{grid-template-columns:1fr;gap:10px}
}

/* White navigation details and individually composed portrait covers. */
.caption #hero-role:before{background:#fff}
@media(max-width:760px){
 #mobile-menu-open span{background:#fff}
 .hero>img{object-position:var(--mobile-position,50% 50%)}
}

/* Active-project loops: the photo remains beneath until playback succeeds. */
.hero>video{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;pointer-events:none;opacity:0;transition:opacity .25s}
.hero>video.ready{opacity:1}
.hero>video[hidden]{display:none}
#video-toggle{position:absolute;right:48px;top:calc(50% + 28px);width:44px;height:44px;z-index:3;display:flex;align-items:center;justify-content:center;color:var(--gold);filter:drop-shadow(0 1px 3px #000);opacity:.7}
#video-toggle svg{width:17px;height:17px}
#video-toggle[hidden]{display:none}
@media(max-width:760px){
 .hero>video{object-position:center}
 #video-toggle{right:calc(6.5vw - 10px);top:calc(50% + 28px)}
}
@media(prefers-reduced-motion:reduce){.hero>video{transition:none}}

/* Keep the native poster visible so the opening loop can autoplay immediately. */
.hero>video{opacity:1}

/* Bidirectional project navigation and the supplied Emmy nominee badge. */
.arrows{display:none}
#swipe-next,#swipe-previous{position:absolute;display:flex;align-items:center;justify-content:center;top:calc(50% - 22px);width:44px;height:44px;z-index:4;color:var(--gold);opacity:.75;filter:drop-shadow(0 1px 3px #000)}
#swipe-next{right:38px}
#swipe-previous{left:38px}
#swipe-next svg,#swipe-previous svg{width:27px;height:18px}
#swipe-next[hidden],#swipe-previous[hidden]{display:none}
.award-badge{position:absolute;right:48px;top:130px;z-index:3;width:100px;height:auto;pointer-events:none;filter:drop-shadow(0 2px 7px rgba(0,0,0,.55))}
.award-badge[hidden]{display:none}
@media(max-width:760px){
 #swipe-next{right:calc(6.5vw - 10px)}
 #swipe-previous{left:calc(6.5vw - 10px)}
 .award-badge{right:6.5vw;top:calc(7svh + env(safe-area-inset-top) + 66px);width:clamp(54px,16vw,78px)}
}
@media(max-width:760px) and (max-height:620px){.award-badge{top:95px}}