* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #111; }
body { min-height: 100svh; overflow: hidden; font-family: Arial, Helvetica, sans-serif; }
.hero { position: relative; width: 100%; height: 100svh; overflow: hidden; background: #111; color: #fff; }
.hero__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}
.hero__release {
  position: absolute;
  left: clamp(30px, 5.65vw, 94px);
  bottom: clamp(34px, 7.4vh, 78px);
  z-index: 2;
  display: grid;
  gap: 11px;
  color: #fff;
  text-transform: uppercase;
}
.hero__release p {
  margin: 0;
  font-size: clamp(12px, .96vw, 16px);
  font-weight: 400;
  letter-spacing: .27em;
  line-height: 1;
  text-shadow: 0 1px 12px rgba(0,0,0,.28);
}
.hero__rule { width: 178px; height: 1px; background: rgba(255,255,255,.55); }
@media (max-width: 900px) {
  .hero__image { object-position: 48% center; }
  .hero__release { left: 24px; bottom: 28px; gap: 9px; }
  .hero__release p { font-size: 12px; letter-spacing: .22em; }
  .hero__rule { width: 148px; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero__image { animation: settle 1.2s cubic-bezier(.2,.7,.2,1) both; }
  .hero__release { animation: reveal .9s ease-out .15s both; }
  @keyframes settle {
    from { transform: scale(1.012); opacity: .96; }
    to { transform: scale(1); opacity: 1; }
  }
  @keyframes reveal {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }
}