.page-content { position: relative; }
.page-header--screen { background: white; overflow: clip;
    &.bg--vignetted::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 2;
        pointer-events: none;
        background: radial-gradient(circle, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.4) 100%), linear-gradient(90deg,rgba(38, 67, 143, 1) 0%, rgba(38, 67, 143, 1) 50%, rgba(237, 59, 59, 1) 50%, rgba(237, 59, 59, 1) 100%);
        mix-blend-mode: multiply;
    }
    .social-post { display: none; }
    .page-image { height: 100%; overflow: visible;
        img { object-fit: contain; height: 100%; object-position: top; }
    }
    .page-title-wrapper { z-index: 3; }
}

.profile { max-width: 850px;
    .person-title { line-height: 1.5; }
}

#type-in {
    &::after {
        content: "";
        display: inline-block;
        width: 0.08em; height: 1em;
        background-color: white;
        animation: blink-caret .75s step-end infinite;
        line-height: inherit;
        margin-left: 0.1em;
        vertical-align: baseline;
        opacity: 0.5;
    }
}

.page-title {
    span { 
        overflow: hidden;
        width: 0; 
        display: inline-block;
    }
}

@keyframes blink-caret {
  from, to { background-color: transparent }
  50% { background-color: white; }
}

@media only screen and (min-width: 60em) {
    .page-header--screen { grid-template-rows: 75vh auto; clip-path: border-box;
        .social-post { display: grid; height: 100%; grid-column: 1 / -1; grid-row: 1 / 5; }
        .social-post::before,
        .social-post::after {
            content: "";
            width: 100%;
            height: 100%;
            z-index: 0;
            pointer-events: none;
            background: url('./images/shape-post.svg') center center / 100% auto space;
            mix-blend-mode: multiply;
        }
        .social-post::before { grid-column: 1 / 7; }
        .social-post::after { grid-column: 8 / 14; }
        .page-image { grid-row: 1 / 2; }
        .page-title-wrapper { grid-column: 2 / span 12; }
    }
}

@media print {
    .page-header--screen { 
        &.bg--vignetted::after { display: none; }
        .page-image { max-width: 800px; margin-inline: auto; display: block; }
    }
}