:root {
  color-scheme:light;
  --ink:#183d32;
  --muted:#52645b;
  --paper:#f5f3ec;
  --line:#d5dbd0;
  --gold:#bd8247;
}

* {
  box-sizing:border-box;
}

body {
  margin:0;
  min-height:100svh;
  background:var(--paper);
  color:var(--ink);
  font-family:Arial,Helvetica,sans-serif;
  display:flex;
  flex-direction:column;
}

.masthead,footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  margin:0 clamp(24px,5vw,88px);
}

.masthead {
  min-height:112px;
  border-bottom:1px solid var(--line);
}

.brand {
  display:flex;
  align-items:center;
  gap:9px;
  font-size:24px;
  letter-spacing:-1px;
  font-weight:600;
}

.brand img {
  margin-right:4px;
}

.brand>span {
  font-weight:400;
}

.status,.eyebrow,.coming-soon {
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:2.6px;
}

.status {
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--muted);
  letter-spacing:1.8px;
}

.status>span {
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--gold);
}

main {
  position:relative;
  isolation:isolate;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:6vw;
  width:100%;
  max-width:1600px;
  margin:auto;
  flex:1;
  padding:clamp(36px,6vw,100px) clamp(24px,8vw,130px);
}

.message {
  grid-column:1;
  grid-row:1;
  z-index:1;
}

.eyebrow {
  margin:0 0 24px;
  color:var(--muted);
}

h1 {
  font-family:Georgia,'Times New Roman',serif;
  font-weight:400;
  font-size:clamp(76px,8.7vw,136px);
  line-height:.94;
  letter-spacing:-.055em;
  margin:0;
}

h1 em {
  font-weight:400;
  color:#506a4f;
}

.coming-soon {
  display:inline-block;
  margin:34px 0 0;
  padding:12px 18px;
  border:1px solid #b9c3b3;
  border-radius:40px;
  font-size:10px;
}

.intro {
  font-size:16px;
  line-height:1.8;
  color:var(--muted);
  margin:25px 0 0;
}

.horizon {
  position:relative;
  grid-column:2;
  grid-row:1;
  aspect-ratio:4/5;
  max-height:520px;
  width:100%;
  border-radius:48% 48% 2px 2px;
  overflow:hidden;
  background:#e3e5d7;
  border:1px solid #dce0d0;
}

.sun {
  position:absolute;
  width:49%;
  aspect-ratio:1;
  left:25.5%;
  top:19%;
  border-radius:50%;
  background:#dba965;
  box-shadow:0 0 0 22px #e5bc833d,0 0 0 45px #e5bc831a;
}

.land {
  position:absolute;
  inset:58% -20% -45%;
  border-radius:50% 50% 0 0;
  background:#799275;
  transform:rotate(-13deg);
}

.land:after {
  content:"";
  position:absolute;
  inset:17% -7% -12%;
  background:#385941;
  border-radius:50% 50% 0 0;
  transform:rotate(30deg);
}

footer {
  border-top:1px solid var(--line);
  min-height:88px;
  font-size:11px;
  color:var(--muted);
  letter-spacing:.4px;
}

@media(min-width:1500px) {
  main {
    gap:10vw;
  }
  .horizon {
    max-width:440px;
    justify-self:end;
  }
}

@media(max-width:680px) {
  .masthead {
    min-height:86px;
  }
  .brand {
    font-size:21px;
  }
  .status {
    display:none;
  }
  main {
    grid-template-columns:1fr;
    padding:46px 28px 32px;
    gap:38px;
  }
  .message {
    grid-column:1;
    grid-row:1;
  }
  .eyebrow {
    margin-bottom:21px;
  }
  h1 {
    font-size:88px;
  }
  .coming-soon {
    margin-top:27px;
  }
  .intro {
    font-size:15px;
    margin-top:20px;
  }
  .horizon {
    grid-column:1;
    grid-row:2;
    width:66%;
    max-width:260px;
    aspect-ratio:5/4;
    border-radius:48% 48% 2px 2px;
    justify-self:end;
    margin-top:-12px;
  }
  .sun {
    top:15%;
    width:38%;
    left:31%;
  }
  .land {
    inset:58% -20% -70%;
  }
  footer {
    min-height:78px;
    align-items:flex-start;
    justify-content:center;
    flex-direction:column;
    gap:8px;
    padding:18px 0;
    font-size:10px;
  }
}

@media(max-width:360px) {
  h1 {
    font-size:76px;
  }
  main {
    padding-left:24px;
    padding-right:24px;
  }
  .intro {
    font-size:14px;
  }
}