@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('/brand/fonts/outfit-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url('/brand/fonts/outfit-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url('/brand/fonts/outfit-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url('/brand/fonts/outfit-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url('/brand/fonts/outfit-800.woff2') format('woff2');
}
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-display: swap;
  font-weight: 900;
  src: url('/brand/fonts/outfit-900.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('/brand/fonts/playfair-display-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url('/brand/fonts/playfair-display-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url('/brand/fonts/playfair-display-700.woff2') format('woff2');
}

:root {
  --ibby-purple: #5a3d73;
  --ibby-purple-deep: #1e0b36;
  --ibby-emerald: #0a4e35;
  --ibby-gold: #b48d1d;
  --ibby-paper: #faf9f8;
  --ibby-panel: #fffdfa;
  --ibby-ink: #1c1824;
  --ibby-muted: #6d6670;
  --ibby-line: rgba(90, 61, 115, .17);
  --ibby-shadow: 0 18px 54px rgba(30, 11, 54, .11);
  --ibby-font-body: 'Outfit', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ibby-font-display: 'Playfair Display', Georgia, serif;
}

body,
button,
input,
select,
textarea {
  font-family: var(--ibby-font-body);
}

[hidden] {
  display: none !important;
}

h1,
h2,
h3,
.ibby-display {
  font-family: var(--ibby-font-display);
}

.ibby-logo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ibby-brand-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--ibby-purple-deep);
  text-decoration: none;
}

.ibby-brand-frame {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  overflow: hidden;
}

.ibby-brand-copy {
  min-width: 0;
}