:root {
  --night: #18100b;
  --sand: #f6ecdc;
  --ochre: #d89a4c;
  --ochre-light: #f1c27d;
  --line: rgba(255, 246, 233, 0.46);
  --muted: rgba(255, 246, 233, 0.78);
}

* {
  box-sizing: border-box;
}

html {
  background: var(--night);
}

body {
  min-width: 320px;
  min-height: 100svh;
  margin: 0;
  color: var(--sand);
  background: var(--night);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.page-shell {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  overflow: hidden;
  padding: clamp(1.5rem, 4vw, 3.25rem) clamp(1.5rem, 6.2vw, 7rem) clamp(1.75rem, 4vw, 3.25rem);
  background: var(--night);
}

.hero-image {
  position: absolute;
  z-index: -3;
  inset: 0;
  background-image: url("/manus-storage/mongolia-gobi-cliffs_bd7a5d72.jpg");
  background-position: center center;
  background-size: cover;
  transform: scale(1.012);
  animation: image-settle 900ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.page-shell::before {
  position: absolute;
  z-index: -2;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(24, 16, 11, 0.9) 0%, rgba(24, 16, 11, 0.8) 32%, rgba(24, 16, 11, 0.36) 59%, rgba(24, 16, 11, 0.08) 100%),
    linear-gradient(0deg, rgba(11, 7, 5, 0.62) 0%, rgba(11, 7, 5, 0.08) 48%, rgba(11, 7, 5, 0.18) 100%);
  content: "";
}

.page-shell::after {
  position: absolute;
  z-index: -1;
  right: clamp(-15rem, -6vw, -5rem);
  bottom: clamp(-14rem, -8vw, -7rem);
  width: clamp(23rem, 42vw, 39rem);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 240, 214, 0.18);
  border-radius: 50%;
  box-shadow: 0 0 6rem rgba(216, 154, 76, 0.12);
  content: "";
  pointer-events: none;
}

.sun-disc {
  position: absolute;
  top: clamp(1.55rem, 4vw, 3rem);
  right: clamp(1.5rem, 6.2vw, 7rem);
  width: clamp(0.65rem, 1vw, 0.88rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--ochre-light);
  box-shadow: 0 0 1.2rem rgba(241, 194, 125, 0.4);
}

.masthead {
  position: relative;
  z-index: 1;
  width: min(100%, 76rem);
}

.wordmark {
  margin: 0;
  padding-right: 2rem;
  color: #fff8ed;
  font-family: Iowan Old Style, Baskerville, "Times New Roman", serif;
  font-size: clamp(1.05rem, 1.25vw, 1.28rem);
  font-weight: 600;
  letter-spacing: -0.025em;
}

.horizon {
  width: min(11rem, 32vw);
  height: 1px;
  margin-top: 0.95rem;
  background: var(--line);
}

.coming-soon {
  position: relative;
  z-index: 1;
  width: min(100%, 38rem);
  margin: auto 0 0;
  padding: clamp(5.5rem, 12vh, 8rem) 0 0;
  animation: content-settle 700ms 100ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

h1,
.tagline,
.journey,
.launch-message {
  max-width: 100%;
}

h1 {
  margin: 0;
  color: #fffaf1;
  font-family: Iowan Old Style, Baskerville, "Times New Roman", serif;
  font-size: clamp(3.5rem, 7.5vw, 7.25rem);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.068em;
  text-wrap: balance;
}

.tagline {
  max-width: 28rem;
  margin: clamp(1.45rem, 3vw, 2.35rem) 0 0;
  color: #fff7eb;
  font-size: clamp(1.22rem, 1.75vw, 1.68rem);
  font-weight: 520;
  line-height: 1.26;
  letter-spacing: -0.025em;
}

.journey {
  max-width: 33rem;
  margin: clamp(1.5rem, 2.8vw, 2.25rem) 0 0;
  color: var(--muted);
  font-size: clamp(0.98rem, 1.15vw, 1.08rem);
  line-height: 1.62;
}

.launch-message {
  margin: clamp(1.4rem, 2.35vw, 1.85rem) 0 0;
  color: #fff8ef;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.cta {
  display: inline-flex;
  align-items: center;
  gap: 1.15rem;
  min-height: 3.45rem;
  margin-top: clamp(1.9rem, 3.8vw, 2.7rem);
  padding: 0.75rem 1.05rem 0.75rem 1.35rem;
  color: #23150a;
  background: var(--ochre-light);
  border: 1px solid var(--ochre-light);
  border-radius: 999px;
  box-shadow: 0 0.75rem 1.7rem rgba(0, 0, 0, 0.22);
  font-size: 0.94rem;
  font-weight: 750;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.cta span {
  display: grid;
  width: 1.45rem;
  aspect-ratio: 1;
  place-items: center;
  color: var(--sand);
  background: var(--night);
  border-radius: 50%;
  font-size: 1rem;
}

.cta:hover {
  background: #fff7ea;
  border-color: #fff7ea;
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.3);
  transform: translateY(-2px);
}

.cta:focus-visible {
  outline: 3px solid #fff7ea;
  outline-offset: 4px;
}

@keyframes content-settle {
  from {
    opacity: 0;
    transform: translateY(0.75rem);
  }

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

@keyframes image-settle {
  from {
    opacity: 0.7;
    transform: scale(1.035);
  }

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

@media (max-width: 42rem) {
  .page-shell {
    padding: 1.5rem 1.5rem 1.75rem;
  }

  .hero-image {
    background-position: 55% center;
  }

  .page-shell::before {
    background:
      linear-gradient(180deg, rgba(18, 11, 8, 0.67) 0%, rgba(18, 11, 8, 0.28) 24%, rgba(18, 11, 8, 0.7) 49%, rgba(18, 11, 8, 0.91) 100%),
      linear-gradient(90deg, rgba(18, 11, 8, 0.44), rgba(18, 11, 8, 0.08));
  }

  .page-shell::after {
    right: -12rem;
    bottom: -11rem;
    width: 26rem;
  }

  .coming-soon {
    width: 100%;
    padding-top: clamp(9.5rem, 22vh, 12rem);
  }

  h1 {
    font-size: clamp(3.1rem, 14vw, 4.2rem);
    line-height: 0.91;
  }

  .tagline {
    max-width: 20rem;
    margin-top: 1.25rem;
    font-size: 1.2rem;
  }

  .journey {
    max-width: 21.5rem;
    margin-top: 1.45rem;
    font-size: 0.97rem;
    line-height: 1.56;
  }

  .launch-message {
    margin-top: 1.3rem;
  }

  .cta {
    width: fit-content;
    min-height: 3.5rem;
    margin-top: 1.8rem;
  }
}

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