/* Light palette. Edit these values to experiment with colours. */
:root {
  color-scheme: light;
  --ink: #292d29;
  --muted: #566052;
  --blue: #286044;
  --line: #dce1d5;
  --paper: #faf8f3;
  --hero: #eef2e8;
  --accent-hover: #1d4b34;
  --surface: #ffffff;
}

header {
  background: var(--surface);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}

.hero, .contact {
  background: var(--hero);
  color: var(--ink);
}

.brand, .brand:hover, .profile .name, .nav-links a {
  color: var(--ink);
}

.mark, h1 span, .hero .eyebrow, .nav-links a:hover,
.nav-links a[aria-current] {
  color: var(--blue);
}

.nav-links a[aria-current] {
  border-bottom-color: var(--blue);
}

.intro, .profile p, .profile li, .tag {
  color: var(--muted);
}

.profile li {
  border-top-color: var(--line);
}

.headshot {
  border-color: var(--surface);
}

.button, .nav-links .nav-contact {
  background: var(--surface);
  color: var(--blue);
  border-color: var(--blue);
}

.button.primary {
  background: var(--blue);
  color: #ffffff;
  border-color: var(--blue);
}

.button:hover, .nav-links .nav-contact:hover {
  background: var(--blue);
  color: #ffffff;
  border-color: var(--blue);
}

.button.primary:hover, .project-visit:hover {
  background: var(--accent-hover);
  color: #ffffff;
  border-color: var(--accent-hover);
}

.card, .wide-card, .project-feature {
  background: var(--surface);
}

.status, .placeholder {
  background: var(--hero);
  color: var(--blue);
}

.status.neutral {
  background: var(--paper);
  color: var(--muted);
}

a:focus-visible {
  outline-color: var(--blue);
}

@media print {
  .hero, .contact {
    background: #ffffff;
  }
}