.mission-date-label {
    display: block;
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: 700;
}

.mission-pledge {
    display: inline-block;
    padding: 4px 10px;
    background: #f3e3be;
    color: #604510;
    font-size: 13px;
    font-weight: 700;
}

.ghana-mission-page {
    color: #063f3b;
}

    .ghana-mission-page section {
        padding: 56px var(--page-space);
    }

    .ghana-mission-page h1 {
        font: 500 clamp(38px, 4.6vw, 68px)/1.1 'Playfair Display', serif;
        margin: 18px 0 24px;
    }

    .ghana-mission-page h2 {
        font: 500 clamp(28px, 3vw, 42px)/1.2 'Playfair Display', serif;
        margin: 12px 0 20px;
    }

    .ghana-mission-page h3 {
        font: 500 26px/1.3 'Playfair Display', serif;
    }

    .ghana-mission-page p {
        max-width: 65ch;
        line-height: 1.8;
    }

.ghana-mission-story {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 48px;
    align-items: center;
}

.mission-visit-gallery {
    background: #f1eee3;
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.4fr);
    column-gap: clamp(16px, 2vw, 32px);
    align-items: start;
}

    .mission-visit-gallery > header {
        display: flex;
        flex-direction: column;
        justify-content: center;
        box-sizing: border-box;
        min-height: 500px;
        padding: 24px 0;
        color: #063f3b;
    }

        .mission-visit-gallery > header a {
            align-self: flex-start;
            color: #063f3b;
        }

        .mission-visit-gallery > header .eyebrow {
            color: #806021;
            margin: 0;
        }

        .mission-visit-gallery > header h2 {
            color: #063f3b;
        }

        .mission-visit-gallery > header p:not(.eyebrow) {
            font-size: 16px;
            line-height: 1.65;
            margin: 0 0 20px;
        }

.mission-slideshow {
    min-width: 0;
    background: #f1eee3;
}

    .mission-slideshow figure {
        position: relative;
        margin: 0;
    }

.mission-slide-image {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 500px;
    background: #f1eee3;
}

    .mission-slide-image img {
        display: block;
        width: auto;
        max-width: 100%;
        height: auto;
        max-height: 100%;
        object-fit: contain;
        mask-image: linear-gradient(90deg, transparent, #000 12%);
    }

.mission-slideshow figcaption {
    position: absolute;
    inset: auto 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 16px;
    padding: 10px 16px;
    background: rgb(241 238 227 / 72%);
    color: #063f3b;
    font-size: 13px;
    line-height: 1.4;
    backdrop-filter: blur(8px);
}

.mission-slide-caption {
    flex: 1 1 200px;
    display: grid;
    gap: 3px;
    text-align: right;
}

.mission-slideshow figcaption .eyebrow {
    margin: 0;
    font-size: 10px;
    color: #806021;
}

.mission-slide-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    margin-left: auto;
}

    .mission-slide-controls button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 44px;
        padding: 0;
        border: 0;
        background: transparent;
        color: #063f3b;
        font-size: 22px;
        cursor: pointer;
        border-radius: 4px;
    }

        .mission-slide-controls button:hover {
            background: #063f3b;
            color: #fffdf5;
        }

        .mission-slide-controls button:focus-visible {
            outline: 3px solid #b99750;
            outline-offset: 3px;
        }

.mission-slide-dots {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

    .mission-slide-dots button {
        width: 24px;
        height: 44px;
        border: 0;
    }

    .mission-slide-dots span {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: currentColor;
        opacity: .4;
    }

    .mission-slide-dots .is-active span {
        opacity: 1;
        width: 18px;
        border-radius: 6px;
    }

@media (max-width: 1050px) {
    .mission-visit-gallery {
        grid-template-columns: minmax(0, 1fr);
    }

        .mission-visit-gallery > header {
            min-height: 0;
            padding: 0;
        }

    .mission-slide-image {
        justify-content: center;
    }

        .mission-slide-image img {
            mask-image: linear-gradient(180deg, transparent, #000 10%);
        }
}

@media (max-width: 600px) {
    .mission-visit-gallery > header h2 {
        font-size: 30px;
        margin-block: 12px;
    }
}

@media (max-width: 400px) {
    .mission-slideshow figcaption {
        padding: 8px 12px;
    }

    .mission-slide-controls {
        margin-inline: auto;
        gap: 2px;
    }

    .mission-slide-image {
        height: 300px;
    }
}

.ghana-mission-identity {
    padding: 36px;
    background: #063f3b;
    color: #fffdf5;
    border-top: 4px solid #d8b66c;
}

    .ghana-mission-identity > span {
        color: #ead1a0;
        font-size: 12px;
        letter-spacing: .14em;
        text-transform: uppercase;
    }

    .ghana-mission-identity hr {
        border: 0;
        border-top: 1px solid #63847b;
        margin: 24px 0;
    }

.ghana-mission-story {
    border-bottom: 1px solid #d8dfd3;
}

.ghana-mission-activities {
    scroll-margin-top: 110px;
}

.ghana-mission-activity-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin-top: 28px;
}

    .ghana-mission-activity-grid article {
        padding: 30px;
        background: #e9ede3;
        border-top: 3px solid #b99750;
    }

    .ghana-mission-activity-grid h3 {
        margin: 12px 0 18px;
    }

.ghana-mission-empty {
    margin-top: 28px;
    padding: 30px;
    border: 1px solid #d8dfd3;
    border-left: 4px solid #b99750;
    background: #fffdf5;
}

.ghana-mission-connect {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
    background: #063f3b;
    color: #fffdf5;
}

    .ghana-mission-connect .eyebrow {
        color: #ead1a0;
    }

    .ghana-mission-connect > a {
        flex-shrink: 0;
    }

.ghana-mission-page a:focus-visible {
    outline: 3px solid #b99750;
    outline-offset: 5px;
}

.mission-timeline {
    list-style: none;
    padding: 0 0 0 24px;
    margin: 40px 0 0;
    border-left: 2px solid #b99750;
}

    .mission-timeline > li {
        position: relative;
        margin-bottom: 32px;
    }

        .mission-timeline > li::before {
            content: '';
            position: absolute;
            top: 7px;
            left: -31px;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #063f3b;
        }

    .mission-timeline time {
        display: block;
        margin-bottom: 12px;
        font-size: 14px;
        font-weight: 700;
    }

.mission-timeline-card {
    display: flex;
    background: #fffdf5;
    border: 1px solid #d8dfd3;
}

    .mission-timeline-card > a {
        flex: 0 0 34%;
    }

    .mission-timeline-card img {
        width: 100%;
        height: 100%;
        max-height: 330px;
        object-fit: contain;
    }

    .mission-timeline-card > div {
        min-width: 0;
        padding: 28px;
    }

    .mission-timeline-card h3 {
        margin: 10px 0;
        overflow-wrap: anywhere;
    }

        .mission-timeline-card h3 a {
            color: inherit;
            text-decoration: none;
        }

.mission-article {
    max-width: 1100px;
    margin: auto;
    overflow-wrap: anywhere;
}

.mission-article-image {
    display: block;
    width: 100%;
    max-height: 650px;
    object-fit: contain;
    margin: 28px 0;
}

.mission-article-body {
    white-space: pre-wrap;
    line-height: 1.9;
    max-width: 75ch;
    margin-block: 28px;
}

@media (max-width: 800px) {
    .mission-timeline-card {
        flex-direction: column;
    }

        .mission-timeline-card img {
            height: auto;
            max-height: 350px;
        }

        .mission-timeline-card > div {
            padding: 22px;
        }

    .ghana-mission-page section {
        padding-block: 34px;
    }

    .ghana-mission-story {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    .ghana-mission-activity-grid {
        grid-template-columns: minmax(0, 1fr);
    }

        .ghana-mission-activity-grid article {
            padding: 24px;
        }

    .ghana-mission-identity, .ghana-mission-empty {
        padding: 24px;
    }

    .ghana-mission-connect {
        align-items: flex-start;
        flex-direction: column;
        gap: 16px;
    }
}

.public-refresh .center-hero.mission-center-hero {
    background-image: linear-gradient(90deg,rgba(2,35,33,.94) 0%,rgba(2,46,43,.78) 36%,rgba(2,46,43,.12) 75%), url('/images/mission/orphanage-visit-presentation-remastered.jpg');
}

.ghana-mission-page .mission-center-hero h1 {
    margin: 0;
}

@media (max-width: 700px) {
    .public-refresh .center-hero.mission-center-hero {
        background-image: linear-gradient(180deg,transparent 100px,#022e2b 260px), url('/images/mission/orphanage-visit-presentation-remastered.jpg');
    }
}