/* ============================================================
   HERO — Figma frame "HERO" (node 18:1901). Desktop only for now.
   ============================================================ */

.hero {
  padding: var(--nav-height) var(--gutter) var(--space-page);
}

.hero__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-stack);
}

.hero__title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-stack);
  padding-block: var(--space-stack);
  /* top/bottom lines: .ruled (base.css), so they can draw in */
}

.hero__name-text { display: inline-block; }

.hero__name,
.hero__name-spacer {
  margin: 0;
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--color-ink);
  text-transform: uppercase;
  white-space: nowrap;
}

/* Invisible copy of the name that holds its place in the hero while the
   real <h1> is fixed and flies into the nav (js/hero-logo.js). */
.hero__name-spacer { display: none; visibility: hidden; }

.has-hero-logo .hero__name-spacer { display: block; }
.has-hero-logo .hero__name {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-logo);
  transform-origin: 0 0;
  will-change: transform;
}

/* Tags right-aligned next to the name, as in Figma */
.hero__roles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-tags);
}

.hero__intro {
  margin: 0;
  max-width: 43.375rem; /* 694px, Figma text box width */
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}