body{
    background:#080707;
    margin:0;
    padding:80px 20px;
    font-family:Georgia, serif;
}


/* =========================
   MAIN CODEX FRAME
========================= */

.codex-book{
    max-width:900px;
    margin:auto;
    background:#efe2cb;
    padding:70px;
    border:14px solid #5c4331;

    box-shadow:
        0 0 60px rgba(0,0,0,.7);
}


/* =========================
   BOOK ENGINE
========================= */

.book{
    position:relative;
    perspective:2200px;
}


/* =========================
   COVER
========================= */

.front-page{
    position:relative;
    overflow:hidden;

    padding:55px 45px;

    background:
        radial-gradient(
            circle at 20% 15%,
            rgba(255,245,210,.28),
            transparent 28%
        ),
        radial-gradient(
            circle at 80% 80%,
            rgba(92,58,28,.10),
            transparent 30%
        ),
        linear-gradient(
            90deg,
            rgba(75,45,22,.08),
            transparent 8%,
            transparent 92%,
            rgba(75,45,22,.08)
        ),
        #e7d2aa;

    border:2px solid #6f4d2f;
    border-radius:2px;

    box-shadow:
        inset 0 0 0 8px rgba(73,45,24,.18),
        inset 0 0 35px rgba(70,40,18,.28),
        0 12px 35px rgba(0,0,0,.35);

    transition:
        transform 1.3s ease,
        opacity 1.3s ease;

    transform-origin:left center;
}


/* inner cover border */

.front-page::before{
    content:"";

    position:absolute;
    inset:14px;

    border:1px solid rgba(78,48,27,.55);

    box-shadow:
        inset 0 0 18px rgba(76,44,20,.18);

    pointer-events:none;
}


/* bottom ornament */

.front-page::after{
    content:"✦";

    position:absolute;
    left:50%;
    bottom:18px;

    transform:translateX(-50%);

    color:#6b482b;
    font-size:20px;
    opacity:.7;
}


/* OPEN COVER */

.book.open .front-page{
    position:absolute;
    top:0;
    left:0;

    width:100%;
    box-sizing:border-box;

    z-index:0;

    transform:
        rotateY(-178deg)
        translateX(-8px);

    transform-origin:left center;

    opacity:.07;

    pointer-events:none;
}


/* =========================
   COVER CONTENT
========================= */

.codex-cover{
    position:relative;
    z-index:1;

    text-align:center;
    margin-bottom:80px;
}


/* upper ornaments */

.codex-cover::before,
.codex-cover::after{
    content:"❦";

    position:absolute;
    top:-10px;

    font-size:28px;
    color:#6b482b;
    opacity:.55;
}

.codex-cover::before{
    left:-5px;
}

.codex-cover::after{
    right:-5px;
}


/* CREST */

.crest{
    width:220px !important;
    max-width:220px !important;

    height:auto !important;

    display:block !important;

    margin:
        0 auto 40px !important;

    object-fit:contain !important;
}


/* COVER TITLE */

.codex-cover h1{
    margin:0;

    font-family:"Cinzel", serif;
    font-size:54px;
    font-weight:700;

    letter-spacing:5px;

    color:#2f2016;

    text-shadow:
        0 1px 0 rgba(255,255,255,.18),
        0 2px 8px rgba(76,35,15,.18);
}


/* COVER SUBTITLE */

.codex-cover p{
    margin-top:18px;

    font-style:italic;
    letter-spacing:3px;
}


/* ENTER BUTTON */

#enterCodex{
    margin-top:40px;

    padding:18px 35px;

    background:#111;
    color:#e8d6b0;

    border:1px solid #8a6c4b;

    cursor:pointer;

    font-family:"Cinzel", serif;
    font-size:18px;
    font-weight:600;

    letter-spacing:3px;

    transition:.3s;

    box-shadow:
        inset 0 0 0 1px rgba(197,151,74,.25),
        0 5px 14px rgba(0,0,0,.25);
}

#enterCodex:hover{
    background:#2c1e14;
}


/* =========================
   INNER PAGES
========================= */

.page{
    display:none;

    position:relative;

    max-width:760px;

    margin:
        40px auto 0;

    padding:
        48px 42px 64px;

    box-sizing:border-box;

    transform-origin:left center;
    backface-visibility:hidden;

    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(255,245,215,.22),
            transparent 35%
        ),
        linear-gradient(
            90deg,
            rgba(80,48,24,.06),
            transparent 10%,
            transparent 90%,
            rgba(80,48,24,.06)
        ),
        #ead7b2;

    border:
        1px solid #7a5a3a;

    box-shadow:
        inset 0 0 28px rgba(70,40,18,.16),
        0 8px 20px rgba(0,0,0,.18);
}


/* Hide all manuscript pages before opening */

.book:not(.open) .page{
    display:none !important;
}


/* Active manuscript page */

.page.active{
    display:block;

    animation:
        pageTurnIn .75s
        cubic-bezier(.2,.7,.2,1);
}


/* PAGE TITLE */

.page h2{
    margin-top:0;
    margin-bottom:30px;

    padding-bottom:16px;

    text-align:center;

    font-family:"Cinzel", serif;
    font-size:32px;
    font-weight:700;

    letter-spacing:2px;

    color:#3d2a1f;

    border-bottom:
        1px solid #7a5a3a;
}


/* PAGE TEXT */

.page p{
    max-width:680px;

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

    font-size:21px;
    line-height:1.9;

    color:#34261d;
}


/* =========================
   PAGE TURN
========================= */

@keyframes pageTurnIn{

    0%{
        opacity:.15;

        transform:
            perspective(1600px)
            rotateY(-72deg)
            translateX(-18px);

        box-shadow:
            -35px 8px 45px rgba(0,0,0,.45);
    }

    55%{
        opacity:.75;

        transform:
            perspective(1600px)
            rotateY(-18deg)
            translateX(-4px);

        box-shadow:
            -18px 5px 30px rgba(0,0,0,.30);
    }

    100%{
        opacity:1;

        transform:
            perspective(1600px)
            rotateY(0deg)
            translateX(0);

        box-shadow:
            inset 0 0 18px rgba(45,20,10,.18),
            inset 0 0 55px rgba(55,20,8,.32),
            0 10px 30px rgba(0,0,0,.45);
    }
}

/* =========================
   PAGE TURN DIRECTIONS
========================= */

.book.turn-next .page.active{
    animation:
        pageTurnNext .85s
        cubic-bezier(.2,.7,.2,1);
}

.book.turn-prev .page.active{
    animation:
        pageTurnPrev .85s
        cubic-bezier(.2,.7,.2,1);
}


@keyframes pageTurnNext{

    0%{
        opacity:.15;

        transform:
            perspective(1600px)
            rotateY(-72deg)
            translateX(-18px);

        box-shadow:
            -35px 8px 45px rgba(0,0,0,.45);
    }

    55%{
        opacity:.75;

        transform:
            perspective(1600px)
            rotateY(-18deg)
            translateX(-4px);
    }

    100%{
        opacity:1;

        transform:
            perspective(1600px)
            rotateY(0deg)
            translateX(0);
    }
}


@keyframes pageTurnPrev{

    0%{
        opacity:.15;

        transform:
            perspective(1600px)
            rotateY(72deg)
            translateX(18px);

        box-shadow:
            35px 8px 45px rgba(0,0,0,.45);
    }

    55%{
        opacity:.75;

        transform:
            perspective(1600px)
            rotateY(18deg)
            translateX(4px);
    }

    100%{
        opacity:1;

        transform:
            perspective(1600px)
            rotateY(0deg)
            translateX(0);
    }
}

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

.codex-controls{
    display:flex;

    align-items:center;
    justify-content:space-between;

    margin-top:30px;
}


.codex-controls button{
    padding:12px 20px;

    background:#111;
    color:#d6b07a;

    border:
        1px solid #5b4633;

    cursor:pointer;

    font-family:"Cinzel", serif;
    font-weight:600;
}


.codex-controls button:hover:not(:disabled){
    background:#2b1f17;
}


.codex-controls button:disabled{
    opacity:.35;
    cursor:not-allowed;
}


/* PAGE COUNTER */

#pageCounter{
    text-align:center;

    font-size:15px;
    letter-spacing:2px;

    color:#6f5035;
}


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

@media(max-width:700px){

    body{
        padding:25px 10px;
    }

    .codex-book{
        padding:25px 15px;

        border-width:8px;
    }

    .front-page{
        padding:40px 20px;
    }

    .crest{
        width:150px !important;
        max-width:150px !important;
    }

    .codex-cover h1{
        font-size:34px;
        letter-spacing:3px;
    }

    #enterCodex{
        padding:14px 20px;
        font-size:14px;
    }

    .page{
        padding:
            35px 25px 45px;
    }

    .page h2{
        font-size:24px;
    }

    .page p{
        font-size:18px;
    }

}

/* =========================
   DARKER CODEX ATMOSPHERE
========================= */

.page h2{
    color:#2a1710;
    text-shadow:0 1px 2px rgba(70,25,10,.25);
}

.page p{
    color:#2b1c14;
}

/* =========================
   CREEPY ILLUMINATED INITIAL
========================= */

.page p:first-of-type::first-letter{
    float:left;

    font-family:"UnifrakturMaguntia", serif;
    font-size:64px;
    line-height:.8;

    margin-right:10px;
    margin-top:8px;

    color:#5a160f;

    text-shadow:
        0 1px 0 #c9a26b,
        0 0 8px rgba(90,22,15,.25);
}

/* =========================
   OCCULT TITLE ORNAMENT
========================= */

.page h2::before{
    content:"☩  ✦  ☾";
    display:block;

    font-size:16px;
    letter-spacing:12px;

    color:#6b2b1f;
    opacity:.65;

    margin-bottom:12px;
}

.page h2::after{
    content:"✦";
    display:block;

    font-size:12px;
    color:#6b2b1f;

    margin-top:14px;
    opacity:.55;
}

/* =========================
   AGED / BURNT PARCHMENT
========================= */

.page{
    background:
        radial-gradient(
            ellipse at center,
            rgba(255,238,190,.18) 0%,
            rgba(205,166,105,.12) 55%,
            rgba(65,25,12,.30) 100%
        ),
        #d8bd8c;

    box-shadow:
        inset 0 0 18px rgba(45,20,10,.18),
        inset 0 0 55px rgba(55,20,8,.32),
        0 10px 30px rgba(0,0,0,.45);
}

/* =========================
   OCCULT WATERMARK
========================= */

.page{
    overflow:hidden;
}

.page::after{
    content:"✦  OSSVARIUM  ✦";

    position:absolute;
    left:50%;
    bottom:28px;

    transform:translateX(-50%);

    font-family:"Cinzel", serif;
    font-size:11px;
    letter-spacing:4px;

    color:#681c16;
    opacity:.45;

    border-top:1px solid rgba(104,28,22,.45);
    border-bottom:1px solid rgba(104,28,22,.45);

    padding:5px 14px;

    z-index:2;
}

.page::before{
    content:"☩";

    position:absolute;
    inset:0;

    display:flex;
    align-items:center;
    justify-content:center;

    font-family:"Cinzel", serif;
    font-size:280px;
    line-height:1;

    color:#4e170f;
    opacity:.035;

    text-shadow:
    0 0 2px rgba(78,23,15,.18),
    0 0 12px rgba(78,23,15,.10);

    transform: translateY(18px);

    z-index:0;
    pointer-events:none;
}

.page h2,
.page p{
    position:relative;
    z-index:1;
}

/* =========================
   SUBTLE AGE STAINS
========================= */

.page{
    background:
        radial-gradient(
            ellipse at 8% 15%,
            rgba(65,24,12,.13),
            transparent 18%
        ),
        radial-gradient(
            ellipse at 92% 82%,
            rgba(70,26,12,.11),
            transparent 20%
        ),
        radial-gradient(
            ellipse at 80% 10%,
            rgba(80,35,15,.06),
            transparent 15%
        ),
        radial-gradient(
            ellipse at center,
            rgba(255,238,190,.20) 0%,
            rgba(205,166,105,.10) 58%,
            rgba(65,25,12,.28) 100%
        ),
        #d8bd8c;
}

/* =========================
   RETURN TO OSSVARIUM
========================= */

.return-ossvarium,
.return-ossvarium:visited{
    display:block;
    width:max-content;

    margin:0 auto 22px;
    padding:8px 16px;

    font-family:"Cinzel", serif;
    font-size:11px;
    letter-spacing:2px;

    color:#8f684d;
    text-decoration:none;

    border-bottom:1px solid rgba(120,75,48,.35);

    opacity:.75;

    transition:
        color .3s ease,
        opacity .3s ease,
        letter-spacing .3s ease,
        text-shadow .3s ease;
}

.return-ossvarium:hover{
    color:#c08a66;
    opacity:1;
    letter-spacing:3px;

    text-shadow:
        0 0 8px rgba(120,40,25,.35);
}

/* =========================
   RETURN TO OSSVARIUM
========================= */

.return-ossvarium,
.return-ossvarium:link,
.return-ossvarium:visited{
    position:fixed;
    top:22px;
    left:24px;

    z-index:9999;

    display:block;
    width:max-content;

    padding:10px 16px;

    font-family:"Cinzel", serif;
    font-size:11px;
    font-weight:600;
    letter-spacing:2px;

    color:#b88963;
    background:rgba(10,7,6,.88);

    text-decoration:none;

    border:1px solid rgba(139,83,55,.45);

    box-shadow:
        inset 0 0 10px rgba(105,35,22,.12),
        0 4px 14px rgba(0,0,0,.35);

    opacity:.8;

    transition:
        color .3s ease,
        border-color .3s ease,
        opacity .3s ease,
        letter-spacing .3s ease,
        box-shadow .3s ease;
}

.return-ossvarium:hover{
    color:#d7a079;
    opacity:1;
    letter-spacing:3px;

    border-color:rgba(165,78,55,.7);

    box-shadow:
        inset 0 0 12px rgba(120,35,25,.18),
        0 0 12px rgba(120,35,25,.20);
}

/* =========================
   THE OATH — FINAL SEAL
========================= */

.oath-page{
    text-align:center;
}

.oath-page p{
    max-width:620px;
}

.oath-page p:last-of-type{
    margin-top:38px;

    font-family:"Cinzel", serif;
    font-size:17px;
    font-weight:700;

    letter-spacing:3px;

    color:#5a160f;

    text-transform:uppercase;

    text-shadow:
        0 1px 0 rgba(210,170,110,.25),
        0 0 8px rgba(90,22,15,.15);
}

/* =========================
   ARCHIVE AWAKENING
========================= */

.book.open{
    animation:archiveAwakening 1.25s ease-out;
}

@keyframes archiveAwakening{

    0%{
        box-shadow:
            0 0 0 rgba(100,15,10,0);
    }

    35%{
        box-shadow:
            0 0 35px rgba(110,20,15,.20),
            0 0 80px rgba(80,10,8,.12);
    }

    65%{
    box-shadow:
        0 0 70px rgba(190,25,15,.75),
        0 0 150px rgba(150,10,8,.55),
        0 0 220px rgba(100,0,0,.35);
}

    100%{
        box-shadow:
            0 0 0 rgba(100,15,10,0);
    }
}

/* =========================
   CODEX CONTENTS PANEL
========================= */

.codex-contents{
    display:none;

    margin:25px auto 10px;
    padding:28px 30px;

    max-width:720px;

    background:
        radial-gradient(
            ellipse at center,
            rgba(255,238,190,.16),
            rgba(120,70,35,.10)
        ),
        #d9bf92;

    border:1px solid #7a5a3a;

    box-shadow:
        inset 0 0 25px rgba(60,30,15,.20),
        0 8px 20px rgba(0,0,0,.25);
}

.codex-contents.open{
    display:block;
}

.contents-header{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;

    margin-bottom:22px;

    color:#5a261c;
}

.contents-header h3{
    margin:0;

    font-family:"Cinzel", serif;
    font-size:20px;
    letter-spacing:3px;
}

.chapter-link{
    display:block;

    width:100%;

    padding:8px 12px;

    background:transparent;

    border:none;
    border-bottom:1px solid rgba(90,55,35,.25);

    text-align:left;

    font-family:"Cinzel", serif;
    font-size:13px;
    letter-spacing:1px;

    color:#3b251a;

    cursor:pointer;

    transition:
        color .25s ease,
        padding-left .25s ease,
        background .25s ease;
}

.chapter-link:hover{
    color:#7a2018;

    padding-left:20px;

    background:
        rgba(110,45,30,.05);
}

.codex-center-controls{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
}

#contentsBtn{
    display:none;
}

body.archives-open #contentsBtn{
    display:block;
}