/* Interaction and preference support. Default composition and typography stay intact. */
#series .series-images img[role="button"]:focus-visible {
  outline: 1px solid #fff;
  outline-offset: 4px;
}

.contact-dialog input:focus-visible,
.contact-dialog textarea:focus-visible,
.contact-dialog form > button[type="submit"]:focus-visible,
.receipt-close:focus-visible,
.dialog-step:focus-visible,
.topbar nav a:focus-visible,
.footer-social:focus-visible,
.footer-mail:focus-visible {
  outline: 1px solid #fff;
  outline-offset: 4px;
}
.contact-dialog input:focus-visible,
.contact-dialog textarea:focus-visible { border-bottom-color: #fff; }

.project:active,
#series .series-images img[role="button"]:active {
  outline: 1px solid #ffffff99;
  outline-offset: -1px;
  transition: none;
}

.topbar nav a:active,
.round-link:active,
.footer-mail:active,
.mobile-menu nav a:active,
.mobile-contact-link:active,
.mobile-menu-toggle:active {
  color: #fff;
  opacity: .75;
  transition: none;
}
.footer-social:active {
  background: #fff;
  color: #090b0b;
  border-color: #fff;
  transition: none;
}

.dialog-step:active,
.close-dialog:active,
.close-contact:active,
.close-mobile-menu:active {
  border-color: #fff;
  background-color: #ffffff14;
  transition: none;
}

/* Increase the hit area, keeping the existing circle and header geometry. */
.dialog-step::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: inherit;
}
.mobile-menu-toggle { position: relative; }
.mobile-menu-toggle::after {
  content: "";
  position: absolute;
  inset: -6px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  .project,
  .project img,
  .project > i,
  .hero-index a,
  .topbar,
  .topbar nav a,
  .wordmark,
  .role,
  .round-link,
  .footer-mail,
  .footer-social,
  .dialog-step,
  .comparison-caption {
    transition-duration: 0s !important;
    transition-delay: 0s !important;
  }
  .project:hover,
  .project:hover img,
  .project:hover > i,
  .hero-index a {
    transform: none !important;
  }
  /* This is the original static selected-item offset, not an animation. */
  .hero-index a:first-child { transform: translateX(-3px) !important; }
}

@media (prefers-reduced-transparency: reduce) {
  .topbar,
  #grading .comparison-caption {
    background: #070909 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .dialog-step {
    background: #080a0a !important;
    opacity: 1 !important;
  }
}

@media (prefers-contrast: more) {
  .topbar {
    background: #070909 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom-color: #89978e;
  }
  .topbar nav a,
  .role,
  .hero-index a,
  .brands-intro,
  .series-list header p,
  .dialog-counter {
    color: #fff;
    opacity: 1;
  }
  #grading .comparison-caption,
  .dialog-step {
    background: #080a0a !important;
    color: #fff !important;
    border-color: #e6ece6 !important;
    opacity: 1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .close-dialog,
  .close-contact,
  .close-mobile-menu,
  .footer-social {
    border-color: #e6ece6;
  }
  #series .series-images img[role="button"]:focus-visible {
    outline-width: 2px;
  }
}