/* =====================================================
   IUDEX ARCHIVES
===================================================== */


* {
    box-sizing: border-box;
}


html,
body {
    margin: 0;
    padding: 0;

    background: darkslategrey;

    color: #888;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 12px;
}


/* =====================================================
   ENTER SCREEN
===================================================== */


#enter-screen {

    position: fixed;

    inset: 0;

    z-index: 9999;

    background:
        radial-gradient(
            ellipse at center,
            #171717 0%,
            #080808 55%,
            #030303 100%
        );

    display: flex;

    justify-content: center;

    align-items: center;

    transition:
        opacity 1s ease,
        filter 1s ease;

}


/* subtle grain */

#enter-screen::before {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: .10;

    background-image:
        repeating-radial-gradient(
            circle at 0 0,
            #fff 0,
            transparent 1px,
            transparent 3px
        );

    background-size: 5px 5px;

}


/* slight darkness around edges */

#enter-screen::after {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    box-shadow:
        inset 0 0 180px #000;

}


.enter-content {

    text-align: center;

    position: relative;

    z-index: 2;

}


.enter-title {

    font-family:
        "Cinzel",
        serif;

    font-size: clamp(
        55px,
        9vw,
        130px
    );

    font-weight: normal;

    font-style: normal;

    letter-spacing: -4px;

    color: #454f4a;

    text-shadow:
        0 0 20px rgba(255,255,255,.08);

}


.enter-subtitle {

    margin-top: 4px;

    color: #4d4d4d;

    font-size: 10px;

    letter-spacing: 2px;

}


.enter-content button {

    margin-top: 55px;

    background: none;

    border: none;

    color: #aaa;

    font-family:
        Arial,
        sans-serif;

    font-size: 11px;

    letter-spacing: 4px;

    cursor: pointer;

    padding: 8px 18px;

}


.enter-content button:hover {

    color: #fff;

    background: #11151a;

}


.enter-warning {

    margin-top: 35px;

    color: #303030;

    font-size: 8px;

    letter-spacing: 1px;

}


/* entrance animation */

#enter-screen.leave {

    opacity: 0;

    filter:
        blur(4px)
        brightness(.3);

}


/* =====================================================
   MAIN ARCHIVE
===================================================== */


#archive {

    width: 850px;

    max-width: 94%;

    margin: 35px auto 80px;

    min-height: 700px;

    border-left: 1px solid #202020;

    border-right: 1px solid #202020;

    background: #0c0c0c;

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

}


/* =====================================================
   HEADER
===================================================== */


header {

    padding: 18px 22px;

}


.header-title {

    font-family:
        "Times New Roman",
        serif;

    font-size: 27px;

    color: #c5c5c5;

    letter-spacing: 1px;

}


.header-small {

    color: #444;

    margin-top: 4px;

    font-size: 9px;

}


.horizontal-line {

    border-top:
        1px solid #292929;

}


/* =====================================================
   LAYOUT
===================================================== */


.layout {

    display: grid;

    grid-template-columns:
        145px 1fr;

    min-height: 650px;

}


/* =====================================================
   SIDEBAR
===================================================== */


aside {

    border-right:
        1px solid #222;

    padding:
        20px 15px;

    background:
        linear-gradient(
            90deg,
            #090909,
            #0d0d0d
        );

}


.side-heading {

    color: #444;

    font-size: 8px;

    letter-spacing: 2px;

    margin-bottom: 7px;

}


aside a {

    display: block;

    color: #777;

    text-decoration: none;

    font-size: 11px;

    padding: 3px 0;

}


aside a:hover {

    color: #ddd;

    padding-left: 4px;

}


.side-info {

    margin-top: 70px;

    border-top:
        1px dotted #292929;

    padding-top: 10px;

    color: #3d3d3d;

    font-size: 8px;

    line-height: 1.7;

}


/* =====================================================
   MAIN
===================================================== */


main {

    padding:
        28px 32px;

}


.page-heading {

    font-family:
        "Times New Roman",
        serif;

    font-size: 28px;

    color: #c1c1c1;

}


.small-text {

    color: #444;

    font-size: 9px;

    margin-top: 3px;

}


.intro {

    width: 500px;

    max-width: 100%;

    margin-top: 30px;

    line-height: 1.7;

    color: #777;

}


a {

    color: #999;

    text-decoration:
        underline;

    text-decoration-color:
        #333;

}


a:hover {

    color: white;

    background: #171717;

}


/* =====================================================
   SECTIONS
===================================================== */


.section {

    margin-top: 55px;

}


.section-title {

    border-bottom:
        1px solid #252525;

    padding-bottom: 5px;

    color: #555;

    font-size: 9px;

    letter-spacing: 2px;

}


.entry {

    padding: 9px 4px;

    border-bottom:
        1px dotted #202020;

}


.entry-number {

    color: #3d3d3d;

    margin-right: 15px;

}


.entry-date {

    float: right;

    color: #3d3d3d;

    font-size: 9px;

}


.note {

    margin-top: 15px;

    padding: 12px;

    border-left:
        1px solid #333;

    color: #555;

    line-height: 1.7;

}


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


.bottom {

    margin-top: 100px;

    padding-top: 10px;

    border-top:
        1px dotted #202020;

    color: #333;

    font-size: 8px;

    line-height: 1.8;

}


/* =====================================================
   SECRET LINK
===================================================== */


.hidden-link {

    position: fixed;

    right: 2px;

    bottom: 2px;

    color: #0e0e0e;

    font-size: 8px;

    text-decoration: none;

}


.hidden-link:hover {

    color: #555;

}


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


@media(max-width: 650px) {

    #archive {

        width: 94%;

        margin-top: 15px;

    }


    .layout {

        grid-template-columns:
            1fr;

    }


    aside {

        border-right: none;

        border-bottom:
            1px solid #222;

    }


    .side-info {

        margin-top: 25px;

    }


    main {

        padding: 22px;

    }


    .enter-title {

        font-size: 55px;

    }

}