/* ==========================================================================
   02 · Hero
   Referensi: assets/image-reference/2.00 hero.png (frame 412 × 917)
   Urutan masuk: Satria diketik → & stempel → Febianti per huruf
   → empat pojok masuk dari tepi terdekat (barengan)
   ========================================================================== */

.hero {
  /* 141px (8.8125rem) di frame 412 × 917 — dihitung dari tinta huruf di referensi.
     Ikut lebar (34.22vw) DAN tinggi layar (15.4svh), mana yang lebih kecil,
     supaya di HP pendek / in-app browser semuanya tetap muat satu layar. */
  --hero-name-size: clamp(4rem, min(34.22vw, 15.4svh), 8.8125rem);

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.25rem var(--gutter) 3.3125rem;
}

/* --- Baris atas & bawah (pojok) ------------------------------------------ */

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

/* Baris bawah: hashtag sejajar baris terakhir lokasi */
.hero__row:last-child {
  align-items: flex-end;
}

.hero__meta {
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}

.hero__meta--caps {
  text-transform: uppercase;
}

/* --- Nama ----------------------------------------------------------------- */

.hero__names {
  display: flex;
  flex-direction: column;
  font-weight: inherit;
  line-height: inherit;
}

.hero__name {
  display: block;
  font-family: var(--font-display);
  font-size: var(--hero-name-size);
  line-height: 0.81;
}

.hero__name-strong,
.hero__name-soft {
  display: block;
}

.hero__name-strong {
  font-weight: 700;
}

.hero__name-soft {
  font-weight: 300;
}

.hero__name--bride {
  text-align: right;
}

/* --- Ampersand (gambar SVG, bukan font) ------------------------------------ */
/* Ukuran & jarak dihitung dari --hero-name-size supaya proporsinya tetap.
   Jarak visual dibuat SAMA (±47.6px di frame 412):
     garis dasar "-ria" → atas ampersand  =  bawah ampersand → atas huruf "F".
   Margin = jarak itu dikurangi ruang kosong bawaan baris teks
   (0.058 × ukuran huruf di bawah "-ria", 0.049 × di atas "Febi"). */

.hero__amp {
  --amp-gap: 0.338;
  align-self: center;
  width: calc(var(--hero-name-size) * 1.2766); /* 180px di frame 412 */
  height: auto;
  margin-top: calc(var(--hero-name-size) * (var(--amp-gap) - 0.058));
  margin-bottom: calc(var(--hero-name-size) * (var(--amp-gap) - 0.049));
}