/* ── Timeline layout ─────────────────────────────────────────── */

.horizontal-section {
    position: relative;
}

.sticky-container {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    background: #EAE0D0;
    z-index: 2;
}

.slides-container {
    display: flex;
    height: 100%;
    position: relative;
    z-index: 2;
}

/* Each slide: full viewport */
.slide {
    min-width: 100vw;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

/* ── Content zone (85vh) ────────────────────────────────────── */
.slide-body {
    height: 85vh;
    display: flex;
    align-items: center;
    padding: 32px 6vw 0 6vw;
    gap: 4vw;
}

.slide-left {
    width: 42vw;
    flex-shrink: 0;
}

.slide-year {
    font-family: 'Newsreader', serif;
    font-size: clamp(3rem, 9vw, 4.5rem);
    font-weight: 300;
    color: #b8442e;
    line-height: 1;
    letter-spacing: -0.03em;
    margin-bottom: 0.2rem;
}

.slide-date-label {
    font-family: 'DM Sans', sans-serif;
    font-size: clamp(0.8rem, 1.2vw, 1rem);
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #85706c;
    margin-bottom: 1.5rem;
}

.slide-title {
    font-family: 'Newsreader', serif;
    font-size: clamp(1.4rem, 2.2vw, 2.125rem) !important;
    font-weight: 300;
    color: #1a1a1a;
    line-height: 1.25;
    margin-bottom: 1.25rem;
}

.slide-copy {
    font-family: 'Newsreader', serif;
    font-size: clamp(0.9rem, 1.5vw, 1.25rem) !important;
    line-height: 1.6 !important;
    color: #444;
}

.slide-copy p {
    margin: 0;
    font-size: clamp(0.9rem, 1.5vw, 1rem) !important;
    line-height: 1.6 !important;
}

.slide-copy p + p {
    margin-top: 1rem;
}

.slide-copy a,
.slide-copy a strong,
.slide-copy a em {
    color: #b8442e;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    font-weight: 400;
}

.slide-right {
    flex: 1;
    min-width: 0;
}

.slide-image {
    width: 100%;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    position: relative;
    border-radius: 0.25rem;
    box-shadow: 0 20px 50px rgba(0,0,0,0.18);
}

.slide-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.slide-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    background: rgba(15,15,15,0.82);
    color: #e8e8e8;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    padding: 0.35rem 0.75rem;
    white-space: nowrap;
}

/* Centered closing slide */
.slide-body.centered {
    justify-content: center;
}

.slide-body.centered .slide-left {
    width: 52vw;
    max-width: 760px;
}

/* Image placeholder */
.slide-placeholder {
    width: 100%;
    aspect-ratio: 3 / 2;
    outline: 1px solid rgba(0,0,0,0.2);
}

/* ── Timeline bar (15vh) ────────────────────────────────────── */
.slide-bar {
    height: 15vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

/* ── Timeline lines — absolute inside sticky container ──────── */
#line-h {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 7.5vh;
    height: 1px;
    background: rgba(0,0,0,0.18);
    z-index: 1;
    pointer-events: none;
}

#line-v {
    position: absolute;
    left: 50%;
    bottom: calc(7.5vh + 20px);
    height: 30px;
    width: 1px;
    background: rgba(0,0,0,0.25);
    transform: translateX(-50%);
    z-index: 1;
    pointer-events: none;
}

/* Dot: terra cotta core, bg-colored ring outside */
.slide-dot {
    position: relative;
    width: 12px;
    height: 12px;
    background: #b8442e;
    border-radius: 50%;
    outline: 12px solid #EAE0D0;
    z-index: 2;
    flex-shrink: 0;
}

/* ── Slide counter (fixed, bottom right) ────────────────────── */
#slide-counter {
    position: fixed;
    bottom: 1.5rem;
    right: 2rem;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    color: #888;
    z-index: 100;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

#slide-counter.visible {
    opacity: 1;
}

/* ── Responsive: below lg (< 1024px) ───────────────────────── */
@media (max-width: 1023px) {

    .sticky-container {
        position: relative;
        height: auto;
        overflow: visible;
    }

    .slides-container {
        flex-direction: column;
        height: auto;
    }

    .spacer { display: none; }
    #slide-counter { display: none; }
    #line-h, #line-v { display: none; }

    /* slide-bar becomes the divider between slides */
    .slide-bar {
        display: flex;
        align-items: center;
        justify-content: center;
        height: auto;
        padding: 1.5rem 0;
        position: relative;
    }
    .slide-bar::before {
        content: '';
        position: absolute;
        left: 6vw;
        right: 6vw;
        top: 50%;
        height: 1px;
        background: rgba(0,0,0,0.15);
        transform: translateY(-50%);
    }
    .slide-bar .slide-dot {
        width: 8px;
        height: 8px;
        outline: 8px solid #EAE0D0;
        position: relative;
        z-index: 2;
    }
    /* Last slide: no divider, just bottom breathing room */
    .slide:last-child .slide-bar { display: none; }
    .slide:last-child { padding-bottom: 8rem; }

    .slide {
        min-width: 100%;
        width: 100%;
        height: auto;
    }

    .slide-body {
        flex-direction: column;
        height: auto;
        padding: 3rem 6vw 3rem;
        gap: 0;
        align-items: stretch;
    }

    .slide-body.centered {
        justify-content: flex-start;
    }

    .slide-body.centered .slide-left {
        width: 100%;
        max-width: none;
    }

    /* Dissolve slide-left so children participate directly in slide-body flex */
    .slide-left {
        display: contents;
    }

    .slide-year  { order: 1; }
    .slide-date-label { order: 2; margin-bottom: 1.25rem; }
    .slide-right { order: 3; width: 100%; margin-bottom: 1.5rem; }
    .slide-title { order: 4; font-size: 1.5rem !important; }
    .slide-copy  { order: 5; }

    .slide-year { font-size: clamp(2.5rem, 10vw, 3.5rem); }
}