/* miskeens /blog — sections, filters, motion. Layered on top of the existing look; remove the two
   <link>/<script> tags in blog.html (and this file + blog-ui.js) to go back to the plain grid. */
.blog-grid.bx-hidden{display:none}
.bx{padding:6px 0 70px}

/* hero extras */
.bx-live{display:inline-flex;align-items:center;gap:8px;margin-top:20px;font:10px "DM Mono",monospace;letter-spacing:.12em;color:var(--lime);border:1px solid #3a4a2a;padding:7px 11px;background:#c9ff4510}
.bx-live i{width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 0 #c9ff4590;animation:bxping 1.9s infinite}
@keyframes bxping{70%{box-shadow:0 0 0 9px #c9ff4500}100%{box-shadow:0 0 0 0 #c9ff4500}}
.bx-stats{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.bx-stat{min-width:122px;border:1px solid #2b3430;background:#0e1213;padding:12px 16px;position:relative;overflow:hidden}
.bx-stat:before{content:"";position:absolute;left:0;top:0;height:2px;width:40%;background:var(--lime);animation:bxslide 3.4s ease-in-out infinite alternate}
@keyframes bxslide{to{width:100%}}
.bx-stat b{display:block;font:600 26px "Space Grotesk",sans-serif;letter-spacing:-.04em}
.bx-stat span{font:9px "DM Mono",monospace;letter-spacing:.12em;color:#7f8d86}

/* toolbar: search + topic chips */
.bx-bar{position:sticky;top:0;z-index:5;display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:12px 0;margin-bottom:14px;background:linear-gradient(#090b0d 70%,#090b0d00);backdrop-filter:blur(6px)}
.bx-search{flex:1 1 220px;min-width:0;display:flex;align-items:center;gap:10px;border:1px solid #2b3430;background:#0e1213;padding:0 14px;transition:border-color .2s,box-shadow .2s}
.bx-search:focus-within{border-color:var(--lime);box-shadow:0 0 0 3px #c9ff4514}
.bx-search span{color:#6e7b75;font-size:13px}
.bx-search input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--text);font:13px "Space Grotesk",sans-serif;padding:13px 0}
.bx-chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px}
.bx-chips::-webkit-scrollbar{display:none}
.bx-chip{white-space:nowrap;border:1px solid #2b3430;background:#0e1213;color:#a6b2ab;padding:10px 13px;font:10px "DM Mono",monospace;letter-spacing:.1em;cursor:pointer;transition:.2s;display:flex;gap:8px;align-items:center}
.bx-chip i{width:7px;height:7px;border-radius:50%;background:var(--c,#849195)}
.bx-chip em{font-style:normal;color:#6e7b75}
.bx-chip:hover{border-color:var(--c,var(--lime));color:#fff}
.bx-chip.on{background:var(--c,var(--lime));border-color:var(--c,var(--lime));color:#0b0f08}
.bx-chip.on i{background:#0b0f08}.bx-chip.on em{color:#0b0f08aa}

/* sections */
.bx-sec{margin-bottom:46px}
.bx-head{display:flex;align-items:center;gap:12px;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid #1f2729;position:relative}
.bx-head:after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:90px;background:var(--c,var(--lime));box-shadow:0 0 14px var(--c,var(--lime))}
.bx-head h2{font:600 11px "DM Mono",monospace;letter-spacing:.16em;color:#e7efe9;display:flex;align-items:center;gap:10px;margin:0}
.bx-head h2 i{width:9px;height:9px;background:var(--c,var(--lime));display:inline-block;transform:rotate(45deg)}
.bx-count{font:9px "DM Mono",monospace;letter-spacing:.1em;color:#7f8d86;border:1px solid #2b3430;padding:4px 7px}
.bx-all{margin-left:auto;font:10px "DM Mono",monospace;letter-spacing:.1em;color:var(--c,var(--lime));text-decoration:none;opacity:.85;transition:.2s}
.bx-all:hover{opacity:1;letter-spacing:.16em}
.bx-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.bx-flat{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.bx-latest{display:grid;grid-template-columns:1.35fr 1fr;grid-template-rows:auto auto;gap:16px}
.bx-latest .bx-feature{grid-row:1/3}

/* cards: same card, more alive */
.bx .post-card{position:relative;overflow:hidden;opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease,border-color .2s,background .2s,box-shadow .25s}
.bx .post-card.in{opacity:1;transform:none}
.bx .post-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px #0008,0 0 0 1px #c9ff4533}
.bx .post-card:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .25s;background:radial-gradient(240px circle at var(--mx,50%) var(--my,0%),#c9ff4518,transparent 70%)}
.bx .post-card:hover:before{opacity:1}
.bx .post-card .post-tag{border-color:var(--c,#3a4440);color:var(--c,var(--lime))}
.bx .post-card:after{content:"";position:absolute;left:0;top:0;width:3px;height:0;background:var(--c,var(--lime));transition:height .3s}
.bx .post-card:hover:after{height:100%}
.bx-new{position:absolute;right:14px;top:14px;font:700 9px "DM Mono",monospace;letter-spacing:.14em;color:#0b0f08;background:var(--lime);padding:4px 7px;animation:bxblink 2.2s ease-in-out infinite}
@keyframes bxblink{50%{box-shadow:0 0 14px #c9ff4599}}
.bx-feature{padding:30px!important;justify-content:flex-end;min-height:330px;background:linear-gradient(160deg,#141d12,#0e1213 60%)!important}
.bx-feature h2{font-size:clamp(24px,3vw,34px)!important;line-height:1.12!important}
.bx-feature p{font-size:14px!important;max-width:34em}
.bx-feature .bx-go{font:11px "DM Mono",monospace;letter-spacing:.12em;color:var(--lime);margin-top:6px;transition:letter-spacing .2s}
.bx-feature:hover .bx-go{letter-spacing:.2em}
.bx-feature:before{opacity:.5}

/* explore tiles */
.bx-explore .bx-row{grid-template-columns:repeat(4,1fr)}
.bx-tile{display:flex;flex-direction:column;gap:6px;border:1px solid #2b3430;background:#0e1213;padding:18px;text-decoration:none;color:var(--text);transition:.25s;position:relative;overflow:hidden}
.bx-tile b{font:600 15px "Space Grotesk",sans-serif}
.bx-tile span{font-size:12px;color:#8d9a94;line-height:1.5}
.bx-tile em{font:10px "DM Mono",monospace;letter-spacing:.12em;color:var(--lime);font-style:normal;margin-bottom:4px}
.bx-tile:hover{border-color:var(--lime);transform:translateY(-3px);background:#c9ff450a}
.bx-empty{grid-column:1/-1;text-align:center;color:#7f8d86;padding:50px 10px;border:1px dashed #2b3430;font-size:14px}

@media(max-width:980px){.bx-row,.bx-flat{grid-template-columns:repeat(2,1fr)}.bx-explore .bx-row{grid-template-columns:repeat(2,1fr)}.bx-latest{grid-template-columns:1fr}.bx-latest .bx-feature{grid-row:auto;min-height:260px}}
@media(max-width:620px){.bx-row,.bx-flat,.bx-explore .bx-row{grid-template-columns:1fr}.bx-stat{flex:1 1 40%}.bx-bar{position:static}}
@media(prefers-reduced-motion:reduce){.bx .post-card{opacity:1;transform:none;transition:none}.bx-live i,.bx-stat:before,.bx-new{animation:none}}