/* Small supplement to styles.css. Only adds rules the existing CSS doesn't have.
   Loaded AFTER styles.css so these rules win on conflict. */

/* ============================================================
   Mobile menu (hamburger toggle)
   ============================================================ */
@media (max-width: 767px) {
  header nav.is-open {
    display: flex !important;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: #fff;
    padding: 12px 24px 20px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  }
  header nav.is-open > a {
    padding: 14px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  }
  header nav.is-open > a:last-child {
    border-bottom: 0;
  }
}

/* ============================================================
   Animation polish - snappier reveal, more cinematic ken-burns
   ============================================================ */

/* Fade-up was 0.9s with linear-ish ease. Faster + snappier easing reads as
   intentional rather than sluggish. */
.fade-up {
  transition: opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  transform: translateY(18px);
}

/* Ken-burns at 8s was barely visible. 14s with slightly stronger zoom gives a
   real "the photo is breathing" cinematic feel. */
.ken-burns {
  animation-duration: 14s;
}

/* Book float is already nice; bump the amplitude in keyframes via a CSS var
   tweak is overkill - leave the 7s default. */

/* ============================================================
   Mobile photo sizing - portraits visible on screen, not dominating it
   ============================================================ */

/* Universal safety net: no image ever overflows its container on small screens. */
img {
  max-width: 100%;
  height: auto;
}

@media (max-width: 767px) {
  /* Hero portrait: the headshot block has aspect-[3/4]. On a tall phone this
     can take the full viewport. Cap height so the headline below it is visible
     without scrolling. */
  section .ken-burns,
  section img[alt*="entrepreneur" i],
  section img[alt*="writer" i],
  section img[alt*="portrait" i] {
    max-height: 75vh;
    object-fit: cover;
    object-position: top center;
  }

  /* Book cover floats on a glow - cap so it sits comfortably with text below. */
  .book-float {
    max-height: 60vh;
  }

  /* Hero decorative boxes (the red-tint behind the portrait) sometimes peek
     past the viewport on narrow phones. Clip them. */
  section {
    /* keep overflow hidden as it already was, just being explicit */
    overflow-x: hidden;
  }

  /* About-page gallery photos: ensure the grid items stay tap-friendly and
     well proportioned on phone. Cap any individual gallery photo height. */
  [class*="gallery"] img,
  img[alt*="gallery" i] {
    max-height: 60vh;
    object-fit: cover;
  }
}

/* ============================================================
   Respect users who prefer reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .ken-burns,
  .book-float,
  .glow-pulse {
    animation: none !important;
  }
  .fade-up {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}