/* Dark mode for the alt pages. Load after each page's own styles. The theme is set on
   <html data-theme> by an inline script in <head> (before first paint) and switched by
   the button next to mute (shared.js, ThemeManager). */

/* the button, sized like the mute button beside it */
.top .theme-btn { position: relative; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.top .theme-btn::after { content: ""; position: absolute; inset: -12px; }
.top .theme-btn svg { width: 18px; height: 18px; }
.top .theme-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 4px; }

:root[data-theme="dark"] {
  --paper: #030303;
  --ink: #EDEDED;
  --muted: #8C8C8C;
  --body: #BDBDBD;
  --tile: #101010;
  --tile-line: #1E1E1E;
  --mid: #A8A8A8;
  --mid-500: #8C8C8C;
  --white: #0C0C0C;
  --hot: #FF3A2E;   /* a clear red that reads on the near-black */
  color-scheme: dark;
}
html { background: var(--paper); }
/* Inter draws → as a thin line half the height of its ↗, so at the same size the → looks
   smaller. At 1.3× the two read as a pair, and the larger → sits centered on the text. */
.go:not(.out) { font-size: 1.3em; line-height: 1; }
.arch-row[href$=".html"] .arch-go { font-size: 1.04em; line-height: 1; }   /* 1.3 × the .8em the row's ↗ uses */
/* Links that open another site get the same small accent ↗ as About's lists */
a.nt::after { content: "\2197"; display: inline-block; margin-left: 3px; color: var(--hot); font-size: .85em; font-weight: 400; transition: transform .2s; }
a.nt:hover::after { transform: translate(2px, -2px); }
@media (prefers-reduced-motion: reduce) { a.nt::after { transition: none; } }
/* Text only screen readers hear */
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.fine > span { white-space: nowrap; }   /* keep the copyright on one line */
.fine .clock { font-variant-numeric: tabular-nums; }   /* digits keep their width as the time changes */
/* "Let’s chat": black in light mode, white in dark */
.say { color: var(--ink); }
:root[data-theme="dark"] .say { color: #FFFFFF; }
/* Frosted glass on the page background, under all the content: a fine frost of grey
   specks that lighten and darken evenly (so the tone stays the same), over slow, soft
   patches of fog (below). The filter covers exactly its tile, so the stitched noise
   lines up where the tiles repeat. */
body {
  background-image: var(--frost);
  background-size: 160px 160px;
  isolation: isolate;   /* so the fog (z-index -2) sits on the background, under everything */
  /* at least the window's height: the body clips its overflow, so on a short page
     (the compressed home) the fog would stop at its bottom edge */
  min-height: 100vh;
  min-height: 100dvh;
}
/* The fog: a few large, soft blobs on a fixed layer behind everything (shared.js adds
   it), each rising, sinking and stretching on its own slow loop, like a lava lamp.
   They move by transform only, so the browser doesn't repaint the page as they go. */
.fog { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.fog i {
  position: absolute; width: 84vmax; height: 84vmax; border-radius: 50%;
  background: radial-gradient(circle, var(--blob) 0, var(--blob) 30%, transparent 68%);
  animation: blob-a 58s ease-in-out infinite alternate; will-change: transform;
}
.fog i:nth-child(1) { left: -34vmax; top: 30vh; }
.fog i:nth-child(2) { left: 36vw;   top: -36vmax; animation-name: blob-b; animation-duration: 71s; animation-delay: -20s; }
.fog i:nth-child(3) { left: -4vw;   top: 60vh;   animation-name: blob-c; animation-duration: 64s; animation-delay: -41s; width: 68vmax; height: 68vmax; }
.fog i:nth-child(4) { left: 54vw;   top: 40vh;   animation-name: blob-b; animation-duration: 83s; animation-delay: -55s; animation-direction: alternate-reverse; width: 62vmax; height: 62vmax; }
.fog i:nth-child(5) { left: 12vw;   top: -24vh;  animation-name: blob-c; animation-duration: 77s; animation-delay: -12s; animation-direction: alternate-reverse; width: 56vmax; height: 56vmax; }
@keyframes blob-a {
  0%   { transform: translate3d(0, 0, 0) scale(1, 1); }
  30%  { transform: translate3d(14vw, -22vh, 0) scale(1.18, .86) rotate(18deg); }
  60%  { transform: translate3d(26vw, -46vh, 0) scale(.9, 1.15) rotate(-8deg); }
  100% { transform: translate3d(8vw, -64vh, 0) scale(1.1, .94) rotate(12deg); }
}
@keyframes blob-b {
  0%   { transform: translate3d(0, 0, 0) scale(1, 1); }
  35%  { transform: translate3d(-16vw, 30vh, 0) scale(.84, 1.2) rotate(-14deg); }
  70%  { transform: translate3d(-30vw, 52vh, 0) scale(1.16, .9) rotate(10deg); }
  100% { transform: translate3d(-12vw, 70vh, 0) scale(.94, 1.08) rotate(-6deg); }
}
@keyframes blob-c {
  0%   { transform: translate3d(0, 0, 0) scale(1, 1); }
  40%  { transform: translate3d(24vw, -40vh, 0) scale(1.22, .82) rotate(22deg); }
  100% { transform: translate3d(48vw, -70vh, 0) scale(.88, 1.14) rotate(-12deg); }
}
/* a dark, muted rust: the accent's red-orange, deepened and faded */
:root { --blob: rgba(150, 56, 34, .04); }
:root[data-theme="dark"] { --blob: rgba(150, 48, 30, .04); }
/* light mode: no green; the blobs that were green are hidden, the rest are rust */
:root:not([data-theme="dark"]) .fog i:nth-child(1),
:root:not([data-theme="dark"]) .fog i:nth-child(4) { display: none; }
@media (prefers-reduced-motion: reduce) { .fog i { animation: none; } }
:root {
  --frost: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='3' intercept='-1'/%3E%3CfeFuncG type='linear' slope='3' intercept='-1'/%3E%3CfeFuncB type='linear' slope='3' intercept='-1'/%3E%3CfeFuncA type='table' tableValues='1 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23n%29' opacity='.03'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] {
  --frost: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='3' intercept='-1'/%3E%3CfeFuncG type='linear' slope='3' intercept='-1'/%3E%3CfeFuncB type='linear' slope='3' intercept='-1'/%3E%3CfeFuncA type='table' tableValues='1 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23n%29' opacity='.05'/%3E%3C/svg%3E");
}
body { transition: background-color .3s ease, color .3s ease; }
@media (prefers-reduced-motion: reduce) { body { transition: none; } }

/* text set in fixed greys */
[data-theme="dark"] .bio + .bio,
[data-theme="dark"] .intro p:not(.lead):not(.label) { color: var(--body); }
[data-theme="dark"] .slide figcaption,
[data-theme="dark"] .arch-copy,
[data-theme="dark"] .proj-ladder-control,
[data-theme="dark"] .proj-stat-d,
[data-theme="dark"] .proj-tile-note,
[data-theme="dark"] .proj-ph-desc { color: var(--muted); }

/* strings: the played colours, lifted to read on dark */
[data-theme="dark"] .string-path.played { stroke: #5DBBAA; }
[data-theme="dark"] .string-path.played-muted { stroke: #E5604F; }

/* panels and frames set in white */
[data-theme="dark"] .proj-ladder { background: #1A1A1A; }
[data-theme="dark"] .proj-ladder-dots i { border-color: #4A4A4A; }
[data-theme="dark"] .proj-ph-box { border-color: #3A3A3A; background: rgba(255, 255, 255, .03); }
[data-theme="dark"] .proj-embed-bar { background: #101010; color: var(--ink); box-shadow: inset 0 0 0 1px var(--tile-line); }
[data-theme="dark"] body.collage-on .scatter-stage { background: var(--paper); }

/* The organization's name, shown under its logo on hover (org-name.js places it level
   with the one-line description) */
.org { position: relative; }
.org-name { position: absolute; left: 0; max-width: 180px; opacity: 0; transform: translateY(-3px); transition: opacity .2s ease, transform .2s ease; pointer-events: none; }
.org:hover .org-name, .org .tile:focus-visible ~ .org-name { opacity: 1; transform: none; }
@media (hover: none), (max-width: 760px) { .org-name { display: none; } }
@media (prefers-reduced-motion: reduce) { .org-name { transition: none; transform: none; } }