/*======================================================
    ABOUT.CSS
    Southern Dark Country
======================================================*/


/*======================================================
ABOUT HERO
======================================================*/

.about-hero{

    min-height:72vh;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    background:
    radial-gradient(circle at top right,
    rgba(120,20,20,.18),
    transparent 45%),
    linear-gradient(
    to bottom,
    #0b0b0b,
    #090909);

    padding:170px 0 120px;

    border-bottom:1px solid rgba(255,255,255,.05);

}

.about-hero .container{

    max-width:900px;

}

.section-label{

    display:inline-block;

    color:var(--gold);

    text-transform:uppercase;

    letter-spacing:5px;

    font-size:14px;

    font-weight:700;

    margin-bottom:22px;

}

.about-hero h1{

    font-family:'Cinzel',serif;

    font-size:64px;

    line-height:1.12;

    letter-spacing:2px;

    margin-bottom:28px;

}

.hero-description{

    max-width:680px;

    margin:auto;

    color:#B8B8B8;

    font-size:20px;

    line-height:1.9;

}



/*======================================================
ABOUT SECTION
======================================================*/

.about-section{

    padding:130px 0;

}

.about-section:nth-child(even){

    background:#101010;

}



/*======================================================
SECTION TITLE
======================================================*/

.section-heading{

    margin-bottom:70px;

}

.section-heading span{

    display:inline-block;

    color:var(--gold);

    font-size:13px;

    letter-spacing:4px;

    font-weight:700;

    margin-bottom:14px;

}

.section-heading h2{

    font-family:'Cinzel',serif;

    font-size:46px;

    line-height:1.2;

}



/*======================================================
OUR STORY
======================================================*/

.story-content{

    max-width:760px;

}

.story-content p{

    color:#BEBEBE;

    font-size:19px;

    line-height:2;

    margin-bottom:34px;

}

.story-content p:last-child{

    margin-bottom:0;

}

/*======================================================
OUR SOUND
======================================================*/

.sound-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:32px;

}

.sound-card{

    background:#151515;

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

    border-radius:18px;

    padding:42px;

    transition:all .35s ease;

}

.sound-card:hover{

    transform:translateY(-8px);

    border-color:var(--gold);

    box-shadow:0 25px 45px rgba(0,0,0,.35);

}

.sound-card h3{

    font-family:'Cinzel',serif;

    font-size:28px;

    line-height:1.3;

    margin-bottom:22px;

    position:relative;

}

.sound-card h3::after{

    content:"";

    display:block;

    width:60px;

    height:2px;

    background:var(--gold);

    margin-top:16px;

}

.sound-card p{

    color:#BABABA;

    line-height:1.9;

    font-size:17px;

}



/*======================================================
OUR IDENTITY
======================================================*/

.dark-section{

    background:#101010;

}

.dark-section .story-content{

    max-width:760px;

}

.dark-section .story-content p{

    color:#C5C5C5;

}



/*======================================================
SECTION TRANSITION
======================================================*/

.about-section + .about-section{

    border-top:1px solid rgba(255,255,255,.03);

}



/*======================================================
SMALL DETAILS
======================================================*/

.story-content strong{

    color:white;

    font-weight:600;

}

.story-content em{

    color:var(--gold);

    font-style:normal;

}



/*======================================================
SUBTLE FADE
======================================================*/

.sound-card,
.story-content{

    animation:fadeUp .7s ease;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(18px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}
/*======================================================
BEHIND THE PROJECT
======================================================*/

.creator-grid{

    display:flex;

    align-items:flex-start;

    gap:70px;

}

.creator-image{

    flex:0 0 300px;

}

.creator-image img{

    width:100%;

    border-radius:18px;

    box-shadow:0 20px 50px rgba(0,0,0,.45);

}

.creator-content{

    flex:1;

}

.creator-content h3{

    font-family:'Cinzel',serif;

    font-size:52px;

    margin-bottom:15px;

}

.creator-title{

    color:var(--gold);

    margin-bottom:30px;

    letter-spacing:2px;

    text-transform:uppercase;

}

.creator-role{

    margin-bottom:40px;

}

.creator-role li{

    margin-bottom:14px;

    color:#D2D2D2;

}

.creator-content p{

    color:#BABABA;

    line-height:2;

    font-size:18px;

    margin-bottom:26px;

}


/*==============================
ROLES
==============================*/

.creator-role{

    list-style:none;

    padding:0;

    margin:0 0 40px;

}

.creator-role li{

    position:relative;

    padding-left:28px;

    margin-bottom:18px;

    color:#D4D4D4;

    font-size:18px;

    letter-spacing:.3px;

}

.creator-role li::before{

    content:"◆";

    position:absolute;

    left:0;

    color:var(--gold);

}



/*==============================
TEXT
==============================*/

.creator-content p{

    color:#BDBDBD;

    font-size:18px;

    line-height:2;

    margin-bottom:26px;

}

.creator-content p:last-child{

    margin-bottom:0;

}



/*======================================================
RESPONSIVE
======================================================*/

@media(max-width:900px){

.creator-grid{

    flex-direction:column;

    align-items:center;

}

.creator-content{

    text-align:center;

}

.creator-role{

    display:inline-block;

    text-align:left;

}

.creator-image{

    flex:none;

    max-width:240px;

}

}



@media(max-width:768px){

    .about-hero{

        min-height:auto;

        padding:140px 0 90px;

    }

    .about-hero h1{

        font-size:44px;

    }

    .hero-description{

        font-size:18px;

    }

    .about-section{

        padding:90px 0;

    }

    .section-heading{

        margin-bottom:45px;

    }

    .section-heading h2{

        font-size:34px;

    }

    .story-content p{

        font-size:17px;

    }

    .sound-grid{

        grid-template-columns:1fr;

    }

    .sound-card{

        padding:30px;

    }

    .sound-card h3{

        font-size:24px;

    }

    .creator-image img{

        max-width:220px;

    }

    .creator-content h3{

        font-size:38px;

    }

    .creator-role li{

        font-size:17px;

    }

}
/*======================================================
OFFICIAL ARTIST STATEMENT
======================================================*/

.official-statement{

    margin-top:45px;

    padding:28px 32px;

    border:1px solid rgba(182,138,74,.25);

    border-left:4px solid var(--gold);

    border-radius:14px;

    background:#111111;

}

.official-statement h4{

    font-family:'Cinzel',serif;

    font-size:22px;

    margin-bottom:16px;

    color:var(--gold);

}

.official-statement p{

    margin:0;

    color:#CFCFCF;

    line-height:1.9;

    font-size:17px;

}