/* Joshtified - the night layer for every page that is not the homepage.
   Loaded last, after site.css, site-2026.css and project-enhance.css. The 2026
   layer is built on a handful of tokens, so most of the turn to dark is done by
   giving those tokens night values; the rest of this file fixes the few places
   that used a literal white or a literal ink.

   The brand mark is pinned to its own colours at the bottom of this file so
   the token swap can never touch it. */

:root {
  --ink: #f4f1f9;            /* was the text ink - text is light now */
  --ink-soft: #c4bcd8;
  --ink-faint: #8d84a6;
  --chalk: #07060c;          /* was the page - the page is night now */
  --violet: #b69cff;         /* links and accents need to be lighter on dark */
  --violet-bright: #d946ef;
  --rule: rgba(244, 241, 249, .14);
  --rule-soft: rgba(244, 241, 249, .08);
  --n-void: #07060c;
  --n-deep: #120e1f;
  --n-panel: rgba(18, 14, 31, .72);
  --n-line: rgba(244, 241, 249, .1);
  --n-signal: linear-gradient(100deg, #a78bfa 0%, #d946ef 48%, #ff7a59 100%);
  color-scheme: dark;
  /* site.css's own light-theme variables */
  --text: #f4f1f9;
  --muted: #c4bcd8;
  --dim: #8d84a6;
  --line: rgba(244, 241, 249, .1);
  --line-strong: rgba(244, 241, 249, .2);
  --green: #b69cff;
  --green-deep: #a78bfa;
  --mint: #c4b5fd;
}

html, body { background: var(--n-void) !important; color: var(--ink); }
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(90% 60% at 80% -10%, rgba(124, 58, 237, .28), transparent 60%),
    radial-gradient(70% 50% at 0% 110%, rgba(91, 33, 182, .24), transparent 60%),
    var(--n-void);
}
body::after {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(167, 139, 250, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(167, 139, 250, .05) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(80% 60% at 70% 0%, #000, transparent 70%);
  mask-image: radial-gradient(80% 60% at 70% 0%, #000, transparent 70%);
}
/* site.js paints the old chalk light field; the night has its own. */
.bg-canvas { display: none !important; }

::selection { background: #d946ef; color: #fff; }

/* Generated by gen-dark.js (Playwright, CSSOM walk) from the light sheets: every rule that painted
   a light surface, dark text or a light border gets its night value. */
.skip { color: #f4f1f9 !important; }
.nav .nav-mail:hover { color: #f4f1f9 !important; }
.btn.primary { color: #f4f1f9 !important; box-shadow: 0 20px 60px -30px rgba(0, 0, 0, .8) !important; }
.btn.primary:hover { color: #f4f1f9 !important; }
.p-badge.sale { border-color: rgba(244, 241, 249, .12) !important; }
.core-box { border-color: rgba(244, 241, 249, .12) !important; }
body { background-color: rgba(18, 14, 31, 0.82) !important; color: #f4f1f9 !important; }
body::before { background-image: none !important; }
.site-head, .site-head.scrolled { background-color: rgba(18, 14, 31, 0.82) !important; border-color: rgba(244, 241, 249, .12) !important; }
.nav a { color: #f4f1f9 !important; color: #c4bcd8 !important; }
.hero-lede, .section-head p { color: #f4f1f9 !important; color: #c4bcd8 !important; }
.hero-foot { color: #c4bcd8 !important; border-color: rgba(244, 241, 249, .12) !important; }
.hero-foot svg { color: #c4b5fd !important; }
.section { border-color: rgba(244, 241, 249, .12) !important; }
.section:nth-of-type(2n+1) { background-color: rgba(18, 14, 31, 0.55) !important; background-color: rgba(18, 14, 31, 0.82) !important; background-color: rgba(18, 14, 31, 0.48) !important; }
#work .project-grid { border-color: rgba(244, 241, 249, .12) !important; }
#work .tile { border-color: rgba(244, 241, 249, .12) !important; background-color: rgba(18, 14, 31, 0.82) !important; box-shadow: 0 20px 60px -30px rgba(0, 0, 0, .8) !important; }
#work .tile-num { color: #c4bcd8 !important; }
#work .tile-body b { color: #f4f1f9 !important; }
#work .tile-body span { color: #f4f1f9 !important; color: #c4bcd8 !important; }
#work .chip { background-color: rgba(18, 14, 31, 0.82) !important; color: #f4f1f9 !important; }
#work .chip.sale { background-color: rgba(18, 14, 31, 0.82) !important; color: #c4b5fd !important; border-color: rgba(244, 241, 249, .12) !important; }
#work .chip.live { color: #f4f1f9 !important; }
#work .chip.private { background-color: rgba(18, 14, 31, 0.82) !important; color: #c4bcd8 !important; border-color: rgba(244, 241, 249, .12) !important; }
#work .chip.redirect { background-color: rgba(18, 14, 31, 0.82) !important; color: #c4b5fd !important; border-color: rgba(244, 241, 249, .12) !important; }
#work .case { border-color: rgba(244, 241, 249, .12) !important; }
#work .case:first-of-type, #work .case:last-of-type { border-color: rgba(244, 241, 249, .12) !important; }
#work .case .p-title { color: #f4f1f9 !important; }
#work .case .p-tagline { color: #f4f1f9 !important; }
#work .case .p-desc, #work .case .p-points li { color: #f4f1f9 !important; }
#work .case .p-desc a { color: #f4f1f9 !important; }
#work .case .p-points svg { color: #c4b5fd !important; }
#work .case .facts { border-color: rgba(244, 241, 249, .12) !important; }
#work .case .facts span:first-child { color: #c4bcd8 !important; }
#work .case .facts span:last-child { color: #f4f1f9 !important; }
#work .case .case-num { background-color: rgba(18, 14, 31, 0.82) !important; color: #f4f1f9 !important; border-color: rgba(244, 241, 249, .12) !important; }
#work .case .tag { background-color: rgba(18, 14, 31, 0.82) !important; color: #f4f1f9 !important; border-color: rgba(244, 241, 249, .12) !important; }
#work .case .shot figcaption { color: #c4bcd8 !important; }
#work .case .p-links .textlink { color: #f4f1f9 !important; }
#work .case .p-links .textlink:hover { background-color: rgba(18, 14, 31, 0.82) !important; color: #f4f1f9 !important; }
.section-head p, .host-copy p, .host-list span, .host-panel .sub, .host-row span, .host-note, .mail-card .small, .subscribe-card p, .contact p, .contact-form-wrap > p, .dl-card p, .dl-note, .steps li, .shot figcaption, .facts span:first-child, .foot-in p, .foot-links a, .tile-body span, .stack-line b em, .account-lede, .account-list li, .account-note, .field > span, .field > span em { color: #f4f1f9 !important; }
.field input::placeholder, .field textarea::placeholder { color: #c4bcd8 !important; }
.form-status { color: #f4f1f9 !important; color: #c4bcd8 !important; }
.form-status.ok { color: #f4f1f9 !important; }
.form-status.err { color: #c4b5fd !important; }
.chip.sale { border-color: rgba(244, 241, 249, .12) !important; background-color: rgba(18, 14, 31, 0.82) !important; color: #c4b5fd !important; }
.badge.warn { border-color: rgba(244, 241, 249, .12) !important; background-color: rgba(18, 14, 31, 0.82) !important; color: #c4b5fd !important; }
#work.section { background-color: rgba(18, 14, 31, 0.62) !important; }
#work .tile-icon { background-color: rgba(18, 14, 31, 0.82) !important; color: #c4b5fd !important; }
#work .tile:hover { background-color: rgba(18, 14, 31, 0.82) !important; box-shadow: 0 20px 60px -30px rgba(0, 0, 0, .8) !important; }
::selection { background-color: rgba(18, 14, 31, 0.82) !important; color: #f4f1f9 !important; }
a:hover { color: #f4f1f9 !important; }
.nav a:hover, .nav a[aria-current="page"] { background-color: rgba(18, 14, 31, 0.82) !important; color: #f4f1f9 !important; }
.menu-btn { background-color: rgba(18, 14, 31, 0.82) !important; color: #f4f1f9 !important; border-color: rgba(244, 241, 249, .12) !important; }
.status { background-color: rgba(18, 14, 31, 0.82) !important; color: #f4f1f9 !important; border-color: rgba(244, 241, 249, .12) !important; }
h1.hero-title .dot { color: #c4b5fd !important; }
.btn { background-color: rgba(18, 14, 31, 0.82) !important; color: #f4f1f9 !important; border-color: rgba(244, 241, 249, .12) !important; box-shadow: 0 20px 60px -30px rgba(0, 0, 0, .8) !important; }
.btn:hover { background-color: rgba(18, 14, 31, 0.82) !important; color: #f4f1f9 !important; }
.hero-card { background-color: rgba(18, 14, 31, 0.82) !important; border-color: rgba(244, 241, 249, .12) !important; }
.card-bar { color: #c4bcd8 !important; border-color: rgba(244, 241, 249, .12) !important; }
.card-bar i { background-color: rgba(18, 14, 31, 0.82) !important; }
.stack-line { border-color: rgba(244, 241, 249, .12) !important; }
.stack-line b { color: #f4f1f9 !important; }
.stack-line b em { color: #c4bcd8 !important; }
.section-head p { color: #c4bcd8 !important; }
.funnel-card { background-color: rgba(18, 14, 31, 0.82) !important; box-shadow: 0 20px 60px -30px rgba(0, 0, 0, .8) !important; color: #f4f1f9 !important; border-color: rgba(244, 241, 249, .12) !important; }
.funnel-card:hover { background-color: rgba(18, 14, 31, 0.82) !important; box-shadow: 0 20px 60px -30px rgba(0, 0, 0, .8) !important; }
.funnel-num { color: #c4b5fd !important; }
.funnel-card p { color: #c4bcd8 !important; }
.funnel-go { color: #c4b5fd !important; }
.tile { background-color: rgba(18, 14, 31, 0.82) !important; border-color: rgba(244, 241, 249, .12) !important; }
.tile:hover { background-color: rgba(18, 14, 31, 0.82) !important; box-shadow: 0 20px 60px -30px rgba(0, 0, 0, .8) !important; }
.tile-icon { background-color: rgba(18, 14, 31, 0.82) !important; color: #c4b5fd !important; }
.tile-body b { color: #f4f1f9 !important; }
.tile-body span { color: #c4bcd8 !important; }
.chip { background-color: rgba(18, 14, 31, 0.82) !important; color: #c4b5fd !important; border-color: rgba(244, 241, 249, .12) !important; color: #f4f1f9 !important; background-color: rgba(18, 14, 31, 0.60) !important; }
.chip.live { color: #f4f1f9 !important; }
.chip.private { background-color: rgba(18, 14, 31, 0.82) !important; color: #c4bcd8 !important; border-color: rgba(244, 241, 249, .12) !important; }
.chip.redirect { background-color: rgba(18, 14, 31, 0.82) !important; color: #c4b5fd !important; border-color: rgba(244, 241, 249, .12) !important; }
.case { background-color: rgba(18, 14, 31, 0.82) !important; border-color: rgba(244, 241, 249, .12) !important; box-shadow: 0 20px 60px -30px rgba(0, 0, 0, .8) !important; }
.case:last-of-type { border-color: rgba(244, 241, 249, .12) !important; }
.case:first-of-type { border-color: rgba(244, 241, 249, .12) !important; }
.case-num { background-color: rgba(18, 14, 31, 0.82) !important; color: #c4b5fd !important; border-color: rgba(244, 241, 249, .12) !important; }
.tag { background-color: rgba(18, 14, 31, 0.82) !important; color: #c4bcd8 !important; border-color: rgba(244, 241, 249, .12) !important; color: #f4f1f9 !important; }
.case .p-title { color: #f4f1f9 !important; }
.p-tagline { color: #c4b5fd !important; }
.case .p-desc { color: #c4bcd8 !important; }
.case .p-desc strong { color: #f4f1f9 !important; }
.case .p-desc code, code { background-color: rgba(18, 14, 31, 0.82) !important; color: #f4f1f9 !important; border-color: rgba(244, 241, 249, .12) !important; }
.p-points li { color: #c4bcd8 !important; }
.p-points svg { color: #c4b5fd !important; }
.facts { border-color: rgba(244, 241, 249, .12) !important; }
.facts span:first-child { color: #c4bcd8 !important; }
.facts span:last-child { color: #f4f1f9 !important; }
.shot { background-color: rgba(18, 14, 31, 0.82) !important; border-color: rgba(244, 241, 249, .12) !important; box-shadow: 0 20px 60px -30px rgba(0, 0, 0, .8) !important; }
.shot img { background-color: rgba(18, 14, 31, 0.82) !important; }
.shot figcaption { background-color: rgba(18, 14, 31, 0.82) !important; color: #c4bcd8 !important; border-color: rgba(244, 241, 249, .12) !important; }
.tile-art { background-color: rgba(18, 14, 31, 0.82) !important; background-image: none !important; border-color: rgba(244, 241, 249, .12) !important; }
.tile-art svg { color: #c4b5fd !important; }
.tile-art span { background-color: rgba(18, 14, 31, 0.75) !important; color: #c4bcd8 !important; border-color: rgba(244, 241, 249, .12) !important; }
.spotlight { box-shadow: 0 20px 60px -30px rgba(0, 0, 0, .8) !important; }
.spotlight .btn { background-color: rgba(18, 14, 31, 0.82) !important; color: #f4f1f9 !important; border-color: rgba(244, 241, 249, .12) !important; }
.spotlight .btn:hover { background-color: rgba(18, 14, 31, 0.82) !important; color: #f4f1f9 !important; }
.host-copy p { color: #c4bcd8 !important; }
.host-list li { background-color: rgba(18, 14, 31, 0.82) !important; border-color: rgba(244, 241, 249, .12) !important; }
.host-list .h-icon { background-color: rgba(18, 14, 31, 0.82) !important; color: #c4b5fd !important; }
.host-list b { color: #f4f1f9 !important; }
.host-list span { color: #c4bcd8 !important; }
.host-panel { background-color: rgba(18, 14, 31, 0.82) !important; border-color: rgba(244, 241, 249, .12) !important; box-shadow: 0 20px 60px -30px rgba(0, 0, 0, .8) !important; }
.host-panel h3 { color: #f4f1f9 !important; }
.host-panel .sub { color: #c4bcd8 !important; }
.host-row { border-color: rgba(244, 241, 249, .12) !important; }
.host-row span { color: #c4bcd8 !important; }
.host-row b { color: #c4b5fd !important; }
.host-note { color: #c4bcd8 !important; }
.dl-card { background-color: rgba(18, 14, 31, 0.82) !important; border-color: rgba(244, 241, 249, .12) !important; box-shadow: 0 20px 60px -30px rgba(0, 0, 0, .8) !important; }
.dl-card:hover { box-shadow: 0 20px 60px -30px rgba(0, 0, 0, .8) !important; }
.dl-head .p-icon, .p-icon { background-color: rgba(18, 14, 31, 0.82) !important; color: #c4b5fd !important; border-color: rgba(244, 241, 249, .12) !important; }
.dl-head h3 { color: #f4f1f9 !important; }
.dl-head span, .dl-meta span, .hash { color: #c4bcd8 !important; }
.dl-meta span { background-color: rgba(18, 14, 31, 0.82) !important; border-color: rgba(244, 241, 249, .12) !important; }
.dl-card p { color: #c4bcd8 !important; }
.dl-note { background-color: rgba(18, 14, 31, 0.82) !important; color: #c4bcd8 !important; border-color: rgba(244, 241, 249, .12) !important; }
.dl-note b { color: #f4f1f9 !important; }
.install-block { background-color: rgba(18, 14, 31, 0.82) !important; border-color: rgba(244, 241, 249, .12) !important; }
.install-block h3 { color: #f4f1f9 !important; }
.steps li { color: #c4bcd8 !important; }
.steps li::before { background-color: rgba(18, 14, 31, 0.82) !important; color: #c4b5fd !important; border-color: rgba(244, 241, 249, .12) !important; }
pre { background-color: rgba(18, 14, 31, 0.82) !important; border-color: rgba(244, 241, 249, .12) !important; }
pre code { color: #f4f1f9 !important; }
.contact { background-image: none !important; border-color: rgba(244, 241, 249, .12) !important; box-shadow: 0 20px 60px -30px rgba(0, 0, 0, .8) !important; }
.contact h2, .contact-form-wrap h2 { color: #f4f1f9 !important; }
.contact p, .contact-form-wrap > p { color: #c4bcd8 !important; }
.mail-card, .subscribe-card, .account .account-side { background-color: rgba(18, 14, 31, 0.82) !important; border-color: rgba(244, 241, 249, .12) !important; }
.mail-card .kicker, .subscribe-card .kicker { color: #c4bcd8 !important; }
.mail-card a.mail { color: #f4f1f9 !important; }
.mail-card a.mail svg { color: #c4b5fd !important; }
.mail-card .small, .subscribe-card p { color: #c4bcd8 !important; }
.field > span { color: #c4bcd8 !important; }
.field input, .field textarea, .field select { background-color: rgba(18, 14, 31, 0.82) !important; color: #f4f1f9 !important; border-color: rgba(244, 241, 249, .12) !important; background-color: rgba(18, 14, 31, 0.80) !important; }
.field input:focus, .field textarea:focus, .field select:focus { background-color: rgba(18, 14, 31, 0.82) !important; }
.account-card, .account-in { background-color: rgba(18, 14, 31, 0.82) !important; border-color: rgba(244, 241, 249, .12) !important; }
.account-card h3, .account-side h3 { color: #f4f1f9 !important; }
.account-lede, .account-list li { color: #c4bcd8 !important; }
.account-list .icon { color: #c4b5fd !important; }
.account-note { color: #c4bcd8 !important; border-color: rgba(244, 241, 249, .12) !important; }
.account-who b { color: #f4f1f9 !important; }
.badge { background-color: rgba(18, 14, 31, 0.82) !important; color: #f4f1f9 !important; border-color: rgba(244, 241, 249, .12) !important; }
.toggle-row { color: #f4f1f9 !important; }
.toggle-row em { color: #c4bcd8 !important; }
.linkish { color: #c4b5fd !important; color: #f4f1f9 !important; }
#forgotForm { background-color: rgba(18, 14, 31, 0.82) !important; border-color: rgba(244, 241, 249, .12) !important; color: #f4f1f9 !important; }
.textlink { background-color: rgba(18, 14, 31, 0.82) !important; color: #f4f1f9 !important; border-color: rgba(244, 241, 249, .12) !important; }
.textlink:hover { background-color: rgba(18, 14, 31, 0.82) !important; color: #f4f1f9 !important; }
.textlink svg { color: #c4b5fd !important; }
.site-foot { background-color: rgba(18, 14, 31, 0.72) !important; border-color: rgba(244, 241, 249, .12) !important; background-color: rgba(18, 14, 31, 0.82) !important; color: #c4bcd8 !important; }
.foot-in p, .foot-links a { color: #c4bcd8 !important; }
.foot-links a:hover { color: #f4f1f9 !important; }
.section-head p, .account-lede, .account-list li, .account-note, .host-copy p, .host-list span, .host-panel .sub, .host-row span, .host-note, .mail-card .small, .subscribe-card p, .contact p, .contact-form-wrap > p, .dl-card p, .dl-note, .steps li, .case .p-desc, .p-points li, .shot figcaption, .facts span:first-child, .foot-in p, .foot-links a, .tile-body span, .stack-line b em { color: #f4f1f9 !important; }
.dl-meta span, .hash, .tile-num, .tag, .field > span, .mail-card .kicker, .subscribe-card .kicker, .hero-foot, .host-note { color: #c4bcd8 !important; }
.case .p-tagline { color: #f4f1f9 !important; }
.funnel-num, .funnel-go { color: #f4f1f9 !important; color: #c4b5fd !important; }
.p-points svg, .account-list .icon, .textlink svg { color: #f4f1f9 !important; }
.pdf-preview { background-color: rgba(18, 14, 31, 0.82) !important; }
.pdf-paper { background-color: rgba(18, 14, 31, 0.82) !important; border-color: rgba(244, 241, 249, .12) !important; box-shadow: 0 20px 60px -30px rgba(0, 0, 0, .8) !important; }
.pdf-line { background-color: rgba(18, 14, 31, 0.82) !important; }
.brain-art { background-color: rgba(18, 14, 31, 0.82) !important; background-image: none !important; }
.brain-art span { background-color: rgba(18, 14, 31, 0.82) !important; }
.p-points li, .case .p-desc { color: #f4f1f9 !important; }
.shot figcaption, .dl-head span, .dl-meta span, .hash, .foot-in p, .foot-links a, .mail-card .kicker, .subscribe-card .kicker, .host-row span, .host-note, .host-panel .sub, .account-note, .field > span, .steps li { color: #c4bcd8 !important; }
.stack-line span, .stack-line b em { color: #c4bcd8 !important; }
.chip, .p-badge, .case-num { color: #f4f1f9 !important; }
.chip.sale, .p-badge.sale { color: #c4b5fd !important; }
code { background-color: rgba(18, 14, 31, 0.82) !important; color: #f4f1f9 !important; border-color: rgba(244, 241, 249, .12) !important; }
html { background-color: rgba(18, 14, 31, 0.82) !important; }
a { color: #f4f1f9 !important; color: #c4b5fd !important; }
.brand, .nav a { color: #f4f1f9 !important; }
.hero-studio { color: #c4bcd8 !important; }
.eyebrow, .project-kicker { color: #c4b5fd !important; }
.hero-lede strong { color: #f4f1f9 !important; }
h1.hero-title, h2, h3, h4 { color: #f4f1f9 !important; }
.section, .section:first-of-type { border-color: rgba(244, 241, 249, .12) !important; background-color: rgba(18, 14, 31, 0.82) !important; }
.section:nth-of-type(2n+1), #work.section { background-color: rgba(18, 14, 31, 0.72) !important; background-color: rgba(18, 14, 31, 0.82) !important; }
.funnel-card h3 { color: #f4f1f9 !important; }
.project-detail { border-color: rgba(244, 241, 249, .12) !important; }
.project-detail:last-child { border-color: rgba(244, 241, 249, .12) !important; }
.project-summary-tagline { color: #c4bcd8 !important; }
.project-summary-action { color: #f4f1f9 !important; }
.project-detail .case .p-title { color: #f4f1f9 !important; }
.project-detail .case .p-tagline { color: #f4f1f9 !important; }
.project-detail .case .p-desc, .project-detail .case .p-points li { color: #c4bcd8 !important; }
.project-detail .case .p-desc strong, .project-detail .case .facts span:last-child { color: #f4f1f9 !important; }
.project-detail .case .facts { border-color: rgba(244, 241, 249, .12) !important; }
.project-detail .case .facts span:first-child { color: #c4bcd8 !important; }
.project-detail .case .tag { background-color: rgba(18, 14, 31, 0.82) !important; color: #f4f1f9 !important; border-color: rgba(244, 241, 249, .12) !important; }
.project-detail .case .p-links .textlink { background-color: rgba(18, 14, 31, 0.82) !important; color: #f4f1f9 !important; border-color: rgba(244, 241, 249, .12) !important; }
.project-detail .case .p-links .textlink:hover { background-color: rgba(18, 14, 31, 0.82) !important; color: #f4f1f9 !important; }
.project-detail .case .shot { background-color: rgba(18, 14, 31, 0.82) !important; border-color: rgba(244, 241, 249, .12) !important; box-shadow: 0 20px 60px -30px rgba(0, 0, 0, .8) !important; }
.project-detail .case .shot figcaption { background-color: rgba(18, 14, 31, 0.82) !important; color: #c4bcd8 !important; border-color: rgba(244, 241, 249, .12) !important; }
.spot-card, .core-box { border-color: rgba(244, 241, 249, .12) !important; }
.host-list li, .host-panel, .dl-card, .install-block, .mail-card, .subscribe-card, .account-card, .account-in, .account .account-side { background-color: rgba(18, 14, 31, 0.82) !important; color: #f4f1f9 !important; border-color: rgba(244, 241, 249, .12) !important; }
.host-list b, .host-panel h3, .dl-head h3, .install-block h3, .account-card h3, .account-side h3 { color: #f4f1f9 !important; }
.host-copy p, .host-list span, .host-panel .sub, .host-row span, .host-note, .dl-card p, .steps li, .account-lede, .account-list li, .account-note, .mail-card .small, .subscribe-card p, .contact p, .contact-form-wrap > p { color: #c4bcd8 !important; }
.host-list .h-icon, .dl-head .p-icon, .p-icon { background-color: rgba(18, 14, 31, 0.82) !important; color: #c4b5fd !important; border-color: rgba(244, 241, 249, .12) !important; }
.host-row, .facts, .install-block, .site-foot { border-color: rgba(244, 241, 249, .12) !important; }
.dl-head span, .dl-meta span, .hash, .steps li, .field > span, .mail-card .kicker, .subscribe-card .kicker, .account-note, .shot figcaption { color: #c4bcd8 !important; }
.dl-meta span, .hash, .field input, .field textarea, .field select, pre { background-color: rgba(18, 14, 31, 0.82) !important; color: #f4f1f9 !important; border-color: rgba(244, 241, 249, .12) !important; }
.mail-card a.mail svg, .p-points svg, .account-list .icon { color: #c4b5fd !important; }
.project-page .breadcrumbs, .project-page .breadcrumbs [aria-current="page"] { color: #c4bcd8 !important; }
.project-page .breadcrumbs a { color: #f4f1f9 !important; }
.project-page-head .project-summary-tagline { color: #c4bcd8 !important; color: #f4f1f9 !important; }
.project-page .project-case .p-desc, .project-page .project-case .p-points li { color: #c4bcd8 !important; color: #f4f1f9 !important; }
.project-page .project-case .facts { border-color: rgba(244, 241, 249, .12) !important; }
.project-page .project-case .shot { background-color: rgba(18, 14, 31, 0.82) !important; border-color: rgba(244, 241, 249, .12) !important; box-shadow: 0 20px 60px -30px rgba(0, 0, 0, .8) !important; }
.project-page .project-case .shot figcaption { background-color: rgba(18, 14, 31, 0.82) !important; color: #c4bcd8 !important; border-color: rgba(244, 241, 249, .12) !important; }
.project-page .project-page-foot { border-color: rgba(244, 241, 249, .12) !important; }
.project-page-foot > a:first-child { color: #f4f1f9 !important; }
.breadcrumbs { color: #c4bcd8 !important; }
.breadcrumbs a { color: #f4f1f9 !important; }
.project-card .project-summary-tagline { color: #c4bcd8 !important; }
.project-card-document { background-image: none !important; }
.project-card--featured { background-color: rgba(18, 14, 31, 0.82) !important; color: #f4f1f9 !important; border-color: rgba(244, 241, 249, .12) !important; box-shadow: 0 20px 60px -30px rgba(0, 0, 0, .8) !important; }
.project-card--featured:hover { background-color: rgba(18, 14, 31, 0.82) !important; color: #f4f1f9 !important; box-shadow: 0 20px 60px -30px rgba(0, 0, 0, .8) !important; }
.project-card--featured .project-card-image { border-color: rgba(244, 241, 249, .12) !important; }
.project-card--featured .project-kicker { color: #c4b5fd !important; }
.project-card--featured .project-card-copy > strong { color: #f4f1f9 !important; }
.project-card--featured .project-summary-tagline { color: #c4bcd8 !important; }
.project-card--featured .project-summary-action { color: #f4f1f9 !important; }
.project-list { border-color: rgba(244, 241, 249, .12) !important; }
.project-row { color: #f4f1f9 !important; border-color: rgba(244, 241, 249, .12) !important; }
.project-row::after { color: #c4b5fd !important; }
.project-row:hover { color: #f4f1f9 !important; }
.project-row-name { color: #f4f1f9 !important; }
.project-row-description { color: #c4bcd8 !important; }
.project-row-status { background-color: rgba(18, 14, 31, 0.82) !important; color: #f4f1f9 !important; }
.visualiser-shot figcaption { background-color: rgba(18, 14, 31, 0.82) !important; color: #f4f1f9 !important; border-color: rgba(244, 241, 249, .12) !important; }
.aurora { background-image: none !important; }
.project-card, .dl-card, .funnel-card, .account-card, .mail-card, .subscribe-card, .host-panel { background-color: rgba(18, 14, 31, 0.82) !important; }
.studio-finder { background-image: none !important; }
.site-head.scrolled { background-image: none !important; }
.hero-tapp { box-shadow: 0 20px 60px -30px rgba(0, 0, 0, .8) !important; }
.hero-tapp-open { border-color: rgba(244, 241, 249, .12) !important; }
.hero-tapp-body::after { box-shadow: 0 20px 60px -30px rgba(0, 0, 0, .8) !important; }
.featured-projects .project-card:hover { box-shadow: 0 20px 60px -30px rgba(0, 0, 0, .8) !important; }
.featured-projects .project-kicker { border-color: rgba(244, 241, 249, .12) !important; }
.featured-projects .project-summary-action { border-color: rgba(244, 241, 249, .12) !important; }
.dl-get { box-shadow: 0 20px 60px -30px rgba(0, 0, 0, .8) !important; }
.hub-flag.is-ok { color: #c4b5fd !important; }
.hub-search { background-color: rgba(18, 14, 31, 0.82) !important; }
.hub-btn { background-color: rgba(18, 14, 31, 0.82) !important; }
.hub-state--live { color: #c4b5fd !important; }
.hub-field input, .hub-field textarea { background-color: rgba(18, 14, 31, 0.82) !important; }
.hub-pick-grid { background-color: rgba(18, 14, 31, 0.82) !important; }
.provider-btn { background-color: rgba(18, 14, 31, 0.58) !important; }
.provider-btn:hover, .provider-btn:focus-visible { background-color: rgba(18, 14, 31, 0.82) !important; }
.chip--owner { color: #c4b5fd !important; }
.acct-links li { background-color: rgba(18, 14, 31, 0.60) !important; }
.acct-link-meta--warn { color: #c4b5fd !important; }
.acct-links li.acct-link--soon { background-color: rgba(18, 14, 31, 0.50) !important; }
.project-page .project-case .shot::after { background-image: none !important; }
.project-page .project-case .shot:focus-within { box-shadow: 0 20px 60px -30px rgba(0, 0, 0, .8) !important; }
.pj-viewer-bar button { border-color: rgba(244, 241, 249, .12) !important; }
.pj-viewer-bar button:hover { border-color: rgba(244, 241, 249, .12) !important; }
.pj-viewer-move button:disabled:hover { border-color: rgba(244, 241, 249, .12) !important; }
.pj-dock { background-color: rgba(18, 14, 31, 0.82) !important; box-shadow: 0 20px 60px -30px rgba(0, 0, 0, .8) !important; }
.pj-next-link { background-image: none !important; }
.pj-next-link:hover, .pj-next-link:focus-visible { box-shadow: 0 20px 60px -30px rgba(0, 0, 0, .8) !important; }
header { border-color: rgba(244, 241, 249, .12) !important; }
.brand { color: #f4f1f9 !important; }
.brand span { color: #c4b5fd !important; }
.marker { color: #c4b5fd !important; }
.intro .note { color: #c4bcd8 !important; }
.sheet { background-color: rgba(18, 14, 31, 0.82) !important; box-shadow: 0 20px 60px -30px rgba(0, 0, 0, .8) !important; }
input { border-color: rgba(244, 241, 249, .12) !important; }
input[type="file"] { background-color: rgba(18, 14, 31, 0.82) !important; }
.small { color: #c4bcd8 !important; }
.message { color: #c4b5fd !important; }
#result { border-color: rgba(244, 241, 249, .12) !important; }
#pass { background-color: rgba(18, 14, 31, 0.82) !important; border-color: rgba(244, 241, 249, .12) !important; }
.pass-buy { color: #f4f1f9 !important; }
.pass-check { background-color: rgba(18, 14, 31, 0.82) !important; color: #f4f1f9 !important; }
@media (max-width: 900px) {
  .section:nth-of-type(2n+1) { background-color: rgba(18, 14, 31, 0.48) !important; }
  .nav { background-color: rgba(18, 14, 31, 0.82) !important; box-shadow: 0 20px 60px -30px rgba(0, 0, 0, .8) !important; }
}
@media (max-width: 760px) {
  .nav { background-color: rgba(18, 14, 31, 0.82) !important; border-color: rgba(244, 241, 249, .12) !important; box-shadow: 0 20px 60px -30px rgba(0, 0, 0, .8) !important; }
  .nav a { color: #c4bcd8 !important; color: #f4f1f9 !important; }
  .project-card--featured .project-card-image { border-color: rgba(244, 241, 249, .12) !important; }
}

/* ------------------------------------------------------------------ header */
.site-head.scrolled {
  background: rgba(7, 6, 12, .74) !important;
  border-bottom-color: var(--n-line) !important;
  backdrop-filter: blur(18px) saturate(1.3);
}
.head-progress i { background: var(--n-signal); box-shadow: 0 0 12px rgba(217, 70, 239, .8); }
.brand, .brand > span:not(.brand-mark), .brand-word { color: #f4f1f9; }
.nav a { color: #c4bcd8; }
.nav a:hover, .nav a.current { color: #f4f1f9; background: transparent; }
.nav .nav-mail, .nav a.nav-cta, .site-head .btn.primary {
  color: #f4f1f9 !important;
  background: rgba(124, 58, 237, .16) !important;
  border: 1px solid rgba(244, 241, 249, .16) !important;
  box-shadow: 0 0 24px rgba(124, 58, 237, .2) !important;
}
.menu-btn { color: #f4f1f9; background: rgba(18, 14, 31, .7); border-color: rgba(244, 241, 249, .16); }
@media (max-width: 900px) {
  .nav { background: rgba(7, 6, 12, .97) !important; border-color: var(--n-line) !important; }
}

/* ----------------------------------------------------------------- buttons */
.btn {
  color: #f4f1f9 !important;
  background: rgba(18, 14, 31, .6) !important;
  border-color: rgba(244, 241, 249, .16) !important;
  box-shadow: none !important;
}
.btn:hover { background: rgba(124, 58, 237, .2) !important; border-color: rgba(167, 139, 250, .5) !important; }
.btn.primary, .btn-primary {
  color: #fff !important;
  border-color: transparent !important;
  background: linear-gradient(100deg, #6d28d9, #a21caf 70%, #c2410c) !important;
  box-shadow: 0 10px 40px -12px rgba(217, 70, 239, .7) !important;
}
.btn.primary:hover { box-shadow: 0 14px 54px -10px rgba(217, 70, 239, .95) !important; }

/* ------------------------------------------------------- literal surfaces */
/* Anything the 2026 layer painted white or near-white becomes a night panel. */
.case, .case-media, .shot, .shot figcaption, .facts, .facts > div, .p-links .textlink,
.account-card, .account-panel, .acc-card, .card, .panel, .install-block, .studio-finder,
.transfer-card, .tx-card, .drop, .dropzone, .notice, .callout, .faq details,
.pe-readout, .pe-dock, .pe-lightbox, .project-page .note {
  background-color: var(--n-panel) !important;
  border-color: var(--n-line) !important;
  color: inherit;
}
.case-media, .shot { background: #0c0a14 !important; }
.shot figcaption { color: #8d84a6 !important; border-top: 1px solid var(--n-line); }
.shot img { border-color: var(--n-line) !important; }
.p-links .textlink { color: #f4f1f9 !important; }
.p-links .textlink:hover { border-color: rgba(167, 139, 250, .5) !important; background: rgba(124, 58, 237, .16) !important; }
.p-links .textlink.accent {
  color: #fff !important;
  border-color: transparent !important;
  background: linear-gradient(100deg, #6d28d9, #a21caf 70%, #c2410c) !important;
  box-shadow: 0 10px 40px -12px rgba(217, 70, 239, .7);
}
.tag, .p-tags .tag { color: #c4b5fd !important; background: rgba(124, 58, 237, .14) !important; border-color: rgba(167, 139, 250, .25) !important; }
.p-points .icon, .case .icon { color: #d946ef; }
.facts span:first-child { color: #8d84a6 !important; }
.facts span:last-child { color: #c4b5fd !important; }
.breadcrumbs, .breadcrumbs a { color: #8d84a6 !important; }
.breadcrumbs a:hover { color: #f4f1f9 !important; }

/* Headings on dark get the same light, wide display cut as the homepage. */
.project-page .p-title, .project-page h1, .project-page-head h1 {
  color: #f4f1f9;
  text-shadow: 0 0 60px rgba(217, 70, 239, .25);
}
.project-page-head .kicker, .project-page .case-kicker, .project-kicker { color: #c4b5fd !important; }

/* Forms */
input, select, textarea {
  color: #f4f1f9 !important;
  background-color: rgba(18, 14, 31, .75) !important;
  border-color: rgba(244, 241, 249, .16) !important;
}
input::placeholder, textarea::placeholder { color: #5f5778 !important; }
input:focus, select:focus, textarea:focus { border-color: rgba(217, 70, 239, .7) !important; box-shadow: 0 0 0 3px rgba(217, 70, 239, .16) !important; outline: none; }
select option { background: #120e1f; color: #f4f1f9; }

code { color: #c4b5fd; background: rgba(124, 58, 237, .14); }
pre { background: #05040a !important; color: #e9d5ff !important; border-color: var(--n-line) !important; }

/* ------------------------------------------------------------------ footer */
.site-foot { background: transparent !important; border-top: 1px solid var(--n-line); color: #8d84a6; }
.site-foot a { color: #c4bcd8; }
.site-foot a:hover { color: #f0abfc; }
.foot-mark { color: transparent !important; -webkit-text-stroke: 1px rgba(167, 139, 250, .35); }

/* ------------------------------------------------- the brand mark, pinned */
.brand-mark {
  background: #141020 !important;
  color: #f4f1f9 !important;
  box-shadow: 3px 3px 0 rgba(91, 33, 182, .3) !important;
}
.brand:hover .brand-mark { background: #5b21b6 !important; box-shadow: 4px 4px 0 rgba(240, 74, 42, .32) !important; }
@media (max-width: 900px) {
  .brand-mark { box-shadow: 2px 2px 0 rgba(91, 33, 182, .3) !important; }
}

/* ------------------------------------------------- project pages, night */
/* One voice with the homepage: the product name is set in the shout, the same
   Titan One the hero and section headings use, at the size it was tuned for on
   the light theme. The night pass had set it in Bricolage at weight 300, which
   made it a whisper instead of the studio's voice. The case number was a
   numbered marker (rule 24) and goes. */
.case-num { display: none !important; }
.project-page .project-page-head h1 {
  font-family: 'Titan One', 'Bricolage', 'Segoe UI', system-ui, sans-serif !important;
  font-weight: 400 !important;
  font-synthesis: none;
  letter-spacing: .004em !important;
  line-height: 1.04 !important;
  padding-bottom: .05em;
  font-size: clamp(34px, 5.6vw, 72px) !important;
  color: #f4f1f9 !important;
  text-shadow: none;
}
.project-page .project-page-head p, .project-page .project-summary-tagline { color: #c4bcd8 !important; font-size: clamp(17px, 1.5vw, 21px) !important; max-width: 760px; }
.project-page .project-kicker { font-family: 'Silkscreen', monospace !important; letter-spacing: .12em !important; color: #c4b5fd !important; border: 0 !important; }
.pj-next-name, .pj-next-link strong, .pj-next-link h3 {
  font-family: 'Titan One', 'Bricolage', 'Segoe UI', system-ui, sans-serif !important;
  font-weight: 400 !important;
  font-synthesis: none;
  letter-spacing: .004em !important;
  font-size: clamp(24px, 3vw, 42px) !important;
  line-height: 1.08 !important;
  color: #f4f1f9 !important;
}
/* Hover is a colour, not a gradient: the clip across these letters read as
   damage rather than light (26 Oct 2026), and the shout is a flat face. */
.pj-next-link:hover .pj-next-name, .pj-next-link:hover strong, .pj-next-link:hover h3 {
  color: #c4b5fd !important;
}
.shot, .case-media .shot { border-radius: 6px 22px 6px 6px !important; overflow: hidden; box-shadow: 0 30px 80px -40px rgba(124, 58, 237, .7) !important; }
.p-points li { color: #c4bcd8; }
.facts > div span:last-child { font-family: ui-monospace, 'Cascadia Mono', monospace; }