:root {
  color-scheme: dark;
  --page: #030405;
  --ink: rgba(247, 248, 246, 0.92);
  --soft: rgba(247, 248, 246, 0.54);
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--page);
}

body {
  min-height: 100vh;
  margin: 0;
  overflow: hidden;
  background: var(--page);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Inter, Segoe UI, sans-serif;
}

.site-shell {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  isolation: isolate;
}

.site-shell::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  content: "";
  background:
    radial-gradient(circle at 30% 68%, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.68) 74%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.55), transparent 32%, transparent 70%, rgba(0, 0, 0, 0.66)),
    linear-gradient(0deg, rgba(0, 0, 0, 0.66), transparent 24%, transparent 72%, rgba(0, 0, 0, 0.48));
}

.site-shell::after {
  position: absolute;
  inset: auto clamp(1.2rem, 3vw, 3rem) clamp(2.7rem, 4.2vw, 4.1rem) auto;
  width: clamp(4rem, 11vw, 9rem);
  height: 1px;
  pointer-events: none;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.34));
  opacity: 0.7;
}

.hero-image {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  animation: arrive 1200ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

h1 {
  position: fixed;
  right: clamp(1.25rem, 3vw, 3rem);
  margin: 0;
  letter-spacing: 0;
  text-wrap: balance;
  animation: label-in 900ms 520ms ease both;
}

h1 {
  bottom: clamp(1.1rem, 2.7vw, 2.7rem);
  color: rgba(250, 250, 248, 0.82);
  font-size: clamp(0.82rem, 0.74rem + 0.22vw, 1rem);
  font-weight: 500;
  line-height: 1.1;
}

@keyframes arrive {
  from {
    opacity: 0;
    transform: scale(1.015);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes label-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 680px) {
  .hero-image {
    object-position: 46% 50%;
  }

  h1 {
    right: 1.1rem;
  }

  h1 {
    bottom: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}