@media (max-width: 44rem) {
    body > nav.site-nav.box {
        position: fixed;
        inset: auto 0 0 0;
        z-index: 10;
        padding: 0.65rem 0.75rem calc(0.65rem + env(safe-area-inset-bottom));
        background: var(--surface);
        border: 0;
        border-top: 2px solid var(--border);
        border-radius: 0;
        box-shadow: 0 -4px 0 var(--hard-shadow);
    }

    .site-nav .tag {
        display: none;
    }

    .site-nav .links {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
        gap: 0.6rem;
    }

    .site-nav .links a {
        padding: 0.6rem 0.25rem;
        font-size: 0.95rem;
        font-weight: 700;
        text-align: center;
        color: var(--text);
        background: var(--bg);
        border: 2px solid var(--border);
        border-radius: 3px;
        box-shadow: 3px 3px 0 var(--hard-shadow);
    }

    .site-nav .links a::before {
        display: none;
    }

    /* The page you are on is pressed in */
    .site-nav .links a[aria-current] {
        color: var(--bg);
        background: var(--accent);
        border-color: var(--accent);
        box-shadow: 1px 1px 0 var(--hard-shadow);
        transform: translate(2px, 2px);
    }
}