/* One explicit preference, shared by the portfolio and its case studies. */
.theme-toggle{appearance:none;position:relative;display:inline-grid;place-items:center;flex:0 0 40px;width:40px;height:40px;padding:0;margin:-11px -8px -11px 0;border:0;border-radius:50%;background:transparent;color:inherit;cursor:pointer;isolation:isolate;-webkit-tap-highlight-color:transparent}
.theme-toggle::before{content:"";position:absolute;inset:0;border:1px solid currentColor;border-radius:50%;opacity:0;transform:scale(.7);transition:opacity .22s,transform .3s}
.theme-toggle:hover::before,.theme-toggle:focus-visible::before{opacity:.22;transform:scale(1)}
.theme-toggle svg{position:absolute;width:21px;height:21px;transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .25s}
.theme-toggle .theme-sun{opacity:0;transform:rotate(-70deg) scale(.5)}
html[data-theme="dark"] .theme-moon{opacity:0;transform:rotate(70deg) scale(.5)}
html[data-theme="dark"] .theme-sun{opacity:1;transform:rotate(0) scale(1)}
.nav{align-items:center}.bar{align-items:center}.topbar{align-items:center}
html[data-theme="dark"]{color-scheme:dark;--paper:#08080b;--ink:#f3f2ef;--mute:#a2a2ac;--ink-2:#b4b4bc;--ink-3:#96969f;--rule:#2b2b33;--plate:#15151c}
html[data-theme="dark"] body{background:#08080b;color:#bdbdc6}
html[data-theme="dark"] .hero{background:#050506;color:#f2f2ef}
html[data-theme="dark"] .h-product{visibility:hidden}
html[data-theme="dark"] .h-visual{visibility:visible;color:#f2f2ef}
html[data-theme="dark"] .headline{padding-bottom:clamp(60px,13vh,145px)}
html[data-theme="dark"] .work-copy p{color:#aaaab4}
html[data-theme="dark"] .work-role,html[data-theme="dark"] .sec-head .mono{color:#8d8d99}
html[data-theme="dark"] .work-cover-mark{color:#d5d5dc}
html[data-theme="dark"] .work-access,html[data-theme="dark"] .gate-access{color:#d5d5dc}
html[data-theme="dark"] .work-access a,html[data-theme="dark"] .gate-access a,html[data-theme="dark"] body.tiktok-case .accent{color:#9ec9de}
html[data-theme="dark"] .work-access a:hover,html[data-theme="dark"] .gate-access a:hover,html[data-theme="dark"] body.tiktok-case .accent:hover{color:#f3f2ef}
html[data-theme="dark"] body.tiktok-case{background:#08080b;color:#d5d5dc}
html[data-theme="dark"] body.tiktok-case h1,html[data-theme="dark"] body.tiktok-case h2,html[data-theme="dark"] body.tiktok-case .meta-strip dd,html[data-theme="dark"] body.tiktok-case .gate-form label{color:#f3f2ef}
html[data-theme="dark"] body.tiktok-case .gate-error{color:#ffb4b4}
html[data-theme="dark"] body.tiktok-case .eyebrow,html[data-theme="dark"] body.tiktok-case .eyebrow a,html[data-theme="dark"] body.tiktok-case .draft-note,html[data-theme="dark"] body.tiktok-case .chapter-num,html[data-theme="dark"] body.tiktok-case .contents,html[data-theme="dark"] body.tiktok-case .meta-strip dt,html[data-theme="dark"] body.tiktok-case .foot,html[data-theme="dark"] body.tiktok-case .example-figure figcaption,html[data-theme="dark"] body.tiktok-case .case-note,html[data-theme="dark"] body.tiktok-case .outcome-note,html[data-theme="dark"] body.tiktok-case .subtitle,html[data-theme="dark"] body.tiktok-case .overview,html[data-theme="dark"] body.tiktok-case .next-label{color:#d5d5dc}
html[data-theme="dark"] body.tiktok-case .example-frame{background:#16161d;border-color:#2b2b33}
html[data-theme="dark"] body.tiktok-case .meta-strip{border-top-color:#2b2b33}
html[data-theme="dark"] body.tiktok-case .gate-form input{background:#08080b;color:#f3f2ef;border-color:#d5d5dc}
html[data-theme="dark"] body.tiktok-case .gate-form button{background:#f3f2ef;color:#0d0d0e}
html[data-theme="dark"] .placeholder-banner{background:#15151c;color:#e4e3ea;border-color:#2b2b33}
html[data-theme="dark"] .work-cover{background:#16161d}
html[data-theme="dark"] .work-card:hover .arr{color:#f2f2ef}
html[data-theme="dark"] .about-grid,html[data-theme="dark"] .contact-list li{border-color:#2b2b33}
html[data-theme="dark"] .contact-line a{color:#e4e3ea}
html[data-theme="dark"] .contact-line a:hover{color:#b5acff}
html[data-theme="dark"] .copy-btn:hover{background:#21212c;color:#fff}
html[data-theme="dark"] .site-foot a{color:#aaaab4}
html[data-theme="dark"] .topbar,html[data-theme="dark"] h1,html[data-theme="dark"] h2,html[data-theme="dark"] .next-title{color:#f3f2ef}
html[data-theme="dark"] .subtitle,html[data-theme="dark"] .meta dd{color:#b4b4bf}
html[data-theme="dark"] .cover,html[data-theme="dark"] .case-figure img{background:#16161d}
html[data-theme="dark"] a:hover{color:#e1dcff}
html[data-theme="dark"] #case .read>p,html[data-theme="dark"] #case .standfirst{color:#bdbdc6}
html[data-theme="dark"] #case .lane li{color:#bdbdc6}
html[data-theme="dark"] #case .lane.users .dot{background:#888}
html[data-theme="dark"] #case .source-frame,html[data-theme="dark"] #case .source-desktop{border-color:#292931;background:#15151c}
html[data-theme="dark"] #case .decision{border-color:#393940}
html[data-theme="dark"] .foot{color:#aaaab4}
html[data-theme="dark"] .foot a:hover{color:#fff}
html[data-theme="dark"] :focus-visible{outline-color:#b5acff}
/* Color changes are brief; continuous field animation is handled separately. */
body,.hero{transition:background-color .35s,color .35s}
@media(max-width:420px){.hero .nav{gap:12px;font-size:13px}.hero .nav a[href="#contact"]{display:none}.hero .name{font-size:14px}.topbar .nav{gap:12px}.topbar{gap:14px}.theme-toggle{flex-basis:40px}.hero .headline{font-size:clamp(34px,9.4vw,164px)}}
@media(prefers-reduced-motion:reduce){body,.hero,.theme-toggle svg,.theme-toggle::before{transition:none}}

/* The visual-artist experience has no product case-study index. */
html[data-theme="dark"] .portfolio-body > #work,
html[data-theme="dark"] .hero .nav a[href="#work"]{display:none}
html[data-theme="dark"] .hero .nav a[href="#contact"]{display:inline}

/* Mobile: anchor the headline around the middle of the first screen. */
@media (max-width:680px){
  .hero{min-height:max(480px,100svh);padding-block:20px max(24px,env(safe-area-inset-bottom,0px))}
  .hero .headline,html[data-theme="dark"] .hero .headline{align-self:center;padding-bottom:0;transform:translateY(-4svh)}
  .hero .foot-row{align-self:end}
}