/* Site-wide mobile responsiveness (2026-08-06).
   Desktop is untouched: every rule is gated behind the phone breakpoint or the
   body.fj-nav-open state, and !important is used only to win over the inline
   styles the header/hero carry. Loaded in each page helmet after styles.css,
   and in SiteFooter for the cookie banner. Nav open/close logic: mobile-nav.js. */

/* Hamburger bars → X. Only ever visible on mobile (the toggle is display:none
   above the breakpoint), so this can live outside the media query. */
body.fj-nav-open [data-header] [data-nav-bar]:nth-child(1){ transform:translateY(6px) rotate(45deg); }
body.fj-nav-open [data-header] [data-nav-bar]:nth-child(2){ opacity:0; }
body.fj-nav-open [data-header] [data-nav-bar]:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

@media (max-width: 768px){

  /* ---- Header ---- */
  [data-header] > div{
    padding-top:14px !important;
    padding-bottom:14px !important;
    padding-left:20px !important;
    padding-right:20px !important;
  }
  [data-header] a img{ height:44px !important; }

  /* Show the hamburger, collapse the inline nav into a dropdown panel. */
  [data-header] [data-nav-toggle]{ display:inline-flex !important; }

  [data-header] nav{
    display:none !important;
    position:absolute !important;
    top:100%;
    right:14px;
    left:auto;
    margin-top:6px;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:2px !important;
    background:rgba(28,31,37,0.98);
    -webkit-backdrop-filter:blur(12px);
    backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,0.09);
    border-radius:14px;
    padding:8px;
    min-width:200px;
    box-shadow:0 16px 40px rgba(0,0,0,0.45);
  }
  body.fj-nav-open [data-header] nav{ display:flex !important; }

  [data-header] nav a{
    width:100%;
    padding:12px 14px !important;
    font-size:14px !important;
    border-radius:8px;
    text-align:left;
  }
  [data-header] nav a:hover{ background:rgba(255,255,255,0.05); }
  /* the desktop underline + articulation marks make no sense stacked */
  [data-header] nav a::after{ display:none !important; }
  [data-header] nav a [data-sym]{ display:none !important; }

  /* ---- Home hero (lockup redesign): keep the desktop structure — logo on the
     left, name + subtitle stacked beside it — but shrink both so the row fits
     narrow screens, and raise the lockup so it sits centered in the viewport
     (its 54.75% anchor reads too low on a tall phone screen). ---- */
  [data-hero]{
    min-height:100svh !important;   /* small-viewport height: accounts for the
                                       mobile browser toolbar so the cue stays
                                       on screen instead of dropping below it */
    padding-top:96px !important;     /* clear the fixed header, kill top dead space */
    padding-bottom:0 !important;
    padding-left:20px !important;
    padding-right:20px !important;
  }
  [data-hero] > div{
    padding-left:14px !important;
    padding-right:14px !important;
  }
  /* Raise the lockup so it centers in the actually-visible viewport (the inline
     54.75% anchor sits too low on a tall phone). */
  [data-hero] > div:not([data-hero-cue]){
    top:46% !important;
  }
  /* Shift the staff-line art up by the same amount so the lockup stays sitting
     on its middle staff line instead of floating above it. */
  [data-hero-art]{
    transform:translateY(-9%) !important;
  }
  /* Pin the "Selected works below" cue to the bottom edge so it's always
     visible, instead of its inline 88%-of-100vh anchor that fell off screen. */
  [data-hero-cue]{
    top:auto !important;
    bottom:26px !important;
    transform:none !important;
  }
  [data-hero-lockup]{ gap:clamp(14px,4vw,26px) !important; }
  [data-hero-logo]{ height:clamp(64px,17vw,104px) !important; }
  [data-hero-name] > span:first-child{ font-size:clamp(26px,8vw,44px) !important; }
  [data-hero-name] > span:last-child{
    font-size:clamp(11px,3.2vw,16px) !important;
    margin-top:clamp(6px,1.4vw,10px) !important;
  }

  /* ---- Grids that don't reflow on their own ---- */
  [data-works-grid]{ grid-template-columns:1fr !important; }

  /* Score cards: the fixed 21/5.4 ratio leaves no vertical room, so a long
     wrapped title clips at the top (card overflow:hidden, text bottom-anchored).
     Give them a taller ratio + a min-height, and let the text use more width. */
  [data-works-grid] > div[role="button"]{
    aspect-ratio:16/7 !important;
    min-height:132px;
  }
  [data-works-grid] > div[role="button"] > div:last-child{
    max-width:100% !important;
    padding:18px 20px !important;
  }
  [data-home-cards]{ grid-template-columns:1fr !important; }
  [data-arr-intro]{ grid-template-columns:1fr !important; }
  [data-arr-projects]{ grid-template-columns:1fr !important; }

  /* ---- Percussion tooltip: keep the bubble inside the card on small screens.
     Re-anchor it to the instrumentation box (not the inline trigger) and pin it
     to both box edges so it can't run off-screen. ---- */
  [data-instr-box]{ position:relative !important; }
  [data-perc-trigger]{ position:static !important; }
  [data-perc-bubble]{
    left:10px !important;
    right:10px !important;
    transform:none !important;
    width:auto !important;
    max-width:none !important;
  }

  /* ---- Work modal: pin the close button top-right regardless of title length ---- */
  [data-wm-header]{ position:relative !important; padding-right:52px !important; }
  [data-wm-close]{ position:absolute !important; top:0; right:0; margin:0 !important; }

  /* ---- Cookie banner: pin to both edges so it can't overflow ---- */
  [data-cookie-banner]{
    left:16px !important;
    right:16px !important;
    bottom:16px !important;
    max-width:none !important;
  }
}