/* ─── Design Tokens ─────────────────────────────────────────────────────── */

:root {
    --space-3xs: 4px;
    --space-2xs: 8px;
    --space-xs:  12px;
    --space-sm:  16px;
    --space-md:  24px;
    --space-lg:  32px;
    --space-xl:  48px;
    --space-2xl: 64px;
    --space-3xl: 96px;

    --color-bg:        #ffffff;
    --color-text:      #1a1a1a;
    --color-secondary: #8a8a8a;
    --color-border:    #e8e8e8;
    --color-overlay:   rgba(0, 0, 0, 0.92);

    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --text-identity:     12px;
    --text-nav:          11px;
    --text-series-title: 14px;
    --text-series-meta:  11px;
    --text-caption:      12px;

    --nav-width: 200px;
}

/* ─── Reset ─────────────────────────────────────────────────────────────── */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
}

body {
    font-family: var(--font-family);
    background: var(--color-bg);
    color: var(--color-text);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

body.scroll-locked {
    overflow: hidden;
}

/* ─── Layout ─────────────────────────────────────────────────────────────── */

.portfolio-layout {
    display: flex;
    min-height: 100vh;
}

/* ─── Left Navigation Panel ──────────────────────────────────────────────── */

.nav-panel {
    width: var(--nav-width);
    flex-shrink: 0;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    background: var(--color-bg);
    border-right: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 100;
}

/* Wraps site identity + hamburger button */
.nav-topbar-row {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.nav-site-identity {
    display: block;
    flex: 1;
    padding: var(--space-md);
    font-size: var(--text-identity);
    color: var(--color-text);
    text-decoration: none;
    letter-spacing: 0.02em;
}

.nav-site-identity:hover {
    color: var(--color-text);
    text-decoration: none;
}

/* Hamburger — hidden on desktop */
.nav-hamburger {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 20px;
    height: 14px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-right: var(--space-md);
    flex-shrink: 0;
}

.nav-hamburger span {
    display: block;
    width: 100%;
    height: 1.5px;
    background: var(--color-text);
    transition: transform 200ms ease, opacity 200ms ease;
}

.nav-hamburger.is-open span:first-child  { transform: translateY(6.25px) rotate(45deg); }
.nav-hamburger.is-open span:nth-child(2) { opacity: 0; }
.nav-hamburger.is-open span:last-child   { transform: translateY(-6.25px) rotate(-45deg); }

/* Wraps series list + language switcher */
.nav-main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

.nav-divider {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: 0;
    flex-shrink: 0;
}

.nav-series-list {
    list-style: none;
    flex: 1;
    overflow-y: auto;
    padding: var(--space-2xs) 0;
}

.nav-series-item a {
    display: block;
    padding: var(--space-2xs) var(--space-md);
    font-size: var(--text-nav);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-secondary);
    text-decoration: none;
}

.nav-series-item a:hover,
.nav-series-item.active a {
    color: var(--color-text);
    text-decoration: none;
}

.nav-language-switcher {
    flex-shrink: 0;
    padding: var(--space-md);
    display: flex;
    align-items: center;
    gap: 0;
}

.nav-lang-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-family);
    font-size: var(--text-nav);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-secondary);
    padding: 0;
    line-height: 1;
}

.nav-lang-btn:hover,
.nav-lang-btn.active {
    color: var(--color-text);
}

.nav-lang-sep {
    color: var(--color-secondary);
    font-size: var(--text-nav);
    padding: 0 var(--space-3xs);
    -webkit-user-select: none;
    user-select: none;
    pointer-events: none;
}

/* ─── Main Content Area ──────────────────────────────────────────────────── */

.main-content {
    margin-left: var(--nav-width);
    flex: 1;
    min-height: 100vh;
}

/* ─── Series Header ──────────────────────────────────────────────────────── */

.series-header {
    padding: var(--space-xl) var(--space-md) var(--space-md);
}

.series-header-title {
    font-size: var(--text-series-title);
    font-weight: normal;
    color: var(--color-text);
}

.series-header-meta {
    font-size: var(--text-series-meta);
    color: var(--color-secondary);
    letter-spacing: 0.02em;
    margin-top: var(--space-3xs);
}

/* ─── Image Sequence ─────────────────────────────────────────────────────── */

.series-image-sequence {
    list-style: none;
    padding: 0 var(--space-md) var(--space-3xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    margin-top: var(--space-xl);
}

.series-image-item {
    margin: 0;
}

.series-image-item figure {
    margin: 0;
}

.series-image-item img {
    display: block;
    width: 100%;
    height: auto;
    cursor: pointer;
}

.image-placeholder {
    width: 100%;
    aspect-ratio: 3 / 2;
    background: var(--color-border);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-secondary);
    font-size: var(--text-caption);
    font-family: var(--font-family);
}

.series-image-caption {
    font-size: var(--text-caption);
    color: var(--color-secondary);
    margin-top: var(--space-xs);
}

/* ─── Lightbox ───────────────────────────────────────────────────────────── */

.lightbox-overlay {
    position: fixed;
    inset: 0;
    background: var(--color-overlay);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    outline: none;
}

.lightbox-image-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 90vw;
}

.lightbox-image-wrap img {
    display: block;
    max-width: 90vw;
    max-height: 80vh;
    width: auto;
    height: auto;
    opacity: 0;
    transition: opacity 150ms ease;
}

.lightbox-image-wrap img.img-loaded {
    opacity: 1;
}

.lightbox-image-placeholder {
    width: min(90vw, 960px);
    aspect-ratio: 3 / 2;
    background: #2a2a2a;
    max-height: 80vh;
}

.lightbox-caption {
    font-size: var(--text-caption);
    color: #b0b0b0;
    margin-top: var(--space-xs);
}

.lightbox-close {
    position: fixed;
    top: var(--space-md);
    right: var(--space-md);
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    color: var(--color-secondary);
    padding: var(--space-xs);
    line-height: 1;
    font-family: var(--font-family);
}

.lightbox-close:hover {
    color: #ffffff;
}

.lightbox-controls {
    position: fixed;
    bottom: var(--space-md);
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-lg);
}

.lightbox-prev,
.lightbox-next {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 20px;
    color: var(--color-secondary);
    padding: var(--space-xs);
    font-family: var(--font-family);
    line-height: 1;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-prev:hover,
.lightbox-next:hover {
    color: #ffffff;
}

.lightbox-counter {
    font-size: var(--text-caption);
    color: #b0b0b0;
    letter-spacing: 0.02em;
    min-width: 48px;
    text-align: center;
}

/* ─── About Page ─────────────────────────────────────────────────────────── */

.about-content {
    padding: var(--space-xl) var(--space-md) var(--space-3xl);
    max-width: 560px;
}

.about-section {
    margin-bottom: var(--space-2xl);
}

.about-name {
    font-size: var(--text-series-title);
    font-weight: normal;
    color: var(--color-text);
    margin-bottom: var(--space-sm);
}

.about-heading {
    font-size: var(--text-nav);
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-secondary);
    margin-bottom: var(--space-sm);
}

.about-bio {
    font-size: var(--text-caption);
    color: var(--color-text);
    line-height: 1.7;
}

.about-contact-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.about-contact-item {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--text-caption);
    color: var(--color-secondary);
}

.about-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--color-secondary);
}

.about-link {
    color: var(--color-secondary);
    text-decoration: none;
}

.about-link:hover {
    color: var(--color-text);
}

/* ─── Gallery (shared by Overview and SeriesView) ────────────────────────── */
/*
 * column-width: ~400px means the browser computes column count automatically:
 *   content ~670px  → 1 column  (~670px images)
 *   content ~805px  → 2 columns (~395px images)
 *   content ~1390px → 3 columns (~455px images)
 *   content ~1610px → 4 columns (~395px images)
 *   …continues naturally for wider viewports
 */

.gallery {
    column-width: 400px;
    column-gap: var(--space-sm);
    padding: var(--space-md);
    padding-bottom: var(--space-3xl);
}

.gallery-item {
    break-inside: avoid;
    margin-bottom: var(--space-sm);
    cursor: pointer;
}

.gallery-item img {
    display: block;
    width: 100%;
    height: auto;
}

.gallery-item .image-placeholder {
    aspect-ratio: 3 / 2;
}

.gallery-item figcaption {
    font-size: var(--text-caption);
    color: var(--color-secondary);
    margin-top: var(--space-xs);
}

/* ─── Mobile ─────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .portfolio-layout {
        flex-direction: column;
    }

    .nav-panel {
        position: sticky;
        top: 0;
        width: 100%;
        height: auto;
        flex-direction: column;
        border-right: none;
        border-bottom: 1px solid var(--color-border);
    }

    .nav-topbar-row {
        height: 48px;
    }

    .nav-site-identity {
        padding: 0 var(--space-md);
    }

    .nav-hamburger {
        display: flex;
    }

    /* Nav content hidden by default on mobile; shown when drawer is open */
    .nav-main-content {
        display: none;
        overflow-y: auto;
        max-height: calc(100svh - 48px);
    }

    .nav-main-content.is-open {
        display: flex;
    }

    .main-content {
        margin-left: 0;
    }

    .series-header {
        padding: var(--space-md) var(--space-sm) var(--space-sm);
    }

    .gallery {
        padding: var(--space-sm);
        padding-bottom: var(--space-2xl);
        column-gap: var(--space-xs);
    }

    .lightbox-image-wrap img {
        max-width: 100vw;
    }
}

/* Backdrop — catches taps outside the drawer */
.nav-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 50;
}