.workspace-art {
  isolation: isolate;
  overflow: hidden;
  padding: 0;
  background: linear-gradient(135deg, #3e6545 0%, var(--green) 63%, #213a27 100%);
  box-shadow: 9px 10px 0 rgba(198, 217, 61, .58);
}

/* Keep the project grid deliberately clean; the captures carry the movement. */
.project-art {
  position: relative;
  border-radius: 0;
  margin-bottom: 0;
}

.blue-art,
.green-art,
.pink-art {
  transform: none;
}

.project h3 {
  margin: 42px 0 8px;
}

.database-art {
  isolation: isolate;
  overflow: hidden;
  padding: 0;
  background: linear-gradient(135deg, #c9dcf1 0%, var(--blue) 58%, #8cadd0 100%);
  box-shadow: 9px 10px 0 rgba(212, 134, 155, .62);
}

.database-art::before {
  content: '';
  position: absolute;
  inset: 15px 25px 11px -30px;
  border: 1px solid rgba(227, 84, 52, .7);
  border-radius: 16px;
  transform: rotate(3deg);
  z-index: -1;
}

.database-art img {
  position: absolute;
  width: 116%;
  max-width: none;
  height: auto;
  right: -8%;
  top: 16%;
  border: 2px solid var(--orange);
  border-radius: 16px;
  box-shadow: 8px 9px 0 rgba(48, 77, 52, .8);
  filter: saturate(.86) contrast(1.08);
  transform: rotate(3deg);
  transform-origin: center;
}

.database-art::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, rgba(255, 248, 238, .25), transparent 34%, rgba(212, 134, 155, .14) 70%);
  pointer-events: none;
}

.database-art-label {
  position: absolute;
  left: 18px;
  bottom: 16px;
  z-index: 1;
  color: var(--ink);
  font: 13px/1.25 'DM Mono', monospace;
  letter-spacing: .5px;
  text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(255, 248, 238, .85);
}

.copilot-mark {
  position: absolute;
  right: 15px;
  top: 15px;
  z-index: 1;
  color: var(--cream);
  background: #9742d6;
  border: 1px solid var(--cream);
  border-radius: 999px;
  padding: 5px 8px;
  font: 12px/1 'DM Mono', monospace;
  box-shadow: 2px 3px 0 var(--orange);
}

.workspace-art::before {
  content: '';
  position: absolute;
  inset: 13px -30px 12px 24px;
  border: 1px solid rgba(198, 217, 61, .68);
  border-radius: 5px;
  transform: rotate(-3deg);
  z-index: -1;
}

.workspace-art img {
  position: absolute;
  width: 119%;
  max-width: none;
  height: auto;
  left: 8%;
  top: 17%;
  border: 2px solid var(--lime);
  border-radius: 16px;
  box-shadow: -8px 9px 0 rgba(227, 84, 52, .88);
  filter: saturate(.8) contrast(1.08);
  transform: rotate(-3deg);
  transform-origin: center;
}

.workspace-art::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, rgba(198, 217, 61, .18), transparent 35%, rgba(48, 77, 52, .05) 70%);
  pointer-events: none;
}

.workspace-art-label {
  position: absolute;
  left: 18px;
  bottom: 16px;
  z-index: 1;
  color: var(--cream);
  font: 13px/1.25 'DM Mono', monospace;
  letter-spacing: .5px;
  text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(20, 32, 22, .9);
}

.shortcut-mark {
  position: absolute;
  right: 15px;
  top: 15px;
  z-index: 1;
  color: var(--green);
  background: var(--lime);
  border: 1px solid var(--cream);
  border-radius: 999px;
  padding: 5px 8px;
  font: 12px/1 'DM Mono', monospace;
  box-shadow: 2px 3px 0 var(--orange);
}

.performance-art {
  isolation: isolate;
  overflow: hidden;
  padding: 0;
  background: linear-gradient(135deg, #e19cad 0%, var(--pink) 58%, #bd7087 100%);
  box-shadow: 9px 10px 0 rgba(227, 84, 52, .55);
}

.performance-art::before {
  content: '';
  position: absolute;
  inset: 14px -28px 12px 23px;
  border: 1px solid rgba(255, 248, 238, .78);
  border-radius: 18px;
  transform: rotate(-3deg);
  z-index: -1;
}

.performance-art img {
  position: absolute;
  width: 117%;
  max-width: none;
  height: auto;
  left: 8%;
  top: 17%;
  border: 2px solid var(--orange);
  border-radius: 16px;
  box-shadow: -8px 9px 0 rgba(48, 77, 52, .82);
  filter: saturate(.88) contrast(1.08);
  transform: rotate(-3deg);
  transform-origin: center;
}

.performance-art::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, rgba(255, 248, 238, .2), transparent 34%, rgba(227, 84, 52, .12) 70%);
  pointer-events: none;
}

@media (max-width: 760px) {
  .workspace-art img { width: 116%; left: 7%; top: 13%; }
  .database-art img { width: 114%; right: -5%; top: 13%; }
  .performance-art img { width: 115%; left: 7%; top: 13%; }
}