/* Dossiers */

.dossiers {
    font-family: 'LM Roman 10', serif;
    --manila: #fcf1e3;
    --manila-darker: #f0e5d8;
}

.tabs.is-boxed.dossiers-header {
    position: relative;
    margin-bottom: 0px;
    border-bottom: 0px;
    padding-inline: 12px;      /* gutter where shadows can live */
    margin-inline: -12px;      /* visually align first tab with folder edge */
}

.tabs.is-boxed.dossiers-header ul {
    border-bottom: 0px;
    width: 100%;
    white-space: normal;
    overflow-wrap: break-word;
}

.tabs.is-boxed.dossiers-header li {
    height: 100%;
}

.tabs.is-boxed.dossiers-header a {
    height: 100%;
    margin-right: -4px;
    background-color: var(--manila-darker);
    z-index: 10;
    width: 12rem;
    transition-property: none;
    box-shadow: 0 6px 12px rgba(0,0,0,.25);
}

@media (max-width: 50rem) {
    .tabs.is-boxed.dossiers-header a {
        margin-right: -3rem;
    }
}

@media (max-width: 42rem) {
    .tabs.is-boxed.dossiers-header a {
        margin-right: -5rem;
    }
}

@media (max-width: 36rem) {
    .tabs.is-boxed.dossiers-header a {
        width: 8rem;
        margin-right: -3rem;
    }
}

@media (max-width: 28rem) {
    .tabs.is-boxed.dossiers-header a {
        width: 6rem;
        margin-right: -2rem;
    }
}

.tabs.is-boxed.dossiers-header li:first-of-type a {
    box-shadow: 4px 4px 8px rgba(0,0,0,.12);
}

.tabs.is-boxed.dossiers-header a.is-active {
    position: relative;
    z-index: 50;
    background-color: var(--manila);
    box-shadow: none;
}

/* Box shadow above non-active tabs */
.tabs.is-boxed.dossiers-header a.is-active::before {
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: 0; bottom: 0;
    border-radius: inherit;
    z-index: 20;
    box-shadow: 0 6px 12px rgba(0,0,0,.25);
    pointer-events: none;
}

.tabs.is-boxed.dossiers-header li:first-of-type a.is-active::before {
    box-shadow: 4px 4px 8px rgba(0,0,0,.12);
}

/* Covers seam with dossier folder body */
.tabs.is-boxed.dossiers-header a.is-active::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    bottom: -3px;
    height: 6px;
    background-color: var(--manila);
    z-index: 40;
    pointer-events: none;
}

.dossiers-body {
    position: relative;
    background-color: var(--manila);
    padding: 1rem;
    border: 0;
    border-radius: 0px var(--bulma-radius) var(--bulma-radius) var(--bulma-radius);
    z-index: 30;
    box-shadow: 0 8px 16px rgba(0,0,0,.25);
}

.dossiers-body .box {
    position: relative;
    border-radius: 0;
    max-width: 600px;
}

.dossier-image {
    margin-top: -7px;
    margin-bottom: -2rem;
}

.dossier-not-a-puzzle {
    position: absolute;
    bottom: 0.625rem;
    right: 0.625rem;
}

/* Penguins Microscope */
.sidebar-wrapper {
    position: sticky;
    top: max(0px, calc((80vh - 530px) / 2));
    display: flex;
    justify-content: center;
}

picture.sidebar-image {
    margin-top: 3rem;
    width: auto;
    max-width: 480px;
}

picture.sidebar-image img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;                          /* natural height */
    max-height: calc(100vh - 3rem);        /* shrink if viewport is short */
    object-fit: contain;                   /* no cropping */
}

/* Desktop */
@media (min-width: 1216px) and (max-width: 1400px) {
    picture.sidebar-image img {
        max-width: 420px;
    }
}

/* Desktop */
@media (min-width: 1024px) and (max-width: 1215px) {
    picture.sidebar-image img {
        max-width: 360px;
    }
}

/* Tablet */
@media (min-width: 900px) and (max-width: 1023px) {
    picture.sidebar-image img {
        max-width: 320px;
    }
}

/* Tablet */
@media (min-width: 769px) and (max-width: 899px) {
    picture.sidebar-image img {
        max-width: 240px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    picture.sidebar-image img {
        height: auto;
        max-width: 100%;
    }
}