/* Polymostly holding page. System fonts only; no third-party anything. */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #0b0d10; color: #f4f1ea; }
body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }

.hero { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; display: flex; align-items: flex-end; }
.hero__photo, .hero__photo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__photo img { object-fit: cover; object-position: 50% 45%; display: block; }
/* Gradient for contrast: the text sits on near-black whatever the photo does behind it. */
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(5, 6, 8, .94) 0%, rgba(5, 6, 8, .78) 28%, rgba(5, 6, 8, .25) 58%, rgba(5, 6, 8, 0) 75%);
}

.hero__text { position: relative; z-index: 1; width: 100%; padding: clamp(1.5rem, 5vw, 4rem); padding-bottom: max(clamp(1.75rem, 6vh, 4.5rem), env(safe-area-inset-bottom)); }
.wordmark {
  margin: 0; font-size: clamp(2.75rem, 11vw, 7.5rem); line-height: .95; font-weight: 800; letter-spacing: -.04em;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .6);
}
.tagline { margin: .75rem 0 1.5rem; max-width: 44ch; font-size: clamp(1.05rem, 2.4vw, 1.5rem); line-height: 1.35; color: #e9e4d8; }

.social { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.social a {
  display: inline-block; padding: .55rem 1rem; border: 1px solid rgba(244, 241, 234, .55); border-radius: 999px;
  color: #f4f1ea; text-decoration: none; font-weight: 600; font-size: .95rem; background: rgba(5, 6, 8, .45);
}
.social a:hover { background: rgba(244, 241, 234, .14); }
.social a:focus-visible { outline: 3px solid #ffb84d; outline-offset: 3px; }

@media (prefers-reduced-motion: no-preference) { .social a { transition: background-color .15s ease; } }