.portfolio-case { padding: clamp(3rem, 6vw, 6rem) 0; background: var(--paper); color: var(--ink); }
.portfolio-hero { min-height: min(70svh, 700px); padding-bottom: clamp(3rem, 6vw, 6rem); }
.portfolio-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: clamp(2rem, 4vw, 4rem); }
.portfolio-case h2 { font-size: clamp(4rem, 9vw, 9rem); font-weight: 450; letter-spacing: -.075em; line-height: .95; margin: 1.5rem 0; }
.portfolio-case p { max-width: 40rem; line-height: 1.65; color: var(--muted-dark); }
.portfolio-case .portfolio-lead { font-size: clamp(1.3rem, 2vw, 2rem); color: var(--ink); margin-bottom: .5rem; }
.portfolio-case .primary-button { flex: 0 0 auto; border-color: var(--ink); background: var(--ink); color: var(--paper); }
.portfolio-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); align-items: start; }
.portfolio-screen { min-width: 0; margin: 0; }
.portfolio-screen-wide { grid-column: 1 / -1; }
.portfolio-screen picture { display: block; }
.portfolio-screen img { display: block; width: 100%; height: auto; max-width: 100%; border-radius: 32px; }
.portfolio-screen:not(.portfolio-screen-wide) img { max-width: 680px; margin-inline: auto; }
.portfolio-screen:not(.portfolio-screen-wide) figcaption { max-width: 680px; margin-inline: auto; }
.portfolio-case figcaption { margin-top: .8rem; font-size: .85rem; line-height: 1.5; color: var(--muted-dark); }
@media (max-width: 800px) { .portfolio-heading { display: block; } .portfolio-heading .primary-button { margin-top: 1rem; } .portfolio-gallery { grid-template-columns: 1fr; } .portfolio-screen-wide { grid-column: auto; } }