/* Mobile Styles */
@media (max-width: 810px) {
    /* Mobile Header Bar */
    body::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 56px;
        background: var(--color-bg);
        z-index: 998;
        border-bottom: 1px solid var(--color-border);
    }

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

    .left-column {
        position: fixed;
        top: 0;
        left: -100%;
        width: 280px;
        height: 100vh;
        background: var(--color-bg);
        z-index: 999;
        transition: left 0.2s ease;
        border-right: 1px solid var(--color-border);
    }

    .left-column.open {
        left: 0;
    }

    .mobile-nav-toggle {
        display: flex;
        top: 12px;
        left: 16px;
    }

    .content-column {
        padding: calc(var(--spacing-unit) * 4) calc(var(--spacing-unit) * 4);
        padding-top: 80px;
    }

    .page-title {
        font-size: 32px;
    }

    .two-column-content {
        grid-template-columns: 1fr;
        gap: calc(var(--spacing-unit) * 6);
    }

    .column-right {
        padding-top: 0;
    }

    .stats-row {
        flex-wrap: wrap;
        gap: calc(var(--spacing-unit) * 4);
    }

    .comparison-grid {
        grid-template-columns: 1fr;
        gap: calc(var(--spacing-unit) * 6);
    }

    .comparison-column {
        min-height: auto;
    }

    .compact-two-col {
        grid-template-columns: 1fr;
        gap: calc(var(--spacing-unit) * 4);
    }

    .principles-grid {
        grid-template-columns: 1fr;
        gap: calc(var(--spacing-unit) * 4);
    }

    .service-row {
        grid-template-columns: 1fr;
        gap: calc(var(--spacing-unit) * 1);
    }

    .approach-grid {
        grid-template-columns: 1fr;
        gap: calc(var(--spacing-unit) * 3);
    }

    .approach-connection {
        margin-top: 0;
    }

    .work-row {
        grid-template-columns: 1fr;
        gap: calc(var(--spacing-unit) * 1);
    }

    .cta-row {
        flex-direction: column;
    }

    /* Articles mobile */
    .post-list-item {
        padding: 18px;
    }

    .post-list-item-title {
        font-size: 22px;
    }

    .post-list-item-description {
        font-size: 16px;
    }

    .post {
        max-width: 100%;
    }

    .post-title {
        font-size: 28px;
    }

    .post-content {
        font-size: 16px;
    }

    .post-content h2 {
        font-size: 22px;
        margin-top: 32px;
    }

    .post-content h3 {
        font-size: 18px;
        margin-top: 24px;
    }

    /* Rules drawer mobile */
    .rules-handle {
        top: auto;
        bottom: 24px;
        right: 16px;
        transform: none;
        writing-mode: horizontal-tb;
        text-orientation: mixed;
        border-radius: 4px;
        border: 1px solid var(--color-border);
        padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2);
    }

    .rules-drawer {
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-width: none;
        min-width: auto;
        height: auto;
        max-height: 80vh;
        border-left: none;
        border-top: 1px solid var(--color-border);
        border-radius: 12px 12px 0 0;
        transform: translateY(100%);
    }

    .rules-drawer.open {
        transform: translateY(0);
    }

    .rules-drawer-inner {
        padding: calc(var(--spacing-unit) * 4);
    }
}