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

@media(max-width:1024px){

.logo img{

    width:210px;

}

.navigation ul{

    gap:23px;

}

.cards-grid{

    grid-template-columns:repeat(3,minmax(0,1fr));
    width:min(760px,100%);

}

.social-row{

    gap:28px;

}

.about-copy p{

    font-size:17px;

}

}

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

@media(max-width:768px){

.navigation{

    display:none;

}

.navigation.is-open{

    position:absolute;
    top:calc(100% + 10px);
    right:0;
    display:block;
    width:min(280px, calc(100vw - 48px));
    padding:18px 20px;
    border:1px solid rgba(255,106,0,.28);
    border-radius:8px;
    background:rgba(0,0,0,.94);
    box-shadow:0 18px 42px rgba(0,0,0,.62), 0 0 24px rgba(255,106,0,.12);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);

}

.navigation.is-open ul{

    flex-direction:column;
    align-items:flex-end;
    gap:16px;

}

.navigation.is-open a::after{

    bottom:-6px;

}

.mobile-menu{

    display:block;

    background:none;

    border:none;

    color:white;

    font-size:32px;

    cursor:pointer;

}

.hero{

    min-height:auto;
    padding:0 0 18px;

}

.hero-stack{

    width:min(560px,90vw);

}

.cards-grid{

    grid-template-columns:1fr;
    width:min(320px,100%);
    gap:12px;

}

.member-card{

    min-height:330px;

}

.about-panel,
.sound-panel{

    margin-top:28px;

}

.shows-panel{

    margin-top:48px;
    margin-bottom:64px;

}

.about-panel{

    margin:42px 0;

}

.about-copy p,
.horizon-statement p{

    font-size:16px;
    line-height:1.8;

}

.sound-releases{

    grid-template-columns:repeat(2,1fr);
    justify-items:center;
    gap:32px;

}

.social-row{

    flex-wrap:wrap;
    gap:18px 30px;

}

}

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

@media(max-width:430px){

.logo img{

    width:170px;

}

.cards-grid{

    grid-template-columns:1fr;
    width:min(300px,100%);

}

.member-card{

    min-height:360px;

}

.social-row{

    gap:16px 22px;

}

}