/* Accessibility utilities */
/* Skip to content link - hidden until focused */
.skip-link {
  position: absolute;
  top: -40px;
  right: 0;
  background: var(--primary);
  color: white;
  padding: 8px 16px;
  border-radius: 0 0 0 8px;
  text-decoration: none;
  font-weight: 600;
  z-index: 999;
  transition: top 0.2s ease;
}
.skip-link:focus {
  top: 0;
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* Advanced utilities */
.d-block { display: block; }
.d-inline { display: inline; }
.d-inline-flex { display: inline-flex; }
.d-grid { display: grid; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.items-center { align-items: center; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }

/* Opacity */
.opacity-50 { opacity: .5; }
.opacity-75 { opacity: .75; }

/* Z-index */
.z-1 { z-index: 1; } .z-10 { z-index: 10; } .z-50 { z-index: 50; } .z-100 { z-index: 100; }

/* Aspect Ratio */
.ratio-1x1 { aspect-ratio: 1 / 1; }
.ratio-16x9 { aspect-ratio: 16 / 9; }
.ratio-4x3 { aspect-ratio: 4 / 3; }

/* Width helpers */
.w-100 { width: 100%; }
.w-50 { width: 50%; }
.max-w { max-width: min(1100px, 92vw); margin-inline: auto; }