/* ==========================================================================
           JOURNAL HERO & FEATURED ARTICLE
           ========================================================================== */
        body {
            overflow-x: hidden;
        }

        .journal-hero {
            padding: 100px 0 80px;
            background: var(--bg-dark);
            position: relative;
        }

        .journal-hero::before {
            /* content: 'JACK FASHION '; */
            position: absolute;
            top: 150px;
            left: 50%;
            transform: translateX(-50%);
            font-family: var(--font-serif);
            font-size: 20vw;
            color: rgba(255,255,255,0.02);
            font-weight: 700;
            pointer-events: none;
            z-index: 0;
            white-space: nowrap;
        }

        .featured-article {
            position: relative;
            z-index: 2;
            display: grid;
            grid-template-columns: 1.2fr 1fr;
            gap: 60px;
            align-items: center;
            background: var(--bg-card);
            border: 1px solid rgba(255,255,255,0.05);
            transition: var(--transition);
        }

        .featured-article:hover {
            border-color: rgba(193, 18, 31, 0.3);
            box-shadow: 0 30px 60px rgba(0,0,0,0.8);
        }

        .featured-img {
            height: 600px;
            overflow: hidden;
            position: relative;
        }

        .featured-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: grayscale(40%) contrast(110%);
            transition: transform 1s cubic-bezier(0.25, 1, 0.5, 1), filter 1s ease;
        }

        .featured-article:hover .featured-img img {
            transform: scale(1.05);
            filter: grayscale(0%);
        }

        .featured-content { padding: 50px 60px 50px 0; }

        .article-meta {
            display: flex;
            align-items: center;
            gap: 20px;
            color: var(--text-muted);
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-bottom: 25px;
            flex-wrap: wrap;
        }

        .article-meta span.category { color: var(--brand-red); font-weight: 500; }

        .featured-content h1 { font-size: 55px; line-height: 1.1; margin-bottom: 25px; color: var(--brand-silver); }
        .featured-content p { font-size: 15px; color: var(--text-muted); margin-bottom: 35px; font-weight: 400;  font-size: 23px;}

        .btn-read {
            display: inline-flex;
            align-items: center;
            gap: 15px;
            color: #d41414;
            font-size: 20px;
            text-transform: uppercase;
            letter-spacing: 3px;
            border-bottom: 1px solid var(--brand-red);
            padding-bottom: 5px;
        }
        .btn-read i { transition: transform 0.3s ease; }
        .btn-read:hover i { transform: translateX(8px); }

        /* ==========================================================================
           CATEGORY FILTER (Sticky)
           ========================================================================== */
        .category-nav {
            position: sticky;
            top: 85px;
            background: rgba(3, 3, 3, 0.95);
            backdrop-filter: blur(10px);
            z-index: 99;
            padding: 25px 0;
            border-top: 1px solid rgba(255,255,255,0.05);
            border-bottom: 1px solid rgba(255,255,255,0.05);
            margin-bottom: 80px;
        }

        .category-list {
            display: flex;
            justify-content: center;
            gap: 50px;
            list-style: none;
        }

        .category-list button {
            background: transparent;
            border: none;
            color: var(--text-muted);
            font-family: var(--font-sans);
            font-size: 19px;
            letter-spacing: 3px;
            text-transform: uppercase;
            cursor: pointer;
            transition: var(--transition);
            white-space: nowrap;
        }

        .category-list button:hover, .category-list button.active {
            color: var(--brand-red);
        }

        /* ==========================================================================
           MAGAZINE GRID LAYOUT (Mixed Sizes)
           ========================================================================== */
        .editorial-grid {
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            gap: 40px;
            margin-bottom: 120px;
        }

        .grid-item {
            background: var(--bg-card);
            border: 1px solid rgba(255,255,255,0.02);
            transition: var(--transition);
            display: flex;
            flex-direction: column;
        }

        .grid-item:hover {
            transform: translateY(-10px);
            border-color: rgba(193, 18, 31, 0.3);
            box-shadow: 0 20px 40px rgba(0,0,0,0.6);
        }

        /* Defining the asymmetrical grid */
        .item-large { grid-column: span 6; } /* Half width */
        .item-small { grid-column: span 4; } /* Third width */

        .item-img { overflow: hidden; position: relative; }
        .item-large .item-img { height: 400px; }
        .item-small .item-img { height: 280px; }

        .item-img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(50%); transition: var(--transition); }
        .grid-item:hover .item-img img { filter: grayscale(0%); transform: scale(1.08); }

        .item-content { padding: 35px; flex-grow: 1; display: flex; flex-direction: column; }

        .item-large .item-content h3 { font-size: 32px; margin: 15px 0; color: var(--brand-silver); }
        .item-small .item-content h3 { font-size: 24px; margin: 15px 0; color: var(--brand-silver); }

        .item-content p { color: var(--text-muted); font-size: 21px; font-weight: 400; margin-bottom: 25px; flex-grow: 1; }

        /* ==========================================================================
           NEWSLETTER VIP SECTION
           ========================================================================== */
        .newsletter-section {
            background: url('../images/newimg/bgg.jpeg') center center/cover fixed;
            padding: 100px 0;
            position: relative;
            text-align: center;
        }

        .newsletter-section::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgb(189, 179, 179), rgba(211, 206, 206, 0.85));
        }

        .newsletter-content {
            position: relative;
            z-index: 2;
            max-width: 600px;
            margin: auto;
            padding: 0 20px;
        }

        .newsletter-content h2 { font-size: 50px; color: var(--brand-silver); margin-bottom: 20px; }
        .newsletter-content p { color: var(--text-muted); margin-bottom: 40px; font-weight: 400; font-size: 21px; }

        .subscribe-form {
            display: flex;
            border-bottom: 1px solid var(--brand-silver);
            padding-bottom: 10px;
            transition: var(--transition);
        }

        .subscribe-form:focus-within { border-color: var(--brand-red); }

        .subscribe-form input {
            flex-grow: 1;
            background: transparent;
            border: none;
            color: #fff;
            font-size: 20px;
            outline: none;
            font-family: var(--font-sans);
            padding: 10px;
            min-width: 0;
        }

        .subscribe-form button {
            background: transparent;
            border: none;
            color: var(--brand-red);
            font-size: 20px;
            text-transform: uppercase;
            letter-spacing: 2px;
            cursor: pointer;
            font-weight: 500;
            white-space: nowrap;
        }

        /* ==========================================================================
           FOOTER
           ========================================================================== */

        /* ==========================================================================
           RESPONSIVE DESIGN
           ========================================================================== */

        /* Tablet */
        @media(max-width:1024px) {
            .featured-article { grid-template-columns: 1fr; }
            .featured-img { height: 450px; }
            .featured-content { padding: 40px; }
            .item-large, .item-small { grid-column: span 6; } /* Everything becomes 50% width */
            .category-list { flex-wrap: wrap; gap: 20px; justify-content: center; }
            .journal-hero { padding: 120px 0 80px; }
        }

        /* Mobile / large phones */
        @media(max-width:768px) {
            .journal-hero { padding: 100px 0 60px; }
            .journal-hero::before { font-size: 28vw; top: 100px; }

            .featured-content { padding: 30px; }
            .featured-content h1 { font-size: 34px; }
            .featured-img { height: 320px; }

            .category-nav { top: 0; padding: 15px 0; margin-bottom: 50px; }
            .category-list { gap: 15px; }
            .category-list button { font-size: 11px; }

            .item-large, .item-small { grid-column: span 12; } /* Everything becomes 100% width */
            .editorial-grid { gap: 25px; margin-bottom: 70px; }
            .item-large .item-img, .item-small .item-img { height: 240px; }
            .item-content { padding: 25px; }
            .item-large .item-content h3, .item-small .item-content h3 { font-size: 24px; }

            .newsletter-section { background-attachment: scroll; padding: 90px 0; }
            .newsletter-content h2 { font-size: 34px; }
            .newsletter-content p { font-size: 20px; }

            .subscribe-form { flex-direction: column; gap: 15px; border-bottom: none; }
            .subscribe-form input { border-bottom: 1px solid var(--brand-silver); padding: 12px 10px; }
            .subscribe-form button { align-self: flex-start; padding: 5px 0; }
        }

        /* Small phones */
        @media(max-width:480px) {
            .featured-content h1 { font-size: 28px; }
            .featured-content p { font-size: 14px; }
            .featured-img { height: 240px; }

            .category-list { gap: 10px; }
            .category-list button { font-size: 10px; }

            .journal-hero::before { font-size: 36vw; }

            .item-large .item-content h3, .item-small .item-content h3 { font-size: 21px; }
            .item-content { padding: 20px; }

            .newsletter-content h2 { font-size: 26px; }
        }