:root { color-scheme: dark; background: #020408; --ink: #8391a8; --type: "DIN Alternate", Bahnschrift, "D-DIN", "DIN Next", Barlow, "Helvetica Neue", sans-serif; --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; }
/* Logo and footer each sit centred in the band the globe leaves free: roomy on phones, pinned to the edges in landscape. */
body { position: relative; height: 100svh; display: grid; grid-template-rows: 1fr minmax(0, 90vmin) 1fr; grid-template-rows: 1fr minmax(0, 90svmin) 1fr; padding: max(32px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(28px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); background: #020408; }
#universe { position: absolute; inset: 0; overflow: hidden; isolation: isolate; }
#still { position: absolute; inset: 0; background: #020408 url('./assets/earth-poster.jpg') center / auto min(100vw, 100svh) no-repeat; }
#space { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 1.5s ease; }
#space.ready { opacity: 1; }
#space { touch-action: manipulation; }
#space.shield-hover { cursor: crosshair; }
#space:focus { outline: none; }
#space:focus-visible { outline: 1px solid #d1a75966; outline-offset: -5px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
/* Overlays let clicks through to the globe; only the email link takes pointer input. The wordmark is drawn in the scene behind Earth, so this heading only shows if the scene cannot run. */
#brand:not(.sr-only), #contact { position: relative; z-index: 1; justify-self: center; align-self: center; pointer-events: none; }
#brand:not(.sr-only) { grid-row: 1; animation: unveil 1.8s cubic-bezier(.2, .75, .25, 1) .3s both; }
#brand h1 { margin: 0; }
#brand img { display: block; width: clamp(240px, 40vmin, 600px); max-width: calc(100vw - 48px); height: auto; }
/* Wide screens: "Coming soon" at the bottom centre, the email in the bottom-right corner on the same line. */
#contact { grid-row: 3; align-self: end; justify-self: stretch; display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; padding-inline: 8px; font-size: clamp(12px, 1.4vmin, 15px); animation: surface 1.4s ease-out 1s both; }
.status { grid-column: 2; margin: 0; padding-left: .42em; color: var(--ink); font: 600 1em/1 var(--type); letter-spacing: .42em; text-transform: uppercase; }
.email { grid-column: 3; justify-self: end; pointer-events: auto; padding: 4px 1px; color: var(--ink); font: 400 .95em/1.2 var(--mono); letter-spacing: .04em; text-decoration: none; background: linear-gradient(currentColor, currentColor) 50% 100% / 0 1px no-repeat; transition: color .3s, background-size .45s cubic-bezier(.2, .75, .25, 1); }
.email:hover, .email:focus-visible { color: #dfe6ee; background-size: 100% 1px; }
.email:focus-visible { outline: 1px solid #d1a75966; outline-offset: 5px; }
/* Phones and other tall or narrow screens: "Coming soon" stays centred in the band below the globe, mirroring the wordmark above, and the email sits centred on the bottom edge. */
@media (max-width: 600px), (max-aspect-ratio: 3/4) {
  #contact { align-self: stretch; grid-template-columns: auto; grid-template-rows: 1fr auto 1fr; justify-items: center; padding-inline: 0; }
  .status { grid-column: 1; grid-row: 2; }
  .email { grid-column: 1; grid-row: 3; align-self: end; justify-self: center; }
}
@keyframes unveil { from { opacity: 0; clip-path: inset(0 50%); } to { opacity: 1; clip-path: inset(0); } }
@keyframes surface { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { #space { transition: none; } #brand:not(.sr-only), #contact { animation: none; } }