main.css

@charset "UTF-8";:root {
    --brand-gradient:linear-gradient(45deg,#f012be,#0074d9);--brand-gradient-alpha:linear-gradient(45deg,rgba(240,18,190,0.06667),rgba(0,116,217,0.06667));--scale:1rem}

@media (min-width: 768px) {
    :root {
        --scale:1.17rem
    }
}

@media (min-width: 1260px) {
    :root {
        --scale:1.27rem
    }
}

:focus {
    outline: none
}

[hidden] {
    display: none!important
}

noscript {
    display: block;
    font-size: 1.2em;
    margin: 1.2em
}

html {
    -ms-hyphens: auto;
    -webkit-hyphens: auto;
    background-color: #fff;
    color: #333;
    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
    font-size: var(--scale);
    hyphens: auto;
    line-height: 1.58;
    overflow-y: scroll
}

h1,h2,h3,h4,h5,h6,ol,p,ul {
    font-size: 1em;
    font-weight: 400;
    margin: 0
}

code {
    font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace;
    font-size: 90%;
    word-spacing: -.3em
}

pre {
    -ms-hyphens: none;
    -webkit-hyphens: none;
    hyphens: none;
    word-break: normal
}

pre code {
    word-spacing: inherit
}

a {
    color: #00f;
    text-decoration: none
}

a:hover {
    background-image: linear-gradient(currentColor,currentColor);
    background-position: center bottom 4.5%;
    background-repeat: no-repeat;
    background-size: 100% .074em;
    text-shadow: .1em 0 #fff,.05em 0 #fff,-.05em 0 #fff,-.1em 0 #fff
}

:not(pre):not(th):not(td)>code {
    padding: 0 .2em
}

:not(pre):not(th):not(td):not(h3):not(a):not(li)>code {
    background-color: #f9f9f9;
    border-radius: .2em;
    padding: .1em .2em
}

[type=button],[type=reset],[type=submit],button {
    background-repeat: repeat
}

[data-whatinput=keyboard] a:focus {
    background: #ffbf47!important;
    border-color: transparent!important;
    color: #00f;
    outline: 3px solid #ffbf47;
    text-shadow: none!important
}

[data-whatinput=keyboard] a:focus * {
    color: #00f
}

[data-whatinput=keyboard] summary:focus {
    outline: 3px solid #ffbf47!important
}

button:focus,input:focus {
    outline: 3px solid #ffbf47!important
}

.Layout {
    margin: 0 auto;
    max-width: 1440px
}

@media (min-width: 1260px) {
    .Layout {
        display:grid;
        grid-template-columns: 2em 18em 2em minmax(2em,7fr) 36em minmax(2em,7fr)
    }

    .Layout:after {
        border-right: 1px dashed rgba(119,136,153,.53333);
        content: "";
        grid-column: 3;
        grid-row: 1
    }
}

@media (max-width: 1259.9px) {
    .Layout__side-item {
        margin:1em auto 0;
        max-width: 38em;
        padding: 0 1em
    }
}

@media (min-width: 1260px) {
    .Layout__side-item {
        grid-column:2
    }
}

@media (max-width: 1259.9px) {
    .Layout__main-item {
        margin:0 auto;
        max-width: 38em;
        padding: 0 1em
    }
}

@media (min-width: 1260px) {
    .Layout__main-item {
        grid-column:5
    }
}

@media (min-width: 1260px) {
    .Layout__sticky-column {
        height:100vh;
        padding-top: 2em
    }
}

@media (min-width: 1260px) and (min-height:740px) {
    .Layout__sticky-column {
        position:-webkit-sticky;
        position: sticky;
        top: 0
    }
}

.u-visually-hidden {
    clip: rect(1px,1px,1px,1px);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px
}

.u-no-outline {
    outline: none!important
}

.u-no-shadow {
    text-shadow: none!important
}

.u-loading:before {
    -webkit-animation: loading 0s 1s forwards;
    animation: loading 0s 1s forwards;
    content: "Loading\2026";
    opacity: 0
}

@-webkit-keyframes loading {
    to {
        opacity: 1
    }
}

@keyframes loading {
    to {
        opacity: 1
    }
}

.u-highlight {
    -webkit-animation: highlight 1s forwards;
    animation: highlight 1s forwards;
    border-radius: .3em
}

@-webkit-keyframes highlight {
    0% {
        background-color: #fe8
    }

    to {
        background-color: #fff
    }
}

@keyframes highlight {
    0% {
        background-color: #fe8
    }

    to {
        background-color: #fff
    }
}

.Title {
    background: var(--brand-gradient)
}

.Title__link {
    color: #fff;
    font-size: 1.7em;
    font-weight: 700
}

@media (max-width: 1259.9px) {
    .Title__link {
        display:flex;
        padding: .1em .6em
    }
}

@media (min-width: 1260px) {
    .Title__link {
        -ms-hyphens:none;
        -webkit-hyphens: none;
        align-items: center;
        display: grid;
        font-size: 2em;
        height: 9rem;
        hyphens: none;
        line-height: 1.15
    }
}

.Title__link:hover {
    background: none;
    text-shadow: none
}

.Title__link>:first-child {
    margin-right: auto
}

@media (min-width: 1260px) {
    .Title__link>:first-child {
        background-color:hsla(0,0%,100%,.13333);
        border-radius: 100rem;
        grid-column: 1;
        grid-row: 1;
        margin-left: 1.3em;
        padding: .35em;
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content
    }
}

.Title__link svg {
    fill: #fff
}

@media (max-width: 1259.9px) {
    .Title__link svg {
        height:1.1em;
        vertical-align: -.18em;
        width: 1.1em
    }
}

@media (min-width: 1260px) {
    .Title__link svg {
        display:block
    }
}

@media (min-width: 1260px) {
    .Title__link>:last-child {
        grid-column:1;
        grid-row: 1;
        justify-self: end;
        padding: .5em .7em;
        text-align: right;
        width: 6em
    }
}

.Title__menu {
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding: .2em 1em 1em
}

@media (min-width: 1260px) {
    .Title__menu {
        display:none
    }
}

.Title__menu :first-child a {
    color: #fff;
    text-shadow: none!important
}

.Title__menu :last-child a {
    background: hsla(0,0%,100%,.2);
    border: 2px solid #fff;
    border-radius: 100rem;
    color: #fff;
    padding: .2em .6em .3em .75em;
    text-shadow: none!important
}

.Title__tagline {
    display: none
}

@media (min-width: 1260px) {
    .Title__tagline {
        border:solid #eee;
        border-width: 1px 0;
        display: block;
        font-size: 90%;
        line-height: 2;
        margin: 2.2em auto;
        padding: .6em;
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content
    }

    .Title__tagline b {
        color: #234;
        font-weight: 700;
        margin-right: .3em
    }
}

.Action {
    display: none
}

@media (min-width: 1260px) {
    .Action {
        display:block;
        text-align: center
    }
}

.Action__button {
    background: linear-gradient(45deg,rgba(255,220,0,.46667),rgba(255,220,0,.73333));
    border: none;
    border-bottom: 2px solid rgba(218,165,32,.46667);
    border-radius: 100rem;
    color: inherit;
    display: block;
    line-height: 1.3;
    margin: auto;
    padding: .7em 1.7em .8em;
    text-shadow: none!important;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content
}

.Action__button:hover {
    background: linear-gradient(45deg,rgba(255,220,0,.73333),#ffdc00);
    border-bottom-color: #daa520
}

.Action__button span {
    color: #616161;
    font-size: 87.5%;
    font-weight: 400
}

.Banner {
    background-color: rgba(255,255,136,.46667);
    border-bottom: 1px solid #def;
    margin-top: 1px
}

@media (min-width: 1260px) {
    .Banner {
        background:none;
        border: 2px solid #789;
        display: grid;
        font-size: 90%;
        grid-template-columns: -webkit-max-content 1fr;
        grid-template-columns: max-content 1fr;
        height: 9rem;
        margin-top: 2.2em
    }
}

.Banner summary {
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    padding: .4em .5em .5em;
    user-select: none
}

@media (min-width: 1260px) {
    .Banner summary {
        list-style-type:none;
        padding: .7em .8em;
        pointer-events: none
    }

    .Banner summary::-webkit-details-marker {
        display: none
    }
}

@media (max-width: 1259.9px) {
    .Banner summary {
        overflow:hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .Banner [open] summary {
        line-height: 1.2;
        padding-top: .6em;
        white-space: normal
    }
}

@media (min-width: 1260px) {
    .Banner strong {
        background-color:#fe8;
        border-bottom: 1px solid rgba(0,0,0,.06667);
        color: rgba(34,51,68,.93333);
        font-size: 1.2em;
        padding: .1em .25em
    }
}

.Banner details>:not(summary) {
    margin: .7em .8em
}

.Banner summary+* {
    margin-top: 0!important
}

.Banner ul {
    line-height: 1.8;
    padding-left: 1.5em
}

.Banner__icon {
    display: none
}

@media (min-width: 1260px) {
    .Banner__icon {
        --fill-color:rgba(119,136,153,0.26667);
        align-content: center;
        border-right: 1px solid rgba(119,136,153,.13333);
        display: grid;
        justify-content: center;
        margin: 2px 0;
        width: 6.4rem
    }
}

.Icon {
    display: inline-block;
    fill: currentColor;
    fill: var(--fill-color,currentColor);
    min-height: 1em;
    min-width: 1em;
    position: relative;
    top: -.0625em;
    vertical-align: middle
}

.ToTop {
    margin: 4em auto;
    text-align: center
}

.ToTop button {
    --fill-color:#234;background: transparent;
    border: 1px solid rgba(119,136,153,.53333);
    font-size: 90%;
    padding: .9em .8em .6em
}

.ToTop button:hover {
    border-color: #789
}

.Issues__header {
    margin: 4em 0
}

.Issues__header h2 {
    background-color: rgba(119,136,153,.13333);
    color: #345;
    font-size: 1.3em;
    font-weight: 400;
    line-height: 1;
    margin: 0 auto;
    padding: .6em;
    text-transform: uppercase;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content
}

.Issues__header strong {
    -webkit-background-clip: text;
    background-clip: text;
    background-image: var(--brand-gradient);
    color: transparent;
    font-weight: 700;
    margin: 0 .17em 0 .1em
}

.Issues__body {
    line-height: 1.41
}

.Issues__body,.Issues__body p {
    margin-bottom: 2em
}

.Issues__body :not(.Issues__note)>a {
    border-bottom: 1.5px solid rgba(119,136,153,.2);
    color: inherit;
    display: grid;
    grid-column-gap: 1em;
    grid-template-columns: 6.2rem 1fr;
    grid-template-rows: auto 1fr;
    padding: .6em 1em .7em
}

.Issues__body :not(.Issues__note)>a:hover {
    background: linear-gradient(45deg,rgba(0,0,255,.03529),rgba(0,0,255,.06667));
    border-color: rgba(0,0,255,.13333);
    color: #00f;
    text-shadow: none
}

.Issues__body :not(.Issues__note)>a:hover * {
    color: #00f
}

.Issues__body strong {
    -webkit-background-clip: text;
    background-clip: text;
    background-image: var(--brand-gradient);
    color: transparent;
    font-size: 1.3em;
    font-weight: 700;
    line-height: 1.2
}

.Issues__body time {
    color: #6c6c6c;
    font-size: 90%;
    grid-row: 2
}

.Issues__body span {
    grid-row: 1/span 2
}

.Issues__body code {
    background-color: transparent
}

.Issues__note {
    background: var(--brand-gradient-alpha);
    margin: auto;
    max-width: 70%;
    padding: .6em 1em .8em;
    text-align: center
}

@media (min-width: 610px) {
    .Issue {
        margin-top:4em
    }
}

.Issue__print-link {
    display: none;
    text-align: center
}

.Issue__header {
    margin: 2em 0 3em
}

@media (min-width: 610px) {
    .Issue__header {
        align-items:center;
        display: grid;
        grid-template-columns: 1fr -webkit-max-content 1fr;
        grid-template-columns: 1fr max-content 1fr
    }
}

@media (max-width: 609.9px) {
    .Issue__header p {
        margin-bottom:.4em;
        text-align: center
    }
}

@media (min-width: 610px) {
    .Issue__header p {
        padding-top:.1em
    }
}

.Issue__header h2 {
    background-color: rgba(119,136,153,.13333);
    font-size: 1.3em;
    line-height: 1;
    margin: auto;
    padding: .3em .6em .5em;
    text-transform: uppercase;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content
}

.Issue__header h2 strong {
    -webkit-background-clip: text;
    background-clip: text;
    background-image: var(--brand-gradient);
    color: transparent;
    font-weight: 700
}

.Issue__header h2 b {
    font-size: 1.3em;
    font-weight: 700;
    margin: auto .3em auto .2em
}

@media (max-width: 609.9px) {
    .Issue__header h2 span {
        display:none
    }
}

.Issue__author {
    font-style: italic;
    text-align: center
}

.Issue__body h3 {
    color: #345;
    font-size: 1.75em;
    font-weight: 700;
    line-height: 1.2;
    margin: 2em 0 .6em;
    position: relative;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content
}

.Issue__body h4 {
    font-size: 1.25em;
    margin-bottom: .2em;
    margin-top: 1.5em
}

.Issue__body blockquote,.Issue__body ol,.Issue__body p,.Issue__body ul {
    margin: 1em 0
}

.Issue__body blockquote {
    background-image: linear-gradient(45deg,rgba(238,238,221,.73333),rgba(238,238,221,.86667));
    border-bottom: 1px solid #ddc;
    line-height: 1.48;
    padding: .5em .5em .7em 2.35em;
    position: relative
}

.Issue__body blockquote:before {
    color: #998;
    content: "\201C";
    font-family: Georgia,serif;
    font-size: 3em;
    font-weight: 700;
    left: .15em;
    line-height: 1;
    position: absolute;
    top: .2em
}

.Issue__body pre {
    border-radius: .2em;
    font-size: 92.5%;
    line-height: 1.4;
    overflow: auto
}

.Issue__body img,.Issue__body video {
    background: #fff;
    border: 1px solid #bcd;
    display: block;
    margin: 0 auto;
    width: 100%
}

@media (min-width: 768px) {
    .Issue__body img,.Issue__body video {
        -o-object-fit:scale-down;
        box-shadow: inset 0 0 .6em #def;
        object-fit: scale-down;
        padding: 1.2em
    }
}

.Issue__body table {
    width: 100%
}

.Issue__body td,.Issue__body th {
    border: 1px solid #ccc;
    font-size: 87.5%;
    line-height: 1.4;
    padding: .3em .5em
}

.Issue__body kbd {
    background-color: #f9f9f9;
    border: 1px solid #ccc;
    border-radius: 3px;
    box-shadow: 0 1px 0 rgba(0,0,0,.2),inset 0 0 0 2px #fff;
    color: #333;
    font-family: inherit;
    font-size: 80%;
    margin: 0 .1em;
    padding: .1em .5em;
    text-shadow: 0 1px 0 #fff;
    white-space: nowrap
}

.Issue__body kbd,.Issue__body small {
    display: inline-block;
    line-height: 1.4
}

.Issue__body h4+* {
    margin-top: 0
}

.Issue__body li+li {
    margin-top: .4em
}

.Issue__body li>blockquote {
    margin: .6em 0
}

.Issue__footer {
    margin: 4em 0
}

.Issue__thank-you {
    background-image: var(--brand-gradient);
    background-size: 100% .3em;
    margin: auto;
    padding: .5em;
    text-align: center;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content
}

.Issue__discuss {
    align-items: center;
    background: var(--brand-gradient-alpha);
    display: flex;
    line-height: 1.41;
    margin: 2em auto auto;
    max-width: 19.5em;
    padding: .6em 1em .8em 1.57em
}

.Issue__discuss svg {
    fill: #234;
    flex-shrink: 0;
    margin-right: 1.32em
}

.hljs {
    background-color: #f9f9f9;
    padding: .5em .8em .6em
}

.hljs-comment {
    color: #737373
}

.hljs-built_in,.hljs-builtin-name {
    color: #007ca5
}

.Subscribe {
    display: inline-block;
    position: relative
}

[data-mailtrain-subscription-widget] {
    text-align: center
}

[data-mailtrain-subscription-widget] .form-group.email {
    display: inline-block
}

[data-mailtrain-subscription-widget] button,[data-mailtrain-subscription-widget] input {
    margin: 0;
    padding: 0 .3em;
    vertical-align: top
}

[data-mailtrain-subscription-widget] [type=email] {
    margin-right: .3em;
    width: 10em
}

@media (min-width: 610px) {
    [data-mailtrain-subscription-widget] {
        font-size:.9em
    }

    [data-mailtrain-subscription-widget] [type=email] {
        width: 18em
    }

    [data-mailtrain-subscription-widget] button:after {
        content: " to weekly emails"
    }
}

[data-mailtrain-subscription-widget] .status {
    line-height: 1.31;
    margin-top: .4em;
    position: absolute;
    text-align: left;
    width: 100%
}

[data-mailtrain-subscription-widget] .status>* {
    padding: .4em .6em .5em
}

[data-mailtrain-subscription-widget] .info,[data-mailtrain-subscription-widget] .spinner {
    background-color: #bde5f8
}

[data-mailtrain-subscription-widget] .success {
    background-color: #dff2bf
}

[data-mailtrain-subscription-widget] .error {
    background-color: #ffbaba
}

.Subscribe__display-none {
    display: none
}

.Error {
    border: 1px solid #f44;
    margin: 3em auto 0;
    max-width: 26em;
    padding: .8em 1.4em
}

.Error h3 {
    font-size: 2em;
    margin-bottom: .5em
}

.Error h3 strong {
    color: #f44;
    text-transform: uppercase
}

.Error__back-link a {
    border: 1px solid #eee;
    display: block;
    margin: 1.5em 0 1em;
    padding: .3em 0;
    text-align: center
}

.Error__back-link a:hover {
    border-color: rgba(0,0,255,.26667)
}

.About ol {
    margin: 3em 0
}

.About li {
    margin-bottom: 1.5em;
    padding: .3em .6em
}

.About__header {
    align-items: center;
    display: grid;
    grid-template-columns: 1fr -webkit-max-content 1fr;
    grid-template-columns: 1fr max-content 1fr;
    margin: 5.5em 0
}

.About__header :first-child {
    padding-top: .3em
}

.About__header h2 {
    font-size: 2.4em;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content
}

.Pdf__header {
    margin-top: 110mm;
    page-break-after: always;
    text-align: center
}

.Pdf__header h2 {
    background-color: rgba(119,136,153,.13333);
    font-size: 3em;
    line-height: 1;
    margin: .35em auto;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content
}

.Pdf__header strong {
    -webkit-background-clip: text;
    background-clip: text;
    background-image: var(--brand-gradient);
    color: transparent;
    display: block;
    font-weight: 700;
    padding: .3em .5em .4em
}

.Pdf__header p {
    font-size: 1.5em
}

@page {
    margin: 10mm 0;
    size: A4
}

@media print {
    body {
        -webkit-print-color-adjust: exact;
        width: 210mm
    }

    .Layout {
        display: block;
        width: auto
    }

    .Banner,.Issue__footer,.Issue__header p,.Layout__side-item,.ToTop {
        display: none
    }

    .Issue {
        page-break-after: always
    }

    .Issue__header h2 span {
        display: inline!important
    }

    .Issue__print-link {
        display: block
    }
}