/* ---------- things pinned around the set: paintings and a polaroid get push pins, magnets sit flat ---------- */
/* things pinned around the set: paper gets a push pin, magnets sit flat and thick */
.pin {
  position: absolute; z-index: 4; margin: 0;
  transform: rotate(var(--r, 0deg));
  filter: drop-shadow(0 8px 10px rgba(30,15,0,.45)) drop-shadow(0 1px 2px rgba(30,15,0,.35));
  user-select: none;
}
.pin img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.pin-desk { aspect-ratio: 507 / 409; } .pin-polaroid { aspect-ratio: 497 / 767; } .pin-me { aspect-ratio: 332 / 336; }
.pin-bsod { aspect-ratio: 533 / 478; } .pin-pylons { aspect-ratio: 388 / 348; }
.pin.paper::after {
  content: "";
  position: absolute; left: 50%; top: -6px;
  width: 14px; height: 14px; margin-left: -7px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff8 0, transparent 45%), var(--pin, #d8322a);
  box-shadow: 0 5px 5px -2px rgba(20,10,0,.55), inset 0 -2px 3px rgba(0,0,0,.35);
}
.pin.magnet { filter: drop-shadow(0 4px 4px rgba(30,15,0,.5)) drop-shadow(0 12px 14px rgba(30,15,0,.35)); }
.pin.magnet img { border-radius: 2px; }

.pin-desk     { left: -41%; top: 10%; width: 26%; --r: -3deg; --pin: #2b62c9; }
.pin-polaroid { left: -40%; top: 44%; width: 21%; --r: 4deg; --pin: #e9b520; }
.pin-me       { left: 108%; top: 2%;  width: 24%; --r: 3deg; --pin: #2f9e44; }
.pin-bsod     { left: 105%; top: 52%; width: 27%; --r: -2deg; }
.pin-pylons   { left: 118%; top: 74%; width: 21%; --r: 3deg; }

@media (max-width: 640px) {
  .pin-desk     { left: 2%;  top: 103%; width: 30%; }
  .pin-me       { left: 34%; top: 102%; width: 29%; }
  .pin-polaroid { left: 66%; top: 101%; width: 31%; }
  .pin-bsod     { left: 3%;  top: 133%; width: 44%; }
  .pin-pylons   { left: 50%; top: 152%; width: 46%; }
}