/* ==========================================================
   Shelf Hero
========================================================== */

.shelf-hero {

    width: 100%;

    padding: 4.5rem 1.5rem 3.5rem;

    text-align: center;

    box-sizing: border-box;

}

.shelf-hero-inner {

    width: min(760px, 100%);

    margin: 0 auto;

}

.shelf-eyebrow {

    margin: 0 0 .75rem;

    font-family: "Poppins", sans-serif;

    font-size: .75rem;

    font-weight: 600;

    letter-spacing: .22em;

    color: #8D9F84;

}

.shelf-title {

    margin: 0;

    font-family: "Poppins", sans-serif;

    font-size: clamp(2.75rem, 6vw, 4.5rem);

    font-weight: 700;

    letter-spacing: .035em;

    line-height: 1.05;

    color: #22334A;

}

.shelf-subtitle {

    max-width: 600px;

    margin: 1.25rem auto 0;

    font-size: 1.05rem;

    line-height: 1.7;

    letter-spacing: .025em;

    color: #7A8793;

}

/* ==========================================================
   OPEN SHELF SITE HEADER
========================================================== */

.site-header {

    width: min(1200px, 92%);

    margin: 0 auto;

    padding: 2rem 0 1rem;

    display: flex;

    justify-content: space-between;

    align-items: center;

}

.logo {

    display: flex;

    align-items: center;

    gap: 1rem;

    text-decoration: none;

}

.logo img {

    width: 90px;

    height: auto;

    display: block;

}

.logo span {

    font-family: "Poppins", sans-serif;

    font-size: 1.6rem;

    font-weight: 700;

    color: #22334A;

}

.site-header nav {

    display: flex;

    gap: 2.5rem;

}

.site-header nav a {

    font-family: "Inter", sans-serif;

    font-weight: 600;

    color: #394A5A;

    text-decoration: none;

    transition: color .25s ease;

}

.site-header nav a:hover {

    color: #92A98A;

}

/* ==========================================================
   SITE FOOTER
========================================================== */

.site-footer {

    position: relative;

    z-index: 10;

    width: 100%;

    margin-top: 0;

    padding: 4rem 2rem 2rem;

    background: #F4F0E8;

    border-top: 1px solid #E8E3D9;

    text-align: center;

}


/* ==========================================================
   Footer Logo
========================================================== */

.site-footer-logo {

    width: 55px;

    height: auto;

    margin-bottom: .75rem;

}


/* ==========================================================
   Footer Name
========================================================== */

.site-footer-name {

    font-family: "Poppins", sans-serif;

    font-size: 1.35rem;

    font-weight: 700;

    color: var(--navy);

}


/* ==========================================================
   Footer Tagline
========================================================== */

.site-footer-tagline {

    margin: .5rem 0 1.75rem;

    font-size: .95rem;

    line-height: 1.6;

    color: #6D7A86;

}


/* ==========================================================
   Footer Navigation
========================================================== */

.site-footer-nav {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 2rem;

}


.site-footer-nav a {

    font-size: .9rem;

    font-weight: 600;

    color: var(--navy);

    text-decoration: none;

    transition:
        color .2s ease;

}


.site-footer-nav a:hover {

    color: var(--sage);

}


/* ==========================================================
   Footer Bottom
========================================================== */

.site-footer-bottom {

    width: 100%;

    margin-top: 2.5rem;

    padding-top: 1.5rem;

    border-top: 1px solid #E8E3D9;

}


.site-footer-bottom p {

    margin: 0;

    font-size: .75rem;

    letter-spacing: .03em;

    color: #8A949C;

}


.site-footer-signoff {

    margin-top: .5rem !important;

    font-size: .85rem !important;

    font-style: italic;

    color: #7F9276 !important;

}

/* ==========================================================
   Bookshelf
========================================================== */

.bookshelf {

    width: min(1200px, 100%);
    margin: -1rem auto;

    display: flex;
    flex-direction: column;
    align-items: center;

}

/* ==========================================================
   Bookshelf Header
========================================================== */

.bookshelf-header {

    text-align: center;

    margin-top: -6rem;

    margin-bottom: -4rem;

}

.bookshelf-title {

    margin: 0;

    font-family: "Poppins", sans-serif;

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

    font-weight: 700;

    line-height: 1.1;

    letter-spacing: -.02em;

    color: var(--navy);

}

.bookshelf-subtitle {

    margin-top: 1rem;

    font-size: 1.25rem;

    color: var(--muted);

    letter-spacing: .02em;

}

/* ==========================================================
   Bookshelf Divider
========================================================== */

.bookshelf-divider {

    position: relative;

    width: 180px;

    height: 20px;

    margin: 1rem auto 0;

    display: flex;

    align-items: center;

    justify-content: center;

}

.bookshelf-divider::before {

    content: "";

    position: absolute;

    left: 0;
    right: 0;

    top: 50%;

    height: 1px;

    background: rgba(146,169,138,.35);

}

.bookshelf-divider-mark {

    position: relative;

    z-index: 1;

    padding: 0 .75rem;

    background: var(--cream);

    color: #93A283;

    font-size: 1rem;

}

/* ==========================================================
   Illustrated Wooden Shelf
========================================================== */

.library-shelf {

    display: block;

    width: min(1200px, 100%);

    height: auto;

    margin: -560px auto 0;

    position: relative;

    z-index: 1;

}

/* ==========================================================
   Shelf Rows
========================================================== */

.bookshelf-row {

    position: relative;

    width: min(1200px, 100%);

    margin: 0 auto -29rem;

}


/* ==========================================================
   Books On Each Shelf
========================================================== */

.bookshelf-books {

    position: relative;
    left: -50px;

    z-index: 2;

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    align-items: end;

    gap: 1rem;

    width: 80%;

    margin-left: auto;
    margin-right: auto;

    transform: translateY(140px);

}

.word-search {
    position: relative;
    top: 10px;
}

.reading-comprehension {
    position: relative;
    top: 10px;
}

.flashcards {
    position: relative;
    top: 10px;

}

/* ==========================================================
   Illustrated Wooden Shelf
========================================================== */

.bookshelf-row .library-shelf {

    display: block;

    width: 100%;

    height: auto;

    margin: -430px auto 0;

    position: relative;

    z-index: 1;

}

/* ==========================================================
   Standardized Open Shelf Books
========================================================== */

.library-book {

    width: 140%;
    height: auto;

    display: block;

}

/* ==========================================================
   Interactive Book Links
========================================================== */

.book-link {

    display: block;

    text-decoration: none;

}

.book-link .library-book {

    transition:
        transform 0.25s ease,
        filter 0.25s ease;

}

.book-link:hover .library-book {

    transform:
        translateY(-8px)
        scale(1.025);

    filter:
        drop-shadow(
            0 10px 12px rgba(19, 34, 56, .18)
        );

}

/* ==========================================================
   Coming Soon Books
========================================================== */

.book-link.coming-soon {
    cursor: default;
}

/* ==========================================================
   Responsive Layout
========================================================== */

/* ==========================================================
   Mobile Layout
========================================================== */

@media (max-width: 700px) {

    /* ------------------------------------------------------
       Bookshelf Container
    ------------------------------------------------------ */

    .bookshelf {
        width: 100%;
        margin: 2rem auto;
    }

    /* ------------------------------------------------------
       Shelf Header
    ------------------------------------------------------ */

    .bookshelf-header {
    margin-top: 4rem;
    margin-bottom: 2rem;
    padding: 0 1.25rem;
}

    .bookshelf-title {
        font-size: 2.35rem;
    }

    .bookshelf-subtitle {
        font-size: .95rem;
        letter-spacing: .04em;
    }


    /* ------------------------------------------------------
       Individual Shelf Rows
    ------------------------------------------------------ */

    .bookshelf-row {
        width: 100%;
        margin: 0 auto 4rem;
    }


    /* ------------------------------------------------------
       Books
    ------------------------------------------------------ */

    .bookshelf-books {
        width: 88%;
        grid-template-columns: repeat(2, 1fr);
        gap: .5rem;
        transform: translateY(45px);
    }

    .library-book {
        width: 100%;
        height: auto;
    }

    .bookshelf-books .book-link:nth-child(n + 3) {
    transform: translateY(-20px);
}


    /* ------------------------------------------------------
       Wooden Shelf
    ------------------------------------------------------ */

    .bookshelf-row .library-shelf {
        width: 100%;
        height: auto;
        margin: -180px auto 0;
    }


    /* ------------------------------------------------------
       Footer
    ------------------------------------------------------ */

    .site-footer-content {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .site-footer-nav {
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem 1.5rem;
    }

}

}