:root {
  color-scheme: dark;

  /* B612 carries the page: bold for titles, italic for subtitles, regular for copy.
     B612 Mono is the label/caption voice (nav, code captions, small UI).
     Fira Code is reserved for actual code (inline and blocks), with ligatures. */
  --font-body:  "B612", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-label: "B612 Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --font-mono:  "Fira Code", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* agents.md-style monochrome dark theme: near-black surfaces, white text,
     grey for structure, white underlined links. Contrast checked for WCAG AA. */
  --bg:           #0a0a0a;  /* page: near-black */
  --fg:           #fafafa;  /* text */
  --fg-muted:     #a3a3a3;  /* muted text */
  --rule:         #222222;  /* hairlines */
  --code-bg:      #161616;  /* terminal / code surface */
  --code-border:  #2c2c2c;  /* terminal window border */
  --term-band:    #202020;  /* lighter inner band (the "you" row) */

  --accent:        #e4e4e7;                    /* code tint (near-white) */
  --accent-bg:     rgba(255, 255, 255, 0.07);  /* inline-code pill tint */
  --accent-2:      #8b8b8b;                    /* grey — $ # markers, dots */
  --accent-2-ring: rgba(255, 255, 255, 0.18);
  --success:       #fafafa;                    /* the ❯ prompt + caret (white) */
  --link:          #fafafa;                    /* white underlined links */
}

* { box-sizing: border-box; }

html {
  /* Baseline enlargement: ~180% of the browser default, so the site reads at a
     comfortable size without zooming. Everything else is in rem/ch/em and scales
     from here; the layout widths below are rem so line lengths stay the same. */
  font-size: 180%;
  -webkit-text-size-adjust: 100%;
  /* Anchor jumps clear the sticky header instead of hiding under it. */
  scroll-padding-top: 5rem;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--fg);
  background: var(--bg);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

main, .site-header, .site-footer {
  max-width: 45rem;
  margin: 0 auto;
  padding: 0 1.25rem;
}

a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
a:hover { text-decoration-thickness: 2px; }
/* Linked code in the chat shows the link colour (else .chat code's tint wins). */
.chat a code { color: var(--link); }

p { margin: 0 0 1rem; }

em { font-style: italic; }
strong { font-weight: 600; }

code {
  font-family: var(--font-mono);
  font-feature-settings: "calt" 1, "liga" 1;
  font-size: 0.88em;
  background: var(--accent-bg);
  padding: 0.08em 0.34em;
  border: 1px solid var(--code-border);
  border-radius: 3px;
  white-space: normal;
  overflow-wrap: anywhere;
}

pre {
  font-family: var(--font-mono);
  font-feature-settings: "calt" 1, "liga" 1;
  font-size: 0.875rem;
  background: var(--code-bg);
  border: 1px solid var(--code-border);
  border-radius: 4px;
  padding: 0.9rem 1rem;
  overflow-x: auto;
  line-height: 1.5;
  position: relative;
  margin: 0.5rem 0 1.25rem;
}

pre code {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  white-space: pre;
  overflow-wrap: normal;
  font-size: inherit;
}

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 3rem 0;
}

h1, h2, h3 {
  font-family: var(--font-body);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 0.75rem;
  letter-spacing: -0.01em;
}

h1 {
  font-size: 2.75rem;
  margin-top: 0.5rem;
  margin-bottom: 0.25rem;
}

h2 {
  font-size: 1.35rem;
  margin-top: 0.25rem;
  margin-bottom: 1rem;
}

h2::before {
  content: "# ";
  color: var(--accent-2);
  font-weight: 400;
}

/* Section headings link to their own anchor (shareable permalinks). */
.heading-link { color: inherit; text-decoration: none; }
.heading-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ─── header ─────────────────────────────────────────────────── */

/* <site-nav> is a transparent wrapper: its inner .site-header lays out as a
   direct child of <body>, preserving sticky positioning and centering. */
site-nav { display: contents; }
.site-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  gap: 1rem;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
}

.wordmark {
  font-family: var(--font-label);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--fg);
  text-decoration: none;
}
.wordmark::before {
  content: "$ ";
  color: var(--accent-2);
  font-weight: 400;
}
.wordmark .kern-tf { margin-left: -0.1em; } /* snug "tf" to match the hero title */

.site-header nav {
  font-family: var(--font-label);
  font-size: 0.875rem;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.site-header nav a { color: var(--fg-muted); }
.site-header nav a:hover { color: var(--accent); }
.site-header nav a.ext { color: var(--accent-2); }
.site-header nav a.active { color: var(--fg); text-decoration-thickness: 2px; }

/* ─── hero ──────────────────────────────────────────────────── */

.hero { padding-top: 1.5rem; }

.hero h1 {
  font-size: 3.5rem;
  margin-bottom: 0;
}
.hero h1::before {
  content: "";   /* no # prefix on h1 */
}
.hero h1 .kern-tf { margin-left: -0.06em; } /* snug "tf" so it reads as a ligature */

/* Easter egg: the leading "b" is a slot-machine reel that spins between b and d
   (botfile / dotfile) on hover or click. Enhanced by script.js; without JS it is
   just a plain "b". */
.hero h1.wm { cursor: pointer; }
.hero h1 .reel {
  display: inline-block;
  overflow: hidden;
  height: 1em;
  line-height: 1;
  vertical-align: -0.13em; /* sit the reel glyph on the wordmark baseline */
  position: relative;
  top: 1.5px; /* nudge down to line up with the following "o" */
}
.hero h1 .reel-track {
  display: block;
  will-change: transform;
}
.hero h1 .reel-track > span {
  display: block;
  height: 1em;
  line-height: 1;
}

.strapline {
  font-family: var(--font-body);
  font-style: italic;
  color: var(--fg-muted);
  margin-top: 0.25rem;
  margin-bottom: 1.5rem;
  font-size: 1.1rem;
}
.strapline code {
  font-style: normal;
}

.tagline {
  font-size: 1.125rem;
  max-width: 60ch;
  margin-bottom: 1.75rem;
}

/* Chat: the hero intro staged as a terminal session between the reader and
   botfile, framed in a terminal window. Monospace throughout (Fira Code); the
   reader's questions are shell prompts, botfile's answers are the output. The
   transcript is fully present in the DOM; the scroll reveal is layered on top. */
.term {
  margin: 1.75rem 0;
  max-width: none; /* fill the content column so its edges align with nav + subtitle */
  border: 1px solid var(--code-border);
  border-radius: 8px;
  background: var(--code-bg);
  overflow: hidden;
}
.term-bar {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.8rem;
  border-bottom: 1px solid var(--code-border);
}
.term-bar .dot {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--rule);
}
.term-bar .dot:nth-child(1) { background: var(--accent); }
.term-bar .dot:nth-child(2) { background: var(--accent-2); }
.term-bar .dot:nth-child(3) { background: var(--success); }
.term-bar .term-title {
  margin-left: 0.35rem;
  font-family: var(--font-label);
  font-size: 0.74rem;
  letter-spacing: 0.02em;
  color: var(--fg-muted);
}

.chat {
  font-family: var(--font-mono);
  font-feature-settings: "calt" 1, "liga" 1;
  font-size: 0.82rem;
  line-height: 1.6;
  padding: 1rem 0 1.15rem; /* horizontal padding lives on the rows, so a row band spans full width */
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.chat .q,
.chat .a {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: 0.8rem;
  align-items: baseline;
  padding: 0 1.1rem;
}
/* The reader's question rows get their own full-width band (an input line). */
.chat .q {
  background: var(--term-band);
  padding-top: 0.2rem;
  padding-bottom: 0.24rem;
}
/* botfile is not an agent, so its answers carry no speaker label. The gutter is
   kept empty and the answer is placed in the second column, aligned under the
   question text (past the "you ❯" prompt). */
.chat .a .who {
  display: none;
}
.chat .a .body {
  grid-column: 2;
}

/* Append-only reveal: the terminal grows one exchange at a time as you scroll
   (driven by JS under html.chat-anim); nothing is overwritten and the history
   stays put, like real terminal output. The .term-scroll wrapper is inert (no
   pin); mobile / reduced-motion / no-JS show the whole transcript in normal
   flow. */
.term-scroll { position: relative; }
.chat .who {
  font-size: 0.78rem;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}
.chat .q .who {
  color: var(--success);
}
.chat .q .who::after {
  content: " \276F"; /* ❯ */
}
.chat .a .who {
  color: var(--accent);
}

.chat .q .body,
.chat .a .body {
  color: var(--fg);
}
.chat .a .body p {
  margin: 0 0 0.5rem;
}
.chat .a .body p:last-child {
  margin-bottom: 0;
}
.chat .a .body .note {
  color: var(--fg-muted);
  border-left: 2px solid var(--rule);
  padding-left: 0.8rem;
}
.chat .a .body ul.sub {
  list-style: none;
  margin: 0.25rem 0 0;
  padding: 0;
}
.chat .a .body ul.sub > li {
  position: relative;
  padding-left: 1.1rem;
  margin: 0 0 0.45rem;
}
.chat .a .body ul.sub > li:last-child {
  margin-bottom: 0;
}
.chat .a .body ul.sub > li::before {
  content: "\2013"; /* – */
  position: absolute;
  left: 0;
  color: var(--accent-2);
}
.chat .a .body ul.sub .note {
  margin: 0.35rem 0 0;
}

/* Numbered workflow steps. */
.chat .a .body ol.steps {
  list-style: none;
  margin: 0.25rem 0 0;
  padding: 0;
  counter-reset: step;
}
.chat .a .body ol.steps > li {
  position: relative;
  padding-left: 1.6rem;
  margin: 0 0 0.45rem;
  counter-increment: step;
}
.chat .a .body ol.steps > li:last-child {
  margin-bottom: 0;
}
.chat .a .body ol.steps > li::before {
  content: counter(step) ".";
  position: absolute;
  left: 0;
  color: var(--accent-2);
}

/* Inline commands/code in an answer get a subtle pill so they stand out from the
   output prose (the agents.md treatment), while the standalone code-ref lines
   stay plain. */
.chat code {
  background: var(--accent-bg);
  border: 1px solid var(--code-border);
  border-radius: 4px;
  padding: 0.03em 0.32em;
  color: var(--fg);
  font-size: 0.95em;
}
.chat .refs code,
.chat pre code {
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--accent);
  font-size: 1em;
}
/* Multi-line code (file trees, config blocks) inside an answer: an inset panel so
   the formatted blob reads as distinct from the prose. */
.chat .a .body pre {
  margin: 0.55rem 0 0.2rem;
  padding: 0.7rem 0.9rem;
  background: var(--term-band);
  border: 1px solid var(--code-border);
  border-radius: 6px;
  white-space: pre;
  overflow-x: auto;
  line-height: 1.5;
}

/* A web-search tool line the agent shows before an answer it looked up. */
.chat .a .body .tool {
  display: inline-block;
  font-size: 0.78rem;
  color: var(--fg-muted);
  border: 1px dashed var(--code-border);
  border-radius: 4px;
  padding: 0.18rem 0.5rem;
}
.chat .a .body .tool .query {
  color: var(--fg);
}

/* Standalone code-reference lines (path lists, skills/review/SKILL.md): the same
   inset panel as the file-tree/config blocks, so a path blob reads as distinct. */
.chat .a .body .refs {
  margin: 0.55rem 0 0.2rem;
  padding: 0.7rem 0.9rem;
  background: var(--term-band);
  border: 1px solid var(--code-border);
  border-radius: 6px;
  color: var(--accent);
  line-height: 1.9;
  overflow-x: auto;
}

/* Citation line under a looked-up answer. */
.chat .a .body .sources {
  font-size: 0.78rem;
  color: var(--fg-muted);
}

/* Trailing "ready for input" prompt with a blinking caret. */
.chat .caret {
  display: inline-block;
  width: 0.5rem;
  height: 1em;
  vertical-align: -0.15em;
  background: var(--success);
  animation: caretBlink 1.1s steps(1) infinite;
}
@keyframes caretBlink {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

/* Chat reveal (progressive enhancement). These rules apply only when JS has set
   html.chat-anim before paint; without it (no JS, or reduced motion) the whole
   transcript is visible at once. script.js reveals each turn in order and marks
   each botfile turn .answered once its typing beat is done. */
/* Not-yet-revealed rows are removed from layout, so the terminal grows one
   exchange at a time. JS grows each revealed row in (a height + opacity
   transition, and the answer grows again from the dots to the full text), so the
   terminal expands smoothly instead of jumping when new content arrives. */
html.chat-anim .chat .q:not(.show),
html.chat-anim .chat .a:not(.show) {
  display: none;
}
/* A shown-but-not-yet-answered botfile turn holds its text back and shows the
   typing dots in its place. */
html.chat-anim .chat .a.show:not(.answered) .body > p,
html.chat-anim .chat .a.show:not(.answered) .body > ul,
html.chat-anim .chat .a.show:not(.answered) .body > ol,
html.chat-anim .chat .a.show:not(.answered) .body > pre {
  display: none;
}

.chat .dots {
  display: none;
  align-items: center;
  gap: 0.28rem;
  height: 1.3em;
}
html.chat-anim .chat .a.show:not(.answered) .dots {
  display: inline-flex;
}
.chat .dots i {
  width: 0.34rem;
  height: 0.34rem;
  border-radius: 50%;
  background: var(--accent);
  animation: dotPulse 1s infinite ease-in-out;
}
.chat .dots i:nth-child(2) { animation-delay: 0.15s; }
.chat .dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes dotPulse {
  0%, 100% { opacity: 0.25; transform: translateY(0); }
  50%      { opacity: 0.9;  transform: translateY(-2px); }
}

/* Belt and suspenders: if the animation class is ever present under reduced
   motion, force the full transcript visible (every row in layout) and silence
   the dots. */
@media (prefers-reduced-motion: reduce) {
  html.chat-anim .chat .q,
  html.chat-anim .chat .a {
    display: grid;
    animation: none;
  }
  html.chat-anim .chat .dots { display: none !important; }
  html.chat-anim .chat .a .body > p,
  html.chat-anim .chat .a .body > ul,
  html.chat-anim .chat .a .body > ol,
  html.chat-anim .chat .a .body > pre { display: revert; }
  .chat .caret,
  .chat .dots i { animation: none; }
}

/* install block */

.install { margin: 1.5rem 0 0; }

.install-note {
  font-family: var(--font-label);
  font-size: 0.85rem;
  color: var(--fg-muted);
  margin-bottom: 0.4rem;
}
.install-note code {
  background: transparent;
  border: 0;
  padding: 0;
  color: inherit;
}

.install pre {
  padding-right: 5rem; /* room for copy button */
  white-space: pre;
}

.install pre code {
  white-space: pre;
}

.copy-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  font-family: var(--font-label);
  font-size: 0.75rem;
  background: var(--bg);
  color: var(--fg-muted);
  border: 1px solid var(--code-border);
  padding: 0.25rem 0.55rem;
  cursor: pointer;
  line-height: 1;
}
.copy-btn:hover { color: var(--accent); border-color: var(--accent); }
.copy-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.copy-btn[data-state="copied"] { color: var(--success); border-color: var(--success); }

/* Install: a second terminal window that "comes in" as the final step of the
   hero reveal, with the install command and a copy button in its title bar.
   After it, the page is a normal document. */
.install-wrap { margin: 0; }
.install-term { margin: 0; }
.install-term + .install-term { margin-top: 1.75rem; }
.install-term .term-bar .copy-btn {
  position: static;
  margin-left: auto;
}
.install-body {
  font-family: var(--font-mono);
  font-feature-settings: "calt" 1, "liga" 1;
  font-size: 0.82rem;
  line-height: 1.6;
  padding: 0.9rem 1.1rem 1rem;
}
.install-cmt {
  color: var(--fg-muted);
  margin: 0 0 0.5rem;
}
.install-cmd-line {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  white-space: pre;
  overflow-x: auto;
}
.install-cmd-line::before {
  content: "$ ";
  color: var(--success);
}
.install-cmd-line code {
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--accent);
}
/* Hidden until revealed, only on the desktop reveal path. */
/* Snippet windows for the walkthrough: the .term frame with a lighter title bar
   (no traffic-light dots; those stay on the hero + install feature windows). The
   former code-label becomes the title; a copy button can sit at the bar's right.
   Config panels are the same window titled with the config path. */
.snippet {
  max-width: none;
  margin: 1rem 0 1.4rem;
}
.snippet .term-bar {
  gap: 0;
}
.snippet .term-title {
  margin-left: 0;
}
.snippet .term-bar .copy-btn {
  position: static;
  margin-left: auto;
}
.snippet pre {
  margin: 0;
  padding: 0.85rem 1.1rem;
  background: transparent;
  border: 0;
  border-radius: 0;
  font-size: 0.82rem;
  line-height: 1.55;
  overflow-x: auto;
  white-space: pre;
}
.snippet pre code {
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--fg);
  white-space: pre;
}

/* ─── sections ──────────────────────────────────────────────── */

section { margin-block: 0; }

ol.problems {
  padding-left: 1.25rem;
  margin: 0 0 1rem;
}
ol.problems li { margin-bottom: 0.9rem; }
ol.problems li::marker {
  font-family: var(--font-label);
  color: var(--fg-muted);
}

ul.targets {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  margin: 0.5rem 0 1rem;
}
ul.targets li {
  font-family: var(--font-label);
  font-size: 0.875rem;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--accent-2-ring);
  background: var(--code-bg);
}
ul.targets li code {
  background: transparent;
  border: 0;
  padding: 0;
  font-size: inherit;
}

.aside {
  font-size: 0.9rem;
  color: var(--fg-muted);
  border-left: 2px solid var(--rule);
  padding-left: 0.85rem;
  margin: 0.5rem 0 0;
}

ul.thanks, ul.cmds {
  padding-left: 1.25rem;
  margin: 0 0 1rem;
}
ul.thanks li, ul.cmds li { margin-bottom: 0.5rem; }
ul.thanks li::marker, ul.cmds li::marker {
  color: var(--fg-muted);
}

/* Model table: term column compact, mono term names */
#model td:first-child {
  white-space: nowrap;
  width: 1%;
}
#model td:first-child strong {
  font-family: var(--font-label);
  font-weight: 700;
}

/* ─── table ─────────────────────────────────────────────────── */

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--code-border);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

th, td {
  text-align: left;
  padding: 0.55rem 0.8rem;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}

thead th {
  font-family: var(--font-label);
  font-weight: 700;
  background: var(--code-bg);
  border-bottom: 1px solid var(--code-border);
  white-space: nowrap;
}

tbody tr:last-child td { border-bottom: 0; }

/* ─── footer ────────────────────────────────────────────────── */

.site-footer {
  font-family: var(--font-label);
  font-size: 0.8rem;
  color: var(--fg-muted);
  padding-top: 2rem;
  padding-bottom: 3rem;
  border-top: 1px solid var(--rule);
  margin-top: 3rem;
}
.site-footer .footer-mark { color: var(--fg); }
.site-footer .tag { letter-spacing: 0.02em; }
.site-footer a { color: var(--fg-muted); }
.site-footer a:hover { color: var(--accent); }

/* ─── tenets page ───────────────────────────────────────────── */

.tenets { margin: 0; }
.tenet {
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  gap: 1rem;
  align-items: baseline;
  margin: 0 0 1.15rem;
  scroll-margin-top: 1.5rem;
}
.tenet:last-child { margin-bottom: 0; }
.tenet-n {
  font-family: var(--font-label);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--fg-muted);
  text-align: right;
}
.tenet-body > p { margin: 0.6rem 0 0; }
.tenet-body > p:first-child { margin-top: 0; }
.tenet-body strong { font-weight: 700; color: var(--fg); }
.tenet-list {
  margin: 0.55rem 0 0;
  padding-left: 1.2rem;
}
.tenet-list li { margin-bottom: 0.5rem; }
.tenet-list li:last-child { margin-bottom: 0; }
.tenet-body pre { margin: 0.6rem 0 0; }

/* ─── matrix page ───────────────────────────────────────────── */

.badge {
  display: inline-block;
  font-family: var(--font-label);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--fg-muted);
  border: 1px solid var(--code-border);
  border-radius: 4px;
  padding: 0.04rem 0.35rem;
  white-space: nowrap;
}

/* ─── mobile ────────────────────────────────────────────────── */

@media (max-width: 560px) {
  /* Ease the baseline enlargement back on phones, where 180% is too large. */
  html { font-size: 125%; }
  main, .site-header, .site-footer { padding: 0 1rem; }
  .hero h1 { font-size: 2.75rem; }
  h1 { font-size: 2.25rem; }
  h2 { font-size: 1.2rem; }
  .tagline { font-size: 1rem; }
  pre { font-size: 0.8rem; }
  .site-header nav { gap: 0.75rem; font-size: 0.8rem; }
}