/* ---- Reset & base ------------------------------------------------------ */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* Neue Montreal is a licensed face; fall back to a neutral grotesk that
     keeps the same tight, editorial character. */
  --font: "Neue Montreal", "PP Neue Montreal", "Helvetica Neue", Helvetica,
    Arial, sans-serif;

  /* Safe inset from every viewport edge (mirrors the Figma 29 / 45 padding,
     and respects notches on mobile). */
  --pad-x: clamp(1rem, 3vw, 1.8125rem);
  --pad-y: clamp(1rem, 3vh, 2.8125rem);
}

html,
body {
  height: 100%;
}

body {
  /* Lock to exactly one screen — no scrolling on any device. */
  width: 100vw;
  height: 100vh;
  height: 100dvh; /* honour mobile dynamic toolbars */
  overflow: hidden;
  background: #000;
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- Background video -------------------------------------------------- */
.bg-video {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* fill the viewport, preserve quality, no distortion */
  z-index: 0;
  pointer-events: none;
}

/* ---- Text stage -------------------------------------------------------- */
.stage {
  position: relative;
  z-index: 1;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  /* push intro to the top, meta to the bottom */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(var(--pad-y) + env(safe-area-inset-top))
    calc(var(--pad-x) + env(safe-area-inset-right))
    calc(var(--pad-y) + env(safe-area-inset-bottom))
    calc(var(--pad-x) + env(safe-area-inset-left));
  /* The whole text layer reacts to the footage underneath. */
  color: #fff;
  mix-blend-mode: exclusion;
}

/* ---- Intro copy -------------------------------------------------------- */
.intro__text {
  /* Full-width measure, exactly like the Figma: the copy runs edge-to-edge
     and wraps to ~4 lines on desktop rather than stacking in a narrow column. */
  width: 100%;
  font-weight: 500;
  text-transform: lowercase;
  letter-spacing: -0.02em;
  line-height: 1.03;
  /* Figma: 47px on a ~2548px-wide frame ≈ 1.85vw. Tracking that ratio keeps
     the same characters-per-line, so the copy fills to the right edge in
     ~4 lines instead of ballooning and stopping short. Floor keeps mobile
     readable; cap holds the 47px design maximum on very wide screens. */
  font-size: clamp(1.17rem, 1.74vw, 2.76rem); /* ~6% smaller than the design */
}

/* ---- Restrained hover links ------------------------------------------- */
.link {
  color: inherit;
  text-decoration: none;
  text-underline-offset: 0.35em; /* large offset for an elegant gap */
  text-decoration-thickness: 1px; /* low stroke width */
  text-decoration-color: currentColor;
  transition: text-decoration-color 0.35s ease;
}

.link:hover,
.link:focus-visible {
  text-decoration-line: underline;
  text-decoration-skip-ink: none;
}

/* ---- Footer meta row --------------------------------------------------- */
.meta {
  position: relative; /* anchor for the centered credit */
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(1rem, 4vw, 6rem);
  width: 100%;
  font-weight: 500;
  text-transform: lowercase;
  line-height: 1.1;
  letter-spacing: -0.01em;
  font-size: clamp(0.75rem, 1.6vw, 1.6875rem); /* ~12px → 27px */
}

.meta__email {
  color: inherit;
  text-decoration: none;
}

.meta__credit {
  /* Pinned to the true viewport centre, independent of the email/clock
     widths on either side — so it never shifts as the clock ticks. */
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  text-align: center;
  white-space: nowrap;
}

.meta__clock {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums; /* prevent width jitter while ticking */
}

/* ---- Small screens ----------------------------------------------------- */
@media (max-width: 640px) {
  /* Stack the footer so three items never collide on narrow phones,
     while preserving the same lowercase editorial identity. */
  .meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .meta__credit,
  .meta__clock {
    text-align: left;
  }

  /* Back to normal flow when stacked, so it doesn't overlap the other rows. */
  .meta__credit {
    position: static;
    transform: none;
    white-space: normal;
  }
}