/* =========================================
   LOOK INSIDE MODAL CONTROLS
   ========================================= */

/* Previous / next circular buttons */
#look-inside-dialog .look-arrow {
    width: 64px;
    height: 64px;
    padding: 0;

    border: 2px solid #ffffff;
    border-radius: 50%;

    background: var(--colour-orange);
    color: #ffffff;

    display: grid;
    place-items: center;

    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);

    /* Hide the original ‹ / › character */
    font-size: 0;

    transition:
        background-color 180ms ease,
        transform 180ms ease,
        box-shadow 180ms ease;
}

/* Recreate the arrow so it can be positioned properly */
#look-inside-dialog .look-arrow::before {
    display: block;

    font-size: 42px;
    font-weight: 400;
    line-height: 1;

    color: #ffffff;

    /* Move arrow slightly upward inside circle */
    transform: translateY(-1px);
}

#look-inside-dialog .look-arrow.prev::before {
    content: "‹";
}

#look-inside-dialog .look-arrow.next::before {
    content: "›";
}

/* Hover / keyboard focus */
#look-inside-dialog .look-arrow:hover,
#look-inside-dialog .look-arrow:focus-visible {
    background: var(--colour-orange-dark);
    transform: scale(1.06);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}


/* =========================================
   LOOK INSIDE CLOSE BUTTON
   ========================================= */

#look-inside-dialog .dialog-close {
    display: grid;
    place-items: center;

    padding: 0;

    /* Hide original × */
    font-size: 0;
}

/* Recreate and vertically position the X */
#look-inside-dialog .dialog-close::before {
    content: "×";

    display: block;

    font-size: 30px;
    font-weight: 400;
    line-height: 1;
/* =========================================
   LOOK INSIDE MODAL CONTROLS
   ========================================= */

/* Previous / next circular buttons */
#look-inside-dialog .look-arrow {
    width: 64px;
    height: 64px;
    padding: 0;

    border: 2px solid #ffffff;
    border-radius: 50%;

    background: var(--colour-orange);
    color: #ffffff;

    display: grid;
    place-items: center;

    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);

    /* Hide the original ‹ / › character */
    font-size: 0;

    transition:
        background-color 180ms ease,
        transform 180ms ease,
        box-shadow 180ms ease;
}

/* Recreate the arrow so it can be positioned properly */
#look-inside-dialog .look-arrow::before {
    display: block;

    font-size: 42px;
    font-weight: 400;
    line-height: 1;

    color: #ffffff;

    /* Move arrow slightly upward inside circle */
    transform: translateY(-3px);
}

#look-inside-dialog .look-arrow.prev::before {
    content: "‹";
}

#look-inside-dialog .look-arrow.next::before {
    content: "›";
}

/* Hover / keyboard focus */
#look-inside-dialog .look-arrow:hover,
#look-inside-dialog .look-arrow:focus-visible {
    background: var(--colour-orange-dark);
    transform: scale(1.06);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}


/* =========================================
   LOOK INSIDE CLOSE BUTTON
   ========================================= */

#look-inside-dialog .dialog-close {
    display: grid;
    place-items: center;

    padding: 0;

    /* Hide original × */
    font-size: 0;
}

/* Recreate and vertically position the X */
#look-inside-dialog .dialog-close::before {
    content: "×";

    display: block;

    font-size: 30px;
    font-weight: 400;
    line-height: 1;

    /* Move X upward inside circle */
    transform: translateY(1px);
}
}

/* BOOK PAGE — SERIES RECOMMENDATION TITLES */
body[data-page="book"] .continue-series span {
text-align: center;
}

/* SERIES PAGE — BANNER */
.series-banner > div > p {
    text-align: center;
font-size: 24px;
    margin-left: auto;
    margin-right: auto;
}

/* SERIES PAGE — BANNER */
.series-banner {
    min-height: 260px;
    padding: 2.5rem 1.5rem;
background:
        linear-gradient(
            rgba(12, 32, 48, 0.45),
            rgba(12, 32, 48, 0.45)
        ),
        var(--series-bg) center / cover;
}

@media (max-width: 640px) {
    .series-banner {
        min-height: 190px;
        padding: 1.75rem 1rem;
    }
}

/* ========================================
   SERIES PAGE — COMPARE STRIP
   ======================================== */

/* Reduce space between banner and compare strip */
.series-page {
    padding-top: 1.5rem;
}

/* Reduce vertical depth of the compare strip */
.series-page .page-heading {
    padding-top: 0;
    padding-bottom: 0rem;
    margin-bottom: 0rem;
}
/* Vertical space above the top rule */
.series-page .series-cards {
    margin-top: 1rem;
}

/* ========================================
   SERIES PAGE — COMPARE STRIP — MOBILE
   ======================================== */

@media (max-width: 640px) {

    .series-page .page-heading {
        row-gap: 1.5rem;
        gap: 1.5rem;
    }

    .series-page .series-facts {
        margin-top: 0;
        margin-bottom: 1.5rem;
    }

    .series-page .series-cards {
        margin-top: 1rem;
    }
}

/* ========================================
   SERIES PAGE — COMPARE STRIP — TABLET
   ======================================== */

@media (min-width: 641px) and (max-width: 1024px) {

    .series-page .page-heading {
        display: block;
        padding-bottom: 0;
        margin-bottom: 0;
    }

    .series-page .page-heading h2 {
        margin-bottom: 1.75rem;
    }

    .series-page .series-facts {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1.5rem;
        margin: 0 0 1.75rem;
    }

    .series-page .series-cards {
        margin-top: 1rem;
    }
}

/* BOOK PAGE — WHAT'S INSIDE HEADING */
body[data-page="book"] .book-features h2 {
margin-top: 0;
}

/* LETS GO PUZZLING IN FOOTER */
.site-footer h2 {
font-size: 26px;
color: #d1d3d4;
}

/* HOMEPAGE HERO — HIDE PREVIOUS / NEXT ARROWS */
.slider-arrow {
    display: none;
}

/* MASTHEAD LOGO */
.brand img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* Tablet / Mobile */
@media (max-width: 800px) {
    .site-header {
        min-height: 84px;
    }

    .brand {
        width: 205px;
    }

    .brand img {
        width: 100%;
        height: auto;
    }
}

/* BOOK COVER — PROMOTIONAL BADGE */
:root {
    --book-badge-background: #f18921;
    --book-badge-fold: #8f3509;
}