/* blog.css — /blog index and articles. Uses the shared kit (opener, band, pane, chip, pill, closer). */
.blog-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;font:500 12px/1 var(--ff-mono);letter-spacing:.04em;color:var(--ink-3)}
.blog-meta>span:not(.tag){position:relative}
.blog-meta>span:not(.tag)+span::before{content:"";position:absolute;left:-8px;top:50%;width:3px;height:3px;margin-top:-1.5px;border-radius:50%;background:var(--ink-4)}
.blog-cat{height:24px;font-size:11px;letter-spacing:.02em}
.blog-cat--guides{color:var(--ice);border-color:rgba(168,220,255,.3);background:rgba(168,220,255,.09)}
.blog-cat--privacy{color:var(--violet);border-color:rgba(185,168,255,.3);background:rgba(185,168,255,.09)}
.blog-cat--security{color:var(--mint);border-color:rgba(116,240,196,.3);background:rgba(116,240,196,.08)}
.blog-cat--crypto{color:var(--amber);border-color:rgba(255,196,112,.3);background:rgba(255,196,112,.08)}

.blog-feature{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(20px,4vw,56px);align-items:center;--pane-pad:clamp(26px,4vw,52px)}
.blog-feature h2{font-size:clamp(26px,3.4vw,42px);letter-spacing:-.04em;line-height:1.1;margin:18px 0 14px}
.blog-feature p{font-size:clamp(15px,1.4vw,17.5px);line-height:1.7;color:var(--ink-2);max-width:60ch}
.blog-more{display:inline-flex;align-items:center;gap:8px;margin-top:22px;font-weight:600;font-size:14.5px;color:var(--ice)}
.blog-more .ic{width:16px;height:16px;transition:transform .3s var(--ease)}
.blog-feature:hover .blog-more .ic{transform:translateX(4px)}
.blog-feature__art{position:relative;aspect-ratio:1;max-width:210px;width:100%;justify-self:center}
.blog-feature__art i{position:absolute;inset:0;border-radius:50%;border:1px solid var(--edge-2)}
.blog-feature__art i:nth-child(2){inset:14%;border-color:rgba(168,220,255,.28)}
.blog-feature__art i:nth-child(3){inset:30%;border-color:rgba(168,220,255,.4);background:radial-gradient(circle,rgba(168,220,255,.16),transparent 70%)}
.blog-feature__art b{position:absolute;inset:0;display:grid;place-items:center;color:var(--ice)}
.blog-feature__art b .ic{width:42px;height:42px;stroke-width:1.4}

.blog-filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.blog-filter .chip{cursor:pointer;font-family:inherit}
.blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,22px)}
.blog-card{display:flex;flex-direction:column;gap:16px;height:100%;--pane-pad:24px}
.blog-card[hidden]{display:none}
.blog-card h3{font-size:19px;line-height:1.28;letter-spacing:-.03em;color:var(--ink)}
.blog-card p{flex:1;font-size:14.5px;line-height:1.65;color:var(--ink-3)}
.blog-card__foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:14px;border-top:1px solid var(--edge);font:400 12px/1 var(--ff-mono);color:var(--ink-3)}
.sv-go{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid var(--edge);color:var(--ink-2);transition:background .25s,color .25s,transform .3s var(--ease)}
.sv-go .ic{width:15px;height:15px}
.blog-card:hover .sv-go{background:#fff;color:#0a0b0d;transform:translateX(3px) rotate(-45deg)}

/* article */
.blog-toc{margin-bottom:40px;--pane-pad:22px 26px}
.blog-toc b{display:block;margin-bottom:12px;font:500 11px/1 var(--ff-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.blog-toc ol{margin:0;padding:0;list-style:none;counter-reset:t;display:grid;gap:9px}
.blog-toc li{counter-increment:t;display:flex;gap:12px;font-size:15px}
.blog-toc li::before{content:counter(t,decimal-leading-zero);font:500 12px/1.9 var(--ff-mono);color:var(--ink-4)}
.blog-toc a{color:var(--ink-2);transition:color .2s}
.blog-toc a:hover{color:var(--ice)}

.blog-body{font-size:17.5px;line-height:1.8;color:var(--ink-2)}
.blog-body>*+*{margin-top:1.15em}
.blog-body h2{margin-top:2.4em;font-size:clamp(24px,2.8vw,32px);line-height:1.18;letter-spacing:-.035em;color:var(--ink);scroll-margin-top:110px}
.blog-body h3{margin-top:1.9em;font-size:clamp(19px,2vw,22px);letter-spacing:-.025em;color:var(--ink);scroll-margin-top:110px}
.blog-body p,.blog-body li{color:var(--ink-2)}
.blog-body strong{color:var(--ink);font-weight:620}
.blog-body a{color:var(--ice);text-decoration:underline;text-decoration-color:rgba(168,220,255,.35);text-underline-offset:3px;transition:text-decoration-color .2s}
.blog-body a:hover{text-decoration-color:var(--ice)}
.blog-body ul,.blog-body ol{padding-inline-start:1.3em;display:grid;gap:.6em}
.blog-body ul{list-style:none;padding-inline-start:0}
.blog-body ul li{position:relative;padding-inline-start:1.4em}
.blog-body ul li::before{content:"";position:absolute;inset-inline-start:.15em;top:.78em;width:6px;height:6px;border-radius:50%;background:rgba(168,220,255,.6)}
.blog-body ol li::marker{font-family:var(--ff-mono);color:var(--ink-3);font-size:.9em}
.blog-body code{font:500 .86em var(--ff-mono);padding:.15em .45em;border-radius:6px;background:rgba(255,255,255,.08);border:1px solid var(--edge);color:var(--ink)}
.blog-body pre{margin-top:1.3em;padding:18px 20px;border-radius:var(--r-md);background:rgba(0,0,0,.45);border:1px solid var(--edge);overflow-x:auto;font:400 13.5px/1.7 var(--ff-mono);color:#d7e6f5;tab-size:2}
.blog-body pre code{padding:0;background:none;border:0;font-size:inherit;color:inherit}
.blog-body blockquote{padding:4px 0 4px 22px;border-inline-start:2px solid var(--ice);color:var(--ink);font-size:1.08em}
.blog-body table{width:100%;border-collapse:collapse;font-size:15px;display:block;overflow-x:auto}
.blog-body th{text-align:start;padding:12px 14px;font:500 11.5px/1 var(--ff-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);border-bottom:1px solid var(--edge-2);white-space:nowrap}
.blog-body td{padding:12px 14px;border-bottom:1px solid var(--edge);color:var(--ink-2);vertical-align:top}
.blog-body td:first-child{color:var(--ink);font-weight:550}
.blog-body .callout{display:block;padding:18px 22px;border-radius:var(--r-md);background:rgba(168,220,255,.07);border:1px solid rgba(168,220,255,.22);font-size:16px;line-height:1.7}
.blog-body .callout b{display:block;margin-bottom:4px;font:600 11px/1 var(--ff-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ice)}
.blog-body .callout--warn{background:rgba(255,196,112,.07);border-color:rgba(255,196,112,.26)}
.blog-body .callout--warn b{color:var(--amber)}

.blog-cta{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:56px;--pane-pad:26px 30px}
.blog-cta b{display:block;font-size:20px;letter-spacing:-.03em;color:var(--ink);margin-bottom:5px}
.blog-cta span{font-size:15px;color:var(--ink-3)}

@media(max-width:1000px){.blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.blog-feature{grid-template-columns:1fr}.blog-feature__art{display:none}}
@media(max-width:640px){.blog-grid{grid-template-columns:minmax(0,1fr)}.blog-body{font-size:16.5px}}

/* article figures */
.blog-fig{margin:2em 0;padding:0}
.blog-fig img{display:block;width:100%;height:auto;border-radius:var(--r-md);border:1px solid var(--edge);background:#0a0c12}
.blog-fig figcaption{margin-top:10px;font-size:13.5px;line-height:1.5;color:var(--ink-3);text-align:center}

/* article FAQ */
.blog-faq{margin-top:2.6em}
.blog-faq h2{font-size:clamp(22px,2.6vw,28px);letter-spacing:-.03em;color:var(--ink);margin-bottom:.7em}
.blog-faq details{border-top:1px solid var(--edge);padding:0}
.blog-faq details:last-child{border-bottom:1px solid var(--edge)}
.blog-faq summary{cursor:pointer;list-style:none;padding:16px 34px 16px 0;font-weight:600;color:var(--ink);position:relative;line-height:1.4}
.blog-faq summary::-webkit-details-marker{display:none}
.blog-faq summary::after{content:"+";position:absolute;inset-inline-end:4px;top:13px;font-size:22px;color:var(--ice);transition:transform .2s}
.blog-faq details[open] summary::after{transform:rotate(45deg)}
.blog-faq details p{padding:0 0 18px;color:var(--ink-2);line-height:1.75}
.blog-meta a{color:inherit;text-decoration:underline;text-decoration-color:rgba(255,255,255,.25);text-underline-offset:3px}

/* card spacing: the .pane rule sets display:block, so flex and the gaps are restated with higher specificity */
.pane.blog-card{display:flex;flex-direction:column;gap:0}
.blog-card .blog-meta{margin-bottom:16px}
.blog-card h3{margin-bottom:12px}
.blog-card p{margin-bottom:20px}