@charset "UTF-8";

:root {
    --font-family: 'Times New Roman', Times, serif;
    --font-family-secondary: Helvetica, sans-serif;
    --font-size: 1.75rem;
    --font-size-mobile: 1.25rem;
    --line-height: 1.35;
    --font-weight: 400;
    --letter-spacing-small: .05em;
    --letter-spacing-medium: .2em;
    --letter-spacing-large: .5em;
}

html {
    scroll-behavior: smooth;
}

body {
    margin-left: 1rem;
    margin-right: 1rem;
    background-color: #fff;
}

main {
    margin-bottom: 30rem;
}

.title {
    font-size: calc(var(--font-size) * 2);
    font-weight: var(--font-weight);
    text-align: center;
    position: sticky;
    top: 2rem;
    z-index: 1;
    margin-top: 15rem;
    margin-bottom: 0;
}

.mobile-break {
    display: inline;
}

.author {
    font-size: var(--font-size);
    font-weight: var(--font-weight);
    text-align: center;
    margin: 0;
    margin-bottom: 15rem;
}

nav {
    position: fixed;
    top: 50%;
    left: .75rem;
    z-index: 100;
    transform: translateY(-50%);
}

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

nav ul li {
    margin-bottom: 0.25rem;
}

nav ul li a {
    font-weight: var(--font-weight);
    font-size: calc(var(--font-size) / 1.5);
    font-family: var(--font-family);
    text-decoration: none;
    opacity: 0.25;
    transition: opacity 0.2s ease-in-out;
}

nav ul li a.active {
    opacity: 1;
}

.nav-title {
    display: none;
    margin-left: 0.5rem;
}

nav ul li a:hover .nav-title {
    display: inline;
}

h2 {
    font-family: var(--font-family);
    font-size: calc(var(--font-size) / 1.5);
    letter-spacing: var(--letter-spacing-medium);
    margin-top: 15rem;
    margin-bottom: 2rem;
    font-weight: var(--font-weight);
    margin-left: 12.5rem;
    margin-right: 12.5rem;
    text-align: center;
    text-transform: uppercase;
    scroll-margin-top: 13rem;
}

p {
    font-family: var(--font-family);
    font-size: var(--font-size);
    line-height: var(--line-height);
    font-weight: var(--font-weight);
    margin-left: 15rem;
    margin-right: 15rem;
    text-indent: 4rem;
    position: relative;
}

h2+p,
.no-indent {
    text-indent: 0;
}

footer {
    height: 55dvh;
    border: none;
    display: flex;
    align-items: end;
}

footer p {
    margin-left: 15rem;
    margin-right: 15rem;
    text-indent: 0;
    margin-bottom: 1rem;
}

.quote {
    position: relative;
    display: block;
    font-style: italic;
    font-family: var(--font-family);
    font-size: var(--font-size);
    line-height: var(--line-height);
    margin-left: 22rem;
    margin-right: 22rem;
    text-indent: 0;
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
}

img {
    width: 100%;
}

figcaption {
    font-size: calc(var(--font-size) / 2);
    font-family: var(--font-family);
    font-weight: var(--font-weight);
    letter-spacing: var(--letter-spacing-small);
    text-align: left;
}

figure {
    margin: 5rem auto;
}

.two-images-content {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
}

/* ---- MARGINALIA ---- */
.footnote-toggle {
    cursor: pointer;
}

.indicator {
    height: 1.35em;
    width: auto;
    vertical-align: top;
    mix-blend-mode: multiply;
}

.footnote-container {
    display: none;
}

.footnote-toggle:hover+.footnote-container,
.footnote-container:hover {
    display: inline;
}

.footnote-text {
    display: inline;
    font-size: var(--font-size);
    line-height: var(--line-height);
    font-family: var(--font-family);
    font-style: normal;
    color: blue;
}

.bibliography-list {
    list-style: none;
    padding: 0;
    margin-left: 15rem;
    margin-right: 15rem;
}

.bibliography-list li {
    margin-bottom: 0.5rem;
    line-height: var(--line-height);
}

.bibliography-list :first-child {
    margin-left: 0;
}

.bibliography-list span {
    margin-left: 1rem;
}

.bibliography-text {
    font-size: calc(var(--font-size)/2);
    font-family: var(--font-family);
    letter-spacing: calc(var(--letter-spacing-small)/1.5);
}

.bibliography-text a,
.footnote-text a {
    overflow-wrap: break-word;
    word-break: break-all;
}

/* ---- FX TOGGLE ---- */
#fx-toggle {
    position: fixed;
    bottom: 1rem;
    left: 1rem;
    z-index: 100;
}

#fx-toggle a {
    font-weight: var(--font-weight);
    font-size: calc(var(--font-size) / 1.5);
    font-family: var(--font-family);
    text-decoration: none;
    cursor: pointer;
    color: inherit;
}

/* ---- IDLE SCREEN ---- */
#idle-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 200;
}

.idle-img-layer {
    position: absolute;
    z-index: 99999;
    opacity: 0;
    filter: grayscale(1) contrast(500%) brightness(0%);
    mix-blend-mode: difference;
    pointer-events: none;
    object-fit: contain;
    will-change: filter, opacity, transform;
}

.idle-img-layer.visible {
    animation: thresholdIn 5s linear forwards;
}

.idle-img-layer.disappearing {
    animation: thresholdOut 0.7s linear forwards;
}

@keyframes thresholdIn {
    0% {
        opacity: 0;
        filter: grayscale(1) contrast(500%) brightness(0%);
    }
    10% {
        opacity: 1;
        filter: grayscale(1) contrast(9000%) brightness(700%);
    }
    20% {
        opacity: 1;
        filter: grayscale(1) contrast(400%) brightness(40%);
    }
    30% {
        opacity: 1;
        filter: grayscale(1) contrast(7000%) brightness(900%);
    }
    40% {
        opacity: 1;
        filter: grayscale(1) contrast(300%) brightness(20%);
    }
    52% {
        opacity: 1;
        filter: grayscale(1) contrast(5000%) brightness(500%);
    }
    62% {
        opacity: 1;
        filter: grayscale(1) contrast(600%) brightness(80%);
    }
    74% {
        opacity: 1;
        filter: grayscale(1) contrast(3000%) brightness(300%);
    }
    85% {
        opacity: 1;
        filter: grayscale(1) contrast(700%) brightness(110%);
    }
    100% {
        opacity: 1;
        filter: grayscale(1) contrast(500%) brightness(120%);
    }
}

@keyframes thresholdOut {
    0% {
        opacity: 1;
        filter: grayscale(1) contrast(500%) brightness(120%);
    }
    15% {
        opacity: 1;
        filter: grayscale(1) contrast(12000%) brightness(1000%);
    }
    28% {
        opacity: 1;
        filter: grayscale(1) contrast(600%) brightness(20%);
    }
    42% {
        opacity: 1;
        filter: grayscale(1) contrast(9000%) brightness(800%);
    }
    56% {
        opacity: 0.6;
        filter: grayscale(1) contrast(300%) brightness(8%);
    }
    70% {
        opacity: 0.3;
        filter: grayscale(1) contrast(7000%) brightness(600%);
    }
    85% {
        opacity: 0.1;
        filter: grayscale(1) contrast(200%) brightness(2%);
    }
    100% {
        opacity: 0;
        filter: grayscale(1) contrast(500%) brightness(0%);
    }
}

/* ---- IMAGE EXPANSION ---- */
#image-viewer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    cursor: zoom-out;
}

#image-viewer-overlay img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.no-scroll {
    overflow: hidden !important;
}

@media screen and (max-width: 768px) {
    :root {
        --font-size: 1.2rem;
        --line-height: 1.5;
    }

    body {
        margin: 0;
    }

    .title {
        top: 0;
        padding-top: 1rem;
        padding-bottom: 0.5rem;
        font-size: calc(var(--font-size) * 1.65);
        white-space: normal !important;
        width: calc(100% - 2rem);
        left: 1rem;
        right: 1rem;
        margin-top: 5rem;
    }

    .mobile-break {
        display: block;
    }

    .author {
        margin-bottom: 5rem;
        font-size: calc(var(--font-size) / 1.5);
        transform: translateX(-1rem);
    }

    h2 {
        margin-left: 2rem;
        margin-right: 2rem;
        margin-top: 8rem;
    }

    p {
        margin-left: 2rem;
        margin-right: .5rem;
        text-indent: 1.5rem;
    }

    .quote {
        margin-left: 3rem;
        margin-right: 3rem;
    }

    figure {
        width: 100% !important;
        padding-left: 2rem;
        padding-right: 2rem;
        box-sizing: border-box;
    }

    figcaption {
        font-size: calc(var(--font-size) / 1.5);
    }

    .bibliography-list {
        margin-left: 2rem;
        margin-right: 2rem;
    }

    .bibliography-list span {
        display: block;
        margin-left: 0;
        margin-bottom: .5rem;
    }

    .bibliography-text {
        font-size: calc(var(--font-size) / 1.5);
    }

    footer p {
        margin-left: 2rem;
        margin-right: 2rem;
    }

    nav ul li a .nav-title {
        display: none !important;
    }
}