/* MAYFLY color system: black/white surfaces with red accents only. */
:root {
  --black: #080808;
  --white: #ffffff;
  --red: #e60012;
  --ink: #080808;
  --grey: #ffffff;
}

body,
.hero,
.game,
.proof,
.contact.light,
footer {
  background-color: var(--black);
  color: var(--white);
}

.manifesto.light,
.features.light {
  background-color: var(--white);
  color: var(--black);
}

.game::before {
  background: none;
}

.proof {
  background: var(--black);
}

/* Dark surfaces: white copy, red highlights. */
.hero .kicker,
.hero-line,
.hero-meta,
.game-title > p,
.game-summary > p,
.game-summary dd,
.proof blockquote,
.proof cite,
.contact.light .kicker,
.contact.light .contact-bottom p,
footer,
footer a {
  color: var(--white);
}

.game-summary dt,
.game h2 em,
.proof h2 em,
.proof .section-label span,
.contact.light h2 em,
.scroll i {
  color: var(--red);
}

.game-summary dl,
.game-summary dl div,
.metrics,
.metrics div,
.contact.light .contact-bottom,
footer {
  border-color: var(--white);
}

.sight,
.sight::before,
.sight::after {
  border-color: var(--white);
}

.sight::before,
.sight::after {
  background: var(--white);
}

/* Light surfaces: black copy, red highlights. */
.manifesto-copy > p,
.manifesto-copy .lead,
.feature > div > p:first-child,
.feature > div > p:last-child,
.feature h3,
.award span {
  color: var(--black);
}

.manifesto h2 em,
.manifesto .section-label span,
.features .section-label span,
.feature-no {
  color: var(--red);
}

.manifesto .section-label,
.features .section-label,
.award,
.feature,
.feature:last-child {
  border-color: var(--black);
}

.feature > b {
  color: var(--black);
  -webkit-text-stroke: 0;
}

.feature:hover {
  background: var(--white);
}

.metrics strong {
  letter-spacing: 0;
}

.game-title h2 {
  line-height: 1.08;
}

.game .sight {
  border: 0;
}

.game .sight::before,
.game .sight::after {
  display: block;
  background: var(--white);
}

.game .sight span {
  left: 41%;
  top: 41%;
  width: 18%;
  height: 18%;
  border: 2px solid var(--red);
  background: transparent;
  box-shadow: 0 0 24px var(--red);
  transform: none;
}

.game-summary {
  bottom: 55px;
}

/* Buttons remain strictly white/red on black. */
.button.ghost {
  color: var(--white);
  border-color: var(--white);
  background: var(--black);
}

.button.primary {
  color: var(--white);
  border-color: var(--red);
  background: var(--red);
}

.button:hover {
  color: var(--black);
  border-color: var(--white);
  background: var(--white);
}

.contact.light .contact-bottom a {
  color: var(--white);
  border-color: var(--red);
}

@media (max-width: 760px) {
  .metrics div,
  .metrics div:first-child {
    border-color: var(--white);
  }
}