html,
body {
    @media screen and (min-width: 30em) {
        /* PERF: https://marco.org/2012/11/15/text-rendering-optimize-legibility */
        text-rendering: optimizeLegibility;
    }
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
}

.container {
    margin: auto;
}

ul,
li {
    margin: 0;
    padding: 0;
}

.outline-none:focus {
    outline: none;
}

.underline-hover {
    padding-bottom: 0.05em;
    border-bottom: 1px solid transparent;
}
.underline-hover:focus,
.underline-hover:hover {
    text-decoration: none;
    transition: border-color 0.1s;
    border-bottom: 1px solid;
}

.serif {
    font-family: Source Serif Pro, georgia, times, serif;
}

p {
    margin-top: 1em;
    margin-bottom: 1em;
}

h2 {
    /* f5 */
    font-size: 1.25rem;
    /* mt4 */
    margin-top: 4rem;
    font-weight: 700;
}
@media screen and (min-width: 60em) {
    h2 {
        font-size: 1.5rem;
    }
}

h3 {
    /* f6 */
    font-size: 1rem;
    /* mt3 */
    margin-top: 2rem;
    font-weight: 700;
}
@media screen and (min-width: 60em) {
    h3 {
        font-size: 1.25rem;
    }
}

.hover-bg-nearest-white:focus,
.hover-bg-nearest-white:hover {
    background-color: #fafafa;
}

@media screen and (min-width: 40em) {
    .x-top {
        font-size: 0.875rem;
        width: 20%;
        flex: 0 0 auto;
        border-right: 1px solid;
        border-left: 1px solid;
    }
    .x-top:first-child {
        border-left: none;
    }
    .x-top:last-child {
        border-right: none;
    }
    .x-previous,
    .x-next {
        font-size: 0.875rem;
        width: 40%;
        flex: 1 1 auto;
    }
}

section.aych
 {
    hyphens: auto;
}

@media screen and (min-width: 60em) {
    section.aych {
        hyphens: none;
    }
}