/* ============================================================
   LISTING — blog listing page (blog/index.html) styles
   ============================================================ */

.blog-header { padding: 100px 0 0; }
.blog-header .section-label {
  font-size: 0.6rem; letter-spacing: 3px; text-transform: uppercase;
  color: var(--amber); margin-bottom: 8px;
}
.blog-header h1 {
  font-family: 'Fraunces', serif; font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 700; color: var(--white); letter-spacing: -1px;
  line-height: 1.1; margin-bottom: 8px;
}
.blog-header h1::after {
  content: ''; display: block; width: 40px; height: 2px;
  background: var(--amber); margin-top: 12px; border-radius: 1px;
}
.blog-header p {
  font-size: 0.78rem; color: var(--text-mid); max-width: 520px;
  line-height: 1.9; margin-bottom: 32px;
}

/* POST GRID — clean cards, no container border */
.posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 16px;
}
.post-card {
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 8px; padding: 24px; display: flex;
  flex-direction: column; transition: border-color 0.25s;
  text-decoration: none;
}
.post-card:hover { border-color: var(--amber-dim); }
.post-date {
  font-size: 0.58rem; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--amber); margin-bottom: 10px; display: flex; align-items: center;
}
.pinned-badge {
  font-size: 0.55rem; letter-spacing: 1px; text-transform: uppercase;
  color: var(--amber-bright); background: var(--amber-glow-strong);
  border: 1px solid var(--amber-dim); padding: 2px 8px;
  border-radius: 3px; margin-left: 8px;
}
.post-title {
  font-family: 'Fraunces', serif; font-size: 1.1rem; font-weight: 600;
  color: var(--white); letter-spacing: -0.3px; margin-bottom: 8px; line-height: 1.3;
}
.post-excerpt { font-size: 0.72rem; color: var(--text-mid); line-height: 1.85; flex: 1; }
.post-read {
  font-size: 0.62rem; letter-spacing: 1px; text-transform: uppercase;
  color: var(--amber); margin-top: 14px; border-bottom: 1px solid var(--amber-dim);
  padding-bottom: 2px; align-self: flex-start; transition: color 0.2s, border-color 0.2s;
}
.post-card:hover .post-read { color: var(--amber-bright); border-color: var(--amber); }

@media (max-width: 600px) {
  .posts-grid { grid-template-columns: 1fr; }
}