nav {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 0 2rem;
    height: 56px;
    background: rgba(11,14,26,0.9);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    position: sticky;
    top: 0;
    z-index: 10;
}

.logo {
    font-family: "Lobster Two", cursive;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1;
    font-style: italic;
    margin-right: auto;
    color: #fff;
    transform: translateY(-5px);   /* push logo up */
}
.logo.initials {
    font-family: "Dancing Script", cursive;
    font-weight: 900;
    font-style: normal;
    letter-spacing: -3px;
    vertical-align: +1.5px;       /* bump text baseline up */
}

nav a { color: #aaa; text-decoration: none; font-size: 0.9rem; }
nav a:hover { color: #fff; }

nav button {
    cursor: pointer;
    padding: 0.45rem 1.2rem;
    border: none;
    border-radius: 999px;
    background: #ff3cac;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
}

/* ===== DROPDOWN STYLES ===== */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: rgba(35,40,65,0.85); /* slightly lighter than page */
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 6px;
    padding: 0.25rem 0;             /* tighter padding */
    min-width: max-content;         /* width fits content exactly */
    z-index: 20;
    display: none;
}

.dropdown-menu a {
    display: block;
    padding: 0.35rem 1rem; /* compact, no giant empty width */
    color: #ccc;
    font-size: 0.875rem;
    white-space: nowrap; /* prevents wrapping */
}

.dropdown-menu a:hover {
    background: rgba(255,255,255,0.1);
    color: #fff;
}

nav .dropdown:hover .dropdown-menu {
    display: block;
}