/* Olympus — shared look. Star Map black, gold, one accent per god. */
:root{
  --bg:#07080C; --ink:#EDE6D6; --dim:#9C968A; --gold:#E8C46A;
  --apollo:#F2CF63; --hestia:#F08A3C; --atlas:#7FB2F0;
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0}
html,body{height:100%;background:var(--bg);color:var(--ink)}
body{font:16px/1.5 Georgia,"Times New Roman",serif;-webkit-tap-highlight-color:transparent;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  animation:in .35s ease-out}
@keyframes in{from{opacity:0}}
a{color:inherit;text-decoration:none}

/* slow colour drift behind everything */
.sky{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60% 40% at 20% 15%,#2a1d4a88,transparent 70%),
    radial-gradient(50% 35% at 85% 30%,#123a5a88,transparent 70%),
    radial-gradient(70% 45% at 50% 100%,#4a2a1288,transparent 70%);
  animation:drift 40s linear infinite}
@keyframes drift{to{filter:hue-rotate(360deg)}}
.stars{position:fixed;inset:0;z-index:-1;pointer-events:none}
@media (prefers-reduced-motion:reduce){.sky,body{animation:none}}

.caps{letter-spacing:.32em;text-transform:uppercase}

/* page-to-page zoom (iOS 18.2+, Chrome); others get the fade above */
@view-transition{navigation:auto}
::view-transition-group(*){animation-duration:.45s;animation-timing-function:cubic-bezier(.3,.7,.2,1)}
#v-apollo{view-transition-name:apollo} #v-hestia{view-transition-name:hestia} #v-atlas{view-transition-name:atlas}

/* god page */
.god{max-width:520px;margin:0 auto;padding:16px 16px 40px;min-height:100%;display:flex;flex-direction:column}
.back{font-size:.8rem;color:var(--dim);padding:8px 0;align-self:flex-start}
.hero{width:min(62vw,260px);aspect-ratio:100/120;margin:12px auto 0;display:block}
.god h1{font-weight:400;font-size:1.6rem;text-align:center;margin-top:8px}
.myth{font-style:italic;color:var(--dim);text-align:center;margin:12px auto 0;max-width:30ch}
.soon{margin-top:auto;padding-top:32px;text-align:center;font-size:.85rem;color:var(--dim)}
.soon a{color:var(--gold);border-bottom:1px solid #E8C46A55}