/* ==========================================================================
   SEERIEQUERIES V3 // PERSISTENT SIDEBAR
   ==========================================================================
   PURPOSE:
   The sidebar is the threshold into the codex.

   VISUAL DIRECTION:
   Instead of one large antique-gold slab, the sidebar moves through a
   twilight gradient:
       midnight navy -> bruised violet -> wine shadow -> drowned blue

   The category headers behave like little palette keys to the larger archive.
   ========================================================================== */


/* ==========================================================================
   01. SIDEBAR SHELL
   ========================================================================== */

.sidebar {
    width: 250px;
    height: 100vh;

    position: sticky;
    top: 0;

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

    padding: 20px 24px;

    box-sizing: border-box;

    overflow-y: auto;

    color: var(--seer-moon);

    background:
        radial-gradient(
            circle at 20% 4%,
            rgba(54, 74, 110, 0.24),
            transparent 28%
        ),
        radial-gradient(
            circle at 76% 48%,
            rgba(93, 48, 91, 0.17),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            #101a2a 0%,
            #17152c 31%,
            #26172a 64%,
            #121b28 100%
        );

    border-right:
        1px solid rgba(169, 154, 226, 0.34);

    box-shadow:
        inset -10px 0 22px rgba(4, 5, 13, 0.2),
        10px 0 28px rgba(0, 0, 0, 0.18);
}


/* ==================== SUBTLE SCROLLBAR ==================== */

.sidebar {
    scrollbar-width: thin;
    scrollbar-color:
        rgba(169, 154, 226, 0.42)
        rgba(6, 7, 16, 0.2);
}


/* ==========================================================================
   02. SITE IDENTITY
   ========================================================================== */

.logo-area {
    width: 100%;

    margin-bottom: 10px;

    text-align: center;
}


.logo-area h2 {
    margin: 5px 0;

    font-family: 'Macondo', cursive, serif;
    font-size: 1.82rem;
    font-weight: bold;

    color: var(--seer-oracle-bright);

    letter-spacing: 0.5px;

    text-shadow:
        0 0 10px rgba(169, 154, 226, 0.28),
        0 2px 3px rgba(0, 0, 0, 0.62);
}


.logo-area h2::before,
.logo-area h2::after {
    color: var(--seer-relic);

    font-size: 0.72rem;

    opacity: 0.8;
}


.logo-area h2::before {
    content: "✦ ";
}


.logo-area h2::after {
    content: " ✦";
}


.logo-area p {
    margin: 0;

    color: #9d9bad;

    font-size: 0.78rem;
    line-height: 1.35;
}


/* ==========================================================================
   03. NAVIGATION FOUNDATION
   ========================================================================== */

.nav-links {
    width: 100%;
}


.nav-links h3 {
    margin: 18px 0 6px 0;
    padding: 6px 5px;

    box-sizing: border-box;

    border: 1px solid transparent;
    border-radius: 4px;

    font-family: 'Macondo', cursive, serif;
    font-size: 1.05rem;
    font-weight: bold;

    text-align: center;
    letter-spacing: 1px;
}


.nav-links ul {
    margin: 0;
    padding-left: 0;

    list-style: none;
}


.nav-links li {
    margin-bottom: 5px;
}


/* ==========================================================================
   04. CATEGORY PALETTES
   ========================================================================== */


/* ==================== THE CODEX ====================
   Inspired by THE WEB + DREAMSCAPE.
   ================================================= */

.category-works {
    color: #e7e4ef;

    background:
        linear-gradient(
            135deg,
            var(--entity_web-2),
            var(--entity_web-3),
            #274c68
        );

    border-color: rgba(178, 195, 204, 0.42) !important;

    box-shadow:
        inset 0 0 10px rgba(130, 144, 170, 0.1),
        0 0 9px rgba(70, 50, 95, 0.08);
}


/* ==================== MISCELLANEOUS MISCHIEF ====================
   Inspired by THE STRANGER + BERRY.
   =============================================================== */

.category-mischief {
    color: #fff2dc !important;

    background:
        linear-gradient(
            135deg,
            var(--entity_stranger-6),
            #a65067 42%,
            #563056 100%
        ) !important;

    border-color: rgba(239, 154, 128, 0.38) !important;

    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.72) !important;

    box-shadow:
        inset 0 0 10px rgba(242, 215, 168, 0.05) !important;
}


/* ==================== INFO & LINKS ====================
   Inspired by OATH OF THE DROWNED + EMPEROR.
   ==================================================== */

.category-info {
    color: #e8f1ed;

    background:
        linear-gradient(
            135deg,
            #294c59,
            #355d67,
            #477164
        );

    border-color: rgba(158, 216, 194, 0.34) !important;
}


/* ==========================================================================
   05. NAVIGATION LINKS
   ========================================================================== */

.nav-links a {
    display: block;

    padding: 6px 12px;

    box-sizing: border-box;

    color: #d4d1df;

    background:
        linear-gradient(
            90deg,
            rgba(12, 11, 25, 0.92),
            rgba(18, 17, 35, 0.92)
        );

    border:
        1px solid rgba(169, 154, 226, 0.12);

    border-radius: 4px;

    font-family: 'Courier New', monospace;
    font-size: 0.86rem;
    font-weight: bold;

    text-align: center;
    text-decoration: none;

    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        color 0.18s ease,
        background 0.18s ease;
}


.nav-links a:hover {
    transform: translateX(2px);

    color: #ffffff;

    background:
        linear-gradient(
            90deg,
            rgba(38, 33, 64, 0.96),
            rgba(25, 34, 53, 0.96)
        );

    border-color: rgba(169, 154, 226, 0.52);

    box-shadow:
        inset 0 0 8px rgba(169, 154, 226, 0.06),
        0 0 10px rgba(130, 185, 216, 0.08);
}


/* ==========================================================================
   06. NAVIGATION SIGILS
   ==========================================================================
   Supports BOTH legacy relative links and the new root-relative HTML links.
   ========================================================================== */

.nav-links a::before {
    display: inline-block;

    width: 18px;
    margin-right: 4px;

    color: var(--seer-oracle);

    text-align: center;

    opacity: 0.82;

    transition:
        color 0.18s ease,
        opacity 0.18s ease,
        text-shadow 0.18s ease,
        transform 0.18s ease;
}


/* ✦ Home */
.nav-links a[href="index.html"]::before,
.nav-links a[href="/index.html"]::before {
    content: "\2726";
}


/* ◈ Art Gallery */
.nav-links a[href="art.html"]::before,
.nav-links a[href="/art.html"]::before {
    content: "\25C8";
}


/* ☾ Characters */
.nav-links a[href="characters.html"]::before,
.nav-links a[href="/characters.html"]::before {
    content: "\263E";
}


/* ⚙ Projects */
.nav-links a[href="projects.html"]::before,
.nav-links a[href="/projects.html"]::before {
    content: "\2699";
}


/* ▣ Photos */
.nav-links a[href="photos.html"]::before,
.nav-links a[href="/photos.html"]::before {
    content: "\25A3";
}


/* ✐ Field Notes */
.nav-links a[href="fieldnotes.html"]::before,
.nav-links a[href="/fieldnotes.html"]::before {
    content: "\2710";
}


/* ▥ Curio Cabinet */
.nav-links a[href="curios.html"]::before,
.nav-links a[href="/curios.html"]::before {
    content: "\25A5";
}


/* ✧ About */
.nav-links a[href="aboutme.html"]::before,
.nav-links a[href="/aboutme.html"]::before {
    content: "\2727";
}


/* ⌖ Atlas */
.nav-links a[href="atlas.html"]::before,
.nav-links a[href="/atlas.html"]::before {
    content: "\2316";
}


/* ⟡ Transmission */
.nav-links a[href="changelog.html"]::before,
.nav-links a[href="/changelog.html"]::before {
    content: "\27E1";
}


/* ✎ Ledger */
.nav-links a[href="guestbook.html"]::before,
.nav-links a[href="/guestbook.html"]::before {
    content: "\270E";
}


.nav-links a:hover::before {
    color: var(--seer-spectral-bright);

    opacity: 1;

    transform: scale(1.12);

    text-shadow:
        0 0 6px rgba(130, 185, 216, 0.55);
}


/* ==========================================================================
   07. ACTIVE PAGE
   ========================================================================== */

.nav-links a.active-page {
    color: #ffffff;

    background:
        linear-gradient(
            90deg,
            rgba(76, 58, 105, 0.88),
            rgba(36, 55, 75, 0.9)
        );

    border-color: rgba(197, 182, 255, 0.7);

    box-shadow:
        inset 0 0 10px rgba(169, 154, 226, 0.12),
        0 0 11px rgba(130, 185, 216, 0.11);
}


.nav-links a.active-page::before {
    color: var(--seer-relic);

    opacity: 1;

    text-shadow:
        0 0 7px rgba(223, 189, 105, 0.58);
}


/* ==========================================================================
   08. CATEGORY SIGILS
   ========================================================================== */

.category-works::before {
    content: "\2726";
}


.category-mischief::before {
    content: "\263E";
}


.category-info::before {
    content: "\2301";
}


.category-works::before,
.category-mischief::before,
.category-info::before {
    display: inline-block;

    margin-right: 7px;

    color: currentColor;

    text-shadow:
        0 0 5px rgba(255, 255, 255, 0.2);
}


/* ==========================================================================
   09. CURRENT STATUS
   ========================================================================== */

.status-box {
    width: 100%;

    margin-top: auto;
    margin-bottom: 15px;
    padding: 12px;

    box-sizing: border-box;

    background:
        linear-gradient(
            145deg,
            rgba(12, 13, 27, 0.88),
            rgba(24, 21, 41, 0.88)
        );

    border:
        1px solid rgba(169, 154, 226, 0.28);

    border-radius: 6px;

    box-shadow:
        inset 0 0 12px rgba(169, 154, 226, 0.035);

    font-size: 0.8rem;
}


.status-box h4 {
    margin: 0 0 5px 0;

    color: var(--seer-oracle-bright);

    font-family: 'Macondo', serif;
    font-size: 0.9rem;

    text-align: center;
}


.status-text {
    margin: 0 0 8px 0;

    color: #d2cfdd;

    font-style: italic;

    text-align: center;
}


.status-mood {
    display: block;

    color: #848299;

    font-size: 0.76rem;

    text-align: center;
}


/* ==========================================================================
   10. ARCHIVE STATUS
   ========================================================================== */

.archive-status-panel {
    width: 100%;

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

    box-sizing: border-box;

    color: #9fa2b0;

    background-color: rgba(7, 9, 18, 0.38);

    border:
        1px dashed rgba(223, 189, 105, 0.28);

    border-radius: 4px;

    font-family: monospace;
    font-size: 0.64rem;
    line-height: 1.5;

    text-align: center;
}


.archive-status-panel strong {
    display: block;

    margin-bottom: 4px;

    color: var(--seer-relic);

    font-family: 'Macondo', serif;
    font-size: 0.78rem;
}


/* ==========================================================================
   11. SIDEBAR FOOTER / OUTPOSTS
   ========================================================================== */

.sidebar-footer {
    display: flex;
    flex-direction: column;

    align-items: center;

    width: 100%;

    text-align: center;
}


.sidebar-footer h3,
.sidebar .sidebar-footer > h3 {
    width: 100%;

    margin: 14px 0 6px 0 !important;
    padding-top: 10px !important;

    color: #b7b4c5 !important;

    border-top:
        1px dashed rgba(169, 154, 226, 0.22) !important;

    font-family: 'Macondo', serif !important;
    font-size: 0.9rem !important;

    letter-spacing: 1px !important;

    text-align: center !important;
}


.button-box {
    color: #8d8a9f;

    background-color: rgba(8, 9, 18, 0.44);

    border:
        1px dashed rgba(169, 154, 226, 0.24);

    border-radius: 3px;
}


/* ==================== OUTPOST IMAGES ====================
   Overrides old inline gold borders where necessary.
   ======================================================= */

.sidebar-footer img {
    border-color: rgba(169, 154, 226, 0.36) !important;

    filter:
        saturate(0.86)
        drop-shadow(0 2px 4px rgba(0, 0, 0, 0.26)) !important;
}


/* ==========================================================================
   12. RESPONSIVE SIDEBAR
   ========================================================================== */

@media (max-width: 850px) {

    .sidebar {
        width: 100%;
        height: auto;

        position: relative;

        border-right: none;

        border-bottom:
            1px solid rgba(169, 154, 226, 0.34);
    }

}

/* ==========================================================================
   13. V3.1 CORRECTION // SITE IDENTITY
   ==========================================================================
   The first V3 pass added decorative stars around "SeerieQueries".
   The site name is already strong enough on its own, so the pseudo-elements
   are explicitly disabled here.
   ========================================================================== */

.logo-area h2::before,
.logo-area h2::after {
    content: none !important;
    display: none !important;
}

/* ==========================================================================
   14. MISCELLANEOUS MISCHIEF WING
   ==========================================================================
   THEME:
   "Cluttered neatness."

   Unlike The Codex's clean violet / spectral-blue archive, this wing uses
   warmer found-object colors:
   ===> rust
   ===> oxidized teal
   ===> moss
   ===> dark walnut
   ===> smoky slate

   Inspiration:
   ===> Town of Puddle
   ===> The Valley
   ===> Emperor
   ===> Hunter Eyes

   Purple is intentionally kept out of the primary Mischief identity.
   ========================================================================== */


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

.category-mischief {
    color: #f0e5d8 !important;

    background:
        linear-gradient(
            135deg,
            #75402c 0%,
            #a75b35 34%,
            #667c4c 68%,
            #35736f 100%
        ) !important;

    border:
        1px solid rgba(176, 127, 85, 0.48) !important;

    text-shadow:
        0 1px 2px rgba(23, 16, 13, 0.78) !important;

    box-shadow:
        inset 0 0 10px rgba(223, 179, 123, 0.05),
        0 0 9px rgba(53, 115, 111, 0.06) !important;
}


/* ==================== CATEGORY SIGIL ==================== */

.category-mischief::before {
    content: "\273B"; /* ✻ */

    color: #d7b77e;

    text-shadow:
        0 0 5px rgba(215, 183, 126, 0.25);
}


/* ==========================================================================
   MISCELLANEOUS LINK SIGILS
   ========================================================================== */

/* Photos = little contact-sheet tile */
.nav-links a[href="photos.html"]::before,
.nav-links a[href="/photos.html"]::before {
    color: #d47450;
}


/* Field Notes = writing mark */
.nav-links a[href="fieldnotes.html"]::before,
.nav-links a[href="/fieldnotes.html"]::before {
    color: #8ca75d;
}


/* Curios = specimen drawer */
.nav-links a[href="curios.html"]::before,
.nav-links a[href="/curios.html"]::before {
    color: #62a89b;
}


/* ==========================================================================
   ACTIVE PAGE COLORS WITHIN THE MISCHIEF WING
   ========================================================================== */


/* ==================== PHOTOS ==================== */

.nav-links a.active-page[href="photos.html"],
.nav-links a.active-page[href="/photos.html"] {
    background:
        linear-gradient(
            90deg,
            rgba(111, 57, 40, 0.92),
            rgba(42, 83, 83, 0.92)
        );

    border-color:
        rgba(212, 116, 80, 0.68);

    box-shadow:
        inset 0 0 9px rgba(212, 116, 80, 0.08),
        0 0 10px rgba(68, 130, 124, 0.08);
}


/* ==================== FIELD NOTES ==================== */

.nav-links a.active-page[href="fieldnotes.html"],
.nav-links a.active-page[href="/fieldnotes.html"] {
    background:
        linear-gradient(
            90deg,
            rgba(70, 83, 43, 0.94),
            rgba(78, 83, 60, 0.94)
        );

    border-color:
        rgba(140, 167, 93, 0.66);

    box-shadow:
        inset 0 0 9px rgba(140, 167, 93, 0.08),
        0 0 10px rgba(112, 133, 82, 0.08);
}


/* ==================== CURIO CABINET ==================== */

.nav-links a.active-page[href="curios.html"],
.nav-links a.active-page[href="/curios.html"] {
    background:
        linear-gradient(
            90deg,
            rgba(64, 55, 39, 0.95),
            rgba(40, 87, 79, 0.94)
        );

    border-color:
        rgba(98, 168, 155, 0.66);

    box-shadow:
        inset 0 0 9px rgba(98, 168, 155, 0.08),
        0 0 10px rgba(157, 124, 66, 0.07);
}


/* Keep the active sigil warm instead of reverting to Codex gold. */
.nav-links a.active-page[href="photos.html"]::before,
.nav-links a.active-page[href="/photos.html"]::before {
    color: #ef9b69;
}


.nav-links a.active-page[href="fieldnotes.html"]::before,
.nav-links a.active-page[href="/fieldnotes.html"]::before {
    color: #b3c875;
}


.nav-links a.active-page[href="curios.html"]::before,
.nav-links a.active-page[href="/curios.html"]::before {
    color: #83cabc;
}