/* ── Design tokens ────────────────────────────────────────────
   Single source of truth: colors, type, spacing, animation.
   Nothing below this block repeats a raw value.
──────────────────────────────────────────────────────────── */
:root {
    /* Colors */
    --bg:          #000;
    --surface:     #111;
    --surface-2:   #181818;
    --overlay-bg:     rgba(0, 0, 0, 0.80);
    --overlay-ribbon: rgba(0, 0, 0, 0.60);
    --border:      #222;
    --text:        #ccc;
    --text-muted:  #999;
    --link:        #ccc;
    --link-hover:  #fff;

    /* Typography */
    --font:           system-ui, -apple-system, sans-serif;
    --font-size-sm:   15px;
    --font-size-base: 18px;
    --font-size-h1:   clamp(22px, 5vw, 34px);

    /* Spacing */
    --gap:    3px;
    --pad:    16px;
    --pad-lg: clamp(20px, 5vw, 48px);

    /* Grid */
    --thumb-cols: 3;

    /* Animation */
    --dur:  0.32s;
    --ease: cubic-bezier(0.4, 0, 0.2, 1);

    /* Shadows */
    --shadow-thumb: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 8px 32px rgba(0, 0, 0, 0.85);
    --shadow-image: drop-shadow(0 8px 32px rgba(0, 0, 0, 0.9));
}

@media (min-width: 480px)  { :root { --thumb-cols: 4; } }
@media (min-width: 768px)  { :root { --thumb-cols: 5; } }
@media (min-width: 1024px) { :root { --thumb-cols: 6; } }
@media (min-width: 1440px) { :root { --thumb-cols: 8; } }


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

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: var(--font-size-base);
    line-height: 1.5;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main { flex: 1; }

a {
    color: var(--link);
    text-decoration: none;
    transition: color 0.15s;
}

a:hover { color: var(--link-hover); }

button { font-family: var(--font); }


/* ── Header ───────────────────────────────────────────────── */
.site-header {
    padding: var(--pad-lg) var(--pad) var(--pad);
    text-align: center;
    border-bottom: 1px solid var(--border);
}

.site-header h1 {
    font-size: var(--font-size-h1);
    font-weight: 300;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.header-sub {
    margin-top: 6px;
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    letter-spacing: 0.22em;
    text-transform: uppercase;
}


/* ── Gallery grid ─────────────────────────────────────────── */
.gallery {
    display: grid;
    grid-template-columns: repeat(var(--thumb-cols), 1fr);
    gap: var(--gap);
    padding: var(--gap);   /* no side margin on touch — added below where hover is active */
    list-style: none;
    margin: 0;
}

.gallery-item {
    aspect-ratio: 1 / 1;
    cursor: pointer;
    background: var(--surface);
    position: relative;   /* lets z-index work between grid siblings */
}

/* Hovered item floats above its neighbours */
.gallery-item:hover,
.gallery-item:focus-visible {
    z-index: 1;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease);
}

.gallery-item:hover img,
.gallery-item:focus-visible img {
    transform: scale(1.1);
    box-shadow: var(--shadow-thumb);
    /* No opacity change — image is not darkened */
}

.gallery-item:focus-visible {
    outline: 2px solid var(--link);
    outline-offset: -2px;
}

/* On devices that support hover: add side margins so scaled images stay within viewport */
@media (hover: hover) {
    .gallery { padding-inline: var(--pad); }
}

/* On touch devices the hover flash on tap looks wrong — disable it */
@media (hover: none) {
    .gallery-item:hover { z-index: 0; }
    .gallery-item:hover img {
        transform: none;
        box-shadow: none;
    }
}


/* ── Lightbox shell ───────────────────────────────────────── */
.lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--overlay-bg);
    z-index: 100;
    flex-direction: column;
    touch-action: none;
}

.lightbox.active { display: flex; }

.lb-close {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 26px;
    z-index: 10;
}


/* ── Image stage (sliding) ────────────────────────────────── */
.lb-stage {
    flex: 1;
    position: relative;
    overflow: hidden;
}

.lb-slide {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 0px;         /* clear the close button */
    transition: transform var(--dur) var(--ease);
    will-change: transform;
    /* Position is set exclusively via JS inline style.transform */
}

.lb-img {
    flex: 1;
    min-height: 0;
    max-width: 100%;
    width: 100%;
    object-fit: contain;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
    filter: var(--shadow-image);
}

@media (min-width: 480px) {
    .lb-img { max-width: 90%; }
}


/* ── Shared lightbox button base ──────────────────────────── */
.lb-btn {
    background: none;
    border: none;
    color: var(--link);
    cursor: pointer;
    padding: 12px;
    line-height: 1;
    transition: color 0.15s;
}

.lb-btn:hover { color: var(--link-hover); }


/* ── Prev / Next (shown on pointer devices) ───────────────── */
.lb-prev,
.lb-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 48px;
    z-index: 5;
}

.lb-prev { left: 0; }
.lb-next { right: 0; }


/* ── Edge-tap targets (touch devices only) ────────────────── */
.lb-edge {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 25%;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 6;
}

@media (pointer: coarse) {
    .lb-edge  { display: block; }
    .lb-prev,
    .lb-next  { display: none; }
}

.lb-edge--left  { left: 0; }
.lb-edge--right { right: 0; }


/* ── EXIF / caption strip (figcaption inside each lb-slide) ── */
.lb-info {
    flex-shrink: 0;   /* never compressed — image row yields height instead */
    padding: 10px var(--pad) 18px;
    text-align: center;
    line-height: 1.6;
    width: 100%;
}

.lb-meta {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

.lb-meta a {
    color: var(--text-muted);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.lb-meta a:hover { color: var(--link-hover); }


/* ── Touch: ribbon overlay + full-height image ────────────── */
@media (pointer: coarse) {
    .lb-close { z-index: 20; }

    .lb-info {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--overlay-ribbon);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        z-index: 5;
        transition: opacity var(--dur) var(--ease);
    }

    .lb-info.ribbon-hidden {
        opacity: 0;
        pointer-events: none;
    }
}


/* ── Footer ───────────────────────────────────────────────── */
.site-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: var(--pad);
    border-top: 1px solid var(--border);
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

.sep { color: var(--border); }

.footer-btn {
    background: none;
    border: none;
    color: var(--link);
    font-size: var(--font-size-sm);
    cursor: pointer;
    padding: 0;
    transition: color 0.15s;
}

.footer-btn:hover { color: var(--link-hover); }


/* ── Imprint panel (anchored bottom-right) ────────────────── */
.popup-panel {
    display: none;
    position: fixed;
    bottom: 56px;
    right: var(--pad);
    width: min(360px, calc(100vw - var(--pad) * 2));
    background: var(--surface-2);
    border: 1px solid var(--border);
    padding: 20px 24px 20px 20px;
    z-index: 200;
    line-height: 1.7;
}

.popup-panel.active { display: block; }

.popup-panel h2 {
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text);
    margin-bottom: 12px;
}

.popup-panel address,
.popup-panel p {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    margin-bottom: 10px;
    font-style: normal;   /* override browser default italic on <address> */
}

.popup-panel address:last-child,
.popup-panel p:last-child { margin-bottom: 0; }

.popup-close {
    position: absolute;
    top: 8px;
    right: 8px;
    background: none;
    border: none;
    color: var(--link);
    font-size: 18px;
    cursor: pointer;
    padding: 4px 6px;
    line-height: 1;
    transition: color 0.15s;
}

.popup-close:hover { color: var(--link-hover); }