/* shared by the maker and every exported zine */
:root { --ink: #1e1a16; --paper: rgba(250, 246, 236, .93); --gold: #c9a35a; }
html, body { margin: 0; height: 100%; background: #04040a; color: #f2eee6; }
body { font: 17px/1.5 "Cormorant Garamond", Georgia, serif; }
button { font: inherit; cursor: pointer; }

.wv { position: relative; width: 100%; height: 100%; overflow: hidden; touch-action: none; outline: none; cursor: grab; }
.wv:active { cursor: grabbing; }
.wv-gl, .wv-css { position: absolute; inset: 0; }
.wv-css { pointer-events: none; }
.wv-css button, .wv-css a { pointer-events: auto; }

.panel { font-family: "Cormorant Garamond", Georgia, serif; width: 360px; padding: 22px 26px; background: var(--paper); color: var(--ink); border-radius: 4px;
         box-shadow: 0 20px 60px rgba(0,0,0,.45); font-size: 17px; line-height: 1.45; }
.panel h2 { margin: 0 0 .4em; font-size: 28px; line-height: 1.05; font-weight: 700; }
.panel p { margin: 0 0 .6em; }
.panel .place { display: block; font-size: 15px; font-style: italic; font-weight: 500; opacity: .7; }
.panel-d { width: 420px; text-align: center; }
.moon { width: 110px; height: 110px; border: 0; border-radius: 50%;
        background: radial-gradient(circle at 38% 35%, #fffef4, #d8d4c4 55%, #8d897c); box-shadow: 0 0 60px rgba(255,255,230,.5); }
.door { display: grid; justify-items: center; gap: 8px; border: 0; background: none; color: #fff; font-size: 22px; }
.door img { width: 220px; height: 220px; border-radius: 50%; animation: spin 60s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* the worlds floating in space (zine home) */
#space { min-height: 100%; padding: 40px 16px; text-align: center;
         background: radial-gradient(ellipse at 50% 30%, #1b1840, #04040a 70%); }
#space h1 { margin: 0; font-size: clamp(40px, 8vw, 72px); font-weight: 700; letter-spacing: .02em; }
#space .hint { max-width: 34em; margin: .4em auto 30px; opacity: .75; font-style: italic; }
#planets { display: flex; flex-wrap: wrap; gap: 28px; justify-content: center; }
.planet { --d: 0s; display: grid; justify-items: center; gap: 8px; border: 0; background: none; color: #f2eee6; font-size: 19px;
          animation: bob 7s ease-in-out infinite; animation-delay: calc(var(--d) * -1); }
.planet img { width: min(42vw, 220px); aspect-ratio: 1; border-radius: 50%; transition: transform .4s; }
.planet:hover img, .planet:focus-visible img { transform: scale(1.06) rotate(-8deg); }
@keyframes bob { 50% { transform: translateY(-12px); } }
#stage { position: fixed; inset: 0; }
#gyro { position: fixed; right: 16px; bottom: 16px; padding: 10px 16px; border-radius: 999px; border: 1px solid #fff6; background: #0008; color: #fff; }
@media (prefers-reduced-motion: reduce) { .planet, .door img { animation: none; } }