/*==================================================
LIBRARY SUBPAGES
Jessica Feldman
==================================================*/


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

.library-page-hero{

    padding:70px 0 65px;

    background:
        linear-gradient(
            rgba(248,248,238,.95),
            rgba(248,248,238,.95)
        ),
        url("../images/library/wood.jpg");

}

.back-to-library{

    display:inline-block;

    margin-bottom:50px;

    color:var(--deep-teal);

    text-decoration:none;

    font-size:.95rem;

    font-weight:600;

    transition:.25s;

}

.back-to-library:hover{

    color:var(--magenta);

    transform:translateX(-3px);

}


.library-page-heading{

    max-width:780px;

}

.eyebrow{

    margin:0 0 12px;

    color:var(--magenta);

    font-size:.85rem;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:.13em;

}

.library-page-heading h1{

    margin:0 0 22px;

    font-family:var(--heading-font);

    font-size:clamp(2.6rem,5vw,4.5rem);

    line-height:1.08;

    color:var(--deep-teal);

}

.library-page-heading > p:last-child{

    max-width:680px;

    margin:0;

    font-size:1.15rem;

    line-height:1.8;

    color:var(--brown);

}



/*==================================================
FEATURED READING
==================================================*/

.featured-reading{

    padding:90px 0 55px;

}

.featured-article{

    position:relative;

    width:min(900px,92%);

    margin:auto;

    display:grid;

    grid-template-columns:1fr 180px;

    align-items:center;

    gap:50px;

    padding:50px 55px;

    background:#fffdf7;

    border-radius:8px 24px 24px 8px;

    box-shadow:
        -8px 10px 0 rgba(19,96,94,.10),
        0 20px 50px rgba(0,0,0,.10);

    border-left:9px solid var(--magenta);

}

.featured-article::after{

    content:"";

    position:absolute;

    left:24px;
    right:24px;
    bottom:-7px;

    height:7px;

    background:#e7dfd0;

    border-radius:0 0 5px 5px;

}


.publication-label{

    margin:0 0 13px;

    color:var(--magenta);

    font-size:.78rem;

    font-weight:600;

    letter-spacing:.09em;

    text-transform:uppercase;

}

.featured-article h2{

    margin:0 0 20px;

    text-align:left;

    font-family:var(--heading-font);

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

    color:var(--deep-teal);

}

.article-description{

    margin-bottom:25px;

    color:var(--brown);

    line-height:1.85;

}


.article-link{

    display:inline-block;

    color:var(--deep-teal);

    font-weight:600;

    text-decoration:none;

    transition:.25s;

}

.article-link:hover{

    color:var(--magenta);

    transform:translateX(3px);

}


/* Her Tribe "book" */

.featured-book-mark{

    width:145px;

    height:190px;

    display:flex;

    align-items:center;

    justify-content:center;

    justify-self:center;

    padding:18px;

    background:var(--magenta);

    border-radius:5px 14px 14px 5px;

    box-shadow:
        inset 7px 0 0 rgba(255,255,255,.16),
        8px 10px 20px rgba(0,0,0,.15);

    transform:rotate(3deg);

}

.featured-book-mark span{

    font-family:var(--heading-font);

    font-size:1.35rem;

    line-height:1.3;

    text-align:center;

    color:var(--cream);

}



/*==================================================
READING ROOM
==================================================*/

.reading-room{

    padding:70px 0 110px;

}

.reading-room .section-heading{

    text-align:center;

    margin-bottom:55px;

}

.reading-room .section-heading h2{

    margin-bottom:15px;

}

.reading-room .section-heading p{

    max-width:620px;

    margin:auto;

    color:var(--brown);

    line-height:1.75;

}


.article-list{

    width:min(920px,92%);

    margin:auto;

    display:flex;

    flex-direction:column;

    gap:26px;

}


/* Individual article */

.article-row{

    display:grid;

    grid-template-columns:150px 1fr;

    gap:36px;

    align-items:center;

    padding:30px 36px;

    background:#fffdf8;

    border:1px solid rgba(19,96,94,.09);

    border-radius:18px;

    box-shadow:0 10px 28px rgba(0,0,0,.06);

    transition:
        transform .3s ease,
        box-shadow .3s ease;

}

.article-row:hover{

    transform:translateY(-4px);

    box-shadow:0 16px 38px rgba(0,0,0,.10);

}


/*==================================================
PUBLICATION "BOOKS"
==================================================*/

.article-publication{

    width:120px;

    height:145px;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:15px;

    border-radius:4px 12px 12px 4px;

    box-shadow:
        inset 6px 0 rgba(255,255,255,.14),
        6px 8px 15px rgba(0,0,0,.12);

    transform:rotate(-2deg);

}

.article-publication span{

    text-align:center;

    font-family:var(--heading-font);

    line-height:1.3;

}


/* Times of Israel */

.article-publication.toi{

    background:var(--deep-teal);

}

.article-publication.toi span{

    color:var(--cream);

    font-size:1.15rem;

}


/* Ask Jess */

.article-publication.jpost{

    background:var(--teal);

    transform:rotate(2deg);

}

.article-publication.jpost span{

    color:var(--deep-teal);

    font-size:1rem;

    letter-spacing:.05em;

}

.article-publication.jpost strong{

    display:block;

    margin-top:4px;

    color:var(--magenta);

    font-size:1.35rem;

}


/*==================================================
ARTICLE COPY
==================================================*/

.article-copy h3{

    margin:0 0 13px;

    font-family:var(--heading-font);

    font-size:1.55rem;

    line-height:1.3;

    color:var(--deep-teal);

}

.article-copy > p:not(.publication-label){

    margin:0 0 18px;

    color:var(--brown);

    line-height:1.75;

}



/*==================================================
RETURN TO LIBRARY
==================================================*/

.library-return{

    padding:75px 0;

    background:#efe9df;

    text-align:center;

}

.library-return p{

    margin:0 0 8px;

    color:var(--magenta);

    font-weight:600;

}

.library-return h2{

    margin:0 0 28px;

    color:var(--deep-teal);

}



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

@media(max-width:800px){

    .featured-article{

        grid-template-columns:1fr;

        gap:30px;

    }

    .featured-book-mark{

        width:120px;

        height:150px;

        justify-self:start;

    }

}



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

@media(max-width:650px){

    .library-page-hero{

        padding:45px 0 50px;

    }

    .back-to-library{

        margin-bottom:35px;

    }


    /* Featured article */

    .featured-reading{

        padding:60px 0 35px;

    }

    .featured-article{

        width:92%;

        padding:34px 28px;

        border-left-width:6px;

    }


    /* Articles */

    .reading-room{

        padding:55px 0 75px;

    }

    .article-row{

        grid-template-columns:1fr;

        gap:22px;

        padding:28px;

    }

    .article-publication{

        width:95px;

        height:115px;

    }

    .article-copy h3{

        font-size:1.35rem;

    }

}


/*==================================================
FULL ARTICLE PAGE
==================================================*/

.article-page-hero{

    padding:70px 0 55px;

    background:
        linear-gradient(
            135deg,
            rgba(22,207,191,.08),
            rgba(162,34,130,.05)
        ),
        var(--cream);

}

.article-heading{

    max-width:820px;

}

.article-heading h1{

    max-width:760px;

    margin:12px 0 14px;

    color:var(--deep-teal);

    font-size:clamp(2.6rem,5vw,4.2rem);

    line-height:1.1;

}

.article-byline{

    margin:0 0 24px;

    color:var(--magenta);

    font-weight:600;

}

.article-intro{

    max-width:680px;

    margin:0;

    color:var(--brown);

    font-family:var(--heading-font);

    font-size:1.3rem;

    line-height:1.7;

}


/*==================================================
ARTICLE PAPER
==================================================*/

.article-page{

    padding:80px 0 100px;

    background:#efe9df;

}

.article-paper{

    width:min(780px,92%);

    margin:auto;

    padding:65px 70px;

    border-radius:8px;

    background:#fffdf8;

    box-shadow:
        0 22px 50px rgba(0,0,0,.10),
        7px 8px 0 rgba(19,96,94,.07);

}

.article-paper p{

    margin:0 0 24px;

    color:var(--brown);

    font-size:1.06rem;

    line-height:1.9;

}

.article-paper h2{

    margin:58px 0 24px;

    color:var(--deep-teal);

    font-size:2rem;

    text-align:left;

}

.article-paper h2:first-of-type{

    margin-top:48px;

}


/*==================================================
ARTICLE CALLOUT
==================================================*/

.article-callout{

    margin:40px 0;

    padding:34px 38px;

    border-left:6px solid var(--teal);

    border-radius:12px;

    background:rgba(22,207,191,.08);

}

.marriage-callout{

    border-left-color:var(--magenta);

    background:rgba(162,34,130,.06);

}

.article-callout h3{

    margin:0 0 22px;

    color:var(--deep-teal);

}

.article-callout ul{

    margin:0;

    padding-left:22px;

}

.article-callout li{

    margin-bottom:18px;

    color:var(--brown);

    line-height:1.8;

}

.article-callout li:last-child{

    margin-bottom:0;

}


/*==================================================
ENDING QUOTE
==================================================*/

.article-ending-quote{

    margin:50px 0;

    padding:32px;

    border-radius:18px;

    background:var(--deep-teal);

    text-align:center;

}

.article-ending-quote p{

    margin:0;

    color:var(--cream);

    font-family:var(--heading-font);

    font-size:1.5rem;

    line-height:1.5;

}


/*==================================================
ARTICLE NAVIGATION
==================================================*/

.article-next{

    padding:80px 0;

    text-align:center;

    background:var(--cream);

}

.article-next-label{

    margin:0 0 8px;

    color:var(--magenta);

    font-size:.8rem;

    font-weight:700;

    letter-spacing:.1em;

    text-transform:uppercase;

}

.article-next h2{

    margin-bottom:28px;

    color:var(--deep-teal);

}

.article-next-links{

    display:flex;

    justify-content:center;

    gap:16px;

    flex-wrap:wrap;

}


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

@media(max-width:650px){

    .article-page-hero{

        padding:50px 0;

    }

    .article-page{

        padding:50px 0 70px;

    }

    .article-paper{

        width:94%;

        padding:38px 26px;

    }

    .article-paper h2{

        margin-top:45px;

        font-size:1.7rem;

    }

    .article-callout{

        padding:28px 24px;

    }

}

/*==================================================
PODCAST PAGE
==================================================*/

.podcast-hero{

    padding-bottom:85px;

}

.podcast-heading{

    display:grid;

    grid-template-columns:300px 1fr;

    gap:65px;

    align-items:center;

}

.podcast-cover{

    display:flex;

    justify-content:center;

}

.podcast-cover img{

    width:260px;

    height:auto;

    max-width:100%;

    filter:
        drop-shadow(0 10px 8px rgba(0,0,0,.13))
        drop-shadow(0 24px 22px rgba(0,0,0,.10));

}

.podcast-heading-copy h1{

    margin:0 0 22px;

    color:var(--deep-teal);

    font-size:clamp(2.6rem,5vw,4.5rem);

    line-height:1.05;

}

.podcast-heading-copy > p:not(.eyebrow){

    max-width:650px;

    margin-bottom:28px;

    color:var(--brown);

    font-size:1.12rem;

    line-height:1.8;

}


/*==================================================
ABOUT PODCAST
==================================================*/

.podcast-about{

    padding:95px 0;

    text-align:center;

}

.podcast-about p{

    max-width:720px;

    margin:0 auto 22px;

    color:var(--brown);

    line-height:1.9;

}


/*==================================================
LISTENING ROOM
==================================================*/

.listening-room{

    padding:100px 0;

    background:var(--deep-teal);

}

.listening-room .section-heading h2,
.listening-room .section-heading p{

    color:var(--cream);

}

.listening-card{

    width:min(780px,92%);

    margin:55px auto 0;

    display:grid;

    grid-template-columns:120px 1fr;

    gap:35px;

    align-items:center;

    padding:40px;

    border-radius:22px;

    background:var(--cream);

    box-shadow:0 18px 42px rgba(0,0,0,.18);

}

.listening-icon{

    width:95px;

    height:95px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:var(--teal);

    color:var(--deep-teal);

    font-family:var(--heading-font);

    font-size:2.2rem;

}

.listening-copy h3{

    margin-bottom:12px;

    color:var(--deep-teal);

}

.listening-copy p{

    margin-bottom:18px;

    color:var(--brown);

    line-height:1.8;

}


/*==================================================
PODCAST NOTE
==================================================*/

.podcast-note{

    padding:85px 0;

    text-align:center;

    background:
        linear-gradient(
            135deg,
            rgba(22,207,191,.08),
            rgba(162,34,130,.06)
        ),
        var(--cream);

}

.podcast-note h2{

    margin-bottom:18px;

    color:var(--deep-teal);

}

.podcast-note p{

    max-width:640px;

    margin:auto;

    color:var(--brown);

    line-height:1.8;

}


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

@media(max-width:700px){

    .podcast-heading{

        grid-template-columns:1fr;

        gap:35px;

    }

    .podcast-cover{

        justify-content:flex-start;

    }

    .podcast-cover img{

        width:190px;

    }

    .listening-card{

        grid-template-columns:1fr;

        padding:30px;

    }

}

/*==================================================
VIDEOS PAGE
==================================================*/

.video-library{

    padding:95px 0 110px;

    background:var(--cream);

}


/*==================================================
VIDEO GRID
==================================================*/

.video-grid{

    width:min(1050px,94%);

    margin:60px auto 0;

    display:grid;

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

    gap:34px;

}


/* First video gets a little more importance */

.video-card:first-child{

    grid-column:1 / -1;

}


/*==================================================
VIDEO CARD
==================================================*/

.video-card{

    overflow:hidden;

    border-radius:22px;

    background:#fffdf8;

    box-shadow:var(--shadow);

    border-bottom:5px solid var(--teal);

}

.video-card:nth-child(2){

    border-bottom-color:var(--magenta);

}

.video-card:nth-child(3){

    border-bottom-color:var(--deep-teal);

}


/*==================================================
VIDEO PLAYER
==================================================*/

.video-frame{

    position:relative;

    width:100%;

    aspect-ratio:16 / 9;

    overflow:hidden;

    background:#111;

}

.video-frame iframe{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    border:0;

}


/*==================================================
VIDEO COPY
==================================================*/

.video-copy{

    padding:30px;

}

.video-label{

    margin:0 0 10px;

    color:var(--magenta);

    font-size:.75rem;

    font-weight:700;

    letter-spacing:.1em;

    text-transform:uppercase;

}

.video-copy h3{

    margin:0 0 12px;

    color:var(--deep-teal);

    font-size:1.45rem;

}

.video-copy p:last-child{

    margin:0;

    color:var(--brown);

    line-height:1.75;

}


/*==================================================
VIDEO ENDING
==================================================*/

.video-ending{

    padding:85px 0;

    text-align:center;

    background:var(--deep-teal);

}

.video-ending h2{

    margin-bottom:18px;

    color:var(--teal);

}

.video-ending p{

    max-width:620px;

    margin:auto;

    color:var(--cream);

    line-height:1.8;

}


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

@media(max-width:750px){

    .video-grid{

        grid-template-columns:1fr;

    }

    .video-card:first-child{

        grid-column:auto;

    }

}

@media(max-width:500px){

    .video-copy{

        padding:24px;

    }

}

/*==================================================
REFLECTIONS BINDER
REAL TWO-SIDED PAGE TURN
==================================================*/


.reflections-page{

    min-height:100vh;

    padding:
        70px
        0
        110px;

    background:

        radial-gradient(
            circle at 12% 20%,
            rgba(22,207,191,.08),
            transparent 24%
        ),

        radial-gradient(
            circle at 88% 78%,
            rgba(162,34,130,.06),
            transparent 22%
        ),

        var(--cream);

}


/*==================================================
PAGE HEADING
==================================================*/

.reflections-heading{

    max-width:760px;

    margin-bottom:42px;

}


.reflections-heading h1{

    margin:
        0
        0
        16px;

    font-family:
        var(--heading-font);

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

    line-height:1.05;

    color:
        var(--deep-teal);

}


.reflections-heading > p:last-child{

    max-width:620px;

    margin:0;

    color:
        var(--brown);

    font-size:1.08rem;

    line-height:1.75;

}


/*==================================================
WHOLE OPEN BINDER
==================================================*/

.reflection-binder{

    position:relative;

    width:
        min(
            1080px,
            96%
        );

    min-height:660px;

    margin:
        0
        auto;

    border-radius:24px;

    background:

        linear-gradient(
            90deg,
            #0f5653 0%,
            #13605e 46%,
            #0c4f4d 49.5%,
            #0b4846 50%,
            #0c4f4d 50.5%,
            #13605e 54%,
            #0f5653 100%
        );

    box-shadow:

        0 30px 65px
        rgba(0,0,0,.20),

        inset
        0 1px 0
        rgba(255,255,255,.18);

    perspective:2200px;

    overflow:visible;

}


/*==================================================
LEFT INSIDE COVER
==================================================*/

.binder-inside-cover{

    position:absolute;

    z-index:3;

    top:0;
    bottom:0;
    left:0;

    width:50%;

    padding:
        72px
        68px
        58px;

    color:
        var(--cream);

    transition:
        opacity .35s ease;

}


.binder-inside-cover.is-covered{

    opacity:.18;

}


.binder-label{

    width:
        min(
            340px,
            100%
        );

    padding:
        34px
        32px
        30px;

    border:
        1px solid
        rgba(248,248,238,.22);

    border-radius:16px;

    background:
        rgba(248,248,238,.08);

}


.binder-small-label{

    display:block;

    margin-bottom:12px;

    color:
        var(--teal);

    font-size:.72rem;

    font-weight:600;

    letter-spacing:.14em;

}


.binder-label h2{

    margin:
        0
        0
        14px;

    color:
        var(--cream);

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

}


.binder-label p{

    margin:0;

    color:
        rgba(248,248,238,.88);

    line-height:1.75;

}


.binder-note{

    position:absolute;

    left:68px;
    right:55px;
    bottom:60px;

    display:flex;

    align-items:flex-start;

    gap:12px;

}


.binder-note span{

    color:
        var(--teal);

}


.binder-note p{

    margin:0;

    color:
        rgba(248,248,238,.80);

    font-size:.92rem;

    line-height:1.6;

}


/*==================================================
PAGE STAGE
==================================================*/

.binder-page-stage{

    position:relative;

    z-index:20;

    width:100%;

    height:590px;

    padding-top:30px;

    perspective:2200px;

    transform-style:preserve-3d;

}


/*==================================================
ONE PHYSICAL SHEET

The sheet itself begins on the RIGHT HALF.

Its hinge is at the center of the binder.

When rotated -180deg, it lands on the LEFT.
==================================================*/

.reflection-sheet{

    position:absolute;

    top:34px;

    left:50%;

    width:
        calc(
            50% - 34px
        );

    height:520px;

    transform-origin:
        left center;

    transform-style:
        preserve-3d;

    transition:

        transform
        .82s
        cubic-bezier(
            .55,
            .05,
            .25,
            1
        );

}


/*==================================================
FRONT AND BACK
==================================================*/

.reflection-sheet-face{

    position:absolute;

    inset:0;

    overflow:hidden;

    border-radius:
        2px
        10px
        10px
        2px;

    backface-visibility:hidden;

    -webkit-backface-visibility:hidden;

    box-shadow:

        0
        12px
        22px
        rgba(0,0,0,.13);

}


/* FRONT */

.reflection-sheet-front{

    z-index:2;

    padding:
        46px
        44px
        40px;

    background:
        var(--cream);

    border:
        1px solid
        rgba(77,59,52,.08);

}


/* BACK */

.reflection-sheet-back{

    transform:
        rotateY(180deg);

    padding:
        38px;

    background:

        linear-gradient(
            rgba(248,248,238,.92),
            rgba(248,248,238,.92)
        ),

        var(--cream);

    border:
        1px solid
        rgba(77,59,52,.07);

}


/*==================================================
TURNED SHEET

This rotates the entire physical sheet
to the left.
==================================================*/

.reflection-sheet.is-turned{

    transform:
        rotateY(-180deg);

}


/*==================================================
PAGE SHADOW WHILE MOVING
==================================================*/

.reflection-sheet:not(.is-turned){

    filter:
        drop-shadow(
            0
            6px
            4px
            rgba(0,0,0,.05)
        );

}


/*==================================================
FRONT PAGE COPY
==================================================*/

.reflection-page-type{

    position:relative;

    z-index:3;

    margin:0;

    color:
        var(--magenta);

    font-size:.72rem;

    font-weight:700;

    text-transform:
        uppercase;

    letter-spacing:.11em;

}


.reflection-sheet-front h2{

    position:relative;

    z-index:3;

    max-width:350px;

    margin:
        10px
        0
        18px;

    color:
        var(--deep-teal);

    font-family:
        var(--heading-font);

    font-size:2.12rem;

    line-height:1.12;

    text-align:left;

}


.reflection-page-description{

    position:relative;

    z-index:3;

    max-width:355px;

    margin:
        0
        0
        27px;

    color:
        var(--brown);

    font-size:.95rem;

    line-height:1.7;

}


.reflection-open-link{

    position:relative;

    z-index:5;

    display:inline-block;

    padding-bottom:3px;

    color:
        var(--deep-teal);

    border-bottom:
        2px solid
        var(--teal);

    font-weight:700;

    text-decoration:none;

    transition:

        color .2s ease,
        transform .2s ease;

}


.reflection-open-link:hover{

    color:
        var(--magenta);

    transform:
        translateX(3px);

}


/*==================================================
BACK OF PAGE
==================================================*/

.sheet-back-inner{

    position:relative;

    width:100%;

    height:100%;

    overflow:hidden;

}


/* faint logo */

.sheet-back-logo{

    position:absolute;

    left:50%;

    top:44%;

    width:115px;

    opacity:.075;

    transform:
        translate(
            -50%,
            -50%
        );

    filter:
        grayscale(.25);

}


/* faint ink showing through */

.sheet-back-ghost{

    position:absolute;

    inset:
        36px
        34px;

    opacity:.075;

    transform:
        scaleX(-1);

}


.sheet-back-ghost-line{

    height:6px;

    margin-bottom:13px;

    border-radius:999px;

    background:
        var(--brown);

}


.sheet-back-ghost-line.short{

    width:44%;

}


.sheet-back-ghost-line.medium{

    width:68%;

}


.sheet-back-ghost-line.long{

    width:88%;

}


.sheet-back-ghost-line.title{

    width:63%;

    height:12px;

    margin-bottom:24px;

    background:
        var(--deep-teal);

}


/* faint page number / reverse-page cue */

.sheet-back-label{

    position:absolute;

    right:18px;

    bottom:16px;

    color:
        rgba(77,59,52,.16);

    font-size:.67rem;

    letter-spacing:.08em;

    text-transform:
        uppercase;

}


/*==================================================
FRONT MOTIFS
==================================================*/

.reflection-motif{

    position:absolute;

    z-index:1;

    top:24px;

    right:28px;

    width:105px;

    height:100px;

    pointer-events:none;

}


/* circles */

.motif-circles .motif-one,
.motif-circles .motif-two,
.motif-circles .motif-three{

    position:absolute;

    display:block;

    border-radius:50%;

}


.motif-circles .motif-one{

    width:62px;

    height:62px;

    top:0;

    right:0;

    background:
        rgba(22,207,191,.22);

}


.motif-circles .motif-two{

    width:36px;

    height:36px;

    top:42px;

    right:51px;

    background:
        rgba(162,34,130,.16);

}


.motif-circles .motif-three{

    width:19px;

    height:19px;

    top:8px;

    right:67px;

    background:
        rgba(19,96,94,.18);

}


/* check */

.motif-check{

    display:flex;

    align-items:center;

    justify-content:center;

    width:60px;

    height:60px;

    top:28px;

    right:30px;

    border:
        2px solid
        rgba(162,34,130,.18);

    border-radius:50%;

    color:
        var(--magenta);

    font-family:
        var(--heading-font);

    font-size:2rem;

}


/* lines */

.motif-lines{

    top:32px;

    right:30px;

    width:88px;

    height:60px;

    opacity:.55;

    background:

        linear-gradient(
            var(--teal),
            var(--teal)
        )
        top left
        /
        68px 2px
        no-repeat,

        linear-gradient(
            var(--magenta),
            var(--magenta)
        )
        center right
        /
        54px 2px
        no-repeat,

        linear-gradient(
            var(--deep-teal),
            var(--deep-teal)
        )
        bottom left
        /
        74px 2px
        no-repeat;

}


/*==================================================
CENTER RINGS
==================================================*/

.binder-rings{

    position:absolute;

    z-index:100;

    top:78px;

    bottom:80px;

    left:50%;

    width:42px;

    transform:
        translateX(-50%);

    display:flex;

    flex-direction:column;

    justify-content:
        space-between;

    pointer-events:none;

}


.binder-rings span{

    width:42px;

    height:66px;

    border:
        7px solid
        #c7c5bb;

    border-left-width:5px;

    border-radius:50%;

    background:
        transparent;

    box-shadow:

        2px
        4px
        4px
        rgba(0,0,0,.16),

        inset
        1px
        1px
        1px
        rgba(255,255,255,.8);

}


/*==================================================
TABS
==================================================*/

.binder-tabs{

    position:absolute;

    z-index:120;

    top:58px;

    right:-18px;

    display:flex;

    flex-direction:column;

    gap:10px;

}


.binder-tab-button{

    width:82px;

    min-height:62px;

    padding:
        8px
        7px;

    border:0;

    border-radius:
        0
        9px
        9px
        0;

    background:
        var(--teal);

    color:
        var(--deep-teal);

    font:inherit;

    font-size:.67rem;

    font-weight:700;

    line-height:1.15;

    text-align:center;

    box-shadow:
        3px
        4px
        8px
        rgba(0,0,0,.13);

    cursor:pointer;

    transition:

        transform .2s ease,
        filter .2s ease;

}


.binder-tab-button:nth-child(3n + 2){

    background:
        var(--magenta);

    color:
        var(--cream);

}


.binder-tab-button:nth-child(3n + 3){

    background:
        var(--deep-teal);

    color:
        var(--cream);

}


.binder-tab-button:hover,
.binder-tab-button.is-active{

    transform:
        translateX(7px);

    filter:
        brightness(1.04);

}


.binder-tab-button.is-active{

    box-shadow:

        3px
        4px
        8px
        rgba(0,0,0,.13),

        inset
        0
        0
        0
        2px
        rgba(248,248,238,.58);

}


/*==================================================
BOTTOM CONTROLS
==================================================*/

.binder-controls{

    position:absolute;

    z-index:130;

    left:50%;

    right:32px;

    bottom:22px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:16px;

}


.binder-arrow{

    width:38px;

    height:38px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:
        1px solid
        rgba(248,248,238,.35);

    border-radius:50%;

    background:
        rgba(248,248,238,.10);

    color:
        var(--cream);

    font-size:1.1rem;

    cursor:pointer;

    transition:

        background .2s ease,
        transform .2s ease,
        opacity .2s ease;

}


.binder-arrow:hover:not(:disabled){

    background:
        rgba(248,248,238,.20);

    transform:
        translateY(-1px);

}


.binder-arrow:disabled{

    opacity:.32;

    cursor:default;

}


.binder-page-count{

    min-width:75px;

    color:
        rgba(248,248,238,.82);

    font-size:.82rem;

    text-align:center;

}


/*==================================================
HELP
==================================================*/

.binder-help{

    margin-top:26px;

    text-align:center;

}


.binder-help p{

    margin:0;

    color:
        var(--brown);

    font-size:.9rem;

}


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

@media(max-width:920px){

    .reflection-binder{

        min-height:625px;

    }


    .binder-page-stage{

        height:555px;

    }


    .reflection-sheet{

        height:485px;

    }


    .binder-inside-cover{

        padding:
            56px
            42px
            45px;

    }


    .binder-note{

        left:42px;

        right:35px;

        bottom:45px;

    }


    .reflection-sheet-front{

        padding:
            38px
            32px;

    }


    .reflection-sheet-front h2{

        font-size:1.78rem;

    }


    .binder-tab-button{

        width:70px;

    }

}


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

@media(max-width:700px){

    .reflections-page{

        padding:
            50px
            0
            75px;

    }


    .reflections-heading{

        margin-bottom:30px;

    }


    /*
    Mobile stops pretending to be a full two-page desk binder.
    We preserve the page-turn idea but simplify dimensions.
    */

    .reflection-binder{

        width:94%;

        min-height:710px;

        border-radius:20px;

    }


    .binder-inside-cover{

        top:0;

        width:100%;

        height:165px;

        padding:
            24px
            22px;

    }


    .binder-label{

        width:100%;

        padding:
            18px
            20px;

    }


    .binder-label h2{

        margin-bottom:6px;

        font-size:1.8rem;

    }


    .binder-label p{

        font-size:.84rem;

        line-height:1.45;

    }


    .binder-small-label{

        margin-bottom:5px;

        font-size:.62rem;

    }


    .binder-note{

        display:none;

    }


    .binder-page-stage{

        position:absolute;

        top:175px;

        left:0;

        right:0;

        height:450px;

    }


    .reflection-sheet{

        top:10px;

        left:7%;

        width:86%;

        height:410px;

        transform-origin:
            left center;

    }


    /*
    On mobile, a 180 degree page turn would put the page
    outside the visible binder.
    So turned pages move aside more subtly.
    */

    .reflection-sheet.is-turned{

        transform:

            translateX(-9%)
            rotateY(-165deg);

    }


    .reflection-sheet-front{

        padding:
            34px
            27px;

    }


    .reflection-sheet-front h2{

        max-width:260px;

        font-size:1.75rem;

    }


    .reflection-page-description{

        max-width:285px;

    }


    .binder-rings{

        display:none;

    }


    .binder-tabs{

        top:auto;

        right:12px;

        left:12px;

        bottom:66px;

        flex-direction:row;

        justify-content:center;

        flex-wrap:wrap;

        gap:7px;

    }


    .binder-tab-button{

        width:auto;

        min-width:88px;

        min-height:40px;

        padding:
            7px
            10px;

        border-radius:999px;

    }


    .binder-tab-button:hover,
    .binder-tab-button.is-active{

        transform:
            translateY(-2px);

    }


    .binder-controls{

        left:12px;

        right:12px;

        bottom:18px;

    }

}


/*==================================================
VERY SMALL MOBILE
==================================================*/

@media(max-width:430px){

    .reflection-binder{

        min-height:740px;

    }


    .reflection-sheet{

        width:90%;

        left:5%;

        height:430px;

    }


    .reflection-sheet-front{

        padding:
            31px
            22px;

    }


    .reflection-sheet-front h2{

        max-width:230px;

        font-size:1.55rem;

    }


    .reflection-motif{

        transform:
            scale(.78);

        transform-origin:
            top right;

    }

}


/*==================================================
REDUCED MOTION
==================================================*/

@media(prefers-reduced-motion:reduce){

    .reflection-sheet,
    .binder-tab-button,
    .binder-arrow{

        transition:none;

    }

}



/*==================================================
REFLECT & RELATE — REALISTIC BINDER POLISH
These rules intentionally come LAST so they refine
the existing binder without changing the page-turn logic.
==================================================*/

.reflection-binder{
    border:
        1px solid
        rgba(6,49,47,.42);

    background:
        radial-gradient(
            circle at 18% 14%,
            rgba(255,255,255,.08),
            transparent 27%
        ),
        radial-gradient(
            circle at 84% 78%,
            rgba(0,0,0,.10),
            transparent 34%
        ),
        repeating-linear-gradient(
            98deg,
            rgba(255,255,255,.018) 0,
            rgba(255,255,255,.018) 2px,
            rgba(0,0,0,.014) 3px,
            rgba(0,0,0,.014) 5px
        ),
        linear-gradient(
            90deg,
            #0c4d4a 0%,
            #176765 45.5%,
            #073f3d 49.2%,
            #062f2e 50%,
            #073f3d 50.8%,
            #176765 54.5%,
            #0c4d4a 100%
        );

    box-shadow:
        0 34px 75px rgba(31,26,22,.23),
        0 7px 14px rgba(31,26,22,.12),
        inset 0 0 0 4px rgba(255,255,255,.045),
        inset 0 0 0 6px rgba(0,0,0,.10);
}

/* subtle stitched leather edge */
.reflection-binder::after{
    content:"";
    position:absolute;
    z-index:1;
    inset:13px;
    border:
        1px dashed
        rgba(220,235,226,.25);
    border-radius:18px;
    pointer-events:none;
}

/* paper label mounted on the inside cover */
.binder-label{
    transform:
        rotate(-1deg);

    padding:
        35px
        34px
        31px;

    border:
        1px solid
        rgba(77,59,52,.10);

    border-radius:
        8px
        14px
        12px
        7px;

    background:
        linear-gradient(
            rgba(251,249,239,.98),
            rgba(246,242,229,.98)
        );

    color:
        var(--brown);

    box-shadow:
        0 13px 24px rgba(0,0,0,.17),
        3px 4px 0 rgba(255,255,255,.07);
}

.binder-label::before{
    content:"";
    position:absolute;
    left:30px;
    right:30px;
    top:72px;
    height:1px;
    background:
        rgba(19,96,94,.22);
}

.binder-small-label{
    color:
        var(--deep-teal);
}

.binder-label h2{
    color:
        var(--deep-teal);
    font-size:
        clamp(
            2rem,
            3.5vw,
            2.9rem
        );
}

.binder-label p{
    color:
        rgba(77,59,52,.82);
}

/* make the little note feel tucked into the binder */
.binder-note{
    padding:
        15px
        18px;

    border:
        1px solid
        rgba(248,248,238,.16);

    border-radius:
        10px;

    background:
        rgba(3,42,40,.22);

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

.binder-note p{
    color:
        rgba(248,248,238,.86);
}

/* subtle stack of paper behind the live sheet */
.binder-page-stage::before,
.binder-page-stage::after{
    content:"";
    position:absolute;
    z-index:5;
    top:43px;
    left:
        calc(
            50% + 10px
        );
    width:
        calc(
            50% - 49px
        );
    height:520px;
    border-radius:
        3px
        11px
        11px
        3px;
    pointer-events:none;
}

.binder-page-stage::before{
    transform:
        translate(10px,7px)
        rotate(.35deg);
    background:
        #eee9dc;
    box-shadow:
        0 9px 18px rgba(0,0,0,.11);
}

.binder-page-stage::after{
    transform:
        translate(5px,3px)
        rotate(-.2deg);
    background:
        #f5f0e4;
    border:
        1px solid
        rgba(77,59,52,.06);
}

/* actual paper */
.reflection-sheet-face{
    box-shadow:
        0 15px 26px rgba(0,0,0,.16),
        2px 1px 0 rgba(255,255,255,.75) inset;
}

.reflection-sheet-front{
    background:
        repeating-linear-gradient(
            0deg,
            rgba(77,59,52,.012) 0,
            rgba(77,59,52,.012) 1px,
            transparent 1px,
            transparent 4px
        ),
        linear-gradient(
            100deg,
            #fbf9ef 0%,
            #f8f6eb 64%,
            #f1ecdf 100%
        );

    border:
        1px solid
        rgba(77,59,52,.12);
}

/* page edge / slight curl */
.reflection-sheet-front::after{
    content:"";
    position:absolute;
    z-index:0;
    top:0;
    bottom:0;
    right:0;
    width:12px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(77,59,52,.05)
        );

    pointer-events:none;
}

.reflection-sheet-back{
    background:
        repeating-linear-gradient(
            0deg,
            rgba(77,59,52,.012) 0,
            rgba(77,59,52,.012) 1px,
            transparent 1px,
            transparent 4px
        ),
        linear-gradient(
            96deg,
            #f2eee2,
            #f8f6ec
        );
}

/* More metallic-looking rings */
.binder-rings span{
    border-color:
        #bbb8ae;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.35),
            rgba(255,255,255,.03) 32%,
            rgba(0,0,0,.07) 62%,
            rgba(255,255,255,.22)
        );

    box-shadow:
        3px 5px 7px rgba(0,0,0,.22),
        inset 1px 1px 2px rgba(255,255,255,.95),
        inset -2px -2px 3px rgba(69,67,62,.18);
}

/* Real paper-divider feel for the tabs */
.binder-tab-button{
    min-height:64px;

    border:
        1px solid
        rgba(77,59,52,.12);

    background:
        linear-gradient(
            100deg,
            #c9eee8,
            #9fddd3
        );

    color:
        var(--deep-teal);

    box-shadow:
        4px 5px 10px rgba(0,0,0,.16),
        inset 0 1px 0 rgba(255,255,255,.55);
}

.binder-tab-button:nth-child(3n + 2){
    background:
        linear-gradient(
            100deg,
            #efd2e4,
            #d9a6c8
        );

    color:
        #74315f;
}

.binder-tab-button:nth-child(3n + 3){
    background:
        linear-gradient(
            100deg,
            #dfeee2,
            #b9d8c1
        );

    color:
        var(--deep-teal);
}

.binder-tab-button.is-active{
    transform:
        translateX(10px);

    box-shadow:
        5px 7px 13px rgba(0,0,0,.19),
        inset 0 0 0 2px rgba(248,248,238,.58);
}

/*==================================================
ATTRACTION — REAL LEAF IMAGE
Use the user's actual leaf reference as an image,
instead of trying to draw leaves with CSS.
==================================================*/

.motif-leaf-image{
    top:20px;
    right:20px;
    width:125px;
    height:112px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.motif-leaf-image img{
    display:block;
    width:105px;
    height:auto;
    max-height:100px;
    object-fit:contain;

    /* softens the bright white image background into the paper */
    mix-blend-mode:multiply;

    filter:
        saturate(.92)
        contrast(.92);

    opacity:.92;
}

/* give the attraction page a slightly more editorial composition */
.reflection-sheet[data-id="will-attraction-grow"]
.reflection-sheet-front h2{
    max-width:290px;
}

.reflection-sheet[data-id="will-attraction-grow"]
.reflection-page-description{
    max-width:335px;
}

@media(max-width:920px){

    .binder-page-stage::before,
    .binder-page-stage::after{
        height:485px;
    }

}

@media(max-width:700px){

    .reflection-binder::after{
        inset:10px;
    }

    .binder-page-stage::before,
    .binder-page-stage::after{
        display:none;
    }

    .binder-label{
        transform:none;
    }

}

/*==================================================
PRACTICE & PLAY — GAMES PAGE
==================================================*/

.games-page{
    padding:
        70px
        0
        78px;

    background:
        radial-gradient(
            circle at 84% 18%,
            rgba(22,207,191,.10),
            transparent 24%
        ),
        radial-gradient(
            circle at 12% 88%,
            rgba(162,34,130,.06),
            transparent 22%
        ),
        var(--cream);
}


.games-hero-grid{
    display:grid;

    grid-template-columns:
        minmax(0,1.18fr)
        minmax(280px,.82fr);

    gap:70px;

    align-items:center;
}


.games-heading{
    max-width:700px;
}


.games-heading h1{
    margin:
        0
        0
        24px;

    color:
        var(--deep-teal);

    font-family:
        var(--heading-font);

    font-size:
        clamp(
            3rem,
            6vw,
            5.4rem
        );

    line-height:.98;
}


.games-intro{
    max-width:650px;

    margin:0;

    color:
        var(--brown);

    font-size:1.1rem;

    line-height:1.85;
}


/*==================================================
HERO GAME OBJECT
==================================================*/

.games-hero-object{
    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:330px;
}


.games-hero-object::before{
    content:"";

    position:absolute;

    width:290px;

    height:235px;

    border-radius:50%;

    background:
        rgba(22,207,191,.07);

    filter:
        blur(1px);

    transform:
        rotate(-7deg);
}


.games-hero-object img{
    position:relative;

    z-index:2;

    width:
        min(
            390px,
            100%
        );

    height:auto;

    filter:
        drop-shadow(
            0
            18px
            16px
            rgba(0,0,0,.14)
        )
        drop-shadow(
            0
            32px
            30px
            rgba(0,0,0,.09)
        );

    transform:
        rotate(2deg);
}



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

.game-shelf{
    padding:
        90px
        0
        110px;

    background:
        linear-gradient(
            rgba(19,96,94,.035),
            rgba(162,34,130,.025)
        ),
        var(--cream);
}


.game-shelf-heading{
    max-width:720px;

    margin:
        0
        auto
        48px;

    text-align:center;
}


.game-shelf-heading h2{
    margin:
        0
        0
        14px;

    color:
        var(--deep-teal);

    font-family:
        var(--heading-font);

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


.game-shelf-heading > p:last-child{
    margin:0;

    color:
        var(--brown);

    line-height:1.7;
}



/*==================================================
GAME DISPLAY
==================================================*/

.game-display{
    width:
        min(
            1000px,
            94%
        );

    margin:auto;

    display:grid;

    grid-template-columns:
        minmax(0,1.25fr)
        minmax(260px,.75fr);

    gap:34px;

    align-items:stretch;
}



/*==================================================
FEATURED GAME BOX
==================================================*/

.game-box{
    position:relative;

    overflow:hidden;

    min-height:380px;

    padding:
        44px
        46px
        38px;

    border:
        1px solid
        rgba(19,96,94,.11);

    border-radius:28px;

    background:
        rgba(255,254,248,.94);

    box-shadow:
        0
        22px
        52px
        rgba(77,59,52,.10);

    transform:
        rotate(-.35deg);
}


.game-box > *{
    position:relative;

    z-index:2;
}


/* The featured game echoes the visual language of Date This Object. */

.game-card-orb{
    position:absolute;

    z-index:1;

    border-radius:50%;

    pointer-events:none;
}


.game-card-orb-one{
    width:235px;

    height:235px;

    top:-105px;

    left:-88px;

    background:
        rgba(22,207,191,.11);
}


.game-card-orb-two{
    width:205px;

    height:205px;

    right:-86px;

    bottom:-92px;

    background:
        rgba(162,34,130,.09);
}


.game-box-top{
    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    margin-bottom:58px;
}


.game-box-kicker{
    color:
        var(--magenta);

    font-size:.76rem;

    font-weight:700;

    letter-spacing:.12em;

    text-transform:uppercase;
}


.game-box-number{
    display:flex;

    align-items:center;

    justify-content:center;

    width:38px;

    height:38px;

    border:
        1px solid
        rgba(19,96,94,.22);

    border-radius:50%;

    color:
        var(--deep-teal);

    font-size:.8rem;

    font-weight:700;
}


.game-box-copy{
    max-width:570px;
}


.game-box-copy h3{
    margin:
        0
        0
        18px;

    color:
        var(--deep-teal);

    font-family:
        var(--heading-font);

    font-size:
        clamp(
            2.15rem,
            4vw,
            3.35rem
        );

    line-height:1.05;
}


.game-box-copy p{
    margin:0;

    color:
        var(--brown);

    font-size:1rem;

    line-height:1.8;
}


.game-box-bottom{
    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:22px;

    margin-top:48px;
}


.game-play-link{
    display:inline-block;

    padding-bottom:3px;

    border-bottom:
        2px solid
        var(--teal);

    color:
        var(--deep-teal);

    font-weight:700;

    text-decoration:none;

    transition:
        color .2s ease,
        transform .2s ease;
}


.game-play-link:hover{
    color:
        var(--magenta);

    transform:
        translateX(4px);
}


.game-time{
    color:
        rgba(77,59,52,.64);

    font-size:.82rem;
}



/*==================================================
MORE GAMES BOX
==================================================*/

.more-games-box{
    position:relative;

    overflow:hidden;

    padding:
        42px
        36px;

    border:
        1px dashed
        rgba(19,96,94,.26);

    border-radius:22px;

    background:
        rgba(255,254,248,.82);

    box-shadow:
        inset
        0
        0
        0
        5px
        rgba(255,255,255,.24);

    transform:
        rotate(.7deg);
}


.more-games-box h3{
    margin:
        12px
        0
        16px;

    color:
        var(--deep-teal);

    font-family:
        var(--heading-font);

    font-size:2rem;

    line-height:1.15;
}


.more-games-box > p:last-child{
    margin:0;

    color:
        var(--brown);

    line-height:1.75;
}


.more-games-mark{
    position:relative;

    width:92px;

    height:76px;

    margin-bottom:34px;
}


.more-games-mark span{
    position:absolute;

    display:block;

    border:
        2px solid
        rgba(19,96,94,.22);

    border-radius:12px;

    background:
        var(--cream);

    box-shadow:
        2px
        4px
        9px
        rgba(0,0,0,.06);
}


.more-games-mark span:nth-child(1){
    width:58px;
    height:44px;
    left:0;
    top:22px;
    transform:rotate(-7deg);
}


.more-games-mark span:nth-child(2){
    width:58px;
    height:44px;
    left:23px;
    top:9px;
    border-color:
        rgba(162,34,130,.20);
    transform:rotate(4deg);
}


.more-games-mark span:nth-child(3){
    width:58px;
    height:44px;
    left:34px;
    top:27px;
    border-color:
        rgba(22,207,191,.28);
    transform:rotate(10deg);
}



/*==================================================
BOTTOM NOTE
==================================================*/

.games-note{
    width:
        min(
            760px,
            92%
        );

    margin:
        55px
        auto
        0;

    display:flex;

    align-items:flex-start;

    justify-content:center;

    gap:12px;

    text-align:center;
}


.games-note span{
    color:
        var(--magenta);
}


.games-note p{
    margin:0;

    color:
        var(--brown);

    line-height:1.7;
}



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

@media(max-width:850px){

    .games-hero-grid{
        grid-template-columns:1fr;

        gap:30px;
    }


    .games-hero-object{
        justify-content:flex-start;

        min-height:250px;
    }


    .games-hero-object img{
        width:320px;
    }


    .game-display{
        grid-template-columns:1fr;
    }

}



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

@media(max-width:600px){

    .games-page{
        padding:
            48px
            0
            58px;
    }


    .games-heading h1{
        font-size:
            clamp(
                2.65rem,
                13vw,
                4rem
            );
    }


    .games-hero-object{
        min-height:210px;
    }


    .games-hero-object img{
        width:270px;
    }


    .game-shelf{
        padding:
            65px
            0
            80px;
    }


    .game-box{
        min-height:auto;

        padding:
            34px
            28px
            31px;
    }


    .game-box-top{
        margin-bottom:40px;
    }


    .game-box-bottom{
        align-items:flex-start;

        flex-direction:column;

        margin-top:38px;
    }


    .more-games-box{
        padding:
            34px
            28px;
    }

}