/* Sampled from the blue lettering in the Gucci campaign. */
:root{--paper:#000;--ink:#f7f7f4;--action:#fff;--line-track:rgba(255,255,255,.5)}
:root[data-theme="light"]{color-scheme:light;--paper:#fff;--ink:#0060c8;--action:#0060c8;--line-track:#999}
#theme-toggle{position:absolute;left:auto;right:var(--margin,36px);top:36px;font-size:var(--ui-size,11px);letter-spacing:var(--ui-tracking,1.3px);font-weight:400;text-transform:uppercase;text-decoration:none;min-height:24px}
#theme-toggle .link-ink:after{display:block}
@media(max-width:700px){#theme-toggle{left:auto;right:var(--margin,14px);top:25px;font-size:var(--ui-size,9px);letter-spacing:var(--ui-tracking,1.3px);min-height:24px}}
.link-ink:after,.is-running .link-ink:after{background-color:var(--line-track);background-image:linear-gradient(var(--action),var(--action))}
.ending.mail-complete .hello-email>.link-ink:after{background-color:var(--action)}
a:focus-visible .link-ink:after,button:focus-visible .link-ink:after{background-color:var(--line-track)}
:root[data-theme="light"],:root[data-theme="light"] body{background:var(--paper);color:var(--ink);scrollbar-color:#aaa #fff}
[data-theme="light"] .past-opening .header,[data-theme="light"] dialog,[data-theme="light"] dialog::backdrop,[data-theme="light"] .project-top,[data-theme="light"] .project-footer,[data-theme="light"] .editorial:not(.studio),[data-theme="light"] header:not(.header){background:var(--paper);color:var(--ink)}
[data-theme="light"] .mark path{fill:var(--ink)}
[data-theme="light"] .hello-wordmark path{stroke:var(--ink)}
[data-theme="light"] .hello-email,[data-theme="light"] .client-controls,[data-theme="light"] .client-pages button[aria-current=true],[data-theme="light"] .legal-links,[data-theme="light"] .legal-separator,[data-theme="light"] .end-line,[data-theme="light"] .end-line>span,[data-theme="light"] .back-top,[data-theme="light"] .project-copy,[data-theme="light"] #project-count{color:var(--ink)}
[data-theme="light"] .label{color:var(--ink);background:#ffffffe0}
[data-theme="light"] .card .label,[data-theme="light"] .feature-title{ text-decoration-color:var(--line-track)}
[data-theme="light"] footer,[data-theme="light"] .legal-section{border-color:#0060c830}
[data-theme="light"] a:focus-visible,[data-theme="light"] button:focus-visible{outline:1px solid var(--ink);outline-offset:6px}
@media(max-width:700px){[data-theme="light"] .mobile-band .label{background:none}}

/* Change the surround and interface together; photographs retain their own colour. */
.theme-transition,.theme-transition body,.theme-transition .header,.theme-transition dialog,.theme-transition dialog::backdrop,.theme-transition .project-top,.theme-transition .project-footer,.theme-transition .editorial:not(.studio),.theme-transition .hello-email,.theme-transition .label,.theme-transition .client-controls,.theme-transition .legal-links,.theme-transition .legal-separator{transition:background-color 520ms ease-in-out,color 520ms ease-in-out}
.theme-transition .mark path{transition:fill 520ms ease-in-out!important}
.theme-transition .hello-wordmark path{transition:stroke 520ms ease-in-out}
.theme-transition .link-ink:after{transition:background-color 520ms ease-in-out}
@media(prefers-reduced-motion:reduce){.theme-transition,.theme-transition *,.theme-transition *:after{transition:none!important}}

/* The theme's focus rule must not reintroduce a box around Close. */
[data-theme="light"] #project-theme-toggle:focus,[data-theme="light"] #services-close:focus,[data-theme="light"] #about-close:focus,[data-theme="light"] #info-close:focus,[data-theme="light"] .panel-close:focus{outline:none}

/* Credits sit directly on the page in either appearance. */
[data-theme="light"] .mobile-band .label{background:none}