/* Phones and tablets (860px and below): the glass design system.
   Loaded as a normal stylesheet in <head> so the page never paints the old look first.
   Used by every page that has the phone navigation (assets/mnav.js). */
.m-bar,.m-top{display:none}
.m-cta-mail,.m-grid-more,.icon-row .lb{display:none}
@media (max-width:860px){
 .m-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;justify-content:space-around;gap:2px;padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px));background:color-mix(in srgb,var(--bg-2) 84%,transparent);border-top:1px solid var(--line);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4)}
 .m-bar a,.m-bar button{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px 5px;border-radius:12px;color:var(--muted);text-decoration:none;font-size:.66rem;font-weight:600;line-height:1.1;letter-spacing:0;transition:color .2s,background .2s}
 .m-bar button{border:0;background:none;font-family:inherit;cursor:pointer}
 .m-bar a svg,.m-bar button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
 .m-bar a span,.m-bar button span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .m-bar{left:14px;right:14px;bottom:calc(10px + env(safe-area-inset-bottom,0px));gap:0;padding:5px;border:0;border-radius:999px;background:linear-gradient(180deg,color-mix(in srgb,var(--text) 9%,transparent),color-mix(in srgb,var(--text) 2%,transparent)),color-mix(in srgb,var(--bg-2) 38%,transparent);-webkit-backdrop-filter:blur(30px) saturate(1.9) brightness(1.05);backdrop-filter:blur(30px) saturate(1.9) brightness(1.05);box-shadow:0 14px 36px -12px rgba(0,0,0,.55),inset 0 1px 0 color-mix(in srgb,var(--text) 16%,transparent),inset 0 -1px 0 color-mix(in srgb,var(--text) 5%,transparent)}
 .m-bar a,.m-bar button{position:relative;z-index:1;border-radius:999px;padding:8px 2px 7px}
 body{padding-bottom:calc(88px + env(safe-area-inset-bottom,0px))}
 .bot{bottom:calc(92px + env(safe-area-inset-bottom,0px))!important}
 .toast{bottom:calc(98px + env(safe-area-inset-bottom,0px))!important}
 .m-top{position:fixed;right:14px;bottom:calc(94px + env(safe-area-inset-bottom,0px));z-index:55;width:42px;height:42px;border-radius:999px;border:1px solid var(--line);background:color-mix(in srgb,var(--bg-2) 86%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:var(--text);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity .25s,transform .25s}
 .m-top.on{opacity:1;pointer-events:auto;transform:none}
 .m-top svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
}
@media (max-width:860px) and (orientation:landscape) and (max-height:520px){
 .m-bar{display:none}
 html header .m-burger{display:inline-flex!important}
 html body .m-sec{position:fixed;top:72px;bottom:auto;left:12px;right:auto;max-height:calc(100vh - 76px)}
 body{padding-bottom:0}
 .bot{bottom:max(10px,env(safe-area-inset-bottom))!important}
 .toast{bottom:max(18px,env(safe-area-inset-bottom))!important}
 .m-top{bottom:14px}
}
.m-burger,.m-gear{display:none}
.m-panel{display:none}
@media (max-width:860px){
 header .m-burger{display:none!important}
 header .m-gear{display:inline-flex;align-items:center;justify-content:center;flex:none;width:36px;height:36px;padding:0;box-sizing:border-box;border-radius:999px;border:1px solid var(--line);background:var(--bg-2);color:var(--text);cursor:pointer;transition:border-color .2s}
 header .m-burger svg,header .m-gear svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
 header .crumb,header .chips,header nav ul,header .bar>nav{display:none!important}
 header .wrap:not(.bar)>nav,header .wrap.bar{flex-wrap:nowrap!important;gap:10px!important;display:flex!important}
 header .tools{margin-left:auto!important;gap:8px!important}
 header{position:sticky;z-index:65!important;top:8px;min-height:52px;margin:8px 14px 0;border:0!important;border-radius:999px;background:linear-gradient(180deg,color-mix(in srgb,var(--text) 9%,transparent),color-mix(in srgb,var(--text) 2%,transparent)),color-mix(in srgb,var(--bg-2) 38%,transparent)!important;-webkit-backdrop-filter:blur(30px) saturate(1.9) brightness(1.05);backdrop-filter:blur(30px) saturate(1.9) brightness(1.05);box-shadow:0 14px 36px -12px rgba(0,0,0,.55),inset 0 1px 0 color-mix(in srgb,var(--text) 16%,transparent),inset 0 -1px 0 color-mix(in srgb,var(--text) 5%,transparent)}
 header::before,header::after{display:none!important}
 header .xpbar,.xpbar{left:24px;bottom:2px;border-radius:2px;max-width:calc(100% - 48px)}
 header .m-gear,header .tools .hud{background:color-mix(in srgb,var(--text) 8%,transparent);border-color:transparent}
 header .tools .hud{padding:0 10px!important;gap:6px;height:36px}
 header .wrap:not(.bar)>nav,header .wrap.bar{position:relative;box-sizing:border-box;min-height:52px;height:52px;align-items:center!important;padding:0 8px 0 16px!important;margin:0!important;max-width:none!important;width:100%!important}
 header>.wrap{padding-left:0!important;padding-right:0!important;max-width:none!important;margin:0!important;width:100%!important}
 header>.wrap.bar{padding-left:14px!important;padding-right:14px!important}
 header .logo,header .brand{position:static!important;flex:none;width:auto;margin:0!important;transform:none!important}
 .m-panel{position:absolute;z-index:70;top:calc(100% + 8px);height:auto;max-height:calc(100vh - 90px);overflow:auto;background:color-mix(in srgb,var(--card) 90%,transparent);border:1px solid color-mix(in srgb,var(--text) 16%,transparent);border-radius:18px;box-shadow:0 18px 40px -18px rgba(0,0,0,.55),inset 0 1px 0 color-mix(in srgb,var(--text) 10%,transparent);padding:10px;-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5)}
 @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.m-panel{background:var(--card)}}
 .m-panel.on{display:flex;animation:mpop .18s ease-out}
 @keyframes mpop{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}
 html.noanim .m-panel.on{animation:none}
 .m-ttl{display:flex;align-items:center;gap:10px;padding:2px 6px 10px;margin-bottom:6px;border-bottom:1px dashed var(--line);font:13px "Pixelify Sans","Press Start 2P",ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
 .m-ttl::before{content:"";width:8px;height:8px;background:var(--accent-2);box-shadow:0 0 0 3px var(--teal-bg);flex:none}
 .m-sec{position:fixed;top:auto;bottom:calc(92px + env(safe-area-inset-bottom,0px));left:auto;right:12px;width:max-content;min-width:210px;max-width:calc(100vw - 24px);max-height:calc(100vh - 150px);flex-direction:column}
 .m-sec a{display:flex;align-items:center;gap:14px;padding:6px 10px;border:1px solid transparent;border-radius:12px;color:var(--text);text-decoration:none;font:15px "Pixelify Sans","Press Start 2P",ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;transition:background .15s,border-color .15s}
 .m-sec a .ic{width:18px;height:18px;flex:none;padding:6px;box-sizing:content-box;border-radius:9px;background:color-mix(in srgb,var(--accent-2) 18%,transparent);color:var(--accent-2);fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
 .m-set{right:12px;left:auto;width:max-content;flex-direction:column}
 .m-panel{border:0!important;border-radius:22px!important;box-shadow:0 14px 36px -12px rgba(0,0,0,.55),inset 0 1px 0 color-mix(in srgb,var(--text) 16%,transparent)!important}
 .m-top{background:linear-gradient(180deg,color-mix(in srgb,var(--text) 9%,transparent),color-mix(in srgb,var(--text) 2%,transparent)),color-mix(in srgb,var(--bg-2) 42%,transparent)!important;-webkit-backdrop-filter:blur(30px) saturate(1.9);backdrop-filter:blur(30px) saturate(1.9);border:0!important;box-shadow:0 14px 36px -12px rgba(0,0,0,.55),inset 0 1px 0 color-mix(in srgb,var(--text) 16%,transparent)!important}
 .toast{border:0!important;border-radius:999px!important;padding:11px 20px 11px 38px!important;background:linear-gradient(180deg,color-mix(in srgb,var(--text) 9%,transparent),color-mix(in srgb,var(--text) 2%,transparent)),color-mix(in srgb,var(--bg-2) 42%,transparent)!important;-webkit-backdrop-filter:blur(30px) saturate(1.9);backdrop-filter:blur(30px) saturate(1.9);box-shadow:0 14px 36px -12px rgba(0,0,0,.55),inset 0 1px 0 color-mix(in srgb,var(--text) 16%,transparent)!important}
 .bot{padding:6px!important;border-radius:999px;background:linear-gradient(180deg,color-mix(in srgb,var(--text) 9%,transparent),color-mix(in srgb,var(--text) 2%,transparent)),color-mix(in srgb,var(--bg-2) 42%,transparent)!important;-webkit-backdrop-filter:blur(30px) saturate(1.9);backdrop-filter:blur(30px) saturate(1.9);border:0!important;box-shadow:0 14px 36px -12px rgba(0,0,0,.55),inset 0 1px 0 color-mix(in srgb,var(--text) 16%,transparent)!important}
 .m-cells{display:flex;gap:14px;justify-content:center;padding:4px 0 2px}
 .m-cell{display:flex;align-items:center;justify-content:center}
 .m-cell .m-lab{display:none}
 .m-cell .icon-btn,.m-cell .lang-btn{height:40px;min-width:40px}
 html body h1 .name{font-size:clamp(1.7rem,8.4vw,2.35rem)!important;line-height:1.1}
 html body .m-tabs{background:linear-gradient(180deg,color-mix(in srgb,var(--text) 9%,transparent),color-mix(in srgb,var(--text) 2%,transparent)),color-mix(in srgb,var(--bg-2) 42%,transparent)!important;-webkit-backdrop-filter:blur(30px) saturate(1.9)!important;backdrop-filter:blur(30px) saturate(1.9)!important;border:0!important;padding:5px!important;gap:2px!important;margin:0 24px 18px!important}
 html body .m-tabs button{flex:1 1 auto!important;padding:7px 6px!important;font-size:.86rem!important;letter-spacing:0!important}
 @media (max-width:380px){html body .m-tabs button{font-size:.76rem!important;padding:7px 3px!important}}
 html body #finder .fd-bar kbd{display:none!important}
 html body:has(#finder.open) .m-top{opacity:0!important;pointer-events:none!important}
 html body .trail-back{display:none!important}
 html body .pj-card .pj-body p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;line-clamp:4;overflow:hidden}
 html body:has(.hire-card) section[aria-labelledby=contact-title],html body:has(.hire-card) div:has(> .icon-row) > .lead{display:none!important}
 html body .role-grid{display:flex!important;gap:12px!important;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:16px;margin:0 -16px!important;padding:2px 16px 6px!important;scrollbar-width:none;position:relative}
 html body .role-grid::-webkit-scrollbar{display:none}
 html body .role-grid>.role{flex:0 0 84%!important;scroll-snap-align:start;margin:0!important}
 html body .m-cta-mail{display:flex!important;align-items:center;justify-content:center;gap:10px;margin:18px 0 0;padding:15px 18px;border-radius:999px;background:var(--accent)!important;color:var(--on-accent,#fff)!important;font-weight:650;font-size:1rem;text-decoration:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
 html body .m-cta-mail svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
 html body .icon-row.m-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 8px;margin-top:18px!important;justify-content:stretch}
 html body .icon-row.m-grid a.icon-link.big[href^="mailto:"],html body .icon-row.m-grid a.icon-link.big.sec-l{display:none!important}
 html body .icon-row.m-grid.all a.icon-link.big.sec-l{display:flex!important}
 html body .icon-row.m-grid .icon-link.big{display:flex!important;flex-direction:column;align-items:center;gap:6px;width:auto!important;height:auto!important;padding:10px 2px!important;border-radius:14px;background:transparent!important;box-shadow:none!important}
 html body .icon-row.m-grid .icon-link.big::before,html body .icon-row.m-grid .icon-link.big::after{display:none!important}
 html body .icon-row.m-grid .lb{display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;max-width:100%;text-align:center;font-size:.68rem;font-weight:600;line-height:1.15;color:var(--muted)}
 html body .m-grid-more{display:flex!important;margin:8px auto 0!important}
 html body .hire-card{display:grid!important;grid-template-columns:84px minmax(0,1fr);grid-template-areas:"photo top" "photo name" "photo sub" "stats stats" "cta cta";column-gap:16px;row-gap:3px;align-items:center;padding:16px!important}
 html body .hire-card .hc-photo{grid-area:photo;width:84px!important;margin:0!important;align-self:center}
 html body .hire-card .hc-photo img{width:84px!important;height:84px!important;margin:0!important;box-shadow:0 0 0 2px color-mix(in srgb,var(--accent-2) 60%,transparent)!important}
 html body .hire-card .hc-top{grid-area:top;justify-content:flex-start!important;gap:8px!important;align-self:end}
 html body .hire-card .hc-top>span{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;font-size:.62rem!important;font-weight:700;letter-spacing:.06em!important;line-height:1.2}
 html body .hire-card .hc-lv{background:color-mix(in srgb,var(--gold,#f5c542) 16%,transparent)}
 html body .hire-card .hc-on{background:color-mix(in srgb,var(--accent-2) 16%,transparent);color:var(--accent-2)}
 html body .hire-card .hc-on i{width:6px!important;height:6px!important;border-radius:999px!important;margin:0!important;box-shadow:none!important}
 html body .hire-card .hc-name{grid-area:name;text-align:left!important;font-size:1.2rem!important;margin:2px 0 0!important;line-height:1.2!important}
 html body .hire-card .hc-sub{grid-area:sub;text-align:left!important;font-size:.8rem!important;margin:0!important;color:var(--muted);align-self:start}
 html body .hire-card .hc-stats{grid-area:stats;grid-template-columns:1fr 1fr!important;column-gap:16px!important;row-gap:8px!important;margin:14px 0 14px!important}
 html body .hire-card .hc-stats li{grid-template-columns:auto 1fr!important;gap:8px!important;font-size:.62rem!important}
 html body .hire-card .hc-cta{grid-area:cta;display:flex!important;justify-content:center;border-radius:999px!important;padding:12px 16px!important;font-size:.92rem!important;font-weight:650!important;font-family:-apple-system,system-ui,sans-serif!important}
 html body .hub > section{padding-top:22px!important}
 html body .hub > .avail{margin-top:14px!important}
 html body .hire-card .hc-cta{display:none!important}
 html body .hire-card .hc-stats{margin-bottom:0!important}
 html body .m-panel{background:linear-gradient(180deg,color-mix(in srgb,var(--text) 10%,transparent),color-mix(in srgb,var(--text) 3%,transparent)),color-mix(in srgb,var(--bg-2) 72%,transparent)!important;-webkit-backdrop-filter:blur(30px) saturate(1.9)!important;backdrop-filter:blur(30px) saturate(1.9)!important;border:0!important;border-radius:24px!important;padding:8px!important}
 html body .m-ttl{font:600 .72rem/1.2 -apple-system,system-ui,"Segoe UI",sans-serif!important;letter-spacing:.08em!important;color:var(--muted)!important;border-bottom:1px solid color-mix(in srgb,var(--text) 10%,transparent)!important;padding:6px 10px 10px!important}
 html body .m-ttl::before{width:7px!important;height:7px!important;border-radius:999px!important;box-shadow:none!important}
 html body .m-sec a{font:600 .95rem/1.2 -apple-system,system-ui,"Segoe UI",sans-serif!important;letter-spacing:0!important;text-transform:none!important;border:0!important;border-radius:14px!important;padding:6px 10px!important}
 html body .m-sec a .ic{border-radius:999px!important}
 html body .m-sec a.cur .ic{background:color-mix(in srgb,var(--accent-2) 26%,transparent)!important}
 html body #finder{bottom:calc(92px + env(safe-area-inset-bottom,0px))!important}
}

/* consistency pass */

/* sub pages scroll like the home page on phones: a soft stop at the top of each part (proximity, so a strong flick
   still travels and tall sections scroll freely), with room left for the floating header */
@media (max-width:860px){
 html:has(body main > .wrap > :is(.hub-head,.hero)){scroll-snap-type:y proximity;scroll-padding-top:66px}
 html body main > .wrap > :is(.hub-head,.hero,.st-hero,section:not([aria-labelledby=contact-title])){scroll-snap-align:start}
}