/* Blueprint dark mode, shared by every page. The sun button (assets/theme.js) sets html[data-theme=dark].
   Part 1 is generated from each page's light colours; part 2 is hand-tuned and wins where they overlap. */

/* 1. generated: light surfaces, lines and text mapped onto the blueprint */
html[data-theme=dark] .navlink.is-hover{background:rgba(200,222,255,.1)}
html[data-theme=dark] .spec{background:rgba(14,49,117,0.55)}
html[data-theme=dark] .pill{box-shadow:0 1px 1px rgba(3,14,40,0.088)}
html[data-theme=dark] .pill.dark{color:var(--page)}
html[data-theme=dark] .pill.is-hover{background:rgba(200,222,255,.1);border-color:var(--rule)}
html[data-theme=dark] .panel{background:rgba(200,222,255,0.1)}
html[data-theme=dark] .proj .thumb{background:rgba(200,222,255,.1);box-shadow:inset 0 0 0 1px rgba(3,14,40,0.11)}
html[data-theme=dark] .proj.is-hover{background:rgba(200,222,255,.1)}
html[data-theme=dark] .fan figure img{background:rgba(200,222,255,.1)}
html[data-theme=dark] .foot{background:rgba(14,49,117,0.88)}
html[data-theme=dark] .foot .pill{background:rgba(200,222,255,.1)}
html[data-theme=dark] .navlink:hover{background:rgba(200,222,255,.1)}
html[data-theme=dark] .icon-btn:hover{background:rgba(200,222,255,.1)}
html[data-theme=dark] .pill:hover,html[data-theme=dark] .btn-line:hover{background:rgba(200,222,255,.1);border-color:var(--rule)}
html[data-theme=dark] .pill.dark:hover{background:#fff;border-color:#fff}
html[data-theme=dark] .proj.is-active{background:rgba(200,222,255,.1)}
html[data-theme=dark] .fr img{background:rgba(200,222,255,.1)}
html[data-theme=dark] .fr.contain img{background:rgba(200,222,255,.1)}
html[data-theme=dark] .info .logo{background:rgba(200,222,255,.1)}
html[data-theme=dark] .info .chips2 span{background:rgba(200,222,255,.1)}
html[data-theme=dark] .hint .arrow{color:var(--blue)}
html[data-theme=dark] .pin img{background:rgba(200,222,255,.1)}
html[data-theme=dark] .pin:hover{box-shadow:0 4px 8px rgba(3,14,40,0.13),0 26px 50px -18px rgba(3,14,40,0.66)}
html[data-theme=dark] .cursor-tag span{color:var(--page)}
html[data-theme=dark] .side{background:rgba(14,49,117,0.92)}
html[data-theme=dark] .side .portrait{background:rgba(200,222,255,.1)}
html[data-theme=dark] .side nav a:hover{background:rgba(200,222,255,.1)}
html[data-theme=dark] .side nav a.on{background:rgba(200,222,255,.1)}
html[data-theme=dark] .pg-card::after{background:linear-gradient(to bottom,rgba(14,49,117,0),rgba(14,49,117,0.92) 60%,rgba(14,49,117,1))}
html[data-theme=dark] .pg-open{color:var(--page)}
html[data-theme=dark] .pg-card:hover{box-shadow:0 4px 8px rgba(3,14,40,0.11),0 30px 60px -24px rgba(3,14,40,0.66)}
html[data-theme=dark] .pg-card:hover .pg-open{background:#fff}
html[data-theme=dark] .vibe-shot{background:rgba(200,222,255,.1);background-image:repeating-linear-gradient(135deg,transparent 0 14px,rgba(200,222,255,.1) 14px 15px)}
html[data-theme=dark] .vibe-shot span{background:var(--paper)}
html[data-theme=dark] .vchip{background:rgba(200,222,255,.1)}
html[data-theme=dark] .vgo{color:var(--page)}
html[data-theme=dark] .side .bubble{background:var(--paper);border:1.5px solid var(--blue);color:var(--blue)}
html[data-theme=dark] .side .bubble::after{background:var(--paper);border-right:1.5px solid var(--blue);border-bottom:1.5px solid var(--blue)}
html[data-theme=dark] .scroll-cue{color:var(--ink-3)}
html[data-theme=dark] .pg-bar{background:rgba(200,222,255,.1)}
html[data-theme=dark] .pg-bar i{background:var(--rule)}
html[data-theme=dark] .pg-url{background:var(--paper)}
html[data-theme=dark] .pg-badge{color:var(--page)}
html[data-theme=dark] .chip:hover{background:rgba(200,222,255,.1)}
html[data-theme=dark] .chip[aria-pressed=true]{color:var(--page)}
html[data-theme=dark] .pcard .ph{background:rgba(200,222,255,.1)}
html[data-theme=dark] .pcard .tags span{background:rgba(200,222,255,.1)}
html[data-theme=dark] .more li a:hover{background:rgba(200,222,255,0.1)}
html[data-theme=dark] .side nav a.out.on{background:rgba(200,222,255,.1)}
html[data-theme=dark] .side .sub a.on{background:rgba(200,222,255,.1)}
html[data-theme=dark] .jump a:hover{background:rgba(200,222,255,.1)}
html[data-theme=dark] .art-card .ph{background:rgba(200,222,255,.1)}
html[data-theme=dark] .vc .shot{background:rgba(200,222,255,.1)}
html[data-theme=dark] .vc .shot .bar{background:var(--paper)}
html[data-theme=dark] .vc .shot .bar i{background:var(--rule)}
html[data-theme=dark] .vc .shot .win{background:var(--paper);background-image:repeating-linear-gradient(135deg,transparent 0 14px,rgba(200,222,255,.1) 14px 15px)}
html[data-theme=dark] .vc .shot .win span{background:var(--paper)}
html[data-theme=dark] .vc .chips span{background:rgba(200,222,255,.1)}
html[data-theme=dark] .vc .open{color:var(--page)}
html[data-theme=dark] .toc-t{color:var(--ink-3)}
html[data-theme=dark] .toc .line{background:var(--rule)}
html[data-theme=dark] .toc .fill{background:var(--rule)}
html[data-theme=dark] .toc a{color:var(--ink-3)}
html[data-theme=dark] .toc a.done{color:var(--ink-3)}
html[data-theme=dark] .shot img{background:rgba(200,222,255,.1)}
html[data-theme=dark] .kick{color:var(--blue)}
html[data-theme=dark] .sh .num{color:var(--blue)}
html[data-theme=dark] .story{border-left:1px solid var(--blue)}
html[data-theme=dark] .ps{background:rgba(159,192,255,0.12)}
html[data-theme=dark] .insights em{color:var(--blue)}
html[data-theme=dark] .tbl th{background:rgba(200,222,255,.1)}
html[data-theme=dark] .diff{border:1px solid var(--blue)}
html[data-theme=dark] .diff li{background:rgba(159,192,255,0.18);color:var(--blue)}
html[data-theme=dark] .personas .main{border-color:var(--blue)}
html[data-theme=dark] .av{background:rgba(159,192,255,0.2);color:var(--blue)}
html[data-theme=dark] .scope{background:rgba(14,49,117,0.7)}
html[data-theme=dark] .icb div:nth-child(2){border-color:var(--blue)}
html[data-theme=dark] .icb div:nth-child(2) dt{color:var(--blue)}
html[data-theme=dark] .ba .arr{color:var(--blue)}
html[data-theme=dark] .ba .batag.on{color:var(--blue)}
html[data-theme=dark] .flow .who{color:var(--blue)}
html[data-theme=dark] .mom .mn{color:var(--blue)}
html[data-theme=dark] .mom li::before{color:var(--blue)}
html[data-theme=dark] .solves{background:rgba(159,192,255,0.18);color:var(--blue)}
html[data-theme=dark] .next{border:1px solid var(--blue)}
html[data-theme=dark] .metrics b{color:var(--blue)}
html[data-theme=dark] .nextcs{color:var(--page)}
html[data-theme=dark] .nextcs:hover{background:#fff}
html[data-theme=dark] .back a{background:rgba(14,49,117,0.62);border:1px solid rgba(3,14,40,0.18);box-shadow:0 1px 2px rgba(3,14,40,0.088),0 8px 22px -12px rgba(3,14,40,0.44)}
html[data-theme=dark] .back a:hover{background:rgba(200,222,255,0.1)}
html[data-theme=dark] .back a:focus-visible{outline:2px solid var(--blue)}
html[data-theme=dark] .skip{color:var(--blue)}
html[data-theme=dark] .gal .shot img{background:var(--paper)}
html[data-theme=dark] .swatches i{border:1px solid rgba(3,14,40,0.13)}
html[data-theme=dark] .steps .mn{color:var(--blue)}
@media (max-width:1000px){
  html[data-theme=dark] .side .portrait{background:rgba(200,222,255,.1)}
}

/* 2. hand-tuned */
html[data-theme=dark]{
  color-scheme:dark;
  --page:#0B2A66; --sheet:#0E3175; --grid:rgba(190,215,255,.13); --rule:rgba(200,222,255,.32); --paper:#103780;
  --ink:#F2F6FF; --ink-2:#C3D3F2; --ink-3:#8FA8D6;
  --blue:#9FC0FF;
  --lift:0 1px 2px rgba(3,14,40,.35),0 6px 18px -8px rgba(3,14,40,.55);
  --lift-2:0 2px 4px rgba(3,14,40,.35),0 18px 40px -16px rgba(3,14,40,.65);
}
html[data-theme=dark] .spec{background:rgba(14,49,117,.55)}
html[data-theme=dark] .panel{background:rgba(255,255,255,.03)}
html[data-theme=dark] .foot{background:rgba(11,42,102,.9)}
html[data-theme=dark] .side{background:rgba(11,42,102,.94)}
html[data-theme=dark] .pg-card::after{background:linear-gradient(to bottom,rgba(14,49,117,0),rgba(14,49,117,.95))}
/* white-chalk buttons with blueprint-blue text */
html[data-theme=dark] .pill.dark,html[data-theme=dark] .cursor-tag span,html[data-theme=dark] .pg-open,html[data-theme=dark] .vgo{color:var(--page)}
html[data-theme=dark] .pill.dark:hover,html[data-theme=dark] .pg-card:hover .pg-open{background:#fff;border-color:#fff}
/* hover / chip fills: lighter washes of the same blue */
html[data-theme=dark] .navlink.is-hover,html[data-theme=dark] .navlink:hover,html[data-theme=dark] .icon-btn:hover{background:rgba(200,222,255,.12)}
html[data-theme=dark] .pill.is-hover,html[data-theme=dark] .pill:not(.dark):hover,html[data-theme=dark] .btn-line:hover{background:#15408F;border-color:rgba(200,222,255,.5)}
html[data-theme=dark] .proj.is-hover,html[data-theme=dark] .proj.is-active{background:rgba(200,222,255,.08)}
html[data-theme=dark] .foot .pill:not(.dark),html[data-theme=dark] .info .chips2 span,html[data-theme=dark] .vchip{background:rgba(200,222,255,.12)}
html[data-theme=dark] .side nav a:hover{background:rgba(200,222,255,.08)}
html[data-theme=dark] .side nav a.on{background:rgba(200,222,255,.14)}
html[data-theme=dark] .proj .thumb,html[data-theme=dark] .info .logo,html[data-theme=dark] .side .portrait{background:#15408F;box-shadow:inset 0 0 0 1px rgba(200,222,255,.25)}
html[data-theme=dark] .vibe-shot{background-color:#0E3175;background-image:repeating-linear-gradient(135deg,transparent 0 14px,rgba(200,222,255,.14) 14px 15px)}
html[data-theme=dark] .vibe-shot span,html[data-theme=dark] .screen .ph{background:var(--paper)}
html[data-theme=dark] .hint .arrow{color:var(--blue)}
html[data-theme=dark] .side .bubble,html[data-theme=dark] .side .bubble::after{background:var(--paper);border-color:var(--ink);color:var(--ink)}
/* dashed tags read as drafting callouts */
html[data-theme=dark] .tagline span{background:transparent;border-color:rgba(200,222,255,.5)}
/* the hero note stays a light paper card pinned to the blueprint */
html[data-theme=dark] .note{background:#F2F0EA}
html[data-theme=dark] .note p{color:#4B4B47}
html[data-theme=dark] .note::before,html[data-theme=dark] .fr .tape,html[data-theme=dark] .pin .tape{background:rgba(255,255,255,.3)}
html[data-theme=dark] .tab{background:#0A2459;box-shadow:0 0 0 1px rgba(200,222,255,.25),0 24px 48px -20px rgba(3,14,40,.8)}
/* ink cursor turns to chalk */
html[data-theme=dark] .ink-cur-el .d{background:#F2F6FF;box-shadow:inset 0 0 0 0 #F2F6FF}
html[data-theme=dark] .ink-cur-el.link .d{background:transparent;box-shadow:inset 0 0 0 1.5px #F2F6FF}
html[data-theme=dark] .ink-cur-el .p{background:#F2F6FF;color:#0B2A66}
/* dark-style pills stay solid chalk, even in the footer and on hover */
html[data-theme=dark] .foot .pill.dark,html[data-theme=dark] .pill.dark.is-hover{background:var(--ink);border-color:var(--ink);color:var(--page)}
html[data-theme=dark] .foot .pill.dark:hover{background:#fff;border-color:#fff}
/* case-study contents: unread is a faint outline, read is chalk, current glows */
html[data-theme=dark] .toc-t{color:var(--ink-3)}
html[data-theme=dark] .toc a{color:var(--ink-3)}
html[data-theme=dark] .toc a:hover{color:var(--ink)}
html[data-theme=dark] .toc a.done{color:var(--ink-2)}
html[data-theme=dark] .toc a.on{color:var(--ink)}
html[data-theme=dark] .toc .line{background:var(--rule)}
html[data-theme=dark] .toc .fill{background:var(--ink-2)}
html[data-theme=dark] .toc .dot{background:var(--sheet);box-shadow:0 0 0 1px var(--rule)}
html[data-theme=dark] .toc a.done .dot{background:var(--ink-2);box-shadow:0 0 0 1px var(--ink-2)}
html[data-theme=dark] .toc a.on .dot{background:#fff;box-shadow:0 0 0 3px rgba(200,222,255,.28)}
/* tablet player: white buttons keep dark icons (ink turns chalk in this theme) */
html[data-theme=dark] .bigplay,html[data-theme=dark] .pp,html[data-theme=dark] .hb.stop,html[data-theme=dark] .hb.snd[aria-pressed=true],html[data-theme=dark] .tlapse .snd.solo[aria-pressed=true]{color:#0B2A66}
/* profile box keeps the sketch's light background in this theme too */
html[data-theme=dark] .side .portrait{background:#F2F2F2}
/* floating profile bubble: same paper card as the sidebar bubble */
html[data-theme=dark] .bubble.float,html[data-theme=dark] .bubble.float::after{background:var(--paper);border-color:var(--ink);color:var(--ink)}
/* projects page tiles: the soft plate in blueprint blue */
html[data-theme=dark] .pcard .ph{box-shadow:0 0 0 9px rgba(200,222,255,.06)}
html[data-theme=dark] .pcard:hover .ph{box-shadow:0 0 0 9px rgba(200,222,255,.1),var(--lift-2)}
/* home project cards on phones and tablets */
html[data-theme=dark] .mc-img{background:rgba(200,222,255,.08)}
html[data-theme=dark] .mc-tags span{background:rgba(200,222,255,.12)}

/* desktop side panel: no backdrop blur. Nothing scrolls under it there, and during a page change the browser
   snapshots the panel on its own, where the blur showed as a brief smear before the real panel appeared (2026-11-13) */
@media (min-width:1001px){.side{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}}
/* sun / moon swap */
.icon-btn .moon{display:none}
html[data-theme=dark] .icon-btn .sun{display:none}
html[data-theme=dark] .icon-btn .moon{display:block}

/* links that look like the pill buttons, and the "Copied" note on the email pill (assets/theme.js) */
a.pill{text-decoration:none}
[data-copy]{position:relative}
[data-copy]::after{content:"Copied";position:absolute;left:50%;bottom:calc(100% + 8px);padding:6px 10px;border-radius:999px;background:var(--ink);color:var(--sheet,#fff);font:500 12px/1 var(--sans);white-space:nowrap;pointer-events:none;opacity:0;transform:translate(-50%,4px);transition:opacity .2s ease,transform .2s ease}
[data-copy].copied::after{opacity:1;transform:translate(-50%,0)}