/* ========================================
   Hero — brutalist editorial, biggest typography on the page
   ======================================== */

.hero {
  background: var(--theme-bg);
  color: var(--theme-text-primary);
  padding: 0;
  overflow: hidden;
}

/* TOP — byline + title + portrait image */
.hero__top {
  position: relative;
  padding-top: var(--space-13);
  padding-bottom: var(--space-10);
}

@media (min-width: 768px) {
  .hero__top {
    padding-bottom: var(--space-12);
  }
}

.hero__top .container,
.hero__roles-strip .container,
.hero__bottom .container {
  max-width: 1024px;
  align-items: stretch;
  position: relative;
  z-index: 2;
}

/* Portrait — anchored top-right, fills hero__top height */
.hero__portrait {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: auto;
  pointer-events: none;
  user-select: none;
  z-index: 1;
}

/* Eyebrow byline */
.hero__byline {
  font-size: var(--text-micro);
  font-weight: var(--font-bold);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--theme-text-primary);
  margin: 0 0 var(--space-8);
}

/* Massive headline */
.hero__title {
  font-size: clamp(3.5rem, 14vw, 9rem);
  font-weight: var(--font-black);
  line-height: 0.95;
  letter-spacing: -0.045em;
  color: var(--theme-text-primary);
  margin: 0;
}


/* ROLES STRIP — full-bleed horizontal lines that visually cut the portrait */
.hero__roles-strip {
  border-top: 1px solid var(--theme-border-color);
  border-bottom: 1px solid var(--theme-border-color);
  padding: var(--space-5) 0;
}

@media (min-width: 768px) {
  .hero__roles-strip {
    padding: var(--space-6) 0;
  }
}

.hero__roles {
  font-size: var(--text-body);
  font-weight: var(--font-bold);
  letter-spacing: -0.005em;
  color: var(--theme-text-primary);
  margin: 0;
  line-height: 1.4;
}

/* BOTTOM — lede + nav */
.hero__bottom {
  padding-top: var(--space-10);
  padding-bottom: var(--space-13);
}

@media (min-width: 768px) {
  .hero__bottom {
    padding-top: var(--space-12);
  }
}

.hero__lede {
  font-size: var(--text-body);
  line-height: 1.55;
  font-weight: var(--font-medium);
  color: var(--theme-text-primary);
  max-width: 720px;
  margin: 0;
}

.hero__lede strong {
  font-weight: var(--font-bold);
}