/* One navigation and ending treatment for the V9.7 site and standalone cases. */
:root{--portfolio-ink:#0d0d0c;--portfolio-paper:#f1eee7;--portfolio-blue:#294b8d}
.mobile-header{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);position:fixed;inset:0 0 auto;height:70px;z-index:110;background:#0a0a09;align-items:center;gap:24px;padding:0 clamp(18px,3vw,48px);border-bottom:1px solid #383630}
.mobile-header .mobile-identity{display:flex;flex-direction:column;gap:3px;margin:0;white-space:nowrap;font:650 18px/1.1 'Noto Sans Display',Display,Inter,sans-serif;letter-spacing:-.025em;color:var(--portfolio-paper);text-decoration:none}
.mobile-header .mobile-identity small{display:block;margin:0;color:#b8b2a7;font:10px/1.2 'IBM Plex Mono',Mono,monospace;letter-spacing:.02em}
.mobile-header .header-nav{display:flex;justify-self:center;align-items:center;margin:0;gap:clamp(18px,2.8vw,38px)}
.mobile-header .header-nav a{color:#e2ded5;text-transform:uppercase;letter-spacing:.055em;font:11px/1.3 'IBM Plex Mono',Mono,monospace;text-decoration:none;white-space:nowrap}
.mobile-header .header-nav a:hover,.mobile-header .header-nav a:focus-visible,.mobile-header .header-nav a.active{color:#fff;text-decoration:underline;text-underline-offset:7px}
.mobile-context.on{display:flex;gap:0;position:fixed;top:var(--top,70px);inset-inline:0;height:var(--context-height,46px);align-items:stretch;overflow-x:auto;overflow-y:hidden;z-index:105;background:#11110f;border-bottom:1px solid #494742;padding:0 clamp(8px,2vw,28px);scrollbar-width:thin;scrollbar-color:#6f6a60 #11110f}
.mobile-context.on a{display:inline-flex;align-items:center;gap:9px;flex:0 0 auto;min-height:44px;padding:0 clamp(12px,1.5vw,20px);border:0;border-right:1px solid #393730;white-space:nowrap;color:#d3cec4;text-decoration:none;font:11px/1.2 'IBM Plex Mono',Mono,monospace;scroll-snap-align:start}
.mobile-context.on a:first-child{border-left:1px solid #393730}
.mobile-context.on a .n{font:10px/1.2 'IBM Plex Mono',Mono,monospace;color:#9c968a}
.mobile-context.on a:hover,.mobile-context.on a:focus-visible{background:#24231f;color:#fff}
.mobile-context.on a.active,.mobile-context.on a[aria-current="location"]{background:#24231f;color:#fff;box-shadow:inset 0 -2px var(--portfolio-blue)}
.mobile-context.on a.active .n,.mobile-context.on a[aria-current="location"] .n{color:#c6d6f3}
.mobile-context.on::-webkit-scrollbar{display:block;height:5px}
.mobile-context.on::-webkit-scrollbar-thumb{background:#6f6a60}
.site-related-heading{display:flex;align-items:baseline;justify-content:space-between;gap:24px;padding:34px var(--pad,4.4%) 16px;background:#11110f;color:var(--portfolio-paper);border-top:1px solid #494742}
.site-related-heading span{font:11px/1.4 'IBM Plex Mono',Mono,monospace;letter-spacing:.08em;color:#b4ada2}
.site-related-heading h2{font:700 clamp(25px,3vw,38px)/1.12 'Noto Sans Display',Display,Inter,sans-serif;color:var(--portfolio-paper);margin:0}
body .related{padding:32px var(--pad,4.4%) 56px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(15px,2vw,28px);background:#11110f;color:var(--portfolio-paper)}
body .related .rel{display:flex;flex-direction:column;min-width:0;gap:15px;border-top:1px solid #79736a;padding-top:13px;color:var(--portfolio-paper);text-decoration:none}
body .related .rel .rel-pic{aspect-ratio:16/10;overflow:hidden;background:#0b0b0a}
body .related .rel img{display:block;width:100%;height:100%;object-fit:cover;filter:none}
body .related .rel small{font:10px/1.5 'IBM Plex Mono',Mono,monospace;color:#b4ada2}
body .related .rel h3{font:700 clamp(19px,2vw,27px)/1.16 'Noto Sans Display',Display,Inter,sans-serif;color:var(--portfolio-paper);letter-spacing:-.02em;margin:6px 0 0}
body .related .rel:hover h3,body .related .rel:focus-visible h3{text-decoration:underline;text-decoration-color:#8aa7d8;text-underline-offset:5px}
body .site-footer{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:27px var(--pad,4.4%) 36px;border-top:1px solid #494742;background:#0d0d0c;color:#b8b2a7;font:10px/1.7 'IBM Plex Mono',Mono,monospace}
body .site-footer a{color:var(--portfolio-paper);text-decoration:none}
body .site-footer a:hover{text-decoration:underline;text-underline-offset:4px}
.standalone-project{--top:70px;--context-height:46px;--pad:4.4%;--rail:0px}
.standalone-project .page{margin-left:0;padding-top:calc(var(--top) + var(--context-height));min-width:0}
.standalone-project #project-top{scroll-margin-top:calc(var(--top) + var(--context-height))}
.standalone-project [id]:target{scroll-margin-top:calc(var(--top) + var(--context-height) + 15px)}
.standalone-project .mobile-header .portfolio-return{justify-self:end;color:var(--portfolio-paper);font:11px/1.2 'IBM Plex Mono',Mono,monospace;text-decoration:none;white-space:nowrap}
.standalone-project .mobile-header .portfolio-return:hover{text-decoration:underline;text-underline-offset:4px}
.standalone-project .sc-source-boundary{margin:0}
@media(max-width:700px){
  body:not(.standalone-project) .mobile-header{display:flex;gap:10px;padding-inline:12px}
  body:not(.standalone-project) .mobile-header .mobile-identity{margin-right:auto;font-size:16px}
  body:not(.standalone-project) .mobile-header .header-nav{display:none}
  body:not(.standalone-project) .mobile-header #menuToggle{display:block;flex:0 0 auto}
  body:not(.standalone-project) .mobile-header .layer-direct{display:block;flex:0 0 auto;min-width:82px;margin:0;padding-inline:5px;font-size:9px}
  .standalone-project{--top:101px}
  .standalone-project .mobile-header{height:101px;grid-template-columns:1fr auto;grid-template-rows:52px 48px;gap:0 12px;padding:0 16px}
  .standalone-project .mobile-header .mobile-identity{font-size:16px;grid-column:1;grid-row:1}
  .standalone-project .mobile-header .portfolio-return{grid-column:2;grid-row:1}
  .standalone-project .mobile-header .header-nav{display:flex;grid-column:1/-1;grid-row:2;justify-self:stretch;justify-content:space-between;gap:8px;border-top:1px solid #383630}
  .standalone-project .mobile-header .header-nav a{font-size:10px}
  body .related{grid-template-columns:1fr;gap:23px}
  body .related .rel{display:grid;grid-template-columns:110px minmax(0,1fr);align-items:center}
  body .related .rel .rel-pic{aspect-ratio:1}
  .site-related-heading{align-items:start;flex-direction:column;gap:8px}
}