:root {
    --max: 980px;
    --fg: #0b0b0c;
    --muted: #555;
    --link: #0a66c2;
    --bg: #fff;
    --card: #f7f7f8
}

/*html, body {*/
/*    background: var(--bg);*/
/*    color: var(--fg);*/
/*    font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif;*/
/*    margin: 0*/
/*}*/

main {
    max-width: var(--max);
    margin: 2rem auto;
    padding: 0 1rem 6rem
}

h1, h2, h3 {
    line-height: 1.25;
    margin: 1.2rem 0 .6rem
}

h1 {
    font-size: 2rem
}

h2 {
    font-size: 1.35rem;
    margin-top: 2rem
}

h3 {
    font-size: 1.1rem;
    margin-top: 1.2rem
}

p, li {
    /*max-width: 78ch*/
}

code {
    background: var(--card);
    padding: .1rem .3rem;
    border-radius: .4rem
}

.card {
    background: var(--card);
    border: 1px solid #e8e8ea;
    border-radius: 16px;
    padding: 1rem;
    margin: 1rem 0
}

.muted {
    color: var(--muted)
}

nav.toc {
    position: sticky;
    top: 0;
    background: linear-gradient(#fff, #fffcc0 0, #fff);
    padding: .75rem 1rem;
    border-bottom: 1px solid #eee
}

nav.toc a {
    margin-right: 1rem
}

a {
    color: var(--link);
    text-decoration: none
}

a:hover {
    text-decoration: underline
}

.meta {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: .5rem;
    /*max-width: 38rem*/
}

.small {
    font-size: .925rem
}

/*hr {*/
/*    border: 0;*/
/*    border-top: 1px solid #eee;*/
/*    margin: 2rem 0*/
/*}*/

ul {
    padding-left: 1.2rem
}

.notice {
    padding: .75rem 1rem;
    border-left: 4px solid #fd0;
    background: #fff8db;
    border-radius: .5rem;
    margin: 1rem 0
}

.two-col {
    display: grid;
    grid-template-columns:1fr;
    gap: 1.25rem
}

@media (min-width: 860px) {
    .two-col {
        grid-template-columns:1fr 1fr
    }
}

.footer {
    margin-top: 3rem;
    font-size: .9rem;
    color: var(--muted)
}

.print-hint {
    display: block;
    margin: .25rem 0 .5rem
}