:root {
  --ink: #160320;
  --violet: #5c126f;
  --magenta: #b31ec6;
  --paper: #fff9ff;
}

@font-face {
  font-family: "Integral CF";
  src: url("/fonts/integralcf-heavy.otf") format("opentype");
  font-display: swap;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: Arial, Helvetica, sans-serif;
}

.landing-page {
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.hero {
  position: relative;
  width: min(100%, 1440px);
  height: 100svh;
  display: grid;
  grid-template-columns: minmax(300px, 0.9fr) minmax(500px, 1.45fr);
  align-items: stretch;
  isolation: isolate;
  overflow: hidden;
  background: #4f0874 url("/assets/novy-svet-gradient.png") center / cover no-repeat;
}

.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, rgba(22, 3, 32, 0.92) 0%, rgba(35, 3, 50, 0.76) 36%, rgba(44, 3, 60, 0.16) 72%, transparent 100%);
}

.hero-copy {
  padding: clamp(2.4rem, 6vw, 6rem) clamp(1.8rem, 5vw, 5.6rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  z-index: 1;
}

.eyebrow,
.coming-soon {
  margin: 0;
  font-size: clamp(0.75rem, 1vw, 0.95rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

h1 {
  display: grid;
  margin: 1rem 0 1.7rem;
  font-family: "Integral CF", Arial, sans-serif;
  font-size: clamp(4rem, 7.2vw, 8rem);
  line-height: 1.05;
  letter-spacing: 0;
  font-weight: 900;
}

h1 span { display: block; }

.tagline {
  max-width: 18rem;
  margin: 0 0 2.2rem;
  font-size: clamp(1.15rem, 1.8vw, 1.65rem);
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: 0.015em;
  text-transform: uppercase;
}

.cover-art {
  position: relative;
  margin: 0;
  min-width: 0;
  height: 100%;
  overflow: hidden;
}

.cover-art::after {
  content: none;
}

.cover-art img {
  display: block;
  height: auto;
}

.earth {
  position: absolute;
  z-index: 0;
  right: -24%;
  bottom: -8%;
  width: 150%;
  max-width: 1180px;
  opacity: 0.74;
  pointer-events: none;
}

.presenters {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: 0;
  width: min(108%, 920px);
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 1rem 1.3rem rgba(18, 0, 27, 0.32));
}

@media (max-width: 720px) {
  .hero {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    height: 100svh;
    background-position: 42% center;
  }

  .hero-copy {
    justify-content: center;
    padding-top: clamp(3rem, 10vh, 6rem);
    padding-bottom: 2rem;
    background: linear-gradient(180deg, rgba(22, 3, 32, 0.74), rgba(22, 3, 32, 0.08));
  }

  .cover-art {
    height: 100%;
    min-height: 0;
  }

  .cover-art::after {
    background: none;
  }

  .cover-art img {
    height: auto;
    min-height: 0;
    object-position: center;
  }

  .earth {
    right: -30%;
    bottom: -8%;
    width: 145%;
    opacity: 0.68;
  }

  .presenters { width: min(112%, 650px); }
}