/* Polymorphic: the "vivid" look (a preview, opt-in with ?look=vivid; ?look=mono turns it off).
 * Same grammar, same type, same plates. What changes is light: the page takes one of WEFT Research's five palettes
 * (nemradar.com/notes), with a tinted ground, a slow atmosphere of its two hues behind everything, and the signal
 * spent a little more boldly: filled primary buttons, coloured dot-matrix figures, one coloured clause per headline.
 * No smooth gradients: light is drawn as marks (vivid.js hatches each light source with short strokes laid along
 * its contours, like an engraving), word fills are dithered, and a fine grain sits over the whole page.
 * Each project brings its own palette (data-pal on a card), so pages that list work become a wall of colour fields.
 *   landscape  orange on deep indigo (Structural Change)     terra   lime on deep azure (Spike Clustering)
 *   powerlines amber on warm black, turquoise sea (Escalation) hypo    mint and vermilion (Daily Cycle)
 *   holo       electric blue on noir (Network Structure)      ember   the super lab's sun on aubergine (cards only)
 * Tokens per palette: the house roles (--bg … --tick, --sig, --sig-ink, --lab) plus --g1/--g2, the two light sources. */

/* ------------------------------------------------------------------ palettes: dark */
[data-look="vivid"][data-palette="landscape"], [data-look="vivid"] [data-pal="landscape"] {
  --bg: #040312; --plate: #0a0822; --plate-2: #100d2e; --hi: #fff; --ink: #eeebf7; --ink-2: #c5c1de; --mut: #8e89b2; --faint: #5d5885;
  --rule: #262250; --rule-2: #17143a; --tick: #b2acdf; --sig: #ff6a2b; --sig-ink: #ff9a6b; --lab: #8f89ff;
  --g1: rgba(90, 82, 232, .34); --g2: rgba(255, 106, 43, .17); --pm-spot: rgba(143, 137, 255, .07); }
[data-look="vivid"][data-palette="terra"], [data-look="vivid"] [data-pal="terra"] {
  --bg: #030c16; --plate: #07162a; --plate-2: #0b1f38; --hi: #fff; --ink: #eeeae6; --ink-2: #b5b0ab; --mut: #7d7874; --faint: #5f5b55;   /* the atlas's warm inks */
  --rule: #173352; --rule-2: #0f233c; --tick: #9ec6e6; --sig: #b4e03a; --sig-ink: #d2ef7c; --lab: #7fcfff;
  --g1: rgba(42, 126, 208, .34); --g2: rgba(180, 224, 58, .13); --pm-spot: rgba(127, 207, 255, .06); }
[data-look="vivid"][data-palette="powerlines"], [data-look="vivid"] [data-pal="powerlines"] {
  --bg: #0c0b0a; --plate: #14120f; --plate-2: #1b1814; --hi: #fff; --ink: #efe8dc; --ink-2: #c2b9aa; --mut: #938a7c; --faint: #645d53;
  --rule: #2f2b27; --rule-2: #1f1c19; --tick: #c9bba3; --sig: #ffa11f; --sig-ink: #ffc266; --lab: #9ad6ff;
  --g1: rgba(14, 58, 122, .5); --g2: rgba(70, 198, 216, .16); --pm-spot: rgba(154, 214, 255, .05); }
[data-look="vivid"][data-palette="hypo"], [data-look="vivid"] [data-pal="hypo"] {
  --bg: #04100c; --plate: #081a14; --plate-2: #0c241b; --hi: #fff; --ink: #e9f5ef; --ink-2: #b6d3c5; --mut: #7c9e8e; --faint: #4b6b5d;
  --rule: #173a2c; --rule-2: #0f281e; --tick: #9fd8bf; --sig: #3fd49a; --sig-ink: #84e9c2; --lab: #ff6b3d;
  --g1: rgba(34, 166, 118, .26); --g2: rgba(226, 85, 42, .15); --pm-spot: rgba(63, 212, 154, .06); }
[data-look="vivid"][data-palette="holo"], [data-look="vivid"] [data-pal="holo"] {
  --bg: #05070b; --plate: #0a0e15; --plate-2: #0f141d; --hi: #fff; --ink: #f5f3ee; --ink-2: #c3c6cb; --mut: #8b9097; --faint: #5b5f65;
  --rule: #232a35; --rule-2: #151a22; --tick: #aab4c2; --sig: #36b8ff; --sig-ink: #92d6ff; --lab: #c9ccd1;
  --g1: rgba(47, 143, 214, .3); --g2: rgba(178, 141, 69, .12); --pm-spot: rgba(54, 184, 255, .06); }
[data-look="vivid"] [data-pal="ember"] {
  --bg: #120a18; --plate: #1a1022; --plate-2: #22152c; --hi: #fff; --ink: #f4ece4; --ink-2: #d2c4bb; --mut: #9e8d92; --faint: #66575f;
  --rule: #3a2738; --rule-2: #26182a; --tick: #e3b98f; --sig: #ff8a2e; --sig-ink: #ffab6b; --lab: #ffc93c;
  --g1: rgba(220, 100, 23, .3); --g2: rgba(255, 201, 60, .16); --pm-spot: rgba(255, 170, 30, .06); }

/* ------------------------------------------------------------------ palettes: light (tinted paper, signal deepened for contrast) */
[data-look="vivid"][data-theme="light"][data-palette="landscape"], [data-look="vivid"][data-theme="light"] [data-pal="landscape"] {
  --bg: #f4f2fb; --plate: #ebe8f7; --plate-2: #e2def2; --hi: #000; --ink: #141130; --ink-2: #3a3560; --mut: #67628c; --faint: #a7a2c4;
  --rule: #d0cbe6; --rule-2: #e1ddf0; --tick: #3a3560; --sig: #e0501a; --sig-ink: #b53d0d; --lab: #5a52e8;
  --g1: rgba(143, 137, 255, .32); --g2: rgba(255, 106, 43, .16); --pm-spot: rgba(90, 82, 232, .05); }
[data-look="vivid"][data-theme="light"][data-palette="terra"], [data-look="vivid"][data-theme="light"] [data-pal="terra"] {
  --bg: #eef5fa; --plate: #e3eef6; --plate-2: #d8e6f1; --hi: #000; --ink: #0c1a29; --ink-2: #2f4459; --mut: #5d7389; --faint: #9fb3c5;
  --rule: #c7d8e6; --rule-2: #dae6f0; --tick: #2f4459; --sig: #5c8f00; --sig-ink: #4a7300; --lab: #1f6fb8;
  --g1: rgba(111, 198, 255, .34); --g2: rgba(180, 224, 58, .22); --pm-spot: rgba(31, 111, 184, .05); }
[data-look="vivid"][data-theme="light"][data-palette="powerlines"], [data-look="vivid"][data-theme="light"] [data-pal="powerlines"] {
  --bg: #f4eee4; --plate: #ece4d6; --plate-2: #e3d9c8; --hi: #000; --ink: #1b1611; --ink-2: #463d33; --mut: #75695b; --faint: #b0a593;
  --rule: #d8ccb8; --rule-2: #e6dccb; --tick: #463d33; --sig: #c26f00; --sig-ink: #9c5800; --lab: #1d7fa8;
  --g1: rgba(70, 198, 216, .26); --g2: rgba(255, 161, 31, .2); --pm-spot: rgba(29, 127, 168, .05); }
[data-look="vivid"][data-theme="light"][data-palette="hypo"], [data-look="vivid"][data-theme="light"] [data-pal="hypo"] {
  --bg: #eef7f2; --plate: #e2f0e8; --plate-2: #d6e9de; --hi: #000; --ink: #0e1f17; --ink-2: #2f4a3d; --mut: #5b7869; --faint: #9db8aa;
  --rule: #c6dfd1; --rule-2: #d9ebe1; --tick: #2f4a3d; --sig: #148a5f; --sig-ink: #0f6e4b; --lab: #c8431c;
  --g1: rgba(63, 212, 154, .26); --g2: rgba(226, 85, 42, .14); --pm-spot: rgba(20, 138, 95, .05); }
[data-look="vivid"][data-theme="light"][data-palette="holo"], [data-look="vivid"][data-theme="light"] [data-pal="holo"] {
  --bg: #f1f3f6; --plate: #e6e9ee; --plate-2: #dbdfe6; --hi: #000; --ink: #0d1117; --ink-2: #333a45; --mut: #626a76; --faint: #a3aab4;
  --rule: #cfd4dc; --rule-2: #e0e3e8; --tick: #333a45; --sig: #0a74c4; --sig-ink: #085e9e; --lab: #8a6a2a;
  --g1: rgba(54, 184, 255, .26); --g2: rgba(178, 141, 69, .14); --pm-spot: rgba(10, 116, 196, .05); }
[data-look="vivid"][data-theme="light"] [data-pal="ember"] {
  --bg: #f8f0e6; --plate: #f2e6d8; --plate-2: #ead9c6; --hi: #000; --ink: #1f1828; --ink-2: #4b4252; --mut: #7b7168; --faint: #b3a797;
  --rule: #e0d0bc; --rule-2: #ecdfcf; --tick: #4b4252; --sig: #c0561a; --sig-ink: #a94a0d; --lab: #33164f;
  --g1: rgba(255, 201, 60, .3); --g2: rgba(220, 100, 23, .16); --pm-spot: rgba(192, 86, 26, .05); }

/* ------------------------------------------------------------------ the atmosphere: two slow light sources behind everything */
[data-look="vivid"] body { background: var(--bg); }
/* the light itself is a canvas of strokes (vivid.js); these are its frame and the grain over everything */
/* still, on purpose: anything moving behind the frosted top bar makes it re-blur every frame (measured: 61 fps to 23) */
.vv-atmos { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
/* grain under the content, as on a printed poster: the grounds are gritty, the type stays clean (the 22 Oct 'even'
   dust only: its tile repeats every 128 px; the space and quiet fields are drawn whole on the atmosphere canvas) */
[data-look="vivid"][data-theme="light"][data-dust="even"] body::after { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: var(--vv-grain, none);
  background-size: 128px 128px; opacity: .7; }
.vv-field { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
:root:not([data-look="vivid"]) :is(.vv-atmos, .vv-field) { display: none; }
[data-look="vivid"] .stars { opacity: .85; }
[data-look="vivid"] ::selection { background: color-mix(in srgb, var(--sig) 40%, transparent); }

/* hairlines that carry the two hues and fade out */
[data-look="vivid"] .kick::before { width: 26px; background: linear-gradient(90deg, var(--sig), var(--lab)); }
[data-look="vivid"] .nem-card .kick::before { width: 6px; background: var(--sig); }   /* the live dot stays a dot */
[data-look="vivid"] .foot { border-top: 0; background: linear-gradient(90deg, var(--sig), var(--lab) 38%, transparent 82%) top / 100% 1px no-repeat; }
[data-look="vivid"] .bar-h, [data-look="vivid"] .how__cols li { border-top-color: transparent;
  background: linear-gradient(90deg, color-mix(in srgb, var(--sig) 75%, transparent), color-mix(in srgb, var(--lab) 35%, transparent) 45%, var(--rule) 75%) top / 100% 1px no-repeat; }

/* the bar */
[data-look="vivid"] .top.solid { background: color-mix(in srgb, var(--bg) 76%, transparent); }
[data-look="vivid"] .brand__mark .weft { color: var(--sig); }
[data-look="vivid"] .nav .cta { color: var(--bg); background: var(--sig); border-color: var(--sig); }
[data-look="vivid"] .nav .cta:hover { color: var(--bg); background: var(--sig-ink); border-color: var(--sig-ink); }
[data-look="vivid"] .nav a[aria-current="page"]::after { background: linear-gradient(90deg, var(--sig), var(--lab)); }

/* buttons: the primary action is filled */
[data-look="vivid"] .btn--primary { color: var(--bg); background: var(--sig); border-color: var(--sig); transition: color .2s ease, background-color .2s ease, transform .25s var(--ease); }
[data-look="vivid"] .btn--primary:hover { color: var(--bg); background: var(--sig-ink); border-color: var(--sig-ink); transform: translateY(-1px); }
[data-look="vivid"] .btn:not(.btn--primary):hover { border-color: var(--lab); color: var(--hi); }
[data-look="vivid"][data-theme="light"] .btn--primary, [data-look="vivid"][data-theme="light"] .nav .cta { color: #fff; background: var(--sig-ink); border-color: var(--sig-ink); }

/* type: one gradient clause per headline; figures glow */
[data-look="vivid"] .display em, [data-look="vivid"] .title em, [data-look="vivid"] .close h2 em {
  background: linear-gradient(100deg, var(--lab) 0%, color-mix(in srgb, var(--lab) 50%, var(--sig)) 45%, var(--sig) 95%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
/* the motion layer splits headline words into inline blocks, which a text gradient can't paint through: there the
   colour steps word by word from the second hue to the signal instead, which reads as the same sweep */
[data-look="vivid"] :is(.display, .title, .close h2) em:has(.pm-w) { background: none; -webkit-text-fill-color: currentColor; color: var(--lab) !important; }
[data-look="vivid"] :is(.display, .title, .close h2) em .pm-w { color: var(--lab); -webkit-text-fill-color: currentColor; }
[data-look="vivid"] :is(.display, .title, .close h2) em .pm-w:nth-child(2) { color: color-mix(in oklab, var(--sig) 20%, var(--lab)); }
[data-look="vivid"] :is(.display, .title, .close h2) em .pm-w:nth-child(3) { color: color-mix(in oklab, var(--sig) 40%, var(--lab)); }
[data-look="vivid"] :is(.display, .title, .close h2) em .pm-w:nth-child(4) { color: color-mix(in oklab, var(--sig) 60%, var(--lab)); }
[data-look="vivid"] :is(.display, .title, .close h2) em .pm-w:nth-child(5) { color: color-mix(in oklab, var(--sig) 80%, var(--lab)); }
[data-look="vivid"] :is(.display, .title, .close h2) em .pm-w:nth-child(n+6) { color: var(--sig); }
[data-look="vivid"] .led { color: var(--sig); }
[data-look="vivid"][data-theme="light"] .led { color: var(--sig-ink); filter: none; }
[data-look="vivid"] .how__cols .n, [data-look="vivid"] .plate-cap .label { color: var(--sig-ink); }

/* home */
[data-look="vivid"] .spec-strip { border-top-color: transparent; border-bottom-color: var(--rule-2);
  background: linear-gradient(90deg, var(--sig), var(--lab) 40%, var(--rule) 75%) top / 100% 1px no-repeat; }
[data-look="vivid"] .spec-strip .hud-k::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 9px; vertical-align: 1px;
  border-radius: 50%; background: var(--sig); }
[data-look="vivid"] .spec-strip > div:nth-child(even) .hud-k::before { background: var(--lab); }

/* the closing call: a field of colour, the page's one loud moment */
[data-look="vivid"] .close { padding: clamp(28px, 4vw, 56px); border: 1px solid color-mix(in srgb, var(--sig) 30%, var(--rule)); isolation: isolate; overflow: hidden; background: var(--plate); }
[data-look="vivid"] .close > :not(.vv-field) { position: relative; z-index: 1; }
[data-look="vivid"] .close::before, [data-look="vivid"] .close::after { content: ""; position: absolute; width: 14px; height: 14px; border: 1px solid var(--sig); pointer-events: none; }
[data-look="vivid"] .close::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
[data-look="vivid"] .close::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

/* ------------------------------------------------------------------ cards that carry their own palette become colour fields */
[data-look="vivid"] .route[data-pal], [data-look="vivid"] .nem-card[data-pal] { color: var(--ink); border-color: color-mix(in srgb, var(--sig) 26%, var(--rule)); background: var(--plate); isolation: isolate; }
[data-look="vivid"] .route[data-pal] > :not(.vv-field), [data-look="vivid"] .nem-card[data-pal] > :not(.vv-field) { position: relative; z-index: 1; }
[data-look="vivid"] .route[data-pal]::before, [data-look="vivid"] .route[data-pal]::after { opacity: .9; }
[data-look="vivid"] .route[data-pal]:hover, [data-look="vivid"] .route[data-pal]:focus-visible { border-color: var(--sig); }
[data-look="vivid"] .route[data-pal] .thumb, [data-look="vivid"] .nem-card[data-pal] .nem-card__loom { background: color-mix(in srgb, var(--bg) 82%, transparent); }
[data-look="vivid"] .route[data-pal] .thumb .tag { color: var(--sig-ink); background: color-mix(in srgb, var(--bg) 70%, transparent); }
[data-look="vivid"] .route[data-pal] .route__go { color: var(--sig-ink); }
[data-look="vivid"] .route[data-pal] .route__foot { border-top-color: color-mix(in srgb, var(--sig) 22%, var(--rule-2)); }
[data-look="vivid"] .proof__list a[data-pal] .led { color: var(--sig); }
[data-look="vivid"] .proof__list a[data-pal] { background: transparent; color: var(--ink); }
[data-look="vivid"] .proof__list a[data-pal]:hover { background: color-mix(in srgb, var(--sig) 7%, transparent); }
[data-look="vivid"] .proof__list a[data-pal] .hud-k::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 9px; vertical-align: 1px; border-radius: 50%; background: var(--sig); }

/* NEM Radar's tape keeps nemradar's meaning: amber is a price above $300 (sky is reserved for prices below zero) */
[data-look="vivid"] [data-pal="powerlines"] :is(.thumb, .nem-card__loom) { --lab: var(--sig); }

/* a word set in the gradient (the motion layer puts each word's text in .pm-wi, which can carry it directly) */
[data-look="vivid"] .vv-grad .pm-wi, [data-look="vivid"] .vv-grad:not(:has(.pm-wi)) { background: var(--vv-dgrad, linear-gradient(100deg, var(--lab), var(--sig))) 0 0 / 100% 100%;
  image-rendering: pixelated; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding-bottom: .08em; }

/* projects: the five research palettes light the page from above; each card then wears its own */
[data-look="vivid"] body[data-page="projects"] .hero--lib { position: relative; }
[data-look="vivid"] body[data-page="projects"] .hero--lib > .vv-field { left: -8vw; top: -70px; width: calc(100% + 16vw); height: calc(100% + 110px); z-index: -1; }   /* a canvas ignores left+right: size it outright */
[data-look="vivid"] body[data-page="projects"] .lib .bar-h { background: linear-gradient(90deg, #ff6a2b 0 20%, #b4e03a 20% 40%, #ffa11f 40% 60%, #3fd49a 60% 80%, #36b8ff 80%) top / 100% 1px no-repeat; }

/* the palette key: five research palettes as five chips, beside a section label */
[data-look="vivid"] .pal-key { display: inline-flex; gap: 3px; margin-left: 14px; vertical-align: 1px; }
[data-look="vivid"] .pal-key i { width: 14px; height: 6px; display: block; }
.pal-key { display: none; }

/* ------------------------------------------------------------------ the preview switcher (only after ?look= has been used) */
.look-switch { position: fixed; right: 16px; bottom: 16px; z-index: 80; display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  background: color-mix(in srgb, var(--bg) 82%, transparent); border: 1px solid var(--rule); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  font: 400 11px/1 var(--hud); letter-spacing: .16em; text-transform: uppercase; color: var(--mut); }
.look-switch button { font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--mut); background: transparent; border: 1px solid var(--rule);
  padding: 6px 8px; cursor: pointer; }
.look-switch button[aria-pressed="true"] { color: var(--bg); background: var(--ink); border-color: var(--ink); }
.look-switch.open { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 12px; }
.look-switch .row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.look-switch .row > span { min-width: 58px; }
.look-switch .sw[hidden] { display: none; }
/* each scheme's chip: its signal and its second hue, side by side with a hard edge */
.look-switch [data-pal-btn] i { display: inline-block; width: 10px; height: 8px; margin-right: 7px; vertical-align: -1px;
  background: linear-gradient(90deg, var(--a) 0 50%, var(--b) 50%); }
/* folded to a small tab until hovered, focused or tapped */
.look-switch .tab { display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; color: var(--ink-2); }
.look-switch .tab i { width: 12px; height: 12px; border-radius: 50%; background: var(--sig); }
.look-switch:not(.open) > :not(.tab) { display: none; }
.look-switch.open .tab { display: none; }
@media (max-width: 640px) { .look-switch.open { left: 8px; right: 8px; bottom: 8px; } }