/* One reading navigation for every project page. */
.has-case-navigation{--case-rail-width:176px;--case-header-visible:88px;--case-navigation-height:0px}
.has-case-navigation .case-page{margin-left:var(--case-rail-width);min-width:0}
.case-navigation{position:fixed;left:0;top:calc(var(--case-header-visible) + 24px);width:var(--case-rail-width);max-height:calc(100dvh - var(--case-header-visible) - 48px);overflow-y:auto;padding:18px 14px 20px 18px;z-index:40;border-right:1px solid #d3d9d4;background:#f3f4f0;scrollbar-width:thin;transition:top .26s ease,max-height .26s ease}
.case-navigation-label{display:block;margin:0 10px 16px;color:#5f6964;font:700 11px/1.5 'Space Grotesk',system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase}
.case-navigation-links{display:flex;flex-direction:column;gap:4px}
.case-navigation .case-navigation-links a{display:block;padding:10px 12px;min-height:40px;border-radius:8px;text-decoration:none;font:500 14px/1.4 'DM Sans',system-ui,sans-serif;letter-spacing:0;color:#5f6964;transition:background .16s,color .16s;overflow-wrap:break-word}
.case-navigation .case-navigation-links a:hover{background:#e2e9e5;color:#1b2925}
.case-navigation .case-navigation-links a[aria-current=location]{background:#e2e9e5;color:#185e55;box-shadow:inset 3px 0 #3a877e;font-weight:600}
.case-navigation a:focus-visible{outline:3px solid #3a877e;outline-offset:2px}
.has-case-navigation .case-page [id]{scroll-margin-top:calc(var(--case-header-visible) + var(--case-navigation-height) + 26px)}
@media(max-width:1180px){
 .has-case-navigation{--case-navigation-height:57px}
 .has-case-navigation .case-page{margin-left:0}
 .case-navigation{position:sticky;top:var(--case-header-visible);width:100%;max-height:none;padding:8px 18px;overflow-x:auto;overflow-y:hidden;border-right:0;border-bottom:1px solid #d3d9d4;background:rgba(243,244,240,.97);backdrop-filter:blur(10px);scrollbar-width:none}
 .case-navigation::-webkit-scrollbar{display:none}
 .case-navigation-label{display:none}
 .case-navigation-links{flex-direction:row;gap:4px;width:max-content}
 .case-navigation .case-navigation-links a{white-space:nowrap;padding:10px 14px}
 .case-navigation .case-navigation-links a[aria-current=location]{box-shadow:inset 0 -3px 0 #3a877e}
}
@media(prefers-reduced-motion:reduce){.case-navigation,.case-navigation a{transition:none}html{scroll-behavior:auto}}

@media(max-width:1100px){.has-case-navigation{--case-header-visible:72px}}