@font-face {
    font-family: 'DIN Next Rounded LT W01 Regular';
    src: url('fonts/DIN\ Next\ Rounded\ LT\ W01\ Regular.woff') format('woff'),
    url('fonts/DIN\ Next\ Rounded\ LT\ W01\ Regular.woff2') format('woff2'),
    url('fonts/DIN\ Next\ Rounded\ LT\ W01\ Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'CCWildWordsLower Regular';
    src: url('fonts/CCWildWordsLower\ Regular.woff') format('woff'),
    url('fonts/CCWildWordsLower\ Regular.woff2') format('woff2'),
    url('fonts/CCWildWordsLower\ Regular.ttf') format('truetype');
}

/* --- 1. CORE VARIABLES & RESET --- */
        :root {
            --col-menu: #ea0f0b;
            --col-footer: #6b00e6;
            --col-link: #1eb6fc;
            --col-text: #000000;
            --col-alt-text: #999999;
            --col-menu-text: #ffffffd1; /* White-ish grey */
            --col-menu-active: #ffffff; /* Pure white */
            --col-bg: #fefefe;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: 'DIN Next Rounded LT W01 Regular', 'Helvetica Neue', Helvetica, Arial, sans-serif;
            background-color: var(--col-bg);
            color: var(--col-text);
            line-height: 1.6;
            overflow-x: hidden;
        }

        img {
            max-width: 100%;
            height: auto;
            border: 1.5px solid black; /* Requirement: Thin solid black border */
            display: block;
        }

        /* Requirement: Alt text style (simulation using :after is tricky on img, 
           so we assume caption or specific class usage, but here is a global rule for broken images) */
        img {
            color: var(--col-alt-text); 
            font-style: italic;
            max-height: 60vh;
            object-fit: contain;
        }

        a {
            color: var(--col-link);
            text-decoration: none;
        }

        a:hover {
            text-decoration: underline;
        }

        .caption {
            color: #666;
            font-style: italic;
        }

        .center {
            text-align: center;
        }

        .popup {
            display: flex; 
            flex-direction: column; 
            align-items: center; 
            justify-content: centre; 
            max-width: 50vw; 
            margin: 20vh 25vw 10vh 25vw;
            background-color: rgba(114, 239, 255, 0.393); 
            border: solid 1px rgb(43, 230, 255);
            border-radius: 10px; 
            color: rgba(6, 6, 6, 0.929);
            box-shadow: 0 10px 20px rgba(0,0,0,0.05);
        }

        .bold { font-weight: bold;}

        #submitBtn img {
           height: 20px; /* Adjust based on your GIF size */
           vertical-align: middle;
}

        /* Global Button */
    .btn-global {
      padding: 12px 19px;
      font-size: 17px;
      border-radius: 12px;
      border: 2px solid rgb(0, 0, 0);;
      cursor: pointer;
      background: #292929;
      color: whitesmoke;
      font-weight: 600;
      transition: background 0.2s ease;
      box-shadow: 0 6px #101010;
      
    }

    .btn-global:hover {
      background: #181818;
      box-shadow: 0 5px #101010;
      transform: translateY(1px);
      text-decoration: none;
    }
 
    .btn-global:active {
      box-shadow: 0 2px #101010;
      transform: translateY(3px);
    }

    .btn-global.purple {
        border-color: #5000ab;
        background-color: #6b00e6;
        box-shadow: 0 6px #5000ab;
    }

    .btn-global.purple:hover{
        background-color: #6200d1;
        box-shadow: 0 5px #5000ab;
        transform: translateY(1px);
    }

    .btn-global.purple:active {
        box-shadow: 0 2px #5000ab;
        transform: translateY(3px);
    }

    .btn-global.gap-plz {
      margin-top: 12px;
    }

    
    input[type="email"] {
      padding: 15px 24px; 
      background-color: whitesmoke;
      border: 2px solid;
      border-color: rgb(33, 33, 33);
      border-radius: 16px; 
      width: 30vw; 
      font-size: large;
      transition: all 0.3s ease;
    }

        /* --- 2. NAVIGATION BAR --- */
        .navbar {
            background-color: var(--col-menu);
            border: solid 1.5px rgb(212, 0, 0);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 5%;
            height: 60px;
            position: sticky;
            top: 0;
            z-index: 10;
        }

        .nav-links {
            display: flex;
            align-items: center;
            gap: 30px;
            list-style: none;
        }

        .nav-item a {
            color: var(--col-menu-text);
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 5px;
            cursor: pointer;
            transition: transform 0.2s ease;
        }

        .nav-item:hover a {
            text-decoration: none;
            transform: translateY(2px) scale(1.1);
        }

        /* Highlight current page */
        .nav-item.active a {
            color: var(--col-menu-active);
        }

        .hover-text {
            font-weight: 700;
            text-decoration: none;
            transition: 0.2s ease;
        }

        .hover-text:hover {
            text-decoration: none;
            transform: scale(1.05);
        }

        /* Dropdown Logic */
        .dropdown-container {
            position: relative;
        }

        .dropdown-trigger svg {
            transition: transform 0.3s ease;
            width: 16px;
            height: 16px;
        }

        .dropdown-trigger.open svg {
            transform: rotate(180deg); /* Flip arrow */
        }

        .dropdown-menu {
            position: absolute;
            top: 100%; /* Below navbar */
            right: 0;
            background-color: white;
            border: 1px solid #c7c7c7;
            min-width: 150px;
            display: none; /* Hidden by default */
            flex-direction: column;
            align-items: center;
            border-radius: 0px;
            margin-top: 12px;
        }

        .dropdown-menu.show {
            display: flex;
        }

        .dropdown-menu a {
            color: rgb(110, 110, 110);
            padding: 10px 15px;
            border-bottom: 1px solid #eee;
        }

        .dropdown-menu a:hover {
            color: #2c2c2c;
        }

        /* --- 3. FOOTER --- */
        footer {
            background-color: var(--col-footer);
            color: white;
            text-align: center;
            padding: 40px 20px;
            margin-top: 50px;
        }
        footer p { color: rgba(255, 255, 255, 0.927); }
        footer a { color: #ffffffec; }

        /* --- 4. LANDING PAGE STYLES --- */
        
        /* The main "perfect center" class */
        .landing-hero {
            height: 80vh; /* Takes up most of viewport */
            width: 70vw;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            margin: 0 15vw 0 15vw;
        }

        .landing-hero h1 {
            font-size: 3rem;
            margin-bottom: 20px;
        }

        .landing-hero p {
            max-width: 600px;
            font-size: 1.2rem;
            color: #444;
        }

        /* Split Sections (Left/Right) */
        .split-margin {
            margin-top: 0vh;
        }

        .split-section {
            display: flex;
            margin: 0 15vw 0 15vw;
            min-height: 60vh;
            width: 70%;
            border-bottom: 1px solid #eee;
        }

        .split-half {
            flex: 1; /* Takes 50% width */
            display: flex;
            flex-direction: column;
            justify-content: center; /* Vertically centered relative to container height */
            padding: 7vw 2vw;
            /* CRITICAL: Contents aligned left regardless of side */
            align-items: flex-start; 
            text-align: left;
        }

        .split-half.media {
            align-items: flex-start; /* Image also left aligned in its box */
        }

        .footer {
            margin-top: 10vh;
        }
        /* --- 5. ARTICLE PAGE STYLES --- */

        .btn-top-margin {
            margin-top: 5vh;
        }

        .view-section { display: none; }
        .view-section.active-view { display: block; }

        /* --- 6. RESPONSIVE / MOBILE --- */
        @media (max-width: 900px) {

            .popup {
              max-width: 90vw; 
              max-height: 50vh;
              margin: 10vh 5vw 0vh 5vw; 
            }

            .landing-hero h1 {
               font-size: 36px;
            }
            /* Landing Split becomes Stack */
            .split-margin {
                margin-top: 10vh;
            }

            .split-section {
                flex-direction: column;
                width: 90%;
                margin: 0 5vw;
            }
            .split-half {
                width: 100%;
                padding: 5vw;
                order: 1;
            }

            .split-half.media {
                order: 2;
            }
            
            input[type="email"] {
                width: 50vw;
            }
        }