:root {
  --sky: #f9f9f9;
  --muted: #8b97ab;
  --accent: #9fb4d6;
  --footer: #13213a;
  --footer-line: rgba(159, 180, 214, 0.22);
}

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

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--footer);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Hero: the header image is always shown in full at the viewport's width,
   sitting on the footer. The hero is never shorter than the image, and its
   sky color fills any extra space above so it blends into the image. */

.hero {
  flex: 1;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--sky);
}

.hero__title {
  width: 100%;
  margin: 0;
}

.hero__image {
  display: block;
  width: 100%;
  height: auto;
  transform-origin: center bottom;
  animation: reveal 2.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes reveal {
  from {
    opacity: 0;
    transform: scale(1.04);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Legal pages: the embedded document fills everything above the footer and
   fades in over a backdrop matching its dark background, like the hero. */

.legal {
  flex: 1;
  display: flex;
  overflow: hidden;
  background: #111111;
}

.legal__frame {
  flex: 1;
  width: 100%;
  min-height: 70vh;
  border: 0;
  display: block;
  transform-origin: center top;
  animation: reveal 2.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Footer */

.footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem clamp(1.25rem, 4vw, 3rem);
  background: var(--footer);
  border-top: 1px solid var(--footer-line);
  box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.35);
  font-size: 0.875rem;
  font-weight: 300;
  color: var(--muted);
}

.footer__copy {
  margin: 0;
}

.footer__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
}

.footer__text-link {
  color: inherit;
  text-decoration: none;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}

.footer__text-link:hover,
.footer__text-link[aria-current="page"] {
  color: #d6deea;
}

.footer__text-link:hover {
  text-decoration: underline;
}

.footer__text-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.footer__link {
  display: block;
  border-radius: 10px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.footer__link:hover {
  opacity: 0.85;
  transform: translateY(-1px);
}

.footer__link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.footer__card {
  display: block;
  width: 150px;
  height: auto;
  border-radius: 10px;
}

@media (max-width: 480px) {
  .footer {
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__image,
  .legal__frame,
  .footer__text-link,
  .footer__link {
    animation: none;
    transition: none;
  }
}