/* ==========================================================================
   HISTORY
   ========================================================================== */


.sv_history,
.sv_history_header,
.sv_history_content {
    width: 100%;
    min-width: 0;
}

.sv_history {
    position: relative;
    min-height: 0;
}

.sv_history_header {
    padding-bottom: var(--space_2);
}

.sv_history_content {
    position: relative;
    min-width: 0;
    padding-bottom: var(--space_10);
}


/* ==========================================================================
   HISTORY ITEM
   ========================================================================== */

.sv_history_item {
    position: relative;
    width: 100%;
    min-width: 0;
    scroll-margin-top: var(--space_5);
}

    .sv_history_item:target {
        opacity: 1;
    }

.sv_history_item_content {
    width: 100%;
    min-width: 0;
}

    .sv_history_item_content > a:first-child {
        display: none;
    }

    .sv_history_item_content p {
        text-indent: var(--space_8);
    }

    .sv_history_item_content a {
        font-weight: 700;
        padding-inline: var(--space_0_5);
        margin-inline: var(--space_0_25);
        color: var(--color_Green);
        font-family: var(--font_BovinoMedium);
        text-decoration: none;
        border-bottom: var(--space_0_25) dotted currentColor;
        transition: color 200ms ease, background-color 200ms ease;
    }

        .sv_history_item_content a:hover,
        .sv_history_item_content a:focus-visible {
            color: var(--color_LunarGreen);
            background-color: var(--color_RockBlue_25);
        }

    .sv_history_item_content img {
        display: block;
        max-width: 100%;
        height: auto;
    }


/* ==========================================================================
   HISTORY IMAGE REVEAL
   ========================================================================== */

.sv_history_media {
    display: grid;
    grid-template-rows: 0fr;
    width: 100%;
    min-width: 0;
    margin-block: 0;
    opacity: 0;
    perspective: calc(var(--space_4) * 100);
    transition: grid-template-rows 420ms ease, opacity 220ms ease, margin-block 420ms ease;
}


/* ==========================================================================
   HISTORY IMAGE INNER
   ========================================================================== */

.sv_history_media_inner {
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}


/* ==========================================================================
   HISTORY IMAGE CARD
   ========================================================================== */

.sv_history_media_card {
    position: relative;
    width: min( calc(var(--space_25) * 24), 96% );
    margin: 0 auto;
    opacity: 0;
    transform: rotateY(90deg) scale(0.96);
    transform-origin: center center;
    backface-visibility: hidden;
    transition: transform 420ms ease, opacity 260ms ease;
}

    .sv_history_media_card img {
        display: block;
        width: 100%;
        height: auto;
        max-height: 78dvh;
        object-fit: contain;
    }


/* ==========================================================================
   HISTORY IMAGE OPEN STATE
   ========================================================================== */

.sv_history_item.state_image_open
.sv_history_media {
    grid-template-rows: 1fr;
    margin-block: var(--space_3) var(--space_4);
    opacity: 1;
}

.sv_history_item.state_image_open
.sv_history_media_card {
    opacity: 1;
    transform: rotateY(0deg) scale(1);
}


/* ==========================================================================
   HISTORY IMAGE LINKS
   ========================================================================== */

.sv_history_image_link {
    cursor: pointer;
}

    .sv_history_image_link[aria-expanded="true"] {
        color: var(--color_LunarGreen);
        background-color: var(--color_RockBlue_25);
    }

.side_C_iframe_click {
    cursor: pointer;
}

    .side_C_iframe_click .side_C_iframe_ZGO {
        display: none;
        width: 100%;
        min-height: 80vh;
        border: 0;
    }

    .side_C_iframe_click.is_open .side_C_iframe_ZGO {
        display: block;
    }
/* ==========================================================================
   HISTORY HEADER NAVIGATION
   ========================================================================== */
.sv_history_header_navigation {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space_3);
}

.sv_history_random_link,
.sv_history_all_link {
    display: inline-flex;
    align-items: center;
    gap: var(--space_1);
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color_LunarGreen);
    font: inherit;
    text-decoration: none;
    cursor: pointer;
}

    .sv_history_random_link .svg_icon,
    .sv_history_all_link .svg_icon {
        width: var(--space_3);
        height: var(--space_3);
        fill: currentColor;
    }

    .sv_history_random_link:hover,
    .sv_history_random_link:focus-visible,
    .sv_history_all_link:hover,
    .sv_history_all_link:focus-visible {
        color: var(--color_Green);
    }


/* ==========================================================================
   HISTORY SELECTED
   ========================================================================== */

.sv_history_selected {
    position: relative;
    width: 100%;
    min-width: 0;
}


/* ==========================================================================
   HISTORY SELECTED HEADER
   ========================================================================== */

.sv_history_selected_header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-width: 0;
    margin-bottom: var(--space_4);
}

    .sv_history_selected_header
    .sv_history_header_navigation {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: var(--space_3);
    }


/* ==========================================================================
   HEADER LINKS
   ========================================================================== */

.sv_history_random_link,
.sv_history_all_link {
    display: inline-flex;
    align-items: center;
    gap: var(--space_1);
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color_LunarGreen);
    font: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: color 200ms ease, transform 200ms ease;
}

    .sv_history_random_link .svg_icon,
    .sv_history_all_link .svg_icon {
        flex: 0 0 auto;
        width: var(--space_2);
        height: var(--space_2);
        fill: currentColor;
    }

.sv_history_all_link {
    font-family: var(--font_BovinoMedium);
}

    .sv_history_random_link:hover,
    .sv_history_random_link:focus-visible,
    .sv_history_all_link:hover,
    .sv_history_all_link:focus-visible {
        color: var(--color_Green);
    }

.sv_history_random_link:hover,
.sv_history_random_link:focus-visible {
    transform: translateY( calc(var(--space_0_25) * -1) );
}

.sv_history_all_link:hover,
.sv_history_all_link:focus-visible {
    transform: translateX( calc(var(--space_0_5) * -1) );
}


/* ==========================================================================
   SELECTED TIMELINE
   ========================================================================== */

.sv_history_selected_timeline {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 0;
    padding: var(--space_3) var(--space_4);
    background-color: rgba(255, 255, 255, 0.45);
    box-shadow: 0 var(--space_0_5) var(--space_3) rgba(0, 0, 0, 0.06);
}


    /* ==========================================================================
   TIMELINE LINE
   ========================================================================== */

    .sv_history_selected_timeline::before {
        position: absolute;
        top: 0;
        bottom: 0;
        left: calc( var(--space_4) + (var(--space_2)) );
        z-index: 1;
        width: var(--space_0_75);
        background-color: var(--color_RockBlue_50);
        pointer-events: none;
        content: "";
    }


/* ==========================================================================
   TIMELINE ROW
   ========================================================================== */

.sv_history_selected_row,
.sv_history_selected_current {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: var(--space_5) minmax(0, 1fr);
    align-items: start;
    gap: var(--space_2);
    width: 100%;
    min-width: 0;
}


/* ==========================================================================
   PREVIOUS / NEXT
   ========================================================================== */

.sv_history_selected_row {
    padding-block: var(--space_2);
    color: var(--color_LunarGreen);
    text-decoration: none;
    transition: color 200ms ease, background-color 200ms ease;
}

.sv_history_selected_previous {
    border-bottom: var(--space_0_25) solid var(--color_RockBlue_25);
}

.sv_history_selected_next {
    border-top: var(--space_0_25) solid var(--color_RockBlue_25);
}

.sv_history_selected_row:hover,
.sv_history_selected_row:focus-visible {
    color: var(--color_Green);
    background-color: var(--color_RockBlue_25);
}


/* ==========================================================================
   PREVIOUS / NEXT CONTENT
   ========================================================================== */

.sv_history_selected_row_content {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space_1) var(--space_2);
    min-width: 0;
}

    .sv_history_selected_row_content strong {
        flex: 0 0 auto;
        font-family: var(--font_BovinoMedium);
        font-weight: 700;
    }

    .sv_history_selected_row_content span {
        min-width: 0;
    }


/* ==========================================================================
   TIMELINE MARKER
   ========================================================================== */

.sv_history_selected_marker {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    justify-self: center;
    width: var(--space_5);
    height: var(--space_5);
    color: var(--color_LunarGreen);
}

    .sv_history_selected_marker .svg_icon {
        display: block;
        width: 70%;
        height: 70%;
        fill: currentColor;
    }

.sv_history_selected_row:hover
.sv_history_selected_marker,
.sv_history_selected_row:focus-visible
.sv_history_selected_marker {
    color: var(--color_Green);
}


/* ==========================================================================
   CURRENT HISTORY ITEM
   ========================================================================== */

.sv_history_selected_current {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: var(--space_5) minmax(0, 1fr);
    align-items: start;
    gap: var(--space_2);
    width: 100%;
    min-width: 0;
    margin-block: var(--space_2);
}

.sv_history_selected_current_content {
    align-self: start;
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 0;
    padding: var(--space_3) var(--space_4);
    background-color: var(--color_RockBlue_25);
    position: relative;
    z-index: 2;
}


/* ==========================================================================
   CURRENT MARKER
   ========================================================================== */
.sv_history_selected_current >
.sv_history_selected_marker_current {
    width: var(--space_5);
    height: var(--space_5);
    border-radius: 50%;
    background-color: var(--color_LunarGreen);
    color: var(--color_White);
    box-shadow: 0 0 0 var(--space_0_5) var(--color_RockBlue_25);
    align-self: center;
    justify-self: center;
}

    .sv_history_selected_marker_current
    .svg_icon {
        width: 55%;
        height: 55%;
        fill: currentColor;
    }


/* ==========================================================================
   CURRENT _HISTORYITEM
   ========================================================================== */

.sv_history_selected_current
.sv_history_item {
    align-self: start;
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.sv_history_selected_current
.sv_history_item_content {
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 0;
}

.sv_history_selected_current
.sv_history_media:not([aria-hidden="false"]) {
    margin-block: 0;
}

.sv_history_selected_current
.sv_history_item_content p {
    margin: 0;
    line-height: 1.55;
}

    .sv_history_selected_current
    .sv_history_item_content p + p {
        margin-top: var(--space_2);
    }


/* ==========================================================================
   HISTORY LINKS INSIDE CURRENT ITEM
   ========================================================================== */

.sv_history_selected_current
.sv_history_item_content a {
    color: var(--color_LunarGreen);
    font-family: var(--font_BovinoMedium);
    font-weight: 700;
    text-decoration: none;
    border-bottom: var(--space_0_25) dotted currentColor;
    transition: color 200ms ease, background-color 200ms ease;
}

    .sv_history_selected_current
    .sv_history_item_content a:hover,
    .sv_history_selected_current
    .sv_history_item_content a:focus-visible {
        color: var(--color_LunarGreen);
        background-color: var(--color_RockBlue_25);
    }


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media only screen and (max-width: 64em) {

    .sv_history_selected_timeline {
        padding: var(--space_3) var(--space_3);
    }

        .sv_history_selected_timeline::before {
            left: var(--space_5);
        }
}


@media only screen and (max-width: 48em) {

    .sv_history_selected_header {
        align-items: flex-start;
    }

        .sv_history_selected_header
        .sv_history_header_navigation {
            align-items: flex-start;
            flex-direction: column;
            gap: var(--space_1);
        }


    .sv_history_selected_timeline {
        padding: var(--space_2) var(--space_2);
    }

        .sv_history_selected_timeline::before {
            left: var(--space_3);
        }


    .sv_history_selected_row,
    .sv_history_selected_current {
        grid-template-columns: var(--space_3) minmax(0, 1fr);
        gap: var(--space_1);
    }


    .sv_history_selected_marker {
        width: var(--space_3);
        height: var(--space_3);
    }

    .sv_history_selected_marker_current {
        width: var(--space_4);
        height: var(--space_4);
    }


    .sv_history_selected_row_content {
        align-items: flex-start;
        flex-direction: column;
        gap: var(--space_0_5);
    }


    .sv_history_selected_current_content {
        padding: var(--space_2);
    }
}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .sv_history_random_link,
    .sv_history_all_link,
    .sv_history_selected_row {
        transition: none;
    }
}
/* ==========================================================================
   HISTORY DATE INDICATOR
   ========================================================================== */

.sv_history .sv_history_date_indicator {
    position: fixed;
    top: 50%;
    right: calc(var(--layout_side_R) - var(--space_5));
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--space_1);
    pointer-events: none;
    opacity: 1;
    transform: translateY(-50%);
    transition: top 250ms ease, opacity 250ms ease, transform 250ms ease;
}

    .sv_history .sv_history_date_indicator.state_visible {
        opacity: 1;
    }


/* ==========================================================================
   HISTORY YEAR
   ========================================================================== */

.sv_history_date_year {
    display: block;
    color: var(--color_LunarGreen);
    font-family: var(--font_BovinoMedium);
    font-size: var(--font_size_20);
    line-height: 0.85;
    letter-spacing: 0.04em;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    white-space: nowrap;
    margin: var(--space_4);
}


/* ==========================================================================
   HISTORY MONTH
   ========================================================================== */

.sv_history_date_month {
    display: block;
    margin-top: var(--space_2);
    padding-bottom: var(--space_1);
    color: var(--color_Green);
    font-family: var(--font_BovinoMedium);
    font-size: var(--font_size_16);
    line-height: 1;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
    border-bottom: var(--space_0_25) solid currentColor;
}

.sv_history_timeline {
    position: fixed;
    top: 0;
    bottom: 0;
    right: calc(var(--layout_side_R) + var(--space_2));
    width: var(--space_0_5);
    z-index: 9;
    background: var(--color_RockBlue);
}

.sv_history_timeline_handle {
    position: absolute;
    top: 0;
    left: 50%;
    width: var(--space_4);
    height: var(--space_4);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--color_RockBlue);
    transform: translateX(-50%);
    cursor: pointer;
}

    .sv_history_timeline_handle::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: var(--space_2);
        height: var(--space_2);
        border-radius: 50%;
        background: var(--color_White);
        transform: translate(-50%, -50%);
        pointer-events: none;
    }
    /* ==========================================================================
   RESPONSIVE
   ========================================================================== */

    @media only screen and (max-width: 64em) {

        .sv_history_media_card {
            width: min( calc(var(--space_25) * 8), 94% );
        }

        .sv_history_timeline {
            right: var(--space_2);
        }

        .sv_history .sv_history_date_indicator {
            right: var(--space_5);
        }


    }


    @media only screen and (max-width: 48em) {

        .sv_history_content {
            padding-inline: var(--space_2);
        }

        .sv_history_media_card {
            width: 100%;
        }

        .sv_history_item.state_image_open .sv_history_media {
        margin-block: var(--space_2) var(--space_3);
    }

    .sv_history_selected_header {
        align-items: flex-start;
        flex-direction: column;
    }
}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .sv_history_media,
    .sv_history_media_card,
    .sv_history_item_content a,
    .sv_history_all_link {
        transition: none;
    }

    .sv_history_media_card {
        transform: none;
    }
}