:root {
  /* Primary */
  --cww-brown: #8b5e3c;
  --cww-slate: #9ca9b0;
  --cww-black: #000000;
  --cww-white: #ffffff;

  /* Secondary */
  --cww-tan:  #c49a6c;
  --cww-gold: #ecac58;
  --cww-pink: #fbd3df;

  /* 25% tint of --cww-tan; guide allows tints */
  --cww-cream: #f0e6da;

  --cww-heading-font: "Grandstander", system-ui, sans-serif;
  --cww-body-font: "Roboto", system-ui, sans-serif;
}

body {
  font-family: var(--cww-body-font);
  color: var(--cww-black);
}

h1 {
  font-family: var(--cww-heading-font);
  font-weight: 700;
  color: var(--cww-brown); /* 5.58:1 on white */
}

.bg-custom {
  background-color: var(--cww-cream);
  border-bottom: 4px solid var(--cww-slate);
}

.logo {
  width: 100%;
  max-width: 150px;
  height: auto;
}

.navlink:link,
.navlink:visited {
  font-family: var(--cww-heading-font);
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--cww-black); /* 17.04:1 on cream */
  border-radius: 0.5rem;
}

.navlink:hover,
.navlink:focus {
  color: var(--cww-white);
  background-color: var(--cww-brown); /* 5.58:1 */
}

.btn-cta {
  font-family: var(--cww-heading-font);
  font-weight: 700;
  color: var(--cww-white);
  background-color: var(--cww-brown); /* 5.58:1 */
}

.btn-cta:hover,
.btn-cta:focus {
  color: var(--cww-black);
  background-color: var(--cww-gold); /* 10.61:1 */
}

@media (min-width: 992px) {
  .navbar-expand-lg .navbar-collapse,
  .navbar-cta {
    flex: 1 1 0;
  }

  .navbar-cta {
    text-align: right;
  }
}

footer {
  background-color: var(--cww-cream);
  border-top: 4px solid var(--cww-slate);
  padding: 2rem 0;
}

.footer-heading {
  font-family: var(--cww-heading-font);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--cww-brown); /* 4.53:1 on cream */
}

.footer-text {
  font-family: var(--cww-body-font);
  font-size: 0.9375rem;
  line-height: 1.8;
  color: var(--cww-black); /* 17.04:1 on cream */
  overflow-wrap: anywhere; /* long email wraps inside its column, icon stays put */
}

.footer-email {
  /* the longest line in the footer; let it run into the empty space
     beside it rather than wrapping inside a narrow column */
  width: max-content;
  max-width: 200%;
}

.footer-link {
  /* icon stays on the first line; the handle shrinks and wraps inside the column */
  display: inline-flex;
  align-items: baseline;
  max-width: 100%;
}

.footer-handle {
  min-width: 0;
  overflow-wrap: anywhere;
}

.footer-link:link,
.footer-link:visited {
  color: var(--cww-black);
  text-decoration: none;
}

.footer-link:hover,
.footer-link:focus {
  color: var(--cww-brown); /* 4.53:1 on cream */
  text-decoration: underline;
}

@media (max-width: 429.98px) {
  /* the social handles are too long for a half-width column this narrow */
  .footer-stack {
    width: 100%;
  }
}

.bi {
  color: var(--cww-brown); /* 4.53:1 on cream */
  font-size: 1.25rem;
  margin-left: 0.125rem;
  margin-right: 0.5rem;
}