/* Mobile UX enhancements: keep the visual system restrained while improving touch, orientation and viewport use. */
@media (max-width: 720px) {
  /* Reclaim space below the compact shared header. */
  .voice-portfolio,
  .music-portfolio,
  .audio-portfolio,
  .web-portfolio {
    padding-top: calc(92px + env(safe-area-inset-top)) !important;
  }

  .about-profile {
    padding-top: calc(94px + env(safe-area-inset-top)) !important;
  }

  /* Home: mobile-first business-card composition.
     Keep the visual language unchanged, but tighten the geometry. */
  .v2-home-reference__identity {
    top: 43.5% !important;
    width: 82% !important;
    gap: 0.34rem !important;
  }

  .v2-home-reference__nav {
    gap: 0.18rem !important;
  }

  .v2-home-reference__nav-group {
    gap: 0 !important;
  }

  .v2-home-reference__nav a {
    display: inline-flex !important;
    min-height: 34px;
    padding: 0 0.32rem;
    align-items: center;
    justify-content: center;
  }

  /* Keep a forgiving touch halo around the compact visible navigation. */
  .v2-home-reference__nav a::before {
    inset: -5px -10px !important;
  }

  /* Give the booking copy enough measure to avoid the awkward narrow wrap,
     while lifting both footer blocks away from the card edge. */
  .v2-home-contact__message {
    left: 7% !important;
    bottom: 8.6% !important;
    max-width: 62% !important;
  }

  .v2-home-contact__location {
    right: 7% !important;
    bottom: 8.9% !important;
    max-width: 30% !important;
  }

  /* Keep the social marks visually small and optically balanced, while the
     physical targets remain comfortably finger-sized. */
  .v2-home-contact__socials {
    top: 5.4% !important;
    right: 7% !important;
    gap: 0 !important;
    align-items: center !important;
  }

  .v2-home-contact__social-link {
    width: 44px !important;
    height: 44px !important;
  }

  .v2-home-contact__social-link svg {
    width: 1rem !important;
    height: 1rem !important;
  }

  .v2-home-contact__linkedin-icon {
    width: 0.94rem !important;
    height: 0.94rem !important;
  }

  .v2-home-contact__instagram-icon {
    width: 1rem !important;
    height: 1rem !important;
  }

  .v2-home-contact__social-link::before {
    inset: 0 !important;
  }

  /* Voice: a quiet position marker replaces the hidden desktop project index. */
  .voice-project-heading__top {
    display: flex !important;
    gap: 1rem;
    align-items: baseline;
    justify-content: space-between;
  }

  .voice-project-count {
    display: inline-block !important;
    flex: 0 0 auto;
    font: inherit;
    font-size: 0.76em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    opacity: 0.42;
  }

  /* Music + DJ: one swipeable year rail instead of a wrapped block. */
  .music-project-index {
    overflow: hidden;
  }

  .music-year-index {
    display: flex !important;
    width: 100%;
    max-width: 100%;
    flex-wrap: nowrap !important;
    gap: 0 0.78rem !important;
    padding: 0 0 0.2rem !important;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .music-year-index::-webkit-scrollbar {
    display: none;
  }

  .music-year-index > li {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  .music-year-index .music-project-index__item {
    min-height: 40px !important;
    padding: 0 0.08rem !important;
    align-items: center;
  }
}