.menu-page {

    height:100dvh;

    width:100%;

    display:flex;

    flex-direction:column;

    overflow:hidden;

    background:#fafafa;
}



.menu-header h1 {

    font-weight:300;

    letter-spacing:.08em;

}




.menu-header {
    flex: 0 0 auto;
    padding: 15px;
    text-align: center;
}



.menu-viewer {

    flex:1 1 auto;

    min-height:0;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    overflow:hidden;

    gap:0;

    padding-bottom: 3px;
    
}

.site-body > footer{
    flex: 0 0 22px;

    font-size: 0.62rem;
    font-weight: 300;
    letter-spacing: 0.18em;
    text-transform: uppercase;

    color: rgba(0,0,0,.35);
    
    font-family: "Cormorant Garamond", serif;
    font-size: 0.82rem;
    letter-spacing: .18em;
    color: rgba(0,0,0,.45);
    
    
}


.menu-body .lang {
    font-family: "Cormorant Garamond", serif;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: .08em;
}


#book {
    flex: 0 0 auto;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
     position: relative;
    cursor: grab;
    filter: drop-shadow(
        0 clamp(5px,2vw,15px)
        clamp(10px,4vw,30px)
        rgba(0,0,0,.15)
    );
        

        
        
}

#book::before {
    content:"";
    position:absolute;
    inset:0;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(255,255,255,0.015) 0px,
            rgba(255,255,255,0.015) 1px,
            transparent 1px,
            transparent 3px
        );

    border-radius:14px;

    pointer-events:none;
}





#book:active {
    cursor: grabbing;
}

#book,
#book-inner {
    max-height: 100%;
    border-radius: 5px;
    overflow:hidden;

    box-shadow:
        0 0 12px rgba(0,0,0,0.35);
}




/* Flipbook container overrides */
.stf__parent {
    width:auto !important;
}

.stf__item {
    overflow: hidden !important;
}

/* Pages */
.page {
    background: #fff;
    overflow: hidden;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.03);
}

.page img,
.stf__item img,
.stf__item > img,
.stf__item .page img {
    display:block !important;
    width:100% !important;
    height:auto !important;
    max-width:none !important;
    max-height:100% !important;
    object-fit:contain !important;
}


/* Page counter */
#page-info {

    flex:0 0 20px;

    text-align:center;

    line-height:20px;

    color:#777;

    font-size:.8rem;
}




#zoom-container {

    flex:1 1 auto;

    min-height:0;

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

    touch-action:pan-y;
}




#book {
    touch-action: pan-y;
}





@media (min-width: 769px) {

    .menu-page {
        height:100%;
    }

    }



.menu-viewer {
    position: relative;
    z-index: 10;
    isolation: isolate;
}





#page-info {
    flex:0 0 auto;
    height:22px;
    line-height:22px;

    text-align:center;

    color: rgba(0,0,0,.45);

    font-family: "Cormorant Garamond", serif;
    font-size: .9rem;

    pointer-events:none;
}


/*---------------------------*/





#page-controls {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 6px 0;
}


.page-nav {

    border:none;
    background:none;

    font-family: "Cormorant Garamond", serif;

    font-size:1.8rem;

    color:rgba(0,0,0,.55);

    padding:0 12px;

    cursor:pointer;

    line-height:1;
}


.page-nav:active {
    transform:scale(.9);
}


body.night-mode .page-nav {
    color:rgba(255,255,255,.65);
}




/*--------------------------*/


#zoom-container,
#book,
.stf__parent,
.stf__wrapper {
    z-index: 1;
}





/* Night mode */

body.night-mode .menu-page  {
    background:#111;
}


body.night-mode #page-info {
    background:#111;
    color:rgba(255,255,255,.65);
}





/* optional: make the viewer area dark around the book */
body.night-mode .menu-viewer{
    background:#111;
}


/* keep book pages white */
.menu-page.night .page {
    background:#fff;
}


/* button appearance */
.theme-button {
    min-width:42px;
}


body.night-mode .site-body > footer {
    color:red !important;
}


.menu-page.night #page-info {
    color:rgba(255,255,255,.65);
    background:#111;
}



body.night-mode footer {
    background:#111;
    color:rgba(255,255,255,.45);
}




@keyframes page-edge-shake {

    0% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-8px);
    }

    50% {
        transform: translateX(6px);
    }

    75% {
        transform: translateX(-3px);
    }

    100% {
        transform: translateX(0);
    }

}


.book-edge-shake {
    animation: page-edge-shake 0.3s ease;
}



@media (max-width:500px) {
    .menu-header {
        padding:6px 10px;
    }
    .menu-viewer {
        padding-bottom:0;
    }
    

    #zoom-container {
        flex:1 1 auto;
        min-height:0;
        overflow:hidden;
    }



    .page-nav:active {
        transform:scale(.9);
    }


    body.night-mode .page-nav {
        color:rgba(255,255,255,.65);
    }
    
    .site-body > footer {
        flex:0 0 10px;
        height:10px;
    
        font-size:.45rem;
        letter-spacing:.1em;

        opacity:.25;
        display:none;
    }
    
    

    #page-controls {
        position: relative;
        z-index: 5;
    
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
    
        flex: 0 0 auto;
    
        padding: 6px 0 calc(env(safe-area-inset-bottom) + 4px);
    
        opacity: .75;
        transition: opacity .2s ease;
    }
    
        
    


    #zoom-container {
        position:relative;
        z-index:1;
    }

    #page-controls {
        position:relative;
        z-index:5;
        height:22px;
        flex-basis:22px;
        transition:opacity .2s ease;
    }
    
    
    .page-nav {
        font-size:1.45rem;

        padding:0 8px;

        line-height:26px;
    }
    
    #page-info {
        flex:0 0 auto;

        min-width:45px;

        height:18px;
        line-height:18px;

        font-size:.75rem;
        background:transparent !important;
        border:none;
        outline:none;
        box-shadow:none;
    
    
    }
    
    
    

    .language-switch {
        margin-top: 2px;
        margin-bottom:0;
        gap: 6px;
    }

    .lang {
        padding:3px 10px;
        font-size:.75rem;
    }
            

}