@media (max-width: 1080px) {
    .primary-nav {
        gap: 1rem;
    }

    .nav-action {
        margin-left: 0.2rem;
    }

    .hero-layout {
        grid-template-columns: minmax(0, 1fr) minmax(310px, 0.68fr);
        gap: 3.5rem;
    }

    .hero-copy h1 {
        font-size: clamp(4rem, 7vw, 5.8rem);
    }

    .project-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .journey-layout {
        grid-template-columns: minmax(240px, 0.35fr) minmax(0, 1fr);
        gap: 2.5rem;
    }

    .timeline-item {
        grid-template-columns: 108px minmax(0, 1fr);
        gap: 1rem 1.5rem;
    }

    .timeline-description {
        grid-column: 2;
        margin-top: -0.25rem;
    }

    .resume-panel {
        grid-template-columns: minmax(0, 1fr) minmax(250px, 0.72fr);
    }

    .resume-preview {
        display: none;
    }
}

@media (max-width: 900px) {
    .nav-action {
        display: none;
    }

    .primary-nav {
        margin-left: auto;
    }

    .hero {
        min-height: auto;
        padding-bottom: 6.5rem;
    }

    .hero-layout {
        grid-template-columns: minmax(0, 1fr) minmax(280px, 0.62fr);
        gap: 2.5rem;
    }

    .about-layout {
        gap: 4rem;
    }

    .journey-layout {
        grid-template-columns: 1fr;
        gap: 2.7rem;
    }

    .journey-heading {
        max-width: 620px;
        padding-top: 0;
    }

    .tech-map {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tech-map::before {
        display: none;
    }
}

@media (max-width: 760px) {
    html {
        scroll-padding-top: 92px;
    }

    .container {
        width: min(calc(100% - 32px), var(--container));
    }

    .site-header {
        padding: 12px 12px 0;
    }

    .nav-shell {
        min-height: 60px;
        padding: 5px 6px 5px 20px;
    }

    .primary-nav {
        position: fixed;
        top: 84px;
        right: 12px;
        left: 12px;
        z-index: -1;
        padding: 0.85rem;
        display: grid;
        gap: 0.2rem;
        border: 1px solid var(--glass-border);
        border-radius: 26px;
        background: rgba(255, 255, 255, 0.94);
        box-shadow: var(--shadow-glass);
        opacity: 0;
        pointer-events: none;
        transform: translateY(-12px) scale(0.98);
        transform-origin: top;
        transition: opacity 220ms ease, transform 260ms var(--ease);
    }

    .primary-nav.open {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0) scale(1);
    }

    .nav-link {
        min-height: 50px;
        padding: 0 1rem;
        display: flex;
        align-items: center;
        border-radius: 15px;
        font-size: 0.98rem;
    }

    .nav-link:hover,
    .nav-link.active {
        background: rgba(0, 113, 227, 0.075);
    }

    .nav-link::after {
        display: none;
    }

    .menu-button {
        display: block;
        margin-left: auto;
    }

    .hero {
        padding: 116px 0 6rem;
        align-items: start;
        background:
            radial-gradient(circle at 50% 24%, rgba(217, 233, 255, 0.54), transparent 28%),
            var(--color-bg);
    }

    .hero-layout {
        display: flex;
        flex-direction: column;
        gap: 2.2rem;
    }

    .hero-copy h1 {
        font-size: clamp(3.1rem, 13vw, 4.65rem);
        line-height: 0.98;
        text-align: left;
    }

    .hero-copy > p {
        margin-top: 1.55rem;
        font-size: 1rem;
        line-height: 1.62;
    }

    .hero-actions {
        margin-top: 2rem;
    }

    .portrait {
        width: min(100%, 480px);
        align-self: center;
        justify-self: auto;
    }

    .portrait-frame {
        border-radius: 28px 28px 20px 20px;
    }

    .portrait figcaption {
        border-radius: 0 0 20px 20px;
        font-size: 0.68rem;
    }

    .section {
        padding: 6rem 0;
    }

    .work-section {
        padding-top: 5rem;
    }

    .section-heading {
        display: block;
    }

    .section-heading h2,
    .about-copy h2,
    .journey-heading h2,
    .resume-copy h2,
    .connect-panel h2 {
        font-size: clamp(2.75rem, 12vw, 4.15rem);
    }

    .section-heading > p {
        margin-top: 1.5rem;
    }

    .about-layout {
        grid-template-columns: 1fr;
        gap: 3.5rem;
    }

    .principle-list {
        margin-top: 0;
    }

    .resume-panel {
        min-height: auto;
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .connect-panel {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .site-footer .container {
        flex-wrap: wrap;
    }
}

@media (max-width: 620px) {
    .project-grid,
    .tech-map {
        grid-template-columns: 1fr;
    }

    .project-card:not(.is-expanded) {
        display: grid;
        grid-template-columns: 118px minmax(0, 1fr);
        align-items: center;
        gap: 0;
        padding: 0.75rem;
    }

    .project-card:not(.is-expanded) .project-media {
        aspect-ratio: 1.25;
        border-radius: 17px;
    }

    .project-card:not(.is-expanded) .project-image--logo {
        padding: 0.2rem;
    }

    .project-card:not(.is-expanded) .project-placeholder span {
        font-size: 1.65rem;
    }

    .project-card:not(.is-expanded) .project-summary {
        min-height: 100%;
        padding: 0 0 0 1rem;
    }

    .project-card:not(.is-expanded) .project-details {
        grid-column: 1 / -1;
    }

    .timeline {
        padding: 0.65rem 1rem 0.65rem 3.35rem;
    }

    .timeline::before {
        top: 2.25rem;
        bottom: 2.25rem;
        left: 1.75rem;
    }

    .timeline-item {
        padding: 1.4rem 0;
        display: block;
    }

    .timeline-item::before {
        top: 1.55rem;
        left: -2.08rem;
        width: 14px;
        height: 14px;
    }

    .timeline-role h3 {
        margin-top: 0.62rem;
    }

    .timeline-description {
        margin-top: 0.8rem;
    }

    .tech-category {
        padding: 0.65rem;
    }
}

@media (max-width: 420px) {
    .hero-actions,
    .hero-actions .button,
    .connect-actions .button {
        width: 100%;
    }

    .hero-copy h1 {
        font-size: clamp(2.95rem, 13vw, 3.45rem);
    }

    .portrait figcaption {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.25rem;
    }

    .portrait figcaption span:last-child {
        text-align: left;
    }

    .project-card:not(.is-expanded) {
        grid-template-columns: 104px minmax(0, 1fr);
    }

    .project-summary h3 {
        font-size: 1.05rem;
    }

    .connect-actions > div {
        grid-template-columns: 1fr;
    }

    .connect-email {
        font-size: 0.82rem;
    }

    .site-footer .container {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.75rem;
    }

    .back-to-top {
        position: absolute;
        right: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *, *::before, *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

    .js .reveal {
        opacity: 1;
        transform: none;
    }
}