@media (max-width: 1200px) {
    section {
        padding: 4.5rem 3rem;
    }

    .hero-section,
    .about-grid,
    .skills-layout,
    .resume-panel,
    .contact-layout {
        grid-template-columns: 1fr;
    }

    .projects-container {
        grid-template-columns: 1fr;
    }

    .hero-copy h2 {
        max-width: 14ch;
    }
}

@media (max-width: 980px) {
    :root {
        --sidebar-width: 18rem;
    }

    section {
        padding: 4rem 2rem;
    }

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

    .hero-visual {
        min-height: 28rem;
    }
}

@media (max-width: 860px) {
    .menu-toggle {
        display: inline-flex;
        width: 2.75rem;
        height: 2.75rem;
        top: 0.85rem;
        right: 0.85rem;
    }

    .side-menu {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        width: min(85vw, 20rem);
    }

    .side-menu.active {
        transform: translateX(0);
    }

    .main-content {
        width: 100%;
        margin-left: 0;
    }

    .hero-section {
        padding-top: 6.5rem;
    }

    .hero-copy h2 {
        font-size: clamp(2.7rem, 9vw, 4.2rem);
    }

    .section-heading {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 640px) {
    section {
        padding: 3.5rem 1.2rem;
    }

    .glass-card,
    .profile-card,
    .contact-form,
    .contact-copy,
    .modal-contented {
        padding: 1.2rem;
        border-radius: 1.4rem;
    }

    .hero-highlights,
    .hero-actions,
    .project-links {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-highlights {
        padding-right: 3.4rem;
    }

    .highlight-chip {
        width: 100%;
    }

    .highlight-chip,
    .detail-item,
    .timeline-card {
        align-items: flex-start;
        flex-direction: column;
    }

    .soft-skill {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 0.85rem;
    }

    .soft-skill i {
        width: 1.4rem;
        flex: 0 0 1.4rem;
    }

    .soft-skill span {
        flex: 1;
    }

    .soft-skill strong {
        text-align: right;
        white-space: nowrap;
    }

    .project-links {
        width: 100%;
    }

    .project-links > * {
        width: 100%;
        min-height: 3.5rem;
        flex: 0 0 auto;
    }

    .tool-grid {
        grid-template-columns: 1fr 1fr;
    }

    .hero-visual {
        min-height: 23rem;
    }

    .portrait-card {
        width: min(100%, 19rem);
    }

    .top-card,
    .bottom-card {
        position: static;
        margin-top: 1rem;
        max-width: 100%;
    }

    .hero-visual {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        align-items: center;
    }
}

@media (max-width: 420px) {
    .tool-grid {
        grid-template-columns: 1fr;
    }

    .soft-skill {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .soft-skill strong {
        width: 100%;
        padding-left: 2.25rem;
        text-align: left;
    }

    .hero-copy h2,
    .section-heading h2 {
        letter-spacing: -0.04em;
    }

    .modal-contented h3 {
        font-size: 1.6rem;
    }
}