.hero {
  position: relative;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  isolation: isolate;
}
.hero picture, .hero picture img { position: absolute; inset: 0; width: 100%; height: 100%; }
/* the photo dissolves into the page colour, so the stem fades down towards the worlds */
.hero picture img {
  object-fit: cover;
  object-position: 50% 42%;
  z-index: -1;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
}
.hero-copy {
  position: absolute;
  left: 50%;
  top: 40%;
  translate: -50% -50%;
  display: grid;
  justify-items: center;
  gap: clamp(0.6rem, 0.3rem + 0.9vw, 1.1rem);
  color: var(--ink);
  text-align: center;
}
.hero-lockup {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 0.4rem + 1.5vw, 1.8rem);
}
.hero-mark { width: clamp(3.4rem, 1.9rem + 6vw, 8rem); }
.hero-copy h1 {
  margin: 0;
  font-size: clamp(3rem, 1.6rem + 6vw, 7.5rem);
  font-weight: 800;
  letter-spacing: -0.055em;
  line-height: 0.9;
}
.hero-copy h1 span { font-weight: 400; opacity: 0.55; }
.hero-tagline {
  margin: 0;
  max-width: 18em;
  font-size: clamp(1.05rem, 0.8rem + 1vw, 1.6rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.scroll-cue {
  position: absolute;
  left: var(--gutter);
  bottom: clamp(1rem, 0.6rem + 1vw, 1.75rem);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.6;
}

.hero picture img { animation: photo-in 2.4s var(--ease-out-expo) both, photo-drift 28s ease-in-out 2.4s infinite alternate; }
.hero-lockup { animation: rise 1.4s var(--ease-out-expo) 0.75s both; }
.hero-tagline { animation: rise 1.4s var(--ease-out-expo) 1s both; }
@keyframes photo-in { from { opacity: 0; transform: scale(1.08); filter: blur(12px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes photo-drift { from { transform: scale(1); } to { transform: scale(1.05); } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }

@media (max-width: 760px) {
  .hero-copy { top: 34%; }
}