/* One warm black throughout the site, including project and media views. */
:root{--site-black:#100e0c;--site-black-rgb:16,14,12;--ink:var(--site-black);--site-copy:#d0c9c0;--site-muted:#b7aea4}
html,body,.light,.chemistry,.approach,.contact,.about-combined,.signature-scene,.cinema,.cinema-stage,.sound-lab,.sound-after-film.sound-lab,.hero.hero-film,#detail,#detail.project-open,#image-viewer,.case-cover,.case-reel,.case-screen,.case-screen-player,.case-end,.case-film,.campaign-film,.lab-films{background:var(--site-black)}
.header{background:linear-gradient(rgba(var(--site-black-rgb),.96),rgba(var(--site-black-rgb),0))}
.scrolled .header,.mobile-menu,.dialog-bar,.project-open .dialog-bar{background:rgba(var(--site-black-rgb),.97)}
.hero-film .hero-art-shade{background:linear-gradient(0deg,var(--site-black) 0%,rgba(var(--site-black-rgb),.25) 12%,transparent 28%),linear-gradient(90deg,rgba(var(--site-black-rgb),.45),transparent 40%)}
.hero-film .hero-art,.signature-portrait{mix-blend-mode:lighten}
.hero-brand:before,.hero-film .hero-brand:before{background:radial-gradient(ellipse,rgba(var(--site-black-rgb),.4),transparent 70%)}
.chemistry:before,.contact:before{background:none}
.contact>.section-top{background:linear-gradient(transparent,var(--site-black) 50%)}
.work-cards .work-track .project,.reel-slide,.element,.sound-art,.sound-embed,.gallery-item>button{background:var(--site-black)}
.element.selected{background:var(--orange)}
.work-cards .project-chip,.reel-zoom,.gallery-enlarge{background:rgba(var(--site-black-rgb),.85)}
#image-viewer::backdrop{background:rgba(var(--site-black-rgb),.97)}
#site-loader{background:var(--site-black)}
.case-cover-shade{background:linear-gradient(180deg,rgba(var(--site-black-rgb),.12),transparent 25%,rgba(var(--site-black-rgb),.3) 50%,rgba(var(--site-black-rgb),.92))}
.case-next-shade{background:rgba(var(--site-black-rgb),.72)}
.case-experience .case-intro p,.case-experience .case-intro .case-role,.case-making details p,.case-idea,.film-description{color:var(--site-copy)}
.case-experience .case-intro .micro,.case-making .micro,.case-making summary>span,.case-screen-copy>.micro,.reel-heading .micro,.reel-instruction>span{color:var(--site-muted)}
.case-making h3 em,.case-screen h3 em{color:var(--case-accent)}
.case-making h4,.case-screen h3{color:var(--white)}
.case-making details,.case-making details:last-child,.case-experience .case-end,.film-selector,.film-selector>button{border-color:#ffffff30}
.film-selector>button{color:var(--site-copy)}
.film-selector>button[aria-pressed=true]{background:var(--case-accent);color:var(--site-black)}
.film-selector>button[aria-pressed=true] small,.film-selector>button[aria-pressed=true] .film-select-number{opacity:1}
.case-screen-player{box-shadow:none}
.case-idea{color:var(--site-copy)}
.image-count,#image-caption{color:var(--site-copy)}
@media(max-width:760px){.hero-film .hero-art-shade{background:linear-gradient(0deg,var(--site-black),transparent 18%,transparent 88%,var(--site-black))}}

/* A shared warm champagne accent for every project, with neutral body copy. */
:root{--project-accent:#d8bf91}
.work-cards,#detail.project-open,.case-experience{--case-accent:var(--project-accent);--orange:var(--project-accent)}
.work-cards .project-chip{color:var(--project-accent);border-color:#d8bf9166}
.work-cards .project-label .round-button{color:var(--project-accent);border-color:#d8bf9166}
.work-cards .project-label .round-button:hover{background:var(--project-accent);color:var(--site-black)}
.case-cover-copy>p,.case-discover,.case-making summary>svg,.case-next-icon{color:var(--case-accent)}
.case-next-icon{border-color:var(--case-accent)}
.case-next:hover .case-next-icon{background:var(--case-accent);color:var(--site-black)}
.case-experience :focus-visible{outline-color:var(--case-accent)}
#image-viewer .image-count,#image-viewer [data-image-prev],#image-viewer [data-image-next]{color:var(--project-accent)}

/* Preserve the studio window and both foreground flask groups on desktop. */
@media(min-width:1101px){.hero-film .hero-art>#reaction-poster,.hero-film .hero-art>#reaction-video{object-fit:contain;object-position:50% 50%}}
@media(max-width:600px){.hero.hero-film{height:calc(270px + 110vw);min-height:680px;max-height:800px}.hero-film .hero-art>#reaction-poster,.hero-film .hero-art>#reaction-video{object-position:46% 50%}}