/* Content remains readable when scripts are blocked or fail to load. */
.sr, .sr.visible { opacity: 1; transform: none; }

:where(a, button, input, textarea):focus-visible {
  outline: 2px solid var(--teal, #3bc9b7);
  outline-offset: 5px;
}

.skip-link {
  position: fixed;
  left: 16px;
  top: 12px;
  z-index: 1000;
  padding: 12px 20px;
  color: #060a12;
  background: #e6e2d5;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }
.contact-help { font-size: 16px; line-height: 1.6; margin: 0 0 28px; color: var(--bone-dim); }
.contact-help a { color: var(--teal); }

/* Keep the expanded navigation readable with the shop entry on small laptops. */
@media (min-width: 881px) and (max-width: 1150px) {
  .navbar { padding-inline: 24px; }
  .nav-brand { gap: 10px; flex-shrink: 0; }
  .nav-wordmark { font-size: 12px; white-space: nowrap; }
  .nav-links { gap: 16px; }
  .nav-links a { font-size: 10px; letter-spacing: 0.12em; white-space: nowrap; }
  .nav-links .nav-cta { padding-inline: 14px !important; }
}

@media (max-width: 880px) {
  /* Visibility also removes closed links from the keyboard tab order. */
  .nav-links { visibility: hidden; overflow-y: auto; max-width: 100vw; }
  .nav-links.open { visibility: visible; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}