html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    overflow-x: hidden;
}

img,
svg,
video,
canvas,
iframe {
    max-width: 100%;
}

table {
    max-width: 100%;
}

input,
select,
textarea,
button {
    max-width: 100%;
}

.nav,
.article-nav {
    max-width: calc(100vw - 24px);
}

.nav-links,
.article-links {
    min-width: 0;
}

.post-grid,
.tool-catalog,
.result-grid,
.spec-grid,
.data-grid,
.cards-grid {
    min-width: 0;
}

.post-card,
.tool-card,
.result-item,
.side-panel,
.panel,
.output-card,
.tool-shell,
.hero-copy,
.hero-side {
    min-width: 0;
}

.post-body p,
.result-value,
.tool-card p,
.lead {
    overflow-wrap: anywhere;
}

.result-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.result-table thead,
.result-table tbody,
.result-table tr {
    width: 100%;
}

.tool-button,
.copy-button,
.post-link,
.tag,
.featured-link {
    touch-action: manipulation;
}

@media (hover: none) {
    .post-card:hover,
    .tool-card:hover,
    .featured-link:hover,
    .post-link:hover,
    .tag:hover {
        transform: none !important;
    }
}

@media (max-width: 1024px) {
    .site-header,
    .article-header,
    main,
    .site-footer {
        padding-inline: clamp(14px, 3vw, 24px);
    }

    .blog-layout,
    .hero,
    .tool-workspace,
    .selector-row,
    .content-layout,
    .article-layout {
        grid-template-columns: 1fr !important;
    }

    .sidebar {
        order: 2;
    }
}

@media (max-width: 820px) {
    .post-grid,
    .tool-catalog,
    .result-grid,
    .inline-grid,
    .spec-grid,
    .data-grid,
    .cards-grid {
        grid-template-columns: 1fr !important;
    }

    .post-card.command-post,
    .post-card.linux-post,
    .post-card {
        grid-template-rows: minmax(190px, auto) auto auto !important;
    }

    .post-media {
        min-height: 190px;
    }
}

@media (max-width: 640px) {
    .site-header,
    .article-header {
        top: 8px;
        padding-inline: 10px;
    }

    .nav,
    .article-nav {
        align-items: stretch !important;
        border-radius: 24px !important;
        flex-direction: column !important;
        gap: 10px !important;
        padding: 10px !important;
    }

    .brand {
        justify-content: flex-start;
    }

    .nav-links,
    .article-links {
        width: 100%;
        display: flex;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
        scrollbar-width: thin;
    }

    .nav-links a,
    .article-links a {
        flex: 0 0 auto;
        min-height: 42px;
        white-space: nowrap;
    }

    main {
        padding-top: 72px !important;
    }

    h1 {
        font-size: clamp(2.35rem, 15vw, 4.2rem) !important;
        line-height: 0.98 !important;
    }

    .hero-copy,
    .tool-shell,
    .post-showcase,
    .catalog-panel,
    .panel,
    .output-card,
    .side-panel {
        border-radius: 22px !important;
        padding: clamp(16px, 5vw, 24px) !important;
    }

    .catalog-tools {
        grid-template-columns: 1fr !important;
    }

    .hero-side {
        min-height: 240px !important;
    }

    .hero-side img {
        width: min(100%, 360px) !important;
    }

    .post-footer {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    .post-link,
    .tool-button,
    .copy-button {
        width: 100%;
    }
}

@media (max-width: 390px) {
    .brand span:last-child {
        font-size: 0.95rem;
    }

    .nav-links a,
    .article-links a {
        padding-inline: 11px !important;
        font-size: 0.86rem !important;
    }

    .post-body,
    .post-footer {
        padding-inline: 16px !important;
    }
}