:root {
  --brown: #1d1008;
  --gold: #c7ad72;
  --cream: #e5dcc5;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--brown);
  color: var(--cream);
  font-family: "Helvetica Neue", Arial, sans-serif;
}

.coming-soon {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
  isolation: isolate;
}

.coming-soon__background,
.coming-soon__overlay {
  position: absolute;
  inset: 0;
}

.coming-soon__background {
  z-index: -2;
  background: url("assets/hero-building.webp") 42% center / cover no-repeat;
  transform: scale(1.015);
}

.coming-soon__overlay {
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(14, 17, 17, .72), rgba(18, 12, 8, .12) 56%, rgba(20, 10, 5, .42)),
    linear-gradient(0deg, rgba(23, 11, 5, .78), transparent 48%);
}

.coming-soon__header,
.coming-soon__content,
.coming-soon__footer {
  width: min(1180px, calc(100% - 40px));
  margin-inline: auto;
}

.coming-soon__header { padding-top: 28px; }
.coming-soon__header img { width: 142px; height: auto; }

.coming-soon__content {
  align-self: center;
  padding-block: 70px;
  text-transform: uppercase;
  text-shadow: 0 4px 30px rgba(0, 0, 0, .38);
}

.coming-soon__content p,
.coming-soon__content span {
  margin: 0;
  color: var(--gold);
  letter-spacing: .24em;
}

.coming-soon__content p { font-size: clamp(.65rem, 1.15vw, .9rem); }

.coming-soon__content h1 {
  margin: 12px 0 18px;
  color: var(--cream);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3.8rem, 10vw, 8.5rem);
  font-weight: 400;
  letter-spacing: .04em;
  line-height: .92;
}

.coming-soon__content span { font-size: .62rem; }

.coming-soon__footer {
  padding-bottom: 26px;
  color: rgba(229, 220, 197, .5);
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: .55rem;
}

@media (min-width: 700px) {
  .coming-soon__header,
  .coming-soon__content,
  .coming-soon__footer { width: min(1180px, calc(100% - 96px)); }
  .coming-soon__header { padding-top: 42px; }
  .coming-soon__header img { width: 160px; }
  .coming-soon__background { background-position: center; }
}

@media (prefers-reduced-motion: no-preference) {
  .coming-soon__content { animation: reveal 1s ease-out both; }
  @keyframes reveal {
    from { opacity: 0; transform: translateY(22px); }
    to { opacity: 1; transform: none; }
  }
}