/* ==========================================================================
   SEERIEQUERIES // PROJECTS
   ==========================================================================
   The complete Projects V2 dashboard: active board, status signals,
   Uncharted archive tower, individual concept themes, and finished archive.
   ========================================================================== */

/* ==========================================================================
   PROJECTS PAGE V2
   ========================================================================== 
   REPLACE your older PROJECTS PAGE V2 section with this complete block.

   All selectors are scoped beneath .projects-page so these project themes
   do not bleed into other SeerieQueries pages.
   ========================================================================== */


/* ==========================================================================
   01. PROJECT PAGE INTRODUCTION
   ========================================================================== */

.projects-page .projects-welcome-copy {
    max-width: 1050px;
    margin: 0;
    color: var(--text-muted);
    font-size: 0.82rem;
    font-style: italic;
    line-height: 1.55;
}


/* ==========================================================================
   02. ACTIVE STATUS BOARD
   ========================================================================== */

.projects-page .project-status-board {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    width: 100%;
    margin-bottom: 30px;
}


.projects-page .project-status-column {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}


.projects-page .project-status-icon {
    width: 50px;
    align-self: center;
    padding: 6px;
    box-sizing: border-box;
    background-color: rgba(6, 4, 18, 0.5);
    border: 1px solid rgba(189, 154, 255, 0.18);
    border-radius: 6px;
    font-size: 1.8rem;
    text-align: center;
}


.projects-page .project-status-column > h2 {
    margin: 0;
    padding: 8px;
    border: 1px solid rgba(6, 4, 18, 0.35);
    border-radius: 4px;
    font-family: 'Macondo', serif;
    font-size: 1.2rem;
    text-align: center;
}


.projects-page .status-column-ongoing > h2 {
    background-color: #3b6b80;
    color: #ffffff;
}


.projects-page .status-column-progress > h2 {
    background-color: #ffb7c5;
    color: #1a050a;
}


.projects-page .status-column-break > h2 {
    background-color: #c9bfff;
    color: #0b0713;
}


/* ==========================================================================
   03. ACTIVE PROJECT CARDS
   ========================================================================== */

.projects-page .active-project-card {
    padding: 15px;
    box-sizing: border-box;
    border-radius: 6px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.12);
}


.projects-page .active-project-heading {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
    padding-bottom: 7px;
    border-bottom: 1px dotted rgba(189, 154, 255, 0.16);
}


/* ==================== ACTIVE PROJECT ICON ====================
   Supports either a Unicode symbol or an uploaded project image.
   ============================================================ */

.projects-page .active-project-icon {
    flex: 0 0 42px;

    width: 42px;
    height: 42px;

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

    box-sizing: border-box;
    overflow: hidden;

    background-color: rgba(6, 4, 18, 0.55);

    border: 1px solid rgba(189, 154, 255, 0.16);
    border-radius: 5px;

    font-size: 1.1rem;
}


/* ==================== ACTIVE PROJECT ICON IMAGE ====================
   Keeps uploaded artwork inside the icon frame instead of allowing
   the source image to render at its natural dimensions.
   ================================================================ */

.projects-page .active-project-icon img {
    display: block;

    width: 90%;
    height: 90%;

    object-fit: contain;
    object-position: center;
}


.projects-page .active-project-heading h3 {
    margin: 0;
    font-family: 'Macondo', serif;
    font-size: 1.15rem;
}


.projects-page .active-project-card p {
    color: var(--text-primary);
    font-size: 0.82rem;
    line-height: 1.58;
}


.projects-page .active-project-calamity-lite {
    background-color: #061117;
    border: 1px dashed #5294a8;
}


.projects-page .active-project-calamity-lite h3 {
    color: var(--cyan-glow);
    text-shadow: 0 0 8px rgba(100, 255, 218, 0.5);
}


.projects-page .active-project-fangs {
    background-color: #1a0b12;
    border: 1px dashed #ffa6b8;
}


.projects-page .active-project-fangs h3 {
    color: #ffb7c5;
    text-shadow: 0 0 8px rgba(255, 183, 197, 0.45);
}


.projects-page .active-project-realms {
    background-color: #1c1c1f;
    border: 1px dashed #7a7a85;
}


.projects-page .active-project-realms h3 {
    color: #d1d1d6;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}


.projects-page .project-feature-link {
    display: block;
    margin: 12px 0;
    padding: 10px;
    background-color: rgba(6, 4, 18, 0.4);
    border: 1px solid #144039;
    border-radius: 4px;
    color: var(--cyan-glow);
    font-size: 0.8rem;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
}


.projects-page .project-feature-link:hover {
    background-color: rgba(100, 255, 218, 0.05);
    box-shadow: 0 0 9px rgba(100, 255, 218, 0.12);
}


.projects-page .project-feature-link-realms {
    border-color: #6e571f;
    color: #ff4a5a;
    text-shadow: 0 0 5px rgba(255, 74, 90, 0.35);
}


.projects-page .project-update-note {
    margin-bottom: 0;
    color: #a1cecb !important;
    font-size: 0.78rem !important;
    font-style: italic;
}


/* ==========================================================================
   04. SHARED PROJECT VAULTS
   ========================================================================== */

.projects-page .project-vault {
    margin-top: 28px;
    padding: 22px;
    background-color: rgba(17, 14, 43, 0.78);
    border: 1px solid rgba(189, 154, 255, 0.14);
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.28);
}


.projects-page .uncharted-project-vault {
    border-top: 3px solid var(--cyan-glow);
}


.projects-page .finished-project-vault {
    border-top: 3px solid #e3b85c;
}


.projects-page .project-vault-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 18px;
}


.projects-page .project-vault-kicker {
    display: block;
    margin-bottom: 4px;
    color: var(--cyan-glow);
    font-family: monospace;
    font-size: 0.58rem;
    letter-spacing: 1px;
}


.projects-page .finished-vault-kicker {
    color: #e3b85c;
}


.projects-page .project-vault-header h2 {
    margin: 0 0 6px 0;
    color: var(--accent-glow);
    font-family: 'Macondo', serif;
    font-size: 1.45rem;
}


.projects-page .project-vault-header p {
    max-width: 800px;
    margin: 0;
    color: #9c96b4;
    font-size: 0.74rem;
    line-height: 1.5;
}


.projects-page .project-vault-count {
    flex: 0 0 auto;
    padding: 4px 7px;
    color: var(--cyan-glow);
    background-color: rgba(100, 255, 218, 0.04);
    border: 1px solid #24594f;
    border-radius: 3px;
    font-family: monospace;
    font-size: 0.58rem;
    letter-spacing: 1px;
}


.projects-page .finished-vault-count {
    color: #e3b85c;
    background-color: rgba(227, 184, 92, 0.04);
    border-color: #6e571f;
}


/* ==========================================================================
   05. UNCHARTED PROJECT ARCHIVE TOWER
   ==========================================================================
   Every Uncharted Project occupies its own independent row.

   This preserves:
   - Independent opening / closing
   - Independent project height
   - Individual project themes
   - The vertical "archive tower" presentation

   Large project files can grow as much as needed without stretching
   any neighboring concept file.
   ========================================================================== */


/* ==========================================================================
   ARCHIVE TOWER
   ========================================================================== */

.projects-page .uncharted-project-grid {
    position: relative;

    display: flex;
    flex-direction: column;

    gap: 16px;

    width: 100%;

    padding-left: 26px;

    box-sizing: border-box;
}


/* ==================== ARCHIVE SPINE ====================
   Decorative line connecting every concept file.
   ====================================================== */

.projects-page .uncharted-project-grid::before {
    content: "";

    position: absolute;

    top: 12px;
    bottom: 12px;
    left: 8px;

    width: 1px;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(100, 255, 218, 0.24) 12%,
            rgba(189, 154, 255, 0.28) 50%,
            rgba(255, 112, 168, 0.22) 88%,
            transparent
        );

    pointer-events: none;
}


/* ==========================================================================
   INDEPENDENT PROJECT FILE
   ==========================================================================
   Theme variables are supplied by each project in Section 08.
   ================================================================ */

.projects-page .uncharted-project-card {
    position: relative;

    flex: 0 0 auto;

    width: 100%;

    align-self: stretch;

    box-sizing: border-box;

    /* Keep overflow visible so the archive node can sit outside the file. */
    overflow: visible;

    background:
        var(--concept-bg);

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

    border-left:
        4px solid var(--concept-accent);

    border-radius: 7px;

    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.24);

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


/* ==================== ARCHIVE NODE ====================
   Connects each project visually to the archive spine.
   ===================================================== */

.projects-page .uncharted-project-card::before {
    content: "";

    position: absolute;

    top: 27px;
    left: -23px;

    width: 8px;
    height: 8px;

    background-color:
        var(--concept-accent);

    border:
        2px solid #080613;

    border-radius: 50%;

    box-shadow:
        0 0 7px var(--concept-accent);

    z-index: 4;
}


/* ==================== PROJECT COLOR STRIPE ====================
   Gives each archive file a secondary-color signature across the top.
   ============================================================ */

.projects-page .uncharted-project-card::after {
    content: "";

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            var(--concept-accent),
            var(--concept-accent-2),
            transparent 75%
        );

    pointer-events: none;
}


/* ==========================================================================
   CLOSED PROJECT FILE
   ========================================================================== */

.projects-page .uncharted-project-card:not([open]) {
    min-height: 66px;
}


.projects-page .uncharted-project-card:not([open])
.uncharted-project-summary {
    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.025),
            transparent 58%
        );
}


/* ==========================================================================
   PROJECT HOVER
   ========================================================================== */

.projects-page .uncharted-project-card:hover {
    transform:
        translateX(3px);

    border-color:
        var(--concept-accent);

    box-shadow:
        0 6px 15px rgba(0, 0, 0, 0.30),
        0 0 11px rgba(189, 154, 255, 0.07);
}


/* ==========================================================================
   OPEN PROJECT FILE
   ========================================================================== */

.projects-page .uncharted-project-card[open] {
    transform:
        translateX(3px);

    border-color:
        var(--concept-accent);

    box-shadow:
        0 7px 18px rgba(0, 0, 0, 0.34),
        0 0 13px rgba(189, 154, 255, 0.08);
}


/* ==================== OPEN PROJECT BODY ====================
   Keeps the interior attached to the project's theme without
   overpowering its unique content modules.
   ========================================================== */

.projects-page .uncharted-project-card[open]
.uncharted-project-body {
    background:
        rgba(6, 4, 18, 0.16);
}


/* ==========================================================================
   06. UNCHARTED PROJECT SUMMARY
   ========================================================================== */

.projects-page .uncharted-project-summary {
    position: relative;

    display: grid;

    grid-template-columns:
        44px minmax(0, 1fr) auto;

    align-items: center;

    gap: 12px;

    min-height: 66px;

    padding: 12px 15px;

    box-sizing: border-box;

    cursor: pointer;

    list-style: none;
    user-select: none;

    transition:
        background-color 0.18s ease;
}


.projects-page .uncharted-project-summary::-webkit-details-marker {
    display: none;
}


/* ==========================================================================
   UNCHARTED PROJECT ICON
   ========================================================================== */

.projects-page .uncharted-project-icon {
    flex: 0 0 42px;

    width: 42px;
    height: 42px;

    display: flex;

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

    box-sizing: border-box;

    overflow: hidden;

    background-color: rgba(6, 4, 18, 0.62);

    border: 1px solid var(--concept-border);
    border-radius: 5px;

    color: var(--concept-accent-2);

    font-size: 1.15rem;

    text-shadow:
        0 0 7px var(--concept-accent-2);

    box-shadow:
        inset 0 0 8px rgba(255, 255, 255, 0.025),
        0 0 6px rgba(0, 0, 0, 0.22);
}


/* ==================== UNCHARTED PROJECT ICON IMAGE ====================
   Allows a concept file to use uploaded artwork instead of a symbol.
   ==================================================================== */

.projects-page .uncharted-project-icon img {
    display: block;

    width: 90%;
    height: 90%;

    object-fit: contain;
    object-position: center;
}

.projects-page .uncharted-project-summary-copy {
    min-width: 0;
}


.projects-page .uncharted-project-summary-copy strong {
    display: block;
    color: var(--concept-accent);
    font-family: 'Macondo', serif;
    font-size: 1.02rem;
}


.projects-page .uncharted-project-summary-copy small {
    display: block;
    margin-top: 3px;
    color: #7e7896;
    font-family: monospace;
    font-size: 0.52rem;
    letter-spacing: 0.5px;
}


.projects-page .uncharted-project-marker {
    padding: 4px 7px;

    background-color:
        rgba(6, 4, 18, 0.40);

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

    border-radius: 3px;

    color: #918aa5;

    font-family: monospace;
    font-size: 0.50rem;

    letter-spacing: 0.5px;

    white-space: nowrap;

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


.projects-page .uncharted-project-summary:hover
.uncharted-project-marker {
    color:
        var(--concept-accent-2);

    border-color:
        var(--concept-accent);

    box-shadow:
        0 0 6px rgba(189, 154, 255, 0.08);
}


.projects-page .uncharted-project-marker::before {
    content: "▸ ";
    color: var(--concept-accent-2);
}


.projects-page .uncharted-project-card[open] .uncharted-project-marker::before {
    content: "▾ ";
}


.projects-page .uncharted-project-card[open]
.uncharted-project-summary {
    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.035),
            rgba(255, 255, 255, 0.008)
        );

    border-bottom:
        1px dashed var(--concept-border);
}


/* ==========================================================================
   07. UNCHARTED PROJECT BODY
   ========================================================================== */

.projects-page .uncharted-project-body {
    padding: 13px 15px 15px 15px;
}


.projects-page .uncharted-project-body > p {
    margin: 4px 0 12px 0;
    color: #bbb7cd;
    font-size: 0.76rem;
    line-height: 1.58;
}


.projects-page .project-concept-data {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}


.projects-page .project-concept-data span {
    padding: 3px 6px;
    color: var(--concept-accent-2);
    background-color: rgba(6, 4, 18, 0.4);
    border: 1px solid var(--concept-border);
    border-radius: 3px;
    font-family: monospace;
    font-size: 0.5rem;
    letter-spacing: 0.35px;
}


/* ==========================================================================
   08. INDIVIDUAL UNCHARTED THEMES
   ========================================================================== */

/* ==================== PANGEA PROXIMA ==================== */

.projects-page .uncharted-pangea {
    --concept-accent: #9edc62;
    --concept-accent-2: #e1bd65;
    --concept-bg: linear-gradient(145deg, #10160d, #0b100a);
    --concept-border: rgba(139, 195, 74, 0.28);
}


/* ==================== CITY PET TO POPSTARS ==================== */

.projects-page .uncharted-city-ptp {
    --concept-accent: #ff85cf;
    --concept-accent-2: #79f4ff;
    --concept-bg:
        radial-gradient(circle at 15% 15%, rgba(255, 230, 89, 0.08), transparent 28%),
        radial-gradient(circle at 85% 25%, rgba(121, 244, 255, 0.08), transparent 25%),
        linear-gradient(145deg, #1b0d25, #0d1024);
    --concept-border: rgba(255, 133, 207, 0.34);
}


.projects-page .city-concept-data span:nth-child(1) {
    color: #ff85cf;
}


.projects-page .city-concept-data span:nth-child(2) {
    color: #79f4ff;
}


.projects-page .city-concept-data span:nth-child(3) {
    color: #ffe659;
}


/* ==================== ADRENALINE ==================== */

.projects-page .uncharted-adrenaline {
    --concept-accent: #ff465e;
    --concept-accent-2: #ffd84d;
    --concept-bg: linear-gradient(145deg, #21080d, #0d080a 70%);
    --concept-border: rgba(255, 70, 94, 0.35);
}


.projects-page .adrenaline-duality-board {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 8px;
    margin: 12px 0;
}


.projects-page .adrenaline-duality-board > div {
    padding: 9px;
    background-color: rgba(6, 4, 18, 0.45);
    border: 1px solid rgba(255, 70, 94, 0.22);
    border-radius: 4px;
    text-align: center;
}


.projects-page .adrenaline-duality-board strong,
.projects-page .adrenaline-duality-board span {
    display: block;
}


.projects-page .adrenaline-duality-board strong {
    color: #ff465e;
    font-family: 'Macondo', serif;
    font-size: 0.82rem;
}


.projects-page .adrenaline-duality-board div:last-child strong {
    color: #ffd84d;
}


.projects-page .adrenaline-duality-board div span {
    margin-top: 2px;
    color: #918aa2;
    font-family: monospace;
    font-size: 0.5rem;
}


.projects-page .adrenaline-versus {
    color: #ffffff;
    font-family: monospace;
    font-size: 0.56rem;
    font-weight: bold;
}


/* ==================== GANGBAG HYEONSANG ==================== */

.projects-page .uncharted-gangbag {
    --concept-accent: #ff70a8;
    --concept-accent-2: #c6b1ff;
    --concept-bg:
        repeating-linear-gradient(
            135deg,
            rgba(255, 112, 168, 0.025) 0,
            rgba(255, 112, 168, 0.025) 6px,
            transparent 6px,
            transparent 12px
        ),
        linear-gradient(145deg, #1e0b19, #0e0810);
    --concept-border: rgba(255, 112, 168, 0.3);
}


.projects-page .compulsion-loop {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 12px 0;
    padding: 9px;
    background-color: rgba(6, 4, 18, 0.48);
    border: 1px dashed rgba(255, 112, 168, 0.25);
    border-radius: 4px;
}


.projects-page .compulsion-loop span {
    color: #c6b1ff;
    font-family: monospace;
    font-size: 0.52rem;
}


.projects-page .compulsion-loop span:nth-child(odd) {
    padding: 2px 5px;
    color: #ff70a8;
    border: 1px solid rgba(255, 112, 168, 0.22);
    border-radius: 3px;
}


.projects-page .project-concept-warning {
    margin-bottom: 0 !important;
    color: #9d8fa8 !important;
    font-size: 0.68rem !important;
    font-style: italic;
}


/* ==================== PHILOS MYTHICA ==================== */

.projects-page .uncharted-philos {
    --concept-accent: #82eaff;
    --concept-accent-2: #d6a6ff;
    --concept-bg:
        linear-gradient(
            110deg,
            rgba(79, 214, 255, 0.07) 0%,
            rgba(79, 214, 255, 0.02) 47%,
            rgba(214, 166, 255, 0.02) 53%,
            rgba(214, 166, 255, 0.07) 100%
        ),
        #0a0a16;
    --concept-border: rgba(130, 234, 255, 0.26);
}


.projects-page .philos-duality-board {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: stretch;
    gap: 8px;
    margin-top: 12px;
}


.projects-page .philos-science-side,
.projects-page .philos-arcane-side {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 82px;
    padding: 10px;
    border-radius: 4px;
    text-align: center;
}


.projects-page .philos-science-side {
    background-color: rgba(79, 214, 255, 0.055);
    border: 1px solid rgba(79, 214, 255, 0.26);
}


.projects-page .philos-arcane-side {
    background-color: rgba(214, 166, 255, 0.055);
    border: 1px solid rgba(214, 166, 255, 0.26);
}


.projects-page .philos-side-label {
    color: #767087;
    font-family: monospace;
    font-size: 0.48rem;
}


.projects-page .philos-science-side strong {
    color: #82eaff;
    font-family: 'Macondo', serif;
}


.projects-page .philos-arcane-side strong {
    color: #d6a6ff;
    font-family: 'Macondo', serif;
}


.projects-page .philos-duality-board small {
    margin-top: 3px;
    color: #918aa2;
    font-family: monospace;
    font-size: 0.48rem;
}


.projects-page .philos-center-mark {
    display: flex;
    align-items: center;
    color: #f0c866;
    font-size: 1rem;
}


/* ==================== AVATAR STORY SEEDS ==================== */

.projects-page .uncharted-avatar-seeds {
    --concept-accent: #bd9aff;
    --concept-accent-2: #ff708d;
    --concept-bg: linear-gradient(145deg, #100d22, #090711);
    --concept-border: rgba(189, 154, 255, 0.28);
}


.projects-page .story-seed-list {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-top: 12px;
}


.projects-page .story-seed-row {
    display: grid;
    grid-template-columns: 22px 120px 1fr;
    align-items: center;
    gap: 7px;
    padding: 7px 9px;
    background-color: rgba(6, 4, 18, 0.45);
    border: 1px solid rgba(189, 154, 255, 0.16);
    border-radius: 4px;
}


.projects-page .story-seed-icon {
    color: #ff708d;
    text-align: center;
}


.projects-page .story-seed-row strong {
    color: var(--accent-glow);
    font-family: 'Macondo', serif;
    font-size: 0.78rem;
}


.projects-page .story-seed-row > span:last-child {
    color: #8e879f;
    font-size: 0.66rem;
}


.projects-page .story-seed-template {
    opacity: 0.62;
    border-style: dashed;
}


/* ==========================================================================
   08A. THEMED FILE GLOWS
   ==========================================================================
   The project backgrounds already come from the variables above.
   These rules restore the stronger project-specific glow when a file
   is hovered or opened while keeping every file structurally independent.
   ========================================================================== */


/* ==================== PANGEA PROXIMA ==================== */

.projects-page .uncharted-pangea:hover,
.projects-page .uncharted-pangea[open] {
    box-shadow:
        0 7px 18px rgba(0, 0, 0, 0.32),
        0 0 15px rgba(158, 220, 98, 0.12);
}


/* ==================== CITY PET TO POPSTARS ==================== */

.projects-page .uncharted-city-ptp:hover,
.projects-page .uncharted-city-ptp[open] {
    box-shadow:
        0 7px 18px rgba(0, 0, 0, 0.32),
        -4px 0 12px rgba(255, 133, 207, 0.08),
        4px 0 12px rgba(121, 244, 255, 0.08);
}


/* ==================== ADRENALINE ==================== */

.projects-page .uncharted-adrenaline:hover,
.projects-page .uncharted-adrenaline[open] {
    box-shadow:
        0 7px 18px rgba(0, 0, 0, 0.34),
        0 0 16px rgba(255, 70, 94, 0.15),
        0 0 6px rgba(255, 216, 77, 0.05);
}


/* ==================== GANGBAG HYEONSANG ==================== */

.projects-page .uncharted-gangbag:hover,
.projects-page .uncharted-gangbag[open] {
    box-shadow:
        0 7px 18px rgba(0, 0, 0, 0.32),
        0 0 16px rgba(255, 112, 168, 0.14);
}


/* ==================== PHILOS MYTHICA ==================== */

.projects-page .uncharted-philos:hover,
.projects-page .uncharted-philos[open] {
    box-shadow:
        0 7px 18px rgba(0, 0, 0, 0.32),
        -4px 0 12px rgba(130, 234, 255, 0.09),
        4px 0 12px rgba(214, 166, 255, 0.09);
}


/* ==================== AVATAR STORY SEEDS ==================== */

.projects-page .uncharted-avatar-seeds:hover,
.projects-page .uncharted-avatar-seeds[open] {
    box-shadow:
        0 7px 18px rgba(0, 0, 0, 0.32),
        0 0 15px rgba(189, 154, 255, 0.13);
}


/* ==========================================================================
   09. FINISHED PROJECT EMPTY STATE
   ========================================================================== */

.projects-page .finished-project-empty {
    min-height: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 28px;
    box-sizing: border-box;
    background-color: rgba(6, 4, 18, 0.42);
    border: 1px dashed rgba(227, 184, 92, 0.26);
    border-radius: 5px;
    text-align: center;
}


.projects-page .finished-project-empty-icon {
    color: #e3b85c;
    font-size: 1.8rem;
    text-shadow: 0 0 8px rgba(227, 184, 92, 0.28);
}


.projects-page .finished-project-empty strong {
    color: #f0d998;
    font-family: 'Macondo', serif;
    font-size: 1rem;
}


.projects-page .finished-project-empty p {
    max-width: 560px;
    margin: 0;
    color: #918aa2;
    font-size: 0.72rem;
    line-height: 1.5;
}


.projects-page .finished-project-empty-status {
    margin-top: 4px;
    color: #e3b85c;
    font-family: monospace;
    font-size: 0.54rem;
    letter-spacing: 1px;
}


/* ==========================================================================
   10. FINISHED PROJECT CARD TEMPLATE STYLES
   ========================================================================== */

.projects-page .finished-project-card {
    display: grid;
    grid-template-columns: 58px 1fr;
    gap: 14px;
    padding: 15px;
    background-color: rgba(6, 4, 18, 0.48);
    border: 1px solid rgba(227, 184, 92, 0.28);
    border-left: 3px solid #e3b85c;
    border-radius: 5px;
}


.projects-page .finished-project-card-icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(227, 184, 92, 0.045);
    border: 1px solid rgba(227, 184, 92, 0.24);
    border-radius: 5px;
    color: #e3b85c;
    font-size: 1.4rem;
}


.projects-page .finished-project-card-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
    color: #776f82;
    font-family: monospace;
    font-size: 0.52rem;
}


.projects-page .finished-project-card h3 {
    margin: 7px 0 5px 0;
    color: #f0d998;
    font-family: 'Macondo', serif;
    font-size: 1rem;
}


.projects-page .finished-project-card p {
    margin-bottom: 0;
    color: #b9b5ca;
    font-size: 0.74rem;
    line-height: 1.55;
}


/* ==========================================================================
   11. RESPONSIVE SUPPORT
   ========================================================================== */

@media (max-width: 1050px) {

    .projects-page .project-status-board {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 700px) {

    /* ==================== MOBILE ARCHIVE TOWER ==================== */

    .projects-page .uncharted-project-grid {
        padding-left: 18px;
    }


    .projects-page .uncharted-project-grid::before {
        left: 5px;
    }


    .projects-page .uncharted-project-card::before {
        left: -16px;

        width: 6px;
        height: 6px;
    }

    .projects-page .project-vault-header {
        flex-direction: column;
    }


    .projects-page .uncharted-project-summary {
        grid-template-columns: 38px minmax(0, 1fr);
    }


    .projects-page .uncharted-project-marker {
        grid-column: 2;
    }


    .projects-page .adrenaline-duality-board,
    .projects-page .philos-duality-board {
        grid-template-columns: 1fr;
    }


    .projects-page .adrenaline-versus,
    .projects-page .philos-center-mark {
        justify-content: center;
        text-align: center;
    }


    .projects-page .story-seed-row {
        grid-template-columns: 22px 1fr;
    }


    .projects-page .story-seed-row > span:last-child {
        grid-column: 2;
    }


    .projects-page .finished-project-card {
        grid-template-columns: 1fr;
    }

}

/* ==========================================================================
   12. LEGACY PROJECT RESPONSIVE FALLBACK
   ==========================================================================
   Retained in case an older project board still uses .projects-triple-board.
   ========================================================================== */

@media (max-width: 850px) {

    .projects-triple-board {
        flex-direction: column;
    }

}

/* ==========================================================================
   14. SEERIE V3 // PROJECTS — ENIGMA ARCHIVE LAYER
   ==========================================================================
   PURPOSE:
   Projects should feel like classified curiosities in an impossible workshop:
   development signals, forbidden files, sketches of unfinished systems, and
   color identities that become recognizable before the title is even read.

   The underlying Projects V2 mechanics remain intact.
   This section supplies the definitive V3 atmosphere and palette assignments.
   ========================================================================== */


/* ==========================================================================
   14.1 PROJECTS PAGE PALETTE
   ========================================================================== */

.projects-page {
    --projects-deep: var(--entity_dark-1);
    --projects-panel: #101222;

    --projects-violet: var(--entity_web-3);
    --projects-blue: var(--entity_vast-4);
    --projects-gold: var(--seer-relic);
    --projects-bone: var(--seer-bone);

    position: relative;

    background:
        radial-gradient(
            circle at 88% 6%,
            rgba(36, 54, 127, 0.055),
            transparent 25%
        ),
        radial-gradient(
            circle at 12% 44%,
            rgba(70, 50, 95, 0.055),
            transparent 30%
        ),
        radial-gradient(
            circle at 72% 88%,
            rgba(142, 9, 13, 0.025),
            transparent 25%
        );
}


/* ==========================================================================
   14.2 PROJECTS WELCOME // WORKSHOP THRESHOLD
   ========================================================================== */

.projects-page .projects-welcome {
    background:
        radial-gradient(
            circle at 90% 0%,
            rgba(223, 189, 105, 0.055),
            transparent 22%
        ),
        linear-gradient(
            145deg,
            rgba(16, 18, 34, 0.98),
            rgba(8, 9, 19, 0.98)
        );

    border-color:
        rgba(102, 81, 122, 0.32);

    box-shadow:
        inset 0 0 24px rgba(70, 50, 95, 0.045),
        0 8px 24px rgba(0, 0, 0, 0.2);
}


.projects-page .projects-welcome h1 {
    color:
        var(--entity_web-6);

    text-shadow:
        0 0 14px rgba(130, 144, 170, 0.22);
}


.projects-page .projects-welcome-copy {
    color:
        #9693a8;
}


/* ==========================================================================
   14.3 ACTIVE STATUS BOARD
   ==========================================================================
   No more large flat pastel status bars.

   Ongoing     => All-Seeing Eye
   In Progress => Stigmata
   On Break    => Fallen
   ========================================================================== */

.projects-page .project-status-column > h2 {
    background:
        linear-gradient(
            90deg,
            rgba(10, 12, 24, 0.96),
            rgba(18, 19, 34, 0.96)
        );

    box-shadow:
        inset 0 0 10px rgba(255, 255, 255, 0.015);
}


.projects-page .status-column-ongoing > h2 {
    color:
        var(--angel_all_seeing_eye-4);

    border-color:
        rgba(66, 168, 211, 0.34);
}


.projects-page .status-column-progress > h2 {
    color:
        var(--saint_stigmata-3);

    border-color:
        rgba(225, 24, 37, 0.32);
}


.projects-page .status-column-break > h2 {
    color:
        var(--angel_fallen-2);

    border-color:
        rgba(136, 137, 137, 0.3);
}


.projects-page .project-status-icon {
    background:
        radial-gradient(
            circle at center,
            rgba(130, 144, 170, 0.055),
            #080a14
        );

    border-color:
        rgba(130, 144, 170, 0.22);

    color:
        var(--seer-relic);
}


/* ==================== SIGNAL COLORS ==================== */

.projects-page .signal-ongoing {
    color:
        var(--angel_all_seeing_eye-4);

    background-color:
        var(--angel_all_seeing_eye-4);
}


.projects-page .signal-progress {
    color:
        var(--saint_stigmata-3);

    background-color:
        var(--saint_stigmata-3);
}


.projects-page .signal-break {
    color:
        var(--angel_fallen-4);

    background-color:
        var(--angel_fallen-4);
}


/* ==========================================================================
   14.4 ACTIVE PROJECT IDENTITIES
   ========================================================================== */


/* ==================== CALAMITY LITE // ALL-SEEING EYE ==================== */

.projects-page .active-project-calamity-lite {
    background:
        linear-gradient(
            145deg,
            rgba(7, 20, 34, 0.96),
            rgba(6, 11, 24, 0.96)
        );

    border:
        1px dashed rgba(66, 168, 211, 0.42);

    box-shadow:
        inset 0 0 18px rgba(66, 168, 211, 0.025);
}


.projects-page .active-project-calamity-lite h3 {
    color:
        var(--angel_all_seeing_eye-4);

    text-shadow:
        0 0 9px rgba(66, 168, 211, 0.35);
}


/* ==================== A TALE OF TWO FANGS // VEPAR ==================== */

.projects-page .active-project-fangs {
    background:
        linear-gradient(
            145deg,
            rgba(39, 14, 34, 0.96),
            rgba(18, 9, 23, 0.96)
        );

    border:
        1px dashed rgba(219, 63, 114, 0.4);

    box-shadow:
        inset 0 0 18px rgba(219, 63, 114, 0.025);
}


.projects-page .active-project-fangs h3 {
    color:
        var(--demon_vepar-5);

    text-shadow:
        0 0 9px rgba(219, 63, 114, 0.28);
}


/* ==================== REALMS OF CALAMITY // THE DARK + FALLEN ==================== */

.projects-page .active-project-realms {
    background:
        linear-gradient(
            145deg,
            rgba(10, 8, 30, 0.96),
            rgba(18, 19, 25, 0.96)
        );

    border:
        1px dashed rgba(119, 113, 154, 0.36);

    box-shadow:
        inset 0 0 18px rgba(84, 69, 123, 0.025);
}


.projects-page .active-project-realms h3 {
    color:
        var(--entity_dark-5);

    text-shadow:
        0 0 9px rgba(84, 69, 123, 0.28);
}


/* ==========================================================================
   14.5 PROJECT VAULTS
   ========================================================================== */

.projects-page .project-vault {
    background:
        linear-gradient(
            145deg,
            rgba(10, 11, 22, 0.82),
            rgba(15, 15, 29, 0.82)
        );

    border-color:
        rgba(102, 81, 122, 0.2);

    box-shadow:
        inset 0 0 22px rgba(70, 50, 95, 0.025);
}


.projects-page .project-vault-kicker {
    color:
        var(--seer-relic);
}


.projects-page .project-vault-header h2 {
    color:
        var(--entity_web-6);
}


/* ==========================================================================
   14.6 UNCHARTED PROJECT PALETTE ASSIGNMENTS
   ==========================================================================
   Each concept has a strong identity drawn from the palette library.

   Pangea          => THE VALLEY
   City P.t.P      => PRISM
   Adrenaline      => STIGMATA
   Gangbag         => THE CORRUPTION + MOTHER OF DHAMPIR
   Philos Mythica  => ALL-SEEING EYE + THE WEB
   Avatar Seeds    => DREAMSCAPE + THE STRANGER
   ========================================================================== */


/* ==================== PANGEA PROXIMA // THE VALLEY ==================== */

.projects-page .uncharted-pangea {
    --concept-accent:
        var(--town_valley-5);

    --concept-accent-2:
        var(--town_valley-6);

    --concept-bg:
        radial-gradient(
            circle at 95% 0%,
            rgba(204, 229, 56, 0.045),
            transparent 26%
        ),
        linear-gradient(
            145deg,
            #0c160d,
            #10180d
        );

    --concept-border:
        rgba(154, 186, 38, 0.34);
}


/* ==================== CITY P.T.P // PRISM ==================== */

.projects-page .uncharted-city-ptp {
    --concept-accent:
        var(--demon_prism-1);

    --concept-accent-2:
        var(--demon_prism-4);

    --concept-bg:
        radial-gradient(
            circle at 88% 10%,
            rgba(75, 143, 215, 0.08),
            transparent 24%
        ),
        radial-gradient(
            circle at 12% 90%,
            rgba(239, 139, 41, 0.05),
            transparent 28%
        ),
        linear-gradient(
            145deg,
            #171026,
            #11162a
        );

    --concept-border:
        rgba(211, 83, 148, 0.4);
}


/* ==================== ADRENALINE // STIGMATA ==================== */

.projects-page .uncharted-adrenaline {
    --concept-accent:
        var(--saint_stigmata-3);

    --concept-accent-2:
        var(--saint_stigmata-6);

    --concept-bg:
        radial-gradient(
            circle at 90% 8%,
            rgba(225, 24, 37, 0.07),
            transparent 24%
        ),
        linear-gradient(
            145deg,
            #19080d,
            #0f0d12
        );

    --concept-border:
        rgba(225, 24, 37, 0.42);
}


/* ==================== GANGBAG HYEONSANG // CORRUPTION ==================== */

.projects-page .uncharted-gangbag {
    --concept-accent:
        var(--saint_mother_dhampir-4);

    --concept-accent-2:
        var(--entity_corruption-5);

    --concept-bg:
        repeating-linear-gradient(
            135deg,
            rgba(123, 37, 103, 0.035) 0,
            rgba(123, 37, 103, 0.035) 6px,
            transparent 6px,
            transparent 13px
        ),
        radial-gradient(
            circle at 92% 7%,
            rgba(95, 113, 69, 0.045),
            transparent 24%
        ),
        linear-gradient(
            145deg,
            #190b18,
            #101314
        );

    --concept-border:
        rgba(172, 36, 91, 0.4);
}


/* ==================== PHILOS MYTHICA // EYE + WEB ==================== */

.projects-page .uncharted-philos {
    --concept-accent:
        var(--angel_all_seeing_eye-4);

    --concept-accent-2:
        var(--entity_web-5);

    --concept-bg:
        linear-gradient(
            90deg,
            rgba(31, 79, 136, 0.12),
            rgba(10, 12, 26, 0.96) 43%,
            rgba(70, 50, 95, 0.14)
        );

    --concept-border:
        rgba(130, 144, 170, 0.4);
}


/* ==================== AVATAR STORY SEEDS // DREAMSCAPE + STRANGER ==================== */

.projects-page .uncharted-avatar-seeds {
    --concept-accent:
        var(--town_dreamscape-4);

    --concept-accent-2:
        var(--entity_stranger-4);

    --concept-bg:
        radial-gradient(
            circle at 88% 5%,
            rgba(53, 169, 200, 0.055),
            transparent 25%
        ),
        radial-gradient(
            circle at 12% 95%,
            rgba(239, 154, 128, 0.04),
            transparent 26%
        ),
        linear-gradient(
            145deg,
            #0d1020,
            #151025
        );

    --concept-border:
        rgba(130, 144, 170, 0.34);
}


/* ==========================================================================
   14.7 OPEN FILES
   ========================================================================== */

.projects-page .uncharted-project-card[open] {
    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.34),
        0 0 15px color-mix(
            in srgb,
            var(--concept-accent) 15%,
            transparent
        );
}


/*
   Browsers without color-mix support simply retain the earlier V2 shadow.
   The important layout behavior remains unaffected.
*/


/* ==========================================================================
   14.8 FINISHED ARCHIVE
   ========================================================================== */

.projects-page .finished-project-vault {
    background:
        linear-gradient(
            145deg,
            rgba(12, 14, 24, 0.78),
            rgba(18, 17, 27, 0.78)
        );

    border-color:
        rgba(223, 189, 105, 0.2);
}


.projects-page .finished-project-empty {
    background:
        radial-gradient(
            circle at center,
            rgba(223, 189, 105, 0.03),
            transparent 46%
        ),
        rgba(7, 8, 16, 0.46);

    border-color:
        rgba(223, 189, 105, 0.22);
}


.projects-page .finished-project-empty-icon {
    color:
        var(--seer-relic);

    text-shadow:
        0 0 10px rgba(223, 189, 105, 0.24);
}

/* ==========================================================================
   15. V3.1 // PROJECTS — OBSERVATORY OF UNFINISHED THINGS
   ==========================================================================
   Projects now gets a stronger page identity rather than sharing the same
   visual language as Character Chronicles.

   Motifs:
   ===> observatory chart
   ===> occult filing room
   ===> research lattice
   ===> development telemetry

   Strong project palettes remain the stars of the page.
   ========================================================================== */


/* ==========================================================================
   15.1 PAGE ARTISTRY
   ========================================================================== */

.projects-page {
    background:
        radial-gradient(
            circle at 88% 6%,
            rgba(84, 69, 123, 0.12),
            transparent 22%
        ),
        radial-gradient(
            circle at 8% 42%,
            rgba(36, 83, 106, 0.09),
            transparent 26%
        ),
        radial-gradient(
            circle at 76% 86%,
            rgba(142, 9, 13, 0.045),
            transparent 22%
        ),
        radial-gradient(
            circle,
            rgba(178, 195, 204, 0.055) 1px,
            transparent 1.5px
        );

    background-size:
        auto,
        auto,
        auto,
        52px 52px;
}


/* ==================== WORKSHOP THRESHOLD ==================== */

.projects-page .projects-welcome {
    position: relative;

    overflow: hidden;

    border:
        1px solid rgba(102, 81, 122, 0.38);

    border-left:
        3px solid var(--seer-relic);

    box-shadow:
        inset 0 0 32px rgba(70, 50, 95, 0.055),
        0 8px 25px rgba(0, 0, 0, 0.24);
}


.projects-page .projects-welcome::after {
    content:
        "⌖  OBSERVATORY FILE // IDEAS UNDER ACTIVE STUDY  ⟡";

    display: block;

    margin-top: 13px;
    padding-top: 8px;

    color: #716f83;

    border-top:
        1px dashed rgba(130, 144, 170, 0.18);

    font-family: monospace;
    font-size: 0.54rem;

    letter-spacing: 0.9px;
}


/* ==========================================================================
   15.2 ACTIVE STATUS BOARD // RITUAL TRIPTYCH
   ========================================================================== */

.projects-page .project-status-board {
    position: relative;

    padding:
        16px 12px 18px 12px;

    background:
        linear-gradient(
            145deg,
            rgba(7, 8, 17, 0.46),
            rgba(15, 15, 28, 0.42)
        );

    border:
        1px solid rgba(102, 81, 122, 0.15);

    border-radius:
        8px;

    box-shadow:
        inset 0 0 24px rgba(70, 50, 95, 0.025);
}


.projects-page .project-status-board::before {
    content: "CURRENT CONSTELLATION // DEVELOPMENT TELEMETRY";

    position: absolute;

    top: 5px;
    left: 12px;

    color: #66647a;

    font-family: monospace;
    font-size: 0.48rem;

    letter-spacing: 0.9px;
}


/* ==========================================================================
   15.3 RESTORE ACTIVITY METERS
   ========================================================================== */

.projects-page .status-signal-fill {
    display: block;

    min-width: 2px;
    min-height: 100%;

    opacity: 1;
}


.projects-page .signal-ongoing {
    width: 88%;

    color:
        var(--angel_all_seeing_eye-4);

    background:
        linear-gradient(
            90deg,
            var(--angel_all_seeing_eye-2),
            var(--angel_all_seeing_eye-4),
            var(--angel_all_seeing_eye-5)
        );

    box-shadow:
        0 0 8px rgba(95, 213, 229, 0.38);
}


.projects-page .signal-progress {
    width: 58%;

    color:
        var(--saint_stigmata-3);

    background:
        linear-gradient(
            90deg,
            var(--saint_stigmata-1),
            var(--saint_stigmata-2),
            var(--saint_stigmata-3)
        );

    box-shadow:
        0 0 8px rgba(225, 24, 37, 0.32);
}


.projects-page .signal-break {
    width: 18%;

    color:
        var(--angel_fallen-4);

    background:
        linear-gradient(
            90deg,
            var(--angel_fallen-3),
            var(--angel_fallen-4),
            var(--angel_fallen-5)
        );

    box-shadow:
        0 0 7px rgba(84, 87, 90, 0.30);
}


/* ==========================================================================
   15.4 UNCHARTED ARCHIVE HEADER
   ========================================================================== */

.projects-page .uncharted-project-vault {
    position: relative;

    border-top:
        2px solid rgba(169, 154, 226, 0.30);
}


.projects-page .uncharted-project-vault::before {
    content: "◌  ◇  ⌖  ◇  ◌";

    position: absolute;

    top: -10px;
    left: 50%;

    padding:
        0 10px;

    color: #81799d;

    background-color:
        var(--seer-abyss);

    font-size: 0.62rem;

    letter-spacing: 4px;

    transform:
        translateX(-50%);
}


/* ==========================================================================
   15.5 THEMED CONCEPT DATA CHIPS
   ==========================================================================
   The bottom metadata now belongs to each project instead of all projects
   sharing one generic green/gold treatment.
   ========================================================================== */

.projects-page .project-concept-data span {
    background-color:
        rgba(5, 6, 13, 0.44);

    box-shadow:
        inset 0 0 7px rgba(255, 255, 255, 0.012);
}


/* ==================== PANGEA // THE VALLEY ==================== */

.projects-page
.uncharted-pangea
.project-concept-data span {
    color:
        var(--town_valley-6);

    border-color:
        rgba(154, 186, 38, 0.42);

    background:
        linear-gradient(
            90deg,
            rgba(87, 45, 22, 0.18),
            rgba(109, 141, 46, 0.10)
        );
}


/* ==================== CITY P.T.P // PRISM ==================== */

.projects-page
.uncharted-city-ptp
.project-concept-data span {
    color:
        #d8d8e8;

    border-color:
        rgba(117, 83, 177, 0.34);
}


.projects-page
.uncharted-city-ptp
.project-concept-data span:nth-child(6n + 1) {
    color: var(--demon_prism-1);
    border-color: rgba(243, 90, 102, 0.42);
}


.projects-page
.uncharted-city-ptp
.project-concept-data span:nth-child(6n + 2) {
    color: var(--demon_prism-2);
    border-color: rgba(239, 139, 41, 0.42);
}


.projects-page
.uncharted-city-ptp
.project-concept-data span:nth-child(6n + 3) {
    color: var(--demon_prism-3);
    border-color: rgba(233, 206, 70, 0.42);
}


.projects-page
.uncharted-city-ptp
.project-concept-data span:nth-child(6n + 4) {
    color: var(--demon_prism-4);
    border-color: rgba(141, 204, 69, 0.42);
}


.projects-page
.uncharted-city-ptp
.project-concept-data span:nth-child(6n + 5) {
    color: var(--demon_prism-5);
    border-color: rgba(75, 143, 215, 0.42);
}


.projects-page
.uncharted-city-ptp
.project-concept-data span:nth-child(6n + 6) {
    color: var(--demon_prism-6);
    border-color: rgba(133, 62, 176, 0.42);
}


/* ==================== ADRENALINE // STIGMATA ==================== */

.projects-page
.uncharted-adrenaline
.project-concept-data span {
    color:
        #c7c7cc;

    border-color:
        rgba(225, 24, 37, 0.38);

    background:
        linear-gradient(
            90deg,
            rgba(142, 9, 13, 0.18),
            rgba(31, 34, 36, 0.18)
        );
}


.projects-page
.uncharted-adrenaline
.project-concept-data span:nth-child(odd) {
    color:
        var(--saint_stigmata-3);
}


.projects-page
.uncharted-adrenaline
.project-concept-data span:nth-child(even) {
    color:
        var(--saint_stigmata-6);
}


/* ==================== GANGBAG // CORRUPTION / DHAMPIR ==================== */

.projects-page
.uncharted-gangbag
.project-concept-data span {
    color:
        var(--entity_corruption-6);

    border-color:
        rgba(123, 37, 103, 0.38);

    background:
        linear-gradient(
            90deg,
            rgba(49, 85, 40, 0.12),
            rgba(123, 37, 103, 0.15)
        );
}


.projects-page
.uncharted-gangbag
.project-concept-data span:nth-child(even) {
    color:
        var(--saint_mother_dhampir-5);
}


/* ==================== PHILOS // SCIENCE / ARCANE ==================== */

.projects-page
.uncharted-philos
.project-concept-data span {
    background-color:
        rgba(6, 8, 17, 0.46);
}


.projects-page
.uncharted-philos
.project-concept-data span:nth-child(odd) {
    color:
        var(--angel_all_seeing_eye-4);

    border-color:
        rgba(66, 168, 211, 0.34);
}


.projects-page
.uncharted-philos
.project-concept-data span:nth-child(even) {
    color:
        var(--entity_web-5);

    border-color:
        rgba(130, 144, 170, 0.34);
}


/* ==================== AVATAR SEEDS // DREAMSCAPE / STRANGER ==================== */

.projects-page
.uncharted-avatar-seeds
.project-concept-data span {
    color:
        var(--town_dreamscape-4);

    border-color:
        rgba(53, 169, 200, 0.34);
}


.projects-page
.uncharted-avatar-seeds
.project-concept-data span:nth-child(even) {
    color:
        var(--entity_stranger-4);

    border-color:
        rgba(239, 154, 128, 0.34);
}


/* ==========================================================================
   15.6 CONCEPT BOARDS GET PROJECT-SPECIFIC INK
   ========================================================================== */

.projects-page .adrenaline-duality-board {
    border-color:
        rgba(225, 24, 37, 0.30);

    background:
        rgba(14, 7, 11, 0.42);
}


.projects-page .compulsion-loop {
    border-color:
        rgba(123, 37, 103, 0.30);

    background:
        linear-gradient(
            90deg,
            rgba(49, 85, 40, 0.07),
            rgba(123, 37, 103, 0.09)
        );
}


.projects-page .philos-duality-board {
    box-shadow:
        inset 0 0 15px rgba(47, 75, 132, 0.025);
}

/* ==========================================================================
   16. V3.2 // PROJECTS CORRECTIONS
   ==========================================================================
   REQUESTED:
   ===> Activity meters become unmistakably visible.
   ===> Uncharted archive nodes return and become brighter.
   ===> Archive spine becomes clearer.
   ===> Background constellation dots + research grid become clearer.
   ========================================================================== */


/* ==========================================================================
   16.1 STRONGER OBSERVATORY BACKGROUND
   ========================================================================== */

.projects-page {
    background-image:
        radial-gradient(
            circle at 88% 6%,
            rgba(84, 69, 123, 0.13),
            transparent 22%
        ),
        radial-gradient(
            circle at 8% 42%,
            rgba(36, 83, 106, 0.10),
            transparent 26%
        ),
        radial-gradient(
            circle at 76% 86%,
            rgba(142, 9, 13, 0.05),
            transparent 22%
        ),
        radial-gradient(
            circle,
            rgba(178, 195, 204, 0.11) 1px,
            transparent 1.8px
        ),
        linear-gradient(
            rgba(102, 81, 122, 0.055) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(47, 75, 132, 0.05) 1px,
            transparent 1px
        );

    background-size:
        auto,
        auto,
        auto,
        52px 52px,
        104px 104px,
        104px 104px;

    background-position:
        0 0,
        0 0,
        0 0,
        9px 14px,
        0 0,
        0 0;
}


/* ==========================================================================
   16.2 ACTIVITY METERS // TRACK
   ========================================================================== */

.projects-page .status-signal-track {
    position: relative;

    height: 10px;

    overflow: hidden;

    background:
        #050612;

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

    box-shadow:
        inset 0 0 6px rgba(0, 0, 0, 0.68);
}


/*
   The actual empty .status-signal-fill elements remain in the HTML for
   semantics/template compatibility, but the visible meter is now drawn by
   the TRACK pseudo-element. This avoids browser quirks with empty percentage-
   height children and makes these three fixed activity levels bulletproof.
*/

.projects-page .status-signal-fill {
    visibility: hidden;
}


.projects-page .status-signal-track::before {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;
    left: 0;

    display: block;

    border-radius: 2px;

    opacity: 1;
}


/* ==================== ONGOING // 88% ==================== */

.projects-page
.status-column-ongoing
.status-signal-track::before {
    width: 88%;

    background:
        linear-gradient(
            90deg,
            #2e78b9,
            #42a8d3 55%,
            #5fd5e5
        );

    box-shadow:
        0 0 9px rgba(95, 213, 229, 0.52);
}


/* ==================== IN PROGRESS // 58% ==================== */

.projects-page
.status-column-progress
.status-signal-track::before {
    width: 58%;

    background:
        linear-gradient(
            90deg,
            #8e090d,
            #bc1014 48%,
            #e11825
        );

    box-shadow:
        0 0 9px rgba(225, 24, 37, 0.46);
}


/* ==================== ON BREAK // 18% ==================== */

.projects-page
.status-column-break
.status-signal-track::before {
    width: 18%;

    background:
        linear-gradient(
            90deg,
            #888989,
            #54575a 68%,
            #33383b
        );

    box-shadow:
        0 0 7px rgba(136, 137, 137, 0.38);
}


/* ==========================================================================
   16.3 UNCHARTED ARCHIVE SPINE
   ========================================================================== */

.projects-page .uncharted-project-grid::before {
    width: 2px;

    left: 8px;

    background:
        linear-gradient(
            180deg,
            transparent 0%,
            rgba(130, 185, 216, 0.48) 8%,
            rgba(169, 154, 226, 0.56) 48%,
            rgba(200, 84, 120, 0.42) 90%,
            transparent 100%
        );

    box-shadow:
        0 0 7px rgba(130, 144, 170, 0.15);
}


/* ==========================================================================
   16.4 UNCHARTED ARCHIVE NODES
   ==========================================================================
   Use the brighter secondary concept color as the node center.
   A darker outer ring keeps the node readable against every project palette.
   ========================================================================== */

.projects-page .uncharted-project-card::before {
    top: 25px;
    left: -24px;

    width: 10px;
    height: 10px;

    box-sizing: border-box;

    background:
        var(--concept-accent-2, #c5b6ff);

    border:
        2px solid #070812;

    outline:
        1px solid var(--concept-accent, #a99ae2);

    outline-offset:
        1px;

    box-shadow:
        0 0 6px var(--concept-accent-2, #c5b6ff),
        0 0 12px
            color-mix(
                in srgb,
                var(--concept-accent, #a99ae2) 38%,
                transparent
            );

    opacity: 1;

    z-index: 8;
}


/* ==================== NODE HOVER ==================== */

.projects-page .uncharted-project-card:hover::before,
.projects-page .uncharted-project-card[open]::before {
    transform: scale(1.16);

    background:
        #f0edf7;

    box-shadow:
        0 0 6px #f0edf7,
        0 0 13px var(--concept-accent, #a99ae2);
}