body {
    overflow-y: scroll;/** avoid horizontal page shift */
}

.at-diversify {
    position: relative;
    --offsetTop: 200px;
}

.at-diversity__front {
    position: relative;
    z-index: 1;/** bring to front */
    transition: all .5s cubic-bezier(.17,.88,.3,1.5);
    -webkit-mask-image: url(squircle.svg);
    mask-image: url(squircle.svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    mask-position: center 101%;
    mask-size: calc(100% + 8rem);
    margin-inline: -10px;
    padding-top: var(--offsetTop);
    top: calc(-1 * var(--offsetTop));
    scroll-margin-top: 200px;
}

/** 200px padding-top because the mask cuts off the top of the article. And 200px to move the article up the same height */

.at-diversity__panel--more {
    margin-top: calc(-1 * var(--offsetTop));
    scroll-margin-top: calc(-1 * var(--offsetTop));
    box-shadow: 0 -6rem var(--color300);
}

@media screen and (max-width: 719px) {
    .at-diversity__panel--more {
        border-radius: 0 0 50% 50% / 0 0 10% 10%;
        background: var(--color300);
    }
}

.at-diversify--spacer {
    min-width: min(10vw, 4rem);
}

.at-diversify--text {
    padding: 4rem 0 0 0;
}

.at-diversify--text > section {
    width: 100%;
}

.at-diversity__front .at-diversify--text {
    flex: 1;
    max-width: min(80vw, 38em);
}

.at-diversify--text h1 {
    margin: 0;
    color: var(--colorText);
}

.at-diversify--imageCol {
    align-self: flex-end;
    padding-bottom: 0;
}

.at-diversify__image {
    float: right;
    width: max(10em , 40vw);
    margin-top: -2em;
}

.at-diversify__image img {
    display: block;
}

/**
 * Squircles
 */

.at-diversify--deco {
    position: absolute;
    bottom: 0;
    left: -4rem;
    z-index: -1;
    transform-origin: bottom;
    rotate: 0deg;
    width: calc(100% + 8rem);
    aspect-ratio: 1 / 1.7;
}

.at-diversify--deco1 {
    color: var(--color);
}

.at-diversify--deco2 {
    scale: 1;
    rotate: 1deg;
    color: var(--color300);
    transition: all .1s ease-out;
}

/**
 * Toggle switches
 */

.at-diversify__button {
    position: relative;/** for positioning svg doodle */
    display: inline-block;
}

.at-diversify__button::after {
    content: '+';
    vertical-align: top;
    display: inline-block;
    background: var(--color300);
    border-radius: 50%;
    aspect-ratio: 1;
    width: 1em;
    text-align: center;
    font: normal 1rem/1 monospace;
    visibility: hidden;
    transition: all .15s cubic-bezier(0, 2, 1, 1.2);
}

.at-diversify__button:not(.--open)::after {
    visibility: visible;
}

.at-diversify__button:not(.--open):hover {
    cursor: pointer;
}

.at-diversify__button.--open {
    box-shadow: none;
}

/** SVG doodle */
.at-diversify__button svg {
    fill: none;
    stroke: var(--color300);
    stroke-width: 4px;
    stroke-miterlimit: 10;
    stroke-dasharray: 640;
    stroke-dashoffset: 640;
    stroke-linecap: round;
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(100% + 30px);
    opacity: 0;
    transform: translate(-50%, -50%);
    transition: stroke-dashoffset .5s ease-out;
    z-index: -1;
    pointer-events: none;
}

.at-diversify__button.--open svg {
    stroke-dashoffset: 0;
    opacity: .9;
    z-index: 0;
}

.at-diversify__button:hover:after {
    transform: translate(-1px, -1px) scale(1.1);
}

.at-diversify__button.--open:hover:after {
    width: 1em;
    transform: translate(-20px, -8px) scale(.5);
    opacity: 0;
}

/** Close flyout */
.at-diversify__close {
    position: absolute;
    z-index: -2;
    left: 50vw;
    transform: translate(calc(75vw / 2), -100%);
    display: none;
    width: 2em;
    height: 2em;
    border-radius: 1em;
    text-indent: -999em;
    background: var(--indigo) url(close.svg) no-repeat center / 1em;
    cursor: pointer;
}

.at-diversify.--open .at-diversify__close {
    z-index: 1;
    display: block;
}

/**
 * Article containers
 */
.at-diversify__more {
    max-height: 0;
    overflow: hidden;
    transition: all .1s ease-out;
    animation: maxHeight .5s reverse;
}

@keyframes maxHeight {
    0% {max-height: 0;}
    50% {max-height: 200vh;}
    100% {max-height: 600vh;}
}

.at-diversify__more.--open {
    animation: maxHeight .5s forwards;
}

@media screen and (min-width: 720px) {
    .at-diversify--text {
        padding: max(6rem, 10vh) 1em;
    }

    .at-diversify__image {
        width: unset;
    }

    .at-diversify__more.--open ~ .at-diversify--deco2 {
        scale: 1.5;
        transition: all .1s ease-out;
    }

    .at-diversify--content {
        opacity: 0;
        transition: opacity .3s;
    }

    .at-diversify__more.--open .at-diversify--content {
        opacity: 1;
    }
}