/* Every illustrated project keeps its copy on the left and preview on the right. */
.portfolio-project-card{container-type:inline-size}
.portfolio-project-card:has(.portfolio-card-visual)>.portfolio-card-layout{display:grid!important;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:center}
.portfolio-card-copy,.portfolio-card-visual{min-width:0}
.portfolio-card-copy{order:1!important}
.portfolio-card-visual{order:2!important}
.portfolio-card-actions:has(>.project-intro-link)>:is(a,button){width:200px;max-width:100%;flex:0 0 auto;box-sizing:border-box;padding-left:16px;padding-right:16px}

/* A card's own width selects this layout, including narrow desktop windows. */
.portfolio-project-card[data-compact="true"]{aspect-ratio:1;min-height:0!important;--card-fit:1}
.portfolio-project-card[data-compact="true"]>.portfolio-card-layout{position:absolute;inset:0;width:100%;height:100%;box-sizing:border-box;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr);padding:clamp(12px,4cqw,30px)!important;gap:clamp(10px,3cqw,24px)!important}
.portfolio-project-card[data-compact="true"] .portfolio-card-copy{align-self:center;height:max-content;min-height:0;justify-content:center!important;overflow:visible;overflow-wrap:anywhere}
.portfolio-project-card[data-compact="true"] .portfolio-card-copy>*{flex:none}
.portfolio-project-card[data-compact="true"] .portfolio-card-copy h2{font-size:calc(clamp(17px,5cqw,32px)*var(--card-fit))!important;line-height:1.2!important;letter-spacing:0!important;margin:0 0 calc(8px*var(--card-fit))!important;overflow-wrap:anywhere}
.portfolio-project-card[data-compact="true"] .portfolio-card-copy>p{font-size:calc(clamp(8px,2.6cqw,14px)*var(--card-fit))!important;line-height:1.5!important;letter-spacing:0!important;margin:0 0 calc(10px*var(--card-fit))!important;overflow-wrap:anywhere}
.portfolio-project-card[data-compact="true"] .portfolio-card-detail{order:3!important;font-size:calc(clamp(8px,2.7cqw,14px)*var(--card-fit))!important;line-height:1.6!important;letter-spacing:0!important;margin:calc(9px*var(--card-fit)) 0 0!important;overflow-wrap:anywhere}
.portfolio-project-card[data-compact="true"] .portfolio-card-detail :is(p,span){font-size:inherit!important;line-height:inherit!important;letter-spacing:inherit!important}
.portfolio-project-card[data-compact="true"] .portfolio-card-detail p{margin:0!important}
.portfolio-project-card[data-compact="true"] .portfolio-card-detail p+p{margin-top:.28em!important}
.portfolio-project-card[data-compact="true"] .portfolio-card-actions{order:2!important;display:flex;flex-direction:column!important;flex-wrap:nowrap!important;width:100%;gap:calc(6px*var(--card-fit))!important;margin:calc(4px*var(--card-fit)) 0 0!important}
.portfolio-project-card[data-compact="true"] .portfolio-card-actions>:is(a,button){width:100%!important;max-width:100%;min-width:0;min-height:clamp(26px,7.5cqw,40px)!important;padding:4px 3px!important;font-size:clamp(9px,3cqw,14px)!important;line-height:1.25!important;gap:5px!important;box-sizing:border-box;overflow-wrap:anywhere}
.portfolio-project-card[data-compact="true"] .portfolio-card-actions svg{width:14px;height:14px;flex-shrink:0}
.portfolio-project-card[data-compact="true"] .portfolio-project-badge{font-size:calc(9px*var(--card-fit));line-height:1.4;padding:calc(3px*var(--card-fit)) calc(7px*var(--card-fit));margin:0 0 calc(7px*var(--card-fit))}
.portfolio-project-card[data-compact="true"] .portfolio-card-visual{align-self:center;width:100%;height:100%;min-height:0;display:flex;align-items:center;justify-content:center}
.portfolio-project-card[data-compact="true"] .portfolio-card-frame{max-width:100%!important;width:100%;flex:none}
.portfolio-project-card[data-compact="true"] .portfolio-card-frame:hover{transform:none}