/* ========================================
           WATERWAYS SECTION
           ======================================== */

        .content-section {
            position: relative;

            z-index: 2;

            min-height: 64vh;

            background-color: #0284c7;

            display: flex;

            flex-direction: column;

            justify-content: flex-start;

            align-items: center;

            gap: 4rem;

            padding:
                6rem 0 8rem;

            overflow: clip;
        }

        .reveal-text {
            width:
                min(650px, 88vw);

            position: relative;

            z-index: 3;

            font-family:
                'League Spartan',
                sans-serif;

            font-size: 1.4rem;

            line-height: 1.7;

            text-align: center;

            font-weight: 400;

            color: #ffffff;

            opacity: 0;

            will-change:
                opacity,
                transform;
        }


        /* ========================================
           SPLIT: STICKY SIDE NOTE + FILM STACK
           ======================================== */

        .waterways-split {
            display: grid;

            grid-template-columns:
                minmax(320px, 5fr)
                minmax(0, 7fr);

            gap:
                clamp(0px, 6vw - 3.4rem, 2.5rem);

            align-items: start;

            width:
                min(1240px, 94vw);
        }

        .waterways-side {
            position: sticky;

            top: 14vh;
        }

        .waterways-card {
            background: #0a2f4f;

            border:
                1px solid rgba(255, 255, 255, .14);

            border-radius: 18px;

            padding: 1.75rem;

            box-shadow:
                0 24px 50px rgba(0, 0, 0, .3);
        }

        .waterways-side .reveal-text {
            width: 100%;

            text-align: left;

            border-left:
                3px solid #38bdf8;

            padding-left: 1.25rem;
        }

        .waterways-kicker {
            margin: 0 0 .75rem;

            padding-left: 1.25rem;

            font-family:
                'League Spartan',
                sans-serif;

            font-size: .8rem;
            font-weight: 800;

            letter-spacing: 3px;
            text-transform: uppercase;

            color: #38bdf8;
        }

        .waterways-title {
            margin: 0 0 1rem;

            padding-left: 1.25rem;

            font-family:
                'League Spartan',
                sans-serif;

            font-size:
                clamp(1.6rem, 2.5vw, 2.4rem);

            font-weight: 800;
            line-height: 1.05;

            color: #ffffff;
        }


        /* ========================================
           VIDEO STACK
           sticky stacking cards
           ======================================== */

        .video-stack {
            width: 100%;

            max-width: 920px;

            display: flex;

            flex-direction: column;

            gap: 12vh;
        }

        .video-card {
            position: sticky;

            top: calc(12vh + var(--stack-i, 0) * 18px);

            overflow: hidden;

            background: #000000;

            border:
                1px solid rgba(255, 255, 255, .18);

            border-radius: 20px;

            box-shadow:
                0 30px 60px rgba(0, 0, 0, .35);

            will-change: transform;
        }

        /*
         * Dimming overlay driven by --dim
         * (see js/waterways.js). Fading a plain
         * overlay is compositor-only; animating
         * brightness() would repaint the video
         * every scroll frame.
         */

        .video-card::after {
            content: "";

            position: absolute;

            inset: 0;

            background: #000000;

            opacity: var(--dim, 0);

            pointer-events: none;

            will-change: opacity;
        }

        .video-card video {
            width: 100%;

            aspect-ratio: 16 / 9;

            display: block;

            object-fit: cover;

            background: #000000;
        }

        .video-card iframe.video-embed {
            width: 100%;

            aspect-ratio: 16 / 9;

            display: block;

            border: 0;

            background: #000000;
        }

        .video-card iframe.video-embed.is-short {
            width: auto;

            max-width: 92%;

            height: min(62vh, 600px);

            aspect-ratio: 9 / 16;

            margin: 0 auto;
        }

        /*
         * Shorts cards shrink to the portrait player
         * instead of stretching full width.
         */

        .video-card:has(> iframe.video-embed.is-short) {
            width: auto;
            align-self: flex-end;
        }

        .video-caption {
            display: flex;

            align-items: baseline;

            gap: .75rem;

            padding:
                1rem 1.25rem;

            background: #000000;

            color: #ffffff;

            font-family:
                'League Spartan',
                sans-serif;
        }

        .video-number {
            font-size: .85rem;

            font-weight: 800;

            letter-spacing: 2px;

            color: #38bdf8;
        }

        .video-title {
            font-size: 1.1rem;

            font-weight: 700;

            line-height: 1.2;
        }


        /* ========================================
           VIDEO STACK MOBILE
           ======================================== */

        @media (max-width: 900px) {

            .waterways-split {
                grid-template-columns: 1fr;
                row-gap: 2rem;
            }

            .waterways-side {
                position: static;
            }

            .waterways-card {
                padding: 1.25rem;
            }

            .video-card:has(> iframe.video-embed.is-short) {
                align-self: center;
            }
        }

        @media (max-width: 600px) {

            .content-section {
                gap: 3rem;

                padding:
                    4rem 0 6rem;
            }

            .video-stack {
                gap: 8vh;
            }

            .video-card {
                top: calc(10vh + var(--stack-i, 0) * 14px);

                border-radius: 14px;
            }

            .video-title {
                font-size: 1rem;
            }
        }