/* Page layout, type and the heading. */

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { min-height: 100%; }

body {
  min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden; position: relative;
  background: linear-gradient(180deg, var(--sky1) 0%, var(--sky2) 78%);
  color: var(--ink);
  font-family: "Anek Latin", system-ui, sans-serif; font-variation-settings: "wdth" 100;
  transition: background 2s ease, color 2s ease;
}
a { color: inherit; }

header { position: relative; z-index: 2; padding: clamp(28px, 6vw, 64px) clamp(20px, 6vw, 72px) 0; max-width: 46rem; }
h1 { font-size: clamp(44px, 9vw, 48px); line-height: .9; font-weight: 800;
     font-variation-settings: "wdth" 125; letter-spacing: -0.02em; }
header p { margin-top: 14px; font-size: clamp(16px, 1.6vw, 16px); color: var(--muted); max-width: 30rem; line-height: 1.45; }
header p a { text-underline-offset: 3px; }

/* Visitors who ask for less motion get a still picture. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}