/* Website work must always read as a complete desktop viewport, never as a cropped photo. */
.website-portfolio .project-visual{
 display:block!important;
 width:100%!important;
 height:auto!important;
 min-height:0!important;
 aspect-ratio:auto!important;
 padding:38px 0 0!important;
 overflow:hidden!important;
 background:#11120f!important;
}
.website-portfolio .project-visual img{
 position:relative!important;
 inset:auto!important;
 display:block!important;
 width:100%!important;
 height:auto!important;
 aspect-ratio:16/9!important;
 margin:0!important;
 border-radius:0 0 18px 18px!important;
 object-fit:contain!important;
 object-position:top center!important;
 background:#11120f!important;
 transform:none!important;
}
.website-portfolio .project-visual:hover img{transform:none!important}
.website-portfolio .project-visual:after{inset:38px 0 0!important}
.hero-collage .float-card img{object-fit:contain!important;object-position:top center!important;background:#11120f!important}
.pb-project-grid img{object-fit:contain!important;object-position:top center!important;background:#11120f!important}

/* The dedicated portfolio archive uses the same complete desktop viewport treatment. */
.archive-grid{grid-template-columns:minmax(0,1fr)!important;gap:clamp(80px,9vw,150px)!important}
.archive-card,.archive-card:nth-child(3n){grid-column:auto!important;min-width:0!important}
.archive-card>a{display:block!important}
.archive-image,.archive-card:nth-child(3n) .archive-image{
 position:relative!important;width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;
 aspect-ratio:auto!important;padding-top:38px!important;border-radius:22px!important;background:#11120f!important;
 box-shadow:0 35px 80px #211a0d18!important;
}
.archive-image img{
 position:relative!important;display:block!important;width:100%!important;height:auto!important;aspect-ratio:16/9!important;
 object-fit:contain!important;object-position:top center!important;background:#11120f!important;transform:none!important;
}
.archive-card:hover .archive-image img{transform:none!important}
.archive-browser-chrome{
 position:absolute!important;z-index:3;inset:0 0 auto!important;height:38px!important;padding:0 16px!important;
 display:flex!important;align-items:center!important;gap:7px!important;border-radius:18px 18px 0 0!important;
 background:#1a1a18!important;color:#aaa!important;
}
.archive-browser-chrome i{display:block!important;width:8px!important;height:8px!important;border-radius:50%!important;background:#e77065!important}
.archive-browser-chrome i:nth-child(2){background:#e4bd54!important}
.archive-browser-chrome i:nth-child(3){background:#66bd76!important}
.archive-browser-chrome em{
 position:absolute!important;left:50%!important;max-width:55%!important;transform:translateX(-50%)!important;
 overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;color:#aaa!important;
 font:normal 10px/1 Arial,sans-serif!important;
}
.archive-image>b{z-index:4!important;top:56px!important}
.archive-copy{
 display:grid!important;grid-template-columns:minmax(240px,.75fr) minmax(280px,1.25fr)!important;
 column-gap:5vw!important;align-items:start!important;padding-top:24px!important;
}
.archive-copy small,.archive-copy h2{grid-column:1!important}
.archive-copy p{
 grid-column:2!important;grid-row:1/3!important;margin-top:0!important;padding-top:4px!important;
 font-size:1.05rem!important;line-height:1.65!important;
}

@media(max-width:900px){
 .website-portfolio .project-card,.website-portfolio .project-card:nth-child(even){display:grid!important;grid-template-columns:minmax(0,1fr)!important}
 .website-portfolio .project-visual{width:100%!important}
}
@media(max-width:600px){
 .website-portfolio .project-visual{width:calc(100% + 24px)!important;margin-left:-12px!important;padding-top:32px!important;border-radius:12px!important}
 .website-portfolio .project-visual img{aspect-ratio:16/9!important;height:auto!important;border-radius:0 0 10px 10px!important}
 .website-portfolio .project-visual:after{inset:32px 0 0!important}
 .website-portfolio .project-copy{padding-inline:0!important}
 .website-portfolio .case-arrow{top:44px!important}
 .archive{padding-inline:20px!important}
 .archive-image,.archive-card:nth-child(3n) .archive-image{
  width:calc(100% + 24px)!important;margin-left:-12px!important;padding-top:32px!important;border-radius:12px!important;
 }
 .archive-image img{aspect-ratio:16/9!important;border-radius:0 0 10px 10px!important}
 .archive-browser-chrome{height:32px!important;border-radius:10px 10px 0 0!important}
 .archive-browser-chrome em{display:none!important}
 .archive-image>b{top:44px!important;width:46px!important;height:46px!important}
 .archive-copy{grid-template-columns:minmax(0,1fr)!important;padding-top:18px!important}
 .archive-copy small,.archive-copy h2,.archive-copy p{grid-column:1!important;grid-row:auto!important}
 .archive-copy p{padding-top:0!important}
}