/* photos.css — photographs are never a hard rectangle on this site.
   .ph is the frame; the modifier class picks the crop shape. */

.ph{overflow:hidden;position:relative;background:var(--blush);cursor:zoom-in;
  box-shadow:0 24px 54px -28px rgba(168,4,6,.55);transition:transform .7s var(--ease)}
.ph img{width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--ease),filter .7s var(--ease)}
.ph:hover img{transform:scale(1.07)}
.ph:hover{transform:translateY(-6px)}
/* the little expand hint that appears on hover */
.ph::after{content:"";position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:50%;
  background:rgba(18,16,15,.62) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4H4v5M15 20h5v-5M20 9V4h-5M4 15v5h5'/%3E%3C/svg%3E") center/17px no-repeat;
  backdrop-filter:blur(8px);opacity:0;transform:scale(.7);
  transition:opacity .45s var(--ease),transform .45s var(--ease);pointer-events:none}
.ph:hover::after,.ph:focus-visible::after{opacity:1;transform:none}
.ph:focus-visible{outline:3px solid var(--red);outline-offset:4px}

.blobmask{border-radius:58% 42% 46% 54%/48% 52% 48% 52%}
.blobmask2{border-radius:44% 56% 60% 40%/52% 44% 56% 48%}
.soft{border-radius:var(--r-lg)}
.arch{border-radius:999px 999px var(--r-lg) var(--r-lg)}