/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .topbar {
        height: 72px;

        grid-template-columns:
            auto
            1fr
            auto;
    }

    .brand {
        width: 44px;
        height: 44px;
    }

    .header-center {
        display: none;
    }


    .experience {
        display: block;

        padding-top: 50px;
    }

    .intro h1 {
        font-size:
            clamp(
                68px,
                20vw,
                110px
            );
    }

    .hero-stats {
        margin-top: 35px;
    }


    .universe {
        margin-top: 35px;
    }

    .universe-label {
        margin: 0;
    }

    .universe-label span:last-child {
        display: none;
    }

    #stage {
        height: 70vh;
        min-height: 500px;
    }


    .collective {
        grid-template-columns: 1fr;

        padding: 80px 6vw;
    }

    .collective-number {
        margin-bottom: 45px;
    }


    .timeline,
    .people-section,
    .join-bottom {
        padding: 80px 6vw;
    }


    .year-line {
        grid-template-columns:
            repeat(6, 1fr);

        row-gap: 28px;

        border-top: 0;
    }

    .year-chip {
        border-top:
            1px solid
            var(--line);
    }


    .people-wall {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .statement-main {
        gap: 2vw;
    }


    .join-bottom {
        display: block;
    }

    .circle-button {
        width: 170px;
        height: 170px;

        margin-top: 45px;
    }


    footer {
        gap: 15px;

        flex-wrap: wrap;
    }


    .wall-mode #stage {
        height: 100vh;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 560px) {

    .topbar {
        padding:
            0
            20px;
    }

    .people-indicator span {
        display: none;
    }


    .experience {
        padding:
            40px
            20px
            60px;
    }

    .intro h1 {
        font-size:
            clamp(
                64px,
                21vw,
                92px
            );
    }

    .intro p {
        margin-top: 30px;

        font-size: 16px;
    }


    .primary {
        width: 100%;
    }


    .hero-stats {
        gap: 12px;
    }

    .hero-stats > div {
        min-width: 0;

        padding-right: 12px;
    }


    #stage {
        min-height: 450px;
        height: 62vh;
    }


    .collective,
    .timeline,
    .people-section,
    .join-bottom {
        padding:
            70px
            20px;
    }


    .collective-number {
        font-size: 42vw;
    }


    .year-line {
        grid-template-columns:
            repeat(4, 1fr);
    }


    .people-wall {
        grid-template-columns: 1fr;
    }

    .people-head {
        display: block;
    }

    .people-total {
        margin-top: 30px;
    }


    .statement {
        padding:
            80px
            20px;
    }

    .statement-main {
        gap: 2vw;

        font-size: 15vw;
    }


    .success-actions {
        display: grid;
    }


    .stage-note {
        right: 2%;
        bottom: 2%;
    }


    .welcome-name {
        font-size: 17vw;
    }


    .wall-mode .universe {
        margin-top: 0;
    }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        scroll-behavior:
            auto !important;
    }
}