:root {
  --petles-focus: #781055;
  --petles-focus-ring: #ff8ed0;
}

/* Apply only to controls and navigation, not inline article links. */
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
[role="button"],
.site-nav a,
.petles-action {
  min-block-size: 44px;
  min-inline-size: 44px;
}

button,
[role="button"],
.site-nav a,
.petles-action {
  align-items: center;
  display: inline-flex;
  justify-content: center;
}

:where(a, button, input, select, textarea, [role="button"]):focus-visible {
  outline: 3px solid var(--petles-focus-ring);
  outline-offset: 3px;
}

.site-nav [aria-current="page"],
.site-nav [aria-selected="true"] {
  color: var(--petles-focus);
  font-weight: 800;
  text-decoration-thickness: .15em;
  text-underline-offset: .22em;
}

.petles-media-frame {
  aspect-ratio: var(--petles-media-ratio, 4 / 3);
  background: #f8e7f2;
  overflow: clip;
}

.petles-media-frame > img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}