/* Shared top bar for the sub-pages (Research, Publications, Join, News): the same bar as the home page
   (sections 4-6 version: white text on the plum background, pink Motion switch, same burger + full-screen menu). */
.site-nav{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;gap:16px;height:80px;padding:0 60px;z-index:50;color:#fff;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;}
/* no colour tint (it looked wrong over the pink blocks): just a soft blur that fades out, so content scrolling under the bar stays out of the way of the links */
.site-nav::before{content:"";position:absolute;left:0;right:0;top:0;bottom:-24px;z-index:-1;pointer-events:none;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);-webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
.site-nav-logo{position:relative;display:block;flex:0 0 50px;width:50px;height:50px;overflow:hidden;transition:transform .3s ease}
.site-nav-logo:hover{transform:scale(1.05)}
.site-nav .logo-fade{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;animation:subLogoFade 9s ease-in-out infinite}
.site-nav .logo-fade:nth-child(2){animation-delay:3s}
.site-nav .logo-fade:nth-child(3){animation-delay:6s}
@keyframes subLogoFade{0%{opacity:0}11%{opacity:1}33%{opacity:1}44%{opacity:0}100%{opacity:0}}
body.motion-off .site-nav .logo-fade{animation:none;opacity:0}
body.motion-off .site-nav .logo-fade:nth-child(1){opacity:1}
.site-nav-menu{display:flex;align-items:center;gap:40px;list-style:none;margin:0;padding:0}
.site-nav-menu li{position:relative}
.site-nav-menu a{display:block;position:relative;color:#fff;text-decoration:none;font-size:clamp(14px,1.2vw,18px);font-weight:600;padding:8px 0;transition:opacity .3s ease}
.site-nav-menu a:hover{opacity:.7}
.site-nav-menu a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:#fff}
.site-nav-menu a:focus-visible,.site-nav-burger:focus-visible{outline:2px solid #fff;outline-offset:4px;border-radius:4px}
.site-nav .motion-switch-item{display:flex;align-items:center;gap:8px}
.site-nav .motion-label{color:#fff;font-size:clamp(14px,1.2vw,18px);font-weight:600;white-space:nowrap}
.site-nav .motion-label-state{display:inline-block;min-width:26px}
/* Motion switch: identical to the home page's */
.site-nav .motion-switch{position:relative;display:inline-block;width:30px;height:16px;cursor:pointer;vertical-align:middle}
.site-nav .motion-switch input{opacity:0;width:0;height:0;position:absolute}
.site-nav .motion-slider{position:absolute;inset:0;background:rgba(178,45,100,.25);border:1px solid rgba(178,45,100,.5);border-radius:22px;transition:background .2s,border-color .2s}
.site-nav .motion-slider::before{content:"";position:absolute;height:12px;width:12px;left:1px;top:1px;background:#b22d64;border-radius:50%;transition:transform .2s}
.site-nav .motion-switch input:checked+.motion-slider{background:#b22d64;border-color:#b22d64}
.site-nav .motion-switch input:checked+.motion-slider::before{background:#fff;transform:translateX(12px)}
.site-nav .motion-switch input:focus-visible+.motion-slider{outline:2px solid #fff;outline-offset:3px}
.site-nav-burger{display:none;background:none;border:0;padding:10px;margin-right:-10px;color:#fff;cursor:pointer}
.site-nav .site-nav-motion-mobile{display:none;margin-left:auto}
/* Tablet + phone (same 1024px switch as the home page): burger, the Motion switch beside it, full-screen menu */
@media (max-width:1024px){
  .site-nav{padding:0 20px}
  .site-nav-burger{display:flex}
  .site-nav .site-nav-motion-mobile{display:inline-block}
  .site-nav-menu{position:fixed;top:80px;left:0;width:100%;height:calc(100% - 80px);margin:0;padding:60px 40px;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:30px;box-sizing:border-box;background:rgba(255,255,255,.1);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);z-index:49;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .4s ease,visibility 0s linear .4s}
  .site-nav-menu.open{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .4s ease,visibility 0s}
  .site-nav-menu .motion-switch-item{display:none}
  .site-nav-menu a{color:#b22d64;font-size:32px;font-weight:900;padding:0;opacity:0;transform:translateY(20px);transition:all .4s ease}
  .site-nav-menu.open a{opacity:1;transform:none}
  .site-nav-menu li:nth-child(3) a{transition-delay:.1s}.site-nav-menu li:nth-child(4) a{transition-delay:.2s}.site-nav-menu li:nth-child(5) a{transition-delay:.3s}.site-nav-menu li:nth-child(6) a{transition-delay:.4s}.site-nav-menu li:nth-child(7) a{transition-delay:.5s}
  .site-nav-menu a[aria-current]::after{display:none}
}
@media (orientation:landscape) and (max-height:500px){
  .site-nav{height:56px}
  .site-nav-menu{top:56px;height:calc(100% - 56px);padding:24px 40px;gap:14px}
}
@media (prefers-reduced-motion:reduce){.site-nav *{transition:none!important}.site-nav .logo-fade{animation:none}.site-nav .logo-fade:nth-child(1){opacity:1}}

/* Shared link style: bold white + pink arrow, same as the home page */
.go-link,.join-block li>a{display:inline-flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-weight:700;font-size:16px;transition:gap .2s ease,opacity .2s ease}
.go-link::after,.join-block li>a::after{content:"→";color:var(--color-primary,#b22d64);font-weight:900;font-size:1.2em}
.go-link:hover,.join-block li>a:hover{gap:16px;opacity:.85}
.go-link:focus-visible,.join-block li>a:focus-visible{outline:2px solid #fff;outline-offset:4px;border-radius:4px}

/* Same Jablonski-curve burger as the home page, turning into a cross when the menu is open */
.site-nav-burger svg{display:block;overflow:visible}
.site-nav-burger svg *{transition:transform .35s ease,opacity .3s ease,stroke-opacity .3s ease;transform-box:fill-box;transform-origin:center}
.site-nav-burger .hb-curve{stroke-opacity:.4}
.site-nav-burger[aria-expanded="true"] .hb-l1{transform:translateY(-10px) rotate(-45deg) scaleX(1.3)}
.site-nav-burger[aria-expanded="true"] .hb-l2{opacity:0}
.site-nav-burger[aria-expanded="true"] .hb-l3{transform:translateY(10px) rotate(45deg) scaleX(1.3)}
.site-nav-burger[aria-expanded="true"] .hb-curve{stroke-opacity:0}
body.motion-off .site-nav-burger svg *{transition:none}

/* ─── Research page: the reactor's own CSS is inline in research.html, so its speed-ups live here ─── */
#reactor-site-wrapper, #lamp-wrapper, #flask-scene { perspective: none; }   /* was 3000px: cheaper to draw, looks almost the same */
body.reactor-off #reactor-site-wrapper * { animation-play-state: paused !important; }   /* while scrolled off-screen */
html.is-safari .growing-line, html.is-safari .arrow-tip, html.is-safari .vortex-ring, html.is-safari #flask-shadow { filter: none; }
@keyframes arcFadeS { 0%,5% { stroke:#010101; opacity:0; } 10%,40% { stroke:#f2eef2; opacity:1; } 50%,100% { stroke:#010101; opacity:0; } }
@keyframes bulbPowerS {
  0%,50% { background:#f2eef2; box-shadow:0 0 24px 6px rgba(178,45,100,0.55); }
  62%,75% { background:#512940; }
  80%,100% { background:#010101; stroke:#010101; opacity:1; box-shadow:0 0 0px transparent; }
}
html.is-safari .reactor-active .arc-path { animation-name: arcFadeS; }
html.is-safari .reactor-active .filament-rod { animation-name: bulbPowerS; }


/* Android has no Helvetica Neue / Helvetica / Arial (it quietly swaps in Roboto or Samsung's own font), so the text looked different.
   On Android only (main.js / subnav.js add .is-android) use Arimo, a free font with the same shapes and widths as Arial. */
@font-face { font-family: 'Arimo Web'; src: url('../fonts/Arimo-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Arimo Web'; src: url('../fonts/Arimo-Bold.woff2') format('woff2'); font-weight: 700 900; font-style: normal; font-display: swap; }
html.is-android body, html.is-android .site-nav, html.is-android button, html.is-android input, html.is-android textarea { font-family: 'Arimo Web', 'Helvetica Neue', Helvetica, Arial, sans-serif; }

/* Phones/tablets: put the Motion switch and the burger exactly where the home page has them (same size, same spot), so they do not jump between pages */
@media (max-width:1024px){
  .site-nav .site-nav-motion-mobile{position:fixed;top:29px;right:78px;margin:0;width:40px;height:22px;z-index:5001}
  .site-nav .site-nav-motion-mobile .motion-slider::before{height:16px;width:16px;left:2px;top:2px}
  .site-nav .site-nav-motion-mobile input:checked+.motion-slider::before{transform:translateX(18px)}
  .site-nav-burger{position:fixed;top:13px;right:20px;margin:0;padding:10px;z-index:5001}
}
@media (orientation:landscape) and (max-height:500px){
  .site-nav .site-nav-motion-mobile{top:17px}
  .site-nav-burger{top:1px}
}