@media (max-width: 500px) {
    :root {
        --mobile-thumbnail-reference-width: min(499.905px, calc((100vw - var(--content-left) - var(--right-inset, 44px)) * 1.3225), calc(100vw - var(--content-left) + 32px));
        /* Preserve the right margin and match it after the resting 9px ticks. */
        --mobile-column-gap: calc(100vw - var(--content-left) + 40px - var(--mobile-thumbnail-reference-width));
        --mobile-project-left: calc(var(--ruler-left) - 32px + 9px + var(--mobile-column-gap));
        --mobile-thumbnail-width: calc(100vw - var(--mobile-project-left) - var(--mobile-column-gap));
    }
    #ruler {
        left: calc(var(--ruler-left) - 32px);
    }
    .row-left {
        position: relative;
        left: 6px;
    }
    .company-ghost,
    .detail-ghost {
        left: 6px;
    }
    .company-name,
    .detail-name,
    .company-ghost,
    .detail-ghost,
    .date-marker {
        max-width: calc(var(--ruler-left) - 50px);
        padding-left: 0;
        white-space: normal;
        overflow-wrap: anywhere;
    }
    #red-line,
    #cdl {
        left: 0;
        width: calc(var(--ruler-left) - 44px);
    }
    .row-right .date-marker {
        translate: 6px 0;
    }
    .back-btn {
        margin-left: -32px;
        max-width: calc(var(--ruler-left) - 36px);
        white-space: normal;
        overflow-wrap: anywhere;
    }
    .project-page .intro {
        padding-left: var(--mobile-project-left);
        padding-right: var(--mobile-column-gap);
        overflow-wrap: anywhere;
    }
    .project-page .intro-name {
        margin-right: 0;
    }
    .project-page .intro-tagline {
        max-width: 100%;
    }
    .project-page .project-brand-inline {
        margin-bottom: 28px !important;
    }
    .project-page .intro > div[style*="display: flex; gap: 60px"] {
        flex-direction: column !important;
        gap: 24px !important;
    }
    .project-page .intro-name.is-sticky {
        padding-left: var(--mobile-project-left);
        padding-right: calc(var(--mobile-column-gap) + 28px);
    }
    .project-page .intro-name .sticky-logo {
        left: auto;
        right: var(--mobile-column-gap);
    }
    .project-page .project-brand {
        left: var(--mobile-project-left) !important;
        right: var(--mobile-column-gap);
        flex-wrap: wrap;
    }
    .project-page .row-right {
        padding-left: 0;
        margin-left: calc(var(--mobile-project-left) - var(--ruler-left));
        padding-right: var(--mobile-column-gap);
        min-width: 0;
        overflow-wrap: anywhere;
    }
    /* Gallery containers carry desktop widths inline; fit them to the mobile column. */
    .project-page .row-right > .entry,
    .project-page .entry > *,
    .project-page .details-group > *,
    .project-page .details-thumb,
    .project-page .video-embed,
    .project-page .row-right .details-desc,
    .project-page .details-caption > * {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0;
    }
    .project-page .details-desc {
        padding-left: 0 !important;
    }
    .project-page .details-caption {
        flex-direction: column;
        gap: 16px;
    }
    .project-page .entry {
        flex-direction: column;
    }
    .project-page .emoji-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
    .project-page .emoji-item {
        max-width: 100%;
        height: auto;
    }
    .project-page .step-img {
        margin-left: 0 !important;
    }
    .project-page .reel-credits {
        padding: 0 !important;
        margin-left: 0 !important;
    }
}