/* Reusable, code-drawn artwork. Media wrappers own size and cropping. */
.project-cover {
  --cover-ink: #282333;
  --cover-violet: #7560e8;
  --cover-mint: #8adac6;
  --cover-paper: #efeaff;
  display: block;
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100%;
  min-height: 0;
  aspect-ratio: 8 / 5;
  overflow: hidden;
  background: var(--cover-paper);
  line-height: 0;
}

.project-cover--memory,
.project-cover--character,
.project-cover--logic {
  --cover-paper: #e3f4ed;
}

.project-cover--arena,
.project-cover--release {
  --cover-paper: #e7e0fa;
}

.project-cover--layout {
  --cover-paper: #f3f0fa;
}

.project-cover .project-cover-art {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  overflow: hidden;
}

.project-cover-art :where(path, circle, rect, ellipse) {
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.project-cover .pc-ink { fill: var(--cover-ink); }
.project-cover .pc-violet { fill: var(--cover-violet); }
.project-cover .pc-mint { fill: var(--cover-mint); }
.project-cover .pc-white { fill: #fff; }

.project-cover .pc-outline {
  stroke: var(--cover-ink);
  stroke-width: 1.25px;
}

.project-cover .pc-line,
.project-cover .pc-dashed,
.project-cover .pc-registration,
.project-cover .pc-grid-line {
  fill: none;
  stroke: var(--cover-ink);
  stroke-width: 1.25px;
}

.project-cover .pc-dashed {
  stroke-dasharray: 3 5;
  opacity: .58;
}

.project-cover .pc-registration {
  opacity: .35;
}

.project-cover .pc-grid-line {
  stroke: #b9d9cd;
  stroke-width: 1px;
}

.project-cover .pc-paper-line {
  fill: none;
  stroke: #fff;
  stroke-width: 2px;
}

.project-cover .pc-maze-wall {
  fill: none;
  stroke: var(--cover-ink);
  stroke-width: 8px;
  stroke-linecap: square;
  stroke-linejoin: miter;
  vector-effect: none;
}

.project-cover .pc-maze-route {
  fill: none;
  stroke: #8cdac7;
  stroke-width: 3px;
  stroke-dasharray: 2 6;
  vector-effect: none;
}