.project-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.7fr); gap: var(--page-gutter); align-items: start; }
.project-info { position: sticky; top: var(--page-title-top); }
.project-role { margin: 0 0 var(--project-space); }
.project-credits { margin: 0; font-size: 12px; line-height: 1.6; }
.project-credits div { margin-bottom: 12px; }
.project-credits dt { font-weight: 600; }
.project-credits dd { margin: 0; color: #666; }
.project-sections { display: grid; gap: 12px; margin: var(--project-space) 0; text-transform: uppercase; font-size: 10px; font-weight: 600; }
.project-sections a::before { content: "→"; margin-right: 10px; }
.project-back { display: inline-block; margin: 0 0 16px; font-size: 10px; text-transform: uppercase; }
.project-gallery { min-width: 0; }
.project-gallery section { scroll-margin-top: var(--page-title-top); margin-bottom: var(--project-space); }
.project-gallery h2 { margin: 0 0 12px; text-transform: uppercase; font-size: 12px; font-weight: 500; }
.project-media { display: grid; place-items: center; margin: 0; background: var(--project-placeholder); color: #ddd; aspect-ratio: 2.1; overflow: hidden; }
.project-media figcaption { padding: 12px; text-align: center; font: 9px "DM Mono", monospace; text-transform: uppercase; letter-spacing: .1em; }
.project-media img, .project-media video { width: 100%; height: 100%; object-fit: cover; }
.project-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--project-gap); }
.project-media--square { aspect-ratio: 1; }
.project-media--portrait { aspect-ratio: 4 / 5; }
.project-media:has(.project-video-frame) { aspect-ratio: auto; background: var(--paper); color: var(--ink); }
.project-video-frame { width: 100%; aspect-ratio: 16 / 9; background: var(--project-placeholder); }
.project-video-frame iframe, .project-video-frame video { display: block; width: 100%; height: 100%; border: 0; object-fit: contain; }
.project-pending { color: #666; font-size: 12px; line-height: 1.6; }
@media (max-width: 760px) { .project-layout { grid-template-columns: 1fr; }.project-info { position: static; }.project-sections { display: flex; flex-wrap: wrap; gap: 16px; }.project-credits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }