/* The live ink (public/js/ink.js) on pages outside the store, e.g. the homepage's What we do. The store's
   Color System sections carry the same rules in scs.css. */
[data-skin="stock"] .section--black[data-ink], .section--black[data-ink] { isolation: isolate; touch-action: pan-y;
  background: radial-gradient(34% 44% at 18% 70%, rgba(60,203,177,.28), transparent 70%),
              radial-gradient(30% 40% at 78% 28%, rgba(247,148,29,.2), transparent 70%), #000; }
[data-ink] > .ink-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; pointer-events: none; transition: opacity .35s; }
[data-ink] > .wrap { position: relative; z-index: 1; }
[data-ink].ink-off > .ink-canvas, [data-ink].ink-off::after { opacity: 0; }
.ink-toggle { position: absolute; z-index: 3; top: 1.25rem; right: max(var(--gutter, 1rem), calc((100% - var(--max, 1400px)) / 2)); width: 40px; height: 40px;
  display: grid; place-items: center; border-radius: 999px; border: 1px solid rgba(255,255,255,.22); background: rgba(0,0,0,.45);
  color: #F2F3F5; cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .2s, border-color .2s, color .2s; }
.ink-toggle:hover { background: rgba(0,0,0,.7); border-color: #3CCBB1; color: #3CCBB1; }
.ink-toggle:focus-visible { outline: 2px solid #3CCBB1; outline-offset: 3px; }
.ink-toggle__slash { position: absolute; width: 24px; height: 2px; background: currentColor; border-radius: 2px; transform: rotate(-45deg); opacity: 0; transition: opacity .2s; }
.ink-off .ink-toggle__slash { opacity: 1; }
.ink-off .ink-toggle { color: rgba(255,255,255,.6); }
@media (max-width: 640px) { .ink-toggle { top: .75rem; right: .75rem; width: 36px; height: 36px; } }