/* Shared BuiltByEcho shell overrides for older static pages. */
:root {
  --bbe-bg: oklch(0.118 0.026 226);
  --bbe-bg-deep: oklch(0.075 0.022 232);
  --bbe-ink: oklch(0.965 0.012 150);
  --bbe-soft: oklch(0.77 0.034 178);
  --bbe-dim: oklch(0.58 0.04 190);
  --bbe-line: oklch(0.38 0.052 190 / 0.36);
  --bbe-green: oklch(0.81 0.17 159);
  --bbe-cyan: oklch(0.78 0.12 212);
  --bbe-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --bbe-body: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --bbe-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-display: var(--bbe-display);
  --font-body: var(--bbe-body);
  --font-mono: var(--bbe-mono);
  --font: var(--bbe-body);
  --display: var(--bbe-display);
  --mono: var(--bbe-mono);
}

body {
  font-family: var(--bbe-body) !important;
  background:
    radial-gradient(circle at 16% 4%, oklch(0.48 0.12 165 / 0.22), transparent 32rem),
    radial-gradient(circle at 78% 10%, oklch(0.48 0.12 218 / 0.18), transparent 34rem),
    linear-gradient(180deg, var(--bbe-bg), var(--bbe-bg-deep) 72%) !important;
  color: var(--bbe-ink);
}

body::before {
  background-size: 72px 72px !important;
}

nav {
  width: min(1380px, calc(100% - 28px)) !important;
  margin-top: 8px !important;
  border-color: var(--bbe-line) !important;
  background: oklch(0.105 0.026 228 / 0.72) !important;
  backdrop-filter: blur(20px) saturate(1.25) !important;
  box-shadow: 0 18px 60px oklch(0.03 0.02 232 / 0.42) !important;
}

nav .container,
.nav-inner {
  max-width: none !important;
  padding: 10px 14px 10px 20px !important;
}

.brand,
.logo {
  font-family: var(--bbe-display) !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
}

.brand img,
.logo img {
  width: 34px !important;
  height: 34px !important;
  border-radius: 14px !important;
  border-color: oklch(0.81 0.17 159 / 0.38) !important;
  box-shadow: 0 0 28px oklch(0.76 0.16 170 / 0.24), inset 0 1px 0 oklch(0.92 0.02 160 / 0.12) !important;
}

.nav-links {
  font-family: var(--bbe-mono) !important;
  gap: 4px !important;
}

.nav-links a {
  padding: 9px 12px !important;
}

h1,
h2,
h3 {
  font-family: var(--bbe-display) !important;
  text-wrap: balance;
}

p,
.lede,
.hero p {
  font-family: var(--bbe-body) !important;
}

.hero {
  padding-top: clamp(58px, 8vw, 104px) !important;
}

.hero h1 {
  color: oklch(0.985 0.008 150) !important;
  font-weight: 800 !important;
}

.hero h1 .dim {
  color: oklch(0.74 0.07 178) !important;
  font-weight: 700 !important;
}

.hero p,
.lede {
  color: var(--bbe-soft) !important;
}

.btn,
.card-link {
  font-family: var(--bbe-mono) !important;
  transition: transform .32s cubic-bezier(0.32, 0.72, 0, 1), background .32s cubic-bezier(0.32, 0.72, 0, 1), border-color .32s cubic-bezier(0.32, 0.72, 0, 1) !important;
}

.btn:hover,
.card-link:hover {
  transform: translateY(-2px);
}

.btn:active,
.card-link:active {
  transform: translateY(0) scale(.985);
}

footer {
  font-family: var(--bbe-mono) !important;
}

pre,
code {
  max-width: 100%;
}

pre {
  overflow-x: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

code {
  overflow-wrap: anywhere;
}

@media (max-width: 900px) {
  nav {
    width: min(100% - 20px, 1380px) !important;
    border-radius: 28px !important;
  }

  nav .container,
  .nav-inner {
    display: grid !important;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: center !important;
    padding: 12px !important;
  }

  .hero-card {
    order: initial !important;
  }
}