/* ==========================================================
   RESET
========================================================== */

*,
*::before,
*::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:Inter, Helvetica, Arial, sans-serif;
    color:#767676;
    background:#ffffff;
    line-height:1.7;
    min-height:200vh;
}


/* ==========================================================
   NAVIGATION BAR
========================================================== */

.navbar{

    position:fixed;
    top:0;
    left:0;

    width:100%;
    height:96px;

    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;

    padding:0 64px;

    background:rgba(255,255,255,.72);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);

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

    box-shadow:
        inset 0 1px rgba(255,255,255,.75),
        0 8px 30px rgba(0,0,0,.04);

    z-index:999;
}


/* ==========================================================
   DESKTOP NAV
========================================================== */

.nav-left,
.nav-right{

    display:flex;
    align-items:center;

}

.nav-left{
    gap:42px;
}

.nav-right{
    justify-content:flex-end;
    gap:28px;
}


/* Nav links (left side only) */

.nav-left a{

    color:#767676;
    text-decoration:none;

    text-transform:uppercase;

    font-size:1.05rem;
    font-weight:400;
    letter-spacing:.10em;

    transition:
        opacity .25s ease,
        transform .25s ease;

}

.nav-left a:hover{
    opacity:.55;
    transform:translateY(-2px);
}


/* ==========================================================
   LOGO (RESOLVED CONFLICT)
========================================================== */

.navbar .logo{

    color:#767676;
    text-decoration:none;

    text-transform:uppercase;

    font-size:2.2rem;
    font-weight:700;

    letter-spacing:.18em;

    transition:
        opacity .3s ease,
        transform .3s ease;
}

.navbar .logo:hover{
    opacity:.65;
}


/* ==========================================================
   SOCIAL ICONS
========================================================== */

.nav-right a{

    color:#767676;

    font-size:1.35rem;

    display:flex;
    align-items:center;
    justify-content:center;

    transition:
        opacity .25s ease,
        transform .25s ease;

}

.nav-right a:hover{
    opacity:.55;
    transform:translateY(-2px);
}


/* ==========================================================
   BURGER
========================================================== */

.burger{

    display:none;

    position:fixed;
    left:26px;
    bottom:26px;

    width:66px;
    height:66px;

    border:none;
    border-radius:50%;

    background:rgba(255,255,255,.65);
    backdrop-filter:blur(22px);

    box-shadow:
        inset 0 1px rgba(255,255,255,.75),
        0 12px 40px rgba(0,0,0,.10);

    cursor:pointer;
    z-index:1002;
}

.burger span{

    display:block;
    width:24px;
    height:2px;

    margin:5px auto;

    background:#767676;

    transition:.35s;
}

.burger.active span:nth-child(1){
    transform:translateY(7px) rotate(45deg);
}

.burger.active span:nth-child(2){
    opacity:0;
}

.burger.active span:nth-child(3){
    transform:translateY(-7px) rotate(-45deg);
}


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

.mobile-menu{

    position:fixed;
    inset:0;

    background:rgba(255,255,255,.80);

    backdrop-filter:blur(24px);

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    gap:48px;

    opacity:0;
    visibility:hidden;

    transform:translateY(20px);

    transition:
        opacity .45s ease,
        transform .45s ease,
        visibility .45s;

    z-index:1000;
}

.mobile-menu.active{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}


/* Mobile links */

.mobile-links{

    display:flex;
    flex-direction:column;
    align-items:center;
    gap:22px;
}

.mobile-links a{

    color:#767676;

    text-decoration:none;
    text-transform:uppercase;

    font-size:1.35rem;
    font-weight:400;
    letter-spacing:.12em;

    transition:opacity .25s ease;
}

.mobile-links a:hover{
    opacity:.55;
}


/* Mobile socials */

.mobile-socials{

    display:flex;
    gap:36px;
}

.mobile-socials a{

    color:#767676;
    font-size:1.8rem;

    transition:
        opacity .25s ease,
        transform .25s ease;
}

.mobile-socials a:hover{
    opacity:.55;
    transform:translateY(-2px);
}


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

@media (max-width:900px){

    .nav-left,
    .nav-right{
        display:none;
    }

    .navbar{
        grid-template-columns:1fr;
        justify-items:center;

        height:80px;
        padding:0 24px;
    }

    .navbar .logo{
        font-size:2rem;
        letter-spacing:.16em;
    }

    .burger{
        display:block;
    }
}