/* Variables */
:root {
  --bg: #faf9f6;
  --fg: #1a1a1a;
  --muted: #666;
  --accent: #2a6496;
  --border: #ddd;
  --code-bg: #f5f5f0;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1a1a1a;
    --fg: #e8e6e0;
    --muted: #999;
    --accent: #6baed6;
    --border: #333;
    --code-bg: #252525;
  }
}

/* Reset */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Base */
html {
  font-size: 18px;
  line-height: 1.7;
}

body {
  font-family: Georgia, 'Palatino Linotype', Palatino, serif;
  background: var(--bg);
  color: var(--fg);
  margin: 0;
  padding: 0;
}

/* Layout */
header, main, footer {
  max-width: 65ch;
  margin: 0 auto;
  padding: 0 1.5rem;
}

header {
  padding-top: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 3rem;
}

footer {
  margin-top: 4rem;
  padding-top: 1.5rem;
  padding-bottom: 2rem;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.85rem;
}

/* Nav */
nav {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
}

nav a:first-child {
  font-size: 1.1rem;
  font-weight: bold;
}

.nav-links {
  display: flex;
  gap: 1.5rem;
}

/* Links */
a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Typography */
h1, h2, h3, h4 {
  line-height: 1.3;
  margin-top: 2rem;
  margin-bottom: 0.5rem;
}

h1 { font-size: 1.8rem; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.15rem; }

p { margin: 1rem 0; }

/* Post list */
.post-list {
  list-style: none;
  padding: 0;
}

.post-summary {
  margin-bottom: 2.5rem;
}

.post-summary h2 {
  margin: 0.2rem 0;
  font-size: 1.2rem;
}

.post-summary a {
  color: var(--fg);
}

.post-summary a:hover {
  color: var(--accent);
}

time {
  color: var(--muted);
  font-size: 0.85rem;
  font-family: monospace;
}

.category {
  font-size: 0.85rem;
  color: var(--muted);
}

.category a {
  color: var(--muted);
}

/* Post */
.post-header {
  margin-bottom: 2.5rem;
}

.post-header h1 {
  margin-bottom: 0.3rem;
}

.post-meta {
  display: flex;
  gap: 1rem;
  align-items: center;
  color: var(--muted);
  font-size: 0.85rem;
}

/* Archive */
.archive-year h2 {
  font-size: 1.2rem;
  margin-top: 2rem;
  margin-bottom: 0.5rem;
}

.archive-year ul {
  list-style: none;
  padding: 0;
}

.archive-year li {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.4rem;
}

/* Code */
code {
  font-family: 'Menlo', 'Monaco', 'Consolas', monospace;
  font-size: 0.85em;
  background: var(--code-bg);
  padding: 0.15em 0.4em;
  border-radius: 3px;
}

pre {
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1.2rem 1.4rem;
  overflow-x: auto;
  line-height: 1.5;
}

pre code {
  background: none;
  padding: 0;
  font-size: 0.82rem;
}

/* Pygments light theme */
.highlight { background: #f8f8f8; border-radius: 4px; }
.highlight .c { color: #3D7B7B; font-style: italic }
.highlight .err { border: 1px solid #F00 }
.highlight .k { color: #008000; font-weight: bold }
.highlight .o { color: #666 }
.highlight .ch { color: #3D7B7B; font-style: italic }
.highlight .cm { color: #3D7B7B; font-style: italic }
.highlight .cp { color: #9C6500 }
.highlight .cpf { color: #3D7B7B; font-style: italic }
.highlight .c1 { color: #3D7B7B; font-style: italic }
.highlight .cs { color: #3D7B7B; font-style: italic }
.highlight .gd { color: #A00000 }
.highlight .ge { font-style: italic }
.highlight .gr { color: #E40000 }
.highlight .gh { color: #000080; font-weight: bold }
.highlight .gi { color: #008400 }
.highlight .go { color: #717171 }
.highlight .gp { color: #000080; font-weight: bold }
.highlight .gs { font-weight: bold }
.highlight .gu { color: #800080; font-weight: bold }
.highlight .gt { color: #0044DD }
.highlight .kc { color: #008000; font-weight: bold }
.highlight .kd { color: #008000; font-weight: bold }
.highlight .kn { color: #008000; font-weight: bold }
.highlight .kp { color: #008000 }
.highlight .kr { color: #008000; font-weight: bold }
.highlight .kt { color: #B00040 }
.highlight .m { color: #666 }
.highlight .s { color: #BA2121 }
.highlight .na { color: #687822 }
.highlight .nb { color: #008000 }
.highlight .nc { color: #0000FF; font-weight: bold }
.highlight .no { color: #880000 }
.highlight .nd { color: #AA22FF }
.highlight .ni { color: #717171; font-weight: bold }
.highlight .ne { color: #CB3F38; font-weight: bold }
.highlight .nf { color: #0000FF }
.highlight .nl { color: #767600 }
.highlight .nn { color: #0000FF; font-weight: bold }
.highlight .nt { color: #008000; font-weight: bold }
.highlight .nv { color: #19177C }
.highlight .ow { color: #AA22FF; font-weight: bold }
.highlight .w { color: #bbbbbb }
.highlight .mb { color: #666 }
.highlight .mf { color: #666 }
.highlight .mh { color: #666 }
.highlight .mi { color: #666 }
.highlight .mo { color: #666 }
.highlight .sa { color: #BA2121 }
.highlight .sb { color: #BA2121 }
.highlight .sc { color: #BA2121 }
.highlight .dl { color: #BA2121 }
.highlight .sd { color: #BA2121; font-style: italic }
.highlight .s2 { color: #BA2121 }
.highlight .se { color: #AA5D1F; font-weight: bold }
.highlight .sh { color: #BA2121 }
.highlight .si { color: #A45A77; font-weight: bold }
.highlight .sx { color: #008000 }
.highlight .sr { color: #A45A77 }
.highlight .s1 { color: #BA2121 }
.highlight .ss { color: #19177C }
.highlight .bp { color: #008000 }
.highlight .fm { color: #0000FF }
.highlight .vc { color: #19177C }
.highlight .vg { color: #19177C }
.highlight .vi { color: #19177C }
.highlight .vm { color: #19177C }
.highlight .il { color: #666 }

/* Pygments dark theme overrides */
@media (prefers-color-scheme: dark) {
  .highlight { background: #272822; color: #F8F8F2; }
  .highlight .c { color: #959077 }
  .highlight .err { color: #ED007E; background-color: #1E0010 }
  .highlight .k { color: #66D9EF }
  .highlight .l { color: #AE81FF }
  .highlight .n { color: #F8F8F2 }
  .highlight .o { color: #FF4689 }
  .highlight .p { color: #F8F8F2 }
  .highlight .ch { color: #959077 }
  .highlight .cm { color: #959077 }
  .highlight .cp { color: #959077 }
  .highlight .cpf { color: #959077 }
  .highlight .c1 { color: #959077 }
  .highlight .cs { color: #959077 }
  .highlight .gd { color: #FF4689 }
  .highlight .ge { color: #F8F8F2; font-style: italic }
  .highlight .gi { color: #A6E22E }
  .highlight .go { color: #66D9EF }
  .highlight .gp { color: #FF4689; font-weight: bold }
  .highlight .gs { color: #F8F8F2; font-weight: bold }
  .highlight .gu { color: #959077 }
  .highlight .kc { color: #66D9EF }
  .highlight .kd { color: #66D9EF }
  .highlight .kn { color: #FF4689 }
  .highlight .kp { color: #66D9EF }
  .highlight .kr { color: #66D9EF }
  .highlight .kt { color: #66D9EF }
  .highlight .m { color: #AE81FF }
  .highlight .s { color: #E6DB74 }
  .highlight .na { color: #A6E22E }
  .highlight .nb { color: #F8F8F2 }
  .highlight .nc { color: #A6E22E }
  .highlight .no { color: #66D9EF }
  .highlight .nd { color: #A6E22E }
  .highlight .ne { color: #A6E22E }
  .highlight .nf { color: #A6E22E }
  .highlight .nt { color: #FF4689 }
  .highlight .nv { color: #F8F8F2 }
  .highlight .ow { color: #FF4689 }
  .highlight .mb { color: #AE81FF }
  .highlight .mf { color: #AE81FF }
  .highlight .mh { color: #AE81FF }
  .highlight .mi { color: #AE81FF }
  .highlight .mo { color: #AE81FF }
  .highlight .sa { color: #E6DB74 }
  .highlight .sb { color: #E6DB74 }
  .highlight .sc { color: #E6DB74 }
  .highlight .dl { color: #E6DB74 }
  .highlight .sd { color: #E6DB74 }
  .highlight .s2 { color: #E6DB74 }
  .highlight .se { color: #AE81FF }
  .highlight .sh { color: #E6DB74 }
  .highlight .si { color: #E6DB74 }
  .highlight .sx { color: #E6DB74 }
  .highlight .sr { color: #E6DB74 }
  .highlight .s1 { color: #E6DB74 }
  .highlight .ss { color: #E6DB74 }
  .highlight .bp { color: #F8F8F2 }
  .highlight .fm { color: #A6E22E }
  .highlight .vc { color: #F8F8F2 }
  .highlight .vg { color: #F8F8F2 }
  .highlight .vi { color: #F8F8F2 }
  .highlight .vm { color: #F8F8F2 }
  .highlight .il { color: #AE81FF }
}

/* Blockquote */
blockquote {
  border-left: 3px solid var(--border);
  margin: 1.5rem 0;
  padding: 0.5rem 1.2rem;
  color: var(--muted);
}

/* Images */
img {
  max-width: 100%;
  height: auto;
}

/* Tables */
table {
  border-collapse: collapse;
  width: 100%;
  margin: 1.5rem 0;
  font-size: 0.9rem;
}

th, td {
  border: 1px solid var(--border);
  padding: 0.5rem 0.8rem;
  text-align: left;
}

th {
  background: var(--code-bg);
}