/* Case-study navigation: a quiet handoff, then the new page settles into place. */
@view-transition{navigation:auto}
::view-transition,::view-transition-group(*),::view-transition-image-pair(*),::view-transition-old(*),::view-transition-new(*){pointer-events:none}
main{view-transition-name:case-content}
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-group(case-content){animation:none}
::view-transition-old(case-content){animation:page-fade-out 140ms cubic-bezier(.4,0,1,1) both;mix-blend-mode:normal}
::view-transition-new(case-content){animation:page-fade-slide-in 360ms cubic-bezier(.22,1,.36,1) 140ms both;mix-blend-mode:normal}
@keyframes page-fade-out{to{opacity:0}}
@keyframes page-fade-slide-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  main{view-transition-name:none}
  ::view-transition-old(case-content),::view-transition-new(case-content){animation:none}
}

/* The mobile header begins in the page flow. After scrolling starts, JavaScript
   fixes it in place and inserts an equal-height spacer, so content never jumps. */
.mobile-header-surface,.mobile-header-spacer{display:none}
@media(max-width:760px){
  html{scroll-padding-top:108px}
  .page{padding-top:0}
  .header{
    position:relative;
    top:auto;
    left:auto;
    right:auto;
    width:100%;
    padding-top:30px;
    gap:12px;
    align-items:center;
    flex-wrap:nowrap;
    font-size:clamp(12px,3.3vw,14px);
    z-index:100;
    background:var(--paper,#fcfcfb);
    isolation:isolate;
  }
  .header>.brand{flex:0 0 auto;white-space:nowrap}
  .header nav{margin-left:auto;gap:clamp(8px,3.2vw,18px);flex-wrap:nowrap}
  .header nav a{white-space:nowrap}
  html:not(.mobile-nav-stuck) .page>.header{padding-inline:0}
  .case-root .case-header{padding-top:30px}
  .header::before{
    display:block;
    content:"";
    position:absolute;
    inset:0 calc(50% - 50vw);
    z-index:-1;
    background:var(--paper,#fcfcfb);
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
    -webkit-mask-image:none;
    mask-image:none;
    pointer-events:none;
  }
  .header::after{display:none}
  html.mobile-nav-stuck .header{
    position:fixed;
    top:0;
    right:0;
    left:0;
    width:100%;
    margin:0;
    padding:30px 24px 18px;
    box-sizing:border-box;
    z-index:100;
    background:var(--paper,#fcfcfb);
    transform:translateZ(0);
  }
  html.mobile-nav-stuck .header nav a:not(.resume){display:none}
  html.mobile-nav-stuck .header nav{gap:0}
  html.mobile-nav-stuck .case-root .case-header{
    width:100%;
    margin:0;
    padding:30px 24px 18px;
  }
  html.mobile-nav-stuck .mobile-header-spacer{
    display:block;
    width:100%;
    height:var(--mobile-header-height,66px);
    flex:0 0 auto;
  }
  html.mobile-nav-stuck .mobile-header-surface{
    display:block;
    position:fixed;
    top:0;
    right:0;
    left:0;
    height:var(--mobile-nav-cover-height,66px);
    z-index:99;
    background:var(--paper,#fcfcfb);
    pointer-events:none;
    transform:translateZ(0);
  }
  .footer>nav{order:1}
  .footer>p{order:2}
}
@media(max-width:380px){
  html.mobile-nav-stuck .header{padding-inline:20px}
  html.mobile-nav-stuck .case-root .case-header{padding-inline:20px}
}