:root{color-scheme:light;--theme-border:#ddd}
html[data-theme="dark"]{color-scheme:dark;--bg:#141414;--ink:#f0efed;--muted:#aaa;--theme-border:#393939}
.header-controls{display:flex;align-items:center;gap:14px;justify-self:end}
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:8px;border:1px solid var(--theme-border);border-radius:50%;background:transparent;color:var(--ink);cursor:pointer;flex-shrink:0}
.theme-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.theme-toggle:hover{background:color-mix(in srgb,var(--ink) 8%,transparent)}
.theme-toggle .theme-sun{display:none}
html[data-theme="dark"] .theme-toggle .theme-sun{display:block}
html[data-theme="dark"] .theme-toggle .theme-moon{display:none}
html[data-theme="dark"] .wordmark img{filter:invert(1)}
html[data-theme="dark"] .network-logo img{filter:brightness(0) invert(1)}
html[data-theme="dark"] .nav-pair a{color:#aaa}
html[data-theme="dark"] :is(.nav-pair a:hover,.nav-pair a:first-child,.language-toggle,.network-link){color:var(--ink)}
html[data-theme="dark"] :is(.hero-bottom p,.section-intro span,.caption p,.about .services,.site-footer span,.project-title p,.film-label,.project-story>div:first-child,.sidebar-story h2,.project-nav small,.more-work span,.archive-heading p,.network-heading p,.network-link>span:last-child,.pd-eyebrow,.timeless-detail-copy>p:first-child){color:#aaa}
html[data-theme="dark"] :is(.pd-copy>p:not(.pd-eyebrow),.timeless-detail-copy>p:last-child){color:#bcbcbc}
html[data-theme="dark"] :is(.about,.contact,.site-footer,.project-nav,.more-work,.archive-back,.brand-network,.network-link){border-color:var(--theme-border)}
html[data-theme="dark"] .network-link{background:transparent}
html[data-theme="dark"] .network-link:hover{background:transparent;border-color:#bbb}
html[data-theme="dark"] .hero-bottom a:before{border-color:#ccc}
html[data-theme="dark"] .tile .cover{background:#252525}
html[data-theme="dark"] .more-button{border-color:#666;color:var(--ink)}
html[data-theme="dark"] .more-button:hover{background:var(--ink);border-color:var(--ink);color:var(--bg)}
html[data-theme="dark"] .email-button{background:var(--ink);color:var(--bg)}
html[data-theme="dark"] .email-button:hover{background:#ccc}
html[data-theme="dark"] .pd-copy>a{border-color:#666}
html[data-theme="dark"] :is(a,button):focus-visible{outline-color:#eee}
@media(max-width:600px){.header-controls{grid-row:1;grid-column:2;gap:8px}.header-controls .language-toggle{grid-row:auto;grid-column:auto}.theme-toggle{width:34px;height:34px}}

/* Reveal the new theme through a soft diagonal mask, beginning at the top left. */
@property --theme-reveal { syntax: '<percentage>'; inherits: false; initial-value: -20%; }
html.theme-transition::view-transition-group(root){animation:none}
html.theme-transition::view-transition-image-pair(root){isolation:isolate}
html.theme-transition::view-transition-old(root){animation:none;mix-blend-mode:normal;z-index:1}
html.theme-transition::view-transition-new(root){animation:studio-theme-reveal 1050ms cubic-bezier(.4,0,.2,1) both;mix-blend-mode:normal;z-index:2;mask-image:linear-gradient(135deg,#000 calc(var(--theme-reveal) - 14%),transparent calc(var(--theme-reveal) + 14%));-webkit-mask-image:linear-gradient(135deg,#000 calc(var(--theme-reveal) - 14%),transparent calc(var(--theme-reveal) + 14%))}
html.theme-transition::view-transition{pointer-events:none}
@keyframes studio-theme-reveal {from{--theme-reveal:-20%}to{--theme-reveal:120%}}
html.theme-fade body,html.theme-fade body :is(a,p,span,h1,h2,button,section,footer,nav){transition:background-color 400ms ease,color 400ms ease,border-color 400ms ease}
@media(prefers-reduced-motion:reduce){html.theme-transition::view-transition-new(root){animation:none;mask-image:none;-webkit-mask-image:none}}
html.theme-transition .nav-pair a{transition:none}