/* ══════════════════════════════════════════
   Mobile & Responsive Overrides
   ══════════════════════════════════════════ */

/* ── Tablet & below ── */
@media (max-width: 1024px) {

    /* Keep the same overlap ratio as desktop */
    .about-me-image {
        width: 65%;
        margin-left: -18vw;
    }
}

/* ── Phone landscape / small tablet ── */
@media (max-width: 768px) {

    /* Navbar: hide desktop links, show hamburger */
    .link {
        display: none;
    }

    .hamburger {
        display: block;
    }

    /* About: same overlap, slightly smaller image */
    .about-me-text {
        text-align: left;
    }

    .about-me-image {
        width: 65%;
        margin-left: -28vw;
    }

    /* Story: stack rows vertically */
    .story-row,
    .story-row.reverse {
        flex-direction: column;
    }

    .story-text,
    .story-image {
        width: 100%;
    }

    .story-container > .story-row:nth-child(odd) .story-text {
        text-align: left;
    }

    /* Footer: stack columns & reduce padding */
    #footer {
        padding: clamp(24px, 8vh, 80px) var(--pad-edge);
    }

    .footer-top-links {
        flex-direction: column;
        gap: clamp(24px, 6vw, 40px);
    }
}

/* ── Small phones ── */
@media (max-width: 480px) {

    .about-me-image {
        width: 55%;
        margin-left: -20vw;
    }

    .about-me-image img {
        width: 100%;
    }

    .big-name {
        font-size: clamp(60px, 30vw, 200px);
    }
}