/* ==========================================================================
   Hero reel (experiment). Loaded by index.html only, after style.css.
   - A tighter headline so the reel reads as the first thing on screen
   - A lighter scrim at the top; legibility is kept where the text sits
   ========================================================================== */

/* Two lines instead of three, sized to the viewport so it never runs off a
   phone screen. */
.hero .hero-title {
  font-size: clamp(1.6rem, 2.6vw + 0.4rem, 2.9rem);
  line-height: 1.04;
  letter-spacing: -0.015em;
  margin-bottom: 18px;
}

.hero .hero-title .highlight-brand {
  display: inline;
}

.hero .hero-slogan {
  font-size: var(--text-md);
  margin-bottom: 26px;
}

/* The film carries the top of the screen now, so the scrim only darkens the
   header strip, the text corner and the hand-off into #intro. */
.hero .hero-scrim {
  background:
    linear-gradient(180deg,
      rgba(6, 3, 12, 0.62) 0%,
      rgba(6, 3, 12, 0.1) 22%,
      rgba(6, 3, 12, 0.1) 52%,
      rgba(6, 3, 12, 0.72) 84%,
      #06030c 100%),
    linear-gradient(90deg, rgba(6, 3, 12, 0.62) 0%, rgba(6, 3, 12, 0.28) 34%, rgba(6, 3, 12, 0) 58%);
}

/* Keep the CTA its natural width so it clears the floating WhatsApp and call
   buttons in the bottom-right corner. */
@media (max-width: 480px) {
  .hero .hero-actions a {
    width: auto;
    align-self: flex-start;
  }
}

/* iPhone SE width: EXHIBITIONS. has to fit on one line. */
@media (max-width: 360px) {
  .hero .hero-title {
    font-size: 1.5rem;
  }
}