/* =========================================================
   TEACHING SERIES
   ========================================================= */

.wsf-teaching-series {

    --oxblood: #160d0d;
    --oxblood-deep: #0e0909;
    --parchment: #e8dcc8;
    --copper: #a46f4f;
    --copper-light: #bd8968;
    --ink-red: #7f2f2f;

    min-height: 100vh;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(127,47,47,.20),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #1a0f10 0%,
            var(--oxblood-deep) 55%,
            #0c0909 100%
        );

    color: var(--parchment);

    overflow: hidden;
}


/* =========================================================
   INTRO
   ========================================================= */

.wsf-teaching-intro {

    position: relative;

    padding:
        clamp(76px,10vw,130px)
        24px
        75px;

    text-align: center;
}


.wsf-teaching-intro::before {

    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(164,111,79,.04),
            transparent
        );

    pointer-events: none;
}


.wsf-teaching-intro__inner {

    position: relative;
    z-index: 1;

    max-width: 900px;

    margin: 0 auto;
}


.wsf-teaching-eyebrow {

    display: block;

    margin-bottom: 18px;

    font-family:
        Arial,
        sans-serif;

    font-size: .69rem;

    letter-spacing: .34em;

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


.wsf-teaching-intro h1 {

    margin: 0;

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

    font-size:
        clamp(2.7rem,7vw,5.8rem);

    line-height: .96;

    font-weight: 400;

    letter-spacing: .04em;

    color: var(--parchment);
}


.wsf-teaching-rule {

    display: flex;

    align-items: center;
    justify-content: center;

    width: min(390px,75%);

    margin:
        31px
        auto
        29px;

    gap: 14px;
}


.wsf-teaching-rule span {

    width: 100%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(164,111,79,.78),
            transparent
        );
}


.wsf-teaching-rule i {

    font-size: .65rem;

    font-style: normal;

    color: var(--ink-red);
}


.wsf-teaching-intro__text {

    max-width: 650px;

    margin: 0 auto;

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

    font-size:
        clamp(1rem,2vw,1.2rem);

    line-height: 1.8;

    font-style: italic;

    color:
        rgba(232,220,200,.67);
}


/* =========================================================
   LIBRARY
   ========================================================= */

.wsf-series-library {

    width:
        min(1160px,100%);

    margin: 0 auto;

    padding:
        5px
        20px
        120px;
}


.wsf-series-library__header {

    max-width: 700px;

    margin:
        0
        auto
        55px;

    text-align: center;
}


.wsf-series-library__eyebrow {

    display: block;

    margin-bottom: 16px;

    font-family:
        Arial,
        sans-serif;

    font-size: .67rem;

    letter-spacing: .31em;

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


.wsf-series-library__header h2 {

    margin: 0;

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

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

    font-weight: 400;

    letter-spacing: .05em;

    color: var(--parchment);
}


.wsf-series-library__rule {

    display: flex;

    align-items: center;
    justify-content: center;

    width: 220px;

    margin:
        24px
        auto;

    gap: 10px;
}


.wsf-series-library__rule span {

    flex: 1;

    height: 1px;

    background:
        rgba(164,111,79,.38);
}


.wsf-series-library__rule i {

    font-size: .42rem;

    font-style: normal;

    color: var(--ink-red);
}


.wsf-series-library__header p {

    max-width: 580px;

    margin: 0 auto;

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

    font-size: 1rem;

    line-height: 1.75;

    font-style: italic;

    color:
        rgba(232,220,200,.57);
}


/* =========================================================
   SHELF
   ========================================================= */

.wsf-series-shelf {

    display: grid;

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

    gap: 28px;

    position: relative;
}


.wsf-series-shelf::after {

    content: "";

    position: absolute;

    left: -1%;
    right: -1%;
    bottom: -16px;

    height: 16px;

    background:
        linear-gradient(
            180deg,
            #71473c,
            #2a1714
        );

    border-top:
        1px solid
        rgba(203,155,104,.28);

    box-shadow:
        0 18px 30px
        rgba(0,0,0,.48);
}


/* =========================================================
   LEATHER VOLUME
   ========================================================= */

.wsf-series-volume {

    position: relative;

    display: block;

    min-height: 560px;

    min-width: 0;

    text-decoration: none;

    color: inherit;

    transition:
        transform .35s ease,
        filter .35s ease;
}


.wsf-series-volume:hover {

    transform:
        translateY(-8px);

    filter:
        brightness(1.03);
}


/* SPINE */

.wsf-volume__spine {

    position: absolute;

    top: 16px;
    bottom: 0;
    left: 0;

    width: 26px;

    border-radius:
        4px 0 0 4px;

    z-index: 3;

    box-shadow:
        inset -1px 0 0
        rgba(255,255,255,.10),
        6px 0 14px
        rgba(0,0,0,.25);
}


.wsf-volume__spine::before,
.wsf-volume__spine::after {

    content: "";

    position: absolute;

    left: 3px;
    right: 3px;

    height: 18px;

    border-radius: 10px;

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.14),
        inset 0 -1px 0
        rgba(0,0,0,.24);
}


.wsf-volume__spine::before {
    top: 82px;
}


.wsf-volume__spine::after {
    bottom: 92px;
}


/* COVER */

.wsf-volume__cover {

    position: relative;

    min-height: 560px;

    margin-left: 18px;

    padding:
        16px
        16px
        18px;

    border-radius:
        4px 7px 7px 4px;

    overflow: hidden;

    box-shadow:
        0 24px 42px
        rgba(0,0,0,.38),
        inset 0 1px 0
        rgba(255,255,255,.05);
}


.wsf-volume__cover::before {

    content: "";

    position: absolute;

    inset: 0;

    background:

        radial-gradient(
            circle at 18% 14%,
            rgba(255,255,255,.06),
            transparent 18%
        ),

        radial-gradient(
            circle at 82% 22%,
            rgba(255,255,255,.035),
            transparent 20%
        ),

        repeating-linear-gradient(
            115deg,
            rgba(255,255,255,.015)
            0 2px,
            rgba(0,0,0,.012)
            2px 4px,
            transparent
            4px 7px
        );

    opacity: .90;

    pointer-events: none;
}


.wsf-volume__cover::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.24),
            transparent 18%,
            transparent 82%,
            rgba(0,0,0,.18)
        );

    pointer-events: none;
}


/* META */

.wsf-volume__meta {

    position: relative;

    z-index: 4;

    display: flex;

    align-items: center;
    justify-content: space-between;

    margin-bottom: 12px;

    padding:
        10px
        12px
        0;
}


.wsf-volume__number,
.wsf-volume__small {

    font-family:
        Arial,
        sans-serif;

    font-size: .66rem;

    letter-spacing: .24em;

    text-transform: uppercase;
}


.wsf-volume__diamond {

    font-size: .70rem;
}


/* EMBOSSED PANEL */

.wsf-volume__frame {

    position: relative;

    z-index: 4;

    display: flex;

    flex-direction: column;

    justify-content: center;

    min-height: 410px;

    margin:
        0
        10px;

    padding:
        38px
        34px
        34px;

    border:
        1px solid
        rgba(231,209,169,.30);

    box-shadow:
        inset 0 0 0 1px
        rgba(231,209,169,.14);
}


.wsf-volume__frame::before {

    content: "";

    position: absolute;

    inset: 14px;

    border:
        1px solid
        rgba(231,209,169,.10);

    pointer-events: none;
}


.wsf-volume__small {

    display: block;

    margin-bottom: 24px;
}


.wsf-volume__frame h3 {

    margin: 0;

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

    font-size:
        clamp(2.8rem,5vw,4.8rem);

    line-height: .92;

    font-weight: 400;

    letter-spacing: .01em;

    text-wrap: balance;
}


.wsf-volume__line {

    width: 86px;

    height: 1px;

    margin:
        28px
        0
        24px;
}


.wsf-volume__frame p {

    max-width: 360px;

    margin: 0;

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

    font-size: 1rem;

    line-height: 1.7;

    font-style: italic;
}


/* FOOTER */

.wsf-volume__footer {

    position: relative;

    z-index: 4;

    display: flex;

    align-items: center;
    justify-content: space-between;

    margin:
        16px
        10px
        0;

    padding:
        18px
        14px
        8px;

    border-top:
        1px solid
        rgba(235,215,178,.16);

    background:
        rgba(255,255,255,.025);

    font-family:
        Arial,
        sans-serif;

    font-size: .67rem;

    font-weight: 700;

    letter-spacing: .17em;

    text-transform: uppercase;
}


.wsf-volume__footer b {

    font-size: 1.25rem;

    font-weight: 400;

    transition:
        transform .25s ease;
}


.wsf-series-volume:hover
.wsf-volume__footer b {

    transform:
        translateX(6px);
}


/* =========================================================
   DIVINE HEALING
   ========================================================= */

.wsf-series-volume--healing
.wsf-volume__spine {

    background:
        linear-gradient(
            90deg,
            #120d08 0%,
            #3b2a18 32%,
            #7b5d2d 52%,
            #3a2917 74%,
            #130e08 100%
        );
}


.wsf-series-volume--healing
.wsf-volume__spine::before,

.wsf-series-volume--healing
.wsf-volume__spine::after {

    background:
        linear-gradient(
            180deg,
            rgba(205,169,97,.72),
            rgba(96,68,27,.92)
        );
}


.wsf-series-volume--healing
.wsf-volume__cover {

    background:
        radial-gradient(
            circle at 55% 22%,
            rgba(191,152,84,.15),
            transparent 28%
        ),
        linear-gradient(
            145deg,
            #3a2b1b 0%,
            #231912 40%,
            #17120d 72%,
            #0f0d0a 100%
        );

    border:
        1px solid
        rgba(198,160,92,.42);
}


.wsf-series-volume--healing
.wsf-volume__number,

.wsf-series-volume--healing
.wsf-volume__small {

    color:
        rgba(244,230,198,.66);
}


.wsf-series-volume--healing
.wsf-volume__diamond,

.wsf-series-volume--healing
.wsf-volume__footer {

    color:
        rgba(229,196,127,.78);
}


.wsf-series-volume--healing
.wsf-volume__line {

    background:
        rgba(229,196,127,.52);
}


.wsf-series-volume--healing
.wsf-volume__frame h3 {

    color: #f2e5cf;
}


.wsf-series-volume--healing
.wsf-volume__frame p {

    color:
        rgba(242,226,199,.72);
}


/* =========================================================
   SPIRIT OF PRAYER
   ========================================================= */

.wsf-series-volume--prayer
.wsf-volume__spine {

    background:
        linear-gradient(
            90deg,
            #060c12 0%,
            #182a3b 32%,
            #456887 52%,
            #172838 74%,
            #050b11 100%
        );
}


.wsf-series-volume--prayer
.wsf-volume__spine::before,

.wsf-series-volume--prayer
.wsf-volume__spine::after {

    background:
        linear-gradient(
            180deg,
            rgba(121,160,204,.72),
            rgba(32,61,94,.92)
        );
}


.wsf-series-volume--prayer
.wsf-volume__cover {

    background:
        radial-gradient(
            circle at 56% 20%,
            rgba(91,128,161,.18),
            transparent 29%
        ),
        linear-gradient(
            145deg,
            #152233 0%,
            #101924 42%,
            #0a1017 72%,
            #05090d 100%
        );

    border:
        1px solid
        rgba(91,128,161,.44);
}


.wsf-series-volume--prayer
.wsf-volume__number,

.wsf-series-volume--prayer
.wsf-volume__small {

    color:
        rgba(226,234,242,.68);
}


.wsf-series-volume--prayer
.wsf-volume__diamond,

.wsf-series-volume--prayer
.wsf-volume__footer {

    color:
        rgba(165,192,219,.80);
}


.wsf-series-volume--prayer
.wsf-volume__line {

    background:
        rgba(150,182,214,.50);
}


.wsf-series-volume--prayer
.wsf-volume__frame {

    border-color:
        rgba(166,194,220,.25);

    box-shadow:
        inset 0 0 0 1px
        rgba(166,194,220,.10);
}


.wsf-series-volume--prayer
.wsf-volume__frame::before {

    border-color:
        rgba(166,194,220,.09);
}


.wsf-series-volume--prayer
.wsf-volume__frame h3 {

    color: #eef2f6;
}


.wsf-series-volume--prayer
.wsf-volume__frame p {

    color:
        rgba(221,230,239,.72);
}


/* =========================================================
   SWIPE HINT
   ========================================================= */

.wsf-series-swipe-hint {
    display: none;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 920px) {

    .wsf-series-library {

        padding-left: 16px;
        padding-right: 16px;
    }


    .wsf-series-volume,
    .wsf-volume__cover {

        min-height: 520px;
    }


    .wsf-volume__frame {

        min-height: 380px;

        padding:
            34px
            28px
            30px;
    }

}


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

@media (max-width: 760px) {

    .wsf-teaching-intro {

        padding:
            60px
            20px
            58px;
    }


    .wsf-series-library {

        width: 100%;

        padding:
            0
            0
            85px;
    }


    .wsf-series-library__header {

        padding:
            0
            24px;

        margin-bottom: 40px;
    }


    .wsf-series-shelf {

        display: flex;

        gap: 16px;

        padding:
            0
            22px
            28px;

        overflow-x: auto;

        overflow-y: hidden;

        scroll-snap-type:
            x mandatory;

        scrollbar-width: none;

        -webkit-overflow-scrolling:
            touch;
    }


    .wsf-series-shelf::-webkit-scrollbar {
        display: none;
    }


    .wsf-series-shelf::after {
        display: none;
    }


    .wsf-series-volume {

        flex:
            0 0 82%;

        min-width: 82%;

        min-height: 500px;

        scroll-snap-align:
            start;
    }


    .wsf-volume__cover {

        min-height: 500px;
    }


    .wsf-volume__spine {

        width: 22px;
    }


    .wsf-volume__spine::before {

        top: 70px;
    }


    .wsf-volume__spine::after {

        bottom: 80px;
    }


    .wsf-volume__frame {

        min-height: 360px;

        margin:
            0
            7px;

        padding:
            28px
            22px
            24px;
    }


    .wsf-volume__frame h3 {

        font-size:
            clamp(2.5rem,10vw,3.8rem);
    }


    .wsf-volume__frame p {

        font-size: .98rem;

        line-height: 1.65;
    }


    .wsf-volume__footer {

        margin:
            12px
            7px
            0;

        padding:
            16px
            10px
            6px;

        font-size: .62rem;

        letter-spacing: .15em;
    }


    .wsf-series-swipe-hint {

        display: flex;

        align-items: center;
        justify-content: center;

        gap: 12px;

        margin-top: 4px;

        font-family:
            Arial,
            sans-serif;

        font-size: .59rem;

        letter-spacing: .20em;

        color:
            rgba(203,187,164,.48);
    }


    .wsf-series-swipe-hint span {

        width: 25px;
        height: 1px;

        background:
            rgba(164,111,79,.35);
    }

}