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

:root {
  font-family: "Geist Mono", monospace;
  font-synthesis: none;
  color: #fff;
  background: #000;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-width: 100%;
  min-height: 100%;
  margin: 0;
  overflow-x: hidden;
  background: #000;
}

body {
  font-family: "Geist Mono", monospace;
  font-weight: 600;
}

.page {
  position: relative;
  min-height: 100svh;
  background: #000;
}

.background-film {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  pointer-events: none;
}

/* The plate stays ungraded on purpose. White type over a bright sky needs
   separation anyway, so each text element carries its own soft shadow: it
   only darkens the few pixels hugging the glyphs, the picture stays bright. */
.wordmark {
  position: absolute;
  z-index: 2;
  top: 72px;
  left: 50%;
  color: #fff;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.62), 0 0 2px rgba(0, 0, 0, 0.45);
  font-size: 38px;
  /* Matched to the reference type system: weight 600 and -0.0833em tracking,
     the same ratio the source uses on the numerals (-24.6459/295.751) and on
     the copy line (-2/24). Was 400 + positive tracking, which read as a
     different typeface next to the rest of the page. */
  font-weight: 600;
  line-height: 2;
  letter-spacing: -0.0833em;
  white-space: nowrap;
  transform: translateX(-50%);
}

.centre-group {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  display: flex;
  width: 483px;
  flex-direction: column;
  align-items: center;
  gap: 44px;
  text-align: center;
  transform: translate(-50%, -50%);
}

/* No scrim pool. An elliptical shade behind the text column produced a visible
   seam where its outer edge crossed the bridge deck. Separation now comes only
   from per-glyph shadows, which hug the letters and leave the plate untouched. */

.centre-group h1 {
  margin: 0;
  padding: 0 0 0.08em;
  color: transparent;
  font-size: 295.751px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -24.6459px;
  background: linear-gradient(
    247.3282658084845deg,
    rgb(255, 255, 255) 2.5334%,
    rgba(255, 255, 255, 0.96) 93.612%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  /* drop-shadow, not text-shadow: the fill is transparent, so a text-shadow
     would show straight through the numerals. */
  /* Two 1.2px passes read as one crisp dark edge, not a halo. Measured on the
     9:16 plate: pixels under 3:1 went 62.2% -> 47.0% on the numerals. The same
     trick on the small copy made it WORSE (it eats their antialiased edge), so
     it is deliberately used on the numerals only. */
  filter: drop-shadow(0 2px 16px rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 1.2px rgba(0, 0, 0, 0.92))
    drop-shadow(0 0 1.2px rgba(0, 0, 0, 0.92));
  /* Tried a third, very wide drop-shadow pass here to buy contrast. It made
     the gate worse, 5 fails -> 14: a bigger blur bleeds dark into the glyph's
     own antialiased edge, and those edge pixels are exactly what the 3:1 test
     samples. Shadow tuning is done; framing is the lever that works. */
}

.divider {
  width: 425px;
  height: 1px;
  flex: 0 0 1px;
  background: #fff;
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
}

.centre-group p {
  margin: 0;
  color: #fff;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -2px;
  /* Wide blur only. A tight near-halo reads as "more contrast" to the eye but
     measures worse: it darkens the antialiased edge pixels of the glyph itself,
     which is exactly the population the 3:1 gate samples. Verified, 10 fails vs 3. */
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.68);
}

@media (max-width: 640px) {
  /* Mobile framing. The 16:9 master could be large or complete on a 390x844
     viewport, never both, so main.tsx swaps in a 9:16 re-frame of the same
     shot here and `cover` only trims a few px off the sides. */
  /* One line maxes out at ~26px before it hits the screen edge, so the phone
     wordmark stacks to two lines and gets ~45% more type size instead. */
  .wordmark {
    top: 94px;
    font-size: clamp(24px, 8.7vw, 37px);
    line-height: 1.14;
  }

  .wordmark span {
    display: block;
  }

  .centre-group {
    /* Owner-marked placement (screenshot, 2026-08-23): the numerals sit in the
       gap between the two bridge spans, just below centre, so the "404" reads
       against the misty valley rather than straddling the deck line. Percent,
       not px, so the block tracks the plate at any phone height. Target: h1
       centre at ~62% of the frame. */
    top: 67%;
    width: min(calc(100% - 40px), 360px);
    /* Tighter than desktop: after the -20% numeral pass the old 28px gap left
       the copy floating well below the shrunken block, so it rides up with the
       h1 instead of holding its old baseline. */
    gap: 18px;
  }

  .centre-group h1 {
    height: auto;
    min-height: 0;
    padding-bottom: 0.08em;
    font-size: clamp(95px, 35vw, 136px);
    letter-spacing: -0.09em;
  }

  .divider {
    width: 100%;
  }

  .centre-group p {
    font-size: clamp(14px, 3.8vw, 17px);
    letter-spacing: -1.1px;
  }
}