/* The blog (/blog): landing.css provides the tokens, header, footer and
   buttons; this adds a narrow reading column and article typography. */

.blog main{ padding-bottom:64px; }
.wrap.narrow{ max-width:760px; }

.blog-head{ padding:56px 0 24px; }
.blog-head .eyebrow{ margin:0 0 10px; font-size:13px; font-weight:800; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-3, #6B6F78); }
.blog-head h1{ margin:0; font-size:clamp(34px, 6vw, 52px); line-height:1.05; letter-spacing:-0.03em; font-weight:800; }
.blog-head .lede{ margin:16px 0 0; font-size:18px; line-height:1.55; color:var(--ink-2, #3D4048); max-width:620px; }

.post-list .wrap{ display:flex; flex-direction:column; gap:14px; }
.post-item a{ display:block; text-decoration:none; color:inherit; background:var(--bg-card); border-radius:22px; padding:22px 24px; box-shadow:0 1px 2px rgba(14,15,18,0.04); transition:transform .15s ease, box-shadow .15s ease; }
.post-item a:hover{ transform:translateY(-2px); box-shadow:0 10px 30px rgba(14,15,18,0.08); }
.post-item h2{ margin:6px 0 8px; font-size:22px; line-height:1.25; letter-spacing:-0.015em; font-weight:800; }
.post-item p{ margin:0; font-size:15.5px; line-height:1.55; color:var(--ink-2, #3D4048); }
.post-meta{ margin:0; font-size:13px; font-weight:600; color:var(--ink-3, #6B6F78); }
.post-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:12px !important; }
.post-tags span{ font-size:12px; font-weight:700; padding:3px 10px; border-radius:999px; background:var(--bg-elevated); color:var(--ink-2, #3D4048); }
.empty{ color:var(--ink-3, #6B6F78); }

.post{ padding:36px 0 0; }
.crumbs{ margin:0 0 18px; font-size:14px; font-weight:600; }
.crumbs a{ text-decoration:none; color:var(--ink-3, #6B6F78); }
.crumbs a:hover{ color:var(--ink); }
.post-header h1{ margin:0 0 12px; font-size:clamp(30px, 5.4vw, 46px); line-height:1.08; letter-spacing:-0.03em; font-weight:800; }
.post-header{ margin-bottom:28px; }

.post-body{ font-size:18px; line-height:1.7; color:#23252B; }
.post-body > *:first-child{ margin-top:0; }
.post-body p, .post-body ul, .post-body ol, .post-body blockquote, .post-body pre{ margin:0 0 20px; }
.post-body h2{ margin:40px 0 12px; font-size:26px; line-height:1.25; letter-spacing:-0.02em; font-weight:800; color:var(--ink); }
.post-body h3{ margin:30px 0 10px; font-size:21px; line-height:1.3; font-weight:800; color:var(--ink); }
.post-body h4{ margin:24px 0 8px; font-size:18px; font-weight:800; color:var(--ink); }
.post-body ul, .post-body ol{ padding-left:24px; }
.post-body li{ margin:6px 0; }
.post-body a{ color:var(--ink); text-decoration-thickness:1.5px; text-underline-offset:3px; }
.post-body strong{ color:var(--ink); }
.post-body blockquote{ padding:14px 18px; border-left:3px solid var(--ink); background:var(--bg-card); border-radius:0 14px 14px 0; }
.post-body blockquote p{ margin:0; }
.post-body code{ font-size:0.88em; background:var(--bg-elevated); padding:2px 6px; border-radius:6px; }
.post-body pre{ background:var(--bg-card); padding:16px; border-radius:14px; overflow-x:auto; }
.post-body pre code{ background:none; padding:0; }
.post-body img{ display:block; max-width:100%; height:auto; border-radius:16px; margin:8px auto; }
.post-body .table-wrap{ overflow-x:auto; margin:0 0 20px; }
.post-body table{ border-collapse:collapse; width:100%; font-size:16px; background:var(--bg-card); border-radius:14px; overflow:hidden; }
.post-body th, .post-body td{ text-align:left; padding:10px 14px; border-bottom:1px solid rgba(14,15,18,0.08); }
.post-body th{ font-weight:800; color:var(--ink); background:var(--bg-elevated); }
.post-body tr:last-child td{ border-bottom:0; }
.post-body hr{ border:0; border-top:1px solid rgba(14,15,18,0.12); margin:36px 0; }

.post-note{ margin:32px 0 0; font-size:13.5px; line-height:1.5; color:var(--ink-3, #6B6F78); }
.post-cta{ margin:32px 0 0; background:var(--ink); color:#FFFFFF; border-radius:26px; padding:28px; }
.post-cta h2{ margin:0 0 8px; font-size:24px; letter-spacing:-0.02em; font-weight:800; }
.post-cta p{ margin:0 0 18px; font-size:16px; line-height:1.55; color:rgba(255,255,255,0.78); }
.post-cta .btn--ink{ background:#FFFFFF; color:var(--ink); }

.more-posts{ margin:44px 0 0; display:flex; flex-direction:column; gap:10px; }
.more-posts h2{ margin:0 0 6px; font-size:20px; font-weight:800; }
.more-posts a{ display:flex; flex-direction:column; gap:4px; text-decoration:none; color:inherit; background:var(--bg-card); border-radius:18px; padding:16px 18px; }
.more-posts b{ font-size:16.5px; }
.more-posts span{ font-size:14px; line-height:1.5; color:var(--ink-3, #6B6F78); }

@media (max-width:560px){
  .blog-head{ padding:36px 0 16px; }
  .post-item a{ padding:18px; }
  .post-body{ font-size:17px; }
  .post-cta{ padding:22px; }
}