/* ==================================================================
   HOME PAGE — layout only. Colours, type, and the floral system all
   come from global.css; this file just positions things.

   The home page is the hero, full stop — no content below it. The
   portrait fills the section; the bio blurb sits in a cluster near
   the top-right, and the role eyebrow + big wordmark sit in a
   second cluster near the bottom-right, mirroring the composition
   of the portrait itself (subject left, breathing room right).
================================================================== */

.hero {
  position: relative;
  width: 100%;
  min-height: 100svh;
  overflow: hidden;
  background: var(--bg);
}
.hero__portrait {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 22% center; /* keeps her in the left third at any viewport width */
}

/* Two soft dark pools behind the two text clusters (top-right for the
   blurb, bottom-right for the wordmark) so cream text stays legible
   over the photo without needing a solid scrim across the whole
   image — the left side, where her face is, stays untouched. */
.hero__texture {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(46% 40% at 88% 18%, rgba(52,19,27,0.55) 0%, transparent 100%),
    radial-gradient(58% 48% at 84% 88%, rgba(52,19,27,0.62) 0%, transparent 100%);
  z-index: 1;
}

/* ---------- BIO BLURB — top-right cluster ---------- */
.hero__blurb {
  position: absolute;
  z-index: 3;
  top: calc(var(--nav-height) + clamp(1.5rem, 6vh, 3rem));
  right: clamp(1.5rem, 6vw, 4rem);
  max-width: 34ch;
  margin: 0;
  text-align: left;
  font-size: clamp(1.25rem, 1.4vw, 1.15rem); /* sized to read easily, not caption-small */
  line-height: 1.65;
  color: var(--bg);
  text-shadow: 0 2px 14px rgba(52,19,27,0.55);
}
.hero__blurb em { font-style: italic; }

/* ---------- EYEBROW + WORDMARK — bottom-right cluster ---------- */
.hero__signature {
  position: absolute;
  z-index: 3;
  right: clamp(1.5rem, 6vw, 4rem);
  bottom: clamp(2rem, 10vh, 4rem);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}
.hero__eyebrow {
  margin: 0 0 0.6rem;
  font-weight: 700;             /* heavy on purpose — this is the role line, it should read instantly */
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: clamp(0.8rem, 1.3vw, 0.95rem);
  color: var(--bg);
  text-shadow: 0 2px 10px rgba(52,19,27,0.6);
}

/* Wordmark — one line on desktop ("Sinaye" + "Toni"+"(Portfolio)" as
   two flex children of the same row); stacks on mobile via the
   media query below. */
.hero__wordmark {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 0.4em;
}
.hero__name {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: clamp(7rem, 6vw, 5rem);
  line-height: 1;
  color: var(--bg);
  text-shadow: 0 2px 20px rgba(52,19,27,0.6), 0 0 2px rgba(52,19,27,0.4);
}
.hero__name-row {
  display: flex;
  align-items: baseline;
  gap: 0.45em;
}


@media (max-width: 780px) {
  .hero__portrait { object-position: 18% center; }

  /* Blurb drops out entirely on mobile — no room for it without
     crowding her face or the wordmark. */
  .hero__blurb { display: none; }

  .hero__signature {
    right: clamp(1.25rem, 6vw, 2rem);
    bottom: clamp(1.5rem, 8vh, 2.5rem);
  }

  /* Stack: "Sinaye" on its own line, "Toni" + "(Portfolio)" on the
     next — both still right-aligned. */
  .hero__wordmark {
    flex-direction: column;
    align-items: flex-end;
    gap: 0.05em;
  }
  /* Reduced vs. desktop scale so the stacked two-line mark doesn't
     eat too much of her face on a narrow viewport. */
  .hero__name { font-size: clamp(6rem, 11vw, 2.6rem); }

}