/* Our work page: before/after screenshot pairs and the details under them. */
.work-pair { display: grid; gap: var(--space-6); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .work-pair { grid-template-columns: 1fr 1fr; } }
.work-fig { margin: 0; display: grid; gap: var(--space-3); min-width: 0; }
.work-fig a { display: block; border-radius: var(--radius-lg); }
.work-shot { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; border-radius: var(--radius-lg); border: var(--hairline); background: var(--color-surface-2); }
.work-fig a:hover .work-shot { box-shadow: var(--shadow-glow); }
.work-label { font-family: var(--font-mono); font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; }
.work-label--before { color: var(--color-text-muted); }
.work-label--after { color: var(--color-primary); }
.work-fig--none p { margin: 0; padding: var(--space-6); border: 1px dashed var(--color-border); border-radius: var(--radius-lg); color: var(--color-text-muted); aspect-ratio: 16 / 10; display: grid; place-items: center; text-align: center; }
.work-detail { display: grid; gap: var(--space-8); margin-top: var(--space-10); }
@media (min-width: 900px) { .work-detail { grid-template-columns: 1fr 1fr; } }
.work-detail h3 { margin: 0 0 var(--space-4); }
.work-open { margin-top: var(--space-6); }
.work-note { margin-top: var(--space-3); font-size: .9375rem; }