:root {
    --tint-color: #550000;
    --tint-strength: 0.99;
    --overlap-px: 15;
    --blend-height: 30px;
    --blur-px: 10px;

    --page-bg: #550000;
    --bar-bg: #000000;
    --text: #ffffff;
    --muted: #f0f0f0;

    --radius-lg: 22px;
    --radius-md: 16px;
    --shadow-lg: 0 16px 40px rgba(0,0,0,0.35);
    --shadow-sm: 0 4px 12px rgba(0,0,0,0.25);

    --content-max: 1400px;
    --gap-xxl: 56px;
    --gap-xl: 40px;
    --gap-lg: 26px;
    --gap-md: 16px;

    --topbar-h: 64px;
}

html, body {
    margin: 0;
    padding: 0;
    background: var(--page-bg);
    color: var(--text);
    font-family: "Baskerville", serif;
    line-height: 1.45;
    overflow-x: hidden;
    min-height: 100vh;
    height: auto;
}

/* Background layer holds stacked images */
.background {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.background .stack {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

/* Foreground overlay */
.foreground {
    position: relative;
    z-index: 1;
    min-height: 100vh;
}

/* Imprint image (top) */
.imprint-wrap {
    display: flex;
    justify-content: center;
    padding: 10px 0 var(--gap-md);
}
.imprint-img {
    display: block;
    width: min(820px, 82vw);
    height: auto;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
@media (max-width: 860px) {
    .imprint-img { width: min(680px, 90vw); }
}

/* Segments container */
#segments-container {
    position: relative;
    z-index: 1;
}

.segment-wrapper {
    position: relative;
}

/* Bottom bar with email */
.bottombar-wrap {
    padding: var(--gap-md);
    margin-top: 0;
    margin-bottom: 0;
}
.bottombar {
    height: var(--topbar-h);
    background: var(--bar-bg);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--gap-xl);
    box-shadow: var(--shadow-sm);
    color: var(--muted);
    font-weight: 700;
    letter-spacing: 0.2px;
    font-size: clamp(14px, 1.5vw, 18px);
    text-align: center;
}

/* Stacked image system */
.slide { position: relative; width: 100%; overflow: visible; }
.img-wrap { position: relative; width: 100%; height: 100%; overflow: hidden; }
.img { display: block; width: 100%; height: 100%; object-fit: fill; margin: 0; padding: 0; border: 0; vertical-align: top; image-rendering: auto; will-change: transform; }
.tint { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply; background: var(--tint-color); opacity: var(--tint-strength); }
.blend { position: absolute; left: 0; right: 0; height: var(--blend-height); top: calc(var(--overlap-px) * -1); pointer-events: none; overflow: hidden; }
.blend-mask { position: absolute; inset: 0; mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); mask-mode: match-source; -webkit-mask-mode: match-source; mask-size: 100% 100%; -webkit-mask-size: 100% 100%; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; }
.blend .topEdge, .blend .blur { position: absolute; inset: 0; background-repeat: no-repeat; background-position: center top; background-size: cover; }
.blend .blur { filter: blur(var(--blur-px)); opacity: 0.85; }