.unslider > ul > li > .div-img {
    width:100%;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.unslider-nav {
    position: relative;
    margin-top: -40px;
    height: 40px;
}

.info-img-container {
    position: relative;
    overflow: hidden;
    height: 512px;
}

@media screen and (max-width: 767px){
	#subscribe {
        height: unset !important;
    }
} 

.info-block {
    max-height: 512px;
    height: 512px;
}

.info-img {
    height: 512px;
    background-position: center;
    background-size: auto 512px;
}

/* On wider screens, keep the image blocks at the 16:9 ratio of their
   1920x1080 backgrounds so the full image is covered instead of being
   cropped by the fixed 512px height.

   Every card in the grid follows the ratio -- the promo cards and the
   latest-post card alike -- because they sit two to a row. Ratio cards next
   to a fixed 512px card end on different lines, which is what left the white
   gap under Gospel Conversations. Matching them keeps each row flush. */
@media (min-width: 768px) {
    /* Bootstrap 3 floats these columns, so each card ends wherever its own
       content ends and the shorter of a pair leaves a white band beneath it.
       Flex the row instead: same two-up layout (the columns keep their 50%
       widths and wrap in pairs), but now both cards on a line are stretched to
       the height of the taller one. The clearfix pseudo-elements would become
       stray flex items, and .xs-divider is a mobile-only spacer, so both go. */
    .row.no-gutters.unmarg {
        display: flex;
        flex-wrap: wrap;
        align-items: stretch;
    }

    .row.no-gutters.unmarg::before,
    .row.no-gutters.unmarg::after,
    .row.no-gutters.unmarg > .xs-divider {
        display: none;
    }

    .info-block:has(.info-img-container) {
        height: auto;
        max-height: none;
    }

    /* The newsletter column is the tall card on its row. It was pinned to a flat
       512px, which both capped it (the form spilled out of the grey panel at
       narrow desktop widths) and stopped it stretching. Size it to the form
       instead, with 512px kept as the floor, and let stretch match the post
       card to it. */
    #subscribe.info-block {
        height: auto;
        min-height: 512px;
        max-height: none;
    }

    /* The row is a flex container (below), so each column is already stretched
       to the height of the tallest card on its line. `height: 100%` makes the
       card fill that, and the 16:9 ratio stays as the card's *natural* height:
       percentage heights resolve to auto while the browser measures the line,
       so the ratio is still what each card contributes to the row -- it only
       gets overridden once the line has a height to stretch into. */
    .info-block:has(.info-img-container) .info-img-container {
        width: 100%;
        height: 100%;
        aspect-ratio: 16 / 9;
    }

    .info-block:has(.info-img-container) .info-img {
        height: 100%;
        padding-top: 0;
    }

    /* The latest-post card sits inside .feature > a.block, so both links in the
       chain need a height for the card to reach the bottom of the column --
       otherwise the newsletter form (the taller card on that row) leaves a
       white band under the post image. The 60px bottom margin on .feature would
       reopen the same gap, so it goes too. */
    .info-block:has(.info-img-container) .feature:not(.boxed) {
        margin-bottom: 0;
        height: 100%;
    }

    .info-block:has(.info-img-container) .feature > a.block {
        height: 100%;
    }

    /* The theme centres this card's text with `top: 50%; translateY(-50%)`, and
       drops that on any viewport under 600px tall -- a rule written for
       full-height hero sections, where a short window should start content at
       the top. These cards are a fixed ratio and have nothing to do with the
       window height, so it just pins the post title to the top of the card,
       under the "Latest Post" pill.

       Centre with the box instead of with offsets: the card becomes a flex
       column and the text is centred as a flex item, which no top/transform
       rule from the theme can reach. The offsets are zeroed so the two
       mechanisms can't stack. Scoped to 768px up, so the theme's mobile
       top-align still stands. */
    .info-block:has(.info-img-container) .info-img-container.imagebg {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .info-block:has(.info-img-container) .pos-vertical-center {
        top: 0;
        transform: none;
        -webkit-transform: none;
        width: 100%;
    }
}

/* Just above the stacking breakpoint the columns are at their narrowest, the
   post title wraps to three lines, and the text outgrows a 16:9 box. A floor
   keeps the CTA inside the card. Every card in the grid takes the same floor,
   so the rows stay flush; the promo art gains a few pixels of crop. */
@media (min-width: 768px) and (max-width: 800px) {
    .info-block:has(.info-img-container) .info-img-container {
        min-height: 230px;
    }
}

/* Same squeeze, other symptom: between 768 and 991 the post card's text fills
   nearly the whole 16:9 box, so the centred title runs under the "Latest Post"
   pill (and moving the pill down only puts it on the CTA instead). Drop the
   pill for those widths -- the card's own "Read the Latest Post" button already
   says the same thing. Delete this block to keep the pill and accept the
   overlap. */
@media (min-width: 768px) and (max-width: 991px) {
    .info-block:has(.info-img-container) .label {
        display: none;
    }
}

.row.no-gutters > [class^="col-"], .row.no-gutters > [class*=" col-"] {
    padding-right: 0;
    padding-left: 0;
}
.row.no-gutters .padded {
    padding: 30px;
}

.subscribe-combine {
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.no-wrap {
    white-space: nowrap;
}

.unslider-nav ol li {
    width: 12px;
    height: 12px;
    border-radius: 6px;
}


/*  SM FEATURES  */
.feature.boxed {
    margin-bottom: 0px;
}



/*  HERO SLIDER  */
.home-hero-height {
    height: 90vh;
}
.slider[data-paging="true"]:not(section) {
    margin-bottom: 0;
}
.slider[data-paging="true"]:not(section) .flickity-page-dots {
    bottom: 30px;
    pointer-events: auto;
    z-index: 10;
}
.slider[data-paging="true"]:not(section) .flickity-page-dots .dot {
    width: 50px;
    height: 3px;
    border-radius: 3px;
    opacity: 1;
    background: rgba(255, 255, 255, .4);
    box-shadow: 0px 0px 10px rgba(46, 47, 51, .3);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    pointer-events: auto;
}

.slider[data-paging="true"]:not(section) .flickity-page-dots .dot::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background: white;
    border-radius: 6px;
    pointer-events: none;
}

.slider[data-paging="true"]:not(section) .flickity-page-dots .dot.is-selected {
    background: rgba(255, 255, 255, .4);
}

.slider[data-paging="true"]:not(section) .flickity-page-dots .dot.is-selected::before {
    animation: loadBar 7s linear forwards;
}

@keyframes loadBar {
    from {
        width: 0%;
    }
    to {
        width: 100%;
    }
}

.card__top img {
    width: 100%;
}

.card {
    padding-bottom: 20px;
}

.buy-card {
    padding-top: 10px;
    text-align: center; 
    /* display: flex;  */
    align-content: space-between; 
    justify-content: space-around; 
    flex-wrap: wrap;
    
    .btn {
        border: white;
        border-width: 1px;
        border-style: solid;
        padding-top: 10px;
        margin-left: 0;
    }
}

.card__body {
    min-height: 260px;
}



/* ==========================================================================
   YER26 TOP BARS
   Year-end 2026 donate + report bars (components/yer26-top-bars.php).
   They sit in the page flow under the fixed navbar; the padding on
   .yer26-bars is the space the navbar covers (57px, 50px on phones).
   ========================================================================== */
.home .yer26-bars {
    display: grid;
    padding-top: 57px;
    background-color: #2e2f33;
}
/* Both bars share one grid cell; only the one named by data-active shows.
   The swap is a crossfade so the slider below never shifts. */
.home .yer26-bars > .yer26-bar {
    grid-area: 1 / 1;
    transition: opacity .4s ease, visibility .4s ease;
}
.home .yer26-bars[data-active="donate"] > .yer26-bar--report,
.home .yer26-bars[data-active="report"] > .yer26-bar--donate {
    opacity: 0;
    visibility: hidden;
}
.home .yer26-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px 48px;
    min-height: 48px;
    padding: 8px 16px;
    font-family: "IBM Plex Sans", "Open Sans", sans-serif;
    font-weight: 400;
    text-decoration: none;
}
.home .yer26-bar:hover,
.home .yer26-bar:focus {
    text-decoration: none;
}
/* The fixed nav's .cnav-menu has an empty line box that hangs ~45px below the
   nav and swallowed hover/clicks on most of the donate bar. Let the pointer
   pass through the menu's own box; its links and dropdowns stay clickable. */
.home nav .cnav-menu {
    pointer-events: none;
}
.home nav .cnav-menu > * {
    pointer-events: auto;
}
.home .yer26-bar--donate {
    background-color: #b85429;
}
.home .yer26-bar--report {
    background-color: #1e2428;
}
.home .yer26-bar__message {
    font-size: 17px;
    line-height: 1.35;
    color: #fff;
}
.home .yer26-bar__message strong {
    font-weight: 700;
}
.home .yer26-bar__group {
    display: flex;
    align-items: center;
}
.home .yer26-bar__title {
    font-family: "Sabon", Georgia, serif;
    font-size: 24px;
    line-height: 1.1;
    color: #f2f4f5;
}
.home .yer26-bar__eyebrow {
    margin-left: 17px;
    padding-left: 17px;
    border-left: 1px solid rgba(255, 255, 255, .3);
    font-size: 13px;
    font-weight: 600;
    line-height: 22px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #9fd3dc;
}
.home .yer26-bar__btn {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 20px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background-color .2s ease, color .2s ease;
}
.home .yer26-bar--donate .yer26-bar__btn {
    min-width: 140px;
    background-color: #fff;
    color: #b85429;
}
.home .yer26-bar--donate:hover .yer26-bar__btn,
.home .yer26-bar--donate:focus .yer26-bar__btn {
    background-color: #1f8da1;
    color: #fff;
}
.home .yer26-bar--report .yer26-bar__btn {
    min-width: 150px;
    background-color: #1f8da1;
    color: #fff;
}
.home .yer26-bar--report:hover .yer26-bar__btn,
.home .yer26-bar--report:focus .yer26-bar__btn {
    background-color: #1f8da1;
}
@media (max-width: 767px) {
    .home .yer26-bars {
        padding-top: 50px;
    }
    .home .yer26-bar {
        justify-content: space-between;
        gap: 12px;
        min-height: 56px;
        padding: 8px 16px;
        text-align: left;
    }
    .home .yer26-bar__message {
        font-size: 14px;
    }
    .home .yer26-bar__group {
        flex-direction: column;
        align-items: flex-start;
    }
    .home .yer26-bar__title {
        font-size: 19px;
    }
    .home .yer26-bar__eyebrow {
        margin-left: 0;
        padding-left: 0;
        border-left: 0;
        font-size: 11px;
        line-height: 18px;
        letter-spacing: 2px;
    }
    .home .yer26-bar__btn {
        height: 32px;
        padding: 0 12px;
        font-size: 11px;
        letter-spacing: 1px;
    }
    .home .yer26-bar--donate .yer26-bar__btn,
    .home .yer26-bar--report .yer26-bar__btn {
        min-width: 0;
    }
}


/* ==========================================================================
   YER26 HERO
   Year-end 2026 report + donate slides (index-hero/3-yer26-*.html).
   Text is live HTML on the paper colour; the painting fills the right half
   on tablet/desktop and the top half on phones.
   ========================================================================== */
.home .yer26-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 850px;
    overflow: hidden;
    background-color: #f1f0e3;
}
.home .yer26-hero__art {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 52%;
}
/* Paper-coloured fade over the painting's left edge, as in the design. */
.home .yer26-hero__art::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 0;
    left: -1px;
    width: 23%;
    background: linear-gradient(to right, #f1f0e3, rgba(241, 240, 227, 0));
}
.home .yer26-hero__art picture {
    display: block;
    width: 100%;
    height: 100%;
}
.home .yer26-hero__art-img {
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
    object-fit: cover;
    object-position: 50% 50%;
}
.home .yer26-hero__container {
    position: relative;
    z-index: 2;
}
.home .yer26-hero .yer26-hero__eyebrow {
    margin: 0 0 22px;
    font-family: "IBM Plex Sans", "Open Sans", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #176f7d;
}
.home .yer26-hero .yer26-hero__title {
    margin: 0 0 26px;
    font-family: "Sabon", Georgia, serif;
    font-size: clamp(48px, 5vw, 92px);
    font-weight: 400;
    line-height: .98;
    letter-spacing: 0;
    color: #1e2428;
}
.home .yer26-hero .yer26-hero__body {
    max-width: 480px;
    margin: 0 0 40px;
    font-family: "IBM Plex Sans", "Open Sans", sans-serif;
    font-size: 21px;
    line-height: 32px;
    color: #3a4247;
}
.home .yer26-hero .yer26-hero__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 240px;
    height: 56px;
    margin: 0;
    padding: 0 32px;
    border: 0;
    border-radius: 4px;
    background-color: #1e2428;
    transition: background-color .2s ease, transform .2s ease;
}
.home .yer26-hero .yer26-hero__btn:hover,
.home .yer26-hero .yer26-hero__btn:focus {
    background-color: #1f8da1;
}
.home .yer26-hero .yer26-hero__btn .btn__text {
    font-family: "IBM Plex Sans", "Open Sans", sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #fff;
}
@media (max-width: 1199px) {
    .home .yer26-hero .yer26-hero__body {
        font-size: 19px;
        line-height: 29px;
    }
}
@media (max-width: 991px) {
    .home .yer26-hero__art {
        width: 48%;
    }
    .home .yer26-hero__art::before {
        width: 40%;
    }
    .home .yer26-hero__art-img {
        object-position: 78% 50%;
    }
    .home .yer26-hero .yer26-hero__eyebrow {
        margin-bottom: 16px;
        font-size: 14px;
        letter-spacing: 2.5px;
    }
    .home .yer26-hero .yer26-hero__body {
        font-size: 18px;
        line-height: 27px;
        margin-bottom: 32px;
    }
}
/* Phones: painting on top fading into the paper, text underneath. The 850px
   min-height matches the other home heroes so the slider stays one height. */
@media (max-width: 767px) {
    .home .yer26-hero {
        align-items: flex-end;
        padding-bottom: 80px;
    }
    .home .yer26-hero__art {
        left: 0;
        bottom: auto;
        width: 100%;
        height: 52%;
    }
    .home .yer26-hero__art::before {
        top: auto;
        right: 0;
        bottom: -1px;
        left: 0;
        width: auto;
        height: 40%;
        background: linear-gradient(to top, #f1f0e3, rgba(241, 240, 227, 0));
    }
    .home .yer26-hero__art-img {
        object-position: 62% 30%;
    }
    .home .yer26-hero__container {
        width: 100%;
        padding-right: 24px;
        padding-left: 24px;
    }
    .home .yer26-hero .yer26-hero__eyebrow {
        margin-bottom: 12px;
        font-size: 13px;
        letter-spacing: 2.5px;
    }
    .home .yer26-hero .yer26-hero__title {
        margin-bottom: 18px;
        font-size: 52px;
    }
    .home .yer26-hero .yer26-hero__body {
        margin-bottom: 28px;
        font-size: 17px;
        line-height: 26px;
    }
    .home .yer26-hero .yer26-hero__btn {
        min-width: 220px;
        height: 52px;
    }
}


/* ==========================================================================
   YER26 HERO, PHOTO VARIANT
   Full-bleed ARISE photo donate slides (index-hero/3-yer26-3/4/5-*.html).
   Shade: #1E2428 at 92% -> 75% at 38% -> 0% at 62%, left to right.
   ========================================================================== */
.home .yer26-hero--photo {
    background-color: #1e2428;
}
.home .yer26-hero--photo .yer26-hero__art {
    left: 0;
    width: 100%;
}
.home .yer26-hero--photo .yer26-hero__art::before {
    left: 0;
    right: 0;
    width: auto;
    background: linear-gradient(to right, rgba(30, 36, 40, .92) 0%, rgba(30, 36, 40, .75) 38%, rgba(30, 36, 40, 0) 62%);
}
.home .yer26-hero--photo .yer26-hero__art-img {
    object-position: 50% 50%;
}
.home .yer26-hero--photo .yer26-hero__eyebrow {
    color: #9fd3dc;
}
.home .yer26-hero--photo .yer26-hero__title {
    color: #fff;
}
.home .yer26-hero--photo .yer26-hero__body {
    color: #e4e8ea;
}
.home .yer26-hero--photo .yer26-hero__btn {
    background-color: #b85429;
}
.home .yer26-hero--photo .yer26-hero__btn:hover,
.home .yer26-hero--photo .yer26-hero__btn:focus {
    background-color: #1f8da1;
}
/* Text starts at the design's 200px-of-1848 left edge instead of the grid. */
@media (min-width: 768px) {
    .home .yer26-hero--photo .yer26-hero__container {
        width: 100%;
        padding-right: 30px;
        padding-left: max(30px, 10.8vw);
    }
}
/* Narrower screens: keep the subject in frame and darken further right so
   the copy stays readable over the photo. */
@media (max-width: 991px) {
    .home .yer26-hero--photo .yer26-hero__art {
        width: 100%;
    }
    .home .yer26-hero--photo .yer26-hero__art::before {
        width: auto;
        background: linear-gradient(to right, rgba(30, 36, 40, .92) 0%, rgba(30, 36, 40, .82) 50%, rgba(30, 36, 40, 0) 85%);
    }
    .home .yer26-hero--photo .yer26-hero__art-img {
        object-position: 68% 50%;
    }
}
/* Phones: portrait crop of the photo on top, fading into the charcoal under the text. */
@media (max-width: 767px) {
    .home .yer26-hero--photo .yer26-hero__art {
        bottom: auto;
        height: 62%;
    }
    .home .yer26-hero--photo .yer26-hero__art::before {
        top: auto;
        bottom: -1px;
        height: 45%;
        background: linear-gradient(to top, #1e2428, rgba(30, 36, 40, 0));
    }
    .home .yer26-hero--photo .yer26-hero__art-img {
        object-position: 50% 30%;
    }
}


/* ==========================================================================
   YER26 HERO, PAPER VARIANT
   Full-bleed painting with a paper-coloured shade (report slide,
   index-hero/3-yer26-1-report.html). Used together with
   .yer26-hero--photo, which supplies the full-bleed layout; this block
   puts back the paper colours and dark text.
   Shade: #F1F0E3 at 95% -> 82% at 30% -> 0% at 46%, left to right.
   ========================================================================== */
.home .yer26-hero--paper {
    background-color: #f1f0e3;
}
.home .yer26-hero--paper .yer26-hero__art::before {
    background: linear-gradient(to right, rgba(241, 240, 227, .95) 0%, rgba(241, 240, 227, .82) 30%, rgba(241, 240, 227, 0) 46%);
}
.home .yer26-hero--paper .yer26-hero__eyebrow {
    color: #176f7d;
}
.home .yer26-hero--paper .yer26-hero__title {
    color: #1e2428;
}
.home .yer26-hero--paper .yer26-hero__body {
    color: #3a4247;
}
.home .yer26-hero--paper .yer26-hero__btn {
    background-color: #1e2428;
}
.home .yer26-hero--paper .yer26-hero__btn:hover,
.home .yer26-hero--paper .yer26-hero__btn:focus {
    background-color: #1f8da1;
}
/* On narrower screens, slide the painting right so the woman stays clear of the copy. */
@media (max-width: 1599px) {
    .home .yer26-hero--paper .yer26-hero__art::before {
        background: linear-gradient(to right, rgba(241, 240, 227, .95) 0%, rgba(241, 240, 227, .86) 38%, rgba(241, 240, 227, 0) 58%);
    }
    .home .yer26-hero--paper .yer26-hero__art-img {
        object-position: 30% 50%;
    }
}
@media (max-width: 1199px) {
    .home .yer26-hero--paper .yer26-hero__art-img {
        object-position: 8% 50%;
    }
}
@media (max-width: 991px) {
    .home .yer26-hero--paper .yer26-hero__art::before {
        background: linear-gradient(to right, rgba(241, 240, 227, .95) 0%, rgba(241, 240, 227, .88) 40%, rgba(241, 240, 227, 0) 68%);
    }
    .home .yer26-hero--paper .yer26-hero__art-img {
        object-position: 30% 50%;
    }
    .home .yer26-hero--paper .yer26-hero__body {
        max-width: 380px;
    }
}
@media (max-width: 767px) {
    .home .yer26-hero--paper .yer26-hero__art::before {
        background: linear-gradient(to top, #f1f0e3, rgba(241, 240, 227, 0));
    }
    .home .yer26-hero--paper .yer26-hero__art-img {
        object-position: 50% 30%;
    }
}


/* ==========================================================================
   YER26 REPORT
   2026 Annual Report hero slide (index-hero/0-yer26-1-report.html) and the
   report card under the slider (index.php). Text and buttons are live HTML;
   only the booklet/letter art is an image. Sizes follow the approved design
   frames (hero 1440x850 desktop, 680x1482 phone; card 1380x776 desktop,
   680x1080 narrow) through --u = 1 design px, via container query units.
   ========================================================================== */
.home .yer26-report {
    position: relative;
    container-type: inline-size;
    overflow: hidden;
    padding: 0;
}
.home .yer26-report__stage {
    position: relative;
    margin: 0 auto;
}
.home .yer26-report__art {
    position: absolute;
    display: block;
    max-width: none;
    height: auto;
    margin: 0;
}
.home .yer26-report__copy {
    position: absolute;
}
.home .yer26-report .yer26-report__rule {
    width: calc(var(--u) * 60 * var(--s));
    height: calc(var(--u) * 4 * var(--s));
    margin: 0 0 calc(var(--u) * 18 * var(--s));
    background-color: #b85429;
}
.home .yer26-report .yer26-report__eyebrow {
    margin: 0 0 calc(var(--u) * 12 * var(--s));
    font-family: "IBM Plex Sans", "Open Sans", sans-serif;
    font-size: max(11px, calc(var(--u) * 15 * var(--s)));
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: calc(var(--u) * 4 * var(--s));
    text-transform: uppercase;
    color: #176f7d;
}
.home .yer26-report .yer26-report__title {
    margin: 0 0 calc(var(--u) * 16 * var(--s));
    font-family: "Sabon", Georgia, serif;
    font-size: calc(var(--u) * var(--hl));
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;
    color: #1e2428;
}
.home .yer26-report .yer26-report__body {
    max-width: calc(var(--u) * 500 * var(--s));
    margin: 0 0 calc(var(--u) * 28 * var(--s));
    font-family: "IBM Plex Sans", "Open Sans", sans-serif;
    font-size: max(14px, calc(var(--u) * 21 * var(--s)));
    line-height: 1.4;
    color: rgba(30, 36, 40, .9);
}
.home .yer26-report__btns {
    display: inline-grid;
    grid-template-columns: 1fr 1fr;
    gap: calc(var(--u) * 14 * var(--s));
}
.home .yer26-report .yer26-report__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: calc(var(--u) * 200 * var(--s));
    height: max(40px, calc(var(--u) * 52 * var(--s)));
    margin: 0;
    padding: 0 calc(var(--u) * 26 * var(--s));
    border: max(1.5px, calc(var(--u) * 2 * var(--s))) solid #1e2428;
    border-radius: calc(var(--u) * 3 * var(--s));
    font-family: "IBM Plex Sans", "Open Sans", sans-serif;
    font-size: max(13px, calc(var(--u) * 17 * var(--s)));
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.home .yer26-report .yer26-report__btn svg {
    flex: none;
    width: 1em;
    height: 1em;
    margin-right: .6em;
}
.home .yer26-report .yer26-report__btn--solid {
    background-color: #1e2428;
    color: #fff;
}
.home .yer26-report .yer26-report__btn--outline {
    background-color: transparent;
    color: #1e2428;
}
.home .yer26-report .yer26-report__btn:hover,
.home .yer26-report .yer26-report__btn:focus {
    border-color: #1f8da1;
    background-color: #1f8da1;
    color: #fff;
}

/* Hero slide: paper background, booklet + Callan's letter left, copy right. */
.home .yer26-report--hero {
    height: 850px;
    background: #f2f4f5; /* Sanctum White, flat */
}
.home .yer26-report--hero .yer26-report__stage {
    --u: calc(min(100cqw, 1440px) / 1440);
    --s: 1;
    --hl: 58;
    max-width: 1440px;
    height: 100%;
}
.home .yer26-report--hero .yer26-report__art {
    left: calc(var(--u) * 103);
    top: calc(50% - var(--u) * 325);
    width: calc(var(--u) * 763);
}
.home .yer26-report--hero .yer26-report__copy {
    top: 50%;
    right: calc(var(--u) * 130);
    left: calc(var(--u) * 890);
    transform: translateY(-50%);
}
@container (max-width: 991px) {
    .home .yer26-report--hero .yer26-report__stage {
        --u: calc(min(100cqw, 390px) / 680);
        --s: 1.3;
        --hl: 72;
        max-width: 390px;
    }
    .home .yer26-report--hero .yer26-report__art {
        top: calc(var(--u) * 150);
        left: calc(var(--u) * 32);
        width: calc(var(--u) * 646);
    }
    .home .yer26-report--hero .yer26-report__copy {
        top: auto;
        right: calc(var(--u) * 65);
        bottom: calc(var(--u) * 215);
        left: calc(var(--u) * 65);
        transform: none;
    }
}
/* (Phone copy sits higher than the design's 120 so the buttons clear the
   slider's prev/next arrows, which are centred on the slider.) */

/* Card under the slider: report stack on charcoal, no letter. The design
   frame is scaled to fit the card's box (512px tall next to the blog card). */
.home .info-block--yer26-report {
    max-height: none;
}
.home .yer26-report--card {
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(ellipse 60% 70% at 30% 50%, #2c343a, #1e2428 70%);
}
@media (min-width: 768px) {
    .home .yer26-report--card {
        height: 100%;
        container-type: size;
    }
}
@media (max-width: 767px) {
    .home .info-block--yer26-report {
        height: auto;
    }
}
.home .yer26-report--card .yer26-report__stage {
    --u: min(100cqw / 1380, 100cqh / 776);
    --s: 1.4;
    --hl: 80;
    flex: none;
    width: calc(var(--u) * 1380);
    height: calc(var(--u) * 776);
}
.home .yer26-report--card .yer26-report__art {
    top: calc(50% - var(--u) * 289);
    left: calc(var(--u) * 37);
    width: calc(var(--u) * 639);
}
.home .yer26-report--card .yer26-report__copy {
    top: 50%;
    right: calc(var(--u) * 90);
    left: calc(var(--u) * 680);
    transform: translateY(-50%);
}
.home .yer26-report--card .yer26-report__eyebrow {
    color: #9fd3dc;
}
.home .yer26-report--card .yer26-report__title {
    color: #fff;
}
.home .yer26-report--card .yer26-report__body {
    color: rgba(255, 255, 255, .9);
}
.home .yer26-report--card .yer26-report__btn {
    border-color: #fff;
}
.home .yer26-report--card .yer26-report__btn--solid {
    background-color: #fff;
    color: #1e2428;
}
.home .yer26-report--card .yer26-report__btn--outline {
    color: #fff;
}
.home .yer26-report--card .yer26-report__btn:hover,
.home .yer26-report--card .yer26-report__btn:focus {
    border-color: #1f8da1;
    background-color: #1f8da1;
    color: #fff;
}
@container (max-width: 599px) {
    .home .yer26-report--card .yer26-report__stage {
        --u: min(100cqw / 680, 100cqh / 1080);
        --s: 1.3;
        --hl: 72;
        width: calc(var(--u) * 680);
        height: calc(var(--u) * 1080);
    }
    .home .yer26-report--card .yer26-report__art {
        top: calc(var(--u) * 61);
        left: calc(var(--u) * 27);
    }
    .home .yer26-report--card .yer26-report__copy {
        top: auto;
        right: calc(var(--u) * 65);
        bottom: calc(var(--u) * 70);
        left: calc(var(--u) * 65);
        transform: none;
    }
}
/* Phones: buttons share the full row, tighter padding so both labels fit. */
@container (max-width: 991px) {
    .home .yer26-report--hero .yer26-report__btns {
        display: grid;
    }
    .home .yer26-report--hero .yer26-report__btn {
        min-width: 0;
        padding: 0 calc(var(--u) * 14);
    }
}
@container (max-width: 599px) {
    .home .yer26-report--card .yer26-report__btns {
        display: grid;
    }
    .home .yer26-report--card .yer26-report__btn {
        min-width: 0;
        padding: 0 calc(var(--u) * 14);
    }
}

/* Year-end giving card (next to the report card): ARISE photo with a
   charcoal shade, copy from the donate slides, one Donate button. */
.home .yer26-report--give {
    background: #1e2428;
}
.home .yer26-report__photo {
    position: absolute;
    inset: 0;
}
.home .yer26-report__photo img {
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
    object-fit: cover;
    object-position: 75% 50%;
}
.home .yer26-report__photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(30, 36, 40, .94) 0%, rgba(30, 36, 40, .8) 45%, rgba(30, 36, 40, 0) 80%);
}
.home .yer26-report--give .yer26-report__stage {
    z-index: 1;
}
.home .yer26-report--give .yer26-report__copy {
    right: calc(var(--u) * 560);
    left: calc(var(--u) * 90);
}
.home .yer26-report .yer26-report__btn--give {
    display: inline-flex;
    min-width: calc(var(--u) * 240 * var(--s));
    border-color: #b85429;
    background-color: #b85429;
    color: #fff;
}
.home .yer26-report .yer26-report__btn--give:hover,
.home .yer26-report .yer26-report__btn--give:focus {
    border-color: #1f8da1;
    background-color: #1f8da1;
    color: #fff;
}
/* Arrow after the label (same stroke icon as the report download buttons). */
.home .yer26-report .yer26-report__btn--give svg {
    margin-right: 0;
    margin-left: .6em;
    transition: transform .2s ease;
}
.home .yer26-report .yer26-report__btn--give:hover svg,
.home .yer26-report .yer26-report__btn--give:focus svg {
    transform: translateX(3px);
}
@container (max-width: 599px) {
    .home .yer26-report__photo {
        bottom: 42%;
    }
    .home .yer26-report__photo img {
        object-position: 50% 30%;
    }
    .home .yer26-report__photo::after {
        background: linear-gradient(to top, #1e2428 0%, rgba(30, 36, 40, 0) 45%);
    }
    .home .yer26-report--give .yer26-report__copy {
        right: calc(var(--u) * 65);
        left: calc(var(--u) * 65);
    }
}


/* ==========================================================================
   YER26 GIVING
   Year-end donate slide (index-hero/0-yer26-3-donate.html) and the giving
   card beside the report card. Same type system as YER26 REPORT; this block
   only adds the photo, shade and copy position.
   Headlines on all year-end pieces are Sabon (self-hosted, Latin subset);
   everything else is IBM Plex Sans.
   ========================================================================== */
@font-face {
    font-family: "Sabon";
    src: url("/fonts/sabon/sabon-regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
.home .yer26-report .yer26-report__title,
.home .yer26-hero .yer26-hero__title,
.home .yer26-bar__title {
    font-family: "Sabon", Georgia, serif;
}
.home .yer26-report .yer26-report__title {
    line-height: 1.04;
}
.home .yer26-report--give .yer26-report__body,
.home .yer26-report--give-hero .yer26-report__body {
    text-wrap: balance;
}
.home .yer26-report .yer26-report__btn--give {
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* Slider: photo right, charcoal left (baked into the image), copy left. */
.home .yer26-report--give-hero {
    background: #1e2428;
}
.home .yer26-report--give-hero .yer26-report__photo img {
    object-position: 100% 35%;
}
.home .yer26-report--give-hero .yer26-report__photo::after {
    background:
        linear-gradient(to right, rgba(30, 36, 40, .96) 0%, rgba(30, 36, 40, .8) 30%, rgba(30, 36, 40, 0) 46%),
        linear-gradient(to bottom, rgba(30, 36, 40, .85) 0%, rgba(30, 36, 40, 0) 16%);
}
.home .yer26-report--give-hero .yer26-report__stage {
    z-index: 1;
}
.home .yer26-report--give-hero .yer26-report__copy {
    right: calc(var(--u) * 750);
    left: calc(var(--u) * 110);
}
.home .yer26-report--give-hero .yer26-report__eyebrow {
    color: #9fd3dc;
}
.home .yer26-report--give-hero .yer26-report__title {
    color: #fff;
}
.home .yer26-report--give-hero .yer26-report__body {
    max-width: calc(var(--u) * 440);
    color: rgba(255, 255, 255, .9);
}
@container (max-width: 991px) {
    .home .yer26-report--give-hero .yer26-report__stage {
        --hl: 64;
    }
    .home .yer26-report--give-hero .yer26-report__photo {
        bottom: 35%;
    }
    .home .yer26-report--give-hero .yer26-report__photo img {
        object-position: 50% 30%;
    }
    .home .yer26-report--give-hero .yer26-report__photo::after {
        background: linear-gradient(to top, #1e2428 0%, rgba(30, 36, 40, .96) 10%, rgba(30, 36, 40, 0) 40%);
    }
    .home .yer26-report--give-hero .yer26-report__copy {
        right: calc(var(--u) * 50);
        left: calc(var(--u) * 50);
    }
    .home .yer26-report--give-hero .yer26-report__body {
        max-width: none;
    }
    .home .yer26-report--give-hero .yer26-report__btn--give {
        display: flex;
        width: 100%;
    }
}

/* Card: woman in the denim jacket on the right, copy left. */
.home .yer26-report--give .yer26-report__photo img {
    object-position: 50% 50%;
}
.home .yer26-report--give .yer26-report__photo::after {
    background: linear-gradient(to right, rgba(30, 36, 40, .96) 0%, rgba(30, 36, 40, .88) 44%, rgba(30, 36, 40, 0) 68%);
}
.home .yer26-report--give .yer26-report__copy {
    right: calc(var(--u) * 500);
}
.home .yer26-report--give .yer26-report__body {
    max-width: calc(var(--u) * 420 * var(--s));
}
@container (max-width: 599px) {
    .home .yer26-report--give .yer26-report__stage {
        --hl: 62;
    }
    .home .yer26-report--give .yer26-report__photo {
        bottom: 0;
    }
    .home .yer26-report--give .yer26-report__photo img {
        object-position: 50% 0;
    }
    .home .yer26-report--give .yer26-report__photo::after {
        background: linear-gradient(to top, #1e2428 0%, rgba(30, 36, 40, .96) 46%, rgba(30, 36, 40, 0) 64%);
    }
    .home .yer26-report--give .yer26-report__copy {
        right: calc(var(--u) * 40);
        left: calc(var(--u) * 56);
    }
    .home .yer26-report--give .yer26-report__body {
        max-width: none;
    }
    .home .yer26-report--give .yer26-report__btn--give {
        display: flex;
        width: 100%;
    }
}

/* Report card on paper (light) so it contrasts with the charcoal giving card beside it. */
.home .yer26-report--card-paper {
    background: #f2f4f5; /* Sanctum White, flat */
}
.home .yer26-report--card-paper .yer26-report__eyebrow {
    color: #176f7d;
}
.home .yer26-report--card-paper .yer26-report__title {
    color: #1e2428;
}
.home .yer26-report--card-paper .yer26-report__body {
    color: rgba(30, 36, 40, .9);
}
.home .yer26-report--card-paper .yer26-report__btn {
    border-color: #1e2428;
}
.home .yer26-report--card-paper .yer26-report__btn--solid {
    background-color: #1e2428;
    color: #fff;
}
.home .yer26-report--card-paper .yer26-report__btn--outline {
    background-color: transparent;
    color: #1e2428;
}
.home .yer26-report--card-paper .yer26-report__btn:hover,
.home .yer26-report--card-paper .yer26-report__btn:focus {
    border-color: #1f8da1;
    background-color: #1f8da1;
    color: #fff;
}

/* ==========================================================================
   YER26 REPORT DOWNLOAD MODAL
   "Want a copy in your inbox?" pop-up (components/yer26-report-download.php).
   ========================================================================== */
.yer26-dl__modal.modal-container {
    background: rgba(30, 36, 40, 0.72);
}
.yer26-dl__modal .yer26-dl__box {
    position: relative;
    width: 92%;
    max-width: 460px;
    height: auto;
    padding: 40px 36px 28px;
    border-radius: 6px;
    background: #f2f4f5;
    color: #1e2428;
    text-align: left;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
.yer26-dl__modal .modal-content .modal-close.yer26-dl__close {
    position: absolute;
    top: 10px;
    right: 14px;
    left: auto;
    width: auto;
    height: auto;
    margin: 0;
    padding: 4px 6px;
    border: 0;
    background: none;
    color: #3a4247;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}
.yer26-dl__eyebrow {
    margin: 0 0 8px;
    font-family: "IBM Plex Sans", "Open Sans", sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #176f7d;
}
.yer26-dl__title {
    margin: 0 0 12px;
    font-family: "Sabon", Georgia, serif;
    font-size: 30px;
    font-weight: 400;
    line-height: 1.15;
    color: #1e2428;
}
.yer26-dl__body {
    margin: 0 0 20px;
    font-family: "IBM Plex Sans", "Open Sans", sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: #3a4247;
}
.yer26-dl__label {
    display: block;
    margin: 0 0 6px;
    font-family: "IBM Plex Sans", "Open Sans", sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #1e2428;
}
.yer26-dl__modal .yer26-dl__input {
    width: 100%;
    height: 48px;
    margin: 0 0 12px;
    padding: 0 14px;
    border: 1.5px solid #1e2428;
    border-radius: 4px;
    background: #fff;
    font-family: "IBM Plex Sans", "Open Sans", sans-serif;
    font-size: 16px;
    color: #1e2428;
}
.yer26-dl__modal .yer26-dl__form .yer26-dl__input {
    margin-bottom: 14px;
}
.yer26-dl__hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}
.yer26-dl__error {
    margin: -4px 0 12px;
    font-family: "IBM Plex Sans", "Open Sans", sans-serif;
    font-size: 14px;
    color: #b85429;
}
.yer26-dl__btn {
    display: block;
    width: 100%;
    height: 50px;
    border: 0;
    border-radius: 4px;
    font-family: "IBM Plex Sans", "Open Sans", sans-serif;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.yer26-dl__btn--solid {
    background-color: #1e2428;
    color: #fff;
}
.yer26-dl__btn--solid:hover,
.yer26-dl__btn--solid:focus {
    background-color: #1f8da1;
}
.yer26-dl__btn[disabled] {
    opacity: 0.6;
}
.yer26-dl__skip {
    display: block;
    margin: 14px auto 0;
    border: 0;
    background: none;
    font-family: "IBM Plex Sans", "Open Sans", sans-serif;
    font-size: 15px;
    color: #3a4247;
    text-decoration: underline;
    cursor: pointer;
}
.yer26-dl__skip:hover,
.yer26-dl__skip:focus {
    color: #1f8da1;
}
@media (max-width: 480px) {
    .yer26-dl__modal .yer26-dl__box {
        padding: 36px 22px 22px;
    }
    .yer26-dl__title {
        font-size: 26px;
    }
}

/* ==========================================================================
   HOMEPAGE TIDY (Nov 2026, Huy): one type system (Sabon headlines, IBM Plex
   body), dark #1e2428 nav + footer, Sanctum White (#f2f4f5) light blocks,
   brand-blue (#1f8da1) hovers. !important only where the Stack theme or the
   Campaign Monitor form's inline classes would otherwise win.
   ========================================================================== */
.home nav, .home nav a,
.home footer, .home footer a, .home footer p, .home footer span, .home footer h6, .home footer .type--fine-print {
    font-family: "IBM Plex Sans", "Open Sans", sans-serif !important;
}
.home nav, .home nav .bar, .home nav .bar--absolute, .home nav .bar-1,
.home nav .nav-container > div, .home nav > div {
    background: #1e2428 !important;
}
.home section.footer-2, .home footer.footer-2 { background: #1e2428 !important; }
.home footer, .home footer p, .home footer a, .home footer span { color: #d6dce1 !important; }
.home footer a:hover { color: #fff !important; }
.home footer h6, .home footer .type--uppercase, .home footer strong, .home footer b {
    font-size: 12px !important;
    letter-spacing: .18em !important;
    color: #8fc6cf !important;
}
.home footer .btn, .home footer a.btn {
    border-color: #f2f4f5 !important;
    border-radius: 2px !important;
    background: #f2f4f5 !important;
    color: #1e2428 !important;
}
.home footer .btn:hover, .home footer .btn:focus {
    border-color: #1f8da1 !important;
    background: #1f8da1 !important;
    color: #fff !important;
}
.home footer .btn .btn__text, .home footer .btn span {
    font-weight: 600 !important;
    letter-spacing: .12em !important;
    color: inherit !important;
}

/* Slider arrows: outline circles, brand blue on hover. */
.home .flickity-prev-next-button {
    width: 48px !important;
    height: 48px !important;
    margin: 0 18px;
    border: 1.5px solid rgba(30, 36, 40, .35) !important;
    border-radius: 50% !important;
    background: transparent !important;
    color: #1e2428 !important;
}
.home .flickity-prev-next-button:hover {
    border-color: #1f8da1 !important;
    background: #1f8da1 !important;
    color: #fff !important;
}
.home .play-button circle { fill: rgba(242, 244, 245, .92); }
.home .play-button path { fill: #1e2428; }

/* Newsletter block: Sanctum White, Sabon headline on one line, Plex form. */
.home #subscribe { background: #f2f4f5 !important; }
.home #subscribe .l-form-default h1 {
    font-family: "Sabon", Georgia, serif !important;
    font-size: min(34px, 6.6vw) !important; /* one line on phones too */
    font-weight: 400 !important;
    letter-spacing: -.01em !important;
    white-space: nowrap !important;
    color: #1e2428 !important;
}
.home #subscribe .l-form-default form, .home #subscribe .l-form-default form * {
    font-family: "IBM Plex Sans", sans-serif !important;
}
.home #subscribe [class*="sc-bdVaJa"] { background: transparent !important; box-shadow: none !important; }
.home #subscribe input[type=text], .home #subscribe input[type=email] {
    height: 46px !important;
    border: 1px solid #d3d9dd !important;
    border-radius: 2px !important;
    background: #fff !important;
}
.home #subscribe button, .home #subscribe input[type=submit] {
    height: 50px !important;
    border-radius: 2px !important;
    background: #1e2428 !important;
    font-weight: 600 !important;
    letter-spacing: .12em !important;
    color: #fff !important;
}

/* Report slide + card: the headline is longer than "Dear Light Bearers", so
   let it wrap onto balanced lines instead of running past the copy box. */
.home .yer26-report--hero:not(.yer26-report--give-hero) .yer26-report__title,
.home .yer26-report--card-paper .yer26-report__title {
    white-space: normal;
    text-wrap: balance;
}
.home .yer26-report--hero:not(.yer26-report--give-hero) .yer26-report__body,
.home .yer26-report--card-paper .yer26-report__body {
    text-wrap: pretty;
}
/* Phone card: the extra headline line needs room under the stacked books. */
@container (max-width: 599px) {
    .home .yer26-report--card-paper .yer26-report__stage {
        height: calc(var(--u) * 1190);
    }
}

/* The report pop-up's Stack wrapper was inline-block and left a ~26px white
   strip above the footer. */
.home .modal-instance.yer26-dl { display: block !important; height: 0 !important; }

/* Type QA (Nov 6): one family per role, real kerning, even leading.
   Footer column headings were still falling back to Open Sans. */
.home footer h5, .home footer .type--uppercase {
    font-family: "IBM Plex Sans", "Open Sans", sans-serif !important;
    font-weight: 600 !important;
}
.home footer .btn .btn__text { font-size: 12px !important; }
.home .yer26-report .yer26-report__title,
.home #subscribe .l-form-default h1 {
    font-kerning: normal;
    font-feature-settings: "kern" 1, "liga" 1;
    text-rendering: optimizeLegibility;
}
.home .yer26-report .yer26-report__title {
    line-height: 1.08;
    letter-spacing: -.01em;
}
/* Giving card: new one-sentence headline wraps onto balanced lines. */
.home .yer26-report--give:not(.yer26-report--give-hero) .yer26-report__title {
    white-space: normal;
    text-wrap: balance;
}
/* All year-end buttons in sentence case, same tracking as the report buttons. */
.home .yer26-report .yer26-report__btn--give {
    letter-spacing: 0;
    text-transform: none;
}



/* ==========================================================================
   HERO HEIGHT FIT (Huy 11-06)
   The slider fits the first screen under the nav + donate bar, so its bottom
   (and the dots) show on landing. --hero-h = screen height minus the top bars
   (105px desktop, 106px phone), never shorter than 540px or taller than the
   old 850px. Every slide uses it; the report art scales with it.
   ========================================================================== */
.home {
    --hero-h: clamp(540px, calc(100vh - 105px), 850px);
    --hero-h: clamp(540px, calc(100svh - 105px), 850px);
}
@media (max-width: 767px) {
    .home {
        --hero-h: clamp(520px, calc(100vh - 106px), 850px);
        --hero-h: clamp(520px, calc(100svh - 106px), 850px);
    }
}
.home .slides .yer26-report--hero,
.home .slides .hp-hero-section,
.home .slides .gc-hero-section-2,
.home .slides .tth-hero-section {
    height: var(--hero-h);
    min-height: var(--hero-h);
}
.home .slides .yer26-hero {
    min-height: var(--hero-h);
}
/* Desktop report slide: one design px shrinks with the height too, and the
   stage narrows with it so art and copy stay together and centred. */
.home .slides .yer26-report--hero:not(.yer26-report--give-hero) .yer26-report__stage {
    --u: min(calc(min(100cqw, 1440px) / 1440), calc(var(--hero-h) / 850));
    max-width: calc(var(--u) * 1440);
}
/* Tablet + phone report slide: copy pinned above the dots, booklet fills the
   space left above it. */
@container (max-width: 991px) {
    .home .slides .yer26-report--hero:not(.yer26-report--give-hero) .yer26-report__stage {
        --u: calc(min(100cqw, 390px) / 680);
        max-width: 390px;
    }
    .home .slides .yer26-report--hero:not(.yer26-report--give-hero) .yer26-report__art {
        top: 16px;
        left: 50%;
        width: auto;
        height: calc(var(--hero-h) - 340px);
        max-height: calc(var(--u) * 663);
        transform: translateX(-50%);
    }
    .home .slides .yer26-report--hero:not(.yer26-report--give-hero) .yer26-report__copy {
        bottom: 64px;
    }
}
/* Phones: swipe or tap the dots; the arrows sat on top of the copy. */
@media (max-width: 767px) {
    .home .slider .flickity-prev-next-button {
        display: none;
    }
}
/* Try This at Home on phones: less top padding, book shrinks with the screen
   so Buy now clears the dots. */
@media (max-width: 768px) {
    .home .slides .tth-hero-section {
        padding: 24px 30px 64px;
    }
    .home .slides .tth-hero-content {
        margin-bottom: 0;
    }
    .home .slides .tth-book-image {
        margin-bottom: 20px;
    }
    .home .slides .tth-book-image img {
        max-height: calc(var(--hero-h) - 330px);
    }
}
/* Giving slide on tablet/phone: copy pinned above the dots, photo fills what
   is left above it so the eyebrow never lands on a face. */
@container (max-width: 991px) {
    .home .slides .yer26-report--give-hero .yer26-report__copy {
        top: auto;
        bottom: 64px;
    }
    .home .slides .yer26-report--give-hero .yer26-report__photo {
        bottom: 300px;
    }
}



/* ==========================================================================
   SERIES SLIDES (Huy 11-06)
   In Heavenly Places (cinematic), Gospel Conversations S2 (split on Quiet
   Frost), Try This at Home (big scale) and the Gospel Conversations card.
   Same type system as the year-end pieces: Sabon headlines, IBM Plex Sans
   everything else, one button per slide, left-aligned copy.
   ========================================================================== */
.home .lb-slide {
    position: relative;
    height: var(--hero-h, 850px);
    overflow: hidden;
    background: #f2f4f5;
    font-family: "IBM Plex Sans", "Open Sans", sans-serif;
    color: #1e2428;
}
.home .lb-slide__photo {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
    object-fit: cover;
}
.home .lb-slide__copy {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: max(24px, calc(50% - 610px));
    width: min(520px, 40%);
    transform: translateY(-50%);
}
.home .lb-slide .lb-slide__eyebrow {
    margin: 0 0 16px;
    font-family: "IBM Plex Sans", "Open Sans", sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: #176f7d;
}
.home .lb-slide .lb-slide__title {
    margin: 0 0 18px;
    font-family: "Sabon", Georgia, serif;
    font-size: clamp(40px, 4.1vw, 60px);
    font-weight: 400;
    line-height: 1.06;
    letter-spacing: -.01em;
    font-kerning: normal;
    color: #1e2428;
}
.home .lb-slide .lb-slide__body {
    max-width: 25em;
    margin: 0 0 30px;
    font-family: "IBM Plex Sans", "Open Sans", sans-serif;
    font-size: 19px;
    line-height: 1.5;
    text-wrap: balance;
    color: rgba(30, 36, 40, .9);
}
.home .lb-slide .lb-slide__btn {
    display: inline-flex;
    align-items: center;
    gap: .6em;
    box-sizing: border-box;
    height: 52px;
    margin: 0;
    padding: 0 26px;
    border: 2px solid #1e2428;
    border-radius: 3px;
    background: #1e2428;
    font-family: "IBM Plex Sans", "Open Sans", sans-serif;
    font-size: 17px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    text-decoration: none;
    white-space: nowrap;
    color: #fff;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.home .lb-slide .lb-slide__btn svg {
    flex: none;
    width: .9em;
    height: .9em;
    transition: transform .2s ease;
}
.home .lb-slide .lb-slide__btn:hover,
.home .lb-slide .lb-slide__btn:focus {
    border-color: #1f8da1;
    background: #1f8da1;
    color: #fff;
}
.home .lb-slide .lb-slide__btn:hover .lb-slide__arrow,
.home .lb-slide .lb-slide__btn:focus .lb-slide__arrow {
    transform: translateX(3px);
}
/* Dark slides: white copy, white button. */
.home .lb-slide--dark {
    background: #1e2428;
}
.home .lb-slide--dark .lb-slide__eyebrow {
    color: #9fd3dc;
}
.home .lb-slide--dark .lb-slide__title {
    color: #fff;
}
.home .lb-slide--dark .lb-slide__body {
    color: rgba(255, 255, 255, .88);
}
.home .lb-slide--dark .lb-slide__btn {
    border-color: #fff;
    background: #fff;
    color: #1e2428;
}

/* In Heavenly Places: preacher on the right, charcoal fade under the copy. */
.home .lb-slide--ihp .lb-slide__photo {
    object-position: 80% 30%;
}
.home .lb-slide--ihp::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    background: linear-gradient(90deg, #1e2428 0%, rgba(30, 36, 40, .9) 30%, rgba(30, 36, 40, 0) 62%);
}

/* Gospel Conversations: set photo + centred wordmark left, copy on Quiet Frost right. */
.home .lb-slide--gc {
    background: #d9eff2;
}
.home .lb-slide__media {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 50%;
    overflow: hidden;
}
/* Desktop: anchor right so Ty's face (far right of the set photo) clears the copy panel (Huy 11-06). */
.home .lb-slide--gc .lb-slide__photo {
    object-position: 100% 50%;
}
@media (max-width: 991px) {
    .home .lb-slide--gc .lb-slide__photo {
        object-position: 45% 50%;
    }
}
/* The show's orange wash, as on its artwork. */
.home .lb-slide__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(210, 148, 97, .95) 0%, rgba(210, 148, 97, .55) 45%, rgba(146, 139, 133, .3) 100%);
}
.home .lb-slide__mark {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    width: min(72%, 460px);
    max-width: none;
    height: auto;
    margin: 0;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 2px 18px rgba(30, 36, 40, .25));
}
.home .lb-slide--gc .lb-slide__copy {
    left: calc(50% + clamp(40px, 6vw, 110px));
    width: min(480px, 38%);
}

/* Try This at Home: oversized "Home." along the bottom, book on top of it. */
.home .lb-slide__giant {
    position: absolute;
    z-index: 0;
    bottom: -.24em;
    left: max(12px, calc(50% - 640px));
    font-family: "Sabon", Georgia, serif;
    font-size: calc(var(--hero-h, 850px) * .42);
    line-height: 1;
    letter-spacing: -.02em;
    white-space: nowrap;
    color: #1e2428;
    pointer-events: none;
}
.home .lb-slide__book {
    position: absolute;
    z-index: 1;
    top: 50%;
    right: max(24px, calc(50% - 560px));
    width: auto;
    max-width: none;
    height: min(82%, 660px);
    margin: 0;
    transform: translateY(-50%) rotate(4deg);
    filter: drop-shadow(0 24px 30px rgba(30, 36, 40, .3));
}
.home .lb-slide--tth .lb-slide__copy {
    top: clamp(40px, 12%, 110px);
    transform: none;
}

/* Tablet + phone: picture on top, copy pinned above the slider dots. */
@media (max-width: 991px) {
    .home .lb-slide__copy,
    .home .lb-slide--gc .lb-slide__copy,
    .home .lb-slide--tth .lb-slide__copy {
        top: auto;
        right: 24px;
        bottom: 64px;
        left: 24px;
        width: auto;
        max-width: 560px;
        margin: 0 auto;
        transform: none;
    }
    .home .lb-slide .lb-slide__title {
        font-size: 36px;
    }
    .home .lb-slide .lb-slide__body {
        margin-bottom: 22px;
        font-size: 16px;
    }
    .home .lb-slide .lb-slide__eyebrow {
        margin-bottom: 12px;
        font-size: 12px;
    }
    .home .lb-slide .lb-slide__btn {
        height: 48px;
        font-size: 16px;
    }
    .home .lb-slide--ihp .lb-slide__photo {
        bottom: auto;
        height: calc(100% - 330px);
        object-position: 78% 20%;
    }
    .home .lb-slide--ihp::after {
        background: linear-gradient(to top, #1e2428 330px, rgba(30, 36, 40, 0) calc(330px + 18%));
    }
    .home .lb-slide__media {
        right: 0;
        bottom: auto;
        width: 100%;
        height: calc(100% - 330px);
    }
    .home .lb-slide__mark {
        width: min(70%, 320px);
    }
    .home .lb-slide__giant {
        top: -.08em;
        bottom: auto;
        left: 50%;
        font-size: 46vw;
        color: #dfe4e7;
        transform: translateX(-50%);
    }
    .home .lb-slide__book {
        top: 24px;
        right: auto;
        left: 50%;
        height: calc(100% - 350px);
        transform: translateX(-50%) rotate(4deg);
    }
}

/* Gospel Conversations card (Huy 11-06, "cinematic" card): set photo, charcoal fade
   from the bottom, left-aligned wordmark + eyebrow, round white play button. */
.home .lb-gc-card {
    position: relative;
    display: block;
    height: 100%;
    min-height: 420px;
    overflow: hidden;
    background: #1e2428;
    text-decoration: none;
}
.home .lb-gc-card__photo {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
    object-fit: cover;
    object-position: 55% 30%;
    filter: saturate(.75);
}
.home .lb-gc-card::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    background: linear-gradient(0deg, #1e2428 0%, rgba(30, 36, 40, .85) 38%, rgba(30, 36, 40, 0) 72%);
}
.home .lb-gc-card__foot {
    position: absolute;
    z-index: 2;
    right: 44px;
    bottom: 40px;
    left: 44px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}
.home .lb-gc-card__mark {
    display: block;
    width: 300px;
    max-width: 100%;
    height: auto;
    margin: 0 0 14px;
}
.home .lb-gc-card__eyebrow {
    display: block;
    margin: 0;
    font-family: "IBM Plex Sans", "Open Sans", sans-serif;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: #9fd3dc;
}
.home .lb-gc-card__play {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #fff;
    color: #1e2428;
    transition: background-color .2s ease, color .2s ease;
}
.home .lb-gc-card__play svg {
    width: 18px;
    height: 18px;
    margin-left: 3px;
}
.home .lb-gc-card:hover .lb-gc-card__play,
.home .lb-gc-card:focus .lb-gc-card__play {
    background: #1f8da1;
    color: #fff;
}
@media (max-width: 767px) {
    .home .lb-gc-card {
        height: auto;
        min-height: 0;
        aspect-ratio: 4 / 3.4;
    }
    .home .lb-gc-card__foot {
        right: 24px;
        bottom: 28px;
        left: 24px;
    }
    .home .lb-gc-card__mark {
        width: 220px;
        margin-bottom: 10px;
    }
    .home .lb-gc-card__play {
        width: 52px;
        height: 52px;
    }
}

/* Readability pass: every year-end body balances its lines (no one-word last
   lines) and stays near 45-60 characters a line. */
.home .yer26-report .yer26-report__body {
    text-wrap: balance;
}
.home .yer26-report--hero:not(.yer26-report--give-hero) .yer26-report__body {
    max-width: calc(var(--u) * 470 * var(--s));
}
/* Top bar on phones: one line ("by Dec. 31"), button tightened to fit. */
@media (max-width: 767px) {
    .home .yer26-bar__message {
        font-size: 13px;
        white-space: nowrap;
    }
    .home .yer26-bar__btn {
        padding: 0 10px;
        letter-spacing: .08em;
    }
}

/* Buttons (Huy 11-06): black on light slides, white on dark slides and cards; hover = Harbor Teal.
   The giving slide's rust button turns white (it sits on a dark photo). */
.home .yer26-report .yer26-report__btn--give {
    border-color: #fff;
    background-color: #fff;
    color: #1e2428;
}
.home .yer26-report .yer26-report__btn--give:hover,
.home .yer26-report .yer26-report__btn--give:focus {
    border-color: #1f8da1;
    background-color: #1f8da1;
    color: #fff;
}

/* In Heavenly Places, desktop (Huy 11-06): Ty in the right third, "exploring Ephesians." on one line. */
@media (min-width: 992px) {
    .home .lb-slide--ihp {
        overflow: hidden;
    }
    .home .lb-slide--ihp .lb-slide__photo {
        left: 22%;
        object-position: 50% 30%;
    }
    .home .lb-slide--ihp::after {
        background: linear-gradient(90deg, #1e2428 0%, #1e2428 34%, rgba(30, 36, 40, .9) 50%, rgba(30, 36, 40, 0) 64%);
    }
    .home .lb-slide--ihp .lb-slide__copy {
        width: min(640px, 46%);
    }
    .home .lb-slide--ihp .lb-slide__title {
        white-space: nowrap;
    }
}

/* GC card sits beside the newsletter block, which runs taller (~556px): stretch the card to match (Huy 11-06, "fix the gap"). */
@media (min-width: 768px) {
    .home .row:has(> .info-block .lb-gc-card) {
        display: flex;
        flex-wrap: wrap;
    }
    .home .row:has(> .info-block .lb-gc-card)::before,
    .home .row:has(> .info-block .lb-gc-card)::after {
        display: none;
    }
    .home .info-block--yer26-report:has(.lb-gc-card) {
        height: auto;
    }
}

/* In Heavenly Places, phones: Ty to the right, soft charcoal edge on the left. */
@media (max-width: 991px) {
    .home .lb-slide--ihp {
        overflow: hidden;
    }
    .home .lb-slide--ihp .lb-slide__photo {
        left: 22%;
        width: 78%;
        object-position: 74% 20%;
    }
    .home .lb-slide--ihp::after {
        background:
            linear-gradient(to top, #1e2428 330px, rgba(30, 36, 40, 0) calc(330px + 18%)),
            linear-gradient(90deg, #1e2428 22%, rgba(30, 36, 40, 0) 40%);
    }
    .home .lb-slide--ihp .lb-slide__title {
        font-size: min(36px, 9.2vw);
        white-space: nowrap;
    }
}

/* QA 11-06 (Huy): Ty's full arm on phones. */
@media (max-width: 991px) {
    .home .lb-slide--ihp .lb-slide__photo {
        left: 0;
        width: 100%;
        object-position: 44% 20%;
    }
    .home .lb-slide--ihp::after {
        background:
            linear-gradient(to top, #1e2428 330px, rgba(30, 36, 40, 0) calc(330px + 18%)),
            linear-gradient(90deg, rgba(30, 36, 40, .8) 0%, rgba(30, 36, 40, .6) 22%, rgba(30, 36, 40, 0) 32%);
    }
}

/* TOP BAR DROP + CLOSE (Huy 11-06): the donate bar drops down under the nav on
   load and has a close X. Closed = gone for the visit (components/yer26-top-bars.php),
   and the slider takes back the space. */
.home .yer26-bars__drop {
    display: grid;
    grid-template-rows: 1fr;
    animation: yer26-bar-drop .7s cubic-bezier(.2, .8, .2, 1) .4s both;
}
.home .yer26-bars__inner {
    position: relative;
    min-height: 0;
    overflow: hidden;
}
.home .yer26-bars__inner > .yer26-bar {
    animation: yer26-bar-slide .7s cubic-bezier(.2, .8, .2, 1) .4s both;
}
@keyframes yer26-bar-drop {
    from { grid-template-rows: 0fr; }
    to { grid-template-rows: 1fr; }
}
@keyframes yer26-bar-slide {
    from { transform: translateY(-100%); }
    to { transform: none; }
}
@keyframes yer26-bar-lift {
    from { grid-template-rows: 1fr; }
    to { grid-template-rows: 0fr; }
}
.home .yer26-bars.is-closing .yer26-bars__drop {
    animation: yer26-bar-lift .35s ease-in both;
}
.home .yer26-bars.is-closed .yer26-bars__drop {
    display: none;
}
.home:has(.yer26-bars.is-closed) {
    --hero-h: clamp(540px, calc(100vh - 57px), 850px);
    --hero-h: clamp(540px, calc(100svh - 57px), 850px);
}
.home .yer26-bar__close {
    position: absolute;
    z-index: 2;
    top: 50%;
    right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #fff;
    cursor: pointer;
    transform: translateY(-50%);
    transition: background-color .2s ease;
}
.home .yer26-bar__close svg {
    width: 14px;
    height: 14px;
}
.home .yer26-bar__close:hover,
.home .yer26-bar__close:focus-visible {
    background: rgba(255, 255, 255, .18);
    outline: none;
}
@media (max-width: 767px) {
    .home:has(.yer26-bars.is-closed) {
        --hero-h: clamp(520px, calc(100vh - 50px), 850px);
        --hero-h: clamp(520px, calc(100svh - 50px), 850px);
    }
    .home .yer26-bars__inner > .yer26-bar {
        padding-right: 44px;
        padding-left: 12px;
    }
    .home .yer26-bar__close {
        right: 6px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .home .yer26-bars__drop,
    .home .yer26-bars__inner > .yer26-bar,
    .home .yer26-bars.is-closing .yer26-bars__drop {
        animation: none;
    }
}

/* Newsletter headline: stays on one line in the half-width column on tablets (QA 11-06). */
@media (min-width: 768px) and (max-width: 1199px) {
    .home #subscribe .l-form-default h1 {
        font-size: min(34px, 3.2vw) !important;
    }
}

/* Report pop-up: no one-word last lines (Huy 2026-11-06). */
.yer26-dl__title,
.yer26-dl__body,
.yer26-dl__error {
    text-wrap: pretty;
}

/* Huy 11-06 round 2: Try This at Home slide drops the giant "Home." word;
   the book cover goes oversized and bleeds off the slide instead. */
.home .lb-slide--tth {
    overflow: hidden;
}
.home .lb-slide--tth .lb-slide__book {
    top: 7%;
    right: max(-20px, calc(50% - 700px));
    height: 122%;
    transform: rotate(7deg);
    filter: drop-shadow(0 30px 40px rgba(30, 36, 40, .32));
}
@media (max-width: 991px) {
    .home .lb-slide--tth .lb-slide__book {
        top: 14px;
        right: auto;
        left: 50%;
        height: calc(100% - 345px);
        transform: translateX(-50%) rotate(7deg);
    }
}

/* Giving card: wider copy column so the body sits on 3 lines at every desktop width. */
.home .yer26-report--give .yer26-report__copy {
    right: calc(var(--u) * 400);
}
.home .yer26-report--give .yer26-report__body {
    max-width: 24em;
}
@container (max-width: 599px) {
    .home .yer26-report--give .yer26-report__copy {
        right: calc(var(--u) * 40);
    }
    .home .yer26-report--give .yer26-report__body {
        max-width: none;
    }
}

/* Huy 11-06: report + giving card buttons on one line. Both copy blocks are
   centred, so give both bodies the same 3-line height. */
@container (min-width: 600px) {
    .home .info-block--yer26-report .yer26-report .yer26-report__body {
        min-height: calc(3 * 1.4em);
    }
}
/* Tablets / small laptops (cards side by side but narrow): match the giving
   card's stage height and headline size to the report card so the buttons line up. */
@media (min-width: 768px) {
    @container (max-width: 599px) {
        .home .yer26-report--give .yer26-report__stage {
            --hl: 72;
            height: calc(var(--u) * 1190);
        }
    }
}

/* IHP slide photo: speaker teaching Ephesians 3:17-19 (Huy 11-06).
   Photo box starts at 22% but was 100% wide, so its right side ran off the slide. */
@media (min-width: 992px) {
    .home .lb-slide--ihp .lb-slide__photo {
        width: 78%;
        object-position: 75% 40%;
    }
}
@media (max-width: 991px) {
    .home .lb-slide--ihp .lb-slide__photo {
        object-position: 62% 30%;
    }
}

/* Huy 11-06 (Anneliese QA): Try This at Home copy centred like every other slide on desktop. */
@media (min-width: 992px) {
    .home .lb-slide--tth .lb-slide__copy {
        top: 50%;
        transform: translateY(-50%);
    }
}

/* TOP BAR ON PHONES (Huy QA 11-06): the text arrow sat low and small, and the
   button ran into the close X on phones under 390px. Arrow is now the same SVG
   as the slide buttons (centred on the caps); spacing evened out. */
.home .yer26-bar__arrow {
    flex-shrink: 0;
    width: 1.15em;
    height: 1.15em;
    margin-left: .5em;
    transition: transform .2s ease;
}
.home .yer26-bar--donate:hover .yer26-bar__arrow,
.home .yer26-bar--donate:focus .yer26-bar__arrow {
    transform: translateX(2px);
}
@media (max-width: 767px) {
    .home .yer26-bars__inner > .yer26-bar {
        gap: 12px;
        padding-right: 40px;
        padding-left: 14px;
    }
    .home .yer26-bar__btn {
        height: 34px;
        padding: 0 11px 0 13px;
        letter-spacing: .06em;
    }
    .home .yer26-bar__arrow {
        width: 13px;
        height: 13px;
        margin-left: 5px;
    }
    .home .yer26-bar__close {
        right: 4px;
    }
}
@media (max-width: 389px) {
    .home .yer26-bars__inner > .yer26-bar {
        gap: 10px;
        padding-left: 12px;
    }
    .home .yer26-bar__message {
        font-size: 12px;
    }
    .home .yer26-bar__btn {
        padding: 0 9px 0 11px;
        letter-spacing: .04em;
    }
}