.nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    padding: 28px 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    opacity: 0;
    animation: fadeIn 1s ease 0.3s forwards;
    background: linear-gradient(to bottom, rgba(15, 15, 15, 0.78) 0%, rgba(15, 15, 15, 0.45) 55%, rgba(15, 15, 15, 0) 100%);
    backdrop-filter: blur(12px) saturate(120%);
    -webkit-backdrop-filter: blur(12px) saturate(120%);
    border-bottom: 1px solid transparent;
    transition: background 0.35s ease, border-bottom-color 0.35s ease, padding 0.3s ease;
}

.nav.is-scrolled {
    background: rgba(15, 15, 15, 0.82);
    border-bottom-color: var(--soft-sand-faint);
    padding-top: 20px;
    padding-bottom: 20px;
}

/* Cream-block treatment — used while the nav sits above a cream section */
.nav.is-on-light {
    background: linear-gradient(to bottom, rgba(242, 234, 224, 0.92) 0%, rgba(242, 234, 224, 0.55) 60%, rgba(242, 234, 224, 0) 100%);
}

.nav.is-on-light.is-scrolled {
    background: rgba(242, 234, 224, 0.88);
    border-bottom-color: var(--ink-faint);
}

.nav.is-on-light .nav__right { color: var(--ink-dim); }

.nav__logo {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 28px;
}

.nav__logo img {
    height: 28px;
    width: auto;
    transition: opacity 0.35s ease;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

.nav__logo .nav__logo--light { opacity: 0.9; mix-blend-mode: screen; }
.nav__logo .nav__logo--dark  { opacity: 0; }

.nav.is-on-light .nav__logo .nav__logo--light { opacity: 0; }
.nav.is-on-light .nav__logo .nav__logo--dark  { opacity: 0.92; mix-blend-mode: multiply; }

.nav__logo:hover .nav__logo--light,
.nav.is-on-light .nav__logo:hover .nav__logo--dark { opacity: 1; }

/* Reserve width — invisible spacer image keeps layout */
.nav__logo::before {
    content: '';
    display: block;
    height: 28px;
    width: 130px; /* approximate logo intrinsic width */
}

.nav__right {
    display: flex;
    align-items: center;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--soft-sand-dim);
}

.nav__est {
    white-space: nowrap;
}

.nav__separator {
    margin: 0 0.6em;
}

.nav__cities {
    display: inline-block;
    height: 1.4em;
    overflow: hidden;
    vertical-align: bottom;
    position: relative;
}

.nav__cities-track {
    display: flex;
    flex-direction: column;
    animation: cityReel 6s cubic-bezier(0.23, 1, 0.32, 1) infinite;
}

.nav__city {
    height: 1.4em;
    line-height: 1.4em;
    white-space: nowrap;
    display: flex;
    align-items: center;
}

@keyframes cityReel {
    0%, 27%   { transform: translateY(0); }
    33%, 60%  { transform: translateY(-1.4em); }
    66%, 93%  { transform: translateY(-2.8em); }
    100%      { transform: translateY(-4.2em); }
}