html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

body {
    text-wrap: pretty;
}

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

h1,
h2,
h3,
h4,
p,
li,
a,
button,
label,
span,
strong {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: auto;
}

.prose,
.prose * {
    overflow-wrap: anywhere;
    hyphens: auto;
}

.max-w-7xl,
.max-w-6xl,
.max-w-5xl,
.max-w-4xl,
.max-w-3xl,
.max-w-2xl {
    min-width: 0;
}

@media (max-width: 430px) {
    body {
        font-size: 15px;
    }

    .px-6 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .p-10 {
        padding: 1.25rem !important;
    }

    .p-8 {
        padding: 1rem !important;
    }

    .max-w-7xl,
    .max-w-6xl,
    .max-w-5xl,
    .max-w-4xl,
    .max-w-3xl,
    .max-w-2xl {
        width: min(100%, calc(100vw - 2rem));
    }

    nav .h-20 {
        height: 4.5rem;
    }

    h1 {
        font-size: clamp(2rem, 9.4vw, 2.85rem) !important;
        line-height: 0.98 !important;
        letter-spacing: -0.03em !important;
        text-wrap: balance;
    }

    h2 {
        font-size: clamp(1.55rem, 7.4vw, 2.1rem) !important;
        line-height: 1.05 !important;
        letter-spacing: -0.02em !important;
        text-wrap: balance;
    }

    h3 {
        font-size: clamp(1.2rem, 5.8vw, 1.5rem) !important;
        line-height: 1.12 !important;
        text-wrap: balance;
    }

    h4 {
        font-size: clamp(1.05rem, 5vw, 1.25rem) !important;
        line-height: 1.2 !important;
    }

    .text-9xl {
        font-size: 5rem !important;
        line-height: 0.95 !important;
    }

    p,
    li {
        line-height: 1.58 !important;
    }

    .tracking-widest,
    .tracking-wider,
    .tracking-wide {
        letter-spacing: 0.04em !important;
    }

    #mobile-menu a,
    #mobile-menu button {
        font-size: 1rem !important;
        line-height: 1.35 !important;
        letter-spacing: 0.05em !important;
    }

    footer .uppercase {
        letter-spacing: 0.05em !important;
    }

    .fixed.bottom-8.left-8,
    .fixed.bottom-24.left-8 {
        left: 1rem !important;
    }

    .fixed.bottom-8.right-8,
    .fixed.bottom-24.right-8 {
        right: 1rem !important;
    }
}

@media (max-width: 360px) {
    h1 {
        font-size: clamp(1.8rem, 8.8vw, 2.35rem) !important;
    }

    h2 {
        font-size: clamp(1.4rem, 7vw, 1.9rem) !important;
    }

    body {
        font-size: 14px;
    }
}