@media (max-width: 760px) {
    body {
        line-height: 1.6;
    }

    .nav-shell {
        min-height: 74px;
    }

    .brand {
        font-size: 1rem;
    }

    .hero {
        padding-top: 28px;
    }

    .hero-grid {
        gap: 28px;
    }

    .hero h1 {
        font-size: clamp(2.5rem, 12vw, 3.8rem);
        max-width: none;
    }

    .hero-text {
        font-size: 1rem;
    }

    .eyebrow,
    .section-label,
    .strip-label {
        font-size: 0.76rem;
        letter-spacing: 0.14em;
    }

    .section-heading {
        margin-bottom: 32px;
    }

    .section-heading h2,
    .contact-banner h2 {
        font-size: clamp(1.95rem, 8vw, 2.7rem);
    }

    .portrait-frame {
        border-radius: 28px;
        max-width: 340px;
        padding: 14px;
    }

    .portrait-frame img {
        border-radius: 22px;
    }

    .portrait-badge {
        bottom: 20px;
        left: 20px;
        font-size: 0.82rem;
        padding: 10px 14px;
    }

    .highlight-strip,
    .about-panel,
    .info-card,
    .skill-card,
    .project-card,
    .contact-card,
    .contact-banner,
    .metric-card {
        border-radius: 22px;
    }

    .highlight-strip,
    .about-panel,
    .info-card,
    .skill-card,
    .project-card,
    .contact-card,
    .contact-banner,
    .metric-card {
        padding: 22px;
    }

    .social-links {
        justify-content: center;
    }

    .project-card h3,
    .skill-card h3,
    .contact-card h3,
    .info-card h3 {
        font-size: 1.12rem;
    }

    .project-tag,
    .project-number {
        font-size: 0.75rem;
    }

    .project-actions .button,
    .hero-actions .button,
    .contact-actions .button {
        min-height: 48px;
    }

    .footer-shell {
        font-size: 0.88rem;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 16px;
    }

    .section {
        padding: 72px 0;
    }

    .site-nav {
        border-radius: 20px;
        padding: 80px 20px 20px;
        right: 16px;
        width: calc(100vw - 32px);
    }

    .hero-grid {
        gap: 24px;
    }

    .hero-text,
    .highlight-strip p,
    .about-panel p,
    .info-card p,
    .project-card p,
    .project-story p,
    .contact-card p,
    .contact-list li,
    .skill-card li {
        font-size: 0.95rem;
    }

    .hero-actions,
    .project-actions,
    .contact-actions,
    .social-links {
        margin-top: 24px;
    }

    .social-links a {
        height: 44px;
        width: 44px;
    }

    .highlight-strip,
    .about-panel,
    .info-card,
    .skill-card,
    .project-card,
    .contact-card,
    .contact-banner,
    .metric-card {
        padding: 20px;
    }

    .portrait-badge {
        bottom: 16px;
        left: 16px;
        right: 16px;
        justify-content: center;
    }
}