/* === Safe-area helpers (apply to top/nav globally on phones) === */
  @media (max-width: 900px) {
    .site-nav {
      padding-top: max(env(safe-area-inset-top), .6rem) !important;
      padding-left: calc(.8rem + env(safe-area-inset-left)) !important;
      padding-right: calc(.8rem + env(safe-area-inset-right)) !important;
    }
    .content-overlay, .main, body {
      padding-left: env(safe-area-inset-left);
      padding-right: env(safe-area-inset-right);
    }
  }

  /* === PORTRAIT PHONES: edge-to-edge hero (full-bleed) === */
  @media (max-width: 900px) and (orientation: portrait),
         (max-width: 900px) and (max-aspect-ratio: 3/4) {
    body #home.home { height: 100vh !important; height: 100svh !important; height: 100dvh !important;  height: calc(var(--vh, 1vh) * 100 - var(--nav-h, 0px)) !important; min-height: calc(var(--vh, 1vh) * 100 - var(--nav-h, 0px)) !important; }

    body #home.home .home-background { max-width: none !important; width: 100vw !important; height: 100vh !important; height: 100svh !important; height: 100dvh !important; margin: 0 !important; border-radius: 0 !important; height: 100vh !important; height: 100svh !important; height: 100dvh !important;  height: 100% !important; width: 100vw !important; margin: 0 !important; border-radius: 0 !important; }

    body #home.home .hero-picture,
    body #home.home .hero-img {
      width: 100% !important;
      height: 100% !important;
    }
    body #home.home .hero-img {
      object-fit: cover !important;
      object-position: 50% 30% !important;
    }
    body #home.home .home-overlay-text {
      padding-top: calc(env(safe-area-inset-top) + 8px) !important;
    }
  }

  /* === LANDSCAPE PHONES: fine-tune "conductor" position only === */
  @media (max-width: 720px) and (orientation: landscape),
         (max-width: 720px) and (min-aspect-ratio: 4/3) {
    body #home.home .home-overlay-text .role {
      position: relative !important;
      transform: translateX(6.0rem) !important;
      margin-left: 0 !important;
    }
  }
  @media (min-width: 721px) and (max-width: 900px) and (orientation: landscape),
         (min-width: 721px) and (max-width: 900px) and (min-aspect-ratio: 4/3) {
    body #home.home .home-overlay-text .role {
      position: relative !important;
      transform: translateX(5.3rem) !important;
      margin-left: 0 !important;
    }
  }

  /* === Video CLS: stable aspect ratio on phones === */
  @media (max-width: 900px) {
    .video-item iframe {
      width: 100% !important;
      height: auto !important;
      aspect-ratio: 16 / 9;
    }
  }

  /* === Gallery CLS: predictable tiles on phones (no desktop change) === */
  @media (max-width: 900px) {
    .gallery-grid .image-container {
      aspect-ratio: 3 / 2;
      overflow: hidden;
    }
    .gallery-grid .image-container img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
  }

  /* Eliminate container/section spacing in portrait so hero can truly fill */
  @media (max-width: 900px) and (orientation: portrait),
         (max-width: 900px) and (max-aspect-ratio: 3/4) {
    .container { padding: 0 !important; }
    body #home.home {
      margin: 0 !important;
      padding: 0 !important;
      border: 0 !important;
      border-radius: 0 !important;
      box-shadow: none !important;
      background: transparent !important;
    }
    body #home.home .home-background { border-radius: 0 !important; }
    section.home { margin: 0 !important; padding: 0 !important; }
  }

  /* Lift overlay text for better contrast on portrait phones */
  @media (max-width: 900px) and (orientation: portrait),
         (max-width: 900px) and (max-aspect-ratio: 3/4) {
    body #home.home .home-overlay-text {
      transform: translateY(calc(-50% - 6rem)) !important;
    }
  }

  /* === PORTRAIT PHONES: make hero fill most of the screen === */
  @media (max-width: 900px) and (orientation: portrait),
         (max-width: 900px) and (max-aspect-ratio: 3/4) {
    body #home.home { 
      min-height: 100vh !important;
      min-height: 100svh !important;
      min-height: 100dvh !important;
    }
    body #home.home .home-background {
      max-width: none !important;
      width: 100vw !important;
      height: 92vh !important;
      height: 92svh !important;
      height: 92dvh !important;
      margin: 0.5rem auto 0 !important;
      border-radius: 16px !important;
    }
    body #home.home .hero-picture,
    body #home.home .hero-img {
      width: 100% !important;
      height: 100% !important;
    }
    body #home.home .hero-img {
      object-fit: cover !important;
      object-position: 50% 30% !important;
    }
  }

  /* === LANDSCAPE PHONES: nudge ONLY the word "conductor" to the right === */
  @media (max-width: 900px) and (orientation: landscape),
         (max-width: 900px) and (min-aspect-ratio: 4/3) {
    body #home.home .home-overlay-text .role {
      position: relative !important;
      transform: translateX(5.3rem) !important; /* adjust as needed */
      margin-left: 0 !important;
    }
  }

<script id="vh-fix">
  (function(){
    function setVH(){
      var vh = window.innerHeight * 0.01;
      document.documentElement.style.setProperty('--vh', vh + 'px');
      var nav = document.querySelector('.site-nav');
      var navh = (window.matchMedia('(max-width: 900px)').matches && nav) ? nav.getBoundingClientRect().height : 0;
      document.documentElement.style.setProperty('--nav-h', navh + 'px');
    }
    setVH();
    window.addEventListener('resize', setVH);
    window.addEventListener('orientationchange', setVH);
    document.addEventListener('visibilitychange', function(){ if(!document.hidden){ setTimeout(setVH, 50); } });
  })();
</script>

/*  Preload the background for faster first paint  */
<link as="image" href="greenish_concrete_darker.png" rel="preload"/>
/*  FIX-PACK overrides: hero, biography columns, hide contact agency  */
<style>
  /* 1) HERO — guaranteed background image using files that exist */
  .home .home-background{ position:relative; overflow:hidden; }
  .home .home-background::before{
    content:"";
    position:absolute; inset:0; z-index:0;
    background-image: -webkit-image-set(url('hero-1920.jpg') 1x, url('hero-3840.jpg') 2x);
    background-image: image-set(url('hero-1920.jpg') 1x, url('hero-3840.jpg') 2x);
    background-position: 58% 32%;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: inherit;
  }
  /* If an <img class="hero-img"> is present, keep it above the bg */
  .hero-picture,.hero-img{ position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:cover; z-index:1; }
  @media (min-width:1024px) and (max-width:1599px){ .hero-img{ object-position:55% 28%; } }
  @media (min-width:1600px){ .hero-img{ object-position:58% 32%; } }
  @media (min-width:2200px){ .hero-img{ object-position:56% 30%; } }

  /* 2) BIOGRAPHY — two columns on desktop, narrow single column on smaller screens */
  #biography .biography-text, #biography #bio-text, #biography .bio-text, #biography .text, section#biography .content-card{
    max-width: 1100px;
    margin-inline: auto;
    column-count: 2;
    column-gap: 2.2rem;
    line-height: 1.75;
    text-align: justify;
  }
  @media (max-width: 1199px){
    #biography .biography-text, #biography #bio-text, #biography .bio-text, #biography .text, section#biography .content-card{
      column-count: 1;
      max-width: 68ch;
    }
  }

  /* 3) CONTACT — hide any 'Contact Agency' fallback text or link */
  #contact #contact-info:empty { display:none; }
  #contact #contact-info a { display:none !important; }
  #contact .contact-info a { display:none !important; }
  #contact a[href*="imgartists"], #contact a[href*="img-artists"], #contact a[href*="imgartists.com"] { display:none !important; }
  

  #gallery .gallery-subnav {
    display: flex; gap: .5rem; justify-content: center; align-items: center;
    margin: .5rem 0 1rem; position: sticky; top: calc(var(--nav-h, 0px) + 8px); z-index: 2;
    backdrop-filter: blur(6px); background: rgba(0,0,0,.15);
    padding: .5rem 1rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.08);
  }
  #gallery .subnav-link {
    appearance: none; border: 1px solid rgba(255,255,255,.14);
    background: transparent; color: inherit; padding: .45rem .9rem;
    border-radius: 999px; font-weight: 600; letter-spacing: .02em; cursor: pointer;
  }
  #gallery .subnav-link.active { background: rgba(255,255,255,.12); }

  /* Make thumbnails uniform size across both panes */
  #gallery .gallery-grid img {
    width: 100%;
    aspect-ratio: 3 / 2;    /* choose 3:2 crop; change to 4/3 or 1/1 if you prefer */
    object-fit: cover;
    display: block;
  }

  /* Slightly larger thumbs for Portraits */
  #gallery #portraits-pane .gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0.9rem;
  }
  #gallery #portraits-pane .gallery-grid img {
    width: 100%;
    height: auto;
    display: block;
  }

  /* Slightly larger thumbs for In Performance */
  #gallery #performance-pane .gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0.9rem;
  }
  #gallery #performance-pane .gallery-grid img {
    width: 100%;
    height: auto;
    display: block;
  }

/* --- Mobile lightbox caption & close button fixes v17 --- */
@media (max-width: 640px) {
  #lightbox:not([hidden]) #lb-caption,
  #lightbox:not([hidden]) .lb-caption,
  #lightbox:not([hidden]) .caption {
    position: fixed;
    left: 0; right: 0;
    bottom: env(safe-area-inset-bottom, 8px);
    padding: 10px 12px;
    font-size: 0.9rem;
    line-height: 1.35;
    color: #fff;
    max-height: 40vh;
    overflow-y: auto;
    background: linear-gradient(to top, rgba(0,0,0,.7), rgba(0,0,0,0));
    z-index: 10001;
    margin: 0 !important;
  }
  #lightbox:not([hidden]) #lb-image {
    max-height: calc(100vh - 160px);
    object-fit: contain;
  }
  #lightbox:not([hidden]) .lightbox-close {
    position: fixed;
    top: env(safe-area-inset-top, 10px);
    right: env(safe-area-inset-right, 10px);
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    z-index: 10002;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
}

/* === Biography typography (all devices) === */
#bio-text {
  letter-spacing: normal !important;
  word-spacing: normal !important;
  text-align: justify !important;
  text-justify: auto !important;
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  word-break: normal;
  overflow-wrap: anywhere;
  line-height: 1.55 !important;
}
#bio-text p + p { margin-top: 0.9em; }

#footer-credit{display:none}


/* === Biography Read-More toggle === */
#bio-text .more-wrap[hidden] { display: none !important; }
#bio-text .bio-toggle { background: none; border: none; padding: 0; margin: .2rem 0; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }
#bio-text .bio-toggle:focus { outline: 2px dashed currentColor; outline-offset: 2px; }

#bio-text .bio-toggle:hover { text-decoration: none; }