/* Responsive case-study navigation. Editorial modules live in case-editorial.css. */
#caserail{
  display:none;position:fixed;inset:0 auto 0 0;z-index:55;
  width:var(--case-rail);flex-direction:column;overflow-y:auto;
  padding:30px 22px 26px 28px;background:var(--case-sidebar);
  border-right:1px solid var(--case-rule);overscroll-behavior:contain;
  scrollbar-width:none;
}
#caserail::-webkit-scrollbar{width:0}

#caserail .cr-proj{
  display:block;margin-bottom:18px;color:var(--case-ink);text-decoration:none;
  font:600 19px/1.04 var(--font-text);letter-spacing:-.02em;text-transform:none;
}
#caserail .cr-proj:hover{color:var(--case-accent,var(--accent))}
#caserail .cr-proj .a{color:var(--case-accent,var(--accent))}
#caserail .cr-meta{display:flex;flex-direction:column;gap:13px;margin-bottom:22px}
#caserail .cr-fact > span{
  display:block;margin-bottom:3px;color:var(--case-faint);
  font:500 9.5px/1.3 var(--font-text);letter-spacing:.14em;text-transform:none;
}
#caserail .cr-fact p{
  margin:0;color:var(--case-soft);font:500 12.5px/1.34 var(--font-text);text-transform:none;
}
#caserail .cr-fact p .org{display:block;margin-top:1px;color:var(--case-faint);font-size:11.5px;font-weight:400}
#caserail .cr-rule{height:1px;margin:0 0 18px;background:var(--case-rule)}
#caserail .cr-navlabel{
  margin-bottom:12px;color:var(--case-faint);
  font:500 9.5px/1.3 var(--font-text);letter-spacing:.14em;text-transform:none;
}
#caserail .cr-nav{display:flex;position:relative;flex-direction:column;gap:1px}
#caserail .cr-nav a{
  position:relative;display:flex;align-items:baseline;gap:9px;
  padding:6px 0 6px 13px;border-radius:0;color:var(--case-soft);
  font-family:var(--font-text);text-decoration:none;text-transform:none;transition:color .22s;
}
#caserail .cr-nav a::before{
  content:'';position:absolute;left:0;top:50%;width:2px;height:18px;
  border-radius:2px;background:var(--case-accent,var(--accent));
  transform:translateY(-50%) scaleY(0);transform-origin:center;
  transition:transform .28s cubic-bezier(.2,.8,.2,1);
}
#caserail .cr-nav a i{
  width:15px;flex:0 0 auto;color:var(--case-faint);
  font:400 10px/1.3 var(--font-text);font-style:normal;letter-spacing:.04em;
  transition:color .22s;
}
#caserail .cr-nav a span{font-size:13px;line-height:1.3;letter-spacing:-.005em}
#caserail .cr-nav a:hover{color:var(--case-ink)}
#caserail .cr-nav a:hover i{color:var(--case-soft)}
#caserail .cr-nav a.on{color:var(--case-ink);font-weight:600}
#caserail .cr-nav a.on i{color:var(--case-accent,var(--accent))}
#caserail .cr-nav a.on::before{transform:translateY(-50%) scaleY(1)}
#caserail .cr-foot{margin-top:auto;padding-top:22px}
#caserail .cr-prog{height:2px;overflow:hidden;border-radius:2px;background:var(--case-rule)}
#caserail .cr-prog i{display:block;width:0;height:100%;background:var(--case-accent,var(--accent));transition:width .12s linear}
#caserail .cr-pct{
  margin-top:8px;color:var(--case-faint);
  font:400 9.5px/1.3 var(--font-text);letter-spacing:.12em;text-transform:none;
}

#caseMobileNav{display:none}

@media(min-width:1180px){
  #caserail{display:flex}
}

@media(max-width:1179px){
  #caseMobileNav{
    display:flex;position:sticky;top:0;z-index:54;align-items:center;gap:12px;
    padding:10px 20px;background:rgba(252,252,250,.94);border-bottom:1px solid var(--case-rule);
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  }
  #caseMobileNav label{color:var(--case-soft);font-size:12px;font-weight:500}
  #caseMobileNav select{
    min-width:0;min-height:44px;flex:1;padding:0 36px 0 12px;
    border:1px solid var(--case-rule);border-radius:10px;background:#fff;color:var(--case-ink);
    font:500 14px/1 var(--font-text);
  }
}

@media(prefers-reduced-motion:reduce){
  #caserail .cr-nav a::before,#caserail .cr-prog i{transition:none}
}