/* ============================================================
   Monochrome dark (2026-10-30): the ECS palette (ecs-mono.css) for the other live pages: Work, Contact, Crew Check-In,
   Franklin, AI tools. One near-black ground (#151618), light gray type, dark cards, no accent color in the page chrome;
   product screens and photos keep their own colors. Linked last (after nav.css); everything is scoped to body.mono.
   Home has its own dark layer (hm.css) and ECS keeps ecs-mono.css. Pre-change pages: _archive/pre-mono-2026-10-30/
   ============================================================ */
body.mono {
  --m-bg: #151618; --m-card: #1f2022; --m-card-2: #2a2b2e; --m-line: #3c3e41;
  --m-ink: #e1e3e4; --m-ink-2: #c4c7c8; --m-ink-3: #9aa0a6;
  background: var(--m-bg); color: var(--m-ink);
}
html:has(body.mono) { background: #151618; color-scheme: dark; }

/* the shared tokens, flipped for everything below the top bar */
body.mono main, body.mono .ac-cta, body.mono .ac-foot, body.mono footer, body.mono dialog {
  --bg: var(--m-bg); --bg-raised: var(--m-card); --bg-sunken: var(--m-card); --paper: var(--m-bg); --paper-2: var(--m-card);
  --g-card: var(--m-card); --g-card-2: var(--m-card-2);
  --ink: var(--m-ink); --ink-2: var(--m-ink-2); --muted: var(--m-ink-3);
  --line: var(--m-line); --line-soft: #2a2b2e; --accent: #e1e3e4; --accent-hover: #fff;
  --gs-blue: #e1e3e4; --gs-well: var(--m-card-2);
  color: var(--m-ink);
}

/* page type */
body.mono main :is(h1, h2, h3, h4, h5, blockquote) { color: var(--m-ink); }
body.mono main :is(p, figcaption, cite, li, dd) { color: var(--m-ink-2); }
body.mono main a:not([class]) { color: var(--m-ink); }

/* section bands: one ground, no tints */
body.mono main section, body.mono main .cgroup[data-tint] { background: none; }
body.mono { --gs-ink: var(--m-ink); --gs-ink-2: var(--m-ink-3); --gs-well: var(--m-card-2); }
body.mono main [data-tint], body.mono main .cgroup { --px-tint: var(--m-bg); --px-card: var(--m-card); --px-deep: var(--m-card-2); }

/* ---------- Hero (Work, Contact, case studies) ---------- */
body.mono main.wrap > .gs-hero { background: var(--m-bg); }
body.mono .gs-hero-copy .gs-lead { color: var(--m-ink-2); }
body.mono :is(.gs-facts, .gs-tags) li { background: var(--m-card); color: var(--m-ink); }
body.mono .gs-facts svg { fill: var(--m-ink-3); }
body.mono .gs-facts.cs b { color: var(--m-ink-3); }
body.mono .gs-tags li:has(a):hover { background: var(--m-card-2); }
body.mono .gs-hero-media { background: var(--m-card); }
body.mono .gs-hero-media.cs { background: var(--m-card); }
body.mono .gs-hero-media figcaption::before { background: var(--m-ink-3); }
body.mono .gs-cs-bar .t { color: var(--m-ink); }
body.mono .gs-cs-bar .tabs a { background: var(--m-card); color: var(--m-ink); }
body.mono .gs-cs-bar .tabs a:hover { background: var(--m-card-2); }
body.mono .gs-cs-bar .tabs a.on { background: var(--m-ink); color: #151618; }

/* ---------- Store kit ---------- */
body.mono .gs-chip { background: var(--m-card-2); color: var(--m-ink); }
body.mono .gs-chip.green { background: #3c3e41; color: #f1f3f4; }
body.mono .gs-btn.dark, body.mono .gs-btn.blue { background: #e1e3e4; color: #151618; }
body.mono .gs-btn.dark:hover, body.mono .gs-btn.blue:hover, body.mono .gs-promo:hover .gs-btn.dark { background: #fff; }
body.mono .gs-btn.line { border-color: #8e918f; color: var(--m-ink); }
body.mono .gs-btn.line:hover { background: rgba(255,255,255,.08); }
body.mono .gs-btn.white { background: var(--m-card-2); color: var(--m-ink); }
body.mono .gs-btn.white:hover { background: #3c3e41; }
body.mono .gs-bar { background: var(--m-line); }
body.mono .gs-bar i { background: var(--m-ink); }
body.mono .gs-arr { background: var(--m-card-2); color: var(--m-ink); }
body.mono .gs-arr:hover:not(:disabled) { background: #3c3e41; }
body.mono :is(.gs-feat-vis, .gs-promo-m.fill, .gs-tile.all .gs-tm) { background: var(--m-card-2); }
body.mono .gs-tile.all .gs-tm span { background: var(--m-ink); color: #151618; }
body.mono :is(.gs-quote, .gs-why > *, .gs-form, .gs-side > *, .gs-cmp-c) { background: var(--m-card); }
body.mono a.gs-why-c:hover { background: var(--m-card-2); }
body.mono .gs-cmp-c h3, body.mono .gs-cmp-c dd { color: var(--m-ink); }
body.mono .gs-cmp-c dt { color: var(--m-ink-3); }
body.mono .gs-cmp-c dl > div { border-top-color: var(--m-line); }
body.mono .gs-side .k { color: var(--m-ink-3); }
body.mono .gs-side .v { color: var(--m-ink); }
body.mono a.gs-side-c:hover .v { color: #fff; }
body.mono .gs-field label { color: var(--m-ink); }
body.mono .gs-field :is(input, textarea) { background: var(--m-bg); border-color: #5f6368; color: var(--m-ink); }
body.mono .gs-field :is(input, textarea)::placeholder { color: #80868b; }
body.mono .gs-field :is(input, textarea):focus { border-color: var(--m-ink); box-shadow: 0 0 0 1px var(--m-ink); }

/* ---------- Product-page kit (case studies) ---------- */
body.mono :is(.px-card.text, .px-bigtype, .px-icon, .px-col) { background: var(--m-card); }
body.mono .px-media { background: var(--m-card-2); }
body.mono .px-icon svg { stroke: var(--m-ink); }
body.mono :is(.px-n, .px-bigtype span) { color: var(--m-ink); }
body.mono .px-bigtype small { color: var(--m-ink-2); }
body.mono .px-thumb { background: var(--m-ink); }
body.mono .px-arrow { background: var(--m-card-2); border-color: var(--m-line); color: var(--m-ink); }
body.mono .px-arrow:not(:disabled):hover { background: var(--m-ink); color: #151618; }
body.mono main :is(.k, .np-lab, b.np-lab) { color: var(--m-ink-3); }

/* ---------- Closing CTA, footer, dialogs (as on ECS) ---------- */
body.mono .ac-cta { background: var(--m-card); }
body.mono .ac-cta .hi, body.mono .ac-cta .hi:hover { color: var(--m-ink); }
body.mono .ac-btn { background: #e1e3e4; color: #151618; border-color: #e1e3e4; }
body.mono .ac-btn:hover { background: #fff; }
body.mono .ac-btn.ghost { background: none; color: var(--m-ink); border: 1px solid #8e918f; }
body.mono .ac-btn.ghost:hover { background: rgba(255,255,255,.08); }
body.mono .ac-foot { background: none; border-top: 1px solid var(--m-line); }
body.mono .ac-foot, body.mono .ac-foot :is(p, span, b, h2, h3, h4) { color: var(--m-ink-2); }
body.mono .ac-foot a { color: var(--m-ink); }
body.mono dialog.mdl, body.mono dialog { background: var(--m-card); color: var(--m-ink); }
body.mono dialog :is(h2, h3) { color: var(--m-ink); }
body.mono dialog p { color: var(--m-ink-2); }
body.mono dialog .mdl-x { background: var(--m-card-2); color: var(--m-ink); }
body.mono dialog .mdl-x:hover { background: #3c3e41; }

/* thumbnails: the transparent cut-outs (images/thumbs/cut, same size as the staged ones) float on the dark wells, as in the Work menu */
body.mono :is(.gs-tm, .gs-promo-m, .gs-cmp-m, .mdl-im) img { mix-blend-mode: normal; }