/* Shared typography, navigation and footer for every public HexaFuture page. */
:root {
  --site-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --site-width: 1440px;
  --site-gutter: clamp(24px, 4vw, 80px);
  --site-header-height: 80px;
  --site-header-top: 0px;
  --site-anchor-offset: 104px;
}
html:has(body.site-narrow) { scroll-padding-top: var(--site-anchor-offset); }
.site-narrow .site-header {
  position: fixed;
  z-index: 100;
  inset: 0 0 auto;
  transform: none;
  width: 100%;
  max-width: none;
  height: calc(var(--site-header-height) + env(safe-area-inset-top, 0px));
  box-sizing: border-box;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px);
  margin: 0;
  isolation: isolate;
  border: 0;
  border-radius: 0;
  background: #050607;
  box-shadow: none;
  color: #fff;
  font-family: var(--site-font);
}
.site-narrow .site-header::before { content: none; }
.site-narrow .site-header::after {
  content: "";
  display: block;
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: rgb(255 255 255 / 12%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease;
}
.site-narrow .site-header.is-scrolled::after { opacity: 1; }
@supports ((backdrop-filter: blur(22px)) or (-webkit-backdrop-filter: blur(22px))) {
  .site-narrow .site-header { background: transparent; }
  .site-narrow .site-header::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0 0 -20px;
    pointer-events: none;
    background: linear-gradient(180deg, rgb(0 0 0 / 88%), rgb(0 0 0 / 68%) 74%, rgb(0 0 0 / 28%));
    -webkit-backdrop-filter: blur(22px);
    backdrop-filter: blur(22px);
    -webkit-mask-image: linear-gradient(#000 0 72%, transparent 100%);
    mask-image: linear-gradient(#000 0 72%, transparent 100%);
    opacity: .72;
    transition: opacity 220ms ease;
  }
  .site-narrow .site-header.is-scrolled::before { opacity: 1; }
  /* Confine the article's glass effect to the bar, with no fading edge. */
  .research-page.site-narrow .site-header {
    background: rgb(3 5 7 / 72%);
    -webkit-backdrop-filter: blur(18px) saturate(125%);
    backdrop-filter: blur(18px) saturate(125%);
  }
  .research-page.site-narrow .site-header::before { content: none; }
}
.site-narrow .site-header .header-inner {
  display: flex;
  position: relative;
  grid-template-columns: none;
  grid-template-rows: none;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: calc(100% - 2 * var(--site-gutter));
  max-width: var(--site-width);
  height: 100%;
  min-width: 0;
  margin: 0 auto;
  padding: 0;
  border: 0;
}
.site-narrow .site-header .brand {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  width: 140px;
  min-height: 44px;
  border-radius: 0;
}
.site-narrow .site-header .brand img { display: block; width: 100%; height: auto; aspect-ratio: 1192 / 402; }
.site-narrow .site-header nav {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  width: auto;
  height: auto;
  gap: 20px;
}
.site-narrow .site-header nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 44px;
  min-height: 44px;
  height: auto;
  padding: 12px 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #c8cacc;
  font: 400 14px/20px var(--site-font);
  letter-spacing: 0;
  white-space: nowrap;
  text-decoration: none;
  transition: color 180ms ease;
}
.site-narrow .site-header nav a::before { content: none; }
.site-narrow .site-header nav a::after {
  content: "";
  position: absolute;
  inset: auto 8px 6px;
  height: 1px;
  background: #75c7ef;
  opacity: .8;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 260ms cubic-bezier(.22, 1, .36, 1), opacity 180ms ease;
}
.site-narrow .site-header nav a[aria-current="page"] { background: transparent; color: #fff; }
.site-narrow .site-header nav a[aria-current="page"]::after { transform: scaleX(1); }
.site-narrow .site-header .nav-label-window { display: block; height: 20px; overflow: hidden; }
.site-narrow .site-header .nav-label {
  position: relative;
  display: block;
  line-height: 20px;
  transform: translateY(0);
  transition: transform 320ms cubic-bezier(.22, 1, .36, 1);
}
.site-narrow .site-header .nav-label[data-label]::after {
  /* Empty alternative text excludes the visual duplicate from the accessible name. */
  content: attr(data-label) / "";
  position: absolute;
  inset: 100% 0 auto;
  color: #fff;
}
.site-narrow .site-header nav a:focus-visible { color: #fff; }
.site-narrow .site-header nav a:focus-visible .nav-label-window .nav-label { transform: translateY(-100%); }
.site-narrow .site-header nav a:focus-visible::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) {
  .site-narrow .site-header nav a:hover { background: transparent; color: #fff; }
  .site-narrow .site-header nav a:hover .nav-label-window .nav-label { transform: translateY(-100%); }
  .site-narrow .site-header nav a:hover::after { transform: scaleX(1); }
}
.site-narrow .site-header a:focus-visible { outline: 2px solid #91d4fc; outline-offset: 3px; }
.site-narrow .skip-link { z-index: 110; }
.site-narrow .site-nav-sentinel { position: absolute; top: 24px; left: 0; width: 1px; height: 1px; pointer-events: none; }
.site-narrow .site-footer {
  position: relative;
  display: block;
  flex: none;
  width: 100%;
  max-width: none;
  margin: var(--site-footer-gap, 64px) 0 0;
  padding: 0;
  border: 0;
  background: #000;
  color: #fff;
  color-scheme: dark;
  font: 400 14px/1.5 var(--site-font);
}
.site-narrow .site-footer .footer {
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  width: calc(100% - 2 * var(--site-gutter));
  max-width: var(--site-width);
  min-height: 140px;
  margin: 0 auto;
  padding: 36px 0 max(36px, env(safe-area-inset-bottom, 0px));
  border-top: 1px solid #24313a;
}
.site-narrow .site-footer a { color: inherit; text-decoration: none; }
.site-narrow .site-footer .footer-brand { display: flex; align-items: center; width: 132px; min-height: 44px; flex: none; }
.site-narrow .site-footer .footer-brand img { display: block; width: 100%; height: auto; }
.site-narrow .site-footer .footer-separator { color: #687782; }
.site-narrow .site-footer .contact {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #9ba7b2;
  font: 400 15px/1.5 var(--site-font);
  letter-spacing: 0;
  transition: color 180ms ease;
}
.site-narrow .site-footer .contact:hover, .site-narrow .site-footer .contact:focus-visible { color: #fff; }
.site-narrow .site-footer a:focus-visible { outline: 2px solid #91d4fc; outline-offset: 5px; }
@media (max-width: 600px) {
  :root { --site-header-height: 72px; --site-anchor-offset: 92px; --site-gutter: 24px; }
  .site-narrow .site-header .header-inner { gap: 12px; }
  .site-narrow .site-header .brand { width: 106px; }
  .site-narrow .site-header nav { gap: 8px; }
  .site-narrow .site-header nav a { padding-inline: 4px; }
  .site-narrow .site-header nav a::after { right: 4px; left: 4px; }
  .site-narrow .site-footer { margin-top: var(--site-footer-gap, 40px); }
  .site-narrow .site-footer .footer { min-height: 132px; gap: 10px; flex-direction: column; padding-block: 28px max(28px, env(safe-area-inset-bottom, 0px)); }
  .site-narrow .site-footer .footer-brand { width: 120px; }
  .site-narrow .site-footer .footer-separator { display: none; }
  .site-narrow .site-footer .contact { font-size: 14px; }
}
@media (max-width: 360px) {
  :root { --site-gutter: 12px; }
  .site-narrow .site-header .header-inner { width: calc(100% - 24px); gap: 8px; }
}
@media (prefers-reduced-transparency: reduce) {
  .site-narrow .site-header,
  .research-page.site-narrow .site-header { background: #050607; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .site-narrow .site-header::before { content: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .site-narrow .site-header *, .site-narrow .site-header *::after,
  .site-narrow .site-header::before, .site-narrow .site-header::after { transition: none; }
  .site-narrow .site-header nav a .nav-label-window .nav-label,
  .site-narrow .site-header nav a:is(:hover, :focus-visible) .nav-label-window .nav-label { transform: none; }
  .site-narrow .site-header .nav-label[data-label]::after { content: none; }
  .site-narrow .site-footer .contact { transition: none; }
}
@media (forced-colors: active) {
  .site-narrow .site-header,
  .research-page.site-narrow .site-header { background: Canvas; color: CanvasText; border-bottom: 1px solid CanvasText; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .site-narrow .site-header::before { content: none; }
  .site-narrow .site-header nav a { color: LinkText; }
  .site-narrow .site-header nav a[aria-current="page"] { color: LinkText; outline: 1px solid Highlight; }
  .site-narrow .site-header nav a::after { background: Highlight; }
  .site-narrow .site-header .nav-label[data-label]::after { color: LinkText; }
}
@media print { .site-narrow .site-header, .site-narrow .site-footer, .site-nav-sentinel { display: none; } }