:root {
  color-scheme: dark;
  font-family: Georgia, 'Times New Roman', serif;
  background: #302748;
  color: #fae9cc;
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 280px; }
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 25%, #68508455, transparent 65%);
}
main {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100svh;
  padding: 44px 24px 28px;
  overflow: hidden;
}
.brand { display: flex; align-items: center; gap: 17px; }
.moon { display: block; width: 100px; height: 100px; object-fit: contain; }
.wordmark { font-size: 29px; letter-spacing: -.8px; }
.wordmark span {
  display: block;
  margin-top: 9px;
  font: 10px/1.3 Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 6px;
  color: #ddc9ad;
}
h1 { margin: 38px 0 52px; font-size: clamp(52px, 7.7vw, 108px); font-weight: 400; letter-spacing: -.055em; line-height: 1.05; }
.artwork { position: relative; width: min(850px, 100%); height: 320px; }
.mosaic { position: absolute; width: 29%; padding: 7px; background: #e9d4ad; border-radius: 10px; box-shadow: 0 24px 45px #140c2d55; }
.mosaic img { display: block; width: 100%; height: auto; border-radius: 4px; }
.mosaic-arches { left: 1%; top: 15px; transform: rotate(-10deg); }
.mosaic-flowers { right: 1%; top: 15px; transform: rotate(10deg); }
.bob-world {
  position: absolute;
  z-index: 1;
  left: 32%;
  top: 28px;
  width: 36%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 45% 35%, #497574, #264f55 70%);
  box-shadow: 0 25px 60px #140c2d55, inset 0 0 0 1px #b8d9c21a;
}
.bob { position: absolute; width: 121%; height: auto; left: -10%; top: -8%; transform: rotate(-8deg); }
.cherries { position: absolute; width: 26%; height: auto; left: -5%; bottom: 2%; transform: rotate(-16deg); z-index: 2; }
.cookie { position: absolute; width: 25%; height: auto; right: -6%; top: 3%; transform: rotate(16deg); z-index: 2; }
.orbit { position: absolute; border: 1px solid #c0d1ba19; border-radius: 50%; inset: 13%; }
.orbit-two { inset: 5%; }
.spark { position: absolute; color: #f1cf88; font: 27px/1 Georgia, serif; }
.spark-one { left: 10%; top: 10%; transform: rotate(13deg); }
.spark-two { right: 12%; bottom: 12%; font-size: 19px; }
.signature { display: flex; align-items: center; gap: 15px; margin-top: 36px; color: #bfa9cd; }
.signature i { width: 45px; height: 1px; background: #bfa9cd44; }
.signature span { font-size: 21px; }

@media (min-width: 1400px) { .artwork { width: 940px; height: 350px; } }
@media (max-width: 600px) {
  main { padding: 40px 20px 25px; }
  .brand { flex-direction: column; gap: 10px; text-align: center; }
  .moon { width: 90px; height: 90px; }
  .wordmark { font-size: 26px; }
  .wordmark span { font-size: 9px; margin-top: 8px; padding-left: 6px; }
  h1 { margin: 35px 0 37px; font-size: clamp(43px, 11.8vw, 70px); }
  .artwork { width: min(390px, 100%); height: 300px; }
  .mosaic { width: 43%; padding: 5px; }
  .mosaic-arches { left: 1%; top: 3px; transform: rotate(-9deg); }
  .mosaic-flowers { right: 1%; top: 3px; transform: rotate(9deg); }
  .bob-world { left: 24%; top: 102px; width: 52%; }
  .signature { margin-top: 10px; }
}
@media (max-width: 360px) {
  .artwork { height: 265px; }
  .bob-world { top: 90px; }
}