@charset "UTF-8";
* {
  margin: 0;
  padding: 0;
  list-style: none;
  outline: none;
  font-size: 1em;
  font-style: normal;
  box-sizing: border-box;
  text-decoration: none;
  color: inherit;
  border: none;
}

img {
  max-width: 100%;
  display: block;
}

input,
button,
textarea,
select {
  font: inherit;
  -webkit-appearance: none;
}

[type=button],
button {
  all: unset;
}

.light {
  color-scheme: light;
}

.dark {
  color-scheme: dark;
}

@media (max-width: 639px) {
  .hide-on-mobile {
    display: none !important;
  }
}

@media (min-width: 640px) and (max-width: 959px) {
  .hide-on-desktop {
    display: none !important;
  }
}
@media (min-width: 960px) {
  .hide-on-desktop {
    display: none !important;
  }
}

:root {
  color-scheme: light dark;
  --dark: light-dark(#333, #ddd);
  --light: light-dark(#ddd, #333);
}

.mvkb {
  --dark: light-dark(#333, #ddd);
  --light: light-dark(#ddd, #333);
}

.banana {
  --dark: light-dark(#33231f, #ffd149);
  --light: light-dark(#ffd149, #33231f);
}

.camo {
  --dark: light-dark(#393e42, #8e9295);
  --light: light-dark(#8e9295, #393e42);
}

.classic {
  --dark: light-dark(#3d3b3b, #d0cabf);
  --light: light-dark(#d0cabf, #3d3b3b);
}

.command {
  --dark: light-dark(#0e0e10, #902f26);
  --light: light-dark(#902f26, #0e0e10);
}

.diner {
  --dark: light-dark(#bc3b2f, #edb83f);
  --light: light-dark(#edb83f, #bc3b2f);
}

.elements {
  --dark: light-dark(#797b7a, #f1f0ea);
  --light: light-dark(#f1f0ea, #797b7a);
}

.eraser {
  --dark: light-dark(#222, #d98080);
  --light: light-dark(#d98080, #222);
}

.event-horizon {
  --dark: light-dark(#18191c, #9e999e);
  --light: light-dark(#9e999e, #18191c);
}

.supermassive {
  --dark: light-dark(#533b1b, #b1a56f);
  --light: light-dark(#b1a56f, #533b1b);
}

.quasar {
  --dark: light-dark(#55301e, #c0916f);
  --light: light-dark(#c0916f, #55301e);
}

.expo {
  --dark: light-dark(#283130, #afb3ae);
  --light: light-dark(#afb3ae, #283130);
}

.fabrik {
  --dark: light-dark(#013b5c, #eee);
  --light: light-dark(#eee, #013b5c);
}

.for-the-roses {
  --dark: light-dark(#83414c, #e3d3b8);
  --light: light-dark(#e3d3b8, #83414c);
}

.freedom {
  --dark: light-dark(#0f3052, #f1f0ea);
  --light: light-dark(#f1f0ea, #0f3052);
}

.gridlock {
  --dark: light-dark(#111, #666);
  --light: light-dark(#666, #111);
}

.hi-viz {
  --dark: light-dark(#555, color(display-p3 0.925 1 0.05));
  --light: light-dark(color(display-p3 0.925 1 0.05), #333);
}

.ink {
  --dark: light-dark(#d76a81, #eee);
  --light: light-dark(#eee, #d76a81);
}

.radical {
  --dark: light-dark(#93714f, #f1ece1);
  --light: light-dark(#f1ece1, #93714f);
}

.scanner {
  --dark: light-dark(#222, #00b51a);
  --light: light-dark(#00b51a, #222);
}

.synth {
  --dark: light-dark(#373839, #9c9898);
  --light: light-dark(#9c9898, #373839);
}

.terminal {
  --dark: light-dark(#0f1014, #da8013);
  --light: light-dark(#da8013, #0f1014);
}

.turbo {
  --dark: light-dark(#191917, #a38b4f);
  --light: light-dark(#a38b4f, #191917);
}

.gakushu {
  --dark: light-dark(#836090, #ddd);
  --light: light-dark(#ddd, #836090);
}

:root {
  --unit-xsmall: 16px;
  --unit-small: 32px;
  --unit-medium: 48px;
  --unit-large: 64px;
  --max-width: 1440px;
  --safe-top: env(safe-area-inset-top);
  --safe-bottom: env(safe-area-inset-bottom);
  --project-header-offset: 140px;
}
@media (min-width: 640px) and (max-width: 959px) {
  :root {
    --unit-xsmall: 12px;
    --unit-small: 24px;
    --unit-medium: 36px;
    --unit-large: 48px;
    --project-header-offset: 190px;
  }
}
@media (max-width: 639px) {
  :root {
    --unit-xsmall: 8px;
    --unit-small: 16px;
    --unit-medium: 24px;
    --unit-large: 32px;
    --project-header-offset: 139px;
  }
}

@view-transition {
  navigation: auto;
}
html {
  scroll-behavior: smooth;
}

body {
  background: var(--light);
  color: var(--dark);
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  font-family: "proxima-soft", sans-serif;
  text-underline-offset: 2px;
  letter-spacing: -0.015em;
  scroll-behavior: smooth;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smooth: grayscale;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
@media (max-width: 639px) {
  body {
    max-width: 100%;
  }
}

header {
  display: flex;
  gap: var(--unit-small);
  align-items: center;
  padding: var(--unit-medium) var(--unit-large);
  color: var(--dark);
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
}
@media (min-width: 960px) {
  header {
    justify-content: space-between;
  }
}
@media (min-width: 640px) and (max-width: 959px) {
  header {
    gap: var(--unit-xsmall);
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 639px) {
  header {
    flex-wrap: wrap;
    gap: var(--unit-small);
  }
}
header h1 {
  display: flex;
  align-items: center;
  gap: var(--unit-small);
  flex-shrink: 0;
  flex-grow: 1;
  height: 32px;
}
@media (min-width: 640px) and (max-width: 959px) {
  header h1 {
    height: 32px;
  }
}
@media (max-width: 639px) {
  header h1 {
    order: 1;
    width: 100%;
    justify-content: space-between;
  }
  header h1 a:first-of-type {
    order: 2;
  }
  header h1 a:last-of-type {
    order: 1;
  }
  header h1 hr.vertical {
    display: none;
  }
}
header h1 a {
  display: flex;
  align-items: center;
  transition: opacity 0.1s linear;
}
header h1 a:hover, header h1 a:focus-visible {
  opacity: 0.75;
}
header h1 a:active {
  opacity: 0.5;
}
header h1 a img {
  -webkit-mask-image: url(../favicon.svg);
          mask-image: url(../favicon.svg);
  background-color: var(--dark);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: 24px;
          mask-size: 24px;
  width: 24px;
  height: 24px;
  padding-left: 24px;
  overflow: hidden;
}
header h1 a:has(.dotcom) span:not(.dotcom)::after {
  content: "™";
  position: absolute;
  right: -14px;
  top: 0.5px;
}
header h1 a span {
  font-family: "proxima-soft-extra-condensed", sans-serif;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: 36px;
  line-height: 40px;
  font-weight: 700;
  position: relative;
  transform: translateY(-1px);
}
header h1 a span small {
  font-weight: 500;
}
header h1 a span.dotcom {
  font-family: "proxima-soft-condensed", sans-serif;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: 16px;
  line-height: 24px;
  border: 2px solid var(--dark);
  border-radius: 99px;
  padding: 4.5px 8px 4.5px 6px;
  text-box-edge: cap alphabetic;
  text-box-trim: trim-both;
  margin-left: 16px;
  position: relative;
  transform: translateY(0);
}
@media (min-width: 640px) and (max-width: 959px) {
  header > hr.vertical {
    display: none;
  }
}
@media (max-width: 639px) {
  header > hr.vertical {
    display: none;
  }
}
header nav {
  flex-shrink: 1;
  min-width: 0;
}
@media (min-width: 640px) and (max-width: 959px) {
  header nav {
    min-width: -moz-max-content;
    min-width: max-content;
  }
}
@media (max-width: 639px) {
  header nav {
    width: 100%;
    order: 3;
  }
}
header nav ul {
  display: flex;
  gap: var(--unit-xsmall);
  font-family: "proxima-soft-condensed", sans-serif;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: 16px;
  line-height: 24px;
  min-width: 0;
}
@media (max-width: 639px) {
  header nav ul {
    width: 100%;
    height: 16px;
    justify-content: space-between;
    align-items: center;
  }
}
header nav ul li {
  position: relative;
  min-width: 0;
  max-width: 100%;
  opacity: 0.75;
}
@media (max-width: 639px) {
  header nav ul li:first-of-type {
    width: 20px;
    height: 20px;
    background-color: var(--dark);
    -webkit-mask-image: url(../svg/home.svg);
            mask-image: url(../svg/home.svg);
    -webkit-mask-position: center center;
            mask-position: center center;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: 20px;
            mask-size: 20px;
    text-indent: 150%;
    overflow: hidden;
  }
}
header nav ul li a {
  transition: opacity 0.1s linear;
  display: block;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
header nav ul li a:hover, header nav ul li a:focus-visible {
  opacity: 0.75;
}
header nav ul li a:active {
  opacity: 0.5;
}
header nav ul li.selected {
  opacity: 1;
}
header nav ul li.selected a::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--dark);
}
header form {
  display: flex;
  align-items: center;
  flex-shrink: 1;
  min-width: 0;
  border: 2px solid var(--dark);
  border-radius: 8px;
  height: 32px;
  overflow: hidden;
  opacity: 0.75;
  position: relative;
  padding-left: 20px;
}
@media (min-width: 640px) and (max-width: 959px) {
  header form {
    min-width: 0;
    max-width: 256px;
    grid-column: 2;
    grid-row: 1/span 2;
    justify-self: end;
    align-self: center;
  }
}
@media (max-width: 639px) {
  header form {
    order: 2;
    width: 100%;
  }
}
header form:hover, header form:focus-visible, header form:has([type=email]:focus-visible) {
  opacity: 1;
}
header form::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 20px;
  height: 20px;
  background-color: var(--dark);
  -webkit-mask-image: url(../svg/at.svg);
          mask-image: url(../svg/at.svg);
  -webkit-mask-position: center center;
          mask-position: center center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 20px;
          mask-size: 20px;
  opacity: 0.75;
}
header form [type=email] {
  background: none;
  flex-grow: 1;
  flex-shrink: 1;
  height: 24px;
  padding: 0 6px;
  width: 100%;
  margin: 2px;
}
header form [type=email]::-moz-placeholder {
  color: var(--dark);
  opacity: 0.5;
}
header form [type=email]::placeholder {
  color: var(--dark);
  opacity: 0.5;
}
header form [type=submit] {
  border-radius: 3px;
  background: var(--dark);
  color: var(--light);
  height: 20px;
  font-size: 12px;
  line-height: 18px;
  font-weight: 700;
  text-transform: uppercase;
  font-family: "proxima-soft-condensed", sans-serif;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  padding: 0 8px;
  margin: 4px;
  cursor: not-allowed;
  opacity: 0.5;
}
header form:has([type=email]:valid) [type=submit] {
  opacity: 1;
  transition: opacity 0.1s linear;
  cursor: pointer;
}
header form:has([type=email]:valid) [type=submit]:hover, header form:has([type=email]:valid) [type=submit]:focus-visible {
  opacity: 0.75;
}
header form:has([type=email]:valid) [type=submit]:active {
  opacity: 0.5;
}

hr.vertical {
  height: 32px;
  width: 4px;
  background: var(--dark);
  -webkit-mask-image: url(../svg/vertical.svg);
          mask-image: url(../svg/vertical.svg);
  -webkit-mask-position: center center;
          mask-position: center center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 4px;
          mask-size: 4px;
  opacity: 0.3333;
  flex-shrink: 0;
}

hr.horizontal {
  width: 100%;
  height: 1px;
  background: var(--dark);
  opacity: 0.15;
  scroll-margin-top: calc(var(--project-header-offset) - 1px);
}

footer {
  font-family: "proxima-soft-condensed", sans-serif;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  display: flex;
  gap: var(--unit-medium);
  width: 100%;
  max-width: var(--max-width);
  margin: auto;
  padding: 0 var(--unit-large) var(--unit-medium);
}
@media (min-width: 640px) and (max-width: 959px) {
  footer {
    gap: var(--unit-small);
  }
}
@media (max-width: 639px) {
  footer {
    gap: var(--unit-xsmall);
  }
}
footer a {
  transition: opacity 0.1s linear;
}
footer a:hover, footer a:focus-visible {
  opacity: 0.75;
}
footer a:active {
  opacity: 0.5;
}
footer ul {
  display: flex;
  gap: var(--unit-xsmall);
  flex-shrink: 1;
  min-width: 0;
}
@media (max-width: 639px) {
  footer ul {
    flex-grow: 1;
    justify-content: space-between;
  }
}
footer ul li {
  min-width: 0;
}
footer ul li a {
  position: relative;
  display: block;
  padding-left: 24px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
@media (max-width: 639px) {
  footer ul li a {
    width: 20px;
  }
}
footer ul li a::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background-color: var(--dark);
}
footer ul li a[href*=instagram]::after {
  -webkit-mask-image: url(../svg/instagram.svg);
          mask-image: url(../svg/instagram.svg);
}
footer ul li a[href*=discord]::after {
  -webkit-mask-image: url(../svg/discord.svg);
          mask-image: url(../svg/discord.svg);
}
footer ul li a[href*=bsky]::after {
  -webkit-mask-image: url(../svg/bluesky.svg);
          mask-image: url(../svg/bluesky.svg);
}
footer ul li a[href*=threads]::after {
  -webkit-mask-image: url(../svg/threads.svg);
          mask-image: url(../svg/threads.svg);
}
footer ul li a[href*=twitter]::after {
  -webkit-mask-image: url(../svg/twitter.svg);
          mask-image: url(../svg/twitter.svg);
}
footer ul li a[href*=rss]::after {
  -webkit-mask-image: url(../svg/rss.svg);
          mask-image: url(../svg/rss.svg);
}
footer p {
  display: flex;
  flex-grow: 1;
  flex-shrink: 0;
  align-items: center;
  gap: 4px;
}
footer p span {
  width: 20px;
  height: 20px;
  background-color: var(--dark);
  -webkit-mask-image: url(../svg/copyright.svg);
          mask-image: url(../svg/copyright.svg);
  text-indent: 150%;
  overflow: hidden;
}
footer p a {
  font-weight: 700;
}
@media (min-width: 640px) and (max-width: 959px) {
  footer p small {
    display: none;
  }
}
@media (max-width: 639px) {
  footer p small {
    display: none;
  }
}

@media (min-width: 960px) {
  .home {
    min-height: 100vh;
    min-height: 100svh;
  }
}
.home .grid {
  flex-grow: 1;
}
.home .grid .column {
  flex-grow: 0;
}
.home .grid .column .item {
  flex-grow: 1;
}
@media (min-width: 1440px) {
  .home .grid .column .item {
    flex-shrink: 0;
  }
}
.home .grid .row {
  flex-grow: 0;
}
@media (min-width: 640px) and (max-width: 959px) {
  .home .styled {
    display: block;
  }
}

@media (min-width: 960px) {
  .about-preview {
    gap: 0 !important;
  }
}
@media (min-width: 640px) and (max-width: 959px) {
  .about-preview {
    display: block !important;
  }
}
.about-preview .styled {
  container-type: initial;
}
@media (min-width: 960px) {
  .about-preview .styled {
    text-wrap: balance;
  }
  .about-preview .styled p {
    margin-bottom: 0;
    display: inline;
  }
}
@media (max-width: 639px) {
  .about-preview .styled {
    margin-top: 0 !important;
    padding-top: var(--unit-xsmall) !important;
  }
}
@media (min-width: 960px) {
  .about-preview :has(.badges) {
    order: 2;
    flex: 0 0 fit-content;
  }
}
@media (min-width: 640px) and (max-width: 959px) {
  .about-preview :has(.badges) {
    float: right;
    padding-top: calc(var(--unit-xsmall) + 8px);
  }
}
@media (max-width: 639px) {
  .about-preview :has(.badges) {
    order: 2;
    width: 100%;
  }
}
.about-preview .badges {
  display: flex;
  flex: 0 0 fit-content;
  justify-content: flex-start;
  gap: var(--unit-small);
  width: -moz-fit-content;
  width: fit-content;
}
@media (min-width: 640px) and (max-width: 959px) {
  .about-preview .badges {
    margin-left: var(--unit-small);
    transform: translateY(2px);
  }
}
@media (max-width: 639px) {
  .about-preview .badges {
    width: 100%;
    justify-content: space-between;
    padding: 4px var(--unit-small);
  }
}
.about-preview .badges li {
  text-indent: 150%;
  white-space: nowrap;
  overflow: hidden;
  height: 32px;
  background-color: var(--dark);
  -webkit-mask-position: center center;
          mask-position: center center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  margin: 0;
}
.about-preview .badges li.maxvoltar-keyboards {
  -webkit-mask-image: url(../svg/maxvoltar-keyboards.svg);
          mask-image: url(../svg/maxvoltar-keyboards.svg);
  aspect-ratio: 72.95/32.16;
}
.about-preview .badges li.belgium {
  -webkit-mask-image: url(../svg/belgium.svg);
          mask-image: url(../svg/belgium.svg);
  aspect-ratio: 35.92/32.23;
}
.about-preview .badges li.type-true {
  -webkit-mask-image: url(../svg/type-true.svg);
          mask-image: url(../svg/type-true.svg);
  aspect-ratio: 57.31/31.96;
}
.about-preview .badges li.est-2021 {
  -webkit-mask-image: url(../svg/2021.svg);
          mask-image: url(../svg/2021.svg);
  aspect-ratio: 26.01/31.57;
}

.item {
  border-radius: var(--unit-xsmall);
  overflow: hidden;
  color: var(--light);
  position: relative;
  display: flex;
  flex-direction: column;
  container-type: inline-size;
}
.item.polaroid {
  padding: var(--unit-xsmall);
  gap: var(--unit-xsmall);
  background: url(../paper.jpg), linear-gradient(to bottom, #ddd, #fff);
  background-size: 450px 450px, 100% 100%;
  background-blend-mode: multiply;
  border-radius: 2px;
  align-self: center;
  overflow: visible;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.1), 0 0 1px 1px rgba(255, 255, 255, 0.5) inset;
}
@supports (transform: rotate(random(-4.5deg, 4.5deg))) {
  .item.polaroid {
    transform: rotate(random(-4.5deg, 4.5deg));
  }
}
@media (prefers-color-scheme: dark) {
  .item.polaroid {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.5), 0 0 1px 1px rgb(255, 255, 255) inset;
  }
}
.item.polaroid .caption {
  font-family: "felt-tip-roman", sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 24px;
  text-align: center;
  color: #222;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  transform: translateY(-2px);
  padding: 0 var(--unit-xsmall);
}
.item.polaroid .caption a {
  text-decoration: underline;
  transition: opacity 0.1s linear;
}
.item.polaroid .caption a:hover, .item.polaroid .caption a:focus-visible {
  opacity: 0.75;
}
.item.polaroid .caption a:active {
  opacity: 0.5;
}
.item.polaroid:not(.caption) a:hover figure::after, .item.polaroid:not(.caption) a:focus-visible figure::after {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.25));
}
.item.polaroid figure {
  position: relative;
}
.item.polaroid figure::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 2px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) inset, 0 2px 8px rgba(0, 0, 0, 0.1) inset;
}
.item.polaroid figure img {
  border-radius: 2px;
}
.item:has(a):not(.polaroid) {
  transition: opacity 0.1s linear;
}
.item:has(a):not(.polaroid):hover, .item:has(a):not(.polaroid):focus-visible {
  opacity: 0.75;
}
.item:has(a):not(.polaroid):active {
  opacity: 0.5;
}
.item:not(.polaroid) a {
  display: flex;
  flex-grow: 1;
}
@media (prefers-color-scheme: dark) {
  .item:not(.polaroid) {
    outline: 1px solid rgba(0, 0, 0, 0.5);
  }
}
.item:not(.polaroid)::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(0, 0, 0, 0.15);
  z-index: 2;
  border-radius: var(--unit-xsmall);
  pointer-events: none;
  mix-blend-mode: plus-darker;
}
@media (prefers-color-scheme: dark) {
  .item:not(.polaroid)::after {
    border-color: rgba(255, 255, 255, 0.05);
    mix-blend-mode: plus-lighter;
  }
}
.item .overlay {
  position: absolute;
  inset: 0;
}
@media (max-width: 639px) {
  .grid div div div .item .overlay {
    display: none;
  }
}
@media (min-width: 640px) and (max-width: 959px) {
  .grid div div div .item .overlay {
    display: none;
  }
}

.item .top,
.item .bottom {
  left: 0;
  right: 0;
  position: absolute;
  padding: var(--unit-small);
  gap: var(--unit-xsmall);
  display: flex;
  flex-direction: column;
  z-index: 1;
}
@media (min-width: 960px) {
  .grid div:not(.item) div:not(.item) div:not(.item) .item .top,
  .grid div:not(.item) div:not(.item) div:not(.item) .item .bottom {
    padding: var(--unit-xsmall);
  }
}

.item .top:before,
.item .bottom:before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  z-index: -1;
}
.item .top {
  top: 0;
  padding-bottom: var(--unit-large);
}
@media (min-width: 960px) {
  .grid div:not(.item) div:not(.item) div:not(.item) .item .top {
    padding-bottom: var(--unit-small);
  }
}

.item .top:before {
  -webkit-mask-image: linear-gradient(to bottom, rgb(0, 0, 0), rgba(0, 0, 0, 0));
          mask-image: linear-gradient(to bottom, rgb(0, 0, 0), rgba(0, 0, 0, 0));
}
.item .bottom {
  bottom: 0;
  padding-top: var(--unit-large);
}
@media (min-width: 960px) {
  .grid div:not(.item) div:not(.item) div:not(.item) .item .bottom {
    padding-top: var(--unit-small);
  }
}

.item .bottom:before {
  -webkit-mask-image: linear-gradient(to top, rgb(0, 0, 0), rgba(0, 0, 0, 0));
          mask-image: linear-gradient(to top, rgb(0, 0, 0), rgba(0, 0, 0, 0));
}
.item .full {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 75%);
}
.item:not(.caption) {
  display: flex;
  flex-grow: 1;
  position: relative;
  width: 100%;
}
.item figure {
  flex-grow: 1;
  display: flex;
  overflow: hidden;
}
.item figure img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  flex-grow: 1;
  transition: transform 0.25s ease-out;
  background: var(--dark);
}
.item figure img.landscape {
  aspect-ratio: 16/9;
}
.item figure img.portrait {
  aspect-ratio: 9/16;
}
.item figure img.square {
  aspect-ratio: 1/1;
}
.item .line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--unit-xsmall);
  filter: drop-shadow(0 0 8px rgb(0, 0, 0));
}
.item .line:has(p) {
  margin-top: -8px;
}
@container (max-width: 480px) {
  .item .line:has(p) {
    display: none;
  }
}
.item .split {
  justify-content: space-between;
}
.item .center {
  justify-content: center;
  text-align: center;
}
.item .right {
  justify-content: flex-end;
  text-align: right;
}
.item h2 {
  font-family: "proxima-soft-extra-condensed", sans-serif;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: 36px;
  line-height: 40px;
  font-weight: 700;
  line-height: 28px;
  white-space: nowrap;
}
.item h2 small {
  font-weight: 500;
}
@media (min-width: 640px) and (max-width: 959px) {
  .item h2 {
    font-size: 28px;
    line-height: 36px;
    line-height: 20px;
  }
}
@media (max-width: 639px) {
  .item h2 {
    font-size: 20px;
    line-height: 28px;
    line-height: 16px;
  }
}
.grid div:not(.item) div:not(.item) .item h2 {
  font-size: 28px;
  line-height: 36px;
  line-height: 20px;
}
@media (min-width: 640px) and (max-width: 959px) {
  .grid div:not(.item) div:not(.item) .item h2 {
    font-size: 20px;
    line-height: 28px;
    line-height: 16px;
  }
}
@media (max-width: 639px) {
  .grid div:not(.item) div:not(.item) .item h2 {
    font-size: 16px;
    line-height: 24px;
    line-height: 12px;
  }
}

.grid div:not(.item) div:not(.item) div:not(.item) .item h2 {
  font-size: 20px;
  line-height: 28px;
  line-height: 16px;
}
@media (min-width: 640px) and (max-width: 959px) {
  .grid div:not(.item) div:not(.item) div:not(.item) .item h2 {
    font-size: 16px;
    line-height: 24px;
    line-height: 12px;
  }
}

@media (max-width: 639px) {
  .grid div:not(.item) div.column:not(.item) .item h2 {
    font-size: 20px;
    line-height: 28px;
    line-height: 16px;
  }
}

.item .primary + .secondary {
  margin-left: -8px;
}
@media (min-width: 640px) and (max-width: 959px) {
  .item .primary + .secondary {
    margin-left: -4px;
  }
}
@media (max-width: 639px) {
  .item .primary + .secondary {
    margin-left: -4px;
  }
}
.item span:not(.primary, .secondary) {
  display: flex;
  flex-direction: row;
  gap: var(--unit-xsmall);
}
.item .primary,
.item .secondary {
  font-size: 12px;
  line-height: 18px;
  font-weight: 700;
  text-transform: uppercase;
  font-family: "proxima-soft-condensed", sans-serif;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  padding: 2px 8px;
  border-radius: 99px;
  white-space: nowrap;
}
.item .primary {
  background-color: var(--light);
  color: var(--dark);
}
.item .secondary {
  background-color: var(--dark);
  color: var(--light);
}
.item p {
  text-wrap: balance;
}
@container (max-width: 320px) {
  .item p {
    display: none;
  }
}
.item.dark .top .line,
.item.dark .bottom .line {
  filter: drop-shadow(0 0 16px rgba(255, 255, 255, 0.75));
}
.item.dark .top:before,
.item.dark .bottom:before {
  background: rgba(255, 255, 255, 0.75);
}
.item.dark .full {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 50%);
}

.grid {
  display: flex;
  gap: var(--unit-small);
  flex-direction: column;
  flex-grow: 1;
  width: 100%;
  max-width: var(--max-width);
  margin: auto;
  padding: 0 var(--unit-small) var(--unit-medium);
  scroll-margin-top: var(--project-header-offset);
}
.grid .large {
  flex: 2 !important;
}
@media (max-width: 639px) {
  .grid .large {
    flex: 1 !important;
  }
}
.grid .horizontal + .row:has(.item),
.grid .horizontal + .column:has(.item),
.grid .horizontal + .item {
  margin-top: var(--unit-xsmall);
}
.grid .row:has(.item) + .horizontal,
.grid .column:has(.item) + .horizontal,
.grid .item + .horizontal {
  margin-top: var(--unit-xsmall);
}
@media (max-width: 639px) {
  .grid .stack .row:has(.item) + .styled,
  .grid .stack .column:has(.item) + .styled,
  .grid .stack .item + .styled {
    margin-top: var(--unit-xsmall);
  }
  .grid .stack .styled + .styled {
    padding-top: 0;
    margin-top: calc(var(--unit-xsmall) * -1);
  }
}

.row {
  display: flex;
  gap: var(--unit-small);
  flex-direction: row;
  flex: 1;
}
.row .item {
  flex: 1;
}
.row:has(.large) > .item:not(.large), .row:has(.large) > .column:not(.large), .row:has(.large) > .row:not(.large), .row:has(.large) > .styled:not(.large) {
  flex: 0 1 calc((100% - var(--unit-small) * 2) / 3);
  min-width: 0;
}
@media (max-width: 639px) {
  .row.stack {
    flex-direction: column;
  }
}

.column {
  display: flex;
  gap: var(--unit-small);
  flex-direction: column;
  flex: 1;
}
@media (max-width: 639px) {
  .column.swap {
    flex-direction: row;
  }
}
.column:has(.item) .styled {
  flex-grow: 0;
}

.hero-container {
  height: 100vh;
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 100;
  position: sticky;
  top: calc((100svh - var(--project-header-offset)) * -1);
  width: 100vw;
  background-color: var(--light);
}
@media (max-width: 639px) {
  .hero-container {
    height: 99.25vh;
    height: 99.25svh;
    top: calc((99.25svh - var(--project-header-offset)) * -1);
  }
}
.hero-container header,
.hero-container .subnav {
  filter: drop-shadow(0 0 8px rgb(0, 0, 0));
}
.hero-container hr.horizontal {
  opacity: 0.25;
}
.hero-container header {
  padding: var(--unit-medium) var(--unit-large);
  position: relative;
}
.hero-container header:after {
  bottom: -1px;
}
.hero-container .subnav {
  padding: var(--unit-medium) var(--unit-large);
  position: relative;
}
.hero-container .subnav:after {
  top: -1px;
}
.hero-container .hero {
  position: absolute;
  inset: 0;
  z-index: -100;
  display: flex;
}
.hero-container .hero img {
  flex-grow: 1;
  -o-object-fit: cover;
     object-fit: cover;
}
@media (orientation: portrait) {
  .hero-container .hero img.portrait {
    display: block;
  }
  .hero-container .hero img.landscape {
    display: none;
  }
}
@media (orientation: landscape) {
  .hero-container .hero img.landscape {
    display: block;
  }
  .hero-container .hero img.portrait {
    display: none;
  }
}
.hero-container .hero:after, .hero-container .hero:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 33%;
  min-height: 320px;
  background: rgb(0, 0, 0);
}
.hero-container .hero:before {
  top: 0;
  -webkit-mask-image: linear-gradient(to bottom, rgb(0, 0, 0), rgba(0, 0, 0, 0));
          mask-image: linear-gradient(to bottom, rgb(0, 0, 0), rgba(0, 0, 0, 0));
}
.hero-container .hero:after {
  bottom: 0;
  -webkit-mask-image: linear-gradient(to top, rgb(0, 0, 0), rgba(0, 0, 0, 0));
          mask-image: linear-gradient(to top, rgb(0, 0, 0), rgba(0, 0, 0, 0));
}
.hero-container.light .hero:before, .hero-container.light .hero:after {
  background: rgb(255, 255, 255);
}
.hero-container.light header,
.hero-container.light .subnav {
  filter: drop-shadow(0 0 16px rgb(255, 255, 255));
}
.hero-container + .grid {
  padding-top: var(--unit-small);
}

.subnav {
  display: flex;
  flex-direction: column;
  padding: var(--unit-xsmall) var(--unit-small);
  color: var(--dark);
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
}
@media (min-width: 960px) {
  .subnav {
    flex-direction: row;
    align-items: center;
    gap: var(--unit-small);
    align-items: center;
  }
}
@media (min-width: 640px) and (max-width: 959px) {
  .subnav {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    -moz-column-gap: var(--unit-small);
         column-gap: var(--unit-small);
    row-gap: var(--unit-xsmall);
  }
}
@media (max-width: 639px) {
  .subnav {
    -moz-column-gap: var(--unit-small);
         column-gap: var(--unit-small);
    row-gap: var(--unit-small);
    display: grid;
    grid-template-columns: 1fr max-content;
  }
}
@media (min-width: 960px) {
  .subnav .horizontal {
    display: none;
  }
}
@media (min-width: 640px) and (max-width: 959px) {
  .subnav .vertical {
    display: none;
  }
}
@media (max-width: 639px) {
  .subnav .vertical {
    display: none;
  }
}
.subnav h2 {
  font-size: 64px;
  line-height: 64px;
  font-family: "proxima-soft-extra-condensed", sans-serif;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-box-edge: cap alphabetic;
  text-box-trim: trim-both;
  padding: 1px 0;
}
@media (min-width: 640px) and (max-width: 959px) {
  .subnav h2 {
    flex-grow: 1;
  }
}
@media (max-width: 639px) {
  .subnav h2 {
    font-size: 48px;
    line-height: 48px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
}
.subnav h2 a {
  transition: opacity 0.1s linear;
}
.subnav h2 a:hover, .subnav h2 a:focus-visible {
  opacity: 0.75;
}
.subnav h2 a:active {
  opacity: 0.5;
}
.subnav h2 small {
  font-weight: 500;
}
.subnav ul {
  display: flex;
  gap: var(--unit-xsmall);
  align-items: center;
}
@media (min-width: 960px) {
  .subnav ul {
    flex-grow: 1;
    justify-content: flex-end;
    flex-shrink: 1;
    min-width: 0;
  }
}
@media (max-width: 639px) {
  .subnav ul {
    margin: 0 calc(var(--unit-large) * -1);
    padding: 0 var(--unit-large);
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    gap: var(--unit-small);
    width: calc(100% + var(--unit-large) * 2);
    -webkit-mask-image: linear-gradient(to right, transparent, black var(--unit-large), black calc(100vw - var(--unit-large)), transparent);
            mask-image: linear-gradient(to right, transparent, black var(--unit-large), black calc(100vw - var(--unit-large)), transparent);
    grid-row: 3/4;
    grid-column: 1/3;
  }
}
.subnav ul li {
  display: flex;
}
@media (min-width: 960px) {
  .subnav ul li {
    min-width: 0;
  }
}
.subnav ul li a {
  font-family: "proxima-soft-condensed", sans-serif;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  transition: opacity 0.1s linear;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.subnav ul li a:hover, .subnav ul li a:focus-visible {
  opacity: 0.75;
}
.subnav ul li a:active {
  opacity: 0.5;
}
.subnav ul li a[href="#"] {
  width: 20px;
  height: 20px;
  background-color: var(--dark);
  -webkit-mask-image: url(../svg/top.svg);
          mask-image: url(../svg/top.svg);
  overflow: hidden;
  flex-shrink: 0;
}
.subnav p {
  display: flex;
  flex-direction: row;
  gap: var(--unit-xsmall);
  align-items: center;
}
@media (max-width: 639px) {
  .subnav p {
    grid-column: 2/3;
    grid-row: 1/2;
  }
}
.subnav p span:not(.status) {
  font-family: "proxima-soft-condensed", sans-serif;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  overflow: hidden;
}
@media (max-width: 639px) {
  .subnav p span:not(.status) {
    display: none;
  }
}
.subnav p span.status {
  overflow: hidden;
  font-size: 12px;
  line-height: 18px;
  font-weight: 700;
  text-transform: uppercase;
  font-family: "proxima-soft-condensed", sans-serif;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 99px;
  white-space: nowrap;
  background-color: var(--dark);
  color: var(--light);
}
@media (min-width: 960px) {
  .subnav .horizontal {
    display: none;
  }
}
@media (min-width: 640px) and (max-width: 959px) {
  .subnav .horizontal {
    margin: var(--unit-xsmall) calc(var(--unit-small) * -1);
    width: calc(100% + var(--unit-small) * 2);
  }
}
@media (max-width: 639px) {
  .subnav .horizontal {
    margin: 0 calc(var(--unit-small) * -1);
    width: calc(100% + var(--unit-small) * 2);
    grid-column: 1/3;
    grid-row: 2/3;
  }
}

.styled {
  flex-grow: 1;
  flex-shrink: 1;
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--unit-xsmall) 0;
  color: var(--dark);
  container-type: inline-size;
}
.styled.center {
  justify-content: center;
}
.styled.placeholder {
  justify-content: center;
  align-items: center;
  text-align: center;
  opacity: 0.5;
}
.styled.bottom {
  justify-content: flex-end;
}
.styled > * {
  padding: 0 var(--unit-small);
  width: 100%;
}
.styled h3,
.styled h4,
.styled h5,
.styled p,
.styled ul,
.styled ol,
.styled .heading,
.styled dl {
  margin-bottom: calc(var(--unit-xsmall) * 1.5);
}
.styled h3,
.styled h4,
.styled h5 {
  text-wrap: balance;
}
.styled h3 small,
.styled h4 small,
.styled h5 small {
  font-weight: 500;
  opacity: 1;
  text-transform: none;
}
.styled h3 {
  font-size: 48px;
  line-height: 48px;
  font-family: "proxima-soft-condensed", sans-serif;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  text-transform: none;
}
@media (max-width: 639px) {
  .styled h3 {
    font-size: 36px;
    line-height: 40px;
  }
  .styled h3 small {
    font-size: 36px;
    line-height: 40px;
  }
}
.styled h4 {
  font-size: 28px;
  line-height: 36px;
  font-family: "proxima-soft-condensed", sans-serif;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.styled h4 + h3 {
  margin-top: calc(var(--unit-xsmall) * -1);
}
@media (max-width: 639px) {
  .styled h4 {
    font-size: 20px;
    line-height: 28px;
  }
  .styled h4 small {
    font-size: 20px;
    line-height: 28px;
  }
}
.styled h5 {
  font-size: 20px;
  line-height: 28px;
  text-transform: uppercase;
}
.styled h5 + h4 {
  margin-top: calc(var(--unit-xsmall) * -1);
}
@media (max-width: 639px) {
  .styled h5 {
    font-size: 16px;
    line-height: 24px;
  }
}
.styled img,
.styled svg {
  vertical-align: middle;
  height: auto;
}
.styled img.full,
.styled svg.full {
  width: 100%;
}
.styled img.medium,
.styled svg.medium {
  width: 75%;
}
.styled img.half,
.styled svg.half {
  width: 50%;
}
.styled img.small,
.styled svg.small {
  width: 25%;
}
.styled a {
  transition: opacity 0.1s linear;
  text-decoration: underline;
}
.styled a:hover, .styled a:focus-visible {
  opacity: 0.75;
}
.styled a:active {
  opacity: 0.5;
}
.styled a[href*="tim@maxvoltar.be"]:before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  padding-right: 2px;
  background-color: var(--dark);
  -webkit-mask-image: url(../svg/email.svg);
          mask-image: url(../svg/email.svg);
  -webkit-mask-size: 20px;
          mask-size: 20px;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  vertical-align: middle;
}
.styled a[href^="#"]:before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: var(--dark);
  -webkit-mask-image: url(../svg/goto.svg);
          mask-image: url(../svg/goto.svg);
  -webkit-mask-size: 20px;
          mask-size: 20px;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  vertical-align: middle;
}
.styled a.button {
  display: block !important;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  background-color: var(--dark);
  border-radius: 8px;
  color: var(--light);
  padding: 4px 8px !important;
  text-decoration: none;
  font-family: "proxima-soft-condensed", sans-serif;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-weight: 700;
}
.styled a.button:after {
  display: none !important;
}
.styled :not(:has(img, svg)) a:not([href*="tim@maxvoltar.be"]):not([href^="/"]):not([href^="#"]):after {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: var(--dark);
  -webkit-mask-image: url(../svg/external.svg);
          mask-image: url(../svg/external.svg);
  -webkit-mask-size: 20px;
          mask-size: 20px;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  vertical-align: middle;
}
.styled:has([href*="tim@maxvoltar.be"]) {
  text-wrap: pretty;
}
.styled strong {
  font-weight: 700;
  font-family: "proxima-soft-condensed", sans-serif;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: 0.9em;
}
.styled em {
  font-family: "proxima-soft-condensed", sans-serif;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: 0.9em;
}
.styled del {
  text-decoration: line-through;
  text-decoration-style: wavy;
  opacity: 0.5;
}
.styled code {
  font-size: 0.9em;
}
.styled small {
  opacity: 0.5;
  text-transform: none;
}
.styled p.intro {
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
  font-family: "proxima-soft-condensed", sans-serif;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  text-transform: none;
}
@media (min-width: 960px) {
  .styled p.intro {
    font-size: 28px;
    line-height: 36px;
  }
  .styled p.intro a[href*="tim@maxvoltar.be"]:before {
    width: 30px;
    height: 30px;
    -webkit-mask-size: 30px;
            mask-size: 30px;
  }
  .styled p.intro a[href^="#"]:before {
    width: 30px;
    height: 30px;
    -webkit-mask-size: 30px;
            mask-size: 30px;
  }
  .styled p.intro a:not([href*="tim@maxvoltar.be"]):not([href^="/"]):not([href^="#"]):after {
    width: 30px;
    height: 30px;
    -webkit-mask-size: 30px;
            mask-size: 30px;
  }
}
.styled p:has(.autograph) {
  font-family: "felt-tip-roman", sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 28px;
}
.styled p .autograph {
  display: block;
  background-color: var(--dark);
  -webkit-mask-image: url(../autograph.svg);
          mask-image: url(../autograph.svg);
  -webkit-mask-size: 100%;
          mask-size: 100%;
  width: 80px;
  aspect-ratio: 917/466;
}
.styled p:has(img, svg) {
  padding-top: calc(var(--unit-xsmall) / 2);
  padding-bottom: calc(var(--unit-xsmall) / 2);
}
.styled .align-center {
  text-align: center;
}
.styled ul li {
  list-style-type: disc;
  margin-left: var(--unit-xsmall);
  margin-bottom: calc(var(--unit-xsmall) / 2);
}
@media (min-width: 640px) and (max-width: 959px) {
  .styled ul li {
    margin-left: calc(var(--unit-small) * 0.75);
  }
}
@media (max-width: 639px) {
  .styled ul li {
    margin-left: var(--unit-small);
  }
}
.styled ul ul {
  padding-top: calc(var(--unit-xsmall) / 2);
}
.styled ol li {
  margin-left: calc(var(--unit-small) / 2 + 24px);
  margin-bottom: calc(var(--unit-xsmall) / 2);
  counter-increment: inst;
  position: relative;
}
.styled ol li:before {
  content: counter(inst);
  position: absolute;
  left: calc((var(--unit-small) / 2 + 24px) * -1);
  top: 0;
  display: block;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 700;
  font-size: 12px;
  line-height: 18px;
  font-weight: 700;
  text-transform: uppercase;
  height: 24px;
  min-width: 24px;
  line-height: 23px;
  color: var(--light);
  background: var(--dark);
  border-radius: 99px;
}
.styled ol ol {
  padding-top: calc(var(--unit-xsmall) / 2);
}
.styled :first-child {
  margin-top: 0 !important;
}
.styled :last-child {
  margin-bottom: 0 !important;
}
.styled :last-child:has(.button) {
  padding-bottom: var(--unit-xsmall);
}
.styled hr.horizontal {
  margin: var(--unit-small) 0 var(--unit-medium);
}
.styled .note {
  font-family: "felt-tip-roman", sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 28px;
  background: url(../paper.jpg), linear-gradient(to bottom, #dcda89, #eae9b1);
  background-size: 450px 450px, 100% 100%;
  background-blend-mode: multiply;
  border-radius: 2px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.1), 0 0 1px 1px rgba(255, 255, 255, 0.5) inset;
  padding: var(--unit-small) var(--unit-medium);
  margin: 0 0 var(--unit-small);
  text-align: center;
}
@supports (transform: rotate(random(-3deg, 3deg))) {
  .styled .note {
    transform: rotate(random(-3deg, 3deg));
  }
}
@media (prefers-color-scheme: dark) {
  .styled .note {
    color: var(--light);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.5), 0 0 1px 1px rgba(255, 255, 255, 0.5) inset;
  }
}
.styled .callout {
  position: relative;
  padding: calc(var(--unit-small) * 0.75) var(--unit-small);
  margin: var(--unit-xsmall) 0 var(--unit-small);
}
.styled .callout::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--dark);
  border-radius: var(--unit-xsmall);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: none;
  opacity: 0.15;
}
.styled dl {
  display: grid;
  grid-template-columns: auto 1fr;
}
@container (max-width: 320px) {
  .styled dl {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
}
.styled dl dd,
.styled dl dt {
  position: relative;
  padding: var(--unit-xsmall) 0;
}
.styled dl dd::after,
.styled dl dt::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  border-top: 1px solid var(--dark);
  opacity: 0.075;
}
.styled dl dd:last-of-type,
.styled dl dt:last-of-type {
  padding-bottom: 0;
}
.styled dl dd:first-of-type,
.styled dl dt:first-of-type {
  padding-top: 0;
}
.styled dl dd:first-of-type::after,
.styled dl dt:first-of-type::after {
  display: none;
}
.styled dl dt {
  font-weight: 700;
  padding-right: var(--unit-xsmall);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
@container (max-width: 320px) {
  .styled dl dt {
    padding-right: 0;
    padding-bottom: 0;
  }
}
.styled dl dd {
  font-weight: 500;
  text-align: right;
}
@container (max-width: 320px) {
  .styled dl dd {
    text-align: left;
  }
}
@container (max-width: 320px) {
  .styled dl dd + dt {
    margin-top: var(--unit-xsmall);
  }
}
@container (max-width: 320px) {
  .styled dl dd {
    padding-top: 0;
    padding-bottom: 0;
  }
  .styled dl dd::after {
    display: none;
  }
}
.styled h3 + .horizontal + dl,
.styled h4 + .horizontal + dl,
.styled h5 + .horizontal + dl {
  margin-top: calc(var(--unit-small) * -1);
}
.styled .callout:has(dl) h3 + .horizontal,
.styled .callout:has(dl) h4 + .horizontal,
.styled .callout:has(dl) h5 + .horizontal {
  margin-top: calc(var(--unit-small) * -1 * 0.333);
}

.vendors ul {
  display: flex;
  flex-direction: row;
  width: calc(100% + var(--unit-small) * 2);
  gap: var(--unit-small);
  text-align: center;
  align-items: center;
  margin-left: calc((var(--unit-small)) * -1);
  margin-right: calc((var(--unit-small)) * -1);
  padding: var(--unit-xsmall) var(--unit-large);
  -webkit-mask-image: linear-gradient(to right, transparent, black var(--unit-large), black calc(100% - var(--unit-large)), transparent);
          mask-image: linear-gradient(to right, transparent, black var(--unit-large), black calc(100% - var(--unit-large)), transparent);
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.vendors ul li {
  display: flex;
  flex-grow: 1;
  flex: 1;
  min-width: 112px;
  margin: 0;
}
@media (min-width: 640px) and (max-width: 959px) {
  .vendors ul li {
    min-width: 96px;
  }
}
@media (max-width: 639px) {
  .vendors ul li {
    min-width: 64px;
  }
}
.vendors ul li a {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-grow: 1;
  min-width: 0;
  padding-top: 50px;
  position: relative;
  transition: opacity 0.1s linear;
}
.vendors ul li a:hover, .vendors ul li a:focus-visible {
  opacity: 0.75;
}
.vendors ul li a:active {
  opacity: 0.5;
}
.vendors ul li a:hover span, .vendors ul li a:focus-visible span {
  text-decoration: underline;
}
@media (min-width: 640px) and (max-width: 959px) {
  .vendors ul li a {
    padding-top: 42px;
  }
}
@media (max-width: 639px) {
  .vendors ul li a {
    padding-top: 34px;
  }
}
.vendors ul li a::after {
  content: "";
  height: 48px;
  width: 48px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--dark);
  -webkit-mask-size: 48px;
          mask-size: 48px;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center top;
          mask-position: center top;
}
@media (min-width: 640px) and (max-width: 959px) {
  .vendors ul li a::after {
    height: 40px;
    width: 40px;
    -webkit-mask-size: 40px;
            mask-size: 40px;
  }
}
@media (max-width: 639px) {
  .vendors ul li a::after {
    height: 32px;
    width: 32px;
    -webkit-mask-size: 32px;
            mask-size: 32px;
  }
}
.vendors ul li a span {
  width: 100%;
  font-weight: 700;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: "proxima-soft-condensed", sans-serif;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
@media (max-width: 639px) {
  .vendors ul li a span {
    font-size: 12px;
    line-height: 18px;
    font-weight: 700;
    text-transform: uppercase;
  }
}
.vendors ul li a small {
  width: 100%;
  opacity: 0.5;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: "proxima-soft-condensed", sans-serif;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: 12px;
  line-height: 18px;
  font-weight: 700;
  text-transform: uppercase;
  font-weight: 500;
}
.vendors ul li a[href*=vala]::after {
  -webkit-mask-image: url(../vendors/vala.svg);
          mask-image: url(../vendors/vala.svg);
}
.vendors ul li a[href*=loobedswitches]::after {
  -webkit-mask-image: url(../vendors/loobedswitches.svg);
          mask-image: url(../vendors/loobedswitches.svg);
}
.vendors ul li a[href*=minokeys]::after {
  -webkit-mask-image: url(../vendors/minokeys.svg);
          mask-image: url(../vendors/minokeys.svg);
}
.vendors ul li a[href*=novelkeys]::after {
  -webkit-mask-image: url(../vendors/novelkeys.svg);
          mask-image: url(../vendors/novelkeys.svg);
}
.vendors ul li a[href*=keebhut]::after {
  -webkit-mask-image: url(../vendors/keebhut.svg);
          mask-image: url(../vendors/keebhut.svg);
}
.vendors ul li a[href*=qwertyqop]::after {
  -webkit-mask-image: url(../vendors/qwertyqop.svg);
          mask-image: url(../vendors/qwertyqop.svg);
}
.vendors ul li a[href*=keebzncables]::after {
  -webkit-mask-image: url(../vendors/keebzncables.svg);
          mask-image: url(../vendors/keebzncables.svg);
}
.vendors ul li a[href*=yushakobo]::after {
  -webkit-mask-image: url(../vendors/yushakobo.svg);
          mask-image: url(../vendors/yushakobo.svg);
}
.vendors ul li a[href*=cannonkeys]::after {
  -webkit-mask-image: url(../vendors/cannonkeys.svg);
          mask-image: url(../vendors/cannonkeys.svg);
}
.vendors ul li a[href*=maxgaming]::after {
  -webkit-mask-image: url(../vendors/maxgaming.svg);
          mask-image: url(../vendors/maxgaming.svg);
}
.vendors ul li a[href*=sanyo]::after {
  -webkit-mask-image: url(../vendors/sanyo.svg);
          mask-image: url(../vendors/sanyo.svg);
}
.vendors ul li a[href*=monacokeys]::after {
  -webkit-mask-image: url(../vendors/monacokeys.svg);
          mask-image: url(../vendors/monacokeys.svg);
}
.vendors ul li a[href*=keyreative]::after {
  -webkit-mask-image: url(../vendors/keyreative.svg);
          mask-image: url(../vendors/keyreative.svg);
}
.vendors ul li a[href*=zettgear]::after {
  -webkit-mask-image: url(../vendors/zettgear.svg);
          mask-image: url(../vendors/zettgear.svg);
}
.vendors ul li a[href*=hex]::after {
  -webkit-mask-image: url(../vendors/hex.svg);
          mask-image: url(../vendors/hex.svg);
}
.vendors ul li a[href*=kbdfans]::after {
  -webkit-mask-image: url(../vendors/kbdfans.svg);
          mask-image: url(../vendors/kbdfans.svg);
}
.vendors ul li a[href*=protozoa]::after {
  -webkit-mask-image: url(../vendors/protozoa.svg);
          mask-image: url(../vendors/protozoa.svg);
}
.vendors ul li a[href*=ashkeebs]::after {
  -webkit-mask-image: url(../vendors/ashkeebs.svg);
          mask-image: url(../vendors/ashkeebs.svg);
}
.vendors ul li a[href*=klc]::after {
  -webkit-mask-image: url(../vendors/klc.svg);
          mask-image: url(../vendors/klc.svg);
}
.vendors ul li a[href*=basekeys]::after {
  -webkit-mask-image: url(../vendors/basekeys.svg);
          mask-image: url(../vendors/basekeys.svg);
}
.vendors ul li a[href*=candykeys]::after {
  -webkit-mask-image: url(../vendors/candykeys.svg);
          mask-image: url(../vendors/candykeys.svg);
}
.vendors ul li a[href*=dailyclack]::after {
  -webkit-mask-image: url(../vendors/dailyclack.svg);
          mask-image: url(../vendors/dailyclack.svg);
}
.vendors ul li a[href*=tiny]::after {
  -webkit-mask-image: url(../vendors/tiny.svg);
          mask-image: url(../vendors/tiny.svg);
}
.vendors ul li a[href*=keygem]::after {
  -webkit-mask-image: url(../vendors/keygem.svg);
          mask-image: url(../vendors/keygem.svg);
}
.vendors ul li a[href*=jae]::after {
  -webkit-mask-image: url(../vendors/jae.svg);
          mask-image: url(../vendors/jae.svg);
}
.vendors ul li a[href*=latamkeys]::after {
  -webkit-mask-image: url(../vendors/latamkeys.svg);
          mask-image: url(../vendors/latamkeys.svg);
}
.vendors ul li a[href*=rheset]::after {
  -webkit-mask-image: url(../vendors/rheset.svg);
          mask-image: url(../vendors/rheset.svg);
}
.vendors ul li a[href*=mokb]::after {
  -webkit-mask-image: url(../vendors/mokb.svg);
          mask-image: url(../vendors/mokb.svg);
}
.vendors ul li a[href*=omnitype]::after {
  -webkit-mask-image: url(../vendors/omnitype.svg);
          mask-image: url(../vendors/omnitype.svg);
}
.vendors ul li a[href*=oblotzky]::after {
  -webkit-mask-image: url(../vendors/oblotzky.svg);
          mask-image: url(../vendors/oblotzky.svg);
}
.vendors ul li a[href*=deskhero]::after {
  -webkit-mask-image: url(../vendors/deskhero.svg);
          mask-image: url(../vendors/deskhero.svg);
}
.vendors ul li a[href*=ilumkb]::after {
  -webkit-mask-image: url(../vendors/ilumkb.svg);
          mask-image: url(../vendors/ilumkb.svg);
}
.vendors ul li a[href*=swagkey]::after {
  -webkit-mask-image: url(../vendors/swagkeys.svg);
          mask-image: url(../vendors/swagkeys.svg);
}
.vendors ul li a[href*=ntch]::after {
  -webkit-mask-image: url(../vendors/ntch.svg);
          mask-image: url(../vendors/ntch.svg);
}
.vendors ul li a[href*=stacks]::after {
  -webkit-mask-image: url(../vendors/stacks.svg);
          mask-image: url(../vendors/stacks.svg);
}
.vendors ul li a[href*=zfrontier]::after {
  -webkit-mask-image: url(../vendors/zfrontier.svg);
          mask-image: url(../vendors/zfrontier.svg);
}
.vendors ul li a[href*=stickeys]::after {
  -webkit-mask-image: url(../vendors/stickeys.svg);
          mask-image: url(../vendors/stickeys.svg);
}
.vendors ul li a[href*=prototypist]::after {
  -webkit-mask-image: url(../vendors/prototypist.svg);
          mask-image: url(../vendors/prototypist.svg);
}
.vendors ul li a[href*=keebfront]::after {
  -webkit-mask-image: url(../vendors/keebfront.svg);
          mask-image: url(../vendors/keebfront.svg);
}
.vendors ul li a[href*=thekey]::after {
  -webkit-mask-image: url(../vendors/thekey.svg);
          mask-image: url(../vendors/thekey.svg);
}
.vendors ul li a[href*=allcaps]::after {
  -webkit-mask-image: url(../vendors/allcaps.svg);
          mask-image: url(../vendors/allcaps.svg);
}
.vendors ul li a[href*=pantheon]::after {
  -webkit-mask-image: url(../vendors/pantheon.svg);
          mask-image: url(../vendors/pantheon.svg);
}
.vendors ul li a[href*=space]::after {
  -webkit-mask-image: url(../vendors/space.svg);
          mask-image: url(../vendors/space.svg);
}
.vendors ul li a[href*=ktechs]::after {
  -webkit-mask-image: url(../vendors/ktechs.svg);
          mask-image: url(../vendors/ktechs.svg);
}
.vendors ul li a[href*=eloquentclicks]::after {
  -webkit-mask-image: url(../vendors/eloquentclicks.svg);
          mask-image: url(../vendors/eloquentclicks.svg);
}
.vendors ul li a[href*=otakeebs]::after {
  -webkit-mask-image: url(../vendors/otakeebs.svg);
          mask-image: url(../vendors/otakeebs.svg);
}
.vendors ul li a[href*=aiglatson]::after {
  -webkit-mask-image: url(../vendors/aiglatson.svg);
          mask-image: url(../vendors/aiglatson.svg);
}
.vendors ul li a[href*=rebult]::after {
  -webkit-mask-image: url(../vendors/rebult.svg);
          mask-image: url(../vendors/rebult.svg);
}
.vendors ul li a[href*="rebu.lt"]::after {
  -webkit-mask-image: url(../vendors/rebult.svg);
          mask-image: url(../vendors/rebult.svg);
}
.vendors ul li a[href*=geon]::after {
  -webkit-mask-image: url(../vendors/geon.svg);
          mask-image: url(../vendors/geon.svg);
}
.vendors ul li a[href*=funkeys]::after {
  -webkit-mask-image: url(../vendors/funkeys.svg);
          mask-image: url(../vendors/funkeys.svg);
}
.vendors ul li a[href*=monstargear]::after {
  -webkit-mask-image: url(../vendors/monstargear.svg);
          mask-image: url(../vendors/monstargear.svg);
}
.vendors ul li a[href*=monokei]::after {
  -webkit-mask-image: url(../vendors/monokei.svg);
          mask-image: url(../vendors/monokei.svg);
}/*# sourceMappingURL=main.css.map */