@font-face {
  font-family: "Jacquard 12";
  src: url('../assets/fonts/jacquard-12-regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Google Sans Code";
  src: url('../assets/fonts/google-sans-code-regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Google Sans Code";
  src: url('../assets/fonts/google-sans-code-italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
:root { color-scheme: dark; }
* { box-sizing: border-box; }
html { background: hsl(180, 9%, 7%); }
body {
  margin: 0;
  background: hsl(180, 9%, 7%);
  color: #fff;
}
img { height: auto; }
a:focus-visible { outline: 2px solid #55aaaa; outline-offset: 3px; }
.jacquard-12-regular { font-family: "Jacquard 12", system-ui; }
.google-sans-code-regular { font-family: "Google Sans Code", monospace; }
.primary { color: #55aaaa; }
.b--primary { border-color: #55aaaa; }
.site-hero, footer { background-color: #101313; }
.hero-inner { width: 960px; height: 400px; }
.hero-background { background-image: url('../assets/bg-narrow.png'); background-position: center; }
.hero-logo { position: relative; z-index: 1; }
.hero-logo img { display: block; max-width: min(100%, 640px); }
.site-subtitle, .site-content { max-width: 960px; width: 100%; }
.project-gradient { height: 32px; background: linear-gradient(to bottom, rgba(255,255,255,.025), rgba(255,255,255,0)); }
.project-image { object-fit: cover; max-width: 100%; }
.project-description { margin-top: 1rem; }
.project-heading { gap: 1rem; }
.inherit-font { font-family: inherit; }
.inherit-size { font-size: inherit; }
.dashed-rule { border-bottom-style: dashed; }
.feature-list { list-style: none; padding-left: 0; }
.press-logo { width: 240px; max-width: 100%; }
.studio-image { display: block; }
.page-content h1, .page-content h2 {
  color: #fff;
  font-family: "Jacquard 12", system-ui;
  font-weight: 400;
  line-height: 1.25;
}
.page-content h1 { font-size: 2.25rem; margin: 0 0 .5rem; }
.page-content h2 { font-size: 1.5rem; margin: 2rem 0 .5rem; }
.page-content p { margin-top: 0; margin-bottom: 1rem; }
.page-content a { color: #55aaaa; text-decoration: none; }
.page-content a:hover { opacity: .5; }
@media screen and (max-width: 40em) {
  .hero-inner { height: 280px; padding: 1.5rem; }
  .site-content { padding-left: 1rem; padding-right: 1rem; }
  .project-heading { align-items: flex-start; flex-direction: column; }
  .project-heading .tr { text-align: left; }
}