html {
  min-height: 100%;
  font-size: 14px;
  position: relative;
  --shell-color: #fff9f4;
  --panel-color: #fffcf8;
  --blush-color: #ffeceb;
  --accent-color: #ff7f83;
  --accent-soft-color: #ffd6d4;
  --ink-color: #3e211b;
  --muted-ink-color: #7c5f58;
  --line-color: #f2d9cf;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
  box-shadow: 0 0 0 0.1rem var(--panel-color), 0 0 0 0.25rem var(--accent-soft-color);
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink-color);
  background:
    radial-gradient(circle at 20% 20%, var(--panel-color), rgba(255, 252, 248, 0) 28rem),
    linear-gradient(135deg, var(--shell-color) 0%, var(--blush-color) 58%, var(--accent-soft-color) 100%);
  font-family: Georgia, "Times New Roman", serif;
}

main {
  min-height: 100vh;
}

.coming-soon {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.25rem;
  text-align: center;
}

.brand-mark {
  display: block;
  width: min(30rem, 250vw);
  height: auto;
  margin-bottom: 1.75rem;
  filter: drop-shadow(0 1.5rem 2.5rem rgba(62, 33, 27, 0.14));
}

.eyebrow {
  margin: 0 0 0.65rem;
  color: var(--accent-color);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.16rem;
  text-transform: uppercase;
}

h1 {
  max-width: 11ch;
  margin: 0;
  color: var(--ink-color);
  font-size: clamp(3.25rem, 9vw, 7rem);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 0.92;
}

.intro {
  max-width: 39rem;
  margin: 1.4rem 0 0;
  color: var(--muted-ink-color);
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(1rem, 2vw, 1.18rem);
  line-height: 1.7;
}