:root {
  --page: #f2e8f4;
  --shell: #fff;
  --ink: #0d0a0f;
  --purple: #392343;
  --accent: #71508b;
  --muted: #73657d;
  --soft: #97859f;
  --line: #e9e0ef;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; }
body {
  min-height: 100%;
  font-family: var(--font);
  color: var(--ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }

.site-shell {
  min-height: 100dvh;
  margin: 0;
  background: #fff;
  display: grid;
  grid-template-rows: 1fr auto;
  overflow: hidden;
  position: relative;
}
@supports not (min-height: 100dvh) { .site-shell { min-height: 100vh; } }

/* Hero */
.hero {
  display: grid;
  place-items: center;
  padding: 0 4% 10px;
  min-height: 0;
}

.universe {
  position: relative;
  width: min(100%, 760px);
  height: min(72vh, 600px);
}
.sculpture {
  position: absolute; top: 46%; left: 50%;
  width: 104%; height: 104%; max-width: none;
  object-fit: contain;
  transform: translate(-50%, -50%) rotate(-5deg);
  z-index: 2; pointer-events: none;
  will-change: transform;
}
.orbit-coin {
  position: absolute; top: 49%; left: 50%;
  width: 23%; max-width: 142px; height: auto;
  transform: translate(-50%, -50%);
  will-change: transform; pointer-events: none;
  filter: drop-shadow(0 12px 13px #492f590c);
}

/* Footer */
.footer { display: flex; justify-content: center; padding: 0 0 34px; }
.x-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%;
  color: var(--ink); opacity: .75;
  transition: opacity .2s, transform .2s, background .2s;
}
.x-link:hover, .x-link:focus-visible { opacity: 1; background: #f1e7f4; transform: translateY(-2px); outline: none; }
.x-link:focus-visible { box-shadow: 0 0 0 2px #8e69a7; }

/* Motion */
.motion-paused .sculpture, .motion-paused .orbit-coin { transition: none; }

/* Responsive */
@media (max-width: 980px) {
    .universe { height: min(60vh, 460px); }
}
@media (max-width: 720px) {
  .hero { padding: 0 4% 10px; }
  .universe { height: min(52vh, 380px); width: 100%; }
  .footer { padding-bottom: 26px; }
  .sculpture { width: 118%; height: 118%; top: 47%; }
  .orbit-coin { width: 26%; max-width: 118px; }
}
@media (prefers-reduced-motion: reduce) {
  .sculpture, .orbit-coin { will-change: auto; }
}