/* === BLOG - EMO JOURNAL === */
.blog-page { min-height: 100vh; padding: 30px; }

.blog-title {
  text-align: center; color: #ff0033; font-size: 2.8rem;
  margin-bottom: 32px; animation: bounceIn 0.8s ease-out both;
}

.blog-entries { max-width: 850px; margin: 0 auto; }

.blog-entry {
  background: rgba(255, 0, 51, 0.02); padding: 22px 24px; margin-bottom: 18px;
  border: 1px solid #1a1a1a; filter: url(#crayon);
  animation: fadeInUp 0.5s ease-out both;
  transition: transform 0.3s, box-shadow 0.3s;
}
.blog-entry:nth-child(1) { animation-delay: 0.1s; }
.blog-entry:nth-child(2) { animation-delay: 0.25s; }
.blog-entry:nth-child(3) { animation-delay: 0.4s; }
.blog-entry:nth-child(4) { animation-delay: 0.55s; }
.blog-entry:nth-child(5) { animation-delay: 0.7s; }

.blog-entry:nth-child(odd) { border-left: 4px solid #ff0033; }
.blog-entry:nth-child(even) { border-left: 4px solid #cc00ff; }
.blog-entry:hover { box-shadow: 0 0 15px rgba(255, 0, 51, 0.1); }

.blog-entry-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.blog-entry-title { font-size: 1.25rem; font-weight: bold; }
.blog-entry:nth-child(odd) .blog-entry-title { color: #ff0033; }
.blog-entry:nth-child(even) .blog-entry-title { color: #cc00ff; }

.blog-entry-title a {
  color: inherit; text-decoration: none; border-bottom: none;
  transition: color 0.3s, text-shadow 0.3s; display: inline-block;
}
.blog-entry-title a:hover { text-shadow: 0 0 8px currentColor; }

.blog-entry-date { color: #444; font-size: 0.95rem; flex-shrink: 0; }
.blog-entry-content { color: #999; font-size: 1.05rem; line-height: 1.8; margin-bottom: 12px; }
.blog-entry-meta { color: #cc00ff; font-size: 0.9rem; }

.blog-pagination {
  text-align: center; color: #444; font-size: 1.1rem;
  margin-top: 32px; padding: 16px; animation: fadeInUp 0.5s ease-out 0.8s both;
}
.blog-pagination a {
  color: #ff3366; text-decoration: none; border-bottom: none;
  padding: 4px 14px; display: inline-block; transition: color 0.3s, transform 0.2s;
}
.blog-pagination a:hover { color: #ff66aa; transform: scale(1.15); }

/* Single post */
.blog-single { max-width: 850px; margin: 0 auto; animation: fadeInUp 0.7s ease-out both; }
.blog-single .blog-entry { border-left: 4px solid #ff0033; padding: 28px 30px; }
.blog-single .blog-entry-title { color: #ff0033; font-size: 1.6rem; }
.blog-single .blog-entry-content { font-size: 1.1rem; line-height: 1.9; }

.blog-back { text-align: center; margin-top: 28px; animation: fadeInUp 0.5s ease-out 0.5s both; }
.blog-back a {
  color: #ff0033; font-size: 1.1rem; border-bottom: 2px solid #ff0033;
  transition: color 0.3s, transform 0.2s; display: inline-block;
}
.blog-back a:hover { transform: scale(1.1) rotate(-2deg); color: #ff66aa; }