/* ─── Projects index + project detail (pjx) ─── */
.pjx-hero {
    position: relative;
    padding: calc(var(--nav-height, 80px) + 56px) 0 0;
    background:
        radial-gradient(circle at 20% 30%, var(--spatial-glow), transparent 46%),
        linear-gradient(var(--spatial-grid) 1px, transparent 1px) 0 0 / 56px 56px,
        linear-gradient(90deg, var(--spatial-grid) 1px, transparent 1px) 0 0 / 56px 56px;
    border-bottom: 1px solid var(--spatial-line);
    overflow: hidden;
}

.pjx-hero::before {
    content: "";
    position: absolute;
    width: 600px;
    height: 600px;
    inset-inline-end: -180px;
    top: -80px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--spatial-glow), transparent 65%);
    pointer-events: none;
}

.pjx-hero-grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(36px, 5vw, 84px);
    align-items: center;
    padding-bottom: 72px;
}

.pjx-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 34px;
    font-size: 12px;
    color: var(--text-muted);
}

.pjx-breadcrumb a {
    color: var(--text-secondary);
    text-decoration: none;
}

.pjx-breadcrumb a:hover {
    color: var(--cyan);
}

.pjx-kicker,
.pjx-chapter-no {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin: 0 0 22px;
}

.pjx-kicker span,
.pjx-chapter-no span,
.pjx-index {
    font: 10px monospace;
    letter-spacing: .2em;
    color: var(--text-muted);
    direction: ltr;
}

.pjx-kicker span,
.pjx-chapter-no span {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.pjx-kicker span::before,
.pjx-chapter-no span::before {
    content: "";
    width: 38px;
    height: 1px;
    background: var(--cyan);
}

.pjx-chapter-no span::before {
    background: var(--spatial-line);
}

.pjx-kicker b {
    color: var(--cyan);
    font-size: 13px;
    font-weight: 700;
    padding-inline-start: 14px;
    border-inline-start: 1px solid var(--spatial-line);
}

.pjx-index {
    font-size: 11px;
    letter-spacing: .14em;
    color: var(--cyan);
}

.pjx-title {
    margin: 0 0 20px;
    font-size: clamp(30px, 3.6vw, 54px);
    line-height: 1.3;
    font-weight: 800;
    color: var(--text-primary);
    text-shadow: 0 0 45px var(--spatial-glow);
}

.pjx-subtitle {
    margin: 0 0 16px;
    font-size: 15px;
    font-weight: 600;
    color: var(--cyan);
    direction: auto;
}

.pjx-lede {
    margin: 0 0 30px;
    max-width: 620px;
    font-size: 16px;
    line-height: 1.95;
    color: var(--text-secondary);
}

.pjx-notice {
    margin: -10px 0 28px;
    max-width: 620px;
    padding: 12px 16px;
    border-inline-start: 2px solid var(--cyan);
    background: var(--spatial-glow);
    font-size: 13px;
    line-height: 1.8;
    color: var(--text-secondary);
}

.pjx-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 28px;
}

.pjx-actions .nx-text-link {
    margin: 0;
    color: var(--text-primary);
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    font-size: 14px;
    text-decoration: none;
}

.pjx-actions .nx-text-link:hover {
    color: var(--cyan);
}

.pjx-bar {
    height: 32px;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 14px;
    border-bottom: 1px solid var(--spatial-line);
    background: var(--bg-secondary);
    direction: ltr;
}

.pjx-bar i {
    width: 6px;
    height: 6px;
    border: 1px solid var(--text-muted);
    border-radius: 50%;
}

.pjx-bar > span {
    margin-left: auto;
    font: 9px monospace;
    letter-spacing: .16em;
    color: var(--text-muted);
    text-transform: uppercase;
}

/* Index hero: fanned deck of project screens */
.pjx-deck {
    position: relative;
    height: clamp(320px, 34vw, 460px);
    perspective: 1600px;
}

.pjx-deck-card {
    position: absolute;
    inset-inline: 6% 6%;
    top: 12%;
    margin: 0;
    border: 1px solid var(--spatial-line);
    background: var(--bg-secondary);
    box-shadow: 0 30px 70px rgba(0, 0, 0, .35);
    transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}

.pjx-deck-card img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: top center;
}

.pjx-deck-card--1 {
    z-index: 3;
    transform: rotateY(var(--pjx-ry, 8deg)) rotateX(var(--pjx-rx, 2deg)) translateZ(0);
}

.pjx-deck-card--2 {
    z-index: 2;
    transform: rotateY(8deg) translate3d(7%, -14%, -120px);
    opacity: .7;
}

.pjx-deck-card--3 {
    z-index: 1;
    transform: rotateY(8deg) translate3d(14%, -28%, -240px);
    opacity: .4;
}

[dir="ltr"] .pjx-deck-card--1 { transform: rotateY(var(--pjx-ry, -8deg)) rotateX(var(--pjx-rx, 2deg)); }
[dir="ltr"] .pjx-deck-card--2 { transform: rotateY(-8deg) translate3d(-7%, -14%, -120px); }
[dir="ltr"] .pjx-deck-card--3 { transform: rotateY(-8deg) translate3d(-14%, -28%, -240px); }

.pjx-deck:hover .pjx-deck-card--2 {
    transform: rotateY(8deg) translate3d(10%, -20%, -120px);
}

.pjx-deck:hover .pjx-deck-card--3 {
    transform: rotateY(8deg) translate3d(20%, -40%, -240px);
}

[dir="ltr"] .pjx-deck:hover .pjx-deck-card--2 { transform: rotateY(-8deg) translate3d(-10%, -20%, -120px); }
[dir="ltr"] .pjx-deck:hover .pjx-deck-card--3 { transform: rotateY(-8deg) translate3d(-20%, -40%, -240px); }

/* Detail hero stage */
.pjx-stage {
    position: relative;
    margin: 0;
    border: 1px solid var(--spatial-line);
    background: var(--bg-secondary);
    box-shadow: -18px 30px 0 -14px var(--bg-primary), -18px 30px 0 -13px var(--spatial-line);
    transform: perspective(1500px) rotateX(var(--pjx-rx, 0deg)) rotateY(var(--pjx-ry, 6deg));
    transition: transform .45s cubic-bezier(.2, .7, .2, 1);
}

[dir="ltr"] .pjx-stage {
    --pjx-ry: -6deg;
    box-shadow: 18px 30px 0 -14px var(--bg-primary), 18px 30px 0 -13px var(--spatial-line);
}

.pjx-stage-media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--bg-primary);
}

.pjx-stage-media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: top center;
}

.pjx-stage-media::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 22%;
    background: linear-gradient(180deg, transparent, rgba(32, 229, 223, .14) 70%, rgba(32, 229, 223, .5) 98%, transparent);
    mix-blend-mode: screen;
    opacity: 0;
    pointer-events: none;
}

/* Facts strip */
.pjx-facts {
    position: relative;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    margin-block: 0;
    border-top: 1px solid var(--spatial-line);
}

.pjx-facts > div {
    padding: 26px 26px 30px;
    border-inline-start: 1px solid var(--spatial-line);
}

.pjx-facts > div:first-child {
    border-inline-start: 0;
    padding-inline-start: 0;
}

.pjx-facts dt {
    margin-bottom: 10px;
    font-size: 12px;
    color: var(--text-muted);
}

.pjx-facts dd {
    margin: 0;
    font: 700 34px/1 monospace;
    color: var(--text-primary);
}

.pjx-facts dd.pjx-fact-text {
    font-family: inherit;
    font-size: 16px;
    line-height: 1.6;
}

.pjx-facts--detail {
    grid-auto-columns: minmax(0, 1fr);
}

.pjx-facts-tags {
    grid-column: span 2;
}

.pjx-facts-tags dd {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font: inherit;
}

.pjx-facts-tags dd span {
    padding: 4px 10px;
    border: 1px solid var(--spatial-line);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}

/* Shared chapter pieces */
.pjx-heading {
    margin: 0;
    font-size: clamp(26px, 2.8vw, 42px);
    line-height: 1.35;
    font-weight: 800;
    color: var(--text-primary);
}

.pjx-accent {
    color: var(--cyan);
}

.pjx-chapter,
.pjx-work,
.pjx-guide,
.pjx-body {
    padding: clamp(64px, 8vw, 110px) 0;
    border-bottom: 1px solid var(--spatial-line);
}

.pjx-section-head,
.pjx-work-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px 40px;
    margin-bottom: 44px;
}

.pjx-section-count {
    margin: 0;
    font: 700 40px/1 monospace;
    color: var(--text-primary);
    direction: ltr;
}

.pjx-section-count span {
    font: 600 13px/1 var(--font-main, sans-serif);
    color: var(--text-muted);
}

.pjx-section-head .nx-text-link {
    color: var(--cyan);
    text-decoration: none;
}

/* Filters */
.pjx-filters {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid var(--spatial-line);
}

.pjx-filters button {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border: 0;
    border-inline-start: 1px solid var(--spatial-line);
    background: none;
    color: var(--text-secondary);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: color .25s ease, background .25s ease;
}

.pjx-filters button:first-child {
    border-inline-start: 0;
}

.pjx-filters button span {
    font: 10px monospace;
    letter-spacing: .1em;
    color: var(--text-muted);
}

.pjx-filters button::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: -1px;
    height: 2px;
    background: var(--cyan);
    scale: 0 1;
    transition: scale .35s cubic-bezier(.2, .7, .2, 1);
}

.pjx-filters button:hover {
    color: var(--text-primary);
}

.pjx-filters button.active {
    color: var(--text-primary);
    background: var(--spatial-glow);
}

.pjx-filters button.active span {
    color: var(--cyan);
}

.pjx-filters button.active::after {
    scale: 1 1;
}

/* Project grid + tiles */
.pjx-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 44px 32px;
}

.pjx-cell--featured {
    grid-column: 1 / -1;
}

.pjx-grid.is-filtered .pjx-cell--featured {
    grid-column: auto;
}

.pjx-tile {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.pjx-tile-stage {
    display: block;
    border: 1px solid var(--spatial-line);
    background: var(--bg-secondary);
    text-decoration: none;
    transition: border-color .35s ease, transform .45s cubic-bezier(.2, .7, .2, 1), box-shadow .45s ease;
}

.pjx-tile-media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--bg-primary);
}

.pjx-tile-media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: 50% 0%;
    transition: object-position 3.2s cubic-bezier(.3, .1, .2, 1), scale .6s ease;
}

.pjx-tile-media::after {
    content: "↗";
    position: absolute;
    top: 14px;
    inset-inline-end: 14px;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    background: var(--cyan);
    color: var(--bg-primary);
    font-size: 17px;
    font-weight: 700;
    opacity: 0;
    translate: 0 -8px;
    transition: opacity .3s ease, translate .35s ease;
}

.pjx-tile:hover .pjx-tile-stage {
    border-color: var(--cyan);
    transform: translateY(-6px);
    box-shadow: 0 26px 50px rgba(0, 0, 0, .28);
}

.pjx-tile:hover .pjx-tile-media img {
    object-position: 50% 100%;
}

.pjx-tile:hover .pjx-tile-media::after {
    opacity: 1;
    translate: 0 0;
}

.pjx-tile-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 10px;
    padding-top: 22px;
}

.pjx-tile-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    font-size: 12px;
    color: var(--text-muted);
}

.pjx-tile-meta span + span {
    padding-inline-start: 12px;
    border-inline-start: 1px solid var(--spatial-line);
}

.pjx-tile h3 {
    margin: 0;
    font-size: 19px;
    line-height: 1.55;
    font-weight: 800;
}

.pjx-tile h3 a {
    color: var(--text-primary);
    text-decoration: none;
    transition: color .3s ease;
}

.pjx-tile:hover h3 a {
    color: var(--cyan);
}

.pjx-tile-desc {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    font-size: 14px;
    line-height: 1.85;
    color: var(--text-secondary);
}

.pjx-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
}

.pjx-tags li {
    padding: 3px 9px;
    border: 1px solid var(--spatial-line);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
}

.pjx-tile-link {
    margin-top: auto;
    padding-top: 8px;
    color: var(--cyan);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.pjx-tile--featured {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    gap: clamp(28px, 4vw, 64px);
    align-items: center;
}

.pjx-tile--featured .pjx-tile-body {
    padding: 0;
}

.pjx-tile--featured h3 {
    font-size: clamp(24px, 2.4vw, 34px);
    line-height: 1.4;
}

.pjx-tile--featured .pjx-tile-desc {
    -webkit-line-clamp: 5;
    font-size: 16px;
}

.pjx-tile--featured .pjx-tile-link {
    margin-top: 10px;
}

.pjx-grid.is-filtered .pjx-tile--featured {
    display: flex;
    gap: 0;
}

.pjx-grid.is-filtered .pjx-tile--featured .pjx-tile-body {
    padding-top: 22px;
}

.pjx-grid.is-filtered .pjx-tile--featured h3 {
    font-size: 19px;
}

.pjx-grid.is-filtered .pjx-tile--featured .pjx-tile-desc {
    -webkit-line-clamp: 3;
    font-size: 14px;
}

/* Index guide */
.pjx-guide {
    background: linear-gradient(90deg, transparent, var(--spatial-glow), transparent);
    border-bottom: 0;
}

.pjx-guide-grid {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr);
    gap: clamp(32px, 6vw, 96px);
    align-items: start;
}

.pjx-statement {
    margin: 0 0 30px;
    padding-inline-start: clamp(20px, 3vw, 36px);
    border-inline-start: 2px solid var(--cyan);
    font-size: clamp(16px, 1.4vw, 19px);
    line-height: 2;
    color: var(--text-primary);
}

/* Detail body */
.pjx-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: clamp(40px, 6vw, 96px);
    align-items: start;
}

.pjx-prose,
.pjx-prose.project-detail-content {
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    counter-reset: pjx-sec;
    font-size: 16px;
    line-height: 2;
    color: var(--text-secondary);
}

.pjx-prose > p:first-child {
    margin: 0 0 40px;
    padding-inline-start: clamp(20px, 3vw, 36px);
    border-inline-start: 2px solid var(--cyan);
    font-size: clamp(17px, 1.4vw, 20px);
    line-height: 2;
    color: var(--text-primary);
}

.pjx-prose.project-detail-content h2 {
    counter-increment: pjx-sec;
    margin: 48px 0 16px;
    padding: 40px 0 0;
    letter-spacing: 0;
    border-top: 1px solid var(--spatial-line);
    font-size: clamp(21px, 1.8vw, 26px);
    line-height: 1.5;
    font-weight: 800;
    color: var(--text-primary);
    scroll-margin-top: calc(var(--nav-height, 80px) + 30px);
}

.pjx-prose.project-detail-content h2::before {
    content: counter(pjx-sec, decimal-leading-zero);
    position: static;
    width: auto;
    border-radius: 0;
    background: none;
    display: block;
    margin-bottom: 10px;
    font: 11px monospace;
    letter-spacing: .14em;
    color: var(--cyan);
}

.pjx-prose.project-detail-content > h2:first-of-type {
    margin-top: 0;
}

.pjx-prose p {
    margin: 0 0 20px;
}

.pjx-prose strong {
    color: var(--text-primary);
}

.pjx-prose h3 {
    margin: 24px 0 10px;
    font-size: 17px;
    color: var(--text-primary);
}

.pjx-prose img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 560px;
    margin: 8px 0 18px;
    object-fit: contain;
    object-position: top center;
    border: 1px solid var(--spatial-line);
    border-top: 26px solid var(--bg-secondary);
    background: var(--bg-secondary);
    box-shadow: 0 24px 50px rgba(0, 0, 0, .22);
}

.pjx-prose ul,
.pjx-prose ol {
    margin: 0 0 26px;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--spatial-line);
}

.pjx-prose li {
    position: relative;
    margin: 0;
    padding: 13px 0;
    padding-inline-start: 26px;
    border-bottom: 1px solid var(--spatial-line);
    font-size: 15px;
    color: var(--text-primary);
}

.pjx-prose li::before {
    content: "";
    position: absolute;
    top: 26px;
    inset-inline-start: 2px;
    width: 6px;
    height: 6px;
    background: var(--cyan);
    box-shadow: 0 0 10px var(--cyan);
}

.pjx-prose a {
    color: var(--cyan);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: var(--spatial-line);
    text-underline-offset: 4px;
}

.pjx-prose .catalog-guidance {
    margin: 48px 0 0;
    padding: 30px;
    border: 1px solid var(--spatial-line);
    border-top: 2px solid var(--cyan);
    border-radius: 0;
    background: var(--bg-secondary);
}

.pjx-prose.project-detail-content .catalog-guidance h2 {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.pjx-prose .catalog-link-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    border: 0;
}

.pjx-prose .catalog-link-list li {
    padding: 0;
    border: 0;
}

.pjx-prose .catalog-link-list li::before {
    display: none;
}

.pjx-prose .catalog-link-list a {
    display: inline-block;
    padding: 8px 14px;
    border: 1px solid var(--spatial-line);
    font-size: 13px;
    text-decoration: none;
}

.pjx-prose .catalog-link-list a:hover {
    border-color: var(--cyan);
}

.pjx-aside {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.pjx-features {
    padding: 24px;
    border: 1px solid var(--spatial-line);
    border-top: 2px solid var(--cyan);
    background: var(--bg-secondary);
}

.pjx-features h3 {
    margin: 0 0 14px;
    font-size: 17px;
    font-weight: 800;
    color: var(--text-primary);
}

.pjx-features ul {
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--spatial-line);
}

.pjx-features li {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 8px;
    align-items: baseline;
    padding: 10px 0;
    border-bottom: 1px solid var(--spatial-line);
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-primary);
}

.pjx-features .nx-button {
    width: 100%;
}

.pjx-toc {
    position: sticky;
    top: calc(var(--nav-height, 80px) + 30px);
    padding-top: 10px;
}

.pjx-aside-label {
    margin: 0 0 14px;
    font-size: 12px;
    font-weight: 700;
    color: var(--cyan);
}

.pjx-toc ol {
    max-height: calc(100vh - var(--nav-height, 80px) - 110px);
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
    border-inline-start: 1px solid var(--spatial-line);
    scrollbar-width: thin;
}

.pjx-toc a {
    position: relative;
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 8px;
    padding: 7px 0;
    padding-inline-start: 18px;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.6;
    text-decoration: none;
    transition: color .25s ease;
}

.pjx-toc a::before {
    content: "";
    position: absolute;
    inset-block: 6px;
    inset-inline-start: -1px;
    width: 2px;
    background: var(--cyan);
    scale: 1 0;
    transition: scale .3s ease;
}

.pjx-toc a span {
    font: 10px/2 monospace;
    direction: ltr;
}

.pjx-toc a:hover,
.pjx-toc a.is-active {
    color: var(--text-primary);
}

.pjx-toc a.is-active::before {
    scale: 1 1;
}

.pjx-toc a.is-active span {
    color: var(--cyan);
}

/* Gallery */
.pjx-gallery-chapter {
    background: linear-gradient(180deg, var(--spatial-glow), transparent 40%);
}

.pjx-gallery.project-gallery-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
}

.pjx-shot.project-gallery-item {
    border: 0;
    border-radius: 0;
    background: none;
    overflow: visible;
}

.pjx-shot.project-gallery-item:hover {
    box-shadow: none;
}

.pjx-shot:first-child {
    grid-column: span 2;
    grid-row: span 2;
}

.pjx-shot .project-gallery-trigger {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid var(--spatial-line);
    background: var(--bg-secondary);
    transition: border-color .35s ease, transform .45s cubic-bezier(.2, .7, .2, 1);
}

.pjx-shot-media {
    display: block;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.pjx-shot:first-child .pjx-shot-media {
    position: relative;
    min-height: 240px;
}

.pjx-shot:first-child.project-gallery-item img {
    position: absolute;
    inset: 0;
    height: 100%;
    aspect-ratio: auto;
}

.pjx-shot.project-gallery-item img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: 50% 0%;
    transition: object-position 3s cubic-bezier(.3, .1, .2, 1);
}

.pjx-shot-zoom {
    position: absolute;
    bottom: 12px;
    inset-inline-end: 12px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    background: var(--cyan);
    color: var(--bg-primary);
    font-size: 16px;
    opacity: 0;
    scale: .7;
    transition: opacity .3s ease, scale .3s ease;
}

.pjx-shot .project-gallery-trigger:hover,
.pjx-shot .project-gallery-trigger:focus-visible {
    border-color: var(--cyan);
    transform: translateY(-4px);
}

.pjx-shot .project-gallery-trigger:hover img {
    object-position: 50% 100%;
}

.pjx-shot .project-gallery-trigger:hover .pjx-shot-zoom,
.pjx-shot .project-gallery-trigger:focus-visible .pjx-shot-zoom {
    opacity: 1;
    scale: 1;
}

.pjx-shot figcaption,
.pjx-shot.project-gallery-item figcaption {
    padding: 12px 0 0;
    border: 0;
    font-size: 13px;
    color: var(--text-secondary);
}

/* Related articles */
.pjx-articles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 40px;
    border-top: 1px solid var(--spatial-line);
}

.pjx-article-item {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 28px 0 30px;
    color: inherit;
    text-decoration: none;
}

.pjx-article-media {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    margin-bottom: 6px;
    border: 1px solid var(--spatial-line);
    background: var(--bg-secondary);
}

.pjx-article-media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: scale .6s cubic-bezier(.2, .7, .2, 1);
}

.pjx-article-item:hover .pjx-article-media img {
    scale: 1.05;
}

.pjx-article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    font-size: 12px;
    color: var(--text-muted);
}

.pjx-article-meta span + span {
    padding-inline-start: 12px;
    border-inline-start: 1px solid var(--spatial-line);
}

.pjx-article-meta span:first-child {
    color: var(--cyan);
}

.pjx-article-item strong {
    font-size: 17px;
    line-height: 1.6;
    color: var(--text-primary);
    transition: color .3s ease;
}

.pjx-article-item:hover strong {
    color: var(--cyan);
}

.pjx-article-item em {
    font-style: normal;
    font-size: 14px;
    line-height: 1.8;
    color: var(--text-secondary);
}

/* CTA */
.pjx-cta {
    border-bottom: 0;
}

.pjx-cta-box {
    position: relative;
    padding: clamp(36px, 5vw, 64px);
    border: 1px solid var(--spatial-line);
    border-top: 2px solid var(--cyan);
    background:
        radial-gradient(circle at 85% 20%, var(--spatial-glow), transparent 50%),
        var(--bg-secondary);
}

.pjx-cta-box .pjx-heading {
    margin-bottom: 14px;
}

@media (max-width: 1024px) {
    .pjx-hero-grid,
    .pjx-layout,
    .pjx-guide-grid,
    .pjx-tile--featured {
        grid-template-columns: minmax(0, 1fr);
    }

    .pjx-deck {
        height: clamp(260px, 60vw, 420px);
        margin-top: 20px;
    }

    .pjx-stage,
    [dir="ltr"] .pjx-stage {
        transform: none;
        box-shadow: none;
    }

    .pjx-grid,
    .pjx-gallery.project-gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pjx-tile--featured .pjx-tile-body {
        padding-top: 4px;
    }

    .pjx-toc {
        display: none;
    }

    .pjx-facts {
        grid-auto-flow: row;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 28px;
        border-top: 0;
    }

    .pjx-facts > div {
        padding-inline: 0;
        border-inline-start: 0;
        border-top: 1px solid var(--spatial-line);
    }

    .pjx-facts-tags {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .pjx-hero {
        padding-top: calc(var(--nav-height, 70px) + 28px);
    }

    .pjx-hero-grid {
        padding-bottom: 40px;
    }

    .pjx-breadcrumb {
        margin-bottom: 24px;
    }

    .pjx-lede {
        font-size: 15px;
    }

    .pjx-deck-card {
        inset-inline: 10% 0;
    }

    .pjx-facts dd {
        font-size: 28px;
    }

    .pjx-facts > div {
        padding-block: 20px 22px;
    }

    .pjx-grid,
    .pjx-articles,
    .pjx-gallery.project-gallery-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .pjx-shot:first-child {
        grid-column: auto;
        grid-row: auto;
    }

    .pjx-shot:first-child .pjx-shot-media {
        min-height: 0;
    }

    .pjx-shot:first-child.project-gallery-item img {
        position: static;
        height: auto;
        aspect-ratio: 16 / 10;
    }

    .pjx-filters {
        width: 100%;
    }

    .pjx-filters button {
        flex: 1;
        justify-content: center;
        padding: 12px 10px;
        font-size: 13px;
    }

    .pjx-article-item {
        border-bottom: 1px solid var(--spatial-line);
    }

    .pjx-section-head,
    .pjx-work-head {
        margin-bottom: 32px;
    }

    .pjx-prose img {
        border-top-width: 18px;
    }

    .pjx-cta-box {
        padding: 30px 20px;
    }
}

/* Motion: !important is needed to override the blanket animation kill in mobile.css. */
@keyframes pjx-rise {
    from { opacity: 0; translate: 0 26px; }
    to { opacity: 1; translate: 0 0; }
}

@keyframes pjx-stage-in {
    from { opacity: 0; translate: 40px 30px; scale: .94; }
    to { opacity: 1; translate: 0 0; scale: 1; }
}

@keyframes pjx-deck-in {
    from { opacity: 0; translate: 0 60px; }
    to { opacity: var(--pjx-o, 1); translate: 0 0; }
}

@keyframes pjx-float {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -10px; }
}

@keyframes pjx-scan {
    0% { transform: translateY(-120%); opacity: 0; }
    12% { opacity: 1; }
    70% { opacity: 1; }
    100% { transform: translateY(520%); opacity: 0; }
}

@keyframes pjx-dot {
    0%, 70%, 100% { background: transparent; box-shadow: none; }
    20% { background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
}

@keyframes pjx-grid-drift {
    from { background-position: 0 0, 0 0, 0 0; }
    to { background-position: 0 0, 56px 56px, 56px 56px; }
}

@keyframes pjx-glow {
    0%, 100% { opacity: .55; scale: 1; }
    50% { opacity: 1; scale: 1.15; }
}

@keyframes pjx-line {
    from { scale: 0 1; }
    to { scale: 1 1; }
}

@keyframes pjx-refresh {
    from { opacity: 0; translate: 0 18px; scale: .98; }
    to { opacity: 1; translate: 0 0; scale: 1; }
}

.has-motion .pjx-prose.reveal-ready,
.has-motion .pjx-shot.reveal-ready {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: no-preference) {
    .pjx-hero {
        animation: pjx-grid-drift 24s linear infinite !important;
    }

    .pjx-hero::before {
        animation: pjx-glow 7s ease-in-out infinite !important;
    }

    .pjx-hero-copy > * {
        animation: pjx-rise .8s cubic-bezier(.2, .7, .2, 1) both !important;
    }

    .pjx-hero-copy > :nth-child(2) { animation-delay: .08s !important; }
    .pjx-hero-copy > :nth-child(3) { animation-delay: .16s !important; }
    .pjx-hero-copy > :nth-child(4) { animation-delay: .24s !important; }
    .pjx-hero-copy > :nth-child(5) { animation-delay: .32s !important; }
    .pjx-hero-copy > :nth-child(6) { animation-delay: .4s !important; }
    .pjx-hero-copy > :nth-child(7) { animation-delay: .48s !important; }

    .pjx-kicker span::before {
        transform-origin: right;
        animation: pjx-line .9s .3s cubic-bezier(.2, .7, .2, 1) both !important;
    }

    .pjx-stage {
        animation:
            pjx-stage-in 1.1s .15s cubic-bezier(.2, .7, .2, 1) both,
            pjx-float 6s 1.3s ease-in-out infinite !important;
        transition: transform .45s cubic-bezier(.2, .7, .2, 1) !important;
    }

    .pjx-stage-media::after {
        animation: pjx-scan 5.5s 1.4s ease-in-out infinite !important;
    }

    .pjx-bar i {
        animation: pjx-dot 2.4s ease-in-out infinite !important;
    }

    .pjx-bar i:nth-child(2) { animation-delay: .3s !important; }
    .pjx-bar i:nth-child(3) { animation-delay: .6s !important; }

    .pjx-deck-card {
        animation: pjx-deck-in 1s cubic-bezier(.2, .7, .2, 1) both !important;
        transition: transform .6s cubic-bezier(.2, .7, .2, 1) !important;
    }

    .pjx-deck-card--1 { animation-delay: .5s !important; }
    .pjx-deck-card--2 { --pjx-o: .7; animation-delay: .3s !important; }
    .pjx-deck-card--3 { --pjx-o: .4; animation-delay: .1s !important; }

    .pjx-facts > div {
        animation: pjx-rise .8s cubic-bezier(.2, .7, .2, 1) both !important;
    }

    .pjx-facts > div:nth-child(1) { animation-delay: .45s !important; }
    .pjx-facts > div:nth-child(2) { animation-delay: .55s !important; }
    .pjx-facts > div:nth-child(3) { animation-delay: .65s !important; }
    .pjx-facts > div:nth-child(4) { animation-delay: .75s !important; }

    .pjx-tile-stage,
    .pjx-shot .project-gallery-trigger {
        transition: border-color .35s ease, transform .45s cubic-bezier(.2, .7, .2, 1), box-shadow .45s ease !important;
    }

    .pjx-tile-media img,
    .pjx-shot.project-gallery-item img {
        transition: object-position 3.2s cubic-bezier(.3, .1, .2, 1) !important;
    }

    .pjx-tile-media::after,
    .pjx-shot-zoom {
        transition: opacity .3s ease, translate .35s ease, scale .3s ease !important;
    }

    .pjx-filters button::after {
        transition: scale .35s cubic-bezier(.2, .7, .2, 1) !important;
    }

    .pjx-toc a::before {
        transition: scale .3s ease !important;
    }

    .pjx-cell.is-refresh {
        animation: pjx-refresh .6s cubic-bezier(.2, .7, .2, 1) var(--pjx-f, 0ms) both !important;
    }

    .pjx-motion .pjx-chapter-no,
    .pjx-motion .pjx-heading,
    .pjx-motion .pjx-statement,
    .pjx-motion .pjx-prose h2,
    .pjx-motion .pjx-prose img,
    .pjx-motion .pjx-cell,
    .pjx-motion .pjx-shot,
    .pjx-motion .pjx-article-item,
    .pjx-motion .pjx-features,
    .pjx-motion .pjx-cta-box {
        opacity: 0;
        translate: 0 28px;
        transition:
            opacity .8s cubic-bezier(.2, .7, .2, 1) var(--pjx-d, 0ms),
            translate .8s cubic-bezier(.2, .7, .2, 1) var(--pjx-d, 0ms) !important;
    }

    .pjx-motion .is-in.pjx-chapter-no,
    .pjx-motion .is-in.pjx-heading,
    .pjx-motion .is-in.pjx-statement,
    .pjx-motion .pjx-prose h2.is-in,
    .pjx-motion .pjx-prose img.is-in,
    .pjx-motion .pjx-cell.is-in,
    .pjx-motion .pjx-shot.is-in,
    .pjx-motion .pjx-article-item.is-in,
    .pjx-motion .pjx-features.is-in,
    .pjx-motion .pjx-cta-box.is-in {
        opacity: 1;
        translate: 0 0;
    }

    .pjx-motion .pjx-chapter-no span::before {
        scale: 0 1;
        transform-origin: right;
        transition: scale 1s .2s cubic-bezier(.2, .7, .2, 1) !important;
    }

    .pjx-motion .pjx-chapter-no.is-in span::before {
        scale: 1 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pjx-stage,
    [dir="ltr"] .pjx-stage,
    .pjx-deck-card {
        transform: none;
    }
}