/* blog.css — Catppuccin Mocha. Article lives INSIDE the same terminal window
   as the home page (monospace chrome), but body copy stays sans-serif so long
   posts read well. Self-contained palette (no dependency on index.html). */
:root {
  --ctp-rosewater:#f5e0dc; --ctp-pink:#f5c2e7; --ctp-mauve:#cba6f7; --ctp-red:#f38ba8;
  --ctp-peach:#fab387; --ctp-yellow:#f9e2af; --ctp-green:#a6e3a1; --ctp-teal:#94e2d5;
  --ctp-sky:#89dceb; --ctp-sapphire:#74c7ec; --ctp-blue:#89b4fa; --ctp-lavender:#b4befe;
  --ctp-text:#cdd6f4; --ctp-subtext1:#bac2de; --ctp-subtext0:#a6adc8;
  --ctp-overlay0:#6c7086; --ctp-surface2:#585b70; --ctp-surface1:#45475a;
  --ctp-surface0:#313244; --ctp-base:#1e1e2e; --ctp-mantle:#181825; --ctp-crust:#11111b;
  --mono:'Courier New',Courier,monospace;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  background:var(--ctp-base); color:var(--ctp-text);
  font-family:var(--mono); line-height:1.6; -webkit-font-smoothing:antialiased;
  min-height:100vh; padding:20px;
}

/* ── terminal window (matches the home page) ── */
.terminal-container { max-width:1200px; margin:0 auto; }
.terminal-header {
  background:var(--ctp-mantle); padding:10px 15px; border-radius:8px 8px 0 0;
  display:flex; align-items:center; gap:8px;
  border:1px solid var(--ctp-surface0); border-bottom:none;
}
.tbtn { width:12px; height:12px; border-radius:50%; }
.tbtn.close { background:var(--ctp-red); }
.tbtn.min { background:var(--ctp-yellow); }
.tbtn.max { background:var(--ctp-green); }
.terminal-title { margin-left:10px; color:var(--ctp-subtext0); font-size:12px; }
.header-home-link {
  margin-left:auto; color:var(--ctp-mauve); text-decoration:none; font-size:12px;
  padding:2px 12px; border:1px solid var(--ctp-surface1); border-radius:4px;
  transition:background .15s, color .15s; white-space:nowrap;
}
.header-home-link:hover { background:var(--ctp-surface0); color:var(--ctp-lavender); }
.terminal-body {
  background:var(--ctp-crust); border:1px solid var(--ctp-surface0);
  border-radius:0 0 8px 8px; padding:30px 36px 26px;
}

/* prompt bits (monospace, echo the home terminal) */
.prompt { white-space:nowrap; }
.prompt .user { color:var(--ctp-mauve); }
.prompt .at, .prompt .path { color:var(--ctp-text); }
.prompt .host { color:var(--ctp-blue); }
.prompt .path { color:var(--ctp-yellow); }
.prompt .sym { color:var(--ctp-green); }

.crumbs { font-family:var(--mono); font-size:13px; color:var(--ctp-subtext0); margin-bottom:26px; }
.crumbs a { color:var(--ctp-sapphire); text-decoration:none; }
.crumbs a:hover { text-decoration:underline; }
.crumbs .slash { color:var(--ctp-overlay0); margin:0 4px; }
.crumbs .crumb-here { color:var(--ctp-peach); }
.cmd-line { font-family:var(--mono); color:var(--ctp-text); margin-bottom:16px; }

/* ── article ── */
.post { max-width:720px; margin:0 auto; }
.post-title {
  font-family:var(--mono); font-size:1.7rem; line-height:1.3; font-weight:bold;
  color:var(--ctp-lavender); margin:6px 0 8px;
}
.post-meta, .post-card-meta { font-family:var(--mono); font-size:13px; margin-bottom:26px; }
.post-date { color:var(--ctp-yellow); margin-right:10px; }
.tag {
  display:inline-block; background:var(--ctp-surface0); color:var(--ctp-subtext1);
  padding:1px 8px; margin:0 4px 4px 0; border-radius:4px; font-size:12px; font-family:var(--mono);
}
.blog-intro { color:var(--ctp-subtext0); margin:18px 0 30px; font-family:var(--sans); }
.blog-intro a { color:var(--ctp-sapphire); }

/* body copy: sans-serif for readability */
.post p, .post li, .post blockquote { font-family:var(--sans); }
.post h2 {
  font-family:var(--mono); color:var(--ctp-peach); font-size:1.35rem; font-weight:bold;
  margin:40px 0 12px; padding-top:6px; border-top:1px solid var(--ctp-surface0);
}
.post h2::before { content:"## "; color:var(--ctp-overlay0); }
.post h3 { font-family:var(--mono); color:var(--ctp-teal); font-size:1.12rem; margin:28px 0 10px; }
.post h3::before { content:"### "; color:var(--ctp-overlay0); }
.post p { margin:16px 0; color:var(--ctp-text); }
.post ul, .post ol { margin:16px 0 16px 22px; }
.post li { margin:7px 0; }
.post li::marker { color:var(--ctp-green); }
.post strong { color:var(--ctp-text); font-weight:700; }
.post em { color:var(--ctp-subtext1); }
.post a { color:var(--ctp-sapphire); text-decoration:underline; text-underline-offset:2px; }
.post blockquote {
  border-left:3px solid var(--ctp-mauve); padding:2px 16px; margin:20px 0;
  color:var(--ctp-subtext0); background:var(--ctp-mantle);
}

/* code (monospace, naturally) */
.post code {
  font-family:var(--mono); font-size:.92em;
  background:var(--ctp-surface0); color:var(--ctp-peach); padding:2px 6px; border-radius:4px;
}
.post pre {
  background:var(--ctp-mantle); border:1px solid var(--ctp-surface0); border-radius:8px;
  padding:16px; overflow-x:auto; margin:20px 0; line-height:1.5;
}
.post pre code { background:none; color:var(--ctp-text); padding:0; font-size:.85rem; }

/* tables */
.post table { border-collapse:collapse; width:100%; margin:22px 0; font-size:.9rem; font-family:var(--sans); }
.post th, .post td { border:1px solid var(--ctp-surface0); padding:8px 12px; text-align:left; }
.post th { background:var(--ctp-mantle); color:var(--ctp-sapphire); font-family:var(--mono); }
.post tr:nth-child(even) td { background:var(--ctp-mantle); }

/* blog index list */
.post-list { list-style:none; margin:14px 0 0; }
.post-card { padding:20px 0; border-bottom:1px solid var(--ctp-surface0); }
.post-card:first-child { padding-top:6px; }
.post-card a { text-decoration:none; }
.post-card-title { font-family:var(--mono); font-size:1.15rem; color:var(--ctp-blue); }
.post-card-title::before { content:"▸ "; color:var(--ctp-green); }
.post-card a:hover .post-card-title { text-decoration:underline; }
.post-card-meta { margin:12px 0 4px; }
.post-card-desc { color:var(--ctp-subtext0); margin-top:8px; font-family:var(--sans); }

/* footer prompt line */
.prompt-foot {
  font-family:var(--mono); font-size:13px; margin-top:44px; padding-top:18px;
  border-top:1px solid var(--ctp-surface0); color:var(--ctp-overlay0);
}
.prompt-foot a { color:var(--ctp-sapphire); text-decoration:none; }
.prompt-foot a:hover { text-decoration:underline; }

/* live footer terminal */
.term-out { margin-bottom:6px; }
.term-echo { color:var(--ctp-text); padding:2px 0; line-height:1.5; }
.term-echo .p-echo { color:var(--ctp-green); }
.term-echo .err { color:var(--ctp-red); }
.term-echo b { color:var(--ctp-peach); font-weight:bold; }
.term-line { display:flex; align-items:center; gap:8px; cursor:text; }
.term-line .prompt { margin-right:2px; }
.term-in {
  background:transparent; border:none; outline:none; color:var(--ctp-text);
  font-family:var(--mono); font-size:13px; flex:1; caret-color:var(--ctp-text);
}
.term-in::placeholder { color:var(--ctp-overlay0); }
.foot-hint { margin-top:14px; color:var(--ctp-overlay0); font-size:12px; }
.foot-hint .hint-cmd { color:var(--ctp-green); }

@media (max-width:600px) {
  body { padding:8px; }
  .terminal-body { padding:20px 16px; }
  .post-title { font-size:1.4rem; }
  .terminal-title { font-size:10px; }
  .term-in { font-size:16px; } /* prevents iOS zoom-on-focus */
}