/* ==========================================================================
   YEAR-END FUNDRAISER 2026 (endofyearcampaign26.php, /year-end-fundraiser-2026)
   Report-style layout: opens light (Sanctum White #f2f4f5), then alternates
   dark (charcoal #1e2428, deep teal #1d5f6b) and light sections.
   Sabon headlines (self-hosted), IBM Plex Sans text. Huy Pham, 2026-11-06.
   ========================================================================== */
@font-face {
    font-family: "Sabon";
    src: url("/fonts/sabon/sabon-regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
.yer26-give {
    background: #f2f4f5;
}
.yer26-give .main-container {
    font-family: "IBM Plex Sans", "Open Sans", sans-serif;
    color: #1e2428;
}
.yer26-give .modal-instance.yer26-dl {
    display: block !important;
    height: 0 !important;
}

/* Nav + footer: same as the homepage (css/home.css "HOMEPAGE TIDY"): solid #1e2428, Plex, ice headings. */
.yer26-give nav, .yer26-give nav a,
.yer26-give footer, .yer26-give footer a, .yer26-give footer p, .yer26-give footer span, .yer26-give footer h5,
.yer26-give footer h6, .yer26-give footer .type--fine-print {
    font-family: "IBM Plex Sans", "Open Sans", sans-serif !important;
}
.yer26-give nav, .yer26-give nav .bar, .yer26-give nav .bar--absolute, .yer26-give nav .bar-1,
.yer26-give nav .nav-container > div, .yer26-give nav > div {
    background: #1e2428 !important;
}
.yer26-give section.footer-2, .yer26-give footer.footer-2 { background: #1e2428 !important; }
.yer26-give footer, .yer26-give footer p, .yer26-give footer a, .yer26-give footer span { color: #d6dce1 !important; }
.yer26-give footer a:hover { color: #fff !important; }
.yer26-give footer h5, .yer26-give footer h6, .yer26-give footer .type--uppercase, .yer26-give footer strong, .yer26-give footer b {
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: .18em !important;
    color: #8fc6cf !important;
}
.yer26-give footer .btn, .yer26-give footer a.btn {
    border-color: #f2f4f5 !important;
    border-radius: 3px !important;
    background: #f2f4f5 !important;
    color: #1e2428 !important;
}
.yer26-give footer .btn:hover, .yer26-give footer .btn:focus {
    border-color: #1f8da1 !important;
    background: #1f8da1 !important;
    color: #fff !important;
}
.yer26-give footer .btn .btn__text, .yer26-give footer .btn span {
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: .12em !important;
    color: inherit !important;
}
.yer26-give nav .cnav-menu {
    pointer-events: none;
}
.yer26-give nav .cnav-menu > * {
    pointer-events: auto;
}

/* Shared type */
.yer26-give section {
    padding: 0;
}
.yer26-give .yer26-give__wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}
.yer26-give h1, .yer26-give h2, .yer26-give h3 {
    font-family: "Sabon", Georgia, serif;
    font-weight: 400;
    letter-spacing: 0;
    margin: 0;
    text-wrap: balance;
}
.yer26-give .main-container :where(p) {
    margin: 0;
    text-wrap: pretty;
}
.yer26-give .yer26-give__eyebrow {
    margin: 0;
    font: 600 12px/1.4 "IBM Plex Sans", "Open Sans", sans-serif;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #2a8796;
}
.yer26-give .yer26-give__eyebrow--ice {
    color: #9fd3dc;
}

/* 1. Opening: text | photo | form, inside the same 1200px column as the rest of the page */
.yer26-give .yer26-give__hero {
    background: #f2f4f5;
    padding-top: 57px; /* fixed nav */
}
.yer26-give .yer26-give__hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px 340px;
    gap: 32px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 32px 40px 40px;
    align-items: stretch;
}
.yer26-give .yer26-give__hero-copy {
    padding: 14px 0 0; /* eyebrow on the same top line as the photo and "$X raised" */
}
.yer26-give .yer26-give__hero-copy .yer26-give__eyebrow {
    line-height: 1;
}
.yer26-give .yer26-give__title {
    margin-top: 12px;
    font-size: 42px;
    line-height: 1.06;
    color: #1e2428;
}
.yer26-give .yer26-give__lead {
    margin-top: 12px;
    font-size: 16px;
    line-height: 1.55;
    color: rgba(30, 36, 40, 0.82);
}
.yer26-give .yer26-give__title + .yer26-give__lead {
    margin-top: 18px;
}
/* Option A (Huy 11-06): three equal columns. Photo runs from the top of the goal meter to
   the bottom of the donation form's box (FundraiseUp insets its content: ~14px above the meter text, ~9px under the form box). */
.yer26-give .yer26-give__hero-photo {
    position: relative;
    display: block;
    overflow: hidden;
    margin-top: 14px;   /* top of "$X raised" */
    margin-bottom: 9px; /* bottom edge of the form's box */
    border-radius: 3px;
}
.yer26-give .yer26-give__hero-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
}
/* FundraiseUp: no panel behind the form (it draws its own box). The goal meter is inset
   8px each side so its bar lines up with the edges of the form's box. */
.yer26-give .yer26-give__hero-form {
    padding: 0;
}
.yer26-give .yer26-give__meter {
    padding: 0 8px 4px;
}
.yer26-give .yer26-give__meter iframe {
    max-width: 100% !important;
}

/* 2. Numbers (dark) */
.yer26-give .yer26-give__stats {
    background: #1e2428;
    color: #fff;
}
.yer26-give .yer26-give__stats .yer26-give__wrap {
    padding-top: 88px;
    padding-bottom: 88px;
}
.yer26-give .yer26-give__stats-h {
    margin-top: 14px;
    font-size: 34px;
    color: #fff;
}
.yer26-give .yer26-give__stats-big {
    margin-top: 8px;
    font: 400 168px/1 "Sabon", Georgia, serif;
    color: #9fd3dc;
}
.yer26-give .yer26-give__stats-sub {
    margin-top: 8px;
    font: 400 30px/1.3 "Sabon", Georgia, serif;
    color: #fff;
}
.yer26-give .yer26-give__stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-top: 56px;
}
.yer26-give .yer26-give__stat {
    border-top: 1px solid rgba(159, 211, 220, 0.35);
    padding-top: 16px;
}
.yer26-give .yer26-give__stat-n {
    font: italic 400 44px/1 "Sabon", Georgia, serif;
    color: #9fd3dc;
}
.yer26-give .yer26-give__stat-l {
    margin-top: 10px;
    font-size: 15px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.85);
}

/* 3. Four areas (light) */
.yer26-give .yer26-give__areas {
    background: #f2f4f5;
}
.yer26-give .yer26-give__areas .yer26-give__wrap {
    padding-top: 88px;
    padding-bottom: 88px;
}
.yer26-give .yer26-give__areas-h {
    max-width: 860px;
    margin-top: 12px;
    font-size: 36px;
    line-height: 1.2;
    color: #1e2428;
}
.yer26-give .yer26-give__cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    margin-top: 44px;
}
.yer26-give .yer26-give__card {
    background: #fff;
    border-radius: 3px;
    overflow: hidden;
}
.yer26-give .yer26-give__card-img {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}
.yer26-give .yer26-give__card-img img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.yer26-give .yer26-give__card-img--pub img { object-position: 50% 35%; }
.yer26-give .yer26-give__card-img--arise img { object-position: 52% 20%; transform: scale(1.2); transform-origin: 52% 20%; }
.yer26-give .yer26-give__card-img--media img { object-position: 30% 72%; transform: scale(1.3); transform-origin: 30% 72%; }
.yer26-give .yer26-give__card-img--team img { object-position: 45% 62%; transform: scale(1.15); transform-origin: 45% 62%; }
.yer26-give .yer26-give__card-body {
    padding: 28px 28px 32px;
}
.yer26-give .yer26-give__card-title {
    font-size: 24px;
    line-height: 1.25;
    color: #1e2428;
}
.yer26-give .yer26-give__card-amt {
    color: #b85429;
}
.yer26-give .yer26-give__card-text {
    margin-top: 10px;
    font-size: 16px;
    line-height: 1.55;
}
.yer26-give .yer26-give__card-list {
    margin: 10px 0 0;
    padding-left: 18px;
    list-style: disc;
    font-size: 15px;
    line-height: 1.45;
}
.yer26-give .yer26-give__card-list li {
    text-wrap: pretty;
    margin: 3px 0;
    list-style: disc;
}

/* 4. Giving levels (deep teal) */
.yer26-give .yer26-give__ladder {
    background: #1d5f6b;
    color: #fff;
}
.yer26-give .yer26-give__ladder-grid {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 80px;
    padding-top: 88px;
    padding-bottom: 88px;
}
.yer26-give .yer26-give__ladder-h {
    margin-top: 12px;
    font-size: 44px;
    color: #fff;
}
.yer26-give .yer26-give__ladder-note {
    margin-top: 14px;
    font-size: 16px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.85);
}
.yer26-give .yer26-give__ladder-row {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 16px;
    align-items: baseline;
    border-top: 1px solid rgba(255, 255, 255, 0.22);
    padding: 18px 0;
}
.yer26-give .yer26-give__ladder-amt {
    font: italic 400 44px/1 "Sabon", Georgia, serif;
    color: #9fd3dc;
}
.yer26-give .yer26-give__ladder-text {
    font-size: 19px;
    line-height: 1.4;
    color: #fff;
}

/* 5. Close (light). Photo runs full-bleed to the right edge and fades into the page on its
   left; copy sits in the page column right beside it. */
.yer26-give .yer26-give__close {
    position: relative;
    overflow: hidden;
    background: #f2f4f5;
}
.yer26-give .yer26-give__close-inner {
    display: flex;
    align-items: center;
    min-height: 604px;
    padding-top: 72px;
    padding-bottom: 72px;
}
.yer26-give .yer26-give__close-copy {
    position: relative;
    z-index: 1;
    max-width: 520px;
}
.yer26-give .yer26-give__close-photo {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: calc(50% - 110px);
    display: block;
}
.yer26-give .yer26-give__close-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 40% 25%;
}
.yer26-give .yer26-give__close-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #f2f4f5 0%, rgba(242, 244, 245, 0.85) 10%, rgba(242, 244, 245, 0) 34%);
}
.yer26-give .yer26-give__close-h {
    max-width: 560px;
    font-size: 42px;
    line-height: 1.1;
    color: #1e2428;
}
.yer26-give .yer26-give__close-p {
    max-width: 520px;
    margin-top: 18px;
    font-size: 18px;
    line-height: 1.55;
    color: rgba(30, 36, 40, 0.82);
}
.yer26-give .yer26-give__btns {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}
.yer26-give .yer26-give__btn {
    display: inline-block;
    padding: 16px 26px;
    border: 1.5px solid #1e2428;
    border-radius: 3px;
    font: 600 14px/1.2 "IBM Plex Sans", "Open Sans", sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    color: #1e2428;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.yer26-give .yer26-give__btn--solid {
    background: #b85429;
    border-color: #b85429;
    color: #fff;
}
.yer26-give .yer26-give__btn:hover,
.yer26-give .yer26-give__btn:focus {
    background: #1f8da1;
    border-color: #1f8da1;
    color: #fff;
    text-decoration: none;
}

/* Tablet: photo becomes a band above text + form */
@media (max-width: 1199px) {
    .yer26-give .yer26-give__hero-inner {
        grid-template-columns: minmax(0, 1fr) 340px;
        padding: 32px 32px 40px;
    }
    .yer26-give .yer26-give__hero-photo {
        grid-column: 1 / -1;
        grid-row: 1;
        height: 380px;
        margin: 0;
    }
    .yer26-give .yer26-give__hero-photo img {
        transform: none;
        object-position: 52% 30%;
    }
    .yer26-give .yer26-give__wrap {
        padding: 0 32px;
    }
    .yer26-give .yer26-give__close-photo {
        left: calc(50% - 60px);
    }
    .yer26-give .yer26-give__close-copy {
        max-width: 440px;
    }
    .yer26-give .yer26-give__ladder-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}

/* Phones */
@media (max-width: 767px) {
    .yer26-give .yer26-give__wrap {
        padding: 0 22px;
    }
    .yer26-give .yer26-give__hero-inner {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0;
    }
    .yer26-give .yer26-give__hero-photo {
        order: -1;
    }
    .yer26-give .yer26-give__hero-photo {
        height: 300px;
        margin: 0;
        border-radius: 0;
    }
    .yer26-give .yer26-give__hero-photo img {
        object-position: 52% 22%;
        transform: scale(1.3);
        transform-origin: 52% 22%;
    }
    .yer26-give .yer26-give__hero-copy {
        padding: 30px 22px 34px;
    }
    .yer26-give .yer26-give__title {
        font-size: 40px;
    }
    .yer26-give .yer26-give__lead {
        font-size: 16px;
    }
    .yer26-give .yer26-give__hero-form {
        padding: 0 14px 36px; /* form box lines up with the 22px text margin */
    }
    .yer26-give .yer26-give__card-amt {
        display: block;
        margin-top: 2px;
    }
    .yer26-give .yer26-give__stats .yer26-give__wrap,
    .yer26-give .yer26-give__areas .yer26-give__wrap,
    .yer26-give .yer26-give__ladder-grid {
        padding-top: 52px;
        padding-bottom: 52px;
    }
    .yer26-give .yer26-give__stats-h { font-size: 26px; }
    .yer26-give .yer26-give__stats-big { font-size: 84px; }
    .yer26-give .yer26-give__stats-sub { font-size: 22px; }
    .yer26-give .yer26-give__stats-row {
        grid-template-columns: 1fr;
        gap: 22px;
        margin-top: 36px;
    }
    .yer26-give .yer26-give__stat-n { font-size: 34px; }
    .yer26-give .yer26-give__areas-h { font-size: 26px; }
    .yer26-give .yer26-give__cards {
        grid-template-columns: 1fr;
        gap: 18px;
        margin-top: 28px;
    }
    .yer26-give .yer26-give__card-body { padding: 22px 20px 26px; }
    .yer26-give .yer26-give__ladder-h { font-size: 30px; }
    .yer26-give .yer26-give__ladder-row {
        grid-template-columns: 96px 1fr;
        padding: 14px 0;
    }
    .yer26-give .yer26-give__ladder-amt { font-size: 30px; }
    .yer26-give .yer26-give__ladder-text { font-size: 16px; }
    .yer26-give .yer26-give__close-inner {
        display: flex;
        flex-direction: column-reverse;
        min-height: 0;
        padding: 0 0 44px;
    }
    .yer26-give .yer26-give__close-copy {
        padding: 0 22px;
    }
    .yer26-give .yer26-give__close-photo {
        position: relative;
        top: auto;
        bottom: auto;
        left: 0;
        width: 100%;
        height: 300px;
    }
    .yer26-give .yer26-give__close-photo img {
        object-position: 55% 25%;
    }
    .yer26-give .yer26-give__close-photo::after {
        background: linear-gradient(180deg, rgba(242, 244, 245, 0) 55%, #f2f4f5 100%);
    }
    .yer26-give .yer26-give__close-copy { padding-top: 24px; }
    .yer26-give .yer26-give__close-h { font-size: 32px; }
    .yer26-give .yer26-give__close-p { font-size: 16px; }
    .yer26-give .yer26-give__btns { flex-direction: column; }
    .yer26-give .yer26-give__btn { display: block; }
}