body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    line-height: 1.6;
    font-size: 16px; /* Base font size */
    margin: 0;
    padding: 0;
    background-color: #f4f4f4; /* Light grey, similar to YC but can be adjusted */
    color: #1a1a1a; /* Dark grey/off-black for text */
}

.container {
    width: 80%;
    max-width: 960px;
    margin: 0 auto;
    padding: 20px;
}

header {
    background-color: #f4f4f4; /* Match body or slightly different for brutalist feel */
    padding: 1rem 0;
    border-bottom: 2px solid #1a1a1a; /* Brutalist border */
    margin-bottom: 2rem;
}

header h1 {
    margin: 0;
    text-align: center;
    font-size: 2rem;
    font-weight: bold; /* Strong font weight */
}

header h1 a {
    color: #1a1a1a;
    text-decoration: none;
}

/* Main Navigation Styles */
.main-nav {
    text-align: center;
    margin-top: 0.5rem;
    margin-bottom: 1rem; /* Add some space below nav */
}

.main-nav a {
    margin: 0 15px;
    color: #1a1a1a;
    text-decoration: none;
    font-weight: 500; /* Medium weight for nav links */
    font-size: 1rem; /* 16px - base size */
    padding-bottom: 5px; /* Space for potential border-bottom on hover/active */
}

.main-nav a:hover,
.main-nav a[aria-current="page"] /* Style for active page link if using eleventy-navigation plugin later */
{
    text-decoration: underline;
    /* Or a border: 
    border-bottom: 2px solid #1a1a1a;
    */
}

/* Optional: if you add nav items */
/* header nav {
    text-align: center;
    margin-top: 0.5rem;
}

header nav a {
    margin: 0 10px;
    color: #1a1a1a;
    text-decoration: none;
    font-weight: 500;
} */

main {
    padding: 0 20px; /* Padding for content within main */
}

h2 {
    font-size: 2rem; /* 32px */
    color: #000;
    border-bottom: 2px solid #ccc;
    padding-bottom: 0.3em;
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-weight: bold;
}

h3 {
    font-size: 1.5rem; /* 24px */
    color: #111;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    font-weight: bold;
}

h4 {
    font-size: 1.25rem; /* 20px */
    color: #222;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    font-weight: bold;
}

p, li {
    margin-bottom: 1em;
    color: #333; /* Slightly lighter text for paragraphs */
}

a {
    color: #000; /* Brutalist links - stark */
    text-decoration: underline;
}

a:hover {
    color: #555;
    text-decoration: none;
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 1.5rem;
    margin-bottom: 2rem;
}

.project-card {
    background-color: #fff; /* White cards on light grey bg */
    border: 2px solid #1a1a1a; /* Brutalist border */
    padding: 1.5rem;
    box-shadow: 5px 5px 0px #aaa; /* Simple, hard shadow for brutalist feel */
    display: flex; /* Added for flex layout */
    flex-direction: column; /* Added for flex layout */
}

.project-card h4 {
    font-size: 1.25rem; /* 20px - consistent with h4 */
    margin-top: 0;
    margin-bottom: 0.75rem;
}

.project-card h4 a {
    color: #1a1a1a;
    text-decoration: none;
}

.project-card h4 a:hover {
    text-decoration: underline;
}

.project-card p {
    font-size: 1rem; /* 16px - base size */
    line-height: 1.6;
    margin-bottom: 1rem;
    color: #333;
}

.project-card p:last-of-type {
    margin-top: 1rem;
    margin-bottom: 0;
}

.project-card p:last-of-type a {
    text-decoration: none;
    font-weight: 500;
}

.project-card p:last-of-type a:hover {
    text-decoration: underline;
}

/* Blog Specific Styles */
.post-preview-card h3 {
    font-size: 1.4rem; /* Slightly larger for post titles in cards */
    margin-top: 0;
    margin-bottom: 0.5rem;
}

.post-preview-card h3 a {
    text-decoration: none;
}

.post-meta-preview {
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 0.75em;
}

.read-more-link {
    font-weight: bold;
    text-decoration: none;
}

.post-header {
    margin-bottom: 2rem;
    border-bottom: 1px solid #ddd;
    padding-bottom: 1rem;
}

.post-title {
    font-size: 2.2rem; /* Larger for individual post title */
    margin-top: 0;
    margin-bottom: 0.25em;
    color: #000;
}

.post-meta {
    font-size: 0.9rem;
    color: #555;
    margin-bottom: 0;
}

.post-content h2 {
    font-size: 1.6rem;
    margin-top: 2em;
    border-bottom: 1px solid #eee;
}

.post-content h3 {
    font-size: 1.4rem;
    margin-top: 1.8em;
}

.related-posts {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 2px solid #1a1a1a;
}

.related-posts h3 {
    font-size: 1.6rem;
    margin-bottom: 1.5rem;
    text-align: left;
}

.related-posts-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Smaller cards for related posts */
}

/* Pagination Styles */
.pagination-nav {
    margin-top: 2.5rem;
    text-align: center;
}

.pagination {
    list-style: none;
    padding: 0;
    display: inline-flex; /* Changed from flex to inline-flex */
    gap: 1rem;
    justify-content: center; /* Added for centering */
}

.pagination-item a {
    display: inline-block;
    padding: 0.5em 1em;
    border: 1px solid #1a1a1a;
    text-decoration: none;
    color: #1a1a1a;
    background-color: #fff;
}

.pagination-item a:hover {
    background-color: #1a1a1a;
    color: #fff;
}

.cta-button {
    display: inline-block;
    background-color: #1a1a1a; /* Dark background */
    color: #f4f4f4 !important; /* Light text, important to override default link color */
    padding: 0.8rem 1.5rem;
    text-decoration: none;
    font-weight: bold;
    border: 2px solid #1a1a1a;
    transition: background-color 0.2s ease-out, color 0.2s ease-out;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.cta-button:hover {
    background-color: #f4f4f4;
    color: #1a1a1a !important;
    border: 2px solid #1a1a1a;
}

footer {
    text-align: center;
    margin-top: 3rem;
    padding: 1.5rem 0;
    border-top: 2px solid #1a1a1a; /* Brutalist border */
    font-size: 0.875rem; /* 14px */
    color: #555;
}

footer p {
    margin: 0.3em 0;
    color: #555;
}

.footer-links {
    margin-bottom: 1rem; /* Space between links and copyright */
}

.footer-links a {
    color: #555; /* Match footer text color */
    text-decoration: none; /* Or underline, personal preference */
    margin: 0 10px;
}

.footer-links a:hover {
    color: #1a1a1a; /* Darker on hover */
    text-decoration: underline;
}

/* Remove bullets from project links if they were lists */
.project-card ul {
    list-style-type: none;
    padding-left: 0;
}

/* Ensure main content is within container if not already applied */
body > main {
    width: 80%;
    max-width: 960px;
    margin: 0 auto;
    padding-bottom: 2rem; /* Space before footer */
}

/* Responsive adjustments if needed */
@media (max-width: 768px) {
    .container, body > main {
        width: 90%;
    }

    header h1 {
        font-size: 1.8rem;
    }

    h2 {
        font-size: 1.75rem; /* 28px */
    }

    h3 {
        font-size: 1.35rem; /* 22px */
    }

    h4, .project-card h4, .post-preview-card .post-preview-title, .blog-post-title {
        font-size: 1.15rem; /* 18px */
    }

    .projects-grid {
        grid-template-columns: 1fr; /* Stack projects on smaller screens */
    }
}

/* Homepage Blog Post Grid - Specific 2-column layout for desktop */
.homepage-blog-grid {
    display: grid;
    gap: 2rem; /* Consistent with projects-grid */
    margin-top: 1.5rem; /* Consistent with projects-grid */
    margin-bottom: 2rem; /* Consistent with projects-grid */
    grid-template-columns: 1fr; /* Mobile first: 1 column */
}

@media (min-width: 769px) { /* Desktop: 2 columns */
    .homepage-blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Homepage Blog Post Grid Adjustments */
.homepage-posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 1.5rem;
    margin-bottom: 2rem;
}

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

/* 
   To make homepage post previews look exactly like project-cards, 
   we rely on the .project-card class already applied to them.
   We will remove/comment out specific .homepage-post-preview overrides 
   that make them smaller or different from .project-card.
*/

/* .homepage-post-preview {
    padding: 1rem; 
} */

.homepage-post-preview .post-preview-title {
    /* font-size: 1.1rem; */ /* Will now inherit from general h4 or .project-card h4 if specified */
    /* Ensure it matches project card h4. General h4 is 1.2rem. */
    font-size: 1.2rem; 
}

.homepage-post-preview p {
    /* font-size: 0.9rem; */ /* Will now inherit from general p */
    /* margin-bottom: 0.75em; */ /* Will now inherit from general p */
}

.homepage-post-preview .post-meta-preview {
    /* font-size: 0.8rem; */ /* Adjusted to be subtle but still readable */
    font-size: 0.85rem; /* Aligning with general .post-meta-preview from blog page */
    /* margin-bottom: 0.5em; */ /* Let general .post-meta-preview style handle this or default p margin */
}

/* Blog Specific Styles */
/* Ensure .post-preview-card used on homepage inherits/matches .project-card looks */
.post-preview-card.project-card .post-preview-title {
    /* This is an h4 on the homepage, general h4 style is 1.2rem */
    font-size: 1.2rem; 
    color: #222; /* From general h4 */
    font-weight: bold; /* From general h4 */
    margin-top: 0; /* from .project-card h4 */
    margin-bottom: 0.5rem; /* from general h4 */
}

.post-preview-card.project-card p {
    /* General p style: margin-bottom: 1em; color: #333; */
    color: #333;
    margin-bottom: 1em;
}

.post-preview-card.project-card .post-meta-preview {
    font-size: 0.85rem; /* Keep consistent with general post-meta-preview */
    color: #666;
    margin-bottom: 0.75em;
}

.post-preview-card h3 { /* This applies to the main /blog/ page, not homepage */
    font-size: 1.4rem; /* Slightly larger for post titles in cards */
    margin-top: 0;
    margin-bottom: 0.5rem;
}

.post-preview-card h3 a {
    text-decoration: none;
}

.post-meta-preview {
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 0.75em;
}

.read-more-link {
    font-weight: bold;
    text-decoration: none;
}

.post-header {
    margin-bottom: 2rem;
    border-bottom: 1px solid #ddd;
    padding-bottom: 1rem;
}

.post-title {
    font-size: 2.2rem; /* Larger for individual post title */
    margin-top: 0;
    margin-bottom: 0.25em;
    color: #000;
}

.post-meta {
    font-size: 0.9rem;
    color: #555;
    margin-bottom: 0;
}

.post-content h2 {
    font-size: 1.6rem;
    margin-top: 2em;
    border-bottom: 1px solid #eee;
}

.post-content h3 {
    font-size: 1.4rem;
    margin-top: 1.8em;
}

.related-posts {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 2px solid #1a1a1a;
}

.related-posts h3 {
    font-size: 1.6rem;
    margin-bottom: 1.5rem;
    text-align: left;
}

.related-posts-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Smaller cards for related posts */
}

/* Pagination Styles */
.pagination-nav {
    margin-top: 2.5rem;
    text-align: center;
}

.pagination {
    list-style: none;
    padding: 0;
    display: inline-flex; /* Changed from flex to inline-flex */
    gap: 1rem;
    justify-content: center; /* Added for centering */
}

.pagination-item a {
    display: inline-block;
    padding: 0.5em 1em;
    border: 1px solid #1a1a1a;
    text-decoration: none;
    color: #1a1a1a;
    background-color: #fff;
}

.pagination-item a:hover {
    background-color: #1a1a1a;
    color: #fff;
}

.cta-button {
    display: inline-block;
    background-color: #1a1a1a; /* Dark background */
    color: #f4f4f4 !important; /* Light text, important to override default link color */
    padding: 0.8rem 1.5rem;
    text-decoration: none;
    font-weight: bold;
    border: 2px solid #1a1a1a;
    transition: background-color 0.2s ease-out, color 0.2s ease-out;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.cta-button:hover {
    background-color: #f4f4f4;
    color: #1a1a1a !important;
    border: 2px solid #1a1a1a;
}

footer {
    text-align: center;
    margin-top: 3rem;
    padding: 1.5rem 0;
    border-top: 2px solid #1a1a1a; /* Brutalist border */
    font-size: 0.875rem; /* 14px */
    color: #555;
}

footer p {
    margin: 0.3em 0;
    color: #555;
}

/* Remove bullets from project links if they were lists */
.project-card ul {
    list-style-type: none;
    padding-left: 0;
}

/* Ensure main content is within container if not already applied */
body > main {
    width: 80%;
    max-width: 960px;
    margin: 0 auto;
    padding-bottom: 2rem; /* Space before footer */
}

/* Responsive adjustments if needed */
@media (max-width: 768px) {
    .container, body > main {
        width: 90%;
    }

    header h1 {
        font-size: 1.8rem;
    }

    h2 {
        font-size: 1.75rem; /* 28px */
    }

    h3 {
        font-size: 1.35rem; /* 22px */
    }

    .projects-grid {
        grid-template-columns: 1fr; /* Stack projects on smaller screens */
    }
}

/* Blog Post Preview Card Styles */
.post-preview-card.project-card {
    padding: 1.5rem; /* Consistent with project cards */
}

.post-preview-card.project-card .post-preview-title {
    margin: 0 0 0.75rem 0;
}

.post-preview-card.project-card .post-preview-title a {
    text-decoration: none;
    color: #1a1a1a;
    font-size: 1.25rem; /* 20px - consistent with h4 */
    line-height: 1.4;
    display: block;
}

.post-preview-card.project-card .post-meta-preview {
    font-size: 0.875rem; /* 14px */
    color: #666;
    margin: 0 0 0.75rem 0;
    line-height: 1.4;
}

.post-preview-card.project-card p {
    margin: 0.75rem 0;
    line-height: 1.6;
    font-size: 1rem; /* 16px - base size */
}

.post-preview-card.project-card .read-more-link {
    margin-top: 0.8rem;
    display: inline-block;
    font-size: 0.9rem;
    font-weight: 500;
}

/* Blog Post Page Styles */
article.post.project-card {
    background-color: #fff;
    border: 2px solid #1a1a1a;
    box-shadow: 5px 5px 0px #aaa;
    margin: 2rem 0;
    padding: 1.5rem;
}

article.post .post-header {
    margin: -1.5rem -1.5rem 2rem -1.5rem; /* Negative margins to extend to edges */
    padding: 1.5rem 1.5rem 0 1.5rem;
    border-bottom: 2px solid #1a1a1a;
}

article.post .post-title {
    font-size: 2.2rem;
    margin: 0;
    color: #1a1a1a;
    text-align: left;
}

article.post .post-meta {
    color: #666;
    font-size: 0.9rem;
    margin: 1rem 0;
    padding-bottom: 1.5rem;
}

article.post .post-content {
    font-size: 1.1rem;
    line-height: 1.7;
}

article.post .post-content p {
    margin-bottom: 1.5rem;
    color: #333;
}

/* Section Separator */
hr.section-separator {
    border: none; /* Reset default border */
    border-top: 2px solid #1a1a1a; /* Brutalist border */
    margin-top: 3rem;    /* Space above the separator */
    margin-bottom: 3rem; /* Space below the separator */
    width: 100%;         /* Ensure it spans the content area */
}

/* Generic Navigation Button Styling */
.nav-button-container {
    display: block;
    margin: 2rem 0;
    font-size: 1.1rem;
}

.styled-nav-link {
    display: inline-block;
    color: #1a1a1a;
    text-decoration: none;
    font-weight: 500;
    padding: 0.5rem 1rem;
    border: 2px solid #1a1a1a;
    background-color: #fff;
    box-shadow: 3px 3px 0px #aaa;
    transition: all 0.2s ease;
    font-size: 1rem; /* 16px - base size */
}

.styled-nav-link:hover {
    background-color: #1a1a1a;
    color: #fff;
    transform: translate(1px, 1px);
    box-shadow: 2px 2px 0px #aaa;
}

/* Make sure related posts maintain proper spacing */
.related-posts {
    margin-top: 3rem;
}

/* Blog Posts List Styles */
.blog-posts-list {
    margin: 2rem 0;
}

.blog-post-item {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background-color: #fff;
    border: 2px solid #1a1a1a;
    box-shadow: 5px 5px 0px #aaa;
}

.blog-post-item:last-child {
    margin-bottom: 0;
}

.blog-post-title {
    font-size: 1.25rem; /* 20px - consistent with h4 */
    margin: 0 0 0.75rem 0;
}

.blog-post-title a {
    color: #1a1a1a;
    text-decoration: none;
}

.blog-post-title a:hover {
    text-decoration: underline;
}

.blog-post-item .post-meta {
    font-size: 0.875rem; /* 14px */
    color: #666;
    margin: 0 0 0.75rem 0;
}

.blog-post-item .post-excerpt {
    font-size: 1rem; /* 16px - base size */
    line-height: 1.6;
    margin: 0.75rem 0 0 0;
    color: #333;
}

.blog-post-item p:last-of-type {
    margin-top: 1rem;
    margin-bottom: 0;
}

.blog-post-item p:last-of-type a {
    text-decoration: none;
    font-weight: 500;
}

.blog-post-item p:last-of-type a:hover {
    text-decoration: underline;
}