@font-face {
  font-family: 'JetBrains Mono';
  src: url('JetBrainsMono-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('Archivo-Variable.ttf') format('truetype');
  font-weight: 100 900;
  font-display: swap;
}
/* One CSS family routes normal/medium weights to Archivo and bold to Mono.
   This also covers inherited weights and nested animated heading spans. */
@font-face {
  font-family: 'Kastl Typography';
  src: url('Archivo-Variable.ttf') format('truetype');
  font-weight: 100 599;
  font-display: swap;
}
@font-face {
  font-family: 'Kastl Typography';
  src: url('JetBrainsMono-Bold.woff2') format('woff2');
  font-weight: 600 900;
  font-display: swap;
}

/* Bold name with a smaller, widely spaced descriptor. */
.kastl-wordmark {
  display: inline-flex !important;
  align-items: baseline;
  gap: .55em;
  white-space: nowrap;
  font-family: var(--font-jbmono) !important;
  font-style: normal !important;
  line-height: 1.15 !important;
  letter-spacing: normal !important;
  text-decoration: none !important;
}
.kastl-wordmark .wordmark-name {
  font-family: var(--font-jbmono) !important;
  font-size: 1em;
  font-style: normal !important;
  font-weight: 700 !important;
  letter-spacing: -.055em !important;
}
.kastl-wordmark .wordmark-descriptor {
  font-family: var(--font-archivo) !important;
  font-size: .62em;
  font-style: normal !important;
  font-weight: 400 !important;
  letter-spacing: .24em !important;
}
.site-header .kastl-wordmark {
  font-size: clamp(19px, 1.65vw, 26px) !important;
  color: inherit !important;
}
.footer-brand.kastl-wordmark { font-size: clamp(32px, 9vw, 145px); }
.footer-logo.kastl-wordmark { font-size: clamp(24px, 3vw, 46px); }
.page-loader .kastl-wordmark { font-size: clamp(28px, 6vw, 90px); }

:root {
  --font-jbmono: 'JetBrains Mono', 'JetBrains Mono Fallback', monospace;
  --font-archivo: 'Archivo', 'Archivo Fallback', sans-serif;
  --font-site: 'Kastl Typography', 'Archivo Fallback', sans-serif;
}

/* Include headings, form controls and the legacy menu's explicit font rules. */
html body,
html body *,
html body .site-overlay-links a:hover {
  font-family: var(--font-site) !important;
}

/* Regular body copy; headings and emphasis retain their own weights. */
html body { font-weight: 400; }

/* White foreground + difference blending adapts to the actual pixels beneath
   the header, including images and videos, without painting a header bar. */
.site-header,
.site-header.is-sticky,
.site-header.shell-solid {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  min-height: 80px;
  height: auto !important;
  box-sizing: border-box;
  overflow: visible !important;
  padding: 26px clamp(28px, 3.4vw, 64px) !important;
  color: #fff !important;
  background: transparent !important;
  mix-blend-mode: difference !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  border: 0 !important;
}
.site-header .kastl-wordmark { font-size: 18px !important; line-height: 1.4 !important; flex: 0 0 auto; }
.site-header .wordmark-descriptor { font-size: .68em; color: inherit; }
.header-nav { display: flex; align-items: center; gap: clamp(22px, 2vw, 40px); }
.header-nav a {
  position: relative;
  color: inherit;
  font: 400 12px/1.4 var(--font-site);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color .2s;
}
.header-nav a:hover { text-decoration: underline; text-underline-offset: 5px; }
.header-nav a[aria-current] { color: inherit; }
/* This marker lives outside the blended header so its color stays intact. */
.header-active-dot {
  position: fixed;
  z-index: 95;
  pointer-events: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ff4d00;
}
.header-nav a:focus-visible, .site-header .kastl-wordmark:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 6px;
}
.site-header .menu-toggle, .site-header .site-menu-toggle { display: none !important; }
@media (max-width: 800px) {
  .site-header,
  .site-header.is-sticky,
  .site-header.shell-solid {
    min-height: 72px;
    padding: 14px var(--site-gutter, clamp(20px, 3.4vw, 64px)) !important;
  }
  .header-active-dot { display: none; }
  .header-nav { display: none; }
  .site-header .menu-toggle, .site-header .site-menu-toggle {
    display: flex !important;
    color: inherit !important;
    background: transparent !important;
    padding: 8px 0 !important;
    width: 44px;
    min-height: 44px;
    justify-content: flex-end;
    font: 400 12px/1 var(--font-site) !important;
  }
  /* Keep the changing button name available to screen readers. */
  .site-header .menu-label,
  .site-header .site-menu-label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
  }
}