@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url(/fonts/geist-latin.woff2) format("woff2");
}

:root {
  color-scheme: dark;
  font-family: "Geist", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #101113;
  color: #f1f2f2;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
}

* {
  box-sizing: border-box;
}

body {
  min-block-size: 100vh;
  margin: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: radial-gradient(circle at 82% 20%, #1c1d20 0, transparent 28rem), #101113;
}

/* Ambient greyscale footage: fixed full-bleed layer behind the content, masked
   so it dissolves into the void rather than reading as a video player. It sits at
   z-index 0 (above the body's own opaque background) with the content lifted to
   z-index 1 above it — a negative z-index would paint under the body background. */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 45%, #000 20%, transparent 72%);
  mask-image: radial-gradient(120% 90% at 50% 45%, #000 20%, transparent 72%);
}

.backdrop-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(1.1) contrast(1.1);
}

/* Scrim + vignette: weighted dark over the left/hero column so the copy stays
   fully legible; lighter over the emptier right so motion is still sensed. */
.backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(16, 17, 19, 0.93) 0%, rgba(16, 17, 19, 0.6) 40%, rgba(16, 17, 19, 0.3) 72%, rgba(16, 17, 19, 0.42) 100%),
    radial-gradient(150% 135% at 72% 42%, rgba(16, 17, 19, 0) 0%, rgba(16, 17, 19, 0.5) 100%);
}

.site-header,
.hero {
  inline-size: min(100% - 3rem, 76rem);
  margin-inline: auto;
}

/* Content sits above the ambient backdrop layer. */
.site-header,
main {
  position: relative;
  z-index: 1;
}

.site-header {
  padding-block: 1.75rem;
}

.wordmark {
  color: inherit;
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.hero {
  align-self: center;
  padding-block: clamp(7rem, 19vh, 13rem);
}

/* Technical eyebrow: monospace label led by a hairline rule. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.95rem;
  margin: 0 0 1.9rem;
  color: #82868a;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, "Cascadia Mono", monospace;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  inline-size: 1.85rem;
  block-size: 1px;
  background: currentColor;
  opacity: 0.55;
}

h1 {
  max-inline-size: 11ch;
  margin: 0;
  font-size: clamp(3.25rem, 9.4vw, 8.5rem);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 0.94;
}

.introduction {
  max-inline-size: 32ch;
  margin: 2.3rem 0 0;
  color: #b6b9bb;
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.45;
}

a:focus-visible {
  outline: 3px solid #f1f2f2;
  outline-offset: 0.35rem;
  border-radius: 0.1rem;
}

@media (max-width: 38rem) {
  .site-header,
  .hero {
    inline-size: min(100% - 2rem, 76rem);
  }

  .hero {
    padding-block: 6rem;
  }
}

/* Reduced motion: a designed static frame, not a stopped video. */
@media (prefers-reduced-motion: reduce) {
  .backdrop-video {
    display: none;
  }

  .backdrop {
    background: center / cover no-repeat url(/media/eidetic-ambient-poster.jpg);
  }
}