.hero {
  min-height: var(--hero-min-height);
  padding-block: var(--space-6) var(--space-8);
  background: var(--gradient-hero-bg);
}

.hero .column {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: var(--space-4);
}

.hero__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.hero__name {
  --metal: var(--gradient-gold);
  color: var(--color-gold);
  font: var(--text-name);
}

.hero__mood {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  background: var(--gradient-copper);
  color: var(--color-bg);
  font: var(--text-badge);
}

.hero__arch {
  display: flex;
  flex-grow: 1;
  width: 100%;
  max-width: var(--arch-max-width);
  margin-inline: auto;
  padding: var(--arch-frame);
  border-radius: var(--radius-arch);
  background: var(--gradient-gold-frame);
}

.hero__arch-fill {
  display: flex;
  flex-grow: 1;
  min-width: 0;
  padding: var(--space-2) var(--space-2) 0;
  border-radius: var(--radius-arch);
  background: var(--gradient-arch);
}

.hero__arch-line {
  display: flex;
  flex-grow: 1;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: var(--arch-crown) var(--space-3) var(--space-8);
  border: var(--border-width) solid var(--color-border);
  border-block-end: 0;
  border-radius: var(--radius-arch);
}

.hero__headline {
  font: var(--text-hero);
  letter-spacing: var(--tracking-hero);
  text-align: center;
}

.hero__headline-em {
  color: var(--color-gold);
  font-style: italic;
}