.sunset-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  aspect-ratio: 2.44;
  min-height: 275px;
  margin-bottom: clamp(22px, 2.8vw, 38px);
  padding: clamp(24px, 4.5vw, 60px);
  color: #fffaf3;
}
.sunset-hero-visual,
.sunset-hero-photo,
.sunset-hero-visual::after {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.sunset-hero-visual {
  z-index: -1;
  mask-image:
    linear-gradient(to right, transparent, #0003 1.2%, #000c 3%, #000 5%, #000 93%, #000c 96%, #0003 98.5%, transparent),
    linear-gradient(to bottom, transparent, #0003 2%, #000c 7%, #000 12%, #000 83%, #000c 90%, #0003 97%, transparent);
  mask-composite: intersect;
}
.sunset-hero-photo {
  display: block;
  object-fit: cover;
  object-position: center;
}
.sunset-hero-visual::after {
  content: "";
  background: linear-gradient(90deg, rgba(30, 22, 20, .74), rgba(30, 22, 20, .62) 43%, rgba(30, 22, 20, 0) 74%);
}
.sunset-hero-copy {
  max-width: min(49%, 29rem);
  transform: translateY(-24px);
}
.sunset-hero h1 {
  margin: 0 0 .22em;
  color: inherit;
  font-size: clamp(30px, 5vw, 56px);
  line-height: 1.05;
}
.sunset-hero p {
  margin: 0;
  font-size: clamp(1rem, 1.65vw, 1.2rem);
  line-height: 1.5;
  text-wrap: pretty;
}
@media (max-width: 650px) {
  .sunset-hero {
    align-items: end;
    aspect-ratio: auto;
    min-height: clamp(300px, 78vw, 360px);
    padding: 22px;
  }
  .sunset-hero-photo {
    object-position: 90% center;
  }
  .sunset-hero-visual {
    mask-image:
      linear-gradient(to right, transparent, #0003 1%, #000c 2.8%, #000 5%, #000 95%, #000c 97.2%, #0003 99%, transparent),
      linear-gradient(to bottom, transparent, #0003 1.7%, #000c 6%, #000 10%, #000 87%, #000c 93%, #0003 97%, transparent);
  }
  .sunset-hero-visual::after {
    background: linear-gradient(0deg, rgba(26, 20, 19, .95), rgba(26, 20, 19, .74) 38%, rgba(26, 20, 19, 0) 72%);
  }
  .sunset-hero-copy {
    max-width: 28rem;
    transform: translateY(-14px);
  }
  .sunset-hero h1 {
    font-size: clamp(28px, 8.3vw, 40px);
  }
}

/* Homepage artwork and text sit directly on the page background. */

.home-product-actions {
  display: grid;
  justify-items: start;
  gap: 10px;
  margin-top: auto;
}
.home-product-actions .button-link {
  gap: 16px;
  min-height: 46px;
  padding-inline: 16px;
  border-radius: 10px;
}
.home-product-actions .button-link:hover { background: #714a2b; }
.home-store-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 18px;
}
.home-store-links a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 42px;
  color: var(--brown);
  font-weight: 700;
  text-underline-offset: .2em;
}
.home-store-links a { font-size: .94rem; }

.home-overview-section,
.home-tips-section,
.home-page .reader-reviews {
  margin-top: clamp(36px, 6vw, 68px);
}
.home-section-heading h2 {
  margin: 5px 0 10px;
  color: var(--brown);
  font-size: clamp(1.85rem, 4vw, 2.8rem);
  line-height: 1.12;
  letter-spacing: -.035em;
}
.home-section-heading p { margin: 0; max-width: 44ch; color: var(--muted); }
.home-overview-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(200px, .75fr);
  gap: clamp(24px, 6vw, 76px);
  align-items: center;
  padding: clamp(24px, 5vw, 60px);
  border-radius: 22px;
  border: 1px solid var(--line);
  background: rgba(255, 251, 245, .66);
}
.home-overview-section figure { margin: 0; text-align: center; }
.home-overview-player {
  width: min(100%, 218px);
  margin-inline: auto;
  aspect-ratio: 9 / 16;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #241811;
  overflow: hidden;
}
.home-overview-player iframe { width: 100%; height: 100%; border: 0; display: block; }

.home-page .resource-card { margin-top: clamp(32px, 5vw, 54px); }

@media (max-width: 640px) {
  .home-overview-section { grid-template-columns: minmax(0, 1fr); }
  .home-overview-section figure { justify-self: center; width: min(100%, 218px); }
}