@font-face { font-family: Inter; src: url(/fonts/inter-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: Inter; src: url(/fonts/inter-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --navy: #082443;
  --cream: #F6F0DB;
  --pad-x: clamp(16px, 4vw, 56px);
  --pad-y: clamp(18px, 4vw, 44px);
}
html, body { margin: 0; height: 100%; background: var(--navy); color: var(--cream); }
body { overflow: hidden; font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }

.hero-img, .hero-fx { position: fixed; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.hero-img { transform: scale(1.0256); }  /* = 1 / DEPTH.zoom in js/glint.js: the still image is framed exactly like the canvas */
.hero-fx { opacity: 0; transition: opacity .6s ease; pointer-events: none; }
.hero-fx.is-ready { opacity: 1; }

.top {
  position: fixed; inset: 0 0 auto 0; z-index: 1;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 24px;
  padding: var(--pad-y) max(var(--pad-x), env(safe-area-inset-right)) 0 max(var(--pad-x), env(safe-area-inset-left));
}
.logo { margin: 0; line-height: 0; }
.logo img { height: clamp(18px, 2.2vw, 24px); width: auto; display: block; }
.tagline {
  margin: 0; max-width: 26ch; text-align: right;
  font-weight: 500; font-size: clamp(12px, 1.05vw, 16px); line-height: 1.35; letter-spacing: -.01em;
}
.foot {
  position: fixed; z-index: 1; left: max(var(--pad-x), env(safe-area-inset-left)); bottom: max(clamp(16px, 3vw, 36px), env(safe-area-inset-bottom));
  font-size: 12px; line-height: 1; opacity: .6;
}

@media (max-width: 600px) {
  .top { flex-direction: column; gap: 14px; }
  .tagline { text-align: left; }
}