/* Phone — screens 768px and under */
@media (max-width: 768px) {

    /* Force no extra spacing that mobile browsers sometimes add */
    html, body {
        margin: 0;
        padding: 0;
        width: 100%;
        overflow-x: hidden; /* prevents horizontal scroll/gap on small screens */
    }

    /* Use 100svh (small viewport height) instead of 100vh —
       100vh on mobile includes the browser address bar which causes a gap.
       100svh is the actual visible screen height. */
    .hero {
        height: 100svh;
        width: 100vw;
        background-size: 130%; /* adjust this number to zoom in or out */
        background-position: 59% 34%; /* adjust to keep your subject in frame */
    }

    /* Stack nav links vertically */
    nav ul {
        flex-direction: column;
        gap: 0.5em;
        padding: 1em;
    }

}