/* A single continuous sky-to-sea field supports sections 2-4; cards sit on translucent surfaces. */
main {
    background: linear-gradient(180deg, #e9f6f8 0%, #e8f4f5 42%, #deeff1 72%, #d4e9ec 100%)
}

.title-kicker {
    font: 500 12px "DM Mono", monospace;
    letter-spacing: .04em;
    color: #6d929a;
    margin: 12px 0 0
}

.notes,
.about,
.career {
    position: relative;
    overflow: hidden;
    background: transparent
}

.notes:before,
.notes:after {
    content: "";
    position: absolute;
    z-index: 0;
    border-radius: 999px;
    filter: blur(2px);
    opacity: .52
}

.notes:before {
    width: 440px;
    height: 120px;
    right: -65px;
    top: 140px;
    background: radial-gradient(ellipse at 30% 60%, #fff 0 22%, transparent 24%), radial-gradient(ellipse at 52% 45%, #fff 0 28%, transparent 30%), radial-gradient(ellipse at 75% 65%, #fff 0 18%, transparent 20%)
}

.notes:after {
    width: 100%;
    height: 190px;
    bottom: -95px;
    left: 0;
    background: radial-gradient(ellipse at 20% 70%, rgba(163, 215, 225, .75), transparent 45%), radial-gradient(ellipse at 80% 100%, rgba(125, 188, 205, .52), transparent 52%)
}

.notes>* {
    position: relative;
    z-index: 1
}

.about:after {
    content: "";
    position: absolute;
    right: -110px;
    bottom: -130px;
    width: 490px;
    height: 360px;
    border-radius: 50%;
    background: repeating-radial-gradient(ellipse at center, #b7dce0 0 2px, transparent 3px 27px);
    opacity: .35
}

.about>* {
    position: relative;
    z-index: 1
}

.media-slot {
    border: 1px dashed rgba(37, 53, 69, .42);
    background: rgba(255, 255, 255, .34);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #69878c;
    font: 9px "DM Mono", monospace;
    letter-spacing: .07em
}

.media-slot--about {
    width: 185px;
    height: 82px;
    margin-top: 18px
}

.career:before {
    content: "";
    position: absolute;
    z-index: 0;
    left: 4%;
    top: 15%;
    width: 280px;
    height: 160px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(184, 221, 230, .58), transparent 70%)
}

.career>* {
    position: relative;
    z-index: 1
}

.works {
    position: relative;
    overflow: hidden;
    background: linear-gradient(155deg, #2d6071 0%, #386f7c 55%, #4e8790 100%)
}

.works:before {
    content: "";
    position: absolute;
    inset: auto -10% -25% auto;
    width: 75%;
    height: 55%;
    border-radius: 50%;
    background: repeating-radial-gradient(ellipse at center, rgba(206, 238, 236, .16) 0 2px, transparent 3px 34px);
    transform: rotate(-11deg)
}

.works>* {
    position: relative;
    z-index: 1
}

.work-media-slot {
    position: absolute;
    top: 50px;
    right: 25px;
    width: 116px;
    height: 66px;
    border: 1px dashed currentColor;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font: 8px/1.45 "DM Mono", monospace;
    letter-spacing: .06em;
    opacity: .74
}

.image-widget {
    background: linear-gradient(145deg, #edf4ee, #d7ebee)
}

@media(max-width:760px) {
    .media-slot--about {
        width: 135px;
        height: 52px
    }

    .work-media-slot {
        top: 44px;
        right: 18px;
        width: 100px;
        height: 52px
    }

    .title-kicker {
        font-size: 10px
    }
}