/* Two voices, kept visibly apart:
     .human  — words the author wrote by hand (serif, paper)
     .llm    — words Claude wrote (monospace, tinted)
   The draft tried several treatments and palettes; this is the one kept. */

:root {
  --paper: #fbf9f4;
  --ink: #1d1c1a;
  --muted: #6b675f;
  --rule: #d9d4c7;
  --link: #8a3b12;
  --llm-bg: #eaf0ea;
  --llm-ink: #1f2b24;
  --llm-rule: #9fb5a6;
  --llm-accent: #2f6b55;
  --todo: #b3261e;
  --todo-bg: #fde8e4;
  --serif: "Times New Roman", Times, "Liberation Serif", "Nimbus Roman", serif;
  --mono: Monaco, Menlo, "DejaVu Sans Mono", "Liberation Mono", ui-monospace, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #171614; --ink: #e8e4da; --muted: #a29d92; --rule: #3a3731; --link: #f0a070;
    --llm-bg: #1b241f; --llm-ink: #cfe0d4; --llm-rule: #3f5a4b; --llm-accent: #7fc4a6;
    --todo: #ff8a80; --todo-bg: #3a1d1a;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #171614; --ink: #e8e4da; --muted: #a29d92; --rule: #3a3731; --link: #f0a070;
  --llm-bg: #1b241f; --llm-ink: #cfe0d4; --llm-rule: #3f5a4b; --llm-accent: #7fc4a6;
  --todo: #ff8a80; --todo-bg: #3a1d1a;
  color-scheme: dark;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); padding: 0 16px 80px; }
.wrap { max-width: 680px; margin: 0 auto; padding-top: 48px; }
a { color: var(--link); }
img, video { max-width: 100%; }

/* ---- the human voice ---- */
.human, blockquote.human { font-family: var(--serif); font-size: 20px; line-height: 1.55; }
.human h1 { font-size: 2.1rem; line-height: 1.15; margin: 0 0 .6em; }
.human h1:not(:first-child) { font-size: 1.6rem; margin-top: 2em; }
.human h2 { font-size: 1.25rem; margin-top: 1.8em; }
.human code { font-size: .8em; }
/* Commands are copied, so scroll rather than wrap: a wrapped shell line is
   ambiguous about where the line break is. The box marks where it starts and
   ends, and keeps long lines out of the sidenote margin. */
.human pre { background: color-mix(in srgb, var(--rule) 30%, var(--paper)); border: 1px solid var(--rule); border-radius: 6px; padding: 12px 14px; overflow-x: auto; line-height: 1.4; }
.human pre code { font-family: var(--mono); font-size: 14px; }
video.clip { display: block; margin: .4em auto; max-height: min(70vh, 480px); border-radius: 10px; }

/* ---- the machine voice ---- */
.llm { font-family: var(--mono); color: var(--llm-ink); }
.llm-inline { font-size: .74em; }
/* Claude's notes are footnotes: a sidenote in the margin on wide screens, an
   item in the bottom list on phones. Same voice in both places. */
.llm-note { font-size: 13px; line-height: 1.6; padding: 10px 12px; }
.llm-note p { margin: 0; display: inline; }
.footnote li.llm-note { margin: .6em 0; }
sup.llm-ref a { font-family: var(--mono); color: var(--llm-accent); }
.llm-label { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--llm-accent); }
.llm-page { font-size: 15px; line-height: 1.65; }
.llm-page h1 { font-size: 1.5rem; line-height: 1.25; }
.llm-page h2 { font-size: 1.1rem; margin-top: 2em; color: var(--llm-accent); }
.llm table { border-collapse: collapse; width: 100%; font-size: 13px; margin: 1em 0; display: block; overflow-x: auto; }
.llm th, .llm td { text-align: left; vertical-align: top; padding: 6px 8px; border-bottom: 1px solid var(--llm-rule); }
.llm pre { background: color-mix(in srgb, var(--llm-bg) 60%, var(--paper)); border: 1px solid var(--llm-rule); padding: 12px; overflow-x: auto; font-size: 13px; }
.llm-page blockquote.human { margin: 1em 0; padding: 4px 0 4px 16px; border-left: 3px solid var(--rule); color: var(--ink); font-size: 18px; }
.llm-page blockquote.human p { margin: .3em 0; }

.provenance { font-family: var(--mono); font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--rule); padding-bottom: 12px; margin-bottom: 24px; }

/* ---- draft-only markers ---- */
s.todo { font-family: var(--mono); font-size: .62em; color: var(--todo); background: var(--todo-bg); padding: 0 4px; border-radius: 3px; text-decoration: line-through; margin-right: 4px; }
.todo-open { font-family: var(--mono); font-size: .62em; color: var(--todo); border: 1px dashed var(--todo); padding: 0 4px; border-radius: 3px; margin-left: 4px; }
.review table { font-family: var(--mono); font-size: 13px; border-collapse: collapse; }
.review td, .review th { border-bottom: 1px solid var(--rule); padding: 6px; vertical-align: top; text-align: left; }
.review .wrap { max-width: 1100px; }
.st-filled { color: var(--llm-accent); } .st-partial { color: #b07a00; } .st-needs-author { color: var(--todo); }

/* Claude's notes: a quiet rule beside them, no fill. (The terminal and ink
   treatments were tried in the draft and dropped.) */
.llm-note { border-left: 2px solid var(--llm-rule); padding: 2px 0 2px 12px; }
.llm-inline { border-bottom: 1px dotted var(--llm-accent); }

/* Terminal lines the author pasted stay in a quote (they're the author's), but in mono. */
blockquote.human code { font-family: var(--mono); font-size: 13px; overflow-wrap: anywhere; }
/* The author's photos sit in the human column, full width, no machine styling. */
img.photo { display: block; width: 100%; height: auto; margin: .8em 0; border-radius: 8px; }

/* A photo and its caption, opted into from the draft with `{: .picture-text}` on a
   paragraph that starts with the photo's placeholder. The height cap keeps a
   portrait shot from filling more than a screen; a capped, narrower photo stays
   on the left edge so it lines up with its caption. */
.human p.picture-text { font-size: 16px; line-height: 1.45; color: var(--muted); font-style: italic; margin: 1.6em 0 2em; }
.human p.picture-text img.photo { width: auto; max-width: 100%; max-height: 75vh; margin: 0 0 .6em; }

/* ---- footnotes: the author's, so serif; sidenotes in the margin when there is one ----
   Phones get the plain list at the bottom (superscript jumps down, ↩ jumps back).
   Wide screens hide that list and show the copy build.py puts beside the paragraph. */
.human sup a { text-decoration: none; font-size: .75em; padding: 0 2px; }
.footnote { font-size: 16px; color: var(--muted); margin-top: 3em; }
.footnote li:target { background: var(--llm-bg); }
.footnote-backref { text-decoration: none; margin-left: 4px; }
.sidenote { display: none; font-family: var(--serif); font-size: 15px; line-height: 1.45; color: var(--muted); }
.sidenote-num { font-size: .75em; vertical-align: super; margin-right: 4px; }
@media (min-width: 1180px) {
  body.post .wrap { max-width: 1040px; padding-right: 360px; }
  body.post .sidenote { display: block; float: right; clear: right; width: 320px; margin: .3em -360px 1em 0; text-align: left; font-weight: 400; }
  body.post li .sidenote { margin-right: -360px; }
  body.post blockquote .sidenote { margin-right: -400px; }
  body.post .footnote { display: none; }
  body.post sup a { pointer-events: none; color: var(--muted); }
  /* Hovering a marker lights up its sidenote, and the reverse, so it's clear
     which note belongs where when several stack up in the margin. Works because
     build.py always emits the sidenote as the marker's next sibling. The link
     ignores the pointer (above), so the hover lands on the <sup> itself. */
  body.post sup { border-radius: 3px; transition: background-color .15s; }
  body.post .sidenote { border-radius: 4px; outline: 2px solid transparent; outline-offset: 5px; transition: outline-color .15s, color .15s; }
  body.post sup:hover + .sidenote, body.post .sidenote:hover { outline-color: color-mix(in srgb, var(--link) 55%, transparent); }
  body.post sup:hover + .sidenote:not(.llm), body.post .sidenote:not(.llm):hover { color: var(--ink); }
  body.post sup:hover, body.post sup:has(+ .sidenote:hover) { background: color-mix(in srgb, var(--link) 18%, transparent); }
  body.post sup:hover a, body.post sup:has(+ .sidenote:hover) a { color: var(--link); }
}

/* Claude's monospace is Monaco, which only exists on macOS; elsewhere the
   --mono stack falls to Menlo/DejaVu. No web font is bundled. */

/* Code inside Claude's text is already monospace; don't shrink it like code in the prose. */
.human .llm code, .llm code { font-size: 1em; font-family: inherit; }
.sidenote.llm-note { font-family: var(--mono); color: var(--llm-ink); }
.sidenote .llm-label, .footnote .llm-label { margin-right: 6px; }
@media (min-width: 1180px) { body.post sup.llm-ref a { color: var(--llm-accent); } }
.pl-drifted { color: #b07a00; } .pl-unplaced { color: var(--todo); font-weight: 700; } .pl-resolved { color: var(--muted); }

/* The author's opening disclaimer: a quiet framed note, still in the author's
   serif voice. Opt-in from the draft with `{: .disclaimer }` under the paragraph. */
.human .disclaimer { font-size: 16px; line-height: 1.5; color: var(--muted); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 12px 0; margin: 0 0 2em; font-style: italic; }
.human .disclaimer .sidenote { font-style: normal; }

/* ---- .prompt: something the author typed into Claude Code ----
   Opt-in from the draft with `{: .prompt }` straight under the paragraph (also
   works on the last line of a > blockquote, or on a paragraph that is just
   `inline code`). Drawn like the Claude Code input box: a terminal panel, a
   rounded border, and the ">" prompt marker. Same in light and dark mode, the
   way a terminal is. The author's line breaks are kept, as typed. */
:root { --term-bg: #1d1d1b; --term-ink: #e8e6df; --term-dim: #8b8a85; --term-border: #5c5b57; --term-accent: #d97757; }
.prompt {
  position: relative; margin: 1.2em 0; padding: 12px 16px 12px 36px;
  font-family: var(--mono); font-size: 14px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere;
  color: var(--term-ink); background: var(--term-bg);
  border: 1px solid var(--term-border); border-radius: 8px;
  box-shadow: 0 1px 0 rgb(255 255 255 / .04) inset, 0 6px 18px rgb(0 0 0 / .18);
}
.prompt::before { content: ">"; position: absolute; left: 16px; top: 12px; color: var(--term-dim); font-weight: 700; }
.prompt code { font: inherit; color: inherit; background: none; padding: 0; white-space: inherit; }
.prompt a { color: var(--term-accent); }
/* A prompt quoted with > : let the panel be the quote, not a box in an indented quote. */
blockquote:has(> p.prompt) { margin-left: 0; margin-right: 0; padding: 0; border: 0; }
blockquote:has(> p.prompt) > p:not(.prompt) { display: none; }
/* Narrow screens: no shadow, slightly smaller type so long words don't overflow. */
@media (max-width: 520px) { .prompt { font-size: 13px; padding-left: 30px; box-shadow: none; } .prompt::before { left: 12px; } }

/* ---- following and the blog around the post ----
   The follow buttons are the author's, so serif; quiet pills that sit under
   the article (and its bottom footnote list on phones). */
.follow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 3em 0 1em; padding-top: 1.2em; border-top: 1px solid var(--rule); font-family: var(--serif); font-size: 16px; }
.follow-label { color: var(--muted); font-style: italic; margin-right: 4px; }
.follow-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border: 1px solid var(--rule); border-radius: 999px; color: var(--ink); text-decoration: none; transition: border-color .15s, color .15s; }
.follow-btn:hover, .follow-btn:focus-visible { border-color: var(--link); color: var(--link); }
.follow-at { font-weight: 700; }
.site-nav { font-family: var(--serif); font-size: 15px; margin-bottom: 2em; }
.site-nav a { color: var(--muted); text-decoration: none; }
.site-nav a:hover { color: var(--link); }
body.index { font-family: var(--serif); }
.blog-head h1 { font-size: 2rem; margin-bottom: .2em; }
.blog-head p { color: var(--muted); font-size: 18px; margin-top: 0; }
.post-list { list-style: none; padding: 0; margin: 2.5em 0; }
.post-list li { margin-bottom: 1.8em; }
.post-list time { display: block; color: var(--muted); font-size: 14px; }
.post-list a { font-size: 22px; }
.post-list p { margin: .3em 0 0; color: var(--muted); font-size: 17px; line-height: 1.5; }