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

html { -webkit-text-size-adjust:100%; }

body {
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  background:#f6f5f1;
  color:#2f2e2b;
  line-height:1.85;
  font-size:16px;
}

/* top accent hairline */
body::before {
  content:''; display:block; height:3px;
  background:linear-gradient(90deg,#4a6fa5 0%,#7fa8cf 45%,#d9c9a3 100%);
}

::selection { background:#d8e5f2; }

.wrap { max-width:760px; margin:0 auto; padding:52px 24px 64px; }

/* ---------- header ---------- */
header { margin-bottom:40px; }
header h1 { font-size:26px; font-weight:700; letter-spacing:1px; line-height:1.4; }
header h1 a { color:#232220; text-decoration:none; }
header h1 a::before {
  content:''; display:inline-block; width:11px; height:11px;
  background:#4a6fa5; border-radius:3px; margin-right:12px;
  transform:translateY(-1px) rotate(45deg);
}
header h1 a:hover { color:#4a6fa5; }
header .tagline { margin-top:8px; font-size:14px; color:#98948a; letter-spacing:.4px; }
header nav { margin-top:20px; }
header nav a {
  display:inline-block; color:#6f6b62; text-decoration:none;
  font-size:14px; padding:4px 14px; margin-right:8px;
  border-radius:999px; border:1px solid transparent;
  transition:all .18s ease;
}
header nav a:hover {
  color:#4a6fa5; background:#fff;
  border-color:#d9d5cb;
}

/* ---------- index cards ---------- */
article {
  background:#fff; border:1px solid #eae7df; border-radius:12px;
  padding:24px 28px 22px; margin-bottom:18px;
  transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
article:hover {
  border-color:#d3dce6;
  box-shadow:0 8px 24px rgba(60,70,90,.08);
  transform:translateY(-2px);
}
article h2 { font-size:20px; font-weight:600; margin-bottom:8px; line-height:1.55; }
article h2 a { color:#232220; text-decoration:none; transition:color .15s; }
article h2 a:hover { color:#4a6fa5; }
article .meta {
  font-size:13px; color:#a29e93; margin-bottom:10px;
  display:flex; align-items:center; gap:10px;
}
article .meta .cat {
  color:#4a6fa5; background:#edf3f9;
  padding:1px 10px; border-radius:999px; font-size:12px;
}
article p { color:#6d6a63; font-size:15px; }

/* ---------- content pages (post / about / archive) ---------- */
.content {
  background:#fff; border:1px solid #eae7df; border-radius:12px;
  padding:36px 40px 32px;
}
.content h2 {
  font-size:26px; font-weight:700; line-height:1.45;
  margin:0 0 8px; color:#232220;
  padding-bottom:14px; border-bottom:1px solid #f0ede6;
}
.content .meta { font-size:13px; color:#a29e93; margin:14px 0 34px; display:flex; align-items:center; gap:10px; }
.content .meta .cat {
  color:#4a6fa5; background:#edf3f9;
  padding:1px 10px; border-radius:999px; font-size:12px;
}
.content h3 {
  font-size:18px; margin:34px 0 12px; color:#232220; font-weight:600;
  padding-left:11px; border-left:3px solid #4a6fa5; line-height:1.5;
}
.content p { margin-bottom:16px; color:#413f3a; }
.content ul { margin:0 0 16px 24px; color:#413f3a; }
.content ol { margin:0 0 16px 24px; color:#413f3a; }
.content li { margin-bottom:6px; }
.content a { color:#4a6fa5; text-decoration:none; border-bottom:1px solid #c9d9ea; transition:border-color .15s; }
.content a:hover { border-bottom-color:#4a6fa5; }

.content code {
  background:#f4f2ec; border:1px solid #e6e2d8;
  padding:1px 6px; border-radius:4px; font-size:14px;
  font-family:Consolas,Menlo,Monaco,"Courier New",monospace;
  color:#b5503f;
}
.content pre {
  background:#2b313c; color:#d9dde4;
  padding:16px 20px; border-radius:10px;
  overflow-x:auto; margin:0 0 18px;
  font-size:13.5px; line-height:1.7;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.content pre code {
  background:none; border:none; color:inherit; padding:0; font-size:inherit;
}
.content blockquote {
  border-left:3px solid #4a6fa5; background:#f3f6fa;
  padding:13px 18px; color:#5d6470;
  margin:0 0 16px; border-radius:0 8px 8px 0;
}

/* ---------- footer ---------- */
footer {
  margin-top:44px; padding-top:6px;
  font-size:13px; color:#a29e93; text-align:center; letter-spacing:.4px;
}
footer a { color:#8b877d; text-decoration:none; }
footer a:hover { color:#4a6fa5; }

@media (max-width:520px) {
  .wrap { padding:32px 16px 48px; }
  header { margin-bottom:28px; }
  article { padding:18px 18px 16px; }
  .content { padding:24px 20px; }
  .content h2 { font-size:22px; }
  .content h3 { font-size:17px; }
}