/* ==========================================================================
   list.css — blog index (post listing) page
   Loaded after base.css. Hero + post cards.
   ========================================================================== */

.wrap-narrow { max-width: 720px; margin: 0 auto; padding: 0 24px; }

/* Blog hero */
.blog-hero {
  padding: clamp(64px, 8vw, 96px) 0 clamp(40px, 5vw, 56px);
}
.blog-hero .eyebrow {
  color: var(--orange);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: var(--space-sm);
}
.blog-hero p.lede {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  line-height: 1.55;
  color: var(--green-soft);
  max-width: 640px;
  margin-top: var(--space-md);
}

/* Post list */
.post-list {
  padding: 0 0 clamp(80px, 10vw, 120px);
}
.post-item {
  border-top: 1px solid var(--rule);
}
.post-item:last-child { border-bottom: 1px solid var(--rule); }
.post-item a {
  display: block;
  padding: var(--space-md) 4px;
  text-decoration: none;
  color: inherit;
}
.post-item .post-date {
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--space-xs);
}
.post-item .card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-sm);
  margin-bottom: var(--space-xs);
}
.post-item .card-meta .post-date { margin-bottom: 0; }
.post-item .post-tags {
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange);
}
.post-item .post-tags:empty { display: none; }
.post-item h2 {
  font-family: var(--sans);
  font-size: clamp(1.35rem, 2.4vw, 1.6rem);
  color: var(--green);
  margin-bottom: var(--space-xs);
}
.post-item a:hover h2 { color: var(--orange); }
.post-item .excerpt {
  font-family: var(--serif);
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--body);
  max-width: 640px;
}
.post-item .read-more {
  margin-top: var(--space-sm);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--green);
  font-weight: 600;
  font-size: 0.9rem;
}
.post-item .read-more::after { content: "→"; transition: transform 0.18s ease; }
.post-item a:hover .read-more::after { transform: translateX(3px); }