.hero {
  min-height: 760px;
  padding: 72px 0 44px;
  color: #fffaf0;
  background-color: #243025;
  background-image:
    linear-gradient(90deg, rgba(20, 30, 22, .96) 0%, rgba(22, 32, 23, .89) 34%, rgba(22, 31, 22, .58) 57%, rgba(22, 31, 22, .08) 78%),
    linear-gradient(0deg, rgba(20, 29, 22, .64), transparent 27%),
    url('/assets/elena-wide.webp');
  background-position: center, center, center 42%;
  background-size: cover;
  background-repeat: no-repeat;
}
.hero__grid { display: block; }
.hero__content { width: min(100%, 600px); align-items: flex-start; }
.hero h1 { max-width: 650px; color: #fffaf0; font-size: clamp(3rem, 5.1vw, 4.4rem); line-height: 1.01; text-shadow: 0 3px 28px rgba(0, 0, 0, .22); }
.hero h1 span, .hero .hero__course { color: #fffaf0; }
.hero .hero__qualifier { color: #f4e4bf; max-width: 21ch; font-size: .45em; line-height: 1.2; }
.hero .eyebrow { color: #f4d892; text-shadow: 0 1px 12px rgba(0,0,0,.4); }
.hero .subtitle { color: #fffaf0; max-width: 560px; text-shadow: 0 1px 16px rgba(0,0,0,.35); }
.hero .hero__copy, .hero .hero__note { color: rgba(255, 250, 238, .88); max-width: 550px; }
.hero .button--light { background: rgba(31, 42, 32, .7) padding-box, linear-gradient(115deg, #b68b42, #f3dc98 45%, #a4762c) border-box; color: #fffaf0; }
.hero .button--light:hover { color: #fffaf0; background: rgba(31, 42, 32, .9) padding-box, linear-gradient(115deg, #b68b42, #f3dc98 45%, #a4762c) border-box; }
.hero__badge { margin-top: 38px; }
.hero__badge span, .hero__badge span:nth-child(3) {
  color: #fff8e9;
  background: rgba(27, 38, 28, .72);
  border-color: rgba(231, 202, 134, .68);
  backdrop-filter: blur(14px);
  box-shadow: 0 12px 26px rgba(0, 0, 0, .15);
}

/* These are content photos, so load them even before their frames enter view. */
.about-course__visual, .author__image { background-color: #e7d8c2; }
.about-course__visual img, .author__image img { display: block; opacity: 1; visibility: visible; }

@media (max-width: 980px) {
  .hero { min-height: 720px; }
  .hero__grid { display: block; }
}
@media (max-width: 760px) {
  .hero {
    min-height: 0;
    padding: 390px 0 40px;
    background-image:
      linear-gradient(180deg, rgba(23, 33, 24, .04) 0%, rgba(23, 33, 24, .12) 22%, rgba(23, 33, 24, .94) 39%, #172419 68%),
      url('/assets/elena-premium.webp');
    background-position: center top;
    background-size: cover;
  }
  .hero h1 { font-size: clamp(2.55rem, 10.2vw, 3.35rem); margin-top: 14px; }
  .hero .hero__qualifier { font-size: .53em; max-width: 24ch; }
  .hero__badge { margin-top: 28px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero__badge span, .hero__badge span:nth-child(3) { min-height: 74px; font-size: .82rem; padding: 12px; }
  .hero__actions { gap: 10px; }
}
@media (max-width: 420px) { .hero { padding-top: 350px; } }