:root {
  --bg: #fbf8f1;
  --fg: #22201c;
  --muted: #6b665c;
  --line: #e4ddcd;
  --card: #ffffff;
  --accent: #b4441f;
  --ai: #127a74;
  --lb: #6d4aa6;
  --key: #2a5fa8;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --serif: "Source Serif 4", Georgia, serif;
  --main-x: 10px;
  --ai-x: 32px;
  --lb-x: 54px;
  --dy: 1.05rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16150f;
    --fg: #ece7dc;
    --muted: #a39d8f;
    --line: #2f2c24;
    --card: #1e1c16;
    --accent: #f08a5d;
    --ai: #5fd0c6;
    --lb: #c0a6ee;
    --key: #7fb0f5;
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

.skip {
  position: absolute;
  left: 1rem;
  top: -3rem;
  z-index: 20;
  background: var(--fg);
  color: var(--bg);
  padding: .4rem .8rem;
  border-radius: 6px;
  font-family: var(--mono);
  font-size: .85rem;
}
.skip:focus { top: 1rem; }

:focus-visible {
  outline: 2px solid var(--key);
  outline-offset: 3px;
  border-radius: 3px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 1.125rem/1.65 var(--serif);
  -webkit-font-smoothing: antialiased;
}

.page {
  max-width: 44rem;
  margin: 0 auto;
  padding: 4rem 1rem 3rem;
}

a { color: var(--accent); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

code { font-family: var(--mono); font-size: .88em; }

.dim { color: var(--muted); }

.prompt { font-family: var(--mono); font-size: .9rem; margin: 0 0 .25rem; }

h1, h2, h3 { font-family: var(--mono); line-height: 1.3; }

h1 {
  font-size: clamp(2.2rem, 7vw, 3.2rem);
  margin: 0;
  letter-spacing: -.02em;
}

.role { font-family: var(--mono); color: var(--muted); font-size: .95rem; margin: .25rem 0 0; }

.hero-top {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin: 0 0 1.25rem;
}
.hero-top > div { min-width: 0; }
.avatar {
  flex: none;
  width: 104px;
  height: 104px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: #fbf8f1;
}

.lede { font-size: 1.25rem; margin: 0 0 1.5rem; }

.stats {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  font-family: var(--mono);
  font-size: .8rem;
}
.stats li {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .2rem .7rem;
  color: var(--muted);
}
.stats b { color: var(--fg); }

.hero.page { padding-bottom: 1.5rem; }

.philosophy {
  font-family: var(--mono);
  font-size: .9rem;
  border-left: 3px solid var(--accent);
  padding: .1rem 0 .1rem .9rem;
  margin: 0 0 1.25rem;
}

.contact-links {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.25rem;
  font-family: var(--mono);
  font-size: .9rem;
}
.contact-links a::before { content: "→ "; color: var(--muted); }

.toc {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg);
  border-top: 1px dashed var(--line);
  border-bottom: 1px dashed var(--line);
}
.toc-inner {
  max-width: 44rem;
  margin: 0 auto;
  padding: 0 1rem;
  display: flex;
  gap: .35rem;
  overflow-x: auto;
  scroll-padding-inline: 1rem 3.5rem;
  scrollbar-width: none;
  font-family: var(--mono);
  font-size: .85rem;
  white-space: nowrap;
}
.toc-inner::-webkit-scrollbar { display: none; }
@media (max-width: 819px) {
  .toc-inner {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
    padding-right: 2rem;
  }
}
.toc a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 .5rem;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.toc a:first-child { margin-left: -.5rem; }
.toc a::before { content: "./"; color: var(--muted); }
.toc a[aria-current] { color: var(--fg); font-weight: 700; border-bottom-color: var(--accent); }
.toc a:focus-visible { outline-offset: -3px; }
@media (min-width: 820px) {
  .toc-inner { gap: 0; font-size: .8rem; }
  .toc a { padding: 0 .35rem; }
  .toc a:first-child { margin-left: -.35rem; }
}

main.page { padding-top: 0; }

section { margin-top: 4rem; scroll-margin-top: 4rem; }
.alias { display: block; height: 0; scroll-margin-top: 4rem; }
main:focus { outline: none; }

h2 { font-size: 1.35rem; margin: 0 0 .5rem; }
.eyebrow {
  display: block;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: .15rem;
}
.cmd { display: block; overflow-wrap: anywhere; }
.hash { color: var(--accent); }

.note { color: var(--muted); font-style: italic; margin: 0 0 1.5rem; }

/* --- git graph --- */

.legend {
  font-family: var(--mono);
  font-size: .8rem;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  margin: 0 0 2rem;
}
.key { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.key.main { background: var(--accent); }
.key.ai { background: var(--ai); }
.key.lb { background: var(--lb); }
.lg { white-space: nowrap; margin-right: .9rem; }
.nw { white-space: nowrap; }

.graph { list-style: none; padding: 0; margin: 0; }

.c {
  position: relative;
  padding: 0 0 1.75rem 4.4rem;
}
.c p { margin: 0; }

/* main lane: always present */
.c::before {
  content: "";
  position: absolute;
  left: var(--main-x);
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--accent);
}
.c:first-child::before { top: var(--dy); }
.c:last-child::before { bottom: auto; height: var(--dy); }

/* ai lane: present while the branch exists */
.c.ai::after,
.c.ai-on::after {
  content: "";
  position: absolute;
  left: var(--ai-x);
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--ai);
}
.c.fork::after { top: var(--dy); }

/* lancerbooks lane: a side branch drawn as a background stripe */
.c.lb {
  background: linear-gradient(var(--lb), var(--lb)) no-repeat;
  background-position: var(--lb-x) 0;
  background-size: 2px 100%;
}
.c.lb-fork { background-position: var(--lb-x) var(--dy); background-size: 2px calc(100% - var(--dy)); }
.c.lb-end { background-size: 2px var(--dy); }

.curve {
  position: absolute;
  left: calc(var(--main-x) + 1px);
  width: calc(var(--ai-x) - var(--main-x));
  top: 0;
  height: var(--dy);
  border: 0 solid var(--ai);
}
.fork .curve {
  left: var(--main-x);
  top: calc(var(--dy) * -1);
  height: calc(var(--dy) * 2);
  border-top-width: 0;
  border-left-width: 2px;
  border-bottom-width: 2px;
  border-bottom-left-radius: 14px;
  border-color: var(--accent);
  width: calc(var(--ai-x) - var(--main-x) - 4px);
}
.lb-fork .curve {
  left: var(--main-x);
  top: calc(var(--dy) * -1);
  height: calc(var(--dy) * 2);
  border-left-width: 2px;
  border-bottom-width: 2px;
  border-bottom-left-radius: 14px;
  border-color: var(--accent);
  width: calc(var(--lb-x) - var(--main-x) - 4px);
}
.merge .curve {
  border-right-width: 2px;
  border-bottom-width: 2px;
  border-bottom-right-radius: 14px;
  left: calc(var(--main-x) + 6px);
  width: calc(var(--ai-x) - var(--main-x) - 4px);
}

.dot {
  position: absolute;
  top: calc(var(--dy) - 6px);
  left: calc(var(--main-x) - 5px);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--accent);
  z-index: 1;
}
.c.ai .dot { left: calc(var(--ai-x) - 5px); border-color: var(--ai); }
.c.lb .dot { left: calc(var(--lb-x) - 5px); border-color: var(--lb); }
.c.lb-end .dot { background: var(--lb); }
.c.merge .dot { background: var(--accent); width: 14px; height: 14px; top: calc(var(--dy) - 7px); left: calc(var(--main-x) - 6px); }

.meta { font-family: var(--mono); font-size: .75rem; color: var(--muted); line-height: 2.1; }
.sha { color: var(--key); margin-right: .4rem; }
.head { color: var(--accent); font-weight: 700; }
.branch-lb { color: var(--lb); font-weight: 700; }
.msg { font-family: var(--mono); font-weight: 700; font-size: 1rem; margin-bottom: .25rem !important; }
.c.ai .msg { color: var(--ai); }
.c.lb .msg { color: var(--lb); }

/* --- git show HEAD --- */

.stat {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: .25rem 1.25rem;
}
.stat-row { padding: .9rem 0; }
.stat-row + .stat-row { border-top: 1px dashed var(--line); }
.stat-row h3 { font-size: .95rem; margin: 0 0 .3rem; overflow-wrap: anywhere; }
.stat-row p { margin: 0; font-size: 1.02rem; }
.path { color: var(--muted); font-weight: 400; }
.plus { color: var(--accent); font-weight: 400; margin-left: .3rem; }
.plus.ai { color: var(--ai); }

/* --- case study --- */

.cs h3 { font-size: 1rem; margin: 2rem 0 .5rem; }
.cs h3:first-child { margin-top: 0; }
.cs p { margin: 0 0 .9rem; }

.tight { padding-left: 1.2rem; margin: 0 0 1rem; }
.tight li { margin-bottom: .45rem; }

.diagram { margin: 1.5rem 0; }

.scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
}
.scroll:focus-visible { outline-offset: 2px; }
.scroll pre {
  margin: 0;
  padding: 1rem 1.25rem;
  width: max-content;
  min-width: 100%;
  font: .8rem/1.55 var(--mono);
}

.contract {
  border-left: 3px solid var(--ai);
  background: var(--card);
  border-radius: 0 10px 10px 0;
  padding: 1rem 1.25rem .2rem;
  margin: 0 0 1.5rem;
}
.cs .contract h3 { margin-top: 0; }

.status { margin: 0 0 1.5rem; display: grid; grid-template-columns: 6.5rem 1fr; gap: .35rem 1rem; }
.status dt { font-family: var(--mono); font-size: .75rem; color: var(--muted); padding-top: .3rem; text-transform: uppercase; letter-spacing: .05em; }
.status dd { margin: 0; }
.diagram figcaption { font-size: .85rem; color: var(--muted); font-style: italic; margin-top: .4rem; }
.d-main { color: var(--accent); font-weight: 700; }
.d-ai { color: var(--ai); font-weight: 700; }

.more {
  border-top: 1px dashed var(--line);
  padding: .5rem 0;
}
.more:last-of-type { border-bottom: 1px dashed var(--line); margin-bottom: 1rem; }
.more summary {
  cursor: pointer;
  font-family: var(--mono);
  font-weight: 700;
  font-size: .92rem;
  padding: .25rem 0;
  list-style: none;
}
.more summary::-webkit-details-marker { display: none; }
.more summary::before { content: "▸ "; color: var(--accent); }
.more[open] summary::before { content: "▾ "; }
.more .tight { margin-top: .6rem; }

/* --- projects --- */

.proj {
  border-left: 3px solid var(--line);
  padding: .1rem 0 .1rem 1rem;
  margin: 0 0 1.75rem;
  scroll-margin-top: 3.5rem;
}
.proj h3 { font-size: 1.05rem; margin: 0 0 .4rem; }
.proj p { margin: 0 0 .4rem; }
.proj .proj-lede { font-style: italic; color: var(--muted); margin-bottom: .6rem; }
.proj b { font-family: var(--mono); font-size: .8rem; font-weight: 600; color: var(--muted); }
.lang { font-size: .72rem; font-weight: 400; color: var(--muted); margin-left: .4rem; }
.also { padding-left: 1.2rem; }

/* --- fortunes --- */

.fortune {
  margin: 0 0 1.5rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
}
.fortune blockquote {
  margin: 0 0 1rem;
  font-size: 1.35rem;
  font-style: italic;
  min-height: 2.6em;
}
.fortune blockquote::before { content: "“"; color: var(--accent); }
.fortune blockquote::after { content: "”"; color: var(--accent); }
.fortune button {
  font: 600 .8rem var(--mono);
  color: var(--accent);
  background: none;
  border: 1px solid var(--accent);
  border-radius: 6px;
  padding: .35rem .8rem;
  cursor: pointer;
}
.fortune button:hover { background: var(--accent); color: var(--bg); }

.cookies {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: .75rem;
}
.cookies li {
  border-left: 3px solid var(--accent);
  padding: .3rem 0 .3rem .8rem;
  font-style: italic;
  color: var(--muted);
}

/* --- postmortems --- */

.pm {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: .6rem;
}
.pm summary {
  cursor: pointer;
  padding: .75rem 1.1rem;
  font-family: var(--mono);
  font-weight: 700;
  font-size: .95rem;
  list-style: none;
}
.pm summary::-webkit-details-marker { display: none; }
.pm summary::after { content: "+"; float: right; color: var(--muted); }
.pm[open] summary::after { content: "−"; }
.pm .id { color: var(--key); font-weight: 400; margin-right: .5rem; }
.pm dl { margin: 0; padding: 0 1.1rem 1rem; display: grid; grid-template-columns: 8.5rem 1fr; gap: .35rem 1rem; }
.pm dt { font-family: var(--mono); font-size: .75rem; color: var(--muted); padding-top: .25rem; }
.pm dd { margin: 0; }

/* --- package.json --- */

.json code { font-size: inherit; }
.json .k { color: var(--key); }
.json .s { color: var(--ai); }

.now { padding-left: 1.2rem; }
.now li { margin-bottom: .35rem; }

.contact { font-family: var(--mono); font-size: .95rem; }

.foot {
  margin-top: 4rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--line);
  font-family: var(--mono);
  font-size: .8rem;
}

@media (max-width: 560px) {
  .page { padding-top: 2.5rem; }
  body { font-size: 1.05rem; }
  .c { padding-left: 4.15rem; }
  h2 { font-size: 1.1rem; }
  .pm dl, .status { grid-template-columns: 1fr; gap: .1rem; }
  .status dd { margin-bottom: .5rem; }
  .scroll pre { font-size: .72rem; padding: .8rem; }
  .hero.page { padding-top: 1.75rem; padding-bottom: 1.25rem; }
  .lede { font-size: 1.08rem; margin-bottom: 1rem; }
  .hero-top { gap: .9rem; margin-bottom: .9rem; }
  .avatar { width: 72px; height: 72px; border-radius: 14px; }
  .philosophy { font-size: .82rem; margin-bottom: 1rem; }
  .contact-links { margin-bottom: 1rem; }
  .stats { margin-bottom: 0; }
  .pm dd { margin-bottom: .5rem; }
}