/* ============================================
   Responsive — Mobile breakpoints
   ============================================ */

/* Tablet and below */
@media (max-width: 768px) {
    body {
        font-size: 1rem;
    }

    .site-header {
        padding: 1rem;
        padding-bottom: 0.75rem;
    }

    .site-content {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Connection map stacks vertically on mobile */
    .connection-links {
        flex-direction: column;
        gap: 0.4rem;
    }

    .connection-tier {
        margin-bottom: 1.5rem;
    }

    /* Footer */
    .site-footer {
        padding: 3rem 1rem 2rem;
    }

    /* Collection items get more breathing room */
    .collection-item-link {
        padding: 0.875rem 0;
    }
}

/* Small phones */
@media (max-width: 480px) {
    h1 {
        font-size: 1.75rem;
    }

    h2 {
        font-size: 1.375rem;
    }

    .header-breadcrumb {
        font-size: 0.8125rem;
    }

    .connection-link--direct {
        font-size: 0.9375rem;
    }

    .connection-link--near {
        font-size: 0.875rem;
    }

    .connection-link--distant {
        font-size: 0.75rem;
    }
}