@font-face {
  font-family: 'Meraki';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/TOFMeraki-Bold.woff2') format('woff2'),
       url('../assets/fonts/TOFMeraki-Bold.woff') format('woff');
}

@font-face {
  font-family: 'Meraki';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../assets/fonts/TOFMeraki-Book.woff2') format('woff2'),
       url('../assets/fonts/TOFMeraki-Book.woff') format('woff');
}


.logo {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}

.logo__word {
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: var(--ls-wordmark);
  padding-left: var(--ls-wordmark);
  color: var(--color-warm-white);
  font-size: clamp(1.25rem, 1rem + 0.9vw, 1.75rem);
}

.logo__script {
  height: auto;
  width: clamp(5rem, 4rem + 2.6vw, 7.5rem);
  margin-top: 0.4rem;
}


.icon-link {
  position: relative;
  display: inline-flex;
  padding: 0.625rem;
  color: var(--color-on-dark);
  transition: color var(--transition-base);
}

.icon-link svg {
  width: clamp(2.25rem, 2rem + 0.6vw, 2.75rem);
  height: clamp(2.25rem, 2rem + 0.6vw, 2.75rem);
}

.icon-link svg :is(rect, path, circle) {
  vector-effect: non-scaling-stroke;
  stroke-width: 1px;
}

.icon-link:hover,
.icon-link:focus-visible {
  color: var(--color-on-dark-accent);
}

.icon-link__label {
  position: absolute;
  top: 100%;
  left: 50%;
  translate: -50% -0.25rem;
  white-space: nowrap;
  font-family: var(--font-sans);
  font-size: var(--fs-meta);
  letter-spacing: 0.04em;
  color: var(--color-on-dark-accent);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base), translate var(--transition-base);
}

.icon-link:hover .icon-link__label,
.icon-link:focus-visible .icon-link__label {
  opacity: 1;
  translate: -50% 0;
}


.soon2 {
  background: var(--color-espresso);
  color: var(--color-on-dark);
}

.soon2 :focus-visible {
  outline-color: var(--color-on-dark-accent);
}

.soon2__page {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 15svh var(--section-px) clamp(2rem, 1rem + 4vh, 4rem);
}

.soon2__title {
  font-family: 'Meraki', var(--font-serif);
  font-weight: 700;
  font-size: 6.2vw;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  text-transform: uppercase;
  color: var(--color-terracotta-on-dark);
  margin-top: clamp(2.5rem, 1rem + 6vh, 5.5rem);
}

.soon2__status {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(0.9375rem, 0.8rem + 0.6vw, 1.25rem);
  letter-spacing: 0.24em;
  padding-left: 0.24em;
  text-transform: uppercase;
  color: var(--color-on-dark);
  margin-top: clamp(1rem, 0.5rem + 1.5vw, 2rem);
}

.soon2__lead {
  font-family: 'Meraki', var(--font-serif);
  font-weight: 300;
  font-size: clamp(0.9375rem, 0.88rem + 0.3vw, 1.125rem);
  line-height: 1.6;
  color: var(--color-on-dark);
  max-width: 48rem;
  text-wrap: pretty;
  margin-top: clamp(2rem, 1rem + 3vh, 3.5rem);
}

.soon2__cta {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem);
  letter-spacing: 0.2em;
  padding-left: 0.2em;
  text-transform: uppercase;
  color: var(--color-on-dark-muted);
  margin-top: clamp(2rem, 1rem + 3vh, 3.5rem);
}

.soon2__cta + .soon2__social {
  margin-top: clamp(0.5rem, 1vh, 1rem);
}

.soon2__social {
  display: flex;
  justify-content: center;
  gap: clamp(1.5rem, 1.25rem + 1vw, 2.25rem);
  margin-top: clamp(1.25rem, 0.5rem + 2vh, 2.25rem);
}

.soon2__skyline {
  position: absolute;
  inset: auto 0 0;
  z-index: -1;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.soon2__skyline img {
  flex-shrink: 0;
  max-width: none;
  width: min(100%, 120rem);
  height: auto;
  opacity: 0.16;
}

@media (max-width: 47.9375rem) {
  .soon2__skyline img {
    width: 170%;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .soon2__skyline img {
    animation: skyline-in 1.8s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
}

@keyframes skyline-in {
  from {
    opacity: 0;
    translate: 0 6%;
  }

  to {
    opacity: 0.16;
    translate: 0 0;
  }
}