/* A course and its modules share a fixed palette, series tag and motif family. */
.st-module-art,
.st-course-art {
  display: block;
  color: var(--ma-ink, #6752b5);
  overflow: visible;
  transform-origin: center;
  transition: transform 180ms ease, filter 180ms ease;
}

:is(.st-module-art, .st-course-art) .ma-backdrop {
  fill: var(--ma-soft, #efebfb);
}
:is(.st-module-art, .st-course-art) .ma-frame {
  fill: none;
  stroke: var(--ma-glow, #a48bdb);
  stroke-width: 2;
  stroke-linecap: round;
  opacity: .5;
}
:is(.st-module-art, .st-course-art) .ma-line {
  fill: none;
  stroke: var(--ma-ink, #6752b5);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
:is(.st-module-art, .st-course-art) .ma-fill {
  fill: color-mix(in srgb, var(--ma-glow, #a48bdb) 35%, white);
  stroke: var(--ma-ink, #6752b5);
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
:is(.st-module-art, .st-course-art) .ma-accent {
  fill: var(--ma-accent, #e3b84c);
  stroke: var(--ma-ink, #6752b5);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
:is(.st-module-art, .st-course-art) .ma-series rect {
  fill: var(--ma-ink, #6752b5);
}
:is(.st-module-art, .st-course-art) .ma-series text {
  fill: white;
  font: 750 10px ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .9px;
}
:is(.st-module-art, .st-course-art) .ma-label rect {
  fill: var(--ma-ink, #6752b5);
}
:is(.st-module-art, .st-course-art) .ma-label text {
  fill: white;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .2px;
}
.st-module-art .ma-family-emblem { opacity: .75; }
.st-course-art .ma-course-sheet {
  fill: var(--ma-soft, #efebfb);
  stroke: var(--ma-ink, #6752b5);
  stroke-width: 2;
}
.st-course-art .ma-course-sheet-back {
  fill: var(--ma-glow, #a48bdb);
  stroke: none;
  opacity: .6;
}
.st-course-art .ma-course-disc {
  fill: white;
  opacity: .65;
}
.st-course-art .ma-course-label text { font-size: 10px; }

.cc-module-art > .st-module-art,
.course-track-art > .st-module-art,
.course-track-art > .st-course-art {
  width: 82%;
  height: 82%;
  margin-top: 10%;
}
.cc-path-summary > .st-module-art {
  width: 104px;
  height: 104px;
  margin: 0 0 20px;
}
.cc-hero > .st-course-art {
  width: 112px;
  height: 112px;
  flex: 0 0 112px;
}
.rc-hero-art > .st-course-art { width: 100%; height: 100%; }
.lh-course-link > .st-course-art {
  width: 48px;
  height: 53px;
  flex: 0 0 48px;
}

.cc-module:hover .st-module-art,
.course-module-card:hover :is(.st-module-art, .st-course-art),
.lh-course-link:hover .st-course-art {
  transform: translateY(-2px) rotate(-1.5deg) scale(1.02);
  filter: saturate(1.06);
}
[data-theme="dark"] :is(.st-module-art, .st-course-art) .ma-backdrop,
[data-theme="dark"] .st-course-art .ma-course-sheet { opacity: .86; }
[data-theme="dark"] :is(.st-module-art, .st-course-art) .ma-fill {
  fill: color-mix(in srgb, var(--ma-glow, #a48bdb) 36%, #1f251f);
}
[data-theme="dark"] .st-course-art .ma-course-disc {
  fill: var(--ma-soft, #efebfb);
  opacity: .75;
}

@media (max-width: 600px) {
  .cc-path-summary > .st-module-art {
    float: left;
    width: 78px;
    height: 78px;
    margin: 0 18px 9px 0;
  }
  .cc-hero > .st-course-art { width: 88px; height: 88px; flex-basis: 88px; }
  .lh-course-link > .st-course-art { width: 43px; height: 48px; flex-basis: 43px; }
}
@media (prefers-reduced-motion: reduce) {
  .st-module-art, .st-course-art { transition: none; }
}