/* ==========================================================================
   Hero — the artwork is position: sticky at the top; .page-body (z-index 1)
   scrolls over it, which gives the "fixed background" parallax without
   background-attachment: fixed (broken on iOS Safari).
   ========================================================================== */
.hero {
  position: sticky;
  top: 0;
  z-index: 0;
  width: 100%;
  overflow: hidden;
  background: var(--c-dark);
  color: var(--c-white);
}

/* Home: 904px of a 997px-tall viewport in Figma (~90.67svh). */
.hero--home { height: 90.67svh; }

/* Sub pages: 440px at 1728, scales with the viewport width. */
.hero--page { height: calc(440 * var(--s)); }

.hero__art {
  position: absolute;
  inset: 0;
}
.hero__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;         /* Figma crops from the top of the artwork */
}

/* Mobile-only gradient so the copy stays readable over the artwork */
.hero__shade {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 60%;
  background: linear-gradient(to bottom, rgba(7, 6, 12, 0) 0%, var(--c-dark) 100%);
  opacity: 0;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Home hero copy — anchored to the bottom edge so the composition holds
   whatever the viewport height is.
   -------------------------------------------------------------------------- */
.hero__copy {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: calc(71 * var(--s));
}
.hero__intro,
.hero__brand,
.hero__title { will-change: transform; }
.hero__intro {
  width: 339px;
  margin-bottom: calc(83 * var(--s));
  font-size: 15px;
  line-height: 24px;
  font-weight: 300;
}
.hero__brand {
  display: flex;
  align-items: center;
  gap: calc(20 * var(--s));
}
.hero__logotype {
  font-family: var(--f-body);
  font-weight: 700;
  font-size: calc(72 * var(--s));
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--c-white);
  letter-spacing: 0.01em;
}
.hero__badge {
  width: calc(72 * var(--s));
  height: calc(72 * var(--s));
}
.hero__title {
  display: flex;
  justify-content: space-between;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: calc(142 * var(--s));
  line-height: 1;
  white-space: nowrap;
}

/* Sub-page title ("THE BAND", "MEDIA") — 50% white by design */
.hero__page-title {
  position: absolute;
  left: var(--gutter);
  bottom: calc(64 * var(--s));
  font-family: var(--f-display);
  font-weight: 400;
  font-size: calc(62 * var(--s));
  line-height: 1;
  color: var(--c-white-50);
}

/* --------------------------------------------------------------------------
   White strip under the hero with the scroll cue, centered vertically.
   Home: the remaining 9.33svh of the first screen. Sub pages: none.
   -------------------------------------------------------------------------- */
.scroll-cue {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;                    /* above the (white) collage section */
  display: flex;
  align-items: center;
  justify-content: center;
  height: 9.33svh;
}
.scroll-cue img {
  width: 5px;
  height: 14px;
  animation: cue-bob 1.8s ease-in-out infinite;
}
@keyframes cue-bob {
  0%, 100% { transform: translateY(-5px); }
  50%      { transform: translateY(5px); }
}

/* --------------------------------------------------------------------------
   Tablet (768–1023): desktop composition keeps shrinking, but the logotype
   and badge get a floor so they don't become tiny; readability gradient on.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .hero__shade { opacity: 1; }
  .hero__logotype { font-size: max(52px, calc(72 * var(--s))); }
  .hero__badge { width: max(56px, calc(72 * var(--s))); height: max(56px, calc(72 * var(--s))); }
}

/* --------------------------------------------------------------------------
   Mobile (< 768): 428 composition scaled by --s
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .hero--home { height: calc(706 * var(--s)); }
  .hero__copy { bottom: calc(26 * var(--s)); }
  .hero__intro { width: 339px; max-width: 100%; margin-bottom: calc(51 * var(--s)); }
  .hero__logotype { font-size: calc(52 * var(--s)); }
  .hero__brand { gap: calc(20 * var(--s)); margin-bottom: calc(9 * var(--s)); }
  .hero__title {
    flex-direction: column;
    font-size: calc(68 * var(--s));
    line-height: calc(72 * var(--s));
  }
  .hero__page-title {
    left: 0; right: 0;
    text-align: center;
    bottom: calc(40 * var(--s));
    font-size: calc(42 * var(--s));
  }
  .hero--page .hero__shade { height: 57%; }
  .scroll-cue { height: calc(60 * var(--s)); }
}