/* =========================================================
   CODEX
   ========================================================= */

.codexFilters {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 35px;
}


.codexFilter {
    padding: 7px 13px;

    border: 1px solid var(--border);
    border-radius: 999px;

    background: transparent;
    color: var(--muted);

    cursor: pointer;

    font-size: 0.72rem;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}


.codexFilter:hover,
.codexFilter.active {
    border-color: var(--gold);

    background:
        rgba(201, 166, 91, 0.12);

    color: var(--gold-light);
}


.codexGrid {
    gap: 24px;
}


.codexCard {
    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.35);
}


.codexImage,
.codexImagePlaceholder {
    width: 100%;
    height: 160px;
}


.codexImage {
    object-fit: cover;
}


.codexImagePlaceholder {
    color: var(--gold);

    font-size: 0.7rem;

    letter-spacing: 0.15em;
    text-transform: uppercase;
}


.codexCardContent {
    padding: 17px;
}


.codexType {
    margin-bottom: 5px;

    color: var(--gold);

    font-size: 0.62rem;
    font-weight: bold;

    letter-spacing: 0.12em;
    text-transform: uppercase;
}


.codexCard h3 {
    margin-bottom: 9px;

    font-size: 1.18rem;
}


.codexSummary {
    margin-bottom: 15px;

    color: var(--muted);

    font-size: 0.82rem;
    line-height: 1.45;
}


.codexCard .secondaryButton {
    padding: 7px 11px;
    font-size: 0.72rem;
}


.codexCard[hidden] {
    display: none;
}

.codexModalImage {
    width: 100%;
    max-height: 360px;

    margin-bottom: 22px;

}