/* Alternating project rows; images lead on narrow screens. */
.portfolio-intro { max-width: 100%; margin-bottom: 56px; }
.portfolio-intro h2 { font-size: clamp(2rem, 4vw, 3.2rem); margin: 8px 0 18px; }
.portfolio-intro > p:not(.eyebrow) { color: var(--muted); max-width: 100%; }
.portfolio-projects .portfolio-feature { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-bottom: 64px; }
.portfolio-projects .showcase { min-height: 0; }
.portfolio-projects .showcase img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 16px; }
.portfolio-reversed .showcase { grid-column: 2; grid-row: 1; }
.portfolio-reversed .case-copy { grid-column: 1; grid-row: 1; }
@media (max-width: 800px) {
 .portfolio-projects .portfolio-feature { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-bottom: 44px; }
 .portfolio-reversed .showcase, .portfolio-reversed .case-copy { grid-column: auto; grid-row: auto; }
 .portfolio-projects .case-copy { padding: 8px 4px 16px; }
}

/* Compact spacing and a quiet violet/blue wash on the Work page. */
.work-page { background: radial-gradient(ellipse at 0% 35%, rgba(100,46,180,.10), transparent 48%), radial-gradient(ellipse at 100% 65%, rgba(0,170,220,.08), transparent 48%), var(--bg); }
.work-page main { position: relative; isolation: isolate; }
.work-page main::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(rgba(5,7,14,.91), rgba(5,7,14,.94)), url("../images/work-color-ribbons.jpg") center top / 1440px auto repeat-y; }
.work-page .page-hero { padding-bottom: 32px; }
.work-page .portfolio-projects { padding-top: 32px; padding-bottom: 40px; }
.work-page .portfolio-intro { margin-bottom: 32px; }
.work-page .portfolio-projects .portfolio-feature { margin-bottom: 40px; }
.work-page .portfolio-projects .portfolio-feature:last-child { margin-bottom: 0; }
@media (max-width: 800px) {
 .work-page .page-hero { padding-bottom: 24px; }
 .work-page .portfolio-projects { padding-top: 24px; }
 .work-page .portfolio-intro { margin-bottom: 26px; }
 .work-page .portfolio-projects .portfolio-feature { margin-bottom: 32px; }
}

/* Close the gap between the last project and the following copy. */
.work-page .portfolio-projects { padding-bottom: 20px; }
.work-page .portfolio-projects + .section { padding-top: 24px; padding-bottom: 48px; }