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

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

* { box-sizing: border-box; }
html { color-scheme: light; }

body {
  margin: 0;
  min-height: 100svh;
  padding: clamp(28px, 7vw, 100px);
  padding-bottom: 100px;
  display: grid;
  align-items: center;
  background: #f1efe7;
  color: #494b46;
  font-family: "IBM Plex Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  -webkit-font-smoothing: antialiased;
}

main {
  max-width: 1100px;
  width: 100%;
  margin: auto;
}

.layout { max-width: 920px; }

h1 {
  color: #242b24;
  font-size: clamp(48px, 7.5vw, 94px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -.075em;
  margin: 0 0 40px;
}

h1 span { display: block; }

p {
  max-width: 760px;
  margin: 18px 0;
  font-size: clamp(16px, 1.8vw, 19px);
  line-height: 1.9;
  text-wrap: pretty;
}

.monogram {
  color: #73836a;
  font: 16px/1.25 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  letter-spacing: 0;
  white-space: pre;
  margin: 0 0 52px;
  user-select: none;
}

.rule {
  height: 1px;
  background: #d5d8ca;
  width: 45px;
  margin-top: 60px;
}

.mboa { --brand: #7401cf; }
.workos { --brand: #6363f1; }
.float { --brand: #2b59ff; }
.shopify { --brand: #95bf46; }
.boltmade { --brand: #ef4136; }

.company {
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  padding: 0 .15em;
  color: #fff;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
  background-image: linear-gradient(var(--brand), var(--brand));
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% 100%;
  transition: background-size .22s ease, color .22s ease;
}

.company:hover,
.company:focus-visible {
  background-size: 100% .18em;
  color: #494b46;
  text-shadow: none;
}

.company:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 4px;
}

::selection {
  background: #b5c6d9;
  color: #14171d;
}

@media (max-width: 760px) {
  .monogram { margin-bottom: 36px; }
  .rule { margin-top: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .company { transition: none; }
}