/* Blog/docs pages. Same language as index.html: inscriptions on black, one ember hue, the app font.
   Taste source: wiki/briefs/x-taste.md + term3d GOLD (no panes, one-colour ramp, JetBrains Mono). No boxes, no light theme. */
:root{
  --bgr:3,4,6; --sr:205,215,236; --er:255,138,61;
  --bg:#030406; --bg2:#030406;
  --fg:#eef3ff; --silver:#cdd7ec; --muted:#9aa3b5; --dim:#737c90;
  --line:rgba(var(--sr),.09); --line2:rgba(var(--sr),.16);
  /* the ember ramp (term3d particles.rs): coal -> wood -> ember -> white-hot */
  --coal:#170600; --wood:#7c2608; --ember:#ff8a3d; --gold:#ffb547; --hot:#fff0dc;
  --glow:0 0 18px rgba(var(--er),.45); --haze:0 0 22px rgba(var(--sr),.14);
  --mono:'JetBrains Mono',ui-monospace,monospace; --serif:var(--mono); --sans:var(--mono);
  color-scheme:dark;
}
html[data-theme=day]{
  --bg:#e8ebf0; --bg2:#e8ebf0; --bgr:232,235,240;
  --fg:#0b0f16; --silver:#2b3443; --muted:#465063; --dim:#677185; --sr:43,52,67;
  --coal:#f3e6d6; --wood:#d9a77a; --ember:#b0500e; --gold:#8f5500; --hot:#3a1d00; --er:176,80,14;
  --glow:none; --haze:none; color-scheme:light;
}
/* day: every particle canvas is light added onto black; invert + half-turn of hue makes it ink on the pale ground, same hues */
html[data-theme=day] canvas{filter:invert(1) hue-rotate(180deg)}html[data-theme=day] canvas.ink{filter:none}
.theme-toggle{background:none;border:0;font:inherit;color:var(--dim);cursor:pointer;padding:0}
.theme-toggle:hover,.theme-toggle:focus-visible{color:var(--gold)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-padding-top:84px;scrollbar-width:thin;scrollbar-color:#3a1607 var(--bg)}
body{background:var(--bg);color:var(--silver);font:15px/1.75 var(--mono);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
::selection{background:var(--wood);color:var(--hot)}
:focus-visible{outline:1px solid var(--ember);outline-offset:4px;border-radius:2px}
.mono{font-family:var(--mono);font-size:.75rem;letter-spacing:.02em;color:var(--dim)}

nav#nav{position:sticky;top:0;z-index:20;background:linear-gradient(var(--bg) 70%,rgba(var(--bgr),0))}
.bar{max-width:1280px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
nav .bar{height:64px}
.brand{display:flex;align-items:center;gap:12px;font-weight:700;color:var(--fg);white-space:nowrap}
.brand i{width:5px;height:5px;border-radius:50%;background:var(--hot);box-shadow:0 0 6px var(--gold),0 0 18px var(--ember)}
.brand span{color:var(--dim);font-weight:400}
.links{display:flex;gap:26px;align-items:center;font-size:.875rem;color:var(--muted)}
.links a{transition:color .3s,text-shadow .3s}
.links a:hover{color:var(--gold);text-shadow:var(--glow)}
.theme{display:none}

.docs{max-width:1280px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:230px minmax(0,1fr) 200px;gap:56px}
.side,.toc{position:sticky;top:64px;align-self:start;max-height:calc(100vh - 64px);overflow:auto;padding:36px 0;font-size:.75rem;scrollbar-width:none}
.side .all{display:block;font-weight:700;color:var(--fg);margin-bottom:18px}
.grp{margin-bottom:16px}
.grp>a{display:flex;justify-content:space-between;color:var(--muted);padding:4px 0}
.grp>a span{font-size:.75rem;color:var(--dim)}
.grp>a:hover,.grp>a.on{color:var(--fg)}
.grp ul{list-style:none;margin:4px 0 0 2px}
.grp li a{display:block;padding:5px 0 5px 14px;color:var(--dim);line-height:1.45}
.grp li a:hover{color:var(--silver)}
.grp li a[aria-current]{color:var(--gold);text-shadow:var(--glow)}
.toc ol{list-style:none;margin-top:12px}
.toc li a{display:block;padding:4px 0;color:var(--dim);line-height:1.45}
.toc li a:hover,.toc li a.on{color:var(--gold)}

.art{padding:44px 0 96px;max-width:720px;min-width:0}
/* reading shade: the depth field stays around the column, not through the words; a haze with no edges */
.art{position:relative;isolation:isolate}
.art::before{content:'';position:absolute;inset:0 -72px;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(var(--bgr),.78) 14%,rgba(var(--bgr),.78) 86%,transparent);
  -webkit-mask:linear-gradient(transparent,#000 120px,#000 calc(100% - 120px),transparent);mask:linear-gradient(transparent,#000 120px,#000 calc(100% - 120px),transparent)}
@media (max-width:820px){.art::before{inset:0 -16px}}
.crumb{font-size:.75rem;color:var(--dim)}
.crumb a:hover{color:var(--silver)}
.art h1{font-weight:700;font-size:clamp(1.6rem,3.4vw,2.35rem);line-height:1.18;letter-spacing:-.02em;margin:16px 0 14px;color:var(--fg);text-shadow:var(--haze)}
.byline{color:var(--dim);font-size:.75rem}
.byline a{color:var(--muted)}
/* TL;DR: an inscription hung on a living line, not a box */
.tldr{margin:32px 0 44px;padding:22px 26px;position:relative;background:radial-gradient(closest-side,rgba(var(--er),.07),rgba(var(--er),.025) 55%,transparent)}
.tldr span{font-size:.75rem;letter-spacing:.02em;color:var(--silver)}
.tldr p{margin-top:6px;font-size:1rem;color:var(--fg)}

.prose{font-size:1rem;color:var(--silver)}
.prose>*+*{margin-top:1.15em}
.prose h2{font-weight:700;font-size:1.3125rem;letter-spacing:-.01em;line-height:1.3;margin-top:2.4em;color:var(--fg);text-shadow:var(--haze)}
.prose h3{font-size:1rem;font-weight:700;margin-top:1.9em;color:var(--fg)}
.prose h2 a:hover::after,.prose h3 a:hover::after{content:" #";color:var(--ember)}
.prose p a,.prose li a,.prose td a{color:var(--gold);border-bottom:1px solid rgba(var(--er),.35);transition:text-shadow .3s}
.prose p a:hover,.prose li a:hover,.prose td a:hover{text-shadow:var(--glow)}
.prose strong{color:var(--fg);font-weight:700}
.prose ul,.prose ol{padding-left:1.3em}
.prose li+li{margin-top:.45em}
.prose li::marker{color:var(--ember)}
.prose code{font-size:.92em;color:var(--silver)}
.prose pre{background:radial-gradient(closest-side,rgba(var(--sr),.045),transparent);padding:18px 22px;overflow-x:auto}
.prose pre code{background:none;padding:0;font-size:.875rem;color:var(--silver)}
.prose blockquote{padding:14px 22px;color:var(--silver);font-style:italic;background:radial-gradient(closest-side,rgba(var(--sr),.05),transparent)}
.prose figure{margin:2em 0}
.prose video{width:100%;height:auto;background:var(--bg);display:block;-webkit-mask:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent),linear-gradient(transparent,#000 5%,#000);-webkit-mask-composite:source-in;mask:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent),linear-gradient(transparent,#000 5%,#000);mask-composite:intersect}
.prose figcaption{margin-top:.7em;font-size:.8em;color:var(--dim)}
.prose img{max-width:100%;height:auto;display:block}
.tbl{overflow-x:auto}
.prose table{border-collapse:collapse;width:100%;font-size:.875rem;font-variant-numeric:tabular-nums}
.prose th,.prose td{padding:9px 14px 9px 0;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap;vertical-align:top}
.prose td{white-space:normal}.prose td:first-child{white-space:nowrap;color:var(--fg)}
.prose th{font-weight:400;font-size:.75rem;letter-spacing:.02em;color:var(--dim);border-bottom-color:var(--line2)}
.prose tr:last-child td{border-bottom:0}

/* links that act: words with a glow, never pills */
.btn{display:inline-flex;align-items:center;gap:6px;padding:4px 0;white-space:nowrap;flex:none;font:400 .875rem var(--mono);background:none;border:0;color:var(--silver);cursor:pointer;transition:color .3s,border-color .3s,text-shadow .3s}
.btn:hover,.btn:focus-visible{color:var(--gold);text-shadow:var(--glow),0 0 22px rgba(var(--er),.55)}
.btn.primary{color:var(--gold);text-shadow:var(--glow)}
.btn.primary:hover{color:var(--hot)}
.share{display:flex;gap:22px;flex-wrap:wrap;align-items:center;margin-top:64px}
.share .mono{margin-right:4px}
.hire{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:28px;padding:20px 24px;position:relative;background:radial-gradient(closest-side,rgba(var(--er),.055),transparent)}
.hire p{color:var(--muted);font-size:.875rem;margin-top:2px}
.rel{margin-top:56px;display:grid;gap:4px}

.lede{color:var(--muted);font-size:1rem;max-width:62ch}
.chips{display:flex;gap:8px 22px;flex-wrap:wrap;margin:28px 0 26px}
.chips a{font-size:.75rem;color:var(--dim);transition:color .3s}
.chips a:hover{color:var(--silver)}
.chips a.on{color:var(--gold);text-shadow:var(--glow)}
/* lists of posts/projects: free inscriptions; the one in focus lights */
.posts{display:grid;gap:0;position:relative}
.post{display:block;padding:14px 0 18px;position:relative}
.post .meta{display:block;font-size:.75rem;letter-spacing:.02em;color:var(--dim)}
.post b{display:block;font-weight:700;font-size:1rem;line-height:1.4;margin:6px 0 4px;color:var(--fg);transition:color .3s,text-shadow .3s}
.post:hover b,.post.on b{color:var(--hot);text-shadow:0 0 14px rgba(var(--er),.55),0 0 34px rgba(var(--er),.25)}
.post .d{color:var(--muted);font-size:.875rem}
.empty{color:var(--dim);padding:22px 0}
.subs{margin-top:28px}
.subs a{color:var(--gold)}

footer{padding:40px 0 28px;font-size:.75rem;color:var(--dim)}
footer .bar{flex-wrap:wrap}
footer a:hover{color:var(--silver)}

@media (max-width:1100px){.docs{grid-template-columns:210px minmax(0,1fr);gap:40px}.toc{display:none}}
@media (max-width:820px){
  .docs{grid-template-columns:minmax(0,1fr);gap:0}
  .side{display:none}
  .art{padding-top:28px}
  .hire{flex-direction:column;align-items:flex-start}
  .links a:not(.keep){display:none}
}
@media (max-width:520px){.bar,.docs{padding:0 16px}.links{gap:16px}.brand span{display:none}body{font-size:14px}}

/* /data hero: CUDA-traced score drawn by assets/light.js. */
.lightstage{position:relative;height:min(68vh,640px);min-height:380px;background:var(--bg) url(/assets/light/sky-poster.jpg) center top/auto calc(100% - 120px) no-repeat;overflow:hidden}
.lightstage canvas{position:absolute;inset:0 0 auto 0;width:100%;height:calc(100% - 120px);display:block;opacity:0;transition:opacity 1.4s ease}
.lightstage canvas.on{opacity:1;cursor:pointer}
@media (prefers-reduced-motion:reduce){.lightstage canvas{transition:none}}
.lightstage canvas.nogl{display:none}
@media (max-width:820px){.lightstage{background:var(--bg)}}
/* day: the score is an opaque canvas (black ground), so it multiplies onto the paper and its white-hot cores soften to graphite, not black */
html[data-theme=day] .lightstage{background:var(--bg)}html[data-theme=day] .lightstage canvas{filter:brightness(.7) invert(1) hue-rotate(180deg);mix-blend-mode:multiply}
.ls-cap{position:absolute;left:max(16px,calc(50% - 560px));bottom:28px;max-width:540px;color:var(--fg)}
.ls-cap .mono{color:var(--muted);font-size:.75rem;letter-spacing:.02em}
.ls-cap p{margin:.5em 0 .9em;font-size:.875rem;line-height:1.55;color:var(--silver);text-shadow:0 1px 14px var(--bg)}
.ls-pieces{display:flex;flex-wrap:wrap;gap:6px 20px}.ls-pieces button{background:none;border:0;padding:2px 0;cursor:pointer;font:400 .75rem var(--mono);letter-spacing:.02em;color:var(--dim);transition:color .3s,text-shadow .3s}
.ls-pieces button[aria-selected=true]{color:var(--gold);text-shadow:var(--glow)}.ls-pieces button:hover{color:var(--silver)}.ls-pieces button:focus-visible{outline:1px solid var(--ember);outline-offset:3px}
.ls-ctl{display:flex;align-items:center;gap:16px}.ls-ctl .mono{font-size:.75rem;letter-spacing:.06em}
@media (max-width:820px){.lightstage{height:auto;min-height:0}.lightstage canvas{position:relative;height:38vh;min-height:260px}
  .ls-cap{position:static;max-width:none;padding:4px 16px 22px}.ls-cap p{font-size:.875rem}}
/* facts: numbers as light, no grid of boxes */
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:26px 32px;margin:36px 0 14px}
.facts div{display:flex;flex-direction:column;gap:6px}
.facts b{font-weight:700;font-size:1.5rem;letter-spacing:-.02em;color:var(--fg);text-shadow:var(--haze)}
.facts span{font-size:.75rem;line-height:1.5;color:var(--muted)}
.facts-note{font-size:.75rem;color:var(--dim);margin:0 0 8px}
@media (max-width:820px){.facts{grid-template-columns:1fr 1fr}.facts b{font-size:1.3125rem}}
/* lineages ("When | What" tables): newest first and lit, older steps fade (no rail) */
.prose ol.when{list-style:none;padding:0;position:relative;margin:1.4em 0}
.prose ol.when li{padding:0 0 20px;margin:0;opacity:calc(1 - var(--age,0) * .5);transition:opacity .4s}.prose ol.when li:hover{opacity:1}
.prose ol.when time{display:block;font-size:.75rem;letter-spacing:.06em;color:var(--dim)}
.prose ol.when li:first-of-type time{color:var(--gold)}
.prose ol.when li:first-of-type div{color:var(--hot);text-shadow:var(--glow)}
.prose ol.when div{font-size:.875rem;color:var(--silver)}
.prose ol.when div span{font-size:.75rem;color:var(--dim);margin-left:6px;text-shadow:none}
#wtree{display:block;margin-top:26px}
.side .wk{display:block;margin-top:8px}.side .wk .mono{display:block;margin-top:6px;font-size:.75rem;transition:color .3s}.side .wk:hover .mono{color:var(--gold)}
/* article sections hang as knots in the margin (static; articles stay plain docs) */
.prose h2{position:relative}
.prose h2::before{content:"";position:absolute;left:-22px;top:.55em;width:5px;height:5px;border-radius:50%;background:var(--silver);opacity:.5}
.prose h2:hover::before,.prose h2.on::before{background:var(--hot);opacity:1;box-shadow:0 0 6px var(--gold),0 0 14px var(--ember)}
@media (max-width:820px){.prose h2::before{display:none}}
/* /data datasets tree */
.dtree{position:relative;margin:1.6em 0 .6em}
#dtree{display:block;width:100%;height:440px;cursor:crosshair}
.dtip{position:absolute;pointer-events:none;background:radial-gradient(closest-side,rgba(var(--bgr),.92),rgba(var(--bgr),0));padding:10px 22px;font-size:.75rem;color:var(--hot);white-space:nowrap;transform:translate(-50%,-100%);display:none;z-index:2}
.dtip b{color:var(--fg);font-weight:700}
@media (max-width:560px){#dtree{height:360px}}
.dlist{display:none}
@media (max-width:560px){.prose .dlist{display:block;font-size:.75rem;color:var(--muted)}.dtip{left:0!important;top:0!important;transform:none;white-space:normal;padding:4px 0}}
.todo{font-size:.75rem;letter-spacing:.08em;color:var(--hot);background:rgba(var(--er),.14);padding:1px 6px;border-radius:2px;margin-left:6px}
#dust{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:-1}
body{position:relative;z-index:0}
/* depth assets (assets/depth.js): a photograph as points of light; full column, no frame */
.prose figure.deep{margin:2em 0 2.2em}
.deep canvas{display:block;width:100%;height:min(78vh,620px);opacity:0;transition:opacity 1.2s}
.deep canvas.on{opacity:1}.deep canvas.nogl{display:none}
@media (prefers-reduced-motion:reduce){.deep canvas{transition:none}}
#ambient{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:-1}

/* an article's drawing (assets/plate.js): held still under the title, the same image as light by night and ink by day */
.plate{display:block;width:100%;aspect-ratio:16/7;margin:30px 0 -8px;opacity:0;transition:opacity .9s}.plate.on{opacity:1}
@media (prefers-reduced-motion:reduce){.plate{transition:none}}
/* blog index: each card holds its drawing small, to the right of the words */
.post.has-art{display:grid;grid-template-columns:1fr 168px;column-gap:24px;align-items:center}.post.has-art>span,.post.has-art>b{grid-column:1}
.post .thumb{grid-column:2;grid-row:1/span 3;margin:0;aspect-ratio:16/10;width:168px}
@media (max-width:620px){.post.has-art{grid-template-columns:1fr 96px;column-gap:14px}.post .thumb{width:96px}}