/* Keep the opening image below the navigation and give the links a quiet backdrop. */
@media (min-width: 701px) {
  .hero-art {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%), linear-gradient(180deg, transparent, #000 13%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent, #000 14%), linear-gradient(180deg, transparent, #000 13%);
    mask-composite: intersect;
  }
  .site-header { isolation: isolate; }
  .site-header::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 180px;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,.61) 48%, transparent);
  }
  .hero-shade {
    background: linear-gradient(90deg, rgba(0,0,0,.45), transparent 64%),
                linear-gradient(0deg, #050505, transparent 18%);
  }
}

@media (min-width: 1600px) {
  .hero-copy { top: 24%; left: 7%; }
  html[lang=en] .hero-copy h1 { font-size: clamp(57px, 3.8vw, 66px); }
  html[lang=en] .hero-copy h1 strong { font-size: 1.4em; }
  .hero-copy .intro { font-size: 16px; }
}

/* Keep the one actionable scroll cue with its copy. The large background word
   stays inside its own column instead of sitting behind the link. */
@media (min-width: 701px) {
  .soul .giant {
    position: absolute;
    top: 27%;
    left: 3%;
    width: 43%;
    overflow: hidden;
    margin: 0;
    font-size: clamp(120px, 14vw, 245px);
    line-height: .8;
    pointer-events: none;
  }
  .soul-copy {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    z-index: 1;
    width: 46%;
    margin-left: 52%;
    padding: 72px 0 58px;
  }
  .soul-copy .down { margin-top: 30px; }
}

@media (max-width: 700px) {
  .soul { min-height: 0; padding-bottom: 72px; }
  .soul .giant {
    position: relative;
    width: 100%;
    margin: 48px 0 32px;
    font-size: clamp(100px, 29vw, 160px);
    line-height: .8;
    pointer-events: none;
  }
  .soul-copy {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    width: 100%;
    margin: 0;
  }
  .soul-copy .down { margin-top: 28px; }
}