:root {
  --ivory: #f2eee8;
  --muted: #aaa6a1;
  --black: #050505;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  background: var(--black);
  color: var(--ivory);
}

.coming-soon {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: var(--black);
}

.content {
  position: relative;
  z-index: 2;
  padding: clamp(76px, 10.4vh, 150px) 22px 0;
}

.brand {
  margin: 0;
  color: var(--ivory);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(3.8rem, 8.3vw, 6.4rem);
  font-weight: 300;
  letter-spacing: .105em;
  line-height: .95;
}

.year {
  margin: 28px 0 0;
  color: var(--muted);
  font-family: "Montserrat", sans-serif;
  font-size: clamp(1rem, 1.8vw, 1.45rem);
  font-weight: 300;
  letter-spacing: .68em;
  padding-left: .68em;
}

.message-block { margin: clamp(86px, 11.2vh, 155px) auto 0; }
.headline {
  margin: 0 auto;
  max-width: 920px;
  color: var(--ivory);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(2.6rem, 5.9vw, 4.8rem);
  font-weight: 300;
  line-height: 1.03;
  letter-spacing: -.025em;
}
.headline em { font-weight: 400; }

.ornament {
  display: block;
  width: 134px;
  height: 1px;
  margin: clamp(48px, 6.4vh, 78px) auto 0;
  background: #c9c4bd;
  opacity: .8;
}

.coming-label {
  margin: 47px auto 0;
  color: var(--ivory);
  font-family: "Montserrat", sans-serif;
  font-size: clamp(.72rem, 1.65vw, 1.15rem);
  font-weight: 400;
  letter-spacing: .31em;
  line-height: 1.8;
}

.wood-scene {
  position: absolute;
  z-index: 1;
  left: 9.2%;
  right: 0;
  bottom: 0;
  height: 43%;
  min-height: 300px;
  background-image:
    linear-gradient(to bottom, var(--black) 0%, rgba(5,5,5,.15) 13%, rgba(5,5,5,0) 34%),
    url("assets/wood-detail.jpg");
  background-position: center top, center 38%;
  background-repeat: no-repeat;
  background-size: 100% 100%, cover;
  border-top-left-radius: 17% 12%;
}

@media (min-width: 1400px) {
  .wood-scene { left: max(9.2%, calc((100vw - 1450px) / 2)); right: max(0px, calc((100vw - 1600px) / 2)); }
}

@media (max-width: 767.98px) {
  .content { padding-top: 9vh; }
  .brand { font-size: clamp(3.2rem, 13vw, 5rem); letter-spacing: .075em; }
  .year { margin-top: 20px; letter-spacing: .55em; }
  .message-block { margin-top: 11vh; }
  .headline { font-size: clamp(2.35rem, 8.7vw, 3.5rem); line-height: 1.06; }
  .desktop-break { display: none; }
  .ornament { width: 105px; margin-top: 40px; }
  .coming-label { max-width: 340px; margin-top: 30px; font-size: .68rem; letter-spacing: .22em; }
  .wood-scene {
    left: 7%;
    height: 38%;
    min-height: 240px;
    background-position: center top, 43% center;
  }
}

@media (max-width: 380px) {
  .content { padding-left: 15px; padding-right: 15px; }
  .headline { font-size: 2.15rem; }
  .coming-label { font-size: .61rem; letter-spacing: .17em; }
  .wood-scene { height: 34%; }
}