/* Mobile experience v1.0 — 100% scoped to phone widths.
   The main gallery and editorial typography remain unchanged on desktop. */
@media (max-width: 560px) {
  #homeView {
    --mobile-actions-gap: 8px;
    gap: 9px !important;
  }
  /* Two-row header: compact brand + social profiles, then primary actions.
     Override Showreel Manager's grid at <=560px, while preserving all links. */
  #homeView .topbar {
    position: relative !important;
    display: flex !important;
    flex-flow: column nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    padding: 1px 0 10px !important;
    min-height: 0;
  }
  #homeView .identity {min-width:0;max-width:calc(100% - 155px)}
  #homeView .identity h1 {
    font-size: clamp(24px, 6.9vw, 31px) !important;
    line-height: 1.05 !important;
    letter-spacing: -.035em !important;
    white-space: nowrap !important;
  }
  #homeView .identity-bottom {margin-top: 6px !important;gap: 0 !important;}
  #homeView .identity-bottom .line{display:none !important;}
  #homeView .identity-bottom span {
    display: block;
    font-size: 7.5px !important;
    line-height: 1.35 !important;
    letter-spacing: .065em !important;
    white-space: normal;
    max-width: 26ch;
  }
  #homeView .header-nav {
    display: flex !important;
    flex-flow: row nowrap !important;
    grid-template-columns: none !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: var(--mobile-actions-gap) !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    min-width: 0;
    position: static !important;
  }
  #homeView .header-nav > button {
    flex: 0 0 auto;
    min-height: 43px !important;
    height: 43px !important;
    padding: 0 13px !important;
    font-size: 12px !important;
    line-height: 1.15 !important;
    touch-action: manipulation;
  }
  #homeView .header-nav > .mn-sr-trigger {
    order: -2;
    gap: 7px !important;
    padding: 0 14px !important;
  }
  #homeView .header-nav > [data-open="about"]{order:-1}
  #homeView .header-nav > [data-open="contact"]{order:0}
  #homeView .mn-social-links {
    position: absolute !important;
    inset: 0 0 auto auto !important;
    display: flex !important;
    width: auto !important;
    height: 36px;
    grid-column: auto !important;
    flex: 0 0 auto !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 5px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }
  #homeView .mn-social-links .mn-social-link {
    display: inline-flex !important;
    box-sizing: border-box !important;
    width: 33px !important;
    min-width: 33px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 !important;
    border-radius: 7px !important;
    flex: 0 0 33px !important;
    touch-action: manipulation;
  }
  #homeView .mn-social-link svg{width:16px;height:16px}
  #homeView .mn-social-link svg.mn-imdb{width:23px;height:15px}
  #homeView .mn-social-link svg.mn-artstation{width:18px;height:16px}
  #homeView .mn-social-link:focus-visible{outline-offset:1px}
  #homeView .section-head{margin:0;padding-top:6px;}
  /* Category strip: one horizontal row, finger-sized controls. */
  #homeView .filter-row{
    margin:0;
    min-height:45px !important;
    padding:0 0 1px !important;
    gap:7px !important;
    scroll-padding-inline:2px;
    scrollbar-width:none;
  }
  #homeView .filter-button {
    height:43px !important;
    min-height:43px !important;
    padding:0 9px !important;
    font-size:11px !important;
    border-radius:6px !important;
    white-space:nowrap;
  }
  #homeView .filter-total{font-size:10px!important}
  /* A little more visible work without clipping captions. */
  #homeGrid{gap:11px!important}
  #homeGrid .tile {
    aspect-ratio: 1.78 !important;
    min-height: 177px !important;
    transform:none !important;
    touch-action:pan-y manipulation;
    -webkit-tap-highlight-color:rgba(220,186,129,.15);
  }
  #homeGrid .tile:active{border-color:rgba(215,191,155,.66)!important}
  #homeGrid .tile .tile-media img {transform:none!important}
  #homeGrid .tile:hover,
  #homeGrid .tile:focus:not(:focus-visible){transform:none!important}
  #homeGrid .tile:hover .tile-media img,
  #homeGrid .tile:active .tile-media img {transform:none!important}
  #homeGrid .tile-caption {left:14px;right:13px;bottom:13px}
  #homeGrid .tile-caption .tile-name{font-size:clamp(23px,6vw,29px)!important;line-height:1.09}
  #homeGrid .tile-caption .tile-role{font-size:10px!important;margin-top:4px}
  #homeGrid .tile-arrow {width:35px;height:35px;font-size:22px}
  /* Page navigation and finger targets stay spacious. */
  #homeView .footer{padding-top:10px}
  #homeView .page-nav button{min-width:44px;min-height:44px}
}
@media (max-width: 360px) {
  #homeView{--mobile-actions-gap:6px}
  #homeView .identity{max-width:calc(100% - 128px)}
  #homeView .identity h1{font-size:23px!important}
  #homeView .mn-social-links {gap:3px !important;height:32px}
  #homeView .mn-social-links .mn-social-link{width:28px!important;min-width:28px!important;height:32px!important;min-height:32px!important;flex-basis:28px!important}
  #homeView .header-nav > button{padding:0 11px!important;font-size:11px!important}
  #homeView .header-nav > .mn-sr-trigger{padding:0 12px!important}
  #homeGrid .tile{aspect-ratio:1.72!important}
}
@media (hover:none) and (pointer:coarse) {
 #homeGrid .tile:hover{transform:none!important}
 #homeGrid .tile:hover .tile-media img{transform:none!important}
 #homeGrid .tile:hover .tile-arrow{background:rgba(13,16,20,.38)!important;color:#f7f2eb!important}
}

/* V1.1 MOBILE CLEAN-UP — scoped to phones; never replaces desktop design. */
@media (max-width:560px) {
  /* Header: the identity is the hero, not the row of social squares. */
  #homeView .topbar { gap:9px!important; padding-bottom:8px!important; }
  #homeView .mn-social-links { gap:3px!important; height:38px!important; }
  #homeView .mn-social-links .mn-social-link,
  #homeView .topbar .mn-social-links a {
    display:inline-flex!important;
    width:36px!important; min-width:36px!important;
    height:38px!important; min-height:38px!important;
    flex:0 0 36px!important;
    border-color:transparent!important;
    border-radius:6px!important;
    box-shadow:none!important;
    background:transparent!important;
    opacity:.84;
  }
  #homeView .mn-social-links .mn-social-link:active,
  #homeView .mn-social-links .mn-social-link:focus-visible {
    background:rgba(214,182,134,.13)!important;opacity:1;
  }
  #homeView .header-nav { gap:7px!important; }
  #homeView .header-nav > button {
    height:40px!important; min-height:40px!important;
    border-radius:8px!important;
    background:transparent!important;
    border-color:rgba(223,215,201,.17)!important;
    color:#dcd9d3!important;
    box-shadow:none!important;
    font-size:12px!important;
    padding-inline:14px!important;
  }
  /* Leave showreel first and preserve the Showreel Manager's original click handler. */
  #homeView .header-nav > .mn-sr-trigger {
    display:inline-flex!important; visibility:visible!important; opacity:1!important;
    order:-2!important;
    color:#e8ca95!important;
    background:rgba(202,166,109,.09)!important;
    border-color:rgba(214,180,127,.45)!important;
  }
  #homeView .header-nav > button:active {background:rgba(224,198,160,.11)!important;}
  /* Filters: quiet, editorial tabs, with a single gold rule for selection. */
  #homeView .filter-row {
    overflow-x:auto!important;overflow-y:hidden!important;
    flex-wrap:nowrap!important;
    gap:19px!important;
    padding:0!important;
    border-top:0!important;
    border-bottom:1px solid rgba(221,204,173,.14)!important;
    min-height:43px!important;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
  }
  #homeView .filter-row::-webkit-scrollbar {display:none;}
  #homeView .filter-button {
    box-sizing:border-box!important;
    flex:0 0 auto!important;
    min-height:42px!important; height:42px!important;
    border:0!important;
    border-bottom:2px solid transparent!important;
    border-radius:0!important;
    box-shadow:none!important;
    background:transparent!important;
    padding:1px 0 0!important;
    color:#a5a6a7!important;
    font:500 12px/1.2 Manrope,Arial,sans-serif!important;
    letter-spacing:-.015em!important;
  }
  #homeView .filter-button[aria-pressed="true"] {
    color:#f4eee4!important;
    border-bottom-color:#d8b987!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  #homeView .filter-button .filter-total {font-size:10px!important;opacity:.8;margin-left:3px!important;}
  /* Project cards keep artwork prominent; reduce chrome around controls. */
  #homeGrid .tile-arrow {
    background:rgba(11,12,17,.22)!important;
    border-color:rgba(235,226,212,.32)!important;
    box-shadow:none!important;
    width:34px!important;height:34px!important;
  }
  #homeGrid .tile-corner-number {background:rgba(8,10,13,.33)!important;border-color:rgba(255,255,255,.08)!important;}
  /* Gallery navigation: one restrained bar; no extra boxed button emoji. */
  #projectView .project-top {min-height:49px!important;padding:3px 0 6px!important;gap:8px!important;}
  #projectView .project-top .back {gap:8px!important;letter-spacing:.09em!important;font-size:10px!important;}
  #projectView .project-top .back .glyph {font-size:21px!important;}
  #projectView .project-controls [data-open="contact"] {
    min-height:42px!important;
    padding:0 8px!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    color:#d7be95!important;
    font:600 11px/1.2 Manrope,Arial,sans-serif!important;
    letter-spacing:.06em!important;
  }
  #projectView .stage{gap:8px!important;}
  #projectView .filmstrip {height:62px!important;min-height:62px!important;gap:7px!important;}
  #projectView .frame {border:1px solid rgba(240,236,227,.13)!important;box-shadow:none!important;}
  #projectView .frame.active {border:1px solid #d8b883!important;box-shadow:inset 0 0 0 1px rgba(211,171,115,.38)!important;}
  #projectView .frame.active:after {height:2px!important;box-shadow:none!important;background:#d8b883!important;}
  #projectView .frame.active .frame-index {background:rgba(6,8,11,.72)!important;color:#f0e5d5!important;font-weight:500!important;}
  #projectView .frame .mn-video-caption {display:none!important;}
  #projectView .frame .mn-video-play {font-size:17px!important;opacity:.94;}
  #projectView .frame-controls {gap:4px!important;}
  #projectView .frame-controls button {
    min-width:37px!important;width:37px!important;
    background:rgba(255,255,255,.017)!important;
    border:1px solid rgba(209,189,151,.24)!important;
    border-radius:5px!important;
    color:#ded3c3!important;
    box-shadow:none!important;
    font-size:22px!important;
  }
  #projectView .project-info {gap:11px!important;}
  #projectView .project-info h2 {font-size:clamp(32px,8.5vw,44px)!important;line-height:1.02!important;}
  #projectView .project-info .facts {
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:12px!important;
    padding:12px 0!important;
  }
  #projectView .fact-label {font-size:9px!important;line-height:1.45!important;letter-spacing:.095em!important;margin-bottom:5px!important;}
  #projectView .fact-value {font-size:14px!important;line-height:1.4!important;font-weight:500!important;overflow-wrap:break-word;}
  #projectView .info-index,#projectView .project-quick {font-size:10px!important;letter-spacing:.12em!important;}
  #projectView .info-description {font-size:14px!important;line-height:1.6!important;}
}
@media(max-width:360px){
  #homeView .topbar .mn-social-links {gap:1px!important;}
  #homeView .topbar .mn-social-links .mn-social-link,
  #homeView .topbar .mn-social-links a {width:30px!important;min-width:30px!important;flex-basis:30px!important;}
  #homeView .header-nav > button {padding-inline:9px!important;font-size:11px!important;}
  #homeView .filter-row {gap:15px!important;}
  #projectView .frame-controls button{min-width:34px!important;width:34px!important;}
  #projectView .project-info .facts{gap:10px!important;}
}
@media(max-width:560px){
  #projectView .mn-gallery-hint {display:none!important;}
  #projectView .hero-media .open-full {
    min-width:0!important;min-height:38px!important;
    padding:0 12px!important;
    font-size:10px!important;letter-spacing:.07em!important;
    background:rgba(8,10,14,.6)!important;
  }
  #projectView .project-bottom .next-project {font-size:12px!important;line-height:1.4!important;}
}