/* --- GLOBAL STYLES & FONT --- */
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap');
        :root {
            font-family: 'Inter', sans-serif;
            scroll-behavior: smooth;
            /* Indigo colors kept for UI elements like focus rings and notifications */
            --color-indigo-600: #4f46e5;
            --color-indigo-700: #4338ca;
            --color-indigo-500: #6366f1;
            /* Theme colors: EMERALD (GREEN) and YELLOW (BRIGHTER) */
            --color-emerald-500: #043915; /* Green */
            --color-yellow-500: #facc15;  /* Brighter Yellow (Less Orange) */
        }

        /* --- MAIN CONTAINER --- */
        .main-container {
            max-width: 1280px; /* max-w-7xl */
            margin: 0 auto; /* mx-auto */
            padding: 3rem 1rem; /* py-12 px-4 */
        }
        @media (min-width: 640px) { /* sm:px-6 */
            .main-container { padding-left: 1.5rem; padding-right: 1.5rem; }
        }
        @media (min-width: 1024px) { /* lg:px-8 */
            .main-container { padding-left: 2rem; padding-right: 2rem; }
        }

        /* --- HEADER SECTION --- */
        .header-section {
            text-align: center;
            margin-bottom: 3rem; /* mb-12 */
            padding: 2rem; /* py-8 */
            border-radius: 0.75rem; /* rounded-xl */
            background-color: white;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
            border-bottom: 4px solid #e5e7eb; /* border-b-4 border-gray-200 */
        }
        .header-title {
            font-size: 2.25rem; /* text-4xl */
            line-height: 2.5rem;
            font-weight: 800; /* font-extrabold */
            color: #111827; /* text-gray-900 */
            letter-spacing: -0.025em; /* tracking-tight */
        }
        .header-subtitle {
            margin-top: 0.75rem; /* mt-3 */
            font-size: 1.125rem; /* text-lg */
            line-height: 1.75rem;
            color: #6b7280; /* text-gray-500 */
            max-width: 42rem; /* max-w-3xl */
            margin-left: auto;
            margin-right: auto;
        }
        @media (min-width: 640px) {
            .header-title { font-size: 3rem; line-height: 1; } /* sm:text-5xl */
            .header-subtitle { font-size: 1.25rem; line-height: 1.75rem; } /* sm:text-xl */
        }

        /* --- CARD GRID LAYOUT --- */
        .card-grid {
            display: grid;
            grid-template-columns: 1fr; /* grid-cols-1 */
            gap: 2rem; /* gap-8 */
        }
        @media (min-width: 768px) { /* md:grid-cols-2 */
            .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        }
        @media (min-width: 1024px) { /* lg:grid-cols-3 */
            .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
        }

        /* --- CARD STYLES --- */
        .card-link {
            display: block; /* block */
            text-decoration: none;
            outline: none;
            transition: all 0.3s ease; /* transition duration-300 */
            border-radius: 0.75rem;
        }
        .card-link:focus {
            box-shadow: 0 0 0 4px var(--color-indigo-500); /* Focus ring uses Indigo */
        }

        .card {
            border-radius: 0.75rem; /* rounded-xl */
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); /* shadow-xl */
            overflow: hidden;
            transition: all 0.3s ease; /* transform transition duration-300 */
        }
        .card:hover {
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* hover:shadow-2xl */
            transform: translateY(-0.25rem); /* hover:-translate-y-1 */
        }

        /* Card Themes (border-t-4) - ONLY EMERALD AND YELLOW ARE USED */
        .theme-2 { border-top: 4px solid var(--color-emerald-500); background-color: white; }
        .theme-3 { border-top: 4px solid var(--color-yellow-500); background-color: white; }

        /* Image and Image Wrapper */
        .card-header-image {
            height: 12rem; /* Fixed height for image area */
            overflow: hidden; /* Ensures scaled image doesn't break layout */
        }
        .header-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease; /* Smooth transition for the scale effect */
        }
        .card:hover .header-image {
            transform: scale(1.05); /* Scales the image up by 5% on hover */
        }

        /* Card Content */
        .card-content {
            padding: 1.5rem; /* p-6 */
        }
        .card-title {
            font-size: 1.25rem; /* text-xl */
            line-height: 1.75rem;
            font-weight: 700; /* font-bold */
            margin-bottom: 0.75rem; /* mb-3 */
            color: #111827; /* text-gray-900 */
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .card-excerpt {
            color: #4b5563; /* text-gray-600 */
            margin-bottom: 1rem; /* mb-4 */
            font-size: 0.875rem; /* text-sm */
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        /* Metadata */
        .card-metadata {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 1rem; /* pt-4 */
            border-top: 1px solid #f3f4f6; /* border-t border-gray-100 */
        }
        .card-author {
            font-size: 0.75rem; /* text-xs */
            font-weight: 600; /* font-semibold */
            color: green
        }
        .card-date {
            font-size: 0.75rem; /* text-xs */
            color: #9ca3af; /* text-gray-400 */
        }

        /* --- LOADER --- */
        #loading-indicator {
            grid-column: 1 / -1; /* col-span-full */
            text-align: center;
            padding: 3rem 0; /* py-12 */
            color: #6b7280; /* text-gray-500 */
        }
        #loading-indicator svg {
            height: 2rem; /* h-8 */
            width: 2rem; /* w-8 */
            color: var(--color-indigo-500); /* text-indigo-500 */
            margin: 0 auto; /* mx-auto */
            animation: spin 1s linear infinite;
        }
        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        /* --- NOTIFICATION BANNER --- */
        #new-post-notification {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 50;
            padding: 1rem;
            background-color: var(--color-indigo-600);
            color: white;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
            display: none; /* Initial state: hidden */
            transition: all 0.3s ease;
        }
        #new-post-notification > div {
            max-width: 1280px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        #new-post-notification p {
            font-size: 0.875rem; /* text-sm */
            font-weight: 500; /* font-medium */
            margin: 0;
        }
        #dismiss-notification {
            font-size: 0.75rem; /* text-xs */
            font-weight: 600; /* font-semibold */
            padding: 0.25rem 0.75rem; /* py-1 px-3 */
            border-radius: 9999px; /* rounded-full */
            background-color: var(--color-indigo-700);
            border: none;
            cursor: pointer;
            transition: background-color 0.15s ease;
            color: white;
        }
        #dismiss-notification:hover {
            background-color: #3730a3; /* hover:bg-indigo-800 */
        }
        #dismiss-notification:focus {
            outline: 2px solid transparent;
            outline-offset: 2px;
            box-shadow: 0 0 0 2px white, 0 0 0 4px #c7d2fe; /* focus:ring-2 focus:ring-offset-2 focus:ring-indigo-400 */
        }