/* A hidden phone contact instrument must not survive navigation. Its authored
 * display:flex has the same specificity as the older hidden rule. */
@media(max-width:760px),(pointer:coarse) and (max-width:960px){
 /* This element is the nonvisual scroll spacer. A global reduced-motion
    transition on its height can leave scrollTo clamped to the old viewport. */
 #experience{transition:none!important}
}
@media(max-width:760px){
 #communicationsPanel[hidden],.comms-navigation[hidden]{display:none!important}
 html.mobile-menu-open{overflow:hidden}
 html.mobile-menu-open #mobileNav{overscroll-behavior:contain;touch-action:pan-y pinch-zoom}
}

/* A compact navigation instrument, anchored to the header control. */
@media(max-width:760px){
 #menuButton{border:1px solid transparent;border-radius:10px;transition:background-color .14s,border-color .14s}
 #menuButton i{transition:transform .14s ease;transform-origin:center}
 #menuButton[aria-expanded=true]{background:var(--workshop-glass-control);border-color:var(--workshop-glass-edge)}
 #menuButton[aria-expanded=true] i:first-child{transform:translateY(4px) rotate(45deg)}
 #menuButton[aria-expanded=true] i:last-child{transform:translateY(-4px) rotate(-45deg)}
 #mobileNavBackdrop{position:fixed;inset:calc(65px + env(safe-area-inset-top,0px)) 0 0;z-index:59;background:#02070c38;touch-action:none}
 #mobileNavBackdrop[hidden]{display:none}
 #mobileNav{inset:auto;top:calc(65px + env(safe-area-inset-top,0px));right:max(12px,6vw);left:auto;bottom:auto;z-index:60;display:flex;width:min(264px,calc(100vw - 24px));max-height:calc(100dvh - 89px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));box-sizing:border-box;margin:0;padding:8px;overflow:auto;scrollbar-width:thin;scrollbar-color:#71838b55 transparent;border:1px solid var(--workshop-glass-edge);border-radius:14px;background:linear-gradient(145deg,#1d2c34f5,#0b141cfb);box-shadow:0 16px 40px #0006,inset 0 1px 0 #fff1;backdrop-filter:var(--workshop-glass-filter);-webkit-backdrop-filter:var(--workshop-glass-filter);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-5px) scale(.98);transform-origin:top right;transition:opacity .14s ease,transform .14s ease,visibility .14s}
 #mobileNav.open{opacity:1;visibility:visible;pointer-events:auto;transform:none}
 #mobileNav .mobile-nav-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 10px 12px;color:#9eb1b9;font:8px/1.4 ui-monospace,monospace;letter-spacing:.1em}
 #mobileNav .mobile-nav-heading i{width:4px;height:4px;flex:none;border-radius:50%;background:#ff7c50}
 #mobileNav a{position:relative;display:flex;align-items:center;gap:12px;min-height:44px;box-sizing:border-box;margin:0;padding:9px 10px;border:0;border-radius:7px;color:#d4dfe0;font:600 12px/1.3 ui-monospace,monospace;text-decoration:none;text-transform:uppercase;letter-spacing:.035em;transition:background-color .12s,color .12s}
 #mobileNav .mobile-nav-number{color:#7f969f;font:8px/1.4 ui-monospace,monospace;letter-spacing:.04em}
 #mobileNav .mobile-nav-label{flex:1;min-width:0}
 #mobileNav .mobile-nav-arrow{font:14px/1 ui-monospace,monospace;color:#9bb0b8}
 #mobileNav a[aria-current=location]{background:#ff744712;color:#fff1e8}
 #mobileNav a[aria-current=location]:before{content:'';position:absolute;left:0;top:12px;bottom:12px;width:2px;border-radius:2px;background:#ff7951}
 #mobileNav a[aria-current=location] :is(.mobile-nav-number,.mobile-nav-arrow){color:#ff9c76}
 #mobileNav a:hover{background:#d7e9f212;color:#fff}
 #mobileNav a:active{background:#ff744722}
 #mobileNav a:focus-visible,#menuButton:focus-visible{outline:2px solid #ffb58c;outline-offset:-2px}
 #mobileNav .mobile-nav-resume{margin-top:7px;border-top:1px solid #d2e6ee20;border-radius:0;padding-top:13px;min-height:48px;text-transform:none;font-size:10px;color:#b8c9cf}
 #mobileNav .mobile-nav-file{padding:4px 5px;border:1px solid #d1e3eb26;border-radius:4px;color:#d3dfdf;font:8px/1 ui-monospace,monospace}
}
@media(min-width:761px){#mobileNav,#mobileNavBackdrop{display:none!important}}
@media(max-width:760px) and (max-height:500px){
 #mobileNav{padding:6px}
 #mobileNav .mobile-nav-heading{padding:3px 10px 5px;font-size:7px}
 #mobileNav .mobile-nav-resume{margin-top:3px;min-height:44px;padding:9px 10px}
}
@media(max-width:760px) and (prefers-reduced-motion:reduce){#mobileNav,#menuButton,#menuButton i{transition:none}}
@media(max-width:760px) and (prefers-reduced-transparency:reduce),(max-width:760px) and (prefers-contrast:more){#mobileNav{background:#12212c;backdrop-filter:none;-webkit-backdrop-filter:none}}
@media(forced-colors:active){#mobileNav{background:Canvas;color:CanvasText;border:1px solid CanvasText;box-shadow:none}#mobileNav a{color:LinkText}#mobileNavBackdrop{background:transparent}}
