body {
    font-family: 'Georgia', serif;
    background-color: #f9f7f1; /* Off-white for a paper feel */
    color: #333;
    max-width: 1000px;
    margin: 0 auto;
    padding: 20px;
}

header {
    text-align: center;
    border-bottom: 4px double #333;
    padding-bottom: 10px;
}

header h1 {
    font-size: 3.5rem;
    margin: 0;
    font-family: 'Playfair Display', serif; /* Or any bold serif font */
}

nav ul {
    list-style: none;
    padding: 10px 0;
    display: flex;
    justify-content: center;
    border-bottom: 1px solid #333;
}

nav li { margin: 0 15px; }

.featured {
    padding: 20px 0;
    border-bottom: 2px solid #333;
    text-align: center;
}

.featured h2 {
    margin: 15px auto;
    max-width: 800px; /* Keeps the headline from stretching too wide on big screens */
}

.columns {
    column-count: 3; /* Automatically creates 3 columns */
    column-gap: 40px;
    column-rule: 1px solid #ddd; /* Vertical line between columns */
    padding-top: 20px;
}

article h3 {
    margin-top: 0;
    text-transform: uppercase;
}

footer {
    text-align: center;
    margin-top: 40px;
    border-top: 1px solid #333;
    padding-top: 10px;
    font-size: 0.8rem;
}

nav a.active {
    text-decoration: underline;
    font-weight: bold;
}

/* Styling for the single article page */
.single-article {
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.6;
}

.article-header {
    text-align: center;
    margin: 40px 0;
}

.category {
    color: #8b0000; /* Dark red news style */
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.byline {
    font-style: italic;
    color: #666;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
}

.pull-quote {
    font-size: 1.5rem;
    font-weight: bold;
    color: #444;
    border-left: 5px solid #333;
    padding-left: 20px;
    margin: 30px 0;
    font-style: italic;
}

.back-link {
    margin-top: 50px;
    text-align: center;
}

.back-link a {
    color: #333;
    text-decoration: none;
    font-weight: bold;
}

/* 1. Remove the default browser gap at the top of the list */
nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
    
    /* TIGHTEN THESE TWO LINES: */
    padding: 10px 0;      /* Reduced from 15px/20px to 10px */
    margin: 0 auto;       /* Removes the outer gap between header and nav */
    
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
}

nav li {
    margin: 0 20px;
}

nav a {
    text-decoration: none; /* Removes the blue underline */
    color: #333;           /* Professional dark grey/black */
    font-weight: bold;
    font-size: 0.9rem;
    letter-spacing: 1.5px; /* Spaced out letters like a masthead */
    transition: color 0.3s ease; /* Smooth color change */
}

/* Hover Effect */
nav a:hover {
    color: #8b0000;       /* Changes to dark red when you point at it */
    text-decoration: underline; /* Optional: adds underline only on hover */
}

/* Optional: "Active" page styling */
nav a.active {
    border-bottom: 2px solid #8b0000;
}

/* Mobile-Friendly Adjustments */
@media (max-width: 768px) {
    body {
        padding: 10px; /* Less margin on small screens */
    }

    header h1 {
        font-size: 2.2rem; /* Shrink title so it doesn't wrap weirdly */
    }

    nav ul {
        flex-wrap: wrap; /* Let nav links wrap to a second line */
        gap: 10px;
    }

    nav li {
        margin: 5px 10px;
    }

    /* IMPORTANT: Turn 3 columns into 1 column for readability */
    .columns {
        column-count: 1; 
        column-gap: 0;
        column-rule: none;
    }

    /* Add space between articles when they are stacked */
    .columns article {
        border-bottom: 1px solid #ddd;
        padding-bottom: 20px;
        margin-bottom: 20px;
    }

    /* Remove the border from the very last article in a section */
    .columns article:last-child {
        border-bottom: none;
    }

    /* Adjust featured article text size */
    .featured h2 {
        font-size: 1.5rem;
    }

    .pull-quote {
        font-size: 1.2rem;
        margin: 20px 0;
    }
}

/* --- Global Article Image Styling --- */

/* Optional: Add a caption style if you want to add text under images later */
.article-content figcaption {
    text-align: center;
    font-family: 'Georgia', serif;
    font-style: italic;
    font-size: 0.9rem;
    color: #666;
    margin-top: -1.5rem; /* Pulls caption closer to the image */
    margin-bottom: 2rem;
}

.hero-image {
    margin-top: 0;
    margin-bottom: 2rem;
}

.hero-image img {
    border-bottom: 3px solid #333; /* Adds a "heavy" news line under the main photo */
}

/* --- Global Article Image Styling --- */

/* This targets BOTH the hero image and images inside the article content */
.article-content img, 
.hero-image img {
    max-width: 100%;     /* Critical for mobile */
    width: 550px;        /* Changed to 550px to make it look more like a standard news photo */
    height: auto;
    display: block;
    margin: 0 auto;      /* Centers it */
    
    /* Aesthetics */
    border: 1px solid #ddd; 
    padding: 5px;
    background-color: #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Specific spacing for the Hero Image at the top */
.hero-image {
    margin-top: 0;
    margin-bottom: 2rem;
    text-align: center; /* Ensures the caption centers too */
}

/* Specific border for the hero photo */
.hero-image img {
    border-bottom: 3px solid #333; 
}

.article-content figcaption {
    text-align: center;
    font-family: 'Georgia', serif;
    font-style: italic;
    font-size: 0.9rem;
    color: #666;
    margin-top: 0.5rem; /* Space between photo and text */
    margin-bottom: 2rem;
}

/* Mobile Tweak: On phones, let it take up the full available width */
@media (max-width: 768px) {
    .article-content img, 
    .hero-image img {
        width: 100%;     /* Full width on small screens */
        max-width: 100%;
        padding: 2px;
    }
}

/* Styling for images on the index/category pages */
.index-thumb {
    width: 100%;            /* Allows it to be responsive */
    max-width: 600px;       /* Increased slightly for a better desktop "Hero" feel */
    height: auto;           /* Maintains the original aspect ratio */
    
    /* THE CENTERING MAGIC */
    display: block;         
    margin: 20px auto;      /* "auto" on left/right centers the block */
    
    border: 1px solid #333;
    transition: transform 0.3s ease; /* Adds a nice zoom effect on hover */
}

/* Hover Effect for the index page */
.index-thumb:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

@media (max-width: 768px) {
    .index-thumb {
        max-width: 100%;    /* Takes up full width on mobile */
        margin: 15px auto;
    }
}