/* =========================================
   SUPPORT — DISTINCT COLOUR SYSTEM
========================================= */

.wsf-support {

    --support-green:
        #12201b;

    --support-green-dark:
        #09120f;

    --support-green-soft:
        #40564a;

    --support-sage:
        #7f9183;

    --support-ivory:
        #eee4d1;

    --support-ivory-light:
        #f7f0e4;

    --support-ink:
        #1e2621;

    --support-copper:
        #a86f4d;

    --support-copper-light:
        #c8946d;

    --support-line:
        rgba(168,111,77,.28);

    background:
        var(--support-ivory);

    color:
        var(--support-ink);

}


/* =========================================
   HERO
========================================= */

.support-hero {

    padding:
        clamp(5rem, 9vw, 8rem)
        1.5rem
        clamp(4.5rem, 8vw, 7rem);

    background:
        radial-gradient(
            circle at 72% 30%,
            rgba(96,122,105,.24),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #1b3028,
            var(--support-green-dark)
        );

    color:
        var(--support-ivory-light);

}


.support-hero__inner {

    width:
        min(1050px, 100%);

    margin:
        0 auto;

}


.support-eyebrow {

    margin:
        0;

    font-size:
        .68rem;

    letter-spacing:
        .34em;

    color:
        var(--support-copper-light);

}


.support-hero h1 {

    margin:
        1rem 0
        0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(4rem, 9vw, 7.5rem);

    line-height:
        .88;

    font-weight:
        400;

}


.support-lead {

    max-width:
        650px;

    margin:
        2rem 0
        0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(1.1rem, 2.3vw, 1.45rem);

    line-height:
        1.6;

    color:
        rgba(247,240,228,.78);

}


.support-rule {

    width:
        90px;

    height:
        1px;

    margin:
        2.6rem 0;

    background:
        var(--support-copper-light);

}


.support-hero blockquote {

    max-width:
        760px;

    margin:
        0;

    padding:
        0;

    border:
        0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(1.35rem, 3vw, 2rem);

    line-height:
        1.5;

    font-style:
        italic;

}


.support-reference {

    margin:
        1.1rem 0
        0;

    font-size:
        .66rem;

    letter-spacing:
        .28em;

    color:
        var(--support-copper-light);

}


/* =========================================
   INTRODUCTION
========================================= */

.support-introduction {

    padding:
        clamp(4rem, 8vw, 7rem)
        1.5rem;

}


.support-introduction__inner {

    width:
        min(820px, 100%);

    margin:
        0 auto;

}


.support-section-label {

    margin:
        0;

    font-size:
        .67rem;

    letter-spacing:
        .31em;

    color:
        var(--support-copper);

}


.support-introduction h2,
.support-principle h2 {

    margin:
        .8rem 0
        0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(2.3rem, 5vw, 4rem);

    line-height:
        1;

    font-weight:
        400;

}


.support-introduction__lead {

    margin:
        1.8rem 0
        0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(1.2rem, 2.5vw, 1.55rem);

    line-height:
        1.7;

}


.support-introduction__inner > p:last-child {

    margin:
        1.4rem 0
        0;

    line-height:
        1.8;

    color:
        #536057;

}


/* =========================================
   SUPPORT OPTIONS
========================================= */

.support-options {

    padding:
        clamp(4rem, 8vw, 7rem)
        1.5rem;

    background:
        #172720;

}


.support-options__inner {

    width:
        min(1180px, 100%);

    margin:
        0 auto;

    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0,1fr));

    gap:
        1px;

    background:
        rgba(238,228,209,.14);

    border:
        1px solid
        rgba(238,228,209,.14);

}


.support-option {

    padding:
        clamp(2.5rem, 5vw, 4.5rem);

    background:
        #12201b;

    color:
        var(--support-ivory-light);

}


.support-option--gift {

    background:
        #1a2923;

}


.support-option__number {

    margin:
        0;

    font-size:
        .65rem;

    letter-spacing:
        .28em;

    color:
        var(--support-copper-light);

}


.support-option__label {

    margin:
        2rem 0
        0;

    font-size:
        .65rem;

    letter-spacing:
        .28em;

    color:
        var(--support-sage);

}


.support-option h2 {

    margin:
        .8rem 0
        0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(2.5rem, 5vw, 4.3rem);

    line-height:
        .98;

    font-weight:
        400;

}


.support-price {

    display:
        flex;

    align-items:
        baseline;

    gap:
        .7rem;

    margin-top:
        2.5rem;

}


.support-price strong {

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(3.2rem, 6vw, 5rem);

    font-weight:
        400;

    color:
        var(--support-copper-light);

}


.support-price span {

    font-size:
        .68rem;

    letter-spacing:
        .2em;

    color:
        var(--support-sage);

}


.support-gift-mark {

    margin-top:
        3rem;

    font-size:
        2.4rem;

    color:
        var(--support-copper-light);

}


.support-option__description {

    max-width:
        470px;

    margin:
        2rem 0
        0;

    line-height:
        1.7;

    color:
        rgba(247,240,228,.76);

}


.support-button {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        2rem;

    margin-top:
        2.4rem;

    padding:
        1rem 1.2rem;

    border:
        1px solid
        rgba(200,148,109,.75);

    text-decoration:
        none;

    font-size:
        .67rem;

    letter-spacing:
        .18em;

    color:
        var(--support-copper-light);

}


.support-button span {

    font-size:
        1rem;

}


.support-button:hover {

    background:
        rgba(200,148,109,.08);

}


.support-option__note {

    margin:
        1.1rem 0
        0;

    font-size:
        .8rem;

    line-height:
        1.5;

    color:
        rgba(247,240,228,.42);

}


/* =========================================
   SCRIPTURE
========================================= */

.support-scripture {

    padding:
        clamp(5rem, 9vw, 8rem)
        1.5rem;

    background:
        var(--support-ivory);

}


.support-scripture__inner {

    width:
        min(850px, 100%);

    margin:
        0 auto;

    text-align:
        center;

}


.support-scripture__mark {

    color:
        var(--support-copper);

}


.support-scripture blockquote {

    margin:
        1.5rem 0
        0;

    padding:
        0;

    border:
        0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(2rem, 5vw, 3.7rem);

    line-height:
        1.2;

    font-style:
        italic;

}


.support-scripture p {

    margin:
        1.4rem 0
        0;

    font-size:
        .66rem;

    letter-spacing:
        .28em;

    color:
        var(--support-copper);

}


/* =========================================
   PRINCIPLE
========================================= */

.support-principle {

    padding:
        clamp(4rem, 8vw, 7rem)
        1.5rem;

    background:
        #ded5c3;

}


.support-principle__inner {

    width:
        min(820px,100%);

    margin:
        0 auto;

}


.support-principle__inner > p:not(.support-section-label) {

    margin:
        1.6rem 0
        0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(1.05rem,2vw,1.22rem);

    line-height:
        1.8;

    color:
        #445148;

}


/* =========================================
   CLOSING
========================================= */

.support-closing {

    padding:
        clamp(4.5rem,8vw,7rem)
        1.5rem;

    text-align:
        center;

    background:
        var(--support-green-dark);

    color:
        var(--support-ivory-light);

}


.support-closing span {

    color:
        var(--support-copper-light);

}


.support-closing p {

    margin:
        1.2rem 0
        0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(1.6rem,3vw,2.3rem);

}


.support-closing small {

    display:
        block;

    margin-top:
        1.4rem;

    font-size:
        .62rem;

    letter-spacing:
        .3em;

    color:
        var(--support-sage);

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 700px) {

    .support-options__inner {

        grid-template-columns:
            1fr;

    }


    .support-hero h1 {

        font-size:
            clamp(3.6rem,17vw,5rem);

    }


    .support-option {

        padding:
            2.5rem 1.5rem
            3rem;

    }

}