html {
    box-sizing: border-box;
    height: 100%;
    background: var(--color-background);
    margin: 0;
    padding: 0;
}

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    font-size: var(--font-s);
    line-height: 1.5;
    font-weight: 400;
    font-family: var(--font-body-family);
    font-optical-sizing: auto;
    font-style: normal;
    color: var(--color-text);
    min-height: 100%;
}

img {
    max-width: 100%;
    height: auto;
    border: 0;
    display: block;
}

h1,
h2,
h3,
h4 {
    font-family: var(--font-heading-family);
    line-height: var(--font-heading-line-height);
    font-optical-sizing: auto;
    font-weight: var(--font-heading-weight);
    max-width: var(--font-heading-width);
    margin-bottom: calc(var(--rhythm) / 3);
}

h1 {
    font-size: var(--font-xl);
    max-width: 30ch;
    margin-bottom: var(--rhythm);
}

h2 {
    font-size: var(--font-m);
}

h3 {
    font-size: var(--font-s);
}

h4 {
    font-size: var(--font-xs);
}

small {
    font-size: var(--font-xs);
    line-height: 1.2;
}

hr {
    border: 0;
    border-top: 1px solid var(--color-subtle);
    margin: var(--spacing-s) 0;
}

a {
    gap: var(--spacing-xxs);
    color: var(--color-palette-secondary-70);
    text-decoration: none;
    background-color: transparent;

    &:active,
    &:hover {
        outline: 0;
    }
}

a:hover {
    text-decoration: none;
    color: var(--color-palette-secondary-90);
}

ul, ol {
    margin-left: 2em;
    margin-bottom: var(--rhythm);
}

li + li {
    margin-top: var(--spacing-xs);
}

p {
    max-width: 60ch;
    margin-bottom: var(--rhythm);
}

p a,
li a {
    text-decoration: underline;
}

dl dt {
    font-family: var(--font-heading-family);
    font-weight: var(--font-heading-weight);
}

dl dd + dt {
    margin-top: var(--spacing-s);
}

.preamble {
    font-family: var(--font-preamble-family);
    font-size: var(--font-preamble-size);
    line-height: var(--font-preamble-line-height);
    font-weight: var(--font-preamble-weight);
    max-width: var(--font-preamble-width);
}

.container {
    max-width: var(--layout-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--spacing-xs);
    padding-right: var(--spacing-xs);

    @media screen and (min-width: 576px) {
        padding-left: var(--spacing-s);
        padding-right: var(--spacing-s);
    }
}

.rhythm > * + :where(astro-island, astro-slot) > *:first-child {
    margin-block-start: var(--rhythm);
}
