:root {
  color-scheme: dark;
  --teal-deep: #033d35;
  --teal-shadow: #022a25;
  --teal-soft: #8ca29d;
  --cream: #f0f1e8;
  --cream-muted: #d7ddd2;
  --line: rgba(240, 241, 232, 0.2);
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--teal-deep);
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--cream);
  background:
    radial-gradient(ellipse at 50% 14%, rgba(240, 241, 232, 0.14), rgba(140, 162, 157, 0.05) 18rem, transparent 34rem),
    radial-gradient(circle at 18% 22%, rgba(140, 162, 157, 0.16), transparent 28rem),
    radial-gradient(circle at 82% 78%, rgba(240, 241, 232, 0.08), transparent 24rem),
    linear-gradient(145deg, var(--teal-deep), var(--teal-shadow));
  font-family: Georgia, "Times New Roman", serif;
  position: relative;
}

.site-header {
  position: absolute;
  top: clamp(2rem, 6vh, 4rem);
  right: clamp(1.5rem, 5vw, 4rem);
  left: clamp(1.5rem, 5vw, 4rem);
  display: flex;
  justify-content: center;
}

.page-shell {
  display: grid;
  min-height: 100vh;
  padding: clamp(7rem, 15vh, 10rem) clamp(2rem, 5vw, 4.5rem) clamp(4.5rem, 7vw, 6rem);
  place-items: center;
}

.coming-soon-card {
  display: grid;
  width: min(100%, 54rem);
  justify-items: center;
  padding: clamp(1.5rem, 4vw, 3rem) clamp(1.5rem, 5vw, 4rem);
  text-align: center;
}

.logo {
  display: block;
  width: min(100%, 18.9rem);
  height: auto;
}

.content {
  display: grid;
  gap: clamp(1rem, 2.4vw, 1.6rem);
  justify-items: center;
}

.eyebrow {
  margin: 0;
  color: var(--cream-muted);
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(0.9rem, 1.8vw, 1.05rem);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.65;
}

h1 {
  max-width: 18ch;
  margin: 0;
  font-size: clamp(1.8rem, 6vw, 3.8rem);
  font-weight: 400;
  line-height: 1.02;
}

.site-footer {
  position: absolute;
  right: clamp(1.5rem, 4vw, 3rem);
  bottom: clamp(1.5rem, 4vw, 2.5rem);
  left: clamp(1.5rem, 4vw, 3rem);
  color: rgba(240, 241, 232, 0.58);
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 0.78rem;
  line-height: 1.5;
  text-align: center;
}

@media (max-width: 38rem) {
  .site-header {
    top: clamp(2rem, 8vh, 3.25rem);
  }

  .page-shell {
    padding-top: clamp(7.5rem, 20vh, 9rem);
  }

  .logo {
    width: min(100%, 14rem);
  }

  .eyebrow {
    max-width: 24rem;
  }
}