/* ===================================================================
 * Semantic Content — slideshow viewer
 * ------------------------------------------------------------------- */

.deck {
    background-color : var(--color-gray-19);
    color            : var(--color-white);
    height           : 100vh;
    overflow         : hidden;
    display          : flex;
    flex-direction   : column;
}

/* header bar
 * ------------------------------------------------------------------- */
.deck__header {
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    padding         : var(--vspace-0_5) var(--vspace-1);
    flex-shrink     : 0;
    z-index         : 5;
}

.deck__back {
    font-family    : var(--font-2);
    font-weight    : 600;
    font-size      : var(--text-xs);
    text-transform : uppercase;
    letter-spacing : .15em;
    color          : var(--color-gray-14);
    text-decoration: none;
}

.deck__back:hover,
.deck__back:focus {
    color : var(--color-1);
}

.deck__meta {
    text-align : right;
}

.deck__title {
    font-family : var(--font-2);
    font-weight : 700;
    font-size   : var(--text-sm);
    margin      : 0;
    color       : var(--color-white);
}

.deck__byline {
    font-family : var(--font-1);
    font-size   : var(--text-xs);
    color       : var(--color-gray-14);
    margin      : 0;
}

/* slide viewport
 * ------------------------------------------------------------------- */
.deck__viewport {
    position    : relative;
    flex        : 1 1 auto;
    overflow    : hidden;
}

.slide {
    position        : absolute;
    inset            : 0;
    display          : flex;
    align-items      : center;
    justify-content  : center;
    padding          : var(--vspace-2) var(--vspace-2_5);
    opacity          : 0;
    visibility       : hidden;
    transition       : opacity .35s ease;
}

.slide.is-active {
    opacity    : 1;
    visibility : visible;
}

.slide__inner {
    width     : 100%;
    max-width : var(--width-wide);
}

/* cover slide */
.slide--cover .slide__inner {
    max-width : none;
    height    : 100%;
    position  : absolute;
    inset      : 0;
}

.slide__cover-image {
    position             : absolute;
    inset                : 0;
    background-size      : contain;
    background-position  : center;
    background-repeat    : no-repeat;
    background-color     : var(--color-gray-19);
}

/* content slide */
.slide__title {
    font-family    : var(--font-2);
    font-weight    : 700;
    font-size      : var(--text-display-2);
    line-height    : 1.15;
    color          : var(--color-white);
    margin-top     : 0;
    margin-bottom  : var(--vspace-1);
}

.slide__body ul {
    list-style  : none;
    margin      : 0;
    padding     : 0;
}

.slide__body > ul {
    display        : flex;
    flex-direction : column;
    gap            : var(--vspace-0_5);
}

.slide__body li {
    font-family : var(--font-1);
    font-size   : var(--text-md);
    line-height : var(--vspace-1_25);
    color       : var(--color-gray-14);
    position    : relative;
    padding-left: var(--vspace-1);
}

.slide__body > ul > li::before {
    content     : "";
    position    : absolute;
    left        : 0;
    top         : .6em;
    width       : 8px;
    height      : 8px;
    border-radius: 100%;
    background  : var(--color-1);
}

.slide__body li ul {
    margin-top     : var(--vspace-0_375);
    display        : flex;
    flex-direction : column;
    gap            : var(--vspace-0_25);
}

.slide__body li li {
    font-size   : var(--text-sm);
    color       : var(--color-gray-14);
    opacity     : .85;
}

.slide__body li li::before {
    content : "\2013";
    position: static;
    background: none;
    width: auto;
    height: auto;
    margin-right: .5em;
}

.slide__body a {
    color           : var(--color-1);
    text-decoration : underline;
}

.slide__body .cite {
    font-style : italic;
    opacity    : .7;
}

.slide__quote {
    margin      : 0;
    text-align  : center;
}

.slide__quote p {
    font-family : var(--font-2);
    font-weight : 600;
    font-size   : var(--text-display-1);
    line-height : 1.3;
    color       : var(--color-white);
    margin      : 0 0 var(--vspace-0_75);
}

.slide__quote cite {
    font-family    : var(--font-1);
    font-style     : normal;
    font-size      : var(--text-sm);
    text-transform : uppercase;
    letter-spacing : .15em;
    color          : var(--color-1);
}

/* story slides */
.slide__story {
    display         : flex;
    align-items     : center;
    justify-content : center;
    gap             : var(--vspace-1_5);
    width           : 100%;
    flex-wrap       : wrap;
}

.slide__story-image {
    flex        : 1 1 420px;
    max-width   : 560px;
    display     : flex;
    align-items : center;
    justify-content: center;
}

.slide__story-image img {
    max-width  : 100%;
    max-height : 60vh;
    border-radius : 6px;
    box-shadow : 0 20px 60px rgba(0, 0, 0, 0.45);
}

.slide__captions {
    flex           : 1 1 320px;
    max-width      : 420px;
    display        : flex;
    flex-direction : column;
    gap            : var(--vspace-0_25);
}

.slide__captions .caption {
    font-family : var(--font-1);
    font-size   : var(--text-md);
    line-height : 1.4;
    color       : var(--color-gray-14);
    margin      : 0;
}

.slide__captions .caption--speaker {
    font-family    : var(--font-2);
    font-weight    : 700;
    font-size      : var(--text-xs);
    text-transform : uppercase;
    letter-spacing : .15em;
    color          : var(--color-1);
    margin-top     : var(--vspace-0_375);
}

.slide__captions .caption-tag {
    font-family    : var(--font-1);
    font-weight    : 400;
    text-transform : none;
    letter-spacing : normal;
    color          : var(--color-gray-14);
}

.slide__captions .caption--thought {
    font-style : italic;
    opacity    : .85;
}

.slide__captions .caption-list {
    list-style     : none;
    margin         : var(--vspace-0_25) 0 0;
    padding        : 0;
    display        : flex;
    flex-direction : column;
    gap            : var(--vspace-0_125, 0.25rem);
}

.slide__captions .caption-list li {
    font-family : var(--font-1);
    font-size   : var(--text-md);
    line-height : 1.4;
    color       : var(--color-gray-14);
    padding-left: var(--vspace-0_75);
    position    : relative;
}

.slide__captions .caption-list li::before {
    content    : "\2013";
    position   : absolute;
    left       : 0;
}

/* controls
 * ------------------------------------------------------------------- */
.deck__controls {
    display         : flex;
    align-items     : center;
    justify-content : center;
    gap             : var(--vspace-1);
    padding         : var(--vspace-0_75) var(--vspace-1);
    flex-shrink     : 0;
}

.deck__nav-btn {
    box-sizing      : border-box;
    background      : none;
    border          : 1px solid rgba(255, 255, 255, 0.2);
    border-radius   : 100%;
    width           : 44px;
    height          : 44px;
    padding         : 0;
    flex-shrink     : 0;
    display         : flex;
    align-items     : center;
    justify-content : center;
    color           : var(--color-white);
    cursor          : pointer;
    transition      : border-color .2s ease, color .2s ease;
}

.deck__nav-btn:hover,
.deck__nav-btn:focus-visible {
    border-color : var(--color-1);
    color        : var(--color-1);
}

.deck__nav-btn:disabled {
    opacity        : .3;
    cursor         : default;
    pointer-events : none;
}

.deck__progress {
    flex        : 1 1 auto;
    max-width   : 320px;
    height      : 3px;
    background  : rgba(255, 255, 255, 0.15);
    border-radius: 2px;
    position    : relative;
    overflow    : hidden;
}

.deck__progress-bar {
    position   : absolute;
    top        : 0;
    left       : 0;
    height     : 100%;
    background : var(--color-1);
    transition : width .3s ease;
}

.deck__counter {
    font-family : var(--font-2);
    font-weight : 600;
    font-size   : var(--text-xs);
    color       : var(--color-gray-14);
    min-width   : 60px;
    text-align  : center;
}

.deck__fullscreen {
    box-sizing      : border-box;
    background      : none;
    border          : none;
    padding         : 0;
    display         : flex;
    align-items     : center;
    justify-content : center;
    color           : var(--color-gray-14);
    cursor          : pointer;
}

.deck__fullscreen:hover {
    color : var(--color-1);
}

/* responsive
 * ------------------------------------------------------------------- */
@media screen and (max-width: 700px) {
    .slide__title {
        font-size : var(--text-display-1);
    }

    .slide__quote p {
        font-size : var(--text-lg);
    }

    .slide {
        padding : var(--vspace-1_5) var(--vspace-1);
    }

    .deck__header {
        padding        : var(--vspace-0_375) var(--vspace-0_75);
        flex-direction : column;
        align-items    : flex-start;
        gap            : var(--vspace-0_25);
    }

    .deck__meta {
        text-align : left;
    }

    .deck__title {
        font-size : var(--text-xs);
    }

    .deck__byline {
        font-size : 0.7rem;
    }

    .deck__controls {
        gap : var(--vspace-0_5);
    }
}