:root{
  --navy:#0B2239;
  --navy-light:#12314f;
  --green:#22C55E;
  --ink:#1c2733;
  --muted:#5a6a78;
  --bg:#f7f9fa;
  --card:#ffffff;
  --border:#dde5ea;
}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.65}
a{color:var(--navy);text-decoration-color:var(--green);text-underline-offset:3px}
a:hover{color:var(--navy-light)}
header.site{background:var(--navy);color:#fff}
header.site .wrap{max-width:960px;margin:0 auto;padding:20px 20px 16px}
.brand{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.brand .mark{display:inline-block;width:14px;height:14px;background:var(--green);border-radius:3px;transform:translateY(1px)}
.brand h1{margin:0;font-size:1.55rem;letter-spacing:.2px}
.brand h1 a{color:#fff;text-decoration:none}
.brand .tag{color:#b9cbdc;font-size:.95rem}
nav.main{margin-top:12px;display:flex;gap:20px;flex-wrap:wrap;font-size:.95rem}
nav.main a{color:#dbe7f2;text-decoration:none}
nav.main a:hover{color:#fff;text-decoration:underline;text-decoration-color:var(--green)}
nav.main a.cta-nav{color:var(--green);font-weight:600}
.wrap{max-width:960px;margin:0 auto;padding:24px 20px 40px}
.hero{background:var(--card);border:1px solid var(--border);border-left:5px solid var(--green);border-radius:8px;padding:22px 24px;margin-bottom:28px}
.hero h2{margin:0 0 8px;font-size:1.35rem;color:var(--navy)}
.hero p{margin:0;color:var(--muted)}
.post-card{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:20px 24px;margin-bottom:18px}
.post-card h3{margin:4px 0 8px;font-size:1.2rem}
.post-card h3 a{color:var(--navy);text-decoration:none}
.post-card h3 a:hover{text-decoration:underline;text-decoration-color:var(--green)}
.post-card .date,.article-meta{color:var(--muted);font-size:.88rem;text-transform:uppercase;letter-spacing:.4px}
.post-card p{margin:0;color:var(--ink)}
article.post{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:28px 30px}
article.post h1{color:var(--navy);font-size:1.8rem;line-height:1.25;margin:6px 0 10px}
article.post h2{color:var(--navy);font-size:1.25rem;margin:28px 0 8px}
article.post h3{color:var(--navy);font-size:1.08rem;margin:22px 0 6px}
article.post p{margin:0 0 14px}
article.post ul,article.post ol{margin:0 0 14px;padding-left:22px}
article.post li{margin-bottom:6px}
.lede{font-size:1.08rem;color:var(--navy-light)}
.cta-box{background:var(--navy);color:#eaf2f8;border-radius:8px;padding:22px 24px;margin:30px 0 6px}
.cta-box h2{color:#fff;margin:0 0 8px;font-size:1.2rem}
.cta-box p{color:#c8d8e6;margin:0 0 14px}
.cta-box a.btn{display:inline-block;background:var(--green);color:#06280f;font-weight:700;text-decoration:none;padding:11px 20px;border-radius:6px}
.cta-box a.btn:hover{background:#2bd968}
.note{background:#eef6f0;border:1px solid #cdeeda;border-radius:6px;padding:14px 18px;margin:20px 0;font-size:.95rem}
.note p{margin:0}
.about{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:22px 24px;margin-top:28px}
.about h2{margin:0 0 8px;color:var(--navy);font-size:1.2rem}
.about p{margin:0 0 10px;color:var(--ink)}
footer.site{background:var(--navy);color:#b9cbdc;margin-top:10px}
footer.site .wrap{max-width:960px;margin:0 auto;padding:24px 20px;font-size:.92rem}
footer.site a{color:#eaf2f8}
footer.site .fine{color:#7e95a9;font-size:.82rem;margin-top:10px}
@media (max-width:640px){
  article.post{padding:22px 18px}
  .brand h1{font-size:1.3rem}
  article.post h1{font-size:1.5rem}
}