@font-face { 
  font-family: "SF Fourche SC"; 
  src: url("../assets/SFFourcheSC.woff2") format("woff2"); 
  src: url("../assets/SFFourcheSC.woff") format("woff"); 
  src: url("../assets/SFFourcheSC.ttf") format("truetype"); 
  font-display: swap; 
}
:root { 
  --background: #fff; 
  --primary: oklch(0.29 0.12 262);
  --primary-foreground: #fff; 
  --font-heading: "SF Fourche SC", Arial, sans-serif; 
}

* { 
  box-sizing: border-box; 
}
body { 
  margin: 0; 
  background: var(--background); 
  color: var(--primary); 
}
main { 
  display: flex; 
  min-height: 100vh; 
  min-height: 100dvh; 
  flex-direction: column; 
  align-items: center; 
  justify-content: center; 
  overflow: hidden; 
  padding: 3rem 1.5rem; 
  background: var(--background) url("../assets/space-bg.webp") center / cover no-repeat; 
  text-align: center; 
}
h1, h2 { 
  margin: 0; 
  font-family: var(--font-heading); 
  font-weight: 400; 
  line-height: 1; 
  text-transform: uppercase; 
  letter-spacing: 0; 
}
h1 {
  font-size: 2rem; 
}
h2 { 
  margin-top: 1.5rem; 
  font-size: 1.25rem; 
}
.twins { 
  display: block; 
  margin-top: 1.5rem; 
  width: 100%; 
  max-width: 22rem; 
  height: auto; 
}
ul { 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  gap: 1rem; 
  margin: 1.5rem 0 0; 
  padding: 0; 
  list-style: none; 
}
.cta { 
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  min-height: 2.75rem; 
  min-width: 9rem; 
  padding: .75rem 2rem; 
  border-radius: 999px; 
  background: var(--primary); 
  color: var(--primary-foreground); 
  font-family: var(--font-heading); 
  font-size: 1.125rem; 
  line-height: 1; 
  text-decoration: none; 
  text-transform: uppercase; 
  transition: transform 150ms ease, box-shadow 150ms ease; 
}
.cta:hover { 
  transform: translateY(-2px); 
  box-shadow: 0 8px 20px -8px var(--primary); 
}
.cta:focus-visible { 
  outline: 3px solid var(--primary); 
  outline-offset: 3px; 
}
.sr-only { 
  position: absolute; 
  width: 1px; 
  height: 1px; 
  padding: 0; 
  margin: -1px; 
  overflow: hidden; 
  clip: rect(0,0,0,0); 
  white-space: nowrap; border: 0; 
}

@media (min-width: 640px) { 
  ul { flex-direction: row; gap: 1.5rem; } 
}
@media (min-width: 768px) { 
  h1 { font-size: 3rem; } 
  h2 { margin-top: 2.5rem; font-size: 1.75rem; } 
  .twins { margin-top: 2.5rem; max-width: 36rem; } 
}
@media (min-width: 1024px) { 
  .twins { max-width: 34rem; } 
}
/* override for grandma's vertigo */
@media (prefers-reduced-motion: reduce) { 
  .cta { transition: none; } 
  .cta:hover { transform: none; } 
}
@keyframes bob { 
  0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
  .twins { animation: bob 6s ease-in-out infinite; will-change: transform; }
@media (prefers-reduced-motion: reduce) { 
  .twins { animation: none; } }