body {
    background: var(--black);
    color: var(--white);
}

body.menu-open {
    overflow: hidden;
}

html {
    scroll-padding-top: calc(var(--header-height) + var(--space-s));
}

::selection {
    background: var(--primary);
    color: var(--white);
}

:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 4px;
}

.section {
    padding-inline: var(--gutter);
    margin-top: var(--section-gap);
}

.section-heading {
    margin-bottom: var(--panel-padding);
}

.section-label {
    display: inline-flex;
    padding: var(--space-xs) var(--space-s);
    border-radius: var(--radius);
    background: var(--surface-muted);
}

.grid-two {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--grid-gap);
}

.panel {
    padding: var(--panel-padding);
    background: var(--grey-dark);
    border-radius: var(--radius);
}

.stack {
    display: flex;
    flex-direction: column;
    gap: var(--grid-gap);
}

.sr-only, .skip-link:not(:focus) {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.skip-link:focus {
    position: fixed;
    top: var(--space-s);
    left: var(--gutter);
    z-index: 100;
    padding: var(--space-s);
    background: var(--white);
    color: var(--black);
}

@media (max-width: 700px) {
    .grid-two {
        grid-template-columns: minmax(0, 1fr);
    }

    .panel {
        padding: var(--space-s);
    }

    .section-heading {
        margin-bottom: var(--space-s);
    }

}