body.projects-page {
    min-height: 100svh;
    background: radial-gradient(circle at 18% 8%, #5a07114d 0, transparent 30vw), radial-gradient(circle at 84% 18%, #b9172924 0, transparent 26vw), #0a0a0a;
    color: var(--text);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: auto;
    touch-action: pan-y;
}

html:has(body.projects-page) {
    overflow-x: hidden;
    overflow-y: auto !important;
    height: auto !important;
}

html:has(body.projects-page:not(.drawer-lock)),
body.projects-page:not(.drawer-lock) {
    overflow-y: auto !important;
    height: auto !important;
}

body.projects-page.drawer-lock {
    overflow: hidden !important;
}

.projects-shell {
    isolation: isolate;
    width: 100%;
    min-height: 100svh;
    padding: clamp(22px, 3vw, 44px) clamp(22px, 4vw, 64px) clamp(54px, 7vw, 96px);
    position: relative;
}

.projects-shell:before {
    content: "";
    z-index: -1;
    pointer-events: none;
    opacity: .2;
    background-image: url("./topographic.svg");
    background-size: 1200px auto;
    background-position: 50% 0;
    position: fixed;
    inset: 0;
}

.archive-nav,
.project-nav {
    z-index: 10;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    width: 100%;
    display: flex;
    position: relative;
}

.archive-nav--minimal {
    align-items: center;
    justify-content: space-between;
    gap: clamp(14px, 2vw, 24px);
}

.archive-mark,
.project-mark {
    color: var(--text);
    font-family: var(--f-mono);
    letter-spacing: .22em;
    text-transform: uppercase;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    text-decoration: none;
    display: inline-flex;
}

.archive-kicker--nav {
    border-bottom: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    width: auto;
    padding-bottom: 0;
    text-align: left;
}

.archive-menu-btn {
    flex: 0 0 auto;
}

.archive-menu-btn svg {
    width: 18px;
    height: 18px;
}

.archive-menu-btn:hover,
.archive-menu-btn[aria-expanded=true] {
    border-color: var(--highlight);
    box-shadow: 0 0 18px #b9172940;
}

.archive-menu {
    z-index: 20;
    text-align: right;
    background: #0a0a0ad9;
    border: 1px solid #f3ede326;
    min-width: 240px;
    padding: 18px 20px;
    position: absolute;
    top: clamp(92px, 10vw, 132px);
    right: clamp(22px, 4vw, 64px);
}

.archive-menu a {
    color: var(--text);
    font-family: var(--f-display);
    letter-spacing: .02em;
    text-transform: uppercase;
    padding: 10px 0;
    font-size: clamp(30px, 4vw, 58px);
    line-height: .94;
    text-decoration: none;
    display: block;
}

.archive-menu a:hover,
.archive-menu a[aria-current=page] {
    color: var(--highlight);
}

.projects-page .drawer-nav a[aria-current=page] .nav-label {
    color: var(--highlight);
}

.projects-page .drawer-nav a[aria-current=page] .nav-num {
    color: var(--highlight);
}

.archive-mark .jp,
.project-mark .jp {
    color: var(--highlight);
    font-family: var(--f-body), var(--f-jp), sans-serif;
    letter-spacing: 0;
    font-size: 18px;
}

.archive-nav__links,
.project-nav__links {
    align-items: center;
    gap: clamp(12px, 2vw, 28px);
    display: flex;
}

.archive-nav__links a,
.project-nav__links a {
    color: var(--text-dim);
    font-family: var(--f-mono);
    letter-spacing: .18em;
    text-transform: uppercase;
    font-size: 11px;
    text-decoration: none;
}

.archive-nav__links a:hover,
.project-nav__links a:hover {
    color: var(--highlight);
}

.archive-hero {
    gap: clamp(24px, 4vw, 64px);
    grid-template-columns: minmax(0, .96fr) minmax(300px, .82fr);
    align-items: center;
    min-height: 0;
    padding-block: clamp(44px, 7vh, 96px) clamp(30px, 6vh, 76px);
    display: grid;
}

.archive-kicker,
.project-kicker {
    color: var(--text-dim);
    font-family: var(--f-mono);
    letter-spacing: .3em;
    text-transform: uppercase;
    border-bottom: 1px dashed #b917294d;
    justify-content: space-between;
    gap: 18px;
    width: 100%;
    padding-bottom: 16px;
    font-size: 12px;
    display: flex;
}

.archive-kicker .jp,
.project-kicker .jp {
    color: var(--highlight);
    font-family: var(--f-body), var(--f-jp), sans-serif;
    letter-spacing: 0;
    font-size: 18px;
}

.archive-title {
    color: var(--ink);
    max-width: 9ch;
    margin: 0;
    font-family: var(--f-display);
    font-size: clamp(68px, 9.5vw, 156px);
    font-weight: 800;
    line-height: .82;
}

.archive-title em {
    color: var(--highlight);
    font-style: italic;
}

.archive-deck {
    color: var(--text-dim);
    border-left: 1px solid #b9172959;
    margin: 0;
    padding-left: clamp(24px, 3vw, 48px);
    font-size: clamp(18px, 1.45vw, 24px);
    line-height: 1.34;
    position: relative;
    z-index: 2;
}

.archive-deck strong {
    color: var(--text);
}

.archive-controls {
    z-index: 4;
    background: linear-gradient(90deg, #0a0a0afa, #1a0308d9);
    border-top: 1px dashed #f3ede326;
    border-bottom: 1px dashed #f3ede326;
    grid-template-columns: minmax(260px, 400px) minmax(0, 1fr);
    align-items: center;
    gap: clamp(16px, 2.5vw, 34px);
    margin-bottom: clamp(26px, 5vw, 72px);
    padding: 22px clamp(18px, 2.2vw, 34px);
    display: grid;
    position: sticky;
    top: 0;
}

.project-search {
    color: var(--text);
    background: #f3ede30a;
    border: 1px solid #f3ede326;
    border-radius: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 16px 18px;
    font-family: var(--f-body);
    font-size: 16px;
}

.project-search:focus {
    border-color: var(--highlight);
    outline: none;
}

.filter-row {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 12px;
    display: flex;
}

.filter-btn {
    color: var(--text-dim);
    cursor: pointer;
    background: #0000;
    border: 1px solid #f3ede32b;
    padding: 11px 14px;
    font-family: var(--f-mono);
    letter-spacing: .12em;
    text-transform: uppercase;
    font-size: 11px;
}

.filter-btn.is-active,
.filter-btn:hover {
    color: #0a0a0a;
    background: var(--highlight);
    border-color: var(--highlight);
}

.project-collage {
    grid-template-columns: repeat(12, 1fr);
    gap: clamp(14px, 2vw, 28px);
    display: grid;
}

.project-card {
    color: var(--text);
    background: linear-gradient(180deg, #f3ede30a, #0a0a0a);
    border: 1px solid #f3ede324;
    grid-column: span 4;
    min-height: 520px;
    text-decoration: none;
    overflow: hidden;
    position: relative;
}

.project-card:nth-child(1),
.project-card:nth-child(6) {
    grid-column: span 7;
}

.project-card:nth-child(2),
.project-card:nth-child(5) {
    grid-column: span 5;
}

.project-card:nth-child(3),
.project-card:nth-child(4),
.project-card:nth-child(7) {
    grid-column: span 4;
}

.project-card__media {
    background: radial-gradient(circle at var(--mx, 50%) var(--my, 40%), #b917297a, #0a0a0a 58%);
    height: 260px;
    position: relative;
    overflow: hidden;
}

.project-card__media img {
    opacity: .72;
    filter: saturate(.92) contrast(1.08);
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block;
    transform: scale(1.04);
}

.project-card__media:after {
    content: "";
    background: linear-gradient(180deg, transparent, #0a0a0a);
    position: absolute;
    inset: 45% 0 0;
}

.project-card__body {
    padding: clamp(22px, 3vw, 36px);
}

.project-card__meta {
    color: var(--highlight);
    font-family: var(--f-mono);
    letter-spacing: .24em;
    text-transform: uppercase;
    font-size: 11px;
}

.project-card h2 {
    color: var(--ink);
    margin: 18px 0 8px;
    font-family: var(--f-display);
    font-size: clamp(38px, 4.4vw, 86px);
    line-height: .9;
}

.project-card h3 {
    color: var(--text);
    margin: 0 0 14px;
    font-family: var(--f-body);
    font-size: clamp(18px, 1.8vw, 26px);
    font-weight: 650;
}

.project-card p {
    color: var(--text-dim);
    max-width: 62ch;
    margin: 0;
    font-size: 16px;
    line-height: 1.45;
}

.project-tags {
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 22px;
    display: flex;
}

.project-tags span,
.skill-pill {
    color: var(--text-dim);
    border: 1px solid #f3ede324;
    padding: 7px 9px;
    font-family: var(--f-mono);
    letter-spacing: .12em;
    text-transform: uppercase;
    font-size: 10px;
}

.project-card__cta {
    color: var(--highlight);
    margin-top: 24px;
    font-family: var(--f-mono);
    letter-spacing: .16em;
    text-transform: uppercase;
    font-size: 11px;
    display: inline-flex;
}

.project-card:hover {
    border-color: #b9172999;
}

.project-card:hover .project-card__media img {
    transform: scale(1.09);
}

.no-results {
    color: var(--text-dim);
    border: 1px dashed #b9172959;
    grid-column: 1 / -1;
    padding: 36px;
    font-family: var(--f-mono);
    letter-spacing: .18em;
    text-transform: uppercase;
}

.project-detail-page {
    background: #0a0a0a;
    color: var(--text);
}

.project-hero {
    isolation: isolate;
    min-height: 100svh;
    padding: clamp(22px, 4vw, 64px);
    position: relative;
    overflow: hidden;
}

.project-hero__bg {
    z-index: -2;
    opacity: .58;
    position: absolute;
    inset: 0;
}

.project-hero__reveal {
    z-index: -1;
    opacity: 0;
    clip-path: circle(var(--reveal-size, 0px) at var(--reveal-x, 50%) var(--reveal-y, 50%));
    filter: saturate(1.18) contrast(1.16) brightness(1.1);
    transition: opacity .32s var(--ease-out-expo);
    position: absolute;
    inset: 0;
}

.project-hero__bg img {
    filter: saturate(.9) contrast(1.1);
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.project-hero__reveal img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.project-hero.is-revealing .project-hero__reveal {
    opacity: .88;
}

.project-hero:after {
    content: "";
    z-index: 0;
    background: linear-gradient(90deg, #0a0a0af5 0%, #0a0a0ab8 42%, #0a0a0a33 100%), linear-gradient(0deg, #0a0a0a 0%, transparent 45%);
    position: absolute;
    inset: 0;
}

.project-hero__content {
    position: relative;
    z-index: 2;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 420px);
    align-items: end;
    gap: clamp(28px, 5vw, 88px);
    min-height: calc(100svh - 128px);
    padding-top: clamp(80px, 14vh, 170px);
    display: grid;
}

.project-title {
    color: var(--ink);
    max-width: 11ch;
    margin: clamp(30px, 5vw, 70px) 0 20px;
    font-family: var(--f-display);
    font-size: clamp(58px, 10.5vw, 172px);
    line-height: .82;
    overflow-wrap: anywhere;
}

.project-subtitle {
    color: var(--text-dim);
    max-width: 720px;
    font-size: clamp(18px, 2vw, 30px);
    line-height: 1.2;
}

.project-facts {
    background: #0a0a0ab3;
    border: 1px solid #f3ede329;
    padding: 24px;
}

.project-facts dl {
    grid-template-columns: 110px 1fr;
    gap: 12px 16px;
    margin: 0;
    display: grid;
}

.project-facts dt {
    color: var(--text-faint);
    font-family: var(--f-mono);
    letter-spacing: .16em;
    text-transform: uppercase;
    font-size: 11px;
}

.project-facts dd {
    color: var(--text);
    margin: 0;
}

.project-facts a {
    color: var(--highlight);
    text-decoration: none;
}

.case-body {
    max-width: 1280px;
    margin: 0 auto;
    padding: clamp(56px, 8vw, 120px) clamp(22px, 4vw, 64px);
}

.case-grid {
    grid-template-columns: minmax(220px, 340px) minmax(0, 1fr);
    gap: clamp(28px, 5vw, 86px);
    border-top: 1px dashed #b917294d;
    padding-block: clamp(36px, 6vw, 78px);
    display: grid;
}

.case-grid h2 {
    color: var(--highlight);
    margin: 0;
    font-family: var(--f-mono);
    letter-spacing: .22em;
    text-transform: uppercase;
    font-size: 13px;
}

.case-grid p {
    color: var(--text-dim);
    max-width: 780px;
    margin: 0 0 18px;
    font-size: clamp(18px, 1.55vw, 24px);
    line-height: 1.48;
}

.media-slots {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    display: grid;
}

.media-slot {
    color: var(--text-dim);
    background: linear-gradient(135deg, #b9172929, #f3ede30a);
    border: 1px solid #f3ede324;
    min-height: 180px;
    padding: 18px;
    font-family: var(--f-mono);
    letter-spacing: .16em;
    text-transform: uppercase;
    font-size: 11px;
    display: flex;
    align-items: end;
}

.contributors,
.skills-row {
    flex-wrap: wrap;
    gap: 10px;
    display: flex;
}

.contributor {
    color: var(--text);
    background: #f3ede30a;
    border: 1px solid #f3ede324;
    padding: 10px 12px;
    font-family: var(--f-body);
}

.case-links {
    flex-wrap: wrap;
    gap: 14px;
    display: flex;
}

.case-link {
    color: #0a0a0a;
    background: var(--highlight);
    padding: 14px 18px;
    font-family: var(--f-mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    font-size: 11px;
    text-decoration: none;
}

.case-link--ghost {
    color: var(--text);
    background: #0000;
    border: 1px solid #f3ede33b;
}

.archive-foot {
    color: var(--text-faint);
    justify-content: space-between;
    gap: 18px;
    border-top: 1px dashed #f3ede324;
    margin-top: clamp(40px, 6vw, 80px);
    padding-top: 24px;
    font-family: var(--f-mono);
    letter-spacing: .18em;
    text-transform: uppercase;
    font-size: 11px;
    display: flex;
}

@media (max-width: 900px) {
    .archive-hero,
    .archive-controls,
    .project-hero__content,
    .case-grid {
        grid-template-columns: 1fr;
    }

    .archive-controls {
        position: static;
    }

    .archive-nav--minimal {
        align-items: center;
    }

    .archive-kicker--nav {
        margin-left: 0;
    }

    .filter-row {
        justify-content: flex-start;
    }

    .project-card,
    .project-card:nth-child(n) {
        grid-column: 1 / -1;
        min-height: 0;
    }

    .media-slots {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .projects-shell,
    .project-hero {
        padding: 18px;
    }

    .archive-nav,
    .project-nav,
    .archive-foot {
        align-items: flex-start;
        flex-direction: column;
    }

    .archive-nav--minimal {
        align-items: center;
        flex-direction: row;
    }

    .archive-kicker--nav {
        font-size: 10px;
    }

    .archive-menu {
        left: 18px;
        right: 18px;
        top: 96px;
    }

    .archive-nav__links,
    .project-nav__links {
        flex-wrap: wrap;
    }

    .archive-title,
    .project-title {
        font-size: clamp(54px, 18vw, 96px);
    }

    .project-card__media {
        height: 210px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .project-card,
    .project-card__media img,
    .filter-btn,
    .archive-nav__links a,
    .project-nav__links a {
        transition: none !important;
    }

    .project-card:hover .project-card__media img {
        transform: scale(1.04);
    }
}

/* Vedarsh project chamber: compact, even cards with a rotary feel. */
.project-collage {
    --card-w: clamp(292px, 32vw, 468px);
    --card-h: clamp(500px, 62vh, 620px);
    display: flex;
    grid-template-columns: none;
    gap: clamp(16px, 2vw, 26px);
    min-height: calc(var(--card-h) + 72px);
    margin-inline: clamp(-8px, -1vw, -18px);
    padding: clamp(22px, 3vw, 42px) clamp(22px, 5vw, 72px) clamp(38px, 5vw, 70px);
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: clamp(22px, 5vw, 72px);
    perspective: 1200px;
    border-top: 1px solid #b9172938;
    border-bottom: 1px solid #b9172938;
    background:
        radial-gradient(circle at 50% 50%, #b9172926 0 14%, transparent 36%),
        repeating-radial-gradient(circle at 50% 50%, #b917291f 0 1px, transparent 1px 58px),
        linear-gradient(90deg, #0a0a0a 0, #140306 48%, #0a0a0a 100%);
    scrollbar-color: #b91729 #130306;
}

.project-collage:before {
    content: "ROTARY PROJECT CHAMBER / SCROLL SIDEWAYS";
    color: var(--text-faint);
    pointer-events: none;
    font-family: var(--f-mono);
    letter-spacing: .24em;
    text-transform: uppercase;
    font-size: 10px;
    position: sticky;
    left: 0;
    align-self: flex-start;
    min-width: 1px;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

.project-card,
.project-card:nth-child(n) {
    flex: 0 0 var(--card-w);
    grid-column: auto;
    min-height: var(--card-h);
    scroll-snap-align: center;
    display: flex;
    flex-direction: column;
    transform: rotateY(var(--turn, 0deg)) translateY(var(--lift, 0));
    transition: transform .55s var(--ease-out-expo), border-color .35s ease, opacity .35s ease, filter .35s ease;
    opacity: .72;
    filter: saturate(.74) brightness(.78);
}

.project-card.is-active {
    --lift: -10px;
    opacity: 1;
    filter: saturate(1.05) brightness(1);
    border-color: #b91729b8;
    box-shadow: 0 22px 70px #0009, 0 0 34px #b9172938;
}

.project-card__media {
    height: clamp(190px, 28vh, 280px);
    flex: 0 0 auto;
}

.project-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: clamp(18px, 2.2vw, 26px);
}

.project-card h2 {
    font-size: clamp(34px, 4vw, 64px);
}

.project-card h3 {
    font-size: clamp(15px, 1.25vw, 20px);
    line-height: 1.14;
}

.project-card p {
    font-size: 14px;
    line-height: 1.42;
}

.project-card__cta {
    margin-top: auto;
}

.project-detail-page {
    overflow-x: hidden;
}

.project-detail-page .project-hero {
    min-height: min(760px, 82svh);
    padding: clamp(18px, 3vw, 46px);
}

.project-detail-page .project-hero__content {
    min-height: min(620px, calc(82svh - 96px));
    grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
    align-items: center;
    padding-top: clamp(50px, 8vh, 96px);
    gap: clamp(20px, 4vw, 54px);
}

.project-detail-page .project-title {
    max-width: 12ch;
    margin: clamp(18px, 3vw, 34px) 0 12px;
    font-size: clamp(54px, 8.4vw, 128px);
}

.project-detail-page .project-subtitle {
    max-width: 620px;
    font-size: clamp(15px, 1.45vw, 22px);
    line-height: 1.24;
}

.project-detail-page .project-facts {
    padding: 16px;
    backdrop-filter: blur(12px);
}

.project-detail-page .project-facts dl {
    grid-template-columns: 78px 1fr;
    gap: 8px 12px;
}

.project-detail-page .project-facts dt {
    font-size: 9px;
}

.project-detail-page .project-facts dd {
    font-size: 13px;
    line-height: 1.25;
}

.case-body {
    max-width: 1440px;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: clamp(12px, 1.5vw, 20px);
    padding-block: clamp(28px, 4vw, 58px);
}

.case-grid {
    grid-column: span 6;
    display: block;
    border: 1px solid #f3ede31f;
    background: linear-gradient(145deg, #f3ede30b, #0a0a0af2);
    padding: clamp(16px, 2vw, 24px);
    min-height: 0;
}

.case-grid h2 {
    margin-bottom: 14px;
    font-size: 11px;
}

.case-grid p {
    max-width: none;
    font-size: 14px;
    line-height: 1.45;
}

.case-grid:nth-of-type(5),
.case-grid:nth-of-type(6),
.case-grid:nth-of-type(7),
.case-grid:nth-of-type(8) {
    grid-column: 1 / -1;
}

.media-slots {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
    scrollbar-width: none;
}

.media-slots::-webkit-scrollbar {
    display: none;
}

.media-gallery-wrap {
    position: relative;
}

.media-gallery-arrow {
    position: absolute;
    z-index: 3;
    top: 50%;
    translate: 0 -50%;
    width: clamp(38px, 4vw, 56px);
    aspect-ratio: 1;
    border-radius: 999px;
    border: 1px solid #f3ede333;
    color: var(--ink);
    background: #0a0a0a82;
    backdrop-filter: blur(16px);
    font-size: clamp(26px, 3vw, 40px);
    line-height: .8;
    cursor: pointer;
    opacity: .38;
    transition: opacity .25s ease, transform .25s ease, border-color .25s ease;
}

.media-gallery-arrow:hover {
    opacity: .95;
    border-color: #b91729b8;
    transform: scale(1.05);
}

.media-gallery-arrow--prev {
    left: 10px;
}

.media-gallery-arrow--next {
    right: 10px;
}

.media-slot {
    flex: 0 0 clamp(220px, 31vw, 420px);
    min-height: clamp(150px, 24vw, 260px);
    scroll-snap-align: start;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}

.media-slot:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 20%, #0a0a0ae8);
}

.media-slot span {
    position: relative;
    z-index: 1;
}

@media (max-width: 900px) {
    .project-collage {
        --card-w: min(82vw, 420px);
        min-height: calc(var(--card-h) + 56px);
    }

    .project-detail-page .project-hero__content,
    .case-body {
        grid-template-columns: 1fr;
    }

    .case-grid,
    .case-grid:nth-of-type(n) {
        grid-column: 1 / -1;
    }
}

@media (max-width: 620px) {
    .project-collage:before {
        display: none;
    }

    .project-card,
    .project-card:nth-child(n) {
        min-height: auto;
    }
}

/* Archive v13: stacked rotating lanes. Normal page scroll stays native. */
.projects-page {
    scrollbar-color: #b91729 #0a0a0a;
}

.projects-shell {
    padding-bottom: clamp(80px, 10vw, 140px);
}

.archive-controls {
    margin-bottom: clamp(18px, 3vw, 40px);
}

.filter-row {
    justify-content: flex-end;
    padding-right: 2px;
}

.filter-btn.is-active {
    color: #0a0a0a;
    background: var(--highlight);
    border-color: var(--highlight);
}

.project-collage {
    --card-w: clamp(240px, 23vw, 340px);
    --card-h: clamp(382px, 48vh, 500px);
    display: block;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: visible;
    perspective: none;
    border: 0;
    background: transparent;
    scrollbar-color: #b91729 #130306;
}

.project-collage:before {
    content: none;
}

.project-lane {
    position: relative;
    margin-block: clamp(22px, 4vw, 56px);
    padding-block: clamp(12px, 2vw, 24px) clamp(18px, 3vw, 34px);
    border-top: 1px solid #b917293b;
    border-bottom: 1px solid #f3ede314;
    background:
        radial-gradient(circle at calc(18% + var(--lane-index) * 13%) 34%, #b9172928 0 12%, transparent 34%),
        linear-gradient(90deg, #0a0a0af5 0, #160306d8 48%, #0a0a0af5 100%);
}

.project-lane[hidden] {
    display: none;
}

.project-lane__head {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) auto auto;
    align-items: end;
    gap: clamp(12px, 2vw, 28px);
    margin-bottom: clamp(12px, 2vw, 20px);
    padding-inline: clamp(12px, 2.2vw, 34px);
}

.project-lane__head span,
.project-lane__head em {
    color: var(--text-faint);
    font-family: var(--f-mono);
    letter-spacing: .2em;
    text-transform: uppercase;
    font-size: 10px;
    font-style: normal;
}

.project-lane__head strong {
    color: var(--ink);
    font-family: var(--f-display);
    font-size: clamp(36px, 5vw, 82px);
    font-weight: 800;
    letter-spacing: 0;
    line-height: .82;
    text-transform: uppercase;
}

.project-lane__head em {
    color: var(--highlight);
}

.project-lane__viewport {
    position: relative;
}

.project-lane__strip {
    display: flex;
    gap: clamp(14px, 1.8vw, 24px);
    min-height: calc(var(--card-h) + 42px);
    padding: clamp(12px, 2vw, 22px) clamp(34px, 6vw, 96px) clamp(18px, 2.5vw, 30px);
    overflow-x: auto;
    overflow-y: visible;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-padding-inline: clamp(34px, 6vw, 96px);
    perspective: 1200px;
}

.project-lane__strip::-webkit-scrollbar {
    height: 8px;
}

.project-lane__strip::-webkit-scrollbar-track {
    background: #f3ede30b;
}

.project-lane__strip::-webkit-scrollbar-thumb {
    background: #b917297d;
}

.project-lane__arrow {
    position: absolute;
    z-index: 3;
    top: 50%;
    translate: 0 -50%;
    width: clamp(38px, 4vw, 58px);
    aspect-ratio: 1;
    border: 1px solid #f3ede333;
    border-radius: 999px;
    color: var(--ink);
    background: #0a0a0a8c;
    backdrop-filter: blur(16px);
    font-family: var(--f-body);
    font-size: clamp(26px, 3vw, 42px);
    line-height: .8;
    cursor: pointer;
    opacity: .42;
    transition: opacity .25s ease, border-color .25s ease, transform .25s ease;
}

.project-lane__arrow:hover {
    opacity: 1;
    border-color: #b91729b8;
    transform: scale(1.05);
}

.project-lane__arrow--prev {
    left: clamp(6px, 1.2vw, 20px);
}

.project-lane__arrow--next {
    right: clamp(6px, 1.2vw, 20px);
}

.project-card,
.project-card:nth-child(n) {
    flex: 0 0 var(--card-w);
    min-height: var(--card-h);
    scroll-snap-align: center;
    transform: rotateY(var(--turn, 0deg)) translateY(calc(var(--lift, 0px) + var(--sway, 0px)));
    opacity: .72;
    filter: saturate(.72) brightness(.76);
    border-radius: 0;
    box-shadow: 0 18px 54px #0008;
}

.project-card.is-active {
    --lift: -8px;
    opacity: 1;
    filter: saturate(1.08) brightness(1.02);
    border-color: #b91729c2;
    box-shadow: 0 26px 80px #000b, 0 0 34px #b917293d;
}

.project-card__media {
    height: clamp(150px, 21vh, 220px);
}

.project-card__body {
    padding: clamp(15px, 1.7vw, 22px);
}

.project-card h2 {
    margin: 14px 0 7px;
    font-size: clamp(29px, 3.2vw, 52px);
}

.project-card h3 {
    font-size: clamp(14px, 1.05vw, 18px);
}

.project-card p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    font-size: 13px;
}

.project-tags {
    margin-top: 16px;
}

.project-tags span,
.skill-pill {
    font-size: 9px;
}

.project-card__cta {
    margin-top: 18px;
}

.no-results {
    display: block;
    margin-top: 28px;
}

@media (max-width: 900px) {
    .archive-controls {
        position: static;
    }

    .project-lane__head {
        grid-template-columns: 1fr auto;
    }

    .project-lane__head span {
        grid-column: 1 / -1;
    }

    .project-lane__strip {
        min-height: auto;
    }

    .project-card,
    .project-card:nth-child(n) {
        flex-basis: min(78vw, 360px);
        min-height: auto;
    }
}

@media (max-width: 620px) {
    .archive-controls {
        padding: 16px;
    }

    .filter-row {
        justify-content: flex-start;
    }

    .project-lane__arrow {
        display: none;
    }

    .project-lane__strip {
        padding-inline: 16px;
        scroll-padding-inline: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .project-lane__strip {
        scroll-snap-type: none;
    }
}

/* Archive v14: calm organized project grid with progressive reveal. */
.project-collage {
    --card-w: initial;
    --card-h: initial;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: clamp(14px, 2vw, 26px);
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: visible;
    perspective: none;
    border: 0;
    background:
        linear-gradient(90deg, #b9172918 0 1px, transparent 1px 100%) 0 0 / 25% 100%,
        radial-gradient(circle at 12% 8%, #b9172924, transparent 34%),
        transparent;
}

.project-collage:before,
.project-lane,
.project-lane__head,
.project-lane__viewport,
.project-lane__strip,
.project-lane__arrow {
    content: none;
}

.project-card,
.project-card:nth-child(n) {
    grid-column: span 4;
    flex: initial;
    min-height: 0;
    display: flex;
    flex-direction: column;
    opacity: 1;
    filter: none;
    transform: translateY(0);
    scroll-snap-align: none;
    border-radius: 0;
    box-shadow: 0 18px 54px #0007;
    transition: transform .35s var(--ease-out-expo), border-color .3s ease, box-shadow .3s ease;
}

.project-card[hidden],
.project-card.is-hidden {
    display: none !important;
}

.project-card.is-featured {
    grid-column: span 6;
}

.project-card:hover {
    transform: translateY(-8px);
    border-color: #b91729ad;
    box-shadow: 0 28px 86px #000b, 0 0 30px #b917292e;
}

.project-card__media {
    height: clamp(170px, 23vw, 260px);
}

.project-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: clamp(18px, 2vw, 26px);
}

.project-card h2 {
    margin: 14px 0 8px;
    font-size: clamp(34px, 4vw, 70px);
}

.project-card h3 {
    font-size: clamp(15px, 1.25vw, 21px);
    line-height: 1.16;
}

.project-card p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    font-size: 14px;
    line-height: 1.44;
}

.project-card__cta {
    margin-top: auto;
    padding-top: 18px;
}

.load-more-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    justify-content: center;
    margin-top: clamp(28px, 5vw, 64px);
}

.project-count {
    color: rgba(244, 239, 229, .5);
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: .18em;
    margin: 0;
    text-align: center;
    text-transform: uppercase;
}

.load-more-btn {
    color: #0a0a0a;
    cursor: pointer;
    background: var(--highlight);
    border: 1px solid var(--highlight);
    border-radius: 999px;
    min-width: min(100%, 280px);
    padding: 16px 24px;
    font-family: var(--f-mono);
    letter-spacing: .16em;
    text-transform: uppercase;
    font-size: 11px;
    transition: transform .25s ease, box-shadow .25s ease;
}

.load-more-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 28px #b9172954;
}

.load-more-btn[hidden] {
    display: none;
}

.media-slots {
    scroll-behavior: auto;
    scroll-snap-type: none;
}

.media-slots:hover {
    scroll-behavior: smooth;
}

.media-slot[data-gallery-clone="true"] {
    pointer-events: none;
}

@media (max-width: 1100px) {
    .project-card,
    .project-card:nth-child(n),
    .project-card.is-featured {
        grid-column: span 6;
    }
}

@media (max-width: 720px) {
    .project-collage {
        grid-template-columns: 1fr;
    }

    .project-card,
    .project-card:nth-child(n),
    .project-card.is-featured {
        grid-column: 1 / -1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .project-card:hover {
        transform: none;
    }
}

/* Drawer guardrails: prevent a closed or interrupted drawer from blocking projects. */
.projects-page .archive-menu-btn {
    position: relative;
    z-index: 10002;
    pointer-events: auto;
}

.projects-page .drawer:not([data-open="true"]),
.projects-page .drawer[aria-hidden="true"] {
    pointer-events: none !important;
}

.projects-page .drawer:not([data-open="true"]) .drawer-content,
.projects-page .drawer[aria-hidden="true"] .drawer-content,
.projects-page .drawer:not([data-open="true"]) .drawer-mask,
.projects-page .drawer[aria-hidden="true"] .drawer-mask,
.projects-page .drawer:not([data-open="true"]) .drawer-close,
.projects-page .drawer[aria-hidden="true"] .drawer-close {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.projects-page .drawer[data-open="true"] .drawer-content,
.projects-page .drawer[data-open="true"] .drawer-mask,
.projects-page .drawer[data-open="true"] .drawer-close {
    visibility: visible;
}

.projects-page .drawer-scrim[hidden],
.projects-page .drawer-scrim:not([data-open="true"]) {
    opacity: 0 !important;
    pointer-events: none !important;
}

.projects-page .drawer[data-open="true"] {
    pointer-events: auto !important;
}

.projects-page .drawer-scrim[data-open="true"] {
    pointer-events: auto !important;
}

/* Archive v20: orbital case-file project field. */
.projects-page {
    background:
        radial-gradient(circle at 72% 12%, #b917292d 0, transparent 24vw),
        radial-gradient(circle at 18% 28%, #5a07113d 0, transparent 30vw),
        linear-gradient(180deg, #070707 0%, #0d0607 45%, #050505 100%);
}

.projects-shell {
    max-width: 1920px;
    margin-inline: auto;
    padding: clamp(22px, 3vw, 42px) clamp(22px, 3.6vw, 70px) clamp(72px, 8vw, 130px);
}

.archive-nav--minimal {
    border-bottom: 1px dashed #b9172940;
    padding-bottom: clamp(18px, 2.2vw, 30px);
}

.archive-hero {
    grid-template-columns: minmax(0, .9fr) minmax(280px, .58fr);
    align-items: end;
    min-height: 0;
    padding-block: clamp(34px, 5vw, 76px) clamp(20px, 3.5vw, 48px);
}

.archive-title {
    max-width: 10ch;
    font-size: clamp(58px, 8.2vw, 132px);
    letter-spacing: 0;
}

.archive-deck {
    max-width: 580px;
    border-left: 1px solid #b917296b;
    color: rgba(244, 239, 229, .66);
    font-size: clamp(17px, 1.45vw, 24px);
}

.mission-console {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, .62fr);
    gap: clamp(20px, 3vw, 46px);
    align-items: stretch;
    margin-bottom: clamp(26px, 5vw, 72px);
}

.orbit-panel,
.dossier-preview {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(90deg, #b9172914 0 1px, transparent 1px 100%) 0 0 / 16.666% 100%,
        radial-gradient(circle at 50% 50%, #b9172928, transparent 42%),
        linear-gradient(145deg, #130306f0, #050505 68%);
    border: 1px solid #f3ede326;
    box-shadow: 0 28px 90px #0009;
}

.orbit-panel:before,
.dossier-preview:before,
.project-card:before {
    content: "";
    pointer-events: none;
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(90deg, rgba(244, 239, 229, .025) 0 1px, transparent 1px 4px),
        linear-gradient(180deg, rgba(244, 239, 229, .04), transparent 28%);
    mix-blend-mode: screen;
    opacity: .55;
}

.orbit-panel__head {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 18px clamp(18px, 2.2vw, 30px);
    color: rgba(244, 239, 229, .48);
    border-bottom: 1px dashed #f3ede324;
    font-family: var(--f-mono);
    font-size: 10px;
    letter-spacing: .22em;
    text-transform: uppercase;
}

.orbit-panel__head span:first-child {
    color: var(--highlight);
}

.orbit-field {
    --orbit-size: min(66vw, 720px);
    position: relative;
    min-height: clamp(460px, 56vw, 680px);
    display: grid;
    place-items: center;
    isolation: isolate;
}

.orbit-field:before,
.orbit-field:after {
    content: "";
    position: absolute;
    inset: 10%;
    border-radius: 50%;
    border: 1px solid #b9172933;
    transform: rotateX(64deg) rotateZ(-16deg);
}

.orbit-field:after {
    inset: 22%;
    border-color: #f3ede31d;
    transform: rotateX(64deg) rotateZ(22deg);
}

.orbit-ring {
    position: absolute;
    width: calc(var(--orbit-size) * .72);
    aspect-ratio: 1;
    border: 1px solid #b9172952;
    border-radius: 50%;
    transform: rotateX(66deg) rotateZ(var(--rz, 0deg));
    box-shadow: 0 0 28px #b917291c;
}

.orbit-ring--one {
    --rz: -22deg;
    animation: orbitDrift 18s linear infinite;
}

.orbit-ring--two {
    width: calc(var(--orbit-size) * .52);
    --rz: 36deg;
    border-color: #f3ede326;
    animation: orbitDrift 24s linear reverse infinite;
}

.orbit-ring--three {
    width: calc(var(--orbit-size) * .86);
    --rz: 12deg;
    border-style: dashed;
    border-color: #b9172936;
    animation: orbitPulse 6s ease-in-out infinite;
}

.orbit-core {
    position: relative;
    z-index: 2;
    width: clamp(118px, 13vw, 174px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    color: var(--ink);
    border: 1px solid #f3ede342;
    border-radius: 50%;
    background:
        radial-gradient(circle, #f3ede326 0 2px, transparent 3px),
        radial-gradient(circle at 50% 50%, #b9172959, #070707 68%);
    box-shadow: 0 0 46px #b9172945, inset 0 0 34px #000;
    font-family: var(--f-mono);
    letter-spacing: .2em;
    font-size: 12px;
    text-transform: uppercase;
}

.orbit-core i {
    position: absolute;
    width: 62%;
    height: 1px;
    background: #f3ede366;
    transform: rotate(-34deg);
}

.orbit-node {
    position: absolute;
    z-index: 4;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    width: clamp(128px, 13vw, 178px);
    min-height: 54px;
    display: grid;
    align-content: center;
    gap: 4px;
    padding: 11px 13px;
    color: var(--ink);
    text-decoration: none;
    background: linear-gradient(145deg, #1b070a, #080808);
    border: 1px solid #f3ede330;
    box-shadow: 0 14px 38px #0009;
    transform: rotate(var(--a)) translateX(clamp(160px, 25vw, 310px)) rotate(calc(var(--a) * -1));
    transition: border-color .25s ease, background .25s ease, box-shadow .25s ease, scale .25s ease;
}

.orbit-node:before {
    content: "";
    position: absolute;
    left: -7px;
    top: 50%;
    translate: 0 -50%;
    width: 10px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--highlight);
    box-shadow: 0 0 18px var(--highlight);
}

.orbit-node span {
    font-family: var(--f-mono);
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.orbit-node small {
    color: var(--highlight);
    font-family: var(--f-mono);
    font-size: 9px;
    letter-spacing: .16em;
}

.orbit-node:hover,
.orbit-node:focus-visible,
.orbit-node.is-selected {
    border-color: #b91729d6;
    background: linear-gradient(145deg, #b9172938, #0a0a0a);
    box-shadow: 0 18px 50px #000b, 0 0 28px #b917294f;
    scale: 1.04;
}

.orbit-node--one { --a: -102deg; }
.orbit-node--two { --a: -36deg; }
.orbit-node--three { --a: 22deg; }
.orbit-node--four { --a: 84deg; }
.orbit-node--five { --a: 150deg; }
.orbit-node--six { --a: 218deg; }

.dossier-preview {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    transform: rotate(.35deg);
}

.dossier-preview__tab {
    width: max-content;
    min-width: 170px;
    padding: 12px 18px 10px;
    color: #0a0a0a;
    background: var(--highlight);
    font-family: var(--f-mono);
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.dossier-preview__media {
    position: relative;
    height: clamp(180px, 21vw, 270px);
    margin: clamp(18px, 2vw, 28px) clamp(18px, 2vw, 28px) 0;
    border: 1px solid #f3ede32b;
    overflow: hidden;
}

.dossier-preview__media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    filter: saturate(.82) contrast(1.08) brightness(.86);
}

.dossier-preview__media:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 36%, #080808e8);
}

.dossier-preview__body {
    position: relative;
    z-index: 2;
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: clamp(20px, 2.4vw, 34px);
}

.dossier-preview__meta,
.project-card__meta {
    color: var(--highlight);
    font-family: var(--f-mono);
    font-size: 10px;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.dossier-preview h2 {
    margin: 16px 0 8px;
    color: var(--ink);
    font-family: var(--f-display);
    font-size: clamp(42px, 4.4vw, 72px);
    line-height: .86;
    text-transform: uppercase;
}

.dossier-preview h3 {
    margin: 0 0 14px;
    color: rgba(244, 239, 229, .86);
    font-size: clamp(15px, 1.2vw, 20px);
    line-height: 1.18;
}

.dossier-preview p {
    color: rgba(244, 239, 229, .58);
    font-size: 14px;
    line-height: 1.48;
}

.dossier-preview__sections {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: auto;
}

.dossier-preview__sections span {
    border: 1px solid #f3ede326;
    padding: 9px 10px;
    color: rgba(244, 239, 229, .54);
    font-family: var(--f-mono);
    font-size: 9px;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.dossier-preview__link {
    display: inline-flex;
    align-self: flex-start;
    margin-top: 18px;
    color: var(--highlight);
    font-family: var(--f-mono);
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    text-decoration: none;
}

.archive-controls {
    position: static;
    margin-bottom: clamp(28px, 5vw, 62px);
    background:
        linear-gradient(90deg, #0a0a0af7, #1a0308d8),
        repeating-linear-gradient(90deg, #f3ede30a 0 1px, transparent 1px 80px);
}

.project-collage {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 28px);
    background:
        linear-gradient(90deg, #b9172914 0 1px, transparent 1px 100%) 0 0 / 25% 100%,
        radial-gradient(circle at 70% 10%, #b9172924, transparent 32%),
        transparent;
}

.project-card,
.project-card:nth-child(n) {
    position: relative;
    grid-column: span 4;
    min-height: clamp(410px, 45vw, 530px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: var(--text);
    text-decoration: none;
    background:
        linear-gradient(180deg, #171717, #080808 74%),
        #0a0a0a;
    border: 1px solid #f3ede32b;
    border-top: 6px solid #2d2d2d;
    box-shadow: 0 24px 70px #0008;
    transform: translateY(0) rotate(var(--file-tilt, 0deg));
    opacity: 1;
    filter: none;
    transition: transform .32s var(--ease-out-expo), border-color .28s ease, box-shadow .28s ease;
}

.project-card:nth-of-type(3n + 1) { --file-tilt: -.35deg; }
.project-card:nth-of-type(3n + 2) { --file-tilt: .28deg; }
.project-card:nth-of-type(3n + 3) { --file-tilt: -.12deg; }

.project-card:after {
    content: "";
    position: absolute;
    top: -1px;
    right: clamp(16px, 2vw, 28px);
    width: clamp(72px, 7vw, 112px);
    height: 28px;
    background: var(--highlight);
    clip-path: polygon(0 0, 86% 0, 100% 100%, 0 100%);
    box-shadow: 0 0 20px #b917293d;
}

.project-card[hidden],
.project-card.is-hidden {
    display: none !important;
}

.project-card.is-featured {
    grid-column: span 6;
}

.project-card:hover,
.project-card:focus-visible,
.project-card.is-selected {
    transform: translateY(-8px) rotate(0deg);
    border-color: #b91729ad;
    box-shadow: 0 30px 90px #000b, 0 0 32px #b9172936;
}

.project-card__media {
    height: clamp(128px, 14vw, 190px);
    margin: clamp(18px, 2vw, 28px) clamp(18px, 2vw, 28px) 0;
    border: 1px solid #f3ede324;
    background: #050505;
}

.project-card__media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    opacity: .76;
    filter: saturate(.78) contrast(1.12) brightness(.84);
    transform: scale(1.03);
}

.project-card__body {
    position: relative;
    z-index: 2;
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: clamp(18px, 2vw, 28px);
}

.project-card h2 {
    margin: 14px 0 7px;
    color: var(--ink);
    font-family: var(--f-display);
    font-size: clamp(34px, 3.9vw, 68px);
    line-height: .86;
    text-transform: uppercase;
}

.project-card h3 {
    margin: 0 0 12px;
    color: rgba(244, 239, 229, .82);
    font-size: clamp(14px, 1.12vw, 19px);
    line-height: 1.16;
}

.project-card p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    color: rgba(244, 239, 229, .55);
    font-size: 13px;
    line-height: 1.45;
}

.project-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 16px;
}

.project-tags span {
    border-color: #f3ede329;
    background: #f3ede308;
}

.project-card__cta {
    margin-top: auto;
    padding-top: 18px;
    color: var(--highlight);
}

.project-count {
    color: rgba(244, 239, 229, .52);
}

.load-more-btn {
    border-radius: 999px;
    box-shadow: 0 0 28px #b9172930;
}

@keyframes orbitDrift {
    from { rotate: 0deg; }
    to { rotate: 360deg; }
}

@keyframes orbitPulse {
    0%, 100% { opacity: .34; scale: 1; }
    50% { opacity: .72; scale: 1.035; }
}

@media (max-width: 1180px) {
    .mission-console {
        grid-template-columns: 1fr;
    }

    .dossier-preview {
        transform: none;
    }

    .project-card,
    .project-card:nth-child(n),
    .project-card.is-featured {
        grid-column: span 6;
    }
}

@media (max-width: 760px) {
    .archive-hero,
    .archive-controls {
        grid-template-columns: 1fr;
    }

    .archive-title {
        font-size: clamp(54px, 18vw, 96px);
    }

    .archive-deck {
        padding-left: 18px;
    }

    .orbit-field {
        --orbit-size: 620px;
        min-height: 520px;
        overflow: hidden;
    }

    .orbit-node {
        width: 132px;
        transform: rotate(var(--a)) translateX(205px) rotate(calc(var(--a) * -1));
    }

    .filter-row {
        justify-content: flex-start;
    }

    .project-collage {
        grid-template-columns: 1fr;
    }

    .project-card,
    .project-card:nth-child(n),
    .project-card.is-featured {
        grid-column: 1 / -1;
        min-height: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .orbit-ring {
        animation: none !important;
    }

    .orbit-node,
    .project-card {
        transition: none !important;
    }
}

/* Archive v22: pure case-file wall, matching the dossier reference direction. */
.projects-page {
    background:
        radial-gradient(circle at 50% -10%, #8f1c2420, transparent 34vw),
        linear-gradient(180deg, #070808 0%, #0b0c0c 48%, #050505 100%);
}

.projects-shell {
    max-width: 1480px;
}

.archive-hero {
    grid-template-columns: minmax(0, .74fr) minmax(260px, .46fr);
    padding-block: clamp(28px, 4vw, 58px) clamp(18px, 3vw, 34px);
}

.archive-title {
    font-size: clamp(50px, 6.8vw, 104px);
}

.archive-deck {
    font-size: clamp(15px, 1.18vw, 20px);
}

.archive-controls {
    margin-bottom: clamp(22px, 3vw, 42px);
    padding: 16px clamp(16px, 2vw, 28px);
}

.mission-console,
.orbit-panel,
.orbit-field {
    display: none !important;
}

.case-wall-title {
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 0 0 18px;
    color: var(--highlight);
    font-family: var(--f-mono);
    font-size: 12px;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.case-wall-title i {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, #8f2b2c, transparent);
}

.project-collage {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(20px, 2.2vw, 34px);
    padding: 0;
    background: none;
    perspective: 1400px;
}

.project-card,
.project-card:nth-child(n),
.project-card.is-featured {
    --folder-edge: #b7aa92;
    grid-column: auto;
    min-height: 0;
    aspect-ratio: 1.48 / 1;
    padding: clamp(16px, 1.5vw, 24px);
    border: 1px solid #343633;
    border-radius: 9px 9px 3px 3px;
    color: var(--ink);
    background:
        linear-gradient(90deg, transparent calc(100% - 34px), #f0e3c514 calc(100% - 34px), transparent calc(100% - 32px)),
        radial-gradient(circle at 83% 14%, #f3ede310 0 22px, transparent 24px),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 5px),
        linear-gradient(180deg, #181918 0%, #0a0b0b 76%);
    box-shadow:
        7px -7px 0 -2px #d2c3a8,
        13px -12px 0 -5px #82796a,
        20px -17px 0 -10px #d8d0bc,
        23px -19px 0 -12px #59554e,
        0 22px 44px #000b;
    transform: none;
    overflow: visible;
    isolation: isolate;
}

.project-card[hidden],
.project-card.is-hidden {
    display: none !important;
}

.project-card:before {
    content: "V.01 // V.M.";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background:
        repeating-linear-gradient(90deg, rgba(244, 239, 229, .025) 0 1px, transparent 1px 5px),
        radial-gradient(circle at 82% 18%, transparent 0 26px, rgba(244, 239, 229, .06) 27px 28px, transparent 29px),
        linear-gradient(180deg, rgba(244, 239, 229, .035), transparent 38%);
    color: rgba(244, 239, 229, .24);
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-family: var(--f-mono);
    font-size: 10px;
    letter-spacing: .18em;
    padding: 54px 14px 16px;
    text-align: right;
    box-sizing: border-box;
    z-index: 1;
}

.project-card:after {
    content: attr(data-file-no);
    position: absolute;
    top: -14px;
    left: 16px;
    right: auto;
    width: 92px;
    height: 36px;
    display: grid;
    place-items: center;
    clip-path: polygon(0 0, 82% 0, 100% 100%, 0 100%);
    color: rgba(244, 239, 229, .58);
    background: linear-gradient(180deg, #8f3930, #5b1817);
    border: 1px solid #b36a56;
    box-shadow: 0 4px 12px #0007;
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: .14em;
    z-index: 4;
}

.project-card:hover,
.project-card:focus-visible,
.project-card.is-selected {
    transform: translateY(-7px) rotateX(1.5deg);
    border-color: #8f3930;
    box-shadow:
        7px -7px 0 -2px #d2c3a8,
        13px -12px 0 -5px #82796a,
        20px -17px 0 -10px #d8d0bc,
        23px -19px 0 -12px #59554e,
        0 30px 68px #000e,
        0 0 24px #8f1c2440;
}

.project-card__media {
    position: relative;
    order: 2;
    height: auto;
    aspect-ratio: 3.9 / 1.1;
    margin: 15px 28px 0 0;
    border: 1px solid #252826;
    background: #050505;
    overflow: hidden;
    z-index: 2;
}

.project-card__media img {
    opacity: .82;
    filter: grayscale(.15) saturate(.62) contrast(1.2) brightness(.78);
    transform: scale(1.03);
}

.project-card__media:after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #0007, transparent 28%, #0007);
}

.project-card__body {
    position: relative;
    padding: 0;
    display: flex;
    flex-direction: column;
    z-index: 2;
}

.project-card__meta {
    order: 1;
    color: #a34438;
    font-size: 10px;
    letter-spacing: .14em;
    margin-top: 2px;
    font-weight: 700;
}

.project-card h2 {
    order: 0;
    margin: clamp(24px, 2.45vw, 36px) 46px 4px 0;
    color: #eee8dc;
    font-size: clamp(22px, 2vw, 34px);
    line-height: .94;
    letter-spacing: .04em;
    text-shadow: 0 2px 8px #000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.project-card h3,
.project-card p,
.project-tags {
    display: none;
}

.project-card__body:after {
    content: "YEAR  " attr(data-year) "        STATUS  " attr(data-status);
    order: 3;
    display: block;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #262826;
    color: rgba(244, 239, 229, .45);
    font-family: var(--f-mono);
    font-size: 10px;
    letter-spacing: .1em;
    white-space: pre;
}

.project-card__cta {
    order: 4;
    margin-top: auto;
    padding-top: 12px;
    color: #a34438;
    font-size: 10px;
    letter-spacing: .16em;
    position: relative;
}

.project-card__cta:after {
    content: "  ->";
    float: right;
}

.project-card__cta:before {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: 6px;
    height: 1px;
    background: #a34438;
    transition: right .35s ease;
}

.project-card:hover .project-card__cta:before,
.project-card:focus-visible .project-card__cta:before {
    right: 26px;
}

.load-more-wrap {
    margin-top: clamp(22px, 3vw, 44px);
}

.selected-case {
    margin-top: clamp(46px, 7vw, 96px);
    display: flex;
    justify-content: center;
}

.selected-case__folder {
    position: relative;
    width: min(100%, 980px);
    color: var(--ink);
    border: 1px solid #3a3a36;
    border-radius: 10px;
    background:
        linear-gradient(90deg, transparent calc(100% - 48px), #f0e3c514 calc(100% - 48px), transparent calc(100% - 46px)),
        radial-gradient(circle at 87% 9%, #f3ede30d 0 46px, transparent 48px),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 5px),
        linear-gradient(180deg, #151616 0%, #090a0a 52%, #111211 52%, #070707 100%);
    box-shadow:
        10px -10px 0 -2px #d2c3a8,
        16px -16px 0 -6px #7b7468,
        22px -22px 0 -10px #d8d0bc,
        25px -25px 0 -15px #59554e,
        0 36px 90px #000d;
    overflow: visible;
}

.selected-case__folder:before {
    content: "V.01 // V.M.";
    position: absolute;
    right: 18px;
    top: 170px;
    color: rgba(244, 239, 229, .34);
    writing-mode: vertical-rl;
    font-family: var(--f-mono);
    letter-spacing: .2em;
    font-size: 12px;
}

.selected-case__tab {
    position: absolute;
    top: -16px;
    left: 40px;
    min-width: 230px;
    padding: 13px 20px 10px;
    color: rgba(244, 239, 229, .72);
    background: linear-gradient(180deg, #8f3930, #5b1817);
    border: 1px solid #b36a56;
    clip-path: polygon(0 0, 88% 0, 100% 100%, 0 100%);
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.selected-case__clip {
    position: absolute;
    right: 70px;
    top: -22px;
    width: 28px;
    height: 70px;
    border: 5px solid #9b3e35;
    border-radius: 18px;
    opacity: .78;
}

.selected-case__top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(210px, 280px);
    gap: clamp(24px, 4vw, 54px);
    padding: clamp(38px, 4vw, 58px) clamp(26px, 4vw, 58px) clamp(24px, 3vw, 42px);
}

.selected-case__eyebrow,
.selected-case__summary strong,
.selected-case__columns strong,
.selected-case__facts dt {
    color: #a34438;
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.selected-case h2 {
    margin: 14px 0 4px;
    color: #eee8dc;
    font-family: var(--f-display);
    font-size: clamp(42px, 5vw, 72px);
    line-height: .9;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.selected-case h3 {
    margin: 0 0 22px;
    color: #a34438;
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.selected-case__media {
    aspect-ratio: 2.6 / 1;
    border: 1px solid #282a28;
    overflow: hidden;
    background: #050505;
}

.selected-case__media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    filter: grayscale(.12) saturate(.68) contrast(1.16) brightness(.78);
}

.selected-case__summary {
    margin-top: 24px;
}

.selected-case p,
.selected-case li,
.selected-case__facts dd {
    color: rgba(244, 239, 229, .55);
    font-size: 14px;
    line-height: 1.55;
}

.selected-case__facts {
    margin: 62px 0 0;
    display: grid;
    gap: 18px;
}

.selected-case__facts div {
    border-bottom: 1px solid #282a28;
    padding-bottom: 12px;
}

.selected-case__facts dd {
    margin: 6px 0 0;
    font-family: var(--f-mono);
    text-transform: uppercase;
}

.selected-case__bottom {
    border-top: 1px solid #282a28;
    padding: clamp(28px, 4vw, 48px) clamp(26px, 4vw, 58px) clamp(34px, 4vw, 54px);
    background: #060606;
}

.selected-case__tabs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    border-bottom: 1px solid #282a28;
    margin-bottom: 28px;
}

.selected-case__tabs span {
    padding-bottom: 12px;
    color: rgba(244, 239, 229, .45);
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.selected-case__tabs span:first-child {
    color: #a34438;
    border-bottom: 2px solid #a34438;
}

.selected-case__columns {
    display: grid;
    grid-template-columns: 1fr 1.05fr 1fr;
    gap: clamp(18px, 3vw, 44px);
}

.selected-case__columns > div + div {
    border-left: 1px solid #282a28;
    padding-left: clamp(18px, 3vw, 38px);
}

.selected-case__columns ul {
    margin: 12px 0 0;
    padding-left: 18px;
}

.selected-case__columns li::marker {
    color: #a34438;
}

.selected-case__link {
    display: flex;
    justify-content: center;
    max-width: 420px;
    margin: 34px auto 0;
    border: 1px solid #8f3930;
    padding: 16px 20px;
    color: #a34438;
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    text-decoration: none;
}

.selected-case__link:after {
    content: " ->";
    margin-left: 18px;
}

@media (max-width: 980px) {
    .project-collage {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .selected-case__top,
    .selected-case__columns {
        grid-template-columns: 1fr;
    }

    .selected-case__facts {
        margin-top: 0;
    }

    .selected-case__columns > div + div {
        border-left: 0;
        border-top: 1px solid #282a28;
        padding-left: 0;
        padding-top: 18px;
    }
}

@media (max-width: 640px) {
    .project-collage {
        grid-template-columns: 1fr;
    }

    .project-card,
    .project-card:nth-child(n),
    .project-card.is-featured {
        aspect-ratio: auto;
        min-height: 310px;
    }

    .selected-case__tabs {
        grid-template-columns: 1fr 1fr;
    }
}

/* Archive v23: opened dossier modal and living project-field motion. */
.projects-page:before,
.projects-page:after {
    content: "";
    position: fixed;
    inset: auto auto -24vh -10vw;
    width: 54vw;
    height: 54vw;
    pointer-events: none;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(170, 47, 48, .18), rgba(170, 47, 48, .04) 34%, transparent 68%);
    filter: blur(18px);
    opacity: .75;
    animation: projectAura 18s ease-in-out infinite alternate;
    z-index: 0;
}

.projects-page:after {
    inset: 18vh -16vw auto auto;
    width: 42vw;
    height: 42vw;
    opacity: .5;
    animation-duration: 23s;
    animation-direction: alternate-reverse;
}

.projects-shell {
    position: relative;
    z-index: 1;
}

@keyframes projectAura {
    0% {
        transform: translate3d(-4vw, 3vh, 0) scale(.9);
    }
    100% {
        transform: translate3d(8vw, -5vh, 0) scale(1.14);
    }
}

.archive-controls {
    border-color: rgba(155, 62, 53, .24);
    background:
        linear-gradient(120deg, rgba(143, 28, 36, .14), transparent 38%, rgba(143, 28, 36, .08)),
        rgba(5, 5, 5, .62);
    box-shadow: inset 0 0 34px rgba(143, 28, 36, .08);
}

.filter-row {
    gap: 10px;
}

.filter-btn {
    position: relative;
    overflow: hidden;
    border-radius: 999px;
    border-color: rgba(163, 68, 56, .44);
    background: rgba(8, 8, 8, .52);
}

.filter-btn:before {
    content: "";
    position: absolute;
    inset: -70% -30%;
    background: radial-gradient(circle, rgba(197, 65, 57, .26), transparent 54%);
    opacity: 0;
    transform: translateX(-35%);
    transition: opacity .25s ease, transform .45s ease;
}

.filter-btn:hover:before,
.filter-btn.is-active:before {
    opacity: 1;
    transform: translateX(0);
}

.project-collage {
    gap: clamp(28px, 3vw, 44px);
}

.project-card,
.project-card:nth-child(n),
.project-card.is-featured {
    min-height: clamp(310px, 25vw, 390px);
    aspect-ratio: auto;
    border-radius: 13px 13px 5px 5px;
    transition: transform .36s cubic-bezier(.2, .8, .2, 1), border-color .28s ease, box-shadow .28s ease, filter .28s ease;
}

.project-card:before {
    border-radius: inherit;
}

.project-card:after {
    border-radius: 5px 0 0 0;
}

.project-card__media {
    aspect-ratio: 2.9 / 1;
    margin-top: 18px;
}

.project-card__media img {
    transition: transform .45s ease, filter .45s ease, opacity .45s ease;
}

.project-card:hover .project-card__media img,
.project-card:focus-visible .project-card__media img,
.project-card.is-selected .project-card__media img {
    opacity: .96;
    filter: grayscale(.05) saturate(.82) contrast(1.22) brightness(.88);
    transform: scale(1.1);
}

.project-card h2 {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.project-card:hover h2,
.project-card:focus-visible h2,
.project-card.is-selected h2 {
    text-shadow: 0 0 16px rgba(163, 68, 56, .32), 0 2px 8px #000;
}

.project-card:hover,
.project-card:focus-visible,
.project-card.is-selected {
    transform: translateY(-9px) rotateX(1.2deg) rotateZ(-.25deg);
}

body.case-modal-open {
    overflow: hidden;
}

.selected-case--modal {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: grid;
    place-items: center;
    margin: 0;
    padding: clamp(20px, 4vw, 52px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .26s ease;
}

.selected-case--modal[hidden] {
    display: none;
}

.selected-case--modal.is-open {
    opacity: 1;
    pointer-events: auto;
}

.selected-case__scrim {
    position: absolute;
    inset: 0;
    border: 0;
    background:
        radial-gradient(circle at 50% 22%, rgba(143, 28, 36, .2), transparent 38%),
        rgba(0, 0, 0, .78);
    backdrop-filter: blur(12px);
    cursor: pointer;
}

.selected-case--modal .selected-case__folder {
    max-height: min(88vh, 980px);
    overflow: auto;
    transform: translateY(28px) scale(.965) rotateX(3deg);
    opacity: 0;
    transition: transform .34s cubic-bezier(.2, .8, .2, 1), opacity .3s ease;
}

.selected-case--modal.is-open .selected-case__folder {
    transform: translateY(0) scale(1) rotateX(0deg);
    opacity: 1;
}

.selected-case__close {
    position: absolute;
    top: -22px;
    right: -22px;
    z-index: 5;
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(244, 239, 229, .28);
    color: var(--ink);
    background: rgba(8, 8, 8, .84);
    cursor: pointer;
}

.selected-case__close:hover,
.selected-case__close:focus-visible {
    border-color: rgba(163, 68, 56, .8);
    color: #fff;
}

.selected-case__tabs button {
    appearance: none;
    border: 0;
    border-bottom: 2px solid transparent;
    padding: 0 0 12px;
    color: rgba(244, 239, 229, .45);
    background: transparent;
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: .14em;
    text-align: left;
    text-transform: uppercase;
    cursor: pointer;
}

.selected-case__tabs button.is-active,
.selected-case__tabs button:hover,
.selected-case__tabs button:focus-visible {
    color: #a34438;
    border-bottom-color: #a34438;
}

.selected-case__tabs span {
    display: none;
}

.selected-case__link {
    cursor: pointer;
    background: transparent;
}

@media (max-width: 980px) {
    .project-card,
    .project-card:nth-child(n),
    .project-card.is-featured {
        min-height: 330px;
    }
}

@media (max-width: 640px) {
    .selected-case--modal {
        padding: 18px 12px;
    }

    .selected-case--modal .selected-case__folder {
        max-height: 90vh;
    }

    .selected-case__close {
        top: 10px;
        right: 10px;
        width: 48px;
        height: 48px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .projects-page:before,
    .projects-page:after {
        animation: none;
    }

    .selected-case--modal,
    .selected-case--modal .selected-case__folder,
    .project-card,
    .project-card__media img,
    .filter-btn:before {
        transition: none !important;
    }
}

/* Archive v24: full-screen evidence dossier modal. */
.selected-case--modal {
    align-items: stretch;
    justify-items: center;
    padding: clamp(16px, 2.8vw, 42px);
}

.selected-case__scrim {
    background:
        linear-gradient(90deg, rgba(0, 0, 0, .86), rgba(17, 3, 5, .72), rgba(0, 0, 0, .88)),
        radial-gradient(circle at 22% 30%, rgba(163, 68, 56, .24), transparent 34%),
        rgba(0, 0, 0, .82);
}

.selected-case--modal .selected-case__folder {
    width: min(100%, 1540px);
    height: min(100%, 980px);
    max-height: calc(100svh - clamp(32px, 5.6vw, 84px));
    display: flex;
    flex-direction: column;
    border-radius: 14px 14px 6px 6px;
    background:
        linear-gradient(90deg, transparent calc(100% - 58px), rgba(240, 227, 197, .08) calc(100% - 58px), transparent calc(100% - 55px)),
        radial-gradient(circle at 88% 10%, rgba(244, 239, 229, .06) 0 54px, transparent 56px),
        linear-gradient(90deg, rgba(163, 68, 56, .1) 0 1px, transparent 1px 100%) 0 0 / 12.5% 100%,
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 5px),
        linear-gradient(180deg, #151716 0%, #080909 61%, #050505 61%, #070707 100%);
}

.selected-case--modal .selected-case__folder:after {
    content: "";
    pointer-events: none;
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        linear-gradient(180deg, rgba(244, 239, 229, .04), transparent 24%),
        radial-gradient(circle at var(--mx, 50%) var(--my, 0%), rgba(163, 68, 56, .14), transparent 28%);
    mix-blend-mode: screen;
}

.selected-case__close {
    top: 18px;
    right: 18px;
    width: 46px;
    height: 46px;
    border-radius: 999px;
    backdrop-filter: blur(12px);
}

.selected-case__tab {
    top: 0;
    left: clamp(28px, 4vw, 70px);
    min-width: clamp(190px, 18vw, 280px);
    transform: translateY(-1px);
}

.selected-case__clip {
    right: clamp(68px, 8vw, 126px);
    top: -13px;
    height: 62px;
}

.selected-case__top {
    flex: 0 0 auto;
    min-height: 0;
    grid-template-columns: minmax(0, 1.16fr) minmax(230px, .42fr);
    align-items: stretch;
    padding: clamp(54px, 5.3vw, 82px) clamp(30px, 5vw, 78px) clamp(22px, 2.8vw, 40px);
}

.selected-case__main {
    min-width: 0;
    display: block;
}

.selected-case h2 {
    max-width: 11ch;
    margin-top: clamp(12px, 1.4vw, 20px);
    font-size: clamp(42px, 5.7vw, 86px);
    line-height: .82;
    overflow-wrap: anywhere;
}

.selected-case h3 {
    max-width: 72ch;
}

.selected-case__media {
    min-height: 150px;
    aspect-ratio: 3.7 / 1;
}

.selected-case__media img {
    opacity: .88;
    filter: grayscale(.08) saturate(.74) contrast(1.2) brightness(.82);
}

.selected-case__summary {
    display: grid;
    grid-template-columns: minmax(90px, 130px) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
    margin-top: clamp(18px, 2.2vw, 30px);
    padding-top: clamp(16px, 2vw, 24px);
    border-top: 1px solid rgba(244, 239, 229, .12);
}

.selected-case__summary p {
    max-width: 72ch;
    margin: 0;
}

.selected-case__facts {
    align-content: end;
    margin: 0;
    gap: 12px;
    padding: clamp(34px, 3.8vw, 58px) 0 0;
}

.selected-case__facts div {
    min-height: 58px;
}

.selected-case__facts dd {
    color: rgba(244, 239, 229, .66);
}

.selected-case__bottom {
    flex: 0 0 auto;
    padding: clamp(22px, 2.7vw, 38px) clamp(30px, 5vw, 78px) clamp(24px, 3vw, 42px);
}

.selected-case__tabs {
    grid-template-columns: repeat(5, minmax(110px, 1fr));
    overflow-x: auto;
    scrollbar-width: thin;
}

.selected-case__tabs button {
    min-height: 42px;
    white-space: nowrap;
}

.selected-case__columns {
    grid-template-columns: minmax(0, 1.12fr) minmax(220px, .92fr) minmax(220px, .92fr);
}

.selected-case__columns > div {
    min-height: 128px;
}

.selected-case__columns p,
.selected-case__columns li {
    font-size: 15px;
}

.selected-case__link {
    max-width: 360px;
    margin-top: 24px;
}

@media (max-width: 980px) {
    .selected-case--modal .selected-case__folder {
        height: auto;
    }

    .selected-case__top {
        grid-template-columns: 1fr;
        flex: 0 0 auto;
    }

    .selected-case__main {
        display: block;
    }

    .selected-case h2 {
        max-width: 100%;
    }

    .selected-case__summary {
        grid-template-columns: 1fr;
    }

    .selected-case__media {
        min-height: 180px;
        margin-top: 18px;
    }

    .selected-case__facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding-top: 0;
    }

    .selected-case__columns {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .selected-case__top,
    .selected-case__bottom {
        padding-inline: 20px;
    }

    .selected-case__top {
        padding-top: 62px;
        padding-bottom: 24px;
    }

    .selected-case h2 {
        max-width: 8.5ch;
        font-size: clamp(36px, 12vw, 58px);
    }

    .selected-case h3 {
        font-size: 10px;
        line-height: 1.35;
    }

    .selected-case__media {
        min-height: 148px;
    }

    .selected-case__facts {
        grid-template-columns: 1fr;
    }

    .selected-case__tabs {
        grid-template-columns: repeat(5, minmax(128px, 1fr));
    }
}

/* Archive v30: Signal Ledger wall with hover-only file affordances. */
.projects-page {
    --stage-x: 62%;
    --stage-y: 36%;
    --stage-tilt-x: 0deg;
    --stage-tilt-y: 0deg;
    --mk-ivory: #eee8dc;
    --mk-paper: #d6c9ae;
    --mk-vermillion: #b91729;
    --ledger-red: #e61919;
    --ledger-card: #141416;
    --ledger-border: #252528;
    --ledger-muted: #666;
    --mk-blood: #551215;
    --mk-black: #020202;
    background:
        linear-gradient(90deg, rgba(185, 23, 41, .08), transparent 28%, transparent 72%, rgba(244, 239, 229, .025)),
        radial-gradient(circle at 74% 38%, rgba(185, 23, 41, .085), transparent 28vw),
        linear-gradient(180deg, var(--mk-black) 0%, #070303 48%, #030303 100%);
}

.projects-shell {
    max-width: 1600px;
}

.project-field-stage {
    position: relative;
    isolation: isolate;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: clamp(16px, 2.4vw, 30px);
    margin: clamp(18px, 2.4vw, 34px) 0 clamp(28px, 3.4vw, 46px);
    padding: clamp(28px, 4.2vw, 56px) 0 0;
    border: 0;
    border-radius: 0;
    overflow: visible;
    background: none;
    box-shadow: none;
    transform-style: preserve-3d;
}

.project-field-stage:before,
.project-field-stage:after {
    content: none;
    position: absolute;
    pointer-events: none;
    inset: 0;
    z-index: 1;
}

.project-field-stage:before {
    background:
        radial-gradient(circle at var(--stage-x) var(--stage-y), rgba(244, 239, 229, .06), transparent 0 102px, transparent 210px),
        linear-gradient(180deg, transparent 0 62%, rgba(185, 23, 41, .11) 76%, transparent 100%);
    mix-blend-mode: screen;
    opacity: .66;
}

.project-field-stage:after {
    background:
        linear-gradient(180deg, rgba(244, 239, 229, .035), transparent 16%, rgba(0, 0, 0, .48)),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .022) 0 1px, transparent 1px 6px);
    opacity: .32;
}

.project-field-fx,
.project-field-stage__grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: none;
    pointer-events: none;
}

.project-field-fx {
    z-index: 0;
    opacity: .62;
}

.project-field-stage__grid {
    z-index: 1;
    background:
        linear-gradient(180deg, transparent 0 69%, rgba(185, 23, 41, .24) 70.5%, transparent 73%),
        linear-gradient(90deg, transparent 0 12%, rgba(244, 239, 229, .07) 12.1%, transparent 12.2% 100%);
    mask-image: linear-gradient(180deg, transparent, #000 14%, #000 78%, transparent);
    animation: projectStageSweep 8s ease-in-out infinite alternate;
}

.project-field-stage__copy,
.project-field-stage__console {
    position: relative;
    z-index: 3;
}

.project-field-stage__copy {
    max-width: min(100%, 980px);
    min-width: 0;
    width: 100%;
    transform: rotateX(var(--stage-tilt-x)) rotateY(var(--stage-tilt-y));
    transform-origin: 20% 75%;
    transition: transform .45s cubic-bezier(.2, .8, .2, 1);
}

.project-field-stage__copy:after {
    content: none;
    display: block;
    width: min(520px, 52vw);
    height: 1px;
    margin-top: clamp(20px, 2.8vw, 38px);
    background: linear-gradient(90deg, var(--mk-vermillion), rgba(185, 23, 41, 0));
    box-shadow: 0 0 18px rgba(185, 23, 41, .42);
}

.project-field-stage__eyebrow {
    display: inline-flex;
    color: #a34438;
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: .24em;
    text-transform: uppercase;
    margin-bottom: clamp(12px, 1.4vw, 18px);
}

.project-field-stage .archive-title {
    max-width: 100%;
    display: block;
    gap: 0;
    margin: 0;
    font-size: clamp(54px, 9.5vw, 138px);
    line-height: .82;
    letter-spacing: 0;
    perspective: 900px;
    white-space: nowrap;
}

.project-field-stage .archive-title span,
.project-field-stage .archive-title em {
    display: block;
    transform-origin: 0 80%;
}

.project-field-stage__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px clamp(14px, 1.7vw, 28px);
    margin-top: clamp(12px, 1.7vw, 22px);
    color: rgba(244, 239, 229, .64);
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.project-field-stage__meta span {
    position: relative;
}

.project-field-stage__meta span + span:before {
    content: "/";
    color: rgba(185, 23, 41, .8);
    margin-right: clamp(16px, 2vw, 34px);
}

.project-field-stage__pings {
    display: flex;
    gap: 10px;
    margin-top: clamp(22px, 2vw, 34px);
}

.project-field-stage__pings i {
    width: clamp(52px, 7vw, 108px);
    height: 2px;
    background: linear-gradient(90deg, #b91729, transparent);
    box-shadow: 0 0 22px rgba(185, 23, 41, .64);
    animation: projectPing 1.8s ease-in-out infinite;
}

.project-field-stage__pings i:nth-child(2) {
    animation-delay: .22s;
}

.project-field-stage__pings i:nth-child(3) {
    animation-delay: .44s;
}

.project-field-stage__console {
    align-self: end;
    min-width: 0;
    max-width: 980px;
    width: 100%;
    display: block;
    margin-top: clamp(8px, 1.6vw, 18px);
}

.project-field-stage__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.project-field-stage__stats span {
    min-height: 92px;
    display: grid;
    align-content: end;
    gap: 8px;
    padding: 16px;
    border: 1px solid rgba(244, 239, 229, .13);
    border-radius: 18px;
    color: rgba(244, 239, 229, .54);
    background: rgba(5, 5, 5, .42);
    backdrop-filter: blur(18px);
    font-family: var(--f-mono);
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.project-field-stage__stats strong {
    color: #eee8dc;
    font-family: var(--f-display);
    font-size: clamp(22px, 2.4vw, 36px);
    line-height: .8;
    letter-spacing: .03em;
}

.project-field-stage .archive-controls {
    position: relative;
    z-index: 4;
    grid-template-columns: minmax(240px, 460px) minmax(0, 1fr);
    align-items: center;
    gap: clamp(12px, 1.8vw, 26px);
    margin: 0;
    padding: 9px 0;
    border: 1px solid rgba(244, 239, 229, .16);
    border-width: 1px 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    backdrop-filter: none;
    box-sizing: border-box;
    min-width: 0;
    width: 100%;
}

.project-search-wrap {
    position: relative;
    min-width: 0;
}

.project-search-wrap:before {
    content: none;
    position: absolute;
    left: 1px;
    top: -25px;
    color: rgba(244, 239, 229, .42);
    font-family: var(--f-mono);
    font-size: 9px;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.project-search-wrap span {
    position: absolute;
    left: 4px;
    top: 50%;
    width: 12px;
    aspect-ratio: 1;
    transform: translateY(-50%);
    border: 1px solid rgba(185, 23, 41, .74);
    border-radius: 50%;
    box-shadow: 0 0 18px rgba(185, 23, 41, .42);
}

.project-search-wrap span:after {
    content: "";
    position: absolute;
    width: 7px;
    height: 1px;
    right: -5px;
    bottom: -2px;
    background: rgba(185, 23, 41, .84);
    transform: rotate(45deg);
}

.project-search {
    min-width: 0;
    min-height: 36px;
    border: 0;
    border-bottom: 1px solid rgba(244, 239, 229, .24);
    border-radius: 0;
    padding-left: 28px;
    background: transparent;
    box-shadow: none;
}

.filter-row {
    justify-content: flex-end;
    gap: 8px;
    min-width: 0;
}

.filter-btn {
    min-height: 32px;
    border: 0;
    border-bottom: 1px solid rgba(244, 239, 229, .22);
    border-radius: 0;
    padding: 0 4px 6px;
    color: rgba(244, 239, 229, .62);
    background: transparent;
    backdrop-filter: none;
    box-shadow: none;
}

.filter-btn:before {
    content: attr(data-filter-code);
    margin-right: 8px;
    color: rgba(185, 23, 41, .78);
    font-size: .82em;
}

.filter-btn:hover,
.filter-btn:focus-visible,
.filter-btn.is-active {
    color: var(--mk-ivory);
    border-color: var(--mk-vermillion);
    background: transparent;
    box-shadow: 0 10px 24px rgba(185, 23, 41, .13);
}

.case-wall-title {
    margin-bottom: clamp(22px, 3vw, 36px);
}

.case-wall-title span {
    position: relative;
    text-shadow: 0 0 18px rgba(185, 23, 41, .48);
}

.project-collage {
    --wall-drift: 0px;
    position: relative;
    gap: clamp(28px, 2.7vw, 40px);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    perspective: 1000px;
}

.project-collage:before {
    content: none;
    position: absolute;
    pointer-events: none;
    inset: 0;
    border-radius: inherit;
    background:
        radial-gradient(circle at var(--stage-x) var(--stage-y), rgba(244, 239, 229, .1), transparent 0 110px, transparent 220px),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .02) 0 1px, transparent 1px 6px);
    opacity: .58;
    z-index: 0;
}

.project-card,
.project-card:nth-child(n),
.project-card.is-featured {
    position: relative;
    z-index: 1;
    min-height: 400px;
    padding: 0;
    border: 1px solid var(--ledger-border);
    border-radius: 0;
    background: var(--ledger-card);
    transform: translateY(20px) rotateX(0deg) rotateY(0deg);
    opacity: 0;
    filter: blur(10px) saturate(.76);
    will-change: transform, opacity, filter;
    transform-style: preserve-3d;
    overflow: visible;
    box-shadow: none;
}

.project-card.is-revealed,
html[data-motion-ready="true"] .project-card.is-revealed {
    opacity: 1;
    filter: blur(0) saturate(1);
    transform: translateY(0);
}

.project-card[hidden],
.project-card.is-hidden {
    display: none !important;
}

.project-card:before {
    content: "#" attr(data-file-no);
    position: absolute;
    top: -10px;
    left: 20px;
    min-width: 60px;
    z-index: 5;
    padding: 3px 11px;
    color: #fff;
    background: var(--ledger-red);
    clip-path: polygon(0 0, 85% 0, 100% 100%, 0% 100%);
    font-family: var(--f-mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    box-sizing: border-box;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .24s ease, transform .24s ease;
    pointer-events: none;
}

.project-card:after {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 1px;
    z-index: 6;
    border-radius: 0;
    background: linear-gradient(90deg, var(--ledger-red) 0%, transparent 40%);
    opacity: 0;
    transition: opacity .3s ease;
}

.project-card:hover,
.project-card:focus-visible {
    transform: translateY(-10px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
    filter: blur(0) saturate(1);
    border-color: rgba(230, 25, 25, .3);
    box-shadow:
        6px -6px 0 -2px #2b2b2f,
        12px -11px 0 -6px #1d1d20,
        0 20px 40px rgba(0, 0, 0, .6),
        0 0 20px rgba(230, 25, 25, .1);
}

.project-card:hover:before,
.project-card:focus-visible:before {
    opacity: 1;
    transform: translateY(0);
}

.project-card:hover:after,
.project-card:focus-visible:after {
    opacity: 1;
}

.project-card__media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    margin: 15px 0 0;
    border: 0;
    border-top: 1px solid var(--ledger-border);
    border-bottom: 1px solid var(--ledger-border);
    border-radius: 0;
    background: #000;
    overflow: hidden;
}

.project-card__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 24px;
}

.project-card__media:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 100px;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(0deg, rgba(230, 25, 25, 0) 0%, rgba(230, 25, 25, .05) 50%, rgba(230, 25, 25, 0) 100%);
    opacity: 0;
    transform: none;
    transition: opacity .24s ease;
}

.project-card:hover .project-card__media:before,
.project-card:focus-visible .project-card__media:before {
    opacity: .12;
    animation: signalLedgerScanline 8s linear infinite;
}

.project-card__media:after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent 60%, rgba(10, 10, 11, .8));
    z-index: 2;
}

.project-card__media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    opacity: 1;
    filter: grayscale(.5) contrast(1.2) brightness(.7);
    transform: scale(1);
    transform-origin: var(--mx, 50%) var(--my, 50%);
    transition: transform .6s cubic-bezier(.2, .8, .2, 1), filter .6s ease;
}

.project-card:hover .project-card__media img,
.project-card:focus-visible .project-card__media img {
    transform: scale(1.05);
    filter: grayscale(.2) contrast(1.1) brightness(.9);
}

.project-card__body:before {
    content: "Year: " attr(data-year) "    ID: " attr(data-case-id);
    order: 0;
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    color: var(--ledger-muted);
    font-family: var(--f-mono);
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.project-card h2 {
    order: 1;
    max-width: 100%;
    margin: 0 0 4px;
    color: #e0e0e0;
    font-family: var(--f-body);
    font-size: clamp(22px, 1.55vw, 28px);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -.01em;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    text-shadow: none;
}

.project-card__meta {
    order: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--ledger-muted);
    font-family: var(--f-mono);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: .02em;
    text-transform: none;
}

.project-card__meta:before {
    content: "";
    width: 4px;
    height: 4px;
    flex: 0 0 auto;
    border: 1px solid var(--ledger-muted);
    background: transparent;
    transition: border-color .24s ease, background-color .24s ease;
}

.project-card:hover .project-card__meta:before,
.project-card:focus-visible .project-card__meta:before {
    border-color: var(--ledger-red);
    background: var(--ledger-red);
}

.project-card h3,
.project-card p,
.project-tags,
.project-card__body:after {
    display: none;
}

.project-card__cta {
    order: 4;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px dashed var(--ledger-border);
    color: #e0e0e0;
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.project-card__cta:before {
    content: "";
    position: absolute;
    left: 24px;
    bottom: 20px;
    width: 0;
    height: 1px;
    background: var(--ledger-red);
    transition: width .3s ease;
}

.project-card__cta:after {
    content: attr(data-status);
    margin-left: auto;
    padding: 2px 6px;
    border: 1px solid var(--ledger-muted);
    color: var(--ledger-muted);
    font-size: 10px;
}

.project-card:hover .project-card__cta,
.project-card:focus-visible .project-card__cta {
    color: var(--ledger-red);
}

.project-card:hover .project-card__cta:before,
.project-card:focus-visible .project-card__cta:before {
    width: 96px;
}

.load-more-btn {
    border-radius: 999px;
    min-height: 48px;
    background: linear-gradient(135deg, #b91729, #8f3930);
}

@keyframes signalLedgerScanline {
    0% {
        bottom: 100%;
    }
    100% {
        bottom: -100px;
    }
}

body.case-modal-open .project-field-stage,
body.case-modal-open .case-wall-title,
body.case-modal-open .project-collage,
body.case-modal-open .load-more-wrap,
body.case-modal-open .archive-foot {
    filter: saturate(.64) brightness(.55) blur(1.5px);
    transition: filter .26s ease;
}

.selected-case--modal .selected-case__folder {
    transform-origin: var(--case-origin-x, 50vw) var(--case-origin-y, 50vh);
}

.selected-case--modal:not(.is-open) .selected-case__folder {
    transform: translateY(34px) scale(.92) rotateX(7deg);
}

.selected-case--modal.is-open .selected-case__folder {
    animation: dossierSnapIn .52s cubic-bezier(.2, .86, .18, 1);
}

@keyframes projectStageSweep {
    0% {
        transform: translateX(-4%) rotate(-1deg);
        opacity: .42;
    }
    100% {
        transform: translateX(5%) rotate(1deg);
        opacity: .76;
    }
}

@keyframes projectPing {
    0%, 100% {
        opacity: .28;
        transform: scaleX(.54);
    }
    50% {
        opacity: 1;
        transform: scaleX(1);
    }
}

@keyframes projectImageScan {
    0% {
        opacity: 0;
        transform: translateX(-120%);
    }
    30% {
        opacity: .75;
    }
    100% {
        opacity: 0;
        transform: translateX(120%);
    }
}

@keyframes dossierSnapIn {
    0% {
        filter: blur(12px) saturate(.8);
    }
    100% {
        filter: blur(0) saturate(1);
    }
}

@media (max-width: 1100px) {
    .project-field-stage {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .project-field-stage__console {
        max-width: 760px;
    }

    .project-field-stage .archive-controls {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .filter-row {
        justify-content: flex-start;
    }
}

@media (max-width: 720px) {
    .project-field-stage {
        margin-top: 18px;
        padding: 24px 0 0;
        border-radius: 0;
    }

    .project-field-stage .archive-title {
        max-width: 100%;
        font-size: clamp(44px, 13vw, 58px);
        white-space: normal;
    }

    .project-field-stage .archive-controls {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 10px 0;
        border-radius: 0;
        max-width: 100%;
        width: 100%;
    }

    .filter-row {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 8px;
        overflow: visible;
        padding-bottom: 0;
    }

    .filter-row::-webkit-scrollbar {
        display: none;
    }

    .filter-btn {
        flex: 1 1 calc(50% - 8px);
        min-height: 30px;
        padding: 0 8px 5px;
    }

    .project-collage {
        padding: 0;
        border-radius: 0;
    }

    .project-card,
    .project-card:nth-child(n),
    .project-card.is-featured {
        min-height: 380px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .project-field-fx,
    .project-field-stage__grid {
        display: none;
    }

    .project-field-stage__pings i,
    .selected-case--modal.is-open .selected-case__folder,
    .project-card__media:before {
        animation: none !important;
    }

    .project-card,
    .project-card.is-revealed {
        opacity: 1;
        filter: none;
        transform: none;
    }
}

/* Archive v31: one-to-one Signal Ledger reference port. */
body.projects-page,
.projects-page {
    --signal-bg: #0a0a0b;
    --signal-card: #141416;
    --signal-red: #e61919;
    --signal-text: #e0e0e0;
    --signal-muted: #666666;
    --signal-border: #252528;
    --signal-sans: var(--f-body, "Ranade", Arial, sans-serif);
    --signal-mono: var(--f-mono, "JetBrains Mono", "Courier New", monospace);
    min-height: 100vh;
    overflow-x: hidden;
    color: var(--signal-text);
    background-color: var(--signal-bg);
    background-image:
        linear-gradient(rgba(18, 18, 20, 0) 50%, rgba(0, 0, 0, .2) 50%),
        linear-gradient(90deg, rgba(255, 0, 0, .03), rgba(0, 255, 0, .01), rgba(0, 0, 255, .03));
    background-size: 100% 4px, 3px 100%;
    background-attachment: fixed;
    font-family: var(--signal-sans);
}

.projects-page:before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .04;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

.projects-page .grain {
    display: none;
}

.projects-shell {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: none;
    padding: 0;
}

.archive-nav {
    position: relative;
    z-index: 20;
    max-width: 1400px;
    margin: 0 auto;
    padding: 22px 2rem 0;
}

.archive-hero.project-field-stage {
    position: relative;
    z-index: 2;
    display: block;
    min-height: 0;
    max-width: 1400px;
    margin: 0 auto 3rem;
    padding: 4rem 2rem 2rem;
    border: 0;
    border-bottom: 1px solid var(--signal-border);
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    overflow: visible;
    transform: none;
}

.project-field-stage:before,
.project-field-stage:after,
.project-field-fx,
.project-field-stage__grid,
.project-field-stage__pings,
.project-field-stage__copy:after {
    display: none !important;
    content: none !important;
}

.project-field-stage__copy,
.project-field-stage__console {
    position: relative;
    z-index: 2;
    max-width: none;
    transform: none;
}

.project-field-stage__eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 1rem;
    color: var(--signal-red);
    font-family: var(--signal-mono);
    font-size: .7rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: .2rem;
    text-transform: uppercase;
}

.project-field-stage__eyebrow:before {
    content: "";
    width: 8px;
    height: 8px;
    display: inline-block;
    background: var(--signal-red);
    animation: signalPulse 2s infinite;
}

.project-field-stage .archive-title {
    display: block;
    margin: 0;
    color: var(--signal-text);
    font-family: var(--signal-sans);
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 700;
    line-height: .96;
    letter-spacing: -.02em;
    text-transform: uppercase;
    text-shadow: none;
}

.project-field-stage .archive-title span,
.project-field-stage .archive-title em {
    display: inline;
    transform: none;
    color: inherit;
    font: inherit;
}

.project-field-stage__meta {
    display: none;
}

.project-field-stage__console {
    margin-top: 1.75rem;
    width: 100%;
}

.project-field-stage .archive-controls {
    display: grid;
    grid-template-columns: minmax(220px, 360px) 1fr;
    gap: 18px;
    align-items: center;
    width: 100%;
    max-width: none;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}

.project-search-wrap {
    min-height: 38px;
    border: 1px solid var(--signal-border);
    border-radius: 0;
    background: rgba(20, 20, 22, .8);
    box-shadow: none;
}

.project-search-wrap:before,
.project-search-wrap span,
.project-search-wrap span:after {
    display: none;
}

.project-search {
    min-height: 38px;
    padding: 0 14px;
    color: var(--signal-text);
    font-family: var(--signal-mono);
    font-size: .75rem;
    letter-spacing: .02em;
    background: transparent;
}

.project-search::placeholder {
    color: var(--signal-muted);
}

.filter-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    margin: 0;
    padding: 0;
    overflow: visible;
}

.filter-btn {
    width: auto;
    min-height: 32px;
    padding: 0 10px;
    border: 1px solid var(--signal-border);
    border-radius: 0;
    color: var(--signal-muted);
    background: rgba(20, 20, 22, .55);
    font-family: var(--signal-mono);
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.filter-btn:before,
.filter-btn:after {
    content: none;
}

.filter-btn:hover,
.filter-btn:focus-visible,
.filter-btn.is-active {
    color: var(--signal-text);
    border-color: rgba(230, 25, 25, .3);
    background: rgba(230, 25, 25, .08);
}

.case-wall-title {
    display: none;
}

.project-collage {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.5rem;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem 5rem;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    perspective: 1000px;
}

.project-collage:before {
    display: none;
    content: none;
}

.project-card,
.project-card:nth-child(n),
.project-card.is-featured {
    position: relative;
    display: block;
    width: 100%;
    min-height: 400px;
    padding: 0;
    border: 1px solid var(--signal-border);
    border-radius: 0;
    color: inherit;
    text-decoration: none;
    background: var(--signal-card);
    box-shadow: none;
    opacity: 1;
    filter: none;
    overflow: visible;
    transform: none;
    transform-style: preserve-3d;
    transition: transform .4s cubic-bezier(.2, .8, .2, 1), box-shadow .4s ease, border-color .4s ease;
}

.project-card.is-revealed,
html[data-motion-ready="true"] .project-card.is-revealed {
    opacity: 1;
    filter: none;
    transform: none;
}

.project-card[hidden],
.project-card.is-hidden {
    display: none !important;
}

.project-card:before {
    content: "#" attr(data-file-no);
    position: absolute;
    inset: auto auto auto auto;
    top: -12px;
    right: auto;
    bottom: auto;
    left: 20px;
    z-index: 5;
    display: block;
    width: auto;
    height: auto;
    min-width: 60px;
    max-width: max-content;
    padding: 4px 12px;
    box-sizing: border-box;
    clip-path: polygon(0 0, 85% 0, 100% 100%, 0% 100%);
    color: #fff;
    background: var(--signal-red);
    font-family: var(--signal-mono);
    font-size: .75rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0;
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    white-space: nowrap;
    opacity: 1;
    transform: none;
    transition: none;
    pointer-events: none;
}

.project-card:after {
    content: "";
    position: absolute;
    inset: auto 0 auto 0;
    top: -1px;
    left: 0;
    right: 0;
    bottom: auto;
    z-index: 6;
    height: 1px;
    background: linear-gradient(90deg, var(--signal-red) 0%, transparent 40%);
    opacity: 0;
    transition: opacity .3s ease;
}

.project-card:hover,
.project-card:focus-visible {
    transform: translateY(-10px);
    border-color: rgba(230, 25, 25, .3);
    box-shadow: 0 20px 40px rgba(0, 0, 0, .6), 0 0 20px rgba(230, 25, 25, .1);
}

.project-card:hover:after,
.project-card:focus-visible:after {
    opacity: 1;
}

.project-card__media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    margin: 15px 0 0;
    border: 0;
    border-top: 1px solid var(--signal-border);
    border-bottom: 1px solid var(--signal-border);
    border-radius: 0;
    background: #000;
    overflow: hidden;
}

.project-card__media:before {
    content: "";
    position: absolute;
    inset: auto 0 auto 0;
    left: 0;
    right: 0;
    bottom: 100%;
    top: auto;
    z-index: 3;
    width: 100%;
    height: 100px;
    pointer-events: none;
    background: linear-gradient(0deg, rgba(230, 25, 25, 0) 0%, rgba(230, 25, 25, .05) 50%, rgba(230, 25, 25, 0) 100%);
    opacity: .1;
    animation: signalLedgerScanline 8s linear infinite;
}

.project-card__media:after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent 60%, rgba(10, 10, 11, .8));
}

.project-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1;
    filter: grayscale(.5) contrast(1.2) brightness(.7);
    transform: scale(1);
    transition: transform .6s cubic-bezier(.2, .8, .2, 1), filter .6s ease;
}

.project-card:hover .project-card__media img,
.project-card:focus-visible .project-card__media img {
    transform: scale(1.05);
    filter: grayscale(.2) contrast(1.1) brightness(.9);
}

.project-card__body {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    min-height: 210px;
    padding: 1.5rem;
}

.project-card__body:before {
    content: "Year: " attr(data-year) "    ID: " attr(data-case-id);
    display: flex;
    justify-content: space-between;
    margin-bottom: .5rem;
    color: var(--signal-muted);
    font-family: var(--signal-mono);
    font-size: .65rem;
    letter-spacing: 0;
    text-transform: uppercase;
}

.project-card h2 {
    margin: 0 0 .25rem;
    color: var(--signal-text);
    font-family: var(--signal-sans);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -.01em;
    text-transform: uppercase;
    text-shadow: none;
}

.project-card__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--signal-muted);
    font-family: var(--signal-mono);
    font-size: .8rem;
    font-weight: 400;
    line-height: 1.35;
    letter-spacing: 0;
    text-transform: none;
}

.project-card__meta:before {
    content: "";
    width: 4px;
    height: 4px;
    flex: 0 0 auto;
    border: 0;
    background: var(--signal-red);
}

.project-card h3,
.project-card p,
.project-tags,
.project-card__body:after {
    display: none;
}

.project-card__cta {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px dashed var(--signal-border);
    color: var(--signal-text);
    font-family: var(--signal-mono);
    font-size: .7rem;
    line-height: 1;
    letter-spacing: 0;
    text-transform: uppercase;
}

.project-card__cta:before {
    content: "";
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--signal-red);
    transition: width .3s ease;
}

.project-card__cta:after {
    content: attr(data-status);
    margin-left: auto;
    padding: 2px 6px;
    border: 1px solid var(--signal-muted);
    color: var(--signal-muted);
    font-family: var(--signal-mono);
    font-size: .6rem;
    line-height: 1.2;
}

.project-card:hover .project-card__cta,
.project-card:focus-visible .project-card__cta {
    color: var(--signal-red);
}

.project-card:hover .project-card__cta:before,
.project-card:focus-visible .project-card__cta:before {
    width: 100%;
}

.load-more-wrap {
    position: relative;
    z-index: 2;
    max-width: 1400px;
    margin: -2rem auto 5rem;
    padding: 0 2rem;
}

.load-more-btn {
    min-height: 42px;
    border: 1px solid var(--signal-border);
    border-radius: 0;
    color: var(--signal-text);
    background: var(--signal-card);
    box-shadow: none;
    font-family: var(--signal-mono);
    font-size: .7rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.project-count {
    color: var(--signal-muted);
    font-family: var(--signal-mono);
}

@keyframes signalPulse {
    0% { opacity: 1; }
    50% { opacity: .3; }
    100% { opacity: 1; }
}

@media (max-width: 1024px) {
    .project-collage {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .archive-nav {
        padding: 18px 1.2rem 0;
    }

    .archive-hero.project-field-stage {
        padding: 2rem 1.2rem 2rem;
    }

    .project-field-stage .archive-controls {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .filter-row {
        justify-content: flex-start;
    }

    .project-collage {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        padding: 0 1.2rem 5rem;
    }

    .project-card,
    .project-card:nth-child(n),
    .project-card.is-featured {
        min-height: 400px;
    }
}

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

    .project-card__media:before,
    .project-field-stage__eyebrow:before {
        animation: none !important;
    }
}

/* Archive v32: restrained evidence-board material layer. */
.project-relations {
    position: absolute;
    inset: -34px -18px;
    z-index: 0;
    width: calc(100% + 36px);
    height: calc(100% + 68px);
    pointer-events: none;
    overflow: visible;
    opacity: 0;
    transition: opacity .22s ease;
}

.project-collage.has-relations .project-relations {
    opacity: 1;
}

.project-relations path {
    fill: none;
    stroke: rgba(206, 45, 45, .42);
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-dasharray: 5 7;
    filter: drop-shadow(0 0 5px rgba(206, 45, 45, .28));
    animation: relationTrace 1.8s linear infinite;
}

.project-card {
    --note-tilt: -2deg;
}

.project-card:nth-of-type(3n) {
    --note-tilt: 2.2deg;
}

.project-card:nth-of-type(4n) {
    --note-tilt: -4deg;
}

.project-card__tape {
    position: absolute;
    z-index: 8;
    display: none;
    width: 86px;
    height: 24px;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(255, 255, 235, .12), rgba(255, 255, 235, .36), rgba(255, 255, 235, .14)),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .1) 0 1px, transparent 1px 7px);
    border-left: 1px solid rgba(255, 255, 235, .18);
    border-right: 1px solid rgba(255, 255, 235, .12);
    box-shadow: 0 8px 18px rgba(0, 0, 0, .24);
    mix-blend-mode: screen;
    opacity: .56;
    backdrop-filter: blur(1.5px);
}

.project-card__tape--left {
    top: -11px;
    left: 58px;
    transform: rotate(-2deg);
}

.project-card__tape--right {
    top: -9px;
    right: 22px;
    transform: rotate(3deg);
}

.project-card.is-featured .project-card__tape,
.project-card:hover .project-card__tape,
.project-card:focus-visible .project-card__tape {
    display: block;
}

.project-card__evidence-note {
    position: absolute;
    right: -14px;
    bottom: 72px;
    z-index: 9;
    max-width: min(210px, 62%);
    padding: 13px 14px 14px;
    color: #231f18;
    background:
        linear-gradient(180deg, rgba(255, 252, 174, .96), rgba(238, 218, 106, .94)),
        repeating-linear-gradient(0deg, rgba(35, 31, 24, .055) 0 1px, transparent 1px 16px);
    box-shadow: 8px 12px 24px rgba(0, 0, 0, .36);
    font-family: var(--signal-mono);
    font-size: .66rem;
    line-height: 1.35;
    letter-spacing: .02em;
    text-transform: uppercase;
    opacity: 0;
    pointer-events: none;
    transform: translate3d(10px, 12px, 0) rotate(var(--note-tilt));
    transition: opacity .24s ease, transform .24s cubic-bezier(.2, .8, .2, 1);
}

.project-card__evidence-note:before {
    content: "";
    position: absolute;
    top: -10px;
    left: 26px;
    width: 72px;
    height: 19px;
    background: rgba(255, 255, 235, .38);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .16);
    transform: rotate(-3deg);
}

.project-card:hover .project-card__evidence-note,
.project-card:focus-visible .project-card__evidence-note {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(var(--note-tilt));
}

.project-card.is-selected {
    border-color: rgba(230, 25, 25, .32);
}

.selected-case--modal .selected-case__folder {
    position: relative;
    background:
        radial-gradient(circle at 88% 12%, rgba(230, 25, 25, .08), transparent 28%),
        linear-gradient(180deg, rgba(35, 35, 38, .94), rgba(14, 14, 15, .96));
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 20px 24px 70px rgba(0, 0, 0, .72);
}

.selected-case--modal .selected-case__folder:before {
    content: "";
    position: absolute;
    top: -13px;
    right: 96px;
    z-index: 8;
    width: 112px;
    height: 30px;
    background:
        linear-gradient(90deg, rgba(255, 255, 235, .13), rgba(255, 255, 235, .4), rgba(255, 255, 235, .15)),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .12) 0 1px, transparent 1px 8px);
    border-left: 1px solid rgba(255, 255, 235, .18);
    border-right: 1px solid rgba(255, 255, 235, .1);
    transform: rotate(2deg);
    pointer-events: none;
    mix-blend-mode: screen;
    backdrop-filter: blur(2px);
}

.selected-case--modal .selected-case__folder:after {
    content: "CLEARED";
    position: absolute;
    right: clamp(24px, 4vw, 54px);
    bottom: clamp(28px, 4vw, 54px);
    z-index: 1;
    padding: 8px 18px;
    border: 4px double rgba(230, 25, 25, .72);
    color: rgba(230, 25, 25, .72);
    font-family: var(--signal-sans);
    font-size: clamp(1rem, 2vw, 1.55rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: .04em;
    text-transform: uppercase;
    transform: rotate(-13deg);
    opacity: .44;
    pointer-events: none;
}

.selected-case__media {
    background: rgba(230, 230, 225, .95);
    padding: 12px 12px 44px;
    border: 0;
    box-shadow: 10px 15px 30px rgba(0, 0, 0, .54);
    transform: rotate(-1.2deg);
}

.selected-case__media:after {
    content: "EXHIBIT IMAGE";
    position: absolute;
    left: 14px;
    bottom: 15px;
    color: rgba(26, 26, 26, .7);
    font-family: var(--signal-mono);
    font-size: .64rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.selected-case__media img {
    filter: sepia(.18) contrast(1.08) saturate(.88);
}

.selected-case__summary {
    position: relative;
}

.selected-case__summary:before {
    content: "FIELD NOTE";
    position: absolute;
    top: -16px;
    right: -12px;
    padding: 12px 14px;
    max-width: 150px;
    color: #231f18;
    background: rgba(253, 253, 150, .92);
    box-shadow: 6px 9px 18px rgba(0, 0, 0, .28);
    font-family: var(--signal-mono);
    font-size: .62rem;
    line-height: 1.25;
    letter-spacing: .05em;
    transform: rotate(4deg);
}

@keyframes relationTrace {
    to {
        stroke-dashoffset: -24;
    }
}

@media (max-width: 768px) {
    .project-relations,
    .project-card__evidence-note,
    .project-card__tape--right,
    .selected-case__summary:before {
        display: none !important;
    }

    .selected-case__media {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .project-relations path {
        animation: none;
    }

    .project-card__evidence-note,
    .project-card__tape,
    .selected-case__media {
        transition: none;
    }
}

/* Archive v33: simplify tape, restore modal, refine header, add card tilt. */
.archive-hero.project-field-stage {
    display: grid;
    grid-template-columns: minmax(280px, .92fr) minmax(360px, 1.08fr);
    gap: clamp(26px, 5vw, 86px);
    align-items: end;
    padding-top: clamp(46px, 6vw, 76px);
    padding-bottom: clamp(26px, 4vw, 42px);
}

.project-field-stage__eyebrow {
    margin-bottom: .9rem;
}

.project-field-stage .archive-title {
    font-size: clamp(2.35rem, 5.4vw, 4.5rem);
}

.project-field-stage__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    margin-top: 1rem;
    color: var(--signal-muted);
    font-family: var(--signal-mono);
    font-size: .64rem;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.project-field-stage__meta span {
    position: relative;
    padding-left: 12px;
}

.project-field-stage__meta span:before {
    content: "";
    position: absolute;
    left: 0;
    top: .48em;
    width: 4px;
    height: 4px;
    background: rgba(230, 25, 25, .74);
}

.project-field-stage__console {
    margin-top: 0;
}

.project-field-stage .archive-controls {
    grid-template-columns: 1fr;
    gap: 12px;
}

.filter-row {
    justify-content: flex-start;
}

.project-card,
.project-card:nth-child(n),
.project-card.is-featured,
.project-card.is-revealed,
html[data-motion-ready="true"] .project-card.is-revealed {
    --tilt-x: 0deg;
    --tilt-y: 0deg;
    --card-lift: 0px;
    --card-scale: 1;
    transform: perspective(900px) translateY(var(--card-lift)) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) scale(var(--card-scale));
    transform-origin: var(--mx, 50%) var(--my, 50%);
}

.project-card:hover,
.project-card:focus-visible {
    --card-lift: -10px;
    --card-scale: 1.01;
    transform: perspective(900px) translateY(var(--card-lift)) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) scale(var(--card-scale));
}

.project-card.is-revealed,
html[data-motion-ready="true"] .project-card.is-revealed {
    opacity: 1 !important;
    filter: none !important;
    transform: perspective(900px) translateY(var(--card-lift)) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) scale(var(--card-scale)) !important;
}

.project-card__media img {
    transform-origin: var(--mx, 50%) var(--my, 50%);
}

.project-card__tape,
.project-card__tape--left,
.project-card__tape--right {
    top: -10px;
    right: auto;
    left: 96px;
    display: none;
    width: 94px;
    height: 24px;
    transform: rotate(2.5deg);
}

.project-card__tape--right {
    display: none !important;
}

.project-card.is-featured .project-card__tape,
.project-card:hover .project-card__tape,
.project-card:focus-visible .project-card__tape {
    display: block;
}

.selected-case--modal .selected-case__folder {
    background:
        linear-gradient(90deg, rgba(0, 0, 0, .86), rgba(17, 3, 5, .72), rgba(0, 0, 0, .88)),
        radial-gradient(circle at 22% 30%, rgba(163, 68, 56, .24), transparent 34%),
        #0a0a0a;
    border: 1px solid rgba(240, 227, 197, .14);
    box-shadow: 0 26px 90px rgba(0, 0, 0, .72);
}

.selected-case--modal .selected-case__folder:before,
.selected-case--modal .selected-case__folder:after,
.selected-case__summary:before,
.selected-case__media:after {
    content: none;
    display: none;
}

.selected-case__media {
    padding: 0;
    border: 1px solid rgba(240, 227, 197, .12);
    background: #050505;
    box-shadow: none;
    transform: none;
}

.selected-case__media img {
    filter: grayscale(.18) contrast(1.08) brightness(.86);
}

@media (max-width: 900px) {
    .archive-hero.project-field-stage {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .project-field-stage__console {
        margin-top: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .project-card,
    .project-card:nth-child(n),
    .project-card.is-featured,
    .project-card:hover,
    .project-card:focus-visible {
        transform: none;
    }
}

/* Archive v34: Recessed Obsidian Magma background plate. */
body.projects-page {
    --plate-black: #060606;
    --plate-ridge: rgba(244, 239, 229, .035);
    --plate-groove: rgba(0, 0, 0, .34);
    --magma-line: rgba(230, 25, 25, .34);
    --magma-core: rgba(255, 74, 48, .56);
    background-color: var(--plate-black);
    background-image:
        radial-gradient(circle at 18% 18%, rgba(230, 25, 25, .075), transparent 28vw),
        linear-gradient(135deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 14px),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .024) 0 1px, transparent 1px 72px),
        repeating-linear-gradient(0deg, rgba(0, 0, 0, .22) 0 1px, transparent 1px 11px),
        linear-gradient(180deg, #080808 0%, #050505 48%, #090707 100%);
    background-size: auto, 22px 22px, 144px 144px, 100% 11px, auto;
}

.projects-shell:before {
    opacity: .045;
    filter: grayscale(1) contrast(1.2);
    mix-blend-mode: screen;
}

.projects-page:after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    width: auto;
    height: auto;
    border-radius: 0;
    pointer-events: none;
    opacity: .72;
    filter: none;
    mix-blend-mode: screen;
    background:
        linear-gradient(90deg, transparent 0 16%, rgba(230, 25, 25, 0) 35%, var(--magma-line) 48%, var(--magma-core) 50%, var(--magma-line) 52%, rgba(230, 25, 25, 0) 65%, transparent 100%) 0 24% / 220% 2px no-repeat,
        linear-gradient(90deg, transparent 0 8%, rgba(230, 25, 25, 0) 38%, rgba(230, 25, 25, .22) 49%, rgba(255, 74, 48, .42) 50%, rgba(230, 25, 25, .18) 52%, transparent 72%) 100% 58% / 260% 1px no-repeat,
        linear-gradient(180deg, transparent 0 18%, rgba(230, 25, 25, 0) 42%, rgba(230, 25, 25, .24) 50%, rgba(230, 25, 25, 0) 58%, transparent 100%) 72% 0 / 1px 240% no-repeat,
        repeating-linear-gradient(90deg, transparent 0 118px, var(--plate-ridge) 118px 119px, transparent 119px 238px),
        repeating-linear-gradient(0deg, transparent 0 86px, rgba(244, 239, 229, .025) 86px 87px, transparent 87px 174px),
        linear-gradient(90deg, transparent calc(50% - 1px), var(--plate-groove) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px));
    mask-image: radial-gradient(circle at 50% 42%, #000 0 68%, transparent 100%);
    animation: recessedMagmaRun 14s linear infinite;
}

.archive-hero.project-field-stage,
.project-card,
.project-card:nth-child(n),
.project-card.is-featured,
.selected-case--modal .selected-case__folder {
    box-shadow:
        inset 0 1px 0 rgba(244, 239, 229, .045),
        0 18px 46px rgba(0, 0, 0, .42);
}

.project-card:hover,
.project-card:focus-visible {
    box-shadow:
        inset 0 1px 0 rgba(244, 239, 229, .06),
        0 22px 48px rgba(0, 0, 0, .58),
        0 0 22px rgba(230, 25, 25, .1);
}

@keyframes recessedMagmaRun {
    0% {
        background-position:
            -120% 24%,
            140% 58%,
            72% 140%,
            0 0,
            0 0,
            0 0;
    }
    100% {
        background-position:
            130% 24%,
            -150% 58%,
            72% -140%,
            0 0,
            0 0,
            0 0;
    }
}

@media (max-width: 768px) {
    .projects-page:after {
        opacity: .5;
        background-size:
            260% 2px,
            300% 1px,
            1px 220%,
            160px 160px,
            140px 140px,
            auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .projects-page:after {
        animation: none;
        background-position:
            50% 24%,
            50% 58%,
            72% 50%,
            0 0,
            0 0,
            0 0;
    }
}

/* Archive v35: SVG magma circuit layer. */
.magma-circuit {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    opacity: .78;
    mix-blend-mode: screen;
    contain: layout paint;
}

.magma-circuit:before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .18;
    background:
        repeating-linear-gradient(0deg, transparent 0 3px, rgba(255, 255, 255, .018) 3px 4px),
        radial-gradient(circle at 50% 46%, rgba(230, 25, 25, .08), transparent 42vw);
    mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 82%, transparent 100%);
}

.magma-circuit__svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.magma-circuit__grooves path {
    fill: none;
    stroke: rgba(244, 239, 229, .045);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.magma-circuit__energy path {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.magma-path {
    stroke: rgba(230, 25, 25, .26);
    stroke-width: 2;
    stroke-dasharray: 9 91;
    stroke-dashoffset: 100;
    opacity: .72;
    animation: magmaFlow 13s linear infinite, magmaPulse 4.8s ease-in-out infinite;
}

.magma-path--b {
    stroke: rgba(255, 74, 48, .33);
    stroke-width: 1.65;
    stroke-dasharray: 13 87;
    animation-duration: 18s, 5.7s;
    animation-delay: -4s, -1.4s;
}

.magma-path--c {
    stroke-width: 1.35;
    stroke-dasharray: 7 93;
    animation-duration: 21s, 6.2s;
    animation-delay: -9s, -2.5s;
}

.magma-path--d {
    stroke: rgba(230, 25, 25, .2);
    stroke-width: 1.25;
    stroke-dasharray: 11 89;
    animation-duration: 16s, 7s;
    animation-delay: -2s, -3.4s;
}

.magma-path--e {
    stroke: rgba(255, 74, 48, .28);
    stroke-width: 1.6;
    stroke-dasharray: 15 85;
    animation-duration: 24s, 5.1s;
    animation-delay: -12s, -1s;
}

.magma-path--f {
    stroke-width: 1.2;
    stroke-dasharray: 8 92;
    animation-duration: 15s, 6.8s;
    animation-delay: -7s, -3s;
}

.magma-node {
    position: absolute;
    left: 0;
    top: 0;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 88, 54, .8);
    box-shadow:
        0 0 12px rgba(230, 25, 25, .5),
        0 0 28px rgba(230, 25, 25, .2);
    opacity: .55;
    offset-rotate: 0deg;
    animation: magmaNode 18s linear infinite, magmaNodePulse 3.8s ease-in-out infinite;
}

.magma-node--a {
    offset-path: path("M -60 165 H 225 Q 260 165 260 200 V 286 H 555 Q 588 286 588 252 V 70");
    animation-duration: 19s, 4.2s;
    animation-delay: -3s, 0s;
}

.magma-node--b {
    offset-path: path("M 118 636 H 386 Q 432 636 432 590 V 486 H 712 Q 748 486 748 448 V 360 H 1048 Q 1080 360 1080 326 V 126");
    animation-duration: 27s, 5.5s;
    animation-delay: -14s, -2s;
}

.magma-node--c {
    offset-path: path("M 930 100 H 1250 Q 1284 100 1284 134 V 226 H 1535 Q 1578 226 1578 270 V 420");
    animation-duration: 22s, 4.8s;
    animation-delay: -9s, -1s;
}

.magma-node--d {
    offset-path: path("M 840 790 V 608 Q 840 570 878 570 H 1168 Q 1208 570 1208 530 V 458 H 1650");
    animation-duration: 31s, 6.1s;
    animation-delay: -20s, -3.2s;
}

body.case-modal-open .magma-circuit {
    opacity: .32;
}

body.case-modal-open .magma-path,
body.case-modal-open .magma-node {
    animation-play-state: paused;
}

.projects-page:after {
    opacity: .32;
    animation: none;
    background:
        repeating-linear-gradient(90deg, transparent 0 118px, var(--plate-ridge) 118px 119px, transparent 119px 238px),
        repeating-linear-gradient(0deg, transparent 0 86px, rgba(244, 239, 229, .025) 86px 87px, transparent 87px 174px),
        linear-gradient(90deg, transparent calc(50% - 1px), var(--plate-groove) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px));
}

@keyframes magmaFlow {
    0% {
        stroke-dashoffset: 100;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes magmaPulse {
    0%, 100% {
        opacity: .24;
    }
    48% {
        opacity: .74;
    }
    62% {
        opacity: .42;
    }
}

@keyframes magmaNode {
    0% {
        offset-distance: 0%;
    }
    100% {
        offset-distance: 100%;
    }
}

@keyframes magmaNodePulse {
    0%, 100% {
        opacity: .18;
        transform: scale(.72);
    }
    50% {
        opacity: .72;
        transform: scale(1);
    }
}

@media (max-width: 768px) {
    .magma-circuit {
        opacity: .48;
    }

    .magma-node {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .magma-path,
    .magma-node {
        animation: none !important;
    }

    .magma-path {
        stroke-dashoffset: 0;
        opacity: .22;
    }
}

/* Archive v36: image-backed obsidian circuit plate. */
.magma-circuit {
    opacity: .9;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, .56), rgba(0, 0, 0, .74)),
        radial-gradient(circle at 50% 42%, rgba(230, 25, 25, .13), transparent 38vw),
        url("./project-media/obsidian-circuit-board.png") center center / cover no-repeat;
    mix-blend-mode: normal;
}

.magma-circuit:before {
    opacity: .26;
    background:
        repeating-linear-gradient(0deg, transparent 0 3px, rgba(255, 255, 255, .014) 3px 4px),
        radial-gradient(circle at 50% 44%, transparent 0 24vw, rgba(0, 0, 0, .38) 58vw, rgba(0, 0, 0, .72) 100%);
    mix-blend-mode: multiply;
}

.magma-circuit:after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(0, 0, 0, .72), transparent 18%, transparent 82%, rgba(0, 0, 0, .72)),
        linear-gradient(180deg, rgba(0, 0, 0, .64), transparent 20%, transparent 70%, rgba(0, 0, 0, .82));
}

.magma-circuit__svg {
    opacity: .62;
    mix-blend-mode: screen;
}

.magma-circuit__grooves path {
    stroke: rgba(0, 0, 0, .46);
    stroke-width: 7;
    filter: drop-shadow(0 1px 0 rgba(244, 239, 229, .045));
}

.magma-path {
    stroke: rgba(255, 45, 24, .34);
    stroke-width: 1.35;
    stroke-dasharray: 5 95;
    filter: drop-shadow(0 0 6px rgba(230, 25, 25, .34));
    opacity: .52;
}

.magma-path--b,
.magma-path--e {
    stroke: rgba(255, 82, 38, .4);
    stroke-width: 1.55;
    opacity: .6;
}

.magma-path--c,
.magma-path--d,
.magma-path--f {
    stroke-width: 1.05;
    opacity: .42;
}

.magma-node {
    width: 5px;
    height: 5px;
    background: rgba(255, 50, 25, .92);
    box-shadow:
        0 0 10px rgba(255, 45, 24, .72),
        0 0 24px rgba(230, 25, 25, .3);
}

body.case-modal-open .magma-circuit {
    opacity: .22;
}

.projects-page:after {
    opacity: .12;
}

@media (max-width: 768px) {
    .magma-circuit {
        opacity: .58;
        background-position: center top;
    }
}

/* Archive v37: ported package overlay for moving recessed magma routes. */
.magma-circuit {
    opacity: .78;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, .78)),
        radial-gradient(circle at 52% 38%, rgba(255, 61, 22, .12), transparent 32vw),
        url("./project-media/obsidian-circuit-board.png") center center / cover no-repeat;
}

.magma-circuit:before {
    opacity: .22;
    background:
        repeating-linear-gradient(0deg, transparent 0 3px, rgba(255, 255, 255, .013) 3px 4px),
        repeating-linear-gradient(90deg, transparent 0 92px, rgba(244, 239, 229, .018) 92px 93px, transparent 93px 184px),
        radial-gradient(circle at 50% 45%, transparent 0 18vw, rgba(0, 0, 0, .34) 58vw, rgba(0, 0, 0, .78) 100%);
    mix-blend-mode: multiply;
}

.magma-circuit:after {
    background:
        linear-gradient(90deg, rgba(0, 0, 0, .76), transparent 16%, transparent 84%, rgba(0, 0, 0, .76)),
        linear-gradient(180deg, rgba(0, 0, 0, .5), transparent 18%, transparent 68%, rgba(0, 0, 0, .9));
}

.magma-circuit__svg {
    opacity: .72;
    mix-blend-mode: screen;
}

.magma-min-640,
.magma-min-768,
.magma-min-1024,
.magma-min-1280,
.magma-min-1440,
.magma-min-1536 {
    display: none;
}

.magma-trench,
.magma-underlay,
.magma-route {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.magma-trench {
    stroke: rgba(0, 0, 0, .74);
    stroke-width: 10;
    filter: url("#recessed-shadow");
    opacity: .78;
}

.magma-underlay {
    stroke: rgba(255, 69, 24, .13);
    stroke-width: 4;
    opacity: .56;
    animation: magmaWave 4.8s ease-in-out infinite;
}

.magma-route {
    stroke-dasharray: 200 600;
    stroke-dashoffset: 2400;
    animation: magmaDash var(--route-duration, 18s) linear infinite;
    animation-delay: var(--route-delay, 0s);
}

.magma-route--fast {
    stroke-dasharray: 150 450;
}

.magma-route--slow {
    stroke-dasharray: 120 680;
}

.magma-route--glow {
    stroke: rgba(255, 64, 20, .35);
    stroke-width: 5.5;
    filter: url("#magma-bloom");
    opacity: .6;
}

.magma-route--core {
    stroke: url("#magma-gradient");
    stroke-width: 1.75;
    filter: drop-shadow(0 0 7px rgba(255, 58, 24, .44));
    opacity: .78;
}

.magma-packet {
    filter: url("#magma-bloom");
    opacity: .72;
}

.magma-packet--halo {
    fill: rgba(255, 68, 0, .64);
}

.magma-packet--core {
    fill: rgba(255, 245, 221, .95);
}

.magma-led {
    opacity: .72;
}

.magma-led__ring {
    fill: none;
    stroke: rgba(244, 239, 229, .1);
    stroke-width: 1;
}

.magma-led__core {
    fill: rgba(255, 68, 0, .85);
    filter: drop-shadow(0 0 5px rgba(255, 68, 0, .82));
    transform-origin: center;
    animation: magmaLedPulse 3.2s ease-in-out infinite;
    animation-delay: var(--led-delay, 0s);
}

body.case-modal-open .magma-circuit {
    opacity: .22;
}

body.case-modal-open .magma-underlay,
body.case-modal-open .magma-route,
body.case-modal-open .magma-led__core {
    animation-play-state: paused;
}

body.case-modal-open .magma-packet {
    opacity: .08;
}

@keyframes magmaDash {
    0% {
        stroke-dashoffset: 2400;
    }

    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes magmaWave {
    0%,
    100% {
        opacity: .22;
        stroke-width: 2.4;
    }

    50% {
        opacity: .54;
        stroke-width: 4.2;
    }
}

@keyframes magmaLedPulse {
    0%,
    100% {
        opacity: .26;
        transform: scale(.9);
        filter: drop-shadow(0 0 2px rgba(255, 68, 0, .36));
    }

    50% {
        opacity: .95;
        transform: scale(1.12);
        filter: drop-shadow(0 0 7px rgba(255, 68, 0, .92));
    }
}

@media (min-width: 640px) {
    .magma-min-640 {
        display: inline;
    }
}

@media (min-width: 768px) {
    .magma-min-768 {
        display: inline;
    }
}

@media (min-width: 1024px) {
    .magma-min-1024 {
        display: inline;
    }
}

@media (min-width: 1280px) {
    .magma-min-1280 {
        display: inline;
    }
}

@media (min-width: 1440px) {
    .magma-min-1440 {
        display: inline;
    }
}

@media (min-width: 1536px) {
    .magma-min-1536 {
        display: inline;
    }
}

@media (max-width: 768px) {
    .magma-circuit {
        opacity: .5;
        background-position: center top;
    }

    .magma-circuit__svg {
        opacity: .5;
    }

    .magma-trench {
        stroke-width: 8;
    }

    .magma-route--glow {
        stroke-width: 4;
    }
}

@media (prefers-reduced-motion: reduce) {
    .magma-underlay,
    .magma-route,
    .magma-led__core {
        animation: none !important;
    }

    .magma-route {
        stroke-dashoffset: 0;
        opacity: .24;
    }

    .magma-packet {
        display: none;
    }
}

/* Archive v38: remove SVG route motion; keep a quiet image-backed plate. */
.magma-circuit {
    opacity: .76;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, .54), rgba(0, 0, 0, .8)),
        radial-gradient(circle at 50% 40%, rgba(255, 56, 22, .08), transparent 34vw),
        url("./project-media/obsidian-circuit-board.png") center center / cover no-repeat;
    mix-blend-mode: normal;
    transform: translateZ(0);
}

.magma-circuit__svg {
    display: none !important;
}

.magma-circuit:before {
    opacity: .18;
    background:
        linear-gradient(110deg, transparent 0 38%, rgba(255, 47, 22, .16) 48%, transparent 58%),
        repeating-linear-gradient(0deg, transparent 0 3px, rgba(255, 255, 255, .012) 3px 4px),
        radial-gradient(circle at 46% 42%, transparent 0 20vw, rgba(0, 0, 0, .34) 58vw, rgba(0, 0, 0, .78) 100%);
    background-size: 220% 100%, auto, auto;
    background-position: -80% 0, 0 0, 0 0;
    mix-blend-mode: screen;
    animation: magmaAmbientSweep 18s ease-in-out infinite;
    will-change: background-position, opacity;
}

.magma-circuit:after {
    background:
        radial-gradient(circle at var(--magma-x, 62%) var(--magma-y, 44%), rgba(255, 65, 24, .09), transparent 24vw),
        linear-gradient(90deg, rgba(0, 0, 0, .8), transparent 16%, transparent 84%, rgba(0, 0, 0, .8)),
        linear-gradient(180deg, rgba(0, 0, 0, .54), transparent 18%, transparent 68%, rgba(0, 0, 0, .92));
    animation: magmaAmbientBreath 12s ease-in-out infinite;
    will-change: opacity;
}

body.case-modal-open .magma-circuit {
    opacity: .24;
}

@keyframes magmaAmbientSweep {
    0%,
    100% {
        opacity: .1;
        background-position: -80% 0, 0 0, 0 0;
    }

    45% {
        opacity: .2;
        background-position: 120% 0, 0 0, 0 0;
    }
}

@keyframes magmaAmbientBreath {
    0%,
    100% {
        opacity: .78;
    }

    50% {
        opacity: .92;
    }
}

@media (max-width: 768px) {
    .magma-circuit {
        opacity: .5;
        background-position: center top;
    }

    .magma-circuit:before {
        animation-duration: 24s;
        opacity: .1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .magma-circuit:before,
    .magma-circuit:after {
        animation: none !important;
    }
}

/* Archive v39: contact-section vermillion glow atmosphere. */
body.projects-page {
    --contact-glow-red: rgba(185, 23, 41, .72);
    --contact-glow-soft: rgba(185, 23, 41, .22);
    --contact-glow-ember: rgba(255, 72, 37, .28);
    background:
        radial-gradient(circle at 18% 8%, rgba(185, 23, 41, .13), transparent 34vw),
        radial-gradient(circle at 84% 12%, rgba(255, 72, 37, .08), transparent 30vw),
        linear-gradient(180deg, #080808 0%, #030303 46%, #070303 100%);
}

.magma-circuit {
    opacity: 1;
    background:
        radial-gradient(circle at 16% 78%, rgba(185, 23, 41, .22), transparent 24vw),
        radial-gradient(circle at 78% 70%, rgba(255, 72, 37, .16), transparent 28vw),
        radial-gradient(circle at 50% 105%, rgba(185, 23, 41, .2), transparent 38vw),
        linear-gradient(180deg, rgba(0, 0, 0, .2), rgba(0, 0, 0, .82));
    mix-blend-mode: screen;
}

.magma-circuit__svg {
    display: none !important;
}

.magma-circuit:before {
    opacity: .7;
    background:
        radial-gradient(ellipse at 18% 78%, rgba(255, 54, 36, .34) 0 1.5%, rgba(185, 23, 41, .2) 5%, transparent 22%),
        radial-gradient(ellipse at 44% 82%, rgba(255, 54, 36, .28) 0 1%, rgba(185, 23, 41, .15) 4%, transparent 18%),
        radial-gradient(ellipse at 72% 76%, rgba(255, 54, 36, .32) 0 1.3%, rgba(185, 23, 41, .18) 5%, transparent 20%),
        linear-gradient(90deg, transparent 0 12%, rgba(185, 23, 41, .22) 20%, rgba(255, 72, 37, .28) 24%, transparent 34% 100%),
        repeating-linear-gradient(0deg, transparent 0 5px, rgba(244, 239, 229, .016) 5px 6px);
    background-size: auto, auto, auto, 230% 100%, auto;
    background-position: 0 0, 0 0, 0 0, -70% 0, 0 0;
    filter: blur(.2px);
    mix-blend-mode: screen;
    animation: contactGlowSweep 18s ease-in-out infinite;
}

.magma-circuit:after {
    opacity: 1;
    background:
        radial-gradient(circle at 50% 76%, rgba(185, 23, 41, .14), transparent 32vw),
        linear-gradient(90deg, rgba(0, 0, 0, .84), transparent 18%, transparent 82%, rgba(0, 0, 0, .84)),
        linear-gradient(180deg, rgba(0, 0, 0, .76), transparent 24%, transparent 66%, rgba(0, 0, 0, .9)),
        repeating-linear-gradient(90deg, transparent 0 118px, rgba(244, 239, 229, .02) 118px 119px, transparent 119px 238px);
    animation: contactGlowBreath 10s ease-in-out infinite;
}

.projects-page:after {
    opacity: .2;
    background:
        repeating-linear-gradient(90deg, transparent 0 124px, rgba(244, 239, 229, .022) 124px 125px, transparent 125px 248px),
        repeating-linear-gradient(0deg, transparent 0 92px, rgba(244, 239, 229, .018) 92px 93px, transparent 93px 184px);
}

body.case-modal-open .magma-circuit {
    opacity: .32;
}

@keyframes contactGlowSweep {
    0%,
    100% {
        opacity: .58;
        background-position: 0 0, 0 0, 0 0, -70% 0, 0 0;
    }

    50% {
        opacity: .8;
        background-position: 0 0, 0 0, 0 0, 110% 0, 0 0;
    }
}

@keyframes contactGlowBreath {
    0%,
    100% {
        opacity: .88;
    }

    50% {
        opacity: 1;
    }
}

@media (max-width: 768px) {
    .magma-circuit {
        opacity: .82;
        background:
            radial-gradient(circle at 20% 72%, rgba(185, 23, 41, .2), transparent 42vw),
            radial-gradient(circle at 76% 82%, rgba(255, 72, 37, .13), transparent 42vw),
            linear-gradient(180deg, rgba(0, 0, 0, .22), rgba(0, 0, 0, .88));
    }

    .magma-circuit:before {
        opacity: .5;
        animation-duration: 24s;
    }
}

@media (prefers-reduced-motion: reduce) {
    .magma-circuit:before,
    .magma-circuit:after {
        animation: none !important;
    }
}