/* V13 — mobile-only usability pass. Desktop/editorial visual system stays unchanged. */
.mobile-nav-backdrop,.article-nav-backdrop,.mobile-context-back,.article-menu-btn,.mobile-only-nav{display:none}
body.mobile-nav-locked,body.lightbox-locked{overflow:hidden}

/* image viewer */
.mobile-lightbox{position:fixed;inset:0;z-index:1000;display:none;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr auto;background:rgba(8,8,8,.97);color:#fff;padding:max(10px,env(safe-area-inset-top)) 10px max(12px,env(safe-area-inset-bottom));overscroll-behavior:contain}
.mobile-lightbox.is-open{display:grid}
.mobile-lightbox__top{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:0 2px 6px}
.mobile-lightbox__caption{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:400 11px/1.4 var(--sans,Arial,sans-serif);color:#d4d4d4}
.mobile-lightbox__close{width:44px;height:44px;flex:0 0 44px;border:0;background:transparent;color:#fff;font:300 30px/1 Arial,sans-serif;cursor:pointer}
.mobile-lightbox__stage{min-height:0;overflow:hidden;display:flex;align-items:center;justify-content:center;touch-action:none;position:relative}
.mobile-lightbox__stage img{display:block;width:auto!important;height:auto!important;max-width:94vw;max-height:calc(100dvh - 118px);object-fit:contain!important;filter:none!important;transform-origin:center;will-change:transform;user-select:none;-webkit-user-drag:none}
.mobile-lightbox__hint{text-align:center;font:400 10px/1.4 var(--sans,Arial,sans-serif);color:#aaa;padding-top:8px}

@media(max-width:900px){
  a,.menu-btn,.article-menu-btn,.case-local-nav a,.role-switch-tabs button,.stakeholder-tabs button{touch-action:manipulation}

  /* Main header: only name + Menu; drawer is a clean half-screen layer. */
  .site-header{position:sticky!important;top:0;z-index:70!important}
  .menu-btn{display:inline-flex!important;align-items:center;justify-content:center;min-width:52px;min-height:44px;margin-right:-8px;position:relative;z-index:83;background:transparent;border:0}
  .site-header .nav{display:none!important}
  .site-header .nav.is-open{display:flex!important;position:fixed!important;top:0!important;right:0!important;bottom:0!important;left:auto!important;width:min(84vw,360px)!important;height:100dvh!important;padding:max(86px,calc(env(safe-area-inset-top) + 72px)) 28px max(30px,env(safe-area-inset-bottom))!important;gap:0!important;border:0!important;border-left:1px solid var(--line)!important;background:#fff!important;box-shadow:-12px 0 40px rgba(0,0,0,.08);z-index:82!important;overflow-y:auto;animation:mobileDrawerIn .18s ease-out}
  .site-header .nav.is-open a{display:flex!important;align-items:center!important;width:100%;min-height:54px;padding:8px 0!important;border:0!important;border-bottom:1px solid var(--line-soft)!important;font:500 19px/1.25 var(--serif)!important}
  .site-header .nav.is-open .nav-github{margin-top:8px;background:none!important;color:#111!important}
  .site-header .nav.is-open a[aria-current="page"]{font-weight:700!important}
  .site-header .nav.is-open a[aria-current="page"]::after{content:'•';position:static!important;width:auto!important;height:auto!important;background:none!important;margin-left:auto;color:#111}
  .mobile-only-nav{display:none!important}
  .site-header .nav.is-open .mobile-only-nav,.article-nav.is-open .mobile-only-nav{display:flex!important}
  .mobile-nav-backdrop{display:none;position:fixed;inset:0;z-index:65;border:0;background:rgba(0,0,0,.22);backdrop-filter:blur(1px)}
  .mobile-nav-backdrop.is-open{display:block}
  @keyframes mobileDrawerIn{from{transform:translateX(12px)}to{transform:none}}

  /* Deep-page return control. On case pages the large site header scrolls away; only back + chapter rail remain. */
  .mobile-context-back{display:flex;align-items:center;min-height:44px;width:100%;border-bottom:1px solid var(--line);box-sizing:border-box;position:sticky;top:62px;z-index:56;background:rgba(255,255,255,.97);backdrop-filter:blur(10px);font:500 12px/1 var(--sans);padding:0 12px 0 0;color:#555}
  .case-page .site-header{position:relative!important;top:auto!important}
  .case-page .mobile-context-back{top:0}
  .case-page .case-local-nav{top:44px!important;z-index:55!important;gap:4px!important;min-height:44px;padding:0!important;scroll-snap-type:x proximity;scrollbar-width:none;overscroll-behavior-x:contain}
  .case-page .case-local-nav::-webkit-scrollbar{display:none}
  .case-page .case-local-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px!important;scroll-snap-align:center}
  .case-page .case-section[id],.case-page .case-hero[id]{scroll-margin-top:96px}

  /* Preserve visible typography while increasing the invisible hit area. */
  .mobile-tap{position:relative}
  .mobile-tap::before{content:'';position:absolute;left:-8px;right:-8px;top:50%;height:44px;transform:translateY(-50%)}
  .prototype-cta{min-height:44px}

  /* Horizontal rails: deliberate touch scrolling, no accidental page drag. */
  .domain-flow,.workflow-rail,.state-rail,.iteration-chain,.partnership-rail{overscroll-behavior-x:contain;scrollbar-width:none}
  .domain-flow::-webkit-scrollbar,.workflow-rail::-webkit-scrollbar,.state-rail::-webkit-scrollbar,.iteration-chain::-webkit-scrollbar,.partnership-rail::-webkit-scrollbar{display:none}

  img.zoomable-image{cursor:zoom-in;-webkit-tap-highlight-color:transparent}
}

@media(max-width:560px){
  /* Writing uses the same drawer instead of a squeezed top nav. */
  .article-header{position:sticky;top:0;z-index:70}
  .article-menu-btn{display:inline-flex;align-items:center;justify-content:center;min-width:52px;min-height:44px;margin-right:-8px;background:transparent;border:0;font:500 12px/1 var(--sans);z-index:83}
  .article-header .article-nav{display:none!important}
  .article-header .article-nav.is-open{display:flex!important;position:fixed;top:0;right:0;bottom:0;width:min(84vw,350px);height:100dvh;z-index:82;flex-direction:column;gap:0;background:#fff;border-left:1px solid var(--line);padding:max(86px,calc(env(safe-area-inset-top) + 72px)) 26px max(30px,env(safe-area-inset-bottom));box-shadow:-12px 0 40px rgba(0,0,0,.08);animation:mobileDrawerIn .18s ease-out}
  .article-header .article-nav.is-open a{display:flex!important;align-items:center!important;min-height:54px;padding:8px 0!important;border:0!important;border-bottom:1px solid var(--line-soft)!important;font:500 19px/1.25 var(--serif)!important}
  .article-header .article-nav.is-open a[aria-current="page"]{font-weight:700}
  .article-header .article-nav.is-open a[aria-current="page"]::after{content:'•';margin-left:auto}
  .article-nav-backdrop.is-open{display:block;position:fixed;inset:0;z-index:65;border:0;background:rgba(0,0,0,.22)}
  .mobile-context-back--writing{top:64px;margin-bottom:0}
}