/* Blog additions on top of the app stylesheet. The design system,
   fonts, colors and nav all come from /styles.css so the blog and
   The Whiteboard can never drift apart. */
html,body{height:auto;overflow:auto}
body{font-size:14px;display:block}
.nav{position:sticky;top:0;z-index:20;background:var(--s1)}
a.ntab{text-decoration:none;display:inline-flex;align-items:center}
.blog-wrap{max-width:760px;margin:0 auto;padding:26px 20px 70px}
.blog-head{margin-bottom:6px}
.filters{display:flex;gap:7px;flex-wrap:wrap;margin:20px 0 2px}
.filter{font-size:11px;letter-spacing:1px;text-transform:uppercase;font-weight:600;color:var(--t2);background:var(--s1);border:1px solid var(--border);border-radius:999px;padding:6px 13px;cursor:pointer;font-family:'Inter',sans-serif;transition:all .15s}
.filter:hover{border-color:var(--border-hi);color:var(--t1)}
.filter.on{background:var(--accent);border-color:var(--accent);color:#fff}
.post-card{display:block;background:var(--s1);border:1px solid var(--border);border-radius:10px;padding:20px 22px;text-decoration:none;color:inherit;margin-top:14px;transition:border-color .15s,transform .15s,box-shadow .15s}
.post-card:hover{border-color:var(--border-hi);transform:translateY(-2px);box-shadow:0 8px 24px rgba(20,50,80,.08)}
.post-meta{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--t3);font-weight:600}
.post-meta .label{color:var(--accent)}
.post-card h2{font-size:19px;line-height:1.32;margin-top:8px;font-weight:600;color:var(--t1)}
.post-card p{margin-top:8px;font-size:13px;color:var(--t2);line-height:1.6}
.empty{margin-top:22px;font-size:13px;color:var(--t3)}
article{padding-top:6px}
.article-meta{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--t3);font-weight:600}
.article-meta .label{color:var(--accent)}
article h1{font-size:30px;line-height:1.24;margin-top:10px;font-weight:700;color:var(--t1);letter-spacing:.2px}
.article-body{margin-top:26px;font-size:15.5px;line-height:1.75;color:var(--t1)}
.article-body p{margin-bottom:19px}
.article-body h2{font-size:20px;margin:32px 0 11px;font-weight:700;color:var(--t1)}
.article-body h3{font-size:16px;margin:26px 0 9px;font-weight:600;color:var(--t1)}
.article-body ul,.article-body ol{margin:0 0 19px 21px}
.article-body li{margin-bottom:8px}
.article-body a{color:var(--accent)}
.article-body strong{font-weight:600}
.article-body blockquote{border-left:3px solid var(--accent);padding:3px 0 3px 17px;margin:0 0 19px;color:var(--t2)}
.article-body hr{border:none;border-top:1px solid var(--border);margin:30px 0}
.article-body code{background:var(--s2);border:1px solid var(--border);border-radius:var(--radius);padding:1px 5px;font-size:13.5px}
.article-body figure{margin:0 0 21px}
.article-body img{max-width:100%;height:auto;border-radius:10px;display:block}
.table-wrap{overflow-x:auto;margin-bottom:21px}
.article-body table{width:100%;border-collapse:collapse;font-size:13.5px;background:var(--s1);border:1px solid var(--border);border-radius:10px;overflow:hidden}
.article-body th{text-align:left;font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--t3);padding:10px 13px;background:var(--s2);border-bottom:1px solid var(--border);font-weight:600}
.article-body td{padding:10px 13px;border-bottom:1px solid var(--border);color:var(--t2)}
.article-body tr:last-child td{border-bottom:none}
.cta{margin-top:40px;background:var(--s1);border:1px solid var(--border);border-radius:10px;padding:22px 24px}
.cta-kicker{font-size:10px;letter-spacing:1.8px;text-transform:uppercase;color:var(--accent);font-weight:600}
.cta h3{font-family:'Bebas Neue',sans-serif;font-size:24px;letter-spacing:2.5px;margin-top:7px;font-weight:400;color:var(--t1)}
.cta p{margin-top:8px;font-size:13px;color:var(--t2);line-height:1.6}
.cta-btn{display:inline-block;margin-top:15px;background:var(--accent);color:#fff;text-decoration:none;font-size:13px;font-weight:600;padding:10px 18px;border-radius:var(--radius)}
.cta-btn:hover{filter:brightness(1.08)}
.article-foot{margin-top:30px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:12.5px}
.article-foot a{color:var(--accent);text-decoration:none}
.comments{margin-top:40px}
.blog-foot{border-top:1px solid var(--border);margin-top:44px;padding-top:18px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:11px;color:var(--t3)}
@media (max-width:600px){
  article h1{font-size:24px}
  .article-body{font-size:15px}
  .blog-wrap{padding:20px 16px 56px}
}