/* secretlycharles.com — terminal/dev minimal */

:root {
  /* defaults overridden by JS theme/density */
  --bg: #0b0e0c;
  --bg-elev: #0f1311;
  --ink: #d8e6dc;
  --ink-dim: #8aa194;
  --ink-faint: #4c5f56;
  --accent: #5be584;     /* phosphor green */
  --accent-dim: rgba(91, 229, 132, 0.16);
  --accent-2: #6ec1ff;   /* secondary: terminal blue */
  --line: rgba(138, 161, 148, 0.18);
  --line-strong: rgba(138, 161, 148, 0.34);
  --selection: rgba(91, 229, 132, 0.28);

  /* density */
  --pad-block: 28px;
  --col: 900px;
  --gap: 22px;
  --row: 14px;

  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --sans: "JetBrains Mono", ui-monospace, monospace;
}

/* Single committed theme: phosphor green-on-black. */

[data-density="comfortable"] {
  --pad-block: 28px;
  --col: 900px;
  --gap: 22px;
  --row: 14px;
}
[data-density="compact"] {
  --pad-block: 18px;
  --col: 800px;
  --gap: 14px;
  --row: 8px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

/* soft ambient accent glows — top corners, very faint, no repetition */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 18% 0%, var(--accent-dim), transparent 70%),
    radial-gradient(ellipse 50% 40% at 88% 8%, var(--accent-dim), transparent 75%);
  pointer-events: none;
  opacity: 0.7;
  z-index: 0;
}

::selection { background: var(--selection); color: var(--ink); }

a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  transition: color 120ms ease, border-color 120ms ease;
}
a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

button {
  font: inherit;
  color: inherit;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 0;
  padding: 6px 10px;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;
}
button:hover { border-color: var(--accent); color: var(--accent); }
button.ghost { border-color: transparent; padding: 4px 6px; }
button.ghost:hover { border-color: transparent; background: var(--accent-dim); }

/* --- CRT overlays --- */
.crt-scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0px,
    rgba(0, 0, 0, 0) 2px,
    rgba(0, 0, 0, 0.06) 3px,
    rgba(0, 0, 0, 0) 4px
  );
  mix-blend-mode: multiply;
  opacity: 0.55;
  z-index: 9000;
}
.crt-vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.45) 100%);
  z-index: 9001;
  opacity: 0.7;
}
[data-crt="off"] .crt-scanlines,
[data-crt="off"] .crt-vignette { display: none; }

/* mouse trail canvas — falling snowflake-like lines */
.mouse-trail {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
}

/* --- layout --- */
.shell {
  position: relative;
  z-index: 2;
  max-width: var(--col);
  margin: 0 auto;
  padding: var(--pad-block) 24px 80px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 20px;
  border-bottom: 1px dashed var(--line);
  font-size: 12.5px;
  color: var(--ink-dim);
}
.topbar .left {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.topbar .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent), 0 0 4px var(--accent);
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 0.55; transform: scale(0.92); }
  50%      { opacity: 1;    transform: scale(1.08); }
}
.topbar .clock {
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.topbar .clock .live {
  color: var(--accent);
  margin-right: 6px;
}
@media (max-width: 640px) {
  .topbar .clock { display: none; }
  .topbar nav { gap: 10px; }
}
.topbar .path { color: var(--ink); }
.topbar .path .sep { color: var(--ink-faint); }
.topbar nav {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.topbar nav a {
  border-bottom: none;
  color: var(--ink-dim);
  position: relative;
}
.topbar nav a::before { content: "["; color: var(--ink-faint); margin-right: 2px; }
.topbar nav a::after  { content: "]"; color: var(--ink-faint); margin-left: 2px; }
.topbar nav a:hover { color: var(--accent); }
.topbar nav a.active { color: var(--ink); }
.topbar nav a.active::before, .topbar nav a.active::after { color: var(--accent); }

.kbd {
  font-family: var(--mono);
  font-size: 11px;
  padding: 2px 6px;
  border: 1px solid var(--line);
  color: var(--ink-dim);
  display: inline-block;
  letter-spacing: 0;
}

/* eyebrows: numbered, accent-loud */
.eyebrow {
  font-size: 11.5px;
  color: var(--ink-faint);
  letter-spacing: 0.06em;
  text-transform: lowercase;
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.eyebrow .hash { color: var(--accent); }
.eyebrow .num {
  color: var(--accent);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.eyebrow .lbl { color: var(--ink); }
.eyebrow .rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--line-strong), transparent);
  margin-left: 4px;
}

h1.title, h2.title {
  font-family: var(--mono);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin: 0 0 12px;
}
h1.title { font-size: clamp(28px, 4vw, 40px); }
h2.title { font-size: clamp(20px, 2.6vw, 26px); }

.section {
  padding: 32px 0 var(--gap);
  position: relative;
}
.section:first-of-type { padding-top: 0; }
main > .section:first-of-type { padding-top: 0; }
main > .hero + .section { padding-top: 12px; }

.muted { color: var(--ink-dim); }
.faint { color: var(--ink-faint); }
.accent { color: var(--accent); }
.kw { color: var(--accent); }

/* hero */
.hero {
  padding: 48px 0 32px;
  position: relative;
}
.hero .greet { color: var(--ink-faint); margin-bottom: 6px; font-size: 12.5px; }
.hero .name {
  font-size: clamp(34px, 6vw, 64px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  margin: 0 0 14px;
  display: block;
  position: relative;
  text-wrap: balance;
}
.hero .name .accent-mark {
  color: var(--accent);
  display: inline-block;
  margin-left: 4px;
  font-weight: 700;
  animation: caret 1.05s steps(2) infinite;
}
@keyframes caret { 50% { opacity: 0; } }

/* periodic, very brief glitch on the name — every ~14s */
.glitchable {
  position: relative;
  animation: glitchcycle 14s infinite;
}
@keyframes glitchcycle {
  0%, 96%, 100% { transform: none; text-shadow: none; clip-path: none; }
  96.5% { transform: translateX(-2px); text-shadow: 2px 0 var(--accent), -2px 0 rgba(255, 111, 111, 0.7); }
  97%   { transform: translateX(2px);  text-shadow: -2px 0 var(--accent), 2px 0 rgba(255, 111, 111, 0.7); }
  97.5% { transform: translateX(-1px); text-shadow: 1px 0 var(--accent); }
  98%   { transform: none; text-shadow: none; }
}
.hero .tagline {
  font-size: clamp(15px, 1.4vw, 17px);
  color: var(--ink);
  margin: 0 0 8px;
  max-width: 80ch;
  font-weight: 500;
}
.hero .tagline em { color: var(--accent); font-style: normal; }
.hero .sub {
  color: var(--ink-dim);
  font-size: 13px;
  margin: 0 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hero .sub .pip {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--accent);
  display: inline-block;
  box-shadow: 0 0 8px var(--accent);
}
.hero .sub .hl {
  color: var(--accent-2);
  font-weight: 600;
  letter-spacing: 0.01em;
}
.hero .lines {
  font-size: 13px;
  line-height: 1.85;
  color: var(--ink-dim);
}
.hero .lines .prompt { color: var(--accent); margin-right: 8px; }
.hero .lines .out { color: var(--ink); }
.hero .lines .typed::after {
  content: "▌";
  color: var(--accent);
  margin-left: 2px;
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.hero .links {
  display: flex;
  gap: 22px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.hero .links a {
  border-bottom: none;
  padding: 4px 0;
  color: var(--ink);
  position: relative;
  font-weight: 500;
}
.hero .links a::before {
  content: "\2192";
  color: var(--accent);
  margin-right: 8px;
  display: inline-block;
  transition: transform 200ms ease;
}
.hero .links a:hover::before { transform: translateX(3px); }
.hero .links a:hover { color: var(--accent); }

/* now strip */
.now {
  margin-top: 28px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  background: var(--bg-elev);
  display: flex;
  gap: 16px;
  align-items: baseline;
  flex-wrap: wrap;
  position: relative;
}
.now .label {
  color: var(--accent);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  min-width: 56px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.now .label::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
  animation: pulse 1.8s ease-in-out infinite;
  box-shadow: 0 0 8px var(--accent);
}
.now .body  { color: var(--ink); font-size: 13px; flex: 1; min-width: 200px; }

/* lists */
ul.bare { list-style: none; padding: 0; margin: 0; }
ul.bare > li { padding: var(--row) 0; border-top: 1px dashed var(--line); }
ul.bare > li:first-child { border-top: none; }

/* blog list */
.post {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  gap: 18px;
  align-items: baseline;
  padding: var(--row) 0;
  border-top: 1px dashed var(--line);
}
.post:first-of-type { border-top: none; }
.post .date { color: var(--ink-faint); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.post .title-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.post .ptitle {
  color: var(--ink);
  border-bottom: none;
  font-size: 15px;
}
.post .ptitle:hover { color: var(--accent); }
.post .ptags {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
}
.tag {
  font-size: 11px;
  color: var(--ink-faint);
  padding: 1px 6px;
  border: 1px solid var(--line);
  cursor: pointer;
  user-select: none;
}
.tag:hover { color: var(--accent); border-color: var(--accent); }
.tag.active { color: var(--bg); background: var(--accent); border-color: var(--accent); }
.post .pread { color: var(--ink-faint); font-size: 11.5px; white-space: nowrap; }

@media (max-width: 580px) {
  .post { grid-template-columns: 1fr; gap: 6px; }
  .post .pread { display: none; }
}

/* hover preview card */
.preview-card {
  position: fixed;
  z-index: 1000;
  width: 320px;
  background: var(--bg-elev);
  border: 1px solid var(--line-strong);
  padding: 14px 16px;
  font-size: 12.5px;
  color: var(--ink-dim);
  box-shadow: 0 14px 38px rgba(0,0,0,0.35);
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 120ms ease, transform 120ms ease;
}
.preview-card.show { opacity: 1; transform: translateY(0); }
.preview-card .pc-title { color: var(--ink); font-size: 13px; margin-bottom: 6px; }
.preview-card .pc-meta { color: var(--ink-faint); font-size: 11px; margin-bottom: 8px; }

/* filter bar */
.filterbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 8px 0 18px;
}
.filterbar .label { color: var(--ink-faint); font-size: 12px; margin-right: 6px; }

/* resume */
.entry {
  padding: 10px 0;
  border-top: none;
  cursor: pointer;
  position: relative;
  transition: padding 200ms ease;
}
/* dashed divider ONLY between two consecutive .entry siblings — sibling
   selector ignores any wrapping elements like the section header, so the
   first entry in a section never gets a top line regardless of structure */
.entry + .entry { border-top: 1px dashed var(--line); }
.entry .head {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: 16px;
  align-items: baseline;
}
.entry .when { color: var(--ink-faint); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.entry .what { color: var(--ink); font-size: 14px; }
.entry .what .role { color: var(--ink); }
.entry .what .at { color: var(--ink-dim); }
.entry .toggle { color: var(--ink-faint); font-size: 12px; }
.entry .body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 360ms ease, opacity 240ms ease, margin-top 240ms ease;
  opacity: 0;
  color: var(--ink-dim);
  font-size: 13px;
  padding-left: 126px;
  margin-top: 0;
}
.entry[data-open="true"] .body {
  max-height: 800px;
  opacity: 1;
  margin-top: 12px;
}
.entry[data-open="true"] .toggle { color: var(--accent); }
.entry .body ul {
  margin: 0;
  padding-left: 16px;
}
.entry .body li { padding: 2px 0; }
.entry .body li::marker { color: var(--ink-faint); content: "→ "; }

@media (max-width: 580px) {
  .entry .head { grid-template-columns: 1fr auto; }
  .entry .when { grid-column: 1 / -1; }
  .entry .body { padding-left: 0; }
}

/* skills grid */
.kvs {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 6px 16px;
  font-size: 13px;
}
.kvs dt { color: var(--ink-faint); }
.kvs dd { margin: 0; color: var(--ink); }

/* footer */
.footbar {
  margin-top: 32px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 11.5px;
  color: var(--ink-faint);
}
.footbar .right { display: inline-flex; gap: 14px; align-items: center; }

/* command palette */
.cmdk-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(6px);
  z-index: 9500;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
}
.cmdk-overlay.open { display: flex; }
.cmdk {
  width: min(560px, 92vw);
  background: var(--bg-elev);
  border: 1px solid var(--line-strong);
  font-family: var(--mono);
  font-size: 13px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.55);
}
.cmdk .input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}
.cmdk .input-row .p { color: var(--accent); }
.cmdk input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--ink);
  font: inherit;
  caret-color: var(--accent);
}
.cmdk .results {
  max-height: 320px;
  overflow-y: auto;
}
.cmdk .results .item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  cursor: pointer;
  color: var(--ink-dim);
  border-left: 2px solid transparent;
}
.cmdk .results .item .kind { color: var(--ink-faint); font-size: 11px; }
.cmdk .results .item.active {
  background: var(--accent-dim);
  color: var(--ink);
  border-left-color: var(--accent);
}
.cmdk .hint {
  padding: 8px 14px;
  border-top: 1px solid var(--line);
  color: var(--ink-faint);
  font-size: 11px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* easter egg modal */
.egg {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(8px);
  z-index: 9700;
  display: none;
  align-items: center;
  justify-content: center;
}
.egg.open { display: flex; }
.egg .box {
  width: min(520px, 90vw);
  background: var(--bg);
  border: 1px solid var(--accent);
  padding: 22px 24px;
  box-shadow: 0 0 30px var(--accent-dim);
}
.egg .box pre {
  margin: 0 0 14px;
  color: var(--accent);
  font-size: 11px;
  line-height: 1.1;
  white-space: pre;
  overflow-x: auto;
}
.egg .box .body { color: var(--ink-dim); font-size: 13px; line-height: 1.7; }
.egg .box .body em { color: var(--ink); font-style: normal; }
.egg .box .close { margin-top: 14px; }

/* tweaks panel border tweak so it matches */
om-tweaks-panel { z-index: 9600; }

/* utilities */
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.spacer { flex: 1; }
.divider {
  border: none;
  border-top: 1px dashed var(--line);
  margin: var(--gap) 0;
}
.small { font-size: 12px; }
.tiny  { font-size: 11px; }

/* --- prose (single post) --- */
.back-link {
  display: inline-block;
  font-size: 12px;
  color: var(--ink-faint);
  border-bottom: none;
  margin: 8px 0 24px;
}
.back-link:hover { color: var(--accent); }

.post-head {
  margin: 0 0 32px;
  padding-bottom: 18px;
  border-bottom: 1px dashed var(--line);
}
.post-head .meta {
  font-size: 12px;
  color: var(--ink-faint);
  margin: 0 0 10px;
  font-variant-numeric: tabular-nums;
}
.post-head h1 {
  font-family: var(--mono);
  font-weight: 600;
  font-size: clamp(26px, 3.4vw, 34px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
  text-wrap: balance;
}
.post-head .tags-row {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
}

.prose {
  font-family: var(--mono);
  font-size: 15.5px;
  color: var(--ink);
  line-height: 1.75;
  max-width: 68ch;
}
.prose p { margin: 0 0 18px; color: var(--ink); }
.prose p.lede { color: var(--ink); font-size: 16.5px; }
.prose h2 {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 19px;
  margin: 36px 0 14px;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.prose h2::before { content: "## "; color: var(--accent); }
.prose h3 {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 16px;
  margin: 26px 0 10px;
  color: var(--ink);
}
.prose h3::before { content: "### "; color: var(--accent); }
.prose h4 {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 14px;
  margin: 22px 0 8px;
  color: var(--ink-dim);
}
.prose h4::before { content: "#### "; color: var(--accent); }
.prose ul, .prose ol { padding-left: 22px; margin: 0 0 18px; color: var(--ink); }
.prose ul li::marker { color: var(--accent); content: "› "; }
.prose ol { list-style: none; counter-reset: olc; padding-left: 0; }
.prose ol > li {
  counter-increment: olc;
  padding: 4px 0 4px 38px;
  position: relative;
}
.prose ol > li::before {
  content: counter(olc, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 4px;
  color: var(--accent);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.prose ol ol { padding-left: 22px; counter-reset: olc2; }
.prose ol ol > li { padding-left: 32px; counter-increment: olc2; }
.prose ol ol > li::before { content: counter(olc, decimal) "." counter(olc2, decimal); }
.prose li { padding: 2px 0; }
.prose a {
  color: var(--ink);
  border-bottom: 1px solid var(--line-strong);
}
.prose a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.prose blockquote {
  margin: 0 0 18px;
  padding: 4px 0 4px 14px;
  border-left: 2px solid var(--accent);
  color: var(--ink-dim);
  font-style: normal;
}
.prose code {
  font-family: var(--mono);
  font-size: 14px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  padding: 1px 5px;
  border-radius: 0;
}
.prose pre {
  font-family: var(--mono);
  font-size: 13.5px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  padding: 14px 16px;
  overflow-x: auto;
  line-height: 1.6;
  margin: 0 0 18px;
}
.prose pre code {
  background: transparent;
  border: none;
  padding: 0;
  font-size: inherit;
}
.prose hr {
  border: none;
  border-top: 1px dashed var(--line);
  margin: 24px 0;
}
.prose .comment { color: var(--ink-faint); }

/* prose images */
.prose img,
.prose image-slot {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 24px auto;
  border: 1px solid var(--line);
  background: var(--bg-elev);
}
.prose figure {
  margin: 24px 0;
}
.prose figure img,
.prose figure image-slot {
  margin: 0;
}
.prose figure figcaption {
  margin-top: 8px;
  font-size: 12px;
  color: var(--ink-faint);
  text-align: center;
}

/* post cover image */
.post-cover {
  width: 100%;
  margin: 0 0 24px;
  border: 1px solid var(--line);
  background: var(--bg-elev);
  aspect-ratio: 16 / 7;
  overflow: hidden;
  display: block;
}
.post-cover image-slot,
.post-cover img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* blog index post thumbnail */
.post .thumb {
  width: 64px;
  height: 44px;
  border: 1px solid var(--line);
  background: var(--bg-elev);
  flex-shrink: 0;
  overflow: hidden;
}
.post .thumb image-slot, .post .thumb img {
  width: 100%; height: 100%;
  display: block;
  object-fit: cover;
}

/* --- highlight.js theme — uses our CSS vars so it matches every theme --- */
.hljs {
  background: transparent;
  color: var(--ink);
  font-family: var(--mono);
}
.hljs-comment, .hljs-quote {
  color: var(--ink-faint);
  font-style: italic;
}
.hljs-keyword, .hljs-selector-tag, .hljs-literal,
.hljs-section, .hljs-link, .hljs-built_in, .hljs-type {
  color: var(--accent);
}
.hljs-string, .hljs-attr, .hljs-symbol, .hljs-bullet, .hljs-meta-string {
  color: var(--ink-dim);
}
.hljs-number, .hljs-regexp, .hljs-deletion, .hljs-meta-keyword {
  color: var(--ink);
  font-weight: 600;
}
.hljs-title, .hljs-name, .hljs-tag, .hljs-selector-id, .hljs-selector-class {
  color: var(--ink);
}
.hljs-function .hljs-title, .hljs-title.function_ {
  color: var(--accent);
}
.hljs-attribute, .hljs-variable, .hljs-template-variable {
  color: var(--ink-dim);
}
.hljs-params { color: var(--ink); }
.hljs-meta, .hljs-doctag {
  color: var(--ink-faint);
}
.hljs-addition { color: var(--accent); }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: 700; }

.post-nav {
  margin-top: 36px;
  padding-top: 18px;
  border-top: 1px dashed var(--line);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.post-nav a {
  display: block;
  border-bottom: none;
  padding: 10px 0;
}
.post-nav .label {
  display: block;
  font-size: 11px;
  color: var(--ink-faint);
  margin-bottom: 4px;
}
.post-nav .ttl { color: var(--ink); font-size: 13px; }
.post-nav a:hover .ttl { color: var(--accent); }
.post-nav .next { text-align: right; }
.post-nav .empty {
  color: var(--ink-faint);
  font-size: 12px;
  padding: 10px 0;
}
.post-nav .empty.next { text-align: right; }

/* on-this-page TOC for single posts */
.post-toc {
  position: fixed;
  right: max(24px, calc((100vw - var(--col)) / 2 - 220px));
  top: 22vh;
  width: 200px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink-faint);
  z-index: 50;
  pointer-events: auto;
}
.post-toc .toc-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px dashed var(--line);
}
.post-toc ul { list-style: none; padding: 0; margin: 0; }
.post-toc li {
  padding: 4px 0 4px 14px;
  border-left: 1px solid var(--line);
  position: relative;
  transition: color 160ms ease, border-color 160ms ease;
  color: var(--ink-faint);
  cursor: pointer;
}
.post-toc li.toc-h3 { padding-left: 26px; font-size: 11px; }
.post-toc li:hover  { color: var(--ink); }
.post-toc li.active {
  color: var(--ink);
  border-left-color: var(--accent);
}
.post-toc li.active::before {
  content: "";
  position: absolute;
  left: -3px;
  top: 50%;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  transform: translateY(-50%);
  box-shadow: 0 0 8px var(--accent);
}
.post-toc a {
  border-bottom: none;
  color: inherit;
  display: block;
}
.post-toc a:hover { color: var(--accent); }

/* progress thread inside the TOC */
.post-toc .progress-track {
  position: absolute;
  left: 0; top: 30px; bottom: 0;
  width: 1px;
  background: transparent;
}
.post-toc .progress-fill {
  position: absolute;
  left: 0; top: 0;
  width: 1px;
  background: linear-gradient(to bottom, var(--accent), transparent);
  transition: height 120ms linear;
}

@media (max-width: 1180px) {
  .post-toc { display: none; }
}

/* subtle entry animation */
.in-up {
  opacity: 0;
  transform: translateY(8px);
  animation: inUp 600ms ease forwards;
}
@keyframes inUp { to { opacity: 1; transform: translateY(0); } }
.d-1 { animation-delay: 60ms; }
.d-2 { animation-delay: 140ms; }
.d-3 { animation-delay: 220ms; }
.d-4 { animation-delay: 300ms; }
.d-5 { animation-delay: 380ms; }
.d-6 { animation-delay: 460ms; }
.d-7 { animation-delay: 540ms; }

/* Page-level stagger: fade every top-level block in `main` in sequence so
   navigating to a page feels alive, not flat. */
main > *:not(.preview-card) {
  opacity: 0;
  transform: translateY(10px);
  animation: inUp 500ms ease forwards;
}
main > *:nth-child(1):not(.preview-card) { animation-delay: 0ms; }
main > *:nth-child(2):not(.preview-card) { animation-delay: 90ms; }
main > *:nth-child(3):not(.preview-card) { animation-delay: 180ms; }
main > *:nth-child(4):not(.preview-card) { animation-delay: 270ms; }
main > *:nth-child(5):not(.preview-card) { animation-delay: 360ms; }
main > *:nth-child(6):not(.preview-card) { animation-delay: 450ms; }
main > *:nth-child(7):not(.preview-card) { animation-delay: 540ms; }
main > *:nth-child(8):not(.preview-card) { animation-delay: 620ms; }

/* Entry-level stagger inside sections — each row peeks in after its section */
.section .entry,
.section .post,
.section .bare > li {
  opacity: 0;
  transform: translateY(6px);
  animation: inUp 400ms ease forwards;
  animation-delay: 200ms;
}
.section .entry:nth-of-type(2),
.section .post:nth-of-type(2),
.section .bare > li:nth-child(2) { animation-delay: 260ms; }
.section .entry:nth-of-type(3),
.section .post:nth-of-type(3),
.section .bare > li:nth-child(3) { animation-delay: 320ms; }
.section .entry:nth-of-type(4),
.section .post:nth-of-type(4),
.section .bare > li:nth-child(4) { animation-delay: 380ms; }
.section .entry:nth-of-type(5),
.section .post:nth-of-type(5),
.section .bare > li:nth-child(5) { animation-delay: 440ms; }
.section .entry:nth-of-type(6),
.section .post:nth-of-type(6),
.section .bare > li:nth-child(6) { animation-delay: 500ms; }

/* --- work page (case studies) --- */
.work-list {
  display: grid;
  gap: 28px;
  margin-top: 4px;
}
.case {
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  background:
    linear-gradient(to right, var(--accent-dim), transparent 18%),
    var(--bg-elev);
  padding: 22px 22px 22px 20px;
  position: relative;
}
.case .head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 16px;
  align-items: baseline;
  margin-bottom: 6px;
}
.case .name {
  font-size: 19px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: 0;
}
.case .name::before {
  content: "›";
  color: var(--accent);
  margin-right: 8px;
}
.case .meta {
  font-size: 11px;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  gap: 10px;
  align-items: center;
}
.case .meta .status {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 10px;
  padding: 1px 6px;
  border: 1px solid var(--line);
  color: var(--ink-dim);
}
.case .meta .status[data-status="active"] {
  color: var(--accent);
  border-color: var(--accent);
}
.case .tagline {
  color: var(--ink-dim);
  font-size: 13px;
  margin: 0 0 14px;
}
.case .summary {
  color: var(--ink);
  font-size: 13.5px;
  margin: 0 0 16px;
  max-width: 64ch;
}
.case .grid {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 4px 16px;
  font-size: 13px;
  border-top: 1px dashed var(--line);
  padding-top: 14px;
}
.case .grid dt {
  color: var(--accent);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  padding: 6px 0;
}
.case .grid dd {
  margin: 0;
  color: var(--ink-dim);
  padding: 6px 0;
  border-bottom: 1px dashed var(--line);
}
.case .grid > *:nth-last-child(-n+2) { border-bottom: none; padding-bottom: 0; }
.case .footer {
  margin-top: 14px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
@media (max-width: 580px) {
  .case .head { grid-template-columns: 1fr; }
  .case .grid { grid-template-columns: 1fr; gap: 2px; }
  .case .grid dd { border-bottom: none; padding-bottom: 0; }
  .case .grid dt { padding-bottom: 0; }
}

/* tag count badge in filter bar */
.tag .count {
  margin-left: 4px;
  font-size: 10px;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.tag.active .count { color: var(--bg); opacity: 0.7; }

/* j/k cursor row in the blog index */
ul.bare > li.cursor {
  background: var(--accent-dim);
  position: relative;
}
/* override the dashed top-border on the cursored row AND the next sibling
   so the highlight reads as one solid block with crisp edges */
ul.bare > li.cursor,
ul.bare > li.cursor + li { border-top-color: transparent; }
ul.bare > li.cursor::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}

/* first-visit ⌘K hint toast */
.cmdk-hint {
  position: fixed;
  right: 22px;
  bottom: 22px;
  background: var(--bg-elev);
  border: 1px solid var(--line-strong);
  border-left: 2px solid var(--accent);
  padding: 10px 14px 10px 12px;
  font-size: 12px;
  color: var(--ink-dim);
  z-index: 9400;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.4);
  animation: hint-in 360ms ease 800ms both;
  max-width: calc(100vw - 44px);
}
.cmdk-hint .x {
  border: none;
  background: transparent;
  color: var(--ink-faint);
  padding: 0 0 0 4px;
  font: inherit;
  cursor: pointer;
}
.cmdk-hint .x:hover { color: var(--accent); }
@keyframes hint-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cmdk-hint.out { animation: hint-out 220ms ease forwards; }
@keyframes hint-out {
  to { opacity: 0; transform: translateY(8px); }
}
@media (max-width: 580px) { .cmdk-hint { display: none; } }

/* Honor reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .in-up,
  main > *,
  .section .entry,
  .section .post,
  .section .bare > li {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  /* Kill the ambient/pulse/glitch/cursor animations too — anything that
     auto-runs forever is the actual hazard for vestibular & photosensitive
     users, not the one-shot entry animations. */
  .topbar .dot,
  .now .label::before,
  .hero .name .accent-mark,
  .hero .lines .typed::after,
  .glitchable,
  .cmdk-hint,
  ul.bare > li.cursor::before {
    animation: none !important;
  }
  /* Keep cursor caret visible (solid) rather than blinking. */
  .hero .name .accent-mark,
  .hero .lines .typed::after { opacity: 1 !important; }
  /* Soften scrolling so hash jumps and TOC clicks don't fly past content. */
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    transition-duration: 0.001ms !important;
  }
}

/* --- Mobile polish ----------------------------------------------------- */

@media (max-width: 720px) {
  .shell { padding: 16px 18px 64px; }
  .hero  { padding: 28px 0 22px; }
  .section { padding: 24px 0 var(--gap); }
  .now { padding: 12px 14px; gap: 10px; }
}

/* Topbar collapses cleanly. The clock already hides under 640px; below
   480px stack the path above the nav so neither truncates. */
@media (max-width: 480px) {
  .topbar {
    flex-wrap: wrap;
    gap: 10px;
    padding-bottom: 14px;
  }
  .topbar .left { width: 100%; }
  .topbar nav  { width: 100%; gap: 8px; flex-wrap: wrap; }
  .topbar nav a { font-size: 12px; }
  .hero .name { font-size: clamp(28px, 9vw, 42px); }
  .hero .links { gap: 14px; }
  .filterbar { gap: 6px; }
  .filterbar input { width: 100%; }
}

/* Post nav can crowd on narrow screens — stack it. */
@media (max-width: 480px) {
  .post-nav { grid-template-columns: 1fr; }
  .post-nav .next, .post-nav .empty.next { text-align: left; }
}

/* Resume head: when the date wraps to its own row, give the toggle and
   role/at room to breathe. (Selector already exists at 580px; just tighten
   the body padding so bullets aren't crowded at the edge.) */
@media (max-width: 480px) {
  .entry .body ul { padding-left: 14px; }
  .entry .body { font-size: 12.5px; }
}

/* iOS safe-area: respect bottom inset so the footer/⌘K hint don't sit
   under the home indicator. */
@supports (padding: max(0px)) {
  .shell { padding-bottom: max(64px, env(safe-area-inset-bottom)); }
  .cmdk-hint { bottom: max(22px, env(safe-area-inset-bottom)); }
}

/* ===========================================================================
   v2 polish — adds visual presence without changing the personality.
   Goal: add a second anchor in the hero, sharpen the section rhythm, and
   spend the second accent (blue) sparingly on metadata so the page isn't
   monochromatic. Everything below layers on top of the rules above.
   =========================================================================== */

/* Faint dot grid layered on top of the corner glows — gives the upper portion
   of the page just enough texture that the deep black doesn't read as empty
   CSS. Masked out by the time you reach the body content so it doesn't
   compete with text. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background-image: radial-gradient(circle, rgba(138,161,148,0.07) 0.7px, transparent 1.1px);
  background-size: 22px 22px;
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 35%, transparent 70%);
          mask-image: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 35%, transparent 70%);
}

/* ── Hero: two-column on desktop ─────────────────────────────────────────── */

.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: start;
}
.hero-main { min-width: 0; }
.hero-side { min-width: 0; }
.hero-sub-mobile { display: flex; }

@media (min-width: 820px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 48px;
  }
  /* The statblock already shows role+location — hide the redundant sub row
     on desktop so the hero stays tight. */
  .hero .sub.hero-sub-mobile { display: none !important; }
}

/* ── Stat block ──────────────────────────────────────────────────────────── */

.statblock {
  position: relative;
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  background:
    linear-gradient(180deg, rgba(91,229,132,0.05), transparent 60%),
    var(--bg-elev);
  padding: 12px 16px 14px;
  font-size: 12.5px;
  overflow: hidden;
}
/* subtle horizontal sweep along the top edge — same trick as `.now`'s
   thin accent, but on the panel chrome */
.statblock::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(91,229,132,0.45), transparent);
}
.statblock .sb-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px dashed var(--line);
  color: var(--ink-dim);
  font-size: 12px;
}
.statblock .sb-head .sb-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent), 0 0 2px var(--accent);
  animation: pulse 1.8s ease-in-out infinite;
}
.statblock .sb-head .sb-title { color: var(--ink); letter-spacing: -0.005em; }
.statblock .sb-head .sb-spacer { flex: 1; }
.statblock .sb-head .sb-meta  { color: var(--ink-faint); font-size: 10.5px; letter-spacing: 0.04em; }

.statblock dl.sb-grid {
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: 8px 12px;
  margin: 0;
}
.statblock dl.sb-grid dt {
  color: var(--ink-faint);
  font-size: 12px;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.statblock dl.sb-grid dt::before {
  content: "›";
  color: var(--accent);
  font-weight: 600;
}
.statblock dl.sb-grid dd {
  margin: 0;
  color: var(--ink);
  font-size: 12.5px;
  min-width: 0;
}
.statblock dl.sb-grid dd a {
  border-bottom: none;
  color: var(--ink);
}
.statblock dl.sb-grid dd a:hover { color: var(--accent); }

.statblock .sb-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 10.5px;
  padding: 2px 8px 2px 8px;
  border: 1px solid var(--line);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.statblock .sb-pill::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ink-faint);
}
.statblock .sb-pill.on { color: var(--accent); border-color: rgba(91,229,132,0.5); }
.statblock .sb-pill.on::before {
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  animation: pulse 1.6s ease-in-out infinite;
}

@media (max-width: 480px) {
  /* Mobile keeps the stat block but trims the keys column so long values
     don't wrap awkwardly. */
  .statblock dl.sb-grid { grid-template-columns: 70px 1fr; }
}

/* ── Section headers — bracket the number for that bash-prompt feel ──────── */

.eyebrow .num {
  position: relative;
  padding: 1px 0;
}
.eyebrow .num::before {
  content: "[";
  color: var(--ink-dim);
  margin-right: 2px;
  font-weight: 400;
}
.eyebrow .num::after {
  content: "]";
  color: var(--ink-dim);
  margin-left: 2px;
  font-weight: 400;
}
.eyebrow .lbl {
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--ink);
}
.eyebrow .kind {
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  text-transform: uppercase;
  margin-left: 4px;
}

/* ── NOW strip: a touch more presence ────────────────────────────────────── */

.now {
  position: relative;
  background:
    linear-gradient(180deg, rgba(91,229,132,0.07), transparent 70%),
    var(--bg-elev);
}
.now::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(91,229,132,0.45), transparent);
}
.now .now-ts {
  margin-left: auto;
  color: var(--accent-2);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  opacity: 0.7;
}
@media (max-width: 580px) {
  .now .now-ts { display: none; }
}

/* ── Second-tier color: spend blue on dates and "system" metadata ────────── */

.post .date,
.entry .when {
  color: var(--accent-2);
  opacity: 0.78;
}
.post .pread { color: var(--ink-faint); }

/* In the topbar path, give the live clock's PT label a hint of blue so the
   monochrome green-on-grey isn't the only chord we play. */
.topbar .clock { color: var(--ink-faint); }
.topbar .clock .live { color: var(--accent); }

/* ── Tags: a touch more tactile ──────────────────────────────────────────── */

.tag {
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.post:hover .ptags .tag {
  border-color: var(--line-strong);
}

/* ── Case study cards: a bit more presence on the work page ──────────────── */

.case {
  background:
    linear-gradient(135deg, var(--accent-dim), transparent 22%),
    linear-gradient(180deg, rgba(91,229,132,0.04), transparent 60%),
    var(--bg-elev);
  transition: border-color 200ms ease, transform 200ms ease;
}
.case:hover {
  border-color: var(--line-strong);
}
.case .name {
  letter-spacing: -0.015em;
}
.case .meta .status {
  font-weight: 600;
}
.case .meta .status[data-status="research"] {
  color: var(--accent-2);
  border-color: rgba(110,193,255,0.4);
}
.case .meta .status[data-status="shipped"] {
  color: var(--ink-dim);
}
.case .grid dt {
  /* slightly stronger so the "problem / approach / outcome" labels read
     as proper headings */
  font-weight: 600;
}

/* ── Footer: small ASCII-style flourish on the right ─────────────────────── */

.footbar {
  align-items: center;
}
.footbar::before {
  content: "";
  display: none; /* reserved */
}

/* ── Topbar: subtle gradient under the bottom border so the head feels
       grounded against the dot-grid above ─────────────────────────────────── */

.topbar {
  position: relative;
}
.topbar::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(91,229,132,0.25), transparent);
  opacity: 0.6;
  pointer-events: none;
}

/* Reduced motion: kill the new pulse on the stat block */
@media (prefers-reduced-motion: reduce) {
  .statblock .sb-head .sb-dot,
  .statblock .sb-pill.on::before { animation: none !important; }
}

/* ── Drafts: in-progress / roadmap posts on the blog page ────────────────── */

.drafts {
  display: grid;
  gap: 2px;
  margin-top: 4px;
}
.draft {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: 16px;
  align-items: baseline;
  padding: 12px 0;
  border-top: 1px dashed var(--line);
  /* drafts are unwritten — read at lower contrast than published rows */
  opacity: 0.86;
}
.draft:first-of-type { border-top: none; }
.draft .d-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-faint);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.draft .d-state::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--ink-faint);
}
.draft .d-state[data-status="drafting"] {
  color: var(--accent);
}
.draft .d-state[data-status="drafting"]::before {
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent);
  animation: pulse 1.8s ease-in-out infinite;
}
.draft .d-state[data-status="outlining"] { color: var(--accent-2); }
.draft .d-state[data-status="outlining"]::before { background: var(--accent-2); }
.draft .d-state[data-status="queued"]   { color: var(--ink-faint); }

.draft .d-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}
.draft .d-title {
  color: var(--ink);
  font-size: 14.5px;
  /* not a link — make that clear visually */
}
.draft .d-tags { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.draft .d-tags .tag {
  /* drafts tags aren't filterable yet — drop the hover affordance */
  cursor: default;
  opacity: 0.7;
}
.draft .d-tags .tag:hover {
  color: var(--ink-faint);
  border-color: var(--line);
}
.draft .d-blurb {
  color: var(--ink-dim);
  font-size: 12.5px;
  margin: 4px 0 0;
  max-width: 64ch;
  grid-column: 2 / 3;
}
.draft .d-eta {
  color: var(--ink-faint);
  font-size: 11px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* slim divider above the drafts block — they're a different content tier */
.drafts-head {
  margin-top: 28px;
}
.drafts-note {
  color: var(--ink-faint);
  font-size: 11.5px;
  margin: 0 0 10px;
  letter-spacing: 0.02em;
}

@media (max-width: 580px) {
  .draft { grid-template-columns: 1fr; gap: 6px; }
  .draft .d-eta { display: none; }
  .draft .d-blurb { grid-column: 1; }
}