/* ── BLOG INDEX & PREVIOUS PAGES ── */

.container { max-width: 860px; }

/* ── SECTION HEADER / MONTH LABEL ── */
.section-header,
.month-label {
  font-family: 'VT323', monospace;
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  color: var(--dim);
  text-transform: uppercase;
  margin-bottom: 0.75rem;
  padding-left: 0.1rem;
  opacity: 0;
}

.section-header { animation: pop 0.5s ease 0.3s forwards; }

.month-group:nth-child(1) .month-label { animation: pop 0.5s ease 0.15s forwards; }
.month-group:nth-child(2) .month-label { animation: pop 0.5s ease 0.20s forwards; }
.month-group:nth-child(3) .month-label { animation: pop 0.5s ease 0.25s forwards; }

/* ── MONTH GROUP ── */
.month-group { margin-bottom: 1.5rem; }

/* ── POST GRID ── */
.posts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

/* ── POST CARD ── */
.post-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  background: var(--panel);
  padding: 1rem 1.1rem 0.9rem;
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.15s, background 0.15s, transform 0.1s, box-shadow 0.15s;
  opacity: 0;
  position: relative;
}

/* blog index stagger */
.posts-grid > .post-card:nth-child(1) { animation: pop 0.5s ease 0.40s forwards; }
.posts-grid > .post-card:nth-child(2) { animation: pop 0.5s ease 0.46s forwards; }
.posts-grid > .post-card:nth-child(3) { animation: pop 0.5s ease 0.52s forwards; }
.posts-grid > .post-card:nth-child(4) { animation: pop 0.5s ease 0.58s forwards; }
.posts-grid > .post-card:nth-child(5) { animation: pop 0.5s ease 0.64s forwards; }
.posts-grid > .post-card:nth-child(6) { animation: pop 0.5s ease 0.70s forwards; }
.posts-grid > .post-card:nth-child(7) { animation: pop 0.5s ease 0.76s forwards; }
.posts-grid > .post-card:nth-child(8) { animation: pop 0.5s ease 0.82s forwards; }
.posts-grid > .post-card:nth-child(9) { animation: pop 0.5s ease 0.88s forwards; }

/* previous.html stagger */
.month-group:nth-child(1) .post-card:nth-child(1) { animation: pop 0.5s ease 0.25s forwards; }
.month-group:nth-child(1) .post-card:nth-child(2) { animation: pop 0.5s ease 0.31s forwards; }
.month-group:nth-child(1) .post-card:nth-child(3) { animation: pop 0.5s ease 0.37s forwards; }
.month-group:nth-child(1) .post-card:nth-child(4) { animation: pop 0.5s ease 0.43s forwards; }
.month-group:nth-child(1) .post-card:nth-child(5) { animation: pop 0.5s ease 0.49s forwards; }
.month-group:nth-child(1) .post-card:nth-child(6) { animation: pop 0.5s ease 0.55s forwards; }
.month-group:nth-child(2) .post-card:nth-child(1) { animation: pop 0.5s ease 0.62s forwards; }
.month-group:nth-child(3) .post-card:nth-child(1) { animation: pop 0.5s ease 0.70s forwards; }
.month-group:nth-child(3) .post-card:nth-child(2) { animation: pop 0.5s ease 0.76s forwards; }

/* card color variants */
.post-card.color-teal   { background: linear-gradient(150deg, #0c2228 0%, #0b1a2e 100%); border-color: rgba(94,200,176,0.22); }
.post-card.color-pink   { background: linear-gradient(150deg, #1e0d22 0%, #0b1420 100%); border-color: rgba(200,120,176,0.22); }
.post-card.color-yellow { background: linear-gradient(150deg, #1c180a 0%, #0f1420 100%); border-color: rgba(232,216,152,0.22); }
.post-card.color-frost  { background: linear-gradient(150deg, #0c1830 0%, #0b1a2e 100%); border-color: rgba(168,200,232,0.22); }

.post-card.color-teal:hover   { transform: translate(-2px,-2px); border-color: var(--teal);   box-shadow: 3px 3px 0 rgba(94,200,176,0.2);   background: linear-gradient(150deg, #0e2c34 0%, #0d2030 100%); }
.post-card.color-pink:hover   { transform: translate(-2px,-2px); border-color: var(--pink);   box-shadow: 3px 3px 0 rgba(200,120,176,0.2);  background: linear-gradient(150deg, #26102c 0%, #18102a 100%); }
.post-card.color-yellow:hover { transform: translate(-2px,-2px); border-color: var(--yellow); box-shadow: 3px 3px 0 rgba(232,216,152,0.2);  background: linear-gradient(150deg, #221e0c 0%, #14182a 100%); }
.post-card.color-frost:hover  { transform: translate(-2px,-2px); border-color: var(--frost);  box-shadow: 3px 3px 0 rgba(168,200,232,0.2);  background: linear-gradient(150deg, #0e2040 0%, #0d1e38 100%); }

/* compact padding on previous.html */
.month-group .post-card { padding: 0.85rem 1rem 0.8rem; }

/* ── CARD CONTENT ── */
.post-date-label {
  font-size: 0.72rem;
  margin-bottom: 0.45rem;
  align-self: flex-start;
}

.post-title {
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.35;
  margin-bottom: 0.4rem;
  flex-grow: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.month-group .post-title {
  font-size: 1rem;
  margin-bottom: 0;
  flex-grow: 0;
}

.post-excerpt {
  font-size: 0.82rem;
  font-style: italic;
  color: var(--dim);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── BOTTOM NAV ── */
.bottom-nav {
  margin-top: 1.5rem;
  text-align: right;
  opacity: 0;
  animation: pop 0.5s ease 0.95s forwards;
}

.bottom-nav a {
  font-family: 'VT323', monospace;
  font-size: 0.82rem;
  letter-spacing: 0.15em;
  color: var(--dim);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  transition: color 0.15s, border-color 0.15s;
}

.bottom-nav a:hover { color: var(--frost); border-color: var(--frost); }

hr.rule { animation: pop 0.5s ease 0.9s forwards; }
footer  { animation: pop 0.5s ease 0.95s forwards; }

@media (max-width: 620px) {
  .posts-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 400px) {
  .posts-grid { grid-template-columns: 1fr; }
  header { padding-left: 1.2rem; padding-right: 1.2rem; }
}