/* ==========================================================
   FAE MINX
   COMPLETE HOMEPAGE STYLESHEET
   ========================================================== */


/* ==========================================================
   PALETTE
   ========================================================== */

:root {
    --black: #0d0e0c;
    --near-black: #171715;
    --charcoal: #25231f;

    --paper: #cfc6b5;
    --ivory: #d9d0bf;
    --paper-dark: #bdb2a0;

    --ink: #292621;
    --soft-ink: #665f56;

    --plum: #6d4c59;
    --dark-plum: #3b2c33;

    --dusty-pink: #a9767f;
    --pale-pink: #c49b9d;

    --forest: #283129;
    --moss: #586257;

    --line: #6d675d;
}


/* ==========================================================
   GLOBAL
   ========================================================== */

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
}

body {
    margin: 0;
    padding: 32px 14px;

    min-height: 100vh;

    color: var(--ink);

    font-family: Verdana, Arial, sans-serif;
    font-size: 12px;
    line-height: 1.5;

    background-color: var(--black);

    background-image:
        radial-gradient(
            rgba(154,146,125,.25) .8px,
            transparent .8px
        );

    background-size: 7px 7px;
}

img {
    max-width: 100%;
}

a {
    transition:
        color .12s,
        background .12s,
        padding .12s;
}

::selection {
    color: white;
    background: var(--dusty-pink);
}


/* ==========================================================
   SITE
   ========================================================== */

.site-wrapper {
    width: 100%;
    max-width: 1100px;

    margin: 0 auto;

    background: var(--paper);

    border: 1px solid #70685f;

    outline: 5px solid #1a1917;

    box-shadow:
        0 0 0 7px #060606,
        11px 15px 38px rgba(0,0,0,.72);
}


/* ==========================================================
   MASTHEAD
   ========================================================== */

.site-header {
    position: relative;

    min-height: 190px;

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

    padding: 12px 30px 14px;

    overflow: hidden;

    background:
        linear-gradient(
            #10130f,
            #171916
        );

    border-bottom: 3px solid var(--dusty-pink);
}

.site-header::before {
    content: "";

    position: absolute;
    inset: 0;

    opacity: .065;

    background:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 3px,
            #fff 4px
        );

    pointer-events: none;
}

.header-logo {
    position: relative;
    z-index: 2;

    display: block;

    width: min(100%, 850px);
    height: auto;

    margin: -7px auto -9px;

    filter:
        drop-shadow(
            3px 4px 2px
            rgba(0,0,0,.45)
        );
}

.tagline {
    position: relative;
    z-index: 3;

    margin: 0;
    padding: 3px 10px;

    color: var(--pale-pink);

    background: rgba(5,5,5,.72);

    border: 1px solid #44393a;

    font-family: "Courier New", monospace;
    font-size: 9px;
    letter-spacing: 1.1px;
}


/* ==========================================================
   PAGE BODY
   ========================================================== */

.page-grid {
    display: grid;

    grid-template-columns:
        170px
        minmax(0,1fr)
        200px;

    gap: 13px;

    padding: 16px;

    background:
        linear-gradient(
            rgba(207,198,181,.96),
            rgba(207,198,181,.96)
        ),
        repeating-linear-gradient(
            -45deg,
            #9d9487,
            #9d9487 1px,
            transparent 1px,
            transparent 5px
        );
}

.left-sidebar,
.main-content,
.right-sidebar {
    position: relative;
    min-width: 0;
}


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

.left-sidebar {
    position: relative;
}


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

.navigation {
    position: relative;

    margin-bottom: 15px;

    overflow: hidden;

    background: var(--ivory);

    border: 1px solid var(--line);

    box-shadow:
        3px 3px 0
        rgba(49,45,41,.24);
}

.nav-heading {
    padding: 8px 9px 7px;

    color: #ddd5c8;

    background: var(--near-black);

    border-bottom: 2px solid var(--dusty-pink);

    font-family: "Courier New", monospace;
    font-size: 11px;
    letter-spacing: 1.5px;

    text-align: center;
}

.navigation nav {
    display: flex;
    flex-direction: column;

    padding: 7px;
}

.navigation a {
    display: block;

    padding: 7px;

    color: #33302b;

    border-bottom: 1px dotted #8e8679;

    font-family: "Courier New", monospace;
    font-size: 10px;

    text-decoration: none;
}

.navigation a:last-child {
    border-bottom: 0;
}

.navigation a.active {
    color: #fff;
    background: var(--moss);
}

.navigation a:hover {
    padding-left: 12px;

    color: white;
    background: var(--plum);
}


/* ==========================================================
   CREATURE FEATURE
   ========================================================== */

.creature-box {
    position: relative;

    margin-bottom: 18px;
    padding-bottom: 10px;

    overflow: hidden;

    background: #c9bfad;

    border: 1px solid var(--line);

    box-shadow:
        3px 3px 0
        rgba(49,45,41,.24);

    text-align: center;
}

.creature-heading {
    padding: 7px;

    color: #3f3a35;

    border-bottom: 1px solid #8b8274;

    font-family: Georgia, serif;
    font-size: 12px;
    font-style: italic;
}

.creature-photo-wrap {
    position: relative;

    width: 116px;
    height: 92px;

    margin: 12px auto 7px;
}

.creature-photo {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    border: 1px solid #555047;

    box-shadow:
        0 0 0 3px #ded3c1;
}

.creature-name {
    margin: 2px 6px 0;

    color: #51413f;

    font-family: Georgia, serif;
    font-size: 11px;
    font-weight: bold;
}

.creature-latin {
    margin: 0 6px 6px;

    color: #70595c;

    font-family: Georgia, serif;
    font-size: 8px;
    font-style: italic;
}

.creature-rule {
    width: 60px;

    margin: 6px auto;

    border-top: 1px solid #8a8174;
}

.creature-quote {
    margin: 6px 8px 1px;

    font-family: Georgia, serif;
    font-size: 9px;
    font-style: italic;
}


/* ==========================================================
   VISITOR COUNTER
   ========================================================== */

.visitor-composition {
    position: relative;

    width: 170px;
    min-height: 158px;

    margin: 21px auto 2px;

    overflow: visible;
}

.visitor-box {
    position: relative;

    z-index: 2;

    width: 145px;

    margin: 25px auto 0;
    padding: 10px 9px 9px;

    background: #b9b4ad;

    border: 1px solid #68635d;

    box-shadow:
        3px 4px 0
        rgba(60,56,50,.27);

    text-align: center;
}

.visitor-title {
    margin: 0 0 7px;

    color: #5d5450;

    font-family: Georgia, serif;
    font-size: 10px;
    font-style: italic;
}

.counter {
    position: relative;
    z-index: 5;

    padding: 4px 2px;

    color: #d8ddcf;

    background: #0c0f0d;

    border: 2px inset #77756f;

    font-family: "Courier New", monospace;
    font-size: 16px;

    letter-spacing: 3px;

    text-shadow:
        0 0 5px #aab39c;
}

.last-updated {
    position: relative;
    z-index: 5;

    margin: 8px 0 0;

    color: #655f59;

    font-family: "Courier New", monospace;
    font-size: 7px;

    letter-spacing: .4px;
}

.visitor-ornament {
    position: absolute;

    z-index: 4;

    left: 50%;
    bottom: -15px;

    width: 230px;
    height: auto;

    max-width: none;

    transform: translateX(-50%);

    object-fit: contain;

    pointer-events: none;

    opacity: .96;
}


/* ==========================================================
   WELCOME
   ========================================================== */

.welcome-box {
    position: relative;

    min-height: 500px;

    margin-bottom: 14px;
    padding-bottom: 31px;

    overflow: hidden;

    background: #d9cfbd;

    border: 3px double #6e685e;

    box-shadow:
        3px 3px 0
        rgba(49,45,41,.23);
}

.welcome-heading {
    position: relative;

    z-index: 5;

    width: fit-content;

    margin: 17px auto 0;
    padding: 4px 17px;

    color: #ddd5c8;

    background: #11110f;

    border: 1px solid #49433d;

    font-family: "Courier New", monospace;
    font-size: 9px;

    letter-spacing: 2px;
}

.welcome-flourish {
    position: relative;

    z-index: 2;

    display: block;

    width: 88%;
    max-width: 540px;
    height: auto;

    margin: 2px auto -10px;

    opacity: .94;

    filter:
        contrast(.94);
}

.welcome-copy {
    position: relative;

    z-index: 4;

    max-width: 560px;

    margin: 5px auto 0;

    padding: 0 42px;
}

.welcome-copy h1 {
    margin: 0 0 22px;

    color: var(--plum);

    font-family: Georgia, serif;
    font-size: 27px;
    font-style: italic;
    font-weight: normal;
}

.welcome-copy p {
    margin: 0 0 14px;

    font-size: 11px;
}

.welcome-note {
    margin-top: 24px !important;

    color: #6b635a;

    font-family: Georgia, serif;
    font-size: 10px !important;
    font-style: italic;
}

.signature {
    margin-top: 24px !important;

    color: #8a676e;

    font-family: "Courier New", monospace;
    font-size: 8px !important;

    text-align: right;
}

.welcome-corner {
    position: absolute;

    z-index: 3;

    right: -30px;
    bottom: -30px;

    width: 195px;
    height: 195px;

    max-width: none;

    object-fit: contain;

    pointer-events: none;

    opacity: .68;
}


/* ==========================================================
   WHAT'S NEW
   ========================================================== */

.updates-box {
    position: relative;

    min-height: 255px;

    margin-bottom: 14px;
    padding: 15px 16px 20px;

    overflow: hidden;

    background: #c9bda7;

    border: 1px solid var(--line);
    border-top: 5px solid var(--near-black);

    box-shadow:
        3px 3px 0
        rgba(49,45,41,.23);
}

.updates-box h2 {
    margin: 0;

    color: #443e38;

    font-family: Georgia, serif;
    font-size: 17px;
    font-style: italic;
    font-weight: normal;

    text-align: center;
}

.updates-divider {
    display: block;

    width: 82%;
    max-width: 430px;
    height: 52px;

    margin: 1px auto 7px;

    object-fit: contain;

    opacity: .88;
}

.update {
    position: relative;
    z-index: 3;

    display: grid;

    grid-template-columns: 78px 1fr;

    gap: 9px;

    padding: 9px 0;

    border-bottom: 1px dotted #877d70;
}

.update time {
    color: var(--plum);

    font-family: "Courier New", monospace;
    font-size: 9px;
    font-weight: bold;
}

.update p {
    margin: 0;

    font-family: "Courier New", monospace;
    font-size: 9px;
}

.more-link {
    position: relative;
    z-index: 4;

    display: block;

    margin-top: 10px;

    color: #604951;

    font-family: Georgia, serif;
    font-size: 9px;
    font-style: italic;

    text-align: right;
}

.updates-accent {
    position: absolute;

    z-index: 1;

    left: -24px;
    bottom: -25px;

    width: 135px;
    height: 135px;

    max-width: none;

    object-fit: contain;

    pointer-events: none;

    opacity: .46;
}


/* ==========================================================
   INTERNET JUNK
   ========================================================== */

.junk-box {
    position: relative;

    min-height: 255px;

    margin-bottom: 14px;

    overflow: hidden;

    color: #d0c5ba;

    background: #1d1b1a;

    border: 1px solid #574f4c;

    box-shadow:
        3px 3px 0
        rgba(49,45,41,.28);
}

.junk-heading {
    display: flex;
    flex-direction: column;

    padding: 8px 12px;

    background: #121210;

    border-bottom: 2px solid #76505a;
}

.junk-heading span {
    color: #756c66;

    font-family: "Courier New", monospace;
    font-size: 7px;
}

.junk-heading strong {
    color: #c8b9b0;

    font-family: "Courier New", monospace;
    font-size: 10px;
    font-weight: normal;

    letter-spacing: 2px;
}

.junk-content {
    min-height: 205px;

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

    padding: 18px;

    background-image:
        radial-gradient(
            rgba(181,160,148,.16) .7px,
            transparent .7px
        );

    background-size: 6px 6px;
}

.junk-content p {
    margin: 0;

    color: #9d767e;

    font-family: "Courier New", monospace;
    font-size: 9px;

    text-align: center;
}


/* ==========================================================
   UNDER CONSTRUCTION
   ========================================================== */

.construction-box {
    height: 72px;

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

    color: #c6bbb0;
    background: #171614;

    border: 1px solid #49413d;

    text-align: center;
}

.construction-box p {
    margin: 0;
    padding: 0 20px;

    font-family: "Courier New", monospace;
    font-size: 7px;

    letter-spacing: .5px;
}

.construction-box strong {
    color: #b27a84;

    font-weight: normal;
    letter-spacing: 1px;
}


/* ==========================================================
   CURRENTLY
   ========================================================== */

.currently-box {
    position: relative;

    margin-bottom: 14px;
    padding: 0 11px 11px;

    overflow: hidden;

    color: #d6ccc2;

    background: #191817;

    border: 1px solid #544a49;

    box-shadow:
        3px 3px 0
        rgba(49,45,41,.28);
}

.currently-box h2 {
    margin: 0 -11px;

    padding: 10px 11px 2px;

    color: #bd8992;

    font-family: Georgia, serif;
    font-size: 18px;
    font-style: italic;
    font-weight: normal;
}

.currently-date {
    margin: 0 0 1px;

    color: #746a65;

    font-family: "Courier New", monospace;
    font-size: 7px;

    letter-spacing: 2px;
}

.currently-divider {
    display: block;

    width: 112%;
    max-width: none;
    height: 42px;

    margin: -2px -6% -2px;

    object-fit: contain;

    opacity: .78;
}

.currently-box dl {
    margin: 0;
}

.currently-box dl div {
    padding: 6px 0;

    border-bottom: 1px dotted #4e4845;
}

.currently-box dl div:last-child {
    border-bottom: none;
}

.currently-box dt {
    color: #956b74;

    font-family: "Courier New", monospace;
    font-size: 7px;
    font-weight: bold;

    letter-spacing: .5px;

    text-transform: uppercase;
}

.currently-box dd {
    margin: 1px 0 0;

    color: #d9cec5;

    font-family: Georgia, serif;
    font-size: 10px;
    font-style: italic;
}


/* ==========================================================
   NEXT APPEARANCE
   ========================================================== */

.appearance-box {
    position: relative;

    margin-bottom: 14px;

    overflow: hidden;

    background: #bea3a5;

    border: 1px solid #69585b;

    box-shadow:
        3px 3px 0
        rgba(49,45,41,.25);

    text-align: center;
}

.appearance-heading {
    padding: 8px;

    color: #d7cfc4;

    background: #30262a;

    font-family: "Courier New", monospace;
    font-size: 9px;

    letter-spacing: 1.6px;
}

.appearance-content {
    padding: 14px 9px 17px;
}

.appearance-content p {
    margin: 3px 0;

    font-family: Georgia, serif;
    font-size: 10px;
}

.appearance-label {
    color: #785f65;

    font-family: "Courier New", monospace !important;
    font-size: 7px !important;

    letter-spacing: 1px;
}

.appearance-content strong {
    font-family: Georgia, serif;
    font-size: 11px;
}

.small-button {
    display: inline-block;

    margin-top: 10px;
    padding: 5px 9px;

    color: #d8d1c7;

    background: #292a26;

    border: 1px solid #141511;

    font-family: "Courier New", monospace;
    font-size: 8px;

    text-decoration: none;
}

.small-button:hover {
    color: white;
    background: var(--plum);
}


/* ==========================================================
   FAIR WARNING
   ========================================================== */

.warning-box {
    position: relative;

    min-height: 185px;

    padding: 19px 12px 15px;

    overflow: hidden;

    color: #d5cbc1;

    background: #11110f;

    border: 1px solid #514945;

    box-shadow:
        3px 3px 0
        rgba(49,45,41,.28);

    text-align: center;
}

.warning-eyebrow {
    margin: 0;

    color: #89676e;

    font-family: "Courier New", monospace;
    font-size: 7px;

    letter-spacing: 2px;
}

.warning-box h2 {
    margin: 3px 0 8px;

    color: #c3b5ab;

    font-family: Georgia, serif;
    font-size: 16px;
    font-style: italic;
    font-weight: normal;
}

.warning-rule {
    width: 48px;

    margin: 0 auto 8px;

    border-top: 1px solid #655751;
}

.warning-list {
    margin: 0;

    color: #b6aaa0;

    font-family: Georgia, serif;
    font-size: 9px;
    font-style: italic;

    line-height: 1.65;
}


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

.site-footer {
    position: relative;

    min-height: 0;

    padding: 18px 15px 17px;

    overflow: hidden;

    color: #bdb3a8;

    background:
        linear-gradient(
            90deg,
            #111210,
            #211e1c,
            #111210
        );

    border-top: 3px solid var(--dusty-pink);

    text-align: center;
}

.footer-rule {
    width: 330px;
    max-width: 78%;

    display: flex;
    align-items: center;

    gap: 12px;

    margin: 0 auto 13px;
}

.footer-rule span {
    flex: 1;

    height: 1px;

    background: #554e49;
}

.footer-rule b {
    color: #96757b;

    font-family: Georgia, serif;
    font-size: 9px;
    font-weight: normal;

    letter-spacing: 3px;
}


/* ==========================================================
   88x31 PLACEHOLDERS
   ========================================================== */

.button-shelf {
    display: flex;
    flex-wrap: wrap;

    justify-content: center;

    gap: 5px;

    margin-bottom: 13px;
}

.fake-web-button {
    width: 88px;
    height: 31px;

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

    color: #ddd4c8;
    background: #282424;

    border: 1px solid #81766f;

    box-shadow:
        inset 1px 1px rgba(255,255,255,.18),
        inset -1px -1px rgba(0,0,0,.65);

    font-family: "Courier New", monospace;
    font-size: 8px;
    line-height: 1;

    text-align: center;
}

.pink-button {
    color: #211c1d;
    background: #ad7982;
}

.ivory-button {
    color: #282321;
    background: #c9c0b3;
}

.site-footer p {
    margin: 5px 0;

    font-family: "Courier New", monospace;
    font-size: 9px;
}

.copyright {
    color: #6f6a65;

    font-size: 8px !important;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 800px) {

    body {
        padding: 15px 7px;
    }

    .page-grid {
        grid-template-columns:
            150px
            minmax(0,1fr);
    }

    .right-sidebar {
        grid-column: 1 / -1;

        display: grid;

        grid-template-columns:
            repeat(3,1fr);

        gap: 10px;
    }

    .right-sidebar > * {
        margin-bottom: 0;
    }

    .visitor-composition {
        width: 150px;
        min-height: 158px;
    }

    .visitor-ornament {
        width: 215px;
    }

    .visitor-box {
        width: 140px;
    }
}


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

@media (max-width: 570px) {

    body {
        padding: 9px 5px;
    }

    .site-header {
        min-height: 145px;

        padding: 12px 8px;
    }

    .header-logo {
        width: 100%;

        margin: 0 auto -3px;
    }

    .tagline {
        font-size: 8px;

        text-align: center;
    }

    .page-grid {
        display: block;

        padding: 9px;
    }

    .left-sidebar {
        display: grid;

        grid-template-columns:
            1fr 1fr;

        gap: 10px;
    }

    .navigation {
        grid-column: 1 / -1;

        margin-bottom: 0;
    }

    .creature-box {
        margin-bottom: 0;
    }

    .visitor-composition {
        width: 100%;

        margin-top: 5px;
    }

    .main-content {
        margin-top: 13px;
    }

    .welcome-box {
        min-height: 0;
    }

    .welcome-flourish {
        width: 96%;
    }

    .welcome-copy {
        padding:
            0 23px
            30px;
    }

    .welcome-copy h1 {
        font-size: 23px;
    }

    .welcome-corner {
        width: 150px;
        height: 150px;

        right: -25px;
        bottom: -25px;
    }

    .updates-divider {
        width: 90%;
    }

    .updates-accent {
        width: 105px;
        height: 105px;
    }

    .right-sidebar {
        display: grid;

        grid-template-columns: 1fr;

        gap: 12px;

        margin-top: 12px;
    }

    .right-sidebar > * {
        margin-bottom: 0;
    }

    .currently-divider {
        width: 105%;

        margin-left: -2.5%;
        margin-right: -2.5%;
    }

}