/* The photograph is the surface. Project details appear within it, never in a separate box. */
.archive-card .archive-image,.project-card .project-image{isolation:isolate}
.archive-card .archive-image::after,.project-card .project-image::after{content:"";position:absolute;inset:0;background:#10201b;opacity:0;pointer-events:none;transition:opacity .3s ease;z-index:1}
.archive-card .archive-image img,.project-card .project-image img{filter:none;transition:transform .65s cubic-bezier(.16,1,.3,1)}
.archive-card .project-overlay,.project-card .project-overlay{position:absolute;inset:auto 0 0;display:flex;align-items:flex-end;gap:22px;justify-content:space-between;padding:64px 25px 25px;background:linear-gradient(180deg,transparent,rgba(11,23,19,.78) 48%,rgba(11,23,19,.92));color:#f7f8f3;font:400 15px/1.55 var(--sans);text-align:left;opacity:0;transform:translateY(12px);transition:opacity .25s ease,transform .3s cubic-bezier(.16,1,.3,1);pointer-events:none;z-index:2}
.archive-card .project-overlay>span,.project-card .project-overlay>span{max-width:52ch;text-wrap:pretty}
.project-expand{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:square;margin-bottom:3px}
.archive-card:hover .archive-image::after,.archive-card:focus-visible .archive-image::after,.project-card:hover .project-image::after,.project-card:focus-visible .project-image::after{opacity:.22}
.archive-card:hover .project-overlay,.archive-card:focus-visible .project-overlay,.project-card:hover .project-overlay,.project-card:focus-visible .project-overlay{opacity:1;transform:translateY(0);transition-duration:.35s,.4s}
.archive-card:hover .archive-image img,.archive-card:focus-visible .archive-image img,.project-card:hover .project-image img,.project-card:focus-visible .project-image img{filter:none;transform:scale(1.025)}
.archive-caption{align-items:flex-start;padding-top:17px;gap:20px}
.archive-caption .project-context,.project-card .project-context{font:400 15px/1.5 var(--sans);letter-spacing:0;color:var(--ink);display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.archive-caption .project-location,.project-card .project-location{font-size:13px;line-height:1.5;color:#5d696c}
.archive-caption .archive-index{padding-top:3px;font:10px/1.6 var(--mono);color:var(--page-muted,var(--sub));font-variant-numeric:tabular-nums;flex:none}
.archive-card .project-open{display:none}
@media(max-width:760px){
  .archive-card .project-overlay,.project-card .project-overlay{opacity:1;transform:none;padding:50px 19px 19px;gap:16px;font-size:13px;line-height:1.55}
  .archive-card .archive-image img,.project-card .project-image img{transform:none!important}
  .archive-caption{padding-top:14px}
  .archive-caption .project-context,.project-card .project-context{font-size:14px;gap:3px 9px}
  .archive-caption .project-location,.project-card .project-location{font-size:12px}
  .project-expand{width:20px;height:20px}
}
@media(hover:none){
  .archive-card .project-overlay,.project-card .project-overlay{opacity:1;transform:none}
  .archive-card .archive-image img,.project-card .project-image img{transform:none!important}
}
@media(prefers-reduced-motion:reduce){
  .archive-card .archive-image img,.project-card .project-image img{transition:none;transform:none!important}
  .archive-card .project-overlay,.project-card .project-overlay{transform:none;transition:opacity .15s ease}
  .archive-card .archive-image::after,.project-card .project-image::after{transition-duration:.15s}
}