@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/assets/IBMPlexMono-ExtraLight.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/assets/IBMPlexMono-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/assets/IBMPlexMono-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
:root {
  color-scheme: dark;
  --paper: #101010;
  --ink: #f2f2f2;
  --muted: #a0a0a0;
  --line: #303030;
  --orange: #f2f2f2;
  --yellow: #202020;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --serif: var(--sans);
  --brand-font: 'IBM Plex Mono', monospace;
}
::selection { background: #ddd; color: #101010; }
.wordmark, .footer .wordmark {
  font-family: var(--brand-font);
  font-size: 32px;
  font-weight: 200;
  letter-spacing: 1.2px;
}
.brand-dot {
  width: auto;
  height: auto;
  margin: 0;
  background: none;
  border-radius: 0;
  font-weight: 700;
  letter-spacing: 0;
}
.header { height: 96px; }
.header nav { color: #aaa; }
.header nav a:hover { color: #fff; }
.serif { font-style: normal; font-weight: 350; letter-spacing: -.045em; }
.hero h1 { font-weight: 350; font-size: clamp(66px, 7.1vw, 102px); letter-spacing: -.065em; }
.asterisk { color: #888; }
.eyebrow { color: #a0a0a0; font-weight: 500; }
.small-dot { background: #aaa; }
h2, .service-row h3, .project-copy h3 { font-weight: 350; }
.button-dark, .button-light { background: #f2f2f2; color: #101010; }
.button-dark:hover, .button-light:hover { background: #ddd; }
.blueprint { background-image: radial-gradient(#454545 .8px, transparent .8px); }
.orbit-lines { color: #444; }
.object-front, .object-back, .object-shadow { border-color: #555; }
.object-front { background: #202020; color: #f2f2f2; box-shadow: 0 12px 24px #0004; }
.object-back { background: #333; }
.object-shadow { background: #171717; }
.object-top i { border-color: #aaa; }
.object-symbol { font-family: var(--brand-font); font-weight: 200; }
.diagram-label i, .orbit-point { color: #aaa; }
.orbit-point { background: #aaa; }
.work-section { background: #181818; }
.project-visual { background: #202020; border: 1px solid #343434; }
.project-visual-bottom>span:first-child { font-weight: 350; }
.status, .project-facts>div { border-color: #3a3a3a; }
.status>span { background: #aaa; }
.family-name { font-family: var(--brand-font); font-weight: 200; letter-spacing: -.045em; }
.family-name>span { font-weight: 400; }
.contact { background: #181818; color: #f2f2f2; border-block: 1px solid #303030; }
.contact-star, .copy-status { color: #ddd; }
.contact p:not(.eyebrow), .contact-email { color: #aaa; }
.copy-email { color: #f2f2f2; border-color: #555; }
.contact-email { border-color: #555; }
.contact-email:hover { color: #f2f2f2; }
.skip-link { color: #101010; }
@media(max-width:1100px) { .hero h1 { font-size: 78px; } }
@media(max-width:800px) { .hero h1 { font-size: 64px; } }
@media(max-width:600px) {
  .header { height: 84px; }
  .wordmark, .footer .wordmark { font-size: 29px; }
  .hero h1 { font-size: clamp(60px, 15.5vw, 88px); }
  .header nav { box-shadow: 0 14px 24px #0005; }
}