/* =========================
   HEADER
========================= */

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 20;

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

    width: 100%;
    padding: 18px clamp(18px, 4vw, 56px);

    color: var(--ivory);

    transition:
            background 240ms ease,
            color 240ms ease,
            box-shadow 240ms ease,
            padding 240ms ease;
}

.site-header.scrolled,
.site-header.nav-open {
    padding-block: 12px;

    color: #ebc091;

    background: rgba(30, 35, 43, 0.88);

    box-shadow:
            0 14px 35px rgba(13, 26, 23, 0.12);

    backdrop-filter: blur(16px);
}

.brand-link {
    display: inline-flex;
    align-items: center;

    gap: 12px;

    text-decoration: none;
}

.brand-word {
    font-family: var(--serif);
    font-size: 1.15rem;
    font-weight: 600;

    letter-spacing: 0.32em;
}

.brand-mark {
    width: 42px;
    height: 48px;

    padding: 4px;

    object-fit: contain;

    border-radius: 50%;

    filter:
            drop-shadow(0 0 15px #ebc091);
}

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

.site-nav {
    display: flex;
    align-items: center;

    gap: clamp(16px, 3vw, 34px);
}

.site-nav a {
    position: relative;

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

    letter-spacing: 0.2em;

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

.site-nav a::after {
    position: absolute;

    right: 0;
    bottom: -8px;
    left: 0;

    height: 1px;

    content: "";

    background: currentColor;

    transform: scaleX(0);
    transform-origin: right;

    transition: transform 180ms ease;
}

.site-nav a:hover::after,
.site-nav a:focus-visible::after,
.site-nav a.active::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* =========================
   MOBILE NAV BUTTON
========================= */

.nav-toggle {
    display: none;

    width: 44px;
    height: 44px;

    color: inherit;

    cursor: pointer;

    background: transparent;

    border: 1px solid currentColor;
    border-radius: 50%;
}

.nav-toggle span {
    display: block;

    width: 18px;
    height: 1px;

    margin: 6px auto;

    background: currentColor;

    transition: transform 180ms ease;
}

.nav-toggle[aria-expanded="true"] span:first-child {
    transform: translateY(3.5px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:last-child {
    transform: translateY(-3.5px) rotate(-45deg);
}

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

@media (max-width: 860px) {
    html {
        scroll-padding-top: 72px;
    }

    .nav-toggle {
        z-index: 31;
        display: block;
    }

    .site-nav {
        position: fixed;
        inset: 0;
        z-index: 30;

        display: grid;
        place-content: center;
        gap: 24px;

        color: var(--ivory);

        background:
                rgba(16, 43, 37, 0.97);

        opacity: 0;
        pointer-events: none;

        transform: translateY(-8px);

        transition:
                opacity 180ms ease,
                transform 180ms ease;
    }

    .site-nav.open {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }

    .site-nav a {
        font-size: 1rem;
        text-align: center;
    }
}

@media (max-width: 520px) {
    .site-header {
        padding-inline: 16px;
    }

    .brand-word {
        font-size: 0.92rem;
        letter-spacing: 0.2em;
    }
}