/* Blog typography — shared between /blog/index.html and individual posts.
   Reuses the site's color tokens and Inter font; tightens line-height and
   widens column for long-form reading. */

:root{
    --bg:#ffffff; --text:#0b0b0c; --muted:#6e6e73;
    --accent:#0a1d3d; --accent-soft:#1f3a6b;
    --border:#e6e6ea; --soft:#fafafb; --rule:#ececef;
}
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased;font-feature-settings:"ss01","cv11"}
a{color:var(--text);text-decoration:none;border-bottom:1px solid var(--rule);transition:border-color .15s ease,color .15s ease}
a:hover{color:var(--accent);border-color:var(--accent)}
img{max-width:100%;display:block}

/* Nav — identical to the rest of the site */
.nav{position:sticky;top:0;z-index:100;background:rgba(255,255,255,0.9);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--border)}
.nav-inner{max-width:1120px;margin:0 auto;padding:18px 28px;display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.logo{font-weight:600;font-size:1rem;letter-spacing:-0.01em}
.logo a{border:none;color:var(--text)}
.nav-links{display:flex;gap:28px;font-size:0.93rem}
.nav-links a{color:var(--muted);border:none}
.nav-links a:hover{color:var(--text)}
.nav-links a.active{color:var(--text)}

.container{max-width:1120px;margin:0 auto;padding:0 28px;position:relative}

/* Blog index — list of post links */
.blog-hero{padding:120px 0 56px;border-bottom:1px solid var(--border)}
.blog-hero .container{max-width:760px}
.blog-hero .eyebrow{font-size:0.74rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:0.14em;margin-bottom:20px}
.blog-hero h1{font-size:2.6rem;font-weight:600;line-height:1.1;letter-spacing:-0.03em;margin-bottom:18px}
.blog-hero p{font-size:1.08rem;color:#3a3a3c;line-height:1.65;max-width:620px}

.post-list{padding:64px 0 120px}
.post-list .container{max-width:760px}
.post-item{padding:32px 0;border-bottom:1px solid var(--rule);display:block;border-left:none;border-right:none;border-top:none}
.post-item:hover{border-bottom-color:var(--rule)}
.post-item:hover h2{color:var(--accent)}
.post-meta{font-size:0.84rem;color:var(--muted);font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:0.01em;margin-bottom:10px}
.post-item h2{font-size:1.5rem;font-weight:600;letter-spacing:-0.015em;margin-bottom:8px;color:var(--text);transition:color .15s ease;line-height:1.3}
.post-item .post-summary{font-size:1rem;color:#3a3a3c;line-height:1.6}
.post-list-empty{padding:40px 0;color:var(--muted);font-style:italic}

/* Individual post — narrow prose column */
.post-header{padding:120px 0 48px;border-bottom:1px solid var(--border)}
.post-header .container{max-width:720px}
.post-header .eyebrow{font-size:0.74rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:0.14em;margin-bottom:20px}
.post-header .eyebrow a{color:var(--muted);border:none}
.post-header .eyebrow a:hover{color:var(--text)}
.post-header h1{font-size:2.4rem;font-weight:600;line-height:1.15;letter-spacing:-0.025em;margin-bottom:18px}
.post-header .post-meta{margin-bottom:0}
.post-header .post-dek{font-size:1.15rem;color:#3a3a3c;line-height:1.55;margin-top:16px}

.post-body{padding:56px 0 120px}
.post-body .container{max-width:720px}
.post-body p{font-size:1.08rem;line-height:1.75;color:#1d1d1f;margin-bottom:24px}
.post-body h2{font-size:1.6rem;font-weight:600;letter-spacing:-0.015em;margin:48px 0 16px;line-height:1.25}
.post-body h3{font-size:1.2rem;font-weight:600;letter-spacing:-0.01em;margin:36px 0 12px;line-height:1.3}
.post-body ul,.post-body ol{margin:0 0 24px 24px}
.post-body li{font-size:1.08rem;line-height:1.7;color:#1d1d1f;margin-bottom:8px}
.post-body blockquote{margin:32px 0;padding:8px 0 8px 24px;border-left:3px solid var(--accent-soft);color:#3a3a3c;font-size:1.08rem;line-height:1.7}
.post-body code{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:0.92em;background:var(--soft);padding:2px 6px;border-radius:3px;color:var(--accent)}
.post-body pre{background:var(--soft);border:1px solid var(--border);border-radius:6px;padding:18px 22px;overflow-x:auto;margin:0 0 24px;font-size:0.9rem;line-height:1.55}
.post-body pre code{background:none;padding:0;color:var(--text)}
.post-body a{color:var(--text);border-bottom:1px solid var(--accent-soft)}
.post-body a:hover{color:var(--accent);border-color:var(--accent)}
.post-body hr{border:none;border-top:1px solid var(--rule);margin:48px 0}
.post-body strong{font-weight:600;color:var(--text)}
.post-body sub{font-size:0.85em;color:var(--muted)}

/* Data tables — long-form technical posts */
.post-body .table-wrap{overflow-x:auto;margin:0 0 24px}
.post-body table{width:100%;border-collapse:collapse;font-size:0.95rem;line-height:1.5}
.post-body th,.post-body td{padding:10px 14px;text-align:left;border-bottom:1px solid var(--rule);vertical-align:top}
.post-body thead th{font-weight:600;color:var(--text);border-bottom:1px solid var(--border);white-space:nowrap}
.post-body tbody tr:last-child td{border-bottom:none}
.post-body td.num,.post-body th.num{text-align:right;font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums}
.post-body table code{font-size:0.88em}

.post-signoff{color:var(--muted);font-size:1.02rem;margin-top:40px}
.post-footer{padding:40px 0 0;border-top:1px solid var(--rule);margin-top:48px;font-size:0.95rem;color:var(--muted)}
.post-footer a{color:var(--muted);border-bottom:1px solid var(--rule)}
.post-footer a:hover{color:var(--text);border-color:var(--text)}

/* Site footer */
footer{padding:36px 0;background:var(--text);color:#a1a1a6;font-size:0.86rem}
footer .container{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
footer a{color:#a1a1a6;border-bottom:1px solid #3a3a3c}
footer a:hover{color:#fff;border-color:#fff}

@media (max-width: 760px){
    .nav-inner{padding:14px 22px}
    .nav-links{gap:18px;font-size:0.86rem}
    .blog-hero{padding:80px 0 40px}
    .blog-hero h1{font-size:2rem}
    .post-header{padding:80px 0 36px}
    .post-header h1{font-size:1.9rem}
    .post-body{padding:40px 0 80px}
    .post-body p,.post-body li{font-size:1.02rem}
}