/* ==========================================================
   CENTURION
   NAVBAR
========================================================== */

.header{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    height:var(--navbar-height);

    z-index:var(--z-navbar);

    transition:var(--transition-fast);

}

.header.is-scrolled{

    background:rgba(9,9,9,.88);

    backdrop-filter:blur(var(--blur-glass));

    -webkit-backdrop-filter:blur(var(--blur-glass));

    border-bottom:1px solid var(--color-border);

}

.navbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    height:var(--navbar-height);

}

.navbar__brand{

    display:flex;

    align-items:center;

}

.navbar__logo{

    width:42px;

    height:48px;

    object-fit:contain;

    transition:var(--transition);

}

.navbar__menu{

    display:flex;

    align-items:center;

    gap:48px;

}

.navbar__link{

    position:relative;

    white-space:nowrap;

    font-size:.95rem;

    font-weight:500;

    color:var(--color-text-secondary);

    transition:var(--transition);

}

.navbar__link:hover{

    color:var(--color-gold);

}

.navbar__link::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:1px;

    background:var(--color-gold);

    transition:var(--transition);

}

.navbar__link:hover::after{

    width:100%;

}

.navbar__actions{

    display:flex;

    align-items:center;

    gap:12px;

}

/* ==========================================================
   WORDMARK
   ========================================================== */

.navbar__wordmark{

    display:flex;

    flex-direction:column;

    gap:3px;

    margin-left:12px;

    font-family:var(--font-heading);

    font-size:1.05rem;

    font-weight:var(--fw-medium);

    letter-spacing:.3em;

    line-height:1;

    color:var(--color-text);

}

.navbar__by{

    font-size:.55rem;

    font-weight:var(--fw-regular);

    letter-spacing:.38em;

    text-transform:uppercase;

    color:var(--color-gold);

}

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

.navbar__toggle{

    display:none;

    flex-direction:column;

    justify-content:center;

    gap:5px;

    width:44px;

    height:44px;

    padding:10px;

    background:transparent;

    border:1px solid var(--color-border);

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

    cursor:pointer;

}

.navbar__toggle-bar{

    width:100%;

    height:2px;

    background:var(--color-text);

    border-radius:2px;

    transition:var(--transition-fast);

}

.navbar__toggle[aria-expanded="true"] .navbar__toggle-bar:nth-child(1){

    transform:translateY(7px) rotate(45deg);

}

.navbar__toggle[aria-expanded="true"] .navbar__toggle-bar:nth-child(2){

    opacity:0;

}

.navbar__toggle[aria-expanded="true"] .navbar__toggle-bar:nth-child(3){

    transform:translateY(-7px) rotate(-45deg);

}