/* ============================================================
   71-blog-grid — /blog/ archive card grid. The old site's blog index
   showed a photo + date + title + excerpt card per post; this recreates
   that on the single-page archive (see sections/prose-blog/02-body.html)
   instead of the old site's paginated grid. Scoped under .sec-71-blog-grid.
   ============================================================ */

.sec-71-blog-grid__year {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  letter-spacing: -0.02em;
  margin-top: 2.8rem;
  margin-bottom: 1.4rem;
}
.sec-71-blog-grid__year:first-child { margin-top: 0; }

.sec-71-blog-grid__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.75rem;
  margin-bottom: 1rem;
}

.sec-71-blog-grid__card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  text-decoration: none;
  color: inherit;
  transition: box-shadow 300ms var(--ease-out), transform 300ms var(--ease-out);
}
.sec-71-blog-grid__card:hover,
.sec-71-blog-grid__card:focus-visible {
  box-shadow: var(--shadow-lift);
  transform: translateY(-3px);
}

.sec-71-blog-grid__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.sec-71-blog-grid__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sec-71-blog-grid__body {
  padding: 1.1rem 1.25rem 1.4rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.sec-71-blog-grid__date {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--accent-strong);
  margin-bottom: 0.5rem;
}

.sec-71-blog-grid__title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.35;
  margin-bottom: 0.6rem;
}

.sec-71-blog-grid__link {
  margin-top: auto;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-on-bone-dim);
}
.sec-71-blog-grid__card:hover .sec-71-blog-grid__link,
.sec-71-blog-grid__card:focus-visible .sec-71-blog-grid__link {
  color: var(--accent-strong);
}