/* Chief Nest brand styling for the blog index.
   None of the posts carry featured images, so the cards are text-forward: the
   category, the headline, a short excerpt and the reading time. The newest post
   spans the full width so the page has a clear entry point.
   Brand hues only: navy #01055e, blue #217bff, cyan #2fd4fb. */

.blog-list{display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr));
  gap:18px; margin-top:40px}

.bpost{display:flex; flex-direction:column; border:1px solid #2a3499; border-radius:16px;
  background:#080d5c; padding:28px 26px; text-decoration:none; color:inherit;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease}
.bpost:hover{transform:translateY(-5px); border-color:#217bff;
  box-shadow:0 24px 50px -24px rgba(33,123,255,.35)}

.bpost .k{font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:#2fd4fb; margin-bottom:12px}
.bpost h2{font-size:20px; font-weight:600; color:#fff; letter-spacing:-.02em;
  line-height:1.25; margin:0 0 12px; text-wrap:balance}
.bpost p{font-size:15px; color:#8b93cd; line-height:1.6; margin:0 0 20px}
.bpost .meta{margin-top:auto; font-size:12.5px; color:#5c6396;
  display:flex; gap:8px; align-items:center}
.bpost .meta span+span::before{content:"·"; margin-right:8px}
.bpost .more{color:#5c9bff; font-weight:600; font-size:14px; margin-top:14px}

/* the newest post leads the page */
.bpost.lead{grid-column:1 / -1; padding:38px 34px;
  background:linear-gradient(160deg,#0b1180,#080d5c); border-color:#217bff}
.bpost.lead h2{font-size:clamp(24px,3.2vw,34px); line-height:1.15; max-width:24ch}
.bpost.lead p{font-size:16.5px; color:#aab4ee; max-width:62ch}

@media (max-width:760px){
  .blog-list{grid-template-columns:1fr; gap:14px; margin-top:30px}
  .bpost{padding:24px 22px}
  .bpost.lead{padding:26px 22px}
}