/* Blog pages: same design tokens as the main CV page */
:root{
  --bg:#F6F7FB; --surface:#FFFFFF; --surface-2:#EEF0F7;
  --text:#171B26; --text-muted:#5B6472; --border:#E4E7EE;
  --accent:#E08A2B; --accent-2:#1E9E8C; --accent-3:#5B6EF5;
  --radius:14px;
  --shadow:0 1px 2px rgba(23,27,38,.04), 0 8px 24px rgba(23,27,38,.06);
}
html[data-theme="dark"]{
  --bg:#0B0F19; --surface:#121729; --surface-2:#171E33;
  --text:#EDEFF5; --text-muted:#9AA3B7; --border:#242C42;
  --accent:#F2B25C; --accent-2:#3FD1BC; --accent-3:#8B98FF;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 12px 32px rgba(0,0,0,.35);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,sans-serif;
  -webkit-font-smoothing:antialiased; transition:background .35s ease, color .35s ease;
}
a{color:inherit;}
.mono{font-family:'IBM Plex Mono',monospace;}
.wrap{max-width:1080px; margin:0 auto; padding:0 28px;}

/* nav */
.nav{position:sticky; top:0; z-index:50; background:color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--border);}
.nav-inner{max-width:1080px; margin:0 auto; padding:12px 28px; display:flex; align-items:center; justify-content:space-between; gap:16px;}
.nav-back{display:flex; align-items:center; gap:10px; text-decoration:none; font-family:'Space Grotesk',sans-serif; font-weight:600;}
.nav-back span{display:block; font-family:'IBM Plex Mono',monospace; font-weight:400; font-size:.68rem; color:var(--text-muted);}
.nav-back i{color:var(--accent-2);}
.nav-right{display:flex; align-items:center; gap:18px;}
.nav-right a{font-size:.86rem; text-decoration:none; color:var(--text-muted); font-weight:500;}
.nav-right a:hover, .nav-right a.active{color:var(--text);}
.theme-toggle{width:38px; height:38px; border-radius:50%; border:1px solid var(--border); background:var(--surface); color:var(--text); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:transform .25s ease;}
.theme-toggle:hover{transform:rotate(18deg);}
a:focus-visible, button:focus-visible{outline:2px solid var(--accent-3); outline-offset:2px;}

/* blog index */
.blog-head{padding:80px 0 36px;}
.tag{font-family:'IBM Plex Mono',monospace; font-size:.8rem; color:var(--accent-2);}
.blog-head h1{font-family:'Space Grotesk',sans-serif; font-size:clamp(2.2rem,5vw,3.2rem); margin:.2em 0 .25em;}
.blog-head p{color:var(--text-muted); max-width:56ch; line-height:1.7; margin:0;}
.post-list{display:grid; gap:22px; padding-bottom:96px;}
.post-card{display:grid; grid-template-columns:minmax(220px,360px) 1fr; gap:26px; align-items:center; text-decoration:none; color:inherit; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; transition:transform .25s ease, border-color .25s ease;}
.post-card:hover{transform:translateY(-4px); border-color:var(--accent-3);}
.post-card img{width:100%; height:100%; min-height:200px; aspect-ratio:16 / 9; object-fit:cover; display:block;}
.post-card .body{padding:22px 26px 22px 0; display:flex; flex-direction:column; gap:10px;}
.post-card h2{font-family:'Space Grotesk',sans-serif; font-size:1.35rem; margin:0; line-height:1.3;}
.post-card p{margin:0; color:var(--text-muted); line-height:1.65; font-size:.95rem;}
.meta{font-family:'IBM Plex Mono',monospace; font-size:.76rem; color:var(--text-muted);}
.read{font-weight:600; color:var(--accent); font-size:.9rem;}
@media (max-width:760px){
  .post-card{grid-template-columns:1fr;}
  .post-card .body{padding:0 20px 22px;}
  .nav-right a.hide-sm{display:none;}
}

/* article */
.article{max-width:720px; margin:0 auto; padding:72px 28px 96px;}
.article h1{font-family:'Space Grotesk',sans-serif; font-size:clamp(2rem,4.6vw,2.9rem); line-height:1.15; margin:.25em 0 .35em;}
.article .lede{font-size:1.15rem; color:var(--text-muted); line-height:1.7; margin:0 0 18px;}
.article h2{font-family:'Space Grotesk',sans-serif; font-size:1.5rem; margin:2.2em 0 .5em;}
.article h3{font-family:'Space Grotesk',sans-serif; font-size:1.12rem; margin:1.5em 0 .4em;}
.article .meta a{text-decoration:none;}
.article .meta a:hover{color:var(--text);}
.article p, .article li{font-size:1.04rem; line-height:1.8;}
.article p{margin:0 0 1.1em;}
.article ul, .article ol{padding-left:1.3em; margin:0 0 1.2em;}
.article li{margin:.35em 0;}
.article strong{color:var(--text);}
.article figure{
  /* images break out of the text column a little, keeping their real aspect ratio */
  width:min(960px, calc(100vw - 40px)); position:relative; left:50%; transform:translateX(-50%);
  margin:32px 0 36px;
}
.article figure img{width:100%; height:auto; aspect-ratio:16 / 9; object-fit:cover; display:block; border-radius:var(--radius); border:1px solid var(--border); box-shadow:var(--shadow);}
.article figcaption{font-size:.84rem; color:var(--text-muted); margin-top:10px; text-align:center;}
.article blockquote{margin:24px 0; padding:14px 20px; border-left:3px solid var(--accent-2); background:var(--surface); border-radius:0 10px 10px 0; color:var(--text-muted); font-family:'IBM Plex Mono',monospace; font-size:.9rem; line-height:1.7;}
.compare{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:24px 0 28px;}
.compare div{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:18px 20px;}
.compare h3{margin:0 0 8px; font-family:'Space Grotesk',sans-serif; font-size:1rem;}
.compare p{margin:0; font-size:.94rem; color:var(--text-muted); line-height:1.65;}
.compare .after h3{color:var(--accent-2);}
.compare .before h3{color:var(--accent);}
@media (max-width:640px){.compare{grid-template-columns:1fr;}}
.recipe{counter-reset:r; list-style:none; padding:0 !important;}
.recipe li{counter-increment:r; position:relative; padding-left:44px !important; margin:14px 0 !important;}
.recipe li::before{content:counter(r); position:absolute; left:0; top:2px; width:28px; height:28px; border-radius:8px; background:var(--surface-2); border:1px solid var(--border); font-family:'IBM Plex Mono',monospace; font-size:.85rem; display:grid; place-items:center; color:var(--accent-2);}
.cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px;}
.btn{display:inline-flex; align-items:center; gap:8px; padding:12px 20px; border-radius:10px; text-decoration:none; font-weight:600; font-size:.95rem; border:1px solid transparent; transition:transform .2s ease;}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--accent); color:#171200;}
.btn-outline{border-color:var(--border); color:var(--text);}
footer{border-top:1px solid var(--border); text-align:center; padding:28px; color:var(--text-muted); font-size:.85rem;}