@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 600 900;
  font-display: swap;
  src: url(fonts/inter-tight-600-900.woff2) format('woff2');
}

:root {
  --night: #161A47;
  --ground: #0E1133;
  --horizon: #2A3072;
  --on-night: #F3F4F8;
  --on-night-soft: #B9BEE8;
  --sun: #FFC83D;
  --rose: #E0708F;

  --gutter: clamp(1.5rem, 6vw, 6rem);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--ground);
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  font-family: 'Inter Tight', Inter, system-ui, sans-serif;
  color: var(--on-night);
  -webkit-font-smoothing: antialiased;
}

.dawn {
  display: grid;
  grid-template-rows: minmax(14rem, 1fr) auto;
}

/* The sky clips the sun at the horizon, so the disc only ever shows above
   the line. */
.sky {
  position: relative;
  overflow: hidden;
  background: var(--night);
}

.sun {
  --size: clamp(13rem, 60vw, 34rem);
  position: absolute;
  right: var(--gutter);
  bottom: calc(var(--size) / -2);
  width: var(--size);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--sun);
}

.ground {
  border-top: 1px solid var(--horizon);
  padding: clamp(1.5rem, 4vw, 3rem) var(--gutter) clamp(2rem, 5vw, 4rem);
}

.wordmark {
  margin: 0;
  font-size: clamp(3.5rem, 15vw, 6rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.04em;
}

.soon {
  margin: 0.75rem 0 0;
  font-size: clamp(1.25rem, 3vw, 1.625rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.005em;
  color: var(--on-night-soft);
}

.foot {
  padding: 0 var(--gutter) clamp(1rem, 3vw, 2rem);
}

.foot p {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--on-night-soft);
}

/* The padding gives the small link a 44px touch target without making it
   look bigger. */
.foot a {
  display: inline-block;
  padding: 0.625rem 0;
  color: var(--on-night);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  transition: color 150ms var(--ease-out), text-decoration-color 150ms var(--ease-out);
}

.foot a:hover {
  color: var(--sun);
}

.foot a:focus-visible {
  outline: 2px solid var(--sun);
  outline-offset: 3px;
  border-radius: 6px;
}

/* One sunrise on arrival: the disc climbs and warms from rose to sun while
   the name comes into focus. Both start partly visible, so the page reads
   even before the animation runs. */
@media (prefers-reduced-motion: no-preference) {
  .sun {
    animation: rise 1100ms var(--ease-out) both;
  }

  .wordmark {
    animation: focus 800ms var(--ease-out) 150ms both;
  }

  @keyframes rise {
    from {
      transform: translateY(32%);
      background-color: var(--rose);
    }
  }

  @keyframes focus {
    from {
      opacity: 0.35;
      filter: blur(10px);
    }
  }
}