/* ========================================
   RESET
======================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    margin: 0;
    padding: 0;

    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
}

body {
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;

    overflow-x: hidden;
}


/* ========================================
   PRESENTATION
======================================== */

.presentation {
    width: 100%;
}


/* ========================================
   SLIDE

   Each section = exactly one viewport.
======================================== */

.presentation-slide {
    width: 100%;
    height: 100svh;

    margin: 0;
    padding: 0;

    overflow: hidden;

    scroll-snap-align: start;
    scroll-snap-stop: always;
}


/* ========================================
   SLIDE CONTENT

   Padding lives INSIDE the viewport.
======================================== */

.presentation-slide-content {
    width: 100%;
    height: 100%;

    padding: 4rem;

    display: grid;
    grid-template-rows: minmax(0, 1fr);

    overflow: hidden;
}


/* ========================================
   SLIDE WITH HEADING
======================================== */

.presentation-slide-content:has(
    > .presentation-section-heading
) {
    grid-template-rows:
        auto
        minmax(0, 1fr);

    gap: 2rem;
}


/* ========================================
   TITLE SLIDE
======================================== */

.presentation-title-slide
.presentation-slide-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.presentation-week,
.presentation-title,
.presentation-subtitle {
    margin: 0;
}

.presentation-week {
    font-size: var(--publication-title-text);
}

.presentation-title {
    max-width: 90%;

    font-family:
        'Futura Simplex Regular',
        Arial,
        Helvetica,
        sans-serif;

    font-size: clamp(6rem, 10vw, 16rem);
    line-height: 0.9;

    color: var(--text-color2);
}

.presentation-subtitle {
    max-width: 75%;

    font-size: clamp(2.5rem, 4vw, 6rem);
    line-height: 1;
}


/* ========================================
   HEADING
======================================== */

.presentation-section-heading {
    margin: 0;

    font-size: clamp(3rem, 5vw, 7rem);
    line-height: 1;
    font-weight: normal;
}


/* ========================================
   CONTENT FROM SHEET
======================================== */

.presentation-paragraph {
    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 0;

    overflow: hidden;

    display: grid;
    grid-template-rows: minmax(0, 1fr);

    font-size: clamp(2rem, 2.5vw, 4rem);
    line-height: 1.125;
}


/* visual + caption */

.presentation-paragraph:has(
    > .slide-caption
) {
    grid-template-rows:
        minmax(0, 1fr)
        auto;

    gap: 2rem;
}

.presentation-paragraph p {
    margin-top: 0;
}


/* ========================================
   LARGE BOTTOM TEXT
======================================== */

.slide-text-bottom {
    width: 100%;
    height: 100%;

    display: flex;
    align-items: flex-end;
}

.slide-text-bottom p {
    max-width: 90%;

    margin: 0;

    font-size: clamp(4rem, 7vw, 10rem);
    line-height: 0.95;
}


/* ========================================
   SINGLE IMAGE
======================================== */

.slide-image {
    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 0;

    display: grid;
    place-items: center;
}

.slide-image img {
    display: block;

    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 0;

    object-fit: contain;
}


/* ========================================
   TWO IMAGE COLUMNS
======================================== */

.slide-images-column {
    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 0;

    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    gap: 2rem;
}

.slide-images-column > img {
    display: block;

    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 0;

    object-fit: contain;
}


/* ========================================
   PUBLICATION COMPARISON

   Specifically for two tall scans
   with captions.
======================================== */

.publication-comparison {
    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 0;

    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 4rem;
}

.publication-comparison figure {
    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 0;

    margin: 0;

    display: grid;
    grid-template-rows:
        minmax(0, 1fr)
        auto;

    gap: 1rem;
}

.publication-comparison img {
    display: block;

    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 0;

    object-fit: contain;
}

.publication-comparison figcaption {
    margin: 0;

    text-align: center;

    font-size: var(--body-text);
    line-height: 1.1;
}


/* ========================================
   SLIDE CAPTION
======================================== */

.slide-caption {
    width: 100%;
}

.slide-caption p {
    max-width: 90%;

    margin: 0;

    font-size: clamp(2.5rem, 3.5vw, 5rem);
    line-height: 1;
}


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

.timeline {
    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 0;

    display: flex;
    flex-direction: row;
    align-items: stretch;

    gap: 3rem;

    overflow-x: auto;
    overflow-y: hidden;
}


/* ========================================
   TIMELINE ITEM
======================================== */

.timeline-item {
    flex: 0 0 auto;

    height: 100%;

    min-width: 0;
    min-height: 0;

    display: grid;
    grid-template-rows:
        minmax(0, 1fr)
        auto;

    gap: 1rem;
}


/* ========================================
   TIMELINE IMAGES
======================================== */

.timeline-images {
    min-width: 0;
    min-height: 0;

    display: flex;
    flex-direction: row;

    /* images begin at same left edge as caption */
    justify-content: flex-start;
    align-items: flex-end;

    gap: 1rem;
}

.timeline-images img {
    display: block;

    flex: 0 0 auto;

    width: auto;
    height: 100%;

    min-width: 0;
    min-height: 0;

    object-fit: contain;
    object-position: left bottom;
}


/* ========================================
   TIMELINE CAPTION
======================================== */

.timeline-item > p {
    width: 100%;

    margin: 0;

    text-align: left;

    font-size: var(--body-text);
    line-height: 1.1;
}


/* ========================================
   PUBLICATION GRID
======================================== */

.publication-grid {
    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 0;

    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    grid-template-rows:
        repeat(2, minmax(0, 1fr));

    gap: 2rem;
}

.publication-grid img {
    display: block;

    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 0;

    object-fit: contain;
}


/* ========================================
   MOBILE
======================================== */

@media only screen and (max-width: 600px) {

    .presentation-slide-content {
        padding: 2rem;
    }

    .slide-images-column,
    .publication-comparison {
        grid-template-columns: 1fr;
        grid-template-rows:
            minmax(0, 1fr)
            minmax(0, 1fr);
    }

    .publication-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        grid-template-rows:
            repeat(4, minmax(0, 1fr));
    }
}