/* Blog refinement layer (2026-10-09), shared by blog.html and blog-post.html and loaded after
   their inline styles. Same system as the homepage, academy and admin: flat surfaces with
   hairline borders (no live backdrop blur on cards, which made scrolling heavy), larger radii,
   one motion curve, line icons instead of emoji. */

:root{
  --ease:cubic-bezier(.32,.72,0,1);
  --hair:rgba(255,255,255,.08);
  --hair-strong:rgba(255,255,255,.14);
  --surface:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.022));
  --solid:#0c1422;
  --lift:0 1px 0 rgba(255,255,255,.05) inset,0 18px 40px -24px rgba(0,0,0,.75);
  --green:#30d68b;
  --text:#f3f6fa;
  --muted:#9aacbf;
}
html{background:#05090f}
body{background:radial-gradient(1000px 520px at 82% -8%,rgba(48,214,139,.07),transparent 62%),radial-gradient(820px 520px at -8% 24%,rgba(64,132,255,.06),transparent 60%),#05090f;color:var(--text);letter-spacing:-.006em}
:is(a,button,input,textarea,[tabindex]):focus-visible{outline:2px solid rgba(48,214,139,.85);outline-offset:3px;border-radius:8px}
.ico{display:inline-block;width:1.05em;height:1.05em;vertical-align:-.16em;flex:none}

/* ── Header ──────────────────────────────────────────────── */
header{background:rgba(6,11,19,.62);border-bottom:1px solid var(--hair);backdrop-filter:saturate(180%) blur(22px);-webkit-backdrop-filter:saturate(180%) blur(22px)}
header.scrolled{box-shadow:0 10px 30px -18px rgba(0,0,0,.8)}
.logo-mark{border-radius:10px}
.nav-links{gap:4px}
.nav-links a{padding:7px 12px;border-radius:999px;font-size:13.5px;color:#b4c3d3;transition:background-color .25s var(--ease),color .25s var(--ease)}
.nav-links a:hover{background:rgba(255,255,255,.07);color:#fff}
.nav-links a.active{background:rgba(48,214,139,.12);color:var(--green)}
.nav-links a.nav-cta,.nav-cta{padding:8px 16px;border-radius:999px;background:linear-gradient(180deg,#3fe59c,#24c47c);color:#04140c;box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 8px 20px -10px rgba(48,214,139,.8);transition:transform .25s var(--ease),filter .25s var(--ease)}
.nav-links a.nav-cta:hover,.nav-cta:hover{background:linear-gradient(180deg,#55eeaa,#2bd086);color:#04140c;transform:translateY(-1px)}
.back-link{padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.06);color:#cfdae6;white-space:nowrap;transition:background-color .25s var(--ease),color .25s var(--ease)}
.back-link:hover{background:rgba(255,255,255,.12);color:#fff}
.mob{background:rgba(8,13,22,.94);border-bottom:1px solid var(--hair);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}
.mob.open{animation:bFade .35s var(--ease) both}
.mob a{border-bottom:1px solid var(--hair)}

/* ── Blog list: hero and filters ─────────────────────────── */
.blog-hero{padding:72px 0 36px;border-bottom:0}
.blog-hero>*{animation:bRise .8s var(--ease) both}
.blog-hero>*:nth-child(2){animation-delay:.07s}
.blog-hero>*:nth-child(3){animation-delay:.14s}
.blog-hero>*:nth-child(4){animation-delay:.21s}
.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border:1px solid rgba(48,214,139,.25);border-radius:999px;background:rgba(48,214,139,.1);color:var(--green);font-size:10.5px;letter-spacing:.14em;margin-bottom:20px}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.blog-hero h1{font-size:clamp(40px,6.4vw,72px);letter-spacing:-.045em;line-height:1}
.blog-hero p{font-size:17.5px;line-height:1.6;color:#b9c7d6}
.filter-bar{gap:6px;padding:26px 0 0}
.filter-btn{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border:1px solid var(--hair);border-radius:999px;background:rgba(255,255,255,.05);color:#b4c3d3;font:500 13px 'DM Sans',system-ui,sans-serif;letter-spacing:0;transition:background-color .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),transform .25s var(--ease)}
.filter-btn:hover{background:rgba(255,255,255,.1);border-color:var(--hair-strong);color:#fff}
.filter-btn:active{transform:scale(.96)}
.filter-btn.active{background:#fff;border-color:#fff;color:#05090f}
.filter-btn .ico{width:14px;height:14px;vertical-align:0}

/* ── Cards ───────────────────────────────────────────────── */
.blog-grid{gap:18px;margin:28px 0 8px}
.post-card{display:flex;flex-direction:column;color:inherit;text-decoration:none;border:1px solid var(--hair);border-radius:22px;background:var(--surface),var(--solid);backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:var(--lift);transition:transform .5s var(--ease),border-color .45s var(--ease),opacity .7s var(--ease);cursor:pointer}
.post-card:hover{transform:translateY(-4px);border-color:var(--hair-strong);box-shadow:var(--lift)}
.post-card.reveal{transition-delay:calc(var(--i,0) * 60ms)}
.post-card.reveal.in-view:hover{transition-delay:0s}
.card-img{height:210px;background:#0a111c}
.card-img img{transition:transform .9s var(--ease)}
.post-card:hover .card-img img{transform:scale(1.05)}
.card-img-ph{background:radial-gradient(260px 160px at 50% 40%,rgba(48,214,139,.14),transparent 70%),#0a111c;color:var(--green)}
.card-img-ph .ico{width:40px;height:40px;stroke-width:1.5}
.card-body{padding:22px}
.card-cat{display:flex;align-items:center;gap:6px;font-size:10px;letter-spacing:.12em;color:var(--green);margin-bottom:12px}
.card-cat .ico{width:13px;height:13px;vertical-align:0}
.card-body h3{font-size:18.5px;line-height:1.25;letter-spacing:-.025em;overflow-wrap:anywhere}
.card-body p{font-size:14px;line-height:1.6;color:var(--muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card-footer{border-top:1px solid var(--hair);font-size:10.5px;color:#7689a0}
.card-read{color:#fff;transition:gap .35s var(--ease),color .25s var(--ease)}
.post-card:hover .card-read{color:var(--green)}
/* The newest post leads as a wide card on larger screens. */
@media(min-width:901px){
  .post-card.lead{grid-column:1/-1;flex-direction:row;min-height:340px}
  .post-card.lead .card-img{flex:1.25;height:auto}
  .post-card.lead .card-body{flex:1;justify-content:center;padding:36px}
  .post-card.lead h3{font-size:clamp(24px,2.6vw,32px);line-height:1.12;letter-spacing:-.035em;margin-bottom:14px}
  .post-card.lead p{font-size:15.5px;flex:none;margin-bottom:22px;-webkit-line-clamp:4}
}
/* Loading placeholders */
.post-card.skel{cursor:default;pointer-events:none}
.post-card.skel .card-img,.post-card.skel i{background:linear-gradient(90deg,rgba(255,255,255,.04) 20%,rgba(255,255,255,.09) 42%,rgba(255,255,255,.04) 64%);background-size:300% 100%;animation:bShimmer 1.6s linear infinite}
.post-card.skel i{display:block;height:12px;border-radius:6px;margin-bottom:12px}
.post-card.skel i:nth-child(1){width:34%}
.post-card.skel i:nth-child(2){width:92%;height:18px}
.post-card.skel i:nth-child(3){width:68%}
.blog-empty .ei{color:#7689a0}

/* ── Shared call-to-action and footer ────────────────────── */
.blog-cta,.post-cta{border:1px solid rgba(48,214,139,.22);border-radius:24px;background:radial-gradient(600px 260px at 50% 0%,rgba(48,214,139,.16),transparent 70%),var(--solid);box-shadow:var(--lift)}
.blog-cta::before{display:none}
.blog-cta h3,.post-cta h3{letter-spacing:-.035em}
.blog-cta p,.post-cta p{color:#b9c7d6}
.cta-btn,.tg-btn,.state-btn{border-radius:13px;background:linear-gradient(180deg,#3fe59c,#24c47c);color:#04140c;box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 10px 24px -12px rgba(48,214,139,.9);transition:transform .25s var(--ease),filter .25s var(--ease)}
.cta-btn:hover,.tg-btn:hover,.state-btn:hover{background:linear-gradient(180deg,#55eeaa,#2bd086);transform:translateY(-1px)}
.cta-btn:active,.tg-btn:active,.state-btn:active,.share-btn:active{transform:scale(.97)}
footer{background:transparent;border-top:1px solid var(--hair)}
.foot-copy{border-top:1px solid var(--hair)}

/* ── Article page ────────────────────────────────────────── */
.read-bar{position:fixed;top:0;left:0;right:0;height:3px;z-index:300;background:linear-gradient(90deg,#30d68b,#7fb6ff);transform:scaleX(0);transform-origin:0 50%;will-change:transform}
.spinner{border:2px solid rgba(255,255,255,.1);border-top-color:var(--green)}
.state-icon{color:#7689a0}
.state-icon .ico{width:52px;height:52px;stroke-width:1.5}
.article-wrap{max-width:740px}
.article-header{padding:56px 0 30px}
.article-header>*,.featured-image,.article-body{animation:bRise .8s var(--ease) both}
.article-header>*:nth-child(2){animation-delay:.06s}
.article-header>*:nth-child(3){animation-delay:.12s}
.featured-image{animation-delay:.18s}
.article-body{animation-delay:.24s}
.category-badge{display:inline-block;border:1px solid rgba(48,214,139,.25);background:rgba(48,214,139,.1);color:var(--green);font-size:10.5px}
.article-header h1{font-size:clamp(32px,5.4vw,54px);line-height:1.06;letter-spacing:-.045em;overflow-wrap:anywhere}
.article-meta{border-bottom:1px solid var(--hair);gap:14px 18px}
.meta-div{background:var(--hair)}
.meta-item{gap:6px;color:#8fa1b5;font-size:11.5px}
.meta-item .ico{width:13px;height:13px;vertical-align:0}
.featured-image{margin:28px 0 40px;border:1px solid var(--hair);border-radius:22px;background:#0a111c;box-shadow:0 30px 60px -34px rgba(0,0,0,.9)}
.featured-image img{aspect-ratio:auto}
.article-body{font-size:18px;line-height:1.8;color:#d6e0ea}
.article-body p{margin-bottom:24px}
.article-body h2{font-size:clamp(23px,3.2vw,30px);letter-spacing:-.035em;margin:52px 0 16px}
.article-body h3{font-size:21px;letter-spacing:-.025em;margin:36px 0 12px}
.article-body a{color:var(--green);text-decoration-color:rgba(48,214,139,.4);text-underline-offset:3px;transition:text-decoration-color .25s var(--ease)}
.article-body blockquote{margin:30px 0;padding:20px 24px;border:1px solid var(--hair);border-left:3px solid var(--green);border-radius:4px 16px 16px 4px;background:rgba(255,255,255,.04);color:#c3d0dd}
.article-body img{border:1px solid var(--hair);border-radius:16px}
.article-body hr{border-top:1px solid var(--hair);margin:44px 0}
.article-body ul,.article-body ol{gap:10px}
.article-body li::marker{color:var(--green)}
.article-body pre,.article-body code{border-radius:8px;background:rgba(255,255,255,.07);font-family:'JetBrains Mono',monospace;font-size:.88em}
.article-body code{padding:2px 6px}
.article-body pre{padding:16px 18px;border:1px solid var(--hair)}
.article-body pre code{padding:0;background:none}
.share-section,.author-bio,.comments-section{border:1px solid var(--hair);border-radius:22px;background:var(--surface),var(--solid);backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:var(--lift)}
.share-title{display:flex;align-items:center;gap:8px}
.share-btn{border:1px solid var(--hair);border-radius:12px;background:rgba(255,255,255,.05);transition:background-color .25s var(--ease),transform .25s var(--ease),border-color .25s var(--ease)}
.share-btn:hover{transform:translateY(-2px);border-color:var(--hair-strong)}
.tg-discuss{margin-top:0;border:1px solid var(--hair);border-radius:16px;background:rgba(255,255,255,.04)}
.comments-section h2{margin-bottom:16px;letter-spacing:-.03em}
.tg-btn .ico{margin-right:2px}
.more-posts{margin:0 0 64px}
.more-posts h2{font:800 24px 'Bricolage Grotesque',system-ui,sans-serif;letter-spacing:-.035em;color:var(--text);margin-bottom:16px}
.more-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.more-card{display:flex;flex-direction:column;border:1px solid var(--hair);border-radius:18px;overflow:hidden;background:var(--surface),var(--solid);color:inherit;text-decoration:none;transition:transform .5s var(--ease),border-color .45s var(--ease);animation:bRise .7s var(--ease) both}
.more-card:nth-child(2){animation-delay:.07s}
.more-card:nth-child(3){animation-delay:.14s}
.more-card:hover{transform:translateY(-3px);border-color:var(--hair-strong)}
.more-img{position:relative;height:120px;background:radial-gradient(200px 120px at 50% 40%,rgba(48,214,139,.14),transparent 70%),#0a111c;overflow:hidden}
.more-img img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s var(--ease)}
.more-card:hover .more-img img{transform:scale(1.05)}
.more-ph{position:absolute;inset:0;display:grid;place-items:center;color:var(--green)}
.more-ph .ico{width:28px;height:28px;stroke-width:1.5}
.more-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:8px;flex:1}
.more-body .card-cat{margin:0;font:500 9.5px 'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.12em;color:var(--green)}
.more-body h3{font:700 15px/1.3 'Bricolage Grotesque',system-ui,sans-serif;letter-spacing:-.02em;color:var(--text);overflow-wrap:anywhere;flex:1}
.more-meta{font:500 11px 'JetBrains Mono',monospace;color:#8fa1b5}

/* ── Motion ──────────────────────────────────────────────── */
@keyframes bRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes bFade{from{opacity:0}to{opacity:1}}
@keyframes bShimmer{from{background-position:200% 0}to{background-position:-200% 0}}
.reveal{transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in-view{transform:none}
main#mainContent.reveal{opacity:1;transform:none}

/* ── Phones and tablets ──────────────────────────────────── */
@media(max-width:900px){
  .blog-grid{grid-template-columns:1fr 1fr}
  .more-grid{grid-template-columns:1fr}
  .more-card{flex-direction:row}
  .more-img{flex:none;width:112px;height:auto;min-height:92px}
}
@media(max-width:640px){
  .wrap,.article-wrap{padding-left:18px;padding-right:18px}
  .blog-hero{padding:44px 0 24px}
  .blog-hero p{font-size:16px}
  .blog-grid{grid-template-columns:1fr;gap:14px;margin-top:22px}
  /* Filters scroll sideways in one row instead of stacking into three. */
  .filter-bar{flex-wrap:nowrap;overflow-x:auto;margin:0 -18px;padding:22px 18px 4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .filter-bar::-webkit-scrollbar{display:none}
  .filter-btn{flex:none}
  .card-img{height:190px}
  .blog-cta,.post-cta{padding:32px 20px;border-radius:20px}
  .blog-cta .cta-btn,.post-cta .cta-btn{width:100%;justify-content:center}
  .article-header{padding:36px 0 24px}
  .article-body{font-size:17px;line-height:1.75}
  .featured-image{border-radius:16px;margin:22px 0 30px}
  .share-section,.author-bio,.comments-section{padding:22px 18px;border-radius:18px}
  .share-buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .share-btn{justify-content:center}
  .share-btn span{display:inline}
  .tg-discuss{flex-direction:column;align-items:stretch;text-align:left}
  .tg-btn{justify-content:center}
  .logo-name{font-size:15px}
  .back-link{font-size:11px;padding:6px 10px}
}
/* Reduced motion: nothing slides or zooms, but content still fades in. */
@media(prefers-reduced-motion:reduce){
  @keyframes bRise{from{opacity:0}to{opacity:1}}
  .post-card.skel .card-img,.post-card.skel i{animation:none}
  .post-card:hover,.more-card:hover,.share-btn:hover{transform:none}
  .read-bar{transition:none}
}
.blog-hero p.eyebrow{font-size:10.5px;line-height:1;max-width:none}

/* ── Blog hero: copy left, illustration right ────────────── */
.blog-hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:8px 40px;align-items:center}
.blog-hero>.filter-bar{grid-column:1/-1}
.bh-copy>*{animation:bRise .8s var(--ease) both}
.bh-copy>*:nth-child(2){animation-delay:.07s}
.bh-copy>*:nth-child(3){animation-delay:.14s}
.bh-copy p.eyebrow{font-size:10.5px;line-height:1;max-width:none}
.bh-art{--mx:0;--my:0;position:relative;height:340px;animation:bFade 1s .2s ease both;pointer-events:none}
.art-glow{position:absolute;left:50%;top:50%;width:440px;height:340px;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(48,214,139,.2),rgba(64,132,255,.1) 55%,transparent 75%)}
/* every piece drifts with the pointer by its own depth (--d), then floats on top of that */
.art-card,.art-chip{position:absolute;translate:calc(var(--mx) * var(--d) * 1px) calc(var(--my) * var(--d) * 1px);transition:translate .6s var(--ease)}
.art-card{width:230px;padding:16px;border:1px solid var(--hair-strong);border-radius:20px;background:linear-gradient(180deg,#141f31,#0c1422);box-shadow:0 30px 60px -30px rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.07) inset}
.art-card i{display:block;height:8px;border-radius:99px;background:rgba(255,255,255,.1);margin-top:10px}
.art-card i.s{width:58%}
.art-ic{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:rgba(48,214,139,.14);border:1px solid rgba(48,214,139,.26);color:var(--green)}
.art-ic .ico{width:17px;height:17px;vertical-align:0}
.art-card ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:9px}
.art-card li{position:relative;height:8px;margin-left:22px;border-radius:99px;background:rgba(255,255,255,.1)}
.art-card li::before{content:"";position:absolute;left:-22px;top:-3px;width:14px;height:14px;border-radius:5px;border:1.5px solid rgba(48,214,139,.5);background:rgba(48,214,139,.12)}
.a1{left:50%;top:26px;margin-left:-128px;width:256px;z-index:3;animation:artFloat 7s ease-in-out infinite}
.a2{left:50%;top:70px;margin-left:-246px;rotate:-9deg;z-index:2;opacity:.92;animation:artFloat 8.5s -2s ease-in-out infinite}
.a3{left:50%;top:60px;margin-left:30px;rotate:8deg;z-index:1;opacity:.88;animation:artFloat 9.5s -4s ease-in-out infinite}
.art-top{display:flex;align-items:center;justify-content:space-between}
.art-dots{display:flex;gap:5px}
.art-dots b{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.16)}
.art-chart{display:block;width:100%;height:132px;margin:12px 0 2px;overflow:visible}
.cn{transform-box:fill-box;transform-origin:50% 100%;animation:artCandle .7s calc(.5s + var(--i) * .09s) var(--ease) both}
.cn line{stroke-width:1.5}
.cn.u rect{fill:#30d68b}.cn.u line{stroke:#30d68b}
.cn.d rect{fill:#ff6b81}.cn.d line{stroke:#ff6b81}
.art-line{fill:none;stroke:#7fb6ff;stroke-width:2.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:artDraw 1.6s 1.3s var(--ease) forwards;filter:drop-shadow(0 0 6px rgba(127,182,255,.6))}
.art-chip{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border:1px solid var(--hair-strong);border-radius:999px;background:rgba(18,28,44,.92);color:#e6edf5;font:500 12px 'DM Sans',system-ui,sans-serif;white-space:nowrap;box-shadow:0 14px 30px -16px rgba(0,0,0,.9);z-index:4}
.art-chip .ico{width:13px;height:13px;color:var(--green);vertical-align:0}
.c1{left:2%;top:18px;animation:artBob 6s ease-in-out infinite}
.c2{right:0;top:232px;animation:artBob 7s -2s ease-in-out infinite}
.c3{left:8%;bottom:6px;animation:artBob 8s -3.5s ease-in-out infinite}
@keyframes artFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes artBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes artCandle{from{opacity:0;transform:scaleY(.2)}to{opacity:1;transform:none}}
@keyframes artDraw{to{stroke-dashoffset:0}}

/* ── Most read, under a spotlight ────────────────────────── */
.most-read{position:relative;overflow:hidden;margin:26px 0 6px;padding:24px;border:1px solid var(--hair-strong);border-radius:26px;background:#080d16;box-shadow:var(--lift);animation:bRise .8s var(--ease) both}
.most-read[hidden]{display:none}
/* a zero-size anchor that the glow is centred on; it follows the pointer, or drifts when idle */
.mr-light{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none;transition:transform .35s var(--ease)}
.mr-light::before{content:"";position:absolute;left:-340px;top:-340px;width:680px;height:680px;border-radius:50%;background:radial-gradient(closest-side,rgba(127,182,255,.2),rgba(48,214,139,.1) 45%,transparent 72%)}
.most-read:not(.tracking) .mr-light{left:0;top:0;width:100%;height:100%;animation:mrSweep 14s ease-in-out infinite}
@keyframes mrSweep{0%,100%{transform:translate(12%,10%)}50%{transform:translate(88%,70%)}}
.mr-head,.mr-grid{position:relative}
.mr-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.mr-badge{display:inline-flex;align-items:center;gap:8px;font:800 20px 'Bricolage Grotesque',system-ui,sans-serif;letter-spacing:-.03em;color:var(--text)}
.mr-badge .ico{width:20px;height:20px;color:var(--green);vertical-align:0}
.mr-sub{font:500 10.5px 'JetBrains Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:#7689a0}
.mr-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:14px}
.mr-top{position:relative;display:flex;align-items:flex-end;min-height:280px;border:1px solid var(--hair);border-radius:20px;overflow:hidden;background:radial-gradient(360px 220px at 50% 30%,rgba(48,214,139,.16),transparent 70%),#0a111c;color:inherit;text-decoration:none;transition:transform .5s var(--ease),border-color .45s var(--ease)}
.mr-top:hover{transform:translateY(-3px);border-color:var(--hair-strong)}
.mr-top img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.mr-top:hover img{transform:scale(1.04)}
.mr-top-body{position:relative;width:100%;padding:60px 20px 20px;background:linear-gradient(180deg,transparent,rgba(5,9,15,.86) 46%,#05090f)}
.mr-top-body .card-cat{margin-bottom:8px}
.mr-top h3{font:800 clamp(20px,2.3vw,26px)/1.14 'Bricolage Grotesque',system-ui,sans-serif;letter-spacing:-.035em;color:#fff;margin-bottom:8px;overflow-wrap:anywhere}
.mr-rank{font:800 15px 'Bricolage Grotesque',system-ui,sans-serif;color:#05090f;background:var(--green);border-radius:10px;min-width:30px;height:30px;display:inline-grid;place-items:center;flex:none}
.mr-top .mr-rank{position:absolute;left:20px;top:16px;box-shadow:0 0 0 5px rgba(48,214,139,.2)}
.mr-reads{font:500 11px 'JetBrains Mono',monospace;color:#9aacbf}
.mr-list{display:grid;gap:10px;align-content:stretch}
.mr-row{display:flex;align-items:center;gap:14px;padding:16px;border:1px solid var(--hair);border-radius:18px;background:rgba(255,255,255,.035);color:inherit;text-decoration:none;transition:transform .45s var(--ease),border-color .45s var(--ease),background-color .3s var(--ease);animation:bRise .7s calc(var(--i,0) * 80ms) var(--ease) both}
.mr-row:hover{transform:translateX(4px);border-color:var(--hair-strong);background:rgba(255,255,255,.07)}
.mr-row .mr-rank{background:rgba(255,255,255,.1);color:#fff}
.mr-row h4{font:700 15.5px/1.3 'Bricolage Grotesque',system-ui,sans-serif;letter-spacing:-.02em;color:var(--text);margin-bottom:5px;overflow-wrap:anywhere}

@media(max-width:900px){
  .blog-hero{grid-template-columns:1fr}
  /* the illustration shrinks into a band under the copy */
  .bh-art{height:210px;margin-top:6px}
  .bh-art .art-card{scale:.62}
  .a1{top:-30px}.a2{top:-6px;margin-left:-206px}.a3{top:-12px;margin-left:0}
  .art-glow{width:320px;height:230px}
  .c1{top:4px}.c2{top:150px}.c3{bottom:0}
  .mr-grid{grid-template-columns:1fr}
  .mr-top{min-height:230px}
}
@media(max-width:640px){
  .most-read{padding:18px;border-radius:22px;margin-top:20px}
  .mr-badge{font-size:18px}
  .art-chip{font-size:11px;padding:7px 11px}
}
@media(prefers-reduced-motion:reduce){
  .a1,.a2,.a3,.c1,.c2,.c3,.most-read:not(.tracking) .mr-light{animation:none}
  .cn{animation:bFade .6s ease both}
  .art-line{animation:none;stroke-dashoffset:0}
  .mr-row:hover,.mr-top:hover{transform:none}
}
.mr-top .mr-rank{position:static;margin-bottom:12px}
@media(max-width:900px){.bh-art{overflow:clip;margin-left:-18px;margin-right:-18px}}