@font-face {
  font-family: "Transit Display";
  src: url("assets/fonts/oxanium-regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Transit Display";
  src: url("assets/fonts/oxanium-semibold.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

:root {
  --dq-bg: #090c0d;
  --dq-surface: #121516;
  --dq-surface-2: #191c1d;
  --dq-text: #f2f0e9;
  --dq-muted: #afb6b5;
  --dq-moss: #d99a4b;
  --dq-gold: #68d5e8;
  --dq-burgundy: #bd628e;
  --dq-line: rgba(223, 237, 237, 0.17);
}

html {
  background: var(--dq-bg);
}

.transit-page h1,
.transit-page h2 {
  font-family: "Transit Display", "Segoe UI", sans-serif;
}

.transit-page .dq-hero-image {
  object-position: center 51%;
}

.transit-page .dq-hero-shade {
  background: rgba(5, 8, 9, 0.27);
  box-shadow: inset 0 -190px 155px rgba(5, 7, 8, 0.7);
}

.transit-page .dq-hero h1 {
  font-weight: 600;
  text-transform: uppercase;
  text-shadow: 0 4px 28px rgba(0, 0, 0, 0.72);
}

.transit-page .dq-kicker,
.transit-page .dq-section-label,
.transit-page .dq-scroll-link,
.transit-page .dq-back,
.transit-page .dq-language-switch,
.transit-page .dq-status {
  font-family: "Transit Display", "Segoe UI", sans-serif;
}

.transit-page .dq-gallery-heading .dq-section-label {
  color: var(--dq-burgundy);
}

.transit-page .dq-making .dq-section-label,
.transit-page .dq-status > span:first-child {
  color: var(--dq-moss);
}

.transit-page .dq-status > span:first-child {
  background: var(--dq-moss);
  box-shadow: 0 0 14px rgba(217, 154, 75, 0.55);
}

.transit-page .dq-scene-frame {
  background: #101517;
}

@media (max-width: 640px) {
  .transit-page .dq-hero-image {
    object-position: 58% 50%;
  }
}