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

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/punfyre-brand/fonts/ibm-plex-sans-500.woff2") format("woff2");
}

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

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/punfyre-brand/fonts/ibm-plex-sans-700.woff2") format("woff2");
}

:root {
  --pf-meet-canvas: #f7f5f1;
  --pf-meet-surface: #fffdfc;
  --pf-meet-text: #1f1c18;
  --pf-meet-heading: #173e68;
  --pf-meet-muted: #625b53;
  --pf-meet-border: #d9d2c9;
  --pf-meet-primary: #154775;
  --pf-meet-primary-hover: #123e66;
  --pf-meet-coral: #e94e1b;
  --pf-meet-link: #c94a21;
  --pf-meet-soft: #eee9e2;
  --pf-meet-shadow: 0 10px 24px rgba(20, 39, 59, 0.1);
}

html.dark {
  --pf-meet-canvas: #101b2b;
  --pf-meet-surface: #17263a;
  --pf-meet-text: #f7f5f1;
  --pf-meet-heading: #f7f5f1;
  --pf-meet-muted: #c8beb4;
  --pf-meet-border: #33465d;
  --pf-meet-primary: #7898c2;
  --pf-meet-primary-hover: #91abd0;
  --pf-meet-coral: #f2855a;
  --pf-meet-link: #f39a78;
  --pf-meet-soft: #1d3048;
  --pf-meet-shadow: 0 10px 24px rgba(4, 10, 16, 0.34);
}

body:has(main.mx-auto.max-w-3xl),
body:has([class*="--booker-meta-width"]) {
  background: var(--pf-meet-canvas) !important;
  color: var(--pf-meet-text) !important;
  font-family: "IBM Plex Sans", sans-serif !important;
}

body:has(main.mx-auto.max-w-3xl)::before,
body:has([class*="--booker-meta-width"])::before {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: 3px;
  background: var(--pf-meet-coral);
  content: "";
}

body:has(main.mx-auto.max-w-3xl) :is(h1, h2, h3, p, a, button, input, select),
body:has([class*="--booker-meta-width"]) :is(h1, h2, h3, p, a, button, input, select) {
  font-family: "IBM Plex Sans", sans-serif !important;
}

body:has(main.mx-auto.max-w-3xl) main.mx-auto.max-w-3xl {
  max-width: 48rem;
  padding-block: clamp(3rem, 9vw, 6rem);
}

body:has(main.mx-auto.max-w-3xl) main.mx-auto.max-w-3xl::before {
  display: block;
  width: 9rem;
  height: 2.25rem;
  margin: 0 auto 2rem;
  background: url("/punfyre-brand/wordmark-brand.svg") center / contain no-repeat;
  content: "";
}

html.dark body:has(main.mx-auto.max-w-3xl) main.mx-auto.max-w-3xl::before {
  background-image: url("/punfyre-brand/wordmark-light.svg");
}

body:has(main.mx-auto.max-w-3xl) h1.text-3xl {
  color: var(--pf-meet-heading) !important;
  font-size: clamp(1.75rem, 5vw, 2.25rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.15;
}

body:has(main.mx-auto.max-w-3xl) .text-subtle {
  color: var(--pf-meet-muted) !important;
}

body:has(main.mx-auto.max-w-3xl) img[alt="Levi Van Zele"] {
  width: 7rem !important;
  height: 7rem !important;
  min-width: 7rem !important;
  min-height: 7rem !important;
  object-fit: cover;
  object-position: 50% 34%;
}

body:has(main.mx-auto.max-w-3xl) span:has(> img[alt="Levi Van Zele"]) {
  width: 7rem !important;
  height: 7rem !important;
  min-width: 7rem !important;
  min-height: 7rem !important;
  background: var(--pf-meet-soft) !important;
}

body:has(main.mx-auto.max-w-3xl) main > div:last-child {
  overflow: hidden;
  border-color: var(--pf-meet-border) !important;
  border-radius: 0.75rem !important;
  background: var(--pf-meet-surface);
  box-shadow: var(--pf-meet-shadow);
}

body:has(main.mx-auto.max-w-3xl) main > div:last-child > .group {
  border-color: var(--pf-meet-border) !important;
  background: var(--pf-meet-surface) !important;
  transition: background-color 160ms ease;
}

body:has(main.mx-auto.max-w-3xl) main > div:last-child > .group:hover {
  background: var(--pf-meet-soft) !important;
}

body:has(main.mx-auto.max-w-3xl) main > div:last-child h2,
body:has(main.mx-auto.max-w-3xl) main > div:last-child h3,
body:has(main.mx-auto.max-w-3xl) main > div:last-child .text-emphasis {
  color: var(--pf-meet-heading) !important;
}

body:has(main.mx-auto.max-w-3xl) main a:focus-visible,
body:has([class*="--booker-meta-width"]) :is(a, button, input, select):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--pf-meet-coral) 72%, transparent) !important;
  outline-offset: 2px;
}

body:has(main.mx-auto.max-w-3xl) a.text-blue-500 {
  color: var(--pf-meet-link) !important;
}

body:has([class*="--booker-meta-width"]) main {
  padding: clamp(1rem, 3vw, 2rem);
}

body:has([class*="--booker-meta-width"]) [class*="--booker-meta-width"] {
  border-color: var(--pf-meet-border) !important;
  border-radius: 0.75rem !important;
  background: var(--pf-meet-surface) !important;
  box-shadow: var(--pf-meet-shadow);
}

body:has([class*="--booker-meta-width"]) .border-subtle,
body:has([class*="--booker-meta-width"]) .border-default {
  border-color: var(--pf-meet-border) !important;
}

body:has([class*="--booker-meta-width"]) .bg-default {
  background-color: var(--pf-meet-surface) !important;
}

body:has([class*="--booker-meta-width"]) :is(.text-emphasis, .text-default) {
  color: var(--pf-meet-text) !important;
}

body:has([class*="--booker-meta-width"]) .text-subtle {
  color: var(--pf-meet-muted) !important;
}

body:has([class*="--booker-meta-width"]) a[href="/levi-van-zele"] img {
  object-fit: cover;
  object-position: 50% 34%;
}

@media (max-width: 767px) {
  body:has(main.mx-auto.max-w-3xl) main.mx-auto.max-w-3xl {
    padding-block: 2.5rem;
  }

  body:has(main.mx-auto.max-w-3xl) main.mx-auto.max-w-3xl::before {
    width: 7.75rem;
    margin-bottom: 1.5rem;
  }

  body:has([class*="--booker-meta-width"]) main {
    align-items: stretch;
    padding: 0;
  }

  body:has([class*="--booker-meta-width"]) [class*="--booker-meta-width"] {
    border-right: 0;
    border-left: 0;
    border-radius: 0 !important;
    box-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  body:has(main.mx-auto.max-w-3xl) main > div:last-child > .group {
    transition: none;
  }
}