.nav a.active{color:var(--ink)}

.blog-intro{
  padding:154px 0 78px;
  background:
    radial-gradient(900px 440px at 88% 0%,var(--hero-r1),transparent 60%),
    radial-gradient(680px 380px at 5% 100%,var(--hero-r2),transparent 60%),
    var(--bg);
  border-bottom:1px solid var(--line);
}
.blog-intro h1{max-width:980px}
.blog-intro .lead{max-width:700px}

.blog-feed{padding:72px 0 110px;background:var(--bg2)}
.blog-feed>.wrap{display:grid;gap:32px}
.blog-card{
  display:grid;
  grid-template-columns:minmax(0,1.03fr) minmax(0,.97fr);
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:24px;
  background:linear-gradient(180deg,var(--panel),var(--panel2));
  box-shadow:var(--shadow);
}
.blog-card-image{
  min-height:100%;
  background:#fff;
  border-right:1px solid var(--line);
  overflow:hidden;
}
.blog-card-image img{
  display:block;
  width:100%;
  height:100%;
  min-height:390px;
  object-fit:contain;
  background:#080a10;
  transition:transform .45s ease;
}
.blog-card-image img.language-cover{object-position:right center}
.blog-card-image:hover img{transform:scale(1.025)}
.blog-card-body{display:flex;flex-direction:column;justify-content:center;padding:44px}
.blog-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px 18px;margin-bottom:20px}
.blog-meta span,.blog-meta time{
  color:var(--dim);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.05em;
}
.blog-meta span:first-child{
  color:var(--a2);
  text-transform:uppercase;
  letter-spacing:.12em;
}
.blog-card h2{
  font-family:var(--display);
  font-size:clamp(22px,2.4vw,32px);
  line-height:1.25;
  margin:0 0 20px;
}
.blog-card h2 a{transition:color .2s}
.blog-card h2 a:hover{color:var(--a2)}
.blog-card-body > p{font-size:16px;line-height:1.65}
.blog-read{
  align-self:flex-start;
  margin-top:28px;
  color:var(--ink);
  font-size:15px;
  font-weight:700;
  border-bottom:1px solid var(--a2);
  padding-bottom:3px;
}
.blog-read span{color:var(--a2);margin-left:4px}

@media (max-width:900px){
  .blog-card{grid-template-columns:1fr}
  .blog-card-image{border-right:0;border-bottom:1px solid var(--line)}
  .blog-card-image img{min-height:0;aspect-ratio:1200/630}
}

@media (max-width:768px){
  .blog-intro{padding:124px 0 58px}
  .blog-feed{padding:44px 0 72px}
  .blog-feed>.wrap{gap:24px}
  .blog-card-body{padding:30px 26px 34px}
}

@media (max-width:520px){
  .blog-intro h1{font-size:29px}
  .blog-meta{gap:6px 12px}
  .blog-card-body{padding:25px 20px 30px}
}