/* Palette + typography mirror landing/styles.css so the blog feels like
   the same site. Kept independent so the two can evolve separately. */

:root {
  --bg: #f4ede0; --panel: #eee5d3;
  --fg: #1f1a14; --dim: #847b6b; --rule: #d8cdb6;
  --accent: #c45a2c; --green: #5a8a4a;
}
[data-theme="dark"] {
  --bg: #000000; --panel: #141414;
  --fg: #ece2cf; --dim: #8a7e6e; --rule: #262626;
  --accent: #e07b5a; --green: #8eb86c;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg); color: var(--fg);
  font-family: "JetBrains Mono","IBM Plex Mono",ui-monospace,monospace;
  font-size: 14px; line-height: 1.65;
  min-height: 100vh; padding: 1.25rem 1.5rem 6rem;
  transition: background-color .25s ease, color .25s ease;
}

/* ── topbar / nav ─────────────────────────────────────────────── */
.topbar {
  max-width: 880px; margin: 0 auto 3rem;
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  font-size: .8rem; color: var(--dim);
  border-bottom: 1px solid var(--rule); padding-bottom: .85rem;
}
.page-nav { display: flex; gap: 1rem; }
.page-nav a {
  color: var(--dim); text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: color .15s ease, border-color .15s ease;
}
.page-nav a:hover { color: var(--accent); border-color: var(--accent); }
.topbar .spacer { flex: 1; }
.toggle {
  background: none; border: 1px solid var(--rule); color: var(--dim);
  font-family: inherit; font-size: .75rem; cursor: pointer;
  padding: .25rem .6rem; border-radius: 999px;
  text-transform: uppercase; letter-spacing: .1em;
  transition: color .15s ease, border-color .15s ease;
}
.toggle:hover { border-color: var(--accent); color: var(--accent); }
.toggle .dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--fg); margin-right: .45rem; transform: translateY(1px);
}
[data-theme="dark"] .toggle .dot { background: var(--bg); border: 1px solid var(--fg); }

main { max-width: 880px; margin: 0 auto; }

/* ── terminal prompt row (matches landing) ────────────────────── */
.prompt-row {
  color: var(--dim); font-size: .85rem; margin: 0 0 .75rem;
}
.prompt-row .g { color: var(--green); }
.prompt-row .b { color: var(--accent); }

/* ── blog index ───────────────────────────────────────────────── */
.blog-index h1 {
  font-size: clamp(2rem, 5vw, 2.4rem);
  font-weight: 700; margin: 0 0 1.5rem;
  letter-spacing: -.015em;
}
.post-list {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 1.25rem;
}
.post-list .post {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 1rem 1.25rem;
  transition: border-color .15s ease, transform .15s ease;
}
.post-list .post:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}
.post-list .ascii-thumb {
  margin: 0 0 .75rem;
  color: var(--accent);
  font-size: .7rem;
  line-height: 1.1;
  white-space: pre;
  overflow-x: hidden;
  opacity: .85;
}
.post-list .post h2 {
  margin: 0 0 .35rem;
  font-size: 1rem; font-weight: 600;
}
.post-list .post h2 a {
  color: var(--fg); text-decoration: none;
}
.post-list .post h2 a:hover { color: var(--accent); }
.post-list .post .meta {
  margin: 0 0 .5rem;
  color: var(--dim);
  font-size: .75rem; text-transform: uppercase; letter-spacing: .1em;
}
.post-list .post .excerpt,
.post-list .post .summary {
  margin: 0;
  color: var(--fg); font-size: .9rem;
}
.post-list .post .summary {
  font-style: italic;
  color: var(--dim);
}
.blog-index .empty {
  color: var(--dim); font-style: italic;
}

/* ── single post (fastfetch-style header) ─────────────────────── */
article.post header {
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--rule);
}
article.post .fastfetch .ff-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.5rem;
  align-items: start;
}
@media (max-width: 600px) {
  article.post .fastfetch .ff-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}
article.post .fastfetch .ff-art {
  color: var(--accent);
  font-size: .7rem;
  line-height: 1.1;
  margin: 0;
  white-space: pre;
  overflow-x: hidden;
  opacity: .9;
}
article.post .fastfetch .ff-meta {
  min-width: 0;
}
article.post .fastfetch .ff-meta h1 {
  font-size: clamp(1.6rem, 4vw, 2rem);
  font-weight: 700; margin: 0 0 .85rem;
  letter-spacing: -.015em;
}
article.post .fastfetch dl {
  margin: 0;
  display: grid;
  gap: .3rem;
}
article.post .fastfetch .ff-row {
  display: grid;
  grid-template-columns: 4rem 1fr;
  gap: .75rem;
  align-items: baseline;
  font-size: .8rem;
}
article.post .fastfetch dt {
  color: var(--accent);
  text-transform: lowercase;
  font-weight: 500;
}
article.post .fastfetch dd {
  margin: 0;
  color: var(--fg);
}
article.post .fastfetch .ff-draft {
  color: var(--dim);
  font-style: italic;
}
article.post .body {
  max-width: 65ch;
}
article.post .body h1,
article.post .body h2,
article.post .body h3 {
  margin: 1.75rem 0 .75rem;
  letter-spacing: -.01em;
}
article.post .body h1 { font-size: 1.4rem; font-weight: 700; }
article.post .body h2 { font-size: 1.15rem; font-weight: 700; color: var(--fg); }
article.post .body h3 { font-size: 1rem; font-weight: 600; color: var(--fg); }
article.post .body p { margin: 0 0 1rem; }
article.post .body ul,
article.post .body ol { margin: 0 0 1rem; padding-left: 1.4rem; }
article.post .body li { margin: .2rem 0; }
article.post .body li::marker { color: var(--accent); }
article.post .body a {
  color: var(--accent); text-decoration: none;
  border-bottom: 1px solid var(--rule);
}
article.post .body a:hover { border-color: var(--accent); }
article.post .body code {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: .05rem .3rem;
  font-size: .85em;
}
article.post .body pre {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: .85rem 1rem;
  overflow-x: auto;
  font-size: .85rem;
}
article.post .body pre code {
  background: none; border: none; padding: 0;
}

/* Syntax highlighting (chroma classes — see internal/markdown). */
article.post .body .chroma .k,    /* keyword */
article.post .body .chroma .kc,   /* keyword: constant */
article.post .body .chroma .kd,   /* keyword: declaration */
article.post .body .chroma .kn,   /* keyword: namespace */
article.post .body .chroma .kp,   /* keyword: pseudo */
article.post .body .chroma .kr,   /* keyword: reserved */
article.post .body .chroma .kt {  /* keyword: type */
  color: var(--accent);
}
article.post .body .chroma .s,    /* string */
article.post .body .chroma .s1,
article.post .body .chroma .s2,
article.post .body .chroma .sb,
article.post .body .chroma .sc,
article.post .body .chroma .sd,
article.post .body .chroma .se,
article.post .body .chroma .sh,
article.post .body .chroma .si,
article.post .body .chroma .sx,
article.post .body .chroma .sr {
  color: var(--green);
}
article.post .body .chroma .c,    /* comment */
article.post .body .chroma .c1,
article.post .body .chroma .cm,
article.post .body .chroma .ch,
article.post .body .chroma .cp,
article.post .body .chroma .cs {
  color: var(--dim);
  font-style: italic;
}
article.post .body .chroma .m,    /* number */
article.post .body .chroma .mb,
article.post .body .chroma .mf,
article.post .body .chroma .mh,
article.post .body .chroma .mi,
article.post .body .chroma .il,
article.post .body .chroma .mo {
  color: var(--accent);
  opacity: .8;
}
article.post .body .chroma .nf,   /* name: function */
article.post .body .chroma .nc {  /* name: class */
  color: var(--fg);
  font-weight: 600;
}
article.post .body .chroma .nb {  /* name: builtin */
  color: var(--accent);
  opacity: .9;
}
article.post .body blockquote {
  margin: 0 0 1rem;
  padding: .5rem 1rem;
  border-left: 3px solid var(--accent);
  color: var(--dim);
}
article.post .back {
  margin-top: 2.5rem;
  font-size: .85rem;
}
article.post .back a {
  color: var(--dim); text-decoration: none;
}
article.post .back a:hover { color: var(--accent); }

/* ── footer ───────────────────────────────────────────────────── */
footer {
  max-width: 880px;
  margin: 4rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  color: var(--dim);
  font-size: .85rem;
}