:root {
  --accent: #2f654d;
  --accent-dark: #244e3c;
  --moss: #c7d2c5;
  --moss-light: #dce4da;
}

::selection {
  background: var(--moss);
  color: var(--ink);
}

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
}

.nav-cta {
  background: var(--accent);
}

.nav-cta:hover {
  background: var(--accent-dark);
}

.nav-cta span {
  color: var(--paper);
}

.section-label,
.eyebrow {
  color: var(--accent);
}

.method .section-label,
.references .section-label {
  color: var(--moss);
}

.process-list li > span {
  color: var(--moss);
}

.portrait {
  box-shadow: 10px 10px 0 var(--accent);
}

.moss {
  background: var(--moss);
}

.lime {
  background: var(--moss-light);
}

.clay {
  background: var(--accent);
  color: var(--paper);
}

.contact-link {
  color: var(--accent);
}

.contact-link:hover {
  color: var(--accent-dark);
}

@media (max-width: 880px) {
  .portrait {
    box-shadow: 7px 7px 0 var(--accent);
  }
}