:root {
  color-scheme: light;
  font-family: "Trebuchet MS", "Avenir Next", Avenir, sans-serif;
  color: #14323e;
  background: #f6f4ed;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }

body { margin: 0; }

.page-shell { min-height: 100vh; overflow: hidden; }

.site-header, .site-footer {
  width: min(1280px, calc(100% - 96px));
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-header { min-height: 112px; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: #14323e;
  text-decoration: none;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .18em;
}

.brand-mark { width: 42px; height: 42px; }

.header-note, .eyebrow, .closing p, .art-caption, .site-footer {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .19em;
}

.header-note { color: #6e8585; }

.hero {
  width: min(1280px, calc(100% - 96px));
  min-height: 625px;
  margin: 12px auto 0;
  display: grid;
  grid-template-columns: 51% 49%;
  align-items: center;
}

.hero-copy { position: relative; z-index: 2; padding: 10px 0 55px 5%; }

.eyebrow { display: flex; align-items: center; gap: 14px; color: #bb794d; }
.eyebrow-line { width: 28px; height: 1px; background: currentColor; }

h1 {
  margin: 26px 0 26px;
  font-family: Georgia, "Iowan Old Style", serif;
  font-size: clamp(3.8rem, 6.5vw, 6.4rem);
  font-weight: 400;
  letter-spacing: -.065em;
  line-height: 1.04;
}

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

.intro {
  max-width: 430px;
  margin: 0;
  color: #526a6e;
  font-size: 18px;
  line-height: 1.8;
}

.coming-soon {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 34px;
  padding: 12px 19px;
  border: 1px solid #bfcfc9;
  border-radius: 100px;
  color: #315d5d;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .035em;
}

.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #79a98c; }

.hero-art {
  position: relative;
  height: 610px;
  overflow: hidden;
  border-radius: 260px 260px 12px 12px;
  background: linear-gradient(180deg, #d3e0dd 0%, #e5e7dc 42%, #adcac6 43%, #4f9298 74%, #245c70 100%);
}

.hero-art::before, .hero-art::after {
  content: "";
  position: absolute;
  left: -20%;
  width: 140%;
  height: 25%;
  border-radius: 50%;
}

.hero-art::before { bottom: 9%; background: #2e7786; transform: rotate(-5deg); }
.hero-art::after { bottom: -14%; background: #153f55; transform: rotate(5deg); }

.sun {
  position: absolute;
  top: 78px;
  left: 23%;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: #f4d2a4;
  box-shadow: 0 0 90px 45px #f4d2a455;
}

.distant-shore {
  position: absolute;
  top: 40%;
  left: -5%;
  width: 110%;
  height: 11%;
  border-radius: 50% 50% 0 0;
  background: #83a9a5;
  opacity: .55;
}

.boat-art {
  position: absolute;
  z-index: 1;
  top: 17%;
  left: -4%;
  width: 108%;
  filter: drop-shadow(0 22px 18px #123d4a42);
}

.art-caption {
  position: absolute;
  z-index: 2;
  right: 25px;
  bottom: 23px;
  color: #e0e8dd;
}

.closing {
  width: min(1280px, calc(100% - 96px));
  margin: 54px auto 75px;
  padding: 28px 5%;
  border-top: 1px solid #d5dcd5;
  display: flex;
  gap: 25px;
  align-items: center;
  justify-content: space-between;
}

.closing p { margin: 0; color: #b9764d; }
.closing span { color: #698183; font-family: Georgia, serif; font-size: 18px; font-style: italic; }

.site-footer { padding: 25px 0 36px; border-top: 1px solid #d5dcd5; color: #839695; letter-spacing: .04em; }

@media (max-width: 900px) {
  .site-header, .site-footer, .hero, .closing { width: min(100% - 48px, 620px); }
  .site-header { min-height: 88px; }
  .header-note { display: none; }
  .hero { grid-template-columns: 1fr; margin-top: 0; }
  .hero-copy { padding: 55px 0 48px; }
  .hero-art { height: min(100vw, 580px); min-height: 390px; }
  .closing { flex-direction: column; align-items: flex-start; gap: 12px; margin: 46px auto; padding-inline: 0; }
}

@media (max-width: 500px) {
  .site-header, .site-footer, .hero, .closing { width: calc(100% - 36px); }
  .brand { font-size: 15px; letter-spacing: .14em; }
  .brand-mark { width: 36px; height: 36px; }
  .hero-copy { padding-top: 36px; }
  .eyebrow { font-size: 9px; letter-spacing: .12em; }
  h1 { font-size: clamp(3.45rem, 13vw, 5rem); }
  .intro { font-size: 16px; }
  .hero-art { min-height: 360px; border-radius: 180px 180px 8px 8px; }
  .sun { width: 145px; height: 145px; top: 52px; }
  .boat-art { top: 22%; }
  .site-footer { align-items: flex-start; flex-direction: column; gap: 10px; }
}