:root {
  --ink: #0a0a0a;
  --paper: #eeeeea;
  --muted: #9b9b96;
  --line: rgba(238, 238, 234, 0.17);
  --mono: "DM Mono", "SFMono-Regular", Consolas, monospace;
  --sans: "Manrope", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { background: var(--ink); scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 320px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
}

a { color: inherit; text-decoration: none; }

.site-shell {
  min-height: 100svh;
  overflow: hidden;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  padding: 29px clamp(24px, 5.1vw, 78px) 24px;
}

.cosmos {
  background:
    radial-gradient(ellipse 60% 52% at 88% 21%, rgba(81, 97, 153, .13), transparent 66%),
    radial-gradient(ellipse 38% 45% at 14% 86%, rgba(107, 77, 113, .11), transparent 68%),
    #09090b;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  z-index: -1;
}

.starfield, .starfield::after {
  inset: 0;
  position: absolute;
}

.starfield::after { content: ""; }

.starfield--far {
  background-image:
    radial-gradient(circle at 10% 17%, rgba(255,255,255,.56) 0 1px, transparent 1.5px),
    radial-gradient(circle at 27% 71%, rgba(214,224,255,.38) 0 1px, transparent 1.5px),
    radial-gradient(circle at 49% 25%, rgba(255,255,255,.48) 0 1px, transparent 1.5px),
    radial-gradient(circle at 65% 83%, rgba(255,255,255,.34) 0 1px, transparent 1.5px),
    radial-gradient(circle at 82% 42%, rgba(227,235,255,.45) 0 1px, transparent 1.5px),
    radial-gradient(circle at 95% 14%, rgba(255,255,255,.37) 0 1px, transparent 1.5px);
  background-size: 297px 257px, 431px 389px, 353px 419px, 269px 323px, 491px 457px, 347px 281px;
  opacity: .76;
}

.starfield--near::after {
  background-image:
    radial-gradient(circle at 17% 23%, #fff 0 1px, transparent 1.9px),
    radial-gradient(circle at 43% 79%, #e9efff 0 1.2px, transparent 2px),
    radial-gradient(circle at 72% 13%, #fff 0 1px, transparent 1.9px),
    radial-gradient(circle at 91% 65%, #f8eefa 0 1px, transparent 1.9px),
    radial-gradient(circle at 33% 52%, #fff 0 .8px, transparent 1.7px),
    radial-gradient(circle at 59% 38%, #e6edff 0 1px, transparent 1.9px);
  background-size: 463px 407px, 529px 497px, 593px 463px, 401px 557px, 617px 521px, 547px 613px;
  animation: twinkle 4.8s ease-in-out infinite alternate;
  opacity: .86;
}

.galaxy-haze {
  background:
    radial-gradient(ellipse at center, rgba(219, 198, 234, .1), transparent 22%),
    radial-gradient(ellipse at center, rgba(72, 105, 166, .13), transparent 44%),
    transparent;
  filter: blur(17px);
  height: min(60vw, 900px);
  left: 48%;
  opacity: .74;
  position: absolute;
  top: -29%;
  transform: rotate(-27deg);
  width: 14%;
}

.orbit {
  border: 1px solid rgba(216, 225, 255, .075);
  border-radius: 50%;
  position: absolute;
}

.orbit--one { animation: orbit 38s linear infinite; height: min(52vw, 720px); right: -14%; top: 8%; width: min(52vw, 720px); }
.orbit--two { animation: orbit 54s linear -15s infinite reverse; height: min(74vw, 990px); left: -30%; top: 26%; width: min(74vw, 990px); }

.planet { border-radius: 50%; display: block; position: absolute; }
.planet--one { background: radial-gradient(circle at 31% 28%, #b5bfd6, #68728b 28%, #253049 65%, #111829); box-shadow: 0 0 24px rgba(143, 164, 208, .2); height: 11px; left: 8%; top: 23%; width: 11px; }
.planet--two { background: radial-gradient(circle at 30% 26%, #c5a998, #926d62 27%, #442d43 68%, #1c1629); box-shadow: 0 0 32px rgba(176, 116, 141, .16); height: 18px; right: 12%; top: 72%; width: 18px; }

.shooting-star { background: linear-gradient(90deg, transparent, rgba(234, 242, 255, .88)); height: 1px; opacity: 0; position: absolute; transform: rotate(-28deg); width: clamp(80px, 11vw, 180px); }
.shooting-star--one { animation: shooting 15s ease-in 3s infinite; left: 16%; top: 12%; }
.shooting-star--two { animation: shooting 19s ease-in 10s infinite; left: 64%; top: 41%; }

.mono { font-family: var(--mono); font-size: 10px; font-weight: 400; letter-spacing: .04em; }

.hero {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 650px;
  padding: clamp(91px, 15vh, 171px) 0 clamp(46px, 8vh, 90px);
  position: relative;
}

.footer p { margin: 0; }

.hero-copy { align-self: flex-start; max-width: 900px; position: relative; z-index: 1; }

h1 {
  font-size: clamp(60px, 8.1vw, 132px);
  font-weight: 500;
  letter-spacing: -.075em;
  line-height: .9;
  margin: 0;
  max-width: 890px;
}

h1 em { color: #bcd1b6; font-family: Georgia, "Times New Roman", serif; font-weight: 400; letter-spacing: -.09em; }

.intro { color: #c6c6c1; font-size: clamp(14px, 1.23vw, 18px); font-weight: 400; line-height: 1.55; margin: clamp(28px, 4.5vh, 52px) 0 0; max-width: 385px; }

.hero-bottom { margin-top: auto; position: relative; z-index: 1; }

.contact-link { align-items: center; border-bottom: 1px solid rgba(238,238,234,.57); display: inline-flex; font-size: 14px; padding: 0 0 9px; transition: border-color .3s ease, color .3s ease; }
.contact-link:hover { border-color: #bdd5b7; color: #bdd5b7; }
.footer { border-top: 1px solid var(--line); color: var(--muted); display: flex; font-size: 9px; padding-top: 15px; }

@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes twinkle { to { opacity: .26; } }
@keyframes shooting {
  0%, 8% { opacity: 0; transform: translate(0, 0) rotate(-28deg); }
  12% { opacity: .8; }
  26% { opacity: 0; transform: translate(420px, 225px) rotate(-28deg); }
  100% { opacity: 0; transform: translate(420px, 225px) rotate(-28deg); }
}

@media (max-width: 720px) {
  .site-shell { padding: 23px 22px 20px; }
  .hero { min-height: 650px; padding: 122px 0 39px; }
  h1 { font-size: clamp(54px, 16.6vw, 82px); line-height: .91; }
  .intro { font-size: 14px; margin-top: 30px; max-width: 340px; }
  .footer { font-size: 8px; }
  .galaxy-haze { height: 780px; left: 55%; top: -18%; width: 30%; }
  .orbit--one { height: 490px; right: -42%; top: 9%; width: 490px; }
  .orbit--two { height: 620px; left: -70%; top: 35%; width: 620px; }
}

@media (max-width: 370px) {
  .hero { padding-top: 103px; }
}

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