*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#f4f1ec;--surface:#fff;--surface2:#f9f7f3;--ink:#18170f;--ink2:#2d2c22;--muted:#6a6a5e;--dim:#a8a89a;--border:#e2ddd4;--border2:#ccc8be;--blue:#1a56db;--blue-bg:#eef2ff;--serif:'Instrument Serif',Georgia,serif;--sans:'DM Sans',system-ui,sans-serif}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}

nav{background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:300}
.nav-wrap{max-width:1200px;margin:0 auto;padding:0 1.5rem;height:60px;display:flex;align-items:center;gap:1.25rem}
.logo{display:flex;align-items:center;text-decoration:none;font-weight:700;font-size:1.1rem;color:var(--ink)}
.logo span{color:var(--blue)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:.5rem}
.nav-link{font-size:13.5px;font-weight:500;color:var(--muted);text-decoration:none;padding:.4rem .8rem;border-radius:6px;transition:all .15s}
.nav-link:hover{color:var(--ink);background:var(--bg)}

.hero{background:var(--dark,#0f1117);color:var(--dark-text,#e2e8f0);padding:3.5rem 1.5rem;text-align:center;background:#0f1117;color:#e2e8f0}
.hero h1{font-family:var(--serif);font-size:clamp(2rem,4vw,3rem);font-weight:400;letter-spacing:-0.02em;margin-bottom:.5rem;color:#fff}
.hero p{font-size:1rem;color:rgba(255,255,255,.5);max-width:500px;margin:0 auto;line-height:1.7}

.wrap{max-width:900px;margin:0 auto;padding:2rem 1.5rem 4rem}

/* Blog listing */
.post-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:1.5rem 2rem;margin-bottom:1rem;transition:all .15s;cursor:pointer;display:block;text-decoration:none;color:inherit}
.post-card:hover{border-color:var(--blue);transform:translateY(-2px);box-shadow:0 4px 16px rgba(26,86,219,.08)}
.post-cat{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--blue);margin-bottom:.35rem}
.post-title{font-family:var(--serif);font-size:1.4rem;font-weight:400;letter-spacing:-0.01em;color:var(--ink);margin-bottom:.4rem;line-height:1.3}
.post-excerpt{font-size:14px;color:var(--muted);line-height:1.6;margin-bottom:.6rem}
.post-meta{font-size:12.5px;color:var(--dim);display:flex;gap:1rem;flex-wrap:wrap}
.post-meta span{display:flex;align-items:center;gap:4px}

/* Single post */
.single-post{display:none;max-width:700px;margin:0 auto;padding:0 1.5rem}
.single-post.show{display:block}
.single-post .back-link{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--blue);text-decoration:none;font-weight:500;margin-bottom:2rem;padding:.35rem .75rem;border-radius:6px;background:var(--blue-bg);border:1px solid rgba(26,86,219,.15)}
.single-post .back-link:hover{background:rgba(26,86,219,.12)}
.sp-title{font-family:var(--serif);font-size:2rem;font-weight:400;letter-spacing:-0.02em;line-height:1.25;margin-bottom:.5rem}
.sp-meta{font-size:13px;color:var(--dim);display:flex;gap:1rem;margin-bottom:2rem;flex-wrap:wrap}
.sp-body{font-size:16px;line-height:1.8;color:var(--ink2)}
.sp-body h2{font-family:var(--serif);font-size:1.4rem;font-weight:400;margin:2rem 0 .75rem;letter-spacing:-0.01em}
.sp-body h3{font-size:1rem;font-weight:600;margin:1.5rem 0 .5rem}
.sp-body p{margin-bottom:1rem;color:#475569}
.sp-body ul{margin-bottom:1rem;padding-left:1.5rem}
.sp-body li{margin-bottom:.35rem}
.sp-body a{color:var(--blue);text-decoration:underline}
.sp-body strong{color:var(--ink)}
.sp-body .post-tags{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--border)}
.post-tag{font-size:11.5px;background:var(--surface2);border:1px solid var(--border);padding:4px 10px;border-radius:100px;color:var(--muted);font-weight:500}
.cta-box{background:var(--dark,#0f1117);color:#fff;border-radius:12px;padding:2rem;text-align:center;margin-top:3rem}
.cta-box h3{font-family:var(--serif);font-size:1.3rem;font-weight:400;margin-bottom:.5rem}
.cta-box p{font-size:13px;color:rgba(255,255,255,.5);margin-bottom:1rem}
.cta-btn{display:inline-block;background:var(--blue);color:#fff;text-decoration:none;padding:.7rem 1.5rem;border-radius:8px;font-weight:600;font-size:13px}

.loading{text-align:center;padding:4rem;color:var(--dim);font-size:14px}
.error{text-align:center;padding:2rem;color:var(--red,#991b1b);font-size:14px}