/* nav.css — Fixed navigation bar */

.nav {
    position: fixed; top: 0; left: 0; right: 0;
    height: 64px; z-index: 100;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 40px;
    background: rgba(237, 237, 234, 0.85);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--rule);
    transition: background 0.3s var(--ease);
}

.nav-logo {
    display: flex; align-items: center;
    text-decoration: none;
}
.nav-logo img { height: 28px; width: auto; display: block; }

.nav-links { display: flex; gap: 32px; align-items: center; }

.nav-link {
    font-family: var(--font-mono); font-size: 0.75rem;
    letter-spacing: 0.06em; text-transform: uppercase;
    text-decoration: none; color: var(--mid);
    transition: color 0.2s var(--ease); position: relative;
}
.nav-link:hover { color: var(--ink); }
.nav-link::after {
    content: ''; position: absolute; bottom: -4px; left: 0;
    width: 0; height: 1px; background: var(--accent);
    transition: width 0.3s var(--ease);
}
.nav-link:hover::after { width: 100%; }

.nav-toggle {
    display: none; background: none; border: none;
    cursor: pointer; padding: 8px; color: var(--ink);
}
.nav-toggle svg { width: 22px; height: 22px; }

@media (max-width: 900px) {
    .nav-toggle {
        display: flex; align-items: center; justify-content: center;
        min-width: 44px; min-height: 44px;
    }
    .nav-links {
        display: none; position: absolute;
        top: 64px; left: 0; right: 0;
        background: var(--bg); border-bottom: 1px solid var(--rule);
        flex-direction: column; padding: 20px 40px; gap: 16px;
    }
    .nav-links.open { display: flex; }
    .nav-link {
        min-height: 44px;
        display: flex; align-items: center;
    }
}

@media (max-width: 560px) {
    .nav { padding: 0 20px; }
}