@font-face {
  font-family: 'Big Shoulders Display';
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
  src: url('fonts/big-shoulders-display-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('fonts/ibm-plex-sans-latin.woff2') format('woff2');
}

html, body {
  scrollbar-width: none;
  -ms-overflow-style: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

* { scrollbar-width: none; }
*::-webkit-scrollbar { display: none; width: 0; height: 0; }

.allow-select {
  user-select: text;
  -webkit-user-select: text;
}

.brand.allow-select, .brand-inline.allow-select {
  padding: 4px 6px;
  margin: -4px -6px;
}

.brand.allow-select::after, .brand-inline.allow-select::after { left: calc(100% - 1px); }

html.blob-cursor:has(.allow-select:hover) #xeno-blob.blob--hover {
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
}

[data-font-reveal] { transition: opacity .18s ease; }
html[data-fonts="loading"] [data-font-reveal] { opacity: 0; visibility: hidden; }

.scroll-hint {
  position: fixed;
  left: var(--page-gutter, 3.5rem);
  bottom: max(32px, env(safe-area-inset-bottom));
  z-index: 30;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border: 0;
  padding: 8px 0;
  background: none;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  text-shadow: var(--label-shadow, none);
  transition: color .2s ease, opacity .25s ease, visibility .25s;
}

.scroll-hint svg {
  width: 12px;
  height: 19px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.2;
  animation: scroll-nudge 2.8s ease-in-out infinite;
}

.scroll-hint:hover, .scroll-hint:focus-visible { color: var(--accent); }
.scroll-hint.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.scroll-hint:focus-visible, .brand:focus-visible { outline: 1px solid var(--accent); outline-offset: 6px; }

@keyframes scroll-nudge {
  0%, 60%, 100% { transform: translateY(0); }
  75% { transform: translateY(4px); }
}

@media (prefers-reduced-motion: reduce) {
  [data-font-reveal], .scroll-hint { transition: none; }
  .scroll-hint svg { animation: none; }
}