:root {
  --bg: #fafafa;
  --text: #1a1a1a;
  --text-secondary: #525252;
  --accent: #0066cc;
  --accent-hover: #0052a3;
  --border: #e5e5e5;
  --card: #ffffff;
  --shadow: 0 1px 3px rgba(0,0,0,0.08);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  background: var(--bg);
  color: var(--text);
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

header { margin-bottom: 2.5rem; }
header h1 { font-size: 1.75rem; font-weight: 600; letter-spacing: -0.02em; }
header p { color: var(--text-secondary); margin-top: 0.25rem; }

nav { margin-bottom: 3rem; }
nav a { color: var(--accent); text-decoration: none; }
nav a:hover { text-decoration: underline; }

section { margin-bottom: 2.5rem; }

h2 { font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); margin-bottom: 1rem; border-bottom: 1px solid var(--border); padding-bottom: 0.5rem; }

.entry {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin-bottom: 0.75rem;
  box-shadow: var(--shadow);
}

.entry a { font-weight: 500; color: var(--text); text-decoration: none; }
.entry a:hover { color: var(--accent); }

.entry .date { font-size: 0.8125rem; color: var(--text-secondary); margin-right: 0.75rem; }
.entry .type { font-size: 0.6875rem; text-transform: uppercase; padding: 0.125rem 0.5rem; border-radius: 4px; background: #eef; color: var(--accent); font-weight: 500; }

.empty { color: var(--text-secondary); font-style: italic; padding: 1rem 0; }

/* Article styles */
.article header { border-bottom: 1px solid var(--border); padding-bottom: 1.5rem; margin-bottom: 2rem; }
.article h1 { font-size: 1.5rem; }
.article .meta { font-size: 0.8125rem; color: var(--text-secondary); margin-top: 0.5rem; }
.article h2 { font-size: 1.125rem; text-transform: none; letter-spacing: normal; color: var(--text); border: none; padding: 0; margin: 2rem 0 1rem; }
.article h3 { font-size: 1rem; font-weight: 600; margin: 1.5rem 0 0.75rem; }
.article p { margin-bottom: 1rem; }
.article ul, .article ol { margin-bottom: 1rem; padding-left: 1.5rem; }
.article li { margin-bottom: 0.25rem; }
.article code { background: #f0f0f0; padding: 0.125rem 0.375rem; border-radius: 4px; font-size: 0.875rem; font-family: ui-monospace, monospace; }
.article pre { background: #f5f5f5; padding: 1rem; border-radius: 8px; overflow-x: auto; margin-bottom: 1rem; }
.article pre code { background: none; padding: 0; }
.article a { color: var(--accent); }
.article blockquote { border-left: 3px solid var(--accent); padding-left: 1rem; color: var(--text-secondary); margin: 1rem 0; }

.back { display: inline-block; margin-bottom: 1.5rem; color: var(--text-secondary); text-decoration: none; }
.back:hover { color: var(--accent); }

@media (max-width: 600px) {
  body { padding: 1.25rem 1rem; }
  .entry { padding: 0.875rem 1rem; }
}