/* Shared mobile article typography and table reflow. Desktop rules are untouched. */
@media (max-width: 720px) {
    html.white-apple-theme body.page-blog-detail main#main-content #article-container.article-container .article-title {
        font-size: 27px !important;
        line-height: 1.08 !important;
        letter-spacing: -0.025em !important;
        font-weight: 700 !important;
        text-wrap: balance;
    }

    html.white-apple-theme body.page-blog-detail main#main-content #article-container.article-container .blog-category {
        max-width: 100%;
        font-size: 10px !important;
        line-height: 1.35 !important;
        letter-spacing: 0.055em !important;
        white-space: normal;
    }

    .article-content table,
    .article-content thead,
    .article-content tbody,
    .article-content tr,
    .article-content th,
    .article-content td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    .article-content table { border: 0; }

    .article-content thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
    }

    .article-content tbody tr {
        margin: 0 0 16px;
        padding: 16px;
        border: 1px solid rgba(28, 32, 30, 0.12);
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.72);
    }

    .article-content tbody td {
        min-width: 0;
        padding: 0;
        border: 0;
        overflow-wrap: break-word;
        word-break: normal;
    }

    .article-content tbody td + td {
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid rgba(28, 32, 30, 0.12);
    }

    .article-content tbody td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 4px;
        color: var(--muted);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.045em;
        line-height: 1.35;
        text-transform: uppercase;
    }
}