:root{
  /* === London Blue (唯一主色；不使用 dark 体系) === */
  --primary:#1E3A8A;       /* London Blue */
  --primary-soft:#E8EEFA;  /* 极浅蓝，仅作点缀背景 */

  /* === Backgrounds === */
  --bg:#F7F9FC;            /* 页面主背景（浅） */
  --card:#FFFFFF;          /* 卡片背景 */
  --subtle:#E5E7EB;        /* 边框线 */

  /* === Text === */
  --text:#1F2937;          /* 主文字 */
  --muted:#4B5563;         /* 次文字 */

  /* === Layout === */
  --max:920px;
  --radius:18px;
  --shadow:0 10px 30px rgba(0,0,0,0.08);

  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

*{box-sizing:border-box}

body{
  margin:0;
  background: var(--bg);
  color:var(--text);
  font-family:var(--sans);
  line-height:1.55;
}

.wrap{max-width:var(--max); margin:0 auto; padding:32px 20px 70px;}

header{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:10px 0 18px;
}

.brand{display:flex; align-items:center; gap:12px;}

.mark{
  width:34px; height:34px; border-radius:10px;
  background: var(--primary);
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}

.brand h1{margin:0; font-size:15px; letter-spacing:0.2px; font-weight:650;}
.small{font-size:12px; color:var(--muted); margin-top:2px;}

.hero{padding:22px 0 12px;}

.kicker{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:12px; color:var(--muted);
  border:1px solid var(--subtle);
  background: var(--card);
  padding:8px 12px; border-radius:999px;
}

.kdot{
  width:8px; height:8px; border-radius:99px;
  background: var(--primary);
  box-shadow:0 0 0 4px rgba(30,58,138,0.12);
}

h2{
  font-size: clamp(34px, 5vw, 54px);
  line-height:1.06;
  margin:14px 0 10px;
  letter-spacing:-0.6px;
  color: var(--primary);
}

p{margin:0; color:var(--muted); font-size:16px; max-width:70ch;}

.ctaRow{display:flex; gap:12px; flex-wrap:wrap; margin-top:16px;}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:11px 14px; border-radius:12px; font-size:14px;
  border:1px solid var(--subtle);
  background: var(--card);
  color: var(--primary);
  text-decoration:none;
  transition:transform 120ms ease;
}

.btn.primary{
  background: var(--primary);
  border-color: var(--primary);
  color:#fff;
  font-weight:650;
}

.btn:hover{transform:translateY(-1px);}

.card{
  margin-top:16px;
  background:var(--card);
  border:1px solid var(--subtle);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:var(--shadow);
}

.grid{display:grid; grid-template-columns:1fr; gap:14px; margin-top:16px;}
@media(min-width:860px){.grid{grid-template-columns:1fr 1fr;}}

.card h3{margin:0 0 8px; font-size:16px; letter-spacing:-0.1px; color:var(--text);}

ul{margin:10px 0 0; padding:0; list-style:none;}

li{
  padding:10px 0;
  border-top:1px solid var(--subtle);
  color:var(--text);
  font-size:14px;
}

li:first-child{border-top:0; padding-top:2px;}

.subline{
  margin-top:10px;
  font-family:var(--mono);
  font-size:12.5px;
  color:var(--muted);
}

footer{
  margin-top:28px;
  padding-top:16px;
  border-top:1px solid var(--subtle);
  color:var(--muted);
  font-size:12.5px;
  display:flex; flex-wrap:wrap; gap:10px;
  align-items:center; justify-content:space-between;
  background: transparent;
}

.links{display:flex; gap:10px; flex-wrap:wrap;}
.links a{color:var(--primary); text-decoration:none;}
.links a:hover{text-decoration:underline; text-underline-offset:3px;}

/* === Navigation === */

.nav{
  display:flex;
  gap:16px;
  align-items:center;
}

.nav a{
  font-size:14px;
  color:var(--primary);
  text-decoration:none;
  padding:6px 10px;
  border-radius:8px;
  transition:background 120ms ease, transform 120ms ease;
}

.nav a:hover{
  background:var(--primary-soft);
  transform:translateY(-1px);
}

/* Mobile: keep header clean */
@media (max-width: 640px){
  .nav{
    gap:10px;
  }
}
/* === Blog / Posts list === */

.post-item{
  padding: 1.25rem 0;
  border-top: 1px solid var(--subtle);
}

.post-item:first-child{
  border-top: none;
}

.post-item .meta{
  font-size: 12px;
  color: var(--muted);
}

.post-item h3{
  margin: .35rem 0;
  font-size: 18px;
  line-height: 1.35;
}

.post-item h3 a{
  color: var(--primary);
  text-decoration: none;
}

.post-item h3 a:hover{
  text-decoration: underline;
  text-underline-offset: 3px;
}

.post-item p{
  margin: .35rem 0 0;
  color: var(--text);
  font-size: 15px;
}