.mobile-safe-toggle,.mobile-safe-overlay{display:none}

@media (max-width:1024px){
  html,body{background:#F6F1E3!important}

  .mobile-safe-hide-old-menu{display:none!important}
  .mobile-safe-hide-subnav{display:none!important}

  .mobile-safe-toggle{
    display:inline-flex!important;position:fixed;top:10px;right:12px;z-index:32000;
    width:44px;height:44px;border:0;background:transparent;padding:0;align-items:center;justify-content:center;cursor:pointer
  }
  .mobile-safe-toggle .bars{display:flex;flex-direction:column;gap:5px;width:24px}
  .mobile-safe-toggle .bar{height:3px;border-radius:999px;background:#1b1b1b;transition:transform .2s,opacity .2s}
  .mobile-safe-toggle.is-open .bar:nth-child(1){transform:translateY(8px) rotate(45deg)}
  .mobile-safe-toggle.is-open .bar:nth-child(2){opacity:0}
  .mobile-safe-toggle.is-open .bar:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

  .mobile-safe-overlay{
    display:none;position:fixed;inset:0;z-index:31999;background:#F6F1E3;
    align-items:center;justify-content:center;padding:24px
  }
  body.mobile-safe-open .mobile-safe-overlay{display:flex}
  body.mobile-safe-open{overflow:hidden}
  .mobile-safe-close{
    position:absolute;top:10px;right:12px;width:44px;height:44px;border:0;background:transparent;
    font-size:30px;line-height:1;color:#1b1b1b;cursor:pointer
  }

  .mobile-safe-nav{display:flex;flex-direction:column;align-items:center;gap:14px;width:min(92vw,430px)}
  .mobile-safe-item{width:100%}
  .mobile-safe-row{display:flex;align-items:center;justify-content:center;gap:10px}
  .mobile-safe-nav a{text-decoration:none;color:#2a2a2a;font-size:clamp(34px,8vw,54px);line-height:1.1}
  .mobile-safe-nav a.active,.mobile-safe-nav a[aria-current="page"]{color:#e5392a}
  .mobile-safe-sub-toggle{border:0;background:transparent;color:#78716b;font-size:26px;cursor:pointer;line-height:1;transition:transform .2s,color .2s;min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .mobile-safe-sub{display:none;flex-direction:column;align-items:center;gap:8px;margin-top:6px}
  .mobile-safe-item.open .mobile-safe-sub{display:flex}
  .mobile-safe-sub a{font-size:clamp(19px,4.6vw,28px);color:#666;letter-spacing:.01em}
  .mobile-safe-sub a:hover{color:#e5392a}
  .mobile-safe-item.open .mobile-safe-sub-toggle{transform:rotate(180deg);color:#e5392a}

  /* Instagram icon: mirrors hamburger on the left */
  .nav-instagram{
    position:fixed!important;top:10px!important;left:12px!important;right:auto!important;
    transform:none!important;width:44px!important;height:44px!important;z-index:32000!important;
    color:#1b1b1b!important;
  }

  /* Instagram icon inside the mobile overlay menu */
  .mobile-safe-instagram{
    position:absolute;bottom:32px;left:50%;transform:translateX(-50%);
    color:#2a2a2a;opacity:0.6;display:flex;align-items:center;justify-content:center;
    text-decoration:none;transition:opacity 0.2s;
  }
  .mobile-safe-instagram:hover{opacity:1}
  .mobile-safe-instagram svg{width:32px;height:32px}

  .landing-toolbar{
    position:fixed!important;
    top:calc(var(--topbar-space, 108px) - 1px)!important;
    left:0!important;
    right:0!important;
    z-index:190!important;
    height:var(--landing-toolbar-h)!important;
    background:var(--topbar-bg)!important;
    backdrop-filter:blur(10px)!important;
    border-bottom:1px solid rgba(21, 19, 18, 0.06)!important;
    padding:0!important;
  }
  .landing-toolbar .work-toggle{
    width:100%!important;
    height:100%!important;
    max-width:calc(var(--landing-max) + (var(--landing-pad) * 2))!important;
    padding:0 var(--landing-pad)!important;
  }
  .canvas{padding-top:calc(var(--landing-pad) + var(--landing-toolbar-h))!important}
  .landing{margin-top:0!important}

  .mobile-safe-fix-portfolio-toggle{
    transform:none!important;margin:0 auto!important;width:100%!important
  }
  .mobile-safe-fix-gallery-up{margin-top:0!important}
  .portfolio-toggle-row-fix{padding-bottom:0!important}
  .portfolio-toggle-dyn-line{display:none!important}

  .work-toggle button{padding:.6rem .35rem!important}
  .work-toggle button[aria-selected="true"]::after{
    left:0!important;right:0!important;height:2px!important
  }

  .mobile-safe-commissions-title{
    font-size:clamp(1.8rem,8.5vw,2.7rem)!important;
    line-height:1.02!important;
    letter-spacing:.10em!important;
    white-space:normal!important;
    word-break:break-word!important;
    overflow-wrap:break-word!important;
  }
}

/* ── Uniform breathing space above page titles on mobile ── */
@media (max-width:900px){
  /* about.html / workshops.html */
  .page-header{padding-top:4.8rem!important}
  /* commissions.html */
  .intro{padding-top:4.8rem!important}
}
@media (max-width:480px){
  .page-header{padding-top:3.6rem!important}
  .intro{padding-top:3.6rem!important}
  /* Prevent long page titles (WORKSHOPS, COMMISSIONS) from overflowing on narrow phones.
     h1.page-title specificity (0,1,1) beats mobile.css's h1 (0,0,1) and .page-title (0,1,0). */
  h1.page-title{
    font-size:clamp(1.5rem,8.5vw,2.4rem)!important;
    letter-spacing:0.1em!important;
    white-space:normal!important;
    word-break:break-word!important;
    overflow-wrap:break-word!important;
  }
}