:root {
  color-scheme: dark;
  font-family: Arial, Helvetica, sans-serif;
  background: #10171b;
  color: #f3f1e9;
  font-synthesis: none;
}

* { box-sizing: border-box; }

html { min-height: 100%; }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at 80% 48%, rgba(62, 112, 105, .24), transparent 35%),
    radial-gradient(circle at 34% 100%, rgba(172, 106, 74, .09), transparent 40%),
    #10171b;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .18;
  background-image: linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: linear-gradient(90deg, transparent, #000 38%, #000);
}

.page-shell {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  max-width: 1600px;
  margin: 0 auto;
  padding: 34px clamp(24px, 5.7vw, 96px) 28px;
}

.site-header, .site-footer { display: flex; justify-content: space-between; align-items: center; }
.site-header { gap: 20px; }

.wordmark { display: inline-flex; gap: 12px; align-items: center; color: inherit; text-decoration: none; }
.wordmark-symbol { font-size: 43px; font-weight: 800; line-height: 1; letter-spacing: -.1em; }
.wordmark-symbol span { color: #e6a681; }
.wordmark-name { font-size: 11px; font-weight: 800; line-height: 1.05; letter-spacing: .17em; }
.header-note, .site-footer, .eyebrow, .coming-soon, .artwork-caption { font-size: 11px; font-weight: 700; letter-spacing: .18em; }
.header-note { color: #b7c3bf; }
.header-note span { color: #e6a681; font-size: 19px; margin-left: 8px; vertical-align: -1px; }

.hero { display: grid; grid-template-columns: 1.04fr .96fr; align-items: center; flex: 1; min-height: 680px; gap: 20px; }
.hero-copy { position: relative; z-index: 1; padding: 68px 0 54px; }
.eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 33px; color: #e6a681; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #e6a681; box-shadow: 0 0 20px rgba(230,166,129,.5); }

h1 { margin: 0; font-size: clamp(56px, 6.7vw, 112px); line-height: .98; letter-spacing: -.078em; font-weight: 700; }
h1 em { color: #9fc9b9; font-style: normal; }
.period { color: #e6a681; }
.intro { max-width: 490px; margin: 34px 0 0; color: #acb8b5; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.65; }
.coming-soon { display: flex; align-items: center; gap: 17px; margin-top: 55px; color: #f3f1e9; }
.line { width: 48px; height: 1px; background: #e6a681; }

.artwork { position: relative; width: min(100%, 640px); aspect-ratio: 1; justify-self: end; display: grid; place-items: center; }
.artwork::before { content: ""; position: absolute; width: 70%; aspect-ratio: 1; border-radius: 50%; background: #70a99a; filter: blur(105px); opacity: .17; }
.orbit { position: absolute; border: 1px solid rgba(196,226,215,.22); border-radius: 50%; }
.orbit-outer { inset: 4%; }
.orbit-middle { inset: 14%; border-style: dashed; transform: rotate(-15deg); }
.orbit-inner { inset: 25%; border-color: rgba(230,166,129,.45); }
.orbit-outer::before, .orbit-middle::before { content: ""; position: absolute; border-radius: 50%; background: #e6a681; }
.orbit-outer::before { width: 12px; height: 12px; top: 17%; left: 14%; }
.orbit-middle::before { width: 8px; height: 8px; right: 13%; bottom: 15%; background: #a7d1bf; }
.artwork-core { display: grid; place-items: center; width: 40%; aspect-ratio: 1; border-radius: 50%; background: linear-gradient(145deg, #cadacf, #6c9d8e 62%, #456c65); box-shadow: inset -26px -22px 50px rgba(10,31,29,.28), 0 28px 100px rgba(0,0,0,.3); transform: rotate(-12deg); }
.artwork-core span { color: #17312e; font-size: clamp(60px, 9vw, 140px); font-weight: 800; letter-spacing: -.1em; margin-right: .1em; }
.artwork-star { position: absolute; color: #e6a681; font-size: 24px; }
.star-one { top: 7%; right: 17%; }
.star-two { bottom: 13%; left: 13%; font-size: 15px; color: #a7d1bf; }
.artwork-caption { position: absolute; bottom: 0; right: 4%; color: #8caaa0; transform: rotate(-90deg) translateX(100%); transform-origin: right bottom; white-space: nowrap; }

.site-footer { gap: 16px; border-top: 1px solid rgba(255,255,255,.14); padding-top: 21px; color: #82918e; }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 0; padding-top: 70px; }
  .hero-copy { padding: 0; }
  .artwork { width: min(72%, 470px); margin: -28px auto 30px; justify-self: center; }
  .artwork-caption { display: none; }
}

@media (max-width: 560px) {
  .page-shell { padding: 24px 22px; }
  .wordmark-symbol { font-size: 36px; }
  .wordmark-name { font-size: 9px; }
  .header-note { font-size: 9px; max-width: 130px; text-align: right; line-height: 1.5; }
  .header-note span { font-size: 14px; margin-left: 3px; }
  .hero { padding-top: 68px; min-height: 0; }
  .eyebrow { font-size: 9px; margin-bottom: 27px; }
  h1 { font-size: clamp(52px, 13vw, 72px); }
  .intro { margin-top: 27px; font-size: 16px; }
  .coming-soon { margin-top: 40px; font-size: 10px; }
  .artwork { width: min(88%, 390px); margin: 10px auto 35px; }
  .site-footer { font-size: 9px; letter-spacing: .1em; }
}