.desktop-nav {
    display: block;
}

.site-header,
.desktop-nav {
    background: linear-gradient(
        180deg,
        #FBF6D9 0%,   /* warm matte yellow */
        #F6EFC4 100%  /* slightly deeper tone */
    );
    
    /* flatten the look */
    box-shadow: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.site-header,
.desktop-nav {
    background: linear-gradient(
        180deg,
        #FCF7DD 0%,
        #F3E9B8 100%
    );
}




.nav-menu {
    display: flex;
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-menu li {
    margin: 0;
    padding: 0;
}

.nav-menu a {
    text-decoration: none;
    color: #2B2B2B;

    padding: 6px 6px;              /* fixed hit-area */
    border-radius: 999px;           /* pill exists always */
    background-color: transparent;
	
	display: inline-flex;
    align-items: center;
    gap: 4px;
    transition:
        background-color 0.25s ease,
        color 0.2s ease;
}


/* Correct hover */
.desktop-nav li:hover > a {
    background-color: rgba(58, 47, 28, 0.08); /* warm brown-charcoal */
}
.nav-menu li.menu-item-art-studio > a::before {
    content: "";
    display: inline-block;   /* CRITICAL */
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    -webkit-mask: url("https://api.iconify.design/mdi/art.svg") no-repeat center / contain;
            mask: url("https://api.iconify.design/mdi/art.svg") no-repeat center / contain;
    opacity: 0.85;
}
.nav-menu li.menu-item-art-gallery > a::before {
    content: "";
    display: inline-block;   /* CRITICAL */
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    -webkit-mask: url("https://api.iconify.design/solar/gallery-wide-bold.svg") no-repeat center / contain;
            mask: url("https://api.iconify.design/solar/gallery-wide-bold.svg") no-repeat center / contain;
    opacity: 0.85;
}
.nav-menu li.menu-item-art-community > a::before {
    content: "";
    display: inline-block;   /* CRITICAL */
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    -webkit-mask: url("https://api.iconify.design/typcn/group.svg") no-repeat center / contain;
            mask: url("https://api.iconify.design/typcn/group.svg") no-repeat center / contain;
    opacity: 0.85;
}
.nav-menu li.menu-item-the-lore > a::before {
    content: "";
    display: inline-block;   /* CRITICAL */
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    -webkit-mask: url("https://api.iconify.design/icon-park-solid/bookshelf.svg") no-repeat center / contain;
            mask: url("https://api.iconify.design/icon-park-solid/bookshelf.svg") no-repeat center / contain;
    opacity: 0.85;
}

/* ===== Mobile Bottom Nav ===== */

@media (max-width: 768px) {
	.site-header{
		background:white;
	}
    .desktop-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
		font-weight: 600;
        z-index: 1000;
        border-top: 1px solid rgba(0,0,0,0.08);
        box-shadow: 0 -4px 12px rgba(0,0,0,0.06);
    }

    .desktop-nav .nav-menu {
        display: flex;
        justify-content: space-around;
        align-items: center;

        margin: 0;
        padding: 8px 0;
    }
.desktop-nav .current-menu-item > a {   
    background-color: rgba(58, 47, 28, 0.08);
	}
    .desktop-nav .nav-menu > li > a {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;

        font-size: 12px;
    }
}
@media (max-width: 768px) {
    body {
       /* height of bottom nav */
    }
	
}