/* ============================================================
   HERO — full-viewport opening section
   ============================================================ */


/* ── Container ────────────────────────────────────────────── */

.hero {
  min-height:     100vh;
  display:        flex;
  flex-direction: column;
  /* Content sits at the bottom — intentional editorial choice.
     The empty space above creates tension and draws the eye down. */
  justify-content: flex-end;
  padding:         8rem 4rem 4rem;
  border-bottom:   1px solid var(--border);
  position:        relative;
}


/* ── Label above the name (e.g. "Backend Developer · Bandung") */

.hero-label {
  font-size:      11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color:          var(--gray);
  margin-bottom:  1.5rem;
}


/* ── Giant name heading ───────────────────────────────────── */

.hero h1 {
  font-family:    'Playfair Display', serif;
  /* clamp(min, preferred, max) — scales with viewport width */
  font-size:      clamp(3.5rem, 12vw, 10rem);
  font-weight:    900;
  line-height:    0.9;
  letter-spacing: -0.04em;
  margin-bottom:  2.5rem;
  max-width:      900px;
}


/* ── Row below the name: description + contact info ──────── */

.hero-meta {
  display:     flex;
  gap:         3rem;
  align-items: flex-end;
  flex-wrap:   wrap;
}

.hero-desc {
  max-width:   480px;
  color:       var(--gray);
  line-height: 1.8;
  font-size:   13px;
}

.hero-info {
  display:        flex;
  flex-direction: column;
  gap:            0.4rem;
  font-size:      12px;
  color:          var(--gray);
}

.hero-info a {
  color:           var(--black);
  text-decoration: none;
  border-bottom:   1px solid var(--border);
  transition:      border-color 0.2s;
}

.hero-info a:hover {
  border-color: var(--black);
}


/* ── "Ask me anything" CTA button ────────────────────────── */

.hero-ama-btn {
  margin-top:      1rem;
  display:         inline-block;
  background:      var(--black);
  color:           var(--white) !important;
  text-decoration: none !important;
  border-bottom:   none !important;
  padding:         0.9rem 2rem;
  font-family:     'Space Mono', monospace;
  font-size:       12px;
  letter-spacing:  0.1em;
  text-transform:  uppercase;
  border:          1px solid var(--black) !important;
  transition:      background 0.4s ease, color 0.4s ease;
  cursor:          pointer;
}

.hero-ama-btn:hover {
  background: var(--white) !important;
  color:      var(--black) !important;
}


/* ── Vertical "Scroll to explore" hint (bottom-right) ─────── */

.hero-scroll {
  position:     absolute;
  bottom:       2rem;
  right:        4rem;
  font-size:    11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:        var(--gray);
  writing-mode: vertical-rl;
}