@font-face {
  font-family: "IBM Plex Mono";
  src: url("assets/ibm-plex-mono-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
:root {
  color-scheme: dark;
  --page-bg: #0f1113;
  --ink: #f4ebdd;
  --amber: #c35a2e;
  --midnight: #243b4a;
  --font-body: "IBM Plex Mono", "Courier New", monospace;
  --font-size: clamp(1.05rem, 1.48vw, 1.5rem);
  --line-height: 1.55;
  --page-pad-inline: clamp(2.5rem, 7.4vw, 9rem);
  --page-pad-block: 5rem;
  --content-width: 31rem;
  --heading-gap: clamp(1.8rem, 3.4vw, 3rem);
  --paragraph-gap: .55em;
  --signoff-gap: 1.2em;
  --logo-width: 25rem;
  --hero-image: url("assets/studio.webp");
  --hero-position: 57% center;
  --mobile-pad-inline: clamp(1.5rem, 7vw, 2.6rem);
  --mobile-pad-block: clamp(3.5rem, 10svh, 6rem) 18rem;
}
.site::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  background: var(--hero-image) var(--hero-position) / cover no-repeat;
}
.site::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, rgb(9 11 12 / .18), transparent 65%), linear-gradient(0deg, rgb(8 10 11 / .3), transparent 30%);
  pointer-events: none;
}
.wordmark {
  width: min(100%, var(--logo-width));
  aspect-ratio: 580 / 240;
  background: url("assets/kop.svg") left center / contain no-repeat;
}
/* Keep the permanent real heading available to assistive technology. */
.wordmark span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.message { max-width: 31rem; text-shadow: 0 1px 8px #080a0b; }
::selection { color: var(--page-bg); background: var(--ink); }
@media (max-width: 65rem) and (min-width: 40.001rem) {
  :root { --content-width: 26rem; --logo-width: 22rem; }
  .site::after { background: linear-gradient(90deg, rgb(8 10 11 / .65), rgb(8 10 11 / .3) 52%, transparent); }
}
@media (max-width: 40rem) {
  :root { --font-size: 1.0625rem; --heading-gap: 2rem; --logo-width: 18rem; --paragraph-gap: .65em; --hero-position: 72% bottom; }
  .site::before { background-size: auto 100%; }
  .site::after { background: linear-gradient(180deg, rgb(9 11 12 / .97) 0%, rgb(9 11 12 / .94) 42%, rgb(9 11 12 / .63) 65%, rgb(9 11 12 / .1) 100%); }
  .message { max-width: 29ch; }
}