/* Transparent cycling hues for the inner text boxes on the Contact page. */
@keyframes contactTextBoxHueCycle {
  0%, 100% {
    background: rgba(38, 221, 238, .24);
    border-color: rgba(222, 255, 255, .82) rgba(17, 112, 124, .72) rgba(17, 112, 124, .72) rgba(222, 255, 255, .82);
    box-shadow: inset 0 0 24px rgba(38, 221, 238, .12), 0 0 14px rgba(38, 221, 238, .08);
  }
  25% {
    background: rgba(222, 177, 53, .22);
    border-color: rgba(255, 246, 204, .84) rgba(111, 78, 8, .70) rgba(111, 78, 8, .70) rgba(255, 246, 204, .84);
    box-shadow: inset 0 0 24px rgba(222, 177, 53, .11), 0 0 14px rgba(222, 177, 53, .08);
  }
  50% {
    background: rgba(255, 255, 255, .20);
    border-color: rgba(255, 255, 255, .90) rgba(94, 94, 94, .68) rgba(94, 94, 94, .68) rgba(255, 255, 255, .90);
    box-shadow: inset 0 0 24px rgba(255, 255, 255, .11), 0 0 14px rgba(255, 255, 255, .07);
  }
  75% {
    background: rgba(0, 0, 0, .34);
    border-color: rgba(150, 150, 150, .78) rgba(0, 0, 0, .84) rgba(0, 0, 0, .84) rgba(150, 150, 150, .78);
    box-shadow: inset 0 0 28px rgba(0, 0, 0, .22), 0 0 14px rgba(0, 0, 0, .14);
  }
}

/* The larger Windows remain stable. Only the content boxes cycle. */
body.page-contact .contact-grid article {
  overflow: visible;
}

body.page-contact .contact-text-box,
body.page-contact .contact-list li {
  border: 2px solid transparent;
  color: #fffdf5 !important;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, .72);
  animation: contactTextBoxHueCycle 22s ease-in-out infinite;
}

body.page-contact .contact-text-box {
  padding: clamp(18px, 3vw, 28px);
}

body.page-contact .contact-text-box p {
  margin: 0;
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.68;
}

body.page-contact .contact-text-box p + p {
  margin-top: 16px;
}

body.page-contact .contact-intro {
  margin: -4px 0 18px;
  line-height: 1.6;
}

body.page-contact .contact-list li {
  display: grid;
  gap: 5px;
  padding: 16px 17px;
}

body.page-contact .contact-list li strong {
  font-family: var(--chicago);
  font-size: 18px;
  letter-spacing: -.02em;
}

body.page-contact .contact-list li span {
  line-height: 1.5;
}

body.page-contact .contact-list .preview-flag {
  color: #fffdf5 !important;
  border-width: 2px !important;
}

@media (prefers-reduced-motion: reduce) {
  body.page-contact .contact-text-box,
  body.page-contact .contact-list li {
    animation: none;
    background: rgba(38, 221, 238, .22) !important;
    border-color: rgba(222, 255, 255, .82) rgba(17, 112, 124, .72) rgba(17, 112, 124, .72) rgba(222, 255, 255, .82) !important;
    box-shadow: inset 0 0 24px rgba(38, 221, 238, .12), 0 0 14px rgba(38, 221, 238, .08) !important;
  }
}