/* Approved playful tilt, with the proportions of the interaction preview. */
.portfolio-redesign .outcome-list,.portfolio-redesign .highlights-grid{grid-template-columns:repeat(2,minmax(0,289px));gap:28px;justify-content:space-between}
.portfolio-redesign .outcome-row,.portfolio-redesign .outcome-row:last-child{height:261px;padding:12px;gap:14px;border-radius:20px;corner-shape:round;box-shadow:none;transition:transform .3s cubic-bezier(.2,.8,.2,1);transform:none!important}
.portfolio-redesign .outcome-row::after{border-radius:20px;corner-shape:round}
.portfolio-redesign .outcome-row .project-cover,.portfolio-redesign .outcome-row:last-child .project-cover{height:150px;aspect-ratio:auto;border-radius:12px;corner-shape:round}
.portfolio-redesign .outcome-row .outcome-copy,.portfolio-redesign .outcome-row:last-child .outcome-copy{padding:0;gap:8px;flex:1}
.portfolio-redesign .outcome-title{font-size:16px;line-height:1.3;min-height:41.6px}
.portfolio-redesign .project-tags{flex-direction:row;align-items:center;gap:8px;margin:0;flex-wrap:wrap}
.portfolio-redesign .project-tags>span{font-size:10px;line-height:14px;font-weight:400}
.portfolio-redesign .project-tags>span:last-child{padding:3px 7px}
.portfolio-redesign .outcome-row:is(:hover,:focus-visible){transform:rotate(-1deg) translateY(-3px)!important;box-shadow:none}
.portfolio-redesign .outcome-row:is(:hover,:focus-visible)::after{border-color:color-mix(in srgb,var(--ink) 14%,transparent)}
.portfolio-redesign .outcome-row:is(:hover,:focus-visible) .case-thumbnail{transform:none}
.portfolio-redesign .highlight-card{border-radius:20px;padding:12px;gap:14px;box-shadow:none;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.portfolio-redesign .highlight-copy h3{font-size:16px;line-height:1.3;min-height:41.6px}
.portfolio-redesign .highlight-copy>p{font-size:12px;line-height:1.5}
.portfolio-redesign .highlight-card:is(:hover,:focus-visible){transform:rotate(-1deg) translateY(-3px);border-color:color-mix(in srgb,var(--ink) 14%,transparent);box-shadow:none}
.portfolio-redesign .comment-image-button{border-radius:15px;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.portfolio-redesign .comment-image-button:is(:hover,:focus-visible){transform:rotate(.7deg) translateY(-2px)}
.portfolio-redesign .personal-photo-strip{padding:10px 0;margin-bottom:-10px}
.portfolio-redesign .personal-photo-strip figure{flex-basis:188px;width:188px;border-radius:20px;transition:transform .3s cubic-bezier(.2,.8,.2,1);transform-origin:center}
.portfolio-redesign .personal-photo-strip img{height:250px}
.portfolio-redesign .personal-photo-strip figure:hover{transform:rotate(2deg) translateY(-3px)}
.portfolio-redesign .personal-photo-strip .photo-tag{left:14px;bottom:14px;font-size:14px;font-weight:400;padding:8px 13px}
@media(max-width:700px){
 .portfolio-redesign .outcome-list,.portfolio-redesign .highlights-grid{grid-template-columns:minmax(0,1fr);justify-items:center;gap:28px}
 .portfolio-redesign .outcome-row,.portfolio-redesign .outcome-row:last-child{width:100%;max-width:360px;height:301px}
 .portfolio-redesign .outcome-row .project-cover,.portfolio-redesign .outcome-row:last-child .project-cover{height:190px}
 .portfolio-redesign .highlight-card,.portfolio-redesign .highlight-comments{width:100%;max-width:360px}
 .portfolio-redesign .personal-photo-strip figure{flex-basis:170px;width:170px}
 .portfolio-redesign .personal-photo-strip img{height:226px}
}
@media(prefers-reduced-motion:reduce){
 .portfolio-redesign .outcome-row,.portfolio-redesign .highlight-card,.portfolio-redesign .comment-image-button,.portfolio-redesign .personal-photo-strip figure{transition:none}
 .portfolio-redesign .outcome-row:is(:hover,:focus-visible){transform:none!important}
 .portfolio-redesign .highlight-card:is(:hover,:focus-visible),.portfolio-redesign .comment-image-button:is(:hover,:focus-visible),.portfolio-redesign .personal-photo-strip figure:hover{transform:none}
}

/* Additional memories in the continuous About photo strip. */
.portfolio-redesign .personal-photo-strip .photo-cat{flex-basis:333px;width:333px}
@media(max-width:700px){.portfolio-redesign .personal-photo-strip .photo-cat{flex-basis:301px;width:301px}}

/* Highlight typography, with the post link anchored to the card bottom. */
.portfolio-redesign .highlight-card .highlight-copy{flex:0 0 128px;gap:4px}
.portfolio-redesign .highlight-copy h3{font-size:20px;line-height:1.3;min-height:0;margin:0}
.portfolio-redesign .highlight-copy>p{font-size:14px;line-height:1.5;margin:0}
.portfolio-redesign .highlight-copy .highlight-link{margin-top:auto}
@media(max-width:700px){.portfolio-redesign .highlight-card .highlight-copy{flex-basis:auto;min-height:128px}}