.site-header{

    position:sticky;

    top:0;

    z-index:100;

    background:var(--color-bg);

    border-bottom:1px solid rgba(0,0,0,.06);

    transition:padding var(--speed-normal) ease;

}

.site-header .container{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding-block:.75rem;

    transition:padding var(--speed-normal) ease;

}

.site-header.is-scrolled .container{

    padding-block:.4rem;

}

.site-brand{

    display:flex;

    align-items:center;

    gap:.85rem;

}

.brand-text{

    display:flex;

    flex-direction:column;

    line-height:1.25;

}

.brand-name{

    font-family:"Cormorant Garamond",serif;

    font-weight:600;

    font-size:1.15rem;

    color:var(--color-title);

    white-space:nowrap;

}

.brand-subtitle{

    font-family:"Manrope",sans-serif;

    font-weight:500;

    font-size:.8rem;

    color:var(--gold-mid);

    white-space:nowrap;

    overflow:hidden;

    max-height:1.2em;

    opacity:1;

    transition:
        opacity var(--speed-normal) ease,
        max-height var(--speed-normal) ease;

}

.site-header.is-scrolled .brand-subtitle{

    opacity:0;

    max-height:0;

}

.nav{

    display:flex;

    align-items:center;

    gap:2rem;

}

.nav-list{

    position:relative;

    display:flex;

    gap:1.75rem;

}

.nav-link{

    font-family:"Manrope",sans-serif;

    font-size:.95rem;

    font-weight:500;

    color:var(--color-text);

    transition:color var(--speed-fast) ease;

}

.nav-link:hover{

    color:var(--color-primary);

}

.nav-cta{

    font-family:"Manrope",sans-serif;

    font-size:.9rem;

    font-weight:700;

    color:#FFFFFF;

    background:var(--color-accent);

    padding:.6rem 1.4rem;

    border-radius:var(--radius-sm);

    transition:opacity var(--speed-fast) ease;

}

.nav-cta:hover{

    opacity:.85;

}

.nav-toggle{

    display:none;

    flex-direction:column;

    gap:5px;

    background:none;

    border:none;

    cursor:pointer;

    padding:.5rem;

}

.nav-toggle span{

    width:24px;

    height:2px;

    background:var(--color-title);

    transition:transform var(--speed-fast) ease,opacity var(--speed-fast) ease;

}

@media (max-width:768px){


    .brand-name{

        font-size:1rem;

    }
    
    .nav-toggle{

        display:flex;

    }

    .nav{

        position:fixed;

        top:0;

        left:0;

        right:0;

        bottom:0;

        background:var(--color-bg);

        flex-direction:column;

        justify-content:center;

        gap:2.5rem;

        opacity:0;

        pointer-events:none;

        transform:translateY(-8px);

        transition:
            opacity var(--speed-normal) ease,
            transform var(--speed-normal) ease;

    }

    .nav.is-open{

        opacity:1;

        pointer-events:auto;

        transform:translateY(0);

    }

    .nav-list{

        flex-direction:column;

        align-items:center;

        gap:2rem;

    }

    .nav-link{

        position:relative;

        font-size:1.4rem;

    }

    .nav-link.is-active::before{

        content:"";

        position:absolute;

        left:-28px;

        top:50%;

        transform:translateY(-50%);

        width:8px;

        height:8px;

        border-radius:50%;

        background:var(--gold-mid);

        box-shadow:0 0 10px rgba(212,160,23,.8);

    }

    body.nav-open{

        overflow:hidden;

    }

    .nav-thread{

        display:none;

    }

}

.nav-link.is-active{

    background:linear-gradient(135deg,var(--gold-light),var(--gold-mid) 60%,var(--gold-deep));

    -webkit-background-clip:text;

    background-clip:text;

    color:transparent;

    font-weight:700;

}

.nav-thread{

    position:absolute;

    bottom:-8px;

    left:0;

    height:2px;

    width:0;

    background:linear-gradient(90deg,var(--gold-light),var(--gold-mid),var(--gold-deep));

    border-radius:2px;

    opacity:0;

    transition:

        left .4s cubic-bezier(.34,1.2,.64,1),

        width .4s cubic-bezier(.34,1.2,.64,1),

        opacity .25s ease;

    pointer-events:none;

}

.nav-thread::after{

    content:"";

    position:absolute;

    right:-3px;

    top:50%;

    transform:translateY(-50%);

    width:7px;

    height:7px;

    border-radius:50%;

    background:var(--gold-mid);

    box-shadow:0 0 8px rgba(212,160,23,.75);

}