/* ------------------------------------------------------------------
   Notable Goods — coming soon
   Recreated from the Figma export "NG_Branding" (1920 × 1080).
   All values below are the export's values; the hero is laid out on a
   1920 × 1003 design stage where 1 design px = var(--u), so it scales
   proportionally and covers any viewport.
------------------------------------------------------------------- */

:root {
  --white: #ffffff;
  --black: #000000;
  --v2-black: #22211f;
  --mark: #eeeeee;
  --placeholder: #d9d9d9;

  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --nav-h: 77px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
}

body {
  background: var(--white);
  color: var(--black);
  font-family: var(--font-mono);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
}

/* NG_Branding ----------------------------------------------------- */
.frame {
  position: relative;
  width: 100%;
  height: 100dvh;
  background: var(--white);
  display: flex;
  flex-direction: column;
}

/* nav-1920 -------------------------------------------------------- */
.nav {
  flex: none;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 30px 40px;
  width: 100%;
  height: var(--nav-h);
  border-bottom: 1px solid var(--v2-black);
}

.nav__item {
  flex: none;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 24px;
  line-height: 100%;
  color: var(--black);
  white-space: nowrap;
  /* Figma: leading-trim: both; text-edge: cap */
  text-box: trim-both cap alphabetic;
}

/* hero ------------------------------------------------------------ */
.hero {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  container-type: size;
}

/* 1 design px. "Cover" the hero area: whichever of width/height
   needs the larger scale wins, anchored top, centered horizontally. */
.stage {
  --u: max(calc(100cqw / 1920), calc(100cqh / 1003));
  position: absolute;
  top: 0;
  left: 50%;
  width: calc(1920 * var(--u));
  height: calc(1003 * var(--u));
  transform: translateX(-50%);
}

/* The exports are the slices visible inside the 1920 frame: image 62
   starts at -127.08 and is clipped on the left, image 51 starts at
   1351.54 and is clipped on the right. Boxes below are those slices. */
.img {
  position: absolute;
  top: 0;
  height: calc(1003 * var(--u));
  background-color: var(--placeholder);
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* image 62 · 802.4 wide at x -127.08 → visible 0 … 675.32 */
.img--left {
  left: 0;
  width: calc(675.32 * var(--u));
  background-image: url("/images/hero-left.jpg");
}

/* image 63 · 784.29 wide at x 567.25 (fully visible) */
.img--center {
  left: calc(567.25 * var(--u));
  width: calc(784.29 * var(--u));
  background-image: url("/images/hero-center.jpg");
}

/* image 51 · 710.1 wide at x 1351.54 → visible 1351.54 … 1920 */
.img--right {
  left: calc(1351.54 * var(--u));
  width: calc(568.46 * var(--u));
  background-image: url("/images/hero-right.jpg");
}

/* Group 33 -------------------------------------------------------- */
/* "Notable ©" is the Figma group exported as an outlined SVG (467 × 87
   viewBox around the 466.59 × 85 group), so it renders with the real
   Neue Haas Grotesk Display glyphs without shipping the font. */
.mark {
  position: absolute;
  margin: 0;
  /* left: calc(50% - 466.59px/2 - 0.61px); top: calc(50% - 85px/2 + 108.69px) */
  left: calc(726.095 * var(--u));
  top: calc(529.19 * var(--u));
  width: calc(467 * var(--u));
  height: calc(87 * var(--u));
  mix-blend-mode: normal;
  user-select: none;
}

.mark img {
  display: block;
  width: 100%;
  height: 100%;
}