/* V4 THEME — the dark of the hero/Motion becomes the site theme. Work exhibitions and Brand World pages keep their own world colours (they set --w-* explicitly). */
:root { --paper: #FFFFFF; --ink: #171914; --mute: rgba(23,25,20,.72); --line: rgba(23,25,20,.16); --invert: #FFFFFF; --amber: #E3A866; color-scheme: dark; }
body { background: var(--paper); color: var(--ink); }
.hd::before { background: color-mix(in srgb, var(--paper) 86%, transparent); }
.hd.on::before { border-bottom-color: var(--line); }
.skip { background: var(--ink); color: var(--paper); }
/* labels that were ink-on-paper accents become amber on dark */
.kick.mute, .lb.mute { color: var(--amber); }
.wh-idx { border-top-color: rgba(23,25,20,.5); } .wh-idx .n, .wh-idx .sx { color: var(--mute); }
.sv-list { border-top-color: rgba(23,25,20,.5); } .sv-row .no { color: var(--amber); }
.tl i { background: rgba(23,25,20,.3); } .tl i::after { background: var(--amber); } .tl .lb { color: var(--amber); }
.card figure.mat { background: #E8E3D5; }
.card p, .ap .ap-ko + p { color: var(--mute); }
.honest { border-left-color: var(--amber); color: var(--mute); }
.hold { border-top-color: var(--amber); border-bottom-color: var(--line); } .hold ul { color: var(--mute); }
.hero-cta, .go { border-bottom-color: currentColor; }
.mo2 { background: #FFFFFF; }
.ft { border-top-color: var(--line); } .ft p { color: var(--mute); }
#work::before { background: linear-gradient(#FFFFFF, var(--paper)); }
a:focus-visible, button:focus-visible { outline-color: var(--amber); }
/* mobile menu panel on dark */
@media (max-width: 760px) { .nav { background: var(--paper); border-color: var(--line); } .nav a { border-color: var(--line); } }
/* detail pages: chrome stays dark, the work world keeps its own paper; the back/top row sits on the world colour */
.dv-next { border-top: 0; }