.project-showcase{position:relative;display:block;isolation:isolate;aspect-ratio:16/11;overflow:hidden;background:radial-gradient(ellipse at 30% 20%,#f7f6ee 0%,#dce6df 75%);border-block:1px solid #a6bfba70;color:#202e2d;container-type:inline-size}
.project-showcase::before{content:"";position:absolute;width:70%;aspect-ratio:1;border:1px solid #a6bfba66;border-radius:50%;right:-20%;top:-25%;z-index:-1}
.showcase-browser{position:absolute;top:11%;left:6%;width:86%;border:1px solid #a6bfba;border-radius:8px;overflow:hidden;background:#fafaf7;box-shadow:0 18px 35px #202e2d20;transform:rotate(-1.5deg);transition:transform .35s ease}
.showcase-toolbar{display:flex;align-items:center;gap:4px;padding:9px 12px;background:#f5f5ef;border-bottom:1px solid #202e2d12}
.showcase-toolbar i{width:5px;height:5px;border-radius:50%;background:#a6bfba}
.showcase-toolbar span{margin-left:9px;font:500 9px/1.2 Arial,sans-serif;letter-spacing:.08em;color:#4b625e}
.showcase-browser>img,.showcase-browser>picture>img{display:block;width:100%;aspect-ratio:1.8;object-fit:cover;object-position:top}
.showcase-detail{position:absolute;right:4%;bottom:12%;width:49%;background:#fafaf7;border:1px solid #a6bfba;border-radius:7px;overflow:hidden;box-shadow:0 14px 28px #202e2d30;transform:rotate(2deg);transition:transform .35s ease}
.showcase-detail-label{display:block;padding:9px 12px;font-size:12px;font-weight:600;border-bottom:1px solid #a6bfba55;background:#fafaf7}
.showcase-crop{display:block;position:relative;aspect-ratio:1.85;overflow:hidden}
.showcase-crop img{position:absolute;display:block;width:180%;max-width:none;height:auto;left:-19%;top:-28%}
.showcase-portal .showcase-crop img{width:190%;left:-24%;top:-75%}
.showcase-commissions .showcase-crop img{width:165%;left:-45%;top:-55%}
.showcase-caption{position:absolute;left:6%;bottom:4%;font-size:10px;letter-spacing:.04em;color:#4b625e}
.project-showcase:hover .showcase-browser,.project-showcase:focus-visible .showcase-browser{transform:translateY(-3px) rotate(0)}
.project-showcase:hover .showcase-detail,.project-showcase:focus-visible .showcase-detail{transform:translateY(-5px) rotate(0)}
.project-showcase:focus-visible{outline:3px solid #226661;outline-offset:3px}
.portfolio-page .portfolio-card-trial{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.portfolio-page .portfolio-project.portfolio-trial-card{padding:16px;overflow:hidden}
.portfolio-page .portfolio-trial-card .portfolio-project-heading{margin:0 0 14px;min-height:91px}
.portfolio-page .portfolio-trial-card .portfolio-summary h2{font-size:24px;line-height:1.08}
.portfolio-page .portfolio-trial-card .portfolio-summary .wc-eyebrow{font-size:9px;letter-spacing:.08em;margin-bottom:10px}
.portfolio-page .portfolio-trial-card .portfolio-summary>p{font-size:14px;line-height:1.45;margin:14px 0 18px}
.portfolio-page .portfolio-trial-card .portfolio-results{padding:14px 0 0;gap:10px;margin-inline:0}
.portfolio-page .portfolio-trial-card .portfolio-results dd{font-size:26px}
.portfolio-page .portfolio-trial-card .portfolio-results dt{font-size:11px;margin-top:6px}
.portfolio-page .portfolio-trial-card .wc-text-link{font-size:13px;margin:14px 0 0}
.portfolio-page .portfolio-trial-card .portfolio-card-art{margin-inline:0;padding:0;aspect-ratio:16/11;display:flex;align-items:center;overflow:hidden}
.portfolio-page .portfolio-trial-card .portfolio-card-art svg{width:100%;height:auto}
.portfolio-page .portfolio-intro{padding-block:20px}
.portfolio-page .portfolio-intro h1{font-size:clamp(30px,3vw,42px)}
.portfolio-page .portfolio-intro .wc-eyebrow{margin-bottom:12px}
@media(min-width:1101px){.showcase-toolbar{padding:5px 7px}.showcase-toolbar span{font-size:7px}.showcase-detail-label{font-size:9px;padding:6px}.showcase-caption{font-size:7px}}
@media(max-width:1100px){.portfolio-page .portfolio-card-trial{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.portfolio-page .portfolio-card-trial{grid-template-columns:1fr}.portfolio-page .portfolio-trial-card .portfolio-project-heading{min-height:0}}
@media(max-width:600px){.showcase-toolbar{padding:6px 8px}.showcase-detail-label{font-size:10px;padding:6px 8px}.showcase-caption{font-size:8px}.showcase-toolbar span{font-size:8px}}
@media(prefers-reduced-motion:reduce){.showcase-browser,.showcase-detail{transition:none}.project-showcase:hover .showcase-browser,.project-showcase:hover .showcase-detail{transform:none}}