/* fact-graph.com: the deck's cover, as a page. Inter comes from Google Fonts, cut to the characters the pages use. */
:root { --deep: #1C254B; --ink: #F5F7FD; --muted: #AEB6DA; --mint: #71F3BC; --blue: #3B5BDB; }
* { margin: 0; box-sizing: border-box; }
html { background: var(--deep); }
body {
  min-height: 100vh; min-height: 100svh;
  background: linear-gradient(294deg, #314491 0%, var(--deep) 95%);
  color: var(--ink);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
main {
  position: relative;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: space-between; gap: 64px;
  padding: max(28px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right))
           max(44px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
}
.brand { display: flex; align-items: center; gap: 0.55em; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.mark { position: relative; flex: none; width: 1.5em; height: 1.5em; border-radius: 0.24em; background: var(--blue); }
.mark::after {
  content: ""; position: absolute; right: 18.75%; bottom: 18.75%; width: 29%; height: 29%;
  border-radius: 0.06em; background: var(--ink);
}
h1 { font-size: clamp(34px, 10.4vw, 64px); font-weight: 800; line-height: 1; letter-spacing: -0.035em; }
.invite { margin-top: 28px; font-size: 14px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mint); }
.home { margin-top: 28px; font-size: 18px; font-weight: 600; }
.home a { color: var(--mint); text-decoration: none; }
.home a:hover, .home a:focus-visible { text-decoration: underline; text-underline-offset: 0.2em; }
/* The hub sits in the column on phones and tablets, and beside the words on wider screens. */
.hub { display: block; align-self: center; width: min(72vw, 340px); height: auto; }
@media (min-width: 760px) {
  main { padding: clamp(40px, 5.5vw, 104px); }
  .brand { font-size: clamp(22px, 1.9vw, 30px); }
  h1 { font-size: clamp(64px, 7.6vw, 144px); letter-spacing: -0.04em; }
  .invite { margin-top: clamp(28px, 2.6vw, 44px); font-size: clamp(15px, 1.15vw, 20px); }
  .home { font-size: clamp(18px, 1.5vw, 24px); }
  .hub { width: min(48vw, 420px); }
}
@media (min-width: 1024px) {
  .hub {
    position: absolute; top: 50%; right: clamp(40px, 6vw, 120px);
    width: clamp(300px, 29vw, 520px); transform: translateY(-54%);
  }
}
@media (max-width: 1023px) and (max-height: 600px) { .hub { display: none; } }
@media (prefers-reduced-motion: no-preference) {
  h1, .invite { animation: rise 1s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .invite { animation-delay: 0.2s; }
  .hub { animation: appear 1.6s ease-out both; }
  @keyframes rise { from { opacity: 0; transform: translateY(14px); } }
  @keyframes appear { from { opacity: 0; } }
}