:root {
  --os-red: #cf2e2e;
  --os-red-bright: #ef3b3b;
  --os-text: #f3efe8;
  --os-muted: #c3bdb3;
  --os-line: rgba(255, 255, 255, 0.12);
  --os-mono: "Fira Code", ui-monospace, SFMono-Regular, Menlo, monospace;
}

body {
  background:
    radial-gradient(circle at 48% -10%, rgba(207, 46, 46, 0.12), transparent 35%),
    linear-gradient(135deg, #020202 0%, #070303 52%, #030303 100%) !important;
}

main {
  width: min(1180px, calc(100% - 40px)) !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding: 42px 0 64px !important;
}

.site-top,
.site-strip {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  margin-bottom: 48px !important;
}

.brand,
.nav-mark {
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  gap: 10px !important;
  color: var(--os-text) !important;
  font-family: Manrope, ui-sans-serif, system-ui, sans-serif !important;
  font-size: 0.82rem !important;
  font-weight: 850 !important;
  letter-spacing: 0.05em !important;
  line-height: 1 !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
}

.brand img,
.nav-mark img {
  display: block !important;
  width: auto !important;
  height: 32px !important;
  object-fit: contain !important;
}

.site-nav {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-wrap: nowrap !important;
  justify-content: flex-end !important;
  gap: 7px !important;
  max-width: none !important;
  min-width: 0 !important;
  overflow-x: auto !important;
  white-space: nowrap !important;
  scrollbar-width: none !important;
}

.site-nav::-webkit-scrollbar {
  display: none !important;
}

.site-nav a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  border: 1px solid var(--os-line) !important;
  border-radius: 999px !important;
  padding: 9px 11px !important;
  background: rgba(255, 255, 255, 0.025) !important;
  color: var(--os-muted) !important;
  font-family: var(--os-mono) !important;
  font-size: 0.62rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  line-height: 1 !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
}

.site-nav a:hover,
.site-nav a.is-active {
  border-color: var(--os-red) !important;
  color: var(--os-red-bright) !important;
  background: rgba(207, 46, 46, 0.08) !important;
}

.crumbs {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  margin: 0 0 16px !important;
  color: rgba(195, 189, 179, 0.58) !important;
  font-family: var(--os-mono) !important;
  font-size: 0.68rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.13em !important;
  line-height: 1.35 !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  white-space: nowrap !important;
  text-transform: uppercase !important;
}

.crumbs::-webkit-scrollbar {
  display: none !important;
}

.crumbs b {
  color: rgba(195, 189, 179, 0.35) !important;
  font-family: var(--os-mono) !important;
  font-size: 0.66rem !important;
  font-weight: 500 !important;
}

.crumbs span {
  color: var(--os-red-bright) !important;
}

.crumbs .crumb-parent {
  color: rgba(195, 189, 179, 0.58) !important;
}

.resource-nav {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  justify-content: flex-end !important;
  margin: -34px 0 34px !important;
  color: rgba(195, 189, 179, 0.48) !important;
  font-family: var(--os-mono) !important;
  font-size: 0.62rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

.resource-nav span {
  margin-right: 2px !important;
  color: rgba(195, 189, 179, 0.48) !important;
}

.resource-nav a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid var(--os-line) !important;
  border-radius: 999px !important;
  padding: 8px 10px !important;
  background: rgba(255, 255, 255, 0.018) !important;
  color: var(--os-muted) !important;
  font-family: var(--os-mono) !important;
  font-size: 0.58rem !important;
  font-weight: 650 !important;
  letter-spacing: 0.08em !important;
  line-height: 1 !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
}

.resource-nav a:hover,
.resource-nav a.is-active {
  border-color: rgba(207, 46, 46, 0.8) !important;
  background: rgba(207, 46, 46, 0.07) !important;
  color: var(--os-red-bright) !important;
}

.resource-nav a.site-return {
  border-color: rgba(207, 46, 46, 0.68) !important;
  background: rgba(207, 46, 46, 0.12) !important;
  color: var(--os-text) !important;
}

.resource-nav a.site-return:hover {
  border-color: var(--os-red-bright) !important;
  background: rgba(207, 46, 46, 0.22) !important;
  color: #fff !important;
}

@media (max-width: 760px) {
  .site-top,
  .site-strip {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .brand span,
  .nav-mark span {
    max-width: 92px !important;
    white-space: normal !important;
  }

  .site-nav {
    width: 100% !important;
    justify-content: space-between !important;
    gap: 3px !important;
    overflow-x: visible !important;
  }

  .site-nav a {
    padding: 7px 3px !important;
    font-size: 0.4rem !important;
    letter-spacing: 0.025em !important;
  }

  .crumbs {
    gap: 6px !important;
    margin-bottom: 14px !important;
    font-size: 0.58rem !important;
    letter-spacing: 0.11em !important;
  }

  .resource-nav {
    justify-content: flex-start !important;
    gap: 6px !important;
    margin: -6px 0 34px !important;
    font-size: 0.56rem !important;
    letter-spacing: 0.08em !important;
  }

  .resource-nav a {
    padding: 7px 9px !important;
    font-size: 0.52rem !important;
  }
}