/* ============================================================
   utilities.css — Utility Rules, Focus Styles & Media Queries
   Part of the Leo Bercoff modular CSS architecture
   ============================================================ */

/* ── Focus Visible ─────────────────────────────────────── */
:focus-visible {
  outline: 3px solid rgba(49, 86, 108, 0.35);
  outline-offset: 4px;
}

/* ── Responsive: Narrow Screens (≤640px) ───────────────── */
/*
 * Shared responsive adjustments across all pages.
 * Gutter narrows from 36px to 24px; footer collapses to column.
 */
@media (max-width: 640px) {
  .site-footer {
    flex-direction: column;
  }
}