/* Decorative subject art; the containing theme supplies the five --art-* colors. */
.subject-art {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  flex-shrink: 1;
  pointer-events: none;
  user-select: none;
}
.subject-art--hero { max-width: 24rem; }
.subject-art--card { max-width: 13rem; }
.subject-art .subject-art__glyph {
  font-family: system-ui, sans-serif;
  font-weight: 900;
  font-style: normal;
  letter-spacing: -.055em;
}
.subject-art .subject-art__primary { stop-color: var(--art-primary, #17635f); }
.subject-art .subject-art__primary-light {
  stop-color: var(--art-primary, #17635f);
  stop-color: color-mix(in srgb, var(--art-primary, #17635f) 72%, var(--art-secondary, #8accd6));
}
.subject-art .subject-art__primary-shade {
  stop-color: var(--art-primary, #17635f);
  stop-color: color-mix(in srgb, var(--art-primary, #17635f) 84%, var(--art-ink, #172a31));
}
.subject-art .subject-art__accent { stop-color: var(--art-accent, #ef7651); }
.subject-art .subject-art__accent-light {
  stop-color: var(--art-accent, #ef7651);
  stop-color: color-mix(in srgb, var(--art-accent, #ef7651) 82%, white);
}
.subject-art .subject-art__accent-shade {
  stop-color: var(--art-accent, #ef7651);
  stop-color: color-mix(in srgb, var(--art-accent, #ef7651) 83%, var(--art-ink, #172a31));
}
.subject-art .subject-art__secondary { stop-color: var(--art-secondary, #8accd6); }
.subject-art .subject-art__secondary-light {
  stop-color: var(--art-secondary, #8accd6);
  stop-color: color-mix(in srgb, var(--art-secondary, #8accd6) 78%, white);
}
.subject-art .subject-art__secondary-shade {
  stop-color: var(--art-secondary, #8accd6);
  stop-color: color-mix(in srgb, var(--art-secondary, #8accd6) 84%, var(--art-primary, #17635f));
}
.subject-art .subject-art__glow { stop-color: var(--art-glow, #ffd266); }
.subject-art .subject-art__ink, .subject-art .subject-art__edge { fill: var(--art-ink, #172a31); }
.subject-art .subject-art__shadow { fill: var(--art-ink, #172a31); opacity: .13; }
.subject-art .subject-art__edge { opacity: .38; }
.subject-art .subject-art__page-lines, .subject-art .subject-art__seam,
.subject-art .subject-art__shine, .subject-art .subject-art__globe-lines,
.subject-art .subject-art__leaf-vein, .subject-art .subject-art__fraction-line,
.subject-art .subject-art__orbit, .subject-art .subject-art__stand {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.subject-art .subject-art__page-lines { stroke: var(--art-ink, #172a31); stroke-width: 1.5; opacity: .2; }
.subject-art .subject-art__seam { stroke: var(--art-ink, #172a31); stroke-width: 2; opacity: .18; }
.subject-art .subject-art__shine { stroke: white; stroke-width: 3; opacity: .38; }
.subject-art .subject-art__globe-lines { stroke: white; stroke-width: 1.5; opacity: .25; }
.subject-art .subject-art__leaf-vein { stroke: var(--art-secondary, #8accd6); stroke-width: 2.5; }
.subject-art .subject-art__fraction-line { stroke: var(--art-ink, #172a31); stroke-width: 2; }
.subject-art .subject-art__orbit { stroke: var(--art-accent, #ef7651); stroke-width: 7; }
.subject-art .subject-art__stand { stroke: var(--art-primary, #17635f); stroke-width: 9; }