/* gitop — developer activity log */
:root {
  --bg: #1a1b26;
  --fg: #a9b1d6;
  --accent: #7aa2f7;
  --accent2: #73daca;
  --accent3: #e0af68;
  --muted: #565f89;
  --border: #24283b;
  --code-bg: #13141e;
  --max-width: 720px;
  --font: "SF Mono", "Fira Code", "Cascadia Code", "JetBrains Mono", "Liberation Mono", "Courier New", monospace;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  background: var(--bg); color: var(--fg);
  font-family: var(--font); font-size: 14px; line-height: 1.6;
  padding: 2rem 1rem; min-height: 100vh; display: flex; flex-direction: column;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
header { max-width: var(--max-width); margin: 0 auto 3rem; width: 100%; }
header h1 {
  font-size: 1.5rem; font-weight: 600; color: var(--accent);
  display: flex; align-items: center; gap: 0.5rem;
}
header h1 a { color: var(--accent); }
.icon { flex-shrink: 0; }
.subtitle { color: var(--muted); font-size: 0.875rem; margin-top: 0.25rem; }
main { max-width: var(--max-width); margin: 0 auto; width: 100%; flex: 1; }
.posts { display: flex; flex-direction: column; gap: 0.5rem; }
.post {
  border: 1px solid var(--border); border-radius: 4px; padding: 1rem;
  transition: border-color 0.15s;
}
.post:hover { border-color: var(--accent); }
.post time {
  font-size: 0.75rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.post h2 { font-size: 1rem; font-weight: 400; margin-top: 0.25rem; }
.post h2 a { color: var(--fg); }
.post h2 a:hover { color: var(--accent); }
.post-full time {
  font-size: 0.75rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.05em;
}
.post-full h2 {
  font-size: 1.25rem; font-weight: 600; margin: 0.5rem 0 1.5rem; color: var(--accent);
}
.content h1, .content h2, .content h3 { color: var(--accent); margin: 1.5rem 0 0.5rem; }
.content h1 { font-size: 1.25rem; }
.content h2 { font-size: 1.1rem; }
.content h3 { font-size: 1rem; }
.content p { margin: 0.75rem 0; }
.content strong { color: var(--accent3); font-weight: 600; }
.content em { color: var(--accent2); }
.content code {
  background: var(--code-bg); padding: 0.125rem 0.375rem; border-radius: 3px;
  font-family: var(--font); font-size: 0.875em;
}
.content pre {
  background: var(--code-bg); border: 1px solid var(--border); border-radius: 4px;
  padding: 1rem; overflow-x: auto; margin: 1rem 0;
}
.content pre code { background: none; padding: 0; font-size: 0.875em; }
.content li { margin: 0.25rem 0 0.25rem 1.5rem; list-style: "→ "; }
footer {
  max-width: var(--max-width); margin: 4rem auto 0; width: 100%;
  padding-top: 1.5rem; border-top: 1px solid var(--border);
  font-size: 0.75rem; color: var(--muted);
}
footer a { color: var(--muted); }
@media (max-width: 640px) { body { padding: 1rem; } header { margin-bottom: 2rem; } }