/* Decorative artwork only: existing media and screenshots are not targeted. */
body[data-palette] .illustrated-hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 450px; padding-block: 4rem;
}
.illustrated-hero > .container { position: relative; z-index: 1; }
.illustrated-hero .generated-banner {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: right center;
  border: 0; border-radius: 0; box-shadow: none; pointer-events: none;
  mask-image: linear-gradient(to bottom,transparent,#000 12%,#000 78%,transparent);
  -webkit-mask-image: linear-gradient(to bottom,transparent,#000 12%,#000 78%,transparent);
}
.illustrated-hero > .container::before {
  content: ''; position: absolute; inset: -4rem 25% -4rem -15%; z-index: -1;
  background: radial-gradient(ellipse,var(--paper,#FCFBF9) 38%,#FCFBF9ED 58%,transparent 76%);
  pointer-events: none;
}
.illustrated-hero h1 { max-width: 740px; }
.illustrated-hero :is(.lead,.course-lead) { max-width: 650px; }
.illustrated-hero .course-meta { max-width: 650px; flex-wrap: wrap; }
@media(max-width:767.98px) {
  body[data-palette] .illustrated-hero { min-height: 0; padding-top: 220px; padding-bottom: 2.5rem; }
  .illustrated-hero .generated-banner { height: 235px; object-fit: cover; object-position: right center; }
  .illustrated-hero > .container::before { display: none; }
}