@font-face {
  font-family: "Lie To Me";
  src: url("/public/fonts/lie-to-me.otf") format("opentype");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

:root {
  --site-paper: #ffffff;
  --site-soft-panel: #f7f7f5;
  --site-ink: #0a0a0a;
  --site-text: #222222;
  --site-muted: #6c6c6c;
  --site-line: #e5e5e5;
  --site-lime: #d0ffa4;
  --site-sky: #83e7ff;
  --site-night: #000181;
  --site-blue: #006ee9;
  --site-purple-bg: #f3e5ff;
  --site-purple-ink: #6600cc;
  --site-blue-bg: #e5f0ff;
  --site-blue-ink: #0055b8;
  --site-lime-bg: #e8ffd1;
  --site-lime-ink: #88b820;
  --site-cyan-bg: #e8faff;
  --site-cyan-ink: #29ccee;
  --site-font: "Inter Display", "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --site-script: "Lie To Me", "Bradley Hand", "Segoe Print", "Comic Sans MS", cursive;
  --site-weight-regular: 400;
  --site-weight-medium: 500;
  --site-weight-semibold: 600;
  --site-script-tracking: 0em;
  --site-script-leading: 1;
  --site-label-size: 0.75rem;
  --site-label-weight: var(--site-weight-medium);
  --site-label-tracking: 0.1em;
  --site-label-leading: 1.2;
  --site-body-size: 1rem;
  --site-body-leading: 1.5;
  --site-action-size: 1rem;
  --site-action-weight: var(--site-weight-semibold);
  --site-action-tracking: -0.02em;
  --site-action-leading: 1.2;
  --site-section-title-size: 3.375rem;
  --site-section-title-weight: var(--site-weight-regular);
  --site-section-title-tracking: -0.04em;
  --site-section-title-leading: 1;
  --site-section-subtitle-size: 1.125rem;
  --site-section-subtitle-weight: var(--site-weight-regular);
  --site-section-subtitle-tracking: -0.02em;
  --site-section-subtitle-leading: 1.4;
  --site-section-title-mobile-size: clamp(2.45rem, 12vw, var(--site-section-title-size));
  --site-card-title-size: 1.5rem;
  --site-card-title-weight: var(--site-weight-semibold);
  --site-card-title-tracking: -0.02em;
  --site-card-title-leading: 1.2;
  --site-max: 1280px;
  --site-inline: clamp(24px, 5.56vw, 80px);
  --site-section-block: clamp(64px, 5.56vw, 80px);
  --site-radius: 12px;
  --site-shadow: 0 12px 30px rgb(10 10 10 / 8%);
  --site-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

.page-section {
  position: relative;
  font-family: var(--site-font);
}

html {
  font-kerning: normal;
}

.section-container {
  width: min(var(--site-max), calc(100% - (var(--site-inline) * 2)));
  margin-inline: auto;
}

.section-label {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  margin: 0;
  padding: 4px 10px;
  border: 1px solid var(--site-blue);
  border-radius: 999px;
  color: var(--site-blue);
  font-family: var(--site-font);
  font-size: var(--site-label-size);
  font-weight: var(--site-label-weight);
  letter-spacing: var(--site-label-tracking);
  line-height: var(--site-label-leading);
  text-transform: uppercase;
}

.script-emphasis {
  font-family: var(--site-script);
  font-size: 1.06em;
  font-weight: var(--site-weight-regular);
  letter-spacing: var(--site-script-tracking);
  line-height: var(--site-script-leading);
}

[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 560ms var(--site-ease-out), transform 560ms var(--site-ease-out);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

:is(a, button):focus-visible {
  outline: 3px solid var(--site-blue);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal].is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
}