:root {
  --ink: #071827;
  --night: #02070c;
  --blue: #0b3654;
  --red: #ef3d42;
  --bone: #f4efe5;
  --mist: #96a9b6;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  background: var(--night);
  color: var(--bone);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
a { color: inherit; }

.site-shell {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  display: grid;
  grid-template-rows: 1fr auto;
  isolation: isolate;
  background:
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px) 50% 50% / 72px 72px,
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px) 50% 50% / 72px 72px,
    radial-gradient(circle at 50% 42%, #0a273b 0, #06141f 32%, var(--night) 68%);
}

.ambient { position: absolute; inset: 0; overflow: hidden; z-index: -1; }
.ambient::before,
.ambient::after {
  content: "";
  position: absolute;
  left: 50%; top: 43%;
  width: min(76vw, 820px); aspect-ratio: 1;
  border: 1px solid rgba(111, 173, 200, .10);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.ambient::after { width: min(94vw, 1040px); border-style: dashed; opacity: .5; }
.orb { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .22; }
.orb-one { width: 310px; height: 310px; background: #19577a; left: 8%; top: 12%; }
.orb-two { width: 220px; height: 220px; background: #70202a; right: 10%; bottom: 12%; opacity: .12; }
.grain { position: absolute; inset: 0; opacity: .12; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E"); mix-blend-mode: soft-light; }

.hero {
  width: min(1160px, calc(100% - 48px));
  margin: auto;
  padding: 72px 0 48px;
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(300px, .9fr);
  gap: clamp(48px, 8vw, 112px);
  align-items: center;
}

.totem-stage { position: relative; width: min(52vw, 500px); aspect-ratio: 1; display: grid; place-items: center; }
.logo-seal {
  position: relative; z-index: 2;
  width: 62%; aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.98) 0 3%, transparent 11%),
    radial-gradient(circle at 64% 70%, rgba(99,115,122,.18) 0 4%, transparent 12%),
    radial-gradient(circle at 73% 31%, rgba(106,119,124,.13) 0 2%, transparent 9%),
    radial-gradient(circle at 50% 40%, #fff 0 45%, #e8eceb 72%, #bfc9cb 100%);
  box-shadow:
    0 0 0 1px rgba(244,249,247,.55),
    0 0 24px rgba(206,235,243,.48),
    0 0 70px rgba(130,196,219,.34),
    0 0 140px rgba(93,165,192,.16),
    inset -20px -24px 48px rgba(30,52,62,.24);
  animation: moon-breathe 6.5s ease-in-out infinite;
}
.logo-seal::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background:
    radial-gradient(circle at 26% 66%, rgba(35,52,58,.16) 0 4%, transparent 9%),
    radial-gradient(circle at 74% 52%, rgba(35,52,58,.12) 0 6%, transparent 13%),
    radial-gradient(circle at 48% 17%, rgba(35,52,58,.11) 0 3%, transparent 8%);
  mix-blend-mode: multiply;
}
.logo-seal img {
  position: relative; z-index: 1;
  width: 100%; height: 100%; object-fit: cover; transform: scale(1.02);
  filter: grayscale(1) contrast(.72) brightness(1.2);
  opacity: .68; mix-blend-mode: multiply;
}
.orbit { position: absolute; border-radius: 50%; pointer-events: none; }
.orbit-outer {
  z-index: 1; inset: 3%; border: 1px solid rgba(162,200,215,.24);
  box-shadow: inset 0 0 45px rgba(79,142,168,.06);
  animation: spin 34s linear infinite;
}
.orbit-outer::before, .orbit-outer::after { content: ""; position: absolute; inset: 10%; border-radius: 50%; border: 1px dashed rgba(162,200,215,.16); }
.orbit-outer::after { inset: 22%; border-style: solid; }
.orbit-outer span { position: absolute; color: #b7ced7; font-size: 10px; text-shadow: 0 0 12px #8dc6dc; }
.orbit-outer span:nth-child(1) { left: 50%; top: -6px; }
.orbit-outer span:nth-child(2) { right: -2px; top: 50%; }
.orbit-outer span:nth-child(3) { left: 50%; bottom: -6px; }
.orbit-outer span:nth-child(4) { left: -2px; top: 50%; }
.orbit-inner { z-index: 1; inset: 15%; border: 1px solid rgba(186,215,225,.13); animation: spin-reverse 20s linear infinite; }
.orbit-inner::before, .orbit-inner::after { content: ""; position: absolute; width: 5px; height: 5px; background: #d8eef4; border-radius: 50%; top: 13%; box-shadow: 0 0 15px #a8d7e7; }
.orbit-inner::before { left: 13%; }
.orbit-inner::after { right: 13%; }

.stars { position: absolute; z-index: 1; inset: 0; pointer-events: none; }
.stars i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #e7f5f7; box-shadow: 0 0 7px rgba(213,241,247,.9); animation: twinkle 3.2s ease-in-out infinite; }
.stars i:nth-child(1) { left: 16%; top: 26%; animation-delay: -.4s; }
.stars i:nth-child(2) { left: 27%; top: 18%; animation-delay: -1.8s; }
.stars i:nth-child(3) { left: 38%; top: 33%; animation-delay: -2.5s; }
.stars i:nth-child(4) { left: 69%; top: 20%; animation-delay: -1s; }
.stars i:nth-child(5) { left: 81%; top: 31%; animation-delay: -2.1s; }
.stars i:nth-child(6) { left: 88%; top: 46%; animation-delay: -.7s; }
.stars i:nth-child(7) { left: 11%; top: 45%; animation-delay: -2.8s; }
.stars i:nth-child(8) { left: 23%; top: 50%; animation-delay: -1.3s; }
.stars i:nth-child(9) { left: 76%; top: 46%; animation-delay: -.1s; }
.stars i:nth-child(10) { left: 64%; top: 38%; animation-delay: -2s; }
.stars i:nth-child(11) { left: 32%; top: 42%; animation-delay: -.9s; }
.stars i:nth-child(12) { left: 91%; top: 23%; animation-delay: -1.6s; }
.stars i:nth-child(13) { left: 7%; top: 34%; animation-delay: -2.2s; }
.stars i:nth-child(14) { left: 54%; top: 14%; animation-delay: -.5s; }
.stars i:nth-child(15) { left: 47%; top: 48%; animation-delay: -1.1s; }
.stars i:nth-child(16) { left: 72%; top: 54%; animation-delay: -2.7s; }
.stars i:nth-child(17) { left: 18%; top: 57%; animation-delay: -.2s; }
.stars i:nth-child(18) { left: 84%; top: 57%; animation-delay: -1.9s; }
.stars i:nth-child(3n) { width: 3px; height: 3px; }

.forest { position: absolute; z-index: 3; left: 0; right: 0; bottom: 2%; height: 42%; display: flex; align-items: flex-end; justify-content: space-around; pointer-events: none; }
.forest i { position: relative; display: block; width: 16%; height: 74%; background: #041019; clip-path: polygon(50% 0, 63% 20%, 57% 20%, 73% 40%, 63% 40%, 82% 63%, 68% 63%, 94% 92%, 57% 92%, 56% 100%, 44% 100%, 43% 92%, 6% 92%, 32% 63%, 18% 63%, 37% 40%, 27% 40%, 43% 20%, 37% 20%); filter: drop-shadow(0 -5px 12px rgba(1,8,12,.4)); }
.forest i:nth-child(2n) { height: 95%; width: 19%; }
.forest i:nth-child(3n) { height: 62%; width: 14%; }
.forest-back { z-index: 2; bottom: 8%; height: 36%; opacity: .55; filter: blur(.4px); }
.forest-back i { background: #0a2432; }
.forest-front { z-index: 4; bottom: -3%; height: 38%; }
.forest-front i:nth-child(1) { height: 104%; }
.forest-front i:nth-child(4) { height: 112%; }

.identity { width: 100%; max-width: 560px; }
.eyebrow { margin: 0 0 20px; color: #8ca5b3; font-size: 11px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; }
.studio-wordmark { margin: 0; line-height: 1; }
.studio-wordmark img { display: block; width: 100%; height: auto; filter: drop-shadow(0 0 34px rgba(186,220,232,.09)); }

footer { width: min(1160px, calc(100% - 48px)); margin: 0 auto; padding: 24px 0 30px; border-top: 1px solid rgba(255,255,255,.08); display: flex; align-items: center; justify-content: space-between; gap: 24px; color: #5f7785; font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
footer p { margin: 0; }
footer nav { display: flex; gap: 28px; }
footer a { text-decoration: none; transition: color .2s ease; }
footer a:hover, footer a:focus-visible { color: var(--bone); outline: none; }

@keyframes moon-breathe { 0%,100% { transform: translateY(0) scale(1); box-shadow: 0 0 0 1px rgba(244,249,247,.55), 0 0 24px rgba(206,235,243,.48), 0 0 70px rgba(130,196,219,.34), 0 0 140px rgba(93,165,192,.16), inset -20px -24px 48px rgba(30,52,62,.24); } 50% { transform: translateY(-5px) scale(1.004); box-shadow: 0 0 0 1px rgba(255,255,255,.7), 0 0 32px rgba(220,245,250,.6), 0 0 90px rgba(140,207,228,.4), 0 0 160px rgba(93,165,192,.2), inset -20px -24px 48px rgba(30,52,62,.22); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes spin-reverse { to { transform: rotate(-360deg); } }
@keyframes twinkle { 0%,100% { opacity: .18; transform: scale(.75); } 48% { opacity: 1; transform: scale(1.7); } 62% { opacity: .45; transform: scale(1); } }

@media (max-width: 760px) {
  .site-shell { overflow: auto; }
  .hero { width: min(100% - 36px, 560px); min-height: auto; padding: 44px 0 36px; grid-template-columns: 1fr; gap: 30px; text-align: center; }
  .totem-stage { width: min(90vw, 390px); margin: 0 auto; }
  .identity { margin: 0 auto; }
  .studio-wordmark { width: min(88vw, 520px); }
  footer { width: min(100% - 36px, 560px); flex-direction: column; padding: 22px 0 28px; }
  footer nav { gap: 18px; flex-wrap: wrap; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

/* SITE-1: shared static pages and the requested studio/contact copy. */
a:focus-visible { outline: 2px solid #d9e9ef; outline-offset: 6px; }
.totem-stage { width: 100%; max-width: 500px; }
.game-note { margin: 28px 0 0; color: #99afbd; font-size: 13px; line-height: 1.7; letter-spacing: .08em; }
.store-logos { display: flex; align-items: center; gap: 22px; margin-top: 22px; }
.store-logos img { display: block; width: 24px; height: 24px; }
footer { color: #91a6b2; font-size: 11px; }
footer p { text-transform: none; }
footer a:focus-visible { outline: 2px solid #d9e9ef; }
.page-shell { grid-template-rows: auto 1fr auto; }
.page-header { width: min(1160px, calc(100% - 48px)); margin: 0 auto; padding: 32px 0; display: flex; gap: 24px; align-items: center; justify-content: space-between; }
.page-header img { display: block; width: 160px; height: auto; }
.back-link { color: #a7bcc8; font-size: 12px; text-decoration: none; }
.document { width: min(720px, calc(100% - 48px)); margin: 42px auto 88px; }
.document h1 { margin: 0 0 12px; font-size: clamp(42px, 7vw, 64px); font-weight: 700; letter-spacing: -.035em; }
.document .eyebrow { margin-bottom: 18px; }
.updated { color: #91a6b2; font-size: 12px; }
.document-copy { margin-top: 38px; }
.document-copy section + section { margin-top: 48px; padding-top: 28px; border-top: 1px solid #253846; }
.document-copy .content-block-extra + .content-block-extra { margin-top: 36px; }
.document li { color: #acbec9; font-size: 15px; line-height: 1.8; margin: 8px 0; }
.document ul, .document ol { padding-left: 24px; }
.document h2, .document h3 { overflow-wrap: anywhere; }
.document h2 { color: #e0e8e9; margin: 30px 0 12px; font-size: 19px; font-weight: 700; }
.document h3 { color: #bdcdd5; margin: 26px 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.document p { color: #acbec9; font-size: 15px; line-height: 1.8; }
.document a { text-underline-offset: 4px; overflow-wrap: anywhere; }
.document .updated { font-size: 12px; color: #91a6b2; }
@media (max-width: 760px) {
  .studio-wordmark { width: 100%; }
  .store-logos { justify-content: center; }
  .totem-stage { width: min(100%, 390px); }
  .hero { padding-bottom: 44px; }
  .page-header { width: calc(100% - 36px); padding: 24px 0; }
  .page-header img { width: 120px; }
  .back-link { font-size: 11px; }
  .document { width: calc(100% - 40px); margin-top: 30px; margin-bottom: 52px; }
}