/* ==========================================================================
   Hero — colorful bars + Leene typography
   ========================================================================== */

.hero {
  position: relative;
  align-self: stretch;
  /* aspect ratio preserves the proportions: 653/1410 ≈ 0.463 */
  aspect-ratio: 1410 / 653;
  margin: 0 20% -73px 10px; /* 10px left matches nav; 20% right shrinks hero */
  flex-shrink: 0;
  /* no z-index — lets title and bars have independent stacking */
}

/* Bars container — fills the entire hero, clips bars during scroll animation */
.hero__bars {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  bottom: 0;
  overflow: hidden; /* clip bars so they hide behind the nav, not above it */
}

/* All bars share the same flat top edge.
   Different widths (right) and heights (downward) create the step pattern. */
.hero__bar {
  position: absolute;
  left: 0;
  top: 0;
}

/* Bars wrap around the white box (title + bracket extension ~51% wide, ~28% tall) */
.hero__bar--blue {
  width: 86%;
  height: 100%;
  background: var(--blue-200);
}

.hero__bar--orange {
  width: 78%;
  height: 76%;
  background: var(--yellow-600);
}

.hero__bar--pink {
  width: 70%;
  height: 59%;
  background: var(--pink-200);
}

.hero__bar--green {
  width: 62%;
  height: 42%;
  background: var(--green-800);
}

/* Title container — covers nav area, above fixed header in stacking order */
.hero__title {
  position: absolute;
  left: 0;
  top: -73px; /* align with nav top (73px header-wrapper spacer) */
  width: 43.65%; /* 615.693/1410 */
  aspect-ratio: 615.693 / 258.366;
  background: var(--blue-100);
  z-index: 901; /* above fixed nav (z-index: 900) so bracket covers nav */
}

/* White background extension for bracket area */
.hero__title::after {
  content: '';
  position: absolute;
  top: 0;
  left: 100%;
  width: calc(12.90% + 40px); /* 20px gap + bracket + 20px right margin */
  bottom: 0;
  background: var(--blue-100);
  z-index: 0;
}

/* Wordmark — 20px inset from edges of title container.
   This is the drawn mark from the design, not the font: WF Aprello Bold gives
   the L a foot as heavy as its stem, while the drawn L's foot is noticeably
   lighter. Width is driven by the container; the viewBox supplies the height. */
.hero__title-text {
  position: absolute;
  bottom: 20px;
  left: 20px;
  display: block;
  width: calc(100% - 40px);
  height: auto;
  aspect-ratio: 488.947 / 124.383;
  color: var(--green-1200);
}

/* Decorative L-bracket — in the white extension, 20px gap from title edge */
.hero__bracket {
  position: absolute;
  top: 20px;
  right: calc(-12.90% - 20px);
  width: 12.90%;  /* 79.392/615.693 */
  height: 47.40%; /* 122.46/258.366 */
  z-index: 2;
}