/* Shared chapter rail: enough room for full labels and a stable active state. */
body.portfolio-case .arch-index { position:fixed; display:flex; top:50%; bottom:auto; left:auto; right:8px; width:104px; max-height:calc(100dvh - 120px); padding:4px 0; transform:translateY(-50%); flex-direction:column; gap:4px; z-index:110; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; }
body.portfolio-case .arch-index > a { flex:0 0 auto; display:flex; align-items:center; justify-content:flex-end; gap:6px; width:104px; max-width:none; min-height:44px; padding:10px 6px; font-family:"PingFang SC",-apple-system,BlinkMacSystemFont,"Microsoft YaHei",sans-serif; font-size:12px; font-weight:400; line-height:1.5; letter-spacing:0; text-align:right; color:#56616d; white-space:nowrap; overflow:visible; text-overflow:clip; border-radius:0; }
body.portfolio-case .arch-index > a i { flex:0 0 6px; width:6px; height:6px; border:1px solid currentColor; border-radius:50%; background:transparent; }
body.portfolio-case .arch-index > a:is(.on,.is-active,[aria-current="location"],[aria-current="true"]) { color:var(--portfolio-focus,#1743b9); font-weight:600; }
body.portfolio-case .arch-index > a:is(.on,.is-active,[aria-current="location"],[aria-current="true"]) i { border-color:currentColor; background:currentColor; }
body.portfolio-case .arch-index > a:hover { color:var(--portfolio-focus,#1743b9); }
body.portfolio-case .arch-index a:focus-visible { outline:2px solid currentColor; outline-offset:-3px; }
body.portfolio-case--ioc .arch-index > a,
body.portfolio-case--image .arch-index.is-inverse > a,
body.portfolio-case--grc .arch-index > a.is-over-dark { color:#bdccd8; }
body.portfolio-case--ioc .arch-index > a:is(.on,[aria-current="location"]),
body.portfolio-case--ioc .arch-index > a:hover { color:#7ce5f2; }
body.portfolio-case--image .arch-index.is-inverse > a:is(.is-active,[aria-current="location"],[aria-current="true"]),
body.portfolio-case--image .arch-index.is-inverse > a:hover { color:#ffad73; }
body.portfolio-case--grc .arch-index > a.is-over-dark:is(.on,[aria-current="location"]) { color:#e9bc6a; }
body.portfolio-case--grc .arch-index .theme-index { margin:0 4px 8px 8px; padding:4px 0; }
body.portfolio-case--grc .arch-index .theme-index a { width:auto; min-height:44px; font-size:12px; line-height:1.5; }
@media(max-width:999px) {
 body.portfolio-case { padding-bottom:calc(68px + env(safe-area-inset-bottom)); }
 body.portfolio-case .arch-index { display:flex; top:auto; bottom:0; right:0; left:0; width:100%; max-height:none; transform:none; flex-direction:row; gap:0; padding:8px 12px max(8px,env(safe-area-inset-bottom)); overflow-x:auto; overflow-y:hidden; background:rgba(255,255,255,.98); border-top:1px solid #d8dce2; }
 body.portfolio-case .arch-index > a { flex:0 0 auto; width:auto; min-width:80px; justify-content:center; padding:10px 12px; }
 body.portfolio-case .arch-index > a i { display:none; }
 body.portfolio-case--ioc .arch-index > a,
 body.portfolio-case--image .arch-index.is-inverse > a,
 body.portfolio-case--grc .arch-index > a.is-over-dark { color:#56616d; }
 body.portfolio-case .arch-index > a:is(.on,.is-active,[aria-current="location"],[aria-current="true"]),
 body.portfolio-case .arch-index > a:hover { color:var(--portfolio-focus,#1743b9); }
 body.portfolio-case--grc .arch-index .theme-index { flex-direction:row; margin:0; padding:0; border-left:0; }
 body.portfolio-case--grc .arch-index .theme-index a { flex:0 0 auto; white-space:nowrap; padding:10px 12px; }
}

/* Keep the corner identity lightweight; only the return control has a surface. */
body.portfolio-case .portfolio-mark { padding:0; background:transparent; border:0; border-radius:0; box-shadow:none; }
body.portfolio-case .portfolio-mark__brand { text-shadow:0 1px 3px rgba(255,255,255,.85); }
body.portfolio-case--ioc .portfolio-mark__brand,
body.portfolio-case--image .case-mark.is-inverse .portfolio-mark__brand,
body.portfolio-case--grc.is-hero .portfolio-mark__brand { text-shadow:0 1px 3px rgba(0,0,0,.5); }

/* Light mobile navigation needs a dark active color even for cyan/gold project palettes. */
@media(max-width:999px) {
 body.portfolio-case .arch-index > a:is(.on,.is-active,[aria-current="location"],[aria-current="true"]),
 body.portfolio-case .arch-index > a:hover { color:#1743b9; }
 body.portfolio-case--image .arch-index > a:is(.is-active,[aria-current="location"],[aria-current="true"]) { color:#b94716; }
 body.portfolio-case--grc .arch-index > a.is-over-dark:is(.on,[aria-current="location"]) { color:#1743b9; }
}