/* Homepage only: keep the existing desktop layout and project pages intact. */
@media (max-width: 768px) {
    .homepage #page-container {
        /* resize.js scales the fixed desktop canvas; mobile uses a fluid canvas. */
        zoom: 1 !important;
        width: 100% !important;
        max-width: 100%;
        padding: 0 20px;
    }

    .homepage .top-name {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: calc(100% - 120px) !important;
        margin: 24px 0 0 !important;
        font-size: clamp(21px, 5.9vw, 28px) !important;
        line-height: 1.05 !important;
        text-align: left;
    }

    .homepage .top-brief {
        position: absolute !important;
        left: auto !important;
        right: 20px;
        top: 20px !important;
        width: auto !important;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 16px;
        /* Ignore the old nonbreaking spaces between links in the flex layout. */
        font-size: 0;
    }

    .homepage .top-brief a {
        display: flex;
        align-items: center;
        min-height: 44px;
        font-size: 13px;
    }

    .homepage .hero-center-container {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        width: 100% !important;
        margin: 48px 0 36px;
    }

    .homepage .hero-headline {
        font-size: clamp(30px, 8.2vw, 42px) !important;
        line-height: 1.12 !important;
        margin-bottom: 20px !important;
        text-wrap: balance;
    }

    .homepage .hero-positioning {
        padding: 0 !important;
        font-size: 14px !important;
        line-height: 1.65 !important;
        margin-bottom: 16px !important;
    }

    .homepage .hero-positioning br {
        display: none;
    }

    .homepage .hero-subheadline {
        font-size: 12px !important;
        color: rgba(225, 222, 219, 0.65) !important;
        letter-spacing: 0 !important;
        line-height: 1.65 !important;
        text-wrap: pretty;
    }

    .homepage .portfolio-section {
        width: 100%;
        margin: 0 0 40px !important;
    }

    .homepage .career-lens {
        margin: 0 0 32px !important;
    }

    .homepage .portfolio-label {
        font-size: 11px !important;
        color: rgba(225, 222, 219, 0.65) !important;
        margin-bottom: 12px !important;
    }

    .homepage .career-lens-options {
        grid-template-columns: 0.75fr 1.1fr 1.4fr !important;
        gap: 8px;
    }

    .homepage .career-lens-button {
        min-width: 0;
        min-height: 60px !important;
        padding: 10px 8px !important;
        text-align: center !important;
    }

    .homepage .career-lens-title {
        font-size: 12px !important;
        line-height: 1.4;
        margin-bottom: 0 !important;
    }

    .homepage .career-lens-description {
        /* The selected lens description remains visible above its projects. */
        display: none !important;
    }

    .homepage .portfolio-intro {
        font-size: 13px !important;
        color: rgba(225, 222, 219, 0.65) !important;
    }

    .homepage .project-hero-layout {
        flex-direction: column;
        min-height: 0 !important;
    }

    .homepage .project-hero-media {
        width: 100%;
        min-height: 0 !important;
        aspect-ratio: 16 / 9;
    }

    .homepage .project-hero-media > img,
    .homepage .project-hero-media > div:first-child {
        min-height: 0 !important;
        height: 100% !important;
    }

    .homepage .project-hero-content {
        width: 100%;
        padding: 20px !important;
    }

    .homepage .portfolio-section article h3 {
        font-size: 20px !important;
        line-height: 1.3;
    }

    .homepage .project-hero-subtitle,
    .homepage .project-hero-description {
        font-size: 14px !important;
    }

    .homepage .project-hero-description {
        color: rgba(225, 222, 219, 0.7) !important;
    }

    .homepage .project-track-badges span {
        font-size: 10px !important;
        line-height: 1.4;
    }

    .homepage .project-tag {
        font-size: 11px !important;
        line-height: 1.4;
        padding: 3px 7px !important;
    }

    .homepage .portfolio-section article:not(.project-hero) img {
        height: auto !important;
        aspect-ratio: 16 / 9;
    }

    .homepage .experience-contact-photo-name {
        left: auto;
        width: 100%;
        margin: 0 !important;
        padding-top: 32px;
        border-top: 1px solid var(--line-subtle);
        gap: 32px;
    }

    .homepage .experience-contact {
        margin: 0 !important;
        padding: 0;
    }

    .homepage .experience {
        font-size: 14px;
        line-height: 1.75;
        text-align: left;
        margin-bottom: 20px;
    }

    .homepage .contact-item {
        margin: 0;
        font-size: 14px;
    }

    .homepage .contact-item a {
        display: flex;
        align-items: center;
        min-height: 44px;
        overflow-wrap: anywhere;
    }

    .homepage .photo-name {
        height: auto;
        margin: 0 !important;
    }

    .homepage .photo-name img {
        max-width: 200px;
    }

    .homepage .photo-name p {
        font-size: 11px;
    }

    .homepage .index-bottom-copyright {
        margin: 24px 0 0 !important;
        padding: 16px 0 24px;
        font-size: 11px;
    }
}