/* Experience: the wall of project plates. The case reads on hover or focus; on touch screens and narrow windows
   it sits under each photo. */
.e-wall{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:#000000}
.e-plate{position:relative;display:flex;aspect-ratio:3/2;background:#1c1c1c}
.e-plate-media{position:absolute;inset:0;overflow:hidden}
.e-plate-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 44%,rgba(0,0,0,.86) 100%)}
.e-plate-scrim{position:absolute;inset:0;background:rgba(12,12,12,.9);opacity:0;transition:opacity 200ms cubic-bezier(.2,0,0,1)}
.e-plate-content{position:relative;flex:1 1 auto;min-width:0;box-sizing:border-box;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(20px,2.2vw,32px)}
.e-plate-body{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows 240ms cubic-bezier(.2,0,0,1),opacity 200ms cubic-bezier(.2,0,0,1)}
.e-plate-body>div{min-height:0;overflow:hidden}
.e-plate-plus{display:block;transition:transform 200ms cubic-bezier(.2,0,0,1)}
.e-plate:hover .e-plate-scrim,.e-plate:focus-within .e-plate-scrim{opacity:1}
.e-plate:hover .e-plate-body,.e-plate:focus-within .e-plate-body{grid-template-rows:1fr;opacity:1}
.e-plate:hover .e-plate-plus,.e-plate:focus-within .e-plate-plus{transform:rotate(45deg)}
.e-plate a:hover{opacity:1}
@media (max-width:1099px){.e-wall{grid-template-columns:minmax(0,1fr)}}
@media (hover:none),(max-width:719px){
.e-wall{gap:0;background:#121212}
.e-plate{display:block;aspect-ratio:auto;background:#121212;border-top:1px solid #2e2e2e}
.e-plate-media{position:relative;aspect-ratio:3/2}
.e-plate-shade,.e-plate-scrim,.e-plate-plus,.e-hover-hint{display:none}
.e-plate-body{grid-template-rows:1fr;opacity:1}
}
@media (prefers-reduced-motion:reduce){.e-plate-scrim,.e-plate-body,.e-plate-plus{transition:none}}
@media print{.e-plate-scrim{opacity:1}.e-plate-body{grid-template-rows:1fr;opacity:1}}