/* ============================================================================================
	FEATURED BIOGRAPHY / PATTERN
============================================================================================ */
.hightime-biography {
    position: relative;
    z-index: 1;
    background: var(--wp--preset--color--base)
}
.hightime-biography-heading {
    position: relative;
    z-index: 1;
    padding: 0 .5em;
    font-size: clamp(40px, 8vw, 90px)
}
.hightime-biography-heading::before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: -.5em;
    z-index: -1;
    width: 4em;
    height: 1.5em;
    border: 4px solid var(--wp--preset--color--accent);
    border-right: 0;
    transform: translateY(-50%);
}
.hightime-biography-content {
    margin: 1em 0 0
}

.hightime-biography-image {
    position: relative;
    z-index: 1;
    width: calc(100% - 2em)
}

.hightime-biography-image::before {
    content: "";
    display: block;
    position: absolute;
    top: 2em;
    left: 2em;
    z-index: -1;
    width: 100%;
    height: 100%;
    background: var(--wp--preset--color--accent)
}
.hightime-biography-image::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(200,200,200)
}
.observe_is_active.hightime-biography-image::after {
	animation: var(--reveal-animation);
	transform-origin: center right
}
.hightime-biography-desc-wrapper {
    flex: 1;
    min-width: 0
}
@keyframes slideInUp{0%{opacity:0;transform:translateY(80%)}100%{opacity:1;transform:translateY(0)}}
.hightime-biography-desc {
    opacity: 0;
    padding: 4em 2em 2em;
    font-size: 15px
}
.observe_is_active.hightime-biography-desc {
	animation: slideInUp .4s forwards;
}
.hightime-biography-signature {
    position: relative;
    width: 60%;
    max-width: 300px;
    aspect-ratio: 192/70;
    margin: 0 2em 0 auto
}
.hightime-biography-signature::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    background: var(--wp--preset--color--accent-2);
    transition: height .4s .2s
}
.observe_is_active.hightime-biography-signature::before {
    height: .8em
}
.hightime-biography-signature img {
    position: relative;
    z-index: 1
}

@media screen and (min-width: 768px) {
    .hightime-biography-content {
        display: flex;
        align-items: center
    }
    .hightime-biography-image {
        width: 50%;
        max-width: 600px
    }
    .hightime-biography-desc {
        padding: 2em 4em 2em 20%
    }
}