@font-face {
  font-family: "Figtree";
  src: url("/assets/fonts/Figtree-Variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
}

:root {
  --ih-ink: #151129;
  --ih-ink-2: #241b3d;
  --ih-ink-soft: #433d57;
  --ih-bone: #fbf8f3;
  --ih-paper: #f3ecf5;
  --ih-card: #ffffff;
  --ih-muted: #655f73;
  --ih-faint: #8a8394;
  --ih-violet: #6723a2;
  --ih-violet-hover: #54188d;
  --ih-violet-tint: #f2e8f7;
  --ih-dot: #f47d6b;
  --ih-font: "Figtree", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --ink: var(--ih-ink);
  --ink-2: var(--ih-ink-2);
  --ink-soft: var(--ih-ink-soft);
  --body: var(--ih-ink-soft);
  --muted: var(--ih-muted);
  --faint: var(--ih-faint);
  --paper: var(--ih-bone);
  --paper-2: var(--ih-paper);
  --bone: var(--ih-bone);
  --surface: var(--ih-card);
  --card: var(--ih-card);
  --violet: #6723a2;
  --violet-2: #7d2fad;
  --indigo: #3a177d;
  --mauve: #9d2f9a;
  --magenta: #b72b83;
  --rose: #db438f;
  --pink: #db438f;
  --coral: #f47d6b;
  --apricot: #ffb074;
  --gradient: linear-gradient(128deg, #3a177d 0%, #6723a2 32%, #b72b83 70%, #f47d6b 100%);
  --gradient-soft: var(--gradient);
  --brand-gradient: var(--gradient);
  --brand-gradient-text: linear-gradient(100deg, #3a177d 0%, #8d2aa4 52%, #db438f 100%);
  --font: var(--ih-font);
  --font-display: var(--ih-font);
}

html,
body,
button,
input,
select,
textarea {
  font-family: var(--ih-font) !important;
}

.ih-brand,
.brand {
  gap: 0;
}

.ih-brand__lockup,
.brand-lockup {
  display: block;
  width: clamp(154px, 13vw, 188px);
  height: auto;
}

.ih-nav__links a::after {
  background: var(--gradient);
}

.ih-btn--accent {
  border-color: var(--ih-ink) !important;
  background: var(--ih-ink) !important;
}

.ih-btn--accent:hover {
  border-color: #2a2047 !important;
  background: #2a2047 !important;
}

.btn--primary,
.button-primary {
  background: var(--gradient) !important;
  border-color: transparent !important;
}

.heading-gradient,
.grad-text {
  background: var(--brand-gradient-text) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

.site-header,
.ih-nav {
  background: rgba(251, 248, 243, 0.9);
}

@media (max-width: 700px) {
  .ih-brand__lockup,
  .brand-lockup {
    width: 154px;
  }
}