/* Reusable navbar component */
:root {
    --nav-height: 72px;
    --nav-gap: var(--space-6);
    --nav-pad-x: var(--container-pad-x, clamp(80px, 7vw, 96px));
    --nav-rule-color: rgba(230,228,223,0.06); /* subtle bottom line */
    --nav-link-color: var(--color-amber);
    --nav-link-color-muted: rgba(201,162,77,0.88);
}

.nav {
    position: fixed;
    inset-inline: 0;
    top: 0;
    height: var(--nav-height);
    background: transparent;
    z-index: 100;
    border-bottom: 1px solid var(--nav-rule-color);
}

.nav--sticky { position: sticky; top: 0; }

.nav__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--nav-height);
    padding-inline: var(--nav-pad-x);
}

.nav__brand {
    color: var(--text-main);
    text-decoration: none;
    font-family: var(--font-display);
    font-weight: var(--weight-semibold);
    font-size: var(--fs-xl);
    letter-spacing: 0.08em; /* editorial */
    text-transform: uppercase;
}

.nav__toggle {
    display: none;
    background: none;
    border: 0;
    color: var(--text-main);
    font-size: 1.25rem;
}

.nav__items {
    display: inline-flex;
    gap: var(--nav-gap);
    align-items: center;
    list-style: none;
}

.nav__link {
    position: relative;
    color: var(--nav-link-color-muted);
    text-decoration: none;
    padding: 4px 0;
    letter-spacing: 0.06em;
    text-underline-offset: 6px;
    transition: color var(--duration-2) var(--ease-out);
}

.nav__link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: rgba(201,162,77,0.35);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--duration-3) var(--ease-out);
}

.nav__link:hover,
.nav__link:focus-visible {
    color: var(--nav-link-color);
}

.nav__link:hover::after,
.nav__link:focus-visible::after,
.nav__link[aria-current="page"]::after,
.nav__link[data-active="true"]::after {
    transform: scaleX(1);
}

@media (max-width: 900px) {
    .nav__toggle { display: inline-block; }
    .nav__items {
        position: absolute;
        top: var(--nav-height);
        right: 0;
        left: 0;
        display: none;
        flex-direction: column;
        gap: 12px;
        padding: 12px var(--nav-pad-x);
        background: rgba(15, 15, 15, 0.6);
        backdrop-filter: blur(6px);
    }
    .nav.is-open .nav__items { display: flex; }
}