:root {
  color: #f6f8fa;
  background: #172536;
  font-family: system-ui, sans-serif;
  line-height: 1.55;
}

* { box-sizing: border-box; }
body { margin: 0; isolation: isolate; }

body::before, .backdrop {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
}

.backdrop {
  z-index: -2;
  object-fit: cover;
  object-position: 55% 48%;
}

body::before {
  content: "";
  z-index: -1;
  background: linear-gradient(90deg, rgb(11 21 33 / 83%), rgb(11 21 33 / 30%) 65%, transparent),
    linear-gradient(0deg, rgb(11 21 33 / 88%), transparent 72%);
}

main {
  display: flex;
  flex-direction: column;
  justify-content: end;
  min-height: 100vh;
  min-height: 100svh;
  max-width: 1600px;
  margin-inline: auto;
  padding: clamp(28px, 7vw, 100px) max(22px, 7vw);
}

.kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 clamp(16px, 3vh, 30px);
  font-size: .78rem;
  font-weight: 650;
  letter-spacing: .17em;
}

.kicker::before {
  content: "";
  width: 24px;
  height: 1px;
  flex: none;
  background: #f3c5d4;
}

h1 {
  margin: 0;
  font-family: Georgia, serif;
  font-size: clamp(2.45rem, 7.5vw, 7.5rem);
  font-weight: 400;
  line-height: .98;
  letter-spacing: -.05em;
}

h1 em { display: block; color: #f3c5d4; }

.intro {
  max-width: 36ch;
  margin: clamp(19px, 3.8vh, 36px) 0 0;
  font-size: clamp(1rem, 1.55vw, 1.24rem);
}

@media (max-width: 640px) {
  .backdrop { object-position: 61% center; }
  body::before {
    background: linear-gradient(0deg, rgb(11 21 33 / 94%), rgb(11 21 33 / 65%) 55%, rgb(11 21 33 / 14%));
  }
}