/* home page */

        /* Base styles for a warm and inviting look */
        body {
            font-family: 'Inter', sans-serif;
            background-color: #fcfcfc; /* Soft off-white background */
            color: #2c2c2c;
            min-height: 100vh;
        }

        /* Custom Colors for the Category Tags */
        .card-tag {
            font-size: 0.7rem;
            font-weight: 700;
            padding: 0.25rem 0.6rem;
            border-radius: 9999px; /* Pill shape */
            text-transform: uppercase;
            letter-spacing: 0.05em;
            position: absolute;
            top: 0.75rem;
            left: 0.75rem;
            z-index: 10;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }

        /* 1. Tech News: Navy Blue */
        .tech-tag {
            background-color: #1E40AF; /* Navy Blue */
            color: #EBF8FF;
        }

        /* 2. Local History: Burnt Orange/Terracotta */
        .history-tag {
            background-color: #B45309; /* Burnt Orange */
            color: #FEF3C7;
        }

        /* 3. Music Videos: Vibrant Purple */
        .music-tag {
            background-color: #7C3AED; /* Vibrant Purple */
            color: #F3E8FF;
        }

        /* 4. AI Music: Mustard Yellow */
        .ai-tag {
            background-color: #CA8A04; /* Mustard Yellow */
            color: #FFFBEB;
        }
        
        /* Card Styling for Consistency and Warmth */
        .content-card {
            background-color: #ffffff;
            border: 1px solid #f0f0f0;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .content-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 10px 15px rgba(0, 0, 0, 0.08); /* Subtle lift effect */
        }
        
        /* Specific styling for the embedded Bandcamp card to match the aesthetic */
        .ai-music-card iframe {
            border-radius: 0.75rem 0.75rem 0 0;
            overflow: hidden;
            width: 100%;
            height: 350px; /* Adjust height for the embed player */
        }

        /* Featured card size adjustment */
        .featured-card {
            grid-column: span 1; /* Default to 1 column */
            margin-bottom: 2rem;
        }

        @media (min-width: 1024px) {
            /* On large screens, featured card takes 2 columns */
            .featured-card {
                grid-column: span 2;
                margin-bottom: 0;
            }
        }



/* tech page */

        /* Base styles for a warm and inviting look, consistent with the homepage and AI Music page */
        body {
            font-family: 'Inter', sans-serif;
            background-color: #fcfcfc; /* Soft off-white background */
            color: #2c2c2c;
            min-height: 100vh;
        }

        /* Custom Colors for the Category Tags */
        .card-tag {
            font-size: 0.7rem;
            font-weight: 700;
            padding: 0.25rem 0.6rem;
            border-radius: 9999px; /* Pill shape */
            text-transform: uppercase;
            letter-spacing: 0.05em;
            position: absolute;
            top: 0.75rem;
            left: 0.75rem;
            z-index: 10;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }

        /* 1. Tech News: Navy Blue (Focus color for this page) */
        .tech-tag {
            background-color: #1E40AF; /* Navy Blue */
            color: #EBF8FF;
        }

        /* 2. Local History: Burnt Orange/Terracotta */
        .history-tag {
            background-color: #B45309;
            color: #FEF3C7;
        }

        /* 3. Music Videos: Vibrant Purple */
        .music-tag {
            background-color: #7C3AED;
            color: #F3E8FF;
        }

        /* 4. AI Music: Mustard Yellow */
        .ai-tag {
            background-color: #CA8A04;
            color: #FFFBEB;
        }
        
        /* Card Styling for Consistency and Warmth */
        .content-card {
            background-color: #ffffff;
            border: 1px solid #f0f0f0;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            position: relative; /* Needed for absolute positioning of the tag */
            border-radius: 0.75rem;
            overflow: hidden;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
        }

        .content-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); /* Subtle lift effect */
        }
        
        .card-image {
            width: 100%;
            height: 200px; /* Fixed height for consistent card tops */
            object-fit: cover;
            border-radius: 0.75rem 0.75rem 0 0;
        }


/* local stories page */

        /* Base styles for a warm and inviting look, consistent with other pages */
        body {
            font-family: 'Inter', sans-serif;
            background-color: #fcfcfc; /* Soft off-white background */
            color: #2c2c2c;
            min-height: 100vh;
        }

        /* Custom Colors for the Category Tags */
        .card-tag {
            font-size: 0.7rem;
            font-weight: 700;
            padding: 0.25rem 0.6rem;
            border-radius: 9999px; /* Pill shape */
            text-transform: uppercase;
            letter-spacing: 0.05em;
            position: absolute;
            top: 0.75rem;
            left: 0.75rem;
            z-index: 10;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }

        /* 1. Tech News: Navy Blue */
        .tech-tag {
            background-color: #1E40AF;
            color: #EBF8FF;
        }

        /* 2. Local Stories: Burnt Orange/Terracotta (Focus color for this page) */
        .history-tag {
            background-color: #B45309; /* Burnt Orange */
            color: #FEF3C7;
        }

        /* 3. Music Videos: Vibrant Purple */
        .music-tag {
            background-color: #7C3AED;
            color: #F3E8FF;
        }

        /* 4. AI Music: Mustard Yellow */
        .ai-tag {
            background-color: #CA8A04;
            color: #FFFBEB;
        }
        
        /* Card Styling for Consistency and Warmth */
        .content-card {
            background-color: #ffffff;
            border: 1px solid #f0f0f0;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            position: relative; /* Needed for absolute positioning of the tag */
            border-radius: 0.75rem;
            overflow: hidden;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
        }

        .content-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); /* Subtle lift effect */
        }
        
        .card-image {
            width: 100%;
            height: 200px; /* Fixed height for consistent card tops */
            object-fit: cover;
            border-radius: 0.75rem 0.75rem 0 0;
        }


/* music video page */


        /* Base styles for a warm and inviting look, consistent with other pages */
        body {
            font-family: 'Inter', sans-serif;
            background-color: #fcfcfc; /* Soft off-white background */
            color: #2c2c2c;
            min-height: 100vh;
        }

        /* Custom Colors for the Category Tags */
        .card-tag {
            font-size: 0.7rem;
            font-weight: 700;
            padding: 0.25rem 0.6rem;
            border-radius: 9999px; /* Pill shape */
            text-transform: uppercase;
            letter-spacing: 0.05em;
            position: absolute;
            top: 0.75rem;
            left: 0.75rem;
            z-index: 10;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }

        /* 1. Tech News: Navy Blue */
        .tech-tag {
            background-color: #1E40AF;
            color: #EBF8FF;
        }

        /* 2. Local Stories: Burnt Orange/Terracotta */
        .history-tag {
            background-color: #B45309;
            color: #FEF3C7;
        }

        /* 3. Music Videos: Vibrant Purple (Focus color for this page) */
        .music-tag {
            background-color: #7C3AED; /* Vibrant Purple */
            color: #F3E8FF;
        }

        /* 4. AI Music: Mustard Yellow */
        .ai-tag {
            background-color: #CA8A04;
            color: #FFFBEB;
        }
        
        /* Card Styling for Consistency and Warmth */
        .content-card {
            background-color: #ffffff;
            border: 1px solid #f0f0f0;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            position: relative; /* Needed for absolute positioning of the tag */
            border-radius: 0.75rem;
            overflow: hidden;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
        }

        .content-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); /* Subtle lift effect */
        }
        
        .card-image {
            width: 100%;
            height: 200px; /* Fixed height for consistent card tops */
            object-fit: cover;
            border-radius: 0.75rem 0.75rem 0 0;
        }


/* AI music page */




        /* Base styles for a warm and inviting look, consistent with the homepage */
        body {
            font-family: 'Inter', sans-serif;
            background-color: #fcfcfc; /* Soft off-white background */
            color: #2c2c2c;
            min-height: 100vh;
        }

        /* Custom Colors for the Category Tags */
        .card-tag {
            font-size: 0.7rem;
            font-weight: 700;
            padding: 0.25rem 0.6rem;
            border-radius: 9999px; /* Pill shape */
            text-transform: uppercase;
            letter-spacing: 0.05em;
            position: absolute;
            top: 0.75rem;
            left: 0.75rem;
            z-index: 10;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }

        /* 1. Tech News: Navy Blue */
        .tech-tag {
            background-color: #1E40AF;
            color: #EBF8FF;
        }

        /* 2. Local History: Burnt Orange/Terracotta */
        .history-tag {
            background-color: #B45309;
            color: #FEF3C7;
        }

        /* 3. Music Videos: Vibrant Purple */
        .music-tag {
            background-color: #7C3AED;
            color: #F3E8FF;
        }

        /* 4. AI Music: Mustard Yellow - The focus color for this page */
        .ai-tag {
            background-color: #CA8A04; /* Mustard Yellow */
            color: #FFFBEB;
        }
        
        /* Card Styling for Consistency and Warmth */
        .content-card {
            background-color: #ffffff;
            border: 1px solid #f0f0f0;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            position: relative; /* Needed for absolute positioning of the tag */
        }

        .content-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 10px 15px rgba(0, 0, 0, 0.08); /* Subtle lift effect */
        }
        
        /* Styling specifically for the embedded Bandcamp iframes */
        .bandcamp-card-wrapper {
            /* The card that wraps the iframe */
            border-radius: 0.75rem;
            overflow: hidden;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
        }
        
        .bandcamp-card-wrapper iframe {
            display: block;
            border: 0;
            width: 100%;
            /* Bandcamp's preferred height for the large player: 442px. 
               We maintain this for the aesthetic, making the card responsive in width. */
            height: 442px; 
        }

        /* Simple link hover for visual feedback */
        .nav-link:hover {
            color: #B45309; /* Burnt Orange on hover */
        }