/* A small inspection lamp for the existing workshop photographs. */
.photo-aperture.inspection-ready > img {
  scale: 1;
  transition: transform 1s cubic-bezier(.2,.7,.2,1), scale .55s cubic-bezier(.2,.7,.2,1);
}
.photo-aperture.inspection-ready.inspection-active > img { scale: 1.085; }
.inspection-glow {
  position: absolute;
  z-index: 1;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle 118px at var(--inspection-x, 52%) var(--inspection-y, 48%), rgba(255,248,224,.28) 0%, rgba(255,250,235,.12) 29%, rgba(255,252,244,.035) 57%, transparent 76%);
  mix-blend-mode: screen;
  transition: opacity .25s ease;
}
.inspection-active > .inspection-glow { opacity: 1; }
.inspection-ready > .photo-stamp,
.inspection-ready > .photo-scroll,
.inspection-ready > .human-photo-caption { z-index: 2; }
.inspection-toggle {
  appearance: none;
  position: absolute;
  z-index: 2;
  top: 15px;
  right: 6%;
  min-width: 132px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 12px;
  border: 0;
  border-radius: 7px;
  color: #24303d;
  background: transparent;
  font: 700 9px/1.2 "Mono", monospace;
  letter-spacing: .045em;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.inspection-toggle::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 7px 0;
  border: 1px solid #a7afb9;
  border-radius: 5px;
  background: linear-gradient(120deg, #edf0f2 0%, #b5bdc6 44%, #dce1e6 68%, #aab3be 100%);
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 1px #7a8696, 0 2px 5px #10151d45;
}
.inspection-toggle::after {
  content: "";
  flex: none;
  order: -1;
  width: 8px;
  height: 8px;
  border: 1px solid #7a8796;
  border-radius: 50%;
  background: #687586;
  box-shadow: inset 0 1px 2px #26323c66, 0 1px 0 #fff9;
  transition: background .2s ease, box-shadow .2s ease;
}
.inspection-toggle[aria-pressed="true"]::after {
  background: #fff5cd;
  border-color: #a3946b;
  box-shadow: inset 0 1px 1px #fff, 0 0 7px #fff0b8;
}
.inspection-toggle:focus-visible { outline: 3px solid #1649ff; outline-offset: 2px; }
.inspection-toggle:active::before { box-shadow: inset 0 1px 3px #66738677, 0 1px 0 #fff8; }
.inspection-toggle[hidden] { display: none; }
.hero-photo > .inspection-toggle { transform: skewX(6deg); }
.human-photo > .inspection-toggle { transform: skewX(5deg); }
@media (max-width: 620px) {
  .inspection-toggle { top: 7px; left: 8%; right: auto; min-width: 122px; font-size: 8px; }
  .hero-photo > .inspection-toggle { transform: skewX(4deg); }
  .human-photo > .inspection-toggle { transform: skewX(3deg); }
  .photo-aperture.inspection-ready.inspection-active > img { scale: 1.06; }
  .inspection-glow { background: radial-gradient(circle 95px at 52% 48%, rgba(255,248,224,.12), transparent 76%); }
}
@media (hover: none), (pointer: coarse) {
  .inspection-glow { background: radial-gradient(circle 95px at 52% 48%, rgba(255,248,224,.12), transparent 76%); }
}
.reduce-motion .inspection-ready > img,
.reduce-motion .inspection-toggle::after,
.reduce-motion .inspection-glow { transition: none; }
.reduce-motion .inspection-glow { background-position: center; }
@media (prefers-reduced-motion: reduce) {
  html:not(.motion-override) .inspection-ready > img,
  html:not(.motion-override) .inspection-toggle::after,
  html:not(.motion-override) .inspection-glow { transition: none; }
}
@media (forced-colors: active) {
  .inspection-glow { display: none; }
  .inspection-toggle { color: ButtonText; }
  .inspection-toggle::before { background: ButtonFace; border: 1px solid ButtonText; box-shadow: none; }
  .inspection-toggle::after { border-color: ButtonText; background: ButtonFace; box-shadow: none; }
  .inspection-toggle[aria-pressed="true"]::after { background: Highlight; border-color: Highlight; box-shadow: none; }
  .inspection-toggle:focus-visible { outline-color: Highlight; }
}