/* CSS Reset and Base Styles */
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Fira+Code&display=swap');
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 body {
     font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
     line-height: 1.6;
     color: #2d2d2d; /* Darker grey for text */
     max-width: 800px;
     margin: 0 auto;
     padding: 2rem;
     background: #f8f8f8; /* Light grey background */
 }

 /* Typography */
 h1 {
     font-size: 2.5rem;
     font-weight: 700;
     letter-spacing: -0.025em;
     margin-bottom: 1.5rem;
     color: #1a1a1a; /* Slightly darker for contrast */
 }

 h2 {
     font-size: 1.75rem;
     font-weight: 600;
     margin: 1rem 0;
     letter-spacing: -0.015em;
     color: #333; /* Medium grey */
 }

 p {
     font-size: 1.125rem;
     margin-bottom: 1rem;
     color: #4a4a4a; /* Softer grey for body text */
 }

 code {
     font-family: 'Fira Code', 'SF Mono', monospace;
     background: #e8e8e8; /* Greyer code background */
     padding: 0.2em 0.4em;
     font-size: 0.95em;
 }

 /* Header */
 header {
     margin-bottom: 3rem;
     border-bottom: 1px solid #d0d0d0; /* Greyer border */
     padding-bottom: 2rem;
 }

 nav {
     display: flex;
     gap: 2.5rem;
     margin-top: 1rem;
 }

 nav a {
     color: #555; /* Muted grey for links */
     text-decoration: none;
     font-weight: 500;
     position: relative;
     padding: 0.2rem 0.5rem;
     transition: all 0.3s ease;
 }

 /* Animated Underline Effect */
 nav a::after {
     content: '';
     position: absolute;
     width: 0;
     height: 2px;
     bottom: 0;
     left: 0;
     background-color: #333; /* Darker grey underline */
     transition: width 0.3s ease-out;
 }

 nav a:hover::after {
     width: 100%;
 }

 nav a:hover {
     color: #333; /* Darker grey on hover */
     transform: translateY(-2px) scale(1.05);
 }

 nav a:active {
     transform: translateY(1px);
 }

 /* Card Styles */
 .post-card {
     display: block;
     text-decoration: none;
     color: inherit;
     background: #fff;
     border: 1px solid #d0d0d0; /* Greyer border, no rounding */
     padding: 1.5rem;
     margin-bottom: 2rem;
     transition: all 0.2s ease;
 }

 .post-card:hover {
     border-color: #b0b0b0; /* Slightly darker grey on hover */
     transform: translateY(-2px);
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Subtle grey shadow */
 }

 .meta {
     color: #6a6a6a; /* Muted grey for meta text */
     font-size: 0.875rem;
     margin-bottom: 1rem;
 }

 /* Footer */
 footer {
     border-top: 1px solid #d0d0d0; /* Greyer border */
     padding-top: 2rem;
     color: #6a6a6a; /* Muted grey */
     font-size: 0.875rem;
     text-align: center;
 }