/* ==========================================================================
   Hero — full-bleed photograph, one screen, editorial type overlay
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background-color: var(--color-ink);
}

.hero-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* One value everywhere — a single, moderate shift keeps her clearly in
     frame at every viewport width, with a little extra clearance between
     her forehead and the text column's right edge. */
  object-position: 72% 32%;
}


.hero-vignette {
  position: absolute;
  inset: 0;
  /* A panel, not a wash. Thin serif strokes over a busy, brightly-lit
     texture (her hair) need much stronger backing than a mid-opacity tint —
     a "reads fine on a solid swatch" contrast check isn't enough here.
     Pure 90deg (not an off-angle) so the dark zone doesn't drift vertically
     relative to the text column above vs. below the horizon line. Stays
     near-opaque across the full text column (~36% of viewport) before
     easing out by 60%. */
  background:
    linear-gradient(
      90deg,
      rgba(14, 15, 18, 0.92) 0%,
      rgba(14, 15, 18, 0.88) 30%,
      rgba(14, 15, 18, 0.68) 40%,
      rgba(14, 15, 18, 0.28) 50%,
      rgba(14, 15, 18, 0) 60%
    ),
    linear-gradient(
      0deg,
      rgba(14, 15, 18, 0.45) 0%,
      rgba(14, 15, 18, 0.12) 36%,
      rgba(14, 15, 18, 0) 58%
    );
}

.hero-content {
  position: relative;
  z-index: 1;
  /* Deliberately NOT using .container here — that utility centers its
     content with margin-inline:auto, which was quietly centering this
     column into the middle of the frame (right where the subject's face
     is) instead of anchoring it left. A dedicated left inset keeps this
     genuinely a left-third column. */
  padding-inline-start: var(--margin-inline);
  padding-inline-end: var(--space-3);
  /* Fluid, not a fixed token — a fixed 240px top offset overflows a one-screen
     hero once the headline wraps to 4-5 lines on narrow viewports. */
  padding-top: clamp(5rem, 3rem + 10vw, 15rem);
  padding-bottom: clamp(2.5rem, 1.5rem + 6vw, 8rem);
  /* Left third, not left half — keeps the copy off the subject regardless
     of exact viewport width. */
  max-width: 26rem;
  text-shadow: 0 2px 16px rgba(14, 15, 18, 0.45);
}

.hero-subtext {
  margin-top: var(--space-3);
  max-width: 26rem;
  color: var(--color-slate);
}

.hero-actions {
  margin-top: var(--space-6);
}

/* Scroll cue — thin line with a traveling pulse, desktop only */
.scroll-cue {
  position: absolute;
  left: var(--margin-inline);
  bottom: var(--space-4);
  display: none;
}

.scroll-cue-line {
  display: block;
  width: 1px;
  height: 48px;
  background: var(--color-graphite-line);
  position: relative;
  overflow: hidden;
}
.scroll-cue-line::after {
  content: '';
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-brass);
  animation: scroll-cue-pulse 2.4s var(--ease-entrance) infinite;
}

@keyframes scroll-cue-pulse {
  0%   { top: -100%; }
  60%  { top: 100%; }
  100% { top: 100%; }
}

@media (min-width: 768px) {
  .scroll-cue { display: block; }
}

/* ==========================================================================
   Mobile Hero — a genuinely different composition, not a scaled-down desktop.
   The desktop hero overlays text on the photo because there's a wide dark
   text-safe zone to put it in; a phone doesn't have that room, and forcing
   the same overlay approach is exactly what kept pushing text onto her face.
   Instead: photo on top (untouched, no text over it, cropped to keep her
   clearly in frame), solid ink content block below it. Two stacked, honest
   sections instead of one fragile composite.
   ========================================================================== */
@media (max-width: 767px) {
  .hero {
    flex-direction: column;
    align-items: stretch;
    min-height: auto;
  }

  .hero-media {
    position: relative;
    inset: auto;
    width: 100%;
    height: 58vh;
  }

  .hero-image {
    /* Centered on her, higher in the frame — no text will ever sit over
       this image on mobile, so the crop only has to serve the photo. */
    object-position: 50% 22%;
  }

  .hero-vignette {
    /* Just a soft seam into the content block below, not a text-safe panel. */
    background: linear-gradient(0deg, rgba(14, 15, 18, 0.85) 0%, rgba(14, 15, 18, 0) 20%);
  }

  .hero-content {
    background-color: var(--color-ink);
    padding-inline: var(--margin-inline);
    padding-block: var(--space-8) var(--space-6);
    max-width: none;
    text-shadow: none;
  }

  .hero-subtext {
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-cue-line::after {
    animation: none;
    top: 0;
  }
}