.jr-projects-archive-main {
    width: 100%;
}

.jr-projects-archive-shell {
    width: min(1280px, calc(100% - 40px));
    margin: 0 auto;
    padding: clamp(3.5rem, 7vw, 7rem) 0 clamp(4rem, 8vw, 8rem);
}

.jr-project-explorer {
    --jr-project-accent: #c7a35d;
    --jr-project-border: color-mix(in srgb, currentColor 16%, transparent);
    --jr-project-muted: color-mix(in srgb, currentColor 68%, transparent);
    box-sizing: border-box;
    width: 100%;
    color: inherit;
    font: inherit;
}

.jr-project-explorer *,
.jr-project-explorer *::before,
.jr-project-explorer *::after {
    box-sizing: border-box;
}

.jr-project-explorer-intro {
    max-width: 880px;
    margin-bottom: clamp(2.6rem, 6vw, 5.5rem);
}

.jr-project-explorer-eyebrow,
.jr-project-all-kicker {
    margin-bottom: .8rem;
    color: var(--jr-project-accent);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.jr-project-explorer-heading {
    max-width: 900px;
    margin: 0;
    font: inherit;
    font-size: clamp(2.6rem, 7vw, 5.8rem);
    font-weight: 760;
    letter-spacing: -.045em;
    line-height: .96;
}

.jr-project-explorer-copy {
    max-width: 760px;
    margin: 1.35rem 0 0;
    font-size: clamp(1.02rem, 1.6vw, 1.24rem);
    line-height: 1.7;
    opacity: .76;
}

.jr-project-featured {
    margin-bottom: clamp(3.8rem, 7vw, 6.5rem);
}

.jr-project-section-heading-row {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
    padding-bottom: .9rem;
    border-bottom: 1px solid var(--jr-project-border);
}

.jr-project-section-heading-row h2 {
    margin: 0;
    font: inherit;
    font-size: clamp(1.55rem, 2.7vw, 2.35rem);
    font-weight: 720;
    letter-spacing: -.025em;
    line-height: 1.08;
}

.jr-project-section-heading-row > span,
.jr-project-result-count {
    font-size: .84rem;
    opacity: .58;
}

.jr-project-featured-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1rem, 2vw, 1.5rem);
}

.jr-project-featured-count-1 {
    grid-template-columns: minmax(0, 1fr);
}

.jr-project-featured-count-3 .is-lead {
    grid-row: span 2;
}

.jr-project-explorer-card {
    display: flex;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--jr-project-border);
    border-radius: 22px;
    background: color-mix(in srgb, currentColor 3.25%, transparent);
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.jr-project-explorer-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--jr-project-accent) 58%, transparent);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .09);
}

.jr-project-featured-grid .jr-project-explorer-card {
    min-height: 280px;
}

.jr-project-featured-grid .is-lead {
    display: block;
}

.jr-project-featured-grid .is-lead .jr-project-explorer-image {
    aspect-ratio: 16 / 8.5;
    width: 100%;
}

.jr-project-featured-grid .jr-project-explorer-card:not(.is-lead) .jr-project-explorer-image {
    width: 42%;
    min-width: 180px;
}

.jr-project-explorer-image {
    position: relative;
    display: block;
    flex: 0 0 auto;
    overflow: hidden;
    min-height: 175px;
    background: color-mix(in srgb, currentColor 8%, transparent);
}

.jr-project-explorer-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 260ms ease;
}

.jr-project-explorer-card:hover .jr-project-explorer-image img {
    transform: scale(1.02);
}

.jr-project-explorer-image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 75% 25%, color-mix(in srgb, var(--jr-project-accent) 32%, transparent), transparent 40%),
        color-mix(in srgb, currentColor 6%, transparent);
    color: inherit;
    text-decoration: none;
}

.jr-project-explorer-image-placeholder span {
    margin: auto;
    color: var(--jr-project-accent);
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -.08em;
}

.jr-project-explorer-card-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    padding: clamp(1.15rem, 2.2vw, 1.6rem);
}

.jr-project-explorer-card-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    margin-bottom: .6rem;
}

.jr-project-explorer-type {
    overflow: hidden;
    color: var(--jr-project-accent);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .095em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.jr-project-explorer-status {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: .38rem;
    font-size: .68rem;
    font-weight: 700;
    opacity: .64;
}

.jr-project-explorer-status-active::before {
    width: .44rem;
    height: .44rem;
    border-radius: 50%;
    background: #39a96b;
    content: "";
}

.jr-project-explorer-card h3 {
    margin: 0;
    font: inherit;
    font-size: clamp(1.18rem, 2vw, 1.55rem);
    font-weight: 730;
    letter-spacing: -.025em;
    line-height: 1.15;
}

.jr-project-explorer-card h3 a,
.jr-project-explorer-details-link,
.jr-project-explorer-external-links a {
    color: inherit;
    text-decoration: none;
}

.jr-project-explorer-card h3 a:hover,
.jr-project-explorer-card h3 a:focus-visible,
.jr-project-explorer-details-link:hover,
.jr-project-explorer-details-link:focus-visible,
.jr-project-explorer-external-links a:hover,
.jr-project-explorer-external-links a:focus-visible {
    color: var(--jr-project-accent);
}

.jr-project-explorer-role {
    margin-top: .45rem;
    font-size: .78rem;
    font-weight: 650;
    opacity: .58;
}

.jr-project-explorer-card p {
    margin: .85rem 0 0;
    font-size: .91rem;
    line-height: 1.58;
    opacity: .72;
}

.jr-project-explorer-technologies {
    display: flex;
    flex-wrap: wrap;
    gap: .36rem;
    margin-top: .9rem;
}

.jr-project-explorer-technologies span {
    display: inline-flex;
    align-items: center;
    min-height: 1.55rem;
    padding: .2rem .48rem;
    border: 1px solid var(--jr-project-border);
    border-radius: 7px;
    font-size: .67rem;
    font-weight: 650;
}

.jr-project-explorer-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    margin-top: auto;
    padding-top: 1rem;
    font-size: .74rem;
}

.jr-project-explorer-card-footer > span {
    opacity: .52;
}

.jr-project-explorer-details-link {
    flex: 0 0 auto;
    font-weight: 750;
}

.jr-project-explorer-external-links {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem 1rem;
    margin-top: .85rem;
    padding-top: .85rem;
    border-top: 1px solid var(--jr-project-border);
    font-size: .73rem;
    font-weight: 700;
}

.jr-project-all-heading-row {
    align-items: end;
    margin-bottom: 1rem;
}

.jr-project-all-kicker {
    margin-bottom: .35rem;
}

.jr-project-explorer-controls {
    display: grid;
    grid-template-columns: minmax(220px, 1.5fr) repeat(4, minmax(130px, .75fr)) auto;
    gap: .7rem;
    align-items: end;
    margin-bottom: 1.5rem;
    padding: 1rem;
    border: 1px solid var(--jr-project-border);
    border-radius: 16px;
    background: color-mix(in srgb, currentColor 2.4%, transparent);
}

.jr-project-control {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: .35rem;
}

.jr-project-control > span {
    font-size: .67rem;
    font-weight: 750;
    letter-spacing: .055em;
    opacity: .58;
    text-transform: uppercase;
}

.jr-project-control input,
.jr-project-control select {
    width: 100%;
    min-height: 2.7rem;
    margin: 0;
    padding: .55rem .7rem;
    border: 1px solid var(--jr-project-border);
    border-radius: 9px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: .84rem;
}

.jr-project-control input:focus,
.jr-project-control select:focus {
    border-color: var(--jr-project-accent);
    outline: 2px solid color-mix(in srgb, var(--jr-project-accent) 26%, transparent);
    outline-offset: 1px;
}

.jr-project-clear-filters {
    min-height: 2.7rem;
    padding: .55rem .8rem;
    border: 1px solid var(--jr-project-border);
    border-radius: 9px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font: inherit;
    font-size: .78rem;
    font-weight: 700;
}

.jr-project-clear-filters:not(:disabled):hover,
.jr-project-clear-filters:not(:disabled):focus-visible {
    border-color: var(--jr-project-accent);
    color: var(--jr-project-accent);
}

.jr-project-clear-filters:disabled {
    cursor: default;
    opacity: .38;
}

.jr-project-explorer-grid {
    display: grid;
    grid-template-columns: repeat(var(--jr-explorer-columns, 3), minmax(0, 1fr));
    gap: clamp(1rem, 2vw, 1.4rem);
}

.jr-project-explorer-columns-1 { --jr-explorer-columns: 1; }
.jr-project-explorer-columns-2 { --jr-explorer-columns: 2; }
.jr-project-explorer-columns-3 { --jr-explorer-columns: 3; }
.jr-project-explorer-columns-4 { --jr-explorer-columns: 4; }

.jr-project-explorer-grid .jr-project-explorer-card {
    display: block;
}

.jr-project-explorer-grid .jr-project-explorer-image {
    aspect-ratio: 16 / 9;
    width: 100%;
}

.jr-project-explorer-empty {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    padding: 2.2rem;
    border: 1px dashed var(--jr-project-border);
    border-radius: 16px;
    text-align: center;
}

.jr-project-explorer-empty span {
    font-size: .9rem;
    opacity: .62;
}

.jr-project-explorer [hidden] {
    display: none !important;
}

@media (max-width: 1100px) {
    .jr-project-explorer-controls {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .jr-project-search-control {
        grid-column: span 2;
    }

    .jr-project-explorer-columns-4 .jr-project-explorer-grid,
    .jr-project-explorer-columns-3 .jr-project-explorer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    .jr-project-featured-grid {
        grid-template-columns: 1fr;
    }

    .jr-project-featured-grid .is-lead {
        grid-row: auto;
    }

    .jr-project-featured-grid .jr-project-explorer-card:not(.is-lead) .jr-project-explorer-image {
        width: 38%;
    }

    .jr-project-explorer-controls {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .jr-project-search-control {
        grid-column: span 2;
    }
}

@media (max-width: 600px) {
    .jr-projects-archive-shell {
        width: min(100% - 28px, 1280px);
        padding-top: 3rem;
    }

    .jr-project-section-heading-row {
        align-items: start;
        flex-direction: column;
    }

    .jr-project-featured-grid .jr-project-explorer-card,
    .jr-project-featured-grid .jr-project-explorer-card:not(.is-lead) {
        display: block;
    }

    .jr-project-featured-grid .jr-project-explorer-card:not(.is-lead) .jr-project-explorer-image,
    .jr-project-featured-grid .is-lead .jr-project-explorer-image {
        aspect-ratio: 16 / 9;
        width: 100%;
    }

    .jr-project-explorer-controls,
    .jr-project-explorer-columns-2 .jr-project-explorer-grid,
    .jr-project-explorer-columns-3 .jr-project-explorer-grid,
    .jr-project-explorer-columns-4 .jr-project-explorer-grid,
    .jr-project-explorer-grid {
        grid-template-columns: 1fr;
    }

    .jr-project-search-control {
        grid-column: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .jr-project-explorer-card,
    .jr-project-explorer-image img {
        transition: none;
    }
}

.jr-project-explorer-release-available {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .25rem;
    align-items: center;
    align-self: flex-start;
    margin-top: .45rem;
    padding: .28rem .55rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--jr-project-explorer-accent, #c7a35d) 14%, transparent);
    font-size: .7rem;
    font-weight: 800;
    line-height: 1.25;
}