/* Shared mobile geometry for Home, About and the standalone Research article.
   The veil is behind the controls: its feathered mask never fades the labels. */
@media(max-width:1024px),(pointer:coarse) and (max-width:1366px){
  .mobile-header{--nav-ink:#fff;--nav-muted:#ffffffc9;--nav-veil:#070b0f66;position:fixed!important;inset:0 0 auto;z-index:100!important;height:calc(64px + env(safe-area-inset-top));box-sizing:border-box;padding:0;display:block!important;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;overflow:visible;isolation:isolate;color:var(--nav-ink);font:400 16px D-DIN,Arial,sans-serif;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;visibility:visible!important;opacity:1!important;transform:translateZ(0)}
  .mobile-header::before{content:'';position:absolute;inset:0 0 -24px;z-index:-1;pointer-events:none;background:var(--nav-veil);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);mask-image:linear-gradient(to bottom,#000 0 62%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,#000 0 62%,transparent 100%);opacity:0;transition:opacity 420ms ease}
  .mobile-header.is-overlay::before{opacity:1}
  .mobile-header.mobile-header--light{--nav-ink:#171717;--nav-muted:#777;--nav-veil:#ffffffd9;position:sticky}
  .mobile-header .nav-inner{position:static;inset:auto;width:100%;max-width:none;height:100%;min-height:0;margin:0;padding:0;display:block;transform:none}
  .mobile-header .mobile-brand{position:absolute;left:max(12px,env(safe-area-inset-left));top:calc(12px + env(safe-area-inset-top));width:auto;height:40px;min-height:40px;display:flex;align-items:center;gap:7px;margin:0;padding:0;border:0;background:none;color:var(--nav-ink);font:400 16px/40px D-DIN,Arial,sans-serif;text-decoration:none;white-space:nowrap;cursor:pointer}
  .mobile-header .mobile-brand .mobile-logo{--mobile-logo-size:28px;display:flex;align-items:center;justify-content:center;flex:0 0 33.53px;width:33.53px;height:32px;line-height:0}
  /* Keep the inner animation box identical to the static image. The wider
     outer slot only positions the mark beside the brand text. */
  .mobile-header .mobile-brand :is(.brand-variants,.brand-mark,img){display:block;flex:0 0 var(--mobile-logo-size,28px);width:var(--mobile-logo-size,28px);height:var(--mobile-logo-size,28px);border-radius:0;object-fit:fill}
  .mobile-header .mobile-brand .brand-mark__canvas{width:calc(100% * 112 / 67);height:calc(100% * 108 / 64);mix-blend-mode:normal}
  .mobile-header .mobile-header-nav{position:absolute;left:152px;right:max(12px,env(safe-area-inset-right));top:calc(12px + env(safe-area-inset-top));width:auto;max-width:none;height:40px;min-width:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:center;gap:0;margin:0;padding:0;overflow-x:auto;scrollbar-width:none;white-space:nowrap}
  .mobile-header .mobile-header-nav::-webkit-scrollbar{display:none}
  .mobile-header .mobile-header-nav :is(a,button){position:static;display:flex;box-sizing:border-box;width:100%;align-items:center;justify-content:center;height:40px;min-height:40px;min-width:0;margin:0;padding:0 2px;border:0;background:none;color:var(--nav-muted);font:400 14px/40px D-DIN,Arial,sans-serif;text-transform:uppercase;text-decoration:none;white-space:nowrap;cursor:pointer}
  .mobile-header :is(a,button){-webkit-tap-highlight-color:transparent}
  .mobile-header :is(a,button):focus-visible{outline:2px solid currentColor;outline-offset:2px}
}
@media(min-width:600px) and (max-width:1024px),(pointer:coarse) and (min-width:600px) and (max-width:1366px){
  .mobile-header .mobile-brand{left:max(24px,env(safe-area-inset-left))}
  .mobile-header .mobile-header-nav{left:180px;right:max(24px,env(safe-area-inset-right))}
}
@media(max-width:375px){
  .mobile-header .mobile-header-nav{left:142px}
  .mobile-header .mobile-header-nav :is(a,button){font-size:12px;line-height:40px}
}
@media(max-width:359px){
  .mobile-header .mobile-brand{font-size:14px}
  .mobile-header .mobile-header-nav{left:128px}
  .mobile-header .mobile-header-nav :is(a,button){padding:0}
}
@media(prefers-reduced-motion:reduce){.mobile-header::before{transition:none}}