.zine-page {
    background-image: url("../../content/layers/8C5B7BEE-2D98-4C4F-9560-01974C93DD77.JPEG");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.zine-book {
    position: relative;
    z-index: 1;
    min-height: 100vh;
}

.spread {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(88vw, 118vh);
    aspect-ratio: 3336 / 2388;
    background: var(--btn-bg);
    border: 0.15em solid var(--text-color);
    overflow: hidden;
    z-index: 1;
}

.spread.single {
    width: min(44vw, 59vh);
    aspect-ratio: 1668 / 2388;
}

.spread#cover,
.spread:target,
.spread:has(:target) {
    display: flex;
}

.spread:target,
.spread:has(:target) {
    z-index: 2;
}

.pageL,
.pageR,
.page {
    position: relative;
    height: 100%;
}

.page-whole,
.page-back,
.page-fwd {
    text-decoration: none;
    color: inherit;
}

.page-whole {
    position: absolute;
    inset: 0;
    display: block;
}

.page-back,
.page-fwd {
    display: none;
}

.pageL,
.pageR {
    width: 50%;
}

.page {
    width: 100%;
}

.pageL { border-left: 1px solid var(--text-color); }
.pageR { border-right: 1px solid var(--text-color); }

.mid {
    width: 0.6%;
    background: linear-gradient(to right, transparent, var(--text-color), transparent);
    opacity: 0.3;
}

.pageL img,
.pageR img,
.page img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pageL:hover::after, .pageL:focus-within::after {
    content: "←";
    position: absolute;
    bottom: 0.8em;
    left: 1em;
    color: var(--link-color-hover);
    font-size: 2rem;
}

.pageR:hover::after, .pageR:focus-within::after,
.page:hover::after, .page:focus-within::after {
    content: "→";
    position: absolute;
    bottom: 0.8em;
    right: 1em;
    color: var(--link-color-hover);
    font-size: 2rem;
}

#back .page:hover::after, #back .page:focus-within::after {
    content: "←";
    right: auto;
    left: 1em;
}

.back-link {
    position: fixed;
    top: 1.5rem;
    left: 1.5rem;
    z-index: 5;
    color: var(--text-color);
    text-decoration: none;
    font-size: 1rem;
    letter-spacing: 0.05em;
}

.back-link:hover {
    text-decoration: underline;
}

.back-button-img {
    width: 80px;
    display: block;
}

.back-button-img:hover {
    rotate: 5deg;
}

[data-theme="dark"] .back-button-img { filter: invert(1); }

@media screen and (max-width: 600px) {
    .zine-book {
        display: flex;
        width: 100%;
        min-height: 100vh;
        overflow: hidden;
        padding: 0;
        align-items: center;
        justify-content: center;
    }

    .spread {
        position: static;
        transform: none;
        width: auto;
        height: auto;
        aspect-ratio: auto;
        background: none;
        border: none;
        overflow: visible;
        margin: auto;
    }

    .zine-book:has(:target:not(#cover)) #cover {
        display: none;
    }

    .mid { display: none; }

    .pageL,
    .pageR,
    .page {
        position: relative;
        width: 82vw;
        max-width: 360px;
        height: auto;
        aspect-ratio: 1668 / 2388;
        border: 0.15em solid var(--text-color);
        vertical-align: middle;
    }

    .pageL,
    .pageR {
        display: none;
    }

    .pageL:target,
    .pageR:target {
        display: block;
    }

    .page-whole {
        display: none;
    }

    .page-back,
    .page-fwd {
        display: block;
        position: absolute;
        top: 0;
        height: 100%;
        width: 35%;
        z-index: 2;
    }

    .page-back { left: 0; }
    .page-fwd { right: 0; }
}