/* =====================================================================
   BLACK & WHITE preview layer (client request).
   OFF by default. Activated by html.bw (set when the URL has ?bw; persists
   for the tab via sessionStorage). The colour site is untouched.

   Approach: remap the brand colour TOKENS to neutral greys (both the light
   editorial theme and body.wwm-dark), and desaturate media (photos + the
   WebGL lens canvas). No filter on html/body — that would re-base the fixed
   nav and the lens dive overlay and break them.
   ===================================================================== */

/* light editorial pages (home, about, testimonials, writing, contact, 404) */
html.bw body{
  --paper:#f4f3f2; --paper-2:#ececeb; --paper-3:#e6e5e3;
  --ink:#191919; --ink-2:#4d4d4d; --ink-3:#8a8a8a;
  --accent:#565656; --accent-deep:#2a2a2a; --hairline:#d2d1cf;
  --dark:#191919; --on-dark:#f4f3f2; --on-dark-2:#cfcfcf;
}

/* dark Work With Me pages (hub + 5 pathway pages) */
html.bw body.wwm-dark{
  --paper:#0d0d0d; --paper-2:#161616; --paper-3:#131313;
  --ink:#f3f3f3; --ink-2:#b6b6b6; --ink-3:#838383;
  --accent:#cccccc; --accent-deep:#ededed; --hairline:#343434;
  --dark:#080808; --on-dark:#f3f3f3; --on-dark-2:#b6b6b6;
}

/* desaturate all media, including the WebGL camera-lens canvas */
html.bw img,
html.bw video,
html.bw canvas,
html.bw svg image{ filter:grayscale(1) !important; }

/* neutralise the few hard-coded brass tints (cursor glows / spotlights) */
html.bw .path::after,
html.bw .vbreak__item::after,
html.bw .cards--num .card::after{
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(200,200,200,.14),transparent 62%) !important;}
html.bw .phero2::after{
  background:radial-gradient(440px circle at var(--hx,50%) var(--hy,42%),rgba(200,200,200,.10),transparent 60%) !important;}
html.bw .bio .eyebrow,
html.bw .lens-aside .eyebrow{ color:var(--accent-deep) !important; }
html.bw ::selection{ background:#5a5a5a; color:#fff; }

/* on-page B&W toggle button (always visible; adapts to theme via currentColor) */
#bwToggle{position:fixed;right:16px;bottom:16px;z-index:200;display:inline-flex;align-items:center;gap:8px;
  font:600 12px/1 'Hanken Grotesk',-apple-system,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;
  min-height:40px;padding:0 15px;border-radius:999px;cursor:pointer;color:currentColor;
  background:rgba(127,127,127,.14);border:1px solid rgba(127,127,127,.5);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .2s ease,border-color .2s ease;
  -webkit-tap-highlight-color:transparent;}
#bwToggle:hover{background:rgba(127,127,127,.28);}
#bwToggle:focus-visible{outline:2px solid currentColor;outline-offset:3px;}
#bwToggle .bwt-ic{width:14px;height:14px;border-radius:50%;border:1.5px solid currentColor;flex:none;
  background:linear-gradient(90deg,currentColor 0 50%,transparent 50% 100%);}
@media(max-width:680px){#bwToggle{right:12px;bottom:12px;}}