:root {
  --ink: #071722;
  --paper: #f4f3ef;
  --lime: #ffb800;
}

body,
.ml-site {
  background: var(--ink);
}

.ml-site h1,
.ml-site h2,
.ml-site h3 {
  color: #fff;
}

.ml-manifesto h2,
.ml-interaction h2,
.ml-interaction h3,
.ml-story h2,
.ml-story h3,
.ml-detail-grid h2,
.ml-detail-grid h3,
.ml-process h2,
.ml-process h3,
.ml-platform-detail h2,
.ml-platform-detail h3 {
  color: var(--ink);
}

.ml-logo--image {
  width: 154px;
  height: 68px;
  display: flex;
  justify-content: flex-start;
}

.ml-logo--image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ml-footer-logo {
  width: 220px;
  max-width: 100%;
  background: var(--paper);
  padding: 12px;
}

.ml-footer-logo img {
  display: block;
  width: 100%;
}

.ml-header {
  background: rgba(244, 243, 239, .97);
  border-bottom-color: rgba(7, 23, 34, .14);
  color: var(--ink);
}

.ml-header .ml-btn {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff !important;
}

.ml-header .ml-menu-toggle {
  color: var(--ink);
}

.ml-btn:hover {
  box-shadow: 0 10px 30px rgba(255, 184, 0, .2);
}

@media (max-width: 1050px) {
  .ml-nav {
    background: var(--paper);
    border-bottom-color: rgba(7, 23, 34, .14);
  }
}

@media (max-width: 680px) {
  .ml-logo--image {
    width: 132px;
    height: 56px;
  }
}