/* The site header stays with the page. Each project carries its own detached navigation:
   a floating pill under the header on wide screens, a small pill at the foot of the screen on narrow ones. */
:root{--site-header-height:76px;--project-nav-height:0px;--visible-nav-height:calc(var(--site-header-height) + var(--project-nav-height));--chrome-offset:var(--site-header-height);--nav-surface:#282829;--nav-text:#d5d5d3;--nav-line:#ffffff24;--nav-gap:26px}
html{scroll-padding-top:0!important}
.site-chrome{position:sticky;top:0;z-index:1100;transform:translateY(0);transition:transform .28s ease;isolation:isolate;background:var(--nav-surface);box-shadow:0 1px var(--nav-line)}
.site-chrome>.research-header{position:relative;top:auto;z-index:2;background:var(--nav-surface);border:0}
.site-chrome .research-header-inner{height:76px}
.site-chrome:has(.research-header :focus-visible){transition:none}
.site-chrome.is-hidden{transform:translateY(calc(-1 * var(--site-header-height)))}
body:has(.site-chrome) main[id],body:has(.site-chrome) main [id]{scroll-margin-top:calc(var(--visible-nav-height) + 24px)!important}
.project-navigation{position:fixed;left:0;right:0;z-index:1090;display:flex;justify-content:center;pointer-events:none;color:#fff;font:400 14px/1.4 var(--sans);letter-spacing:normal}
.project-navigation-inner{pointer-events:auto;position:relative;display:flex;align-items:center}
.project-navigation a{color:var(--nav-text);text-decoration:none!important;white-space:nowrap;opacity:1;position:relative}
.project-navigation a:hover,.project-navigation a[aria-current="location"]{color:#fff;opacity:1}
.project-navigation :is(a,button):focus-visible{outline:3px solid #fcbf00;outline-offset:0;border-radius:2px}
.project-nav-links>a{display:flex;align-items:center;font:400 14px/1.4 var(--sans)}
.project-nav-links>.project-nav-resource{gap:8px}
.project-nav-resource svg{width:13px;height:13px;flex:none}
.project-nav-toggle{font:inherit;color:inherit;cursor:pointer}
@media(min-width:1240px){
 /* Wide screens: one long pill, 16px below the header, which follows the header as it hides and returns. */
 .project-navigation{top:16px;padding-inline:var(--pad);transform:translateY(var(--chrome-offset));transition:transform .28s ease}
 .project-navigation-inner{height:52px;max-width:100%;gap:26px;padding:0 20px 0 28px;background:var(--nav-surface);border:1px solid #ffffff33;border-radius:999px;box-shadow:0 12px 32px #00000052}
 .project-navigation .project-nav-name{font-size:17px;line-height:1.3;font-weight:600;letter-spacing:-.01em;flex:none;color:#fff;padding-block:12px}
 .project-nav-toggle,.project-nav-top{display:none!important}
 .project-nav-track{min-width:0;position:relative}
 .project-nav-scroll{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;scroll-padding-inline:36px}
 .project-nav-scroll::-webkit-scrollbar{display:none}
 .project-nav-track.is-scrollable .project-nav-links{padding-inline:36px}
 .project-nav-links{width:max-content;min-width:100%;display:flex;align-items:center;gap:var(--nav-gap);padding:4px 3px}
 .project-nav-links>a{padding:12px 0;min-height:44px}
 .project-nav-links>a[aria-current="location"]::after{content:"";position:absolute;height:2px;inset:auto 0 6px;background:var(--nav-accent,#ea4700)}
 .project-nav-links>[data-project-section]+.project-nav-resource{padding-left:var(--nav-gap);border-left:1px solid var(--nav-line)}
 .project-nav-shift{position:absolute;top:50%;transform:translateY(-50%);left:0;z-index:2;display:grid;place-items:center;width:30px;height:44px;padding:0;border:0;background:var(--nav-surface);color:#fff;box-shadow:5px 0 8px var(--nav-surface)}
 .project-nav-shift[data-nav-shift="-1"] svg{transform:rotate(180deg)}
 .project-nav-shift[data-nav-shift="1"]{left:auto;right:0;box-shadow:-5px 0 8px var(--nav-surface)}
 .project-nav-shift svg{width:16px;height:16px}
 .project-nav-shift[aria-disabled="true"]{color:#ffffff38;cursor:default}
 .site-chrome .research-header .research-navigation{gap:var(--nav-gap)}
 .site-chrome .research-header .research-navigation a{font:400 14px/1.4 var(--sans);padding:12px 0;min-height:44px;display:flex;align-items:center;color:var(--nav-text)}
 .site-chrome .research-header .research-navigation a:hover,.site-chrome .research-header .research-navigation a[aria-current="page"]{color:#fff}
 .site-chrome .research-header .research-navigation a[aria-current="page"]::after{bottom:4px;background:var(--nav-accent,#ea4700)}
 html:not(.js) .project-navigation{position:absolute;top:calc(var(--site-header-height) + 16px);transform:none}
}
@media(max-width:1239px){
 /* Narrow screens: a pill at the foot of the screen names the project and the current section, and opens the list.
    It is a different object from the menu button in the header. */
 :root{--nav-gap:24px}
 .project-navigation{bottom:calc(14px + env(safe-area-inset-bottom,0px));padding-inline:16px;transform:translateY(calc(100% + 40px));opacity:0;transition:transform .32s cubic-bezier(.22,1,.36,1),opacity .2s ease}
 .project-navigation.is-ready,.project-navigation:focus-within{transform:none;opacity:1}
 body.research-menu-open .project-navigation{visibility:hidden}
 .project-navigation-inner{flex-direction:column-reverse;align-items:center;gap:8px;width:100%;max-width:440px}
 .project-navigation .project-nav-name{display:none}
 .project-nav-toggle{display:inline-flex;align-items:center;gap:10px;max-width:100%;min-height:48px;padding:0 18px 0 22px;background:var(--nav-surface);border:1px solid #ffffff40;border-radius:999px;box-shadow:0 10px 30px #00000061;font:400 15px/1.2 var(--sans)}
 .project-nav-toggle-name{font-weight:600;color:#fff;flex:none}
 .project-nav-current{color:var(--nav-text);padding-left:10px;border-left:1px solid #ffffff4d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .project-nav-toggle svg{width:14px;height:14px;flex:none;transition:transform .2s ease}
 .project-nav-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
 .project-nav-track{display:none;width:100%;max-height:min(68dvh,540px);overflow:auto;overscroll-behavior:contain;background:var(--nav-surface);border:1px solid #ffffff40;border-radius:19px;box-shadow:0 14px 40px #00000073;padding:6px 22px}
 .project-navigation.is-open .project-nav-track{display:block}
 .project-nav-links{display:flex;flex-direction:column}
 .project-nav-links>a{min-height:50px;font-size:17px;justify-content:space-between;border-bottom:1px solid #ffffff1f;white-space:normal}
 .project-nav-links>a:last-child{border-bottom:0}
 .project-nav-links>a[aria-current="location"]{font-weight:500}
 .project-nav-links>a[aria-current="location"]::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--nav-accent,#ea4700);order:2;margin-left:auto}
 .project-nav-top{color:#fff!important}
 .project-nav-shift{display:none!important}
 html:not(.js) .project-navigation{position:static;transform:none;opacity:1;padding:0;background:var(--nav-surface)}
 html:not(.js) .project-navigation-inner{max-width:none}
 html:not(.js) .project-nav-toggle{display:none}
 html:not(.js) .project-nav-track{display:block;max-height:none;border:0;border-radius:0;box-shadow:none;padding:6px var(--pad) 12px}
 html:not(.js) .project-nav-links{flex-direction:row;flex-wrap:wrap;gap:0 22px}
 html:not(.js) .project-nav-links>a{border:0;min-height:44px;font-size:15px}
}
@media(max-width:540px){:root{--site-header-height:72px}.site-chrome .research-header-inner{height:72px}}
/* Smoked glass keeps the navigation legible across photographs and pale sections.
   Only the floating surfaces blur the page; their text and focus rings stay sharp.
   The opaque rules above remain the fallback when backdrop filtering is unavailable. */
.project-navigation{
 --project-glass-fill:linear-gradient(120deg,#ffffff0d,transparent 38%,#ffffff04 78%,#ffffff09),#1c1c1fb5;
 --project-glass-shadow:0 12px 32px #00000038,0 2px 6px #00000024,inset 0 1px 0 #ffffff38,inset 0 -1px 0 #ffffff12;
 --project-glass-filter:blur(22px) saturate(155%);
 --nav-text:#ededeb;
}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 @media(min-width:1240px){
  .project-navigation-inner{
   background:var(--project-glass-fill);border-color:#ffffff40;box-shadow:var(--project-glass-shadow);
   -webkit-backdrop-filter:var(--project-glass-filter);backdrop-filter:var(--project-glass-filter);
  }
  .project-nav-shift{background:#303032e8;box-shadow:5px 0 8px #303032b3;border-radius:6px}
  .project-nav-shift[data-nav-shift="1"]{box-shadow:-5px 0 8px #303032b3}
 }
 @media(max-width:1239px){
  .project-nav-toggle,.project-nav-track{
   background:var(--project-glass-fill);border-color:#ffffff40;box-shadow:var(--project-glass-shadow);
   -webkit-backdrop-filter:var(--project-glass-filter);backdrop-filter:var(--project-glass-filter);
  }
  html:not(.js) .project-nav-track{background:var(--nav-surface);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
 }
}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more),(forced-colors:active){
 .project-navigation{--project-glass-fill:var(--nav-surface);--project-glass-filter:none;--project-glass-shadow:0 4px 14px #00000040}
 .project-navigation-inner,.project-nav-toggle,.project-nav-track{border-color:#ffffff80}
}
@media(prefers-reduced-motion:reduce){.site-chrome,.project-navigation,.project-nav-toggle svg{transition:none}}
html:not(.js){--visible-nav-height:0px}
html:not(.js) .site-chrome{position:relative;transform:none}
@media print{.site-chrome{position:static;transform:none}.project-navigation{display:none}}