/* ═════════════════════════════════════════════════════════════════
   Site navigation bar — overlaid on the hero stage
   ═════════════════════════════════════════════════════════════════ */

:root {
    /* ── Navbar box (explicit — content does NOT dictate size) ── */
    --nav-top:    7.5%;
    --nav-height: 7.5%;
    --nav-width:  80.5%;

    /* ── Navbar top-edge thickness ────────────── */
    --nav-edge: 0.25vw;

    /* ── Layout ─────────────────────────────── */
    --nav-link-gap:   clamp(32px, 5vw,   72px);

    /* ── Navbar colours ───────────────────────── */
    --nav-bg:           #f0f0f0;
    --nav-edge-color:   #ffffff;
    --nav-accent:       #6B3F69;
    --nav-accent-hover: #A376A2;
}

.site-nav {
    position: absolute;
    top: var(--nav-top);
    left: 50%;
    transform: translateX(-50%);
    width: var(--nav-width);
    height: var(--nav-height);

    box-sizing: border-box;
    background: var(--nav-bg);

    box-shadow:
        0 0.05vw 0 0 rgba(0,0,0,0.08),
        0 0.2vw 0.8vw rgba(0,0,0,0.18);

    z-index: 10;
    display: flex;
    align-items: center;
    padding: 0 2%;
    gap: 2%;
}

/* Top face — a thin lighter strip simulating the top edge
   of thick material viewed in isometric. */
.site-nav::before {
    content: "";
    position: absolute;
    top: calc(-1 * var(--nav-edge));
    left: 0;
    right: 0;
    height: var(--nav-edge);
    background: var(--nav-edge-color);
}

/* ── Brand / logo ───────────────────────────────────── */
.site-nav .brand {
    font-family: var(--font-nav);
    font-weight: 800;
    line-height: 1;
    color: var(--nav-accent);
    letter-spacing: 0.02em;
    white-space: nowrap;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.3em;
}

.site-nav .brand .brand-icon {
    height: 1em;
    width: auto;
    vertical-align: middle;
}

/* ── Nav links ──────────────────────────────────────── */
.site-nav .nav-links {
    display: flex;
    gap: var(--nav-link-gap);
    margin: 0.2em 0 0 auto;
    list-style: none;
    padding: 0;
    line-height: 1;
}

.site-nav .nav-links a {
    font-family: var(--font-nav);
    text-decoration: none;
    color: var(--nav-accent);
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    transition: color 0.15s;
}

.site-nav .nav-links a:hover {
    color: var(--nav-accent-hover);
}

/* ── Responsive ─────────────────────────────────────── */
@media (max-width: 768px) {
    :root {
        --nav-top:    4%;
        --nav-height: 8%;
        --nav-width:  92%;
        --nav-link-gap: clamp(6px, 1.5vw, 18px);
    }

    .site-nav {
        flex-wrap: wrap;
        justify-content: center;
    }

    .site-nav .nav-links {
        flex-wrap: wrap;
        justify-content: center;
    }
}