:focus-visible {
  outline: 3px solid #c94d2e;
  outline-offset: 4px;
}

html, body { max-width: 100%; width: 100%; }
.section, .tools-intro, .tool-directory { width: 100%; }
.section > *, .contact-options > *, .tool-entry > *, .tools-intro > *, .tool-directory > * { min-width: 0; max-width: 100%; }
.section p, .tool-entry p, .tools-intro p { overflow-wrap: normal; word-break: normal; }
.inactive-url { overflow-wrap: anywhere; word-break: normal; }
.about > p, .tools-intro > p:last-child, .tool-entry > p { width: 100%; max-width: 100% !important; }

@media (max-width: 760px) {
  .site-header {
    align-items: flex-start;
    gap: 1.25rem;
    flex-wrap: wrap;
  }

  .site-header nav {
    flex: 1 1 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: .8rem 1rem;
    min-width: 0;
    width: 100%;
  }
}