.blog-wrap{ padding: 34px 0 20px 0; }

.blog-head{
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 18px;
  background:#fff;
  margin-bottom: 14px;
}

.blog-title{ margin:0 0 6px 0; font-size: 34px; letter-spacing:-.3px; }
.blog-sub{ margin:0; color: var(--muted); line-height:1.7; }

.blog-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.blog-card{
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px 16px;
  background:#fff;
  text-decoration:none;
  color: var(--ink);
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}

.blog-card:hover{
  border-color: rgba(0,0,0,.14);
  transform: translateY(-1px);
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}

.blog-card h2{ margin:0 0 8px 0; font-size: 16px; font-weight: 900; line-height:1.25; }
.blog-card p{ margin:0 0 10px 0; color: var(--muted); line-height:1.7; }
.blog-card .more{ font-weight: 900; color: var(--navy); }

.single-wrap{ padding: 34px 0 20px 0; }
.single-article{
  border: 1px solid var(--line);
  border-radius: 20px;
  background:#fff;
  padding: 22px;
}

.single-article h1{ margin:0 0 10px 0; font-size: 38px; letter-spacing:-.4px; line-height:1.1; }
.single-meta{ color: var(--muted); margin:0 0 14px 0; }

.single-content{ color: rgba(0,0,0,.78); line-height: 1.85; }
.single-content p{ margin: 0 0 14px 0; }
.single-content h2, .single-content h3{ margin: 20px 0 10px 0; }

.blog-pagination{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top: 14px;
}

@media (max-width: 980px){
  .blog-grid{ grid-template-columns: 1fr; }
  .blog-title{ font-size: 28px; }
  .single-article h1{ font-size: 30px; }
}