/* The frame every page shares: header, navigation and footer, identical on the
   home page, For labs, About, the article list and each article, so moving between
   pages never shifts the logo, the links or the margins. Class names carry a site-
   prefix so they never collide with a page's own styles (the blog pages have their
   own .top, .nav and footer rules). Needs Familjen Grotesk, loaded by each page. */
.site-wrap{box-sizing:border-box;max-width:1200px;margin:0 auto;padding-left:clamp(20px,4vw,48px);padding-right:clamp(20px,4vw,48px)}

.site-top{position:relative;z-index:20;color:#1B1B3A;font-family:"Familjen Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif}
.site-top .site-wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;height:76px}
.site-brand{display:block;flex:none;line-height:0;border-radius:6px}
.site-brand svg{display:block;height:30px;width:auto}
.site-nav{display:flex;align-items:center;gap:4px}
.site-nav a{font:500 15px/1 "Familjen Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;color:inherit;text-decoration:none;
            padding:10px 14px;border-radius:999px;border:1px solid transparent;transition:background-color .15s,color .15s}
.site-nav a:hover{background:#E9E7FA}
.site-nav a[aria-current]{color:#5546D6;background:#E9E7FA;border-color:#B8ACEF}
.site-nav .site-contact{margin-left:10px;background:#1B1B3A;color:#fff}
.site-nav .site-contact:hover{background:#5546D6}
.site-top a:focus-visible,.site-foot a:focus-visible{outline:2px solid #7B6FE6;outline-offset:3px}

/* the same header over the navy hero of the home page */
.site-top.on-dark{color:#fff}
.site-top.on-dark .site-nav a:hover{background:rgba(255,255,255,.12)}
.site-top.on-dark .site-nav .site-contact{background:#C5BAEE;color:#1B1B3A}
.site-top.on-dark .site-nav .site-contact:hover{background:#fff}

@media (max-width:640px){
  .site-top .site-wrap{height:64px}
  .site-brand svg{height:25px}
  .site-nav a{padding:9px 10px;font-size:14px}
  .site-nav .site-contact{display:none}
}

/* footer: element and class together, so it wins over a page's own footer rule */
footer.site-foot{margin:0;padding:0;border:0;text-align:left;background:#1B1B3A;color:#D9D5F2;
                 font:400 15px/1.5 "Familjen Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif}
.site-foot .site-wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px;padding-top:36px;padding-bottom:44px}
.site-foot .site-brand svg{height:27px}
.site-foot nav{display:flex;flex-wrap:wrap;gap:8px 26px}
.site-foot a{color:inherit;text-decoration:none}
.site-foot a:hover{color:#fff;text-decoration:underline;text-underline-offset:5px}
/* when the page already ends on navy, a hairline separates the footer */
.site-foot.joined .site-wrap{position:relative}
.site-foot.joined .site-wrap::before{content:"";position:absolute;top:0;height:1px;background:rgba(197,186,238,.22);
  left:clamp(20px,4vw,48px);right:clamp(20px,4vw,48px)}