/* PostHog-inspired neo-brutalist blog theme */

:root {
  --yellow: #f5dc5a;
  --yellow-soft: #fce992;
  --coral: #ef7065;
  --coral-soft: #f4a39b;
  --cream: #eeefe9;
  --cream-warm: #f7f4e9;
  --paper: #fdfcf5;
  --ink: #151415;
  --ink-soft: #3a3736;
  --mute: #6a6664;
  --line: #151415;
  --blue: #1d4aff;
  --lime: #b5f26a;
  --lavender: #cfc2f1;
  --peach: #fbcfb8;
  --mint: #a9e6c9;
  --pink: #f6b6d1;
  --sky: #8ed3f0;
  /* Tags theme colour (/tags tab and headings). */
  --aqua: #7ee0d2;
  /* Mirana's theme colour, sampled from Kagura's avatar. */
  --mirana: #f9b7b8;
  --radius: 6px;
  --shadow-sm: 3px 3px 0 var(--line);
  --shadow: 5px 5px 0 var(--line);
  --shadow-lg: 8px 8px 0 var(--line);
  --shadow-xl: 12px 12px 0 var(--line);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: 'Inter', 'Noto Sans SC', system-ui, sans-serif;
  background: var(--cream);
  color: var(--ink);
  font-feature-settings: 'ss01', 'cv11';
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  min-height: 100vh;
}

button { font-family: inherit; }

/* paper grain overlay */
body::before {
  content: '';
  position: fixed; inset: 0;
  background-image: radial-gradient(rgba(20,20,20,0.04) 1px, transparent 1px);
  background-size: 3px 3px;
  pointer-events: none;
  z-index: 1000;
  mix-blend-mode: multiply;
}

a { color: inherit; text-decoration: none; }

.display {
  font-family: 'Fraunces', 'Noto Sans SC', serif;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 0.95;
}

.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }

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

/* Animations */
@keyframes blink { 0%, 90%, 100% { opacity: 1; } 95% { opacity: 0; } }
@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

.cursor-blink::after { content: '▊'; animation: blink 1.1s step-end infinite; margin-left: 2px; }

/* A boxed caveat. Dashed on purpose: it reads as provisional. */
.disclosure {
  border: 2px dashed var(--line);
  border-radius: 10px;
  background: var(--paper);
  padding: 16px 18px;
  margin-top: 22px;
  max-width: 600px;
}
.disclosure .label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--coral);
  margin-bottom: 6px;
}
.disclosure p { font-size: 15px; line-height: 1.6; color: var(--ink-soft); margin: 0; }

/* ─── Top bar ─── */
.topbar {
  padding: 20px 40px 0;
  background: var(--cream);
}

.topbar-url {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
}

.topbar-dots { display: flex; gap: 6px; }
.topbar-dots span {
  width: 12px; height: 12px; border-radius: 6px;
  border: 1.5px solid var(--line);
}
.topbar-dots span:nth-child(1) { background: var(--coral); }
.topbar-dots span:nth-child(2) { background: var(--yellow); }
.topbar-dots span:nth-child(3) { background: var(--mint); }

.topbar-addr {
  flex: 1;
  background: var(--paper);
  border: 2px solid var(--line);
  border-radius: 20px;
  padding: 4px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.topbar-addr .mute { color: var(--mute); }
.topbar-addr .brand { font-weight: 600; }
.topbar-addr .shell { margin-left: auto; font-size: 11px; }
.topbar-addr .cmdk { color: var(--mute); font-size: 11px; }

.tabs-row {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  margin-bottom: -2px;
  position: relative;
  z-index: 2;
}

.tabs-logo {
  display: flex;
  align-items: center;
  flex: none;
  margin-right: 20px;
  /* translateY matches the inactive .tab offset so the bottoms sit on the
     same line. Keep this rule free of padding: any padding lifts the logo
     off the row. */
  transform: translateY(2px);
  text-decoration: none;
  color: inherit;
}
/* Must equal the computed height of .tab: 18px line box + 10px/12px
   padding + 2px/2px border = 44px. .tab pins line-height to 18px so this
   stays a whole number; whole pixels keep the pixel-art logo crisp. */
.tabs-logo img { width: 44px; height: 44px; image-rendering: pixelated; }

.tab {
  background: var(--paper);
  border: 2px solid var(--line);
  border-bottom: 2px solid var(--line);
  border-radius: 10px 10px 0 0;
  padding: 10px 18px 12px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  font-size: 13px;
  /* Whole-number line box: keeps tab height at exactly 44px so the logo
     (.tabs-logo img) can match it without fractional sizes. */
  line-height: 18px;
  cursor: pointer;
  color: var(--ink);
  position: relative;
  transform: translateY(2px);
  text-decoration: none;
}
.tab .slash { color: var(--mute); margin-right: 6px; }
.tab.active { border-bottom-color: transparent; transform: translateY(0); margin-bottom: -2px; }
.tab.active::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0; right: 0; height: 2px;
  background: var(--tab-color, var(--yellow));
}
.tab.active { background: var(--tab-color, var(--yellow)); }

.tabs-fill { flex: 1; border-bottom: 2px solid var(--line); }

.tab-rss {
  background: var(--ink);
  color: var(--paper);
  border: 2px solid var(--line);
  border-bottom: none;
  border-radius: 10px 10px 0 0;
  padding: 10px 18px 12px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  font-size: 13px;
  line-height: 18px;
  text-decoration: none;
}

/* ─── Hero / homepage ─── */
.page-wrap { padding: 40px 40px 0; max-width: 1400px; margin: 0 auto; }

.hero {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 40px;
  align-items: center;
  margin-bottom: 72px;
}

.hero-kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: var(--coral);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.hero-kicker .dot {
  width: 8px; height: 8px; border-radius: 4px; background: var(--coral);
  animation: pulse-dot 1.6s ease-in-out infinite;
}

.hero h1 {
  font-size: 88px;
  margin: 0 0 8px;
  position: relative;
}

.hero .highlight {
  background: var(--yellow);
  padding: 0 12px;
  display: inline-block;
  transform: rotate(-1deg);
  border: 2px solid var(--line);
  border-radius: 8px;
  box-shadow: 5px 5px 0 var(--line);
}

.hero h1 .sub { font-size: 52px; }
.hero h1 .curly { font-family: 'JetBrains Mono', monospace; font-size: 40px; color: var(--coral); font-weight: 700; white-space: nowrap; }

.hero-lede {
  font-size: 18px;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 580px;
  margin-top: 20px;
}
.hero-lede .pill { padding: 1px 6px; border-radius: 3px; }
.hero-lede .pill-go { background: var(--mint); }
.hero-lede .pill-claude { background: var(--lavender); }
.hero-lede .pill-mcp { background: var(--peach); }
.hero-lede .wavy { text-decoration: underline wavy var(--coral); }

.hero-ctas {
  display: flex;
  gap: 14px;
  margin-top: 32px;
  align-items: center;
  flex-wrap: wrap;
}

.hero-stats {
  display: flex;
  gap: 20px;
  margin-top: 40px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  flex-wrap: wrap;
}
.hero-stats strong { font-size: 20px; color: var(--coral); }
.hero-stats .sep { opacity: 0.4; }

/* Hero right column */
.hero-right { position: relative; }
/* Push the card down so its top lines up with the hero CTA row.
   The mascot follows: it stays 80px above the card's top-right corner. */
.hero .hero-right .terminal-card { margin-top: 210px; }
.hero .hero-right .hero-mascot { top: 130px; }
.hero-mascot {
  position: absolute;
  top: -20px;
  right: 20px;
  transform: rotate(8deg);
  z-index: 3;
}

.terminal-card {
  background: var(--ink);
  color: var(--cream-warm);
  padding: 0;
  overflow: hidden;
  margin-top: 60px;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.terminal-card .bar {
  background: #222;
  padding: 8px 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 2px solid var(--line);
}
.terminal-card .bar .dot { width: 10px; height: 10px; border-radius: 5px; }
.terminal-card .bar .dot:nth-child(1) { background: var(--coral); }
.terminal-card .bar .dot:nth-child(2) { background: var(--yellow); }
.terminal-card .bar .dot:nth-child(3) { background: var(--mint); }
.terminal-card .bar .who {
  margin-left: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: #888;
}
.terminal-card .body {
  padding: 18px 20px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  line-height: 1.7;
}
.terminal-card .prompt { color: #f5dc5a; }
.terminal-card .key { color: #cfc2f1; }
.terminal-card .str { color: #a9e6c9; }
.terminal-card .num { color: #f5dc5a; }

.sticky-note {
  position: absolute;
  bottom: -28px;
  left: -20px;
  transform: rotate(-4deg);
  background: var(--yellow);
  border: 2px solid var(--line);
  border-radius: 4px;
  padding: 10px 14px;
  box-shadow: 4px 4px 0 var(--line);
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  max-width: 230px;
}

/* ─── Section header ─── */
.section-header {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 2px dashed var(--line);
}
.section-header .kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--mute);
  margin-bottom: 4px;
}
.section-header .kicker .kicker-link {
  color: var(--coral);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
  transition: color 0.12s;
}
.section-header .kicker .kicker-link:hover {
  color: var(--ink);
  text-decoration-style: solid;
}
.section-header h2 {
  font-size: 44px;
  margin: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
}
.section-header h2 span {
  padding: 0 10px;
  border-radius: 4px;
  border: 2px solid var(--line);
  box-shadow: 3px 3px 0 var(--line);
  display: inline-block;
  transform: rotate(-1deg);
}
.section-header .tail {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: var(--mute);
  margin-bottom: 10px;
  margin-left: auto;
}

section { margin-bottom: 80px; }

/* ─── Featured cards ─── */
.featured-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 30px;
}

.featured-card {
  background: var(--paper);
  border: 2px solid var(--line);
  border-radius: 8px;
  box-shadow: 8px 8px 0 var(--line);
  transition: all 0.15s;
  cursor: pointer;
  overflow: hidden;
  display: block;
  color: inherit;
}
.featured-card:nth-child(odd) { transform: rotate(-0.8deg); }
.featured-card:nth-child(even) { transform: rotate(0.8deg); }

.featured-card:hover {
  box-shadow: 3px 3px 0 var(--line);
  transform: rotate(0) translate(5px, 5px);
}

.featured-card .body { border-top: 2px solid var(--line); padding: 20px 24px 22px; }
.featured-card .meta { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.featured-card h3 {
  font-size: 26px;
  margin: 0 0 6px;
  line-height: 1.15;
  /* Two cards sit side by side. A series name runs longer than a post title,
     so the heading is pinned to two lines and clamped, otherwise the taller
     card drags the row out of alignment. */
  min-height: 2.3em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.featured-card .en {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--mute);
  margin-bottom: 10px;
}
.featured-card .desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 14px;
}
.featured-card .foot {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--mute);
}
.featured-card .foot .read { margin-left: auto; }

/* ─── Terminal list rows ─── */
.term-list {
  padding: 0;
  overflow: hidden;
  margin-top: 30px;
  background: var(--paper);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.term-row {
  display: grid;
  grid-template-columns: 40px 120px 1fr auto auto;
  gap: 16px;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1.5px dashed rgba(0,0,0,0.15);
  cursor: pointer;
  transition: background 0.12s;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: inherit;
  text-decoration: none;
}
.term-row:nth-child(odd) { background: var(--paper); }
.term-row:nth-child(even) { background: var(--cream-warm); }
.term-row:hover { background: var(--yellow-soft); }
.term-row .dollar { color: var(--coral); font-weight: 700; }
.term-row .date { color: var(--mute); }
.term-row .title { font-weight: 600; }
.term-row .tags { display: flex; gap: 4px; }
.term-row .tags span {
  font-size: 10px;
  background: rgba(0,0,0,0.08);
  padding: 2px 6px;
  border-radius: 3px;
}
.term-row .tags .sample {
  background: transparent;
  color: #d8261c;
  border: 1.5px solid #d8261c;
  font-weight: 800;
  letter-spacing: 0.08em;
  transform: rotate(-4deg);
}
.term-row .tags .series {
  background: transparent;
  border: 1.5px solid rgba(0,0,0,0.25);
  font-weight: 600;
}
.term-row .rt { color: var(--mute); }

.term-list-foot {
  padding: 14px 20px;
  background: var(--cream-warm);
  border-top: 2px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
}
.term-list-foot .count { color: var(--mute); }
.term-list-foot .foot-links { display: flex; gap: 8px; }
.term-list-foot a {
  background: var(--ink);
  color: var(--paper);
  border: none;
  border-radius: 4px;
  padding: 6px 14px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
}

/* ─── Now + Stack + Heatmap row ─── */
.now-stack {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 28px;
  margin-bottom: 80px;
}

.now-card {
  padding: 28px;
  background: var(--mint);
  position: relative;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.now-card .ribbon {
  position: absolute;
  top: -14px; left: 20px;
  background: var(--ink);
  color: var(--mint);
  padding: 4px 12px;
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
}
.now-card h3 {
  font-size: 36px;
  margin: 0;
}
.now-card .title-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 16px;
}
.now-card .title-row .zh {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: var(--ink-soft);
}

.now-list { display: flex; flex-direction: column; gap: 14px; }
.now-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding-bottom: 12px;
  border-bottom: 1.5px dashed rgba(0,0,0,0.2);
}
.now-item .label {
  min-width: 80px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  background: var(--ink);
  color: var(--mint);
  padding: 3px 8px;
  border-radius: 3px;
  text-align: center;
}
.now-item .text { font-size: 15px; line-height: 1.4; }

.stack-card {
  padding: 28px;
  background: var(--paper);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.stack-card h3 { font-size: 32px; margin: 0; }
.stack-card .title-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 20px;
}
.stack-card .title-row .zh {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--mute);
}

.stack-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}
.stack-tile {
  aspect-ratio: 1;
  background: var(--cream-warm);
  border: 1.5px solid var(--line);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: default;
  transition: transform 0.15s;
}
.stack-tile:hover { transform: translateY(-3px) rotate(-3deg); }
.stack-tile .glyph {
  width: 26px; height: 26px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 800;
  border: 1.5px solid var(--line);
}
.stack-tile .name {
  font-size: 9px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
}

/* ─── Posts list page ─── */
.page-title-row { margin-bottom: 40px; }
.page-title-row .kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: var(--coral);
  margin-bottom: 12px;
}
.page-title-row h1 {
  font-size: 84px;
  margin: 0;
  line-height: 1;
}
.page-title-row h1 .hl {
  padding: 0 16px;
  border: 2px solid var(--line);
  border-radius: 10px;
  box-shadow: 6px 6px 0 var(--line);
  display: inline-block;
  transform: rotate(-1.5deg);
}
.page-title-row p {
  font-size: 18px;
  color: var(--ink-soft);
  max-width: 620px;
  margin-top: 18px;
}

.filter-bar {
  padding: 16px 20px;
  margin-bottom: 28px;
  background: var(--paper);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.filter-bar .label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--mute);
  margin-right: 4px;
}
.filter-chip {
  background: var(--cream-warm);
  border: 1.5px solid var(--line);
  border-radius: 4px;
  padding: 5px 12px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}
.filter-chip.active {
  background: var(--yellow);
  box-shadow: 2px 2px 0 var(--line);
  transform: translate(-1px, -1px);
}

.posts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 60px;
}

.post-card {
  background: var(--paper);
  border: 2px solid var(--line);
  border-radius: 8px;
  box-shadow: 6px 6px 0 var(--line);
  transition: all 0.12s;
  cursor: pointer;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
}
.post-card:hover {
  box-shadow: 3px 3px 0 var(--line);
  transform: translate(3px, 3px) !important;
}
.posts-grid .post-card:nth-child(3n+1) { transform: rotate(-0.6deg); }
.posts-grid .post-card:nth-child(3n+3) { transform: rotate(0.6deg); }

.post-card .body {
  border-top: 2px solid var(--line);
  padding: 16px 18px 18px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.post-card .date {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--mute);
  margin-bottom: 6px;
}
.post-card h3 {
  font-size: 20px;
  margin: 0 0 6px;
  line-height: 1.2;
}
.post-card p {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 4px 0 12px;
  flex: 1;
}
.post-card .tags { display: flex; gap: 4px; flex-wrap: wrap; }

/* ─── Post detail ─── */
.post-detail {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) 220px;
  gap: 32px;
  align-items: flex-start;
}

/* Post pages get extra room so the middle reading column stays wide
   with both sidebars in place. */
.page-wrap.post-page { max-width: 1600px; }

.breadcrumb {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--mute);
  margin-bottom: 16px;
}

.toc {
  position: sticky;
  top: 20px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}
.toc .head {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--mute);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 12px;
}
/* The contents read as a tree: one trunk down the left, a dot per heading
   sitting on it, and a dashed branch holding the sub-headings. toc.js marks
   the heading you are reading and the branch that leads to it. */
.toc-list {
  border-left: 2px solid var(--line);
  position: relative;
  /* The dots straddle the trunk, so the trunk needs room to its left or the
     sidebar's own scroll box clips the left half of every dot. */
  margin-left: 5px;
}
/* The "no headings" fallback shares the class but has no dots to make room
   for, so it gets plain padding instead. */
.toc-list.mono {
  padding-left: 12px;
}
.toc-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.toc-list li > ul {
  margin-left: 14px;
  border-left: 1px dashed var(--mute);
}
.toc-list a {
  display: block;
  position: relative;
  margin-left: 14px;
  padding: 4px 8px;
  font-size: 13px;
  line-height: 1.4;
  cursor: pointer;
  border-radius: 3px;
  color: var(--ink-soft);
}
.toc-list a:hover {
  background: var(--cream-warm);
  color: var(--ink);
}
/* The dot straddles the trunk it hangs from. */
.toc-list a::before {
  content: '';
  position: absolute;
  left: -20px;
  top: 0.85em;
  width: 7px;
  height: 7px;
  margin-top: -5px;
  border-radius: 50%;
  background: var(--paper);
  border: 1.5px solid var(--line);
}
.toc-list li li a {
  font-size: 12px;
  color: var(--mute);
}
.toc-list li li a::before {
  left: -17px;
  width: 5px;
  height: 5px;
  margin-top: -4px;
  border-width: 1px;
  border-color: var(--mute);
}
.toc-list a.active {
  background: var(--yellow);
  color: var(--ink);
  font-weight: 600;
}
.toc-list a.active::before {
  background: var(--coral);
  border-color: var(--coral);
}
/* A section holding the active heading keeps its branch and its own dot lit,
   so the path down to where you are reads as one line. */
.toc-list li.has-active > a {
  color: var(--ink);
}
.toc-list li.has-active > a::before,
.toc-list li.has-active > ul {
  border-color: var(--coral);
}

/* The post nav is the same trunk-and-dot tree as the contents, one level up:
   where this post sits among the others rather than where you sit inside it. */
.post-nav { margin-bottom: 22px; }
.post-nav .branch {
  border-left: 2px solid var(--line);
  margin-left: 5px;
}
.post-nav .step {
  display: block;
  position: relative;
  margin-left: 14px;
  padding: 5px 8px;
  border-radius: 3px;
  color: var(--ink-soft);
  text-decoration: none;
}
.post-nav .step:hover { background: var(--cream-warm); color: var(--ink); }
/* The dot straddles the trunk, same as a heading in the contents below. */
.post-nav .step::before {
  content: '';
  position: absolute;
  left: -20px;
  top: 12px;
  width: 7px;
  height: 7px;
  margin-top: -4px;
  border-radius: 50%;
  background: var(--paper);
  border: 1.5px solid var(--line);
}
.post-nav .step:hover::before {
  background: var(--coral);
  border-color: var(--coral);
}
.post-nav .kicker {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  line-height: 1.3;
  color: var(--mute);
  letter-spacing: 1px;
}
/* Titles run long, so each one stops after two lines rather than pushing the
   contents off the top of the sidebar. */
.post-nav .title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 12.5px;
  line-height: 1.35;
  font-weight: 600;
}
.post-nav .all .title { font-weight: 500; color: var(--mute); }

.share-box {
  margin-top: 24px;
  padding: 14px;
  background: var(--mint);
  border: 2px solid var(--line);
  border-radius: 4px;
  box-shadow: 3px 3px 0 var(--line);
}
.share-box .label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.share-box .btns { display: flex; gap: 4px; }
.share-box button {
  flex: 1;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 3px;
  padding: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  cursor: pointer;
  font-weight: 600;
}

.post-tags {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.post-detail h1 {
  font-size: 42px;
  line-height: 1.08;
  margin: 0 0 12px;
  overflow-wrap: break-word;
  word-break: break-word;
}

.byline {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 28px;
  padding-bottom: 16px;
  border-bottom: 2px dashed var(--line);
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  flex-wrap: wrap;
}
.byline .who { display: flex; align-items: center; gap: 8px; }
.byline .who strong { font-family: 'Inter', 'Noto Sans SC', sans-serif; }
.byline .mute { color: var(--mute); }
.byline .handle { color: var(--mute); margin-left: 6px; }

.cover-wrap {
  margin-bottom: 28px;
  border: 2px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 5px 5px 0 var(--line);
}

/* Markdown body */
.md {
  font-size: 17px;
  line-height: 1.75;
  color: var(--ink-soft);
}
.md > *:first-child { margin-top: 0; }
.md p { margin: 0 0 1.1em; }

/* Justified body text, so the right edge lines up with the left. The selector
   list is the single place justification is decided, so a post body, a chapter
   body and a series lede all read the same.

   Section intros are left ragged on purpose. Justification works by spreading
   slack across the lines of a paragraph, and a one or two line intro has
   nowhere to spread it, so the only visible effect is one stretched line.
   Hyphenation is not optional here. A justified column with no hyphens opens
   rivers of white space between words, and the narrower the column the worse
   it gets. `hyphens: auto` needs the lang on <html>, which baseof.html sets.
   Anything with its own internal spacing is left alone below. */
.md p,
.md li,
.series-head .lede p {
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
  hyphenate-limit-chars: 7 4 3;
}

/* Never stretched: code keeps its own spacing, table cells set their own
   widths, and a heading or a caption reads worse stretched than ragged. */
.md pre,
.md pre code,
.md table,
.md th,
.md td,
.md h2,
.md h3,
.md h4 {
  text-align: left;
  -webkit-hyphens: manual;
  hyphens: manual;
}

/* A short line cannot be justified without looking broken, so below the
   phone breakpoint the text goes back to ragged right. */
@media (max-width: 640px) {
  .md p,
  .md li,
  .series-head .lede p { text-align: left; }
}
.md strong { color: var(--ink); }
.md em { font-style: italic; }
.md ul, .md ol { padding-left: 20px; margin: 0 0 1em; }
.md li { margin-bottom: 0.35em; }
.md h2 {
  font-family: 'Fraunces', 'Noto Sans SC', serif;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 0.95;
  font-size: 32px;
  margin: 40px 0 16px;
  color: var(--ink);
  display: inline-block;
}
.md h2 { position: relative; }
.md h2::before {
  content: '#';
  color: var(--coral);
  margin-right: 6px;
}
.md h3 {
  font-family: 'Fraunces', 'Noto Sans SC', serif;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: 24px;
  margin: 32px 0 12px;
  color: var(--ink);
}
.md h3::before {
  content: '##';
  color: var(--coral);
  margin-right: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 16px;
  opacity: 0.7;
}
.md a {
  color: var(--coral);
  text-decoration: underline wavy var(--coral);
  font-weight: 600;
}
.md blockquote {
  margin: 24px 0;
  padding: 14px 20px;
  background: var(--lavender);
  border: 2px solid var(--line);
  border-radius: 8px;
  box-shadow: 4px 4px 0 var(--line);
  font-style: italic;
}
.md blockquote p:last-child { margin-bottom: 0; }

.md code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.88em;
  background: var(--cream-warm);
  border: 1px solid rgba(0,0,0,0.12);
  padding: 1px 6px;
  border-radius: 3px;
}

.md pre {
  margin: 28px 0;
  background: var(--ink);
  border: 2px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 5px 5px 0 var(--line);
  padding: 18px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  line-height: 1.65;
  color: #eee;
  overflow-x: auto;
}
.md pre code {
  background: transparent;
  border: none;
  padding: 0;
  color: #eee;
  font-size: 13px;
}

.md img {
  max-width: 100%;
  border: 2px solid var(--line);
  border-radius: 8px;
  box-shadow: 5px 5px 0 var(--line);
  margin: 16px 0;
}

.md hr {
  border: none;
  border-top: 2px dashed var(--line);
  margin: 32px 0;
}

.md table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  border: 2px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}
.md th, .md td {
  padding: 10px 14px;
  border-bottom: 1.5px dashed rgba(0,0,0,0.15);
  text-align: left;
}
.md th {
  background: var(--yellow);
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  border-bottom: 2px solid var(--line);
}

.callout {
  margin: 32px 0;
  padding: 18px 20px;
  background: var(--lavender);
  border: 2px solid var(--line);
  border-radius: 8px;
  box-shadow: 4px 4px 0 var(--line);
  display: flex;
  gap: 14px;
}
.callout .label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
}
.callout .text { font-size: 15px; line-height: 1.55; }

.post-foot {
  margin-top: 60px;
  padding: 24px 28px;
  background: var(--yellow);
  border: 2px solid var(--line);
  border-radius: 8px;
  box-shadow: 6px 6px 0 var(--line);
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
}
.post-foot .t {
  font-family: 'Fraunces', 'Noto Sans SC', serif;
  font-weight: 900;
  font-size: 22px;
  margin-bottom: 4px;
}
.post-foot .s { font-size: 14px; color: var(--ink-soft); margin-bottom: 10px; }
.post-foot .ctas { display: flex; gap: 10px; flex-wrap: wrap; }

.prev-next {
  margin-top: 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.prev-next .card {
  padding: 16px;
  background: var(--paper);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  color: inherit;
  text-decoration: none;
  display: block;
}
.prev-next .card:hover { box-shadow: 2px 2px 0 var(--line); transform: translate(3px, 3px); }
.prev-next .next { text-align: right; }
.prev-next .kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--mute);
}
.prev-next .title { font-size: 15px; font-weight: 600; margin-top: 2px; }

.side-meta {
  position: sticky;
  top: 20px;
}
.front-matter {
  padding: 18px;
  background: var(--paper);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.front-matter .head {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--mute);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 10px;
}
.front-matter .yaml {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  line-height: 1.7;
}
.front-matter .yaml .k { color: var(--coral); }

.reading-progress {
  margin-top: 16px;
  padding: 14px;
  background: var(--coral);
  border: 2px solid var(--line);
  border-radius: 4px;
  box-shadow: 3px 3px 0 var(--line);
  transform: rotate(2deg);
}
.reading-progress .label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
  color: var(--paper);
}
.reading-progress .text { font-size: 13px; color: var(--paper); line-height: 1.5; }
.reading-progress .bar {
  margin-top: 8px;
  background: rgba(255,255,255,0.3);
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
}
.reading-progress .bar > div {
  width: 0%;
  height: 100%;
  background: var(--paper);
  transition: width 0.1s;
}

/* ─── About page ─── */
.about-hero {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 40px;
  align-items: flex-start;
  margin-bottom: 60px;
}
/* Mirana hero: same column split as the home hero, card and mascot on the right. */
.about-hero.mirana-hero { grid-template-columns: 1.3fr 1fr; }
/* Push the card down so its top lines up with the "Read this first" box.
   The mascot follows: it stays 80px above the card's top-right corner. */
.about-hero.mirana-hero .terminal-card { margin-top: 265px; }
.about-hero.mirana-hero .hero-mascot { top: 185px; }
.about-hero h1 {
  font-size: 84px;
  margin: 0;
  line-height: 1;
}
.about-hero h1 .hl {
  padding: 0 14px;
  border: 2px solid var(--line);
  border-radius: 10px;
  box-shadow: 6px 6px 0 var(--line);
  display: inline-block;
  transform: rotate(-1deg);
}
.about-hero p { font-size: 20px; line-height: 1.6; color: var(--ink-soft); margin-top: 24px; }
.about-hero .links {
  margin-top: 28px;
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}
.about-hero .avatar-box {
  background: var(--coral-soft);
  border: 2px solid var(--line);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 6px 6px 0 var(--line);
  transform: rotate(3deg);
  text-align: center;
}
.about-hero .avatar-box .cap {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  margin-top: 8px;
  font-weight: 700;
}

.about-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
  margin-bottom: 60px;
}
.about-grid .tile {
  background: var(--paper);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
}
.about-grid .span-3 { grid-column: span 3; }
.about-grid .span-2 { grid-column: span 2; }
.about-grid .span-6 { grid-column: span 6; }
.about-grid .tile .label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 10px;
}
.about-grid .stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  font-size: 14px;
}
.about-grid ul { margin: 0; padding-left: 18px; font-size: 15px; line-height: 1.8; }

.about-fun {
  background: var(--cream-warm);
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 22px 28px;
}
.about-fun .icon { font-size: 40px; }
.about-fun .t {
  font-family: 'Fraunces', 'Noto Sans SC', serif;
  font-weight: 900;
  font-size: 22px;
  margin-bottom: 4px;
}
.about-fun .s { font-size: 15px; color: var(--ink-soft); font-style: italic; }

.quote-block {
  text-align: center;
  padding: 40px 20px;
  margin: 20px 0 60px;
  border-top: 2px dashed var(--line);
  border-bottom: 2px dashed var(--line);
}
.quote-block .q {
  font-size: 26px;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 700;
  max-width: 660px;
  margin: 0 auto;
  line-height: 1.3;
}
.quote-block .a {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: var(--mute);
  margin-top: 12px;
}

/* ─── Tags page ─── */
.tag-cloud {
  padding: 36px;
  margin-bottom: 30px;
  background: var(--paper);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: center;
}
.tag-cloud a {
  background: var(--cream-warm);
  border: 2px solid var(--line);
  border-radius: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  cursor: pointer;
  color: var(--ink);
  box-shadow: 2px 2px 0 var(--line);
  transition: all 0.12s;
  text-decoration: none;
}
.tag-cloud a:hover { box-shadow: 4px 4px 0 var(--line); transform: translate(-2px, -2px); }
.tag-cloud a sup { font-size: 0.55em; margin-left: 4px; opacity: 0.6; }

.tag-cloud a.s1 { font-size: 14px; padding: 4px 12px; }
.tag-cloud a.s2 { font-size: 20px; padding: 6px 16px; }
.tag-cloud a.s3 { font-size: 26px; padding: 8px 20px; }
.tag-cloud a.s4 { font-size: 32px; padding: 10px 24px; }
.tag-cloud a.s5 { font-size: 38px; padding: 12px 28px; }

.tag-cloud a:nth-child(1) { transform: rotate(-2deg); }
.tag-cloud a:nth-child(2) { transform: rotate(1deg); }
.tag-cloud a:nth-child(3) { transform: rotate(-1deg); }
.tag-cloud a:nth-child(4) { transform: rotate(2deg); }
.tag-cloud a:nth-child(5) { transform: rotate(-2deg); }
.tag-cloud a:nth-child(6) { transform: rotate(0deg); }
.tag-cloud a:nth-child(7) { transform: rotate(-1deg); }
.tag-cloud a:nth-child(8) { transform: rotate(1deg); }

.categories-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 24px;
}
.categories-grid .cat {
  padding: 24px;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  cursor: pointer;
  color: inherit;
  text-decoration: none;
  display: block;
}
.categories-grid .cat:nth-child(4n+1) { background: var(--yellow); }
.categories-grid .cat:nth-child(4n+2) { background: var(--mint); }
.categories-grid .cat:nth-child(4n+3) { background: var(--lavender); }
.categories-grid .cat:nth-child(4n) { background: var(--coral-soft); }
.categories-grid .cat .icon { font-size: 40px; margin-bottom: 8px; }
.categories-grid .cat .name {
  font-family: 'Fraunces', serif;
  font-weight: 900;
  font-size: 24px;
}
.categories-grid .cat .count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--ink-soft);
  margin-top: 4px;
}

/* ─── Series ───
   Three surfaces, three jobs.

   /series/                the shelf. Few items, so each one is a wide row that
                          answers "what is this, how far along, where do I start".
   /series/<series>/         the contents. A numbered list grouped by part, because
                          a reader scanning a table of contents wants rows, not
                          cards.
   /series/<series>/<ch>/    the chapter. Reading. The measure is capped and the
                          chapter rail sticks, so you always know where you are.
*/

/* ── The shelf ── */

.shelf { display: flex; flex-direction: column; gap: 22px; }

.shelf-item {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: 24px;
  padding: 20px;
  background: var(--paper);
  border: 2px solid var(--line);
  border-radius: 12px;
  box-shadow: 5px 5px 0 var(--line);
  transition: transform .12s ease, box-shadow .12s ease;
}
.shelf-item:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--line); }

/* The spine. A series on the shelf reads as an object, not a blog card. */
.shelf-spine {
  position: relative;
  border: 2px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 14px;
  background: var(--accent, var(--aqua));
}
.shelf-spine .n {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  opacity: .65;
  margin-bottom: 4px;
}
.shelf-spine .t {
  font-family: 'Fraunces', 'Noto Sans SC', serif;
  font-weight: 900;
  font-size: 19px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
}
/* The ruled edge, so it reads as pages seen side on. */
.shelf-spine::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 9px;
  background: repeating-linear-gradient(
    to bottom, var(--line) 0 1px, transparent 1px 5px);
  opacity: .35;
}

.shelf-body { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.shelf-body h2 {
  font-family: 'Fraunces', 'Noto Sans SC', serif;
  font-weight: 900;
  letter-spacing: -0.02em;
  font-size: 28px;
  line-height: 1.05;
  margin: 0;
  /* One line. A two line title on one card and a one line title on the next is
     the other thing that makes a shelf look ragged. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  overflow: hidden;
}
.shelf-body h2 a { color: var(--ink); text-decoration: none; }
.shelf-body h2 a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.shelf-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
  color: var(--mute);
  /* One line, always, for the same reason as the description. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  overflow: hidden;
  min-height: 1.5em;
}
/* Every card on the shelf is the same height, and the way that is held is by
   fixing the number of lines each part is allowed rather than hoping the copy
   behaves. A description is always exactly two lines: clamped if it runs long,
   padded if it runs short. A shelf of cards at different heights reads as
   broken, not as varied. */
.shelf-body p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  min-height: 3.2em;      /* 2 lines at 1.6 */
}

.shelf-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* How far along. The bar is the honest bit: a series in progress looks like one. */
.progress-strip { display: flex; align-items: center; gap: 8px; }
.progress-strip .bar {
  width: 120px; height: 9px;
  border: 2px solid var(--line);
  border-radius: 5px;
  overflow: hidden;
  background: var(--cream-warm);
}
.progress-strip .bar > span {
  display: block; height: 100%;
  background: var(--accent, var(--aqua));
}
.progress-strip .n {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  color: var(--mute);
}

/* Jump straight to a chapter from the shelf. This is the navigation win:
   two clicks to any chapter becomes one. */
/* One row, never two, and the same three links whether the series has two
   chapters or twenty. Nothing in here grows with the length of the series, so
   there is no overflow to hide. */
.shelf-jump { display: flex; flex-wrap: nowrap; gap: 6px; align-items: center; }
.shelf-jump .lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; color: var(--mute); margin-right: 2px;
}
.shelf-jump a {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  padding: 3px 9px;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.shelf-jump a:hover { background: var(--accent, var(--aqua)); }

/* ── The contents page ── */

.series-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 32px;
  align-items: start;
  margin-bottom: 34px;
  padding-bottom: 26px;
  border-bottom: 2px dashed var(--line);
}
.series-head h1 { font-size: 46px; line-height: 1.04; margin: 0 0 8px; }
.series-head .sub {
  font-family: 'Fraunces', 'Noto Sans SC', serif;
  font-size: 19px;
  color: var(--mute);
  margin: 0 0 14px;
}
/* A series page's body is doing the same job as a post body, so it takes the
   same size and leading as .md rather than a size of its own. */
.series-head .lede { font-size: 17px; line-height: 1.75; color: var(--ink-soft); }
.series-head .lede p { margin: 0 0 0.8em; }

.series-facts {
  background: var(--paper);
  border: 2px solid var(--line);
  border-radius: 10px;
  box-shadow: 4px 4px 0 var(--line);
  padding: 14px 16px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
}
.series-facts .row { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; }
.series-facts .row + .row { border-top: 1px dashed var(--line); }
.series-facts .k { color: var(--mute); }
.series-facts .cta {
  display: block;
  margin-top: 12px;
  text-align: center;
  padding: 9px 12px;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: var(--accent, var(--aqua));
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
  box-shadow: 3px 3px 0 var(--line);
}
.series-facts .cta:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--line); }

/* Parts. A series that declares them gets them shown. */
.part-head {
  display: flex; align-items: baseline; gap: 12px;
  margin: 30px 0 12px;
}
.part-head .n {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 700;
  padding: 3px 9px;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: var(--accent, var(--aqua));
}
.part-head .t {
  font-family: 'Fraunces', 'Noto Sans SC', serif;
  font-weight: 800; font-size: 19px; color: var(--ink);
}
.part-head .rule { flex: 1; border-bottom: 2px dashed var(--line); }

/* A chapter row. Rows beat cards for a table of contents: the eye runs down
   the numbers and the titles line up. */
.chapter-rows { display: flex; flex-direction: column; }
.chapter-row {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: baseline;
  padding: 15px 14px;
  border: 2px solid transparent;
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
}
.chapter-row + .chapter-row { border-top: 1px dashed var(--line); }
.chapter-row:hover {
  background: var(--paper);
  border-color: var(--line);
  border-top-style: solid;
  box-shadow: 4px 4px 0 var(--line);
}
.chapter-row:hover + .chapter-row { border-top-color: transparent; }
.chapter-row .num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 22px;
  font-weight: 700;
  color: var(--mute);
}
.chapter-row:hover .num { color: var(--ink); }
.chapter-row .t {
  display: block;
  font-family: 'Fraunces', 'Noto Sans SC', serif;
  font-weight: 800;
  font-size: 20px;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 4px;
}
.chapter-row .d { display: block; font-size: 15px; line-height: 1.6; color: var(--ink-soft); margin: 0; }
.chapter-row .meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  color: var(--mute);
  white-space: nowrap;
  text-align: right;
}
.chapter-row .meta .draft {
  display: inline-block;
  margin-top: 5px;
  padding: 2px 7px;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: var(--yellow-soft, var(--cream-warm));
  color: var(--ink);
}

/* ── The chapter page ── */

/* A chapter is the same width as a post. The page-wrap, the three column grid
   and the type all come from post.css unchanged, so a reader moving between a
   post and a chapter is not moving between two layouts. */

/* The rail follows you down the chapter. */
.series-page .toc { position: sticky; top: 18px; max-height: calc(100vh - 36px); overflow-y: auto; }
.series-page .side-meta { position: sticky; top: 18px; }

/* Where am I in the series. */
.chapter-place {
  display: flex; align-items: center; gap: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--mute);
  margin-bottom: 10px;
}
.chapter-place .pips { display: flex; gap: 4px; flex-wrap: wrap; }
.chapter-place .pips a {
  width: 16px; height: 7px;
  border: 2px solid var(--line);
  border-radius: 3px;
  background: var(--cream-warm);
  display: block;
  position: relative;
  transition: background .12s, transform .12s;
}
/* The bar stays 7px tall because that is the look. The overlay gives a mouse
   and a thumb something bigger to hit without changing the layout. */
.chapter-place .pips a::before { content: ""; position: absolute; inset: -8px -2px; }
.chapter-place .pips a.on { background: var(--accent, var(--aqua)); }
.chapter-place .pips a.here { background: var(--ink); }
.chapter-place .pips a:hover { background: var(--coral); transform: translateY(-2px); }
.chapter-place .pips a.here:hover { background: var(--ink); transform: none; }
.chapter-place .pips a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* The rail's chapter list, so the current chapter is obvious. */
.series-page .post-nav .step.here {
  background: var(--accent, var(--aqua));
  border-color: var(--line);
}

@media (max-width: 960px) {
  .shelf-item { grid-template-columns: 1fr; }
  .shelf-spine { min-height: 96px; }
  .series-head { grid-template-columns: 1fr; }
  .chapter-row { grid-template-columns: 44px minmax(0, 1fr); }
  .chapter-row .meta { grid-column: 2; text-align: left; }
  .series-page .toc, .series-page .side-meta { position: static; max-height: none; }
}

/* ── The chapter tree ──
   series / chapters / this chapter / its sections, in one rail. Only the
   chapter you are reading shows its sections, so the tree stays short however
   long the series gets. */

.series-tree { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; }

.tree-root {
  display: flex; align-items: baseline; gap: 7px;
  padding: 8px 10px;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: var(--accent, var(--aqua));
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
  box-shadow: 3px 3px 0 var(--line);
  margin-bottom: 12px;
}
.tree-root .k { opacity: .6; }
.tree-root .t { font-family: 'Inter', 'Noto Sans SC', sans-serif; line-height: 1.25; }

.tree-chapters { list-style: none; margin: 0; padding: 0 0 0 8px; border-left: 2px dashed var(--line); }
.tree-chapters > li { position: relative; }

/* The tick joining a chapter back to the spine. */
.tree-chapters > li > .tree-chapter::before {
  content: "";
  position: absolute;
  left: -8px; top: 15px;
  width: 7px;
  border-top: 2px dashed var(--line);
}

.tree-chapter {
  display: flex; align-items: baseline; gap: 8px;
  padding: 7px 9px;
  border-radius: 7px;
  color: var(--ink-soft);
  text-decoration: none;
}
.tree-chapter .n { color: var(--mute); font-weight: 700; }
.tree-chapter .t { line-height: 1.3; }
.tree-chapter:hover { background: var(--cream-warm); color: var(--ink); }

.tree-chapters > li.here > .tree-chapter {
  background: var(--accent, var(--aqua));
  border: 2px solid var(--line);
  color: var(--ink);
  font-weight: 700;
  padding: 6px 8px;
}
.tree-chapters > li.here > .tree-chapter .n { color: var(--ink); }

/* The open chapter's own sections, one level further in. */
.tree-sections { margin: 4px 0 8px 12px; padding-left: 10px; border-left: 2px dashed var(--line); }
.tree-sections ul { list-style: none; margin: 0; padding: 0; }
.tree-sections ul ul { padding-left: 11px; }
.tree-sections li { margin: 0; }
.tree-sections a {
  display: block;
  padding: 4px 7px;
  border-radius: 6px;
  color: var(--mute);
  text-decoration: none;
  font-size: 12px;
  line-height: 1.35;
}
.tree-sections a:hover { background: var(--cream-warm); color: var(--ink); }
.tree-sections a.active { background: var(--yellow); color: var(--ink); font-weight: 700; }

/* The series name is a link everywhere it appears on a chapter page: the
   breadcrumb, the tree root, the place strip and the front matter panel. The
   last two sit inside blocks that are otherwise plain text, so they need a cue
   that they are clickable. A dashed underline is the site's quiet one. */
.chapter-place a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px dashed var(--mute);
  padding-bottom: 1px;
}
.chapter-place a:hover { border-bottom-color: var(--ink); background: var(--accent, var(--aqua)); }

.series-page .front-matter .yaml a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dashed var(--mute);
}
.series-page .front-matter .yaml a:hover { border-bottom-color: var(--ink); background: var(--accent, var(--aqua)); }

/* The whole series card is one click target, like a chapter row. The title's
   anchor is stretched over the card rather than wrapping it, because the card
   also holds the jump links and an anchor inside an anchor is invalid. The
   jump links sit above the stretched one so they still take their own click. */
.shelf-item { position: relative; }
.shelf-item a.stretch::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
}
.shelf-jump { position: relative; z-index: 1; }
.shelf-item:focus-within { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--line); }
.shelf-spine { cursor: pointer; }
/* ─── Now page ─── */
.now-page-wrap { padding: 40px 40px 0; max-width: 1400px; margin: 0 auto; }
.now-page-wrap h1 {
  font-size: 72px;
  margin: 0;
  line-height: 1;
}
.now-page-wrap h1 .hl {
  padding: 0 14px;
  border: 2px solid var(--line);
  border-radius: 10px;
  box-shadow: 6px 6px 0 var(--line);
  display: inline-block;
  transform: rotate(-1deg);
  background: var(--peach);
}

.now-entries {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.now-entry {
  padding: 24px;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.now-entry:nth-child(4n+1) { background: var(--yellow); }
.now-entry:nth-child(4n+2) { background: var(--mint); }
.now-entry:nth-child(4n+3) { background: var(--lavender); }
.now-entry:nth-child(4n) { background: var(--peach); }
.now-entry .label {
  min-width: 100px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  background: var(--ink);
  color: var(--paper);
  padding: 6px 10px;
  border-radius: 4px;
  text-align: center;
}
.now-entry .text { flex: 1; font-size: 17px; line-height: 1.5; }

.now-footnote {
  margin-top: 40px;
  padding: 24px;
  background: var(--cream-warm);
  border: 2px dashed var(--line);
  border-radius: 8px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.now-footnote a { color: var(--coral); font-weight: 600; }

/* ─── Chip + CTA ─── */
.chip {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--line);
  border-radius: 4px;
  padding: 4px 10px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  font-size: 12px;
  color: var(--ink);
}
.chip.sm { padding: 2px 8px; font-size: 11px; }
.chip.lg { padding: 6px 14px; font-size: 13px; }
.chip.pinned { background: var(--ink); color: var(--yellow); }

.cta {
  background: var(--yellow);
  border: 2px solid var(--line);
  border-radius: 6px;
  padding: 9px 18px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 5px 5px 0 var(--line);
  transition: all 0.1s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  text-decoration: none;
}
.cta:hover {
  box-shadow: 2px 2px 0 var(--line);
  transform: translate(3px, 3px);
}
.cta.lg { padding: 12px 22px; font-size: 15px; }
.cta.sm { padding: 6px 14px; font-size: 12px; }
.cta.ink { background: var(--ink); color: var(--yellow); }
.cta.paper { background: var(--paper); }
.cta.mint { background: var(--mint); }
.cta.mirana { background: var(--mirana); }

/* ─── Squiggle + mascot helpers ─── */
.squiggle { display: block; }

/* Red rubber stamp over the cover of a post with `sample: true`. */
.cover-wrap, .cover-slot { position: relative; }
.sample-stamp {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.sample-stamp span {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 800;
  font-size: clamp(30px, 11cqw, 76px);
  line-height: 1;
  letter-spacing: 0.14em;
  color: #d8261c;
  border: 0.14em solid #d8261c;
  border-radius: 0.16em;
  padding: 0.12em 0.45em 0.1em 0.55em;
  transform: rotate(-12deg);
  background: rgba(253, 252, 245, 0.82);
  box-shadow: 0 0 0 0.05em rgba(253, 252, 245, 0.9), 3px 3px 0 rgba(21, 20, 21, 0.35);
}
.cover-wrap, .cover-slot { container-type: inline-size; }
/* Comment box at the foot of a post. The giscus iframe brings its own styling
   from static/css/giscus.css, so this file only builds the paper card around
   it. */

.comments {
  margin-top: 40px;
  padding: 24px 28px 18px;
  background: var(--paper);
  border: 2px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.comments-head .kicker {
  font-size: 11px;
  color: var(--mute);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.comments-head h2 {
  font-family: 'Fraunces', 'Noto Sans SC', serif;
  font-weight: 900;
  font-size: 26px;
  margin: 6px 0 8px;
}
.comments-head .lede {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
}
.comments-head .notes {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 18px;
  padding: 0;
}

/* No min-height here. giscus sets the iframe height itself once it has
   loaded, and reserving space only leaves an empty box on the rare load that
   never finishes. */
.giscus-slot .giscus-frame { width: 100%; border: 0; }
/* ─── Footer ─── */
footer.site-foot {
  margin-top: 80px;
  border-top: 2px solid var(--line);
  background: var(--paper);
  color: var(--ink);
}
footer.site-foot .wrap {
  max-width: 1400px;
  margin: 0 auto;
  padding: 40px 40px 32px;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 32px;
}
footer.site-foot .brand-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
footer.site-foot .brand-row .title {
  font-family: 'Fraunces', serif;
  font-weight: 900;
  font-size: 24px;
}
footer.site-foot .quote-mono {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  line-height: 1.7;
  opacity: 0.8;
}
footer.site-foot .quote-mono .c { color: var(--coral); }
footer.site-foot .col-head {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  opacity: 0.5;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
footer.site-foot a {
  font-size: 14px;
  padding: 3px 0;
  display: block;
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}

/* ─── Responsive ─── */
@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; }
  .hero h1 { font-size: 56px; }
  .hero h1 .sub { font-size: 36px; }
  .hero h1 .curly { font-size: 28px; }
  .page-title-row h1 { font-size: 52px; }
  .about-hero, .about-hero.mirana-hero { grid-template-columns: 1fr; }
  .hero .hero-right .terminal-card, .about-hero.mirana-hero .terminal-card { margin-top: 60px; }
  .hero .hero-right .hero-mascot, .about-hero.mirana-hero .hero-mascot { top: -20px; }
  .about-hero h1 { font-size: 52px; }
  .now-stack { grid-template-columns: 1fr; }
  .post-detail { grid-template-columns: 1fr; }
  .toc, .side-meta { position: static; }
  /* Stacked above the article, the sidebar post nav would sit between the
     reader and the post. The breadcrumb and the cards at the foot already
     carry prev, next and back to posts on a narrow screen. */
  .post-nav { display: none; }
  .posts-grid { grid-template-columns: repeat(2, 1fr); }
  .featured-grid { grid-template-columns: 1fr; }
  .stack-grid { grid-template-columns: repeat(4, 1fr); }
  .about-grid { grid-template-columns: repeat(2, 1fr); }
  .about-grid .span-3, .about-grid .span-2 { grid-column: span 2; }
  .about-grid .span-6 { grid-column: span 2; }
  .categories-grid { grid-template-columns: repeat(2, 1fr); }
  footer.site-foot .wrap { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .topbar, .page-wrap, .now-page-wrap { padding-left: 20px; padding-right: 20px; }
  .hero h1 { font-size: 42px; }
  .page-title-row h1 { font-size: 40px; }
  .section-header h2 { font-size: 30px; }
  .posts-grid { grid-template-columns: 1fr; }
  .tabs-row { flex-wrap: wrap; }
  .tabs-logo { margin-right: 0; }
  footer.site-foot .wrap { grid-template-columns: 1fr; }
  .term-row { grid-template-columns: auto 1fr; gap: 8px; font-size: 12px; }
  .term-row .date, .term-row .tags, .term-row .rt { display: none; }
  .now-stack, .featured-grid { grid-template-columns: 1fr; }
}

/* ─── Command palette (Cmd/Ctrl+K) ─── */
.palette[hidden] { display: none; }
.palette {
  position: fixed; inset: 0;
  z-index: 2000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 12vh 20px 0;
}
.palette-backdrop {
  position: absolute; inset: 0;
  background: rgba(21, 20, 21, 0.35);
}
.palette-box {
  position: relative;
  width: 100%;
  max-width: 560px;
  background: var(--paper);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.palette-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 2px solid var(--line);
  font-family: 'JetBrains Mono', monospace;
}
.palette-prompt { color: var(--coral); font-weight: 700; }
.palette-input-row input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
}
.palette-results {
  list-style: none;
  margin: 0;
  padding: 6px;
  max-height: 320px;
  overflow-y: auto;
}
.palette-results li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  border: 2px solid transparent;
}
.palette-results li.active {
  background: var(--yellow);
  border-color: var(--line);
}
.palette-results li .kind {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--mute);
}
.palette-foot {
  display: flex;
  gap: 16px;
  padding: 10px 16px;
  border-top: 2px solid var(--line);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--mute);
}
.palette-foot kbd {
  font-family: inherit;
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 0 4px;
  margin-right: 2px;
  background: var(--cream);
}

/* cmdk badge doubles as the palette trigger */
button.cmdk {
  border: 1px solid var(--mute);
  border-radius: 3px;
  background: transparent;
  padding: 1px 5px;
  cursor: pointer;
  font-family: 'JetBrains Mono', monospace;
}

/* ─── 404 ─── */
.notfound {
  padding: 100px 40px;
  max-width: 840px;
  margin: 0 auto;
  text-align: center;
}
.notfound h1 {
  font-size: 120px;
  margin: 0 0 10px;
}
.notfound h1 .hl {
  background: var(--coral);
  padding: 0 18px;
  display: inline-block;
  transform: rotate(-2deg);
  border: 2px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
}
.notfound p {
  font-family: 'JetBrains Mono', monospace;
  color: var(--mute);
  margin-bottom: 32px;
}