.photo-art{position:relative;overflow:hidden;margin:0;min-width:0;background:#e6eee9}.photo-art>img{display:block;width:100%;height:100%;object-fit:cover}.photo-art>.photo-ai{position:absolute;right:9px;bottom:7px;padding:2px 6px;border-radius:5px;background:rgba(12,30,27,.4);color:rgba(255,255,255,.82);font:11px/1.5 sans-serif;letter-spacing:0;z-index:2;pointer-events:none}.photo-art.mh-art{height:440px;border-radius:30px;align-self:center;box-shadow:0 24px 60px #0003;transform:none}.photo-art.oh-art{display:block;height:430px;border-radius:28px;align-self:center}.mh-who article>.photo-art.type-photo{flex:none;padding:0;width:100%;height:210px;border-radius:0;display:block}.mh-who article>.photo-art.type-photo img{height:100%;width:100%;object-fit:cover}.photo-art.art-thumb{width:100%;height:100%;min-height:88px}.photo-art.art-person{width:56px;height:56px;border-radius:50%}.photo-art.art-person .photo-ai{display:none}.photo-art.rep-photo{width:100%;height:100%;min-height:300px}.photo-art.rep-photo img,.photo-art.teacher-example img{object-position:center 25%}.photo-art.teacher-example{width:100%;height:100%;min-height:80px}.avatar-picker .photo-art{width:90px;height:108px;border-radius:10px}.avatar-picker .photo-art>img{width:100%;height:100%;object-fit:cover}.photo-art.scene-photo{width:100%;aspect-ratio:16/10}.photo-art.art-promo{width:100%;height:100%;min-height:280px}.promo-placeholder{padding:0;position:relative}.promo-placeholder>strong{position:absolute;left:20px;bottom:30px;background:#123c34d9;color:#fff;padding:10px 16px;border-radius:10px}.mh-art-bars.photo-art,.mh-art-cert.photo-art{width:160px;height:100px;border-radius:14px}.mh-site-hero{position:relative;overflow:hidden}.mh-site-hero>.photo-art{position:absolute;inset:0}.mh-site-hero>b{position:relative;z-index:1;background:#153f38bb;padding:6px 10px;border-radius:6px}.ab-tile .scene-photo{height:100%;aspect-ratio:auto}.ab-tile .scene-photo img{object-fit:cover}.art-thumb.photo-art>img{border-radius:inherit}
@media(max-width:760px){.photo-art.mh-art{height:260px;width:100%;max-width:none;margin-top:20px}.photo-art.oh-art{display:block;height:260px;width:100%;flex:none;margin-top:20px}.mh-who article>.photo-art.type-photo{height:190px}.photo-art.rep-photo{min-height:260px}.mh-art-bars.photo-art,.mh-art-cert.photo-art{width:120px;height:80px}}
/* Match uploaded portraits and example photos in the homepage cards. */
.faculty-section .faculty-photo {
  height: auto;
  aspect-ratio: 16 / 9;
}
.faculty-section .faculty-photo > img,
.faculty-section .faculty-photo > .teacher-example {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.faculty-section .faculty-photo > img,
.faculty-section .faculty-photo > .teacher-example > img {
  object-fit: cover;
  object-position: 50% 32%;
}
.faculty-section .faculty-photo > .faculty-label { z-index: 3; }

/* Fill the portrait frame in the course's assigned-instructor section. */
#cd-teachers .profile-photo {
  position: relative;
}
#cd-teachers .profile-photo > img,
#cd-teachers .profile-photo > .teacher-example {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
#cd-teachers .profile-photo > img,
#cd-teachers .profile-photo > .teacher-example > img {
  object-fit: cover;
  object-position: 50% 32%;
}

.ab-steps {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.ab-steps li {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 6px;
  text-align: center;
}
.ab-steps li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 17px;
  left: 50%;
  width: 100%;
  border-top: 2px solid #719c83;
}
.ab-flow .ab-step-number {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: #176957;
  color: #fff;
}
.ab-faculty .ab-instructor-photo {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 12px;
  margin-bottom: 8px;
  background: #edf0fb;
}
.ab-instructor-photo > img,
.ab-instructor-photo > .teacher-example {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
}
.ab-instructor-photo > img,
.ab-instructor-photo > .teacher-example > img {
  object-fit: cover;
  object-position: 50% 32%;
}
@media (max-width: 600px) {
  .ab-steps { grid-template-columns: 1fr; }
  .ab-steps li {
    grid-template-columns: 36px 1fr;
    justify-items: start;
    align-items: center;
    gap: 10px;
    min-height: 46px;
  }
  .ab-steps li:not(:last-child)::after {
    top: 50%;
    left: 17px;
    width: 0;
    height: 100%;
    border-top: 0;
    border-left: 2px solid #719c83;
  }
}

/* Give uploaded logos more room without cropping wide or tall artwork. */
.academy-brand.brand-logo img {
  width: auto;
  height: clamp(48px, 5vw, 68px);
  max-width: min(270px, 42vw);
  padding: 3px 5px;
  object-fit: contain;
}
.academy-brand.brand-markimg img {
  width: auto;
  height: clamp(42px, 4.5vw, 56px);
  max-width: min(100px, 21vw);
  padding: 3px;
  object-fit: contain;
}

.faculty-directory {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.faculty-directory-entry {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #fff;
  border: 1px solid #e1e9e3;
  border-radius: 18px;
}
.faculty-directory-entry .profile-editorial {
  grid-template-columns: clamp(105px, 12vw, 165px) minmax(0, 1fr);
  gap: clamp(14px, 2vw, 24px);
  margin: 0;
  padding: clamp(14px, 2vw, 24px);
  border: 0;
  overflow-wrap: anywhere;
}
.faculty-directory-entry .profile-photo {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
}
.faculty-directory-entry .profile-photo > img,
.faculty-directory-entry .profile-photo > .teacher-example {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
}
.faculty-directory-entry .profile-photo > img,
.faculty-directory-entry .profile-photo > .teacher-example > img {
  object-fit: cover;
  object-position: 50% 32%;
}
.faculty-directory-entry .faculty-course-links {
  margin: auto 0 0;
  padding: 0 14px 14px;
  flex-wrap: wrap;
}
@media (max-width: 820px) {
  .faculty-directory { grid-template-columns: minmax(0, 1fr); }
}

.academy-course-grid.course-directory-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.course-directory-grid .academy-course-card {
  display: flex;
  flex-direction: column;
}
.course-directory-grid .academy-course-art {
  display: block;
  height: auto;
  aspect-ratio: 16 / 9;
  padding: 0;
}
.course-directory-grid .academy-course-art > .art-thumb {
  height: 100%;
  min-height: 0;
  border-radius: 0;
}
.course-directory-grid .academy-course-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 16px;
}
.course-directory-grid .academy-course-copy strong { margin-top: auto; }
@media (max-width: 1050px) {
  .academy-course-grid.course-directory-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 780px) {
  .academy-course-grid.course-directory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 500px) {
  .academy-course-grid.course-directory-grid { grid-template-columns: minmax(0, 1fr); }
}

.avatar-picker.avatar-library { display: block; }
.avatar-library h3 { margin: 16px 0 8px; font-size: 16px; }
.avatar-library-row { display: flex; flex-wrap: wrap; gap: 8px; }
.avatar-library-row label { width: 106px; }
.avatar-library-row img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; border-radius: 7px; }

/* Keep home feature previews in the card flow so they cannot cover the copy. */
#spaces .mh-bento { grid-template-rows: repeat(2, minmax(260px, auto)); }
#spaces .mh-b { min-width: 0; }
#spaces .mh-b-wide { justify-content: flex-start; }
#spaces .mh-b-wide > b { max-width: none; }
#spaces .mh-b > .photo-art:is(.mh-art-bars, .mh-art-cert) {
  display: block;
  position: relative; inset: auto;
  transform: none;
  width: min(100%, 190px);
  height: auto;
  aspect-ratio: 16 / 9;
  margin: 16px 0 0;
  flex-shrink: 0;
}

#spaces .mh-site {
  height: auto;
  margin-bottom: 0;
  border-radius: 16px;
}
#spaces .mh-b-tall > small { margin-bottom: 20px; }
@media (max-width: 1100px) {
  #spaces .mh-bento { grid-template-rows: none; }
}