/* ============================================================
   SITE HEADER
   ============================================================ */

.site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    background-color: rgba(19, 19, 19, 0.35);   /* more transparent */
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    transition: background-color var(--transition-base);
}

.site-header.is-scrolled {
    background-color: rgba(19, 19, 19, 0.82);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: var(--space-6);
    padding-inline: var(--space-8);
}

/* ── Brand ───────────────────────────────────────────────── */
.site-header__brand { display: flex; align-items: center; flex-shrink: 0; }

.site-header__brand-link {
    display: flex; align-items: center; gap: var(--space-4); text-decoration: none;
}

.site-header__logo { display: flex; align-items: center; flex-shrink: 0; }
.site-header__logo svg { height: 2.5rem; width: 2.5rem; display: block; }

/* Site name */
.site-header__site-name {
    font-family: var(--font-headline);
    font-size: 1.5rem; font-weight: 700;
    letter-spacing: -0.04em; color: #f8e7ba; line-height: 1;
}

.site-header__name-accent { color: var(--color-primary-container); }

/* ── Right group ─────────────────────────────────────────── */
.site-header__right { display: none; align-items: center; gap: var(--space-8); }
@media (min-width: 768px) { .site-header__right { display: flex; } }

/* ── Nav ─────────────────────────────────────────────────── */
.nav-menu { display: flex; align-items: center; gap: var(--space-8); list-style: none; margin: 0; padding: 0; }

.nav-menu__link {
    font-family: var(--font-headline); font-size: 0.9375rem;
    letter-spacing: -0.01em; color: #a3a3a3; text-decoration: none;
    transition: color var(--transition-base);
}
.nav-menu__link:hover { color: #f8e7ba; }

.nav-menu__item.is-active .nav-menu__link {
    color: var(--color-accent-orange); font-weight: 700;
    border-bottom: 2px solid var(--color-accent-orange); padding-bottom: 0.2rem;
}

/* ── Social icons ────────────────────────────────────────── */
.site-header__socials {
    display: flex; align-items: center; gap: var(--space-4);
    padding-left: var(--space-8);
    border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.site-header__social-link {
    display: flex; align-items: center; justify-content: center;
    color: #737373; text-decoration: none;
    transition: color var(--transition-base); line-height: 0;
}
.site-header__social-link:hover { color: var(--color-primary-container); }
.site-header__social-icon { width: 1.25rem; height: 1.25rem; display: block; flex-shrink: 0; }

/* ── Mobile toggle ───────────────────────────────────────── */
.site-header__mobile-toggle {
    display: flex; align-items: center; justify-content: center;
    background: none; border: none; cursor: pointer;
    color: #f8e7ba; padding: var(--space-1); border-radius: var(--radius-sm);
    transition: color var(--transition-base);
}
.site-header__mobile-toggle:hover { color: var(--color-primary); }
@media (min-width: 768px) { .site-header__mobile-toggle { display: none; } }

/* ── Mobile drawer ───────────────────────────────────────── */
.site-header__mobile-drawer {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    background-color: rgba(14, 14, 14, 0.98);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding: var(--space-8);
    transform: translateY(-8px); opacity: 0;
    transition: opacity var(--transition-base), transform var(--transition-base);
    pointer-events: none;
}

.site-header__mobile-drawer.is-open {
    display: block; transform: translateY(0); opacity: 1; pointer-events: auto;
}

.nav-menu--mobile { flex-direction: column; align-items: flex-start; gap: var(--space-6); }
.nav-menu--mobile .nav-menu__link { font-size: 1.25rem; font-weight: 700; color: #f8e7ba; }

.site-header__mobile-socials {
    display: flex; gap: var(--space-6);
    padding-top: var(--space-6); margin-top: var(--space-4);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.site-header__mobile-socials .site-header__social-link {
    display: flex; align-items: center; gap: var(--space-2);
    font-family: var(--font-label); font-size: 0.75rem;
    text-transform: uppercase; letter-spacing: 0.12em; color: #737373;
}
.site-header__mobile-socials .site-header__social-link:hover { color: var(--color-primary-container); }
.site-header__mobile-socials .site-header__social-icon { width: 1rem; height: 1rem; }


/* ============================================================
   SCROLL PROGRESS BAR — global, shown on all pages
   ============================================================ */

.gallery-progress {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 2px;
    z-index: 200;
    background: transparent;
    pointer-events: none;
}

.gallery-progress__bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--color-primary-container) 0%, var(--color-secondary) 100%);
    transition: width 0.1s linear;
}