/* ==========================================================================
   Home page — hero, "Our context", "Three founding projects"
   ========================================================================== */

/* --- Hero ---------------------------------------------------------------- */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--nn-black);
  text-align: center;
  padding-block: clamp(3.5rem, 9vw, 7.625rem);
  color: var(--nn-text-invert);
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__wordmark {
  width: min(34.3125rem, 78%); /* 549px */
  margin-inline: auto;
}

.hero__wordmark img { width: 100%; height: auto; }

.hero__lead {
  max-width: 42rem; /* 672px */
  margin: var(--nn-space-m) auto 0;
  font-size: var(--nn-size-lead);
  font-weight: 500;
  line-height: var(--nn-lh-tight);
  text-wrap: balance;
}

.hero .btn { margin-block-start: var(--nn-space-m); }

@media (min-width: 60rem) {
  .hero__lead { line-height: 1.2; }
}

/* --- Our context --------------------------------------------------------- */

.context {
  position: relative;
  /* Decorations and the collage bleed past the section edge on purpose — the
     Figma cuts them off at the frame boundary. Clipping here keeps that look
     without the bleed widening the page. */
  overflow: clip;
  padding-block: var(--nn-section) 0;
  text-align: center;
}

.context__body {
  max-width: var(--nn-measure);
  margin: var(--nn-space-l) auto 0;
  line-height: var(--nn-lh-tight);
}

.context__body > * + * { margin-block-start: 2em; }

.context__body strong {
  font-weight: 600;
  letter-spacing: inherit;
}

.context .deco--moon3 { left: 3%;  top: 0;    width: clamp(4rem, 12vw, 10.6875rem); }
.context .deco--star3 { right: 2%; top: 30%;  width: clamp(4rem, 12vw, 11.3125rem); rotate: -22.46deg; }

/* --- Collage placement --------------------------------------------------- */
/* Percentages are the Figma coordinates divided by the frame size, so the
   composition is identical to the design at both breakpoints. */

.collage .c1 { --x: -10.2%; --y: 0;      --w: 60.2%; --h: 26.26%; }
.collage .c4 { --x: 55.97%; --y: 10.37%; --w: 54.48%; --h: 23.99%; }
.collage .c5 { --x: 4.73%;  --y: 29.34%; --w: 40.80%; --h: 35.66%; }
.collage .c6 { --x: 50%;    --y: 38.74%; --w: 53.73%; --h: 23.34%; }
.collage .c3 { --x: 35.32%; --y: 68.07%; --w: 59.20%; --h: 26.58%; }
.collage .c2 { --x: -5.65%; --y: 68.07%; --w: 33.09%; --h: 31.93%; }

.collage .deco--star1 { left: 45%; top: -6%; width: 22%; rotate: -25.36deg; }

@media (min-width: 60rem) {
  .collage .c1 { --x: 2.29%;  --y: 0;      --w: 24.03%; --h: 40.03%; }
  .collage .c2 { --x: 30.83%; --y: 15.13%; --w: 15.73%; --h: 57.97%; }
  .collage .c3 { --x: 5.56%;  --y: 52.86%; --w: 21.94%; --h: 37.78%; }
  .collage .c4 { --x: 70.49%; --y: 53.73%; --w: 22.01%; --h: 37.09%; }
  .collage .c5 { --x: 49.79%; --y: 44.02%; --w: 16.74%; --h: 55.98%; }
  .collage .c6 { --x: 72.92%; --y: 1.04%;  --w: 23.40%; --h: 39.00%; }

  .collage .deco--star1 { left: 43.8%; top: 1%; width: 10.3%; }
}

/* --- Founding projects --------------------------------------------------- */

.projects {
  position: relative;
  overflow: clip;
  padding-block: var(--nn-section);
}

.projects .section-heading,
.projects .section-sub { text-align: center; }

.projects .section-sub { margin-block-start: var(--nn-space-s); }

.projects__list { margin-block-start: var(--nn-space-xl); }

.projects .deco--star5  { left: 2%;   top: 2%;   width: clamp(4rem, 11vw, 9.625rem); }
.projects .deco--satr4  { right: -3%; top: 42%;  width: clamp(4rem, 11vw, 10.65rem); rotate: 166.56deg; }
.projects .deco--moon2  { right: 4%;  bottom: 8%; width: clamp(4rem, 13vw, 13.46rem); rotate: -11.17deg; }