@import url(https://use.typekit.net/bdx2zst.css);

/* root design properties */
:root {
  /* font tokens */
  --font-family-base: 'proxima-nova', /* mac */ -apple-system, BlinkMacSystemFont, /* win */ 'Segoe WPC', 'Segoe UI',
    /* mobile */ 'Roboto', /* nix */ 'Oxygen', 'Ubuntu', 'Cantarell', /* FFOS */ 'Fira Sans', /* 'Droid */ 'Droid Sans',
    /* Boring */ 'Helvetica Neue', sans-serif;
  --font-family-heading: 'proxima-nova-condensed', 'proxima-nova', /* mac */ -apple-system, BlinkMacSystemFont,
    /* win */ 'Segoe WPC', 'Segoe UI', /* mobile */ 'Roboto', /* nix */ 'Oxygen', 'Ubuntu', 'Cantarell',
    /* FFOS */ 'Fira Sans', /* 'Droid */ 'Droid Sans', /* Boring */ 'Helvetica Neue', sans-serif;
  --font-family-mono: SFMono-Regular, Menlo, Monaco, Consolas, /* FFOS */ 'Fira Mono', /* 'Droid */ 'Droid Sans Mono',
    /* Boring */ 'Courier New', monospace;
  --font-size-base: 16px;
  --font-line-height-base: 1.5;
  --font-line-height-heading: 1.1;
  --font-weight-base: 400;
  --font-weight-bold: 700;

  /* modular scale tokens - https://docs.google.com/spreadsheets/d/1hX1n-Z9jlRxA6zbIf2z8VYe56AYGVC_M2xTw9SNGwyc/edit#gid=0 */
  /* --size-scale: 1.333;
  --size--5: calc(pow(var(--size-scale), -5) * 1rem);
  --size--4: calc(pow(var(--size-scale), -4) * 1rem);
  --size--3: calc(pow(var(--size-scale), -3) * 1rem);
  --size--2: calc(pow(var(--size-scale), -2) * 1rem);
  --size--1: calc(pow(var(--size-scale), -1) * 1rem);
  --size-0: 1rem;
  --size-1: calc(pow(var(--size-scale), 1) * 1rem);
  --size-2: calc(pow(var(--size-scale), 2) * 1rem);
  --size-3: calc(pow(var(--size-scale), 3) * 1rem);
  --size-4: calc(pow(var(--size-scale), 4) * 1rem);
  --size-5: calc(pow(var(--size-scale), 5) * 1rem);
  --size-6: calc(pow(var(--size-scale), 6) * 1rem);
  --size-7: calc(pow(var(--size-scale), 7) * 1rem);
  --size-8: calc(pow(var(--size-scale), 8) * 1rem);
  --size-9: calc(pow(var(--size-scale), 9) * 1rem);
  --size-10: calc(pow(var(--size-scale), 10) * 1rem);
  --size-11: calc(pow(var(--size-scale), 11) * 1rem);
  --size-12: calc(pow(var(--size-scale), 12) * 1rem);
  --size-13: calc(pow(var(--size-scale), 13) * 1rem);
  --size-14: calc(pow(var(--size-scale), 14) * 1rem);
  --size-15: calc(pow(var(--size-scale), 15) * 1rem); */

  --size--5: 0.24rem;
  --size--4: 0.32rem;
  --size--3: 0.42rem;
  --size--2: 0.56rem;
  --size--1: 0.75rem;
  --size-0: 1rem;
  --size-1: 1.33rem;
  --size-2: 1.78rem;
  --size-3: 2.37rem;
  --size-4: 3.16rem;
  --size-5: 4.21rem;
  --size-6: 5.61rem;
  --size-7: 7.48rem;
  --size-8: 9.97rem;
  --size-9: 13.29rem;
  --size-10: 17.71rem;
  --size-11: 23.61rem;
  --size-12: 31.47rem;
  --size-13: 41.96rem;
  --size-14: 55.93rem;
  --size-15: 74.55rem;
  --size-16: 99.38rem;
  --size-17: 132.47rem;
  --size-18: 176.58rem;
  --size-19: 235.38rem;
  --size-20: 313.76rem;

  /* spacing tokens */
  --spacing-xs: var(--size--5);
  --spacing-sm: var(--size--3);
  --spacing-md: var(--size--1);
  --spacing-lg: var(--size-0);
  --spacing-xl: var(--size-1);

  /* type tokens */
  --type-h1-size: var(--size-5);
  --type-h2-size: var(--size-4);
  --type-h3-size: var(--size-3);
  --type-h4-size: var(--size-2);
  --type-h5-size: var(--size-1);
  --type-h6-size: var(--size-0);
  --type-body-xl-size: var(--size-2);
  --type-body-lg-size: var(--size-1);
  --type-body-sm-size: var(--size--1);
  --type-overline-size: var(--size--2);
  --type-small-size: 0.75em; /* based on --size--1 */

  /* elevation (z-index and shadowing) */
  --elevation-behind: -1;
  --elevation-inline: 1;
  --elevation-sticky: 1000;
  --elevation-cover: 1100;
  --elevation-dialog: 1200;
  --elevation-modal: 1300;
  --elevation-popover: 1400;

  /* roundness tokens */
  --roundness-none: 0;
  --roundness-sm: var(--size--5);
  --roundness-md: var(--size--2);
  --roundness-lg: var(--size-0);
  --roundness-xl: var(--size-20);

  /* raw color tokens */
  --color-raw-blue-05: rgb(2, 17, 38);
  --color-raw-blue-10: rgb(4, 28, 56);
  --color-raw-blue-20: rgb(10, 49, 91);
  --color-raw-blue-30: rgb(19, 71, 128);
  --color-raw-blue-40: rgb(28, 95, 168);
  --color-raw-blue-50: rgb(37, 120, 210);
  --color-raw-blue-60: rgb(62, 146, 247);
  --color-raw-blue-70: rgb(127, 172, 249);
  --color-raw-blue-80: rgb(174, 199, 251);
  --color-raw-blue-90: rgb(216, 227, 253);
  --color-raw-blue-95: rgb(236, 241, 254);

  --color-raw-red-05: rgb(42, 2, 3);
  --color-raw-red-10: rgb(62, 5, 6);
  --color-raw-red-20: rgb(100, 12, 15);
  --color-raw-red-30: rgb(141, 21, 25);
  --color-raw-red-40: rgb(184, 31, 36);
  --color-raw-red-50: rgb(229, 41, 47);
  --color-raw-red-60: rgb(245, 94, 96);
  --color-raw-red-70: rgb(246, 141, 143);
  --color-raw-red-80: rgb(249, 181, 182);
  --color-raw-red-90: rgb(251, 219, 219);
  --color-raw-red-95: rgb(253, 237, 237);

  --color-raw-neutral-05: rgb(14, 17, 21);
  --color-raw-neutral-10: rgb(24, 28, 33);
  --color-raw-neutral-20: rgb(43, 49, 57);
  --color-raw-neutral-30: rgb(63, 71, 82);
  --color-raw-neutral-40: rgb(84, 95, 109);
  --color-raw-neutral-50: rgb(107, 120, 137);
  --color-raw-neutral-60: rgb(130, 146, 167);
  --color-raw-neutral-70: rgb(157, 173, 193);
  --color-raw-neutral-80: rgb(189, 199, 213);
  --color-raw-neutral-90: rgb(222, 227, 234);
  --color-raw-neutral-95: rgb(239, 241, 244);

  /* semantic color tokens */
  --color-scroll-foreground: var(--color-raw-neutral-60);
  --color-scroll-background: var(--color-raw-neutral-90);

  --color-primary-foreground: var(--color-raw-neutral-10);
  --color-primary-background: #fff;

  --color-focus-foreground: var(--color-raw-blue-50);

  --color-link-foreground: var(--color-raw-blue-50);
  --color-link-hover-foreground: var(--color-raw-blue-40);
  --color-link-visited-foreground: color-mix(in srgb, var(--color-raw-blue-50) 65%, var(--color-raw-red-50));

  --color-action-foreground: var(--color-raw-blue-95);
  --color-action-background: var(--color-raw-blue-60);
  --color-action-hover-foreground: var(--color-raw-blue-95);
  --color-action-hover-background: var(--color-raw-blue-70);

  --color-secondary-foreground: var(--color-raw-neutral-10);
  --color-secondary-background: var(--color-raw-neutral-80);

  --color-footer-foreground: var(--color-raw-neutral-70);
  --color-footer-background: var(--color-raw-neutral-10);

  --color-elevation-shadow: rgba(0, 0, 0, 0.2);

  --color-hero-background: var(--color-raw-blue-95);
  --color-hero-fade-background: #fff;

  --color-tag-foreground: var(--color-raw-blue-40);
  --color-tag-background: var(--color-raw-neutral-95);
}

/* semantic color tokens - dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --color-scroll-foreground: var(--color-raw-neutral-30);
    --color-scroll-background: var(--color-raw-neutral-05);

    --color-primary-foreground: var(--color-raw-neutral-90);
    --color-primary-background: var(--color-raw-neutral-10);

    --color-focus-foreground: var(--color-raw-blue-50);

    --color-link-foreground: var(--color-raw-blue-60);
    --color-link-hover-foreground: var(--color-raw-blue-50);
    --color-link-visited-foreground: color-mix(in srgb, var(--color-raw-blue-60) 65%, var(--color-raw-red-60));

    --color-action-foreground: var(--color-raw-blue-60);
    --color-action-background: var(--color-raw-blue-10);
    --color-action-hover-foreground: var(--color-raw-blue-60);
    --color-action-hover-background: var(--color-raw-blue-20);

    --color-secondary-foreground: var(--color-raw-neutral-90);
    --color-secondary-background: var(--color-raw-neutral-05);

    --color-footer-foreground: var(--color-raw-neutral-70);
    --color-footer-background: #000;

    --color-elevation-shadow: rgba(0, 0, 0, 0.6);

    --color-hero-background: var(--color-raw-blue-05);
    --color-hero-fade-background: var(--color-raw-blue-10);

    --color-tag-foreground: var(--color-raw-blue-60);
    --color-tag-background: var(--color-raw-neutral-05);
  }
}

/* baseline styles */

:not(:defined) {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

[hidden] {
  display: none !important;
}

html {
  box-sizing: border-box;
  font-size: var(--font-size-base);
  line-height: var(--font-line-height-base);
  scroll-behavior: smooth;
  text-size-adjust: 100%;
  scrollbar-color: var(--color-scroll-foreground) var(--color-scroll-background);
}

html *,
html *::before,
html *::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  font-family: var(--font-family-base);
  /* scroll-snap-type: y proximity; */
  background-color: var(--color-primary-background);
  color: var(--color-primary-foreground);
}

:focus {
  outline: 1px solid var(--color-focus-foreground);
  outline-offset: 1px;
}

img {
  height: auto;
}

/* raw html styles */

/* block type styles */

figure {
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-block-start: 0;
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-bold);
  line-height: var(--font-line-height-heading);
}

h1 {
  font-size: var(--type-h1-size);
  margin-block-end: var(--spacing-xl);
}

h2 {
  font-size: var(--type-h2-size);
  margin-block-end: var(--spacing-xl);
}

h3 {
  font-size: var(--type-h3-size);
  margin-block-end: var(--spacing-lg);
}

h4 {
  font-size: var(--type-h4-size);
  margin-block-end: var(--spacing-lg);
}

h5 {
  font-size: var(--type-h5-size);
  margin-block-end: var(--spacing-lg);
}

h6 {
  font-size: var(--type-h6-size);
  margin-block-end: var(--spacing-md);
}

p,
ul {
  margin-block-start: 0;
  margin-block-end: var(--spacing-md);
}

/* inline styles */

a {
  color: var(--color-link-foreground);
}
a:visited {
  color: var(--color-link-visited-foreground);
}
a:hover {
  color: var(--color-link-hover-foreground);
}

small {
  font-size: var(--type-small-size);
}

/* code styles */

code,
kbd,
pre,
samp {
  font-family: var(--font-family-mono);
  font-size: 1em;
}

kbd,
code,
pre {
  font-size: var(--type-small-size);
}

code {
  color: #e83e8c;
  word-wrap: break-word;
}

pre code {
  font-size: inherit;
  color: inherit;
  word-break: normal;
}

kbd {
  padding: 0.2rem 0.4rem;
  color: #fff;
  background-color: #212529;
}

kbd kbd {
  padding: 0;
  font-size: 1em;
  font-weight: 700;
}

/* class-based pattern styles */

.section {
  content-visibility: auto;
  contain-intrinsic-block-size: 100vh;
}
.section--hero {
  height: 100vh;
  box-shadow: inset 0 -30px 30px -30px var(--color-elevation-shadow);
  padding-block: 0;
  background-color: var(--color-hero-background);
  background-image: linear-gradient(180deg, var(--color-hero-fade-background) 0%, var(--color-hero-background) 100%);
}

.avatar {
  --avatar-size: var(--size-1);
  --avatar-name-size: var(--type-h5-size);
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  vertical-align: middle;
}
.avatar__image {
  width: var(--avatar-size);
  aspect-ratio: 1;
  object-fit: scale-down;
  object-position: center;
}
.avatar__name {
  margin-inline-start: var(--spacing-sm);
  font-size: var(--avatar-name-size);
}

.avatar--lg {
  --avatar-size: var(--size-3);
}

.avatar--xl {
  --avatar-size: var(--size-5);
}

.skip-link {
  position: absolute;
  z-index: var(--elevation-popover);
}

.nav {
  list-style: none;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-md);
  margin-block: 0;
  padding-inline-start: 0;
}
.nav__item {
}
.nav__link {
  font-family: var(--font-family-heading);
  color: inherit;
  fill: currentColor;
  text-decoration: none;
}
.nav__link:hover,
.nav__link:focus {
  text-decoration: underline;
}

.header {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-sm);
  padding-inline: var(--spacing-md);
  padding-block: var(--spacing-sm);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.header--pinned {
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
  z-index: var(--elevation-sticky);
}
.header__group {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-sm);
}
.header__group--end {
  margin-inline-start: auto;
}
.header a {
  color: inherit;
}

.section--contact {
  padding-block: var(--size-3);
  background-color: var(--color-secondary-background);
}

.footer {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--spacing-md);
  padding-inline: var(--spacing-md);
  padding-block: var(--spacing-xl);
  background-color: var(--color-footer-background);
  color: var(--color-footer-foreground);
}
.footer__group {
  display: inline-flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--spacing-md);
}
.footer__group--end {
  margin-inline-start: auto;
}
.footer__brand {
}

.container {
  max-width: 900px;
  margin-inline: auto;
  padding-inline: var(--spacing-md);
}

/* utility classes */

/* natively focusable elements should use `.h-sr-only-focusable` */
/* .h-sr-only,
.h-sr-only-focusable:not(:focus):not(:active) {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.h-block {
  display: block;
}

.h-type-tight {
  line-height: 1;
} */