/* 1. Basic Reset */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }


        .title {
            text-align: center;
        }

        /* 2. Main Container */
        .split-container {
            display: flex;
            height: 100vh;
            width: 100vw;
            background-color: #fff; /* White background to blend with text */
        }

        @font-face { font-family: maple; src: url('fonts/MapleMono-Bold.ttf'); }

        html, body {
            height: 100%;
            overflow: hidden; /* No scrolling on the main page */
            /* font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; */
            font-family: maple;
            color: #333;
        }


        /* 3. Text Section (Left) - Takes remaining space */
        .text-section {
            flex: 1; /* Grow to fill all available space to the left of the image */
            display: flex;
            flex-direction: column;
            justify-content: top;
            padding: 4rem;
            
            /* If text is long, scroll ONLY the text part */
            overflow-y: auto; 
        }

        .text-section h1 {
            font-size: 4rem;
            margin-bottom: 1.5rem;
            color: #111;
        }

        .text-section p {
            font-size: 1.62rem;
            line-height: 1.6;
            color: #333;
            margin-bottom: 0.15rem;
            margin-top: 1rem;
            max-width: 700px;
        }

        .text-section ul {
            margin: 0.35rem 0;
            padding-left: 1.5rem;
            max-width: 1400px;
        }

        .text-section ul li {
            position: relative;
            font-size: 1.46rem;
        }


        .now-playing {
        margin-left: 0.5rem;
        font-weight: 500;
        color: #333;
        }

        .suffix {
        color: #8a8a8a;       
        font-size: 0.9em;
        }


        a {
        color: #5ab38d;                 
        text-decoration: none;
        font-weight: 500;
        position: relative;
        transition:
            color 0.25s ease,
            transform 0.25s ease;
        }

        a::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -2px;
        width: 100%;
        height: 2px;
        background-color: #7fb7e6;      
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.25s ease;
        }

        a:hover {
        color: #7fb7e6;                 
        transform: translateY(-1px);
        }

        a:hover::after {
        transform: scaleX(1);
        }


















        /* 4. Image Section (Right) - Sized by the image itself */
        .image-section {
            /* Do not grow, do not shrink. Stay exactly the size of the image content */
            flex: 0 0 auto; 
            height: 100vh; 
        }

        .image-section img {
            height: 100%; /* Force image to be full screen height */
            width: auto;  /* Width adjusts automatically to keep 2:3 ratio */
            display: block; /* Removes tiny gap at bottom of images */
        }

        /* 5. Mobile Responsiveness */
        @media (max-width: 900px) {
            .split-container {
                flex-direction: column-reverse; /* Stack vertically on tablets/phones */
                height: auto;
            }

            html, body {
                overflow: auto; /* Enable scroll on mobile */
            }

            .image-section {
                width: 100%;
                height: auto;
            }

            .image-section img {
                width: 100%;
                height: auto;
                max-height: 60vh; /* Limit height on mobile so text is reachable */
                object-fit: cover;
            }

            .text-section {
                padding: 2rem;
            }
        }