:root {
  --esc-ink: #1a2f1b;
  --esc-olive: #6c6d33;
  --esc-sage: #57735d;
  --esc-sand: #f2eadd;
  --esc-cream: #f7f3eb;
  --esc-paper: #fdfaF4;
  --esc-copy: rgba(26, 47, 27, .78);
}

/* ==========================================
   Coming soon
   ========================================== */

.esc-coming-soon {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 620px;
  padding: 96px 24px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(
      circle at 50% 42%,
      rgba(255, 255, 255, 0.72) 0,
      rgba(255, 255, 255, 0) 48%
    ),
    var(--esc-sand);
}

.esc-coming-soon__content {
  position: relative;
  z-index: 1;
  width: 100%;
  text-align: center;
}

.esc-coming-soon__eyebrow {
  margin: 0 0 24px;
  color: var(--esc-sage);
  font: 500 12px/1.5 "Poppins", sans-serif;
  letter-spacing: 2.4px;
  text-transform: uppercase;
}

.esc-coming-soon h1 {
  margin: 0;
  color: var(--esc-ink);
  font: 400 68px/0.98 "Cormorant-Garamond", serif;
  letter-spacing: -1.5px;
}

.esc-coming-soon__divider {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 24px;
  margin: 28px auto;
}

.esc-coming-soon__divider::before,
.esc-coming-soon__divider::after {
  width: 36px;
  height: 1px;
  content: "";
  background: rgba(108, 109, 51, 0.4);
}

.esc-coming-soon__divider span {
  width: 7px;
  height: 7px;
  margin: 0 10px;
  border-radius: 50%;
  background: var(--esc-olive);
  transform: rotate(45deg);
}

.esc-coming-soon__message {
  margin: 0 auto;
  color: var(--esc-copy);
  font: 400 17px/1.75 "Poppins", sans-serif;
}

.esc-coming-soon__link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 40px;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(108, 109, 51, 0.55);
  color: var(--esc-olive);
  font: 500 13px/1.5 "Poppins", sans-serif;
  letter-spacing: 1px;
  text-decoration: none;
  text-transform: uppercase;
  transition:
    gap 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease;
}

.esc-coming-soon__link:hover {
  gap: 18px;
  border-color: var(--esc-ink);
  color: var(--esc-ink);
  text-decoration: none;
}

/* Soft decorative shapes */

.esc-coming-soon__decoration {
  position: absolute;
  z-index: -1;
  width: 420px;
  height: 420px;
  border: 1px solid rgba(108, 109, 51, 0.12);
  border-radius: 48% 52% 68% 32% / 42% 38% 62% 58%;
  pointer-events: none;
}

.esc-coming-soon__decoration--left {
  bottom: -230px;
  left: -160px;
  transform: rotate(28deg);
  background: rgba(108, 109, 51, 0.045);
}

.esc-coming-soon__decoration--right {
  top: -240px;
  right: -170px;
  transform: rotate(-25deg);
  background: rgba(26, 47, 27, 0.035);
}

/* ==========================================
   Coming soon — mobile
   ========================================== */

@media (max-width: 767.98px) {
  .esc-coming-soon {
    min-height: 520px;
    padding: 80px 24px;
  }

  .esc-coming-soon__eyebrow {
    margin-bottom: 20px;
    font-size: 11px;
    letter-spacing: 2px;
  }

  .esc-coming-soon h1 {
    font-size: 44px;
    line-height: 1.05;
    letter-spacing: -0.8px;
  }

  .esc-coming-soon__divider {
    margin-top: 22px;
    margin-bottom: 22px;
  }

  .esc-coming-soon__message {
    font-size: 15px;
    line-height: 1.7;
  }

  .esc-coming-soon__link {
    margin-top: 32px;
    font-size: 12px;
  }

  .esc-coming-soon__decoration {
    width: 280px;
    height: 280px;
  }

  .esc-coming-soon__decoration--left {
    bottom: -180px;
    left: -150px;
  }

  .esc-coming-soon__decoration--right {
    top: -180px;
    right: -150px;
  }
}