@media screen and (max-width: 1200px) {
    #desktop-nav{
        display: none;
    }
    #hamburger-nav {
        display: flex;
    }
}

/* Tablet and phone layouts; desktop styles remain in style.css. */
@media screen and (max-width: 1200px) {
    section { margin: 0 2rem; height: auto; min-height: 0; padding: 2rem 0 4rem; }
    #profile { height: auto; gap: 2rem; padding-bottom: 4rem; }
    .section-container { flex-direction: column; height: auto; gap: 2rem; }
    #about-me .section__pic-container { align-self: center; margin: 0 auto; }
    .section__pic-container { width: min(320px, 100%); height: auto; flex-shrink: 0; }
    .section__pic-container img { width: 100%; height: auto; object-fit: contain; }
    .about-details-container, .section__text { min-width: 0; }
    .about-containers { flex-wrap: wrap; }
    .capabilities-screen { min-height: 0; padding-bottom: 2rem; }
    .arrow, .design-profile .arrow, .capabilities-arrow, .workflow-arrow {
        position: static; display: block; width: fit-content; height: auto;
        margin: 2rem 0 0 auto;
    }
    img.arrow, .design-profile img.arrow, .capabilities-arrow img, .workflow-arrow img {
        width: auto; height: 3rem;
    }
    #workflow .design-process { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
    #workflow .process-step, #workflow .process-step:nth-child(6) {
        grid-column: auto; aspect-ratio: auto; min-height: 15rem; overflow: visible;
        transform: none;
    }
    #hamburger-nav { height: 7rem; justify-content: flex-end; padding: 0 2rem; }
    .hamburger-menu { z-index: 1001; }
    .hamburger-icon { padding: .75rem; }
    .menu-links { width: min(20rem, calc(100vw - 2rem)); border-radius: .75rem; box-shadow: 0 8px 24px #0002; }
    .menu-links.open { max-height: 70dvh; overflow-y: auto; }
    .menu-links a { font-size: 1rem; padding: .8rem 1rem; }
    .logo { width: 9rem; height: 5rem; font-size: 1.2rem; top: 1rem; left: 1rem; }
    .nav-logo-image { width: 5rem; height: 5rem; }
    footer { height: auto; padding: 2rem 0; }
    footer nav { height: auto; margin-bottom: 1.5rem; }
    footer .nav-links { flex-wrap: wrap; justify-content: center; font-size: 1rem; gap: 1rem; }
}

@media screen and (max-width: 800px) {
    section { margin: 0 1rem; scroll-margin-top: 1rem; }
    #profile { flex-direction: column; align-items: center; }
    #profile .section__pic-container { width: min(65vw, 280px); margin: 0 auto; }
    #about-me, #experience, #workflow { padding-bottom: 3rem; }
    .title { font-size: clamp(1.8rem, 7vw, 2.5rem); overflow-wrap: anywhere; }
    .section__text__p2 { font-size: 1.2rem; }
    .profile-heading { justify-content: center; gap: .5rem; }
    .profile-symbol { width: 3rem; }
    .about-containers { flex-direction: column; gap: 1rem; }
    .details-container { box-sizing: border-box; min-width: 0; width: 100%; padding: 1.25rem; }
    #experience .about-containers,
    #experience .software-group .about-containers,
    #projects .experience-details-container { grid-template-columns: minmax(0, 1fr); }
    .experience-sub-title { font-size: 1.3rem; margin-bottom: 1rem; }
    .project-img { width: 100%; }
    .software-group .article-container { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem .75rem; }
    .software-group article { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; overflow-wrap: anywhere; }
    .software-group .software-logo { width: 48px; height: 48px; object-fit: contain; margin-bottom: .65rem; }
    #experience .software-group h4 { font-size: 1rem; }
    #experience .courses-group .article-container { flex-direction: column; }
    #workflow .design-process { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
    #workflow .process-step { padding: 2rem 1rem 1rem; }
    #workflow .process-heading h3, #workflow .process-number, #workflow .process-step p { font-size: .9rem; }
    #contact { height: auto; padding-bottom: 2rem; }
    .contact-info-upper-container { flex-direction: column; box-sizing: border-box; max-width: 100%; }
    .contact-info-container { margin: .75rem; min-width: 0; }
    .contact-info-container p { font-size: 1rem; overflow-wrap: anywhere; }
    .button-container, .btn-container { flex-wrap: wrap; }
    /* Put the glass logo in the header flow on phones so it cannot cover content. */
    #hamburger-nav { justify-content: space-between; height: auto; min-height: 6rem; padding: .75rem 1rem; }
    .logo { position: relative; top: auto; left: auto; width: 8rem; height: 4.5rem; font-size: 1.05rem; }
    .nav-logo-image { width: 4.5rem; height: 4.5rem; }
    body > .logo { margin: 1rem; }
    body > main { margin: 2rem auto !important; padding: 0 1rem !important; box-sizing: border-box; }
    .website-intro { text-align: left; }
    #reviewer-form input { font-size: 16px; }
}

@media screen and (max-width: 480px) {
    #workflow .design-process { grid-template-columns: minmax(0, 1fr); }
    #workflow .process-step { min-height: 0; padding-bottom: 1.5rem; }
}

/* Mobile navigation: same destinations as desktop, tap to expand. */
@media screen and (max-width: 1200px) {
    #hamburger-nav .hamburger-icon {
        box-sizing: content-box;
        border: 0;
        background: transparent;
    }
    #hamburger-nav .menu-links {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    #hamburger-nav .menu-links:not(.open) {
        visibility: hidden;
    }
    #hamburger-nav .menu-links.open {
        visibility: visible;
        max-height: min(70dvh, 36rem);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    #hamburger-nav .mobile-menu-row {
        display: flex;
        align-items: center;
    }
    #hamburger-nav .menu-links a {
        text-align: left;
        white-space: normal;
        overflow-wrap: anywhere;
    }
    #hamburger-nav .mobile-menu-row > a {
        flex: 1;
        min-width: 0;
    }
    #hamburger-nav .mobile-submenu-toggle {
        flex-shrink: 0;
        min-width: 44px;
        min-height: 44px;
        border: 0;
        background: transparent;
        color: inherit;
        font: inherit;
        font-size: 1.4rem;
        cursor: pointer;
    }
    #hamburger-nav .mobile-submenu-toggle span {
        display: inline-block;
    }
    #hamburger-nav .mobile-submenu-toggle[aria-expanded="true"] span {
        transform: rotate(180deg);
    }
    #hamburger-nav .mobile-submenu {
        margin: 0;
        padding: 0 0 .5rem .75rem;
        list-style: none;
        background: #f6f6f6;
    }
    #hamburger-nav .mobile-submenu[hidden] {
        display: none;
    }
    #hamburger-nav .menu-links a:focus-visible,
    #hamburger-nav button:focus-visible {
        outline: 2px solid #333;
        outline-offset: -3px;
    }
}