:root {
  --bg: #fdfcf8;
  --ink: #1a1816;
  --ink-soft: #807467;
  --rule: #e8e2d0;
  --accent: #b15a1a;
  --code-bg: #f3eedc;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #15140f;
    --ink: #ece6d4;
    --ink-soft: #9c9078;
    --rule: #2f2b22;
    --accent: #e89456;
    --code-bg: #1f1c14;
  }
}

html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); }
body {
  font-family: "Iowan Old Style", Charter, "Hoefler Text", Georgia, ui-serif, serif;
  font-size: 18px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.mono, code, pre, .post-index .date, header.site .brand, header.site nav, article .meta, footer.site {
  font-family: "Berkeley Mono", "JetBrains Mono", "SF Mono", "iA Writer Mono S", ui-monospace, Menlo, monospace;
}

.wrap { max-width: 660px; margin: 0 auto; padding: 64px 28px 120px; }

/* Header */
  header.site { padding-bottom: 20px; border-bottom: 1px dashed var(--rule); margin-bottom: 24px; overflow: hidden; }
header.site .brand { font-size: 14px; color: var(--ink); text-decoration: none; letter-spacing: -0.01em; float: left; }
header.site .brand::before { content: "$ "; color: var(--accent); }
header.site .brand::after { content: "_"; color: var(--accent); animation: blink 1.2s infinite; }
@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
header.site nav { float: right; font-size: 13px; }
header.site nav a { margin-left: 18px; color: var(--ink-soft); text-decoration: none; }
header.site nav a:hover { color: var(--accent); }
header.site nav a::before { content: "/"; color: var(--rule); margin-right: 2px; }

/* Intro */
.intro { color: var(--ink-soft); font-style: italic; margin: 0 0 40px 0; max-width: 480px; font-size: 16px; font-family: "Iowan Old Style", Charter, Georgia, ui-serif, serif; }

/* Post index — summary list */
.post-index { list-style: none; padding: 0; margin: 0 0 72px 0; }
.post-index li.post-summary { padding: 28px 0 32px; border-bottom: 1px dashed var(--rule); }
.post-index li.post-summary:first-child { padding-top: 4px; }
.post-index li.post-summary:last-child { border-bottom: none; }

.post-summary-title { font-size: 24px; line-height: 1.25; margin: 0 0 6px 0; font-weight: 600; font-family: "Iowan Old Style", Charter, Georgia, ui-serif, serif; }
.post-summary-title::before { display: none; } /* override article h2::before */
.post-summary-title a { color: var(--ink); text-decoration: none; }
.post-summary-title a:hover { color: var(--accent); text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 4px; }

.post-summary-date { font-size: 12.5px; color: var(--ink-soft); letter-spacing: -0.01em; margin-bottom: 14px; }
.post-summary-date::before { content: "// "; color: var(--accent); }

.post-summary-text { color: var(--ink-soft); margin: 0 0 14px 0; font-size: 16.5px; line-height: 1.65; font-family: "Iowan Old Style", Charter, Georgia, ui-serif, serif; }

.post-summary-more { font-size: 12.5px; color: var(--ink-soft); text-decoration: none; }
.post-summary-more:hover { color: var(--accent); }

/* Article */
article h1 { font-size: 32px; line-height: 1.25; margin: 0 0 6px 0; font-weight: 600; font-family: "Iowan Old Style", Charter, Georgia, ui-serif, serif; }
article .meta { font-size: 12.5px; color: var(--ink-soft); margin-bottom: 44px; }
article .meta::before { content: "// "; color: var(--accent); }
article p { margin: 0 0 22px 0; }
article h2 { font-size: 20px; margin: 52px 0 14px 0; font-weight: 600; font-family: "Iowan Old Style", Charter, Georgia, ui-serif, serif; }
article h2::before { content: "## "; color: var(--accent); font-family: "Berkeley Mono", "JetBrains Mono", ui-monospace, Menlo, monospace; opacity: 0.7; }
article h3 { font-size: 17px; margin: 36px 0 10px 0; font-weight: 600; font-family: "Iowan Old Style", Charter, Georgia, ui-serif, serif; }
article h3::before { content: "### "; color: var(--accent); font-family: "Berkeley Mono", "JetBrains Mono", ui-monospace, Menlo, monospace; opacity: 0.7; }
article blockquote { border-left: 2px solid var(--accent); margin: 28px 0; padding-left: 20px; color: var(--ink-soft); font-style: italic; }
article ul, article ol { margin: 0 0 22px 0; padding-left: 24px; }
article li { margin-bottom: 8px; }
article a { color: var(--accent); text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }
article a:hover { text-decoration-style: solid; }
article img { max-width: 100%; height: auto; border: 1px solid var(--rule); border-radius: 4px; margin: 28px 0; }
article hr { border: none; border-top: 1px dashed var(--rule); margin: 44px 0; }

/* Code */
code { font-size: 0.85em; background: var(--code-bg); padding: 1px 6px; border-radius: 3px; }
pre { background: var(--code-bg); padding: 18px 20px; border-radius: 6px; overflow-x: auto; font-size: 13.5px; line-height: 1.6; border: 1px solid var(--rule); }
pre code { background: none; padding: 0; font-size: inherit; }
.highlight { background: var(--code-bg); }
.highlight pre { border: 1px solid var(--rule); margin: 0; }

/* Rouge syntax highlighting (subtle, fits the palette) */
.highlight .c, .highlight .c1, .highlight .cm, .highlight .cp, .highlight .cs { color: var(--ink-soft); font-style: italic; }
.highlight .k, .highlight .kc, .highlight .kd, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kt { color: var(--accent); }
.highlight .s, .highlight .s1, .highlight .s2, .highlight .sb, .highlight .sc, .highlight .sd, .highlight .se, .highlight .sh, .highlight .si, .highlight .sx, .highlight .sr, .highlight .ss { color: #6a8a3a; }
@media (prefers-color-scheme: dark) {
  .highlight .s, .highlight .s1, .highlight .s2, .highlight .sr, .highlight .ss { color: #9bc068; }
}
.highlight .nb, .highlight .nc, .highlight .nf, .highlight .nn, .highlight .nt { color: var(--ink); }
.highlight .mi, .highlight .mf, .highlight .mh, .highlight .mo { color: #8d6e26; }
@media (prefers-color-scheme: dark) {
  .highlight .mi, .highlight .mf, .highlight .mh, .highlight .mo { color: #d9a85a; }
}
.highlight .o { color: var(--ink); }
.highlight .err { color: #c0392b; }

/* Separators */
hr.posts { border: none; border-top: 1px dashed var(--rule); margin: 56px 0; }

/* Footer */
footer.site { color: var(--ink-soft); font-size: 12px; padding-top: 36px; border-top: 1px dashed var(--rule); display: flex; justify-content: space-between; margin-top: 80px; }
footer.site .heart { color: var(--accent); }
footer.site a { color: var(--ink-soft); text-decoration: none; }
footer.site a:hover { color: var(--accent); }

/* Pagination / post nav */
.post-nav { display: flex; justify-content: space-between; gap: 20px; margin-top: 72px; padding-top: 28px; border-top: 1px dashed var(--rule); font-size: 13px; }
.post-nav a { color: var(--ink-soft); text-decoration: none; }
.post-nav a:hover { color: var(--accent); }
.post-nav .prev::before { content: "← "; }
.post-nav .next::after { content: " →"; }

/* Responsive */
@media (max-width: 640px) {
  .wrap { padding: 40px 20px 80px; }
  body { font-size: 17px; }
  article h1 { font-size: 26px; }
  .post-summary-title { font-size: 21px; }
  .post-summary-text { font-size: 15.5px; }
  header.site nav a { margin-left: 12px; }
}

/* Mermaid diagrams — center the SVG in the article column and drop the code-block styling */
pre.mermaid {
  text-align: center;
  background: transparent;
  border: none;
  padding: 0;
  margin: 28px 0;
  overflow: visible;
}
pre.mermaid svg {
  display: inline-block;
  max-width: 100%;
  height: auto;
}